67 lines
2.7 KiB
Markdown
67 lines
2.7 KiB
Markdown
# 页面设计: 租户申请/成为创作者 (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` 蓝框提示。
|