fix: 优化任务列表布局

webgui/web/assets/js/app.js

@@ -2,15 +2,15 @@
 // the top-nav active state in sync, and re-renders chrome strings when
 // the locale changes.
 
-import { escapeHtml, onRoute } from "./state.js?v=security-fixes-1";
-import { t, currentLocale, setLocale, onLocale } from "./i18n.js?v=security-fixes-1";
-import { renderRemotes } from "./views/remotes.js?v=security-fixes-1";
-import { renderBrowse } from "./views/browser.js?v=security-fixes-1";
-import { renderJobs, renderNewJob, stopJobPolling } from "./views/jobs.js?v=security-fixes-1";
+import { escapeHtml, onRoute } from "./state.js?v=job-layout-1";
+import { t, currentLocale, setLocale, onLocale } from "./i18n.js?v=job-layout-1";
+import { renderRemotes } from "./views/remotes.js?v=job-layout-1";
+import { renderBrowse } from "./views/browser.js?v=job-layout-1";
+import { renderJobs, renderNewJob, stopJobPolling } from "./views/jobs.js?v=job-layout-1";
 import {
   renderConfigureNew,
   renderConfigureEdit,
-} from "./views/configure.js?v=security-fixes-1";
+} from "./views/configure.js?v=job-layout-1";
 
 const views = {
   remotes: renderRemotes,

webgui/web/assets/js/views/browser.js

@@ -1,8 +1,8 @@
 // views/browser.js — file/folder listing with breadcrumbs, mkdir, upload, delete, rename.
 
-import { post, uploadFile, downloadURL } from "../rc.js?v=security-fixes-1";
-import { escapeHtml, toast, formatBytes, formatTime } from "../state.js?v=security-fixes-1";
-import { t } from "../i18n.js?v=security-fixes-1";
+import { post, uploadFile, downloadURL } from "../rc.js?v=job-layout-1";
+import { escapeHtml, toast, formatBytes, formatTime } from "../state.js?v=job-layout-1";
+import { t } from "../i18n.js?v=job-layout-1";
 
 export async function renderBrowse({ remote, path }) {
   const app = document.getElementById("app");

webgui/web/assets/js/views/configure.js

@@ -9,9 +9,9 @@
 // OAuth backends (option named "token" with IsPassword) get a banner
 // and disabled submit — user must run `rclone config` in a terminal.
 
-import { post } from "../rc.js?v=security-fixes-1";
-import { escapeHtml, getState, setState, toast } from "../state.js?v=security-fixes-1";
-import { t } from "../i18n.js?v=security-fixes-1";
+import { post } from "../rc.js?v=job-layout-1";
+import { escapeHtml, getState, setState, toast } from "../state.js?v=job-layout-1";
+import { t } from "../i18n.js?v=job-layout-1";
 
 // --- Route entrypoints ---
 

webgui/web/assets/js/views/jobs.js

@@ -1,14 +1,14 @@
 // views/jobs.js — submit sync/copy/move jobs and manage recurring transfers.
 
-import { post } from "../rc.js?v=security-fixes-1";
+import { post } from "../rc.js?v=job-layout-1";
 import {
   toast,
   formatBytes,
   formatSpeed,
   formatDuration,
   escapeHtml,
-} from "../state.js?v=security-fixes-1";
-import { t } from "../i18n.js?v=security-fixes-1";
+} from "../state.js?v=job-layout-1";
+import { t } from "../i18n.js?v=job-layout-1";
 import {
   createOneTimeJob,
   createRecurringJob,
@@ -21,7 +21,7 @@ import {
   runRecurringJobNow,
   stopOneTimeJob,
   stopRecurringJob,
-} from "../jobs_api.js?v=security-fixes-1";
+} from "../jobs_api.js?v=job-layout-1";
 
 let pollTimer = null;
 const LOCAL_FS_VALUE = "__local__";
@@ -537,78 +537,37 @@ function renderJobTable(statuses) {
     return bTime - aTime;
   });
 
-  const rows = statuses.map(renderJobRows).join("");
+  const rows = statuses.map(renderJobRow).join("");
 
   return `
-    <table class="table">
-      <thead>
-        <tr>
-          <th>${t("jobs.col.id")}</th>
-          <th>${t("jobs.col.job")}</th>
-          <th>${t("jobs.col.status")}</th>
-          <th>${t("jobs.col.next_run")}</th>
-          <th class="col-num">${t("jobs.col.progress")}</th>
-          <th class="col-num">${t("jobs.col.speed")}</th>
-          <th class="col-num">${t("jobs.col.eta")}</th>
-          <th class="col-num">${t("jobs.col.files")}</th>
-          <th class="col-num">${t("jobs.col.errors")}</th>
-          <th class="col-num">${t("jobs.col.action")}</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${rows}
-      </tbody>
-    </table>
+    <div class="job-list">
+      ${rows}
+    </div>
   `;
 }
 
-function renderJobRows(s) {
-  const row = renderJobRow(s);
-  if (!expandedJobs.has(jobKey(s))) {
-    return row;
-  }
-  return row + renderJobDetailsRow(s);
-}
-
 function renderJobRow(job) {
   const snapshot = job.statusSnapshot || {};
   const stats = transferStats(snapshot);
-  const id = job.id;
   const key = jobKey(job);
   const running = !!job.running;
   const jobid = job.currentJobid || job.lastJobid;
   const displayedSpeed = stats.speed || averageSpeed(stats);
   const displayedEta = running ? stats.eta : 0;
+  const expanded = expandedJobs.has(key);
 
   const badge = renderStatusBadge(job.status);
-  const jobCell = `
-    <div class="job-cell">
-      <span class="job-action">${escapeHtml(job.action)}</span>
-      <span class="job-paths">
-        <code>${escapeHtml(job.src)}</code>
-        <span class="arrow">→</span>
-        <code>${escapeHtml(job.dst)}</code>
-      </span>
-    </div>`;
-
-  const scheduleCell = `
-    <div class="job-cell">
-      <span class="job-action">${escapeHtml(job.kind === "once" ? t("jobs.schedule_once") : formatDateTime(job.nextRunAt))}</span>
-      <span class="job-paths">${escapeHtml(formatSchedule(job))}</span>
-    </div>
-  `;
-
   const pct = stats.totalBytes > 0 ? Math.min(100, (stats.bytes / stats.totalBytes) * 100) : 0;
   const progress = `
-    <div style="display:flex;flex-direction:column;gap:4px;min-width:120px">
+    <div class="job-progress">
       <div class="progress"><span style="width:${pct.toFixed(1)}%"></span></div>
-      <span class="col-mono" style="font-size:11px;color:var(--color-muted)">
+      <span class="job-progress-text">
         ${formatBytes(stats.bytes)} / ${formatBytes(stats.totalBytes)}
       </span>
     </div>
   `;
 
-  const detailBtn = `<button class="btn btn-secondary btn-sm" data-detail="${escapeAttr(key)}">${expandedJobs.has(key) ? t("jobs.hide_details") : t("jobs.details")}</button>`;
+  const detailBtn = `<button class="btn btn-secondary btn-sm" data-detail="${escapeAttr(key)}">${expanded ? t("jobs.hide_details") : t("jobs.details")}</button>`;
   const startBtn = running
     ? ""
     : `<button class="btn btn-secondary btn-sm" data-start="${escapeAttr(key)}">${t("jobs.start_again")}</button>`;
@@ -618,28 +577,50 @@ function renderJobRow(job) {
   const deleteBtn = `<button class="btn btn-danger btn-sm" data-delete="${escapeAttr(key)}">${t("jobs.delete_record")}</button>`;
 
   return `
-    <tr>
-      <td class="col-mono">
-        ${escapeHtml(displayJobId(job))}
-        ${jobid ? `<br><span style="color:var(--color-muted-soft)">job ${escapeHtml(jobid)}</span>` : ""}
-      </td>
-      <td>${jobCell}</td>
-      <td>${badge}</td>
-      <td>${scheduleCell}</td>
-      <td class="col-num">${progress}</td>
-      <td class="col-num col-mono">${escapeHtml(formatSpeed(displayedSpeed))}</td>
-      <td class="col-num col-mono">${escapeHtml(formatDuration(displayedEta))}</td>
-      <td class="col-num col-mono">${escapeHtml(formatTransferCount(stats))}</td>
-      <td class="col-num col-mono">${escapeHtml(String(stats.errors || 0))}</td>
-      <td class="col-num">
+    <article class="job-item">
+      <div class="job-main">
+        <div class="job-head">
+          <div class="job-id">
+            <span>${escapeHtml(displayJobId(job))}</span>
+            ${jobid ? `<small>job ${escapeHtml(jobid)}</small>` : ""}
+          </div>
+          ${badge}
+        </div>
+        <div class="job-route">
+          <div class="job-route-line">
+            <span>${escapeHtml(job.action)}</span>
+            <code>${escapeHtml(job.src)}</code>
+          </div>
+          <div class="job-route-line">
+            <span>→</span>
+            <code>${escapeHtml(job.dst)}</code>
+          </div>
+        </div>
+        <div class="job-schedule">
+          <span>${escapeHtml(job.kind === "once" ? t("jobs.schedule_once") : formatDateTime(job.nextRunAt))}</span>
+          <span>${escapeHtml(formatSchedule(job))}</span>
+        </div>
+      </div>
+      <div class="job-side">
+        <div class="job-progress-wrap">
+          <span class="job-metric-label">${t("jobs.col.progress")}</span>
+          ${progress}
+        </div>
+        <div class="job-metrics">
+          ${metricHtml(t("jobs.col.speed"), formatSpeed(displayedSpeed))}
+          ${metricHtml(t("jobs.col.eta"), formatDuration(displayedEta))}
+          ${metricHtml(t("jobs.col.files"), formatTransferCount(stats))}
+          ${metricHtml(t("jobs.col.errors"), String(stats.errors || 0))}
+        </div>
         <div class="job-actions">
           ${detailBtn}
           ${startBtn}
           ${stopBtn}
           ${deleteBtn}
         </div>
-      </td>
-    </tr>
+      </div>
+      ${expanded ? renderJobDetails(job) : ""}
+    </article>
   `;
 }
 
@@ -661,7 +642,16 @@ function renderStatusBadge(status) {
   }
 }
 
-function renderJobDetailsRow(job) {
+function metricHtml(label, value) {
+  return `
+    <div class="job-metric">
+      <span>${escapeHtml(label)}</span>
+      <strong>${escapeHtml(value)}</strong>
+    </div>
+  `;
+}
+
+function renderJobDetails(job) {
   const snapshot = job.statusSnapshot || {};
   const stats = transferStats(snapshot);
   const jobid = job.currentJobid || job.lastJobid || "";
@@ -688,27 +678,22 @@ function renderJobDetailsRow(job) {
     : "";
 
   return `
-    <tr class="job-detail-row">
-      <td></td>
-      <td colspan="9">
-        <div class="job-detail">
-          <dl>
-            ${details.map(([label, value]) => `
-              <div>
-                <dt>${escapeHtml(label)}</dt>
-                <dd>${escapeHtml(value)}</dd>
-              </div>
-            `).join("")}
-          </dl>
-          ${output ? `
-            <div class="job-detail-output">
-              <span>${t("jobs.detail_output")}</span>
-              <pre>${escapeHtml(output)}</pre>
-            </div>
-          ` : ""}
+    <div class="job-detail">
+      <dl>
+        ${details.map(([label, value]) => `
+          <div>
+            <dt>${escapeHtml(label)}</dt>
+            <dd>${escapeHtml(value)}</dd>
+          </div>
+        `).join("")}
+      </dl>
+      ${output ? `
+        <div class="job-detail-output">
+          <span>${t("jobs.detail_output")}</span>
+          <pre>${escapeHtml(output)}</pre>
         </div>
-      </td>
-    </tr>
+      ` : ""}
+    </div>
   `;
 }
 

webgui/web/assets/js/views/remotes.js

@@ -1,8 +1,8 @@
 // views/remotes.js — connector-tile grid of configured remotes with CRUD.
 
-import { post } from "../rc.js?v=security-fixes-1";
-import { escapeHtml, getState, setState, toast } from "../state.js?v=security-fixes-1";
-import { t } from "../i18n.js?v=security-fixes-1";
+import { post } from "../rc.js?v=job-layout-1";
+import { escapeHtml, getState, setState, toast } from "../state.js?v=job-layout-1";
+import { t } from "../i18n.js?v=job-layout-1";
 
 export async function renderRemotes() {
   const app = document.getElementById("app");

webgui/web/assets/styles/components.css

@@ -865,46 +865,148 @@
   margin-bottom: var(--space-md);
 }
 
-/* ---------- Job cell with action + src→dst ---------- */
-.job-cell {
+/* ---------- Jobs ---------- */
+.job-list {
+  display: grid;
+  gap: var(--space-sm);
+}
+
+.job-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(320px, 380px);
+  gap: var(--space-lg);
+  padding: var(--space-lg);
+  border-bottom: 1px solid var(--color-hairline-soft);
+}
+
+.job-item:last-child {
+  border-bottom: none;
+}
+
+.job-main {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: var(--space-md);
+  min-width: 0;
+}
+
+.job-head {
   display: flex;
   flex-direction: column;
-  gap: 2px;
-  min-width: 200px;
+  align-items: flex-start;
+  gap: var(--space-xs);
 }
 
-.job-cell .job-action {
+.job-id {
+  display: grid;
+  gap: 2px;
+  min-width: 58px;
+  color: var(--color-muted);
+  font: var(--typo-code);
+}
+
+.job-id small {
+  color: var(--color-muted-soft);
+  font: var(--typo-caption);
+}
+
+.job-route {
+  display: grid;
+  gap: var(--space-xs);
+  min-width: 0;
+}
+
+.job-route-line {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  align-items: start;
+  gap: var(--space-xs);
+}
+
+.job-route-line span {
+  color: var(--color-muted);
   font: var(--typo-caption-uppercase);
   letter-spacing: var(--typo-caption-uppercase-tracking);
-  color: var(--color-muted);
+  text-transform: uppercase;
 }
 
-.job-cell .job-paths {
-  font: var(--typo-body-sm);
+.job-route-line code {
   color: var(--color-body);
-  word-break: break-all;
+  font: var(--typo-code);
+  white-space: normal;
+  overflow-wrap: anywhere;
 }
 
-.job-cell .job-paths .arrow {
-  color: var(--color-muted-soft);
-  margin: 0 var(--space-xxs);
+.job-schedule {
+  grid-column: 2;
+  display: flex;
+  gap: var(--space-sm);
+  flex-wrap: wrap;
+  color: var(--color-muted);
+  font: var(--typo-caption);
+}
+
+.job-side {
+  display: grid;
+  align-content: start;
+  gap: var(--space-sm);
+  min-width: 0;
+}
+
+.job-progress-wrap {
+  display: grid;
+  gap: var(--space-xs);
+}
+
+.job-metric-label,
+.job-metric span {
+  color: var(--color-muted);
+  font: var(--typo-caption);
+}
+
+.job-progress {
+  display: grid;
+  gap: 4px;
+}
+
+.job-progress-text {
+  color: var(--color-muted);
+  font: var(--typo-code);
+}
+
+.job-metrics {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: var(--space-xs);
+}
+
+.job-metric {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+.job-metric strong {
+  color: var(--color-body);
+  font: var(--typo-code);
+  font-weight: 400;
+  overflow-wrap: anywhere;
 }
 
 .job-actions {
-  display: inline-flex;
+  display: flex;
   justify-content: flex-end;
   gap: var(--space-xs);
   flex-wrap: wrap;
 }
 
-.job-detail-row {
-  background-color: var(--color-surface-soft);
-}
-
 .job-detail {
+  grid-column: 1 / -1;
   display: grid;
   gap: var(--space-sm);
-  padding: var(--space-sm) 0;
+  padding: var(--space-md);
+  background-color: var(--color-surface-soft);
+  border-radius: var(--radius-sm);
 }
 
 .job-detail dl {
@@ -964,6 +1066,15 @@
   .form-grid {
     grid-template-columns: 1fr;
   }
+  .job-item {
+    grid-template-columns: 1fr;
+  }
+  .job-side {
+    grid-template-columns: 1fr;
+  }
+  .job-actions {
+    justify-content: flex-start;
+  }
 }
 
 @media (max-width: 768px) {
@@ -982,4 +1093,20 @@
   .top-nav nav {
     display: none;
   }
+  .job-item {
+    padding: var(--space-md);
+  }
+  .job-main {
+    grid-template-columns: 1fr;
+  }
+  .job-schedule {
+    grid-column: 1;
+  }
+  .job-metrics {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .job-detail dl,
+  .job-detail dl div {
+    grid-template-columns: 1fr;
+  }
 }

webgui/web/index.html

@@ -7,7 +7,7 @@
   <link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
   <link rel="stylesheet" href="/assets/styles/tokens.css">
   <link rel="stylesheet" href="/assets/styles/base.css">
-  <link rel="stylesheet" href="/assets/styles/components.css?v=security-fixes-1">
+  <link rel="stylesheet" href="/assets/styles/components.css?v=job-layout-1">
 </head>
 <body>
   <header class="top-nav">
@@ -80,6 +80,6 @@
   <div id="toast-stack" class="toast-stack"></div>
   <div id="modal-root"></div>
 
-  <script type="module" src="/assets/js/app.js?v=security-fixes-1"></script>
+  <script type="module" src="/assets/js/app.js?v=job-layout-1"></script>
 </body>
 </html>