From 13e7a645854762840b5ed37bd8e92f8d6c079f46 Mon Sep 17 00:00:00 2001 From: MTrun <1262327911@qq.com> Date: Wed, 15 Dec 2021 22:16:16 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A2=9C=E8=89=B2=E6=9B=B4=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 2 +- src/App.vue | 7 +-- src/main.ts | 4 ++ src/plugins/globalMethods.ts | 5 -- src/plugins/index.ts | 1 - src/plugins/naive.ts | 2 + src/settings/designSetting.ts | 2 + src/store/modules/designStore/designStore.ts | 7 ++- src/styles/common/mixins/function.scss | 3 + src/styles/common/mixins/mixins.scss | 54 ++++++++++++----- src/styles/common/mixins/theme.scss | 25 ++++++++ src/styles/common/theme.scss | 9 --- src/styles/common/var.scss | 16 ++++- src/utils/style.ts | 12 ++++ src/views/login/index.vue | 61 ++++++++++++++------ 15 files changed, 154 insertions(+), 56 deletions(-) delete mode 100644 src/plugins/globalMethods.ts create mode 100644 src/styles/common/mixins/theme.scss delete mode 100644 src/styles/common/theme.scss create mode 100644 src/utils/style.ts diff --git a/index.html b/index.html index ee17f2d7..b65bd6d6 100644 --- a/index.html +++ b/index.html @@ -10,7 +10,7 @@ /> GoView - + diff --git a/src/App.vue b/src/App.vue index f4779009..9d9b4c3d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -18,14 +18,12 @@ import { dateZhCN, darkTheme, NConfigProvider, - GlobalThemeOverrides + GlobalThemeOverrides, } from 'naive-ui' import { AppProvider } from '@/components/Application' -import { useRoute } from 'vue-router' import { useDesignStore } from '@/store/modules/designStore/designStore' import { borderRadius } from '@/settings/designSetting' -const route = useRoute() const designStore = useDesignStore() const getThemeOverrides = computed( @@ -41,9 +39,8 @@ const getThemeOverrides = computed( } } ) - const getDarkTheme = computed(() => - designStore.darkTheme ? darkTheme : undefined + designStore.getDarkTheme ? darkTheme : undefined ) diff --git a/src/main.ts b/src/main.ts index 25970140..b89ae8ec 100644 --- a/src/main.ts +++ b/src/main.ts @@ -4,6 +4,7 @@ import router, { setupRouter } from '@/router'; import { setupStore } from '@/store'; import { setupNaive, setupDirectives } from '@/plugins'; import { AppProvider } from '@/components/Application'; +import { setHtmlTheme } from '@/utils/style' async function appInit() { const appProvider = createApp(AppProvider); @@ -19,6 +20,9 @@ async function appInit() { // 挂载状态管理 setupStore(app); + // 处理主题色 + setHtmlTheme() + //优先挂载一下 Provider 解决路由守卫，Axios中可使用，Dialog，Message 等之类组件 appProvider.mount('#appProvider', true); diff --git a/src/plugins/globalMethods.ts b/src/plugins/globalMethods.ts deleted file mode 100644 index 7e88601b..00000000 --- a/src/plugins/globalMethods.ts +++ /dev/null @@ -1,5 +0,0 @@ -/** - * 注册全局方法 - * @param app - */ -export function setupGlobalMethods() {} diff --git a/src/plugins/index.ts b/src/plugins/index.ts index e5e4ec99..49b639e2 100644 --- a/src/plugins/index.ts +++ b/src/plugins/index.ts @@ -1,4 +1,3 @@ export { setupNaive } from '@/plugins/naive'; export { setupDirectives } from '@/plugins/directives'; export { setupCustomComponents } from '@/plugins/customComponents'; -export { setupGlobalMethods } from '@/plugins/globalMethods'; diff --git a/src/plugins/naive.ts b/src/plugins/naive.ts index 6b12ba81..37d4848d 100644 --- a/src/plugins/naive.ts +++ b/src/plugins/naive.ts @@ -2,6 +2,7 @@ import type { App } from 'vue'; import { create, NA, + NText, NConfigProvider, NMessageProvider, NDialogProvider, @@ -75,6 +76,7 @@ import { const naive = create({ components: [ NA, + NText, NMessageProvider, NDialogProvider, NConfigProvider, diff --git a/src/settings/designSetting.ts b/src/settings/designSetting.ts index 7de8eb74..2fb71afc 100644 --- a/src/settings/designSetting.ts +++ b/src/settings/designSetting.ts @@ -21,6 +21,8 @@ export const appThemeList: string[] = [ ]; export const theme = { + darkThemeName: 'dark', + lightThemeName: 'light', //深色主题 darkTheme: true, //系统主题色 diff --git a/src/store/modules/designStore/designStore.ts b/src/store/modules/designStore/designStore.ts index ae2099b6..285a2cb6 100644 --- a/src/store/modules/designStore/designStore.ts +++ b/src/store/modules/designStore/designStore.ts @@ -1,6 +1,6 @@ import { defineStore } from 'pinia'; import { store } from '@/store'; -import { theme, borderRadius } from '@/settings/designSetting'; +import { theme } from '@/settings/designSetting'; const { darkTheme, appTheme, appThemeList } = theme; import { DesignStateType } from './designStore.d' @@ -22,6 +22,11 @@ export const useDesignStore = defineStore({ return this.appThemeList; }, }, + actions: { + changeTheme():void { + this.darkTheme = !this.darkTheme + } + } }); export function useDesignSettingWithOut() { diff --git a/src/styles/common/mixins/function.scss b/src/styles/common/mixins/function.scss index e69de29b..e7023dbd 100644 --- a/src/styles/common/mixins/function.scss +++ b/src/styles/common/mixins/function.scss @@ -0,0 +1,3 @@ +@function themed($key) { + @return map-get($theme-map, $key); +} \ No newline at end of file diff --git a/src/styles/common/mixins/mixins.scss b/src/styles/common/mixins/mixins.scss index 8e4dfc08..46aced6d 100644 --- a/src/styles/common/mixins/mixins.scss +++ b/src/styles/common/mixins/mixins.scss @@ -1,21 +1,9 @@ @import './config.scss'; +@import './function.scss'; +@import './theme.scss'; @mixin go($block) { - $B: $namespace + '-' + $block !global; - .#{$B} { - @content; - } -} - -@mixin go-l($block) { - $B: $namespace + '-' + $theme-light + '-' + $block !global; - .#{$B} { - @content; - } -} - -@mixin go-d($block) { - $B: $namespace + '-' + $theme-dark + '-' + $block !global; + $B: $namespace + '-' + $block; .#{$B} { @content; } @@ -28,3 +16,39 @@ } } } + +@mixin themeify { + @each $theme-name, $theme-map in $themes { + $theme-map: $theme-map !global; + [data-theme='#{$theme-name}'] & { + @content; + } + } +} + +@mixin fetch-theme($param) { + @include themeify { + #{$param}: themed($param); + } +} + +//获取背景颜色 +@mixin filter-color($target) { + @include themeify { + background-color: themed($target); + } +} + +//获取背景渐变颜色 +@mixin background-image($target) { + @include themeify { + background-image: themed($target); + } +} + +//获取字体颜色 +@mixin font-color($target) { + @include themeify { + color: themed($target); + } +} diff --git a/src/styles/common/mixins/theme.scss b/src/styles/common/mixins/theme.scss new file mode 100644 index 00000000..a509dcdd --- /dev/null +++ b/src/styles/common/mixins/theme.scss @@ -0,0 +1,25 @@ +@import './config.scss'; +@import '../var.scss'; + +$themes: ( + #{$theme-light}: ( + background_color: #cccccc, + //背景色 + background-image: + linear-gradient(120deg, $--color-text-1 0%, $--color-text-1 100%), + //文字 + text-color: #000000a6, + //毛玻璃 + filter-color: $--filter-color-login-light + ), + #{$theme-dark}: ( + background-color: $--color-bg-1, + //背景 + background-image: + linear-gradient(120deg, $--color-bg-1 0%, $--color-bg-2 100%), + //文字 + text-color: $--color-text-3, + //毛玻璃 + filter-color: $--filter-color-login-dark + ) +); diff --git a/src/styles/common/theme.scss b/src/styles/common/theme.scss deleted file mode 100644 index 95220231..00000000 --- a/src/styles/common/theme.scss +++ /dev/null @@ -1,9 +0,0 @@ - -// 黑色 -$--color-black: #000; -$--color-border: #333335; -$--color-bg-1: #17171a; -$--color-bg-2: #232324; -$--color-bg-3: #2a2a2b; -$--color-bg-4: #313132; -$--color-bg-5: #373739; diff --git a/src/styles/common/var.scss b/src/styles/common/var.scss index 26d10a6c..af7b6ee3 100644 --- a/src/styles/common/var.scss +++ b/src/styles/common/var.scss @@ -1,4 +1,3 @@ -@import './theme.scss'; // 颜色 $--color-red: #fc625d; $--color-warn: #fcbc40; @@ -10,6 +9,16 @@ $--color-text-2: hsla(0, 0%, 100%, 0.7); $--color-text-3: hsla(0, 0%, 100%, 0.5); $--color-text-4: hsla(0, 0%, 100%, 0.3); +// 黑色 +$--color-black: #000; +$--color-border: #333335; +$--color-bg-1: #17171a; +$--color-bg-2: #232324; +$--color-bg-3: #2a2a2b; +$--color-bg-4: #313132; +$--color-bg-5: #373739; + +// 最大宽度 $--max-width: 1920px; // 顶部距离 $--header-height: 60px; @@ -19,8 +28,11 @@ $--filter-blur-base: blur(20px); $--filter-color-base-1: rgba(0, 0, 0, 0.1); $--filter-color-base-2: rgba(0, 0, 0, 0.2); $--filter-color-base-3: rgba(23, 23, 26, 0.3); +$--filter-color-login-dark: rgba(89, 95, 103, 0.45); +$--filter-color-login-light: rgba(187, 202, 217, 0.7); + // 边框 $--border-radius-base: 8px; $--border-bottom-style: 1px solid $--color-border; // 阴影 -$--border-shadow: 0 8px 20px rgba(0,0,0, .15); +$--border-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); diff --git a/src/utils/style.ts b/src/utils/style.ts new file mode 100644 index 00000000..64025e86 --- /dev/null +++ b/src/utils/style.ts @@ -0,0 +1,12 @@ +import { useDesignStore } from '@/store/modules/designStore/designStore' +import { theme as themeEnum } from '@/settings/designSetting' + +export const setHtmlTheme = (themeName?: string) => { + const e = window.document.documentElement + if (themeName) { + e.setAttribute("data-theme", themeName); + return + } + const designStore = useDesignStore() + e.setAttribute("data-theme", designStore.getDarkTheme ? themeEnum.darkThemeName : themeEnum.lightThemeName); +} \ No newline at end of file diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 5c2efd5c..bf4b4cca 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -14,7 +14,18 @@ - +
+
+
+ + + + + + +
+
+