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

- 将操作系统和浏览器图标从自定义组件改为使用 Iconify 类名，简化渲染逻辑
- 在登录信息和在线用户表格中，将操作系统图标与文本并排显示，提升可读性
- 重构代码生成预览功能，将图标配置移至独立文件，提高可维护性
- 更新 GitHub 图标引用，使用 Ant Design Vue 的 GithubOutlined 组件

apps/web-antd/src/views/monitor/logininfor/data.tsx

@@ -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>
+        );
       },
     },
   },

apps/web-antd/src/views/monitor/logininfor/login-info-modal.vue

@@ -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: '浏览器',

apps/web-antd/src/views/monitor/online/data.tsx

@@ -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>
+        );
       },
     },
   },

apps/web-antd/src/views/tool/gen/code-preview-modal.vue

@@ -1,29 +1,22 @@
 <script setup lang="ts">
-import type { Key } from 'antdv-next/es/vc-tree/interface';
+import type { Key } from 'antdv-next/dist/table/interface';
 
 import type { Component } from 'vue';
 
 import type { LanguageSupport } from '@vben/common-ui';
 import type { Recordable } from '@vben/types';
 
-import { markRaw, ref } from 'vue';
+import { ref } from 'vue';
 
 import { CodeMirror, useVbenModal } from '@vben/common-ui';
-import {
-  DefaultFileIcon,
-  FolderIcon,
-  JavaIcon,
-  SqlIcon,
-  TsIcon,
-  VueIcon,
-  XmlIcon,
-} from '@vben/icons';
 
 import { useClipboard } from '@vueuse/core';
 import { Alert, Skeleton, Tree } from 'antdv-next';
 
 import { previewCode } from '#/api/tool/gen';
 
+import { defaultFileIcon, defaultFolderIcon, iconMap } from './data';
+
 interface TreeNode {
   children: TreeNode[];
   title: string;
@@ -97,17 +90,7 @@ function convertToTree(paths: string[]): TreeNode[] {
   return tree;
 }
 
-const iconMap = [
-  { key: 'java', value: markRaw(JavaIcon) },
-  { key: 'xml', value: markRaw(XmlIcon) },
-  { key: 'sql', value: markRaw(SqlIcon) },
-  { key: 'ts', value: markRaw(TsIcon) },
-  { key: 'vue', value: markRaw(VueIcon) },
-  { key: 'folder', value: markRaw(FolderIcon) },
-];
 function findIcon(path: string) {
-  const defaultFileIcon = DefaultFileIcon;
-  const defaultFolderIcon = FolderIcon;
   if (path.endsWith('.vm')) {
     const realPath = path.slice(0, -3);
     // 是否为指定拓展名
@@ -178,7 +161,7 @@ const { copy } = useClipboard({ legacy: true });
           default-expand-all
           @select="handleSelect"
         >
-          <template #title="{ title, icon }">
+          <template #titleRender="{ title, icon }">
             <div class="flex items-center gap-[16px]">
               <component :is="icon" />
               <span>{{ title }}</span>

apps/web-antd/src/views/tool/gen/data.tsx

@@ -58,3 +58,22 @@ export const columns: VxeGridProps['columns'] = [
     width: 300,
   },
 ];
+
+export const iconMap = [
+  { key: 'java', value: <span class="icon-[skill-icons--java-light]"></span> },
+  { key: 'xml', value: <span class="icon-[tabler--file-type-xml]"></span> },
+  { key: 'sql', value: <span class="icon-[carbon--sql]"></span> },
+  { key: 'ts', value: <span class="icon-[skill-icons--typescript]"></span> },
+  { key: 'vue', value: <span class="icon-[logos--vue]"></span> },
+  {
+    key: 'folder',
+    value: <span class="icon-[flat-color-icons--folder]"></span>,
+  },
+];
+
+export const defaultFileIcon = (
+  <span class="icon-[flat-color-icons--folder]"></span>
+);
+export const defaultFolderIcon = (
+  <span class="icon-[flat-color-icons--folder]"></span>
+);