feat: 增加很多插件

electron.vite.config.ts

@@ -1,7 +1,13 @@
 import { resolve } from "path"
 import { defineConfig, externalizeDepsPlugin } from "electron-vite"
 import vue from "@vitejs/plugin-vue"
+import vueJsx from "@vitejs/plugin-vue-jsx"
 import UnoCSS from "unocss/vite"
+import AutoImport from "unplugin-auto-import/vite"
+import Components from "unplugin-vue-components/vite"
+import VueMacros from "unplugin-vue-macros/vite"
+import { VueRouterAutoImports } from "unplugin-vue-router"
+import VueRouter from "unplugin-vue-router/vite"
 
 export default defineConfig({
     main: {
@@ -21,14 +27,14 @@ export default defineConfig({
         resolve: {
             alias: {
                 config: resolve("config"),
-                "@renderer": resolve("src/renderer/src"),
+                "@": resolve("src/renderer/src"),
                 "@res": resolve("resources"),
             },
         },
         css: {
             preprocessorOptions: {
                 scss: {
-                    additionalData: `@use "@renderer/assets/style/global" as *;\n`,
+                    additionalData: `@use "@/assets/style/global" as *;\n`,
                 },
             },
         },
@@ -40,6 +46,39 @@ export default defineConfig({
                 },
             },
         },
-        plugins: [UnoCSS(), vue()],
+        plugins: [
+            UnoCSS(),
+            VueMacros({
+                plugins: {
+                    vue: vue(),
+                    vueJsx: vueJsx(),
+                    vueRouter: VueRouter({
+                        root: resolve(__dirname, "src/renderer"),
+                        // https://github.com/posva/unplugin-vue-router
+                        extensions: [".vue", ".setup.tsx"],
+                    }),
+                },
+            }),
+            // https://github.com/antfu/unplugin-auto-import
+            AutoImport({
+                imports: [
+                    "vue",
+                    "@vueuse/core",
+                    VueRouterAutoImports,
+                    {
+                        // add any other imports you were relying on
+                        "vue-router/auto": ["useLink"],
+                    },
+                ],
+                dts: true,
+                dirs: ["src/composables"],
+                vueTemplate: true,
+            }),
+            // https://github.com/antfu/vite-plugin-components
+            Components({
+                dts: true,
+                dirs: ["src/components"],
+            }),
+        ],
     },
 })

package.json

@@ -24,37 +24,44 @@
         "build:linux": "npm run build && electron-builder --linux"
     },
     "dependencies": {
-        "@electron-toolkit/preload": "^3.0.0",
+        "@electron-toolkit/preload": "^3.0.1",
         "@electron-toolkit/utils": "^3.0.0",
         "@types/debug": "^4.1.12",
         "@unocss/reset": "^0.64.1",
-        "electron-updater": "^6.1.7",
-        "inversify": "^6.1.4",
+        "@vueuse/core": "^12.7.0",
+        "electron-updater": "^6.3.9",
+        "inversify": "^6.2.2",
         "lowdb": "^7.0.1",
         "reflect-metadata": "^0.2.2",
-        "sass": "^1.81.0"
+        "sass": "^1.85.0",
+        "unplugin-auto-import": "^19.1.0",
+        "unplugin-vue-components": "^28.4.0",
+        "unplugin-vue-macros": "^2.14.2",
+        "unplugin-vue-router": "^0.11.2",
+        "vue-router": "^4.5.0"
     },
     "devDependencies": {
         "@electron-toolkit/eslint-config": "^1.0.2",
         "@electron-toolkit/eslint-config-ts": "^2.0.0",
         "@electron-toolkit/tsconfig": "^1.0.1",
-        "@rushstack/eslint-patch": "^1.10.3",
-        "@types/node": "^20.15.0",
+        "@rushstack/eslint-patch": "^1.10.5",
+        "@types/node": "^20.17.19",
         "@unocss/preset-rem-to-px": "^0.64.1",
-        "@vitejs/plugin-vue": "^5.0.5",
+        "@vitejs/plugin-vue": "^5.2.1",
+        "@vitejs/plugin-vue-jsx": "^4.1.1",
         "@vue/eslint-config-prettier": "^9.0.0",
         "@vue/eslint-config-typescript": "^13.0.0",
         "debug": "^4.4.0",
-        "electron": "^31.0.2",
+        "electron": "^31.7.7",
         "electron-builder": "^24.13.3",
         "electron-vite": "^2.3.0",
-        "eslint": "^8.57.0",
-        "eslint-plugin-vue": "^9.26.0",
-        "prettier": "^3.3.2",
-        "typescript": "^5.5.2",
+        "eslint": "^8.57.1",
+        "eslint-plugin-vue": "^9.32.0",
+        "prettier": "^3.5.1",
+        "typescript": "^5.7.3",
         "unocss": "^0.64.1",
-        "vite": "^5.3.1",
-        "vue": "^3.5.12",
-        "vue-tsc": "^2.0.22"
+        "vite": "^5.4.14",
+        "vue": "^3.5.13",
+        "vue-tsc": "^2.1.10"
     }
 }

resources/fuck.html

@@ -6,7 +6,6 @@
     <title>Document</title>
 </head>
 <body>
-    dsada
-    <a href="https://baidu.com" target="_blank">百度</a>
+    前往 <a href="https://baidu.com" target="_blank">百度</a>
 </body>
 </html>

src/main/commands/BasicCommand.ts

@@ -1,6 +1,4 @@
 export default class BasicCommand {
-    static name: string = "BasicCommand"
-
     log() {
         console.log("1231")
     }

src/main/commands/TabsCommand.ts

@@ -4,8 +4,6 @@ import WindowManager from "main/modules/window-manager"
 import { broadcast } from "main/utils"
 
 class TabsCommand {
-    static name: string = "TabsCommand"
-
     constructor(
         @inject(Tabs) private _Tabs: Tabs,
         @inject(WindowManager) private _WindowManager: WindowManager,
@@ -24,6 +22,9 @@ class TabsCommand {
 
     sync() {
         this.listenerTabActive()
+        if (!this.getAllTabs().length) {
+            this.add("about:blank")
+        }
     }
 
     listenerTabActive() {

src/main/commands/_ioc.ts

@@ -3,8 +3,8 @@ import BasicCommand from "./BasicCommand"
 import TabsCommand from "./TabsCommand"
 
 const modules = new ContainerModule(bind => {
-    bind(BasicCommand.name).to(BasicCommand).inSingletonScope()
-    bind(TabsCommand.name).to(TabsCommand).inSingletonScope()
+    bind("BasicCommand").to(BasicCommand).inSingletonScope()
+    bind("TabsCommand").to(TabsCommand).inSingletonScope()
 })
 
 async function destroyAllCommand(ioc: Container) {

src/main/controller/BasicService.ts

@@ -5,8 +5,6 @@ import WindowManager from "main/modules/window-manager"
 
 @injectable()
 class BasicService extends BaseContainer {
-    static name: string = "BasicService"
-
     constructor(
         @inject(WindowManager) private _WindowManager: WindowManager,
         @inject(Tabs) private _Tabs: Tabs,

src/main/controller/TabsService.ts

@@ -5,8 +5,6 @@ import WindowManager from "main/modules/window-manager"
 
 @injectable()
 class TabsService extends BaseContainer {
-    static name: string = "TabsService"
-
     constructor(
         @inject(Tabs) private _Tabs: Tabs,
         @inject(WindowManager) private _WindowManager: WindowManager,

src/main/controller/_ioc.ts

@@ -3,8 +3,8 @@ import BasicService from "./BasicService"
 import TabsService from "./TabsService"
 
 const modules = new ContainerModule(bind => {
-    bind(BasicService.name).to(BasicService).inSingletonScope()
-    bind(TabsService.name).to(TabsService).inSingletonScope()
+    bind("BasicService").to(BasicService).inSingletonScope()
+    bind("TabsService").to(TabsService).inSingletonScope()
 })
 
 async function destroyAllController(ioc: Container) {

src/main/modules/tabs/Tab.ts

@@ -4,7 +4,7 @@ import BaseClass from "main/base/base"
 import _debug from "debug"
 // import { Layout } from "./Constant"
 import FuckHTML from "res/fuck.html?asset"
-import { fileURLToPath } from "node:url"
+import { fileURLToPath, pathToFileURL } from "node:url"
 
 const debug = _debug("app:tab")
 
@@ -35,12 +35,14 @@ class Tab extends BaseClass {
     public visible: boolean = false
     private webContentsView: WebContentsView | null = null
     private curWindow: BrowserWindow | null = null
-    private curRect: {
-        x: number
-        y: number
-        width: number
-        height: number
-    } | null = null
+    private curRect:
+        | {
+              x: number
+              y: number
+              width: number
+              height: number
+          }
+        | undefined = undefined
 
     private defaultOptions: IOption = {
         url: "",
@@ -57,7 +59,7 @@ class Tab extends BaseClass {
         return this._events
     }
 
-    constructor(options = {}, window: BrowserWindow, curRect: IRect) {
+    constructor(options = {}, window: BrowserWindow, curRect?: IRect) {
         super()
         this.listenResize = this.listenResize.bind(this)
         this.options = {
@@ -88,6 +90,7 @@ class Tab extends BaseClass {
                 this.webContentsView.webContents.destroy()
                 this.webContentsView = null
                 this.alive = false
+                this.events.emit("update")
             }
         }, 8000)
     }
@@ -107,6 +110,7 @@ class Tab extends BaseClass {
                 // , this.curWindow!.contentView.children.length - 1
                 this.curWindow!.contentView.addChildView(this.webContentsView!)
                 this.alive = true
+                this.events.emit("update")
             }
             this.listenResize()
             this.curWindow!.addListener("resize", this.listenResize)
@@ -214,7 +218,7 @@ class Tab extends BaseClass {
     private getUrl(url) {
         if (url === "about:blank") {
             debug(FuckHTML)
-            return FuckHTML
+            return pathToFileURL(FuckHTML).href
         }
         return url
     }

src/main/modules/window-manager/windowsMap.ts

@@ -60,6 +60,7 @@ export function getWindowsMap(): Record<string, IConfig> {
                 show: false,
                 titleBarStyle: "hidden",
                 titleBarOverlay: true,
+                icon: icon,
                 ...(process.platform === "linux" ? { icon } : {}),
                 webPreferences: {
                     webviewTag: false,
@@ -91,7 +92,7 @@ export function getWindowsMap(): Record<string, IConfig> {
                 frame: true,
                 transparent: false,
                 alwaysOnTop: false,
-                // icon: appIconPath,
+                icon: icon,
                 title: config.app_title,
                 webPreferences: {
                     devTools: false,
@@ -116,7 +117,7 @@ export function getWindowsMap(): Record<string, IConfig> {
                 modal: true,
                 show: false,
                 resizable: false,
-                // icon: appIconPath,
+                icon: icon,
                 webPreferences: {
                     devTools: false,
                     sandbox: false,

src/renderer/auto-imports.d.ts

@@ -0,0 +1,597 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
+  const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const computed: typeof import('vue')['computed']
+  const computedAsync: typeof import('@vueuse/core')['computedAsync']
+  const computedEager: typeof import('@vueuse/core')['computedEager']
+  const computedInject: typeof import('@vueuse/core')['computedInject']
+  const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
+  const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
+  const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const createApp: typeof import('vue')['createApp']
+  const createEventHook: typeof import('@vueuse/core')['createEventHook']
+  const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
+  const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
+  const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
+  const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
+  const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
+  const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
+  const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
+  const customRef: typeof import('vue')['customRef']
+  const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
+  const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
+  const effectScope: typeof import('vue')['effectScope']
+  const extendRef: typeof import('@vueuse/core')['extendRef']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+  const inject: typeof import('vue')['inject']
+  const injectLocal: typeof import('@vueuse/core')['injectLocal']
+  const isDefined: typeof import('@vueuse/core')['isDefined']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const makeDestructurable: typeof import('@vueuse/core')['makeDestructurable']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onClickOutside: typeof import('@vueuse/core')['onClickOutside']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onElementRemoval: typeof import('@vueuse/core')['onElementRemoval']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onKeyStroke: typeof import('@vueuse/core')['onKeyStroke']
+  const onLongPress: typeof import('@vueuse/core')['onLongPress']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
+  const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
+  const provide: typeof import('vue')['provide']
+  const provideLocal: typeof import('@vueuse/core')['provideLocal']
+  const reactify: typeof import('@vueuse/core')['reactify']
+  const reactifyObject: typeof import('@vueuse/core')['reactifyObject']
+  const reactive: typeof import('vue')['reactive']
+  const reactiveComputed: typeof import('@vueuse/core')['reactiveComputed']
+  const reactiveOmit: typeof import('@vueuse/core')['reactiveOmit']
+  const reactivePick: typeof import('@vueuse/core')['reactivePick']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const refAutoReset: typeof import('@vueuse/core')['refAutoReset']
+  const refDebounced: typeof import('@vueuse/core')['refDebounced']
+  const refDefault: typeof import('@vueuse/core')['refDefault']
+  const refThrottled: typeof import('@vueuse/core')['refThrottled']
+  const refWithControl: typeof import('@vueuse/core')['refWithControl']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveRef: typeof import('@vueuse/core')['resolveRef']
+  const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const syncRef: typeof import('@vueuse/core')['syncRef']
+  const syncRefs: typeof import('@vueuse/core')['syncRefs']
+  const templateRef: typeof import('@vueuse/core')['templateRef']
+  const throttledRef: typeof import('@vueuse/core')['throttledRef']
+  const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
+  const toRaw: typeof import('vue')['toRaw']
+  const toReactive: typeof import('@vueuse/core')['toReactive']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
+  const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
+  const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
+  const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
+  const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
+  const unref: typeof import('vue')['unref']
+  const unrefElement: typeof import('@vueuse/core')['unrefElement']
+  const until: typeof import('@vueuse/core')['until']
+  const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
+  const useAnimate: typeof import('@vueuse/core')['useAnimate']
+  const useArrayDifference: typeof import('@vueuse/core')['useArrayDifference']
+  const useArrayEvery: typeof import('@vueuse/core')['useArrayEvery']
+  const useArrayFilter: typeof import('@vueuse/core')['useArrayFilter']
+  const useArrayFind: typeof import('@vueuse/core')['useArrayFind']
+  const useArrayFindIndex: typeof import('@vueuse/core')['useArrayFindIndex']
+  const useArrayFindLast: typeof import('@vueuse/core')['useArrayFindLast']
+  const useArrayIncludes: typeof import('@vueuse/core')['useArrayIncludes']
+  const useArrayJoin: typeof import('@vueuse/core')['useArrayJoin']
+  const useArrayMap: typeof import('@vueuse/core')['useArrayMap']
+  const useArrayReduce: typeof import('@vueuse/core')['useArrayReduce']
+  const useArraySome: typeof import('@vueuse/core')['useArraySome']
+  const useArrayUnique: typeof import('@vueuse/core')['useArrayUnique']
+  const useAsyncQueue: typeof import('@vueuse/core')['useAsyncQueue']
+  const useAsyncState: typeof import('@vueuse/core')['useAsyncState']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useBase64: typeof import('@vueuse/core')['useBase64']
+  const useBattery: typeof import('@vueuse/core')['useBattery']
+  const useBluetooth: typeof import('@vueuse/core')['useBluetooth']
+  const useBreakpoints: typeof import('@vueuse/core')['useBreakpoints']
+  const useBroadcastChannel: typeof import('@vueuse/core')['useBroadcastChannel']
+  const useBrowserLocation: typeof import('@vueuse/core')['useBrowserLocation']
+  const useCached: typeof import('@vueuse/core')['useCached']
+  const useClipboard: typeof import('@vueuse/core')['useClipboard']
+  const useClipboardItems: typeof import('@vueuse/core')['useClipboardItems']
+  const useCloned: typeof import('@vueuse/core')['useCloned']
+  const useColorMode: typeof import('@vueuse/core')['useColorMode']
+  const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
+  const useCountdown: typeof import('@vueuse/core')['useCountdown']
+  const useCounter: typeof import('@vueuse/core')['useCounter']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVar: typeof import('@vueuse/core')['useCssVar']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useCurrentElement: typeof import('@vueuse/core')['useCurrentElement']
+  const useCycleList: typeof import('@vueuse/core')['useCycleList']
+  const useDark: typeof import('@vueuse/core')['useDark']
+  const useDateFormat: typeof import('@vueuse/core')['useDateFormat']
+  const useDebounce: typeof import('@vueuse/core')['useDebounce']
+  const useDebounceFn: typeof import('@vueuse/core')['useDebounceFn']
+  const useDebouncedRefHistory: typeof import('@vueuse/core')['useDebouncedRefHistory']
+  const useDeviceMotion: typeof import('@vueuse/core')['useDeviceMotion']
+  const useDeviceOrientation: typeof import('@vueuse/core')['useDeviceOrientation']
+  const useDevicePixelRatio: typeof import('@vueuse/core')['useDevicePixelRatio']
+  const useDevicesList: typeof import('@vueuse/core')['useDevicesList']
+  const useDisplayMedia: typeof import('@vueuse/core')['useDisplayMedia']
+  const useDocumentVisibility: typeof import('@vueuse/core')['useDocumentVisibility']
+  const useDraggable: typeof import('@vueuse/core')['useDraggable']
+  const useDropZone: typeof import('@vueuse/core')['useDropZone']
+  const useElementBounding: typeof import('@vueuse/core')['useElementBounding']
+  const useElementByPoint: typeof import('@vueuse/core')['useElementByPoint']
+  const useElementHover: typeof import('@vueuse/core')['useElementHover']
+  const useElementSize: typeof import('@vueuse/core')['useElementSize']
+  const useElementVisibility: typeof import('@vueuse/core')['useElementVisibility']
+  const useEventBus: typeof import('@vueuse/core')['useEventBus']
+  const useEventListener: typeof import('@vueuse/core')['useEventListener']
+  const useEventSource: typeof import('@vueuse/core')['useEventSource']
+  const useEyeDropper: typeof import('@vueuse/core')['useEyeDropper']
+  const useFavicon: typeof import('@vueuse/core')['useFavicon']
+  const useFetch: typeof import('@vueuse/core')['useFetch']
+  const useFileDialog: typeof import('@vueuse/core')['useFileDialog']
+  const useFileSystemAccess: typeof import('@vueuse/core')['useFileSystemAccess']
+  const useFocus: typeof import('@vueuse/core')['useFocus']
+  const useFocusWithin: typeof import('@vueuse/core')['useFocusWithin']
+  const useFps: typeof import('@vueuse/core')['useFps']
+  const useFullscreen: typeof import('@vueuse/core')['useFullscreen']
+  const useGamepad: typeof import('@vueuse/core')['useGamepad']
+  const useGeolocation: typeof import('@vueuse/core')['useGeolocation']
+  const useId: typeof import('vue')['useId']
+  const useIdle: typeof import('@vueuse/core')['useIdle']
+  const useImage: typeof import('@vueuse/core')['useImage']
+  const useInfiniteScroll: typeof import('@vueuse/core')['useInfiniteScroll']
+  const useIntersectionObserver: typeof import('@vueuse/core')['useIntersectionObserver']
+  const useInterval: typeof import('@vueuse/core')['useInterval']
+  const useIntervalFn: typeof import('@vueuse/core')['useIntervalFn']
+  const useKeyModifier: typeof import('@vueuse/core')['useKeyModifier']
+  const useLastChanged: typeof import('@vueuse/core')['useLastChanged']
+  const useLink: typeof import('vue-router/auto')['useLink']
+  const useLocalStorage: typeof import('@vueuse/core')['useLocalStorage']
+  const useMagicKeys: typeof import('@vueuse/core')['useMagicKeys']
+  const useManualRefHistory: typeof import('@vueuse/core')['useManualRefHistory']
+  const useMediaControls: typeof import('@vueuse/core')['useMediaControls']
+  const useMediaQuery: typeof import('@vueuse/core')['useMediaQuery']
+  const useMemoize: typeof import('@vueuse/core')['useMemoize']
+  const useMemory: typeof import('@vueuse/core')['useMemory']
+  const useModel: typeof import('vue')['useModel']
+  const useMounted: typeof import('@vueuse/core')['useMounted']
+  const useMouse: typeof import('@vueuse/core')['useMouse']
+  const useMouseInElement: typeof import('@vueuse/core')['useMouseInElement']
+  const useMousePressed: typeof import('@vueuse/core')['useMousePressed']
+  const useMutationObserver: typeof import('@vueuse/core')['useMutationObserver']
+  const useNavigatorLanguage: typeof import('@vueuse/core')['useNavigatorLanguage']
+  const useNetwork: typeof import('@vueuse/core')['useNetwork']
+  const useNow: typeof import('@vueuse/core')['useNow']
+  const useObjectUrl: typeof import('@vueuse/core')['useObjectUrl']
+  const useOffsetPagination: typeof import('@vueuse/core')['useOffsetPagination']
+  const useOnline: typeof import('@vueuse/core')['useOnline']
+  const usePageLeave: typeof import('@vueuse/core')['usePageLeave']
+  const useParallax: typeof import('@vueuse/core')['useParallax']
+  const useParentElement: typeof import('@vueuse/core')['useParentElement']
+  const usePerformanceObserver: typeof import('@vueuse/core')['usePerformanceObserver']
+  const usePermission: typeof import('@vueuse/core')['usePermission']
+  const usePointer: typeof import('@vueuse/core')['usePointer']
+  const usePointerLock: typeof import('@vueuse/core')['usePointerLock']
+  const usePointerSwipe: typeof import('@vueuse/core')['usePointerSwipe']
+  const usePreferredColorScheme: typeof import('@vueuse/core')['usePreferredColorScheme']
+  const usePreferredContrast: typeof import('@vueuse/core')['usePreferredContrast']
+  const usePreferredDark: typeof import('@vueuse/core')['usePreferredDark']
+  const usePreferredLanguages: typeof import('@vueuse/core')['usePreferredLanguages']
+  const usePreferredReducedMotion: typeof import('@vueuse/core')['usePreferredReducedMotion']
+  const usePreferredReducedTransparency: typeof import('@vueuse/core')['usePreferredReducedTransparency']
+  const usePrevious: typeof import('@vueuse/core')['usePrevious']
+  const useRafFn: typeof import('@vueuse/core')['useRafFn']
+  const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
+  const useResizeObserver: typeof import('@vueuse/core')['useResizeObserver']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSSRWidth: typeof import('@vueuse/core')['useSSRWidth']
+  const useScreenOrientation: typeof import('@vueuse/core')['useScreenOrientation']
+  const useScreenSafeArea: typeof import('@vueuse/core')['useScreenSafeArea']
+  const useScriptTag: typeof import('@vueuse/core')['useScriptTag']
+  const useScroll: typeof import('@vueuse/core')['useScroll']
+  const useScrollLock: typeof import('@vueuse/core')['useScrollLock']
+  const useSessionStorage: typeof import('@vueuse/core')['useSessionStorage']
+  const useShare: typeof import('@vueuse/core')['useShare']
+  const useSlots: typeof import('vue')['useSlots']
+  const useSorted: typeof import('@vueuse/core')['useSorted']
+  const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
+  const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
+  const useStepper: typeof import('@vueuse/core')['useStepper']
+  const useStorage: typeof import('@vueuse/core')['useStorage']
+  const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
+  const useStyleTag: typeof import('@vueuse/core')['useStyleTag']
+  const useSupported: typeof import('@vueuse/core')['useSupported']
+  const useSwipe: typeof import('@vueuse/core')['useSwipe']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
+  const useTemplateRefsList: typeof import('@vueuse/core')['useTemplateRefsList']
+  const useTest: typeof import('./src/composables/useTest')['useTest']
+  const useTextDirection: typeof import('@vueuse/core')['useTextDirection']
+  const useTextSelection: typeof import('@vueuse/core')['useTextSelection']
+  const useTextareaAutosize: typeof import('@vueuse/core')['useTextareaAutosize']
+  const useThrottle: typeof import('@vueuse/core')['useThrottle']
+  const useThrottleFn: typeof import('@vueuse/core')['useThrottleFn']
+  const useThrottledRefHistory: typeof import('@vueuse/core')['useThrottledRefHistory']
+  const useTimeAgo: typeof import('@vueuse/core')['useTimeAgo']
+  const useTimeout: typeof import('@vueuse/core')['useTimeout']
+  const useTimeoutFn: typeof import('@vueuse/core')['useTimeoutFn']
+  const useTimeoutPoll: typeof import('@vueuse/core')['useTimeoutPoll']
+  const useTimestamp: typeof import('@vueuse/core')['useTimestamp']
+  const useTitle: typeof import('@vueuse/core')['useTitle']
+  const useToNumber: typeof import('@vueuse/core')['useToNumber']
+  const useToString: typeof import('@vueuse/core')['useToString']
+  const useToggle: typeof import('@vueuse/core')['useToggle']
+  const useTransition: typeof import('@vueuse/core')['useTransition']
+  const useUrlSearchParams: typeof import('@vueuse/core')['useUrlSearchParams']
+  const useUserMedia: typeof import('@vueuse/core')['useUserMedia']
+  const useVModel: typeof import('@vueuse/core')['useVModel']
+  const useVModels: typeof import('@vueuse/core')['useVModels']
+  const useVibrate: typeof import('@vueuse/core')['useVibrate']
+  const useVirtualList: typeof import('@vueuse/core')['useVirtualList']
+  const useWakeLock: typeof import('@vueuse/core')['useWakeLock']
+  const useWebNotification: typeof import('@vueuse/core')['useWebNotification']
+  const useWebSocket: typeof import('@vueuse/core')['useWebSocket']
+  const useWebWorker: typeof import('@vueuse/core')['useWebWorker']
+  const useWebWorkerFn: typeof import('@vueuse/core')['useWebWorkerFn']
+  const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
+  const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
+  const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const watch: typeof import('vue')['watch']
+  const watchArray: typeof import('@vueuse/core')['watchArray']
+  const watchAtMost: typeof import('@vueuse/core')['watchAtMost']
+  const watchDebounced: typeof import('@vueuse/core')['watchDebounced']
+  const watchDeep: typeof import('@vueuse/core')['watchDeep']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchIgnorable: typeof import('@vueuse/core')['watchIgnorable']
+  const watchImmediate: typeof import('@vueuse/core')['watchImmediate']
+  const watchOnce: typeof import('@vueuse/core')['watchOnce']
+  const watchPausable: typeof import('@vueuse/core')['watchPausable']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  const watchThrottled: typeof import('@vueuse/core')['watchThrottled']
+  const watchTriggerable: typeof import('@vueuse/core')['watchTriggerable']
+  const watchWithFilter: typeof import('@vueuse/core')['watchWithFilter']
+  const whenever: typeof import('@vueuse/core')['whenever']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  import('vue')
+}
+
+// for vue template auto import
+import { UnwrapRef } from 'vue'
+declare module 'vue' {
+  interface GlobalComponents {}
+  interface ComponentCustomProperties {
+    readonly EffectScope: UnwrapRef<typeof import('vue')['EffectScope']>
+    readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
+    readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
+    readonly computed: UnwrapRef<typeof import('vue')['computed']>
+    readonly computedAsync: UnwrapRef<typeof import('@vueuse/core')['computedAsync']>
+    readonly computedEager: UnwrapRef<typeof import('@vueuse/core')['computedEager']>
+    readonly computedInject: UnwrapRef<typeof import('@vueuse/core')['computedInject']>
+    readonly computedWithControl: UnwrapRef<typeof import('@vueuse/core')['computedWithControl']>
+    readonly controlledComputed: UnwrapRef<typeof import('@vueuse/core')['controlledComputed']>
+    readonly controlledRef: UnwrapRef<typeof import('@vueuse/core')['controlledRef']>
+    readonly createApp: UnwrapRef<typeof import('vue')['createApp']>
+    readonly createEventHook: UnwrapRef<typeof import('@vueuse/core')['createEventHook']>
+    readonly createGlobalState: UnwrapRef<typeof import('@vueuse/core')['createGlobalState']>
+    readonly createInjectionState: UnwrapRef<typeof import('@vueuse/core')['createInjectionState']>
+    readonly createReactiveFn: UnwrapRef<typeof import('@vueuse/core')['createReactiveFn']>
+    readonly createReusableTemplate: UnwrapRef<typeof import('@vueuse/core')['createReusableTemplate']>
+    readonly createSharedComposable: UnwrapRef<typeof import('@vueuse/core')['createSharedComposable']>
+    readonly createTemplatePromise: UnwrapRef<typeof import('@vueuse/core')['createTemplatePromise']>
+    readonly createUnrefFn: UnwrapRef<typeof import('@vueuse/core')['createUnrefFn']>
+    readonly customRef: UnwrapRef<typeof import('vue')['customRef']>
+    readonly debouncedRef: UnwrapRef<typeof import('@vueuse/core')['debouncedRef']>
+    readonly debouncedWatch: UnwrapRef<typeof import('@vueuse/core')['debouncedWatch']>
+    readonly defineAsyncComponent: UnwrapRef<typeof import('vue')['defineAsyncComponent']>
+    readonly defineComponent: UnwrapRef<typeof import('vue')['defineComponent']>
+    readonly eagerComputed: UnwrapRef<typeof import('@vueuse/core')['eagerComputed']>
+    readonly effectScope: UnwrapRef<typeof import('vue')['effectScope']>
+    readonly extendRef: UnwrapRef<typeof import('@vueuse/core')['extendRef']>
+    readonly getCurrentInstance: UnwrapRef<typeof import('vue')['getCurrentInstance']>
+    readonly getCurrentScope: UnwrapRef<typeof import('vue')['getCurrentScope']>
+    readonly h: UnwrapRef<typeof import('vue')['h']>
+    readonly ignorableWatch: UnwrapRef<typeof import('@vueuse/core')['ignorableWatch']>
+    readonly inject: UnwrapRef<typeof import('vue')['inject']>
+    readonly injectLocal: UnwrapRef<typeof import('@vueuse/core')['injectLocal']>
+    readonly isDefined: UnwrapRef<typeof import('@vueuse/core')['isDefined']>
+    readonly isProxy: UnwrapRef<typeof import('vue')['isProxy']>
+    readonly isReactive: UnwrapRef<typeof import('vue')['isReactive']>
+    readonly isReadonly: UnwrapRef<typeof import('vue')['isReadonly']>
+    readonly isRef: UnwrapRef<typeof import('vue')['isRef']>
+    readonly makeDestructurable: UnwrapRef<typeof import('@vueuse/core')['makeDestructurable']>
+    readonly markRaw: UnwrapRef<typeof import('vue')['markRaw']>
+    readonly nextTick: UnwrapRef<typeof import('vue')['nextTick']>
+    readonly onActivated: UnwrapRef<typeof import('vue')['onActivated']>
+    readonly onBeforeMount: UnwrapRef<typeof import('vue')['onBeforeMount']>
+    readonly onBeforeRouteLeave: UnwrapRef<typeof import('vue-router')['onBeforeRouteLeave']>
+    readonly onBeforeRouteUpdate: UnwrapRef<typeof import('vue-router')['onBeforeRouteUpdate']>
+    readonly onBeforeUnmount: UnwrapRef<typeof import('vue')['onBeforeUnmount']>
+    readonly onBeforeUpdate: UnwrapRef<typeof import('vue')['onBeforeUpdate']>
+    readonly onClickOutside: UnwrapRef<typeof import('@vueuse/core')['onClickOutside']>
+    readonly onDeactivated: UnwrapRef<typeof import('vue')['onDeactivated']>
+    readonly onElementRemoval: UnwrapRef<typeof import('@vueuse/core')['onElementRemoval']>
+    readonly onErrorCaptured: UnwrapRef<typeof import('vue')['onErrorCaptured']>
+    readonly onKeyStroke: UnwrapRef<typeof import('@vueuse/core')['onKeyStroke']>
+    readonly onLongPress: UnwrapRef<typeof import('@vueuse/core')['onLongPress']>
+    readonly onMounted: UnwrapRef<typeof import('vue')['onMounted']>
+    readonly onRenderTracked: UnwrapRef<typeof import('vue')['onRenderTracked']>
+    readonly onRenderTriggered: UnwrapRef<typeof import('vue')['onRenderTriggered']>
+    readonly onScopeDispose: UnwrapRef<typeof import('vue')['onScopeDispose']>
+    readonly onServerPrefetch: UnwrapRef<typeof import('vue')['onServerPrefetch']>
+    readonly onStartTyping: UnwrapRef<typeof import('@vueuse/core')['onStartTyping']>
+    readonly onUnmounted: UnwrapRef<typeof import('vue')['onUnmounted']>
+    readonly onUpdated: UnwrapRef<typeof import('vue')['onUpdated']>
+    readonly onWatcherCleanup: UnwrapRef<typeof import('vue')['onWatcherCleanup']>
+    readonly pausableWatch: UnwrapRef<typeof import('@vueuse/core')['pausableWatch']>
+    readonly provide: UnwrapRef<typeof import('vue')['provide']>
+    readonly provideLocal: UnwrapRef<typeof import('@vueuse/core')['provideLocal']>
+    readonly reactify: UnwrapRef<typeof import('@vueuse/core')['reactify']>
+    readonly reactifyObject: UnwrapRef<typeof import('@vueuse/core')['reactifyObject']>
+    readonly reactive: UnwrapRef<typeof import('vue')['reactive']>
+    readonly reactiveComputed: UnwrapRef<typeof import('@vueuse/core')['reactiveComputed']>
+    readonly reactiveOmit: UnwrapRef<typeof import('@vueuse/core')['reactiveOmit']>
+    readonly reactivePick: UnwrapRef<typeof import('@vueuse/core')['reactivePick']>
+    readonly readonly: UnwrapRef<typeof import('vue')['readonly']>
+    readonly ref: UnwrapRef<typeof import('vue')['ref']>
+    readonly refAutoReset: UnwrapRef<typeof import('@vueuse/core')['refAutoReset']>
+    readonly refDebounced: UnwrapRef<typeof import('@vueuse/core')['refDebounced']>
+    readonly refDefault: UnwrapRef<typeof import('@vueuse/core')['refDefault']>
+    readonly refThrottled: UnwrapRef<typeof import('@vueuse/core')['refThrottled']>
+    readonly refWithControl: UnwrapRef<typeof import('@vueuse/core')['refWithControl']>
+    readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
+    readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
+    readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
+    readonly shallowReactive: UnwrapRef<typeof import('vue')['shallowReactive']>
+    readonly shallowReadonly: UnwrapRef<typeof import('vue')['shallowReadonly']>
+    readonly shallowRef: UnwrapRef<typeof import('vue')['shallowRef']>
+    readonly syncRef: UnwrapRef<typeof import('@vueuse/core')['syncRef']>
+    readonly syncRefs: UnwrapRef<typeof import('@vueuse/core')['syncRefs']>
+    readonly templateRef: UnwrapRef<typeof import('@vueuse/core')['templateRef']>
+    readonly throttledRef: UnwrapRef<typeof import('@vueuse/core')['throttledRef']>
+    readonly throttledWatch: UnwrapRef<typeof import('@vueuse/core')['throttledWatch']>
+    readonly toRaw: UnwrapRef<typeof import('vue')['toRaw']>
+    readonly toReactive: UnwrapRef<typeof import('@vueuse/core')['toReactive']>
+    readonly toRef: UnwrapRef<typeof import('vue')['toRef']>
+    readonly toRefs: UnwrapRef<typeof import('vue')['toRefs']>
+    readonly toValue: UnwrapRef<typeof import('vue')['toValue']>
+    readonly triggerRef: UnwrapRef<typeof import('vue')['triggerRef']>
+    readonly tryOnBeforeMount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeMount']>
+    readonly tryOnBeforeUnmount: UnwrapRef<typeof import('@vueuse/core')['tryOnBeforeUnmount']>
+    readonly tryOnMounted: UnwrapRef<typeof import('@vueuse/core')['tryOnMounted']>
+    readonly tryOnScopeDispose: UnwrapRef<typeof import('@vueuse/core')['tryOnScopeDispose']>
+    readonly tryOnUnmounted: UnwrapRef<typeof import('@vueuse/core')['tryOnUnmounted']>
+    readonly unref: UnwrapRef<typeof import('vue')['unref']>
+    readonly unrefElement: UnwrapRef<typeof import('@vueuse/core')['unrefElement']>
+    readonly until: UnwrapRef<typeof import('@vueuse/core')['until']>
+    readonly useActiveElement: UnwrapRef<typeof import('@vueuse/core')['useActiveElement']>
+    readonly useAnimate: UnwrapRef<typeof import('@vueuse/core')['useAnimate']>
+    readonly useArrayDifference: UnwrapRef<typeof import('@vueuse/core')['useArrayDifference']>
+    readonly useArrayEvery: UnwrapRef<typeof import('@vueuse/core')['useArrayEvery']>
+    readonly useArrayFilter: UnwrapRef<typeof import('@vueuse/core')['useArrayFilter']>
+    readonly useArrayFind: UnwrapRef<typeof import('@vueuse/core')['useArrayFind']>
+    readonly useArrayFindIndex: UnwrapRef<typeof import('@vueuse/core')['useArrayFindIndex']>
+    readonly useArrayFindLast: UnwrapRef<typeof import('@vueuse/core')['useArrayFindLast']>
+    readonly useArrayIncludes: UnwrapRef<typeof import('@vueuse/core')['useArrayIncludes']>
+    readonly useArrayJoin: UnwrapRef<typeof import('@vueuse/core')['useArrayJoin']>
+    readonly useArrayMap: UnwrapRef<typeof import('@vueuse/core')['useArrayMap']>
+    readonly useArrayReduce: UnwrapRef<typeof import('@vueuse/core')['useArrayReduce']>
+    readonly useArraySome: UnwrapRef<typeof import('@vueuse/core')['useArraySome']>
+    readonly useArrayUnique: UnwrapRef<typeof import('@vueuse/core')['useArrayUnique']>
+    readonly useAsyncQueue: UnwrapRef<typeof import('@vueuse/core')['useAsyncQueue']>
+    readonly useAsyncState: UnwrapRef<typeof import('@vueuse/core')['useAsyncState']>
+    readonly useAttrs: UnwrapRef<typeof import('vue')['useAttrs']>
+    readonly useBase64: UnwrapRef<typeof import('@vueuse/core')['useBase64']>
+    readonly useBattery: UnwrapRef<typeof import('@vueuse/core')['useBattery']>
+    readonly useBluetooth: UnwrapRef<typeof import('@vueuse/core')['useBluetooth']>
+    readonly useBreakpoints: UnwrapRef<typeof import('@vueuse/core')['useBreakpoints']>
+    readonly useBroadcastChannel: UnwrapRef<typeof import('@vueuse/core')['useBroadcastChannel']>
+    readonly useBrowserLocation: UnwrapRef<typeof import('@vueuse/core')['useBrowserLocation']>
+    readonly useCached: UnwrapRef<typeof import('@vueuse/core')['useCached']>
+    readonly useClipboard: UnwrapRef<typeof import('@vueuse/core')['useClipboard']>
+    readonly useClipboardItems: UnwrapRef<typeof import('@vueuse/core')['useClipboardItems']>
+    readonly useCloned: UnwrapRef<typeof import('@vueuse/core')['useCloned']>
+    readonly useColorMode: UnwrapRef<typeof import('@vueuse/core')['useColorMode']>
+    readonly useConfirmDialog: UnwrapRef<typeof import('@vueuse/core')['useConfirmDialog']>
+    readonly useCountdown: UnwrapRef<typeof import('@vueuse/core')['useCountdown']>
+    readonly useCounter: UnwrapRef<typeof import('@vueuse/core')['useCounter']>
+    readonly useCssModule: UnwrapRef<typeof import('vue')['useCssModule']>
+    readonly useCssVar: UnwrapRef<typeof import('@vueuse/core')['useCssVar']>
+    readonly useCssVars: UnwrapRef<typeof import('vue')['useCssVars']>
+    readonly useCurrentElement: UnwrapRef<typeof import('@vueuse/core')['useCurrentElement']>
+    readonly useCycleList: UnwrapRef<typeof import('@vueuse/core')['useCycleList']>
+    readonly useDark: UnwrapRef<typeof import('@vueuse/core')['useDark']>
+    readonly useDateFormat: UnwrapRef<typeof import('@vueuse/core')['useDateFormat']>
+    readonly useDebounce: UnwrapRef<typeof import('@vueuse/core')['useDebounce']>
+    readonly useDebounceFn: UnwrapRef<typeof import('@vueuse/core')['useDebounceFn']>
+    readonly useDebouncedRefHistory: UnwrapRef<typeof import('@vueuse/core')['useDebouncedRefHistory']>
+    readonly useDeviceMotion: UnwrapRef<typeof import('@vueuse/core')['useDeviceMotion']>
+    readonly useDeviceOrientation: UnwrapRef<typeof import('@vueuse/core')['useDeviceOrientation']>
+    readonly useDevicePixelRatio: UnwrapRef<typeof import('@vueuse/core')['useDevicePixelRatio']>
+    readonly useDevicesList: UnwrapRef<typeof import('@vueuse/core')['useDevicesList']>
+    readonly useDisplayMedia: UnwrapRef<typeof import('@vueuse/core')['useDisplayMedia']>
+    readonly useDocumentVisibility: UnwrapRef<typeof import('@vueuse/core')['useDocumentVisibility']>
+    readonly useDraggable: UnwrapRef<typeof import('@vueuse/core')['useDraggable']>
+    readonly useDropZone: UnwrapRef<typeof import('@vueuse/core')['useDropZone']>
+    readonly useElementBounding: UnwrapRef<typeof import('@vueuse/core')['useElementBounding']>
+    readonly useElementByPoint: UnwrapRef<typeof import('@vueuse/core')['useElementByPoint']>
+    readonly useElementHover: UnwrapRef<typeof import('@vueuse/core')['useElementHover']>
+    readonly useElementSize: UnwrapRef<typeof import('@vueuse/core')['useElementSize']>
+    readonly useElementVisibility: UnwrapRef<typeof import('@vueuse/core')['useElementVisibility']>
+    readonly useEventBus: UnwrapRef<typeof import('@vueuse/core')['useEventBus']>
+    readonly useEventListener: UnwrapRef<typeof import('@vueuse/core')['useEventListener']>
+    readonly useEventSource: UnwrapRef<typeof import('@vueuse/core')['useEventSource']>
+    readonly useEyeDropper: UnwrapRef<typeof import('@vueuse/core')['useEyeDropper']>
+    readonly useFavicon: UnwrapRef<typeof import('@vueuse/core')['useFavicon']>
+    readonly useFetch: UnwrapRef<typeof import('@vueuse/core')['useFetch']>
+    readonly useFileDialog: UnwrapRef<typeof import('@vueuse/core')['useFileDialog']>
+    readonly useFileSystemAccess: UnwrapRef<typeof import('@vueuse/core')['useFileSystemAccess']>
+    readonly useFocus: UnwrapRef<typeof import('@vueuse/core')['useFocus']>
+    readonly useFocusWithin: UnwrapRef<typeof import('@vueuse/core')['useFocusWithin']>
+    readonly useFps: UnwrapRef<typeof import('@vueuse/core')['useFps']>
+    readonly useFullscreen: UnwrapRef<typeof import('@vueuse/core')['useFullscreen']>
+    readonly useGamepad: UnwrapRef<typeof import('@vueuse/core')['useGamepad']>
+    readonly useGeolocation: UnwrapRef<typeof import('@vueuse/core')['useGeolocation']>
+    readonly useId: UnwrapRef<typeof import('vue')['useId']>
+    readonly useIdle: UnwrapRef<typeof import('@vueuse/core')['useIdle']>
+    readonly useImage: UnwrapRef<typeof import('@vueuse/core')['useImage']>
+    readonly useInfiniteScroll: UnwrapRef<typeof import('@vueuse/core')['useInfiniteScroll']>
+    readonly useIntersectionObserver: UnwrapRef<typeof import('@vueuse/core')['useIntersectionObserver']>
+    readonly useInterval: UnwrapRef<typeof import('@vueuse/core')['useInterval']>
+    readonly useIntervalFn: UnwrapRef<typeof import('@vueuse/core')['useIntervalFn']>
+    readonly useKeyModifier: UnwrapRef<typeof import('@vueuse/core')['useKeyModifier']>
+    readonly useLastChanged: UnwrapRef<typeof import('@vueuse/core')['useLastChanged']>
+    readonly useLink: UnwrapRef<typeof import('vue-router/auto')['useLink']>
+    readonly useLocalStorage: UnwrapRef<typeof import('@vueuse/core')['useLocalStorage']>
+    readonly useMagicKeys: UnwrapRef<typeof import('@vueuse/core')['useMagicKeys']>
+    readonly useManualRefHistory: UnwrapRef<typeof import('@vueuse/core')['useManualRefHistory']>
+    readonly useMediaControls: UnwrapRef<typeof import('@vueuse/core')['useMediaControls']>
+    readonly useMediaQuery: UnwrapRef<typeof import('@vueuse/core')['useMediaQuery']>
+    readonly useMemoize: UnwrapRef<typeof import('@vueuse/core')['useMemoize']>
+    readonly useMemory: UnwrapRef<typeof import('@vueuse/core')['useMemory']>
+    readonly useModel: UnwrapRef<typeof import('vue')['useModel']>
+    readonly useMounted: UnwrapRef<typeof import('@vueuse/core')['useMounted']>
+    readonly useMouse: UnwrapRef<typeof import('@vueuse/core')['useMouse']>
+    readonly useMouseInElement: UnwrapRef<typeof import('@vueuse/core')['useMouseInElement']>
+    readonly useMousePressed: UnwrapRef<typeof import('@vueuse/core')['useMousePressed']>
+    readonly useMutationObserver: UnwrapRef<typeof import('@vueuse/core')['useMutationObserver']>
+    readonly useNavigatorLanguage: UnwrapRef<typeof import('@vueuse/core')['useNavigatorLanguage']>
+    readonly useNetwork: UnwrapRef<typeof import('@vueuse/core')['useNetwork']>
+    readonly useNow: UnwrapRef<typeof import('@vueuse/core')['useNow']>
+    readonly useObjectUrl: UnwrapRef<typeof import('@vueuse/core')['useObjectUrl']>
+    readonly useOffsetPagination: UnwrapRef<typeof import('@vueuse/core')['useOffsetPagination']>
+    readonly useOnline: UnwrapRef<typeof import('@vueuse/core')['useOnline']>
+    readonly usePageLeave: UnwrapRef<typeof import('@vueuse/core')['usePageLeave']>
+    readonly useParallax: UnwrapRef<typeof import('@vueuse/core')['useParallax']>
+    readonly useParentElement: UnwrapRef<typeof import('@vueuse/core')['useParentElement']>
+    readonly usePerformanceObserver: UnwrapRef<typeof import('@vueuse/core')['usePerformanceObserver']>
+    readonly usePermission: UnwrapRef<typeof import('@vueuse/core')['usePermission']>
+    readonly usePointer: UnwrapRef<typeof import('@vueuse/core')['usePointer']>
+    readonly usePointerLock: UnwrapRef<typeof import('@vueuse/core')['usePointerLock']>
+    readonly usePointerSwipe: UnwrapRef<typeof import('@vueuse/core')['usePointerSwipe']>
+    readonly usePreferredColorScheme: UnwrapRef<typeof import('@vueuse/core')['usePreferredColorScheme']>
+    readonly usePreferredContrast: UnwrapRef<typeof import('@vueuse/core')['usePreferredContrast']>
+    readonly usePreferredDark: UnwrapRef<typeof import('@vueuse/core')['usePreferredDark']>
+    readonly usePreferredLanguages: UnwrapRef<typeof import('@vueuse/core')['usePreferredLanguages']>
+    readonly usePreferredReducedMotion: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedMotion']>
+    readonly usePreferredReducedTransparency: UnwrapRef<typeof import('@vueuse/core')['usePreferredReducedTransparency']>
+    readonly usePrevious: UnwrapRef<typeof import('@vueuse/core')['usePrevious']>
+    readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
+    readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
+    readonly useResizeObserver: UnwrapRef<typeof import('@vueuse/core')['useResizeObserver']>
+    readonly useRoute: UnwrapRef<typeof import('vue-router')['useRoute']>
+    readonly useRouter: UnwrapRef<typeof import('vue-router')['useRouter']>
+    readonly useSSRWidth: UnwrapRef<typeof import('@vueuse/core')['useSSRWidth']>
+    readonly useScreenOrientation: UnwrapRef<typeof import('@vueuse/core')['useScreenOrientation']>
+    readonly useScreenSafeArea: UnwrapRef<typeof import('@vueuse/core')['useScreenSafeArea']>
+    readonly useScriptTag: UnwrapRef<typeof import('@vueuse/core')['useScriptTag']>
+    readonly useScroll: UnwrapRef<typeof import('@vueuse/core')['useScroll']>
+    readonly useScrollLock: UnwrapRef<typeof import('@vueuse/core')['useScrollLock']>
+    readonly useSessionStorage: UnwrapRef<typeof import('@vueuse/core')['useSessionStorage']>
+    readonly useShare: UnwrapRef<typeof import('@vueuse/core')['useShare']>
+    readonly useSlots: UnwrapRef<typeof import('vue')['useSlots']>
+    readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
+    readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
+    readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
+    readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
+    readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
+    readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>
+    readonly useStyleTag: UnwrapRef<typeof import('@vueuse/core')['useStyleTag']>
+    readonly useSupported: UnwrapRef<typeof import('@vueuse/core')['useSupported']>
+    readonly useSwipe: UnwrapRef<typeof import('@vueuse/core')['useSwipe']>
+    readonly useTemplateRef: UnwrapRef<typeof import('vue')['useTemplateRef']>
+    readonly useTemplateRefsList: UnwrapRef<typeof import('@vueuse/core')['useTemplateRefsList']>
+    readonly useTest: UnwrapRef<typeof import('./src/composables/useTest')['useTest']>
+    readonly useTextDirection: UnwrapRef<typeof import('@vueuse/core')['useTextDirection']>
+    readonly useTextSelection: UnwrapRef<typeof import('@vueuse/core')['useTextSelection']>
+    readonly useTextareaAutosize: UnwrapRef<typeof import('@vueuse/core')['useTextareaAutosize']>
+    readonly useThrottle: UnwrapRef<typeof import('@vueuse/core')['useThrottle']>
+    readonly useThrottleFn: UnwrapRef<typeof import('@vueuse/core')['useThrottleFn']>
+    readonly useThrottledRefHistory: UnwrapRef<typeof import('@vueuse/core')['useThrottledRefHistory']>
+    readonly useTimeAgo: UnwrapRef<typeof import('@vueuse/core')['useTimeAgo']>
+    readonly useTimeout: UnwrapRef<typeof import('@vueuse/core')['useTimeout']>
+    readonly useTimeoutFn: UnwrapRef<typeof import('@vueuse/core')['useTimeoutFn']>
+    readonly useTimeoutPoll: UnwrapRef<typeof import('@vueuse/core')['useTimeoutPoll']>
+    readonly useTimestamp: UnwrapRef<typeof import('@vueuse/core')['useTimestamp']>
+    readonly useTitle: UnwrapRef<typeof import('@vueuse/core')['useTitle']>
+    readonly useToNumber: UnwrapRef<typeof import('@vueuse/core')['useToNumber']>
+    readonly useToString: UnwrapRef<typeof import('@vueuse/core')['useToString']>
+    readonly useToggle: UnwrapRef<typeof import('@vueuse/core')['useToggle']>
+    readonly useTransition: UnwrapRef<typeof import('@vueuse/core')['useTransition']>
+    readonly useUrlSearchParams: UnwrapRef<typeof import('@vueuse/core')['useUrlSearchParams']>
+    readonly useUserMedia: UnwrapRef<typeof import('@vueuse/core')['useUserMedia']>
+    readonly useVModel: UnwrapRef<typeof import('@vueuse/core')['useVModel']>
+    readonly useVModels: UnwrapRef<typeof import('@vueuse/core')['useVModels']>
+    readonly useVibrate: UnwrapRef<typeof import('@vueuse/core')['useVibrate']>
+    readonly useVirtualList: UnwrapRef<typeof import('@vueuse/core')['useVirtualList']>
+    readonly useWakeLock: UnwrapRef<typeof import('@vueuse/core')['useWakeLock']>
+    readonly useWebNotification: UnwrapRef<typeof import('@vueuse/core')['useWebNotification']>
+    readonly useWebSocket: UnwrapRef<typeof import('@vueuse/core')['useWebSocket']>
+    readonly useWebWorker: UnwrapRef<typeof import('@vueuse/core')['useWebWorker']>
+    readonly useWebWorkerFn: UnwrapRef<typeof import('@vueuse/core')['useWebWorkerFn']>
+    readonly useWindowFocus: UnwrapRef<typeof import('@vueuse/core')['useWindowFocus']>
+    readonly useWindowScroll: UnwrapRef<typeof import('@vueuse/core')['useWindowScroll']>
+    readonly useWindowSize: UnwrapRef<typeof import('@vueuse/core')['useWindowSize']>
+    readonly watch: UnwrapRef<typeof import('vue')['watch']>
+    readonly watchArray: UnwrapRef<typeof import('@vueuse/core')['watchArray']>
+    readonly watchAtMost: UnwrapRef<typeof import('@vueuse/core')['watchAtMost']>
+    readonly watchDebounced: UnwrapRef<typeof import('@vueuse/core')['watchDebounced']>
+    readonly watchDeep: UnwrapRef<typeof import('@vueuse/core')['watchDeep']>
+    readonly watchEffect: UnwrapRef<typeof import('vue')['watchEffect']>
+    readonly watchIgnorable: UnwrapRef<typeof import('@vueuse/core')['watchIgnorable']>
+    readonly watchImmediate: UnwrapRef<typeof import('@vueuse/core')['watchImmediate']>
+    readonly watchOnce: UnwrapRef<typeof import('@vueuse/core')['watchOnce']>
+    readonly watchPausable: UnwrapRef<typeof import('@vueuse/core')['watchPausable']>
+    readonly watchPostEffect: UnwrapRef<typeof import('vue')['watchPostEffect']>
+    readonly watchSyncEffect: UnwrapRef<typeof import('vue')['watchSyncEffect']>
+    readonly watchThrottled: UnwrapRef<typeof import('@vueuse/core')['watchThrottled']>
+    readonly watchTriggerable: UnwrapRef<typeof import('@vueuse/core')['watchTriggerable']>
+    readonly watchWithFilter: UnwrapRef<typeof import('@vueuse/core')['watchWithFilter']>
+    readonly whenever: UnwrapRef<typeof import('@vueuse/core')['whenever']>
+  }
+}

src/renderer/components.d.ts

@@ -0,0 +1,17 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    AdjustLine: typeof import('./src/components/AdjustLine.vue')['default']
+    NavBar: typeof import('./src/components/NavBar.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Versions: typeof import('./src/components/Versions.vue')['default']
+  }
+}

src/renderer/src/App.vue

@@ -1,178 +1,10 @@
-<script setup lang="ts">
-import NavBar from "@renderer/components/NavBar.vue"
-import { onBeforeMount, onBeforeUnmount, onMounted, ref, useTemplateRef } from "vue"
-import { PopupMenu } from "./bridge/PopupMenu"
-
-const PlaceHolderRef = useTemplateRef("PlaceHolder")
-function OnResize() {
-    const el = PlaceHolderRef.value
-    if (el) {
-        const rect = el.getBoundingClientRect().toJSON()
-        console.log(rect)
-        api.call("TabsCommand.bindElement", rect)
-    }
-}
-onMounted(OnResize)
-window.addEventListener("resize", OnResize)
-onBeforeUnmount(() => {
-    window.removeEventListener("resize", OnResize)
-})
-
-const list = ref<any[]>([])
-const curUrl = ref<any>("")
-const curIndex = ref<any>(-1)
-const listener = (_, v) => {
-    list.value = v
-    const el = v.find(v => v.isActive)
-    curIndex.value = v.findIndex(v => v.isActive)
-    if (el) {
-        curUrl.value = el.showUrl
-    } else {
-        curUrl.value = ""
-    }
-}
-if (import.meta.hot) {
-    api.off("TabsCommand.update", listener)
-}
-api.on("TabsCommand.update", listener)
-onMounted(() => {
-    api.call("TabsCommand.sync")
-})
-
-onBeforeMount(async () => {
-    list.value = await fetch("api://fuck/TabsService/getAllTabs").then(async res => await res.json())
-})
-
-// const url = ref("")
-
-// async function addTab() {
-//     if (!url.value) url.value = "about:blank"
-//     await fetch("api://fuck/TabsService/add", {
-//         method: "POST",
-//         body: JSON.stringify({ url: url.value }),
-//     })
-//     url.value = ""
-//     onClick()
-// }
-
-function handleTabContextMenu(_, index) {
-    const menu = new PopupMenu([
-        {
-            label: "右侧关闭",
-            click() {
-                const all: number[] = []
-                list.value.forEach((_, i) => {
-                    if (i <= index) return
-                    all.push(i)
-                })
-                fetch("api://fuck/TabsService/closeTabAll", {
-                    method: "POST",
-                    body: JSON.stringify({ active: all }),
-                })
-            },
-        },
-        {
-            type: "separator",
-        },
-    ])
-    menu.show()
-}
-
-function changeTab(_, index) {
-    api.call("TabsCommand.setActive", index)
-}
-
-function addTabInput() {
-    if (curUrl.value) {
-        if (curIndex.value !== undefined && curIndex.value >= 0) {
-            api.call("TabsCommand.nagivate", curIndex.value, curUrl.value)
-        } else {
-            api.call("TabsCommand.add", curUrl.value)
-        }
-    }
-}
-function addTab() {
-    api.call("TabsCommand.add", "about:blank")
-}
-
-async function closeTab(_, index) {
-    await fetch("api://fuck/TabsService/closeTab", {
-        method: "POST",
-        body: JSON.stringify({ active: index }),
-    })
-    onClick()
-}
-
-const onClick = async () => {
-    list.value = await api.call("TabsCommand.getAllTabs")
-    // list.value = await fetch("api://fuck/TabsService/getAllTabs").then(async res => await res.json())
-    // fetch("api://fuck/BasicService/showAbout").then(async res => console.log(await res.json()))
-    // fetch("api://index/openAbout", {
-    //     method: "POST",
-    //     body: JSON.stringify({ a: "234" }),
-    // }).then(async res => console.log(await res.json()))
-}
-
-function onClickDevTool() {
-    fetch("api://fuck/BasicService/openTabDevtool")
-}
-</script>
+<script setup lang="ts"></script>
 
 <template>
     <div h-full flex flex-col>
         <NavBar></NavBar>
-        <div ml="200px" b-l="1px solid #E5E5E5" flex-1 h-0 overflow-auto flex flex-col>
-            <div h="100px" flex flex-col b-b="1px solid #E5E5E5">
-                <div flex gap-1 my-1 px-1 w-full>
-                    <div
-                        v-for="(item, index) in list"
-                        :key="index"
-                        p-1
-                        b-b="1px solid gray"
-                        b-l="1px solid gray"
-                        b-r="1px solid gray"
-                        :b-t="item.isActive ? '1px solid red' : '1px solid gray'"
-                        flex
-                        flex-1
-                        w-0
-                        items-center
-                        cursor="pointer"
-                        gap="5px"
-                        max-w="200px"
-                        @contextmenu="handleTabContextMenu(item, index)"
-                        @click="changeTab(item, index)"
-                    >
-                        <div flex-1 w-0 line-1 text-normal>{{ item.title || "加载中..." }}</div>
-                        <span p-1 rounded hover="bg-gray-2 text-hover" @click.stop="closeTab(item, index)">X</span>
-                    </div>
-                    <div
-                        p-1
-                        b-b="1px solid gray"
-                        b-l="1px solid gray"
-                        b-r="1px solid gray"
-                        b-t="1px solid gray"
-                        flex
-                        items-center
-                        cursor="pointer"
-                        gap="5px"
-                        hover="bg-gray-2 text-hover"
-                    >
-                        <span p-1 rounded @click.stop="addTab()">+</span>
-                    </div>
-                </div>
-                <div mx="5px" overflow="auto" flex-1 h-0 flex items-center gap-x="5px">
-                    <div flex-1 w-0 h="35px" px-3 rounded="35px" b="1px solid gray-4" flex items-center>
-                        <input v-model="curUrl" placeholder="输入点什么" w-full text="16px" b-0 leading="25px" outline-0 type="text" />
-                    </div>
-                    <div inline-block hover="bg-gray-2 text-hover" px-1 py-1 rounded cursor="pointer" @click="addTabInput()">
-                        <button text="14px" bg-transparent b-0 cursor="pointer">前往</button>
-                    </div>
-                    <div inline-block hover="bg-gray-2 text-hover" px-1 py-1 rounded cursor="pointer" @click="onClickDevTool()">
-                        <button text="14px" bg-transparent b-0 cursor="pointer">DevTool</button>
-                    </div>
-                </div>
-            </div>
-            <div ref="PlaceHolder" ml="1px" flex-1 h-0 flex items-center justify-center>fuck</div>
+        <div flex-1 h-0>
+            <RouterView></RouterView>
         </div>
     </div>
 </template>

src/renderer/src/components/AdjustLine.vue

@@ -0,0 +1,279 @@
+<template>
+    <div class="adjust-line" :class="['adjust-line__' + direction]" ref="adjustLineEL"></div>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, ref, watch } from "vue"
+
+const adjustLineEL = ref<HTMLElement>()
+
+type IProps = {
+    /**
+     * 所在方向 'left' | 'right' | 'top' | 'bottom'
+     */
+    direction?: "left" | "right" | "top" | "bottom"
+    /**
+     * 需要调整的元素
+     */
+    target?: HTMLElement
+    /**
+     * 两个调整线时需要填写
+     */
+    watch?: HTMLElement
+    /**
+     * 唯一ID
+     */
+    mid?: string
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+    direction: "right",
+})
+
+let curTarget: HTMLElement | undefined | null
+
+onMounted(async () => {
+    await nextTick()
+    if (!props.target) {
+        curTarget = adjustLineEL.value?.parentElement
+    } else {
+        curTarget = props.target
+    }
+    if (curTarget) {
+        handle(curTarget)
+    }
+    watch(
+        () => props.target,
+        target => {
+            curTarget = target
+            if (curTarget) {
+                handle(curTarget)
+            }
+        },
+    )
+})
+
+function handle(target: HTMLElement) {
+    if (!adjustLineEL.value) return
+    const nextContainer = target
+    const el = adjustLineEL.value
+    const container = el.parentElement
+    const parentContainer = container?.parentElement
+    const watchContainer = props.watch
+    let isThree = false
+    if (container !== nextContainer) {
+        isThree = true
+    }
+    if (nextContainer && el && container && parentContainer) {
+        if (props.direction === "left" || props.direction === "right") {
+            if (props.mid) {
+                let w = localStorage.getItem(props.mid)
+                if (w != undefined) {
+                    container.style.width = w + "px"
+                }
+            }
+            el.onmousedown = function (e) {
+                let width = container.clientWidth
+                let nwidth = nextContainer.clientWidth
+                // let owidth = nwidth + width
+                let owidth = parentContainer.clientWidth
+                let wwidth = watchContainer?.clientWidth ?? 0
+
+                if (isThree) {
+                    owidth = nwidth + width
+                }
+
+                let startX = e.clientX
+
+                let lastPointerEvents = document.body.style.pointerEvents
+                let lastUserSelect = document.body.style.userSelect
+                let lastOnmousemove = document.onmousemove
+                let lastOnmouseup = document.onmouseup
+                document.onmousemove = function (e) {
+                    let nowX = e.clientX
+                    let w = 0
+                    let offset = startX - nowX
+                    if (props.direction == "left") {
+                        w = width + offset
+                    }
+                    if (props.direction == "right") {
+                        w = width - offset
+                    }
+                    if (w >= owidth) {
+                        w = owidth
+                    }
+                    if (w <= 0) {
+                        w = 0
+                    }
+                    // if (Math.abs(w - owidth / 2) <= 10) {
+                    //     w = owidth / 2
+                    // }
+                    // if (Math.abs(w - owidth) < 10) {
+                    //     w = owidth
+                    // }
+                    // if (Math.abs(w) < 10) {
+                    //     w = 0
+                    // }
+                    document.body.style.pointerEvents = "none"
+                    document.body.style.userSelect = "none"
+                    if (!isThree && watchContainer) {
+                        let ww = wwidth - offset
+                        if (width >= -offset) {
+                            watchContainer.style.width = ww + "px"
+                        }
+                        nextContainer.style.width = w + "px"
+                    } else {
+                        if (!isThree) {
+                            nextContainer.style.width = w + "px"
+                            // nextContainer.style.minWidth = w + 'px'
+                            // nextContainer.style.flexBasis = w + 'px'
+                        } else {
+                            nextContainer.style.width = owidth - w + "px"
+                            // nextContainer.style.minWidth = (owidth-w) + 'px'
+                            // nextContainer.style.flexBasis = (owidth - w) + 'px'
+                        }
+                    }
+                }
+                document.onmouseup = function () {
+                    document.onmousemove = lastOnmousemove
+                    document.onmouseup = lastOnmouseup
+                    document.body.style.pointerEvents = lastPointerEvents
+                    document.body.style.userSelect = lastUserSelect
+                    if (props.mid) {
+                        let width = container.clientWidth
+                        localStorage.setItem(props.mid, String(width))
+                    }
+                }
+            }
+        }
+        if (props.direction === "top" || props.direction === "bottom") {
+            if (props.mid) {
+                let w = localStorage.getItem(props.mid)
+                if (w != undefined) {
+                    container.style.height = w + "px"
+                }
+            }
+            el.onmousedown = function (e) {
+                let height = container.clientHeight
+                let nheight = nextContainer.clientHeight
+                // let oheight = nheight + height
+                let oheight = parentContainer.clientHeight
+                let hheight = watchContainer?.clientHeight ?? 0
+                if (isThree) {
+                    oheight = nheight + height
+                }
+
+                let startY = e.clientY
+
+                let lastPointerEvents = document.body.style.pointerEvents
+                let lastUserSelect = document.body.style.userSelect
+                let lastOnmousemove = document.onmousemove
+                let lastOnmouseup = document.onmouseup
+
+                document.onmousemove = function (e) {
+                    let nowY = e.clientY
+                    let h = 0
+                    let offset = startY - nowY
+                    if (props.direction == "top") {
+                        h = height + startY - nowY
+                    }
+                    if (props.direction == "bottom") {
+                        h = height - offset
+                    }
+                    console.log(oheight)
+
+                    if (h >= oheight) {
+                        h = oheight
+                    }
+                    if (h <= 0) {
+                        h = 0
+                    }
+                    // if (Math.abs(h - oheight / 2) <= 15) {
+                    //     h = oheight / 2
+                    // }
+                    // if (Math.abs(h - oheight) < 50) {
+                    //     h = oheight
+                    // }
+                    // if (Math.abs(h) < 50) {
+                    //     h = 0
+                    // }
+                    document.body.style.pointerEvents = "none"
+                    document.body.style.userSelect = "none"
+                    if (!isThree && watchContainer) {
+                        let hh = hheight - offset
+                        if (height >= -offset) {
+                            watchContainer.style.height = hh + "px"
+                        }
+                        nextContainer.style.height = h + "px"
+                    } else {
+                        if (!isThree) {
+                            nextContainer.style.height = h + "px"
+                            // nextContainer.style.minHeight = h + 'px'
+                            // nextContainer.style.flexBasis = h + 'px'
+                        } else {
+                            nextContainer.style.height = oheight - h + "px"
+                            // nextContainer.style.minHeight = (oheight - h) + 'px'
+                            // nextContainer.style.flexBasis = (oheight - h) + 'px'
+                        }
+                    }
+                }
+                document.onmouseup = function () {
+                    document.onmousemove = lastOnmousemove
+                    document.onmouseup = lastOnmouseup
+                    document.body.style.pointerEvents = lastPointerEvents
+                    document.body.style.userSelect = lastUserSelect
+                    if (props.mid) {
+                        let height = container.clientHeight
+                        localStorage.setItem(props.mid, String(height))
+                    }
+                }
+            }
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.adjust-line {
+    position: absolute;
+    z-index: 999;
+    transition: background-color 0.5s ease;
+
+    &:hover,
+    &:active {
+        background: #1976d2;
+    }
+
+    &__left {
+        left: -2px;
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        cursor: ew-resize;
+    }
+
+    &__top {
+        top: -2px;
+        left: 0;
+        right: 0;
+        height: 4px;
+        cursor: n-resize;
+    }
+
+    &__bottom {
+        bottom: -2px;
+        left: 0;
+        right: 0;
+        height: 4px;
+        cursor: n-resize;
+    }
+
+    &__right {
+        right: -2px;
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        cursor: ew-resize;
+    }
+}
+</style>

src/renderer/src/composables/useTest.ts

@@ -0,0 +1,3 @@
+export function useTest() {
+    console.log("test")
+}

src/renderer/src/env.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="vite/client" />
+/// <reference types="unplugin-vue-router/client" />
 
 declare module "*.vue" {
     import type { DefineComponent } from "vue"

src/renderer/src/main.ts

@@ -1,8 +1,12 @@
 import "virtual:uno.css"
 import "@unocss/reset/normalize.css"
-import "@renderer/assets/style/_common.scss"
+import "@/assets/style/_common.scss"
 
 import { createApp } from "vue"
 import App from "./App.vue"
 
-createApp(App).mount("#app")
+import router from "./router"
+
+const app = createApp(App)
+app.use(router as any)
+app.mount("#app")

src/renderer/src/pages/[...all].vue

@@ -0,0 +1,3 @@
+<template>
+    <div>Not Found</div>
+</template>

src/renderer/src/pages/index.vue

@@ -0,0 +1,191 @@
+<script setup lang="ts">
+import { onBeforeMount, onBeforeUnmount, onMounted, ref, useTemplateRef } from "vue"
+import { PopupMenu } from "@/bridge/PopupMenu"
+
+// const PlaceHolderRef = useTemplateRef("PlaceHolder")
+// function OnResize() {
+//     const el = PlaceHolderRef.value
+//     if (el) {
+//         const rect = el.getBoundingClientRect().toJSON()
+//         console.log(rect)
+//         api.call("TabsCommand.bindElement", rect)
+//     }
+// }
+// onMounted(OnResize)
+// window.addEventListener("resize", OnResize)
+// onBeforeUnmount(() => {
+//     window.removeEventListener("resize", OnResize)
+// })
+
+const PlaceHolder = useTemplateRef("PlaceHolder")
+const { stop } = useResizeObserver(PlaceHolder, () => {
+    const el = PlaceHolder.value
+    if (el) {
+        const rect = el.getBoundingClientRect().toJSON()
+        api.call("TabsCommand.bindElement", rect)
+    }
+})
+onBeforeUnmount(() => {
+    stop()
+})
+
+const list = ref<any[]>([])
+const curUrl = ref<any>("")
+const curIndex = ref<any>(-1)
+const listener = (_, v) => {
+    list.value = v
+    const el = v.find(v => v.isActive)
+    curIndex.value = v.findIndex(v => v.isActive)
+    if (el) {
+        curUrl.value = el.showUrl
+    } else {
+        curUrl.value = ""
+    }
+}
+if (import.meta.hot) {
+    api.off("TabsCommand.update", listener)
+}
+api.on("TabsCommand.update", listener)
+onMounted(() => {
+    api.call("TabsCommand.sync")
+})
+
+onBeforeMount(async () => {
+    list.value = await fetch("api://fuck/TabsService/getAllTabs").then(async res => await res.json())
+})
+
+// const url = ref("")
+
+// async function addTab() {
+//     if (!url.value) url.value = "about:blank"
+//     await fetch("api://fuck/TabsService/add", {
+//         method: "POST",
+//         body: JSON.stringify({ url: url.value }),
+//     })
+//     url.value = ""
+//     onClick()
+// }
+
+function handleTabContextMenu(_, index) {
+    const menu = new PopupMenu([
+        {
+            label: "右侧关闭",
+            click() {
+                const all: number[] = []
+                list.value.forEach((_, i) => {
+                    if (i <= index) return
+                    all.push(i)
+                })
+                fetch("api://fuck/TabsService/closeTabAll", {
+                    method: "POST",
+                    body: JSON.stringify({ active: all }),
+                })
+            },
+        },
+        {
+            type: "separator",
+        },
+    ])
+    menu.show()
+}
+
+function changeTab(_, index) {
+    api.call("TabsCommand.setActive", index)
+}
+
+function addTabInput() {
+    if (curUrl.value) {
+        if (curIndex.value !== undefined && curIndex.value >= 0) {
+            api.call("TabsCommand.nagivate", curIndex.value, curUrl.value)
+        } else {
+            api.call("TabsCommand.add", curUrl.value)
+        }
+    }
+}
+function addTab() {
+    api.call("TabsCommand.add", "about:blank")
+}
+
+async function closeTab(_, index) {
+    await fetch("api://fuck/TabsService/closeTab", {
+        method: "POST",
+        body: JSON.stringify({ active: index }),
+    })
+    onClick()
+}
+
+const onClick = async () => {
+    list.value = await api.call("TabsCommand.getAllTabs")
+    // list.value = await fetch("api://fuck/TabsService/getAllTabs").then(async res => await res.json())
+    // fetch("api://fuck/BasicService/showAbout").then(async res => console.log(await res.json()))
+    // fetch("api://index/openAbout", {
+    //     method: "POST",
+    //     body: JSON.stringify({ a: "234" }),
+    // }).then(async res => console.log(await res.json()))
+}
+
+function onClickDevTool() {
+    fetch("api://fuck/BasicService/openTabDevtool")
+}
+</script>
+
+<template>
+    <div h-full flex>
+        <div w="200px" relative>
+            <AdjustLine></AdjustLine>
+        </div>
+        <div b-l="1px solid #E5E5E5" flex-1 w-0 overflow-auto flex flex-col>
+            <div h="100px" flex flex-col b-b="1px solid #E5E5E5">
+                <div flex gap-1 my-1 px-1 w-full>
+                    <div
+                        v-for="(item, index) in list"
+                        :key="index"
+                        p-1
+                        b-b="1px solid gray"
+                        b-l="1px solid gray"
+                        b-r="1px solid gray"
+                        :b-t="item.isActive ? '1px solid red' : '1px solid gray'"
+                        flex
+                        flex-1
+                        w-0
+                        items-center
+                        cursor="pointer"
+                        gap="5px"
+                        max-w="200px"
+                        @contextmenu="handleTabContextMenu(item, index)"
+                        @click="changeTab(item, index)"
+                    >
+                        <div flex-1 w-0 line-1 text-normal>{{ item.title || "加载中..." }}</div>
+                        <span p-1 rounded hover="bg-gray-2 text-hover" @click.stop="closeTab(item, index)">X</span>
+                    </div>
+                    <div
+                        p-1
+                        b-b="1px solid gray"
+                        b-l="1px solid gray"
+                        b-r="1px solid gray"
+                        b-t="1px solid gray"
+                        flex
+                        items-center
+                        cursor="pointer"
+                        gap="5px"
+                        hover="bg-gray-2 text-hover"
+                    >
+                        <span p-1 rounded @click.stop="addTab()">+</span>
+                    </div>
+                </div>
+                <div mx="5px" overflow="auto" flex-1 h-0 flex items-center gap-x="5px">
+                    <div flex-1 w-0 h="35px" px-3 rounded="35px" b="1px solid gray-4" flex items-center>
+                        <input v-model="curUrl" placeholder="输入点什么" w-full text="16px" b-0 leading="25px" outline-0 type="text" />
+                    </div>
+                    <div inline-block hover="bg-gray-2 text-hover" px-1 py-1 rounded cursor="pointer" @click="addTabInput()">
+                        <button text="14px" bg-transparent b-0 cursor="pointer">前往</button>
+                    </div>
+                    <div inline-block hover="bg-gray-2 text-hover" px-1 py-1 rounded cursor="pointer" @click="onClickDevTool()">
+                        <button text="14px" bg-transparent b-0 cursor="pointer">DevTool</button>
+                    </div>
+                </div>
+            </div>
+            <div ref="PlaceHolder" ml="1px" flex-1 h-0 flex items-center justify-center>fuck</div>
+        </div>
+    </div>
+</template>

src/renderer/src/router/index.ts

@@ -0,0 +1,11 @@
+import { createWebHashHistory, createRouter } from "vue-router"
+import { routes } from "vue-router/auto-routes"
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes,
+})
+
+export { router }
+
+export default router

src/renderer/typed-router.d.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/[...all]': RouteRecordInfo<'/[...all]', '/:all(.*)', { all: ParamValue<true> }, { all: ParamValue<false> }>,
+  }
+}

tsconfig.web.json

@@ -1,22 +1,30 @@
 {
   "extends": "@electron-toolkit/tsconfig/tsconfig.web.json",
   "include": [
+      "src/renderer/auto-imports.d.ts",
+      "src/renderer/components.d.ts",
     "src/renderer/src/env.d.ts",
     "src/renderer/src/**/*",
     "src/renderer/src/**/*.vue",
     "src/preload/*.d.ts",
     "src/types/**/*",
-    "config/**/*"
+    "config/**/*",
+    "./typed-router.d.ts",
   ],
+  "vueCompilerOptions": {
+    "plugins": ["unplugin-vue-macros/volar"],
+  },
   "compilerOptions": {
     "composite": true,
     "baseUrl": ".",
+    "moduleResolution": "Bundler",
+    "types": ["unplugin-vue-macros/macros-global"],
     "paths": {
       "#": ["src/types/index"],
       "#/*": ["src/types/*"],
       "config": ["config/index.ts"],
       "config/*": ["config/*"],
-      "@renderer/*": [
+      "@/*": [
         "src/renderer/src/*"
       ],
       "@res/*": [

typed-router.d.ts

@@ -0,0 +1,24 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-router. ‼️ DO NOT MODIFY THIS FILE ‼️
+// It's recommended to commit this file.
+// Make sure to add this file to your tsconfig.json file as an "includes" or "files" entry.
+
+declare module 'vue-router/auto-routes' {
+  import type {
+    RouteRecordInfo,
+    ParamValue,
+    ParamValueOneOrMore,
+    ParamValueZeroOrMore,
+    ParamValueZeroOrOne,
+  } from 'vue-router'
+
+  /**
+   * Route name map generated by unplugin-vue-router
+   */
+  export interface RouteNamedMap {
+    '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/[...all]': RouteRecordInfo<'/[...all]', '/:all(.*)', { all: ParamValue<true> }, { all: ParamValue<false> }>,
+  }
+}

vue-macros.config.ts

@@ -0,0 +1,4 @@
+import { defineConfig } from "unplugin-vue-macros"
+export default defineConfig({
+    // 选项
+})