完成底层多皮肤风格代码；

.example.env

@@ -1,5 +1,4 @@
 APP_DEBUG=true
-COVER_THEME=index
 
 [APP]
 DEFAULT_TIMEZONE=Asia/Shanghai

app/admin/view/layout/default.html

@@ -13,7 +13,7 @@
     <![endif]-->
     <link rel="stylesheet" href="__STATIC__/admin/css/public.css?v={$version}" media="all">
 
-    <link rel="stylesheet" href="__STATIC__/common/css/theme/{:env('COVER_THEME','index')}.css?v={$version}">
+    <link rel="stylesheet" href="__STATIC__/common/css/theme/index.css?v={$version}">
 
     <script>
         window.CONFIG = {

public/static/common/css/theme/_demo.scss

@@ -41,21 +41,21 @@
     color: #fff !important;
 }
 
-body .layuimini-tab>.layui-tab-title li,
+.layuimini-tab>.layui-tab-title li,
-body .layuimini-tab>.close-box li {
+.layuimini-tab>.close-box li {
     line-height: 27px !important;
 }
 
-body .layuimini-tab>.layui-tab-title,
+.layuimini-tab>.layui-tab-title,
-body .layuimini-tab>.close-box {
+.layuimini-tab>.close-box {
     height: 28px !important;
 }
 
-body .layuimini-tab .layui-tab-control>li {
+.layuimini-tab .layui-tab-control>li {
     height     : 28px !important;
     line-height: 28px !important;
 }
 
-body .layuimini-container .layui-laypage .layui-laypage-curr .layui-laypage-em {
+.layuimini-container .layui-laypage .layui-laypage-curr .layui-laypage-em {
     background-color: #6C6E71 !important;
 }

public/static/common/css/theme/index.css

@@ -0,0 +1,49 @@
+.elem-style-demo .layui-btn {
+  color: #808185 !important;
+  background-color: #cde7ff !important;
+  border: 1px solid #d3dde6 !important;
+}
+.elem-style-demo .layui-layer-easy .layui-layer-title {
+  background-color: rgb(215, 215, 215) !important;
+  color: #6C6E71 !important;
+}
+.elem-style-demo .layui-layer-easy .layui-layer-setwin > a::after {
+  color: #6C6E71 !important;
+}
+.elem-style-demo .layui-layer-easy .layui-layer-btn .layui-layer-btn0 {
+  color: #808185 !important;
+  background-color: #cde7ff !important;
+  border: 1px solid #d3dde6 !important;
+}
+.elem-style-demo .layuimini-tab .layui-tab-title .layuimini-tab-active {
+  display: none !important;
+}
+.elem-style-demo .layuimini-tab .layui-tab-title li {
+  padding: 0 5px !important;
+  font-size: 12px;
+  border-width: 1px 1px 1px 0 !important;
+  border-style: solid !important;
+}
+.elem-style-demo .layuimini-tab .layui-tab-title li.layui-this {
+  color: #fff !important;
+  border-color: rgb(0, 0, 255) !important;
+  background: rgb(90, 173, 255) !important;
+}
+.elem-style-demo .layuimini-tab .layui-tab-title .layui-this span {
+  color: #fff !important;
+}
+.elem-style-demo .layuimini-tab > .layui-tab-title li,
+.elem-style-demo .layuimini-tab > .close-box li {
+  line-height: 27px !important;
+}
+.elem-style-demo .layuimini-tab > .layui-tab-title,
+.elem-style-demo .layuimini-tab > .close-box {
+  height: 28px !important;
+}
+.elem-style-demo .layuimini-tab .layui-tab-control > li {
+  height: 28px !important;
+  line-height: 28px !important;
+}
+.elem-style-demo .layuimini-container .layui-laypage .layui-laypage-curr .layui-laypage-em {
+  background-color: #6C6E71 !important;
+}

public/static/common/css/theme/index.scss

@@ -0,0 +1,11 @@
+.elem-style-normal {
+    @import 'normal';
+}
+
+.elem-style-demo {
+    @import 'demo';
+}
+
+.elem-style-sicfi {
+    @import 'sicfi';
+}

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

@@ -1,4 +1,17 @@
-define(["jquery", "tableSelect", "ckeditor"], function ($, tableSelect, undefined) {
+define(["jquery", "tableSelect", "ckeditor", 'miniTheme'], function ($, tableSelect, undefined, miniTheme) {
+
+    window.onInitElemStyle = function () {
+        miniTheme.renderElemStyle()
+
+        $('iframe').each(function(index,iframe){
+            
+            if(typeof iframe.contentWindow.onInitElemStyle == "function"){
+                iframe.contentWindow.onInitElemStyle();
+            }
+        })
+
+    }
+    window.onInitElemStyle();
 
     var form = layui.form,
         layer = layui.layer,

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

@@ -6,11 +6,13 @@
     background-color: #1aa094 !important;
 }
 
-.layui-header > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {
+.layui-header>ul>.layui-nav-item.layui-this,
+.layuimini-tool i:hover {
     background-color: #197971 !important;
 }
 
-.layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, .layuimini-tool i:hover {
+.layui-header .layuimini-header-content>ul>.layui-nav-item.layui-this,
+.layuimini-tool i:hover {
     background-color: #197971 !important;
 }
 
@@ -20,7 +22,8 @@
 }
 
 /**左侧-配色*/
-.layui-side.layui-bg-black, .layui-side.layui-bg-black > .layuimini-menu-left > ul {
+.layui-side.layui-bg-black,
+.layui-side.layui-bg-black>.layuimini-menu-left>ul {
     background-color: #2f4056 !important;
 }
 
@@ -29,7 +32,10 @@
 }
 
 /**左侧菜单选中-配色*/
-.layui-layout-admin .layui-nav-tree .layui-this, .layui-layout-admin .layui-nav-tree .layui-this > a, .layui-layout-admin .layui-nav-tree .layui-nav-child dd.layui-this, .layui-layout-admin .layui-nav-tree .layui-nav-child dd.layui-this a {
+.layui-layout-admin .layui-nav-tree .layui-this,
+.layui-layout-admin .layui-nav-tree .layui-this>a,
+.layui-layout-admin .layui-nav-tree .layui-nav-child dd.layui-this,
+.layui-layout-admin .layui-nav-tree .layui-nav-child dd.layui-this a {
     background-color: #1aa094 !important;
 }
 
@@ -43,7 +49,8 @@
     bottom  : 0;
 }
 
-.layuimini-header-menu, .layui-header {
+.layuimini-header-menu,
+.layui-header {
     height: 60px !important;
 }
 
@@ -172,11 +179,13 @@
     background-color: #1aa094;
 }
 
-.layuimini-tab > .layui-tab-title, .layuimini-tab > .close-box {
+.layuimini-tab>.layui-tab-title,
+.layuimini-tab>.close-box {
     height: 35px !important;
 }
 
-.layuimini-tab > .layui-tab-title li, .layuimini-tab > .close-box li {
+.layuimini-tab>.layui-tab-title li,
+.layuimini-tab>.close-box li {
     line-height: 35px !important;
 }
 
@@ -367,7 +376,8 @@
 
 
 /**左侧菜单栏 (正常) */
-.layui-layout-body .layui-nav-itemed .layui-nav-child a, .layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-child a {
+.layui-layout-body .layui-nav-itemed .layui-nav-child a,
+.layui-layout-body .layuimini-menu-left .layui-nav .layui-nav-child a {
     padding-left: 35px;
 }
 
@@ -396,7 +406,8 @@
 }
 
 /**选择配色方案 */
-.layuimini-color .color-title {
+.layuimini-color .color-title,
+.layuimini-color .elem-title {
     padding      : 10px 0 10px 20px;
     border-bottom: 1px solid #d9dada;
     margin-bottom: 8px;
@@ -425,7 +436,7 @@
     color           : #666;
 }
 
-.layuimini-color .color-content li.layui-this:after, .layuimini-color .color-content li:hover:after {
+.layuimini-color .color-content li.layui-this:after {
     width       : 100%;
     height      : 100%;
     padding     : 4px;
@@ -449,6 +460,20 @@
     opacity           : 0;
 }
 
+.layuimini-color .elem-content li {
+    margin : 5px;
+    padding: 5px 10px;
+    display: inline-block;
+    border : 1px solid #999;
+    cursor : pointer;
+}
+
+.layuimini-color .elem-content li.layui-this {
+    border-color    : #1E9FFF;
+    background-color: #1E9FFF;
+    color           : #fff !important;
+}
+
 
 /**其它 */
 .layui-tab-item {
@@ -480,7 +505,9 @@
     padding: 0 !important;
 }
 
-.layui-nav .layui-this:after, .layui-nav-bar, .layui-nav-tree .layui-nav-itemed:after {
+.layui-nav .layui-this:after,
+.layui-nav-bar,
+.layui-nav-tree .layui-nav-itemed:after {
     width : 0 !important;
     height: 0 !important;
 }
@@ -572,6 +599,7 @@
     0% {
         transform: rotate(0deg);
     }
+
     to {
         transform: rotate(1turn);
     }
@@ -661,9 +689,11 @@
 .popup-tips .layui-layer-TipsG {
     display: none;
 }
+
 .popup-tips.layui-layer-tips .layui-layer-content {
     padding: 0;
 }
+
 .popup-tips .layui-nav-tree {
     width        : 150px;
     border-radius: 10px;
@@ -675,13 +705,15 @@
 }
 
 /**头部菜单字体间距*/
-.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;
@@ -700,18 +732,23 @@
     margin-top: -6px !important;
 }
 
-.layuimini-menu-left .layui-nav .layui-nav-mored,.layuimini-menu-left .layui-nav-itemed>a .layui-nav-more{
+.layuimini-menu-left .layui-nav .layui-nav-mored,
+.layuimini-menu-left .layui-nav-itemed>a .layui-nav-more {
     margin-top: -9px !important;
 }
 
-.layuimini-menu-left-zoom.layui-nav .layui-nav-mored,.layuimini-menu-left-zoom.layui-nav-itemed>a .layui-nav-more{
+.layuimini-menu-left-zoom.layui-nav .layui-nav-mored,
+.layuimini-menu-left-zoom.layui-nav-itemed>a .layui-nav-more {
     margin-top: -9px !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);
@@ -722,7 +759,8 @@
     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;
@@ -730,7 +768,8 @@
 }
 
 /**修复左侧菜单字体不对齐的问题*/
-.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;
 }
 
@@ -739,6 +778,7 @@
  PC版样式
  */
 @media screen and (min-width: 1025px) {
+
     /**头部样式（缩放） */
     .layuimini-mini .layui-layout-left.layuimini-header-menu.layuimini-pc-show {
         left: 155px !important;
@@ -758,7 +798,9 @@
         width: 80px !important;
     }
 
-    .layuimini-mini .layui-side.layui-bg-black, .layuimini-mini .layuimini-menu-left > ul, .layuimini-mini .layuimini-menu-left > ul li i {
+    .layuimini-mini .layui-side.layui-bg-black,
+    .layuimini-mini .layuimini-menu-left>ul,
+    .layuimini-mini .layuimini-menu-left>ul li i {
         width: 60px !important;
     }
 
@@ -789,13 +831,15 @@
     .layuimini-pc-show {
         display: block;
     }
+
     .layuimini-mobile-show {
         display: none;
     }
 
     /**菜单缩放*/
-    .layuimini-mini .layuimini-menu-left .layui-nav-more,.layuimini-mini .layuimini-menu-left .layui-nav-child{
+    .layuimini-mini .layuimini-menu-left .layui-nav-more,
-        display: none;!important;
+    .layuimini-mini .layuimini-menu-left .layui-nav-child {
+        display: none !important;
     }
 }
 
@@ -822,9 +866,11 @@
     .layuimini-pc-show {
         display: none;
     }
+
     .layuimini-mobile-show {
         display: block;
     }
+
     .layuimini-header-content {
         left: 0;
     }
@@ -853,13 +899,15 @@
         left: 0px !important;
     }
 
-    .layuimini-mini .layui-layout-admin .layuimini-menu-left, .layuimini-mini .layui-header .layuimini-logo {
+    .layuimini-mini .layui-layout-admin .layuimini-menu-left,
+    .layuimini-mini .layui-header .layuimini-logo {
         left      : 0;
         transition: left .2s;
         z-index   : 1001 !important;
     }
 
-    .layuimini-all .layui-layout-admin .layuimini-menu-left, .layuimini-all .layui-header .layuimini-logo {
+    .layuimini-all .layui-layout-admin .layuimini-menu-left,
+    .layuimini-all .layui-header .layuimini-logo {
         left      : -200px;
         transition: left .2s;
         top       : 0;

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

@@ -278,7 +278,8 @@ define(["jquery"], function ($) {
                     tabActiveColor: '#1e9fff', //tab选项卡选中颜色,
                 },
             ];
-            if (bgcolorId === undefined) {
+
+            if (bgcolorId == undefined) {
                 return bgColorConfig;
             } else {
                 return bgColorConfig[bgcolorId];
@@ -290,16 +291,37 @@ define(["jquery"], function ($) {
          * @param options
          */
         render: function (options) {
-            options.bgColorDefault = options.bgColorDefault || false;
+            options.bgColorDefault = options.bgColorDefault || 0;
+            options.elemStyleDefault = options.elemStyleDefault || 'index';
             options.listen = options.listen || false;
             var bgcolorId = sessionStorage.getItem('layuiminiBgcolorId');
             if (bgcolorId === null || bgcolorId === undefined || bgcolorId === '') {
                 bgcolorId = options.bgColorDefault;
             }
             miniTheme.buildThemeCss(bgcolorId);
+
+            var elemStyleName = sessionStorage.getItem('layuiminiElemStyleName');
+            if (!elemStyleName) elemStyleName = options.elemStyleDefault;
+
+            miniTheme.buildBodyElemStyle(elemStyleName);
+
+            if(typeof window.onInitElemStyle == 'function'){
+                window.onInitElemStyle()
+            }
+
             if (options.listen) miniTheme.listen(options);
         },
 
+        renderElemStyle(elemStyleDefault) {
+
+            elemStyleDefault = elemStyleDefault || 'index';
+
+            var elemStyleName = sessionStorage.getItem('layuiminiElemStyleName');
+            if (!elemStyleName) elemStyleName = elemStyleDefault;
+
+            miniTheme.buildBodyElemStyle(elemStyleName);
+
+        },
         /**
          * 构建主题样式
          * @param bgcolorId
@@ -310,6 +332,7 @@ define(["jquery"], function ($) {
                 return false;
             }
             var bgcolorData = miniTheme.config(bgcolorId);
+
             var styleHtml = '/*头部右侧背景色 headerRightBg */\n' +
                 '.layui-layout-admin .layui-header {\n' +
                 '    background-color: ' + bgcolorData.headerRightBg + ' !important;\n' +
@@ -413,7 +436,6 @@ define(["jquery"], function ($) {
          * @returns {string}
          */
         buildBgColorHtml: function (options) {
-            options.bgColorDefault = options.bgColorDefault || 0;
             var bgcolorId = parseInt(sessionStorage.getItem('layuiminiBgcolorId'));
             if (isNaN(bgcolorId)) bgcolorId = options.bgColorDefault;
             var bgColorConfig = miniTheme.config();
@@ -432,6 +454,54 @@ define(["jquery"], function ($) {
             });
             return html;
         },
+        configElemStyle() {
+            var listElemStyle = [
+                {
+                    title: '标准',
+                    className: 'normal'
+                },
+                {
+                    title: '原型',
+                    className: 'demo'
+                },
+                {
+                    title: '科幻',
+                    className: 'sicfi'
+                },
+            ]
+            return listElemStyle;
+        },
+        buildBodyElemStyle(className) {
+            var listElemStyle = miniTheme.configElemStyle()
+
+            $.each(listElemStyle, function (index, item) {
+                var classNameReal = 'elem-style-' + item.className;
+
+                if ($('body').hasClass(classNameReal)) {
+                    $('body').removeClass(classNameReal);
+                }
+            })
+
+            $('body').addClass('elem-style-' + className)
+        },
+        buildElemStyleHtml(options) {
+            var elemStyleName = sessionStorage.getItem('layuiminiElemStyleName');
+            if (!elemStyleName) elemStyleName = options.elemStyleDefault;
+            var listElemStyle = miniTheme.configElemStyle()
+            var html = '';
+            $.each(listElemStyle, function (key, val) {
+                if (val.className === elemStyleName) {
+                    html += '<li class="layui-this style-item" data-select-style="' + val.className + '">\n';
+                } else {
+                    html += '<li class="style-item"  data-select-style="' + val.className + '">\n';
+                }
+                html +=
+                    val.title +
+
+                    '</li>';
+            });
+            return html;
+        },
 
         /**
          * 监听
@@ -442,6 +512,7 @@ define(["jquery"], function ($) {
                 var loading = layer.load(0, { shade: false, time: 2 * 1000 });
                 var clientHeight = (document.documentElement.clientHeight) - 60;
                 var bgColorHtml = miniTheme.buildBgColorHtml(options);
+                var elemStyleHtml = miniTheme.buildElemStyleHtml(options);
                 var html = '<div class="layuimini-color">\n' +
                     '<div class="color-title">\n' +
                     '<span>配色方案</span>\n' +
@@ -449,6 +520,12 @@ define(["jquery"], function ($) {
                     '<div class="color-content">\n' +
                     '<ul>\n' + bgColorHtml + '</ul>\n' +
                     '</div>\n' +
+                    '<div class="elem-title">\n' +
+                    '<span>元素风格</span>\n' +
+                    '</div>\n' +
+                    '<div class="elem-content">\n' +
+                    '<ul>\n' + elemStyleHtml + '</ul>\n' +
+                    '</div>\n' +
                     '<div class="more-menu-list">\n' +
                     '<a class="more-menu-item" href="http://doc.ulthon.com/home/read/ulthon_admin/home.html" target="_blank"><i class="layui-icon layui-icon-read" style="font-size: 19px;"></i> 开发文档</a>\n' +
                     '<a class="more-menu-item" href="https://gitee.com/ulthon/ulthon_admin" target="_blank"><i class="layui-icon layui-icon-tabs" style="font-size: 16px;"></i> 开源地址</a>\n' +
@@ -477,11 +554,20 @@ define(["jquery"], function ($) {
 
             $('body').on('click', '[data-select-bgcolor]', function () {
                 var bgcolorId = $(this).attr('data-select-bgcolor');
-                $('.layuimini-color .color-content ul .layui-this').attr('class', '');
+
-                $(this).attr('class', 'layui-this');
+                $(this).attr('class', 'layui-this').siblings().removeClass('layui-this');
                 sessionStorage.setItem('layuiminiBgcolorId', bgcolorId);
                 miniTheme.render({
-                    bgColorDefault: bgcolorId,
+                    listen: false,
+                });
+            });
+            $('body').on('click', '[data-select-style]', function () {
+                var elemStyleName = $(this).attr('data-select-style');
+
+                $(this).attr('class', 'layui-this').siblings().removeClass('layui-this');
+
+                sessionStorage.setItem('layuiminiElemStyleName', elemStyleName);
+                miniTheme.render({
                     listen: false,
                 });
             });