feat: add pages

2025-12-25 17:40:40 +08:00
parent f27e9c5d30
commit 77453be40b
11 changed files with 517 additions and 523 deletions
--- a/docs/design/portal/GLOBAL.md
+++ b/docs/design/portal/GLOBAL.md
@@ -0,0 +1,96 @@
+# Portal 全局设计准则 (Global Design Guidelines)
+
+> **适用范围**: PC 端 Portal 站点
+> **核心风格**: 内容型（浅灰背景 + 白色卡片），强调信息层级与阅读体验。
+
+## 1. 全局布局 (Layout & Container)
+
+采用经典的垂直分布布局，确保内容区域聚焦且具备良好的扩展性。
+
+### 1.1 页面结构 (DOM Structure)
+- **Root**: `min-h-screen flex flex-col bg-slate-50` (浅灰背景，hex: `#F8FAFC`)
+  - **Header**: `fixed top-0 w-full z-50` (固定顶部)
+  - **Main**: `flex-grow pt-16` (内容自适应填充，顶部留出 Header 高度)
+  - **Footer**: `mt-auto` (页脚沉底)
+
+### 1.2 核心容器 (Main Container)
+所有页面核心内容需包裹在标准容器内，以保证视觉统一。
+- **宽度限制**: `max-w-screen-xl` (Tailwind default: 1280px)
+- **对齐方式**: `mx-auto` (水平居中)
+- **内边距**: `px-4 sm:px-6 lg:px-8` (响应式呼吸感)
+- **示例代码**:
+  ```html
+  <main class="flex-grow pt-16">
+    <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8 py-8">
+      <!-- Page Content Here -->
+    </div>
+  </main>
+  ```
+
+### 1.3 基础色彩规范 (Basic Colors)
+- **背景色**: `bg-slate-50` (页面底色)
+- **卡片色**: `bg-white` (内容承载)
+- **边框色**: `border-slate-200` (轻微分割线)
+- **文字色**:
+  - 主要: `text-slate-900` (标题、正文)
+  - 次要: `text-slate-500` (描述、辅助信息)
+  - 链接: `text-primary-600 hover:text-primary-700`
+
+---
+
+## 2. 顶部导航栏 (TopNavbar)
+
+全局常驻入口，承载品牌认知与核心路径导航。
+
+### 2.1 外观 (Appearance)
+- **尺寸**: 高度 `h-16` (64px)
+- **背景**: `bg-white` (纯白背景)
+- **质感**: `border-b border-slate-200` 或 `shadow-sm` (轻微投影，提升层级)
+
+### 2.2 布局 (Flex Grid)
+`flex items-center justify-between` + `Container`
+
+| 区域 | 元素 | 交互/样式 |
+| --- | --- | --- |
+| **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 |
+
+---
+
+## 3. 页脚 (Footer)
+
+全局底部信息区，采用深色风格以稳定视觉重心。
+
+### 3.1 外观 (Appearance)
+- **背景**: `bg-slate-900` (深色)
+- **文字**: `text-slate-400` (灰色文本，避免纯白刺眼)
+- **链接**: Hover 时变亮 `hover:text-white`
+
+### 3.2 内容结构
+- **Upper Section (Links)**: `py-12`
+  - Grid 布局 (3-4 列)
+  - 栏目：关于我们、帮助中心、法律条款、关注我们 (Social Icons)
+- **Bottom Section (Copyright)**: `border-t border-slate-800 py-6`
+  - 版权声明 (© 2025 Quyun)
+  - ICP 备案号 / 公安网备
+
+---
+
+## 4. 通用 UI 元素 (Common Components)
+
+### 4.1 内容卡片 (Content Card)
+用于承载列表项、详情块等。
+- **样式**: `bg-white rounded-lg border border-slate-100 shadow-sm transition-shadow hover:shadow-md`
+- **内边距**: `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`
+
+### 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**: 标题 + 操作区 (如“查看更多”) 的组合。
--- a/docs/design/portal/PAGE_AUTH.md
+++ b/docs/design/portal/PAGE_AUTH.md
@@ -0,0 +1,62 @@
+# 页面设计: 认证流程 (Auth)
+
+> **路由**: `/auth/login` (合并登录与注册)
+> **布局**: `LayoutAuth` (全屏居中大卡片，内部左右分栏)
+
+## 1. 布局结构 (Centered Split Layout)
+
+采用屏幕居中的大尺寸卡片布局，将品牌展示与操作表单完美融合。
+
+- **外层容器**: `min-h-screen bg-slate-50 flex items-center justify-center p-4`
+- **主卡片**: `w-full max-w-4xl bg-white rounded-2xl shadow-2xl overflow-hidden flex min-h-[550px]`
+  - **左侧 (品牌区 - Brand Area)**: `w-1/2 hidden md:flex bg-slate-900 relative p-12 flex-col justify-between text-white`
+    - **顶部**: Logo 展示。
+    - **中部**: 
+      - `h1`: "探索内容的无限可能" (text-4xl font-bold leading-tight)
+      - `p`: "专业的租户管理与内容交付平台，连接创作者与用户。" (text-slate-400 mt-4)
+    - **底部**: `text-xs text-slate-500`: "© 2025 Quyun. All rights reserved."
+  - **右侧 (表单区 - Form Area)**: `w-full md:w-1/2 p-8 sm:p-12 flex flex-col justify-center`
+
+---
+
+## 2. 核心交互流程 (手机号 OTP 登录/注册)
+
+页面不区分登录和注册，统一通过手机号验证码进入。若手机号未注册，验证通过后后台自动创建账号。
+
+### 2.1 第一步：输入手机号
+- **标题**: "欢迎回来" (text-2xl font-bold text-slate-900)
+- **描述**: "未注册的手机号验证后将自动创建账号" (text-sm text-slate-500 mt-2 mb-8)
+- **表单元素**:
+  - **手机号输入**: `flex` 结构。前置国家代码 `+86` (不可选或下拉)，后接 Input。
+    - 样式: `border-slate-200 focus:border-primary-500 rounded-lg`
+  - **协议勾选**: 位于按钮上方。
+    - `[ ] 我已阅读并同意《用户协议》和《隐私政策》`
+    - **交互**: 协议名称点击后 **新窗口打开** (`target="_blank"`)。
+  - **提交按钮**: "获取验证码" (Primary Button, Full Width, `h-12`)。
+- **第三方登录 (Footer)**: 
+  - 分隔线: "其他方式登录" (text-xs text-slate-400)
+  - 图标组: 微信、GitHub 等圆型图标按钮。
+
+### 2.2 第二步：输入验证码 (OTP Input)
+*用户点击获取验证码成功后，表单区域平滑切换（或水平滑入）至验证码输入界面。*
+
+- **提示**: "验证码已发送至 +86 138****8888" (含返回修改图标)。
+- **验证码输入框**: 
+  - **连体样式**: 单个 Input，但通过 CSS `letter-spacing` 或背景装饰模拟 6 位网格感，或者使用标准的 6 位连体窄间距输入框。
+  - **交互**: 自动聚焦，仅限数字，长度 6 位。
+- **辅助操作**:
+  - **倒计时**: "59s 后重新获取" (不可点击) -> "重新获取验证码" (可点击)。
+- **确认按钮**: "登录 / 进入 QuYun"。
+
+---
+
+## 3. 逻辑与细节
+
+- **自动注册逻辑**: 验证码校验通过后，由后端判断 `is_new_user`。
+- **跳转逻辑**: 登录/注册成功后，统一跳转回 **首页 (`/`)** 或 **来源页 (redirect_url)**。不强制跳转完善资料页。
+- **校验规则**:
+  - 手机号: 必须符合中国大陆 11 位手机号格式。
+  - 协议: 未勾选时点击“获取验证码”，按钮执行“抖动”动画，并在下方显示红色提示“请先同意用户协议”。
+- **加载状态**:
+  - 发送验证码时，按钮进入 `loading` 状态，防止重复点击。
+  - 登录校验时，全屏或区域遮罩 Loading。
--- a/docs/design/portal/PAGE_CONTENT_DETAIL.md
+++ b/docs/design/portal/PAGE_CONTENT_DETAIL.md
@@ -0,0 +1,66 @@
+# 页面设计: 内容详情页 (Content Detail)
+
+> **路由**: `/contents/:contentId`
+> **布局**: `LayoutMain`
+> **结构**: 经典阅读布局 (左文右侧栏)
+
+## 1. 页面结构 (Structure)
+
+```text
+[ Breadcrumb ]
+----------------------------------------------------------
+|                    |                                   |
+|   Article Body     |          Sidebar (Sticky)         |
+|      (70%)         |    (Author / TOC / Related)       |
+|                    |            (30%)                  |
+|   Comments Area    |                                   |
+|                    |                                   |
+```
+
+## 2. 详细设计 (Detailed Specs)
+
+### 2.1 顶部导航 (Breadcrumb)
+- **位置**: 容器顶部，Main 内容之前。
+- **内容**: `首页 > 分类 > 正文标题`。
+- **样式**: `text-sm text-slate-500 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.3 评论区 (Comments Section)
+- **位置**: 正文容器下方，独立卡片或同一容器底部。
+- **结构**:
+  - 输入框: 文本域 + 表情/图片按钮 + "发布"按钮。
+  - 列表: 头像 + 名称 + 内容 + 时间 + 回复按钮。
+  - 嵌套: 二级回复缩进显示。
+
+### 2.4 右侧侧边栏 (Sidebar - Right Column)
+- **特性**: `sticky top-20` (随页面滚动固定)。
+- **模块**:
+  1.  **作者/租户卡片 (Author Profile)**:
+      - 大头像、名称、简介。
+      - 数据: 文章数、粉丝数。
+      - 动作: [关注] [私信] 大按钮。
+  2.  **目录 (Table of Contents)**:
+      - 自动生成 H2/H3 锚点链接。
+      - 当前阅读章节高亮 (ScrollSpy)。
+      - 样式: 左侧竖线指示条。
+  3.  **相关推荐 (Related Contents)**:
+      - 缩略图 + 标题列表。
+
+## 3. 移动端适配 (Mobile)
+- **侧边栏**: 隐藏。
+- **作者信息**: 移动到文章头部或底部展示。
+- **目录**: 变为浮动按钮 (FAB) 或 放在文章头部折叠面板中。
+- **底部栏**: 固定底部操作栏 (评论输入框、点赞、收藏、分享)，类似于原生 App 体验。
--- a/docs/design/portal/PAGE_HOME.md
+++ b/docs/design/portal/PAGE_HOME.md
@@ -0,0 +1,60 @@
+# 页面设计: 首页 (Home)
+
+> **路由**: `/`
+> **布局**: `LayoutMain` (Header + Footer)
+> **结构**: 混合布局 (Banner + 左右分栏)
+
+## 1. 页面结构 (Structure)
+
+首页采用 **"Hero + 左右分栏"** 的经典内容型布局，强调信息密度与浏览效率。
+
+```text
+[      Hero Banner / Carousel (Full Width or Boxed)      ]
+----------------------------------------------------------
+[ Filter/Tags Bar ]
+----------------------------------------------------------
+|                    |                                   |
+|   Main Feed (70%)  |          Sidebar (30%)            |
+|   (Content List)   |      (Trending / Recommends)      |
+|                    |                                   |
+```
+
+## 2. 详细设计 (Detailed Specs)
+
+### 2.1 Hero 区域 (Hero Section)
+位于导航栏下方，用于展示平台级置顶、活动或推荐。
+- **容器**: `w-full bg-white border-b border-slate-100 mb-6` (可选)
+- **内容**:
+  - **轮播图/大卡片**: 高度约 `300px - 400px`。
+  - **样式**: 圆角矩形，阴影，图文叠加或左右结构。
+
+### 2.2 筛选栏 (Filter Bar)
+- **位置**: 内容流上方。
+- **元素**:
+  - **Tabs**: "推荐", "最新", "热门"。
+  - **Tag List**: 常用分类标签（如：技术、生活、设计...），支持横向滚动。
+- **样式**: `flex items-center space-x-4 py-4 border-b border-slate-200 mb-4`。
+
+### 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.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` 卡片。
+
+## 3. 交互与状态 (Interactions)
+- **Hover**: 列表卡片 Hover 时出现轻微上浮或阴影加深。
+- **点击**: 点击卡片任意区域跳转至 `内容详情页`。
+- **关注**: 在推荐租户模块直接点击 "关注"，需判断登录状态。
--- a/docs/design/portal/PAGE_MISC.md
+++ b/docs/design/portal/PAGE_MISC.md
@@ -0,0 +1,38 @@
+# 页面设计: 帮助与错误页 (Misc)
+
+> **路由**:
+> - 帮助中心: `/help`
+> - 条款: `/terms`, `/privacy`
+> - 错误: `/404`, `/500`
+>
+> **布局**: `LayoutMain` (帮助/条款) / `LayoutSimple` (错误页)
+
+## 1. 帮助中心 (Help Center)
+
+### 1.1 首页 (/help)
+- **搜索大图 (Hero)**: 背景图 + 大搜索框 "遇到什么问题？"。
+- **常见问题 (FAQ)**: Grid 布局，每项为 "Q: 问题... A: 简答..."。
+- **分类导航**: 卡片入口 (如 "账号问题", "支付问题", "内容发布")。
+- **联系客服**: 底部 Banner，展示客服电话或在线咨询按钮。
+
+### 1.2 帮助详情页
+- 左侧分类导航树。
+- 右侧富文本文章。
+- 底部反馈: "此文是否有帮助？ [是] [否]"。
+
+## 2. 条款页面 (Legal)
+- **布局**: 居中单栏，适合阅读长文。
+- **样式**: `prose prose-slate mx-auto max-w-3xl py-10`。
+- **导航**: 简单的 Tab 或 侧边 Anchor 导航 (条款、隐私、免责)。
+
+## 3. 错误页面 (Error Pages)
+
+### 3.1 404 Not Found
+- **视觉**: 插画 (如迷路的人、空的盒子)。
+- **文案**: "页面走丢了 (Page Not Found)"。
+- **操作**: [返回首页] [返回上一页]。
+
+### 3.2 500 Server Error
+- **视觉**: 插画 (如正在维修的机器人)。
+- **文案**: "服务器开小差了，请稍后再试"。
+- **操作**: [刷新页面] [联系客服]。
--- a/docs/design/portal/PAGE_ORDER.md
+++ b/docs/design/portal/PAGE_ORDER.md
@@ -0,0 +1,39 @@
+# 页面设计: 订单流程 (Order Flow)
+
+> **路由**:
+> - 确认订单: `/checkout`
+> - 支付: `/payment`
+> - 详情: `/me/orders/:id`
+
+## 1. 确认订单页 (Checkout)
+- **步骤条**: 1.确认订单 -> 2.支付 -> 3.完成。
+- **收货地址 (如需)**:
+  - 卡片网格展示已有地址。
+  - [+ 新增地址] 虚线框按钮。
+- **商品清单**:
+  - 列表: 图片 | 标题 | 单价 | 数量 | 小计。
+- **优惠/备注**:
+  - 优惠券选择器。
+  - 买家留言输入框。
+- **底部结算栏 (Sticky Bottom)**:
+  - 只有 "合计金额"。
+  - [提交订单] 大按钮。
+
+## 2. 收银台/支付页 (Cashier)
+- **倒计时**: "请在 15:00 内完成支付，超时将取消"。
+- **订单金额**: 大字体显示。
+- **支付方式**:
+  - Radio List: 微信支付、支付宝、余额支付。
+  - 选中会有高亮边框。
+- **扫码区**: (PC端) 展示二维码，轮询支付状态。
+
+## 3. 订单详情页 (Order Detail)
+- **状态栏**:
+  - 顶部大卡片。
+  - 当前状态 (如 "待发货") + 进度条 (下单 -> 付款 -> 发货 -> 完成)。
+  - 对应操作按钮: [申请退款] [确认收货] [去评价]。
+- **信息模块**:
+  - **收货信息**: 人名、电话、地址。
+  - **订单信息**: 订单号、创建时间、支付时间。
+  - **商品列表**: 复用清单组件。
+  - **费用明细**: 商品总价 - 优惠 + 运费 = 实付。
--- a/docs/design/portal/PAGE_SEARCH.md
+++ b/docs/design/portal/PAGE_SEARCH.md
@@ -0,0 +1,48 @@
+# 页面设计: 搜索结果 (Search Result)
+
+> **路由**: `/search?keyword=abc`
+> **布局**: `LayoutMain`
+
+## 1. 页面结构 (Structure)
+
+```text
+[      Search Bar (Persistent in Header)       ]
+------------------------------------------------
+[   Filter Tabs (All / Article / User / Tag)   ]
+------------------------------------------------
+|                    |                         |
+|   Result List      |     Related / Hot       |
+|      (70%)         |        (30%)            |
+|                    |                         |
+```
+
+## 2. 详细设计 (Detailed Specs)
+
+### 2.1 顶部筛选区 (Filter Header)
+- **搜索反馈**: "找到约 **120** 个与 'AI' 相关的结果"。
+- **Tab 分类**:
+  - **综合**: 混合展示内容、用户、标签。
+  - **文章/内容**: 纯内容列表。
+  - **用户/租户**: 匹配的创作者。
+  - **标签**: 匹配的 Tags。
+- **高级筛选 (Dropdown)**:
+  - **时间**: 不限 / 一天内 / 一周内 / 一月内。
+  - **排序**: 相关度 (默认) / 最新发布 / 最多浏览。
+
+### 2.2 结果列表区 (Result List - Left)
+- **内容卡片**:
+  - 标题中匹配的 **关键字高亮** (如红色或加粗)。
+  - 展示摘要、封面图（如有）、元数据。
+- **用户卡片** (在综合搜索中穿插或独立 Tab):
+  - 横向布局：头像 | 名称 + 简介 | [关注] 按钮。
+- **无结果状态 (Empty State)**:
+  - 插画提示 "未找到相关内容"。
+  - 建议: "尝试简化关键词" 或 "看看热门推荐"。
+
+### 2.3 右侧辅助区 (Right Sidebar)
+- **热门搜索 (Hot Search)**: 词云或列表 (1. DeepSeek, 2. AI 绘画...)。
+- **搜索历史 (Search History)**: (仅登录且开启记录时显示) 显示最近 5 条，支持删除。
+
+## 3. 交互
+- **输入框联动**: 页面顶部的全局搜索框内容应与 URL `keyword` 参数保持同步。
+- **Enter 键**: 触发搜索跳转。
--- a/docs/design/portal/PAGE_TENANT_HOME.md
+++ b/docs/design/portal/PAGE_TENANT_HOME.md
@@ -0,0 +1,56 @@
+# 页面设计: 租户/个人主页 (Tenant Profile)
+
+> **路由**: `/tenants/:tenantId`
+> **布局**: `LayoutMain`
+> **结构**: 封面式头部 + 内容列表
+
+## 1. 页面结构 (Structure)
+
+类似社交媒体的个人主页设计，强调品牌形象展示。
+
+```text
+[            Cover Image (Full Width/Boxed)              ]
+[            Profile Header (Info & Stats)               ]
+----------------------------------------------------------
+|   Tabs (Home/All/Series)   |   Search in Tenant        |
+----------------------------------------------------------
+[                  Content Grid / List                   ]
+```
+
+## 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)、认证标识、一句话简介。
+  - **数据**: 关注者数量、内容数量、获赞数。
+  - **操作**: 右侧 [关注] [私信] 按钮。
+
+### 2.2 导航与筛选 (Navigation)
+- **位置**: 信息栏下方。
+- **Tabs**:
+  - "主页" (精选/置顶)
+  - "全部内容"
+  - "专栏/系列"
+  - "简介/关于"
+- **样式**: `border-b border-slate-200`，选中项底部高亮 `border-primary-600`。
+
+### 2.3 内容展示区 (Content Area)
+- **布局**:
+  - **默认**: 网格布局 `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6`。
+  - **列表模式**: 可选切换。
+- **卡片样式**:
+  - 复用首页的卡片组件，但可能移除作者信息（因为已经在作者主页了），强调封面和标题。
+
+### 2.4 "关于" Tab (About Tab)
+- 如果切换到 "简介/关于" Tab：
+  - 展示详细的企业/个人介绍。
+  - 联系方式、地图、资质证书等。
+
+## 3. 特殊状态
+- **未发布内容**: 展示空状态插画 "作者很懒，还没有发布内容"。
+- **私密/封禁**: 展示 403/404 提示。
--- a/docs/design/portal/PAGE_USER_CENTER.md
+++ b/docs/design/portal/PAGE_USER_CENTER.md
@@ -0,0 +1,52 @@
+# 页面设计: 个人中心 (User Center)
+
+> **路由**: `/me/*`
+> **布局**: `LayoutMain`
+> **结构**: 侧边栏导航布局 (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       |                                   |
+```
+
+## 2. 侧边栏导航 (Sidebar Nav)
+- **用户信息**: 顶部展示小头像 + 昵称。
+- **菜单组**:
+  - **交易中心**: 我的订单、我的钱包、售后记录。
+  - **内容管理**: 我的收藏、浏览历史。
+  - **账号设置**: 个人资料、账号安全(密码/绑定)、收货地址。
+  - **租户入口**: (如果是租户管理员) [切换到创作者中心] 按钮。
+- **样式**: 选中项背景高亮 `bg-primary-50 text-primary-600 border-r-2 border-primary-600`。
+
+## 3. 核心子页面设计
+
+### 3.1 个人资料 (Profile)
+- **表单**:
+  - 头像上传 (点击更换)。
+  - 昵称、简介 (Textarea)。
+  - 性别、生日 (Datepicker)。
+- **操作**: [保存修改] 按钮。
+
+### 3.2 账号安全 (Security)
+- **列表项**:
+  - **登录密码**: 已设置 [修改]。
+  - **手机绑定**: 138****8888 [更换]。
+  - **邮箱绑定**: 未绑定 [绑定]。
+  - **注销账号**: 红色链接，需二次确认。
+
+### 3.3 我的收藏 (Favorites)
+- **布局**: 网格或列表展示收藏的内容。
+- **操作**: [取消收藏] 按钮，支持批量管理。
+
+### 3.4 浏览历史 (History)
+- **时间轴**: 按日期分组 (今天 / 昨天 / 更早)。
+- **列表**: 简单的标题 + 时间列表。
+- **操作**: [清空历史]。