AgentSkillsCN

project-page-structure

记录“大熊小窝”uni-app 页面结构:主包与子包、标签页、布局,以及路径约定。适用于定位哪一文件对应哪个页面、添加或移动页面,或解答有关路由与页面组织的问题时使用。

SKILL.md
--- frontmatter
name: project-page-structure
description: Documents the love-home (大熊小窝) uni-app page structure: main package vs subpackage, tab pages, layouts, and path conventions. Use when locating which file corresponds to which screen, adding or moving pages, or answering questions about routing and page organization.

项目页面结构(大熊小窝)

用于快速定位「哪个页面属于什么结构」、主包/分包划分、以及路由与布局约定。

一、总览

类型目录说明
主包src/pages/仅 4 个 Tab 页,带底部 tabBar
分包src/subPages/其余所有页面(登录、关于、打卡、碎碎念等)
布局src/layouts/tabbar(Tab 页)、default(分包等)

路由由 @uni-helper/vite-plugin-uni-pages 根据 src/pagessrc/subPages 自动生成;pages.config.ts 只配置 globalStyle 和 tabBar,不手写 pages 数组。


二、主包 Tab 页(src/pages/

所有主包页面都使用 layout: 'tabbar'(见各页 definePage({ layout: 'tabbar' }))。

路径路由名标题说明
pages/index/index.vuehome首页周年倒计时、下一件重要的事、屎一下/必做事打卡/碎碎念入口
pages/food/index.vuefood御膳房菜谱分类、膳单弹窗、编辑菜单入口
pages/memories/index.vuememories回忆Banner、碎碎念列表入口
pages/me/me.vueme我的头像、关于/登录/通知/个性化
  • 访问路径/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/index404 页
login/login.vue/subPages/login/login登录
login/register.vue/subPages/login/register注册
about/about.vue/subPages/about/about关于
about/alova.vue/subPages/about/alovaAlova 示例
check-in/index.vue/subPages/check-in/index打卡
demo/index.vue/subPages/demo/indexDemo
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.tsUniHelperPagessubPackages: ['src/subPages'],只此一个业务分包;不要使用 pages-fgpages-sub 等其它分包根目录。
  • 主题/标题pages.config.tsglobalStyle.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.vueregister.vue
关于 / Alovasrc/subPages/about/about.vuealova.vue
打卡 / 重要事项 / 碎碎念 / 编辑菜单 / 购物清单src/subPages/{check-in,important-things,mutter,edit-menu,shopping-list}/index.vue
404src/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/子目录/文件名