docs(PLAN): 添加前端开发计划文档
添加详细的前端开发计划文档,包含: - 基于20个工作日的调整版开发计划,明确P0/P1/P2优先级 - 完整的技术栈说明(Taro 4 + Vue 3 + NutUI 4 + Pinia) - 详细的目录结构规划和页面路由配置 - 核心功能模块设计(计划书、资料库、AI问答) - API接口对接规范和UI设计规范 - 开发任务分解和里程碑时间表 - 安全措施和测试要点
Showing
2 changed files
with
1678 additions
and
0 deletions
docs/PLAN/前端开发计划-调整版.md
0 → 100644
| 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 | +**状态**: 待审核 |
docs/PLAN/前端开发计划.md
0 → 100644
| 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 | +**维护者**: 前端开发团队 |
-
Please register or login to post a comment