From fa2d4d7cbfc3e77d4920677c010098a9bfab0847 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 11 Aug 2026 11:23:51 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E9=87=8D=E5=81=9A=E6=B7=B1=E8=89=B2?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E4=B8=BA=E4=B8=93=E4=B8=9A=E5=8D=8F=E8=B0=83?=
 =?UTF-8?q?=E9=85=8D=E8=89=B2,=20=E5=85=A8=E9=9D=A2=E8=A6=86=E7=9B=96?=
 =?UTF-8?q?=E5=89=8D=E5=90=8E=E5=8F=B0=E5=85=A8=E9=83=A8=E5=85=83=E7=B4=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 统一配色规范: 背景#0f1115, 面板#15181e/#12151b, 边框#232733,
  文字层级 #e6e6e6/#c9ced8/#9aa0aa/#6b7280, 强调蓝#6aa1f7
- 前台: 补全 header/搜索框/侧栏/树/筛选/列表/标签/目录/正文/代码块/空状态
- 后台: 补全 header/侧栏/树/编辑器/预览区/输入框/按钮/弹窗/面板分割线
- 修复之前浅色混搭、active色块突兀、输入框白底等视觉问题
- 后台页面为服务端模板, 变更后需重启加载; 前台c.File动态生效
---
 web/admin/index.html | 81 ++++++++++++++++++++++++++++++-------
 web/index.html       | 96 ++++++++++++++++++++++++++++++++++++++------
 2 files changed, 150 insertions(+), 27 deletions(-)

diff --git a/web/admin/index.html b/web/admin/index.html
index 5b317f0..ee2ba39 100644
--- a/web/admin/index.html
+++ b/web/admin/index.html
@@ -318,22 +318,73 @@
         }
         .resize-handle:hover { background: #1a73e8; }
 
-        /* ───── 深色模式覆盖 ───── */
-        body.dark { background: #1a1d21; color: #e0e0e0; }
-        body.dark header { background: #20242a; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
-        body.dark .sidebar { background: #23272e; border-color: #333; }
-        body.dark .content { background: #1a1d21; }
-        body.dark .tree-item:hover { background: #2d323a; }
-        body.dark .tree-item.active { background: #355; color:#7ab8ff; }
-        body.dark .editor-pane, body.dark .preview-pane { background: #1e2228; border-color:#333; }
-        body.dark input, body.dark textarea, body.dark select {
-            background: #24282f; color: #e0e0e0; border-color: #3a3f47;
+        /* ───── 深色模式（专业协调配色）───── */
+        body.dark {
+            background: #0f1115;
+            color: #e6e6e6;
         }
-        body.dark .modal-content { background: #24282f; color:#e0e0e0; }
-        body.dark .preview-content code, body.dark .preview-content pre { background:#111; }
-        body.dark .empty-state { color:#888; }
-        body.dark .btn-secondary { background:#2d323a; color:#ccc; border-color:#3a3f47; }
-        body.dark .tree-item .folder { color:#7ab8ff; }
+        body.dark header {
+            background: #15181e;
+            box-shadow: 0 2px 8px rgba(0,0,0,0.5);
+            border-bottom: 1px solid #232733;
+        }
+        body.dark header h1 { color: #e6e6e6; }
+
+        body.dark .btn-secondary { background: #20242e; color: #c9ced8; border: 1px solid #2e3440; }
+        body.dark .btn-secondary:hover { background: #2a3040; color: #e6e6e6; }
+        body.dark .btn-icon { color: #9aa0aa; }
+        body.dark .btn-icon:hover { background: #20242e; color: #e6e6e6; }
+
+        body.dark .main { background: #0f1115; }
+        body.dark .sidebar {
+            background: #15181e;
+            border-right: 1px solid #232733;
+        }
+        body.dark .sidebar-header { border-bottom: 1px solid #232733; }
+        body.dark .sidebar-header h2 { color: #9aa0aa; }
+
+        body.dark .tree-item { color: #c9ced8; }
+        body.dark .tree-item:hover { background: #1e232d; }
+        body.dark .tree-item.active { background: #1b2a44; color: #7aa2f7; }
+        body.dark .tree-item .actions button {
+            background: #1e232d; border-color: #2e3440; color: #9aa0aa;
+        }
+        body.dark .tree-item .actions button:hover { background: #2a3040; color: #e6e6e6; }
+
+        body.dark .content { background: #0f1115; }
+        body.dark .editor-pane {
+            background: #12151b;
+            border-right: 1px solid #232733;
+        }
+        body.dark .editor-header, body.dark .editor-meta {
+            border-bottom: 1px solid #232733;
+        }
+        body.dark input, body.dark textarea, body.dark select {
+            background: #1a1e26; color: #e6e6e6; border-color: #2e3440;
+        }
+        body.dark input::placeholder, body.dark textarea::placeholder { color: #6b7280; }
+        body.dark input:focus, body.dark textarea:focus { border-color: #6aa1f7; }
+        body.dark .editor-content textarea { background: #12151b; color: #e6e6e6; }
+        body.dark .editor-meta label { color: #9aa0aa; }
+
+        body.dark .preview-pane { background: #12151b; }
+        body.dark .preview-header { border-bottom: 1px solid #232733; color: #9aa0aa; }
+        body.dark .preview-content h1, body.dark .preview-content h2, body.dark .preview-content h3 { color: #f0f2f5; }
+        body.dark .preview-content p { color: #c9ced8; }
+        body.dark .preview-content code { background: #1e232d; color: #e0a46a; }
+        body.dark .preview-content pre { background: #0b0d12; border: 1px solid #232733; }
+        body.dark .preview-content pre code { background: none; color: #d4d7de; }
+        body.dark .preview-content blockquote { border-left-color: #6aa1f7; color: #9aa0aa; }
+
+        body.dark .empty-state { color: #9aa0aa; }
+        body.dark .empty-state svg { fill: #2a2f3a; }
+        body.dark .empty-state h3 { color: #c9ced8; }
+
+        body.dark .modal-content { background: #1a1e26; color: #e6e6e6; }
+        body.dark .modal-content h3 { color: #f0f2f5; }
+
+        /* 回收站/版本/分享面板内分割线 */
+        body.dark #trashList div[style*="border-bottom"], body.dark #versionsList div[style*="border-bottom"] { border-bottom-color: #2e3440 !important; }
     </style>
 </head>
 <body>
diff --git a/web/index.html b/web/index.html
index 9a3367e..d5bef47 100644
--- a/web/index.html
+++ b/web/index.html
@@ -28,18 +28,90 @@
         .task-checkbox { margin-right: 6px; vertical-align: middle; width: 15px; height: 15px; }
         .task-done { text-decoration: line-through; color: #888; }
         .mermaid { text-align: center; margin: 16px 0; overflow-x: auto; }
-        /* ───── 深色模式覆盖 ───── */
-        body.dark { background: #1a1d21; color: #e0e0e0; }
-        body.dark header { background: #20242a; box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
-        body.dark .sidebar { background: #23272e; border-color: #333; }
-        body.dark .main { background: #1a1d21; }
-        body.dark .search-box { background: #2d323a; }
-        body.dark .search-box input { color: #e0e0e0; }
-        body.dark .note-detail { background: #1e2228; }
-        body.dark .note-content pre, body.dark .note-content code { background: #111; }
-        body.dark .tree-item:hover { background: #2d323a; }
-        body.dark .toc-sidebar { border-color: #333; }
-        body.dark a { color: #7ab8ff; }
+        /* ───── 深色模式（专业协调配色）───── */
+        body.dark {
+            background: #0f1115;
+            color: #e6e6e6;
+        }
+        body.dark header {
+            background: #15181e;
+            box-shadow: 0 1px 4px rgba(0,0,0,0.5);
+            border-bottom: 1px solid #232733;
+        }
+        body.dark header h1 { color: #6aa1f7; }
+        body.dark .search-box { background: #20242e; }
+        body.dark .search-box svg { fill: #8b93a3; }
+        body.dark .search-box input { color: #e6e6e6; }
+        body.dark .search-box input::placeholder { color: #6b7280; }
+
+        body.dark .main { background: #0f1115; }
+        body.dark .sidebar {
+            background: #15181e;
+            border-right: 1px solid #232733;
+        }
+        body.dark .sidebar-header { border-bottom: 1px solid #232733; }
+        body.dark .sidebar-header h3 { color: #c9ced8; }
+        body.dark .sidebar-section h4 { color: #6b7280; }
+
+        body.dark .tree-node:hover { background: #1e232d; }
+        body.dark .tree-node.active { background: #1b2a44; color: #7aa2f7; }
+        body.dark .tree-toggle svg { fill: #6b7280; }
+        body.dark .tree-label { color: #c9ced8; }
+        body.dark .tree-icon.folder svg { fill: #d9963d; }
+        body.dark .tree-icon.note svg { fill: #4a9cf5; }
+
+        body.dark .filter-area {
+            background: #15181e;
+            border-top: 1px solid #232733;
+        }
+        body.dark .filter-item { color: #9aa0aa; }
+        body.dark .filter-item svg { fill: #9aa0aa; }
+        body.dark .filter-item:hover { background: #1e232d; }
+        body.dark .filter-item.active { background: #1b2a44; color: #7aa2f7; }
+        body.dark .filter-item.active svg { fill: #7aa2f7; }
+
+        body.dark .note-list { border-top: 1px solid #232733; }
+        body.dark .note-item:hover { background: #1e232d; }
+        body.dark .note-item.active { background: #1b2a44; }
+        body.dark .note-item h4 { color: #e6e6e6; }
+        body.dark .note-item .preview { color: #9aa0aa; }
+        body.dark .note-item .meta { color: #6b7280; }
+        body.dark .note-item .tag { background: #1e3a5f; color: #7aa2f7; }
+
+        body.dark .content { background: #0f1115; }
+        body.dark .toc-sidebar {
+            background: #101318;
+            border-right: 1px solid #232733;
+        }
+        body.dark .toc-title { color: #6b7280; }
+        body.dark .toc-link { color: #9aa0aa; }
+        body.dark .toc-link:hover { background: #1e232d; color: #e6e6e6; }
+        body.dark .toc-link.active { background: #1b2a44; color: #7aa2f7; border-left-color: #7aa2f7; }
+        body.dark .toc-link.level-3 { color: #6b7280; }
+
+        body.dark .note-detail h1 { color: #f0f2f5; }
+        body.dark .note-detail .meta {
+            color: #9aa0aa;
+            border-bottom: 1px solid #232733;
+        }
+        body.dark .note-detail .tag { background: #1e3a5f; color: #7aa2f7; }
+
+        body.dark .note-content { color: #c9ced8; }
+        body.dark .note-content h1, body.dark .note-content h2, body.dark .note-content h3 { color: #f0f2f5; }
+        body.dark .note-content code { background: #1e232d; color: #e0a46a; }
+        body.dark .note-content pre { background: #0b0d12; border: 1px solid #232733; }
+        body.dark .note-content pre code { background: none; color: #d4d7de; }
+        body.dark .note-content blockquote { border-left-color: #6aa1f7; color: #9aa0aa; }
+        body.dark .note-content a { color: #7aa2f7; }
+
+        body.dark .empty-state { color: #9aa0aa; }
+        body.dark .empty-state svg { fill: #2a2f3a; }
+        body.dark .empty-state h2 { color: #c9ced8; }
+
+        body.dark footer { color: #6b7280; }
+        body.dark footer a { color: #7aa2f7; }
+
+        body.dark .task-done { color: #6b7280; }
         header {
             background: #fff;
             padding: 16px 24px;