mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +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.
80 lines
2.5 KiB
Vue
80 lines
2.5 KiB
Vue
<template>
|
|
<div class="grid grid-cols-[1fr_auto_1fr] items-center gap-4">
|
|
<!-- Back button -->
|
|
<Button
|
|
v-if="currentStep !== '1'"
|
|
:label="$t('g.back')"
|
|
severity="secondary"
|
|
icon="pi pi-arrow-left"
|
|
class="font-inter rounded-lg border-0 px-6 py-2 justify-self-start"
|
|
@click="$emit('previous')"
|
|
/>
|
|
<div v-else></div>
|
|
|
|
<!-- Step indicators in center -->
|
|
<StepList class="flex justify-center items-center gap-3 select-none">
|
|
<Step value="1" :pt="stepPassthrough">
|
|
{{ $t('install.gpu') }}
|
|
</Step>
|
|
<Step value="2" :disabled="disableLocationStep" :pt="stepPassthrough">
|
|
{{ $t('install.installLocation') }}
|
|
</Step>
|
|
<Step value="3" :disabled="disableSettingsStep" :pt="stepPassthrough">
|
|
{{ $t('install.desktopSettings') }}
|
|
</Step>
|
|
</StepList>
|
|
|
|
<!-- Next/Install button -->
|
|
<Button
|
|
:label="currentStep !== '3' ? $t('g.next') : $t('g.install')"
|
|
class="px-8 py-2 bg-brand-yellow hover:bg-brand-yellow/90 font-inter rounded-lg border-0 transition-colors justify-self-end"
|
|
:pt="{
|
|
label: { class: 'text-neutral-900 font-inter font-black' }
|
|
}"
|
|
:disabled="!canProceed"
|
|
@click="currentStep !== '3' ? $emit('next') : $emit('install')"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import type { PassThrough } from '@primevue/core'
|
|
import Button from 'primevue/button'
|
|
import Step, { type StepPassThroughOptions } from 'primevue/step'
|
|
import StepList from 'primevue/steplist'
|
|
|
|
defineProps<{
|
|
/** Current step index as string ('1', '2', '3', '4') */
|
|
currentStep: string
|
|
/** Whether the user can proceed to the next step */
|
|
canProceed: boolean
|
|
/** Whether the location step should be disabled */
|
|
disableLocationStep: boolean
|
|
/** Whether the migration step should be disabled */
|
|
disableMigrationStep: boolean
|
|
/** Whether the settings step should be disabled */
|
|
disableSettingsStep: boolean
|
|
}>()
|
|
|
|
defineEmits<{
|
|
previous: []
|
|
next: []
|
|
install: []
|
|
}>()
|
|
|
|
const stepPassthrough: PassThrough<StepPassThroughOptions> = {
|
|
root: { class: 'flex-none p-0 m-0' },
|
|
header: ({ context }) => ({
|
|
class: [
|
|
'h-2.5 p-0 m-0 border-0 rounded-full transition-all duration-300',
|
|
context.active
|
|
? 'bg-brand-yellow w-8 rounded-sm'
|
|
: 'bg-neutral-700 w-2.5',
|
|
context.disabled ? 'opacity-60 cursor-not-allowed' : ''
|
|
].join(' ')
|
|
}),
|
|
number: { class: 'hidden' },
|
|
title: { class: 'hidden' }
|
|
}
|
|
</script>
|