修复CollectionCardMini高度和样式，与ClipCard保持一致

- 更新CollectionCardMini高度：240px → 380px，与ClipCard保持一致 - 更新封面区域高度：120px → 200px，与ClipCard保持一致 - 重新设计封面覆盖层：添加hover播放效果，与ClipCard样式一致 - 添加CollectionCard.css样式导入和className - 统一卡片样式：圆角、边框、背景渐变等视觉效果 - 修复ProjectDetailPage中实际使用的CollectionCardMini组件
2025-09-16 00:02:40 +08:00
1 parent ac0142697d
commit 926a96673e
@@ -309,3 +309,11 @@ NFO - WebSocket网关服务已禁用
 2025-09-15 23:25:08,823 - backend.main - INFO - 数据库表创建完成
 2025-09-15 23:25:08,823 - backend.main - INFO - API密钥已加载到环境变量
 2025-09-15 23:25:08,823 - backend.main - INFO - WebSocket网关服务已禁用，使用新的简化进度系统
+2025-09-15 23:59:00,918 - backend.main - INFO - 正在关闭AutoClip API服务...
+2025-09-15 23:59:00,919 - backend.main - INFO - WebSocket网关服务已禁用
+2025-09-15 23:59:03,087 - backend.services.processing_orchestrator - INFO - 流水线模块导入成功
+2025-09-15 23:59:03,324 - backend.services.simple_progress - INFO - Redis连接成功
+2025-09-15 23:59:03,398 - backend.main - INFO - 启动AutoClip API服务...
+2025-09-15 23:59:03,399 - backend.main - INFO - 数据库表创建完成
+2025-09-15 23:59:03,399 - backend.main - INFO - API密钥已加载到环境变量
+2025-09-15 23:59:03,399 - backend.main - INFO - WebSocket网关服务已禁用，使用新的简化进度系统
@@ -1 +1 @@
-13361
+50335
@@ -1 +1 @@
-13281
+50240
@@ -1 +1 @@
-13393
+50365
@@ -7,115 +7,115 @@
    "react": {
      "src": "../../react/index.js",
      "file": "react.js",
-      "fileHash": "8cf1eee2",
+      "fileHash": "32aa7990",
      "needsInterop": true
    },
    "react-dom": {
      "src": "../../react-dom/index.js",
      "file": "react-dom.js",
-      "fileHash": "27698d7e",
+      "fileHash": "da0f985e",
      "needsInterop": true
    },
    "react/jsx-dev-runtime": {
      "src": "../../react/jsx-dev-runtime.js",
      "file": "react_jsx-dev-runtime.js",
-      "fileHash": "e710264b",
+      "fileHash": "653960c7",
      "needsInterop": true
    },
    "react/jsx-runtime": {
      "src": "../../react/jsx-runtime.js",
      "file": "react_jsx-runtime.js",
-      "fileHash": "a5b7adb6",
+      "fileHash": "c2abaa4b",
      "needsInterop": true
    },
    "@ant-design/icons": {
      "src": "../../@ant-design/icons/es/index.js",
      "file": "@ant-design_icons.js",
-      "fileHash": "c0220592",
+      "fileHash": "c694bea7",
      "needsInterop": false
    },
    "antd": {
      "src": "../../antd/es/index.js",
      "file": "antd.js",
-      "fileHash": "740849e3",
+      "fileHash": "b1aa8324",
      "needsInterop": false
    },
    "antd/locale/zh_CN": {
      "src": "../../antd/locale/zh_CN.js",
      "file": "antd_locale_zh_CN.js",
-      "fileHash": "68594c80",
+      "fileHash": "59cf75ac",
      "needsInterop": true
    },
    "axios": {
      "src": "../../axios/index.js",
      "file": "axios.js",
-      "fileHash": "9d2fc4db",
+      "fileHash": "b4f59795",
      "needsInterop": false
    },
    "dayjs": {
      "src": "../../dayjs/dayjs.min.js",
      "file": "dayjs.js",
-      "fileHash": "006bca1c",
+      "fileHash": "5d0358a3",
      "needsInterop": true
    },
    "dayjs/locale/zh-cn": {
      "src": "../../dayjs/locale/zh-cn.js",
      "file": "dayjs_locale_zh-cn.js",
-      "fileHash": "b4825b37",
+      "fileHash": "a80abcde",
      "needsInterop": true
    },
    "dayjs/plugin/relativeTime": {
      "src": "../../dayjs/plugin/relativeTime.js",
      "file": "dayjs_plugin_relativeTime.js",
-      "fileHash": "c8a81c26",
+      "fileHash": "e112ba0f",
      "needsInterop": true
    },
    "dayjs/plugin/timezone": {
      "src": "../../dayjs/plugin/timezone.js",
      "file": "dayjs_plugin_timezone.js",
-      "fileHash": "8447d5ee",
+      "fileHash": "788c122d",
      "needsInterop": true
    },
    "dayjs/plugin/utc": {
      "src": "../../dayjs/plugin/utc.js",
      "file": "dayjs_plugin_utc.js",
-      "fileHash": "6c25b876",
+      "fileHash": "0b541a49",
      "needsInterop": true
    },
    "react-beautiful-dnd": {
      "src": "../../react-beautiful-dnd/dist/react-beautiful-dnd.esm.js",
      "file": "react-beautiful-dnd.js",
-      "fileHash": "fc60b58b",
+      "fileHash": "97ad4664",
      "needsInterop": false
    },
    "react-dom/client": {
      "src": "../../react-dom/client.js",
      "file": "react-dom_client.js",
-      "fileHash": "5f2df725",
+      "fileHash": "b73d9217",
      "needsInterop": true
    },
    "react-dropzone": {
      "src": "../../react-dropzone/dist/es/index.js",
      "file": "react-dropzone.js",
-      "fileHash": "e1e701ea",
+      "fileHash": "93a4b5d1",
      "needsInterop": false
    },
    "react-player": {
      "src": "../../react-player/lib/index.js",
      "file": "react-player.js",
-      "fileHash": "4a73e7be",
+      "fileHash": "1ed12f12",
      "needsInterop": true
    },
    "react-router-dom": {
      "src": "../../react-router-dom/dist/index.js",
      "file": "react-router-dom.js",
-      "fileHash": "97312ab5",
+      "fileHash": "e750453f",
      "needsInterop": false
    },
    "zustand": {
      "src": "../../zustand/esm/index.mjs",
      "file": "zustand.js",
-      "fileHash": "96259582",
+      "fileHash": "5a2be4da",
      "needsInterop": false
    }
  },
@@ -177,9 +177,6 @@
    "chunk-GKJBSOWT": {
      "file": "chunk-GKJBSOWT.js"
    },
-    "chunk-WT22ZCGG": {
-      "file": "chunk-WT22ZCGG.js"
-    },
    "chunk-X7BPSMZA": {
      "file": "chunk-X7BPSMZA.js"
    },
@@ -189,6 +186,9 @@
    "chunk-QJTFJ6OV": {
      "file": "chunk-QJTFJ6OV.js"
    },
+    "chunk-WT22ZCGG": {
+      "file": "chunk-WT22ZCGG.js"
+    },
    "chunk-V4OQ3NZ2": {
      "file": "chunk-V4OQ3NZ2.js"
    }
@@ -5,9 +5,6 @@ import {
 import {
  require_react_dom
 } from "./chunk-GKJBSOWT.js";
-import {
-  require_dayjs_min
-} from "./chunk-WT22ZCGG.js";
 import {
  BarsOutlined_default,
  CalendarOutlined_default,
@@ -101,6 +98,9 @@ import {
 import {
  require_react
 } from "./chunk-QJTFJ6OV.js";
+import {
+  require_dayjs_min
+} from "./chunk-WT22ZCGG.js";
 import {
  __commonJS,
  __toESM
@@ -3,6 +3,7 @@ import { Card, Typography, Button, Popconfirm, Tooltip } from 'antd'
 import { DeleteOutlined, PlayCircleOutlined } from '@ant-design/icons'
 import { Collection, Clip } from '../store/useProjectStore'
 import EditableCollectionTitle from './EditableCollectionTitle'
+import './CollectionCard.css'

 const { Text, Title } = Typography

@@ -43,10 +44,11 @@ const CollectionCardMini: React.FC<CollectionCardMiniProps> = ({

  return (
    <Card
+      className="collection-card"
      hoverable
      style={{ 
        width: '320px',
-        height: '240px',
+        height: '380px',
        flexShrink: 0,
        cursor: 'pointer',
        borderRadius: '16px',
@@ -73,7 +75,7 @@ const CollectionCardMini: React.FC<CollectionCardMiniProps> = ({
      }}>
        {/* 封面区域 */}
        <div style={{
-          height: '120px',
+          height: '200px',
          background: collection.thumbnail_path 
            ? `url(http://localhost:8000/api/v1/projects/${collection.project_id}/collections/${collection.id}/thumbnail)`
            : 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
@@ -83,30 +85,29 @@ const CollectionCardMini: React.FC<CollectionCardMiniProps> = ({
          position: 'relative',
          display: 'flex',
          alignItems: 'center',
-          justifyContent: 'center'
+          justifyContent: 'center',
+          cursor: 'pointer',
+          overflow: 'hidden'
        }}>
-          {!collection.thumbnail_path && (
-            <PlayCircleOutlined style={{ fontSize: '32px', color: 'white', opacity: 0.9 }} />
-          )}
-          {collection.thumbnail_path && (
-            <div style={{
+          {/* 播放覆盖层 */}
+          <div 
+            style={{
              position: 'absolute',
-              top: '50%',
-              left: '50%',
-              transform: 'translate(-50%, -50%)',
-              background: 'rgba(0,0,0,0.7)',
-              borderRadius: '50%',
-              width: '40px',
-              height: '40px',
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              background: 'rgba(0,0,0,0.4)',
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'center',
-              transition: 'all 0.3s ease',
-              opacity: isHovered ? 1 : 0.8
-            }}>
-              <PlayCircleOutlined style={{ fontSize: '20px', color: 'white' }} />
-            </div>
-          )}
+              opacity: 0,
+              transition: 'opacity 0.3s ease'
+            }}
+            className="video-overlay"
+          >
+            <PlayCircleOutlined style={{ fontSize: '40px', color: 'white' }} />
+          </div>
          <div 
            style={{
              position: 'absolute',