[Electron] ComfyUI server config (Launch args config)

src/components/dialog/content/SettingDialogContent.vue

@@ -71,6 +71,14 @@
               </template>
             </Suspense>
           </TabPanel>
+          <TabPanel key="server-config" value="Server-Config">
+            <Suspense>
+              <ServerConfigPanel />
+              <template #fallback>
+                <div>Loading server config panel...</div>
+              </template>
+            </Suspense>
+          </TabPanel>
         </TabPanels>
       </Tabs>
     </ScrollPanel>
@@ -93,13 +101,17 @@ import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import { flattenTree } from '@/utils/treeUtil'
 import AboutPanel from './setting/AboutPanel.vue'
 import FirstTimeUIMessage from './setting/FirstTimeUIMessage.vue'
+import { isElectron } from '@/utils/envUtil'
 
 const KeybindingPanel = defineAsyncComponent(
   () => import('./setting/KeybindingPanel.vue')
 )
 const ExtensionPanel = defineAsyncComponent(
   () => import('./setting/ExtensionPanel.vue')
 )
+const ServerConfigPanel = defineAsyncComponent(
+  () => import('./setting/ServerConfigPanel.vue')
+)
 
 interface ISettingGroup {
   label: string
@@ -124,18 +136,33 @@ const extensionPanelNode: SettingTreeNode = {
   children: []
 }
 
+const serverConfigPanelNode: SettingTreeNode = {
+  key: 'server-config',
+  label: 'Server-Config',
+  children: []
+}
+
 const extensionPanelNodeList = computed<SettingTreeNode[]>(() => {
   const settingStore = useSettingStore()
   const showExtensionPanel = settingStore.get('Comfy.Settings.ExtensionPanel')
   return showExtensionPanel ? [extensionPanelNode] : []
 })
 
+/**
+ * Server config panel is only available in Electron. We might want to support
+ * it in the web version in the future.
+ */
+const serverConfigPanelNodeList = computed<SettingTreeNode[]>(() => {
+  return isElectron() ? [serverConfigPanelNode] : []
+})
+
 const settingStore = useSettingStore()
 const settingRoot = computed<SettingTreeNode>(() => settingStore.settingTree)
 const categories = computed<SettingTreeNode[]>(() => [
   ...(settingRoot.value.children || []),
   keybindingPanelNode,
   ...extensionPanelNodeList.value,
+  ...serverConfigPanelNodeList.value,
   aboutPanelNode
 ])
 const activeCategory = ref<SettingTreeNode | null>(null)

src/components/dialog/content/setting/ServerConfigPanel.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    v-for="([label, items], i) in Object.entries(serverConfigsByCategory)"
+    :key="label"
+  >
+    <Divider v-if="i > 0" />
+    <h3>{{ formatCamelCase(label) }}</h3>
+    <div v-for="item in items" :key="item.name" class="flex items-center mb-4">
+      <FormItem :item="item" v-model:formValue="item.value" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Divider from 'primevue/divider'
+import FormItem from '@/components/common/FormItem.vue'
+import { formatCamelCase } from '@/utils/formatUtil'
+import { useSettingStore } from '@/stores/settingStore'
+import { useServerConfigStore } from '@/stores/serverConfigStore'
+import { storeToRefs } from 'pinia'
+import { onMounted, watch } from 'vue'
+import { SERVER_CONFIG_ITEMS } from '@/constants/serverConfig'
+
+const settingStore = useSettingStore()
+const serverConfigStore = useServerConfigStore()
+const { serverConfigsByCategory, launchArgs, serverConfigValues } =
+  storeToRefs(serverConfigStore)
+
+onMounted(() => {
+  serverConfigStore.loadServerConfig(
+    SERVER_CONFIG_ITEMS,
+    settingStore.get('Comfy.Server.ServerConfigValues')
+  )
+})
+
+watch(launchArgs, (newVal) => {
+  settingStore.set('Comfy.Server.LaunchArgs', newVal)
+})
+
+watch(serverConfigValues, (newVal) => {
+  settingStore.set('Comfy.Server.ServerConfigValues', newVal)
+})
+</script>