xiaoshu-app/docs/qa/special-training-editor-2026-10-22.md

专项训练图文编辑验收（2026-10-22）

变更

• 正文由 HTML 文本框改为可视化编辑器：加粗、斜体、下划线、小标题、正文、两种列表、引用、清除格式、撤销和重做。
• 支持多选、粘贴、拖入图片；一批最多 20 张，单张最大 10 MiB，GIF 最大 2 MiB。
• 正文图片不裁切。小图保留原文件，大图等比例缩至最长边 2000 像素并压缩到现有 inline 上传接口的容量范围内；GIF 保留动画，不静态化压缩。
• 复用已存在的 inline 图片上传接口，不让正文上传依赖可选的 S3 配置。封面仍单独按 4:3 裁切。
• 上传期间锁定正文、保存、预览和关闭；按文件显示进度。单张失败不丢弃其他成功图片，展示文件名及错误并允许重新选择失败图片。
• 预览增加等待状态；修正动态 HTML 图片未受组件样式约束的问题，避免预览超宽。

验证结果

项目	结果与证据
自动化测试	ChromeHeadless 33 项通过，包含正文编辑、图片准备、页面保存及 OperationsService。
图片处理	比例保留、大图缩放、格式与大小校验、损坏文件拒绝通过。
编辑交互	光标处顺序插入多图、父组件回写不丢光标、加粗及原生撤销、HTML 安全渲染、纯文字粘贴、忙碌状态锁定通过。
失败分支	单张失败保留其他成功图片；保存失败保留草稿；标题和原因校验、超过 20 张拒绝通过。
实际浏览器上传	localhost:4300 前端连接 server.xiaoshu.pro 后端，以现有管理员登录，粘贴两张测试 PNG 并真实上传。两张图片均加载成功，分别为 32×48、64×32。
创建并回读	保存未发布草稿后重新打开，两张图片的 URL、标题排版和标签完整，首图自动作封面。
二次编辑	修改简介并再次保存、重新打开，更新内容完整；仍为草稿。
服务端预览	返回并显示标题、简介、小标题及两张图片；两张图片 naturalWidth 均大于 0。
窄屏与键盘	375×812 下工具栏换行；抽屉 clientWidth/scrollWidth 均为 375，正文均为 325；工具按钮可通过 Tab 聚焦，焦点框可见。
生产构建	npm run build:admin 成功；有既有样式预算及 CommonJS 警告。
差异检查	git diff --check 通过。

测试命令：

npm run test:admin:ci -- --include='**/training-*.spec.ts' --include='**/operations-special-training.component.spec.ts' --include='**/operations.service.spec.ts'
npm run build:admin
git diff --check

真实验收记录及边界

• 保留草稿：【验收草稿】专项多图编辑 20261022，展示 ID 839154386020572。仅含测试色块和验收说明，没有发布到学生端。
• 实际媒体地址：https://a018.2018.z01.com/UploadFiles/System/wxapp/images/20261022/165750953261.png、https://a018.2018.z01.com/UploadFiles/System/wxapp/images/20261022/165735933633.png。
• 过程中一次上传触发现有 20 秒请求超时，正文及成功图片保留。最终两张上传、保存、二次编辑、预览均成功。这不证明旧媒体服务的持续稳定性，未以延长所有接口超时掩盖该现象。
• 浏览器扩展未开启本地文件 URL 访问，自动化的原生文件选择器 setFiles 被阻止。已确认选择器允许多选，批量处理由 ChromeHeadless 测试覆盖；真实后端上传使用粘贴图片完成。用户手动多选仍需操作复核。
• 本次未执行正式发布/下架、学生端或微信 WebView 验收，也未进行视频文件上传实测。视频仍使用原有 S3 预签名流程，不能将本次图文验收外推为视频已通过。
• 本次修改管理端并同步 Git，没有部署公网管理站或替换云函数。

截图

17:10 工具图标与中文斜体修复

• 12 个工具按钮均增加与后台一致的 Lucide 小图标，同时保留中文名称与键盘操作；图标不重复朗读按钮名称。
• 根因已在实际页面确认：正文包含 i 标签且 font-style: italic，但继承全局 font-synthesis: none，没有原生斜体字形的中文无法显示倾斜。
• 在正文编辑区、后台预览及学生端文章正文局部设置 font-synthesis: style，允许模拟斜体，不修改整个应用的字体规则。
• 回归测试先复现失败（font-synthesis-style 为 none），修复后同一测试通过，覆盖中文斜体开启、真实计算样式及再次点击取消。相关测试合计 34 项通过。
• 浏览器读取已保存草稿与服务端预览，中文 张不、同比 的计算样式均为 italic，字体模拟为 style，截图中可见倾斜。
• 375 像素窄屏下，工具栏 clientWidth/scrollWidth 均为 325，12 个按钮均有 SVG 图标。恢复默认视口后保留编辑页面。
• npm run build（学生端、管理端）及 git diff --check 通过。本次没有公网部署；学生端文章样式已构建，未将测试草稿发布到学生端进行实机验收。