From 98a5525e6dc4d3b6b932d950cebe73590e6f91d8 Mon Sep 17 00:00:00 2001
From: Flik <flik360@qq.com>
Date: Fri, 23 Jan 2026 08:40:54 +0800
Subject: [PATCH] =?UTF-8?q?feat(client):=20=E6=B7=BB=E5=8A=A0=E6=9C=8D?=
 =?UTF-8?q?=E5=8A=A1=E7=AB=AF=E7=89=88=E6=9C=AC=E6=A3=80=E6=9F=A5=E5=92=8C?=
 =?UTF-8?q?=E5=AE=A2=E6=88=B7=E7=AB=AF=E6=9B=B4=E6=96=B0=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 引入 getVersionInfo API 和服务端版本获取功能
- 实现版本比较算法用于判断更新需求
- 添加服务端版本加载和目标版本计算逻辑
- 更新客户端版本显示为可更新目标版本
- 优化样式表移除不透明背景设置
- 调整进度条外观样式增强视觉效果
---
 web/src/views/ClientView.vue   | 89 +++++++++++++++++++++++++++++++---
 web/src/views/SettingsView.vue | 47 +++++++++++++++++-
 2 files changed, 127 insertions(+), 9 deletions(-)

diff --git a/web/src/views/ClientView.vue b/web/src/views/ClientView.vue
index f8fe6cc..b4426d8 100644
--- a/web/src/views/ClientView.vue
+++ b/web/src/views/ClientView.vue
@@ -660,11 +660,12 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
                 刷新
               </button>
             </div>
-            <div class="card-body">
-              <div v-if="!systemStats" class="empty-hint">
-                {{ loadingStats ? '加载中...' : '点击刷新获取状态' }}
-              </div>
-              <template v-else>
+            <div class="card-body system-stats-body">
+              <Transition name="fade-slide" mode="out-in">
+                <div v-if="!systemStats" class="empty-hint" key="empty">
+                  {{ loadingStats ? '加载中...' : '点击刷新获取状态' }}
+                </div>
+                <div v-else class="system-stats-content" key="stats">
                 <div class="system-stat-item">
                   <span class="system-stat-label">CPU</span>
                   <div class="progress-bar">
@@ -692,7 +693,8 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
                 <div class="system-stat-detail">
                   {{ formatBytes(systemStats.disk_used) }} / {{ formatBytes(systemStats.disk_total) }}
                 </div>
-              </template>
+                </div>
+              </Transition>
             </div>
           </div>
 
@@ -917,9 +919,54 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
   padding: 32px;
 }
 
-/* Hide particles */
+/* Particles */
 .particles {
-  display: none;
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.particle {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.15;
+  filter: blur(60px);
+  animation: float 20s ease-in-out infinite;
+}
+
+.particle-1 {
+  width: 350px;
+  height: 350px;
+  background: var(--color-accent);
+  top: -80px;
+  right: -80px;
+}
+
+.particle-2 {
+  width: 280px;
+  height: 280px;
+  background: #8b5cf6;
+  bottom: -40px;
+  left: -40px;
+  animation-delay: -5s;
+}
+
+.particle-3 {
+  width: 220px;
+  height: 220px;
+  background: var(--color-success);
+  top: 40%;
+  left: 30%;
+  animation-delay: -10s;
+}
+
+@keyframes float {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  25% { transform: translate(30px, -30px) scale(1.05); }
+  50% { transform: translate(-20px, 20px) scale(0.95); }
+  75% { transform: translate(-30px, -20px) scale(1.02); }
 }
 
 .client-content {
@@ -1042,6 +1089,7 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
   display: grid;
   grid-template-columns: 300px 1fr;
   gap: 24px;
+  align-items: start;
 }
 
 @media (max-width: 900px) {
@@ -1525,6 +1573,31 @@ const handleDeletePlugin = (plugin: ClientPlugin) => {
   height: 16px;
 }
 
+/* System Stats Transition */
+.system-stats-body {
+  overflow: hidden;
+}
+
+.system-stats-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.fade-slide-enter-active,
+.fade-slide-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-slide-enter-from {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.fade-slide-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
 /* System Stats */
 .system-stat-item {
   display: flex;
diff --git a/web/src/views/SettingsView.vue b/web/src/views/SettingsView.vue
index 617e8b9..e63a505 100644
--- a/web/src/views/SettingsView.vue
+++ b/web/src/views/SettingsView.vue
@@ -243,7 +243,52 @@ onMounted(() => {
 
 /* Hide particles */
 .particles {
-  display: none;
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  pointer-events: none;
+  z-index: 0;
+}
+
+.particle {
+  position: absolute;
+  border-radius: 50%;
+  opacity: 0.15;
+  filter: blur(60px);
+  animation: float 20s ease-in-out infinite;
+}
+
+.particle-1 {
+  width: 350px;
+  height: 350px;
+  background: var(--color-accent);
+  top: -80px;
+  right: -80px;
+}
+
+.particle-2 {
+  width: 280px;
+  height: 280px;
+  background: #8b5cf6;
+  bottom: -40px;
+  left: -40px;
+  animation-delay: -5s;
+}
+
+.particle-3 {
+  width: 220px;
+  height: 220px;
+  background: var(--color-success);
+  top: 40%;
+  left: 30%;
+  animation-delay: -10s;
+}
+
+@keyframes float {
+  0%, 100% { transform: translate(0, 0) scale(1); }
+  25% { transform: translate(30px, -30px) scale(1.05); }
+  50% { transform: translate(-20px, 20px) scale(0.95); }
+  75% { transform: translate(-30px, -20px) scale(1.02); }
 }
 
 .settings-content {