Dcatplus admin 状态管理器

AI摘要

该内容为 Dcat Admin 后台框架的订单状态管理器代码片段，展示通过 Tab 组件实现订单状态筛选导航栏，并附带 dcatplus-admin 官方演示地址及版本升级说明，包括 Laravel 12/13 支持、PHP 8.3+ 语法、安全修复、多菜单模式等新特性，属技术知识分享。

订单状态管理器

Laravel

            // 顶部导航栏：订单状态筛选
            $tab = \Dcat\Admin\Widgets\Tab::make()->tabStyle( 'nav-pills justify-content-center');
            $statusList = YzhOrder::$statusListMap;
            $request = request();
            $scope = $request->input('_scope_');

            $tab->addLink('全部', admin_url('shop-order'),empty($scope) ? true:false);
            if(!empty($statusList)){
                foreach ($statusList as $key => $value){
                    if($key == '-2'){
                        $key = 'aftersale';
                    }
                    $tab->addLink($value, admin_url('shop-order').'?_scope_=view'.$key.'&status='.$key,$scope == 'view'.$key ? true:false);
                }
            }
            $grid->header($tab->render())->headerCenterStyle('600px');

在线演示

dcatplus-admin 官方演示地址：laravel13.dcat-admin.com/admin

主要升级点：

✅ Laravel 12/13 支持
✅ PHP 8.3+ 现代语法
✅ 安全漏洞全面修复
✅ 新增多菜单模式、iframe-Tabs、可视化配置等
✅ 内置常用扩展包，减少集成成本

[现在的开源维护作者杨光]

可加作者微信:Q3664839, 加入 dcat-admin 开发交流群。

dcat-admin dcat-plus-admin

Dcat-Admin (plus版)是汇聚Filament，Laravel-admin , Dcat-admin 优点于一身的基于Laravel + Bootstrap 的极速开发框架

Dcatplus-杨光

课程读者 467 声望

Dcat-plus Admin @ 速码邦

退伍老兵,终身学习成长. 欢迎加Wx(Q3664839) 交流技术,项目

1 人点赞

我们将带你从零开发一个项目并部署到线上，本课程教授 Web 开发中专业、实用的技能，如 Git 工作流、Laravel Mix 前端工作流等。

以构建论坛项目 LaraBBS 为线索，展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。

后台管理界面近期修复记录

本文整理近期针对后台管理界面的一批修复，主要涉及移动端适配、吸顶导航栏遮挡、UEditor 编辑器层级与浮动工具栏，以及双栏菜单滚动条等问题。

修复移动端导航栏纵向堆叠、高度膨胀问题

fix(navbar): 修复移动端导航栏纵向堆叠、高度膨胀问题

<992px 时 BS4 把 .navbar-nav 排成纵向 flex，≤576px 时主题 fullNav mixin 又把 .navbar-container 改为 display:table/height:auto，二者叠加导致右侧图标竖排、导航栏被撑到 500px+、头像溢出屏幕。

在 navbar 局部视图内追加移动端媒体查询：

.navbar-container 恢复 flex + 60px 固定高（覆盖 fullNav）
.navbar-nav 恢复横向单行排列
图标与头像收窄水平内边距，390px 视口内整行完整可见
更窄视口下图标行支持横向滚动（隐藏滚动条）兜底

已在 390px/800px、默认菜单与双栏菜单模式下实测验证。

修复移动端用户头像等下拉菜单错位截断问题

fix(navbar): 修复移动端用户头像等下拉菜单错位截断问题

BS4 在 <lg 断点把 .navbar-nav .dropdown-menu 排成流内 static 元素，主题又在 ≤576px 强制 .show .dropdown-menu left:0!important，叠加导致点击头像后菜单错位到页面中间、顶部被裁、右侧溢出屏幕。

移动端媒体查询中恢复下拉菜单绝对定位：锚定在触发的 li 下方右对齐，宽度以 calc(100vw - 1rem) 收敛，超高滚动；同时移除上次为图标行加的 overflow-x 滚动裁剪（它会裁掉绝对定位的菜单），更窄视口的整行溢出改由页面级横向滚动兜底。

实测：390px 用户菜单/通知菜单正常右对齐显示，桌面端无回归。

layui-layer 弹层移动端适配

fix(layer): layui-layer 弹层移动端适配

layer 弹层在桌面端多为固定宽度（如通知详情 600px），layer.js 以行内样式写死 left/width，在 ≤768px 视口下溢出屏幕。

在导航栏局部视图的全局样式块中追加媒体查询（navbar 局部被主布局包含，全后台页面生效）：弹层左右各留 10px 铺满显示，内容区限制最大高度并支持横向滚动；loading/tips/msg 小型浮层保持原定位不受影响，图片查看弹层同样收敛宽度。

实测：390px 下通知详情弹层完整显示，layer.msg 不会被拉伸，confirm 对话框正常。

调低 UEditor 容器 z-index，不再遮挡吸顶导航栏等内容

fix(editor): 调低 UEditor 容器 z-index，不再遮挡吸顶导航栏等内容

UEditor 默认给编辑器容器写行内 z-index:999，高于 Dcat 吸顶导航栏（997），页面滚动时编辑器会盖住导航栏等浮动内容。

将 z-index 基准值改为可配置项 admin.ueditor.z_index，默认 990：容器低于导航栏，而 UEditor 内部弹窗/菜单基于该值 +10 派生为 1000，仍高于导航栏，插入图片等对话框不受影响。

实测：容器行内样式 999→990，编辑器滚动到导航栏下方时导航栏完整显示在最上层，段落下拉菜单层级 1000 正常。

滚动定位补偿吸顶导航栏高度

fix(layout): 滚动定位补偿吸顶导航栏高度

锚点跳转、scrollIntoView 等滚动定位落在视口顶部，内容钻到 60px 吸顶导航栏下面被遮住一截。给 html 增加 scroll-padding-top: 70px，所有滚动定位统一停在导航栏下方。

UEditor 浮动工具栏让出吸顶导航栏高度

fix(editor): UEditor 浮动工具栏让出吸顶导航栏高度

UEditor autoFloat 插件默认开启，长编辑器滚动时工具栏脱离并吸附到视口 y=0，钻到 60px 吸顶导航栏下面被遮住一截。

新增配置项 admin.ueditor.top_offset（默认 60，即导航栏高度），映射为 UEditor 的 topOffset 选项：浮动工具栏吸附在导航栏正下方。

实测：滚动触发浮动后工具栏 position:fixed; top:60px，完整可见。

双栏菜单第一栏滚动条改为细滚动条

fix(menu): 双栏菜单第一栏滚动条改为细滚动条

实际滚动发生在左栏内层 .icon-nav，此前只有外层 .two-col-icon-bar 定义了 4px 细滚动条，内层走浏览器默认宽滚动条。现在两层统一为 4px 细滚动条，并补充 scrollbar-width/scrollbar-color 兼容 Firefox。

以上修复覆盖了导航栏、下拉菜单、弹层、编辑器与菜单滚动条等常见交互问题，移动端体验和吸顶导航栏遮挡问题得到明显改善。

file

4天前评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容，与人为善，比聪明更重要！

帮助

Dcatplus admin 状态管理器

订单状态管理器

在线演示

[现在的开源维护作者杨光]

推荐文章：

后台管理界面近期修复记录

修复移动端导航栏纵向堆叠、高度膨胀问题

修复移动端用户头像等下拉菜单错位截断问题

layui-layer 弹层移动端适配

调低 UEditor 容器 z-index，不再遮挡吸顶导航栏等内容

滚动定位补偿吸顶导航栏高度

UEditor 浮动工具栏让出吸顶导航栏高度

双栏菜单第一栏滚动条改为细滚动条

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

Dcatplus admin 状态管理器

订单状态管理器

在线演示

[现在的开源维护作者 杨光]

推荐文章：

后台管理界面近期修复记录

修复移动端导航栏纵向堆叠、高度膨胀问题

修复移动端用户头像等下拉菜单错位截断问题

layui-layer 弹层移动端适配

调低 UEditor 容器 z-index，不再遮挡吸顶导航栏等内容

滚动定位补偿吸顶导航栏高度

UEditor 浮动工具栏让出吸顶导航栏高度

双栏菜单第一栏滚动条改为细滚动条

社区赞助商

关于 LearnKu

资源推荐

服务提供商

其他信息

请登录

[现在的开源维护作者杨光]