flik/GoTunnel
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

feat(client): 添加服务端版本检查和客户端更新逻辑
Some checks failed
Build Multi-Platform Binaries / build-binaries (amd64, darwin, server, false) (push) Has been cancelled
Details
Build Multi-Platform Binaries / build-binaries (amd64, linux, client, true) (push) Has been cancelled
Details
Build Multi-Platform Binaries / build-binaries (amd64, linux, server, true) (push) Has been cancelled
Details
Build Multi-Platform Binaries / build-binaries (amd64, windows, client, true) (push) Has been cancelled
Details
Build Multi-Platform Binaries / build-binaries (amd64, windows, server, true) (push) Has been cancelled
Details
Build Multi-Platform Binaries / build-binaries (arm, 7, linux, client, true) (push) Has been cancelled
Details
Build Multi-Platform Binaries / build-binaries (arm, 7, linux, server, true) (push) Has been cancelled
Details
Build Multi-Platform Binaries / build-binaries (arm64, darwin, server, false) (push) Has been cancelled
Details
Build Multi-Platform Binaries / build-binaries (arm64, linux, client, true) (push) Has been cancelled
Details
Build Multi-Platform Binaries / build-binaries (arm64, linux, server, true) (push) Has been cancelled
Details
Build Multi-Platform Binaries / build-binaries (arm64, windows, server, false) (push) Has been cancelled
Details
Build Multi-Platform Binaries / build-frontend (push) Has been cancelled
Details

Browse Source 
- 引入 getVersionInfo API 和服务端版本获取功能
- 实现版本比较算法用于判断更新需求
- 添加服务端版本加载和目标版本计算逻辑
- 更新客户端版本显示为可更新目标版本
- 优化样式表移除不透明背景设置
- 调整进度条外观样式增强视觉效果
This commit is contained in:
Flik
2026-01-22 23:55:34 +08:00
parent a2773aa1a7
commit 5c8020d5fb
4 changed files with 202 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
web/src/components/InlineLogPanel.vue
View File

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

70
web/src/views/ClientView.vue
View File

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

261
web/src/views/HomeView.vue
View File

@@ -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 */

2
web/src/views/SettingsView.vue
View File

@@ -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;