hookehuyr

docs: 完善README以提供全面的项目概览和开发指南

补充详细的项目描述、技术栈、功能模块、运行构建指令、环境变量说明、项目结构、关键实现说明、可复用能力清单以及项目优缺点分析,便于新成员快速上手和项目维护。
Showing 1 changed file with 136 additions and 2 deletions
1 -西园寺预约 1 +## 西园寺预约(xysBooking)
2 +
3 +面向游客的预约 H5(以微信内打开为主),包含预约下单/支付/预约码展示/预约记录;同时提供义工端登录与扫码核销能力。
4 +
5 +### 技术栈
6 +
7 +- Vue 3 + Vue Router(Hash)
8 +- Vite(含动态导入增强、Vant 组件自动注册、AutoImport)
9 +- Pinia(全局状态、keep-alive include)
10 +- Vant 4(移动端 UI)
11 +- axios(统一拦截器与错误处理)
12 +- weixin-js-sdk(JSSDK 初始化、扫码)
13 +- Less(全局变量注入:src/assets/styles/base.less)
14 +
15 +### 业务功能概览
16 +
17 +- 预约链路
18 + - 预约须知:/notice
19 + - 选择日期/时段:/booking
20 + - 参观者管理(新增/删除/选择):/me、/addVisitor、/submit
21 + - 提交预约 + 支付跳转:/submit(支付落地页由后端返回/拼接)
22 + - 支付回跳反馈:/callback
23 + - 预约成功页:/success
24 + - 预约码展示:/bookingCode(组件化二维码展示)
25 + - 预约记录列表/详情/取消:/bookingList、/bookingDetail(含取消预约退款入口)
26 +- 查询链路
27 + - 身份证查询预约码:/search
28 +- 授权与环境
29 + - 微信授权页:/auth(401 自动跳转)
30 + - 微信扫码能力测试:/wxScanTest
31 +- 义工核销
32 + - 义工登录:/volunteerLogin
33 + - 扫码核销结果页:/verificationResult
34 +
35 +### 运行与构建
36 +
37 +- 安装依赖:`npm i`
38 +- 本地开发:`npm run dev`(或 `npm run start` 以 host 方式启动)
39 +- 构建:`npm run build`
40 +- 构建(含 vue-tsc):`npm run build-ts`
41 +
42 +### 发布
43 +
44 +- 一键编译上传(部署到 jcedu):`npm run jcedu_upload`
45 +- 其它环境:`npm run oa_upload``npm run dev_upload`
46 +- 旧发布脚本:publish.sh(本地构建后搬运到指定目录并提交)
47 +
48 +### 环境变量(.env*)
49 +
50 +- VITE_BASE:资源公共路径(生产通常为 `/f/reserve/`
51 +- VITE_PORT:本地端口
52 +- VITE_PROXY_PREFIX:代理前缀(默认 `/srv/`
53 +- VITE_PROXY_TARGET:代理目标
54 +- VITE_OUTDIR:构建输出目录名(默认 `reserve`
55 +- VITE_CONSOLE:是否开启调试(项目内按需使用)
56 +- VITE_OPENID / VITE_ID 等:开发/测试辅助字段(以实际后端规则为准)
57 +
58 +### 项目结构
59 +
60 +```text
61 +.
62 +├── build/ 开发代理配置
63 +├── src/
64 +│ ├── api/ 接口层(业务接口、微信相关、核销相关)
65 +│ │ ├── fn.js 接口统一包装:fn / fetch
66 +│ │ ├── index.js 预约业务 API 集合
67 +│ │ ├── redeem.js 义工核销 API
68 +│ │ └── wx/ 微信签名/JSAPI 列表/支付等
69 +│ ├── assets/ 静态资源(图片、全局 less)
70 +│ ├── common/ 公共工具(mixin/tool/vueuse 示例等)
71 +│ ├── components/ 通用组件(二维码、预约卡片等)
72 +│ ├── composables/ 组合式能力(登录流程、分享等)
73 +│ ├── hooks/ hooks(路由跳转、节流防抖、keep-alive 控制等)
74 +│ ├── store/ Pinia store
75 +│ ├── utils/ 工具库(axios、环境判断、版本更新检测等)
76 +│ ├── views/ 页面(与 route.js 一一对应)
77 +│ ├── App.vue 应用根组件(JSSDK 初始化、版本更新提示)
78 +│ ├── main.js 入口(注册 Vant、Pinia、Router,挂载 axios)
79 +│ ├── route.js 静态路由表(页面 meta.title)
80 +│ └── router.js 路由实例 + 动态路由注入(mock + generateRoute)
81 +├── vite.config.js Vite 配置(别名、代理、Less 注入、构建输出等)
82 +└── package.json 脚本与依赖
83 +```
84 +
85 +### 关键实现说明(便于快速定位)
86 +
87 +- 微信 JSSDK 全局初始化
88 + - 入口:[App.vue](file:///Users/huyirui/program/itomix/git/xysBooking/src/App.vue)
89 + - 行为:启动时调用后端签名接口 `wxJsAPI`,执行 `wx.config`,并把初始化 Promise 复用到 `window.__wx_ready_promise` 供页面等待
90 +- 接口统一返回/错误处理
91 + - axios 拦截器:[src/utils/axios.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/utils/axios.js)
92 + - 默认公共参数:`f=reserve``client_name=智慧西园寺`
93 + - 401 时跳转 `/auth`(核销端 reserve_admin 请求不跳)
94 + - API 包装:[src/api/fn.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/api/fn.js)
95 + - 约定后端结构:`{ code, data, msg, show }``code === 1` 视为成功
96 +- 版本更新提示(生产环境)
97 + - 实现:[src/utils/versionUpdater.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/utils/versionUpdater.js)
98 + - 思路:轮询拉取 `VITE_BASE` 指向的入口 HTML,对比 `<script>` 快照,提示用户刷新
99 +- 路由与页面
100 + - 路由表:[src/route.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/route.js)
101 + - 路由实例:[src/router.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/router.js)
102 +
103 +### 可复用能力(迁移到其它项目的候选清单)
104 +
105 +- 通用网络层
106 + - axios 拦截器基座(公共参数、401 重定向、可静默错误):[axios.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/utils/axios.js)
107 + - API 调用封装(`fn/fetch/uploadFn`):[fn.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/api/fn.js)
108 +- 微信能力基座
109 + - JSSDK 初始化复用(`window.__wx_ready_promise` 约定 + 统一入口初始化逻辑):[App.vue](file:///Users/huyirui/program/itomix/git/xysBooking/src/App.vue)
110 + - 扫码结果归一化/核销流程模板(适合复制到其它“扫码核销/验票”类项目):[verificationResult.vue](file:///Users/huyirui/program/itomix/git/xysBooking/src/views/verificationResult.vue)
111 +- 前端工程化工具
112 + - 版本更新检测器 Updater(适合静态部署、文件名带 hash 的站点):[versionUpdater.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/utils/versionUpdater.js)
113 + - 动态路由组装(后端路由 -> vue-router 结构):[generateRoute.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/utils/generateRoute.js)
114 + - 路由跳转 hooks(useGo/useReplace):[useGo.js](file:///Users/huyirui/program/itomix/git/xysBooking/src/hooks/useGo.js)
115 +- 业务 UI 组件雏形
116 + - 预约记录卡片、二维码展示组件(可沉淀为“订单卡片/票码”组件库能力):src/components/*
117 +
118 +### 项目优缺点(当前状态)
119 +
120 +**优点**
121 +
122 +- 业务主链路完整:预约 -> 支付 -> 预约码 -> 记录/详情/取消;另有核销端闭环
123 +- 网络层与接口层有统一入口,页面调用成本低(`fn(fetch.xxx)`
124 +- 微信 JSSDK 做了全局初始化复用,页面侧只需要等待 Promise
125 +- 生产环境具备“版本更新提示”,降低缓存导致的线上问题
126 +- Vite 工具链与 Vant 按需自动注册已接入,上手开发快
127 +
128 +**缺点 / 风险点**
129 +
130 +- 包管理与锁文件混用(npm/yarn lock 同时存在,未见 pnpm-lock),依赖一致性风险较高
131 +- 缺少显式的 `lint/test` 脚本与 CI 校验,回归风险主要依赖人工
132 +- `router.js` 里使用 `import.meta.globEager`;在 Vite v3+ 已废弃,建议改为 `import.meta.glob('...', { eager: true })`(来源:https://v3.vitejs.dev/guide/migration)
133 +- 项目内存在 TypeScript 相关产物/依赖(d.ts、tsconfig、vue-tsc),但主体代码以 JS 为主,规范不够统一
134 +- `generatePackage.js` 统一导出常用依赖虽然省 import,但会增加页面与项目工具集的耦合度(迁移/重构成本上升)
135 +
136 +---
2 137
3 库:git@gitlab.kmlab.com:hooke1234/xysBooking.git 138 库:git@gitlab.kmlab.com:hooke1234/xysBooking.git
4 -编译上传:jcedu_upload 命令
......