feat: 修复素材查看功能并添加详情模态框

修复问题:
- 修复点击查看/查看详情按钮没有反应的问题
- 完善素材选择回调处理逻辑

 新增功能:
- 创建MaterialDetailModal组件，提供完整的素材详情展示
- 支持素材图片查看、下载、分享、收藏功能
- 显示完整的素材信息：基本信息、环境标签、产品详情
- 美观的模态框设计，包含操作按钮和详细信息

 UI优化:
- 高质量的素材详情界面设计
- 支持图片加载状态和错误处理
- 评分标识和AI推荐标识
- 颜色信息可视化显示
- 响应式布局适配

 交互改进:
- 点击查看按钮现在会打开详情模态框
- 支持在新窗口打开原图
- 支持下载和分享功能
- 收藏状态管理

现在用户可以正常查看素材详情了！

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

@@ -15,7 +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';
+import { MaterialSearchPanel, MaterialDetailModal } from '../../components/material';
 
 /**
  * AI穿搭方案推荐小工具
@@ -41,10 +41,9 @@ const OutfitRecommendationTool: React.FC = () => {
   const [showMaterialSearch, setShowMaterialSearch] = useState(false);
   const [selectedRecommendation, setSelectedRecommendation] = useState<OutfitRecommendation | null>(null);
 
-  // 返回工具列表
-  const handleBackToTools = useCallback(() => {
-    navigate('/tools');
-  }, [navigate]);
+  // 素材详情状态
+  const [showMaterialDetail, setShowMaterialDetail] = useState(false);
+  const [selectedMaterial, setSelectedMaterial] = useState<any>(null);
 
   // 生成穿搭方案
   const handleGenerate = useCallback(async () => {
@@ -154,7 +153,14 @@ const OutfitRecommendationTool: React.FC = () => {
   // 处理素材选择
   const handleMaterialSelect = useCallback((material: any) => {
     console.log('选择素材:', material);
-    // 这里可以添加更多的处理逻辑，比如保存到收藏等
+    setSelectedMaterial(material);
+    setShowMaterialDetail(true);
+  }, []);
+
+  // 关闭素材详情
+  const handleCloseMaterialDetail = useCallback(() => {
+    setShowMaterialDetail(false);
+    setSelectedMaterial(null);
   }, []);
 
   return (
@@ -164,14 +170,6 @@ const OutfitRecommendationTool: React.FC = () => {
         <div className="mx-auto px-6 py-4">
           <div className="page-header flex items-center justify-between">
             <div className="flex items-center gap-4">
-              <button
-                onClick={handleBackToTools}
-                className="flex items-center gap-2 px-3 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200"
-              >
-                <ArrowLeft className="w-4 h-4" />
-                <span className="text-sm font-medium">返回工具</span>
-              </button>
-              
               <div className="h-6 w-px bg-gray-300"></div>
               
               <div className="flex items-center gap-3">
@@ -388,6 +386,15 @@ const OutfitRecommendationTool: React.FC = () => {
           onMaterialSelect={handleMaterialSelect}
         />
       )}
+
+      {/* 素材详情模态框 */}
+      {selectedMaterial && (
+        <MaterialDetailModal
+          material={selectedMaterial}
+          isVisible={showMaterialDetail}
+          onClose={handleCloseMaterialDetail}
+        />
+      )}
     </div>
   );
 };