diff --git a/docs/plans/2026-09-30-creator-center.md b/docs/plans/2026-09-30-creator-center.md new file mode 100644 index 0000000..e609d3c --- /dev/null +++ b/docs/plans/2026-09-30-creator-center.md @@ -0,0 +1,398 @@ +# 创作者中心(/creator)Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** 在 crearte 前端新增首页样式的「创作者中心」页(`/creator`):hero + 「作品数据」占位卡(按登录态三态分流)+「创作教程」占位卡(链现有文档),页头主导航加第三个 tab。 + +**Architecture:** 纯前端改动——一个新路由、一个新视图(复刻 `LandingView.vue` 的墨纸 class 体系,零新 token)、`AppHeader` 加 tab;登录态用既有 `authEnabled` + `session`(`@/auth`);页面无数据请求、无加载/失败态。测试走 Playwright e2e(默认配置 + noauth 配置),TDD:先写失败 e2e 再实现。 + +**Tech Stack:** Vue 3 ` + + +``` + +- [ ] **Step 5: 注册路由** + +`src/app/router/index.ts`,在 `home` 路由行之后插入: + +```ts + { path: '/creator', name: 'creator', component: () => import('@/views/CreatorCenterView.vue') }, +``` + +- [ ] **Step 6: AppHeader 加 tab** + +`src/app/components/AppHeader.vue` script 段,在 `onDocs` 行之后加: + +```ts +const onCreator = computed(() => route.name === 'creator') +``` + +template 主导航 `` 之前插入: + +```html + 创作者中心 +``` + +- [ ] **Step 7: 运行确认通过** + +Run: `npx playwright test e2e/creator.spec.ts` +Expected: PASS(1 passed) + +- [ ] **Step 8: 提交** + +```bash +cd crearte-monorepo/crearte +git add src/app/views/CreatorCenterView.vue src/app/router/index.ts src/app/components/AppHeader.vue src/e2e/creator.spec.ts +git commit -m "feat(creator): /creator route, header tab and hero — landing-style skeleton" +``` + +--- + +### Task 2: 作品数据卡(登录态三态分流) + +**Files:** +- Modify: `src/app/views/CreatorCenterView.vue`(script 加 `user` computed;template 在 hero 后加卡片行 + 「作品数据」卡) +- Modify: `src/e2e/creator.spec.ts`(追加第 2、3 条用例) +- Modify: `src/e2e/noauth.spec.ts`(在既有用例末尾追加 `/creator` 断言) + +**Interfaces:** +- Consumes: Task 1 的 `/creator` 路由与视图;`authEnabled` / `session`(`@/auth`,`AppHeader.vue` 同款用法) +- Produces: 卡片标题「作品数据」(h3);未登录时卡内「登录」链接 `href="/login?next=%2Fcreator"` + +- [ ] **Step 1: 写失败的 e2e(第 2、3 条用例)** + +`src/e2e/creator.spec.ts` 头部 import 改为: + +```ts +import { expect, test } from '@playwright/test' +import { seedSession } from './helpers' +``` + +文件末尾追加: + +```ts +test('数据卡:未登录给登录引导且 next 回跳 /creator', async ({ page }) => { + await page.goto('http://localhost:4173/creator') + + const card = page.getByRole('heading', { name: '作品数据' }).locator('..') + await expect(card.getByText('登录后即可查看您作品的数据。')).toBeVisible() + await expect(card.getByRole('link', { name: '登录' })).toHaveAttribute('href', '/login?next=%2Fcreator') +}) + +test('数据卡:已登录显示建设中文案且无登录链接', async ({ page }) => { + await seedSession(page) + await page.goto('http://localhost:4173/creator') + + const card = page.getByRole('heading', { name: '作品数据' }).locator('..') + await expect(card.getByText('数据面板正在建设中。上线后将展示您作品的浏览、下载与评分。')).toBeVisible() + await expect(card.getByRole('link', { name: '登录' })).toHaveCount(0) +}) +``` + +`src/e2e/noauth.spec.ts` 既有用例末尾(`expect(authRequests).toEqual([])` 之前)追加: + +```ts + await page.goto('/creator') + await expect(page.getByRole('heading', { level: 1, name: '创作者中心' })).toBeVisible() + await expect(page.getByText('数据面板正在建设中。', { exact: true })).toBeVisible() + await expect(page.getByRole('link', { name: '登录' })).toHaveCount(0) +``` + +- [ ] **Step 2: 运行确认失败** + +Run: `npx playwright test e2e/creator.spec.ts` +Expected: FAIL——「作品数据」heading 不存在。 + +- [ ] **Step 3: 实现数据卡** + +`src/app/views/CreatorCenterView.vue` script 段改为: + +```vue + +``` + +template 在 hero `` 之后追加(本 Task 先只放数据卡,教程卡在 Task 3 加): + +```html +
+

创作者中心

+
+

作品数据

+

+ + + +

+
+
+``` + +- [ ] **Step 4: 运行确认通过(默认配置)** + +Run: `npx playwright test e2e/creator.spec.ts` +Expected: PASS(3 passed) + +- [ ] **Step 5: 运行 noauth 配置确认通过** + +Run: `npx playwright test --config playwright.noauth.config.ts` +Expected: PASS(1 passed,含新增的 `/creator` 断言) + +- [ ] **Step 6: 提交** + +```bash +cd crearte-monorepo/crearte +git add src/app/views/CreatorCenterView.vue src/e2e/creator.spec.ts src/e2e/noauth.spec.ts +git commit -m "feat(creator): work-data placeholder card with three auth states (anon prompt / signed-in / noauth)" +``` + +--- + +### Task 3: 创作教程卡(占位 + 链现有文档) + +**Files:** +- Modify: `src/app/views/CreatorCenterView.vue`(卡片行内追加「创作教程」卡) +- Modify: `src/e2e/creator.spec.ts`(追加第 4 条用例) + +**Interfaces:** +- Consumes: Task 2 的卡片行结构(`section.mt-8.flex ... sm:flex-row`) +- Produces: 卡片标题「创作教程」(h3);卡内链接「《提交作品指南》」`href="/docs/contribute"` + +- [ ] **Step 1: 写失败的 e2e(第 4 条用例)** + +`src/e2e/creator.spec.ts` 末尾追加: + +```ts +test('教程卡占位并链到提交作品指南', async ({ page }) => { + await page.goto('http://localhost:4173/creator') + + const card = page.getByRole('heading', { name: '创作教程' }).locator('..') + await expect(card.getByText('教程整理中,敬请期待。')).toBeVisible() + await expect(card.getByRole('link', { name: '《提交作品指南》' })).toHaveAttribute('href', '/docs/contribute') +}) +``` + +- [ ] **Step 2: 运行确认失败** + +Run: `npx playwright test e2e/creator.spec.ts` +Expected: FAIL——「创作教程」heading 不存在。 + +- [ ] **Step 3: 实现教程卡** + +`src/app/views/CreatorCenterView.vue`,在「作品数据」卡的 `` 之后、卡片行 `` 之前插入: + +```html +
+

创作教程

+

教程整理中,敬请期待。投稿流程、打包规范与过审要点正在重新整理,完成后在本页发布;可先阅读《提交作品指南》。

+
+``` + +- [ ] **Step 4: 运行确认通过** + +Run: `npx playwright test e2e/creator.spec.ts` +Expected: PASS(4 passed) + +- [ ] **Step 5: 提交** + +```bash +cd crearte-monorepo/crearte +git add src/app/views/CreatorCenterView.vue src/e2e/creator.spec.ts +git commit -m "feat(creator): tutorial placeholder card linking to the submission guide" +``` + +--- + +### Task 4: CHANGELOG + 全量验证 + 合并回 master + 推送 + +**Files:** +- Modify: `docs/CHANGELOG.md`(crearte 仓,追加 0.17.0) + +**Interfaces:** +- Consumes: Task 1–3 的全部提交(分支 `feat/creator-center`) +- Produces: `master` 上的合并提交与 0.17.0 条目;远端更新 + +- [ ] **Step 1: 追加 CHANGELOG 条目** + +`docs/CHANGELOG.md`,在文件说明段之后、`## [0.16.0] - 2026-09-30` 之前插入: + +```md +## [0.17.0] - 2026-09-30 + +### Added / 新增 + +- Added the Creator Center (`/creator`): a homepage-style page with a hero (提交作品 / 投稿指南 CTAs) and two cards — 「作品数据」 (placeholder adapting to auth state: anonymous visitors get a login prompt with `next` return, signed-in users see build-in-progress copy, noauth deploys show no login link) and 「创作教程」 (placeholder linking to the existing submission guide until the tutorial content lands). The header main nav gains a third tab with the same active styling as 作品/文档. No backend or deploy changes. +- 新增创作者中心(`/creator`):首页样式页面,hero(提交作品 / 投稿指南两个按钮)+ 两张卡——「作品数据」占位卡按登录态分流(未登录给登录引导并带 `next` 回跳、已登录显示建设中文案、noauth 部署不出现登录链接)与「创作教程」占位卡(教程内容定稿前链向现有《提交作品指南》)。页头主导航新增第三个 tab,激活样式与「作品 / 文档」一致。零后端、零部署改动。 + +``` + +- [ ] **Step 2: 全量验证(四条命令依次跑,必须全绿)** + +```bash +cd crearte-monorepo/crearte/src +npx vitest run +npx vue-tsc --noEmit +npx playwright test +npx playwright test --config playwright.noauth.config.ts +``` + +Expected: vitest 全 passed(存量 333+,无新增单测);`vue-tsc` 无输出;默认 e2e 全 passed(含 creator.spec.ts 4 条,存量不回归);noauth e2e 1 passed。 + +- [ ] **Step 3: 提交 CHANGELOG** + +```bash +cd crearte-monorepo/crearte +git add docs/CHANGELOG.md +git commit -m "docs: changelog 0.17.0 — creator center" +``` + +- [ ] **Step 4: 推送功能分支(触发 CI)** + +```bash +git push origin feat/creator-center +``` + +Expected: 推送成功;`validate.yml` 工作流对分支运行(若失败,修复后追加提交再推送,勿改历史)。 + +- [ ] **Step 5: 合并回 master(--no-ff)并删分支** + +```bash +git checkout master +git merge --no-ff feat/creator-center -m "merge: creator center (/creator) — placeholder data & tutorial cards, header tab; crearte 0.17.0" +git branch -d feat/creator-center +``` + +- [ ] **Step 6: 推送 master** + +```bash +git push origin master +``` + +Expected: `master` 更新,包含 4 个功能提交 + 1 个合并提交。 + +- [ ] **Step 7: 收尾核对** + +```bash +git log --oneline -6 +git status --short --branch +``` + +Expected: 合并提交在顶端;工作区干净、与 `origin/master` 同步。 + +--- + +## Self-Review 记录(计划编写时自查) + +**1. Spec 覆盖核对:** + +| Spec 验收标准 | 对应步骤 | +|---|---| +| 1. 主导航 tab + 激活态一致 | Task 1 Step 2/6/7 | +| 2. hero + 两卡、视觉语言复用 | Task 1 Step 4、Task 2 Step 3、Task 3 Step 3 | +| 3. 三态分流(未登录 next / 已登录 / noauth) | Task 2 Step 1/3/4/5 | +| 4. 教程卡占位 + /docs/contribute 链接 | Task 3 | +| 5. 新增 e2e 通过 + 存量全量绿 | Task 2–4 各 Step 4/5、Task 4 Step 2 | +| 6. server / deploy 零 diff | 全程只碰 `src/` 与 crearte 仓 `docs/CHANGELOG.md` | + +**2. 占位符扫描:** 无 TBD/TODO;每步含确切代码或命令;失败预期逐条写明。 + +**3. 一致性:** 路由名 `creator`、视图 `CreatorCenterView.vue`、tab 名「创作者中心」、登录链接 `href="/login?next=%2Fcreator"`、教程链接 `href="/docs/contribute"` 在各 Task 间一致;CHANGELOG 版本 0.17.0 与 master 顶端 0.16.0 衔接。 diff --git a/docs/specs/2026-09-30-creator-center-design.md b/docs/specs/2026-09-30-creator-center-design.md index 379c7c5..1562a69 100644 --- a/docs/specs/2026-09-30-creator-center-design.md +++ b/docs/specs/2026-09-30-creator-center-design.md @@ -87,7 +87,7 @@ | `src/app/views/CreatorCenterView.vue` | 新建 | | `src/app/components/AppHeader.vue` | 主导航加 tab + `onCreator` | | `src/e2e/creator.spec.ts` | 新建 | -| `docs/CHANGELOG.md`(crearte 仓) | 0.11.0 双语条目 | +| `docs/CHANGELOG.md`(crearte 仓) | 0.17.0 双语条目(master 顶部为 0.16.0,本功能自 master 切分支) | | `docs/ROADMAP.md`(wrapper 仓) | 文末索引登记本 spec 与实现计划 | ## 6. 验收标准