视觉设计优化: - 重新设计信息架构,按重要性分层展示 - 优化颜色系统,减少视觉噪音 - 统一间距和字体层次,提升可读性 - 使用渐变背景和卡片设计增强视觉层次 交互体验改进: - 实现渐进披露,核心信息优先展示 - 添加可折叠区域,减少信息密度 - 优化状态指示器,更清晰的文件状态展示 - 改进匹配规则编辑器的位置和样式 响应式适配: - 移动端友好的布局设计 - 自适应网格系统 - 触摸友好的交互元素 - 优化小屏幕下的信息展示 信息架构重构: - 概览页:核心信息卡片 + 可折叠技术详情 - 素材页:主要信息 + 可展开详细信息 - 轨道页:轨道概览 + 片段详情 + 可展开属性 遵循frontend-developer规范,提升用户体验
@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 等)