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,
-  SafariIcon,
-  SvgQQIcon,
-  UcIcon,
+  VbenIcon,
   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: EdgeIcon, value: 'edge' },
-  { icon: FirefoxIcon, value: 'firefox' },
-  { icon: OperaIcon, value: 'opera' },
-  { icon: SafariIcon, value: 'safari' },
-  { icon: MicromessengerIcon, value: 'micromessenger' },
-  { icon: MicromessengerIcon, value: 'windowswechat' },
-  { icon: QuarkIcon, value: 'quark' },
-  { icon: MicromessengerIcon, value: 'wxwork' },
-  { icon: SvgQQIcon, value: 'qq' },
-  { icon: DingtalkIcon, value: 'dingtalk' },
-  { icon: UcIcon, value: 'uc' },
-  { icon: BaiduIcon, value: 'baidu' },
+  { icon: 'icon-[logos--chrome]', value: 'chrome' },
+  { icon: 'icon-[logos--microsoft-edge]', value: 'edge' },
+  { icon: 'icon-[logos--firefox]', value: 'firefox' },
+  { icon: 'icon-[logos--opera]', value: 'opera' },
+  { icon: 'icon-[logos--safari]', value: 'safari' },
+  { icon: 'icon-[mdi--wechat]', value: 'micromessenger' },
+  { icon: 'icon-[mdi--wechat]', value: 'windowswechat' },
+  { icon: 'icon-[logos--quarkus-icon]', value: 'quark' },
+  { icon: 'icon-[mdi--wechat]', value: 'wxwork' },
+  { icon: 'svg:qq', value: 'qq', type: 'offline' },
+  { icon: 'icon-[ri--dingding-line]', value: 'dingtalk' },
+  { icon: 'icon-[arcticons--uc-browser]', value: 'uc' },
+  { 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;
-  return renderIconSpan(icon, browser, center, '5px');
+  // TODO: 需要优化
+  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)} />;
 }