diff --git a/ComfyUI_vibe/CLAUDE.md b/ComfyUI_vibe/CLAUDE.md index 3c9deacd2..549ad6345 100644 --- a/ComfyUI_vibe/CLAUDE.md +++ b/ComfyUI_vibe/CLAUDE.md @@ -165,19 +165,58 @@ const stats = SystemStatsSchema.parse(response.data) ### 9. File Organization +This project supports **two parallel interface versions**: +- **Interface 1.0 (v1)**: Legacy UI/UX - compatible with current ComfyUI +- **Interface 2.0 (v2)**: Experimental UI/UX - new design patterns + ``` src/ -├── components/ # Reusable Vue components -│ ├── common/ # Generic components (buttons, inputs) -│ ├── layout/ # Layout components (sidebar, header) -│ └── [feature]/ # Feature-specific components -├── composables/ # Vue composition functions -├── services/ # API clients and external services -├── stores/ # Pinia stores -├── types/ # TypeScript type definitions -├── utils/ # Pure utility functions -├── views/ # Page/route components -└── assets/ # Static assets and CSS +├── components/ +│ ├── common/ # Shared components across both versions +│ ├── v1/ # Interface 1.0 components +│ │ ├── canvas/ # Canvas components +│ │ ├── layout/ # Layout components +│ │ └── [feature]/ # Feature-specific components +│ └── v2/ # Interface 2.0 components (experimental) +│ ├── canvas/ # Canvas components +│ ├── dialogs/ # Dialog components +│ ├── layout/ # Layout components +│ ├── nodes/ # Node components +│ │ └── widgets/ # Widget components +│ └── workspace/ # Workspace components +├── composables/ +│ ├── common/ # Shared composables +│ ├── v1/ # V1-specific composables +│ └── v2/ # V2-specific composables +├── services/ # API clients (shared) +├── stores/ # Pinia stores (shared) +├── types/ # TypeScript types (shared) +├── utils/ # Utility functions (shared) +├── data/ # Static data files +├── views/ +│ ├── v1/ # Interface 1.0 views +│ └── v2/ # Interface 2.0 views +│ ├── workspace/ # Workspace sub-views +│ └── project/ # Project sub-views +└── assets/ + └── css/ # Stylesheets +``` + +**Import Patterns:** +```typescript +// V2 components +import CanvasView from '@/components/v2/canvas/CanvasView.vue' + +// V1 components +import CanvasView from '@/components/v1/canvas/CanvasView.vue' + +// Common/shared components +import Button from '@/components/common/Button.vue' + +// Shared services, stores, types (version-agnostic) +import { useComfyStore } from '@/stores/comfyStore' +import { comfyApi } from '@/services/comfyApi' +import type { NodeDefinition } from '@/types/node' ``` ### 10. Naming Conventions diff --git a/ComfyUI_vibe/src/components.d.ts b/ComfyUI_vibe/src/components.d.ts index 1bbdad317..16cc73667 100644 --- a/ComfyUI_vibe/src/components.d.ts +++ b/ComfyUI_vibe/src/components.d.ts @@ -7,26 +7,23 @@ export {} /* prettier-ignore */ declare module 'vue' { export interface GlobalComponents { - CanvasBottomBar: typeof import('./components/canvas/CanvasBottomBar.vue')['default'] - CanvasLeftSidebar: typeof import('./components/canvas/CanvasLeftSidebar.vue')['default'] - CanvasTabBar: typeof import('./components/canvas/CanvasTabBar.vue')['default'] - FlowNode: typeof import('./components/nodes/FlowNode.vue')['default'] - NodeHeader: typeof import('./components/nodes/NodeHeader.vue')['default'] - NodeSlots: typeof import('./components/nodes/NodeSlots.vue')['default'] - NodeWidgets: typeof import('./components/nodes/NodeWidgets.vue')['default'] + CanvasBottomBar: typeof import('./components/v2/canvas/CanvasBottomBar.vue')['default'] + CanvasLeftSidebar: typeof import('./components/v2/canvas/CanvasLeftSidebar.vue')['default'] + CanvasTabBar: typeof import('./components/v2/canvas/CanvasTabBar.vue')['default'] + FlowNode: typeof import('./components/v2/nodes/FlowNode.vue')['default'] + NodeHeader: typeof import('./components/v2/nodes/NodeHeader.vue')['default'] + NodeSlots: typeof import('./components/v2/nodes/NodeSlots.vue')['default'] + NodeWidgets: typeof import('./components/v2/nodes/NodeWidgets.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] - SlotDot: typeof import('./components/nodes/SlotDot.vue')['default'] - WidgetColor: typeof import('./components/nodes/widgets/WidgetColor.vue')['default'] - WidgetNumber: typeof import('./components/nodes/widgets/WidgetNumber.vue')['default'] - WidgetSelect: typeof import('./components/nodes/widgets/WidgetSelect.vue')['default'] - WidgetSlider: typeof import('./components/nodes/widgets/WidgetSlider.vue')['default'] - WidgetText: typeof import('./components/nodes/widgets/WidgetText.vue')['default'] - WidgetToggle: typeof import('./components/nodes/widgets/WidgetToggle.vue')['default'] - WorkspaceLayout: typeof import('./components/layout/WorkspaceLayout.vue')['default'] - WorkspaceSidebar: typeof import('./components/layout/WorkspaceSidebar.vue')['default'] - } - export interface ComponentCustomProperties { - Tooltip: typeof import('primevue/tooltip')['default'] + SlotDot: typeof import('./components/v2/nodes/SlotDot.vue')['default'] + WidgetColor: typeof import('./components/v2/nodes/widgets/WidgetColor.vue')['default'] + WidgetNumber: typeof import('./components/v2/nodes/widgets/WidgetNumber.vue')['default'] + WidgetSelect: typeof import('./components/v2/nodes/widgets/WidgetSelect.vue')['default'] + WidgetSlider: typeof import('./components/v2/nodes/widgets/WidgetSlider.vue')['default'] + WidgetText: typeof import('./components/v2/nodes/widgets/WidgetText.vue')['default'] + WidgetToggle: typeof import('./components/v2/nodes/widgets/WidgetToggle.vue')['default'] + WorkspaceLayout: typeof import('./components/v2/layout/WorkspaceLayout.vue')['default'] + WorkspaceSidebar: typeof import('./components/v2/layout/WorkspaceSidebar.vue')['default'] } } diff --git a/ComfyUI_vibe/src/components/common/.gitkeep b/ComfyUI_vibe/src/components/common/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/ComfyUI_vibe/src/components/v1/canvas/.gitkeep b/ComfyUI_vibe/src/components/v1/canvas/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/ComfyUI_vibe/src/components/v1/dialogs/.gitkeep b/ComfyUI_vibe/src/components/v1/dialogs/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/ComfyUI_vibe/src/components/v1/layout/.gitkeep b/ComfyUI_vibe/src/components/v1/layout/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/ComfyUI_vibe/src/components/v1/nodes/.gitkeep b/ComfyUI_vibe/src/components/v1/nodes/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/ComfyUI_vibe/src/components/v1/nodes/widgets/.gitkeep b/ComfyUI_vibe/src/components/v1/nodes/widgets/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/ComfyUI_vibe/src/components/v1/workspace/.gitkeep b/ComfyUI_vibe/src/components/v1/workspace/.gitkeep new file mode 100644 index 000000000..e69de29bb diff --git a/ComfyUI_vibe/src/components/canvas/CanvasBottomBar.vue b/ComfyUI_vibe/src/components/v2/canvas/CanvasBottomBar.vue similarity index 100% rename from ComfyUI_vibe/src/components/canvas/CanvasBottomBar.vue rename to ComfyUI_vibe/src/components/v2/canvas/CanvasBottomBar.vue diff --git a/ComfyUI_vibe/src/components/canvas/CanvasLeftSidebar.vue b/ComfyUI_vibe/src/components/v2/canvas/CanvasLeftSidebar.vue similarity index 100% rename from ComfyUI_vibe/src/components/canvas/CanvasLeftSidebar.vue rename to ComfyUI_vibe/src/components/v2/canvas/CanvasLeftSidebar.vue diff --git a/ComfyUI_vibe/src/components/canvas/CanvasTabBar.vue b/ComfyUI_vibe/src/components/v2/canvas/CanvasTabBar.vue similarity index 90% rename from ComfyUI_vibe/src/components/canvas/CanvasTabBar.vue rename to ComfyUI_vibe/src/components/v2/canvas/CanvasTabBar.vue index 4dfd30648..20daccbc2 100644 --- a/ComfyUI_vibe/src/components/canvas/CanvasTabBar.vue +++ b/ComfyUI_vibe/src/components/v2/canvas/CanvasTabBar.vue @@ -1,6 +1,7 @@