mirror of
https://github.com/HuLaSpark/HuLa.git
synced 2026-08-30 17:14:56 +08:00
✨ feat(custom): 新增主题切换功能，修复一些已知的问题
This commit is contained in:
nongyehong
+1
-1
@@ -7,7 +7,7 @@
|
||||
<title>Tauri + Vue + TS</title>
|
||||
|
||||
<!--引入iconpark图标库-->
|
||||
<script defer src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_30895_48.c8abaad876af59f2556adc4dc7aeaeef.js"></script>
|
||||
<script defer src="https://lf1-cdn-tos.bytegoofy.com/obj/iconpark/svg_30895_57.39baf3d1d847dfb1fe0b31d5dca2faef.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
+2
-2
@@ -41,7 +41,7 @@
|
||||
"naive-ui": "^2.37.3",
|
||||
"pinia": "^2.1.7",
|
||||
"pinia-plugin-persistedstate": "^3.2.1",
|
||||
"vue": "^3.4.15",
|
||||
"vue": "^3.4.18",
|
||||
"vue-router": "^4.2.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -76,7 +76,7 @@
|
||||
"typescript": "^5.3.3",
|
||||
"unplugin-auto-import": "^0.17.2",
|
||||
"unplugin-vue-components": "^0.26.0",
|
||||
"vite": "5.1.0-beta.0",
|
||||
"vite": "5.1.1",
|
||||
"vue-tsc": "^1.8.27"
|
||||
},
|
||||
"config": {
|
||||
|
||||
Generated
+186
-128
@@ -22,19 +22,19 @@ dependencies:
|
||||
version: 3.0.1
|
||||
naive-ui:
|
||||
specifier: ^2.37.3
|
||||
version: 2.37.3(vue@3.4.15)
|
||||
version: 2.37.3(vue@3.4.18)
|
||||
pinia:
|
||||
specifier: ^2.1.7
|
||||
version: 2.1.7(typescript@5.3.3)(vue@3.4.15)
|
||||
version: 2.1.7(typescript@5.3.3)(vue@3.4.18)
|
||||
pinia-plugin-persistedstate:
|
||||
specifier: ^3.2.1
|
||||
version: 3.2.1(pinia@2.1.7)
|
||||
vue:
|
||||
specifier: ^3.4.15
|
||||
version: 3.4.15(typescript@5.3.3)
|
||||
specifier: ^3.4.18
|
||||
version: 3.4.18(typescript@5.3.3)
|
||||
vue-router:
|
||||
specifier: ^4.2.5
|
||||
version: 4.2.5(vue@3.4.15)
|
||||
version: 4.2.5(vue@3.4.18)
|
||||
|
||||
devDependencies:
|
||||
'@babel/eslint-parser':
|
||||
@@ -66,13 +66,13 @@ devDependencies:
|
||||
version: 0.58.4
|
||||
'@unocss/vite':
|
||||
specifier: ^0.58.4
|
||||
version: 0.58.4(vite@5.1.0-beta.0)
|
||||
version: 0.58.4(vite@5.1.1)
|
||||
'@vitejs/plugin-vue':
|
||||
specifier: ^5.0.3
|
||||
version: 5.0.3(vite@5.1.0-beta.0)(vue@3.4.15)
|
||||
version: 5.0.3(vite@5.1.1)(vue@3.4.18)
|
||||
'@vitejs/plugin-vue-jsx':
|
||||
specifier: ^3.1.0
|
||||
version: 3.1.0(vite@5.1.0-beta.0)(vue@3.4.15)
|
||||
version: 3.1.0(vite@5.1.1)(vue@3.4.18)
|
||||
commitizen:
|
||||
specifier: ^4.3.0
|
||||
version: 4.3.0(@types/node@20.11.7)(typescript@5.3.3)
|
||||
@@ -120,7 +120,7 @@ devDependencies:
|
||||
version: 1.70.0
|
||||
sass-loader:
|
||||
specifier: ^14.0.0
|
||||
version: 14.0.0(sass@1.70.0)(webpack@5.90.0)
|
||||
version: 14.0.0(sass@1.70.0)(webpack@5.90.1)
|
||||
typescript:
|
||||
specifier: ^5.3.3
|
||||
version: 5.3.3
|
||||
@@ -129,10 +129,10 @@ devDependencies:
|
||||
version: 0.17.5
|
||||
unplugin-vue-components:
|
||||
specifier: ^0.26.0
|
||||
version: 0.26.0(vue@3.4.15)
|
||||
version: 0.26.0(vue@3.4.18)
|
||||
vite:
|
||||
specifier: 5.1.0-beta.0
|
||||
version: 5.1.0-beta.0(@types/node@20.11.7)(sass@1.70.0)
|
||||
specifier: 5.1.1
|
||||
version: 5.1.1(@types/node@20.11.7)(sass@1.70.0)
|
||||
vue-tsc:
|
||||
specifier: ^1.8.27
|
||||
version: 1.8.27(typescript@5.3.3)
|
||||
@@ -530,12 +530,12 @@ packages:
|
||||
css-render: 0.15.12
|
||||
dev: false
|
||||
|
||||
/@css-render/vue3-ssr@0.15.12(vue@3.4.15):
|
||||
/@css-render/vue3-ssr@0.15.12(vue@3.4.18):
|
||||
resolution: {integrity: sha512-AQLGhhaE0F+rwybRCkKUdzBdTEM/5PZBYy+fSYe1T9z9+yxMuV/k7ZRqa4M69X+EI1W8pa4kc9Iq2VjQkZx4rg==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.11
|
||||
dependencies:
|
||||
vue: 3.4.15(typescript@5.3.3)
|
||||
vue: 3.4.18(typescript@5.3.3)
|
||||
dev: false
|
||||
|
||||
/@emotion/hash@0.8.0:
|
||||
@@ -969,48 +969,48 @@ packages:
|
||||
picomatch: 2.3.1
|
||||
dev: true
|
||||
|
||||
/@rollup/rollup-android-arm-eabi@4.9.6:
|
||||
resolution: {integrity: sha512-MVNXSSYN6QXOulbHpLMKYi60ppyO13W9my1qogeiAqtjb2yR4LSmfU2+POvDkLzhjYLXz9Rf9+9a3zFHW1Lecg==}
|
||||
/@rollup/rollup-android-arm-eabi@4.10.0:
|
||||
resolution: {integrity: sha512-/MeDQmcD96nVoRumKUljsYOLqfv1YFJps+0pTrb2Z9Nl/w5qNUysMaWQsrd1mvAlNT4yza1iVyIu4Q4AgF6V3A==}
|
||||
cpu: [arm]
|
||||
os: [android]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/@rollup/rollup-android-arm64@4.9.6:
|
||||
resolution: {integrity: sha512-T14aNLpqJ5wzKNf5jEDpv5zgyIqcpn1MlwCrUXLrwoADr2RkWA0vOWP4XxbO9aiO3dvMCQICZdKeDrFl7UMClw==}
|
||||
/@rollup/rollup-android-arm64@4.10.0:
|
||||
resolution: {integrity: sha512-lvu0jK97mZDJdpZKDnZI93I0Om8lSDaiPx3OiCk0RXn3E8CMPJNS/wxjAvSJJzhhZpfjXsjLWL8LnS6qET4VNQ==}
|
||||
cpu: [arm64]
|
||||
os: [android]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/@rollup/rollup-darwin-arm64@4.9.6:
|
||||
resolution: {integrity: sha512-CqNNAyhRkTbo8VVZ5R85X73H3R5NX9ONnKbXuHisGWC0qRbTTxnF1U4V9NafzJbgGM0sHZpdO83pLPzq8uOZFw==}
|
||||
/@rollup/rollup-darwin-arm64@4.10.0:
|
||||
resolution: {integrity: sha512-uFpayx8I8tyOvDkD7X6n0PriDRWxcqEjqgtlxnUA/G9oS93ur9aZ8c8BEpzFmsed1TH5WZNG5IONB8IiW90TQg==}
|
||||
cpu: [arm64]
|
||||
os: [darwin]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/@rollup/rollup-darwin-x64@4.9.6:
|
||||
resolution: {integrity: sha512-zRDtdJuRvA1dc9Mp6BWYqAsU5oeLixdfUvkTHuiYOHwqYuQ4YgSmi6+/lPvSsqc/I0Omw3DdICx4Tfacdzmhog==}
|
||||
/@rollup/rollup-darwin-x64@4.10.0:
|
||||
resolution: {integrity: sha512-nIdCX03qFKoR/MwQegQBK+qZoSpO3LESurVAC6s6jazLA1Mpmgzo3Nj3H1vydXp/JM29bkCiuF7tDuToj4+U9Q==}
|
||||
cpu: [x64]
|
||||
os: [darwin]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/@rollup/rollup-linux-arm-gnueabihf@4.9.6:
|
||||
resolution: {integrity: sha512-oNk8YXDDnNyG4qlNb6is1ojTOGL/tRhbbKeE/YuccItzerEZT68Z9gHrY3ROh7axDc974+zYAPxK5SH0j/G+QQ==}
|
||||
/@rollup/rollup-linux-arm-gnueabihf@4.10.0:
|
||||
resolution: {integrity: sha512-Fz7a+y5sYhYZMQFRkOyCs4PLhICAnxRX/GnWYReaAoruUzuRtcf+Qnw+T0CoAWbHCuz2gBUwmWnUgQ67fb3FYw==}
|
||||
cpu: [arm]
|
||||
os: [linux]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/@rollup/rollup-linux-arm64-gnu@4.9.6:
|
||||
resolution: {integrity: sha512-Z3O60yxPtuCYobrtzjo0wlmvDdx2qZfeAWTyfOjEDqd08kthDKexLpV97KfAeUXPosENKd8uyJMRDfFMxcYkDQ==}
|
||||
/@rollup/rollup-linux-arm64-gnu@4.10.0:
|
||||
resolution: {integrity: sha512-yPtF9jIix88orwfTi0lJiqINnlWo6p93MtZEoaehZnmCzEmLL0eqjA3eGVeyQhMtxdV+Mlsgfwhh0+M/k1/V7Q==}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
@@ -1018,8 +1018,8 @@ packages:
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/@rollup/rollup-linux-arm64-musl@4.9.6:
|
||||
resolution: {integrity: sha512-gpiG0qQJNdYEVad+1iAsGAbgAnZ8j07FapmnIAQgODKcOTjLEWM9sRb+MbQyVsYCnA0Im6M6QIq6ax7liws6eQ==}
|
||||
/@rollup/rollup-linux-arm64-musl@4.10.0:
|
||||
resolution: {integrity: sha512-9GW9yA30ib+vfFiwjX+N7PnjTnCMiUffhWj4vkG4ukYv1kJ4T9gHNg8zw+ChsOccM27G9yXrEtMScf1LaCuoWQ==}
|
||||
cpu: [arm64]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
@@ -1027,8 +1027,8 @@ packages:
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/@rollup/rollup-linux-riscv64-gnu@4.9.6:
|
||||
resolution: {integrity: sha512-+uCOcvVmFUYvVDr27aiyun9WgZk0tXe7ThuzoUTAukZJOwS5MrGbmSlNOhx1j80GdpqbOty05XqSl5w4dQvcOA==}
|
||||
/@rollup/rollup-linux-riscv64-gnu@4.10.0:
|
||||
resolution: {integrity: sha512-X1ES+V4bMq2ws5fF4zHornxebNxMXye0ZZjUrzOrf7UMx1d6wMQtfcchZ8SqUnQPPHdOyOLW6fTcUiFgHFadRA==}
|
||||
cpu: [riscv64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
@@ -1036,8 +1036,8 @@ packages:
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/@rollup/rollup-linux-x64-gnu@4.9.6:
|
||||
resolution: {integrity: sha512-HUNqM32dGzfBKuaDUBqFB7tP6VMN74eLZ33Q9Y1TBqRDn+qDonkAUyKWwF9BR9unV7QUzffLnz9GrnKvMqC/fw==}
|
||||
/@rollup/rollup-linux-x64-gnu@4.10.0:
|
||||
resolution: {integrity: sha512-w/5OpT2EnI/Xvypw4FIhV34jmNqU5PZjZue2l2Y3ty1Ootm3SqhI+AmfhlUYGBTd9JnpneZCDnt3uNOiOBkMyw==}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
libc: [glibc]
|
||||
@@ -1045,8 +1045,8 @@ packages:
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/@rollup/rollup-linux-x64-musl@4.9.6:
|
||||
resolution: {integrity: sha512-ch7M+9Tr5R4FK40FHQk8VnML0Szi2KRujUgHXd/HjuH9ifH72GUmw6lStZBo3c3GB82vHa0ZoUfjfcM7JiiMrQ==}
|
||||
/@rollup/rollup-linux-x64-musl@4.10.0:
|
||||
resolution: {integrity: sha512-q/meftEe3QlwQiGYxD9rWwB21DoKQ9Q8wA40of/of6yGHhZuGfZO0c3WYkN9dNlopHlNT3mf5BPsUSxoPuVQaw==}
|
||||
cpu: [x64]
|
||||
os: [linux]
|
||||
libc: [musl]
|
||||
@@ -1054,24 +1054,24 @@ packages:
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/@rollup/rollup-win32-arm64-msvc@4.9.6:
|
||||
resolution: {integrity: sha512-VD6qnR99dhmTQ1mJhIzXsRcTBvTjbfbGGwKAHcu+52cVl15AC/kplkhxzW/uT0Xl62Y/meBKDZvoJSJN+vTeGA==}
|
||||
/@rollup/rollup-win32-arm64-msvc@4.10.0:
|
||||
resolution: {integrity: sha512-NrR6667wlUfP0BHaEIKgYM/2va+Oj+RjZSASbBMnszM9k+1AmliRjHc3lJIiOehtSSjqYiO7R6KLNrWOX+YNSQ==}
|
||||
cpu: [arm64]
|
||||
os: [win32]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/@rollup/rollup-win32-ia32-msvc@4.9.6:
|
||||
resolution: {integrity: sha512-J9AFDq/xiRI58eR2NIDfyVmTYGyIZmRcvcAoJ48oDld/NTR8wyiPUu2X/v1navJ+N/FGg68LEbX3Ejd6l8B7MQ==}
|
||||
/@rollup/rollup-win32-ia32-msvc@4.10.0:
|
||||
resolution: {integrity: sha512-FV0Tpt84LPYDduIDcXvEC7HKtyXxdvhdAOvOeWMWbQNulxViH2O07QXkT/FffX4FqEI02jEbCJbr+YcuKdyyMg==}
|
||||
cpu: [ia32]
|
||||
os: [win32]
|
||||
requiresBuild: true
|
||||
dev: true
|
||||
optional: true
|
||||
|
||||
/@rollup/rollup-win32-x64-msvc@4.9.6:
|
||||
resolution: {integrity: sha512-jqzNLhNDvIZOrt69Ce4UjGRpXJBzhUBzawMwnaDAwyHriki3XollsewxWzOzz+4yOFDkuJHtTsZFwMxhYJWmLQ==}
|
||||
/@rollup/rollup-win32-x64-msvc@4.10.0:
|
||||
resolution: {integrity: sha512-OZoJd+o5TaTSQeFFQ6WjFCiltiYVjIdsXxwu/XZ8qRpsvMQr4UsVrE5UyT9RIvsnuF47DqkJKhhVZ2Q9YW9IpQ==}
|
||||
cpu: [x64]
|
||||
os: [win32]
|
||||
requiresBuild: true
|
||||
@@ -1232,14 +1232,14 @@ packages:
|
||||
/@types/lodash@4.14.202:
|
||||
resolution: {integrity: sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==}
|
||||
|
||||
/@types/node@20.11.7:
|
||||
resolution: {integrity: sha512-GPmeN1C3XAyV5uybAf4cMLWT9fDWcmQhZVtMFu7OR32WjrqGG+Wnk2V1d0bmtUyE/Zy1QJ9BxyiTih9z8Oks8A==}
|
||||
/@types/node@20.11.17:
|
||||
resolution: {integrity: sha512-QmgQZGWu1Yw9TDyAP9ZzpFJKynYNeOvwMJmaxABfieQoVoiVOS6MN1WSpqpRcbeA5+RW82kraAVxCCJg+780Qw==}
|
||||
dependencies:
|
||||
undici-types: 5.26.5
|
||||
dev: true
|
||||
|
||||
/@types/node@20.11.9:
|
||||
resolution: {integrity: sha512-CQXNuMoS/VcoAMISe5pm4JnEd1Br5jildbQEToEMQvutmv+EaQr90ry9raiudgpyDuqFiV9e4rnjSfLNq12M5w==}
|
||||
/@types/node@20.11.7:
|
||||
resolution: {integrity: sha512-GPmeN1C3XAyV5uybAf4cMLWT9fDWcmQhZVtMFu7OR32WjrqGG+Wnk2V1d0bmtUyE/Zy1QJ9BxyiTih9z8Oks8A==}
|
||||
dependencies:
|
||||
undici-types: 5.26.5
|
||||
dev: true
|
||||
@@ -1506,7 +1506,7 @@ packages:
|
||||
css-tree: 2.3.1
|
||||
dev: true
|
||||
|
||||
/@unocss/vite@0.58.4(vite@5.1.0-beta.0):
|
||||
/@unocss/vite@0.58.4(vite@5.1.1):
|
||||
resolution: {integrity: sha512-TqD5fIXv6NF3v10FFrCII//GRbkou6Dn/OzW+d4T5f0KM5+T6DutljpYUdGo0+2QXKDroUWLAspFUaZUx8iwVw==}
|
||||
peerDependencies:
|
||||
vite: ^2.9.0 || ^3.0.0-0 || ^4.0.0 || ^5.0.0-0
|
||||
@@ -1521,12 +1521,12 @@ packages:
|
||||
chokidar: 3.5.3
|
||||
fast-glob: 3.3.2
|
||||
magic-string: 0.30.5
|
||||
vite: 5.1.0-beta.0(@types/node@20.11.7)(sass@1.70.0)
|
||||
vite: 5.1.1(@types/node@20.11.7)(sass@1.70.0)
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
dev: true
|
||||
|
||||
/@vitejs/plugin-vue-jsx@3.1.0(vite@5.1.0-beta.0)(vue@3.4.15):
|
||||
/@vitejs/plugin-vue-jsx@3.1.0(vite@5.1.1)(vue@3.4.18):
|
||||
resolution: {integrity: sha512-w9M6F3LSEU5kszVb9An2/MmXNxocAnUb3WhRr8bHlimhDrXNt6n6D2nJQR3UXpGlZHh/EsgouOHCsM8V3Ln+WA==}
|
||||
engines: {node: ^14.18.0 || >=16.0.0}
|
||||
peerDependencies:
|
||||
@@ -1536,21 +1536,21 @@ packages:
|
||||
'@babel/core': 7.23.9
|
||||
'@babel/plugin-transform-typescript': 7.23.6(@babel/core@7.23.9)
|
||||
'@vue/babel-plugin-jsx': 1.2.1(@babel/core@7.23.9)
|
||||
vite: 5.1.0-beta.0(@types/node@20.11.7)(sass@1.70.0)
|
||||
vue: 3.4.15(typescript@5.3.3)
|
||||
vite: 5.1.1(@types/node@20.11.7)(sass@1.70.0)
|
||||
vue: 3.4.18(typescript@5.3.3)
|
||||
transitivePeerDependencies:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@vitejs/plugin-vue@5.0.3(vite@5.1.0-beta.0)(vue@3.4.15):
|
||||
/@vitejs/plugin-vue@5.0.3(vite@5.1.1)(vue@3.4.18):
|
||||
resolution: {integrity: sha512-b8S5dVS40rgHdDrw+DQi/xOM9ed+kSRZzfm1T74bMmBDCd8XO87NKlFYInzCtwvtWwXZvo1QxE2OSspTATWrbA==}
|
||||
engines: {node: ^18.0.0 || >=20.0.0}
|
||||
peerDependencies:
|
||||
vite: ^5.0.0
|
||||
vue: ^3.2.25
|
||||
dependencies:
|
||||
vite: 5.1.0-beta.0(@types/node@20.11.7)(sass@1.70.0)
|
||||
vue: 3.4.15(typescript@5.3.3)
|
||||
vite: 5.1.1(@types/node@20.11.7)(sass@1.70.0)
|
||||
vue: 3.4.18(typescript@5.3.3)
|
||||
dev: true
|
||||
|
||||
/@volar/language-core@1.11.1:
|
||||
@@ -1621,12 +1621,29 @@ packages:
|
||||
entities: 4.5.0
|
||||
estree-walker: 2.0.2
|
||||
source-map-js: 1.0.2
|
||||
dev: true
|
||||
|
||||
/@vue/compiler-core@3.4.18:
|
||||
resolution: {integrity: sha512-F7YK8lMK0iv6b9/Gdk15A67wM0KKZvxDxed0RR60C1z9tIJTKta+urs4j0RTN5XqHISzI3etN3mX0uHhjmoqjQ==}
|
||||
dependencies:
|
||||
'@babel/parser': 7.23.9
|
||||
'@vue/shared': 3.4.18
|
||||
entities: 4.5.0
|
||||
estree-walker: 2.0.2
|
||||
source-map-js: 1.0.2
|
||||
|
||||
/@vue/compiler-dom@3.4.15:
|
||||
resolution: {integrity: sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==}
|
||||
dependencies:
|
||||
'@vue/compiler-core': 3.4.15
|
||||
'@vue/shared': 3.4.15
|
||||
dev: true
|
||||
|
||||
/@vue/compiler-dom@3.4.18:
|
||||
resolution: {integrity: sha512-24Eb8lcMfInefvQ6YlEVS18w5Q66f4+uXWVA+yb7praKbyjHRNuKVWGuinfSSjM0ZIiPi++QWukhkgznBaqpEA==}
|
||||
dependencies:
|
||||
'@vue/compiler-core': 3.4.18
|
||||
'@vue/shared': 3.4.18
|
||||
|
||||
/@vue/compiler-sfc@3.4.15:
|
||||
resolution: {integrity: sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==}
|
||||
@@ -1640,12 +1657,33 @@ packages:
|
||||
magic-string: 0.30.5
|
||||
postcss: 8.4.33
|
||||
source-map-js: 1.0.2
|
||||
dev: true
|
||||
|
||||
/@vue/compiler-sfc@3.4.18:
|
||||
resolution: {integrity: sha512-rG5tqtnzwrVpMqAQ7FHtvHaV70G6LLfJIWLYZB/jZ9m/hrnZmIQh+H3ewnC5onwe/ibljm9+ZupxeElzqCkTAw==}
|
||||
dependencies:
|
||||
'@babel/parser': 7.23.9
|
||||
'@vue/compiler-core': 3.4.18
|
||||
'@vue/compiler-dom': 3.4.18
|
||||
'@vue/compiler-ssr': 3.4.18
|
||||
'@vue/shared': 3.4.18
|
||||
estree-walker: 2.0.2
|
||||
magic-string: 0.30.7
|
||||
postcss: 8.4.35
|
||||
source-map-js: 1.0.2
|
||||
|
||||
/@vue/compiler-ssr@3.4.15:
|
||||
resolution: {integrity: sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==}
|
||||
dependencies:
|
||||
'@vue/compiler-dom': 3.4.15
|
||||
'@vue/shared': 3.4.15
|
||||
dev: true
|
||||
|
||||
/@vue/compiler-ssr@3.4.18:
|
||||
resolution: {integrity: sha512-hSlv20oUhPxo2UYUacHgGaxtqP0tvFo6ixxxD6JlXIkwzwoZ9eKK6PFQN4hNK/R13JlNyldwWt/fqGBKgWJ6nQ==}
|
||||
dependencies:
|
||||
'@vue/compiler-dom': 3.4.18
|
||||
'@vue/shared': 3.4.18
|
||||
|
||||
/@vue/devtools-api@6.5.1:
|
||||
resolution: {integrity: sha512-+KpckaAQyfbvshdDW5xQylLni1asvNSGme1JFs8I1+/H5pHEhqUKMEQD/qn3Nx5+/nycBq11qAEi8lk+LXI2dA==}
|
||||
@@ -1671,35 +1709,39 @@ packages:
|
||||
vue-template-compiler: 2.7.16
|
||||
dev: true
|
||||
|
||||
/@vue/reactivity@3.4.15:
|
||||
resolution: {integrity: sha512-55yJh2bsff20K5O84MxSvXKPHHt17I2EomHznvFiJCAZpJTNW8IuLj1xZWMLELRhBK3kkFV/1ErZGHJfah7i7w==}
|
||||
/@vue/reactivity@3.4.18:
|
||||
resolution: {integrity: sha512-7uda2/I0jpLiRygprDo5Jxs2HJkOVXcOMlyVlY54yRLxoycBpwGJRwJT9EdGB4adnoqJDXVT2BilUAYwI7qvmg==}
|
||||
dependencies:
|
||||
'@vue/shared': 3.4.15
|
||||
'@vue/shared': 3.4.18
|
||||
|
||||
/@vue/runtime-core@3.4.15:
|
||||
resolution: {integrity: sha512-6E3by5m6v1AkW0McCeAyhHTw+3y17YCOKG0U0HDKDscV4Hs0kgNT5G+GCHak16jKgcCDHpI9xe5NKb8sdLCLdw==}
|
||||
/@vue/runtime-core@3.4.18:
|
||||
resolution: {integrity: sha512-7mU9diCa+4e+8/wZ7Udw5pwTH10A11sZ1nldmHOUKJnzCwvZxfJqAtw31mIf4T5H2FsLCSBQT3xgioA9vIjyDQ==}
|
||||
dependencies:
|
||||
'@vue/reactivity': 3.4.15
|
||||
'@vue/shared': 3.4.15
|
||||
'@vue/reactivity': 3.4.18
|
||||
'@vue/shared': 3.4.18
|
||||
|
||||
/@vue/runtime-dom@3.4.15:
|
||||
resolution: {integrity: sha512-EVW8D6vfFVq3V/yDKNPBFkZKGMFSvZrUQmx196o/v2tHKdwWdiZjYUBS+0Ez3+ohRyF8Njwy/6FH5gYJ75liUw==}
|
||||
/@vue/runtime-dom@3.4.18:
|
||||
resolution: {integrity: sha512-2y1Mkzcw1niSfG7z3Qx+2ir9Gb4hdTkZe5p/I8x1aTIKQE0vY0tPAEUPhZm5tx6183gG3D/KwHG728UR0sIufA==}
|
||||
dependencies:
|
||||
'@vue/runtime-core': 3.4.15
|
||||
'@vue/shared': 3.4.15
|
||||
'@vue/runtime-core': 3.4.18
|
||||
'@vue/shared': 3.4.18
|
||||
csstype: 3.1.3
|
||||
|
||||
/@vue/server-renderer@3.4.15(vue@3.4.15):
|
||||
resolution: {integrity: sha512-3HYzaidu9cHjrT+qGUuDhFYvF/j643bHC6uUN9BgM11DVy+pM6ATsG6uPBLnkwOgs7BpJABReLmpL3ZPAsUaqw==}
|
||||
/@vue/server-renderer@3.4.18(vue@3.4.18):
|
||||
resolution: {integrity: sha512-YJd1wa7mzUN3NRqLEsrwEYWyO+PUBSROIGlCc3J/cvn7Zu6CxhNLgXa8Z4zZ5ja5/nviYO79J1InoPeXgwBTZA==}
|
||||
peerDependencies:
|
||||
vue: 3.4.15
|
||||
vue: 3.4.18
|
||||
dependencies:
|
||||
'@vue/compiler-ssr': 3.4.15
|
||||
'@vue/shared': 3.4.15
|
||||
vue: 3.4.15(typescript@5.3.3)
|
||||
'@vue/compiler-ssr': 3.4.18
|
||||
'@vue/shared': 3.4.18
|
||||
vue: 3.4.18(typescript@5.3.3)
|
||||
|
||||
/@vue/shared@3.4.15:
|
||||
resolution: {integrity: sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g==}
|
||||
dev: true
|
||||
|
||||
/@vue/shared@3.4.18:
|
||||
resolution: {integrity: sha512-CxouGFxxaW5r1WbrSmWwck3No58rApXgRSBxrqgnY1K+jk20F6DrXJkHdH9n4HVT+/B6G2CAn213Uq3npWiy8Q==}
|
||||
|
||||
/@webassemblyjs/ast@1.11.6:
|
||||
resolution: {integrity: sha512-IN1xI7PwOvLPgjcf180gC1bqn3q/QaOCwYUahIOhbYUu8KA/3tw2RT/T0Gidi1l7Hhj5D/INhJxiICObqpMu4Q==}
|
||||
@@ -3858,7 +3900,7 @@ packages:
|
||||
resolution: {integrity: sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==}
|
||||
engines: {node: '>= 10.13.0'}
|
||||
dependencies:
|
||||
'@types/node': 20.11.9
|
||||
'@types/node': 20.11.17
|
||||
merge-stream: 2.0.0
|
||||
supports-color: 8.1.1
|
||||
dev: true
|
||||
@@ -4119,6 +4161,13 @@ packages:
|
||||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
'@jridgewell/sourcemap-codec': 1.4.15
|
||||
dev: true
|
||||
|
||||
/magic-string@0.30.7:
|
||||
resolution: {integrity: sha512-8vBuFF/I/+OSLRmdf2wwFCJCz+nSn0m6DPvGH1fS/KiQoSaR+sETbov0eIk9KhEKy8CYqIkIAnbohxT/4H0kuA==}
|
||||
engines: {node: '>=12'}
|
||||
dependencies:
|
||||
'@jridgewell/sourcemap-codec': 1.4.15
|
||||
|
||||
/mdn-data@2.0.30:
|
||||
resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
|
||||
@@ -4241,13 +4290,13 @@ packages:
|
||||
resolution: {integrity: sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==}
|
||||
dev: true
|
||||
|
||||
/naive-ui@2.37.3(vue@3.4.15):
|
||||
/naive-ui@2.37.3(vue@3.4.18):
|
||||
resolution: {integrity: sha512-aUkHFXVIluSi8Me+npbcsdv1NYhVMj5t9YaruoCESlqmfqspj+R2QHEVXkTtUI1kQwVrABMCtAGq/wountqjZA==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.0
|
||||
dependencies:
|
||||
'@css-render/plugin-bem': 0.15.12(css-render@0.15.12)
|
||||
'@css-render/vue3-ssr': 0.15.12(vue@3.4.15)
|
||||
'@css-render/vue3-ssr': 0.15.12(vue@3.4.18)
|
||||
'@types/katex': 0.16.7
|
||||
'@types/lodash': 4.14.202
|
||||
'@types/lodash-es': 4.17.12
|
||||
@@ -4262,10 +4311,10 @@ packages:
|
||||
lodash-es: 4.17.21
|
||||
seemly: 0.3.8
|
||||
treemate: 0.3.11
|
||||
vdirs: 0.1.8(vue@3.4.15)
|
||||
vooks: 0.2.12(vue@3.4.15)
|
||||
vue: 3.4.15(typescript@5.3.3)
|
||||
vueuc: 0.4.58(vue@3.4.15)
|
||||
vdirs: 0.1.8(vue@3.4.18)
|
||||
vooks: 0.2.12(vue@3.4.18)
|
||||
vue: 3.4.18(typescript@5.3.3)
|
||||
vueuc: 0.4.58(vue@3.4.18)
|
||||
dev: false
|
||||
|
||||
/nanoid@3.3.7:
|
||||
@@ -4569,10 +4618,10 @@ packages:
|
||||
peerDependencies:
|
||||
pinia: ^2.0.0
|
||||
dependencies:
|
||||
pinia: 2.1.7(typescript@5.3.3)(vue@3.4.15)
|
||||
pinia: 2.1.7(typescript@5.3.3)(vue@3.4.18)
|
||||
dev: false
|
||||
|
||||
/pinia@2.1.7(typescript@5.3.3)(vue@3.4.15):
|
||||
/pinia@2.1.7(typescript@5.3.3)(vue@3.4.18):
|
||||
resolution: {integrity: sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==}
|
||||
peerDependencies:
|
||||
'@vue/composition-api': ^1.4.0
|
||||
@@ -4586,8 +4635,8 @@ packages:
|
||||
dependencies:
|
||||
'@vue/devtools-api': 6.5.1
|
||||
typescript: 5.3.3
|
||||
vue: 3.4.15(typescript@5.3.3)
|
||||
vue-demi: 0.14.6(vue@3.4.15)
|
||||
vue: 3.4.18(typescript@5.3.3)
|
||||
vue-demi: 0.14.6(vue@3.4.18)
|
||||
dev: false
|
||||
|
||||
/pkg-types@1.0.3:
|
||||
@@ -4613,6 +4662,15 @@ packages:
|
||||
nanoid: 3.3.7
|
||||
picocolors: 1.0.0
|
||||
source-map-js: 1.0.2
|
||||
dev: true
|
||||
|
||||
/postcss@8.4.35:
|
||||
resolution: {integrity: sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==}
|
||||
engines: {node: ^10 || ^12 || >=14}
|
||||
dependencies:
|
||||
nanoid: 3.3.7
|
||||
picocolors: 1.0.0
|
||||
source-map-js: 1.0.2
|
||||
|
||||
/prelude-ls@1.2.1:
|
||||
resolution: {integrity: sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==}
|
||||
@@ -4791,26 +4849,26 @@ packages:
|
||||
glob: 7.2.3
|
||||
dev: true
|
||||
|
||||
/rollup@4.9.6:
|
||||
resolution: {integrity: sha512-05lzkCS2uASX0CiLFybYfVkwNbKZG5NFQ6Go0VWyogFTXXbR039UVsegViTntkk4OglHBdF54ccApXRRuXRbsg==}
|
||||
/rollup@4.10.0:
|
||||
resolution: {integrity: sha512-t2v9G2AKxcQ8yrG+WGxctBes1AomT0M4ND7jTFBCVPXQ/WFTvNSefIrNSmLKhIKBrvN8SG+CZslimJcT3W2u2g==}
|
||||
engines: {node: '>=18.0.0', npm: '>=8.0.0'}
|
||||
hasBin: true
|
||||
dependencies:
|
||||
'@types/estree': 1.0.5
|
||||
optionalDependencies:
|
||||
'@rollup/rollup-android-arm-eabi': 4.9.6
|
||||
'@rollup/rollup-android-arm64': 4.9.6
|
||||
'@rollup/rollup-darwin-arm64': 4.9.6
|
||||
'@rollup/rollup-darwin-x64': 4.9.6
|
||||
'@rollup/rollup-linux-arm-gnueabihf': 4.9.6
|
||||
'@rollup/rollup-linux-arm64-gnu': 4.9.6
|
||||
'@rollup/rollup-linux-arm64-musl': 4.9.6
|
||||
'@rollup/rollup-linux-riscv64-gnu': 4.9.6
|
||||
'@rollup/rollup-linux-x64-gnu': 4.9.6
|
||||
'@rollup/rollup-linux-x64-musl': 4.9.6
|
||||
'@rollup/rollup-win32-arm64-msvc': 4.9.6
|
||||
'@rollup/rollup-win32-ia32-msvc': 4.9.6
|
||||
'@rollup/rollup-win32-x64-msvc': 4.9.6
|
||||
'@rollup/rollup-android-arm-eabi': 4.10.0
|
||||
'@rollup/rollup-android-arm64': 4.10.0
|
||||
'@rollup/rollup-darwin-arm64': 4.10.0
|
||||
'@rollup/rollup-darwin-x64': 4.10.0
|
||||
'@rollup/rollup-linux-arm-gnueabihf': 4.10.0
|
||||
'@rollup/rollup-linux-arm64-gnu': 4.10.0
|
||||
'@rollup/rollup-linux-arm64-musl': 4.10.0
|
||||
'@rollup/rollup-linux-riscv64-gnu': 4.10.0
|
||||
'@rollup/rollup-linux-x64-gnu': 4.10.0
|
||||
'@rollup/rollup-linux-x64-musl': 4.10.0
|
||||
'@rollup/rollup-win32-arm64-msvc': 4.10.0
|
||||
'@rollup/rollup-win32-ia32-msvc': 4.10.0
|
||||
'@rollup/rollup-win32-x64-msvc': 4.10.0
|
||||
fsevents: 2.3.3
|
||||
dev: true
|
||||
|
||||
@@ -4865,7 +4923,7 @@ packages:
|
||||
resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
|
||||
dev: true
|
||||
|
||||
/sass-loader@14.0.0(sass@1.70.0)(webpack@5.90.0):
|
||||
/sass-loader@14.0.0(sass@1.70.0)(webpack@5.90.1):
|
||||
resolution: {integrity: sha512-oceP9wWbep/yRJ2+sMbCzk0UsXsDzdNis+N8nu9i5GwPXjy6v3DNB6TqfJLSpPO9k4+B8x8p/CEgjA9ZLkoLug==}
|
||||
engines: {node: '>= 18.12.0'}
|
||||
peerDependencies:
|
||||
@@ -4883,7 +4941,7 @@ packages:
|
||||
dependencies:
|
||||
neo-async: 2.6.2
|
||||
sass: 1.70.0
|
||||
webpack: 5.90.0
|
||||
webpack: 5.90.1
|
||||
dev: true
|
||||
|
||||
/sass@1.70.0:
|
||||
@@ -5233,7 +5291,7 @@ packages:
|
||||
temp-dir: 3.0.0
|
||||
dev: true
|
||||
|
||||
/terser-webpack-plugin@5.3.10(webpack@5.90.0):
|
||||
/terser-webpack-plugin@5.3.10(webpack@5.90.1):
|
||||
resolution: {integrity: sha512-BKFPWlPDndPs+NGGCr1U59t0XScL5317Y0UReNrHaw9/FwhPENlq6bfgs+4yPfyP51vqC1bQ4rp1EfXW5ZSH9w==}
|
||||
engines: {node: '>= 10.13.0'}
|
||||
peerDependencies:
|
||||
@@ -5254,7 +5312,7 @@ packages:
|
||||
schema-utils: 3.3.0
|
||||
serialize-javascript: 6.0.2
|
||||
terser: 5.27.0
|
||||
webpack: 5.90.0
|
||||
webpack: 5.90.1
|
||||
dev: true
|
||||
|
||||
/terser@5.27.0:
|
||||
@@ -5487,7 +5545,7 @@ packages:
|
||||
- rollup
|
||||
dev: true
|
||||
|
||||
/unplugin-vue-components@0.26.0(vue@3.4.15):
|
||||
/unplugin-vue-components@0.26.0(vue@3.4.18):
|
||||
resolution: {integrity: sha512-s7IdPDlnOvPamjunVxw8kNgKNK8A5KM1YpK5j/p97jEKTjlPNrA0nZBiSfAKKlK1gWZuyWXlKL5dk3EDw874LQ==}
|
||||
engines: {node: '>=14'}
|
||||
peerDependencies:
|
||||
@@ -5510,7 +5568,7 @@ packages:
|
||||
minimatch: 9.0.3
|
||||
resolve: 1.22.8
|
||||
unplugin: 1.6.0
|
||||
vue: 3.4.15(typescript@5.3.3)
|
||||
vue: 3.4.18(typescript@5.3.3)
|
||||
transitivePeerDependencies:
|
||||
- rollup
|
||||
- supports-color
|
||||
@@ -5560,17 +5618,17 @@ packages:
|
||||
spdx-expression-parse: 3.0.1
|
||||
dev: true
|
||||
|
||||
/vdirs@0.1.8(vue@3.4.15):
|
||||
/vdirs@0.1.8(vue@3.4.18):
|
||||
resolution: {integrity: sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.11
|
||||
dependencies:
|
||||
evtd: 0.2.4
|
||||
vue: 3.4.15(typescript@5.3.3)
|
||||
vue: 3.4.18(typescript@5.3.3)
|
||||
dev: false
|
||||
|
||||
/vite@5.1.0-beta.0(@types/node@20.11.7)(sass@1.70.0):
|
||||
resolution: {integrity: sha512-CcJta/BGL1XerknRfCJmymjx/VGNr2p0HVyttQPxSIKjliXe711aOtZC/Y0ZzWY0yxgBk17x99h66LJfDtqrWw==}
|
||||
/vite@5.1.1(@types/node@20.11.7)(sass@1.70.0):
|
||||
resolution: {integrity: sha512-wclpAgY3F1tR7t9LL5CcHC41YPkQIpKUGeIuT8MdNwNZr6OqOTLs7JX5vIHAtzqLWXts0T+GDrh9pN2arneKqg==}
|
||||
engines: {node: ^18.0.0 || >=20.0.0}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
@@ -5599,23 +5657,23 @@ packages:
|
||||
dependencies:
|
||||
'@types/node': 20.11.7
|
||||
esbuild: 0.19.12
|
||||
postcss: 8.4.33
|
||||
rollup: 4.9.6
|
||||
postcss: 8.4.35
|
||||
rollup: 4.10.0
|
||||
sass: 1.70.0
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.3
|
||||
dev: true
|
||||
|
||||
/vooks@0.2.12(vue@3.4.15):
|
||||
/vooks@0.2.12(vue@3.4.18):
|
||||
resolution: {integrity: sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.0
|
||||
dependencies:
|
||||
evtd: 0.2.4
|
||||
vue: 3.4.15(typescript@5.3.3)
|
||||
vue: 3.4.18(typescript@5.3.3)
|
||||
dev: false
|
||||
|
||||
/vue-demi@0.14.6(vue@3.4.15):
|
||||
/vue-demi@0.14.6(vue@3.4.18):
|
||||
resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
|
||||
engines: {node: '>=12'}
|
||||
hasBin: true
|
||||
@@ -5627,7 +5685,7 @@ packages:
|
||||
'@vue/composition-api':
|
||||
optional: true
|
||||
dependencies:
|
||||
vue: 3.4.15(typescript@5.3.3)
|
||||
vue: 3.4.18(typescript@5.3.3)
|
||||
dev: false
|
||||
|
||||
/vue-eslint-parser@9.4.2(eslint@8.56.0):
|
||||
@@ -5648,13 +5706,13 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/vue-router@4.2.5(vue@3.4.15):
|
||||
/vue-router@4.2.5(vue@3.4.18):
|
||||
resolution: {integrity: sha512-DIUpKcyg4+PTQKfFPX88UWhlagBEBEfJ5A8XDXRJLUnZOvcpMF8o/dnL90vpVkGaPbjvXazV/rC1qBKrZlFugw==}
|
||||
peerDependencies:
|
||||
vue: ^3.2.0
|
||||
dependencies:
|
||||
'@vue/devtools-api': 6.5.1
|
||||
vue: 3.4.15(typescript@5.3.3)
|
||||
vue: 3.4.18(typescript@5.3.3)
|
||||
dev: false
|
||||
|
||||
/vue-template-compiler@2.7.16:
|
||||
@@ -5676,34 +5734,34 @@ packages:
|
||||
typescript: 5.3.3
|
||||
dev: true
|
||||
|
||||
/vue@3.4.15(typescript@5.3.3):
|
||||
resolution: {integrity: sha512-jC0GH4KkWLWJOEQjOpkqU1bQsBwf4R1rsFtw5GQJbjHVKWDzO6P0nWWBTmjp1xSemAioDFj1jdaK1qa3DnMQoQ==}
|
||||
/vue@3.4.18(typescript@5.3.3):
|
||||
resolution: {integrity: sha512-0zLRYamFRe0wF4q2L3O24KQzLyLpL64ye1RUToOgOxuWZsb/FhaNRdGmeozdtVYLz6tl94OXLaK7/WQIrVCw1A==}
|
||||
peerDependencies:
|
||||
typescript: '*'
|
||||
peerDependenciesMeta:
|
||||
typescript:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@vue/compiler-dom': 3.4.15
|
||||
'@vue/compiler-sfc': 3.4.15
|
||||
'@vue/runtime-dom': 3.4.15
|
||||
'@vue/server-renderer': 3.4.15(vue@3.4.15)
|
||||
'@vue/shared': 3.4.15
|
||||
'@vue/compiler-dom': 3.4.18
|
||||
'@vue/compiler-sfc': 3.4.18
|
||||
'@vue/runtime-dom': 3.4.18
|
||||
'@vue/server-renderer': 3.4.18(vue@3.4.18)
|
||||
'@vue/shared': 3.4.18
|
||||
typescript: 5.3.3
|
||||
|
||||
/vueuc@0.4.58(vue@3.4.15):
|
||||
/vueuc@0.4.58(vue@3.4.18):
|
||||
resolution: {integrity: sha512-Wnj/N8WbPRSxSt+9ji1jtDHPzda5h2OH/0sFBhvdxDRuyCZbjGg3/cKMaKqEoe+dErTexG2R+i6Q8S/Toq1MYg==}
|
||||
peerDependencies:
|
||||
vue: ^3.0.11
|
||||
dependencies:
|
||||
'@css-render/vue3-ssr': 0.15.12(vue@3.4.15)
|
||||
'@css-render/vue3-ssr': 0.15.12(vue@3.4.18)
|
||||
'@juggle/resize-observer': 3.4.0
|
||||
css-render: 0.15.12
|
||||
evtd: 0.2.4
|
||||
seemly: 0.3.8
|
||||
vdirs: 0.1.8(vue@3.4.15)
|
||||
vooks: 0.2.12(vue@3.4.15)
|
||||
vue: 3.4.15(typescript@5.3.3)
|
||||
vdirs: 0.1.8(vue@3.4.18)
|
||||
vooks: 0.2.12(vue@3.4.18)
|
||||
vue: 3.4.18(typescript@5.3.3)
|
||||
dev: false
|
||||
|
||||
/watchpack@2.4.0:
|
||||
@@ -5729,8 +5787,8 @@ packages:
|
||||
resolution: {integrity: sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==}
|
||||
dev: true
|
||||
|
||||
/webpack@5.90.0:
|
||||
resolution: {integrity: sha512-bdmyXRCXeeNIePv6R6tGPyy20aUobw4Zy8r0LUS2EWO+U+Ke/gYDgsCh7bl5rB6jPpr4r0SZa6dPxBxLooDT3w==}
|
||||
/webpack@5.90.1:
|
||||
resolution: {integrity: sha512-SstPdlAC5IvgFnhiRok8hqJo/+ArAbNv7rhU4fnWGHNVfN59HSQFaxZDSAL3IFG2YmqxuRs+IU33milSxbPlog==}
|
||||
engines: {node: '>=10.13.0'}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
@@ -5760,7 +5818,7 @@ packages:
|
||||
neo-async: 2.6.2
|
||||
schema-utils: 3.3.0
|
||||
tapable: 2.2.1
|
||||
terser-webpack-plugin: 5.3.10(webpack@5.90.0)
|
||||
terser-webpack-plugin: 5.3.10(webpack@5.90.1)
|
||||
watchpack: 2.4.0
|
||||
webpack-sources: 3.2.3
|
||||
transitivePeerDependencies:
|
||||
|
||||
@@ -45,6 +45,7 @@
|
||||
"macOSPrivateApi": true,
|
||||
"windows": [
|
||||
{
|
||||
"title": "登录",
|
||||
"label": "login",
|
||||
"url": "/login",
|
||||
"fullscreen": false,
|
||||
|
||||
+14
@@ -6,7 +6,21 @@
|
||||
</NaiveProvider>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { theme } from '@/stores/theme.ts'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
const themeStore = theme()
|
||||
const { THEME } = storeToRefs(themeStore)
|
||||
|
||||
onMounted(() => {
|
||||
document.documentElement.dataset.theme = THEME.value
|
||||
// /* 禁用浏览器默认的快捷键 */
|
||||
// window.addEventListener('keydown', (e) => {
|
||||
// if (e.ctrlKey || e.metaKey || e.altKey) {
|
||||
// e.preventDefault()
|
||||
// }
|
||||
// })
|
||||
// /* 禁止右键菜单 */
|
||||
// window.addEventListener('contextmenu', (e) => e.preventDefault(), false)
|
||||
})
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
@@ -1 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1705374413909" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7701" xmlns:xlink="http://www.w3.org/1999/xlink" width="48" height="48"><path d="M143.616 47.104l830.08 830.08c26.24 26.24 26.24 69.888 0 96.128-26.24 26.24-69.888 26.24-96.128 0L47.488 143.232c-17.536-26.24-17.536-69.888 0-96.128 26.24-26.24 69.888-26.24 96.128 0z m0 0" fill="#ffffff" p-id="7702"></path><path d="M982.528 143.232L152.32 973.312c-26.24 26.24-69.888 26.24-96.128 0-26.24-26.24-26.24-69.888 0-96.128L886.4 47.104c26.24-26.24 69.888-26.24 96.128 0 17.408 26.24 17.408 69.888 0 96.128z m0 0" fill="#ffffff" p-id="7703"></path></svg>
|
||||
|
Before Width: | Height: | Size: 796 B |
@@ -1 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1705372642705" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7402" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M143.616 47.104l830.08 830.08c26.24 26.24 26.24 69.888 0 96.128-26.24 26.24-69.888 26.24-96.128 0L47.488 143.232c-17.536-26.24-17.536-69.888 0-96.128 26.24-26.24 69.888-26.24 96.128 0z m0 0" fill="#404040" p-id="7403"></path><path d="M982.528 143.232L152.32 973.312c-26.24 26.24-69.888 26.24-96.128 0-26.24-26.24-26.24-69.888 0-96.128L886.4 47.104c26.24-26.24 69.888-26.24 96.128 0 17.408 26.24 17.408 69.888 0 96.128z m0 0" fill="#404040" p-id="7404"></path></svg>
|
||||
|
Before Width: | Height: | Size: 796 B |
@@ -1 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1705372525309" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4104" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M812.3 959.4H213.7c-81.6 0-148-66.4-148-148V212.9c0-81.6 66.4-148 148-148h598.5c81.6 0 148 66.4 148 148v598.5C960.3 893 893.9 959.4 812.3 959.4zM213.7 120.9c-50.7 0-92 41.3-92 92v598.5c0 50.7 41.3 92 92 92h598.5c50.7 0 92-41.3 92-92V212.9c0-50.7-41.3-92-92-92H213.7z" fill="#404040" p-id="4105"></path></svg>
|
||||
|
Before Width: | Height: | Size: 639 B |
@@ -1 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1705372596720" class="icon" viewBox="0 0 7168 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6186" width="336" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4441.95120779 617.62257531h-1760.37625529c-56.33204017 0-105.62257531-49.29053514-105.62257532-105.62257531s49.29053514-105.62257531 105.62257532-105.62257531h1760.37625529c56.33204017 0 105.62257531 49.29053514 105.62257533 105.62257531s-49.29053514 105.62257531-105.62257533 105.62257531z" p-id="6187" fill="#404040"></path></svg>
|
||||
|
Before Width: | Height: | Size: 665 B |
@@ -1 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1705375072061" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10477" width="48" height="48" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M959.720175 0H294.216115a63.960025 63.960025 0 0 0-63.960025 63.960025v127.92005H64.279825a63.960025 63.960025 0 0 0-63.960025 63.960025v703.560275a63.960025 63.960025 0 0 0 63.960025 63.960025h703.560275a63.960025 63.960025 0 0 0 63.960025-63.960025v-166.935665h127.92005a63.960025 63.960025 0 0 0 63.960025-63.960025V63.960025a63.960025 63.960025 0 0 0-63.960025-63.960025z m-191.880075 728.504685V959.400375H64.279825V255.8401h703.560275z m189.321674 0H831.800125V255.8401a63.960025 63.960025 0 0 0-63.960025-63.960025H294.216115V63.960025H959.720175z" fill="#404040" p-id="10478"></path></svg>
|
||||
|
Before Width: | Height: | Size: 929 B |
@@ -0,0 +1,21 @@
|
||||
const channel = new BroadcastChannel('cross-tab-msg')
|
||||
|
||||
/**
|
||||
* 发送消息
|
||||
* @param type 类型
|
||||
* @param content 内容
|
||||
* 如果是代理对象需要进行展开{ ...obj }
|
||||
*/
|
||||
export const sendMsg = (type: any, content: any) => {
|
||||
channel.postMessage({ type, content })
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听消息
|
||||
* @param callback 回调函数
|
||||
*/
|
||||
export const listenMsg = (callback: any) => {
|
||||
channel.addEventListener('message', (event) => {
|
||||
callback && callback(event.data)
|
||||
})
|
||||
}
|
||||
@@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<!-- 顶部操作栏和显示用户名 -->
|
||||
<div
|
||||
class="relative flex-y-center justify-between pl-20px pr-20px pt-8px pb-12px select-none shadow-[0_4px_4px_rgba(0,0,0,0.08)]">
|
||||
<div>宝贝🐶{{ activeItem }} ⛅</div>
|
||||
style="box-shadow: 0 4px 4px var(--box-shadow-color)"
|
||||
class="relative flex-y-center justify-between pl-20px pr-20px pt-8px pb-12px select-none">
|
||||
<div class="color-[--text-color]">宝贝🐶{{ activeItem }} ⛅</div>
|
||||
<!-- 顶部右边选项栏 -->
|
||||
<div class="options flex-y-center gap-20px">
|
||||
<div class="options flex-y-center gap-20px color-[--icon-color]">
|
||||
<div class="options-box">
|
||||
<n-popover
|
||||
trigger="hover"
|
||||
@@ -87,16 +88,13 @@
|
||||
|
||||
<!-- 侧边选项栏 -->
|
||||
<transition name="sidebar">
|
||||
<div
|
||||
v-if="sidebarShow"
|
||||
style="border: 1px solid rgba(90, 90, 90, 0.1)"
|
||||
class="flex flex-col absolute top-44px right-0 z-999 bg-#f0f0f0 p-22px box-border w-320px h-100vh shadow-[0_14px_14px_rgba(0,0,0,0.35)]">
|
||||
<div v-if="sidebarShow" style="border: 1px solid rgba(90, 90, 90, 0.1)" class="sidebar">
|
||||
<div class="setting-item flex-col-y-center">
|
||||
<div class="flex-between-center">
|
||||
<p>设为置顶</p>
|
||||
<n-switch size="small" />
|
||||
</div>
|
||||
<div class="h-1px bg-#f1f1f1 m-[10px_0]"></div>
|
||||
<div class="h-1px bg-[--setting-item-line] m-[10px_0]"></div>
|
||||
<div class="flex-between-center">
|
||||
<p>消息免打扰</p>
|
||||
<n-switch size="small" />
|
||||
@@ -147,7 +145,9 @@
|
||||
</n-scrollbar>
|
||||
|
||||
<!-- 底部栏 -->
|
||||
<div class="wh-full bg-#f1f1f1" style="box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.08)">
|
||||
<div
|
||||
class="wh-full bg-[--right-bg-color] color-[--icon-color]"
|
||||
style="box-shadow: 0 -2px 4px var(--box-shadow-color)">
|
||||
<!-- 输入框顶部选项栏 -->
|
||||
<div class="flex-between-center p-[10px_22px] select-none">
|
||||
<div class="input-options flex-y-center">
|
||||
@@ -259,7 +259,7 @@
|
||||
<n-input
|
||||
class="absolute"
|
||||
:placeholder="null as any"
|
||||
style="border: 0; background: #f1f1f1"
|
||||
style="border: 0; background: var(--right-bg-color)"
|
||||
type="textarea"
|
||||
size="small"
|
||||
autofocus
|
||||
@@ -270,20 +270,24 @@
|
||||
}" />
|
||||
</ContextMenu>
|
||||
|
||||
<n-button-group size="small" class="pr-20px">
|
||||
<n-button color="#059669" :disabled="contactInput.length === 0" class="w-65px">发送</n-button>
|
||||
<n-button color="#059669" class="p-[0_6px]">
|
||||
<template #icon>
|
||||
<svg class="w-22px h-22px"><use href="#down"></use></svg>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-button-group>
|
||||
<n-config-provider :theme="lightTheme">
|
||||
<n-button-group size="small" class="pr-20px">
|
||||
<n-button color="#059669" :disabled="contactInput.length === 0" class="w-65px">发送</n-button>
|
||||
<n-button color="#059669" class="p-[0_6px]">
|
||||
<template #icon>
|
||||
<svg class="w-22px h-22px"><use href="#down"></use></svg>
|
||||
</template>
|
||||
</n-button>
|
||||
</n-button-group>
|
||||
</n-config-provider>
|
||||
</div>
|
||||
|
||||
<!-- 弹出框 -->
|
||||
<n-modal v-model:show="modalShow" class="w-350px border-rd-8px">
|
||||
<div class="bg-#fdfdfd w-360px h-full p-6px box-border flex flex-col">
|
||||
<img @click="modalShow = false" src="@/assets/svg/close.svg" class="w-10px h-10px ml-a cursor-pointer" alt="" />
|
||||
<div class="bg-[--bg-popover] w-360px h-full p-6px box-border flex flex-col">
|
||||
<svg @click="modalShow = false" class="w-12px h-12px ml-a cursor-pointer select-none">
|
||||
<use href="#close"></use>
|
||||
</svg>
|
||||
<div class="flex flex-col gap-30px p-[22px_10px_10px_22px] select-none">
|
||||
<p>{{ tips }}</p>
|
||||
<label v-if="tipsOptions" class="font-size-14px flex gap-6px lh-16px">
|
||||
@@ -301,6 +305,8 @@
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { lightTheme } from 'naive-ui'
|
||||
|
||||
const menuList = ref([
|
||||
{ label: '剪切', icon: 'screenshot', disabled: true },
|
||||
{ label: '复制', icon: 'copy', disabled: true },
|
||||
@@ -357,6 +363,21 @@ const handleConfirm = () => {}
|
||||
const handleSelect = (event: MouseEvent) => {
|
||||
console.log(event)
|
||||
}
|
||||
|
||||
const closeMenu = (event: any) => {
|
||||
/* 点击非侧边栏元素时，关闭侧边栏，但点击弹出框元素、侧边栏图标、还有侧边栏里面的元素时不关闭 */
|
||||
if (!event.target.matches('.sidebar, .sidebar *, .options-box *, .n-modal *')) {
|
||||
sidebarShow.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('click', closeMenu, true)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('click', closeMenu, true)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -389,8 +410,9 @@ const handleSelect = (event: MouseEvent) => {
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
color: var(--text-color);
|
||||
margin-top: 20px;
|
||||
background: #fdfdfd;
|
||||
background: var(--bg-setting-item);
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border-radius: 12px;
|
||||
@@ -420,6 +442,10 @@ const handleSelect = (event: MouseEvent) => {
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
@apply flex flex-col absolute top-44px right-0 z-999 bg-[--bg-chat-drawer] p-22px box-border w-320px h-100vh shadow-[0_14px_14px_rgba(0,0,0,0.35)];
|
||||
}
|
||||
|
||||
/*! 使用vue内置transition做过渡效果 */
|
||||
// 进入动画的生效状态
|
||||
.sidebar-enter-active {
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
top: `${pos.posY}px`
|
||||
}">
|
||||
<div v-resize="handleSize" class="menu-list">
|
||||
<div v-for="item in menu as any[]" :key="item.label">
|
||||
<div v-for="(item, index) in menu as any[]" :key="index">
|
||||
<!-- 禁止的菜单选项需要禁止点击事件 -->
|
||||
<div class="menu-item-disabled" v-if="item.disabled" @click.prevent="$event.preventDefault()">
|
||||
<svg><use :href="`#${item.icon}`"></use></svg>
|
||||
@@ -24,7 +24,7 @@
|
||||
</div>
|
||||
<!-- 判断是否有特别的菜单项才需要分割线 -->
|
||||
<div v-if="specialMenu.length > 0" class="flex-col-y-center gap-6px">
|
||||
<div class="h-1px bg-#f1f1f1 m-[2px_8px]"></div>
|
||||
<div class="h-1px bg-[--setting-item-line] m-[2px_8px]"></div>
|
||||
<div @click="handleClick(item)" class="menu-item" v-for="item in specialMenu as any[]" :key="item.label">
|
||||
<svg><use :href="`#${item.icon}`"></use></svg>
|
||||
{{ item.label }}
|
||||
@@ -125,24 +125,7 @@ const handleAfterEnter = (el: any) => {
|
||||
}
|
||||
}
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
background: linear-gradient(45deg, rgba(255, 255, 255, 0.65) 80%, rgba(255, 255, 255, 0.95) 100%);
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, 0.08),
|
||||
0 2px 2px rgb(0 0 0 / 3%),
|
||||
0 4px 4px rgb(0 0 0 / 4%),
|
||||
0 10px 8px rgb(0 0 0 / 5%),
|
||||
0 15px 15px rgb(0 0 0 / 6%),
|
||||
0 30px 30px rgb(0 0 0 / 7%),
|
||||
0 70px 65px rgb(0 0 0 / 9%);
|
||||
z-index: 999;
|
||||
min-width: 100px;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
@include menu-item-style();
|
||||
.menu-list {
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
@@ -151,14 +134,13 @@ const handleAfterEnter = (el: any) => {
|
||||
.menu-item {
|
||||
@include menu-item();
|
||||
&:hover {
|
||||
background-color: rgba(10, 20, 28, 0.1);
|
||||
background-color: var(--bg-menu-hover);
|
||||
svg {
|
||||
animation: twinkle 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
.menu-item-disabled {
|
||||
--disabled-color: #c1c1c1;
|
||||
@include menu-item();
|
||||
color: var(--disabled-color);
|
||||
svg {
|
||||
|
||||
@@ -1,52 +0,0 @@
|
||||
<template>
|
||||
<n-button @click="switchTheme" secondary type="error">切换主题</n-button>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { delay } from 'lodash-es'
|
||||
import { theme } from '@/stores/theme.ts'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
const themeStore = theme()
|
||||
const { EYE_THEME } = storeToRefs(themeStore)
|
||||
|
||||
/*切换主题*/
|
||||
const switchTheme = (event: MouseEvent) => {
|
||||
const x = event.clientX
|
||||
const y = event.clientY
|
||||
const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
|
||||
|
||||
let isDark: boolean
|
||||
|
||||
delay(() => {
|
||||
EYE_THEME.value = !EYE_THEME.value
|
||||
/*在登录页面设置了护眼模式就需要把其他的颜色给关闭*/
|
||||
themeStore.toggleTheme()
|
||||
/*判断当前浏览器是否支持startViewTransition API*/
|
||||
if (document.startViewTransition) {
|
||||
const transition = document.startViewTransition(() => {
|
||||
const root = document.documentElement
|
||||
isDark = root.classList.contains('dark')
|
||||
root.classList.remove(isDark ? 'dark' : 'light')
|
||||
root.classList.add(isDark ? 'light' : 'dark')
|
||||
})
|
||||
transition.ready.then(() => {
|
||||
const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
|
||||
document.documentElement.animate(
|
||||
{
|
||||
clipPath: isDark ? [...clipPath].reverse() : clipPath
|
||||
},
|
||||
{
|
||||
duration: 500,
|
||||
easing: 'ease-in',
|
||||
pseudoElement: isDark ? '::view-transition-old(root)' : '::view-transition-new(root)'
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
}, 500)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '@/styles/scss/toggle-theme';
|
||||
</style>
|
||||
@@ -1,9 +1,5 @@
|
||||
<template>
|
||||
<n-config-provider
|
||||
:theme-overrides="themeOverrides"
|
||||
:theme="globalTheme"
|
||||
:locale="NLanguage"
|
||||
:date-locale="NDataLanguage">
|
||||
<n-config-provider :theme-overrides="themeOverrides" :theme="globalTheme" :locale="zhCN" :date-locale="dateZhCN">
|
||||
<n-loading-bar-provider>
|
||||
<n-dialog-provider>
|
||||
<n-notification-provider :max="notificMax">
|
||||
@@ -20,19 +16,46 @@
|
||||
<script setup lang="ts">
|
||||
import { theme } from '@/stores/theme.ts'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { dateZhCN, darkTheme, GlobalThemeOverrides, zhCN } from 'naive-ui'
|
||||
import { dateZhCN, darkTheme, lightTheme, GlobalThemeOverrides, zhCN } from 'naive-ui'
|
||||
import { listenMsg } from '@/common/CrossTabMsg.ts'
|
||||
|
||||
const themeStore = theme()
|
||||
const { EYE_THEME } = storeToRefs(themeStore)
|
||||
/*调整naive ui的国际化*/
|
||||
const NLanguage = ref(zhCN)
|
||||
const NDataLanguage = ref(dateZhCN)
|
||||
provide('NLanguage', NLanguage)
|
||||
provide('NDataLanguage', NDataLanguage)
|
||||
const { THEME, PATTERN } = storeToRefs(themeStore)
|
||||
/*监听深色主题颜色变化*/
|
||||
const globalTheme = ref<any>(EYE_THEME.value)
|
||||
const globalTheme = ref<any>(THEME.value)
|
||||
const prefers = matchMedia('(prefers-color-scheme: dark)')
|
||||
|
||||
/* 跟随系统主题模式切换主题 */
|
||||
const followOS = () => {
|
||||
globalTheme.value = prefers.matches ? darkTheme : lightTheme
|
||||
document.documentElement.dataset.theme = prefers.matches ? 'dark' : 'light'
|
||||
THEME.value = prefers.matches ? 'dark' : 'light'
|
||||
}
|
||||
// TODO 这里待优化 (nyh -> 2024-02-16 22:06:40)
|
||||
const listenOS = () => {
|
||||
followOS()
|
||||
}
|
||||
|
||||
/* 监听其他标签页的变化 */
|
||||
listenMsg((msgInfo: any) => {
|
||||
if (msgInfo.content === 'os') {
|
||||
listenOS()
|
||||
prefers.addEventListener('change', listenOS)
|
||||
} else {
|
||||
globalTheme.value = msgInfo.content === 'dark' ? darkTheme : lightTheme
|
||||
document.documentElement.dataset.theme = msgInfo.content === 'dark' ? 'dark' : 'light'
|
||||
prefers.removeEventListener('change', listenOS)
|
||||
}
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
globalTheme.value = EYE_THEME.value ? darkTheme : null
|
||||
if (PATTERN.value === 'os') {
|
||||
followOS()
|
||||
prefers.addEventListener('change', followOS)
|
||||
} else {
|
||||
globalTheme.value = THEME.value === 'dark' ? darkTheme : lightTheme
|
||||
prefers.removeEventListener('change', followOS)
|
||||
}
|
||||
})
|
||||
|
||||
/*调整naive ui的primary的主题颜色和样式*/
|
||||
|
||||
@@ -2,25 +2,29 @@
|
||||
<!-- user-select: none让元素不可以选中 -->
|
||||
<div data-tauri-drag-region class="flex justify-end select-none">
|
||||
<!-- 收缩页面 -->
|
||||
<div v-if="shrink" @click="shrinkWindow" class="w-28px h24px flex-center hover:bg-#e7e7e7">
|
||||
<svg class="w-16px h-16px color-#404040 cursor-pointer"><use href="#left-bar"></use></svg>
|
||||
<div v-if="shrink" @click="shrinkWindow" class="hover-box">
|
||||
<svg class="w-16px h-16px color-[--action-bar-icon-color] cursor-pointer"><use href="#left-bar"></use></svg>
|
||||
</div>
|
||||
<!-- 最小化 -->
|
||||
<div v-if="minW" @click="minimizeWindow" class="w-28px h24px flex-center hover:bg-#e7e7e7">
|
||||
<img src="@/assets/svg/minimize.svg" class="w-38px h-34px" alt="" />
|
||||
<div v-if="minW" @click="minimizeWindow" class="hover-box">
|
||||
<svg class="w-24px h-24px color-[--action-bar-icon-color] opacity-66 cursor-pointer">
|
||||
<use href="#maximize"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- 最大化 -->
|
||||
<div v-if="maxW" @click="restoreWindow" class="w-28px h24px flex-center hover:bg-#e7e7e7">
|
||||
<img v-show="!windowMaximized" src="@/assets/svg/maximize.svg" class="w-14px h-14px" alt="" />
|
||||
<img v-show="windowMaximized" src="@/assets/svg/normal.svg" class="w-14px h-14px" alt="" />
|
||||
<div v-if="maxW" @click="restoreWindow" class="hover-box">
|
||||
<svg v-show="!windowMaximized" class="w-18px h-18px color-[--action-bar-icon-color] cursor-pointer">
|
||||
<use href="#rectangle-small"></use>
|
||||
</svg>
|
||||
<svg v-show="windowMaximized" class="w-16px h-16px color-[--action-bar-icon-color] cursor-pointer">
|
||||
<use href="#internal-reduction"></use>
|
||||
</svg>
|
||||
</div>
|
||||
<!-- 关闭窗口 -->
|
||||
<div
|
||||
v-if="closeW"
|
||||
@click="closeWindow"
|
||||
class="close-box w-28px h24px flex-center cursor-pointer hover:bg-#c22b1c rounded-tr-6px">
|
||||
<img src="@/assets/svg/close.svg" class="default-img w-10px h-10px" alt="" />
|
||||
<img src="@/assets/svg/close-hover.svg" class="hover-img w-10px h-10px" alt="" />
|
||||
<div v-if="closeW" @click="closeWindow" class="action-close">
|
||||
<svg class="w-14px h-14px color-[--action-bar-icon-color] cursor-pointer">
|
||||
<use href="#close"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -97,19 +101,10 @@ const shrinkWindow = async () => {
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 当鼠标悬停在按钮上时，切换显示状态 */
|
||||
.close-box {
|
||||
/* 默认不显示 */
|
||||
.hover-img {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
.default-img {
|
||||
display: none;
|
||||
}
|
||||
.hover-img {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
.hover-box {
|
||||
@apply w-28px h24px flex-center hover:bg-[--action-bar-icon-hover];
|
||||
}
|
||||
.action-close {
|
||||
@apply w-28px h24px flex-center cursor-pointer hover:bg-#c22b1c svg:hover:color-[#fff] rounded-tr-6px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -5,6 +5,7 @@ import { invoke } from '@tauri-apps/api/tauri'
|
||||
export const useWindow = () => {
|
||||
/**
|
||||
* 创建窗口
|
||||
* @param title 窗口标题
|
||||
* @param label 窗口名称
|
||||
* @param wantCloseWindow 创建后需要关闭的窗口
|
||||
* @param width 窗口宽度
|
||||
@@ -14,6 +15,7 @@ export const useWindow = () => {
|
||||
* @param minH 窗口最小高度
|
||||
* */
|
||||
const createWebviewWindow = async (
|
||||
title: string,
|
||||
label: string,
|
||||
width: number,
|
||||
height: number,
|
||||
@@ -23,6 +25,7 @@ export const useWindow = () => {
|
||||
minH = 540
|
||||
) => {
|
||||
const webview = new WebviewWindow(label, {
|
||||
title: title,
|
||||
url: `/${label}`,
|
||||
fullscreen: false,
|
||||
resizable: resizable,
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div data-tauri-drag-region class="resizable bg-#fdfdfd select-none" :style="{ width: width + 'px' }">
|
||||
<div data-tauri-drag-region class="resizable select-none" :style="{ width: width + 'px' }">
|
||||
<ActionBar class="absolute right-0" v-if="shrinkStatus" :shrink-status="!shrinkStatus" :max-w="false" />
|
||||
|
||||
<!-- <div class="resize-handle" @mousedown="initDrag"></div>-->
|
||||
|
||||
<!-- 顶部搜索栏 -->
|
||||
<div class="mt-30px w-full h-38px flex flex-col items-center shadow-[0_2px_4px_rgba(0,0,0,0.08)]">
|
||||
<div style="box-shadow: 0 2px 4px var(--box-shadow-color)" class="mt-30px w-full h-38px flex flex-col items-center">
|
||||
<div class="flex-center gap-5px w-full pr-16px pl-16px box-border">
|
||||
<n-input
|
||||
:on-focus="() => router.push('/searchDetails')"
|
||||
class="rounded-4px w-full"
|
||||
style="background-color: #f3f3f3"
|
||||
style="background: var(--search-bg-color)"
|
||||
:maxlength="20"
|
||||
size="small"
|
||||
placeholder="搜索">
|
||||
@@ -89,6 +89,7 @@ Mitt.on('shrinkWindow', (event) => {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background: var(--center-bg-color);
|
||||
}
|
||||
|
||||
.resize-handle {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex wh-full min-h-540px min-w-310px" style="background: rgba(255, 255, 255, 0.6)">
|
||||
<div class="flex wh-full min-h-540px min-w-310px">
|
||||
<Left />
|
||||
<Center />
|
||||
<Right v-if="!shrinkStatus" />
|
||||
|
||||
+99
-18
@@ -1,10 +1,10 @@
|
||||
<template>
|
||||
<div class="w-60px h-full pt-30px pl-6px pr-6px pb-15px box-border flex-col-center select-none">
|
||||
<img @click="toLogin" class="border-rounded-50% w-36px h-36px bg-#fff cursor-pointer" src="/logo.png" alt="" />
|
||||
<main class="left w-60px h-full pt-30px pl-6px pr-6px pb-15px box-border flex-col-center select-none">
|
||||
<img class="border-rounded-50% w-36px h-36px bg-#fff cursor-pointer" src="/logo.png" alt="" />
|
||||
|
||||
<div data-tauri-drag-region class="wh-full mt-20px flex-col-x-center justify-between">
|
||||
<!-- 上部分操作栏 -->
|
||||
<div class="flex-col-x-center gap-10px">
|
||||
<header class="flex-col-x-center gap-10px color-[--icon-color]">
|
||||
<div
|
||||
v-for="(item, index) in itemsTop"
|
||||
:key="index"
|
||||
@@ -17,20 +17,38 @@
|
||||
</svg>
|
||||
</n-badge>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- 下部分操作栏 -->
|
||||
<div class="flex-col-x-center gap-10px">
|
||||
<div v-for="(item, index) in itemsBottom" :key="index" @click="openContent(item.label)" class="bottom-action">
|
||||
<footer class="flex-col-x-center gap-10px color-[--icon-color]">
|
||||
<div
|
||||
v-for="(item, index) in itemsBottom"
|
||||
:key="index"
|
||||
@click="openContent(item.label, item.title)"
|
||||
class="bottom-action">
|
||||
<svg class="w-22px h-22px">
|
||||
<use :href="`#${item.icon}`"></use>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<svg class="more w-22px h-22px"><use href="#hamburger-button"></use></svg>
|
||||
</div>
|
||||
<svg @click="settingShow = !settingShow" class="more w-22px h-22px relative">
|
||||
<use href="#hamburger-button"></use>
|
||||
</svg>
|
||||
|
||||
<!-- 更多选项面板 -->
|
||||
<div v-if="settingShow" class="setting-item">
|
||||
<div class="menu-list">
|
||||
<div v-for="(item, index) in menuList" :key="index">
|
||||
<div class="menu-item" @click="() => item.click()">
|
||||
<svg><use :href="`#${item.icon}`"></use></svg>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { delay } from 'lodash-es'
|
||||
@@ -46,12 +64,19 @@ type TopActive = {
|
||||
}[]
|
||||
|
||||
type BottomActive = {
|
||||
title: string
|
||||
url: string
|
||||
label: string
|
||||
icon: string
|
||||
iconAction?: string
|
||||
}[]
|
||||
|
||||
type MenuList = {
|
||||
label: string
|
||||
icon: string
|
||||
click: () => void
|
||||
}[]
|
||||
|
||||
const itemsTop = ref<TopActive>([
|
||||
{
|
||||
url: 'message',
|
||||
@@ -71,27 +96,66 @@ const itemsTop = ref<TopActive>([
|
||||
])
|
||||
const itemsBottom: BottomActive = [
|
||||
{
|
||||
title: '邮件',
|
||||
url: '/mail',
|
||||
label: 'mail',
|
||||
icon: 'mail',
|
||||
iconAction: 'mail-action'
|
||||
},
|
||||
{
|
||||
title: '文件管理器',
|
||||
url: '/folder',
|
||||
label: 'mail',
|
||||
icon: 'file',
|
||||
iconAction: 'file-action'
|
||||
},
|
||||
{
|
||||
title: '收藏',
|
||||
url: '/collection',
|
||||
label: 'mail',
|
||||
icon: 'collect',
|
||||
iconAction: 'collect-action'
|
||||
}
|
||||
]
|
||||
|
||||
/* 设置列表菜单项 */
|
||||
const menuList = ref<MenuList>([
|
||||
{
|
||||
label: '检查更新',
|
||||
icon: 'arrow-circle-up',
|
||||
click: () => {
|
||||
// todo 检查更新
|
||||
console.log('检查更新')
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '设置',
|
||||
icon: 'settings',
|
||||
click: async () => {
|
||||
// todo 设置
|
||||
await createWebviewWindow('设置', 'settings', 840, 840, '', false)
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '关于',
|
||||
icon: 'info',
|
||||
click: async () => {
|
||||
// todo 关于
|
||||
await createWebviewWindow('关于', 'about', 360, 480, '', false, 360, 480)
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '退出账号',
|
||||
icon: 'power',
|
||||
click: async () => {
|
||||
// todo 退出账号 需要关闭其他的全部窗口
|
||||
// 1.需要退出账号
|
||||
await createWebviewWindow('登录', 'login', 320, 448, 'home', false, 320, 448)
|
||||
}
|
||||
}
|
||||
])
|
||||
/*当前选中的元素 默认选中itemsTop的第一项*/
|
||||
const activeItem = ref<string>(itemsTop.value[0].url)
|
||||
const settingShow = ref(false)
|
||||
const { createWebviewWindow } = useWindow()
|
||||
|
||||
watchEffect(() => {
|
||||
@@ -116,23 +180,28 @@ const pageJumps = (url: string) => {
|
||||
/**
|
||||
* 打开内容对应窗口
|
||||
* @param label 窗口的标识
|
||||
* @param title 窗口的标题
|
||||
* */
|
||||
const openContent = (label: string) => {
|
||||
const openContent = (label: string, title: string) => {
|
||||
delay(async () => {
|
||||
await createWebviewWindow(label, 840, 600)
|
||||
await createWebviewWindow(title, label, 840, 600)
|
||||
}, 300)
|
||||
}
|
||||
|
||||
const toLogin = () => {
|
||||
// todo 暂时使用创建新窗口来跳转到登录页面，生产环境一般不会跳转到登录页面
|
||||
delay(async () => {
|
||||
await createWebviewWindow('login', 320, 448, 'home', false, 320, 448)
|
||||
}, 800)
|
||||
const closeMenu = (event: any) => {
|
||||
if (!event.target.matches('.setting-item, .more')) {
|
||||
settingShow.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
/* 页面加载的时候默认显示消息列表 */
|
||||
pageJumps(activeItem.value)
|
||||
window.addEventListener('click', closeMenu, true)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('click', closeMenu, true)
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -148,6 +217,10 @@ onMounted(() => {
|
||||
}
|
||||
}
|
||||
|
||||
.left {
|
||||
background: var(--left-bg-color);
|
||||
}
|
||||
|
||||
.top-action,
|
||||
.bottom-action,
|
||||
.more {
|
||||
@@ -155,11 +228,19 @@ onMounted(() => {
|
||||
}
|
||||
|
||||
.active {
|
||||
background: rgba(193, 193, 193, 0.4);
|
||||
background: var(--left-active-color);
|
||||
border-radius: 8px;
|
||||
color: #059669;
|
||||
}
|
||||
|
||||
.setting-item {
|
||||
@include menu-item-style(absolute);
|
||||
left: 58px;
|
||||
bottom: 10px;
|
||||
width: 160px;
|
||||
@include menu-list();
|
||||
}
|
||||
|
||||
:deep(.n-badge .n-badge-sup) {
|
||||
font-weight: bold;
|
||||
font-size: 10px;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="flex-1 bg-#f1f1f1 h-full w-100vw">
|
||||
<div class="flex-1 bg-[--right-bg-color] h-full w-100vw">
|
||||
<ActionBar />
|
||||
<!-- 需要判断当前路由是否是信息详情界面 -->
|
||||
<ChatMain :active-item="activeItem" v-if="msgBoxShow && router.currentRoute.value.path.includes('/message')" />
|
||||
@@ -8,17 +8,51 @@
|
||||
|
||||
<!-- 聊天界面背景图标 -->
|
||||
<div v-else class="flex-center wh-full select-none">
|
||||
<img class="w-130px h-100px" src="@/assets/img/hula_bg.png" alt="" />
|
||||
<img v-if="imgTheme === 'dark'" class="w-130px h-100px" src="@/assets/img/hula_bg_dark.png" alt="" />
|
||||
<img v-else class="w-130px h-100px" src="@/assets/img/hula_bg_light.png" alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import Mitt from '@/utils/Bus.ts'
|
||||
import router from '@/router'
|
||||
import { listenMsg } from '@/common/CrossTabMsg.ts'
|
||||
import { theme } from '@/stores/theme.ts'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
const themeStore = theme()
|
||||
const { THEME, PATTERN } = storeToRefs(themeStore)
|
||||
const msgBoxShow = ref(false)
|
||||
const detailsShow = ref(false)
|
||||
const activeItem = ref()
|
||||
const imgTheme = ref(THEME.value)
|
||||
const prefers = matchMedia('(prefers-color-scheme: dark)')
|
||||
|
||||
/* 跟随系统主题模式切换主题 */
|
||||
const followOS = () => {
|
||||
imgTheme.value = prefers.matches ? 'dark' : 'light'
|
||||
}
|
||||
|
||||
/* 监听其他标签页的变化 */
|
||||
listenMsg((msgInfo: any) => {
|
||||
if (msgInfo.content === 'os') {
|
||||
followOS()
|
||||
prefers.addEventListener('change', followOS)
|
||||
} else {
|
||||
imgTheme.value = msgInfo.content === 'dark' ? 'dark' : 'light'
|
||||
prefers.removeEventListener('change', followOS)
|
||||
}
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
if (PATTERN.value === 'os') {
|
||||
followOS()
|
||||
prefers.addEventListener('change', followOS)
|
||||
} else {
|
||||
imgTheme.value = THEME.value === 'dark' ? 'dark' : 'light'
|
||||
prefers.removeEventListener('change', followOS)
|
||||
}
|
||||
})
|
||||
|
||||
Mitt.on('msgBoxShow', (event: any) => {
|
||||
msgBoxShow.value = event.msgBoxShow
|
||||
|
||||
@@ -5,9 +5,7 @@ import { pinia } from '@/stores'
|
||||
import vResize from '@/directives/v-resize'
|
||||
import vSlide from '@/directives/v-slide.ts'
|
||||
import router from '@/router'
|
||||
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
||||
import App from '@/App.vue'
|
||||
|
||||
pinia.use(piniaPluginPersistedstate)
|
||||
const app = createApp(App)
|
||||
app.use(router).use(pinia).directive('resize', vResize).directive('slide', vSlide).mount('#app')
|
||||
|
||||
+29
-12
@@ -6,12 +6,12 @@ const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: '/login',
|
||||
name: 'login',
|
||||
component: () => import('@/views/page/login-window/Login.vue')
|
||||
component: () => import('@/views/login-window/Login.vue')
|
||||
},
|
||||
{
|
||||
path: '/QRCode',
|
||||
name: 'QRCode',
|
||||
component: () => import('@/views/page/login-window/QRCode.vue')
|
||||
component: () => import('@/views/login-window/QRCode.vue')
|
||||
},
|
||||
{
|
||||
path: '/home',
|
||||
@@ -21,34 +21,51 @@ const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: '/message',
|
||||
name: 'message',
|
||||
component: () => import('@/views/page/home-window/Message.vue')
|
||||
component: () => import('@/views/home-window/Message.vue')
|
||||
},
|
||||
{
|
||||
path: '/friendsList',
|
||||
name: 'friendsList',
|
||||
component: () => import('@/views/page/home-window/FriendsList.vue')
|
||||
component: () => import('@/views/home-window/FriendsList.vue')
|
||||
},
|
||||
{
|
||||
path: '/space',
|
||||
name: 'space',
|
||||
component: () => import('@/views/page/home-window/Space.vue')
|
||||
},
|
||||
{
|
||||
path: '/more',
|
||||
name: 'more',
|
||||
component: () => import('@/views/page/home-window/More.vue')
|
||||
component: () => import('@/views/home-window/Space.vue')
|
||||
},
|
||||
{
|
||||
path: '/searchDetails',
|
||||
name: 'searchDetails',
|
||||
component: () => import('@/views/page/home-window/SearchDetails.vue')
|
||||
component: () => import('@/views/home-window/SearchDetails.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: '/mail',
|
||||
name: 'mail',
|
||||
component: () => import('@/views/page/home-window/Mail.vue')
|
||||
component: () => import('@/views/home-window/Mail.vue')
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
component: () => import('@/views/home-window/more/About.vue')
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
name: 'settings',
|
||||
component: () => import('@/views/home-window/more/settings/index.vue'),
|
||||
children: [
|
||||
{
|
||||
path: '/general',
|
||||
name: 'general',
|
||||
component: () => import('@/views/home-window/more/settings/general.vue')
|
||||
},
|
||||
{
|
||||
path: '/remind',
|
||||
name: 'remind',
|
||||
component: () => import('@/views/home-window/more/settings/remind.vue')
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import { createPinia } from 'pinia'
|
||||
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
|
||||
|
||||
export const pinia = createPinia()
|
||||
pinia.use(piniaPluginPersistedstate)
|
||||
|
||||
+15
-7
@@ -3,16 +3,24 @@ import { defineStore } from 'pinia'
|
||||
export const theme = defineStore('theme', {
|
||||
state: () => {
|
||||
return {
|
||||
/*背景颜色*/
|
||||
BGC: '#FFF',
|
||||
/*是否切换护眼主题*/
|
||||
EYE_THEME: false
|
||||
/* 主题 */
|
||||
THEME: 'light',
|
||||
/* 选中的主题模式 */
|
||||
PATTERN: 'light'
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
toggleTheme() {
|
||||
this.EYE_THEME = !!this.EYE_THEME
|
||||
this.BGC = this.BGC === '#FFF' ? '#18181c' : '#FFF'
|
||||
toggleTheme(theme: string) {
|
||||
if (theme === 'os') {
|
||||
this.PATTERN = theme
|
||||
const os = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
|
||||
document.documentElement.dataset.theme = os
|
||||
this.THEME = os
|
||||
} else {
|
||||
this.THEME = theme
|
||||
document.documentElement.dataset.theme = theme
|
||||
this.PATTERN = theme
|
||||
}
|
||||
}
|
||||
},
|
||||
//开启数据持久化
|
||||
|
||||
@@ -1,14 +1,82 @@
|
||||
/*!项目提供scss全局变量*/
|
||||
$border-radius: 8px;
|
||||
// 横部滚动条宽，纵向滚动条高
|
||||
$webkit-scrollbar-width: 8px;
|
||||
$webkit-scrollbar-height: 6px;
|
||||
// 滚动条颜色
|
||||
$webkit-scrollbar-color: #bfbfbf;
|
||||
// 滚动条的轨道颜色
|
||||
$webkit-scrollbar-track-color: #efefef;
|
||||
// 滚动条的悬停选中滑块颜色
|
||||
$webkit-scrollbar-hover: #999;
|
||||
/*! 主题变量 */
|
||||
:root {
|
||||
// 整体布局背景
|
||||
--left-bg-color: rgba(255, 255, 255, 0.6);
|
||||
--left-active-color: rgba(193, 193, 193, 0.6);
|
||||
--center-bg-color: #fff;
|
||||
--right-bg-color: #f1f1f1;
|
||||
// 阴影样式的颜色
|
||||
--box-shadow-color: rgba(0,0,0,0.08);
|
||||
// 文字颜色
|
||||
--text-color: #18181c;
|
||||
// 整体图标颜色
|
||||
--icon-color: #000;
|
||||
--action-bar-icon-color: #404040;
|
||||
--action-bar-icon-hover: #e7e7e7;
|
||||
// 搜索框背景颜色
|
||||
--search-bg-color: #f3f3f3;
|
||||
// 消息列表样式
|
||||
--bg-msg-first-child: #eeeeee;
|
||||
--bg-msg-hover: #f3f3f3;
|
||||
--bg-active-msg: rgba(5, 150, 105, 0.8);
|
||||
// 聊天框整体样式
|
||||
--bg-chat-drawer: #f0f0f0;
|
||||
--bg-setting-item: #fdfdfd;
|
||||
--setting-item-line: #f1f1f1;
|
||||
// 弹出框背景样式
|
||||
--bg-popover: #fdfdfd;
|
||||
// 右键菜单样式或者需要透明的菜单的样式
|
||||
--bg-menu: linear-gradient(45deg, rgba(255, 255, 255, 0.65) 80%, rgba(255, 255, 255, 0.95) 100%);
|
||||
--bg-menu-hover: rgba(10, 20, 28, 0.1);
|
||||
// 通用左边菜单栏的hover样式
|
||||
--bg-left-menu: rgba(255, 255, 255, 0.1);
|
||||
--bg-left-menu-hover: rgba(90, 90, 90, 0.1);
|
||||
--bg-left-active: rgba(90, 90, 90, 0.2);
|
||||
// 通用禁用时的样式
|
||||
--disabled-color: #c1c1c1;
|
||||
// 选中选项时的边框的样式
|
||||
--active-border-color: rgba(5, 150, 105, 0.8);
|
||||
}
|
||||
|
||||
html[data-theme='dark'] {
|
||||
// 整体布局背景
|
||||
--left-bg-color: rgba(0, 0, 0, 0.7);
|
||||
--left-active-color: rgba(193, 193, 193, 0.1);
|
||||
--center-bg-color: #1b1b1b;
|
||||
--right-bg-color: #111111;
|
||||
// 阴影样式的颜色
|
||||
--box-shadow-color: rgba(90,90,90,0.1);
|
||||
// 文字颜色
|
||||
--text-color: #fff;
|
||||
// 整体图标颜色
|
||||
--icon-color: #c1c1c1;
|
||||
--action-bar-icon-color: #c1c1c1;
|
||||
--action-bar-icon-hover: #242424;
|
||||
// 搜索框背景颜色
|
||||
--search-bg-color: #282828;
|
||||
// 消息列表样式
|
||||
--bg-msg-first-child: #282828;
|
||||
--bg-msg-hover: #2d2d2d;
|
||||
--bg-active-msg: rgba(5, 150, 105, 0.8);
|
||||
// 聊天框整体样式
|
||||
--bg-chat-drawer: #1b1b1b;
|
||||
--bg-setting-item: #262626;
|
||||
--setting-item-line: #333333;
|
||||
// 弹出框背景样式
|
||||
--bg-popover: #303030;
|
||||
// 右键菜单样式或者需要透明的菜单的样式
|
||||
--bg-menu: linear-gradient(45deg, rgba(33, 33, 33, 0.85) 80%, rgba(33, 33, 33, 0.95) 100%);
|
||||
--bg-menu-hover: #323232;
|
||||
// 通用左边菜单栏的hover样式
|
||||
--bg-left-menu: rgba(0, 0, 0, 0.8);
|
||||
--bg-left-menu-hover: #3b3b3b;
|
||||
--bg-left-active: #444444;
|
||||
// 通用禁用时的样式
|
||||
--disabled-color: #575757;
|
||||
// 选中选项时的边框的样式
|
||||
--active-border-color: rgba(5, 150, 105, 0.8);
|
||||
}
|
||||
/*! end */
|
||||
// 线性动画
|
||||
@keyframes linearAnimation {
|
||||
0% {
|
||||
@@ -61,4 +129,54 @@ $webkit-scrollbar-hover: #999;
|
||||
border-radius: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/*! 通用菜单项目样式 */
|
||||
@mixin menu-item-style($position: fixed) {
|
||||
position: $position;
|
||||
background: var(--bg-menu);
|
||||
color: var(--text-color);
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(10px);
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(255, 255, 255, 0.08),
|
||||
0 2px 2px rgb(0 0 0 / 3%),
|
||||
0 4px 4px rgb(0 0 0 / 4%),
|
||||
0 10px 8px rgb(0 0 0 / 5%),
|
||||
0 15px 15px rgb(0 0 0 / 6%),
|
||||
0 30px 30px rgb(0 0 0 / 7%),
|
||||
0 70px 65px rgb(0 0 0 / 9%);
|
||||
z-index: 999;
|
||||
min-width: 100px;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*! 通用菜单项样式 */
|
||||
@mixin menu-list() {
|
||||
padding: 5px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
.menu-item {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--bg-menu-hover);
|
||||
svg {
|
||||
animation: twinkle 0.3s ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,6 +18,7 @@
|
||||
<!-- 用户框 多套一层div来移除默认的右键事件然后覆盖掉因为margin空隙而导致右键可用 -->
|
||||
<div @contextmenu.stop="$event.preventDefault()">
|
||||
<div
|
||||
v-slide
|
||||
@click="handleClick(n)"
|
||||
:class="{ active: activeItem === n }"
|
||||
class="user-box w-full h-75px mb-5px"
|
||||
@@ -107,18 +108,19 @@ onUnmounted(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.user-box {
|
||||
color: var(--text-color);
|
||||
.text {
|
||||
color: #808080;
|
||||
}
|
||||
&:not(.active):hover {
|
||||
background: #f3f3f3;
|
||||
background: var(--bg-msg-hover);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: rgba(5, 150, 105, 0.8);
|
||||
background: var(--bg-active-msg);
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
.text {
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="wh-full" style="background: rgba(255, 255, 255, 0.6)">
|
||||
<div class="wh-full bg-[--right-bg-color]">
|
||||
<ActionBar :shrink="false" />
|
||||
|
||||
<p>邮箱</p>
|
||||
@@ -77,22 +77,23 @@ onMounted(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
.msg-box {
|
||||
color: var(--text-color);
|
||||
.text {
|
||||
color: #808080;
|
||||
}
|
||||
&:not(.active):first-child {
|
||||
background: #eeeeee;
|
||||
background: var(--bg-msg-first-child);
|
||||
border-radius: 6px;
|
||||
}
|
||||
&:not(.active):hover {
|
||||
background: #f3f3f3;
|
||||
background: var(--bg-msg-hover);
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: rgba(5, 150, 105, 0.8);
|
||||
background: var(--bg-active-msg);
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
.text {
|
||||
@@ -0,0 +1,8 @@
|
||||
<template>
|
||||
<main class="wh-full">
|
||||
<ActionBar :shrink="false" :max-w="false" />
|
||||
</main>
|
||||
</template>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,194 @@
|
||||
<template>
|
||||
<main>
|
||||
<span class="pl-10px font-size-14px color-[--text-color]">外观设置</span>
|
||||
<section class="bg-[--bg-setting-item] rounded-12px wh-full mt-12px p-12px box-border flex-y-center gap-20px">
|
||||
<div
|
||||
class="flex-col-x-center w-120px h-100px"
|
||||
@click="activeItem = item.code"
|
||||
v-for="(item, index) in titleList"
|
||||
:key="index">
|
||||
<div
|
||||
@click="handleTheme($event, item.code)"
|
||||
class="wh-full rounded-8px cursor-pointer"
|
||||
:style="activeItem === item.code ? 'border: 2px solid #059669' : 'border: 2px solid transparent'">
|
||||
<component :is="item.model" />
|
||||
</div>
|
||||
<span class="font-size-12px pt-8px color-[--text-color]">{{ item.title }}</span>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
<script setup lang="tsx">
|
||||
import { theme } from '@/stores/theme.ts'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { sendMsg } from '@/common/CrossTabMsg.ts'
|
||||
|
||||
const themeStore = theme()
|
||||
const { PATTERN } = storeToRefs(themeStore)
|
||||
const activeItem = ref<string>(PATTERN.value || 'light')
|
||||
|
||||
const titleList = [
|
||||
{
|
||||
title: '白天模式',
|
||||
code: 'light',
|
||||
model: (() => (
|
||||
<div class="wh-full flex">
|
||||
<div class="bg-#f1f1f1 flex-[1] rounded-[6px_0_0_6px]"></div>
|
||||
|
||||
<div class="bg-#fff flex-[3.5] p-[8px_4px] box-border flex flex-col gap-8px">
|
||||
<div class="flex gap-4px">
|
||||
<div class="bg-#f1f1f1 w-10px h-10px rounded-50%"></div>
|
||||
<div class="flex flex-col gap-2px">
|
||||
<div class="bg-#f1f1f1 w-16px h-4px"></div>
|
||||
<div class="bg-#f1f1f1 w-24px h-4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4px">
|
||||
<div class="bg-#f1f1f1 w-10px h-10px rounded-50%"></div>
|
||||
<div class="flex flex-col gap-2px">
|
||||
<div class="bg-#f1f1f1 w-16px h-4px"></div>
|
||||
<div class="bg-#f1f1f1 w-24px h-4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-#f1f1f1 flex-[5.5] p-[8px_4px] rounded-[0_6px_6px_0] flex flex-col gap-8px">
|
||||
<div class="flex-y-center gap-4px">
|
||||
<div class="bg-#ccc w-6px h-6px rounded-50%"></div>
|
||||
<div class="bg-#fff w-28px h-6px"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex-y-center gap-4px ml-a">
|
||||
<div class="bg-#059669 w-28px h-6px"></div>
|
||||
<div class="bg-#ccc w-6px h-6px rounded-50%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))()
|
||||
},
|
||||
{
|
||||
title: '夜间模式',
|
||||
code: 'dark',
|
||||
model: (() => (
|
||||
<div class="wh-full flex">
|
||||
<div class="bg-#454545 flex-[1] rounded-[6px_0_0_6px]"></div>
|
||||
|
||||
<div class="bg-#212121 flex-[3.5] p-[8px_4px] box-border flex flex-col gap-8px">
|
||||
<div class="flex gap-4px">
|
||||
<div class="bg-#4d4d4d w-10px h-10px rounded-50%"></div>
|
||||
<div class="flex flex-col gap-2px">
|
||||
<div class="bg-#4d4d4d w-16px h-4px"></div>
|
||||
<div class="bg-#4d4d4d w-24px h-4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4px">
|
||||
<div class="bg-#4d4d4d w-10px h-10px rounded-50%"></div>
|
||||
<div class="flex flex-col gap-2px">
|
||||
<div class="bg-#4d4d4d w-16px h-4px"></div>
|
||||
<div class="bg-#4d4d4d w-24px h-4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-#1a1a1a flex-[5.5] p-[8px_4px] rounded-[0_6px_6px_0] flex flex-col gap-8px">
|
||||
<div class="flex-y-center gap-4px">
|
||||
<div class="bg-#4d4d4d w-6px h-6px rounded-50%"></div>
|
||||
<div class="bg-#4d4d4d w-28px h-6px"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex-y-center gap-4px ml-a">
|
||||
<div class="bg-#4d4d4d w-28px h-6px"></div>
|
||||
<div class="bg-#4d4d4d w-6px h-6px rounded-50%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))()
|
||||
},
|
||||
{
|
||||
title: '跟随系统',
|
||||
code: 'os',
|
||||
model: (() => (
|
||||
<div class="wh-full flex">
|
||||
<div class="bg-#f1f1f1 flex-[1] rounded-[6px_0_0_6px]"></div>
|
||||
|
||||
<div class="bg-#fff flex-[4.5] p-[8px_4px] box-border flex flex-col gap-8px">
|
||||
<div class="flex gap-4px">
|
||||
<div class="bg-#f1f1f1 w-10px h-10px rounded-50%"></div>
|
||||
<div class="flex flex-col gap-2px">
|
||||
<div class="bg-#f1f1f1 w-16px h-4px"></div>
|
||||
<div class="bg-#f1f1f1 w-24px h-4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4px">
|
||||
<div class="bg-#f1f1f1 w-10px h-10px rounded-50%"></div>
|
||||
<div class="flex flex-col gap-2px">
|
||||
<div class="bg-#f1f1f1 w-16px h-4px"></div>
|
||||
<div class="bg-#f1f1f1 w-24px h-4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-#454545 flex-[1]"></div>
|
||||
|
||||
<div class="bg-#212121 flex-[4.5] p-[8px_4px] rounded-[0_6px_6px_0] box-border flex flex-col gap-8px">
|
||||
<div class="flex gap-4px">
|
||||
<div class="bg-#4d4d4d w-10px h-10px rounded-50%"></div>
|
||||
<div class="flex flex-col gap-2px">
|
||||
<div class="bg-#4d4d4d w-16px h-4px"></div>
|
||||
<div class="bg-#4d4d4d w-24px h-4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex gap-4px">
|
||||
<div class="bg-#4d4d4d w-10px h-10px rounded-50%"></div>
|
||||
<div class="flex flex-col gap-2px">
|
||||
<div class="bg-#4d4d4d w-16px h-4px"></div>
|
||||
<div class="bg-#4d4d4d w-24px h-4px"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))()
|
||||
}
|
||||
]
|
||||
|
||||
/* 切换主题 */
|
||||
const handleTheme = (event: MouseEvent, code: string) => {
|
||||
if (code === PATTERN.value) return
|
||||
const x = event.clientX
|
||||
const y = event.clientY
|
||||
const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y))
|
||||
|
||||
let isDark: boolean
|
||||
|
||||
themeStore.toggleTheme(code)
|
||||
sendMsg('theme', code)
|
||||
/*判断当前浏览器是否支持startViewTransition API*/
|
||||
if (document.startViewTransition) {
|
||||
const transition = document.startViewTransition(() => {
|
||||
isDark = code.includes('dark')
|
||||
})
|
||||
// TODO 从亮色主题切换到暗色主题的时候没有动画效果 (nyh -> 2024-02-12 23:07:54)
|
||||
transition.ready.then(() => {
|
||||
const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`]
|
||||
document.documentElement.animate(
|
||||
{
|
||||
clipPath: isDark ? [...clipPath].reverse() : clipPath
|
||||
},
|
||||
{
|
||||
duration: 500,
|
||||
easing: 'ease-in',
|
||||
pseudoElement: isDark ? '::view-transition-old(root)' : '::view-transition-new(root)'
|
||||
}
|
||||
)
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/scss/toggle-theme';
|
||||
</style>
|
||||
@@ -0,0 +1,111 @@
|
||||
<template>
|
||||
<main class="wh-full flex select-none">
|
||||
<!-- 侧边栏选项 -->
|
||||
<section class="left-bar" data-tauri-drag-region>
|
||||
<div class="menu-list">
|
||||
<div v-for="(item, index) in itemsBottom" :key="index">
|
||||
<div class="menu-item" :class="{ active: activeItem === item.url }" @click="pageJumps(item.url, item.label)">
|
||||
<svg><use :href="`#${item.icon}`"></use></svg>
|
||||
{{ item.label }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 右边内容 -->
|
||||
<section class="bg-[--right-bg-color] flex-1">
|
||||
<ActionBar :shrink="false" :max-w="false" />
|
||||
|
||||
<header class="header" style="box-shadow: 0 4px 4px var(--box-shadow-color)">{{ title }}</header>
|
||||
|
||||
<div class="flex-1 p-24px"><router-view /></div>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import router from '@/router'
|
||||
|
||||
type BottomActive = {
|
||||
url: string
|
||||
label: string
|
||||
icon: string
|
||||
}[]
|
||||
const itemsBottom = ref<BottomActive>([
|
||||
{
|
||||
url: '/general',
|
||||
label: '通用',
|
||||
icon: 'setting-config'
|
||||
},
|
||||
{
|
||||
url: '/remind',
|
||||
label: '消息通知',
|
||||
icon: 'remind'
|
||||
},
|
||||
{
|
||||
url: '/collection',
|
||||
label: '存储管理',
|
||||
icon: 'mini-sd-card'
|
||||
},
|
||||
{
|
||||
url: '/collection',
|
||||
label: '登录设置',
|
||||
icon: 'settings'
|
||||
}
|
||||
])
|
||||
|
||||
/*当前选中的元素 默认选中itemsTop的第一项*/
|
||||
const activeItem = ref<string>(itemsBottom.value[0].url)
|
||||
const title = ref<string>(itemsBottom.value[0].label)
|
||||
|
||||
/**
|
||||
* 统一跳转路由方法
|
||||
* @param url 跳转的路由
|
||||
* @param label 页面的标题
|
||||
* */
|
||||
const pageJumps = (url: string, label: string) => {
|
||||
activeItem.value = url
|
||||
title.value = label
|
||||
router.push(url)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
pageJumps(activeItem.value, title.value)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.left-bar {
|
||||
@include menu-list();
|
||||
background: var(--bg-left-menu);
|
||||
width: 200px;
|
||||
padding: 20px 12px;
|
||||
box-sizing: border-box;
|
||||
color: var(--text-color);
|
||||
.menu-item {
|
||||
padding: 10px 12px;
|
||||
border-radius: 10px;
|
||||
margin-top: 6px;
|
||||
svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
&:not(.active):hover {
|
||||
background-color: var(--bg-left-menu-hover);
|
||||
}
|
||||
&:hover {
|
||||
background-color: var(--bg-left-active);
|
||||
svg {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: var(--bg-left-active);
|
||||
}
|
||||
|
||||
.header {
|
||||
@apply w-full h-42px flex items-center pl-40px select-none font-size-18px color-[--text-color];
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,6 @@
|
||||
<template>
|
||||
<main class="bg-blue">消息提醒</main>
|
||||
</template>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<!-- todo 这里设置了 data-tauri-drag-region但是有部分区域不可以拖动 -->
|
||||
<div data-tauri-drag-region class="login-box wh-full rounded-8px select-none" @click="handleClickOutside">
|
||||
<!-- 单独使用n-config-provider来包裹不需要主题切换的界面 -->
|
||||
<n-config-provider :theme="lightTheme" data-tauri-drag-region class="login-box wh-full rounded-8px select-none">
|
||||
<!--顶部操作栏-->
|
||||
<ActionBar :max-w="false" :shrink="false" />
|
||||
|
||||
@@ -24,8 +25,10 @@
|
||||
clearable>
|
||||
<template #suffix>
|
||||
<n-flex @click="arrowStatus = !arrowStatus">
|
||||
<svg v-if="!arrowStatus" class="w-18px h-18px color-#505050 cursor-pointer"><use href="#down"></use></svg>
|
||||
<svg v-else class="w-18px h-18px color-#505050 cursor-pointer"><use href="#up"></use></svg>
|
||||
<svg v-if="!arrowStatus" class="down w-18px h-18px color-#505050 cursor-pointer">
|
||||
<use href="#down"></use>
|
||||
</svg>
|
||||
<svg v-else class="down w-18px h-18px color-#505050 cursor-pointer"><use href="#up"></use></svg>
|
||||
</n-flex>
|
||||
</template>
|
||||
</n-input>
|
||||
@@ -34,7 +37,7 @@
|
||||
<div
|
||||
style="border: 1px solid rgba(70, 70, 70, 0.1)"
|
||||
v-if="accountOption.length > 0 && arrowStatus"
|
||||
class="absolute w-260px max-h-140px bg-#fdfdfd mt-45px z-99 rounded-8px p-8px box-border">
|
||||
class="account-box absolute w-260px max-h-140px bg-#fdfdfd mt-45px z-99 rounded-8px p-8px box-border">
|
||||
<n-scrollbar style="max-height: 120px" trigger="none">
|
||||
<n-flex
|
||||
vertical
|
||||
@@ -45,7 +48,9 @@
|
||||
<div class="flex-between-center">
|
||||
<div class="w-28px h-28px bg-#ccc rounded-50%"></div>
|
||||
<p class="font-size-14px color-#505050">{{ item.account }}</p>
|
||||
<img @click.stop="delAccount(index)" src="@/assets/svg/close.svg" class="w-10px h-10px" alt="" />
|
||||
<svg @click.stop="delAccount(index)" class="w-12px h-12px">
|
||||
<use href="#close"></use>
|
||||
</svg>
|
||||
</div>
|
||||
</n-flex>
|
||||
</n-scrollbar>
|
||||
@@ -101,12 +106,13 @@
|
||||
</n-popover>
|
||||
</n-flex>
|
||||
</n-flex>
|
||||
</div>
|
||||
</n-config-provider>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import router from '@/router'
|
||||
import { useWindow } from '@/hooks/useWindow.ts'
|
||||
import { delay } from 'lodash-es'
|
||||
import { lightTheme } from 'naive-ui'
|
||||
|
||||
type Account = {
|
||||
account: string
|
||||
@@ -147,16 +153,6 @@ watchEffect(() => {
|
||||
loginDisabled.value = !(account.value && password.value && protocol.value)
|
||||
})
|
||||
|
||||
/*监听是否点击了除了下拉框外的其他地方*/
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (arrowStatus.value) {
|
||||
const accountInput = document.querySelector('.login-box')?.contains(event.target as HTMLElement)
|
||||
if (accountInput) {
|
||||
arrowStatus.value = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 删除账号列表内容 */
|
||||
const delAccount = (index: number) => {
|
||||
// 检查索引有效性
|
||||
@@ -192,14 +188,41 @@ const toQRCode = () => {
|
||||
const loginWin = () => {
|
||||
loading.value = true
|
||||
delay(async () => {
|
||||
await createWebviewWindow('home', 1050, 720, 'login')
|
||||
await createWebviewWindow('HuLa', 'home', 1050, 720, 'login')
|
||||
loading.value = false
|
||||
}, 800)
|
||||
}
|
||||
|
||||
/*监听是否点击了除了下拉框外的其他地方*/
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
const target = event.target as Element
|
||||
if (!target.matches('.account-box, .account-box *, .down')) {
|
||||
arrowStatus.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('click', handleClickOutside, true)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('click', handleClickOutside, true)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/scss/global/login-bg';
|
||||
:deep(.hover-box) {
|
||||
@apply w-28px h24px flex-center hover:bg-#e7e7e7;
|
||||
svg {
|
||||
color: #404040;
|
||||
}
|
||||
}
|
||||
:deep(.action-close) {
|
||||
svg {
|
||||
color: #404040;
|
||||
}
|
||||
}
|
||||
/* 改变输入框中的位置 */
|
||||
:deep(.n-input .n-input__input, .n-input .n-input__textarea) {
|
||||
margin-left: 22px;
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div data-tauri-drag-region class="login-box wh-full rounded-8px select-none">
|
||||
<n-config-provider :theme="lightTheme" data-tauri-drag-region class="login-box wh-full rounded-8px select-none">
|
||||
<!--顶部操作栏-->
|
||||
<ActionBar :max-w="false" :shrink="false" />
|
||||
|
||||
@@ -25,11 +25,12 @@
|
||||
<div class="w-1px h-14px bg-#ccc"></div>
|
||||
<div class="color-#059669 cursor-pointer">注册账号</div>
|
||||
</n-flex>
|
||||
</div>
|
||||
</n-config-provider>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import router from '@/router'
|
||||
import { delay } from 'lodash-es'
|
||||
import { lightTheme } from 'naive-ui'
|
||||
|
||||
const loading = ref(true)
|
||||
const loadText = ref('加载中...')
|
||||
@@ -49,4 +50,15 @@ onMounted(() => {
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import '@/styles/scss/global/login-bg';
|
||||
:deep(.hover-box) {
|
||||
@apply w-28px h24px flex-center hover:bg-#e7e7e7;
|
||||
svg {
|
||||
color: #404040;
|
||||
}
|
||||
}
|
||||
:deep(.action-close) {
|
||||
svg {
|
||||
color: #404040;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +0,0 @@
|
||||
<template>
|
||||
<div>更多</div>
|
||||
</template>
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user