From a6c08c2c5a2af91cbe27433d806b1860c0ab7865 Mon Sep 17 00:00:00 2001
From: sc <shencheng@heronshn.com>
Date: Tue, 17 Aug 2021 09:18:46 +0800
Subject: [PATCH] Squashed commit of the following:
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

commit 82e77d074363a6535066726773d66a99d1277946
Author: sakuya <81883387@qq.com>
Date:   Mon Aug 16 23:05:07 2021 +0800

    FIX 默认值

commit 9052ee5554bec25e812820bf04efbc77f68f6f2a
Author: sakuya <81883387@qq.com>
Date:   Mon Aug 16 23:00:43 2021 +0800

    ADD 主题颜色设置
---
 src/App.vue                       | 14 +++++++++++++-
 src/config/index.js               |  3 +++
 src/layout/components/setting.vue | 17 ++++++++++++++++-
 src/style/fix.scss                | 21 +++++++++++++++++++++
 src/style/theme/dark.scss         |  1 -
 src/utils/color.js                | 29 +++++++++++++++++++++++++++++
 src/views/userCenter/index.vue    | 16 +++++++++++++++-
 src/views/userCenter/login.vue    |  2 +-
 8 files changed, 98 insertions(+), 5 deletions(-)
 create mode 100644 src/utils/color.js

diff --git a/src/App.vue b/src/App.vue
index dfb5041b..14e14347 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,8 +5,20 @@
 </template>
 
 <script>
+	import colorTool from '@/utils/color'
+	
 	export default {
-		name: 'App'
+		name: 'App',
+		created() {
+			//设置主题颜色
+			const app_color = this.$CONFIG.COLOR || this.$TOOL.data.get('APP_COLOR')
+			if(app_color){
+				document.documentElement.style.setProperty('--el-color-primary', app_color);
+				for (let i = 1; i <= 9; i++) {
+					document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(app_color,i/10));
+				}
+			}
+		}
 	}
 </script>
 
diff --git a/src/config/index.js b/src/config/index.js
index 6e2ef523..ab1a30cf 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -29,6 +29,9 @@ const DEFAULT_CONFIG = {
 
 	//语言
 	LANG: 'zh-cn',
+	
+	//主题颜色
+	COLOR: '',
 
 	//控制台首页默认布局
 	DEFAULT_GRID: {
diff --git a/src/layout/components/setting.vue b/src/layout/components/setting.vue
index d160d77c..4eb7e168 100644
--- a/src/layout/components/setting.vue
+++ b/src/layout/components/setting.vue
@@ -13,6 +13,10 @@
 			</el-select>
 		</el-form-item>
 		<el-divider></el-divider>
+		<el-form-item label="主题颜色">
+			<el-color-picker v-model="colorPrimary" :predefine="colorList">></el-color-picker>
+		</el-form-item>
+		<el-divider></el-divider>
 		<el-form-item label="框架布局">
 			<el-select v-model="layout" placeholder="请选择">
 				<el-option label="默认" value="default"></el-option>
@@ -32,6 +36,8 @@
 </template>
 
 <script>
+	import colorTool from '@/utils/color'
+
 	export default {
 		data(){
 			return {
@@ -39,7 +45,9 @@
 				menuIsCollapse: this.$store.state.global.menuIsCollapse,
 				layoutTags: this.$store.state.global.layoutTags,
 				lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
-				theme: this.$TOOL.data.get('APP_THEME') || 'default'
+				theme: this.$TOOL.data.get('APP_THEME') || 'default',
+				colorList: ['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
+				colorPrimary: this.$TOOL.data.get('APP_COLOR') || this.$CONFIG.COLOR || '#409EFF'
 			}
 		},
 		watch: {
@@ -59,6 +67,13 @@
 			lang(val){
 				this.$i18n.locale = val
 				this.$TOOL.data.set("APP_LANG", val);
+			},
+			colorPrimary(val){
+				document.documentElement.style.setProperty('--el-color-primary', val);
+				for (let i = 1; i <= 9; i++) {
+					document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val,i/10));
+				}
+				this.$TOOL.data.set("APP_COLOR", val);
 			}
 		}
 	}
diff --git a/src/style/fix.scss b/src/style/fix.scss
index 3e406d57..0849b4c5 100644
--- a/src/style/fix.scss
+++ b/src/style/fix.scss
@@ -38,6 +38,27 @@
 .el-button--small.is-circle {padding:9px;}
 .el-button--mini.is-circle {padding:7px;}
 
+/* 动态值 */
+.el-button:active {border-color: var(--el-color-primary);color: var(--el-color-primary);}
+.el-button--primary {background-color: var(--el-color-primary);border-color: var(--el-color-primary);}
+.el-button--primary:focus, .el-button--primary:hover {background: var(--el-color-primary-light-2);border-color: var(--el-color-primary-light-2);}
+.el-button--primary:active {background-color: var(--el-color-primary);border-color: var(--el-color-primary);color: #fff;}
+.el-button--primary.is-plain {background: var(--el-color-primary-light-9);border-color: var(--el-color-primary-light-1);color: var(--el-color-primary);}
+.el-button--primary.is-plain:focus, .el-button--primary.is-plain:hover {background-color: var(--el-color-primary);border-color: var(--el-color-primary);}
+.el-button--primary.is-plain:active {background-color: var(--el-color-primary);border-color: var(--el-color-primary);}
+.el-button--primary.is-plain.is-disabled, .el-button--primary.is-plain.is-disabled:active, .el-button--primary.is-plain.is-disabled:focus, .el-button--primary.is-plain.is-disabled:hover {background: var(--el-color-primary-light-9);border-color: var(--el-color-primary-light-8);color: var(--el-color-primary-light-4);}
+.el-button--text:focus, .el-button--text:hover {color: var(--el-color-primary-light-2);border-color: transparent;background-color: transparent;}
+.el-tag {background-color: var(--el-color-primary-light-9);border-color: var(--el-color-primary-light-8);color: var(--el-color-primary);}
+.el-menu-item.is-active {background: var(--el-color-primary-light-9);color: var(--el-color-primary)!important;}
+
+.adminui-header {background-color: var(--el-color-primary);}
+.aminui-side-split li.active {background-color: var(--el-color-primary);}
+.adminui-tags li:hover {background-color: var(--el-color-primary-light-9);}
+.adminui-tags li.active {background-color: var(--el-color-primary)!important;}
+.contextmenu li:hover {background-color: var(--el-color-primary-light-9)!important;color: var(--el-color-primary-light-2)!important;}
+.data-box .item-background {background-color: var(--el-color-primary)!important;}
+.layout-setting,.diy-grid-setting {background-color: var(--el-color-primary)!important;}
+
 /* 覆盖tinymce样式 */
 .sceditor .tox-tinymce {border: 1px solid #DCDFE6;}
 .sceditor .tox .tox-statusbar {border-top: 1px solid #DCDFE6;}
diff --git a/src/style/theme/dark.scss b/src/style/theme/dark.scss
index d1acb613..07174cb0 100644
--- a/src/style/theme/dark.scss
+++ b/src/style/theme/dark.scss
@@ -33,7 +33,6 @@
 	/* 登录 */
 	.login_bg {background: $--background !important;}
 	.login-form {background: $--card-background !important;}
-	.login-sidebox  {background: #224f7e !important;}
 	.login-logo h2 {color: $--text-color !important;}
 	@media (max-width: 1000px){
 		.login_bg {background: $--card-background !important;}
diff --git a/src/utils/color.js b/src/utils/color.js
new file mode 100644
index 00000000..295d0113
--- /dev/null
+++ b/src/utils/color.js
@@ -0,0 +1,29 @@
+export default {
+	//hex颜色转rgb颜色
+	HexToRgb(str) {
+		str = str.replace("#", "")
+		var hxs = str.match(/../g)
+		for (var i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16)
+		return hxs
+	},
+	//rgb颜色转hex颜色
+	RgbToHex(a, b, c) {
+		var hexs = [a.toString(16), b.toString(16), c.toString(16)]
+		for (var i = 0; i < 3; i++) {
+			if (hexs[i].length == 1) hexs[i] = "0" + hexs[i]
+		}
+		return "#" + hexs.join("");
+	},
+	//加深
+	darken(color, level) {
+		var rgbc = this.HexToRgb(color)
+		for (var i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level))
+		return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2])
+	},
+	//变淡
+	lighten(color, level) {
+		var rgbc = this.HexToRgb(color)
+		for (var i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i])
+		return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2])
+	}
+}
diff --git a/src/views/userCenter/index.vue b/src/views/userCenter/index.vue
index 6ef2562a..6846a087 100644
--- a/src/views/userCenter/index.vue
+++ b/src/views/userCenter/index.vue
@@ -77,6 +77,9 @@
 									<el-switch v-model="config.theme" active-value="dark" inactive-value="default"></el-switch>
 									<div class="el-form-item-msg">{{ $t('user.nightmode_msg') }}</div>
 								</el-form-item>
+								<el-form-item label="主题颜色">
+									<el-color-picker v-model="config.colorPrimary" :predefine="colorList">></el-color-picker>
+								</el-form-item>
 								<el-form-item :label="$t('user.language')">
 									<el-select v-model="config.lang">
 										<el-option label="简体中文" value="zh-cn"></el-option>
@@ -95,6 +98,8 @@
 </template>
 
 <script>
+	import colorTool from '@/utils/color'
+
 	export default {
 		name: 'userCenter',
 		data() {
@@ -149,9 +154,11 @@
 					sex: "1",
 					about: "正所谓富贵险中求"
 				},
+				colorList: ['#409EFF', '#009688', '#536dfe', '#ff5c93', '#c62f2f', '#fd726d'],
 				config: {
 					lang: this.$TOOL.data.get('APP_LANG') || this.$CONFIG.LANG,
-					theme: this.$TOOL.data.get('APP_THEME') || 'default'
+					theme: this.$TOOL.data.get('APP_THEME') || 'default',
+					colorPrimary: this.$TOOL.data.get('APP_COLOR') || this.$CONFIG.COLOR || '#409EFF'
 				}
 			}
 		},
@@ -163,6 +170,13 @@
 			'config.lang'(val){
 				this.$i18n.locale = val
 				this.$TOOL.data.set("APP_LANG", val);
+			},
+			'config.colorPrimary'(val){
+				document.documentElement.style.setProperty('--el-color-primary', val);
+				for (let i = 1; i <= 9; i++) {
+					document.documentElement.style.setProperty(`--el-color-primary-light-${i}`, colorTool.lighten(val,i/10));
+				}
+				this.$TOOL.data.set("APP_COLOR", val);
 			}
 		},
 		methods: {
diff --git a/src/views/userCenter/login.vue b/src/views/userCenter/login.vue
index d21b5ce7..61817175 100644
--- a/src/views/userCenter/login.vue
+++ b/src/views/userCenter/login.vue
@@ -86,7 +86,7 @@
 	.login_bg {position: absolute;top:0px;left:0px;right:0px;bottom:0px;}
 	.login_container {position: absolute;top:50%;left:50%;width: 1100px;margin: 0 auto;z-index: 1;transform: translate(-50%, -50%);}
 	.login_body {width: inherit;display: flex;box-shadow: 0px 20px 80px 0px rgba(0,0,0,0.3);}
-	.login-sidebox {width: 50%;padding: 60px;color: #fff;background:#3887e5;position: relative;overflow: hidden;}
+	.login-sidebox {width: 50%;padding: 60px;color: #fff;background:var(--el-color-primary);position: relative;overflow: hidden;}
 	.login-sidebox__title h2 {font-size: 30px;}
 	.login-sidebox__title h4 {font-size: 18px;margin-top: 10px;font-weight: normal;}
 	.login-sidebox__title p {font-size: 14px;margin-top:10px;line-height: 1.8;color: rgba(255,255,255,0.6);}