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

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

apps/web-antd/src/layouts/basic.vue

@@ -5,12 +5,7 @@ import { useRouter } from 'vue-router';
 import { AuthenticationLoginExpiredModal } from '@vben/common-ui';
 import { VBEN_DOC_URL, VBEN_GITHUB_URL } from '@vben/constants';
 import { useWatermark } from '@vben/hooks';
-import {
+import { BookOpenText, CircleHelp, GiteeIcon } from '@vben/icons';
-  BookOpenText,
-  CircleHelp,
-  GiteeIcon,
-  GitHubOutlined,
-} from '@vben/icons';
 import {
   BasicLayout,
   LockScreen,
@@ -21,7 +16,7 @@ import { preferences } from '@vben/preferences';
 import { useAccessStore, useUserStore } from '@vben/stores';
 import { openWindow } from '@vben/utils';
 
-import { UserOutlined } from '@ant-design/icons-vue';
+import { GithubOutlined, UserOutlined } from '@ant-design/icons-vue';
 
 import { TenantToggle } from '#/components/tenant-toggle';
 import { $t } from '#/locales';
@@ -71,7 +66,7 @@ const menus = computed(() => {
           target: '_blank',
         });
       },
-      icon: GitHubOutlined,
+      icon: GithubOutlined,
       text: 'Vben官方地址',
     },
     {

apps/web-antd/src/utils/render.tsx

@@ -6,16 +6,7 @@ import type { DictFallback } from '#/components/dict/src/type';
 import { h } from 'vue';
 
 import { JsonPreview } from '@vben/common-ui';
-import {
+import { IconifyIcon, VbenIcon } from '@vben/icons';
-  AndroidIcon,
-  DefaultOsIcon,
-  IconifyIcon,
-  IPhoneIcon,
-  LinuxIcon,
-  OSXIcon,
-  VbenIcon,
-  WindowsIcon,
-} from '@vben/icons';
 import { cn } from '@vben/utils';
 
 import { Tag } from 'antdv-next';
@@ -177,13 +168,15 @@ export function renderIconSpan(
 }
 
 const osOptions = [
-  { icon: WindowsIcon, value: 'windows' },
+  { icon: 'icon-[devicon--windows8]', value: 'windows' },
-  { icon: LinuxIcon, value: 'linux' },
+  { icon: 'icon-[wpf--macos]', value: 'osx' },
-  { icon: OSXIcon, value: 'osx' },
+  { icon: 'icon-[devicon--linux]', value: 'linux' },
-  { icon: AndroidIcon, value: 'android' },
+  { icon: 'icon-[flat-color-icons--android-os]', value: 'android' },
-  { icon: IPhoneIcon, value: 'iphone' },
+  { icon: 'icon-[majesticons--iphone-x-apps-line]', value: 'ios' },
 ];
 
+const DefaultOsIcon = 'icon-[ic--outline-computer]';
+
 /**
  * 浏览器图标
  * cn.hutool.http.useragent -> browers
@@ -206,7 +199,7 @@ const browserOptions = [
 
 const DefaultBrowserIcon = 'icon-[ph--browser-duotone]';
 
-export function renderOsIcon(os: string, center = false) {
+export function renderOsIcon(os: string, className?: string) {
   if (!os) {
     return;
   }
@@ -218,7 +211,7 @@ export function renderOsIcon(os: string, center = false) {
     current = osOptions[0];
   }
   const icon = current ? current.icon : DefaultOsIcon;
-  return renderIconSpan(icon, os, center, '5px');
+  return <span class={cn(icon, className)} />;
 }
 
 export function renderBrowserIcon(browser: string, className?: string) {

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 }) => {
-        /**
+        return (
-         *  Windows 10 or Windows Server 2016 太长了 分割一下 详情依旧能看到详细的
+          <div class="flex items-center justify-center gap-[6px]">
-         */
+            {renderOsIcon(row.os, 'shrink-0')}
-        let value = row.os;
+            {row.os}
-        if (value) {
+          </div>
-          const split = value.split(' or ');
+        );
-          if (split.length === 2) {
-            value = split[0];
-          }
-        }
-        return renderOsIcon(value, true) as VNode;
       },
     },
   },

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 太长了 分割一下 详情依旧能看到详细的
+        return (
-        let value = row.os;
+          <div class="flex items-center justify-center gap-[6px]">
-        if (value) {
+            {renderOsIcon(row.os, 'shrink-0')}
-          const split = value.split(' or ');
+            {row.os}
-          if (split.length === 2) {
+          </div>
-            value = split[0];
+        );
-          }
-        }
-        return renderOsIcon(value, true) as VNode;
       },
     },
   },

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>
+);

packages/icons/src/iconify-offline/index.ts

@@ -1,38 +1,13 @@
 import { createIconifyOfflineIcon } from '@vben-core/icons';
 
-import githubOutlined from '@iconify/icons-ant-design/github-outlined';
-import userOutlined from '@iconify/icons-ant-design/user-outlined';
-import defaultFileIcon from '@iconify/icons-bx/file';
-import sqlIcon from '@iconify/icons-carbon/sql';
-import linuxIcon from '@iconify/icons-devicon/linux';
-import windowsIcon from '@iconify/icons-devicon/windows8';
-import androidIcon from '@iconify/icons-flat-color-icons/android-os';
 import folderIcon from '@iconify/icons-flat-color-icons/folder';
-import defaultOsIcon from '@iconify/icons-ic/outline-computer';
-import vueIcon from '@iconify/icons-logos/vue';
-import iphoneIcon from '@iconify/icons-majesticons/iphone-x-apps-line';
 import menuIcon from '@iconify/icons-material-symbols/menu';
 import okButtonIcon from '@iconify/icons-mdi/button-pointer';
 import dingdingFill from '@iconify/icons-ri/dingding-fill';
 import giteeIcon from '@iconify/icons-simple-icons/gitee';
-import javaIcon from '@iconify/icons-skill-icons/java-light';
-import tsIcon from '@iconify/icons-skill-icons/typescript';
-import xmlIcon from '@iconify/icons-tabler/file-type-xml';
-import osxIcon from '@iconify/icons-wpf/macos';
 
 import './menu-icons';
 
-// 用户 下拉菜单
-export const GitHubOutlined = createIconifyOfflineIcon(
-  'ant-design:github-outlined',
-  githubOutlined,
-);
-
-export const UserOutlined = createIconifyOfflineIcon(
-  'ant-design:user-outlined',
-  userOutlined,
-);
-
 // 第三方登录相关图标
 export const DingdingIcon = createIconifyOfflineIcon(
   'ri:dingding-fill',
@@ -43,27 +18,6 @@ export const GiteeIcon = createIconifyOfflineIcon(
   giteeIcon,
 );
 
-// 系统相关图标
-export const WindowsIcon = createIconifyOfflineIcon(
-  'devicon:windows8',
-  windowsIcon,
-);
-export const LinuxIcon = createIconifyOfflineIcon('devicon:linux', linuxIcon);
-export const OSXIcon = createIconifyOfflineIcon('wpf:macos', osxIcon);
-export const AndroidIcon = createIconifyOfflineIcon(
-  'flat-color-icons:android-os',
-  androidIcon,
-);
-export const IPhoneIcon = createIconifyOfflineIcon(
-  'majesticons:iphone-x-apps-line',
-  iphoneIcon,
-);
-// 上面图标没找到 默认图标
-export const DefaultOsIcon = createIconifyOfflineIcon(
-  'ic:outline-computer',
-  defaultOsIcon,
-);
-
 // 菜单类型 目录/按钮/菜单
 export const FolderIcon = createIconifyOfflineIcon(
   'flat-color-icons:folder',
@@ -77,22 +31,3 @@ export const MenuIcon = createIconifyOfflineIcon(
   'material-symbols:menu',
   menuIcon,
 );
-
-export const JavaIcon = createIconifyOfflineIcon(
-  'skill-icons:java-light',
-  javaIcon,
-);
-export const XmlIcon = createIconifyOfflineIcon(
-  'tabler:file-type-xml',
-  xmlIcon,
-);
-export const SqlIcon = createIconifyOfflineIcon('carbon:sql', sqlIcon);
-export const TsIcon = createIconifyOfflineIcon(
-  'skill-icons:typescript',
-  tsIcon,
-);
-export const VueIcon = createIconifyOfflineIcon('logos:vue', vueIcon);
-export const DefaultFileIcon = createIconifyOfflineIcon(
-  'flat-color-icons:folder',
-  defaultFileIcon,
-);