From bae02e6141c3191fc6935d22e6382a172d38e6de Mon Sep 17 00:00:00 2001 From: imeepos Date: Fri, 8 Aug 2025 16:04:52 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9B=86=E6=88=90ComfyUI=E7=95=8C?= =?UTF-8?q?=E9=9D=A2=E5=88=B0=E9=A1=B6=E9=83=A8=E5=AF=BC=E8=88=AA=E6=A0=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 更新Navigation组件支持下拉菜单功能 - 添加ComfyUI子菜单，包含V2仪表板、集群管理、工作流测试 - 在App.tsx中添加ComfyUI相关页面路由配置 - 保持旧路由兼容性 - 优化导航交互体验，支持点击外部关闭下拉菜单 功能特性: - 支持下拉菜单的导航系统 - ComfyUI功能模块化组织 - 响应式设计和动画效果 - 路由状态高亮显示 --- apps/desktop/src/App.tsx | 8 ++ apps/desktop/src/components/Navigation.tsx | 149 +++++++++++++++++++-- 2 files changed, 144 insertions(+), 13 deletions(-) diff --git a/apps/desktop/src/App.tsx b/apps/desktop/src/App.tsx index 498c9c7..2786800 100644 --- a/apps/desktop/src/App.tsx +++ b/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() { } /> } /> + + {/* ComfyUI 相关路由 */} + } /> + } /> + } /> + + {/* 保持旧路由兼容性 */} } /> } /> } /> diff --git a/apps/desktop/src/components/Navigation.tsx b/apps/desktop/src/components/Navigation.tsx index 98dcfc9..8b4ae48 100644 --- a/apps/desktop/src/components/Navigation.tsx +++ b/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; + description: string; + children?: NavItem[]; +} + const Navigation: React.FC = () => { const location = useLocation(); + const [openDropdown, setOpenDropdown] = useState(null); + const dropdownRef = useRef(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 (