Add custom nodes manager UI (#2923)

Co-authored-by: github-actions <github-actions@github.com>

src/components/dialog/content/manager/packCard/PackCard.vue

@@ -0,0 +1,103 @@
+<template>
+  <Card
+    class="absolute inset-0 flex flex-col overflow-hidden rounded-2xl shadow-[0_0_15px_rgba(0,0,0,0.15),0_10px_15px_-3px_rgba(0,0,0,0.12),0_4px_6px_-4px_rgba(0,0,0,0.08)] transition-all duration-200"
+    :class="{
+      'bg-[#ffffff08]': !isLightTheme,
+      'outline outline-[6px] outline-[var(--p-primary-color)]': isSelected
+    }"
+    :pt="{
+      body: { class: 'p-0 flex flex-col h-full rounded-2xl' },
+      content: { class: 'flex-1 flex flex-col rounded-2xl' },
+      title: { class: 'p-0 m-0' },
+      footer: { class: 'p-0 m-0' }
+    }"
+  >
+    <template #title>
+      <div class="flex justify-between p-5 pb-1 align-middle text-sm">
+        <span class="flex items-start mt-2">
+          <i
+            class="pi pi-box text-muted text-2xl ml-1 mr-5"
+            style="opacity: 0.5"
+          ></i>
+          <span class="text-lg relative top-[.25rem]">{{
+            $t('manager.nodePack')
+          }}</span>
+        </span>
+        <div class="flex items-center gap-2.5">
+          <div
+            v-if="nodePack.downloads"
+            class="flex items-center text-sm text-muted tracking-tighter"
+          >
+            <i class="pi pi-download mr-2"></i>
+            {{ formatNumber(nodePack.downloads) }}
+          </div>
+          <PackInstallButton />
+        </div>
+      </div>
+    </template>
+    <template #content>
+      <ContentDivider />
+      <div class="flex flex-1 p-5 mt-3 cursor-pointer">
+        <div class="flex-shrink-0 mr-4">
+          <PackIcon :node-pack="nodePack" />
+        </div>
+        <div class="flex flex-col flex-1 min-w-0">
+          <span
+            class="text-lg font-bold pb-4 truncate overflow-hidden text-ellipsis"
+            :title="nodePack.name"
+          >
+            {{ nodePack.name }}
+          </span>
+          <div class="flex-1">
+            <p
+              v-if="nodePack.description"
+              class="text-sm text-color-secondary m-0 line-clamp-3 overflow-hidden"
+              :title="nodePack.description"
+            >
+              {{ nodePack.description }}
+            </p>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #footer>
+      <ContentDivider :width="0.1" />
+      <div class="flex justify-between p-5 text-xs text-muted">
+        <div class="flex items-center gap-2 cursor-pointer">
+          <span v-if="nodePack.publisher?.name">
+            {{ nodePack.publisher.name }}
+          </span>
+          <span v-if="nodePack.latest_version">
+            {{ nodePack.latest_version.version }}
+          </span>
+        </div>
+        <div v-if="nodePack.latest_version" class="flex items-center gap-2">
+          {{ $t('g.updated') }}
+          {{ new Date(nodePack.latest_version.createdAt).toLocaleDateString() }}
+        </div>
+      </div>
+    </template>
+  </Card>
+</template>
+
+<script setup lang="ts">
+import Card from 'primevue/card'
+import { computed } from 'vue'
+
+import ContentDivider from '@/components/common/ContentDivider.vue'
+import PackInstallButton from '@/components/dialog/content/manager/PackInstallButton.vue'
+import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import type { components } from '@/types/comfyRegistryTypes'
+import { formatNumber } from '@/utils/formatUtil'
+
+defineProps<{
+  nodePack: components['schemas']['Node']
+  isSelected?: boolean
+}>()
+
+const colorPaletteStore = useColorPaletteStore()
+const isLightTheme = computed(
+  () => colorPaletteStore.completedActivePalette.light_theme
+)
+</script>

src/components/dialog/content/manager/packCard/PackCardHeader.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="flex flex-col items-center mb-6">
+    <slot name="thumbnail">
+      <PackIcon :node-pack="nodePack" 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">{{ nodePack?.name }}</slot>
+    </h2>
+    <div class="mt-2 mb-4 w-full max-w-xs flex justify-center">
+      <slot name="install-button">
+        <PackInstallButton
+          :full-width="installButtonFullWidth"
+          :multi="multi"
+        />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PackInstallButton from '@/components/dialog/content/manager/PackInstallButton.vue'
+import PackIcon from '@/components/dialog/content/manager/packIcon/PackIcon.vue'
+import { components } from '@/types/comfyRegistryTypes'
+
+defineProps<{
+  nodePack?: components['schemas']['Node']
+  multi?: boolean
+  installButtonFullWidth?: boolean
+}>()
+</script>