核心功能重构: - 移除标签页(tab)设计,改为同时显示AI分类和模特的筛选条件 - 实现组合筛选:AI分类 AND 模特的多条件检索 - 支持类似'AI分类:全身 and 模特:杨明明'的筛选组合 多条件筛选系统: - AI分类筛选:独立的筛选区域,显示所有分类选项及数量 - 模特筛选:独立的筛选区域,显示所有模特选项及数量 - 组合筛选:两个条件可以同时生效,实现精确筛选 - 当前筛选条件显示:实时显示已选择的筛选条件 UI/UX优化: - 分区设计:AI分类和模特各自独立的筛选区域 - 视觉区分:AI分类使用蓝色主题,模特使用绿色主题 - 筛选状态显示:当有筛选条件时显示当前筛选状态栏 - 清除功能:一键清除所有筛选条件 - Card卡片风格:片段展示保持卡片设计 数据处理优化: - 智能过滤:先获取所有片段,再依次应用分类和模特过滤 - 组合逻辑:支持分类 AND 模特的组合筛选 - 搜索集成:搜索功能与筛选条件无缝结合 - 实时更新:筛选条件变化时立即更新结果 技术实现: - 移除activeTab状态,简化组件逻辑 - 优化过滤算法,支持多条件组合 - 保持useMemo性能优化 - 完善的错误处理和加载状态 交互体验: - 直观的筛选界面:用户可以清楚看到所有可用的筛选选项 - 即时反馈:点击筛选条件立即看到结果变化 - 状态提示:当前筛选条件清晰显示,支持快速清除 - 空状态处理:没有匹配结果时的友好提示 功能特点: - 支持单一条件筛选:只选择AI分类或只选择模特 - 支持组合条件筛选:同时选择AI分类和模特 - 支持搜索+筛选:搜索词与筛选条件组合使用 - 支持快速重置:一键清除所有筛选条件 这个重构完全满足了用户的新需求: 1. 移除了标签页设计 2. 实现了AI分类和模特的同时筛选 3. 支持组合筛选条件(AI分类 AND 模特) 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 等)