0898b4b9e2
缩略图显示功能: - 使用视频首帧生成缩略图：取片段开始时间作为缩略图时间戳 - 智能缓存机制：避免重复生成相同片段的缩略图 - 异步加载：缩略图生成不阻塞界面渲染 - 优雅降级：生成失败时显示默认视频图标 ThumbnailDisplay组件: - 独立的缩略图显示组件，职责单一 - 加载状态指示：显示旋转动画表示正在生成缩略图 - 错误处理：图片加载失败时自动回退到默认图标 - 响应式设计：160x120像素缩略图，适配卡片布局 技术实现: - 利用现有generate_video_thumbnail命令生成缩略图 - Map缓存机制：segmentId -> thumbnailUrl映射 - file://协议：本地文件访问支持 - useEffect钩子：组件挂载时自动加载缩略图 用户体验优化: - 视觉丰富：片段卡片显示实际视频内容预览 - 快速识别：用户可以通过缩略图快速识别视频内容 - 性能优化：缓存机制避免重复生成 - 加载反馈：清楚的加载状态提示 功能特点: - 首帧缩略图：使用片段开始时间的首帧作为预览 - 自动生成：无需手动操作，自动为每个片段生成缩略图 - 内存缓存：同一会话中避免重复生成 - 错误恢复：生成失败时显示默认图标，不影响其他功能 现在MaterialSegmentView提供了更加直观的视觉体验： 1. 每个片段卡片显示实际的视频首帧缩略图 2. 用户可以快速预览视频内容 3. 加载过程有清楚的视觉反馈 4. 生成失败时有优雅的降级处理 |
||
|---|---|---|
| .. | ||
| public | ||
| scripts | ||
| src | ||
| src-tauri | ||
| .gitignore | ||
| CHANGELOG.md | ||
| DATABASE_OPTIMIZATION_GUIDE.md | ||
| README.md | ||
| index.html | ||
| package.json | ||
| postcss.config.js | ||
| tailwind.config.js | ||
| tsconfig.json | ||
| tsconfig.node.json | ||
| vite.config.ts | ||
| vitest.config.ts | ||
README.md
@mixvideo/desktop
MixVideo 桌面应用 - 基于 Tauri + React + TypeScript 构建的跨平台桌面应用。
🚀 快速开始
开发环境要求
- Node.js 18+
- Rust 1.70+
- PNPM 8+
安装依赖
pnpm install
开发模式
pnpm dev
# 或
pnpm tauri:dev
构建应用
pnpm tauri:build
📁 项目结构
apps/desktop/
├── src/ # React 前端源码
│ ├── components/ # React 组件
│ ├── pages/ # 页面组件
│ ├── hooks/ # 自定义 Hooks
│ ├── services/ # API 服务
│ ├── types/ # TypeScript 类型
│ └── utils/ # 工具函数
├── src-tauri/ # Rust 后端源码
│ ├── src/ # Rust 源码
│ ├── Cargo.toml # Rust 依赖配置
│ └── tauri.conf.json # Tauri 配置
├── public/ # 静态资源
└── package.json # 前端依赖配置
🛠️ 技术栈
- 前端: React 18 + TypeScript + Vite
- 后端: Rust + Tauri 2.0
- UI: 待定 (可选择 Ant Design、Material-UI 等)
- 状态管理: 待定 (可选择 Zustand、Redux Toolkit 等)