Add BaseViewTemplate (#2094)

src/router.ts

@@ -84,6 +84,12 @@ const router = createRouter({
           name: 'DownloadGitView',
           component: () => import('@/views/DownloadGitView.vue'),
           beforeEnter: guardElectronAccess
+        },
+        {
+          path: 'manual-configuration',
+          name: 'ManualConfigurationView',
+          component: () => import('@/views/ManualConfigurationView.vue'),
+          beforeEnter: guardElectronAccess
         }
       ]
     }

src/views/DownloadGitView.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="font-sans w-screen h-screen mx-0 grid place-items-center justify-center items-center text-neutral-900 bg-neutral-300 pointer-events-auto"
-  >
+  <BaseViewTemplate>
     <div
       class="col-start-1 h-screen row-start-1 place-content-center mx-auto overflow-y-auto"
     >
@@ -44,10 +42,11 @@
         </div>
       </div>
     </div>
-  </div>
+  </BaseViewTemplate>
 </template>
 
 <script setup lang="ts">
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
 import Button from 'primevue/button'
 import { useRouter } from 'vue-router'
 

src/views/InstallView.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="font-sans flex flex-col items-center h-screen m-0 text-neutral-300 bg-neutral-900 dark-theme pointer-events-auto"
-  >
+  <BaseViewTemplate dark>
     <Stepper class="stepper" value="0" @update:value="setHighestStep">
       <StepList class="select-none">
         <Step value="0">
@@ -94,7 +92,7 @@
         </StepPanel>
       </StepPanels>
     </Stepper>
-  </div>
+  </BaseViewTemplate>
 </template>
 
 <script setup lang="ts">
@@ -104,7 +102,7 @@ import StepList from 'primevue/steplist'
 import StepPanels from 'primevue/steppanels'
 import Step from 'primevue/step'
 import StepPanel from 'primevue/steppanel'
-
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
 import InstallLocationPicker from '@/components/install/InstallLocationPicker.vue'
 import MigrationPicker from '@/components/install/MigrationPicker.vue'
 import DesktopSettingsConfiguration from '@/components/install/DesktopSettingsConfiguration.vue'

src/views/ManualConfigurationView.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="flex flex-col select-none font-sans items-center h-screen m-0 text-neutral-300 bg-neutral-900 dark-theme pointer-events-auto"
-  >
+  <BaseViewTemplate dark>
     <!-- Installation Path Section -->
     <div
       class="comfy-installer grow flex flex-col gap-4 text-neutral-300 max-w-110"
@@ -49,13 +47,14 @@
         @click="restartApp('Manual configuration complete')"
       />
     </div>
-  </div>
+  </BaseViewTemplate>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
 import Panel from 'primevue/panel'
 import Tag from 'primevue/tag'
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
 import { electronAPI } from '@/utils/envUtil'
 import { useI18n } from 'vue-i18n'
 import { onMounted, ref } from 'vue'

src/views/NotSupportedView.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="font-sans w-screen h-screen flex items-center justify-around m-0 text-neutral-900 bg-neutral-300 pointer-events-auto"
-  >
+  <BaseViewTemplate>
     <div class="sad-container">
       <!-- Right side image -->
       <img
@@ -54,12 +52,13 @@
         </div>
       </div>
     </div>
-  </div>
+  </BaseViewTemplate>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { useRouter } from 'vue-router'
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
 
 const openDocs = () => {
   window.open(

src/views/ServerStartView.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="font-sans flex flex-col justify-center items-center h-screen m-0 text-neutral-300 bg-neutral-900 dark-theme pointer-events-auto"
-  >
+  <BaseViewTemplate dark class="flex-col">
     <h2 class="text-2xl font-bold">
       {{ t(`serverStart.process.${status}`) }}
       <span v-if="status === ProgressStatus.ERROR">
@@ -40,7 +38,7 @@
       />
     </div>
     <BaseTerminal v-show="terminalVisible" @created="terminalCreated" />
-  </div>
+  </BaseViewTemplate>
 </template>
 
 <script setup lang="ts">
@@ -52,6 +50,7 @@ import { electronAPI } from '@/utils/envUtil'
 import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
 import { Terminal } from '@xterm/xterm'
 import { useI18n } from 'vue-i18n'
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
 
 const electron = electronAPI()
 const { t } = useI18n()

src/views/UserSelectView.vue

@@ -1,9 +1,7 @@
 <template>
-  <div
-    id="comfy-user-selection"
-    class="font-sans flex flex-col items-center h-screen m-0 text-neutral-300 bg-neutral-900 dark-theme pointer-events-auto"
-  >
+  <BaseViewTemplate dark>
     <main
+      id="comfy-user-selection"
       class="mt-[5vh] 2xl:mt-[20vh] min-w-84 relative rounded-lg bg-[var(--comfy-menu-bg)] p-5 px-10 shadow-lg"
     >
       <h1 class="my-2.5 mb-7 font-normal">ComfyUI</h1>
@@ -38,7 +36,7 @@
         </footer>
       </div>
     </main>
-  </div>
+  </BaseViewTemplate>
 </template>
 
 <script setup lang="ts">
@@ -50,6 +48,7 @@ import Message from 'primevue/message'
 import { User, useUserStore } from '@/stores/userStore'
 import { useRouter } from 'vue-router'
 import { computed, onMounted, ref } from 'vue'
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
 
 const userStore = useUserStore()
 const router = useRouter()

src/views/WelcomeView.vue

@@ -1,7 +1,5 @@
 <template>
-  <div
-    class="font-sans flex flex-col justify-center items-center h-screen m-0 text-neutral-300 bg-neutral-900 dark-theme pointer-events-auto"
-  >
+  <BaseViewTemplate dark>
     <div class="flex flex-col items-center justify-center gap-8 p-8">
       <!-- Header -->
       <h1 class="animated-gradient-text text-glow select-none">
@@ -19,12 +17,13 @@
         class="p-4 text-lg fade-in-up"
       />
     </div>
-  </div>
+  </BaseViewTemplate>
 </template>
 
 <script setup lang="ts">
 import Button from 'primevue/button'
 import { useRouter } from 'vue-router'
+import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
 
 const router = useRouter()
 const navigateTo = (path: string) => {

src/views/templates/BaseViewTemplate.vue

@@ -0,0 +1,23 @@
+<template>
+  <div
+    class="font-sans w-screen h-screen flex items-center justify-center pointer-events-auto"
+    :class="[
+      props.dark
+        ? 'text-neutral-300 bg-neutral-900 dark-theme'
+        : 'text-neutral-900 bg-neutral-300'
+    ]"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(
+  defineProps<{
+    dark: boolean
+  }>(),
+  {
+    dark: false
+  }
+)
+</script>

vite.electron.config.mts

@@ -51,7 +51,8 @@ const mockElectronAPI: Plugin = {
             onDownloadProgress: () => {}
           },
           getElectronVersion: () => Promise.resolve('1.0.0'),
-          getComfyUIVersion: () => '9.9.9'
+          getComfyUIVersion: () => '9.9.9',
+          getPlatform: () => 'win32'
         };`
       }
     ]