Skip to content

feat(quick-start): redesign character creation entry - #303

Merged
nighca merged 3 commits into
1024XEngineer:mainfrom
huyanxius:feat/274-quick-start-entry
Aug 18, 2026
Merged

feat(quick-start): redesign character creation entry#303
nighca merged 3 commits into
1024XEngineer:mainfrom
huyanxius:feat/274-quick-start-entry

Conversation

@huyanxius

@huyanxius huyanxius commented Aug 13, 2026

Copy link
Copy Markdown
Collaborator

重构 Quick Start 的角色创建入口:收紧为单行底部输入器,用风格提示替代角色样例卡,并增加只描述角色外形与身份的轮换灵感和逐字镜像动效。生成服务、路由、导出与异常处理均保持原样。

依赖 #302;该 PR 合并后,本 PR 的差异会自动收敛为 Quick Start 专属提交。

Why

原入口包含冗余说明、无意义像素装饰和过高输入框,视觉重心分散;角色示例与真实生成能力也容易产生误导。

Changes

  • 删除入口标题说明、装饰像素图与无效辅助文案。
  • 使用三张风格提示卡,选中后填入对应像素风格描述并消散隐藏。
  • 首句只显示一次,随后循环八条角色身份、外形、服装和配饰灵感。
  • 输入后切换为常驻“用文字塑造你的角色……”。
  • 将母版、输入和生成操作收进底部单行 composer。

Implementation

  • refactor(ui): extract shared kinetic copy #302 的公共整句字幕基础上叠加 KineticCopyCycle:支持消息替换、循环起点、可选前缀与逐字镜像进退场。
  • 保留 service.startstartWithUploadedTemplate、导航、错误处理、ExportButton 和运行态逻辑。

Verification

  • npm test --prefix frontend -- src/shared/ui/kinetic-copy.test.tsx src/pages/quick-start/index.test.tsx src/features/account-panel/index.test.tsx --configLoader runner:3 files / 47 tests passed
  • npm run typecheck --prefix frontend:passed
  • git diff --check:passed
  • 本轮界面已由用户确认,不重复执行视觉验收

Screenshots

Desktop

Quick Start entry

Scope

Related Issues

Refs #274
Refs #301

@vercel

vercel Bot commented Aug 13, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
windup Ready Ready Preview Aug 18, 2026 2:35am

@codecov

codecov Bot commented Aug 13, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

@fennoai fennoai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Found one accessibility issue in the new rotating Quick Start heading. The focused test command could not run because frontend/node_modules is absent and the local vitest binary is not executable.

Comment thread frontend/src/pages/quick-start/index.tsx
@huyanxius

Copy link
Copy Markdown
Collaborator Author

@fennoai -claude 定位 CI 未过的问题,并执行最小化修复,并重跑 CI

@fennoai

fennoai Bot commented Aug 14, 2026

Copy link
Copy Markdown
Contributor

CI 已修复并全绿

Frontend checks 的失败点是 Check formattingoxfmt --check)。该步骤在 lint / typecheck / test 之前退出,因此掩盖了后面两处真实失败——本地跑完整流程后才暴露出来。三处已一并修复。

失败原因与修复

1. oxfmt --check 未通过(CI 报错点)

3 个文件不符合格式化规则:pages/quick-start/index.tsxpages/quick-start/index.test.tsxshared/ui/kinetic-copy-cycle.tsx。仅对这 3 个文件跑了 oxfmt,改动全部是换行与缩进,无逻辑变化。

2. app-color-system 测试失败(被 #1 掩盖)

pages/quick-start/index.tsx:320 的 composer 聚焦阴影内联了色值 rgb(29_37_31/14%),违反“产品页只用语义色令牌”的约束:

expect(content, `${path} contains a private color value`).not.toMatch(
  /#[0-9a-f]{3,8}\b|rgba?\(|hsla?\(|oklch\(/i,
)

index.css 新增 --shadow-app-composer-focus 令牌,页面改为 focus-within:shadow-[var(--shadow-app-composer-focus)],视觉效果不变。

3. app.test.tsx 2 个测试失败(被 #1 掩盖)

本 PR 按设计删除了入口标题「开始一条可追踪的制作流程」,但 app/app.test.tsx 仍以该文案断言受保护路由是否挂载。已将 4 处断言更新为新入口标题「想做一个什么角色」,断言意图(登录边界与路由挂载)保持不变。

验证

本地按 CI 相同顺序全量执行:

步骤 结果
npm run format:check passed(147 files)
npm run lint passed
npm run typecheck passed
npm run test:coverage 48 files / 514 tests passed

CI 在 8c0d6c0 上的重跑结果:

Check 结论
Frontend checks success
lint-and-test success
codecov/patch success
Vercel Preview Comments success

说明

  • 提交 8c0d6c0 已推送到 huyanxius:feat/274-quick-start-entry,CI 由 push 自动重跑,未使用 workflow re-run。
  • 未改动生成服务、路由、导出或运行态逻辑;产物改动仅为格式化、一个新色彩令牌和测试断言文案。
  • PR 当前 mergeable_stateblocked(检查已全绿,属评审/分支保护要求),非 CI 失败。
  • 未做视觉验收——本轮无界面行为变更。

@nighca

nighca commented Aug 18, 2026

Copy link
Copy Markdown
Contributor

@huyanxius 先处理下冲突?

@huyanxius

Copy link
Copy Markdown
Collaborator Author

@fennoai 基于 mainrebase 一下,解决 conflict

@fennoai

fennoai Bot commented Aug 18, 2026

Copy link
Copy Markdown
Contributor

冲突已解决

  • 已将最新 maine385f09)整合到 PR feat(quick-start): redesign character creation entry #303 的固定 head 8c0d6c0,生成合并提交 d007cc4
  • 保留 Quick Start 单行入口、风格提示和轮换灵感,同时兼容 main 新增的连续会话流程。
  • 将重复的 KineticCopyCycle 实现与测试迁移到共享 UI,冲突文件已全部清理。
  • 已创建 fork PR huyanxius/Windup#13;合并它后会更新原分支 feat/274-quick-start-entry,从而刷新当前 PR。

验证

  • 5 个测试文件通过:87 passed / 4 skipped
  • npm run typecheck --prefix frontend:通过
  • git diff --check 与暂存差异检查:通过

说明:为避免改写共享分支历史,本次使用 merge 整合 main,未执行 force-push 式 rebase。

View job run

The entry paired the style cards with two named role pills, which read as ready-made characters rather than prompt seeds.

Remove the shortcut list and its pill row so the entry offers style direction only.

The entry now asks for a description instead of implying a catalog of existing assets.
The entry composer had grown into a two-row textarea, standing taller than the single-line composer the conversation view hands off to.

Restore the single-line input and move the focused state onto a dedicated shadow token instead of leaving focus as a border-only cue.

Both composers now share one height, and focusing the entry reads as a change in elevation.
The entry assertions still described the two-row textarea and the retired role-example shortcuts.

Retarget the input assertions and add cases for the single-line composer and for the shortcuts staying absent.

A silent return to either shape now fails the suite instead of drifting unnoticed.
@huyanxius
huyanxius force-pushed the feat/274-quick-start-entry branch from 8c0d6c0 to 245c7ef Compare August 18, 2026 02:35
@github-actions

Copy link
Copy Markdown

⚠️ @huyanxius,此 PR 尚未关联 issue。请在 PR 描述中使用 Closes #123 等关闭关键字,或通过 Development 侧栏关联对应 issue。

@nighca
nighca merged commit 61b4577 into 1024XEngineer:main Aug 18, 2026
7 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants