github/go-view
github/go-view
3
0
Fork 0
mirror of https://gitee.com/dromara/go-view.git synced 2025-02-23 15:52:49 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

颜色更换

Browse Source
This commit is contained in:
MTrun 2021-12-15 22:16:16 +08:00
parent ed49e4add8
commit 13e7a64585
15 changed files with 154 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

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

7
src/App.vue
View File

@ -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
src/main.ts
View File

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

5
src/plugins/globalMethods.ts
View File

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

1
src/plugins/index.ts
View File

@ -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
src/plugins/naive.ts
View File

@ -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
src/settings/designSetting.ts
View File

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

7
src/store/modules/designStore/designStore.ts
View File

@ -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
src/styles/common/mixins/function.scss
View File

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

54
src/styles/common/mixins/mixins.scss
View File

@ -1,21 +1,9 @@
@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} {
@content;
}
}
@mixin go-l($block) {
$B: $namespace + '-' + $theme-light + '-' + $block !global;
.#{$B} {
@content;
}
}
@mixin go-d($block) {
$B: $namespace + '-' + $theme-dark + '-' + $block !global;
.#{$B} { .#{$B} {
@content; @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);
}
}

25
src/styles/common/mixins/theme.scss Normal file
View File

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

9
src/styles/common/theme.scss
View File

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

16
src/styles/common/var.scss
View File

@ -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
src/utils/style.ts Normal file
View File

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

61
src/views/login/index.vue
View File

@ -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( @include background-image('background-image');
120deg,
$--color-bg-1 0%,
$--color-bg-2 100%
);
&-header { &-header {
margin: 0px; display: flex;
padding-top: $--header-height; 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; @include filter-color('filter-color');
box-shadow: 0 0 105px 50px #202020; 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 {