@shwfed/config 3.0.10 → 3.0.12

package/dist/runtime/components/table/columns/2026-07-16/com.shwfed.table.column.upload/config.vue

@@ -0,0 +1,1004 @@
+<script setup>
+import { computed, defineComponent, ref, watch } from "vue";
+import { Icon } from "@iconify/vue";
+import {
+  useTreeDnd
+} from "../../../../../composables/useTreeDnd";
+import { provideCELContext } from "../../../../../utils/cel-context";
+import TriggersField from "../../../../actions/components/triggers-field.vue";
+import { ExpressionEditor } from "../../../../ui/expression-editor";
+import { Separator } from "../../../../ui/separator";
+import { Switch } from "../../../../ui/switch";
+import { Button } from "../../../../ui/button";
+import { Field, FieldLabel } from "../../../../ui/field";
+import { IconPicker } from "../../../../ui/icon-picker";
+import { Locale } from "../../../../ui/locale";
+import { Markdown } from "../../../../ui/markdown";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
+} from "../../../../ui/dropdown-menu";
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupInput,
+  InputGroupNumberField
+} from "../../../../ui/input-group";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from "../../../../ui/select";
+import { getStructFieldDescription, getStructFieldTitle } from "../../../utils/schema-meta";
+import { FILE_VAR, FILES_VAR, JSON_VAR, UPLOAD_JSON_VAR, schema } from "./schema";
+defineOptions({ name: "ShwfedTableUploadRendererConfig" });
+const value = defineModel({ type: Object, ...{ required: true } });
+const fieldSchema = schema(() => {
+});
+const fieldTitle = (field) => getStructFieldTitle(fieldSchema, field) ?? field;
+const fieldDescription = (field) => getStructFieldDescription(fieldSchema, field);
+const ROW_VARS = {
+  row: { type: "dyn", label: "\u5F53\u524D\u884C\u6570\u636E" },
+  index: { type: "number", label: "\u884C\u7D22\u5F15" }
+};
+const UPLOAD_REQUEST_VARS = { ...ROW_VARS, files: FILES_VAR };
+const UPLOAD_HANDLE_VARS = { ...ROW_VARS, json: UPLOAD_JSON_VAR };
+const UPLOAD_FILENAME_VARS = { ...ROW_VARS, file: FILE_VAR };
+const TEMPLATE_DOWNLOAD_VARS = { ...ROW_VARS, json: JSON_VAR };
+const bindingText = computed({
+  get: () => value.value.binding ?? "",
+  set: (next) => {
+    const trimmed = next.trim();
+    if (trimmed.length === 0) {
+      const { binding: _drop, ...rest } = value.value;
+      value.value = rest;
+    } else {
+      value.value = { ...value.value, binding: trimmed };
+    }
+  }
+});
+const disabledModel = computed({
+  get: () => value.value.disabled ?? "",
+  set: (v) => {
+    if (v === "") {
+      const { disabled: _drop, ...rest } = value.value;
+      value.value = rest;
+    } else {
+      value.value = { ...value.value, disabled: v };
+    }
+  }
+});
+const readonlyModel = computed({
+  get: () => value.value.readonly ?? "",
+  set: (v) => {
+    if (v === "") {
+      const { readonly: _drop, ...rest } = value.value;
+      value.value = rest;
+    } else {
+      value.value = { ...value.value, readonly: v };
+    }
+  }
+});
+function onHiddenChange(v) {
+  if (v) {
+    value.value = { ...value.value, hidden: true };
+  } else {
+    const { hidden: _drop, ...rest } = value.value;
+    value.value = rest;
+  }
+}
+const uploadEnabled = computed(() => value.value.upload != null);
+function setUploadEnabled(on) {
+  if (on) {
+    if (value.value.upload) return;
+    value.value = { ...value.value, upload: { request: "", handle: "" } };
+  } else {
+    const { upload: _omit, ...rest } = value.value;
+    value.value = rest;
+  }
+}
+const uploadRequestText = computed({
+  get: () => value.value.upload?.request ?? "",
+  set: (next) => {
+    const current = value.value.upload;
+    if (!current) return;
+    value.value = { ...value.value, upload: { ...current, request: next } };
+  }
+});
+const uploadHandleText = computed({
+  get: () => value.value.upload?.handle ?? "",
+  set: (next) => {
+    const current = value.value.upload;
+    if (!current) return;
+    value.value = { ...value.value, upload: { ...current, handle: next } };
+  }
+});
+const uploadFilenameText = computed({
+  get: () => value.value.upload?.filename ?? "",
+  set: (next) => {
+    const current = value.value.upload;
+    if (!current) return;
+    if (next.length === 0) {
+      const { filename: _omit, ...rest } = current;
+      value.value = { ...value.value, upload: rest };
+    } else {
+      value.value = { ...value.value, upload: { ...current, filename: next } };
+    }
+  }
+});
+const templates = computed(() => value.value.templates ?? []);
+function setTemplates(next) {
+  if (next.length === 0) {
+    const { templates: _omit, ...rest } = value.value;
+    value.value = rest;
+  } else {
+    value.value = { ...value.value, templates: next };
+  }
+}
+function makeId() {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) return crypto.randomUUID();
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
+    const r = Math.random() * 16 | 0;
+    return (c === "x" ? r : r & 3 | 8).toString(16);
+  });
+}
+const rowKeys = ref([]);
+watch(
+  () => templates.value.length,
+  (len) => {
+    if (len === rowKeys.value.length) return;
+    rowKeys.value = Array.from({ length: len }, () => makeId());
+  },
+  { immediate: true }
+);
+function addTemplate() {
+  setTemplates([...templates.value, { request: "" }]);
+  rowKeys.value = [...rowKeys.value, makeId()];
+}
+function removeTemplate(index) {
+  setTemplates(templates.value.filter((_, i) => i !== index));
+  rowKeys.value = rowKeys.value.filter((_, i) => i !== index);
+}
+function move(from, to) {
+  if (from === to) return;
+  if (from < 0 || to < 0 || from >= templates.value.length || to >= templates.value.length) return;
+  const next = [...templates.value];
+  const [entry] = next.splice(from, 1);
+  if (!entry) return;
+  next.splice(to, 0, entry);
+  setTemplates(next);
+  const keys = [...rowKeys.value];
+  const [key] = keys.splice(from, 1);
+  if (!key) return;
+  keys.splice(to, 0, key);
+  rowKeys.value = keys;
+}
+function patchTemplate(index, patch) {
+  setTemplates(templates.value.map((entry, i) => i === index ? patch(entry) : entry));
+}
+const TEMPLATE_ROW_KIND = "shwfed-table-upload-template";
+const rowId = (i) => rowKeys.value[i] ?? `idx-${i}`;
+function onTemplateRowDrop(e) {
+  if (e.source.kind !== TEMPLATE_ROW_KIND || e.target.kind !== TEMPLATE_ROW_KIND) return;
+  const from = rowKeys.value.findIndex((k) => k === e.source.id);
+  const to = rowKeys.value.findIndex((k) => k === e.target.id);
+  if (from < 0 || to < 0) return;
+  if (e.instruction === "reorder-above") move(from, from < to ? to - 1 : to);
+  else if (e.instruction === "reorder-below") move(from, from <= to ? to : to + 1);
+}
+const templateDnd = useTreeDnd({ onRowDrop: onTemplateRowDrop });
+const pickDragHandle = (el) => el.querySelector(".drag-handle");
+function templateRowConfig(i) {
+  return {
+    kind: TEMPLATE_ROW_KIND,
+    canDrop: (src) => src.kind === TEMPLATE_ROW_KIND,
+    blockInstructions: (src) => {
+      const block = ["make-child", "reparent"];
+      if (src.id === rowId(i)) block.push("reorder-above", "reorder-below");
+      return block;
+    },
+    dragHandle: pickDragHandle
+  };
+}
+function updateTemplateRequest(index, request) {
+  patchTemplate(index, (entry) => ({ ...entry, request }));
+}
+function updateTemplateDownload(index, download) {
+  patchTemplate(index, (entry) => {
+    if (download.length === 0) {
+      const { download: _omit, ...rest } = entry;
+      return rest;
+    }
+    return { ...entry, download };
+  });
+}
+function updateTemplateIcon(index, icon) {
+  patchTemplate(index, (entry) => {
+    const trimmed = icon.trim();
+    if (trimmed.length === 0) {
+      const { icon: _omit, ...rest } = entry;
+      return rest;
+    }
+    return { ...entry, icon: trimmed };
+  });
+}
+function updateTemplateLabel(index, label) {
+  patchTemplate(index, (entry) => {
+    if (label == null || label.length === 0) {
+      const { label: _omit, ...rest } = entry;
+      return rest;
+    }
+    return { ...entry, label };
+  });
+}
+const MIME_GROUPS = [
+  { id: "pdf", label: "PDF", mimes: ["application/pdf"] },
+  { id: "docx", label: "DOCX", mimes: ["application/vnd.openxmlformats-officedocument.wordprocessingml.document"] },
+  { id: "doc", label: "DOC", mimes: ["application/msword"] },
+  { id: "xlsx", label: "XLSX", mimes: ["application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"] },
+  { id: "xls", label: "XLS", mimes: ["application/vnd.ms-excel"] },
+  { id: "pptx", label: "PPTX", mimes: ["application/vnd.openxmlformats-officedocument.presentationml.presentation"] },
+  { id: "ppt", label: "PPT", mimes: ["application/vnd.ms-powerpoint"] },
+  { id: "zip", label: "ZIP", mimes: ["application/zip", "application/x-zip-compressed"] },
+  { id: "rar", label: "RAR", mimes: ["application/vnd.rar", "application/x-rar-compressed"] },
+  { id: "ofd", label: "OFD", mimes: ["application/ofd"] },
+  { id: "xml", label: "XML", mimes: ["application/xml"] },
+  { id: "png", label: "PNG", mimes: ["image/png"] },
+  { id: "jpeg", label: "JPEG", mimes: ["image/jpeg", "image/jpg"] }
+];
+const GROUP_BY_ID = new Map(MIME_GROUPS.map((g) => [g.id, g]));
+const acceptList = computed(() => value.value.accept ?? []);
+const selectedGroupIds = computed(
+  () => MIME_GROUPS.filter((g) => g.mimes.every((m) => acceptList.value.includes(m))).map((g) => g.id)
+);
+const selectedGroupLabels = computed(
+  () => selectedGroupIds.value.map((id) => GROUP_BY_ID.get(id)?.label).filter(Boolean).join("\u3001")
+);
+function onAcceptChange(next) {
+  const ids = Array.isArray(next) ? next.filter((v) => typeof v === "string") : typeof next === "string" ? [next] : [];
+  const mimes = ids.flatMap((id) => GROUP_BY_ID.get(id)?.mimes ?? []);
+  if (mimes.length === 0) {
+    const { accept: _omit, ...rest } = value.value;
+    value.value = rest;
+  } else {
+    value.value = { ...value.value, accept: mimes };
+  }
+}
+function pickUnitFor(bytes) {
+  if (bytes === void 0) return "MB";
+  return bytes < 1024 * 1024 ? "KB" : "MB";
+}
+function multiplierFor(unit) {
+  return unit === "KB" ? 1024 : 1024 * 1024;
+}
+function makeSizeBinding(prop) {
+  const unit = ref(pickUnitFor(value.value[prop]));
+  const amount = computed({
+    get: () => {
+      const v = value.value[prop];
+      return v === void 0 ? void 0 : v / multiplierFor(unit.value);
+    },
+    set: (next) => {
+      if (next === void 0 || !(next > 0)) {
+        const { [prop]: _omit, ...rest } = value.value;
+        value.value = rest;
+        return;
+      }
+      value.value = { ...value.value, [prop]: Math.round(next * multiplierFor(unit.value)) };
+    }
+  });
+  return { unit, amount };
+}
+const perFile = makeSizeBinding("maxFileSize");
+const total = makeSizeBinding("maxTotalSize");
+function setMaxFiles(v) {
+  if (v === void 0 || !(v > 0)) {
+    const { maxFiles: _omit, ...rest } = value.value;
+    value.value = rest;
+  } else {
+    value.value = { ...value.value, maxFiles: Math.round(v) };
+  }
+}
+function setMultiple(v) {
+  if (!v) {
+    const { multiple: _omit, ...rest } = value.value;
+    value.value = rest;
+  } else {
+    value.value = { ...value.value, multiple: true };
+  }
+}
+const downloadEnabled = computed(() => value.value.download != null);
+function setDownloadEnabled(on) {
+  if (on) {
+    if (value.value.download) return;
+    value.value = { ...value.value, download: { operations: [] } };
+  } else {
+    const { download: _omit, ...rest } = value.value;
+    value.value = rest;
+  }
+}
+const downloadOperations = computed(() => value.value.download?.operations ?? []);
+function updateDownloadOperations(next) {
+  const current = value.value.download;
+  if (!current) return;
+  value.value = { ...value.value, download: { ...current, operations: next } };
+}
+function updateDownloadIcon(icon) {
+  const current = value.value.download;
+  if (!current) return;
+  const trimmed = icon.trim();
+  if (trimmed.length === 0) {
+    const { icon: _omit, ...rest } = current;
+    value.value = { ...value.value, download: rest };
+  } else {
+    value.value = { ...value.value, download: { ...current, icon: trimmed } };
+  }
+}
+function updateDownloadLabel(label) {
+  const current = value.value.download;
+  if (!current) return;
+  if (label == null || label.length === 0) {
+    const { label: _omit, ...rest } = current;
+    value.value = { ...value.value, download: rest };
+  } else {
+    value.value = { ...value.value, download: { ...current, label } };
+  }
+}
+const DownloadScope = defineComponent({
+  name: "ShwfedTableUploadDownloadScope",
+  setup(_, { slots }) {
+    provideCELContext({
+      file: { type: FILE_VAR.type, label: FILE_VAR.label, description: FILE_VAR.description, value: () => void 0 }
+    });
+    return () => slots.default?.();
+  }
+});
+</script>
+
+<template>
+  <div class="space-y-5">
+    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('title')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('title')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("title") }}
+        </FieldLabel>
+        <Locale
+          :model-value="value.title"
+          @update:model-value="(v) => value = { ...value, title: v }"
+        />
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('binding')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('binding')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("binding") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            v-model="bindingText"
+            placeholder="例：attachments"
+            class="font-mono"
+          />
+        </InputGroup>
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('tooltip')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('tooltip')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("tooltip") }}
+        </FieldLabel>
+        <Locale
+          :model-value="value.tooltip"
+          markdown
+          @update:model-value="(v) => value = { ...value, tooltip: v }"
+        />
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('placeholder')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('placeholder')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("placeholder") }}
+        </FieldLabel>
+        <Locale
+          :model-value="value.placeholder"
+          @update:model-value="(v) => value = { ...value, placeholder: v }"
+        />
+      </Field>
+    </div>
+
+    <div class="grid grid-cols-3 gap-x-6 gap-y-4">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('multiple')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('multiple')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("multiple") }}
+        </FieldLabel>
+        <div>
+          <Switch
+            :model-value="value.multiple ?? false"
+            @update:model-value="setMultiple"
+          />
+        </div>
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('maxFiles')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('maxFiles')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("maxFiles") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupNumberField
+            :model-value="value.maxFiles"
+            :min="1"
+            @update:model-value="setMaxFiles"
+          />
+        </InputGroup>
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('accept')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('accept')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("accept") }}
+        </FieldLabel>
+        <Select
+          multiple
+          :model-value="selectedGroupIds"
+          @update:model-value="onAcceptChange"
+        >
+          <SelectTrigger class="w-full">
+            <SelectValue placeholder="不限制">
+              <span v-if="selectedGroupLabels.length > 0">{{ selectedGroupLabels }}</span>
+              <span
+                v-else
+                class="text-zinc-400"
+              >不限制</span>
+            </SelectValue>
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem
+              v-for="group in MIME_GROUPS"
+              :key="group.id"
+              :value="group.id"
+            >
+              {{ group.label }}
+            </SelectItem>
+          </SelectContent>
+        </Select>
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('maxFileSize')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('maxFileSize')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("maxFileSize") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupNumberField
+            :model-value="perFile.amount.value"
+            :min="0"
+            @update:model-value="(v) => perFile.amount.value = v"
+          />
+          <InputGroupAddon align="inline-end">
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <InputGroupButton
+                  variant="ghost"
+                  class="pr-1.5! text-xs"
+                >
+                  {{ perFile.unit.value }}
+                  <Icon
+                    icon="lucide:chevron-down"
+                    class="size-3"
+                  />
+                </InputGroupButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem @select="perFile.unit.value = 'KB'">
+                  KB
+                </DropdownMenuItem>
+                <DropdownMenuItem @select="perFile.unit.value = 'MB'">
+                  MB
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('maxTotalSize')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('maxTotalSize')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("maxTotalSize") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupNumberField
+            :model-value="total.amount.value"
+            :min="0"
+            @update:model-value="(v) => total.amount.value = v"
+          />
+          <InputGroupAddon align="inline-end">
+            <DropdownMenu>
+              <DropdownMenuTrigger as-child>
+                <InputGroupButton
+                  variant="ghost"
+                  class="pr-1.5! text-xs"
+                >
+                  {{ total.unit.value }}
+                  <Icon
+                    icon="lucide:chevron-down"
+                    class="size-3"
+                  />
+                </InputGroupButton>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end">
+                <DropdownMenuItem @select="total.unit.value = 'KB'">
+                  KB
+                </DropdownMenuItem>
+                <DropdownMenuItem @select="total.unit.value = 'MB'">
+                  MB
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+    </div>
+
+    <Separator />
+
+    <!-- Immediate upload -->
+    <div class="flex items-center gap-2">
+      <h3 class="text-xs font-medium text-zinc-500">
+        {{ fieldTitle("upload") }}
+      </h3>
+      <Switch
+        size="sm"
+        :model-value="uploadEnabled"
+        aria-label="启用即时上传"
+        @update:model-value="setUploadEnabled"
+      />
+    </div>
+
+    <div
+      v-if="uploadEnabled"
+      class="flex flex-col gap-4"
+    >
+      <div class="grid grid-cols-2 gap-x-6 gap-y-4">
+        <Field orientation="vertical">
+          <FieldLabel class="text-xs text-zinc-500">
+            <template #tooltip>
+              <Markdown
+                source="返回 `HttpRequest` 的 CEL 表达式，可用 `files` 引用本次选择的文件，例如 `http.post(url).body(form({&quot;files&quot;: files}))`"
+                block
+                class="prose prose-sm prose-zinc"
+              />
+            </template>
+            上传请求
+          </FieldLabel>
+          <ExpressionEditor
+            :model-value="uploadRequestText"
+            placeholder="例：http.post('/api/upload').body(form({ 'files': files }))"
+            result-type="HttpRequest"
+            :extra-vars="UPLOAD_REQUEST_VARS"
+            multiline
+            class="min-h-16"
+            @update:model-value="(v) => uploadRequestText = v"
+          />
+        </Field>
+
+        <Field orientation="vertical">
+          <FieldLabel class="text-xs text-zinc-500">
+            <template #tooltip>
+              <Markdown
+                source="返回**列表**的 CEL 表达式，可用 `json` 引用上传响应；映射为写入绑定值的文件项"
+                block
+                class="prose prose-sm prose-zinc"
+              />
+            </template>
+            处理响应
+          </FieldLabel>
+          <ExpressionEditor
+            :model-value="uploadHandleText"
+            placeholder="例：json.data.map(d, { 'cacheKey': d.key, 'filename': d.fileOriginalName })"
+            result-type="list"
+            :extra-vars="UPLOAD_HANDLE_VARS"
+            multiline
+            class="min-h-16"
+            @update:model-value="(v) => uploadHandleText = v"
+          />
+        </Field>
+      </div>
+
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template #tooltip>
+            <Markdown
+              source="返回 `string` 的 CEL 表达式，可用 `file` 引用单个文件项；用于展示文件名。留空时回退到 `filename` / `name` 字段"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          文件名
+        </FieldLabel>
+        <ExpressionEditor
+          :model-value="uploadFilenameText"
+          placeholder="例：file.filename"
+          result-type="string"
+          :extra-vars="UPLOAD_FILENAME_VARS"
+          class="min-h-10"
+          @update:model-value="(v) => uploadFilenameText = v"
+        />
+      </Field>
+    </div>
+
+    <Separator />
+
+    <!-- Per-file download -->
+    <div class="flex items-center gap-2">
+      <h3 class="text-xs font-medium text-zinc-500">
+        {{ fieldTitle("download") }}
+      </h3>
+      <Switch
+        size="sm"
+        :model-value="downloadEnabled"
+        aria-label="启用文件下载"
+        @update:model-value="setDownloadEnabled"
+      />
+    </div>
+
+    <div
+      v-if="downloadEnabled"
+      class="flex flex-col gap-4"
+    >
+      <div class="grid grid-cols-2 gap-x-6 gap-y-4">
+        <Field orientation="vertical">
+          <FieldLabel class="text-xs text-zinc-500">
+            下载按钮图标
+          </FieldLabel>
+          <IconPicker
+            :model-value="value.download?.icon ?? ''"
+            @update:model-value="updateDownloadIcon"
+          />
+        </Field>
+
+        <Field orientation="vertical">
+          <FieldLabel class="text-xs text-zinc-500">
+            下载按钮文本
+          </FieldLabel>
+          <Locale
+            :model-value="value.download?.label"
+            @update:model-value="updateDownloadLabel"
+          />
+        </Field>
+      </div>
+
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template #tooltip>
+            <Markdown
+              source="点击文件项的下载按钮时按顺序执行的操作；可用 `file` 引用该文件项。尚未上传的本地文件会直接从内存下载，不经过此列表"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          触发操作
+        </FieldLabel>
+        <DownloadScope>
+          <TriggersField
+            :triggers="downloadOperations"
+            @update:triggers="updateDownloadOperations"
+          />
+        </DownloadScope>
+      </Field>
+    </div>
+
+    <Separator />
+
+    <!-- Download templates -->
+    <Field orientation="vertical">
+      <FieldLabel class="text-xs text-zinc-500">
+        <template #tooltip>
+          <Markdown
+            :source="fieldDescription('templates') ?? '\u4E0B\u8F7D\u6A21\u677F\u5217\u8868\uFF1B\u6BCF\u4E00\u9879\u6E32\u67D3\u4E00\u4E2A\u4E0B\u8F7D\u6309\u94AE'"
+            block
+            class="prose prose-sm prose-zinc"
+          />
+        </template>
+        {{ fieldTitle("templates") }}
+      </FieldLabel>
+
+      <div class="flex flex-col gap-2">
+        <div
+          v-for="(template, index) in templates"
+          :key="rowKeys[index]"
+          :ref="templateDnd.rowRef(rowId(index), templateRowConfig(index))"
+          data-slot="upload-template"
+          class="relative flex items-start gap-2 rounded border border-zinc-200 bg-zinc-50/40 p-2"
+          :data-instruction="templateDnd.instructionFor(rowId(index)) ?? void 0"
+        >
+          <Icon
+            icon="fluent:re-order-dots-vertical-20-regular"
+            class="drag-handle mt-2.5 size-4 shrink-0 cursor-grab text-zinc-400"
+            data-slot="upload-template-drag-handle"
+          />
+
+          <div class="flex min-w-0 flex-1 flex-col gap-2">
+            <div class="grid grid-cols-2 gap-2">
+              <Field orientation="vertical">
+                <FieldLabel class="text-xs text-zinc-500">
+                  <template #tooltip>
+                    <Markdown
+                      source="返回 `HttpRequest` 的 CEL 表达式。未配置「下载请求」时直接发起并下载其响应"
+                      block
+                      class="prose prose-sm prose-zinc"
+                    />
+                  </template>
+                  请求
+                </FieldLabel>
+                <ExpressionEditor
+                  :model-value="template.request"
+                  placeholder="例：http.get('https://api.example.com/template.xlsx')"
+                  result-type="HttpRequest"
+                  :extra-vars="ROW_VARS"
+                  class="min-h-10"
+                  @update:model-value="(v) => updateTemplateRequest(index, v)"
+                />
+              </Field>
+
+              <Field orientation="vertical">
+                <FieldLabel class="text-xs text-zinc-500">
+                  <template #tooltip>
+                    <Markdown
+                      source="可选的第二步：用第一步响应 `json` 中的凭据构造真正的下载请求，例如 `json.data.key`"
+                      block
+                      class="prose prose-sm prose-zinc"
+                    />
+                  </template>
+                  下载请求
+                </FieldLabel>
+                <ExpressionEditor
+                  :model-value="template.download ?? ''"
+                  placeholder="例：http.get('https://api.example.com/download').query('key', json.data.key)"
+                  result-type="HttpRequest"
+                  :extra-vars="TEMPLATE_DOWNLOAD_VARS"
+                  class="min-h-10"
+                  @update:model-value="(v) => updateTemplateDownload(index, v)"
+                />
+              </Field>
+            </div>
+
+            <div class="grid grid-cols-2 gap-2">
+              <Field orientation="vertical">
+                <FieldLabel class="text-xs text-zinc-500">
+                  模板按钮图标
+                </FieldLabel>
+                <IconPicker
+                  :model-value="template.icon ?? ''"
+                  @update:model-value="(v) => updateTemplateIcon(index, v)"
+                />
+              </Field>
+
+              <Field orientation="vertical">
+                <FieldLabel class="text-xs text-zinc-500">
+                  模板按钮文本
+                </FieldLabel>
+                <Locale
+                  :model-value="template.label"
+                  @update:model-value="(v) => updateTemplateLabel(index, v)"
+                />
+              </Field>
+            </div>
+          </div>
+
+          <Button
+            variant="ghost"
+            size="sm"
+            class="absolute top-1 right-1 size-6 p-0 text-red-600 hover:text-red-700"
+            aria-label="移除模板"
+            @click="removeTemplate(index)"
+          >
+            <Icon icon="fluent:delete-20-regular" />
+          </Button>
+        </div>
+
+        <Button
+          type="button"
+          data-slot="upload-template-add"
+          class="w-full justify-center"
+          @click="addTemplate"
+        >
+          <Icon icon="fluent:add-20-regular" />
+          <span>增加</span>
+        </Button>
+      </div>
+    </Field>
+
+    <Separator />
+
+    <div class="grid grid-cols-2 gap-x-6 gap-y-4">
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('disabled')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('disabled')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("disabled") }}
+        </FieldLabel>
+        <ExpressionEditor
+          v-model="disabledModel"
+          placeholder="例：row.locked"
+          result-type="bool"
+          :extra-vars="ROW_VARS"
+        />
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('readonly')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('readonly')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("readonly") }}
+        </FieldLabel>
+        <ExpressionEditor
+          v-model="readonlyModel"
+          placeholder="例：row.id != null"
+          result-type="bool"
+          :extra-vars="ROW_VARS"
+        />
+      </Field>
+    </div>
+
+    <div class="flex flex-wrap gap-x-8 gap-y-3">
+      <Field
+        orientation="vertical"
+        class="w-full max-w-xs"
+      >
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('enableSorting')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('enableSorting')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("enableSorting") }}
+        </FieldLabel>
+        <InputGroup>
+          <InputGroupInput
+            :model-value="value.sortKey"
+            placeholder="例：created_at"
+            @update:model-value="(v) => value = { ...value, sortKey: v || void 0 }"
+          />
+          <InputGroupAddon align="inline-end">
+            <InputGroupButton
+              :variant="value.enableSorting ? 'primary' : 'ghost'"
+              size="xs"
+              @click="value = { ...value, enableSorting: !value.enableSorting }"
+            >
+              <Icon :icon="value.enableSorting ? 'fluent:arrow-sort-up-16-regular' : 'fluent:arrow-sort-16-regular'" />
+              {{ fieldTitle("enableSorting") }}
+            </InputGroupButton>
+          </InputGroupAddon>
+        </InputGroup>
+      </Field>
+      <Field orientation="vertical">
+        <FieldLabel class="text-xs text-zinc-500">
+          <template
+            v-if="fieldDescription('hidden')"
+            #tooltip
+          >
+            <Markdown
+              :source="fieldDescription('hidden')"
+              block
+              class="prose prose-sm prose-zinc"
+            />
+          </template>
+          {{ fieldTitle("hidden") }}
+        </FieldLabel>
+        <div>
+          <Switch
+            :model-value="value.hidden ?? false"
+            @update:model-value="onHiddenChange"
+          />
+        </div>
+      </Field>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+[data-instruction=reorder-above]:before,[data-instruction=reorder-below]:after{background:var(--primary,#2563eb);content:"";height:2px;left:0;pointer-events:none;position:absolute;right:0;z-index:1}[data-instruction=reorder-above]:before{top:-5px}[data-instruction=reorder-below]:after{bottom:-5px}
+</style>