109 lines
8.0 KiB
Markdown
109 lines
8.0 KiB
Markdown
# 创作者中心（`/creator`）设计 / Creator Center Design
|
||
|
||
- **状态**：设计已批准（2026-09-30；入口=主导航、教程卡=占位+链现有文档、数据卡按登录态分流，逐项与维护者确认），待 spec 审阅后转实现计划。
|
||
- **路线图**：维护者直接需求，未列入既有波次（P1–P8）；仅在文末索引登记。
|
||
- **范围定性**：纯前端新页面（crearte 仓）；**零后端、零数据迁移、crearte-deploy 零改动**。
|
||
|
||
## 1. 背景与意图
|
||
|
||
站内投稿入口埋在登录后的用户下拉菜单里，主导航只有「作品 / 文档」：潜在创作者从任何公开页面都看不到"成为创作者"的路径；已投稿的创作者也没有回看自己作品数据（浏览 / 下载 / 评分）的承载页。
|
||
|
||
本子项目先搭骨架：一个首页样式的**创作者中心**（hero + 两张卡）——「作品数据」占位（后续接真实数据）与「创作教程」占位（教程内容维护者仍在构思，文档可能大规模重构，本轮只做占位并链向现有文档）。
|
||
|
||
成功标准：主导航出现第三个 tab；`/creator` 渲染 hero 与两张卡；未登录时数据卡引导登录并可回跳，已登录显示建设中文案；noauth 部署下页面可达且不出现死链。
|
||
|
||
约束（与维护者确认）：
|
||
|
||
- 入口放页头主导航（「作品」「文档」旁），匿名可进。
|
||
- 教程内容定稿前，教程卡只放占位说明 + 链到现有《提交作品指南》。
|
||
- 数据卡是纯占位：不接任何真实聚合，不做图表。
|
||
|
||
## 2. 方案选型
|
||
|
||
| 方案 | 内容 | 取舍 |
|
||
|---|---|---|
|
||
| **A. 独立新视图 + 主导航 tab（已选）** | 新路由 `/creator`（无参数）、新 `CreatorCenterView`、`AppHeader` 加第三个 tab | 与既有信息架构同构（作品 / 文档 / 创作者中心）；页面无参数无 404 面；后续数据卡、教程都可原地替换 |
|
||
| B. 收进登录后用户下拉菜单 | 与「提交作品」并列 | 仅登录可见，潜在创作者看不到路径；维护者已明确否 |
|
||
| C. 并入 `/docs` 文档流 | 教程进文档 sidebar，数据卡无处安放 | 数据卡无归属；且文档即将重构，现在挂进去白做 |
|
||
|
||
卡内三态（`authEnabled` 未登录 / 已登录 / noauth）直接用既有 `authEnabled` + `session`（`@/auth`，`AppHeader` 同款用法），不引入新的状态管理。
|
||
|
||
## 3. 设计详述
|
||
|
||
### 3.1 路由与导航
|
||
|
||
- `src/app/router/index.ts` 注册 `{ path: '/creator', name: 'creator', component: () => import('@/views/CreatorCenterView.vue') }`，**不加** `meta.requiresAuth`（公开页，登录态只在卡内部分流）。
|
||
- `src/app/components/AppHeader.vue`：
|
||
- 新增 `onCreator` computed（`route.name === 'creator'`）。
|
||
- 主导航加第三个 `RouterLink`「创作者中心」，激活样式与「作品 / 文档」完全一致（`border-b-accent-ink` + `aria-current="page"`）。
|
||
- 贴纸（sticker）逻辑不变：creator 页回落默认 `HOST YOUR CREATIONS`。
|
||
|
||
### 3.2 页面结构（`src/app/views/CreatorCenterView.vue`）
|
||
|
||
复刻 `LandingView.vue` 的墨纸语言：同类 class，不引新 design token、不改 `main.css`。
|
||
|
||
- **hero 区**（`border-[3px] border-ink bg-surface px-6 py-10 text-center shadow-hard sm:px-10 sm:py-14`）：
|
||
- 徽章「创作者」（`bg-ink` 反转块，同首页「创艺」徽章样式）；
|
||
- 标题「创作者中心」（`font-display` 大字）；
|
||
- 等宽字体标语行 `SHARE YOUR CREATIONS`；
|
||
- 分隔条 + 说明行「把你的作品分享给所有人」；
|
||
- 两个按钮：「提交作品」→ `/submit/new`（该路由 `requiresAuth`，未登录由既有守卫转 `/login?next=/submit/new`，无需本页处理）、「投稿指南」→ `/docs/contribute`。
|
||
- **卡片行**（`mt-8 flex flex-col gap-4 sm:flex-row`，与首页「投稿与文档」行同款；外层 `sr-only` h2「创作者中心」保持大纲结构）：
|
||
- 卡 1 **作品数据**（占位），三态：
|
||
- `authEnabled && !user`：「登录后即可查看您作品的数据。」+ 链接「登录」→ `/login?next=/creator`；
|
||
- `authEnabled && user`：「数据面板正在建设中。上线后将展示您作品的浏览、下载与评分。」；
|
||
- `!authEnabled`（noauth 部署）：「数据面板正在建设中。」——**不给登录链接**（该模式无账号体系，链过去会被守卫打回首页）。
|
||
- 卡 2 **创作教程**（占位）：「教程整理中，敬请期待。」+「投稿流程、打包规范与过审要点正在重新整理，完成后在本页发布。」+ 链接「《提交作品指南》」→ `/docs/contribute`（先行阅读）。
|
||
- 卡片与链接样式复用首页卡片同款 class（`flex-1 border-2 border-ink bg-surface p-4 shadow-hard-sm`、`h3 text-sm font-black`、正文 `mt-2 text-xs leading-relaxed text-ink-soft`、链接 `underline`）。
|
||
|
||
### 3.3 数据流与状态
|
||
|
||
- **无数据请求**：页面不调 `repo`，不用 `useAsync`；无加载 / 失败态，不套 `StatePanel`（与首页 hero 区一致）。
|
||
- 登录态：`import { authEnabled, session } from '@/auth'`，`user = computed(() => session.state.user)`；`authEnabled` 为构建期常量（`VITE_API_BASE_URL` 判空，`src/app/content/index.ts` 同款判定）。
|
||
- 不新增路由守卫、不新增 store、不新增 composable。
|
||
|
||
### 3.4 边界与错误处理
|
||
|
||
- 无异步 ⇒ 无错误面；`/creator` 无参数 ⇒ 无 404 面。
|
||
- noauth 部署：页面可达，数据卡降级为纯建设中文案（无登录死链）。
|
||
- 登录链接的 `next` 经 `LoginView` 既有 `sanitizeNext` 处理，只接受站内路径（`/creator` 合法）。
|
||
|
||
## 4. 测试
|
||
|
||
- **Playwright 新增 `src/e2e/creator.spec.ts`**：
|
||
1. 主导航存在「创作者中心」tab；`/creator` 上该 tab `aria-current="page"`；hero 与两张卡渲染。
|
||
2. 未登录（默认 context）：数据卡含「登录」链接，`href="/login?next=/creator"`。
|
||
3. 已登录（`seedSession`，参考 `auth.spec.ts` 既有用法）：数据卡显示建设中文案、**无**登录链接。
|
||
4. 教程卡含指向 `/docs/contribute` 的链接。
|
||
5. noauth 配置（`playwright.noauth.config.ts`）：`/creator` 可达、数据卡无登录链接。
|
||
- **无 Vitest 单测**：视图只有登录态分支、无业务逻辑，e2e 覆盖更值（作者页有过滤逻辑故有单测，本页无可测逻辑）。
|
||
- 门槛：`vue-tsc --noEmit` 全量绿；默认 + noauth 两套 e2e 全量绿（存量不回归）。
|
||
|
||
## 5. 影响文件（预估）
|
||
|
||
| 文件 | 改动 |
|
||
|---|---|
|
||
| `src/app/router/index.ts` | 注册 `/creator` |
|
||
| `src/app/views/CreatorCenterView.vue` | 新建 |
|
||
| `src/app/components/AppHeader.vue` | 主导航加 tab + `onCreator` |
|
||
| `src/e2e/creator.spec.ts` | 新建 |
|
||
| `docs/CHANGELOG.md`（crearte 仓） | 0.17.0 双语条目（master 顶部为 0.16.0，本功能自 master 切分支） |
|
||
| `docs/ROADMAP.md`（wrapper 仓） | 文末索引登记本 spec 与实现计划 |
|
||
|
||
## 6. 验收标准
|
||
|
||
1. 主导航出现「创作者中心」tab，激活态与「作品 / 文档」一致。
|
||
2. `/creator` 渲染 hero + 两张卡，视觉语言与首页一致（同类边框 / 阴影 / 字号，零新 token）。
|
||
3. 三态分流正确：未登录给登录链接（`next=/creator`）；已登录给建设中文案；noauth 可达且无登录死链。
|
||
4. 教程卡占位文案 + `/docs/contribute` 链接就位。
|
||
5. `e2e/creator.spec.ts` 新增用例通过，且存量全量（vitest + 默认 / noauth e2e + `vue-tsc`）全绿。
|
||
6. `crearte-server` / `crearte-deploy` 零 diff。
|
||
|
||
## 7. 明确不做（Out of scope）
|
||
|
||
- **作品数据面板的真实聚合**：浏览 / 下载 / 评分的查询、图表、口径——后续数据卡范围，需先定数据来源与埋点。
|
||
- **教程正文**：待维护者文档重构定稿后另行立项；本轮的占位卡即为将来的替换点。
|
||
- 「我的提交」入口从用户下拉菜单迁移 / 合并（`/submit` 留在原处）。
|
||
- 导航贴纸计数、hero 统计条等首页既有元件的复制。
|
||
- 任何后端 / 部署 / 数据迁移改动。
|