50 lines
3.2 KiB
Markdown
50 lines
3.2 KiB
Markdown
一、个人主页相关
|
||
页面/模块 文件路径 功能说明
|
||
个人主页 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 核心数据层：<br>• getUserInfo() / setUserInfo() / clearUserInfo() — 读写当前用户信息（含 openid、昵称、头像）<br>• getAddressList() — 获取收货地址列表<br>• 所有 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 |