From d07c08c609c6aef0170e60fa55f97adad59877c7 Mon Sep 17 00:00:00 2001
From: 237899745 <237899745@users.noreply.git.workyai.cn>
Date: Tue, 21 Jul 2026 17:11:18 +0800
Subject: [PATCH] feat: refine web workspace UI

---
 design-qa.md           |   8 +
 frontend/app.html      | 468 +++++++++++-----------
 frontend/app.js        |  23 ++
 frontend/workspace.css | 855 +++++++++++++++++++++++++++++++++++++++++
 4 files changed, 1121 insertions(+), 233 deletions(-)
 create mode 100644 design-qa.md

diff --git a/design-qa.md b/design-qa.md
new file mode 100644
index 0000000..640a9de
--- /dev/null
+++ b/design-qa.md
@@ -0,0 +1,8 @@
+# Design QA
+
+final result: passed
+
+- File workspace: verified at 1280x720 with a full-height drop target and unboxed icon layout.
+- Share center: verified resource tabs, filters, compact table, and direct-link empty state.
+- Settings center: verified storage, appearance, and security tabs plus the seven-day traffic chart.
+- Runtime: no browser console warnings or errors during the final visual pass.
diff --git a/frontend/app.html b/frontend/app.html
index 562f9ff..fedc89d 100644
--- a/frontend/app.html
+++ b/frontend/app.html
@@ -2014,6 +2014,10 @@
               </button>
             </div>
           </div>
+          <div v-if="files.length > 0 && !isDragging" class="files-drop-hint" aria-hidden="true">
+            <i class="fas fa-cloud-upload-alt"></i>
+            <span>拖放文件到此区域即可上传</span>
+          </div>
           <!-- 拖拽提示层 -->
           <div v-if="isDragging" class="drag-drop-overlay">
             <div class="drag-drop-content">
@@ -2507,9 +2511,9 @@
       </div>
     </div>
 
-        <!-- 设置视图 -->
+    <!-- 设置视图 -->
     <div v-if="isLoggedIn && currentView === 'settings'" class="main-container">
-      <div class="card">
+      <div class="card settings-page-card">
         <div class="settings-page-head">
           <h2 class="settings-page-title">
             <i class="fas fa-sliders-h"></i> 设置中心
@@ -2517,8 +2521,20 @@
           <p class="settings-page-subtitle">管理存储策略、主题外观与账号安全</p>
         </div>
 
+        <nav class="settings-tabs" aria-label="设置分类">
+          <button v-if="user && !user.is_admin" class="settings-tab" :class="{ active: settingsTab === 'storage' }" @click="settingsTab = 'storage'">
+            <i class="fas fa-database"></i> 存储管理
+          </button>
+          <button class="settings-tab" :class="{ active: settingsTab === 'appearance' }" @click="settingsTab = 'appearance'">
+            <i class="fas fa-palette"></i> 外观与主题
+          </button>
+          <button class="settings-tab" :class="{ active: settingsTab === 'security' }" @click="settingsTab = 'security'">
+            <i class="fas fa-shield-alt"></i> 账号安全
+          </button>
+        </nav>
+
         <!-- 存储管理 - 仅用户可选择 -->
-        <div v-if="user && !user.is_admin && storagePermission === 'user_choice'" class="settings-section settings-storage-choice" style="margin-bottom: 40px;">
+        <div v-if="user && !user.is_admin && storagePermission === 'user_choice'" v-show="settingsTab === 'storage'" class="settings-section settings-storage-choice" style="margin-bottom: 40px;">
           <h3 class="settings-section-title" style="margin-bottom: 20px;">
             <i class="fas fa-database"></i> 存储管理
           </h3>
@@ -2660,7 +2676,7 @@
         </div>
 
         <!-- 本地存储信息 - 仅本地存储权限 -->
-        <div v-if="user && !user.is_admin && storagePermission === 'local_only'" class="settings-section settings-local-only" style="margin-bottom: 40px;">
+        <div v-if="user && !user.is_admin && storagePermission === 'local_only'" v-show="settingsTab === 'storage'" class="settings-section settings-local-only" style="margin-bottom: 40px;">
           <h3 class="settings-section-title" style="margin-bottom: 20px;">
             <i class="fas fa-hard-drive"></i> 本地存储
           </h3>
@@ -2695,7 +2711,7 @@
         </div>
 
         <!-- OSS 概览 / 配置入口 - 仅OSS权限 -->
-        <div v-if="user && !user.is_admin && storagePermission === 'oss_only'" class="settings-section settings-oss-only" style="margin-bottom: 40px;">
+        <div v-if="user && !user.is_admin && storagePermission === 'oss_only'" v-show="settingsTab === 'storage'" class="settings-section settings-oss-only" style="margin-bottom: 40px;">
           <h3 class="settings-section-title" style="margin-bottom: 20px;">
             <i class="fas fa-cloud"></i> OSS存储
           </h3>
@@ -2796,12 +2812,12 @@
         </div>
 
         <!-- 下载流量额度与统计 -->
-        <div v-if="user && !user.is_admin" class="settings-section settings-download-traffic" style="margin-bottom: 40px;">
+        <div v-if="user && !user.is_admin" v-show="settingsTab === 'storage'" class="settings-section settings-download-traffic" style="margin-bottom: 40px;">
           <h3 class="settings-section-title" style="margin-bottom: 20px;">
             <i class="fas fa-tachometer-alt"></i> 下载流量额度与统计
           </h3>
-          <div class="settings-panel" style="background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 12px; padding: 18px;">
-            <div style="display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;">
+          <div class="settings-panel settings-traffic-panel" style="background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: 12px; padding: 18px;">
+            <div class="settings-traffic-toolbar" style="display: flex; justify-content: space-between; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;">
               <div style="font-size: 13px; color: var(--text-secondary);">
                 管理员设置的下载流量限制会在这里实时展示，单位自动按 B/KB/MB/GB/TB 切换
               </div>
@@ -2841,7 +2857,7 @@
               <i class="fas fa-exclamation-triangle"></i> {{ downloadTrafficReport.error }}
             </div>
 
-            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px;">
+            <div class="traffic-kpi-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px;">
               <div style="padding: 12px; border-radius: 10px; background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.25);">
                 <div style="font-size: 12px; color: var(--text-muted); margin-bottom: 6px;">当前限制</div>
                 <div style="font-size: 18px; font-weight: 700; color: #3b82f6;">
@@ -2871,7 +2887,7 @@
               </div>
             </div>
 
-            <div v-if="!downloadTrafficIsUnlimited" style="margin-bottom: 12px;">
+            <div v-if="!downloadTrafficIsUnlimited" class="traffic-quota-progress" style="margin-bottom: 12px;">
               <div style="display: flex; justify-content: space-between; font-size: 12px; color: var(--text-secondary); margin-bottom: 6px;">
                 <span>额度使用率</span>
                 <span>{{ downloadTrafficUsagePercentage }}%</span>
@@ -2881,7 +2897,7 @@
               </div>
             </div>
 
-            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px;">
+            <div class="traffic-summary-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 12px;">
               <div style="padding: 10px; border-radius: 8px; background: var(--bg-secondary); border: 1px solid var(--glass-border);">
                 <div style="font-size: 12px; color: var(--text-muted);">今天使用</div>
                 <div style="font-weight: 700; color: var(--text-primary); margin-top: 4px;">
@@ -2914,48 +2930,72 @@
               </div>
             </div>
 
-            <div style="border: 1px solid var(--glass-border); border-radius: 10px; overflow: hidden;">
-              <div style="padding: 10px 12px; background: var(--bg-secondary); border-bottom: 1px solid var(--glass-border); font-size: 13px; color: var(--text-secondary); display: flex; justify-content: space-between; align-items: center;">
-                <span>按天用量明细（最近 {{ downloadTrafficReport.days }} 天）</span>
-                <span v-if="downloadTrafficReport.summary?.peak_day">峰值: {{ formatReportDateLabel(downloadTrafficReport.summary.peak_day.date) }} / {{ formatBytes(downloadTrafficReport.summary.peak_day.bytes_used || 0) }}</span>
-              </div>
-              <div style="padding: 8px 12px; border-bottom: 1px solid var(--glass-border); font-size: 12px; color: var(--text-muted);">
-                说明：预览/在线播放同样计入下载流量；OSS 明细来自访问日志，通常有 5-15 分钟延迟。
-              </div>
+            <div class="traffic-visual-grid">
+              <section class="traffic-chart-card">
+                <div class="traffic-card-head">
+                  <div>
+                    <strong>近 7 天流量趋势</strong>
+                    <span>每天的下载流量变化</span>
+                  </div>
+                  <span v-if="downloadTrafficReport.summary?.peak_day" class="traffic-peak-pill">
+                    峰值 {{ formatBytes(downloadTrafficReport.summary.peak_day.bytes_used || 0) }}
+                  </span>
+                </div>
+                <div v-if="downloadTrafficReport.loading && downloadTrafficChartRows.length === 0" class="traffic-empty-state">
+                  <i class="fas fa-spinner fa-spin"></i> 报表加载中...
+                </div>
+                <div v-else-if="downloadTrafficChartRows.length === 0" class="traffic-empty-state">暂无下载流量记录</div>
+                <div v-else class="traffic-chart-bars">
+                  <div v-for="row in downloadTrafficChartRows" :key="`chart-${row.date}`" class="traffic-bar-column">
+                    <span class="traffic-bar-value">{{ formatBytes(row.bytes_used || 0) }}</span>
+                    <div class="traffic-bar-track" :title="formatReportDateLabel(row.date) + ' · ' + formatBytes(row.bytes_used || 0)">
+                      <span :style="{ height: (Number(row.bytes_used || 0) / downloadTrafficChartMax * 100) + '%' }"></span>
+                    </div>
+                    <span class="traffic-bar-label">{{ formatReportDateLabel(row.date) }}</span>
+                  </div>
+                </div>
+              </section>
 
-              <div v-if="downloadTrafficReport.loading && downloadTrafficDailyRowsDesc.length === 0" style="padding: 16px; text-align: center; color: var(--text-muted);">
-                <i class="fas fa-spinner fa-spin"></i> 报表加载中...
-              </div>
-              <div v-else-if="downloadTrafficDailyRowsDesc.length === 0" style="padding: 16px; text-align: center; color: var(--text-muted);">
-                暂无下载流量记录
-              </div>
-              <div v-else style="max-height: 280px; overflow: auto;">
-                <table style="width: 100%; border-collapse: collapse;">
-                  <thead>
-                    <tr style="background: rgba(148,163,184,0.12);">
-                      <th style="padding: 10px; text-align: left; font-size: 12px; color: var(--text-secondary);">日期</th>
-                      <th style="padding: 10px; text-align: right; font-size: 12px; color: var(--text-secondary);">下载流量</th>
-                      <th style="padding: 10px; text-align: right; font-size: 12px; color: var(--text-secondary);">下载次数</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr v-for="row in downloadTrafficDailyRowsDesc" :key="row.date" style="border-top: 1px solid var(--glass-border);">
-                      <td style="padding: 9px 10px; color: var(--text-primary); font-size: 13px;">{{ formatReportDateLabel(row.date) }}</td>
-                      <td style="padding: 9px 10px; text-align: right; color: var(--text-primary); font-size: 13px; font-weight: 600;">{{ formatBytes(row.bytes_used || 0) }}</td>
-                      <td style="padding: 9px 10px; text-align: right; color: var(--text-secondary); font-size: 13px;">{{ row.download_count || 0 }}</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
+              <section class="traffic-table-card">
+                <div class="traffic-card-head">
+                  <div>
+                    <strong>按天用量明细</strong>
+                    <span>最近 {{ downloadTrafficReport.days }} 天</span>
+                  </div>
+                </div>
+                <div v-if="downloadTrafficDailyRowsDesc.length === 0" class="traffic-empty-state">暂无下载流量记录</div>
+                <div v-else class="traffic-table-scroll">
+                  <table>
+                    <thead>
+                      <tr>
+                        <th>日期</th>
+                        <th>下载流量</th>
+                        <th>次数</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr v-for="row in downloadTrafficDailyRowsDesc.slice(0, 7)" :key="row.date">
+                        <td>{{ formatReportDateLabel(row.date) }}</td>
+                        <td>{{ formatBytes(row.bytes_used || 0) }}</td>
+                        <td>{{ row.download_count || 0 }}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </section>
+            </div>
+            <div class="traffic-report-note">
+              <i class="fas fa-info-circle"></i>
+              预览和在线播放同样计入下载流量；OSS 明细来自访问日志，通常有 5-15 分钟延迟。
             </div>
           </div>
         </div>
         
         <!-- 在线设备 -->
-        <h3 class="settings-section-title settings-section-gap" style="margin: 40px 0 20px 0;">
+        <h3 v-show="settingsTab === 'security'" class="settings-section-title settings-section-gap" style="margin: 40px 0 20px 0;">
           <i class="fas fa-laptop-house"></i> 在线设备
         </h3>
-        <div class="settings-panel" style="background: var(--bg-card); padding: 20px; border-radius: 12px; border: 1px solid var(--glass-border); margin-bottom: 30px;">
+        <div v-show="settingsTab === 'security'" class="settings-panel settings-devices-panel" style="background: var(--bg-card); padding: 20px; border-radius: 12px; border: 1px solid var(--glass-border); margin-bottom: 30px;">
           <div style="display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;">
             <div style="color: var(--text-secondary); font-size: 13px;">
               可查看当前账号已登录设备，并支持远程强制下线
@@ -3013,8 +3053,8 @@
         </div>
 
         <!-- 界面设置 -->
-        <h3 class="settings-section-title settings-section-gap" style="margin: 40px 0 20px 0;"><i class="fas fa-palette"></i> 界面设置</h3>
-        <div class="settings-panel settings-theme-panel" style="background: var(--bg-card); padding: 20px; border-radius: 12px; border: 1px solid var(--glass-border); margin-bottom: 30px;">
+        <h3 v-show="settingsTab === 'appearance'" class="settings-section-title settings-section-gap" style="margin: 40px 0 20px 0;"><i class="fas fa-palette"></i> 界面设置</h3>
+        <div v-show="settingsTab === 'appearance'" class="settings-panel settings-theme-panel" 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>
@@ -3049,9 +3089,9 @@
         </div>
 
         <!-- 账号设置 -->
-        <h3 class="settings-section-title settings-section-gap" style="margin: 40px 0 20px 0;"><i class="fas fa-user-cog"></i> 账号设置</h3>
+        <h3 v-show="settingsTab === 'security'" class="settings-section-title settings-section-gap" style="margin: 40px 0 20px 0;"><i class="fas fa-user-cog"></i> 账号设置</h3>
 
-        <div class="settings-panel settings-account-panel">
+        <div v-show="settingsTab === 'security'" class="settings-panel settings-account-panel">
         <!-- 管理员可以改用户名 -->
         <form v-if="user && user.is_admin" @submit.prevent="updateUsername" style="margin-bottom: 30px;">
           <div class="form-group">
@@ -3091,204 +3131,166 @@
             <p>集中查看分享状态、访问数据和文件直链。</p>
           </div>
           <div class="shares-page-actions">
-            <div class="view-toggle-group shares-view-toggle" aria-label="分享视图切换">
-              <button class="btn" :class="shareViewMode === 'grid' ? 'btn-primary' : 'btn-secondary'" @click="shareViewMode = 'grid'" title="卡片视图">
-                <i class="fas fa-th-large"></i><span>卡片</span>
-              </button>
-              <button class="btn" :class="shareViewMode === 'list' ? 'btn-primary' : 'btn-secondary'" @click="shareViewMode = 'list'" title="列表视图">
-                <i class="fas fa-list"></i><span>列表</span>
-              </button>
-            </div>
             <button class="btn btn-secondary" @click="refreshShareResources">
               <i class="fas fa-sync-alt"></i> 刷新
             </button>
+            <button class="btn btn-primary" @click="switchView('files')">
+              <i class="fas fa-plus"></i> 创建分享
+            </button>
           </div>
         </header>
 
-        <div class="share-metrics">
-          <div class="share-metric">
-            <span class="share-metric-icon blue"><i class="fas fa-share-alt"></i></span>
-            <span><small>分享链接</small><strong>{{ shares.length }}</strong></span>
-          </div>
-          <div class="share-metric">
-            <span class="share-metric-icon teal"><i class="fas fa-link"></i></span>
-            <span><small>文件直链</small><strong>{{ directLinks.length }}</strong></span>
-          </div>
-          <div class="share-metric share-metric-wide">
-            <span class="share-metric-icon amber"><i class="fas fa-layer-group"></i></span>
-            <span><small>共享资源总数</small><strong>{{ shares.length + directLinks.length }}</strong></span>
-          </div>
-        </div>
+        <nav class="share-resource-tabs" aria-label="分享资源分类">
+          <button :class="{ active: shareResourceTab === 'shares' }" @click="shareResourceTab = 'shares'">
+            <i class="fas fa-share-alt"></i> 分享链接
+            <span>{{ shares.length }}</span>
+          </button>
+          <button :class="{ active: shareResourceTab === 'directLinks' }" @click="shareResourceTab = 'directLinks'">
+            <i class="fas fa-link"></i> 文件直链
+            <span>{{ directLinks.length }}</span>
+          </button>
+        </nav>
 
-        <!-- 筛选/搜索 -->
-        <div class="share-toolbar shares-toolbar">
-          <div class="share-search-field">
-            <i class="fas fa-search"></i>
-            <input type="text" v-model="shareFilters.keyword" placeholder="搜索文件名、链接或分享码">
+        <section class="share-resource-card">
+          <div class="share-inline-stats">
+            <span><i class="fas fa-layer-group"></i> 共享资源 <strong>{{ shares.length + directLinks.length }}</strong></span>
+            <span><i class="fas fa-eye"></i> 累计访问 <strong>{{ shareTotalViews }}</strong></span>
+            <span><i class="fas fa-shield-alt"></i> 状态 <strong>运行正常</strong></span>
           </div>
-          <select v-model="shareFilters.type" aria-label="分享类型">
-            <option value="all">全部类型</option>
-            <option value="file">文件</option>
-            <option value="directory">文件夹</option>
-            <option value="all_files">全部文件</option>
-          </select>
-          <select v-model="shareFilters.status" aria-label="分享状态">
-            <option value="all">全部状态</option>
-            <option value="active">有效</option>
-            <option value="expiring">即将到期</option>
-            <option value="expired">已过期</option>
-            <option value="protected">已加密</option>
-            <option value="public">公开</option>
-          </select>
-          <select v-model="shareFilters.sort" aria-label="分享排序">
-            <option value="created_desc">最新创建</option>
-            <option value="created_asc">最早创建</option>
-            <option value="views_desc">访问最多</option>
-            <option value="downloads_desc">下载最多</option>
-            <option value="expire_asc">最早到期</option>
-          </select>
-        </div>
 
-        <section class="share-section">
-          <div class="share-section-head">
-            <div>
-              <span class="share-section-icon"><i class="fas fa-share-alt"></i></span>
-              <span><strong>分享链接</strong><small>可设置有效期、访问密码并查看使用情况</small></span>
+          <div class="share-toolbar shares-toolbar">
+            <div class="share-search-field">
+              <i class="fas fa-search"></i>
+              <input type="text" v-model="shareFilters.keyword" :placeholder="shareResourceTab === 'shares' ? '搜索文件名、链接或分享码' : '搜索文件名或直链地址'">
             </div>
-            <span class="share-section-count">{{ filteredShares.length }} 项</span>
+            <template v-if="shareResourceTab === 'shares'">
+              <select v-model="shareFilters.type" aria-label="分享类型">
+                <option value="all">全部类型</option>
+                <option value="file">文件</option>
+                <option value="directory">文件夹</option>
+                <option value="all_files">全部文件</option>
+              </select>
+              <select v-model="shareFilters.status" aria-label="分享状态">
+                <option value="all">全部状态</option>
+                <option value="active">有效</option>
+                <option value="expiring">即将到期</option>
+                <option value="expired">已过期</option>
+                <option value="protected">已加密</option>
+                <option value="public">公开</option>
+              </select>
+              <select v-model="shareFilters.sort" aria-label="分享排序">
+                <option value="created_desc">最新创建</option>
+                <option value="created_asc">最早创建</option>
+                <option value="views_desc">访问最多</option>
+                <option value="downloads_desc">下载最多</option>
+                <option value="expire_asc">最早到期</option>
+              </select>
+            </template>
           </div>
 
-          <div v-if="shares.length === 0" class="share-empty-state">
-            <span class="share-empty-icon"><i class="fas fa-paper-plane"></i></span>
-            <strong>还没有创建分享</strong>
-            <p>前往我的文件，选择文件或文件夹后即可生成分享链接。</p>
-            <button class="btn btn-primary" @click="switchView('files')"><i class="fas fa-folder-open"></i> 前往我的文件</button>
-          </div>
-          <div v-else-if="filteredShares.length === 0" class="share-empty-state compact">
-            <span class="share-empty-icon"><i class="fas fa-filter-circle-xmark"></i></span>
-            <strong>没有匹配的分享</strong>
-            <p>请调整上方的关键词或筛选条件。</p>
-          </div>
-
-          <!-- 大图标视图 -->
-          <div v-else-if="shareViewMode === 'grid'" class="share-card-grid">
-            <article v-for="share in filteredShares" :key="share.id" class="share-card">
-              <div class="share-card__title">
-                <span class="share-card__type"><i class="fas" :class="getShareTypeIcon(share)"></i></span>
-                <span :title="share.share_path">{{ getPathBaseName(share.share_path) }}</span>
+          <div v-if="shareResourceTab === 'shares'" class="share-resource-panel">
+            <div class="share-section-head">
+              <div>
+                <span class="share-section-icon"><i class="fas fa-share-alt"></i></span>
+                <span><strong>分享链接</strong><small>管理有效期、访问密码和使用数据</small></span>
               </div>
-              <div class="share-card__chips">
-                <span :class="['share-chip', getShareStatus(share).class]">
-                  <i class="fas" :class="getShareStatus(share).icon"></i> {{ getShareStatus(share).text }}
-                </span>
-                <span class="share-chip info"><i class="fas fa-tag"></i> {{ getShareTypeLabel(share) }}</span>
-                <span class="share-chip info"><i class="fas" :class="getShareProtection(share).icon"></i> {{ getShareProtection(share).text }}</span>
-                <span class="share-chip info" v-if="share.storage_type"><i class="fas fa-hdd"></i> {{ getStorageLabel(share.storage_type) }}</span>
-              </div>
-              <div class="share-card__url">
-                <i class="fas fa-link"></i>
-                <span class="share-card__url-link" :title="share.share_url">{{ share.share_url }}</span>
-                <span class="share-code">{{ share.share_code }}</span>
-              </div>
-              <div class="share-card__meta">
-                <span><i class="fas fa-eye"></i> {{ share.view_count }} 次访问</span>
-                <span><i class="fas fa-download"></i> {{ share.download_count }} 次下载</span>
-                <span><i class="fas fa-clock"></i> {{ share.expires_at ? formatExpireTime(share.expires_at) : '永久有效' }}</span>
-                <span><i class="fas fa-calendar-alt"></i> {{ formatDateTime(share.created_at) }}</span>
-              </div>
-              <div class="share-card__actions">
-                <button class="btn btn-secondary" @click.stop="openShare(share.share_url)"><i class="fas fa-external-link-alt"></i> 打开</button>
-                <button class="btn btn-secondary" @click.stop="copyShareLink(share.share_url)"><i class="fas fa-copy"></i> 复制</button>
-                <button class="btn btn-danger share-card__delete-btn" @click.stop="requestDeleteShare(share.id, $event)"><i class="fas fa-trash"></i> 删除</button>
-              </div>
-            </article>
-          </div>
-
-          <!-- 列表视图 -->
-          <div v-else class="share-table-wrap">
-            <table class="share-list-table">
-              <thead>
-                <tr>
-                  <th class="share-col-name">文件名</th>
-                  <th class="share-col-link">链接地址</th>
-                  <th class="share-col-number">访问</th>
-                  <th class="share-col-number">下载</th>
-                  <th class="share-col-expire">有效期</th>
-                  <th class="share-col-actions">操作</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="share in filteredShares" :key="share.id">
-                  <td :title="share.share_path"><span class="share-list-resource"><i class="fas" :class="getShareTypeIcon(share)"></i>{{ getPathBaseName(share.share_path) }}</span></td>
-                  <td><span class="share-list-link-text" :title="share.share_url">{{ share.share_url }}</span></td>
-                  <td class="share-number-cell">{{ share.view_count }}</td>
-                  <td class="share-number-cell">{{ share.download_count }}</td>
-                  <td class="share-expire-cell">
-                    <span v-if="!share.expires_at" class="share-forever"><i class="fas fa-infinity"></i> 永久有效</span>
-                    <span v-else :style="{color: isExpiringSoon(share.expires_at) ? '#d97706' : isExpired(share.expires_at) ? '#dc2626' : '#2878ff'}" :title="share.expires_at"><i class="fas fa-clock"></i> {{ formatExpireTime(share.expires_at) }}</span>
-                  </td>
-                  <td><div class="share-list-actions">
-                    <button class="btn btn-secondary" @click.stop="openShare(share.share_url)" title="打开"><i class="fas fa-up-right-from-square"></i></button>
-                    <button class="btn btn-secondary" @click.stop="copyShareLink(share.share_url)" title="复制链接"><i class="fas fa-copy"></i></button>
-                    <button class="btn btn-danger" @click.stop="requestDeleteShare(share.id, $event)" title="删除"><i class="fas fa-trash"></i></button>
-                  </div></td>
-                </tr>
-              </tbody>
-            </table>
-          </div>
-        </section>
-
-        <!-- 直链管理（独立于普通分享） -->
-        <section class="share-section direct-link-section">
-          <div class="share-section-head">
-            <div>
-              <span class="share-section-icon teal"><i class="fas fa-link"></i></span>
-              <span><strong>文件直链</strong><small>适合外部引用和直接下载，可在文件右键菜单中创建</small></span>
+              <span class="share-section-count">{{ filteredShares.length }} 项</span>
+            </div>
+
+            <div v-if="shares.length === 0" class="share-empty-state">
+              <span class="share-empty-icon"><i class="fas fa-paper-plane"></i></span>
+              <strong>还没有创建分享</strong>
+              <p>前往我的文件，选择文件或文件夹后即可生成分享链接。</p>
+              <button class="btn btn-primary" @click="switchView('files')"><i class="fas fa-folder-open"></i> 前往我的文件</button>
+            </div>
+            <div v-else-if="filteredShares.length === 0" class="share-empty-state compact">
+              <span class="share-empty-icon"><i class="fas fa-filter-circle-xmark"></i></span>
+              <strong>没有匹配的分享</strong>
+              <p>请调整上方的关键词或筛选条件。</p>
+            </div>
+            <div v-else class="share-table-wrap">
+              <table class="share-list-table">
+                <thead>
+                  <tr>
+                    <th class="share-col-name">文件名</th>
+                    <th class="share-col-link">链接地址</th>
+                    <th class="share-col-number">访问</th>
+                    <th class="share-col-number">下载</th>
+                    <th class="share-col-expire">有效期</th>
+                    <th class="share-col-actions">操作</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="share in filteredShares" :key="share.id">
+                    <td :title="share.share_path"><span class="share-list-resource"><i class="fas" :class="getShareTypeIcon(share)"></i>{{ getPathBaseName(share.share_path) }}</span></td>
+                    <td><span class="share-list-link-text" :title="share.share_url">{{ share.share_url }}</span></td>
+                    <td class="share-number-cell">{{ share.view_count }}</td>
+                    <td class="share-number-cell">{{ share.download_count }}</td>
+                    <td class="share-expire-cell">
+                      <span v-if="!share.expires_at" class="share-forever"><i class="fas fa-infinity"></i> 永久有效</span>
+                      <span v-else :style="{color: isExpiringSoon(share.expires_at) ? '#d97706' : isExpired(share.expires_at) ? '#dc2626' : '#2878ff'}" :title="share.expires_at"><i class="fas fa-clock"></i> {{ formatExpireTime(share.expires_at) }}</span>
+                    </td>
+                    <td><div class="share-list-actions">
+                      <button class="btn btn-secondary" @click.stop="openShare(share.share_url)" title="打开"><i class="fas fa-up-right-from-square"></i></button>
+                      <button class="btn btn-secondary" @click.stop="copyShareLink(share.share_url)" title="复制链接"><i class="fas fa-copy"></i></button>
+                      <button class="btn btn-danger" @click.stop="requestDeleteShare(share.id, $event)" title="删除"><i class="fas fa-trash"></i></button>
+                    </div></td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
-            <span class="share-section-count">{{ filteredDirectLinks.length }} 项</span>
           </div>
 
-          <div v-if="directLinksLoading" class="share-loading-state"><i class="fas fa-spinner fa-spin"></i> 正在加载直链列表...</div>
-          <div v-else-if="directLinks.length === 0" class="share-empty-state compact">
-            <span class="share-empty-icon teal"><i class="fas fa-link-slash"></i></span>
-            <strong>还没有创建直链</strong>
-            <p>在文件列表中右键目标文件，选择“生成直链”。</p>
-          </div>
-          <div v-else-if="filteredDirectLinks.length === 0" class="share-empty-state compact">
-            <span class="share-empty-icon"><i class="fas fa-search"></i></span>
-            <strong>没有匹配的直链</strong>
-            <p>请调整上方搜索关键词。</p>
-          </div>
-          <div v-else class="share-table-wrap">
-            <table class="share-list-table">
-              <thead>
-                <tr>
-                  <th class="share-col-name">文件名</th>
-                  <th class="share-col-link">链接地址</th>
-                  <th class="share-col-number">访问</th>
-                  <th class="share-col-number">下载</th>
-                  <th class="share-col-expire">有效期</th>
-                  <th class="share-col-actions">操作</th>
-                </tr>
-              </thead>
-              <tbody>
-                <tr v-for="link in filteredDirectLinks" :key="`direct-${link.id}`">
-                  <td :title="link.file_path"><span class="share-list-resource"><i class="fas fa-file"></i>{{ getPathBaseName(link.file_path, link.file_name) }}</span></td>
-                  <td><span class="share-list-link-text" :title="link.direct_url">{{ link.direct_url }}</span></td>
-                  <td class="share-number-cell muted" title="直链暂不统计访问次数">—</td>
-                  <td class="share-number-cell">{{ link.download_count || 0 }}</td>
-                  <td class="share-expire-cell">
-                    <span v-if="!link.expires_at" class="share-forever"><i class="fas fa-infinity"></i> 永久有效</span>
-                    <span v-else :style="{color: isExpiringSoon(link.expires_at) ? '#d97706' : isExpired(link.expires_at) ? '#dc2626' : '#2878ff'}" :title="link.expires_at"><i class="fas fa-clock"></i> {{ formatExpireTime(link.expires_at) }}</span>
-                  </td>
-                  <td><div class="share-list-actions">
-                    <button class="btn btn-secondary" @click.stop="openShare(link.direct_url)" title="打开"><i class="fas fa-up-right-from-square"></i></button>
-                    <button class="btn btn-secondary" @click.stop="copyDirectLink(link.direct_url)" title="复制链接"><i class="fas fa-copy"></i></button>
-                    <button class="btn btn-danger" @click.stop="requestDeleteDirectLink(link.id, $event)" title="删除"><i class="fas fa-trash"></i></button>
-                  </div></td>
-                </tr>
-              </tbody>
-            </table>
+          <div v-else class="share-resource-panel direct-link-section">
+            <div class="share-section-head">
+              <div>
+                <span class="share-section-icon teal"><i class="fas fa-link"></i></span>
+                <span><strong>文件直链</strong><small>适合外部引用和直接下载</small></span>
+              </div>
+              <span class="share-section-count">{{ filteredDirectLinks.length }} 项</span>
+            </div>
+            <div v-if="directLinksLoading" class="share-loading-state"><i class="fas fa-spinner fa-spin"></i> 正在加载直链列表...</div>
+            <div v-else-if="directLinks.length === 0" class="share-empty-state compact">
+              <span class="share-empty-icon teal"><i class="fas fa-link-slash"></i></span>
+              <strong>还没有创建直链</strong>
+              <p>在文件列表中右键目标文件，选择“生成直链”。</p>
+            </div>
+            <div v-else-if="filteredDirectLinks.length === 0" class="share-empty-state compact">
+              <span class="share-empty-icon"><i class="fas fa-search"></i></span>
+              <strong>没有匹配的直链</strong>
+              <p>请调整上方搜索关键词。</p>
+            </div>
+            <div v-else class="share-table-wrap">
+              <table class="share-list-table">
+                <thead>
+                  <tr>
+                    <th class="share-col-name">文件名</th>
+                    <th class="share-col-link">链接地址</th>
+                    <th class="share-col-number">访问</th>
+                    <th class="share-col-number">下载</th>
+                    <th class="share-col-expire">有效期</th>
+                    <th class="share-col-actions">操作</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr v-for="link in filteredDirectLinks" :key="`direct-${link.id}`">
+                    <td :title="link.file_path"><span class="share-list-resource"><i class="fas fa-file"></i>{{ getPathBaseName(link.file_path, link.file_name) }}</span></td>
+                    <td><span class="share-list-link-text" :title="link.direct_url">{{ link.direct_url }}</span></td>
+                    <td class="share-number-cell muted" title="直链暂不统计访问次数">—</td>
+                    <td class="share-number-cell">{{ link.download_count || 0 }}</td>
+                    <td class="share-expire-cell">
+                      <span v-if="!link.expires_at" class="share-forever"><i class="fas fa-infinity"></i> 永久有效</span>
+                      <span v-else :style="{color: isExpiringSoon(link.expires_at) ? '#d97706' : isExpired(link.expires_at) ? '#dc2626' : '#2878ff'}" :title="link.expires_at"><i class="fas fa-clock"></i> {{ formatExpireTime(link.expires_at) }}</span>
+                    </td>
+                    <td><div class="share-list-actions">
+                      <button class="btn btn-secondary" @click.stop="openShare(link.direct_url)" title="打开"><i class="fas fa-up-right-from-square"></i></button>
+                      <button class="btn btn-secondary" @click.stop="copyDirectLink(link.direct_url)" title="复制链接"><i class="fas fa-copy"></i></button>
+                      <button class="btn btn-danger" @click.stop="requestDeleteDirectLink(link.id, $event)" title="删除"><i class="fas fa-trash"></i></button>
+                    </div></td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
           </div>
         </section>
       </div>
@@ -7669,7 +7671,7 @@
     }
   </style>
 
-  <link rel="stylesheet" href="workspace.css?v=20260721005">
-  <script src="app.js?v=20260721005"></script>
+  <link rel="stylesheet" href="workspace.css?v=20260721006">
+  <script src="app.js?v=20260721006"></script>
 </body>
 </html>
diff --git a/frontend/app.js b/frontend/app.js
index cb908db..b92b5a3 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -29,6 +29,8 @@ createApp({
       isLogin: true,
       fileViewMode: 'grid', // 文件显示模式: grid 大图标, list 列表
       shareViewMode: 'list', // 分享显示模式: grid 大图标, list 列表
+      shareResourceTab: 'shares', // 分享中心资源标签: shares / directLinks
+      settingsTab: 'storage', // 设置中心标签: storage / appearance / security
       debugMode: false, // 调试模式（管理员可切换）
       adminTab: initialAdminTab, // 管理员页面当前标签：overview, settings, monitor, users
 
@@ -565,6 +567,24 @@ createApp({
       return [...rows].reverse();
     },
 
+    downloadTrafficChartRows() {
+      const rows = Array.isArray(this.downloadTrafficReport?.daily)
+        ? this.downloadTrafficReport.daily
+        : [];
+      return rows.slice(-7);
+    },
+
+    downloadTrafficChartMax() {
+      return Math.max(
+        1,
+        ...this.downloadTrafficChartRows.map(row => Number(row?.bytes_used || 0))
+      );
+    },
+
+    shareTotalViews() {
+      return this.shares.reduce((total, share) => total + Number(share?.view_count || 0), 0);
+    },
+
     // 存储类型显示文本
     storageTypeText() {
       return this.storageType === 'local' ? '本地存储' : 'OSS存储';
@@ -4209,6 +4229,9 @@ handleDragLeave(e) {
           }
           break;
         case 'settings':
+          if (this.user?.is_admin && this.settingsTab === 'storage') {
+            this.settingsTab = 'appearance';
+          }
           this.loadOnlineDevices();
           if (this.user && !this.user.is_admin) {
             this.loadOssConfig();
diff --git a/frontend/workspace.css b/frontend/workspace.css
index 19f3416..fa4cf4c 100644
--- a/frontend/workspace.css
+++ b/frontend/workspace.css
@@ -1837,3 +1837,858 @@ body.enterprise-netdisk .share-list-actions .btn {
     animation-iteration-count: 1 !important;
   }
 }
+
+/* Selected workspace direction: compact file canvas, tabbed shares and settings. */
+body.enterprise-netdisk .files-view-card {
+  height: calc(100vh - 62px);
+  min-height: 680px;
+  display: flex;
+  flex-direction: column;
+}
+
+body.enterprise-netdisk .files-page-header {
+  flex: 0 0 auto;
+  padding: 22px 26px 20px;
+}
+
+body.enterprise-netdisk .files-page-header .workspace-page-heading h1 {
+  font-size: 27px;
+}
+
+body.enterprise-netdisk .files-content-shell {
+  min-height: 0;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 24px 22px;
+}
+
+body.enterprise-netdisk .files-command-bar,
+body.enterprise-netdisk .files-search-wrap,
+body.enterprise-netdisk .files-list-heading {
+  flex: 0 0 auto;
+}
+
+body.enterprise-netdisk .files-search-wrap {
+  margin-top: 11px;
+}
+
+body.enterprise-netdisk .files-search-row {
+  padding: 7px;
+  border-radius: 11px;
+}
+
+body.enterprise-netdisk .files-search-field,
+body.enterprise-netdisk .files-search-type,
+body.enterprise-netdisk .files-search-button {
+  min-height: 38px;
+}
+
+body.enterprise-netdisk .files-list-heading {
+  min-height: 43px;
+}
+
+body.enterprise-netdisk .files-container {
+  min-height: 360px;
+  flex: 1;
+  overflow: auto;
+  padding: 8px 10px 54px;
+  border-radius: 12px;
+  background:
+    linear-gradient(rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96)),
+    radial-gradient(circle at 50% 42%, rgba(40, 120, 255, 0.08), transparent 22rem);
+  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
+}
+
+body.enterprise-netdisk .files-container.drag-over {
+  border-color: #72a8ff;
+  background: #f5f9ff;
+  box-shadow: inset 0 0 0 2px rgba(40, 120, 255, 0.12);
+}
+
+body.enterprise-netdisk .files-content-shell .file-grid {
+  min-height: 100%;
+  padding: 18px 10px;
+  align-content: start;
+  justify-content: start;
+  grid-template-columns: repeat(auto-fill, 138px);
+  grid-auto-rows: 132px;
+  gap: 8px 14px;
+}
+
+body.enterprise-netdisk .files-content-shell .file-grid-item {
+  width: 138px;
+  min-height: 132px;
+  padding: 10px 8px 9px;
+  justify-content: flex-start;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  box-shadow: none;
+  transform: none;
+}
+
+body.enterprise-netdisk .files-content-shell .file-grid-item:hover {
+  border: 0;
+  background: #f3f7fc;
+  box-shadow: none;
+  transform: none;
+}
+
+body.enterprise-netdisk .files-content-shell .file-grid-item:active {
+  background: #eaf2ff;
+}
+
+body.enterprise-netdisk .file-icon {
+  min-height: 68px;
+  margin: 0 0 4px;
+}
+
+body.enterprise-netdisk .file-grid-type-icon {
+  font-size: 54px;
+  filter: none;
+}
+
+body.enterprise-netdisk .file-type-default {
+  color: #6c7d96 !important;
+}
+
+body.enterprise-netdisk .file-type-folder {
+  color: #e8ae42 !important;
+}
+
+body.enterprise-netdisk .file-type-pdf {
+  color: #e15d62 !important;
+}
+
+body.enterprise-netdisk .file-type-word {
+  color: #397bd8 !important;
+}
+
+body.enterprise-netdisk .file-type-excel {
+  color: #2b9c70 !important;
+}
+
+body.enterprise-netdisk .file-type-archive {
+  color: #b07d50 !important;
+}
+
+body.enterprise-netdisk .file-type-audio {
+  color: #7886c7 !important;
+}
+
+body.enterprise-netdisk .file-thumbnail {
+  width: 68px;
+  height: 62px;
+  border-radius: 9px;
+  box-shadow: 0 5px 14px rgba(38, 58, 90, 0.09);
+}
+
+body.enterprise-netdisk .files-content-shell .file-name {
+  min-height: 20px;
+  color: #10203a;
+  font-size: 13px;
+  font-weight: 750;
+}
+
+body.enterprise-netdisk .files-content-shell .file-size {
+  margin-top: 2px;
+  color: #72839d;
+  font-size: 11px;
+}
+
+body.enterprise-netdisk .files-drop-hint {
+  position: absolute;
+  left: 50%;
+  bottom: 14px;
+  z-index: 2;
+  padding: 6px 11px;
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  border: 1px solid #e1e9f5;
+  border-radius: 999px;
+  color: #8492a8;
+  background: rgba(249, 251, 254, 0.92);
+  font-size: 10px;
+  pointer-events: none;
+  transform: translateX(-50%);
+}
+
+body.enterprise-netdisk .files-drop-hint i {
+  color: #5f97ec;
+}
+
+body.enterprise-netdisk .drag-drop-overlay {
+  position: absolute !important;
+  inset: 0 !important;
+  z-index: 25 !important;
+  min-height: 100% !important;
+  display: grid !important;
+  place-items: center !important;
+  border: 0 !important;
+  border-radius: 11px !important;
+  background: rgba(240, 247, 255, 0.96) !important;
+  backdrop-filter: blur(3px);
+}
+
+body.enterprise-netdisk .drag-drop-content {
+  padding: 26px 34px;
+  text-align: center;
+  border: 1px dashed #79aaff;
+  border-radius: 18px;
+  background: #fff;
+  box-shadow: 0 18px 40px rgba(32, 84, 165, 0.12);
+}
+
+body.enterprise-netdisk .drag-drop-content > i {
+  margin-bottom: 12px !important;
+  color: var(--ww-blue) !important;
+  font-size: 44px !important;
+}
+
+body.enterprise-netdisk .drag-drop-content > div:first-of-type {
+  margin-bottom: 4px !important;
+  font-size: 17px !important;
+}
+
+/* Shares */
+body.enterprise-netdisk .shares-page-card {
+  min-height: calc(100vh - 62px);
+  display: flex;
+  flex-direction: column;
+}
+
+body.enterprise-netdisk .shares-page-head {
+  padding: 24px 28px 20px;
+}
+
+body.enterprise-netdisk .share-resource-tabs {
+  min-height: 55px;
+  padding: 0 28px;
+  display: flex;
+  align-items: flex-end;
+  gap: 26px;
+  border-bottom: 1px solid var(--ww-line);
+  background: #fff;
+}
+
+body.enterprise-netdisk .share-resource-tabs button {
+  position: relative;
+  min-height: 54px;
+  padding: 0 2px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  color: #74839a;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+body.enterprise-netdisk .share-resource-tabs button::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 3px;
+  border-radius: 3px 3px 0 0;
+  background: transparent;
+}
+
+body.enterprise-netdisk .share-resource-tabs button.active {
+  color: var(--ww-blue);
+}
+
+body.enterprise-netdisk .share-resource-tabs button.active::after {
+  background: var(--ww-blue);
+}
+
+body.enterprise-netdisk .share-resource-tabs button > span {
+  min-width: 21px;
+  height: 20px;
+  padding: 0 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  color: #718097;
+  background: #edf2f8;
+  font-size: 10px;
+}
+
+body.enterprise-netdisk .share-resource-tabs button.active > span {
+  color: #1763e6;
+  background: #e8f1ff;
+}
+
+body.enterprise-netdisk .share-resource-card {
+  min-height: 0;
+  margin: 22px 28px 28px;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--ww-line);
+  border-radius: 14px;
+  background: #fff;
+}
+
+body.enterprise-netdisk .share-inline-stats {
+  min-height: 52px;
+  padding: 0 17px;
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  border-bottom: 1px solid var(--ww-line);
+  color: #74839a;
+  background: #fbfcfe;
+  font-size: 11px;
+}
+
+body.enterprise-netdisk .share-inline-stats > span {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+
+body.enterprise-netdisk .share-inline-stats i {
+  color: #7896c4;
+}
+
+body.enterprise-netdisk .share-inline-stats strong {
+  color: #23344f;
+  font-size: 12px;
+}
+
+body.enterprise-netdisk .share-resource-card .share-toolbar {
+  margin: 14px 16px;
+  padding: 7px;
+  border-radius: 11px;
+}
+
+body.enterprise-netdisk .share-resource-card .share-search-field,
+body.enterprise-netdisk .share-resource-card .share-toolbar select {
+  min-height: 38px;
+}
+
+body.enterprise-netdisk .share-resource-card .share-search-field input,
+body.enterprise-netdisk .share-resource-card .share-search-field input:focus {
+  min-height: 34px;
+  padding: 0 !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  outline: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+
+body.enterprise-netdisk .share-resource-panel {
+  min-height: 260px;
+  flex: 1;
+  overflow: auto;
+  border-top: 1px solid var(--ww-line);
+}
+
+body.enterprise-netdisk .share-resource-panel .share-section-head {
+  min-height: 58px;
+  padding: 9px 16px;
+  position: sticky;
+  top: 0;
+  z-index: 3;
+}
+
+body.enterprise-netdisk .share-resource-panel .share-section-icon {
+  width: 34px;
+  height: 34px;
+  flex-basis: 34px;
+}
+
+body.enterprise-netdisk .share-resource-panel .share-list-table td {
+  height: 56px;
+}
+
+/* Settings */
+body.enterprise-netdisk .settings-page-card {
+  min-height: calc(100vh - 62px);
+  padding: 0 !important;
+  overflow: hidden;
+}
+
+body.enterprise-netdisk .settings-page-head {
+  padding: 25px 30px 21px;
+  border-bottom: 1px solid var(--ww-line);
+  background:
+    radial-gradient(circle at 92% 0%, rgba(40, 120, 255, 0.07), transparent 19rem),
+    #fff;
+}
+
+body.enterprise-netdisk .settings-page-title {
+  margin: 0;
+  color: var(--ww-ink);
+  font-size: 27px;
+  font-weight: 800;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+body.enterprise-netdisk .settings-page-title i {
+  margin-right: 8px;
+  color: var(--ww-blue);
+  font-size: 20px;
+}
+
+body.enterprise-netdisk .settings-page-subtitle {
+  margin: 6px 0 0;
+  color: var(--ww-muted);
+  font-size: 12px;
+}
+
+body.enterprise-netdisk .settings-tabs {
+  min-height: 57px;
+  padding: 0 30px;
+  display: flex;
+  align-items: flex-end;
+  gap: 28px;
+  border-bottom: 1px solid var(--ww-line);
+  background: #fff;
+}
+
+body.enterprise-netdisk .settings-tab {
+  position: relative;
+  min-height: 56px;
+  padding: 0 2px;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  border: 0;
+  color: #74839a;
+  background: transparent;
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+body.enterprise-netdisk .settings-tab::after {
+  content: "";
+  position: absolute;
+  right: 0;
+  bottom: -1px;
+  left: 0;
+  height: 3px;
+  border-radius: 3px 3px 0 0;
+  background: transparent;
+}
+
+body.enterprise-netdisk .settings-tab.active {
+  color: var(--ww-blue);
+}
+
+body.enterprise-netdisk .settings-tab.active::after {
+  background: var(--ww-blue);
+}
+
+body.enterprise-netdisk .settings-page-card > .settings-section,
+body.enterprise-netdisk .settings-page-card > .settings-section-title,
+body.enterprise-netdisk .settings-page-card > .settings-panel {
+  margin-right: 28px !important;
+  margin-left: 28px !important;
+}
+
+body.enterprise-netdisk .settings-page-card > .settings-section {
+  margin-top: 24px !important;
+  margin-bottom: 28px !important;
+}
+
+body.enterprise-netdisk .settings-page-card > .settings-section-title {
+  margin-top: 24px !important;
+  margin-bottom: 13px !important;
+}
+
+body.enterprise-netdisk .settings-section-title {
+  color: #24354f;
+  font-size: 14px;
+  font-weight: 800;
+}
+
+body.enterprise-netdisk .settings-section-title i {
+  width: 19px;
+  color: var(--ww-blue);
+}
+
+body.enterprise-netdisk .settings-storage-choice > .settings-section-title,
+body.enterprise-netdisk .settings-download-traffic > .settings-section-title,
+body.enterprise-netdisk .settings-local-only > .settings-section-title,
+body.enterprise-netdisk .settings-oss-only > .settings-section-title {
+  margin-bottom: 13px !important;
+}
+
+body.enterprise-netdisk .settings-storage-panel,
+body.enterprise-netdisk .settings-local-panel,
+body.enterprise-netdisk .settings-oss-panel,
+body.enterprise-netdisk .settings-traffic-panel,
+body.enterprise-netdisk .settings-devices-panel,
+body.enterprise-netdisk .settings-theme-panel,
+body.enterprise-netdisk .settings-account-panel {
+  border: 1px solid var(--ww-line) !important;
+  border-radius: 14px !important;
+  background: #fff !important;
+  box-shadow: 0 10px 30px rgba(31, 49, 78, 0.06) !important;
+}
+
+body.enterprise-netdisk .settings-storage-panel {
+  padding: 18px !important;
+}
+
+body.enterprise-netdisk .settings-storage-switch {
+  padding: 9px !important;
+  border-color: #e6ebf3 !important;
+  background: #f8fafd !important;
+}
+
+body.enterprise-netdisk .settings-storage-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  gap: 12px !important;
+}
+
+body.enterprise-netdisk .settings-storage-option {
+  padding: 15px !important;
+  border-color: var(--ww-line) !important;
+  border-radius: 11px !important;
+  background: #fbfcfe !important;
+  box-shadow: none !important;
+}
+
+body.enterprise-netdisk .settings-storage-option:has(button:disabled) {
+  border-color: #b9d1f6 !important;
+  background: #f6f9ff !important;
+}
+
+body.enterprise-netdisk .settings-inline-tip {
+  border: 0 !important;
+  color: #65758d !important;
+  background: #f7f9fc !important;
+}
+
+body.enterprise-netdisk .settings-traffic-panel {
+  padding: 18px !important;
+}
+
+body.enterprise-netdisk .settings-traffic-toolbar {
+  margin-bottom: 14px !important;
+}
+
+body.enterprise-netdisk .download-traffic-range-actions {
+  gap: 5px;
+}
+
+body.enterprise-netdisk .download-traffic-range-btn {
+  min-height: 32px;
+  padding: 0 10px;
+  border-radius: 8px;
+  font-size: 11px;
+}
+
+body.enterprise-netdisk .download-traffic-range-btn-active {
+  color: #fff !important;
+  border-color: var(--ww-blue) !important;
+  background: var(--ww-blue) !important;
+}
+
+body.enterprise-netdisk .traffic-kpi-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
+  gap: 9px !important;
+}
+
+body.enterprise-netdisk .traffic-kpi-grid > div {
+  min-height: 84px;
+  padding: 12px 13px !important;
+  border-radius: 10px !important;
+  box-shadow: none;
+}
+
+body.enterprise-netdisk .traffic-quota-progress {
+  padding: 8px 2px 4px;
+}
+
+body.enterprise-netdisk .traffic-summary-grid {
+  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
+  gap: 8px !important;
+}
+
+body.enterprise-netdisk .traffic-summary-grid > div {
+  padding: 9px 10px !important;
+  border-color: #e5eaf2 !important;
+  background: #fafbfd !important;
+}
+
+body.enterprise-netdisk .traffic-visual-grid {
+  display: grid;
+  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.8fr);
+  gap: 10px;
+}
+
+body.enterprise-netdisk .traffic-chart-card,
+body.enterprise-netdisk .traffic-table-card {
+  min-width: 0;
+  padding: 13px;
+  border: 1px solid var(--ww-line);
+  border-radius: 11px;
+  background: #fff;
+}
+
+body.enterprise-netdisk .traffic-card-head {
+  min-height: 39px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+body.enterprise-netdisk .traffic-card-head > div {
+  display: flex;
+  flex-direction: column;
+}
+
+body.enterprise-netdisk .traffic-card-head strong {
+  color: #263750;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+body.enterprise-netdisk .traffic-card-head span {
+  color: #8a98ab;
+  font-size: 9px;
+}
+
+body.enterprise-netdisk .traffic-peak-pill {
+  padding: 4px 7px;
+  border-radius: 999px;
+  color: #1763e6 !important;
+  background: #eaf2ff;
+  font-weight: 700;
+}
+
+body.enterprise-netdisk .traffic-chart-bars {
+  height: 178px;
+  padding: 15px 4px 0;
+  display: grid;
+  grid-template-columns: repeat(7, minmax(30px, 1fr));
+  align-items: end;
+  gap: 8px;
+  border-bottom: 1px solid #e6ebf2;
+  background: repeating-linear-gradient(to bottom, transparent 0, transparent 43px, #f0f3f8 44px);
+}
+
+body.enterprise-netdisk .traffic-bar-column {
+  height: 160px;
+  min-width: 0;
+  display: grid;
+  grid-template-rows: 18px 116px 20px;
+  align-items: end;
+  justify-items: center;
+}
+
+body.enterprise-netdisk .traffic-bar-value,
+body.enterprise-netdisk .traffic-bar-label {
+  max-width: 100%;
+  overflow: hidden;
+  color: #8795a9;
+  font-size: 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+body.enterprise-netdisk .traffic-bar-track {
+  width: min(34px, 68%);
+  height: 112px;
+  display: flex;
+  align-items: flex-end;
+  border-radius: 6px 6px 0 0;
+}
+
+body.enterprise-netdisk .traffic-bar-track > span {
+  width: 100%;
+  min-height: 4px;
+  display: block;
+  border-radius: 6px 6px 2px 2px;
+  background: linear-gradient(180deg, #4f91ff 0%, #2878ff 100%);
+  box-shadow: 0 5px 12px rgba(40, 120, 255, 0.16);
+}
+
+body.enterprise-netdisk .traffic-table-scroll {
+  max-height: 193px;
+  overflow: auto;
+}
+
+body.enterprise-netdisk .traffic-table-scroll table {
+  width: 100%;
+  border-collapse: collapse;
+}
+
+body.enterprise-netdisk .traffic-table-scroll th,
+body.enterprise-netdisk .traffic-table-scroll td {
+  height: 29px;
+  padding: 0 7px;
+  border-bottom: 1px solid #edf1f6;
+  color: #53637a;
+  font-size: 9px;
+  text-align: right;
+}
+
+body.enterprise-netdisk .traffic-table-scroll th {
+  color: #8a98ab;
+  background: #fafbfd;
+  font-weight: 700;
+}
+
+body.enterprise-netdisk .traffic-table-scroll th:first-child,
+body.enterprise-netdisk .traffic-table-scroll td:first-child {
+  text-align: left;
+}
+
+body.enterprise-netdisk .traffic-table-scroll td:nth-child(2) {
+  color: #263750;
+  font-weight: 700;
+}
+
+body.enterprise-netdisk .traffic-empty-state {
+  min-height: 168px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  color: var(--ww-muted);
+  font-size: 11px;
+}
+
+body.enterprise-netdisk .traffic-report-note {
+  margin-top: 9px;
+  color: #8492a7;
+  font-size: 10px;
+}
+
+body.enterprise-netdisk .traffic-report-note i {
+  margin-right: 5px;
+  color: #6797df;
+}
+
+body.enterprise-netdisk .settings-theme-panel,
+body.enterprise-netdisk .settings-devices-panel,
+body.enterprise-netdisk .settings-account-panel {
+  padding: 18px !important;
+  margin-bottom: 28px !important;
+}
+
+@media (max-width: 1180px) {
+  body.enterprise-netdisk .traffic-kpi-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+
+  body.enterprise-netdisk .traffic-summary-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
+  }
+
+  body.enterprise-netdisk .traffic-visual-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 900px) {
+  body.enterprise-netdisk .files-view-card,
+  body.enterprise-netdisk .shares-page-card,
+  body.enterprise-netdisk .settings-page-card {
+    height: auto;
+    min-height: calc(100vh - 94px);
+  }
+
+  body.enterprise-netdisk .files-content-shell .file-grid {
+    grid-template-columns: repeat(auto-fill, 128px);
+  }
+
+  body.enterprise-netdisk .files-content-shell .file-grid-item {
+    width: 128px;
+  }
+
+  body.enterprise-netdisk .settings-storage-grid {
+    grid-template-columns: 1fr !important;
+  }
+}
+
+@media (max-width: 680px) {
+  body.enterprise-netdisk .files-page-header,
+  body.enterprise-netdisk .shares-page-head,
+  body.enterprise-netdisk .settings-page-head {
+    padding: 19px 17px 17px;
+  }
+
+  body.enterprise-netdisk .files-content-shell {
+    padding: 13px 14px 16px;
+  }
+
+  body.enterprise-netdisk .files-content-shell .file-grid {
+    padding-inline: 0;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 6px;
+  }
+
+  body.enterprise-netdisk .files-content-shell .file-grid-item {
+    width: auto;
+    min-height: 126px;
+  }
+
+  body.enterprise-netdisk .files-drop-hint {
+    width: max-content;
+    max-width: calc(100% - 28px);
+  }
+
+  body.enterprise-netdisk .share-resource-tabs,
+  body.enterprise-netdisk .settings-tabs {
+    padding: 0 17px;
+    gap: 18px;
+    overflow-x: auto;
+  }
+
+  body.enterprise-netdisk .share-resource-card {
+    margin: 16px 14px 18px;
+  }
+
+  body.enterprise-netdisk .share-inline-stats {
+    min-height: 48px;
+    gap: 12px;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  body.enterprise-netdisk .share-resource-card .share-toolbar {
+    display: grid;
+    grid-template-columns: 1fr;
+  }
+
+  body.enterprise-netdisk .share-resource-card .share-toolbar select {
+    width: 100%;
+  }
+
+  body.enterprise-netdisk .settings-page-card > .settings-section,
+  body.enterprise-netdisk .settings-page-card > .settings-section-title,
+  body.enterprise-netdisk .settings-page-card > .settings-panel {
+    margin-right: 14px !important;
+    margin-left: 14px !important;
+  }
+
+  body.enterprise-netdisk .traffic-kpi-grid,
+  body.enterprise-netdisk .traffic-summary-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  body.enterprise-netdisk .traffic-chart-bars {
+    gap: 4px;
+  }
+
+  body.enterprise-netdisk .traffic-bar-value {
+    display: none;
+  }
+}