Divan · 开放日
Divan 是为波斯学生会开放日展位构建的双语波斯诗歌体验。访客选择哈菲兹或鲁米，心怀一个愿望，获得经过审校的诗句、英文译文、来源及可选吟诵。它以离线和隐私为基础，不使用 cookie、追踪器、后端或访客输入，因此在活动场地不稳定的网络下仍可靠运行，且不收集使用者的数据。
01 / 概览
- 01Vite
- 02React 19
- 03严格 TypeScript
- 04手写服务工作线程
- 05Web Crypto（随机排序的候选池（shuffle bag））
- 06Vitest（单元／组件／无障碍／离线）
- 07Playwright（Chromium 端到端）
- 08pnpm 10.33 · Node 22.16
问题
公共开放日展位需要快速、愉快的文化体验，能在不稳定的 Wi-Fi 下运行，充分保护隐私，并以文化与学术诚信展示波斯诗歌；不编造诗句、不将书法栅格化，也不收集数据。
解决方案概述
- 精选 60 首哈菲兹诗句 + 60 首鲁米诗句，共 120 条，每条绑定不可变版本与可核验的出处。
- 通过手写服务工作线程让整套应用离线优先，无网络也能运行。
- Web Crypto 随机排序候选池（shuffle bag）在设备端选择诗句；没有服务器记录访客抽到的内容。
- 使用 Nastaliq 文本字体和诗人独立视觉设计，保留文化真实性而非扁平图像。
- 从开始纳入无障碍：双语／RTL 标记、双向隔离、实时区域、强制颜色及减少动态效果。
02 / 证据
证明与验证
- 零数据收集；无 cookie、追踪器或后端，仅在 sessionStorage 保存公开诗句 ID。
- 首次加载后，经完整性验证的服务工作线程支持完全离线运行。
- 生产编译器在部署前拒绝合成测试数据，只发布经过审校的语料。
- Vitest 覆盖单元、组件、无障碍、离线、分享、性能与安全测试，另有 Playwright Chromium 端到端测试。
03 / 方法
构建
技术栈
- Vite
- React 19
- 严格 TypeScript
- 手写服务工作线程
- Web Crypto（随机排序的候选池（shuffle bag））
- Vitest（单元／组件／无障碍／离线）
- Playwright（Chromium 端到端）
- pnpm 10.33 · Node 22.16
- 审校双语语料：60 哈菲兹 + 60 鲁米 = 120 条诗句，各自绑定不可变版本及可追溯出处。
- 诗句选择使用在设备端计算的 Web Crypto 随机排序候选池（shuffle bag），无服务器参与。
- 手写服务工作线程检查完整性，在场地不稳定网络中保持离线运行。
- 每位诗人独立文化视觉与 Nastaliq 文本字体，使用真实波斯文字而非栅格图像。
- 双语标记支持方向处理、双向隔离、实时区域、强制颜色和减少动态效果。
安全
- 隐私源于设计：无 cookie、标识符、追踪器或访客输入，不传输任何数据。
- 纯静态客户端，无后端、数据库或分析基础设施。
- sessionStorage 仅保存公开版本／诗句 ID，动态效果偏好仅存本地。
- 生产编译器在部署前拒绝合成及测试数据。
- 绑定来源并核验权利：代码为 MIT；诗歌和译文保留各自许可，如 CC BY-SA。
- 以静态容器通过出站隧道提供服务，无入站攻击面。