数据库读写分离这个坑，你应该踩过吧？
2026/6/10 8:47:51
项目实训（八）｜中医智能诊疗系统 中医知识百科 -知识卡片分享功能
功能模块：中医知识百科-知识卡片分享功能
开发周期：多阶段迭代开发
核心目标：实现知识卡片 / 详情页图片分享，结合 AI 生成分享文案，优化用户预览、编辑、风格选择等交互体验
一、整体规划与方案选型
1. 需求分析
支持用户将中医知识卡片（食材、穴位等内容）对外分享，提供链接分享、文本分享、图片分享三种主流形态，结合项目社交传播场景，优先选择图片化分享作为核心方案，适配微信等社交平台使用习惯。
2. 方案对比与选型
| 分享方式 | 实现难度 | 优缺点 | 最终选择 |
|---|---|---|---|
| 链接分享 | 中等 | 实现简单，需后端维护独立页面 / 快照 | 备选方案 |
| 纯文本分享 | 低 | 无需后端，丢失样式、视觉效果差 | 降级兜底方案 |
| 图片分享 | 中等 | 视觉还原度高，适配社交传播，需处理截图、跨域问题 | 主方案 |
3. 技术栈确定
前端采用html2canvas实现 DOM 转图片，基于 Vue3 +<script setup>开发；移动端尝试原生Web Share API调用系统分享，后端基于现有 LLM 接口拓展文案生成能力。
二、第一阶段：基础卡片图片分享功能开发
1. 功能目标
实现列表页知识卡片一键生成图片、保存下载，完成基础分享闭环。
2. 核心开发动作
- 安装依赖：引入
html2canvas截图库
npminstallhtml2canvas- 前端编写分享逻辑：绑定卡片分享按钮，通过
event.closest精准获取卡片 DOM，配置截图参数（高清缩放、跨域支持、白底背景）。 - 逻辑分支处理：移动端优先调用系统分享 API，桌面端直接触发图片下载；截图异常时降级为文本复制，保证功能可用。
- 页面样式：新增分享按钮样式，hover 交互优化视觉体验。
3. 问题与解决方案
- 预判风险：卡片若包含外部图片会出现跨域渲染失败，通过
useCORS: true提前配置，当前项目以纯文本为主，暂未触发该问题。
4. 阶段成果
列表页卡片点击分享，可正常生成高清 PNG 图片，桌面端自动下载，移动端唤起系统分享面板，基础分享功能落地。
三、第二阶段：详情弹窗分享功能开发
1. 功能目标
拓展分享范围，支持卡片点击展开后的详情弹窗内容分享，满足用户分享完整详情内容的需求。
2. 核心开发动作
- 在详情弹窗头部新增分享按钮，独立编写
shareDetail方法，定向截取弹窗 DOM。 - 复用
html2canvas截图逻辑，沿用加载提示、异常降级复制文本的兜底策略。
3. 核心问题与排查优化
问题描述
详情弹窗内容较长、自带滚动条，生成图片仅截取可视区域，完整内容丢失。
根因分析
html2canvas默认仅捕获元素视口内可见内容，无法自动识别滚动区域。
优化方案
- 临时修改 DOM 样式：截图前将弹窗
height: auto、overflow: visible、max-height: none，强制内容完整展开； - 强制浏览器重排：通过
offsetHeight让样式立即生效； - 指定截图尺寸：使用元素原生
scrollHeight/scrollWidth作为截图宽高，捕获全部内容； - 样式还原：通过
try...finally语法，截图完成后恢复弹窗原始样式与滚动能力，不影响原有交互。
4. 阶段成果
详情页可完整截取全部滚动内容，长文本、大篇幅详情均可正常生成完整分享图。
四、第三阶段：社交平台分享适配与方案调整
1. 功能目标
打通浏览器与第三方社交平台，实现图片直接分享至微信等 APP，替代单纯下载。
2. 技术尝试
基于Web Share API标准能力，将 Canvas 转为 Blob 文件，拼接文件参数后调用系统分享接口，实现图片直传社交平台。
3. 问题分析与方案变更
问题
移动端选择分享至微信后，频繁出现分享失败、无响应。
原因分析
Web Share API受微信生态限制，微信内无法直接接收浏览器传递的图片文件；- 若要适配微信专属分享，需后端配置安全域名、JS 签名等复杂配置，且仅支持链接分享，无法传递图片，改造成本高、体验提升有限。
最终决策
放弃跨平台直接分享能力，统一功能为生成图片并本地下载保存，由用户手动转发至社交平台；同时新增产品优化方向：基于 LLM 自动生成社交分享文案，提升图片传播价值。
五、第四阶段：AI 分享文案集成（图片合成优化）
1. 功能目标
对接项目现有 LLM 大模型，自动生成适配社交传播的简短文案，并将文案绘制在分享图片中。
2. 后端开发
- 新增接口
/generate_share_text，接收卡片标题、摘要参数； - 定制 Prompt：结合中医文化传播定位，要求文案简短、易懂、有吸引力，限制字数；
- 异常兜底：LLM 调用失败时，截取卡片原有内容作为默认文案，保证功能稳定。
3. 前端开发
- 新增接口请求方法，向后端获取 AI 文案；
- 拓展 Canvas 绘图逻辑：在原图基础上拼接文案区域，实现文字自动换行、背景配色；
- 统一改造
shareCard、shareDetail两大分享方法，截图→获取文案→图文合成→下载图片全链路打通。
4. 视觉优化迭代
问题
默认文案字体偏小、位于图片底部，视觉辨识度低。
优化思路
- 布局调整：将文案区域从图片底部迁移至顶部，强化展示优先级；
- 样式升级：调大字体、加宽行高与内边距，使用醒目浅黄背景 + 深橙色文字，区分内容区域；
- 结构重构：新建 Canvas 容器，先绘制顶部文案区，再绘制原卡片内容，保证图文层级。
5. 阶段成果
所有分享图片顶部自动附带 AI 生成的传播文案，图片视觉效果、传播属性大幅提升。
六、第五阶段：分享预览弹窗开发（交互体验升级）
1. 功能目标
解决现有痛点：用户点击分享后直接触发下载，无法提前预览图片与文案，体验不友好。新增预览弹窗，下载前可查看成品效果。
2. 核心开发动作
- 全局状态新增：弹窗显隐、预览图片地址、当前分享数据等响应式变量；
- 公共方法抽离：将「文案绘制到图片」逻辑封装为通用函数
addTextToImage，减少代码冗余，统一列表 / 详情页图文合成规则； - 逻辑改造：修改原有分享方法，先生成图片、再唤起预览弹窗，不再直接下载；弹窗内提供「下载」「取消」按钮，由用户自主操作；
- 页面搭建：编写预览弹窗 DOM 结构与样式，做居中、遮罩、滚动适配，兼容移动端与桌面端。
3. 阶段成果
分享流程优化为：点击分享→生成图片→弹窗预览→按需下载，用户可直观查看图片与文案，交互体验显著改善。
七、第六阶段：AI 文案高阶交互（风格切换 + 编辑 + 重生成）
1. 功能目标
深化 AI 文案能力，增加用户自主控制权，实现风格切换、手动编辑、重新生成文案三大交互，丰富个性化能力。
2. 后端迭代
改造/generate_share_text接口，新增style入参，划分三种文案风格：
专业版：严谨、正式，适配专业中医传播场景；
通俗版：口语化、接地气，面向普通用户；
幽默版：轻松有趣，增强社交趣味性。
根据不同风格动态拼接 Prompt，控制 LLM 输出方向。
3. 前端迭代
状态拓展：新增当前风格、可编辑文案、原始截图 Canvas 缓存等变量；
性能优化：缓存原始无文案的卡片 Canvas，切换 / 重绘文案时仅重新合成图文，无需重复 DOM 截图，提升响应速度；
交互功能实现：
- 风格切换：点击风格按钮，调用后端接口获取对应文案，实时更新预览图；
- 重新生成：同风格下再次请求 LLM，生成全新文案；
- 手动编辑：输入框支持自定义修改文案，添加防抖逻辑，修改后实时刷新预览；
界面优化：在预览弹窗内增加风格按钮组、文案编辑输入框，补充按钮选中态样式。
4. 阶段成果
分享功能完成全链路交互升级：预览、风格选择、文案编辑、一键重生成、下载一体化，满足不同用户的个性化分享需求。
八、整体功能总结与后续规划
1. 已完成能力清单
- 基础能力：列表卡片、详情弹窗完整图片截取与下载，异常场景降级为文本复制；
- AI 能力：对接 LLM 实现自动文案生成，支持专业 / 通俗 / 幽默三种风格切换、同风格重生成；
- 交互能力：下载前图片预览、文案手动编辑、防抖实时预览；
- 兼容能力：处理滚动 DOM 完整截图、图片跨域、多端样式适配等问题。
2. 现存待优化点
- 长文案多行排版可进一步优化行间距、对齐方式；
- 大尺寸卡片图片在移动端预览弹窗可增加缩放功能；
- 可补充分享记录、常用文案模板等拓展功能。
3. 技术复盘
html2canvas核心难点集中在滚动区域截取、样式临时变更与还原，通过 DOM 样式动态修改 + 浏览器重排机制完美解决；- 第三方平台分享受生态限制，技术选型需结合平台规则综合判断，避免无效开发；
- 前端结合 AI 场景时，合理缓存原始资源、抽离公共方法，可大幅提升交互流畅度与代码可维护性；
- 功能迭代遵循「基础可用→体验优化→个性化拓展」的思路，逐步落地需求，保障每一个版本功能稳定。