autoclip/frontend

Auto Clips Frontend

基于 React + TypeScript + Vite + Ant Design 的视频自动切片前端应用。

功能特性

🎯 核心功能

• 视频上传: 支持拖拽上传视频文件和字幕文件
• 智能处理: AI 自动提取视频精彩片段
• 片段管理: 查看、编辑、下载视频片段
• 合集创建: AI 推荐合集 + 手动创建合集
• 实时监控: 处理进度实时反馈

🎨 用户界面

• 现代化设计: 基于 Ant Design 组件库
• 响应式布局: 支持桌面和移动端
• 直观操作: 拖拽排序、一键下载
• 状态反馈: 清晰的处理状态和进度显示

技术栈

• 前端框架: React 18 + TypeScript
• 构建工具: Vite
• UI 组件: Ant Design
• 状态管理: Zustand
• 路由: React Router DOM
• HTTP 客户端: Axios
• 拖拽功能: React Beautiful DnD
• 视频播放: React Player
• 文件上传: React Dropzone

快速开始

环境要求

• Node.js >= 16
• npm 或 yarn

安装依赖

npm install
# 或
yarn install

启动开发服务器

npm run dev
# 或
yarn dev

访问 http://localhost:3000

构建生产版本

npm run build
# 或
yarn build

项目结构

frontend/
├── public/                 # 静态资源
├── src/
│   ├── components/         # 可复用组件
│   │   ├── Header.tsx      # 页面头部
│   │   ├── FileUpload.tsx  # 文件上传组件
│   │   ├── ProjectCard.tsx # 项目卡片
│   │   ├── ClipCard.tsx    # 视频片段卡片
│   │   └── CollectionCard.tsx # 合集卡片
│   ├── pages/              # 页面组件
│   │   ├── HomePage.tsx    # 项目首页
│   │   └── ProjectDetailPage.tsx # 项目详情页
│   ├── services/           # API 服务
│   │   └── api.ts          # API 接口定义
│   ├── store/              # 状态管理
│   │   └── useProjectStore.ts # 项目状态
│   ├── App.tsx             # 应用主组件
│   ├── main.tsx            # 应用入口
│   └── index.css           # 全局样式
├── package.json
├── vite.config.ts          # Vite 配置
├── tsconfig.json           # TypeScript 配置
└── README.md

页面说明

项目首页 (/)

• 项目列表展示
• 搜索和筛选功能
• 新建项目（文件上传）
• 项目状态监控

项目详情页 (/project/:id)

• 项目信息和处理状态
• 视频片段管理
• AI 合集展示
• 手动创建合集
• 下载和导出功能

组件说明

FileUpload

• 支持拖拽和点击上传
• 文件类型验证
• 上传进度显示
• 自动创建项目

ProjectCard

• 项目信息展示
• 状态指示器
• 快捷操作按钮
• 进度条显示

ClipCard

• 视频片段信息
• 在线预览功能
• 编辑和下载
• 添加到合集

CollectionCard

• 合集信息展示
• 片段列表管理
• 拖拽排序
• 生成合集视频

API 接口

前端通过 /api 代理与后端通信，主要接口包括：

• GET /api/projects - 获取项目列表
• POST /api/projects - 创建新项目
• GET /api/projects/:id - 获取项目详情
• POST /api/projects/:id/upload - 上传文件
• POST /api/projects/:id/process - 开始处理
• GET /api/projects/:id/status - 获取处理状态
• PUT /api/projects/:id/clips/:clipId - 更新片段
• PUT /api/projects/:id/collections/:collectionId - 更新合集
• GET /api/projects/:id/download - 下载视频

开发说明

状态管理

使用 Zustand 进行轻量级状态管理，主要管理：

• 项目列表和当前项目
• 视频片段和合集数据
• 加载状态和错误信息

样式规范

• 使用 Ant Design 主题色彩
• 响应式设计，支持移动端
• 统一的间距和圆角规范
• 自定义滚动条和悬停效果

类型定义

所有数据结构都有完整的 TypeScript 类型定义，确保类型安全。

部署说明

开发环境

npm run dev

生产环境

npm run build
npm run preview

Docker 部署

FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "run", "preview"]

后续优化

功能增强

• 视频在线编辑
• 批量操作
• 导出多种格式
• 用户权限管理
• 云端存储集成

性能优化

• 虚拟滚动
• 图片懒加载
• 代码分割
• 缓存策略

用户体验

• 快捷键支持
• 主题切换
• 国际化
• 无障碍访问

贡献指南

1. Fork 项目
2. 创建功能分支
3. 提交更改
4. 推送到分支
5. 创建 Pull Request

许可证

MIT License