高物
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.
60 lines
3.2 KiB
Markdown
60 lines
3.2 KiB
Markdown
# 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 sections` that 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 stable `repeat(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.
|