24 lines
1.2 KiB
Markdown
24 lines
1.2 KiB
Markdown
# App.vue
|
||
|
||
**路径**：`src/App.vue`
|
||
|
||
## 功能用途
|
||
|
||
根组件，包含全局 AppBar、主内容区（router-view）。AppBar 含返回按钮、标题、登录/余额/头像菜单，主内容区使用 keep-alive 缓存 Home。
|
||
|
||
## 核心能力
|
||
|
||
- 顶部导航栏：返回、TestMarket 标题、Login 或余额+用户名+头像菜单
|
||
- 多语言入口：右侧地球图标（`mdi-earth`）+ 当前语言文案，点击打开语言选择菜单
|
||
- 移动端底部导航：Home / Search / Mine（三个 tab 等分屏宽，与路由联动；Mine 未登录跳转 Login；选中态仅加粗、无底色；未选中项图标与文字偏灰；底部导航上方有淡投影）
|
||
- 登录态：`userStore.isLoggedIn` 控制展示
|
||
- 用户名：`nickName` 或 `userName` 显示在头像左侧（有值时）
|
||
- 挂载时与 `isLoggedIn` 变为 true 时：拉取用户信息与余额（`router.isReady()` + `nextTick` 后执行），确保钱包登录、刷新页面后头像和用户名正确显示
|
||
- keep-alive：`include="['Home']"` 缓存首页
|
||
|
||
## 扩展方式
|
||
|
||
1. **多级导航**：根据路由深度调整返回逻辑
|
||
2. **主题切换**：增加亮/暗模式切换
|
||
3. **多语言**：接入 i18n 插件
|