mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-10 18:10:08 +00:00
07a74e3cdc
## Summary Extracts desktop UI into apps/desktop-ui package with minimal changes. ## Changes - **What**: - Separates desktop-specific code into standalone package with independent Vite config, router, and i18n - Drastically simplifies the main app router by removing all desktop routes - Adds a some code duplication, most due to the existing design - Some duplication can be refactored to be *simpler* on either side - no need to split things by `isElectron()` - Rudimentary storybook support has been added - **Breaking**: Stacked PR for publishing must be merged before this PR makes it to stable core (but publishing _could_ be done manually) - #5915 - **Dependencies**: Takes full advantage of pnpm catalog. No additional dependencies added. ## Review Focus - Should be no changes to normal frontend operation - Scripts added to root package.json are acceptable - The duplication in this PR is copied as is, wherever possible. Any corrections or fix-ups beyond the scope of simply migrating the functionality as-is, can be addressed in later PRs. That said, if any changes are made, it instantly becomes more difficult to separate the duplicated code out into a shared utility. - Tracking issue to address concerns: #5925 ### i18n Fixing i18n is out of scope for this PR. It is a larger task that we should consider carefully and implement properly. Attempting to isolate the desktop i18n and duplicate the _current_ localisation scripts would be wasted energy.
56 lines
1.5 KiB
Vue
56 lines
1.5 KiB
Vue
<template>
|
|
<div class="relative">
|
|
<!-- Recommended Badge -->
|
|
<button
|
|
:class="
|
|
cn(
|
|
'hardware-option w-[170px] h-[190px] p-5 flex flex-col items-center rounded-3xl transition-all duration-200 bg-neutral-900/70 border-4',
|
|
selected ? 'border-solid border-brand-yellow' : 'border-transparent'
|
|
)
|
|
"
|
|
@click="$emit('click')"
|
|
>
|
|
<!-- Icon/Logo Area - Rounded square container -->
|
|
<div
|
|
class="icon-container w-[110px] h-[110px] shrink-0 rounded-2xl bg-neutral-800 flex items-center justify-center overflow-hidden"
|
|
>
|
|
<img
|
|
v-if="imagePath"
|
|
:src="imagePath"
|
|
:alt="placeholderText"
|
|
class="w-full h-full object-cover"
|
|
style="object-position: 57% center"
|
|
draggable="false"
|
|
/>
|
|
<span v-else class="text-xl font-medium text-neutral-400">
|
|
{{ placeholderText }}
|
|
</span>
|
|
</div>
|
|
|
|
<!-- Text Content -->
|
|
<div v-if="subtitle" class="text-center mt-4">
|
|
<div class="text-sm text-neutral-500">{{ subtitle }}</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { TorchDeviceType } from '@comfyorg/comfyui-electron-types'
|
|
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
interface Props {
|
|
imagePath?: string
|
|
placeholderText: string
|
|
subtitle?: string
|
|
value: TorchDeviceType
|
|
selected?: boolean
|
|
recommended?: boolean
|
|
}
|
|
|
|
defineProps<Props>()
|
|
|
|
defineEmits<{ click: [] }>()
|
|
</script>
|