feat: 统一系统图标渲染方式并优化代码生成预览

- 将操作系统和浏览器图标从自定义组件改为使用 Iconify 类名,简化渲染逻辑
- 在登录信息和在线用户表格中,将操作系统图标与文本并排显示,提升可读性
- 重构代码生成预览功能,将图标配置移至独立文件,提高可维护性
- 更新 GitHub 图标引用,使用 Ant Design Vue 的 GithubOutlined 组件
This commit is contained in:
dap
2026-01-23 11:12:26 +08:00
parent 052d7d5cdd
commit d475b29e9f
8 changed files with 55 additions and 137 deletions

View File

@@ -1,5 +1,3 @@
import type { VNode } from 'vue';
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
@@ -72,17 +70,12 @@ export const columns: VxeGridProps['columns'] = [
field: 'os',
slots: {
default: ({ row }) => {
/**
* Windows 10 or Windows Server 2016 太长了 分割一下 详情依旧能看到详细的
*/
let value = row.os;
if (value) {
const split = value.split(' or ');
if (split.length === 2) {
value = split[0];
}
}
return renderOsIcon(value, true) as VNode;
return (
<div class="flex items-center justify-center gap-[6px]">
{renderOsIcon(row.os, 'shrink-0')}
{row.os}
</div>
);
},
},
},

View File

@@ -63,7 +63,12 @@ const items = computed<DescriptionsProps['items']>(() => {
},
{
label: '登录设备',
content: renderOsIcon(data.os),
content: (
<div class="flex items-center justify-center gap-[6px]">
{renderOsIcon(data.os, 'shrink-0')}
{data.os}
</div>
),
},
{
label: '浏览器',

View File

@@ -1,5 +1,3 @@
import type { VNode } from 'vue';
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
@@ -60,15 +58,12 @@ export const columns: VxeGridProps['columns'] = [
field: 'os',
slots: {
default: ({ row }) => {
// Windows 10 or Windows Server 2016 太长了 分割一下 详情依旧能看到详细的
let value = row.os;
if (value) {
const split = value.split(' or ');
if (split.length === 2) {
value = split[0];
}
}
return renderOsIcon(value, true) as VNode;
return (
<div class="flex items-center justify-center gap-[6px]">
{renderOsIcon(row.os, 'shrink-0')}
{row.os}
</div>
);
},
},
},