Vue3+TS+Uniapp构建医疗小程序的工程化实践

简介：本资源是一套基于Vue3 + TypeScript + Uniapp技术栈开发的医疗类小程序完整实战案例，面向前端初学者及希望进阶跨端开发的开发者，聚焦小程序在挂号、预约、个人中心、视频问诊等典型医疗场景中的落地实现。压缩包共30个文件，包含6个核心Vue页面组件、6个TypeScript业务逻辑与类型定义文件（如shime-uni.d.ts、request.ts）、5个配置类JSON文件（pages.json、manifest.json等），以及PNG图标、SCSS样式和HTML入口等配套资源，整体仅1.48MB，轻量易读。已有2260人学习下载，适合快速理解Uniapp项目结构、Vue3组合式API与TS类型约束协同开发模式。读者可直接运行调试，掌握从环境搭建、路由配置、API请求封装到多端适配的全流程实践要点，并复用标准化的请求拦截、环境变量管理与全局样式方案。

1. 医疗小程序为什么非得用 Vue3 + TypeScript + Uniapp？——不是为了炫技，是为绕过三类高频翻车现场

某医疗健康类小程序上线前两周，连续出现三类典型故障：用户提交问诊表单后页面白屏、药品库存状态在 iOS 端始终不更新、医生端多设备同步问诊记录时时间戳错乱。排查发现，问题根源不在业务逻辑，而在于技术栈组合失配——旧项目用 Vue2 + 原生小程序 API 混写，TypeScript 类型校验形同虚设，跨平台适配靠 if-else 硬扛。这正是「Vue3 + TypeScript + Uniapp」组合被大量医疗类小程序团队选中的真实动因：它不是前端新潮玩具，而是解决医疗场景强一致性、高可靠性、多端收敛的工程化解法。Vue3 的响应式 Proxy 机制让表单联动更可控；TypeScript 的接口约束能提前拦截「患者ID传成字符串却当number用」这类低级但致命错误；Uniapp 的一套代码编译多端能力，则直接规避了「微信小程序能用、支付宝小程序报undefined」的跨平台玄学。适合正在启动或重构医疗类小程序的中高级前端开发者——你不需要从零造轮子，但必须清楚每个技术点在医疗合规、数据安全、用户信任链中承担什么角色。

2. 从零初始化：用 Vue3 + TypeScript + Uniapp 搭建可验证的医疗小程序骨架

医疗小程序对初始化结构有隐性要求：路由需支持敏感页面（如问诊记录）的权限拦截、状态管理要隔离患者数据与医生数据、网络请求必须内置统一错误码处理（如 401 未登录、451 患者信息不完整）。本节不走uni-app官方模板的默认路径，而是基于生产环境验证过的最小可行骨架展开。

2.1 创建带类型约束的项目并锁定关键版本

# 使用官方 CLI 创建 TypeScript 版本（注意：必须指定 --vue3） npx @dcloudio/vue-cli@latest create -p hello-uniapp-medical --vue3 --ts # 进入项目并安装生产必需依赖（非开发依赖） cd hello-uniapp-medical npm install @dcloudio/uni-app@3.9.12 @dcloudio/uni-h5@3.9.12 @dcloudio/uni-mp-weixin@3.9.12 npm install axios@1.6.7 dayjs@1.11.10 mitt@3.0.1

提示：Uniapp 官方未强制要求锁版本，但医疗类项目必须锁。实测@dcloudio/uni-app@3.9.12是首个完整支持 Vue3<script setup>语法且无跨平台onLoad生命周期丢失问题的稳定版；axios@1.6.7则修复了微信小程序环境下transformRequest对 FormData 处理异常的 bug（该 bug 会导致上传患者病历图片时接口静默失败）。

2.2 构建符合医疗场景的目录分层结构

src/ ├── api/ # 所有后端接口定义（含类型声明） │ ├── patient.ts # 患者相关接口：获取档案、提交问诊 │ ├── doctor.ts # 医生相关接口：排班查询、接诊记录 │ └── common.ts # 全局接口：登录、token刷新、错误码映射 ├── assets/ # 静态资源（图标、字体、合规声明PDF） ├── components/ # 可复用业务组件（非 UI 组件库） │ ├── medical-form/ # 含表单校验规则的问诊表单 │ ├── patient-card/ # 患者信息卡片（含 HIPAA 合规字段遮罩逻辑） │ └── consent-modal/ # 知情同意弹窗（含法律文本版本控制） ├── composables/ # 组合式函数（核心业务逻辑封装） │ ├── useAuth.ts # 登录态管理（含 token 自动续期、过期跳转） │ ├── usePatientData.ts # 患者数据缓存策略（本地加密 + 过期时间） │ └── useNetwork.ts # 网络状态监听 + 离线队列（问诊草稿暂存） ├── stores/ # Pinia 状态管理（严格按角色隔离） │ ├── patient.store.ts # 患者侧状态（仅存当前患者ID、就诊历史） │ └── doctor.store.ts # 医生侧状态（仅存当前医生ID、待接诊列表） ├── utils/ # 工具函数（含合规处理） │ ├── crypto.ts # 敏感字段 AES 加密（如身份证号、手机号） │ ├── validator.ts # 医疗专用校验器（如「血压值必须为 80-200/40-120 格式」） │ └── logger.ts # 合规日志（脱敏后上报，禁用 console.log） ├── App.vue # 全局样式重置 + 合规水印（底部固定「本服务受XX法规约束」） ├── main.ts # 入口：Pinia 初始化 + Axios 拦截器注入 + 错误边界注册 └── pages.json # 页面配置：显式声明所有页面路径，禁用未授权页面的 tabBar 显示

参数说明：pages.json中必须设置"nvueStyleCompiler": "uni-app"，否则nvue页面在 iOS 上会出现文字渲染模糊问题（医疗小程序中药品名称、剂量单位必须清晰可辨）；main.ts中createApp(App)后需立即调用app.config.errorHandler = (err) => { ... }，捕获未处理 Promise 拒绝——这是防止「患者提交问诊后无反馈」的关键兜底。

2.3 实现医疗场景强依赖的登录态管理组合式函数

// src/composables/useAuth.ts import { ref, onMounted } from 'vue' import { login, refreshToken } from '@/api/common' import { usePatientStore } from '@/stores/patient.store' import { encrypt, decrypt } from '@/utils/crypto' interface AuthState { token: string expiresAt: number // Unix 时间戳（秒） patientId: string } const authState = ref<AuthState | null>(null) export function useAuth() { const patientStore = usePatientStore() // 从本地安全存储读取（非 uni.getStorageSync，而是封装后的加密读取） const loadFromStorage = () => { try { const encrypted = uni.getStorageSync('auth_data') if (encrypted) { const decrypted = decrypt(encrypted) authState.value = JSON.parse(decrypted) as AuthState // 验证 token 是否过期（预留 5 分钟缓冲） if (authState.value.expiresAt < Date.now() / 1000 - 300) { authState.value = null } } } catch (e) { console.warn('Auth data load failed:', e) authState.value = null } } // 登录主流程（含双因子校验占位） const loginWithCredentials = async (phone: string, password: string, captcha: string) => { const res = await login({ phone, password, captcha }) // 医疗合规要求：密码明文不得出现在任何日志或内存快照中 // 此处 res.data.token 为 JWT，需解析 payload 验证 exp 字段 const payload = JSON.parse(atob(res.data.token.split('.')[1])) authState.value = { token: res.data.token, expiresAt: payload.exp, patientId: res.data.patientId } // 加密存储（密钥由设备指纹生成，非硬编码） const encrypted = encrypt(JSON.stringify(authState.value)) uni.setStorageSync('auth_data', encrypted) // 同步到 Pinia（触发响应式更新） patientStore.setPatientId(res.data.patientId) } // Token 自动续期（在每次 API 请求前检查） const ensureValidToken = async (): Promise<boolean> => { if (!authState.value) return false if (authState.value.expiresAt > Date.now() / 1000 + 300) return true try { const res = await refreshToken({ refreshToken: authState.value.token }) authState.value.token = res.data.token authState.value.expiresAt = JSON.parse(atob(res.data.token.split('.')[1])).exp const encrypted = encrypt(JSON.stringify(authState.value)) uni.setStorageSync('auth_data', encrypted) return true } catch (e) { // 续期失败则清空状态，跳转登录页 clearAuth() uni.navigateTo({ url: '/pages/login/login' }) return false } } const clearAuth = () => { authState.value = null uni.removeStorageSync('auth_data') patientStore.clear() } onMounted(() => { loadFromStorage() }) return { authState, loginWithCredentials, ensureValidToken, clearAuth } }

逻辑说明：该组合式函数将登录态管理从store中剥离，原因有三：一是医疗小程序要求登录态与患者身份强绑定（一个设备可能切换多个患者账号），store全局状态易污染；二是useAuth可被任意页面按需引入，避免store在未登录页面也执行初始化；三是encrypt/decrypt调用时机精准控制在内存中，规避uni.setStorageSync直接存明文 token 的风险。ensureValidToken的返回值Promise<boolean>是关键设计——所有 API 请求拦截器必须await此函数，失败则中断请求链，防止「token 过期后仍发送问诊请求导致数据丢失」。

3. 医疗表单的确定性校验：用 TypeScript 接口驱动 Vue3 表单验证规则

医疗小程序中，表单不仅是 UI 元素，更是临床数据采集入口。一个「血压值」字段若允许输入abc或300/200，后端接收后可能直接拒绝或产生错误诊断建议。本节用 TypeScript 接口定义字段语义，再通过defineComponent的泛型能力，让表单组件自动推导校验规则，杜绝人工维护规则与接口定义脱节。

3.1 定义医疗领域专用接口与校验元数据

// src/api/patient.ts export interface PatientVitalSigns { /** * 血压值，格式为 "收缩压/舒张压"，如 "120/80" * @pattern ^\d{2,3}\/\d{2,3}$ * @minValue 80/40 * @maxValue 200/120 */ bloodPressure: string /** * 血糖值，单位 mmol/L，保留一位小数 * @min 3.9 * @max 27.8 * @format decimal(1) */ bloodGlucose: number /** * 主诉症状，最多 200 字，禁用敏感词（如"癌症"、"绝症"） * @maxLength 200 * @forbiddenWords ["癌症", "绝症", "晚期"] */ chiefComplaint: string /** * 就诊科室 ID（枚举值） * @enum ["internal", "surgery", "dermatology", "ophthalmology"] */ departmentId: 'internal' | 'surgery' | 'dermatology' | 'ophthalmology' } // src/utils/validator.ts export type ValidationRule = { type: 'required' | 'pattern' | 'min' | 'max' | 'maxLength' | 'forbiddenWords' | 'enum' message: string value?: any } export function generateValidationRules<T>(schema: T): Record<keyof T, ValidationRule[]> { const rules: Record<string, ValidationRule[]> = {} // 通过反射获取 JSDoc 注释（实际项目中需用 ts-morph 或自定义 AST 解析器） // 此处为简化演示，手动映射（生产环境应自动化） const fieldRules: Partial<Record<keyof T, ValidationRule[]>> = { bloodPressure: [ { type: 'required', message: '血压值不能为空' }, { type: 'pattern', message: '血压格式错误，例如：120/80', value: /^\d{2,3}\/\d{2,3}$/ }, { type: 'custom', message: '血压值超出正常范围', value: (val: string) => { const [systolic, diastolic] = val.split('/').map(Number) return systolic >= 80 && systolic <= 200 && diastolic >= 40 && diastolic <= 120 } } ], bloodGlucose: [ { type: 'required', message: '血糖值不能为空' }, { type: 'min', message: '血糖值不能低于 3.9 mmol/L', value: 3.9 }, { type: 'max', message: '血糖值不能高于 27.8 mmol/L', value: 27.8 } ], chiefComplaint: [ { type: 'required', message: '主诉不能为空' }, { type: 'maxLength', message: '主诉不能超过 200 字', value: 200 }, { type: 'forbiddenWords', message: '主诉中包含敏感词汇，请修改', value: ['癌症', '绝症', '晚期'] } ], departmentId: [ { type: 'required', message: '请选择就诊科室' }, { type: 'enum', message: '科室选择无效', value: ['internal', 'surgery', 'dermatology', 'ophthalmology'] } ] } Object.keys(fieldRules).forEach(key => { rules[key] = fieldRules[key as keyof typeof fieldRules] }) return rules as Record<keyof T, ValidationRule[]> }

参数说明：generateValidationRules返回的Record<keyof T, ValidationRule[]>是关键——它让PatientVitalSigns接口的每个字段名，都对应一组可执行的校验规则数组。type: 'custom'用于复杂业务逻辑（如血压范围校验），其value是函数而非字面量，确保规则可动态计算。此设计使后端接口变更时，只需修改 TypeScript 接口和fieldRules映射，表单校验自动同步，无需逐个页面检查rules配置。

3.2 创建可复用的医疗表单组件（支持自动规则注入）

<!-- src/components/medical-form/VitalSignsForm.vue --> <script setup lang="ts"> import { ref, watch } from 'vue' import { PatientVitalSigns, generateValidationRules } from '@/api/patient' import { validateField, ValidationResult } from '@/utils/validator' // 1. 定义表单数据结构（与接口完全一致） const formData = ref<PatientVitalSigns>({ bloodPressure: '', bloodGlucose: 0, chiefComplaint: '', departmentId: 'internal' }) // 2. 自动生成校验规则（类型安全！） const rules = generateValidationRules<PatientVitalSigns>(formData.value) // 3. 存储每个字段的校验结果 const fieldErrors = ref<Record<string, string[]>>({}) // 4. 校验单个字段（供 input blur 时调用） const validateFieldByKey = (key: keyof PatientVitalSigns) => { const result = validateField(formData.value[key], rules[key]) fieldErrors.value[key] = result.errors return result.isValid } // 5. 全局校验（提交时调用） const validateAll = (): boolean => { let isValid = true Object.keys(rules).forEach(key => { const result = validateField(formData.value[key as keyof PatientVitalSigns], rules[key]) fieldErrors.value[key] = result.errors if (!result.isValid) isValid = false }) return isValid } // 6. 提交处理（仅当全部通过才发请求） const handleSubmit = async () => { if (!validateAll()) return try { // 此处调用 API，formData.value 已通过类型+规则双重校验 await submitVitalSigns(formData.value) uni.showToast({ title: '生命体征已提交', icon: 'success' }) } catch (e) { uni.showToast({ title: '提交失败，请重试', icon: 'none' }) } } </script> <template> <view class="vital-signs-form"> <!-- 血压字段 --> <view class="form-item"> <text class="label">血压（mmHg）</text> <input v-model="formData.bloodPressure" placeholder="例如：120/80" @blur="() => validateFieldByKey('bloodPressure')" /> <view v-if="fieldErrors.bloodPressure?.length" class="error-tip"> {{ fieldErrors.bloodPressure[0] }} </view> </view> <!-- 血糖字段 --> <view class="form-item"> <text class="label">血糖（mmol/L）</text> <input v-model.number="formData.bloodGlucose" placeholder="例如：6.2" type="number" @blur="() => validateFieldByKey('bloodGlucose')" /> <view v-if="fieldErrors.bloodGlucose?.length" class="error-tip"> {{ fieldErrors.bloodGlucose[0] }} </view> </view> <!-- 主诉字段 --> <view class="form-item"> <text class="label">主诉</text> <textarea v-model="formData.chiefComplaint" placeholder="请描述主要不适症状" @blur="() => validateFieldByKey('chiefComplaint')" /> <view v-if="fieldErrors.chiefComplaint?.length" class="error-tip"> {{ fieldErrors.chiefComplaint[0] }} </view> </view> <!-- 科室选择 --> <view class="form-item"> <text class="label">就诊科室</text> <picker mode="selector" :range="['内科', '外科', '皮肤科', '眼科']" @change="e => formData.departmentId = ['internal', 'surgery', 'dermatology', 'ophthalmology'][e.detail.value]" > <view class="picker-text"> {{ ['内科', '外科', '皮肤科', '眼科'].find((_, i) => ['internal', 'surgery', 'dermatology', 'ophthalmology'][i] === formData.departmentId ) || '请选择科室' }} </view> </picker> <view v-if="fieldErrors.departmentId?.length" class="error-tip"> {{ fieldErrors.departmentId[0] }} </view> </view> <button @click="handleSubmit" class="submit-btn">提交生命体征</button> </view> </template> <style scoped> .form-item { margin-bottom: 24rpx; padding: 0 30rpx; } .label { display: block; font-size: 28rpx; color: #333; margin-bottom: 12rpx; } .input, .textarea, .picker-text { width: 100%; height: 80rpx; line-height: 80rpx; padding: 0 20rpx; border: 1px solid #e0e0e0; border-radius: 8rpx; font-size: 28rpx; } .error-tip { margin-top: 8rpx; font-size: 24rpx; color: #e64340; min-height: 32rpx; } .submit-btn { margin: 40rpx 30rpx; background-color: #1890ff; color: white; border-radius: 8rpx; font-size: 32rpx; } </style>

逻辑说明：该组件的核心价值在于rules = generateValidationRules<PatientVitalSigns>(...)—— 它将 TypeScript 接口的类型定义，直接转化为运行时可执行的校验规则。v-model.number用于bloodGlucose确保输入为数字类型，@blur触发单字段校验，validateAll()在提交时做最终确认。所有fieldErrors的 key 名（如bloodPressure）均来自PatientVitalSigns接口字段名，IDE 可自动补全，杜绝拼写错误。生产环境中，validateField函数会集成正则预编译、防抖、异步校验（如科室ID是否有效）等能力，此处为聚焦主线逻辑做了精简。

4. 跨平台一致性避坑指南：Uniapp 在医疗小程序中的 5 个血泪经验

医疗小程序的「一次开发、多端运行」承诺，在真实场景中常被三类问题击穿：iOS 微信小程序的canvas渲染异常、支付宝小程序的storage容量限制、H5 端的localStorage跨域隔离。以下 5 条避坑经验，全部来自某医疗小程序在微信、支付宝、百度、H5 四端上线后的线上故障复盘，每条均附现象、根因与可落地的解决方案。

4.1 现象：iOS 微信小程序中，使用uni.createCanvasContext绘制体温曲线图时，线条粗细随机变细或消失

原因：iOS 微信客户端对canvas的lineWidth属性存在渲染精度 Bug，当lineWidth设置为1.5或2.5等非整数值时，部分机型会降采样为1导致视觉变细；而lineCap: 'round'在某些 iOS 版本下会引发路径闭合异常，造成线条断裂。
解决：强制lineWidth为整数，并禁用lineCap

// 错误写法 ctx.setLineWidth(1.5) ctx.setLineCap('round') // 正确写法（体温曲线图必须清晰可辨，宁可牺牲圆角） ctx.setLineWidth(2) // 必须整数 ctx.setLineCap('butt') // 禁用 round，改用 butt

4.2 现象：支付宝小程序中，患者上传的病历 PDF 文件（平均 2MB）保存到uni.setStorageSync后，再次读取时内容为空或乱码

原因：支付宝小程序uni.setStorageSync单次最大存储为 2MB，但实际可用空间受系统预留影响，通常仅 1.5MB 左右；且uni.getStorageSync读取大文件时，若内存不足会静默失败。
解决：改用uni.setStorage（异步） + 分片存储 + 内存缓存

// 将大文件转为 ArrayBuffer 后分片存储（每片 ≤ 500KB） const storeLargeFile = async (key: string, fileArrayBuffer: ArrayBuffer) => { const chunkSize = 500 * 1024 const chunks = [] for (let i = 0; i < fileArrayBuffer.byteLength; i += chunkSize) { chunks.push(fileArrayBuffer.slice(i, i + chunkSize)) } // 存储分片数量和元数据 await uni.setStorage({ key: `${key}_meta`, data: { totalChunks: chunks.length, size: fileArrayBuffer.byteLength } }) // 并行存储分片（uni.setStorage 支持并发） await Promise.all( chunks.map((chunk, index) => uni.setStorage({ key: `${key}_chunk_${index}`, data: chunk }) ) ) } // 读取时合并分片 const getLargeFile = async (key: string): Promise<ArrayBuffer> => { const meta = await uni.getStorage({ key: `${key}_meta` }) const chunks = await Promise.all( Array.from({ length: meta.data.totalChunks }).map((_, i) => uni.getStorage({ key: `${key}_chunk_${i}` }) ) ) const buffers = chunks.map(item => item.data as ArrayBuffer) return new Blob(buffers).arrayBuffer() }

4.3 现象：H5 端在 Chrome 115+ 浏览器中，uni.getSystemInfoSync().platform返回devtools而非h5，导致路由守卫误判为开发环境

原因：Chrome 115+ 启用新的 User-Agent Client Hints 机制，uni-app的 UA 解析逻辑未及时适配，将 DevTools 模拟的移动端 UA 识别为开发工具环境。
解决：弃用platform，改用window.navigator.userAgent特征检测

// 在路由守卫中 const getPlatform = (): 'h5' | 'mp-weixin' | 'mp-alipay' => { if (typeof window === 'undefined') return 'h5' const ua = window.navigator.userAgent.toLowerCase() if (ua.includes('miniprogram')) return 'mp-weixin' if (ua.includes('alipayclient')) return 'mp-alipay' // H5 端明确排除小程序 UA 特征 return 'h5' } // 路由守卫中使用 router.beforeEach((to, from, next) => { if (getPlatform() === 'h5' && to.meta.requiresAuth) { // H5 端特殊登录流程 } next() })

4.4 现象：微信小程序中，uni.navigateTo跳转到问诊详情页时，页面onLoad参数偶尔丢失（options为空对象）

原因：微信小程序基础库 2.25.0+ 对 URL 参数长度限制收紧至 2048 字符，而某医生端页面携带了完整的问诊记录 JSON（含病历文本），超长后被截断，options解析失败。
解决：参数传递改用全局状态 + 页面标识符

// 跳转前，将大数据存入 Pinia（或内存变量） const consultationDetail = { id: 'cons_123', patientName: '张三', vitalSigns: { /* 大量数据 */ } } consultationStore.setCurrentConsultation(consultationDetail) // 跳转时只传 ID uni.navigateTo({ url: `/pages/consultation/detail?id=${consultationDetail.id}` }) // 目标页面 onLoad 中通过 ID 查找 onLoad((options) => { const consultation = consultationStore.getConsultationById(options.id) if (!consultation) { // 若未找到，触发重新拉取（兜底） fetchConsultationDetail(options.id) } })

4.5 现象：所有平台中，uni.chooseImage选择多张图片后，tempFiles数组顺序在 iOS 和 Android 上不一致（iOS 按选择顺序，Android 按文件名排序）

原因：各端原生 SDK 对多文件选择的回调顺序未标准化，uni-app封装层无法统一排序逻辑。
解决：在chooseImage后立即记录选择时间戳，按时间戳重排序

const selectImages = async () => { try { const res = await uni.chooseImage({ count: 9, sizeType: ['compressed'], sourceType: ['album', 'camera'] }) // 为每张图片添加选择时间戳（毫秒级） const imagesWithTime = res.tempFiles.map(file => ({ ...file, selectTimestamp: Date.now() })) // 按时间戳升序排列（确保与用户选择顺序一致） imagesWithTime.sort((a, b) => a.selectTimestamp - b.selectTimestamp) // 存入 store 或传递给组件 imageStore.setImages(imagesWithTime.map(i => i.path)) } catch (e) { console.error('Image selection failed:', e) } }

提示：以上 5 条均非文档提及的“已知问题”，而是线上真实发生的故障。它们共同指向一个事实：医疗小程序的「跨平台」不是写一次代码就完事，而是需要为每个平台定制渲染、存储、路由、媒体处理策略。把uni-app当作“跨平台胶水”而非“万能翻译器”，才能守住医疗数据的确定性底线。

5. 医疗数据离线保障：用 Vue3 响应式 + IndexedDB 实现问诊草稿自动同步

医疗小程序最怕什么？用户填了半页问诊表单，突然切到微信收消息，再回来时页面刷新，所有输入灰飞烟灭。这不是体验问题，是合规风险——患者可能因此放弃就诊，或重复填写导致数据不一致。本节实现一个「无感草稿箱」：用户在VitalSignsForm.vue中输入任意字段，系统自动加密存入 IndexedDB；网络恢复后，自动同步至服务端；用户主动提交时，草稿自动清空。整个过程不打断操作流，且符合医疗数据本地存储的最小化原则。

5.1 设计离线草稿的 Schema 与生命周期

医疗草稿必须满足三个硬约束：

1. 字段级加密：血压、血糖等敏感值不得以明文形式存于 IndexedDB；
2. 时效性控制：草稿最长保留 7 天，超时自动清理；
3. 冲突解决：同一患者在多设备填写草稿时，以最后修改时间为准覆盖。

据此定义草稿 Schema：

// src/types/draft.ts export interface MedicalDraft { id: string // 格式：`patient_${patientId}_${timestamp}` patientId: string formType: 'vital_signs' | 'consultation' | 'prescription' formData: Record<string, any> // 加密后的 JSON 字符串 createdAt: number // Unix 时间戳（毫秒） updatedAt: number // Unix 时间戳（毫秒） synced: boolean // 是否已同步至服务端 } // 加密逻辑（复用 utils/crypto.ts） import { encrypt } from '@/utils/crypto' export const createDraft = ( patientId: string, formType: MedicalDraft['formType'], formData: Record<string, any> ): MedicalDraft => { const now = Date.now() return { id: `patient_${patientId}_${now}`, patientId, formType, formData: encrypt(JSON.stringify(formData)), // 关键：加密整个 formData createdAt: now, updatedAt: now, synced: false } }

5.2 封装 IndexedDB 操作（Vue3 响应式集成）

// src/composables/useDraftStore.ts import { ref, onUnmounted } from 'vue' import { openDB, deleteDB, wrap, unwrap } from 'idb' import { MedicalDraft, createDraft } from '@/types/draft' import { decrypt } from '@/utils/crypto' // 创建数据库实例（仅执行一次） let dbPromise: Promise<IDBDatabase> | null = null const getDB = async (): Promise<IDBDatabase> => { if (!dbPromise) { dbPromise = openDB('MedicalDraftDB', 1, { upgrade(db) { const store = db.createObjectStore('drafts', { keyPath: 'id' }) store.createIndex('patientId', 'patientId') store.createIndex('updatedAt', 'updatedAt') } }) } return dbPromise } // 响应式草稿列表（自动监听 IndexedDB 变更） const drafts = ref<MedicalDraft[]>([]) // 从 IndexedDB 加载草稿（带解密） export const loadDrafts = async (patientId: string): Promise<MedicalDraft[]> => { const db = await getDB() const tx = db.transaction('drafts', 'readonly') const store = tx.objectStore('drafts') const index = store.index('patientId') const draftRecords = await index.getAll(patientId) // 解密 formData 字段（仅在内存中解密，不存明文） return draftRecords.map(draft => ({ ...draft, formData: JSON.parse(decrypt(draft.formData)) // 解密后 parse 为对象 })) } // 保存草稿（自动加密） export const saveDraft = async (draft: MedicalDraft): Promise<void> => { const db = await getDB() const tx = db.transaction('drafts', 'readwrite') const store = tx.objectStore('drafts') await store.put(draft) await tx.done // 更新响应式列表（触发视图更新） drafts.value = await loadDrafts(draft.patientId) } // 删除草稿（提交成功后调用） export const deleteDraft = async (id: string): Promise<void> => { const db = await getDB() const tx = db.transaction('drafts', 'readwrite') const store = tx.objectStore('drafts') await store.delete(id) await tx.done // 更新响应式列表 const currentPatientId = id.split('_')[1] drafts.value = await loadDrafts(currentPatientId) } // 清理过期草稿（启动时执行） export const cleanupExpiredDrafts = async (maxAgeMs: number = 7 * 24 * 60 * 60 * 1000): Promise<void> => { const db = await getDB() const tx = db.transaction('drafts', 'readwrite') const store = tx.objectStore('drafts') const allDrafts = await store.getAll() const now = Date.now() const expiredIds = allDrafts .filter(draft => now - draft.updatedAt > maxAgeMs) .map(draft => draft.id) if (expiredIds.length > 0) { await Promise.all(expiredIds.map(id => store.delete(id))) } await tx.done } // 监听网络状态，自动同步（核心逻辑） <p> <a href="https://download.csdn.net/download/qq_44757034/87787707" style="color:#ec7500;font-size:14px;"> 本文还有配套的精品资源，点击获取 </a> <img alt="menu-r.4af5f7ec.gif" src="https://csdnimg.cn/release/wenkucmsfe/public/img/menu-r.4af5f7ec.gif" style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;"> </p>