taiheEhu/docs/superpowers/plans/2026-05-08-mine-page-implementation.md

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 都能通过编译