feat: 集成ComfyUI界面到顶部导航栏

- 更新Navigation组件支持下拉菜单功能
- 添加ComfyUI子菜单，包含V2仪表板、集群管理、工作流测试
- 在App.tsx中添加ComfyUI相关页面路由配置
- 保持旧路由兼容性
- 优化导航交互体验，支持点击外部关闭下拉菜单

功能特性:
- 支持下拉菜单的导航系统
- ComfyUI功能模块化组织
- 响应式设计和动画效果
- 路由状态高亮显示

apps/desktop/src/App.tsx

@@ -38,6 +38,7 @@ import VideoGeneration from './pages/VideoGeneration';
 import { OutfitPhotoGenerationPage } from './pages/OutfitPhotoGeneration';
 import ComfyUIManagement from './pages/ComfyUIManagement';
 import ComfyUIWorkflowTest from './pages/ComfyUIWorkflowTest';
+import { ComfyUIV2Dashboard } from './pages/ComfyUIV2Dashboard';
 import { WorkflowPage } from './pages/WorkflowPage';
 // import CanvasTool from './pages/CanvasTool';
 
@@ -139,6 +140,13 @@ function App() {
               <Route path="/outfit-photo-generation/:projectId/:modelId" element={<OutfitPhotoGenerationPage />} />
 
               <Route path="/workflows" element={<WorkflowPage />} />
+
+              {/* ComfyUI 相关路由 */}
+              <Route path="/comfyui-v2-dashboard" element={<ComfyUIV2Dashboard />} />
+              <Route path="/comfyui-management" element={<ComfyUIManagement />} />
+              <Route path="/comfyui-workflow-test" element={<ComfyUIWorkflowTest />} />
+
+              {/* 保持旧路由兼容性 */}
               <Route path="/comfyui-cluster" element={<ComfyUIManagement />} />
               <Route path="/comfyui-node" element={<ComfyUIWorkflowTest />} />
               <Route path="/tools" element={<Tools />} />

apps/desktop/src/components/Navigation.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import {
   FolderIcon,
@@ -8,25 +8,48 @@ import {
   WrenchScrewdriverIcon,
   SparklesIcon,
   Cog6ToothIcon,
+  RectangleStackIcon,
+  ServerIcon,
+  PlayIcon,
+  ChartBarIcon,
+  ChevronDownIcon,
 } from '@heroicons/react/24/outline';
 
+// 导航项类型定义
+interface NavItem {
+  name: string;
+  href?: string;
+  icon: React.ComponentType<any>;
+  description: string;
+  children?: NavItem[];
+}
+
 const Navigation: React.FC = () => {
   const location = useLocation();
+  const [openDropdown, setOpenDropdown] = useState<string | null>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
 
-  const navItems = [
+  // 点击外部关闭下拉菜单
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setOpenDropdown(null);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  const navItems: NavItem[] = [
     {
       name: '项目',
       href: '/',
       icon: FolderIcon,
       description: '管理项目和素材'
     },
-    // AI画布暂时隐藏
-    // {
-    //   name: 'AI画布',
-    //   href: '/canvas-tool',
-    //   icon: PaintBrushIcon,
-    //   description: '可视化AI内容生成画布'
-    // },
     {
       name: '模特',
       href: '/models',
@@ -51,6 +74,31 @@ const Navigation: React.FC = () => {
       icon: SparklesIcon,
       description: 'AI穿搭方案推荐与素材检索'
     },
+    {
+      name: 'ComfyUI',
+      icon: RectangleStackIcon,
+      description: 'AI工作流管理平台',
+      children: [
+        {
+          name: 'V2 仪表板',
+          href: '/comfyui-v2-dashboard',
+          icon: ChartBarIcon,
+          description: '现代化AI工作流管理仪表板'
+        },
+        {
+          name: '集群管理',
+          href: '/comfyui-management',
+          icon: ServerIcon,
+          description: '分布式ComfyUI集群管理'
+        },
+        {
+          name: '工作流测试',
+          href: '/comfyui-workflow-test',
+          icon: PlayIcon,
+          description: '工作流测试和调试'
+        }
+      ]
+    },
     {
       name: 'AI工作流',
       href: '/workflows',
@@ -84,6 +132,16 @@ const Navigation: React.FC = () => {
     return location.pathname.startsWith(href);
   };
 
+  // 检查下拉菜单项是否有激活的子项
+  const hasActiveChild = (children: NavItem[]) => {
+    return children.some(child => child.href && isActive(child.href));
+  };
+
+  // 切换下拉菜单
+  const toggleDropdown = (itemName: string) => {
+    setOpenDropdown(openDropdown === itemName ? null : itemName);
+  };
+
   return (
     <nav className="bg-white/95 backdrop-blur-sm shadow-sm border-b border-gray-200/50 sticky top-0 z-50 flex-shrink-0">
       <div className="px-4 sm:px-2 lg:px-4">
@@ -100,16 +158,81 @@ const Navigation: React.FC = () => {
             </div>
           </div>
 
-          <div>
+          <div ref={dropdownRef}>
             <div className="ml-4 flex items-baseline space-x-2">
               {navItems.map((item) => {
                 const Icon = item.icon;
-                const active = isActive(item.href);
+
+                // 如果有子菜单，渲染下拉菜单
+                if (item.children) {
+                  const hasActive = hasActiveChild(item.children);
+                  const isOpen = openDropdown === item.name;
+
+                  return (
+                    <div key={item.name} className="relative">
+                      <button
+                        onClick={() => toggleDropdown(item.name)}
+                        className={`group flex items-center px-2 py-2 rounded-lg text-sm font-medium transition-all duration-200 relative overflow-hidden ${
+                          hasActive
+                            ? 'bg-gradient-to-r from-primary-100 to-primary-200 text-primary-700 shadow-sm'
+                            : 'text-gray-600 hover:text-gray-900 hover:bg-gradient-to-r hover:from-gray-50 hover:to-gray-100'
+                        }`}
+                        title={item.description}
+                      >
+                        {hasActive && (
+                          <div className="absolute inset-0 bg-gradient-to-r from-primary-500/10 to-primary-600/10"></div>
+                        )}
+                        <Icon className={`mr-2 h-5 w-5 relative z-10 transition-all duration-200 ${
+                          hasActive ? 'text-primary-600' : 'text-gray-400 group-hover:text-gray-600 group-hover:scale-110'
+                        }`} />
+                        <span className="relative z-10">{item.name}</span>
+                        <ChevronDownIcon className={`ml-1 h-4 w-4 relative z-10 transition-transform duration-200 ${
+                          isOpen ? 'rotate-180' : ''
+                        } ${hasActive ? 'text-primary-600' : 'text-gray-400 group-hover:text-gray-600'}`} />
+                      </button>
+
+                      {/* 下拉菜单 */}
+                      {isOpen && (
+                        <div className="absolute top-full left-0 mt-1 w-56 bg-white rounded-lg shadow-lg border border-gray-200 py-1 z-50">
+                          {item.children.map((child) => {
+                            const ChildIcon = child.icon;
+                            const childActive = child.href ? isActive(child.href) : false;
+
+                            return (
+                              <Link
+                                key={child.name}
+                                to={child.href || '#'}
+                                className={`group flex items-center px-4 py-2 text-sm transition-all duration-200 ${
+                                  childActive
+                                    ? 'bg-primary-50 text-primary-700'
+                                    : 'text-gray-700 hover:bg-gray-50 hover:text-gray-900'
+                                }`}
+                                title={child.description}
+                                onClick={() => setOpenDropdown(null)}
+                              >
+                                <ChildIcon className={`mr-3 h-4 w-4 transition-all duration-200 ${
+                                  childActive ? 'text-primary-600' : 'text-gray-400 group-hover:text-gray-600'
+                                }`} />
+                                <div>
+                                  <div className="font-medium">{child.name}</div>
+                                  <div className="text-xs text-gray-500 mt-0.5">{child.description}</div>
+                                </div>
+                              </Link>
+                            );
+                          })}
+                        </div>
+                      )}
+                    </div>
+                  );
+                }
+
+                // 普通导航项
+                const active = item.href ? isActive(item.href) : false;
 
                 return (
                   <Link
                     key={item.name}
-                    to={item.href}
+                    to={item.href || '#'}
                     className={`group flex items-center px-2 py-2 rounded-lg text-sm font-medium transition-all duration-200 relative overflow-hidden ${
                       active
                         ? 'bg-gradient-to-r from-primary-100 to-primary-200 text-primary-700 shadow-sm'