From b6f2e9ef0917346776ef4162fdcbaee3a2cdc431 Mon Sep 17 00:00:00 2001
From: augushong <augushong@163.com>
Date: Mon, 11 May 2026 23:20:20 +0800
Subject: [PATCH] =?UTF-8?q?fix(phone-image):=20=E7=A7=BB=E9=99=A4=E4=B8=8D?=
 =?UTF-8?q?=E5=AD=98=E5=9C=A8=E7=9A=84layui=20dropdown=E4=BE=9D=E8=B5=96?=
 =?UTF-8?q?=EF=BC=8C=E6=94=B9=E7=94=A8=E7=BA=AFJS=E4=B8=8B=E6=8B=89?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

layui 2.x没有内置dropdown模块，导致整个页面JS回调不执行。
- layui.use依赖从['form','layer','dropdown']改为['form','layer']
- 用纯jQuery实现toggle下拉菜单替代dropdown.render()
- 添加more-dropdown-menu CSS hover样式
---
 public/static/css/phone-image-templates.css |  5 ++
 view/admin/post/phone_image.html            | 64 +++++++++++----------
 2 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/public/static/css/phone-image-templates.css b/public/static/css/phone-image-templates.css
index 606d6e4..bcf9e65 100644
--- a/public/static/css/phone-image-templates.css
+++ b/public/static/css/phone-image-templates.css
@@ -713,6 +713,11 @@ body > .page-header-right .layui-btn:not(.layui-btn-primary):not(.layui-btn-norm
     color: var(--pi-color-accent);
 }
 
+.more-dropdown-menu li:hover {
+    background: rgba(24, 144, 255, 0.06);
+    color: var(--pi-color-accent);
+}
+
 /* --- 主布局两栏 --- */
 .main-layout {
     display: flex;
diff --git a/view/admin/post/phone_image.html b/view/admin/post/phone_image.html
index ad2b21a..6bb1d09 100644
--- a/view/admin/post/phone_image.html
+++ b/view/admin/post/phone_image.html
@@ -117,9 +117,15 @@
                     class="layui-icon layui-icon-ok"></i> 保存</button>
             <button type="button" class="layui-btn layui-btn-sm" id="btn-generate"><i
                     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
                         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>
@@ -143,10 +149,9 @@
     <script src="/static/lib/html2canvas/html2canvas.js"></script>
     <script src="/static/js/phone-image.js"></script>
     <script>
-        layui.use(['form', 'layer', 'dropdown'], function () {
+        layui.use(['form', 'layer'], function () {
             var form = layui.form;
             var layer = layui.layer;
-            var dropdown = layui.dropdown;
 
             var lastOutputId = null;
             var downloadBaseUrl = '{:url("post/downloadPostOutputZip", ["id" => 0])}';
@@ -350,32 +355,33 @@
                 }, 300);
             }
 
-            // ========== 更多下拉菜单 ==========
-            dropdown.render({
-                elem: '#btn-more',
-                data: [
-                    { title: '历史记录', id: 'history' },
-                    { title: '重新生成', id: 'rerender' },
-                    { title: '打包下载', id: 'download' },
-                    { title: '导出长图', id: 'exportLong' }
-                ],
-                click: function (data) {
-                    switch (data.id) {
-                        case 'history':
-                            $('#btn-history').trigger('click');
-                            break;
-                        case 'rerender':
-                            doRender();
-                            break;
-                        case 'download':
-                            $('#btn-download-hidden').trigger('click');
-                            break;
-                        case 'exportLong':
-                            $('#btn-export-long-hidden').trigger('click');
-                            break;
-                    }
-                },
-                align: 'right'
+            // ========== 更多下拉菜单（纯JS实现） ==========
+            var $menu = $('#more-dropdown-menu');
+            $('#btn-more').on('click', function(e) {
+                e.stopPropagation();
+                $menu.toggle();
+            });
+            $menu.on('click', 'li', function() {
+                var action = $(this).data('action');
+                $menu.hide();
+                switch (action) {
+                    case 'history':
+                        $('#btn-history').trigger('click');
+                        break;
+                    case 'rerender':
+                        doRender();
+                        break;
+                    case 'download':
+                        $('#btn-download-hidden').trigger('click');
+                        break;
+                    case 'exportLong':
+                        $('#btn-export-long-hidden').trigger('click');
+                        break;
+                }
+            });
+            // 点击外部关闭
+            $(document).on('click', function() {
+                $menu.hide();
             });
 
             // ========== 自动保存相关函数 ==========