From 0cd8341faf7f71898e12d93bfa40794bfa738b4e Mon Sep 17 00:00:00 2001
From: yuyx <237899745@qq.com>
Date: Thu, 27 Nov 2025 23:14:27 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20=E4=BF=AE=E5=A4=8D=E6=9A=97?=
 =?UTF-8?q?=E8=89=B2=E4=B8=BB=E9=A2=98=E4=B8=8B=E5=AD=98=E5=82=A8=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=8C=BA=E5=9F=9F=E7=9A=84=E6=A0=B7=E5=BC=8F=E5=86=B2?=
 =?UTF-8?q?=E7=AA=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复存储管理外层容器的白色渐变背景
- 修复本地存储和SFTP存储卡片的白色背景
- 修复上传进度条的白色背景
- 修复SFTP配置卡片的白色背景
- 统一使用CSS变量实现主题适配

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/app.html | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/app.html b/frontend/app.html
index be6469d..0370b61 100644
--- a/frontend/app.html
+++ b/frontend/app.html
@@ -1379,7 +1379,7 @@
           <p style="margin: 8px 0 0 0; opacity: 0.9; font-size: 14px;">先配置连接信息，再切换到你的专属 SFTP 空间。</p>
         </div>
         <div style="padding: 18px;">
-          <p style="color: #4b5563; line-height: 1.6; margin-bottom: 16px;">
+          <p style="color: var(--text-secondary); line-height: 1.6; margin-bottom: 16px;">
             我们会在你填写完成后再切换，确保过程平滑无干扰。
           </p>
           <div style="display: flex; gap: 10px; justify-content: flex-end;">
@@ -1461,7 +1461,7 @@
             <i class="fas fa-database"></i> 存储管理
           </h3>
 
-          <div style="background: linear-gradient(135deg, #f3f5ff 0%, #eef7ff 100%); padding: 22px; border-radius: 14px; box-shadow: 0 10px 30px rgba(102,126,234,0.12); border: 1px solid #e3e9ff;">
+          <div style="background: var(--bg-card); backdrop-filter: blur(20px); padding: 22px; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,0.2); border: 1px solid var(--glass-border);">
             <div style="display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;">
               <div style="display: flex; align-items: center; gap: 10px;">
                 <span style="font-weight: 700; color: var(--text-primary);">当前模式</span>
@@ -1486,7 +1486,7 @@
               <div v-else style="color: var(--text-secondary); font-size: 13px;">本地存储适合快速读写，SFTP 适合独立服务器空间</div>
             </div>
 
-            <div style="margin-top: 16px; background: white; border-radius: 12px; padding: 12px; border: 1px solid var(--glass-border);">
+            <div style="margin-top: 16px; background: var(--bg-secondary); border-radius: 12px; padding: 12px; border: 1px solid var(--glass-border);">
               <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; align-items: center;">
                 <div style="height: 4px; background: rgba(255,255,255,0.1); border-radius: 999px; position: relative; overflow: hidden;">
                   <div :style="{
@@ -1503,10 +1503,10 @@
             </div>
 
             <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin-top: 14px; align-items: stretch;">
-              <div style="background: white; border: 1px solid var(--glass-border); border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; height: 100%;">
+              <div style="background: var(--bg-secondary); border: 1px solid var(--glass-border); border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); display: flex; flex-direction: column; height: 100%;">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                   <div style="font-weight: 700; color: var(--text-primary); display: flex; gap: 8px; align-items: center;">
-                    <i class="fas fa-hard-drive"></i> 本地存储
+                    <i class="fas fa-hard-drive" style="color: var(--accent-1);"></i> 本地存储
                   </div>
                   <span v-if="storageType === 'local'" style="font-size: 12px; color: #22c55e; background: rgba(40,167,69,0.12); padding: 4px 8px; border-radius: 999px;">当前</span>
                 </div>
@@ -1530,12 +1530,12 @@
                 </div>
               </div>
 
-              <div style="background: white; border: 1px solid var(--glass-border); border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.04); display: flex; flex-direction: column; height: 100%;">
+              <div style="background: var(--bg-secondary); border: 1px solid var(--glass-border); border-radius: 12px; padding: 16px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); display: flex; flex-direction: column; height: 100%;">
                 <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                   <div style="font-weight: 700; color: var(--text-primary); display: flex; gap: 8px; align-items: center;">
-                    <i class="fas fa-server"></i> SFTP 存储
+                    <i class="fas fa-server" style="color: var(--accent-1);"></i> SFTP 存储
                   </div>
-                  <span v-if="storageType === 'sftp'" style="font-size: 12px; color: #4b5fc9; background: rgba(102,126,234,0.15); padding: 4px 8px; border-radius: 999px;">当前</span>
+                  <span v-if="storageType === 'sftp'" style="font-size: 12px; color: var(--accent-1); background: rgba(102,126,234,0.15); padding: 4px 8px; border-radius: 999px;">当前</span>
                 </div>
                 <div style="color: var(--text-secondary); font-size: 13px; margin-bottom: 10px;">使用你自己的服务器空间，独立存储更灵活。</div>
                 <div v-if="user?.has_ftp_config" style="font-size: 13px; color: var(--text-primary); margin-bottom: 10px;">
@@ -1650,9 +1650,9 @@
             </div>
 
             <!-- 服务器信息 -->
-            <div v-if="user.has_ftp_config" style="margin-bottom: 12px; padding: 12px; background: white; border-radius: 10px; border: 1px solid var(--glass-border);">
+            <div v-if="user.has_ftp_config" style="margin-bottom: 12px; padding: 12px; background: var(--bg-secondary); border-radius: 10px; border: 1px solid var(--glass-border);">
               <div style="font-weight: 600; color: var(--text-primary); margin-bottom: 8px;">
-                <i class="fas fa-server" style="color: #667eea;"></i> 服务器信息
+                <i class="fas fa-server" style="color: var(--accent-1);"></i> 服务器信息
               </div>
               <div style="color: var(--text-secondary); font-size: 14px;">
                 {{ user.ftp_host }}:{{ user.ftp_port }}
@@ -1660,7 +1660,7 @@
             </div>
 
             <!-- SFTP空间使用统计 -->
-            <div v-if="user.has_ftp_config" style="margin-bottom: 12px; padding: 12px; background: white; border-radius: 10px; border: 1px solid var(--glass-border);">
+            <div v-if="user.has_ftp_config" style="margin-bottom: 12px; padding: 12px; background: var(--bg-secondary); border-radius: 10px; border: 1px solid var(--glass-border);">
               <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
                 <div style="font-weight: 600; color: var(--text-primary);">
                   <i class="fas fa-chart-pie" style="color: #667eea;"></i> 空间使用统计
@@ -2678,17 +2678,17 @@
 
     <!-- 上传进度条 -->
     <div v-if="uploadProgress > 0 && uploadProgress < 100"
-         style="position: fixed; bottom: 20px; right: 20px; z-index: 2000; width: 350px; background: white; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); padding: 20px; animation: slideIn 0.3s ease-out;">
+         style="position: fixed; bottom: 20px; right: 20px; z-index: 2000; width: 350px; background: var(--bg-secondary); backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); padding: 20px; animation: slideIn 0.3s ease-out;">
       <div style="display: flex; align-items: center; gap: 12px; margin-bottom: 12px;">
-        <i class="fas fa-cloud-upload-alt" style="font-size: 24px; color: #667eea;"></i>
+        <i class="fas fa-cloud-upload-alt" style="font-size: 24px; color: var(--accent-1);"></i>
         <div style="flex: 1;">
           <div style="font-weight: 600; color: var(--text-primary); margin-bottom: 4px;">正在上传文件</div>
           <div style="font-size: 13px; color: var(--text-secondary);">{{ uploadingFileName }}</div>
 <div v-if="totalBytes > 0" style="font-size: 12px; color: var(--text-muted); margin-top: 2px;">            {{ formatFileSize(uploadedBytes) }} / {{ formatFileSize(totalBytes) }}          </div>
         </div>
-        <div style="font-size: 20px; font-weight: 700; color: #667eea;">{{ uploadProgress }}%</div>
+        <div style="font-size: 20px; font-weight: 700; color: var(--accent-1);">{{ uploadProgress }}%</div>
       </div>
-      <div style="width: 100%; height: 8px; background: rgba(255,255,255,0.1); border-radius: 4px; overflow: hidden;">
+      <div style="width: 100%; height: 8px; background: rgba(102,126,234,0.2); border-radius: 4px; overflow: hidden;">
         <div :style="{
           width: uploadProgress + '%',
           height: '100%',