mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
6bb35d46c1
## Summary - Conditionally hide the bottom border of the missing nodes modal content when not running in cloud environment - The footer is not visible in non-cloud environments, so the bottom border was appearing disconnected ## Changes - Added conditional `border-b-1` class based on `isCloud` flag in `MissingNodesContent.vue` - Keeps top border visible in all environments - Bottom border only shows in cloud environment where footer is present ## Test plan - [ ] Open missing nodes dialog in cloud environment - bottom border should be visible - [ ] Open missing nodes dialog in non-cloud environment - bottom border should be hidden - [ ] Verify top border remains visible in both environments ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6779-fix-Conditionally-hide-bottom-border-in-missing-nodes-modal-on-non-cloud-environments-2b16d73d365081cea1c8c98b11878045) by [Unito](https://www.unito.io)
85 lines
2.4 KiB
Vue
85 lines
2.4 KiB
Vue
<template>
|
|
<div
|
|
class="flex w-[490px] flex-col border-t-1 border-border-default"
|
|
:class="isCloud ? 'border-b-1' : ''"
|
|
>
|
|
<div class="flex h-full w-full flex-col gap-4 p-4">
|
|
<!-- Description -->
|
|
<div>
|
|
<p class="m-0 text-sm leading-4 text-muted-foreground">
|
|
{{
|
|
isCloud
|
|
? $t('missingNodes.cloud.description')
|
|
: $t('missingNodes.oss.description')
|
|
}}
|
|
</p>
|
|
</div>
|
|
<MissingCoreNodesMessage v-if="!isCloud" :missing-core-nodes />
|
|
|
|
<!-- Missing Nodes List Wrapper -->
|
|
<div
|
|
class="comfy-missing-nodes flex flex-col max-h-[256px] rounded-lg py-2 scrollbar-custom bg-secondary-background"
|
|
>
|
|
<div
|
|
v-for="(node, i) in uniqueNodes"
|
|
:key="i"
|
|
class="flex min-h-8 items-center justify-between px-4 py-2 bg-secondary-background text-muted-foreground"
|
|
>
|
|
<span class="text-xs">
|
|
{{ node.label }}
|
|
</span>
|
|
<span v-if="node.hint" class="text-xs">{{ node.hint }}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bottom instruction -->
|
|
<div>
|
|
<p class="m-0 text-sm leading-4 text-muted-foreground">
|
|
{{
|
|
isCloud
|
|
? $t('missingNodes.cloud.replacementInstruction')
|
|
: $t('missingNodes.oss.replacementInstruction')
|
|
}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
|
|
import MissingCoreNodesMessage from '@/components/dialog/content/MissingCoreNodesMessage.vue'
|
|
import { isCloud } from '@/platform/distribution/types'
|
|
import type { MissingNodeType } from '@/types/comfy'
|
|
import { useMissingNodes } from '@/workbench/extensions/manager/composables/nodePack/useMissingNodes'
|
|
|
|
const props = defineProps<{
|
|
missingNodeTypes: MissingNodeType[]
|
|
}>()
|
|
|
|
// Get missing core nodes for OSS mode
|
|
const { missingCoreNodes } = useMissingNodes()
|
|
|
|
const uniqueNodes = computed(() => {
|
|
const seenTypes = new Set()
|
|
return props.missingNodeTypes
|
|
.filter((node) => {
|
|
const type = typeof node === 'object' ? node.type : node
|
|
if (seenTypes.has(type)) return false
|
|
seenTypes.add(type)
|
|
return true
|
|
})
|
|
.map((node) => {
|
|
if (typeof node === 'object') {
|
|
return {
|
|
label: node.type,
|
|
hint: node.hint,
|
|
action: node.action
|
|
}
|
|
}
|
|
return { label: node }
|
|
})
|
|
})
|
|
</script>
|