✨ 添加主题切换功能：支持暗色/亮色玻璃主题

功能说明：
- 管理员可在系统设置中配置全局默认主题
- 普通用户可在设置页面选择：跟随全局/暗色/亮色
- 分享页面自动继承分享者的主题偏好
- 主题设置实时保存，刷新后保持

技术实现：
- 后端：数据库添加theme_preference字段，新增主题API
- 前端：CSS变量实现主题切换，localStorage缓存避免闪烁
- 分享页：加载时获取分享者主题设置

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

Co-Authored-By: Claude <noreply@anthropic.com>

frontend/app.html

@@ -107,7 +107,7 @@
   <script src="libs/axios.min.js"></script>
   <link rel="stylesheet" href="libs/fontawesome/css/all.min.css">
   <style>
-    /* ========== 暗色主题 CSS 变量 ========== */
+    /* ========== 暗色主题 CSS 变量（默认） ========== */
     :root {
       --bg-primary: #0a0a0f;
       --bg-secondary: #12121a;
@@ -128,6 +128,32 @@
       --info: #3b82f6;
     }
 
+    /* ========== 亮色玻璃主题 ========== */
+    .light-theme {
+      --bg-primary: #f0f4f8;
+      --bg-secondary: #ffffff;
+      --bg-card: rgba(255, 255, 255, 0.7);
+      --bg-card-hover: rgba(255, 255, 255, 0.9);
+      --glass-border: rgba(102, 126, 234, 0.2);
+      --glass-border-hover: rgba(102, 126, 234, 0.4);
+      --text-primary: #1a1a2e;
+      --text-secondary: rgba(26, 26, 46, 0.7);
+      --text-muted: rgba(26, 26, 46, 0.5);
+      --accent-1: #5a67d8;
+      --accent-2: #6b46c1;
+      --accent-3: #d53f8c;
+      --glow: rgba(90, 103, 216, 0.3);
+    }
+
+    /* 亮色主题背景渐变 */
+    .light-theme body::before,
+    body.light-theme::before {
+      background:
+        radial-gradient(ellipse at top right, rgba(102, 126, 234, 0.12) 0%, transparent 50%),
+        radial-gradient(ellipse at bottom left, rgba(118, 75, 162, 0.12) 0%, transparent 50%),
+        linear-gradient(135deg, #e0e7ff 0%, #f0f4f8 50%, #fdf2f8 100%);
+    }
+
     /* 防止 Vue 初始化前显示原始模板 */
     [v-cloak] { display: none !important; }
 
@@ -1691,9 +1717,45 @@
           </div>
         </div>
         
+        <!-- 界面设置 -->
+        <h3 style="margin: 40px 0 20px 0;"><i class="fas fa-palette"></i> 界面设置</h3>
+        <div style="background: var(--bg-card); padding: 20px; border-radius: 12px; border: 1px solid var(--glass-border); margin-bottom: 30px;">
+          <div style="margin-bottom: 15px;">
+            <span style="font-weight: 600; color: var(--text-primary);">主题模式</span>
+            <span style="color: var(--text-secondary); font-size: 13px; margin-left: 10px;">选择你喜欢的界面风格</span>
+          </div>
+          <div style="display: flex; gap: 12px; flex-wrap: wrap;">
+            <button
+              class="btn"
+              :class="userThemePreference === null ? 'btn-primary' : 'btn-secondary'"
+              @click="setUserTheme(null)"
+              style="flex: 1; min-width: 120px; padding: 12px 16px;">
+              <i class="fas fa-globe"></i> 跟随全局
+              <span v-if="userThemePreference === null" style="margin-left: 8px; font-size: 12px; opacity: 0.8;">({{ globalTheme === 'dark' ? '暗色' : '亮色' }})</span>
+            </button>
+            <button
+              class="btn"
+              :class="userThemePreference === 'dark' ? 'btn-primary' : 'btn-secondary'"
+              @click="setUserTheme('dark')"
+              style="flex: 1; min-width: 120px; padding: 12px 16px;">
+              <i class="fas fa-moon"></i> 暗色主题
+            </button>
+            <button
+              class="btn"
+              :class="userThemePreference === 'light' ? 'btn-primary' : 'btn-secondary'"
+              @click="setUserTheme('light')"
+              style="flex: 1; min-width: 120px; padding: 12px 16px;">
+              <i class="fas fa-sun"></i> 亮色主题
+            </button>
+          </div>
+          <div style="margin-top: 12px; font-size: 13px; color: var(--text-muted);">
+            <i class="fas fa-info-circle"></i> 主题设置会影响你的文件页面和分享页面的外观
+          </div>
+        </div>
+
         <!-- 账号设置 -->
-        <h3 style="margin: 40px 0 20px 0;">账号设置</h3>
-        
+        <h3 style="margin: 40px 0 20px 0;"><i class="fas fa-user-cog"></i> 账号设置</h3>
+
         <!-- 管理员可以改用户名 -->
         <form v-if="user && user.is_admin" @submit.prevent="updateUsername" style="margin-bottom: 30px;">
           <div class="form-group">
@@ -1970,8 +2032,35 @@
           </button>
           <span style="color: var(--text-secondary); font-size: 13px;">修改后需要重启服务才能生效</span>
         </div>
+
         <hr style="margin: 20px 0;">
-        <h4 style="margin-bottom: 12px;">SMTP 邮件配置（用于注册激活和找回密码）</h4>
+        <h4 style="margin-bottom: 12px;"><i class="fas fa-palette"></i> 全局主题设置</h4>
+        <div style="margin-bottom: 15px;">
+          <span style="color: var(--text-secondary); font-size: 13px;">设置系统默认主题，用户可以在个人设置中覆盖此设置</span>
+        </div>
+        <div style="display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px;">
+          <button
+            class="btn"
+            :class="globalTheme === 'dark' ? 'btn-primary' : 'btn-secondary'"
+            @click="setGlobalTheme('dark')"
+            style="padding: 12px 24px;">
+            <i class="fas fa-moon"></i> 暗色主题（默认）
+          </button>
+          <button
+            class="btn"
+            :class="globalTheme === 'light' ? 'btn-primary' : 'btn-secondary'"
+            @click="setGlobalTheme('light')"
+            style="padding: 12px 24px;">
+            <i class="fas fa-sun"></i> 亮色主题
+          </button>
+        </div>
+        <div style="font-size: 13px; color: var(--text-muted); background: var(--bg-card); padding: 12px; border-radius: 8px; border: 1px solid var(--glass-border);">
+          <i class="fas fa-info-circle"></i> 当前全局主题: <strong>{{ globalTheme === 'dark' ? '暗色' : '亮色' }}</strong>。
+          未设置个人偏好的用户将使用此主题。分享页面也会默认使用分享者的主题设置。
+        </div>
+
+        <hr style="margin: 20px 0;">
+        <h4 style="margin-bottom: 12px;"><i class="fas fa-envelope"></i> SMTP 邮件配置（用于注册激活和找回密码）</h4>
         <div class="alert alert-info" style="margin-bottom: 15px;">
           支持 QQ/163/企业邮箱等。QQ 邮箱示例：主机 <code>smtp.qq.com</code>，端口 <code>465</code>，勾选 SSL，用户名=邮箱地址，密码=授权码。
         </div>