XingfenD/crearte-monorepo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
crearte-monorepo/docs/specs/2026-09-30-creator-center-design.md
T

8.0 KiB
Raw Permalink Blame History

创作者中心（/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 统计条等首页既有元件的复制。
  • 任何后端 / 部署 / 数据迁移改动。
Reference in New Issue View Git Blame Copy Permalink