1.2 KiB
1.2 KiB
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']"缓存首页
扩展方式
- 多级导航：根据路由深度调整返回逻辑
- 主题切换：增加亮/暗模式切换
- 多语言：接入 i18n 插件