add: 添加选择文件夹功能

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>
-          <input class="input" name="srcPath" placeholder="${t("jobs.path_placeholder")}" autocomplete="off">
+          <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>
-          <input class="input" name="dstPath" placeholder="${t("jobs.path_placeholder")}" autocomplete="off">
+          <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);