diff --git a/.vscode/settings.json b/.vscode/settings.json index 7e74831..0d09930 100644 --- a/.vscode/settings.json +++ b/.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" diff --git a/electron.vite.config.ts b/electron.vite.config.ts index 2f3e93d..cacdc3c 100644 --- a/electron.vite.config.ts +++ b/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: [ diff --git a/package.json b/package.json index 041ad67..3e04efb 100644 --- a/package.json +++ b/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" } diff --git a/packages/IPC/common/utils.ts b/packages/IPC/common/utils.ts deleted file mode 100644 index 9464d65..0000000 --- a/packages/IPC/common/utils.ts +++ /dev/null @@ -1,5 +0,0 @@ -import { webContents } from "electron" - -export const broadcast = (event: string, ...args: any[]) => { - webContents.getAllWebContents().forEach(browser => browser.send(event, ...args)) -} diff --git a/packages/IPC/main/index.ts b/packages/IPC/main/index.ts deleted file mode 100644 index e69de29..0000000 diff --git a/packages/IPC/package.json b/packages/IPC/package.json deleted file mode 100644 index 847b14d..0000000 --- a/packages/IPC/package.json +++ /dev/null @@ -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" -} diff --git a/packages/IPC/renderer/index.ts b/packages/IPC/renderer/index.ts deleted file mode 100644 index e69de29..0000000 diff --git a/packages/IPC/tsconfig.json b/packages/IPC/tsconfig.json deleted file mode 100644 index d6f9b7b..0000000 --- a/packages/IPC/tsconfig.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "files": [], - "references": [{ "path": "./tsconfig.node.json" }, { "path": "./tsconfig.web.json" }] - } diff --git a/packages/IPC/tsconfig.node.json b/packages/IPC/tsconfig.node.json deleted file mode 100644 index 76fb401..0000000 --- a/packages/IPC/tsconfig.node.json +++ /dev/null @@ -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"], - } -} diff --git a/packages/IPC/tsconfig.web.json b/packages/IPC/tsconfig.web.json deleted file mode 100644 index e3b4220..0000000 --- a/packages/IPC/tsconfig.web.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "extends": "@electron-toolkit/tsconfig/tsconfig.web.json", - "include": [ - "renderer/**/*", - "preload/**/*", - "common/**/*", - "types/**/*" - ], - "compilerOptions": { - "composite": true - } -} diff --git a/packages/IPC/types/index.d.ts b/packages/IPC/types/index.d.ts deleted file mode 100644 index e69de29..0000000 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index f63ac87..281c7d6 100644 --- a/pnpm-lock.yaml +++ b/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 diff --git a/src/renderer/index.html b/src/renderer/index.html index 2cf2727..002b389 100644 --- a/src/renderer/index.html +++ b/src/renderer/index.html @@ -5,15 +5,22 @@ Electron -
+ - \ No newline at end of file + diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue index 460c401..1eb4800 100644 --- a/src/renderer/src/App.vue +++ b/src/renderer/src/App.vue @@ -1,10 +1,9 @@ diff --git a/src/renderer/src/assets/images/home/gs.png b/src/renderer/src/assets/images/home/gs.png new file mode 100644 index 0000000..24cb7a7 Binary files /dev/null and b/src/renderer/src/assets/images/home/gs.png differ diff --git a/src/renderer/src/assets/images/home/ty.png b/src/renderer/src/assets/images/home/ty.png new file mode 100644 index 0000000..3845c2e Binary files /dev/null and b/src/renderer/src/assets/images/home/ty.png differ diff --git a/src/renderer/src/assets/libs/scrollbot.ts b/src/renderer/src/assets/libs/scrollbot.ts new file mode 100644 index 0000000..6f3e62b --- /dev/null +++ b/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(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 diff --git a/src/renderer/src/assets/style/_common.scss b/src/renderer/src/assets/style/_common.scss index f47851c..2570dfe 100644 --- a/src/renderer/src/assets/style/_common.scss +++ b/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; } diff --git a/src/renderer/src/components/AdjustLine.vue b/src/renderer/src/components/AdjustLine.vue index d399061..ec6cb21 100644 --- a/src/renderer/src/components/AdjustLine.vue +++ b/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) { diff --git a/src/renderer/src/components/NavBar.vue b/src/renderer/src/components/NavBar.vue index 21994e1..bef06d3 100644 --- a/src/renderer/src/components/NavBar.vue +++ b/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") }, diff --git a/src/renderer/src/layouts/default.vue b/src/renderer/src/layouts/default.vue new file mode 100644 index 0000000..90d69a4 --- /dev/null +++ b/src/renderer/src/layouts/default.vue @@ -0,0 +1,10 @@ + + + diff --git a/src/renderer/src/main.ts b/src/renderer/src/main.ts index ae82378..f4c487c 100644 --- a/src/renderer/src/main.ts +++ b/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" diff --git a/src/renderer/src/pages/_ui/App.vue b/src/renderer/src/pages/_ui/App.vue index 101f062..06cec19 100644 --- a/src/renderer/src/pages/_ui/App.vue +++ b/src/renderer/src/pages/_ui/App.vue @@ -1,5 +1,7 @@ \ No newline at end of file + diff --git a/src/renderer/src/pages/index.vue b/src/renderer/src/pages/index.vue index 9ceb9e6..10a92e2 100644 --- a/src/renderer/src/pages/index.vue +++ b/src/renderer/src/pages/index.vue @@ -1,11 +1,13 @@