ComfyUI_frontend/apps/desktop-ui/src/views/DesktopDialogView.vue

<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">
      {{ t(`desktopDialogs.${id}.title`, title) }}
    </h1>
    <p class="whitespace-pre-wrap">
      {{ t(`desktopDialogs.${id}.message`, message) }}
    </p>
    <div class="flex w-full gap-2">
      <Button
        v-for="button in buttons"
        :key="button.label"
        class="rounded-lg first:mr-auto"
        :label="
          t(
            `desktopDialogs.${id}.buttons.${normalizeI18nKey(button.label)}`,
            button.label
          )
        "
        :severity="button.severity ?? 'secondary'"
        @click="handleButtonClick(button)"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { normalizeI18nKey } from '@comfyorg/shared-frontend-utils/formatUtil'
import Button from 'primevue/button'
import { useRoute } from 'vue-router'

import { type DialogAction, getDialog } from '@/constants/desktopDialogs'
import { t } from '@/i18n'
import { electronAPI } from '@/utils/envUtil'

const route = useRoute()
const { id, title, message, buttons } = getDialog(route.params.dialogId)

const handleButtonClick = async (button: DialogAction) => {
  await electronAPI().Dialog.clickButton(button.returnValue)
}
</script>

<style scoped>
@reference '../assets/css/style.css';

.p-button-secondary {
  @apply text-white border-none bg-neutral-600;
}

.p-button-secondary:hover {
  @apply bg-neutral-550;
}

.p-button-secondary:active {
  @apply bg-neutral-500;
}

.p-button-danger {
  @apply bg-coral-red-600;
}

.p-button-danger:hover {
  @apply bg-coral-red-500;
}

.p-button-danger:active {
  @apply bg-coral-red-400;
}
</style>