fix(phone-image): 移除不存在的layui dropdown依赖,改用纯JS下拉菜单

layui 2.x没有内置dropdown模块,导致整个页面JS回调不执行。
- layui.use依赖从['form','layer','dropdown']改为['form','layer']
- 用纯jQuery实现toggle下拉菜单替代dropdown.render()
- 添加more-dropdown-menu CSS hover样式
This commit is contained in:
augushong
2026-05-11 23:20:20 +08:00
parent f6fc53940c
commit b6f2e9ef09
2 changed files with 40 additions and 29 deletions

View File

@@ -713,6 +713,11 @@ body > .page-header-right .layui-btn:not(.layui-btn-primary):not(.layui-btn-norm
color: var(--pi-color-accent); color: var(--pi-color-accent);
} }
.more-dropdown-menu li:hover {
background: rgba(24, 144, 255, 0.06);
color: var(--pi-color-accent);
}
/* --- 主布局两栏 --- */ /* --- 主布局两栏 --- */
.main-layout { .main-layout {
display: flex; display: flex;

View File

@@ -117,9 +117,15 @@
class="layui-icon layui-icon-ok"></i> 保存</button> class="layui-icon layui-icon-ok"></i> 保存</button>
<button type="button" class="layui-btn layui-btn-sm" id="btn-generate"><i <button type="button" class="layui-btn layui-btn-sm" id="btn-generate"><i
class="layui-icon layui-icon-picture"></i> 生成并保存</button> class="layui-icon layui-icon-picture"></i> 生成并保存</button>
<div class="layui-btn-group" style="margin:0;"> <div class="more-dropdown-wrapper" style="position:relative;display:inline-block;">
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="btn-more"><i <button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="btn-more"><i
class="layui-icon layui-icon-more"></i></button> class="layui-icon layui-icon-more"></i></button>
<ul class="more-dropdown-menu" id="more-dropdown-menu" style="display:none;position:absolute;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid #e8e8e8;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,0.12);z-index:9999;min-width:130px;padding:4px 0;list-style:none;">
<li data-action="history" style="padding:8px 16px;cursor:pointer;font-size:13px;white-space:nowrap;">历史记录</li>
<li data-action="rerender" style="padding:8px 16px;cursor:pointer;font-size:13px;white-space:nowrap;">重新生成</li>
<li data-action="download" style="padding:8px 16px;cursor:pointer;font-size:13px;white-space:nowrap;">打包下载</li>
<li data-action="exportLong" style="padding:8px 16px;cursor:pointer;font-size:13px;white-space:nowrap;">导出长图</li>
</ul>
</div> </div>
</div> </div>
</div> </div>
@@ -143,10 +149,9 @@
<script src="/static/lib/html2canvas/html2canvas.js"></script> <script src="/static/lib/html2canvas/html2canvas.js"></script>
<script src="/static/js/phone-image.js"></script> <script src="/static/js/phone-image.js"></script>
<script> <script>
layui.use(['form', 'layer', 'dropdown'], function () { layui.use(['form', 'layer'], function () {
var form = layui.form; var form = layui.form;
var layer = layui.layer; var layer = layui.layer;
var dropdown = layui.dropdown;
var lastOutputId = null; var lastOutputId = null;
var downloadBaseUrl = '{:url("post/downloadPostOutputZip", ["id" => 0])}'; var downloadBaseUrl = '{:url("post/downloadPostOutputZip", ["id" => 0])}';
@@ -350,17 +355,16 @@
}, 300); }, 300);
} }
// ========== 更多下拉菜单 ========== // ========== 更多下拉菜单纯JS实现 ==========
dropdown.render({ var $menu = $('#more-dropdown-menu');
elem: '#btn-more', $('#btn-more').on('click', function(e) {
data: [ e.stopPropagation();
{ title: '历史记录', id: 'history' }, $menu.toggle();
{ title: '重新生成', id: 'rerender' }, });
{ title: '打包下载', id: 'download' }, $menu.on('click', 'li', function() {
{ title: '导出长图', id: 'exportLong' } var action = $(this).data('action');
], $menu.hide();
click: function (data) { switch (action) {
switch (data.id) {
case 'history': case 'history':
$('#btn-history').trigger('click'); $('#btn-history').trigger('click');
break; break;
@@ -374,8 +378,10 @@
$('#btn-export-long-hidden').trigger('click'); $('#btn-export-long-hidden').trigger('click');
break; break;
} }
}, });
align: 'right' // 点击外部关闭
$(document).on('click', function() {
$menu.hide();
}); });
// ========== 自动保存相关函数 ========== // ========== 自动保存相关函数 ==========