d36475ff35
功能增强： 为素材列表的MaterialCard添加了更多详细的统计信息， 让用户能够更全面地了解每个素材的详细情况。 新增信息展示： 1. 基本信息： - 文件大小（格式化显示，如 MB/GB） - 创建时间（本地化日期格式） 2. 视频元数据（蓝色主题）： - 视频时长（mm:ss格式） - 分辨率（宽高） - 比特率（自动单位转换） - 帧率（fps） - 编解码器 - 音频信息（如果有） 3. 音频元数据（绿色主题）： - 音频时长 - 比特率 - 采样率 - 音频编解码器 4. 图片元数据（紫色主题）： - 图片分辨率 - 图片格式 - DPI信息（如果有） 5. 处理统计信息（灰色主题）： - 场景检测结果（场景数量） - 切分片段数量 - 处理状态 技术实现： 1. 辅助函数： - formatTime: 时间格式化（秒转mm:ss） - formatFileSize: 文件大小格式化 - formatBitrate: 比特率格式化 - formatResolution: 分辨率格式化 - formatDate: 日期本地化格式化 2. 响应式布局： - 使用Grid布局优化信息展示 - 不同类型元数据使用不同颜色主题 - 图标+文字的直观展示方式 3. 条件渲染： - 根据素材类型显示对应的元数据 - 智能检测元数据存在性 - 优雅处理缺失信息 用户体验提升： 一目了然的素材详细信息 颜色编码的信息分类 直观的图标标识 格式化的数据展示 响应式的布局设计 现在用户可以在素材列表中快速了解每个文件的详细技术参数和处理状态！ |
||
|---|---|---|
| .. | ||
| public | ||
| src | ||
| src-tauri | ||
| .gitignore | ||
| 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 等)