From 42146aedf4e68ff21e05891b13974c468ee61644 Mon Sep 17 00:00:00 2001
From: liRQ <813144884@qq.com>
Date: Wed, 1 Jul 2026 18:22:21 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E5=A4=9A=E8=AF=AD?=
 =?UTF-8?q?=E8=A8=80=E5=9B=BE=E6=A0=87=E7=94=9F=E6=88=90=E8=84=9A=E6=9C=AC?=
 =?UTF-8?q?=E4=B8=8E=E8=A7=86=E5=9B=BE=E5=88=87=E6=8D=A2=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=8C=E4=BC=98=E5=8C=96=E5=88=86=E9=A1=B5=E4=B8=8E=E6=9A=97?=
 =?UTF-8?q?=E9=BB=91=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1. 新增Python/JS版图标生成脚本，批量创建标准化SVG图标
2. 重构页面视图切换逻辑，添加平滑过渡动画
3. 升级登录日志分页系统，支持页码跳转与页大小调整
4. 完善暗黑模式样式适配，覆盖更多UI组件
5. 优化海报展示适配，根据图片比例自动调整布局
---
 create_icons.py | Bin 0 -> 178 bytes
 gen_icons.js    |  20 +
 gen_icons.py    | 175 +++++++++
 src/App.vue     | 255 ++++++++++---
 src/style.css   | 947 +++++++++++++++++++++++++++++++++++++++++++++++-
 5 files changed, 1343 insertions(+), 54 deletions(-)
 create mode 100644 create_icons.py
 create mode 100644 gen_icons.js
 create mode 100644 gen_icons.py

diff --git a/create_icons.py b/create_icons.py
new file mode 100644
index 0000000000000000000000000000000000000000..08704a9b85839482ebc4563c8430da6db93dd1a3
GIT binary patch
literal 178
zcmXYqJqp4=5Jq1uc!yx6AbJ81U~d_as414HSvDI;F0Vc|HZ#ok^XB^ryomH9GL?H^
z&8qB!PD4k_gP=dKWn(5Xa^tCX=U8UXTeoJf+cK#Q(ymfEPF(Dc>bpXYUcr2pR&$oI
Vw5$J@Rwb(?W@*V@qcfXb`aeT9Amji5

literal 0
HcmV?d00001

diff --git a/gen_icons.js b/gen_icons.js
new file mode 100644
index 0000000..f6b3893
--- /dev/null
+++ b/gen_icons.js
@@ -0,0 +1,20 @@
+const fs = require('fs');  
+const path = require('path');  
+const iconsDir = path.join(__dirname, 'public', 'icons');  
+if (!fs.existsSync(iconsDir)) fs.mkdirSync(iconsDir, { recursive: true }); 
+const icons = {  
+  home: { path: 'M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z M9 22v-10l6 6v-10', label: 'Home' },  
+  search: { d: 'circle cx=11 cy=11 r=8 line x1=21 y1=21 x2=16.65 y2=16.65', label: 'Search' },  
+  user: { d: 'path d=M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2 circle cx=12 cy=7 r=4', label: 'User' },  
+  folder: { d: 'path d=M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z', fill: true, label: 'Folder' },  
+  file: { d: 'path d=M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z polyline points=14 2 14 8 20 8', label: 'File' },  
+  settings: { d: 'circle cx=12 cy=12 r=3 path d=M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0', label: 'Settings' },  
+  close: { d: 'line x1=18 y1=6 x2=6 y2=18 line x1=6 y1=6 x2=18 y2=18', label: 'Close' },  
+  check: { d: 'polyline points=20 6 9 17 4 12', color: '#22c55e', label: 'Check' },  
+  delete: { d: 'polyline points=3 6 5 6 21 6 path d=M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2', color: '#ef4444', label: 'Delete' },  
+  add: { d: 'circle cx=12 cy=12 r=10 line x1=12 y1=8 x2=12 y2=16 line x1=8 y1=12 x2=16 y2=12', label: 'Add' },  
+  download: { d: 'path d=M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 polyline points=7 10 12 15 17 10 line x1=12 y1=15 x2=12 y2=3', label: 'Download' },  
+  upload: { d: 'path d=M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4 polyline points=17 8 12 3 7 8 line x1=12 y1=3 x2=12 y2=15', label: 'Upload' },  
+  share: { d: 'circle cx=18 cy=5 r=3 circle cx=6 cy=12 r=3 circle cx=18 cy=19 r=3 line x1=8.59 y1=13.51 x2=15.42 y2=17.49 line x1=15.41 y1=6.51 x2=8.59 y2=10.49', label: 'Share' },  
+  favorite: { d: 'path d=M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z', fill: true, label: 'Favorite' },  
+  cloud: { d: 'path d=M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z', label: 'Cloud' },  
diff --git a/gen_icons.py b/gen_icons.py
new file mode 100644
index 0000000..800d5ce
--- /dev/null
+++ b/gen_icons.py
@@ -0,0 +1,175 @@
+# Icon Generator Script
+import os
+
+icons_dir = 'public/icons'
+os.makedirs(icons_dir, exist_ok=True)
+
+# Color scheme
+PRIMARY_COLOR = '#6366f1'
+SUCCESS_COLOR = '#22c55e'
+DANGER_COLOR = '#ef4444'
+
+def create_svg(filename, elements, color=PRIMARY_COLOR, fill=False):
+    """Create an SVG icon file"""
+    fill_attr = 'fill "{}"'.format(color) if fill else 'fill="none"'
+    svg_content = '''<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" {} stroke="{}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+{}
+</svg>'''.format(fill_attr, color, '\n'.join(elements))
+    
+    filepath = os.path.join(icons_dir, filename)
+    with open(filepath, 'w', encoding='utf-8') as f:
+        f.write(svg_content)
+    print(f'Created: {filename}')
+
+# Home icon
+create_svg('home.svg', [
+    '<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>',
+    '<polyline points="9 22 9 12 15 12 15 22"/>'
+])
+
+# Search icon
+create_svg('search.svg', [
+    '<circle cx="11" cy="11" r="8"/>',
+    '<line x1="21" y1="21" x2="16.65" y2="16.65"/>'
+])
+
+# Settings icon
+create_svg('settings.svg', [
+    '<circle cx="12" cy="12" r="3"/>',
+    '<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/>'
+])
+
+# User icon
+create_svg('user.svg', [
+    '<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>',
+    '<circle cx="12" cy="7" r="4"/>'
+])
+
+# Folder icon (filled)
+create_svg('folder.svg', [
+    '<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>'
+], fill=True)
+
+# File icon
+create_svg('file.svg', [
+    '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>',
+    '<polyline points="14 2 14 8 20 8"/>'
+])
+
+# Download icon
+create_svg('download.svg', [
+    '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>',
+    '<polyline points="7 10 12 15 17 10"/>',
+    '<line x1="12" y1="15" x2="12" y2="3"/>'
+])
+
+# Upload icon
+create_svg('upload.svg', [
+    '<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>',
+    '<polyline points="17 8 12 3 7 8"/>',
+    '<line x1="12" y1="3" x2="12" y2="15"/>'
+])
+
+# Share icon
+create_svg('share.svg', [
+    '<circle cx="18" cy="5" r="3"/>',
+    '<circle cx="6" cy="12" r="3"/>',
+    '<circle cx="18" cy="19" r="3"/>',
+    '<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>',
+    '<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>'
+])
+
+# Favorite/Like icon (filled)
+create_svg('favorite.svg', [
+    '<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>'
+], fill=True)
+
+# Delete icon
+create_svg('delete.svg', [
+    '<polyline points="3 6 5 6 21 6"/>',
+    '<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>'
+], color=DANGER_COLOR)
+
+# Edit icon
+create_svg('edit.svg', [
+    '<path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>',
+    '<path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>'
+])
+
+# Add icon
+create_svg('add.svg', [
+    '<circle cx="12" cy="12" r="10"/>',
+    '<line x1="12" y1="8" x2="12" y2="16"/>',
+    '<line x1="8" y1="12" x2="16" y2="12"/>'
+])
+
+# Back/Arrow Left icon
+create_svg('back.svg', [
+    '<line x1="19" y1="12" x2="5" y2="12"/>',
+    '<polyline points="12 19 5 12 12 5"/>'
+])
+
+# More/Options icon (three dots)
+create_svg('more.svg', [
+    '<circle cx="12" cy="12" r="1"/>',
+    '<circle cx="19" cy="12" r="1"/>',
+    '<circle cx="5" cy="12" r="1"/>'
+], fill=True)
+
+# Cloud icon
+create_svg('cloud.svg', [
+    '<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>'
+])
+
+# Drive/Server icon
+create_svg('drive.svg', [
+    '<rect x="2" y="6" width="20" height="12" rx="2"/>',
+    '<circle cx="12" cy="12" r="2"/>',
+    '<path d="M6 12h.01 M18 12h.01"/>'
+])
+
+# Log/File Text icon
+create_svg('log.svg', [
+    '<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>',
+    '<polyline points="14 2 14 8 20 8"/>',
+    '<line x1="16" y1="13" x2="8" y2="13"/>',
+    '<line x1="16" y1="17" x2="8" y2="17"/>',
+    '<polyline points="10 9 9 9 8 9"/>'
+])
+
+# Close icon
+create_svg('close.svg', [
+    '<line x1="18" y1="6" x2="6" y2="18"/>',
+    '<line x1="6" y1="6" x2="18" y2="18"/>'
+])
+
+# Check/Verify icon
+create_svg('check.svg', [
+    '<polyline points="20 6 9 17 4 12"/>'
+], color=SUCCESS_COLOR)
+
+# Play icon
+create_svg('play.svg', [
+    '<polygon points="5 3 19 12 5 21 5 3"/>'
+], fill=True)
+
+# Pause icon
+create_svg('pause.svg', [
+    '<rect x="6" y="4" width="4" height="16"/>',
+    '<rect x="14" y="4" width="4" height="16"/>'
+])
+
+# Eye icon
+create_svg('eye.svg', [
+    '<path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>',
+    '<circle cx="12" cy="12" r="3"/>'
+])
+
+# Eye Off icon
+create_svg('eye-off.svg', [
+    '<path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/>',
+    '<line x1="1" y1="1" x2="23" y2="23"/>'
+])
+
+print(f'\nTotal icons created: {len(os.listdir(icons_dir)) - 1}')  # Exclude test.txt
+print('Icon generation complete!')
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 640b408..acc023a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -179,13 +179,10 @@
               </button>
             </div>
             <div class="user-menu__divider"></div>
-            <button type="button" class="user-menu__item" @click="switchToPoster">
-              <span class="user-menu__icon">🎬</span>
-              <span>海报展示</span>
-            </button>
-            <button type="button" class="user-menu__item" @click="handleSwitchToManage">
-              <span class="user-menu__icon">📋</span>
-              <span>控制台</span>
+            <button type="button" class="user-menu__item user-menu__item--toggle" @click="toggleView" :title="currentView === 'manage' ? '切换到海报展示' : '切换到控制台'">
+              <span class="user-menu__icon">{{ currentView === 'manage' ? '🎬' : '📋' }}</span>
+              <span>{{ currentView === 'manage' ? '海报展示' : '控制台' }}</span>
+              <span class="user-menu__toggle-icon">⇄</span>
             </button>
             <button type="button" class="user-menu__item" @click="handleTmdbConfig">
               <span class="user-menu__icon">⚙️</span>
@@ -213,10 +210,12 @@
       </section>
 
       <header class="topbar dashboard-topbar">
-        <div class="dashboard-brand">
-          <strong>{{ currentView === 'manage' ? '控制台' : '海报展示' }}</strong>
-          <span>{{ currentView === 'manage' ? '管理网盘资源与账号数据' : '根据网盘内容进行 TMDB 海报刮削展示' }}</span>
-        </div>
+        <Transition name="title-slide" mode="out-in">
+          <div class="dashboard-brand" :key="currentView">
+            <strong>{{ currentView === 'manage' ? '控制台' : '海报展示' }}</strong>
+            <span>{{ currentView === 'manage' ? '管理网盘资源与账号数据' : '根据网盘内容进行 TMDB 海报刮削展示' }}</span>
+          </div>
+        </Transition>
       </header>
 
       <section v-if="currentView === 'poster' && !hasSearched && !isSearchFocused" class="hero-carousel" aria-label="每日推荐海报">
@@ -246,7 +245,8 @@
               :src="activeFeaturedPoster.posterUrl" 
               :alt="activeFeaturedPoster.title" 
               class="hero-bg-image"
-              @load="heroImageLoaded = true"
+              :class="{ 'hero-bg-image--wide': isHeroWideDynamic }"
+              @load="handleHeroImageLoad"
             />
             
             <div class="hero-main__overlay">
@@ -299,9 +299,11 @@
       </Transition>
 
 
-      <template v-if="!isLoading && currentView === 'manage' && !isSearchFocused">
-        <!-- 快捷图标区域 -->
-        <section ref="quickIconsRef" v-if="iconList.length || !hasSearched" class="quick-icons">
+      <Transition name="view-slide" mode="out-in">
+        <div :key="currentView">
+          <template v-if="!isLoading && currentView === 'manage' && !isSearchFocused">
+          <!-- 快捷图标区域 -->
+          <section ref="quickIconsRef" v-if="iconList.length || !hasSearched" class="quick-icons">
           <div class="quick-icons__header">
             <h3>快捷入口</h3>
             <div class="quick-icons__actions">
@@ -557,27 +559,29 @@
           正在查询刮削状态...
         </div>
       </SimpleDialog>
-      </template>
+          </template>
 
-      <template v-else-if="!isLoading && currentView === 'poster' && !hasSearched && !isSearchFocused">
-        <section class="poster-showcase">
-          <div class="content-toolbar">
-            <div>
-              <h2>海报展示</h2>
-              <p>根据网盘管理中的标题与海报地址进行 TMDB 匹配展示，可作为刮削结果预览。</p>
+          <template v-else-if="!isLoading && currentView === 'poster' && !hasSearched && !isSearchFocused">
+          <section class="poster-showcase">
+            <div class="content-toolbar">
+              <div>
+                <h2>海报展示</h2>
+                <p>根据网盘管理中的标题与海报地址进行 TMDB 匹配展示，可作为刮削结果预览。</p>
+              </div>
             </div>
-          </div>
-          <div v-if="loadingPosterShowcase" class="poster-list-loading">
-            正在加载海报数据...
-          </div>
-          <div v-else class="poster-list poster-list--showcase">
-            <div v-for="item in posterShowcaseData" :key="item.id" class="poster-card-wrap">
-              <PosterCard :item="item" :readonly="true" />
+            <div v-if="loadingPosterShowcase" class="poster-list-loading">
+              正在加载海报数据...
             </div>
-          </div>
-        </section>
-      </template>
-      
+            <div v-else class="poster-list poster-list--showcase">
+              <div v-for="item in posterShowcaseData" :key="item.id" class="poster-card-wrap">
+                <PosterCard :item="item" :readonly="true" />
+              </div>
+            </div>
+          </section>
+        </template>
+        </div>
+      </Transition>
+
       <!-- 海报展示的搜索结果 -->
       <Transition name="fade" mode="out-in">
         <template v-if="hasSearched && currentView === 'poster'">
@@ -763,21 +767,60 @@
               </div>
             </div>
             
-            <!-- 分页信息和加载更多按钮 -->
+            <!-- 分页控制栏 -->
             <div v-if="logPagination.total > 0" class="log-pagination">
               <div class="pagination-info">
-                已加载 {{ loginLogs.length }} / {{ logPagination.total }} 条
+                共 {{ logPagination.total }} 条
+              </div>
+              <div class="pagination-pagesize">
+                <select v-model.number="logPagination.pageSize" @change="handleLogPageChange">
+                  <option :value="10">10条/页</option>
+                  <option :value="20">20条/页</option>
+                  <option :value="50">50条/页</option>
+                  <option :value="100">100条/页</option>
+                </select>
+              </div>
+              <div class="pagination-nav">
+                <button 
+                  type="button" 
+                  class="pagination-btn pagination-btn--prev"
+                  :disabled="logPagination.pageNo <= 1"
+                  @click="handleLogPageChangeTo(logPagination.pageNo - 1)"
+                >
+                  ‹
+                </button>
+                <span class="pagination-current-page">
+                  {{ logPagination.pageNo }} / {{ logPagination.totalPages }}
+                </span>
+                <button 
+                  type="button" 
+                  class="pagination-btn pagination-btn--next"
+                  :disabled="logPagination.pageNo >= logPagination.totalPages"
+                  @click="handleLogPageChangeTo(logPagination.pageNo + 1)"
+                >
+                  ›
+                </button>
+              </div>
+              <div class="pagination-go">
+                前往
+                <input 
+                  v-model.number="logGoToPage" 
+                  type="number" 
+                  class="go-page-input"
+                  min="1"
+                  :max="logPagination.totalPages"
+                  @keyup.enter="handleGoToPage"
+                />
+                页
+                <button 
+                  type="button" 
+                  class="pagination-btn pagination-btn--go"
+                  @click="handleGoToPage"
+                  :disabled="logGoToPage < 1 || logGoToPage > logPagination.totalPages"
+                >
+                  确定
+                </button>
               </div>
-              <button 
-                v-if="logPagination.hasMore" 
-                type="button" 
-                class="load-more-btn"
-                @click="handleLoadMoreLogs"
-                :disabled="loadingLogs"
-              >
-                {{ loadingLogs ? '加载中...' : '加载更多' }}
-              </button>
-              <div v-else class="no-more">—— 已加载全部 ——</div>
             </div>
           </template>
         </div>
@@ -974,6 +1017,7 @@ const confirmConfig = reactive({
 })
 const showLogDialog = ref(false)
 const loadingLogs = ref(false)
+const logGoToPage = ref(1) // 前往指定页输入框
 const logFilter = reactive({
   username: '',      // 用户名筛选
   result: '',        // 结果筛选：success/fail（留空表示全部）
@@ -1070,6 +1114,8 @@ const loadingRecommend = ref(false)
 
 // 海报图片加载状态
 const heroImageLoaded = ref(false)
+// 动态判断当前海报是否为横版（基于图片真实宽高比）
+const isHeroWideDynamic = ref(false)
 let heroImagePreloadTimer = null
 
 // 当前用户信息
@@ -1701,13 +1747,113 @@ async function handleOpenLogDialog() {
   logPagination.pageNo = 1
   logPagination.pageSize = 20
   logPagination.total = 0
-  logPagination.hasMore = true
+  logGoToPage.value = 1
   
   // 清空之前的日志
   rawData.value.loginLogs = []
   
   // 加载第一页数据
-  await loadMoreLogs()
+  await loadLogPage(true)
+}
+
+// 计算总页数
+const logTotalPages = computed(() => {
+  if (logPagination.total === 0) return 1
+  return Math.ceil(logPagination.total / logPagination.pageSize)
+})
+
+// 加载指定页数据（重置模式会清空现有数据）
+async function loadLogPage(reset = false) {
+  if (loadingLogs.value) return
+  
+  loadingLogs.value = true
+  
+  try {
+    const params = { 
+      pageNo: logPagination.pageNo, 
+      pageSize: logPagination.pageSize 
+    }
+    
+    // 只有管理员（userType=2）才能查询所有日志
+    if (currentUser.userType !== 2) {
+      params.userId = currentUser.userId
+    }
+    
+    // 添加筛选条件
+    if (logFilter.username.trim()) {
+      params.username = logFilter.username.trim()
+    }
+    if (logFilter.result) {
+      params.result = logFilter.result
+    }
+    if (logFilter.startDate) {
+      params.startDate = logFilter.startDate
+    }
+    if (logFilter.endDate) {
+      params.endDate = logFilter.endDate
+    }
+    
+    const logsRes = await fetchLoginLogs(params)
+    
+    if (Array.isArray(logsRes?.data?.list)) {
+      const newLogs = logsRes.data.list
+      
+      // 如果是重置模式，替换数据；否则追加
+      if (reset) {
+        if (rawData.value?.loginLogs) {
+          rawData.value.loginLogs = newLogs
+        } else {
+          rawData.value.loginLogs = newLogs
+        }
+      } else {
+        if (rawData.value?.loginLogs) {
+          rawData.value.loginLogs.push(...newLogs)
+        } else {
+          rawData.value.loginLogs = newLogs
+        }
+      }
+      
+      // 更新分页信息
+      logPagination.total = logsRes.data.total || 0
+      
+      console.log(`成功加载第 ${logPagination.pageNo} 页，共 ${newLogs.length} 条日志，总计 ${logPagination.total} 条`)
+    } else {
+      console.warn('登录日志返回数据异常', logsRes)
+    }
+  } catch (err) {
+    console.error('加载登录日志失败', err)
+    setErrorMessage(err?.message || '加载登录日志失败')
+  } finally {
+    loadingLogs.value = false
+  }
+}
+
+// 处理页码变化（从下拉框或翻页按钮触发）
+async function handleLogPageChange() {
+  // 更新总页数
+  logPagination.pageNo = 1
+  logGoToPage.value = 1
+  rawData.value.loginLogs = []
+  await loadLogPage(true)
+}
+
+// 跳转到指定页
+async function handleLogPageChangeTo(page) {
+  const totalPages = logTotalPages.value
+  if (page < 1 || page > totalPages) return
+  logPagination.pageNo = page
+  logGoToPage.value = page
+  rawData.value.loginLogs = []
+  await loadLogPage(true)
+}
+
+// 前往指定页（输入框）
+async function handleGoToPage() {
+  const totalPages = logTotalPages.value
+  const targetPage = Math.max(1, Math.min(logGoToPage.value || 1, totalPages))
+  if (targetPage === logPagination.pageNo) return
+  logGoToPage.value = targetPage
+  await handleLogPageChangeTo(targetPage)
 }
 
 // 加载更多日志（分页加载）
@@ -2698,15 +2844,30 @@ function preloadImage(url) {
   
   const img = new Image()
   img.onload = () => {
+    // 根据真实宽高比判断是否为横版海报（宽高比 > 1.2 视为横版）
+    const aspectRatio = img.naturalWidth / img.naturalHeight
+    isHeroWideDynamic.value = aspectRatio > 1.2
     heroImageLoaded.value = true
   }
   img.onerror = () => {
     // 图片加载失败，显示默认海报
+    isHeroWideDynamic.value = false
     heroImageLoaded.value = true
   }
   img.src = url
 }
 
+// 处理海报图片加载完成事件
+function handleHeroImageLoad(event) {
+  const img = event.target
+  if (img && img.naturalWidth && img.naturalHeight) {
+    // 根据真实宽高比判断是否为横版海报（宽高比 > 1.2 视为横版）
+    const aspectRatio = img.naturalWidth / img.naturalHeight
+    isHeroWideDynamic.value = aspectRatio > 1.2
+  }
+  heroImageLoaded.value = true
+}
+
 /**
  * 刷新当前网盘文件夹列表
  */
diff --git a/src/style.css b/src/style.css
index e027561..536dd7f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -390,6 +390,30 @@ canvas {
 .network-toggle__btn--active:hover {
   background: #fff;
 }
+
+/* 内外网切换按钮黑夜模式适配 */
+body.dark-mode .network-toggle {
+  background: rgba(56, 189, 248, 0.1);
+}
+
+body.dark-mode .network-toggle__btn {
+  color: #94a3b8;
+}
+
+body.dark-mode .network-toggle__btn:hover {
+  color: #38bdf8;
+  background: rgba(56, 189, 248, 0.1);
+}
+
+body.dark-mode .network-toggle__btn--active {
+  background: rgba(56, 189, 248, 0.2);
+  color: #38bdf8;
+  box-shadow: 0 1px 4px rgba(56, 189, 248, 0.2);
+}
+
+body.dark-mode .network-toggle__btn--active:hover {
+  background: rgba(56, 189, 248, 0.25);
+}
 .quick-icons__grid {
   display: flex;
   flex-wrap: wrap;
@@ -545,6 +569,31 @@ canvas {
   box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
 }
 
+/* 快捷入口按钮黑夜模式适配 */
+body.dark-mode .quick-access-btn {
+  background: #1e293b;
+  border-color: #334155;
+  color: #94a3b8;
+}
+
+body.dark-mode .quick-access-btn:hover {
+  background: rgba(56, 189, 248, 0.1);
+  border-color: #38bdf8;
+  color: #38bdf8;
+  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2);
+}
+
+body.dark-mode .quick-access-btn.active {
+  background: rgba(56, 189, 248, 0.15);
+  border-color: #38bdf8;
+  color: #38bdf8;
+  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.3);
+}
+
+body.dark-mode .quick-access-btn__icon {
+  filter: brightness(0.8) invert(0.7);
+}
+
 /* 快捷入口按钮包裹器（相对定位，用于面板定位） */
 .quick-access-wrapper {
   position: relative;
@@ -808,6 +857,24 @@ canvas {
   background: rgba(220, 38, 38, 0.08);
 }
 
+/* 视图切换按钮样式：让切换图标始终显示在右侧，起到提示切换的作用 */
+.user-menu__item--toggle {
+  position: relative;
+  justify-content: flex-start;
+}
+
+.user-menu__toggle-icon {
+  margin-left: auto;
+  font-size: 14px;
+  color: var(--ink-subtle, #94a3b8);
+  transition: transform 0.25s ease;
+}
+
+.user-menu__item--toggle:hover .user-menu__toggle-icon {
+  transform: translateX(2px);
+  color: var(--primary, #6366f1);
+}
+
 .dashboard-topbar {
   display: flex;
   align-items: center;
@@ -1100,6 +1167,50 @@ canvas {
   opacity: 0;
 }
 
+/* 视图切换过渡动画：滑动 + 淡入淡出效果 */
+.view-slide-enter-active,
+.view-slide-leave-active {
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.view-slide-enter-from {
+  opacity: 0;
+  transform: translateX(30px);
+}
+
+.view-slide-leave-to {
+  opacity: 0;
+  transform: translateX(-30px);
+}
+
+.view-slide-enter-to,
+.view-slide-leave-from {
+  opacity: 1;
+  transform: translateX(0);
+}
+
+/* 标题切换过渡动画：上下滑动 + 淡入淡出 */
+.title-slide-enter-active,
+.title-slide-leave-active {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.title-slide-enter-from {
+  opacity: 0;
+  transform: translateY(-10px);
+}
+
+.title-slide-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.title-slide-enter-to,
+.title-slide-leave-from {
+  opacity: 1;
+  transform: translateY(0);
+}
+
 .hero-main__meta-item {
   display: inline-flex;
   align-items: center;
@@ -2730,6 +2841,104 @@ canvas {
   width: 100%;
 }
 
+/* ===== 登录日志新分页控件 ===== */
+.pagination-pagesize {
+  display: flex;
+  align-items: center;
+}
+
+.pagination-pagesize select {
+  padding: 8px 12px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fff;
+  color: var(--ink);
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.pagination-pagesize select:focus {
+  outline: none;
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.pagination-nav {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.pagination-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 36px;
+  height: 36px;
+  padding: 0 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fff;
+  color: var(--ink);
+  font-size: 16px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.pagination-btn:hover:not(:disabled) {
+  background: #6366f1;
+  border-color: #6366f1;
+  color: #fff;
+}
+
+.pagination-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  background: #f9fafb;
+}
+
+.pagination-current-page {
+  font-size: 14px;
+  color: var(--ink);
+  font-weight: 600;
+  min-width: 80px;
+  text-align: center;
+}
+
+.pagination-go {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 14px;
+  color: var(--muted);
+}
+
+.go-page-input {
+  width: 60px;
+  padding: 8px 10px;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  background: #fff;
+  color: var(--ink);
+  font-size: 14px;
+  text-align: center;
+  transition: all 0.2s;
+}
+
+.go-page-input:focus {
+  outline: none;
+  border-color: #6366f1;
+  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
+}
+
+.pagination-btn--go {
+  padding: 8px 16px;
+  font-size: 14px;
+  min-width: auto;
+}
+
 .tmdb-config__status {
   padding: 14px 16px;
   border-radius: 14px;
@@ -3879,8 +4088,8 @@ body.dark-mode .app-wrapper {
 
 body.dark-mode .search-topbar,
 body.dark-mode .dashboard-topbar {
-  background: #1e293b;
-  border-bottom: 1px solid #334155;
+  background: transparent;
+  border-bottom: none;
 }
 
 body.dark-mode .search-topbar__input input {
@@ -3945,6 +4154,11 @@ body.dark-mode .tree-item__subtitle {
   color: #94a3b8;
 }
 
+/* 修复：TreeNode 组件中实际使用的标题类名 */
+body.dark-mode .tree-title {
+  color: #e2e8f0;
+}
+
 body.dark-mode .content-toolbar {
   background: transparent;
 }
@@ -4006,7 +4220,8 @@ body.dark-mode .quick-icons__fallback {
 }
 
 body.dark-mode .quick-icons__thumb img {
-  filter: brightness(0.9) contrast(1.1);
+  filter: brightness(0.85) saturate(0.6) sepia(0.15);
+  opacity: 0.9;
 }
 
 body.dark-mode .quick-access-panel .quick-icons__fallback {
@@ -4014,7 +4229,16 @@ body.dark-mode .quick-access-panel .quick-icons__fallback {
 }
 
 body.dark-mode .quick-access-panel .quick-icons__thumb img {
-  filter: brightness(0.9) contrast(1.1);
+  filter: brightness(0.85) saturate(0.6) sepia(0.15);
+  opacity: 0.9;
+}
+
+body.dark-mode .quick-icons__thumb {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+body.dark-mode .quick-access-panel .quick-icons__thumb {
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }
 
 body.dark-mode .user-menu__trigger {
@@ -4528,9 +4752,9 @@ body.dark-mode .content-actions button:hover {
 
 /* ===== 黑夜模式：仪表盘顶部栏优化 ===== */
 body.dark-mode .dashboard-topbar {
-  background: rgba(30, 41, 59, 0.6);
-  border-bottom: 1px solid rgba(51, 65, 85, 0.3);
-  backdrop-filter: blur(10px);
+  background: transparent;
+  border-bottom: none;
+  backdrop-filter: none;
 }
 
 /* ===== 黑夜模式：刮削状态面板优化 ===== */
@@ -4645,6 +4869,69 @@ body.dark-mode .no-more {
   color: #64748b;
 }
 
+/* ===== 黑夜模式：登录日志新分页控件 ===== */
+body.dark-mode .pagination-pagesize select {
+  background: rgba(15, 23, 42, 0.6);
+  color: #e2e8f0;
+  border-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .pagination-pagesize select:focus {
+  border-color: #38bdf8;
+  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
+}
+
+body.dark-mode .pagination-btn {
+  background: rgba(15, 23, 42, 0.5);
+  color: #94a3b8;
+  border-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .pagination-btn:hover:not(:disabled) {
+  background: #6366f1;
+  border-color: #6366f1;
+  color: #fff;
+}
+
+body.dark-mode .pagination-btn:disabled {
+  background: rgba(15, 23, 42, 0.3);
+  color: #475569;
+}
+
+body.dark-mode .pagination-current-page {
+  color: #e2e8f0;
+}
+
+body.dark-mode .pagination-go {
+  color: #94a3b8;
+}
+
+body.dark-mode .go-page-input {
+  background: rgba(15, 23, 42, 0.6);
+  color: #e2e8f0;
+  border-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .go-page-input:focus {
+  border-color: #38bdf8;
+  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
+}
+
+body.dark-mode .pagination-btn--go {
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  color: #fff;
+  border: none;
+}
+
+body.dark-mode .pagination-btn--go:hover:not(:disabled) {
+  background: linear-gradient(135deg, #818cf8, #a78bfa);
+}
+
+body.dark-mode .pagination-btn--go:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
 /* ===== 黑夜模式：刮削日志优化 ===== */
 body.dark-mode .scraper-log-list .log-entry {
   background: rgba(15, 23, 42, 0.5);
@@ -5398,3 +5685,649 @@ body.dark-mode .description-dialog__body::-webkit-scrollbar-thumb {
 body.dark-mode .description-dialog__body::-webkit-scrollbar-thumb:hover {
   background: #64748b;
 }
+
+/* ===== 黑夜模式：图标管理弹窗样式 ===== */
+body.dark-mode .icon-manage-dialog {
+  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+  border: 1px solid rgba(51, 65, 85, 0.5);
+  color: #e2e8f0;
+}
+
+/* 图标管理弹窗关闭按钮 */
+body.dark-mode .icon-manage-dialog header button[type="button"] {
+  background: rgba(51, 65, 85, 0.6);
+  color: #94a3b8;
+  border: 1px solid rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .icon-manage-dialog header button[type="button"]:hover {
+  background: rgba(71, 85, 105, 0.8);
+  color: #e2e8f0;
+}
+
+/* 图标网格项 */
+body.dark-mode .icon-grid-item {
+  background: rgba(15, 23, 42, 0.5);
+  border: 1px solid rgba(51, 65, 85, 0.3);
+}
+
+body.dark-mode .icon-grid-item:hover {
+  background: rgba(30, 41, 59, 0.6);
+  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.15);
+}
+
+body.dark-mode .icon-grid-thumb {
+  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
+}
+
+body.dark-mode .icon-grid-name {
+  color: #e2e8f0;
+}
+
+body.dark-mode .icon-grid-url {
+  color: #64748b;
+}
+
+/* 链接类型选项按钮 */
+body.dark-mode .link-type-option {
+  background: #0f172a;
+  border-color: rgba(51, 65, 85, 0.5);
+  color: #94a3b8;
+}
+
+body.dark-mode .link-type-option:hover {
+  border-color: #38bdf8;
+  color: #38bdf8;
+  background: rgba(56, 189, 248, 0.1);
+}
+
+body.dark-mode .link-type-option--active {
+  border-color: #38bdf8;
+  background: rgba(56, 189, 248, 0.15);
+  color: #38bdf8;
+  font-weight: 600;
+}
+
+/* 链接类型标签 */
+body.dark-mode .link-type-badge--external {
+  background: rgba(59, 130, 246, 0.2);
+  color: #60a5fa;
+}
+
+body.dark-mode .link-type-badge--internal {
+  background: rgba(251, 191, 36, 0.2);
+  color: #fbbf24;
+}
+
+body.dark-mode .link-type-badge--both {
+  background: rgba(139, 92, 246, 0.2);
+  color: #a78bfa;
+}
+
+/* 添加图标按钮 */
+body.dark-mode .icon-add-btn {
+  background: rgba(56, 189, 248, 0.05);
+  border-color: rgba(56, 189, 248, 0.3);
+  color: #38bdf8;
+}
+
+body.dark-mode .icon-add-btn:hover {
+  background: rgba(56, 189, 248, 0.12);
+  border-color: #38bdf8;
+}
+
+/* 图标表单预览 */
+body.dark-mode .icon-form-preview {
+  background: rgba(15, 23, 42, 0.5);
+  color: #94a3b8;
+}
+
+/* 图标上传区域 */
+body.dark-mode .icon-upload-placeholder {
+  border-color: rgba(51, 65, 85, 0.5);
+  background: rgba(15, 23, 42, 0.3);
+  color: #64748b;
+}
+
+body.dark-mode .icon-upload-placeholder:hover {
+  border-color: #38bdf8;
+  background: rgba(56, 189, 248, 0.08);
+  color: #38bdf8;
+}
+
+body.dark-mode .icon-upload-preview {
+  background: rgba(15, 23, 42, 0.5);
+  border-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .icon-upload-preview img {
+  background: #1e293b;
+  border-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .icon-upload-btn {
+  background: #0f172a;
+  border-color: rgba(51, 65, 85, 0.5);
+  color: #38bdf8;
+}
+
+body.dark-mode .icon-upload-btn:hover {
+  border-color: #38bdf8;
+  background: rgba(56, 189, 248, 0.1);
+}
+
+body.dark-mode .icon-upload-btn--remove {
+  color: #f87171;
+}
+
+body.dark-mode .icon-upload-btn--remove:hover {
+  border-color: #f87171;
+  background: rgba(239, 68, 68, 0.1);
+}
+
+body.dark-mode .icon-upload-tip {
+  color: #64748b;
+}
+
+/* 字段标签 */
+body.dark-mode .field-label {
+  color: #94a3b8;
+}
+
+/* 确认弹窗黑夜模式 */
+body.dark-mode .confirm-dialog {
+  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+  border: 1px solid rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .confirm-dialog header {
+  border-bottom-color: rgba(51, 65, 85, 0.5);
+  color: #e2e8f0;
+}
+
+body.dark-mode .confirm-body {
+  color: #94a3b8;
+}
+
+body.dark-mode .confirm-body strong {
+  color: #f87171;
+}
+
+body.dark-mode .confirm-dialog footer {
+  border-top-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .confirm-btn-cancel {
+  background: rgba(15, 23, 42, 0.5);
+  color: #94a3b8;
+  border-color: rgba(51, 65, 85, 0.5) !important;
+}
+
+body.dark-mode .confirm-btn-cancel:hover {
+  background: rgba(30, 41, 59, 0.6);
+}
+
+/* 加载和空状态 */
+body.dark-mode .icon-loading,
+body.dark-mode .icon-empty {
+  color: #64748b;
+}
+
+/* ===== 黑夜模式：用户管理弹窗样式 ===== */
+body.dark-mode .user-manage-dialog {
+  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+  border: 1px solid rgba(51, 65, 85, 0.5);
+  color: #e2e8f0;
+}
+
+/* 用户管理弹窗主体 */
+body.dark-mode .user-manage-body {
+  color: #cbd5e1;
+}
+
+/* 用户管理工具栏 */
+body.dark-mode .user-manage-toolbar {
+  background: transparent;
+}
+
+/* 搜索框和输入框 */
+body.dark-mode .search-input {
+  background: rgba(15, 23, 42, 0.6);
+  color: #e2e8f0;
+  border-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .search-input:focus {
+  border-color: #38bdf8;
+  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
+}
+
+body.dark-mode .search-input::placeholder {
+  color: #64748b;
+}
+
+/* 角色和状态下拉选择 */
+body.dark-mode .role-select,
+body.dark-mode .status-select,
+body.dark-mode .filter-select {
+  background: rgba(15, 23, 42, 0.6);
+  color: #e2e8f0;
+  border-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .role-select:focus,
+body.dark-mode .status-select:focus,
+body.dark-mode .filter-select:focus {
+  border-color: #38bdf8;
+  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
+}
+
+body.dark-mode .role-select option,
+body.dark-mode .status-select option,
+body.dark-mode .filter-select option {
+  background: #1e293b;
+  color: #e2e8f0;
+}
+
+/* 用户表格 */
+body.dark-mode .user-table {
+  background: transparent;
+}
+
+body.dark-mode .user-table thead {
+  background: rgba(15, 23, 42, 0.6);
+  color: #94a3b8;
+}
+
+body.dark-mode .user-table th {
+  border-bottom-color: rgba(51, 65, 85, 0.5);
+  color: #94a3b8;
+}
+
+body.dark-mode .user-table tbody tr {
+  border-bottom-color: rgba(51, 65, 85, 0.3);
+}
+
+body.dark-mode .user-table tbody tr:hover {
+  background: rgba(56, 189, 248, 0.08);
+}
+
+body.dark-mode .user-table td {
+  color: #cbd5e1;
+  border-bottom-color: rgba(51, 65, 85, 0.3);
+}
+
+/* 用户操作按钮 */
+body.dark-mode .user-action-btn {
+  background: rgba(99, 102, 241, 0.1);
+  color: #a5b4fc;
+  border-color: rgba(99, 102, 241, 0.2);
+}
+
+body.dark-mode .user-action-btn:hover {
+  background: rgba(99, 102, 241, 0.2);
+  color: #c7d2fe;
+}
+
+body.dark-mode .user-action-btn--danger {
+  background: rgba(239, 68, 68, 0.1);
+  color: #fca5a5;
+  border-color: rgba(239, 68, 68, 0.2);
+}
+
+body.dark-mode .user-action-btn--danger:hover {
+  background: rgba(239, 68, 68, 0.2);
+  color: #fecaca;
+}
+
+/* 分页控件 */
+body.dark-mode .pagination-btn {
+  background: rgba(15, 23, 42, 0.5);
+  color: #94a3b8;
+  border-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .pagination-btn:hover:not(:disabled) {
+  background: rgba(56, 189, 248, 0.1);
+  border-color: #38bdf8;
+  color: #38bdf8;
+}
+
+body.dark-mode .pagination-btn--active {
+  background: rgba(56, 189, 248, 0.15);
+  border-color: #38bdf8;
+  color: #38bdf8;
+}
+
+body.dark-mode .pagination-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+body.dark-mode .pagination-info {
+  color: #64748b;
+}
+
+/* 新增用户表单对话框 */
+body.dark-mode .user-form-dialog {
+  background: rgba(15, 23, 42, 0.95);
+  border: 1px solid rgba(51, 65, 85, 0.5);
+  color: #e2e8f0;
+}
+
+body.dark-mode .user-form-dialog__header {
+  border-bottom-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .user-form-dialog__header h3 {
+  color: #e2e8f0;
+}
+
+body.dark-mode .user-form-dialog__close {
+  background: rgba(51, 65, 85, 0.5);
+  color: #94a3b8;
+}
+
+body.dark-mode .user-form-dialog__close:hover {
+  background: rgba(71, 85, 105, 0.7);
+  color: #e2e8f0;
+}
+
+body.dark-mode .user-form-dialog__body {
+  color: #cbd5e1;
+}
+
+body.dark-mode .form-group label {
+  color: #94a3b8;
+}
+
+body.dark-mode .form-input {
+  background: rgba(15, 23, 42, 0.6);
+  color: #e2e8f0;
+  border-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .form-input:focus {
+  border-color: #38bdf8;
+  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
+}
+
+body.dark-mode .form-input::placeholder {
+  color: #64748b;
+}
+
+body.dark-mode .form-error {
+  color: #f87171;
+}
+
+body.dark-mode .form-dialog-footer {
+  border-top-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .form-btn-cancel {
+  background: rgba(15, 23, 42, 0.5);
+  color: #94a3b8;
+  border-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .form-btn-cancel:hover {
+  background: rgba(30, 41, 59, 0.6);
+}
+
+body.dark-mode .form-btn-submit {
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  color: #fff;
+}
+
+body.dark-mode .form-btn-submit:hover:not(:disabled) {
+  background: linear-gradient(135deg, #818cf8, #a78bfa);
+}
+
+body.dark-mode .form-btn-submit:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* 用户管理加载和空状态 */
+body.dark-mode .user-loading,
+body.dark-mode .user-empty {
+  color: #64748b;
+}
+
+/* ===== 黑夜模式：网盘管理弹窗样式 ===== */
+body.dark-mode .drive-manage-dialog {
+  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+  border: 1px solid rgba(51, 65, 85, 0.5);
+  color: #e2e8f0;
+}
+
+/* 网盘管理弹窗主体 */
+body.dark-mode .drive-manage-body {
+  color: #cbd5e1;
+}
+
+/* 网盘列表 */
+body.dark-mode .drive-list {
+  background: transparent;
+}
+
+body.dark-mode .drive-list-item {
+  background: rgba(15, 23, 42, 0.4);
+  border-color: rgba(51, 65, 85, 0.4);
+}
+
+body.dark-mode .drive-list-item:hover {
+  background: rgba(30, 41, 59, 0.6);
+}
+
+body.dark-mode .drive-list-item__name {
+  color: #e2e8f0;
+}
+
+body.dark-mode .drive-list-item__host {
+  color: #64748b;
+}
+
+body.dark-mode .drive-list-item__time {
+  color: #64748b;
+}
+
+body.dark-mode .drive-list-item__actions button {
+  background: rgba(99, 102, 241, 0.1);
+  color: #a5b4fc;
+  border-color: rgba(99, 102, 241, 0.2);
+}
+
+body.dark-mode .drive-list-item__actions button:hover {
+  background: rgba(99, 102, 241, 0.2);
+}
+
+body.dark-mode .drive-list-item__actions button--delete {
+  background: rgba(239, 68, 68, 0.1);
+  color: #fca5a5;
+  border-color: rgba(239, 68, 68, 0.2);
+}
+
+body.dark-mode .drive-list-item__actions button--delete:hover {
+  background: rgba(239, 68, 68, 0.2);
+}
+
+/* 网盘表单 */
+body.dark-mode .drive-form-group label {
+  color: #94a3b8;
+}
+
+body.dark-mode .drive-form-input {
+  background: rgba(15, 23, 42, 0.6);
+  color: #e2e8f0;
+  border-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .drive-form-input:focus {
+  border-color: #38bdf8;
+  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
+}
+
+body.dark-mode .drive-form-input::placeholder {
+  color: #64748b;
+}
+
+body.dark-mode .drive-form-textarea {
+  background: rgba(15, 23, 42, 0.6);
+  color: #e2e8f0;
+  border-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .drive-form-textarea:focus {
+  border-color: #38bdf8;
+  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
+}
+
+body.dark-mode .drive-form-textarea::placeholder {
+  color: #64748b;
+}
+
+body.dark-mode .drive-form-error {
+  color: #f87171;
+}
+
+body.dark-mode .char-count {
+  color: #64748b;
+}
+
+/* Logo上传提示 */
+body.dark-mode .logo-upload-tips {
+  background: rgba(56, 189, 248, 0.1);
+  border-color: rgba(56, 189, 248, 0.3);
+  color: #7dd3fc;
+}
+
+body.dark-mode .logo-upload-tips .tips-icon {
+  color: #38bdf8;
+}
+
+body.dark-mode .logo-upload-tips strong {
+  color: #bae6fd;
+}
+
+/* 表单底部按钮 */
+body.dark-mode .btn-primary {
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  color: #fff;
+}
+
+body.dark-mode .btn-primary:hover:not(:disabled) {
+  background: linear-gradient(135deg, #818cf8, #a78bfa);
+}
+
+body.dark-mode .btn-submit {
+  background: linear-gradient(135deg, #6366f1, #8b5cf6);
+  color: #fff;
+}
+
+body.dark-mode .btn-cancel {
+  background: rgba(15, 23, 42, 0.5);
+  color: #94a3b8;
+  border-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .btn-cancel:hover:not(:disabled) {
+  color: #38bdf8;
+  border-color: rgba(56, 189, 248, 0.5);
+  background: rgba(56, 189, 248, 0.1);
+}
+
+/* 加载和空状态 */
+body.dark-mode .loading-hint,
+body.dark-mode .empty-hint {
+  color: #64748b;
+}
+
+body.dark-mode .spinner-small {
+  border-color: rgba(51, 65, 85, 0.5);
+  border-top-color: #38bdf8;
+}
+
+/* 全局加载遮罩 */
+body.dark-mode .global-loading-overlay {
+  background: rgba(15, 23, 42, 0.85);
+}
+
+body.dark-mode .spinner {
+  border-color: rgba(51, 65, 85, 0.5);
+  border-top-color: #38bdf8;
+}
+
+body.dark-mode .loading-text {
+  color: #94a3b8;
+}
+
+/* 删除确认弹窗 */
+body.dark-mode .confirm-overlay {
+  border-radius: 14px;
+}
+
+body.dark-mode .confirm-overlay::backdrop {
+  background: rgba(0, 0, 0, 0.6);
+}
+
+body.dark-mode .confirm-dialog {
+  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+  border: 1px solid rgba(51, 65, 85, 0.5);
+  color: #e2e8f0;
+}
+
+body.dark-mode .confirm-dialog header {
+  color: #e2e8f0;
+  border-bottom-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .confirm-body {
+  color: #94a3b8;
+}
+
+body.dark-mode .confirm-body strong {
+  color: #f87171;
+}
+
+body.dark-mode .confirm-hint {
+  background: rgba(239, 68, 68, 0.1);
+  color: #fca5a5;
+  border-color: #f56c6c;
+}
+
+body.dark-mode .confirm-dialog footer {
+  border-top-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .confirm-dialog footer button:first-child {
+  background: rgba(15, 23, 42, 0.5);
+  color: #94a3b8;
+  border-color: rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .confirm-dialog footer button:first-child:hover {
+  background: rgba(30, 41, 59, 0.6);
+  border-color: rgba(71, 85, 105, 0.7);
+}
+
+body.dark-mode .btn-danger {
+  background: linear-gradient(135deg, #ef4444, #dc2626) !important;
+  color: #fff !important;
+}
+
+body.dark-mode .btn-danger:hover {
+  box-shadow: 0 6px 18px rgba(239, 68, 68, 0.4);
+}
+
+/* ===== 黑夜模式：SimpleDialog 关闭按钮（×） ===== */
+body.dark-mode .dialog-form header button[type="button"] {
+  background: rgba(51, 65, 85, 0.6);
+  color: #94a3b8;
+  border: 1px solid rgba(51, 65, 85, 0.5);
+}
+
+body.dark-mode .dialog-form header button[type="button"]:hover {
+  background: rgba(71, 85, 105, 0.8);
+  color: #e2e8f0;
+}