diff --git a/package.json b/package.json index 82489ed8e..dbefd1b2f 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,6 @@ "@vueuse/core": "^6.7.1", "@vueuse/motion": "^2.0.0-beta.4", "animate.css": "^4.1.1", - "await-to-js": "^3.0.0", "axios": "^0.21.1", "cropperjs": "^1.5.11", "dayjs": "^1.10.7", @@ -48,19 +47,15 @@ "font-awesome": "^4.7.0", "js-cookie": "^3.0.1", "lodash-es": "^4.17.21", - "lowdb": "^3.0.0", "mitt": "^3.0.0", "mockjs": "^1.1.0", "nprogress": "^0.2.0", "path": "^0.12.7", - "path-to-regexp": "^6.2.0", "pinia": "^2.0.0-rc.14", "qs": "^6.10.1", "remixicon": "^2.5.0", "resize-observer-polyfill": "^1.5.1", "responsive-storage": "^1.0.11", - "sortablejs": "1.13.0", - "typescript-cookie": "^1.0.0", "v-contextmenu": "3.0.0", "vue": "^3.2.24", "vue-i18n": "^9.2.0-beta.3", @@ -94,7 +89,6 @@ "@zougt/vite-plugin-theme-preprocessor": "^1.4.0", "autoprefixer": "10.2.4", "babel-plugin-transform-remove-console": "6.9.4", - "chalk": "2.4.2", "cross-env": "7.0.3", "eslint": "7.30.0", "eslint-plugin-prettier": "3.4.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c3118f586..e047bbf16 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,10 +29,8 @@ specifiers: "@zougt/vite-plugin-theme-preprocessor": ^1.4.0 animate.css: ^4.1.1 autoprefixer: 10.2.4 - await-to-js: ^3.0.0 axios: ^0.21.1 babel-plugin-transform-remove-console: 6.9.4 - chalk: 2.4.2 cropperjs: ^1.5.11 cross-env: 7.0.3 dayjs: ^1.10.7 @@ -47,12 +45,10 @@ specifiers: js-cookie: ^3.0.1 lint-staged: 11.1.2 lodash-es: ^4.17.21 - lowdb: ^3.0.0 mitt: ^3.0.0 mockjs: ^1.1.0 nprogress: ^0.2.0 path: ^0.12.7 - path-to-regexp: ^6.2.0 pinia: ^2.0.0-rc.14 postcss: 8.2.6 postcss-import: 14.0.0 @@ -65,13 +61,11 @@ specifiers: rimraf: 3.0.2 sass: ^1.45.0 sass-loader: ^12.3.0 - sortablejs: 1.13.0 stylelint: 13.13.1 stylelint-config-prettier: 8.0.2 stylelint-config-standard: 22.0.0 stylelint-order: 4.1.0 typescript: 4.4.2 - typescript-cookie: ^1.0.0 unplugin-element-plus: ^0.1.3 v-contextmenu: 3.0.0 vite: 2.6.14 @@ -102,7 +96,6 @@ dependencies: "@vueuse/core": 6.7.5_vue@3.2.24 "@vueuse/motion": 2.0.0-beta.4_vue@3.2.24 animate.css: 4.1.1 - await-to-js: 3.0.0 axios: 0.21.4 cropperjs: 1.5.12 dayjs: 1.10.7 @@ -112,19 +105,15 @@ dependencies: font-awesome: 4.7.0 js-cookie: 3.0.1 lodash-es: 4.17.21 - lowdb: 3.0.0 mitt: 3.0.0 mockjs: 1.1.0 nprogress: 0.2.0 path: 0.12.7 - path-to-regexp: 6.2.0 pinia: 2.0.2_typescript@4.4.2+vue@3.2.24 qs: 6.10.1 remixicon: 2.5.0 resize-observer-polyfill: 1.5.1 responsive-storage: 1.0.11_vue@3.2.24 - sortablejs: 1.13.0 - typescript-cookie: 1.0.0 v-contextmenu: 3.0.0_vue@3.2.24 vue: 3.2.24 vue-i18n: 9.2.0-beta.17_vue@3.2.24 @@ -158,7 +147,6 @@ devDependencies: "@zougt/vite-plugin-theme-preprocessor": 1.4.0_sass@1.45.0 autoprefixer: 10.2.4_postcss@8.2.6 babel-plugin-transform-remove-console: 6.9.4 - chalk: 2.4.2 cross-env: 7.0.3 eslint: 7.30.0 eslint-plugin-prettier: 3.4.0_eslint@7.30.0+prettier@2.3.2 @@ -1594,10 +1582,10 @@ packages: vue-demi: 0.12.1_vue@3.2.24 dev: false - /@vueuse/core/7.2.2_vue@3.2.24: + /@vueuse/core/7.4.0_vue@3.2.24: resolution: { - integrity: sha512-T9oksrPflNhsgG/Y/7IeCSmITPZ0VKDnTpK8y7SQl4ZIdLIL8L7fJyhJEgSMWyo497j/XK3RKFkOTh4GFTVeIQ== + integrity: sha512-CgYouxjXOE63gMn3l9cOsgzPTEAk3yoncsSmJUxXAi/to25rCPVWB/39jXTPhWZboR43EDDMWoEhHaSoMzaldg== } peerDependencies: "@vue/composition-api": ^1.1.0 @@ -1608,7 +1596,7 @@ packages: vue: optional: true dependencies: - "@vueuse/shared": 7.2.2_vue@3.2.24 + "@vueuse/shared": 7.4.0_vue@3.2.24 vue: 3.2.24 vue-demi: 0.12.1_vue@3.2.24 dev: false @@ -1649,10 +1637,10 @@ packages: vue-demi: 0.12.1_vue@3.2.24 dev: false - /@vueuse/shared/7.2.2_vue@3.2.24: + /@vueuse/shared/7.4.0_vue@3.2.24: resolution: { - integrity: sha512-9vevEvvQgx4snSrDfZ5BFd7FmlIl9rwTtr8ySzPZhZQslx6lbcsXK3Q97I06Fv8S2TedR//X9fn2QbNtbFmdog== + integrity: sha512-x5Jn6jUB8gS1mGnVCoNWFEpAoDkm2QwtacZTUgKMn0Ow8tlUBKIfGVOt4vn9qZB10froED/ARHEj79WKLXRieA== } peerDependencies: "@vue/composition-api": ^1.1.0 @@ -1943,14 +1931,6 @@ packages: postcss-value-parser: 4.1.0 dev: true - /await-to-js/3.0.0: - resolution: - { - integrity: sha512-zJAaP9zxTcvTHRlejau3ZOY4V7SRpiByf3/dxx2uyKxxor19tpmpV2QRsTKikckwhaPmr2dVpxxMr7jOCYVp5g== - } - engines: { node: ">=6.0.0" } - dev: false - /axios/0.21.4: resolution: { @@ -2957,7 +2937,7 @@ packages: dependencies: "@element-plus/icons-vue": 0.2.4_vue@3.2.24 "@popperjs/core": 2.11.0 - "@vueuse/core": 7.2.2_vue@3.2.24 + "@vueuse/core": 7.4.0_vue@3.2.24 async-validator: 4.0.7 dayjs: 1.10.7 lodash: 4.17.21 @@ -4738,16 +4718,6 @@ packages: } dev: true - /lowdb/3.0.0: - resolution: - { - integrity: sha512-9KZRulmIcU8fZuWiaM0d5e2/nPnrFyXkeXVpqT+MJS+vgbgOf1EbtvgQmba8HwUFgDl1oeZR6XqEJnkJmQdKmg== - } - engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 } - dependencies: - steno: 2.1.0 - dev: false - /lower-case/2.0.2: resolution: { @@ -5367,6 +5337,7 @@ packages: { integrity: sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg== } + dev: true /path-type/4.0.0: resolution: @@ -6526,13 +6497,6 @@ packages: tslib: 2.3.1 dev: true - /sortablejs/1.13.0: - resolution: - { - integrity: sha512-RBJirPY0spWCrU5yCmWM1eFs/XgX2J5c6b275/YyxFRgnzPhKl/TDeU2hNR8Dt7ITq66NRPM4UlOt+e5O4CFHg== - } - dev: false - /sortablejs/1.14.0: resolution: { @@ -6649,14 +6613,6 @@ packages: engines: { node: ">= 0.6" } dev: true - /steno/2.1.0: - resolution: - { - integrity: sha512-mauOsiaqTNGFkWqIfwcm3y/fq+qKKaIWf1vf3ocOuTdco9XoHCO2AGF1gFYXuZFSWuP38Q8LBHBGJv2KnJSXyA== - } - engines: { node: ^14.13.1 || >=16.0.0 } - dev: false - /string-argv/0.3.1: resolution: { @@ -7138,14 +7094,6 @@ packages: is-typedarray: 1.0.0 dev: true - /typescript-cookie/1.0.0: - resolution: - { - integrity: sha512-oYHAgQWDqheZXiq1ODzVwwl+8lGzK/ApsxAu1a4uyl+Yd9BuF0M5I3bowgb5oAlU3Qyqejcj5kDyOZe+y+W4SA== - } - engines: { node: ">=14" } - dev: false - /typescript/4.4.2: resolution: { diff --git a/src/assets/svg/dark.svg b/src/assets/svg/dark.svg new file mode 100644 index 000000000..421d28c59 --- /dev/null +++ b/src/assets/svg/dark.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svg/day.svg b/src/assets/svg/day.svg new file mode 100644 index 000000000..debcccebd --- /dev/null +++ b/src/assets/svg/day.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue index 15e47cb49..74eb7bc45 100644 --- a/src/layout/components/setting/index.vue +++ b/src/layout/components/setting/index.vue @@ -14,7 +14,9 @@ import { getConfig } from "/@/config"; import { useRouter } from "vue-router"; import { emitter } from "/@/utils/mitt"; import { templateRef } from "@vueuse/core"; +import dayIcon from "/@/assets/svg/day.svg"; import { debounce } from "/@/utils/debounce"; +import darkIcon from "/@/assets/svg/dark.svg"; import { themeColorsType } from "../../types"; import { useAppStoreHook } from "/@/store/modules/app"; import { storageLocal, storageSession } from "/@/utils/storage"; @@ -235,11 +237,33 @@ function setLayoutThemeColor(theme: string) { }); instance.layout = { layout: useAppStoreHook().layout, theme }; } + +let dataTheme = ref(false); + +// 日间、夜间主题切换 +function dataThemeChange() { + const body = document.documentElement as HTMLElement; + if (dataTheme.value) { + body.setAttribute("data-theme", "dark"); + setLayoutThemeColor("light"); + } else body.setAttribute("data-theme", ""); +}