优化手机端表现

This commit is contained in:
augushong
2024-11-07 14:32:34 +08:00
parent e2314b2553
commit 3baaf4747d
14 changed files with 48 additions and 82 deletions

View File

@@ -28,7 +28,7 @@ return [
// 模板缓存
'display_cache' => false,
// 模板编译缓存
'tpl_cache' => true,
'tpl_cache' => false,
// 字符替换
'tpl_replace_string' => [
'__STATIC__' => Env::get('adminsystem.static_path', '/static'),

View File

@@ -3,7 +3,7 @@ $ul_system_menu = array(
array(
"id" => 227,
"pid" => 99999999,
"title" => "后台首",
"title" => "欢迎",
"icon" => "fa fa-home",
"href" => "index/welcome",
"params" => "",

View File

@@ -5,6 +5,7 @@
{:event_view_content('AdminLayoutRequireBefore')}
<link rel="stylesheet" href="//layui.ulthon.com/cdn/layui-ul.css">
<link rel="stylesheet" href="__STATIC__/admin/css/public.css?t={:get_site_version_key()}" media="all">
<link rel="stylesheet" href="__STATIC__/common/css/theme/index.css?t={:get_site_version_key()}">
<link rel="stylesheet" href="__STATIC__/plugs/wangeditor/style.css">

View File

@@ -10,7 +10,7 @@
<div class="layui-logo layuimini-logo"></div>
<div class="layuimini-header-content">
<a>
<a class="layui-hide-xs">
<div class="layuimini-tool"><i title="展开" class="fa fa-outdent" data-side-fold="1"></i></div>
</a>
@@ -21,9 +21,7 @@
<!--手机端头部菜单-->
<ul class="layui-nav layui-layout-left layuimini-header-menu layuimini-mobile-show">
<li class="layui-nav-item">
<a href="javascript:;"><i class="fa fa-list-ul"></i> 选择模块</a>
<dl class="layui-nav-child layuimini-menu-header-mobile">
</dl>
<a layuimini-content-href="{:url('admin/Index/mobile')}" data-title="菜单"><i class="fa fa-list-ul"></i>菜单</a>
</li>
</ul>
@@ -49,10 +47,12 @@
</a>
<dl class="layui-nav-child">
<dd>
<a href="javascript:;" layuimini-content-href="{:__url('index/editAdmin')}" data-title="基本资料" data-icon="fa fa-gears">基本资料<span class="layui-badge-dot"></span></a>
<a href="javascript:;" layuimini-content-href="{:__url('index/editAdmin')}" data-title="基本资料" data-icon="fa fa-gears">基本资料<span
class="layui-badge-dot"></span></a>
</dd>
<dd>
<a href="javascript:;" layuimini-content-href="{:__url('index/editPassword')}" data-title="修改密码" data-icon="fa fa-gears">修改密码</a>
<a href="javascript:;" layuimini-content-href="{:__url('index/editPassword')}" data-title="修改密码"
data-icon="fa fa-gears">修改密码</a>
</dd>
<dd>
<hr>
@@ -87,7 +87,12 @@
<div class="layui-body">
<div class="layuimini-tab layui-tab-rollTool layui-tab" lay-filter="layuiminiTab" lay-allowclose="true">
<ul class="layui-tab-title">
{if $Request.isMobile }
<li class="layui-this" id="layuiminiHomeTabIdMobile" lay-id=""></li>
<li class="" id="layuiminiHomeTabId" lay-id=""></li>
{else /}
<li class="layui-this" id="layuiminiHomeTabId" lay-id=""></li>
{/if}
{:event_view_content('AdminMenuTab')}
</ul>
<div class="layui-tab-control">
@@ -107,9 +112,14 @@
</li>
</div>
<div class="layui-tab-content">
{if $Request.isMobile }
<div id="layuiminiHomeTabIframeMobile" class="layui-tab-item layui-show"></div>
<div id="layuiminiHomeTabIframe" class="layui-tab-item"></div>
{else /}
<div id="layuiminiHomeTabIframe" class="layui-tab-item layui-show"></div>
{/if}
</div>
</div>
</div>
</div>
</body>
</body>

View File

@@ -4,7 +4,6 @@ $(function () {
clearUrl: ua.url("ajax/clearCache"), // 缓存清理接口
urlHashLocation: true, // 是否打开hash定位
bgColorDefault: false, // 主题默认配置
multiModule: true, // 是否开启多模块
menuChildOpen: false, // 是否默认展开菜单
loadingTime: 0, // 初始化加载时间
pageAnim: true, // iframe窗口动画

View File

@@ -3,7 +3,7 @@
<div class="ul-section ul-padding-md">
<div class="ul-group-title">基本</div>
<div class="ul-nav-grid colord box">
<a href="{:__url('admin/index/welcome')}" class="item">
<a layuimini-content-href="{:__url('admin/index/welcome')}" class="item">
<div class="icon">
<div class="main"><i class="{$home_info.icon}"></i></div>
</div>
@@ -18,7 +18,7 @@
<div class="ul-group-title">{$vo.title}</div>
<div class="ul-nav-grid colord box">
{volist name='vo.children' id='vovo'}
<a href="{$vovo.href}" class="item">
<a layuimini-content-href="{$vovo.href}" data-title="{$vovo.title}" class="item">
<div class="icon">
<div class="main"><i class="{$vovo.icon}"></i></div>
</div>

View File

@@ -0,0 +1,3 @@
$(function () {
ua.listen();
});

View File

@@ -30,38 +30,6 @@
</head>
<body>
{if $Request.isMobile }
<link rel="stylesheet" href="//layui.ulthon.com/cdn/layui-ul.css">
<div class="ul-section">
<div class="ul-header">
<div class="ul-header-main" style="max-width: 600px;">
<div class="ul-header-left">
<a href="{:__url('admin/index/mobile')}" class="">
<img class="ul-header-logo" src="{$logo_info.image}" alt="">
</a>
</div>
{notempty name='session_admin'}
<div class="ul-header-right">
<div class="ul-header-user">
<div class="ul-header-user-avatar" style="background-image: url('{$session_admin.head_img}');">
</div>
<div class="ul-header-user-info">
<div class="ul-header-user-name">
{$session_admin.username}
</div>
<div class="ul-header-user-options">
<i class="ul-icon-exit"></i>
<span>退出</span>
</div>
</div>
</div>
</div>
{/notempty}
</div>
</div>
</div>
{/if}
{__CONTENT__}
<script style="display: none;" id="data-brage" type="text/plain">{$data_brage|raw|default='[]'}</script>
</body>

View File

@@ -37,6 +37,9 @@ class MenuServiceBase
->find();
!empty($data) && $data['href'] = __url($data['href']);
$data['mb_title'] = '菜单';
$data['mb_href'] = (string)url('admin/Index/mobile');
return $data;
}

View File

@@ -250,8 +250,7 @@ $box-shape: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%,
}
.layui-layout-admin .layui-header .layuimini-header-content>ul>.layui-nav-item.layui-this,
.layuimini-tool i:hover {
.layui-layout-admin .layui-header .layuimini-header-content>ul>.layui-nav-item.layui-this {
background-color: $main-color !important;
}
@@ -496,10 +495,6 @@ $box-shape: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%,
color: $black-color;
}
.layui-layout-admin .layui-header .layuimini-tool i {
color: $main-color;
}
.color-red {
color: $red-color !important;
}

View File

@@ -332,8 +332,7 @@
.elem-style-sicfi .layui-layout-admin .layui-header .layui-nav .layui-nav-item {
background-color: rgba(62, 251, 251, 0.5);
}
.elem-style-sicfi .layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this,
.elem-style-sicfi .layuimini-tool i:hover {
.elem-style-sicfi .layui-layout-admin .layui-header .layuimini-header-content > ul > .layui-nav-item.layui-this {
background-color: rgb(126, 252, 246) !important;
}
.elem-style-sicfi .layuimini-tab .layui-tab-control > li {

View File

@@ -21,7 +21,6 @@
* @param options.clearUrl 后台清理缓存接口
* @param options.urlHashLocation URL地址hash定位
* @param options.bgColorDefault 默认皮肤
* @param options.multiModule 是否开启多模块
* @param options.menuChildOpen 是否展开子菜单
* @param options.loadingTime 初始化加载时间
* @param options.pageAnim iframe窗口动画
@@ -32,7 +31,6 @@
options.clearUrl = options.clearUrl || null;
options.urlHashLocation = options.urlHashLocation || false;
options.bgColorDefault = options.bgColorDefault || 0;
options.multiModule = options.multiModule || false;
options.menuChildOpen = options.menuChildOpen || false;
options.loadingTime = options.loadingTime || 1;
options.pageAnim = options.pageAnim || false;
@@ -48,13 +46,11 @@
miniAdmin.listen();
miniMenu.render({
menuList: data.menuInfo,
multiModule: options.multiModule,
menuChildOpen: options.menuChildOpen
});
miniTab.render({
filter: 'layuiminiTab',
urlHashLocation: options.urlHashLocation,
multiModule: options.multiModule,
menuChildOpen: options.menuChildOpen,
maxTabNum: options.maxTabNum,
menuList: data.menuInfo,
@@ -92,10 +88,18 @@
* @param data
*/
renderHome: function (data) {
// 初始化欢迎页面
sessionStorage.setItem('layuiminiHomeHref', data.href);
$('#layuiminiHomeTabId').html('<span class="layuimini-tab-active"></span><span class="disable-close">' + data.title + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>');
$('#layuiminiHomeTabId').attr('lay-id', data.href);
$('#layuiminiHomeTabIframe').html('<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" src="' + data.href + '"></iframe>');
if($('#layuiminiHomeTabIdMobile').length == 1){
$('#layuiminiHomeTabIdMobile').html('<span class="layuimini-tab-active"></span><span class="disable-close">' + data.mb_title + '</span><i class="layui-icon layui-unselect layui-tab-close">ဆ</i>');
$('#layuiminiHomeTabIdMobile').attr('lay-id', data.mb_href);
$('#layuiminiHomeTabIframeMobile').html('<iframe width="100%" height="100%" frameborder="no" border="0" marginwidth="0" marginheight="0" src="' + data.mb_href + '"></iframe>');
}
},
/**

View File

@@ -8,14 +8,13 @@
/**
* 菜单初始化
* @param options.menuList 菜单数据信息
* @param options.multiModule 是否开启多模块
* @param options.menuChildOpen 是否展开子菜单
*/
render: function (options) {
options.menuList = options.menuList || [];
options.multiModule = options.multiModule || false;
options.menuChildOpen = options.menuChildOpen || false;
if (options.multiModule) {
if (!ua.checkMobile()) {
miniMenu.renderMultiModule(options.menuList, options.menuChildOpen);
} else {
miniMenu.renderSingleModule(options.menuList, options.menuChildOpen);
@@ -37,7 +36,6 @@
if (menuChildOpen) childOpenClass = ' layui-nav-itemed';
leftMenuHtml = this.renderLeftMenu(menuList, { childOpenClass: childOpenClass });
$('.layui-layout-body').addClass('layuimini-single-module'); //单模块标识
$('.layuimini-header-menu').remove();
$('.layuimini-menu-left').html(leftMenuHtml);
element.init();
@@ -113,7 +111,7 @@
menuList = menuList || [];
var me = this;
var headerMenuHtml = '',
headerMobileMenuHtml = '',
leftMenuHtml = '',
leftMenuCheckDefault = 'layui-this',
childOpenClass = '',
@@ -138,7 +136,7 @@
childOpenClass: childOpenClass,
leftMenuCheckDefault: leftMenuCheckDefault
});
headerMobileMenuHtml += me.compileMenu({ id: id, menu: menu, id: id, icon: val.icon, title: val.title, }, true);
headerMenuCheckDefault = "";
leftMenuCheckDefault = "layui-hide";
return topMenuItemHtml;
@@ -146,7 +144,7 @@
$('.layui-layout-body').addClass('layuimini-multi-module'); //多模块标识
$('.layuimini-menu-header-pc').html(headerMenuHtml); //电脑
$('.layuimini-menu-left').html(leftMenuHtml);
$('.layuimini-menu-header-mobile').html(headerMobileMenuHtml); //手机
element.init();
},
@@ -221,19 +219,6 @@
element.init();
layer.close(loading);
});
/**
* 手机端点开模块
*/
$('body').on('click', '.layuimini-header-menu.layuimini-mobile-show dd', function () {
var loading = layer.load(0, { shade: false, time: 2 * 1000 });
var check = $('.layuimini-tool [data-side-fold]').attr('data-side-fold');
if (check === "1") {
$('.layuimini-site-mobile').trigger("click");
element.init();
}
layer.close(loading);
});
},
};

View File

@@ -9,7 +9,6 @@
*/
render: function (options) {
options.filter = options.filter || null;
options.multiModule = options.multiModule || false;
options.urlHashLocation = options.urlHashLocation || false;
options.maxTabNum = options.maxTabNum || 20;
options.menuList = options.menuList || []; // todo 后期菜单想改为不操作dom, 而是直接操作初始化传过来的数据
@@ -290,7 +289,7 @@
var tabId = $(this).attr('lay-id');
var id = $(this).attr('id');
var isCurrent = $(this).hasClass('layui-this');
if (id !== 'layuiminiHomeTabId') {
if (id !== 'layuiminiHomeTabId' && id !== 'layuiminiHomeTabIdMobile') {
if (closeType === 'all') {
miniTab.delete(tabId);
} else {
@@ -343,7 +342,7 @@
$('.layuimini-tab .layui-tab-title li').each(function () {
var tabId = $(this).attr('lay-id');
var id = $(this).attr('id');
if (id !== 'layuiminiHomeTabId') {
if (id !== 'layuiminiHomeTabId' && id !== 'layuiminiHomeTabIdMobile') {
if (closeType === 'all') {
miniTab.delete(tabId);
} else {
@@ -366,7 +365,6 @@
*/
listenSwitch: function (options) {
options.filter = options.filter || null;
options.multiModule = options.multiModule || false;
options.urlHashLocation = options.urlHashLocation || false;
options.listenSwichCallback = options.listenSwichCallback || function () { };
element.on('tab(' + options.filter + ')', function (data) {
@@ -382,7 +380,7 @@
$('.layuimini-menu-left').attr('layuimini-tab-tag', 'no');
} else {
$('[layuimini-href]').parent().removeClass('layui-this');
if (options.multiModule) {
if (!ua.checkMobile()) {
miniTab.listenSwitchMultiModule(tabId);
} else {
miniTab.listenSwitchSingleModule(tabId);
@@ -402,12 +400,13 @@
options.maxTabNum = options.maxTabNum || 20;
options.homeInfo = options.homeInfo || {};
options.menuList = options.menuList || [];
if (!options.urlHashLocation) return false;
var tabId = location.hash.replace(/^#/, '');
if (tabId === null || tabId === undefined || tabId === '') return false;
// 判断是否为首页
if (tabId === options.homeInfo.href) return false;
if (tabId === options.homeInfo.href || tabId === options.homeInfo.mb_href) return false;
// 判断是否为右侧菜单
var menu = miniTab.searchMenu(tabId, options.menuList);