fix: Safari浏览器兼容性问题处理 (#98)

* fix: 修复日志列表兼容问题
* fix: 仪表盘折线图兼容性问题

Author: tbphp

web/package.json

@@ -4,14 +4,7 @@
   "version": "0.1.0",
   "description": "GPT Load Balancer Frontend - A modern Vue 3 frontend for GPT load balancing service",
   "type": "module",
-  "keywords": [
-    "vue3",
-    "typescript",
-    "vite",
-    "naive-ui",
-    "gpt-load",
-    "frontend"
-  ],
+  "keywords": ["vue3", "typescript", "vite", "naive-ui", "gpt-load", "frontend"],
   "author": "tbphp",
   "license": "MIT",
   "repository": {

web/src/components/BaseInfoCard.vue

@@ -12,7 +12,7 @@ const animatedValues = ref<Record<string, number>>({});
 // 格式化数值显示
 const formatValue = (value: number, type: "count" | "rate" = "count"): string => {
   if (type === "rate") {
-    return `${value.toFixed(2)}%`;
+    return `${value.toFixed(1)}%`;
   }
   if (value >= 1000) {
     return `${(value / 1000).toFixed(1)}K`;

web/src/components/LineChart.vue

@@ -675,6 +675,8 @@ onMounted(() => {
 }
 
 .chart-svg {
+  width: 100%;
+  height: auto;
   background: white;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

web/src/components/NavBar.vue

@@ -57,12 +57,7 @@ function renderMenuItem(key: string, label: string, icon: string): MenuOption {
 
 <template>
   <div>
-    <n-menu
-      :mode="mode"
-      :options="menuOptions"
-      :value="activeMenu"
-      class="modern-menu"
-    />
+    <n-menu :mode="mode" :options="menuOptions" :value="activeMenu" class="modern-menu" />
   </div>
 </template>
 

web/src/components/keys/GroupList.vue

@@ -127,10 +127,7 @@ function handleGroupCreated(group: Group) {
         </n-button>
       </div>
     </n-card>
-    <group-form-modal
-      v-model:show="showGroupModal"
-      @success="handleGroupCreated"
-    />
+    <group-form-modal v-model:show="showGroupModal" @success="handleGroupCreated" />
   </div>
 </template>
 

web/src/components/logs/LogTable.vue

@@ -322,7 +322,14 @@ function changePageSize(size: number) {
         <!-- 表格 -->
         <div class="table-container">
           <n-spin :show="loading">
-            <n-data-table :columns="columns" :data="logs" :bordered="false" remote size="small" />
+            <n-data-table
+              :columns="columns"
+              :data="logs"
+              :bordered="false"
+              remote
+              size="small"
+              :scroll-x="1840"
+            />
           </n-spin>
         </div>