From 138bda9ae58a29119bf768fd25e56b830eb915bb Mon Sep 17 00:00:00 2001
From: yuyx <237899745@qq.com>
Date: Thu, 27 Nov 2025 22:51:24 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20=E5=AE=8C=E5=96=84=E6=9A=97?=
 =?UTF-8?q?=E8=89=B2=E4=B8=BB=E9=A2=98=EF=BC=9A=E4=BF=AE=E5=A4=8D=E5=8F=B3?=
 =?UTF-8?q?=E9=94=AE=E8=8F=9C=E5=8D=95=E3=80=81=E5=88=86=E4=BA=AB=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E7=AD=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 修复右键菜单白色背景问题（改为暗色玻璃效果）
- 修复分享成功链接不可见问题（添加绿色高亮）
- 修复媒体预览器白色背景
- 完全重写share.html为暗色主题（与主应用风格统一）

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 frontend/app.html   |  68 ++++++----
 frontend/share.html | 316 ++++++++++++++++++++++++++++++--------------
 2 files changed, 257 insertions(+), 127 deletions(-)

diff --git a/frontend/app.html b/frontend/app.html
index 6399905..96cdd87 100644
--- a/frontend/app.html
+++ b/frontend/app.html
@@ -1276,12 +1276,12 @@
         </div>
         <div v-if="shareResult" class="alert alert-success" style="margin-top: 15px;">
           <strong>分享链接：</strong><br>
-          <a :href="shareResult.share_url" target="_blank">{{ shareResult.share_url }}</a>
-          <div v-if="shareResult.expires_at" style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #c3e6cb;">
+          <a :href="shareResult.share_url" target="_blank" style="color: #22c55e; word-break: break-all;">{{ shareResult.share_url }}</a>
+          <div v-if="shareResult.expires_at" style="margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(34, 197, 94, 0.3);">
             <strong>到期时间：</strong>
-            <span :style="{color: isExpiringSoon(shareResult.expires_at) ? '#ffc107' : '#28a745'}"><i class="fas fa-clock"></i> {{ formatExpireTime(shareResult.expires_at) }}</span>
+            <span :style="{color: isExpiringSoon(shareResult.expires_at) ? '#f59e0b' : '#22c55e'}"><i class="fas fa-clock"></i> {{ formatExpireTime(shareResult.expires_at) }}</span>
           </div>
-          <div v-else style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #c3e6cb;">
+          <div v-else style="margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(34, 197, 94, 0.3);">
             <strong>有效期：</strong>
             <span style="color: #22c55e;"><i class="fas fa-infinity"></i> 永久有效</span>
           </div>
@@ -1321,12 +1321,12 @@
         </div>
         <div v-if="shareResult" class="alert alert-success" style="margin-top: 15px;">
           <strong>分享链接：</strong><br>
-          <a :href="shareResult.share_url" target="_blank">{{ shareResult.share_url }}</a>
-          <div v-if="shareResult.expires_at" style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #c3e6cb;">
+          <a :href="shareResult.share_url" target="_blank" style="color: #22c55e; word-break: break-all;">{{ shareResult.share_url }}</a>
+          <div v-if="shareResult.expires_at" style="margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(34, 197, 94, 0.3);">
             <strong>到期时间：</strong>
-            <span :style="{color: isExpiringSoon(shareResult.expires_at) ? '#ffc107' : '#28a745'}"><i class="fas fa-clock"></i> {{ formatExpireTime(shareResult.expires_at) }}</span>
+            <span :style="{color: isExpiringSoon(shareResult.expires_at) ? '#f59e0b' : '#22c55e'}"><i class="fas fa-clock"></i> {{ formatExpireTime(shareResult.expires_at) }}</span>
           </div>
-          <div v-else style="margin-top: 10px; padding-top: 10px; border-top: 1px solid #c3e6cb;">
+          <div v-else style="margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(34, 197, 94, 0.3);">
             <strong>有效期：</strong>
             <span style="color: #22c55e;"><i class="fas fa-infinity"></i> 永久有效</span>
           </div>
@@ -2783,15 +2783,17 @@
     /* 右键菜单样式 */
     .context-menu {
       position: fixed;
-      background: white;
-      border-radius: 8px;
-      box-shadow: 0 4px 20px rgba(0,0,0,0.15);
+      background: var(--bg-secondary);
+      backdrop-filter: blur(20px);
+      border: 1px solid var(--glass-border);
+      border-radius: 12px;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.4);
       min-width: 160px;
       z-index: 10000;
       overflow: hidden;
       animation: contextMenuFadeIn 0.15s ease-out;
     }
-    
+
     @keyframes contextMenuFadeIn {
       from {
         opacity: 0;
@@ -2802,7 +2804,7 @@
         transform: scale(1);
       }
     }
-    
+
     .context-menu-item {
       padding: 12px 16px;
       cursor: pointer;
@@ -2813,37 +2815,44 @@
       color: var(--text-primary);
       font-size: 14px;
     }
-    
+
     .context-menu-item:hover {
-      background: rgba(255,255,255,0.03);
+      background: rgba(102, 126, 234, 0.15);
+      color: var(--accent-1);
     }
-    
+
     .context-menu-item i {
       width: 16px;
       text-align: center;
+      color: var(--accent-1);
     }
-    
+
     .context-menu-item-danger {
       color: #ef4444;
     }
-    
-    .context-menu-item-danger:hover {
-      background: rgba(239, 68, 68, 0.1);
+
+    .context-menu-item-danger i {
+      color: #ef4444;
     }
-    
+
+    .context-menu-item-danger:hover {
+      background: rgba(239, 68, 68, 0.15);
+      color: #ef4444;
+    }
+
     .context-menu-divider {
       height: 1px;
-      background: rgba(255,255,255,0.1);
+      background: var(--glass-border);
       margin: 4px 0;
     }
-    
+
     /* 移动端优化 */
     @media (max-width: 768px) {
       .context-menu {
         min-width: 180px;
-        box-shadow: 0 8px 32px rgba(0,0,0,0.25);
+        box-shadow: 0 8px 32px rgba(0,0,0,0.5);
       }
-      
+
       .context-menu-item {
         padding: 14px 18px;
         font-size: 15px;
@@ -2852,14 +2861,15 @@
 
     /* 媒体预览器样式 */
     .media-viewer-content {
-      background: white;
-      border-radius: 12px;
+      background: var(--bg-secondary);
+      border: 1px solid var(--glass-border);
+      border-radius: 16px;
       max-width: 90vw;
       max-height: 90vh;
       display: flex;
       flex-direction: column;
       overflow: hidden;
-      box-shadow: 0 10px 40px rgba(0,0,0,0.3);
+      box-shadow: 0 20px 60px rgba(0,0,0,0.5);
     }
 
     .media-viewer-header {
@@ -2867,7 +2877,7 @@
       justify-content: space-between;
       align-items: center;
       padding: 15px 20px;
-      background: #667eea;
+      background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
       color: white;
     }
 
diff --git a/frontend/share.html b/frontend/share.html
index 698cfbe..246d18d 100644
--- a/frontend/share.html
+++ b/frontend/share.html
@@ -11,101 +11,225 @@
     /* 防止 Vue 初始化前显示原始模板 */
     [v-cloak] { display: none !important; }
 
+    /* ========== 暗色主题 CSS 变量 ========== */
+    :root {
+      --bg-primary: #0a0a0f;
+      --bg-secondary: #12121a;
+      --bg-card: rgba(255, 255, 255, 0.03);
+      --bg-card-hover: rgba(255, 255, 255, 0.06);
+      --glass-border: rgba(255, 255, 255, 0.08);
+      --glass-border-hover: rgba(102, 126, 234, 0.3);
+      --text-primary: #ffffff;
+      --text-secondary: rgba(255, 255, 255, 0.6);
+      --text-muted: rgba(255, 255, 255, 0.4);
+      --accent-1: #667eea;
+      --accent-2: #764ba2;
+      --accent-3: #f093fb;
+      --glow: rgba(102, 126, 234, 0.4);
+      --danger: #ef4444;
+      --success: #22c55e;
+      --warning: #f59e0b;
+    }
+
     * { margin: 0; padding: 0; box-sizing: border-box; }
+
     body {
-      font-family: Arial, sans-serif;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--bg-primary);
+      color: var(--text-primary);
       min-height: 100vh;
       padding: 20px;
     }
+
+    /* 动态背景 */
+    body::before {
+      content: '';
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background:
+        radial-gradient(ellipse at top right, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
+        radial-gradient(ellipse at bottom left, rgba(118, 75, 162, 0.15) 0%, transparent 50%);
+      z-index: -1;
+    }
+
     .container {
       max-width: 1000px;
       margin: 0 auto;
     }
+
     .card {
-      background: white;
-      border-radius: 12px;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+      background: var(--bg-card);
+      backdrop-filter: blur(20px);
+      border: 1px solid var(--glass-border);
+      border-radius: 16px;
+      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
       padding: 30px;
       margin-bottom: 20px;
     }
+
     .title {
       font-size: 24px;
       font-weight: 700;
-      color: #667eea;
+      background: linear-gradient(135deg, var(--accent-1), var(--accent-3));
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
       margin-bottom: 20px;
       display: flex;
       align-items: center;
       gap: 10px;
     }
+
+    .title i {
+      -webkit-text-fill-color: var(--accent-1);
+    }
+
     .form-group { margin-bottom: 20px; }
+
     .form-label {
       display: block;
       margin-bottom: 8px;
       font-weight: 500;
-      color: #555;
+      color: var(--text-secondary);
+      font-size: 14px;
     }
+
     .form-input {
       width: 100%;
-      padding: 12px 16px;
-      border: 2px solid #e0e0e0;
-      border-radius: 8px;
+      padding: 14px 16px;
+      background: rgba(255, 255, 255, 0.05);
+      border: 1px solid var(--glass-border);
+      border-radius: 12px;
       font-size: 14px;
+      color: var(--text-primary);
+      transition: all 0.3s;
     }
+
+    .form-input:focus {
+      outline: none;
+      border-color: var(--accent-1);
+      background: rgba(255, 255, 255, 0.08);
+      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
+    }
+
+    .form-input::placeholder {
+      color: var(--text-muted);
+    }
+
     .btn {
-      padding: 10px 20px;
+      padding: 12px 24px;
       border: none;
-      border-radius: 6px;
+      border-radius: 10px;
       cursor: pointer;
       font-size: 14px;
-      font-weight: 500;
+      font-weight: 600;
+      transition: all 0.3s;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
     }
+
     .btn-primary {
-      background: #667eea;
+      background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
       color: white;
+      box-shadow: 0 4px 15px var(--glow);
     }
-    .btn-primary:hover { background: #5568d3; }
-    .alert { padding: 12px; border-radius: 8px; margin-bottom: 15px; }
-    .alert-error { background: #f8d7da; color: #721c24; }
+
+    .btn-primary:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 6px 20px var(--glow);
+    }
+
+    .btn-secondary {
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid var(--glass-border);
+      color: var(--text-primary);
+    }
+
+    .btn-secondary:hover {
+      background: rgba(255, 255, 255, 0.15);
+      border-color: var(--glass-border-hover);
+    }
+
+    .alert {
+      padding: 14px 16px;
+      border-radius: 12px;
+      margin-bottom: 15px;
+      border: 1px solid transparent;
+    }
+
+    .alert-error {
+      background: rgba(239, 68, 68, 0.15);
+      border-color: rgba(239, 68, 68, 0.3);
+      color: #fca5a5;
+    }
+
     .file-list {
       list-style: none;
     }
+
     .file-item {
       padding: 15px;
-      border-bottom: 1px solid #eee;
+      border-bottom: 1px solid var(--glass-border);
       display: flex;
       align-items: center;
       justify-content: space-between;
+      transition: all 0.3s;
     }
+
     .file-item:hover {
-      background: #f5f5f5;
+      background: var(--bg-card-hover);
     }
+
     .file-info {
       display: flex;
       align-items: center;
       gap: 15px;
     }
-    /* 列表视图文件名容器 */
+
     .file-name-container {
       flex: 1;
-      min-width: 0;  /* 允许flex子项缩小到内容大小以下 */
+      min-width: 0;
       max-width: 100%;
     }
+
     .file-name-text {
       font-weight: 500;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
       max-width: 100%;
+      color: var(--text-primary);
     }
-        .file-icon {
+
+    .file-icon {
       font-size: 24px;
     }
+
     .loading {
       text-align: center;
       padding: 40px;
-      color: #999;
+      color: var(--text-secondary);
     }
+
+    .spinner {
+      border: 3px solid rgba(255, 255, 255, 0.1);
+      border-top: 3px solid var(--accent-1);
+      border-radius: 50%;
+      width: 40px;
+      height: 40px;
+      animation: spin 1s linear infinite;
+      margin: 0 auto 16px;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+
     /* 视图切换按钮 */
     .view-controls {
       display: flex;
@@ -113,13 +237,7 @@
       gap: 10px;
       margin-bottom: 20px;
     }
-    .btn-secondary {
-      background: #e0e0e0;
-      color: #333;
-    }
-    .btn-secondary:hover {
-      background: #d0d0d0;
-    }
+
     /* 大图标视图 */
     .file-grid {
       display: grid;
@@ -127,27 +245,31 @@
       gap: 25px;
       padding: 10px 0;
     }
+
     .file-grid-item {
       display: flex;
       flex-direction: column;
       align-items: center;
       padding: 20px 15px;
-      border: 2px solid #e8e8e8;
+      border: 1px solid var(--glass-border);
       border-radius: 12px;
       cursor: pointer;
       transition: all 0.3s;
-      background: #fff;
+      background: var(--bg-card);
     }
+
     .file-grid-item:hover {
-      background: #f8f9fa;
-      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-      border-color: #667eea;
-      transform: translateY(-3px);
+      background: var(--bg-card-hover);
+      border-color: var(--glass-border-hover);
+      box-shadow: 0 8px 24px rgba(102, 126, 234, 0.15);
+      transform: translateY(-4px);
     }
+
     .file-grid-icon {
       font-size: 56px;
       margin-bottom: 12px;
     }
+
     .file-grid-name {
       font-size: 14px;
       font-weight: 500;
@@ -155,8 +277,7 @@
       word-break: break-all;
       margin-bottom: 8px;
       max-width: 100%;
-      color: #333;
-      /* 固定显示2行，超出显示省略号 */
+      color: var(--text-primary);
       display: -webkit-box;
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
@@ -166,11 +287,13 @@
       min-height: 39px;
       max-height: 39px;
     }
+
     .file-grid-size {
       font-size: 12px;
-      color: #999;
+      color: var(--text-muted);
       margin-bottom: 12px;
     }
+
     /* 单文件居中显示 */
     .single-file-container {
       display: flex;
@@ -179,88 +302,77 @@
       padding: 40px 20px;
       min-height: 300px;
     }
+
     .single-file-card {
       display: flex;
       flex-direction: column;
       align-items: center;
       padding: 50px 40px;
-      border: 2px solid #e0e0e0;
-      border-radius: 16px;
-      background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
-      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
+      border: 1px solid var(--glass-border);
+      border-radius: 20px;
+      background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
+      box-shadow: 0 8px 32px rgba(0,0,0,0.3);
       max-width: 500px;
       width: 100%;
       transition: all 0.3s;
     }
+
     .single-file-card:hover {
       transform: translateY(-5px);
-      box-shadow: 0 12px 32px rgba(0,0,0,0.18);
+      box-shadow: 0 12px 40px rgba(102, 126, 234, 0.2);
     }
+
     .single-file-icon {
       font-size: 120px;
       margin-bottom: 25px;
       animation: float 3s ease-in-out infinite;
     }
+
     @keyframes float {
       0%, 100% { transform: translateY(0px); }
       50% { transform: translateY(-10px); }
     }
+
     .single-file-name {
       font-size: 20px;
       font-weight: 600;
       text-align: center;
       word-break: break-word;
       margin-bottom: 15px;
-      color: #333;
-      /* 限制文件名显示，防止过长溢出 */
+      color: var(--text-primary);
       max-width: 100%;
       overflow: hidden;
       text-overflow: ellipsis;
       display: -webkit-box;
-      -webkit-line-clamp: 3;  /* 最多显示3行 */
+      -webkit-line-clamp: 3;
       -webkit-box-orient: vertical;
       line-height: 1.4;
     }
+
     .single-file-size {
       font-size: 16px;
-      color: #666;
+      color: var(--text-secondary);
       margin-bottom: 30px;
     }
+
     .single-file-download {
       padding: 15px 40px;
       font-size: 16px;
       font-weight: 600;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
       color: white;
       border: none;
       border-radius: 30px;
       cursor: pointer;
       transition: all 0.3s;
-      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
+      box-shadow: 0 4px 15px var(--glow);
     }
+
     .single-file-download:hover {
       transform: scale(1.05);
-      box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6);
-    }
-    /* 响应式设计 */
-    @media (max-width: 768px) {
-      .single-file-card {
-        padding: 30px 20px;
-      }
-      .single-file-icon {
-        font-size: 80px;
-      }
-      .single-file-name {
-        font-size: 16px;
-      }
-      .single-file-size {
-        font-size: 14px;
-      }
-      .single-file-download {
-        padding: 12px 30px;
-        font-size: 14px;
-      }
+      box-shadow: 0 6px 25px var(--glow);
     }
+
     /* 分享不存在提示 */
     .share-not-found {
       display: flex;
@@ -270,25 +382,29 @@
       padding: 60px 20px;
       text-align: center;
     }
+
     .share-not-found-icon {
       font-size: 100px;
-      color: #ccc;
+      color: var(--text-muted);
       margin-bottom: 30px;
       animation: fadeIn 0.5s;
     }
+
     @keyframes fadeIn {
       from { opacity: 0; transform: scale(0.8); }
       to { opacity: 1; transform: scale(1); }
     }
+
     .share-not-found-title {
       font-size: 24px;
       font-weight: 600;
-      color: #666;
+      color: var(--text-secondary);
       margin-bottom: 15px;
     }
+
     .share-not-found-message {
       font-size: 16px;
-      color: #999;
+      color: var(--text-muted);
       line-height: 1.6;
     }
 
@@ -302,14 +418,13 @@
       }
       .card {
         padding: 20px;
-        border-radius: 8px;
+        border-radius: 12px;
       }
       .title {
         font-size: 20px;
         margin-bottom: 15px;
       }
 
-      /* 视图切换按钮移动端优化 */
       .view-controls {
         margin-bottom: 15px;
       }
@@ -318,7 +433,6 @@
         font-size: 13px;
       }
 
-      /* 表单移动端优化 */
       .form-group {
         margin-bottom: 15px;
       }
@@ -335,7 +449,6 @@
         font-size: 14px;
       }
 
-      /* 文件网格视图移动端优化 */
       .file-grid {
         grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
         gap: 15px;
@@ -361,7 +474,6 @@
         font-size: 12px;
       }
 
-      /* 列表视图移动端优化 */
       .file-list {
         padding: 0;
       }
@@ -383,7 +495,6 @@
         padding: 8px 12px;
       }
 
-      /* 单文件显示移动端优化 */
       .single-file-container {
         padding: 20px 10px;
         min-height: 250px;
@@ -409,7 +520,6 @@
         font-size: 14px;
       }
 
-      /* 分享不存在提示移动端优化 */
       .share-not-found {
         padding: 40px 15px;
       }
@@ -425,13 +535,12 @@
         font-size: 14px;
       }
 
-      /* 加载状态移动端优化 */
       .loading {
         padding: 30px 15px;
       }
     }
 
-    /* 超小屏幕优化 (手机竖屏) */
+    /* 超小屏幕优化 */
     @media (max-width: 480px) {
       .card {
         padding: 15px;
@@ -440,7 +549,6 @@
         font-size: 18px;
       }
 
-      /* 文件网格更紧凑 */
       .file-grid {
         grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
         gap: 10px;
@@ -457,7 +565,6 @@
         font-size: 10px;
       }
 
-      /* 单文件显示更紧凑 */
       .single-file-icon {
         font-size: 60px !important;
       }
@@ -472,12 +579,27 @@
         font-size: 13px;
       }
 
-      /* 视图切换按钮 */
       .view-controls .btn {
         padding: 6px 10px;
         font-size: 12px;
       }
     }
+
+    /* 滚动条样式 */
+    ::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    ::-webkit-scrollbar-track {
+      background: rgba(255, 255, 255, 0.02);
+    }
+    ::-webkit-scrollbar-thumb {
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+    }
+    ::-webkit-scrollbar-thumb:hover {
+      background: rgba(255, 255, 255, 0.15);
+    }
   </style>
 </head>
 <body>
@@ -494,7 +616,7 @@
         </div>
         <!-- 通用错误显示 -->
         <div v-if="errorMessage && !needPassword && !verified && !shareNotFound" class="share-not-found">
-          <i class="fas fa-exclamation-circle share-not-found-icon" style="color: #dc3545;"></i>
+          <i class="fas fa-exclamation-circle share-not-found-icon" style="color: #ef4444;"></i>
           <div class="share-not-found-title">访问失败</div>
           <div class="share-not-found-message">{{ errorMessage }}</div>
         </div>
@@ -524,11 +646,11 @@
 
         <!-- 文件列表 -->
         <div v-else-if="verified">
-          <p style="color: #666; margin-bottom: 20px;">
-            分享者: <strong>{{ shareInfo.username }}</strong> |
+          <p style="color: var(--text-secondary); margin-bottom: 20px;">
+            分享者: <strong style="color: var(--text-primary);">{{ shareInfo.username }}</strong> |
             创建时间: {{ formatDate(shareInfo.created_at) }}
-            <span v-if="shareInfo.expires_at"> | 到期时间: <strong :style="{color: isExpiringSoon(shareInfo.expires_at) ? '#ffc107' : isExpired(shareInfo.expires_at) ? '#dc3545' : '#28a745'}">{{ formatExpireTime(shareInfo.expires_at) }}</strong></span>
-            <span v-else> | 有效期: <strong style="color: #28a745;">永久有效</strong></span>
+            <span v-if="shareInfo.expires_at"> | 到期时间: <strong :style="{color: isExpiringSoon(shareInfo.expires_at) ? '#f59e0b' : isExpired(shareInfo.expires_at) ? '#ef4444' : '#22c55e'}">{{ formatExpireTime(shareInfo.expires_at) }}</strong></span>
+            <span v-else> | 有效期: <strong style="color: #22c55e;">永久有效</strong></span>
           </p>
 
           <!-- 视图切换按钮 (多文件时才显示) -->
@@ -546,7 +668,6 @@
             <p>加载中...</p>
           </div>
 
-          <!-- 大图标视图 - 单文件居中显示 -->
           <!-- 单文件居中显示 -->
           <div v-else-if="viewingFile || files.length === 1" class="single-file-container">
             <div class="single-file-card">
@@ -584,7 +705,7 @@
                 <i class="file-icon fas" :class="getFileIcon(file)" :style="getIconColor(file)"></i>
                 <div class="file-name-container">
                   <div class="file-name-text">{{ file.name }}</div>
-                  <div style="font-size: 12px; color: #999;">{{ file.sizeFormatted }}</div>
+                  <div style="font-size: 12px; color: var(--text-muted);">{{ file.sizeFormatted }}</div>
                 </div>
               </div>
               <button v-if="!file.isDirectory" class="btn btn-primary" @click.stop="downloadFile(file)">
@@ -593,7 +714,7 @@
             </li>
           </ul>
 
-          <p v-if="files.length === 0" style="text-align: center; color: #999; padding: 40px;">
+          <p v-if="files.length === 0" style="text-align: center; color: var(--text-muted); padding: 40px;">
             暂无文件
           </p>
         </div>
@@ -824,14 +945,14 @@
 
         formatDate(dateString) {
           if (!dateString) return '';
-          
+
           // SQLite 返回的是 UTC 时间字符串，需要显式处理
           let dateStr = dateString;
           if (!dateStr.includes('Z') && !dateStr.includes('+') && !dateStr.includes('T')) {
             // SQLite 格式: "2025-11-13 16:37:19" -> ISO格式: "2025-11-13T16:37:19Z"
             dateStr = dateStr.replace(' ', 'T') + 'Z';
           }
-          
+
           const date = new Date(dateStr);
           return date.toLocaleString('zh-CN', {
             year: 'numeric',
@@ -842,8 +963,7 @@
             second: '2-digit',
             hour12: false
           });
-        }
-,
+        },
 
         // 格式化到期时间显示
         formatExpireTime(expiresAt) {
@@ -908,7 +1028,7 @@
   <script>
     // 检查是否启用调试模式
     const isDebugMode = localStorage.getItem('debugMode') === 'true';
-    
+
     // 禁用右键菜单（调试模式下不禁用）
     if (!isDebugMode) {
       document.addEventListener('contextmenu', function(e) {