Commit b207ce24 authored by 郭阔's avatar 郭阔

ui(schedules): 交付详情由行下抽屉改为居中弹窗

点徽标弹浮层(成功数量+标题 / 失败数量+原因),Esc/点遮罩/✕ 关闭,
不再把表格向下撑开;数据块随页面渲染,无需请求。排程编辑抽屉保持不变。
parent 2cbef105
...@@ -3,6 +3,13 @@ ...@@ -3,6 +3,13 @@
{% block extra_head %} {% block extra_head %}
<meta http-equiv="refresh" content="60"> <meta http-equiv="refresh" content="60">
<script> <script>
function openLast(name, display) {
document.getElementById('lastModalBody').innerHTML = document.getElementById('lastdata-' + name).innerHTML;
document.getElementById('lastModalTitle').textContent = display || name;
document.getElementById('lastModal').classList.add('open');
}
function closeLast() { document.getElementById('lastModal').classList.remove('open'); }
document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeLast(); });
function toggleRuns(sel) { function toggleRuns(sel) {
var f = parseInt(sel.value, 10); var f = parseInt(sel.value, 10);
sel.form.querySelectorAll('.runwin').forEach(function (sp) { sel.form.querySelectorAll('.runwin').forEach(function (sp) {
...@@ -37,6 +44,9 @@ function toggleDrawer(id) { ...@@ -37,6 +44,9 @@ function toggleDrawer(id) {
.decho { color:#e8c34a; font-family:monospace; min-width:44px; } .decho { color:#e8c34a; font-family:monospace; min-width:44px; }
.dnote { color:#666; font-size:12px; margin-left:12px; } .dnote { color:#666; font-size:12px; margin-left:12px; }
.linkbadge { cursor:pointer; } .linkbadge { cursor:pointer; }
.modal-mask { position:fixed; inset:0; background:rgba(0,0,0,.6); display:none; z-index:50; align-items:flex-start; justify-content:center; padding:56px 16px; }
.modal-mask.open { display:flex; }
.modal-card { background:#161923; border:1px solid #2a2d37; border-radius:8px; max-width:760px; width:100%; max-height:78vh; overflow-y:auto; padding:16px 20px 14px; box-shadow:0 12px 40px rgba(0,0,0,.5); }
.linkbadge:hover { filter:brightness(1.3); text-decoration:underline dotted; } .linkbadge:hover { filter:brightness(1.3); text-decoration:underline dotted; }
ul.arts { margin:2px 0 8px 28px; padding:0; list-style:none; } ul.arts { margin:2px 0 8px 28px; padding:0; list-style:none; }
ul.arts li { padding:3px 0; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; } ul.arts li { padding:3px 0; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
...@@ -114,9 +124,9 @@ function toggleDrawer(id) { ...@@ -114,9 +124,9 @@ function toggleDrawer(id) {
{{ r.last.mtime }}<br> {{ r.last.mtime }}<br>
{% set st = r.last.status or '' %} {% set st = r.last.status or '' %}
{% if '熔断' in st %}<span class="badge unknown">{{ st }}</span> {% if '熔断' in st %}<span class="badge unknown">{{ st }}</span>
{% elif '部分交付' in st or '⚠' in st %}<span class="badge warn linkbadge" onclick="toggleDrawer('last-{{ r.name }}')">{{ st }} ▾</span> {% elif '部分交付' in st or '⚠' in st %}<span class="badge warn linkbadge" onclick="openLast('{{ r.name }}', '{{ r.display }}')">{{ st }} ▾</span>
{% elif '成功' in st %}<span class="badge ok linkbadge" onclick="toggleDrawer('last-{{ r.name }}')">{{ st }} ▾</span> {% elif '成功' in st %}<span class="badge ok linkbadge" onclick="openLast('{{ r.name }}', '{{ r.display }}')">{{ st }} ▾</span>
{% elif st %}<span class="badge fail linkbadge" onclick="toggleDrawer('last-{{ r.name }}')">{{ st }} ▾</span>{% endif %} {% elif st %}<span class="badge fail linkbadge" onclick="openLast('{{ r.name }}', '{{ r.display }}')">{{ st }} ▾</span>{% endif %}
{% else %}<span style="color:#666">从未</span>{% endif %} {% else %}<span style="color:#666">从未</span>{% endif %}
</td> </td>
<td> <td>
...@@ -197,19 +207,23 @@ function toggleDrawer(id) { ...@@ -197,19 +207,23 @@ function toggleDrawer(id) {
</div> </div>
</td> </td>
</tr> </tr>
<tr id="last-{{ r.name }}" class="drawer" style="display:none"> {% endfor %}
<td colspan="6"> </tbody>
</table>
</div>
{% for r in rows %}
<div id="lastdata-{{ r.name }}" hidden>
{% set ok_arts = r.last_articles | selectattr('status', 'equalto', 'SUCCESS') | list %} {% set ok_arts = r.last_articles | selectattr('status', 'equalto', 'SUCCESS') | list %}
{% set bad_arts = r.last_articles | rejectattr('status', 'equalto', 'SUCCESS') | list %} {% set bad_arts = r.last_articles | rejectattr('status', 'equalto', 'SUCCESS') | list %}
<div class="drawer-box">
<div class="drow"> <div class="drow">
<span class="dlabel">上次交付</span> <span class="dlabel">交付明细</span>
<span class="badge ok">成功 {{ ok_arts|length }} 篇</span> <span class="badge ok">成功 {{ ok_arts|length }} 篇</span>
{% if bad_arts %}<span class="badge fail">失败 {{ bad_arts|length }} 篇</span>{% endif %} {% if bad_arts %}<span class="badge fail">失败 {{ bad_arts|length }} 篇</span>{% endif %}
<span class="dnote">{{ r.last.mtime if r.last }} · 点击标题打开原文 · 再点徽标收起</span> <span class="dnote">{{ r.last.mtime if r.last }}</span>
</div> </div>
{% if ok_arts %} {% if ok_arts %}
<div class="hint" style="color:#6bbb6b;margin-left:28px">✓ 成功文章</div> <div class="hint" style="color:#6bbb6b">✓ 成功文章(点击标题打开原文)</div>
<ul class="arts"> <ul class="arts">
{% for a in ok_arts %} {% for a in ok_arts %}
<li><span class="t">{% if a.url and a.url.startswith('http') %}<a class="source-link" href="{{ a.url }}" target="_blank" rel="noopener noreferrer">{{ a.title }}</a>{% else %}{{ a.title }}{% endif %}</span></li> <li><span class="t">{% if a.url and a.url.startswith('http') %}<a class="source-link" href="{{ a.url }}" target="_blank" rel="noopener noreferrer">{{ a.title }}</a>{% else %}{{ a.title }}{% endif %}</span></li>
...@@ -217,7 +231,7 @@ function toggleDrawer(id) { ...@@ -217,7 +231,7 @@ function toggleDrawer(id) {
</ul> </ul>
{% endif %} {% endif %}
{% if bad_arts %} {% if bad_arts %}
<div class="hint" style="color:#bb6b6b;margin-left:28px">✗ 失败及原因</div> <div class="hint" style="color:#bb6b6b">✗ 失败及原因</div>
<ul class="arts"> <ul class="arts">
{% for a in bad_arts %} {% for a in bad_arts %}
<li><span class="t">{% if a.url and a.url.startswith('http') %}<a class="source-link" href="{{ a.url }}" target="_blank" rel="noopener noreferrer">{{ a.title }}</a>{% else %}{{ a.title }}{% endif %}</span> <li><span class="t">{% if a.url and a.url.startswith('http') %}<a class="source-link" href="{{ a.url }}" target="_blank" rel="noopener noreferrer">{{ a.title }}</a>{% else %}{{ a.title }}{% endif %}</span>
...@@ -225,12 +239,17 @@ function toggleDrawer(id) { ...@@ -225,12 +239,17 @@ function toggleDrawer(id) {
{% endfor %} {% endfor %}
</ul> </ul>
{% endif %} {% endif %}
</div>
{% endfor %}
<div class="modal-mask" id="lastModal" onclick="if(event.target===this)closeLast()">
<div class="modal-card">
<div style="display:flex;align-items:center;gap:10px;margin-bottom:10px">
<h3 id="lastModalTitle" style="margin:0;font-size:16px"></h3>
<button type="button" class="btn btn-sm" style="margin-left:auto" onclick="closeLast()">✕ 关闭</button>
</div>
<div id="lastModalBody"></div>
</div> </div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div> </div>
{% endblock %} {% endblock %}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment