基于 Electron + React + TypeScript 的专业视频生成工具
- 🖥️ Electron 桌面应用 - Windows 原生应用，性能卓越
- 💾 Token 架构 - 94% 内存节省，快速加载 (2.9ms)
- ⚡ Tabby 风格自动保存 - 30秒定时备份 + 1秒防抖 + Ctrl+S
- 📊 ConfigService - 统一配置管理，响应式更新
- 🧹 智能清理 - 自动清理过期任务，保持性能
- 📚 强大的历史管理 - 虚拟滚动支持500+条记录
- 🎨 现代化UI - 基于 Ant Design 5.12
- 🔄 后端同步 - 多设备同步，数据永久保存
# 克隆仓库
git clone https://github.com/2799662352/sora-ui.git
cd sora-ui
# 安装依赖
npm install
# 运行开发版
npm run electron:dev
# 构建安装包
npm run electron:build- ✅ 原子组件库 (
components/ui/)- Button, Card, SelectableList
- useMultiSelect Hook (Shift/Ctrl 多选)
- ✅ 业务服务层 (
services/business/)- generation.service.ts - 生成任务管理
- history.service.ts - 历史记录 CRUD
- download.service.ts - 下载队列管理
- ✅ 业务 Hooks
- useGeneration, useHistoryService, useDownload
- ✅ 组件模块化
- VideoHistory 拆分为 TaskItem + useVideoHistory
- ErrorBoundary 错误边界
- HistorySkeleton 骨架屏
- ✅ E2E 测试 (Playwright)
- ✅ 深度学习 Tabby Terminal 源码 (1300+ 行)
- TabRecoveryService (自动保存机制)
- ConfigService (配置管理系统)
- Observable 响应式架构
- RecoveryToken Provider 模式
- ✅ Token 架构: 94% 内存节省 (775KB → 47KB)
- ✅ 后端同步防抖: 66% I/O 减少 (3次 → 1次)
- ✅ Performance Marks: Token 加载性能监控
- ✅ 智能清理: 自动清理过期任务
-
✅ autoSave.service: Tabby 风格自动保存
- 30秒定时备份
- 1秒防抖优化
- Auto/Manual/Hybrid 三种模式
- Ctrl+S 快捷键
-
✅ ConfigService: 统一配置管理
- 响应式配置更新 (Observable)
- 智能默认值管理
- 只保存非默认值
- 版本迁移支持
-
✅ ConfigPanel: 可视化配置界面
- 保存设置 (模式切换)
- 清理设置 (保留天数)
- 性能设置 (虚拟滚动)
- 同步设置 (增量/全量)
- Token 设置 (存储方式)
- React 18.2 - UI 框架
- TypeScript 5.3 - 类型安全
- Ant Design 5.12 - UI 组件库
- Vite 5.0 - 构建工具
- RxJS 7.8 - 响应式编程 (新增)
- Zustand - 状态管理
- Electron 38.4 - 桌面应用框架
- IPC 通信 - 安全的主进程和渲染进程通信
- Electron Store - 配置持久化
- Token 模式 - 轻量级索引 + 按需加载
- Observable - 响应式配置/保存
- Provider - 策略模式 + 开闭原则
- Debounce - 防抖优化
sora-ui/
├── electron/ # Electron 主进程
│ ├── main.ts # 主进程入口
│ ├── preload.ts # 预加载脚本
│ ├── ipc/ # IPC 处理器
│ └── services/ # Electron 服务
│
├── src/ # React 应用
│ ├── api/ # API 层
│ ├── components/ # UI 组件
│ │ └── ConfigPanel.tsx # 配置面板 (新增)
│ ├── services/ # 业务服务
│ │ ├── autoSave.service.ts # 自动保存 (新增)
│ │ └── config/ # 配置服务 (新增)
│ ├── hooks/ # React Hooks
│ │ └── useConfig.ts # 配置 Hook (新增)
│ ├── utils/ # 工具函数
│ │ ├── taskTokenManager.ts # Token 管理 (新增)
│ │ └── storageCleanup.ts # 清理服务 (新增)
│ └── types/ # TypeScript 类型
│ └── taskToken.ts # Token 类型 (新增)
│
├── docs/ # 详细文档 (25+ 份)
│ ├── tabby-*.md # Tabby 学习笔记
│ ├── optimization-*.md # 优化计划
│ └── implementation-*.md # 实施路线图
│
├── reference-projects/ # 参考项目
│ └── tabby-full/ # Tabby Terminal 源码
│
└── PROGRESS_REPORT.md # 开发进度报告
轻量级加载:
155 tokens × 300 bytes ≈ 47 KB
VS
全量加载:
155 tasks × 5 KB ≈ 775 KB
节省: 94% 内存 ✅三要素:
├── 任何变化触发: markDirty()
├── 30秒定时备份: setInterval(30000)
└── 1秒防抖执行: debounceTime(1000)
快捷键:
└── Ctrl+S: 手动保存ConfigService (参考 Tabby):
├── 响应式更新: ready$ / changed$
├── 智能默认值: 只保存非默认值
├── 版本迁移: 平滑升级
└── React Hook: useConfig()✅ Token加载: 2.9ms
✅ 内存节省: 94% (775KB → 47KB)
✅ I/O减少: 66% (3次 → 1次)
✅ localStorage: 231KB (自动清理中)
- 性能优化: 9/10
- 代码质量: 9.5/10
- 架构设计: 9/10
- 可维护性: 8.5/10
- PROGRESS_REPORT.md - 开发进度 (TODO: 10/17)
- NEXT_ACTIONS.md - 下一步行动
- OPTIMIZATION_SUMMARY.md - 优化总结
- Tabby Terminal: https://github.com/Eugeny/tabby
- 架构参考: TabRecoveryService, ConfigService
- 本地源码:
reference-projects/tabby-full/
Proprietary License - All Rights Reserved
本软件及其源代码为专有资产，受版权法保护。
- GitHub: @2799662352
- 项目地址: sora-ui
⭐ Sora UI - 让AI视频创作更简单！
🎉 v1.1.3 更新:
- Tabby 风格自动保存
- ConfigService 配置管理
- Performance 性能监控
- 94% 内存优化