{
  "subject": "小票模板选择增加所见即所得预览并标红二维码和字号差异",
  "description": "## 需求背景\n\n当前 PC 后台「编辑设备」弹窗中的「小票模板」字段提供 4 种打印模式：\n\n1. 带二维码-字体大号\n2. 带二维码-字体小号\n3. 不带二维码-字体大号\n4. 不带二维码-字体小号\n\n「带二维码 / 不带二维码」容易理解，但「字体大号 / 字体小号」用户不看实物很难判断实际打印效果。需要将小票模板选择升级为可视化预览：用户选择某个模板后，下方同步展示 4 种小票样式并高亮当前选择，做到保存前即可确认实际打印效果。\n\n## 需求内容\n\n### 1. 编辑设备弹窗字段保留\n\n保留现有「编辑设备」弹窗风格和主要字段：\n\n- 设备名称\n- 设备编号\n- 设备类型\n- 设备SN\n- 固定型号\n- 小票模板\n- 打印张数\n- 设备地址\n- 配对码\n- 关联档口\n- 取消按钮\n- 保存按钮\n\n### 2. 小票模板选项命名优化\n\n将「小票模板」下拉框中的 4 个选项调整为更容易理解的 A/B/C/D 命名：\n\n- A. 二维码小字版（带二维码·字体小号）\n- B. 二维码大字版（带二维码·字体大号）\n- C. 无二维码大字版（不带二维码·字体大号）\n- D. 无二维码小字版（不带二维码·字体小号）\n\n### 3. 增加小票预览区\n\n在弹窗下方增加预览区，标题为：\n\n```text\n小票预览（4 种打印模式对比）\n```\n\n预览区以 4 张小票横向并排卡片展示，每张小票上方展示 A/B/C/D 名称。\n\n### 4. 四种模板与小票样式映射\n\n必须严格按以下映射实现，不得互换：\n\n| 模板 | 显示名称 | 小票编号 | 样式特征 |\n| --- | --- | --- | --- |\n| A | 二维码小字版（带二维码·字体小号） | 002 | 带二维码，整体字体较小，信息更紧凑 |\n| B | 二维码大字版（带二维码·字体大号） | 004 | 带二维码，核心内容字体更大，菜品名、金额、取餐方式等更醒目 |\n| C | 无二维码大字版（不带二维码·字体大号） | 001 | 不带二维码，字体较大，整体票面更短 |\n| D | 无二维码小字版（不带二维码·字体小号） | 003 | 不带二维码，字体较小，内容更紧凑，票面更短 |\n\n重点约束：\n\n- A 必须对应编号 002。\n- B 必须对应编号 004。\n- C 必须对应编号 001。\n- D 必须对应编号 003。\n- 不要把 A 的小票样式复制成 B。\n- 不要把 B 的小票样式复制成 A。\n- 不带二维码的小票不得凭空展示二维码。\n\n### 5. 当前选择高亮\n\n场景 1：选择 A 时\n\n- 下拉框当前选中：A. 二维码小字版（带二维码·字体小号）\n- 预览区 A 小票使用蓝色边框高亮。\n- A 小票上方展示蓝色标签「当前选择」。\n- B、C、D 保持普通灰色边框。\n\n场景 2：选择 B 时\n\n- 下拉框当前选中：B. 二维码大字版（带二维码·字体大号）\n- 预览区 B 小票使用蓝色边框高亮。\n- B 小票上方展示蓝色标签「当前选择」。\n- A、C、D 保持普通灰色边框。\n\n通用交互：\n\n- 用户切换下拉选项后，预览区高亮必须同步切换到对应模板。\n- 蓝色仅表达当前选择、主操作和流程指引。\n- 灰色表达未选中状态。\n\n### 6. 差异标红说明\n\n预览图中用红色标注模板差异，帮助研发、测试、业务方理解差异来源。红色只用于模板差异，不用于当前选择。\n\n必须标红的差异：\n\n- 二维码差异：\n  - A、B：用红色框线圈出二维码区域，并标注「有二维码」。\n  - C、D：不画二维码；可在底部或原二维码对应位置画红色虚线框，并标注「无二维码，票面更短」。\n- 字号差异：\n  - 标注取餐号 / 序号区域，例如 001、002、003、004。\n  - 标注「取餐方式：堂食」这一行。\n  - 标注菜品名称区域。\n  - 标注「实付金额：1.00元」区域。\n  - B、C 标注「核心信息更大 / 大字号」。\n  - A、D 标注「信息更紧凑 / 小字号」。\n- 票面长度和内容疏密差异：\n  - A、B 因带二维码，底部二维码区域占空间，票面更长。\n  - C、D 因不带二维码，底部区域更短，票面更短。\n  - 可用红色括号、箭头或虚线框标注二维码占用底部空间。\n\n不要标红的样例数据差异：\n\n- 订单时间\n- 订单编号\n- 订单人\n- 支付时间\n- 流水号\n- 取餐号数字本身不同\n- 菜品名称具体文字差异\n\n### 7. 说明卡片\n\n页面右侧增加 3 到 4 个说明卡片，使用蓝色图标和中文说明：\n\n- 命名优化：用 A/B/C/D + 清晰描述，避免用户只看到「字体大/小」而难以判断。\n- 所见即所得：用户选择某个模板后，下方同步展示 4 种小票样式，并高亮当前选择。\n- 差异标红：把二维码、字号、票面长度等关键差异标红，帮助用户快速理解。\n- 交互目标：降低选择成本，让用户保存前就能确认实际打印效果。\n\n## 验收要点\n\n- 编辑设备弹窗仍保留设备名称、设备编号、设备类型、设备 SN、固定型号、小票模板、打印张数、设备地址、配对码、关联档口、取消、保存等字段。\n- 小票模板下拉框展示 A/B/C/D 四个新命名选项。\n- 选择 A 时，下拉框显示 A，预览区只有 A 样式蓝色边框高亮，并展示「当前选择」。\n- 选择 B 时，下拉框显示 B，预览区只有 B 样式蓝色边框高亮，并展示「当前选择」。\n- 切换到 C 或 D 时，也应按同样规则高亮对应小票。\n- 4 张小票必须并排展示，并且每张上方都有 A/B/C/D 名称。\n- A=002、B=004、C=001、D=003 的映射不可错。\n- A、B 展示二维码差异标红；C、D 不展示二维码，并用虚线或文字说明无二维码、票面更短。\n- 字号差异需在取餐号/序号、取餐方式、菜品名称、实付金额等关键区域体现。\n- 红色只用于模板差异说明，蓝色只用于当前选择和主流程提示，灰色用于普通未选中状态。\n- 红色标注不得遮挡小票核心内容。\n- 不因本次预览优化改变实际打印模板的业务数据、订单字段或打印张数保存逻辑。\n\n## 原型/参考素材\n- 需求示意图 01 选择 A：work_store/20260604-receipt-template-wysiwyg-preview/assets/receipt-template-wysiwyg-select-a-redline.png\n- 需求示意图 02 选择 B：work_store/20260604-receipt-template-wysiwyg-preview/assets/receipt-template-wysiwyg-select-b-redline.png\n- 合集图：work_store/20260604-receipt-template-wysiwyg-preview/assets/receipt-template-wysiwyg-combined-redline.png\n- 来源索引：work_store/20260604-receipt-template-wysiwyg-preview/source-index.csv\n\n## 关联需求\n- 关联已有基础功能需求：VWCG-999 芯烨 XP-C58H 小票打印机配置系统化。",
  "descriptionFormat": "MARKDOWN",
  "formatType": "MARKDOWN",
  "assignedTo": "201222766834729999",
  "participant": [
    "201222766834729999"
  ],
  "status": "100005",
  "space": "dd2f708d1702891ff45b6f5d99",
  "spaceIdentifier": "dd2f708d1702891ff45b6f5d99",
  "spaceType": "Project",
  "category": "Req",
  "workitemType": "9uy29901re573f561d69jn40"
}