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() {
               <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>
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<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>
   );
 };
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 (
+    <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;
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<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>
 
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 {