Эхлэл Бүгдийг харах Тусламж
Бүртгүүлэх Нэвтрэх
pm
/
ISCS_Big_Sreen_GoView
1
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

颜色更换

MTrun 3 жил өмнө
parent
ed49e4add8
commit
13e7a64585
15 өөрчлөгдсөн 153 нэмэгдсэн , 55 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 1 1
      index.html
  2. 2 5
      src/App.vue
  3. 4 0
      src/main.ts
  4. 0 5
      src/plugins/globalMethods.ts
  5. 0 1
      src/plugins/index.ts
  6. 2 0
      src/plugins/naive.ts
  7. 2 0
      src/settings/designSetting.ts
  8. 6 1
      src/store/modules/designStore/designStore.ts
  9. 3 0
      src/styles/common/mixins/function.scss
  10. 38 14
      src/styles/common/mixins/mixins.scss
  11. 25 0
      src/styles/common/mixins/theme.scss
  12. 0 9
      src/styles/common/theme.scss
  13. 14 2
      src/styles/common/var.scss
  14. 12 0
      src/utils/style.ts
  15. 44 17
      src/views/login/index.vue

+ 1 - 1
index.html
Файл харах 

@@ -10,7 +10,7 @@
 
   />
 
   />
 
   <link rel="icon" href="./favicon.ico"/>
 
   <link rel="icon" href="./favicon.ico"/>
 
   <title>GoView</title>
 
   <title>GoView</title>
 
-  <style>.first-loading-wrp{display:flex;justify-content:center;align-items:center;height:100vh;background-color: #17171a;}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
 
+  <style>*{margin: 0;}.first-loading-wrp{display:flex;justify-content:center;align-items:center;height:100vh;background-color: #17171a;}.first-loading-wrp>h1{font-size:128px}.first-loading-wrp .loading-wrp{padding:98px;display:flex;justify-content:center;align-items:center}.dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:32px;width:32px;height:32px;box-sizing:border-box}.dot i{width:14px;height:14px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.dot i:nth-child(1){top:0;left:0}.dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
 <div id="appProvider" style="display: none"></div>
 
 <div id="appProvider" style="display: none"></div>

+ 2 - 5
src/App.vue
Файл харах 

@@ -18,14 +18,12 @@ import {
 
   dateZhCN,
 
   dateZhCN,
 
   darkTheme,
 
   darkTheme,
 
   NConfigProvider,
 
   NConfigProvider,
 
-  GlobalThemeOverrides
 
+  GlobalThemeOverrides,
 
 } from 'naive-ui'
 
 } from 'naive-ui'
 
 import { AppProvider } from '@/components/Application'
 
 import { AppProvider } from '@/components/Application'
 
-import { useRoute } from 'vue-router'
 
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 
 import { borderRadius } from '@/settings/designSetting'
 
 import { borderRadius } from '@/settings/designSetting'
 
 
 
-const route = useRoute()
 
 const designStore = useDesignStore()
 
 const designStore = useDesignStore()
 
 
 
 const getThemeOverrides = computed(
 
 const getThemeOverrides = computed(
 
@@ -41,9 +39,8 @@ const getThemeOverrides = computed(
 
     }
 
     }
 
   }
 
   }
 
 )
 
 )
 
-
 
 const getDarkTheme = computed(() =>
 
 const getDarkTheme = computed(() =>
 
-  designStore.darkTheme ? darkTheme : undefined
 
+  designStore.getDarkTheme ? darkTheme : undefined
 
 )
 
 )
 
 </script>
 
 </script>

+ 4 - 0
src/main.ts
Файл харах 

@@ -4,6 +4,7 @@ import router, { setupRouter } from '@/router';
 
 import { setupStore } from '@/store';
 
 import { setupStore } from '@/store';
 
 import { setupNaive, setupDirectives } from '@/plugins';
 
 import { setupNaive, setupDirectives } from '@/plugins';
 
 import { AppProvider } from '@/components/Application';
 
 import { AppProvider } from '@/components/Application';
 
+import { setHtmlTheme } from '@/utils/style'
 
 
 
 async function appInit() {
 
 async function appInit() {
 
   const appProvider = createApp(AppProvider);
 
   const appProvider = createApp(AppProvider);
 
@@ -19,6 +20,9 @@ async function appInit() {
 
   // 挂载状态管理
 
   // 挂载状态管理
 
   setupStore(app);
 
   setupStore(app);
 
 
 
+  // 处理主题色
 
+  setHtmlTheme()
 
+
 
   //优先挂载一下 Provider 解决路由守卫，Axios中可使用，Dialog，Message 等之类组件
 
   //优先挂载一下 Provider 解决路由守卫，Axios中可使用，Dialog，Message 等之类组件
 
   appProvider.mount('#appProvider', true);
 
   appProvider.mount('#appProvider', true);

+ 0 - 5
src/plugins/globalMethods.ts
Файл харах 

@@ -1,5 +0,0 @@
 
-/**
 
- * 注册全局方法
 
- * @param app
 
- */
 
-export function setupGlobalMethods() {}

+ 0 - 1
src/plugins/index.ts
Файл харах 

@@ -1,4 +1,3 @@
 
 export { setupNaive } from '@/plugins/naive';
 
 export { setupNaive } from '@/plugins/naive';
 
 export { setupDirectives } from '@/plugins/directives';
 
 export { setupDirectives } from '@/plugins/directives';
 
 export { setupCustomComponents } from '@/plugins/customComponents';
 
 export { setupCustomComponents } from '@/plugins/customComponents';
 
-export { setupGlobalMethods } from '@/plugins/globalMethods';

+ 2 - 0
src/plugins/naive.ts
Файл харах 

@@ -2,6 +2,7 @@ import type { App } from 'vue';
 
 import {
 
 import {
 
   create,
 
   create,
 
   NA,
 
   NA,
 
+  NText,
 
   NConfigProvider,
 
   NConfigProvider,
 
   NMessageProvider,
 
   NMessageProvider,
 
   NDialogProvider,
 
   NDialogProvider,
 
@@ -75,6 +76,7 @@ import {
 
 const naive = create({
 
 const naive = create({
 
   components: [
 
   components: [
 
     NA,
 
     NA,
 
+    NText,
 
     NMessageProvider,
 
     NMessageProvider,
 
     NDialogProvider,
 
     NDialogProvider,
 
     NConfigProvider,
 
     NConfigProvider,

+ 2 - 0
src/settings/designSetting.ts
Файл харах 

@@ -21,6 +21,8 @@ export const appThemeList: string[] = [
 
 ];
 
 ];
 
 
 
 export const theme = {
 
 export const theme = {
 
+  darkThemeName: 'dark',
 
+  lightThemeName: 'light',
 
   //深色主题
 
   //深色主题
 
   darkTheme: true,
 
   darkTheme: true,
 
   //系统主题色
 
   //系统主题色

+ 6 - 1
src/store/modules/designStore/designStore.ts
Файл харах 

@@ -1,6 +1,6 @@
 
 import { defineStore } from 'pinia';
 
 import { defineStore } from 'pinia';
 
 import { store } from '@/store';
 
 import { store } from '@/store';
 
-import { theme, borderRadius } from '@/settings/designSetting';
 
+import { theme } from '@/settings/designSetting';
 
 const { darkTheme, appTheme, appThemeList } = theme;
 
 const { darkTheme, appTheme, appThemeList } = theme;
 
 import { DesignStateType } from './designStore.d'
 
 import { DesignStateType } from './designStore.d'
 
 
 
@@ -22,6 +22,11 @@ export const useDesignStore = defineStore({
 
       return this.appThemeList;
 
       return this.appThemeList;
 
     },
 
     },
 
   },
 
   },
 
+  actions: {
 
+    changeTheme():void {
 
+      this.darkTheme = !this.darkTheme
 
+    }
 
+  }
 
 });
 
 });
 
 
 
 export function useDesignSettingWithOut() {
 
 export function useDesignSettingWithOut() {

+ 3 - 0
src/styles/common/mixins/function.scss
Файл харах 

@@ -0,0 +1,3 @@
 
+@function themed($key) {
 
+  @return map-get($theme-map, $key);
 
+}

+ 38 - 14
src/styles/common/mixins/mixins.scss
Файл харах 

@@ -1,30 +1,54 @@
 
 @import './config.scss';
 
 @import './config.scss';
 
+@import './function.scss';
 
+@import './theme.scss';
 
 
 
 @mixin go($block) {
 
 @mixin go($block) {
 
-  $B: $namespace + '-' + $block !global;
 
+  $B: $namespace + '-' + $block;
 
   .#{$B} {
 
   .#{$B} {
 
     @content;
 
     @content;
 
   }
 
   }
 
 }
 
 }
 
 
 
-@mixin go-l($block) {
 
-  $B: $namespace + '-' + $theme-light + '-' + $block !global;
 
-  .#{$B} {
 
-    @content;
 
+@mixin when($state) {
 
+  @at-root {
 
+    &.#{$state-prefix + $state} {
 
+      @content;
 
+    }
 
   }
 
   }
 
 }
 
 }
 
 
 
-@mixin go-d($block) {
 
-  $B: $namespace + '-' + $theme-dark + '-' + $block !global;
 
-  .#{$B} {
 
-    @content;
 
+@mixin themeify {
 
+  @each $theme-name, $theme-map in $themes {
 
+    $theme-map: $theme-map !global;
 
+    [data-theme='#{$theme-name}'] & {
 
+      @content;
 
+    }
 
   }
 
   }
 
 }
 
 }
 
 
 
-@mixin when($state) {
 
-  @at-root {
 
-    &.#{$state-prefix + $state} {
 
-      @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);
 
   }
 
   }
 
 }
 
 }

+ 25 - 0
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
 
+    )
 
+);

+ 0 - 9
src/styles/common/theme.scss
Файл харах 

@@ -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;

+ 14 - 2
src/styles/common/var.scss
Файл харах 

@@ -1,4 +1,3 @@
 
-@import './theme.scss';
 
 // 颜色
 
 // 颜色
 
 $--color-red: #fc625d;
 
 $--color-red: #fc625d;
 
 $--color-warn: #fcbc40;
 
 $--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-3: hsla(0, 0%, 100%, 0.5);
 
 $--color-text-4: hsla(0, 0%, 100%, 0.3);
 
 $--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;
 
 $--max-width: 1920px;
 
 // 顶部距离
 
 // 顶部距离
 
 $--header-height: 60px;
 
 $--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-1: rgba(0, 0, 0, 0.1);
 
 $--filter-color-base-2: rgba(0, 0, 0, 0.2);
 
 $--filter-color-base-2: rgba(0, 0, 0, 0.2);
 
 $--filter-color-base-3: rgba(23, 23, 26, 0.3);
 
 $--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-radius-base: 8px;
 
 $--border-bottom-style: 1px solid $--color-border;
 
 $--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);

+ 12 - 0
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);
 
+}

+ 44 - 17
src/views/login/index.vue
Файл харах 

@@ -14,7 +14,18 @@
 
         </transition-group>
 
         </transition-group>
 
       </aside>
 
       </aside>
 
     </div>
 
     </div>
 
-    <n-divider class="go-login-box-header" />
 
+    <header class="go-login-box-header">
 
+      <div></div>
 
+      <div class="header-ri">
 
+        <n-button quaternary @click="changeTheme">
 
+          <n-icon size="20" :depth="1">
 
+            <MoonIcon v-if="designStore.darkTheme" />
 
+            <SunnyIcon v-else />
 
+          </n-icon>
 
+        </n-button>
 
+      </div>
 
+    </header>
 
+    <n-divider class="go-login-box-divider" />
 
 
 
     <div class="go-login">
 
     <div class="go-login">
 
       <div class="go-login-carousel">
 
       <div class="go-login-carousel">
 
@@ -53,7 +64,7 @@
 
                   >
 
                   >
 
                     <template #prefix>
 
                     <template #prefix>
 
                       <n-icon size="18">
 
                       <n-icon size="18">
 
-                        <PersonOutline />
 
+                        <PersonOutlineIcon />
 
                       </n-icon>
 
                       </n-icon>
 
                     </template>
 
                     </template>
 
                   </n-input>
 
                   </n-input>
 
@@ -67,7 +78,7 @@
 
                   >
 
                   >
 
                     <template #prefix>
 
                     <template #prefix>
 
                       <n-icon size="18">
 
                       <n-icon size="18">
 
-                        <LockClosedOutline />
 
+                        <LockClosedOutlineIcon />
 
                       </n-icon>
 
                       </n-icon>
 
                     </template>
 
                     </template>
 
                   </n-input>
 
                   </n-input>
 
@@ -112,10 +123,17 @@
 
 import { reactive, ref, onMounted } from 'vue'
 
 import { reactive, ref, onMounted } from 'vue'
 
 import { useRouter } from 'vue-router'
 
 import { useRouter } from 'vue-router'
 
 import { useMessage } from 'naive-ui'
 
 import { useMessage } from 'naive-ui'
 
-import { PersonOutline, LockClosedOutline } from '@vicons/ionicons5'
 
+import {
 
+  PersonOutline as PersonOutlineIcon,
 
+  LockClosedOutline as LockClosedOutlineIcon,
 
+  Moon as MoonIcon,
 
+  Sunny as SunnyIcon
 
+} from '@vicons/ionicons5'
 
 import { requireUrl } from '@/utils/index'
 
 import { requireUrl } from '@/utils/index'
 
-import { shuffle } from 'lodash'
 
+import { setHtmlTheme } from '@/utils/style'
 
+import shuffle from 'lodash/shuffle'
 
 import { carouselInterval } from '@/settings/designSetting'
 
 import { carouselInterval } from '@/settings/designSetting'
 
+import { useDesignStore } from '@/store/modules/designStore/designStore'
 
 
 
 interface FormState {
 
 interface FormState {
 
   username: string
 
   username: string
 
@@ -128,6 +146,7 @@ const message = useMessage()
 
 const loading = ref(false)
 
 const loading = ref(false)
 
 const autoLogin = ref(true)
 
 const autoLogin = ref(true)
 
 const show = ref(false)
 
 const show = ref(false)
 
+const designStore = useDesignStore()
 
 
 
 onMounted(() => {
 
 onMounted(() => {
 
   setTimeout(() => {
 
   setTimeout(() => {
 
@@ -161,7 +180,7 @@ const bgList = ref([
 
   'heatmap',
 
   'heatmap',
 
   'map',
 
   'map',
 
   'pie',
 
   'pie',
 
-  'radar',
 
+  'radar'
 
 ])
 
 ])
 
 
 
 // 处理url获取
 
 // 处理url获取
 
@@ -169,6 +188,12 @@ const getImageUrl = (name: string, folder: string) => {
 
   return requireUrl(`../assets/images/${folder}`, `${name}.png`)
 
   return requireUrl(`../assets/images/${folder}`, `${name}.png`)
 
 }
 
 }
 
 
 
+// 改变样式
 
+const changeTheme = () => {
 
+  designStore.changeTheme()
 
+  setHtmlTheme()
 
+}
 
+
 
 // 打乱
 
 // 打乱
 
 const shuffleHandle = () => {
 
 const shuffleHandle = () => {
 
   shuffleTimiing.value = setInterval(() => {
 
   shuffleTimiing.value = setInterval(() => {
 
@@ -204,7 +229,6 @@ $account-img-height: 270px;
 
 $footer-height: 50px;
 
 $footer-height: 50px;
 
 $carousel-width: 30%;
 
 $carousel-width: 30%;
 
 $carousel-image-height: 60vh;
 
 $carousel-image-height: 60vh;
 
-$--filter-color-base-login: rgba(89, 95, 103, 0.45);
 
 
 
 * {
 
 * {
 
   box-sizing: border-box;
 
   box-sizing: border-box;
 
@@ -212,14 +236,17 @@ $--filter-color-base-login: rgba(89, 95, 103, 0.45);
 
 @include go(login-box) {
 
 @include go(login-box) {
 
   height: $go-login-height;
 
   height: $go-login-height;
 
   overflow: hidden;
 
   overflow: hidden;
 
-  background-image: linear-gradient(
 
-    120deg,
 
-    $--color-bg-1 0%,
 
-    $--color-bg-2 100%
 
-  );
 
+  @include background-image('background-image');
 
   &-header {
 
   &-header {
 
-    margin: 0px;
 
-    padding-top: $--header-height;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    align-items: center;
 
+    padding: 0 40px;
 
+    height: $--header-height;
 
+  }
 
+  &-divider {
 
+    margin: 0;
 
+    padding-top: 0;
 
   }
 
   }
 
 
 
   @include go(login) {
 
   @include go(login) {
 
@@ -250,8 +277,8 @@ $--filter-color-base-login: rgba(89, 95, 103, 0.45);
 
 
 
       &-card {
 
       &-card {
 
         @extend .go-background-filter;
 
         @extend .go-background-filter;
 
-        background-color: $--filter-color-base-login;
 
-        box-shadow: 0 0 105px 50px #202020;
 
+        @include filter-color('filter-color');
 
+        box-shadow: 0 0 20px 5px rgba(40, 40, 40, 0.5);
 
       }
 
       }
 
 
 
       &-top {
 
       &-top {
 
@@ -283,7 +310,7 @@ $--filter-color-base-login: rgba(89, 95, 103, 0.45);
 
     width: $--max-width;
 
     width: $--max-width;
 
     height: 100vh;
 
     height: 100vh;
 
     background: url('@/assets/images/login/login-bg.png') no-repeat 0 -120px;
 
     background: url('@/assets/images/login/login-bg.png') no-repeat 0 -120px;
 
-    .bg-slot{
 
+    .bg-slot {
 
       width: $carousel-width;
 
       width: $carousel-width;
 
     }
 
     }
 
     .bg-img-box {
 
     .bg-img-box {