hookehuyr

docs: 添加项目文档AGENTS.md

添加详细的项目文档,包含项目概述、常用命令、环境配置、技术栈与构建、目录结构、路由约定、请求约定、编码风格、验证建议和协作注意事项等内容,以便新成员快速了解项目。
Showing 1 changed file with 141 additions and 0 deletions
1 +# AGENTS.md
2 +
3 +## 项目概述
4 +
5 +本仓库是“童声无界”前端项目,`package.json` 包名为 `tjws`。项目基于 Vue 3、Vite 2、Vant 4、Pinia 和 vue-router,主要面向移动端 H5 场景。
6 +
7 +README 当前只包含简短说明:
8 +
9 +- 项目名:童声无界
10 +- 发布前需要切换到 `voice` 分支再推送
11 +
12 +## 常用命令
13 +
14 +- 本地开发:`npm run dev`
15 +- 指定 host 启动:`npm run start`
16 +- 构建:`npm run build`
17 +- 类型检查并构建:`npm run build-ts`
18 +- 预览构建结果:`npm run serve`
19 +- 构建并打包:`npm run build_tar`
20 +- 构建、打包、上传并清理:`npm run voice_upload`
21 +
22 +## 环境配置
23 +
24 +项目使用 Vite 环境变量。
25 +
26 +- `.env`
27 + - `VITE_PORT = 8006`
28 + - `VITE_PROXY_TARGET = http://voice.onwall.cn`
29 + - `VITE_PROXY_PREFIX = /srv/`
30 + - `VITE_OUTDIR = voice`
31 + - `VITE_CONSOLE = 0`
32 +- `.env.development`
33 + - `VITE_BASE = /`
34 + - 包含本地调试用 openid、B 端账号、验证码配置
35 +- `.env.production`
36 + - `VITE_BASE = /f/voice/`
37 + - 生产环境构建公共路径
38 +
39 +## 技术栈与构建
40 +
41 +- Vue 3 单文件组件
42 +- Vite 2
43 +- Vant 4 移动端组件库
44 +- Pinia 状态管理
45 +- vue-router 4
46 +- Less
47 +- Axios
48 +- `postcss-px-to-viewport`,设计稿宽度为 375,默认将 px 转为 vw
49 +- `unplugin-auto-import` 自动导入 Vue 和 vue-router API
50 +- `vite-plugin-dynamic-import` 支持更灵活的动态导入
51 +- `unplugin-vue-define-options` 支持 `<script setup>` 中定义组件名
52 +
53 +构建输出目录由 `VITE_OUTDIR` 控制,默认是 `voice`。生产公共路径由 `.env.production``VITE_BASE=/f/voice/` 控制。
54 +
55 +## 目录结构
56 +
57 +- `src/main.js`:应用入口,注册 Vue、Pinia、路由、Vant 组件和全局 `$http`
58 +- `src/App.vue`:根组件
59 +- `src/router.js`:路由入口,自动加载模块路由,并处理模拟动态路由
60 +- `src/route.js`:基础公共路由
61 +- `src/router/routes/modules/`:业务路由模块
62 + - `client/`:客户端/家长端路由
63 + - `me/`:个人中心路由
64 + - `business/`:B 端/老师端路由
65 + - `auth/`:授权相关路由
66 +- `src/views/client/`:客户端页面,如首页、选择幼儿园、书籍、视频详情、排行榜、捐赠等
67 +- `src/views/me/`:个人中心页面
68 +- `src/views/business/`:B 端页面
69 +- `src/components/`:业务组件
70 +- `src/composables/`:组合式逻辑
71 +- `src/api/`:接口封装
72 + - `C/`:客户端接口
73 + - `B/`:B 端接口
74 + - `wx/`:微信相关接口
75 +- `src/utils/`:工具函数、axios 封装、路由生成、分享、上传等
76 +- `src/assets/`:样式和静态资源
77 +- `build/proxy.js`:Vite 开发代理生成逻辑
78 +
79 +## 路由约定
80 +
81 +`src/router.js` 使用 `import.meta.globEager('@/router/routes/modules/**/*.js')` 自动加载所有模块路由。新增业务页面时,优先在对应模块下维护路由文件。
82 +
83 +路由使用 hash history:
84 +
85 +```js
86 +createWebHashHistory('/index.html')
87 +```
88 +
89 +客户端主路由位于 `src/router/routes/modules/client/index.js`,根路径 `/``/client/index` 都指向 `src/views/client/index.vue`
90 +
91 +## 请求约定
92 +
93 +Axios 封装在 `src/utils/axios.js`
94 +
95 +- 默认请求参数包含 `f: 'voice'`
96 +- GET 请求会追加时间戳,避免缓存
97 +- POST 请求默认使用 `qs.stringify` 序列化
98 +- 上传接口和七牛上传地址会跳过 POST 序列化
99 +- 响应 `code === 401` 时跳转 `/auth`,并携带当前 hash 和 `prefixAPI`
100 +- B 端出现“老师请先登录!”或“老师不存在!”时跳转 `/business/login`
101 +
102 +新增接口时应优先放入 `src/api/C``src/api/B``src/api/wx` 的对应分组。
103 +
104 +## 编码风格
105 +
106 +- 保持现有 JavaScript/Vue 风格,项目中 JS 文件较多,TypeScript 只在部分文件中使用
107 +- 优先复用现有组件、composables、工具函数和 API 封装
108 +- 页面样式以移动端为主,注意 px 会被转换为 vw
109 +- 不做无关重构,不随意调整旧页面结构
110 +- 修改路由、请求拦截、全局配置时要评估影响范围
111 +- 项目使用 Vant,新增移动端交互优先采用 Vant 组件或已有组件封装
112 +
113 +## 验证建议
114 +
115 +常规变更后至少运行:
116 +
117 +```bash
118 +npm run build
119 +```
120 +
121 +涉及类型或 TS 文件时可运行:
122 +
123 +```bash
124 +npm run build-ts
125 +```
126 +
127 +涉及页面交互时建议启动:
128 +
129 +```bash
130 +npm run dev
131 +```
132 +
133 +然后在浏览器中检查对应 hash 路由。
134 +
135 +## 协作注意事项
136 +
137 +- 不要覆盖用户未提交的改动;修改前先查看 `git status --short`
138 +- 发布相关操作涉及远程服务器和分支切换,执行前需要确认当前分支和用户意图
139 +- `voice_upload` 会构建、打包、上传、远程解压并清理本地产物,属于发布操作,不能在未确认时执行
140 +- `.env.development` 内有调试账号信息,避免无关改动
141 +- 生产环境路径依赖 `/f/voice/`,改动 `VITE_BASE``VITE_OUTDIR` 前要确认部署要求