Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
24a0170b 1 parent 72130d39

feat(checkin): 新增打卡草稿缓存功能 

- 新增 useCheckinDraft composable，支持草稿的自动保存、恢复和清理
- 在打卡详情页集成草稿功能：自动保存表单内容，进入时提示恢复
- 优化文件上传逻辑，确保草稿恢复后能正确预览附件
- 修复 countValue 初始化顺序导致的 ReferenceError
- 更新环境变量配置，添加 VITE_CHECKIN_DRAFT_CACHE 开关
- 完善相关文档和测试用例
Expand all
Inline Side-by-side
Showing 10 changed files with 563 additions and 15 deletions
...@@ -18,3 +18,6 @@ VITE_APPID=微信appID ...@@ -18,3 +18,6 @@ VITE_APPID=微信appID
18 18
19 # 是否开启多附件功能 19 # 是否开启多附件功能
20 VITE_CHECKIN_MULTI_ATTACHMENT = 0 20 VITE_CHECKIN_MULTI_ATTACHMENT = 0
21 +
22 +# 是否开启打卡草稿缓存功能
23 +VITE_CHECKIN_DRAFT_CACHE = 0
......
...@@ -97,7 +97,7 @@ src/ ...@@ -97,7 +97,7 @@ src/
97 - **统一打卡页** (`/checkin/detail`)： 97 - **统一打卡页** (`/checkin/detail`)：
98 - 支持类型：文本、图片、视频、音频、计数打卡（如感恩日记）。 98 - 支持类型：文本、图片、视频、音频、计数打卡（如感恩日记）。
99 - 核心逻辑：`useCheckin` 封装上传（七牛云+Hash秒传）、校验、提交逻辑。 99 - 核心逻辑：`useCheckin` 封装上传（七牛云+Hash秒传）、校验、提交逻辑。
100 - - 交互：支持补卡、编辑已提交内容、选择打卡对象（计数模式）。 100 + - 交互：支持补卡、编辑已提交内容、选择打卡对象（计数模式）；支持自动保存草稿与断点恢复。
101 - **互动社区**：打卡动态流，支持点赞、评论、查看他人作品。 101 - **互动社区**：打卡动态流，支持点赞、评论、查看他人作品。
102 - **教师端** (`/teacher`)： 102 - **教师端** (`/teacher`)：
103 - **作业管理**：发布新作业，查看作业列表与详情（完成率/出勤率统计）。 103 - **作业管理**：发布新作业，查看作业列表与详情（完成率/出勤率统计）。
......
...@@ -2,6 +2,17 @@ ...@@ -2,6 +2,17 @@
2 2
3 说明：该章节从 README 迁移到本文件，避免 README 过长。后续新增变更建议追加在文件顶部。 3 说明：该章节从 README 迁移到本文件，避免 README 过长。后续新增变更建议追加在文件顶部。
4 4
5 +## 2026-01-25
6 +
7 +- 新增「暂存用户打卡信息」开发规划：[/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)
8 +- 完成「暂存用户打卡信息」功能开发
9 + - 核心逻辑：[/src/composables/useCheckinDraft.js](file:///Users/huyirui/program/itomix/git/mlaj/src/composables/useCheckinDraft.js)
10 + - 页面集成：[/src/views/checkin/CheckinDetailPage.vue](file:///Users/huyirui/program/itomix/git/mlaj/src/views/checkin/CheckinDetailPage.vue)
11 + - 支持自动保存、过期清理、恢复提示
12 +- 修复打卡详情页 `countValue` 初始化顺序导致的 ReferenceError 报错
13 +- 修复附件上传成功后未保存 URL 导致草稿恢复后无法预览的问题
14 +- 优化文件 URL 获取逻辑：移除硬编码默认域名，优先使用接口返回的 URL 或 src，仅在有域名信息时拼接 URL
15 +
5 ## 打卡详情页重构（/checkin/detail） 16 ## 打卡详情页重构（/checkin/detail）
6 17
7 - 统一了文本、媒体上传和计数打卡的入口 18 - 统一了文本、媒体上传和计数打卡的入口
......
1 +用户反馈:
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）
...@@ -179,7 +179,7 @@ describe('useCheckin 提交兼容', () => { ...@@ -179,7 +179,7 @@ describe('useCheckin 提交兼容', () => {
179 await onSubmit({ subtask_id: 's1' }) 179 await onSubmit({ subtask_id: 's1' })
180 180
181 expect(addUploadTaskAPI).toHaveBeenCalledTimes(0) 181 expect(addUploadTaskAPI).toHaveBeenCalledTimes(0)
182 - expect(showToast).toHaveBeenCalledWith('当前接口暂不支持多类型附件，请分别提交') 182 + expect(showToast).toHaveBeenCalledWith('当前接口暂不支持多类型附件，请删除其他类型附件之后再提交')
183 }) 183 })
184 184
185 it('开启多附件开关时允许 mixed files 提交', async () => { 185 it('开启多附件开关时允许 mixed files 提交', async () => {
......
1 +import { describe, expect, it, vi, beforeEach, afterEach } from 'vitest'
2 +import { useCheckinDraft } from '../useCheckinDraft'
3 +
4 +// Mock localStorage
5 +const localStorageMock = (() => {
6 + let store = {}
7 + return {
8 + getItem: vi.fn(key => store[key] || null),
9 + setItem: vi.fn((key, value) => { store[key] = value.toString() }),
10 + removeItem: vi.fn(key => { delete store[key] }),
11 + clear: vi.fn(() => { store = {} }),
12 + key: vi.fn(i => Object.keys(store)[i] || null),
13 + get length() { return Object.keys(store).length }
14 + }
15 +})()
16 +
17 +global.localStorage = localStorageMock
18 +
19 +describe('useCheckinDraft', () => {
20 + beforeEach(() => {
21 + localStorageMock.clear()
22 + vi.clearAllMocks()
23 + // Mock Date.now
24 + vi.useFakeTimers()
25 + })
26 +
27 + afterEach(() => {
28 + vi.useRealTimers()
29 + })
30 +
31 + const mockContext = {
32 + user_id: 'u123',
33 + task_id: 't456',
34 + date: '2026-01-25',
35 + task_type: 'upload',
36 + status: 'create'
37 + }
38 +
39 + const {
40 + build_key,
41 + save_draft,
42 + read_draft,
43 + clear_draft,
44 + cleanup_expired
45 + } = useCheckinDraft()
46 +
47 + it('should generate correct key', () => {
48 + const key = build_key(mockContext)
49 + expect(key).toBe('CHECKIN_DRAFT_V1:u123:t456:2026-01-25:upload:create')
50 + })
51 +
52 + it('should save and read draft', () => {
53 + const key = build_key(mockContext)
54 + const payload = { message: 'hello', file_list: [] }
55 +
56 + save_draft(key, payload)
57 +
58 + const saved = read_draft(key)
59 + expect(saved).not.toBeNull()
60 + expect(saved.payload).toEqual(payload)
61 + expect(saved.version).toBe(1)
62 + })
63 +
64 + it('should return null for expired draft', () => {
65 + const key = build_key(mockContext)
66 + const payload = { message: 'expired' }
67 +
68 + save_draft(key, payload)
69 +
70 + // Advance time by 8 days (TTL is 7 days)
71 + vi.setSystemTime(Date.now() + 8 * 24 * 60 * 60 * 1000)
72 +
73 + const saved = read_draft(key)
74 + expect(saved).toBeNull()
75 + // Should also remove from storage
76 + expect(localStorage.getItem(key)).toBeNull()
77 + })
78 +
79 + it('should cleanup only expired drafts', () => {
80 + const ctx1 = { ...mockContext, task_id: 't1' }
81 + const ctx2 = { ...mockContext, task_id: 't2' }
82 + const key1 = build_key(ctx1)
83 + const key2 = build_key(ctx2)
84 + const otherKey = 'OTHER_KEY'
85 +
86 + save_draft(key1, { msg: 'expire soon' })
87 + save_draft(key2, { msg: 'keep' })
88 + localStorage.setItem(otherKey, 'some value')
89 +
90 + // Set key1 to expire
91 + // We need to manually manipulate storage to simulate different saved_at
92 + // Or just save key1, advance time, save key2
93 +
94 + // Reset storage and start over
95 + localStorageMock.clear()
96 +
97 + // Save key1
98 + save_draft(key1, { msg: 'old' })
99 +
100 + // Advance 8 days
101 + const eightDays = 8 * 24 * 60 * 60 * 1000
102 + vi.setSystemTime(Date.now() + eightDays)
103 +
104 + // Save key2 (fresh)
105 + save_draft(key2, { msg: 'new' })
106 +
107 + // Other key
108 + localStorage.setItem(otherKey, 'val')
109 +
110 + // Run cleanup
111 + cleanup_expired()
112 +
113 + expect(localStorage.getItem(key1)).toBeNull()
114 + expect(localStorage.getItem(key2)).not.toBeNull()
115 + expect(localStorage.getItem(otherKey)).toBe('val')
116 + })
117 +
118 + it('should only save "done" files with meta_id', () => {
119 + const key = build_key(mockContext)
120 + const files = [
121 + { status: 'done', meta_id: 'm1', name: 'f1' },
122 + { status: 'uploading', name: 'f2' },
123 + { status: 'failed', name: 'f3' },
124 + { status: 'done', name: 'f4' } // no meta_id
125 + ]
126 +
127 + save_draft(key, { file_list: files })
128 +
129 + const saved = read_draft(key)
130 + expect(saved.payload.file_list).toHaveLength(1)
131 + expect(saved.payload.file_list[0].meta_id).toBe('m1')
132 + })
133 +})
...@@ -205,9 +205,29 @@ export function useCheckin() { ...@@ -205,9 +205,29 @@ export function useCheckin() {
205 hash: md5 205 hash: md5
206 }) 206 })
207 207
208 + // 根据当前 activeType 或文件类型判断
209 + let currentFileType = activeType.value
210 + if (!['image', 'video', 'audio'].includes(currentFileType)) {
211 + // 如果 activeType 不是这三种（比如 text），尝试从文件类型推断
212 + if (file.file.type.startsWith('image/')) currentFileType = 'image'
213 + else if (file.file.type.startsWith('video/')) currentFileType = 'video'
214 + else if (file.file.type.startsWith('audio/')) currentFileType = 'audio'
215 + else currentFileType = 'file' // 默认
216 + }
217 +
208 // 文件已存在，直接返回 218 // 文件已存在，直接返回
209 if (tokenResult.data) { 219 if (tokenResult.data) {
210 - return tokenResult.data 220 + const data = tokenResult.data
221 + let finalUrl = data.url || data.src
222 + // 如果没有URL但有filekey，尝试手动拼接
223 + if (!finalUrl && (data.filekey || data.key || data.filepath) && tokenResult.domain) {
224 + const key = data.filekey || data.key || data.filepath
225 + const domain = tokenResult.domain
226 + const cleanDomain = domain.endsWith('/') ? domain : domain + '/'
227 + const cleanKey = key.startsWith('/') ? key.slice(1) : key
228 + finalUrl = cleanDomain + cleanKey
229 + }
230 + return { ...data, url: finalUrl, file_type: currentFileType } // 确保返回 file_type
211 } 231 }
212 232
213 // 新文件上传 233 // 新文件上传
...@@ -215,16 +235,6 @@ export function useCheckin() { ...@@ -215,16 +235,6 @@ export function useCheckin() {
215 const suffix = /.[^.]+$/.exec(file.file.name) || '' 235 const suffix = /.[^.]+$/.exec(file.file.name) || ''
216 let fileName = '' 236 let fileName = ''
217 237
218 - // 根据当前 activeType 或文件类型判断
219 - let currentFileType = activeType.value
220 - if (!['image', 'video', 'audio'].includes(currentFileType)) {
221 - // 如果 activeType 不是这三种（比如 text），尝试从文件类型推断
222 - if (file.file.type.startsWith('image/')) currentFileType = 'image'
223 - else if (file.file.type.startsWith('video/')) currentFileType = 'video'
224 - else if (file.file.type.startsWith('audio/')) currentFileType = 'audio'
225 - else currentFileType = 'file' // 默认
226 - }
227 -
228 if (currentFileType === 'image') { 238 if (currentFileType === 'image') {
229 fileName = `mlaj/upload/checkin/${currentUser.value.mobile}/img/${md5}${suffix}` 239 fileName = `mlaj/upload/checkin/${currentUser.value.mobile}/img/${md5}${suffix}`
230 } else { 240 } else {
...@@ -252,7 +262,18 @@ export function useCheckin() { ...@@ -252,7 +262,18 @@ export function useCheckin() {
252 } 262 }
253 263
254 const { data } = await saveFileAPI(saveData) 264 const { data } = await saveFileAPI(saveData)
255 - return { ...data, file_type: currentFileType } 265 +
266 + // 确保返回URL，如果后端未返回则手动拼接
267 + let finalUrl = data?.url || data?.src
268 + if (!finalUrl && tokenResult.domain) {
269 + // 优先使用接口返回的域名
270 + const domain = tokenResult.domain
271 + const cleanDomain = domain.endsWith('/') ? domain : domain + '/'
272 + const cleanKey = uploadResult.filekey.startsWith('/') ? uploadResult.filekey.slice(1) : uploadResult.filekey
273 + finalUrl = cleanDomain + cleanKey
274 + }
275 +
276 + return { ...data, url: finalUrl, file_type: currentFileType }
256 } 277 }
257 } 278 }
258 return null 279 return null
...@@ -425,6 +446,7 @@ export function useCheckin() { ...@@ -425,6 +446,7 @@ export function useCheckin() {
425 /** 446 /**
426 * 提交打卡 447 * 提交打卡
427 * @param {Object} extraData - 额外提交数据 448 * @param {Object} extraData - 额外提交数据
449 + * @param {Function} onSuccess - 提交成功回调 (新增)
428 * @description 450 * @description
429 * 提交流程： 451 * 提交流程：
430 * 1. 表单校验（内容长度、是否上传文件） 452 * 1. 表单校验（内容长度、是否上传文件）
...@@ -433,7 +455,7 @@ export function useCheckin() { ...@@ -433,7 +455,7 @@ export function useCheckin() {
433 * 4. 调用对应 API (addUploadTaskAPI / editUploadTaskInfoAPI) 455 * 4. 调用对应 API (addUploadTaskAPI / editUploadTaskInfoAPI)
434 * 5. 成功后设置 sessionStorage 刷新标记并返回上一页 456 * 5. 成功后设置 sessionStorage 刷新标记并返回上一页
435 */ 457 */
436 - const onSubmit = async (extraData = {}) => { 458 + const onSubmit = async (extraData = {}, onSuccess = null) => {
437 if (uploading.value) return 459 if (uploading.value) return
438 460
439 // 表单验证 461 // 表单验证
...@@ -568,6 +590,11 @@ export function useCheckin() { ...@@ -568,6 +590,11 @@ export function useCheckin() {
568 if (result?.code === 1) { 590 if (result?.code === 1) {
569 showToast('提交成功') 591 showToast('提交成功')
570 592
593 + // 执行成功回调（如清理草稿）
594 + if (typeof onSuccess === 'function') {
595 + onSuccess()
596 + }
597 +
571 // 设置刷新标记，用于列表页更新数据 598 // 设置刷新标记，用于列表页更新数据
572 const refreshType = route.query.status === 'edit' ? 'edit' : 'add'; 599 const refreshType = route.query.status === 'edit' ? 'edit' : 'add';
573 sessionStorage.setItem('checkin_refresh_flag', refreshType); 600 sessionStorage.setItem('checkin_refresh_flag', refreshType);
......
1 +/**
2 + * 打卡草稿缓存逻辑封装
3 + * @module useCheckinDraft
4 + * @description
5 + * 提供打卡草稿的增删改查能力，基于 localStorage。
6 + *
7 + * 核心功能：
8 + * 1. 构建唯一的缓存 Key（用户+任务+日期+状态维度）。
9 + * 2. 保存草稿：自动过滤未完成的附件，只存 meta_id/url 等元数据。
10 + * 3. 读取草稿：支持过期检查（TTL 7天）。
11 + * 4. 自动清理：支持惰性清理和全量扫描清理过期项。
12 + *
13 + * 使用场景：
14 + * - CheckinDetailPage 自动保存与恢复。
15 + */
16 +import { useRoute } from 'vue-router'
17 +
18 +export function useCheckinDraft() {
19 + const DRAFT_PREFIX = 'CHECKIN_DRAFT_V1'
20 + const TTL_MS = 7 * 24 * 60 * 60 * 1000 // 7天过期
21 +
22 + /**
23 + * 判断功能是否开启
24 + * @returns {boolean}
25 + */
26 + const is_enabled = () => {
27 + // 支持 URL 参数覆盖 (CheckinDetailPage 会用到 route，但此处为纯函数逻辑，依赖调用方传入或在组件内判断)
28 + // 这里仅读取环境变量
29 + // 实际使用时建议结合 route.query.enable_draft 判断
30 + return import.meta.env.VITE_CHECKIN_DRAFT_CACHE === '1'
31 + }
32 +
33 + /**
34 + * 构建缓存 Key
35 + * @param {Object} context
36 + * @param {string} context.user_id 用户ID
37 + * @param {string} context.task_id 任务ID
38 + * @param {string} context.date 日期
39 + * @param {string} context.task_type 任务类型
40 + * @param {string} context.status 状态 (create/edit)
41 + * @returns {string} Key
42 + */
43 + const build_key = ({ user_id, task_id, date, task_type, status }) => {
44 + // 确保所有字段都存在，避免生成 undefined
45 + const parts = [
46 + user_id || 'guest',
47 + task_id || 'default',
48 + date || 'nodate',
49 + task_type || 'default',
50 + status || 'create'
51 + ]
52 + return `${DRAFT_PREFIX}:${parts.join(':')}`
53 + }
54 +
55 + /**
56 + * 保存草稿
57 + * @param {string} key 缓存Key
58 + * @param {Object} payload 业务数据
59 + * @param {string} payload.message 文本
60 + * @param {Array} payload.file_list 文件列表
61 + * @param {string} payload.active_type 当前类型
62 + * @param {string|number} payload.subtask_id 子任务ID
63 + * @param {Array} payload.selected_task_value 选中的任务值
64 + * @param {Object} payload.count 计数打卡数据
65 + */
66 + const save_draft = (key, payload) => {
67 + if (!key) return
68 +
69 + try {
70 + // 过滤附件：只保存已上传成功且有 meta_id 的
71 + const validFiles = (payload.file_list || []).filter(item =>
72 + item.status === 'done' && item.meta_id
73 + ).map(item => ({
74 + meta_id: item.meta_id,
75 + url: item.url,
76 + name: item.name,
77 + file_type: item.file_type
78 + }))
79 +
80 + const data = {
81 + version: 1,
82 + saved_at: Date.now(),
83 + expires_at: Date.now() + TTL_MS,
84 + payload: {
85 + ...payload,
86 + file_list: validFiles
87 + }
88 + }
89 +
90 + localStorage.setItem(key, JSON.stringify(data))
91 + console.log(`[草稿缓存] 已保存: ${key}`, data.payload)
92 + } catch (e) {
93 + console.error('[草稿缓存] 保存失败:', e)
94 + }
95 + }
96 +
97 + /**
98 + * 读取草稿
99 + * @param {string} key 缓存Key
100 + * @returns {Object|null} 草稿数据或null
101 + */
102 + const read_draft = (key) => {
103 + if (!key) return null
104 +
105 + try {
106 + const raw = localStorage.getItem(key)
107 + if (!raw) return null
108 +
109 + const data = JSON.parse(raw)
110 +
111 + // 检查版本
112 + if (data.version !== 1) {
113 + console.warn('[草稿缓存] 版本不匹配，丢弃旧数据')
114 + clear_draft(key)
115 + return null
116 + }
117 +
118 + // 检查过期
119 + if (data.expires_at && Date.now() > data.expires_at) {
120 + console.log('[草稿缓存] 数据已过期，自动清理')
121 + clear_draft(key)
122 + return null
123 + }
124 +
125 + return data
126 + } catch (e) {
127 + console.error('[草稿缓存] 读取失败:', e)
128 + return null
129 + }
130 + }
131 +
132 + /**
133 + * 清除指定草稿
134 + * @param {string} key
135 + */
136 + const clear_draft = (key) => {
137 + if (!key) return
138 + localStorage.removeItem(key)
139 + console.log(`[草稿缓存] 已清除: ${key}`)
140 + }
141 +
142 + /**
143 + * 清理所有过期草稿
144 + */
145 + const cleanup_expired = () => {
146 + try {
147 + const keysToRemove = []
148 + const now = Date.now()
149 +
150 + for (let i = 0; i < localStorage.length; i++) {
151 + const key = localStorage.key(i)
152 + if (key && key.startsWith(DRAFT_PREFIX)) {
153 + try {
154 + const raw = localStorage.getItem(key)
155 + const data = JSON.parse(raw)
156 + if (data.expires_at && now > data.expires_at) {
157 + keysToRemove.push(key)
158 + }
159 + } catch (e) {
160 + // 解析失败的脏数据也清理掉
161 + keysToRemove.push(key)
162 + }
163 + }
164 + }
165 +
166 + keysToRemove.forEach(key => {
167 + localStorage.removeItem(key)
168 + console.log(`[草稿缓存] 自动清理过期项: ${key}`)
169 + })
170 + } catch (e) {
171 + console.error('[草稿缓存] 批量清理失败:', e)
172 + }
173 + }
174 +
175 + return {
176 + is_enabled,
177 + build_key,
178 + save_draft,
179 + read_draft,
180 + clear_draft,
181 + cleanup_expired
182 + }
183 +}
This diff is collapsed. Click to expand it.