Vote Counter / 现场计票系统

一个可容纳 40+ 候选者的实时投票计票系统，适合班级选举、现场活动等场景。

功能特性

• 🗳️ 实时计票：票数即时更新
• 📊 热力图可视化：背景色随票数渐变
• ✏️ 安全编辑模式：删除候选人、显示减票按钮需主动开启编辑模式
• ↩️ 快捷撤销：支持最近 5 次操作一键回退
• ⏸️ 暂停锁定：暂停投票并生成状态 Hash，便于现场状态记录与核对
• 🔄 灵活排序：支持导入顺序、票数排名、姓名首字母三种排序，三段按钮直接切换
• 🔆 全屏展示：适合大屏投影演示
• 💾 本地持久化：自动保存至浏览器 localStorage，刷新不丢失数据

技术栈

• 前端框架：Svelte 5 + TypeScript
• 样式：Tailwind CSS（设计令牌集中在 src/routes/layout.css 的 @theme）
• 图标：Lucide（@lucide/svelte，统一经 src/lib/icons.ts 重导出）
• 动画：Svelte 内置 transition

使用指南

基础操作

1. 设置候选人：点击右上角设置按钮，批量导入名单（支持逗号或换行分隔）
2. 投票：
   • 左键点击候选人卡片上的票数 → 加票（步长可调）
   • 右键点击票数（仅 PC）→ 减票
3. 步长调整：顶部控制栏「步长」单元可输入或点按 − / + 调整（1–999 的整数）

数据安全

• 所有数据存储在浏览器本地，清除浏览器数据会丢失记录
• 暂停时显示的 Hash 可用于校验当前投票状态是否被意外修改

项目结构

src/
  ├── app.html              # HTML 模板
  ├── lib/
  │   ├── icons.ts          # 界面图标统一入口（Lucide 重导出）
  │   └── assets/favicon.ico
  └── routes/
      ├── +layout.svelte    # 全局 head（标题、theme-color、统计脚本）
      ├── layout.css        # Tailwind 入口 + @theme 设计令牌
      └── +page.svelte      # 计票主界面
static/
  └── robots.txt

自定义与扩展

• 修改样式：Tailwind 类名已直接写在组件中；颜色、字体、圆角等设计令牌集中在 src/routes/layout.css 的 @theme 里，改令牌即可整体换肤
• 修改界面图标：图标统一从 src/lib/icons.ts 取，换图标库或换单个图标只改这一个文件
• 修改站点图标：替换 src/lib/assets/favicon.ico 或修改 favicon 变量为 base64 字符串
• 增加功能：可扩展日志导出、多语言、票数阈值提醒等

注意事项

• 暂不支持多设备同步（仅本地存储）
• 废票计数独立，撤销时单独处理
• 编辑模式下添加的候选人 ID 自动递增，删除后 ID 不回收
• 暂停状态下所有投票操作被禁用