add: 添加选择文件夹功能

webgui/web/assets/js/app.js

@@ -6,7 +6,7 @@ import { onRoute } from "./state.js";
 import { t, currentLocale, setLocale, onLocale } from "./i18n.js";
 import { renderRemotes } from "./views/remotes.js";
 import { renderBrowse } from "./views/browser.js";
-import { renderJobs, renderNewJob, stopJobPolling } from "./views/jobs.js?v=jobs-details-1";
+import { renderJobs, renderNewJob, stopJobPolling } from "./views/jobs.js?v=jobs-picker-restore-1";
 import {
   renderConfigureNew,
   renderConfigureEdit,

webgui/web/assets/js/i18n.js

@@ -169,6 +169,11 @@ const STRINGS = {
     "jobs.dest_remote": "Destination location",
     "jobs.dest_path": "Destination path",
     "jobs.path_placeholder": "folder/subfolder or /local/path",
+    "jobs.pick_folder": "Choose",
+    "jobs.pick_source_title": "Choose source folder",
+    "jobs.pick_dest_title": "Choose destination folder",
+    "jobs.pick_current": "Use current folder",
+    "jobs.pick_empty": "No folders here.",
     "jobs.start": "Start Job",
     "jobs.no_remotes_option": "(no remotes)",
     "jobs.empty_title": "No jobs yet",
@@ -341,6 +346,11 @@ const STRINGS = {
     "jobs.dest_remote": "目标位置",
     "jobs.dest_path": "目标路径",
     "jobs.path_placeholder": "文件夹/子文件夹 或 /local/path",
+    "jobs.pick_folder": "选择",
+    "jobs.pick_source_title": "选择源文件夹",
+    "jobs.pick_dest_title": "选择目标文件夹",
+    "jobs.pick_current": "使用当前文件夹",
+    "jobs.pick_empty": "这里没有文件夹。",
     "jobs.start": "开始任务",
     "jobs.no_remotes_option": "(无远程存储)",
     "jobs.empty_title": "尚无任务",

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

@@ -19,6 +19,7 @@ let pollTimer = null;
 const WEBGUI_JOB_GROUP_PREFIX = "webgui/transfer";
 const LOCAL_FS_VALUE = "__local__";
 const expandedJobs = new Set();
+const LOCAL_PICKER_ROOT = "/root";
 
 export async function renderJobs() {
   const app = document.getElementById("app");
@@ -86,7 +87,10 @@ export async function renderNewJob() {
         </div>
         <div class="field">
           <label>${t("jobs.source_path")}</label>
+          <div class="input-action">
             <input class="input" name="srcPath" placeholder="${t("jobs.path_placeholder")}" autocomplete="off">
+            <button type="button" class="btn btn-secondary btn-sm" data-pick="src">${t("jobs.pick_folder")}</button>
+          </div>
         </div>
         <div class="field">
           <label>${t("jobs.dest_remote")}</label>
@@ -96,7 +100,10 @@ export async function renderNewJob() {
         </div>
         <div class="field">
           <label>${t("jobs.dest_path")}</label>
+          <div class="input-action">
             <input class="input" name="dstPath" placeholder="${t("jobs.path_placeholder")}" autocomplete="off">
+            <button type="button" class="btn btn-secondary btn-sm" data-pick="dst">${t("jobs.pick_folder")}</button>
+          </div>
         </div>
         <div class="field field-full">
           <span class="field-help">${t("jobs.local_path_help")}</span>
@@ -114,6 +121,21 @@ export async function renderNewJob() {
   }
 
   const form = document.getElementById("new-job-form");
+  form.querySelector('[data-pick="src"]').addEventListener("click", () => {
+    openFolderPicker({
+      location: form.elements.srcRemote.value,
+      pathInput: form.elements.srcPath,
+      title: t("jobs.pick_source_title"),
+    });
+  });
+  form.querySelector('[data-pick="dst"]').addEventListener("click", () => {
+    openFolderPicker({
+      location: form.elements.dstRemote.value,
+      pathInput: form.elements.dstPath,
+      title: t("jobs.pick_dest_title"),
+    });
+  });
+
   form.addEventListener("submit", async (e) => {
     e.preventDefault();
     const action = form.elements.action.value;
@@ -159,6 +181,124 @@ function buildJobFs(location, rawPath) {
   return remotePath ? `${location}${remotePath}` : location;
 }
 
+async function openFolderPicker({ location, pathInput, title }) {
+  const root = document.getElementById("modal-root");
+  let current = initialPickerPath(location, pathInput.value);
+
+  const close = () => {
+    root.innerHTML = "";
+  };
+
+  const choose = () => {
+    pathInput.value = current;
+    close();
+  };
+
+  const render = async () => {
+    root.innerHTML = `
+      <div class="modal-overlay">
+        <div class="modal folder-picker">
+          <h3>${escapeHtml(title)}</h3>
+          <div class="folder-picker-path">
+            <span>${escapeHtml(displayPickerPath(location, current))}</span>
+          </div>
+          <div class="folder-picker-list">
+            <p class="empty">${t("loading.title")}…</p>
+          </div>
+          <div class="modal-actions">
+            <button type="button" class="btn btn-secondary" data-cancel>${t("browser.modal.cancel")}</button>
+            <button type="button" class="btn btn-primary" data-select>${t("jobs.pick_current")}</button>
+          </div>
+        </div>
+      </div>
+    `;
+
+    const overlay = root.querySelector(".modal-overlay");
+    const list = root.querySelector(".folder-picker-list");
+    overlay.addEventListener("click", (e) => {
+      if (e.target === overlay) close();
+    });
+    root.querySelector("[data-cancel]").addEventListener("click", close);
+    root.querySelector("[data-select]").addEventListener("click", choose);
+
+    try {
+      const dirs = await listDirs(location, current);
+      const parent = parentPickerPath(location, current);
+      list.innerHTML = `
+        <button type="button" class="folder-picker-row" data-path="${escapeAttr(parent ?? "")}" ${parent == null ? "disabled" : ""}>${t("browser.up")}</button>
+        ${dirs.length === 0 ? `<p class="empty">${t("jobs.pick_empty")}</p>` : dirs.map((dir) => `
+          <button type="button" class="folder-picker-row" data-path="${escapeAttr(joinPickerPath(current, dir.Name))}">
+            ${escapeHtml(dir.Name)}
+          </button>
+        `).join("")}
+      `;
+      list.querySelectorAll("[data-path]").forEach((btn) => {
+        btn.addEventListener("click", () => {
+          if (btn.disabled) return;
+          current = btn.dataset.path;
+          render();
+        });
+      });
+    } catch (e) {
+      list.innerHTML = `<div class="empty"><h3>${t("error.couldnt_list")}</h3><p>${escapeHtml(e.message)}</p></div>`;
+    }
+  };
+
+  await render();
+}
+
+async function listDirs(location, current) {
+  const isLocal = location === LOCAL_FS_VALUE;
+  const body = isLocal
+    ? { fs: current || LOCAL_PICKER_ROOT, remote: "" }
+    : { fs: location, remote: trimRemotePath(current) };
+  const res = await post("operations/list", {
+    ...body,
+    opt: { dirsOnly: true, noModTime: true, noMimeType: true, showHash: false },
+  });
+  const items = (res && res.list) || [];
+  return items
+    .filter((item) => item.IsDir)
+    .sort((a, b) => a.Name.localeCompare(b.Name));
+}
+
+function initialPickerPath(location, rawPath) {
+  const value = rawPath.trim();
+  if (location === LOCAL_FS_VALUE) {
+    return value || LOCAL_PICKER_ROOT;
+  }
+  return trimRemotePath(value);
+}
+
+function displayPickerPath(location, current) {
+  if (location === LOCAL_FS_VALUE) {
+    return current || "/";
+  }
+  return current ? `${location}${current}` : location;
+}
+
+function parentPickerPath(location, current) {
+  if (location === LOCAL_FS_VALUE) {
+    if (!current || current === "/") return null;
+    const normalized = current.replace(/\/+$/g, "");
+    const parent = normalized.slice(0, normalized.lastIndexOf("/")) || "/";
+    return parent;
+  }
+  if (!current) return null;
+  const parts = trimRemotePath(current).split("/").filter(Boolean);
+  parts.pop();
+  return parts.join("/");
+}
+
+function joinPickerPath(current, name) {
+  if (!current || current === "/") return current === "/" ? `/${name}` : name;
+  return `${current.replace(/\/+$/g, "")}/${name}`;
+}
+
+function trimRemotePath(path) {
+  return path.trim().replace(/^\/+|\/+$/g, "");
+}
+
 async function refreshJobs() {
   const card = document.getElementById("jobs-card");
   if (!card) return false;
@@ -431,6 +571,10 @@ function escapeHtml(s) {
     .replace(/'/g, "&#39;");
 }
 
+function escapeAttr(s) {
+  return escapeHtml(s);
+}
+
 function formatDateTime(value) {
   if (!value) return "";
   const date = new Date(value);

webgui/web/assets/styles/components.css

@@ -303,6 +303,21 @@
   color: var(--color-muted);
 }
 
+.input-action {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+.input-action .input {
+  flex: 1;
+  min-width: 0;
+}
+
+.input-action .btn {
+  flex-shrink: 0;
+}
+
 /* ---------- Badges ---------- */
 .badge {
   display: inline-flex;
@@ -580,6 +595,49 @@
   border-color: transparent;
 }
 
+.folder-picker {
+  max-width: 640px;
+}
+
+.folder-picker-path {
+  padding: var(--space-sm) var(--space-md);
+  background-color: var(--color-surface-dark-elevated);
+  border-radius: var(--radius-md);
+  color: var(--color-on-dark-soft);
+  font: var(--typo-code);
+  word-break: break-all;
+}
+
+.folder-picker-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  max-height: 360px;
+  overflow: auto;
+}
+
+.folder-picker-row {
+  width: 100%;
+  padding: var(--space-sm) var(--space-md);
+  background-color: var(--color-surface-dark-elevated);
+  color: var(--color-on-dark);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  text-align: left;
+  font: var(--typo-body-sm);
+  cursor: pointer;
+}
+
+.folder-picker-row:hover {
+  border-color: var(--color-primary);
+}
+
+.folder-picker-row:disabled {
+  color: var(--color-muted-soft);
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
 /* ---------- Footer ---------- */
 .footer {
   background-color: var(--color-surface-dark);

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=jobs-details-1">
+  <link rel="stylesheet" href="/assets/styles/components.css?v=jobs-picker-restore-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=jobs-details-1"></script>
+  <script type="module" src="/assets/js/app.js?v=jobs-picker-restore-1"></script>
 </body>
 </html>