智能提词器——详尽需求文档与设计方案

文档说明

本文档整合前期所有讨论成果，形成一份完整、可落地的技术设计方案。涵盖产品定位、功能需求、技术架构、数据库设计、接口规范、客户端实现、部署方案及开发排期，作为团队开发的技术蓝本。

第一部分：产品概述

一、项目背景与目标

1.1 项目背景

短视频创作、直播带货、在线演讲等场景对提词器的需求日益增长。现有免费产品存在功能残缺、强制水印、无法多端联动等问题；付费产品价格偏高。本项目旨在打造一款 “免费功能强大、付费价格极低、多端无缝协同” 的智能提词器。

1.2 产品定位

  • 目标用户：短视频创作者、直播主播、演讲者、在线教育讲师
  • 核心价值：免费去水印 + 1080P录制 + 离线语音跟读 + 多端联动
  • 付费转化：5元/月解锁4K+高级美颜+无限云同步，99元终身买断

1.3 产品 slogan

“免费，但不止免费；专业，但不昂贵。”

二、核心功能总览

功能模块免费用户Pro（¥5/月）终身Pro（¥99）
核心提词（滚动/速度/字体/镜像）✅✅✅
离线语音跟读（本地模型）✅✅✅
本地草稿✅ 无限✅ 无限✅ 无限
视频录制水印✅ 彻底去除✅✅
录制清晰度✅ 1080P✅ 4K✅ 4K
基础美颜（磨皮/美白）录制✅✅✅
高级美颜（瘦脸/大眼/滤镜）录制❌ 仅预览✅✅
云端同步草稿✅ 10篇✅ 无限✅ 无限
字幕导出（SRT/TXT）❌✅✅
同时在线设备2台3台3台
客服支持标准工单优先响应VIP专属

第二部分：技术架构设计

三、总体架构

3.1 架构全景图

┌─────────────────────────────────────────────────────────────────────────────┐
│                            客户端层                                        │
├─────────────────┬─────────────────┬─────────────────┬─────────────────────┤
│ Flutter 移动端  │  Go PC客户端    │  Web管理后台    │  第三方H5支付页     │
│ (iOS/Android)   │  (Wails+Vue)   │  (Vue3+Element) │  (微信/支付宝)      │
│ 职责:提词/美颜  │  职责:大屏提词  │  职责:运营管理  │  职责:支付交易      │
└────────┬────────┴────────┬────────┴────────┬────────┴────────┬────────────┘
         │                 │                 │                  │
         └─────────────────┼─────────────────┼──────────────────┘
                           │ (HTTPS / WebSocket / WSS)
                  ┌────────▼─────────────────▼─────────┐
                  │        Nginx (反向代理/负载均衡)     │
                  │  静态资源服务 / SSL终止 / WebSocket代理│
                  └────────┬────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────────────────────┐
│                      Go 后端服务 (单体应用)                                 │
│  ┌──────────────┐ ┌──────────────┐ ┌─────────────┐ ┌──────────────────┐  │
│  │ 用户鉴权模块 │ │ 会员/订单模块│ │ 稿件同步模块│ │ WebSocket Hub    │  │
│  │(JWT/注册登录)│ │(支付回调/扣费)│ │(乐观锁合并) │ │(内存版/实时推送) │  │
│  └──────────────┘ └──────────────┘ └─────────────┘ └──────────────────┘  │
│  ┌──────────────┐ ┌──────────────┐ ┌─────────────┐ ┌──────────────────┐  │
│  │ 配额/限流    │ │ 管理后台API  │ │ 定时任务    │ │ 本地文件存储    │  │
│  │(10篇控制)   │ │(运营/审计)   │ │(凌晨降级)   │ │(头像/静态资源)  │  │
│  └──────────────┘ └──────────────┘ └─────────────┘ └──────────────────┘  │
└──────────────────────────────┬─────────────────────────────────────────────┘
                               │
┌──────────────────────────────▼─────────────────────────────────────────────┐
│                        MySQL 数据库 (单机)                                  │
│            users / cloud_scripts / orders / membership_logs                │
└─────────────────────────────────────────────────────────────────────────────┘

3.2 架构原则

  1. 极简优先：暂不使用Redis、OSS等中间件，以最低成本跑通全部功能
  2. 端侧优先：语音识别、美颜渲染均在客户端完成，云端仅处理文本数据
  3. 平滑演进：内存缓存设计预留Redis替换接口，未来可无缝升级
  4. 安全合规：遵守《个人信息保护法》，用户数据加密传输

四、技术选型

4.1 后端（Go）

组件选型说明
Web框架Gin轻量高性能，生态成熟
ORMGORM方便的数据库操作，支持迁移
鉴权JWT (dgrijalva/jwt-go)无状态认证，配合内存黑名单
WebSocketgorilla/websocket稳定成熟，API稳定
配置管理Viper支持YAML/ENV多种格式
定时任务robfig/cron凌晨执行会员降级
限流golang.org/x/time/rate内存令牌桶

4.2 数据库

组件选型说明
主数据库MySQL 8.0存储用户、稿件、订单等所有持久化数据
缓存Go内存 (sync.Map)替代Redis：Token黑名单、WebSocket Hub、限流器

4.3 客户端

平台技术栈说明
移动端Flutter跨平台iOS/Android，一套代码
语音识别sherpa-onnx (asr_lib)离线本地识别，零成本
美颜相机nosmai_camera_sdk开源MIT协议，磨皮/美白/瘦脸
悬浮窗CustomPictureInPicture全平台自定义画中画
PC端Wails + Vue3Go后端+Web前端，轻量原生
管理后台Vue3 + Element-Plus运营管理界面

4.4 部署环境

组件选型说明
服务器阿里云ECS 2核4G最低配即可运行
操作系统Ubuntu 22.04 LTS稳定长期支持
反向代理NginxSSL终止、静态资源、WebSocket代理
数据库MySQL 8.0 (自建)初期单机，后期可迁RDS

第三部分：详细功能设计

五、用户与会员体系

5.1 用户模型

字段类型说明
idCHAR(36)UUID，用户唯一标识
phoneVARCHAR(20)手机号（唯一，用于登录）
emailVARCHAR(100)邮箱（可选）
passwordVARCHAR(255)bcrypt加密存储
nicknameVARCHAR(50)昵称
avatarVARCHAR(255)头像URL（本地存储路径）
membership_typeTINYINT0=免费, 1=Pro, 2=终身Pro
membership_expireDATETIME会员到期时间（终身设为2099-12-31）
sync_quota_totalINT云同步总配额（免费10，Pro/终身9999）
sync_quota_usedINT已使用配额
device_bind_countTINYINT当前绑定设备数
last_unbind_dateDATE上次解绑日期（防频繁解绑）
created_atDATETIME注册时间
updated_atDATETIME更新时间

5.2 会员等级与权限

功能免费Pro（¥5/月）终身Pro（¥99）
核心提词✅✅✅
离线语音跟读✅✅✅
本地草稿✅ 无限✅ 无限✅ 无限
去除水印✅✅✅
录制清晰度1080P4K4K
基础美颜录制✅✅✅
高级美颜录制❌✅✅
云同步草稿10篇无限无限
字幕导出❌✅✅
同时在线设备2台3台3台
客服支持标准优先VIP

5.3 免登录模式（Guest Mode）

  • 首次启动自动生成匿名设备ID，存储在本地
  • 所有草稿、配置保存在本地SQLite数据库
  • 免登录用户可使用全部免费功能
  • 无法使用云同步、多端联动等需要账户的功能

5.4 登录与注册

  • 方式：手机号 + 验证码（主推）/ 邮箱 + 密码
  • JWT Token：有效期7天，存于本地SecureStorage
  • Refresh Token：有效期30天，用于无感续期

5.5 数据合并（免登录 → 注册用户）

登录成功后触发数据合并流程：

  1. 客户端将本地所有草稿、配置打包上传
  2. 服务端与云端数据比对，执行合并（保留较新版本）
  3. 服务端返回合并后的完整数据列表
  4. 客户端更新本地数据库，清除匿名设备绑定

六、提词器核心功能

6.1 稿件管理

  • 创建：新建空白稿件，支持标题和正文
  • 编辑：富文本编辑（字体、字号、颜色、加粗、斜体）
  • 导入：支持TXT、Markdown格式
  • 删除：软删除，可恢复
  • 排序：按创建时间/修改时间/标题排序
  • 搜索：按标题关键词搜索

6.2 滚动控制

  • 速度调节：0.5-5.0行/秒，步长0.1
  • 手动拖拽：手指/鼠标拖动滚动条
  • 暂停/继续：点击暂停/继续滚动
  • 重置：回到稿件开头
  • 跳转：输入行号快速跳转

6.3 显示设置

  • 字体：系统字体/自定义字体（思源黑体等）
  • 字号：12-72pt
  • 文字颜色：RGB十六进制选择器
  • 背景颜色：RGB十六进制 + 透明度
  • 行距：1.0-3.0倍
  • 边距：上下左右独立调节
  • 文字方向：LTR（默认）/ RTL / 水平镜像 / 垂直镜像
  • 显示模式：全屏 / 悬浮窗

6.4 横竖屏自适应

  • 自动检测屏幕方向，动态调整布局
  • 横屏模式：文字宽屏显示，适合提词器硬件
  • 竖屏模式：文字窄屏显示，适合手机手持
  • 用户可手动锁定横屏/竖屏

6.5 悬浮窗模式

基于 CustomPictureInPicture 实现：

  • 可拖动到屏幕任意位置
  • 可调节窗口大小（小/中/大）
  • 透明度可调（30%-100%）
  • 轻触悬浮窗显示/隐藏控制栏
  • 拍照/录屏时悬浮窗保持运行

七、语音跟读功能

7.1 技术方案

采用 sherpa-onnx 本地离线语音识别：

  • 模型大小：约70MB（Tiny模型）
  • 识别延迟：<200ms
  • 支持语言：中文、英文、中英混合
  • 运行环境：完全离线，无需网络

7.2 功能流程

用户点击"开始跟读"
    ↓
启动麦克风采集音频（16-bit PCM）
    ↓
音频流送入 sherpa-onnx 实时识别
    ↓
返回识别文本（逐词/逐句）
    ↓
与当前稿件内容进行模糊匹配（编辑距离）
    ↓
计算当前朗读位置（行号 + 字符偏移）
    ↓
自动滚动到对应位置 + 高亮当前文字
    ↓
循环直到稿件结束或用户停止

7.3 匹配算法

  • N-Gram模糊匹配：取识别文本的N-Gram与稿件文本滑动窗口比对
  • 编辑距离（Levenshtein） ：计算最小编辑距离，取最小位置
  • 置信度熔断：连续多帧置信度低于阈值时暂停滚动
  • VAD静音检测：检测到长时间静音时暂停滚动，等待用户继续

7.4 语速自适应

  • 每0.5秒更新一次语速数据
  • 根据语速动态调整滚动速度
  • 停顿时自动暂停滚动

八、相机与美颜功能

8.1 技术方案

采用 nosmai_camera_sdk 实现美颜相机：

  • 开源MIT协议，无商业授权费用
  • 支持iOS和Android双平台
  • 内置美颜滤镜：磨皮、美白、瘦脸
  • 实时视频流处理，GPU加速

8.2 功能清单

功能免费Pro
相机预览✅✅
磨皮（0-100）✅ 可预览+录制✅
美白（0-100）✅ 可预览+录制✅
瘦脸（0-100）❌ 仅预览不录制✅ 可录制
大眼（0-100）❌ 仅预览不录制✅ 可录制
滤镜（多款）❌ 仅预览不录制✅ 可录制
录制清晰度1080P4K
视频水印✅ 已去除✅ 已去除

8.3 录制功能

  • 开始/停止录制：一键控制
  • 录制指示：红点闪烁提示
  • 视频保存：保存至本地相册/文件系统
  • 视频回放：录制完成后可预览

九、云同步功能

9.1 同步内容

  • 稿件内容：标题、正文（含富文本格式）
  • 阅读进度：当前行号、字符偏移量、滚动百分比
  • 配置设置：字号、字体、颜色、速度等

9.2 同步机制

  • 触发方式：每次修改后延迟5秒（防抖）自动同步
  • 同步方向：双向（本地 ↔ 云端）
  • 增量同步：仅传输变更的数据
  • 冲突处理：乐观锁（基于version字段），冲突时提示用户

9.3 配额控制

  • 免费用户：最多云端存储10篇稿件
  • Pro用户：云端存储无限篇
  • 超配额处理：同步时返回403，客户端弹窗引导升级

9.4 多端实时联动

  • 基于WebSocket实现实时状态推送
  • 同一账号登录多设备时，进度实时同步
  • 支持手机↔电脑双向联动

十、支付与会员

10.1 定价方案

会员类型价格周期
Pro¥5月度订阅
终身Pro¥99一次性买断

10.2 支付流程（方案A：H5跳转）

为规避应用商店30%抽成，采用H5网页支付【方案A】：

用户点击"升级Pro"
    ↓
App打开WebView，加载自建H5支付页
    ↓
用户选择微信支付/支付宝
    ↓
完成支付（扫码或H5支付）
    ↓
支付平台异步回调后端 /api/order/callback
    ↓
后端更新用户会员状态
    ↓
后端通过WebSocket推送会员升级消息
    ↓
App收到推送，刷新UI
    ↓
兜底：App冷启动/从后台返回时主动拉取最新状态

10.3 支付回调幂等性

  • 使用 order_no 内存锁防止重复处理
  • 数据库订单状态 status 二次校验
  • 重复回调自动忽略

10.4 会员到期处理

  • 每日凌晨2点定时任务扫描过期会员
  • 自动降级为免费用户
  • 插入会员变更日志

十一、PC客户端

11.1 技术方案

采用 Wails 框架：

  • Go语言编写后端逻辑
  • Vue3 + TypeScript 编写前端界面
  • 打包为原生桌面应用（Windows/macOS/Linux）
  • 资源占用低，启动快

11.2 功能定位

  • 大屏提词：在电脑屏幕上清晰显示提词器内容
  • 多端联动：与手机端实时同步进度
  • 稿件管理：创建、编辑、导入稿件
  • 云同步：登录后自动同步云端稿件

11.3 UI设计原则

  • 极简沉浸式设计
  • 深色背景 + 高对比文字
  • 大尺寸控制按钮，方便远距离操作
  • 支持键盘快捷键（空格暂停/继续、上下键调速）

十二、Web管理后台

12.1 技术方案

  • 前端：Vue3 + Element-Plus
  • 后端：复用Go服务的Admin路由组
  • 鉴权：独立的Admin JWT

12.2 功能模块

模块功能
概览看板今日新增用户、付费转化率、月度收入
用户管理用户列表、详情查询、封禁/解封
订单管理订单列表、流水查询、退款操作
会员管理会员列表、手动调整会员等级
系统设置公告发布、配置参数调整

第四部分：数据库设计

十三、数据表结构

13.1 用户表（users）

CREATE TABLE users (
    id CHAR(36) PRIMARY KEY,
    phone VARCHAR(20) UNIQUE NOT NULL,
    email VARCHAR(100) UNIQUE,
    password VARCHAR(255) NOT NULL,
    nickname VARCHAR(50) DEFAULT '用户',
    avatar VARCHAR(255) DEFAULT '',
    membership_type TINYINT DEFAULT 0 COMMENT '0免费,1Pro,2终身Pro',
    membership_expire DATETIME DEFAULT '2099-12-31 23:59:59',
    sync_quota_total INT DEFAULT 10,
    sync_quota_used INT DEFAULT 0,
    device_bind_count TINYINT DEFAULT 0,
    last_unbind_date DATE,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    INDEX idx_phone (phone),
    INDEX idx_membership (membership_type, membership_expire)
);

13.2 云端稿件表（cloud_scripts）

CREATE TABLE cloud_scripts (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    user_id CHAR(36) NOT NULL,
    script_uuid CHAR(36) NOT NULL COMMENT '与本地UUID对应',
    title VARCHAR(200) DEFAULT '未命名稿件',
    content LONGTEXT NOT NULL COMMENT 'JSON格式: {text, font_size, color, ...}',
    version INT DEFAULT 1 COMMENT '乐观锁版本号',
    last_sync_at DATETIME(3) DEFAULT CURRENT_TIMESTAMP(3),
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    deleted_at DATETIME DEFAULT NULL COMMENT '软删除',
    INDEX idx_user_id (user_id),
    INDEX idx_user_uuid (user_id, script_uuid),
    UNIQUE KEY uk_user_uuid (user_id, script_uuid)
);

13.3 订单表（orders）

CREATE TABLE orders (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    order_no VARCHAR(32) UNIQUE NOT NULL,
    user_id CHAR(36) NOT NULL,
    plan_type TINYINT NOT NULL COMMENT '1:月度Pro, 2:终身Pro',
    amount DECIMAL(10,2) NOT NULL,
    pay_channel TINYINT COMMENT '1:微信, 2:支付宝',
    out_trade_no VARCHAR(64) COMMENT '第三方交易流水号',
    status TINYINT DEFAULT 0 COMMENT '0待支付,1成功,2失败,3退款',
    paid_at DATETIME,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    INDEX idx_user_id (user_id),
    INDEX idx_order_no (order_no),
    INDEX idx_status (status)
);

13.4 会员变更日志（membership_logs）

CREATE TABLE membership_logs (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    user_id CHAR(36) NOT NULL,
    old_type TINYINT,
    new_type TINYINT,
    expire_at DATETIME,
    source VARCHAR(20) COMMENT 'order_pay/admin_edit/expire',
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    INDEX idx_user_id (user_id)
);

13.5 管理用户表（admin_users）

CREATE TABLE admin_users (
    id BIGINT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) UNIQUE NOT NULL,
    password VARCHAR(255) NOT NULL,
    role TINYINT DEFAULT 0 COMMENT '0管理员,1超级管理员',
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

第五部分：接口设计

十四、API接口规范

14.1 通用规范

  • 基础路径：/api/v1
  • 鉴权方式：Header Authorization: Bearer {token}
  • 响应格式：
{
    "code": 0,
    "message": "success",
    "data": {}
}

14.2 用户模块

接口方法路径说明
发送验证码POST/auth/send-code手机号验证码
登录POST/auth/login手机号+验证码/密码
注册POST/auth/register手机号+验证码+密码
刷新TokenPOST/auth/refresh使用Refresh Token
获取用户信息GET/user/me含会员状态
更新用户信息PUT/user/me昵称/头像
注销登录POST/user/logoutToken加入黑名单

14.3 稿件模块

接口方法路径说明
获取稿件列表GET/scripts分页查询
获取单篇稿件GET/scripts/:uuid按UUID查询
创建稿件POST/scripts新建云端稿件
更新稿件PUT/scripts/:uuid更新内容
删除稿件DELETE/scripts/:uuid软删除
批量同步POST/scripts/sync增量同步（含乐观锁）
配额查询GET/scripts/quota查询剩余配额

14.4 订单与支付模块

接口方法路径说明
创建订单POST/order/create返回支付链接
订单详情GET/order/:order_no查询订单状态
支付回调POST/order/callback微信/支付宝回调
会员状态GET/membership/status获取最新会员状态

14.5 管理后台模块

接口方法路径说明
管理员登录POST/admin/login后台登录
用户列表GET/admin/users分页查询
用户封禁PUT/admin/users/:id/ban封禁用户
订单列表GET/admin/orders分页查询
统计数据GET/admin/stats看板数据

十五、WebSocket信令协议

15.1 连接建立

客户端 → 服务端: WebSocket连接 (携带token参数)
服务端 → 客户端: {"type":"connected","user_id":"xxx"}

15.2 消息格式

客户端 → 服务端（上行） ：

{
    "type": "join_room",
    "room_id": "script_uuid"
}
{
    "type": "progress_update",
    "line": 5,
    "char_offset": 120,
    "scroll_percent": 0.42
}

服务端 → 客户端（下行） ：

{
    "type": "progress_sync",
    "line": 5,
    "char_offset": 120,
    "scroll_percent": 0.42,
    "from_user": "xxx"
}
{
    "type": "membership_refresh",
    "level": "pro"
}
{
    "type": "state_sync",  // 新设备加入时全量同步
    "current_line": 5,
    "total_lines": 30,
    "script_content": "..."
}

第六部分：客户端实现

十六、Flutter移动端

16.1 项目结构

lib/
├── main.dart                    # 应用入口
├── app/
│   ├── routes.dart              # 路由配置
│   └── theme.dart               # 主题配置
├── core/
│   ├── network/                 # 网络请求（Dio + WebSocket）
│   ├── storage/                 # 本地存储（SQLite + SharedPreferences）
│   └── auth/                    # 鉴权管理（JWT存储/刷新）
├── modules/
│   ├── auth/                    # 登录/注册/个人中心
│   ├── script/                  # 稿件管理（列表/编辑/预览）
│   ├── teleprompter/            # 提词器核心（滚动/显示/语音跟读）
│   ├── camera/                  # 相机与美颜（nosmai_camera_sdk）
│   ├── sync/                    # 云同步（增量/冲突处理）
│   └── membership/              # 会员与支付（H5 WebView）
├── widgets/                     # 公共UI组件
└── utils/                       # 工具函数

16.2 关键依赖

dependencies:
  flutter:
    sdk: flutter
  # 网络
  dio: ^5.0.0
  web_socket_channel: ^2.4.0
  # 存储
  sqflite: ^2.3.0
  shared_preferences: ^2.2.0
  secure_storage: ^4.0.0
  # 语音识别
  asr_lib: ^0.4.0                    # sherpa-onnx封装
  # 相机与美颜
  nosmai_camera_sdk: ^3.0.2          # 开源美颜相机
  # 悬浮窗
  custom_picture_in_picture: ^1.0.0  # 画中画
  # UI
  provider: ^6.1.0                   # 状态管理
  flutter_screenutil: ^5.9.0         # 屏幕适配
  # WebView（H5支付）
  webview_flutter: ^4.5.0

16.3 离线语音跟读实现

import 'package:asr_lib/asr_lib.dart';

class VoiceFollowService {
  late AsrLib _asr;
  
  Future<void> init() async {
    _asr = AsrLib();
    await _asr.init(
      modelPath: 'assets/models/sherpa-onnx-tiny-zh',
    );
  }
  
  void startListening(Function(String text) onResult) {
    _asr.startRecording();
    _asr.onResult.listen((result) {
      // result.text: 识别文本
      // result.isFinal: 是否稳态结果
      onResult(result.text);
    });
  }
}

16.4 美颜相机实现

import 'package:nosmai_camera_sdk/nosmai_camera_sdk.dart';

class BeautyCameraService {
  late NosmaiCameraController _controller;
  
  void initCamera() {
    _controller = NosmaiCameraController(
      beautyLevel: 50,     // 磨皮
      whitenLevel: 30,     // 美白
      faceSlimLevel: 0,    // 瘦脸（Pro解锁）
      bigEyeLevel: 0,      // 大眼（Pro解锁）
    );
  }
  
  void enableAdvancedBeauty() {
    // Pro用户调用
    _controller.setFaceSlimLevel(40);
    _controller.setBigEyeLevel(30);
  }
}

十七、Go PC客户端（Wails）

17.1 项目结构

teleprompter-desktop/
├── backend/
│   ├── main.go                 # Wails入口
│   ├── app.go                  # 应用服务（Go方法暴露给前端）
│   ├── services/
│   │   ├── script.go           # 稿件管理（本地SQLite）
│   │   ├── sync.go             # 云同步客户端
│   │   └── websocket.go        # WebSocket连接管理
│   └── models/
│       └── script.go           # 数据模型
├── frontend/
│   ├── src/
│   │   ├── views/
│   │   │   ├── Teleprompter.vue  # 提词器主界面
│   │   │   ├── ScriptList.vue    # 稿件列表
│   │   │   └── Settings.vue      # 设置
│   │   ├── components/
│   │   └── stores/               # Pinia状态管理
│   └── package.json
└── wails.json                   # Wails配置

17.2 Go后端方法（暴露给前端）

// app.go
type App struct {
    ctx context.Context
}

// 登录
func (a *App) Login(phone, password string) (*User, error)

// 获取稿件列表
func (a *App) GetScripts() ([]Script, error)

// 同步稿件到云端
func (a *App) SyncScripts(scripts []Script) error

// 连接WebSocket（实时联动）
func (a *App) ConnectWebSocket(roomId string) error

// 更新滚动进度
func (a *App) UpdateProgress(line, offset int)

第七部分：部署与运维

十八、部署方案

18.1 服务器配置

配置项规格
CPU2核
内存4GB
硬盘40GB SSD
带宽5Mbps
操作系统Ubuntu 22.04 LTS

18.2 部署架构

┌─────────────────────────────────────────────┐
│             阿里云ECS (2核4G)                │
│  ┌─────────────────────────────────────┐    │
│  │           Nginx (80/443)            │    │
│  │   - SSL终止 (Let's Encrypt)         │    │
│  │   - 静态资源 (/uploads)             │    │
│  │   - WebSocket代理 (/ws)             │    │
│  └──────────────┬──────────────────────┘    │
│                 │                            │
│  ┌──────────────▼──────────────────────┐    │
│  │        Go 后端服务 (:8080)           │    │
│  │   - HTTP API                        │    │
│  │   - WebSocket Hub                   │    │
│  └──────────────┬──────────────────────┘    │
│                 │                            │
│  ┌──────────────▼──────────────────────┐    │
│  │        MySQL 8.0 (:3306)            │    │
│  └─────────────────────────────────────┘    │
│                                             │
│  ┌─────────────────────────────────────┐    │
│  │   本地文件存储 (./uploads/)          │    │
│  │   - 用户头像                        │    │
│  │   - 临时文件                        │    │
│  └─────────────────────────────────────┘    │
└─────────────────────────────────────────────┘

18.3 部署步骤

# 1. 安装依赖
apt update && apt install -y mysql-server nginx

# 2. 配置MySQL
mysql_secure_installation
CREATE DATABASE teleprompter CHARACTER SET utf8mb4;

# 3. 编译Go服务
cd teleprompter-server
go build -o server ./cmd/server

# 4. 配置systemd服务
cp teleprompter.service /etc/systemd/system/
systemctl enable teleprompter
systemctl start teleprompter

# 5. 配置Nginx
cp nginx.conf /etc/nginx/sites-available/teleprompter
ln -s /etc/nginx/sites-available/teleprompter /etc/nginx/sites-enabled/
nginx -t && systemctl reload nginx

# 6. 配置SSL (Let's Encrypt)
certbot --nginx -d yourdomain.com

18.4 数据备份

# 每日凌晨3点备份MySQL
0 3 * * * mysqldump -u root -p teleprompter | gzip > /backup/db_$(date +\%Y\%m\%d).sql.gz

# 保留最近7天备份
0 4 * * * find /backup -name "*.sql.gz" -mtime +7 -delete

十九、性能与安全

19.1 性能指标

指标目标值
API响应时间< 100ms (P95)
WebSocket消息延迟< 200ms
语音识别延迟< 300ms
并发用户支持1000+ (单机)

19.2 安全措施

  • HTTPS：全站启用TLS 1.3
  • 密码加密：bcrypt (cost=10)
  • JWT：RS256签名，有效期7天
  • SQL注入防护：GORM参数化查询
  • XSS防护：输入过滤 + CSP头
  • 限流：令牌桶算法，每用户每分钟30次
  • 防刷：支付回调幂等性 + 内存锁

第八部分：开发排期

二十、里程碑与排期

阶段内容工时产出
Phase 1Go后端基础框架 + 用户鉴权5天登录/注册/JWT
Phase 2稿件管理API + 云同步（含配额）5天稿件CRUD + 10篇限制
Phase 3WebSocket Hub + 多端实时联动3天进度同步
Phase 4支付模块 + H5支付页 + 回调5天订单/会员升级
Phase 5定时任务 + 管理后台API3天会员降级/运营接口
Phase 6Web管理后台（Vue3）5天用户/订单/看板
Phase 7Flutter移动端（核心提词器）7天稿件管理+滚动显示
Phase 8Flutter移动端（语音跟读）5天sherpa-onnx集成
Phase 9Flutter移动端（美颜相机）5天nosmai_camera_sdk集成
Phase 10Flutter移动端（悬浮窗+支付）3天PiP + H5 WebView
Phase 11Go PC客户端（Wails）7天大屏提词+联动
Phase 12联调测试 + 修复7天全流程验证
Phase 13部署上线 + 文档3天生产环境

总计：约 58个工作日（约3个月）

第九部分：附录

二十一、技术债务与未来演进

21.1 当前方案的限制

限制说明未来方案
内存缓存重启即丢Token黑名单/Hub存储在内存引入Redis持久化
WebSocket单机限制无法跨实例广播引入Redis Pub/Sub
本地文件存储无法水平扩展接入OSS对象存储
MySQL单机读压力大时性能下降主从读写分离

21.2 平滑升级路径

所有内存缓存组件均预留接口，未来替换为Redis时只需修改实现层，业务代码零侵入：

// 当前：内存实现
type Cache interface {
    Set(key, value string) error
    Get(key string) (string, error)
    Delete(key string) error
}
// 未来：Redis实现（实现同一接口）
type RedisCache struct { ... }

21.3 扩展功能（V2.0规划）

  • AI智能写稿（基于大模型生成提纲）
  • 多语言支持（英/日/韩）
  • 团队协作（多账号共享稿件）
  • 视频剪辑集成（一键导出到剪映等）

二十二、参考项目与资源

项目用途地址
Storm Teleprompter+提词器核心参考github.com/html5syt/Storm-Teleprompter-Plus
CustomPictureInPicture悬浮窗实现github.com/tenghuanjun/CustomPictureInPicture
sherpa-onnx离线语音识别github.com/k2-fsa/sherpa-onnx
nosmai_camera_sdk美颜相机pub.dev/packages/nosmai_camera_sdk
WailsGo桌面应用框架wails.io

二十三、总结

本方案以 “极简架构、端侧优先、免费强大、付费极低” 为核心指导思想，构建了一套完整的多端智能提词器系统：

  • 后端：Go + MySQL + 内存缓存，单机部署即可支撑千级并发
  • 移动端：Flutter跨平台，离线语音识别 + 美颜相机
  • PC端：Wails构建轻量原生桌面应用
  • 管理后台：Vue3 + Element-Plus运营管理
  • 商业模式：免费去水印/1080P引流，5元/月Pro + 99元终身锁客
# 目标跟踪 # 状态模式 # 扩展屏应用开发
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

cover

程序员学 AI（八）：AI Agent 到底是什么？从回答问题到完成任务

avatar AI Agent技术社区
cover

22道AI Agent 工程师必会的面试题，别啥都不会就出去找工作

avatar AI Agent技术社区

写给 TypeScript 工程师的 OpenClaw.NET 上手指南：用你熟悉的 TS 思维，跑起一个生产级 AI Agent

读代码层：TS 和 C# 本来就是「远房亲戚」——asyncawait??、接口、泛型、严格空检查，你的心智模型几乎无缝平移。真正要适应的只有两件事：类型是具名而非结构化的（多一句显式声明），以及 NativeAOT 下的「禁反射」约束。写扩展层：你甚至可以不怎么碰 C#——Node.js 插件桥意味着你的 TypeScript 插件就是一等公民，而且能在生产 aot 车道跑。内核给你 .NET

avatar AI Agent技术社区