Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-01-26 19:09:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: use directory path instead of glob for oxfmt

Browse Source
This commit is contained in:
Alexander Brown
2026-01-19 16:33:16 -08:00
parent e7ce294aeb
commit 261fb1b34d
33 changed files with 267 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.claude/commands/create-hotfix-release.md
View File

@@ -353,6 +353,7 @@ python main.py --front-end-version Comfy-Org/ComfyUI_frontend@${NEW_VERSION}
- Fix: [Brief description of hotfixes included]
EOF
)"
```
```

6
.github/workflows/ci-lint-format.yaml vendored
View File

@@ -42,7 +42,7 @@ jobs:
- name: Run Stylelint with auto-fix
run: pnpm stylelint:fix
- name: Run Prettier with auto-format
- name: Run oxfmt with auto-format
run: pnpm format
- name: Check for changes
@@ -60,7 +60,7 @@ jobs:
git config --local user.email "action@github.com"
git config --local user.name "GitHub Action"
git add .
git commit -m "[automated] Apply ESLint and Prettier fixes"
git commit -m "[automated] Apply ESLint and oxfmt fixes"
git push
- name: Final validation
@@ -80,7 +80,7 @@ jobs:
issue_number: context.issue.number,
owner: context.repo.owner,
repo: context.repo.repo,
body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- Prettier formatting'
body: '## 🔧 Auto-fixes Applied\n\nThis PR has been automatically updated to fix linting and formatting issues.\n\n**⚠️ Important**: Your local branch is now behind. Run `git pull` before making additional changes to avoid conflicts.\n\n### Changes made:\n- ESLint auto-fixes\n- oxfmt formatting'
})
- name: Comment on PR about manual fix needed

13
apps/desktop-ui/src/components/bottomPanel/tabs/terminal/BaseTerminal.vue
View File

@@ -1,10 +1,13 @@
<template>
<div
ref="rootEl"
class="relative overflow-hidden h-full w-full bg-neutral-900"
class="relative h-full w-full overflow-hidden bg-neutral-900"
>
<div class="p-terminal rounded-none h-full w-full p-2">
<div ref="terminalEl" class="h-full terminal-host" />
<div class="p-terminal h-full w-full rounded-none p-2">
<div
ref="terminalEl"
class="terminal-host h-full"
/>
</div>
<Button
v-tooltip.left="{
@@ -16,7 +19,7 @@
size="small"
:class="
cn('absolute top-2 right-8 transition-opacity', {
'opacity-0 pointer-events-none select-none': !isHovered
'pointer-events-none opacity-0 select-none': !isHovered
})
"
:aria-label="tooltipText"
@@ -108,6 +111,6 @@ onUnmounted(() => {
}
:deep(.p-terminal) .xterm-screen {
@apply bg-neutral-900 overflow-hidden;
@apply overflow-hidden bg-neutral-900;
}
</style>

12
apps/desktop-ui/src/components/common/LanguageSelector.vue
View File

@@ -13,13 +13,19 @@
>
<template #value="{ value }">
<span :class="valueClass">
<i class="pi pi-language" :class="iconClass" />
<i
class="pi pi-language"
:class="iconClass"
/>
<span>{{ displayLabel(value as SupportedLocale) }}</span>
</span>
</template>
<template #option="{ option }">
<span :class="optionClass">
<i class="pi pi-language" :class="iconClass" />
<i
class="pi pi-language"
:class="iconClass"
/>
<span class="leading-none">{{ option.label }}</span>
</span>
</template>
@@ -202,6 +208,6 @@ async function onLocaleChange(event: SelectChangeEvent) {
}
:deep(.p-dropdown) {
@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-yellow/60 focus-visible:ring-offset-2;
@apply focus-visible:ring-2 focus-visible:ring-brand-yellow/60 focus-visible:ring-offset-2 focus-visible:outline-none;
}
</style>

12
apps/desktop-ui/src/components/common/RefreshButton.vue
View File

@@ -12,7 +12,7 @@
-->
<template>
<Button
class="relative p-button-icon-only"
class="p-button-icon-only relative"
:outlined="outlined"
:severity="severity"
:disabled="active || disabled"
@@ -23,8 +23,14 @@
:class="{ 'opacity-0': active }"
data-pc-section="icon"
/>
<span class="p-button-label" data-pc-section="label">&nbsp;</span>
<ProgressSpinner v-show="active" class="absolute w-1/2 h-1/2" />
<span
class="p-button-label"
data-pc-section="label"
>&nbsp;</span>
<ProgressSpinner
v-show="active"
class="absolute h-1/2 w-1/2"
/>
</Button>
</template>

9
apps/desktop-ui/src/components/common/StartupDisplay.vue
View File

@@ -7,7 +7,7 @@
src="/assets/images/comfy-brand-mark.svg"
:alt="t('g.logoAlt')"
class="w-60"
/>
>
</div>
<!-- Bottom container: Progress and text -->
<div class="flex flex-col items-center justify-center gap-4">
@@ -16,10 +16,13 @@
:mode="progressMode"
:value="progressPercentage ?? 0"
:show-value="false"
class="w-90 h-2 mt-8"
class="mt-8 h-2 w-90"
:pt="{ value: { class: 'bg-brand-yellow' } }"
/>
<h1 v-if="title" class="font-inter font-bold text-3xl text-neutral-300">
<h1
v-if="title"
class="font-inter text-3xl font-bold text-neutral-300"
>
{{ title }}
</h1>
<p

4
apps/desktop-ui/src/components/common/UrlInput.vue
View File

@@ -12,9 +12,9 @@
:class="{
'pi pi-spin pi-spinner text-neutral-400':
validationState === ValidationState.LOADING,
'pi pi-check text-green-500 cursor-pointer':
'pi pi-check cursor-pointer text-green-500':
validationState === ValidationState.VALID,
'pi pi-times text-red-500 cursor-pointer':
'pi pi-times cursor-pointer text-red-500':
validationState === ValidationState.INVALID
}"
@click="validateUrl(props.modelValue)"

26
apps/desktop-ui/src/components/install/DesktopSettingsConfiguration.vue
View File

@@ -1,23 +1,23 @@
<template>
<div class="flex flex-col gap-6 w-[600px]">
<div class="flex w-[600px] flex-col gap-6">
<div class="flex flex-col gap-4">
<h2 class="text-2xl font-semibold text-neutral-100">
{{ $t('install.desktopAppSettings') }}
</h2>
<p class="text-neutral-400 my-0">
<p class="my-0 text-neutral-400">
{{ $t('install.desktopAppSettingsDescription') }}
</p>
</div>
<div class="flex flex-col bg-neutral-800 p-4 rounded-lg text-sm">
<div class="flex flex-col rounded-lg bg-neutral-800 p-4 text-sm">
<!-- Auto Update Setting -->
<div class="flex items-center gap-4">
<div class="flex-1">
<h3 class="text-lg font-medium text-neutral-100">
{{ $t('install.settings.autoUpdate') }}
</h3>
<p class="text-neutral-400 mt-1">
<p class="mt-1 text-neutral-400">
{{ $t('install.settings.autoUpdateDescription') }}
</p>
</div>
@@ -35,7 +35,10 @@
<p class="text-neutral-400">
{{ $t('install.settings.allowMetricsDescription') }}
</p>
<a href="#" @click.prevent="showMetricsInfo">
<a
href="#"
@click.prevent="showMetricsInfo"
>
{{ $t('install.settings.learnMoreAboutData') }}
</a>
</div>
@@ -52,10 +55,10 @@
class="select-none"
>
<div class="text-neutral-300">
<h4 class="font-medium mb-2">
<h4 class="mb-2 font-medium">
{{ $t('install.settings.dataCollectionDialog.whatWeCollect') }}
</h4>
<ul class="list-disc pl-6 space-y-1">
<ul class="list-disc space-y-1 pl-6">
<li>
{{
$t('install.settings.dataCollectionDialog.collect.errorReports')
@@ -73,10 +76,10 @@
</li>
</ul>
<h4 class="font-medium mt-4 mb-2">
<h4 class="mt-4 mb-2 font-medium">
{{ $t('install.settings.dataCollectionDialog.whatWeDoNotCollect') }}
</h4>
<ul class="list-disc pl-6 space-y-1">
<ul class="list-disc space-y-1 pl-6">
<li>
{{
$t(
@@ -108,7 +111,10 @@
</ul>
<div class="mt-4">
<a href="https://comfy.org/privacy" target="_blank">
<a
href="https://comfy.org/privacy"
target="_blank"
>
{{ $t('install.settings.dataCollectionDialog.viewFullPolicy') }}
</a>
</div>

22
apps/desktop-ui/src/components/install/HardwareOption.vue
View File

@@ -4,7 +4,7 @@
<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',
'hardware-option flex h-[190px] w-[170px] flex-col items-center rounded-3xl border-4 bg-neutral-900/70 p-5 transition-all duration-200',
selected ? 'border-solid border-brand-yellow' : 'border-transparent'
)
"
@@ -12,24 +12,32 @@
>
<!-- 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"
class="icon-container flex h-[110px] w-[110px] shrink-0 items-center justify-center overflow-hidden rounded-2xl bg-neutral-800"
>
<img
v-if="imagePath"
:src="imagePath"
:alt="placeholderText"
class="w-full h-full object-cover"
class="h-full w-full object-cover"
style="object-position: 57% center"
draggable="false"
/>
<span v-else class="text-xl font-medium text-neutral-400">
>
<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
v-if="subtitle"
class="mt-4 text-center"
>
<div class="text-sm text-neutral-500">
{{ subtitle }}
</div>
</div>
</button>
</div>

25
apps/desktop-ui/src/components/install/InstallFooter.vue
View File

@@ -6,20 +6,31 @@
: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"
class="justify-self-start rounded-lg border-0 px-6 py-2 font-inter"
@click="$emit('previous')"
/>
<div v-else></div>
<div v-else />
<!-- Step indicators in center -->
<StepList class="flex justify-center items-center gap-3 select-none">
<Step value="1" :pt="stepPassthrough">
<StepList class="flex items-center justify-center gap-3 select-none">
<Step
value="1"
:pt="stepPassthrough"
>
{{ $t('install.gpu') }}
</Step>
<Step value="2" :disabled="disableLocationStep" :pt="stepPassthrough">
<Step
value="2"
:disabled="disableLocationStep"
:pt="stepPassthrough"
>
{{ $t('install.installLocation') }}
</Step>
<Step value="3" :disabled="disableSettingsStep" :pt="stepPassthrough">
<Step
value="3"
:disabled="disableSettingsStep"
:pt="stepPassthrough"
>
{{ $t('install.desktopSettings') }}
</Step>
</StepList>
@@ -27,7 +38,7 @@
<!-- 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"
class="justify-self-end rounded-lg border-0 bg-brand-yellow px-8 py-2 font-inter transition-colors hover:bg-brand-yellow/90"
:pt="{
label: { class: 'text-neutral-900 font-inter font-black' }
}"

40
apps/desktop-ui/src/components/install/InstallLocationPicker.vue
View File

@@ -1,12 +1,12 @@
<template>
<div class="flex flex-col gap-8 w-full max-w-3xl mx-auto select-none">
<div class="mx-auto flex w-full max-w-3xl flex-col gap-8 select-none">
<!-- Installation Path Section -->
<div class="grow flex flex-col gap-6 text-neutral-300">
<h2 class="font-inter font-bold text-3xl text-neutral-100 text-center">
<div class="flex grow flex-col gap-6 text-neutral-300">
<h2 class="text-center font-inter text-3xl font-bold text-neutral-100">
{{ $t('install.locationPicker.title') }}
</h2>
<p class="text-center text-neutral-400 px-12">
<p class="px-12 text-center text-neutral-400">
{{ $t('install.locationPicker.subtitle') }}
</p>
@@ -15,7 +15,7 @@
<InputText
v-model="installPath"
:placeholder="$t('install.locationPicker.pathPlaceholder')"
class="flex-1 bg-neutral-800/50 border-neutral-700 text-neutral-200 placeholder:text-neutral-500"
class="flex-1 border-neutral-700 bg-neutral-800/50 text-neutral-200 placeholder:text-neutral-500"
:class="{ 'p-invalid': pathError }"
@update:model-value="validatePath"
@focus="onFocus"
@@ -23,24 +23,35 @@
<Button
icon="pi pi-folder-open"
severity="secondary"
class="bg-neutral-700 hover:bg-neutral-600 border-0"
class="border-0 bg-neutral-700 hover:bg-neutral-600"
@click="browsePath"
/>
</div>
<!-- Error Messages -->
<div v-if="pathError || pathExists || nonDefaultDrive" class="px-12">
<div
v-if="pathError || pathExists || nonDefaultDrive"
class="px-12"
>
<Message
v-if="pathError"
severity="error"
class="whitespace-pre-line w-full"
class="w-full whitespace-pre-line"
>
{{ pathError }}
</Message>
<Message v-if="pathExists" severity="warn" class="w-full">
<Message
v-if="pathExists"
severity="warn"
class="w-full"
>
{{ $t('install.pathExists') }}
</Message>
<Message v-if="nonDefaultDrive" severity="warn" class="w-full">
<Message
v-if="nonDefaultDrive"
severity="warn"
class="w-full"
>
{{ $t('install.nonDefaultDrive') }}
</Message>
</div>
@@ -88,7 +99,10 @@
v-for="([item, modelValue], index) in mirrors"
:key="item.settingId + item.mirror"
>
<Divider v-if="index > 0" class="my-8" />
<Divider
v-if="index > 0"
class="my-8"
/>
<MirrorItem
v-model="modelValue.value"
@@ -279,7 +293,7 @@ const onFocus = async () => {
}
.p-accordionheader {
@apply bg-neutral-800/50 border-0 rounded-xl mt-2 hover:bg-neutral-700/50;
@apply mt-2 rounded-xl border-0 bg-neutral-800/50 hover:bg-neutral-700/50;
transition:
background-color 0.2s ease,
border-radius 0.5s ease;
@@ -299,7 +313,7 @@ const onFocus = async () => {
}
.p-accordioncontent {
@apply bg-neutral-800/50 border-0 rounded-b-xl rounded-t-none;
@apply rounded-t-none rounded-b-xl border-0 bg-neutral-800/50;
}
.p-accordioncontent-content {

36
apps/desktop-ui/src/components/install/MigrationPicker.vue
View File

@@ -1,8 +1,8 @@
<template>
<div class="flex flex-col gap-6 w-[600px]">
<div class="flex w-[600px] flex-col gap-6">
<!-- Source Location Section -->
<div class="flex flex-col gap-4">
<p class="text-neutral-400 my-0">
<p class="my-0 text-neutral-400">
{{ $t('install.migrationSourcePathDescription') }}
</p>
@@ -14,17 +14,27 @@
:class="{ 'p-invalid': pathError }"
@update:model-value="validateSource"
/>
<Button icon="pi pi-folder" class="w-12" @click="browsePath" />
<Button
icon="pi pi-folder"
class="w-12"
@click="browsePath"
/>
</div>
<Message v-if="pathError" severity="error">
<Message
v-if="pathError"
severity="error"
>
{{ pathError }}
</Message>
</div>
<!-- Migration Options -->
<div v-if="isValidSource" class="flex flex-col gap-4 p-4 rounded-lg">
<h3 class="text-lg mt-0 font-medium text-neutral-100">
<div
v-if="isValidSource"
class="flex flex-col gap-4 rounded-lg p-4"
>
<h3 class="mt-0 text-lg font-medium text-neutral-100">
{{ $t('install.selectItemsToMigrate') }}
</h3>
@@ -32,7 +42,7 @@
<div
v-for="item in migrationItems"
:key="item.id"
class="flex items-center gap-3 p-2 hover:bg-neutral-700 rounded"
class="flex items-center gap-3 rounded p-2 hover:bg-neutral-700"
@click="item.selected = !item.selected"
>
<Checkbox
@@ -42,10 +52,13 @@
@click.stop
/>
<div>
<label :for="item.id" class="text-neutral-200 font-medium">
<label
:for="item.id"
class="font-medium text-neutral-200"
>
{{ item.label }}
</label>
<p class="text-sm text-neutral-400 my-1">
<p class="my-1 text-sm text-neutral-400">
{{ item.description }}
</p>
</div>
@@ -54,7 +67,10 @@
</div>
<!-- Skip Migration -->
<div v-else class="text-neutral-400 italic">
<div
v-else
class="text-neutral-400 italic"
>
{{ $t('install.migrationOptional') }}
</div>
</div>

24
apps/desktop-ui/src/components/install/mirror/MirrorItem.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="flex flex-col gap-4 text-neutral-400 text-sm">
<div class="flex flex-col gap-4 text-sm text-neutral-400">
<div>
<h3 class="text-lg font-medium text-neutral-100 mb-3 mt-0">
<h3 class="mt-0 mb-3 text-lg font-medium text-neutral-100">
{{ $t(`settings.${normalizedSettingId}.name`) }}
</h3>
<p class="my-1">
@@ -16,8 +16,14 @@
"
@state-change="validationState = $event"
/>
<div v-if="secondParagraph" class="mt-2">
<a href="#" @click.prevent="showDialog = true">
<div
v-if="secondParagraph"
class="mt-2"
>
<a
href="#"
@click.prevent="showDialog = true"
>
{{ $t('g.learnMore') }}
</a>
@@ -26,12 +32,14 @@
modal
dismissable-mask
:header="$t(`settings.${normalizedSettingId}.urlFormatTitle`)"
class="select-none max-w-3xl"
class="max-w-3xl select-none"
>
<div class="text-neutral-300">
<p class="mt-1 whitespace-pre-wrap">{{ secondParagraph }}</p>
<p class="mt-1 whitespace-pre-wrap">
{{ secondParagraph }}
</p>
<div class="mt-2 break-all">
<span class="text-neutral-300 font-semibold">
<span class="font-semibold text-neutral-300">
{{ EXAMPLE_URL_FIRST_PART }}
</span>
<span>{{ EXAMPLE_URL_SECOND_PART }}</span>
@@ -40,7 +48,7 @@
<p>
{{ $t(`settings.${normalizedSettingId}.fileUrlDescription`) }}
</p>
<span class="text-neutral-300 font-semibold">
<span class="font-semibold text-neutral-300">
{{ FILE_URL_SCHEME }}
</span>
<span>

4
apps/desktop-ui/src/components/maintenance/TaskCard.vue
View File

@@ -18,7 +18,7 @@
v-if="task.headerImg"
:src="task.headerImg"
class="h-full w-full object-contain px-4 pt-4 opacity-25"
/>
>
</template>
<template #title>
{{ task.name }}
@@ -89,7 +89,7 @@ const isExecuting = useMinLoadingDurationRef(reactiveExecuting, 250)
@reference '../../assets/css/style.css';
.task-card-ok {
@apply text-green-500 absolute -right-4 -bottom-4 opacity-100 row-span-full col-span-full transition-opacity;
@apply absolute -right-4 -bottom-4 col-span-full row-span-full text-green-500 opacity-100 transition-opacity;
font-size: 4rem;
text-shadow: 0.25rem 0 0.5rem black;

18
apps/desktop-ui/src/components/maintenance/TaskListItem.vue
View File

@@ -1,20 +1,23 @@
<template>
<tr
class="border-neutral-700 border-solid border-y"
class="border-y border-solid border-neutral-700"
:class="{
'opacity-50': runner.resolved,
'opacity-75': isLoading && runner.resolved
}"
>
<td class="text-center w-16">
<TaskListStatusIcon :state="runner.state" :loading="isLoading" />
<td class="w-16 text-center">
<TaskListStatusIcon
:state="runner.state"
:loading="isLoading"
/>
</td>
<td>
<p class="inline-block">
{{ task.name }}
</p>
<Button
class="inline-block mx-2"
class="mx-2 inline-block"
type="button"
:icon="PrimeIcons.INFO_CIRCLE"
severity="secondary"
@@ -22,11 +25,14 @@
@click="toggle"
/>
<Popover ref="infoPopover" class="block m-1 max-w-64 min-w-32">
<Popover
ref="infoPopover"
class="m-1 block max-w-64 min-w-32"
>
<span class="whitespace-pre-line">{{ task.description }}</span>
</Popover>
</td>
<td class="text-right px-4">
<td class="px-4 text-right">
<Button
:icon="task.button?.icon"
:label="task.button?.text"

4
apps/desktop-ui/src/components/maintenance/TaskListPanel.vue
View File

@@ -4,7 +4,7 @@
<template v-if="filter.tasks.length === 0">
<!-- Empty filter -->
<Divider />
<p class="text-neutral-400 w-full text-center">
<p class="w-full text-center text-neutral-400">
{{ $t('maintenance.allOk') }}
</p>
</template>
@@ -25,7 +25,7 @@
<!-- Display: Cards -->
<template v-else>
<div class="flex flex-wrap justify-evenly gap-8 pad-y my-4">
<div class="pad-y my-4 flex flex-wrap justify-evenly gap-8">
<TaskCard
v-for="task in filter.tasks"
:key="task.id"

6
apps/desktop-ui/src/views/DesktopDialogView.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="w-full h-full flex flex-col rounded-lg p-6 justify-between">
<h1 class="font-inter font-semibold text-xl m-0 italic">
<div class="flex h-full w-full flex-col justify-between rounded-lg p-6">
<h1 class="m-0 font-inter text-xl font-semibold italic">
{{ t(`desktopDialogs.${id}.title`, title) }}
</h1>
<p class="whitespace-pre-wrap">
@@ -46,7 +46,7 @@ const handleButtonClick = async (button: DialogAction) => {
@reference '../assets/css/style.css';
.p-button-secondary {
@apply text-white border-none bg-neutral-600;
@apply border-none bg-neutral-600 text-white;
}
.p-button-secondary:hover {

6
apps/desktop-ui/src/views/DesktopUpdateView.vue
View File

@@ -1,7 +1,7 @@
<template>
<BaseViewTemplate dark>
<div
class="h-screen w-screen grid items-center justify-around overflow-y-auto"
class="grid h-screen w-screen items-center justify-around overflow-y-auto"
>
<div class="relative m-8 text-center">
<!-- Header -->
@@ -13,7 +13,7 @@
<span>{{ t('desktopUpdate.description') }}</span>
</div>
<ProgressSpinner class="m-8 w-48 h-48" />
<ProgressSpinner class="m-8 h-48 w-48" />
<!-- Console button -->
<Button
@@ -64,7 +64,7 @@ onUnmounted(() => electron.Validation.dispose())
@reference '../assets/css/style.css';
.download-bg::before {
@apply m-0 absolute text-muted;
@apply absolute m-0 text-muted;
font-family: 'primeicons', sans-serif;
top: -2rem;
right: 2rem;

4
apps/desktop-ui/src/views/DownloadGitView.vue
View File

@@ -1,7 +1,7 @@
<template>
<BaseViewTemplate>
<div
class="max-w-(--breakpoint-sm) flex flex-col gap-8 p-8 bg-[url('/assets/images/Git-Logo-White.svg')] bg-no-repeat bg-top-right bg-origin-padding"
class="flex max-w-(--breakpoint-sm) flex-col gap-8 bg-[url('/assets/images/Git-Logo-White.svg')] bg-top-right bg-no-repeat bg-origin-padding p-8"
>
<!-- Header -->
<h1 class="mt-24 text-4xl font-bold text-red-500">
@@ -22,7 +22,7 @@
</div>
<!-- Actions -->
<div class="flex gap-4 flex-row-reverse">
<div class="flex flex-row-reverse gap-4">
<Button
:label="$t('downloadGit.gitWebsite')"
icon="pi pi-external-link"

15
apps/desktop-ui/src/views/InstallView.vue
View File

@@ -1,10 +1,10 @@
<template>
<BaseViewTemplate dark>
<!-- Fixed height container with flexbox layout for proper content management -->
<div class="w-full h-full flex flex-col">
<div class="flex h-full w-full flex-col">
<Stepper
v-model:value="currentStep"
class="flex flex-col h-full"
class="flex h-full flex-col"
@update:value="handleStepChange"
>
<!-- Main content area that grows to fill available space -->
@@ -12,7 +12,10 @@
class="flex-1 overflow-auto"
:style="{ scrollbarGutter: 'stable' }"
>
<StepPanel value="1" class="flex">
<StepPanel
value="1"
class="flex"
>
<GpuPicker v-model:device="device" />
</StepPanel>
<StepPanel value="2">
@@ -37,7 +40,7 @@
<!-- Install footer with navigation -->
<InstallFooter
class="w-full max-w-2xl my-6 mx-auto"
class="mx-auto my-6 w-full max-w-2xl"
:current-step
:can-proceed
:disable-location-step="noGpu"
@@ -191,7 +194,7 @@ onMounted(async () => {
/* Remove default padding/margin from StepPanels to make scrollbar flush */
:deep(.p-steppanels) {
@apply p-0 m-0;
@apply m-0 p-0;
}
/* Ensure StepPanel content container has no top/bottom padding */
@@ -209,7 +212,7 @@ onMounted(async () => {
}
:deep(.p-steppanels::-webkit-scrollbar-thumb) {
@apply bg-white/20 rounded-lg border-[4px] border-transparent;
@apply rounded-lg border-[4px] border-transparent bg-white/20;
background-clip: content-box;
}
</style>

28
apps/desktop-ui/src/views/MaintenanceView.vue
View File

@@ -1,21 +1,24 @@
<template>
<BaseViewTemplate dark>
<div
class="min-w-full min-h-full font-sans w-screen h-screen grid justify-around text-neutral-300 bg-neutral-900 dark-theme overflow-y-auto"
class="dark-theme grid h-screen min-h-full w-screen min-w-full justify-around overflow-y-auto bg-neutral-900 font-sans text-neutral-300"
>
<div class="max-w-(--breakpoint-sm) w-screen m-8 relative">
<div class="relative m-8 w-screen max-w-(--breakpoint-sm)">
<!-- Header -->
<h1 class="backspan pi-wrench text-4xl font-bold">
{{ t('maintenance.title') }}
</h1>
<!-- Toolbar -->
<div class="w-full flex flex-wrap gap-4 items-center">
<div class="flex w-full flex-wrap items-center gap-4">
<span class="grow">
{{ t('maintenance.status') }}:
<StatusTag :refreshing="isRefreshing" :error="anyErrors" />
<StatusTag
:refreshing="isRefreshing"
:error="anyErrors"
/>
</span>
<div class="flex gap-4 items-center">
<div class="flex items-center gap-4">
<SelectButton
v-model="displayAsList"
:options="[PrimeIcons.LIST, PrimeIcons.TH_LARGE]"
@@ -48,7 +51,10 @@
</div>
<!-- Unsafe migration warning -->
<div v-if="taskStore.unsafeBasePath" class="my-4">
<div
v-if="taskStore.unsafeBasePath"
class="my-4"
>
<p class="flex items-start gap-3 text-neutral-300">
<Tag
icon="pi pi-exclamation-triangle"
@@ -56,10 +62,10 @@
:value="t('icon.exclamation-triangle')"
/>
<span>
<strong class="block mb-1">
<strong class="mb-1 block">
{{ t('maintenance.unsafeMigration.title') }}
</strong>
<span class="block mb-1">
<span class="mb-1 block">
{{ unsafeReasonText }}
</span>
<span class="block text-sm text-neutral-400">
@@ -71,13 +77,13 @@
<!-- Tasks -->
<TaskListPanel
class="border-neutral-700 border-solid border-x-0 border-y"
class="border-x-0 border-y border-solid border-neutral-700"
:filter
:display-as-list
/>
<!-- Actions -->
<div class="flex justify-between gap-4 flex-row">
<div class="flex flex-row justify-between gap-4">
<Button
:label="t('maintenance.consoleLogs')"
icon="pi pi-desktop"
@@ -227,7 +233,7 @@ onUnmounted(() => electron.Validation.dispose())
}
.backspan::before {
@apply m-0 absolute text-muted;
@apply absolute m-0 text-muted;
font-family: 'primeicons', sans-serif;
top: -2rem;
right: -2rem;

6
apps/desktop-ui/src/views/ManualConfigurationView.vue
View File

@@ -2,7 +2,7 @@
<BaseViewTemplate dark>
<!-- Installation Path Section -->
<div
class="comfy-installer grow flex flex-col gap-4 text-neutral-300 max-w-110"
class="comfy-installer flex max-w-110 grow flex-col gap-4 text-neutral-300"
>
<h2 class="text-2xl font-semibold text-neutral-100">
{{ $t('install.manualConfiguration.title') }}
@@ -29,7 +29,9 @@
</ul>
</div>
<p class="m-1">{{ $t('install.manualConfiguration.createVenv') }}:</p>
<p class="m-1">
{{ $t('install.manualConfiguration.createVenv') }}:
</p>
<Panel :header="t('install.manualConfiguration.virtualEnvironmentPath')">
<span class="font-mono">{{ `${basePath}${sep}.venv${sep}` }}</span>

21
apps/desktop-ui/src/views/MetricsConsentView.vue
View File

@@ -1,8 +1,11 @@
<template>
<BaseViewTemplate dark hide-language-selector>
<div class="h-full p-8 2xl:p-16 flex flex-col items-center justify-center">
<BaseViewTemplate
dark
hide-language-selector
>
<div class="flex h-full flex-col items-center justify-center p-8 2xl:p-16">
<div
class="bg-neutral-800 rounded-lg shadow-lg p-6 w-full max-w-[600px] flex flex-col gap-6"
class="flex w-full max-w-[600px] flex-col gap-6 rounded-lg bg-neutral-800 p-6 shadow-lg"
>
<h2 class="text-3xl font-semibold text-neutral-100">
{{ $t('install.helpImprove') }}
@@ -15,17 +18,19 @@
<a
href="https://comfy.org/privacy"
target="_blank"
class="text-blue-400 hover:text-blue-300 underline"
class="text-blue-400 underline hover:text-blue-300"
>
{{ $t('install.privacyPolicy') }} </a
>.
{{ $t('install.privacyPolicy') }} </a>.
</p>
<div class="flex items-center gap-4">
<ToggleSwitch
v-model="allowMetrics"
aria-describedby="metricsDescription"
/>
<span id="metricsDescription" class="text-neutral-100">
<span
id="metricsDescription"
class="text-neutral-100"
>
{{
allowMetrics
? $t('install.metricsEnabled')
@@ -33,7 +38,7 @@
}}
</span>
</div>
<div class="flex pt-6 justify-end">
<div class="flex justify-end pt-6">
<Button
:label="$t('g.ok')"
icon="pi pi-check"

6
apps/desktop-ui/src/views/NotSupportedView.vue
View File

@@ -6,10 +6,10 @@
class="sad-girl"
src="/assets/images/sad_girl.png"
:alt="$t('notSupported.illustrationAlt')"
/>
>
<div class="no-drag sad-text flex items-center">
<div class="flex flex-col gap-8 p-8 min-w-110">
<div class="flex min-w-110 flex-col gap-8 p-8">
<!-- Header -->
<h1 class="text-4xl font-bold text-red-500">
{{ $t('notSupported.title') }}
@@ -20,7 +20,7 @@
<p class="text-xl">
{{ $t('notSupported.message') }}
</p>
<ul class="list-disc list-inside space-y-1 text-neutral-800">
<ul class="list-inside list-disc space-y-1 text-neutral-800">
<li>{{ $t('notSupported.supportedDevices.macos') }}</li>
<li>{{ $t('notSupported.supportedDevices.windows') }}</li>
</ul>

20
apps/desktop-ui/src/views/ServerStartView.vue
View File

@@ -2,14 +2,20 @@
<BaseViewTemplate dark>
<div class="relative min-h-screen">
<!-- Terminal Background Layer (always visible during loading) -->
<div v-if="!isError" class="fixed inset-0 overflow-hidden z-0">
<div
v-if="!isError"
class="fixed inset-0 z-0 overflow-hidden"
>
<div class="h-full w-full">
<BaseTerminal @created="terminalCreated" />
</div>
</div>
<!-- Semi-transparent overlay -->
<div v-if="!isError" class="fixed inset-0 bg-neutral-900/80 z-5"></div>
<div
v-if="!isError"
class="fixed inset-0 z-5 bg-neutral-900/80"
/>
<!-- Smooth radial gradient overlay -->
<div
@@ -31,7 +37,7 @@
transparent 100%
);
"
></div>
/>
<div class="relative z-10">
<!-- Main startup display using StartupDisplay component -->
@@ -45,9 +51,9 @@
<!-- Error Section (positioned at bottom) -->
<div
v-if="isError"
class="absolute bottom-20 left-0 right-0 flex flex-col items-center gap-4"
class="absolute right-0 bottom-20 left-0 flex flex-col items-center gap-4"
>
<div class="flex gap-4 justify-center">
<div class="flex justify-center gap-4">
<Button
icon="pi pi-flag"
:label="$t('serverStart.reportIssue')"
@@ -71,10 +77,10 @@
<!-- Terminal Output (positioned at bottom when manually toggled in error state) -->
<div
v-if="terminalVisible && isError"
class="absolute bottom-4 left-4 right-4 max-w-4xl mx-auto z-10"
class="absolute right-4 bottom-4 left-4 z-10 mx-auto max-w-4xl"
>
<div
class="bg-neutral-900/95 rounded-lg p-4 border border-neutral-700 h-[300px]"
class="h-[300px] rounded-lg border border-neutral-700 bg-neutral-900/95 p-4"
>
<BaseTerminal @created="terminalCreated" />
</div>

6
apps/desktop-ui/src/views/WelcomeView.vue
View File

@@ -1,6 +1,6 @@
<template>
<BaseViewTemplate dark>
<div class="flex items-center justify-center min-h-screen">
<div class="flex min-h-screen items-center justify-center">
<div class="grid gap-8">
<!-- Top container: Logo -->
<div class="flex items-end justify-center">
@@ -8,13 +8,13 @@
src="/assets/images/comfy-brand-mark.svg"
:alt="$t('g.logoAlt')"
class="w-60"
/>
>
</div>
<!-- Bottom container: Title and button -->
<div class="flex flex-col items-center justify-center gap-4">
<Button
:label="$t('welcome.getStarted')"
class="px-8 mt-4 bg-brand-yellow hover:bg-brand-yellow/90 border-0 rounded-lg transition-colors"
class="mt-4 rounded-lg border-0 bg-brand-yellow px-8 transition-colors hover:bg-brand-yellow/90"
:pt="{
label: { class: 'font-inter text-neutral-900 font-black' }
}"

2
apps/desktop-ui/src/views/layouts/LayoutDefault.vue
View File

@@ -1,5 +1,5 @@
<template>
<main class="w-full h-full overflow-hidden relative">
<main class="relative h-full w-full overflow-hidden">
<router-view />
</main>
</template>

15
apps/desktop-ui/src/views/templates/BaseViewTemplate.vue
View File

@@ -1,22 +1,25 @@
<template>
<div
class="font-sans w-screen h-screen flex flex-col relative"
class="relative flex h-screen w-screen flex-col font-sans"
:class="[
dark
? 'text-neutral-300 bg-neutral-900 dark-theme'
: 'text-neutral-900 bg-neutral-300'
? 'dark-theme bg-neutral-900 text-neutral-300'
: 'bg-neutral-300 text-neutral-900'
]"
>
<div v-if="showLanguageSelector" class="absolute top-6 right-6 z-10">
<div
v-if="showLanguageSelector"
class="absolute top-6 right-6 z-10"
>
<LanguageSelector :variant="variant" />
</div>
<!-- Virtual top menu for native window (drag handle) -->
<div
v-show="isNativeWindow()"
ref="topMenuRef"
class="app-drag w-full h-(--comfy-topbar-height)"
class="app-drag h-(--comfy-topbar-height) w-full"
/>
<div class="grow w-full flex items-center justify-center overflow-auto">
<div class="flex w-full grow items-center justify-center overflow-auto">
<slot />
</div>
</div>

12
package.json
View File

@@ -22,10 +22,10 @@
"dev:no-vue": "cross-env DISABLE_VUE_PLUGINS=true nx serve",
"dev": "nx serve",
"devtools:pycheck": "python3 -m compileall -q tools/devtools",
"format:check:no-cache": "oxfmt './**/*.{js,ts,tsx,vue,mts}' --check",
"format:check": "oxfmt './**/*.{js,ts,tsx,vue,mts}' --check",
"format:no-cache": "oxfmt './**/*.{js,ts,tsx,vue,mts}'",
"format": "oxfmt './**/*.{js,ts,tsx,vue,mts}'",
"format:check:no-cache": "oxfmt . --check",
"format:check": "oxfmt . --check",
"format:no-cache": "oxfmt .",
"format": "oxfmt .",
"json-schema": "tsx scripts/generate-json-schema.ts",
"knip:no-cache": "knip",
"knip": "knip --cache",
@@ -125,14 +125,12 @@
"@nx/vite": "catalog:",
"@pinia/testing": "catalog:",
"@playwright/test": "catalog:",
"@sentry/vite-plugin": "catalog:",
"@storybook/addon-docs": "catalog:",
"@storybook/addon-mcp": "catalog:",
"@storybook/vue3": "catalog:",
"@storybook/vue3-vite": "catalog:",
"@tailwindcss/vite": "catalog:",
"@types/fs-extra": "catalog:",
"@types/jsdom": "catalog:",
"@types/node": "catalog:",
@@ -145,7 +143,6 @@
"@webgpu/types": "catalog:",
"cross-env": "catalog:",
"eslint": "catalog:",
"eslint-import-resolver-typescript": "catalog:",
"eslint-plugin-import-x": "catalog:",
"eslint-plugin-oxlint": "catalog:",
@@ -168,7 +165,6 @@
"oxlint-tsgolint": "catalog:",
"picocolors": "catalog:",
"postcss-html": "catalog:",
"pretty-bytes": "catalog:",
"rollup-plugin-visualizer": "catalog:",
"storybook": "catalog:",

12
packages/design-system/src/icons/README.md
View File

@@ -41,7 +41,7 @@ ComfyUI supports three types of icons that can be used throughout the interface.
<!-- Carbon Icons -->
<!-- With styling -->
<i class="icon-[lucide--save]" class="w-6 h-6 text-blue-500" />
<i class="icon-[lucide--save]" class="h-6 w-6 text-blue-500" />
</template>
```
@@ -176,11 +176,11 @@ No imports needed - icons are auto-discovered!
```vue
<template>
<!-- Size with Tailwind classes -->
<i class="icon-[lucide--plus]" class="w-4 h-4" />
<i class="icon-[lucide--plus]" class="h-4 w-4" />
<!-- 16px -->
<i class="icon-[lucide--plus]" class="w-6 h-6" />
<i class="icon-[lucide--plus]" class="h-6 w-6" />
<!-- 24px (default) -->
<i class="icon-[lucide--plus]" class="w-8 h-8" />
<i class="icon-[lucide--plus]" class="h-8 w-8" />
<!-- 32px -->
<!-- Or text size -->
@@ -232,12 +232,12 @@ Always use `currentColor` in SVGs for automatic theme adaptation:
```vue
<template>
<!-- Before: Inline SVG -->
<svg class="w-6 h-6" viewBox="0 0 24 24">
<svg class="h-6 w-6" viewBox="0 0 24 24">
<path d="..." />
</svg>
<!-- After: Save as custom/my-icon.svg and use -->
<i-comfy:my-icon class="w-6 h-6" />
<i-comfy:my-icon class="h-6 w-6" />
</template>
```

8
src/components/dialog/content/MissingNodesFooter.vue
View File

@@ -20,9 +20,7 @@
size="md"
@click="handleGotItClick"
>
{{
$t('missingNodes.cloud.gotIt')
}}
{{ $t('missingNodes.cloud.gotIt') }}
</Button>
</div>
@@ -35,9 +33,7 @@
variant="textonly"
@click="openManager"
>
{{
$t('g.openManager')
}}
{{ $t('g.openManager') }}
</Button>
<PackInstallButton
v-if="showInstallAllButton"

8
src/components/sidebar/tabs/AssetsSidebarTab.vue
View File

@@ -33,17 +33,13 @@
class="font-inter"
value="output"
>
{{
$t('sideToolbar.labels.generated')
}}
{{ $t('sideToolbar.labels.generated') }}
</Tab>
<Tab
class="font-inter"
value="input"
>
{{
$t('sideToolbar.labels.imported')
}}
{{ $t('sideToolbar.labels.imported') }}
</Tab>
</TabList>
</template>

4
src/platform/assets/components/UploadModelUpgradeModalFooter.vue
View File

@@ -13,9 +13,7 @@
variant="textonly"
@click="emit('close')"
>
{{
$t('g.close')
}}
{{ $t('g.close') }}
</Button>
<Button
variant="secondary"