项目结构
移动端工程目录(youlai-app/src)核心结构:
text
src/
├── api/ # 接口封装
│ ├── auth.ts # 登录、验证码、刷新、登出
│ ├── user.ts # 用户信息、个人中心、密码修改
│ ├── role.ts # 角色管理
│ ├── dept.ts # 部门管理
│ ├── menu.ts # 菜单管理
│ ├── dict.ts # 字典管理
│ ├── notice.ts # 通知公告
│ ├── log.ts # 操作日志、访问统计
│ ├── file.ts # 文件上传
│ └── config.ts # 系统配置
├── components/ # 组件
│ ├── custom-navbar/ # 自定义导航栏
│ ├── custom-tree/ # 树形选择组件
│ ├── cu-date-query/ # 日期查询组件
│ └── qiun-data-charts/ # 图表组件
├── composables/ # 组合式函数
│ ├── useNavbar.ts # 导航栏高度计算
│ ├── useCountdown.ts # 倒计时
│ ├── useNavigation.ts # 导航跳转
│ ├── useRequest.ts # 请求封装
│ ├── useLoading.ts # 加载状态管理
│ ├── useTabbar.ts # TabBar 配置
│ ├── useTheme.ts # 主题切换
│ └── useSse.ts # 实时通信(SSE)
├── config/ # 应用配置
│ ├── index.ts # 配置入口
│ └── menu.ts # 工作台菜单配置
├── constants/ # 常量(token key、权限标识等)
├── enums/ # 枚举(API 业务码等)
├── layouts/ # 布局
│ ├── default.vue # 默认布局
│ └── tabbar.vue # TabBar 布局
├── pages/ # 页面
│ ├── index/ # 首页
│ ├── login/ # 登录页
│ ├── work/ # 工作台(用户/角色/部门/菜单等管理页面)
│ ├── mine/ # 我的(个人资料/账号安全/设置等页面)
│ └── webview/ # 内嵌网页
├── router/ # 路由守卫
├── store/ # Pinia 状态管理
│ ├── index.ts # 统一导出
│ └── modules/
│ ├── user.ts # 用户状态
│ └── theme.ts # 主题状态
├── styles/ # 全局样式
├── types/ # TypeScript 类型
├── utils/ # 工具函数
│ ├── request.ts # 请求封装与 token 注入
│ ├── auth.ts # 登录态判断、回跳
│ ├── permission.ts # 权限判断
│ ├── storage.ts # 存储封装
│ └── index.ts # 通用工具(debounce 等)
├── main.ts # 入口
└── App.vue # 根组件常用代码入口
| 文件 | 职责 |
|---|---|
utils/request.ts | 请求封装、token 注入、401 拦截 |
utils/auth.ts | 登录态判断、登录页跳转 |
utils/permission.ts | 权限/角色判断 |
composables/useNavbar.ts | 导航栏高度计算 |
config/menu.ts | 工作台菜单配置 |
constants/index.ts | 常量定义 |
TabBar 配置
TabBar 在 pages.config.ts 中配置,默认三个页签:
pages/index/index— 首页pages/work/index— 工作台pages/mine/index— 我的
