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");