style: 优化个人中心在线设备列表

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';
 }

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',

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">