Skip to content

Commit 3059fcc

Browse files
qnnp-meqnnp-me
committed
fix(admin):修复菜单页面加载动画及标签页样式问题
- 修改用户菜单链接为 javascript:void(0); 防止默认跳转行为 - 在 iframe 加载前显示 loading 动画，提升用户体验 - 监听 iframe 加载完成事件，渐隐隐藏 loading 动画 - 添加 layui-tab-brief 样式，优化当前标签页高亮效果 - 统一 CSS 和 SCSS 文件中的标签页选中状态样式定义
1 parent 0e4a3a3 commit 3059fcc

File tree

4 files changed

+72
-29
lines changed

4 files changed

+72
-29
lines changed

‎src/plugin/admin/app/view/index/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
<a class="layui-icon layui-icon-username" href="javascript:;"></a>
3838
<!-- 功 能 菜 单 -->
3939
<dl class="layui-nav-child">
40-
<dd><a user-menu-url="/app/admin/account/index" user-menu-id="10" user-menu-title="基本资料" user-menu-type="_iframe">基本资料</a></dd>
40+
<dd><a href="javascript:void(0);" user-menu-url="/app/admin/account/index" user-menu-id="10" user-menu-title="基本资料" user-menu-type="_iframe">基本资料</a></dd>
4141
<dd><a href="javascript:void(0);" class="logout">注销登录</a></dd>
4242
</dl>
4343
</li>

‎src/plugin/admin/public/component/pear/module/admin.js‎

Lines changed: 43 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
2929

3030
/**
3131
* @since Pear Admin 4.0
32-
*
33-
* 获取 pear.config 实现 [ default ]
32+
*
33+
* 获取 pear.config 实现 [ default ]
3434
*/
3535
this.configurationProvider = () => {
3636
return new Promise((resolve) => {
@@ -51,8 +51,8 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
5151
}
5252

5353
/**
54-
* @since Pear Admin 4.0
55-
*
54+
* @since Pear Admin 4.0
55+
*
5656
* 配置 pear.config 路径
5757
*/
5858
this.setConfigurationPath = (path) => {
@@ -61,16 +61,16 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
6161

6262
/**
6363
* @since Pear Admin 4.0
64-
*
65-
* 获取 pear.config 实现 [ implement ]
64+
*
65+
* 获取 pear.config 实现 [ implement ]
6666
*/
6767
this.setConfigurationProvider = (provider) => {
6868
this.configurationProvider = provider;
6969
}
7070

7171
/**
7272
* @since Pear Admin 4.0
73-
*
73+
*
7474
* 获取 pear.config 配置
7575
*/
7676
this.getConfiguration = () => {
@@ -79,10 +79,10 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
7979

8080
/**
8181
* @since Pear Admin 4.0
82-
*
82+
*
8383
* Core Function.
84-
*
85-
* @param {*} options
84+
*
85+
* @param {*} options
8686
*/
8787
this.render = (options) => {
8888
if (options !== undefined) {
@@ -95,8 +95,8 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
9595
}
9696

9797
/**
98-
* @since Pear Admin 4.0
99-
*
98+
* @since Pear Admin 4.0
99+
*
100100
* 启动构建
101101
*/
102102
this.apply = function (configuration) {
@@ -113,7 +113,7 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
113113

114114
/**
115115
* @since Pear Admin 4.0
116-
*
116+
*
117117
* 菜单搜索
118118
*/
119119
this.menuSearchRender = function (options) {
@@ -155,7 +155,7 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
155155

156156
/**
157157
* @since Pear Admin 4.0
158-
*
158+
*
159159
* 消息中心
160160
*/
161161
this.messageCenterRender = function (options) {
@@ -173,7 +173,7 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
173173

174174
/**
175175
* @since Pear Admin 4.0
176-
*
176+
*
177177
* 侧边菜单
178178
*/
179179
this.menuRender = function (param) {
@@ -205,7 +205,7 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
205205

206206
/**
207207
* @since Pear Admin 4.0
208-
*
208+
*
209209
* 视图容器
210210
*/
211211
this.bodyRender = function (param) {
@@ -254,13 +254,28 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
254254
if (data.menuOpenType === "_layer") {
255255
layer.open({ type: 2, title: data.menuTitle, content: data.menuUrl, area: ['80%', '80%'], maxmin: true })
256256
} else {
257-
pearAdmin.instances.tabPage.changePage({
257+
const iframeLoad = $("#" + pearAdmin.instances.tabPage.option.elem).find(".pear-tab-page-loading");
258+
if (data.menuOpenType === "_iframe"){
259+
if (!$(`#${data.menuId}`).length){
260+
iframeLoad.show();
261+
}
262+
}
263+
pearAdmin.instances.tabPage.changePage({
258264
id: data.menuId,
259265
title: data.menuTitle,
260266
type: data.menuOpenType,
261267
url: data.menuUrl,
262268
close: true
263269
});
270+
if (data.menuOpenType === "_iframe") {
271+
$(`#${data.menuId}`).on("load", function () {
272+
iframeLoad.fadeOut(1000, function () {
273+
iframeLoad.css({
274+
display: "none"
275+
});
276+
});
277+
});
278+
}
264279
}
265280
compatible();
266281
})
@@ -304,7 +319,7 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
304319

305320
/**
306321
* @since Pear Admin 4.0
307-
*
322+
*
308323
* 主题配置
309324
*/
310325
this.themeRender = function (option) {
@@ -450,7 +465,7 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
450465

451466
/**
452467
* 设置注销逻辑
453-
*
468+
*
454469
* @param callback 实现
455470
*/
456471
this.logout = function (callback) {
@@ -461,7 +476,7 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
461476

462477
/**
463478
* @since Pear Admin 4.0.3
464-
*
479+
*
465480
* 刷新当前页面
466481
*/
467482
this.refresh = function () {
@@ -477,10 +492,10 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
477492
}
478493

479494
/**
480-
* @since Pear Admin 4.0.3
481-
*
495+
* @since Pear Admin 4.0.3
496+
*
482497
* 切换内容页面
483-
*
498+
*
484499
* PS: tabPages 模式下，如果页面不存在则新增，反则仅做切换。
485500
*/
486501
this.changePage = function (data) {
@@ -495,7 +510,7 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
495510

496511
/**
497512
* @since Pear Admin 4.0
498-
*
513+
*
499514
* 菜单折叠
500515
*/
501516
function collapse() {
@@ -518,11 +533,11 @@ layui.define(['jquery', 'tools', 'element', 'yaml', 'form', 'tabPage', 'menu', '
518533

519534
/**
520535
* @since Pear Admin 4.0
521-
*
522-
* 使用 admin.logout(Function) 实现注销
523-
*
536+
*
537+
* 使用 admin.logout(Function) 实现注销
538+
*
524539
* Promise<boolean> 作为返回值类型时，泛型内容为 true 时视为注销成功，则清除 pearAdmin.instances.tabPage 缓存
525-
*
540+
*
526541
* 否则视为注销失败，不做任何处置。
527542
*/
528543
body.on("click", ".logout", function () {

‎src/plugin/admin/public/css/style.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,16 @@ i[class^=layui-icon-] {
2020
color: white !important;
2121
}
2222

23+
.layui-tab-brief > .layui-tab-title .layui-this {
24+
color: var(--global-primary-color);
25+
}
26+
.layui-tab-brief > .layui-tab-title .layui-this::after {
27+
border-bottom-color: var(--global-primary-color);
28+
}
29+
.layui-tab-brief > .layui-tab-more li.layui-this::after {
30+
border-bottom-color: var(--global-primary-color);
31+
}
32+
2333
.layui-btn {
2434
background-color: transparent;
2535
color: #5f5f5f;

‎src/plugin/admin/public/css/style.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,24 @@ i[class^="layui-icon-"] {
2828
}
2929
}
3030

31+
.layui-tab-brief {
32+
> {
33+
.layui-tab-title {
34+
.layui-this {
35+
color: var(--global-primary-color);
36+
37+
&::after {
38+
border-bottom-color: var(--global-primary-color);
39+
}
40+
}
41+
}
42+
43+
.layui-tab-more li.layui-this::after {
44+
border-bottom-color: var(--global-primary-color);
45+
}
46+
}
47+
}
48+
3149
.layui-btn {
3250
background-color: transparent;
3351
color: #5f5f5f;

0 commit comments

Comments
 (0)