mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-04 13:12:10 +00:00
61e256c173
Backport of #10116 to core/1.41.
Cherry-picked merge commit 912283a8e2.
Resolved conflict in `src/App.vue` (import deduplication — target branch
already had `electronAPI`, `isDesktop`, `app` imports; merged with new
imports for `useSettingStore`, `useDialogService`, `onUnmounted`;
dropped unused `useI18n`, `watch`, `useToastStore`,
`parsePreloadError`).
Original PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/10116
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10169-backport-core-1-41-feat-add-cloud-notification-modal-for-macOS-desktop-users-3266d73d36508187afd4d5e3e6e7b2fb)
by [Unito](https://www.unito.io)
Co-authored-by: Deep Mehta <42841935+deepme987@users.noreply.github.com>
Co-authored-by: GitHub Action <action@github.com>
116 lines
3.2 KiB
Vue
116 lines
3.2 KiB
Vue
<template>
|
|
<div class="relative grid h-full grid-cols-5">
|
|
<Button
|
|
size="unset"
|
|
variant="muted-textonly"
|
|
class="absolute top-2.5 right-2.5 z-10 size-8 rounded-full p-0 text-white hover:bg-white/20"
|
|
:aria-label="t('g.close')"
|
|
@click="onDismiss"
|
|
>
|
|
<i class="pi pi-times" />
|
|
</Button>
|
|
|
|
<div
|
|
class="relative col-span-2 flex items-center justify-center overflow-hidden rounded-sm"
|
|
>
|
|
<video
|
|
autoplay
|
|
loop
|
|
muted
|
|
playsinline
|
|
class="-ml-[20%] h-full min-w-5/4 object-cover p-0"
|
|
>
|
|
<source
|
|
src="/assets/images/cloud-subscription.webm"
|
|
type="video/webm"
|
|
/>
|
|
</video>
|
|
</div>
|
|
|
|
<div class="col-span-3 flex flex-col justify-between p-8">
|
|
<div>
|
|
<div class="flex flex-col gap-4">
|
|
<div class="text-sm font-semibold text-text-primary">
|
|
{{ t('cloudNotification.title') }}
|
|
</div>
|
|
<p class="m-0 text-sm text-text-secondary">
|
|
{{ t('cloudNotification.message') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="mt-6 flex flex-col items-start gap-0 self-stretch">
|
|
<div v-for="n in 4" :key="n" class="flex items-center gap-2 py-2">
|
|
<i class="pi pi-check text-xs text-text-primary" />
|
|
<span class="text-sm text-text-primary">
|
|
{{ t(`cloudNotification.feature${n}Title`) }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-2 pt-8">
|
|
<Button
|
|
variant="primary"
|
|
size="lg"
|
|
class="w-full font-bold"
|
|
@click="onExplore"
|
|
>
|
|
{{ t('cloudNotification.exploreCloud') }}
|
|
</Button>
|
|
<Button variant="textonly" size="sm" class="w-full" @click="onDismiss">
|
|
{{ t('cloudNotification.continueLocally') }}
|
|
</Button>
|
|
<p class="m-0 text-center text-xs text-text-secondary">
|
|
{{ t('cloudNotification.footer') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onMounted } from 'vue'
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import Button from '@/components/ui/button/Button.vue'
|
|
import { useTelemetry } from '@/platform/telemetry'
|
|
import { useDialogStore } from '@/stores/dialogStore'
|
|
|
|
const { t } = useI18n()
|
|
|
|
onMounted(() => {
|
|
// Impression event — uses trackUiButtonClicked as no dedicated impression tracker exists
|
|
useTelemetry()?.trackUiButtonClicked({
|
|
button_id: 'cloud_notification_modal_impression'
|
|
})
|
|
})
|
|
|
|
function onDismiss() {
|
|
useTelemetry()?.trackUiButtonClicked({
|
|
button_id: 'cloud_notification_continue_locally_clicked'
|
|
})
|
|
useDialogStore().closeDialog()
|
|
}
|
|
|
|
function onExplore() {
|
|
useTelemetry()?.trackUiButtonClicked({
|
|
button_id: 'cloud_notification_explore_cloud_clicked'
|
|
})
|
|
|
|
const params = new URLSearchParams({
|
|
utm_source: 'desktop',
|
|
utm_medium: 'onload-modal',
|
|
utm_campaign: 'local-to-cloud-conversion',
|
|
utm_id: 'desktop-onload-modal',
|
|
utm_source_platform: 'mac-desktop'
|
|
})
|
|
|
|
window.open(
|
|
`https://www.comfy.org/cloud?${params}`,
|
|
'_blank',
|
|
'noopener,noreferrer'
|
|
)
|
|
useDialogStore().closeDialog()
|
|
}
|
|
</script>
|