mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-27 18:24:11 +00:00
380f335bff
This commit integrates the previously recovered ComfyUI Manager functionality with significant enhancements from PR #3367, including: ## Core Manager System Recovery - **v2 API Integration**: All manager endpoints now use `/v2/manager/queue/*` - **Task Queue System**: Complete client-side task queuing with WebSocket status - **Service Layer**: Comprehensive manager service with all CRUD operations - **Store Integration**: Full manager store with progress dialog support ## New Features & Enhancements - **Reactive Feature Flags**: Foundation for dynamic feature toggling - **Enhanced UI Components**: Improved loading states, progress tracking - **Package Management**: Install, update, enable/disable functionality - **Version Selection**: Support for latest/nightly package versions - **Progress Dialogs**: Real-time installation progress with logs - **Missing Node Detection**: Automated detection and installation prompts ## Technical Improvements - **TypeScript Definitions**: Complete type system for manager operations - **WebSocket Integration**: Real-time status updates via `cm-queue-status` - **Error Handling**: Comprehensive error handling with user feedback - **Testing**: Updated test suites for new functionality - **Documentation**: Complete backup documentation for recovery process ## API Endpoints Restored - `manager/queue/start` - Start task queue - `manager/queue/status` - Get queue status - `manager/queue/task` - Queue individual tasks - `manager/queue/install` - Install packages - `manager/queue/update` - Update packages - `manager/queue/disable` - Disable packages ## Breaking Changes - Manager API base URL changed to `/v2/` - Updated TypeScript interfaces for manager operations - New WebSocket message format for queue status This restores all critical manager functionality lost during the previous rebase while integrating the latest enhancements and maintaining compatibility with the current main branch. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
73 lines
2.1 KiB
Vue
73 lines
2.1 KiB
Vue
<template>
|
|
<div v-if="nodePacks?.length" class="flex flex-col items-center mb-6">
|
|
<slot name="thumbnail">
|
|
<PackIcon :node-pack="nodePacks[0]" width="24" height="24" />
|
|
</slot>
|
|
<h2
|
|
class="text-2xl font-bold text-center mt-4 mb-2"
|
|
style="word-break: break-all"
|
|
>
|
|
<slot name="title">
|
|
{{ nodePacks[0].name }}
|
|
</slot>
|
|
</h2>
|
|
<div class="mt-2 mb-4 w-full max-w-xs flex justify-center">
|
|
<slot name="install-button">
|
|
<PackUninstallButton
|
|
v-if="isAllInstalled"
|
|
v-bind="$attrs"
|
|
size="md"
|
|
:node-packs="nodePacks"
|
|
/>
|
|
<PackInstallButton
|
|
v-else
|
|
v-bind="$attrs"
|
|
size="md"
|
|
:is-installing="isInstalling"
|
|
:node-packs="nodePacks"
|
|
/>
|
|
</slot>
|
|
</div>
|
|
</div>
|
|
<div v-else class="flex flex-col items-center mb-6">
|
|
<NoResultsPlaceholder
|
|
:message="$t('manager.status.unknown')"
|
|
:title="$t('manager.tryAgainLater')"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref, watch } from 'vue'
|
|
|
|
import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
|
|
import PackInstallButton from '@/components/dialog/content/manager/button/PackInstallButton.vue'
|
|
import PackUninstallButton from '@/components/dialog/content/manager/button/PackUninstallButton.vue'
|
|
import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
|
|
import { useComfyManagerStore } from '@/stores/comfyManagerStore'
|
|
import { components } from '@/types/comfyRegistryTypes'
|
|
|
|
const { nodePacks } = defineProps<{
|
|
nodePacks: components['schemas']['Node'][]
|
|
}>()
|
|
|
|
const managerStore = useComfyManagerStore()
|
|
|
|
const isAllInstalled = ref(false)
|
|
watch(
|
|
[() => nodePacks, () => managerStore.installedPacks],
|
|
() => {
|
|
isAllInstalled.value = nodePacks.every((nodePack) =>
|
|
managerStore.isPackInstalled(nodePack.id)
|
|
)
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
// Check if any of the packs are currently being installed
|
|
const isInstalling = computed(() => {
|
|
if (!nodePacks?.length) return false
|
|
return nodePacks.some((pack) => managerStore.isPackInstalling(pack.id))
|
|
})
|
|
</script>
|