Zone 热敏打印台

概述

Zone 是 Ech0 独有的创意交互界面——一个模拟热敏打印机的可视化控制台，将 Echo 内容"打印"为可拖拽的纸质卡片。

访问路径：/zone 或 /zone/:echoId，无需登录。

---

打字机控制台

Zone 页面的核心是一个模拟复古热敏打印机的控制台：

• LCD 显示屏：带扫描线和 CRT 颗粒叠加效果的深色屏幕
• 文本输入区：20 行输入区域，带字符计数器（最多 2000 字符）
• 控制按钮：
  • 印章开关（"印"）— 黄色发光表示已启用
  • 全部删除（"删"）— 红色警告发光
  • 打印按钮（PRINT）— 将输入内容打印为纸质卡片

---

纸质卡片

打印后的内容呈现为热敏小票样式的卡片：

• 顶部和底部带锯齿边缘（模拟撕纸效果）
• 包含 Echo Print 标题、卡片 ID、时间戳
• 正文内容以逐字打字动画展示
• 元数据区（EchoID、标签、图片数量、扩展类型）
• 底部条形码图案和 END OF TRANSMISSION 结尾
• 可选随机印章（80×80px，60% 透明度）

拖拽交互

• 鼠标/触控拖拽卡片到任意位置
• 拖拽时卡片放大 1.05 倍并显示阴影
• 点击卡片将其置顶（z-index 动态管理）
• 针对 iOS 设备优化了合成性能

---

随机印章

开启印章功能后，每张打印的卡片会随机附带一枚印章：

• 从 assets/stamp/ 目录加载印章图片（支持 PNG/JPG/SVG/WebP）
• 随机旋转角度（0-18°）和位置偏移
• 60% 透明度，不影响内容阅读

---

本地持久化

所有卡片（位置、内容、印章、层叠顺序）自动保存到浏览器 localStorage。

• 页面刷新后自动恢复所有卡片
• 支持一键清除所有卡片

---

与 Echo 联动

在 Echo 详情页或 Hub 中点击"打印"按钮：

1. Echo 内容通过 Pinia Store 传递到 Zone
2. 自动导航到 /zone/:echoId
3. Zone 页面接收并打印该 Echo 的内容