From b19f7ca228188afe16c412d37dab5c731cec7f38 Mon Sep 17 00:00:00 2001
From: Chenlei Hu <huchenlei@proton.me>
Date: Sun, 29 Dec 2024 18:07:22 -0500
Subject: [PATCH] Add BaseViewTemplate (#2094)

---
 src/router.ts                            |  6 ++++++
 src/views/DownloadGitView.vue            |  7 +++----
 src/views/InstallView.vue                |  8 +++-----
 src/views/ManualConfigurationView.vue    |  7 +++----
 src/views/NotSupportedView.vue           |  7 +++----
 src/views/ServerStartView.vue            |  7 +++----
 src/views/UserSelectView.vue             |  9 ++++-----
 src/views/WelcomeView.vue                |  7 +++----
 src/views/templates/BaseViewTemplate.vue | 23 +++++++++++++++++++++++
 vite.electron.config.mts                 |  3 ++-
 10 files changed, 53 insertions(+), 31 deletions(-)
 create mode 100644 src/views/templates/BaseViewTemplate.vue

diff --git a/src/router.ts b/src/router.ts
index 39bad89b3..7c70bc9b1 100644
--- a/src/router.ts
+++ b/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
         }
       ]
     }
diff --git a/src/views/DownloadGitView.vue b/src/views/DownloadGitView.vue
index 720eaeb27..56b67ef38 100644
--- a/src/views/DownloadGitView.vue
+++ b/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'
 
diff --git a/src/views/InstallView.vue b/src/views/InstallView.vue
index d75ceab92..625296d92 100644
--- a/src/views/InstallView.vue
+++ b/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'
diff --git a/src/views/ManualConfigurationView.vue b/src/views/ManualConfigurationView.vue
index df32d2f64..0a6920174 100644
--- a/src/views/ManualConfigurationView.vue
+++ b/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'
diff --git a/src/views/NotSupportedView.vue b/src/views/NotSupportedView.vue
index 9d586b92d..be39e4d59 100644
--- a/src/views/NotSupportedView.vue
+++ b/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(
diff --git a/src/views/ServerStartView.vue b/src/views/ServerStartView.vue
index 6dd37362a..38203a0f8 100644
--- a/src/views/ServerStartView.vue
+++ b/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()
diff --git a/src/views/UserSelectView.vue b/src/views/UserSelectView.vue
index a40cc1c80..a19719735 100644
--- a/src/views/UserSelectView.vue
+++ b/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()
diff --git a/src/views/WelcomeView.vue b/src/views/WelcomeView.vue
index 160af5aaa..58f52e5b4 100644
--- a/src/views/WelcomeView.vue
+++ b/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) => {
diff --git a/src/views/templates/BaseViewTemplate.vue b/src/views/templates/BaseViewTemplate.vue
new file mode 100644
index 000000000..d558d253a
--- /dev/null
+++ b/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>
diff --git a/vite.electron.config.mts b/vite.electron.config.mts
index 5b767af27..a2ec411b1 100644
--- a/vite.electron.config.mts
+++ b/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'
         };`
       }
     ]