高物
50a0d6f982
Large changes across frontend, backend and docs to align creation-tab and generation-page behavior with new product UI/UX and Spacetime bindings. Updated hermes decision-log and pitfalls with concrete rules (banner carousel, font sizing, unread-dot tokens, template-card layout, direct card->entry routing, separation of account balance vs prize pools, removal of global page card shell, generation progress milestones and unified circular progress, and background video handling). Added GenerationProgressHero component and media assets, plus generation-related UI/tests updates (CustomWorldGenerationView, BarkBattleGeneratingView, creation hub/cards, platform entry routing, index tests). Backend and contract updates include new category fields in admin API types and admin UI form/list, spacetime-client/module/migration changes and generated bindings script. Misc: many tests adjusted, new docs and plan files added, and several server-rs crate changes to support the updated creation/ generation workflows.
3.2 KiB
Profile Tab Mobile Layout 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: Tighten the mobile 我的 Tab layout so typography, spacing, and fixed-height controls align with the rest of the platform UI and do not overlap the bottom dock.
Architecture: Keep the existing RpgEntryHomeView structure and update only page-specific class names plus CSS rules. Treat src/index.css as the platform token surface; document the mobile profile Tab acceptance criteria in the existing product / play-flow docs instead of creating a parallel doc.
Tech Stack: React, TypeScript, Tailwind utility classes, project CSS in src/index.css, Vitest, Vite local browser smoke.
Task 1: Add Mobile Profile Layout Assertions
Files:
-
Modify:
src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx -
Add expectations in
mobile profile page matches the reference layout sectionsthat the profile page, header, stats grid, daily task card, shortcut grid, and bottom dock expose the stable class hooks used by the mobile CSS. -
Run
npm run test -- src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx -t "mobile profile page matches the reference layout sections"and verify the test covers the hooks before CSS edits.
Task 2: Tighten Profile Tab Markup Hooks
Files:
-
Modify:
src/components/rpg-entry/RpgEntryHomeView.tsx -
Add focused class hooks for profile identity text, stat values, shortcut labels, membership copy, and daily task copy without changing user-facing Chinese text.
-
Keep the current page order: profile header, membership card, three stats, daily task, five shortcut buttons, settings, secondary shortcuts, legal strip.
Task 3: Implement Mobile CSS
Files:
-
Modify:
src/index.css -
Under the existing
@media (max-width: 639px)block, reduce我的Tab fixed sizes to ordinary UI scale: profile title 16-17px, body copy 11-13px, stats values 13-14px, shortcut labels 11-12px. -
Make narrow screens robust: stats grid uses three min-width-safe columns, shortcut grid becomes
repeat(5, minmax(0, 1fr))above 360px and a stablerepeat(3, minmax(0, 1fr))below 360px, identity text wraps safely, legal links wrap when needed. -
Keep the bottom dock fixed but add enough profile page bottom padding so the final legal / secondary section can scroll above it.
Task 4: Update Docs
Files:
-
Modify:
docs/【项目基线】当前产品与工程约束-2026-05-15.md -
Modify:
docs/【玩法创作】平台入口与玩法链路-2026-05-15.md -
Add the acceptance rule that mobile
我的Tab typography stays within normal UI sizes and all functional blocks must scroll clear of the bottom dock on narrow screens.
Task 5: Verify
Files:
-
No new files.
-
Run
npm run test -- src/components/rpg-entry/RpgEntryHomeView.recharge.test.tsx -t "mobile profile page matches the reference layout sections". -
Run
npm run check:encoding. -
Run a local mobile viewport smoke check for the profile tab if the dev server starts cleanly.