docs: 新增项目文档和开发计划
添加项目架构、组件索引、变更记录、工作流和开发计划等文档 - ARCHITECTURE.md: 系统架构与工程配置说明 - COMPONENTS.md: 组件目录索引与说明 - CHANGELOG.md: 功能更新记录 - 工作流.md: 开发工作流程指南 - 暂存用户打卡信息.md: 草稿功能详细规划 - 26.1.26新功能开发计划.md: 打卡互动功能规划 - TODO/26.1.26新功能.md: 功能开发清单
Showing
7 changed files
with
396 additions
and
0 deletions
docs/ARCHITECTURE.md
0 → 100644
| 1 | +# 架构实现与工程配置 | ||
| 2 | + | ||
| 3 | +## 入口与初始化 | ||
| 4 | + | ||
| 5 | +- 应用入口:[/src/main.js](file:///Users/huyirui/program/itomix/git/mlaj/src/main.js) | ||
| 6 | + - 创建 App、注册全局 Icon 组件、挂载路由 | ||
| 7 | + - 全局注入 axios 到 app.config.globalProperties.$http | ||
| 8 | +- 根组件:[/src/App.vue](file:///Users/huyirui/program/itomix/git/mlaj/src/App.vue) | ||
| 9 | + - 初始化全局认证与购物车:provideAuth / provideCart | ||
| 10 | + - 生产环境 + 微信环境:初始化微信 JSSDK(配置签名 URL) | ||
| 11 | + - 生产环境:版本更新探测(弹窗提示刷新) | ||
| 12 | + | ||
| 13 | +## 路由与权限 | ||
| 14 | + | ||
| 15 | +- 路由入口:[/src/router/index.js](file:///Users/huyirui/program/itomix/git/mlaj/src/router/index.js) | ||
| 16 | + - Hash 路由:createWebHashHistory(import.meta.env.VITE_BASE || '/') | ||
| 17 | + - beforeEach:统一登录页回跳处理,并在必要时探测“是否已登录” | ||
| 18 | +- 鉴权策略:[/src/router/guards.js](file:///Users/huyirui/program/itomix/git/mlaj/src/router/guards.js) | ||
| 19 | + - 白名单 + meta.requiresAuth 双策略判断 | ||
| 20 | + - 未登录时重定向 /login 并带 redirect | ||
| 21 | +- 微信授权策略:[/src/router/guards.js](file:///Users/huyirui/program/itomix/git/mlaj/src/router/guards.js) | ||
| 22 | + - 不在路由守卫自动触发授权,避免循环 | ||
| 23 | + - 仅在用户触发(如点击微信图标/购买流程探测)时调用 startWxAuth | ||
| 24 | + | ||
| 25 | +## 请求与登录态注入 | ||
| 26 | + | ||
| 27 | +- Axios 封装:[/src/utils/axios.js](file:///Users/huyirui/program/itomix/git/mlaj/src/utils/axios.js) | ||
| 28 | + - 请求拦截:动态读取本地 user_info 并注入 User-Id / User-Token | ||
| 29 | + - 响应拦截:code=401 时,仅当当前路由确实需要登录才跳转登录(公开页面不强制跳转) | ||
| 30 | +- 登录态管理:[/src/contexts/auth.js](file:///Users/huyirui/program/itomix/git/mlaj/src/contexts/auth.js) | ||
| 31 | + - provide/inject 维护 currentUser/loading/login/logout | ||
| 32 | + - localStorage 持久化 currentUser | ||
| 33 | + - 初始化流程中会探测授权/登录态并拉取用户信息 | ||
| 34 | + | ||
| 35 | +## 购物车与结算 | ||
| 36 | + | ||
| 37 | +- 购物车上下文:[/src/contexts/cart.js](file:///Users/huyirui/program/itomix/git/mlaj/src/contexts/cart.js) | ||
| 38 | + - 单品/多品两种模式(App.vue 默认使用单品模式) | ||
| 39 | + - localStorage 带时间戳的过期策略(默认一天过期) | ||
| 40 | + - handleCheckout 负责构建订单数据并提交订单 | ||
| 41 | + | ||
| 42 | +## 上传与预览 | ||
| 43 | + | ||
| 44 | +- 上传工具:[/src/utils/upload.js](file:///Users/huyirui/program/itomix/git/mlaj/src/utils/upload.js)、[/src/utils/qiniuFileHash.js](file:///Users/huyirui/program/itomix/git/mlaj/src/utils/qiniuFileHash.js) | ||
| 45 | + - 前端计算文件 Hash,支持“秒传检测 + 直传对象存储” | ||
| 46 | +- 关键业务复用:[/src/composables/useCheckin.js](file:///Users/huyirui/program/itomix/git/mlaj/src/composables/useCheckin.js) | ||
| 47 | + - 打卡/作业提交流程:校验、上传、提交、编辑回填等 | ||
| 48 | +- 预览组件:[/src/components/media](file:///Users/huyirui/program/itomix/git/mlaj/src/components/media) | ||
| 49 | + - 视频/音频播放器、PDF/Office 预览等 | ||
| 50 | + | ||
| 51 | +## Vite 配置与环境变量 | ||
| 52 | + | ||
| 53 | +- Vite 配置:[/vite.config.js](file:///Users/huyirui/program/itomix/git/mlaj/vite.config.js) | ||
| 54 | + - 自动按需引入 Vant 组件(unplugin-auto-import / unplugin-vue-components) | ||
| 55 | + - 别名:@ / @components / @utils / @api 等 | ||
| 56 | + - 本地代理:createProxy(viteEnv.VITE_PROXY_PREFIX, viteEnv.VITE_PROXY_TARGET) | ||
| 57 | +- 环境变量示例:[.env](file:///Users/huyirui/program/itomix/git/mlaj/.env) | ||
| 58 | + - VITE_PORT:开发端口 | ||
| 59 | + - VITE_PROXY_TARGET / VITE_PROXY_PREFIX:接口代理目标与前缀 | ||
| 60 | + - VITE_OUTDIR:构建输出目录 | ||
| 61 | + - VITE_CONSOLE:调试开关 | ||
| 62 | + | ||
| 63 | +## 目录结构(详细) | ||
| 64 | + | ||
| 65 | +``` | ||
| 66 | +mlaj/ | ||
| 67 | +├── build/ # Vite 代理封装 | ||
| 68 | +├── docs/ # 项目文档(本目录) | ||
| 69 | +├── public/ # 静态资源 | ||
| 70 | +├── src/ | ||
| 71 | +│ ├── api/ # 按业务域拆分的接口封装(auth/course/checkin/teacher/...) | ||
| 72 | +│ ├── assets/ # 图片等资源 | ||
| 73 | +│ ├── common/ # 常量 | ||
| 74 | +│ ├── components/ # 组件(按业务域归类) | ||
| 75 | +│ ├── composables/ # 组合式函数(逻辑复用,含单测) | ||
| 76 | +│ ├── contexts/ # 全局状态(provide/inject:auth/cart) | ||
| 77 | +│ ├── router/ # 路由定义与守卫 | ||
| 78 | +│ ├── utils/ # 工具层(axios、上传、鉴权存储、版本更新等) | ||
| 79 | +│ └── views/ # 页面(按业务域归类) | ||
| 80 | +├── tailwind.config.js # Tailwind 配置 | ||
| 81 | +└── vite.config.js # Vite 配置 | ||
| 82 | +``` |
docs/CHANGELOG.md
0 → 100644
| 1 | +# 功能更新记录(Recent Changes) | ||
| 2 | + | ||
| 3 | +说明:该章节从 README 迁移到本文件,避免 README 过长。后续新增变更建议追加在文件顶部。 | ||
| 4 | + | ||
| 5 | + | ||
| 6 | +## 2026-01-26 13:40:00 | ||
| 7 | +- 优化打卡卡片组件(CheckinCard): | ||
| 8 | + - 增加长文本折叠功能:内容超过5行自动显示省略号,并提供“全文/收起”切换按钮 | ||
| 9 | + - 增加多附件Tab切换功能:当同时存在多种附件(图片、视频、音频)时,使用 Tab 标签页切换展示,避免页面过长 | ||
| 10 | + | ||
| 11 | +## 2026-01-26 11:43:00 | ||
| 12 | +- 新增草稿恢复时的作业有效性校验:若草稿对应的作业已失效(不在当前任务列表中),则弹窗提示并自动清理该草稿 | ||
| 13 | + | ||
| 14 | +## 2026-01-25 19:28:00 | ||
| 15 | + | ||
| 16 | +- 优化项目配置:从 git 版本控制中移除以下文件夹的跟踪,以避免将开发工具配置和生成的文档提交到远程仓库: | ||
| 17 | + - `.claude` | ||
| 18 | + - `.cursor` | ||
| 19 | + - `.specify` | ||
| 20 | + - `.trae` | ||
| 21 | + - `.github` | ||
| 22 | + - `docs` | ||
| 23 | + | ||
| 24 | +## 2026-01-25 | ||
| 25 | + | ||
| 26 | +- 新增「暂存用户打卡信息」开发规划:[/docs/plan/暂存用户打卡信息.md](file:///Users/huyirui/program/itomix/git/mlaj/docs/plan/%E6%9A%82%E5%AD%98%E7%94%A8%E6%88%B7%E6%89%93%E5%8D%A1%E4%BF%A1%E6%81%AF.md) | ||
| 27 | +- 完成「暂存用户打卡信息」功能开发 | ||
| 28 | + - 核心逻辑:[/src/composables/useCheckinDraft.js](file:///Users/huyirui/program/itomix/git/mlaj/src/composables/useCheckinDraft.js) | ||
| 29 | + - 页面集成:[/src/views/checkin/CheckinDetailPage.vue](file:///Users/huyirui/program/itomix/git/mlaj/src/views/checkin/CheckinDetailPage.vue) | ||
| 30 | + - 支持自动保存、过期清理、恢复提示 | ||
| 31 | +- 修复打卡详情页 `countValue` 初始化顺序导致的 ReferenceError 报错 | ||
| 32 | +- 修复附件上传成功后未保存 URL 导致草稿恢复后无法预览的问题 | ||
| 33 | +- 优化文件 URL 获取逻辑:移除硬编码默认域名,优先使用接口返回的 URL 或 src,仅在有域名信息时拼接 URL | ||
| 34 | + | ||
| 35 | +## 打卡详情页重构(/checkin/detail) | ||
| 36 | + | ||
| 37 | +- 统一了文本、媒体上传和计数打卡的入口 | ||
| 38 | +- 实现了基于 composables 的通用提交流程:[/src/composables/useCheckin.js](file:///Users/huyirui/program/itomix/git/mlaj/src/composables/useCheckin.js) | ||
| 39 | +- 页面入口:[/src/views/checkin/CheckinDetailPage.vue](file:///Users/huyirui/program/itomix/git/mlaj/src/views/checkin/CheckinDetailPage.vue) | ||
| 40 | +- 优化了附件预览与编辑回填逻辑(音频/视频/图片预览能力) | ||
| 41 | + | ||
| 42 | +## 教师端功能完善(/teacher) | ||
| 43 | + | ||
| 44 | +- 新增作业管理页面:/teacher/tasks(列表展示:名称、开始/截止时间) | ||
| 45 | +- 新增作业主页:/teacher/tasks/:id(统计 + 日历视图) | ||
| 46 | +- 新增学员作业记录页:/teacher/student-record(作业帖子 + 点赞/点评) | ||
| 47 | + | ||
| 48 | +## 基础体验优化 | ||
| 49 | + | ||
| 50 | +- 登录逻辑调整:仅在登录页点击微信图标时触发授权(避免路由守卫自动授权导致的循环) | ||
| 51 | + - 关键文件:[/src/router/guards.js](file:///Users/huyirui/program/itomix/git/mlaj/src/router/guards.js)、[/src/router/index.js](file:///Users/huyirui/program/itomix/git/mlaj/src/router/index.js)、[/src/views/auth/LoginPage.vue](file:///Users/huyirui/program/itomix/git/mlaj/src/views/auth/LoginPage.vue) | ||
| 52 | +- 搜索栏优化:提升 iOS 软键盘“搜索”键触发稳定性 | ||
| 53 | +- 课程详情页:增加动态 Open Graph 标签,优化分享体验 | ||
| 54 | + | ||
| 55 | +## 课程详情页动态 Open Graph 元标签 | ||
| 56 | + | ||
| 57 | +- 行为:进入课程详情页时,在 head 中插入 og:title / og:description / og:image / og:url;离开页面时移除 | ||
| 58 | +- CDN 规则:图片域名为 cdn.ipadbiz.cn 时,追加 ?imageMogr2/thumbnail/200x/strip/quality/70 | ||
| 59 | +- 位置:[/src/views/courses/CourseDetailPage.vue](file:///Users/huyirui/program/itomix/git/mlaj/src/views/courses/CourseDetailPage.vue) | ||
| 60 | + | ||
| 61 | +## 购买流程环境校验与微信授权探测 | ||
| 62 | + | ||
| 63 | +- 行为:仅对非免费课程在详情页点击“购买”时进行校验;生产环境必须为微信内置浏览器 | ||
| 64 | +- 微信环境内:若未完成微信授权(openid_has=false),会自动发起一次微信授权并中止本次购买,授权后再次点击进入结算 | ||
| 65 | +- 位置:[/src/views/courses/CourseDetailPage.vue](file:///Users/huyirui/program/itomix/git/mlaj/src/views/courses/CourseDetailPage.vue) | ||
| 66 | + | ||
| 67 | +## 401 拦截策略优化(公开页面不再跳登录) | ||
| 68 | + | ||
| 69 | +- 行为:接口返回 code=401 时,仅当当前路由确实需要登录时才重定向登录 | ||
| 70 | +- 位置:[/src/utils/axios.js](file:///Users/huyirui/program/itomix/git/mlaj/src/utils/axios.js) | ||
| 71 | + | ||
| 72 | +## 搜索栏回车搜索兼容性提升 | ||
| 73 | + | ||
| 74 | +- 行为:输入框类型改为 search,并可选开启 form submit 机制,同时保留 keyup.enter | ||
| 75 | +- 位置:[/src/components/common/SearchBar.vue](file:///Users/huyirui/program/itomix/git/mlaj/src/components/common/SearchBar.vue) | ||
| 76 | + | ||
| 77 | +## 分享海报弹窗(可复用) | ||
| 78 | + | ||
| 79 | +- 入口:课程详情页底部操作栏“分享”按钮 | ||
| 80 | +- 组件:[/src/components/poster/SharePoster.vue](file:///Users/huyirui/program/itomix/git/mlaj/src/components/poster/SharePoster.vue) | ||
| 81 | +- 能力:弹窗打开时通过 Canvas 合成海报(封面、二维码、文案),生成 dataURL 展示,用户长按保存 | ||
| 82 | + | ||
| 83 | +## 打卡弹窗与列表组件(可复用) | ||
| 84 | + | ||
| 85 | +- 打卡弹窗:[/src/components/checkin/CheckInDialog.vue](file:///Users/huyirui/program/itomix/git/mlaj/src/components/checkin/CheckInDialog.vue) | ||
| 86 | +- 打卡列表:[/src/components/checkin/CheckInList.vue](file:///Users/huyirui/program/itomix/git/mlaj/src/components/checkin/CheckInList.vue) |
docs/COMPONENTS.md
0 → 100644
| 1 | +# /src/components 组件目录索引 | ||
| 2 | + | ||
| 3 | +## 目录划分 | ||
| 4 | + | ||
| 5 | +| 目录 | 代表组件 | 说明 | | ||
| 6 | +| --- | --- | --- | | ||
| 7 | +| activity/ | ActivityCard.vue、ActivityApplyHistoryPopup.vue | 活动卡片、报名/历史相关弹窗 | | ||
| 8 | +| calendar/ | CollapsibleCalendar.vue、TaskCalendar.vue | 日历与任务日历组件 | | ||
| 9 | +| checkin/ | CheckInDialog.vue、CheckInList.vue、CheckinCard.vue、UploadVideoPopup.vue | 打卡/作业相关组件(弹窗、列表、卡片、上传) | | ||
| 10 | +| common/ | ConfirmDialog.vue、GradientHeader.vue、SearchBar.vue、UserAgreement.vue | 通用基础组件(确认、头部、搜索、协议) | | ||
| 11 | +| count/ | AddTargetDialog.vue、CheckinTargetList.vue、postCountModel.vue | 计数型打卡相关组件 | | ||
| 12 | +| courses/ | CourseCard.vue、CourseList.vue、LiveStreamCard.vue、ReviewPopup.vue | 课程展示与列表、直播卡片、评价弹窗等 | | ||
| 13 | +| effects/ | FrostedGlass.vue、StarryBackground.vue | 视觉效果组件 | | ||
| 14 | +| homePage/ | FeaturedCoursesSection.vue、LatestActivitiesSection.vue | 首页区块组件(精选/活动/推荐等) | | ||
| 15 | +| infoEntry/ | formPage.vue | 信息录入相关组件 | | ||
| 16 | +| layout/ | AppLayout.vue、BottomNav.vue | 页面布局与底部导航 | | ||
| 17 | +| media/ | AudioPlayer.vue、VideoPlayer.vue、PdfPreview.vue、OfficeViewer.vue | 音视频播放器与文档预览 | | ||
| 18 | +| payment/ | WechatPayment.vue | 微信支付相关组件 | | ||
| 19 | +| poster/ | RecallPoster.vue、SharePoster.vue | 海报生成与分享相关组件 | | ||
| 20 | +| studyDetail/ | StudyCatalogPopup.vue、StudyCommentsSection.vue、StudyMaterialsPopup.vue | 学习详情页的弹窗与评论区 | | ||
| 21 | +| teacher/ | TaskFilter.vue、TaskCascaderFilter.vue | 教师端筛选与任务相关组件 | | ||
| 22 | + | ||
| 23 | +## 备注 | ||
| 24 | + | ||
| 25 | +- 布局目录已归一:统一使用 [/src/components/layout](file:///Users/huyirui/program/itomix/git/mlaj/src/components/layout),已移除 /src/layouts |
docs/TODO/26.1.26新功能.md
0 → 100644
| 1 | +新功能开发list(在.env加上配置开关控制下面设计到的功能点, 比如是否开启置顶功能,开启点评打卡, 开启打卡海报,开启点评列表): | ||
| 2 | + 入口页IndexCheckInPage涉及功能 | ||
| 3 | + - CheckinCard组件 <#footer-right> 3个点的缩略显示, 点击后从底部弹出vant的ActionSheet组件, 面板有置顶和点评两个选项. | ||
| 4 | + 1. 置顶的功能, 使用图标back-top, 点击图标的时候弹出确认弹窗, 确认后调用接口置顶帖子. | ||
| 5 | + 2. 点评打卡作业的功能, 使用图标comment, 点击图标的时候弹出确认弹窗, 确认后调用接口点评打卡作业. 评论弹框做成一个单独的组件以后扩展. | ||
| 6 | + 3. 海报功能, 使用图标share, 可以参考SharePoster组件的实现, 新增一个组件打卡海报, 这个组件最大的不同就是可能生成的图片是一张长图, 如果超过屏幕高度, 用户可以滑动查看. 现在内容和字段还不确定, 等确定了再实现可以先规划. | ||
| 7 | + - 显示点评列表功能, 在CheckinCard组件里面, 需要新增一个组件专门显示用户点评打卡的列表. 类似于朋友圈下面的评论列表, 放在CheckinCard组件的下面. |
docs/plan/26.1.26新功能开发计划.md
0 → 100644
This diff is collapsed. Click to expand it.
docs/plan/暂存用户打卡信息.md
0 → 100644
| 1 | +# 暂存用户打卡信息 | ||
| 2 | + | ||
| 3 | +## 背景 | ||
| 4 | + | ||
| 5 | +用户在“提交作业/打卡”页面输入了较长文字并上传了媒体,但在未点击提交时被中断(误触返回、微信进程被系统回收、来电/切后台等),再次进入页面内容丢失,导致体验断裂。 | ||
| 6 | + | ||
| 7 | +本规划目标是在不改动后端接口的前提下,在前端提供“草稿暂存(文本 + 已上传媒体信息)”能力,支持一周内自动过期清理,并在用户再次进入时提示恢复或删除。 | ||
| 8 | + | ||
| 9 | +涉及页面与核心逻辑参考: | ||
| 10 | + | ||
| 11 | +- 打卡提交页:[CheckinDetailPage.vue](file:///Users/huyirui/program/itomix/git/mlaj/src/views/checkin/CheckinDetailPage.vue) | ||
| 12 | +- 打卡核心逻辑:[useCheckin.js](file:///Users/huyirui/program/itomix/git/mlaj/src/composables/useCheckin.js) | ||
| 13 | +- 环境变量约定:[.env](file:///Users/huyirui/program/itomix/git/mlaj/.env) | ||
| 14 | + | ||
| 15 | +## 需求拆解(逐条对齐) | ||
| 16 | + | ||
| 17 | +1. 缓存最多保存一周:写入时记录 saved_at,读写时执行过期清理(>7天删除)。 | ||
| 18 | +2. 用户提交后清空缓存:提交成功(code===1)后删除对应草稿。 | ||
| 19 | +3. 进入页面若存在未完成信息:弹框提示“继续/删除”,继续则回填,删除则清空。 | ||
| 20 | +4. 功能开关放到 .env:新增 VITE_CHECKIN_DRAFT_CACHE(0/1),默认建议 1(也可先默认 0,灰度开启)。 | ||
| 21 | + | ||
| 22 | +## 范围与不做项(第一版) | ||
| 23 | + | ||
| 24 | +- 覆盖:文字内容、已上传成功的媒体(含 url/meta_id/file_type/name)。 | ||
| 25 | +- 不覆盖:未上传完成的 File/Blob(localStorage 无法可靠持久化;要支持需 IndexedDB 存 Blob,复杂度与风险较高)。 | ||
| 26 | +- 编辑模式(route.query.status===edit):第一版建议默认不启用草稿恢复,避免与“编辑回显(来自后端)”冲突;若要覆盖编辑场景,采用独立 key(见“扩展”)。 | ||
| 27 | + | ||
| 28 | +## 关键设计 | ||
| 29 | + | ||
| 30 | +### 1) 存储介质 | ||
| 31 | + | ||
| 32 | +- 使用 localStorage:实现成本低,满足“一周”与“断网/切后台后仍可恢复”。 | ||
| 33 | +- 数据量控制:只存“已上传成功”的附件元数据;不存 File 本体。 | ||
| 34 | + | ||
| 35 | +### 2) 草稿 Key 设计(避免串号) | ||
| 36 | + | ||
| 37 | +建议 key 包含用户与作业上下文,确保不同用户/不同作业互不影响: | ||
| 38 | + | ||
| 39 | +- 前缀:CHECKIN_DRAFT_V1 | ||
| 40 | +- 维度:user_id、task_id、date、task_type、status | ||
| 41 | + | ||
| 42 | +示例: | ||
| 43 | + | ||
| 44 | +- CHECKIN_DRAFT_V1:{user_id}:{task_id}:{date}:{task_type}:{status} | ||
| 45 | + | ||
| 46 | +其中: | ||
| 47 | + | ||
| 48 | +- user_id:来自 currentUser(contexts/auth.js 本地持久化) | ||
| 49 | +- task_id/date/task_type/status:来自路由 query(CheckinDetailPage 已使用 route.query.task_id/date/task_type/status) | ||
| 50 | + | ||
| 51 | +### 3) 数据结构(建议) | ||
| 52 | + | ||
| 53 | +```json | ||
| 54 | +{ | ||
| 55 | + "version": 1, | ||
| 56 | + "saved_at": 1730000000000, | ||
| 57 | + "expires_at": 1730000000000, | ||
| 58 | + "context": { | ||
| 59 | + "user_id": "123", | ||
| 60 | + "task_id": "456", | ||
| 61 | + "date": "2026-01-25", | ||
| 62 | + "task_type": "upload", | ||
| 63 | + "status": "create" | ||
| 64 | + }, | ||
| 65 | + "payload": { | ||
| 66 | + "message": "...", | ||
| 67 | + "active_type": "image", | ||
| 68 | + "subtask_id": "789", | ||
| 69 | + "file_list": [ | ||
| 70 | + { | ||
| 71 | + "meta_id": "xxx", | ||
| 72 | + "url": "https://...", | ||
| 73 | + "name": "a.jpg", | ||
| 74 | + "file_type": "image" | ||
| 75 | + } | ||
| 76 | + ], | ||
| 77 | + "count": { | ||
| 78 | + "gratitude_count": 1, | ||
| 79 | + "gratitude_form_list": [] | ||
| 80 | + } | ||
| 81 | + } | ||
| 82 | +} | ||
| 83 | +``` | ||
| 84 | + | ||
| 85 | +说明: | ||
| 86 | + | ||
| 87 | +- file_list:仅保存 useCheckin.afterRead 上传成功后写入的字段(item.status===done 且 meta_id 存在)。 | ||
| 88 | +- count:来源于 CheckinDetailPage 的 selectedTargets/countValue(第一版可以先不存,或存但不影响非 count 类型)。 | ||
| 89 | + | ||
| 90 | +### 4) 触发保存的时机(自动暂存) | ||
| 91 | + | ||
| 92 | +- 文本变化:watch(message) debounce 500ms 保存。 | ||
| 93 | +- 附件变化:watch(fileList) 深度监听 debounce 500ms 保存(仅保存 done 项)。 | ||
| 94 | +- 作业选择变化:watch(selectedTaskValue) debounce 200ms 保存。 | ||
| 95 | +- 页面离开兜底:beforeRouteLeave 或 window.pagehide/visibilitychange 时强制保存一次(避免最后一次变更没落盘)。 | ||
| 96 | + | ||
| 97 | +落盘时机要遵循开关:VITE_CHECKIN_DRAFT_CACHE === '1' 才启用。 | ||
| 98 | + | ||
| 99 | +### 5) 弹框提示与回填流程 | ||
| 100 | + | ||
| 101 | +进入 [CheckinDetailPage.vue](file:///Users/huyirui/program/itomix/git/mlaj/src/views/checkin/CheckinDetailPage.vue)(且非 edit 模式)时: | ||
| 102 | + | ||
| 103 | +1. 读取 key 对应草稿;若不存在或已过期,直接进入正常流程。 | ||
| 104 | +2. 若存在草稿且 payload 有实际内容(message 有非空或 file_list 非空):弹框提示。 | ||
| 105 | +3. 用户选择: | ||
| 106 | + - 继续:将草稿回填到 message / activeType / fileList / selectedTaskValue(以及 count 数据如启用),并立刻再保存一次(避免回填后又丢)。 | ||
| 107 | + - 删除:删除草稿并保持空表单。 | ||
| 108 | + | ||
| 109 | +弹框建议用 showConfirmDialog(Vant 4),取消分支需要 catch,避免控制台出现 Uncaught (in promise) cancel(Vant 文档:showConfirmDialog.then/catch)[3](https://develop365.gitlab.io/vant/zh-CN/dialog/)。 | ||
| 110 | + | ||
| 111 | +### 6) 清理策略(“定期清除一周前”) | ||
| 112 | + | ||
| 113 | +采用“惰性清理 + 低频全量清理”组合: | ||
| 114 | + | ||
| 115 | +- 惰性清理:每次读/写草稿时,如果 expires_at < now 则删除。 | ||
| 116 | +- 低频全量:进入打卡页时,扫描 localStorage 中以 CHECKIN_DRAFT_V1: 开头的 key,删除所有过期项。 | ||
| 117 | + | ||
| 118 | +说明:localStorage 没有内建 TTL,必须业务侧维护 expires_at。 | ||
| 119 | + | ||
| 120 | +### 7) 提交成功后清空 | ||
| 121 | + | ||
| 122 | +清空动作必须绑定到“真正提交成功”之后: | ||
| 123 | + | ||
| 124 | +- 建议在 useCheckin.onSubmit 中,当 add/edit API 返回 code===1 且后续逻辑准备 router.back 前,删除对应 key。 | ||
| 125 | + | ||
| 126 | +这样可覆盖“不同入口页复用 onSubmit”以及“提交后立即返回上一页”的场景。 | ||
| 127 | + | ||
| 128 | +## 开发步骤(可落地的实现顺序) | ||
| 129 | + | ||
| 130 | +### 第 0 步:验证手段先行(TDD) | ||
| 131 | + | ||
| 132 | +新增 Vitest 用例,先定义以下可验证点: | ||
| 133 | + | ||
| 134 | +- 写入后能读取同一 key 的草稿;过期后读取返回空且自动删除。 | ||
| 135 | +- 仅保存 status===done 且含 meta_id 的附件。 | ||
| 136 | +- 清理函数能删除所有过期 key,不误删其他业务 localStorage。 | ||
| 137 | +- 提交成功时会调用清理(可通过 mock API 返回 code===1 验证)。 | ||
| 138 | + | ||
| 139 | +### 第 1 步:抽离草稿存储模块 | ||
| 140 | + | ||
| 141 | +位置建议:src/utils/checkinDraftCache.js(纯函数、无 UI 依赖)。 | ||
| 142 | + | ||
| 143 | +对外 API(示例): | ||
| 144 | + | ||
| 145 | +- is_enabled(): boolean(读取 env + 可选 query override) | ||
| 146 | +- build_key(context): string | ||
| 147 | +- save_draft(key, draft) | ||
| 148 | +- read_draft(key): draft|null(含 TTL 处理) | ||
| 149 | +- clear_draft(key) | ||
| 150 | +- cleanup_expired(prefix) | ||
| 151 | + | ||
| 152 | +### 第 2 步:在 CheckinDetailPage 接入“检测 + 弹框 + 回填” | ||
| 153 | + | ||
| 154 | +- onMounted:初始化后读取草稿并弹框。 | ||
| 155 | +- 回填时机:建议在任务详情/子任务列表加载完成后再回填 selectedTaskValue,避免 option 未加载导致显示异常。 | ||
| 156 | + | ||
| 157 | +### 第 3 步:在 CheckinDetailPage 接入“自动保存” | ||
| 158 | + | ||
| 159 | +- 对 message/fileList/selectedTaskValue/countValue/selectedTargets 建立 watch + debounce。 | ||
| 160 | +- 页面离开事件兜底(pagehide/visibilitychange)。 | ||
| 161 | + | ||
| 162 | +### 第 4 步:在 useCheckin.onSubmit 接入“成功清理” | ||
| 163 | + | ||
| 164 | +- onSubmit 成功分支清除草稿。 | ||
| 165 | +- 失败分支不清除,保留草稿以便重试。 | ||
| 166 | + | ||
| 167 | +## 边界条件与遗漏点梳理(建议补齐) | ||
| 168 | + | ||
| 169 | +1. 多用户切换:key 必须含 user_id,否则会串草稿。 | ||
| 170 | +2. 多任务并存:key 必须含 task_id/date/task_type,否则会在不同作业之间误恢复。 | ||
| 171 | +3. 附件未上传完成: | ||
| 172 | + - 仅保存已上传成功的项;如果用户退出时仍有 uploading 项,恢复后无法找回该 File。 | ||
| 173 | + - 可在保存时统计未保存数量,并在恢复弹框里追加提示“有 X 个附件上传未完成未被暂存”。 | ||
| 174 | +4. 关闭开关后的行为: | ||
| 175 | + - 关闭后不再读/写;建议仍执行一次 cleanup_expired,避免历史堆积。 | ||
| 176 | +5. 版本升级/数据结构变更:draft.version 不匹配时丢弃并清除,避免解析异常。 | ||
| 177 | +6. localStorage 配额:图片多但只存 url/meta_id 一般不会超;仍需 try/catch JSON 与 setItem 异常。 | ||
| 178 | +7. 编辑模式: | ||
| 179 | + - 要支持“编辑中断恢复”,建议 key 加 post_id 维度,并在 initEditData 回显后再弹框询问是否覆盖当前表单。 | ||
| 180 | + | ||
| 181 | +## 环境变量(规划) | ||
| 182 | + | ||
| 183 | +在 [.env](file:///Users/huyirui/program/itomix/git/mlaj/.env) 增加: | ||
| 184 | + | ||
| 185 | +- VITE_CHECKIN_DRAFT_CACHE = 1 | ||
| 186 | + | ||
| 187 | +约定: | ||
| 188 | + | ||
| 189 | +- '1' 开启,'0' 关闭 | ||
| 190 | +- 可选增加 URL 覆盖用于灰度测试:?enable_draft=1 / ?enable_draft=0(模式同 VITE_CHECKIN_MULTI_ATTACHMENT) |
-
Please register or login to post a comment