+
+```
+
+**站点名**：
+- `text-xl sm:text-2xl font-bold text-blue-400 truncate max-w-[200px] sm:max-w-none`
+- 点击 `window.location.href = '/'`
+
+**菜单区**：
+- `hidden md:flex flex-1 min-w-0 items-center justify-center mx-6`
+- 菜单项：`text-gray-600 hover:text-blue-600 font-medium transition-colors duration-200`
+- 间距：`space-x-8`（32px）
+
+**菜单溢出策略（重点）**：
+
+- 用「不可见测量副本」+ `ResizeObserver` 测量所有菜单项宽度。
+- 计算容器宽度能容纳的菜单项数 `visibleCount`。
+- 溢出项归入「更多 ▾」下拉：
+
+```
+
+
+```
+
+- 容器：测量 `
- ` 用 `aria-hidden="true"` 离屏，`absolute -left-[9999px] top-0`。
+- 「更多」按钮固定占位 `88px`。
+
+**登录态菜单**：
+
+- 已登录：头像（`w-8 h-8 rounded-full`） + 用户名（`max-w-[120px] truncate`）+ 下拉。
+- 下拉：`absolute right-0 mt-2 w-48` + 阴影 + 边框。
+- 项：「进入控制台」「登出」（登出项加 `border-t border-gray-100` 区分）。
+- 未登录：胶囊按钮 `header-login-btn`：
+ ```
+ rounded-full bg-gray-100 hover:bg-blue-50
+ text-gray-600 hover:text-blue-600
+ px-3 py-1.5 text-sm font-medium
+ inline-flex items-center gap-1.5
+ transition-all duration-200
+ ```
+
+**移动端（< md 768px）**：
+
+- 汉堡按钮：`md:hidden`，右对齐，`p-2 rounded hover:bg-gray-100`。
+- 点击展开（旋转 90° 切换图标）：
+ ```
+
+ ```
+- 菜单项：`block w-full text-left py-3 px-2 hover:bg-blue-50 rounded-lg mobile-menu-link`。
+- 登录按钮（移动）：`w-full py-3 bg-blue-400 hover:bg-blue-500 text-white`。
+- 登出按钮：`text-red-600 hover:text-red-700 hover:bg-red-50 rounded-lg mobile-menu-link-logout`。
+- 背景遮罩：`fixed inset-0 bg-black/20 backdrop-blur-sm`，点击关闭。
+
+**外部交互关闭**：
+```js
+useEffect(() => {
+ const handler = (e) => {
+ if (isMobileMenuOpen && !e.target.closest('header')) setIsMobileMenuOpen(false);
+ if (isUserMenuOpen && !e.target.closest('.user-menu-container')) setIsUserMenuOpen(false);
+ if (isMoreMenuOpen && !e.target.closest('.more-menu-container')) setIsMoreMenuOpen(false);
+ };
+ document.addEventListener('click', handler);
+ return () => document.removeEventListener('click', handler);
+}, [isMobileMenuOpen, isUserMenuOpen, isMoreMenuOpen]);
+```
+
+### 4.2 Hero 头图
+
+**结构**：
+```jsx
+
+
+```
+
+**规范**：
+
+- 全屏宽背景图，`bg-gray-900` 兜底。
+- 文字最大宽度 `max-w-2xl`，垂直内边距 `py-24 md:py-32`。
+- 加载态：`absolute inset-0 bg-gray-300 animate-pulse` + 内部骨架 `h-12 bg-gray-200 rounded w-3/4 mb-4 animate-pulse`。
+- 失败态：暗色背景 `bg-gray-800` + 「欢迎来到站点」标题 `text-4xl md:text-5xl font-bold text-white`。
+- 图片 `onError` 回退 `/image_error.svg`。
+
+### 4.3 ArticleCard 文章卡片
+
+#### 桌面版（`md` 及以上，3 列网格）
+
+```
+┌───────────────────────────┐
+│ [封面图 16:9 h-40] │ ← group-hover:scale-105
+├───────────────────────────┤
+│ 标题 (line-clamp-1) │
+│ 摘要 (line-clamp-2) │
+│ [分类 chip] [标签1] [标签2]│
+│ ──────────────────── │
+│ [头像] 作者 · 日期 │
+└───────────────────────────┘
+```
+
+- 容器：`article-card bg-white rounded-lg shadow-md hover:shadow-lg border border-gray-200 cursor-pointer`
+- 封面：`h-40 overflow-hidden`，图片 `rounded-t-lg group-hover:scale-105 transition-transform duration-300`
+- 标题：`text-lg font-bold text-gray-900 line-clamp-1`，最大 30 字符截断 `safeTruncate(title, 30)`
+- 摘要：`text-gray-500 text-sm line-clamp-2 leading-relaxed`
+- 标签：`article-tag bg-gray-100 text-gray-800 text-xs px-2 py-1 rounded hover:bg-gray-200 transition-colors shrink-0`
+- 头像：`w-7 h-7 rounded-full object-cover`
+- 整卡片可点击；标签/分类 `e.preventDefault() + e.stopPropagation()` 阻止冒泡。
+
+#### 移动版（`forceMobile`，高度 `h-40` 横排）
+
+```
+┌──────────────────────────────────────────┐
+│ [缩略图 1/3] 标题 (line-clamp-1) │
+│ w-40 │ 摘要 (line-clamp-3) │
+│ h-40 │ [分类] [标签] [标签] │
+│ │ [头像] 作者 · 日期 │
+└──────────────────────────────────────────┘
+```
+
+- 高度固定 `h-40`，缩略图占 1/3 宽度 + `m-2` 边距。
+- 标签行横向滚动：`flex items-center gap-1.5 overflow-x-auto tags-scroll`，隐藏滚动条。
+- 头像 `w-5 h-5`，标题 `text-sm`。
+
+**暗色模式**：
+- 卡片：`bg-gray-800 border-gray-700`；标题 `#F9FAFB`；摘要 `#D1D5DB`；分类 `#1E3A8A / #93C5FD`。
+
+### 4.4 ArticleList 文章列表
+
+**顶部工具栏**：
+```
+┌──────────────────────────────────────────────────┐
+│ [筛选标题 text-2xl font-bold] [图片开关] [清除筛选] │
+└──────────────────────────────────────────────────┘
+```
+
+- 标题：`text-2xl font-bold text-gray-900 filter-title`
+- 图片开关（仅 `md` 及以上可见）—— 自定义 Switch：
+ ```
+
+ ![]()
+
+
+
+
+
+ {title}
+ {subtitle &&{subtitle}
} +
+
+
+
+
+ ```
+- 文字：`mr-3 text-sm font-medium text-gray-600 switch-label select-none`
+- 清除筛选：`text-sm text-blue-600 hover:text-blue-800` —— 出现条件：`categoryName || tagName`
+
+**网格**：
+```
+
+```
+
+**加载态**：
+```
+` 实现 `opacity 0 → 1` 淡入。
+
+**自动检查更新**：登录后自动 `GET /update/check`，新版本 toast 提示。
+- 兼容：`info`，5000ms
+- 不兼容：`warning`，5000ms
+
+### 5.2 Sidebar 侧边栏
+
+**布局**：
+```jsx
+
+ 加载中...
+
+```
+> `holdHeight` 在切换前记录旧高度，避免布局抖动。
+
+**空态**：`text-center py-12 text-gray-500` + 「暂无文章」
+
+**分页器**：
+```
+[上一页] [1 / 5] [下一页]
+```
+- 按钮：`px-4 py-2 mx-1 bg-gray-200 rounded disabled:opacity-50 pagination-button`
+- 中间信息：`pagination-info`：`px-4 py-2 mx-1 pagination-info text-gray-600`，暗色 `bg-gray-700 border-gray-600`
+- 切换不滚动到顶部（保留上下文）。
+
+**Abort 策略**：
+```js
+const abortController = new AbortController();
+await apiClient.get(url, { signal: abortController.signal });
+// 切换条件时 abort 上一次
+```
+
+### 4.5 侧栏三件套
+
+#### 4.5.1 统一外壳
+
+```
+┌──────────────────────────┐
+│ [图标] 标题 │
+│ ───────── │
+│ 列表/内容 │
+│ [▼ 渐隐遮罩] │
+└──────────────────────────┘
+```
+
+- 容器：`bg-white rounded-lg shadow-md p-5 mb-6 border border-gray-200`
+- 标题：`text-lg font-bold text-gray-900 mb-4`
+
+#### 4.5.2 CategorySidebar（文章分类）
+
+- 列表项：`flex justify-between items-center w-full text-left px-2 py-1 rounded`
+- 选中态：`bg-blue-100 text-blue-800`
+- 未选中：`text-gray-600 hover:bg-gray-50`
+- 数量徽章：`bg-gray-100 text-gray-800 text-xs font-medium px-2 py-1 rounded-full`
+- 滚动容器：`max-h-60 overflow-y-auto pr-2`，隐藏滚动条（`.hide-scrollbar`）。
+
+**渐隐遮罩（细节）**：
+```jsx
+
+
+
+```
+- 顶部渐变 `linear-gradient(to top, transparent, #ffffff)`，底部反之。
+- 监听 `scroll` + `ResizeObserver` 动态切换 opacity。
+- 暗色模式遮罩变为 `transparent → #1F2937`。
+
+#### 4.5.3 TagSidebar（文章标签）
+
+- 布局：`flex flex-wrap gap-2 max-h-60 overflow-y-auto pr-2`。
+- 徽章：`px-3 py-1 text-sm rounded-full`
+- 选中：`bg-blue-500 text-white`
+- 未选中：`bg-gray-100 text-gray-800 hover:bg-gray-200`
+
+#### 4.5.4 RecommendedArticles（热门文章）
+
+- 容器：`rounded-xl shadow-sm p-5`（圆角更柔）
+- 列表项：`block w-full text-left p-3 rounded-lg hover:bg-gray-50`
+- 标题：`font-medium text-gray-900 group-hover:text-blue-600 line-clamp-2 break-words`
+- Meta 行：
+ - 日期 `whitespace-nowrap truncate`
+ - 分隔符 `•`
+ - 作者 `truncate min-w-0`
+ - 眼睛图标 + 浏览量（`1.2k` 简写函数 `formatViews`）
+- 同样使用渐隐遮罩。
+
+### 4.6 ArticleReader 文章详情
+
+**布局（桌面 `lg` 及以上，三栏）**：
+```
+┌─────────────────────────────────────────────────────┐
+│ [封面图 h-96，渐变蒙层 to-black/70] │
+├──────────┬─────────────────────────────┬────────────┤
+│ 目录 TOC │ 文章正文（卡片） │ 分类 │
+│ (sticky) │ [评论] │ 标签 │
+│ │ │ 热门 │
+└──────────┴─────────────────────────────┴────────────┘
+```
+
+- 卡片「浮」在封面上方：`"-mt-20 relative z-10"`
+- 左：`hidden lg:block lg:w-1/4`
+- 中：`w-full lg:w-1/2`
+- 右：`hidden lg:block lg:w-1/4`，`sticky top-28`
+
+**封面**：
+- 全宽 `h-96`，`object-cover`，渐变 `bg-gradient-to-b from-black/30 to-black/70`。
+
+**TableOfContents**：
+- 容器：`bg-white rounded-lg shadow-md p-5`
+- 标题按钮 + 折叠列表（`translate-y` 平滑过渡）
+- 缩进根据 `h2/h3/h4` 级别
+- 激活项 `bg-blue-50 text-blue-600`
+- 滚动时联动 IntersectionObserver 高亮
+
+**密码保护**：
+- 中央卡片 `max-w-md mx-auto mt-10`，`bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4`
+- 标签：`block text-gray-700 text-sm font-bold mb-2`
+- 输入：`shadow appearance-none border rounded w-full py-2 px-3 text-gray-700`
+- 按钮：`bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded`
+
+**回到顶部**：
+- 滚动 `> 300px` 后右下角显示圆形按钮
+- `fixed bottom-8 right-8 bg-white hover:bg-gray-100 text-black rounded-full p-3 shadow-lg transition-all duration-300 z-50`
+- 平滑滚动 `behavior: 'smooth'`
+- 暗色 `bg-gray-800 text-white`
+
+### 4.7 CommentSection 评论区
+
+**结构**：
+```
+┌─────────────────────────────────────┐
+│ 评论 │
+├─────────────────────────────────────┤
+│ [textarea 4 行：写下你的评论...] │
+│ [清空] [发表] │
+│ Enter发送，Shift+Enter换行 │
+├─────────────────────────────────────┤
+│ 评论项： │
+│ [头像 w-10] 用户名 • 时间 │
+│ 内容 (whitespace-pre-wrap) │
+│ 👍 12 回复 删除 │
+│ │
+│ └─ [头像 w-8] 用户名 │
+│ 回复 @父级 • 时间 │
+│ 内容 │
+│ 👍 12 回复 删除 │
+└─────────────────────────────────────┘
+```
+
+- 容器：`mt-10 bg-white rounded-lg shadow p-6`
+- 输入框：`border border-gray-300 rounded-lg px-4 py-3 focus:ring-2 focus:ring-blue-500`
+- 操作按钮组：`absolute bottom-3 right-3 flex space-x-2`
+- 评论项：`border-b border-gray-200 py-4`
+- 头像：顶级 `w-10 h-10`，嵌套 `w-8 h-8`，`rounded-full object-cover`
+- 嵌套缩进：`ml-8 mt-3`
+- 点赞按钮：激活 `text-red-500`，未激活 `text-gray-500 hover:text-red-500`
+- 文本溢出：`break-words whitespace-pre-wrap overflow-hidden`
+- 时间显示函数：`formatTime`：
+ - `< 60s` → 刚刚
+ - `< 3600s` → X 分钟前
+ - `< 86400s` → X 小时前
+ - 否则 → X 天前
+- 键盘：`Enter` 发送，`Shift+Enter` 换行。
+
+### 4.8 Search 搜索
+
+**触发**：Header 右侧放大镜按钮。
+
+**弹出层（桌面）**：
+- `absolute right-0 mt-2 w-96 max-w-[calc(100vw-2rem)]`
+- 容器：`bg-white/90 backdrop-blur-md shadow-xl rounded-xl z-50 border border-gray-200`
+
+**弹出层（移动）**：
+- `fixed right-4 left-4 top-20 w-auto max-w-none`
+- `max-h-[60vh]`
+
+**输入框**：
+- `px-5 py-3 pl-12 rounded-xl border bg-white/80 focus:ring-2 focus:ring-blue-500`
+- 左侧搜索图标内嵌（`absolute left-4 top-1/2 -translate-y-1/2 h-5 w-5 text-gray-400`）
+- 自动聚焦：弹层打开后 100ms。
+
+**结果列表**：
+- 项：`block p-3 rounded-xl hover:bg-blue-50 border border-transparent hover:border-blue-100`
+- 标题 `line-clamp-1`，摘要 `line-clamp-2 text-xs`
+- 滚动容器：`mt-3 max-h-96 overflow-y-auto space-y-1`
+
+**加载**：
+- `animate-spin rounded-full h-5 w-5 border-t-2 border-b-2 border-blue-500` + 「搜索中...」文字
+
+**空结果**：居中 + 表情图标 + 「未找到相关文章」
+
+**遮罩**：`fixed inset-0 bg-black/20 z-40 backdrop-blur-sm`
+
+**防抖**：`debounce 300ms` 触发接口
+
+### 4.9 ThemeToggle 主题切换
+
+**按钮**：
+- `p-2 rounded-lg text-gray-600 hover:text-gray-900 hover:bg-gray-100 transition-all duration-200`
+- 太阳/月亮 SVG，`h-6 w-6`，`strokeWidth={2}`
+- 持久化：localStorage `theme = 'dark' | 'light'`
+
+**涟漪动画（View Transitions API）**：
+
+1. 计算按钮中心 `(x, y)`，计算到屏幕最远角的最大半径 `maxRadius`。
+2. 注入 CSS 自定义属性：
+ ```js
+ document.documentElement.style.setProperty('--ripple-x', `${x}px`);
+ document.documentElement.style.setProperty('--ripple-y', `${y}px`);
+ document.documentElement.style.setProperty('--ripple-r', `${maxRadius}px`);
+ ```
+3. 调用 `document.startViewTransition(applyTheme)`：
+ ```css
+ ::view-transition-old(root),
+ ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
+ ::view-transition-new(root) {
+ clip-path: circle(0px at var(--ripple-x) var(--ripple-y));
+ animation: theme-ripple 0.5s ease-out forwards;
+ }
+ @keyframes theme-ripple {
+ to { clip-path: circle(var(--ripple-r) at var(--ripple-x) var(--ripple-y)); }
+ }
+ ```
+4. **降级**：无 `startViewTransition` 时直接切换 `.dark`。
+
+### 4.10 Login / Register / ForgotPassword 表单
+
+**结构**：
+```
+[圆形图标 h-12 w-12 bg-blue-400] (Login)
+[大标题 text-3xl font-extrabold]
+[副标题]
+[错误条]
+[输入框块 × N]
+[验证码：输入 + 图片 h-10 w-24]
+[主按钮 w-full]
+[副链接：注册 • 忘记密码？]
+```
+
+**容器**：
+- 居中布局：`flex items-center justify-center py-12 px-4`，`paddingTop: 64` 避让 Header
+- 卡片：`max-w-md w-full space-y-8`，内含图标 + 表单卡 `bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10`
+
+**图标头**：
+- `mx-auto h-12 w-12 rounded-full bg-blue-400 flex items-center justify-center`
+- 内嵌 SVG `h-6 w-6 text-white`
+
+**标题**：`mt-6 text-center text-3xl font-extrabold text-gray-900`
+
+**错误条**：
+- `mb-4 bg-red-50 text-red-700 p-3 rounded-md text-sm`
+- **5 秒后自动消失**（setTimeout clearError）
+- 暗色 `bg-red-900/12 text-red-300`
+
+**输入框**：
+- `appearance-none block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm`
+- `placeholder-gray-400 focus:outline-none focus:ring-blue-500 focus:border-blue-500`
+- 暗色 `bg-gray-700 border-gray-600 text-white placeholder-gray-500`
+
+**验证码块**：
+- `flex space-x-2`，左侧输入 `flex-1`，右侧图片 `h-10 w-24 border rounded cursor-pointer`
+- 点击图片触发 `fetchCaptcha()`
+
+**主按钮**：
+- `w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:ring-2 focus:ring-blue-500 disabled:opacity-50`
+- 加载中按钮内嵌旋转 SVG：
+ ```jsx
+
+ ```
+
+**副链接**：
+- `mt-2 text-center text-sm text-gray-600`
+- 「注册」+「忘记密码?」：`font-medium text-blue-600 hover:text-blue-500 ml-1`
+
+### 4.11 FriendLinks 友情链接
+
+- 页面布局同后台表单，最大宽度居中卡片。
+- 分类（友人/站点）+ 描述 + 头像 + 链接。
+- 卡片网格 + hover 阴影 + 跳转外部。
+
+### 4.12 Footer
+
+**结构**：
+```jsx
+
+```
+
+**规范**：
+- `bg-white`，顶部留出 `mt-auto`。
+- 版权信息居中 `text-gray-600`。
+- ICP 备案链接：`text-gray-600 hover:text-blue-600 text-sm`，指向 `https://beian.miit.gov.cn`。
+- 公安备案链接：指向 `http://www.beian.gov.cn`。
+- 自定义 footer HTML 通过 `ScriptAwareHtml` 安全渲染（DOMPurify）。
+
+### 4.13 PageNotFound
+
+- 居中布局 + 大号 404 + 「返回首页」按钮。
+- 按钮 `bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-md`。
+
+---
+
+## 5. 后台 Dashboard 模块
+
+### 5.1 Dashboard 总体布局
+
+**容器**：
+```jsx
+-
+ ...
+
+
+```
+
+**Suspense + FadeIn 过渡**：
+- 每个视图都 `lazy(() => import(...))` 加载。
+- 包裹 `
+
+
+
+ {activeTab === 'dashboard' &&
+
+
+```
+
+**尺寸变化**：
+- 展开：`w-64`（256px）
+- 收起：`w-16`（64px，仅图标）
+- 移动端：从 `-translate-x-full` → `translate-x-0`
+
+**折叠按钮（hover 才显示）**：
+```jsx
+