mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-31 21:39:54 +00:00
79469bd2b1
* Basic rework of load workflow warning dialog * Better style * Add vue jest support * Mock vue component in jest test * nit * Make dialog maximizable
75 lines
2.1 KiB
Vue
75 lines
2.1 KiB
Vue
<template>
|
|
<ProgressSpinner v-if="isLoading" class="spinner"></ProgressSpinner>
|
|
<BlockUI full-screen :blocked="isLoading" />
|
|
<GlobalDialog />
|
|
<GraphCanvas />
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, markRaw, onMounted, watch } from 'vue'
|
|
import BlockUI from 'primevue/blockui'
|
|
import ProgressSpinner from 'primevue/progressspinner'
|
|
import GraphCanvas from '@/components/graph/GraphCanvas.vue'
|
|
import QueueSideBarTab from '@/components/sidebar/tabs/QueueSideBarTab.vue'
|
|
import { app } from './scripts/app'
|
|
import { useSettingStore } from './stores/settingStore'
|
|
import { useI18n } from 'vue-i18n'
|
|
import { useWorkspaceStore } from './stores/workspaceStateStore'
|
|
import NodeLibrarySideBarTab from './components/sidebar/tabs/NodeLibrarySideBarTab.vue'
|
|
import GlobalDialog from './components/dialog/GlobalDialog.vue'
|
|
|
|
const isLoading = computed<boolean>(() => useWorkspaceStore().spinner)
|
|
const theme = computed<string>(() =>
|
|
useSettingStore().get('Comfy.ColorPalette')
|
|
)
|
|
watch(
|
|
theme,
|
|
(newTheme) => {
|
|
const DARK_THEME_CLASS = 'dark-theme'
|
|
const isDarkTheme = newTheme !== 'light'
|
|
if (isDarkTheme) {
|
|
document.body.classList.add(DARK_THEME_CLASS)
|
|
} else {
|
|
document.body.classList.remove(DARK_THEME_CLASS)
|
|
}
|
|
},
|
|
{ immediate: true }
|
|
)
|
|
|
|
const { t } = useI18n()
|
|
const init = () => {
|
|
useSettingStore().addSettings(app.ui.settings)
|
|
app.extensionManager = useWorkspaceStore()
|
|
app.extensionManager.registerSidebarTab({
|
|
id: 'queue',
|
|
icon: 'pi pi-history',
|
|
title: t('sideToolBar.queue'),
|
|
tooltip: t('sideToolBar.queue'),
|
|
component: markRaw(QueueSideBarTab),
|
|
type: 'vue'
|
|
})
|
|
app.extensionManager.registerSidebarTab({
|
|
id: 'node-library',
|
|
icon: 'pi pi-book',
|
|
title: t('sideToolBar.nodeLibrary'),
|
|
tooltip: t('sideToolBar.nodeLibrary'),
|
|
component: markRaw(NodeLibrarySideBarTab),
|
|
type: 'vue'
|
|
})
|
|
}
|
|
|
|
onMounted(() => {
|
|
try {
|
|
init()
|
|
} catch (e) {
|
|
console.error('Failed to init Vue app', e)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style scoped>
|
|
.spinner {
|
|
@apply absolute inset-0 flex justify-center items-center h-screen;
|
|
}
|
|
</style>
|