czz/taiheEhu
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
master
taiheEhu/docs/superpowers/plans/2026-05-08-mine-page-implementation.md
czz 6ff9070eca feat: add mine page and secondary pages
2026-05-08 11:25:43 +08:00

3.6 KiB
Raw Permalink Blame History

Mine Page 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: 为小程序新增“我的”主页面和其二级页面骨架，完成页面注册、页面跳转和深色视觉落地。

Architecture: 保持当前项目的轻量结构，直接在 src/pages/ 下新增页面目录，不引入状态管理或新 UI 框架。主页面使用本地 mock 数据渲染，二级页面复用统一的深色卡片布局和轻量占位文案，验证以 npm run build:weapp 为主。

Tech Stack: Taro 4、React 18、TypeScript、SCSS

Task 1: 注册页面与整理导航入口

Files:

  • Modify: src/app.config.ts

  • Modify: src/pages/index/index.tsx

  • 在 src/app.config.ts 中注册 mine 主页面及 profile、settings、support、devices、repair、feedback、videos、follow-us 二级页面

  • 将首页底部导航中的“我的”入口改为跳转到 pages/mine/index

  • 保留首页其余入口当前占位逻辑，不扩展其他 Tab 页面

Task 2: 实现“我的”主页面

Files:

  • Create: src/pages/mine/index.config.ts

  • Create: src/pages/mine/index.tsx

  • Create: src/pages/mine/index.scss

  • 新建“我的”主页面配置，设置页面标题

  • 在 index.tsx 中定义本地 mock 用户数据、功能列表数据和页面跳转逻辑

  • 实现顶部用户信息卡、右侧快捷入口、功能列表和版本检查提示

  • 保持代码对新手友好，复杂映射处仅补充必要注释

Task 3: 实现二级页面骨架

Files:

  • Create: src/pages/profile/index.config.ts

  • Create: src/pages/profile/index.tsx

  • Create: src/pages/profile/index.scss

  • Create: src/pages/settings/index.config.ts

  • Create: src/pages/settings/index.tsx

  • Create: src/pages/settings/index.scss

  • Create: src/pages/support/index.config.ts

  • Create: src/pages/support/index.tsx

  • Create: src/pages/support/index.scss

  • Create: src/pages/devices/index.config.ts

  • Create: src/pages/devices/index.tsx

  • Create: src/pages/devices/index.scss

  • Create: src/pages/repair/index.config.ts

  • Create: src/pages/repair/index.tsx

  • Create: src/pages/repair/index.scss

  • Create: src/pages/feedback/index.config.ts

  • Create: src/pages/feedback/index.tsx

  • Create: src/pages/feedback/index.scss

  • Create: src/pages/videos/index.config.ts

  • Create: src/pages/videos/index.tsx

  • Create: src/pages/videos/index.scss

  • Create: src/pages/follow-us/index.config.ts

  • Create: src/pages/follow-us/index.tsx

  • Create: src/pages/follow-us/index.scss

  • 为每个二级页面补齐标题、卡片布局和占位内容

  • 保持二级页面视觉与主页面一致，但布局更简洁

  • 确保所有从“我的”页发起的跳转都能进入对应页面

Task 4: 样式收口与验证

Files:

  • Modify: src/app.scss

  • Modify: src/pages/index/index.tsx

  • Modify: src/pages/mine/index.scss

  • Modify: src/pages/profile/index.scss

  • Modify: src/pages/settings/index.scss

  • Modify: src/pages/support/index.scss

  • Modify: src/pages/devices/index.scss

  • Modify: src/pages/repair/index.scss

  • Modify: src/pages/feedback/index.scss

  • Modify: src/pages/videos/index.scss

  • Modify: src/pages/follow-us/index.scss

  • 如有必要，补充少量全局基础样式，避免和现有页面冲突

  • 运行 npm run build:weapp

  • 检查构建输出，确认页面注册、TS 代码和 SCSS 都能通过编译

Reference in New Issue View Git Blame Copy Permalink