项目页面结构(大熊小窝)
用于快速定位「哪个页面属于什么结构」、主包/分包划分、以及路由与布局约定。
一、总览
| 类型 | 目录 | 说明 |
|---|---|---|
| 主包 | src/pages/ | 仅 4 个 Tab 页,带底部 tabBar |
| 分包 | src/subPages/ | 其余所有页面(登录、关于、打卡、碎碎念等) |
| 布局 | src/layouts/ | tabbar(Tab 页)、default(分包等) |
路由由 @uni-helper/vite-plugin-uni-pages 根据 src/pages 与 src/subPages 自动生成;pages.config.ts 只配置 globalStyle 和 tabBar,不手写 pages 数组。
二、主包 Tab 页(src/pages/)
所有主包页面都使用 layout: 'tabbar'(见各页 definePage({ layout: 'tabbar' }))。
| 路径 | 路由名 | 标题 | 说明 |
|---|---|---|---|
pages/index/index.vue | home | 首页 | 周年倒计时、下一件重要的事、屎一下/必做事打卡/碎碎念入口 |
pages/food/index.vue | food | 御膳房 | 菜谱分类、膳单弹窗、编辑菜单入口 |
pages/memories/index.vue | memories | 回忆 | Banner、碎碎念列表入口 |
pages/me/me.vue | me | 我的 | 头像、关于/登录/通知/个性化 |
- •访问路径:
/pages/index/index、/pages/food/index、/pages/memories/index、/pages/me/me - •Tab 切换:用
router.pushTab({ name: 'home'|'food'|'memories'|'me' });Tab 列表与图标在src/composables/useTabbar.ts(home/shop/heart/user)。
三、分包页(src/subPages/)
分包内页面使用 default 布局(无底部 tabBar),路径前缀 /subPages/。
| 目录/文件 | 访问路径 | 说明 |
|---|---|---|
404/index.vue | /subPages/404/index | 404 页 |
login/login.vue | /subPages/login/login | 登录 |
login/register.vue | /subPages/login/register | 注册 |
about/about.vue | /subPages/about/about | 关于 |
about/alova.vue | /subPages/about/alova | Alova 示例 |
check-in/index.vue | /subPages/check-in/index | 打卡 |
demo/index.vue | /subPages/demo/index | Demo |
demo/scroll.vue | /subPages/demo/scroll | 滚动 Demo |
edit-menu/index.vue | /subPages/edit-menu/index | 编辑菜单 |
important-things/index.vue | /subPages/important-things/index | 重要事项 |
mutter/index.vue | /subPages/mutter/index | 碎碎念 |
shopping-list/index.vue | /subPages/shopping-list/index | 购物清单 |
跳转示例:router.push('/subPages/login/login')、router.push('/subPages/about/about')。
四、路由常量(src/router/config.ts)
- •
LOGIN_PAGE→'/subPages/login/login' - •
REGISTER_PAGE→'/subPages/login/register' - •
NOT_FOUND_PAGE→'/subPages/404/index' - •
EXCLUDE_LOGIN_PATH_LIST:主包 4 个 Tab + 登录/注册/404 等免登录路径
新增需登录/免登录的页面时,在此维护。
五、布局与配置
- •tabbar 布局(
src/layouts/tabbar.vue):内层用wd-config-provider+wd-tabbar+wd-gap(底部安全区),供 4 个主包 Tab 使用。 - •default 布局(
src/layouts/default.vue):仅wd-config-provider,供分包及未指定 layout 的页面使用。 - •分包构建:
vite.config.ts中UniHelperPages的subPackages: ['src/subPages'],只此一个业务分包;不要使用pages-fg、pages-sub等其它分包根目录。 - •主题/标题:
pages.config.ts的globalStyle.navigationBarTitleText为「大熊小窝」;各页可在definePage({ style: { navigationBarTitleText: '...' } })里覆盖。
六、快速查找表
| 想找的页面 | 位置 |
|---|---|
| 首页(Tab) | src/pages/index/index.vue |
| 御膳房(Tab) | src/pages/food/index.vue |
| 回忆(Tab) | src/pages/memories/index.vue |
| 我的(Tab) | src/pages/me/me.vue |
| 登录/注册 | src/subPages/login/login.vue、register.vue |
| 关于 / Alova | src/subPages/about/about.vue、alova.vue |
| 打卡 / 重要事项 / 碎碎念 / 编辑菜单 / 购物清单 | src/subPages/{check-in,important-things,mutter,edit-menu,shopping-list}/index.vue |
| 404 | src/subPages/404/index.vue |
| Tab 列表与图标 | src/composables/useTabbar.ts |
| 路由常量 | src/router/config.ts |
新增页面时:若为 Tab 页则放在 src/pages/ 并设 layout: 'tabbar',且在 pages.config.ts 的 tabBar.list 增加一项;若为普通页则放在 src/subPages/ 对应子目录下,路径即 /subPages/子目录/文件名。