桌面提词器应用 v2.0

基于 Vue 3 + TypeScript + Electron 的桌面提词器应用，专为 macOS 录制视频时使用而设计。

功能特点

• 独立进程运行：作为单独的应用程序运行，不在浏览器中
• 顶部悬浮显示：固定在屏幕顶部，方便录制视频时参考
• 透明背景：与桌面融为一体，不影响录制效果
• 鼠标拖拽：支持鼠标拖拽左右移动提示词
• 窗口拖拽：顶部场景提示栏可拖拽移动整个窗口
• 实时控制：播放/暂停、速度调节、字体大小调整
• 空格键控制：按空格键快速暂停/恢复滚动
• 紧凑模式：可隐藏控制面板，仅显示提词区域
• 脚本管理：支持保存、加载、删除脚本
• 多格式输入：支持纯文本、简化格式、JSON 三种输入方式

v2.0 更新内容

• 重构为 Vue 3 + TypeScript + Vite 架构
• 新增空格键快捷暂停/恢复功能
• 新增控制面板显示/隐藏（紧凑模式）
• 优化场景信息与口播内容分离显示
• 顶部场景提示栏支持窗口拖拽
• 脚本数据持久化存储
• 界面全面优化，使用 Tailwind CSS

安装与运行

开发环境

1. 安装依赖：

cd teleprompter-app
npm install --registry=https://registry.npmmirror.com

2. 开发模式运行：

npm run dev

打包应用

1. 打包为 macOS 应用：

npm run build-mac

如遇网络问题，使用国内镜像：

ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ npm run build-mac

2. 生成的应用会在 dist 目录中：
   • Apple Silicon (M1/M2/M3)：桌面提词器-2.0.0-arm64.dmg
   • Intel 芯片：桌面提词器-2.0.0.dmg

使用说明

基本操作

1. 启动应用：双击安装的 .app 文件，应用会在屏幕顶部显示
2. 输入提示词：在底部输入框中粘贴你准备好的提示词
3. 开始使用：点击「开始提词」按钮加载提示词
4. 保存脚本：点击「保存」按钮将脚本保存到本地
5. 加载历史：点击「已保存」按钮查看和加载历史脚本

快捷操作

操作	说明
空格键	暂停/恢复滚动（焦点不在输入框时）
点击提词区域	暂停/恢复滚动
鼠标拖拽提词区域	左右移动提示词位置
拖拽顶部场景栏	移动整个窗口位置
点击展开/收起按钮	切换紧凑模式

控制面板

• 播放/暂停按钮：控制滚动状态
• 速度调节：0.1x - 20x（默认 3.0x）
• 字体调节：20px - 64px（默认 40px）
• 重置按钮：重置滚动位置到起点

提示词格式说明

应用支持三种提示词输入格式：

1. 纯文本格式（最简单）

每行一句话，直接输入台词内容：

30k Star！说实话，几年前的我绝对想不到自己能做出这样的开源项目
我是小明，MediaCrawler的作者
很多人问我，是怎么从一个游戏主播转变成程序员的？

2. 简化格式（推荐）

格式：镜头标题：画面提示 | 台词内容

镜头1：震撼开场：MediaCrawler项目页面 | 30k Star！说实话，几年前的我绝对想不到自己能做出这样的开源项目
镜头2：自我介绍：个人照片展示 | 我是小明，MediaCrawler的作者
镜头3：引出话题：分屏展示 | 很多人问我，是怎么从一个游戏主播转变成程序员的？

3. JSON 格式（AI 生成推荐）

[
  {
    "type": "scene",
    "title": "镜头1：震撼开场",
    "cue": "MediaCrawler项目页面，30k Star展示",
    "line": "30k Star！说实话，几年前的我绝对想不到自己能做出这样的开源项目"
  },
  {
    "type": "scene",
    "title": "镜头2：自我介绍",
    "cue": "个人照片时间轴展示",
    "line": "我是小明，MediaCrawler的作者"
  }
]

界面说明

提词器区域

• 顶部场景栏：显示当前场景序号、镜头标题、画面提示
• 中心红线：标记当前阅读位置
• 主内容区：大字体显示口播台词
• 展开/收起按钮：切换控制面板显示

控制面板

• 左侧：播放控制、速度/字体调节
• 右侧：脚本编辑器，支持输入、预览、保存、加载脚本

技术栈

• 前端框架：Vue 3 (Composition API)
• 开发语言：TypeScript
• 状态管理：Pinia
• 样式方案：Tailwind CSS
• 构建工具：Vite + vite-plugin-electron
• 桌面框架：Electron 33.x
• 数据存储：JSON 文件持久化

项目结构

teleprompter-app/
├── electron/
│   ├── main.ts           # Electron 主进程
│   ├── preload.ts        # 预加载脚本（IPC 通信）
│   └── database.ts       # 数据持久化
├── src/
│   ├── App.vue           # 根组件
│   ├── main.ts           # Vue 入口
│   ├── components/
│   │   ├── TeleprompterBar.vue   # 提词器滚动区域
│   │   ├── ControlPanel.vue      # 控制面板
│   │   └── ScriptEditor.vue      # 脚本编辑器
│   ├── stores/
│   │   └── teleprompter.ts       # Pinia 状态管理
│   ├── types/
│   │   └── index.ts              # TypeScript 类型定义
│   └── styles/
│       └── main.css              # 全局样式
├── package.json
├── vite.config.ts
├── tailwind.config.js
└── tsconfig.json

系统要求

• macOS 10.12 或更高版本
• Node.js 18 或更高版本（仅开发时需要）

故障排除

应用启动问题

1. 确保下载了正确的版本（M 系列用 arm64 版本）
2. 第一次启动可能需要在系统偏好设置中允许运行
3. 如果提示「已损坏」，在终端运行：

xattr -cr /Applications/桌面提词器.app

构建问题

如果遇到网络问题，使用国内镜像：

# 安装依赖
npm install --registry=https://registry.npmmirror.com

# 构建应用
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ npm run build-mac

数据存储位置

脚本数据保存在用户数据目录：

~/Library/Application Support/桌面提词器/teleprompter-data.json

开发命令

npm run dev          # 开发模式
npm run build        # 构建 Vue 应用
npm run build-mac    # 打包 macOS 应用
npm run pack         # 打包但不签名（测试用）

License

MIT