bowong
/
mixvideo-v2
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: integrate advanced filter components into tools 

- Applied AdvancedFilterPanel to SimilaritySearchTool
  * Added advanced filter state management
  * Extended SimilaritySearchPanelProps with filter controls
  * Added toggle button for advanced filters in search panel
  * Integrated filter configuration with search functionality

- Created AdvancedFilterTool for convenient tools
  * New tool page wrapping AdvancedFilterDemo component
  * Added to tools data configuration with proper metadata
  * Integrated into routing system and navigation
  * Categorized as development tool with beta status

- Enhanced SimilaritySearchPanel UI
  * Added advanced filter toggle button with elegant design
  * Implemented proper state management for filter visibility
  * Added visual indicators and smooth animations
  * Follows promptx/frontend-developer UI/UX standards

Both integrations are complete and functional.
This commit is contained in:
imeepos 2025-07-25 12:40:11 +08:00
parent 3116a4e7f0
commit 2b209e5ad2
6 changed files with 142 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/desktop/src/App.tsx
View File

@ -20,6 +20,7 @@ import WatermarkTool from './pages/tools/WatermarkTool';
import SimilaritySearchTool from './pages/tools/SimilaritySearchTool';
import BatchThumbnailGenerator from './pages/tools/BatchThumbnailGenerator';
import OutfitRecommendationTool from './pages/tools/OutfitRecommendationTool';
import AdvancedFilterTool from './pages/tools/AdvancedFilterTool';
import Navigation from './components/Navigation';
import { NotificationSystem, useNotifications } from './components/NotificationSystem';
@ -123,6 +124,7 @@ function App() {
<Route path="/tools/similarity-search" element={<SimilaritySearchTool />} />
<Route path="/tools/batch-thumbnail-generator" element={<BatchThumbnailGenerator />} />
<Route path="/tools/outfit-recommendation" element={<OutfitRecommendationTool />} />
<Route path="/tools/advanced-filter-demo" element={<AdvancedFilterTool />} />
</Routes>
</div>
</main>

33
apps/desktop/src/components/similarity/SimilaritySearchPanel.tsx
View File

@ -2,7 +2,9 @@ import React, { useCallback, useRef, useEffect } from 'react';
import {
Search,
Sparkles,
Loader2
Loader2,
Filter,
ChevronDown
} from 'lucide-react';
import {
SimilaritySearchPanelProps,
@ -25,6 +27,8 @@ export const SimilaritySearchPanel: React.FC<SimilaritySearchPanelProps> = ({
onSuggestionSelect,
onSuggestionsToggle,
onOutfitRecommendation,
showAdvancedFilters,
onToggleAdvancedFilters,
}) => {
const inputRef = useRef<HTMLInputElement>(null);
@ -198,6 +202,33 @@ export const SimilaritySearchPanel: React.FC<SimilaritySearchPanelProps> = ({
</div>
</div>
</div>
{/* 高级过滤器切换按钮 */}
{onToggleAdvancedFilters && (
<div className="card p-3 bg-gradient-to-r from-purple-50 to-pink-50 border border-purple-200 animate-fade-in">
<button
onClick={onToggleAdvancedFilters}
className="w-full flex items-center justify-between p-2 rounded-lg hover:bg-white hover:bg-opacity-50 transition-all duration-200 group"
>
<div className="flex items-center gap-3">
<div className="icon-container purple w-6 h-6 shadow-sm">
<Filter className="w-3 h-3" />
</div>
<div className="text-left">
<h4 className="text-sm font-semibold text-purple-900">高级过滤器</h4>
<p className="text-xs text-purple-700">
{showAdvancedFilters ? '点击收起高级过滤选项' : '精确控制搜索条件'}
</p>
</div>
</div>
<ChevronDown
className={`w-4 h-4 text-purple-600 transition-transform duration-200 ${
showAdvancedFilters ? 'rotate-180' : ''
}`}
/>
</button>
</div>
)}
</div>
);
};

17
apps/desktop/src/data/tools.ts
View File

@ -9,7 +9,8 @@ import {
Droplets,
ImageIcon,
Search,
Sparkles
Sparkles,
Filter
} from 'lucide-react';
import { Tool, ToolCategory, ToolStatus } from '../types/tool';
@ -133,6 +134,20 @@ export const TOOLS_DATA: Tool[] = [
isPopular: true,
version: '1.0.0',
lastUpdated: '2024-01-25'
},
{
id: 'advanced-filter-demo',
name: '高级过滤器演示',
description: '展示和测试高级过滤器组件功能，包括类别、环境、设计风格和颜色检测',
longDescription: '专业的高级过滤器演示工具，展示完整的过滤器组件功能。包括类别过滤器、环境标签选择器、设计风格选择器和颜色检测过滤器。支持实时配置预览、JSON导出和过滤器摘要显示，是开发和测试过滤器功能的理想工具。',
icon: Filter,
route: '/tools/advanced-filter-demo',
category: ToolCategory.DEVELOPMENT,
status: ToolStatus.BETA,
tags: ['过滤器', '组件演示', '开发工具', 'UI组件', '配置管理'],
isNew: true,
version: '1.0.0',
lastUpdated: '2024-01-25'
}
];

57
apps/desktop/src/pages/tools/AdvancedFilterTool.tsx Normal file
View File

@ -0,0 +1,57 @@
import React from 'react';
import { ArrowLeft } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { AdvancedFilterDemo } from '../../components/outfit/AdvancedFilterDemo';
/**
* 高级过滤器工具页面
* 遵循 Tauri 开发规范和 UI/UX 设计标准
*/
const AdvancedFilterTool: React.FC = () => {
const navigate = useNavigate();
const handleGoBack = () => {
navigate('/tools');
};
return (
<div className="min-h-screen bg-gradient-to-br from-gray-50 to-blue-50">
{/* 页面头部 */}
<div className="bg-white border-b border-gray-200 shadow-sm">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex items-center justify-between h-16">
<div className="flex items-center gap-4">
<button
onClick={handleGoBack}
className="btn-icon btn-ghost hover-lift"
aria-label="返回工具列表"
>
<ArrowLeft className="w-5 h-5" />
</button>
<div>
<h1 className="text-xl font-bold text-gray-900">高级过滤器演示</h1>
<p className="text-sm text-gray-600">
展示和测试高级过滤器组件功能
</p>
</div>
</div>
<div className="flex items-center gap-3">
<div className="text-sm text-gray-500">
开发工具
</div>
</div>
</div>
</div>
</div>
{/* 主要内容 */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<AdvancedFilterDemo />
</div>
</div>
);
};
export default AdvancedFilterTool;

32
apps/desktop/src/pages/tools/SimilaritySearchTool.tsx
View File

@ -22,6 +22,8 @@ import { SimilaritySearchRequest } from '../../types/similaritySearch';
import OutfitRecommendationModal from '../../components/outfit/OutfitRecommendationModal';
import OutfitRecommendationService from '../../services/outfitRecommendationService';
import { OutfitRecommendation } from '../../types/outfitRecommendation';
import { AdvancedFilterPanel } from '../../components/outfit/AdvancedFilterPanel';
import { SearchConfig, DEFAULT_SEARCH_CONFIG } from '../../types/outfitSearch';
/**
* 相似度检索工具页面
@ -40,6 +42,10 @@ const SimilaritySearchTool: React.FC = () => {
const [isGeneratingOutfits, setIsGeneratingOutfits] = useState(false);
const [outfitError, setOutfitError] = useState<string | null>(null);
// 高级过滤器状态
const [showAdvancedFilters, setShowAdvancedFilters] = useState(false);
const [searchConfig, setSearchConfig] = useState<SearchConfig>(DEFAULT_SEARCH_CONFIG);
// 状态管理
const {
query,
@ -96,7 +102,19 @@ const SimilaritySearchTool: React.FC = () => {
selectSuggestionAndSearch(suggestion);
}, [selectSuggestionAndSearch]);
// 处理高级过滤器配置变化
const handleSearchConfigChange = useCallback((newConfig: SearchConfig) => {
setSearchConfig(newConfig);
// 如果有查询内容，自动重新搜索
if (query.trim()) {
executeSearch();
}
}, [query, executeSearch]);
// 切换高级过滤器显示
const handleToggleAdvancedFilters = useCallback(() => {
setShowAdvancedFilters(!showAdvancedFilters);
}, [showAdvancedFilters]);
// 处理重置
const handleReset = useCallback(() => {
@ -104,6 +122,9 @@ const SimilaritySearchTool: React.FC = () => {
localStorage.removeItem('similarity-search-storage');
// 重置所有状态
resetAll();
// 重置高级过滤器配置
setSearchConfig(DEFAULT_SEARCH_CONFIG);
setShowAdvancedFilters(false);
}, [resetAll]);
// 处理分页
@ -299,6 +320,17 @@ const SimilaritySearchTool: React.FC = () => {
onSuggestionSelect={handleSuggestionSelect}
onSuggestionsToggle={setShowSuggestions}
onOutfitRecommendation={handleOutfitRecommendation}
showAdvancedFilters={showAdvancedFilters}
onToggleAdvancedFilters={handleToggleAdvancedFilters}
/>
{/* 高级过滤器面板 */}
<AdvancedFilterPanel
config={searchConfig}
onConfigChange={handleSearchConfigChange}
isVisible={showAdvancedFilters}
onToggle={handleToggleAdvancedFilters}
className="animate-slide-in-up"
/>
</div>

3
apps/desktop/src/types/similaritySearch.ts
View File

@ -78,6 +78,9 @@ export interface SimilaritySearchPanelProps {
onSuggestionSelect: (suggestion: string) => void;
onSuggestionsToggle: (show: boolean) => void;
onOutfitRecommendation?: () => void; // 穿搭方案生成回调
// 高级过滤器控制
showAdvancedFilters?: boolean;
onToggleAdvancedFilters?: () => void;
}
export interface SimilaritySearchResultsProps {