优化证书生成与正式部署配置

local_app/static/index.html

@@ -702,6 +702,64 @@
         gap: 12px; 
         margin-bottom: 16px; 
       }
+      .toolbar input {
+        flex: 1;
+        min-width: 240px;
+        max-width: 460px;
+      }
+      .toolbar select {
+        min-width: 140px;
+      }
+      .table-wrap {
+        width: 100%;
+        overflow-x: auto;
+        border: 1px solid var(--border);
+        border-radius: var(--radius);
+        background: var(--surface);
+      }
+      table {
+        width: 100%;
+        min-width: 680px;
+        border-collapse: collapse;
+      }
+      th,
+      td {
+        padding: 12px 14px;
+        border-bottom: 1px solid var(--border);
+        text-align: left;
+        vertical-align: middle;
+        white-space: nowrap;
+      }
+      th {
+        background: var(--surface-soft);
+        color: var(--muted);
+        font-size: 13px;
+        font-weight: 700;
+      }
+      td {
+        color: var(--text);
+        font-size: 14px;
+      }
+      tbody tr:last-child td {
+        border-bottom: 0;
+      }
+      tbody tr:hover {
+        background: var(--primary-light);
+      }
+      td:last-child,
+      th:last-child {
+        min-width: 168px;
+      }
+      .actions {
+        flex-wrap: nowrap;
+      }
+      .actions button {
+        flex-shrink: 0;
+        height: 36px;
+        padding: 0 14px;
+        border-radius: 10px;
+        font-size: 14px;
+      }
       .pager { 
         display: flex; 
         align-items: center; 
@@ -775,7 +833,7 @@
       .actions { 
         display: flex; 
         gap: 8px; 
-        flex-wrap: wrap; 
+        flex-wrap: nowrap;
       }
       .dialog { 
         position: fixed; 
@@ -836,6 +894,19 @@
         .side { position: static; }
         .form-grid, .stats { grid-template-columns: 1fr; }
         .cert-meta { grid-template-columns: 1fr; }
+        .main {
+          padding: 20px;
+        }
+        .toolbar {
+          align-items: stretch;
+          flex-direction: column;
+        }
+        .toolbar input,
+        .toolbar select,
+        .toolbar button {
+          width: 100%;
+          max-width: none;
+        }
       }
       
       /* 图形验证码弹窗 */
@@ -1130,9 +1201,9 @@
       function esc(v) { return String(v ?? "").replace(/[&<>"']/g, s => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[s])); }
       function statusPill(value) { return `<span class="pill ${value === "voided" || value === "disabled" || value === "deleted" ? "bad" : ""}">${esc(value)}</span>`; }
       function table(rows, cols, actions) {
-        if (!rows.length) return `<div class="panel"><p class="muted">暂无数据</p></div>`;
-        return `<table><thead><tr>${cols.map(c=>`<th>${c[1]}</th>`).join("")}${actions?"<th>操作</th>":""}</tr></thead><tbody>` +
-          rows.map(r => `<tr>${cols.map(c=>`<td>${c[2] ? c[2](r[c[0]], r) : esc(r[c[0]])}</td>`).join("")}${actions?`<td><div class="actions">${actions(r)}</div></td>`:""}</tr>`).join("") + `</tbody></table>`;
+        if (!rows.length) return `<p class="muted">暂无数据</p>`;
+        return `<div class="table-wrap"><table><thead><tr>${cols.map(c=>`<th>${c[1]}</th>`).join("")}${actions?"<th>操作</th>":""}</tr></thead><tbody>` +
+          rows.map(r => `<tr>${cols.map(c=>`<td>${c[2] ? c[2](r[c[0]], r) : esc(r[c[0]])}</td>`).join("")}${actions?`<td><div class="actions">${actions(r)}</div></td>`:""}</tr>`).join("") + `</tbody></table></div>`;
       }
       function showDialog(title, html) { dialogTitle.textContent = title; dialogBody.innerHTML = html; dialog.classList.remove("hidden"); }
       function closeDialog() { dialog.classList.add("hidden"); if (previewObjectUrl) { URL.revokeObjectURL(previewObjectUrl); previewObjectUrl = ""; } }