feat: 优化视频生成工作台用户体验

修复功能问题： - 修复素材tab无法左右滑动的问题 - 添加自定义滚动条样式，隐藏默认滚动条 - 优化tab布局，支持横向滚动浏览简化素材卡片设计： - 创建SimpleMaterialCard组件，专用于素材选择 - 改为正方形缩略图，更适合侧边栏2列布局 - 精简信息显示：只保留名称、类型、时长/大小 - 移除繁琐的描述、标签等冗余信息 - 优化选择状态指示器位置和大小优化布局体验： - 素材选择器改为2列网格布局 - 缩小搜索框和间距，节省空间 - 统一使用紧凑型设计风格 - 改善滚动条样式和交互体验用户体验提升： - 更直观的素材浏览体验 - 减少视觉干扰，突出核心信息 - 提高操作效率和界面美观度 - 符合专业工具的简洁设计理念
2025-07-29 14:33:41 +08:00 · 2025-07-29 14:33:41 +08:00 · e744648183
parent f906b47e9f
commit e744648183
4 changed files with 190 additions and 52 deletions
--- a/apps/desktop/src/components/video-generation/MaterialSelector.tsx
+++ b/apps/desktop/src/components/video-generation/MaterialSelector.tsx
@ -1,15 +1,14 @@
 import React, { useState, useEffect } from 'react';
 import {
  MagnifyingGlassIcon,
-  PlusIcon,
-  CheckIcon
+  PlusIcon
 } from '@heroicons/react/24/outline';
 import { 
  MaterialCategory, 
  MaterialAsset,
  MaterialSelectorProps 
 } from '../../types/videoGeneration';
-import { MaterialAssetCard } from './MaterialAssetCard';
+import { SimpleMaterialCard } from './SimpleMaterialCard';

 /**
 * 素材选择器组件
@ -219,60 +218,54 @@ export const MaterialSelector: React.FC<MaterialSelectorProps> = ({
  return (
    <div className="h-full flex flex-col">
      {/* 搜索栏 */}
-      <div className="flex-shrink-0 p-4 border-b border-gray-200">
+      <div className="flex-shrink-0 p-3 border-b border-gray-200">
        <div className="relative">
-          <MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
+          <MagnifyingGlassIcon className="absolute left-3 top-1/2 transform -translate-y-1/2 h-3 w-3 text-gray-400" />
          <input
            type="text"
-            placeholder="搜索素材..."
+            placeholder="搜索..."
            value={searchQuery}
            onChange={(e) => setSearchQuery(e.target.value)}
-            className="w-full pl-10 pr-4 py-2 border border-gray-200 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 text-sm"
+            className="w-full pl-8 pr-3 py-1.5 border border-gray-200 rounded text-xs focus:ring-1 focus:ring-primary-500 focus:border-transparent transition-all duration-200"
          />
        </div>
-        
+
        {/* 选择状态 */}
        {selectedAssets.length > 0 && (
-          <div className="mt-2 text-xs text-gray-600">
-            已选择 {selectedAssets.length} 个素材
+          <div className="mt-2 text-xs text-gray-600 text-center">
+            已选 {selectedAssets.length} 个
            {maxSelection && ` / ${maxSelection}`}
          </div>
        )}
      </div>

      {/* 素材列表 */}
-      <div className="flex-1 overflow-y-auto p-4">
+      <div className="flex-1 overflow-y-auto p-3 custom-scrollbar">
        {isLoading ? (
-          <div className="flex items-center justify-center h-32">
-            <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary-600"></div>
-            <span className="ml-2 text-sm text-gray-600">加载中...</span>
+          <div className="flex flex-col items-center justify-center h-32">
+            <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-primary-600"></div>
+            <span className="mt-2 text-xs text-gray-600">加载中...</span>
          </div>
        ) : filteredAssets.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-32 text-gray-500">
-            <PlusIcon className="h-8 w-8 mb-2 text-gray-300" />
-            <p className="text-sm">
+            <PlusIcon className="h-6 w-6 mb-2 text-gray-300" />
+            <p className="text-xs text-center">
              {searchQuery.trim() ? '未找到匹配的素材' : '暂无素材'}
            </p>
          </div>
        ) : (
-          <div className="space-y-3">
+          <div className="grid grid-cols-2 gap-2">
            {filteredAssets.map((asset) => (
-              <div key={asset.id} className="relative">
-                <MaterialAssetCard
-                  asset={asset}
-                  viewMode="list"
-                  isSelected={isAssetSelected(asset)}
-                  onSelect={handleAssetSelect}
-                  showActions={false}
-                />
-                
-                {/* 选择状态指示器 */}
-                {isAssetSelected(asset) && (
-                  <div className="absolute top-2 right-2 w-6 h-6 bg-primary-600 text-white rounded-full flex items-center justify-center">
-                    <CheckIcon className="h-4 w-4" />
-                  </div>
-                )}
-              </div>
+              <SimpleMaterialCard
+                key={asset.id}
+                asset={asset}
+                isSelected={isAssetSelected(asset)}
+                onSelect={handleAssetSelect}
+                onPreview={(asset) => {
+                  console.log('Preview asset:', asset);
+                  // TODO: 实现预览功能
+                }}
+              />
            ))}
          </div>
        )}
--- a/apps/desktop/src/components/video-generation/SimpleMaterialCard.tsx
+++ b/apps/desktop/src/components/video-generation/SimpleMaterialCard.tsx
@ -0,0 +1,140 @@
+import React from 'react';
+import {
+  PlayIcon,
+  MusicalNoteIcon,
+  DocumentTextIcon,
+  PhotoIcon,
+  VideoCameraIcon,
+  CheckIcon
+} from '@heroicons/react/24/outline';
+import { 
+  MaterialAsset, 
+  MaterialCategory,
+  MATERIAL_CATEGORY_CONFIG 
+} from '../../types/videoGeneration';
+
+interface SimpleMaterialCardProps {
+  asset: MaterialAsset;
+  isSelected?: boolean;
+  onSelect?: (asset: MaterialAsset) => void;
+  onPreview?: (asset: MaterialAsset) => void;
+}
+
+/**
+ * 简化版素材卡片组件
+ * 只显示核心信息：缩略图、名称、类型
+ */
+export const SimpleMaterialCard: React.FC<SimpleMaterialCardProps> = ({
+  asset,
+  isSelected = false,
+  onSelect,
+  onPreview
+}) => {
+  const categoryConfig = MATERIAL_CATEGORY_CONFIG[asset.category];
+
+  // 获取文件类型图标
+  const getTypeIcon = () => {
+    switch (asset.type) {
+      case 'image':
+        return <PhotoIcon className="h-4 w-4" />;
+      case 'video':
+        return <VideoCameraIcon className="h-4 w-4" />;
+      case 'audio':
+        return <MusicalNoteIcon className="h-4 w-4" />;
+      case 'text':
+        return <DocumentTextIcon className="h-4 w-4" />;
+      default:
+        return <DocumentTextIcon className="h-4 w-4" />;
+    }
+  };
+
+  return (
+    <div
+      className={`group relative bg-white rounded-lg border transition-all duration-200 overflow-hidden cursor-pointer hover:shadow-md ${
+        isSelected 
+          ? 'ring-2 ring-primary-500 border-primary-300 shadow-md' 
+          : 'border-gray-200 hover:border-gray-300'
+      }`}
+      onClick={() => onSelect?.(asset)}
+    >
+      {/* 缩略图区域 */}
+      <div className="aspect-square bg-gradient-to-br from-gray-100 to-gray-200 relative overflow-hidden">
+        {asset.thumbnail_path ? (
+          <img
+            src={asset.thumbnail_path}
+            alt={asset.name}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          />
+        ) : (
+          <div className="w-full h-full flex items-center justify-center">
+            <div className={`p-2 rounded-full ${categoryConfig.bgColor}`}>
+              <span className="text-lg">{categoryConfig.icon}</span>
+            </div>
+          </div>
+        )}
+
+        {/* 类型标识 */}
+        <div className="absolute top-1 left-1">
+          <div className={`flex items-center gap-1 px-1.5 py-0.5 rounded text-xs font-medium ${categoryConfig.bgColor} ${categoryConfig.color} backdrop-blur-sm`}>
+            {getTypeIcon()}
+          </div>
+        </div>
+
+        {/* 播放按钮（视频/音频） */}
+        {(asset.type === 'video' || asset.type === 'audio') && (
+          <div className="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+            <button
+              onClick={(e) => {
+                e.stopPropagation();
+                onPreview?.(asset);
+              }}
+              className="p-2 bg-black/50 text-white rounded-full hover:bg-black/70 transition-colors duration-200"
+            >
+              <PlayIcon className="h-4 w-4" />
+            </button>
+          </div>
+        )}
+
+        {/* 选择状态指示器 */}
+        {isSelected && (
+          <div className="absolute top-1 right-1 w-5 h-5 bg-primary-600 text-white rounded-full flex items-center justify-center shadow-md">
+            <CheckIcon className="h-3 w-3" />
+          </div>
+        )}
+      </div>
+
+      {/* 内容区域 */}
+      <div className="p-2">
+        <h3 className="font-medium text-gray-900 text-xs truncate mb-1">
+          {asset.name}
+        </h3>
+
+        {/* 简化的元数据 */}
+        <div className="flex items-center justify-between">
+          <span className={`px-1.5 py-0.5 rounded text-xs ${categoryConfig.bgColor} ${categoryConfig.color}`}>
+            {categoryConfig.label}
+          </span>
+
+          {/* 时长或大小信息 */}
+          {asset.metadata?.duration && (
+            <span className="text-xs text-gray-500">
+              {Math.floor(asset.metadata.duration / 60)}:{(asset.metadata.duration % 60).toString().padStart(2, '0')}
+            </span>
+          )}
+          {asset.metadata?.size && !asset.metadata?.duration && (
+            <span className="text-xs text-gray-500">
+              {(asset.metadata.size / 1024 / 1024).toFixed(1)}MB
+            </span>
+          )}
+        </div>
+      </div>
+
+      {/* 悬停效果 */}
+      <div className={`absolute inset-0 rounded-lg transition-all duration-200 pointer-events-none ${
+        isSelected 
+          ? 'bg-primary-500/5' 
+          : 'bg-transparent group-hover:bg-gray-500/5'
+      }`} />
+    </div>
+  );
+};
--- a/apps/desktop/src/pages/VideoGeneration.tsx
+++ b/apps/desktop/src/pages/VideoGeneration.tsx
@ -1,8 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import {
-  PlayIcon,
-  CogIcon,
  SparklesIcon,
  ArrowRightIcon
 } from '@heroicons/react/24/outline';
@ -280,7 +278,8 @@ const VideoGeneration: React.FC = () => {
        <div className="w-80 bg-white border-r border-gray-200 flex flex-col">
          {/* 素材分类标签 */}
          <div className="flex-shrink-0 border-b border-gray-200">
-            <div className="flex overflow-x-auto scrollbar-hidden">
+            <div className="flex overflow-x-auto overflow-y-hidden scrollbar-hidden"
+                 style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}>
              {Object.values(MaterialCategory).map((category) => {
                const config = MATERIAL_CATEGORY_CONFIG[category];
                const selectedAssets = project.selected_assets[category] || [];
@ -290,15 +289,15 @@ const VideoGeneration: React.FC = () => {
                  <button
                    key={category}
                    onClick={() => setActiveMaterialTab(category)}
-                    className={`flex-shrink-0 flex items-center gap-2 px-4 py-3 border-b-2 transition-all duration-200 ${
+                    className={`flex-shrink-0 flex items-center gap-2 px-3 py-3 border-b-2 transition-all duration-200 min-w-max ${
                      isActive
                        ? 'border-primary-500 text-primary-600 bg-primary-50'
                        : 'border-transparent text-gray-600 hover:text-gray-900 hover:bg-gray-50'
                    }`}
                  >
-                    <span className="text-lg">{config.icon}</span>
+                    <span className="text-base">{config.icon}</span>
                    <div className="text-left">
-                      <div className="text-sm font-medium">{config.label}</div>
+                      <div className="text-xs font-medium whitespace-nowrap">{config.label}</div>
                      <div className="text-xs text-gray-500">
                        {selectedAssets.length} 已选
                      </div>
--- a/docs/video-generation-feature.md
+++ b/docs/video-generation-feature.md
@ -26,10 +26,11 @@
  - 编辑和删除：完整的CRUD操作

 ### 2. 视频生成工作台 (Video Generation)
- **三步式工作流程**
-  1. **选择素材**：从各类素材中选择所需内容
-  2. **配置参数**：设置视频输出格式和质量
-  3. **生成预览**：预览效果并生成最终视频
+- **专业布局设计**
+  - **左侧素材区**：Tab切换（模特/产品/场景/动作/音乐/提示词模板）
+  - **中央预览区**：实时视频预览、播放控制、素材概览
+  - **底部参数区**：紧凑型配置面板，一行显示所有关键参数
+  - **右侧任务区**：可折叠的任务状态面板，实时显示生成进度

 - **高级配置选项**
  - 输出格式：MP4、MOV、AVI
@ -38,12 +39,14 @@
  - 质量设置：低、中、高三档
  - 音频控制：启用/禁用音频
  - 特效选项：淡入淡出、缩放、转场等
+  - 高级选项：可展开的详细配置

- **实时预览**
-  - 视频预览窗口
-  - 播放控制
-  - 配置信息显示
-  - 生成统计
+- **实时预览与任务管理**
+  - 专业视频预览窗口（播放控制、进度条、全屏支持）
+  - 选中素材实时显示
+  - 生成统计信息
+  - 任务队列管理（进度显示、取消、重试、删除）
+  - 离线任务状态监控

 ## 技术特性

@ -71,16 +74,19 @@
 apps/desktop/src/
 ├── pages/
 │   ├── MaterialCenter.tsx          # 素材中心主页面
-│   └── VideoGeneration.tsx         # 视频生成工作台
+│   └── VideoGeneration.tsx         # 视频生成工作台（重新设计）
 ├── components/video-generation/
 │   ├── MaterialAssetCard.tsx       # 素材卡片组件
 │   ├── MaterialCategoryFilter.tsx  # 分类过滤器
 │   ├── MaterialSelector.tsx        # 素材选择器
-│   ├── VideoConfigPanel.tsx        # 视频配置面板
-│   ├── VideoPreview.tsx           # 视频预览组件
+│   ├── VideoConfigPanel.tsx        # 完整视频配置面板
+│   ├── CompactVideoConfigPanel.tsx # 紧凑型配置面板（新增）
+│   ├── VideoPreview.tsx           # 原视频预览组件
+│   ├── CentralVideoPreview.tsx    # 中央预览组件（新增）
+│   ├── TaskStatusPanel.tsx        # 任务状态面板（新增）
 │   └── CreateMaterialAssetModal.tsx # 创建素材模态框
 └── types/
-    └── videoGeneration.ts          # 类型定义文件
+    └── videoGeneration.ts          # 扩展的类型定义
 ```

 ## 使用指南