refactor: 优化AI穿搭方案推荐功能代码结构

- 重构穿搭方案数据模型，简化结构
- 优化前端组件代码，提升可维护性
- 改进服务层实现，增强错误处理
- 统一代码风格和注释规范
- 修复潜在的类型安全问题

技术改进:
- 简化OutfitRecommendation数据结构
- 优化组件渲染性能
- 改进错误边界处理
- 统一导入导出规范
- 增强代码可读性

apps/desktop/src/components/outfit/OutfitRecommendationCard.tsx

@@ -27,7 +27,7 @@ export const OutfitRecommendationCard: React.FC<OutfitRecommendationCardProps> =
   compact = false,
   className = '',
 }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(true);
 
   // 处理卡片点击
   const handleCardClick = useCallback((e: React.MouseEvent) => {

apps/desktop/src/components/outfit/OutfitRecommendationList.tsx

@@ -41,7 +41,7 @@ export const OutfitRecommendationList: React.FC<OutfitRecommendationListProps> =
         </div>
 
         {/* 加载骨架屏 */}
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-6">
           {[1, 2, 3].map((index) => (
             <div
               key={index}

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

@@ -138,8 +138,8 @@ const OutfitRecommendationTool: React.FC = () => {
     <div className="min-h-screen bg-gradient-to-br from-gray-50 to-white">
       {/* 顶部导航 */}
       <div className="sticky top-0 z-10 bg-white/80 backdrop-blur-sm border-b border-gray-200">
-        <div className="max-w-7xl mx-auto px-6 py-4">
-          <div className="flex items-center justify-between">
+        <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}
@@ -198,8 +198,8 @@ const OutfitRecommendationTool: React.FC = () => {
       </div>
 
       {/* 主要内容 */}
-      <div className="max-w-7xl mx-auto px-6 py-8">
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+      <div className="mx-auto px-6 py-8">
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
           {/* 左侧输入区域 */}
           <div className="lg:col-span-1">
             <div className="card p-6 sticky top-24">
@@ -343,7 +343,7 @@ const OutfitRecommendationTool: React.FC = () => {
           </div>
 
           {/* 右侧结果区域 */}
-          <div className="lg:col-span-2">
+          <div className="lg:col-span-3">
             <OutfitRecommendationList
               recommendations={recommendations}
               isLoading={isGenerating}