主题设置默认折叠其他主题以优化进入设置界面时的性能
lyswhut
parent
4ce54ea395
commit
c001803d71
|
|
@ -49,11 +49,11 @@
|
|||
"@volar/vue-language-plugin-pug": "^1.6.5",
|
||||
"@vue/language-plugin-pug": "^1.8.27",
|
||||
"babel-loader": "^9.1.3",
|
||||
"browserslist": "^4.22.3",
|
||||
"browserslist": "^4.23.0",
|
||||
"chalk": "^4.1.2",
|
||||
"changelog-parser": "^3.0.1",
|
||||
"copy-webpack-plugin": "^12.0.2",
|
||||
"core-js": "^3.35.1",
|
||||
"core-js": "^3.36.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^6.10.0",
|
||||
"css-minimizer-webpack-plugin": "^6.0.0",
|
||||
|
|
@ -62,7 +62,7 @@
|
|||
"electron-builder": "^24.10.0",
|
||||
"electron-debug": "^3.2.0",
|
||||
"electron-devtools-installer": "^3.2.0",
|
||||
"electron-to-chromium": "^1.4.668",
|
||||
"electron-to-chromium": "^1.4.673",
|
||||
"electron-updater": "^6.1.7",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-config-standard": "^17.1.0",
|
||||
|
|
@ -87,21 +87,21 @@
|
|||
"svg-sprite-loader": "^6.0.11",
|
||||
"svg-transform-loader": "^2.0.13",
|
||||
"svgo-loader": "^4.0.0",
|
||||
"terser": "^5.27.0",
|
||||
"terser": "^5.27.1",
|
||||
"terser-webpack-plugin": "^5.3.10",
|
||||
"ts-loader": "^9.5.1",
|
||||
"typescript": "^5.3.3",
|
||||
"vue-eslint-parser": "^9.4.2",
|
||||
"vue-loader": "^17.4.2",
|
||||
"vue-template-compiler": "^2.7.16",
|
||||
"webpack": "^5.90.1",
|
||||
"webpack": "^5.90.2",
|
||||
"webpack-cli": "^5.1.4",
|
||||
"webpack-dev-server": "^5.0.1",
|
||||
"webpack-dev-server": "^5.0.2",
|
||||
"webpack-hot-middleware": "github:lyswhut/webpack-hot-middleware#329c4375134b89d39da23a56a94db651247c74a1",
|
||||
"webpack-merge": "^5.10.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 16",
|
||||
"node": ">= 18",
|
||||
"npm": ">=8.5.2"
|
||||
}
|
||||
},
|
||||
|
|
@ -4995,9 +4995,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/browserslist": {
|
||||
"version": "4.22.3",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.3.tgz",
|
||||
"integrity": "sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==",
|
||||
"version": "4.23.0",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
|
||||
"integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
|
@ -5014,8 +5014,8 @@
|
|||
}
|
||||
],
|
||||
"dependencies": {
|
||||
"caniuse-lite": "^1.0.30001580",
|
||||
"electron-to-chromium": "^1.4.648",
|
||||
"caniuse-lite": "^1.0.30001587",
|
||||
"electron-to-chromium": "^1.4.668",
|
||||
"node-releases": "^2.0.14",
|
||||
"update-browserslist-db": "^1.0.13"
|
||||
},
|
||||
|
|
@ -5295,9 +5295,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/caniuse-lite": {
|
||||
"version": "1.0.30001581",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001581.tgz",
|
||||
"integrity": "sha512-whlTkwhqV2tUmP3oYhtNfaWGYHDdS3JYFQBKXxcUR9qqPWsRhFHhoISO2Xnl/g0xyKzht9mI1LZpiNWfMzHixQ==",
|
||||
"version": "1.0.30001588",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001588.tgz",
|
||||
"integrity": "sha512-+hVY9jE44uKLkH0SrUTqxjxqNTOWHsbnQDIKjwkZ3lNTzUUVdBLBGXtj/q5Mp5u98r3droaZAewQuEDzjQdZlQ==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
|
|
@ -5963,9 +5963,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/core-js": {
|
||||
"version": "3.35.1",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.35.1.tgz",
|
||||
"integrity": "sha512-IgdsbxNyMskrTFxa9lWHyMwAJU5gXOPP+1yO+K59d50VLVAIDAbs7gIv705KzALModfK3ZrSZTPNpC0PQgIZuw==",
|
||||
"version": "3.36.0",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.36.0.tgz",
|
||||
"integrity": "sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"funding": {
|
||||
|
|
@ -7085,9 +7085,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/electron-to-chromium": {
|
||||
"version": "1.4.668",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.668.tgz",
|
||||
"integrity": "sha512-ZOBocMYCehr9W31+GpMclR+KBaDZOoAEabLdhpZ8oU1JFDwIaFY0UDbpXVEUFc0BIP2O2Qn3rkfCjQmMR4T/bQ==",
|
||||
"version": "1.4.673",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.673.tgz",
|
||||
"integrity": "sha512-zjqzx4N7xGdl5468G+vcgzDhaHkaYgVcf9MqgexcTqsl2UHSCmOj/Bi3HAprg4BZCpC7HyD8a6nZl6QAZf72gw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/electron-updater": {
|
||||
|
|
@ -16097,9 +16097,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/terser": {
|
||||
"version": "5.27.0",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.27.0.tgz",
|
||||
"integrity": "sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==",
|
||||
"version": "5.27.1",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.27.1.tgz",
|
||||
"integrity": "sha512-29wAr6UU/oQpnTw5HoadwjUZnFQXGdOfj0LjZ4sVxzqwHh/QVkvr7m8y9WoR4iN3FRitVduTc6KdjcW38Npsug==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@jridgewell/source-map": "^0.3.3",
|
||||
|
|
@ -17219,9 +17219,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/webpack": {
|
||||
"version": "5.90.1",
|
||||
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.1.tgz",
|
||||
"integrity": "sha512-SstPdlAC5IvgFnhiRok8hqJo/+ArAbNv7rhU4fnWGHNVfN59HSQFaxZDSAL3IFG2YmqxuRs+IU33milSxbPlog==",
|
||||
"version": "5.90.2",
|
||||
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.2.tgz",
|
||||
"integrity": "sha512-ziXu8ABGr0InCMEYFnHrYweinHK2PWrMqnwdHk2oK3rRhv/1B+2FnfwYv5oD+RrknK/Pp/Hmyvu+eAsaMYhzCw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/eslint-scope": "^3.7.3",
|
||||
|
|
@ -17348,9 +17348,9 @@
|
|||
}
|
||||
},
|
||||
"node_modules/webpack-dev-server": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.0.1.tgz",
|
||||
"integrity": "sha512-Mbla51FSVfk9WvGiCWRJLsMLq87LNxQitz477z0LIhHbx7ig/fIkU9R/OCNmf6A3tTaJoObwmYco9buC1oN+yA==",
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.0.2.tgz",
|
||||
"integrity": "sha512-IVj3qsQhiLJR82zVg3QdPtngMD05CYP/Am+9NG5QSl+XwUR/UPtFwllRBKrMwM9ttzFsC6Zj3DMgniPyn/Z0hQ==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/bonjour": "^3.5.13",
|
||||
|
|
@ -21458,13 +21458,13 @@
|
|||
}
|
||||
},
|
||||
"browserslist": {
|
||||
"version": "4.22.3",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.22.3.tgz",
|
||||
"integrity": "sha512-UAp55yfwNv0klWNapjs/ktHoguxuQNGnOzxYmfnXIS+8AsRDZkSDxg7R1AX3GKzn078SBI5dzwzj/Yx0Or0e3A==",
|
||||
"version": "4.23.0",
|
||||
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz",
|
||||
"integrity": "sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"caniuse-lite": "^1.0.30001580",
|
||||
"electron-to-chromium": "^1.4.648",
|
||||
"caniuse-lite": "^1.0.30001587",
|
||||
"electron-to-chromium": "^1.4.668",
|
||||
"node-releases": "^2.0.14",
|
||||
"update-browserslist-db": "^1.0.13"
|
||||
}
|
||||
|
|
@ -21677,9 +21677,9 @@
|
|||
}
|
||||
},
|
||||
"caniuse-lite": {
|
||||
"version": "1.0.30001581",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001581.tgz",
|
||||
"integrity": "sha512-whlTkwhqV2tUmP3oYhtNfaWGYHDdS3JYFQBKXxcUR9qqPWsRhFHhoISO2Xnl/g0xyKzht9mI1LZpiNWfMzHixQ==",
|
||||
"version": "1.0.30001588",
|
||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001588.tgz",
|
||||
"integrity": "sha512-+hVY9jE44uKLkH0SrUTqxjxqNTOWHsbnQDIKjwkZ3lNTzUUVdBLBGXtj/q5Mp5u98r3droaZAewQuEDzjQdZlQ==",
|
||||
"dev": true
|
||||
},
|
||||
"chalk": {
|
||||
|
|
@ -22185,9 +22185,9 @@
|
|||
}
|
||||
},
|
||||
"core-js": {
|
||||
"version": "3.35.1",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.35.1.tgz",
|
||||
"integrity": "sha512-IgdsbxNyMskrTFxa9lWHyMwAJU5gXOPP+1yO+K59d50VLVAIDAbs7gIv705KzALModfK3ZrSZTPNpC0PQgIZuw==",
|
||||
"version": "3.36.0",
|
||||
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.36.0.tgz",
|
||||
"integrity": "sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==",
|
||||
"dev": true
|
||||
},
|
||||
"core-js-compat": {
|
||||
|
|
@ -22987,9 +22987,9 @@
|
|||
}
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.4.668",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.668.tgz",
|
||||
"integrity": "sha512-ZOBocMYCehr9W31+GpMclR+KBaDZOoAEabLdhpZ8oU1JFDwIaFY0UDbpXVEUFc0BIP2O2Qn3rkfCjQmMR4T/bQ==",
|
||||
"version": "1.4.673",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.673.tgz",
|
||||
"integrity": "sha512-zjqzx4N7xGdl5468G+vcgzDhaHkaYgVcf9MqgexcTqsl2UHSCmOj/Bi3HAprg4BZCpC7HyD8a6nZl6QAZf72gw==",
|
||||
"dev": true
|
||||
},
|
||||
"electron-updater": {
|
||||
|
|
@ -29789,9 +29789,9 @@
|
|||
}
|
||||
},
|
||||
"terser": {
|
||||
"version": "5.27.0",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.27.0.tgz",
|
||||
"integrity": "sha512-bi1HRwVRskAjheeYl291n3JC4GgO/Ty4z1nVs5AAsmonJulGxpSektecnNedrwK9C7vpvVtcX3cw00VSLt7U2A==",
|
||||
"version": "5.27.1",
|
||||
"resolved": "https://registry.npmjs.org/terser/-/terser-5.27.1.tgz",
|
||||
"integrity": "sha512-29wAr6UU/oQpnTw5HoadwjUZnFQXGdOfj0LjZ4sVxzqwHh/QVkvr7m8y9WoR4iN3FRitVduTc6KdjcW38Npsug==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@jridgewell/source-map": "^0.3.3",
|
||||
|
|
@ -30648,9 +30648,9 @@
|
|||
}
|
||||
},
|
||||
"webpack": {
|
||||
"version": "5.90.1",
|
||||
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.1.tgz",
|
||||
"integrity": "sha512-SstPdlAC5IvgFnhiRok8hqJo/+ArAbNv7rhU4fnWGHNVfN59HSQFaxZDSAL3IFG2YmqxuRs+IU33milSxbPlog==",
|
||||
"version": "5.90.2",
|
||||
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.90.2.tgz",
|
||||
"integrity": "sha512-ziXu8ABGr0InCMEYFnHrYweinHK2PWrMqnwdHk2oK3rRhv/1B+2FnfwYv5oD+RrknK/Pp/Hmyvu+eAsaMYhzCw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/eslint-scope": "^3.7.3",
|
||||
|
|
@ -30735,9 +30735,9 @@
|
|||
}
|
||||
},
|
||||
"webpack-dev-server": {
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.0.1.tgz",
|
||||
"integrity": "sha512-Mbla51FSVfk9WvGiCWRJLsMLq87LNxQitz477z0LIhHbx7ig/fIkU9R/OCNmf6A3tTaJoObwmYco9buC1oN+yA==",
|
||||
"version": "5.0.2",
|
||||
"resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-5.0.2.tgz",
|
||||
"integrity": "sha512-IVj3qsQhiLJR82zVg3QdPtngMD05CYP/Am+9NG5QSl+XwUR/UPtFwllRBKrMwM9ttzFsC6Zj3DMgniPyn/Z0hQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/bonjour": "^3.5.13",
|
||||
|
|
|
|||
12
package.json
12
package.json
|
|
@ -124,11 +124,11 @@
|
|||
"@volar/vue-language-plugin-pug": "^1.6.5",
|
||||
"@vue/language-plugin-pug": "^1.8.27",
|
||||
"babel-loader": "^9.1.3",
|
||||
"browserslist": "^4.22.3",
|
||||
"browserslist": "^4.23.0",
|
||||
"chalk": "^4.1.2",
|
||||
"changelog-parser": "^3.0.1",
|
||||
"copy-webpack-plugin": "^12.0.2",
|
||||
"core-js": "^3.35.1",
|
||||
"core-js": "^3.36.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^6.10.0",
|
||||
"css-minimizer-webpack-plugin": "^6.0.0",
|
||||
|
|
@ -137,7 +137,7 @@
|
|||
"electron-builder": "^24.10.0",
|
||||
"electron-debug": "^3.2.0",
|
||||
"electron-devtools-installer": "^3.2.0",
|
||||
"electron-to-chromium": "^1.4.668",
|
||||
"electron-to-chromium": "^1.4.673",
|
||||
"electron-updater": "^6.1.7",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-config-standard": "^17.1.0",
|
||||
|
|
@ -162,16 +162,16 @@
|
|||
"svg-sprite-loader": "^6.0.11",
|
||||
"svg-transform-loader": "^2.0.13",
|
||||
"svgo-loader": "^4.0.0",
|
||||
"terser": "^5.27.0",
|
||||
"terser": "^5.27.1",
|
||||
"terser-webpack-plugin": "^5.3.10",
|
||||
"ts-loader": "^9.5.1",
|
||||
"typescript": "^5.3.3",
|
||||
"vue-eslint-parser": "^9.4.2",
|
||||
"vue-loader": "^17.4.2",
|
||||
"vue-template-compiler": "^2.7.16",
|
||||
"webpack": "^5.90.1",
|
||||
"webpack": "^5.90.2",
|
||||
"webpack-cli": "^5.1.4",
|
||||
"webpack-dev-server": "^5.0.1",
|
||||
"webpack-dev-server": "^5.0.2",
|
||||
"webpack-hot-middleware": "github:lyswhut/webpack-hot-middleware#329c4375134b89d39da23a56a94db651247c74a1",
|
||||
"webpack-merge": "^5.10.0"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
### 优化
|
||||
|
||||
- 主题设置默认折叠其他主题以优化进入设置界面时的性能
|
||||
- 不再丢弃kg源逐行歌词
|
||||
- 支持kw源排行榜显示大小（revert @Folltoshe #1460）
|
||||
|
||||
|
|
|
|||
|
|
@ -661,6 +661,7 @@
|
|||
"theme_max_tip": "You can only add up to 10 themes, delete some and add more 😜",
|
||||
"theme_mid_autumn": "Mid-Autumn",
|
||||
"theme_ming": "Ming",
|
||||
"theme_more_btn_show": "More theme",
|
||||
"theme_naruto": "Naruto",
|
||||
"theme_orange": "Orange",
|
||||
"theme_pink": "Pink",
|
||||
|
|
|
|||
|
|
@ -661,6 +661,7 @@
|
|||
"theme_max_tip": "最多只能添加10个主题哦，删掉一些再添加吧 😜 ",
|
||||
"theme_mid_autumn": "月里嫦娥",
|
||||
"theme_ming": "青出于黑",
|
||||
"theme_more_btn_show": "更多主题",
|
||||
"theme_naruto": "木叶之村",
|
||||
"theme_orange": "橙黄橘绿",
|
||||
"theme_pink": "粉装玉琢",
|
||||
|
|
|
|||
|
|
@ -661,6 +661,7 @@
|
|||
"theme_max_tip": "最多只能加10個主題哦，刪除一些再加吧 😜",
|
||||
"theme_mid_autumn": "月裡嫦娥",
|
||||
"theme_ming": "青出於黑",
|
||||
"theme_more_btn_show": "更多主題",
|
||||
"theme_naruto": "木葉之村",
|
||||
"theme_orange": "橙黃橘綠",
|
||||
"theme_pink": "粉紅裝玉琢",
|
||||
|
|
|
|||
|
|
@ -1,30 +1,8 @@
|
|||
<template lang="pug">
|
||||
dt#basic {{ $t('setting__basic') }}
|
||||
dd
|
||||
h3#basic_theme {{ $t('setting__basic_theme') }}
|
||||
div
|
||||
ul(:class="$style.theme")
|
||||
li(v-for="theme in defaultThemes" :key="theme.id" :aria-label="$t('theme_' + theme.id)" :style="theme.styles" :class="[$style.themeItem, {[$style.active]: themeId == theme.id}]" @click="toggleTheme(theme)")
|
||||
div(:class="$style.bg")
|
||||
span(:class="$style.label") {{ $t('theme_' + theme.id) }}
|
||||
li(v-for="theme in userThemes" :key="theme.id" :aria-label="theme.name" :style="theme.styles" :class="[$style.themeItem, {[$style.active]: themeId == theme.id}]" @click="toggleTheme(theme)" @contextmenu="handleEditTheme(theme)")
|
||||
div(:class="$style.bg")
|
||||
span(:class="$style.label") {{ theme.name }}
|
||||
li(:aria-label="$t('theme_auto_tip')" :style="autoTheme" :class="[$style.themeItem, $style.auto, {[$style.active]: themeId == 'auto'}]" @click="handleSetThemeAuto" @contextmenu="isShowThemeSelectorModal = true")
|
||||
div(:class="$style.bg")
|
||||
div(:class="$style.bgContent")
|
||||
div(:class="$style.light")
|
||||
div(:class="$style.dark")
|
||||
span(:class="$style.label") {{ $t('theme_auto') }}
|
||||
li(:aria-label="$t('theme_add')" :class="[$style.themeItem, $style.add]" @click="handleEditTheme()")
|
||||
div(:class="$style.bg")
|
||||
div(:class="$style.bgContent")
|
||||
svg-icon(:class="$style.icon" name="plus")
|
||||
span(:class="$style.label") {{ $t('theme_add') }}
|
||||
|
||||
dd
|
||||
div
|
||||
.gap-top.top
|
||||
.gap-top
|
||||
base-checkbox(id="setting_show_animate" :model-value="appSetting['common.isShowAnimation']" :label="$t('setting__basic_show_animation')" @update:model-value="updateSetting({'common.isShowAnimation': $event})")
|
||||
.gap-top
|
||||
base-checkbox(id="setting_animate" :model-value="appSetting['common.randomAnimate']" :label="$t('setting__basic_animation')" @update:model-value="updateSetting({'common.randomAnimate': $event})")
|
||||
|
|
@ -35,6 +13,28 @@ dd
|
|||
.p.gap-top
|
||||
base-btn.btn(min @click="isShowPlayTimeoutModal = true") {{ $t('setting__play_timeout')}} {{ timeLabel ? ` (${timeLabel})` : '' }}
|
||||
|
||||
dd
|
||||
h3#basic_theme {{ $t('setting__basic_theme') }}
|
||||
div
|
||||
ul(:class="$style.theme")
|
||||
li(v-for="theme in themeList" :key="theme.id" :aria-label="theme.name" :style="theme.styles" :class="[$style.themeItem, {[$style.active]: themeId == theme.id}]" @click="toggleTheme(theme)" @contextmenu="handleEditTheme(theme)")
|
||||
div(:class="$style.bg")
|
||||
span(:class="$style.label") {{ theme.name }}
|
||||
li(v-if="showAllTheme || themeId == 'auto'" :aria-label="$t('theme_auto_tip')" :style="autoTheme" :class="[$style.themeItem, $style.auto, {[$style.active]: themeId == 'auto'}]" @click="handleSetThemeAuto" @contextmenu="isShowThemeSelectorModal = true")
|
||||
div(:class="$style.bg")
|
||||
div(:class="$style.bgContent")
|
||||
div(:class="$style.light")
|
||||
div(:class="$style.dark")
|
||||
span(:class="$style.label") {{ $t('theme_auto') }}
|
||||
li(v-if="showAllTheme" :aria-label="$t('theme_add')" :class="[$style.themeItem, $style.add]" @click="handleEditTheme()")
|
||||
div(:class="$style.bg")
|
||||
div(:class="$style.bgContent")
|
||||
svg-icon(:class="$style.icon" name="plus")
|
||||
span(:class="$style.label") {{ $t('theme_add') }}
|
||||
li(v-if="!showAllTheme" :aria-label="$t('theme_more_btn_show')" :class="[$style.themeItem, $style.moreThme]" @click="showAllTheme = true")
|
||||
span(:class="$style.label") {{ $t('theme_more_btn_show') }}
|
||||
svg-icon(name="angle-right-solid" :class="$style.activeIcon")
|
||||
|
||||
dd
|
||||
h3#basic_source {{ $t('setting__basic_source') }}
|
||||
div
|
||||
|
|
@ -136,8 +136,23 @@ export default {
|
|||
setup() {
|
||||
const t = useI18n()
|
||||
|
||||
const defaultThemes = shallowReactive([])
|
||||
const showAllTheme = ref(false)
|
||||
const defaultThemesRaw = shallowReactive([])
|
||||
const defaultThemes = computed(() => {
|
||||
return defaultThemesRaw.map(theme => ({ ...theme, isDefault: true, name: t('theme_' + theme.id) }))
|
||||
})
|
||||
const userThemes = shallowReactive([])
|
||||
const allThemes = computed(() => {
|
||||
return [...defaultThemes.value, ...userThemes]
|
||||
})
|
||||
const themeList = computed(() => {
|
||||
if (!allThemes.value.length) return []
|
||||
return showAllTheme.value
|
||||
? allThemes.value
|
||||
: themeId.value == 'auto'
|
||||
? []
|
||||
: [allThemes.value.find(t => t.id == themeId.value) ?? allThemes.value[0]]
|
||||
})
|
||||
const autoTheme = reactive({})
|
||||
const updateAutoTheme = (info) => {
|
||||
let light = findTheme(info, appSetting['theme.lightId'])
|
||||
|
|
@ -163,7 +178,7 @@ export default {
|
|||
getThemes((info) => {
|
||||
// console.log(info)
|
||||
dataPath = info.dataPath
|
||||
defaultThemes.splice(0, defaultThemes.length, ...info.themes.map(t => {
|
||||
defaultThemesRaw.splice(0, defaultThemesRaw.length, ...info.themes.map(t => {
|
||||
return {
|
||||
id: t.id,
|
||||
styles: {
|
||||
|
|
@ -190,6 +205,7 @@ export default {
|
|||
const editThemeId = ref('')
|
||||
const handleEditTheme = (theme) => {
|
||||
// console.log(theme)
|
||||
if (theme?.isDefault) return
|
||||
if (!theme && userThemes.length >= 10) {
|
||||
void dialog({
|
||||
message: t('theme_max_tip'),
|
||||
|
|
@ -299,9 +315,10 @@ export default {
|
|||
return {
|
||||
appSetting,
|
||||
updateSetting,
|
||||
defaultThemes,
|
||||
userThemes,
|
||||
autoTheme,
|
||||
showAllTheme,
|
||||
themeList,
|
||||
// currentStting,
|
||||
// themes,
|
||||
// themeClassName,
|
||||
|
|
@ -491,6 +508,16 @@ export default {
|
|||
color: var(--color-primary-dark-100-alpha-300);
|
||||
}
|
||||
}
|
||||
|
||||
&.moreThme {
|
||||
flex-direction: row;
|
||||
width: auto;
|
||||
gap: 5px;
|
||||
color: var(--color-primary-font-active);
|
||||
.label {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue