045de8850a
新功能:
- 开发CustomMultiSelect多选下拉组件
- 支持多选功能，以标签形式显示选中项
- 支持搜索过滤功能 (可选)
- 支持全选/取消全选批量操作
- 支持单个标签移除和清空所有选择
- 智能显示：超过限制数量时显示'+N'格式
- 完整的键盘和鼠标交互支持
UI/UX优化:
- 保持与单选CustomSelect一致的设计风格
- 现代化的标签显示和交互效果
- 响应式设计，适配不同屏幕尺寸
- 悬停效果和状态反馈
- 点击外部自动关闭下拉框
技术实现:
- 重构OutfitMatchingRecommendation使用OutfitSearchPanel
- 统一筛选逻辑，避免重复代码
- 类型安全的多选数据处理
- 完善的错误处理和边界情况处理
导航栏集成:
- 将服装搭配功能添加到顶部导航栏
- 使用SparklesIcon图标，突出AI智能特性
- 路由配置：/outfit-match
- 描述：AI智能服装搭配推荐
组件特性对比:
- CustomSelect: 单选，简单文本显示
- CustomMultiSelect: 多选，标签+搜索+批量操作
应用场景:
- 服装类别筛选 (多选)
- 风格标签选择 (多选)
- 场合和季节选择 (多选)
- 颜色和材质筛选 (多选)
使用方法:
` sx
// 单选
<CustomSelect value={single} onChange={setSingle} options={options} />
// 多选
<CustomMultiSelect
value={multi}
onChange={setMulti}
options={options}
searchable={true}
maxDisplayItems={3}
/>
`
调试功能:
- 项目服装单品统计调试
- 搭配推荐生成过程跟踪
- 详细的日志输出和错误信息
现在用户可以通过顶部导航栏直接访问服装搭配功能，享受完整的AI智能搭配体验！
|
||
|---|---|---|
| .. | ||
| docs | ||
| public | ||
| scripts | ||
| src | ||
| src-tauri | ||
| test_data | ||
| .gitignore | ||
| CHANGELOG.md | ||
| DATABASE_OPTIMIZATION_GUIDE.md | ||
| README.md | ||
| TOOLS_FEATURE.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 等)