fix: 移除错误代码
This commit is contained in:
imeepos
@@ -1,330 +0,0 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
MagnifyingGlassIcon,
|
||||
FunnelIcon,
|
||||
XMarkIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import {CustomMultiSelect, CustomSelect} from '../CustomSelect';
|
||||
|
||||
interface SearchFilters {
|
||||
categories?: string[];
|
||||
styles?: string[];
|
||||
occasions?: string[];
|
||||
seasons?: string[];
|
||||
colors?: string[];
|
||||
minScore?: number;
|
||||
confidenceLevel?: string;
|
||||
matchingTypes?: string[];
|
||||
}
|
||||
|
||||
interface OutfitSearchPanelProps {
|
||||
filters: SearchFilters;
|
||||
onFiltersChange: (filters: SearchFilters) => void;
|
||||
onSearch: () => void;
|
||||
}
|
||||
|
||||
const OutfitSearchPanel: React.FC<OutfitSearchPanelProps> = ({
|
||||
filters,
|
||||
onFiltersChange,
|
||||
onSearch
|
||||
}) => {
|
||||
const [isExpanded, setIsExpanded] = useState(false);
|
||||
const [searchText, setSearchText] = useState('');
|
||||
|
||||
// 预定义选项
|
||||
const categoryOptions = [
|
||||
{ value: 'Top', label: '上装' },
|
||||
{ value: 'Bottom', label: '下装' },
|
||||
{ value: 'Dress', label: '连衣裙' },
|
||||
{ value: 'Outerwear', label: '外套' },
|
||||
{ value: 'Footwear', label: '鞋类' },
|
||||
{ value: 'Accessory', label: '配饰' }
|
||||
];
|
||||
|
||||
const styleOptions = [
|
||||
{ value: 'Casual', label: '休闲' },
|
||||
{ value: 'Formal', label: '正式' },
|
||||
{ value: 'Business', label: '商务' },
|
||||
{ value: 'Sporty', label: '运动' },
|
||||
{ value: 'Vintage', label: '复古' },
|
||||
{ value: 'Bohemian', label: '波西米亚' },
|
||||
{ value: 'Minimalist', label: '极简' },
|
||||
{ value: 'Streetwear', label: '街头' },
|
||||
{ value: 'Elegant', label: '优雅' },
|
||||
{ value: 'Trendy', label: '时尚' }
|
||||
];
|
||||
|
||||
const occasionOptions = [
|
||||
{ value: 'work', label: '工作' },
|
||||
{ value: 'casual', label: '日常' },
|
||||
{ value: 'party', label: '聚会' },
|
||||
{ value: 'date', label: '约会' },
|
||||
{ value: 'travel', label: '旅行' },
|
||||
{ value: 'sport', label: '运动' },
|
||||
{ value: 'formal', label: '正式场合' }
|
||||
];
|
||||
|
||||
const seasonOptions = [
|
||||
{ value: 'spring', label: '春季' },
|
||||
{ value: 'summer', label: '夏季' },
|
||||
{ value: 'autumn', label: '秋季' },
|
||||
{ value: 'winter', label: '冬季' }
|
||||
];
|
||||
|
||||
const colorOptions = [
|
||||
{ value: 'red', label: '红色' },
|
||||
{ value: 'blue', label: '蓝色' },
|
||||
{ value: 'green', label: '绿色' },
|
||||
{ value: 'yellow', label: '黄色' },
|
||||
{ value: 'purple', label: '紫色' },
|
||||
{ value: 'orange', label: '橙色' },
|
||||
{ value: 'pink', label: '粉色' },
|
||||
{ value: 'brown', label: '棕色' },
|
||||
{ value: 'black', label: '黑色' },
|
||||
{ value: 'white', label: '白色' },
|
||||
{ value: 'gray', label: '灰色' }
|
||||
];
|
||||
|
||||
const confidenceLevelOptions = [
|
||||
{ value: 'Low', label: '低' },
|
||||
{ value: 'Medium', label: '中' },
|
||||
{ value: 'High', label: '高' },
|
||||
{ value: 'Excellent', label: '极佳' }
|
||||
];
|
||||
|
||||
const matchingTypeOptions = [
|
||||
{ value: 'ColorHarmony', label: '颜色和谐' },
|
||||
{ value: 'StyleConsistent', label: '风格一致' },
|
||||
{ value: 'Complementary', label: '互补搭配' },
|
||||
{ value: 'Seasonal', label: '季节搭配' },
|
||||
{ value: 'Occasion', label: '场合搭配' },
|
||||
{ value: 'Trendy', label: '时尚搭配' }
|
||||
];
|
||||
|
||||
const handleFilterChange = (key: keyof SearchFilters, value: any) => {
|
||||
onFiltersChange({
|
||||
...filters,
|
||||
[key]: value
|
||||
});
|
||||
};
|
||||
|
||||
const clearFilters = () => {
|
||||
onFiltersChange({});
|
||||
setSearchText('');
|
||||
};
|
||||
|
||||
const hasActiveFilters = () => {
|
||||
return Object.keys(filters).some(key => {
|
||||
const value = filters[key as keyof SearchFilters];
|
||||
return Array.isArray(value) ? value.length > 0 : value !== undefined && value !== null;
|
||||
});
|
||||
};
|
||||
|
||||
const getActiveFilterCount = () => {
|
||||
let count = 0;
|
||||
Object.keys(filters).forEach(key => {
|
||||
const value = filters[key as keyof SearchFilters];
|
||||
if (Array.isArray(value) && value.length > 0) {
|
||||
count += value.length;
|
||||
} else if (value !== undefined && value !== null) {
|
||||
count += 1;
|
||||
}
|
||||
});
|
||||
return count;
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white border border-gray-200 rounded-lg p-4 space-y-4">
|
||||
{/* 搜索栏和展开按钮 */}
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className="flex-1 relative">
|
||||
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
||||
<MagnifyingGlassIcon className="h-5 w-5 text-gray-400" />
|
||||
</div>
|
||||
<input
|
||||
type="text"
|
||||
value={searchText}
|
||||
onChange={(e) => setSearchText(e.target.value)}
|
||||
placeholder="搜索搭配..."
|
||||
className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:placeholder-gray-400 focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setIsExpanded(!isExpanded)}
|
||||
className={`inline-flex items-center px-3 py-2 border border-gray-300 rounded-md text-sm font-medium ${
|
||||
hasActiveFilters()
|
||||
? 'text-indigo-700 bg-indigo-50 border-indigo-300'
|
||||
: 'text-gray-700 bg-white hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
<FunnelIcon className="h-4 w-4 mr-1" />
|
||||
筛选
|
||||
{hasActiveFilters() && (
|
||||
<span className="ml-1 inline-flex items-center justify-center px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
|
||||
{getActiveFilterCount()}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={onSearch}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
|
||||
>
|
||||
搜索
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* 展开的筛选面板 */}
|
||||
{isExpanded && (
|
||||
<div className="border-t border-gray-200 pt-4 space-y-4">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
{/* 服装类别 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
服装类别
|
||||
</label>
|
||||
<CustomMultiSelect
|
||||
options={categoryOptions}
|
||||
value={filters.categories || []}
|
||||
onChange={(value) => handleFilterChange('categories', value)}
|
||||
placeholder="选择类别"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 风格 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
风格
|
||||
</label>
|
||||
<CustomMultiSelect
|
||||
options={styleOptions}
|
||||
value={filters.styles || []}
|
||||
onChange={(value) => handleFilterChange('styles', value)}
|
||||
placeholder="选择风格"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 场合 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
适用场合
|
||||
</label>
|
||||
<CustomMultiSelect
|
||||
options={occasionOptions}
|
||||
value={filters.occasions || []}
|
||||
onChange={(value) => handleFilterChange('occasions', value)}
|
||||
placeholder="选择场合"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 季节 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
适用季节
|
||||
</label>
|
||||
<CustomMultiSelect
|
||||
options={seasonOptions}
|
||||
value={filters.seasons || []}
|
||||
onChange={(value) => handleFilterChange('seasons', value)}
|
||||
placeholder="选择季节"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 颜色 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
主要颜色
|
||||
</label>
|
||||
<CustomMultiSelect
|
||||
options={colorOptions}
|
||||
value={filters.colors || []}
|
||||
onChange={(value) => handleFilterChange('colors', value)}
|
||||
placeholder="选择颜色"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 搭配类型 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
搭配类型
|
||||
</label>
|
||||
<CustomMultiSelect
|
||||
options={matchingTypeOptions}
|
||||
value={filters.matchingTypes || []}
|
||||
onChange={(value) => handleFilterChange('matchingTypes', value)}
|
||||
placeholder="选择搭配类型"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 评分和置信度 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{/* 最低评分 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
最低评分
|
||||
</label>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.1"
|
||||
value={filters.minScore || 0}
|
||||
onChange={(e) => handleFilterChange('minScore', parseFloat(e.target.value))}
|
||||
className="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
|
||||
/>
|
||||
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
||||
<span>0.0</span>
|
||||
<span className="font-medium">{(filters.minScore || 0).toFixed(1)}</span>
|
||||
<span>1.0</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 置信度等级 */}
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
置信度等级
|
||||
</label>
|
||||
<CustomSelect
|
||||
options={confidenceLevelOptions}
|
||||
value={filters.confidenceLevel || ''}
|
||||
onChange={(value) => handleFilterChange('confidenceLevel', value)}
|
||||
placeholder="选择置信度等级"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 */}
|
||||
<div className="flex justify-between items-center pt-4 border-t border-gray-200">
|
||||
<button
|
||||
onClick={clearFilters}
|
||||
className="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
disabled={!hasActiveFilters()}
|
||||
>
|
||||
<XMarkIcon className="h-4 w-4 mr-1" />
|
||||
清空筛选
|
||||
</button>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
onClick={() => setIsExpanded(false)}
|
||||
className="inline-flex items-center px-3 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50"
|
||||
>
|
||||
收起
|
||||
</button>
|
||||
<button
|
||||
onClick={onSearch}
|
||||
className="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
|
||||
>
|
||||
应用筛选
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OutfitSearchPanel;
|
||||
Reference in New Issue
Block a user