完善标题编辑功能：在播放器Modal中实现编辑和AI生成

- 在ClipCard播放器Modal标题中集成EditableTitle组件
- 在CollectionPreviewModal和ClipDetailModal中实现标题编辑功能
- 修复播放器Modal标题栏样式问题：
  - 关闭按钮改为白色，在深色背景下清晰可见
  - 调整编辑图标位置，紧跟在标题文字后面
  - 解决图标重叠问题，优化布局
- 统一所有页面的标题编辑体验，支持手动编辑和AI生成

backend.log

@@ -124,3 +124,4 @@ NFO - WebSocket网关服务已禁用
 2025-09-15 19:33:31,936 - backend.main - INFO - API密钥已加载到环境变量
 2025-09-15 19:33:31,936 - backend.main - INFO - WebSocket网关服务已禁用，使用新的简化进度系统
 2025-09-15 19:33:48,972 - backend.core.llm_manager - INFO - 已初始化dashscope提供商，模型: qwen-plus
+2025-09-15 20:19:52,449 - backend.api.v1.projects - ERROR - 生成合集视频失败: clips_dir 参数是必需的，不能使用全局路径

frontend/src/components/ClipCard.tsx

@@ -458,7 +458,6 @@ const ClipCard: React.FC<ClipCardProps> = ({
 
       {/* 视频播放模态框 */}
       <Modal
-        title={clip.title || clip.generated_title || '视频预览'}
         open={showPlayer}
         onCancel={handleClosePlayer}
         footer={[
@@ -491,6 +490,37 @@ const ClipCard: React.FC<ClipCardProps> = ({
             background: '#1f1f1f'
           }
         }}
+        closeIcon={
+          <span style={{ color: '#ffffff', fontSize: '16px' }}>×</span>
+        }
+        title={
+          <div style={{ 
+            display: 'flex', 
+            alignItems: 'center', 
+            width: '100%',
+            paddingRight: '30px' // 为关闭按钮留出空间
+          }}>
+            <EditableTitle
+              title={clip.title || clip.generated_title || '视频预览'}
+              clipId={clip.id}
+              onTitleUpdate={(newTitle) => {
+                // 更新clip的标题
+                console.log('播放器标题已更新:', newTitle)
+                // 这里可以触发父组件的更新回调
+                if (onClipUpdate) {
+                  onClipUpdate(clip.id, { title: newTitle })
+                }
+              }}
+              style={{ 
+                color: '#ffffff', 
+                fontSize: '16px', 
+                fontWeight: '500',
+                flex: 1,
+                maxWidth: 'calc(100% - 40px)' // 确保不会与关闭按钮重叠
+              }}
+            />
+          </div>
+        }
       >
         {videoUrl && (
           <ReactPlayer

frontend/src/components/ClipDetailModal.tsx

@@ -13,6 +13,7 @@ import { Clip } from '../store/useProjectStore'
 import { projectApi } from '../services/api'
 import SubtitleEditor from './SubtitleEditor'
 import { subtitleEditorApi } from '../services/subtitleEditorApi'
+import EditableTitle from './EditableTitle'
 import { SubtitleSegment, VideoEditOperation } from '../types/subtitle'
 
 const { Text, Title } = Typography
@@ -235,9 +236,18 @@ const ClipDetailModal: React.FC<ClipDetailModalProps> = ({
               <div style={{ color: '#ffffff' }}>
                 {/* 标题 */}
                 <div style={{ marginBottom: '16px' }}>
-                  <Title level={5} style={{ color: '#ffffff', marginBottom: '8px' }}>
-                    {clip.generated_title || clip.title || '未命名片段'}
-                  </Title>
+                  <div style={{ marginBottom: '8px' }}>
+                    <EditableTitle
+                      title={clip.generated_title || clip.title || '未命名片段'}
+                      clipId={clip.id}
+                      onTitleUpdate={(newTitle) => {
+                        // 更新clip的标题
+                        console.log('标题已更新:', newTitle)
+                        // 这里可以触发父组件的更新回调
+                      }}
+                      style={{ color: '#ffffff', fontSize: '18px', fontWeight: '600' }}
+                    />
+                  </div>
                   <Text style={{ color: '#cccccc', fontSize: '12px' }}>
                     ID: {clip.id}
                   </Text>

frontend/src/components/CollectionPreviewModal.tsx

@@ -8,6 +8,7 @@ import { projectApi } from '../services/api'
 import AddClipToCollectionModal from './AddClipToCollectionModal'
 import { useCollectionVideoDownload } from '../hooks/useCollectionVideoDownload'
 import UploadModal from './UploadModal'
+import EditableTitle from './EditableTitle'
 import './CollectionPreviewModal.css'
 
 const { Title, Text } = Typography
@@ -324,7 +325,17 @@ const CollectionPreviewModal: React.FC<CollectionPreviewModalProps> = ({
                     <div className="video-info-content">
                       <div className="video-title-section">
                         <div className="video-title">
-                          {currentClip.title || currentClip.generated_title}
+                          <EditableTitle
+                            title={currentClip.title || currentClip.generated_title || '未命名片段'}
+                            clipId={currentClip.id}
+                            onTitleUpdate={(newTitle) => {
+                              // 更新当前clip的标题
+                              const updatedClip = { ...currentClip, title: newTitle }
+                              // 这里可以触发父组件的更新回调
+                              console.log('标题已更新:', newTitle)
+                            }}
+                            style={{ color: '#ffffff', fontSize: '16px', fontWeight: '500' }}
+                          />
                         </div>
                         <div className="video-meta">
                           <Tag color="blue">{formatDuration(currentClip)}</Tag>

frontend/src/components/EditableTitle.tsx

@@ -185,38 +185,35 @@ const EditableTitle: React.FC<EditableTitleProps> = ({
   }
 
   return (
-    <div 
-      style={{ 
-        display: 'flex', 
-        alignItems: 'flex-start', 
-        gap: '8px', 
+    <div
+      style={{
         cursor: 'pointer',
         padding: '4px 0',
-        ...style 
-      }} 
+        ...style
+      }}
       className={className}
       onClick={handleStartEdit}
       title="点击编辑标题"
     >
       <span style={{ 
-        flex: 1, 
         wordBreak: 'break-word',
         lineHeight: '1.5',
         fontSize: '14px',
-        minHeight: '20px'
+        minHeight: '20px',
+        display: 'inline'
       }}>
         {title}
+        <EditOutlined 
+          style={{ 
+            color: '#1890ff', 
+            fontSize: '12px',
+            opacity: 0.7,
+            transition: 'opacity 0.2s',
+            marginLeft: '6px',
+            display: 'inline'
+          }}
+        />
       </span>
-      <EditOutlined 
-        style={{ 
-          color: '#1890ff', 
-          fontSize: '12px',
-          opacity: 0.7,
-          transition: 'opacity 0.2s',
-          marginTop: '2px',
-          flexShrink: 0
-        }}
-      />
     </div>
   )
 }