feat: add pages

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。