feat(monitor): 在浏览器列中同时显示图标和文本

重构浏览器图标渲染逻辑，使用 Iconify 图标集替代自定义 SVG 组件
- 修改 login-info-modal.vue 和 data.tsx 中的浏览器列显示，同时展示图标和浏览器名称
- 新增 online 监控页面的数据配置，包含浏览器和系统列
- 重写 render.tsx 中的 renderBrowserIcon 函数，支持 Iconify 在线/离线图标
- 清理 icons 包中已不再使用的浏览器相关离线图标定义

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

@@ -8,25 +8,15 @@ import { h } from 'vue';
 import { JsonPreview } from '@vben/common-ui';
 import {
   AndroidIcon,
-  BaiduIcon,
-  ChromeIcon,
-  DefaultBrowserIcon,
   DefaultOsIcon,
-  DingtalkIcon,
-  EdgeIcon,
-  FirefoxIcon,
   IconifyIcon,
   IPhoneIcon,
   LinuxIcon,
-  MicromessengerIcon,
-  OperaIcon,
   OSXIcon,
-  QuarkIcon,
+  VbenIcon,
-  SafariIcon,
-  SvgQQIcon,
-  UcIcon,
   WindowsIcon,
 } from '@vben/icons';
+import { cn } from '@vben/utils';
 
 import { Tag } from 'antdv-next';
 
@@ -199,21 +189,23 @@ const osOptions = [
  * cn.hutool.http.useragent -> browers
  */
 const browserOptions = [
-  { icon: ChromeIcon, value: 'chrome' },
+  { icon: 'icon-[logos--chrome]', value: 'chrome' },
-  { icon: EdgeIcon, value: 'edge' },
+  { icon: 'icon-[logos--microsoft-edge]', value: 'edge' },
-  { icon: FirefoxIcon, value: 'firefox' },
+  { icon: 'icon-[logos--firefox]', value: 'firefox' },
-  { icon: OperaIcon, value: 'opera' },
+  { icon: 'icon-[logos--opera]', value: 'opera' },
-  { icon: SafariIcon, value: 'safari' },
+  { icon: 'icon-[logos--safari]', value: 'safari' },
-  { icon: MicromessengerIcon, value: 'micromessenger' },
+  { icon: 'icon-[mdi--wechat]', value: 'micromessenger' },
-  { icon: MicromessengerIcon, value: 'windowswechat' },
+  { icon: 'icon-[mdi--wechat]', value: 'windowswechat' },
-  { icon: QuarkIcon, value: 'quark' },
+  { icon: 'icon-[logos--quarkus-icon]', value: 'quark' },
-  { icon: MicromessengerIcon, value: 'wxwork' },
+  { icon: 'icon-[mdi--wechat]', value: 'wxwork' },
-  { icon: SvgQQIcon, value: 'qq' },
+  { icon: 'svg:qq', value: 'qq', type: 'offline' },
-  { icon: DingtalkIcon, value: 'dingtalk' },
+  { icon: 'icon-[ri--dingding-line]', value: 'dingtalk' },
-  { icon: UcIcon, value: 'uc' },
+  { icon: 'icon-[arcticons--uc-browser]', value: 'uc' },
-  { icon: BaiduIcon, value: 'baidu' },
+  { icon: 'icon-[ri--baidu-fill]', value: 'baidu' },
 ];
 
+const DefaultBrowserIcon = 'icon-[ph--browser-duotone]';
+
 export function renderOsIcon(os: string, center = false) {
   if (!os) {
     return;
@@ -229,13 +221,21 @@ export function renderOsIcon(os: string, center = false) {
   return renderIconSpan(icon, os, center, '5px');
 }
 
-export function renderBrowserIcon(browser: string, center = false) {
+export function renderBrowserIcon(browser: string, className?: string) {
   if (!browser) {
     return;
   }
   const current = browserOptions.find((item) =>
     browser.toLocaleLowerCase().includes(item.value),
   );
-  const icon = current ? current.icon : DefaultBrowserIcon;
+  // TODO: 需要优化
-  return renderIconSpan(icon, browser, center, '5px');
+  if (!current) {
+    return <span class={cn(DefaultBrowserIcon, className)} />;
+  }
+  // support offline icon
+  const icon = current.icon;
+  if (current.type === 'offline') {
+    return <VbenIcon icon={icon} />;
+  }
+  return <span class={cn(icon, className)} />;
 }

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

@@ -58,7 +58,12 @@ export const columns: VxeGridProps['columns'] = [
     field: 'browser',
     slots: {
       default: ({ row }) => {
-        return renderBrowserIcon(row.browser, true) as VNode;
+        return (
+          <div class="flex items-center justify-center gap-[6px]">
+            {renderBrowserIcon(row.browser, 'shrink-0')}
+            {row.browser}
+          </div>
+        );
       },
     },
   },

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

@@ -67,7 +67,12 @@ const items = computed<DescriptionsProps['items']>(() => {
     },
     {
       label: '浏览器',
-      content: renderBrowserIcon(data.browser),
+      content: (
+        <div class="flex items-center justify-center gap-[6px]">
+          {renderBrowserIcon(data.browser, 'shrink-0')}
+          {data.browser}
+        </div>
+      ),
     },
   ];
 });

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

@@ -46,7 +46,12 @@ export const columns: VxeGridProps['columns'] = [
     field: 'browser',
     slots: {
       default: ({ row }) => {
-        return renderBrowserIcon(row.browser, true) as VNode;
+        return (
+          <div class="flex items-center justify-center gap-[6px]">
+            {renderBrowserIcon(row.browser, 'shrink-0')}
+            {row.browser}
+          </div>
+        );
       },
     },
   },

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

@@ -2,7 +2,6 @@ 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 ucIcon from '@iconify/icons-arcticons/uc-browser';
 import defaultFileIcon from '@iconify/icons-bx/file';
 import sqlIcon from '@iconify/icons-carbon/sql';
 import linuxIcon from '@iconify/icons-devicon/linux';
@@ -10,23 +9,12 @@ 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 chromeIcon from '@iconify/icons-logos/chrome';
-import firefoxIcon from '@iconify/icons-logos/firefox';
-import edgeIcon from '@iconify/icons-logos/microsoft-edge';
-import operaIcon from '@iconify/icons-logos/opera';
-import quarkIcon from '@iconify/icons-logos/quarkus-icon';
-import safariIcon from '@iconify/icons-logos/safari';
 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 micromessengerIcon from '@iconify/icons-mdi/wechat';
-import defaultBrowserIcon from '@iconify/icons-ph/browser-duotone';
-import baiduIcon from '@iconify/icons-ri/baidu-fill';
 import dingdingFill from '@iconify/icons-ri/dingding-fill';
-import dingtalkIcon from '@iconify/icons-ri/dingding-line';
 import giteeIcon from '@iconify/icons-simple-icons/gitee';
-import qqIcon from '@iconify/icons-simple-icons/tencentqq';
 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';
@@ -76,42 +64,6 @@ export const DefaultOsIcon = createIconifyOfflineIcon(
   defaultOsIcon,
 );
 
-// 浏览器相关图标
-export const ChromeIcon = createIconifyOfflineIcon('logos:chrome', chromeIcon);
-export const EdgeIcon = createIconifyOfflineIcon(
-  'logos:microsoft-edge',
-  edgeIcon,
-);
-export const FirefoxIcon = createIconifyOfflineIcon(
-  'logos:firefox',
-  firefoxIcon,
-);
-export const OperaIcon = createIconifyOfflineIcon('logos:opera', operaIcon);
-export const SafariIcon = createIconifyOfflineIcon('logos:safari', safariIcon);
-export const MicromessengerIcon = createIconifyOfflineIcon(
-  'mdi:wechat',
-  micromessengerIcon,
-);
-export const QuarkIcon = createIconifyOfflineIcon(
-  'logos:quarkus-icon',
-  quarkIcon,
-);
-export const QQIcon = createIconifyOfflineIcon(
-  'simple-icons:tencentqq',
-  qqIcon,
-);
-export const DingtalkIcon = createIconifyOfflineIcon(
-  'ri:dingding-line',
-  dingtalkIcon,
-);
-export const UcIcon = createIconifyOfflineIcon('arcticons:uc-browser', ucIcon);
-export const BaiduIcon = createIconifyOfflineIcon('ri:baidu-fill', baiduIcon);
-// 未知浏览器图标
-export const DefaultBrowserIcon = createIconifyOfflineIcon(
-  'ph:browser-duotone',
-  defaultBrowserIcon,
-);
-
 // 菜单类型 目录/按钮/菜单
 export const FolderIcon = createIconifyOfflineIcon(
   'flat-color-icons:folder',