feat: add pages

docs/design/portal/GLOBAL.md

@@ -55,7 +55,7 @@
 | **Left** | **Logo** | 图片/SVG + 文字，点击回首页 (`/`)。高度控制在 32-40px。 |
 | **Center-Left** | **Nav Links** | 首页、分类、标签等。间距 `space-x-8`。<br>Default: `text-slate-600 font-medium`<br>Hover: `text-primary-600`<br>Active: `text-primary-600` |
 | **Center-Right** | **Global Search** | 圆角矩形输入框 `rounded-full` 或 `rounded-lg`。<br>`bg-slate-100 focus:bg-white focus:ring`。<br>宽度：默认 `w-64`，聚焦时可伸展。 |
-| **Right** | **User Actions** | **未登录**: <br>- [登录]: Ghost Button (`text-slate-600 hover:bg-slate-50`)<br>- [注册]: Primary Button (`bg-primary-600 text-white`)<br>**已登录**: <br>- [通知]: Bell Icon + Badge<br>- [头像]: Avatar + Dropdown Menu |
+| **Right** | **User Actions** | **未登录**: <br>- [登录]: Ghost Button (`text-slate-600 hover:bg-slate-50`)<br>- [注册]: Primary Button (`bg-primary-600 text-white`)<br>**已登录**: <br>- [通知]: **Bell Icon** (h-10 w-10 flex items-center justify-center rounded-full hover:bg-slate-100 relative)。<br>  - **Badge**: 右上角红色圆点或数字，表示未读。<br>  - **交互**: 点击直接跳转至 `/me/notifications`。<br>- [头像]: Avatar + Dropdown Menu |
 
 ---
 
@@ -86,11 +86,53 @@
 - **内边距**: `p-4` 或 `p-6`
 
 ### 4.2 按钮 (Buttons)
-- **Primary**: `bg-primary-600 text-white hover:bg-primary-700 rounded-lg px-4 py-2`
-- **Secondary/Outline**: `border border-slate-300 text-slate-700 hover:bg-slate-50 rounded-lg px-4 py-2`
-- **Ghost**: `text-slate-600 hover:bg-slate-100 rounded-lg px-4 py-2`
+*针对中老年用户优化：增大点击区域与文字标签*
+- **Primary**: `bg-primary-600 text-white hover:bg-primary-700 rounded-lg px-6 py-3 text-lg h-12 flex items-center justify-center`
+- **Secondary/Outline**: `border-2 border-slate-300 text-slate-800 hover:bg-slate-50 rounded-lg px-6 py-3 text-lg h-12 flex items-center justify-center`
+- **Ghost**: `text-slate-700 hover:bg-slate-100 rounded-lg px-4 py-3 text-lg h-12 flex items-center justify-center`
+- **说明**: 按钮高度至少 `48px` (`h-12`)，边框适当加粗以便识别。
 
-### 4.3 标题 (Typography)
-- **H1 (页面主标题)**: `text-2xl sm:text-3xl font-bold text-slate-900`
-- **H2 (区块标题)**: `text-xl font-semibold text-slate-900 mb-4`
-- **Section Header**: 标题 + 操作区 (如“查看更多”) 的组合。
+### 4.3 标题与文字 (Typography)
+*针对中老年用户优化：提升基准字号与行高*
+- **Root Font Size**: PC 端默认 `16px`，允许用户浏览器缩放。
+- **Body Text**: `text-base` (16px) 或 `text-lg` (18px)，行高 `leading-relaxed` (1.625)。
+- **H1 (页面主标题)**: `text-3xl sm:text-4xl font-bold text-slate-900 mb-6`
+- **H2 (区块标题)**: `text-2xl font-bold text-slate-900 mb-5`
+- **H3 (小标题)**: `text-xl font-semibold text-slate-900 mb-3`
+- **辅助文字**: 避免使用小于 `14px` 的文字。辅助色最低为 `text-slate-600` (保证 4.5:1 对比度)。
+
+### 4.4 输入框 (Inputs)
+- **尺寸**: 高度 `h-12` (48px) 或 `h-14` (56px)。
+- **样式**: `text-lg px-4 border-slate-300 focus:border-primary-600 focus:ring-2`。
+- **Label**: 必须显示 Label，字号 `text-base` 或 `text-lg`，不建议仅用 placeholder。
+
+---
+
+## 5. 响应式与可访问性 (Responsive & Accessibility)
+
+确保站点在移动端具备良好体验，并符合 WCAG 可访问性标准，**特别关注中老年用户体验**。
+
+### 5.1 TopNavbar 响应式策略 (Mobile Adaptation)
+当视口宽度小于 `md` (768px) 时，导航栏需进行自适应折叠。
+
+- **导航链接**: 收纳至左侧或右侧的 **汉堡菜单 (Hamburger Menu)**。
+  - 菜单图标需显著，加文字标签 "菜单" 辅助识别。
+  - 抽屉内菜单项字号 `text-lg`，行高宽松。
+- **全局搜索**:
+  - **默认状态**: 仅展示搜索图标 (Magnifying Glass)。
+  - **交互状态**: 点击图标后，展开全宽搜索栏覆盖 Logo 或 弹出模态搜索框。
+- **用户区**:
+  - 若空间允许，保留头像/登录按钮；若空间不足，并入汉堡菜单底部。
+
+### 5.2 键盘导航与焦点 (Keyboard & Focus)
+- **Focus Visible**: 所有交互元素（链接、按钮、输入框）在键盘聚焦时必须有清晰的可见轮廓。
+  - 推荐样式: `focus-visible:ring-4 focus-visible:ring-primary-400 focus-visible:outline-none` (加宽 Ring 宽度)。
+- **Skip Link**: 页面首个可聚焦元素应为 "跳转至主要内容 (Skip to main content)"。
+
+### 5.3 触控目标 (Touch Targets)
+- **最小点击面积**: 移动端交互元素的可点击区域必须 $\ge 48 \times 48$ px (Tailwind `min-h-[48px] min-w-[48px]`)。
+  - 按钮间距 `gap-4` 以上，防止误触。
+
+### 5.4 ARIA 与语义化 (Semantics)
+- **表单标签**: 所有 `<input>` 必须有对应的可视 `<label>`。
+- **高对比度**: 文本与背景对比度至少 **4.5:1** (WCAG AA)，关键信息追求 **7:1** (WCAG AAA)。避免使用浅灰文字。

docs/design/portal/PAGE_CONTENT_DETAIL.md

@@ -1,66 +1,142 @@
 # 页面设计: 内容详情页 (Content Detail)
 
 > **路由**: `/contents/:contentId`
-> **布局**: `LayoutMain`
-> **结构**: 经典阅读布局 (左文右侧栏)
+> **布局**: `LayoutMain` (Header + Footer)
+> **结构**: 固定宽度经典阅读布局 (左文右侧栏)
 
 ## 1. 页面结构 (Structure)
 
-```text
-[ Breadcrumb ]
-----------------------------------------------------------
-|                    |                                   |
-|   Article Body     |          Sidebar (Sticky)         |
-|      (70%)         |    (Author / TOC / Related)       |
-|                    |            (30%)                  |
-|   Comments Area    |                                   |
-|                    |                                   |
-```
+内容区域固定最大宽度为 `max-w-screen-xl` (`1280px`)，水平居中。
+
+- **分栏比例**: 主内容区 (Main) 占 **9份** (`col-span-9`)，侧边栏 (Sidebar) 占 **3份** (`col-span-3`)。
+- **间距**: 左右分栏间距 `gap-8` (32px)。
+- **Sticky 策略**: 侧边栏采用 `sticky` 定位，顶部偏移 `top-24` (Header 64px + 间距 32px)，确保滚动时不被遮挡。
+
+---
 
 ## 2. 详细设计 (Detailed Specs)
 
-### 2.1 顶部导航 (Breadcrumb)
-- **位置**: 容器顶部，Main 内容之前。
-- **内容**: `首页 > 分类 > 正文标题`。
-- **样式**: `text-sm text-slate-500 py-4`。
+### 2.1 顶部面包屑 (Breadcrumb)
+- **位置**: 内容容器上方 `py-4`。
+- **路径**: `首页 > [一级分类] > [二级标签] > 正文`。
+- **交互**: 点击分类可跳转至首页筛选状态。最后一级（正文标题）为灰字不可点。
 
-### 2.2 左侧正文区 (Article Body - Left Column)
-- **容器**: `bg-white rounded-lg shadow-sm p-6 sm:p-10 mb-6`。
-- **头部 (Header)**:
-  - **标题**: H1, `text-3xl font-bold text-slate-900 mb-4`。
-  - **元数据**: 作者头像、名称、发布时间、阅读数、Tag 标签。
-    - 样式: `flex items-center text-sm text-slate-500 space-x-4`。
-- **正文 (Content)**:
-  - 富文本渲染区域。
-  - 排版规范: `prose prose-slate max-w-none` (使用 Tailwind Typography 插件)。
-  - 图片: `rounded-lg my-4 max-w-full`。
-- **底部互动 (Footer Actions)**:
-  - **点赞/收藏/分享**: 居中或居左的图标按钮组。
-  - **上一篇/下一篇**: 简单的文字链接导航。
+### 2.2 左侧正文区 (Article Body)
+**容器**: `bg-white rounded-lg shadow-sm p-8 min-h-[600px]`。
 
-### 2.3 评论区 (Comments Section)
-- **位置**: 正文容器下方，独立卡片或同一容器底部。
-- **结构**:
-  - 输入框: 文本域 + 表情/图片按钮 + "发布"按钮。
-  - 列表: 头像 + 名称 + 内容 + 时间 + 回复按钮。
-  - 嵌套: 二级回复缩进显示。
+#### A. 头部信息 (Header)
+- **标题 (H1)**: 
+  - 结构: `[曲种] 剧目名·选段名` (如: [京剧] 锁麟囊·春秋亭)。
+  - 样式: `text-3xl sm:text-4xl font-bold text-slate-900 leading-tight mb-4`。
+- **戏曲属性 (Opera Meta)**: 
+  - 显示在标题下方，徽章样式。
+  - 内容: `[行当: 青衣]` `[主定调: E大调]` `[板式: 西皮流水]`。
+- **元数据行**:
+  - **左侧**: 作者头像 (32px) + 名称 + "发布于 2025-12-25"。
+  - **右侧工具栏**: 字号调节 / 收藏 / 分享。
 
-### 2.4 右侧侧边栏 (Sidebar - Right Column)
-- **特性**: `sticky top-20` (随页面滚动固定)。
-- **模块**:
-  1.  **作者/租户卡片 (Author Profile)**:
-      - 大头像、名称、简介。
-      - 数据: 文章数、粉丝数。
-      - 动作: [关注] [私信] 大按钮。
-  2.  **目录 (Table of Contents)**:
-      - 自动生成 H2/H3 锚点链接。
-      - 当前阅读章节高亮 (ScrollSpy)。
-      - 样式: 左侧竖线指示条。
-  3.  **相关推荐 (Related Contents)**:
-      - 缩略图 + 标题列表。
+#### B. 正文内容 (Content)
+- **排版规范**:
+  - **默认字号**: `text-lg` (18px)，行高 `1.8` (Relaxed)。
+  - **戏曲剧本模式 (Script Mode)**:
+    - 样式: `[角色]:` 加粗并左侧悬挂，台词缩进对齐。
+    - 示例: 
+      > **薛湘灵**: (白) 
+      > 　　　听薛良一语，一似那金钟猛撞。
+- **唱段属性块 (Aria Block)**:
+  - 样式: 嵌入正文的播放条卡片。
+  - 内容: [播放按钮] + 唱段名 + `Key: E` | `Beat: 原板`。
+  - 交互: 点击播放时，高亮当前块。
+- **图片交互**: 支持 Lightbox。
 
-## 3. 移动端适配 (Mobile)
-- **侧边栏**: 隐藏。
-- **作者信息**: 移动到文章头部或底部展示。
-- **目录**: 变为浮动按钮 (FAB) 或 放在文章头部折叠面板中。
-- **底部栏**: 固定底部操作栏 (评论输入框、点赞、收藏、分享)，类似于原生 App 体验。
+#### C. 付费墙与拦截 (Paywall)
+- **逻辑**:
+  - **免费/已购**: 展示完整内容。
+  - **限时免费**: 标题下方显示橙色倒计时条 "限时免费中，剩余 12:00:00"。
+  - **付费未购**:
+    - **遮罩**: 正文展示前 300 字，下方叠加 `bg-gradient-to-t from-white via-white/90 to-transparent h-64`。
+    - **购买卡片**: 位于遮罩中心，阻断阅读。
+      - **价格**: `¥ 99.00` (大号红字) + `¥ 199.00` (划线原价)。
+      - **按钮**: [立即解锁全文] (Primary, h-14, text-xl)。
+      - **提示**: "登录后购买，永久有效"。
+
+#### D. 底部区域 (Article Footer)
+- **版权/免责声明**: 灰色背景块，声明内容来源或免责信息。
+- **标签云**: 展示关联 Tags，点击跳转搜索。
+- **上下篇导航**: 
+  - 上一篇: [标题...]
+  - 下一篇: [标题...] (若无则不显示)
+
+### 2.3 评论区 (Comments)
+**位置**: 正文容器下方，独立卡片 `mt-6 p-8`。
+
+- **排序与统计**: 
+  - 顶部显示 "全部评论 (124)"。
+  - 右侧排序切换: [最新] (默认) | [热门]。
+- **输入交互**: 
+  - 文本域: 最小高度 `h-24`，大字号输入。
+  - **发布按钮**: 点击后进入 `loading` 状态。
+  - **异常反馈**:
+    - **敏感词**: 接口返回后，输入框下方显示红字 "评论包含敏感词汇，请修改后发布"，输入内容保留。
+    - **重复提交**: 30秒内禁止发布相同内容，提示 "请勿频繁发表重复评论"。
+    - **网络失败**: Toast 提示 "发布失败，请检查网络"，内容保留在输入框。
+- **列表结构 (两级嵌套)**:
+  - **主评论 (Level 1)**: 头像 (40px) + 名称 + 正文 + [时间 / 点赞 / 回复]。
+  - **回复列表 (Level 2)**: 在主评论下方灰色区域显示。
+    - 结构: `A 回复 B: [内容]`。
+    - 交互: 点击 [回复] 自动在输入框前置 `@用户名称`。
+    - **适老化**: 不支持三级以上嵌套，所有回复统一平铺在主评论下方，避免视觉混乱。
+  - **状态**: 
+    - 正常: 显示内容。
+    - **审核中**: 显示 "该评论正在审核中" (灰色斜体)。
+    - **已删除**: 显示 "评论已折叠/删除"。
+
+### 2.4 右侧侧边栏 (Sidebar)
+**特性**: `h-fit sticky top-24`。
+
+1.  **作者/租户名片 (Author Profile)**:
+    - 包含: 大头像 (64px)、名称 (H3)、简介、[+ 关注] 按钮、[私信] 按钮。
+    - 统计: "102 篇内容" | "1.5w 获赞"。
+2.  **目录 (TOC)**:
+    - **适老化**: 仅展示 H2 一级目录，避免层级过深。
+    - **高亮**: 滚动监听，当前章节左侧加粗色条。
+3.  **相关推荐**:
+    - 图文列表 (左文右图小图模式)，推荐 5 篇相似内容。
+
+### 2.5 媒体渲染器 (Media Renderers)
+根据内容的主体类型，Main 区域将采用不同的渲染组件：
+
+#### A. 视频组件 (Video Player)
+- **播放记忆**: 自动记录播放进度。再次打开时 Toast 提示 "已恢复至上次观看处 05:20"。
+- **异常处理**:
+  - **加载失败**: 容器显示黑色背景 + 居中提示 "内容解析失败" + [点击重试] 按钮。
+  - **版权限制**: 显示 "应版权方要求，此内容暂不支持在您所在的地区播放"。
+- **控制**: 进度条加宽至 `8px` (Hover 后 `12px`)，始终可见大尺寸 [播放/暂停] 按钮。
+- **交互规范**: 增加 [后退10秒] / [快进10秒] 按钮，支持全屏模式。
+- **试看模式 (Trial Mode)**:
+  - **进度条**: 试看部分显示为**高亮色**，锁定部分显示为**灰色带锁图标**。
+  - **交互限制**: 拖拽进度条超过试看点时，自动回弹并提示 "后续内容需购买"。
+  - **中断体验**: 播放至试看结束点，视频暂停，画面覆盖半透明 **购买引导遮罩 (Paywall)**，显示 [¥9.9 解锁全片]。
+
+#### B. 音频组件 (Audio Player)
+- **播放记忆**: 同视频。
+- **试听模式**: 同视频。进度条明确标记 "试听结束点"，播放结束后停止并弹出购买卡片。
+- **视觉/控制**: 封面图居中，下方大进度条与大控制钮。
+- **控制面板**: 背景浅灰色块，大尺寸 [播放/暂停] 按钮居中，支持倍速播放 (0.75x, 1.0x, 1.25x, 1.5x)。
+
+#### C. 图片集 (Gallery)
+- **单图模式**: 默认大图展示。
+- **多图模式**: 默认采用 **“流式竖排”** (类似长微博)，避免中老年用户找不到切换箭头的困扰。
+- **加载失败**: 占位图显示 "图片加载失败" 图标 + [点击刷新]。
+- **交互**: 强制支持 Lightbox 点击放大。
+
+#### D. 混合型 (Mixed Content)
+- **规则**: 将上述组件作为“块 (Block)”在正文中穿插。
+- **间距**: 媒体块与文本块之间统一保持 `my-8` (32px) 的垂直间距，确保视觉节奏清晰。
+
+---
+
+## 3. 状态与异常
+- **内容审核中**: 只有作者自己可见，顶部黄色 Banner "内容审核中，仅自己可见"。
+- **内容被下架/删除**: 替换为 404 状态页，提示 "内容已被删除"。
+- **无权限**: 若是私密内容，提示 403 "您无权访问此内容"。

docs/design/portal/PAGE_HOME.md

@@ -2,59 +2,91 @@
 
 > **路由**: `/`
 > **布局**: `LayoutMain` (Header + Footer)
-> **结构**: 混合布局 (Banner + 左右分栏)
+> **结构**: 固定宽度混合布局 (Hero + 左右分栏)
 
 ## 1. 页面结构 (Structure)
 
-首页采用 **"Hero + 左右分栏"** 的经典内容型布局，强调信息密度与浏览效率。
+首页内容区域固定最大宽度为 `max-w-screen-xl` (`1280px`)，水平居中。
 
-```text
-[      Hero Banner / Carousel (Full Width or Boxed)      ]
-----------------------------------------------------------
-[ Filter/Tags Bar ]
-----------------------------------------------------------
-|                    |                                   |
-|   Main Feed (70%)  |          Sidebar (30%)            |
-|   (Content List)   |      (Trending / Recommends)      |
-|                    |                                   |
-```
+- **垂直间距 (Vertical Spacing)**: 各大区块间距统一为 `py-6` (24px)。
+- **分栏间距 (Column Gap)**: 左右分栏间距为 `gap-8` (32px)。
+- **响应式分栏策略 (Breakpoints)**:
+  - **lg (1024px ~ 1279px)**: 主内容 8 份 (`col-span-8`)，侧边栏 4 份 (`col-span-4`)。
+  - **xl (1280px+)**: 主内容 9 份 (`col-span-9`)，侧边栏 3 份 (`col-span-3`)。*侧边栏视觉宽度维持在约 300-320px。*
+
+---
 
 ## 2. 详细设计 (Detailed Specs)
 
-### 2.1 Hero 区域 (Hero Section)
-位于导航栏下方，用于展示平台级置顶、活动或推荐。
-- **容器**: `w-full bg-white border-b border-slate-100 mb-6` (可选)
-- **内容**:
-  - **轮播图/大卡片**: 高度约 `300px - 400px`。
-  - **样式**: 圆角矩形，阴影，图文叠加或左右结构。
+### 2.1 Hero 区域 (Hero Section / Carousel)
+- **容器**: 跟随 1280px 宽度 (Boxed)，高度固定为 `h-[400px]`。
+- **交互规范**:
+  - **自动轮播**: 间隔 `5000ms`。
+  - **暂停逻辑**: 鼠标悬停 (Hover) 或 键盘聚焦 (Focus) 时停止轮播。
+  - **指示器**: 底部居中显示小圆点 (`bottom-4`)。
+  - **翻页箭头**: **始终显示**（不随 Hover 隐藏），使用半透明圆底背景以增强视觉提示。
+  - **视觉处理**: 图片底部 30% 区域叠加 `bg-gradient-to-t from-black/70 to-transparent` 暗罩，确保白色文字标题清晰。
+- **降级策略**: 若后台未配置 Banner，此区块 `hidden`，不显示占位图，下方内容自动上移。
 
 ### 2.2 筛选栏 (Filter Bar)
-- **位置**: 内容流上方。
-- **元素**:
-  - **Tabs**: "推荐", "最新", "热门"。
-  - **Tag List**: 常用分类标签（如：技术、生活、设计...），支持横向滚动。
-- **样式**: `flex items-center space-x-4 py-4 border-b border-slate-200 mb-4`。
+- **吸顶策略**: **不吸顶 (Non-sticky)**，随页面滚动。
+- **组成与逻辑**:
+  - **第一行 (维度 Tabs)**: 推荐、最新、热门。默认为“推荐”。
+  - **第二行 (分类 Tags)**: 单选 Pill 样式。必须包含一个“全部”选项用于重置。
+- **URL 与分享**: 
+  - 所有筛选状态（tab, tag）必须实时同步至 URL Query (例如: `/?tab=hot&tag=101`)。
+  - 支持浏览器前进/后退操作及地址复制分享。
 
-### 2.3 左侧内容流 (Main Feed - Left Column)
-- **宽度**: `col-span-12 lg:col-span-8 xl:col-span-9` (响应式调整)
-- **列表样式**:
-  - **卡片列表 (List View)**: 左图右文 或 上文下图。适合资讯、博客。
-    - *Image*: 缩略图 `w-48 h-32 object-cover rounded`。
-    - *Info*: 标题 (H3), 摘要 (Line-clamp-2), Meta (作者/时间/热度)。
-  - **网格列表 (Grid View)**: 适合商品、图片为主的内容。
-    - `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6`。
-- **加载状态**: 底部 "加载更多" 按钮 或 无限滚动 (Infinite Scroll)。
+### 2.3 列表展示规范 (List Data Specs)
+- **卡片展示模版 (Card Variants)**:
+  根据内容包含的图片数量，自动匹配以下模版：
+  1.  **无图模式 (Text Only)**:
+      - 适用: 纯文本内容。
+      - 布局: 标题 + 摘要 (**最多 5-8 行**) + 底部 Meta。
+      - 样式: 纯文字排版，左对齐。由于无视觉干扰，适合深度阅读引导。
+  2.  **单图模式 (Single Image)** - *默认*:
+      - 适用: 1 张 或 2 张图片 (双图降级显示)。注：首页仅展示图片，不进行视频自动播放。
+      - 布局: **左文右图**。左侧标题/摘要，右侧固定尺寸图片 (`w-[240px] h-[135px]`)。
+      - 视频识别: 封面图中心显示半透明播放图标。
+  3.  **三图模式 (Three Images)**:
+      - 适用: 3 张及以上图片。
+      - 布局: 标题 (H3) -> 3 张图片横排 (`grid grid-cols-3 gap-2`) -> 底部 Meta。
+- **卡片必须字段**:
+  - **封面图**: 比例固定 **16:9** (建议尺寸: 240px * 135px)，`object-cover`。
+  - **标题组合**: 
+    - **曲种标签**: 标题前展示 `[京剧]` 等曲种 Tag (灰色微小字或主色边框)。
+    - **正题**: 显示 `剧目名·选段名` (如《锁麟囊》春秋亭)。
+    - **样式**: `text-lg` (18px) 加粗，最大 **2 行**。
+  - **摘要**: 字号 `text-base` (16px)，`text-slate-500`。最大 **2 行**。
+  - **元数据**: 
+    - 左侧: 头像 + 名称。
+    - 右侧: **行当** (如 "青衣") | 阅读数。
+  - **时间**: 智能格式化。
+- **价格展示规则**:
+  - **免费内容**: 不展示任何价格标签。
+  - **付费内容**:
+    - 显示价格: `¥ 99.00` (数字加粗，红色 `text-red-600`)。
+    - 若有划线价，显示在价格旁: `¥ 129.00` (灰色 `line-through text-sm`)。
+  - **限时免费**:
+    - 显示标签: `限时免费` (绿色 badge)。
+    - 显示原价: `¥ 99.00` (划线)。
+- **角标规则 (Badges)**:
+  - `置顶`: 封面左上角红色。
+  - `限免`: 封面右上角绿色。
+  - `付费`: 封面右上角金色。
+  - `新 (New)`: 24小时内发布的内容，标题旁加红点或小图标。
+- **点击区域**: **整卡可点击**。Hover 时背景 `bg-slate-50` 或阴影 `shadow-md`。
 
-### 2.4 右侧侧边栏 (Sidebar - Right Column)
-- **宽度**: `hidden lg:block lg:col-span-4 xl:col-span-3` (移动端隐藏)
-- **组件模块**:
-  1.  **公告栏 (Announcements)**: 平台公告，纯文本或带图标。
-  2.  **热门榜单 (Trending)**: Top 5-10 内容列表，带数字排行 (1, 2, 3...)。
-  3.  **推荐租户/作者 (Recommended Creators)**: 头像 + 名称 + 关注按钮列表。
-  4.  **广告位 (Ads/Promos)**: 图片 Banner。
-- **样式**: 每个模块为一个 `bg-white rounded-lg p-4 shadow-sm mb-6` 卡片。
+### 2.4 侧边栏 (Sidebar)
+- **模块顺序**: 公告 > 推荐租户 > 热门榜单 > 广告。
+- **收缩规则**: 数据为空则模块隐藏，布局始终保持 7:3 结构。
 
-## 3. 交互与状态 (Interactions)
-- **Hover**: 列表卡片 Hover 时出现轻微上浮或阴影加深。
-- **点击**: 点击卡片任意区域跳转至 `内容详情页`。
-- **关注**: 在推荐租户模块直接点击 "关注"，需判断登录状态。
+### 2.5 分页与加载策略
+- **策略**: **“点击加载更多”按钮**。
+- **数量**: 首屏 10 条，后续每页 10 条。
+- **加载态**: 按钮变 Loading 状态，内容区显示骨架屏 (Skeleton)。
+
+### 2.6 状态页设计
+- **空状态**: "该分类下暂无内容"，配插画 + [返回推荐] 按钮。
+- **错误态**: 提供 [点击刷新] 按钮。
+- **局部降级**: 侧边栏加载失败不影响主 Feed。

docs/design/portal/PAGE_MISC.md

@@ -1,38 +1,29 @@
-# 页面设计: 帮助与错误页 (Misc)
+# 页面设计: 系统与条款页 (Misc)
 
 > **路由**:
-> - 帮助中心: `/help`
 > - 条款: `/terms`, `/privacy`
 > - 错误: `/404`, `/500`
 >
-> **布局**: `LayoutMain` (帮助/条款) / `LayoutSimple` (错误页)
+> **布局**: `LayoutMain` (条款) / `LayoutSimple` (错误页)
 
-## 1. 帮助中心 (Help Center)
-
-### 1.1 首页 (/help)
-- **搜索大图 (Hero)**: 背景图 + 大搜索框 "遇到什么问题？"。
-- **常见问题 (FAQ)**: Grid 布局，每项为 "Q: 问题... A: 简答..."。
-- **分类导航**: 卡片入口 (如 "账号问题", "支付问题", "内容发布")。
-- **联系客服**: 底部 Banner，展示客服电话或在线咨询按钮。
-
-### 1.2 帮助详情页
-- 左侧分类导航树。
-- 右侧富文本文章。
-- 底部反馈: "此文是否有帮助？ [是] [否]"。
-
-## 2. 条款页面 (Legal)
+## 1. 条款页面 (Legal)
 - **布局**: 居中单栏，适合阅读长文。
-- **样式**: `prose prose-slate mx-auto max-w-3xl py-10`。
-- **导航**: 简单的 Tab 或 侧边 Anchor 导航 (条款、隐私、免责)。
+- **样式**: `prose prose-slate prose-lg mx-auto max-w-3xl py-10` (针对中老年用户适配大字号)。
+- **导航**: 简单的 Tab 切换 (服务条款、隐私政策、版权声明)。
+- **可访问性**: 支持浏览器打印功能，文字对比度遵循 WCAG AAA 标准。
 
-## 3. 错误页面 (Error Pages)
+## 2. 错误页面 (Error Pages)
 
-### 3.1 404 Not Found
-- **视觉**: 插画 (如迷路的人、空的盒子)。
-- **文案**: "页面走丢了 (Page Not Found)"。
-- **操作**: [返回首页] [返回上一页]。
+### 2.1 404 Not Found
+- **视觉**: 简洁的适老化插画 (如：迷路的老爷爷或指南针)。
+- **文案**: "找不到这个页面了" (不使用晦涩的 404 技术术语)。
+- **操作**: 
+  - 大尺寸 [返回首页] 按钮。
+  - [联系客服] 文本链接。
 
-### 3.2 500 Server Error
-- **视觉**: 插画 (如正在维修的机器人)。
-- **文案**: "服务器开小差了，请稍后再试"。
-- **操作**: [刷新页面] [联系客服]。
+### 2.2 500 Server Error
+- **视觉**: 正在维修的视觉提示。
+- **文案**: "服务器出了点小问题，请稍后再试"。
+- **操作**: 
+  - [刷新试试] 按钮。
+  - [返回首页] 按钮。

docs/design/portal/PAGE_ORDER.md

@@ -2,38 +2,93 @@
 
 > **路由**:
 > - 确认订单: `/checkout`
-> - 支付: `/payment`
-> - 详情: `/me/orders/:id`
+> - 支付收银台: `/payment/:id`
+> - 支付结果: `/payment/result`
+> - 订单详情: `/me/orders/:id`
+>
+> **布局**: `LayoutSimple` (去除复杂导航干扰，专注交易)
 
 ## 1. 确认订单页 (Checkout)
-- **步骤条**: 1.确认订单 -> 2.支付 -> 3.完成。
-- **收货地址 (如需)**:
-  - 卡片网格展示已有地址。
-  - [+ 新增地址] 虚线框按钮。
-- **商品清单**:
-  - 列表: 图片 | 标题 | 单价 | 数量 | 小计。
-- **优惠/备注**:
-  - 优惠券选择器。
-  - 买家留言输入框。
-- **底部结算栏 (Sticky Bottom)**:
-  - 只有 "合计金额"。
-  - [提交订单] 大按钮。
 
-## 2. 收银台/支付页 (Cashier)
-- **倒计时**: "请在 15:00 内完成支付，超时将取消"。
-- **订单金额**: 大字体显示。
-- **支付方式**:
-  - Radio List: 微信支付、支付宝、余额支付。
-  - 选中会有高亮边框。
-- **扫码区**: (PC端) 展示二维码，轮询支付状态。
+**核心目标**: 清晰展示“买什么、多少钱”，减少犹豫。
 
-## 3. 订单详情页 (Order Detail)
-- **状态栏**:
-  - 顶部大卡片。
-  - 当前状态 (如 "待发货") + 进度条 (下单 -> 付款 -> 发货 -> 完成)。
-  - 对应操作按钮: [申请退款] [确认收货] [去评价]。
-- **信息模块**:
-  - **收货信息**: 人名、电话、地址。
-  - **订单信息**: 订单号、创建时间、支付时间。
-  - **商品列表**: 复用清单组件。
-  - **费用明细**: 商品总价 - 优惠 + 运费 = 实付。
+### 1.1 页面结构
+- **步骤条 (Steps)**: 顶部显示 `1. 确认订单` (激活) -> `2. 扫码支付` -> `3. 交易完成`。
+- **虚拟/实体区分**:
+  - **虚拟内容**: 隐藏收货地址模块，显示 "购买后自动发货至账户"。
+  - **实体商品**: 展示地址选择卡片 + [新增地址] 大按钮。
+
+### 1.2 商品清单 (Item List)
+- **样式**: `bg-white rounded-lg p-6 mb-4 shadow-sm`。
+- **列表项**:
+  - **图片**: `w-24 h-16 object-cover rounded` (16:9)。
+  - **信息**: 标题 (H3) + 类型标签 (如 "专栏", "视频")。
+  - **价格**: 单价 `¥ 99.00` x 数量。
+- **优惠模块**:
+  - **优惠券**: 点击弹出侧边抽屉选择，不跳转页面。
+  - **积分抵扣**: Switch 开关 + "使用 100 积分抵扣 ¥ 1.00"。
+
+### 1.3 底部结算栏 (Sticky Bottom Bar)
+- **位置**: 吸底 `bottom-0`，`z-50`，白底阴影。
+- **内容**:
+  - **左侧**: 
+    - 实付金额: `¥ 98.00` (text-3xl text-red-600 font-bold)。
+    - 明细展开: "共优惠 ¥ 1.00" (点击可展开气泡查看明细)。
+  - **右侧**: [提交订单] (Primary Button, h-14, w-48)。
+- **交互**: 点击提交 -> 全局 Loading -> 跳转收银台。
+
+---
+
+## 2. 收银台 (Cashier)
+
+**核心目标**: 营造安全感，引导快速支付。
+
+### 2.1 头部信息
+- **倒计时**: 顶部黄色 Banner "请在 15:00 内完成支付，超时订单将自动取消"。
+- **金额区**: 居中显示 "¥ 98.00"，下方灰字显示 "订单号: 20251225..."。
+
+### 2.2 支付方式 (Payment Methods)
+- **布局**: 左侧选择方式，右侧展示二维码 (PC端)。
+- **选项**:
+  - **微信支付**: 绿色图标，推荐。
+  - **支付宝**: 蓝色图标。
+  - **余额支付**: 显示当前余额，若不足则置灰并提示。
+- **二维码区域**:
+  - **尺寸**: `200x200px` (加大，方便扫码)。
+  - **状态**: 
+    - 正常: 显示二维码。
+    - 过期/失效: 遮罩 + [刷新二维码]。
+    - 成功: 显示绿色对勾 "支付成功，正在跳转..."。
+
+---
+
+## 3. 支付结果页 (Payment Result)
+- **成功态**:
+  - 绿色大图标 + "支付成功"。
+  - [查看订单] (Secondary) + [立即阅读/使用] (Primary)。
+- **失败态**:
+  - 红色大图标 + "支付遇到问题"。
+  - [重新支付] + [联系客服]。
+
+---
+
+## 4. 订单详情页 (Order Detail)
+
+### 4.1 状态看板 (Status Board)
+- **虚拟商品状态流**: 
+  - `待支付`: 显示倒计时 + [去支付] [取消订单]。
+  - `已完成`: 显示 "已发货" + [立即阅读] [下载发票]。
+  - `已取消/已退款`: 灰色状态。
+- **实体商品状态流**: 增加 `待发货` -> `已发货` (含物流查询) 环节。
+
+### 4.2 信息模块
+- **售后/退款**:
+  - **入口**: 在订单底部显示 "申请售后" 链接 (灰色小字，不强调)。
+  - **虚拟限制**: 点击弹出提示 "虚拟商品一经售出不支持无理由退款，如有质量问题请联系客服"。
+- **费用明细**:
+  - 表格式对齐展示：商品总额、运费、优惠券、积分抵扣、实付金额。
+
+### 4.3 适老化细节
+- **字号**: 关键金额字号 `30px+`。
+- **按钮**: 高度统一 `h-12` (48px)，间距 `gap-4`。
+- **复制**: 订单号旁增加大尺寸 [复制] 按钮。

docs/design/portal/PAGE_TENANT_APPLY.md

@@ -0,0 +1,66 @@
+# 页面设计: 租户申请/成为创作者 (Tenant Application)
+
+> **路由**: `/me/tenant/apply`
+> **布局**: `LayoutMain` (头部增加引导展示)
+> **入口**: `TopNavbar` 右侧 [成为创作者] 按钮 (仅对非租户显示)
+
+## 1. 流程结构 (Flow)
+
+申请流程设计为 **"引导 -> 填表 -> 审核"** 三步。
+
+```text
+[   1. 权益引导页   ] -> [   2. 资料填写   ] -> [   3. 等待审核   ]
+```
+
+---
+
+## 2. 详细设计 (Detailed Specs)
+
+### 2.1 入驻引导页 (Landing)
+用户首次点击 [成为创作者] 时展示。
+- **视觉 (Hero)**: 
+  - 简洁、大气的插画/背景，文案: "开启您的内容创作之旅"。
+  - 核心权益 (3个大图标):
+    1. **内容变现**: 设置付费阅读，直接获得收益。
+    2. **租户主页**: 拥有独立的品牌/个人展示空间。
+    3. **数据管理**: 清晰的内容与订单统计。
+- **操作**: 底部显著的 [立即申请] 大按钮。
+
+### 2.2 申请表单页 (Application Form)
+**容器**: `max-w-3xl mx-auto bg-white rounded-lg shadow-sm p-10 my-8`。
+
+- **表单字段 (适老化大输入框)**:
+  1. **租户名称**: (必填) 建议与个人昵称一致，也可另设。
+  2. **租户头像**: (必填) 品牌或个人头像。
+  3. **内容领域**: (单选) 如科技、生活、养老、医疗等。
+  4. **简介/Slogan**: (必填) 一句话介绍。
+  5. **资质材料 (可选/必填)**: 
+    - 针对个人：身份证件照片。
+    - 针对机构：营业执照/相关资质。
+    - **交互**: 图片上传组件，带大面积点击区和 [查看范例] 链接。
+- **协议勾选**: `[ ] 我已阅读并同意《创作者入驻协议》` (新窗口打开)。
+- **操作**: [提交审核] (Primary Button, h-14, text-xl)。
+
+### 2.3 审核结果页 (Review Status)
+- **提交成功**:
+  - 绿色对勾图标 + "申请已提交"。
+  - 文案: "平台将在 1-3 个工作日内完成审核，结果将通过系统通知告知您。"。
+  - [返回首页] [查看个人中心]。
+- **审核驳回**:
+  - 红色警告图标 + "申请未通过"。
+  - **原因展示**: 明确显示驳回理由（如：证件不清晰）。
+  - [修改资料并重新提交] 按钮。
+
+---
+
+## 3. 交互与权限
+
+- **按钮显隐**: 
+  - 已有租户身份的用户，[成为创作者] 按钮替换为 [进入管理后台]。
+  - 游客点击 [成为创作者] 按钮，弹出登录提示。
+- **状态持久化**:
+  - 若用户填表一半离开，系统应通过 `localStorage` 自动保存草稿。
+  - 再次进入时询问 "是否继续填写未完成的申请？"。
+- **适老化支持**:
+  - 所有的错误提示 (Validation Messages) 必须使用高对比度红字，且字号不小于 `16px`。
+  - 输入框激活时带明显的 `ring-4` 蓝框提示。

docs/design/portal/PAGE_TENANT_HOME.md

@@ -1,56 +1,78 @@
 # 页面设计: 租户/个人主页 (Tenant Profile)
 
 > **路由**: `/tenants/:tenantId`
-> **布局**: `LayoutMain`
-> **结构**: 封面式头部 + 内容列表
+> **布局**: `LayoutMain` (Header + Footer)
+> **结构**: 固定宽度 (1280px) 封面头部 + 切换内容区
 
 ## 1. 页面结构 (Structure)
 
-类似社交媒体的个人主页设计，强调品牌形象展示。
+采用上下结构，顶部为品牌头图与基本资料，下方为内容切换区。
+
+- **最大宽度**: `max-w-screen-xl` (1280px) 居中。
+- **背景**: 头部背景跟随封面图，内容区背景 `bg-slate-50`。
 
 ```text
-[            Cover Image (Full Width/Boxed)              ]
-[            Profile Header (Info & Stats)               ]
-----------------------------------------------------------
-|   Tabs (Home/All/Series)   |   Search in Tenant        |
-----------------------------------------------------------
-[                  Content Grid / List                   ]
+[      Cover Image (1280x320, Rounded Top)      ]
+[      Profile Header (Avatar, Bio, Stats)      ]
+-------------------------------------------------
+[ Tabs (Sticky) ]         [ Search in Tenant ]
+-------------------------------------------------
+[                Content Area                   ]
 ```
 
+---
+
 ## 2. 详细设计 (Detailed Specs)
 
 ### 2.1 头部区域 (Profile Header)
-- **封面图 (Cover)**:
-  - 高度 `h-48 sm:h-64`。
-  - `object-cover w-full rounded-t-lg` (如果在大容器内) 或 `w-full` (全宽)。
-- **信息栏 (Info Bar)**:
-  - **布局**: 相对定位，头像部分重叠在封面图上。
-  - **头像**: 大尺寸 `w-24 h-24 sm:w-32 sm:h-32 rounded-full border-4 border-white shadow-md -mt-12 ml-6`。
-  - **文本**: 名称 (H1)、认证标识、一句话简介。
-  - **数据**: 关注者数量、内容数量、获赞数。
-  - **操作**: 右侧 [关注] [私信] 按钮。
+- **封面图 (Cover)**: 
+  - 尺寸: **1280x320px** (4:1 比例)。
+  - **适配**: `object-cover`，定位 `center center`。
+  - **兜底**: 若无图片，使用品牌色或随机几何渐变背景。
+- **信息资料栏**:
+  - **背景**: `bg-white border-x border-b border-slate-200 p-8 flex items-end justify-between relative`。
+  - **右侧操作区**:
+    - **关注按钮尺寸规范**: 固定宽度 **`w-32` (128px)**。
+    - **通知策略**: 关注成功后默认开启“更新动态”站内信提醒。首次关注显示轻量 Popover 提示:"已为您开启更新提醒，[去设置] 可调整"。
+    - **分享入口**: 更多操作按钮 (`...`) 中包含 [分享主页]，同时页面右下角常驻悬浮分享按钮 (FAB)。
+      - **分享模板**: "向你推荐一个优质创作者：[作者名] - [简介摘要] [URL]"。
+    - **统计数据交互**: 
+      - **关注/获赞**: 点击弹出对应列表浮窗 (Modal)，支持快速浏览。
+      - **内容**: 点击自动切换至 "全部内容" Tab。
 
-### 2.2 导航与筛选 (Navigation)
-- **位置**: 信息栏下方。
-- **Tabs**:
-  - "主页" (精选/置顶)
-  - "全部内容"
-  - "专栏/系列"
-  - "简介/关于"
-- **样式**: `border-b border-slate-200`，选中项底部高亮 `border-primary-600`。
+### 2.2 导航与筛选 (Sticky Navigation & Search)
+...
 
-### 2.3 内容展示区 (Content Area)
-- **布局**:
-  - **默认**: 网格布局 `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6`。
-  - **列表模式**: 可选切换。
-- **卡片样式**:
-  - 复用首页的卡片组件，但可能移除作者信息（因为已经在作者主页了），强调封面和标题。
+### 2.3 内容展示逻辑 (Content Area)
 
-### 2.4 "关于" Tab (About Tab)
-- 如果切换到 "简介/关于" Tab：
-  - 展示详细的企业/个人介绍。
-  - 联系方式、地图、资质证书等。
+#### B. "全部内容" Tab (All Posts)
+- **卡片内容类型标识 (Media Markers)**:
+  - **位置**: 封面图左下角。
+  - **视频**: `Play Icon` + `12:05` (时长)。
+  - **音频**: `Audio Icon` + `08:30` (时长)。
+  - **图集**: `Image Icon` + `9P` (张数)。
+  - **附件**: 卡片底部显示蓝色小图标 "含附件 (3)"。
+- **价格与付费规范 (Price Specs)**:
+  - **展示层级**: 现价 (红) > 会员价 (金/小字) > 原价 (灰/划线)。
+  - **会员专享**: 价格位替换为 "会员免费" (金色 Badge)。
+  - **按钮优先级**: 若已购买或会员免费，显示 [立即阅读] (Secondary)；否则显示 [立即购买] (Primary)。
+  - **兜底**: 若价格数据异常缺失，默认显示为 "免费" 或 "价格待定"。
 
-## 3. 特殊状态
-- **未发布内容**: 展示空状态插画 "作者很懒，还没有发布内容"。
-- **私密/封禁**: 展示 403/404 提示。
+### 2.4 "关于" Tab & 更多操作
+...
+
+### 2.5 响应式与移动端适配 (lg 以下)
+- **操作按钮布局**:
+  - 当屏幕宽度 `< 768px` 时，关注与私信按钮由水平排列改为 **通栏吸底 (Sticky Bottom)**，以保证单手操作便捷。
+  - 更多操作 (`...`) 变为右上角固定菜单。
+- **统计数据**: 缩放字号并横向等分排列。
+#### D. "关于" Tab (About)
+- **内容层级**:
+  - **排版**: 使用 `prose` 规范，阅读行宽限制在 **800px** 以内。
+  - **图片**: 图片说明文字居中 `text-sm text-slate-400 mt-2`。
+- **联系方式**: 脱敏展示，点击 [查看] 需验证。
+
+### 2.5 侧边引导与辅助
+- **分享入口**: 右下角悬浮分享按钮 (FAB)。
+- **推荐区块**: 若采用 9:3 布局，右侧展示 "推荐关注"。
+- **订阅提醒**: 未关注用户滚到底部时弹出轻量订阅 Toast。

docs/design/portal/PAGE_TENANT_MANAGEMENT.md

@@ -0,0 +1,111 @@
+# 页面设计: 租户管理/创作者中心 (Tenant Management)
+
+> **路由**: `/me/management/*`
+> **布局**: `LayoutMain` (复用门户布局，采用侧边栏分栏结构)
+> **结构**: 与个人中心一致的左侧导航布局，保持视觉与操作连续性
+
+## 1. 布局结构 (Structure)
+
+管理模块直接集成在 C 端门户中，作为“创作者中心”存在。
+
+- **导航栏**: 复用全局 `TopNavbar`，用户可通过头像下拉菜单的“管理入口”进入。
+- **页面框架**: 
+  - **左侧 (Sidebar)**: 独立于个人中心的管理菜单（内容管理、订单管理、租户设置）。
+  - **右侧 (Main)**: 管理列表或表单容器，背景为 `bg-white` 圆角卡片。
+
+---
+
+## 2. 核心功能模块
+
+### 2.1 管理概览 (Dashboard) `/me/management`
+- **核心指标卡片 (Key Metrics)**:
+  - **总关注用户**: 显示累计粉丝数及较前一日的增长变化 (+/-)。
+  - **订单收益**:
+    - [累计总收益]: 账户所有已结算金额。
+    - [近30天收益]: 动态展示最近一个月的收入规模。
+  - **订单统计**:
+    - [累计订单量]: 总成交笔数。
+    - [待处理订单]: 待发货或退款申请中的实时数量提示。
+  - **内容表现**: 累计阅读量 (PV) 与 获赞总数。
+- **趋势分析图表 (Charts)**:
+  - **收益/订单趋势**: 支持切换 [近7天] / [近30天] 的柱状图，直观展示收入波动。
+  - **粉丝增长曲线**: 折线图展示每日新增粉丝趋势。
+- **快捷入口**: [发布新内容] [处理退款申请]。
+- **公告通知**: 创作者专属公告（如：平台分成比例调整通知）。
+
+### 2.2 内容管理 (Content Management) `/me/management/contents`
+- **列表展示**:
+  - **字段**: 封面 | **曲种/剧目** | 价格 | 状态 | 阅读/收益 | 操作。
+  - **状态说明 (Audit Status)**:
+    - `已发布`: 绿色，正常在线。
+    - `审核中`: 橙色，平台正在处理。
+    - `驳回`: 红色。**交互**: 点击状态标签弹出气泡或弹窗显示具体的“驳回原因”，支持一键进入编辑。
+    - `草稿`: 灰色。
+- **发布编辑器 (WYSIWYG Editor - 戏曲定制版)**:
+  - **头部元数据 (Metadata)**:
+    - **曲种**: (必选) 下拉选择后台配置的曲种 (如 京剧/越剧)。
+    - **标题组合**: 
+      - [剧目名] (必填, 如《锁麟囊》) 
+      - [选段名] (可选, 如"春秋亭") 
+      - [附加信息] (可选, 如"程砚秋")
+      - *预览*: 自动拼接展示 `《锁麟囊》春秋亭 (程砚秋)`。
+  - **工具栏功能**:
+    - **基础排版**: H1/H2/H3, 加粗, 下划线, 列表, 居中/对齐。
+    - **戏曲专用**:
+      - **剧本模式**: 专门的 [角色: 台词] 格式块，自动悬挂缩进。
+      - **唱段属性**: 插入音频时可选填 **定调 (Key)** (如 C大调/D大调) 和 **板式** (如 原板/流水)。
+      - **注音工具**: 支持给生僻字添加拼音标注 (Ruby)，解决尖团音等阅读障碍。
+    - **媒体 (仅支持上传)**: 图片, 视频 (支持断点续传), 音频, 附件。**不支持外链**。
+    - **操作**: 撤销, 重做, 清除格式, 插入分割线。
+  - **交互体验**:
+    - **自动保存**: 编辑器右上角实时显示状态 "正在保存..." / "所有更改已保存"。
+    - **大文件支持**: 针对高清戏曲视频优化上传稳定性。
+- **发布属性设置 (Publish Settings)**:
+  - **位置**: 右侧栏 (宽屏) 或 底部抽屉 (窄屏)，点击 [发布设置] 展开。
+  - **字段**:
+    - **封面图**: (必填) 点击上传，支持裁切预览。
+    - **摘要**: (可选) 自动提取前 50 字或手动输入。
+    - **戏曲属性**: 
+      - **主定调**: 下拉选择 (C/D/E/F/G/A/B 等)。
+      - **行当**: 生/旦/净/末/丑。
+    - **标签**: (可选) 搜索并多选，支持新增。
+    - **价格策略**: 
+      - Radio Group: [免费] | [付费] | [会员免费]。
+      - **付费设置**:
+        - **价格**: 输入金额 (¥)。
+        - **试看/试听**: 
+          - Switch 开关 [开启试看]。
+          - 输入时长: 默认 `60` 秒 (支持自定义，针对戏曲长视频建议设为 3-5 分钟)。
+  - **操作**: [存草稿] [立即发布]。
+
+### 2.3 订单管理 (Order Management) `/me/management/orders`
+- **列表展示**:
+  - 记录所有购买该租户内容的订单。
+  - **字段**: 订单号 | 内容标题 | 买家昵称 | 实付金额 | 下单时间 | 状态。
+- **管理干预 (Order Intervention)**:
+  - **状态流转**: 
+    - 正常: `已支付` -> `已完成`。
+    - 退款: `退款申请中` (买家发起) -> `已退款` (同意) / `退款拒绝`。
+  - **操作按钮**:
+    - [查看详情]: 弹窗显示买家信息与支付凭证。
+    - [处理退款]: (仅针对退款申请) 弹出审核框，选择 [同意退款] 或 [拒绝]。
+    - [发送私信]: 快速联系买家。
+
+### 2.4 租户资料设置 (Tenant Settings) `/me/management/settings`
+- **内容**:
+  - 修改租户主页的封面图 (Cover)、名称、简介。
+  - 资质材料上传（用于等级提升或认证）。
+- **同步**: 此处修改后，租户公开主页 (`/tenants/:id`) 同步更新。
+
+---
+
+## 3. 交互细节与权限
+
+### 3.1 权限拦截
+- **访问控制**: 非租户管理员访问 `/me/management` 直接跳转至“租户申请”页或 403。
+- **身份显示**: 在管理页面顶部显著位置显示“当前正在管理：[租户名称]”，防止多账号混淆。
+
+### 3.2 适老化管理体验
+- **大按钮**: 所有的“发布”、“编辑”按钮均采用 `h-12` 以上高度。
+- **状态感知**: 每一个操作（如保存草稿）都有明确的 Toast 反馈。
+- **自动保存**: 编辑器支持本地离线保存，防止误关闭导致内容丢失。

docs/design/portal/PAGE_USER_CENTER.md

@@ -1,52 +1,91 @@
 # 页面设计: 个人中心 (User Center)
 
 > **路由**: `/me/*`
-> **布局**: `LayoutMain`
-> **结构**: 侧边栏导航布局 (Sidebar Layout)
+> **布局**: `LayoutMain` (Header + Footer)
+> **结构**: 固定宽度侧边栏布局 (Sidebar Layout)
 
 ## 1. 布局结构 (Structure)
 
-```text
-[ Container ]
-|  [ Sidebar Nav ]  |  [      Main Content Area      ]  |
-|  (250px Fixed)    |  (Flex Grow, White Card)          |
-|                   |                                   |
-|  - Dashboard      |  H2 Page Title                    |
-|  - Orders         |  -------------------------------  |
-|  - Wallet         |  [ Content Form / List ]          |
-|  - Settings       |                                   |
-```
+内容区域固定最大宽度 `1280px` 居中，采用 `gap-8` 分栏。
+
+- **Sidebar (左侧)**: 宽度固定 **280px**，背景白底圆角。始终可见，不支持折叠以降低操作复杂度。
+- **Main (右侧)**: 宽度自适应 (Flex Grow)，背景白底圆角，最小高度 `600px`。
+
+---
 
 ## 2. 侧边栏导航 (Sidebar Nav)
-- **用户信息**: 顶部展示小头像 + 昵称。
+
+### 2.1 用户简报区
+- **内容**: 头像 (64px) + 昵称 (加粗) + ID。
+- **文字策略**: 昵称最长 20 字符，超长则 `truncate`，Hover 显示 Tooltip。
+
+### 2.2 菜单体系
+- **样式**: 菜单组不设折叠开关。当前活动页在滚动时保持高亮。
+- **高亮逻辑**: 精确匹配路由。若子页面（如订单详情）打开，所属父级菜单（我的订单）保持 Active 态。
 - **菜单组**:
-  - **交易中心**: 我的订单、我的钱包、售后记录。
-  - **内容管理**: 我的收藏、浏览历史。
-  - **账号设置**: 个人资料、账号安全(密码/绑定)、收货地址。
-  - **租户入口**: (如果是租户管理员) [切换到创作者中心] 按钮。
-- **样式**: 选中项背景高亮 `bg-primary-50 text-primary-600 border-r-2 border-primary-600`。
+  1.  **概览**: 个人首页 (Dashboard)。
+  2.  **交易**: 我的订单、我的钱包、优惠券、地址管理。
+  3.  **内容**: 我的收藏、浏览历史、已购内容 (Library)。
+  4.  **通知**: 消息中心 (Notifications)。
+  5.  **设置**: 个人资料、账号安全。
+
+---
 
 ## 3. 核心子页面设计
 
-### 3.1 个人资料 (Profile)
-- **表单**:
-  - 头像上传 (点击更换)。
-  - 昵称、简介 (Textarea)。
-  - 性别、生日 (Datepicker)。
-- **操作**: [保存修改] 按钮。
+### 3.1 消息中心 (Notifications) `/me/notifications`
+- **结构**: 顶部 Tabs 筛选 + 垂直消息流。
+- **Tabs**:
+  - **系统通知**: 平台活动、升级提醒。
+  - **订单通知**: 付款成功、退款进度。
+  - **审核通知**: 内容发布结果、租户申请结果。
+  - **互动消息**: 被人点赞、新的评论回复。
+- **操作**: 顶部右侧 [全部标记已读] 按钮。
+- **列表项 (Card)**:
+  - **样式**: `flex items-start p-4 border-b border-slate-50 hover:bg-slate-50 transition-colors`。
+  - **未读标记**: 标题前带蓝色小点。
+  - **内容**: 图标 (根据分类) + 标题 + 摘要 (1行) + 时间。
+  - **跳转**: 点击整行跳转至关联页面（如：订单通知跳转至订单详情）。
+- **空状态**: "暂无消息通知"。
 
-### 3.2 账号安全 (Security)
-- **列表项**:
-  - **登录密码**: 已设置 [修改]。
-  - **手机绑定**: 138****8888 [更换]。
-  - **邮箱绑定**: 未绑定 [绑定]。
-  - **注销账号**: 红色链接，需二次确认。
+### 3.1 个人首页 (Dashboard) `/me`
+- **资产数据**: 余额、积分、优惠券。
+  - **刷新频率**: 进入页面实时拉取最新数据。
+  - **异常态**: 拉取失败显示 `--`，点击该区域触发手动刷新。
+- **最近订单**: 展示最近 **3 条** 订单，按支付时间倒序。
+- **最近浏览**: 展示最近 **5 条** 记录，卡片包含：封面、标题、作者。
 
-### 3.3 我的收藏 (Favorites)
-- **布局**: 网格或列表展示收藏的内容。
-- **操作**: [取消收藏] 按钮，支持批量管理。
+### 3.2 个人资料 (Profile)
+- **字段清单**:
+  - **头像**: (必填) 点击上传。
+  - **昵称**: (必填) 2-20 字符。
+  - **简介**: (可选) 100 字符以内。
+  - **性别**: (可选) 单选按钮：男、女、保密。
+  - **生日**: (可选) 日期选择器。
+  - **地区**: (可选) 省市二级联动选择。
+- **审核规则**: 昵称与头像提交后进入 **后置审核**。修改成功后提示 "修改已提交，审核中"，在审核通过前，他人访问时显示旧信息或占位符。
 
-### 3.4 浏览历史 (History)
-- **时间轴**: 按日期分组 (今天 / 昨天 / 更早)。
-- **列表**: 简单的标题 + 时间列表。
-- **操作**: [清空历史]。
+### 3.3 我的钱包 (Wallet)
+- **充值交互**: 预设面额按钮 + 自定义输入。
+- **流水明细**: 展示 30 天内记录，支持按类型（支出/收入/充值）筛选。
+
+### 3.4 内容管理 (收藏/历史/已购)
+- **卡片规范**: 包含标题、封面 (16:9)、租户名称、收藏/购买时间。
+- **已购状态处理**:
+  - **正常**: 显示 "永久有效" 或 "剩余 X 天"。
+  - **已过期**: 卡片置灰，标注 "已过期"，提供 [再次购买] 链接。
+  - **已下架**: 卡片置灰，标注 "已下架"，不可点击进入详情。
+- **删除逻辑**:
+  - **单个删除**: 点击 `X` 即删除，底部弹出 Toast 提示 "已删除" + [撤销] 按钮。
+  - **批量删除**: 管理态下选中多项点击 [删除]，必须弹出二次确认模态框。
+
+### 3.5 账号安全 (Security)
+- **实名认证**: (可选/强制) 展示实名状态，未认证显示 [去认证]。
+- **账号注销**: 极简流程，但需输入 "注销" 确认，并提示 "注销后资产将清空且不可找回"。
+
+---
+
+## 4. 状态与加载
+- **加载策略**: 切换菜单时，右侧 Main 区域展示骨架屏 (Skeleton)。
+- **空状态**: 统一插画风格，带引导按钮（如收藏为空显示 "去发现内容"）。
+- **同步**: 资料修改成功后，TopNavbar 和 Sidebar 的头像昵称同步更新。