辩论赛计时器（DebateTimer）

版本：2.10.1 | 作者：Chen Yu | 许可证：GPL-3.0

一款基于 Electron 的桌面辩论赛计时器，专为华语辩论赛场景设计。支持完整的赛事配置、环节管理、倒计时展示、提示音提醒、主题样式自定义，以及将当前配置导出为独立可执行文件（EXE）等功能。

功能特性

• 赛事配置：编辑赛事名称、正反方队伍与辩题。
• 环节管理：支持无计时、单边计时、单边发问、中立计时、双边对辩等多种环节类型；可自由增删改环节、调整顺序。
• 名称模板：通过"持方 + 辩位 + 模板名称 + 附加项"快速生成规范环节名。
• 主题样式：
  • 自定义单个颜色（正反方色、中立色、标题色、背景色）。中立色用于中场暂停、评委述票等中立计时环节，默认为白色。
  • 调整背景（纯色/图片）、字体（系统字体）与字号缩放。
  • 支持上传自定义 TTF/OTF 字体文件（仅用于文本显示）。
  • 实时预览面板：编辑主题时即时预览计时效果。
• 导入/导出配置：将当前比赛配置保存为 JSON 文件，或从外部 JSON 文件导入配置。
• 导出独立计时器：将当前配置与 Electron 运行时打包为单个 EXE 可执行文件（WinRAR 自解压），双击即可启动；赛前可修改队伍名称与辩题，不可修改其他配置。无需目标电脑安装 Node.js 或 WinRAR。
• 计时控制：启动/暂停、停止、重置、切换环节、环节跳转、设置时间、切换持方、全屏、音效试播等。
• 现代化界面：玻璃拟态卡片、底部悬浮胶囊控制面板、数字倒计时进度条、Toast 通知系统。
• 完全离线：不依赖任何外部 CDN 或网络资源，所有字体使用系统字体。

技术栈

• Electron 42.x
• 原生 HTML / CSS / JavaScript（无框架、无构建工具）
• Web Audio API 提示音（零外部音频文件）
• CommonJS（主进程）+ 全局脚本（渲染进程）
• preload.js 安全 IPC 桥接（遵循 Electron 安全最佳实践）

安装与运行

npm install
npm start

首次启动会打开编辑页。修改配置后点击"保存配置"即可进入计时页；点击计时页控制面板的"返回(B)"可回到编辑页。也可直接点击"进入计时页"在不保存的情况下预览计时效果。

编辑页说明

编辑页采用左侧导航栏 + 右侧内容面板布局，内容面板默认最大宽度 720px 居中（环节管理面板为 900px），窄窗口自动切换为顶部标签页。

• 赛事信息：填写赛事名称、正反方队伍与辩题。
• 主题与样式：
  • 自定义单个颜色（正方色、反方色、中立色、标题色、背景色）。中立色用于中立计时环节（如中场暂停、评委限时述票），默认为白色。
  • 调整背景类型（纯色/图片）、字体（系统字体）与字号缩放。
  • 上传自定义字体文件。
  • 右侧实时预览窗即时展示当前主题下的计时效果。
• 环节管理：
  • 环节管理面板采用左侧固定边栏 + 右侧可滚动列表布局。
  • 左侧边栏包含：
    • 导航栏：纵向列出所有环节，支持鼠标拖拽排序，左键拖拽时选中项虚化，跟随鼠标显示放大倾斜预览，其他项自动滑动让位，并显示蓝色发光占位条。
    • 快捷操作：+ 无计时 / + 陈词 / + 质询 / + 中立计时 / + 对辩 / + 自由辩论 按钮始终可见，不受列表滚动影响。
    • 右键菜单：在导航栏任意环节上右键可执行：定位到该环节 / 上移 / 下移 / 删除。
  • 在环节卡片中修改名称、类型、时长与持方。
  • 使用名称模板下拉框快速生成规范名称，点击"确认名称"应用。
  • 通过"上移/下移/删除"调整环节顺序或移除环节。
• 导入/导出：
  • 导入配置：从 JSON 文件加载比赛配置，自动校验字段。
  • 导出配置：将当前完整配置保存为 JSON，便于备份或分享。
  • 导出独立计时器：生成一个单独的 EXE 文件，双击即可启动；打开后仅允许修改队伍名称与辩题。
• 顶部操作栏：包含保存配置、重置默认、导入配置、导出配置、导出独立计时器、进入计时页等按钮。

计时页说明

• 顶部全宽状态栏：左侧显示正方队伍（红色背景）+ 辩题，右侧显示反方队伍（蓝色背景）+ 辩题，中间显示赛事名称。
• 中央显示赛事名称、当前环节名称。
• 单边计时显示单个大型倒计时器，颜色随持方变化（正方红 / 反方蓝 / 中立白）。
• 双边对辩显示正反方两个独立倒计时器，颜色区分。
• 中立计时显示单个大型白色倒计时器，用于中场暂停或评委限时述票，不区分正方反方。
• 无计时环节以超大字号展示环节名称，不显示计时器。
• 进度条：单边计时和中立计时模式下数字下方显示进度条，最后 30 秒变黄，最后 5 秒变红并脉冲闪烁。
• 控制面板：底部居中悬浮胶囊，半透明 + 毛玻璃背景，分组按钮（主控/导航/操作/音效/系统），hover 显示快捷键提示。
• 快捷键：
  • Space 启动/暂停（双边计时为切换发言方）
  • P 暂停
  • Q/W/E 试播 30 秒/5 秒/结束提示音
  • F 全屏
  • B 返回编辑页（独立运行时为"队伍设置"）
  • ←/→ 切换环节
  • C 切换持方（仅对单边计时有效）

打包发布

已配置 electron-builder，支持生成 Windows 安装包（NSIS）与便携版（Portable）。

npm run dist
# 输出目录：dist/
# DebateTimer Setup 2.10.1.exe —— 安装包
# DebateTimer 2.10.1.exe —— 便携版

独立 EXE 导出（应用内）

在编辑页点击"导出独立计时器"，应用会将当前配置和 Electron 运行时打包为一个自解压 EXE，无需目标电脑安装任何运行环境。

目录结构

.
├── main.js                    # Electron 主进程（窗口管理、IPC、配置持久化、日志、EXE 导出）
├── preload.js                 # 渲染进程 IPC 安全桥接
├── editor.html                # 编辑页
├── timer.html                 # 计时页
├── js/
│   ├── audio.js               # Web Audio API 提示音生成（零外部音频文件）
│   ├── timer-core.js            # 计时引擎核心（计时逻辑、状态管理）
│   ├── timer-app.js            # 计时页 UI 控制（渲染、快捷键、主题应用）
│   ├── editor-app.js           # 编辑页逻辑（主题配置、环节管理、拖拽排序、名称模板）
│   └── toast.js                # Toast 通知系统 + 自定义确认对话框
├── styles/
│   ├── variables.css           # CSS 变量系统 + 通用组件（Toast、模态框、按钮、卡片）
│   ├── editor.css              # 编辑页样式（侧边栏、环节卡片、拖拽排序、响应式）
│   └── timer.css               # 计时页样式（顶栏、计时器、进度条、控制面板、模态框）
├── scripts/
│   ├── build-release.js        # 发布构建脚本
│   ├── encode-vendor.js        # 编码 WinRAR 二进制到 vendor
│   └── test-sfx.js            # 自解压测试
├── vendor/
│   └── embedded-binaries.js   # 嵌入的 WinRAR 组件与图标（rar.exe、SFX 模块、图标）
├── package.json
├── README.md
└── LICENSE                    # GPL-3.0

许可

GPL-3.0

© Chen Yu 2026 All rights reserved.