feat(ui): 重构应用布局和添加客户端更新功能

- 将侧边栏菜单改为顶部标签页导航设计
- 添加客户端操作系统和架构信息显示
- 实现客户端自动更新检查和应用功能
- 添加底部页脚显示版本和GitHub链接
- 更新主题颜色为紫色渐变风格
- 优化首页和插件页面的UI布局结构
- 修改路由配置将更新页面重命名为设置页面
- 在认证协议中添加客户端平台信息字段
- 重构App.vue中的导航和状态管理逻辑

web/src/views/ClientView.vue

@@ -10,12 +10,13 @@ import {
 import {
   ArrowBackOutline, CreateOutline, TrashOutline,
   PushOutline, AddOutline, StorefrontOutline, DocumentTextOutline,
-  ExtensionPuzzleOutline, SettingsOutline, OpenOutline
+  ExtensionPuzzleOutline, SettingsOutline, OpenOutline, CloudDownloadOutline, RefreshOutline
 } from '@vicons/ionicons5'
 import {
   getClient, updateClient, deleteClient, pushConfigToClient, disconnectClient, restartClient,
   getClientPluginConfig, updateClientPluginConfig,
-  getStorePlugins, installStorePlugin, getRuleSchemas, startClientPlugin, restartClientPlugin, stopClientPlugin, deleteClientPlugin
+  getStorePlugins, installStorePlugin, getRuleSchemas, startClientPlugin, restartClientPlugin, stopClientPlugin, deleteClientPlugin,
+  checkClientUpdate, applyClientUpdate, type UpdateInfo
 } from '../api'
 import type { ProxyRule, ClientPlugin, ConfigField, StorePluginInfo, RuleSchemasMap } from '../types'
 import LogViewer from '../components/LogViewer.vue'
@@ -34,6 +35,13 @@ const nickname = ref('')
 const rules = ref<ProxyRule[]>([])
 const clientPlugins = ref<ClientPlugin[]>([])
 const loading = ref(false)
+const clientOs = ref('')
+const clientArch = ref('')
+
+// 客户端更新相关
+const clientUpdate = ref<UpdateInfo | null>(null)
+const checkingUpdate = ref(false)
+const updatingClient = ref(false)
 
 // Rule Schemas
 const pluginRuleSchemas = ref<RuleSchemasMap>({})
@@ -125,6 +133,8 @@ const loadClient = async () => {
     nickname.value = data.nickname || ''
     rules.value = data.rules || []
     clientPlugins.value = data.plugins || []
+    clientOs.value = data.os || ''
+    clientArch.value = data.arch || ''
   } catch (e) {
     message.error('加载客户端信息失败')
     console.error(e)
@@ -133,6 +143,57 @@ const loadClient = async () => {
   }
 }
 
+// 客户端更新
+const handleCheckClientUpdate = async () => {
+  if (!online.value) {
+    message.warning('客户端离线，无法检查更新')
+    return
+  }
+  if (!clientOs.value || !clientArch.value) {
+    message.warning('无法获取客户端平台信息')
+    return
+  }
+  checkingUpdate.value = true
+  try {
+    const { data } = await checkClientUpdate(clientOs.value, clientArch.value)
+    clientUpdate.value = data
+    if (data.download_url) {
+      message.success('找到客户端更新: ' + data.latest)
+    } else {
+      message.info('已是最新版本或未找到对应平台的更新包')
+    }
+  } catch (e: any) {
+    message.error(e.response?.data || '检查更新失败')
+  } finally {
+    checkingUpdate.value = false
+  }
+}
+
+const handleApplyClientUpdate = () => {
+  if (!clientUpdate.value?.download_url) {
+    message.error('没有可用的下载链接')
+    return
+  }
+  dialog.warning({
+    title: '确认更新客户端',
+    content: `即将更新客户端到 ${clientUpdate.value.latest}，更新后客户端将自动重启。确定要继续吗？`,
+    positiveText: '更新',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      updatingClient.value = true
+      try {
+        await applyClientUpdate(clientId, clientUpdate.value!.download_url)
+        message.success('更新命令已发送，客户端将自动重启')
+        clientUpdate.value = null
+      } catch (e: any) {
+        message.error(e.response?.data || '更新失败')
+      } finally {
+        updatingClient.value = false
+      }
+    }
+  })
+}
+
 // Client Rename
 const showRenameModal = ref(false)
 const renameValue = ref('')
@@ -479,6 +540,32 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
                <n-statistic label="插件数" :value="clientPlugins.length" />
             </n-space>
           </n-card>
+
+          <!-- 客户端更新 -->
+          <n-card title="客户端更新" bordered size="small">
+            <template #header-extra>
+              <n-button size="tiny" :loading="checkingUpdate" @click="handleCheckClientUpdate" :disabled="!online">
+                <template #icon><n-icon><RefreshOutline /></n-icon></template>
+                检查
+              </n-button>
+            </template>
+            <div v-if="clientOs && clientArch" style="margin-bottom: 8px; font-size: 12px; color: #666;">
+              平台: {{ clientOs }}/{{ clientArch }}
+            </div>
+            <n-empty v-if="!clientUpdate" description="点击检查更新" size="small" />
+            <template v-else>
+              <div v-if="clientUpdate.download_url" style="font-size: 13px;">
+                <p style="margin: 0 0 8px 0; color: #10b981;">发现新版本 {{ clientUpdate.latest }}</p>
+                <n-button size="small" type="primary" :loading="updatingClient" @click="handleApplyClientUpdate">
+                  <template #icon><n-icon><CloudDownloadOutline /></n-icon></template>
+                  更新
+                </n-button>
+              </div>
+              <div v-else style="font-size: 13px; color: #666;">
+                已是最新版本
+              </div>
+            </template>
+          </n-card>
         </n-space>
       </n-grid-item>
 

web/src/views/HomeView.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { NCard, NButton, NSpace, NTag, NStatistic, NGrid, NGi, NEmpty, NIcon } from 'naive-ui'
-import { ExtensionPuzzleOutline, CloudDownloadOutline } from '@vicons/ionicons5'
+import { NCard, NButton, NSpace, NTag, NStatistic, NGrid, NGi, NEmpty } from 'naive-ui'
 import { getClients } from '../api'
 import type { ClientStatus } from '../types'
 
@@ -18,7 +17,6 @@ const loadClients = async () => {
   }
 }
 
-
 const onlineClients = computed(() => {
   return clients.value.filter(client => client.online).length
 })
@@ -36,36 +34,24 @@ const viewClient = (id: string) => {
 
 <template>
   <div class="home">
-    <n-space justify="space-between" align="center" style="margin-bottom: 24px;">
-      <div>
-        <h2 style="margin: 0 0 8px 0;">客户端管理</h2>
-        <p style="margin: 0; color: #666;">查看已连接的隧道客户端</p>
-      </div>
-      <n-space>
-        <n-button @click="router.push('/plugins')">
-          <template #icon><n-icon><ExtensionPuzzleOutline /></n-icon></template>
-          扩展商店
-        </n-button>
-        <n-button @click="router.push('/update')">
-          <template #icon><n-icon><CloudDownloadOutline /></n-icon></template>
-          系统更新
-        </n-button>
-      </n-space>
-    </n-space>
+    <div class="page-header">
+      <h2>首页</h2>
+      <p>查看已连接的隧道客户端</p>
+    </div>
 
-    <n-grid :cols="3" :x-gap="16" :y-gap="16" style="margin-bottom: 24px;">
+    <n-grid :cols="3" :x-gap="16" :y-gap="16" style="margin-bottom: 24px;" responsive="screen" cols-s="1" cols-m="3">
       <n-gi>
-        <n-card>
+        <n-card class="stat-card">
           <n-statistic label="总客户端" :value="clients.length" />
         </n-card>
       </n-gi>
       <n-gi>
-        <n-card>
+        <n-card class="stat-card">
           <n-statistic label="在线客户端" :value="onlineClients" />
         </n-card>
       </n-gi>
       <n-gi>
-        <n-card>
+        <n-card class="stat-card">
           <n-statistic label="总规则数" :value="totalRules" />
         </n-card>
       </n-gi>
@@ -75,13 +61,13 @@ const viewClient = (id: string) => {
 
     <n-grid v-else :cols="3" :x-gap="16" :y-gap="16" responsive="screen" cols-s="1" cols-m="2">
       <n-gi v-for="client in clients" :key="client.id">
-        <n-card hoverable style="cursor: pointer;" @click="viewClient(client.id)">
+        <n-card hoverable class="client-card" @click="viewClient(client.id)">
           <n-space justify="space-between" align="center">
             <div>
-              <h3 style="margin: 0 0 4px 0;">{{ client.nickname || client.id }}</h3>
-              <p v-if="client.nickname" style="margin: 0 0 4px 0; color: #999; font-size: 12px;">{{ client.id }}</p>
-              <p v-if="client.remote_addr && client.online" style="margin: 0 0 8px 0; color: #666; font-size: 12px;">IP: {{ client.remote_addr }}</p>
-              <n-space>
+              <h3 class="client-name">{{ client.nickname || client.id }}</h3>
+              <p v-if="client.nickname" class="client-id">{{ client.id }}</p>
+              <p v-if="client.remote_addr && client.online" class="client-ip">IP: {{ client.remote_addr }}</p>
+              <n-space style="margin-top: 8px;">
                 <n-tag :type="client.online ? 'success' : 'default'" size="small">
                   {{ client.online ? '在线' : '离线' }}
                 </n-tag>
@@ -95,3 +81,59 @@ const viewClient = (id: string) => {
     </n-grid>
   </div>
 </template>
+
+<style scoped>
+.home {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  margin: 0 0 8px 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.page-header p {
+  margin: 0;
+  color: #6b7280;
+}
+
+.stat-card {
+  text-align: center;
+}
+
+.client-card {
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+}
+
+.client-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.client-name {
+  margin: 0 0 4px 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.client-id {
+  margin: 0 0 4px 0;
+  color: #9ca3af;
+  font-size: 12px;
+}
+
+.client-ip {
+  margin: 0;
+  color: #6b7280;
+  font-size: 12px;
+}
+</style>

web/src/views/PluginsView.vue

@@ -1,19 +1,17 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
-import { useRouter } from 'vue-router'
 import {
   NCard, NButton, NSpace, NTag, NStatistic, NGrid, NGi,
   NEmpty, NSpin, NIcon, NSwitch, NTabs, NTabPane, useMessage,
   NSelect, NModal, NInput, NInputNumber
 } from 'naive-ui'
-import { ArrowBackOutline, ExtensionPuzzleOutline, StorefrontOutline, CodeSlashOutline, SettingsOutline } from '@vicons/ionicons5'
+import { ExtensionPuzzleOutline, StorefrontOutline, CodeSlashOutline, SettingsOutline } from '@vicons/ionicons5'
 import {
   getPlugins, enablePlugin, disablePlugin, getStorePlugins, getJSPlugins,
   pushJSPluginToClient, getClients, installStorePlugin, updateJSPluginConfig, setJSPluginEnabled
 } from '../api'
 import type { PluginInfo, StorePluginInfo, JSPlugin, ClientStatus } from '../types'
 
-const router = useRouter()
 const message = useMessage()
 const plugins = ref<PluginInfo[]>([])
 const storePlugins = ref<StorePluginInfo[]>([])
@@ -290,16 +288,10 @@ onMounted(() => {
 
 <template>
   <div class="plugins-view">
-    <n-space justify="space-between" align="center" style="margin-bottom: 24px;">
-      <div>
-        <h2 style="margin: 0 0 8px 0;">插件管理</h2>
-        <p style="margin: 0; color: #666;">管理已安装插件和浏览插件商店</p>
-      </div>
-      <n-button quaternary @click="router.push('/')">
-        <template #icon><n-icon><ArrowBackOutline /></n-icon></template>
-        返回首页
-      </n-button>
-    </n-space>
+    <div class="page-header">
+      <h2>插件管理</h2>
+      <p>管理已安装插件和浏览插件商店</p>
+    </div>
 
     <n-tabs v-model:value="activeTab" type="line" @update:value="handleTabChange">
       <!-- 已安装插件 -->
@@ -574,3 +566,26 @@ onMounted(() => {
     </n-modal>
   </div>
 </template>
+
+<style scoped>
+.plugins-view {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  margin: 0 0 8px 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.page-header p {
+  margin: 0;
+  color: #6b7280;
+}
+</style>

web/src/views/SettingsView.vue

@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import {
+  NCard, NButton, NSpace, NTag, NGrid, NGi, NEmpty, NSpin, NIcon,
+  NAlert, useMessage, useDialog
+} from 'naive-ui'
+import { CloudDownloadOutline, RefreshOutline, ServerOutline } from '@vicons/ionicons5'
+import {
+  getVersionInfo, checkServerUpdate, applyServerUpdate,
+  type UpdateInfo, type VersionInfo
+} from '../api'
+
+const message = useMessage()
+const dialog = useDialog()
+
+const versionInfo = ref<VersionInfo | null>(null)
+const serverUpdate = ref<UpdateInfo | null>(null)
+const loading = ref(true)
+const checkingServer = ref(false)
+const updatingServer = ref(false)
+
+const loadVersionInfo = async () => {
+  try {
+    const { data } = await getVersionInfo()
+    versionInfo.value = data
+  } catch (e) {
+    console.error('Failed to load version info', e)
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleCheckServerUpdate = async () => {
+  checkingServer.value = true
+  try {
+    const { data } = await checkServerUpdate()
+    serverUpdate.value = data
+    if (data.available) {
+      message.success('发现新版本: ' + data.latest)
+    } else {
+      message.info('已是最新版本')
+    }
+  } catch (e: any) {
+    message.error(e.response?.data || '检查更新失败')
+  } finally {
+    checkingServer.value = false
+  }
+}
+
+const handleApplyServerUpdate = () => {
+  if (!serverUpdate.value?.download_url) {
+    message.error('没有可用的下载链接')
+    return
+  }
+
+  dialog.warning({
+    title: '确认更新服务端',
+    content: `即将更新服务端到 ${serverUpdate.value.latest}，更新后服务器将自动重启。确定要继续吗？`,
+    positiveText: '更新并重启',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      updatingServer.value = true
+      try {
+        await applyServerUpdate(serverUpdate.value!.download_url)
+        message.success('更新已开始，服务器将在几秒后重启')
+        setTimeout(() => {
+          window.location.reload()
+        }, 5000)
+      } catch (e: any) {
+        message.error(e.response?.data || '更新失败')
+        updatingServer.value = false
+      }
+    }
+  })
+}
+
+const formatBytes = (bytes: number): string => {
+  if (bytes === 0) return '0 B'
+  const k = 1024
+  const sizes = ['B', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+onMounted(() => {
+  loadVersionInfo()
+})
+</script>
+
+<template>
+  <div class="settings-view">
+    <div class="page-header">
+      <h2>系统设置</h2>
+      <p>管理服务端配置和系统更新</p>
+    </div>
+
+    <n-spin :show="loading">
+      <!-- 当前版本信息 -->
+      <n-card title="版本信息" class="settings-card">
+        <template #header-extra>
+          <n-icon size="20" color="#6366f1"><ServerOutline /></n-icon>
+        </template>
+        <n-grid v-if="versionInfo" :cols="6" :x-gap="16" responsive="screen" cols-s="2" cols-m="3">
+          <n-gi>
+            <div class="info-item">
+              <span class="label">版本号</span>
+              <span class="value">{{ versionInfo.version }}</span>
+            </div>
+          </n-gi>
+          <n-gi>
+            <div class="info-item">
+              <span class="label">Git 提交</span>
+              <span class="value">{{ versionInfo.git_commit?.slice(0, 8) || 'N/A' }}</span>
+            </div>
+          </n-gi>
+          <n-gi>
+            <div class="info-item">
+              <span class="label">构建时间</span>
+              <span class="value">{{ versionInfo.build_time || 'N/A' }}</span>
+            </div>
+          </n-gi>
+          <n-gi>
+            <div class="info-item">
+              <span class="label">Go 版本</span>
+              <span class="value">{{ versionInfo.go_version }}</span>
+            </div>
+          </n-gi>
+          <n-gi>
+            <div class="info-item">
+              <span class="label">操作系统</span>
+              <span class="value">{{ versionInfo.os }}</span>
+            </div>
+          </n-gi>
+          <n-gi>
+            <div class="info-item">
+              <span class="label">架构</span>
+              <span class="value">{{ versionInfo.arch }}</span>
+            </div>
+          </n-gi>
+        </n-grid>
+        <n-empty v-else description="加载中..." />
+      </n-card>
+
+      <!-- 服务端更新 -->
+      <n-card title="服务端更新" class="settings-card">
+        <template #header-extra>
+          <n-button size="small" :loading="checkingServer" @click="handleCheckServerUpdate">
+            <template #icon><n-icon><RefreshOutline /></n-icon></template>
+            检查更新
+          </n-button>
+        </template>
+
+        <n-empty v-if="!serverUpdate" description="点击检查更新按钮查看是否有新版本" />
+
+        <template v-else>
+          <n-alert v-if="serverUpdate.available" type="success" style="margin-bottom: 16px;">
+            发现新版本 {{ serverUpdate.latest }}，当前版本 {{ serverUpdate.current }}
+          </n-alert>
+          <n-alert v-else type="info" style="margin-bottom: 16px;">
+            当前已是最新版本 {{ serverUpdate.current }}
+          </n-alert>
+
+          <n-space vertical :size="12">
+            <div v-if="serverUpdate.download_url">
+              <p style="margin: 0 0 8px 0; color: #666;">
+                下载文件: {{ serverUpdate.asset_name }}
+                <n-tag size="small" style="margin-left: 8px;">{{ formatBytes(serverUpdate.asset_size) }}</n-tag>
+              </p>
+            </div>
+
+            <div v-if="serverUpdate.release_note" class="release-note">
+              <p style="margin: 0 0 4px 0; color: #666; font-size: 12px;">更新日志:</p>
+              <pre>{{ serverUpdate.release_note }}</pre>
+            </div>
+
+            <n-button
+              v-if="serverUpdate.available && serverUpdate.download_url"
+              type="primary"
+              :loading="updatingServer"
+              @click="handleApplyServerUpdate"
+            >
+              <template #icon><n-icon><CloudDownloadOutline /></n-icon></template>
+              下载并更新服务端
+            </n-button>
+          </n-space>
+        </template>
+      </n-card>
+    </n-spin>
+  </div>
+</template>
+
+<style scoped>
+.settings-view {
+  max-width: 900px;
+  margin: 0 auto;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h2 {
+  margin: 0 0 8px 0;
+  font-size: 24px;
+  font-weight: 600;
+  color: #1f2937;
+}
+
+.page-header p {
+  margin: 0;
+  color: #6b7280;
+}
+
+.settings-card {
+  margin-bottom: 16px;
+}
+
+.info-item {
+  display: flex;
+  flex-direction: column;
+  padding: 8px 0;
+}
+
+.info-item .label {
+  font-size: 12px;
+  color: #9ca3af;
+  margin-bottom: 4px;
+}
+
+.info-item .value {
+  font-size: 14px;
+  color: #1f2937;
+  font-weight: 500;
+}
+
+.release-note {
+  max-height: 150px;
+  overflow-y: auto;
+}
+
+.release-note pre {
+  margin: 0;
+  white-space: pre-wrap;
+  font-size: 12px;
+  color: #374151;
+  background: #f9fafb;
+  padding: 12px;
+  border-radius: 6px;
+}
+</style>

web/src/views/UpdateView.vue

@@ -1,328 +0,0 @@
-<script setup lang="ts">
-import { ref, onMounted, computed } from 'vue'
-import { useRouter } from 'vue-router'
-import {
-  NCard, NButton, NSpace, NTag, NGrid, NGi, NEmpty, NSpin, NIcon,
-  NAlert, NSelect, useMessage, useDialog
-} from 'naive-ui'
-import { ArrowBackOutline, CloudDownloadOutline, RefreshOutline, RocketOutline } from '@vicons/ionicons5'
-import {
-  getVersionInfo, checkServerUpdate, checkClientUpdate, applyServerUpdate, applyClientUpdate,
-  getClients, type UpdateInfo, type VersionInfo
-} from '../api'
-import type { ClientStatus } from '../types'
-
-const router = useRouter()
-const message = useMessage()
-const dialog = useDialog()
-
-const versionInfo = ref<VersionInfo | null>(null)
-const serverUpdate = ref<UpdateInfo | null>(null)
-const clientUpdate = ref<UpdateInfo | null>(null)
-const clients = ref<ClientStatus[]>([])
-const loading = ref(true)
-const checkingServer = ref(false)
-const checkingClient = ref(false)
-const updatingServer = ref(false)
-const selectedClientId = ref('')
-
-const onlineClients = computed(() => clients.value.filter(c => c.online))
-
-const loadVersionInfo = async () => {
-  try {
-    const { data } = await getVersionInfo()
-    versionInfo.value = data
-  } catch (e) {
-    console.error('Failed to load version info', e)
-  }
-}
-
-const loadClients = async () => {
-  try {
-    const { data } = await getClients()
-    clients.value = data || []
-  } catch (e) {
-    console.error('Failed to load clients', e)
-  }
-}
-
-const handleCheckServerUpdate = async () => {
-  checkingServer.value = true
-  try {
-    const { data } = await checkServerUpdate()
-    serverUpdate.value = data
-    if (data.available) {
-      message.success('发现新版本: ' + data.latest)
-    } else {
-      message.info('已是最新版本')
-    }
-  } catch (e: any) {
-    message.error(e.response?.data || '检查更新失败')
-  } finally {
-    checkingServer.value = false
-  }
-}
-
-const handleCheckClientUpdate = async () => {
-  checkingClient.value = true
-  try {
-    const { data } = await checkClientUpdate()
-    clientUpdate.value = data
-    if (data.download_url) {
-      message.success('找到客户端更新包: ' + data.latest)
-    } else {
-      message.warning('未找到对应平台的更新包')
-    }
-  } catch (e: any) {
-    message.error(e.response?.data || '检查更新失败')
-  } finally {
-    checkingClient.value = false
-  }
-}
-
-const handleApplyServerUpdate = () => {
-  if (!serverUpdate.value?.download_url) {
-    message.error('没有可用的下载链接')
-    return
-  }
-
-  dialog.warning({
-    title: '确认更新服务端',
-    content: `即将更新服务端到 ${serverUpdate.value.latest}，更新后服务器将自动重启。确定要继续吗？`,
-    positiveText: '更新并重启',
-    negativeText: '取消',
-    onPositiveClick: async () => {
-      updatingServer.value = true
-      try {
-        await applyServerUpdate(serverUpdate.value!.download_url)
-        message.success('更新已开始，服务器将在几秒后重启')
-        // 显示倒计时或等待
-        setTimeout(() => {
-          window.location.reload()
-        }, 5000)
-      } catch (e: any) {
-        message.error(e.response?.data || '更新失败')
-        updatingServer.value = false
-      }
-    }
-  })
-}
-
-const handleApplyClientUpdate = async () => {
-  if (!selectedClientId.value) {
-    message.warning('请选择要更新的客户端')
-    return
-  }
-
-  if (!clientUpdate.value?.download_url) {
-    message.error('没有可用的下载链接')
-    return
-  }
-
-  const clientName = onlineClients.value.find(c => c.id === selectedClientId.value)?.nickname || selectedClientId.value
-
-  dialog.warning({
-    title: '确认更新客户端',
-    content: `即将更新客户端 "${clientName}" 到 ${clientUpdate.value.latest}，更新后客户端将自动重启。确定要继续吗？`,
-    positiveText: '更新',
-    negativeText: '取消',
-    onPositiveClick: async () => {
-      try {
-        await applyClientUpdate(selectedClientId.value, clientUpdate.value!.download_url)
-        message.success(`更新命令已发送到客户端 ${clientName}`)
-      } catch (e: any) {
-        message.error(e.response?.data || '更新失败')
-      }
-    }
-  })
-}
-
-const formatBytes = (bytes: number): string => {
-  if (bytes === 0) return '0 B'
-  const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
-}
-
-onMounted(async () => {
-  await Promise.all([loadVersionInfo(), loadClients()])
-  loading.value = false
-})
-</script>
-
-<template>
-  <div class="update-view">
-    <n-space justify="space-between" align="center" style="margin-bottom: 24px;">
-      <div>
-        <h2 style="margin: 0 0 8px 0;">系统更新</h2>
-        <p style="margin: 0; color: #666;">检查并应用服务端和客户端更新</p>
-      </div>
-      <n-button quaternary @click="router.push('/')">
-        <template #icon><n-icon><ArrowBackOutline /></n-icon></template>
-        返回首页
-      </n-button>
-    </n-space>
-
-    <n-spin :show="loading">
-      <!-- 当前版本信息 -->
-      <n-card title="当前版本" style="margin-bottom: 16px;">
-        <n-grid v-if="versionInfo" :cols="6" :x-gap="16" responsive="screen" cols-s="2" cols-m="3">
-          <n-gi>
-            <div class="info-item">
-              <span class="label">版本号</span>
-              <span class="value">{{ versionInfo.version }}</span>
-            </div>
-          </n-gi>
-          <n-gi>
-            <div class="info-item">
-              <span class="label">Git 提交</span>
-              <span class="value">{{ versionInfo.git_commit?.slice(0, 8) || 'N/A' }}</span>
-            </div>
-          </n-gi>
-          <n-gi>
-            <div class="info-item">
-              <span class="label">构建时间</span>
-              <span class="value">{{ versionInfo.build_time || 'N/A' }}</span>
-            </div>
-          </n-gi>
-          <n-gi>
-            <div class="info-item">
-              <span class="label">Go 版本</span>
-              <span class="value">{{ versionInfo.go_version }}</span>
-            </div>
-          </n-gi>
-          <n-gi>
-            <div class="info-item">
-              <span class="label">操作系统</span>
-              <span class="value">{{ versionInfo.os }}</span>
-            </div>
-          </n-gi>
-          <n-gi>
-            <div class="info-item">
-              <span class="label">架构</span>
-              <span class="value">{{ versionInfo.arch }}</span>
-            </div>
-          </n-gi>
-        </n-grid>
-        <n-empty v-else description="加载中..." />
-      </n-card>
-
-      <n-grid :cols="2" :x-gap="16" responsive="screen" cols-s="1">
-        <!-- 服务端更新 -->
-        <n-gi>
-          <n-card title="服务端更新">
-            <template #header-extra>
-              <n-button size="small" :loading="checkingServer" @click="handleCheckServerUpdate">
-                <template #icon><n-icon><RefreshOutline /></n-icon></template>
-                检查更新
-              </n-button>
-            </template>
-
-            <n-empty v-if="!serverUpdate" description="点击检查更新按钮查看是否有新版本" />
-
-            <template v-else>
-              <n-alert v-if="serverUpdate.available" type="success" style="margin-bottom: 16px;">
-                发现新版本 {{ serverUpdate.latest }}，当前版本 {{ serverUpdate.current }}
-              </n-alert>
-              <n-alert v-else type="info" style="margin-bottom: 16px;">
-                当前已是最新版本 {{ serverUpdate.current }}
-              </n-alert>
-
-              <n-space vertical :size="12">
-                <div v-if="serverUpdate.download_url">
-                  <p style="margin: 0 0 8px 0; color: #666;">
-                    下载文件: {{ serverUpdate.asset_name }}
-                    <n-tag size="small" style="margin-left: 8px;">{{ formatBytes(serverUpdate.asset_size) }}</n-tag>
-                  </p>
-                </div>
-
-                <div v-if="serverUpdate.release_note" style="max-height: 150px; overflow-y: auto;">
-                  <p style="margin: 0 0 4px 0; color: #666; font-size: 12px;">更新日志:</p>
-                  <pre style="margin: 0; white-space: pre-wrap; font-size: 12px; color: #333;">{{ serverUpdate.release_note }}</pre>
-                </div>
-
-                <n-button
-                  v-if="serverUpdate.available && serverUpdate.download_url"
-                  type="primary"
-                  :loading="updatingServer"
-                  @click="handleApplyServerUpdate"
-                >
-                  <template #icon><n-icon><CloudDownloadOutline /></n-icon></template>
-                  下载并更新服务端
-                </n-button>
-              </n-space>
-            </template>
-          </n-card>
-        </n-gi>
-
-        <!-- 客户端更新 -->
-        <n-gi>
-          <n-card title="客户端更新">
-            <template #header-extra>
-              <n-button size="small" :loading="checkingClient" @click="handleCheckClientUpdate">
-                <template #icon><n-icon><RefreshOutline /></n-icon></template>
-                检查更新
-              </n-button>
-            </template>
-
-            <n-empty v-if="!clientUpdate" description="点击检查更新按钮查看客户端更新" />
-
-            <template v-else>
-              <n-space vertical :size="12">
-                <div v-if="clientUpdate.download_url">
-                  <p style="margin: 0 0 8px 0; color: #666;">
-                    最新版本: {{ clientUpdate.latest }}
-                  </p>
-                  <p style="margin: 0 0 8px 0; color: #666;">
-                    下载文件: {{ clientUpdate.asset_name }}
-                    <n-tag size="small" style="margin-left: 8px;">{{ formatBytes(clientUpdate.asset_size) }}</n-tag>
-                  </p>
-                </div>
-
-                <n-empty v-if="onlineClients.length === 0" description="没有在线的客户端" />
-
-                <template v-else>
-                  <n-select
-                    v-model:value="selectedClientId"
-                    placeholder="选择要更新的客户端"
-                    :options="onlineClients.map(c => ({ label: c.nickname || c.id, value: c.id }))"
-                  />
-
-                  <n-button
-                    type="primary"
-                    :disabled="!selectedClientId || !clientUpdate.download_url"
-                    @click="handleApplyClientUpdate"
-                  >
-                    <template #icon><n-icon><RocketOutline /></n-icon></template>
-                    推送更新到客户端
-                  </n-button>
-                </template>
-              </n-space>
-            </template>
-          </n-card>
-        </n-gi>
-      </n-grid>
-    </n-spin>
-  </div>
-</template>
-
-<style scoped>
-.info-item {
-  display: flex;
-  flex-direction: column;
-  padding: 8px 0;
-}
-
-.info-item .label {
-  font-size: 12px;
-  color: #999;
-  margin-bottom: 4px;
-}
-
-.info-item .value {
-  font-size: 14px;
-  color: #333;
-  font-weight: 500;
-}
-</style>