chore: format code

src/App.vue

@@ -6,17 +6,17 @@
 </template>
 
 <script setup lang="ts">
-import DialogManager from 'components/DialogManager.vue'
 import DialogDownload from 'components/DialogDownload.vue'
-import GlobalToast from 'components/GlobalToast.vue'
-import GlobalLoading from 'components/GlobalLoading.vue'
+import DialogManager from 'components/DialogManager.vue'
 import GlobalDialogStack from 'components/GlobalDialogStack.vue'
+import GlobalLoading from 'components/GlobalLoading.vue'
+import GlobalToast from 'components/GlobalToast.vue'
+import { useStoreProvider } from 'hooks/store'
+import { useToast } from 'hooks/toast'
 import GlobalConfirm from 'primevue/confirmdialog'
 import { $el, app, ComfyButton } from 'scripts/comfyAPI'
 import { onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { useStoreProvider } from 'hooks/store'
-import { useToast } from 'hooks/toast'
 
 const { t } = useI18n()
 const { dialog, models, config, download } = useStoreProvider()
@@ -39,6 +39,7 @@ onMounted(() => {
       content: DialogDownload,
       headerButtons: [
         {
+          key: 'refresh',
           icon: 'pi pi-refresh',
           command: () => download.refresh(),
         },
@@ -56,10 +57,12 @@ onMounted(() => {
       keepAlive: true,
       headerButtons: [
         {
+          key: 'refresh',
           icon: 'pi pi-refresh',
           command: refreshModelsAndConfig,
         },
         {
+          key: 'download',
           icon: 'pi pi-download',
           command: openDownloadDialog,
         },

src/components/DialogCreateTask.vue

@@ -60,15 +60,16 @@
 <script setup lang="ts">
 import ModelContent from 'components/ModelContent.vue'
 import ResponseInput from 'components/ResponseInput.vue'
-import ResponseSelect from 'components/ResponseSelect.vue'
 import ResponseScroll from 'components/ResponseScroll.vue'
-import Button from 'primevue/button'
+import ResponseSelect from 'components/ResponseSelect.vue'
 import { useConfig } from 'hooks/config'
 import { useDialog } from 'hooks/dialog'
 import { useModelSearch } from 'hooks/download'
 import { useLoading } from 'hooks/loading'
 import { request } from 'hooks/request'
 import { useToast } from 'hooks/toast'
+import Button from 'primevue/button'
+import { VersionModel } from 'types/typings'
 import { previewUrlToFile } from 'utils/common'
 import { ref } from 'vue'
 

src/components/DialogDownload.vue

@@ -73,9 +73,9 @@
 <script setup lang="ts">
 import DialogCreateTask from 'components/DialogCreateTask.vue'
 import ResponseScroll from 'components/ResponseScroll.vue'
-import Button from 'primevue/button'
-import { useDownload } from 'hooks/download'
 import { useDialog } from 'hooks/dialog'
+import { useDownload } from 'hooks/download'
+import Button from 'primevue/button'
 import { useI18n } from 'vue-i18n'
 
 const { data } = useDownload()

src/components/DialogManager.vue

@@ -75,17 +75,18 @@
 </template>
 
 <script setup lang="ts" name="manager-dialog">
-import { useConfig } from 'hooks/config'
-import { useModels } from 'hooks/model'
 import ModelCard from 'components/ModelCard.vue'
 import ResponseInput from 'components/ResponseInput.vue'
-import ResponseSelect from 'components/ResponseSelect.vue'
 import ResponseScroll from 'components/ResponseScroll.vue'
+import ResponseSelect from 'components/ResponseSelect.vue'
+import { useConfig } from 'hooks/config'
+import { useModels } from 'hooks/model'
+import { defineResizeCallback } from 'hooks/resize'
+import { chunk } from 'lodash'
+import { Model } from 'types/typings'
+import { genModelKey } from 'utils/model'
 import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { chunk } from 'lodash'
-import { defineResizeCallback } from 'hooks/resize'
-import { genModelKey } from 'utils/model'
 
 const { isMobile, cardWidth, gutter, aspect, modelFolders } = useConfig()
 
@@ -153,7 +154,7 @@ const list = computed(() => {
     return matchType && matchName
   })
 
-  let sortStrategy = (a: Model, b: Model) => 0
+  let sortStrategy: (a: Model, b: Model) => number = () => 0
   switch (sortOrder.value) {
     case 'name':
       sortStrategy = (a, b) => a.fullname.localeCompare(b.fullname)

src/components/DialogModelDetail.vue

@@ -44,9 +44,10 @@
 <script setup lang="ts">
 import ModelContent from 'components/ModelContent.vue'
 import ResponseScroll from 'components/ResponseScroll.vue'
-import Button from 'primevue/button'
 import { useModelNodeAction, useModels } from 'hooks/model'
 import { useRequest } from 'hooks/request'
+import Button from 'primevue/button'
+import { BaseModel, Model } from 'types/typings'
 import { computed, ref } from 'vue'
 
 interface Props {

src/components/GlobalDialogStack.vue

@@ -21,6 +21,7 @@
         <div class="p-dialog-header-actions">
           <Button
             v-for="action in item.headerButtons"
+            :key="action.key"
             severity="secondary"
             :text="true"
             :rounded="true"
@@ -38,9 +39,9 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
 import ResponseDialog from 'components/ResponseDialog.vue'
 import { useDialog } from 'hooks/dialog'
+import Button from 'primevue/button'
 
 const { stack, rise, close } = useDialog()
 </script>

src/components/ModelBaseInfo.vue

@@ -29,7 +29,11 @@
         <col />
       </colgroup>
       <tbody>
-        <tr v-for="item in information" class="h-8 whitespace-nowrap border-b">
+        <tr
+          v-for="item in information"
+          :key="item.key"
+          class="h-8 whitespace-nowrap border-b"
+        >
           <td class="border-r bg-gray-300 px-4 dark:bg-gray-800">
             {{ $t(`info.${item.key}`) }}
           </td>

src/components/ModelCard.vue

@@ -66,11 +66,12 @@
 
 <script setup lang="ts">
 import DialogModelDetail from 'components/DialogModelDetail.vue'
+import { useDialog } from 'hooks/dialog'
+import { useModelNodeAction } from 'hooks/model'
 import Button from 'primevue/button'
+import { Model } from 'types/typings'
 import { genModelKey } from 'utils/model'
 import { computed } from 'vue'
-import { useModelNodeAction } from 'hooks/model'
-import { useDialog } from 'hooks/dialog'
 
 interface Props {
   model: Model

src/components/ModelContent.vue

@@ -39,15 +39,10 @@
 </template>
 
 <script setup lang="ts">
-import ModelPreview from 'components/ModelPreview.vue'
 import ModelBaseInfo from 'components/ModelBaseInfo.vue'
 import ModelDescription from 'components/ModelDescription.vue'
 import ModelMetadata from 'components/ModelMetadata.vue'
-import Tab from 'primevue/tab'
-import Tabs from 'primevue/tabs'
-import TabList from 'primevue/tablist'
-import TabPanel from 'primevue/tabpanel'
-import TabPanels from 'primevue/tabpanels'
+import ModelPreview from 'components/ModelPreview.vue'
 import {
   useModelBaseInfoEditor,
   useModelDescriptionEditor,
@@ -55,8 +50,14 @@ import {
   useModelMetadataEditor,
   useModelPreviewEditor,
 } from 'hooks/model'
-import { toRaw, watch } from 'vue'
 import { cloneDeep } from 'lodash'
+import Tab from 'primevue/tab'
+import TabList from 'primevue/tablist'
+import TabPanel from 'primevue/tabpanel'
+import TabPanels from 'primevue/tabpanels'
+import Tabs from 'primevue/tabs'
+import { BaseModel } from 'types/typings'
+import { toRaw, watch } from 'vue'
 
 interface Props {
   model: BaseModel

src/components/ModelMetadata.vue

@@ -1,7 +1,7 @@
 <template>
   <table v-if="dataSource.length" class="w-full border-collapse border">
     <tbody>
-      <tr v-for="item in dataSource" class="h-8 border-b">
+      <tr v-for="item in dataSource" :key="item.key" class="h-8 border-b">
         <td class="border-r bg-gray-300 px-4 dark:bg-gray-800">
           {{ item.key }}
         </td>

src/components/ModelPreview.vue

@@ -88,13 +88,13 @@
 </template>
 
 <script setup lang="ts">
+import ResponseFileUpload from 'components/ResponseFileUpload.vue'
 import ResponseImage from 'components/ResponseImage.vue'
 import ResponseInput from 'components/ResponseInput.vue'
-import ResponseFileUpload from 'components/ResponseFileUpload.vue'
+import { useConfig } from 'hooks/config'
+import { useModelPreview } from 'hooks/model'
 import Button from 'primevue/button'
 import Carousel from 'primevue/carousel'
-import { useModelPreview } from 'hooks/model'
-import { useConfig } from 'hooks/config'
 
 const editable = defineModel<boolean>('editable')
 const { cardWidth } = useConfig()

src/components/ResponseDialog.vue

@@ -75,9 +75,10 @@
 </template>
 
 <script setup lang="ts">
-import Dialog from 'primevue/dialog'
-import { clamp, isNil } from 'lodash'
 import { useConfig } from 'hooks/config'
+import { clamp, isNil } from 'lodash'
+import Dialog from 'primevue/dialog'
+import { ContainerPosition, ContainerSize } from 'types/typings'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
 interface Props {

src/components/ResponseFileUpload.vue

@@ -19,6 +19,8 @@
 </template>
 
 <script setup lang="ts">
+import { SelectEvent, SelectFile } from 'types/typings'
+
 const emits = defineEmits<{
   select: [event: SelectEvent]
 }>()

src/components/ResponseInput.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, nextTick, ref } from 'vue'
+import { computed, ref } from 'vue'
 
 interface Props {
   prefixIcon?: string

src/components/ResponseScroll.vue

@@ -60,8 +60,9 @@
 </template>
 
 <script setup lang="ts" generic="T">
-import { nextTick, onUnmounted, ref, watch } from 'vue'
+import { defineResizeCallback } from 'hooks/resize'
 import { clamp, throttle } from 'lodash'
+import { nextTick, onUnmounted, ref, watch } from 'vue'
 
 interface ScrollAreaProps {
   items?: T[][]
@@ -206,7 +207,7 @@ const calculateScrollThumbSize = () => {
   })
 }
 
-const onContainerResize: ResizeObserverCallback = throttle((entries) => {
+const onContainerResize = defineResizeCallback((entries) => {
   emit('resize', entries)
   if (isDragging.value) return
 

src/components/ResponseSelect.vue

@@ -150,6 +150,7 @@ import { useConfig } from 'hooks/config'
 import Button, { ButtonProps } from 'primevue/button'
 import Drawer from 'primevue/drawer'
 import Menu from 'primevue/menu'
+import { SelectOptions } from 'types/typings'
 import { computed, ref } from 'vue'
 
 const current = defineModel()

src/hooks/config.ts

@@ -36,7 +36,7 @@ export const useConfig = defineStore('config', () => {
     refresh,
   }
 
-  useAddConfigSettings(config)
+  useAddConfigSettings()
 
   return config
 })
@@ -49,7 +49,7 @@ declare module 'hooks/store' {
   }
 }
 
-function useAddConfigSettings(config: Config) {
+function useAddConfigSettings() {
   onMounted(() => {
     // API keys
     app.ui?.settings.addSetting({

src/hooks/dialog.ts

@@ -1,7 +1,9 @@
 import { defineStore } from 'hooks/store'
+import { ContainerSize } from 'types/typings'
 import { Component, markRaw, ref } from 'vue'
 
 interface HeaderButton {
+  key: string
   icon: string
   command: () => void
 }

src/hooks/download.ts

@@ -4,6 +4,13 @@ import { request } from 'hooks/request'
 import { defineStore } from 'hooks/store'
 import { useToast } from 'hooks/toast'
 import { api } from 'scripts/comfyAPI'
+import {
+  BaseModel,
+  DownloadTask,
+  DownloadTaskOptions,
+  SelectOptions,
+  VersionModel,
+} from 'types/typings'
 import { bytesToSize } from 'utils/common'
 import { onBeforeMount, onMounted, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
@@ -385,7 +392,7 @@ class Huggingface extends ModelSearch {
 }
 
 class UnknownWebsite extends ModelSearch {
-  async search(searchUrl: string): Promise<VersionModel[]> {
+  async search(): Promise<VersionModel[]> {
     return Promise.reject(
       new Error(
         'Unknown Website, please input a URL from huggingface.co or civitai.com.',

src/hooks/model.ts

@@ -6,6 +6,7 @@ import { defineStore } from 'hooks/store'
 import { useToast } from 'hooks/toast'
 import { cloneDeep } from 'lodash'
 import { app } from 'scripts/comfyAPI'
+import { BaseModel, Model, SelectEvent } from 'types/typings'
 import { bytesToSize, formatDate, previewUrlToFile } from 'utils/common'
 import { ModelGrid } from 'utils/legacy'
 import { genModelKey, resolveModelTypeLoader } from 'utils/model'

src/hooks/store.ts

@@ -13,7 +13,7 @@ export const useStoreProvider = () => {
   return storeEvent
 }
 
-const storeKeys = new Map<string, Symbol>()
+const storeKeys = new Map<string, symbol>()
 
 const getStoreKey = (key: string) => {
   let storeKey = storeKeys.get(key)

src/hooks/toast.ts

@@ -12,7 +12,7 @@ export const useToast = () => {
 
   globalToast.value = toast
 
-  const wrapperToastError = <T extends Function>(callback: T): T => {
+  const wrapperToastError = <T extends CallableFunction>(callback: T): T => {
     const showToast = (error: Error) => {
       toast.add({
         severity: 'error',

src/types/typings.d.ts

@@ -1,7 +1,7 @@
-type ContainerSize = { width: number; height: number }
-type ContainerPosition = { left: number; top: number }
+export type ContainerSize = { width: number; height: number }
+export type ContainerPosition = { left: number; top: number }
 
-interface BaseModel {
+export interface BaseModel {
   id: number | string
   fullname: string
   basename: string
@@ -14,37 +14,37 @@ interface BaseModel {
   metadata: Record<string, string>
 }
 
-interface Model extends BaseModel {
+export interface Model extends BaseModel {
   createdAt: number
   updatedAt: number
 }
 
-interface VersionModel extends BaseModel {
+export interface VersionModel extends BaseModel {
   shortname: string
   downloadPlatform: string
   downloadUrl: string
   hashes?: Record<string, string>
 }
 
-type PassThrough<T = void> = T | object | undefined
+export type PassThrough<T = void> = T | object | undefined
 
-interface SelectOptions {
+export interface SelectOptions {
   label: string
   value: any
   icon?: string
   command: () => void
 }
 
-interface SelectFile extends File {
+export interface SelectFile extends File {
   objectURL: string
 }
 
-interface SelectEvent {
+export interface SelectEvent {
   files: SelectFile[]
   originalEvent: Event
 }
 
-interface DownloadTaskOptions {
+export interface DownloadTaskOptions {
   taskId: string
   type: string
   fullname: string
@@ -57,7 +57,7 @@ interface DownloadTaskOptions {
   error?: string
 }
 
-interface DownloadTask
+export interface DownloadTask
   extends Omit<
     DownloadTaskOptions,
     'downloadedSize' | 'totalSize' | 'bps' | 'error'
@@ -69,4 +69,4 @@ interface DownloadTask
   deleteTask: () => void
 }
 
-type CustomEventListener = (event: CustomEvent) => void
+export type CustomEventListener = (event: CustomEvent) => void

src/utils/legacy.ts

@@ -1,4 +1,3 @@
-// @ts-nocheck
 import { app } from 'scripts/comfyAPI'
 
 const LiteGraph = window.LiteGraph

src/utils/model.ts

@@ -1,3 +1,5 @@
+import { BaseModel } from 'types/typings'
+
 const loader = {
   checkpoints: 'CheckpointLoaderSimple',
   loras: 'LoraLoader',