核心功能重构: - 将MaterialSegmentView改为多条件检索的标签页风格 - 实现AI分类和模特两个主要检索维度 - 移除折叠/展开功能,改为直接平铺Card卡片风格 标签页检索系统: - AI分类标签页:显示所有分类选项及对应数量 - 模特标签页:显示所有模特选项及对应数量 - 全部选项:显示总片段数量 - 动态数量显示:每个选项显示对应的片段数量 UI/UX优化: - Card卡片风格:每个片段使用独立卡片展示 - 缩略图显示:支持视频缩略图预览 - 标签信息:显示分类、模特、置信度等信息 - 操作按钮:查看、编辑、删除等快捷操作 - 搜索功能:支持按片段名称、分类、模特搜索 数据展示优化: - 时长格式化:MM:SS格式显示时间 - 置信度显示:百分比形式显示AI分类置信度 - 状态标签:不同颜色区分分类和模特信息 - 响应式布局:适配不同屏幕尺寸 技术实现: - 使用get_project_segment_view API获取数据 - useMemo优化性能,避免不必要的重新计算 - TypeScript类型安全,完整的接口定义 - 错误处理和加载状态管理 交互体验: - 标签页切换:平滑的标签页切换动画 - 过滤选择:点击标签即可过滤对应内容 - 实时搜索:输入即时过滤结果 - 空状态处理:友好的空数据提示 性能优化: - 智能过滤:基于选中标签和搜索词的组合过滤 - 数据缓存:避免重复API调用 - 组件优化:使用React hooks优化渲染性能 这个重构完全满足了用户的需求: 1. 检索风格改为标签页 2. AI分类和模特维度,显示全部/具体选项+数量 3. 内容直接平铺Card卡片风格,无折叠/展开 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 等)