From f21b6d8b0768da7a2af564e974c65146b7fbd322 Mon Sep 17 00:00:00 2001
From: click33 <2393584716@qq.com>
Date: Sat, 29 Oct 2022 12:15:57 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=96=87=E6=A1=A3=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sa-token-doc/doc.html         | 58 +++++++++++------------
 sa-token-doc/index.html       | 89 +++++++++++++++++++++++++++++++++++
 sa-token-doc/static/index.css | 27 ++++++++++-
 3 files changed, 143 insertions(+), 31 deletions(-)

diff --git a/sa-token-doc/doc.html b/sa-token-doc/doc.html
index 7cfdd3ba..28ade37b 100644
--- a/sa-token-doc/doc.html
+++ b/sa-token-doc/doc.html
@@ -26,35 +26,6 @@
 				<div class="sear-box p-none" tabindex="-1" >
 					<!-- 加载中…… -->
 				</div>
-				<div class="zk-box p-none">
-					<a class="wzi" href="javascript:;">
-						<!-- <span>背景 </span> -->
-						<img class="theme-btn" src="static/icon/theme.svg">
-						<!-- <span class="zk-icon"></span> -->
-					</a>
-					<div class="zk-context theme-box">
-						<div>
-							<div style="height: 5px;"></div>
-							<span style="background-color: #FFFFFF;"></span>
-							<span style="background-color: #f5f5f5;"></span>
-							<span style="background-color: #F1FAFA;"></span>
-							<span style="background-color: #f5f5d5;"></span>
-							<span style="background-color: #d5f5f5;"></span>
-							
-							<span style="background-color: #f5e5f5;"></span>
-							<span style="background-color: #E8E8FF;"></span>
-							<span style="background-color: #f0f9eb;"></span>
-							<span style="background-color: #ebe5dd;"></span>
-							<span style="background-color: #e8f4ff;"></span>
-							
-							<!-- <span style="background-color: #F0DAD2;"></span> -->
-							<!-- <span style="background-color: #f5d5d5;"></span> -->
-							<!-- <span style="background-color: #FFFFE0;"></span> -->
-							<!-- <span style="background-color: #eeeeee;"></span> -->
-							<!-- <span style="background-color: #f5fafe;"></span> -->
-						</div>
-					</div>
-				</div>
 				<select class="select-version p-none" onchange="location.href=this.value">
 					<option value="doc.html">最新版</option>
 					<option value="v/v1.31.0/doc.html">v1.31.0</option>
@@ -92,6 +63,35 @@
 					<option value="v/v1.0.0/doc/index.html">v1.0.0</option>
 					<option value="/">首页</option>
 				</select>
+				<div class="zk-box p-none">
+					<a class="wzi" href="javascript:;">
+						<!-- <span>背景 </span> -->
+						<img class="theme-btn" src="static/icon/theme.svg">
+						<!-- <span class="zk-icon"></span> -->
+					</a>
+					<div class="zk-context theme-box">
+						<div>
+							<div style="height: 5px;"></div>
+							<span style="background-color: #FFFFFF;"></span>
+							<span style="background-color: #f5f5f5;"></span>
+							<span style="background-color: #F1FAFA;"></span>
+							<span style="background-color: #f5f5d5;"></span>
+							<span style="background-color: #d5f5f5;"></span>
+							
+							<span style="background-color: #f5e5f5;"></span>
+							<span style="background-color: #E8E8FF;"></span>
+							<span style="background-color: #f0f9eb;"></span>
+							<span style="background-color: #ebe5dd;"></span>
+							<span style="background-color: #e8f4ff;"></span>
+							
+							<!-- <span style="background-color: #F0DAD2;"></span> -->
+							<!-- <span style="background-color: #f5d5d5;"></span> -->
+							<!-- <span style="background-color: #FFFFE0;"></span> -->
+							<!-- <span style="background-color: #eeeeee;"></span> -->
+							<!-- <span style="background-color: #f5fafe;"></span> -->
+						</div>
+					</div>
+				</div>
 				<a class="wzi" href="index.html">首页</a>
 				<a class="wzi" href="doc.html">文档</a>
 				<a class="p-none wzi" href="#/more/link">案例</a>
diff --git a/sa-token-doc/index.html b/sa-token-doc/index.html
index 5306a668..829e2e7a 100644
--- a/sa-token-doc/index.html
+++ b/sa-token-doc/index.html
@@ -27,6 +27,35 @@
 					</a>
 				</div>
 				<nav class="nav-right">
+					<div class="zk-box p-none">
+						<a class="wzi" href="javascript:;">
+							<!-- <span>背景 </span> -->
+							<img class="theme-btn" src="static/icon/theme.svg">
+							<!-- <span class="zk-icon"></span> -->
+						</a>
+						<div class="zk-context theme-box">
+							<div>
+								<div style="height: 5px;"></div>
+								<span style="background-color: #FFFFFF;"></span>
+								<span style="background-color: #f5f5f5;"></span>
+								<span style="background-color: #F1FAFA;"></span>
+								<span style="background-color: #f5f5d5;"></span>
+								<span style="background-color: #d5f5f5;"></span>
+								
+								<span style="background-color: #f5e5f5;"></span>
+								<span style="background-color: #E8E8FF;"></span>
+								<span style="background-color: #f0f9eb;"></span>
+								<span style="background-color: #ebe5dd;"></span>
+								<span style="background-color: #e8f4ff;"></span>
+								
+								<!-- <span style="background-color: #F0DAD2;"></span> -->
+								<!-- <span style="background-color: #f5d5d5;"></span> -->
+								<!-- <span style="background-color: #FFFFE0;"></span> -->
+								<!-- <span style="background-color: #eeeeee;"></span> -->
+								<!-- <span style="background-color: #f5fafe;"></span> -->
+							</div>
+						</div>
+					</div>
 					<a class="wzi" href="index.html">首页</a>
 					<a class="wzi" href="doc.html">文档</a>
 					<a class="p-none wzi" href="doc.html#/more/link">案例</a>
@@ -615,6 +644,66 @@
 			
 		</script>
 
+		<!-- 修改背景颜色 -->
+		<script>
+			
+			// 绑定修改背景色的按钮事件
+			$('.theme-box span').click(function() {
+				let bgColor = this.style.backgroundColor;
+				setBg(bgColor);
+				localStorage.setItem('bg-color-value', bgColor)
+			})
+			// 读取上次记录
+			let bgColor = localStorage.getItem('bg-color-value');
+			if(bgColor) {
+				setBg(bgColor);
+			}
+			
+			// 设置背景颜色 
+			function setBg(bgColor) {
+				console.log('---- 背景颜色设定为：', bgColor);
+				
+				// -------- 设置 body 背景
+				document.body.style.backgroundColor = bgColor;
+				
+				// -------- 设置 header 头背景
+				// 如果是 16 进制，转 rgba
+				if(bgColor.indexOf('#') == 0) {
+					bgColor = hexToRgba(bgColor, 0.97);
+				}
+				// 如果是 rgb，转 rgba
+				else if(bgColor.match(/\,/g).length == 2) {
+					bgColor = bgColor.replace(')', ' ,0.97)');
+				}
+				
+				document.querySelector('.doc-header').style.backgroundColor = bgColor;
+			}
+			
+			// 16进制 转 rgba
+			function hexToRgba(str, a){
+				a = a || 1;
+		
+				var reg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/
+				if(!reg.test(str)){return;}
+				let newStr = (str.toLowerCase()).replace(/\#/g,'')
+				let len = newStr.length;
+				if(len == 3){
+					let t = ''
+					for(var i=0;i<len;i++){
+						t += newStr.slice(i,i+1).concat(newStr.slice(i,i+1))
+					}
+					newStr = t
+				}
+				let arr = []; //将字符串分隔，两个两个的分隔
+				for(var i =0;i<6;i=i+2){
+					let s = newStr.slice(i,i+2)
+					arr.push(parseInt("0x" + s))
+				}
+				return 'rgb(' + arr.join(",")  + ', ' + a + ')';
+			}
+			
+		</script>
+
 		<script type="text/javascript">
 			// 预览版提示 
 			if(location.host === 'rc.sa-token.cc') {
diff --git a/sa-token-doc/static/index.css b/sa-token-doc/static/index.css
index baccfa30..aef3b57d 100644
--- a/sa-token-doc/static/index.css
+++ b/sa-token-doc/static/index.css
@@ -106,7 +106,7 @@ body{font-size: 16px; color: #34495E; font-family: "Source Sans Pro","Helvetica
 /* -------- 集成案例 --------- */
 .s-case-box{justify-content: space-between;}
 .s-case{border: 1px #e5e5e5 solid; flex: 0 0 31.5%; margin-top: 30px; text-align: left; box-sizing: border-box; padding-bottom: 16px; overflow: hidden;}
-.s-case{position: relative; transition: all 0.2s;}
+.s-case{position: relative; transition: all 0.2s; background-color: #FFF;}
 .s-case-link{display: block; width: 100%; height: 0px; padding-bottom: 50%; position: relative; overflow: hidden;}
 .s-case-link img{width: 100%; height: 100%; object-fit: cover; object-position: center; position: absolute;}
 .s-case-link img{transition: all 0.3s;}
@@ -234,4 +234,27 @@ body{font-size: 16px; color: #34495E; font-family: "Source Sans Pro","Helvetica
 
 /* 下三角小图标 */
 .zk-icon{display: inline-block; width: 0px; height: 0px; position: relative;top: 3px; margin-left: 4px;}
-.zk-icon{border-style: solid; border-width: 5px; border-color: #aaa transparent transparent transparent; }
\ No newline at end of file
+.zk-icon{border-style: solid; border-width: 5px; border-color: #aaa transparent transparent transparent; }
+
+
+/* -------------  背景色相关 ------------- */
+/* 侧边栏需要透明 */
+.sidebar-toggle{background-color: transparent !important;}
+.sidebar{background-color: transparent !important;}
+
+/* 变色的动画 */
+.doc-header,body{transition: all 0.5s !important;}
+
+/* 调色按钮 */
+.theme-btn{width: 25px; height: 25px; line-height: 60px; vertical-align: middle; position: relative; top: -1px;}
+.theme-box{width: 160px; text-align: left; line-height: 20px; margin-top: -20px; white-space: normal;}
+.theme-box span{
+	display: inline-block;
+	width: 20px; 
+	height: 20px; 
+	margin: 1px 2px; 
+	border: 1px #ccc solid; 
+	cursor: pointer;
+	border-radius: 1px;
+	box-sizing: border-box;
+}