@sia.soul/sia-react-ui 0.1.83 → 0.1.84

package/dist/index.cjs

@@ -1578,7 +1578,7 @@ function Steps({ items, current = 0, initial: initial3 = 0, direction = "horizon
     ] }, index);
   }) });
 }
-function Segmented({ options, value, defaultValue, size: sizeProp, block = false, vertical = false, disabled = false, onChange, className = "", onKeyDown, ...props }) {
+function Segmented({ options, value, defaultValue, variant = "default", size: sizeProp, block = false, vertical = false, disabled = false, onChange, className = "", onKeyDown, ...props }) {
   const size = useControlSize(sizeProp);
   const normalized = (0, import_react5.useMemo)(() => options.map((option) => typeof option === "object" ? option : { label: option, value: option }), [options]);
   const [current, setCurrent] = useControllableState({ value, defaultValue: defaultValue ?? normalized[0]?.value, onChange: (next) => next !== void 0 && onChange?.(next) });
@@ -1591,7 +1591,7 @@ function Segmented({ options, value, defaultValue, size: sizeProp, block = false
     const next = event.key === "ArrowRight" || event.key === "ArrowDown" ? enabled[(index + 1) % enabled.length] : enabled[(index - 1 + enabled.length) % enabled.length];
     if (next) setCurrent(next.value);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `sia-segmented sia-segmented--${size}${block ? " sia-segmented--block" : ""}${vertical ? " sia-segmented--vertical" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), role: "radiogroup", onKeyDown: keyboard, ...withTitleTooltip(props), children: normalized.map((option) => /* @__PURE__ */ (0, import_react6.createElement)("button", { type: "button", role: "radio", "aria-checked": option.value === current, ...withTitleTooltip({ title: option.title }), className: option.value === current ? "is-selected" : "", disabled: disabled || option.disabled, key: option.value, onClick: () => setCurrent(option.value) }, option.icon, /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: option.label ?? option.value }))) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `sia-segmented sia-segmented--${size}${variant === "zigzag" && !vertical && normalized.length === 2 ? " sia-segmented--zigzag" : ""}${block ? " sia-segmented--block" : ""}${vertical ? " sia-segmented--vertical" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), role: "radiogroup", onKeyDown: keyboard, ...withTitleTooltip(props), children: normalized.map((option) => /* @__PURE__ */ (0, import_react6.createElement)("button", { type: "button", role: "radio", "aria-checked": option.value === current, ...withTitleTooltip({ title: option.title }), className: option.value === current ? "is-selected" : "", disabled: disabled || option.disabled, key: option.value, onClick: () => setCurrent(option.value) }, option.icon, /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: option.label ?? option.value }))) });
 }
 
 // src/components/Dropdown.tsx
@@ -12666,6 +12666,29 @@ function mergeColumnSettings(columns, saved, active) {
   return [...merged.values()].sort((left, right) => left.order - right.order);
 }
 
+// src/components/settingsPersistence.ts
+var queues = /* @__PURE__ */ new WeakMap();
+function saveSettingsPatch(adapter, scope, patch) {
+  let scoped = queues.get(adapter);
+  if (!scoped) {
+    scoped = /* @__PURE__ */ new Map();
+    queues.set(adapter, scoped);
+  }
+  const key = JSON.stringify([scope.moduleName, scope.businessKey]);
+  const previous = scoped.get(key) ?? Promise.resolve();
+  const task = previous.catch(() => void 0).then(async () => {
+    const current = await adapter.load(scope);
+    const defined = Object.fromEntries(Object.entries(patch).filter(([, value]) => value !== void 0));
+    await adapter.save(scope, { ...current, ...defined });
+  });
+  scoped.set(key, task);
+  const cleanup2 = () => {
+    if (scoped.get(key) === task) scoped.delete(key);
+  };
+  void task.then(cleanup2, cleanup2);
+  return task;
+}
+
 // src/components/Table/plugins.tsx
 var import_jsx_runtime51 = require("react/jsx-runtime");
 function TableCheckbox({
@@ -14758,7 +14781,7 @@ function createColumnSettingPlugin(options = {}) {
     return items.filter((item) => keys.has(item.key));
   };
   const currentItems = (context) => reconcileColumnSettings(context.baseColumns, baseItems(context), context.state.items ?? []);
-  const save = (snapshot) => options.adapter && options.scope ? options.adapter.save(options.scope, snapshot).catch(() => void 0) : Promise.resolve();
+  const save = (snapshot) => options.adapter && options.scope ? saveSettingsPatch(options.adapter, options.scope, snapshot).catch(() => void 0) : Promise.resolve();
   function apply(items, context, persist = true) {
     const normalized = orderColumnSettings(
       editableItems(items, context).sort((a, b) => a.order - b.order)
@@ -23804,10 +23827,318 @@ var InputSelect = (0, import_react93.forwardRef)(function InputSelect2({
 });
 
 // src/components/QueryForm.tsx
+var import_react96 = require("react");
+
+// src/components/QueryFormSettings.tsx
+var import_react95 = require("react");
+
+// src/components/useQueryFieldSort.ts
 var import_react94 = require("react");
+function getQuerySortPreview(keys, rects, from, dy, gap) {
+  const center = rects[from].top + rects[from].height / 2 + dy;
+  const rest = keys.map((_, index) => index).filter((index) => index !== from);
+  const to = rest.filter((index) => center > rects[index].top + rects[index].height / 2).length;
+  const ordered = [...keys];
+  ordered.splice(to, 0, ordered.splice(from, 1)[0]);
+  const offsets = {};
+  const last = rects[rects.length - 1];
+  const boundedDy = Math.max(rects[0].top - rects[from].top, Math.min(dy, last.top + last.height - rects[from].height - rects[from].top));
+  let top = rects[0].top;
+  for (const key of ordered) {
+    const index = keys.indexOf(key);
+    offsets[key] = index === from ? boundedDy : top - rects[index].top;
+    top += rects[index].height + gap;
+  }
+  return { ordered, offsets };
+}
+function useQueryFieldSort(keys, enabled, onCommit) {
+  const listRef = (0, import_react94.useRef)(null);
+  const cancelRef = (0, import_react94.useRef)();
+  const commitRef = (0, import_react94.useRef)(onCommit);
+  commitRef.current = onCommit;
+  const [preview, setPreview] = (0, import_react94.useState)();
+  const signature = JSON.stringify(keys);
+  (0, import_react94.useEffect)(() => {
+    cancelRef.current?.();
+    return () => cancelRef.current?.();
+  }, [enabled, signature]);
+  function start(event, key) {
+    if (!enabled || event.button !== 0 || event.target.closest("button, input, label")) return;
+    const list = listRef.current;
+    const from = keys.indexOf(key);
+    if (!list || from < 0) return;
+    cancelRef.current?.();
+    const elements = [...list.querySelectorAll(".sia-query-settings__item")];
+    if (elements.length !== keys.length) return;
+    const rects = elements.map((element) => element.getBoundingClientRect());
+    const gap = parseFloat(getComputedStyle(list).rowGap) || 0;
+    const original = [...keys];
+    const target = event.currentTarget;
+    const pointerId = event.pointerId;
+    const startY = event.clientY;
+    const initialScroll = list.scrollTop;
+    const maxScroll = Math.max(0, list.scrollHeight - list.clientHeight);
+    const originalUserSelect = document.body.style.userSelect;
+    let lastY = startY;
+    let moved = false;
+    let ended = false;
+    let ordered = original;
+    let frame = 0;
+    target.setPointerCapture(pointerId);
+    const update = () => {
+      const dy = lastY - startY + list.scrollTop - initialScroll;
+      if (!moved && Math.abs(dy) < 4) return;
+      moved = true;
+      document.body.style.userSelect = "none";
+      const next = getQuerySortPreview(original, rects, from, dy, gap);
+      ordered = next.ordered;
+      setPreview({ key, offsets: next.offsets });
+    };
+    const tick = () => {
+      if (moved) {
+        const bounds = list.getBoundingClientRect();
+        const delta = lastY < bounds.top + 32 ? -10 : lastY > bounds.bottom - 32 ? 10 : 0;
+        const nextScroll = Math.max(0, Math.min(maxScroll, list.scrollTop + delta));
+        if (delta && nextScroll !== list.scrollTop) {
+          list.scrollTop = nextScroll;
+          update();
+        }
+      }
+      frame = requestAnimationFrame(tick);
+    };
+    const move = (next) => {
+      if (next.pointerId === pointerId) {
+        lastY = next.clientY;
+        update();
+      }
+    };
+    const finish = (commit) => {
+      if (ended) return;
+      ended = true;
+      document.removeEventListener("pointermove", move);
+      document.removeEventListener("pointerup", up);
+      document.removeEventListener("pointercancel", cancelPointer);
+      target.removeEventListener("lostpointercapture", cancel);
+      window.removeEventListener("blur", cancel);
+      window.removeEventListener("keydown", escape, true);
+      cancelAnimationFrame(frame);
+      if (target.hasPointerCapture(pointerId)) target.releasePointerCapture(pointerId);
+      document.body.style.userSelect = originalUserSelect;
+      cancelRef.current = void 0;
+      setPreview(void 0);
+      if (commit && moved) commitRef.current(ordered);
+    };
+    const up = (next) => {
+      if (next.pointerId === pointerId) {
+        lastY = next.clientY;
+        update();
+        finish(true);
+      }
+    };
+    const cancel = () => finish(false);
+    const cancelPointer = (next) => {
+      if (next.pointerId === pointerId) cancel();
+    };
+    const escape = (next) => {
+      if (next.key === "Escape") {
+        next.preventDefault();
+        next.stopImmediatePropagation();
+        cancel();
+      }
+    };
+    cancelRef.current = cancel;
+    document.addEventListener("pointermove", move);
+    document.addEventListener("pointerup", up);
+    document.addEventListener("pointercancel", cancelPointer);
+    target.addEventListener("lostpointercapture", cancel);
+    window.addEventListener("blur", cancel);
+    window.addEventListener("keydown", escape, true);
+    frame = requestAnimationFrame(tick);
+  }
+  return { listRef, preview, start };
+}
+
+// src/components/queryFormSettingsUtils.ts
+function reconcileQueryFields(keys, saved = []) {
+  const stored = new Map(saved.map((item) => [item.key, item]));
+  return keys.map((key, index) => ({
+    key,
+    visible: stored.get(key)?.visible !== false,
+    order: Number.isFinite(stored.get(key)?.order) ? stored.get(key).order : Infinity,
+    index
+  })).sort((a, b) => a.order - b.order || a.index - b.index).map(({ key, visible }, order) => ({ key, visible, order }));
+}
+function mergeQueryFields(saved, active) {
+  const current = new Set(active.map((item) => item.key));
+  return [...active, ...saved.filter((item) => !current.has(item.key))];
+}
+
+// src/components/QueryFormSettings.tsx
 var import_jsx_runtime91 = require("react/jsx-runtime");
+function useQueryFormSettings(config, fields, defaultCollapsed, applyCollapsed, disabled) {
+  const [snapshot, setSnapshot] = (0, import_react95.useState)();
+  const [draft, setDraft] = (0, import_react95.useState)({ fields: [], defaultCollapsed });
+  const [open, setOpen] = (0, import_react95.useState)(false);
+  const [loading, setLoading] = (0, import_react95.useState)(false);
+  const [saving, setSaving] = (0, import_react95.useState)(false);
+  const [error, setError] = (0, import_react95.useState)("");
+  const [loadFailed, setLoadFailed] = (0, import_react95.useState)(false);
+  const token = (0, import_react95.useRef)(0);
+  const saveLock = (0, import_react95.useRef)(false);
+  const latest = (0, import_react95.useRef)({ config, fields, defaultCollapsed, applyCollapsed });
+  latest.current = { config, fields, defaultCollapsed, applyCollapsed };
+  const moduleName = config?.scope.moduleName;
+  const businessKey = config?.scope.businessKey;
+  const adapter = config?.adapter;
+  async function load(edit) {
+    const current = latest.current;
+    if (!current.config) return;
+    const request = ++token.current;
+    setLoading(true);
+    setError("");
+    setLoadFailed(false);
+    try {
+      const stored = (await current.config.adapter.load(current.config.scope))?.queryForm;
+      if (request !== token.current) return;
+      const next = stored ?? { fields: [], defaultCollapsed: current.defaultCollapsed };
+      setSnapshot(next);
+      setDraft({ ...next, fields: reconcileQueryFields(latest.current.fields.map((field) => field.key), next.fields) });
+      if (!edit) latest.current.applyCollapsed(next.defaultCollapsed);
+    } catch (reason) {
+      if (request !== token.current) return;
+      setLoadFailed(true);
+      setError(reason instanceof Error ? reason.message : "\u8BFB\u53D6\u67E5\u8BE2\u8BBE\u7F6E\u5931\u8D25");
+      current.config.onError?.(reason, "load");
+    } finally {
+      if (request === token.current) setLoading(false);
+    }
+  }
+  (0, import_react95.useEffect)(() => {
+    setSnapshot(void 0);
+    setOpen(false);
+    setError("");
+    setLoadFailed(false);
+    setLoading(false);
+    setSaving(false);
+    saveLock.current = false;
+    latest.current.applyCollapsed(latest.current.defaultCollapsed);
+    if (adapter) void load(false);
+    return () => {
+      token.current++;
+    };
+  }, [adapter, moduleName, businessKey]);
+  async function save() {
+    const current = latest.current;
+    if (!current.config || loading || loadFailed || disabled || saveLock.current) return false;
+    saveLock.current = true;
+    setSaving(true);
+    setError("");
+    const request = token.current;
+    const active = reconcileQueryFields(current.fields.map((field) => field.key), draft.fields);
+    const next = { ...draft, fields: mergeQueryFields(snapshot?.fields ?? [], active) };
+    try {
+      await saveSettingsPatch(current.config.adapter, current.config.scope, { queryForm: next });
+      if (request !== token.current) return false;
+      setSnapshot(next);
+      current.applyCollapsed(next.defaultCollapsed);
+      setOpen(false);
+      return true;
+    } catch (reason) {
+      if (request !== token.current) return false;
+      setError(reason instanceof Error ? reason.message : "\u4FDD\u5B58\u67E5\u8BE2\u8BBE\u7F6E\u5931\u8D25");
+      current.config.onError?.(reason, "save");
+      return false;
+    } finally {
+      if (request === token.current) {
+        saveLock.current = false;
+        setSaving(false);
+      }
+    }
+  }
+  const visibleDraft = reconcileQueryFields(fields.map((field) => field.key), draft.fields);
+  const labels = new Map(fields.map((field) => [field.key, field.label]));
+  const locked = loading || saving || loadFailed || disabled;
+  const move = (from, to) => {
+    if (locked || from === to || to < 0 || to >= visibleDraft.length) return;
+    const next = [...visibleDraft];
+    next.splice(to, 0, next.splice(from, 1)[0]);
+    setDraft((current) => ({ ...current, fields: next.map((item, order) => ({ ...item, order })) }));
+  };
+  const sort = useQueryFieldSort(visibleDraft.map((item) => item.key), open && !locked, (keys) => {
+    const items = new Map(visibleDraft.map((item) => [item.key, item]));
+    setDraft((current) => ({ ...current, fields: keys.map((key, order) => ({ ...items.get(key), order })) }));
+  });
+  const control = config ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+    Button,
+    {
+      type: "button",
+      className: "sia-query-settings__trigger",
+      title: "\u67E5\u8BE2\u8BBE\u7F6E",
+      "aria-label": "\u67E5\u8BE2\u8BBE\u7F6E",
+      disabled: disabled || saving,
+      loading: loading && !open,
+      icon: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { name: "more-vertical" }),
+      onClick: () => {
+        setOpen(true);
+        void load(true);
+      }
+    }
+  ) : null;
+  const panel = config ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(import_jsx_runtime91.Fragment, { children: [
+    !open && error ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "sia-query-form__error", role: "alert", children: "\u67E5\u8BE2\u8BBE\u7F6E\u8BFB\u53D6\u5931\u8D25\uFF0C\u8BF7\u6253\u5F00\u8BBE\u7F6E\u91CD\u8BD5" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+      Modal2,
+      {
+        title: "\u67E5\u8BE2\u8BBE\u7F6E",
+        open,
+        width: 520,
+        okText: "\u4FDD\u5B58",
+        confirmLoading: saving,
+        okButtonProps: { disabled: locked },
+        onOk: save,
+        onOpenChange: (next) => {
+          if (!saveLock.current) setOpen(next);
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "sia-query-settings", children: [
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { role: "status", children: "\u6B63\u5728\u8BFB\u53D6\u67E5\u8BE2\u8BBE\u7F6E\u2026" }) : null,
+          error ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { role: "alert", className: "sia-query-form__error", children: [
+            error,
+            loadFailed ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Button, { type: "button", variant: "link", onClick: () => void load(true), children: "\u91CD\u8BD5" }) : null
+          ] }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Checkbox2, { checked: draft.defaultCollapsed, disabled: locked, onChange: (checked) => setDraft((current) => ({ ...current, defaultCollapsed: checked })), children: "\u9ED8\u8BA4\u6536\u8D77\u67E5\u8BE2\u6761\u4EF6" }),
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { className: "sia-query-settings__hint", children: "\u52FE\u9009\u9700\u8981\u663E\u793A\u7684\u6761\u4EF6\uFF0C\u62D6\u52A8\u6216\u4F7F\u7528\u4E0A\u4E0B\u6309\u94AE\u8C03\u6574\u987A\u5E8F\u3002" }),
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("div", { ref: sort.listRef, className: `sia-query-settings__list${sort.preview ? " is-sorting" : ""}`, children: visibleDraft.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+            "div",
+            {
+              "data-query-field-key": item.key,
+              className: `sia-query-settings__item${sort.preview?.key === item.key ? " is-dragging" : ""}${locked ? " is-disabled" : ""}`,
+              style: sort.preview ? { transform: `translateY(${sort.preview.offsets[item.key] ?? 0}px)` } : void 0,
+              onPointerDown: (event) => sort.start(event, item.key),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { name: "menu", size: 15 }),
+                /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Checkbox2, { "aria-label": `\u663E\u793A ${item.key}`, checked: item.visible, disabled: locked, onChange: (checked) => setDraft((current) => ({ ...current, fields: visibleDraft.map((field) => field.key === item.key ? { ...field, visible: checked } : field) })) }),
+                /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { className: "sia-query-settings__name", children: labels.get(item.key) ?? item.key }),
+                /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "sia-query-settings__order", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Button, { type: "button", size: "small", variant: "text", "aria-label": `\u4E0A\u79FB ${item.key}`, disabled: locked || index === 0, icon: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { name: "chevron-up" }), onClick: () => move(index, index - 1) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Button, { type: "button", size: "small", variant: "text", "aria-label": `\u4E0B\u79FB ${item.key}`, disabled: locked || index === visibleDraft.length - 1, icon: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { name: "chevron-down" }), onClick: () => move(index, index + 1) })
+                ] })
+              ]
+            },
+            item.key
+          )) }),
+          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Button, { type: "button", disabled: locked, onClick: () => setDraft({ fields: reconcileQueryFields(fields.map((field) => field.key)), defaultCollapsed }), children: "\u6062\u590D\u9ED8\u8BA4" })
+        ] })
+      }
+    )
+  ] }) : null;
+  return { snapshot, control, panel };
+}
+
+// src/components/QueryForm.tsx
+var import_jsx_runtime92 = require("react/jsx-runtime");
 function QueryForm({
   fields,
+  settings,
   children,
   form: providedForm,
   onSearch,
@@ -23838,39 +24169,51 @@ function QueryForm({
   ...formProps
 }) {
   const [form] = useForm(providedForm);
-  const [internalCollapsed, setInternalCollapsed] = (0, import_react94.useState)(defaultCollapsed);
-  const [needsCollapse, setNeedsCollapse] = (0, import_react94.useState)(false);
+  const [internalCollapsed, setInternalCollapsed] = (0, import_react96.useState)(defaultCollapsed);
+  const [needsCollapse, setNeedsCollapse] = (0, import_react96.useState)(false);
   const collapsed = collapsible && needsCollapse && (controlledCollapsed ?? internalCollapsed);
-  const [searching, setSearching] = (0, import_react94.useState)(false);
-  const [saving, setSaving] = (0, import_react94.useState)(false);
-  const [removing, setRemoving] = (0, import_react94.useState)(false);
-  const [saveOpen, setSaveOpen] = (0, import_react94.useState)(false);
-  const [saveName, setSaveName] = (0, import_react94.useState)("");
-  const [saveError, setSaveError] = (0, import_react94.useState)("");
-  const [error, setError] = (0, import_react94.useState)("");
-  const [activeShortcut, setActiveShortcut] = (0, import_react94.useState)("");
-  const source = (0, import_react94.useRef)({ source: "submit" });
-  const searchLock = (0, import_react94.useRef)(false);
-  const saveLock = (0, import_react94.useRef)(false);
-  const removeLock = (0, import_react94.useRef)(false);
-  const snapshot = (0, import_react94.useRef)();
+  const [searching, setSearching] = (0, import_react96.useState)(false);
+  const [saving, setSaving] = (0, import_react96.useState)(false);
+  const [removing, setRemoving] = (0, import_react96.useState)(false);
+  const [saveOpen, setSaveOpen] = (0, import_react96.useState)(false);
+  const [saveName, setSaveName] = (0, import_react96.useState)("");
+  const [saveError, setSaveError] = (0, import_react96.useState)("");
+  const [error, setError] = (0, import_react96.useState)("");
+  const [activeShortcut, setActiveShortcut] = (0, import_react96.useState)("");
+  const source = (0, import_react96.useRef)({ source: "submit" });
+  const searchLock = (0, import_react96.useRef)(false);
+  const saveLock = (0, import_react96.useRef)(false);
+  const removeLock = (0, import_react96.useRef)(false);
+  const snapshot = (0, import_react96.useRef)();
   const busy = disabled || loading || searching;
   const shortcutBusy = busy || shortcutsLoading || saving || removing;
-  const entries = fields ? fields.map(({ key, width, ...item }) => ({
+  const fieldLabel = (content) => {
+    if (!(0, import_react96.isValidElement)(content)) return void 0;
+    return content.props.label ?? content.props.placeholder ?? fieldLabel(content.props.children);
+  };
+  const sourceEntries = fields ? fields.map(({ key, width, settingsLabel, ...item }) => ({
     key,
     width,
-    content: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Form.Item, { noStyle: true, ...item })
-  })) : import_react94.Children.toArray(children).map((content, index) => ({
-    key: String(index),
+    label: settingsLabel ?? item.label ?? (typeof item.children === "function" ? void 0 : fieldLabel(item.children)) ?? key,
+    content: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Form.Item, { noStyle: true, ...item })
+  })) : import_react96.Children.toArray(children).map((content, index) => ({
+    key: (0, import_react96.isValidElement)(content) && content.key != null ? String(content.key) : String(index),
     width: void 0,
+    label: fieldLabel(content) ?? `\u6761\u4EF6 ${index + 1}`,
     content
   }));
+  const cloudSettings = useQueryFormSettings(settings, sourceEntries, defaultCollapsed, setInternalCollapsed, disabled);
+  const configured = reconcileQueryFields(sourceEntries.map((entry) => entry.key), cloudSettings.snapshot?.fields);
+  const entriesByKey = new Map(sourceEntries.map((entry) => [entry.key, entry]));
+  let visibleIndex = 0;
+  const entries = configured.map((item) => ({ ...entriesByKey.get(item.key), visible: item.visible, visibleIndex: item.visible ? visibleIndex++ : -1 }));
+  const layoutKey = JSON.stringify(configured);
   const limit = Math.max(1, Math.floor(collapsedCount));
-  const rowRef = (0, import_react94.useRef)(null);
-  const actionsRef = (0, import_react94.useRef)(null);
-  const toggleRef = (0, import_react94.useRef)(null);
-  const [fittingCount, setFittingCount] = (0, import_react94.useState)(limit);
-  (0, import_react94.useLayoutEffect)(() => {
+  const rowRef = (0, import_react96.useRef)(null);
+  const actionsRef = (0, import_react96.useRef)(null);
+  const toggleRef = (0, import_react96.useRef)(null);
+  const [fittingCount, setFittingCount] = (0, import_react96.useState)(limit);
+  (0, import_react96.useLayoutEffect)(() => {
     const row = rowRef.current;
     const actions = actionsRef.current;
     if (!row || !actions) return;
@@ -23878,7 +24221,7 @@ function QueryForm({
       if (!row || !actions) return;
       const gap = parseFloat(getComputedStyle(row).columnGap) || 0;
       const allFields = Array.from(
-        row.querySelectorAll(":scope > .sia-query-form__field")
+        row.querySelectorAll(":scope > .sia-query-form__field:not([data-settings-hidden])")
       );
       const hiddenFields = allFields.filter((field) => field.hidden);
       const wasCollapsed = row.classList.contains("is-collapsed");
@@ -23920,6 +24263,7 @@ function QueryForm({
     return () => observer.disconnect();
   }, [
     collapsed,
+    layoutKey,
     needsCollapse,
     collapsible,
     limit,
@@ -24008,8 +24352,8 @@ function QueryForm({
       setRemoving(false);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: `sia-query-form ${className}`.trim(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: `sia-query-form ${className}`.trim(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
       Form,
       {
         ...formProps,
@@ -24028,8 +24372,8 @@ function QueryForm({
           onValuesChange?.(changed, values);
         },
         children: [
-          quickQueries.length ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "sia-query-form__quick", "aria-label": "\u9884\u8BBE\u5FEB\u6377\u67E5\u8BE2", children: [
-            quickQueries.map((query) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+          quickQueries.length ? /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "sia-query-form__quick", "aria-label": "\u9884\u8BBE\u5FEB\u6377\u67E5\u8BE2", children: [
+            quickQueries.map((query) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
               Badge,
               {
                 className: "sia-query-form__quick-badge",
@@ -24038,7 +24382,7 @@ function QueryForm({
                 title: query.count === void 0 ? void 0 : `\u5171 ${query.count} \u6761`,
                 ...query.badgeProps,
                 count: query.count,
-                children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                   Button,
                   {
                     size: query.size ?? quickQuerySize,
@@ -24054,7 +24398,7 @@ function QueryForm({
             )),
             " "
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
             "div",
             {
               ref: rowRef,
@@ -24063,11 +24407,12 @@ function QueryForm({
                 "--sia-query-field-width": typeof fieldWidth === "number" ? `${fieldWidth}px` : fieldWidth
               },
               children: [
-                entries.map((entry, index) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                entries.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                   "div",
                   {
                     className: "sia-query-form__field",
-                    hidden: collapsed && index >= Math.min(limit, fittingCount),
+                    "data-settings-hidden": !entry.visible || void 0,
+                    hidden: !entry.visible || collapsed && entry.visibleIndex >= Math.min(limit, fittingCount),
                     style: entry.width !== void 0 ? {
                       "--sia-query-item-width": typeof entry.width === "number" ? `${entry.width}px` : entry.width
                     } : void 0,
@@ -24075,9 +24420,9 @@ function QueryForm({
                   },
                   entry.key
                 )),
-                /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { ref: actionsRef, className: "sia-query-form__actions", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(Space.Compact, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { ref: actionsRef, className: "sia-query-form__actions", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(Space.Compact, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                       Button,
                       {
                         type: "submit",
@@ -24087,8 +24432,8 @@ function QueryForm({
                         children: searchText
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Button, { disabled: busy, onClick: reset, children: resetText }),
-                    onSaveQuery ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Button, { disabled: busy, onClick: reset, children: resetText }),
+                    onSaveQuery ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                       Button,
                       {
                         disabled: shortcutBusy,
@@ -24100,14 +24445,15 @@ function QueryForm({
                         },
                         children: saveText
                       }
-                    ) : null
+                    ) : null,
+                    cloudSettings.control
                   ] }),
-                  collapsible && entries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("span", { ref: toggleRef, hidden: !needsCollapse, children: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+                  collapsible && entries.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { ref: toggleRef, hidden: !needsCollapse, children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
                     Button,
                     {
                       variant: "link",
                       "aria-expanded": !collapsed,
-                      icon: /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(Icon, { name: collapsed ? "chevron-down" : "chevron-up" }),
+                      icon: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Icon, { name: collapsed ? "chevron-down" : "chevron-up" }),
                       iconPosition: "end",
                       onClick: () => {
                         setInternalCollapsed(!collapsed);
@@ -24116,13 +24462,14 @@ function QueryForm({
                       children: collapsed ? "\u5C55\u5F00" : "\u6536\u8D77"
                     }
                   ) }) : null,
-                  actionsExtra
+                  actionsExtra,
+                  cloudSettings.panel
                 ] })
               ]
             }
           ),
-          savedQueries.length ? /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)("div", { className: "sia-query-form__saved", "aria-label": "\u5DF2\u4FDD\u5B58\u5FEB\u6377\u67E5\u8BE2", children: [
-            savedQueries.map((query, index) => /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+          savedQueries.length ? /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)("div", { className: "sia-query-form__saved", "aria-label": "\u5DF2\u4FDD\u5B58\u5FEB\u6377\u67E5\u8BE2", children: [
+            savedQueries.map((query, index) => /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
               Tag,
               {
                 status: query.status ?? ["processing", "success", "warning", "error"][index % 4],
@@ -24148,11 +24495,11 @@ function QueryForm({
             )),
             " "
           ] }) : null,
-          error ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { className: "sia-query-form__error", role: "alert", children: error }) : null
+          error ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { className: "sia-query-form__error", role: "alert", children: error }) : null
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime91.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
       Modal2,
       {
         open: saveOpen,
@@ -24164,7 +24511,7 @@ function QueryForm({
           if (!saveLock.current) setSaveOpen(next);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
             Input,
             {
               autoFocus: true,
@@ -24183,7 +24530,7 @@ function QueryForm({
               }
             }
           ),
-          saveError ? /* @__PURE__ */ (0, import_jsx_runtime91.jsx)("p", { className: "sia-query-form__error", role: "alert", children: saveError }) : null
+          saveError ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("p", { className: "sia-query-form__error", role: "alert", children: saveError }) : null
         ]
       }
     )
@@ -24191,9 +24538,9 @@ function QueryForm({
 }
 
 // src/components/NumberRange.tsx
-var import_react95 = require("react");
-var import_jsx_runtime92 = require("react/jsx-runtime");
-var NumberRange = (0, import_react95.forwardRef)(function NumberRange2({
+var import_react97 = require("react");
+var import_jsx_runtime93 = require("react/jsx-runtime");
+var NumberRange = (0, import_react97.forwardRef)(function NumberRange2({
   value,
   defaultValue = [null, null],
   onChange,
@@ -24221,7 +24568,7 @@ var NumberRange = (0, import_react95.forwardRef)(function NumberRange2({
     setValue2(index === 0 ? [next, range[1]] : [range[0], next]);
   }
   const inputProps = { min, max, step, precision, size, status, disabled, readOnly, placeholderMode, controls: false };
-  return /* @__PURE__ */ (0, import_jsx_runtime92.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
     "span",
     {
       ...props,
@@ -24230,7 +24577,7 @@ var NumberRange = (0, import_react95.forwardRef)(function NumberRange2({
       "aria-disabled": disabled || void 0,
       className: `sia-number-range sia-number-range--${size} sia-number-range--${status}${disabled ? " is-disabled" : ""} ${className}`.trim(),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           InputNumber,
           {
             ...inputProps,
@@ -24242,8 +24589,8 @@ var NumberRange = (0, import_react95.forwardRef)(function NumberRange2({
             onChange: (next) => change(0, next)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Icon, { className: "sia-number-range__separator", name: "tilde", size: 12, strokeWidth: 1.5, "aria-hidden": "true" }),
-        /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Icon, { className: "sia-number-range__separator", name: "tilde", size: 12, strokeWidth: 1.5, "aria-hidden": "true" }),
+        /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
           InputNumber,
           {
             ...inputProps,
@@ -24255,7 +24602,7 @@ var NumberRange = (0, import_react95.forwardRef)(function NumberRange2({
             onChange: (next) => change(1, next)
           }
         ),
-        allowClear && !disabled && !readOnly && range.some((item) => item !== null) ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("button", { type: "button", className: "sia-number-range__clear", "aria-label": "\u6E05\u9664\u6570\u5B57\u533A\u95F4", onClick: () => setValue2([null, null]), children: /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null
+        allowClear && !disabled && !readOnly && range.some((item) => item !== null) ? /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("button", { type: "button", className: "sia-number-range__clear", "aria-label": "\u6E05\u9664\u6570\u5B57\u533A\u95F4", onClick: () => setValue2([null, null]), children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null
       ]
     }
   );