feat：增加库

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
     "[typescript]": {
-        "editor.defaultFormatter": "vscode.typescript-language-features"
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[javascript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"

electron.vite.config.ts

@@ -8,6 +8,7 @@ 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"
+import Layouts from "vite-plugin-vue-layouts"
 
 export default defineConfig({
     main: {
@@ -56,10 +57,17 @@ export default defineConfig({
                         root: resolve(__dirname, "src/renderer"),
                         // https://github.com/posva/unplugin-vue-router
                         extensions: [".vue", ".setup.tsx"],
-                        exclude: ['**/_ui']
+                        exclude: ["**/_ui"],
                     }),
                 },
             }),
+            Layouts({
+                layoutsDirs: "src/layouts",
+                pagesDirs: "src/pages",
+                defaultLayout: "default",
+                extensions: ["vue", "setup.tsx"],
+                exclude: ["**/_ui"],
+            }),
             // https://github.com/antfu/unplugin-auto-import
             AutoImport({
                 imports: [

package.json

@@ -59,9 +59,11 @@
         "eslint": "^8.57.1",
         "eslint-plugin-vue": "^9.32.0",
         "prettier": "^3.5.1",
+        "simplebar-vue": "^2.4.0",
         "typescript": "^5.7.3",
         "unocss": "^0.64.1",
         "vite": "^5.4.14",
+        "vite-plugin-vue-layouts": "^0.11.0",
         "vue": "^3.5.13",
         "vue-tsc": "^2.1.10"
     }

packages/IPC/common/utils.ts

@@ -1,5 +0,0 @@
-import { webContents } from "electron"
-
-export const broadcast = (event: string, ...args: any[]) => {
-    webContents.getAllWebContents().forEach(browser => browser.send(event, ...args))
-}

packages/IPC/package.json

@@ -1,12 +0,0 @@
-{
-  "name": "z-ipc",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC"
-}

packages/IPC/tsconfig.json

@@ -1,4 +0,0 @@
-{
-    "files": [],
-    "references": [{ "path": "./tsconfig.node.json" }, { "path": "./tsconfig.web.json" }]
-  }

packages/IPC/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "extends": "@electron-toolkit/tsconfig/tsconfig.node.json",
-  "include": ["main/**/*", "preload/**/*", "common/**/*", "types/**/*"],
-  "compilerOptions": {
-    "composite": true,
-    "emitDecoratorMetadata": true,
-    "experimentalDecorators": true,
-    "types": ["electron-vite/node"],
-  }
-}

packages/IPC/tsconfig.web.json

@@ -1,12 +0,0 @@
-{
-  "extends": "@electron-toolkit/tsconfig/tsconfig.web.json",
-  "include": [
-    "renderer/**/*",
-    "preload/**/*",
-    "common/**/*",
-    "types/**/*"
-  ],
-  "compilerOptions": {
-    "composite": true
-  }
-}

pnpm-lock.yaml

@@ -92,7 +92,7 @@ importers:
         version: 31.7.7
       electron-builder:
         specifier: ^24.13.3
-        version: 24.13.3(electron-builder-squirrel-windows@24.13.3)
+        version: 24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3))
       electron-vite:
         specifier: ^2.3.0
         version: 2.3.0(vite@5.4.14(@types/node@20.17.19)(sass@1.85.0))
@@ -105,6 +105,9 @@ importers:
       prettier:
         specifier: ^3.5.1
         version: 3.5.1
+      simplebar-vue:
+        specifier: ^2.4.0
+        version: 2.4.0(vue@3.5.13(typescript@5.7.3))
       typescript:
         specifier: ^5.7.3
         version: 5.7.3
@@ -114,6 +117,9 @@ importers:
       vite:
         specifier: ^5.4.14
         version: 5.4.14(@types/node@20.17.19)(sass@1.85.0)
+      vite-plugin-vue-layouts:
+        specifier: ^0.11.0
+        version: 0.11.0(vite@5.4.14(@types/node@20.17.19)(sass@1.85.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3))
       vue:
         specifier: ^3.5.13
         version: 3.5.13(typescript@5.7.3)
@@ -121,8 +127,6 @@ importers:
         specifier: ^2.1.10
         version: 2.1.10(typescript@5.7.3)
 
-  packages/IPC: {}
-
 packages:
 
   7zip-bin@5.2.0:
@@ -748,25 +752,21 @@ packages:
     resolution: {integrity: sha512-eEwxY+0Cf76HnQwr1+Qy48qwf4dAebTHaKhzEgxLqLK6szbglnK6SThjY95YHrYWwsH1GujWiFoX51jwZNYfSw==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-resolver/binding-linux-arm64-musl@3.0.3':
     resolution: {integrity: sha512-LdxbLv8qVkzro4/ZoP9MuytIL6NOVsbhoZ5Wl1KXOa/2DSxBiksrAPMSChCTyeLy6P3ebSHxQSb52ku18t1LBA==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-resolver/binding-linux-x64-gnu@3.0.3':
     resolution: {integrity: sha512-bN8elR9AV/DZZPdcteOWWElkz8KyxLtOvmfVl7Dnehcs6f9e+fWYKyqiKvva1jsxG4znGKCPT1gfMhpYW8QuKg==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxc-resolver/binding-linux-x64-musl@3.0.3':
     resolution: {integrity: sha512-Zy1U49BjriwbAds2ho6CGjZIk2KVn0+lrc/G5bvhQg7UJYxEkAueMGBuA5rULIhx9xVtIPsT9Q+J5Xhb4ffVNw==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxc-resolver/binding-wasm32-wasi@3.0.3':
     resolution: {integrity: sha512-7rteQnn7i5f9nkFZs1VRdBqFhvOx3zWavyKkWjXYVxc9vsSLTg0moh2MRZw5dw5m/bEi1u/p3YAKJ9gdHyBhNQ==}
@@ -812,42 +812,36 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.0':
     resolution: {integrity: sha512-6uHywSIzz8+vi2lAzFeltnYbdHsDm3iIB57d4g5oaB9vKwjb6N6dRIgZMujw4nm5r6v9/BQH0noq6DzHrqr2pA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.0':
     resolution: {integrity: sha512-BfNjXwZKxBy4WibDb/LDCriWSKLz+jJRL3cM/DllnHH5QUyoiUNEp3GmL80ZqxeumoADfCCP19+qiYiC8gUBjA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.0':
     resolution: {integrity: sha512-S1qARKOphxfiBEkwLUbHjCY9BWPdWnW9j7f7Hb2jPplu8UZ3nes7zpPOW9bkLbHRvWM0WDTsjdOTUgW0xLBN1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.0':
     resolution: {integrity: sha512-d9AOkusyXARkFD66S6zlGXyzx5RvY+chTP9Jp0ypSTC9d4lzyRs9ovGf/80VCxjKddcUvnsGwCHWuF2EoPgWjw==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.0':
     resolution: {integrity: sha512-iqOC+GoTDoFyk/VYSFHwjHhYrk8bljW6zOhPuhi5t9ulqiYq1togGJB5e3PwYVFFfeVgc6pbz3JdQyDoBszVaA==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.0':
     resolution: {integrity: sha512-twtft1d+JRNkM5YbmexfcH/N4znDtjgysFaV9zvZmmJezQsKpkfLYJ+JFV3uygugK6AtIM2oADPkB2AdhBrNig==}
@@ -934,55 +928,46 @@ packages:
     resolution: {integrity: sha512-paHF1bMXKDuizaMODm2bBTjRiHxESWiIyIdMugKeLnjuS1TCS54MF5+Y5Dx8Ui/1RBPVRE09i5OUlaLnv8OGnA==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.26.0':
     resolution: {integrity: sha512-cwxiHZU1GAs+TMxvgPfUDtVZjdBdTsQwVnNlzRXC5QzIJ6nhfB4I1ahKoe9yPmoaA/Vhf7m9dB1chGPpDRdGXg==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.26.0':
     resolution: {integrity: sha512-4daeEUQutGRCW/9zEo8JtdAgtJ1q2g5oHaoQaZbMSKaIWKDQwQ3Yx0/3jJNmpzrsScIPtx/V+1AfibLisb3AMQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.26.0':
     resolution: {integrity: sha512-eGkX7zzkNxvvS05ROzJ/cO/AKqNvR/7t1jA3VZDi2vRniLKwAWxUr85fH3NsvtxU5vnUUKFHKh8flIBdlo2b3Q==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.26.0':
     resolution: {integrity: sha512-Odp/lgHbW/mAqw/pU21goo5ruWsytP7/HCC/liOt0zcGG0llYWKrd10k9Fj0pdj3prQ63N5yQLCLiE7HTX+MYw==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.26.0':
     resolution: {integrity: sha512-MBR2ZhCTzUgVD0OJdTzNeF4+zsVogIR1U/FsyuFerwcqjZGvg2nYe24SAHp8O5sN8ZkRVbHwlYeHqcSQ8tcYew==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.26.0':
     resolution: {integrity: sha512-YYcg8MkbN17fMbRMZuxwmxWqsmQufh3ZJFxFGoHjrE7bv0X+T6l3glcdzd7IKLiwhT+PZOJCblpnNlz1/C3kGQ==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.26.0':
     resolution: {integrity: sha512-ZuwpfjCwjPkAOxpjAEjabg6LRSfL7cAJb6gSQGZYjGhadlzKKywDkCUnJ+KEfrNY1jH5EEoSIKLCb572jSiglA==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.26.0':
     resolution: {integrity: sha512-+HJD2lFS86qkeF8kNu0kALtifMpPCZU80HvwztIKnYwym3KnA1os6nsX4BGSTLtS2QVAGG1P3guRgsYyMA0Yhg==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.26.0':
     resolution: {integrity: sha512-WUQzVFWPSw2uJzX4j6YEbMAiLbs0BUysgysh8s817doAYhR5ybqTI1wtKARQKo6cGop3pHnrUJPFCsXdoFaimQ==}
@@ -2882,6 +2867,14 @@ packages:
     resolution: {integrity: sha512-a2B9Y0KlNXl9u/vsW6sTIu9vGEpfKu2wRV6l1H3XEas/0gUIzGzBoP/IouTcUQbm9JWZLH3COxyn03TYlFax6w==}
     engines: {node: '>=10'}
 
+  simplebar-core@1.3.0:
+    resolution: {integrity: sha512-LpWl3w0caz0bl322E68qsrRPpIn+rWBGAaEJ0lUJA7Xpr2sw92AkIhg6VWj988IefLXYh50ILatfAnbNoCFrlA==}
+
+  simplebar-vue@2.4.0:
+    resolution: {integrity: sha512-XUFGqoTCjzTKRWLHmS0/gy03GF7Id9FZhczrAqC3tbFO5OZ9vRCdzMZ7F2MuCI5+fp6Plpvug9GUgyBDJLTc5A==}
+    peerDependencies:
+      vue: '>=2.5.17'
+
   sirv@2.0.4:
     resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
     engines: {node: '>= 10'}
@@ -3189,6 +3182,13 @@ packages:
     resolution: {integrity: sha512-veufcmxri4e3XSrT0xwfUR7kguIkaxBeosDg00yDWhk49wdwkSUrvvsm7nc75e1PUyvIeZj6nS8VQRYz2/S4Xg==}
     engines: {node: '>=0.6.0'}
 
+  vite-plugin-vue-layouts@0.11.0:
+    resolution: {integrity: sha512-uh6NW7lt+aOXujK4eHfiNbeo55K9OTuB7fnv+5RVc4OBn/cZull6ThXdYH03JzKanUfgt6QZ37NbbtJ0og59qw==}
+    peerDependencies:
+      vite: ^4.0.0 || ^5.0.0
+      vue: ^3.2.4
+      vue-router: ^4.0.11
+
   vite@5.4.14:
     resolution: {integrity: sha512-EK5cY7Q1D8JNhSaPKVK4pwBFvaTmZxEnoKXLG/U9gmdDcihQGNzFlgIvaxezFR4glP1LsuiedwMBqCXH3wZccA==}
     engines: {node: ^18.0.0 || >=20.0.0}
@@ -3223,6 +3223,17 @@ packages:
   vscode-uri@3.0.8:
     resolution: {integrity: sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==}
 
+  vue-demi@0.13.11:
+    resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==}
+    engines: {node: '>=12'}
+    hasBin: true
+    peerDependencies:
+      '@vue/composition-api': ^1.0.0-rc.1
+      vue: ^3.0.0-0 || ^2.6.0
+    peerDependenciesMeta:
+      '@vue/composition-api':
+        optional: true
+
   vue-eslint-parser@9.4.3:
     resolution: {integrity: sha512-2rYRLWlIpaiN8xbPiDyXZXRgLGOtWxERV7ND5fFAv5qo1D2N9Fu9MNajBNc6o13lZ+24DAWCkQCvj4klgmcITg==}
     engines: {node: ^14.17.0 || >=16.0.0}
@@ -4839,7 +4850,7 @@ snapshots:
 
   app-builder-bin@4.0.0: {}
 
-  app-builder-lib@24.13.3(dmg-builder@24.13.3)(electron-builder-squirrel-windows@24.13.3):
+  app-builder-lib@24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)):
     dependencies:
       '@develar/schema-utils': 2.6.5
       '@electron/notarize': 2.2.1
@@ -5216,7 +5227,7 @@ snapshots:
 
   dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3):
     dependencies:
-      app-builder-lib: 24.13.3(dmg-builder@24.13.3)(electron-builder-squirrel-windows@24.13.3)
+      app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3))
       builder-util: 24.13.1
       builder-util-runtime: 9.2.4
       fs-extra: 10.1.0
@@ -5258,7 +5269,7 @@ snapshots:
 
   electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3):
     dependencies:
-      app-builder-lib: 24.13.3(dmg-builder@24.13.3)(electron-builder-squirrel-windows@24.13.3)
+      app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3))
       archiver: 5.3.2
       builder-util: 24.13.1
       fs-extra: 10.1.0
@@ -5266,9 +5277,9 @@ snapshots:
       - dmg-builder
       - supports-color
 
-  electron-builder@24.13.3(electron-builder-squirrel-windows@24.13.3):
+  electron-builder@24.13.3(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3)):
     dependencies:
-      app-builder-lib: 24.13.3(dmg-builder@24.13.3)(electron-builder-squirrel-windows@24.13.3)
+      app-builder-lib: 24.13.3(dmg-builder@24.13.3(electron-builder-squirrel-windows@24.13.3))(electron-builder-squirrel-windows@24.13.3(dmg-builder@24.13.3))
       builder-util: 24.13.1
       builder-util-runtime: 9.2.4
       chalk: 4.1.2
@@ -6386,6 +6397,18 @@ snapshots:
     dependencies:
       semver: 7.6.3
 
+  simplebar-core@1.3.0:
+    dependencies:
+      lodash: 4.17.21
+
+  simplebar-vue@2.4.0(vue@3.5.13(typescript@5.7.3)):
+    dependencies:
+      simplebar-core: 1.3.0
+      vue: 3.5.13(typescript@5.7.3)
+      vue-demi: 0.13.11(vue@3.5.13(typescript@5.7.3))
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+
   sirv@2.0.4:
     dependencies:
       '@polka/url': 1.0.0-next.28
@@ -6785,6 +6808,16 @@ snapshots:
       extsprintf: 1.4.1
     optional: true
 
+  vite-plugin-vue-layouts@0.11.0(vite@5.4.14(@types/node@20.17.19)(sass@1.85.0))(vue-router@4.5.0(vue@3.5.13(typescript@5.7.3)))(vue@3.5.13(typescript@5.7.3)):
+    dependencies:
+      debug: 4.4.0
+      fast-glob: 3.3.3
+      vite: 5.4.14(@types/node@20.17.19)(sass@1.85.0)
+      vue: 3.5.13(typescript@5.7.3)
+      vue-router: 4.5.0(vue@3.5.13(typescript@5.7.3))
+    transitivePeerDependencies:
+      - supports-color
+
   vite@5.4.14(@types/node@20.17.19)(sass@1.85.0):
     dependencies:
       esbuild: 0.21.5
@@ -6797,6 +6830,10 @@ snapshots:
 
   vscode-uri@3.0.8: {}
 
+  vue-demi@0.13.11(vue@3.5.13(typescript@5.7.3)):
+    dependencies:
+      vue: 3.5.13(typescript@5.7.3)
+
   vue-eslint-parser@9.4.3(eslint@8.57.1):
     dependencies:
       debug: 4.4.0

src/renderer/index.html

@@ -5,15 +5,22 @@
     <meta charset="UTF-8" />
     <title>Electron</title>
     <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
-    <meta http-equiv="Content-Security-Policy" content="default-src 'self' api: 'unsafe-inline'; 
-             script-src 'self' api:; 
-             style-src 'self' 'unsafe-inline'; 
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self' api: 'unsafe-inline';
+             script-src 'self' api:;
+             style-src 'self' 'unsafe-inline';
              img-src 'self' data: *;" />
 </head>
 
 <body>
     <div id="app"></div>
+    <noscript>
+        <style>
+          [data-simplebar] {
+            overflow: auto;
+          }
+        </style>
+    </noscript>
     <script type="module" src="/src/main.ts"></script>
 </body>
 
-</html>
+</html>

src/renderer/src/App.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts"></script>
 
 <template>
-    <div h-full flex flex-col>
-        <NavBar></NavBar>
-        <div flex-1 h-0>
-            <RouterView></RouterView>
-        </div>
-    </div>
+    <router-view v-slot="{ Component, route }">
+        <transition name="slide">
+            <component :is="Component" :key="route" />
+        </transition>
+    </router-view>
 </template>

src/renderer/src/assets/libs/scrollbot.ts

@@ -0,0 +1,246 @@
+interface ScrollStyle {
+    [key: string]: string
+}
+
+class Scrollbot {
+    private orgPar!: HTMLElement
+    private sbw: number = 5
+    private scrollSpeed: number = 200
+    private parContent!: string
+    private newPar!: HTMLDivElement
+    private sbContainer!: HTMLDivElement
+    private scrollBarHolder!: HTMLDivElement
+    private scrollBar!: HTMLDivElement
+    private inP!: HTMLDivElement
+    private sbHeight: number = 0
+    private mdown: boolean = false
+    private customHeight: boolean = false
+    private scrollElement!: HTMLElement
+    private onScrollF?: () => void
+    private sB: ScrollStyle = {}
+    private sBH: ScrollStyle = {}
+    private posCorrection: number = 0
+    private btmCorrection: number = 0
+    private relY: number = 0
+    private pC: number = 0
+
+    getDom(selector: string | HTMLElement) {
+        if (typeof selector === "string") {
+            return document.querySelector<HTMLElement>(selector)
+        }
+        return selector
+    }
+
+    constructor(selector: string | HTMLElement, width?: number) {
+        const element = this.getDom(selector)
+        if (!element) throw new Error("Element not found")
+        this.orgPar = element
+
+        const ieVersion = this.isIE()
+        if (!ieVersion || (ieVersion && ieVersion < 9)) {
+            this.init(width)
+        }
+    }
+
+    private init(width?: number): void {
+        this.sbw = width ?? 5
+        this.parContent = this.orgPar.innerHTML
+        this.orgPar.innerHTML = ""
+
+        this.setupElements()
+        this.setupStyles()
+        this.setupEventListeners()
+        this.refresh()
+    }
+
+    private setupElements(): void {
+        this.newPar = document.createElement("div")
+        this.sbContainer = document.createElement("div")
+        this.scrollBarHolder = document.createElement("div")
+        this.scrollBar = document.createElement("div")
+        this.inP = document.createElement("div")
+
+        this.newPar.className = "scrollbot-outer-parent"
+        this.scrollBarHolder.className = "scrollbot-scrollbar-holder"
+        this.scrollBar.className = "scrollbot-scrollbar"
+        this.inP.className = "scrollbot-inner-parent"
+
+        this.inP.innerHTML = this.parContent
+        this.newPar.appendChild(this.inP)
+        this.scrollBarHolder.appendChild(this.scrollBar)
+        this.newPar.appendChild(this.scrollBarHolder)
+        this.orgPar.appendChild(this.newPar)
+    }
+
+    private setupStyles(): void {
+        this.newPar.style.position = "relative"
+        this.newPar.style.paddingRight = `${this.sbw}px`
+        this.newPar.style.zIndex = "9999999"
+        this.newPar.style.height = "100%"
+        this.newPar.style.overflow = "hidden"
+
+        this.inP.style.cssText = `height:100%;overflow-y:auto;overflow-x:hidden;padding-right:${
+            this.sbw + 20
+        }px;width:100%;box-sizing:content-box;`
+
+        this.sbHeight = (this.inP.clientHeight * 100) / this.inP.scrollHeight
+        this.scrollElement = this.inP
+
+        this.updateScrollbarStyles()
+    }
+
+    private updateScrollbarStyles(): void {
+        this.sB = {
+            width: `${this.sbw}px`,
+            height: `${this.sbHeight}%`,
+            position: "absolute",
+            right: "0",
+            top: "0",
+            backgroundColor: "#444444",
+            borderRadius: "15px",
+        }
+
+        this.sBH = {
+            width: `${this.sbw}px`,
+            height: "100%",
+            position: "absolute",
+            right: "0",
+            top: "0",
+            backgroundColor: "#ADADAD",
+            borderRadius: "15px",
+        }
+
+        Object.assign(this.scrollBar.style, this.sB)
+        Object.assign(this.scrollBarHolder.style, this.sBH)
+    }
+
+    public refresh(): void {
+        this.sbHeight = (this.inP.clientHeight * 100) / this.inP.scrollHeight
+        this.scrollBarHolder.style.display = this.sbHeight >= 100 ? "none" : "block"
+
+        if (this.inP.scrollHeight > this.inP.clientHeight) {
+            this.scrollBar.style.height = this.customHeight ? this.sB.height : `${this.sbHeight}%`
+        }
+    }
+
+    public destroy(): void {
+        this.orgPar.innerHTML = this.parContent
+        this.orgPar.style.overflow = "auto"
+    }
+
+    private isIE(): number | false {
+        const userAgent = navigator.userAgent.toLowerCase()
+        const msie = userAgent.indexOf("msie")
+        return msie !== -1 ? parseInt(userAgent.split("msie")[1]) : false
+    }
+
+    public onScroll(callback: () => void): void {
+        this.onScrollF = callback
+    }
+
+    private setupEventListeners(): void {
+        this.setupScrollListener()
+        this.setupMouseEvents()
+    }
+
+    private setupScrollListener(): void {
+        this.inP.addEventListener("scroll", () => {
+            const scrollPercentage = (this.inP.scrollTop * 100) / this.inP.scrollHeight
+            const correction =
+                ((this.sbHeight - parseFloat(this.sB.height)) * this.inP.scrollTop) / (this.inP.scrollHeight - this.inP.clientHeight)
+
+            this.scrollBar.style.top = `${scrollPercentage + correction}%`
+
+            if (this.onScrollF) {
+                this.onScrollF()
+            }
+        })
+    }
+
+    private setScroll(position: number, duration: number = 500): void {
+        if (position >= this.inP.scrollHeight - this.inP.clientHeight) {
+            position = this.inP.scrollHeight - this.inP.clientHeight
+        }
+
+        const difference = position - this.inP.scrollTop
+        const perTick = (difference / duration) * 10
+
+        setTimeout(() => {
+            this.inP.scrollTop += perTick
+            if (Math.abs(position - this.inP.scrollTop) < 5) return
+            this.setScroll(position, duration - 10)
+        }, 10)
+    }
+
+    private setupMouseEvents(): void {
+        // 滚动条容器点击事件
+        this.scrollBarHolder.onmousedown = (e: MouseEvent) => {
+            if (e.target !== this.scrollBarHolder) return
+            const relPos = ((e.pageY - this.scrollBarHolder.getBoundingClientRect().top) * 100) / this.scrollBarHolder.clientHeight
+            this.setScroll((this.inP.scrollHeight * relPos) / 100, this.scrollSpeed)
+        }
+
+        // 滚动条拖动事件
+        this.scrollBar.onmousedown = (e: MouseEvent) => {
+            this.mdown = true
+            this.posCorrection = e.pageY - this.scrollBar.getBoundingClientRect().top
+            this.btmCorrection = (this.scrollBar.clientHeight * 100) / this.newPar.clientHeight
+            return false
+        }
+
+        // 全局鼠标事件
+        document.onmouseup = () => {
+            this.mdown = false
+        }
+
+        document.onmousemove = (e: MouseEvent) => {
+            if (this.mdown) {
+                // 清除文本选择
+                window.getSelection()?.removeAllRanges()
+
+                this.relY = e.pageY - this.newPar.getBoundingClientRect().top
+                this.pC = ((this.relY - this.posCorrection) * 100) / this.newPar.clientHeight
+
+                if (this.pC >= 0 && this.pC + this.btmCorrection <= 100) {
+                    this.scrollBar.style.top = `${this.pC}%`
+                    this.inP.scrollTop =
+                        ((parseFloat(this.scrollBar.style.top) -
+                            ((this.sbHeight - parseFloat(this.sB.height)) * this.inP.scrollTop) /
+                                (this.inP.scrollHeight - this.inP.clientHeight)) *
+                            this.inP.scrollHeight) /
+                        100
+                } else if (this.pC < 0 && parseFloat(this.scrollBar.style.top) > 0) {
+                    this.scrollBar.style.top = "0%"
+                    this.inP.scrollTop = 0
+                }
+
+                if (this.onScrollF) {
+                    this.onScrollF()
+                }
+            }
+            return false
+        }
+    }
+
+    public setStyle(scrollbar?: ScrollStyle, scrollbarHolder?: ScrollStyle): Scrollbot {
+        if (scrollbar) {
+            scrollbar.width = `${this.sbw}px`
+            if ("height" in scrollbar) {
+                this.customHeight = true
+                scrollbar.height = `${(parseFloat(scrollbar.height) * 100) / this.newPar.clientHeight}%`
+            }
+            Object.assign(this.sB, scrollbar)
+            Object.assign(this.scrollBar.style, scrollbar)
+        }
+
+        if (scrollbarHolder) {
+            scrollbarHolder.width = `${this.sbw}px`
+            Object.assign(this.sBH, scrollbarHolder)
+            Object.assign(this.scrollBarHolder.style, scrollbarHolder)
+        }
+
+        return this
+    }
+}
+
+export default Scrollbot

src/renderer/src/assets/style/_common.scss

@@ -23,4 +23,22 @@ body {
 
 * {
     user-select: none;
+    outline: none;
+}
+
+.simplebar-scrollbar::before {
+    background-color: #bdbdbd;
+    border-radius: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+}
+
+.simplebar-hover .simplebar-scrollbar::before {
+    background-color: #909090;
+}
+
+.simplebar-wrapper:hover ~ .simplebar-track > .simplebar-scrollbar:before {
+    opacity: 0.5 !important;
 }

src/renderer/src/components/AdjustLine.vue

@@ -98,10 +98,11 @@ const emitResize = useDebounceFn((size: number) => {
 }, 16)
 
 // 使用ResizeObserver监听容器大小变化
+let observer: ResizeObserver | null = null
 const observeResize = () => {
     if (!adjustLineEL.value) return
 
-    const observer = new ResizeObserver(() => {
+    observer = new ResizeObserver(() => {
         if (curTarget) {
             const size = isHorizontal.value ? curTarget.clientWidth : curTarget.clientHeight
             currentSize.value = size
@@ -110,12 +111,12 @@ const observeResize = () => {
     })
 
     observer.observe(adjustLineEL.value)
-
-    onBeforeUnmount(() => {
-        observer.disconnect()
-    })
 }
 
+onBeforeUnmount(() => {
+    observer && observer.disconnect()
+})
+
 onMounted(async () => {
     await nextTick()
     if (!props.target) {

src/renderer/src/components/NavBar.vue

@@ -37,7 +37,7 @@ onBeforeMount(async () => {
 const onClickMenu = () => {
     const menu = new PopupMenu([
         {
-            label: isFullScreen.value?"取消全屏":"全屏",
+            label: isFullScreen.value ? "取消全屏" : "全屏",
             async click() {
                 isFullScreen.value = await api.call("BasicCommand.fullscreen")
             },

src/renderer/src/layouts/default.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup></script>
+
+<template>
+    <div h-full flex flex-col>
+        <NavBar></NavBar>
+        <div flex-1 h-0 overflow="auto">
+            <RouterView></RouterView>
+        </div>
+    </div>
+</template>

src/renderer/src/main.ts

@@ -1,6 +1,7 @@
-import "virtual:uno.css"
+import "simplebar-vue/dist/simplebar.min.css"
 import "@unocss/reset/normalize.css"
 import "@/assets/style/_common.scss"
+import "virtual:uno.css"
 
 import { createApp } from "vue"
 import App from "./App.vue"

src/renderer/src/pages/_ui/App.vue

@@ -1,5 +1,7 @@
 <template>
     <div>
-        app
+        <input type="text" />
+        <input type="text" />
+        <input type="text" />
     </div>
-</template>
+</template>

src/renderer/src/pages/index.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { defineAsyncComponent } from "vue"
+import Simplebar from "simplebar-vue"
+import { getAssetsFile } from "@/utils"
 
 const active = ref()
 const allApp = [
     { label: "浏览器", comp: defineAsyncComponent(() => import("./_ui/Browser.vue")) },
-    { label: "观山", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
-    { label: "听雨", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "观山", bg: "gs", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
+    { label: "听雨", bg: "ty", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
     { label: "赏月", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
     { label: "抚琴", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
     { label: "望云", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
@@ -29,38 +31,66 @@ const allApp = [
     { label: "拨荷", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
     { label: "望鹤", comp: defineAsyncComponent(() => import("./_ui/App.vue")) },
 ]
+
+const activeBg = computed(() => {
+    if (!active.value) return ""
+    const value = allApp[active.value].bg
+    return value ? getAssetsFile(`@/assets/images/home/${value}.png`) : ""
+})
+
+function onClick(index: number) {
+    active.value = index
+}
 </script>
 
 <template>
     <div h-full flex>
-        <div w="100px" relative max-w="200px" min-w="80px">
-            <div overflow-hidden>
+        <div w="100px" h-full relative max-w="200px" min-w="80px">
+            <Simplebar h-full>
                 <div
                     v-for="(app, index) in allApp"
+                    :key="index"
                     p="8px 10px"
                     text="12px"
                     border
                     border-b
                     h="30px"
                     cursor="pointer"
-                    @click="active = index"
                     hover:bg-gray-50
                     class="item"
                     transition-all
                     :class="{ active: active === index }"
+                    @click="onClick(index)"
                 >
                     <div class="text" transition-all position="absolute" left="10px">{{ app.label }}</div>
                 </div>
-            </div>
-            <AdjustLine></AdjustLine>
+            </Simplebar>
+            <!-- <AdjustLine></AdjustLine> -->
         </div>
-        <div b-l="1px solid #E5E5E5" flex-1 w-0 overflow-auto flex flex-col>
-            <component v-if="allApp[active]" :is="allApp[active].comp"></component>
+        <div class="content" relative b-l="1px solid #E5E5E5" flex-1 w-0 overflow-auto flex flex-col>
+            <div v-if="activeBg" class="bg" :style="{ backgroundImage: activeBg ? `url(${activeBg})` : '' }"></div>
+            <component :is="allApp[active].comp" v-if="allApp[active]"></component>
         </div>
     </div>
 </template>
 
 <style lang="scss" scoped>
+.content {
+    .bg {
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        background-size: cover;
+        background-position: center;
+        background-repeat: no-repeat;
+        z-index: -1;
+        opacity: 0.1;
+        // blur(4px)
+        filter: brightness(1);
+    }
+}
 .item {
     position: relative;
     &::before {

src/renderer/src/router/index.ts

@@ -1,5 +1,8 @@
 import { createWebHashHistory, createRouter } from "vue-router"
-import { routes } from "vue-router/auto-routes"
+import { routes as generatedRoutes, handleHotUpdate } from "vue-router/auto-routes"
+import { setupLayouts } from "virtual:generated-layouts"
+
+const routes = setupLayouts(generatedRoutes)
 
 const router = createRouter({
     history: createWebHashHistory(),
@@ -9,3 +12,7 @@ const router = createRouter({
 export { router }
 
 export default router
+
+if (import.meta.hot) {
+    handleHotUpdate(router)
+}

src/renderer/src/utils/index.ts

@@ -0,0 +1,11 @@
+/**
+ *
+ * @param url 路径
+ * @returns 图片路径
+ */
+export const getAssetsFile = url => {
+    const urlArr = String(url).split("/")
+    const prefix = urlArr.slice(-2)[0]
+    const fileName = urlArr.slice(-1)[0]
+    return new URL(`../assets/images/${prefix}/${fileName}`, import.meta.url).href
+}

tsconfig.web.json

@@ -18,7 +18,7 @@
     "composite": true,
     "baseUrl": ".",
     "moduleResolution": "Bundler",
-    "types": ["unplugin-vue-macros/macros-global"],
+    "types": ["unplugin-vue-macros/macros-global", "vite-plugin-vue-layouts/client"],
     "paths": {
       "#": ["src/types/index"],
       "#/*": ["src/types/*"],