From 8da4df34955691cbebf74e117c853c86ae3840ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com> Date: Sun, 17 Jan 2021 21:43:58 +0800 Subject: [PATCH] global theme --- admin/data/menu.json | 7 ++++ component/pear/modules/admin.js | 4 +-- component/pear/modules/theme.js | 64 +++++++++++---------------------- component/pear/modules/yaml.js | 2 -- component/pear/pear.all.js | 6 ++-- component/pear/pear.js | 6 ++-- index.html | 6 ++-- view/system/theme.html | 50 ++++++++++++++++++++++++++ view/system/user.html | 3 -- 9 files changed, 87 insertions(+), 61 deletions(-) create mode 100644 view/system/theme.html diff --git a/admin/data/menu.json b/admin/data/menu.json index e02e1a9..07349e4 100644 --- a/admin/data/menu.json +++ b/admin/data/menu.json @@ -25,6 +25,13 @@ "type": 1, "openType": "_iframe", "href": "http://www.baidu.com" + }, { + "id": 15, + "title": "主题预览", + "icon": "layui-icon layui-icon-console", + "type": 1, + "openType": "_iframe", + "href": "view/system/theme.html" }] }, { diff --git a/component/pear/modules/admin.js b/component/pear/modules/admin.js index aae18e9..bbf0028 100644 --- a/component/pear/modules/admin.js +++ b/component/pear/modules/admin.js @@ -171,7 +171,7 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame const currentColor = getColorById(colorId); localStorage.setItem("theme-color", currentColor.id); localStorage.setItem("theme-color-context", currentColor.color); - pearTheme.changeTheme(window, option.theme.autoHead); + pearTheme.changeTheme(window, option.other.autoHead); let menu = localStorage.getItem("theme-menu"); if (menu === "null") { menu = option.theme.defaultMenu; @@ -332,7 +332,7 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame const currentColor = getColorById(colorId); localStorage.setItem("theme-color", currentColor.id); localStorage.setItem("theme-color-context", currentColor.color); - pearTheme.changeTheme(window, config.theme.autoHead); + pearTheme.changeTheme(window, config.other.autoHead); }); function applyConfig(param) { diff --git a/component/pear/modules/theme.js b/component/pear/modules/theme.js index 211a14d..dd41b7f 100644 --- a/component/pear/modules/theme.js +++ b/component/pear/modules/theme.js @@ -7,12 +7,9 @@ layui.define(["jquery","layer"], function (exports) { theme.changeTheme = function (target, autoHead) { this.autoHead = autoHead; - const color = localStorage.getItem("theme-color-context"); this.colorSet(color); - if (target.frames.length == 0) return; - for (var i = 0; i < target.frames.length; i++) { try { if(target.frames[i].layui == undefined) continue; @@ -25,56 +22,35 @@ layui.define(["jquery","layer"], function (exports) { } theme.colorSet = function(color) { - + let style = ''; - // 自 定 义 菜 单 配 色 - style += - '.light-theme .pear-nav-tree .layui-this a:hover,.light-theme .pear-nav-tree .layui-this,.light-theme .pear-nav-tree .layui-this a,.pear-nav-tree .layui-this a,.pear-nav-tree .layui-this{background-color: ' + - color + '!important;}'; - - // 自定义 Logo 标题演示 - style += - '.pear-admin .layui-logo .title{color:' + - color + '!important;}'; - - // 自 定 义 标 签 配 色 - style += '.pear-frame-title .dot,.pear-tab .layui-this .pear-tab-active{background-color: ' + color + - '!important;}'; - - // 自 定 义 快 捷 菜 单 - style += '.bottom-nav li a:hover{background-color:' + - color + '!important;}'; - - // 自 定 义 顶 部 配 色 + style += '.light-theme .pear-nav-tree .layui-this a:hover,.light-theme .pear-nav-tree .layui-this,.light-theme .pear-nav-tree .layui-this a,.pear-nav-tree .layui-this a,.pear-nav-tree .layui-this{background-color: ' +color + '!important;}'; + style += '.pear-admin .layui-logo .title{color:' + color + '!important;}'; + style += '.pear-frame-title .dot,.pear-tab .layui-this .pear-tab-active{background-color: ' + color +'!important;}'; + style += '.bottom-nav li a:hover{background-color:' + color + '!important;}'; style += '.pear-admin .layui-header .layui-nav .layui-nav-bar{background-color: ' + color + '!important;}' - - // 自 定 义 加 载 配 色 style += '.ball-loader>span,.signal-loader>span {background-color: ' + color + '!important;}'; - - // 自 定 义 顶 部 配 色 - style += '.layui-header .layui-nav-child .layui-this a{background-color:' + color + - '!important;color:white!important;}'; - - // 自 定 义 加 载 配 色 + style += '.layui-header .layui-nav-child .layui-this a{background-color:' + color +'!important;color:white!important;}'; style += '#preloader{background-color:' + color + '!important;}'; - - // 自 定 义 样 式 选 择 边 框 配 色 - style += - '.pearone-color .color-content li.layui-this:after, .pearone-color .color-content li:hover:after {border: ' + - color + ' 3px solid!important;}'; - - style += '.layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this{background-color:' + color + - '!important}'; - + style += '.pearone-color .color-content li.layui-this:after, .pearone-color .color-content li:hover:after {border: ' +color + ' 3px solid!important;}'; + style += '.layui-nav .layui-nav-child dd.layui-this a, .layui-nav-child dd.layui-this{background-color:' + color + '!important}'; style += '.pear-social-entrance {background-color:' + color + '!important}'; style += '.pear-admin .pe-collaspe {background-color:' + color + '!important}'; + style += '.layui-fixbar li {background-color:' + color + '!important}'; if(this.autoHead){ style += '.pear-admin .layui-header{background-color:' + color + '!important;}.pear-admin .layui-header .layui-nav .layui-nav-item>a{color:white!important;}'; } - - style += '.layui-fixbar li {background-color:' + color + '!important}'; - - $("#pearadmin-bg-color").html(style); + style += '.pear-btn.pear-btn-primary {background-color:' + color + '!important}'; + style += '.layui-input:focus,.layui-textarea:focus {border-color: '+ color +'!important;box-shadow: 0 0 0 3px rgba(95, 184, 120, 0.2)!important;}' + style += '.layui-form-checked[lay-skin=primary] i {border-color: '+ color +'!important;background-color: ' + color + ';}' + style += '.layui-form-onswitch { border-color: ' + color + '; background-color: '+color+';}' + style += '.layui-form-radio>i:hover, .layui-form-radioed>i {color: ' + color + ';}' + var colorPane = $("#pear-admin-color"); + if(colorPane.length>0){ + colorPane.html(style); + }else{ + $("head").append("") + } } exports(MOD_NAME, theme); diff --git a/component/pear/modules/yaml.js b/component/pear/modules/yaml.js index c0a5f73..bb448bc 100644 --- a/component/pear/modules/yaml.js +++ b/component/pear/modules/yaml.js @@ -6,11 +6,9 @@ layui.define(['jquery', 'element'], function(exports) { element = layui.element; var yaml = new function() { - this.parse = function(str){ return YAML.parse(yamlString); } - this.load = function(path){ return YAML.load(path); } diff --git a/component/pear/pear.all.js b/component/pear/pear.all.js index 8d38597..961353e 100644 --- a/component/pear/pear.all.js +++ b/component/pear/pear.all.js @@ -11,7 +11,7 @@ window.rootPath = (function(src) { * */ layui.config({ base: rootPath + "modules/", - version: "3.4.1.Release" + version: "3.4.2.Release" }).extend({ admin: "admin", // 框架布局组件 menu: "menu", // 数据菜单组件 @@ -45,6 +45,6 @@ layui.config({ http: "http", // ajax请求组件 theme: "theme" // 主题转换 }).use(['layer', 'theme'], function () { - var pearTheme = layui.theme; - pearTheme.changeTheme(window, false); + + layui.theme.changeTheme(window, false); }); \ No newline at end of file diff --git a/component/pear/pear.js b/component/pear/pear.js index 8d38597..961353e 100644 --- a/component/pear/pear.js +++ b/component/pear/pear.js @@ -11,7 +11,7 @@ window.rootPath = (function(src) { * */ layui.config({ base: rootPath + "modules/", - version: "3.4.1.Release" + version: "3.4.2.Release" }).extend({ admin: "admin", // 框架布局组件 menu: "menu", // 数据菜单组件 @@ -45,6 +45,6 @@ layui.config({ http: "http", // ajax请求组件 theme: "theme" // 主题转换 }).use(['layer', 'theme'], function () { - var pearTheme = layui.theme; - pearTheme.changeTheme(window, false); + + layui.theme.changeTheme(window, false); }); \ No newline at end of file diff --git a/index.html b/index.html index c7d8aac..21e3ca7 100644 --- a/index.html +++ b/index.html @@ -10,9 +10,6 @@ - - - @@ -86,8 +83,9 @@ var image = new Image(); image.src = "admin/images/avatar.jpg"; image.onload = function(){ - $(".layui-nav-img").attr("src", convert.imageToBase64(image)); + $(".layui-nav-img").attr("src", convert.imageToBase64(image)); } + // 框架初始化时会读取 根目录下 pear.config.yml 文件作为初始化配置 // 你可以通过 admin.setConfigPath 方法修改配置文件位置 // 你可以通过 admin.setConfigType 方法修改配置文件类型 diff --git a/view/system/theme.html b/view/system/theme.html new file mode 100644 index 0000000..2a2f294 --- /dev/null +++ b/view/system/theme.html @@ -0,0 +1,50 @@ + + + + + + + + +
+
+
+ +
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
复选框
+
+
+ + + + +
+
+
+ + + + + diff --git a/view/system/user.html b/view/system/user.html index a7813a2..38288ea 100644 --- a/view/system/user.html +++ b/view/system/user.html @@ -4,9 +4,6 @@ 用户管理 -