From 2b209e5ad2bbe3e36d071f61af7930ffead7fd1e Mon Sep 17 00:00:00 2001 From: imeepos Date: Fri, 25 Jul 2025 12:40:11 +0800 Subject: [PATCH] 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. --- apps/desktop/src/App.tsx | 2 + .../similarity/SimilaritySearchPanel.tsx | 33 ++++++++++- apps/desktop/src/data/tools.ts | 17 +++++- .../src/pages/tools/AdvancedFilterTool.tsx | 57 +++++++++++++++++++ .../src/pages/tools/SimilaritySearchTool.tsx | 32 +++++++++++ apps/desktop/src/types/similaritySearch.ts | 3 + 6 files changed, 142 insertions(+), 2 deletions(-) create mode 100644 apps/desktop/src/pages/tools/AdvancedFilterTool.tsx diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx index 17d01ed..01c3617 100644 --- a/apps/desktop/src/App.tsx +++ b/apps/desktop/src/App.tsx @@ -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() { } /> } /> } /> + } /> diff --git a/apps/desktop/src/components/similarity/SimilaritySearchPanel.tsx b/apps/desktop/src/components/similarity/SimilaritySearchPanel.tsx index 12d4492..46514df 100644 --- a/apps/desktop/src/components/similarity/SimilaritySearchPanel.tsx +++ b/apps/desktop/src/components/similarity/SimilaritySearchPanel.tsx @@ -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 = ({ onSuggestionSelect, onSuggestionsToggle, onOutfitRecommendation, + showAdvancedFilters, + onToggleAdvancedFilters, }) => { const inputRef = useRef(null); @@ -198,6 +202,33 @@ export const SimilaritySearchPanel: React.FC = ({ + + {/* 高级过滤器切换按钮 */} + {onToggleAdvancedFilters && ( +
+ +
+ )} ); }; diff --git a/apps/desktop/src/data/tools.ts b/apps/desktop/src/data/tools.ts index d789c08..29b47b9 100644 --- a/apps/desktop/src/data/tools.ts +++ b/apps/desktop/src/data/tools.ts @@ -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' } ]; diff --git a/apps/desktop/src/pages/tools/AdvancedFilterTool.tsx b/apps/desktop/src/pages/tools/AdvancedFilterTool.tsx new file mode 100644 index 0000000..7bbf325 --- /dev/null +++ b/apps/desktop/src/pages/tools/AdvancedFilterTool.tsx @@ -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 ( +
+ {/* 页面头部 */} +
+
+
+
+ + +
+

高级过滤器演示

+

+ 展示和测试高级过滤器组件功能 +

+
+
+ +
+
+ 开发工具 +
+
+
+
+
+ + {/* 主要内容 */} +
+ +
+
+ ); +}; + +export default AdvancedFilterTool; diff --git a/apps/desktop/src/pages/tools/SimilaritySearchTool.tsx b/apps/desktop/src/pages/tools/SimilaritySearchTool.tsx index 2253aa0..fb79b8d 100644 --- a/apps/desktop/src/pages/tools/SimilaritySearchTool.tsx +++ b/apps/desktop/src/pages/tools/SimilaritySearchTool.tsx @@ -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(null); + // 高级过滤器状态 + const [showAdvancedFilters, setShowAdvancedFilters] = useState(false); + const [searchConfig, setSearchConfig] = useState(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} + /> + + {/* 高级过滤器面板 */} + diff --git a/apps/desktop/src/types/similaritySearch.ts b/apps/desktop/src/types/similaritySearch.ts index b6980c4..f306733 100644 --- a/apps/desktop/src/types/similaritySearch.ts +++ b/apps/desktop/src/types/similaritySearch.ts @@ -78,6 +78,9 @@ export interface SimilaritySearchPanelProps { onSuggestionSelect: (suggestion: string) => void; onSuggestionsToggle: (show: boolean) => void; onOutfitRecommendation?: () => void; // 穿搭方案生成回调 + // 高级过滤器控制 + showAdvancedFilters?: boolean; + onToggleAdvancedFilters?: () => void; } export interface SimilaritySearchResultsProps {