feat: redesign web admin layout

DouYinSparkFlow/webui/templates/send_console.html

@@ -1,334 +1,96 @@
 {% extends "base.html" %}
 
 {% block nav_key %}send_console{% endblock %}
-{% block title %}发送控制台{% endblock %}
+{% block title %}发送控制台 | 自动续火花{% endblock %}
 {% block page_title %}发送控制台{% endblock %}
-{% block page_subtitle %}今日发送总览{% endblock %}
+{% block page_subtitle %}今日发送明细、失败队列和针对性重试{% endblock %}
 
 {% block topbar_actions %}
-<a class="ghost-button" href="/">⌂ 返回首页</a>
+<a class="ghost-button" href="/">返回概览</a>
 <form method="post" action="/ops/run-unsent">
-  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
+  <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
   <button class="soft-button" type="submit">补发未成功目标</button>
 </form>
-<form method="post" action="/ops/run-now">
-  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-  <button type="submit">✈ 补发全部对象</button>
+<form
+  method="post"
+  action="/ops/run-now"
+  data-confirm="补发全部对象会对所有启用账号的全部目标重新发送一遍，确认继续？"
+>
+  <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
+  <button class="danger-button" type="submit">补发全部对象</button>
 </form>
 {% endblock %}
 
 {% block content %}
 {% set send_console = ops.send_console %}
-<style>
-  .console-shell {
-    display: grid;
-    gap: 18px;
-  }
-
-  .console-overview {
-    display: grid;
-    gap: 18px;
-  }
-
-  .console-stats .stat-card {
-    min-height: 132px;
-  }
-
-  .console-kpi-icon {
-    font-size: 26px;
-  }
-
-  .console-account-list {
-    display: grid;
-    gap: 22px;
-  }
-
-  .account-panel {
-    padding: 20px 20px 22px;
-  }
-
-  .account-panel__header {
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-    gap: 18px;
-    margin-bottom: 18px;
-  }
-
-  .account-panel__meta {
-    display: flex;
-    align-items: center;
-    gap: 14px;
-    min-width: 0;
-  }
-
-  .account-avatar {
-    width: 38px;
-    height: 38px;
-    border-radius: 50%;
-    background: linear-gradient(180deg, #7ea9ff, #5888ff);
-    color: #fff;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 800;
-    box-shadow: 0 10px 18px rgba(47, 103, 255, 0.22);
-  }
-
-  .account-panel__name {
-    font-size: 18px;
-    font-weight: 700;
-    line-height: 1.2;
-  }
-
-  .account-panel__subline {
-    margin-top: 6px;
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: var(--text-soft);
-    font-size: 13px;
-    flex-wrap: wrap;
-  }
-
-  .account-panel__subline code {
-    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-    font-size: 12px;
-    color: #7486a4;
-    background: #f5f8fd;
-    padding: 2px 6px;
-    border-radius: 999px;
-  }
-
-  .account-panel__status {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    flex-wrap: wrap;
-    justify-content: flex-end;
-  }
-
-  .account-panel__collapse {
-    color: #98a8c4;
-    font-size: 18px;
-    line-height: 1;
-  }
-
-  .account-grid {
-    display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 18px;
-  }
-
-  .data-card {
-    border: 1px solid rgba(228, 236, 246, 0.96);
-    border-radius: 18px;
-    background: linear-gradient(180deg, #ffffff, #fdfdff);
-    box-shadow: var(--shadow-soft);
-    overflow: hidden;
-  }
-
-  .data-card__head {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: 12px;
-    padding: 16px 18px 12px;
-  }
-
-  .data-card__title {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    font-size: 15px;
-    font-weight: 700;
-  }
-
-  .data-card__title i {
-    font-style: normal;
-    display: inline-flex;
-    width: 18px;
-    justify-content: center;
-  }
-
-  .data-card__title.success {
-    color: var(--success);
-  }
-
-  .data-card__title.danger {
-    color: var(--danger);
-  }
-
-  .data-card__title.warning {
-    color: var(--warning);
-  }
-
-  .data-card__title.info {
-    color: var(--info);
-  }
-
-  .data-card__table {
-    border-left: none;
-    border-right: none;
-    border-radius: 0;
-  }
-
-  .data-card__table td:first-child,
-  .data-card__table th:first-child {
-    min-width: 176px;
-  }
-
-  .data-card__table td:last-child,
-  .data-card__table th:last-child {
-    white-space: nowrap;
-  }
-
-  .data-card__footer {
-    padding: 10px 18px 14px;
-    display: flex;
-    justify-content: flex-end;
-    font-size: 13px;
-    color: var(--primary);
-    font-weight: 700;
-  }
-
-  .data-card__footer-button {
-    border: none;
-    background: transparent;
-    color: var(--primary);
-    padding: 0;
-    box-shadow: none;
-    border-radius: 0;
-    font-size: 13px;
-    font-weight: 700;
-  }
-
-  .data-card__footer-button:hover {
-    transform: none;
-    box-shadow: none;
-    text-decoration: underline;
-  }
-
-  .data-card__footer-button[hidden] {
-    display: none;
-  }
-
-  .data-card__extra {
-    display: none;
-    padding: 0 18px 16px;
-  }
-
-  .data-card__extra.is-open {
-    display: block;
-  }
-
-  .data-card__extra .table-shell {
-    border-radius: 14px;
-  }
-
-  .retry-button {
-    padding: 8px 12px;
-    border-radius: 10px;
-    font-size: 12px;
-    white-space: nowrap;
-  }
-
-  .console-empty {
-    padding: 46px 24px;
-    text-align: center;
-    color: var(--text-soft);
-    border-radius: 18px;
-    border: 1px dashed var(--border-strong);
-    background: rgba(255, 255, 255, 0.74);
-  }
-
-  .console-footer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 18px;
-    padding: 6px 0 0;
-    color: var(--text-soft);
-    font-size: 13px;
-  }
-
-  .console-pagination {
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-  }
-
-  .console-page {
-    width: 34px;
-    height: 34px;
-    border-radius: 10px;
-    border: 1px solid var(--border);
-    background: #fff;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    color: var(--text-soft);
-    font-weight: 700;
-  }
-
-  .console-page.active {
-    background: linear-gradient(180deg, #3d79ff, #2f67ff);
-    color: #fff;
-    border-color: transparent;
-    box-shadow: 0 10px 18px rgba(47, 103, 255, 0.18);
-  }
-
-  .console-page.ghost {
-    width: auto;
-    padding: 0 12px;
-  }
-
-  @media (max-width: 1380px) {
-    .account-grid {
-      grid-template-columns: 1fr;
-    }
-  }
-</style>
-
 <div class="console-shell">
   <section class="console-overview">
-    <div class="overview-time">当前时间：{{ send_console.now|replace('T', ' ') }}</div>
+    <div class="overview-time muted">
+      当前时间：{{ send_console.now|replace('T', ' ') }}
+    </div>
 
     <div class="stats-grid console-stats">
       <article class="stat-card">
         <div class="stat-meta">
           <span class="stat-label">启用账号</span>
-          <strong class="stat-value">{{ send_console.summary.enabled_accounts }}</strong>
-          <span class="stat-help">实时统计 · 当前可发送账号</span>
+          <strong class="stat-value"
+            >{{ send_console.summary.enabled_accounts }}</strong
+          >
+          <span class="stat-help">当前可发送账号</span>
         </div>
-        <div class="stat-icon blue"><span class="console-kpi-icon">👥</span></div>
+        <div class="stat-icon blue">A</div>
       </article>
 
       <article class="stat-card">
         <div class="stat-meta">
-          <span class="stat-label">今日成功目标</span>
-          <strong class="stat-value">{{ send_console.summary.today_sent_targets }}</strong>
-          <span class="stat-help positive">发送成功后立即写回历史</span>
+          <span class="stat-label">今日成功</span>
+          <strong class="stat-value"
+            >{{ send_console.summary.today_sent_targets }}</strong
+          >
+          <span class="stat-help">写回发送历史</span>
+        </div>
+        <div
+          class="stat-icon {% if send_console.summary.today_sent_targets > 0 %}green{% else %}gray{% endif %}"
+        >
+          ✓
         </div>
-        <div class="stat-icon green"><span class="console-kpi-icon">🎯</span></div>
       </article>
 
       <article class="stat-card">
         <div class="stat-meta">
           <span class="stat-label">失败待补发</span>
-          <strong class="stat-value">{{ send_console.summary.today_failed_targets }}</strong>
-          <span class="stat-help negative">按失败分类进入补发与重试</span>
+          <strong class="stat-value"
+            >{{ send_console.summary.today_failed_targets }}</strong
+          >
+          <span class="stat-help">按失败分类重试</span>
+        </div>
+        <div
+          class="stat-icon {% if send_console.summary.today_failed_targets > 0 %}red{% else %}gray{% endif %}"
+        >
+          !
         </div>
-        <div class="stat-icon red"><span class="console-kpi-icon">⚠</span></div>
       </article>
 
       <article class="stat-card">
         <div class="stat-meta">
-          <span class="stat-label">待发送 / 未处理</span>
-          <strong class="stat-value">{{ send_console.summary.today_pending_targets + send_console.summary.today_unprocessed_targets }}</strong>
-          <span class="stat-help">窗口内按计划发送，窗口外展示剩余目标</span>
+          <span class="stat-label">待发送</span>
+          <strong class="stat-value"
+            >{{ send_console.summary.today_pending_targets }}</strong
+          >
+          <span class="stat-help">窗口内按计划发送</span>
         </div>
-        <div class="stat-icon orange"><span class="console-kpi-icon">◔</span></div>
+        <div class="stat-icon orange">◔</div>
+      </article>
+
+      <article class="stat-card">
+        <div class="stat-meta">
+          <span class="stat-label">未处理</span>
+          <strong class="stat-value"
+            >{{ send_console.summary.today_unprocessed_targets }}</strong
+          >
+          <span class="stat-help">等待调度</span>
+        </div>
+        <div class="stat-icon gray">…</div>
       </article>
     </div>
   </section>
@@ -343,25 +105,33 @@
           <div>
             <div class="account-panel__name">{{ account.username }}</div>
             <div class="account-panel__subline">
-              <span>unique_id:</span>
-              <code>{{ account.unique_id }}</code>
+              unique_id: {{ account.unique_id }}
             </div>
           </div>
         </div>
 
-        <div class="account-panel__status">
-          <span class="status-chip success">成功 {{ account.sent_targets|length }}</span>
-          <span class="status-chip danger">失败 {{ account.failed_targets|length }}</span>
-          <span class="status-chip warning">待发送 {{ account.pending_targets|length }}</span>
-          <span class="status-chip info">未处理 {{ account.unprocessed_targets|length }}</span>
-          <span class="account-panel__collapse">⌃</span>
+        <div class="button-row">
+          <span class="status-chip success"
+            >成功 {{ account.sent_targets|length }}</span
+          >
+          <span class="status-chip danger"
+            >失败 {{ account.failed_targets|length }}</span
+          >
+          <span class="status-chip warning"
+            >待发送 {{ account.pending_targets|length }}</span
+          >
+          <span class="status-chip info"
+            >未处理 {{ account.unprocessed_targets|length }}</span
+          >
         </div>
       </div>
 
       <div class="account-grid">
         <section class="data-card">
           <div class="data-card__head">
-            <div class="data-card__title success"><i>●</i><span>A. 今日已成功</span></div>
+            <div class="data-card__title success">
+              <i>●</i><span>今日已成功</span>
+            </div>
           </div>
           <div class="table-shell data-card__table">
             <table>
@@ -380,22 +150,27 @@
                   <td>{{ item.sentAt or "-" }}</td>
                 </tr>
                 {% else %}
-                <tr><td colspan="3">今日暂无成功目标</td></tr>
+                <tr>
+                  <td colspan="3">今日暂无成功目标</td>
+                </tr>
                 {% endfor %}
               </tbody>
             </table>
           </div>
           <div class="data-card__footer">
+            {% if account.sent_targets|length > 5 %}
             <button
               type="button"
               class="data-card__footer-button"
               data-expand-target="sent-{{ loop.index0 }}"
               data-total-label="查看全部（{{ account.sent_targets|length }}）"
-              {% if account.sent_targets|length <= 5 %}hidden{% endif %}
-            >查看全部（{{ account.sent_targets|length }}）</button>
+            >
+              查看全部（{{ account.sent_targets|length }}）
+            </button>
+            {% endif %}
           </div>
           <div class="data-card__extra" id="sent-{{ loop.index0 }}">
-            <div class="table-shell scrollable">
+            <div class="table-shell">
               <table>
                 <thead>
                   <tr>
@@ -420,9 +195,11 @@
 
         <section class="data-card">
           <div class="data-card__head">
-            <div class="data-card__title danger"><i>▲</i><span>B. 失败待补发</span></div>
+            <div class="data-card__title danger">
+              <i>▲</i><span>失败待补发</span>
+            </div>
           </div>
-          <div class="table-shell data-card__table scrollable">
+          <div class="table-shell data-card__table">
             <table>
               <thead>
                 <tr>
@@ -441,30 +218,46 @@
                   <td>{{ item.reason or "-" }}</td>
                   <td>{{ item.attemptCount or 0 }}</td>
                   <td>
-                    <form method="post" action="/accounts/{{ account.unique_id }}/retry-target">
-                      <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-                      <input type="hidden" name="target" value="{{ item.target }}">
-                      <button type="submit" class="soft-button retry-button">重试此目标</button>
+                    <form
+                      method="post"
+                      action="/accounts/{{ account.unique_id }}/retry-target"
+                    >
+                      <input
+                        type="hidden"
+                        name="csrf_token"
+                        value="{{ csrf_token }}"
+                      />
+                      <input
+                        type="hidden"
+                        name="target"
+                        value="{{ item.target }}"
+                      />
+                      <button type="submit" class="soft-button">重试</button>
                     </form>
                   </td>
                 </tr>
                 {% else %}
-                <tr><td colspan="5">暂无失败待补发目标</td></tr>
+                <tr>
+                  <td colspan="5">暂无失败待补发目标</td>
+                </tr>
                 {% endfor %}
               </tbody>
             </table>
           </div>
           <div class="data-card__footer">
+            {% if account.failed_targets|length > 5 %}
             <button
               type="button"
               class="data-card__footer-button"
               data-expand-target="failed-{{ loop.index0 }}"
               data-total-label="查看全部（{{ account.failed_targets|length }}）"
-              {% if account.failed_targets|length <= 5 %}hidden{% endif %}
-            >查看全部（{{ account.failed_targets|length }}）</button>
+            >
+              查看全部（{{ account.failed_targets|length }}）
+            </button>
+            {% endif %}
           </div>
           <div class="data-card__extra" id="failed-{{ loop.index0 }}">
-            <div class="table-shell scrollable">
+            <div class="table-shell">
               <table>
                 <thead>
                   <tr>
@@ -483,10 +276,21 @@
                     <td>{{ item.reason or "-" }}</td>
                     <td>{{ item.attemptCount or 0 }}</td>
                     <td>
-                      <form method="post" action="/accounts/{{ account.unique_id }}/retry-target">
-                        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
-                        <input type="hidden" name="target" value="{{ item.target }}">
-                        <button type="submit" class="soft-button retry-button">重试此目标</button>
+                      <form
+                        method="post"
+                        action="/accounts/{{ account.unique_id }}/retry-target"
+                      >
+                        <input
+                          type="hidden"
+                          name="csrf_token"
+                          value="{{ csrf_token }}"
+                        />
+                        <input
+                          type="hidden"
+                          name="target"
+                          value="{{ item.target }}"
+                        />
+                        <button type="submit" class="soft-button">重试</button>
                       </form>
                     </td>
                   </tr>
@@ -499,7 +303,9 @@
 
         <section class="data-card">
           <div class="data-card__head">
-            <div class="data-card__title warning"><i>◔</i><span>C. 今日待发送</span></div>
+            <div class="data-card__title warning">
+              <i>◔</i><span>今日待发送</span>
+            </div>
           </div>
           <div class="table-shell data-card__table">
             <table>
@@ -516,22 +322,27 @@
                   <td>{{ item.scheduledAt or "-" }}</td>
                 </tr>
                 {% else %}
-                <tr><td colspan="2">今日暂无待发送目标</td></tr>
+                <tr>
+                  <td colspan="2">今日暂无待发送目标</td>
+                </tr>
                 {% endfor %}
               </tbody>
             </table>
           </div>
           <div class="data-card__footer">
+            {% if account.pending_targets|length > 5 %}
             <button
               type="button"
               class="data-card__footer-button"
               data-expand-target="pending-{{ loop.index0 }}"
               data-total-label="查看全部（{{ account.pending_targets|length }}）"
-              {% if account.pending_targets|length <= 5 %}hidden{% endif %}
-            >查看全部（{{ account.pending_targets|length }}）</button>
+            >
+              查看全部（{{ account.pending_targets|length }}）
+            </button>
+            {% endif %}
           </div>
           <div class="data-card__extra" id="pending-{{ loop.index0 }}">
-            <div class="table-shell scrollable">
+            <div class="table-shell">
               <table>
                 <thead>
                   <tr>
@@ -554,7 +365,9 @@
 
         <section class="data-card">
           <div class="data-card__head">
-            <div class="data-card__title info"><i>◌</i><span>D. 今日未处理</span></div>
+            <div class="data-card__title info">
+              <i>◌</i><span>今日未处理</span>
+            </div>
           </div>
           <div class="table-shell data-card__table">
             <table>
@@ -571,22 +384,27 @@
                   <td>{{ item.scheduledAt or "-" }}</td>
                 </tr>
                 {% else %}
-                <tr><td colspan="2">今日暂无未处理目标</td></tr>
+                <tr>
+                  <td colspan="2">今日暂无未处理目标</td>
+                </tr>
                 {% endfor %}
               </tbody>
             </table>
           </div>
           <div class="data-card__footer">
+            {% if account.unprocessed_targets|length > 5 %}
             <button
               type="button"
               class="data-card__footer-button"
               data-expand-target="unprocessed-{{ loop.index0 }}"
               data-total-label="查看全部（{{ account.unprocessed_targets|length }}）"
-              {% if account.unprocessed_targets|length <= 5 %}hidden{% endif %}
-            >查看全部（{{ account.unprocessed_targets|length }}）</button>
+            >
+              查看全部（{{ account.unprocessed_targets|length }}）
+            </button>
+            {% endif %}
           </div>
           <div class="data-card__extra" id="unprocessed-{{ loop.index0 }}">
-            <div class="table-shell scrollable">
+            <div class="table-shell">
               <table>
                 <thead>
                   <tr>
@@ -611,32 +429,11 @@
     {% endfor %}
   </section>
 
-  <div class="console-footer">
-    <span>共 {{ send_console.accounts|length }} 个账号</span>
-    <div class="console-pagination">
-      <span class="console-page ghost">‹</span>
-      <span class="console-page active">1</span>
-      <span class="console-page">2</span>
-      <span class="console-page">3</span>
-      <span class="console-page ghost">›</span>
-    </div>
-  </div>
+  <div class="console-footer">共 {{ send_console.accounts|length }} 个账号</div>
   {% else %}
-  <div class="console-empty">当前没有启用账号，暂无可展示的发送控制台数据。</div>
+  <div class="console-empty empty-state">
+    当前没有启用账号，暂无可展示的发送控制台数据。
+  </div>
   {% endif %}
 </div>
-<script>
-  (() => {
-    document.querySelectorAll(".data-card__footer-button").forEach((button) => {
-      button.addEventListener("click", () => {
-        const targetId = button.dataset.expandTarget;
-        if (!targetId) return;
-        const panel = document.getElementById(targetId);
-        if (!panel) return;
-        const isOpen = panel.classList.toggle("is-open");
-        button.textContent = isOpen ? "收起" : (button.getAttribute("data-total-label") || "查看全部");
-      });
-    });
-  })();
-</script>
 {% endblock %}