From ebba7bc821ccda4826811422f5439607d6a561f8 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Mon, 20 Dec 2021 14:33:38 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9A=97=E9=BB=91=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 5 ---- pnpm-lock.yaml | 45 +-------------------------------- src/assets/svg/dark.svg | 1 + src/assets/svg/day.svg | 1 + src/assets/svg/exit_screen.svg | 2 +- src/assets/svg/full_screen.svg | 2 +- src/layout/components/setting/index.vue | 38 +++++++++++++++++++++++++--- src/style/dark.scss | 28 ++++++++++++++++++++ src/style/index.scss | 1 + src/style/login.css | 6 ++--- src/views/login.vue | 2 +- 11 files changed, 73 insertions(+), 58 deletions(-) create mode 100644 src/assets/svg/dark.svg create mode 100644 src/assets/svg/day.svg create mode 100644 src/style/dark.scss diff --git a/package.json b/package.json index 71597a5..b479d6f 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,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", "dayjs": "^1.10.7", "element-plus": "1.2.0-beta.6", @@ -44,18 +43,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.2", "remixicon": "^2.5.0", "resize-observer-polyfill": "^1.5.1", "responsive-storage": "^1.0.11", - "typescript-cookie": "^1.0.0", "vue": "^3.2.24", "vue-i18n": "^9.2.0-beta.3", "vue-router": "^4.0.12", @@ -80,7 +76,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 5d4cfc7..a061ad3 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -26,10 +26,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 cross-env: 7.0.3 dayjs: ^1.10.7 element-plus: 1.2.0-beta.6 @@ -42,12 +40,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,7 +61,6 @@ specifiers: 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 vite: 2.6.14 vite-plugin-mock: ^2.9.6 @@ -86,7 +81,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 dayjs: 1.10.7 element-plus: 1.2.0-beta.6_vue@3.2.24 @@ -94,18 +88,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.2 remixicon: 2.5.0 resize-observer-polyfill: 1.5.1 responsive-storage: 1.0.11_vue@3.2.24 - typescript-cookie: 1.0.0 vue: 3.2.24 vue-i18n: 9.2.0-beta.17_vue@3.2.24 vue-router: 4.0.12_vue@3.2.24 @@ -130,7 +121,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 @@ -1855,14 +1845,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: { @@ -4488,16 +4470,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: { @@ -5106,6 +5078,7 @@ packages: { integrity: sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg== } + dev: true /path-type/4.0.0: resolution: @@ -6361,14 +6334,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: { @@ -6830,14 +6795,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 0000000..421d28c --- /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 0000000..debccce --- /dev/null +++ b/src/assets/svg/day.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svg/exit_screen.svg b/src/assets/svg/exit_screen.svg index cb8bbcc..d14a678 100644 --- a/src/assets/svg/exit_screen.svg +++ b/src/assets/svg/exit_screen.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/assets/svg/full_screen.svg b/src/assets/svg/full_screen.svg index b9fc5c0..ebb1111 100644 --- a/src/assets/svg/full_screen.svg +++ b/src/assets/svg/full_screen.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/layout/components/setting/index.vue b/src/layout/components/setting/index.vue index 15e47cb..74eb7bc 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", ""); +}