1.7 KiB
1.7 KiB
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 缓存
扩展方式
- 多级导航：根据路由深度调整返回逻辑
- 主题切换：增加亮/暗模式切换
- 个人入口扩展：可在个人中心页继续扩展设置项与账户操作