hookehuyr

docs: 更新项目文档和开发指南

添加 CLAUDE.md 项目开发指南文档,包含项目概述、常用命令、架构设计等详细信息
更新 README.md 中的待办事项列表,移除重复的后端配合说明
在项目规则文档中添加元信息描述
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 组件库.
......
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 * [ ] 补充单元测试
......