chore: bump version 2.2.0

- routes/notes.js CRUD + 文件名安全校验 + 实体 .txt 存储 workspace/
- NoteEditor 浮窗(可拖拽)↔固定(280px)切换，📌 工具栏入口
- 编辑器 900ms 防抖自动保存 + Ctrl+S + dirty 指示
- 文件管理器：新建/重命名/删除/空态/错误态
- server 挂载 /api/notes，gitignore workspace/

.gitignore

@@ -7,3 +7,5 @@ uploads/*
 server.pid
 releases/
 public/dist/
+backups/
+workspace/

AGENTS.md

@@ -28,7 +28,6 @@ node cli.js <cmd>    # status | start | stop | restart | port [N] | password [pw
 
 - 集中挂载所有 `/api/*`（auth、admin-links、announcements、forum、blog、passwords、settings、email、profile、captcha、upload、setup、proxy、import）。**新路由必须在此挂载**——后面有 SPA catch-all：非 `/api/` 一律回 dist/index.html。
 - **挂载顺序关键**：`serveIndex('/')` → `/assets`（dist/assets，immutable）→ static(public) → `/uploads` → `/api/*` → `/admin*`（dist/admin.html）→ SSR 区（/blog/:id 等）→ catch-all。新路由注意别被 catch-all 吞掉。
-- `routes/links.js` 未被挂载，是死代码（勿依赖）。
 - `middleware/auth.js`：Bearer JWT；`SECRET` = `process.env.JWT_SECRET`（**无硬编码回退**——server.js 启动时若 `.env.json` 无 `jwt_secret` 则随机生成写入并设置环境变量）；`adminOnly` 会查库复查角色（用户被删/降权立即失效）。
 - `routes/setup.js`：`/complete` 用 `setup_complete` 门禁（'1' 后 403），新密码禁止等于默认 `admin123`。
 - `routes/proxy.js`：面板嵌入代理——支持 `Authorization` header 或 `?token=` query（iframe 无法带 header）；有内网地址拦截（SSRF）。

VERSION

@@ -1 +1 @@
-2.0.0
+2.2.0

cli.js

@@ -23,6 +23,7 @@ Commands:
   password [new-pass]      Change admin password (leave empty for prompt)
   captcha                  Interactive captcha rule configuration
   config                   Show all current settings
+  backup                   Backup database to backups/ (readonly, safe to run while running)
   upgrade                  Git pull + npm install + restart (one-click upgrade)
   help                     Show this help
 
@@ -31,6 +32,7 @@ Examples:
   node cli.js port 8080
   node cli.js password MyNewP@ss123
   node cli.js captcha
+  node cli.js backup
   node cli.js upgrade
 `;
 
@@ -46,6 +48,7 @@ async function main() {
     case 'password': return cmdPassword();
     case 'captcha': return cmdCaptcha();
     case 'config': return cmdConfig();
+    case 'backup': return cmdBackup();
     case 'upgrade': return cmdUpgrade();
     case 'help':
     default:
@@ -60,6 +63,10 @@ async function cmdStatus() {
   console.log(`Platform: ${process.platform}`);
   console.log(`Data DB: ${fs.existsSync(path.join(__dirname, 'data', 'rainweb.db')) ? fs.statSync(path.join(__dirname, 'data', 'rainweb.db')).size + ' bytes' : 'NOT FOUND'}`);
 
+  // 最近一次备份时间
+  const latestBackup = getLatestBackup();
+  console.log('Last backup: ' + (latestBackup ? formatMtime(latestBackup.mtime) + ' (' + latestBackup.file + ')' : '从未备份'));
+
   // Check if server is running
   try {
     await httpGet('http://localhost:' + (getConfigPort()));
@@ -223,6 +230,55 @@ async function cmdRestart() {
   await cmdStart();
 }
 
+// === Backup ===
+async function cmdBackup() {
+  const srcPath = path.join(__dirname, 'data', 'rainweb.db');
+  if (!fs.existsSync(srcPath)) {
+    console.error('数据库不存在：' + srcPath + '（首次启动 server 后才会创建）');
+    process.exit(1);
+  }
+
+  const backupDir = path.join(__dirname, 'backups');
+  fs.mkdirSync(backupDir, { recursive: true });
+
+  const now = new Date();
+  const destPath = path.join(backupDir,
+    `rainweb-${now.getFullYear()}${pad2(now.getMonth() + 1)}${pad2(now.getDate())}-${pad2(now.getHours())}${pad2(now.getMinutes())}${pad2(now.getSeconds())}.db`);
+
+  // 只读打开源库，不写数据，安全（server 运行中也可执行）
+  // better-sqlite3 v13：src.backup(destPath) 接受目标文件路径（string），返回 Promise
+  const Database = require('better-sqlite3');
+  const src = new Database(srcPath, { readonly: true });
+  try {
+    await src.backup(destPath);
+  } finally {
+    src.close();
+  }
+
+  const size = fs.statSync(destPath).size;
+  console.log(`备份成功：${destPath}（${size} bytes）`);
+}
+
+// 读取 backups/ 目录下最新的备份文件（按 mtime），无备份返回 null
+function getLatestBackup() {
+  const backupDir = path.join(__dirname, 'backups');
+  if (!fs.existsSync(backupDir)) return null;
+  let latest = null;
+  for (const f of fs.readdirSync(backupDir)) {
+    if (!f.startsWith('rainweb-') || !f.endsWith('.db')) continue;
+    const filePath = path.join(backupDir, f);
+    const mtime = fs.statSync(filePath).mtime;
+    if (!latest || mtime > latest.mtime) latest = { file: f, mtime };
+  }
+  return latest;
+}
+
+function pad2(n) { return String(n).padStart(2, '0'); }
+
+function formatMtime(date) {
+  return `${date.getFullYear()}-${pad2(date.getMonth() + 1)}-${pad2(date.getDate())} ${pad2(date.getHours())}:${pad2(date.getMinutes())}`;
+}
+
 // === Upgrade ===
 async function cmdUpgrade() {
   console.log('=== RainWeb Upgrade ===\n');

db.js

@@ -72,7 +72,9 @@ function initTables() {
   db.exec(`CREATE TABLE IF NOT EXISTS blog_comments (
     id INTEGER PRIMARY KEY AUTOINCREMENT, post_id INTEGER NOT NULL,
     content TEXT NOT NULL, author_id INTEGER,
-    author_name TEXT DEFAULT '', created_at DATETIME DEFAULT (datetime('now')),
+    author_name TEXT DEFAULT '', parent_id INTEGER DEFAULT 0,
+    status TEXT DEFAULT 'approved',
+    created_at DATETIME DEFAULT (datetime('now')),
     FOREIGN KEY (post_id) REFERENCES blog_posts(id))`);
 
   db.exec(`CREATE TABLE IF NOT EXISTS forum_replies (
@@ -86,10 +88,16 @@ function initTables() {
     id INTEGER PRIMARY KEY AUTOINCREMENT, title TEXT NOT NULL,
     content TEXT NOT NULL, excerpt TEXT DEFAULT '', author_id INTEGER NOT NULL,
     published INTEGER DEFAULT 1, use_markdown INTEGER DEFAULT 1,
+    tags TEXT DEFAULT '', views INTEGER DEFAULT 0,
     created_at DATETIME DEFAULT (datetime('now')),
     updated_at DATETIME DEFAULT (datetime('now')),
     FOREIGN KEY (author_id) REFERENCES users(id))`);
 
+  db.exec(`CREATE TABLE IF NOT EXISTS post_likes (
+    post_id INTEGER NOT NULL, user_id INTEGER NOT NULL,
+    created_at DATETIME DEFAULT (datetime('now')),
+    PRIMARY KEY (post_id, user_id))`);
+
   db.exec(`CREATE TABLE IF NOT EXISTS user_settings (
     id INTEGER PRIMARY KEY AUTOINCREMENT, user_id INTEGER UNIQUE NOT NULL,
     pin_hash TEXT DEFAULT '', kdf_salt TEXT DEFAULT '',
@@ -114,8 +122,23 @@ function initTables() {
   db.exec(`CREATE TABLE IF NOT EXISTS site_settings (
     key TEXT PRIMARY KEY, value TEXT DEFAULT '')`);
 
+  // 审计日志表（终端会话/密码失败等安全事件落库）
+  db.exec(`CREATE TABLE IF NOT EXISTS audit_logs (
+    id INTEGER PRIMARY KEY AUTOINCREMENT,
+    action TEXT NOT NULL,
+    user_id INTEGER DEFAULT 0,
+    username TEXT DEFAULT '',
+    detail TEXT DEFAULT '',
+    ip TEXT DEFAULT '',
+    created_at DATETIME DEFAULT (datetime('now')))`);
+  db.exec('CREATE INDEX IF NOT EXISTS idx_audit_logs_created ON audit_logs(created_at)');
+  // 审计保留策略：启动时惰性清理 90 天前的记录，防止无限增长
+  //（写入路径上 terminal.js 每 50 条也会触发一次同规则清理）
+  db.exec("DELETE FROM audit_logs WHERE created_at < datetime('now','-90 day')");
+
   // Indexes for performance
   db.exec('CREATE INDEX IF NOT EXISTS idx_blog_published ON blog_posts(published)');
+  db.exec('CREATE INDEX IF NOT EXISTS idx_blog_comments_post ON blog_comments(post_id)');
   db.exec('CREATE INDEX IF NOT EXISTS idx_forum_posts_category ON forum_posts(category_id)');
   db.exec('CREATE INDEX IF NOT EXISTS idx_forum_replies_post ON forum_replies(post_id)');
   db.exec('CREATE INDEX IF NOT EXISTS idx_password_user ON password_entries(user_id)');
@@ -137,6 +160,14 @@ function migrateSchema() {
     // v1: 密码管理器 user_settings 增加 pin_iter 列（对应 routes/passwords.js 的 ensureSchema 逻辑，
     // 默认 100000：存量用户保持旧迭代数，旧密文仍可解密）
     { version: 1, up: () => { try { db.exec("ALTER TABLE user_settings ADD COLUMN pin_iter INTEGER DEFAULT 100000"); } catch {} } },
+    // v2: 博客增强——博文标签/阅读量、评论嵌套与审核、点赞表
+    { version: 2, up: () => {
+      try { db.exec("ALTER TABLE blog_posts ADD COLUMN tags TEXT DEFAULT ''"); } catch {}
+      try { db.exec("ALTER TABLE blog_posts ADD COLUMN views INTEGER DEFAULT 0"); } catch {}
+      try { db.exec("ALTER TABLE blog_comments ADD COLUMN parent_id INTEGER DEFAULT 0"); } catch {}
+      try { db.exec("ALTER TABLE blog_comments ADD COLUMN status TEXT DEFAULT 'approved'"); } catch {}
+      try { db.exec("CREATE TABLE IF NOT EXISTS post_likes (post_id INTEGER NOT NULL, user_id INTEGER NOT NULL, created_at DATETIME DEFAULT (datetime('now')), PRIMARY KEY (post_id, user_id))"); } catch {}
+    } },
   ];
   for (const m of migrations) {
     if (current < m.version) { m.up(); db.exec('PRAGMA user_version = ' + m.version); }
@@ -169,6 +200,7 @@ function seedDefaults() {
     smtp_from_name: 'RainWeb',
     theme_wallpaper: '',
     theme_wallpaper_scale: 'cover',
+    theme_wallpaper_enabled: '1',
     nav_style: 'default',
     card_style: 'default',
     glass_blur: '20',
@@ -183,6 +215,12 @@ function seedDefaults() {
     music_embed_position: 'right',
     music_embed_autohide: '0',
     music_embed_idle_timeout: '10',
+    footer_style: 'classic',
+    footer_copyright: '<span class="copyright-glow">© 2026 <b>Rainnya Blog</b> All rights reserved</span>',
+    footer_powered: '<span class="powered-glow">由 <a href="https://git.rainnya.asia/miaomiao/rainblogweb" target="_blank" rel="noopener" style="color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,0.55);text-underline-offset:3px;">RainWeb Engine</a> 强力驱动</span>',
+    footer_desc: '',
+    comment_moderate: '0',
+    comment_notify: '0',
   };
   for (const [k, v] of Object.entries(defaults)) {
     if (!get('SELECT value FROM site_settings WHERE key = ?', [k])) {

docs/workbench-plan.md

@@ -0,0 +1,83 @@
+# 工作台模块项目计划（tools/workbench）
+
+> 独立完整项目流程：调研 ✓ → 设计规范 ✓ → 本计划 → 实现 → 审查 → 验证。
+> 布局调研：lib-1（VSCode 四层 / Dashy Workspace / Vivaldi Web Panels / Arc pinned / Homepage groups + iframe 技术建议）。
+> 设计规范：frontend-pack/design skill（8px 网格、语义色 token、层次/留白/焦点环/深浅色/加载空错误态）。
+
+## 1. 模块定位
+
+「面板工作台」：浏览器式多面板聚合界面（左侧侧边栏 + 顶部工具栏 + 右侧 iframe 内容区），叠加密码库快捷取用。仅管理员（adminOnly）可进入。
+
+## 2. 技术方案
+
+| 项 | 决定 |
+|---|---|
+| 风格 | **MUI**（与后台一致，MD3 主题复用 frontend/src/admin/theme.js） |
+| 路由 | 独立页面 `/workbench`（React Router，挂管理后台路由树外或独立 BrowserRouter 区——用后台同一入口 admin 应用内加路由最简，basename /admin 下 `/admin/workbench`？——**决定：独立入口**（admin.html 已有），路由挂 `/admin/workbench`，与 Dashboard 等并列，顶栏入口按钮跳转；整页全屏布局不带 AdminLayout 侧栏（工作台自带侧边栏） |
+| 代码位置 | `frontend/src/tools/workbench/`（独立工具区，页面+组件+密码库组件+工具函数全在这，方便后续升级） |
+| 鉴权 | 入口守卫：无 token → 跳 /login.html；非 admin → 403 提示返回（复用后台守卫模式） |
+| 数据 | admin_links API（复用 frontend/src/api/adminLinks.js）+ passwords API（复用） |
+| proxy | `/api/proxy/fetch?url=&token=`（iframe query token，复用 Embed.jsx 的 needsProxy 逻辑） |
+
+## 3. 文件结构
+
+```
+frontend/src/tools/workbench/
+├── Workbench.jsx            # 页面入口（路由挂载点 + 鉴权守卫 + 布局组装）
+├── components/
+│   ├── Toolbar.jsx          # 顶部工具栏（◀▶↻ 地址栏 搜索 添加 密码库 侧栏开关 返回）
+│   ├── Sidebar.jsx          # 左侧边栏（固定区 + 分组列表 + 折叠 + 拖拽调宽可选）
+│   ├── PanelFrame.jsx       # iframe 内容区（加载态/超时/失败回退/LRU 保留）
+│   ├── AddPanelDialog.jsx   # 添加面板弹窗（URL/命名/分组/图标 + 打开方式）
+│   └── VaultDrawer.jsx      # 密码库抽屉（PIN 解锁/搜索/复制，MUI）
+├── hooks/
+│   ├── usePanels.js         # 面板数据/打开集合/历史栈/持久化(localStorage)
+│   └── useVault.js          # 密码库解锁状态/条目加载（复用 passwords API）
+└── index.js                 # 模块导出（便于未来升级替换）
+```
+
+## 4. 功能清单
+
+### 核心（必须）
+- [ ] 鉴权守卫（adminOnly）
+- [ ] 工具栏：◀ 后退 / ▶ 前进（当前面板历史栈）、↻ 刷新、只读地址栏、🔍 搜索（面板名/URL/分组）、＋添加、🔑 密码库、侧边栏折叠、返回前台
+- [ ] 侧边栏：admin_links 按 category 分组 + 固定区（pin），点击切换，当前项左侧 2px primary 指示条 + surface-container 底（MUI 化：ListItemButton selected 态）
+- [ ] iframe 区：懒加载（首次激活创建）、display:none 切换保留状态、**超时+load 双保险加载态**、失败（超时/空白启发式）显示「在新标签打开」回退按钮
+- [ ] 打开方式：内嵌（默认）/ 新标签（target=_blank）/ 弹窗（modal）——面板项右键或添加时选择，存面板设置
+- [ ] 添加面板弹窗：URL + 标题 + 分组 + 图标（favicon 预览）+ 打开方式；保存到 admin_links（复用现有 API）
+- [ ] localStorage 持久化：打开面板集合、当前面板、历史栈、侧边栏折叠态
+- [ ] 密码库抽屉：PIN 解锁（复用 /api/passwords/unlock，服务端会话互通）→ 条目列表（标题/用户名）+ 搜索 + 详情（密码明文）+ 一键复制（clipboard）；未设 PIN 引导去 /passwords.html；只读取用不编辑
+- [ ] 空态/加载态/错误态：无面板引导添加、加载骨架、加载失败重试
+
+### 进阶（尽力）
+- [ ] LRU iframe 保留（最多 3 个活跃，超出销毁最久未用，记录 URL 重建）
+- [ ] 每面板定时刷新（可选 30s/5min/30min）
+- [ ] 侧边栏拖拽调宽 + 记忆
+- [ ] 分组折叠状态持久化
+
+## 5. 设计规范（design skill + 调研要点）
+
+- 8px 网格间距；一屏内不超过 2 种圆角（MUI 默认 8px/20px pill）
+- 语义色 token（MD3）：工具栏/侧边栏 surface-container、选中 primary-container、hover surface-variant
+- 选中态：左侧 2px primary 指示条（VSCode 模式）或 MUI selected 态，二选一统一
+- 深色模式默认适配（后台已有 data-theme 机制）
+- 焦点环（focus-visible）、语义 HTML（nav/main/aside/button）、触控目标 ≥40px
+- 加载态用骨架/居中 spinner；空态带图标+CTA；错误态带重试
+- iframe title 属性必须；allow 权限策略按面板
+- 工具栏高度 48-56px、侧边栏默认 240px（可 180-360 拖拽）
+
+## 6. 实施与质量流程
+
+1. 派 designer 按本计划实现（一个会话，MUI + 复用后台主题/api）
+2. ora 审查（鉴权/安全/iframe 处理/状态管理/无障碍）→ 修复
+3. 验证：npm run build + 后台入口跳转 + admin 权限拦截 + 面板切换/proxy/密码库全链路冒烟
+4. commit + 用户验收
+
+## 7. 验收标准
+
+- [ ] 非 admin 无法进入（无 token 跳登录、非 admin 403）
+- [ ] 面板分组/固定/切换/关闭/添加/持久化全部可用
+- [ ] proxy 面板正常嵌入；X-Frame-Options 拒绝的面板有回退提示
+- [ ] 密码库解锁→搜索→复制链路通（与服务端会话互通）
+- [ ] 深浅色、320/768/1440 三档响应式正常
+- [ ] build 通过、无 console 错误

frontend/index.html

@@ -7,13 +7,12 @@
   <meta name="description" content="${site_description}">
   <meta property="og:type" content="website">
   <link rel="icon" href="${site_favicon}">
-  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <link rel="stylesheet" href="/css/style.css">
 </head>
 <body>
   <div id="root"></div>
   <div id="musicEmbed"></div>
-  <div id="snackbar" class="snackbar"></div>
+  <div id="snackbar" class="snackbar" role="status" aria-live="polite"></div>
   <script type="module" src="/src/main.jsx"></script>
 </body>
 </html>

frontend/src/App.jsx

@@ -5,6 +5,8 @@ import Layout from './components/Layout.jsx';
 import Home from './pages/Home.jsx';
 import Blog from './pages/Blog.jsx';
 import BlogDetail from './pages/BlogDetail.jsx';
+import Tag from './pages/Tag.jsx';
+import Archive from './pages/Archive.jsx';
 import Forum from './pages/Forum.jsx';
 import ForumDetail from './pages/ForumDetail.jsx';
 import Passwords from './pages/Passwords.jsx';
@@ -25,6 +27,8 @@ export default function App() {
           <Route path="/" element={<Home />} />
           <Route path="/blog.html" element={<Blog />} />
           <Route path="/blog/:id" element={<BlogDetail />} />
+          <Route path="/tag/:name" element={<Tag />} />
+          <Route path="/archive.html" element={<Archive />} />
           <Route path="/forum.html" element={<Forum />} />
           <Route path="/forum/:id" element={<ForumDetail />} />
           <Route path="/passwords.html" element={<Passwords />} />

frontend/src/admin/AdminLayout.jsx

@@ -15,6 +15,7 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import MenuIcon from '@mui/icons-material/Menu';
 import HomeIcon from '@mui/icons-material/Home';
+import GridViewIcon from '@mui/icons-material/GridView';
 import LogoutIcon from '@mui/icons-material/Logout';
 import DashboardIcon from '@mui/icons-material/Dashboard';
 import SettingsIcon from '@mui/icons-material/Settings';
@@ -23,6 +24,7 @@ import PaletteIcon from '@mui/icons-material/Palette';
 import EmailIcon from '@mui/icons-material/Email';
 import ArticleIcon from '@mui/icons-material/Article';
 import ForumIcon from '@mui/icons-material/Forum';
+import ChatBubbleOutlineOutlinedIcon from '@mui/icons-material/ChatBubbleOutlineOutlined';
 import PeopleIcon from '@mui/icons-material/People';
 import CampaignIcon from '@mui/icons-material/Campaign';
 import LinkIcon from '@mui/icons-material/Link';
@@ -39,6 +41,7 @@ const NAV_ITEMS = [
   { path: '/homepage', label: '首页设置', icon: <HomeIcon /> },
   { path: '/email', label: '邮件配置', icon: <EmailIcon /> },
   { path: '/blog', label: '博客管理', icon: <ArticleIcon /> },
+  { path: '/comments', label: '评论管理', icon: <ChatBubbleOutlineOutlinedIcon /> },
   { path: '/forum', label: '论坛管理', icon: <ForumIcon /> },
   { path: '/users', label: '用户管理', icon: <PeopleIcon /> },
   { path: '/announcements', label: '公告管理', icon: <CampaignIcon /> },
@@ -86,6 +89,10 @@ export default function AdminLayout() {
             </IconButton>
           )}
           <Typography variant="h6" sx={{ flexGrow: 1 }}>管理后台</Typography>
+          <Button color="inherit" onClick={() => navigate('/workbench')} title="面板工作台" sx={{ minWidth: 0, px: { xs: 1, sm: 1.5 } }}>
+            <GridViewIcon sx={{ fontSize: 18, mr: { xs: 0, sm: 0.5 } }} />
+            <Box component="span" sx={{ display: { xs: 'none', sm: 'inline' } }}>工作台</Box>
+          </Button>
           <Button color="inherit" href="/" title="返回前台">
             <HomeIcon sx={{ mr: 0.5, fontSize: 18 }} />返回前台
           </Button>

frontend/src/admin/main.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { lazy, Suspense, useEffect, useState } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 import { ThemeProvider } from '@mui/material/styles';
@@ -18,12 +18,15 @@ import ThemeSettings from './pages/ThemeSettings.jsx';
 import Homepage from './pages/Homepage.jsx';
 import EmailSettings from './pages/EmailSettings.jsx';
 import BlogManage from './pages/BlogManage.jsx';
+import CommentManage from './pages/CommentManage.jsx';
 import ForumManage from './pages/ForumManage.jsx';
 import Users from './pages/Users.jsx';
 import Announcements from './pages/Announcements.jsx';
 import Links from './pages/Links.jsx';
 import Uploads from './pages/Uploads.jsx';
 import ImportDb from './pages/ImportDb.jsx';
+// 工作台独立分包：仅访问 /admin/workbench 时才加载（vite 自动 code-split）
+const Workbench = lazy(() => import('../tools/workbench/Workbench.jsx'));
 
 // 生产：/admin/* 由后端 fallback 到 dist/admin.html（Phase 6 需求），basename=/admin；
 // 开发：vite 多入口直接访问 /admin.html，basename 自适应为空。
@@ -75,6 +78,21 @@ function AdminApp() {
       <CssBaseline />
       <BrowserRouter basename={basename}>
         <Routes>
+          {/* 工作台：独立全屏布局，不套 AdminLayout（自带 Toolbar+Sidebar+内容区）；懒加载分包 */}
+          <Route
+            path="/workbench"
+            element={
+              <Suspense
+                fallback={
+                  <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
+                    <CircularProgress />
+                  </Box>
+                }
+              >
+                <Workbench />
+              </Suspense>
+            }
+          />
           <Route element={<AdminLayout />}>
             <Route index element={<Navigate to="/dashboard" replace />} />
             <Route path="/dashboard" element={<Dashboard />} />
@@ -84,6 +102,7 @@ function AdminApp() {
             <Route path="/homepage" element={<Homepage />} />
             <Route path="/email" element={<EmailSettings />} />
             <Route path="/blog" element={<BlogManage />} />
+            <Route path="/comments" element={<CommentManage />} />
             <Route path="/forum" element={<ForumManage />} />
             <Route path="/users" element={<Users />} />
             <Route path="/announcements" element={<Announcements />} />

frontend/src/admin/pages/CommentManage.jsx

@@ -0,0 +1,126 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Paper from '@mui/material/Paper';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import IconButton from '@mui/material/IconButton';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import CheckIcon from '@mui/icons-material/Check';
+import CloseIcon from '@mui/icons-material/Close';
+import { listPendingComments, approveComment, rejectComment } from '../../api/blog.js';
+import { showSnack } from '../snack.jsx';
+
+/** 时间格式化：yyyy-mm-dd hh:mm */
+function fmtTime(t) {
+  if (!t) return '';
+  return String(t).replace('T', ' ').slice(0, 16);
+}
+
+/** 评论管理：待审核队列 + 全部评论占位（后端暂无全量评论列表接口） */
+export default function CommentManage() {
+  const [tab, setTab] = useState(0);
+  const [pending, setPending] = useState([]);
+  const [busy, setBusy] = useState(false);
+
+  const load = useCallback(() => {
+    setBusy(true);
+    listPendingComments()
+      .then((list) => setPending(list || []))
+      .catch((e) => showSnack(e.message, 'error'))
+      .finally(() => setBusy(false));
+  }, []);
+
+  useEffect(() => { load(); }, [load]);
+
+  const act = async (id, fn, okMsg) => {
+    setBusy(true);
+    try {
+      await fn(id);
+      setPending((list) => list.filter((c) => c.id !== id));
+      showSnack(okMsg);
+    } catch (e) {
+      showSnack(e.message, 'error');
+    }
+    setBusy(false);
+  };
+
+  return (
+    <Box>
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 1 }}>
+        <Typography variant="h5">评论管理</Typography>
+        <IconButton onClick={load} title="刷新" disabled={busy}><RefreshIcon /></IconButton>
+      </Box>
+
+      <Paper sx={{ mb: 2 }}>
+        <Tabs value={tab} onChange={(e, v) => setTab(v)}>
+          <Tab label={`待审核${pending.length ? ` (${pending.length})` : ''}`} />
+          <Tab label="全部评论" />
+        </Tabs>
+      </Paper>
+
+      {tab === 0 ? (
+        pending.length === 0 ? (
+          <Paper sx={{ p: 4, textAlign: 'center' }}>
+            <Typography variant="body1" sx={{ mb: 0.5 }}>暂无待审核评论</Typography>
+            <Typography variant="body2" color="text.secondary">
+              开启「评论审核模式」后，新评论会先进这里等待审核
+            </Typography>
+          </Paper>
+        ) : (
+          <Paper>
+            <List disablePadding>
+              {pending.map((c) => (
+                <ListItem
+                  key={c.id}
+                  divider
+                  alignItems="flex-start"
+                  sx={{ flexDirection: 'column', alignItems: 'stretch', gap: 1, py: 2, px: { xs: 2, md: 3 } }}
+                >
+                  <Box sx={{ display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: 1 }}>
+                    <Typography variant="subtitle1" sx={{ fontWeight: 600 }}>
+                      {c.author_name || '匿名'}
+                    </Typography>
+                    <Chip size="small" variant="outlined" label={`文章：${c.post_title || `#${c.post_id}`}`} />
+                    <Typography variant="caption" color="text.secondary">{fmtTime(c.created_at)}</Typography>
+                  </Box>
+                  <Typography variant="body2" sx={{ color: 'text.primary', whiteSpace: 'pre-wrap', wordBreak: 'break-word' }}>
+                    {c.content}
+                  </Typography>
+                  <Box sx={{ display: 'flex', gap: 1, justifyContent: 'flex-end' }}>
+                    <Button
+                      size="small"
+                      variant="contained"
+                      startIcon={<CheckIcon />}
+                      disabled={busy}
+                      onClick={() => act(c.id, approveComment, '已通过审核')}
+                    >通过</Button>
+                    <Button
+                      size="small"
+                      variant="outlined"
+                      color="error"
+                      startIcon={<CloseIcon />}
+                      disabled={busy}
+                      onClick={() => act(c.id, rejectComment, '已拒绝')}
+                    >拒绝</Button>
+                  </Box>
+                </ListItem>
+              ))}
+            </List>
+          </Paper>
+        )
+      ) : (
+        <Paper sx={{ p: 4, textAlign: 'center' }}>
+          <Typography variant="body1" sx={{ mb: 0.5 }}>暂未提供全量评论列表接口</Typography>
+          <Typography variant="body2" color="text.secondary">
+            当前后端仅提供「待审核」评论的管理接口；已通过 / 已拒绝评论可在对应文章页查看。
+          </Typography>
+        </Paper>
+      )}
+    </Box>
+  );
+}

frontend/src/admin/pages/Settings.jsx

@@ -4,12 +4,36 @@ import Typography from '@mui/material/Typography';
 import TextField from '@mui/material/TextField';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
+import FormControl from '@mui/material/FormControl';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormHelperText from '@mui/material/FormHelperText';
+import Radio from '@mui/material/Radio';
+import RadioGroup from '@mui/material/RadioGroup';
+import Switch from '@mui/material/Switch';
 import { getSettings, saveSettings } from '../../api/settings.js';
 import { showSnack } from '../snack.jsx';
 
-/** 基本设置：站名/描述/站点URL/favicon（迁移自 v1 设置卡片） */
+/** 页脚样式选项（与前台 Footer.jsx 渲染一致） */
+const FOOTER_STYLES = [
+  { value: 'classic', label: '经典左右', desc: '左版权右版本，信息密度低，一眼扫过' },
+  { value: 'columns', label: '分栏导航', desc: '品牌 + 固定导航栏目 + 底部版权条，内容型站点首选' },
+  { value: 'glass', label: '玻璃卡片', desc: '磨砂玻璃卡片，与玻璃导航质感呼应' },
+];
+
+/** 基本设置 + 页脚设置（v2：页脚样式 / 版权 / Powered by 均支持自定义） */
 export default function Settings() {
-  const [form, setForm] = useState({ site_name: '', site_description: '', site_url: '', site_favicon: '' });
+  const [form, setForm] = useState({
+    site_name: '',
+    site_description: '',
+    site_url: '',
+    site_favicon: '',
+    footer_style: 'classic',
+    footer_copyright: '',
+    footer_powered: '',
+    footer_desc: '',
+    comment_moderate: '0',
+    comment_notify: '0',
+  });
   const [saving, setSaving] = useState(false);
 
   useEffect(() => {
@@ -19,11 +43,18 @@ export default function Settings() {
         site_description: s.site_description || '',
         site_url: s.site_url || '',
         site_favicon: s.site_favicon || '',
+        footer_style: s.footer_style || 'classic',
+        footer_copyright: s.footer_copyright || '',
+        footer_powered: s.footer_powered || '',
+        footer_desc: s.footer_desc || '',
+        comment_moderate: s.comment_moderate === '1' ? '1' : '0',
+        comment_notify: s.comment_notify === '1' ? '1' : '0',
       }))
       .catch((e) => showSnack(e.message, 'error'));
   }, []);
 
   const set = (k) => (e) => setForm((p) => ({ ...p, [k]: e.target.value }));
+  const toggle = (k) => (e) => setForm((p) => ({ ...p, [k]: e.target.checked ? '1' : '0' }));
 
   const save = async () => {
     setSaving(true);
@@ -36,18 +67,84 @@ export default function Settings() {
     setSaving(false);
   };
 
+  const footStyle = form.footer_style;
+
   return (
     <Box sx={{ maxWidth: 640 }}>
-      <Typography variant="h5" sx={{ mb: 2 }}>基本设置</Typography>
+      <Typography variant="h5" sx={{ mb: 2 }}>站点设置</Typography>
+
       <Paper sx={{ p: 3 }}>
         <TextField fullWidth label="网站名称" value={form.site_name} onChange={set('site_name')} margin="normal" placeholder="显示在标题和导航栏" />
         <TextField fullWidth label="网站描述（SEO）" value={form.site_description} onChange={set('site_description')} margin="normal" placeholder="搜索引擎结果中显示的描述" />
         <TextField fullWidth label="网站域名" type="url" value={form.site_url} onChange={set('site_url')} margin="normal" placeholder="https://你的域名.com" />
         <TextField fullWidth label="网站图标 URL" type="url" value={form.site_favicon} onChange={set('site_favicon')} margin="normal" placeholder="https://example.com/favicon.ico" />
-        <Box sx={{ mt: 2 }}>
-          <Button variant="contained" onClick={save} disabled={saving}>保存基本设置</Button>
-        </Box>
       </Paper>
+
+      <Paper sx={{ p: 3, mt: 2 }}>
+        <Typography variant="h6" sx={{ mb: 1 }}>评论设置</Typography>
+
+        <FormControlLabel
+          control={<Switch checked={form.comment_moderate === '1'} onChange={toggle('comment_moderate')} />}
+          label={(
+            <Box sx={{ py: 0.5 }}>
+              <Box sx={{ fontSize: 14, fontWeight: 500 }}>评论审核模式</Box>
+              <Box sx={{ fontSize: 12, color: 'text.secondary' }}>开启后新评论需后台审核通过才显示</Box>
+            </Box>
+          )}
+        />
+
+        <FormControlLabel
+          control={<Switch checked={form.comment_notify === '1'} onChange={toggle('comment_notify')} />}
+          label={(
+            <Box sx={{ py: 0.5 }}>
+              <Box sx={{ fontSize: 14, fontWeight: 500 }}>评论邮件通知</Box>
+              <Box sx={{ fontSize: 12, color: 'text.secondary' }}>新评论时给文章作者发邮件</Box>
+            </Box>
+          )}
+        />
+      </Paper>
+
+      <Paper sx={{ p: 3, mt: 2 }}>
+        <Typography variant="h6" sx={{ mb: 1 }}>页脚设置</Typography>
+
+        <FormControl component="fieldset" sx={{ mb: 1 }}>
+          <RadioGroup value={footStyle} onChange={set('footer_style')}>
+            {FOOTER_STYLES.map((o) => (
+              <FormControlLabel
+                key={o.value}
+                value={o.value}
+                control={<Radio />}
+                label={(
+                  <Box sx={{ py: 0.5 }}>
+                    <Box sx={{ fontSize: 14, fontWeight: 500 }}>{o.label}</Box>
+                    <Box sx={{ fontSize: 12, color: 'text.secondary' }}>{o.desc}</Box>
+                  </Box>
+                )}
+                sx={{ alignItems: 'flex-start' }}
+              />
+            ))}
+          </RadioGroup>
+        </FormControl>
+
+        {footStyle === 'columns' ? (
+          <>
+            <TextField fullWidth label="网站简介（页脚品牌区）" value={form.footer_desc} onChange={set('footer_desc')} margin="normal" placeholder="留空则自动使用网站描述" multiline minRows={2} />
+            <TextField fullWidth label="版权文本" value={form.footer_copyright} onChange={set('footer_copyright')} margin="normal" placeholder="© 2026 Rainnya Blog. All rights reserved." />
+            <FormHelperText sx={{ mt: 1 }}>
+              导航栏目固定不可编辑（首页 / 博客 / 论坛 / 管理后台 / 个人中心）
+            </FormHelperText>
+          </>
+        ) : (
+          <>
+            <TextField fullWidth label="版权文本" value={form.footer_copyright} onChange={set('footer_copyright')} margin="normal" placeholder="© 2026 Rainnya Blog. All rights reserved." />
+            <TextField fullWidth label="Powered by 文本" value={form.footer_powered} onChange={set('footer_powered')} margin="normal" placeholder="Powered by RainnyaWeb" />
+          </>
+        )}
+      </Paper>
+
+      <Box sx={{ mt: 2 }}>
+        <Button variant="contained" onClick={save} disabled={saving}>保存设置</Button>
+      </Box>
     </Box>
   );
 }

frontend/src/admin/pages/ThemeSettings.jsx

@@ -19,6 +19,7 @@ export default function ThemeSettings() {
     primary_color: '#6750a4',
     theme_wallpaper: '',
     theme_wallpaper_scale: 'cover',
+    theme_wallpaper_enabled: true,
     nav_style: 'default',
     card_style: 'default',
     glass_blur: '20',
@@ -34,6 +35,7 @@ export default function ThemeSettings() {
         primary_color: s.primary_color || '#6750a4',
         theme_wallpaper: s.theme_wallpaper || '',
         theme_wallpaper_scale: s.theme_wallpaper_scale || 'cover',
+        theme_wallpaper_enabled: s.theme_wallpaper_enabled !== '0',
         nav_style: s.nav_style || 'default',
         card_style: s.card_style || 'default',
         glass_blur: s.glass_blur || '20',
@@ -65,6 +67,7 @@ export default function ThemeSettings() {
         primary_color: form.primary_color,
         theme_wallpaper: form.theme_wallpaper.trim(),
         theme_wallpaper_scale: form.theme_wallpaper_scale,
+        theme_wallpaper_enabled: form.theme_wallpaper_enabled ? '1' : '0',
         theme_force_dark: form.theme_force_dark ? '1' : '0',
         nav_style: form.nav_style,
         card_style: form.card_style,
@@ -92,6 +95,11 @@ export default function ThemeSettings() {
 
       <Paper sx={{ p: 3, mb: 2 }}>
         <Typography variant="subtitle1" sx={{ mb: 1 }}>壁纸背景</Typography>
+        <FormControlLabel
+          control={<Switch checked={form.theme_wallpaper_enabled} onChange={(e) => setForm((p) => ({ ...p, theme_wallpaper_enabled: e.target.checked }))} />}
+          label="启用壁纸背景"
+          sx={{ mb: 1 }}
+        />
         <Box sx={{ display: 'flex', gap: 1, alignItems: 'center', mb: 1 }}>
           <Button variant="outlined" onClick={() => fileRef.current && fileRef.current.click()}>上传图片</Button>
           <input ref={fileRef} type="file" accept="image/*" style={{ display: 'none' }} onChange={handleWallpaperUpload} />

frontend/src/api/blog.js

@@ -18,13 +18,51 @@ export function deletePost(id) {
   return request('/blog/posts/' + id, { method: 'DELETE' });
 }
 
+// ── 搜索 / 标签 / 归档 / 上下篇 / 点赞（博客增强 B2）──────────
+export function searchPosts(q) {
+  return request('/blog/search?q=' + encodeURIComponent(q || ''));
+}
+export function getTags() {
+  return request('/blog/tags');
+}
+export function getTagPosts(name) {
+  return request('/blog/tag/' + encodeURIComponent(name));
+}
+export function getArchive() {
+  return request('/blog/archive');
+}
+export function getPrevNext(id) {
+  return request('/blog/posts/' + id + '/prevnext');
+}
+export function getLikeState(id) {
+  return request('/blog/posts/' + id + '/like');
+}
+export function likePost(id) {
+  return request('/blog/posts/' + id + '/like', { method: 'POST' });
+}
+export function unlikePost(id) {
+  return request('/blog/posts/' + id + '/like', { method: 'DELETE' });
+}
+
 // ── 评论 ────────────────────────────────────────
 export function listComments(postId) {
   return request('/blog/comments/' + postId);
 }
-export function createComment(postId, content) {
+/** content 评论正文；parentId>0 表示回复某条评论（嵌套） */
-  return request('/blog/comments/' + postId, { method: 'POST', body: { content } });
+export function createComment(postId, content, parentId = 0) {
+  return request('/blog/comments/' + postId, { method: 'POST', body: { content, parent_id: parentId || 0 } });
 }
 export function deleteComment(id) {
   return request('/blog/comments/' + id, { method: 'DELETE' });
 }
+
+// ── 评论审核（管理员）──────────────────────────
+export function listPendingComments() {
+  return request('/blog/comments/pending');
+}
+export function approveComment(id) {
+  return request('/blog/comments/' + id + '/approve', { method: 'POST' });
+}
+export function rejectComment(id) {
+  return request('/blog/comments/' + id + '/reject', { method: 'POST' });
+}

frontend/src/api/notes.js

@@ -0,0 +1,23 @@
+import { request } from './client.js';
+
+// ── 工作台「记事本」（routes/notes.js，仅管理员） ────────────
+/** 文件列表：[{ name, size, mtime }]，按修改时间倒序 */
+export function listNotes() {
+  return request('/notes');
+}
+/** 读取内容：{ name, content, size, mtime } */
+export function getNote(filename) {
+  return request('/notes/' + encodeURIComponent(filename));
+}
+/** 创建：{ filename, content }，同名返回 409 */
+export function createNote(filename, content) {
+  return request('/notes', { method: 'POST', body: { filename, content } });
+}
+/** 更新内容：{ content } */
+export function updateNote(filename, content) {
+  return request('/notes/' + encodeURIComponent(filename), { method: 'PUT', body: { content } });
+}
+/** 删除 */
+export function deleteNote(filename) {
+  return request('/notes/' + encodeURIComponent(filename), { method: 'DELETE' });
+}

frontend/src/api/terminal.js

@@ -0,0 +1,19 @@
+import { request } from './client.js';
+
+// ── Web 终端（安全敏感：root shell，PIN + 短 TTL token 双认证） ──
+// 后端契约见 routes/terminal.js：
+//   GET  /api/terminal/status → { hasPin, sessions, maxSessions, idleTimeoutMs }
+//   POST /api/terminal/auth   → { token, expiresIn, setup?, needs_setup?, message? }
+
+/** 检查终端专用密码是否已设置 + 当前会话数 */
+export function terminalStatus() {
+  return request('/terminal/status');
+}
+
+/**
+ * 设置（首次）/校验终端密码，成功发放 5 分钟短 TTL 终端 token。
+ * 失败抛错：400 密码不合法 / 401 密码错误 / 429 尝试次数过多
+ */
+export function terminalAuth(pin) {
+  return request('/terminal/auth', { method: 'POST', body: { pin } });
+}

frontend/src/components/CaptchaModal.jsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react';
 import * as captchaApi from '../api/captcha.js';
+import { useDialog } from '../lib/utils.js';
 
 // ── 模块级单例：showCaptcha 挂起请求，由 CaptchaModalHost 消费 ──
 let pending = null;   // { action, type, resolve }
@@ -140,15 +141,16 @@ function BuiltinCaptcha({ onFinish }) {
           onChange={(e) => setAnswer(e.target.value)}
           onKeyDown={(e) => { if (e.key === 'Enter') submit(); }}
           placeholder="输入验证码"
+          aria-label="输入验证码"
           maxLength={6}
           autoComplete="off"
           style={{ flex: 1, textAlign: 'center', fontSize: 20, letterSpacing: 6, textTransform: 'uppercase' }}
         />
-        <button type="button" className="btn btn-icon" title="刷新" onClick={loadImage} style={{ flexShrink: 0 }}>
+        <button type="button" className="btn btn-icon" title="刷新" aria-label="刷新验证码" onClick={loadImage} style={{ flexShrink: 0 }}>
           <span className="material-icons">refresh</span>
         </button>
       </div>
-      {error && <div style={{ color: 'var(--md-ref-error)', fontSize: 13, marginTop: 8 }}>{error}</div>}
+      {error && <div role="alert" style={{ color: 'var(--md-ref-error)', fontSize: 13, marginTop: 8 }}>{error}</div>}
       <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 6, marginTop: 8, fontSize: 13, color: 'var(--md-ref-on-surface-variant)' }}>
         {powDone ? (
           <>
@@ -264,13 +266,21 @@ export default function CaptchaModalHost() {
     }
   };
 
+  // 弹窗键盘/焦点管理（B3）：Esc 取消、聚焦首个输入、关闭后焦点还给触发元素
+  const { dialogRef, onKeyDown } = useDialog(!!request, () => finish(null));
+
   if (!request) return null;
 
   return (
     <div
+      ref={dialogRef}
       className="dialog-overlay active"
+      role="dialog"
+      aria-modal="true"
+      aria-label="验证码"
       style={{ display: 'flex', zIndex: 9999 }}
       onMouseDown={(e) => { if (e.target === e.currentTarget) finish(null); }}
+      onKeyDown={onKeyDown}
     >
       {request.type === 'recaptcha' ? (
         <ThirdPartyCaptcha type="recaptcha" onFinish={finish} />

frontend/src/components/Footer.jsx

@@ -0,0 +1,118 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+
+/**
+ * 页脚文案渲染：footer_copyright / footer_powered / footer_desc 为管理员字段，
+ * 纯文本（不含 `<`）按原样文本渲染；含 `<` 时按 HTML+CSS 渲染（self-XSS 与音乐嵌入同级）。
+ * 仅用于这三个字段，不扩大到其他数据。
+ */
+function HtmlOrText({ value, className }) {
+  if (typeof value === 'string' && value.includes('<')) {
+    return <span className={className} dangerouslySetInnerHTML={{ __html: value }} />;
+  }
+  return <span className={className}>{value}</span>;
+}
+
+/**
+ * 前台页脚（按 settings.footer_style 渲染 3 种样式，视觉对齐 /tmp/footer-demo.html 的 02/03/04）：
+ *  - classic  经典左右：左 Powered + 版权，右 站点名 v{version} 胶囊徽章
+ *  - columns  分栏导航：品牌 + 固定导航栏 + 底部版权条
+ *  - glass    玻璃卡片：磨砂玻璃卡片（backdrop-filter blur + 半透明底 + 细边框）
+ * 所有样式都保留站点名 + v{version} 元素；footer_desc 为空时回退到 site_description。
+ */
+export default function Footer({ settings = {}, version = '' }) {
+  const siteName = settings.site_name || 'RainWeb';
+  const style = settings.footer_style || 'classic';
+  const copyright = settings.footer_copyright || '© 2026 Rainnya Blog. All rights reserved.';
+  const powered = settings.footer_powered || 'Powered by RainnyaWeb';
+  const desc = settings.footer_desc || settings.site_description || '';
+
+  if (style === 'columns') {
+    // 导航栏目固定不可编辑（后台提示），首页/博客/论坛走 SPA，管理后台整页跳转
+    const navCols = [
+      { title: '导航', links: [
+        { to: '/', label: '首页' },
+        { to: '/blog.html', label: '博客' },
+        { to: '/forum.html', label: '论坛' },
+      ] },
+      { title: '其他', links: [
+        { to: '/admin', label: '管理后台', external: true },
+        { to: '/profile.html', label: '个人中心' },
+      ] },
+    ];
+    return (
+      <footer className="footer-columns">
+        <div className="fc-grid">
+          <div className="fc-brand">
+            <div className="brand-row">
+              <div className="brand-mark">{siteName.charAt(0)}</div>
+              <div className="brand-name">{siteName}</div>
+              {version && <span className="brand-version">v{version}</span>}
+            </div>
+            {desc && <HtmlOrText value={desc} className="brand-desc" />}
+          </div>
+          {navCols.map((col) => (
+            <nav key={col.title} className="fc-col">
+              <div className="col-title">{col.title}</div>
+              <div className="col-links">
+                {col.links.map((l) =>
+                  l.external ? (
+                    <a key={l.to} href={l.to}>{l.label}</a>
+                  ) : (
+                    <Link key={l.to} to={l.to}>{l.label}</Link>
+                  )
+                )}
+              </div>
+            </nav>
+          ))}
+        </div>
+        <div className="fc-bottom">
+          <HtmlOrText value={powered} />
+          <span className="sep" />
+          <HtmlOrText value={copyright} />
+        </div>
+      </footer>
+    );
+  }
+
+  if (style === 'glass') {
+    return (
+      <div className="footer-glass-wrap">
+        <span className="blob blob-1"></span>
+        <span className="blob blob-2"></span>
+        <span className="blob blob-3"></span>
+        <footer className="footer-glass">
+          <div className="fg-left">
+            <div className="fg-logo">{siteName.charAt(0)}</div>
+            <div>
+              <div className="fg-name">{siteName}</div>
+              <div className="fg-tag">
+                {desc && <HtmlOrText value={desc} />}
+                {desc && <span> · </span>}v{version}
+              </div>
+            </div>
+          </div>
+          <div className="fg-right">
+            <HtmlOrText value={copyright} className="fg-copyright" />
+            <HtmlOrText value={powered} className="fg-powered" />
+          </div>
+        </footer>
+      </div>
+    );
+  }
+
+  // classic（默认）：经典左右
+  return (
+    <footer className="footer-classic">
+      <div className="fc-left">
+        <HtmlOrText value={powered} />
+        <span className="sep" />
+        <HtmlOrText value={copyright} />
+      </div>
+      <div className="fc-right">
+        <span>{siteName}</span>
+        {version && <span className="fc-version">v{version}</span>}
+      </div>
+    </footer>
+  );
+}

frontend/src/components/Layout.jsx

@@ -7,6 +7,7 @@ import { getToken, setToken, notifyAuthChange } from '../api/client.js';
 import { showSnackbar } from '../lib/utils.js';
 import MusicEmbed from './MusicEmbed.jsx';
 import CaptchaModalHost from './CaptchaModal.jsx';
+import Footer from './Footer.jsx';
 
 /** QQ 邮箱自动头像（迁移自 nav.js） */
 function qqAvatar(user) {
@@ -75,7 +76,7 @@ export default function Layout() {
     const wallpaper = settings.theme_wallpaper || '';
     const scale = settings.theme_wallpaper_scale || 'cover';
 
-    if (wallpaper) {
+    if (wallpaper && settings.theme_wallpaper_enabled !== '0') {
       body.classList.add('has-wallpaper');
       body.style.setProperty('--wallpaper', `url(${wallpaper})`);
       const bgSizeMap = { cover: 'cover', contain: 'contain', repeat: 'auto', stretch: '100% 100%' };
@@ -166,6 +167,7 @@ export default function Layout() {
           <button
             className="btn-icon"
             onClick={handleToggleTheme}
+            aria-label="切换主题"
             title={settings.theme_force_dark === '1' ? '已强制深色模式' : '切换主题'}
           >
             <span className="material-icons">{theme === 'dark' ? 'light_mode' : 'dark_mode'}</span>
@@ -193,16 +195,7 @@ export default function Layout() {
         <Outlet />
       </main>
 
-      <footer
+      <Footer settings={settings} version={version} />
-        style={{
-          textAlign: 'center',
-          padding: '20px 16px 64px',
-          fontSize: 13,
-          color: 'var(--md-ref-outline)',
-        }}
-      >
-        {siteName} v{version}
-      </footer>
 
       <MusicEmbed settings={settings} />
       <CaptchaModalHost />

frontend/src/components/MarkdownRenderer.jsx

@@ -43,7 +43,13 @@ export function renderContent(content, useMarkdown) {
 
   html = html.replace(/\x00IMG(\d+)\x00/g, (m, i) => imageTag(images[parseInt(i)]));
   html = html.replace(/\x00FILE(\d+)\x00/g, (m, i) => fileTag(files[parseInt(i)]));
-  return DOMPurify.sanitize(html);
+  html = DOMPurify.sanitize(html);
+
+  // 给 h2 注入稳定锚点 id（在 HTML 字符串内生成，重渲一致，供目录锚点定位；
+  // 不在渲染后 DOM 上赋 id——React 重渲可能替换 DOM 导致 id 丢失）
+  let h2Index = 0;
+  html = html.replace(/<h2(?![^>]*\bid=)/gi, () => `<h2 id="toc-${h2Index++}"`);
+  return html;
 }
 
 export default function MarkdownRenderer({ content = '', useMarkdown = true }) {

frontend/src/components/MusicEmbed.jsx

@@ -49,9 +49,9 @@ export default function MusicEmbed({ settings }) {
     >
       {/* 保持挂载以保证折叠后音乐继续播放（display 由 .music-embed.collapsed 规则控制） */}
       <div className="music-embed-player" dangerouslySetInnerHTML={{ __html: code }} />
-      <div className="music-embed-icon" onClick={expand} title="展开播放器">
+      <button type="button" className="music-embed-icon" onClick={expand} title="展开播放器" aria-label="展开播放器">
         <span className="material-icons">music_note</span>
-      </div>
+      </button>
     </div>
   );
 }

frontend/src/lib/utils.js

@@ -1,3 +1,5 @@
+import { useCallback, useEffect, useRef } from 'react';
+
 /** HTML 转义：& < > " ' 全转义 */
 export function escapeHtml(str) {
   return String(str == null ? '' : str).replace(/[&<>"']/g, (ch) => {
@@ -45,3 +47,42 @@ export function showSnackbar(msg) {
     setTimeout(() => el.classList.remove('show', 'hide'), 300);
   }, 2500);
 }
+
+/** 弹窗焦点管理（B3）：把焦点移到容器内首个可聚焦元素（input/select/textarea/button） */
+export function focusDialog(container) {
+  if (!container) return;
+  const el = container.querySelector('input, select, textarea, button, [tabindex]:not([tabindex="-1"])');
+  if (el && typeof el.focus === 'function') el.focus();
+}
+
+/**
+ * 弹窗键盘/焦点管理（B3）：
+ * - 打开时记录触发元素，并把焦点移到弹窗内首个可聚焦元素
+ * - Esc 关闭弹窗
+ * - 关闭后焦点还给触发元素
+ * 返回 { dialogRef, onKeyDown }：dialogRef 绑到弹窗容器（.dialog-overlay），onKeyDown 绑其键盘事件。
+ */
+export function useDialog(open, onClose) {
+  const dialogRef = useRef(null);
+  const triggerRef = useRef(null);
+
+  useEffect(() => {
+    if (open) {
+      triggerRef.current = document.activeElement;
+      focusDialog(dialogRef.current);
+    } else if (triggerRef.current && typeof triggerRef.current.focus === 'function' && document.body.contains(triggerRef.current)) {
+      triggerRef.current.focus();
+      triggerRef.current = null;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+
+  const onKeyDown = useCallback((e) => {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+      if (onClose) onClose();
+    }
+  }, [onClose]);
+
+  return { dialogRef, onKeyDown };
+}

frontend/src/pages/Archive.jsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { getArchive, listPosts } from '../api/blog.js';
+
+/** 归档页（路由 /archive.html）：
+ *  archive API 只返回 {month, count}，无按月文章列表接口；
+ *  列表接口 /blog/posts 无分页返回全部已发布文章（文章量小），
+ *  前端按 created_at 客户端分组，配合 archive API 的月份与计数展示。
+ */
+export default function Archive() {
+  const [months, setMonths] = useState([]); // [{month, count, posts:[]}]
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    Promise.all([getArchive(), listPosts()])
+      .then(([arc, posts]) => {
+        const byMonth = new Map();
+        (posts || []).forEach((p) => {
+          const m = (p.created_at || '').slice(0, 7); // YYYY-MM
+          if (!m) return;
+          if (!byMonth.has(m)) byMonth.set(m, []);
+          byMonth.get(m).push(p);
+        });
+        // 以 archive API 的月份顺序为准（desc），count 以实际分组统计为准
+        const countMap = new Map();
+        (arc || []).forEach((a) => countMap.set(a.month, a.count));
+        const list = Array.from(byMonth.entries()).map(([month, ps]) => ({
+          month,
+          count: ps.length,
+          posts: ps,
+        }));
+        // 补齐 archive 里有、分组里没有的月份（理论上不会出现）
+        (arc || []).forEach((a) => {
+          if (!byMonth.has(a.month)) list.push({ month: a.month, count: a.count, posts: [] });
+        });
+        list.sort((a, b) => (a.month < b.month ? 1 : -1));
+        setMonths(list);
+      })
+      .catch((e) => setError(e.message || '加载失败'))
+      .finally(() => setLoading(false));
+  }, []);
+
+  const fmtMonth = (m) => {
+    const [y, mm] = m.split('-');
+    return `${y}年${mm}月`;
+  };
+
+  return (
+    <div className="blog-article" style={{ maxWidth: 720, margin: '0 auto' }}>
+      <Link to="/blog.html" className="btn btn-text btn-sm" style={{ marginBottom: 16 }}>
+        <span className="material-icons" style={{ fontSize: 16 }}>arrow_back</span> 返回博客
+      </Link>
+      <h1 className="article-title" style={{ fontSize: 26 }}>
+        文章归档
+        {!loading && months.length > 0 && (
+          <span className="tag-title-count">（共 {months.reduce((s, m) => s + m.count, 0)} 篇）</span>
+        )}
+      </h1>
+
+      {loading && <div className="loading"><div className="spinner"></div></div>}
+      {error && (
+        <div className="empty-state"><div className="empty-icon">⚠️</div><p>{error}</p></div>
+      )}
+      {!loading && !error && months.length === 0 && (
+        <div className="empty-state"><div className="empty-icon">🗂️</div><p>暂无文章</p></div>
+      )}
+
+      <div className="archive-list">
+        {months.map((m) => (
+          <section key={m.month} className="archive-month">
+            <h2 className="archive-month-title">
+              {fmtMonth(m.month)}
+              <span className="archive-month-count">{m.count} 篇</span>
+            </h2>
+            {m.posts.length === 0 ? (
+              <p className="text-muted" style={{ fontSize: 13 }}>暂无文章</p>
+            ) : (
+              m.posts.map((p) => (
+                <Link key={p.id} to={`/blog/${p.id}`} className="archive-item">
+                  <span className="archive-item-title">{p.title}</span>
+                  <span className="archive-item-date">{(p.created_at || '').slice(0, 10)}</span>
+                </Link>
+              ))
+            )}
+          </section>
+        ))}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/Blog.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
 import BlogSidebar from '../components/BlogSidebar.jsx';
-import { listPosts } from '../api/blog.js';
+import { listPosts, searchPosts, getTags } from '../api/blog.js';
 import { getPublicSettings } from '../api/settings.js';
 
 /** 摘要：优先取 excerpt，否则从内容中剥离 markdown 符号截取（照搬 blog.js） */
@@ -10,28 +10,139 @@ function excerptOf(p) {
   return (p.content || '').replace(/[#*`\[\]()>|~_]/g, '').slice(0, 200);
 }
 
-/** 博客列表页（迁移自 blog.html + blog.js loadPosts）：瀑布流卡片，点击进详情 */
+/** 博客列表页（迁移自 blog.html + blog.js loadPosts）：瀑布流卡片，点击进详情；
+ *  顶部搜索框（/api/blog/search）+ 标签云（/api/blog/tags，点击进 /tag/:name）+ 归档入口 */
 export default function Blog() {
   const [settings, setSettings] = useState({});
   const [posts, setPosts] = useState(null); // null=加载中
   const [error, setError] = useState('');
 
+  // 搜索状态
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState(null); // null=未搜索
+  const [searching, setSearching] = useState(false);
+
+  // 标签云
+  const [tags, setTags] = useState([]);
+
   useEffect(() => {
     getPublicSettings().then(setSettings).catch(() => {});
     listPosts()
       .then((ps) => setPosts(ps || []))
       .catch((e) => setError(e.message || '加载失败'));
+    getTags()
+      .then((ts) => setTags(ts || []))
+      .catch(() => setTags([]));
   }, []);
 
+  const doSearch = async (e) => {
+    e && e.preventDefault();
+    const q = query.trim();
+    if (!q) { setResults(null); return; }
+    setSearching(true);
+    try {
+      const rs = await searchPosts(q);
+      setResults(rs || []);
+    } catch (err) {
+      setResults([]);
+      setError(err.message || '搜索失败');
+    }
+    setSearching(false);
+  };
+
+  const clearSearch = () => {
+    setQuery('');
+    setResults(null);
+    setError('');
+  };
+
+  // 搜索结果以列表呈现（区别于瀑布流卡片）
+  const renderResults = () => (
+    <div className="search-results">
+      <div className="search-results-head">
+        <span>搜索结果（{results.length}）</span>
+        <button className="btn btn-text btn-sm" onClick={clearSearch}>
+          <span className="material-icons" style={{ fontSize: 16 }}>close</span> 清空
+        </button>
+      </div>
+      {results.length === 0 ? (
+        <div className="empty-state"><div className="empty-icon">🔍</div><p>没有找到相关内容</p></div>
+      ) : (
+        <div className="search-results-list">
+          {results.map((p) => (
+            <Link key={p.id} to={`/blog/${p.id}`} className="search-result-item">
+              <div className="sri-title">{p.title}</div>
+              {p.excerpt && <div className="sri-excerpt">{p.excerpt}</div>}
+              <div className="sri-meta">
+                <span>{p.author_name || '管理员'}</span>
+                <span className="sep">·</span>
+                <span>{p.created_at}</span>
+                {p.tags && <span className="sri-tags">{p.tags}</span>}
+              </div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+
   return (
-    <div className="homepage-layout">
+    <div className="homepage-layout blog-layout">
+      <h1 className="sr-only">博客</h1>
       <BlogSidebar settings={settings} />
       <div className="homepage-content">
+        {/* 工具条：搜索框 + 归档 */}
+        <form className="blog-toolbar" onSubmit={doSearch}>
+          <div className="search-box">
+            <span className="material-icons">search</span>
+            <input
+              type="text"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="搜索文章标题 / 内容..."
+              aria-label="搜索文章"
+            />
+            {query && (
+              <button type="button" className="search-clear" onClick={() => setQuery('')} aria-label="清空输入">
+                <span className="material-icons">close</span>
+              </button>
+            )}
+          </div>
+          <button type="submit" className="btn btn-tonal btn-sm" disabled={searching}>
+            {searching ? '搜索中...' : '搜索'}
+          </button>
+          <Link to="/archive.html" className="btn btn-text btn-sm">
+            <span className="material-icons" style={{ fontSize: 16 }}>archive</span> 归档
+          </Link>
+        </form>
+
+        {/* 标签云 */}
+        {tags.length > 0 && (
+          <div className="tag-cloud card">
+            <div className="tag-cloud-title">
+              <span className="material-icons">local_offer</span> 标签
+            </div>
+            <div className="tag-cloud-body">
+              {tags.map((t) => (
+                <Link key={t.name} to={`/tag/${encodeURIComponent(t.name)}`} className="tag-chip" style={{ fontSize: tagSize(t.count) }}>
+                  {t.name}
+                  <span className="tag-count">{t.count}</span>
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* 搜索结果 / 瀑布流 */}
+        {results !== null ? (
+          renderResults()
+        ) : (
+          <>
             {!posts && !error && (
               <div className="loading"><div className="spinner"></div></div>
             )}
             {error && (
-          <div className="empty-state"><div className="empty-icon">⚠️</div><p>加载失败</p></div>
+              <div className="empty-state"><div className="empty-icon">⚠️</div><p>{error}</p></div>
             )}
             {posts && posts.length === 0 && (
               <div className="empty-state"><div className="empty-icon">📖</div><p>暂无文章</p></div>
@@ -48,7 +159,16 @@ export default function Blog() {
                 ))}
               </div>
             )}
+          </>
+        )}
       </div>
     </div>
   );
 }
+
+/** 标签字号随文章数渐变（经典标签云效果）：1 篇 ~12px，8 篇及以上 ~18px */
+function tagSize(count) {
+  const c = Number(count) || 1;
+  const size = 12 + Math.min(c, 8) * 0.75;
+  return size.toFixed(1) + 'px';
+}

frontend/src/pages/BlogDetail.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useParams, Link } from 'react-router-dom';
 import * as blogApi from '../api/blog.js';
 import { me } from '../api/auth.js';
@@ -6,9 +6,20 @@ import { getToken } from '../api/client.js';
 import MarkdownRenderer from '../components/MarkdownRenderer.jsx';
 import { showSnackbar } from '../lib/utils.js';
 
+/** 字数统计：剥离 markdown 符号与 [image:]/[file:] 标签后，中文字符 + 英文单词数 */
+function countWords(content) {
+  const plain = String(content || '')
+    .replace(/\[image:[^\]]*\]|\[file:[^\]]*\]/g, '')
+    .replace(/[#*`\[\]()>|~_!-]/g, '');
+  const cjk = (plain.match(/[\u4e00-\u9fff\u3400-\u4dbf]/g) || []).length;
+  const words = plain.replace(/[\u4e00-\u9fff\u3400-\u4dbf]/g, ' ').trim().split(/\s+/).filter(Boolean).length;
+  return cjk + words;
+}
+
 /**
- * 博客详情页（路由 /blog/:id，SPA 内走前端路由，SSR 直链由后端处理）：
+ * 博客详情页（路由 /blog/:id）：
- * 文章正文（MarkdownRenderer）+ 评论列表/发表 + 编辑按钮（作者/管理员可见）。
+ * 正文（MarkdownRenderer）+ 阅读量/标签/点赞 + 目录/字数 + 上一篇/下一篇 +
+ * 嵌套评论（parent_id 回复）。
  */
 export default function BlogDetail() {
   const { id } = useParams();
@@ -19,15 +30,26 @@ export default function BlogDetail() {
   const [error, setError] = useState('');
   const [commentText, setCommentText] = useState('');
   const [submitting, setSubmitting] = useState(false);
+  const [prevnext, setPrevnext] = useState(null);
+  const [like, setLike] = useState({ liked: false, count: 0 });
+  const [toc, setToc] = useState([]);
+  const [replyTo, setReplyTo] = useState(null); // {id, name}
 
   const load = useCallback(async () => {
     setLoading(true);
     setError('');
+    setReplyTo(null);
     try {
-      const p = await blogApi.getPost(id);
+      const [p, cs, pn, lk] = await Promise.all([
+        blogApi.getPost(id),
+        blogApi.listComments(id),
+        blogApi.getPrevNext(id),
+        blogApi.getLikeState(id),
+      ]);
       setPost(p);
-      const cs = await blogApi.listComments(id);
       setComments(cs || []);
+      setPrevnext(pn);
+      setLike(lk || { liked: false, count: 0 });
     } catch (e) {
       setError(e.message || '加载失败');
     } finally {
@@ -45,15 +67,79 @@ export default function BlogDetail() {
   }, [load]);
 
   const canEdit = user && post && (user.role === 'admin' || user.id === post.author_id);
+  const wordCount = useMemo(() => (post ? countWords(post.content) : 0), [post]);
+
+  // 目录：从已渲染的 .md-body 提取 h2（仅一级章节）打锚点；短文章（<500 字）不提取
+  useEffect(() => {
+    if (!post) return;
+    if (wordCount < 500) { setToc([]); return; }
+    const body = document.querySelector('.blog-article .md-body');
+    if (!body) { setToc([]); return; }
+    const items = [...body.querySelectorAll('h2')].map((h, i) => {
+      if (!h.id) h.id = 'toc-' + i;
+      return { id: h.id, text: (h.textContent || '').trim(), level: 2 };
+    });
+    setToc(items);
+  }, [post, wordCount]);
+
+  const tags = useMemo(() => String(post?.tags || '').split(',').map((t) => t.trim()).filter(Boolean), [post]);
+
+  // ── 点赞（乐观更新）──
+  const toggleLike = async () => {
+    if (!user) { showSnackbar('登录后可以点赞'); return; }
+    const next = !like.liked;
+    setLike((s) => ({ liked: next, count: Math.max(0, s.count + (next ? 1 : -1)) }));
+    try {
+      const r = next ? await blogApi.likePost(id) : await blogApi.unlikePost(id);
+      setLike({ liked: r.liked, count: r.count });
+    } catch (e) {
+      setLike((s) => ({ liked: !s.liked, count: Math.max(0, s.count + (s.liked ? 1 : -1)) }));
+      showSnackbar(e.message);
+    }
+  };
+
+  // ── 嵌套评论 ──
+  const childrenOf = useCallback((pid) => comments.filter((c) => c.parent_id === pid), [comments]);
+  const rootComments = comments.filter((c) => !c.parent_id);
+
+  const renderComment = (c, depth = 0) => {
+    const kids = childrenOf(c.id);
+    return (
+      <div key={c.id} className={'reply-item' + (depth > 0 ? ' reply-child' : '')}>
+        <div className="reply-meta">
+          <strong>{c.author_name || '游客'}</strong> · {c.created_at}
+          {kids.length > 0 && <span className="reply-count">回复 {kids.length}</span>}
+        </div>
+        <div className="reply-body">{c.content}</div>
+        {user && (
+          <button
+            className="btn btn-text btn-sm reply-btn"
+            onClick={() => {
+              setReplyTo({ id: c.id, name: c.author_name || '游客' });
+              setCommentText(`@${c.author_name || '游客'} `);
+            }}
+          >
+            <span className="material-icons" style={{ fontSize: 14 }}>reply</span> 回复
+          </button>
+        )}
+        {kids.length > 0 && (
+          <div className="reply-children">
+            {kids.map((k) => renderComment(k, depth + 1))}
+          </div>
+        )}
+      </div>
+    );
+  };
 
   const submitComment = async () => {
     const content = commentText.trim();
     if (!content) { showSnackbar('评论不能为空'); return; }
     setSubmitting(true);
     try {
-      await blogApi.createComment(id, content);
+      await blogApi.createComment(id, content, replyTo ? replyTo.id : 0);
       showSnackbar('评论已发表');
       setCommentText('');
+      setReplyTo(null);
       await load();
     } catch (e) {
       showSnackbar(e.message);
@@ -76,51 +162,137 @@ export default function BlogDetail() {
   }
 
   return (
-    <div className="blog-article">
+    <div className="article-layout">
+      <div className="blog-article article-main">
       <Link to="/blog.html" className="btn btn-text btn-sm" style={{ marginBottom: 16 }}>
         <span className="material-icons" style={{ fontSize: 16 }}>arrow_back</span> 返回列表
       </Link>
+
       <h1 className="article-title">{post.title}</h1>
+
       <div className="article-meta">
         {post.author_name || '管理员'} · {post.created_at}
+        <span className="meta-stat" title="阅读量">
+          <span className="material-icons" style={{ fontSize: 15 }}>visibility</span> {post.views || 0}
+        </span>
+        <span className="meta-stat" title="字数">约 {wordCount} 字</span>
+      </div>
+
+      {tags.length > 0 && (
+        <div className="article-tags">
+          {tags.map((t) => (
+            <Link key={t} to={`/tag/${encodeURIComponent(t)}`} className="chip article-tag-chip">{t}</Link>
+          ))}
+        </div>
+      )}
+
+      <div className="article-actions">
+        <button className={'btn like-btn' + (like.liked ? ' liked' : '')} onClick={toggleLike} title="点赞" aria-label="点赞" aria-pressed={like.liked}>
+          <span className="material-icons" style={{ fontSize: 18 }}>{like.liked ? 'favorite' : 'favorite_border'}</span>
+          <span className="like-count">{like.count}</span>
+        </button>
         {canEdit && (
-          <Link to={`/write.html?edit=${post.id}`} className="btn btn-tonal btn-sm" style={{ marginLeft: 12 }}>编辑</Link>
+          <Link to={`/write.html?edit=${post.id}`} className="btn btn-tonal btn-sm">编辑</Link>
         )}
       </div>
 
       <MarkdownRenderer content={post.content} useMarkdown={post.use_markdown} />
 
+      {/* 上一篇 / 下一篇 */}
+      {prevnext && (prevnext.prev || prevnext.next) && (
+        <nav className="prevnext-nav">
+          <div className="pn-col pn-prev">
+            {prevnext.prev ? (
+              <Link to={`/blog/${prevnext.prev.id}`}>
+                <span className="pn-label">上一篇</span>
+                <span className="pn-title">{prevnext.prev.title}</span>
+              </Link>
+            ) : (
+              <span className="pn-disabled"><span className="pn-label">上一篇</span><span className="pn-title">没有了</span></span>
+            )}
+          </div>
+          <div className="pn-col pn-next">
+            {prevnext.next ? (
+              <Link to={`/blog/${prevnext.next.id}`}>
+                <span className="pn-label">下一篇</span>
+                <span className="pn-title">{prevnext.next.title}</span>
+              </Link>
+            ) : (
+              <span className="pn-disabled"><span className="pn-label">下一篇</span><span className="pn-title">没有了</span></span>
+            )}
+          </div>
+        </nav>
+      )}
+
       <hr style={{ border: 'none', borderTop: '1px solid var(--md-ref-outline-variant)', margin: '32px 0' }} />
-      <h4 style={{ fontWeight: 500, marginBottom: 16 }}>评论 ({comments.length})</h4>
+      <h2 style={{ fontWeight: 500, marginBottom: 16 }}>评论 ({comments.length})</h2>
 
       {comments.length === 0 ? (
         <p className="text-muted" style={{ fontSize: 14 }}>暂无评论</p>
       ) : (
-        comments.map((c) => (
+        <div className="comment-list">
-          <div className="reply-item" key={c.id}>
+          {rootComments.map((c) => renderComment(c))}
-            <div className="reply-meta"><strong>{c.author_name || '游客'}</strong> · {c.created_at}</div>
-            <div className="reply-body">{c.content}</div>
         </div>
-        ))
       )}
 
       {user ? (
-        <div style={{ display: 'flex', gap: 8, marginTop: 12 }}>
+        <div className="comment-form">
+          {replyTo && (
+            <div className="reply-to-hint">
+              <span className="material-icons" style={{ fontSize: 15 }}>reply</span>
+              回复 <strong>@{replyTo.name}</strong>
+              <button
+                className="btn btn-text btn-sm"
+                onClick={() => { setReplyTo(null); setCommentText(''); }}
+              >
+                <span className="material-icons" style={{ fontSize: 15 }}>close</span> 取消
+              </button>
+            </div>
+          )}
+          <div style={{ display: 'flex', gap: 8, marginTop: replyTo ? 8 : 0 }}>
             <textarea
               value={commentText}
               onChange={(e) => setCommentText(e.target.value)}
-            placeholder="写下你的评论..."
+              placeholder={replyTo ? `回复 @${replyTo.name}...` : '写下你的评论...'}
               style={{ flex: 1, minHeight: 60, fontSize: 14 }}
             />
             <button className="btn btn-filled btn-sm" style={{ alignSelf: 'flex-end' }} onClick={submitComment} disabled={submitting}>
               发表评论
             </button>
           </div>
+        </div>
       ) : (
         <p className="text-muted" style={{ marginTop: 12, fontSize: 14 }}>
           <Link to="/login.html" style={{ color: 'var(--md-ref-primary)' }}>登录</Link>后可以评论
         </p>
       )}
         </div>
+
+        {/* 侧边目录（仅 h2 章节；短文章 <500 字不显示） */}
+        {toc.length > 0 && (
+          <aside className="article-toc-side">
+            <div className="toc-title">
+              <span className="material-icons" style={{ fontSize: 16 }}>format_list_bulleted</span>
+              目录 <span className="toc-count">{toc.length}</span>
+            </div>
+            <ul className="toc-list">
+              {toc.map((t) => (
+                <li key={t.id} className="toc-item">
+                  <a
+                    href={'#' + t.id}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      const el = document.getElementById(t.id);
+                      if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                    }}
+                  >
+                    {t.text}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </aside>
+        )}
+    </div>
   );
 }

frontend/src/pages/Embed.jsx

@@ -44,6 +44,7 @@ export default function Embed() {
 
   return (
     <div className="embed-page" style={{ height: 'calc(100vh - 56px)', display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+      <h1 className="sr-only">嵌入页面</h1>
       <div
         className="embed-toolbar"
         style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '0 12px', height: 48, background: 'var(--md-ref-surface-container)', borderBottom: '1px solid var(--md-ref-outline-variant)', flexShrink: 0 }}
@@ -67,7 +68,14 @@ export default function Embed() {
             Ignore X-Frame-Headers
           </a>{' '}
           扩展，或点击右上角「原站」在新标签页打开
-          <span onClick={() => setShowHint(false)} style={{ cursor: 'pointer', marginLeft: 8, fontWeight: 600 }}>✕</span>
+          <button
+            type="button"
+            onClick={() => setShowHint(false)}
+            aria-label="关闭提示"
+            style={{ cursor: 'pointer', marginLeft: 8, fontWeight: 600, height: 'auto', padding: '2px 8px', fontSize: 'inherit', fontFamily: 'inherit', background: 'transparent', border: 'none', color: 'inherit' }}
+          >
+            ✕
+          </button>
         </div>
       )}
 

frontend/src/pages/Forum.jsx

@@ -6,7 +6,7 @@ import { getToken } from '../api/client.js';
 import { uploadFile } from '../api/upload.js';
 import { required as captchaRequired, applyCaptchaResult } from '../api/captcha.js';
 import { showCaptcha } from '../components/CaptchaModal.jsx';
-import { showSnackbar } from '../lib/utils.js';
+import { showSnackbar, useDialog } from '../lib/utils.js';
 
 /** 板块的子分类列表 */
 function subCatsOf(cat) {
@@ -133,8 +133,12 @@ export default function Forum() {
   const currentCat = categories.find((c) => c.id === currentCatId);
   const subCats = subCatsOf(currentCat);
 
+  // 发帖弹窗焦点管理（B3）：Esc 关闭、聚焦首个输入、关闭后焦点还给触发按钮
+  const { dialogRef: npDialogRef, onKeyDown: npDialogKey } = useDialog(showNewPost, () => setShowNewPost(false));
+
   return (
     <div className="forum-layout">
+      <h1 className="sr-only">论坛</h1>
       <aside className="forum-sidebar">
         <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 12 }}>
           <span style={{ fontWeight: 600, fontSize: 16 }}>板块</span>
@@ -144,7 +148,8 @@ export default function Forum() {
         </div>
         <div className="forum-cat-list">
           {categories.map((c) => (
-            <div
+            <button
+              type="button"
               key={c.id}
               className={'forum-cat-item' + (c.id === currentCatId ? ' active' : '')}
               onClick={() => selectCategory(c.id)}
@@ -153,17 +158,18 @@ export default function Forum() {
               {c.announcement ? (
                 <span className="material-icons" style={{ fontSize: 14, color: 'var(--md-ref-primary)' }}>campaign</span>
               ) : null}
-            </div>
+            </button>
           ))}
         </div>
         <hr style={{ border: 'none', borderTop: '1px solid var(--md-ref-outline-variant)', margin: '12px 0' }} />
-        <div
+        <button
+          type="button"
           className={'forum-cat-item' + (currentCatId === null ? ' active' : '')}
           onClick={showAllPosts}
           style={{ fontWeight: 500 }}
         >
           <span className="material-icons" style={{ fontSize: 18 }}>dynamic_feed</span> 全部最新
-        </div>
+        </button>
       </aside>
 
       <div className="forum-content">
@@ -171,7 +177,7 @@ export default function Forum() {
           <div style={{ marginBottom: 16 }}>
             <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
               <h3 style={{ fontWeight: 600, fontSize: 20, margin: 0 }}>{currentCat.name}</h3>
-              <span className="chip" style={{ cursor: 'default', fontSize: 12, padding: '1px 8px', color: 'var(--md-ref-on-surface-variant)', border: '1px solid var(--md-ref-outline-variant)' }}>板块</span>
+              <span className="chip chip-static">板块</span>
             </div>
             <p className="text-muted" style={{ fontSize: 14 }}>{currentCat.description || ''}</p>
             {currentCat.announcement && (
@@ -182,9 +188,9 @@ export default function Forum() {
             )}
             {subCats.length > 0 && (
               <div className="chips" style={{ marginBottom: 12, marginTop: 12 }}>
-                <span className={'chip' + (!filterSub ? ' active' : '')} onClick={() => { setFilterSub(''); load(currentCatId, ''); }}>全部</span>
+                <button type="button" className={'chip' + (!filterSub ? ' active' : '')} onClick={() => { setFilterSub(''); load(currentCatId, ''); }}>全部</button>
                 {subCats.map((s) => (
-                  <span key={s} className={'chip' + (filterSub === s ? ' active' : '')} onClick={() => { setFilterSub(s); load(currentCatId, s); }}>{s}</span>
+                  <button type="button" key={s} className={'chip' + (filterSub === s ? ' active' : '')} onClick={() => { setFilterSub(s); load(currentCatId, s); }}>{s}</button>
                 ))}
               </div>
             )}
@@ -208,9 +214,9 @@ export default function Forum() {
                     <span>{p.created_at}</span>
                     <span>{p.reply_count || 0} 回复</span>
                     <span style={{ color: 'var(--md-ref-outline)', margin: '0 4px' }}>|</span>
-                    <span className="chip" style={{ cursor: 'default', fontSize: 11, padding: '1px 8px', background: 'transparent', border: '1px solid var(--md-ref-outline-variant)', color: 'var(--md-ref-on-surface-variant)' }}>{catName}</span>
+                    <span className="chip chip-static">{catName}</span>
                     {p.sub_category ? (
-                      <span className="chip" style={{ cursor: 'default', fontSize: 11, padding: '1px 8px', background: 'var(--md-ref-secondary-container)', color: 'var(--md-ref-on-secondary-container)' }}>{p.sub_category}</span>
+                      <span className="chip chip-tonal">{p.sub_category}</span>
                     ) : null}
                   </div>
                 </Link>
@@ -223,9 +229,14 @@ export default function Forum() {
       {/* 发帖弹窗 */}
       {showNewPost && (
         <div
+          ref={npDialogRef}
           className="dialog-overlay active"
+          role="dialog"
+          aria-modal="true"
+          aria-label="发布新帖"
           style={{ display: 'flex', zIndex: 9999 }}
           onMouseDown={(e) => { if (e.target === e.currentTarget) setShowNewPost(false); }}
+          onKeyDown={npDialogKey}
         >
           <div className="dialog">
             <h3>发布新帖</h3>

frontend/src/pages/ForumDetail.jsx

@@ -108,7 +108,7 @@ export default function ForumDetail() {
             </button>
           )}
         </div>
-        <h3 style={{ fontSize: 22, fontWeight: 600 }}>{post.title}</h3>
+        <h1 style={{ fontSize: 22, fontWeight: 600 }}>{post.title}</h1>
         <div className="post-meta" style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
           <span>{post.author_name || '匿名'}</span>
           <span>{post.created_at}</span>
@@ -158,12 +158,14 @@ export default function ForumDetail() {
               <div className="reply-meta">
                 <strong>{r.author_name || '匿名'}</strong> · {r.created_at}
                 {canDeleteReply && (
-                  <span
+                  <button
+                    type="button"
+                    aria-label="删除回复"
                     style={{ float: 'right', color: 'var(--md-ref-error)', cursor: 'pointer', fontSize: 13 }}
                     onClick={() => deleteReply(r.id)}
                   >
                     删除
-                  </span>
+                  </button>
                 )}
               </div>
               <div className="reply-body">{r.content}</div>

frontend/src/pages/Home.jsx

@@ -19,6 +19,7 @@ export default function Home() {
 
   return (
     <div className="homepage-layout">
+      <h1 className="sr-only">首页</h1>
       <BlogSidebar settings={settings} showRecent forceShow />
       <div className="homepage-content">
         <div className="card">

frontend/src/pages/Passwords.jsx

@@ -3,7 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import * as pwApi from '../api/passwords.js';
 import { me } from '../api/auth.js';
 import { getToken } from '../api/client.js';
-import { showSnackbar } from '../lib/utils.js';
+import { showSnackbar, useDialog } from '../lib/utils.js';
 
 /**
  * 密码学安全的随机密码生成器（crypto.getRandomValues，替代 v1 的 Math.random）。
@@ -56,6 +56,9 @@ export default function Passwords() {
   const [confirmPin, setConfirmPin] = useState('');
   const [pinSaving, setPinSaving] = useState(false);
 
+  // 修改 PIN 警告确认（修改后旧密文无法解密，需重新添加条目）
+  const [pinChangeWarn, setPinChangeWarn] = useState(false);
+
   // 添加/编辑条目弹窗
   const [pwDialog, setPwDialog] = useState(false);
   const [editingId, setEditingId] = useState(null);
@@ -154,7 +157,7 @@ export default function Passwords() {
       setPhase('locked');
       setPinInput('');
       setPinError('');
-      setPinDialog(false); setPwDialog(false); setDetailId(null); setGenDialog(false); setConfirmDialog(false);
+      setPinDialog(false); setPwDialog(false); setDetailId(null); setGenDialog(false); setConfirmDialog(false); setPinChangeWarn(false);
       showSnackbar('已锁定');
     } catch (e) {
       showSnackbar(e.message);
@@ -167,6 +170,16 @@ export default function Passwords() {
     setPinDialog(true);
   };
 
+  // 修改 PIN：先弹警告确认，确认后再打开设置弹窗
+  const openPinChange = () => {
+    setPinChangeWarn(true);
+  };
+
+  const proceedPinChange = () => {
+    setPinChangeWarn(false);
+    openPinDialog();
+  };
+
   const openAddDialog = () => {
     setEditingId(null);
     setFTitle(''); setFUsername(''); setFPassword(''); setFUrl(''); setFNotes('');
@@ -237,14 +250,23 @@ export default function Passwords() {
 
   const detailEntry = entries ? entries.find((x) => x.id === detailId) : null;
 
+  // 各弹窗键盘/焦点管理（B3）：Esc 关闭、聚焦首个输入、关闭后焦点还给触发按钮
+  const { dialogRef: pinDlgRef, onKeyDown: pinDlgKey } = useDialog(pinDialog, () => setPinDialog(false));
+  const { dialogRef: pwDlgRef, onKeyDown: pwDlgKey } = useDialog(pwDialog, () => setPwDialog(false));
+  const { dialogRef: detailDlgRef, onKeyDown: detailDlgKey } = useDialog(!!detailEntry, () => setDetailId(null));
+  const { dialogRef: genDlgRef, onKeyDown: genDlgKey } = useDialog(genDialog, () => setGenDialog(false));
+  const { dialogRef: warnDlgRef, onKeyDown: warnDlgKey } = useDialog(pinChangeWarn, () => setPinChangeWarn(false));
+  const { dialogRef: confirmDlgRef, onKeyDown: confirmDlgKey } = useDialog(confirmDialog, () => setConfirmDialog(false));
+
   // 加载中
   if (phase === 'loading') {
     return <div className="loading"><div className="spinner"></div></div>;
   }
 
-  // PIN 屏（设置 或 解锁）
-  if (phase === 'setup' || phase === 'locked') {
   return (
+    <>
+      {/* PIN 屏（设置 或 解锁）——全屏覆盖页，非弹窗 */}
+      {phase === 'setup' || phase === 'locked' ? (
         <div className="pin-overlay">
           <div className="pin-icon"><span className="material-icons" style={{ fontSize: 40 }}>lock</span></div>
           <div style={{ fontSize: 18, fontWeight: 500 }}>
@@ -269,11 +291,8 @@ export default function Passwords() {
             </button>
           </div>
         </div>
-    );
+      ) : (
-  }
+        /* 已解锁：密码箱 */
-
-  // 已解锁：密码箱
-  return (
         <div>
           <div className="admin-header">
             <h2>已保存的密码</h2>
@@ -281,7 +300,7 @@ export default function Passwords() {
               <button className="btn btn-tonal" onClick={lockVault}>
                 <span className="material-icons">lock</span> 锁定
               </button>
-          <button className="btn btn-text" onClick={openPinDialog}>
+              <button className="btn btn-text" onClick={openPinChange}>
                 <span className="material-icons">edit</span> 修改 PIN
               </button>
               <button className="btn btn-filled" onClick={openAddDialog}>
@@ -300,14 +319,18 @@ export default function Passwords() {
           {entries && entries.length > 0 && (
             <div className="password-grid">
               {entries.map((p) => (
-            <div key={p.id} className="card password-card" onClick={() => setDetailId(p.id)}>
+                <div key={p.id} className="password-card-wrap">
+                  <button type="button" className="card password-card" onClick={() => setDetailId(p.id)}>
                     <div className="pw-title">{p.title}</div>
                     <div className="pw-username">{p.username || '无用户名'}</div>
+                  </button>
                   <div className="pw-actions">
                     <button
+                      type="button"
                       className="btn-icon"
-                  style={{ width: 32, height: 32, fontSize: 16 }}
+                      style={{ width: 40, height: 40, fontSize: 16 }}
                       title="复制密码"
+                      aria-label={`复制 ${p.title} 的密码`}
                       onClick={(e) => { e.stopPropagation(); copyToClipboard(p.password, '密码'); }}
                     >
                       <span className="material-icons" style={{ fontSize: 16 }}>content_copy</span>
@@ -317,13 +340,23 @@ export default function Passwords() {
               ))}
             </div>
           )}
+        </div>
+      )}
+
+      {/* ===== 弹窗统一挂载在顶层（setup/locked 阶段也能弹出——功能修复关键，勿移入 phase 分支） ===== */}
+      {/* 结构与论坛发帖弹窗一致：.dialog-overlay + .dialog，MD3 CSS 变量天然适配浅/深色模式 */}
 
       {/* 设置/修改 PIN 弹窗 */}
       {pinDialog && (
         <div
+          ref={pinDlgRef}
           className="dialog-overlay active"
+          role="dialog"
+          aria-modal="true"
+          aria-label="设置 PIN 码"
           style={{ display: 'flex', zIndex: 9999 }}
           onMouseDown={(e) => { if (e.target === e.currentTarget) setPinDialog(false); }}
+          onKeyDown={pinDlgKey}
         >
           <div className="dialog" style={{ maxWidth: 360 }}>
             <h3>设置 PIN 码</h3>
@@ -347,9 +380,14 @@ export default function Passwords() {
       {/* 添加/编辑条目弹窗 */}
       {pwDialog && (
         <div
+          ref={pwDlgRef}
           className="dialog-overlay active"
+          role="dialog"
+          aria-modal="true"
+          aria-label={editingId ? '编辑密码' : '添加密码'}
           style={{ display: 'flex', zIndex: 9999 }}
           onMouseDown={(e) => { if (e.target === e.currentTarget) setPwDialog(false); }}
+          onKeyDown={pwDlgKey}
         >
           <div className="dialog">
             <h3>{editingId ? '编辑密码' : '添加密码'}</h3>
@@ -387,9 +425,14 @@ export default function Passwords() {
       {/* 详情弹窗 */}
       {detailEntry && (
         <div
+          ref={detailDlgRef}
           className="dialog-overlay active"
+          role="dialog"
+          aria-modal="true"
+          aria-label={detailEntry.title}
           style={{ display: 'flex', zIndex: 9999 }}
           onMouseDown={(e) => { if (e.target === e.currentTarget) setDetailId(null); }}
+          onKeyDown={detailDlgKey}
         >
           <div className="dialog" style={{ maxWidth: 500 }}>
             <h3>{detailEntry.title}</h3>
@@ -397,16 +440,16 @@ export default function Passwords() {
               <div className="pw-field">
                 <span className="pw-label">用户名</span>
                 <span className="pw-value">{detailEntry.username || ''}</span>
-                <span className="pw-copy" onClick={() => copyToClipboard(detailEntry.username || '', '用户名')}>
+                <button type="button" className="pw-copy" aria-label="复制用户名" onClick={() => copyToClipboard(detailEntry.username || '', '用户名')}>
                   <span className="material-icons" style={{ fontSize: 18 }}>content_copy</span>
-                </span>
+                </button>
               </div>
               <div className="pw-field">
                 <span className="pw-label">密码</span>
                 <span className="pw-value">{detailEntry.password}</span>
-                <span className="pw-copy" onClick={() => copyToClipboard(detailEntry.password, '密码')}>
+                <button type="button" className="pw-copy" aria-label="复制密码" onClick={() => copyToClipboard(detailEntry.password, '密码')}>
                   <span className="material-icons" style={{ fontSize: 18 }}>content_copy</span>
-                </span>
+                </button>
               </div>
               {detailEntry.url ? (
                 <div className="pw-field">
@@ -434,7 +477,7 @@ export default function Passwords() {
 
       {/* 密码生成器弹窗 */}
       {genDialog && (
-        <div className="dialog-overlay active" style={{ display: 'flex', zIndex: 9999 }}>
+        <div ref={genDlgRef} className="dialog-overlay active" role="dialog" aria-modal="true" aria-label="生成随机密码" style={{ display: 'flex', zIndex: 9999 }} onKeyDown={genDlgKey}>
           <div className="dialog" style={{ maxWidth: 380 }}>
             <h3>生成随机密码</h3>
             <div className="form-group">
@@ -461,9 +504,23 @@ export default function Passwords() {
         </div>
       )}
 
+      {/* 修改 PIN 警告确认弹窗 */}
+      {pinChangeWarn && (
+        <div ref={warnDlgRef} className="dialog-overlay active" role="dialog" aria-modal="true" aria-label="确认修改 PIN" style={{ display: 'flex', zIndex: 9999 }} onKeyDown={warnDlgKey}>
+          <div className="dialog">
+            <h3>确认修改 PIN</h3>
+            <p style={{ marginBottom: 24, fontSize: 16 }}>⚠️ 修改 PIN 后，现有密码条目将无法解密，需要重新添加。确定继续？</p>
+            <div className="actions">
+              <button className="btn btn-text" onClick={() => setPinChangeWarn(false)}>取消</button>
+              <button className="btn btn-danger" onClick={proceedPinChange}>确定继续</button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {/* 删除确认弹窗 */}
       {confirmDialog && (
-        <div className="dialog-overlay active" style={{ display: 'flex', zIndex: 9999 }}>
+        <div ref={confirmDlgRef} className="dialog-overlay active" role="dialog" aria-modal="true" aria-label="确认操作" style={{ display: 'flex', zIndex: 9999 }} onKeyDown={confirmDlgKey}>
           <div className="dialog">
             <h3>确认操作</h3>
             <p style={{ marginBottom: 24, fontSize: 16 }}>确定删除此密码记录？</p>
@@ -474,6 +531,6 @@ export default function Passwords() {
           </div>
         </div>
       )}
-    </div>
+    </>
   );
 }

frontend/src/pages/Profile.jsx

@@ -4,7 +4,7 @@ import * as profileApi from '../api/profile.js';
 import * as authApi from '../api/auth.js';
 import { avatarUrl, uploadAvatar } from '../api/upload.js';
 import { getToken, notifyAuthChange } from '../api/client.js';
-import { showSnackbar } from '../lib/utils.js';
+import { showSnackbar, useDialog, focusDialog } from '../lib/utils.js';
 
 /** FileReader + Image 加载图片（头像裁剪前读取） */
 function loadImage(file) {
@@ -38,6 +38,13 @@ export default function Profile() {
   const [confirmPw, setConfirmPw] = useState('');
   const [pwBusy, setPwBusy] = useState(false);
 
+  // 修改密码弹窗键盘/焦点管理（B3）：Esc 关闭、聚焦首个输入、关闭后焦点还给触发按钮
+  const { dialogRef: pwDlgRef, onKeyDown: pwDlgKey } = useDialog(pwDialog, () => setPwDialog(false));
+  // 发送验证码成功切到第二步时，把焦点移到验证码输入框
+  useEffect(() => {
+    if (pwDialog && pwStep === 2) focusDialog(pwDlgRef.current);
+  }, [pwDialog, pwStep]);
+
   const load = useCallback(async () => {
     setLoading(true);
     setError('');
@@ -186,9 +193,14 @@ export default function Profile() {
       {/* 修改密码弹窗 */}
       {pwDialog && (
         <div
+          ref={pwDlgRef}
           className="dialog-overlay active"
+          role="dialog"
+          aria-modal="true"
+          aria-label="修改密码"
           style={{ display: 'flex', zIndex: 9999 }}
           onMouseDown={(e) => { if (e.target === e.currentTarget) setPwDialog(false); }}
+          onKeyDown={pwDlgKey}
         >
           <div className="dialog">
             <h3>修改密码</h3>

frontend/src/pages/Tag.jsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { getTagPosts } from '../api/blog.js';
+
+/** 摘要：优先 excerpt，否则剥离 markdown 符号截取 */
+function excerptOf(p) {
+  if (p.excerpt) return p.excerpt;
+  return (p.content || '').replace(/[#*`\[\]()>|~_]/g, '').slice(0, 200);
+}
+
+/** 标签页（路由 /tag/:name）：该标签下的文章列表，复用博客卡片样式 */
+export default function Tag() {
+  const { name } = useParams();
+  const [posts, setPosts] = useState(null);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    setPosts(null);
+    setError('');
+    getTagPosts(name)
+      .then((ps) => setPosts(ps || []))
+      .catch((e) => setError(e.message || '加载失败'));
+  }, [name]);
+
+  const displayName = name || '';
+
+  return (
+    <div className="blog-article" style={{ maxWidth: 720, margin: '0 auto' }}>
+      <Link to="/blog.html" className="btn btn-text btn-sm" style={{ marginBottom: 16 }}>
+        <span className="material-icons" style={{ fontSize: 16 }}>arrow_back</span> 返回博客
+      </Link>
+      <h1 className="article-title" style={{ fontSize: 26 }}>
+        标签：{displayName}
+        {posts && <span className="tag-title-count">（{posts.length} 篇）</span>}
+      </h1>
+
+      {!posts && !error && (
+        <div className="loading"><div className="spinner"></div></div>
+      )}
+      {error && (
+        <div className="empty-state"><div className="empty-icon">⚠️</div><p>{error}</p></div>
+      )}
+      {posts && posts.length === 0 && (
+        <div className="empty-state"><div className="empty-icon">🏷️</div><p>该标签下暂无文章</p></div>
+      )}
+      {posts && posts.length > 0 && (
+        <div className="blog-waterfall">
+          {posts.map((p) => (
+            <Link key={p.id} to={`/blog/${p.id}`} className="card blog-card" style={{ textDecoration: 'none' }}>
+              <div className="blog-featured"></div>
+              <div className="blog-title">{p.title}</div>
+              <div className="blog-excerpt">{excerptOf(p)}</div>
+              <div className="blog-meta">{p.author_name || '管理员'} · {p.created_at}</div>
+            </Link>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

frontend/src/pages/Write.jsx

@@ -17,6 +17,7 @@ export default function Write() {
 
   const [title, setTitle] = useState('');
   const [excerpt, setExcerpt] = useState('');
+  const [tags, setTags] = useState('');
   const [content, setContent] = useState('');
   const [published, setPublished] = useState(true);
   const [preview, setPreview] = useState(false);
@@ -34,6 +35,7 @@ export default function Write() {
       .then((p) => {
         setTitle(p.title);
         setExcerpt(p.excerpt || '');
+        setTags(p.tags || '');
         setContent(p.content);
         setPublished(!!p.published);
       })
@@ -76,6 +78,7 @@ export default function Write() {
       title: title.trim(),
       content: content.trim(),
       excerpt: excerpt.trim(),
+      tags: tags.trim(),
       published,
       use_markdown: 1,
     };
@@ -123,6 +126,11 @@ export default function Write() {
               <label>摘要</label>
               <input type="text" value={excerpt} onChange={(e) => setExcerpt(e.target.value)} placeholder="简短摘要" />
             </div>
+            <div className="form-group">
+              <label>标签</label>
+              <input type="text" value={tags} onChange={(e) => setTags(e.target.value)} placeholder="多个标签用英文逗号分隔，如：技术,生活,随笔" />
+              <div className="text-muted" style={{ fontSize: 12, marginTop: 4 }}>多个标签用英文逗号分隔，用于标签云与标签页</div>
+            </div>
             <div className="form-group">
               <label>内容 *</label>
               <textarea

frontend/src/tools/workbench/Workbench.jsx

@@ -0,0 +1,799 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import CloseIcon from '@mui/icons-material/Close';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import ErrorIcon from '@mui/icons-material/Error';
+import LockIcon from '@mui/icons-material/Lock';
+import HomeIcon from '@mui/icons-material/Home';
+import WidgetsIcon from '@mui/icons-material/Widgets';
+import AddIcon from '@mui/icons-material/Add';
+import SearchIcon from '@mui/icons-material/Search';
+import ViewSidebarIcon from '@mui/icons-material/ViewSidebar';
+import TerminalIcon from '@mui/icons-material/Terminal';
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
+import SettingsIcon from '@mui/icons-material/Settings';
+import { Group, Panel, Separator } from 'react-resizable-panels';
+import { useTheme } from '@mui/material/styles';
+import {
+  DndContext, DragOverlay, PointerSensor, useSensor, useSensors, closestCenter,
+} from '@dnd-kit/core';
+import { getToken } from '../../api/client.js';
+import { me } from '../../api/auth.js';
+import usePanels from './hooks/usePanels.js';
+import useWorkbenchLayout, {
+  VIEWS, VIEW_IDS, VIEW_MODE_SIDEBAR, VIEW_MODE_TAB,
+} from './hooks/useWorkbenchLayout.js';
+import Toolbar from './components/Toolbar.jsx';
+import PanelsView from './components/Sidebar.jsx';
+import NotesView from './components/NoteEditor.jsx';
+import VaultView from './components/VaultDrawer.jsx';
+import SidebarPane from './components/SidebarPane.jsx';
+import ActivityBar from './components/ActivityBar.jsx';
+import CollapseArrow from './components/CollapseArrow.jsx';
+import ToolWindow from './components/ToolWindow.jsx';
+import TabStrip from './components/TabStrip.jsx';
+import ContentView from './components/ContentView.jsx';
+import StatusBar from './components/StatusBar.jsx';
+import PanelFrame from './components/PanelFrame.jsx';
+import AddPanelDialog from './components/AddPanelDialog.jsx';
+import PanelIcon from './components/PanelIcon.jsx';
+import SnackHost, { showSnack } from '../../admin/snack.jsx';
+
+/* ============================================================
+ * Workbench：工作台页面（VSCode 风格改造，Lane A）
+ *
+ * 布局（react-resizable-panels，v4 API：Group/Panel/Separator）：
+ *   顶栏 56 | 活动栏48 侧栏(可拖 180-360,可折叠) 主区(标签+内容+底部终端) 侧栏 活动栏48 | 状态栏 24
+ * - 左侧活动栏=主控视图（面板），右侧=功能视图（记事本/密码箱）+ 底部终端按钮
+ * - dnd-kit：视图标签可在左右活动栏之间拖拽换边（workbench.viewOrder 持久化）
+ * - 视图双模式：侧边栏（默认）/ 标签页（进主区 TabStrip）；浮动为 P2 占位
+ * - 面板 iframe 仍走 PanelFrame（LRU 3），弹窗方式走 Dialog
+ * ============================================================ */
+
+const LAYOUT_KEY = 'workbench.layout';
+const MAIN_ACTIVE_KEY = 'workbench.mainActive'; // 主区激活标签（刷新后恢复上次激活项）
+
+/** 侧边栏默认宽度（px）：箭头/活动栏图标展开时的目标宽度 */
+const SIDEBAR_DEFAULT_WIDTH = { left: 240, right: 300 };
+/** 视为「已折叠」的宽度阈值（px）。RRP v4 isCollapsed 用零容差比较（尺寸必须精确等于 0），
+ *  布局归一化把面板挤到亚像素宽度时会误判为「未折叠」，导致 expand() 失效、侧栏卡死。
+ *  右侧栏是布局末尾的柔性面板最易被挤压，因此用阈值 + resize() 兜底。 */
+const SIDEBAR_COLLAPSED_PX = 24;
+
+function persistMainActive(key) {
+  try {
+    if (key) localStorage.setItem(MAIN_ACTIVE_KEY, key);
+    else localStorage.removeItem(MAIN_ACTIVE_KEY);
+  } catch { /* 隐私模式忽略 */ }
+}
+
+/** 布局持久化：{left, main, right} 三栏百分比（0-100），活动栏固定 48px 不入库 */
+function readLayout() {
+  try {
+    const raw = localStorage.getItem(LAYOUT_KEY);
+    const a = raw ? JSON.parse(raw) : null;
+    if (!a || typeof a !== 'object') return null;
+    return {
+      left: Number(a.left) || 0,
+      main: Number(a.main) || 0,
+      right: Number(a.right) || 0,
+    };
+  } catch { return null; }
+}
+
+function writeLayout(v) {
+  try { localStorage.setItem(LAYOUT_KEY, JSON.stringify(v)); } catch { /* 隐私模式忽略 */ }
+}
+
+function AdminGuard({ children }) {
+  const [state, setState] = useState('checking'); // checking | denied | ok
+
+  useEffect(() => {
+    if (!getToken()) { window.location.href = '/login.html'; return; }
+    me()
+      .then((u) => {
+        if (u.role !== 'admin') setState('denied');
+        else setState('ok');
+      })
+      .catch(() => { window.location.href = '/login.html'; });
+  }, []);
+
+  if (state === 'checking') {
+    return (
+      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100vh' }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+  if (state === 'denied') {
+    return (
+      <Box
+        sx={{
+          height: '100vh', display: 'flex', flexDirection: 'column',
+          alignItems: 'center', justifyContent: 'center', gap: 2, px: 3, textAlign: 'center',
+        }}
+      >
+        <LockIcon sx={{ fontSize: 48, color: 'error.main' }} />
+        <Typography variant="h6">需要管理员权限</Typography>
+        <Typography variant="body2" sx={{ color: 'text.secondary', maxWidth: 360 }}>
+          面板工作台仅对管理员开放。如需使用，请使用管理员账号登录，或返回前台。
+        </Typography>
+        <Box sx={{ display: 'flex', gap: 1 }}>
+          <Button variant="outlined" startIcon={<HomeIcon />} href="/">返回前台</Button>
+          <Button variant="contained" href="/login.html">重新登录</Button>
+        </Box>
+      </Box>
+    );
+  }
+  return children;
+}
+
+function EmptyState({ icon, title, hint, action, onAction }) {
+  return (
+    <Box
+      sx={{
+        flex: 1, display: 'flex', flexDirection: 'column',
+        alignItems: 'center', justifyContent: 'center', gap: 1.5, px: 3, textAlign: 'center',
+      }}
+    >
+      {icon}
+      <Box>
+        <Typography sx={{ fontWeight: 600, mb: 0.5 }}>{title}</Typography>
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>{hint}</Typography>
+      </Box>
+      {action && <Button variant="contained" startIcon={<AddIcon />} onClick={onAction}>{action}</Button>}
+    </Box>
+  );
+}
+
+function AboutDialog({ open, onClose }) {
+  return (
+    <Dialog open={open} onClose={onClose} maxWidth="xs">
+      <DialogTitle>关于 Rain Work</DialogTitle>
+      <DialogContent>
+        <Typography variant="body2" sx={{ mb: 1 }}>
+          Rain Work 工作台 v2.1.0 — 管理面板、记事本、密码箱与终端的一体化工作区。
+        </Typography>
+        <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+          终端为管理员 Root Shell，需单独设置终端密码；记事本文件保存在服务器 workspace 目录；
+          面板可拖拽到左右任一活动栏按你的习惯排布。
+        </Typography>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>关闭</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+/** 面板分隔条：可拖拽 = 4px 命中区 + 悬停高亮；不可拖拽 = 1px 细线 */
+function ResizeSeparator({ disabled = false }) {
+  const muiTheme = useTheme();
+  const [hover, setHover] = useState(false);
+  return (
+    <Separator
+      disabled={disabled}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      style={{
+        width: disabled ? 1 : 4,
+        background: hover ? muiTheme.palette.primary.main : 'transparent',
+        transition: 'background .12s ease',
+      }}
+    />
+  );
+}
+
+function WorkbenchContent() {
+  const panels = usePanels();
+  const layout = useWorkbenchLayout();
+  const {
+    links, loadError, reload,
+    openPanels, renderedIds,
+    activeId, activePanel, modalPanel, closeModal,
+    canBack, canForward, goBack, goForward,
+    openPanel, closePanel, togglePin, toggleGroup, setMode,
+    pinned, groups, modes,
+    search, setSearch, filteredPanels, openFirstMatch,
+  } = panels;
+
+  const [addOpen, setAddOpen] = useState(false);
+  const [aboutOpen, setAboutOpen] = useState(false);
+  const [mainRefresh, setMainRefresh] = useState(0);
+  const [modalRefresh, setModalRefresh] = useState(0);
+  // 主区激活标签：同步从 localStorage 恢复（workbench.mainActive），刷新后回到上次激活项
+  const mainActiveInit = useRef(null);
+  const [activeMainKey, setActiveMainKey] = useState(() => {
+    let v = null;
+    try { v = localStorage.getItem(MAIN_ACTIVE_KEY); } catch { /* ignore */ }
+    mainActiveInit.current = v;
+    return v;
+  });
+  const [activeDrag, setActiveDrag] = useState(null); // dnd overlay {id,label}
+  const searchRef = useRef(null);
+
+  // ---- react-resizable-panels 引用 ----
+  const groupRef = useRef(null);
+  const mainRef = useRef(null);   // 主面板（始终 ≥minSize 可见），用作 setLayout 像素↔百分比换算探针
+  const leftRef = useRef(null);
+  const rightRef = useRef(null);
+
+  const savedLayout = useRef(readLayout());
+  // 侧边栏折叠状态（供折叠箭头方向/语义；拖拽折叠也会经 onResize 同步）
+  const [leftCollapsed, setLeftCollapsed] = useState(
+    () => !!savedLayout.current && savedLayout.current.left === 0
+  );
+  const [rightCollapsed, setRightCollapsed] = useState(
+    () => !!savedLayout.current && savedLayout.current.right === 0
+  );
+  // v4 布局为 { PanelId: 百分比 }；活动栏有 min/max 48px 硬约束，传多少都会被钳回 48
+  const defaultLayout = savedLayout.current
+    ? {
+        'activity-l': 3,
+        'sidebar-l': Math.max(0, Math.min(40, savedLayout.current.left)),
+        // main 上限 75%：防止恢复时主区过大挤压两侧栏（右侧栏在布局末尾最易被挤到亚像素卡死）
+        main: Math.max(20, Math.min(75, savedLayout.current.main)),
+        'sidebar-r': Math.max(0, Math.min(40, savedLayout.current.right)),
+        'activity-r': 3,
+      }
+    : undefined;
+
+  const persistLayout = useCallback((l) => {
+    const v = (id) => Math.round(l?.[id] ?? 0);
+    writeLayout({ left: v('sidebar-l'), main: v('main'), right: v('sidebar-r') });
+  }, []);
+
+  /** 立即保存布局（折叠/展开等程序化变更时兜底，拖拽走 onLayoutChanged） */
+  const saveLayoutNow = useCallback(() => {
+    try { persistLayout(groupRef.current?.getLayout()); } catch { /* 布局尚未就绪 */ }
+  }, [persistLayout]);
+
+  // 拖拽期间 onLayoutChanged 高频触发：200ms 防抖后再写 localStorage，避免阻塞主线程
+  const layoutTimer = useRef(null);
+  const handleLayoutChanged = useCallback((layout, { isUserInteraction }) => {
+    if (!isUserInteraction) return;
+    clearTimeout(layoutTimer.current);
+    layoutTimer.current = setTimeout(() => persistLayout(layout), 200);
+  }, [persistLayout]);
+
+  useEffect(() => () => clearTimeout(layoutTimer.current), []);
+
+  /** 程序化调整侧边栏宽度：走 groupRef.setLayout() 整体替换布局。
+   *  不能再依赖 ref.collapse()/resize()/expand()——RRP 命令式 API 按 pivot 相邻面板分配
+   *  delta，右侧栏的右邻 activity-r 是刚性面板（minSize=maxSize=48px），delta 被其 clamp
+   *  全部吸收 → 布局不变 → 静默 no-op；拖拽走 Separator（邻面板 main 柔性）所以只有拖拽有效。
+   *  setLayout() 不走 pivot：K() 直接归一化 + 逐面板 clamp，目标尺寸落在目标面板上。 */
+  const applySidebarSize = useCallback((side, targetPx) => {
+    const group = groupRef.current;
+    if (!group) return;
+    const cur = group.getLayout();
+    // defaultLayoutDeferred 期间 getLayout() 返回 {}，setLayout 也不应用——直接跳过
+    if (!cur || Object.keys(cur).length === 0) return;
+    // 用任一可见面板换算组宽度：groupPx = inPixels / (asPercentage/100)
+    let groupPx = 0;
+    for (const probe of [mainRef.current, rightRef.current, leftRef.current]) {
+      try {
+        const g = probe?.getSize();
+        if (g && g.inPixels > 0 && g.asPercentage > 0) {
+          groupPx = g.inPixels / (g.asPercentage / 100);
+          break;
+        }
+      } catch { /* 面板尚未就绪 */ }
+    }
+    const id = side === 'left' ? 'sidebar-l' : 'sidebar-r';
+    if (groupPx > 0) {
+      group.setLayout({ ...cur, [id]: (targetPx / groupPx) * 100 });
+    } else if (targetPx === 0) {
+      group.setLayout({ ...cur, [id]: 0 }); // 折叠：无法换算也直接置 0
+    } else {
+      group.setLayout({ ...cur, [id]: side === 'left' ? 20 : 25 }); // 退化固定百分比，K 的 clamp 兜底
+    }
+  }, []);
+
+  const toggleSidebar = useCallback((side) => {
+    // 用状态（阈值判定）而非 ref.isCollapsed()：RRP 零容差比较在亚像素宽度下会误判
+    const collapsed = side === 'left' ? leftCollapsed : rightCollapsed;
+    applySidebarSize(side, collapsed ? SIDEBAR_DEFAULT_WIDTH[side] : 0);
+    setTimeout(saveLayoutNow, 0); // setLayout 的 onLayoutChanged 不带 isUserInteraction，须手动兜底写盘
+  }, [leftCollapsed, rightCollapsed, applySidebarSize, saveLayoutNow]);
+
+  // ---- 视图（活动栏 / 侧栏 / 标签页） ----
+  const leftActive = layout.activeViewOf('left');
+  const rightActive = layout.activeViewOf('right');
+  const leftBarViews = layout.order.left.map((id) => VIEWS[id]).filter(Boolean);
+  const rightBarViews = layout.order.right.map((id) => VIEWS[id]).filter(Boolean);
+  // 侧栏只渲染 sidebar 模式的视图（tab 模式的进主区标签页）
+  const leftPaneViews = leftBarViews.filter((v) => layout.mode[v.id] === VIEW_MODE_SIDEBAR);
+  const rightPaneViews = rightBarViews.filter((v) => layout.mode[v.id] === VIEW_MODE_SIDEBAR);
+
+  const isViewActive = (vid) => {
+    if (layout.mode[vid] === VIEW_MODE_TAB) return effectiveActiveKey === 'view:' + vid;
+    const side = layout.sideOf[vid];
+    return side ? layout.activeViewOf(side) === vid : false;
+  };
+
+  /** 主区标签列表（每次渲染重建，保证 render() 闭包拿到最新状态） */
+  const buildMainTabs = () => {
+    const tabs = [];
+    openPanels.forEach((p) => {
+      tabs.push({
+        key: 'panel:' + p.id,
+        type: 'panel',
+        title: p.title,
+        closable: true,
+        icon: <PanelIcon url={p.embed_url || p.url} title={p.title} size={14} />,
+        panel: p,
+      });
+    });
+    VIEW_IDS.forEach((id) => {
+      if (layout.mode[id] !== VIEW_MODE_TAB) return;
+      const v = VIEWS[id];
+      tabs.push({
+        key: 'view:' + id,
+        type: id,
+        title: v.label,
+        closable: true,
+        icon: <v.Icon sx={{ fontSize: 14, color: 'text.secondary' }} />,
+        render: () => renderViewContent(id),
+      });
+    });
+    return tabs;
+  };
+
+  // 视图内容渲染（先定义：buildMainTabs / renderPaneView 均依赖）
+  const renderViewContent = (viewId) => {
+    if (viewId === 'panels') {
+      return (
+        <PanelsView
+          loading={links === null && !loadError}
+          error={loadError}
+          onRetry={reload}
+          links={links || []}
+          filtered={filteredPanels}
+          search={search}
+          activeId={activeId}
+          pinned={pinned}
+          onSelect={openPanel}
+          onPin={togglePin}
+          groups={groups}
+          onToggleGroup={toggleGroup}
+          modes={modes}
+          onSetMode={setMode}
+          onAdd={() => setAddOpen(true)}
+        />
+      );
+    }
+    if (viewId === 'notes') return <NotesView />;
+    if (viewId === 'vault') return <VaultView open={isViewActive('vault')} />;
+    return null;
+  };
+
+  const mainTabs = buildMainTabs();
+  // 活动主标签：优先记住的用户选择（含持久化的上次激活项），失效则回退到第一个
+  const effectiveActiveKey = mainTabs.some((t) => t.key === activeMainKey)
+    ? activeMainKey
+    : (mainTabs[0]?.key ?? null);
+
+  // 打开面板 / 历史导航时自动切到对应 iframe 标签。
+  // 首次挂载若已有持久化激活项（可能指向 tab 模式视图）则尊重它，只消费一次；
+  // 之后每次 activeId 变化都同步并持久化。
+  useEffect(() => {
+    if (activeId == null) return;
+    if (mainActiveInit.current) { mainActiveInit.current = null; return; }
+    const key = 'panel:' + activeId;
+    setActiveMainKey(key);
+    persistMainActive(key);
+  }, [activeId]);
+
+  const panelRenderKeys = new Set(renderedIds.map((id) => 'panel:' + id));
+
+  const handleSelectTab = (key) => {
+    setActiveMainKey(key);
+    persistMainActive(key);
+    if (key.startsWith('panel:')) openPanel(key.slice('panel:'.length));
+  };
+  const handleCloseTab = (key) => {
+    if (key.startsWith('panel:')) closePanel(key.slice('panel:'.length));
+    else if (key.startsWith('view:')) setViewModeSafely(key.slice('view:'.length), VIEW_MODE_SIDEBAR);
+  };
+
+  /** 侧边栏 Panel onResize：阈值判定折叠状态（拖拽折叠/亚像素挤压都覆盖） */
+  const onSidebarResize = useCallback((side) => (size) => {
+    const px = size && typeof size === 'object' ? size.inPixels : size;
+    const collapsed = px < SIDEBAR_COLLAPSED_PX;
+    if (side === 'left') setLeftCollapsed(collapsed);
+    else setRightCollapsed(collapsed);
+  }, []);
+
+  const categories = [...new Set((links || []).map((p) => p.category || '默认'))];
+
+  const handleOpenExternal = () => {
+    if (activePanel) window.open(activePanel.embed_url || activePanel.url, '_blank', 'noopener');
+  };
+
+  const handleSaved = (panel) => {
+    showSnack(`已添加「${panel.title}」`);
+    setAddOpen(false);
+    reload().then(() => openPanel(panel.id, panel));
+  };
+
+  /** 模式切换入口：切换前派发保存事件（记事本立即 flush 未落盘草稿），再切模式 */
+  const setViewModeSafely = useCallback((viewId, mode) => {
+    if (viewId === 'notes') {
+      try { window.dispatchEvent(new CustomEvent('workbench:notes-save-request')); } catch { /* ignore */ }
+    }
+    layout.setViewMode(viewId, mode);
+  }, [layout]);
+
+  /** 侧栏内单个视图：ToolWindow 标题栏 + 内容 */
+  const renderPaneView = (viewId) => {
+    const v = VIEWS[viewId];
+    const VIcon = v.Icon;
+    return (
+      <>
+        <ToolWindow
+          icon={<VIcon sx={{ fontSize: 17, color: 'primary.main' }} />}
+          title={v.label}
+          mode={layout.mode[viewId]}
+          onSetMode={(m) => setViewModeSafely(viewId, m)}
+          onFloat={() => showSnack('浮动模式即将上线', 'info')}
+          closeTitle="关闭侧边栏"
+          onClose={() => {
+            // X = 关闭整个侧边栏（折叠到 0 宽度），活动栏图标仍可重新展开
+            const side = layout.sideOf[viewId];
+            toggleSidebar(side);
+          }}
+        />
+        <Box sx={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+          {renderViewContent(viewId)}
+        </Box>
+      </>
+    );
+  };
+
+  const renderPlaceholder = (side) => {
+    const vid = layout.activeViewOf(side);
+    const v = VIEWS[vid];
+    if (!v) return null;
+    return (
+      <>
+        <v.Icon sx={{ fontSize: 28, color: 'text.disabled' }} />
+        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+          「{v.label}」已在标签页中打开
+        </Typography>
+        <Button size="small" variant="outlined" onClick={() => setViewModeSafely(vid, VIEW_MODE_SIDEBAR)}>
+          移回侧边栏
+        </Button>
+      </>
+    );
+  };
+
+  /** 活动栏图标点击：激活视图 + 展开侧栏；已激活则收起（VSCode 语义） */
+  const handleActivateView = (viewId, side) => {
+    const collapsed = side === 'left' ? leftCollapsed : rightCollapsed;
+    const alreadyActive = layout.activeViewOf(side) === viewId;
+    setViewModeSafely(viewId, VIEW_MODE_SIDEBAR);
+    layout.activateView(viewId);
+    // setLayout 整体替换：展开到默认宽度 / 折叠到 0，绕开 pivot 刚性邻居吸收问题
+    if (alreadyActive && !collapsed) applySidebarSize(side, 0);
+    else applySidebarSize(side, SIDEBAR_DEFAULT_WIDTH[side]);
+    setTimeout(saveLayoutNow, 0);
+  };
+
+  // ---- 菜单栏配置 ----
+  const menus = [
+    {
+      label: '文件', items: [
+        { label: '添加面板…', Icon: AddIcon, action: () => setAddOpen(true) },
+        { label: '刷新面板列表', Icon: RefreshIcon, action: () => reload() },
+        { divider: true },
+        { label: '返回前台', Icon: HomeIcon, action: () => { window.location.href = '/'; } },
+      ],
+    },
+    {
+      label: '编辑', items: [
+        { label: '搜索面板', Icon: SearchIcon, action: () => searchRef.current?.focus() },
+        { label: '刷新当前面板', Icon: RefreshIcon, action: () => { if (activePanel) setMainRefresh((n) => n + 1); } },
+      ],
+    },
+    {
+      label: '视图', items: [
+        { label: '切换左侧边栏', Icon: ViewSidebarIcon, action: () => toggleSidebar('left') },
+        { label: '切换右侧边栏', Icon: ViewSidebarIcon, action: () => toggleSidebar('right') },
+        { divider: true },
+        ...VIEW_IDS.map((id) => ({
+          label: VIEWS[id].label,
+          Icon: VIEWS[id].Icon,
+          action: () => { setViewModeSafely(id, VIEW_MODE_SIDEBAR); layout.activateView(id); },
+        })),
+      ],
+    },
+    {
+      label: '终端', items: [
+        // 终端功能临时下线（TerminalPanel 已归档到 archive/），保留占位提示，后续恢复
+        { label: '终端功能即将回归', Icon: TerminalIcon },
+      ],
+    },
+    {
+      label: '帮助', items: [
+        { label: '关于工作台', Icon: InfoOutlinedIcon, action: () => setAboutOpen(true) },
+        { label: '管理后台', Icon: SettingsIcon, action: () => { window.location.href = '/admin/dashboard'; } },
+      ],
+    },
+  ];
+
+  // ---- dnd-kit 拖拽（活动栏标签换边 / 同侧排序；键盘操作走 Tab+Enter 激活） ----
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } })
+  );
+  const handleDragStart = (event) => {
+    const id = String(event.active.id);
+    if (!id.startsWith('view:')) return;
+    const v = VIEWS[id.slice('view:'.length)];
+    if (v) setActiveDrag({ id: v.id, label: v.label, Icon: v.Icon });
+  };
+  const handleDragEnd = (event) => {
+    setActiveDrag(null);
+    const { active, over } = event;
+    if (!over) return;
+    const vid = String(active.id).replace(/^view:/, '');
+    if (!VIEWS[vid]) return;
+    const overStr = String(over.id);
+    if (overStr.startsWith('activity:')) {
+      const side = overStr.slice('activity:'.length);
+      layout.moveView(vid, side);
+    } else if (overStr.startsWith('view:')) {
+      const overVid = overStr.slice('view:'.length);
+      const mySide = layout.sideOf[vid];
+      const overSide = layout.sideOf[overVid];
+      if (mySide && overSide && mySide === overSide) layout.reorderView(vid, overVid);
+      else if (overSide) layout.moveView(vid, overSide);
+    }
+  };
+
+  // ---- 主区内容（加载/错误/空态；有标签时一律走 ContentView 分发） ----
+  let mainBody;
+  if (links === null && !loadError) {
+    mainBody = (
+      <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <CircularProgress size={36} />
+      </Box>
+    );
+  } else if (loadError) {
+    mainBody = (
+      <EmptyState
+        icon={<ErrorIcon sx={{ fontSize: 44, color: 'error.main' }} />}
+        title="面板列表加载失败"
+        hint={loadError}
+        action="重试"
+        onAction={reload}
+      />
+    );
+  } else if (mainTabs.length === 0 && links.length === 0) {
+    mainBody = (
+      <EmptyState
+        icon={<WidgetsIcon sx={{ fontSize: 44, color: 'primary.main' }} />}
+        title="还没有任何面板"
+        hint="添加常用后台 / 监控 / 工具站到工作台，一个界面全部打开"
+        action="添加第一个面板"
+        onAction={() => setAddOpen(true)}
+      />
+    );
+  } else if (mainTabs.length === 0) {
+    mainBody = (
+      <EmptyState
+        icon={<WidgetsIcon sx={{ fontSize: 44, color: 'text.disabled' }} />}
+        title="未打开面板"
+        hint="从左侧选择一个面板开始，或搜索后按 Enter 直达"
+        action="打开一个面板"
+        onAction={() => { if (filteredPanels[0]) openPanel(filteredPanels[0].id); }}
+      />
+    );
+  } else {
+    mainBody = (
+      <ContentView
+        tabs={mainTabs}
+        activeKey={effectiveActiveKey}
+        refreshNonce={mainRefresh}
+        panelRenderKeys={panelRenderKeys}
+      />
+    );
+  }
+
+  return (
+    <>
+      <Toolbar
+        menus={menus}
+        canBack={canBack}
+        canForward={canForward}
+        onBack={goBack}
+        onForward={goForward}
+        onRefresh={() => { if (activePanel) setMainRefresh((n) => n + 1); }}
+        currentPanel={activePanel}
+        onOpenExternal={handleOpenExternal}
+        search={search}
+        onSearchChange={setSearch}
+        onSearchEnter={() => {
+          if (!openFirstMatch() && search.trim()) showSnack('未找到匹配的面板', 'info');
+        }}
+        searchInputRef={searchRef}
+        onBackHome={() => { window.location.href = '/'; }}
+      />
+
+      <DndContext
+        sensors={sensors}
+        collisionDetection={closestCenter}
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
+        onDragCancel={() => setActiveDrag(null)}
+      >
+        <Group
+          orientation="horizontal"
+          defaultLayout={defaultLayout}
+          onLayoutChanged={handleLayoutChanged}
+          groupRef={groupRef}
+          style={{ flex: 1, minHeight: 0, display: 'flex' }}
+        >
+          {/* 左侧活动栏 */}
+          <Panel id="activity-l" defaultSize={48} minSize={48} maxSize={48}>
+            <ActivityBar
+              side="left"
+              views={leftBarViews}
+              activeId={leftActive}
+              onActivate={(id) => handleActivateView(id, 'left')}
+            />
+          </Panel>
+          <ResizeSeparator disabled />
+          {/* 左侧侧边栏 */}
+          <Panel id="sidebar-l" defaultSize={240} minSize={180} maxSize={360} collapsible collapsedSize={0} panelRef={leftRef} onResize={onSidebarResize('left')}>
+            <SidebarPane
+              side="left"
+              views={leftPaneViews}
+              activeId={leftActive}
+              renderView={renderPaneView}
+              renderPlaceholder={() => renderPlaceholder('left')}
+            />
+          </Panel>
+          <ResizeSeparator />
+          {/* 主区：标签条 + 内容 + 底部终端 */}
+          <Panel id="main" minSize={320} panelRef={mainRef}>
+            {/* 注意：RRP Panel 内容容器是 block 布局（maxHeight:100% + flexGrow:1），
+                这里必须用 height:'100%' 而非 flex:1，否则高度塌陷导致内容挤顶部 */}
+            <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', minWidth: 0, overflow: 'hidden', position: 'relative' }}>
+              {mainTabs.length > 0 && (
+                <TabStrip
+                  tabs={mainTabs}
+                  activeKey={effectiveActiveKey}
+                  onSelect={handleSelectTab}
+                  onClose={handleCloseTab}
+                  onAdd={() => setAddOpen(true)}
+                />
+              )}
+              <Box sx={{ flex: 1, minHeight: 0, display: 'flex', position: 'relative', overflow: 'hidden' }}>
+                {mainBody}
+              </Box>
+              {/* 侧边栏折叠箭头：贴主区整高的边缘（即侧边栏与主区 Separator 位置）垂直居中，
+                  折叠为 0 后主区仍在 → 箭头始终可点，支持再点击展开 */}
+              <CollapseArrow side="left" collapsed={leftCollapsed} onToggle={() => toggleSidebar('left')} />
+              <CollapseArrow side="right" collapsed={rightCollapsed} onToggle={() => toggleSidebar('right')} />
+            </Box>
+          </Panel>
+          <ResizeSeparator />
+          {/* 右侧侧边栏 */}
+          <Panel id="sidebar-r" defaultSize={300} minSize={200} maxSize={480} collapsible collapsedSize={0} panelRef={rightRef} onResize={onSidebarResize('right')}>
+            <SidebarPane
+              side="right"
+              views={rightPaneViews}
+              activeId={rightActive}
+              renderView={renderPaneView}
+              renderPlaceholder={() => renderPlaceholder('right')}
+            />
+          </Panel>
+          <ResizeSeparator disabled />
+          {/* 右侧活动栏 */}
+          <Panel id="activity-r" defaultSize={48} minSize={48} maxSize={48}>
+            <ActivityBar
+              side="right"
+              views={rightBarViews}
+              activeId={rightActive}
+              onActivate={(id) => handleActivateView(id, 'right')}
+            />
+          </Panel>
+        </Group>
+
+        {/* 拖拽浮层（纯展示，禁止渲染 useSortable 组件） */}
+        <DragOverlay dropAnimation={null}>
+          {activeDrag ? (
+            <Box
+              sx={{
+                px: 1.25, py: 1, borderRadius: 2,
+                bgcolor: 'background.paper', border: 1, borderColor: 'primary.main',
+                boxShadow: (t) => t.shadows[6],
+                display: 'flex', alignItems: 'center', gap: 1,
+                fontSize: 12.5, fontWeight: 600,
+              }}
+            >
+              <activeDrag.Icon sx={{ fontSize: 16, color: 'primary.main' }} />
+              {activeDrag.label}
+            </Box>
+          ) : null}
+        </DragOverlay>
+      </DndContext>
+
+      <StatusBar left={`已打开 ${openPanels.length} 个面板${activePanel ? ` · ${activePanel.title}` : ''}`} />
+
+      <AddPanelDialog
+        open={addOpen}
+        onClose={() => setAddOpen(false)}
+        categories={categories}
+        onSaved={handleSaved}
+        onSetMode={setMode}
+      />
+
+      {/* 弹窗打开方式：Dialog 内嵌 PanelFrame */}
+      {modalPanel && (
+        <Dialog
+          open
+          fullWidth
+          maxWidth="lg"
+          onClose={closeModal}
+          sx={{ '& .MuiDialog-paper': { height: '85vh', maxHeight: '85vh' } }}
+        >
+          <DialogTitle sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 1.5, pr: 1 }}>
+            <PanelIcon url={modalPanel.embed_url || modalPanel.url} title={modalPanel.title} size={22} />
+            <Typography noWrap sx={{ flex: 1, fontSize: 16, fontWeight: 500 }}>
+              {modalPanel.title}
+            </Typography>
+            <Tooltip title="在新标签页打开">
+              <IconButton
+                size="small"
+                onClick={() => window.open(modalPanel.embed_url || modalPanel.url, '_blank', 'noopener')}
+              >
+                <OpenInNewIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+            <Tooltip title="刷新">
+              <IconButton size="small" onClick={() => setModalRefresh((n) => n + 1)}>
+                <RefreshIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
+            <IconButton size="small" onClick={closeModal} aria-label="关闭弹窗">
+              <CloseIcon fontSize="small" />
+            </IconButton>
+          </DialogTitle>
+          <DialogContent sx={{ p: 0, display: 'flex', flex: 1, minHeight: 0 }}>
+            <PanelFrame panel={modalPanel} active refreshNonce={modalRefresh} />
+          </DialogContent>
+        </Dialog>
+      )}
+
+      <AboutDialog open={aboutOpen} onClose={() => setAboutOpen(false)} />
+      <SnackHost />
+    </>
+  );
+}
+
+export default function Workbench() {
+  return (
+    <AdminGuard>
+      <Box
+        sx={{
+          display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden',
+          bgcolor: 'background.default',
+        }}
+      >
+        <WorkbenchContent />
+      </Box>
+    </AdminGuard>
+  );
+}

frontend/src/tools/workbench/archive/TerminalPanel.jsx

@@ -0,0 +1,752 @@
+import React, {
+  forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState,
+} from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import CircularProgress from '@mui/material/CircularProgress';
+import AddIcon from '@mui/icons-material/Add';
+import CloseIcon from '@mui/icons-material/Close';
+import LockIcon from '@mui/icons-material/Lock';
+import LockOpenIcon from '@mui/icons-material/LockOpen';
+import ErrorIcon from '@mui/icons-material/Error';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import TerminalIcon from '@mui/icons-material/Terminal';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import Stack from '@mui/material/Stack';
+import { useTheme } from '@mui/material/styles';
+import { Terminal } from '@xterm/xterm';
+import '@xterm/xterm/css/xterm.css';
+import { FitAddon } from '@xterm/addon-fit';
+import { Unicode11Addon } from '@xterm/addon-unicode11';
+import { terminalStatus, terminalAuth } from '../../../api/terminal.js';
+import { showSnack } from '../../../admin/snack.jsx';
+
+/* ============================================================
+ * TerminalPanel：底部终端面板（xterm.js v6）
+ *
+ * 安全门禁（后端 routes/terminal.js 契约）：
+ *   /api/terminal/status → hasPin ? /api/terminal/auth(pin) → 短 TTL token
+ *   → ws(s)://host/ws/terminal?token=…（Root shell，admin + 终端密码双认证）
+ *
+ * - 最多 3 个会话（标签页切换，keep-alive：display 显隐不销毁）
+ * - 消息协议：输入/输出二进制；控制 JSON {type:'auth'|'resize'|'ping'|'bye'}
+ * - 断线指数退避重连 [250,500,1000,2000,4000,8000]，恢复后 term.reset()
+ * - 关闭码：4001 token 过期→回 PIN 门；1013/503 会话满；1011 node-pty 不可用；
+ *   1000(exit)/4000(空闲) 为服务端主动终止→会话结束，需用户显式「重新连接」
+ *   （不自动重生 root shell）；仅 1006 等网络异常自动重连
+ * - CJK 必装 unicode11，字体栈 JetBrains Mono + Noto Sans Mono CJK SC
+ * - 明暗主题由 MUI MD3 palette 派生，随 data-theme 切换自动更新
+ * ============================================================ */
+
+const MAX_SESSIONS = 3;
+const BACKOFF = [250, 500, 1000, 2000, 4000, 8000];
+const PING_MS = 30000;
+const TOKEN_MARGIN_MS = 4 * 60 * 1000; // 5 分钟 TTL，提前 1 分钟视为过期
+const FONT = '"JetBrains Mono","Noto Sans Mono CJK SC","Microsoft YaHei",monospace';
+
+/* ---------- 颜色工具（由 MD3 palette 派生，不硬编码） ---------- */
+function hexToRgb(hex) {
+  let h = String(hex).replace('#', '');
+  if (h.length === 3) h = h.split('').map((c) => c + c).join('');
+  if (!/^[0-9a-f]{6}$/i.test(h)) return [128, 128, 128];
+  const n = parseInt(h, 16);
+  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+function mixHex(a, b, w) {
+  const ca = hexToRgb(a);
+  const cb = hexToRgb(b);
+  return `#${ca.map((v, i) => Math.round(v + (cb[i] - v) * w).toString(16).padStart(2, '0')).join('')}`;
+}
+
+function xtermTheme(muiTheme) {
+  const p = muiTheme.palette;
+  const dark = p.mode === 'dark';
+  const bg = p.background.paper;
+  const black = mixHex(p.text.primary, bg, 0.6);
+  const brightBlack = mixHex(p.text.primary, bg, 0.2);
+  const base = [
+    black,                        // 0 黑
+    p.error.main,                 // 1 红
+    p.success.main,               // 2 绿
+    p.warning.main,               // 3 黄
+    p.info.main,                  // 4 蓝
+    p.tertiary.main,              // 5 品红
+    mixHex(p.secondary.main, p.info.main, 0.5), // 6 青
+    p.text.primary,               // 7 白
+  ];
+  const bright = base.map((c) => mixHex(c, dark ? '#ffffff' : '#000000', dark ? 0.55 : 0.45));
+  const name = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'white'];
+  const out = {
+    background: bg,
+    foreground: p.text.primary,
+    cursor: p.primary.main,
+    cursorAccent: bg,
+    selectionBackground: mixHex(p.primary.main, bg, 0.72),
+    brightBlack,
+  };
+  name.forEach((n, i) => { out[n] = base[i]; out['bright' + n[0].toUpperCase() + n.slice(1)] = bright[i]; });
+  return out;
+}
+
+/* ---------- WebSocket URL ---------- */
+// 认证 token 由 /api/terminal/auth 种 HttpOnly cookie（terminal_token，5 分钟），
+// WS 握手同源自动携带，不再拼 ?token= 到 URL（避免落入 access log）。
+function wsUrl() {
+  const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+  return `${proto}//${window.location.host}/ws/terminal`;
+}
+
+/**
+ * 终端面板
+ * @param {{open: boolean}} props open=底部面板是否展开（展开才查状态；收起 keep-alive）
+ * @ref newSession() / lock()
+ */
+const TerminalPanel = forwardRef(function TerminalPanel({ open = false }, ref) {
+  const muiTheme = useTheme();
+  const themeObj = useMemo(() => xtermTheme(muiTheme), [muiTheme]);
+
+  // ---- 门禁状态：checking | needs-setup | locked | ready | error ----
+  const [gate, setGate] = useState('checking');
+  const [gateError, setGateError] = useState('');
+  const [pinInput, setPinInput] = useState('');
+  const [showPin, setShowPin] = useState(false);
+  const [pinBusy, setPinBusy] = useState(false);
+
+  // ---- 会话：{id,title,status} + 底层实例（term/ws 等） ----
+  const [sessions, setSessions] = useState([]);
+  const [activeId, setActiveId] = useState(null);
+  const [banner, setBanner] = useState(null); // {type:'warn'|'error', text}
+
+  const instRef = useRef({});          // id → {term,fit,ro,ws,backoffIdx,timers,autoReconnect,closed}
+  const tokenRef = useRef({ value: null, expiresAt: 0 });
+  const seqRef = useRef(0);
+  const stripRef = useRef(null);       // 会话标签条（方向键 roving tabindex 用）
+
+  const patchStatus = useCallback((id, status) => {
+    setSessions((prev) => prev.map((s) => (s.id === id ? { ...s, status } : s)));
+  }, []);
+
+  /* ---------- WS 连接层（一次性初始化，全走 ref，无陈旧闭包） ---------- */
+  const manager = useRef(null);
+  if (!manager.current) {
+    const M = {};
+
+    M.sendResize = (id) => {
+      const inst = instRef.current[id];
+      if (!inst || !inst.ws || inst.ws.readyState !== 1 || !inst.term) return;
+      try {
+        inst.ws.send(JSON.stringify({ type: 'resize', cols: inst.term.cols, rows: inst.term.rows }));
+      } catch { /* ignore */ }
+    };
+
+    M.handleControl = (id, text) => {
+      try {
+        const msg = JSON.parse(text);
+        if (msg.type === 'bye') { /* server 主动结束，交由 close 处理 */ }
+        // 'pong' / 未知控制消息忽略
+      } catch { /* 非 JSON 文本忽略 */ }
+    };
+
+    M.scheduleReconnect = (id) => {
+      const inst = instRef.current[id];
+      if (!inst || inst.closed) return;
+      const delay = BACKOFF[Math.min(inst.backoffIdx, BACKOFF.length - 1)];
+      inst.backoffIdx = Math.min(inst.backoffIdx + 1, BACKOFF.length - 1);
+      clearTimeout(inst.reconnectTimer);
+      inst.reconnectTimer = setTimeout(() => M.connectSession(id), delay);
+    };
+
+    M.connectSession = async (id) => {
+      const inst = instRef.current[id];
+      if (!inst || inst.closed) return;
+      // 防双 WS 竞态：关闭旧连接并置空其回调（避免旧 onclose 触发多余重连）
+      try {
+        if (inst.ws) { inst.ws.onclose = null; inst.ws.onerror = null; try { inst.ws.close(); } catch {} }
+      } catch {}
+      inst.ws = null;
+      clearTimeout(inst.reconnectTimer);
+      clearInterval(inst.pingTimer);
+      inst.gen = (inst.gen || 0) + 1;
+      const gen = inst.gen;
+      patchStatus(id, 'connecting');
+
+      // 无有效 token → 回 PIN 门（4001 过期或从未认证）
+      const token = tokenRef.current.value;
+      if (!token) {
+        inst.autoReconnect = false;
+        setGate('locked');
+        setGateError('终端密码已过期，请重新输入');
+        return;
+      }
+
+      // 先查状态：后端不可用 / 会话满 给明确提示，避免盲连
+      try {
+        const st = await terminalStatus();
+        if (st.sessions >= st.maxSessions) {
+          inst.autoReconnect = false;
+          patchStatus(id, 'error');
+          setBanner({ type: 'error', text: '终端会话数已达上限（最多 3 个），请稍后再试' });
+          return;
+        }
+      } catch {
+        if (!inst.closed && gen === inst.gen) {
+          setBanner({ type: 'warn', text: '终端服务未连接，正在重试…' });
+          patchStatus(id, 'reconnecting');
+          M.scheduleReconnect(id);
+        }
+        return;
+      }
+
+      let ws = null;
+      try { ws = new WebSocket(wsUrl()); } catch { /* 构造失败走 onerror/onclose */ }
+      if (!ws) { M.scheduleReconnect(id); return; }
+      inst.ws = ws;
+      ws.binaryType = 'arraybuffer';
+
+      ws.onopen = () => {
+        if (inst.closed || gen !== inst.gen) { try { ws.close(); } catch {} return; }
+        inst.backoffIdx = 0;
+        setBanner(null);
+        try { ws.send(JSON.stringify({ type: 'auth', token })); } catch {}
+        M.sendResize(id);
+        // 断线恢复后清屏，避免旧输出残留
+        try { inst.term?.reset(); } catch {}
+        patchStatus(id, 'connected');
+        inst.pingTimer = setInterval(() => {
+          if (inst.closed || gen !== inst.gen || ws.readyState !== 1) return;
+          try { ws.send(JSON.stringify({ type: 'ping' })); } catch {}
+        }, PING_MS);
+      };
+
+      ws.onmessage = (ev) => {
+        if (inst.closed || gen !== inst.gen) return;
+        if (typeof ev.data === 'string') { M.handleControl(id, ev.data); return; }
+        try {
+          inst.term?.write(ev.data instanceof ArrayBuffer ? new Uint8Array(ev.data) : ev.data);
+        } catch { /* ignore */ }
+      };
+
+      ws.onerror = () => { try { ws.close(); } catch {} };
+
+      ws.onclose = (ev) => {
+        if (inst.closed || gen !== inst.gen) return;
+        clearInterval(inst.pingTimer);
+        inst.ws = null;
+        // 关闭码语义（后端 routes/terminal.js 定义）
+        if (ev.code === 4001) { // token 无效/过期 → 回 PIN 门重新认证
+          tokenRef.current = { value: null, expiresAt: 0 };
+          inst.autoReconnect = false;
+          setGate('locked');
+          setGateError('终端密码已过期，请重新输入');
+          return;
+        }
+        if (ev.code === 1013 || ev.code === 503) { // 会话超限
+          inst.autoReconnect = false;
+          patchStatus(id, 'error');
+          setBanner({ type: 'error', text: '终端会话数已达上限（最多 3 个），请稍后再试' });
+          return;
+        }
+        if (ev.code === 1011) { // pty 启动失败 / node-pty 未安装
+          inst.autoReconnect = false;
+          patchStatus(id, 'error');
+          setBanner({ type: 'error', text: '终端服务不可用：node-pty 未安装或启动失败' });
+          return;
+        }
+        // 服务端主动结束会话：exit(1000) / 空闲超时(4000)
+        // 视为会话终止，不自动重生新 root shell；由用户显式「重新连接」
+        if (ev.code === 1000 || ev.code === 4000) {
+          inst.autoReconnect = false;
+          inst.endedReason = ev.code === 4000 ? 'idle' : 'exit';
+          patchStatus(id, 'ended');
+          return;
+        }
+        // 其余（1006 网络异常等）→ 指数退避自动重连
+        setBanner({ type: 'warn', text: '终端服务未连接，正在重试…' });
+        if (inst.autoReconnect) { patchStatus(id, 'reconnecting'); M.scheduleReconnect(id); }
+        else patchStatus(id, 'error');
+      };
+    };
+
+    manager.current = M;
+  }
+
+  /* ---------- 门禁 ---------- */
+  const checkGate = useCallback(async () => {
+    setGate('checking');
+    setGateError('');
+    try {
+      const st = await terminalStatus();
+      if (tokenRef.current.value && Date.now() < tokenRef.current.expiresAt) { setGate('ready'); return; }
+      setGate(st.hasPin ? 'locked' : 'needs-setup');
+    } catch (e) {
+      setGate('error');
+      setGateError(e.message || '无法连接终端服务');
+    }
+  }, []);
+
+  // 首次展开面板才查状态（收起时 keep-alive，不重复请求）
+  useEffect(() => {
+    if (open && gate === 'checking') checkGate();
+  }, [open, gate, checkGate]);
+
+  const submitPin = useCallback(async () => {
+    const pin = pinInput.trim();
+    if (!pin) { setGateError('请输入终端密码'); return; }
+    setPinBusy(true);
+    setGateError('');
+    try {
+      const res = await terminalAuth(pin);
+      tokenRef.current = { value: res.token, expiresAt: Date.now() + TOKEN_MARGIN_MS };
+      setPinInput('');
+      setShowPin(false);
+      setGate('ready');
+      // 有会话在等 token → 全部重新连接
+      Object.keys(instRef.current).forEach((id) => {
+        const inst = instRef.current[id];
+        if (inst && !inst.closed) { inst.autoReconnect = true; manager.current.connectSession(id); }
+      });
+    } catch (e) {
+      setGateError(e.message || '认证失败');
+      setPinInput('');
+    } finally {
+      setPinBusy(false);
+    }
+  }, [pinInput]);
+
+  /* ---------- 会话生命周期 ---------- */
+  const newSession = useCallback(() => {
+    if (gate !== 'ready') {
+      showSnack('请先解锁终端', 'info');
+      return;
+    }
+    const live = Object.keys(instRef.current).filter((k) => instRef.current[k] && !instRef.current[k].closed);
+    if (live.length >= MAX_SESSIONS) {
+      setBanner({ type: 'error', text: `终端会话数已达上限（最多 ${MAX_SESSIONS} 个）` });
+      return;
+    }
+    seqRef.current += 1;
+    const id = 't' + seqRef.current;
+    instRef.current[id] = {
+      id, term: null, fit: null, ro: null, ws: null,
+      backoffIdx: 0, reconnectTimer: null, pingTimer: null,
+      autoReconnect: true, closed: false, gen: 0,
+    };
+    setSessions((prev) => [...prev, { id, title: `终端 ${seqRef.current}`, status: 'connecting' }]);
+    setActiveId(id);
+    setBanner(null);
+  }, [gate]);
+
+  const closeSession = useCallback((id) => {
+    const inst = instRef.current[id];
+    if (!inst) return;
+    inst.closed = true;
+    clearTimeout(inst.reconnectTimer);
+    clearInterval(inst.pingTimer);
+    try { if (inst.ws && inst.ws.readyState === 1) inst.ws.send(JSON.stringify({ type: 'bye' })); } catch {}
+    try { inst.ws?.close(1000, 'bye'); } catch {}
+    try { inst.term?.dispose(); } catch {}
+    try { inst.ro?.disconnect(); } catch {}
+    instRef.current[id] = null;
+    // 状态更新不嵌套：先算剩余列表，再分别 set（避免 updater 内副作用）
+    const remaining = sessions.filter((s) => s.id !== id);
+    setSessions(remaining);
+    setActiveId((cur) => (cur === id ? (remaining[remaining.length - 1]?.id ?? null) : cur));
+    setBanner(null);
+  }, [sessions]);
+
+  const lockTerminal = useCallback(() => {
+    tokenRef.current = { value: null, expiresAt: 0 };
+    Object.keys(instRef.current).forEach((id) => {
+      const inst = instRef.current[id];
+      if (!inst) return;
+      inst.closed = true;
+      clearTimeout(inst.reconnectTimer);
+      clearInterval(inst.pingTimer);
+      try { inst.ws?.close(1000, 'bye'); } catch {}
+      try { inst.term?.dispose(); } catch {}
+      try { inst.ro?.disconnect(); } catch {}
+      instRef.current[id] = null;
+    });
+    setSessions([]);
+    setActiveId(null);
+    setBanner(null);
+    setGate('locked');
+  }, []);
+
+  useImperativeHandle(ref, () => ({ newSession, lock: lockTerminal }), [newSession, lockTerminal]);
+
+  // 解锁后自动建首个会话
+  useEffect(() => {
+    if (gate === 'ready' && sessions.length === 0) newSession();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [gate]);
+
+  // 卸载时统一销毁（keep-alive 场景下不触发）
+  useEffect(() => () => {
+    Object.keys(instRef.current).forEach((id) => {
+      const inst = instRef.current[id];
+      if (!inst) return;
+      inst.closed = true;
+      clearTimeout(inst.reconnectTimer);
+      clearInterval(inst.pingTimer);
+      try { inst.ws?.close(); } catch {}
+      try { inst.term?.dispose(); } catch {}
+      try { inst.ro?.disconnect(); } catch {}
+    });
+  }, []);
+
+  // 主题随 muiTheme / data-theme 更新（后台主题静态，运行期一般不触发）
+  useEffect(() => {
+    Object.keys(instRef.current).forEach((id) => {
+      const inst = instRef.current[id];
+      if (inst?.term) inst.term.options.theme = themeObj;
+    });
+  }, [themeObj]);
+
+  /** xterm 挂载点：会话创建后容器出现时调用；隐藏恢复时重新 fit */
+  const mountTerminal = useCallback((id, el) => {
+    const inst = instRef.current[id];
+    if (!inst || !el) return;
+    if (inst.term) {
+      requestAnimationFrame(() => {
+        try {
+          if (el.clientWidth > 0 && el.clientHeight > 0) { inst.fit?.fit(); manager.current.sendResize(id); }
+        } catch {}
+      });
+      return;
+    }
+    let term;
+    let fit = null;
+    try {
+      term = new Terminal({
+        fontSize: 13,
+        fontFamily: FONT,
+        lineHeight: 1.35,
+        cursorBlink: true,
+        scrollback: 3000,
+        theme: themeObj,
+      });
+      fit = new FitAddon();
+      term.loadAddon(fit);
+      term.loadAddon(new Unicode11Addon());
+      term.unicode.activeVersion = '11';
+      term.open(el);
+      inst.term = term;
+      inst.fit = fit;
+    } catch (e) {
+      // xterm 初始化异常：显式报错而非白屏/整树崩溃
+      console.error('[TerminalPanel] xterm 初始化失败:', e);
+      patchStatus(id, 'error');
+      setBanner({ type: 'error', text: `终端初始化失败：${e?.message || '未知错误'}` });
+      return;
+    }
+    term.onData((d) => {
+      const ws = inst.ws;
+      if (!ws || ws.readyState !== 1) return;
+      try { ws.send(new TextEncoder().encode(d)); } catch {}
+    });
+    term.onResize(({ cols, rows }) => {
+      const ws = inst.ws;
+      if (ws && ws.readyState === 1) {
+        try { ws.send(JSON.stringify({ type: 'resize', cols, rows })); } catch {}
+      }
+    });
+    const ro = new ResizeObserver(() => {
+      if (el.clientWidth > 0 && el.clientHeight > 0) {
+        try { fit.fit(); manager.current.sendResize(id); } catch {}
+      }
+    });
+    ro.observe(el);
+    inst.ro = ro;
+    // rAF fit 同样做尺寸守卫：容器零尺寸时跳过，避免 0 行列渲染成空白
+    requestAnimationFrame(() => {
+      try {
+        if (el.clientWidth > 0 && el.clientHeight > 0) { inst.fit.fit(); manager.current.sendResize(id); }
+      } catch {}
+    });
+    manager.current.connectSession(id);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [themeObj]);
+
+  /* ---------- 渲染 ---------- */
+
+  // PIN / 设置门禁
+  if (gate === 'checking' || gate === 'needs-setup' || gate === 'locked' || gate === 'error') {
+    return (
+      <Box sx={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', bgcolor: 'background.paper' }}>
+        {gate === 'checking' && (
+          <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1.5 }}>
+            <CircularProgress size={26} />
+            <Typography variant="caption" sx={{ color: 'text.secondary' }}>正在检查终端服务…</Typography>
+          </Box>
+        )}
+        {gate === 'error' && (
+          <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1.5, px: 3, textAlign: 'center' }}>
+            <ErrorIcon sx={{ fontSize: 38, color: 'error.main' }} />
+            <Typography variant="body2" sx={{ color: 'text.secondary' }}>{gateError || '无法连接终端服务'}</Typography>
+            <Button size="small" variant="outlined" onClick={checkGate}>重试</Button>
+          </Box>
+        )}
+        {(gate === 'needs-setup' || gate === 'locked') && (
+          <Box component="form" onSubmit={(e) => { e.preventDefault(); submitPin(); }} sx={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1, px: 3 }}>
+            <TerminalIcon sx={{ fontSize: 34, color: 'primary.main', mb: 0.5 }} />
+            <Typography sx={{ fontWeight: 600, fontSize: 15 }}>
+              {gate === 'needs-setup' ? '首次使用：设置终端密码' : '输入终端密码解锁'}
+            </Typography>
+            <Typography variant="caption" sx={{ color: 'text.secondary', textAlign: 'center', mb: 1 }}>
+              {gate === 'needs-setup'
+                ? '终端为管理员 Root Shell，请设置专用密码（至少 8 位，与账号密码独立）'
+                : '终端密码与账号密码相互独立，仅管理员可访问'}
+            </Typography>
+            <TextField
+              autoFocus
+              size="small"
+              type={showPin ? 'text' : 'password'}
+              label="终端密码"
+              value={pinInput}
+              onChange={(e) => { setPinInput(e.target.value); if (gateError) setGateError(''); }}
+              error={!!gateError}
+              helperText={gateError || ' '}
+              autoComplete={gate === 'needs-setup' ? 'new-password' : 'current-password'}
+              slotProps={{
+                htmlInput: { maxLength: 128, 'aria-label': '终端密码' },
+                input: {
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <IconButton size="small" edge="end" aria-label={showPin ? '隐藏密码' : '显示密码'} onClick={() => setShowPin((v) => !v)}>
+                        {showPin ? <VisibilityOffIcon fontSize="small" /> : <VisibilityIcon fontSize="small" />}
+                      </IconButton>
+                    </InputAdornment>
+                  ),
+                },
+              }}
+              sx={{ width: 300, maxWidth: '100%' }}
+            />
+            <Button
+              type="submit"
+              variant="contained"
+              disabled={pinBusy || !pinInput}
+              startIcon={pinBusy ? <CircularProgress size={16} color="inherit" /> : <LockOpenIcon />}
+              sx={{ mt: 1 }}
+            >
+              {pinBusy ? '处理中…' : gate === 'needs-setup' ? '设置并连接' : '解锁终端'}
+            </Button>
+          </Box>
+        )}
+      </Box>
+    );
+  }
+
+  // ready：会话标签栏 + 终端
+  const live = sessions.length;
+  const tabEls = () => Array.from(stripRef.current?.querySelectorAll('[role="tab"]') || []);
+  const moveSessionTab = (i) => {
+    const n = sessions.length;
+    if (n === 0) return;
+    const j = ((i % n) + n) % n;
+    setActiveId(sessions[j].id);
+    tabEls()[j]?.focus();
+  };
+  const handleTabKeyDown = (e, index) => {
+    if (e.key === 'ArrowRight') { e.preventDefault(); moveSessionTab(index + 1); }
+    else if (e.key === 'ArrowLeft') { e.preventDefault(); moveSessionTab(index - 1); }
+    else if (e.key === 'Home') { e.preventDefault(); moveSessionTab(0); }
+    else if (e.key === 'End') { e.preventDefault(); moveSessionTab(sessions.length - 1); }
+  };
+  /** 会话结束后显式重连：新建 WS 连接 = 服务端 spawn 新 shell */
+  const reconnectSession = (id) => {
+    const inst = instRef.current[id];
+    if (!inst) return;
+    inst.autoReconnect = true;
+    delete inst.endedReason;
+    manager.current.connectSession(id);
+  };
+
+  return (
+    <Box sx={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', bgcolor: 'background.paper' }}>
+      {/* 会话标签栏 */}
+      <Box
+        ref={stripRef}
+        role="tablist"
+        aria-label="终端会话"
+        sx={{
+          display: 'flex', alignItems: 'center', gap: 0.25, px: 0.5, height: 32, flexShrink: 0,
+          borderBottom: 1, borderColor: 'divider',
+        }}
+      >
+        {sessions.map((s, index) => {
+          const active = s.id === activeId;
+          return (
+            <Box
+              key={s.id}
+              id={`wb-term-tab-${s.id}`}
+              role="tab"
+              aria-selected={active}
+              aria-controls={`wb-term-panel-${s.id}`}
+              tabIndex={active ? 0 : -1}
+              onClick={() => setActiveId(s.id)}
+              onKeyDown={(e) => handleTabKeyDown(e, index)}
+              sx={{
+                display: 'flex', alignItems: 'center', gap: 0.5, pl: 1, pr: 0.25,
+                height: 24, borderRadius: 0.5, cursor: 'pointer', flexShrink: 0, outline: 'none',
+                bgcolor: active ? 'action.selected' : 'transparent',
+                color: active ? 'text.primary' : 'text.secondary',
+                '&:hover': { bgcolor: active ? 'action.selected' : 'action.hover' },
+                '&:focus-visible': { boxShadow: (t) => `inset 0 0 0 2px ${t.palette.primary.main}` },
+              }}
+            >
+              <Box
+                component="span"
+                aria-hidden
+                sx={{
+                  width: 7, height: 7, borderRadius: '50%', flexShrink: 0,
+                  bgcolor: s.status === 'connected' ? 'success.main'
+                    : s.status === 'error' ? 'error.main'
+                      : s.status === 'ended' ? 'text.disabled' : 'warning.main',
+                }}
+              />
+              <Typography sx={{ fontSize: 12, fontWeight: active ? 600 : 500 }}>{s.title}</Typography>
+              {live > 1 && (
+                <IconButton
+                  size="small"
+                  onClick={(e) => { e.stopPropagation(); closeSession(s.id); }}
+                  aria-label={`关闭 ${s.title}`}
+                  sx={{ width: 24, height: 24, borderRadius: 0.5, '& svg': { fontSize: 15 } }}
+                >
+                  <CloseIcon />
+                </IconButton>
+              )}
+            </Box>
+          );
+        })}
+        {live < MAX_SESSIONS && (
+          <Tooltip title="新建终端会话">
+            <IconButton size="small" onClick={newSession} aria-label="新建终端会话" sx={{ ml: 0.25 }}>
+              <AddIcon sx={{ fontSize: 15 }} />
+            </IconButton>
+          </Tooltip>
+        )}
+        <Box sx={{ flex: 1 }} />
+        <Tooltip title="锁定终端（需重新输入密码）">
+          <IconButton size="small" onClick={lockTerminal} aria-label="锁定终端" sx={{ mr: 0.25 }}>
+            <LockIcon sx={{ fontSize: 15 }} />
+          </IconButton>
+        </Tooltip>
+      </Box>
+
+      {/* 连接状态横幅 */}
+      {banner && (
+        <Box
+          role="status"
+          sx={{
+            display: 'flex', alignItems: 'center', gap: 1, px: 1.5, py: 0.5, flexShrink: 0,
+            bgcolor: banner.type === 'error' ? 'error.main' : 'warning.main',
+            color: banner.type === 'error' ? 'error.contrastText' : 'warning.contrastText',
+            borderBottom: 1, borderColor: 'divider',
+          }}
+        >
+          <Box
+            component="span"
+            aria-hidden
+            sx={{ width: 7, height: 7, borderRadius: '50%', flexShrink: 0, bgcolor: 'currentColor', opacity: 0.8 }}
+          />
+          <Typography variant="caption" sx={{ flex: 1, fontWeight: 500 }}>{banner.text}</Typography>
+          <Button
+            size="small"
+            onClick={() => Object.keys(instRef.current).forEach((id) => {
+              const inst = instRef.current[id];
+              if (inst && !inst.closed) { inst.autoReconnect = true; manager.current.connectSession(id); }
+            })}
+            sx={{ minHeight: 24, px: 1, color: 'inherit' }}
+          >
+            重试
+          </Button>
+          <IconButton size="small" onClick={() => setBanner(null)} aria-label="关闭提示" sx={{ color: 'inherit' }}>
+            <CloseIcon sx={{ fontSize: 15 }} />
+          </IconButton>
+        </Box>
+      )}
+
+      {/* 终端区 */}
+      <Box sx={{ flex: 1, minHeight: 0, position: 'relative', bgcolor: 'background.paper' }}>
+        {sessions.map((s) => (
+          <Box
+            key={s.id}
+            id={`wb-term-panel-${s.id}`}
+            role="tabpanel"
+            aria-labelledby={`wb-term-tab-${s.id}`}
+            sx={{
+              position: 'absolute', inset: 0,
+              display: activeId === s.id ? 'block' : 'none',
+            }}
+          >
+            <Box ref={(el) => mountTerminal(s.id, el)} sx={{ width: '100%', height: '100%' }} />
+            {/* 未连接状态条：防止"白屏"——始终可见的连接进度/错误提示（banner 可被关掉） */}
+            {s.status !== 'connected' && s.status !== 'ended' && (
+              <Box
+                role="status"
+                sx={{
+                  position: 'absolute', left: 0, right: 0, bottom: 0, zIndex: 3,
+                  display: 'flex', alignItems: 'center', gap: 1, px: 1.5, py: 0.5,
+                  bgcolor: s.status === 'error' ? 'error.main' : 'warning.main',
+                  color: s.status === 'error' ? 'error.contrastText' : 'warning.contrastText',
+                  borderTop: 1, borderColor: 'divider',
+                }}
+              >
+                {s.status !== 'error' && <CircularProgress size={12} color="inherit" />}
+                <Typography variant="caption" sx={{ fontWeight: 500 }}>
+                  {s.status === 'connecting' ? '正在连接终端服务…'
+                    : s.status === 'reconnecting' ? '连接中断，正在重试…'
+                      : '终端服务不可用'}
+                </Typography>
+              </Box>
+            )}
+            {/* 会话终止覆盖层：exit/空闲超时后不自动重生，显式重连 */}
+            {s.status === 'ended' && (
+              <Box
+                role="status"
+                sx={{
+                  position: 'absolute', inset: 0, zIndex: 2,
+                  display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1.25,
+                  bgcolor: 'background.paper', px: 3, textAlign: 'center',
+                }}
+              >
+                <TerminalIcon sx={{ fontSize: 28, color: 'text.disabled' }} />
+                <Typography sx={{ fontWeight: 600, fontSize: 14 }}>
+                  {instRef.current[s.id]?.endedReason === 'idle' ? '会话已空闲断开' : '终端会话已结束'}
+                </Typography>
+                <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+                  {instRef.current[s.id]?.endedReason === 'idle'
+                    ? '长时间无输入，连接被服务端关闭。点击「重新连接」可新建会话。'
+                    : '输入 exit 退出或进程已结束。点击「重新连接」可新建会话。'}
+                </Typography>
+                <Stack direction="row" spacing={1}>
+                  <Button size="small" variant="contained" startIcon={<RefreshIcon fontSize="small" />} onClick={() => reconnectSession(s.id)}>
+                    重新连接
+                  </Button>
+                  <Button size="small" variant="text" onClick={() => closeSession(s.id)}>
+                    关闭会话
+                  </Button>
+                </Stack>
+              </Box>
+            )}
+          </Box>
+        ))}
+        {sessions.length === 0 && (
+          <Box sx={{ height: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1 }}>
+            <TerminalIcon sx={{ fontSize: 30, color: 'text.disabled' }} />
+            <Typography variant="caption" sx={{ color: 'text.secondary' }}>点击 ＋ 新建终端会话</Typography>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+});
+
+export default TerminalPanel;

frontend/src/tools/workbench/components/ActivityBar.jsx

@@ -0,0 +1,124 @@
+import React, { useRef } from 'react';
+import Box from '@mui/material/Box';
+import Tooltip from '@mui/material/Tooltip';
+import { useDroppable } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
+
+/* ============================================================
+ * ActivityBar：VSCode 风格活动栏（宽 48px，竖排图标）
+ *
+ * - 左侧：主控视图（面板…）；右侧：功能视图（记事本/密码箱…）
+ * - 活动项左侧 2.5px primary 指示条 + selected 底
+ * - 点击：未激活 → 激活并展开侧栏；已激活 → 收起侧栏（VSCode 语义）
+ * - 拖拽（@dnd-kit sortable）：标签可拖到对侧活动栏 → 视图换边；
+ *   同侧可排序。父级 DndContext 负责 moveView / reorderView 落库。
+ * - 无障碍：role=toolbar，仅活动项 tabIndex=0（roving），
+ *   ↑↓/Home/End 移动焦点、Enter/空格 激活；活动项 aria-controls 指向侧栏容器；
+ *   侧栏内由 aria-live 播报当前视图（见 SidebarPane）
+ * ============================================================ */
+
+function ActivityTab({ view, active, onActivate, side, index, moveFocus, count }) {
+  const {
+    attributes, listeners, setNodeRef, transform, transition, isDragging,
+  } = useSortable({ id: 'view:' + view.id });
+
+  const VIcon = view.Icon;
+  return (
+    <Tooltip title={view.label} placement="right">
+      <Box
+        ref={setNodeRef}
+        data-activity-item
+        {...attributes}
+        {...listeners}
+        role="button"
+        tabIndex={active ? 0 : -1}
+        aria-label={view.label}
+        aria-pressed={active}
+        aria-controls={active ? `wb-sidebar-${side}` : undefined}
+        onClick={() => onActivate(view.id)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onActivate(view.id); }
+          else if (e.key === 'ArrowDown') { e.preventDefault(); moveFocus(index + 1); }
+          else if (e.key === 'ArrowUp') { e.preventDefault(); moveFocus(index - 1); }
+          else if (e.key === 'Home') { e.preventDefault(); moveFocus(0); }
+          else if (e.key === 'End') { e.preventDefault(); moveFocus(count - 1); }
+        }}
+        sx={{
+          position: 'relative', width: 48, height: 48, flexShrink: 0,
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          cursor: 'grab', touchAction: 'none', outline: 'none',
+          color: active ? 'primary.onContainer' : 'text.secondary',
+          bgcolor: active ? 'action.selected' : 'transparent',
+          '&:hover': { bgcolor: active ? 'action.selected' : 'action.hover' },
+          '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: -3, outlineStyle: 'solid' },
+          opacity: isDragging ? 0.35 : 1,
+          transform: transform ? `translate3d(${transform.x}px, ${transform.y}px, 0)` : undefined,
+          transition,
+        }}
+      >
+        {active && (
+          <Box
+            aria-hidden
+            sx={{
+              position: 'absolute', left: 0, top: 10, bottom: 10, width: 2.5,
+              bgcolor: 'primary.main', borderRadius: 1,
+            }}
+          />
+        )}
+        <VIcon sx={{ fontSize: 22 }} />
+      </Box>
+    </Tooltip>
+  );
+}
+
+export default function ActivityBar({
+  side, views, activeId, onActivate,
+}) {
+  const right = side === 'right';
+  const { setNodeRef, isOver } = useDroppable({ id: 'activity:' + side });
+  const barRef = useRef(null);
+
+  const itemEls = () => Array.from(barRef.current?.querySelectorAll('[data-activity-item]') || []);
+  const moveFocus = (i) => {
+    const n = views.length;
+    if (n === 0) return;
+    const j = ((i % n) + n) % n;
+    itemEls()[j]?.focus();
+  };
+
+  return (
+    <Box
+      ref={setNodeRef}
+      role="toolbar"
+      aria-label={right ? '右侧活动栏' : '左侧活动栏'}
+      aria-orientation="vertical"
+      aria-controls={`wb-sidebar-${side}`}
+      sx={{
+        width: 48, height: '100%', flexShrink: 0,
+        display: 'flex', flexDirection: 'column', alignItems: 'center',
+        bgcolor: isOver ? 'action.hover' : 'background.paper',
+        borderRight: right ? 0 : 1,
+        borderLeft: right ? 1 : 0,
+        borderColor: 'divider',
+      }}
+    >
+      <SortableContext items={views.map((v) => 'view:' + v.id)} strategy={verticalListSortingStrategy}>
+        <Box ref={barRef} sx={{ display: 'flex', flexDirection: 'column', pt: 0.5 }}>
+          {views.map((v, index) => (
+            <ActivityTab
+              key={v.id}
+              view={v}
+              side={side}
+              index={index}
+              count={views.length}
+              moveFocus={moveFocus}
+              active={activeId === v.id}
+              onActivate={onActivate}
+            />
+          ))}
+        </Box>
+      </SortableContext>
+      <Box sx={{ flex: 1 }} />
+    </Box>
+  );
+}

frontend/src/tools/workbench/components/AddPanelDialog.jsx

@@ -0,0 +1,192 @@
+import React, { useMemo, useState } from 'react';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import ToggleButton from '@mui/material/ToggleButton';
+import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Switch from '@mui/material/Switch';
+import Autocomplete from '@mui/material/Autocomplete';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import WebAssetIcon from '@mui/icons-material/WebAsset';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import OpenInFullIcon from '@mui/icons-material/OpenInFull';
+import { createAdminLink } from '../../../api/adminLinks.js';
+import { OPEN_MODE_EMBED, OPEN_MODE_TAB, OPEN_MODE_MODAL } from '../hooks/usePanels.js';
+
+/* ============================================================
+ * AddPanelDialog：添加面板
+ * URL + 标题 + 分组 + favicon 实时预览 + 打开方式（内嵌/新标签/弹窗）
+ * + 嵌入 URL + 代理开关；保存到 admin_links（复用现有 API）
+ * ============================================================ */
+
+const MODE_META = [
+  { mode: OPEN_MODE_EMBED, label: '内嵌', Icon: WebAssetIcon },
+  { mode: OPEN_MODE_TAB, label: '新标签', Icon: OpenInNewIcon },
+  { mode: OPEN_MODE_MODAL, label: '弹窗', Icon: OpenInFullIcon },
+];
+
+function normalizeUrl(raw) {
+  const s = (raw || '').trim();
+  if (!s) return '';
+  return /^[a-z][a-z0-9+.-]*:\/\//i.test(s) ? s : 'https://' + s;
+}
+
+export default function AddPanelDialog({ open, onClose, categories = [], onSaved, onSetMode }) {
+  const [form, setForm] = useState({
+    title: '', url: '', category: '', openMode: OPEN_MODE_EMBED,
+    use_proxy: false, embed_url: '',
+  });
+  const [err, setErr] = useState('');
+
+  const host = useMemo(() => {
+    try { return new URL(normalizeUrl(form.url)).hostname; } catch { return ''; }
+  }, [form.url]);
+
+  const set = (k) => (e) => setForm((p) => ({ ...p, [k]: e.target.value }));
+
+  const save = async () => {
+    const title = form.title.trim();
+    const url = normalizeUrl(form.url);
+    if (!title) { setErr('请输入面板标题'); return; }
+    if (!url) { setErr('请输入面板链接'); return; }
+    try {
+      const panel = await createAdminLink({
+        title,
+        url,
+        embed_url: form.embed_url.trim(),
+        category: form.category.trim() || '默认',
+        use_proxy: form.use_proxy ? 1 : 0,
+        description: '',
+        icon: '',
+        sort_order: 0,
+        version: '',
+      });
+      if (form.openMode !== OPEN_MODE_EMBED) onSetMode(panel.id, form.openMode);
+      setErr('');
+      setForm({ title: '', url: '', category: '', openMode: OPEN_MODE_EMBED, use_proxy: false, embed_url: '' });
+      onSaved(panel);
+    } catch (e) {
+      setErr(e.message || '保存失败');
+    }
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth="sm">
+      <DialogTitle>添加面板</DialogTitle>
+      <DialogContent>
+        <TextField
+          fullWidth
+          label="标题 *"
+          value={form.title}
+          onChange={set('title')}
+          margin="normal"
+          placeholder="例如：服务器监控"
+          autoFocus
+        />
+
+        <TextField
+          fullWidth
+          label="链接 URL *"
+          value={form.url}
+          onChange={set('url')}
+          margin="normal"
+          placeholder="example.com 或 https://…"
+          error={!!err && !form.url.trim()}
+        />
+
+        {/* favicon 实时预览 */}
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mt: 1, mb: 0.5 }}>
+          <Box
+            sx={{
+              width: 32, height: 32, borderRadius: 1.5, border: 1, borderColor: 'divider',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              bgcolor: 'background.paper', overflow: 'hidden',
+            }}
+          >
+            {host ? (
+              <img
+                src={`https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=64`}
+                alt=""
+                width={20}
+                height={20}
+                loading="lazy"
+                style={{ display: 'block' }}
+                onError={(e) => { e.target.style.visibility = 'hidden'; }}
+              />
+            ) : (
+              <WebAssetIcon sx={{ fontSize: 18, color: 'text.disabled' }} />
+            )}
+          </Box>
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            {host ? `站点：${host}` : '输入链接后预览站点图标'}
+          </Typography>
+        </Box>
+
+        <Autocomplete
+          freeSolo
+          fullWidth
+          value={form.category}
+          onChange={(e, v) => setForm((p) => ({ ...p, category: v || '' }))}
+          onInputChange={(e, v) => setForm((p) => ({ ...p, category: v }))}
+          options={categories}
+          renderInput={(params) => (
+            <TextField {...params} label="分组" margin="normal" placeholder="默认" />
+          )}
+        />
+
+        <Typography variant="caption" sx={{ display: 'block', mt: 1, mb: 0.5, color: 'text.secondary' }}>
+          打开方式
+        </Typography>
+        <ToggleButtonGroup
+          exclusive
+          fullWidth
+          size="small"
+          value={form.openMode}
+          onChange={(e, v) => { if (v) setForm((p) => ({ ...p, openMode: v })); }}
+          aria-label="打开方式"
+        >
+          {MODE_META.map(({ mode, label, Icon }) => (
+            <ToggleButton key={mode} value={mode} sx={{ py: 0.75 }}>
+              <Icon fontSize="small" sx={{ mr: 0.5 }} />{label}
+            </ToggleButton>
+          ))}
+        </ToggleButtonGroup>
+
+        {form.openMode === OPEN_MODE_EMBED && (
+          <Box sx={{ mt: 1.5 }}>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={form.use_proxy}
+                  onChange={(e) => setForm((p) => ({ ...p, use_proxy: e.target.checked }))}
+                />
+              }
+              label="通过代理嵌入（绕过 X-Frame-Options 限制）"
+            />
+            <TextField
+              fullWidth
+              label="嵌入 URL（可选，iframe 专用）"
+              value={form.embed_url}
+              onChange={set('embed_url')}
+              margin="dense"
+              placeholder="留空则使用上面的链接"
+            />
+          </Box>
+        )}
+
+        {err && (
+          <Typography variant="body2" sx={{ mt: 1.5, color: 'error.main' }}>{err}</Typography>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>取消</Button>
+        <Button variant="contained" onClick={save}>添加</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

frontend/src/tools/workbench/components/CollapseArrow.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
+import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+
+/* ============================================================
+ * CollapseArrow：侧边栏折叠箭头（VSCode 风格）
+ *
+ * - 由父级绝对定位到主区边缘（即侧边栏与主区的 Separator 位置）垂直居中；
+ *   侧边栏折叠为 0 后主区仍在，箭头始终可见可点，支持"再点击展开"。
+ * - 箭头始终指向栏的方向：展开时指栏（点击收起），折叠后反向（点击展开）。
+ * - 可见性：**常驻可见**——不透明背景（background.paper）+ 实心边框 + 阴影，
+ *   opacity 展开 0.9 / 折叠 1，hover 全亮加深阴影；不再半透明叠加 iframe 混色。
+ * - 28x28 触控目标，zIndex 12 盖在 iframe 内容之上。
+ * ============================================================ */
+
+export default function CollapseArrow({ side, collapsed = false, onToggle }) {
+  const right = side === 'right';
+  const label = collapsed ? `展开${right ? '右' : '左'}侧边栏` : `折叠${right ? '右' : '左'}侧边栏`;
+  // 展开 → 指向栏（收起动作）；折叠 → 反向（展开动作）
+  const Icon = collapsed
+    ? (right ? ChevronLeftIcon : ChevronRightIcon)
+    : (right ? ChevronRightIcon : ChevronLeftIcon);
+
+  return (
+    <Tooltip title={label} placement={right ? 'left' : 'right'}>
+      <IconButton
+        size="small"
+        aria-label={label}
+        onClick={onToggle}
+        sx={{
+          position: 'absolute', top: '50%', [right ? 'right' : 'left']: 2,
+          transform: 'translateY(-50%)', zIndex: 12,
+          width: 28, height: 28, minWidth: 28, p: 0,
+          opacity: collapsed ? 1 : 0.9,
+          bgcolor: 'background.paper', border: 1, borderColor: 'divider',
+          boxShadow: (t) => t.shadows[2],
+          transition: 'opacity .12s ease, background-color .12s ease, box-shadow .12s ease',
+          '&:hover': { opacity: 1, bgcolor: 'action.hover', boxShadow: (t) => t.shadows[4] },
+          '&:focus-visible': { outline: '2px solid', outlineColor: 'primary.main', outlineOffset: -2 },
+        }}
+      >
+        <Icon sx={{ fontSize: 18 }} />
+      </IconButton>
+    </Tooltip>
+  );
+}

frontend/src/tools/workbench/components/ContentView.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import PanelFrame from './PanelFrame.jsx';
+import { tabBtnId, tabPanelId } from './TabStrip.jsx';
+
+/* ============================================================
+ * ContentView：主区内容分发（按标签 type）
+ *
+ * - 'panel'    → PanelFrame（iframe，LRU 由 panelRenderKeys 控制挂载）
+ * - 其他 react 类型 → tab.render() 返回对应组件（记事本/密码箱/面板列表…）
+ * 仅激活标签可见，其余保持挂载（keep-alive 保留 iframe 与编辑状态）。
+ * 每个标签包一层 role=tabpanel，与 TabStrip 的 tab 通过 id 配对（ARIA）。
+ * ============================================================ */
+
+export default function ContentView({ tabs, activeKey, refreshNonce = 0, panelRenderKeys = null }) {
+  return (
+    <>
+      {tabs.map((tab) => {
+        const active = tab.key === activeKey;
+        if (tab.type === 'panel') {
+          // LRU 裁剪：只渲染当前 + 最近使用的 iframe，其余卸载省内存
+          if (panelRenderKeys && !panelRenderKeys.has(tab.key)) return null;
+          return (
+            <Box
+              key={tab.key}
+              id={tabPanelId(tab.key)}
+              role="tabpanel"
+              aria-labelledby={tabBtnId(tab.key)}
+              sx={{ display: active ? 'block' : 'none', width: '100%', height: '100%' }}
+            >
+              <PanelFrame
+                panel={tab.panel}
+                active={active}
+                refreshNonce={refreshNonce}
+              />
+            </Box>
+          );
+        }
+        return (
+          <Box
+            key={tab.key}
+            id={tabPanelId(tab.key)}
+            role="tabpanel"
+            aria-labelledby={tabBtnId(tab.key)}
+            sx={{ display: active ? 'block' : 'none', width: '100%', height: '100%' }}
+          >
+            {tab.render ? tab.render() : null}
+          </Box>
+        );
+      })}
+    </>
+  );
+}

frontend/src/tools/workbench/components/MenuBar.jsx

@@ -0,0 +1,118 @@
+import React, { useRef, useState } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Divider from '@mui/material/Divider';
+import Typography from '@mui/material/Typography';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+
+/* ============================================================
+ * MenuBar：VSCode 风格菜单栏（MUI Menu，配置数组驱动）
+ *
+ * menus = [{ label, items: [{ label, Icon?, action?, shortcut?, divider? }] }]
+ * - role=menubar / menuitem，顶层 roving tabindex + 方向键导航：
+ *   ← → / Home / End 移动焦点，↓ / Enter / 空格 打开菜单
+ * - 菜单内部导航由 MUI Menu 自带（方向键 + Enter/Esc）
+ * ============================================================ */
+
+export default function MenuBar({ menus = [] }) {
+  const [openIdx, setOpenIdx] = useState(null);
+  const [anchorEl, setAnchorEl] = useState(null);
+  const [focusIdx, setFocusIdx] = useState(0); // roving tabindex 停靠点
+  const barRef = useRef(null);
+
+  const btnEls = () => Array.from(barRef.current?.querySelectorAll('[data-menu-btn]') || []);
+  const focusBtn = (i) => {
+    const n = menus.length;
+    if (n === 0) return;
+    const j = ((i % n) + n) % n;
+    setFocusIdx(j);
+    btnEls()[j]?.focus();
+  };
+  const openMenu = (i) => {
+    setFocusIdx(i);
+    setAnchorEl(btnEls()[i]);
+    setOpenIdx(i);
+  };
+  const close = () => { setOpenIdx(null); setAnchorEl(null); };
+
+  const handleTopKeyDown = (e, i) => {
+    switch (e.key) {
+      case 'ArrowRight': e.preventDefault(); focusBtn(i + 1); break;
+      case 'ArrowLeft': e.preventDefault(); focusBtn(i - 1); break;
+      case 'Home': e.preventDefault(); focusBtn(0); break;
+      case 'End': e.preventDefault(); focusBtn(menus.length - 1); break;
+      case 'ArrowDown':
+      case 'Enter':
+      case ' ':
+        e.preventDefault();
+        openMenu(i); // MUI Menu 打开后自动聚焦首个菜单项
+        break;
+      default: break;
+    }
+  };
+
+  return (
+    <Box
+      ref={barRef}
+      component="nav"
+      role="menubar"
+      aria-label="主菜单"
+      sx={{ display: 'flex', alignItems: 'center' }}
+    >
+      {menus.map((menu, i) => (
+        <React.Fragment key={menu.label}>
+          <Button
+            data-menu-btn
+            role="menuitem"
+            aria-haspopup="true"
+            aria-expanded={openIdx === i}
+            tabIndex={focusIdx === i ? 0 : -1}
+            size="small"
+            onClick={(e) => {
+              setFocusIdx(i);
+              if (openIdx === i) { close(); return; }
+              setAnchorEl(e.currentTarget);
+              setOpenIdx(i);
+            }}
+            onKeyDown={(e) => handleTopKeyDown(e, i)}
+            sx={{
+              minWidth: 0, px: 1, height: 30, borderRadius: 1,
+              fontSize: 13, color: openIdx === i ? 'primary.main' : 'text.primary',
+              '&:hover': { bgcolor: openIdx === i ? 'action.selected' : 'action.hover' },
+            }}
+          >
+            {menu.label}
+            <KeyboardArrowDownIcon sx={{ fontSize: 14, ml: 0.25, color: 'text.disabled' }} />
+          </Button>
+          <Menu
+            open={openIdx === i}
+            anchorEl={anchorEl}
+            onClose={close}
+            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+            MenuListProps={{ sx: { py: 0.5, minWidth: 200 } }}
+          >
+            {menu.items.map((item, j) => (
+              item.divider ? (
+                <Divider key={`d-${j}`} sx={{ my: 0.5 }} />
+              ) : (
+                <MenuItem
+                  key={item.label + j}
+                  dense
+                  onClick={() => { close(); item.action?.(); }}
+                >
+                  {item.Icon && <item.Icon sx={{ fontSize: 16, mr: 1.25, color: 'text.secondary' }} />}
+                  <span style={{ flex: 1 }}>{item.label}</span>
+                  {item.shortcut && (
+                    <Typography variant="caption" sx={{ ml: 3, color: 'text.disabled' }}>{item.shortcut}</Typography>
+                  )}
+                </MenuItem>
+              )
+            ))}
+          </Menu>
+        </React.Fragment>
+      ))}
+    </Box>
+  );
+}

frontend/src/tools/workbench/components/NoteEditor.jsx

@@ -0,0 +1,264 @@
+import React, { useState } from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import TextField from '@mui/material/TextField';
+import List from '@mui/material/List';
+import ListItemButton from '@mui/material/ListItemButton';
+import CircularProgress from '@mui/material/CircularProgress';
+import Dialog from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import NoteAltIcon from '@mui/icons-material/NoteAlt';
+import CloseIcon from '@mui/icons-material/Close';
+import AddIcon from '@mui/icons-material/Add';
+import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
+import EditOutlinedIcon from '@mui/icons-material/EditOutlined';
+import ErrorIcon from '@mui/icons-material/Error';
+import useNotes from '../hooks/useNotes.js';
+import ConfirmDialog from '../../../admin/ConfirmDialog.jsx';
+
+/* ============================================================
+ * NotesView：记事本视图（VSCode 侧边栏 / 标签页内容）
+ *
+ * 由 NoteEditor 裁剪：去掉浮窗拖拽 / fixed 侧栏 / 自带标题栏，
+ * 标题栏由父级 ToolWindow 提供。保留：
+ *   状态条（当前文件 + 保存状态）→ 编辑器（自动保存，Ctrl+S）
+ *   → 文件管理器（新建/双击重命名/右键菜单/删除）
+ * 常驻挂载（keep-alive），切换视图不丢草稿。
+ * ============================================================ */
+
+/** 精简时间格式：今天 HH:mm / 今年 MM-DD / 往年 YYYY-MM-DD */
+function fmtTime(ms) {
+  if (!ms) return '';
+  const d = new Date(ms);
+  const now = new Date();
+  const pad = (n) => String(n).padStart(2, '0');
+  const hm = `${pad(d.getHours())}:${pad(d.getMinutes())}`;
+  if (d.toDateString() === now.toDateString()) return hm;
+  if (d.getFullYear() === now.getFullYear()) return `${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${hm}`;
+  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+}
+
+/** 新建/重命名弹窗 */
+function NameDialog({ open, title, initial, confirmText, exists, busy, onClose, onConfirm }) {
+  const [value, setValue] = useState(initial);
+  const [err, setErr] = useState('');
+
+  React.useEffect(() => {
+    if (open) { setValue(initial); setErr(''); }
+  }, [open, initial]);
+
+  const submit = () => {
+    let name = value.trim();
+    if (!name) { setErr('请输入文件名'); return; }
+    if (!name.toLowerCase().endsWith('.txt')) name += '.txt';
+    if (exists.includes(name.toLowerCase())) { setErr('同名笔记已存在'); return; }
+    onConfirm(name);
+  };
+
+  return (
+    <Dialog open={open} onClose={onClose} fullWidth maxWidth="xs">
+      <DialogTitle>{title}</DialogTitle>
+      <DialogContent>
+        <TextField
+          fullWidth
+          autoFocus
+          size="small"
+          label="文件名"
+          value={value}
+          onChange={(e) => { setValue(e.target.value); setErr(''); }}
+          onKeyDown={(e) => { if (e.key === 'Enter') submit(); }}
+          error={!!err}
+          helperText={err || '仅支持 .txt 文本文件'}
+          inputProps={{ style: { fontSize: 14 } }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onClose}>取消</Button>
+        <Button variant="contained" disabled={busy} onClick={submit}>{confirmText}</Button>
+      </DialogActions>
+    </Dialog>
+  );
+}
+
+export default function NotesView() {
+  const notes = useNotes();
+  const {
+    notes: list, loadError, refresh,
+    activeName, content, dirty, saving, busy,
+    open, updateContent, saveNow, create, rename, remove, nextUntitled,
+  } = notes;
+
+  const [newOpen, setNewOpen] = useState(false);
+  const [renameTarget, setRenameTarget] = useState(null);
+  const [delTarget, setDelTarget] = useState(null);
+  const [ctx, setCtx] = useState(null); // { name, anchorEl }
+
+  const handleCreate = (name) => { setNewOpen(false); create(name); };
+  const handleRename = (name) => { setRenameTarget(null); rename(ctx?.name || renameTarget, name); };
+  const handleDelete = async () => {
+    const name = delTarget;
+    setDelTarget(null);
+    await remove(name);
+  };
+
+  const statusText = saving ? '保存中…' : dirty ? '未保存' : '已保存';
+
+  return (
+    <Box component="section" aria-label="记事本" sx={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+      {/* 状态条 */}
+      <Box sx={{ px: 1.5, py: 0.5, display: 'flex', alignItems: 'center', gap: 1, bgcolor: 'background.default', borderBottom: 1, borderColor: 'divider', flexShrink: 0 }}>
+        <Typography variant="caption" noWrap sx={{ flex: 1, color: 'text.secondary' }} title={activeName || ''}>
+          {activeName || '未打开笔记'}
+        </Typography>
+        <Typography variant="caption" sx={{ flexShrink: 0, color: saving ? 'text.secondary' : dirty ? 'warning.main' : 'success.main', fontWeight: 500 }}>
+          {statusText}
+        </Typography>
+      </Box>
+
+      {/* 编辑器（上半） */}
+      <Box sx={{ flex: 1, minHeight: 0, display: 'flex', p: 0.5 }}>
+        <TextField
+          fullWidth
+          multiline
+          variant="outlined"
+          value={content}
+          onChange={(e) => updateContent(e.target.value)}
+          onKeyDown={(e) => {
+            if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') { e.preventDefault(); saveNow(); }
+          }}
+          disabled={!activeName || busy}
+          placeholder={activeName ? '开始输入…（自动保存，Ctrl+S 立即保存）' : '从下方选择或新建一篇笔记'}
+          inputProps={{ 'aria-label': '笔记内容', style: { fontSize: 13, lineHeight: 1.6 } }}
+          sx={{
+            flex: 1, minHeight: 0,
+            '& .MuiInputBase-root': { height: '100%', alignItems: 'flex-start', borderRadius: 1 },
+            '& .MuiInputBase-inputMultiline': { height: '100% !important', overflow: 'auto !important', boxSizing: 'border-box' },
+          }}
+        />
+      </Box>
+
+      {/* 文件管理器（下半） */}
+      <Box sx={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', borderTop: 1, borderColor: 'divider' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', px: 1.25, py: 0.5, flexShrink: 0 }}>
+          <Typography sx={{ flex: 1, fontSize: 11, fontWeight: 700, letterSpacing: 0.5, color: 'text.secondary' }}>
+            笔记（{list ? list.length : 0}）
+          </Typography>
+          <Tooltip title="新建笔记">
+            <IconButton size="small" onClick={() => setNewOpen(true)} aria-label="新建笔记"><AddIcon fontSize="small" /></IconButton>
+          </Tooltip>
+        </Box>
+        <Box sx={{ flex: 1, minHeight: 0, overflowY: 'auto', overflowX: 'hidden' }}>
+          {list === null && !loadError ? (
+            <Box sx={{ display: 'flex', justifyContent: 'center', py: 2 }}><CircularProgress size={20} /></Box>
+          ) : loadError ? (
+            <Box sx={{ px: 2, py: 2, textAlign: 'center' }}>
+              <ErrorIcon sx={{ fontSize: 24, color: 'error.main', mb: 0.5 }} />
+              <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block', mb: 0.5 }}>{loadError}</Typography>
+              <Button size="small" variant="outlined" onClick={refresh}>重试</Button>
+            </Box>
+          ) : list.length === 0 ? (
+            <Box sx={{ px: 2, py: 3, textAlign: 'center' }}>
+              <NoteAltIcon sx={{ fontSize: 28, color: 'text.disabled', mb: 0.5 }} />
+              <Typography variant="caption" sx={{ color: 'text.secondary', display: 'block' }}>暂无笔记，点击上方 ＋ 新建</Typography>
+            </Box>
+          ) : (
+            <List dense disablePadding>
+              {list.map((n) => {
+                const active = n.name === activeName;
+                return (
+                  <ListItemButton
+                    key={n.name}
+                    onClick={() => open(n.name)}
+                    onDoubleClick={() => setRenameTarget(n.name)}
+                    onContextMenu={(e) => { e.preventDefault(); setCtx({ name: n.name, anchorEl: e.currentTarget }); }}
+                    onKeyDown={(e) => {
+                      // F2 重命名（标准文件管理器约定，避免与 Enter 打开冲突）
+                      if (e.key === 'F2') { e.preventDefault(); setRenameTarget(n.name); }
+                    }}
+                    aria-label={`打开笔记 ${n.name}`}
+                    sx={{
+                      minHeight: 40, borderRadius: 0, m: 0, px: 0,
+                      bgcolor: active ? 'primary.container' : 'transparent',
+                      color: active ? 'primary.onContainer' : 'text.primary',
+                      '&:hover': { bgcolor: active ? 'primary.container' : 'action.hover' },
+                      '&:hover .nb-del': { opacity: 1 },
+                      '&:focus-visible .nb-del': { opacity: 1 },
+                    }}
+                  >
+                    <NoteAltIcon fontSize="small" sx={{ mx: 1, flexShrink: 0, opacity: 0.7 }} />
+                    <Box sx={{ flex: 1, minWidth: 0, py: 0.5 }}>
+                      <Typography noWrap sx={{ fontSize: 12.5, fontWeight: active ? 600 : 500 }}>{n.name}</Typography>
+                      <Typography variant="caption" sx={{ color: 'text.disabled', fontSize: 10 }}>
+                        {fmtTime(n.mtime)}
+                      </Typography>
+                    </Box>
+                    <IconButton
+                      className="nb-del"
+                      size="small"
+                      onClick={(e) => { e.stopPropagation(); setDelTarget(n.name); }}
+                      aria-label={`删除 ${n.name}`}
+                      sx={{ opacity: 0, width: 28, height: 28, mr: 0.5, transition: 'opacity .12s' }}
+                    >
+                      <CloseIcon fontSize="small" />
+                    </IconButton>
+                  </ListItemButton>
+                );
+              })}
+            </List>
+          )}
+        </Box>
+      </Box>
+
+      {/* 右键菜单 */}
+      <Menu
+        open={!!ctx}
+        anchorEl={ctx?.anchorEl || null}
+        onClose={() => setCtx(null)}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      >
+        <MenuItem dense onClick={() => { if (ctx) setRenameTarget(ctx.name); setCtx(null); }}>
+          <EditOutlinedIcon fontSize="small" sx={{ mr: 1, color: 'text.secondary' }} />重命名
+        </MenuItem>
+        <MenuItem dense onClick={() => { if (ctx) setDelTarget(ctx.name); setCtx(null); }}>
+          <DeleteOutlinedIcon fontSize="small" sx={{ mr: 1, color: 'error.main' }} />删除
+        </MenuItem>
+      </Menu>
+
+      <NameDialog
+        open={newOpen}
+        title="新建笔记"
+        initial={nextUntitled}
+        confirmText="创建"
+        exists={(list || []).map((n) => n.name.toLowerCase())}
+        busy={busy}
+        onClose={() => setNewOpen(false)}
+        onConfirm={handleCreate}
+      />
+      <NameDialog
+        open={!!renameTarget}
+        title="重命名笔记"
+        initial={renameTarget || ''}
+        confirmText="保存"
+        exists={(list || []).map((n) => n.name.toLowerCase()).filter((n) => n !== renameTarget?.toLowerCase())}
+        busy={busy}
+        onClose={() => setRenameTarget(null)}
+        onConfirm={handleRename}
+      />
+      <ConfirmDialog
+        open={!!delTarget}
+        title="删除笔记"
+        message={`确定要删除 "${delTarget || ''}" 吗？此操作不可恢复。`}
+        onClose={() => setDelTarget(null)}
+        onConfirm={handleDelete}
+        confirmText="删除"
+      />
+    </Box>
+  );
+}

frontend/src/tools/workbench/components/PanelFrame.jsx

@@ -0,0 +1,266 @@
+import React, { useEffect, useRef, useState } from 'react';
+import Box from '@mui/material/Box';
+import CircularProgress from '@mui/material/CircularProgress';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+import Stack from '@mui/material/Stack';
+import IconButton from '@mui/material/IconButton';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import ErrorIcon from '@mui/icons-material/Error';
+import CloseIcon from '@mui/icons-material/Close';
+import { getToken } from '../../../api/client.js';
+
+/* ============================================================
+ * PanelFrame：单个面板的 iframe 容器
+ *
+ * - 懒加载：首次激活才创建 iframe DOM，之后 display:none 保留状态
+ * - 超时 + load 双保险：加载中显示覆盖层；超时（X-Frame-Options
+ *   拒绝 / 目标无响应）显示失败提示 + 「在新标签页打开」回退
+ * - proxy 模式：use_proxy=1 或 HTTPS 页内嵌 HTTP 目标时走
+ *   /api/proxy/fetch?url=&token=（proxy 剥 X-Frame-Options/CSP）。
+ *   token 用 /api/proxy/token 签发的 5 分钟短 TTL JWT，避免把 7 天
+ *   主 token 暴露在 iframe URL 中（模块级缓存，4 分钟刷新一次）。
+ * - 站内 URL（/ 开头）为同源内容：剥离 allow-same-origin 防其访问
+ *   父页面 DOM；跨源面板保留 allow-same-origin（多数站点依赖）。
+ * - LRU 由父级 Workbench 控制挂载/卸载（此组件不自行卸载）
+ * ============================================================ */
+
+const LOAD_TIMEOUT_MS = 15000;
+const TOKEN_TTL_MS = 4 * 60 * 1000;   // 缓存 4 分钟（短 token 5 分钟有效）
+const HINT_TTL_MS = 5000;             // 加载成功后的「空白？新标签打开」提示条 5 秒自动消失
+
+/* 短 TTL proxy token 的模块级缓存：多个 PanelFrame 共享，避免每帧都请求 */
+let proxyTokenCache = { promise: null, expiresAt: 0 };
+
+function fetchProxyToken() {
+  const now = Date.now();
+  if (proxyTokenCache.promise && now < proxyTokenCache.expiresAt) return proxyTokenCache.promise;
+  const p = fetch('/api/proxy/token', {
+    headers: { Authorization: 'Bearer ' + (getToken() || '') },
+  })
+    .then(async (res) => {
+      if (!res.ok) throw new Error('proxy token 获取失败');
+      const data = await res.json();
+      return data.token;
+    })
+    .catch((e) => {
+      proxyTokenCache.promise = null;
+      throw e;
+    });
+  proxyTokenCache.promise = p;
+  proxyTokenCache.expiresAt = now + TOKEN_TTL_MS;
+  return p;
+}
+
+export default function PanelFrame({ panel, active = false, refreshNonce = 0 }) {
+  const [mounted, setMounted] = useState(active);
+  const [status, setStatus] = useState('loading'); // loading | loaded | timeout
+  const [proxySrc, setProxySrc] = useState('');
+  const [showHint, setShowHint] = useState(false);
+  const iframeRef = useRef(null);
+  const timerRef = useRef(null);
+  const hintTimerRef = useRef(null);
+  const statusRef = useRef('loading');
+
+  const targetUrl = panel.embed_url || panel.url || '';
+  const isHttpsPage = typeof window !== 'undefined' && window.location.protocol === 'https:';
+  const needsProxy = !!panel.use_proxy || (isHttpsPage && targetUrl.startsWith('http:'));
+  // 站内 URL（同源内容）：沙箱剥离 allow-same-origin，内容无法操作父页面 DOM
+  const isInternal = targetUrl.startsWith('/');
+  const sandbox = isInternal
+    ? 'allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox'
+    : 'allow-scripts allow-same-origin allow-forms allow-popups allow-popups-to-escape-sandbox';
+
+  // proxy 模式：先取 5 分钟短 TTL token 再拼 iframe URL（失败进入超时回退态）
+  useEffect(() => {
+    let alive = true;
+    if (!needsProxy) { setProxySrc(targetUrl); return () => { alive = false; }; }
+    setProxySrc('');
+    fetchProxyToken()
+      .then((tok) => {
+        if (alive) {
+          setProxySrc('/api/proxy/fetch?url=' + encodeURIComponent(targetUrl) + '&token=' + encodeURIComponent(tok));
+        }
+      })
+      .catch(() => {
+        if (alive) {
+          statusRef.current = 'timeout';
+          setStatus('timeout');
+        }
+      });
+    return () => { alive = false; };
+  }, [needsProxy, targetUrl]);
+
+  const src = needsProxy ? proxySrc : targetUrl;
+
+  // 懒加载：首次激活才创建 iframe
+  useEffect(() => {
+    if (active) setMounted(true);
+  }, [active]);
+
+  const startTimer = () => {
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => {
+      if (statusRef.current === 'loading') {
+        statusRef.current = 'timeout';
+        setStatus('timeout');
+      }
+    }, LOAD_TIMEOUT_MS);
+  };
+
+  // 挂载 / 地址变化：进入加载态并启动超时
+  useEffect(() => {
+    if (!mounted || !src) return;
+    statusRef.current = 'loading';
+    setStatus('loading');
+    setShowHint(false);
+    startTimer();
+    return () => clearTimeout(timerRef.current);
+  }, [mounted, src]);
+
+  // 刷新信号（工具栏 ↻）：仅对激活面板 reload，且重新进入加载态
+  const lastNonce = useRef(refreshNonce);
+  useEffect(() => {
+    if (!active || refreshNonce === lastNonce.current) return;
+    lastNonce.current = refreshNonce;
+    const iframe = iframeRef.current;
+    if (!iframe || !src) return;
+    statusRef.current = 'loading';
+    setStatus('loading');
+    startTimer();
+    try { iframe.contentWindow.location.reload(); }
+    catch { iframe.src = iframe.src; }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [refreshNonce]);
+
+  const handleLoad = () => {
+    clearTimeout(timerRef.current);
+    statusRef.current = 'loaded';
+    setStatus('loaded');
+    // 直接嵌入（非 proxy）时，加载成功仍可能被 X-Frame-Options 拒成空白页，
+    // 浮动提示「在新标签打开」；非阻塞，5 秒自动消失或可关闭。
+    if (!needsProxy) {
+      setShowHint(true);
+      clearTimeout(hintTimerRef.current);
+      hintTimerRef.current = setTimeout(() => setShowHint(false), HINT_TTL_MS);
+    }
+  };
+
+  const handleRetry = () => {
+    const iframe = iframeRef.current;
+    if (!iframe || !src) return;
+    statusRef.current = 'loading';
+    setStatus('loading');
+    startTimer();
+    try { iframe.contentWindow.location.reload(); }
+    catch { iframe.src = iframe.src; }
+  };
+
+  useEffect(() => () => { clearTimeout(hintTimerRef.current); }, []);
+
+  return (
+    <Box
+      sx={{
+        position: 'relative', width: '100%', height: '100%', overflow: 'hidden',
+        display: active ? 'block' : 'none', bgcolor: 'background.paper', flexShrink: 0,
+      }}
+    >
+      {mounted && (
+        <iframe
+          ref={iframeRef}
+          title={panel.title || '面板'}
+          src={src}
+          onLoad={handleLoad}
+          sandbox={sandbox}
+          allow="fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+          style={{ width: '100%', height: '100%', border: 'none', display: 'block', background: 'transparent' }}
+        />
+      )}
+
+      {status === 'loading' && (
+        <Box
+          sx={{
+            position: 'absolute', inset: 0, zIndex: 2, display: 'flex',
+            flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1.5,
+            bgcolor: 'background.default',
+          }}
+        >
+          <CircularProgress size={32} />
+          <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+            正在加载 {panel.title || '面板'}…
+          </Typography>
+        </Box>
+      )}
+
+      {status === 'timeout' && (
+        <Box
+          sx={{
+            position: 'absolute', inset: 0, zIndex: 2, display: 'flex',
+            flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2,
+            bgcolor: 'background.default', px: 3, textAlign: 'center',
+          }}
+        >
+          <ErrorIcon sx={{ fontSize: 40, color: 'text.disabled' }} />
+          <Box>
+            <Typography sx={{ fontWeight: 600, mb: 0.5 }}>面板加载超时</Typography>
+            <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+              目标站点可能拒绝嵌入（X-Frame-Options），或响应过慢。
+            </Typography>
+          </Box>
+          <Stack direction="row" spacing={1}>
+            <Button
+              size="small"
+              variant="outlined"
+              startIcon={<OpenInNewIcon fontSize="small" />}
+              href={targetUrl}
+              target="_blank"
+              rel="noopener"
+            >
+              在新标签页打开
+            </Button>
+            <Button
+              size="small"
+              variant="text"
+              startIcon={<RefreshIcon fontSize="small" />}
+              onClick={handleRetry}
+            >
+              重试
+            </Button>
+          </Stack>
+        </Box>
+      )}
+
+      {/* 加载成功后的非阻塞提示条：空白页可能被 X-Frame-Options 拒绝 */}
+      {showHint && status === 'loaded' && !needsProxy && (
+        <Box
+          role="status"
+          sx={{
+            position: 'absolute', left: '50%', transform: 'translateX(-50%)', bottom: 16,
+            zIndex: 3, maxWidth: '92%', display: 'flex', alignItems: 'center', gap: 0.5,
+            px: 1.5, py: 0.5, borderRadius: 2,
+            bgcolor: 'primary.container', color: 'primary.onContainer',
+            border: 1, borderColor: 'divider', boxShadow: (t) => t.shadows[3],
+          }}
+        >
+          <Typography variant="caption" sx={{ fontWeight: 500 }}>
+            若页面空白，可能被 X-Frame-Options 拒绝
+          </Typography>
+          <Button
+            size="small"
+            component="a"
+            href={targetUrl}
+            target="_blank"
+            rel="noopener"
+            sx={{ minHeight: 28, px: 1, color: 'primary.onContainer', fontWeight: 700 }}
+          >
+            在新标签打开
+          </Button>
+          <IconButton size="small" onClick={() => setShowHint(false)} aria-label="关闭提示" sx={{ color: 'inherit' }}>
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        </Box>
+      )}
+    </Box>
+  );
+}

frontend/src/tools/workbench/components/PanelIcon.jsx

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import Box from '@mui/material/Box';
+
+/* ============================================================
+ * 面板图标：Google favicon 服务 + 失败回退（站点首字母 + 确定性 MD3 容器色）
+ *
+ * - 成功：显示 favicon（不变）
+ * - 失败/无 host：显示首字母色块（类似 Google Avatar）——
+ *   背景色从 MD3 容器色（primary/secondary/tertiary.container）按
+ *   域名/标题哈希确定性选取，比默认地球图标更可辨识。
+ * ============================================================ */
+
+/** 确定性回退色板：MD3 token（不硬编码 hex），按哈希循环选取 */
+const FALLBACK_PALETTE = [
+  { bg: 'primary.container', fg: 'primary.onContainer' },
+  { bg: 'secondary.container', fg: 'secondary.onContainer' },
+  { bg: 'tertiary.container', fg: 'tertiary.onContainer' },
+];
+
+function hashString(s) {
+  let h = 0;
+  for (let i = 0; i < s.length; i += 1) h = (h * 31 + s.charCodeAt(i)) | 0;
+  return Math.abs(h);
+}
+
+function hostOf(url) {
+  try {
+    const u = /^[a-z][a-z0-9+.-]*:\/\//i.test(url) ? url : 'https://' + url;
+    return new URL(u).hostname;
+  } catch { return ''; }
+}
+
+export default function PanelIcon({ url, title = '', size = 20, sx = {} }) {
+  const [error, setError] = useState(false);
+  const host = hostOf(url);
+
+  // 首字母 + 确定性颜色
+  const letter = ((title && title[0]) || (host && host[0]) || '?').toUpperCase();
+  const { bg, fg } = FALLBACK_PALETTE[hashString(host || title || '?') % FALLBACK_PALETTE.length];
+
+  // 无 host（内部地址/空）或 favicon 加载失败（404/API 不可达）→ 首字母色块
+  if (!host || error) {
+    return (
+      <Box
+        aria-hidden
+        sx={{
+          width: size, height: size, borderRadius: size / 4, flexShrink: 0,
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          bgcolor: bg, color: fg,
+          fontSize: size * 0.55, fontWeight: 600, lineHeight: 1,
+          ...sx,
+        }}
+      >
+        {letter}
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      aria-hidden
+      sx={{
+        width: size, height: size, borderRadius: size / 4, overflow: 'hidden',
+        flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center',
+        bgcolor: 'background.paper', ...sx,
+      }}
+    >
+      <img
+        src={`https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=64`}
+        alt=""
+        width={size}
+        height={size}
+        loading="lazy"
+        onError={() => setError(true)}
+        style={{ display: 'block' }}
+      />
+    </Box>
+  );
+}

frontend/src/tools/workbench/components/Sidebar.jsx

@@ -0,0 +1,272 @@
+import React, { Fragment, useMemo, useState } from 'react';
+import Box from '@mui/material/Box';
+import List from '@mui/material/List';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Collapse from '@mui/material/Collapse';
+import Divider from '@mui/material/Divider';
+import IconButton from '@mui/material/IconButton';
+import Button from '@mui/material/Button';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import Skeleton from '@mui/material/Skeleton';
+import StarIcon from '@mui/icons-material/Star';
+import StarBorderIcon from '@mui/icons-material/StarBorder';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import FolderOpenIcon from '@mui/icons-material/FolderOpen';
+import AddIcon from '@mui/icons-material/Add';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import WebAssetIcon from '@mui/icons-material/WebAsset';
+import OpenInFullIcon from '@mui/icons-material/OpenInFull';
+import WidgetsIcon from '@mui/icons-material/Widgets';
+import ErrorIcon from '@mui/icons-material/Error';
+import PanelIcon from './PanelIcon.jsx';
+import { OPEN_MODE_EMBED, OPEN_MODE_TAB, OPEN_MODE_MODAL } from '../hooks/usePanels.js';
+
+/* ============================================================
+ * PanelsView：面板列表视图（VSCode 侧边栏「面板」内容）
+ *
+ * - 固定区（pin）+ admin_links 按 category 分组
+ * - 当前项：左侧 2px primary 指示条 + primary-container 选中底
+ * - 分组折叠（持久化）、右键切换打开方式、底部 ＋ 添加
+ * - 搜索时展示扁平结果列表
+ * - 宽度/折叠由外部 react-resizable-panels 布局管理，本组件不再自持
+ * ============================================================ */
+
+const MODE_META = [
+  { mode: OPEN_MODE_EMBED, label: '内嵌打开', Icon: WebAssetIcon },
+  { mode: OPEN_MODE_TAB, label: '新标签打开', Icon: OpenInNewIcon },
+  { mode: OPEN_MODE_MODAL, label: '弹窗打开', Icon: OpenInFullIcon },
+];
+
+export default function PanelsView({
+  loading = false, error = '', onRetry,
+  links = [], filtered = [], search = '',
+  activeId = null, pinned = [], onSelect, onPin,
+  groups = {}, onToggleGroup,
+  modes = {}, onSetMode,
+  onAdd,
+}) {
+  const [ctx, setCtx] = useState(null); // { id, anchorEl }
+
+  const groupOrder = useMemo(() => {
+    const order = []; const seen = new Set();
+    links.forEach((p) => {
+      const c = p.category || '默认';
+      if (!seen.has(c)) { seen.add(c); order.push(c); }
+    });
+    return order;
+  }, [links]);
+
+  const byGroup = useMemo(() => {
+    const m = {};
+    links.forEach((p) => {
+      const c = p.category || '默认';
+      (m[c] = m[c] || []).push(p);
+    });
+    return m;
+  }, [links]);
+
+  const pinnedPanels = links.filter((p) => pinned.includes(String(p.id)));
+
+  const renderItem = (p) => {
+    const selected = String(p.id) === String(activeId);
+    const isPinned = pinned.includes(String(p.id));
+    const mode = modes[p.id] || OPEN_MODE_EMBED;
+    return (
+      <Box
+        key={p.id}
+        sx={{
+          display: 'flex', alignItems: 'center', position: 'relative',
+          '&:hover .wb-pin': { opacity: 1 },
+        }}
+      >
+        <ListItemButton
+          selected={selected}
+          onClick={() => onSelect(p.id)}
+          onContextMenu={(e) => { e.preventDefault(); setCtx({ id: p.id, anchorEl: e.currentTarget }); }}
+          aria-label={`打开面板 ${p.title}`}
+          sx={{
+            flex: 1, minHeight: 40, borderRadius: 0, m: 0, pl: 2, pr: 4,
+            position: 'relative',
+            '&.Mui-selected': {
+              bgcolor: 'primary.container', color: 'primary.onContainer',
+              '&:hover': { bgcolor: 'primary.container' },
+            },
+            '&:hover': { bgcolor: 'action.hover' },
+          }}
+        >
+          {selected && (
+            <Box
+              aria-hidden
+              sx={{
+                position: 'absolute', left: 0, top: '22%', bottom: '22%',
+                width: 2, bgcolor: 'primary.main', borderRadius: 1,
+              }}
+            />
+          )}
+          <PanelIcon url={p.embed_url || p.url} title={p.title} size={20} sx={{ mr: 1 }} />
+          <ListItemText
+            primary={p.title}
+            primaryTypographyProps={{ fontSize: 13, fontWeight: selected ? 600 : 500, noWrap: true }}
+            sx={{ my: 0, minWidth: 0 }}
+          />
+          {mode !== OPEN_MODE_EMBED && (
+            <Box
+              component="span"
+              title={MODE_META.find((m) => m.mode === mode)?.label}
+              sx={{ mr: 0.5, fontSize: 10, color: 'text.disabled', whiteSpace: 'nowrap' }}
+            >
+              {mode === OPEN_MODE_TAB ? '新标签' : '弹窗'}
+            </Box>
+          )}
+        </ListItemButton>
+        <IconButton
+          className="wb-pin"
+          size="small"
+          onClick={() => onPin(p.id)}
+          aria-label={isPinned ? `取消固定 ${p.title}` : `固定 ${p.title}`}
+          sx={{
+            position: 'absolute', right: 4, opacity: isPinned ? 1 : 0,
+            transition: 'opacity .12s ease', color: isPinned ? 'warning.main' : 'text.secondary',
+          }}
+        >
+          {isPinned ? <StarIcon fontSize="small" /> : <StarBorderIcon fontSize="small" />}
+        </IconButton>
+      </Box>
+    );
+  };
+
+  const sectionLabel = (text) => (
+    <Typography
+      component="div"
+      sx={{
+        px: 2, pt: 1.25, pb: 0.5, fontSize: 11, fontWeight: 700,
+        letterSpacing: 0.6, color: 'text.secondary',
+      }}
+    >
+      {text}
+    </Typography>
+  );
+
+  const listBody = (() => {
+    if (loading) {
+      return (
+        <Box sx={{ px: 2, pt: 1 }}>
+          {[0, 1, 2, 3, 4, 5].map((i) => (
+            <Skeleton key={i} variant="rounded" height={36} sx={{ my: 1, bgcolor: 'action.hover' }} />
+          ))}
+        </Box>
+      );
+    }
+    if (error) {
+      return (
+        <Box sx={{ px: 3, py: 4, textAlign: 'center' }}>
+          <ErrorIcon sx={{ fontSize: 32, color: 'error.main', mb: 1 }} />
+          <Typography variant="body2" sx={{ color: 'text.secondary', mb: 1.5 }}>面板加载失败</Typography>
+          <Button size="small" variant="outlined" onClick={onRetry}>重试</Button>
+        </Box>
+      );
+    }
+    if (links.length === 0) {
+      return (
+        <Box sx={{ px: 3, py: 4, textAlign: 'center' }}>
+          <WidgetsIcon sx={{ fontSize: 32, color: 'text.disabled', mb: 1 }} />
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>还没有面板，点击下方按钮添加</Typography>
+        </Box>
+      );
+    }
+    if (search.trim()) {
+      return (
+        <>
+          {sectionLabel(`搜索结果（${filtered.length}）`)}
+          {filtered.length === 0 ? (
+            <Typography variant="body2" sx={{ px: 2, py: 2, color: 'text.secondary' }}>无匹配面板</Typography>
+          ) : (
+            <List dense disablePadding>{filtered.map(renderItem)}</List>
+          )}
+        </>
+      );
+    }
+    return (
+      <>
+        {pinnedPanels.length > 0 && (
+          <>
+            {sectionLabel('固定')}
+            <List dense disablePadding>{pinnedPanels.map(renderItem)}</List>
+            <Divider sx={{ mx: 2, my: 0.5 }} />
+          </>
+        )}
+        {groupOrder.map((name) => {
+          const collapsedGroup = !!groups[name];
+          const items = byGroup[name] || [];
+          return (
+            <Fragment key={name}>
+              <ListItemButton
+                onClick={() => onToggleGroup(name)}
+                aria-expanded={!collapsedGroup}
+                sx={{
+                  minHeight: 36, borderRadius: 0, m: 0, px: 1.5,
+                  '&:hover': { bgcolor: 'action.hover' },
+                }}
+              >
+                <ListItemIcon sx={{ minWidth: 30 }}>
+                  <FolderOpenIcon fontSize="small" sx={{ color: 'text.secondary' }} />
+                </ListItemIcon>
+                <ListItemText
+                  primary={name}
+                  primaryTypographyProps={{ fontSize: 12, fontWeight: 700, letterSpacing: 0.4, color: 'text.secondary' }}
+                  sx={{ my: 0 }}
+                />
+                <Typography variant="caption" sx={{ mr: 0.5, color: 'text.disabled' }}>{items.length}</Typography>
+                {collapsedGroup
+                  ? <ExpandMoreIcon fontSize="small" sx={{ color: 'text.secondary' }} />
+                  : <ExpandLessIcon fontSize="small" sx={{ color: 'text.secondary' }} />}
+              </ListItemButton>
+              <Collapse in={!collapsedGroup} unmountOnExit timeout={150}>
+                <List dense disablePadding>{items.map(renderItem)}</List>
+              </Collapse>
+            </Fragment>
+          );
+        })}
+      </>
+    );
+  })();
+
+  return (
+    <Box sx={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ flex: 1, minHeight: 0, overflowY: 'auto', overflowX: 'hidden' }}>
+        {listBody}
+      </Box>
+      <Divider sx={{ flexShrink: 0 }} />
+      <Box sx={{ p: 1, flexShrink: 0 }}>
+        <Button fullWidth size="small" startIcon={<AddIcon />} onClick={onAdd}>添加面板</Button>
+      </Box>
+
+      {/* 右键菜单：切换打开方式 */}
+      <Menu
+        open={!!ctx}
+        anchorEl={ctx?.anchorEl || null}
+        onClose={() => setCtx(null)}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+      >
+        {MODE_META.map(({ mode, label, Icon }) => (
+          <MenuItem
+            key={mode}
+            selected={(modes[ctx?.id] || OPEN_MODE_EMBED) === mode}
+            onClick={() => {
+              if (ctx) { onSetMode(ctx.id, mode); onSelect(ctx.id); }
+              setCtx(null);
+            }}
+          >
+            <Icon fontSize="small" sx={{ mr: 1, color: 'text.secondary' }} />
+            {label}
+          </MenuItem>
+        ))}
+      </Menu>
+    </Box>
+  );
+}

frontend/src/tools/workbench/components/SidebarPane.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import Button from '@mui/material/Button';
+
+/* ============================================================
+ * SidebarPane：VSCode 风格侧边栏容器（一侧一个）
+ *
+ * - 该侧全部 sidebar 模式视图**常驻挂载**（display 显隐切换），
+ *   切换视图/切标签页不丢编辑状态（记事本草稿、密码箱解锁态）
+ * - 每个视图由 ToolWindow 提供标题栏；内容按 activeView 显示
+ * - 视图处于 tab 模式时该视图不在侧栏 → 显示占位 + 「移回侧边栏」
+ * - 无障碍：容器 id=wb-sidebar-{side} 供活动栏 aria-controls；
+ *   aria-live 播报当前视图，配合活动栏焦点提示
+ * ============================================================ */
+
+export default function SidebarPane({ side, views, activeId, renderView, renderPlaceholder }) {
+  const right = side === 'right';
+  const activeView = views.find((v) => v.id === activeId);
+  return (
+    <Box
+      component="aside"
+      id={`wb-sidebar-${side}`}
+      aria-label={right ? '右侧侧边栏' : '左侧侧边栏'}
+      sx={{
+        height: '100%', minWidth: 0, overflow: 'hidden', position: 'relative',
+        display: 'flex', flexDirection: 'column',
+        bgcolor: 'background.paper',
+      }}
+    >
+      {/* 活动栏激活后的屏幕阅读器播报（视觉隐藏） */}
+      <Box
+        aria-live="polite"
+        sx={{
+          position: 'absolute', width: 1, height: 1, overflow: 'hidden',
+          clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap', m: -1, p: 0, border: 0,
+        }}
+      >
+        {activeView ? `当前视图：${activeView.label}` : '侧边栏为空'}
+      </Box>
+
+      {views.map((v) => {
+        const active = activeId === v.id;
+        return (
+          <Box
+            key={v.id}
+            sx={{
+              flex: 1, minHeight: 0, display: active ? 'flex' : 'none',
+              flexDirection: 'column',
+            }}
+          >
+            {renderView(v.id)}
+          </Box>
+        );
+      })}
+      {views.length === 0 && (
+        <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center', px: 3, textAlign: 'center' }}>
+          <Typography variant="caption" sx={{ color: 'text.disabled' }}>
+            从另一侧活动栏拖一个功能标签到这里
+          </Typography>
+        </Box>
+      )}
+      {views.length > 0 && !views.some((v) => v.id === activeId) && renderPlaceholder && (
+        <Box sx={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 1, px: 3, textAlign: 'center' }}>
+          {renderPlaceholder()}
+        </Box>
+      )}
+    </Box>
+  );
+}

frontend/src/tools/workbench/components/StatusBar.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+
+/* ============================================================
+ * StatusBar：底部状态栏（可选，VSCode 风格）
+ * 左：当前上下文；右：主机:端口 + 版本
+ * ============================================================ */
+
+export default function StatusBar({ left, right = null }) {
+  const host = typeof window !== 'undefined' ? window.location.host : '';
+  return (
+    <Box
+      role="status"
+      sx={{
+        height: 24, flexShrink: 0, display: 'flex', alignItems: 'center',
+        px: 1.5, gap: 1.5, bgcolor: 'primary.container', color: 'primary.onContainer',
+        fontSize: 11, borderTop: 1, borderColor: 'divider',
+      }}
+    >
+      <Box
+        component="span"
+        aria-hidden
+        sx={{ width: 7, height: 7, borderRadius: '50%', bgcolor: 'success.main', flexShrink: 0 }}
+      />
+      <Typography noWrap sx={{ fontSize: 11, fontWeight: 500, flex: 1, minWidth: 0 }}>{left}</Typography>
+      <Typography noWrap sx={{ fontSize: 11, opacity: 0.85 }}>{right || host}</Typography>
+    </Box>
+  );
+}

frontend/src/tools/workbench/components/TabStrip.jsx

@@ -0,0 +1,113 @@
+import React, { useRef } from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import CloseIcon from '@mui/icons-material/Close';
+import AddIcon from '@mui/icons-material/Add';
+
+/* ============================================================
+ * TabStrip：主区标签页条（VSCode 风格，浏览器标签交互）
+ *
+ * - tabs：{ key, title, icon?, closable? }；iframe 面板与
+ *   tab 模式视图共用一套标签（由 Workbench 拼装）
+ * - 键盘：← → 切换、Home/End 首尾（roving tabindex）
+ * - ARIA：每个 tab 与 ContentView 的 tabpanel 通过 id 配对
+ *   （tabBtnId / tabPanelId，冒号等字符已做无害化）
+ * ============================================================ */
+
+/** tab 按钮元素 id：tab.key 可能含 ':'，替换为下划线保证合法 */
+export function tabBtnId(key) {
+  return 'wb-tab-' + String(key).replace(/[^a-zA-Z0-9_-]/g, '_');
+}
+
+/** 对应 tabpanel 元素 id */
+export function tabPanelId(key) {
+  return 'wb-panel-' + String(key).replace(/[^a-zA-Z0-9_-]/g, '_');
+}
+
+export default function TabStrip({ tabs, activeKey, onSelect, onClose, onAdd }) {
+  const stripRef = useRef(null);
+
+  const tabEls = () => Array.from(stripRef.current?.querySelectorAll('[role="tab"]') || []);
+  const moveTo = (i) => {
+    const n = tabs.length;
+    if (n === 0) return;
+    const j = ((i % n) + n) % n;
+    onSelect(tabs[j].key);
+    tabEls()[j]?.focus();
+  };
+  const handleKeyDown = (e, index) => {
+    if (e.key === 'ArrowRight') { e.preventDefault(); moveTo(index + 1); }
+    else if (e.key === 'ArrowLeft') { e.preventDefault(); moveTo(index - 1); }
+    else if (e.key === 'Home') { e.preventDefault(); moveTo(0); }
+    else if (e.key === 'End') { e.preventDefault(); moveTo(tabs.length - 1); }
+  };
+
+  return (
+    <Box
+      ref={stripRef}
+      role="tablist"
+      aria-label="已打开的面板与视图"
+      sx={{
+        display: 'flex', alignItems: 'center', gap: 0.25, px: 0.5, py: 0.5,
+        height: 40, flexShrink: 0, bgcolor: 'background.paper',
+        borderBottom: 1, borderColor: 'divider',
+        overflowX: 'auto', overflowY: 'hidden',
+      }}
+    >
+      {tabs.map((tab, index) => {
+        const active = tab.key === activeKey;
+        return (
+          <Box
+            key={tab.key}
+            id={tabBtnId(tab.key)}
+            role="tab"
+            aria-selected={active}
+            aria-label={tab.title}
+            aria-controls={tabPanelId(tab.key)}
+            tabIndex={active ? 0 : -1}
+            onClick={() => onSelect(tab.key)}
+            onKeyDown={(e) => handleKeyDown(e, index)}
+            sx={{
+              display: 'flex', alignItems: 'center', gap: 0.5, pl: 1, pr: 0.25,
+              height: 28, borderRadius: 1, cursor: 'pointer', flexShrink: 0, outline: 'none',
+              bgcolor: active ? 'primary.container' : 'transparent',
+              color: active ? 'primary.onContainer' : 'text.secondary',
+              '&:hover': { bgcolor: active ? 'primary.container' : 'action.hover' },
+              '&:focus-visible': { boxShadow: (t) => `inset 0 0 0 2px ${t.palette.primary.main}` },
+            }}
+          >
+            {tab.icon}
+            <Typography
+              noWrap
+              sx={{
+                fontSize: 12, fontWeight: active ? 600 : 500, maxWidth: 140,
+                overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+              }}
+            >
+              {tab.title}
+            </Typography>
+            {tab.closable && (
+              <IconButton
+                size="small"
+                onClick={(e) => { e.stopPropagation(); onClose(tab.key); }}
+                aria-label={`关闭 ${tab.title}`}
+                sx={{ width: 20, height: 20, borderRadius: 0.5, '& svg': { fontSize: 14 } }}
+              >
+                <CloseIcon />
+              </IconButton>
+            )}
+          </Box>
+        );
+      })}
+      {onAdd && (
+        <Tooltip title="添加面板">
+          <IconButton size="small" onClick={onAdd} sx={{ ml: 0.25, flexShrink: 0 }} aria-label="添加面板">
+            <AddIcon sx={{ fontSize: 16 }} />
+          </IconButton>
+        </Tooltip>
+      )}
+    </Box>
+  );
+}

frontend/src/tools/workbench/components/ToolWindow.jsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import ViewSidebarIcon from '@mui/icons-material/ViewSidebar';
+import TabIcon from '@mui/icons-material/Tab';
+import OpenInFullIcon from '@mui/icons-material/OpenInFull';
+import CloseIcon from '@mui/icons-material/Close';
+import { VIEW_MODE_SIDEBAR, VIEW_MODE_TAB } from '../hooks/useWorkbenchLayout.js';
+
+/* ============================================================
+ * ToolWindow：通用可停靠面板（侧边栏 / 标签页双模式 + 浮动占位）
+ *
+ * - 标题栏：图标 + 标题 + 模式切换（侧边栏/标签页）+ 浮动占位按钮
+ *   （P2 未实现，点击只触发 onFloat 提示）+ 关闭按钮 + 自定义 actions
+ * - 纯展示组件，无内部状态；模式/关闭行为由父级注入
+ * ============================================================ */
+
+export default function ToolWindow({ icon, title, mode, onSetMode, onFloat, onClose, closeTitle = '关闭', actions = null, children }) {
+  const modeBtn = (m, label, MIcon) => (
+    <Tooltip key={m} title={label}>
+      <IconButton
+        size="small"
+        onClick={() => onSetMode?.(m)}
+        aria-label={label}
+        aria-pressed={mode === m}
+        sx={{
+          width: 26, height: 26, borderRadius: 1,
+          color: mode === m ? 'primary.main' : 'text.secondary',
+          bgcolor: mode === m ? 'action.selected' : 'transparent',
+          '&:hover': { bgcolor: mode === m ? 'action.selected' : 'action.hover' },
+        }}
+      >
+        <MIcon sx={{ fontSize: 15 }} />
+      </IconButton>
+    </Tooltip>
+  );
+
+  return (
+    <Box
+      sx={{
+        display: 'flex', alignItems: 'center', gap: 0.25,
+        px: 1.25, height: 44, flexShrink: 0,
+        bgcolor: 'background.paper', borderBottom: 1, borderColor: 'divider',
+      }}
+    >
+      {icon}
+      <Typography noWrap sx={{ flex: 1, minWidth: 0, ml: 0.25, fontSize: 13, fontWeight: 600 }}>
+        {title}
+      </Typography>
+      {modeBtn(VIEW_MODE_SIDEBAR, '侧边栏模式', ViewSidebarIcon)}
+      {modeBtn(VIEW_MODE_TAB, '标签页模式', TabIcon)}
+      {onFloat && (
+        <Tooltip title="浮动模式（即将上线）">
+          <IconButton
+            size="small"
+            onClick={onFloat}
+            aria-label="浮动模式"
+            sx={{ width: 26, height: 26, borderRadius: 1 }}
+          >
+            <OpenInFullIcon sx={{ fontSize: 15 }} />
+          </IconButton>
+        </Tooltip>
+      )}
+      {actions}
+      {onClose && (
+        <Tooltip title={closeTitle}>
+          <IconButton
+            size="small"
+            onClick={onClose}
+            aria-label={closeTitle}
+            sx={{ width: 26, height: 26, borderRadius: 1 }}
+          >
+            <CloseIcon sx={{ fontSize: 15 }} />
+          </IconButton>
+        </Tooltip>
+      )}
+    </Box>
+  );
+}

frontend/src/tools/workbench/components/Toolbar.jsx

@@ -0,0 +1,143 @@
+import React, { useRef } from 'react';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import Button from '@mui/material/Button';
+import Divider from '@mui/material/Divider';
+import InputBase from '@mui/material/InputBase';
+import { useTheme } from '@mui/material/styles';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import SearchIcon from '@mui/icons-material/Search';
+import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import HomeIcon from '@mui/icons-material/Home';
+import MenuBar from './MenuBar.jsx';
+import PanelIcon from './PanelIcon.jsx';
+
+/* ============================================================
+ * Toolbar：VSCode 风格顶栏（高度 56px）
+ *
+ *  Rain Work(渐变字标) | 菜单栏 | ← → ↻ | 地址栏(自适应填满) | 搜索 | 返回
+ * - 地址栏仅展示当前面板 URL（嵌入地址优先），只读、可点开新标签；
+ *   flex:1 填满顶栏剩余空间，左侧内容变宽时自然缩减
+ * - 搜索框：面板名/URL/分组，Enter 直达（逻辑由 Workbench 注入）
+ * ============================================================ */
+
+export default function Toolbar({
+  menus = [],
+  canBack = false, canForward = false, onBack, onForward, onRefresh,
+  currentPanel = null, onOpenExternal,
+  search = '', onSearchChange, onSearchEnter,
+  searchInputRef = null, onBackHome,
+}) {
+  const muiTheme = useTheme();
+  const searchRef = useRef(null);
+  const inputRef = searchInputRef || searchRef;
+
+  const currentUrl = currentPanel ? (currentPanel.embed_url || currentPanel.url || '') : '';
+  const logoGradient = `linear-gradient(135deg, ${muiTheme.palette.primary.main} 0%, ${muiTheme.palette.tertiary.main} 100%)`;
+
+  return (
+    <Box
+      component="header"
+      sx={{
+        height: 56, flexShrink: 0, display: 'flex', alignItems: 'center',
+        gap: 0.5, px: 1, zIndex: 10,
+        bgcolor: 'background.paper', borderBottom: 1, borderColor: 'divider',
+      }}
+    >
+      {/* 品牌：纯文字 Logo，MD3 渐变字重 */}
+      <Box
+        component="span"
+        aria-label="Rain Work"
+        sx={{
+          fontSize: 19.5, fontWeight: 700, letterSpacing: 0.4, mr: 1, flexShrink: 0,
+          background: logoGradient, WebkitBackgroundClip: 'text', backgroundClip: 'text',
+          WebkitTextFillColor: 'transparent', color: 'transparent',
+          userSelect: 'none',
+        }}
+      >
+        Rain Work
+      </Box>
+
+      <MenuBar menus={menus} />
+
+      <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
+
+      {/* 导航：后退 / 前进 / 刷新 */}
+      <Tooltip title="后退">
+        <span><IconButton size="small" onClick={onBack} disabled={!canBack} aria-label="后退"><ArrowBackIcon fontSize="small" /></IconButton></span>
+      </Tooltip>
+      <Tooltip title="前进">
+        <span><IconButton size="small" onClick={onForward} disabled={!canForward} aria-label="前进"><ArrowForwardIcon fontSize="small" /></IconButton></span>
+      </Tooltip>
+      <Tooltip title="刷新当前面板">
+        <span><IconButton size="small" onClick={onRefresh} disabled={!currentPanel} aria-label="刷新"><RefreshIcon fontSize="small" /></IconButton></span>
+      </Tooltip>
+
+      {/* 地址栏（只读，flex:1 自适应填满顶栏剩余空间；无 maxWidth 上限，
+          左侧菜单/导航变宽时自然缩减，顶栏始终占满） */}
+      <Box
+        role="textbox"
+        aria-label="当前面板地址"
+        sx={{
+          flex: 1, minWidth: 120, maxWidth: 'none', display: 'flex', alignItems: 'center', gap: 0.75,
+          mx: 0.75, height: 34, px: 1.25,
+          bgcolor: 'background.default', border: 1, borderColor: 'divider', borderRadius: 1.25,
+          '&:focus-within': { borderColor: 'primary.main' },
+        }}
+      >
+        {currentPanel && <PanelIcon url={currentUrl} title={currentPanel.title} size={16} />}
+        <InputBase
+          readOnly
+          fullWidth
+          value={currentUrl}
+          placeholder="未打开面板"
+          inputProps={{ 'aria-label': '当前面板地址', style: { cursor: 'default', fontSize: 12.5 } }}
+          sx={{ color: 'text.secondary' }}
+        />
+        {currentPanel && (
+          <Tooltip title="在新标签页打开原站">
+            <IconButton size="small" onClick={onOpenExternal} aria-label="在新标签页打开原站">
+              <OpenInNewIcon sx={{ fontSize: 16 }} />
+            </IconButton>
+          </Tooltip>
+        )}
+      </Box>
+
+      {/* 搜索 */}
+      <Box sx={{ position: 'relative', flexShrink: 0 }}>
+        <SearchIcon
+          sx={{
+            position: 'absolute', left: 9, top: '50%', transform: 'translateY(-50%)',
+            fontSize: 16, color: 'text.secondary', pointerEvents: 'none',
+          }}
+        />
+        <InputBase
+          ref={inputRef}
+          value={search}
+          onChange={(e) => onSearchChange?.(e.target.value)}
+          onKeyDown={(e) => { if (e.key === 'Enter') { onSearchEnter?.(); inputRef.current?.blur(); } }}
+          placeholder="搜索面板"
+          inputProps={{ 'aria-label': '搜索面板', style: { paddingLeft: 30, fontSize: 12.5 } }}
+          sx={{
+            height: 34, width: { xs: 100, sm: 150 }, px: 0.5,
+            bgcolor: 'background.default', border: 1, borderColor: 'divider',
+            borderRadius: 20, '&:focus-within': { borderColor: 'primary.main' },
+          }}
+        />
+      </Box>
+
+      {/* 返回前台 */}
+      <Button
+        color="inherit"
+        onClick={onBackHome}
+        startIcon={<HomeIcon sx={{ fontSize: 17 }} />}
+        sx={{ ml: 0.5, minWidth: 0, px: { xs: 1, sm: 1.25 }, flexShrink: 0, '& .MuiButton-startIcon': { mr: { xs: 0, sm: 0.5 } } }}
+      >
+        <Box component="span" sx={{ display: { xs: 'none', sm: 'inline' }, fontSize: 13 }}>返回</Box>
+      </Button>
+    </Box>
+  );
+}

frontend/src/tools/workbench/components/VaultDrawer.jsx

@@ -0,0 +1,390 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import IconButton from '@mui/material/IconButton';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import InputAdornment from '@mui/material/InputAdornment';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Collapse from '@mui/material/Collapse';
+import CircularProgress from '@mui/material/CircularProgress';
+import Tooltip from '@mui/material/Tooltip';
+import CloseIcon from '@mui/icons-material/Close';
+import LockIcon from '@mui/icons-material/Lock';
+import LockOpenIcon from '@mui/icons-material/LockOpen';
+import KeyIcon from '@mui/icons-material/Key';
+import SearchIcon from '@mui/icons-material/Search';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import VisibilityIcon from '@mui/icons-material/Visibility';
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import ErrorIcon from '@mui/icons-material/Error';
+import useVault from '../hooks/useVault.js';
+import { showSnack } from '../../../admin/snack.jsx';
+
+/* ============================================================
+ * VaultView：密码箱视图（VSCode 侧边栏 / 标签页内容）
+ *
+ * 由 VaultDrawer 裁剪：去掉 MUI Drawer 壳与自带标题栏/关闭按钮
+ * （由父级 ToolWindow 提供），锁定按钮并入解锁后的搜索行。
+ * 标题栏之外全部逻辑保留：
+ *   loading → noPin（引导设置）| locked（PIN 输入）→ unlocked（搜索+条目）
+ * 「锁定」走 lock API；切换视图不锁定，方便取用。
+ * @param {{open: boolean}} open 视图是否处于激活（激活时重新同步服务端状态）
+ * ============================================================ */
+
+/** 剪贴板写入：优先 Async Clipboard，失败时降级 execCommand（非安全上下文/LAN 部署） */
+async function copyText(text) {
+  if (!text) return false;
+  try {
+    await navigator.clipboard.writeText(text);
+    return true;
+  } catch {
+    try {
+      const ta = document.createElement('textarea');
+      ta.value = text;
+      ta.setAttribute('readonly', '');
+      ta.style.position = 'fixed';
+      ta.style.left = '-9999px';
+      ta.style.top = '0';
+      document.body.appendChild(ta);
+      ta.select();
+      const ok = document.execCommand('copy');
+      document.body.removeChild(ta);
+      return ok;
+    } catch { return false; }
+  }
+}
+
+/** 展开详情中的单字段行：标签 + 值（网址可点开）+ 复制按钮 */
+function DetailField({ label, value, href, secret, onCopy }) {
+  // 防注入：仅放行 http(s)/mailto，其余协议降级为纯文本
+  const safeHref = href && /^(https?|mailto):/i.test(href) ? href : null;
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, py: 0.75, minWidth: 0 }}>
+      <Typography variant="caption" sx={{ color: 'text.secondary', width: 40, flexShrink: 0 }}>{label}</Typography>
+      {safeHref ? (
+        <Typography
+          variant="body2"
+          component="a"
+          href={safeHref}
+          target="_blank"
+          rel="noopener noreferrer"
+          title={value}
+          sx={{
+            flexGrow: 1, minWidth: 0, color: 'primary.main',
+            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+          }}
+        >
+          {value}
+        </Typography>
+      ) : (
+        <Typography
+          variant="body2"
+          title={value}
+          sx={{
+            flexGrow: 1, minWidth: 0,
+            overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap',
+            fontFamily: secret ? 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace' : undefined,
+            letterSpacing: secret ? '0.04em' : undefined,
+          }}
+        >
+          {value || '—'}
+        </Typography>
+      )}
+      {onCopy ? (
+        <IconButton size="small" aria-label={`复制${label}`} onClick={onCopy} sx={{ flexShrink: 0 }}>
+          <ContentCopyIcon sx={{ fontSize: 15 }} />
+        </IconButton>
+      ) : null}
+    </Box>
+  );
+}
+
+/** 单条密码：行内标题 + 用户名 + 复制密码，点击展开详情 */
+function VaultEntryRow({ entry, expanded, onToggle, onCopy }) {
+  return (
+    <ListItem disablePadding sx={{ display: 'block' }}>
+      <ListItemButton
+        onClick={onToggle}
+        selected={expanded}
+        aria-expanded={expanded}
+        sx={{ pr: 1 }}
+      >
+        <ListItemIcon>
+          <KeyIcon fontSize="small" />
+        </ListItemIcon>
+        <ListItemText
+          primary={entry.title}
+          secondary={entry.username || '无用户名'}
+          primaryTypographyProps={{ noWrap: true, fontWeight: 500 }}
+          secondaryTypographyProps={{ noWrap: true }}
+        />
+        <Tooltip title="复制密码">
+          <IconButton
+            size="small"
+            aria-label={`复制 ${entry.title} 的密码`}
+            onClick={(e) => { e.stopPropagation(); onCopy(entry.password, '密码'); }}
+          >
+            <ContentCopyIcon fontSize="small" />
+          </IconButton>
+        </Tooltip>
+        <ExpandMoreIcon
+          fontSize="small"
+          sx={{
+            color: 'text.secondary', ml: 0.25,
+            transform: expanded ? 'rotate(180deg)' : 'none',
+            transition: 'transform 0.2s ease',
+          }}
+        />
+      </ListItemButton>
+      <Collapse in={expanded} unmountOnExit>
+        <Box sx={{ px: 2, py: 1, mx: 1, mb: 1, bgcolor: 'action.hover', borderRadius: 2 }}>
+          <DetailField
+            label="用户名"
+            value={entry.username}
+            onCopy={entry.username ? () => onCopy(entry.username, '用户名') : undefined}
+          />
+          <DetailField
+            label="密码"
+            value={entry.password}
+            secret
+            onCopy={entry.password ? () => onCopy(entry.password, '密码') : undefined}
+          />
+          {entry.url ? (
+            <DetailField label="网址" value={entry.url} href={entry.url} onCopy={() => onCopy(entry.url, '网址')} />
+          ) : null}
+          {entry.notes ? <DetailField label="备注" value={entry.notes} /> : null}
+        </Box>
+      </Collapse>
+    </ListItem>
+  );
+}
+
+/**
+ * 密码箱视图
+ * @param {boolean} open 视图是否激活（激活时重新同步服务端会话状态）
+ */
+export default function VaultView({ open = false }) {
+  const vault = useVault({ open });
+
+  // PIN 输入屏的本地状态
+  const [pinInput, setPinInput] = useState('');
+  const [pinError, setPinError] = useState('');
+  const [showPin, setShowPin] = useState(false);
+  // 展开中的条目 id（重新打开时清空）
+  const [expandedId, setExpandedId] = useState(null);
+
+  useEffect(() => {
+    if (open) {
+      setPinInput('');
+      setPinError('');
+      setShowPin(false);
+      setExpandedId(null);
+    }
+  }, [open]);
+
+  const submitUnlock = useCallback(async () => {
+    const pin = pinInput.trim();
+    if (!pin) { setPinError('请输入 PIN 码'); return; }
+    setPinError('');
+    try {
+      await vault.unlock(pin);
+      setPinInput('');
+      setShowPin(false);
+      showSnack('已解锁');
+    } catch (e) {
+      setPinError(e.message || '解锁失败');
+      setPinInput('');
+    }
+  }, [pinInput, vault]);
+
+  const handleLock = useCallback(async () => {
+    try {
+      await vault.lock();
+      setExpandedId(null);
+      showSnack('已锁定');
+    } catch (e) {
+      showSnack(e.message || '锁定失败', 'error');
+    }
+  }, [vault]);
+
+  const copyToClipboard = useCallback(async (text, label) => {
+    const ok = await copyText(text);
+    if (ok) showSnack(`${label} 已复制`);
+    else showSnack('复制失败', 'error');
+  }, []);
+
+  /* ---------- 各状态下的主体 ---------- */
+
+  const renderBody = () => {
+    switch (vault.status) {
+      case 'loading':
+        return (
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 2 }}>
+            <CircularProgress size={28} />
+            <Typography variant="body2" color="text.secondary">正在检查密码库状态…</Typography>
+          </Box>
+        );
+
+      case 'error':
+        return (
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 1.5, textAlign: 'center', px: 2 }}>
+            <ErrorIcon color="error" sx={{ fontSize: 40 }} />
+            <Typography variant="body2" color="text.secondary">{vault.statusError}</Typography>
+            <Button variant="outlined" onClick={vault.checkStatus} sx={{ mt: 1 }}>重试</Button>
+          </Box>
+        );
+
+      case 'noPin':
+        return (
+          <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', height: '100%', gap: 1.5, textAlign: 'center', px: 2 }}>
+            <LockOpenIcon sx={{ fontSize: 44, color: 'text.disabled' }} />
+            <Typography variant="subtitle1" sx={{ fontWeight: 500 }}>未设置 PIN</Typography>
+            <Typography variant="body2" color="text.secondary">请先到密码库页设置 PIN 后再使用</Typography>
+            <Button variant="contained" component="a" href="/passwords.html" sx={{ mt: 1 }}>前往密码库页</Button>
+          </Box>
+        );
+
+      case 'locked':
+        return (
+          <Box component="form" onSubmit={(e) => { e.preventDefault(); submitUnlock(); }} sx={{ mt: 1 }}>
+            <Typography variant="subtitle1" sx={{ mb: 1.5, fontWeight: 500 }}>输入 PIN 码解锁</Typography>
+            <TextField
+              autoFocus
+              fullWidth
+              size="small"
+              type={showPin ? 'text' : 'password'}
+              label="PIN 码"
+              value={pinInput}
+              onChange={(e) => { setPinInput(e.target.value); if (pinError) setPinError(''); }}
+              onKeyDown={(e) => { if (e.key === 'Enter') submitUnlock(); }}
+              error={!!pinError}
+              helperText={pinError || ' '}
+              autoComplete="off"
+              spellCheck={false}
+              slotProps={{
+                htmlInput: { maxLength: 20, 'aria-label': 'PIN 码' },
+                input: {
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <IconButton
+                        size="small"
+                        edge="end"
+                        aria-label={showPin ? '隐藏 PIN' : '显示 PIN'}
+                        onClick={() => setShowPin((v) => !v)}
+                      >
+                        {showPin ? <VisibilityOffIcon fontSize="small" /> : <VisibilityIcon fontSize="small" />}
+                      </IconButton>
+                    </InputAdornment>
+                  ),
+                },
+              }}
+            />
+            <Button
+              variant="contained"
+              fullWidth
+              disabled={vault.unlocking || !pinInput}
+              onClick={submitUnlock}
+              startIcon={vault.unlocking ? <CircularProgress size={18} color="inherit" /> : <LockOpenIcon />}
+              sx={{ mt: 2 }}
+            >
+              {vault.unlocking ? '解锁中…' : '解锁'}
+            </Button>
+          </Box>
+        );
+
+      case 'unlocked':
+      default: {
+        const { entries, entriesError, filteredEntries, search, setSearch } = vault;
+        const empty = filteredEntries.length === 0;
+        return (
+          <Box>
+            {/* 搜索 + 锁定（标题栏由 ToolWindow 提供，锁定并入此行） */}
+            <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.5 }}>
+              <TextField
+                fullWidth
+                size="small"
+                placeholder="搜索标题或用户名"
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+                slotProps={{
+                  htmlInput: { 'aria-label': '搜索密码' },
+                  input: {
+                    startAdornment: (
+                      <InputAdornment position="start">
+                        <SearchIcon fontSize="small" sx={{ color: 'text.secondary' }} />
+                      </InputAdornment>
+                    ),
+                    endAdornment: search ? (
+                      <InputAdornment position="end">
+                        <IconButton size="small" edge="end" aria-label="清空搜索" onClick={() => setSearch('')}>
+                          <CloseIcon fontSize="small" />
+                        </IconButton>
+                      </InputAdornment>
+                    ) : null,
+                  },
+                }}
+              />
+              <Tooltip title="锁定密码库">
+                <span>
+                  <IconButton aria-label="锁定密码库" onClick={handleLock} disabled={vault.locking} size="small">
+                    <LockIcon fontSize="small" />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            </Box>
+
+            {entries === null && (
+              <Box sx={{ display: 'flex', justifyContent: 'center', py: 4 }}>
+                <CircularProgress size={26} />
+              </Box>
+            )}
+
+            {entriesError && (
+              <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 1, py: 3, textAlign: 'center' }}>
+                <ErrorIcon color="error" />
+                <Typography variant="body2" color="text.secondary">加载失败：{entriesError}</Typography>
+                <Button size="small" variant="outlined" onClick={vault.loadEntries}>重试</Button>
+              </Box>
+            )}
+
+            {entries && !entriesError && empty && (
+              <Box sx={{ textAlign: 'center', py: 4 }}>
+                <Typography variant="body2" color="text.secondary">
+                  {search ? '无匹配的密码记录' : '暂无密码记录'}
+                </Typography>
+              </Box>
+            )}
+
+            {entries && !entriesError && !empty && (
+              <List disablePadding>
+                {filteredEntries.map((e) => (
+                  <VaultEntryRow
+                    key={e.id}
+                    entry={e}
+                    expanded={expandedId === e.id}
+                    onToggle={() => setExpandedId(expandedId === e.id ? null : e.id)}
+                    onCopy={copyToClipboard}
+                  />
+                ))}
+              </List>
+            )}
+          </Box>
+        );
+      }
+    }
+  };
+
+  return (
+    <Box component="section" aria-label="密码箱" sx={{ flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ flex: 1, minHeight: 0, overflowY: 'auto', px: 1.5, py: 1.5 }}>
+        {renderBody()}
+      </Box>
+    </Box>
+  );
+}

frontend/src/tools/workbench/hooks/useNotes.js

@@ -0,0 +1,231 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import * as notesApi from '../../../api/notes.js';
+import { showSnack } from '../../../admin/snack.jsx';
+
+/* ============================================================
+ * useNotes：工作台「记事本」状态管理
+ *
+ * - 列表加载/错误态、当前编辑文件（activeName）、草稿内容 + 服务端快照
+ * - 自动保存：输入防抖 900ms；Ctrl+S 立即保存（dirty = 草稿 ≠ 快照）
+ * - 新建 / 重命名（新文件 + 删旧文件）/ 删除，全程复用 notes API
+ * - 会话保持（sidebar↔tab 模式切换/切视图会重挂载组件）：
+ *   · 草稿存模块级 sessionCache，重挂载瞬间恢复，光标上下文不丢
+ *   · activeName 持久化到 localStorage（workbench.notesActive），跨刷新恢复上次文件
+ *   · 监听 window 'workbench:notes-save-request'（Workbench 切换模式前派发），
+ *     立即 flush 未落盘的 <900ms 草稿
+ * ============================================================ */
+
+const AUTOSAVE_MS = 900;
+const NOTES_ACTIVE_KEY = 'workbench.notesActive';
+
+/** 模块级草稿缓存：组件重挂载后直接恢复，不依赖服务端往返 */
+const sessionCache = { name: null, text: '' };
+
+export default function useNotes() {
+  const [notes, setNotes] = useState(null);           // null = 加载中
+  const [loadError, setLoadError] = useState('');
+  const [activeName, setActiveName] = useState(() => {
+    try { return localStorage.getItem(NOTES_ACTIVE_KEY) || null; } catch { return null; }
+  });
+  // 草稿与快照初始化取自缓存（若缓存有同名文件），避免模式切换丢内容
+  const [content, setContent] = useState(() => (sessionCache.name ? sessionCache.text : ''));
+  const [savedContent, setSavedContent] = useState(() => (sessionCache.name ? sessionCache.text : ''));
+  const [saving, setSaving] = useState(false);         // 保存请求进行中
+  const [busy, setBusy] = useState(false);             // 打开/新建/重命名进行中
+
+  const draftRef = useRef({ name: null, text: '' });   // 最新草稿（供防抖回调读取）
+  const debounceRef = useRef(null);
+  const restoredRef = useRef(false);                   // 恢复会话只执行一次
+
+  // ---- 列表加载（静默刷新：保留现有列表，避免自动保存时闪烁） ----
+  const refresh = useCallback(() => {
+    setLoadError('');
+    return notesApi.listNotes()
+      .then((ls) => {
+        const arr = Array.isArray(ls) ? ls : [];
+        setNotes(arr);
+        setActiveName((prev) => (prev && arr.some((n) => n.name === prev) ? prev : null));
+      })
+      .catch((e) => { setLoadError(e.message || '加载失败'); });
+  }, []);
+
+  useEffect(() => { refresh(); }, [refresh]);
+
+  // ---- 保存（PUT） ----
+  // 注意：必须声明在引用它的 useEffect（会话恢复 / save-request 监听）之前，
+  // 否则渲染期求值依赖数组会触发 TDZ（Cannot access before initialization）。
+  const saveContent = useCallback((name, text) => {
+    setSaving(true);
+    return notesApi.updateNote(name, text)
+      .then((res) => {
+        setSavedContent(text);
+        sessionCache.text = text;
+        setNotes((prev) => (prev
+          ? prev.map((n) => (n.name === res.name ? { ...n, size: res.size, mtime: res.mtime } : n))
+          : prev));
+      })
+      .catch((e) => showSnack(e.message, 'error'))
+      .finally(() => setSaving(false));
+  }, []);
+
+  // ---- 会话恢复（挂载一次）：缓存有同名草稿→直接恢复并推给服务端（幂等）；
+  //      无缓存但记住了文件名→从服务端读取 ----
+  useEffect(() => {
+    if (restoredRef.current) return;
+    if (activeName === null) { restoredRef.current = true; return; }
+    if (sessionCache.name === activeName) {
+      restoredRef.current = true;
+      saveContent(activeName, sessionCache.text);
+      return;
+    }
+    restoredRef.current = true;
+    open(activeName);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ---- activeName 持久化（模式切换/刷新后恢复上次文件） ----
+  useEffect(() => {
+    try {
+      if (activeName) localStorage.setItem(NOTES_ACTIVE_KEY, activeName);
+      else localStorage.removeItem(NOTES_ACTIVE_KEY);
+    } catch { /* 隐私模式忽略 */ }
+  }, [activeName]);
+
+  // ---- 模式切换前的显式保存：Workbench 派发 workbench:notes-save-request ----
+  useEffect(() => {
+    const handler = () => {
+      clearTimeout(debounceRef.current);
+      const d = draftRef.current;
+      if (d.name) saveContent(d.name, d.text);
+    };
+    window.addEventListener('workbench:notes-save-request', handler);
+    return () => window.removeEventListener('workbench:notes-save-request', handler);
+  }, [saveContent]);
+
+  // 当前文件被外部删除/失效时清空编辑器
+  useEffect(() => {
+    if (activeName === null) {
+      setContent('');
+      setSavedContent('');
+      draftRef.current = { name: null, text: '' };
+    }
+  }, [activeName]);
+
+  // ---- 打开文件 ----
+  const open = useCallback((name) => {
+    setBusy(true);
+    return notesApi.getNote(name)
+      .then((res) => {
+        const text = res.content || '';
+        setActiveName(name);
+        setContent(text);
+        setSavedContent(text);
+        draftRef.current = { name, text };
+        sessionCache.name = name;
+        sessionCache.text = text;
+      })
+      .catch((e) => showSnack(e.message, 'error'))
+      .finally(() => setBusy(false));
+  }, []);
+
+  // ---- 编辑（防抖自动保存 + 实时写缓存） ----
+  const updateContent = useCallback((text) => {
+    setContent(text);
+    draftRef.current = { name: activeName, text };
+    sessionCache.name = activeName;
+    sessionCache.text = text;
+    clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(() => {
+      const d = draftRef.current;
+      if (d.name) saveContent(d.name, d.text);
+    }, AUTOSAVE_MS);
+  }, [activeName, saveContent]);
+
+  // ---- 立即保存（Ctrl+S / 切换文件前 / save-request） ----
+  const saveNow = useCallback(() => {
+    clearTimeout(debounceRef.current);
+    const d = draftRef.current;
+    if (d.name) return saveContent(d.name, d.text);
+    return Promise.resolve();
+  }, [saveContent]);
+
+  // ---- 新建 ----
+  const create = useCallback((name) => {
+    setBusy(true);
+    return notesApi.createNote(name, '')
+      .then((res) => {
+        setActiveName(res.name);
+        setContent('');
+        setSavedContent('');
+        draftRef.current = { name: res.name, text: '' };
+        sessionCache.name = res.name;
+        sessionCache.text = '';
+        return refresh();
+      })
+      .catch((e) => showSnack(e.message, 'error'))
+      .finally(() => setBusy(false));
+  }, [refresh]);
+
+  // ---- 重命名（新文件写入旧内容 + 删旧文件） ----
+  const rename = useCallback(async (oldName, newName) => {
+    setBusy(true);
+    try {
+      // 若正在编辑该文件，用草稿内容；否则先读服务端内容
+      let text = draftRef.current.text;
+      if (activeName !== oldName) {
+        const res = await notesApi.getNote(oldName);
+        text = res.content || '';
+      }
+      await notesApi.createNote(newName, text);
+      await notesApi.deleteNote(oldName);
+      if (activeName === oldName) {
+        setActiveName(newName);
+        setSavedContent(text);
+        draftRef.current = { name: newName, text };
+        sessionCache.name = newName;
+        sessionCache.text = text;
+      }
+      await refresh();
+      showSnack('重命名成功');
+    } catch (e) {
+      showSnack(e.message, 'error');
+    } finally {
+      setBusy(false);
+    }
+  }, [activeName, refresh]);
+
+  // ---- 删除 ----
+  const remove = useCallback(async (name) => {
+    setBusy(true);
+    try {
+      await notesApi.deleteNote(name);
+      if (activeName === name) {
+        clearTimeout(debounceRef.current);
+        setActiveName(null);
+        sessionCache.name = null;
+        sessionCache.text = '';
+      }
+      await refresh();
+    } catch (e) {
+      showSnack(e.message, 'error');
+    } finally {
+      setBusy(false);
+    }
+  }, [activeName, refresh]);
+
+  // ---- 新建默认名：untitled-N.txt（避开已有名） ----
+  const nextUntitled = useMemo(() => {
+    const names = new Set((notes || []).map((n) => n.name.toLowerCase()));
+    let i = 1;
+    while (names.has(`untitled-${i}.txt`)) i += 1;
+    return `untitled-${i}.txt`;
+  }, [notes]);
+
+  const dirty = activeName !== null && content !== savedContent;
+
+  return {
+    notes, loadError, refresh,
+    activeName, content, dirty, saving, busy,
+    open, updateContent, saveNow, create, rename, remove, nextUntitled,
+  };
+}

frontend/src/tools/workbench/hooks/usePanels.js

@@ -0,0 +1,254 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { listAdminLinks } from '../../../api/adminLinks.js';
+
+/* ============================================================
+ * 工作台面板状态（Lane A 核心 hook）
+ *
+ * 管理：面板列表（admin_links）、打开集合、当前面板、历史栈（◀▶）、
+ * 固定（pin）、分组折叠、打开方式、侧边栏折叠、搜索。
+ * 打开集合 / 当前面板 / 历史栈 / 折叠态等持久化到 localStorage（key: workbench.*）。
+ * ============================================================ */
+
+export const OPEN_MODE_EMBED = 'embed';   // 内嵌 iframe
+export const OPEN_MODE_TAB = 'tab';       // 新标签页
+export const OPEN_MODE_MODAL = 'modal';   // 弹窗打开
+
+const STORE = {
+  open: 'workbench.open',               // 打开的面板 id 数组
+  active: 'workbench.active',           // 当前面板 id
+  history: 'workbench.history',         // { ids: [], index: n } 历史栈
+  groups: 'workbench.collapsedGroups',  // { 分组名: true } 折叠
+  pinned: 'workbench.pinned',           // 固定面板 id 数组
+  modes: 'workbench.openModes',         // { id: 'embed'|'tab'|'modal' }
+};
+
+function read(key, fallback) {
+  try {
+    const raw = localStorage.getItem(key);
+    return raw === null ? fallback : JSON.parse(raw);
+  } catch { return fallback; }
+}
+
+function write(key, value) {
+  try { localStorage.setItem(key, JSON.stringify(value)); } catch { /* 隐私模式等场景忽略 */ }
+}
+
+export default function usePanels() {
+  const [links, setLinks] = useState(null);          // null = 加载中
+  const [loadError, setLoadError] = useState('');
+  // 初始化即清洗（治愈已污染的 localStorage 存量数据）：
+  // 面板 id 统一为字符串 + 去重。此前 openPanel 被传入数字(p.id)与字符串
+  // (handleSelectTab 的 key.slice) 两种类型，prev.includes 严格比较漏判 →
+  // 同一面板以两份加入 openIds → 双 iframe 并排"分屏"、closePanel 关不掉。
+  const [openIds, setOpenIds] = useState(() => {
+    const a = read(STORE.open, []);
+    return Array.isArray(a) ? [...new Set(a.map(String))] : [];
+  });
+  const [activeId, setActiveId] = useState(() => {
+    const v = read(STORE.active, null);
+    return v == null ? null : String(v);
+  });
+  const [history, setHistory] = useState(() => {
+    const h = read(STORE.history, null);
+    if (h && Array.isArray(h.ids)) {
+      const ids = [...new Set(h.ids.map(String))];
+      return { ids, index: Math.min(Number(h.index) || -1, ids.length - 1) };
+    }
+    return { ids: [], index: -1 };
+  });
+  const [groups, setGroups] = useState(() => read(STORE.groups, {}));   // name -> true 表示折叠
+  const [pinned, setPinned] = useState(() => {
+    const a = read(STORE.pinned, []);
+    return Array.isArray(a) ? [...new Set(a.map(String))] : [];
+  });
+  const [modes, setModes] = useState(() => read(STORE.modes, {}));
+  const [modalId, setModalId] = useState(null);      // 弹窗打开的面板 id（不持久化）
+  const [search, setSearch] = useState('');
+
+  // LRU 引用（内存态，不需要持久化）：面板 id -> 最近使用时间戳
+  const recency = useRef({});
+
+  // ---- 持久化 ----
+  useEffect(() => write(STORE.open, openIds), [openIds]);
+  useEffect(() => write(STORE.active, activeId), [activeId]);
+  useEffect(() => write(STORE.history, history), [history]);
+  useEffect(() => write(STORE.groups, groups), [groups]);
+  useEffect(() => write(STORE.pinned, pinned), [pinned]);
+  useEffect(() => write(STORE.modes, modes), [modes]);
+
+  // ---- 加载面板列表（reconcile 全部用函数式更新，消除陈旧闭包竞态） ----
+  const reload = useCallback(() => {
+    setLoadError('');
+    setLinks(null);
+    return listAdminLinks()
+      .then((ls) => {
+        const arr = Array.isArray(ls) ? ls : [];
+        setLinks(arr);
+        const valid = new Set(arr.map((p) => String(p.id)));
+        // String 归一化后再过滤，防止存量数字/字符串混杂 id 绕过校验
+        setOpenIds((prev) => prev.map(String).filter((id) => valid.has(id)));
+        setPinned((prev) => prev.map(String).filter((id) => valid.has(id)));
+        setModes((prev) => Object.fromEntries(Object.entries(prev).filter(([id]) => valid.has(id))));
+        setHistory((prev) => {
+          const ids = prev.ids.map(String).filter((id) => valid.has(id));
+          return { ids, index: Math.min(prev.index, ids.length - 1) };
+        });
+        return arr;
+      })
+      .catch((e) => { setLoadError(e.message || '加载失败'); });
+  }, []);
+
+  useEffect(() => { reload(); }, [reload]);
+
+  // activeId 兜底（派生逻辑）：重载后当前面板已被删除时，
+  // 从历史栈 / 打开集合取最近一个，避免指向不存在的面板
+  useEffect(() => {
+    if (!links) return;
+    const valid = new Set(links.map((p) => String(p.id)));
+    if (activeId && valid.has(String(activeId))) return;
+    const fallback = (history.index >= 0 ? history.ids[history.index] : null)
+      ?? openIds[0]
+      ?? null;
+    setActiveId(fallback);
+  }, [links, activeId, history, openIds]);
+
+  const touch = useCallback((id) => { recency.current[id] = Date.now(); }, []);
+
+  // ---- 打开面板：按打开方式分发（tab 新标签 / modal 弹窗 / embed 内嵌） ----
+  // panelOverride：新建面板保存后（links 尚未包含）时直接传入对象
+  const openPanel = useCallback((id, panelOverride) => {
+    id = String(id); // 统一字符串，避免数字/字符串双份加入 openIds
+    const panel = panelOverride || (links && links.find((p) => String(p.id) === id));
+    if (!panel) return false;
+    touch(id);
+    const mode = modes[id] || OPEN_MODE_EMBED;
+    if (mode === OPEN_MODE_TAB) {
+      window.open(panel.embed_url || panel.url, '_blank', 'noopener');
+      return false;
+    }
+    if (mode === OPEN_MODE_MODAL) { setModalId(id); return false; }
+    if (activeId === id) return false;
+    setOpenIds((prev) => (prev.includes(id) ? prev : [...prev, id]));
+    setHistory((prev) => {
+      const ids = prev.ids.slice(0, prev.index + 1);
+      if (ids[ids.length - 1] === id) return prev;
+      ids.push(id);
+      return { ids, index: ids.length - 1 };
+    });
+    setActiveId(id);
+    return true;
+  }, [activeId, links, modes, touch]);
+
+  // ---- 历史栈：◀ 后退 / ▶ 前进 ----
+  const goBack = useCallback(() => {
+    if (history.index <= 0) return;
+    const index = history.index - 1;
+    const id = history.ids[index];
+    if (id == null) return;
+    setHistory({ ...history, index });
+    setActiveId(id);
+    touch(id);
+  }, [history, touch]);
+
+  const goForward = useCallback(() => {
+    if (history.index >= history.ids.length - 1) return;
+    const index = history.index + 1;
+    const id = history.ids[index];
+    if (id == null) return;
+    setHistory({ ...history, index });
+    setActiveId(id);
+    touch(id);
+  }, [history, touch]);
+
+  // ---- 关闭面板（当前面板被关时自动切到最近历史/其他打开面板） ----
+  const closePanel = useCallback((id) => {
+    id = String(id); // 统一字符串：此前数字/字符串混杂导致 filter 漏删、标签关不掉
+    const nextOpen = openIds.filter((x) => x !== id);
+    setOpenIds(nextOpen);
+    delete recency.current[id];
+    const histIds = history.ids.filter((x) => x !== id);
+    let index = history.index;
+    const removedAt = history.ids.indexOf(id);
+    if (removedAt !== -1 && removedAt < index) index -= 1;
+    if (index > histIds.length - 1) index = histIds.length - 1;
+    setHistory({ ids: histIds, index: index < 0 ? -1 : index });
+    const nextActive = histIds[index] ?? nextOpen[0] ?? null;
+    if (nextActive) setActiveId(nextActive); else setActiveId(null);
+  }, [history, openIds]);
+
+  const togglePin = useCallback((id) => {
+    id = String(id); // 防止固定集合再次被数字污染
+    setPinned((prev) => (prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]));
+  }, []);
+
+  const toggleGroup = useCallback((name) => {
+    setGroups((prev) => ({ ...prev, [name]: !prev[name] }));
+  }, []);
+
+  const setMode = useCallback((id, mode) => {
+    setModes((prev) => ({ ...prev, [id]: mode }));
+  }, []);
+
+  const closeModal = useCallback(() => setModalId(null), []);
+
+  // ---- LRU 渲染集：当前面板 + 最近用过的 2 个（最多 3 个活跃 iframe） ----
+  const renderedIds = useMemo(() => {
+    const active = activeId ? String(activeId) : null;
+    if (!active) return [];
+    const others = openIds.filter((id) => String(id) !== active);
+    const sorted = others
+      .map((id) => ({ id, ts: recency.current[id] || 0 }))
+      .sort((a, b) => b.ts - a.ts)
+      .map((x) => x.id);
+    return [active, ...sorted.slice(0, 2)];
+  }, [activeId, openIds]);
+
+  const panelsById = useMemo(() => {
+    const m = {};
+    (links || []).forEach((p) => { m[p.id] = p; });
+    return m;
+  }, [links]);
+
+  const activePanel = activeId ? (panelsById[activeId] || null) : null;
+  const modalPanel = modalId ? (panelsById[modalId] || null) : null;
+  const openPanels = openIds.map((id) => panelsById[id]).filter(Boolean);
+
+  // ---- 搜索过滤（面板名 / URL / 分组） ----
+  const filteredPanels = useMemo(() => {
+    if (!search.trim()) return links || [];
+    const q = search.trim().toLowerCase();
+    return (links || []).filter((p) =>
+      String(p.title || '').toLowerCase().includes(q)
+      || String(p.url || '').toLowerCase().includes(q)
+      || String(p.embed_url || '').toLowerCase().includes(q)
+      || String(p.category || '').toLowerCase().includes(q)
+    );
+  }, [links, search]);
+
+  // 搜索框 Enter：直达第一个匹配面板（空搜索不触发）
+  const openFirstMatch = useCallback(() => {
+    if (!search.trim()) return false;
+    const first = filteredPanels[0];
+    if (first) { openPanel(first.id); setSearch(''); return true; }
+    return false;
+  }, [filteredPanels, openPanel, search]);
+
+  return {
+    // 数据
+    links, loadError, reload, panelsById,
+    // 打开集合
+    openIds, openCount: openIds.length, openPanels, renderedIds,
+    activeId, activePanel, modalId, modalPanel, closeModal,
+    // 历史栈
+    history,
+    canBack: history.index > 0,
+    canForward: history.index >= 0 && history.index < history.ids.length - 1,
+    goBack, goForward,
+    // 操作
+    openPanel, closePanel, togglePin, toggleGroup, setMode,
+    // 分组 / 固定 / 打开方式
+    pinned, groups, modes,
+    // 搜索
+    search, setSearch, filteredPanels, openFirstMatch,
+  };
+}

frontend/src/tools/workbench/hooks/useVault.js

@@ -0,0 +1,104 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import * as pwApi from '../../../api/passwords.js';
+
+/**
+ * 密码库抽屉的状态管理（Lane B）。
+ *
+ * 状态机 status：
+ *   loading  —— 正在检查 PIN 状态（pinStatus）
+ *   error    —— 检查失败（可重试）
+ *   noPin    —— 未设置 PIN（引导去密码库页）
+ *   locked   —— 已设 PIN 但未解锁（PIN 输入屏）
+ *   unlocked —— 已解锁（搜索 + 条目列表）
+ *
+ * 约定：关闭抽屉不锁定，只有 lock() 才锁定——方便切面板取用。
+ * 会话在服务端内存中滑动过期（1 小时），每次打开抽屉会重新同步一次状态。
+ */
+export default function useVault({ open } = {}) {
+  const [status, setStatus] = useState('loading');
+  const [statusError, setStatusError] = useState('');
+  const [entries, setEntries] = useState(null);   // null = 条目加载中
+  const [entriesError, setEntriesError] = useState('');
+  const [search, setSearch] = useState('');
+  const [unlocking, setUnlocking] = useState(false);
+  const [locking, setLocking] = useState(false);
+
+  /** 拉取条目列表（解锁后），失败进入错误态并保留重试按钮 */
+  const loadEntries = useCallback(async () => {
+    setEntries(null);
+    setEntriesError('');
+    try {
+      const list = await pwApi.listEntries();
+      setEntries(list || []);
+    } catch (e) {
+      setEntriesError(e.message || '加载失败');
+      setEntries([]);
+    }
+  }, []);
+
+  /** 同步服务端 PIN / 会话状态 */
+  const checkStatus = useCallback(async () => {
+    setStatus('loading');
+    setStatusError('');
+    try {
+      const s = await pwApi.pinStatus();
+      if (!s.hasPin) setStatus('noPin');
+      else if (s.unlocked) { setStatus('unlocked'); loadEntries(); }
+      else setStatus('locked');
+    } catch (e) {
+      setStatusError(e.message || '检查密码库状态失败');
+      setStatus('error');
+    }
+  }, [loadEntries]);
+
+  // 每次抽屉打开（含重新打开）都同步一次状态；
+  // 若父组件保持挂载仅切换 open，也在这里触发。
+  useEffect(() => {
+    if (open) checkStatus();
+  }, [open, checkStatus]);
+
+  /** 解锁：成功则进入条目列表；失败抛出后端错误（401 PIN 错误 / 429 次数过多） */
+  const unlock = useCallback(async (pin) => {
+    setUnlocking(true);
+    try {
+      await pwApi.unlock(pin);
+      setStatus('unlocked');
+      setSearch('');
+      await loadEntries();
+    } finally {
+      setUnlocking(false);
+    }
+  }, [loadEntries]);
+
+  /** 锁定：清空本地条目与搜索，回到 PIN 输入屏 */
+  const lock = useCallback(async () => {
+    setLocking(true);
+    try {
+      await pwApi.lock();
+      setStatus('locked');
+      setEntries(null);
+      setEntriesError('');
+      setSearch('');
+    } finally {
+      setLocking(false);
+    }
+  }, []);
+
+  /** 按标题 / 用户名过滤（不区分大小写） */
+  const filteredEntries = useMemo(() => {
+    const q = search.trim().toLowerCase();
+    const base = entries || [];
+    if (!q) return base;
+    return base.filter((e) =>
+      (e.title || '').toLowerCase().includes(q) ||
+      (e.username || '').toLowerCase().includes(q));
+  }, [entries, search]);
+
+  return {
+    status, statusError,
+    entries, entriesError,
+    search, setSearch, filteredEntries,
+    unlocking, locking,
+    checkStatus, loadEntries, unlock, lock,
+  };
+}

frontend/src/tools/workbench/hooks/useWorkbenchLayout.js

@@ -0,0 +1,187 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import WidgetsIcon from '@mui/icons-material/Widgets';
+import NoteAltIcon from '@mui/icons-material/NoteAlt';
+import KeyIcon from '@mui/icons-material/Key';
+
+/* ============================================================
+ * useWorkbenchLayout：VSCode 风格工作台布局状态（Lane A 新增）
+ *
+ * - 视图注册表 VIEWS：左侧主控（面板）+ 右侧功能区（记事本/密码箱）
+ * - order：{ left: [viewId], right: [viewId] } —— 视图在左右活动栏的归属
+ *   （dnd-kit 拖拽换边后持久化，key: workbench.viewOrder）
+ * - active：{ left: viewId, right: viewId } —— 每侧当前显示的视图
+ * - mode：{ [viewId]: 'sidebar' | 'tab' | 'float' } —— 展示模式
+ *   （sidebar 默认；tab 进主区标签页；float 为 P2 占位，本期不实现）
+ * - terminalOpen：底部终端面板是否展开
+ * ============================================================ */
+
+/** 视图注册表：id → 元信息（新增视图只需在此登记 + Workbench 提供渲染） */
+export const VIEWS = {
+  panels: { id: 'panels', label: '面板', Icon: WidgetsIcon, hint: '面板工作台' },
+  notes: { id: 'notes', label: '记事本', Icon: NoteAltIcon, hint: '笔记与文件' },
+  vault: { id: 'vault', label: '密码箱', Icon: KeyIcon, hint: '密码管理' },
+};
+export const VIEW_IDS = Object.keys(VIEWS);
+
+export const VIEW_MODE_SIDEBAR = 'sidebar';
+export const VIEW_MODE_TAB = 'tab';
+export const VIEW_MODE_FLOAT = 'float'; // P2：本期仅占位
+
+const STORE = {
+  order: 'workbench.viewOrder',     // { left: [], right: [] }
+  active: 'workbench.viewActive',   // { left: id, right: id }
+  mode: 'workbench.viewMode',       // { id: 'sidebar'|'tab' }
+  terminal: 'workbench.terminalOpen',
+};
+
+const DEFAULT_ORDER = { left: ['panels'], right: ['notes', 'vault'] };
+const DEFAULT_ACTIVE = { left: 'panels', right: 'notes' };
+const DEFAULT_MODE = { panels: VIEW_MODE_SIDEBAR, notes: VIEW_MODE_SIDEBAR, vault: VIEW_MODE_SIDEBAR };
+
+function read(key, fallback) {
+  try {
+    const raw = localStorage.getItem(key);
+    return raw === null ? fallback : JSON.parse(raw);
+  } catch { return fallback; }
+}
+
+function write(key, value) {
+  try { localStorage.setItem(key, JSON.stringify(value)); } catch { /* 隐私模式忽略 */ }
+}
+
+/** 校验 order 合法性：过滤未知/重复视图，遗漏的补到右侧，且保证每侧至少一个视图 */
+function sanitizeOrder(saved) {
+  if (!saved || !Array.isArray(saved.left) || !Array.isArray(saved.right)) return DEFAULT_ORDER;
+  const seen = new Set();
+  const clean = (arr) => {
+    const out = [];
+    arr.forEach((id) => {
+      if (!VIEW_IDS.includes(id) || seen.has(id)) return; // 先查重，后登记
+      seen.add(id);
+      out.push(id);
+    });
+    return out;
+  };
+  const left = clean(saved.left);
+  const right = clean(saved.right);
+  VIEW_IDS.forEach((id) => { if (!seen.has(id)) right.push(id); });
+  // 兜底：持久化可能把视图全挪到一侧（或空数组），刷新后另一侧空白打不开。
+  // 保证每侧至少一个视图（panels 优先左侧，notes 次之）。
+  if (left.length === 0 && right.length > 0) {
+    const preferred = ['panels', 'notes'].find((id) => right.includes(id));
+    const move = preferred || right[0];
+    left.push(move);
+    right.splice(right.indexOf(move), 1);
+  }
+  if (right.length === 0 && left.length > 0) {
+    const preferred = ['notes', 'vault'].find((id) => left.includes(id));
+    const move = preferred || left[0];
+    right.push(move);
+    left.splice(left.indexOf(move), 1);
+  }
+  return { left, right };
+}
+
+/** 校验 active：指向的视图必须仍在本侧，否则回退到该侧第一个 */
+function sanitizeActive(saved, order) {
+  if (!saved || typeof saved !== 'object') return { ...DEFAULT_ACTIVE };
+  const pick = (side, fallback) => (
+    order[side].includes(saved[side]) ? saved[side] : (order[side][0] || fallback)
+  );
+  return { left: pick('left', 'panels'), right: pick('right', 'notes') };
+}
+
+/** 校验 mode：只接受 sidebar/tab（float 为保留值，不持久化激活） */
+function sanitizeMode(saved) {
+  const out = { ...DEFAULT_MODE };
+  if (saved && typeof saved === 'object') {
+    VIEW_IDS.forEach((id) => {
+      if (saved[id] === VIEW_MODE_SIDEBAR || saved[id] === VIEW_MODE_TAB) out[id] = saved[id];
+    });
+  }
+  return out;
+}
+
+export default function useWorkbenchLayout() {
+  const [order, setOrder] = useState(() => sanitizeOrder(read(STORE.order, null)));
+  const [active, setActive] = useState(() => sanitizeActive(read(STORE.active, null), order));
+  const [mode, setMode] = useState(() => sanitizeMode(read(STORE.mode, null)));
+  const [terminalOpen, setTerminalOpen] = useState(() => read(STORE.terminal, false));
+
+  useEffect(() => write(STORE.order, order), [order]);
+  useEffect(() => write(STORE.active, active), [active]);
+  useEffect(() => write(STORE.mode, mode), [mode]);
+  useEffect(() => write(STORE.terminal, terminalOpen), [terminalOpen]);
+
+  /** 视图 id → 所在侧 */
+  const sideOf = useMemo(() => {
+    const m = {};
+    order.left.forEach((id) => { m[id] = 'left'; });
+    order.right.forEach((id) => { m[id] = 'right'; });
+    return m;
+  }, [order]);
+
+  const viewsOf = useCallback((side) => [...order[side]], [order]);
+
+  /** 每侧有效激活视图（active 指向已移走的视图时回退到第一个） */
+  const activeViewOf = useCallback(
+    (side) => (order[side].includes(active[side]) ? active[side] : order[side][0] || null),
+    [order, active]
+  );
+
+  /** 激活某视图（无论在哪侧） */
+  const activateView = useCallback((id) => {
+    const side = sideOf[id];
+    if (!side) return;
+    setActive((prev) => ({ ...prev, [side]: id }));
+  }, [sideOf]);
+
+  const setViewMode = useCallback((id, m) => {
+    if (!VIEW_IDS.includes(id)) return;
+    setMode((prev) => ({ ...prev, [id]: m }));
+  }, []);
+
+  /** 拖拽换边：视图从一侧移到另一侧，并激活目标侧 */
+  const moveView = useCallback((id, toSide) => {
+    if (toSide !== 'left' && toSide !== 'right') return;
+    setOrder((prev) => {
+      const fromSide = (['left', 'right']).find((s) => prev[s].includes(id));
+      if (!fromSide || fromSide === toSide) return prev;
+      const next = {
+        left: [...prev.left.filter((x) => x !== id)],
+        right: [...prev.right.filter((x) => x !== id)],
+      };
+      next[toSide].push(id);
+      return next;
+    });
+    setActive((prev) => ({ ...prev, [toSide]: id }));
+  }, []);
+
+  /** 同侧排序（dnd-kit arrayMove 语义） */
+  const reorderView = useCallback((id, overId) => {
+    setOrder((prev) => {
+      const side = (['left', 'right']).find((s) => prev[s].includes(id));
+      const overSide = (['left', 'right']).find((s) => prev[s].includes(overId));
+      if (!side || side !== overSide) return prev;
+      const list = prev[side];
+      const from = list.indexOf(id);
+      const to = list.indexOf(overId);
+      if (from < 0 || to < 0 || from === to) return prev;
+      const next = [...list];
+      next.splice(from, 1);
+      next.splice(to, 0, id);
+      return { ...prev, [side]: next };
+    });
+  }, []);
+
+  const toggleTerminal = useCallback(() => setTerminalOpen((v) => !v), []);
+  const openTerminal = useCallback(() => setTerminalOpen(true), []);
+
+  return {
+    order, sideOf, viewsOf,
+    active, activeViewOf, activateView,
+    mode, setViewMode,
+    moveView, reorderView,
+    terminalOpen, toggleTerminal, openTerminal,
+  };
+}

frontend/src/tools/workbench/index.js

@@ -0,0 +1,36 @@
+/* ============================================================
+ * 工作台模块导出（frontend/src/tools/workbench）
+ * 便于未来升级 / 替换 / 独立打包
+ *
+ * 组件命名与文件名的兼容说明：
+ * - Sidebar.jsx  导出 PanelsView（面板列表视图，VSCode 侧栏内容）
+ * - NoteEditor.jsx 导出 NotesView（记事本视图）
+ * - VaultDrawer.jsx 导出 VaultView（密码箱视图）
+ * ============================================================ */
+
+export { default as Workbench } from './Workbench.jsx';
+export { default as Toolbar } from './components/Toolbar.jsx';
+export { default as PanelFrame } from './components/PanelFrame.jsx';
+export { default as AddPanelDialog } from './components/AddPanelDialog.jsx';
+export { default as PanelIcon } from './components/PanelIcon.jsx';
+export { default as PanelsView } from './components/Sidebar.jsx';
+export { default as NotesView } from './components/NoteEditor.jsx';
+export { default as VaultView } from './components/VaultDrawer.jsx';
+export { default as ActivityBar } from './components/ActivityBar.jsx';
+export { default as SidebarPane } from './components/SidebarPane.jsx';
+export { default as ToolWindow } from './components/ToolWindow.jsx';
+export { default as TabStrip } from './components/TabStrip.jsx';
+export { default as ContentView } from './components/ContentView.jsx';
+// 终端面板临时下线：组件归档到 archive/（前端入口已移除，恢复时改回 components/ 路径）
+export { default as TerminalPanel } from './archive/TerminalPanel.jsx';
+export { default as StatusBar } from './components/StatusBar.jsx';
+export { default as MenuBar } from './components/MenuBar.jsx';
+export { default as useNotes } from './hooks/useNotes.js';
+export { default as useWorkbenchLayout } from './hooks/useWorkbenchLayout.js';
+export { VIEWS, VIEW_IDS, VIEW_MODE_SIDEBAR, VIEW_MODE_TAB, VIEW_MODE_FLOAT } from './hooks/useWorkbenchLayout.js';
+export {
+  default as usePanels,
+  OPEN_MODE_EMBED,
+  OPEN_MODE_TAB,
+  OPEN_MODE_MODAL,
+} from './hooks/usePanels.js';

package-lock.json

@@ -1,17 +1,22 @@
 {
   "name": "rainweb-links",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "rainweb-links",
-      "version": "2.0.0",
+      "version": "2.2.0",
       "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
         "@mui/icons-material": "^9.3.1",
         "@mui/material": "^9.3.1",
+        "@xterm/addon-fit": "^0.11.0",
+        "@xterm/addon-unicode11": "^0.9.0",
+        "@xterm/xterm": "^6.0.0",
         "bcryptjs": "^2.4.3",
         "better-sqlite3": "^13.0.3",
         "cors": "^2.8.5",
@@ -22,10 +27,13 @@
         "jsonwebtoken": "^9.0.2",
         "marked": "^18.0.5",
         "multer": "^2.2.0",
+        "node-pty": "^1.0.0",
         "nodemailer": "^9.0.1",
         "react": "^19.2.8",
         "react-dom": "^19.2.8",
-        "react-router-dom": "^7.18.2"
+        "react-resizable-panels": "^4.12.2",
+        "react-router-dom": "^7.18.2",
+        "ws": "^8.18.0"
       },
       "devDependencies": {
         "@vitejs/plugin-react": "^6.0.5",
@@ -371,6 +379,59 @@
         "node": ">=20.19.0"
       }
     },
+    "node_modules/@dnd-kit/accessibility": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/accessibility/-/accessibility-3.1.1.tgz",
+      "integrity": "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/core": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/core/-/core-6.3.1.tgz",
+      "integrity": "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/accessibility": "^3.1.1",
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/sortable": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-10.0.0.tgz",
+      "integrity": "sha512-+xqhmIIzvAYMGfBYYnbKuNicfSsk4RksY2XdmJhT+HAC01nix6fHCztU68jooFiMUB01Ky3F0FyOvhG/BZrWkg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dnd-kit/utilities": "^3.2.2",
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "@dnd-kit/core": "^6.3.0",
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@dnd-kit/utilities": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz",
+      "integrity": "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/@emotion/babel-plugin": {
       "version": "11.13.5",
       "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
@@ -506,7 +567,7 @@
       }
     },
     "node_modules/@emotion/utils": {
-      "version": "2.0.0",
+      "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
       "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
       "license": "MIT"
@@ -1149,6 +1210,27 @@
         }
       }
     },
+    "node_modules/@xterm/addon-fit": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-fit/-/addon-fit-0.11.0.tgz",
+      "integrity": "sha512-jYcgT6xtVYhnhgxh3QgYDnnNMYTcf8ElbxxFzX0IZo+vabQqSPAjC3c1wJrKB5E19VwQei89QCiZZP86DCPF7g==",
+      "license": "MIT"
+    },
+    "node_modules/@xterm/addon-unicode11": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@xterm/addon-unicode11/-/addon-unicode11-0.9.0.tgz",
+      "integrity": "sha512-FxDnYcyuXhNl+XSqGZL/t0U9eiNb/q3EWT5rYkQT/zuig8Gz/VagnQANKHdDWFM2lTMk9ly0EFQxxxtZUoRetw==",
+      "license": "MIT"
+    },
+    "node_modules/@xterm/xterm": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/@xterm/xterm/-/xterm-6.0.0.tgz",
+      "integrity": "sha512-TQwDdQGtwwDt+2cgKDLn0IRaSxYu1tSUjgKarSDkUM0ZNiSRXFpjxEsvc/Zgc5kq5omJ+V0a8/kIM2WD3sMOYg==",
+      "license": "MIT",
+      "workspaces": [
+        "addons/*"
+      ]
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -1320,7 +1402,7 @@
       }
     },
     "node_modules/concat-stream": {
-      "version": "2.0.0",
+      "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
       "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
       "engines": [
@@ -1480,7 +1562,7 @@
       "license": "MIT"
     },
     "node_modules/depd": {
-      "version": "2.0.0",
+      "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
       "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
       "license": "MIT",
@@ -1557,7 +1639,7 @@
       "license": "MIT"
     },
     "node_modules/encodeurl": {
-      "version": "2.0.0",
+      "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-2.0.0.tgz",
       "integrity": "sha512-Q0n9HRi4m6JuGIV1eFlmvJB7ZEVxu93IrMyiMsGC0lrMJMWzRgx6WGquyfQgZVb31vhGgXnfmPNNXmxnOkRBrg==",
       "license": "MIT",
@@ -2557,7 +2639,7 @@
       }
     },
     "node_modules/ms": {
-      "version": "2.0.0",
+      "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
@@ -2618,6 +2700,22 @@
         "node": "^18 || ^20 || >= 21"
       }
     },
+    "node_modules/node-pty": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/node-pty/-/node-pty-1.1.0.tgz",
+      "integrity": "sha512-20JqtutY6JPXTUnL0ij1uad7Qe1baT46lyolh2sSENDd4sTzKZ4nmAFkeAARDKwmlLjPx6XKRlwRUxwjOy+lUg==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "dependencies": {
+        "node-addon-api": "^7.1.0"
+      }
+    },
+    "node_modules/node-pty/node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "license": "MIT"
+    },
     "node_modules/nodemailer": {
       "version": "9.0.1",
       "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-9.0.1.tgz",
@@ -2885,6 +2983,16 @@
       "integrity": "sha512-s5un28nYxKJw5gvUHyW5PCC28CvBqLu9r3cWgzHT4Vo/5fqqkFcdRYsGcKf50WMPpjjFZS5d76fn3YCo2njKwQ==",
       "license": "MIT"
     },
+    "node_modules/react-resizable-panels": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/react-resizable-panels/-/react-resizable-panels-4.12.2.tgz",
+      "integrity": "sha512-NwY5LCo4WrxVvDh0xoMML6EMLPONP/8ckKcIdpnojxexoatZdjLiRqLJQjQK5CPkd4SYiB/2M5BVrjZBQtOO7Q==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-router": {
       "version": "7.18.2",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.18.2.tgz",
@@ -3359,6 +3467,12 @@
         "node": ">=20"
       }
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -3542,6 +3656,27 @@
         "node": "^22.14.0 || >=24.0.0"
       }
     },
+    "node_modules/ws": {
+      "version": "8.21.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.21.3.tgz",
+      "integrity": "sha512-201TZ/kPWxoPr/OKWjquZR1SWKXcvxdH+e1xrx89b3YbmzLMFCLfnaG1HFIgWzJOEWZ7MvpK++odZufgYR50Rw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/xml-name-validator": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-5.0.0.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rainweb-links",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "链接聚合管理平台",
   "main": "server.js",
   "scripts": {
@@ -11,10 +11,15 @@
     "cli": "node cli.js"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^9.3.1",
     "@mui/material": "^9.3.1",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-unicode11": "^0.9.0",
+    "@xterm/xterm": "^6.0.0",
     "bcryptjs": "^2.4.3",
     "better-sqlite3": "^13.0.3",
     "cors": "^2.8.5",
@@ -25,10 +30,13 @@
     "jsonwebtoken": "^9.0.2",
     "marked": "^18.0.5",
     "multer": "^2.2.0",
+    "node-pty": "^1.0.0",
     "nodemailer": "^9.0.1",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "react-router-dom": "^7.18.2"
+    "react-resizable-panels": "^4.12.2",
+    "react-router-dom": "^7.18.2",
+    "ws": "^8.18.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^6.0.5",

routes/blog.js

@@ -1,10 +1,20 @@
 const express = require('express');
 const jwt = require('jsonwebtoken');
+const rateLimit = require('express-rate-limit');
 const db = require('../db');
 const { authMiddleware, adminOnly, SECRET } = require('../middleware/auth');
 
 const router = express.Router();
 
+// 评论限流：10 分钟窗口内最多 15 次
+const commentLimiter = rateLimit({
+  windowMs: 10 * 60 * 1000,
+  max: 15,
+  standardHeaders: true,
+  legacyHeaders: false,
+  message: { error: '评论过于频繁，请稍后再试' },
+});
+
 // 可选鉴权：有效 token 时解析出 req.user，匿名请求直接放行（用于草稿的"作者可见"判断）
 function optionalAuth(req, res, next) {
   const header = req.headers.authorization;
@@ -16,6 +26,47 @@ function optionalAuth(req, res, next) {
   next();
 }
 
+// LIKE 通配符转义（% _ \），配合 ESCAPE '\' 使用
+function escapeLike(s) {
+  return String(s).replace(/[\\%_]/g, (m) => '\\' + m);
+}
+
+// 标签规范化：逗号分隔、去空白、去空项、逗号无空格连接（保证 LIKE 边界匹配可靠）
+function normalizeTags(tags) {
+  return String(tags || '').split(',').map(t => t.trim()).filter(Boolean).join(',');
+}
+
+// 评论邮件通知：comment_notify='1' 且评论者不是文章作者时通知作者（失败不影响评论创建）
+async function notifyCommentToAuthor(post, userId, comment) {
+  try {
+    if (db.getSetting('comment_notify') !== '1') return;
+    if (post.author_id === userId) return; // 作者本人评论不通知
+    const author = db.get('SELECT id, email FROM users WHERE id = ?', [post.author_id]);
+    if (!author || !author.email) return;
+    const { getTransporter, emailTemplate } = require('./email');
+    const transporter = getTransporter();
+    if (!transporter) return;
+    const siteName = db.getSetting('site_name') || 'RainWeb';
+    const siteUrl = db.getSetting('site_url') || '';
+    const base = siteUrl.replace(/\/$/, '');
+    const link = base + '/blog/' + post.id;
+    const user = db.get('SELECT username FROM users WHERE id = ?', [userId]);
+    const commenterName = (user && user.username) || '匿名';
+    await transporter.sendMail({
+      from: `"${db.getSetting('smtp_from_name')}" <${db.getSetting('smtp_from_email')}>`,
+      to: author.email,
+      subject: `您有新评论 - ${post.title}`,
+      html: emailTemplate('新评论通知',
+        `<p>您的文章《<strong>${post.title}</strong>》收到一条新评论：</p>
+         <p style="padding:12px;background:#f5f5f5;border-radius:8px;margin:12px 0">${String(comment.content).replace(/</g, '&lt;')}</p>
+         <p style="color:#79747e">评论者：${commenterName}</p>
+         <a class="btn" href="${link}">查看评论</a>`),
+    });
+  } catch (e) {
+    console.error('评论通知邮件发送失败:', e.message);
+  }
+}
+
 // 公开列表：仅返回已发布文章
 router.get('/posts', (req, res, next) => {
   if (req.query.all !== '1') {
@@ -30,6 +81,53 @@ router.get('/posts', authMiddleware, adminOnly, (req, res) => {
   res.json(db.all('SELECT bp.*, u.username as author_name FROM blog_posts bp LEFT JOIN users u ON bp.author_id = u.id ORDER BY bp.created_at DESC'));
 });
 
+// 搜索：标题/正文/摘要模糊匹配（参数化 + 通配符转义），仅已发布，最多 20 条
+router.get('/search', (req, res) => {
+  const q = (req.query.q || '').trim();
+  if (!q) return res.json([]);
+  const pattern = '%' + escapeLike(q) + '%';
+  const posts = db.all(
+    `SELECT bp.id, bp.title, bp.excerpt, bp.tags, bp.created_at, u.username as author_name
+     FROM blog_posts bp LEFT JOIN users u ON bp.author_id = u.id
+     WHERE bp.published = 1 AND (bp.title LIKE ? ESCAPE '\\' OR bp.content LIKE ? ESCAPE '\\' OR bp.excerpt LIKE ? ESCAPE '\\')
+     ORDER BY bp.created_at DESC LIMIT 20`,
+    [pattern, pattern, pattern]);
+  res.json(posts);
+});
+
+// 标签聚合：返回 [{name, count}]，按 count 降序，空标签跳过
+router.get('/tags', (req, res) => {
+  const posts = db.all("SELECT tags FROM blog_posts WHERE published = 1 AND tags != ''");
+  const map = new Map();
+  posts.forEach(p => {
+    String(p.tags || '').split(',').forEach(t => {
+      const name = t.trim();
+      if (name) map.set(name, (map.get(name) || 0) + 1);
+    });
+  });
+  const result = Array.from(map.entries()).map(([name, count]) => ({ name, count }))
+    .sort((a, b) => b.count - a.count);
+  res.json(result);
+});
+
+// 按标签精确匹配（边界匹配，避免子串误中，如 'java' 不匹配 'javascript'）
+router.get('/tag/:name', (req, res) => {
+  const name = String(req.params.name || '').trim();
+  if (!name) return res.json([]);
+  const posts = db.all(
+    `SELECT bp.id, bp.title, bp.excerpt, bp.tags, bp.created_at, u.username as author_name
+     FROM blog_posts bp LEFT JOIN users u ON bp.author_id = u.id
+     WHERE bp.published = 1 AND (bp.tags = ? OR bp.tags LIKE ? OR bp.tags LIKE ? OR bp.tags LIKE ?)
+     ORDER BY bp.created_at DESC`,
+    [name, name + ',%', '%,' + name + ',%', '%,' + name]);
+  res.json(posts);
+});
+
+// 归档：按月统计已发布文章数
+router.get('/archive', (req, res) => {
+  res.json(db.all("SELECT strftime('%Y-%m', created_at) as month, COUNT(*) as count FROM blog_posts WHERE published = 1 GROUP BY month ORDER BY month DESC"));
+});
+
 router.get('/posts/:id', optionalAuth, (req, res) => {
   const post = db.get(
     'SELECT bp.*, u.username as author_name FROM blog_posts bp LEFT JOIN users u ON bp.author_id = u.id WHERE bp.id = ?',
@@ -39,26 +137,77 @@ router.get('/posts/:id', optionalAuth, (req, res) => {
   if (post.published !== 1) {
     if (!req.user || !(req.user.role === 'admin' || req.user.id === post.author_id))
       return res.status(404).json({ error: '文章不存在' });
+  } else {
+    // 已发布文章：阅读量 +1（草稿预览不计数）
+    db.run('UPDATE blog_posts SET views = views + 1 WHERE id = ?', [post.id]);
+    post.views = (post.views || 0) + 1;
   }
   res.json(post);
 });
 
+// 上一篇 / 下一篇（按 created_at/id 相邻，仅已发布）
+router.get('/posts/:id/prevnext', (req, res) => {
+  const post = db.get('SELECT id, created_at FROM blog_posts WHERE id = ?', [req.params.id]);
+  if (!post) return res.status(404).json({ error: '文章不存在' });
+  const prev = db.get(
+    `SELECT id, title FROM blog_posts
+     WHERE published = 1 AND (created_at < ? OR (created_at = ? AND id < ?))
+     ORDER BY created_at DESC, id DESC LIMIT 1`,
+    [post.created_at, post.created_at, post.id]);
+  const next = db.get(
+    `SELECT id, title FROM blog_posts
+     WHERE published = 1 AND (created_at > ? OR (created_at = ? AND id > ?))
+     ORDER BY created_at ASC, id ASC LIMIT 1`,
+    [post.created_at, post.created_at, post.id]);
+  res.json({ prev: prev || null, next: next || null });
+});
+
+// 点赞状态（匿名 liked=false）
+router.get('/posts/:id/like', optionalAuth, (req, res) => {
+  const post = db.get('SELECT id FROM blog_posts WHERE id = ?', [req.params.id]);
+  if (!post) return res.status(404).json({ error: '文章不存在' });
+  const count = db.get('SELECT COUNT(*) as c FROM post_likes WHERE post_id = ?', [post.id]).c;
+  let liked = false;
+  if (req.user) {
+    liked = !!db.get('SELECT 1 as x FROM post_likes WHERE post_id = ? AND user_id = ?', [post.id, req.user.id]);
+  }
+  res.json({ liked, count });
+});
+
+// 点赞
+router.post('/posts/:id/like', authMiddleware, (req, res) => {
+  const post = db.get('SELECT id FROM blog_posts WHERE id = ?', [req.params.id]);
+  if (!post) return res.status(404).json({ error: '文章不存在' });
+  db.run('INSERT OR IGNORE INTO post_likes (post_id, user_id) VALUES (?, ?)', [post.id, req.user.id]);
+  const count = db.get('SELECT COUNT(*) as c FROM post_likes WHERE post_id = ?', [post.id]).c;
+  res.json({ liked: true, count });
+});
+
+// 取消点赞
+router.delete('/posts/:id/like', authMiddleware, (req, res) => {
+  const post = db.get('SELECT id FROM blog_posts WHERE id = ?', [req.params.id]);
+  if (!post) return res.status(404).json({ error: '文章不存在' });
+  db.run('DELETE FROM post_likes WHERE post_id = ? AND user_id = ?', [post.id, req.user.id]);
+  const count = db.get('SELECT COUNT(*) as c FROM post_likes WHERE post_id = ?', [post.id]).c;
+  res.json({ liked: false, count });
+});
+
 router.post('/posts', authMiddleware, adminOnly, (req, res) => {
-  const { title, content, excerpt, published, use_markdown } = req.body;
+  const { title, content, excerpt, published, use_markdown, tags } = req.body;
   if (!title || !content) return res.status(400).json({ error: '标题和内容不能为空' });
   const id = db.run(
-    'INSERT INTO blog_posts (title, content, excerpt, author_id, published, use_markdown) VALUES (?, ?, ?, ?, ?, ?)',
+    'INSERT INTO blog_posts (title, content, excerpt, author_id, published, use_markdown, tags) VALUES (?, ?, ?, ?, ?, ?, ?)',
-    [title, content, excerpt || '', req.user.id, published !== undefined ? (published ? 1 : 0) : 1, use_markdown !== undefined ? (use_markdown ? 1 : 0) : 1]);
+    [title, content, excerpt || '', req.user.id, published !== undefined ? (published ? 1 : 0) : 1, use_markdown !== undefined ? (use_markdown ? 1 : 0) : 1, normalizeTags(tags)]);
   res.json(db.get('SELECT * FROM blog_posts WHERE id = ?', [id]));
 });
 
 router.put('/posts/:id', authMiddleware, adminOnly, (req, res) => {
-  const { title, content, excerpt, published, use_markdown } = req.body;
+  const { title, content, excerpt, published, use_markdown, tags } = req.body;
   if (!db.get('SELECT id FROM blog_posts WHERE id = ?', [req.params.id]))
     return res.status(404).json({ error: '文章不存在' });
   db.run(
-    "UPDATE blog_posts SET title=?, content=?, excerpt=?, published=?, use_markdown=?, updated_at=datetime('now') WHERE id=?",
+    "UPDATE blog_posts SET title=?, content=?, excerpt=?, published=?, use_markdown=?, tags=?, updated_at=datetime('now') WHERE id=?",
-    [title || '', content || '', excerpt || '', published !== undefined ? (published ? 1 : 0) : 1, use_markdown !== undefined ? (use_markdown ? 1 : 0) : 1, req.params.id]);
+    [title || '', content || '', excerpt || '', published !== undefined ? (published ? 1 : 0) : 1, use_markdown !== undefined ? (use_markdown ? 1 : 0) : 1, normalizeTags(tags), req.params.id]);
   res.json(db.get('SELECT * FROM blog_posts WHERE id = ?', [req.params.id]));
 });
 
@@ -66,32 +215,71 @@ router.delete('/posts/:id', authMiddleware, adminOnly, (req, res) => {
   if (!db.get('SELECT id FROM blog_posts WHERE id = ?', [req.params.id]))
     return res.status(404).json({ error: '文章不存在' });
   db.run('DELETE FROM blog_comments WHERE post_id = ?', [req.params.id]);
+  db.run('DELETE FROM post_likes WHERE post_id = ?', [req.params.id]);
   db.run('DELETE FROM blog_posts WHERE id = ?', [req.params.id]);
   res.json({ message: '删除成功' });
 });
 
 // Comments
+// 待审核评论列表（管理接口，须在 /comments/:postId 之前注册，避免 "pending" 被当作 postId）
+router.get('/comments/pending', authMiddleware, adminOnly, (req, res) => {
+  const comments = db.all(
+    `SELECT bc.*, u.username as author_name, bp.title as post_title
+     FROM blog_comments bc
+     LEFT JOIN users u ON bc.author_id = u.id
+     LEFT JOIN blog_posts bp ON bc.post_id = bp.id
+     WHERE bc.status = 'pending' ORDER BY bc.created_at ASC`);
+  res.json(comments);
+});
+
+// 评论列表：仅返回已通过审核（approved）的评论
 router.get('/comments/:postId', (req, res) => {
   if (!db.get('SELECT id FROM blog_posts WHERE id = ?', [req.params.postId]))
     return res.status(404).json({ error: '文章不存在' });
   const comments = db.all(
-    'SELECT bc.*, u.username as author_name FROM blog_comments bc LEFT JOIN users u ON bc.author_id = u.id WHERE bc.post_id = ? ORDER BY bc.created_at ASC',
+    "SELECT bc.*, u.username as author_name FROM blog_comments bc LEFT JOIN users u ON bc.author_id = u.id WHERE bc.post_id = ? AND bc.status = 'approved' ORDER BY bc.created_at ASC",
     [req.params.postId]);
   res.json(comments);
 });
 
-router.post('/comments/:postId', authMiddleware, (req, res) => {
+// 创建评论：支持嵌套回复 parent_id；审核模式（comment_moderate='1'）下新评论进待审
+router.post('/comments/:postId', authMiddleware, commentLimiter, async (req, res) => {
   const { content } = req.body;
+  const parent_id = parseInt(req.body.parent_id) || 0;
   if (!content) return res.status(400).json({ error: '评论内容不能为空' });
-  if (!db.get('SELECT id FROM blog_posts WHERE id = ?', [req.params.postId]))
+  const post = db.get('SELECT * FROM blog_posts WHERE id = ?', [req.params.postId]);
-    return res.status(404).json({ error: '文章不存在' });
+  if (!post) return res.status(404).json({ error: '文章不存在' });
-  const id = db.run('INSERT INTO blog_comments (post_id, content, author_id) VALUES (?, ?, ?)',
+  if (parent_id) {
-    [req.params.postId, content, req.user.id]);
+    const parent = db.get('SELECT * FROM blog_comments WHERE id = ?', [parent_id]);
+    if (!parent) return res.status(400).json({ error: '回复的评论不存在' });
+    if (parent.post_id !== post.id) return res.status(400).json({ error: '回复的评论不属于该文章' });
+  }
+  const status = db.getSetting('comment_moderate') === '1' ? 'pending' : 'approved';
+  const id = db.run('INSERT INTO blog_comments (post_id, content, author_id, parent_id, status) VALUES (?, ?, ?, ?, ?)',
+    [post.id, content, req.user.id, parent_id, status]);
   const comment = db.get(
     'SELECT bc.*, u.username as author_name FROM blog_comments bc LEFT JOIN users u ON bc.author_id = u.id WHERE bc.id = ?', [id]);
+  // 邮件通知（失败不影响评论创建）
+  notifyCommentToAuthor(post, req.user.id, comment);
   res.json(comment);
 });
 
+// 审核：通过
+router.post('/comments/:id/approve', authMiddleware, adminOnly, (req, res) => {
+  const comment = db.get('SELECT * FROM blog_comments WHERE id = ?', [req.params.id]);
+  if (!comment) return res.status(404).json({ error: '评论不存在' });
+  db.run("UPDATE blog_comments SET status = 'approved' WHERE id = ?", [comment.id]);
+  res.json({ message: '已通过', comment: db.get('SELECT * FROM blog_comments WHERE id = ?', [comment.id]) });
+});
+
+// 审核：拒绝
+router.post('/comments/:id/reject', authMiddleware, adminOnly, (req, res) => {
+  const comment = db.get('SELECT * FROM blog_comments WHERE id = ?', [req.params.id]);
+  if (!comment) return res.status(404).json({ error: '评论不存在' });
+  db.run("UPDATE blog_comments SET status = 'rejected' WHERE id = ?", [comment.id]);
+  res.json({ message: '已拒绝', comment: db.get('SELECT * FROM blog_comments WHERE id = ?', [comment.id]) });
+});
+
 router.delete('/comments/:id', authMiddleware, (req, res) => {
   const comment = db.get('SELECT * FROM blog_comments WHERE id = ?', [req.params.id]);
   if (!comment) return res.status(404).json({ error: '评论不存在' });

routes/email.js

@@ -122,3 +122,5 @@ router.post('/complete-register', async (req, res) => {
 });
 
 module.exports = router;
+module.exports.getTransporter = getTransporter;
+module.exports.emailTemplate = emailTemplate;

routes/feed.js

@@ -0,0 +1,69 @@
+const express = require('express');
+const db = require('../db');
+
+const router = express.Router();
+
+// XML 转义：& < > " '
+function escapeXml(s) {
+  return String(s)
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+}
+
+// created_at（'YYYY-MM-DD HH:MM:SS'，UTC）转 RFC822 格式
+function toRfc822(createdAt) {
+  try {
+    const d = new Date(String(createdAt).replace(' ', 'T') + 'Z');
+    return isNaN(d.getTime()) ? String(createdAt) : d.toUTCString();
+  } catch {
+    return String(createdAt);
+  }
+}
+
+// RSS 2.0：最新 20 篇已发布博文
+router.get('/feed.xml', (req, res) => {
+  const siteName = db.getSetting('site_name') || 'RainWeb';
+  const siteDesc = db.getSetting('site_description') || '个人云平台';
+  const siteUrl = db.getSetting('site_url') || (req.protocol + '://' + req.get('host'));
+  const base = siteUrl.replace(/\/$/, '');
+
+  const posts = db.all(
+    'SELECT id, title, excerpt, content, created_at FROM blog_posts WHERE published = 1 ORDER BY created_at DESC LIMIT 20');
+
+  let items = '';
+  posts.forEach(p => {
+    const link = base + '/blog/' + p.id;
+    let description;
+    if (p.excerpt) {
+      description = `<description>${escapeXml(p.excerpt)}</description>`;
+    } else {
+      description = `<description><![CDATA[${String(p.content || '').replace(/\]\]>/g, ']]]]><![CDATA[>')}]]></description>`;
+    }
+    items += `    <item>
+      <title>${escapeXml(p.title)}</title>
+      <link>${escapeXml(link)}</link>
+      <guid>${escapeXml(link)}</guid>
+      <pubDate>${escapeXml(toRfc822(p.created_at))}</pubDate>
+      ${description}
+    </item>
+`;
+  });
+
+  const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<rss version="2.0">
+  <channel>
+    <title>${escapeXml(siteName)}</title>
+    <link>${escapeXml(base)}</link>
+    <description>${escapeXml(siteDesc)}</description>
+${items}  </channel>
+</rss>
+`;
+
+  res.header('Content-Type', 'application/rss+xml; charset=utf-8');
+  res.send(xml);
+});
+
+module.exports = router;

routes/links.js

@@ -1,38 +0,0 @@
-const express = require('express');
-const db = require('../db');
-const { authMiddleware, adminOnly } = require('../middleware/auth');
-
-const router = express.Router();
-
-router.get('/', (req, res) => {
-  const links = db.all('SELECT * FROM links ORDER BY sort_order ASC, id ASC');
-  res.json(links);
-});
-
-router.post('/', authMiddleware, adminOnly, (req, res) => {
-  const { title, url, description, icon, category, sort_order, embed_url, is_internal } = req.body;
-  if (!title || !url) return res.status(400).json({ error: '标题和链接不能为空' });
-  const id = db.run(
-    'INSERT INTO links (title, url, description, icon, category, sort_order, embed_url, is_internal) VALUES (?, ?, ?, ?, ?, ?, ?, ?)',
-    [title, url, description || '', icon || '', category || '默认', sort_order || 0, embed_url || '', is_internal ? 1 : 0]
-  );
-  res.json(db.get('SELECT * FROM links WHERE id = ?', [id]));
-});
-
-router.put('/:id', authMiddleware, adminOnly, (req, res) => {
-  const { title, url, description, icon, category, sort_order, embed_url, is_internal } = req.body;
-  if (!db.get('SELECT id FROM links WHERE id = ?', [req.params.id])) return res.status(404).json({ error: '链接不存在' });
-  db.run(
-    'UPDATE links SET title=?, url=?, description=?, icon=?, category=?, sort_order=?, embed_url=?, is_internal=? WHERE id=?',
-    [title || '', url || '', description || '', icon || '', category || '默认', sort_order || 0, embed_url || '', is_internal ? 1 : 0, req.params.id]
-  );
-  res.json(db.get('SELECT * FROM links WHERE id = ?', [req.params.id]));
-});
-
-router.delete('/:id', authMiddleware, adminOnly, (req, res) => {
-  if (!db.get('SELECT id FROM links WHERE id = ?', [req.params.id])) return res.status(404).json({ error: '链接不存在' });
-  db.run('DELETE FROM links WHERE id = ?', [req.params.id]);
-  res.json({ message: '删除成功' });
-});
-
-module.exports = router;

routes/notes.js

@@ -0,0 +1,130 @@
+const express = require('express');
+const fs = require('fs');
+const path = require('path');
+const { authMiddleware, adminOnly } = require('../middleware/auth');
+
+/* ============================================================
+ * 工作台「记事本」API（仅管理员）
+ *
+ * 存储：实体 .txt 文件，目录 frontend/src/tools/workbench/workspace/
+ * （.gitignore 已排除，不入库）
+ *
+ *  GET    /api/notes              → 文件列表（按修改时间倒序）
+ *  GET    /api/notes/:filename    → 读取文件内容 { name, content, size, mtime }
+ *  POST   /api/notes              → 创建 { filename, content }（同名 409）
+ *  PUT    /api/notes/:filename    → 更新 { content }（不存在 404）
+ *  DELETE /api/notes/:filename    → 删除
+ *
+ * 安全：文件名只允许 .txt、拒绝路径穿越（/、\、..、隐藏文件）
+ * ============================================================ */
+
+const WORKSPACE_DIR = path.join(__dirname, '..', 'frontend', 'src', 'tools', 'workbench', 'workspace');
+const router = express.Router();
+
+function ensureDir() {
+  fs.mkdirSync(WORKSPACE_DIR, { recursive: true });
+}
+
+/** 文件名安全校验：返回规范化文件名（自动补 .txt），非法返回 null */
+function sanitizeFilename(raw) {
+  if (typeof raw !== 'string') return null;
+  let name = raw.trim();
+  if (!name || name.length > 120) return null;
+  if (name.includes('/') || name.includes('\\') || name.includes('\0')) return null;
+  if (name === '.' || name === '..' || name.startsWith('.')) return null;
+  if (!name.toLowerCase().endsWith('.txt')) name += '.txt';
+  // 兜底：解析后必须仍位于 workspace 目录内，杜绝路径穿越
+  const full = path.join(WORKSPACE_DIR, name);
+  if (!full.startsWith(WORKSPACE_DIR + path.sep)) return null;
+  return name;
+}
+
+/** 列出所有 .txt 笔记，按修改时间倒序 */
+function listNotes() {
+  ensureDir();
+  return fs.readdirSync(WORKSPACE_DIR, { withFileTypes: true })
+    .filter((d) => d.isFile() && d.name.toLowerCase().endsWith('.txt'))
+    .map((d) => {
+      const st = fs.statSync(path.join(WORKSPACE_DIR, d.name));
+      return { name: d.name, size: st.size, mtime: st.mtimeMs };
+    })
+    .sort((a, b) => b.mtime - a.mtime);
+}
+
+// 列表
+router.get('/', authMiddleware, adminOnly, (req, res) => {
+  try {
+    res.json(listNotes());
+  } catch (e) {
+    console.error('Notes list error:', e.message);
+    res.status(500).json({ error: '读取笔记列表失败' });
+  }
+});
+
+// 读取内容
+router.get('/:filename', authMiddleware, adminOnly, (req, res) => {
+  const name = sanitizeFilename(req.params.filename);
+  if (!name) return res.status(400).json({ error: '文件名不合法' });
+  try {
+    const full = path.join(WORKSPACE_DIR, name);
+    if (!fs.existsSync(full)) return res.status(404).json({ error: '笔记不存在' });
+    const content = fs.readFileSync(full, 'utf8');
+    const st = fs.statSync(full);
+    res.json({ name, content, size: st.size, mtime: st.mtimeMs });
+  } catch (e) {
+    console.error('Note read error:', e.message);
+    res.status(500).json({ error: '读取笔记失败' });
+  }
+});
+
+// 创建
+router.post('/', authMiddleware, adminOnly, (req, res) => {
+  const name = sanitizeFilename(req.body && req.body.filename);
+  if (!name) return res.status(400).json({ error: '文件名不合法' });
+  const content = typeof req.body.content === 'string' ? req.body.content : '';
+  try {
+    ensureDir();
+    const full = path.join(WORKSPACE_DIR, name);
+    if (fs.existsSync(full)) return res.status(409).json({ error: '同名笔记已存在' });
+    fs.writeFileSync(full, content, 'utf8');
+    const st = fs.statSync(full);
+    res.json({ name, size: st.size, mtime: st.mtimeMs });
+  } catch (e) {
+    console.error('Note create error:', e.message);
+    res.status(500).json({ error: '创建笔记失败' });
+  }
+});
+
+// 更新内容
+router.put('/:filename', authMiddleware, adminOnly, (req, res) => {
+  const name = sanitizeFilename(req.params.filename);
+  if (!name) return res.status(400).json({ error: '文件名不合法' });
+  const content = typeof req.body.content === 'string' ? req.body.content : '';
+  try {
+    const full = path.join(WORKSPACE_DIR, name);
+    if (!fs.existsSync(full)) return res.status(404).json({ error: '笔记不存在' });
+    fs.writeFileSync(full, content, 'utf8');
+    const st = fs.statSync(full);
+    res.json({ name, size: st.size, mtime: st.mtimeMs });
+  } catch (e) {
+    console.error('Note update error:', e.message);
+    res.status(500).json({ error: '保存笔记失败' });
+  }
+});
+
+// 删除
+router.delete('/:filename', authMiddleware, adminOnly, (req, res) => {
+  const name = sanitizeFilename(req.params.filename);
+  if (!name) return res.status(400).json({ error: '文件名不合法' });
+  try {
+    const full = path.join(WORKSPACE_DIR, name);
+    if (!fs.existsSync(full)) return res.status(404).json({ error: '笔记不存在' });
+    fs.unlinkSync(full);
+    res.json({ message: '删除成功' });
+  } catch (e) {
+    console.error('Note delete error:', e.message);
+    res.status(500).json({ error: '删除笔记失败' });
+  }
+});
+
+module.exports = router;

routes/proxy.js

@@ -1,7 +1,8 @@
 const express = require('express');
 const http = require('http');
 const https = require('https');
-const { authMiddleware, adminOnly } = require('../middleware/auth');
+const jwt = require('jsonwebtoken');
+const { authMiddleware, adminOnly, SECRET } = require('../middleware/auth');
 const router = express.Router();
 
 // SSRF 防护：拒绝内网/回环/链路本地地址
@@ -59,6 +60,8 @@ function proxyRequest(target, res, maxRedirects = 5) {
       delete headers['X-Frame-Options'];
       delete headers['content-security-policy'];
       delete headers['Content-Security-Policy'];
+      // 防止被代理页面内部资源请求把本站来源（/admin 等）泄露给第三方域名
+      headers['Referrer-Policy'] = 'no-referrer';
 
       // Inject <base> tag so relative URLs resolve to the original domain
       const contentType = (headers['content-type'] || '').toLowerCase();
@@ -118,6 +121,18 @@ function queryTokenAuth(req, res, next) {
   next();
 }
 
+// 短 TTL 代理 token：仅供 iframe 的 ?token= 认证使用（5 分钟有效），
+// 避免把 7 天长 TTL 主 token 暴露在 iframe URL 中（URL 可见于网络面板/历史记录/日志）。
+// 前端 PanelFrame 每次组装 proxy URL 前先从此接口取短 token。
+router.get('/token', authMiddleware, adminOnly, (req, res) => {
+  const token = jwt.sign(
+    { id: req.user.id, username: req.user.username, role: req.user.role, proxy: true },
+    SECRET,
+    { expiresIn: '5m' }
+  );
+  res.json({ token });
+});
+
 router.get('/fetch', queryTokenAuth, authMiddleware, adminOnly, (req, res) => {
   if (!req.query.url) return res.status(400).json({ error: '缺少 url 参数' });
   proxyRequest(req.query.url, res);

routes/settings.js

@@ -6,18 +6,21 @@ const router = express.Router();
 
 const PUBLIC_KEYS = ['site_name','site_description','site_url','primary_color',
   'recaptcha_site_key','turnstile_site_key',
-  'theme_wallpaper','theme_wallpaper_scale','nav_style','card_style',
+  'theme_wallpaper','theme_wallpaper_scale','theme_wallpaper_enabled','nav_style','card_style',
   'glass_blur','glass_opacity','theme_force_dark',
   'captcha_type','captcha_login','captcha_register','captcha_forum',
   'homepage_avatar','homepage_bio','homepage_content','blog_show_sidebar',
-  'site_favicon','homepage_contacts','music_embed_enabled','music_embed_code','music_embed_position','music_embed_autohide','music_embed_idle_timeout'];
+  'site_favicon','homepage_contacts','music_embed_enabled','music_embed_code','music_embed_position','music_embed_autohide','music_embed_idle_timeout',
+  'footer_style','footer_copyright','footer_powered','footer_desc'];
 
 const ALL_KEYS = ['site_name','site_description','site_url','primary_color','recaptcha_site_key','turnstile_site_key',
   'smtp_host','smtp_port','smtp_user','smtp_from_email','smtp_from_name',
-  'theme_wallpaper','theme_wallpaper_scale','nav_style','card_style','glass_blur','glass_opacity','theme_force_dark',
+  'theme_wallpaper','theme_wallpaper_scale','theme_wallpaper_enabled','nav_style','card_style','glass_blur','glass_opacity','theme_force_dark',
   'captcha_type','captcha_login','captcha_register','captcha_forum',
   'homepage_avatar','homepage_bio','homepage_content','blog_show_sidebar',
-  'site_favicon','homepage_contacts','music_embed_enabled','music_embed_code','music_embed_position','music_embed_autohide','music_embed_idle_timeout'];
+  'site_favicon','homepage_contacts','music_embed_enabled','music_embed_code','music_embed_position','music_embed_autohide','music_embed_idle_timeout',
+  'footer_style','footer_copyright','footer_powered','footer_desc',
+  'comment_moderate','comment_notify'];
 
 const ALLOWED_SET = [...ALL_KEYS, 'recaptcha_secret_key', 'smtp_pass', 'turnstile_secret_key'];
 

routes/terminal.js

@@ -0,0 +1,529 @@
+// Web 终端后端 —— 安全敏感模块：终端 = RCE 级攻击面。
+// 安全措施：
+// 1. 专用终端密码二次确认：PBKDF2-SHA256 600k（与密码箱 routes/passwords.js 同参数，异步版不阻塞事件循环）；
+//    首次调用（未设置密码）即完成设置（needs_setup 流程），强度要求 8 位以上
+// 2. 短 TTL token（5 分钟）：jwt 带 terminal:true 声明，普通登录 token 不可直接连终端；
+//    认证成功后种 HttpOnly SameSite=Strict 短 TTL cookie（terminal_token），WS upgrade 优先取 cookie，
+//    ?token= query 仅为旧前端回退（不推荐，会落 access log）；带失败限流 + 请求级限流防 PBKDF2 DoS
+// 3. WS handshake Origin 校验（须与站点域名一致；仅 NODE_ENV=development 时放行 localhost）——纵深防御，非认证边界
+// 4. 并发会话上限（MAX_SESSIONS=3）：handleUpgrade 内同步预占槽位，杜绝升级回调前的竞态突破
+// 5. pty.spawn 使用参数数组传参（防命令注入）；kill 时连进程组一起终止（forkpty 子进程为 session leader，
+//    负 PID 即杀整组），杜绝 & 后台任务变孤儿进程
+// 6. 审计：会话开始/结束/密码失败等写审计日志（console.log 带时间戳 + audit_logs 表）；
+//    拒绝类事件（Origin/token/超限）降频落审计防日志洪泛；audit_logs 按 90 天保留策略惰性清理
+// 7. 空闲超时（15 分钟无输入）自动断开
+// 8. ws close/error → pty.kill() + 进程组清理 + 监听器/计时器全量销毁
+//    流控：pty 输出缓冲超限时 pause（仅在 onData 暂停），恢复检查放在 ws 消息处理 + 兜底轮询
+//
+// 部署注意：
+// - node-pty 是原生模块，需要服务器编译环境（build-essential / python3），
+//   安装失败时先 rm -rf node_modules 再 npm install（项目已有此重装先例）。
+// - sudoers 配置（把 rainweb 换成实际运行用户）：
+//   ⚠️ 实测 NOPASSWD: /usr/bin/sudo -i 写法匹配不到（sudo 匹配规则时 -i 会被规范化
+//      为实际执行的 login shell 命令，精确命令规则失效），必须放宽为：
+//     echo "rainweb ALL=(ALL) NOPASSWD: ALL" | sudo tee /etc/sudoers.d/rainweb-terminal
+//     sudo chmod 440 /etc/sudoers.d/rainweb-terminal && sudo visudo -c
+//   验证：以运行用户执行 `sudo -n -i id` 应直接输出 root 身份且不询问密码。
+//   注意：NOPASSWD: ALL 等同把运行用户提权为免密 root，务必确认运行用户无交互登录面。
+// - 后端若置于反向代理之后并希望审计 IP 取真实来源 IP，需设置环境变量 TRUST_PROXY=1
+//   （否则一律用 socket 直连地址，避免伪造 X-Forwarded-For）。
+const express = require('express');
+const crypto = require('crypto');
+const jwt = require('jsonwebtoken');
+const rateLimit = require('express-rate-limit');
+const { WebSocketServer, WebSocket } = require('ws');
+const db = require('../db');
+const { authMiddleware, adminOnly, SECRET } = require('../middleware/auth');
+
+const router = express.Router();
+
+// ---------- 常量 ----------
+const TOKEN_TTL = '5m';                 // 短 TTL token 有效期
+const TOKEN_COOKIE = 'terminal_token';  // HttpOnly 短 TTL cookie 名
+const TOKEN_COOKIE_MAX_AGE = 300;       // cookie 有效期（秒），与 TOKEN_TTL 一致
+const MAX_SESSIONS = 3;                 // 最大并发终端会话数
+const IDLE_TIMEOUT = 15 * 60 * 1000;    // 空闲超时：15 分钟无输入自动断开
+const PIN_MIN_LEN = 8;                  // 终端=root shell，PIN 强度要求 8 位以上
+const PBKDF2_ITERATIONS = 600000;       // 与 routes/passwords.js 一致（OWASP 2023 建议）
+const MAX_PTY_BUFFER = 1024 * 1024;     // pty 输出缓冲上限（超过则暂停 pty 做流控）
+const WS_MAX_PAYLOAD = 1024 * 1024;     // ws 单帧消息上限，超限立即断开
+const RESUME_POLL_MS = 2000;            // 流控恢复兜底轮询间隔
+const WS_CLOSE_BAD_TOKEN = 4001;        // token 无效
+const WS_CLOSE_OVERLOAD = 1013;         // 会话数超限
+const WS_CLOSE_IDLE = 4000;             // 空闲超时
+const WS_CLOSE_BAD_MSG = 4002;          // 非法消息
+
+// PIN 失败限流（与 passwords.js unlock 同模式）：5 分钟 3 次失败锁定 5 分钟
+const authFails = new Map();
+const FAIL_LIMIT = 3;
+const FAIL_WINDOW = 5 * 60 * 1000;
+const LOCK_DURATION = 5 * 60 * 1000;
+
+// /auth 请求级限流：防止异步 PBKDF2 被并发滥用造成 CPU DoS
+// （失败锁定只在校验之后生效，无法挡住每请求一次的 600k 迭代计算）
+const authRateLimit = rateLimit({
+  windowMs: 5 * 60 * 1000,
+  max: 20,
+  standardHeaders: true,
+  legacyHeaders: false,
+  message: { error: '尝试次数过多，请稍后再试' },
+});
+
+// 拒绝类事件审计降频：同一来源 IP 在窗口内最多记一条（防日志洪泛）
+const REJECT_AUDIT_INTERVAL = 10 * 1000;
+const rejectAudit = new Map(); // ip -> lastTs
+
+// 并发终端会话集合（计数与统一清理）
+const activeSessions = new Set();
+
+// node-pty 懒加载：未安装时 REST 接口（status/auth）仍可用，仅 WS 会话被拒绝
+let ptyModule = null;
+try { ptyModule = require('node-pty'); } catch (e) { /* 未安装：连接时提示 */ }
+
+// 审计写入计数：每 50 条惰性清理一次过期记录（保留策略，见 db.js）
+let auditWriteCount = 0;
+
+// ---------- 审计 ----------
+// ctx: { user, ip }（user 为 JWT payload）
+function audit(action, detail, ctx) {
+  const userId = ctx && ctx.user ? ctx.user.id : 0;
+  const username = ctx && ctx.user ? ctx.user.username : '';
+  const ip = ctx && ctx.ip ? ctx.ip : '';
+  console.log(`[${new Date().toISOString()}] [TERMINAL] ${action} user=${username}(${userId}) ip=${ip} ${detail}`);
+  // 审计落库（audit_logs 表由 db.js initTables 建表；db.run 内部已容错）
+  db.run('INSERT INTO audit_logs (action, user_id, username, detail, ip) VALUES (?, ?, ?, ?, ?)',
+    [action, userId, username, detail, ip]);
+  // 保留策略：每 50 条写入惰性清理 90 天前的记录（created_at 为 UTC datetime，与建表一致）
+  if (++auditWriteCount % 50 === 0) {
+    db.run("DELETE FROM audit_logs WHERE created_at < datetime('now','-90 day')");
+  }
+}
+
+// 客户端真实 IP：仅当 TRUST_PROXY=1 时信任 X-Forwarded-For（否则客户端可任意伪造该头）
+function getClientIp(request) {
+  if (process.env.TRUST_PROXY === '1' && request.headers['x-forwarded-for']) {
+    return String(request.headers['x-forwarded-for']).split(',')[0].trim() || '';
+  }
+  return (request.socket.remoteAddress || '').toString();
+}
+
+// 拒绝事件降频审计：同 IP 10 秒内只记一条
+function auditRejectOnce(ip, action, detail) {
+  const now = Date.now();
+  if ((rejectAudit.get(ip) || 0) > now - REJECT_AUDIT_INTERVAL) return;
+  rejectAudit.set(ip, now);
+  audit(action, detail, { ip });
+}
+
+// ---------- PIN（终端专用密码）----------
+const PIN_SALT_KEY = 'terminal_pin_salt';
+const PIN_ITER_KEY = 'terminal_pin_iter';
+const PIN_HASH_KEY = 'terminal_pin_hash';
+
+function getPinRecord() {
+  const salt = db.getSetting(PIN_SALT_KEY);
+  const hash = db.getSetting(PIN_HASH_KEY);
+  if (!salt || !hash) return null;
+  const iter = parseInt(db.getSetting(PIN_ITER_KEY), 10) || PBKDF2_ITERATIONS;
+  return { salt: Buffer.from(salt, 'hex'), hash: Buffer.from(hash, 'hex'), iter };
+}
+
+// 异步 PBKDF2：不阻塞事件循环（600k 迭代约几十毫秒，同步版会卡住所有请求）
+function derivePinHash(pin, salt, iter) {
+  return new Promise((resolve, reject) => {
+    crypto.pbkdf2(pin, salt, iter, 32, 'sha256', (err, key) => {
+      if (err) reject(err); else resolve(key);
+    });
+  });
+}
+
+async function setPin(pin) {
+  const salt = crypto.randomBytes(16);
+  const hash = await derivePinHash(pin, salt, PBKDF2_ITERATIONS);
+  db.setSetting(PIN_SALT_KEY, salt.toString('hex'));
+  db.setSetting(PIN_ITER_KEY, String(PBKDF2_ITERATIONS));
+  db.setSetting(PIN_HASH_KEY, hash.toString('hex'));
+}
+
+async function verifyPin(pin) {
+  const rec = getPinRecord();
+  if (!rec) return false;
+  const derived = await derivePinHash(pin, rec.salt, rec.iter);
+  // 常数时间比较，防时序侧信道
+  return crypto.timingSafeEqual(derived, rec.hash);
+}
+
+// ---------- PIN 失败限流 ----------
+function isLocked() {
+  const rec = authFails.get('global');
+  return !!(rec && rec.lockedUntil && Date.now() < rec.lockedUntil);
+}
+
+function recordFail() {
+  const now = Date.now();
+  let rec = authFails.get('global');
+  if (!rec || now - rec.firstTs > FAIL_WINDOW) rec = { count: 0, firstTs: now, lockedUntil: 0 };
+  rec.count += 1;
+  if (rec.count >= FAIL_LIMIT) { rec.lockedUntil = now + LOCK_DURATION; rec.count = 0; }
+  authFails.set('global', rec);
+}
+
+// ---------- 短 TTL token（参考 proxy.js）----------
+function issueToken(user) {
+  // terminal:true 声明：只有本接口签发的 token 才能连接终端，普通登录 token 无效
+  return jwt.sign(
+    { id: user.id, username: user.username, role: user.role, terminal: true },
+    SECRET,
+    { expiresIn: TOKEN_TTL }
+  );
+}
+
+function verifyToken(token) {
+  if (!token || typeof token !== 'string') return null;
+  try {
+    const payload = jwt.verify(token, SECRET);
+    if (!payload.terminal) return null;          // 必须为终端专用 token
+    if (payload.role !== 'admin') return null;   // 防篡改
+    const u = db.get('SELECT role FROM users WHERE id = ?', [payload.id]);
+    if (!u || u.role !== 'admin') return null;   // 复查角色（用户被删/降权立即失效）
+    return payload;
+  } catch { return null; }
+}
+
+// 认证成功 → 种 HttpOnly 短 TTL cookie：WS 握手（同源 GET /ws/terminal）自动携带，
+// root shell 凭证不再进 URL / access log。Path 精确限定 /ws/terminal，HttpOnly 防 XSS 读取，
+// SameSite=Strict 防跨站发送。Secure 按 req.secure（HTTPS 连接）条件附加。
+function setTerminalCookie(res, token) {
+  res.setHeader('Set-Cookie',
+    `terminal_token=${token}; Path=/ws/terminal; HttpOnly; SameSite=Strict; Max-Age=${TOKEN_COOKIE_MAX_AGE}` +
+    (res.req && res.req.secure ? '; Secure' : ''));
+}
+
+// 极简 Cookie 解析（upgrade 事件不经 Express，无 cookie-parser）
+function parseCookies(header) {
+  const out = {};
+  if (!header) return out;
+  for (const part of String(header).split(';')) {
+    const idx = part.indexOf('=');
+    if (idx === -1) continue;
+    const name = part.slice(0, idx).trim();
+    const value = part.slice(idx + 1).trim();
+    if (name) { try { out[name] = decodeURIComponent(value); } catch { out[name] = value; } }
+  }
+  return out;
+}
+
+// ---------- REST API ----------
+// GET /api/terminal/status —— 是否已设置密码 + 当前会话数
+router.get('/status', authMiddleware, adminOnly, (req, res) => {
+  res.json({
+    hasPin: !!getPinRecord(),
+    sessions: activeSessions.size,
+    maxSessions: MAX_SESSIONS,
+    idleTimeoutMs: IDLE_TIMEOUT,
+  });
+});
+
+// POST /api/terminal/auth —— 设置/校验终端专用密码，通过后发放 5 分钟短 TTL token
+// 并种 HttpOnly cookie（terminal_token）。
+// 首次（未设置密码）调用即完成设置（前端按 /status 的 hasPin 决定显示设置表单或密码输入框），
+// 响应带 setup:true 标记。响应仍含 token 字段（保持 API 契约），前端无需再从 URL 传递。
+router.post('/auth', authRateLimit, authMiddleware, adminOnly, async (req, res) => {
+  const pin = req.body && req.body.pin;
+  if (!pin || typeof pin !== 'string') return res.status(400).json({ error: '请输入终端密码' });
+  if (pin.length > 128) return res.status(400).json({ error: '终端密码过长' });
+  if (isLocked()) return res.status(429).json({ error: '尝试次数过多，请稍后再试' });
+
+  const rec = getPinRecord();
+  const ctx = { user: req.user, ip: getClientIp(req) };
+
+  if (!rec) {
+    // 首次设置：无密码 → 设置并发放 token
+    if (pin.length < PIN_MIN_LEN) {
+      return res.status(400).json({ error: `终端密码至少 ${PIN_MIN_LEN} 位` });
+    }
+    try {
+      await setPin(pin);
+    } catch (e) {
+      return res.status(500).json({ error: '密码处理失败' });
+    }
+    authFails.delete('global');
+    audit('PIN_SETUP', '终端专用密码已设置', ctx);
+    const token = issueToken(req.user);
+    setTerminalCookie(res, token);
+    return res.json({
+      needs_setup: false,
+      setup: true,
+      token,
+      expiresIn: TOKEN_TTL,
+      message: '终端密码已设置',
+    });
+  }
+
+  let pinOk = false;
+  try { pinOk = await verifyPin(pin); } catch { pinOk = false; }
+  if (!pinOk) {
+    recordFail();
+    audit('PIN_FAIL', '终端密码校验失败', ctx);
+    if (isLocked()) return res.status(429).json({ error: '尝试次数过多，请稍后再试' });
+    return res.status(401).json({ error: '终端密码错误' });
+  }
+
+  authFails.delete('global');
+  audit('PIN_OK', '终端密码校验通过，发放短 TTL token', ctx);
+  const token = issueToken(req.user);
+  setTerminalCookie(res, token);
+  res.json({ token, expiresIn: TOKEN_TTL });
+});
+
+// ---------- WS /ws/terminal ----------
+const isDev = process.env.NODE_ENV === 'development';
+
+// Origin 校验：必须与站点域名一致（site_url 或请求 Host 头）。
+// localhost 豁免仅 NODE_ENV=development 时生效（生产环境非浏览器客户端无法借 localhost 绕过）。
+// 注意：这是纵深防御，不是认证边界——真正把关的是 token/cookie 校验。
+function originAllowed(request) {
+  const origin = request.headers.origin;
+  if (!origin) return false;
+  try {
+    const o = new URL(origin);
+    const allowed = [];
+    const siteUrl = db.getSetting('site_url');
+    if (siteUrl) { try { allowed.push(new URL(siteUrl).host); } catch {} }
+    if (request.headers.host) allowed.push(request.headers.host);
+    if (isDev && ['127.0.0.1', 'localhost', '::1'].includes(o.hostname)) return true;
+    return allowed.includes(o.host);
+  } catch { return false; }
+}
+
+// pty 安全：参数数组传参（防命令注入），禁止字符串拼接；sudo -i 获得 root shell。
+// cwd 必须用运行用户可访问的目录：直接给 '/root' 时 spawn 不抛错，
+// 而是 shell 启动后 chdir(2) 失败（Permission denied）——sudo -i 本身会把
+// 工作目录与 HOME 切到 /root，所以这里给运行用户当前目录即可。
+function spawnPty(cols, rows) {
+  if (!ptyModule) return null; // node-pty 未安装
+  const opts = { name: 'xterm-color', cols, rows, cwd: process.cwd() };
+  return ptyModule.spawn('sudo', ['-i'], opts);
+}
+
+// 终止 pty：先杀 shell，再连进程组一起杀（forkpty 子进程是 session leader，pgid == pid，
+// 负 PID 即杀整组），500ms 后兜底 SIGKILL，杜绝 `&` 后台任务变孤儿进程。
+function killPty(pty) {
+  if (!pty) return;
+  const pid = pty.pid;
+  try { pty.kill(); } catch {} // 标准接口：向 shell 发 SIGKILL
+  if (pid && Number.isInteger(pid)) {
+    try { process.kill(-pid, 'SIGTERM'); } catch {}
+    const t = setTimeout(() => {
+      try { process.kill(-pid, 'SIGKILL'); } catch {}
+    }, 500);
+    if (t.unref) t.unref();
+  }
+}
+
+// WS 服务：noServer 模式，由 server.js 的 http server 'upgrade' 事件转交；
+// maxPayload 限制单帧大小，超限由 ws 自动关闭（1009）。
+const wss = new WebSocketServer({ noServer: true, maxPayload: WS_MAX_PAYLOAD });
+
+// server.js 调用：返回 true 表示已接管该 upgrade 请求（含拒绝），false 表示非终端路径
+function handleUpgrade(request, socket, head) {
+  let pathname = null;
+  try { pathname = new URL(request.url, 'http://localhost').pathname; } catch {}
+  if (pathname !== '/ws/terminal') return false;
+
+  const ip = getClientIp(request);
+
+  // 1) Origin 校验（纵深防御；拒绝事件降频落审计）
+  if (!originAllowed(request)) {
+    auditRejectOnce(ip, 'WS_ORIGIN_REJECT', 'Origin 校验失败');
+    socket.write('HTTP/1.1 403 Forbidden\r\nConnection: close\r\n\r\n');
+    socket.destroy();
+    return true;
+  }
+  // 2) token 校验：优先 HttpOnly cookie（推荐），?token= query 仅作旧前端回退（不推荐，落 access log）
+  const cookies = parseCookies(request.headers.cookie);
+  let token = cookies[TOKEN_COOKIE];
+  if (!token) {
+    try { token = new URL(request.url, 'http://localhost').searchParams.get('token'); } catch {}
+  }
+  const payload = verifyToken(token);
+  if (!payload) {
+    auditRejectOnce(ip, 'WS_TOKEN_REJECT', 'token 无效或过期');
+    socket.write('HTTP/1.1 401 Unauthorized\r\nConnection: close\r\n\r\n');
+    socket.destroy();
+    return true;
+  }
+  // 3) 并发会话上限：同步预占槽位再检查（升级回调前执行，杜绝并发竞态突破上限）
+  const slot = { pending: true };
+  activeSessions.add(slot);
+  if (activeSessions.size > MAX_SESSIONS) {
+    activeSessions.delete(slot);
+    auditRejectOnce(ip, 'WS_OVERLOAD', '并发会话数超限被拒绝');
+    socket.write('HTTP/1.1 503 Service Unavailable\r\nConnection: close\r\n\r\n');
+    socket.destroy();
+    return true;
+  }
+  // 升级中途失败（socket 断开等）时释放预占槽位，防止泄漏
+  const releaseSlot = () => { activeSessions.delete(slot); };
+  socket.once('close', releaseSlot);
+  socket.once('error', releaseSlot);
+
+  // 4) 升级并触发连接处理（槽位随会话移交）
+  wss.handleUpgrade(request, socket, head, (ws) => {
+    socket.removeListener('close', releaseSlot);
+    socket.removeListener('error', releaseSlot);
+    if (ws.readyState !== WebSocket.OPEN) { // 升级异常：释放槽位
+      activeSessions.delete(slot);
+      return;
+    }
+    wss.emit('connection', ws, request, payload, slot);
+  });
+  return true;
+}
+
+wss.on('connection', (ws, request, payload, slot) => {
+  // 复用 handleUpgrade 预占的槽位（已在 activeSessions 中，幂等 add），
+  // 升级失败路径已由 releaseSlot/readyState 检查负责释放。
+  const session = slot || {};
+  session.id = session.id || crypto.randomBytes(4).toString('hex');
+  session.startedAt = session.startedAt || Date.now();
+  activeSessions.add(session);
+
+  let ptyProc = null;
+  let idleTimer = null;
+  let resumeTimer = null;
+  let closed = false;
+  const ctx = { user: payload, ip: getClientIp(request) };
+
+  audit('SESSION_START', `终端会话 ${session.id} 建立`, ctx);
+
+  function cleanup() {
+    if (closed) return;
+    closed = true;
+    clearTimeout(idleTimer);
+    clearInterval(resumeTimer);
+    // 销毁 pty：kill() + 进程组清理（含后台任务），事件回调为一次性注册随对象失效
+    killPty(ptyProc);
+    ptyProc = null;
+    activeSessions.delete(session);
+  }
+
+  function scheduleIdle() {
+    clearTimeout(idleTimer);
+    idleTimer = setTimeout(() => {
+      if (closed) return;
+      audit('SESSION_IDLE_TIMEOUT', `终端会话 ${session.id} 空闲 ${IDLE_TIMEOUT / 60000} 分钟无输入，自动断开`, ctx);
+      try { ws.close(WS_CLOSE_IDLE, 'idle timeout'); } catch {}
+      cleanup();
+    }, IDLE_TIMEOUT);
+    if (idleTimer.unref) idleTimer.unref(); // 不阻止进程退出
+  }
+
+  // 流控恢复：onData 暂停后不再触发回调，恢复检查必须在消息路径/轮询中执行
+  function maybeResume() {
+    if (closed || !session._paused || !ptyProc) return;
+    if (ws.readyState === WebSocket.OPEN && ws.bufferedAmount < MAX_PTY_BUFFER / 2) {
+      session._paused = false;
+      try { ptyProc.resume(); } catch {}
+    }
+  }
+
+  ws.on('message', (data, isBinary) => {
+    if (closed) return;
+    maybeResume(); // 任意帧到达即尝试恢复（resize/输入/控制消息均可）
+    // 二进制帧 = pty 输入（触发空闲计时刷新）
+    if (isBinary) {
+      if (!ptyProc) return;
+      scheduleIdle();
+      try { ptyProc.write(data); } catch {}
+      return;
+    }
+    // 文本帧 = JSON 控制消息
+    let msg;
+    try { msg = JSON.parse(data.toString('utf8')); } catch {
+      try { ws.close(WS_CLOSE_BAD_MSG, 'invalid json'); } catch {}
+      cleanup(); return;
+    }
+    if (!msg || typeof msg.type !== 'string') {
+      try { ws.close(WS_CLOSE_BAD_MSG, 'bad message'); } catch {}
+      cleanup(); return;
+    }
+    switch (msg.type) {
+      case 'auth':
+        // 连接后可选再发 token 二次认证；无效立即断开（4001）
+        if (!verifyToken(msg.token)) {
+          audit('SESSION_AUTH_FAIL', `终端会话 ${session.id} 二次认证失败`, ctx);
+          try { ws.close(WS_CLOSE_BAD_TOKEN, 'bad token'); } catch {}
+          cleanup();
+        }
+        break;
+      case 'resize': {
+        const cols = Math.min(Math.max(parseInt(msg.cols, 10) || 80, 2), 500);
+        const rows = Math.min(Math.max(parseInt(msg.rows, 10) || 24, 2), 200);
+        if (ptyProc) { try { ptyProc.resize(cols, rows); } catch {} }
+        break;
+      }
+      case 'ping':
+        try { ws.send(JSON.stringify({ type: 'pong' })); } catch {}
+        break;
+      case 'bye':
+        audit('SESSION_BYE', `终端会话 ${session.id} 主动退出`, ctx);
+        try { ws.close(1000, 'bye'); } catch {}
+        cleanup();
+        break;
+      default:
+        break; // 未知控制消息忽略
+    }
+  });
+
+  ws.on('error', (err) => {
+    audit('SESSION_ERROR', `终端会话 ${session.id} WebSocket 错误: ${err.message}`, ctx);
+    cleanup();
+  });
+
+  ws.on('close', () => {
+    audit('SESSION_END', `终端会话 ${session.id} 连接关闭`, ctx);
+    cleanup();
+  });
+
+  // 启动 pty（sudo -i → root shell）
+  try {
+    ptyProc = spawnPty(80, 24);
+  } catch (e) {
+    audit('SESSION_SPAWN_FAIL', `终端会话 ${session.id} pty 启动失败: ${e.message}`, ctx);
+    try { ws.close(1011, 'pty spawn failed'); } catch {}
+    cleanup(); return;
+  }
+  if (!ptyProc) {
+    audit('SESSION_SPAWN_FAIL', `终端会话 ${session.id} 拒绝：node-pty 未安装或无法加载`, ctx);
+    try { ws.close(1011, 'node-pty not installed'); } catch {}
+    cleanup(); return;
+  }
+
+  // 兜底恢复轮询：即使客户端不再发任何帧，也能在缓冲排空后恢复 pty
+  resumeTimer = setInterval(() => maybeResume(), RESUME_POLL_MS);
+  if (resumeTimer.unref) resumeTimer.unref();
+
+  // pty 输出 → ws 二进制帧（binaryType=arraybuffer）
+  ptyProc.onData((data) => {
+    if (closed || ws.readyState !== WebSocket.OPEN) return;
+    // 仅做暂停判断（数据流动时天然触发）；恢复由 maybeResume（消息/轮询）负责
+    if (!session._paused && ws.bufferedAmount > MAX_PTY_BUFFER) {
+      session._paused = true;
+      try { ptyProc.pause(); } catch {}
+    }
+    try { ws.send(data, { binary: true }); } catch {}
+  });
+
+  ptyProc.onExit(({ exitCode, signal }) => {
+    audit('SESSION_EXIT', `终端会话 ${session.id} 进程退出 code=${exitCode} signal=${signal}`, ctx);
+    cleanup();
+    if (ws.readyState === WebSocket.OPEN) { try { ws.close(1000, 'pty exited'); } catch {} }
+  });
+
+  scheduleIdle();
+  audit('SESSION_READY', `终端会话 ${session.id} pty 就绪`, ctx);
+});
+
+module.exports = router;
+module.exports.handleUpgrade = handleUpgrade;

server.js

@@ -32,6 +32,9 @@ const uploadRoutes = require('./routes/upload');
 const setupRoutes = require('./routes/setup');
 const proxyRoutes = require('./routes/proxy');
 const importRoutes = require('./routes/import');
+const noteRoutes = require('./routes/notes');
+const feedRoutes = require('./routes/feed');
+const terminalRoutes = require('./routes/terminal');
 const { blogSSR, forumSSR, sitemapXml } = require('./ssr');
 
 const app = express();
@@ -110,6 +113,8 @@ app.use('/api/upload', uploadRoutes);
 app.use('/api/setup', setupRoutes);
 app.use('/api/proxy', proxyRoutes);
 app.use('/api/import', importRoutes);
+app.use('/api/notes', noteRoutes);
+app.use('/api/terminal', terminalRoutes);
 
 // Version & Update
 const version = require('fs').readFileSync('./VERSION', 'utf8').trim();
@@ -129,6 +134,8 @@ app.get('/forum/manage/:id', (req, res) => {
   res.redirect('/forum-manage.html');
 });
 app.get('/sitemap.xml', sitemapXml);
+// RSS 订阅：显式路由，须在 SPA catch-all 之前（挂在 SSR 区附近）
+app.use(feedRoutes);
 app.get('/robots.txt', (req, res) => {
   const db = require('./db');
   const siteUrl = db.getSetting('site_url') || (req.protocol + '://' + req.get('host'));
@@ -139,8 +146,9 @@ Allow: /
 Sitemap: ${domain}/sitemap.xml`);
 });
 
-// 管理后台独立应用（Phase 6）：/admin* → dist/admin.html（必须注册在 app.get('*') SPA fallback 之前）
+// 管理后台独立应用（Phase 6）：/admin 与 /admin/* → dist/admin.html（必须注册在 app.get('*') SPA fallback 之前）
-app.get('/admin*', (req, res) => {
+// 注意：用路径数组 ['/admin', '/admin/*'] 精确匹配，避免 /adminfoo 等前缀误命中
+app.get(['/admin', '/admin/*'], (req, res) => {
   const adminPath = path.join(__dirname, 'public', 'dist', 'admin.html');
   if (require('fs').existsSync(adminPath)) {
     res.sendFile(adminPath);
@@ -182,9 +190,17 @@ async function start() {
     }
 
     await getDb();
-    app.listen(PORT, '0.0.0.0', () => {
+    const server = app.listen(PORT, '0.0.0.0', () => {
       console.log(`RainWeb running on port ${PORT}`);
     });
+    // Web 终端 WS 升级：upgrade 事件不经 Express 中间件栈，
+    // 在此提前接管 /ws/terminal（避开 SPA catch-all），其余升级请求直接关闭。
+    // 安全校验（Origin/token/会话上限）均在 routes/terminal.js handleUpgrade 内完成。
+    server.on('upgrade', (request, socket, head) => {
+      if (!terminalRoutes.handleUpgrade(request, socket, head)) {
+        socket.destroy();
+      }
+    });
   } catch (err) {
     console.error('Failed to start:', err.message);
     process.exit(1);

ssr.js

@@ -100,6 +100,8 @@ function renderSSR(content, useMarkdown) {
 function blogSSR(req, res) {
   const post = db.get('SELECT bp.*, u.username as author_name FROM blog_posts bp LEFT JOIN users u ON bp.author_id = u.id WHERE bp.id = ?', [req.params.id]);
   if (!post || !post.published) return res.status(404).send('文章不存在');
+  // 阅读量 +1（SEO 页访问也计入）
+  db.run('UPDATE blog_posts SET views = views + 1 WHERE id = ?', [post.id]);
   const body = renderSSR(post.content, post.use_markdown);
   const excerpt = post.excerpt || post.content.slice(0, 150);
   const siteName = db.getSetting('site_name') || 'RainWeb';

vite.config.js

@@ -21,6 +21,9 @@ module.exports = defineConfig({
     proxy: {
       '/api': 'http://localhost:3101',
       '/uploads': 'http://localhost:3101',
+      // Web 终端 WS：/ws/terminal 必须走 WebSocket 代理，否则 dev 下解锁后
+      // 连接永远失败 → 终端空转白屏（生产由 server.js 的 upgrade 事件处理）
+      '/ws': { target: 'ws://localhost:3101', ws: true },
     },
   },
 });