[Lint] Sort imports (#2104)

.github/workflows/format.yaml

@@ -20,4 +20,4 @@ jobs:
       run: npm ci
 
     - name: Run Prettier check
-      run: npx prettier --check './**/*.{js,ts,tsx,vue}'
+      run: npm run format:check

.prettierrc

@@ -3,5 +3,8 @@
   "tabWidth": 2,
   "semi": false,
   "trailingComma": "none",
-  "printWidth": 80
+  "printWidth": 80,
+  "importOrder": ["^@core/(.*)$", "<THIRD_PARTY_MODULES>", "^@/(.*)$", "^[./]"],
+  "importOrderSeparation": true,
+  "importOrderSortSpecifiers": true
 }

browser_tests/actionbar.spec.ts

@@ -1,6 +1,7 @@
 import type { Response } from '@playwright/test'
-import type { StatusWsMessage } from '../src/types/apiTypes.ts'
 import { expect, mergeTests } from '@playwright/test'
+
+import type { StatusWsMessage } from '../src/types/apiTypes.ts'
 import { comfyPageFixture } from './fixtures/ComfyPage'
 import { webSocketFixture } from './fixtures/ws.ts'
 

browser_tests/browserTabTitle.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Browser tab title', () => {

browser_tests/changeTracker.spec.ts

@@ -1,7 +1,7 @@
 import {
   ComfyPage,
-  comfyPageFixture as test,
-  comfyExpect as expect
+  comfyExpect as expect,
+  comfyPageFixture as test
 } from './fixtures/ComfyPage'
 
 async function beforeChange(comfyPage: ComfyPage) {

browser_tests/colorPalette.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 const customColorPalettes = {

browser_tests/commands.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Keybindings', () => {

browser_tests/copyPaste.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Copy Paste', () => {

browser_tests/dialog.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Load workflow warning', () => {

browser_tests/extensionAPI.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Topbar commands', () => {

browser_tests/fixtures/ComfyPage.ts

@@ -1,24 +1,26 @@
-import type { Page, Locator, APIRequestContext } from '@playwright/test'
+import type { APIRequestContext, Locator, Page } from '@playwright/test'
 import { expect } from '@playwright/test'
 import { test as base } from '@playwright/test'
-import { ComfyActionbar } from '../helpers/actionbar'
 import dotenv from 'dotenv'
-dotenv.config()
 import * as fs from 'fs'
-import { NodeBadgeMode } from '../../src/types/nodeSource'
+
+import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
 import type { NodeId } from '../../src/types/comfyWorkflow'
 import type { KeyCombo } from '../../src/types/keyBindingTypes'
+import { NodeBadgeMode } from '../../src/types/nodeSource'
+import { ComfyActionbar } from '../helpers/actionbar'
 import { ComfyTemplates } from '../helpers/templates'
 import { ComfyNodeSearchBox } from './components/ComfyNodeSearchBox'
+import { SettingDialog } from './components/SettingDialog'
 import {
   NodeLibrarySidebarTab,
   WorkflowsSidebarTab
 } from './components/SidebarTab'
 import { Topbar } from './components/Topbar'
-import { NodeReference } from './utils/litegraphUtils'
 import type { Position, Size } from './types'
-import type { useWorkspaceStore } from '../../src/stores/workspaceStore'
-import { SettingDialog } from './components/SettingDialog'
+import { NodeReference } from './utils/litegraphUtils'
+
+dotenv.config()
 
 type WorkspaceStore = ReturnType<typeof useWorkspaceStore>
 

browser_tests/fixtures/UserSelectPage.ts

@@ -1,5 +1,5 @@
-import { Page } from 'playwright'
 import { test as base } from '@playwright/test'
+import { Page } from 'playwright'
 
 export class UserSelectPage {
   constructor(

browser_tests/fixtures/utils/litegraphUtils.ts

@@ -1,6 +1,7 @@
-import { ManageGroupNode } from '../../helpers/manageGroupNode'
-import type { NodeId } from '../../../src/types/comfyWorkflow'
 import type { Page } from '@playwright/test'
+
+import type { NodeId } from '../../../src/types/comfyWorkflow'
+import { ManageGroupNode } from '../../helpers/manageGroupNode'
 import type { ComfyPage } from '../ComfyPage'
 import type { Position, Size } from '../types'
 

browser_tests/globalSetup.ts

@@ -1,7 +1,8 @@
 import { FullConfig } from '@playwright/test'
-import { backupPath } from './utils/backupUtils'
 import dotenv from 'dotenv'
 
+import { backupPath } from './utils/backupUtils'
+
 dotenv.config()
 
 export default function globalSetup(config: FullConfig) {

browser_tests/globalTeardown.ts

@@ -1,7 +1,8 @@
 import { FullConfig } from '@playwright/test'
-import { restorePath } from './utils/backupUtils'
 import dotenv from 'dotenv'
 
+import { restorePath } from './utils/backupUtils'
+
 dotenv.config()
 
 export default function globalTeardown(config: FullConfig) {

browser_tests/graphCanvasMenu.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Graph Canvas Menu', () => {

browser_tests/groupNode.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { ComfyPage, comfyPageFixture as test } from './fixtures/ComfyPage'
 import type { NodeReference } from './fixtures/utils/litegraphUtils'
 

browser_tests/helpers/actionbar.ts

@@ -1,4 +1,5 @@
-import type { Page, Locator } from '@playwright/test'
+import type { Locator, Page } from '@playwright/test'
+
 import type { AutoQueueMode } from '../../src/stores/queueStore'
 
 export class ComfyActionbar {

browser_tests/helpers/manageGroupNode.ts

@@ -1,4 +1,5 @@
 import { Locator, Page } from '@playwright/test'
+
 export class ManageGroupNode {
   footer: Locator
   header: Locator

browser_tests/helpers/templates.ts

@@ -1,4 +1,5 @@
 import { Locator, Page } from '@playwright/test'
+
 export class ComfyTemplates {
   readonly content: Locator
 

browser_tests/interaction.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Item Interaction', () => {

browser_tests/keybindings.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Keybindings', () => {

browser_tests/litegraphEvent.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 function listenForEvent(): Promise<Event> {

browser_tests/loadWorkflowInMedia.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Load Workflow in Media', () => {

browser_tests/menu.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Menu', () => {

browser_tests/nodeBadge.spec.ts

@@ -1,7 +1,8 @@
 import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+
 import type { ComfyApp } from '../src/scripts/app'
 import { NodeBadgeMode } from '../src/types/nodeSource'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Node Badge', () => {
   test('Can add badge', async ({ comfyPage }) => {

browser_tests/nodeDisplay.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 // If an input is optional by node definition, it should be shown as

browser_tests/nodeSearchBox.spec.ts

@@ -1,6 +1,6 @@
 import {
-  comfyPageFixture as test,
-  comfyExpect as expect
+  comfyExpect as expect,
+  comfyPageFixture as test
 } from './fixtures/ComfyPage'
 
 test.describe('Node search box', () => {

browser_tests/primitiveNode.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 import type { NodeReference } from './fixtures/utils/litegraphUtils'
 

browser_tests/propertiesPanel.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Properties Panel', () => {

browser_tests/rerouteNode.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Reroute Node', () => {

browser_tests/rightClickMenu.spec.ts

@@ -1,6 +1,7 @@
 import { expect } from '@playwright/test'
-import { comfyPageFixture as test } from './fixtures/ComfyPage'
+
 import { NodeBadgeMode } from '../src/types/nodeSource'
+import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Canvas Right Click Menu', () => {
   // See https://github.com/comfyanonymous/ComfyUI/issues/3883

browser_tests/templates.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Templates', () => {

browser_tests/textWidgetTruncate.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { comfyPageFixture as test } from './fixtures/ComfyPage'
 
 test.describe('Combo text widget', () => {

browser_tests/userSelectView.spec.ts

@@ -1,4 +1,5 @@
 import { expect } from '@playwright/test'
+
 import { userSelectPageFixture as test } from './fixtures/UserSelectPage'
 
 /**

browser_tests/utils/backupUtils.ts

@@ -1,5 +1,5 @@
-import path from 'path'
 import fs from 'fs-extra'
+import path from 'path'
 
 type PathParts = readonly [string, ...string[]]
 

eslint.config.js

@@ -1,8 +1,8 @@
-import globals from 'globals'
 import pluginJs from '@eslint/js'
-import tseslint from 'typescript-eslint'
-import pluginVue from 'eslint-plugin-vue'
 import unusedImports from 'eslint-plugin-unused-imports'
+import pluginVue from 'eslint-plugin-vue'
+import globals from 'globals'
+import tseslint from 'typescript-eslint'
 
 export default [
   {

lint-staged.config.js

@@ -11,7 +11,7 @@ export default {
 
 function formatAndEslint(fileNames) {
   return [
-    `prettier --write ${fileNames.join(' ')}`,
+    `prettier --write ${fileNames.join(' ')} --plugin @trivago/prettier-plugin-sort-imports`,
     `eslint --fix ${fileNames.join(' ')}`
   ]
 }

package-lock.json

@@ -48,6 +48,7 @@
         "@lobehub/i18n-cli": "^1.20.0",
         "@pinia/testing": "^0.1.5",
         "@playwright/test": "^1.44.1",
+        "@trivago/prettier-plugin-sort-imports": "^5.2.0",
         "@types/jest": "^29.5.12",
         "@types/lodash": "^4.17.6",
         "@types/node": "^20.14.8",
@@ -197,12 +198,14 @@
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.24.7.tgz",
-      "integrity": "sha512-BcYH1CVJBO9tvyIZ2jVeXgSIMvGZ2FDRvDdOIVQyuklNKSsx+eppDEBq/g47Ayw+RqNFE+URvOShmf+f/qwAlA==",
+      "version": "7.26.2",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz",
+      "integrity": "sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/highlight": "^7.24.7",
+        "@babel/helper-validator-identifier": "^7.25.9",
+        "js-tokens": "^4.0.0",
         "picocolors": "^1.0.0"
       },
       "engines": {
@@ -249,15 +252,17 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.24.7.tgz",
-      "integrity": "sha512-oipXieGC3i45Y1A41t4tAqpnEZWgB/lC6Ehh6+rOviR5XWpTtMmLN+fGjz9vOiNRt0p6RtO6DtD0pdU3vpqdSA==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.26.3.tgz",
+      "integrity": "sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.24.7",
+        "@babel/parser": "^7.26.3",
+        "@babel/types": "^7.26.3",
         "@jridgewell/gen-mapping": "^0.3.5",
         "@jridgewell/trace-mapping": "^0.3.25",
-        "jsesc": "^2.5.1"
+        "jsesc": "^3.0.2"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -590,42 +595,13 @@
         "node": ">=6.9.0"
       }
     },
-    "node_modules/@babel/highlight": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.24.7.tgz",
-      "integrity": "sha512-EStJpq4OuY8xYfhGVXngigBJRWxftKX9ksiGDnmlY3o7B/V7KIAc9X4oiK87uPJSc/vs5L869bem5fhZa8caZw==",
-      "dev": true,
-      "dependencies": {
-        "@babel/helper-validator-identifier": "^7.24.7",
-        "chalk": "^2.4.2",
-        "js-tokens": "^4.0.0",
-        "picocolors": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/@babel/highlight/node_modules/chalk": {
-      "version": "2.4.2",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
-      "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
-      "dev": true,
-      "dependencies": {
-        "ansi-styles": "^3.2.1",
-        "escape-string-regexp": "^1.0.5",
-        "supports-color": "^5.3.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/@babel/parser": {
-      "version": "7.26.2",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.2.tgz",
-      "integrity": "sha512-DWMCZH9WA4Maitz2q21SRKHo9QXZxkDsbNZoVD62gusNtNBBqDg9i7uOhASfTfIGNzW+O+r7+jAlM8dwphcJKQ==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz",
+      "integrity": "sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==",
       "license": "MIT",
       "dependencies": {
-        "@babel/types": "^7.26.0"
+        "@babel/types": "^7.26.3"
       },
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -1895,33 +1871,32 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.24.7.tgz",
-      "integrity": "sha512-jYqfPrU9JTF0PmPy1tLYHW4Mp4KlgxJD9l2nP9fD6yT/ICi554DmrWBAEYpIelzjHf1msDP3PxJIRt/nFNfBig==",
+      "version": "7.25.9",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz",
+      "integrity": "sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.24.7",
-        "@babel/parser": "^7.24.7",
-        "@babel/types": "^7.24.7"
+        "@babel/code-frame": "^7.25.9",
+        "@babel/parser": "^7.25.9",
+        "@babel/types": "^7.25.9"
       },
       "engines": {
         "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.24.7",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.24.7.tgz",
-      "integrity": "sha512-yb65Ed5S/QAcewNPh0nZczy9JdYXkkAbIsEo+P7BE7yO3txAY30Y/oPa3QkQ5It3xVG2kpKMg9MsdxZaO31uKA==",
+      "version": "7.26.4",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.4.tgz",
+      "integrity": "sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
-        "@babel/code-frame": "^7.24.7",
-        "@babel/generator": "^7.24.7",
-        "@babel/helper-environment-visitor": "^7.24.7",
-        "@babel/helper-function-name": "^7.24.7",
-        "@babel/helper-hoist-variables": "^7.24.7",
-        "@babel/helper-split-export-declaration": "^7.24.7",
-        "@babel/parser": "^7.24.7",
-        "@babel/types": "^7.24.7",
+        "@babel/code-frame": "^7.26.2",
+        "@babel/generator": "^7.26.3",
+        "@babel/parser": "^7.26.3",
+        "@babel/template": "^7.25.9",
+        "@babel/types": "^7.26.3",
         "debug": "^4.3.1",
         "globals": "^11.1.0"
       },
@@ -1940,9 +1915,9 @@
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.26.0",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.0.tgz",
-      "integrity": "sha512-Z/yiTPj+lDVnF7lWeKCIJzaIkI0vYO87dMpZ4bg4TDrFe4XXLFWL1TbXU27gBP3QccxV9mZICCrnjnYlJjXHOA==",
+      "version": "7.26.3",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz",
+      "integrity": "sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==",
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.25.9",
@@ -4917,6 +4892,41 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@trivago/prettier-plugin-sort-imports": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@trivago/prettier-plugin-sort-imports/-/prettier-plugin-sort-imports-5.2.0.tgz",
+      "integrity": "sha512-yEIJ7xMKYQwyNRjxSdi4Gs37iszikAjxfky+3hu9bn24u8eHLJNDMAoOTyowp8p6EpSl8IQMdkfBx+WnJTttsw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@babel/generator": "^7.26.2",
+        "@babel/parser": "^7.26.2",
+        "@babel/traverse": "^7.25.9",
+        "@babel/types": "^7.26.0",
+        "javascript-natural-sort": "^0.7.1",
+        "lodash": "^4.17.21"
+      },
+      "engines": {
+        "node": ">18.12"
+      },
+      "peerDependencies": {
+        "@vue/compiler-sfc": "3.x",
+        "prettier": "2.x - 3.x",
+        "prettier-plugin-svelte": "3.x",
+        "svelte": "4.x"
+      },
+      "peerDependenciesMeta": {
+        "@vue/compiler-sfc": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        },
+        "svelte": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tsconfig/node10": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
@@ -6937,9 +6947,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001640",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001640.tgz",
-      "integrity": "sha512-lA4VMpW0PSUrFnkmVuEKBUovSWKhj7puyCg8StBChgu298N1AtuF1sKWEvfDuimSEDbhlb/KqPKC3fs1HbuQUA==",
+      "version": "1.0.30001690",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz",
+      "integrity": "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==",
       "dev": true,
       "funding": [
         {
@@ -6954,7 +6964,8 @@
           "type": "github",
           "url": "https://github.com/sponsors/ai"
         }
-      ]
+      ],
+      "license": "CC-BY-4.0"
     },
     "node_modules/ccount": {
       "version": "2.0.1",
@@ -10353,6 +10364,13 @@
         "@pkgjs/parseargs": "^0.11.0"
       }
     },
+    "node_modules/javascript-natural-sort": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/javascript-natural-sort/-/javascript-natural-sort-0.7.1.tgz",
+      "integrity": "sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/jest": {
       "version": "29.7.0",
       "resolved": "https://registry.npmjs.org/jest/-/jest-29.7.0.tgz",
@@ -12106,15 +12124,16 @@
       }
     },
     "node_modules/jsesc": {
-      "version": "2.5.2",
-      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-2.5.2.tgz",
-      "integrity": "sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==",
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
+      "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
       "dev": true,
+      "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
       },
       "engines": {
-        "node": ">=4"
+        "node": ">=6"
       }
     },
     "node_modules/json-buffer": {

package.json

@@ -17,7 +17,8 @@
     "update-litegraph": "node scripts/update-litegraph.js",
     "zipdist": "node scripts/zipdist.js",
     "typecheck": "vue-tsc --noEmit && tsc --noEmit && tsc-strict",
-    "format": "prettier --write './**/*.{js,ts,tsx,vue}'",
+    "format": "prettier --write './**/*.{js,ts,tsx,vue,mts}' --plugin @trivago/prettier-plugin-sort-imports",
+    "format:check": "prettier --check './**/*.{js,ts,tsx,vue,mts}' --plugin @trivago/prettier-plugin-sort-imports",
     "test:jest": "jest --config jest.config.ts",
     "test:generate": "npx tsx tests-ui/setup",
     "test:browser": "npx playwright test",
@@ -37,6 +38,7 @@
     "@lobehub/i18n-cli": "^1.20.0",
     "@pinia/testing": "^0.1.5",
     "@playwright/test": "^1.44.1",
+    "@trivago/prettier-plugin-sort-imports": "^5.2.0",
     "@types/jest": "^29.5.12",
     "@types/lodash": "^4.17.6",
     "@types/node": "^20.14.8",

scripts/collect-i18n.ts

@@ -1,12 +1,13 @@
 import * as fs from 'fs'
+
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
 import { CORE_MENU_COMMANDS } from '../src/constants/coreMenuCommands'
 import { SERVER_CONFIG_ITEMS } from '../src/constants/serverConfig'
-import { formatCamelCase, normalizeI18nKey } from '../src/utils/formatUtil'
-import { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
-import type { ComfyCommandImpl } from '../src/stores/commandStore'
-import type { FormItem, SettingParams } from '../src/types/settingTypes'
 import type { ComfyApi } from '../src/scripts/api'
+import type { ComfyCommandImpl } from '../src/stores/commandStore'
+import { ComfyNodeDefImpl } from '../src/stores/nodeDefStore'
+import type { FormItem, SettingParams } from '../src/types/settingTypes'
+import { formatCamelCase, normalizeI18nKey } from '../src/utils/formatUtil'
 
 const localePath = './src/locales/en/main.json'
 const nodeDefsPath = './src/locales/en/nodeDefs.json'

scripts/deploy.js

@@ -1,8 +1,10 @@
-import { copy } from 'fs-extra'
 import { config } from 'dotenv'
+import { copy } from 'fs-extra'
+
 config()
 
 const sourceDir = './dist'
+// eslint-disable-next-line no-undef
 const targetDir = process.env.DEPLOY_COMFYUI_DIR
 
 copy(sourceDir, targetDir)

scripts/diff-i18n.ts

@@ -1,12 +1,12 @@
 import {
-  readFileSync,
-  writeFileSync,
-  readdirSync,
-  mkdirSync,
   existsSync,
-  rmSync
+  mkdirSync,
+  readFileSync,
+  readdirSync,
+  rmSync,
+  writeFileSync
 } from 'fs'
-import { join, dirname } from 'path'
+import { dirname, join } from 'path'
 
 // Ensure directories exist
 function ensureDir(dir: string) {

src/App.vue

@@ -9,13 +9,15 @@
 </template>
 
 <script setup lang="ts">
-import config from '@/config'
-import { computed, onMounted } from 'vue'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
+import { useEventListener } from '@vueuse/core'
 import BlockUI from 'primevue/blockui'
 import ProgressSpinner from 'primevue/progressspinner'
+import { computed, onMounted } from 'vue'
+
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
-import { useEventListener } from '@vueuse/core'
+import config from '@/config'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
+
 import { isElectron, showNativeMenu } from './utils/envUtil'
 
 const workspaceStore = useWorkspaceStore()

src/components/BrowserTabTitle.vue

@@ -5,11 +5,12 @@
 </template>
 
 <script setup lang="ts">
+import { useTitle } from '@vueuse/core'
+import { computed } from 'vue'
+
 import { useExecutionStore } from '@/stores/executionStore'
 import { useSettingStore } from '@/stores/settingStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
-import { useTitle } from '@vueuse/core'
-import { computed } from 'vue'
 
 const DEFAULT_TITLE = 'ComfyUI'
 const TITLE_SUFFIX = ' - ComfyUI'

src/components/LiteGraphCanvasSplitterOverlay.vue

@@ -46,13 +46,14 @@
 </template>
 
 <script setup lang="ts">
-import { useSettingStore } from '@/stores/settingStore'
-import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
-import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
 import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
 import { computed } from 'vue'
 
+import { useSettingStore } from '@/stores/settingStore'
+import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
+import { useSidebarTabStore } from '@/stores/workspace/sidebarTabStore'
+
 const settingStore = useSettingStore()
 const sidebarLocation = computed<'left' | 'right'>(() =>
   settingStore.get('Comfy.Sidebar.Location')

src/components/MenuHamburger.vue

@@ -15,10 +15,11 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
-import { computed, CSSProperties, watchEffect } from 'vue'
+import { CSSProperties, computed, watchEffect } from 'vue'
+
 import { app } from '@/scripts/app'
 import { useSettingStore } from '@/stores/settingStore'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
 import { showNativeMenu } from '@/utils/envUtil'
 
 const workspaceState = useWorkspaceStore()

src/components/actionbar/BatchCountEdit.vue

@@ -30,12 +30,13 @@
 </template>
 
 <script lang="ts" setup>
-import { useQueueSettingsStore } from '@/stores/queueStore'
-import { useSettingStore } from '@/stores/settingStore'
 import { storeToRefs } from 'pinia'
 import InputNumber from 'primevue/inputnumber'
 import { computed } from 'vue'
 
+import { useQueueSettingsStore } from '@/stores/queueStore'
+import { useSettingStore } from '@/stores/settingStore'
+
 interface Props {
   class?: string
 }

src/components/actionbar/ComfyActionbar.vue

@@ -13,10 +13,6 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, nextTick, onMounted, Ref, ref, watch } from 'vue'
-import Panel from 'primevue/panel'
-import ComfyQueueButton from './ComfyQueueButton.vue'
-import { useSettingStore } from '@/stores/settingStore'
 import {
   useDraggable,
   useElementBounding,
@@ -26,6 +22,12 @@ import {
   watchDebounced
 } from '@vueuse/core'
 import { clamp } from 'lodash'
+import Panel from 'primevue/panel'
+import { Ref, computed, inject, nextTick, onMounted, ref, watch } from 'vue'
+
+import { useSettingStore } from '@/stores/settingStore'
+
+import ComfyQueueButton from './ComfyQueueButton.vue'
 
 const settingsStore = useSettingStore()
 

src/components/actionbar/ComfyQueueButton.vue

@@ -55,20 +55,22 @@
 </template>
 
 <script setup lang="ts">
-import SplitButton from 'primevue/splitbutton'
+import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
-import BatchCountEdit from './BatchCountEdit.vue'
 import ButtonGroup from 'primevue/buttongroup'
+import SplitButton from 'primevue/splitbutton'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
+
+import { useCommandStore } from '@/stores/commandStore'
 import {
   useQueuePendingTaskCountStore,
   useQueueSettingsStore
 } from '@/stores/queueStore'
-import { storeToRefs } from 'pinia'
-import { computed } from 'vue'
-import { useCommandStore } from '@/stores/commandStore'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
 
+import BatchCountEdit from './BatchCountEdit.vue'
+
 const workspaceStore = useWorkspaceStore()
 const queueCountStore = storeToRefs(useQueuePendingTaskCountStore())
 const { mode: queueMode } = storeToRefs(useQueueSettingsStore())

src/components/bottomPanel/BottomPanel.vue

@@ -41,9 +41,10 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import Tabs from 'primevue/tabs'
-import TabList from 'primevue/tablist'
 import Tab from 'primevue/tab'
+import TabList from 'primevue/tablist'
+import Tabs from 'primevue/tabs'
+
 import ExtensionSlot from '@/components/common/ExtensionSlot.vue'
 import { useBottomPanelStore } from '@/stores/workspace/bottomPanelStore'
 

src/components/bottomPanel/tabs/terminal/BaseTerminal.vue

@@ -7,7 +7,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, Ref } from 'vue'
+import { Ref, ref } from 'vue'
+
 import { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
 
 const emit = defineEmits<{

src/components/bottomPanel/tabs/terminal/CommandTerminal.vue

@@ -3,10 +3,12 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, Ref } from 'vue'
+import { IDisposable } from '@xterm/xterm'
+import { Ref, onMounted, onUnmounted } from 'vue'
+
 import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
 import { electronAPI } from '@/utils/envUtil'
-import { IDisposable } from '@xterm/xterm'
+
 import BaseTerminal from './BaseTerminal.vue'
 
 const terminalCreated = (

src/components/bottomPanel/tabs/terminal/LogsTerminal.vue

@@ -10,15 +10,17 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted, Ref, ref } from 'vue'
-import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
-import { LogEntry, LogsWsMessage, TerminalSize } from '@/types/apiTypes'
-import { api } from '@/scripts/api'
-import { useExecutionStore } from '@/stores/executionStore'
 import { until } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
-import BaseTerminal from './BaseTerminal.vue'
 import ProgressSpinner from 'primevue/progressspinner'
+import { Ref, onMounted, onUnmounted, ref } from 'vue'
+
+import type { useTerminal } from '@/hooks/bottomPanelTabs/useTerminal'
+import { api } from '@/scripts/api'
+import { useExecutionStore } from '@/stores/executionStore'
+import { LogEntry, LogsWsMessage, TerminalSize } from '@/types/apiTypes'
+
+import BaseTerminal from './BaseTerminal.vue'
 
 const errorMessage = ref('')
 const loading = ref(true)

src/components/common/CustomFormValue.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
 
 const props = defineProps<{
   renderFunction: () => HTMLElement

src/components/common/CustomizationDialog.vue

@@ -70,15 +70,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch } from 'vue'
-import Dialog from 'primevue/dialog'
-import SelectButton from 'primevue/selectbutton'
 import Button from 'primevue/button'
-import Divider from 'primevue/divider'
 import ColorPicker from 'primevue/colorpicker'
-import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
+import Dialog from 'primevue/dialog'
+import Divider from 'primevue/divider'
+import SelectButton from 'primevue/selectbutton'
+import { computed, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { useNodeBookmarkStore } from '@/stores/nodeBookmarkStore'
+
 const { t } = useI18n()
 
 const props = defineProps<{

src/components/common/ElectronFileDownload.vue

@@ -75,13 +75,14 @@
 </template>
 
 <script setup lang="ts">
-import { useDownload } from '@/hooks/downloadHooks'
 import Button from 'primevue/button'
 import ProgressBar from 'primevue/progressbar'
-import { ref, computed } from 'vue'
-import { formatSize } from '@/utils/formatUtil'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+
+import { useDownload } from '@/hooks/downloadHooks'
 import { useElectronDownloadStore } from '@/stores/electronDownloadStore'
+import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{
   url: string

src/components/common/ExtensionSlot.vue

@@ -15,9 +15,10 @@
 </template>
 
 <script setup lang="ts">
-import { CustomExtension, VueExtension } from '@/types/extensionTypes'
 import { onBeforeUnmount } from 'vue'
 
+import { CustomExtension, VueExtension } from '@/types/extensionTypes'
+
 const props = defineProps<{
   extension: VueExtension | CustomExtension
 }>()

src/components/common/FileDownload.vue

@@ -24,9 +24,10 @@
 </template>
 
 <script setup lang="ts">
-import { useDownload } from '@/hooks/downloadHooks'
 import Button from 'primevue/button'
 import { computed } from 'vue'
+
+import { useDownload } from '@/hooks/downloadHooks'
 import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{

src/components/common/FormImageUpload.vue

@@ -42,8 +42,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
 import Button from 'primevue/button'
+import { ref } from 'vue'
 
 const props = defineProps<{
   modelValue: string

src/components/common/FormItem.vue

@@ -25,16 +25,17 @@
 </template>
 
 <script setup lang="ts">
-import { FormItem } from '@/types/settingTypes'
-import { markRaw, type Component } from 'vue'
-import InputText from 'primevue/inputtext'
 import InputNumber from 'primevue/inputnumber'
+import InputText from 'primevue/inputtext'
 import Select from 'primevue/select'
 import ToggleSwitch from 'primevue/toggleswitch'
+import { type Component, markRaw } from 'vue'
+
 import CustomFormValue from '@/components/common/CustomFormValue.vue'
-import InputSlider from '@/components/common/InputSlider.vue'
-import FormImageUpload from '@/components/common/FormImageUpload.vue'
 import FormColorPicker from '@/components/common/FormColorPicker.vue'
+import FormImageUpload from '@/components/common/FormImageUpload.vue'
+import InputSlider from '@/components/common/InputSlider.vue'
+import { FormItem } from '@/types/settingTypes'
 
 const formValue = defineModel<any>('formValue')
 const props = defineProps<{

src/components/common/InputSlider.vue

@@ -24,9 +24,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
 import InputNumber from 'primevue/inputnumber'
 import Slider from 'primevue/slider'
+import { ref, watch } from 'vue'
 
 const props = defineProps<{
   modelValue: number

src/components/common/NoResultsPlaceholder.vue

@@ -19,8 +19,8 @@
 </template>
 
 <script setup lang="ts">
-import Card from 'primevue/card'
 import Button from 'primevue/button'
+import Card from 'primevue/card'
 
 const props = defineProps<{
   class?: string

src/components/common/SearchBox.vue

@@ -42,15 +42,16 @@
 </template>
 
 <script setup lang="ts" generic="TFilter extends SearchFilter">
-import type { SearchFilter } from './SearchFilterChip.vue'
 import { debounce } from 'lodash'
+import Button from 'primevue/button'
 import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
 import InputText from 'primevue/inputtext'
-import Button from 'primevue/button'
-import SearchFilterChip from './SearchFilterChip.vue'
 import { toRefs } from 'vue'
 
+import type { SearchFilter } from './SearchFilterChip.vue'
+import SearchFilterChip from './SearchFilterChip.vue'
+
 const props = withDefaults(
   defineProps<{
     class?: string

src/components/common/SearchFilterChip.vue

@@ -8,8 +8,8 @@
 </template>
 
 <script setup lang="ts">
-import Chip from 'primevue/chip'
 import Badge from 'primevue/badge'
+import Chip from 'primevue/chip'
 
 export interface SearchFilter {
   text: string

src/components/common/SystemStatsPanel.vue

@@ -29,12 +29,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import TabView from 'primevue/tabview'
-import TabPanel from 'primevue/tabpanel'
 import Divider from 'primevue/divider'
-import type { SystemStats } from '@/types/apiTypes'
+import TabPanel from 'primevue/tabpanel'
+import TabView from 'primevue/tabview'
+import { computed } from 'vue'
+
 import DeviceInfo from '@/components/common/DeviceInfo.vue'
+import type { SystemStats } from '@/types/apiTypes'
 import { formatSize } from '@/utils/formatUtil'
 
 const props = defineProps<{

src/components/common/TreeExplorer.vue

@@ -33,17 +33,18 @@
   <ContextMenu ref="menu" :model="menuItems" />
 </template>
 <script setup lang="ts">
-import { ref, computed, provide } from 'vue'
-import Tree from 'primevue/tree'
 import ContextMenu from 'primevue/contextmenu'
+import type { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
+import Tree from 'primevue/tree'
+import { computed, provide, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
+import { useErrorHandling } from '@/hooks/errorHooks'
 import type {
   RenderedTreeExplorerNode,
   TreeExplorerNode
 } from '@/types/treeExplorerTypes'
-import type { MenuItem, MenuItemCommandEvent } from 'primevue/menuitem'
-import { useI18n } from 'vue-i18n'
-import { useErrorHandling } from '@/hooks/errorHooks'
 
 const expandedKeys = defineModel<Record<string, boolean>>('expandedKeys')
 provide('expandedKeys', expandedKeys)

src/components/common/TreeExplorerTreeNode.vue

@@ -34,16 +34,17 @@
 </template>
 
 <script setup lang="ts">
-import { ref, inject, Ref, computed } from 'vue'
 import Badge from 'primevue/badge'
+import { Ref, computed, inject, ref } from 'vue'
+
+import EditableText from '@/components/common/EditableText.vue'
+import { usePragmaticDraggable, usePragmaticDroppable } from '@/hooks/dndHooks'
+import { useErrorHandling } from '@/hooks/errorHooks'
 import type {
-  TreeExplorerDragAndDropData,
   RenderedTreeExplorerNode,
+  TreeExplorerDragAndDropData,
   TreeExplorerNode
 } from '@/types/treeExplorerTypes'
-import EditableText from '@/components/common/EditableText.vue'
-import { useErrorHandling } from '@/hooks/errorHooks'
-import { usePragmaticDraggable, usePragmaticDroppable } from '@/hooks/dndHooks'
 
 const props = defineProps<{
   node: RenderedTreeExplorerNode

src/components/common/__tests__/EditableText.spec.ts

@@ -1,11 +1,12 @@
 // @ts-strict-ignore
 import { mount } from '@vue/test-utils'
-import { describe, it, expect, beforeAll } from 'vitest'
-import EditableText from '../EditableText.vue'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
+import { beforeAll, describe, expect, it } from 'vitest'
 import { createApp } from 'vue'
 
+import EditableText from '../EditableText.vue'
+
 describe('EditableText', () => {
   beforeAll(() => {
     // Create a Vue app instance for PrimeVue

src/components/common/__tests__/TreeExplorerTreeNode.spec.ts

@@ -1,16 +1,17 @@
 // @ts-strict-ignore
-import { describe, it, expect, vi } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
-import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
-import EditableText from '@/components/common/EditableText.vue'
 import Badge from 'primevue/badge'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
-import { createTestingPinia } from '@pinia/testing'
-import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
-import { createI18n } from 'vue-i18n'
+import { describe, expect, it, vi } from 'vitest'
 import { createApp } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import EditableText from '@/components/common/EditableText.vue'
+import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import { useToastStore } from '@/stores/toastStore'
+import { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 // Create a mock i18n instance
 const i18n = createI18n({

src/components/dialog/GlobalDialog.vue

@@ -28,11 +28,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted } from 'vue'
 import { ZIndex } from '@primeuix/utils/zindex'
 import { usePrimeVue } from '@primevue/core'
-import { useDialogStore } from '@/stores/dialogStore'
 import Dialog from 'primevue/dialog'
+import { computed, onMounted } from 'vue'
+
+import { useDialogStore } from '@/stores/dialogStore'
 
 const dialogStore = useDialogStore()
 

src/components/dialog/UnloadWindowConfirmDialog.vue

@@ -10,8 +10,9 @@
 </template>
 
 <script setup lang="ts">
+import { onBeforeUnmount, onMounted } from 'vue'
+
 import { useSettingStore } from '@/stores/settingStore'
-import { onMounted, onBeforeUnmount } from 'vue'
 
 const settingStore = useSettingStore()
 

src/components/dialog/content/ConfirmationDialogContent.vue

@@ -56,8 +56,9 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import { useDialogStore } from '@/stores/dialogStore'
+
 import type { ConfirmationDialogType } from '@/services/dialogService'
+import { useDialogStore } from '@/stores/dialogStore'
 
 const props = defineProps<{
   message: string

src/components/dialog/content/ExecutionErrorDialogContent.vue

@@ -37,19 +37,20 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { useToast } from 'primevue/usetoast'
 import Button from 'primevue/button'
 import Divider from 'primevue/divider'
 import ScrollPanel from 'primevue/scrollpanel'
+import { useToast } from 'primevue/usetoast'
+import { onMounted, ref } from 'vue'
+
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import FindIssueButton from '@/components/dialog/content/error/FindIssueButton.vue'
 import ReportIssueButton from '@/components/dialog/content/error/ReportIssueButton.vue'
-import type { ExecutionErrorWsMessage, SystemStats } from '@/types/apiTypes'
+import { useCopyToClipboard } from '@/hooks/clipboardHooks'
 import { api } from '@/scripts/api'
 import { app } from '@/scripts/app'
+import type { ExecutionErrorWsMessage, SystemStats } from '@/types/apiTypes'
 import { isElectron } from '@/utils/envUtil'
-import { useCopyToClipboard } from '@/hooks/clipboardHooks'
 
 const props = defineProps<{
   error: ExecutionErrorWsMessage

src/components/dialog/content/LoadWorkflowWarning.vue

@@ -33,9 +33,10 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import ListBox from 'primevue/listbox'
 import Button from 'primevue/button'
+import ListBox from 'primevue/listbox'
+import { computed } from 'vue'
+
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import type { MissingNodeType } from '@/types/comfy'
 

src/components/dialog/content/MissingModelsWarning.vue

@@ -25,10 +25,11 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
 import ListBox from 'primevue/listbox'
-import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
+import { computed, ref } from 'vue'
+
 import FileDownload from '@/components/common/FileDownload.vue'
+import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
 import { isElectron } from '@/utils/envUtil'
 
 // TODO: Read this from server internal API rather than hardcoding here

src/components/dialog/content/PromptDialogContent.vue

@@ -16,9 +16,10 @@
 
 <script setup lang="ts">
 import Button from 'primevue/button'
-import InputText from 'primevue/inputtext'
 import FloatLabel from 'primevue/floatlabel'
+import InputText from 'primevue/inputtext'
 import { ref } from 'vue'
+
 import { useDialogStore } from '@/stores/dialogStore'
 
 const props = defineProps<{

src/components/dialog/content/SettingDialogContent.vue

@@ -67,30 +67,32 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watch, defineAsyncComponent } from 'vue'
-import Listbox from 'primevue/listbox'
-import Tabs from 'primevue/tabs'
-import TabPanels from 'primevue/tabpanels'
 import Divider from 'primevue/divider'
+import Listbox from 'primevue/listbox'
 import ScrollPanel from 'primevue/scrollpanel'
+import TabPanels from 'primevue/tabpanels'
+import Tabs from 'primevue/tabs'
+import { computed, defineAsyncComponent, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+import { st } from '@/i18n'
 import {
-  getSettingInfo,
   SettingTreeNode,
+  getSettingInfo,
   useSettingStore
 } from '@/stores/settingStore'
 import { ISettingGroup, SettingParams } from '@/types/settingTypes'
-import SearchBox from '@/components/common/SearchBox.vue'
-import SettingsPanel from './setting/SettingsPanel.vue'
-import PanelTemplate from './setting/PanelTemplate.vue'
-import AboutPanel from './setting/AboutPanel.vue'
-import FirstTimeUIMessage from './setting/FirstTimeUIMessage.vue'
-import CurrentUserMessage from './setting/CurrentUserMessage.vue'
-import ColorPaletteMessage from './setting/ColorPaletteMessage.vue'
-import { flattenTree } from '@/utils/treeUtil'
 import { isElectron } from '@/utils/envUtil'
 import { normalizeI18nKey } from '@/utils/formatUtil'
-import { useI18n } from 'vue-i18n'
-import { st } from '@/i18n'
+import { flattenTree } from '@/utils/treeUtil'
+
+import AboutPanel from './setting/AboutPanel.vue'
+import ColorPaletteMessage from './setting/ColorPaletteMessage.vue'
+import CurrentUserMessage from './setting/CurrentUserMessage.vue'
+import FirstTimeUIMessage from './setting/FirstTimeUIMessage.vue'
+import PanelTemplate from './setting/PanelTemplate.vue'
+import SettingsPanel from './setting/SettingsPanel.vue'
 
 const props = defineProps<{
   defaultPanel?: 'about' | 'keybinding' | 'extension' | 'server-config'

src/components/dialog/content/error/FindIssueButton.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
 import Button from 'primevue/button'
+import { computed } from 'vue'
 
 const props = defineProps<{
   errorMessage: string

src/components/dialog/content/error/ReportIssueButton.vue

@@ -11,11 +11,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
 import Button from 'primevue/button'
 import { useToast } from 'primevue/usetoast'
-import { ExecutionErrorWsMessage } from '@/types/apiTypes'
+import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
+
+import { ExecutionErrorWsMessage } from '@/types/apiTypes'
 import { electronAPI } from '@/utils/envUtil'
 
 const { error } = defineProps<{

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

@@ -30,13 +30,15 @@
 </template>
 
 <script setup lang="ts">
-import PanelTemplate from './PanelTemplate.vue'
-import { useSystemStatsStore } from '@/stores/systemStatsStore'
-import { useAboutPanelStore } from '@/stores/aboutPanelStore'
-import Tag from 'primevue/tag'
 import Divider from 'primevue/divider'
+import Tag from 'primevue/tag'
 import { onMounted } from 'vue'
+
 import SystemStatsPanel from '@/components/common/SystemStatsPanel.vue'
+import { useAboutPanelStore } from '@/stores/aboutPanelStore'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
+
+import PanelTemplate from './PanelTemplate.vue'
 
 const systemStatsStore = useSystemStatsStore()
 const aboutPanelStore = useAboutPanelStore()

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

@@ -38,14 +38,15 @@
 </template>
 
 <script setup lang="ts">
+import { storeToRefs } from 'pinia'
 import Button from 'primevue/button'
 import Message from 'primevue/message'
 import Select from 'primevue/select'
-import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
-import { useColorPaletteService } from '@/services/colorPaletteService'
-import { storeToRefs } from 'pinia'
 import { watch } from 'vue'
 
+import { useColorPaletteService } from '@/services/colorPaletteService'
+import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+
 const colorPaletteStore = useColorPaletteStore()
 const colorPaletteService = useColorPaletteService()
 const { palettes, activePaletteId } = storeToRefs(colorPaletteStore)

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

@@ -16,8 +16,9 @@
 </template>
 
 <script setup lang="ts">
-import Message from 'primevue/message'
 import Button from 'primevue/button'
+import Message from 'primevue/message'
+
 import { useUserStore } from '@/stores/userStore'
 
 const userStore = useUserStore()

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

@@ -72,19 +72,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { FilterMatchMode } from '@primevue/core/api'
+import Button from 'primevue/button'
+import Column from 'primevue/column'
+import ContextMenu from 'primevue/contextmenu'
+import DataTable from 'primevue/datatable'
+import Message from 'primevue/message'
+import Tag from 'primevue/tag'
+import ToggleSwitch from 'primevue/toggleswitch'
+import { computed, onMounted, ref } from 'vue'
+
+import SearchBox from '@/components/common/SearchBox.vue'
 import { useExtensionStore } from '@/stores/extensionStore'
 import { useSettingStore } from '@/stores/settingStore'
-import DataTable from 'primevue/datatable'
-import Column from 'primevue/column'
-import ToggleSwitch from 'primevue/toggleswitch'
-import Tag from 'primevue/tag'
-import Button from 'primevue/button'
-import ContextMenu from 'primevue/contextmenu'
-import Message from 'primevue/message'
-import { FilterMatchMode } from '@primevue/core/api'
+
 import PanelTemplate from './PanelTemplate.vue'
-import SearchBox from '@/components/common/SearchBox.vue'
 
 const filters = ref({
   global: { value: '', matchMode: FilterMatchMode.CONTAINS }

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

@@ -11,10 +11,11 @@
 </template>
 
 <script setup lang="ts">
-import { useSettingStore } from '@/stores/settingStore'
 import Message from 'primevue/message'
 import { computed } from 'vue'
 
+import { useSettingStore } from '@/stores/settingStore'
+
 const settingStore = useSettingStore()
 const show = computed(() => !settingStore.exists('Comfy.UseNewMenu'))
 const handleClose = () => {

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

@@ -114,28 +114,30 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watchEffect } from 'vue'
-import {
-  useKeybindingStore,
-  KeyComboImpl,
-  KeybindingImpl
-} from '@/stores/keybindingStore'
-import { useCommandStore } from '@/stores/commandStore'
-import DataTable from 'primevue/datatable'
-import Column from 'primevue/column'
+import { FilterMatchMode } from '@primevue/core/api'
 import Button from 'primevue/button'
+import Column from 'primevue/column'
+import DataTable from 'primevue/datatable'
 import Dialog from 'primevue/dialog'
 import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
 import Tag from 'primevue/tag'
+import { useToast } from 'primevue/usetoast'
+import { computed, ref, watchEffect } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+import SearchBox from '@/components/common/SearchBox.vue'
+import { useKeybindingService } from '@/services/keybindingService'
+import { useCommandStore } from '@/stores/commandStore'
+import {
+  KeyComboImpl,
+  KeybindingImpl,
+  useKeybindingStore
+} from '@/stores/keybindingStore'
+import { normalizeI18nKey } from '@/utils/formatUtil'
+
 import PanelTemplate from './PanelTemplate.vue'
 import KeyComboDisplay from './keybinding/KeyComboDisplay.vue'
-import SearchBox from '@/components/common/SearchBox.vue'
-import { useToast } from 'primevue/usetoast'
-import { FilterMatchMode } from '@primevue/core/api'
-import { useI18n } from 'vue-i18n'
-import { normalizeI18nKey } from '@/utils/formatUtil'
-import { useKeybindingService } from '@/services/keybindingService'
 
 const filters = ref({
   global: { value: '', matchMode: FilterMatchMode.CONTAINS }

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

@@ -11,8 +11,8 @@
 </template>
 
 <script setup lang="ts">
-import TabPanel from 'primevue/tabpanel'
 import ScrollPanel from 'primevue/scrollpanel'
+import TabPanel from 'primevue/tabpanel'
 
 const props = defineProps<{
   value: string

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

@@ -66,21 +66,23 @@
 </template>
 
 <script setup lang="ts">
-import Button from 'primevue/button'
-import Message from 'primevue/message'
-import Divider from 'primevue/divider'
-import FormItem from '@/components/common/FormItem.vue'
-import PanelTemplate from './PanelTemplate.vue'
-import { useServerConfigStore } from '@/stores/serverConfigStore'
 import { storeToRefs } from 'pinia'
-import { electronAPI } from '@/utils/envUtil'
-import { useSettingStore } from '@/stores/settingStore'
+import Button from 'primevue/button'
+import Divider from 'primevue/divider'
+import Message from 'primevue/message'
 import { watch } from 'vue'
-import { useCopyToClipboard } from '@/hooks/clipboardHooks'
-import type { FormItem as FormItemType } from '@/types/settingTypes'
-import type { ServerConfig } from '@/constants/serverConfig'
 import { useI18n } from 'vue-i18n'
 
+import FormItem from '@/components/common/FormItem.vue'
+import type { ServerConfig } from '@/constants/serverConfig'
+import { useCopyToClipboard } from '@/hooks/clipboardHooks'
+import { useServerConfigStore } from '@/stores/serverConfigStore'
+import { useSettingStore } from '@/stores/settingStore'
+import type { FormItem as FormItemType } from '@/types/settingTypes'
+import { electronAPI } from '@/utils/envUtil'
+
+import PanelTemplate from './PanelTemplate.vue'
+
 const settingStore = useSettingStore()
 const serverConfigStore = useServerConfigStore()
 const {

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

@@ -18,6 +18,7 @@
 
 <script setup lang="ts">
 import Divider from 'primevue/divider'
+
 import SettingItem from '@/components/dialog/content/setting/SettingItem.vue'
 import { SettingParams } from '@/types/settingTypes'
 import { normalizeI18nKey } from '@/utils/formatUtil'

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

@@ -18,11 +18,12 @@
 
 <script setup lang="ts">
 import Tag from 'primevue/tag'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 import FormItem from '@/components/common/FormItem.vue'
 import { useSettingStore } from '@/stores/settingStore'
 import type { SettingOption, SettingParams } from '@/types/settingTypes'
-import { computed } from 'vue'
-import { useI18n } from 'vue-i18n'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 const props = defineProps<{

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

@@ -17,9 +17,10 @@
 
 <script setup lang="ts">
 import NoResultsPlaceholder from '@/components/common/NoResultsPlaceholder.vue'
-import SettingGroup from './SettingGroup.vue'
 import { ISettingGroup } from '@/types/settingTypes'
 
+import SettingGroup from './SettingGroup.vue'
+
 const props = defineProps<{
   settingGroups: ISettingGroup[]
 }>()

src/components/dialog/content/setting/keybinding/KeyComboDisplay.vue

@@ -11,9 +11,10 @@
 
 <script setup lang="ts">
 import Tag from 'primevue/tag'
-import { KeyComboImpl } from '@/stores/keybindingStore'
 import { computed } from 'vue'
 
+import { KeyComboImpl } from '@/stores/keybindingStore'
+
 const props = withDefaults(
   defineProps<{
     keyCombo: KeyComboImpl

src/components/graph/GraphCanvas.vue

@@ -26,50 +26,51 @@
 </template>
 
 <script setup lang="ts">
-import TitleEditor from '@/components/graph/TitleEditor.vue'
-import SideToolbar from '@/components/sidebar/SideToolbar.vue'
-import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
-import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
-import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
-import NodeTooltip from '@/components/graph/NodeTooltip.vue'
-import NodeBadge from '@/components/graph/NodeBadge.vue'
-import { ref, computed, onMounted, watchEffect, watch } from 'vue'
-import { app as comfyApp } from '@/scripts/app'
-import { useSettingStore } from '@/stores/settingStore'
-import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
-import { useWorkspaceStore } from '@/stores/workspaceStore'
 import {
-  LiteGraph,
-  LGraph,
-  LLink,
-  LGraphNode,
-  LGraphGroup,
-  DragAndScale,
-  LGraphCanvas,
+  CanvasPointer,
   ContextMenu,
+  DragAndScale,
+  LGraph,
   LGraphBadge,
-  CanvasPointer
+  LGraphCanvas,
+  LGraphGroup,
+  LGraphNode,
+  LLink,
+  LiteGraph
 } from '@comfyorg/litegraph'
-import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
+import { computed, onMounted, ref, watch, watchEffect } from 'vue'
+
+import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
+import BottomPanel from '@/components/bottomPanel/BottomPanel.vue'
+import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
+import NodeBadge from '@/components/graph/NodeBadge.vue'
+import NodeTooltip from '@/components/graph/NodeTooltip.vue'
+import TitleEditor from '@/components/graph/TitleEditor.vue'
+import NodeSearchboxPopover from '@/components/searchbox/NodeSearchBoxPopover.vue'
+import SideToolbar from '@/components/sidebar/SideToolbar.vue'
+import { CORE_SETTINGS } from '@/constants/coreSettings'
+import { usePragmaticDroppable } from '@/hooks/dndHooks'
+import { api } from '@/scripts/api'
+import { app as comfyApp } from '@/scripts/app'
+import { ChangeTracker } from '@/scripts/changeTracker'
+import { setStorageValue } from '@/scripts/utils'
+import { IS_CONTROL_WIDGET, updateControlWidgetLabel } from '@/scripts/widgets'
+import { useColorPaletteService } from '@/services/colorPaletteService'
+import { useLitegraphService } from '@/services/litegraphService'
+import { useWorkflowService } from '@/services/workflowService'
+import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { ComfyModelDef } from '@/stores/modelStore'
 import {
   ModelNodeProvider,
   useModelToNodeStore
 } from '@/stores/modelToNodeStore'
-import GraphCanvasMenu from '@/components/graph/GraphCanvasMenu.vue'
-import { usePragmaticDroppable } from '@/hooks/dndHooks'
+import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import { useSettingStore } from '@/stores/settingStore'
 import { useWorkflowStore } from '@/stores/workflowStore'
-import { setStorageValue } from '@/scripts/utils'
-import { ChangeTracker } from '@/scripts/changeTracker'
-import { api } from '@/scripts/api'
-import { useCommandStore } from '@/stores/commandStore'
-import { useWorkflowService } from '@/services/workflowService'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
-import { useColorPaletteService } from '@/services/colorPaletteService'
-import { IS_CONTROL_WIDGET, updateControlWidgetLabel } from '@/scripts/widgets'
-import { CORE_SETTINGS } from '@/constants/coreSettings'
-import { useLitegraphService } from '@/services/litegraphService'
+import { useWorkspaceStore } from '@/stores/workspaceStore'
+import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 
 const emit = defineEmits(['ready'])
 const canvasRef = ref<HTMLCanvasElement | null>(null)

src/components/graph/GraphCanvasMenu.vue

@@ -50,14 +50,15 @@
 </template>
 
 <script setup lang="ts">
-import ButtonGroup from 'primevue/buttongroup'
+import { LiteGraph } from '@comfyorg/litegraph'
 import Button from 'primevue/button'
+import ButtonGroup from 'primevue/buttongroup'
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+
 import { useCommandStore } from '@/stores/commandStore'
 import { useCanvasStore } from '@/stores/graphStore'
 import { useSettingStore } from '@/stores/settingStore'
-import { useI18n } from 'vue-i18n'
-import { LiteGraph } from '@comfyorg/litegraph'
-import { computed } from 'vue'
 
 const { t } = useI18n()
 const commandStore = useCommandStore()

src/components/graph/NodeBadge.vue

@@ -5,16 +5,17 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onMounted, watch } from 'vue'
-import { useSettingStore } from '@/stores/settingStore'
-import { app } from '@/scripts/app'
 import type { LGraphNode } from '@comfyorg/litegraph'
 import { BadgePosition } from '@comfyorg/litegraph'
 import { LGraphBadge } from '@comfyorg/litegraph'
 import _ from 'lodash'
-import { NodeBadgeMode } from '@/types/nodeSource'
+import { computed, onMounted, watch } from 'vue'
+
+import { app } from '@/scripts/app'
 import { ComfyNodeDefImpl, useNodeDefStore } from '@/stores/nodeDefStore'
+import { useSettingStore } from '@/stores/settingStore'
 import { useColorPaletteStore } from '@/stores/workspace/colorPaletteStore'
+import { NodeBadgeMode } from '@/types/nodeSource'
 
 const settingStore = useSettingStore()
 const colorPaletteStore = useColorPaletteStore()

src/components/graph/NodeTooltip.vue

@@ -10,12 +10,13 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref } from 'vue'
 import { LiteGraph } from '@comfyorg/litegraph'
+import { useEventListener } from '@vueuse/core'
+import { nextTick, ref } from 'vue'
+
+import { st } from '@/i18n'
 import { app as comfyApp } from '@/scripts/app'
 import { useNodeDefStore } from '@/stores/nodeDefStore'
-import { useEventListener } from '@vueuse/core'
-import { st } from '@/i18n'
 import { normalizeI18nKey } from '@/utils/formatUtil'
 
 let idleTimeout: number

src/components/graph/TitleEditor.vue

@@ -13,14 +13,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, CSSProperties, watch } from 'vue'
-import { app } from '@/scripts/app'
 import { LGraphGroup, LGraphNode, LiteGraph } from '@comfyorg/litegraph'
-import EditableText from '@/components/common/EditableText.vue'
-import { useSettingStore } from '@/stores/settingStore'
 import type { LiteGraphCanvasEvent } from '@comfyorg/litegraph'
-import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
 import { useEventListener } from '@vueuse/core'
+import { CSSProperties, ref, watch } from 'vue'
+
+import EditableText from '@/components/common/EditableText.vue'
+import { app } from '@/scripts/app'
+import { useCanvasStore, useTitleEditorStore } from '@/stores/graphStore'
+import { useSettingStore } from '@/stores/settingStore'
 
 const settingStore = useSettingStore()
 

src/components/install/DesktopSettingsConfiguration.vue

@@ -97,10 +97,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
-import ToggleSwitch from 'primevue/toggleswitch'
 import Dialog from 'primevue/dialog'
 import Divider from 'primevue/divider'
+import ToggleSwitch from 'primevue/toggleswitch'
+import { ref } from 'vue'
 
 const showDialog = ref(false)
 const autoUpdate = defineModel('autoUpdate', { required: true })

src/components/install/GpuPicker.vue

@@ -130,12 +130,13 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
-import { electronAPI, TorchDeviceType } from '@/utils/envUtil'
-import ToggleSwitch from 'primevue/toggleswitch'
 import Tag from 'primevue/tag'
+import ToggleSwitch from 'primevue/toggleswitch'
+import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { TorchDeviceType, electronAPI } from '@/utils/envUtil'
+
 const { t } = useI18n()
 
 const cpuMode = computed({

src/components/install/InstallLocationPicker.vue

@@ -64,15 +64,16 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
-import { electronAPI } from '@/utils/envUtil'
-import InputText from 'primevue/inputtext'
 import Button from 'primevue/button'
 import IconField from 'primevue/iconfield'
 import InputIcon from 'primevue/inputicon'
+import InputText from 'primevue/inputtext'
 import Message from 'primevue/message'
+import { onMounted, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
+import { electronAPI } from '@/utils/envUtil'
+
 const { t } = useI18n()
 
 const installPath = defineModel<string>('installPath', { required: true })