From f61e8f1d82f038c2d9bcfcb11b99c68592cf7f48 Mon Sep 17 00:00:00 2001
From: "yang,yong" <530521314@qq.com>
Date: Sat, 16 Jan 2021 22:48:49 +0800
Subject: [PATCH] =?UTF-8?q?=E8=81=94=E5=8A=A8=E6=9B=B4=E6=94=B9iframe?=
=?UTF-8?q?=E5=86=85=E9=83=A8=E4=B8=BB=E9=A2=98=E8=89=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
component/pear/modules/admin.js | 75 ++++++--------------------
component/pear/modules/theme.js | 96 +++++++++++++++++++++++++++++++++
component/pear/pear.all.js | 5 +-
component/pear/pear.js | 6 ++-
view/console/console1.html | 2 +
5 files changed, 123 insertions(+), 61 deletions(-)
create mode 100644 component/pear/modules/theme.js
diff --git a/component/pear/modules/admin.js b/component/pear/modules/admin.js
index 5c22c14..13e2879 100644
--- a/component/pear/modules/admin.js
+++ b/component/pear/modules/admin.js
@@ -1,4 +1,4 @@
-layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame'],
+layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame', 'theme'],
function(exports) {
"use strict";
@@ -8,7 +8,8 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame
yaml = layui.yaml,
pearTab = layui.tab,
pearMenu = layui.menu,
- pearFrame = layui.frame;
+ pearFrame = layui.frame,
+ pearTheme = layui.theme;
let bodyFrame;
let sideMenu;
@@ -167,8 +168,16 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame
$(".setting").remove();
}
const colorId = localStorage.getItem("theme-color");
+ const currentColor = getColorById(colorId);
+ localStorage.setItem("theme-color", currentColor.id);
+ localStorage.setItem("theme-color-context", currentColor.color);
+ var themeConfig = {
+ allowCustom: option.theme.allowCustom,
+ defaultColor: option.theme.defaultColor,
+ autoHead: option.other.autoHead,
+ }
+ pearTheme.changeTheme(window, themeConfig);
let menu = localStorage.getItem("theme-menu");
- const color = getColorById(colorId);
if (menu === "null") {
menu = option.theme.defaultMenu;
} else {
@@ -176,10 +185,7 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame
menu = option.theme.defaultMenu;
}
}
- localStorage.setItem("theme-color", color.id);
localStorage.setItem("theme-menu", menu);
- localStorage.setItem("theme-color-context",color.color);
- this.colorSet(color.color);
this.menuSkin(menu);
}
@@ -189,56 +195,6 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame
pearAdmin.removeClass("dark-theme");
pearAdmin.addClass(theme);
}
-
- this.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 += '.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 += '#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 += '.pear-social-entrance {background-color:' + color + '!important}';
- style += '.pear-admin .pe-collaspe {background-color:' + color + '!important}';
- if(config.other.autoHead){
- style += '.pear-admin .layui-header{background-color:' + color + '!important;}.pear-admin .layui-header .layui-nav .layui-nav-item>a{color:white!important;}';
- }
- $("#pearadmin-bg-color").html(style);
- }
};
function collaspe() {
@@ -378,9 +334,10 @@ layui.define(['table', 'jquery', 'element', 'yaml','form', 'tab', 'menu', 'frame
$(".select-color-item").removeClass("layui-icon").removeClass("layui-icon-ok");
$(this).addClass("layui-icon").addClass("layui-icon-ok");
const colorId = $(".select-color-item.layui-icon-ok").attr("color-id");
- localStorage.setItem("theme-color", colorId);
- const color = getColorById(colorId);
- pearAdmin.colorSet(color.color);
+ const currentColor = getColorById(colorId);
+ localStorage.setItem("theme-color", currentColor.id);
+ localStorage.setItem("theme-color-context", currentColor.color);
+ pearTheme.changeTheme(window);
});
function applyConfig(param) {
diff --git a/component/pear/modules/theme.js b/component/pear/modules/theme.js
new file mode 100644
index 0000000..b3291e7
--- /dev/null
+++ b/component/pear/modules/theme.js
@@ -0,0 +1,96 @@
+layui.define(["jquery","layer"], function (exports) {
+ var MOD_NAME = 'theme',
+ $ = layui.jquery;
+
+ var theme = {};
+ theme.config = {
+ allowCustom : false,
+ defaultColor : {},
+ autoHead : false
+ };
+
+ theme.changeTheme = function (target,themeConfig) {
+ if(themeConfig == undefined){
+ themeConfig = this.config;
+ }
+
+ this.themeRender(themeConfig);
+
+ if (target.frames.length == 0) return;
+
+ for (var i = 0; i < target.frames.length; i++) {
+ try {
+ if(target.frames[i].layui == undefined) continue;
+ target.frames[i].layui.theme.changeTheme(target.frames[i], themeConfig);
+ }
+ catch (error) {
+ console.log(error);
+ }
+ }
+ }
+
+ theme.themeRender = function (themeConfig) {
+ this.config = themeConfig;
+ const color = localStorage.getItem("theme-color-context");
+ this.colorSet(color);
+ }
+
+ 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 += '.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 += '#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 += '.pear-social-entrance {background-color:' + color + '!important}';
+ style += '.pear-admin .pe-collaspe {background-color:' + color + '!important}';
+ if(this.config.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);
+ }
+
+ theme.changeAll = function () {
+ console.log("change theme123");
+ }
+
+ exports(MOD_NAME, theme);
+});
\ No newline at end of file
diff --git a/component/pear/pear.all.js b/component/pear/pear.all.js
index 5283ab7..4993b2d 100644
--- a/component/pear/pear.all.js
+++ b/component/pear/pear.all.js
@@ -42,5 +42,8 @@ layui.config({
convert:"convert", // 数据转换
yaml:"yaml", // yaml 解析组件
context: "context", // 上下文组件
- http: "http" // ajax请求组件
+ http: "http", // ajax请求组件
+ theme: "theme" // 主题转换
+}).use(['layer', 'theme'], function () {
+ var pearTheme = layui.theme;
});
\ No newline at end of file
diff --git a/component/pear/pear.js b/component/pear/pear.js
index 5283ab7..9e11f86 100644
--- a/component/pear/pear.js
+++ b/component/pear/pear.js
@@ -42,5 +42,9 @@ layui.config({
convert:"convert", // 数据转换
yaml:"yaml", // yaml 解析组件
context: "context", // 上下文组件
- http: "http" // ajax请求组件
+ http: "http", // ajax请求组件
+ theme: "theme" // 主题转换
+}).use(['layer', 'theme'], function () {
+ var pearTheme = layui.theme;
+ pearTheme.changeAll();
});
\ No newline at end of file
diff --git a/view/console/console1.html b/view/console/console1.html
index 8a851c4..5a99487 100644
--- a/view/console/console1.html
+++ b/view/console/console1.html
@@ -8,6 +8,8 @@
+
+