blackteay/ThinkAdmin
1
0
Fork 0
mirror of https://gitee.com/zoujingli/ThinkAdmin.git synced 2026-06-06 12:08:10 +08:00
Code Issues Projects Releases Wiki Activity

style(queue): 优化队列任务执行窗口

Browse Source 
重构队列进度弹窗模板，增加任务编号、状态区域和执行日志头部，并注入独立样式让进度条、日志面板和弹窗标题更清晰。

调整队列弹窗尺寸和皮肤，保持日志区域可滚动展示，减少旧模板中 textarea 风格对实时日志阅读体验的影响。

为队列页面操作按钮补充语义化颜色：优化、启动、关闭、清理和批量删除分别使用不同按钮样式，提升危险操作和普通操作的辨识度。
This commit is contained in:
邹景立 2026-05-20 23:19:28 +08:00
parent 0f3d84d4cd
commit 7e2834b6fa
2 changed files with 46 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
plugin/think-plugs-static/stc/public/static/plugs/system/queue.js
View File

@ -14,12 +14,51 @@
layui.define(function (exports) {
let template = '<div class="padding-30 padding-bottom-0" data-queue-load="{{d.code}}"><div class="layui-elip notselect nowrap" data-message-title><b class="color-desc">...</b></div><div class="margin-top-15 layui-progress layui-progress-big" lay-showPercent="yes"><div class="layui-progress-bar transition" lay-percent="0.00%"></div></div>' + '<div class="margin-top-15"><code class="layui-textarea layui-bg-black border-0" style="resize:none;overflow:hidden;height:190px"></code></div></div>';
let template = [
'<div class="ta-queue-box" data-queue-load="{{d.code}}">',
' <div class="ta-queue-status">',
' <div class="ta-queue-status-title layui-elip notselect nowrap" data-message-title><b class="color-desc">...</b></div>',
' <div class="ta-queue-status-code"># {{d.code}}</div>',
' </div>',
' <div class="layui-progress layui-progress-big ta-queue-progress" lay-showPercent="yes"><div class="layui-progress-bar transition layui-bg-blue" lay-percent="0.00%"></div></div>',
' <div class="ta-queue-log">',
' <div class="ta-queue-log-head"><span>执行日志</span><small>实时刷新</small></div>',
' <code></code>',
' </div>',
'</div>'
].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);

6
plugin/think-plugs-system/src/builder/QueueBuilder.php
View File

@ -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,