From 7e2834b6fabd6f5c25e3a0c393a4735c6641f6c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=82=B9=E6=99=AF=E7=AB=8B?= Date: Wed, 20 May 2026 23:19:28 +0800 Subject: [PATCH] =?UTF-8?q?style(queue):=20=E4=BC=98=E5=8C=96=E9=98=9F?= =?UTF-8?q?=E5=88=97=E4=BB=BB=E5=8A=A1=E6=89=A7=E8=A1=8C=E7=AA=97=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 重构队列进度弹窗模板，增加任务编号、状态区域和执行日志头部，并注入独立样式让进度条、日志面板和弹窗标题更清晰。 调整队列弹窗尺寸和皮肤，保持日志区域可滚动展示，减少旧模板中 textarea 风格对实时日志阅读体验的影响。 为队列页面操作按钮补充语义化颜色：优化、启动、关闭、清理和批量删除分别使用不同按钮样式，提升危险操作和普通操作的辨识度。 --- .../stc/public/static/plugs/system/queue.js | 43 ++++++++++++++++++- .../src/builder/QueueBuilder.php | 6 ++- 2 files changed, 46 insertions(+), 3 deletions(-) diff --git a/plugin/think-plugs-static/stc/public/static/plugs/system/queue.js b/plugin/think-plugs-static/stc/public/static/plugs/system/queue.js index f7a56ba83..df342d2b2 100644 --- a/plugin/think-plugs-static/stc/public/static/plugs/system/queue.js +++ b/plugin/think-plugs-static/stc/public/static/plugs/system/queue.js @@ -14,12 +14,51 @@ layui.define(function (exports) { - let template = '
...
' + '
'; + let template = [ + '
', + '
', + '
...
', + '
# {{d.code}}
', + '
', + '
', + '
', + '
执行日志实时刷新
', + ' ', + '
', + '
' + ].join(''); + + function injectStyle() { + if (document.getElementById('ta-queue-style')) return; + let style = document.createElement('style'); + style.id = 'ta-queue-style'; + style.innerHTML = [ + '.ta-queue-layer{border-radius:10px;overflow:hidden;}', + '.ta-queue-layer .layui-layer-title{height:48px;line-height:48px;font-weight:600;border-bottom:1px solid #edf0f5;background:#fff;}', + '.ta-queue-layer .layui-layer-content{overflow:hidden;background:#f6f8fb;}', + '.ta-queue-box{padding:18px 20px 20px;background:#f6f8fb;}', + '.ta-queue-status{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;background:#fff;border:1px solid #edf0f5;border-radius:10px;box-shadow:0 4px 18px rgba(15,35,60,.04);}', + '.ta-queue-status-title{min-width:0;flex:1;font-weight:600;}', + '.ta-queue-status-title b{font-weight:600;}', + '.ta-queue-status-code{flex-shrink:0;max-width:220px;color:#8c98a8;font-size:12px;line-height:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}', + '.ta-queue-progress{height:12px;margin:14px 2px 0;border-radius:999px;background:#e8edf5;overflow:hidden;}', + '.ta-queue-progress .layui-progress-bar{border-radius:999px;}', + '.ta-queue-progress .layui-progress-text{top:-6px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.2);}', + '.ta-queue-log{margin-top:14px;border-radius:10px;background:#222b33;border:1px solid #1a222a;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);}', + '.ta-queue-log-head{height:36px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;background:#172027;color:#dce5ee;font-size:13px;}', + '.ta-queue-log-head small{font-size:12px;font-weight:400;color:#7f8b98;}', + '.ta-queue-log code{display:block;height:185px;margin:0;padding:12px 14px;border:0;background:#222b33;color:#dce5ee;font-family:Consolas,Monaco,Menlo,monospace;font-size:12px;line-height:22px;white-space:normal;overflow:auto;}', + '.ta-queue-log code p{height:22px;line-height:22px;margin:0;color:#dce5ee;}', + '.ta-queue-log code .color-desc{color:#8c98a8!important;}' + ].join(''); + document.head.appendChild(style); + } function Queue(code, doScript, element) { let queue = this; + injectStyle(); (this.doAjax = true) && (this.doReload = false) || layer.open({ - type: 1, title: false, area: ['560px', '315px'], anim: 2, shadeClose: false, end: function () { + type: 1, title: '任务执行进度', area: ['620px', '390px'], skin: 'ta-queue-layer', anim: 2, shadeClose: false, end: function () { queue.doAjax = queue.doReload && doScript && $.layTable.reload(((element || {}).dataset || {}).tableId || true) && false; }, content: laytpl(template).render({code: code}), success: function ($elem) { new Progress($elem, code, queue, doScript); diff --git a/plugin/think-plugs-system/src/builder/QueueBuilder.php b/plugin/think-plugs-system/src/builder/QueueBuilder.php index cad72a554..a5c62c894 100644 --- a/plugin/think-plugs-system/src/builder/QueueBuilder.php +++ b/plugin/think-plugs-system/src/builder/QueueBuilder.php @@ -31,26 +31,30 @@ class QueueBuilder $buttons->button('优化数据库', [ 'data-table-id' => 'QueueTable', 'data-queue' => apiuri('system/plugs/optimize'), + 'class' => 'layui-btn-normal', ]); if ($iswin || php_sapi_name() === 'cli') { $buttons->button('启动服务', [ 'type' => 'button', 'data-queue-service' => null, 'data-service-url' => apiuri('system/queue/start'), + 'class' => 'layui-btn-primary', ], null, 'button'); $buttons->button('关闭服务', [ 'type' => 'button', 'data-queue-service' => null, 'data-service-url' => apiuri('system/queue/stop'), + 'class' => 'layui-btn-warm', ], null, 'button'); } $buttons->button('定时清理', [ 'type' => 'button', 'data-table-id' => 'QueueTable', 'data-queue' => url('clean')->build(), + 'class' => 'layui-btn-primary', ], null, 'button'); } - $buttons->batchAction('批量删除', url('remove')->build(), 'id#{id}', '确定批量删除记录吗？', [], 'remove'); + $buttons->batchAction('批量删除', url('remove')->build(), 'id#{id}', '确定批量删除记录吗？', ['class' => 'layui-btn-danger'], 'remove'); if ($super) { $buttons->button('复制启动命令', [ 'data-copy' => $command,