video-edit/
├── types.ts              # 类型定义
├── useVideoEdit.ts       # 状态管理Hook
├── VideoEditOverlay.tsx  # 主覆盖层组件
├── EditPoint.tsx         # 编辑点组件
├── EditConnection.tsx    # 连接线组件
├── EditInput.tsx         # 输入框组件
├── api.ts               # API接口
├── video-edit.css       # 响应式样式
├── VideoEditDemo.tsx    # 演示组件
└── index.ts             # 模块导出

🚀 快速开始

1. 基础使用

import { VideoEditOverlay } from '@/components/pages/work-flow/video-edit';

function MyVideoPlayer() {
  const videoRef = useRef<HTMLVideoElement>(null);
  
  const handleDescriptionSubmit = (editPoint, description) => {
    console.log('编辑请求:', { editPoint, description });
    // 发送到聊天系统或处理编辑请求
  };

  return (
    <div className="relative">
      <video ref={videoRef} src="your-video.mp4" />
      
      <VideoEditOverlay
        projectId="your-project-id"
        userId={123}
        currentVideo={{
          id: 'video-id',
          url: 'your-video.mp4',
          duration: 30
        }}
        videoRef={videoRef}
        enabled={true}
        onDescriptionSubmit={handleDescriptionSubmit}
      />
    </div>
  );
}

2. 集成到MediaViewer

// 在MediaViewer组件中
<VideoEditOverlay
  projectId={taskObject.project_id}
  userId={currentUser.id}
  currentVideo={{
    id: currentVideo.video_id,
    url: currentVideo.urls[0],
    duration: 30
  }}
  videoRef={mainVideoRef}
  enabled={isVideoEditMode}
  onDescriptionSubmit={handleVideoEditDescriptionSubmit}
  className="rounded-lg"
/>

📱 响应式设计

屏幕适配

桌面端 (≥1024px): 完整功能，hover效果
平板端 (768-1023px): 增大点击区域
手机端 (≤767px): 优化触摸交互，简化界面
小屏幕 (≤480px): 最大化可用空间

触摸优化

增大点击区域 (最小44px)
防止iOS缩放 (font-size: 16px)
触摸反馈动画

🎮 交互说明

键盘操作

ESC: 取消当前编辑
Ctrl+Enter: 提交描述
Tab: 在输入框内导航

鼠标操作

单击视频: 创建编辑点
单击编辑点: 选择并显示输入框
点击外部: 自动提交或取消

触摸操作

轻触视频: 创建编辑点
轻触编辑点: 选择编辑点
长按: 显示上下文菜单

🔌 API集成

编辑点CRUD操作

import { 
  createEditPoint, 
  updateEditPoint, 
  deleteEditPoint, 
  getEditPoints 
} from '@/components/pages/work-flow/video-edit';

// 创建编辑点
const editPoint = await createEditPoint({
  videoId: 'video-id',
  projectId: 'project-id',
  position: { x: 50, y: 30 },
  timestamp: 15.5,
  description: '需要添加字幕'
});

// 更新编辑点
await updateEditPoint({
  id: editPoint.id,
  description: '更新后的描述',
  status: 'edited'
});

// 获取编辑点列表
const response = await getEditPoints({
  videoId: 'video-id',
  projectId: 'project-id'
});

🎨 样式定制

CSS变量

.video-edit-input {
  --bg-color: rgba(0, 0, 0, 0.8);
  --border-color: rgba(255, 255, 255, 0.2);
  --text-color: rgba(255, 255, 255, 0.9);
}

主题适配

自动检测系统主题
支持高对比度模式
可访问性优化

🧪 测试

运行测试页面

# 访问测试页面
http://localhost:3000/test/video-edit

测试清单

编辑点创建和动画
连接线绘制
输入框交互
键盘操作
响应式布局
性能测试

🔧 配置选项

VideoEditConfig

interface VideoEditConfig {
  maxEditPoints: number;        // 最大编辑点数量
  autoSave: boolean;           // 自动保存
  animationDuration: number;   // 动画时长
  pointStyle: {
    size: number;
    color: string;
    pulseColor: string;
  };
  connectionStyle: {
    strokeWidth: number;
    color: string;
    dashArray: string;
  };
}

🚨 注意事项

性能优化

编辑点数量建议不超过20个
使用虚拟化处理大量编辑点
及时清理未使用的编辑点

兼容性

需要现代浏览器支持 (Chrome 80+, Firefox 75+, Safari 13+)
移动端需要iOS 13+, Android 8+
需要支持CSS Grid和Flexbox

安全考虑

输入内容需要XSS过滤
API调用需要身份验证
编辑点数据需要权限控制

📝 更新日志

v1.0.0 (2024-01-XX)

✨ 初始版本发布
🎯 基础编辑点功能
🎨 玻璃态UI设计
📱 响应式适配
🔌 API集成
🧪 测试套件

🤝 贡献指南

Fork 项目
创建功能分支
提交更改
推送到分支
创建 Pull Request

📄 许可证

MIT License - 详见 LICENSE 文件

README.md Unescape Escape

🎬 Video Edit Feature

✨ 功能特性

🎯 核心功能

🎨 视觉效果

🔧 技术特性

🏗️ 架构设计

🚀 快速开始

1. 基础使用

2. 集成到MediaViewer

📱 响应式设计

屏幕适配

触摸优化

🎮 交互说明

键盘操作

鼠标操作

触摸操作

🔌 API集成

编辑点CRUD操作

🎨 样式定制

CSS变量

主题适配

🧪 测试

运行测试页面

测试清单

🔧 配置选项

VideoEditConfig

🚨 注意事项

性能优化

兼容性

安全考虑

📝 更新日志

v1.0.0 (2024-01-XX)

🤝 贡献指南

📄 许可证

README.md