Parcourir la source

支持在线切换主题

RuoYi il y a 5 ans
Parent
commit
01f40d91ec

+ 7 - 0
ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysIndexController.java

@@ -38,6 +38,13 @@ public class SysIndexController extends BaseController
         return "index";
     }
 
+    // 切换主题
+    @GetMapping("/system/switchSkin")
+    public String switchSkin(ModelMap mmap)
+    {
+        return "skin";
+    }
+
     // 系统介绍
     @GetMapping("/system/main")
     public String main(ModelMap mmap)

+ 30 - 9
ruoyi-admin/src/main/resources/static/ruoyi/js/common.js

@@ -3,6 +3,15 @@
  * Copyright (c) 2019 ruoyi 
  */
 $(function() {
+	
+	//  layer扩展皮肤
+	if (window.layer !== undefined) {
+		layer.config({
+		    extend: 'moon/style.css',
+		    skin: 'layer-ext-moon'
+		});
+	}
+	
 	// select2复选框事件绑定
 	if ($.fn.select2 !== undefined) {
         $.fn.select2.defaults.set( "theme", "bootstrap" );
@@ -225,17 +234,33 @@ function createMenuItem(dataUrl, menuName) {
 
 //日志打印封装处理
 var log = {
-    log: function (msg) {
-    	console.log(msg);
+    log: function(msg) {
+        console.log(msg);
     },
     info: function(msg) {
-    	console.info(msg);
+        console.info(msg);
     },
     warn: function(msg) {
-    	console.warn(msg);
+        console.warn(msg);
     },
     error: function(msg) {
-    	console.error(msg);
+        console.error(msg);
+    }
+};
+
+//本地缓存处理
+var storage = {
+    set: function(key, value) {
+        window.localStorage.setItem(key, value);
+    },
+    get: function(key) {
+        return window.localStorage.getItem(key);
+    },
+    remove: function(key) {
+        window.localStorage.removeItem(key);
+    },
+    clear: function() {
+        window.localStorage.clear();
     }
 };
 
@@ -253,7 +278,3 @@ $.ajaxSetup({
         }
     }
 });
-layer.config({
-    extend: 'moon/style.css',
-    skin: 'layer-ext-moon'
-});

+ 31 - 4
ruoyi-admin/src/main/resources/templates/index.html

@@ -17,7 +17,7 @@
     <link th:href="@{/css/skins.css}" rel="stylesheet"/>
     <link th:href="@{/ruoyi/css/ry-ui.css?v=4.0.0}" rel="stylesheet"/>
 </head>
-<body class="fixed-sidebar full-height-layout gray-bg" style="overflow: hidden" th:classappend="|${@config.getKey('sys.index.sideTheme')} ${@config.getKey('sys.index.skinName')}|">
+<body class="fixed-sidebar full-height-layout gray-bg" style="overflow: hidden">
 <div id="wrapper">
 
     <!--左侧导航开始-->
@@ -187,9 +187,13 @@
 								<i class="fa fa-user"></i> 个人中心</a>
 							</li>
 							<li>
-								<a onclick="resetPwd()" class="menuItem">
+								<a onclick="resetPwd()">
 								<i class="fa fa-key"></i> 修改密码</a>
 							</li>
+							<li>
+								<a onclick="switchSkin()">
+								<i class="fa fa-dashboard"></i> 切换主题</a>
+							</li>
 							<li class="divider"></li>
 							<li>
 								<a th:href="@{logout}">
@@ -236,15 +240,38 @@
 <script th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
 <script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
 <script th:src="@{/ruoyi/js/ry-ui.js?v=4.0.0}"></script>
+<script th:src="@{/ruoyi/js/common.js?v=4.0.0}"></script>
 <script th:src="@{/ruoyi/index.js}"></script>
 <script th:src="@{/ajax/libs/fullscreen/jquery.fullscreen.js}"></script>
-<script th:inline="javascript"> 
+<script th:inline="javascript">
 var ctx = [[@{/}]];
-/*用户管理-重置密码*/
+var skin = storage.get("skin");
+// 本地主题优先,未设置取系统配置
+if($.common.isNotEmpty(skin)){
+	$("body").addClass(skin.split('|')[0]);
+	$("body").addClass(skin.split('|')[1]);
+} else {
+	var sideTheme = [[${@config.getKey('sys.index.sideTheme')}]];
+	var skinName = [[${@config.getKey('sys.index.skinName')}]];
+	$("body").addClass(sideTheme);
+	$("body").addClass(skinName);
+}
+
+/* 用户管理-重置密码 */
 function resetPwd() {
     var url = ctx + 'system/user/profile/resetPwd';
     $.modal.open("重置密码", url, '800', '500');
 }
+/* 切换主题 */
+function switchSkin() {
+    layer.open({
+		type : 2,
+		shadeClose : true,
+		title : "切换主题",
+		area : ["530px", "386px"],
+		content : [ctx + "system/switchSkin", 'no']
+	})
+}
 </script>
 </body>
 </html>

+ 146 - 0
ruoyi-admin/src/main/resources/templates/skin.html

@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
+<head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="renderer" content="webkit">
+    <title>主题选择</title>
+    <!--[if lt IE 9]>
+    <meta http-equiv="refresh" content="0;ie.html"/>
+    <![endif]-->
+    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{favicon.ico}"/>
+    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
+    <link th:href="@{/css/style.css}" rel="stylesheet"/>
+    <style type="text/css">
+		.list-unstyled{margin:10px;}
+		.full-opacity-hover{opacity:1;filter:alpha(opacity=1);border:1px solid #fff}
+		.full-opacity-hover:hover{border:1px solid #f00;}
+	</style>
+</head>
+<body class="gray-bg">
+<ul class="list-unstyled clearfix">
+	<li style="float:left; width: 33.33333%; padding: 5px;">
+		<a href="javascript:" data-skin="skin-blue|theme-dark" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+			<span style="width: 20%; float: left; height: 13px; background: #367fa9"></span>
+			<span style="width: 80%; float: left; height: 13px; background: #3c8dbc"></span>
+			<span style="width: 20%; float: left; height: 30px; background: #2f4050"></span>
+			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
+		</a>
+		<p class="text-center">蓝</p>
+	</li>
+	
+	<li style="float:left; width: 33.33333%; padding: 5px;">
+		<a href="javascript:" data-skin="skin-green|theme-dark" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+			<span style="width: 20%; float: left; height: 13px; background: #008d4c"></span>
+			<span style="width: 80%; float: left; height: 13px; background: #00a65a"></span>
+			<span style="width: 20%; float: left; height: 30px; background: #222d32"></span>
+			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
+		</a>
+		<p class="text-center">绿</p>
+	</li>
+	
+	<li style="float:left; width: 33.33333%; padding: 5px;">
+		<a href="javascript:" data-skin="skin-purple|theme-dark" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+			<span style="width: 20%; float: left; height: 13px; background: #555299"></span>
+			<span style="width: 80%; float: left; height: 13px; background: #605ca8"></span>
+			<span style="width: 20%; float: left; height: 30px; background: #222d32"></span>
+			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
+		</a>
+		<p class="text-center">紫</p>
+	</li>
+	
+	<li style="float:left; width: 33.33333%; padding: 5px;">
+		<a href="javascript:" data-skin="skin-red|theme-dark" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+			<span style="width: 20%; float: left; height: 13px; background: #dd4b39"></span>
+			<span style="width: 80%; float: left; height: 13px; background: #d73925"></span>
+			<span style="width: 20%; float: left; height: 30px; background: #222d32"></span>
+			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
+		</a>
+		<p class="text-center">红</p>
+	</li>
+	
+	<li style="float:left; width: 33.33333%; padding: 5px;">
+		<a href="javascript:" data-skin="skin-yellow|theme-dark" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+			<span style="width: 20%; float: left; height: 13px; background: #f39c12"></span>
+			<span style="width: 80%; float: left; height: 13px; background: #e08e0b"></span>
+			<span style="width: 20%; float: left; height: 30px; background: #222d32"></span>
+			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
+		</a>
+		<p class="text-center">黄</p>
+	</li>
+	
+	<li style="float:left; width: 33.33333%; padding: 5px;">
+		<a href="javascript:" data-skin="skin-blue|theme-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+			<span style="width: 20%; float: left; height: 13px; background: #367fa9"></span>
+			<span style="width: 80%; float: left; height: 13px; background: #3c8dbc"></span>
+			<span style="width: 20%; float: left; height: 30px; background: #f9fafc"></span>
+			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
+		</a>
+		<p class="text-center">蓝灰</p>
+	</li>
+	
+	<li style="float:left; width: 33.33333%; padding: 5px;">
+		<a href="javascript:" data-skin="skin-green|theme-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+			<span style="width: 20%; float: left; height: 13px; background: #008d4c"></span>
+			<span style="width: 80%; float: left; height: 13px; background: #00a65a"></span>
+			<span style="width: 20%; float: left; height: 30px; background: #f9fafc"></span>
+			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
+		</a>
+		<p class="text-center">绿灰</p>
+	</li>
+	
+	<li style="float:left; width: 33.33333%; padding: 5px;">
+		<a href="javascript:" data-skin="skin-purple|theme-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+			<span style="width: 20%; float: left; height: 13px; background: #555299"></span>
+			<span style="width: 80%; float: left; height: 13px; background: #605ca8"></span>
+			<span style="width: 20%; float: left; height: 30px; background: #f9fafc"></span>
+			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
+		</a>
+		<p class="text-center">紫灰</p>
+	</li>
+	
+	<li style="float:left; width: 33.33333%; padding: 5px;">
+		<a href="javascript:" data-skin="skin-red|theme-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+			<span style="width: 20%; float: left; height: 13px; background: #dd4b39"></span>
+			<span style="width: 80%; float: left; height: 13px; background: #d73925"></span>
+			<span style="width: 20%; float: left; height: 30px; background: #f9fafc"></span>
+			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
+		</a>
+		<p class="text-center">红灰</p>
+	</li>
+	
+	<li style="float:left; width: 33.33333%; padding: 5px;">
+		<a href="javascript:" data-skin="skin-yellow|theme-light" style="display: block; box-shadow: 0 0 3px rgba(0,0,0,0.4)" class="clearfix full-opacity-hover">
+			<span style="width: 20%; float: left; height: 13px; background: #f39c12"></span>
+			<span style="width: 80%; float: left; height: 13px; background: #e08e0b"></span>
+			<span style="width: 20%; float: left; height: 30px; background: #f9fafc"></span>
+			<span style="width: 80%; float: left; height: 30px; background: #f4f5f7"></span>
+		</a>
+		<p class="text-center">黄灰</p>
+	</li>
+</ul>
+</body>
+<script th:src="@{/js/jquery.min.js}"></script>
+<script th:src="@{/ruoyi/js/common.js?v=4.0.0}"></script>
+<script type="text/javascript">
+//皮肤样式列表
+var skins = ["skin-blue", "skin-green", "skin-purple", "skin-red", "skin-yellow"];
+
+// 主题样式列表
+var themes = ["theme-dark", "theme-light"];
+
+$("[data-skin]").on('click',
+function(e) {
+    var skin = $(this).data('skin');
+    $.each(skins, function(i) {
+        parent.$("body").removeClass(skins[i]);
+    });
+    $.each(themes, function(i) {
+        parent.$("body").removeClass(themes[i]);
+    });
+    parent.$("body").addClass(skin.split('|')[0]);
+    parent.$("body").addClass(skin.split('|')[1]);
+    storage.set('skin', skin);
+});
+</script>
+</html>