docs: 更新项目文档和开发指南
添加 CLAUDE.md 项目开发指南文档,包含项目概述、常用命令、架构设计等详细信息 更新 README.md 中的待办事项列表,移除重复的后端配合说明 在项目规则文档中添加元信息描述
Showing
3 changed files
with
129 additions
and
1 deletions
| 1 | +--- | ||
| 2 | +alwaysApply: false | ||
| 3 | +description: 项目基于 Taro4, 文档参考: https://docs.taro.zone/docs/. | ||
| 4 | +--- | ||
| 1 | 1. 项目基于 Taro4, 文档参考: https://docs.taro.zone/docs/. | 5 | 1. 项目基于 Taro4, 文档参考: https://docs.taro.zone/docs/. |
| 2 | 2. 项目中使用 Taro4 的 vue 写法编写. | 6 | 2. 项目中使用 Taro4 的 vue 写法编写. |
| 3 | 3. 项目中使用 NutUI4 组件库. | 7 | 3. 项目中使用 NutUI4 组件库. | ... | ... |
CLAUDE.md
0 → 100644
| 1 | +# CLAUDE.md(项目开发指南) | ||
| 2 | +本文档为 Claude Code(claude.ai/code)处理本仓库代码时提供操作指引。 | ||
| 3 | + | ||
| 4 | +## 项目概述 | ||
| 5 | +这是一款西园寺预约类微信小程序,由原有H5系统迁移改造而来,基于 Taro 4 + Vue 3 + NutUI 技术栈构建。 | ||
| 6 | + | ||
| 7 | +## 常用命令 | ||
| 8 | + | ||
| 9 | +### 开发环境启动 | ||
| 10 | +```bash | ||
| 11 | +pnpm install # 安装项目依赖 | ||
| 12 | +pnpm dev:weapp # 启动微信小程序开发模式 | ||
| 13 | +pnpm dev:h5 # 启动H5端开发模式 | ||
| 14 | +pnpm dev:alipay # 启动支付宝小程序开发模式 | ||
| 15 | +pnpm dev:tt # 启动抖音小程序开发模式 | ||
| 16 | +``` | ||
| 17 | + | ||
| 18 | +### 生产包构建 | ||
| 19 | +```bash | ||
| 20 | +pnpm build:weapp # 构建微信小程序生产包 | ||
| 21 | +pnpm build:h5 # 构建H5端生产包 | ||
| 22 | +``` | ||
| 23 | + | ||
| 24 | +## 架构设计 | ||
| 25 | + | ||
| 26 | +### 设计宽度体系 | ||
| 27 | +项目采用双设计宽度体系,配置文件路径为 `config/index.js`: | ||
| 28 | +- **NutUI 组件**:基准宽度 375px | ||
| 29 | +- **其他所有页面**:基准宽度 750px(Taro 默认值) | ||
| 30 | + | ||
| 31 | +### 路径别名 | ||
| 32 | +路径别名在 `config/index.js` 中配置,具体映射关系如下: | ||
| 33 | +- `@/utils` → `src/utils` | ||
| 34 | +- `@/components` → `src/components` | ||
| 35 | +- `@/images` → `src/assets/images` | ||
| 36 | +- `@/assets` → `src/assets` | ||
| 37 | +- `@/composables` → `src/composables` | ||
| 38 | +- `@/api` → `src/api` | ||
| 39 | +- `@/stores` → `src/stores` | ||
| 40 | +- `@/hooks` → `src/hooks` | ||
| 41 | + | ||
| 42 | +### 认证与授权流程 | ||
| 43 | + | ||
| 44 | +**核心文件**:`src/utils/authRedirect.js`、`src/utils/request.js`、`src/app.js` | ||
| 45 | + | ||
| 46 | +项目实现了具备自动会话刷新能力的完整认证流程,核心逻辑如下: | ||
| 47 | +1. **会话存储**:将 `sessionid` 存储在 Taro 缓存中,作为核心认证令牌 | ||
| 48 | +2. **启动静默认证**:小程序启动时,`src/app.js` 调用 `silentAuth()` 执行静默认证 | ||
| 49 | +3. **401 自动刷新**:`src/utils/request.js` 中的响应拦截器捕获 401 错误后,调用 `refreshSession()` 刷新会话并重试原请求 | ||
| 50 | +4. **认证页重定向**:若静默刷新失败,自动重定向至 `/pages/auth/index`,并保存跳转前的页面路径 | ||
| 51 | +5. **路由状态管理**:`src/stores/router.js` 持久化存储认证完成后的返回路径,用于认证成功后跳转 | ||
| 52 | + | ||
| 53 | +**关键实现细节**: | ||
| 54 | +- `silentAuth()` 和 `refreshSession()` 共享单例 `auth_promise`,避免并发场景下重复发起认证请求 | ||
| 55 | +- 请求拦截器每次发起请求时,从缓存中动态获取最新的 `sessionid` | ||
| 56 | +- 通过 `__is_retry` 标识位控制,防止请求无限重试循环 | ||
| 57 | + | ||
| 58 | +### API 层设计 | ||
| 59 | + | ||
| 60 | +**核心文件**:`src/api/index.js`、`src/api/fn.js`、`src/utils/request.js` | ||
| 61 | + | ||
| 62 | +- 所有 API 接口地址常量统一定义在 `src/api/index.js` 中 | ||
| 63 | +- 基于 `axios-miniprogram` 封装请求实例,并添加自定义请求/响应拦截器 | ||
| 64 | +- 基础请求 URL 和默认参数(`f`、`client_name`)在 `src/utils/config.js` 中配置 | ||
| 65 | +- API 函数命名规范:统一采用 `xxxAPI(params)` 格式 | ||
| 66 | + | ||
| 67 | +### 路由系统 | ||
| 68 | + | ||
| 69 | +**核心文件**:`src/hooks/useGo.js` | ||
| 70 | + | ||
| 71 | +封装自定义路由函数,核心特性如下: | ||
| 72 | +- 支持短路径写法(如 `'notice'` 或 `'/notice'`) | ||
| 73 | +- 自动补全为完整页面路径 `pages/notice/index` | ||
| 74 | +- 内置查询参数序列化处理逻辑 | ||
| 75 | +- 针对 tabbar 页面,自动使用 `switchTab` 方式跳转 | ||
| 76 | + | ||
| 77 | +**使用建议**:页面导航优先使用 `useGo()`,页面重定向优先使用 `useReplace()`。 | ||
| 78 | + | ||
| 79 | +### 样式方案 | ||
| 80 | +- **组件样式**:主要基于 Less 编写 | ||
| 81 | +- **工具类样式**:使用 TailwindCSS(小程序端通过 `weapp-tailwindcss` 插件做兼容处理) | ||
| 82 | +- **UI 组件库**:集成 NutUI 4.x,已在 `config/index.js` 中配置组件自动导入 | ||
| 83 | +- 为兼容小程序环境,禁用 Tailwind 的 `preflight` 样式重置功能 | ||
| 84 | + | ||
| 85 | +### 状态管理 | ||
| 86 | +- 采用 Pinia 做状态管理,配合 `taro-plugin-pinia` 插件实现适配 | ||
| 87 | +- 状态文件统一存放于 `src/stores/` 目录: | ||
| 88 | + - `router.js`:管理认证完成后的返回路径 | ||
| 89 | + - `main.js`、`host.js`、`counter.js`:存储其他应用级全局状态 | ||
| 90 | + | ||
| 91 | +### 离线支持 | ||
| 92 | +应用实现离线二维码核心功能,逻辑如下: | ||
| 93 | +- 小程序启动时、网络状态变化时,调用 `qrcodeListAPI()` 获取二维码列表 | ||
| 94 | +- 将处理后的二维码数据存储在 `OFFLINE_QR_DATA` 缓存键中 | ||
| 95 | +- 离线二维码页面路径:`pages/offlineBookingCode/index` | ||
| 96 | + | ||
| 97 | +## 页面结构 | ||
| 98 | +页面文件统一存放于 `src/pages/` 目录,遵循 `pages/[页面名称]/index.vue` 命名规范。 | ||
| 99 | + | ||
| 100 | +**核心页面清单**: | ||
| 101 | +- `index`:首页 | ||
| 102 | +- `auth`:授权/登录页 | ||
| 103 | +- `booking`:预约日期/时段选择页 | ||
| 104 | +- `submit`:预约确认页 | ||
| 105 | +- `bookingList`:用户预约列表页 | ||
| 106 | +- `bookingDetail`:预约详情页 | ||
| 107 | +- `visitorList`:访客管理页 | ||
| 108 | +- `addVisitor`:新增/编辑访客页 | ||
| 109 | +- `me`:个人中心页 | ||
| 110 | +- `search`:按身份证号查询二维码页 | ||
| 111 | +- `volunteerLogin`:志愿者管理员登录页 | ||
| 112 | +- `verificationResult`:票务核验结果页 | ||
| 113 | +- `offlineBookingCode`:离线预约码访问页 | ||
| 114 | + | ||
| 115 | +## 配置说明 | ||
| 116 | + | ||
| 117 | +### 环境配置 | ||
| 118 | +- 基础请求 URL 在 `src/utils/config.js` 中根据开发/生产环境自动切换 | ||
| 119 | +- 开发模式下提供带注释的 openid 覆盖配置,用于本地调试测试 | ||
| 120 | + | ||
| 121 | +### API 配置 | ||
| 122 | +- 默认请求参数在 `src/utils/config.js` 中配置 | ||
| 123 | +- 所有后端请求统一通过 `/srv/?a=...` 格式的接口转发 | ||
| 124 | +- 固定自定义参数:`f='reserve'`、`client_name='智慧西园寺'` |
| ... | @@ -65,6 +65,6 @@ | ... | @@ -65,6 +65,6 @@ |
| 65 | * [ ] 小程序授权流程有问题 - 后端配合 | 65 | * [ ] 小程序授权流程有问题 - 后端配合 |
| 66 | * [ ] 完善支付流程(目前为模拟/H5跳转)- 后端配合 | 66 | * [ ] 完善支付流程(目前为模拟/H5跳转)- 后端配合 |
| 67 | * [ ] 优化图片资源加载(考虑使用 CDN 或分包) | 67 | * [ ] 优化图片资源加载(考虑使用 CDN 或分包) |
| 68 | -* [ ] 弱网环境下的优化, 如: 用户端可以获取当前用户的预约码, 管理端可以根据预约码核销预约码 - 后端配合 | 68 | +* [ ] 弱网环境下的优化, 如: 用户端可以获取当前用户的预约码, 管理端可以根据预约码核销预约码 |
| 69 | * [ ] 增强网络请求的错误处理与重试机制 | 69 | * [ ] 增强网络请求的错误处理与重试机制 |
| 70 | * [ ] 补充单元测试 | 70 | * [ ] 补充单元测试 | ... | ... |
-
Please register or login to post a comment