🖼️ 前端总览
前端代码统一在 frontend/ 下，包含两个工程：
| 工程 | 路径 | 状态 |
|---|---|---|
| Admin 管理端 | frontend/admin | Vue3 + TypeScript 后台管理端 |
| uni-app 客户端 | frontend/uniapp | uni-app Vue3 + TypeScript 跨端客户端 |
🧭 本章怎么读
前端文档分 Admin 与 uni-app 两条独立路线，按"先看总览，再读路由/请求，最后看编码规范"的顺序阅读最顺。如果只关心其中一端，可以只走对应路线。
Admin 路线
| 阅读阶段 | 建议阅读 | 目标 |
|---|---|---|
| 第1步 | Admin 总览 | 了解管理端目录结构、技术栈、配置入口 |
| 第2步 | Admin 路由与权限 | 看懂固定路由 + 后端菜单动态路由如何组合 |
| 第3步 | Admin 请求与模块 | 学会调用 /adminapi/* 接口、上传与模块约定 |
| 第4步 | Admin 组件 | 查阅可复用组件：弹层、媒体、表单控件、布局容器 |
| 第5步 | Admin 编码规范 | 写新页面前先对齐 Vue 写法、表单、表格、样式约定 |
uni-app 路线
| 阅读阶段 | 建议阅读 | 目标 |
|---|---|---|
| 第1步 | uni-app 总览 | 了解多端工程结构、入口文件、平台差异 |
| 第2步 | uni-app 页面与路由 | 学会维护 pages.json、subPackages、跳转规则 |
| 第3步 | uni-app 请求与登录 | 调用 /api/*、处理登录态与公开接口 |
| 第4步 | uni-app 组件 | 查阅基础组件和业务组件的用法 |
| 第5步 | uni-app Composables | 查阅分页、表单、上传、登录等组合式函数 |
| 第6步 | uni-app 编码规范 | 多端兼容、装修组件、Tailwind 等硬性规则 |
📍 前端构建产物
| 工程 | 开发源码 | 生产产物约定 |
|---|---|---|
| Admin | frontend/admin | public/admin |
| uni-app H5 | frontend/uniapp | public/h5 |
| 微信小程序 | frontend/uniapp | frontend/uniapp/dist/build/mp-weixin |
| App | frontend/uniapp | frontend/uniapp/dist/build/app |
🛣️ 根目录脚本
项目根 package.json 提供：
bash
# 安装管理端依赖
npm run admin:install
# 启动管理端开发服务
npm run admin:dev
# 构建管理端并发布到后端公开目录
npm run admin:build
# 安装 uni-app 依赖
npm run uniapp:install
# 构建 uni-app H5 端并发布到后端公开目录
npm run uniapp:build:h5
# 同时安装管理端与 uni-app 依赖
npm run frontend:install🌐 接口前缀
| 工程 | 请求封装 | 默认前缀 |
|---|---|---|
| Admin | frontend/admin/src/utils/request/index.ts | adminapi |
| uni-app | frontend/uniapp/src/utils/request.ts | api |
🚧 开发边界
- 新增后台页面时同步检查菜单初始数据。
- 新增用户端页面时同步更新
src/pages.json；页面路径以pages.json为准，跳转时可直接把页面name传给toRouter()。