Update welcome.html

- Add functionality to change the main theme color dynamically
- Update CSS to use a custom property for the main theme color
- Modify JavaScript to set the main theme color based on user preference Adjust form select styles to match the new theme color

app/admin/view/index/index.html

@@ -91,8 +91,8 @@
         <div class="layuimini-site-mobile"><i class="layui-icon"></i></div>
 
         <div class="layui-body">
-            <div class="layuimini-tab layui-tab-rollTool layui-tab" lay-filter="layuiminiTab" lay-allowclose="true">
-                <ul class="layui-tab-title">
+            <div class="layuimini-tab layui-tabs-rollTool layui-tabs" lay-filter="layuiminiTab" id="layuiminiTab">
+                <ul class="layui-tabs-header">
                     <li class="layui-this" id="layuiminiHomeTabId" lay-id=""></li>
                 </ul>
                 <div class="layui-tab-control">
@@ -111,8 +111,8 @@
                         </ul>
                     </li>
                 </div>
-                <div class="layui-tab-content">
-                    <div id="layuiminiHomeTabIframe" class="layui-tab-item layui-show"></div>
+                <div class="layui-tabs-body">
+                    <div id="layuiminiHomeTabIframe" class="layui-tab-item layui-tabs-item layui-show"></div>
                 </div>
             </div>
         </div>

app/admin/view/index/welcome.html

@@ -16,8 +16,8 @@
                                                     <span class="layui-badge layui-bg-cyan pull-right ">实时</span>
                                                     <div class="panel-content">
                                                         <h5>用户统计</h5>
-                                                        <h1>1234</h1>
-                                                        <h6>当前分类总记录数</h6>
+                                                        <h2>1234</h2>
+                                                        <h6>记录数</h6>
                                                     </div>
                                                 </div>
                                             </div>
@@ -28,8 +28,8 @@
                                                     <span class="layui-badge layui-bg-purple pull-right ">实时</span>
                                                     <div class="panel-content">
                                                         <h5>商品统计</h5>
-                                                        <h1>1234</h1>
-                                                        <h6>当前分类总记录数</h6>
+                                                        <h2>1234</h2>
+                                                        <h6>记录数</h6>
                                                     </div>
                                                 </div>
                                             </div>
@@ -40,8 +40,8 @@
                                                     <span class="layui-badge layui-bg-orange pull-right ">实时</span>
                                                     <div class="panel-content">
                                                         <h5>浏览统计</h5>
-                                                        <h1>1234</h1>
-                                                        <h6>当前分类总记录数</h6>
+                                                        <h2>1234</h2>
+                                                        <h6>记录数</h6>
                                                     </div>
                                                 </div>
                                             </div>
@@ -52,8 +52,8 @@
                                                     <span class="layui-badge layui-bg-red pull-right ">实时</span>
                                                     <div class="panel-content">
                                                         <h5>订单统计</h5>
-                                                        <h1>1234</h1>
-                                                        <h6>当前分类总记录数</h6>
+                                                        <h2>1234</h2>
+                                                        <h6>记录数</h6>
                                                     </div>
                                                 </div>
                                             </div>
@@ -199,7 +199,7 @@
                     <div class="layui-card-header"><i class="fa fa-paper-plane-o icon"></i>作者心语</div>
                     <div class="layui-card-body layui-text">
                         <p>
-                            本模板基于layui2.9.x以及font-awesome-4.7.0进行实现。
+                            本模板基于layui2.x以及font-awesome-4.7.0进行实现。
                             <a class="layui-btn layui-btn-xs layui-btn-danger" style="vertical-align: baseline;" target="_blank" href="http://layui.dev/docs">layui文档</a>
                         </p>
                         <hr>

public/static/admin/css/public.css

@@ -4,6 +4,10 @@
 @import url("../css/themes/index.css");
 @import url("../css/iconfont.css");
 
+:root {
+    --ea8-theme-main-color: #16b777;
+}
+
 html,
 body {
     font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
@@ -304,9 +308,17 @@ table样式
 }
 
 .layui-form-select dl {
-    border: 1px #16b777 solid;
+    border: 1px var(--ea8-theme-main-color) solid;
     border-top: none;
     z-index: 99999;
+    padding: 0;
+    border-radius: 0;
+}
+
+.layui-form-select dl dd.layui-this {
+    background-color: var(--ea8-theme-main-color);
+    border-top: none;
+    color: #ffffff;
 }
 
 .form-search .layui-form-select dl {
@@ -517,4 +529,12 @@ table样式
 .wangEditor_div {
     z-index: 99999;
     border: 1px solid var(--w-e-textarea-slight-border-color);
+}
+
+.layui-input:focus, .layui-textarea:focus {
+    border-color: var(--ea8-theme-main-color) !important;
+}
+
+.layui-tabs-item {
+    height: 100%;
 }

public/static/admin/js/system/node.js

@@ -49,7 +49,11 @@ define(["jquery", "easy-admin"], function ($, ea) {
                     }
                     ]],
                 cols: [[
-                    {field: 'node', minWidth: 200, align: 'left', title: '系统节点'},
+                    {
+                        field: 'node', minWidth: 200, align: 'left', title: '系统节点', templet: function (d) {
+                            return `<span>${d.node}</span>`;
+                        }
+                    },
                     {field: 'title', minWidth: 80, title: '节点名称 <i class="table-edit-tips color-red">*</i>', edit: 'text'},
                     {field: 'update_time', minWidth: 80, title: '更新时间', search: 'range'},
                     {field: 'is_auth', title: '节点控制', width: 85, search: 'select', selectList: {0: '禁用', 1: '启用'}, templet: ea.table.switch},

public/static/plugs/easy-admin/easy-admin.js

@@ -8,6 +8,7 @@ define(["jquery", "tableSelect", "miniTheme", "xmSelect", "lazyload"], function
                 iframe.contentWindow.onInitElemStyle();
             }
         });
+        miniTheme.changeThemeMainColor();
     };
     window.onInitElemStyle();
 

public/static/plugs/lay-module/layuimini/layuimini.css

@@ -123,43 +123,47 @@
 
 /**tab选项卡 */
 .layuimini-tab {
-    margin: 0px;
+    margin: 0;
     overflow: hidden;
     height: 100% !important;
 }
 
-.layuimini-tab .layui-tab-content {
+.layuimini-tab .layui-tabs-scroll {
+    position: marker;
+}
+
+.layuimini-tab .layui-tabs-body {
     height: calc(100% - 37px) !important;
 }
 
-.layuimini-tab .layui-tab-content .layui-tab-item {
+.layuimini-tab .layui-tabs-body .layui-tabs-item {
     height: 100%;
 }
 
-.layuimini-tab .layui-tab-content {
-    padding: 0px;
+.layuimini-tab .layui-tabs-body {
+    padding: 0;
 }
 
-.layuimini-tab .layui-tab-title {
+.layuimini-tab .layui-tabs-header {
     border: none;
     border: 1px solid whitesmoke;
     background-color: white;
 }
 
-.layuimini-tab .layui-tab-title li {
+.layuimini-tab .layui-tabs-header li {
     border-right: 1px solid whitesmoke;
     color: dimgray;
 }
 
-.layuimini-tab .layui-tab-title .layui-tab-bar {
+.layuimini-tab .layui-tabs-header .layui-tab-bar {
     display: none;
 }
 
-.layuimini-tab .layui-tab-title .layui-this:after {
+.layuimini-tab .layui-tabs-header .layui-this:after {
     display: none;
 }
 
-.layuimini-tab .layui-tab-title .layuimini-tab-active {
+.layuimini-tab .layui-tabs-header .layuimini-tab-active {
     display: inline-block;
     background-color: lightgray;
     width: 9px;
@@ -168,49 +172,52 @@
     margin-right: 5px;
 }
 
-.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active {
-    background-color: #1aa094;
+.layuimini-tab .layui-tabs-header .layui-this .layuimini-tab-active {
+    background-color: var(--ea8-theme-main-color);
 }
 
-.layuimini-tab > .layui-tab-title, .layuimini-tab > .close-box {
+.layuimini-tab > .layui-tabs-header, .layuimini-tab > .close-box {
     height: 35px !important;
 }
 
-.layuimini-tab > .layui-tab-title li, .layuimini-tab > .close-box li {
+.layuimini-tab > .layui-tabs-header li, .layuimini-tab > .close-box li {
     line-height: 35px !important;
 }
 
-.layuimini-tab .layui-tab-title span {
+.layuimini-tab .layui-tabs-header span {
     color: #acafb1;
 }
 
-.layuimini-tab .layui-tab-title .layui-this span {
+.layuimini-tab .layui-tabs-header .layui-this span {
     color: dimgray;
 }
 
-.layuimini-tab .layui-tab-title .layui-tab-close {
+.layuimini-tab .layui-tabs-header .layui-tab-close {
     font-size: 12px !important;
     width: 14px !important;
     height: 14px !important;
     line-height: 16px !important;
+    margin-left: 5px;
+    padding: 2px;
 }
 
-.layuimini-tab .layui-tab-title .layui-tab-close:hover {
+.layuimini-tab .layui-tabs-header .layui-tab-close:hover {
     border-radius: 4em;
     background: #ff5722;
+    color: #fff;
 }
 
-.layuimini-tab .layui-tab-title .disable-close + .layui-tab-close {
+.layuimini-tab .layui-tabs-header .disable-close + .layui-tab-close {
     display: none;
 }
 
-.layuimini-tab .layui-tab-title .able-close + .layui-tab-close {
+.layuimini-tab .layui-tabs-header .able-close + .layui-tab-close {
     display: inline-block;
 }
 
 .layuimini-tab .layui-tab-control > li {
     position: absolute;
-    top: 0px;
+    top: 0;
     height: 35px;
     line-height: 35px;
     width: 35px;
@@ -221,7 +228,7 @@
 }
 
 .layuimini-tab .layuimini-tab-roll-left {
-    left: 0px;
+    left: 0;
     border-right: whitesmoke 1px solid;
     border-left: whitesmoke 1px solid;
 }
@@ -232,7 +239,7 @@
 }
 
 .layuimini-tab .layui-tab-tool {
-    right: 0px;
+    right: 0;
     border-left: 1px solid whitesmoke;
 }
 
@@ -248,11 +255,11 @@
 }
 
 .layuimini-tab.layui-tab-roll .layui-tab-control .layuimini-tab-roll-right {
-    right: 0px;
+    right: 0;
     border-right: 1px solid whitesmoke;
 }
 
-.layuimini-tab.layui-tab-roll .layui-tab-title {
+.layuimini-tab.layui-tab-roll .layui-tabs-header {
     padding-left: 35px;
     padding-right: 35px;
 }
@@ -262,13 +269,13 @@
     display: block;
 }
 
-.layuimini-tab.layui-tab-tool .layui-tab-title {
-    padding-left: 0px;
+.layuimini-tab.layui-tab-tool .layui-tabs-header {
+    padding-left: 0;
     padding-right: 35px;
 }
 
 
-.layuimini-tab.layui-tab-rollTool .layui-tab-title {
+.layuimini-tab.layui-tab-rollTool .layui-tabs-header {
     padding-left: 35px;
     padding-right: 80px;
 }
@@ -451,7 +458,7 @@
 
 
 /**其它 */
-.layui-tab-item {
+.layui-tabs-item {
     width: 100% !important;
     height: 100% !important;
 }
@@ -466,7 +473,7 @@
 }
 
 .layui-tab {
-    margin: 0 0 0 0;
+    margin: 0;
     z-index: 99999;
 }
 
@@ -640,26 +647,28 @@
     color: #484545;
 }
 
-.layuimini-tab-make{
+.layuimini-tab-make {
     position: absolute;
     top: 36px;
-    bottom: 0px;
+    bottom: 0;
     width: 100%;
-    background: rgb(255, 255, 255,0);
-    padding: 0px;
+    background: rgb(255, 255, 255, 0);
+    padding: 0;
     overflow: hidden;
 }
 
 /**
 菜单缩放
  */
-.popup-tips .layui-layer-TipsG{
+.popup-tips .layui-layer-TipsG {
     display: none;
 }
-.popup-tips.layui-layer-tips .layui-layer-content{
+
+.popup-tips.layui-layer-tips .layui-layer-content {
     padding: 0;
 }
-.popup-tips .layui-nav-tree{
+
+.popup-tips .layui-nav-tree {
     width: 150px;
     border-radius: 10px;
 }
@@ -670,13 +679,13 @@
 }
 
 /**头部菜单字体间距*/
-.layui-layout-admin .layui-header .layuimini-header-menu.layuimini-pc-show,.layui-layout-admin .layui-header .layuimini-header-menu.layuimini-mobile-show {
+.layui-layout-admin .layui-header .layuimini-header-menu.layuimini-pc-show, .layui-layout-admin .layui-header .layuimini-header-menu.layuimini-mobile-show {
     letter-spacing: 1px;
 }
 
 
 /**左侧菜单更多下拉样式*/
-.layuimini-menu-left .layui-nav-more,.layuimini-menu-left-zoom .layui-nav-more {
+.layuimini-menu-left .layui-nav-more, .layuimini-menu-left-zoom .layui-nav-more {
     font-family: layui-icon !important;
     font-size: 12px;
     font-style: normal;
@@ -695,10 +704,11 @@
     margin-top: -6px !important;
 }
 
-.layuimini-menu-left .layui-nav-more:before,.layuimini-menu-left-zoom .layui-nav-more:before {
+.layuimini-menu-left .layui-nav-more:before, .layuimini-menu-left-zoom .layui-nav-more:before {
     content: "\e61a";
 }
-.layuimini-menu-left .layui-nav-itemed > a > .layui-nav-more,.layuimini-menu-left-zoom .layui-nav-itemed > a > .layui-nav-more {
+
+.layuimini-menu-left .layui-nav-itemed > a > .layui-nav-more, .layuimini-menu-left-zoom .layui-nav-itemed > a > .layui-nav-more {
     transform: rotate(180deg);
     -ms-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
@@ -706,10 +716,10 @@
     -o-transform: rotate(180deg);
     width: 12px;
     text-align: center;
-    border-style:none;
+    border-style: none;
 }
 
-.layuimini-menu-left .layui-nav-itemed > a > .layui-nav-more:before,.layuimini-menu-left-zoom .layui-nav-itemed > a > .layui-nav-more:before {
+.layuimini-menu-left .layui-nav-itemed > a > .layui-nav-more:before, .layuimini-menu-left-zoom .layui-nav-itemed > a > .layui-nav-more:before {
     content: '\e61a';
     background-color: transparent;
     display: inline-block;
@@ -717,7 +727,7 @@
 }
 
 /**修复左侧菜单字体不对齐的问题*/
-.layuimini-menu-left .layui-nav-item a .fa,.layuimini-menu-left .layui-nav-item a .layui-icon{
+.layuimini-menu-left .layui-nav-item a .fa, .layuimini-menu-left .layui-nav-item a .layui-icon {
     width: 20px;
 }
 
@@ -773,16 +783,18 @@
         left: 95px !important;
     }
 
-    .layuimini-pc-show{
+    .layuimini-pc-show {
         display: block;
     }
-    .layuimini-mobile-show{
+
+    .layuimini-mobile-show {
         display: none;
     }
 
     /**菜单缩放*/
-    .layuimini-mini .layuimini-menu-left .layui-nav-more,.layuimini-mini .layuimini-menu-left .layui-nav-child{
-        display: none;!important;
+    .layuimini-mini .layuimini-menu-left .layui-nav-more, .layuimini-mini .layuimini-menu-left .layui-nav-child {
+        display: none;
+    !important;
     }
 }
 
@@ -794,29 +806,31 @@
     /**
     todo 修复低版本IOS不能滑动问题, 但还是有问题, 低版本IOS部分情况下子页面无法自适应
     */
-    .layuimini-tab .layui-tab-content .layui-tab-item{
+    .layuimini-tab .layui-tabs-body .layui-tabs-item {
         -webkit-overflow-scrolling: touch;
         overflow: scroll;
-        width:100%;
-        height:100%;
+        width: 100%;
+        height: 100%;
     }
 
-    .layuimini-tab .layui-tab-content .layui-tab-item iframe {
+    .layuimini-tab .layui-tabs-body .layui-tabs-item iframe {
         height: 100%;
         width: 100%;
     }
 
-    .layuimini-pc-show{
+    .layuimini-pc-show {
         display: none;
     }
-    .layuimini-mobile-show{
+
+    .layuimini-mobile-show {
         display: block;
     }
+
     .layuimini-header-content {
         left: 0;
     }
 
-    .layui-layout-admin .layui-body .layui-tab-item.layui-show {
+    .layui-layout-admin .layui-body .layui-tabs-item.layui-show {
         border-top: 1px solid #e2e2e2;
     }
 
@@ -854,7 +868,7 @@
     }
 
     .layuimini-mini .layui-layout-admin .layui-body {
-        left: 0!important;
+        left: 0 !important;
         transition: left .2s;
         top: 0;
         z-index: 998;
@@ -905,7 +919,7 @@
     }
 }
 
-@media screen and (max-width: 550px){
+@media screen and (max-width: 550px) {
 
     /**头部右侧数据*/
     .layuimini-multi-module.layuimini-mini .layuimini-header-content .layui-layout-right {

public/static/plugs/lay-module/layuimini/miniTab.js

@@ -6,6 +6,7 @@
  */
 define(["jquery"], function ($) {
     var element = layui.element,
+        tabs = layui.tabs,
         $ = layui.$;
 
 
@@ -44,15 +45,14 @@ define(["jquery"], function ($) {
             options.title = options.title || null;
             options.isIframe = options.isIframe || false;
             options.maxTabNum = options.maxTabNum || 20;
-            if ($(".layuimini-tab .layui-tab-title li").length >= options.maxTabNum) {
+            if ($(".layuimini-tab .layui-tabs-header li").length >= options.maxTabNum) {
                 layer.msg('Tab窗口已达到限定数量，请先关闭部分Tab');
                 return false;
             }
-            var ele = element;
-            if (options.isIframe) ele = parent.layui.element;
-            ele.tabAdd('layuiminiTab', {
-                title: '<span class="layuimini-tab-active"></span><span>' + options.title + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>' //用于演示
-                , content: '<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0"   src="' + options.href + '"></iframe>'
+            if (options.isIframe) tabs = parent.layui.tabs;
+            tabs.add('layuiminiTab', {
+                title: `<span class="layuimini-tab-active"></span><span>${options.title}</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>`
+                , content: `<iframe width="100%" height="100%" frameborder="no" border="0" src="${options.href}" style="width: 100%; height:100%;"></iframe>`
                 , id: options.tabId
             });
             $('.layuimini-menu-left').attr('layuimini-tab-tag', 'add');
@@ -65,7 +65,7 @@ define(["jquery"], function ($) {
          * @param tabId
          */
         change: function (tabId) {
-            element.tabChange('layuiminiTab', tabId);
+            tabs.change('layuiminiTab', tabId);
         },
 
         /**
@@ -74,13 +74,10 @@ define(["jquery"], function ($) {
          * @param isParent
          */
         delete: function (tabId, isParent) {
-            // todo 未知BUG，不知道是不是layui问题，必须先删除元素
-            $(".layuimini-tab .layui-tab-title .layui-unselect.layui-tab-bar").remove();
-
             if (isParent === true) {
-                parent.layui.element.tabDelete('layuiminiTab', tabId);
+                parent.layui.tabs.close('layuiminiTab', tabId);
             } else {
-                element.tabDelete('layuiminiTab', tabId);
+                tabs.close('layuiminiTab', tabId);
             }
         },
 
@@ -101,7 +98,7 @@ define(["jquery"], function ($) {
                     isIframe: true,
                 });
             }
-            parent.layui.element.tabChange('layuiminiTab', options.href);
+            parent.layui.tabs.change('layuiminiTab', options.href);
             parent.layer.close(loading);
         },
 
@@ -109,7 +106,7 @@ define(["jquery"], function ($) {
          * 在iframe层关闭当前tab方法
          */
         deleteCurrentByIframe: function () {
-            var ele = $(".layuimini-tab .layui-tab-title li.layui-this", parent.document);
+            var ele = $(".layuimini-tab .layui-tabs-header li.layui-this", parent.document);
             if (ele.length > 0) {
                 var layId = $(ele[0]).attr('lay-id');
                 miniTab.delete(layId, true);
@@ -123,14 +120,14 @@ define(["jquery"], function ($) {
             // 判断选项卡上是否有
             var checkTab = false;
             if (isIframe === undefined || isIframe === false) {
-                $(".layui-tab-title li").each(function () {
+                $(".layui-tabs-header li").each(function () {
                     var checkTabId = $(this).attr('lay-id');
                     if (checkTabId != null && checkTabId === tabId) {
                         checkTab = true;
                     }
                 });
             } else {
-                parent.layui.$(".layui-tab-title li").each(function () {
+                parent.layui.$(".layui-tabs-header li").each(function () {
                     var checkTabId = $(this).attr('lay-id');
                     if (checkTabId != null && checkTabId === tabId) {
                         checkTab = true;
@@ -155,7 +152,7 @@ define(["jquery"], function ($) {
                 '</dl>\n' +
                 '</div>';
             var makeHtml = '<div class="layuimini-tab-make"></div>';
-            $('.layuimini-tab .layui-tab-title').after(menuHtml);
+            $('.layuimini-tab .layui-tabs-header').after(menuHtml);
             $('.layuimini-tab .layui-tab-content').after(makeHtml);
         },
 
@@ -233,7 +230,7 @@ define(["jquery"], function ($) {
                         maxTabNum: options.maxTabNum,
                     });
                 }
-                element.tabChange('layuiminiTab', tabId);
+                tabs.change('layuiminiTab', tabId);
                 layer.close(loading);
             });
 
@@ -262,14 +259,14 @@ define(["jquery"], function ($) {
                         maxTabNum: options.maxTabNum,
                     });
                 }
-                parent.layui.element.tabChange('layuiminiTab', tabId);
+                parent.layui.tabs.change('layuiminiTab', tabId);
                 parent.layer.close(loading);
             });
 
             /**
              * 关闭选项卡
              **/
-            $('body').on('click', '.layuimini-tab .layui-tab-title .layui-tab-close', function () {
+            $('body').on('click', '.layuimini-tab .layui-tabs-header .layui-tab-close', function () {
                 var loading = layer.load(0, {shade: false, time: 2 * 1000});
                 var $parent = $(this).parent();
                 var tabId = $parent.attr('lay-id');
@@ -285,7 +282,7 @@ define(["jquery"], function ($) {
             $('body').on('click', '[layuimini-tab-close]', function () {
                 var loading = layer.load(0, {shade: false, time: 2 * 1000});
                 var closeType = $(this).attr('layuimini-tab-close');
-                $(".layuimini-tab .layui-tab-title li").each(function () {
+                $(".layuimini-tab .layui-tabs-header li").each(function () {
                     var tabId = $(this).attr('lay-id');
                     var id = $(this).attr('id');
                     var isCurrent = $(this).hasClass('layui-this');
@@ -307,7 +304,7 @@ define(["jquery"], function ($) {
             /**
              * 禁用网页右键
              */
-            $(".layuimini-tab .layui-tab-title").unbind("mousedown").bind("contextmenu", function (e) {
+            $(".layuimini-tab .layui-tabs-header").unbind("mousedown").bind("contextmenu", function (e) {
                 e.preventDefault();
                 return false;
             });
@@ -315,7 +312,7 @@ define(["jquery"], function ($) {
             /**
              * 注册鼠标右键
              */
-            $('body').on('mousedown', '.layuimini-tab .layui-tab-title li', function (e) {
+            $('body').on('mousedown', '.layuimini-tab .layui-tabs-header li', function (e) {
                 var left = $(this).offset().left - $('.layuimini-tab ').offset().left + ($(this).width() / 2),
                     tabId = $(this).attr('lay-id');
                 if (e.which === 3) {
@@ -337,7 +334,7 @@ define(["jquery"], function ($) {
                 var loading = layer.load(0, {shade: false, time: 2 * 1000});
                 var closeType = $(this).attr('layuimini-tab-menu-close'),
                     currentTabId = $('.layuimini-tab-mousedown').attr('data-tab-id');
-                $(".layuimini-tab .layui-tab-title li").each(function () {
+                $(".layuimini-tab .layui-tabs-header li").each(function () {
                     var tabId = $(this).attr('lay-id');
                     var id = $(this).attr('id');
                     if (id !== 'layuiminiHomeTabId') {
@@ -368,7 +365,7 @@ define(["jquery"], function ($) {
             options.listenSwichCallback = options.listenSwichCallback || function () {
 
             };
-            element.on('tab(' + options.filter + ')', function (data) {
+            tabs.on('afterChange(layuiminiTab)', function (data) {
                 var tabId = $(this).attr('lay-id');
                 if (options.urlHashLocation) {
                     location.hash = tabId;
@@ -403,10 +400,10 @@ define(["jquery"], function ($) {
             options.menuList = options.menuList || [];
             if (!options.urlHashLocation) return false;
             var tabId = location.hash.replace(/^#/, '');
-            if (tabId === null || tabId === undefined || tabId ==='') return false;
+            if (tabId === null || tabId === undefined || tabId === '') return false;
 
             // 判断是否为首页
-            if(tabId ===options.homeInfo.href) return false;
+            if (tabId === options.homeInfo.href) return false;
 
             // 判断是否为右侧菜单
             var menu = miniTab.searchMenu(tabId, options.menuList);
@@ -419,7 +416,7 @@ define(["jquery"], function ($) {
                     maxTabNum: options.maxTabNum,
                 });
                 $('.layuimini-menu-left').attr('layuimini-tab-tag', 'no');
-                element.tabChange('layuiminiTab', tabId);
+                tabs.change('layuiminiTab', tabId);
                 return false;
             }
 
@@ -436,7 +433,7 @@ define(["jquery"], function ($) {
                         maxTabNum: options.maxTabNum,
                     });
                     $('.layuimini-menu-left').attr('layuimini-tab-tag', 'no');
-                    element.tabChange('layuiminiTab', tabId);
+                    tabs.change('layuiminiTab', tabId);
                     isSearchMenu = true;
                     return false;
                 }
@@ -452,7 +449,7 @@ define(["jquery"], function ($) {
                 isIframe: false,
                 maxTabNum: options.maxTabNum,
             });
-            element.tabChange('layuiminiTab', tabId);
+            tabs.change('layuiminiTab', tabId);
             return false;
         },
 
@@ -543,7 +540,7 @@ define(["jquery"], function ($) {
          * 自动定位
          */
         rollPosition: function () {
-            var $tabTitle = $('.layuimini-tab  .layui-tab-title');
+            var $tabTitle = $('.layuimini-tab  .layui-tabs-header');
             var autoLeft = 0;
             $tabTitle.children("li").each(function () {
                 if ($(this).hasClass('layui-this')) {
@@ -562,7 +559,7 @@ define(["jquery"], function ($) {
          * @param direction
          */
         rollClick: function (direction) {
-            var $tabTitle = $('.layuimini-tab  .layui-tab-title');
+            var $tabTitle = $('.layuimini-tab  .layui-tabs-header');
             var left = $tabTitle.scrollLeft();
             if ('left' === direction) {
                 $tabTitle.animate({

public/static/plugs/lay-module/layuimini/miniTheme.js

@@ -41,7 +41,7 @@ define(["jquery"], function ($) {
                     headerRightBg: '#23262e', //头部右侧背景色
                     headerRightBgThis: '#0c0c0c', //头部右侧选中背景色,
                     headerRightColor: 'rgba(255,255,255,.7)', //头部右侧字体颜色,
-                    headerRightChildColor: 'rgba(255,255,255,.7)', //头部右侧下拉字体颜色,
+                    headerRightChildColor: '#676767', //头部右侧下拉字体颜色,
                     headerRightColorThis: 'rgba(255,255,255,.7)', //头部右侧鼠标选中,
                     headerRightNavMore: 'rgba(255,255,255,.7)', //头部右侧更多下拉颜色,
                     headerRightNavMoreBg: '#1aa094', //头部右侧更多下拉列表选中背景色,
@@ -295,6 +295,24 @@ define(["jquery"], function ($) {
             }
             miniTheme.buildBodyElemStyle(elemStyleName);
         },
+
+        changeThemeMainColor() {
+            let bgcolorId = localStorage.getItem('layuiminiBgColorId');
+            if (bgcolorId === null || bgcolorId === undefined || bgcolorId === '') return false;
+            let bgcolorData = miniTheme.config(bgcolorId);
+            let mainColor = bgcolorData.headerRightBg
+            if (bgcolorId == 0) mainColor = '#16b777';
+            const bgColor = window.getComputedStyle(document.documentElement).getPropertyValue('--ea8-theme-main-color');
+            document.documentElement.style.setProperty('--ea8-theme-main-color', mainColor);
+            const iframes = document.getElementsByTagName('iframe');
+            if (iframes.length === 0) return false;
+            $.each(iframes, (i, iframe) => {
+                if (iframe === '' || iframe === undefined) return false;
+                const iframeDocument = iframe.contentDocument || iframe.contentWindow.document;
+                iframeDocument.documentElement.style.setProperty('--ea8-theme-main-color', mainColor);
+            })
+        },
+
         /**
          * 构建主题样式
          * @param bgcolorId
@@ -555,6 +573,7 @@ define(["jquery"], function ($) {
                     bgColorDefault: bgcolorId,
                     listen: false,
                 });
+                miniTheme.changeThemeMainColor()
             });
             $('body').on('click', '[data-select-style]', function () {
                 var elemStyleName = $(this).attr('data-select-style');