fix: 修复下拉选择问题

This commit is contained in:
imeepos 2025-07-14 16:45:28 +08:00
parent 719cc3782a
commit c3c0bb8c08
8 changed files with 35 additions and 68 deletions

View File

@ -10,7 +10,7 @@ import { useProjectStore } from './store/projectStore';
import { useUIStore } from './store/uiStore';
import { CreateProjectRequest, UpdateProjectRequest } from './types/project';
import "./App.css";
import './styles/design-system.css';
/**
*
* Tauri

View File

@ -2,7 +2,6 @@ import React, { useState, useEffect } from 'react';
import { invoke } from '@tauri-apps/api/core';
import {
Search,
Filter,
Download,
RefreshCw,
AlertCircle,
@ -10,7 +9,6 @@ import {
Clock,
XCircle,
Eye,
Trash2,
RotateCcw
} from 'lucide-react';
import { LoadingSpinner } from './LoadingSpinner';

View File

@ -0,0 +1,30 @@
import { ChevronDownIcon } from "lucide-react";
// 自定义下拉选择组件
export const CustomSelect: React.FC<{
value: string;
onChange: (value: string) => void;
options: { value: string; label: string }[];
placeholder?: string;
className?: string;
}> = ({ value, onChange, options, placeholder, className = '' }) => {
return (
<div className={`relative ${className}`}>
<select
value={value}
onChange={(e) => onChange(e.target.value)}
className="w-full appearance-none bg-white border border-gray-200 rounded-lg px-3 py-2 pr-8 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 hover:border-gray-300 cursor-pointer"
>
{placeholder && <option value="">{placeholder}</option>}
{options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
<div className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<ChevronDownIcon className="h-4 w-4 text-gray-400" />
</div>
</div>
);
};

View File

@ -15,7 +15,6 @@ import {
import {
HeartIcon as HeartIconSolid
} from '@heroicons/react/24/solid';
import '../styles/design-system.css';
interface ModelCardProps {
model: Model;

View File

@ -13,7 +13,6 @@ import {
SparklesIcon,
HeartIcon
} from '@heroicons/react/24/outline';
import '../styles/design-system.css';
interface ModelListProps {
onModelSelect?: (model: Model) => void;

View File

@ -1,8 +1,8 @@
import React from 'react';
import { ModelStatus, Gender, ModelSortBy, SortOrder } from '../types/model';
import { MagnifyingGlassIcon, FunnelIcon, ArrowUpIcon, ArrowDownIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
import '../styles/design-system.css';
import { MagnifyingGlassIcon, FunnelIcon, ArrowUpIcon, ArrowDownIcon } from '@heroicons/react/24/outline';
import { CustomSelect } from './CustomSelect'
interface ModelSearchProps {
searchQuery: string;
onSearchChange: (query: string) => void;
@ -79,34 +79,7 @@ const ModelSearch: React.FC<ModelSearchProps> = ({
}
};
// 自定义下拉选择组件
const CustomSelect: React.FC<{
value: string;
onChange: (value: string) => void;
options: { value: string; label: string }[];
placeholder?: string;
className?: string;
}> = ({ value, onChange, options, placeholder, className = '' }) => {
return (
<div className={`relative ${className}`}>
<select
value={value}
onChange={(e) => onChange(e.target.value)}
className="w-full appearance-none bg-white border border-gray-200 rounded-lg px-3 py-2 pr-8 text-sm text-gray-900 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent transition-all duration-200 hover:border-gray-300 cursor-pointer"
>
{placeholder && <option value="">{placeholder}</option>}
{options.map((option) => (
<option key={option.value} value={option.value}>
{option.label}
</option>
))}
</select>
<div className="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
<ChevronDownIcon className="h-4 w-4 text-gray-400" />
</div>
</div>
);
};
return (
<div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 animate-fade-in">

View File

@ -31,10 +31,6 @@ export const VideoClassificationProgress: React.FC<VideoClassificationProgressPr
getProjectQueueStatus,
getProjectTaskProgress,
getClassificationStats,
pauseQueue,
resumeQueue,
stopQueue,
isLoading,
error,
clearError,
} = useVideoClassificationStore();
@ -129,33 +125,6 @@ export const VideoClassificationProgress: React.FC<VideoClassificationProgressPr
}
};
// 队列控制
const handlePauseResume = async () => {
try {
console.log('🎮 队列控制按钮点击,当前状态:', typedQueueStats?.status);
if (typedQueueStats?.status === 'Running') {
console.log('⏸️ 暂停队列...');
await pauseQueue();
} else if (typedQueueStats?.status === 'Paused') {
console.log('▶️ 恢复队列...');
await resumeQueue();
} else {
console.log('❓ 未知状态,无法操作:', typedQueueStats?.status);
}
} catch (error) {
console.error('❌ 队列控制失败:', error);
}
};
const handleStop = async () => {
try {
console.log('🛑 停止队列...');
await stopQueue();
} catch (error) {
console.error('❌ 停止队列失败:', error);
}
};
// 计算进度百分比
const getOverallProgress = useCallback(() => {

View File

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { ArrowLeft, FolderOpen, Calendar, Settings, Upload, FileVideo, FileAudio, FileImage, HardDrive } from 'lucide-react';
import { ArrowLeft, FolderOpen, Settings, Upload, FileVideo, FileAudio, FileImage, HardDrive } from 'lucide-react';
import { useProjectStore } from '../store/projectStore';
import { useMaterialStore } from '../store/materialStore';
import { Project } from '../types/project';
@ -8,7 +8,6 @@ import { MaterialImportResult } from '../types/material';
import { LoadingSpinner } from '../components/LoadingSpinner';
import { ErrorMessage } from '../components/ErrorMessage';
import { MaterialImportDialog } from '../components/MaterialImportDialog';
import { FFmpegDebugPanel } from '../components/FFmpegDebugPanel';
import { MaterialCard } from '../components/MaterialCard';
import { VideoClassificationProgress } from '../components/VideoClassificationProgress';
import { AiAnalysisLogViewer } from '../components/AiAnalysisLogViewer';