399 lines
17 KiB
Markdown
399 lines
17 KiB
Markdown
# 创作者中心（/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 `<script setup>` + TypeScript + vue-router + Tailwind class 体系；Playwright（`@playwright/test`）；crearte 仓（monorepo 内层前端仓）。
|
||
|
||
**Spec:** `crearte-monorepo/docs/specs/2026-09-30-creator-center-design.md`
|
||
|
||
## Global Constraints
|
||
|
||
- 工作目录：`crearte-monorepo/crearte`（内层前端仓）。除标注外，所有命令在 `crearte-monorepo/crearte/src` 下执行。
|
||
- 分支：从 `master`（当前顶端 `eb5fbed`，changelog 0.16.0）切 `feat/creator-center`。crearte AGENTS.md：dev 分支命名 `{feat|fix|docs|chore}/{name}`；**不在 master 上直接提交**。
|
||
- 每个 Task 完成即提交，提交信息风格对齐仓库现状（`feat(scope): 简述`）。
|
||
- 文案逐字采用 spec §3.2，不得改写：hero 徽章「创作者」、标语 `SHARE YOUR CREATIONS`、说明「把你的作品分享给所有人」、按钮「提交作品」「投稿指南」；卡标题「作品数据」「创作教程」；数据卡三态文案与教程卡占位文案见各 Task。
|
||
- 样式只复用 `LandingView.vue` 既有 class；不新增 design token、不改 `main.css`。
|
||
- CHANGELOG：`docs/CHANGELOG.md`（crearte 仓）顶部追加 `## [0.17.0] - 2026-09-30` 条目；同一条目英文行、中文行连续书写（中间无空行），条目之间空行分隔。
|
||
- 完成定义：`npx vitest run`、`npx vue-tsc --noEmit`、`npx playwright test`、`npx playwright test --config playwright.noauth.config.ts` 四条全绿；最后 `--no-ff` 合并回 `master`、删分支、推送。
|
||
- 默认 e2e 构建注入了 `VITE_API_BASE_URL=http://localhost:4173`（`authEnabled === true`）；noauth 构建注入空值（`authEnabled === false`）。两条路径都要覆盖。
|
||
|
||
---
|
||
|
||
### Task 1: 分支准备 + 路由 + 主导航 tab + hero
|
||
|
||
**Files:**
|
||
- Create: `src/app/views/CreatorCenterView.vue`（先只含 hero）
|
||
- Modify: `src/app/router/index.ts`（在 `home` 路由后插入 `creator` 路由）
|
||
- Modify: `src/app/components/AppHeader.vue`（`onCreator` computed + 主导航第三个 tab）
|
||
- Test: `src/e2e/creator.spec.ts`（新建，先写第 1 条用例）
|
||
|
||
**Interfaces:**
|
||
- Consumes: 无（首个任务）
|
||
- Produces: 路由 `{ path: '/creator', name: 'creator' }`；视图默认导出 `CreatorCenterView.vue`；header tab 可访问名「创作者中心」（激活时 `aria-current="page"`）
|
||
|
||
- [ ] **Step 1: 从 master 切功能分支**
|
||
|
||
```bash
|
||
cd crearte-monorepo/crearte
|
||
git checkout master
|
||
git checkout -b feat/creator-center
|
||
```
|
||
|
||
- [ ] **Step 2: 写失败的 e2e（第 1 条用例）**
|
||
|
||
创建 `src/e2e/creator.spec.ts`：
|
||
|
||
```ts
|
||
import { expect, test } from '@playwright/test'
|
||
|
||
test('主导航有创作者中心 tab，/creator 渲染 hero', async ({ page }) => {
|
||
await page.goto('http://localhost:4173/creator')
|
||
|
||
const tab = page.locator('header').getByRole('link', { name: '创作者中心' })
|
||
await expect(tab).toBeVisible()
|
||
await expect(tab).toHaveAttribute('aria-current', 'page')
|
||
|
||
await expect(page.getByRole('heading', { level: 1, name: '创作者中心' })).toBeVisible()
|
||
await expect(page.getByText('SHARE YOUR CREATIONS')).toBeVisible()
|
||
await expect(page.getByText('把你的作品分享给所有人')).toBeVisible()
|
||
await expect(page.getByRole('link', { name: '提交作品' })).toHaveAttribute('href', '/submit/new')
|
||
await expect(page.getByRole('link', { name: '投稿指南' })).toHaveAttribute('href', '/docs/contribute')
|
||
})
|
||
```
|
||
|
||
- [ ] **Step 3: 运行确认失败**
|
||
|
||
Run: `cd src && npx playwright test e2e/creator.spec.ts`
|
||
Expected: FAIL——`/creator` 落入 NotFound 路由，heading「创作者中心」不存在（Playwright 自动拉起 webServer：`build:e2e` + `serve-runtime`，首次约 1–3 分钟）。
|
||
|
||
- [ ] **Step 4: 新建视图（仅 hero）**
|
||
|
||
创建 `src/app/views/CreatorCenterView.vue`：
|
||
|
||
```vue
|
||
<script setup lang="ts">
|
||
import { RouterLink } from 'vue-router'
|
||
|
||
const SLOGAN = 'SHARE YOUR CREATIONS'
|
||
const TAGLINE = '把你的作品分享给所有人'
|
||
</script>
|
||
|
||
<template>
|
||
<section class="border-[3px] border-ink bg-surface px-6 py-10 text-center shadow-hard sm:px-10 sm:py-14">
|
||
<span class="inline-block bg-ink px-2 py-1 text-[0.6875rem] font-bold tracking-[0.3em] text-paper">创作者</span>
|
||
<h1 class="mt-3 font-display text-4xl leading-none font-black tracking-tight sm:text-5xl md:text-6xl">创作者中心</h1>
|
||
<p class="mt-3 font-mono text-[0.6875rem] tracking-[0.3em] text-ink-soft">{{ SLOGAN }}</p>
|
||
<div class="mx-auto my-5 h-[3px] w-16 bg-ink"></div>
|
||
<p class="text-sm text-ink-soft">{{ TAGLINE }}</p>
|
||
<div class="mt-6 flex flex-wrap justify-center gap-3">
|
||
<RouterLink to="/submit/new" class="btn-ink lift hover:shadow-hard active:shadow-none">提交作品</RouterLink>
|
||
<RouterLink to="/docs/contribute" class="btn-surface lift hover:shadow-hard active:shadow-none">投稿指南</RouterLink>
|
||
</div>
|
||
</section>
|
||
</template>
|
||
```
|
||
|
||
- [ ] **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 主导航 `<nav>` 内，「文档」RouterLink 之后、`</nav>` 之前插入：
|
||
|
||
```html
|
||
<RouterLink
|
||
to="/creator"
|
||
class="border-b-[3px] pb-0.5 text-sm font-bold"
|
||
:class="onCreator ? 'border-b-accent-ink text-accent-ink' : 'border-b-transparent text-ink-soft'"
|
||
:aria-current="onCreator ? 'page' : undefined"
|
||
>创作者中心</RouterLink>
|
||
```
|
||
|
||
- [ ] **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
|
||
<script setup lang="ts">
|
||
import { computed } from 'vue'
|
||
import { RouterLink } from 'vue-router'
|
||
import { authEnabled, session } from '@/auth'
|
||
|
||
const SLOGAN = 'SHARE YOUR CREATIONS'
|
||
const TAGLINE = '把你的作品分享给所有人'
|
||
|
||
const user = computed(() => session.state.user)
|
||
</script>
|
||
```
|
||
|
||
template 在 hero `</section>` 之后追加（本 Task 先只放数据卡，教程卡在 Task 3 加）：
|
||
|
||
```html
|
||
<section class="mt-8 flex flex-col gap-4 sm:flex-row">
|
||
<h2 class="sr-only">创作者中心</h2>
|
||
<section class="flex-1 border-2 border-ink bg-surface p-4 shadow-hard-sm">
|
||
<h3 class="text-sm font-black">作品数据</h3>
|
||
<p class="mt-2 text-xs leading-relaxed text-ink-soft">
|
||
<template v-if="authEnabled && !user">登录后即可查看您作品的数据。<RouterLink :to="{ path: '/login', query: { next: '/creator' } }" class="underline">登录</RouterLink></template>
|
||
<template v-else-if="authEnabled">数据面板正在建设中。上线后将展示您作品的浏览、下载与评分。</template>
|
||
<template v-else>数据面板正在建设中。</template>
|
||
</p>
|
||
</section>
|
||
</section>
|
||
```
|
||
|
||
- [ ] **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`，在「作品数据」卡的 `</section>` 之后、卡片行 `</section>` 之前插入：
|
||
|
||
```html
|
||
<section class="flex-1 border-2 border-ink bg-surface p-4 shadow-hard-sm">
|
||
<h3 class="text-sm font-black">创作教程</h3>
|
||
<p class="mt-2 text-xs leading-relaxed text-ink-soft">教程整理中，敬请期待。投稿流程、打包规范与过审要点正在重新整理，完成后在本页发布；可先阅读<RouterLink to="/docs/contribute" class="underline">《提交作品指南》</RouterLink>。</p>
|
||
</section>
|
||
```
|
||
|
||
- [ ] **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 衔接。
|