布局优化: - AI分类筛选改为单行显示:'AI分类:' + 选项按钮 - 模特筛选改为单行显示:'模特:' + 选项按钮 - 使用flex布局,标签和选项在同一行 - 标签部分使用flex-shrink-0防止收缩 视觉改进: - 标签文字添加冒号,更清晰的层次结构 - 保持原有的颜色主题:AI分类(蓝色),模特(绿色) - 选项按钮保持原有的样式和交互效果 - 数量显示保持在按钮内的小徽章中 响应式设计: - flex-wrap确保选项按钮在小屏幕上能够换行 - gap-4提供合适的间距 - 保持良好的移动端体验 用户体验提升: - 更紧凑的布局,节省垂直空间 - 清晰的标签指示,用户一眼就能看到筛选维度 - 保持所有原有功能:点击筛选、数量显示、状态管理 - 筛选逻辑完全不变,只是视觉布局优化 现在筛选条件显示为: - AI分类:全部(44) 全身(20) 半身(15) 其他(9) - 模特:全部(44) 杨明明(44) 这种单行布局更加简洁明了,符合用户的使用习惯。 |
||
|---|---|---|
| .. | ||
| 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 等)