feat: 实现AI穿搭方案推荐素材库检索功能

新增功能:
- 为每个穿搭方案添加素材库检索功能
- 智能生成检索条件基于穿搭方案内容
- 调用Google VET API进行素材检索
- 实现分页展示和导航功能

 架构改进:
- 新增MaterialSearchService前端服务
- 新增material_search_commands后端命令
- 新增material_search数据模型
- 遵循Tauri开发规范的组件设计

 UI/UX优化:
- 美观的素材卡片展示
- 流畅的分页导航体验
- 响应式设计和动画效果
- 遵循promptx/frontend-developer标准

 组件结构:
- MaterialSearchPanel: 素材检索面板
- MaterialSearchResults: 搜索结果列表
- MaterialCard: 素材卡片组件
- MaterialSearchPagination: 分页组件

 技术实现:
- TypeScript类型安全
- React Hooks状态管理
- TailwindCSS样式系统
- 错误处理和加载状态
- 无障碍访问支持

apps/desktop/src/pages/tools/OutfitRecommendationTool.tsx

@@ -15,6 +15,7 @@ import OutfitRecommendationService from '../../services/outfitRecommendationServ
 import { OutfitRecommendation, STYLE_OPTIONS, OCCASION_OPTIONS, SEASON_OPTIONS } from '../../types/outfitRecommendation';
 import OutfitRecommendationList from '../../components/outfit/OutfitRecommendationList';
 import { CustomSelect } from '../../components/CustomSelect';
+import { MaterialSearchPanel } from '../../components/material';
 
 /**
  * AI穿搭方案推荐小工具
@@ -36,6 +37,10 @@ const OutfitRecommendationTool: React.FC = () => {
   const [error, setError] = useState<string | null>(null);
   const [showAdvanced, setShowAdvanced] = useState(false);
 
+  // 素材检索状态
+  const [showMaterialSearch, setShowMaterialSearch] = useState(false);
+  const [selectedRecommendation, setSelectedRecommendation] = useState<OutfitRecommendation | null>(null);
+
   // 返回工具列表
   const handleBackToTools = useCallback(() => {
     navigate('/tools');
@@ -127,13 +132,31 @@ const OutfitRecommendationTool: React.FC = () => {
       return;
     }
 
-    const text = recommendations.map(rec => 
+    const text = recommendations.map(rec =>
       `${rec.title}\n${rec.description}\n风格: ${rec.style_tags.join(', ')}\n\n`
     ).join('');
 
     navigator.clipboard.writeText(text);
   }, [recommendations]);
 
+  // 处理素材检索
+  const handleMaterialSearch = useCallback((recommendation: OutfitRecommendation) => {
+    setSelectedRecommendation(recommendation);
+    setShowMaterialSearch(true);
+  }, []);
+
+  // 关闭素材检索面板
+  const handleCloseMaterialSearch = useCallback(() => {
+    setShowMaterialSearch(false);
+    setSelectedRecommendation(null);
+  }, []);
+
+  // 处理素材选择
+  const handleMaterialSelect = useCallback((material: any) => {
+    console.log('选择素材:', material);
+    // 这里可以添加更多的处理逻辑，比如保存到收藏等
+  }, []);
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-gray-50 to-white">
       {/* 顶部导航 */}
@@ -349,11 +372,22 @@ const OutfitRecommendationTool: React.FC = () => {
               isLoading={isGenerating}
               error={error || undefined}
               onRegenerate={handleRegenerate}
+              onMaterialSearch={handleMaterialSearch}
               className="min-h-[600px]"
             />
           </div>
         </div>
       </div>
+
+      {/* 素材检索面板 */}
+      {selectedRecommendation && (
+        <MaterialSearchPanel
+          recommendation={selectedRecommendation}
+          isVisible={showMaterialSearch}
+          onClose={handleCloseMaterialSearch}
+          onMaterialSelect={handleMaterialSelect}
+        />
+      )}
     </div>
   );
 };