3.2 KiB
一、个人主页相关
页面/模块 文件路径 功能说明
个人主页 src/pages/profile/index.tsx 用户中心主页面：展示昵称/头像/ID、5个状态入口、6个菜单入口（设计清单、收货地址、设置等）
src/pages/profile/index.scss 个人主页样式：头像、状态栏、菜单列表、icon 尺寸
设置页 src/pages/settings/index.tsx 修改个人信息（昵称、头像）、账号管理、定制协议、退出登录
src/pages/settings/index.scss 设置页样式：用户卡片、菜单列表、弹窗
收货地址 src/pages/address/index.tsx 地址列表、新增/编辑地址、省市区选择、默认地址设置
src/pages/address/index.scss 地址卡片、表单、弹窗样式
用户数据库 src/pages/userDatabase/index.tsx 账号管理：查看所有本地用户、切换用户、新建用户、删除用户（密码保护）
src/pages/userDatabase/index.scss 用户列表表格、密码验证弹窗
词云生成 src/pages/wordcloud/index.tsx 名字可视化生成（从个人主页进入）
src/pages/wordcloud/index.scss 词云展示样式
二、登录相关
页面/模块 文件路径 功能说明
LoginGuard 守卫 src/components/LoginGuard/index.tsx 登录守卫组件：未登录时显示居中提示"请先登录" + 跳转按钮
src/components/LoginGuard/index.scss 登录守卫居中布局、未登录提示样式
LoginModal 弹窗 src/components/LoginModal/index.tsx （历史组件）弹窗式登录入口，现在主要被 LoginGuard 替代
src/components/LoginModal/index.scss 弹窗登录框样式
ThemeContext src/context/ThemeContext.tsx 全局主题状态管理：切换 light/dark 模式，给所有页面提供 theme
三、数据层（登录/用户信息存储）
文件路径 功能说明
src/utils/store.ts 核心数据层：
• getUserInfo() / setUserInfo() / clearUserInfo() — 读写当前用户信息（含 openid、昵称、头像）
• getAddressList() — 获取收货地址列表
• 所有 Storage key 按 ${scope}_${openid} 前缀隔离，实现多用户数据独立
四、依赖上下游关系图
用户操作: ↓ 个人主页 profile/index.tsx ├─ 点击"设置" → settings/index.tsx（修改信息/退出登录） ├─ 点击"收货地址" → address/index.tsx（管理地址） ├─ 点击"账号管理" → userDatabase/index.tsx（切换/新建/删除用户） ├─ 点击"设计清单/订单" → LoginGuard 拦截（未登录）或直接进入 ↓ store.ts ├─ getUserInfo() ← 所有页面 onShow 时读取登录状态 ├─ setUserInfo() ← settings.tsx 保存修改 └─ clearUserInfo() ← 退出登录时清空
LoginGuard ├─ 未登录 → 显示"请先登录" + 跳转 settings（登录后可按返回键回到原页面） └─ 已登录 → 正常渲染子组件 五、常用维护入口速查 需求 修改文件 个人主页菜单项/图标/顺序 src/pages/profile/index.tsx 个人主页头像/昵称/ID 展示 src/pages/profile/index.tsx icon 尺寸调整 src/pages/profile/index.scss 登录状态判断逻辑 src/utils/store.ts 未登录提示文案/居中 src/components/LoginGuard/index.tsx + .scss 退出登录逻辑 src/pages/settings/index.tsx 设置页菜单项 src/pages/settings/index.tsx（MENU 数组） 主题切换机制 src/context/ThemeContext.tsx