From 842641763aa945ce865302ad152eb28f865cf761 Mon Sep 17 00:00:00 2001 From: augushong Date: Sun, 27 Sep 2026 02:18:41 +0000 Subject: [PATCH] =?UTF-8?q?feat(theme):=20=E9=85=8D=E8=89=B2=E4=B8=93?= =?UTF-8?q?=E5=B1=9E=E6=A0=87=E5=87=86=E7=9A=AE=E8=82=A4=EF=BC=8C=E6=B8=85?= =?UTF-8?q?=E7=88=BD=E5=85=A8=E5=8C=85=E8=A7=82=E6=84=9F=E4=B8=8E=E9=9D=A2?= =?UTF-8?q?=E6=9D=BF=E4=BA=A4=E4=BA=92=E9=87=8D=E6=9E=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- extend/base/admin/view/index/index.js | 2 +- public/static/common/css/theme/_fresh.scss | 152 +++++++++++++++--- public/static/common/css/theme/index.css | 93 +++++++++-- .../plugs/lay-module/layuimini/miniTheme.js | 37 +++-- 4 files changed, 236 insertions(+), 48 deletions(-) diff --git a/extend/base/admin/view/index/index.js b/extend/base/admin/view/index/index.js index 83895fa..7ea1d99 100644 --- a/extend/base/admin/view/index/index.js +++ b/extend/base/admin/view/index/index.js @@ -4,7 +4,7 @@ $(function () { iniUrl: ua.url('ajax/initAdmin'), // 初始化接口 clearUrl: ua.url("ajax/clearCache"), // 缓存清理接口 urlHashLocation: true, // 是否打开hash定位 - bgColorDefault: 12, // 主题默认配置（12=全白浅色，配清爽皮肤） + bgColorDefault: 0, // 主题默认配置（0=标准皮肤经典配色） menuChildOpen: false, // 是否默认展开菜单 loadingTime: 0, // 初始化加载时间 pageAnim: true, // iframe窗口动画 diff --git a/public/static/common/css/theme/_fresh.scss b/public/static/common/css/theme/_fresh.scss index a449fd8..554ecf4 100644 --- a/public/static/common/css/theme/_fresh.scss +++ b/public/static/common/css/theme/_fresh.scss @@ -1,8 +1,13 @@ // ============================================================================ // 清爽（fresh）皮肤 —— 36px 紧凑头部 + 白底轻量视觉 -// 结构：(0)设计令牌 (A)头部36px (B)头部分组tab (C)页签条重描 (D)侧栏 (E)内容组件轻触 -// 约定：尺寸/布局/圆角/阴影归本文件；颜色基调归配色系统（buildThemeCss）， -// 文字颜色一律归配色系统，本文件不覆盖菜单/头部文字色。禁用选择器扩展语法。 +// 结构：(0)设计令牌 (A)头部36px (B)头部分组tab (C)页签条重描 (D)侧栏 (E)内容组件轻触 (F)全包颜色接管 +// 全包边界声明：本皮肤接管全部框架颜色（含文字色），配色系统注入（miniTheme.js +// buildThemeCss）仅对标准皮肤生效，fresh 不消费其色值。 +// 此为经用户批准的第二轮架构变更，推翻第一轮"文字颜色归配色系统"边界——仅对 fresh +// 适用，其他皮肤仍守旧边界。F 段选择器逐字镜像 buildThemeCss 注入清单，作为对照表 +// 出处与接管依据：.elem-style-fresh 包裹使每条规则天然 +1 类特异性，与注入同 +// !important 时镜像选择器必胜。 +// 约定：尺寸/布局/圆角/阴影归本文件；禁用选择器扩展语法。 // ============================================================================ // 0. 设计令牌 @@ -13,7 +18,7 @@ $text-main: #33383f; $text-sub: #6b7280; $border-light: #f0f2f5; $border: #e5e9ef; -$bg-page: #f7f8fa; +$bg-page: #f7f8fa; // logo 区+侧栏灰底 $radius-btn: 4px; $radius-card: 8px; $shadow-card: 0 1px 2px rgba(0, 0, 0, .04); @@ -40,7 +45,7 @@ $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08); .layui-layout-admin .layuimini-logo { height : $header-h !important; line-height : $header-h !important; - background-color: #fff !important; + background-color: $bg-page !important; color : $text-main !important; box-sizing : border-box; border-right : 1px solid $border-light; @@ -66,7 +71,7 @@ $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08); line-height : 20px; margin-top : 8px; border-radius: $radius-btn; - color : $text-sub; + color : #4e5969; } .layui-layout-admin .layui-body, @@ -74,23 +79,29 @@ $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08); top: $header-h !important; } -// B. 头部分组 tab（文字色归配色系统，激活用 inset box-shadow 底条，不依赖被置零的 :after） +// B. 头部分组 tab（:hover/.layui-this 路径是注入盲区的唯一 hover 反馈来源；常态文字色由 F 段 T3/T5 接管；激活底条用 inset box-shadow） +// 右侧布局项运行时 DOM 为 .layui-header > .layuimini-header-content > ul.layui-layout-right， +// 故层级用后代约束；其 hover>a 需压过 T3 常态镜像 (0,5,1)，由下方 (0,7,1) 规则负责。 .layuimini-header-menu>.layui-nav-item>a, -.layui-header>.layui-layout-right>.layui-nav-item>a { +.layui-header .layui-layout-right>.layui-nav-item>a { padding: 0 14px; } .layuimini-header-menu>.layui-nav-item:hover, .layuimini-header-menu>.layui-nav-item.layui-this, -.layui-header>.layui-layout-right>.layui-nav-item:hover, -.layui-header>.layui-layout-right>.layui-nav-item.layui-this { +.layui-header .layui-layout-right>.layui-nav-item:hover, +.layui-header .layui-layout-right>.layui-nav-item.layui-this { background-color: transparent !important; } .layuimini-header-menu>.layui-nav-item:hover>a, .layuimini-header-menu>.layui-nav-item.layui-this>a, -.layui-header>.layui-layout-right>.layui-nav-item:hover>a, -.layui-header>.layui-layout-right>.layui-nav-item.layui-this>a { +.layui-header .layui-layout-right>.layui-nav-item:hover>a, +.layui-header .layui-layout-right>.layui-nav-item.layui-this>a { + color: $main !important; +} + +.layui-layout-admin .layui-header .layui-nav.layui-layout-right>.layui-nav-item:hover>a { color: $main !important; } @@ -126,7 +137,7 @@ $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08); color: $main !important; } -.layuimini-tab .layui-tab-title .layuimini-tab-active { +.layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active { width : 6px; height : 6px; background-color: $main; @@ -138,7 +149,7 @@ $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08); border-bottom : $border-light 1px solid; } -// D. 侧栏（文字色归配色系统；菜单项 40px 高度不动） +// D. 侧栏（菜单项 40px 高度不动；常态文字色由 F 段 T11/T12 接管，本段仅保留 hover 背景/边框/激活胶囊） .layuimini-menu-left .layui-nav .layui-nav-item a:hover { background-color: rgba(127, 127, 127, 0.15) !important; } @@ -149,7 +160,7 @@ $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08); .layuimini-menu-left .layui-nav-tree .layui-nav-child, .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child { - background-color: #fafbfc; + background-color: #f2f3f6; } // 激活态（选择器清单参照 _sicfi.scss:763-770，含 dd 与 -zoom 变体） @@ -166,15 +177,21 @@ $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08); box-shadow : inset 3px 0 0 $main; } -// E. 内容组件轻触（& = body.elem-style-fresh） -& { - background: $bg-page; -} - +// E. 内容组件轻触 .layui-btn { border-radius: $radius-btn; } +.layui-btn-primary { + border-color: $border; + color : #4e5969; +} + +.layui-btn-primary:hover { + border-color: $main; + color : $main; +} + .layui-card, .layuimini-container { border-radius: $radius-card; @@ -203,3 +220,98 @@ $shadow-pop: 0 6px 16px rgba(31, 35, 41, .08); border : 1px solid $border-light; box-shadow : $shadow-pop; } + +// F. 全包颜色接管 +// 以下选择器逐字镜像 miniTheme.js buildThemeCss 注入清单（:330-423）， +// 在 .elem-style-fresh 包裹上下文内每条规则天然 +1 类特异性， +// 与注入同 !important 时镜像选择器必胜。 +// T8（logo h1 文字色 $text-main）已由上方既有规则满足，按定案保留、不重复声明； +// T15（页签圆点）由 C 段圆点选择器补 .layui-this 承接（包裹下 (0,5,0) > 注入 (0,4,0)，无需 !important）。 + +// T1 头部背景（白底定案） +.layui-layout-admin .layui-header { + background-color: #fff !important; +} + +// T2 头部选中背景/工具图标 hover（透明） +.layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, +.layui-layout-admin .layuimini-tool i:hover { + background-color: transparent !important; +} + +// T3 头部导航文字 +.layui-layout-admin .layui-header .layui-nav .layui-nav-item a { + color: #4e5969 !important; +} + +// T4 头部下拉文字 +.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a { + color: #4e5969 !important; +} + +// T5 头部 hover/激活文字（品牌蓝） +.layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover, +.layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a { + color: $main !important; +} + +// T6 头部工具图标 +.layui-layout-admin .layui-header .layuimini-tool i { + color: #4e5969 !important; +} + +// T9 侧栏背景（灰底定案） +.layui-side.layui-bg-black, +.layui-side.layui-bg-black > .layuimini-menu-left > ul, +.layuimini-menu-left-zoom > ul { + background-color: $bg-page !important; +} + +// T10 侧栏展开子菜单背景 +.layuimini-menu-left .layui-nav-itemed > .layui-nav-child { + background-color: #f2f3f6 !important; +} + +// T11 侧栏文字（图标继承 a 色一并解决纯黑问题） +.layuimini-menu-left .layui-nav .layui-nav-item a, +.layuimini-menu-left-zoom.layui-nav .layui-nav-item a { + color: #3d4757 !important; +} + +// T12 侧栏 hover/激活文字（品牌蓝；激活底胶囊与左条由 D 段既有规则继续负责） +.layuimini-menu-left .layui-nav .layui-nav-item a:hover, +.layuimini-menu-left .layui-nav .layui-this a, +.layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover, +.layuimini-menu-left-zoom.layui-nav .layui-this a { + color: $main !important; +} + +// T13 侧栏展开箭头 +.layuimini-menu-left .layui-nav .layui-nav-more, +.layuimini-menu-left-zoom.layui-nav .layui-nav-more { + border-top-color: #3d4757 !important; +} + +.layuimini-menu-left .layui-nav .layui-nav-mored, +.layuimini-menu-left .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 { + border-color: transparent transparent #3d4757 !important; +} + +// T14 头部展开箭头与下拉激活 +.layui-header .layui-nav .layui-nav-more { + border-top-color: #4e5969 !important; +} + +.layui-header .layui-nav .layui-nav-mored, +.layui-header .layui-nav-itemed > a .layui-nav-more { + border-color: transparent transparent #4e5969 !important; +} + +.layui-header .layui-nav .layui-nav-child dd.layui-this a, +.layui-header .layui-nav-child dd.layui-this, +.layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a { + background-color: $main !important; + color : #fff !important; +} diff --git a/public/static/common/css/theme/index.css b/public/static/common/css/theme/index.css index 88377fe..47069f7 100644 --- a/public/static/common/css/theme/index.css +++ b/public/static/common/css/theme/index.css @@ -2184,7 +2184,7 @@ .elem-style-fresh .layui-layout-admin .layuimini-logo { height: 36px !important; line-height: 36px !important; - background-color: #fff !important; + background-color: #f7f8fa !important; color: #33383f !important; box-sizing: border-box; border-right: 1px solid #f0f2f5; @@ -2206,26 +2206,29 @@ line-height: 20px; margin-top: 8px; border-radius: 4px; - color: #6b7280; + color: #4e5969; } .elem-style-fresh .layui-layout-admin .layui-body, .elem-style-fresh .layui-layout-admin .layui-side { top: 36px !important; } .elem-style-fresh .layuimini-header-menu > .layui-nav-item > a, -.elem-style-fresh .layui-header > .layui-layout-right > .layui-nav-item > a { +.elem-style-fresh .layui-header .layui-layout-right > .layui-nav-item > a { padding: 0 14px; } .elem-style-fresh .layuimini-header-menu > .layui-nav-item:hover, .elem-style-fresh .layuimini-header-menu > .layui-nav-item.layui-this, -.elem-style-fresh .layui-header > .layui-layout-right > .layui-nav-item:hover, -.elem-style-fresh .layui-header > .layui-layout-right > .layui-nav-item.layui-this { +.elem-style-fresh .layui-header .layui-layout-right > .layui-nav-item:hover, +.elem-style-fresh .layui-header .layui-layout-right > .layui-nav-item.layui-this { background-color: transparent !important; } .elem-style-fresh .layuimini-header-menu > .layui-nav-item:hover > a, .elem-style-fresh .layuimini-header-menu > .layui-nav-item.layui-this > a, -.elem-style-fresh .layui-header > .layui-layout-right > .layui-nav-item:hover > a, -.elem-style-fresh .layui-header > .layui-layout-right > .layui-nav-item.layui-this > a { +.elem-style-fresh .layui-header .layui-layout-right > .layui-nav-item:hover > a, +.elem-style-fresh .layui-header .layui-layout-right > .layui-nav-item.layui-this > a { + color: #1E9FFF !important; +} +.elem-style-fresh .layui-layout-admin .layui-header .layui-nav.layui-layout-right > .layui-nav-item:hover > a { color: #1E9FFF !important; } .elem-style-fresh .layuimini-header-menu > .layui-nav-item.layui-this, @@ -2252,7 +2255,7 @@ .elem-style-fresh .layuimini-tab .layui-tab-title .layui-this span { color: #1E9FFF !important; } -.elem-style-fresh .layuimini-tab .layui-tab-title .layuimini-tab-active { +.elem-style-fresh .layuimini-tab .layui-tab-title .layui-this .layuimini-tab-active { width: 6px; height: 6px; background-color: #1E9FFF; @@ -2270,7 +2273,7 @@ } .elem-style-fresh .layuimini-menu-left .layui-nav-tree .layui-nav-child, .elem-style-fresh .layuimini-menu-left-zoom.layui-nav-tree .layui-nav-child { - background-color: #fafbfc; + background-color: #f2f3f6; } .elem-style-fresh .layuimini-menu-left .layui-nav-tree .layui-this, .elem-style-fresh .layuimini-menu-left .layui-nav-tree .layui-this > a, @@ -2284,9 +2287,6 @@ color: #1E9FFF !important; box-shadow: inset 3px 0 0 #1E9FFF; } -.elem-style-fresh { - background: #f7f8fa; -} .elem-style-fresh .layui-btn, .elem-style-fresh .elem-style-sicfi .layui-layer-easy .layui-layer-btn a, .elem-style-sicfi .layui-layer-easy .layui-layer-btn .elem-style-fresh a, .elem-style-fresh .elem-style-gtk .layuimini-container .layui-table-tool .layui-inline[lay-event], .elem-style-gtk .layuimini-container .layui-table-tool .elem-style-fresh .layui-inline[lay-event], .elem-style-fresh .elem-style-gtk .laydate-footer-btns span, .elem-style-gtk .laydate-footer-btns .elem-style-fresh span, .elem-style-fresh .elem-style-gtk .layui-laydate-footer span, .elem-style-gtk .layui-laydate-footer .elem-style-fresh span, .elem-style-fresh .elem-style-gtk .layui-tab-brief > .layui-tab-title li, .elem-style-gtk .layui-tab-brief > .layui-tab-title .elem-style-fresh li, .elem-style-fresh .elem-style-gtk .layuimini-header-menu > li.layui-nav-item, .elem-style-gtk .elem-style-fresh .layuimini-header-menu > li.layui-nav-item, .elem-style-fresh .elem-style-nes .layuimini-container .layui-table-tool .layui-inline[lay-event], .elem-style-nes .layuimini-container .layui-table-tool .elem-style-fresh .layui-inline[lay-event], .elem-style-fresh .elem-style-nes .layui-layer-easy .layui-layer-btn a, .elem-style-nes .layui-layer-easy .layui-layer-btn .elem-style-fresh a, .elem-style-fresh .elem-style-win7 .layui-layer-easy .layui-layer-btn a, .elem-style-win7 .layui-layer-easy .layui-layer-btn .elem-style-fresh a, .elem-style-fresh .elem-style-neomorphic .layui-table-tool .layui-inline[lay-event], .elem-style-neomorphic .layui-table-tool .elem-style-fresh .layui-inline[lay-event], .elem-style-fresh .elem-style-neomorphic .layuimini-main, .elem-style-neomorphic .elem-style-fresh .layuimini-main, .elem-style-fresh .elem-style-neomorphic .layui-layer, .elem-style-neomorphic .elem-style-fresh .layui-layer, .elem-style-fresh .elem-style-neomorphic .layui-card, .elem-style-neomorphic .elem-style-fresh .layui-card, .elem-style-fresh .elem-style-neomorphic .panel, .elem-style-neomorphic .elem-style-fresh .panel, .elem-style-fresh .elem-style-neomorphic .layuimini-qiuck-module, .elem-style-neomorphic .elem-style-fresh .layuimini-qiuck-module, .elem-style-fresh .elem-style-neomorphic .layui-side.layui-bg-black, .elem-style-neomorphic .elem-style-fresh .layui-side.layui-bg-black, .elem-style-fresh .elem-style-neomorphic .layui-side.layui-bg-black > .layuimini-menu-left > ul, .elem-style-neomorphic .elem-style-fresh .layui-side.layui-bg-black > .layuimini-menu-left > ul, @@ -2296,6 +2296,14 @@ .elem-style-neomorphic .layuimini-menu-left-zoom.layui-nav .layui-nav-item .elem-style-fresh a, .elem-style-fresh .elem-style-neomorphic .layui-header .layuimini-header-menu > .layui-nav-item, .elem-style-neomorphic .layui-header .elem-style-fresh .layuimini-header-menu > .layui-nav-item, .elem-style-fresh .elem-style-neomorphic .layui-header .layui-nav .layui-nav-item, .elem-style-neomorphic .layui-header .layui-nav .elem-style-fresh .layui-nav-item, .elem-style-fresh .elem-style-neomorphic .layui-form-select dl, .elem-style-neomorphic .layui-form-select .elem-style-fresh dl, .elem-style-fresh .elem-style-neomorphic .layui-form-checkbox, .elem-style-neomorphic .elem-style-fresh .layui-form-checkbox, .elem-style-fresh .elem-style-neomorphic .layui-form-radio, .elem-style-neomorphic .elem-style-fresh .layui-form-radio { border-radius: 4px; } +.elem-style-fresh .layui-btn-primary { + border-color: #e5e9ef; + color: #4e5969; +} +.elem-style-fresh .layui-btn-primary:hover { + border-color: #1E9FFF; + color: #1E9FFF; +} .elem-style-fresh .layui-card, .elem-style-fresh .layuimini-container { border-radius: 8px; @@ -2320,6 +2328,67 @@ border: 1px solid #f0f2f5; box-shadow: 0 6px 16px rgba(31, 35, 41, 0.08); } +.elem-style-fresh .layui-layout-admin .layui-header { + background-color: #fff !important; +} +.elem-style-fresh .layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this, +.elem-style-fresh .layui-layout-admin .layuimini-tool i:hover { + background-color: transparent !important; +} +.elem-style-fresh .layui-layout-admin .layui-header .layui-nav .layui-nav-item a { + color: #4e5969 !important; +} +.elem-style-fresh .layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child a { + color: #4e5969 !important; +} +.elem-style-fresh .layui-header .layuimini-menu-header-pc.layui-nav .layui-nav-item a:hover, +.elem-style-fresh .layui-header .layuimini-header-menu.layuimini-pc-show.layui-nav .layui-this a { + color: #1E9FFF !important; +} +.elem-style-fresh .layui-layout-admin .layui-header .layuimini-tool i { + color: #4e5969 !important; +} +.elem-style-fresh .layui-side.layui-bg-black, +.elem-style-fresh .layui-side.layui-bg-black > .layuimini-menu-left > ul, +.elem-style-fresh .layuimini-menu-left-zoom > ul { + background-color: #f7f8fa !important; +} +.elem-style-fresh .layuimini-menu-left .layui-nav-itemed > .layui-nav-child { + background-color: #f2f3f6 !important; +} +.elem-style-fresh .layuimini-menu-left .layui-nav .layui-nav-item a, +.elem-style-fresh .layuimini-menu-left-zoom.layui-nav .layui-nav-item a { + color: #3d4757 !important; +} +.elem-style-fresh .layuimini-menu-left .layui-nav .layui-nav-item a:hover, +.elem-style-fresh .layuimini-menu-left .layui-nav .layui-this a, +.elem-style-fresh .layuimini-menu-left-zoom.layui-nav .layui-nav-item a:hover, +.elem-style-fresh .layuimini-menu-left-zoom.layui-nav .layui-this a { + color: #1E9FFF !important; +} +.elem-style-fresh .layuimini-menu-left .layui-nav .layui-nav-more, +.elem-style-fresh .layuimini-menu-left-zoom.layui-nav .layui-nav-more { + border-top-color: #3d4757 !important; +} +.elem-style-fresh .layuimini-menu-left .layui-nav .layui-nav-mored, +.elem-style-fresh .layuimini-menu-left .layui-nav-itemed > a .layui-nav-more, +.elem-style-fresh .layuimini-menu-left-zoom.layui-nav .layui-nav-mored, +.elem-style-fresh .layuimini-menu-left-zoom.layui-nav-itemed > a .layui-nav-more { + border-color: transparent transparent #3d4757 !important; +} +.elem-style-fresh .layui-header .layui-nav .layui-nav-more { + border-top-color: #4e5969 !important; +} +.elem-style-fresh .layui-header .layui-nav .layui-nav-mored, +.elem-style-fresh .layui-header .layui-nav-itemed > a .layui-nav-more { + border-color: transparent transparent #4e5969 !important; +} +.elem-style-fresh .layui-header .layui-nav .layui-nav-child dd.layui-this a, +.elem-style-fresh .layui-header .layui-nav-child dd.layui-this, +.elem-style-fresh .layui-layout-admin .layui-header .layui-nav .layui-nav-item .layui-nav-child .layui-this a { + background-color: #1E9FFF !important; + color: #fff !important; +} @font-face { font-family: "ark-pixel"; diff --git a/public/static/plugs/lay-module/layuimini/miniTheme.js b/public/static/plugs/lay-module/layuimini/miniTheme.js index 6cf833b..77be85a 100644 --- a/public/static/plugs/lay-module/layuimini/miniTheme.js +++ b/public/static/plugs/lay-module/layuimini/miniTheme.js @@ -452,12 +452,12 @@ var listElemStyle = [ { title: '清爽', - className: 'fresh', - defaultColorConfig: '12' + className: 'fresh' }, { title: '标准', - className: 'normal' + className: 'normal', + defaultColorConfig: '0' }, { title: '原型', @@ -470,7 +470,8 @@ }, { title: 'GTK', - className: 'gtk' + className: 'gtk', + defaultColorConfig: '0' }, { title: '像素', @@ -510,14 +511,12 @@ var html = ''; $.each(listElemStyle, function (key, val) { - if (typeof val.defaultColorConfig == 'undefined') { - val.defaultColorConfig = '0' - } + var dcc = (typeof val.defaultColorConfig == 'undefined') ? '' : val.defaultColorConfig; if (val.className === elemStyleName) { - html += '
  • \n'; + html += '
  • \n'; } else { - html += '
  • \n'; + html += '
  • \n'; } html += val.title + @@ -537,19 +536,20 @@ var clientHeight = (document.documentElement.clientHeight) - 60; var bgColorHtml = miniTheme.buildBgColorHtml(options); var elemStyleHtml = miniTheme.buildElemStyleHtml(options); + var currentElemStyle = localStorage.getItem('layuiminiElemStyleName') || options.elemStyleDefault; var html = '
    \n' + - '
    \n' + - '配色方案\n' + - '
    \n' + - '
    \n' + - '
      \n' + bgColorHtml + '
    \n' + - '
    \n' + '
    \n' + '元素风格\n' + '
    \n' + '
    \n' + '
      \n' + elemStyleHtml + '
    \n' + '
    \n' + + '
    \n' + + '配色方案' + (currentElemStyle !== 'normal' ? '标准皮肤支持' : '') + '\n' + + '
    \n' + + '
    \n' + + '
      \n' + bgColorHtml + '
    \n' + + '
    \n' + '
    \n' + ' 开发文档\n' + ' 开源地址\n' + @@ -584,6 +584,13 @@ $('body').on('click', '[data-select-bgcolor]', function () { var bgcolorId = $(this).attr('data-select-bgcolor'); + var currentElemStyle = localStorage.getItem('layuiminiElemStyleName') || 'fresh'; + if (currentElemStyle !== 'normal') { + localStorage.setItem('layuiminiElemStyleName', 'normal'); + $('.elem-content li[data-select-style]').removeClass('layui-this'); + $('.elem-content li[data-select-style="normal"]').addClass('layui-this'); + } + $(this).attr('class', 'layui-this').siblings().removeClass('layui-this'); localStorage.setItem('layuiminiBgcolorId', bgcolorId); miniTheme.render({