31 lines
1.7 KiB
Markdown
31 lines
1.7 KiB
Markdown
# App.vue
|
||
|
||
**路径**：`src/App.vue`
|
||
|
||
## 功能用途
|
||
|
||
根组件，包含全局 AppBar、主内容区（router-view）。AppBar 含返回按钮、标题、登录/余额/头像入口，主内容区使用 keep-alive 缓存 Home。
|
||
|
||
## 核心能力
|
||
|
||
- 顶部导航栏：返回、TestMarket 标题、Login 或余额+头像入口
|
||
- 头像入口：登录态点击头像直接跳转 `/profile`
|
||
- 移动端底部导航：Home / Search / Mine（三个 tab 等分屏宽，与路由联动；Mine 点击跳转 `/profile`；选中态仅加粗、无底色；未选中项图标与文字偏灰；底部导航上方有淡投影）；仅在 `/`、`/search`、`/profile` 三个主页面显示，其他页面隐藏
|
||
- 全局滚动稳定：通过 `scrollbar-gutter: stable` 保留滚动条占位，避免页面从搜索态切到结果态时出现顶部/底部导航轻微横向抖动
|
||
- 登录态：`userStore.isLoggedIn` 控制展示
|
||
- 用户名：`nickName` 或 `userName` 显示在头像左侧（有值时）
|
||
- 挂载时与 `isLoggedIn` 变为 true 时：拉取用户信息与余额（`router.isReady()` + `nextTick` 后执行），确保钱包登录、刷新页面后头像和用户名正确显示
|
||
- keep-alive：`include="['Home']"` 缓存首页
|
||
|
||
## 使用方式
|
||
|
||
- 启动应用后由 `App.vue` 承载顶栏、主内容与底部导航
|
||
- 路由切换时由 `bottomNavValue` 自动同步 Home / Search / Mine 高亮状态
|
||
- 页面内容通过 `<router-view>` 渲染，Home 页面使用 keep-alive 缓存
|
||
|
||
## 扩展方式
|
||
|
||
1. **多级导航**：根据路由深度调整返回逻辑
|
||
2. **主题切换**：增加亮/暗模式切换
|
||
3. **个人入口扩展**：可在个人中心页继续扩展设置项与账户操作
|