From 5de60e2a8356489a5af8f0bd75ad43752e8af8cd Mon Sep 17 00:00:00 2001
From: xlsea <m@xlsea.cn>
Date: Tue, 29 Apr 2025 20:27:55 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E4=BC=98=E5=8C=96=E4=B8=AA=E4=BA=BA?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83=E5=9C=A8=E7=BA=BF=E8=AE=BE=E5=A4=87=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/format.ts                           |  9 ++---
 .../user-center/modules/online-table.vue      | 35 +++++++++++++++++--
 src/views/monitor/cache/index.vue             |  9 +----
 3 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/src/utils/format.ts b/src/utils/format.ts
index 0aab0764..5dd27e05 100644
--- a/src/utils/format.ts
+++ b/src/utils/format.ts
@@ -31,12 +31,13 @@ const browserOptions = [
   { icon: 'arcticons:uc-browser', value: 'uc' },
   { icon: 'ri:baidu-fill', value: 'baidu' }
 ];
+
 const osOptions = [
   { icon: 'devicon:windows8', value: 'windows' },
-  { icon: 'wpf:macoss', value: 'osx' },
+  { icon: 'cbi:imac', value: 'osx' },
   { icon: 'devicon:linux', value: 'linux' },
-  { icon: 'material-icon-theme:android:', value: 'android' },
-  { icon: 'wpf:iphone', value: 'ios' }
+  { icon: 'logos:android-icon', value: 'android' },
+  { icon: 'file-icons:apple', value: 'ios' }
 ];
 /**
  * 获取浏览器图标
@@ -57,5 +58,5 @@ export function getBrowserIcon(browser: string): string {
  */
 export function getOsIcon(os: string): string {
   const icon = osOptions.find(item => os.toLocaleLowerCase().includes(item.value));
-  return icon?.icon ?? 'mingcute:device-fill';
+  return icon?.icon || 'mingcute:device-fill';
 }
diff --git a/src/views/_builtin/user-center/modules/online-table.vue b/src/views/_builtin/user-center/modules/online-table.vue
index fb17ff3d..d5d4c8af 100644
--- a/src/views/_builtin/user-center/modules/online-table.vue
+++ b/src/views/_builtin/user-center/modules/online-table.vue
@@ -4,8 +4,10 @@ import { useLoading } from '@sa/hooks';
 import { fetchForceLogout, fetchGetOnlineDeviceList } from '@/service/api/monitor';
 import { useAppStore } from '@/store/modules/app';
 import { useTable } from '@/hooks/common/table';
+import { getBrowserIcon, getOsIcon } from '@/utils/format';
 import { $t } from '@/locales';
 import ButtonIcon from '@/components/custom/button-icon.vue';
+import SvgIcon from '@/components/custom/svg-icon.vue';
 
 defineOptions({
   name: 'OnlineTable'
@@ -18,14 +20,41 @@ const { columns, data, loading, mobilePagination, getData } = useTable({
   apiFn: fetchGetOnlineDeviceList,
   apiParams: {
     pageNum: 1,
-    pageSize: 10
+    pageSize: 15
   },
   columns: () => [
     { title: '用户名', key: 'userName', align: 'center', minWidth: 120 },
     { title: 'IP地址', key: 'ipaddr', align: 'center', minWidth: 120 },
     { title: '登录地点', key: 'loginLocation', align: 'center', minWidth: 120 },
-    { title: '浏览器', key: 'browser', align: 'center', minWidth: 120 },
-    { title: '操作系统', key: 'os', align: 'center', minWidth: 120 },
+    {
+      title: '浏览器',
+      key: 'browser',
+      align: 'center',
+      minWidth: 120,
+      render: row => {
+        return (
+          <div class="flex items-center justify-center gap-2">
+            <SvgIcon icon={getBrowserIcon(row.browser)} />
+            {row.browser}
+          </div>
+        );
+      }
+    },
+    {
+      title: '操作系统',
+      key: 'os',
+      align: 'center',
+      minWidth: 120,
+      render: row => {
+        const osName = row.os?.split(' or ')[0] ?? '';
+        return (
+          <div class="flex items-center justify-center gap-2">
+            <SvgIcon icon={getOsIcon(osName)} />
+            {osName}
+          </div>
+        );
+      }
+    },
     {
       title: '登录时间',
       key: 'loginTime',
diff --git a/src/views/monitor/cache/index.vue b/src/views/monitor/cache/index.vue
index d02b80b7..fff6b5c8 100644
--- a/src/views/monitor/cache/index.vue
+++ b/src/views/monitor/cache/index.vue
@@ -535,11 +535,6 @@ function forceUpdateCharts() {
 onMounted(async () => {
   try {
     await getCacheInfo();
-
-    // 确保图表被渲染后，再次尝试强制更新
-    setTimeout(() => {
-      forceUpdateCharts();
-    }, 500);
   } catch {
     fetchError.value = '初始化数据失败，请尝试刷新';
   }
@@ -638,9 +633,7 @@ onUnmounted(() => {
       <NGrid :cols="2" :x-gap="16" :y-gap="16" responsive="screen" item-responsive>
         <NGi span="0:24 1000:12">
           <NCard title="命令统计" :bordered="false" class="chart-card card-wrapper">
-            <NSpin :show="loading">
-              <div ref="commandChartRef" class="h-360px overflow-hidden"></div>
-            </NSpin>
+            <div ref="commandChartRef" class="h-360px overflow-hidden"></div>
           </NCard>
         </NGi>
         <NGi span="0:24 1000:12">