feat(client): 添加服务端版本检查和客户端更新逻辑

- 引入 getVersionInfo API 和服务端版本获取功能
- 实现版本比较算法用于判断更新需求
- 添加服务端版本加载和目标版本计算逻辑
- 更新客户端版本显示为可更新目标版本
- 优化样式表移除不透明背景设置
- 调整进度条外观样式增强视觉效果

web/src/components/InlineLogPanel.vue

@@ -134,9 +134,9 @@ onUnmounted(() => {
 
 <style scoped>
 .inline-log-panel {
-  background: rgba(0, 0, 0, 0.3);
+  background: var(--glass-bg);
   border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid var(--color-border);
   overflow: hidden;
 }
 
@@ -145,8 +145,8 @@ onUnmounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
+  border-bottom: 1px solid var(--color-border);
+  background: var(--glass-bg-light);
 }
 
 .toolbar-left {
@@ -158,7 +158,7 @@ onUnmounted(() => {
 .log-title {
   font-size: 13px;
   font-weight: 600;
-  color: white;
+  color: var(--color-text-primary);
 }
 
 .streaming-badge {
@@ -166,8 +166,8 @@ onUnmounted(() => {
   align-items: center;
   gap: 6px;
   font-size: 11px;
-  color: #34d399;
-  background: rgba(52, 211, 153, 0.15);
+  color: var(--color-success);
+  background: rgba(16, 185, 129, 0.15);
   padding: 2px 8px;
   border-radius: 10px;
 }
@@ -176,7 +176,7 @@ onUnmounted(() => {
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: #34d399;
+  background: var(--color-success);
   animation: pulse 1.5s ease-in-out infinite;
 }
 
@@ -192,11 +192,11 @@ onUnmounted(() => {
 }
 
 .tool-btn {
-  background: rgba(255, 255, 255, 0.1);
+  background: var(--color-border);
   border: none;
   border-radius: 6px;
   padding: 6px;
-  color: rgba(255, 255, 255, 0.7);
+  color: var(--color-text-secondary);
   cursor: pointer;
   transition: all 0.2s;
   display: flex;
@@ -205,8 +205,8 @@ onUnmounted(() => {
 }
 
 .tool-btn:hover {
-  background: rgba(255, 255, 255, 0.2);
-  color: white;
+  background: var(--color-bg-elevated);
+  color: var(--color-text-primary);
 }
 
 .tool-icon {
@@ -219,14 +219,14 @@ onUnmounted(() => {
   align-items: center;
   gap: 6px;
   font-size: 12px;
-  color: rgba(255, 255, 255, 0.6);
+  color: var(--color-text-secondary);
   cursor: pointer;
 }
 
 .auto-scroll-toggle input {
   width: 14px;
   height: 14px;
-  accent-color: #a78bfa;
+  accent-color: var(--color-accent);
 }
 
 .log-content {
@@ -235,6 +235,7 @@ onUnmounted(() => {
   font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
   font-size: 12px;
   line-height: 1.6;
+  background: var(--color-bg-elevated);
 }
 
 .log-loading,
@@ -243,7 +244,7 @@ onUnmounted(() => {
   align-items: center;
   justify-content: center;
   height: 100%;
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--color-text-muted);
   font-size: 13px;
 }
 
@@ -259,7 +260,7 @@ onUnmounted(() => {
 }
 
 .log-time {
-  color: rgba(255, 255, 255, 0.4);
+  color: var(--color-text-muted);
   flex-shrink: 0;
 }
 
@@ -269,12 +270,12 @@ onUnmounted(() => {
 }
 
 .log-src {
-  color: rgba(255, 255, 255, 0.5);
+  color: var(--color-text-muted);
   flex-shrink: 0;
 }
 
 .log-msg {
-  color: rgba(255, 255, 255, 0.8);
+  color: var(--color-text-secondary);
   overflow: hidden;
   text-overflow: ellipsis;
 }
@@ -289,11 +290,11 @@ onUnmounted(() => {
 }
 
 .log-content::-webkit-scrollbar-thumb {
-  background: rgba(255, 255, 255, 0.2);
+  background: var(--color-border);
   border-radius: 3px;
 }
 
 .log-content::-webkit-scrollbar-thumb:hover {
-  background: rgba(255, 255, 255, 0.3);
+  background: var(--color-text-muted);
 }
 </style>

web/src/views/ClientView.vue

@@ -15,7 +15,8 @@ import {
   getClient, updateClient, deleteClient, pushConfigToClient, disconnectClient, restartClient,
   getClientPluginConfig, updateClientPluginConfig,
   getStorePlugins, installStorePlugin, getRuleSchemas, startClientPlugin, restartClientPlugin, stopClientPlugin, deleteClientPlugin,
-  checkClientUpdate, applyClientUpdate, getClientSystemStats, type UpdateInfo, type SystemStats
+  checkClientUpdate, applyClientUpdate, getClientSystemStats, getVersionInfo,
+  type UpdateInfo, type SystemStats
 } from '../api'
 import type { ProxyRule, ClientPlugin, ConfigField, StorePluginInfo, RuleSchemasMap } from '../types'
 import LogViewer from '../components/LogViewer.vue'
@@ -42,6 +43,7 @@ const clientVersion = ref('')
 // 客户端更新相关
 const clientUpdate = ref<UpdateInfo | null>(null)
 const updatingClient = ref(false)
+const serverVersion = ref('')
 
 // 系统状态相关
 const systemStats = ref<SystemStats | null>(null)
@@ -94,6 +96,61 @@ const getExtraFields = (type: string): ConfigField[] => {
   return schema?.extra_fields || []
 }
 
+// 加载服务端版本
+const loadServerVersion = async () => {
+  try {
+    const { data } = await getVersionInfo()
+    serverVersion.value = data.version || ''
+  } catch (e) {
+    console.error('Failed to load server version', e)
+  }
+}
+
+// 版本比较函数：返回 -1 (v1 < v2), 0 (v1 == v2), 1 (v1 > v2)
+const compareVersions = (v1: string, v2: string): number => {
+  const normalize = (v: string) => v.replace(/^v/, '').split('.').map(n => parseInt(n, 10) || 0)
+  const parts1 = normalize(v1)
+  const parts2 = normalize(v2)
+  const len = Math.max(parts1.length, parts2.length)
+  for (let i = 0; i < len; i++) {
+    const p1 = parts1[i] || 0
+    const p2 = parts2[i] || 0
+    if (p1 < p2) return -1
+    if (p1 > p2) return 1
+  }
+  return 0
+}
+
+// 判断客户端是否需要更新
+// 逻辑：如果客户端最新版>=服务端版本，则目标版本为服务端版本；否则为客户端最新版
+const needsUpdate = (): boolean => {
+  if (!clientUpdate.value?.latest || !clientVersion.value) return false
+  const latestClientVer = clientUpdate.value.latest
+  const currentClientVer = clientVersion.value
+  const serverVer = serverVersion.value
+
+  // 确定目标版本
+  let targetVersion = latestClientVer
+  if (serverVer && compareVersions(latestClientVer, serverVer) >= 0) {
+    targetVersion = serverVer
+  }
+
+  // 比较当前客户端版本和目标版本
+  return compareVersions(currentClientVer, targetVersion) < 0
+}
+
+// 获取目标更新版本
+const getTargetVersion = (): string => {
+  if (!clientUpdate.value?.latest) return ''
+  const latestClientVer = clientUpdate.value.latest
+  const serverVer = serverVersion.value
+
+  if (serverVer && compareVersions(latestClientVer, serverVer) >= 0) {
+    return serverVer
+  }
+  return latestClientVer
+}
+
 // Actions
 const loadClient = async () => {
   loading.value = true
@@ -441,6 +498,7 @@ const pollTimer = ref<number | null>(null)
 
 onMounted(() => {
   loadRuleSchemas()
+  loadServerVersion()
   loadClient()
   // 启动自动轮询，每 5 秒刷新一次
   pollTimer.value = window.setInterval(() => {
@@ -557,10 +615,10 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
                 <span class="stat-label">客户端版本</span>
                 <span class="stat-value">
                   {{ clientVersion || '-' }}
-                  <span v-if="clientUpdate?.available" class="update-badge" @click="handleApplyClientUpdate">
-                    可更新
+                  <span v-if="needsUpdate()" class="update-badge" @click="handleApplyClientUpdate">
+                    可更新 → {{ getTargetVersion() }}
                   </span>
-                  <span v-else-if="clientUpdate && !clientUpdate.available" class="latest-badge">
+                  <span v-else-if="clientVersion" class="latest-badge">
                     最新版本
                   </span>
                 </span>
@@ -853,7 +911,7 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
 <style scoped>
 .client-page {
   min-height: calc(100vh - 108px);
-  background: var(--color-bg-primary);
+  background: transparent;
   position: relative;
   overflow: hidden;
   padding: 32px;
@@ -1484,7 +1542,7 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
 .progress-bar {
   flex: 1;
   height: 8px;
-  background: var(--color-bg-elevated);
+  background: var(--color-border);
   border-radius: 4px;
   overflow: hidden;
 }

web/src/views/HomeView.vue

@@ -123,91 +123,84 @@ onMounted(() => {
     <div class="dashboard-content">
       <!-- Header -->
       <div class="dashboard-header">
-        <h1 class="text-3xl font-bold text-white mb-2">仪表盘</h1>
-        <p class="text-white/70">监控隧道连接和流量状态</p>
+        <h1 class="dashboard-title">仪表盘</h1>
+        <p class="dashboard-subtitle">监控隧道连接和流量状态</p>
       </div>
 
       <!-- Stats Grid -->
       <div class="stats-grid">
-        <!-- Outbound Traffic -->
+        <!-- 24H Traffic Combined -->
         <div class="stat-card glass-stat">
-          <div class="stat-icon outbound">
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12" />
+          <div class="stat-icon-large traffic-24h">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon-lg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4" />
             </svg>
           </div>
-          <div class="stat-content">
-            <span class="stat-label">24h出站</span>
-            <div class="stat-value-row">
-              <span class="stat-value">{{ formatted24hOutbound.value }}</span>
-              <span class="stat-unit-inline">{{ formatted24hOutbound.unit }}</span>
+          <div class="stat-details">
+            <div class="stat-row">
+              <span class="stat-title">24H 出站</span>
+              <div class="stat-data">
+                <span class="stat-number">{{ formatted24hOutbound.value }}</span>
+                <span class="stat-unit">{{ formatted24hOutbound.unit }}</span>
+              </div>
+            </div>
+            <div class="stat-row">
+              <span class="stat-title">24H 入站</span>
+              <div class="stat-data">
+                <span class="stat-number">{{ formatted24hInbound.value }}</span>
+                <span class="stat-unit">{{ formatted24hInbound.unit }}</span>
+              </div>
             </div>
           </div>
         </div>
 
-        <!-- Inbound Traffic -->
+        <!-- Total Traffic Combined -->
         <div class="stat-card glass-stat">
-          <div class="stat-icon inbound">
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6" />
+          <div class="stat-icon-large traffic-total">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon-lg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
             </svg>
           </div>
-          <div class="stat-content">
-            <span class="stat-label">24h入站</span>
-            <div class="stat-value-row">
-              <span class="stat-value">{{ formatted24hInbound.value }}</span>
-              <span class="stat-unit-inline">{{ formatted24hInbound.unit }}</span>
+          <div class="stat-details">
+            <div class="stat-row">
+              <span class="stat-title">总出站</span>
+              <div class="stat-data">
+                <span class="stat-number">{{ formattedTotalOutbound.value }}</span>
+                <span class="stat-unit">{{ formattedTotalOutbound.unit }}</span>
+              </div>
             </div>
-          </div>
-        </div>
-
-        <!-- Total Outbound Traffic -->
-        <div class="stat-card glass-stat">
-          <div class="stat-icon total-out">
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 11l5-5m0 0l5 5m-5-5v12" />
-            </svg>
-          </div>
-          <div class="stat-content">
-            <span class="stat-label">总出站</span>
-            <div class="stat-value-row">
-              <span class="stat-value">{{ formattedTotalOutbound.value }}</span>
-              <span class="stat-unit-inline">{{ formattedTotalOutbound.unit }}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- Total Inbound Traffic -->
-        <div class="stat-card glass-stat">
-          <div class="stat-icon total-in">
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 13l-5 5m0 0l-5-5m5 5V6" />
-            </svg>
-          </div>
-          <div class="stat-content">
-            <span class="stat-label">总入站</span>
-            <div class="stat-value-row">
-              <span class="stat-value">{{ formattedTotalInbound.value }}</span>
-              <span class="stat-unit-inline">{{ formattedTotalInbound.unit }}</span>
+            <div class="stat-row">
+              <span class="stat-title">总入站</span>
+              <div class="stat-data">
+                <span class="stat-number">{{ formattedTotalInbound.value }}</span>
+                <span class="stat-unit">{{ formattedTotalInbound.unit }}</span>
+              </div>
             </div>
           </div>
         </div>
 
         <!-- Client Count -->
         <div class="stat-card glass-stat">
-          <div class="stat-icon clients">
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <div class="stat-icon-large clients">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon-lg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
             </svg>
           </div>
-          <div class="stat-content">
-            <span class="stat-label">客户端</span>
-            <div class="client-count">
-              <span class="stat-value online">{{ onlineClients }}</span>
-              <span class="stat-separator">/</span>
-              <span class="stat-value total">{{ clients.length }}</span>
+          <div class="stat-details">
+            <div class="stat-row">
+              <span class="stat-title">在线客户端</span>
+              <div class="stat-data">
+                <span class="stat-number online">{{ onlineClients }}</span>
+                <span class="stat-unit">个</span>
+              </div>
+            </div>
+            <div class="stat-row">
+              <span class="stat-title">总客户端</span>
+              <div class="stat-data">
+                <span class="stat-number">{{ clients.length }}</span>
+                <span class="stat-unit">个</span>
+              </div>
             </div>
-            <span class="stat-unit">在线 / 总数</span>
           </div>
           <div class="online-indicator" :class="{ active: onlineClients > 0 }">
             <span class="pulse"></span>
@@ -216,15 +209,19 @@ onMounted(() => {
 
         <!-- Rules Count -->
         <div class="stat-card glass-stat">
-          <div class="stat-icon rules">
-            <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <div class="stat-icon-large rules">
+            <svg xmlns="http://www.w3.org/2000/svg" class="icon-lg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16" />
             </svg>
           </div>
-          <div class="stat-content">
-            <span class="stat-label">代理规则</span>
-            <span class="stat-value">{{ totalRules }}</span>
-            <span class="stat-unit">条规则</span>
+          <div class="stat-details">
+            <div class="stat-row single">
+              <span class="stat-title">代理规则</span>
+              <div class="stat-data">
+                <span class="stat-number">{{ totalRules }}</span>
+                <span class="stat-unit">条</span>
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -346,10 +343,23 @@ onMounted(() => {
   margin-bottom: 32px;
 }
 
+.dashboard-title {
+  font-size: 28px;
+  font-weight: 700;
+  color: var(--color-text-primary);
+  margin: 0 0 8px 0;
+}
+
+.dashboard-subtitle {
+  color: var(--color-text-secondary);
+  margin: 0;
+  font-size: 14px;
+}
+
 /* Stats Grid */
 .stats-grid {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   margin-bottom: 32px;
 }
@@ -375,7 +385,7 @@ onMounted(() => {
   border: 1px solid var(--color-border);
   padding: 20px;
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   gap: 16px;
   position: relative;
   transition: all 0.2s ease;
@@ -402,11 +412,11 @@ onMounted(() => {
   box-shadow: var(--shadow-lg), var(--shadow-glow);
 }
 
-/* Stat icon */
-.stat-icon {
-  width: 48px;
-  height: 48px;
-  border-radius: 12px;
+/* Large Stat icon */
+.stat-icon-large {
+  width: 64px;
+  height: 64px;
+  border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -414,110 +424,71 @@ onMounted(() => {
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
 }
 
-.stat-icon.outbound {
+.stat-icon-large.traffic-24h {
   background: var(--gradient-accent);
 }
 
-.stat-icon.inbound {
+.stat-icon-large.traffic-total {
   background: linear-gradient(135deg, #8b5cf6 0%, #a78bfa 100%);
 }
 
-.stat-icon.clients {
+.stat-icon-large.clients {
   background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
 }
 
-.stat-icon.rules {
+.stat-icon-large.rules {
   background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
 }
 
-.stat-icon.total-out {
-  background: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
-}
-
-.stat-icon.total-in {
-  background: linear-gradient(135deg, #9333ea 0%, #c084fc 100%);
-}
-
-.stat-icon svg {
+.icon-lg {
+  width: 32px;
+  height: 32px;
   color: white;
 }
 
-/* Stat content */
-.stat-content {
+/* Stat details */
+.stat-details {
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  min-height: 44px;
-  justify-content: center;
+  gap: 8px;
 }
 
-.stat-label {
+.stat-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.stat-row.single {
+  padding: 12px 0;
+}
+
+.stat-title {
   font-size: 13px;
   color: var(--color-text-secondary);
   font-weight: 500;
-  line-height: 1.2;
 }
 
-.stat-value {
-  font-size: 26px;
+.stat-data {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+}
+
+.stat-number {
+  font-size: 20px;
   font-weight: 700;
   color: var(--color-text-primary);
-  line-height: 1.2;
+}
+
+.stat-number.online {
+  color: var(--color-success);
 }
 
 .stat-unit {
   font-size: 12px;
   color: var(--color-text-muted);
-  line-height: 1.2;
-}
-
-.stat-value-row {
-  display: flex;
-  align-items: baseline;
-  gap: 4px;
-}
-
-.stat-unit-inline {
-  font-size: 14px;
-  color: var(--color-text-muted);
-  font-weight: 500;
-}
-
-/* Client count special styling */
-.client-count {
-  display: flex;
-  align-items: baseline;
-  gap: 4px;
-}
-
-.client-count .stat-value.online {
-  color: var(--color-success);
-}
-
-.client-count .stat-value.total {
-  font-size: 24px;
-  color: var(--color-text-secondary);
-}
-
-.stat-separator {
-  font-size: 20px;
-  color: var(--color-text-muted);
-}
-
-/* Stat trend indicator */
-.stat-trend {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  padding: 4px 8px;
-  border-radius: 8px;
-  font-size: 12px;
-}
-
-.stat-trend.up {
-  background: rgba(0, 186, 124, 0.15);
-  color: var(--color-success);
 }
 
 /* Online indicator with pulse */

web/src/views/SettingsView.vue

@@ -235,7 +235,7 @@ onMounted(() => {
 <style scoped>
 .settings-page {
   min-height: calc(100vh - 108px);
-  background: var(--color-bg-primary);
+  background: transparent;
   position: relative;
   overflow: hidden;
   padding: 32px;