Home Explore Help
Register Sign In
root
/
gs_bg
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

支持在线切换主题

RuoYi 5 years ago
parent
dd57a4fb1a
commit
01f40d91ec
4 changed files with 214 additions and 13 deletions
Split View Show Diff Stats
  1. 7 0
      ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysIndexController.java
  2. 30 9
      ruoyi-admin/src/main/resources/static/ruoyi/js/common.js
  3. 31 4
      ruoyi-admin/src/main/resources/templates/index.html
  4. 146 0
      ruoyi-admin/src/main/resources/templates/skin.html

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

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

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

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

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