hookehuyr

docs(PLAN): 添加前端开发计划文档

添加详细的前端开发计划文档,包含:
- 基于20个工作日的调整版开发计划,明确P0/P1/P2优先级
- 完整的技术栈说明(Taro 4 + Vue 3 + NutUI 4 + Pinia)
- 详细的目录结构规划和页面路由配置
- 核心功能模块设计(计划书、资料库、AI问答)
- API接口对接规范和UI设计规范
- 开发任务分解和里程碑时间表
- 安全措施和测试要点
1 +# 臻奇智荟圈小程序 - 前端开发计划(调整版)
2 +
3 +## 📋 项目概览
4 +
5 +### 项目信息
6 +- **项目名称**: 臻奇智荟圈小程序
7 +- **技术栈**: Taro 4 + Vue 3 + NutUI 4 + Pinia
8 +- **开发周期**: 2026-01-26 至 2026-02-24
9 +- **实际工作日**: **20天**(剔除春节假期2026-02-15至02-23)
10 +
11 +### ⚠️ 时间评估:**非常紧迫**
12 +- 原计划:30天(5周)
13 +- 实际工作日:20天
14 +- **时间压缩:33%**
15 +- **建议策略**:优先MVP核心功能,部分功能可延后或简化
16 +
17 +---
18 +
19 +## 📅 实际工作日计算
20 +
21 +### 1月(6个工作日)
22 +- 26(一) ✅、27(二) ✅、28(三) ✅、29(四) ✅、30(五) ✅、31(六) ✅
23 +
24 +### 2月(14个工作日)
25 +- **春节前**:1(日)、2(一) ✅、3(二) ✅、4(三) ✅、5(四) ✅、6(五) ✅、7(六) ✅、8(日) ✅、9(一) ✅、10(二) ✅、11(三) ✅、12(四) ✅、13(五) ✅、14(六) ✅
26 +- **春节假期**:15(日) 🏮 至 23(一) 🏮 **(9天假期)**
27 +- **春节后**:24(二) ✅
28 +
29 +**总计:6 + 14 = 20个工作日**
30 +
31 +---
32 +
33 +## 🎯 功能优先级调整
34 +
35 +### P0 - 核心功能(必须完成)
36 +1. ✅ 计划书提交模块
37 +2. ✅ 订单列表与详情
38 +3. ✅ 资料库首页与列表
39 +4. ✅ 资料在线预览(PDF/视频)
40 +5. ✅ 微信登录与权限控制
41 +
42 +### P1 - 重要功能(尽量完成)
43 +1. ⚠️ 资料搜索功能
44 +2. ⚠️ 消息通知
45 +3. ⚠️ 个人中心完善
46 +
47 +### P2 - 可延后/简化
48 +1. ⏸️ AI问答模块(可作为二期功能)
49 +2. ⏸️ 海报生成(可延后)
50 +3. ⏸️ 资料下载水印(可简化)
51 +
52 +**建议方案**:优先完成 P0 + P1,AI问答和海报生成可作为二期迭代。
53 +
54 +---
55 +
56 +## 📅 调整后的开发计划
57 +
58 +### 第1周:基础架构 + 计划书模块(1月26日 - 2月1日,7天)
59 +
60 +#### Day 1-2(1/26-1/27):项目初始化与基础框架
61 +**目标**:搭建项目基础架构
62 +
63 +**前端任务**
64 +- [ ] 创建页面目录结构(按模块划分)
65 +- [ ] 配置路由(app.config.js)
66 +- [ ] 配置 TabBar(4个主入口)
67 +- [ ] 创建 Store 模块(user.js, order.js, material.js)
68 +- [ ] 配置主题色和全局样式
69 +- [ ] 创建公共组件目录结构
70 +
71 +**交付物**
72 +- 项目基础框架可运行
73 +- 首页空白页面可访问
74 +
75 +#### Day 3-4(1/28-1/29):首页与个人中心
76 +**目标**:完成基础页面框架
77 +
78 +**前端任务**
79 +- [ ] 开发首页(工作台)
80 + - [ ] 顶部欢迎区域
81 + - [ ] 快捷入口(3个卡片)
82 + - [ ] 待处理订单提醒(静态数据)
83 +- [ ] 开发个人中心
84 + - [ ] 用户信息展示
85 + - [ ] 基础菜单项
86 +- [ ] 开发消息通知列表页面(静态数据)
87 +- [ ] 对接用户信息 API
88 +- [ ] 微信登录流程联调(使用现有 authRedirect.js)
89 +
90 +**交付物**
91 +- 首页可访问,展示静态内容
92 +- 个人中心可访问
93 +- 微信登录流程正常
94 +
95 +#### Day 5-7(1/30-2/1):计划书提交页面(核心功能)
96 +**目标**:完成计划书提交流程
97 +
98 +**前端任务**
99 +- [ ] 开发计划书提交页面
100 + - [ ] 表单UI布局(7个字段)
101 + - [ ] 表单验证规则
102 + - [ ] 产品下拉选择(对接API)
103 + - [ ] 缴费年限联动(根据产品动态加载)
104 + - [ ] 金额输入验证(数字格式)
105 + - [ ] 年龄选择器(18-65岁)
106 + - [ ] 性别/货币单选
107 + - [ ] 备注文本框
108 +- [ ] 提交功能对接
109 + - [ ] 表单数据提交到后端
110 + - [ ] Loading状态
111 + - [ ] 成功/失败提示
112 + - [ ] 提交成功后跳转到订单列表
113 +- [ ] 对接订单创建 API
114 +
115 +**交付物**
116 +- 计划书提交页面可正常提交数据
117 +- 表单验证完整
118 +- 与后端API联调通过
119 +
120 +---
121 +
122 +### 第2周:订单列表 + 资料库模块(2月2日 - 2月8日,7天)
123 +
124 +#### Day 1-2(2/2-2/3):订单列表与详情
125 +**目标**:完成订单查看功能
126 +
127 +**前端任务**
128 +- [ ] 开发订单列表页面
129 + - [ ] 订单卡片组件(OrderCard)
130 + - [ ] 订单状态标签(不同颜色)
131 + - [ ] 下拉刷新
132 + - [ ] 上拉加载更多
133 + - [ ] 空状态提示
134 +- [ ] 开发订单详情页面
135 + - [ ] 订单基本信息展示
136 + - [ ] 客户信息卡片
137 + - [ ] 产品信息卡片
138 + - [ ] 备注信息展示
139 + - [ ] 状态流转时间线(使用Steps组件)
140 + - [ ] PDF预览入口(显示按钮,功能可后续完善)
141 +- [ ] 对接订单列表/详情 API
142 +- [ ] 测试订单查看流程
143 +
144 +**交付物**
145 +- 订单列表可正常展示
146 +- 订单详情可正常查看
147 +- 支持下拉刷新和分页加载
148 +
149 +#### Day 3-5(2/4-2/6):资料库首页与列表
150 +**目标**:完成资料库基础功能
151 +
152 +**前端任务**
153 +- [ ] 开发资料库首页
154 + - [ ] 分类导航(Grid布局,4个分类)
155 + - [ ] 搜索入口(跳转到搜索页)
156 + - [ ] 最新资料列表(横向滚动)
157 + - [ ] 热门资料列表(横向滚动)
158 +- [ ] 开发资料列表页面
159 + - [ ] 分类标题展示
160 + - [ ] 子分类筛选(Dropdown)
161 + - [ ] 资料列表项组件(MaterialItem)
162 + - [ ] 文件类型图标(PDF/视频/音频/图片)
163 + - [ ] 下拉刷新、上拉加载
164 +- [ ] 对接资料分类和列表 API
165 +- [ ] 点击资料项跳转到详情页
166 +
167 +**交付物**
168 +- 资料库首页可正常访问
169 +- 资料列表可正常展示
170 +- 支持按分类查看
171 +
172 +#### Day 6-7(2/7-2/8):资料详情与预览(核心难点)
173 +**目标**:完成资料在线预览功能
174 +
175 +**前端任务**
176 +- [ ] 开发资料详情页面
177 + - [ ] 资料信息展示(标题、分类、标签、时间)
178 + - [ ] 查看次数统计
179 +- [ ] **PDF在线预览功能**(重点)
180 + - [ ] 集成 pdf.js 库
181 + - [ ] PDF渲染组件
182 + - [ ] 翻页功能
183 + - [ ] 加载状态
184 + - [ ] 错误处理
185 +- [ ] **视频播放功能**
186 + - [ ] 使用 NutUI Video 组件
187 + - [ ] 播放控制
188 + - [ ] 全屏支持
189 +- [ ] **图片查看功能**
190 + - [ ] 图片预览组件
191 + - [ ] 缩放功能
192 + - [ ] 左右滑动切换
193 +- [ ] **安全措施(简化版)**
194 + - [ ] 添加用户名水印(图片覆盖层)
195 + - [ ] 禁用长按菜单(CSS样式)
196 + - [ ] 禁用右键菜单(web-view配置)
197 +- [ ] 对接资料详情 API
198 +
199 +**交付物**
200 +- PDF可在线预览
201 +- 视频/音频可正常播放
202 +- 图片可正常查看
203 +- 基础安全措施到位
204 +
205 +---
206 +
207 +### 第3周:资料搜索 + 完善优化(2月9日 - 2月14日,6天)
208 +
209 +#### Day 1-2(2/9-2/10):资料搜索功能
210 +**目标**:完成资料搜索
211 +
212 +**前端任务**
213 +- [ ] 开发资料搜索页面
214 + - [ ] 搜索输入框
215 + - [ ] 搜索按钮
216 + - [ ] 分类筛选(Dropdown)
217 + - [ ] 标签筛选(Tag选择)
218 + - [ ] 搜索结果列表
219 + - [ ] 关键词高亮
220 + - [ ] 搜索历史(本地存储)
221 + - [ ] 空状态提示
222 + - [ ] 清空历史功能
223 +- [ ] 防抖优化(搜索输入)
224 +- [ ] 对接资料搜索 API
225 +- [ ] 测试搜索功能
226 +
227 +**交付物**
228 +- 搜索功能正常
229 +- 支持关键词、分类、标签筛选
230 +- 搜索结果高亮显示
231 +
232 +#### Day 3-4(2/11-2/12):消息通知与权限控制
233 +**目标**:完善辅助功能
234 +
235 +**前端任务**
236 +- [ ] 完善消息通知功能
237 + - [ ] 订阅消息配置
238 + - [ ] 消息接收逻辑
239 + - [ ] 消息列表展示
240 + - [ ] 点击消息跳转到对应页面
241 +- [ ] 权限控制完善
242 + - [ ] 用户角色判断(普通用户/管理员)
243 + - [ ] 管理员入口显示/隐藏
244 + - [ ] 权限守卫(路由拦截)
245 +- [ ] 个人中心完善
246 + - [ ] 清除缓存功能
247 + - [ ] 关于我们页面
248 + - [ ] 退出登录功能
249 +- [ ] 对接消息通知 API
250 +
251 +**交付物**
252 +- 消息通知功能正常
253 +- 权限控制完善
254 +- 个人中心功能完整
255 +
256 +#### Day 5-6(2/13-2/14):全面测试与优化
257 +**目标**:MVP功能测试与优化
258 +
259 +**前端任务**
260 +- [ ] 功能回归测试
261 + - [ ] 计划书提交流程
262 + - [ ] 订单查看流程
263 + - [ ] 资料库查看流程
264 + - [ ] 资料搜索流程
265 + - [ ] 消息通知流程
266 +- [ ] 性能优化
267 + - [ ] 首屏加载优化
268 + - [ ] 列表滚动性能
269 + - [ ] 图片懒加载
270 + - [ ] 请求优化(合并、缓存)
271 +- [ ] 用户体验优化
272 + - [ ] Loading状态统一
273 + - [ ] 错误提示优化
274 + - [ ] 空状态提示完善
275 + - [ ] 弱网络提示
276 +- [ ] Bug修复
277 + - [ ] 修复测试中发现的问题
278 + - [ ] 兼容性问题修复
279 +
280 +**交付物**
281 +- 所有P0功能测试通过
282 +- 性能达到要求
283 +- 用户体验流畅
284 +
285 +---
286 +
287 +### 第4周:春节假期(2月15日 - 2月23日,9天)
288 +
289 +**🏮 春节假期 🏮**
290 +
291 +**建议**
292 +- 休息放松
293 +- 思考二期功能(AI问答、海报生成)
294 +- 准备上线资料
295 +
296 +---
297 +
298 +### 第5周:上线准备(2月24日,1天)
299 +
300 +#### Day 1(2/24):上线准备
301 +**目标**:准备上线
302 +
303 +**前端任务**
304 +- [ ] 生产环境配置
305 + - [ ] 检查环境变量配置
306 + - [ ] 配置生产环境API地址
307 + - [ ] 检查CDN配置
308 +- [ ] 代码检查
309 + - [ ] ESLint检查
310 + - [ ] 代码清理(移除debug代码、console.log)
311 + - [ ] 代码压缩
312 +- [ ] 小程序提交准备
313 + - [ ] 版本号更新
314 + - [ ] 隐私协议配置
315 + - [ ] 用户保护指引
316 + - [ ] 服务器域名配置
317 +- [ ] 提交微信审核
318 + - [ ] 准备审核截图
319 + - [ ] 填写审核说明
320 + - [ ] 提交审核
321 +
322 +**交付物**
323 +- 小程序提交审核
324 +- 上线文档准备完成
325 +
326 +---
327 +
328 +## 📊 进度跟踪表
329 +
330 +### 功能模块完成情况
331 +
332 +| 模块 | 功能 | 优先级 | 计划完成日期 | 实际完成日期 | 状态 |
333 +|-----|------|-------|-------------|-------------|------|
334 +| **基础框架** | 项目初始化 | P0 | 1/27 | | ⬜ |
335 +| | 首页 | P0 | 1/29 | | ⬜ |
336 +| | 个人中心 | P1 | 1/29 | | ⬜ |
337 +| | 消息通知 | P1 | 2/12 | | ⬜ |
338 +| **计划书模块** | 提交页面 | P0 | 2/1 | | ⬜ |
339 +| | 订单列表 | P0 | 2/3 | | ⬜ |
340 +| | 订单详情 | P0 | 2/3 | | ⬜ |
341 +| **资料库模块** | 资料库首页 | P0 | 2/6 | | ⬜ |
342 +| | 资料列表 | P0 | 2/6 | | ⬜ |
343 +| | 资料详情 | P0 | 2/8 | | ⬜ |
344 +| | PDF预览 | P0 | 2/8 | | ⬜ |
345 +| | 视频/图片预览 | P0 | 2/8 | | ⬜ |
346 +| **搜索功能** | 资料搜索 | P1 | 2/10 | | ⬜ |
347 +| **优化与测试** | 性能优化 | P1 | 2/14 | | ⬜ |
348 +| | Bug修复 | P1 | 2/14 | | ⬜ |
349 +| | 兼容性测试 | P1 | 2/14 | | ⬜ |
350 +
351 +**图例**:⬜ 未开始 | 🟡 进行中 | ✅ 已完成 | ⏸️ 延后/取消
352 +
353 +---
354 +
355 +## 🎯 二期功能规划(待定)
356 +
357 +以下功能可作为二期迭代,在项目上线后开发:
358 +
359 +### AI问答模块(预计5天)
360 +- [ ] AI聊天页面UI
361 +- [ ] 消息列表组件
362 +- [ ] Markdown渲染
363 +- [ ] 对接腾讯元宝AI API
364 +- [ ] 多轮对话功能
365 +
366 +### 海报生成功能(预计3天)
367 +- [ ] 海报查看组件
368 +- [ ] 海报保存/分享
369 +- [ ] 对接海报生成API
370 +
371 +### 高级安全功能(预计2天)
372 +- [ ] 图片切片展示(防止完整下载)
373 +- [ ] 动态水印(实时时间+用户信息)
374 +- [ ] 截屏检测(高级功能)
375 +
376 +### 数据统计(预计2天)
377 +- [ ] 用户行为统计
378 +- [ ] 资料查看统计
379 +- [ ] 热点分析
380 +
381 +---
382 +
383 +## ⚠️ 风险提示
384 +
385 +### 时间风险 - 🔴 高风险
386 +- **风险描述**:实际工作日仅20天,时间非常紧张
387 +- **应对策略**
388 + 1. 严格控制需求变更
389 + 2. 优先P0功能,P1/P2功能可延后
390 + 3. 每日跟进进度,及时调整
391 + 4. 预留春节前2天作为缓冲时间
392 +
393 +### 技术风险 - 🟡 中风险
394 +- **风险描述**:PDF预览、禁止下载等技术难点
395 +- **应对策略**
396 + 1. PDF预览优先使用成熟方案(pdf.js)
397 + 2. 禁止下载采用多层防护(前端+后端)
398 + 3. 技术预研,准备备选方案
399 +
400 +### 联调风险 - 🟡 中风险
401 +- **风险描述**:前后端联调时间不确定
402 +- **应对策略**
403 + 1. 尽早与后端确认API接口
404 + 2. 使用Mock数据进行前端开发
405 + 3. 关键接口优先联调
406 +
407 +### 审核风险 - 🟡 中风险
408 +- **风险描述**:小程序审核可能不通过或耗时较长
409 +- **应对策略**
410 + 1. 提前准备审核资料
411 + 2. 仔细阅读审核规范
412 + 3. 预留3-5天审核时间
413 +
414 +---
415 +
416 +## 📝 每日工作建议
417 +
418 +### 每日必做
419 +1. 早上:查看今日任务清单
420 +2. 开发:按优先级完成任务
421 +3. 晚上:更新进度跟踪表
422 +4. 遇到问题:及时沟通,不要拖延
423 +
424 +### 每周必做
425 +1. 周一:查看本周任务
426 +2. 周五:总结本周进度
427 +3. 提交代码:每日至少提交一次
428 +4. 代码审查:核心功能提交前审查
429 +
430 +### 里程碑检查点
431 +- **2/1**:计划书提交功能完成
432 +- **2/8**:资料库核心功能完成
433 +- **2/14**:MVP功能测试通过
434 +- **2/24**:小程序提交审核
435 +
436 +---
437 +
438 +## 🚀 开发建议
439 +
440 +### 1. 快速启动
441 +- 直接复制现有项目结构
442 +- 复用现有组件和工具函数
443 +- 不要过度设计,MVP优先
444 +
445 +### 2. 渐进式开发
446 +- 先完成核心流程,再完善细节
447 +- 先实现功能,再优化体验
448 +- 先完成开发,再做测试
449 +
450 +### 3. 充分复用
451 +- NutUI组件优先,减少自定义
452 +- 公共组件及时抽取
453 +- 工具函数统一管理
454 +
455 +### 4. 及时沟通
456 +- API接口尽早确认
457 +- 需求变更及时反馈
458 +- 进度延误及时上报
459 +
460 +### 5. 质量把控
461 +- 核心功能必须测试
462 +- 代码审查不能省
463 +- 文档注释要清晰
464 +
465 +---
466 +
467 +## 📞 紧急联系方式
468 +
469 +- **前端负责人**[待填写]
470 +- **后端负责人**[待填写]
471 +- **项目经理**[待填写]
472 +
473 +---
474 +
475 +## 📌 总结
476 +
477 +### 核心要点
478 +1. **实际工作日:20天**(剔除春节9天假期)
479 +2. **时间评估:非常紧迫**,必须严格控制范围
480 +3. **优先级明确**:P0必须完成,P1尽量完成,P2可延后
481 +4. **里程碑清晰**:2/14完成MVP,2/24提交审核
482 +
483 +### 成功关键
484 +- ✅ 专注核心功能,不做过度设计
485 +- ✅ 每日跟进进度,及时调整
486 +- ✅ 充分复用现有资源
487 +- ✅ 及时沟通,避免阻塞
488 +
489 +### 预期结果
490 +按照这个计划,可以在20天内完成一个功能完整的MVP版本,满足核心业务需求。AI问答和海报生成等高级功能可以作为二期迭代,在项目上线后继续开发。
491 +
492 +---
493 +
494 +**文档版本**: v2.0(调整版)
495 +**最后更新**: 2026-01-27
496 +**工作日**: 20天
497 +**状态**: 待审核
1 +# 臻奇智荟圈小程序 - 前端开发计划
2 +
3 +## 📋 项目概览
4 +
5 +### 项目信息
6 +- **项目名称**: 臻奇智荟圈小程序
7 +- **开发周期**: 2026-01-26 至 2026-02-24(30天)
8 +- **技术栈**: Taro 4 + Vue 3 + NutUI 4 + Pinia
9 +- **设计宽度**: 750px(自定义组件)/ 375px(NutUI组件)
10 +
11 +### 开发目标
12 +基于现有 Taro 4 + Vue 3 模板,开发服务保险团队内部同事的微信小程序,实现计划书生成、资料库管理、AI问答三大核心功能。
13 +
14 +---
15 +
16 +## 🏗️ 应用架构
17 +
18 +### 目录结构规划
19 +
20 +```
21 +src/
22 +├── api/ # API接口定义
23 +│ ├── index.js # API入口
24 +│ ├── fn.js # 请求包装器
25 +│ ├── order.js # 订单相关API
26 +│ ├── material.js # 资料库相关API
27 +│ ├── ai.js # AI问答相关API
28 +│ └── user.js # 用户相关API
29 +
30 +├── assets/ # 静态资源
31 +│ └── images/ # 图片资源
32 +
33 +├── components/ # 公共组件
34 +│ ├── page-container/ # 页面容器组件
35 +│ ├── order-card/ # 订单卡片组件
36 +│ ├── material-item/ # 资料列表项组件
37 +│ ├── file-preview/ # 文件预览组件(PDF/视频/图片)
38 +│ └── chat-message/ # 聊天消息组件
39 +
40 +├── composables/ # 组合式函数
41 +│ ├── useAuth.js # 认证相关
42 +│ ├── useRequest.js # 请求封装
43 +│ └── useUpload.js # 文件上传
44 +
45 +├── pages/ # 页面
46 +│ ├── index/ # 首页(工作台)
47 +│ ├── order/
48 +│ │ ├── submit/ # 提交计划书申请
49 +│ │ ├── list/ # 我的订单列表
50 +│ │ └── detail/ # 订单详情
51 +│ ├── material/
52 +│ │ ├── index/ # 资料库首页
53 +│ │ ├── list/ # 资料列表
54 +│ │ ├── detail/ # 资料详情(PDF/视频预览)
55 +│ │ └── search/ # 资料搜索
56 +│ ├── ai/
57 +│ │ └── chat/ # AI问答对话页面
58 +│ ├── notifications/ # 消息通知列表
59 +│ ├── profile/ # 个人中心
60 +│ └── auth/ # 授权登录(已有)
61 +
62 +├── stores/ # 状态管理
63 +│ ├── main.js # 主Store
64 +│ ├── router.js # 路由Store(已有)
65 +│ ├── user.js # 用户信息Store
66 +│ ├── order.js # 订单Store
67 +│ └── material.js # 资料库Store
68 +
69 +├── utils/ # 工具函数
70 +│ ├── authRedirect.js # 认证跳转(已有)
71 +│ ├── request.js # 请求封装(已有)
72 +│ ├── tools.js # 工具函数(已有)
73 +│ ├── config.js # 配置文件(已有)
74 +│ ├── validate.js # 表单验证
75 +│ └── format.js # 格式化工具
76 +
77 +├── hooks/ # Hooks
78 +│ └── useGo.js # 导航Hook(已有)
79 +
80 +├── app.config.js # 应用配置(路由、tabBar等)
81 +└── app.js # 应用入口
82 +```
83 +
84 +### 页面路由规划
85 +
86 +| 页面路径 | 页面名称 | 需要登录 | 说明 |
87 +|---------|---------|---------|------|
88 +| /pages/index/index | 首页/工作台 | ✅ | 展示快捷入口、待处理订单、最新资料 |
89 +| /pages/order/submit | 提交计划书申请 | ✅ | 表单提交页面 |
90 +| /pages/order/list | 我的订单 | ✅ | 订单列表(按状态筛选) |
91 +| /pages/order/detail | 订单详情 | ✅ | 查看订单详情、PDF预览、海报查看 |
92 +| /pages/material/index | 资料库首页 | ✅ | 分类导航、热门资料 |
93 +| /pages/material/list | 资料列表 | ✅ | 按分类查看资料 |
94 +| /pages/material/detail | 资料详情 | ✅ | PDF/视频/图片预览(禁止下载) |
95 +| /pages/material/search | 资料搜索 | ✅ | 搜索资料 |
96 +| /pages/ai/chat | AI问答 | ✅ | 对话式AI交互 |
97 +| /pages/notifications | 消息通知 | ✅ | 系统消息列表 |
98 +| /pages/profile | 个人中心 | ✅ | 用户信息、设置 |
99 +| /pages/auth/index | 授权登录 | ❌ | 微信登录(已有) |
100 +
101 +### TabBar 配置
102 +
103 +```javascript
104 +// app.config.js
105 +tabBar: {
106 + color: '#999999',
107 + selectedColor: '#007AFF',
108 + backgroundColor: '#ffffff',
109 + borderStyle: 'black',
110 + list: [
111 + {
112 + pagePath: 'pages/index/index',
113 + text: '工作台',
114 + iconPath: 'assets/images/tab-home.png',
115 + selectedIconPath: 'assets/images/tab-home-active.png'
116 + },
117 + {
118 + pagePath: 'pages/material/index/index',
119 + text: '资料库',
120 + iconPath: 'assets/images/tab-material.png',
121 + selectedIconPath: 'assets/images/tab-material-active.png'
122 + },
123 + {
124 + pagePath: 'pages/ai/chat/index',
125 + text: 'AI助手',
126 + iconPath: 'assets/images/tab-ai.png',
127 + selectedIconPath: 'assets/images/tab-ai-active.png'
128 + },
129 + {
130 + pagePath: 'pages/profile/index',
131 + text: '我的',
132 + iconPath: 'assets/images/tab-profile.png',
133 + selectedIconPath: 'assets/images/tab-profile-active.png'
134 + }
135 + ]
136 +}
137 +```
138 +
139 +---
140 +
141 +## 📱 核心功能模块设计
142 +
143 +### 模块1:计划书生成模块
144 +
145 +#### 1.1 提交计划书页面 (`/pages/order/submit/index.vue`)
146 +
147 +**功能需求**
148 +- 7-8个核心字段输入
149 +- 表单验证
150 +- 产品和缴费年限联动
151 +- 提交成功后跳转到订单列表
152 +
153 +**页面布局**
154 +```
155 +┌─────────────────────────────┐
156 +│ 提交计划书申请 │
157 +├─────────────────────────────┤
158 +│ │
159 +│ 客户姓名 │
160 +│ [__________________] │
161 +│ │
162 +│ 客户性别 ○男 ○女 │
163 +│ │
164 +│ 客户年龄 │
165 +│ [选择器 ▼] 18-65岁 │
166 +│ │
167 +│ 产品名称 │
168 +│ [下拉选择 ▼] │
169 +│ │
170 +│ 缴费年限 │
171 +│ [下拉选择 ▼] │
172 +│ │
173 +│ 货币类型 ○美元 ○港币 ○人民币 │
174 +│ │
175 +│ 总保费金额 │
176 +│ [__________________] │
177 +│ │
178 +│ 备注栏(选填) │
179 +│ [__________________] │
180 +│ [__________________] │
181 +│ │
182 +│ ┌─────────────────────┐ │
183 +│ │ 提交申请 │ │
184 +│ └─────────────────────┘ │
185 +│ │
186 +└─────────────────────────────┘
187 +```
188 +
189 +**表单字段设计**
190 +```javascript
191 +const formData = reactive({
192 + customerName: '', // 客户姓名(必填,2-20字符)
193 + customerGender: '', // 客户性别(必填,male/female)
194 + customerAge: null, // 客户年龄(必填,18-65)
195 + productName: '', // 产品名称(必填,从产品列表选择)
196 + paymentPeriod: '', // 缴费年限(必填,根据产品动态加载)
197 + currencyType: '', // 货币类型(必填,USD/HKD/CNY)
198 + totalAmount: '', // 总保费金额(必填,数字)
199 + remark: '' // 备注(选填,最多500字符)
200 +})
201 +```
202 +
203 +**表单验证规则**
204 +```javascript
205 +// utils/validate.js
206 +export const orderFormRules = {
207 + customerName: [
208 + { required: true, message: '请输入客户姓名' },
209 + { minLength: 2, maxLength: 20, message: '姓名长度为2-20个字符' }
210 + ],
211 + customerGender: [
212 + { required: true, message: '请选择客户性别' }
213 + ],
214 + customerAge: [
215 + { required: true, message: '请选择客户年龄' },
216 + { type: 'number', min: 18, max: 65, message: '年龄范围为18-65岁' }
217 + ],
218 + productName: [
219 + { required: true, message: '请选择产品名称' }
220 + ],
221 + paymentPeriod: [
222 + { required: true, message: '请选择缴费年限' }
223 + ],
224 + currencyType: [
225 + { required: true, message: '请选择货币类型' }
226 + ],
227 + totalAmount: [
228 + { required: true, message: '请输入总保费金额' },
229 + { pattern: /^\d+(\.\d{1,2})?$/, message: '请输入正确的金额格式' }
230 + ],
231 + remark: [
232 + { maxLength: 500, message: '备注最多500个字符' }
233 + ]
234 +}
235 +```
236 +
237 +**技术要点**
238 +- 使用 NutUI 的 Form 组件进行表单管理
239 +- 产品名称使用 Picker 选择器
240 +- 缴费年限根据选择的产品动态加载可选年限
241 +- 金额输入使用 InputNumber 组件,限制只能输入数字
242 +- 年龄选择使用 Picker,预设18-65岁
243 +- 性别和货币类型使用 Radio 单选组件
244 +
245 +#### 1.2 订单列表页面 (`/pages/order/list/index.vue`)
246 +
247 +**功能需求**
248 +- 展示当前用户的所有订单
249 +- 按状态筛选(全部/待处理/处理中/已生成/已查看)
250 +- 下拉刷新、上拉加载更多
251 +- 点击查看订单详情
252 +
253 +**页面布局**
254 +```
255 +┌─────────────────────────────┐
256 +│ 我的订单 状态筛选 ▼ │
257 +├─────────────────────────────┤
258 +│ ┌─────────────────────────┐ │
259 +│ │ 订单号: 202601270001 │ │
260 +│ │ 客户: 张三 男 30岁 │ │
261 +│ │ 产品: XXX重疾险 │ │
262 +│ │ 金额: $10,000 │ │
263 +│ │ 状态: [待处理] │ │
264 +│ │ 2026-01-27 10:30 │ │
265 +│ └─────────────────────────┘ │
266 +│ │
267 +│ ┌─────────────────────────┐ │
268 +│ │ 订单号: 202601260002 │ │
269 +│ │ 客户: 李四 女 35岁 │ │
270 +│ │ 产品: XXX医疗险 │ │
271 +│ │ 金额: HK$50,000 │ │
272 +│ │ 状态: [已生成] │ │
273 +│ │ 2026-01-26 15:20 │ │
274 +│ └─────────────────────────┘ │
275 +│ │
276 +└─────────────────────────────┘
277 +```
278 +
279 +**状态标签颜色**
280 +- 待处理:灰色 (#999999)
281 +- 处理中:蓝色 (#007AFF)
282 +- 已生成:绿色 (#34C759)
283 +- 已查看:默认 (#999999)
284 +
285 +**技术要点**
286 +- 使用 `useRequest` composable 封装请求逻辑
287 +- 状态筛选使用 Tabs 组件
288 +- 订单卡片封装为独立组件 `order-card`
289 +- 使用虚拟列表优化长列表性能(订单数量较多时)
290 +- 下拉刷新使用 ScrollView 的 `refresherEnabled` 属性
291 +
292 +#### 1.3 订单详情页面 (`/pages/order/detail/index.vue`)
293 +
294 +**功能需求**
295 +- 显示订单完整信息
296 +- 查看PDF计划书(已生成状态)
297 +- 查看海报(已生成状态)
298 +- 显示订单状态流转时间线
299 +
300 +**页面布局**
301 +```
302 +┌─────────────────────────────┐
303 +│ 订单详情 │
304 +├─────────────────────────────┤
305 +│ 订单号: 202601270001 │
306 +│ 状态: [待处理] │
307 +│ │
308 +│ ── 客户信息 ─── │
309 +│ 姓名: 张三 │
310 +│ 性别: 男 │
311 +│ 年龄: 30岁 │
312 +│ │
313 +│ ── 产品信息 ─── │
314 +│ 产品名称: XXX重疾险 │
315 +│ 缴费年限: 20年 │
316 +│ 货币类型: 美元 │
317 +│ 总保费: $10,000 │
318 +│ │
319 +│ ── 备注信息 ─── │
320 +│ 客户有高血压病史 │
321 +│ │
322 +│ ── 状态流转 ─── │
323 +│ ○ 待处理 │
324 +│ 2026-01-27 10:30 │
325 +│ ○ 处理中 │
326 +│ ○ 已生成 │
327 +│ ○ 已查看 │
328 +│ │
329 +│ ── 计划书文件 ─── │
330 +│ [🔍 查看PDF计划书] │
331 +│ [🖼️ 查看简化海报] │
332 +│ │
333 +└─────────────────────────────┘
334 +```
335 +
336 +**技术要点**
337 +- PDF预览使用 `web-view` 或自定义 PDF 阅读器组件
338 +- 海报查看使用 ImagePreview 组件(支持保存和分享)
339 +- 状态流转使用 Steps 组件展示时间线
340 +- 文件未生成时隐藏查看按钮
341 +
342 +---
343 +
344 +### 模块2:资料库模块
345 +
346 +#### 2.1 资料库首页 (`/pages/material/index/index.vue`)
347 +
348 +**功能需求**
349 +- 展示资料分类(入职相关、签单相关、AI答疑、家办业务)
350 +- 展示最新资料、热门资料
351 +- 快速搜索入口
352 +
353 +**页面布局**
354 +```
355 +┌─────────────────────────────┐
356 +│ 资料库 │
357 +│ [🔍 搜索资料...] │
358 +├─────────────────────────────┤
359 +│ ── 分类导航 ─── │
360 +│ ┌─────┐ ┌─────┐ ┌─────┐ │
361 +│ │入职 │ │签单 │ │ AI │ │
362 +│ │相关 │ │相关 │ │答疑 │ │
363 +│ └─────┘ └─────┘ └─────┘ │
364 +│ ┌─────┐ │
365 +│ │家办 │ │
366 +│ │业务 │ │
367 +│ └─────┘ │
368 +│ │
369 +│ ── 最新资料 ─── │
370 +│ ┌─────────────────────┐ │
371 +│ │ [PDF] 入职考试指南 │ │
372 +│ │ 2026-01-25 │ │
373 +│ └─────────────────────┘ │
374 +│ ┌─────────────────────┐ │
375 +│ │ [视频] 产品介绍 │ │
376 +│ │ 2026-01-24 │ │
377 +│ └─────────────────────┘ │
378 +│ │
379 +│ ── 热门资料 ─── │
380 +│ ┌─────────────────────┐ │
381 +│ │ [PDF] 签单流程手册 │ │
382 +│ │ 查看 1,234 次 │ │
383 +│ └─────────────────────┘ │
384 +└─────────────────────────────┘
385 +```
386 +
387 +**技术要点**
388 +- 分类导航使用 Grid 组件,图标+文字布局
389 +- 最新资料和热门资料使用横向滚动列表
390 +- 点击分类进入资料列表页面(带分类ID参数)
391 +- 搜索框点击跳转到搜索页面
392 +
393 +#### 2.2 资料列表页面 (`/pages/material/list/index.vue`)
394 +
395 +**功能需求**
396 +- 显示某个分类下的所有资料
397 +- 支持按子分类筛选
398 +- 下拉刷新、上拉加载更多
399 +- 显示文件类型图标
400 +
401 +**页面布局**
402 +```
403 +┌─────────────────────────────┐
404 +│ 入职相关 子分类 ▼ │
405 +├─────────────────────────────┤
406 +│ ┌─────────────────────────┐ │
407 +│ │ [PDF] 入职考试指南 │ │
408 +│ │ 入职前 │ │
409 +│ │ 2026-01-25 156次查看 │ │
410 +│ └─────────────────────────┘ │
411 +│ │
412 +│ ┌─────────────────────────┐ │
413 +│ │ [视频] 财务计划讲解 │ │
414 +│ │ 入职中 │ │
415 +│ │ 2026-01-24 89次查看 │ │
416 +│ └─────────────────────────┘ │
417 +│ │
418 +│ ┌─────────────────────────┐ │
419 +│ │ [PDF] 基本法对比 │ │
420 +│ │ 入职中 │ │
421 +│ │ 2026-01-23 234次查看 │ │
422 +│ └─────────────────────────┘ │
423 +│ │
424 +└─────────────────────────────┘
425 +```
426 +
427 +**技术要点**
428 +- 文件类型图标:PDF、视频、音频、图片
429 +- 点击资料项进入详情页面
430 +- 使用分页加载,每页20条
431 +
432 +#### 2.3 资料详情页面 (`/pages/material/detail/index.vue`)
433 +
434 +**功能需求**
435 +- PDF在线预览(禁止下载)
436 +- 视频/音频在线播放
437 +- 图片查看器
438 +- 显示资料信息(标题、分类、标签、上传时间、查看次数)
439 +- **关键:禁止下载功能**
440 +
441 +**PDF预览布局**
442 +```
443 +┌─────────────────────────────┐
444 +│ 资料详情 [< 返回] │
445 +├─────────────────────────────┤
446 +│ 入职考试指南 │
447 +│ 入职前 > 入职相关 │
448 +│ 标签: 考试, 入职 │
449 +│ 上传时间: 2026-01-25 │
450 +│ 查看次数: 156 │
451 +├─────────────────────────────┤
452 +│ │
453 +│ [PDF在线预览区域] │
454 +│ │
455 +│ 使用 pdf.js 或 │
456 +│ web-view 嵌入 │
457 +│ 长按保存功能禁用 │
458 +│ │
459 +└─────────────────────────────┘
460 +```
461 +
462 +**视频播放布局**
463 +```
464 +┌─────────────────────────────┐
465 +│ 产品介绍视频 │
466 +├─────────────────────────────┤
467 +│ [视频播放器] │
468 +│ ▶️ ⏸️ 00:00 / 12:34 │
469 +│ ━━━━━━━●━━━━━━━━━━━━━━━ │
470 +│ │
471 +│ 简介: 本视频介绍公司核心 │
472 +│ 产品的特点和优势... │
473 +│ │
474 +└─────────────────────────────┘
475 +```
476 +
477 +**技术要点**
478 +- **PDF预览方案**
479 + - 方案1:使用 `pdf.js` 库渲染 PDF(推荐,可控制下载)
480 + - 方案2:使用 `web-view` 加载在线PDF(需要服务器配合禁用下载)
481 + - 禁用右键菜单、长按保存等下载途径
482 +
483 +- **视频播放**
484 + - 使用 NutUI 的 Video 组件
485 + - 支持倍速播放、全屏播放
486 +
487 +- **图片查看**
488 + - 使用 ImagePreview 组件
489 + - 支持缩放、左右滑动
490 + - **禁用保存到本地功能**(设置 `show-save-button="false"`
491 +
492 +- **安全措施**
493 + - 添加水印(用户名+时间)
494 + - 禁用长按保存
495 + - 禁用右键菜单
496 + - 图片切片展示(防止完整下载)
497 +
498 +#### 2.4 资料搜索页面 (`/pages/material/search/index.vue`)
499 +
500 +**功能需求**
501 +- 关键词搜索
502 +- 按分类筛选
503 +- 按标签筛选
504 +- 搜索结果高亮
505 +
506 +**页面布局**
507 +```
508 +┌─────────────────────────────┐
509 +│ [🔍 搜索资料...] [搜索] │
510 +├─────────────────────────────┤
511 +│ 筛选: [全部分类 ▼] [全部标签▼]│
512 +├─────────────────────────────┤
513 +│ 找到 12 个结果 │
514 +│ │
515 +│ ┌─────────────────────────┐ │
516 +│ │ [PDF] 入职<mark>考试</mark>│
517 +│ │ 指南 │ │
518 +│ │ ...<mark>考试</mark>... │ │
519 +│ └─────────────────────────┘ │
520 +│ │
521 +│ ┌─────────────────────────┐ │
522 +│ │ [视频] <mark>考试</mark> │
523 +│ │ 报名流程 │ │
524 +│ └─────────────────────────┘ │
525 +│ │
526 +└─────────────────────────────┘
527 +```
528 +
529 +**技术要点**
530 +- 使用防抖(debounce)优化搜索请求
531 +- 搜索结果高亮关键词
532 +- 空状态提示"未找到相关资料"
533 +- 搜索历史记录(本地存储)
534 +
535 +---
536 +
537 +### 模块3:AI问答模块
538 +
539 +#### 3.1 AI聊天页面 (`/pages/ai/chat/index.vue`)
540 +
541 +**功能需求**
542 +- 对话式交互界面
543 +- 消息列表(用户+AI)
544 +- 输入框+发送按钮
545 +- 支持多轮对话
546 +- 显示"正在输入..."状态
547 +
548 +**页面布局**
549 +```
550 +┌─────────────────────────────┐
551 +│ AI助手 [清除对话] │
552 +├─────────────────────────────┤
553 +│ │
554 +│ ── 今天 10:30 ─── │
555 +│ │
556 +│ 你好,我想了解一下重疾险 │
557 +│ │
558 +│ ○ 10:30 │
559 +│ │
560 +│ 您好!重疾险是... │
561 +│ [详细回答内容] │
562 +│ │
563 +│ ── 今天 10:32 ─── │
564 +│ │
565 +│ 那缴费年限有哪些选择? │
566 +│ │
567 +│ ○ 10:32 │
568 +│ │
569 +│ 不同产品的缴费年限不同... │
570 +│ [详细回答] │
571 +│ │
572 +├─────────────────────────────┤
573 +│ [输入问题...] [发送]│
574 +└─────────────────────────────┘
575 +```
576 +
577 +**技术要点**
578 +- 消息列表使用 ScrollView 组件,自动滚动到底部
579 +- 用户消息靠右,AI消息靠左
580 +- AI消息支持 Markdown 渲染(使用 `markdown-it` 库)
581 +- 发送状态显示(Loading动画)
582 +- 支持语音输入(可选,使用微信语音识别API)
583 +
584 +**消息数据结构**
585 +```javascript
586 +const messages = ref([
587 + {
588 + id: '1',
589 + role: 'user', // 'user' | 'assistant'
590 + content: '你好,我想了解一下重疾险',
591 + timestamp: '2026-01-27 10:30:00'
592 + },
593 + {
594 + id: '2',
595 + role: 'assistant',
596 + content: '您好!重疾险是...',
597 + timestamp: '2026-01-27 10:30:05'
598 + }
599 +])
600 +```
601 +
602 +**调用流程**
603 +1. 用户发送消息 → 调用 AI 对话 API
604 +2. 显示"AI正在思考..."加载状态
605 +3. 接收 AI 响应 → 更新消息列表
606 +4. 自动滚动到最新消息
607 +
608 +---
609 +
610 +### 模块4:其他页面
611 +
612 +#### 4.1 首页/工作台 (`/pages/index/index.vue`)
613 +
614 +**功能需求**
615 +- 快捷入口(提交计划书、资料库、AI助手)
616 +- 待处理订单提醒
617 +- 最新资料更新
618 +- 系统通知
619 +
620 +**页面布局**
621 +```
622 +┌─────────────────────────────┐
623 +│ 臻奇智荟圈 │
624 +├─────────────────────────────┤
625 +│ 你好,张三 👋 │
626 +│ │
627 +│ ── 快捷入口 ─── │
628 +│ ┌─────┐ ┌─────┐ ┌─────┐ │
629 +│ │提交 │ │资料 │ │AI │ │
630 +│ │计划书│ │库 │ │助手 │ │
631 +│ └─────┘ └─────┘ └─────┘ │
632 +│ │
633 +│ ── 待处理 ─── │
634 +│ 您有 2 个待处理订单 │
635 +│ │
636 +│ ── 最新资料 ─── │
637 +│ 入职考试指南 (2026-01-25) │
638 +│ │
639 +│ ── 系统通知 ─── │
640 +│ 您的订单#202601270001已生成 │
641 +│ │
642 +└─────────────────────────────┘
643 +```
644 +
645 +#### 4.2 个人中心 (`/pages/profile/index.vue`)
646 +
647 +**功能需求**
648 +- 用户信息展示
649 +- 权限判断(管理员显示管理后台入口)
650 +- 设置菜单(清除缓存、关于我们等)
651 +
652 +**页面布局**
653 +```
654 +┌─────────────────────────────┐
655 +│ │
656 +│ [头像] │
657 +│ 张三 │
658 +│ 普通用户 │
659 +│ │
660 +│ ── 我的订单 ─── │
661 +│ ── 我的收藏 ─── │
662 +│ ── 消息通知 ─── │
663 +│ │
664 +│ ── 管理后台 ─── (管理员可见)│
665 +│ │
666 +│ ── 设置 ─── │
667 +│ 清除缓存 │
668 +│ 关于我们 │
669 +│ 退出登录 │
670 +│ │
671 +└─────────────────────────────┘
672 +```
673 +
674 +#### 4.3 消息通知列表 (`/pages/notifications/index.vue`)
675 +
676 +**功能需求**
677 +- 展示所有系统通知
678 +- 订单状态变更通知
679 +- 资料更新通知
680 +- 点击通知跳转到对应页面
681 +
682 +---
683 +
684 +## 🔌 API接口对接
685 +
686 +### API定义规范
687 +
688 +**API定义文件**`src/api/order.js`
689 +```javascript
690 +import { buildApiUrl } from '@/utils/tools'
691 +
692 +// 获取产品列表
693 +export const getProducts = () => {
694 + return buildApiUrl('product_list')
695 +}
696 +
697 +// 获取产品可选缴费年限
698 +export const getProductPaymentPeriods = (productId) => {
699 + return buildApiUrl('product_payment_periods', { productId })
700 +}
701 +
702 +// 创建订单
703 +export const createOrder = (data) => {
704 + return buildApiUrl('order_create', data)
705 +}
706 +
707 +// 获取订单列表
708 +export const getOrderList = (params) => {
709 + return buildApiUrl('order_list', params)
710 +}
711 +
712 +// 获取订单详情
713 +export const getOrderDetail = (orderId) => {
714 + return buildApiUrl('order_detail', { orderId })
715 +}
716 +```
717 +
718 +**请求调用**:使用 `src/api/fn.js` 包装器
719 +```javascript
720 +import { createOrder } from '@/api/order'
721 +import { request } from '@/api/fn'
722 +
723 +// 提交订单
724 +const submitOrder = async (formData) => {
725 + try {
726 + const result = await request(createOrder({
727 + customerName: formData.customerName,
728 + customerGender: formData.customerGender,
729 + // ...其他字段
730 + }))
731 +
732 + if (result.code === 0) {
733 + Taro.showToast({ title: '提交成功', icon: 'success' })
734 + // 跳转到订单列表
735 + Taro.navigateTo({ url: '/pages/order/list/index' })
736 + } else {
737 + Taro.showToast({ title: result.message, icon: 'none' })
738 + }
739 + } catch (error) {
740 + Taro.showToast({ title: '提交失败', icon: 'none' })
741 + }
742 +}
743 +```
744 +
745 +### API列表
746 +
747 +#### 订单相关
748 +- `order_list` - 获取订单列表
749 +- `order_detail` - 获取订单详情
750 +- `order_create` - 创建订单
751 +- `order_status_update` - 更新订单状态
752 +
753 +#### 资料库相关
754 +- `material_category_list` - 获取分类列表
755 +- `material_list` - 获取资料列表
756 +- `material_detail` - 获取资料详情
757 +- `material_search` - 搜索资料
758 +
759 +#### AI相关
760 +- `ai_chat_send` - 发送AI对话消息
761 +- `ai_chat_history` - 获取对话历史
762 +
763 +#### 用户相关
764 +- `user_info` - 获取用户信息
765 +- `user_login` - 微信登录
766 +- `notification_list` - 获取通知列表
767 +
768 +---
769 +
770 +## 🎨 UI设计规范
771 +
772 +### 设计宽度规则
773 +- **NutUI组件**:375px 基准宽度
774 +- **自定义组件**:750px 基准宽度
775 +
776 +**注意**:在编写样式时需要明确区分使用的基准宽度。
777 +
778 +### 主题色
779 +```javascript
780 +// 主色调
781 +const theme = {
782 + primary: '#007AFF', // 主色(蓝色)
783 + success: '#34C759', // 成功(绿色)
784 + warning: '#FF9500', // 警告(橙色)
785 + danger: '#FF3B30', // 危险(红色)
786 + info: '#5AC8FA', // 信息(浅蓝色)
787 +
788 + // 文字颜色
789 + textPrimary: '#000000', // 主文字
790 + textSecondary: '#666666', // 次要文字
791 + textTertiary: '#999999', // 辅助文字
792 + textPlaceholder: '#CCCCCC', // 占位文字
793 +
794 + // 背景色
795 + bgPrimary: '#FFFFFF', // 主背景
796 + bgSecondary: '#F5F5F5', // 次要背景
797 + bgDisabled: '#F0F0F0', // 禁用背景
798 +
799 + // 边框色
800 + border: '#E5E5E5', // 边框
801 + divider: '#EEEEEE' // 分割线
802 +}
803 +```
804 +
805 +### 字体规范
806 +```css
807 +/* 标题 */
808 +.title-large {
809 + font-size: 24px;
810 + font-weight: 600;
811 + line-height: 1.4;
812 +}
813 +
814 +.title-medium {
815 + font-size: 18px;
816 + font-weight: 500;
817 + line-height: 1.4;
818 +}
819 +
820 +/* 正文 */
821 +.body-large {
822 + font-size: 16px;
823 + font-weight: 400;
824 + line-height: 1.5;
825 +}
826 +
827 +.body-medium {
828 + font-size: 14px;
829 + font-weight: 400;
830 + line-height: 1.5;
831 +}
832 +
833 +/* 辅助文字 */
834 +.caption {
835 + font-size: 12px;
836 + font-weight: 400;
837 + line-height: 1.5;
838 + color: #999999;
839 +}
840 +```
841 +
842 +### 组件样式规范
843 +- 按钮高度:48px
844 +- 输入框高度:48px
845 +- 卡片圆角:8px
846 +- 卡片内边距:16px
847 +- 列表项高度:根据内容自适应,最小64px
848 +
849 +---
850 +
851 +## 📦 组件开发计划
852 +
853 +### 公共组件列表
854 +
855 +#### 1. PageContainer (`src/components/page-container/index.vue`)
856 +**用途**:页面容器,提供统一的页面布局
857 +**功能**
858 +- 统一的页面头部
859 +- 统一的页面内边距
860 +- 统一的背景色
861 +
862 +#### 2. OrderCard (`src/components/order-card/index.vue`)
863 +**用途**:订单卡片组件
864 +**功能**
865 +- 显示订单基本信息
866 +- 状态标签(不同颜色)
867 +- 点击跳转到详情
868 +
869 +#### 3. MaterialItem (`src/components/material-item/index.vue`)
870 +**用途**:资料列表项组件
871 +**功能**
872 +- 文件类型图标
873 +- 资料标题、分类、标签
874 +- 查看次数、上传时间
875 +
876 +#### 4. FilePreview (`src/components/file-preview/index.vue`)
877 +**用途**:文件预览组件
878 +**功能**
879 +- PDF预览(使用 pdf.js)
880 +- 视频播放器
881 +- 图片查看器
882 +- **禁用下载功能**
883 +
884 +#### 5. ChatMessage (`src/components/chat-message/index.vue`)
885 +**用途**:聊天消息组件
886 +**功能**
887 +- 用户消息(靠右)
888 +- AI消息(靠左,支持Markdown)
889 +- 时间戳显示
890 +
891 +---
892 +
893 +## 📅 开发任务分解
894 +
895 +### Week 1: 基础与计划书模块(2026-01-26 至 2026-02-01)
896 +
897 +#### Day 1-2: 项目初始化
898 +- [ ] 创建页面目录结构
899 +- [ ] 配置路由(app.config.js)
900 +- [ ] 配置 TabBar
901 +- [ ] 创建 Store 模块
902 +- [ ] 创建 API 定义文件
903 +
904 +#### Day 3-4: 首页与个人中心
905 +- [ ] 开发首页(工作台)
906 +- [ ] 开发个人中心
907 +- [ ] 开发消息通知列表
908 +- [ ] 对接用户信息 API
909 +
910 +#### Day 5-7: 计划书提交模块
911 +- [ ] 开发计划书提交页面
912 + - [ ] 表单UI
913 + - [ ] 表单验证
914 + - [ ] 产品下拉选择
915 + - [ ] 缴费年限联动
916 + - [ ] 提交功能
917 +- [ ] 开发订单列表页面
918 +- [ ] 开发订单详情页面
919 +- [ ] 对接订单相关 API
920 +- [ ] 测试表单提交流程
921 +
922 +### Week 2: 资料库模块(2026-02-02 至 2026-02-08)
923 +
924 +#### Day 1-2: 资料库首页与列表
925 +- [ ] 开发资料库首页
926 +- [ ] 开发资料列表页面
927 +- [ ] 分类筛选功能
928 +- [ ] 下拉刷新、上拉加载
929 +
930 +#### Day 3-4: 资料详情与预览
931 +- [ ] 开发资料详情页面
932 +- [ ] PDF在线预览(pdf.js集成)
933 +- [ ] 视频播放器
934 +- [ ] 图片查看器
935 +- [ ] **实现禁止下载功能**
936 + - [ ] 禁用右键菜单
937 + - [ ] 禁用长按保存
938 + - [ ] 添加水印
939 +
940 +#### Day 5-7: 搜索与优化
941 +- [ ] 开发资料搜索页面
942 +- [ ] 关键词搜索
943 +- [ ] 分类/标签筛选
944 +- [ ] 搜索结果高亮
945 +- [ ] 对接资料库 API
946 +- [ ] 测试资料查看流程
947 +
948 +### Week 3: AI问答与消息推送(2026-02-09 至 2026-02-15)
949 +
950 +#### Day 1-3: AI问答模块
951 +- [ ] 开发AI聊天页面
952 +- [ ] 消息列表UI
953 +- [ ] 输入框与发送
954 +- [ ] Markdown渲染
955 +- [ ] 对接AI对话 API
956 +- [ ] 多轮对话功能
957 +- [ ] 测试AI对话流程
958 +
959 +#### Day 4-5: 消息推送
960 +- [ ] 订阅消息配置
961 +- [ ] 消息接收逻辑
962 +- [ ] 消息展示
963 +- [ ] 消息跳转
964 +
965 +#### Day 6-7: 第一阶段测试
966 +- [ ] 功能测试
967 +- [ ] Bug修复
968 +- [ ] 性能优化
969 +- [ ] 用户体验优化
970 +
971 +### Week 4: 海报生成与优化(2026-02-16 至 2026-02-22)
972 +
973 +#### Day 1-3: 海报生成
974 +- [ ] 订单详情增加海报查看功能
975 +- [ ] 海报预览组件
976 +- [ ] 海报保存/分享
977 +- [ ] 对接海报生成 API
978 +
979 +#### Day 4-7: 界面优化
980 +- [ ] 根据反馈调整UI
981 +- [ ] 优化交互动画
982 +- [ ] 优化错误提示
983 +- [ ] 性能优化
984 +- [ ] 兼容性测试
985 +
986 +### Week 5: 测试与上线(2026-02-23 至 2026-02-24)
987 +
988 +#### Day 1-2: 全面测试
989 +- [ ] 功能回归测试
990 +- [ ] 兼容性测试
991 +- [ ] 性能测试
992 +- [ ] Bug修复
993 +
994 +#### Day 3: 上线准备
995 +- [ ] 生产环境配置
996 +- [ ] 提交小程序审核
997 +- [ ] 准备审核资料
998 +
999 +---
1000 +
1001 +## 🔐 安全与权限
1002 +
1003 +### 资料库安全措施
1004 +
1005 +#### 1. 禁止下载实现
1006 +```javascript
1007 +// PDF预览时禁用右键和长按
1008 +<web-view
1009 + :src="pdfUrl"
1010 + @message="handleMessage"
1011 +/>
1012 +```
1013 +
1014 +```css
1015 +/* 禁用文本选择 */
1016 +.no-select {
1017 + -webkit-user-select: none;
1018 + user-select: none;
1019 + -webkit-touch-callout: none;
1020 +}
1021 +
1022 +/* 禁用长按 */
1023 +.no-long-press {
1024 + -webkit-touch-callout: none;
1025 + -webkit-user-select: none;
1026 +}
1027 +```
1028 +
1029 +#### 2. 水印实现
1030 +```javascript
1031 +// 添加用户水印
1032 +const addWatermark = (canvas, text) => {
1033 + const ctx = canvas.getContext('2d')
1034 + ctx.font = '16px sans-serif'
1035 + ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'
1036 + ctx.rotate(-20 * Math.PI / 180)
1037 +
1038 + for (let i = 0; i < canvas.width; i += 100) {
1039 + for (let j = 0; j < canvas.height; j += 100) {
1040 + ctx.fillText(text, i, j)
1041 + }
1042 + }
1043 +}
1044 +```
1045 +
1046 +#### 3. 权限控制
1047 +```javascript
1048 +// 检查管理员权限
1049 +const checkAdminPermission = () => {
1050 + const user = userStore.userInfo
1051 + return user.role === 'admin'
1052 +}
1053 +
1054 +// 管理员功能入口
1055 +<view v-if="isAdmin">
1056 + <button @click="goToAdminPanel">管理后台</button>
1057 +</view>
1058 +```
1059 +
1060 +---
1061 +
1062 +## 🧪 测试要点
1063 +
1064 +### 功能测试清单
1065 +
1066 +#### 计划书模块
1067 +- [ ] 表单验证(必填项、格式验证)
1068 +- [ ] 产品和缴费年限联动
1069 +- [ ] 订单提交成功
1070 +- [ ] 订单列表展示
1071 +- [ ] 订单详情查看
1072 +- [ ] PDF预览功能
1073 +- [ ] 海报查看与分享
1074 +
1075 +#### 资料库模块
1076 +- [ ] 分类导航
1077 +- [ ] 资料列表展示
1078 +- [ ] 搜索功能
1079 +- [ ] PDF在线预览
1080 +- [ ] 视频播放
1081 +- [ ] 图片查看
1082 +- [ ] **禁止下载功能验证**
1083 + - [ ] 无法右键保存
1084 + - [ ] 无法长按保存
1085 + - [ ] 无下载按钮
1086 +
1087 +#### AI问答模块
1088 +- [ ] 消息发送
1089 +- [ ] AI响应接收
1090 +- [ ] 多轮对话
1091 +- [ ] Markdown渲染
1092 +
1093 +#### 其他功能
1094 +- [ ] 微信登录
1095 +- [ ] 消息推送接收
1096 +- [ ] 权限控制
1097 +
1098 +### 性能测试
1099 +- [ ] 首屏加载时间 < 2秒
1100 +- [ ] 列表滚动流畅(60fps)
1101 +- [ ] 图片懒加载
1102 +- [ ] 大文件加载优化
1103 +
1104 +### 兼容性测试
1105 +- [ ] iOS微信
1106 +- [ ] Android微信
1107 +- [ ] 不同屏幕尺寸
1108 +- [ ] 不同微信版本
1109 +
1110 +---
1111 +
1112 +## 📝 开发注意事项
1113 +
1114 +### 1. 使用现有架构
1115 +- 认证系统已实现,直接使用 `authRedirect.js``request.js`
1116 +- 导航使用 `useGo` Hook
1117 +- 状态管理使用 Pinia
1118 +- HTTP请求使用 `request.js`(支持401自动刷新)
1119 +
1120 +### 2. 遵循项目规范
1121 +- API定义使用 `buildApiUrl` 方法
1122 +- 路径别名使用 `@/` 前缀
1123 +- 样式使用 Less,注意设计宽度规则
1124 +- NutUI组件自动导入,无需手动import
1125 +
1126 +### 3. 性能优化
1127 +- 列表使用虚拟列表(订单、资料)
1128 +- 图片使用懒加载
1129 +- 大文件分片上传
1130 +- 防抖、节流优化(搜索、滚动)
1131 +
1132 +### 4. 用户体验
1133 +- Loading状态明确
1134 +- 错误提示友好
1135 +- 空状态提示
1136 +- 网络错误处理(弱网络提示)
1137 +
1138 +### 5. 代码质量
1139 +- 组件拆分合理
1140 +- 代码复用(公共组件、composables)
1141 +- 注释清晰
1142 +- 遵循 ESLint 规范
1143 +
1144 +---
1145 +
1146 +## 🎯 里程碑与验收标准
1147 +
1148 +### 第一阶段验收(2026-02-15)
1149 +- [ ] 计划书提交流程完整可用
1150 +- [ ] 资料库查看功能正常(含禁止下载)
1151 +- [ ] AI问答功能正常
1152 +- [ ] 消息推送功能正常
1153 +
1154 +### 第二阶段验收(2026-02-24)
1155 +- [ ] 海报生成功能正常
1156 +- [ ] 所有功能测试通过
1157 +- [ ] 性能达标
1158 +- [ ] 兼容性测试通过
1159 +- [ ] 小程序审核提交
1160 +
1161 +---
1162 +
1163 +## 📞 沟通与协作
1164 +
1165 +### 每日进度同步
1166 +- 每天下班前提交当日进度
1167 +- 遇到问题及时沟通
1168 +
1169 +### 代码审查
1170 +- 核心功能提交前进行代码审查
1171 +- PR描述清晰,包含测试说明
1172 +
1173 +### 测试反馈
1174 +- 每个阶段完成后提交测试报告
1175 +- Bug及时修复和验证
1176 +
1177 +---
1178 +
1179 +**文档版本**: v1.0
1180 +**最后更新**: 2026-01-27
1181 +**维护者**: 前端开发团队