refactor: Migrate the project functionality and optimize the code structure

src/hooks/config.ts

@@ -0,0 +1,69 @@
+import { useRequest } from 'hooks/request'
+import { defineStore } from 'hooks/store'
+import { app } from 'scripts/comfyAPI'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+export const useConfig = defineStore('config', () => {
+  const mobileDeviceBreakPoint = 759
+  const isMobile = ref(window.innerWidth < mobileDeviceBreakPoint)
+
+  type ModelFolder = Record<string, string[]>
+  const { data: modelFolders, refresh: refreshModelFolders } =
+    useRequest<ModelFolder>('/base-folders')
+
+  const checkDeviceType = () => {
+    isMobile.value = window.innerWidth < mobileDeviceBreakPoint
+  }
+
+  onMounted(() => {
+    window.addEventListener('resize', checkDeviceType)
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener('resize', checkDeviceType)
+  })
+
+  const refreshSetting = async () => {
+    return Promise.all([refreshModelFolders()])
+  }
+
+  const config = {
+    isMobile,
+    gutter: 16,
+    cardWidth: 240,
+    aspect: 7 / 9,
+    modelFolders,
+    refreshSetting,
+  }
+
+  useAddConfigSettings(config)
+
+  return config
+})
+
+type Config = ReturnType<typeof useConfig>
+
+declare module 'hooks/store' {
+  interface StoreProvider {
+    config: Config
+  }
+}
+
+function useAddConfigSettings(config: Config) {
+  onMounted(() => {
+    // API keys
+    app.ui?.settings.addSetting({
+      id: 'ModelManager.APIKey.HuggingFace',
+      name: 'HuggingFace API Key',
+      type: 'text',
+      defaultValue: undefined,
+    })
+
+    app.ui?.settings.addSetting({
+      id: 'ModelManager.APIKey.Civitai',
+      name: 'Civitai API Key',
+      type: 'text',
+      defaultValue: undefined,
+    })
+  })
+}