feat: 更新租户申请和管理页面的路由及布局信息
This commit is contained in:
@@ -1,7 +1,6 @@
|
||||
# 页面设计: 租户申请/成为创作者 (Tenant Application)
|
||||
|
||||
> **路由**: `/me/tenant/apply`
|
||||
> **布局**: `LayoutMain` (头部增加引导展示)
|
||||
> **路由**: `/creator/apply` > **布局**: `LayoutMain` (头部增加引导展示)
|
||||
> **入口**: `TopNavbar` 右侧 [成为创作者] 按钮 (仅对非租户显示)
|
||||
|
||||
## 1. 流程结构 (Flow)
|
||||
@@ -17,16 +16,19 @@
|
||||
## 2. 详细设计 (Detailed Specs)
|
||||
|
||||
### 2.1 入驻引导页 (Landing)
|
||||
|
||||
用户首次点击 [成为创作者] 时展示。
|
||||
- **视觉 (Hero)**:
|
||||
|
||||
- **视觉 (Hero)**:
|
||||
- 简洁、大气的插画/背景，文案: "开启您的内容创作之旅"。
|
||||
- 核心权益 (3个大图标):
|
||||
- 核心权益 (3 个大图标):
|
||||
1. **内容变现**: 设置付费阅读，直接获得收益。
|
||||
2. **租户主页**: 拥有独立的品牌/个人展示空间。
|
||||
3. **数据管理**: 清晰的内容与订单统计。
|
||||
- **操作**: 底部显著的 [立即申请] 大按钮。
|
||||
|
||||
### 2.2 申请表单页 (Application Form)
|
||||
|
||||
**容器**: `max-w-3xl mx-auto bg-white rounded-lg shadow-sm p-10 my-8`。
|
||||
|
||||
- **表单字段 (适老化大输入框)**:
|
||||
@@ -34,14 +36,15 @@
|
||||
2. **租户头像**: (必填) 品牌或个人头像。
|
||||
3. **内容领域**: (单选) 如科技、生活、养老、医疗等。
|
||||
4. **简介/Slogan**: (必填) 一句话介绍。
|
||||
5. **资质材料 (可选/必填)**:
|
||||
- 针对个人：身份证件照片。
|
||||
- 针对机构：营业执照/相关资质。
|
||||
- **交互**: 图片上传组件，带大面积点击区和 [查看范例] 链接。
|
||||
5. **资质材料 (可选/必填)**:
|
||||
- 针对个人：身份证件照片。
|
||||
- 针对机构：营业执照/相关资质。
|
||||
- **交互**: 图片上传组件，带大面积点击区和 [查看范例] 链接。
|
||||
- **协议勾选**: `[ ] 我已阅读并同意《创作者入驻协议》` (新窗口打开)。
|
||||
- **操作**: [提交审核] (Primary Button, h-14, text-xl)。
|
||||
|
||||
### 2.3 审核结果页 (Review Status)
|
||||
|
||||
- **提交成功**:
|
||||
- 绿色对勾图标 + "申请已提交"。
|
||||
- 文案: "平台将在 1-3 个工作日内完成审核，结果将通过系统通知告知您。"。
|
||||
@@ -55,7 +58,7 @@
|
||||
|
||||
## 3. 交互与权限
|
||||
|
||||
- **按钮显隐**:
|
||||
- **按钮显隐**:
|
||||
- 已有租户身份的用户，[成为创作者] 按钮替换为 [进入管理后台]。
|
||||
- 游客点击 [成为创作者] 按钮，弹出登录提示。
|
||||
- **状态持久化**:
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
# 页面设计: 租户/个人主页 (Tenant Profile)
|
||||
|
||||
> **路由**: `/tenants/:tenantId`
|
||||
> **布局**: `LayoutMain` (Header + Footer)
|
||||
> **路由**: `/t/:tenantId` > **布局**: `LayoutMain` (Header + Footer)
|
||||
> **结构**: 固定宽度 (1280px) 封面头部 + 切换内容区
|
||||
|
||||
## 1. 页面结构 (Structure)
|
||||
@@ -25,7 +24,8 @@
|
||||
## 2. 详细设计 (Detailed Specs)
|
||||
|
||||
### 2.1 头部区域 (Profile Header)
|
||||
- **封面图 (Cover)**:
|
||||
|
||||
- **封面图 (Cover)**:
|
||||
- 尺寸: **1280x320px** (4:1 比例)。
|
||||
- **适配**: `object-cover`，定位 `center center`。
|
||||
- **兜底**: 若无图片，使用品牌色或随机几何渐变背景。
|
||||
@@ -36,16 +36,18 @@
|
||||
- **通知策略**: 关注成功后默认开启“更新动态”站内信提醒。首次关注显示轻量 Popover 提示:"已为您开启更新提醒，[去设置] 可调整"。
|
||||
- **分享入口**: 更多操作按钮 (`...`) 中包含 [分享主页]，同时页面右下角常驻悬浮分享按钮 (FAB)。
|
||||
- **分享模板**: "向你推荐一个优质创作者：[作者名] - [简介摘要] [URL]"。
|
||||
- **统计数据交互**:
|
||||
- **统计数据交互**:
|
||||
- **关注/获赞**: 点击弹出对应列表浮窗 (Modal)，支持快速浏览。
|
||||
- **内容**: 点击自动切换至 "全部内容" Tab。
|
||||
|
||||
### 2.2 导航与筛选 (Sticky Navigation & Search)
|
||||
|
||||
...
|
||||
|
||||
### 2.3 内容展示逻辑 (Content Area)
|
||||
|
||||
#### B. "全部内容" Tab (All Posts)
|
||||
|
||||
- **卡片内容类型标识 (Media Markers)**:
|
||||
- **位置**: 封面图左下角。
|
||||
- **视频**: `Play Icon` + `12:05` (时长)。
|
||||
@@ -59,20 +61,25 @@
|
||||
- **兜底**: 若价格数据异常缺失，默认显示为 "免费" 或 "价格待定"。
|
||||
|
||||
### 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。
|
||||
- **订阅提醒**: 未关注用户滚到底部时弹出轻量订阅 Toast。
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
# 页面设计: 租户管理/创作者中心 (Tenant Management)
|
||||
|
||||
> **路由**: `/me/management/*`
|
||||
> **布局**: `LayoutMain` (复用门户布局，采用侧边栏分栏结构)
|
||||
> **路由**: `/creator/*` > **布局**: `LayoutMain` (复用门户布局，采用侧边栏分栏结构)
|
||||
> **结构**: 与个人中心一致的左侧导航布局，保持视觉与操作连续性
|
||||
|
||||
## 1. 布局结构 (Structure)
|
||||
@@ -9,7 +8,7 @@
|
||||
管理模块直接集成在 C 端门户中，作为“创作者中心”存在。
|
||||
|
||||
- **导航栏**: 复用全局 `TopNavbar`，用户可通过头像下拉菜单的“管理入口”进入。
|
||||
- **页面框架**:
|
||||
- **页面框架**:
|
||||
- **左侧 (Sidebar)**: 独立于个人中心的管理菜单（内容管理、订单管理、租户设置）。
|
||||
- **右侧 (Main)**: 管理列表或表单容器，背景为 `bg-white` 圆角卡片。
|
||||
|
||||
@@ -17,7 +16,8 @@
|
||||
|
||||
## 2. 核心功能模块
|
||||
|
||||
### 2.1 管理概览 (Dashboard) `/me/management`
|
||||
### 2.1 管理概览 (Dashboard) `/creator`
|
||||
|
||||
- **核心指标卡片 (Key Metrics)**:
|
||||
- **总关注用户**: 显示累计粉丝数及较前一日的增长变化 (+/-)。
|
||||
- **订单收益**:
|
||||
@@ -28,12 +28,13 @@
|
||||
- [待处理订单]: 待发货或退款申请中的实时数量提示。
|
||||
- **内容表现**: 累计阅读量 (PV) 与 获赞总数。
|
||||
- **趋势分析图表 (Charts)**:
|
||||
- **收益/订单趋势**: 支持切换 [近7天] / [近30天] 的柱状图，直观展示收入波动。
|
||||
- **收益/订单趋势**: 支持切换 [近 7 天] / [近 30 天] 的柱状图，直观展示收入波动。
|
||||
- **粉丝增长曲线**: 折线图展示每日新增粉丝趋势。
|
||||
- **快捷入口**: [发布新内容] [处理退款申请]。
|
||||
- **公告通知**: 创作者专属公告（如：平台分成比例调整通知）。
|
||||
|
||||
### 2.2 内容管理 (Content Management) `/me/management/contents`
|
||||
### 2.2 内容管理 (Content Management) `/creator/contents`
|
||||
|
||||
- **列表展示**:
|
||||
- **字段**: 封面 | **曲种/剧目** | 价格 | 状态 | 阅读/收益 | 操作。
|
||||
- **状态说明 (Audit Status)**:
|
||||
@@ -44,16 +45,16 @@
|
||||
- **发布编辑器 (WYSIWYG Editor - 戏曲定制版)**:
|
||||
- **头部元数据 (Metadata)**:
|
||||
- **曲种**: (必选) 下拉选择后台配置的曲种 (如 京剧/越剧)。
|
||||
- **标题组合**:
|
||||
- [剧目名] (必填, 如《锁麟囊》)
|
||||
- [选段名] (可选, 如"春秋亭")
|
||||
- **标题组合**:
|
||||
- [剧目名] (必填, 如《锁麟囊》)
|
||||
- [选段名] (可选, 如"春秋亭")
|
||||
- [附加信息] (可选, 如"程砚秋")
|
||||
- *预览*: 自动拼接展示 `《锁麟囊》春秋亭 (程砚秋)`。
|
||||
- _预览_: 自动拼接展示 `《锁麟囊》春秋亭 (程砚秋)`。
|
||||
- **工具栏功能**:
|
||||
- **基础排版**: H1/H2/H3, 加粗, 下划线, 列表, 居中/对齐。
|
||||
- **戏曲专用**:
|
||||
- **剧本模式**: 专门的 [角色: 台词] 格式块，自动悬挂缩进。
|
||||
- **唱段属性**: 插入音频时可选填 **定调 (Key)** (如 C大调/D大调) 和 **板式** (如 原板/流水)。
|
||||
- **唱段属性**: 插入音频时可选填 **定调 (Key)** (如 C 大调/D 大调) 和 **板式** (如 原板/流水)。
|
||||
- **注音工具**: 支持给生僻字添加拼音标注 (Ruby)，解决尖团音等阅读障碍。
|
||||
- **媒体 (仅支持上传)**: 图片, 视频 (支持断点续传), 音频, 附件。**不支持外链**。
|
||||
- **操作**: 撤销, 重做, 清除格式, 插入分割线。
|
||||
@@ -65,25 +66,26 @@
|
||||
- **字段**:
|
||||
- **封面图**: (必填) 点击上传，支持裁切预览。
|
||||
- **摘要**: (可选) 自动提取前 50 字或手动输入。
|
||||
- **戏曲属性**:
|
||||
- **戏曲属性**:
|
||||
- **主定调**: 下拉选择 (C/D/E/F/G/A/B 等)。
|
||||
- **行当**: 生/旦/净/末/丑。
|
||||
- **标签**: (可选) 搜索并多选，支持新增。
|
||||
- **价格策略**:
|
||||
- **价格策略**:
|
||||
- Radio Group: [免费] | [付费] | [会员免费]。
|
||||
- **付费设置**:
|
||||
- **价格**: 输入金额 (¥)。
|
||||
- **试看/试听**:
|
||||
- **试看/试听**:
|
||||
- Switch 开关 [开启试看]。
|
||||
- 输入时长: 默认 `60` 秒 (支持自定义，针对戏曲长视频建议设为 3-5 分钟)。
|
||||
- **操作**: [存草稿] [立即发布]。
|
||||
|
||||
### 2.3 订单管理 (Order Management) `/me/management/orders`
|
||||
### 2.3 订单管理 (Order Management) `/creator/orders`
|
||||
|
||||
- **列表展示**:
|
||||
- 记录所有购买该租户内容的订单。
|
||||
- **字段**: 订单号 | 内容标题 | 买家昵称 | 实付金额 | 下单时间 | 状态。
|
||||
- **管理干预 (Order Intervention)**:
|
||||
- **状态流转**:
|
||||
- **状态流转**:
|
||||
- 正常: `已支付` -> `已完成`。
|
||||
- 退款: `退款申请中` (买家发起) -> `已退款` (同意) / `退款拒绝`。
|
||||
- **操作按钮**:
|
||||
@@ -91,21 +93,24 @@
|
||||
- [处理退款]: (仅针对退款申请) 弹出审核框，选择 [同意退款] 或 [拒绝]。
|
||||
- [发送私信]: 快速联系买家。
|
||||
|
||||
### 2.4 租户资料设置 (Tenant Settings) `/me/management/settings`
|
||||
### 2.4 租户资料设置 (Tenant Settings) `/creator/settings`
|
||||
|
||||
- **内容**:
|
||||
- 修改租户主页的封面图 (Cover)、名称、简介。
|
||||
- 资质材料上传（用于等级提升或认证）。
|
||||
- **同步**: 此处修改后，租户公开主页 (`/tenants/:id`) 同步更新。
|
||||
- **同步**: 此处修改后，租户公开主页 (`/t/:id`) 同步更新。
|
||||
|
||||
---
|
||||
|
||||
## 3. 交互细节与权限
|
||||
|
||||
### 3.1 权限拦截
|
||||
- **访问控制**: 非租户管理员访问 `/me/management` 直接跳转至“租户申请”页或 403。
|
||||
|
||||
- **访问控制**: 非租户管理员访问 `/creator` 直接跳转至“租户申请”页或 403。
|
||||
- **身份显示**: 在管理页面顶部显著位置显示“当前正在管理：[租户名称]”，防止多账号混淆。
|
||||
|
||||
### 3.2 适老化管理体验
|
||||
|
||||
- **大按钮**: 所有的“发布”、“编辑”按钮均采用 `h-12` 以上高度。
|
||||
- **状态感知**: 每一个操作（如保存草稿）都有明确的 Toast 反馈。
|
||||
- **自动保存**: 编辑器支持本地离线保存，防止误关闭导致内容丢失。
|
||||
|
||||
Reference in New Issue
Block a user