项目实训（八）｜中医智能诊疗系统 中医知识百科 -知识卡片分享功能

项目实训八中医智能诊疗系统 中医知识百科 -知识卡片分享功能功能模块中医知识百科-知识卡片分享功能开发周期多阶段迭代开发核心目标实现知识卡片 / 详情页图片分享结合 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 场景时合理缓存原始资源、抽离公共方法可大幅提升交互流畅度与代码可维护性功能迭代遵循「基础可用→体验优化→个性化拓展」的思路逐步落地需求保障每一个版本功能稳定。