updete

web/src/api/index.ts

@@ -35,6 +35,8 @@ export const stopClientPlugin = (clientId: string, pluginName: string, ruleName:
   post(`/client/${clientId}/plugin/${pluginName}/stop`, { rule_name: ruleName })
 export const restartClientPlugin = (clientId: string, pluginName: string, ruleName: string) =>
   post(`/client/${clientId}/plugin/${pluginName}/restart`, { rule_name: ruleName })
+export const deleteClientPlugin = (clientId: string, pluginName: string) =>
+  del(`/client/${clientId}/plugin/${pluginName}/delete`)
 export const updateClientPluginConfigWithRestart = (clientId: string, pluginName: string, ruleName: string, config: Record<string, string>, restart: boolean) =>
   post(`/client/${clientId}/plugin/${pluginName}/config`, { rule_name: ruleName, config, restart })
 
@@ -66,3 +68,37 @@ export const updateJSPluginConfig = (name: string, config: Record<string, string
   put(`/js-plugin/${name}/config`, { config })
 export const setJSPluginEnabled = (name: string, enabled: boolean) =>
   post(`/js-plugin/${name}/${enabled ? 'enable' : 'disable'}`)
+
+// 更新管理
+export interface UpdateInfo {
+  available: boolean
+  current: string
+  latest: string
+  release_note: string
+  download_url: string
+  asset_name: string
+  asset_size: number
+}
+
+export interface VersionInfo {
+  version: string
+  git_commit: string
+  build_time: string
+  go_version: string
+  os: string
+  arch: string
+}
+
+export const getVersionInfo = () => get<VersionInfo>('/update/version')
+export const checkServerUpdate = () => get<UpdateInfo>('/update/check/server')
+export const checkClientUpdate = (os?: string, arch?: string) => {
+  const params = new URLSearchParams()
+  if (os) params.append('os', os)
+  if (arch) params.append('arch', arch)
+  const query = params.toString()
+  return get<UpdateInfo>(`/update/check/client${query ? '?' + query : ''}`)
+}
+export const applyServerUpdate = (downloadUrl: string, restart: boolean = true) =>
+  post('/update/apply/server', { download_url: downloadUrl, restart })
+export const applyClientUpdate = (clientId: string, downloadUrl: string) =>
+  post('/update/apply/client', { client_id: clientId, download_url: downloadUrl })

web/src/config/axios/index.ts

@@ -1,4 +1,4 @@
-import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios'
+import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse, type AxiosError } from 'axios'
 
 // Token 管理
 const TOKEN_KEY = 'gotunnel_token'
@@ -7,6 +7,30 @@ export const getToken = (): string | null => localStorage.getItem(TOKEN_KEY)
 export const setToken = (token: string): void => localStorage.setItem(TOKEN_KEY, token)
 export const removeToken = (): void => localStorage.removeItem(TOKEN_KEY)
 
+// 统一 API 响应结构
+export interface ApiResponse<T = any> {
+  code: number
+  data?: T
+  message?: string
+}
+
+// 业务错误码
+export const ErrorCodes = {
+  Success: 0,
+  BadRequest: 400,
+  Unauthorized: 401,
+  Forbidden: 403,
+  NotFound: 404,
+  Conflict: 409,
+  InternalError: 500,
+  BadGateway: 502,
+  ClientNotOnline: 1001,
+  PluginNotFound: 1002,
+  InvalidClientID: 1003,
+  PluginDisabled: 1004,
+  ConfigSyncFailed: 1005,
+}
+
 // 创建 axios 实例
 const instance: AxiosInstance = axios.create({
   baseURL: '/api',
@@ -30,10 +54,39 @@ instance.interceptors.request.use(
   }
 )
 
-// 响应拦截器
+// 响应拦截器 - 处理统一响应格式
 instance.interceptors.response.use(
-  (response) => response,
-  (error) => {
+  (response: AxiosResponse<ApiResponse>) => {
+    const apiResponse = response.data
+
+    // 检查业务错误码
+    if (apiResponse.code !== undefined && apiResponse.code !== ErrorCodes.Success) {
+      // 处理认证错误
+      if (apiResponse.code === ErrorCodes.Unauthorized && !isRedirecting) {
+        isRedirecting = true
+        removeToken()
+        setTimeout(() => {
+          window.location.replace('/login')
+          isRedirecting = false
+        }, 0)
+      }
+
+      // 返回包含业务错误信息的 rejected promise
+      return Promise.reject({
+        code: apiResponse.code,
+        message: apiResponse.message || 'Unknown error',
+        response: response
+      })
+    }
+
+    // 成功时返回 data 字段
+    return {
+      ...response,
+      data: apiResponse.data !== undefined ? apiResponse.data : apiResponse
+    } as AxiosResponse
+  },
+  (error: AxiosError<ApiResponse>) => {
+    // 处理 HTTP 错误
     if (error.response?.status === 401 && !isRedirecting) {
       isRedirecting = true
       removeToken()
@@ -42,6 +95,17 @@ instance.interceptors.response.use(
         isRedirecting = false
       }, 0)
     }
+
+    // 尝试从响应中提取业务错误信息
+    const apiResponse = error.response?.data
+    if (apiResponse?.message) {
+      return Promise.reject({
+        code: apiResponse.code || error.response?.status,
+        message: apiResponse.message,
+        response: error.response
+      })
+    }
+
     return Promise.reject(error)
   }
 )

web/src/router/index.ts

@@ -25,6 +25,11 @@ const router = createRouter({
       name: 'plugins',
       component: () => import('../views/PluginsView.vue'),
     },
+    {
+      path: '/update',
+      name: 'update',
+      component: () => import('../views/UpdateView.vue'),
+    },
   ],
 })
 

web/src/views/ClientView.vue

@@ -14,7 +14,7 @@ import {
 import {
   getClient, updateClient, deleteClient, pushConfigToClient, disconnectClient, restartClient,
   getClientPluginConfig, updateClientPluginConfig,
-  getStorePlugins, installStorePlugin, getRuleSchemas, restartClientPlugin, stopClientPlugin
+  getStorePlugins, installStorePlugin, getRuleSchemas, restartClientPlugin, stopClientPlugin, deleteClientPlugin
 } from '../api'
 import type { ProxyRule, ClientPlugin, ConfigField, StorePluginInfo, RuleSchemasMap } from '../types'
 
@@ -351,6 +351,25 @@ const savePluginConfig = async () => {
     message.error(e.response?.data || '保存失败')
   }
 }
+
+// 删除客户端插件
+const handleDeletePlugin = (plugin: ClientPlugin) => {
+  dialog.warning({
+    title: '确认删除',
+    content: `确定要删除插件 ${plugin.name} 吗？`,
+    positiveText: '删除',
+    negativeText: '取消',
+    onPositiveClick: async () => {
+      try {
+        await deleteClientPlugin(clientId, plugin.name)
+        message.success(`已删除 ${plugin.name}`)
+        await loadClient()
+      } catch (e: any) {
+        message.error(e.response?.data || '删除失败')
+      }
+    }
+  })
+}
 </script>
 
 <template>
@@ -576,6 +595,10 @@ const savePluginConfig = async () => {
                   <template #icon><n-icon><StopOutline /></n-icon></template>
                   停止
                 </n-button>
+                <n-button size="small" quaternary type="error" @click="handleDeletePlugin(plugin)">
+                  <template #icon><n-icon><TrashOutline /></n-icon></template>
+                  删除
+                </n-button>
               </n-space>
             </td>
           </tr>

web/src/views/HomeView.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
-import { NCard, NButton, NSpace, NTag, NStatistic, NGrid, NGi, NEmpty } from 'naive-ui'
+import { NCard, NButton, NSpace, NTag, NStatistic, NGrid, NGi, NEmpty, NIcon } from 'naive-ui'
+import { ExtensionPuzzleOutline, CloudDownloadOutline } from '@vicons/ionicons5'
 import { getClients } from '../api'
 import type { ClientStatus } from '../types'
 
@@ -35,10 +36,22 @@ const viewClient = (id: string) => {
 
 <template>
   <div class="home">
-    <div style="margin-bottom: 24px;">
-      <h2 style="margin: 0 0 8px 0;">客户端管理</h2>
-      <p style="margin: 0; color: #666;">查看已连接的隧道客户端</p>
-    </div>
+    <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>
 
     <n-grid :cols="3" :x-gap="16" :y-gap="16" style="margin-bottom: 24px;">
       <n-gi>

web/src/views/UpdateView.vue

@@ -0,0 +1,328 @@
+<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>