@shwfed/config 1.1.4 → 2.0.0

package/dist/runtime/components/table/config.vue

@@ -1,1581 +0,0 @@
-<script setup>
-import { computed, defineComponent, inject, onBeforeUnmount, provide, ref, watch } from "vue";
-import { provideCELContext } from "../../plugins/cel/context";
-import { BREADCRUMB_EXTENSION_KEY } from "../config/breadcrumb-extension";
-import { TABLE_COLUMN_LAYOUT_KEY } from "./column-layout";
-import { Icon } from "@iconify/vue";
-import { ParseResult, Schema } from "effect";
-import { TableConfig, Pagination, ColumnGroup, DataSource } from "./schema";
-import { COLUMNS, findColumn as findColumnEntry } from "./utils/resolve";
-import {
-  useTreeDnd
-} from "../../composables/useTreeDnd";
-import { getStructFieldDescription, getStructFieldTitle } from "./utils/schema-meta";
-import { Markdown } from "../ui/markdown";
-import { Badge } from "../ui/badge";
-import { ScrollArea } from "../ui/scroll-area";
-import { Input } from "../ui/input";
-import { Textarea } from "../ui/textarea";
-import { Separator } from "../ui/separator";
-import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
-import { ExpressionEditor } from "../ui/expression-editor";
-import { Field, FieldLabel } from "../ui/field";
-import { Locale } from "../ui/locale";
-import { CommandItem, CommandGroup } from "../ui/command";
-import {
-  InputGroup,
-  InputGroupAddon,
-  InputGroupCombobox,
-  InputGroupNumberField
-} from "../ui/input-group";
-import ActionsConfigEditor from "../actions/config.vue";
-import ShwfedFormConfig from "../form/config.vue";
-import { defaultFormConfig } from "../form/schema";
-import TableAiColumnsButton from "./ai/columns-button.vue";
-import TableAiDataSourceButton from "./ai/data-source-button.vue";
-import { Environment } from "../../vendor/cel-js/lib/index";
-defineOptions({ name: "ShwfedTableConfig" });
-const CellStyleCELContext = defineComponent({
-  name: "CellStyleCELContext",
-  setup(_, { slots }) {
-    provideCELContext({
-      row: {
-        type: "dyn",
-        label: "\u5F53\u524D\u884C",
-        description: "\u5F53\u524D\u6E32\u67D3\u7684\u6574\u884C\u6570\u636E\uFF0C\u7C7B\u578B\u5728\u914D\u7F6E\u65F6\u672A\u77E5\uFF08`dyn`\uFF09\uFF0C\u5177\u4F53\u5B57\u6BB5\u53D6\u51B3\u4E8E\u63A5\u5165\u6570\u636E\u6E90\u3002",
-        value: void 0
-      },
-      index: {
-        type: "number",
-        label: "\u884C\u5E8F\u53F7",
-        description: "\u5F53\u524D\u884C\u5728\u6240\u6709\u6570\u636E\u4E2D\u7684\u5E8F\u53F7\uFF0C\u4ECE `0` \u5F00\u59CB\u3002",
-        value: 0
-      },
-      id: {
-        type: "string",
-        label: "\u5217 ID",
-        description: "\u5F53\u524D\u5355\u5143\u683C\u6240\u5728\u5217\u7684 `id`\u3002",
-        value: ""
-      },
-      selected: {
-        type: "bool",
-        label: "\u662F\u5426\u9009\u4E2D",
-        description: "\u5F53\u524D\u884C\u662F\u5426\u88AB\u52FE\u9009\u3002",
-        value: false
-      },
-      pinned: {
-        type: "string",
-        label: "\u5217\u56FA\u5B9A\u65B9\u5411",
-        description: "\u5217\u7684\u56FA\u5B9A\u65B9\u5411\uFF1A`left`\u3001`right`\uFF0C\u672A\u56FA\u5B9A\u65F6\u4E3A `false`\u3002",
-        value: false
-      }
-    });
-    return () => slots.default?.();
-  }
-});
-const RequestCELContext = defineComponent({
-  name: "RequestCELContext",
-  setup(_, { slots }) {
-    provideCELContext({
-      pageIndex: {
-        type: "number",
-        label: "\u5F53\u524D\u9875\u7801",
-        description: "\u4ECE `0` \u5F00\u59CB\uFF1B\u672A\u542F\u7528\u5206\u9875\u65F6\u4E3A `0`\u3002",
-        value: 0
-      },
-      pageSize: {
-        type: "number",
-        label: "\u6BCF\u9875\u884C\u6570",
-        description: "\u5F53\u524D\u6BCF\u9875\u884C\u6570\uFF1B\u672A\u542F\u7528\u5206\u9875\u65F6\u4E3A `0`\u3002",
-        value: 0
-      },
-      query: {
-        type: "dyn",
-        label: "\u641C\u7D22\u6761\u4EF6",
-        description: "\u641C\u7D22\u6761\u4EF6\u5F53\u524D\u72B6\u6001\uFF1B\u672A\u914D\u7F6E\u65F6\u4E3A\u7A7A\u5BF9\u8C61\u3002",
-        value: {}
-      }
-    });
-    return () => slots.default?.();
-  }
-});
-const JsonCELContext = defineComponent({
-  name: "JsonCELContext",
-  setup(_, { slots }) {
-    provideCELContext({
-      json: {
-        type: "optional<dyn>",
-        label: "HTTP \u54CD\u5E94\u4F53",
-        description: "\u5DF2\u89E3\u6790\u7684 JSON \u54CD\u5E94\uFF1B\u672A\u914D\u7F6E `request` \u65F6\u4E3A `none`\u3002",
-        value: void 0
-      }
-    });
-    return () => slots.default?.();
-  }
-});
-const TableActionsCELContext = defineComponent({
-  name: "TableActionsCELContext",
-  setup(_, { slots }) {
-    provideCELContext({
-      selected: {
-        type: "list<dyn>",
-        label: "\u5DF2\u9009\u884C",
-        description: "\u5F53\u524D\u5DF2\u52FE\u9009\u7684\u6240\u6709\u884C\uFF08`row` \u7684\u6570\u7EC4\uFF09\u3002",
-        value: []
-      }
-    });
-    return () => slots.default?.();
-  }
-});
-const config = defineModel({ type: Object, ...{ required: true } });
-const props = defineProps({
-  configure: { type: Function, required: false }
-});
-const configure = props.configure ?? (() => {
-});
-function configureTableActions(env) {
-  configure(env);
-  env.registerVariable("selected", "list<dyn>", {
-    description: "\u5F53\u524D\u5DF2\u52FE\u9009\u7684\u6240\u6709\u884C\uFF08`row` \u7684\u6570\u7EC4\uFF09"
-  });
-}
-function configureTableQuery(env) {
-  configure(env);
-}
-const tableConfigSchema = TableConfig(configure);
-const dataSourceSchema = DataSource(configure);
-const advertisedHostContext = (() => {
-  const probe = new Environment({ unlistedVariablesAreDyn: false });
-  const baseline = new Set(probe.getDefinitions().variables.map((v) => v.name));
-  configure(probe);
-  const out = {};
-  for (const v of probe.getDefinitions().variables) {
-    if (baseline.has(v.name)) continue;
-    out[v.name] = {
-      type: v.type,
-      label: v.name,
-      description: v.description ?? void 0,
-      value: void 0
-    };
-  }
-  return out;
-})();
-provideCELContext(advertisedHostContext);
-const generalFieldTitle = (f) => getStructFieldTitle(tableConfigSchema, f) ?? f;
-const generalFieldDescription = (f) => getStructFieldDescription(tableConfigSchema, f);
-const paginationFieldTitle = (f) => getStructFieldTitle(Pagination, f) ?? f;
-const paginationFieldDescription = (f) => getStructFieldDescription(Pagination, f);
-const groupFieldTitle = (f) => getStructFieldTitle(ColumnGroup, f) ?? f;
-const groupFieldDescription = (f) => getStructFieldDescription(ColumnGroup, f);
-const dataSourceFieldTitle = (f) => getStructFieldTitle(dataSourceSchema, f) ?? f;
-const dataSourceFieldDescription = (f) => getStructFieldDescription(dataSourceSchema, f);
-const GROUP_DRAG_KIND = "group";
-const COLUMN_DRAG_KIND = "column";
-const editingColumns = computed({
-  get: () => config.value.columns ?? [],
-  set: (next) => {
-    config.value = { ...config.value, columns: next };
-  }
-});
-const editingGroups = computed({
-  get: () => config.value.groups ?? [],
-  set: (next) => {
-    config.value = { ...config.value, groups: next };
-  }
-});
-function snapshot() {
-  return {
-    columns: [...config.value.columns ?? []],
-    groups: [...config.value.groups ?? []],
-    initialState: config.value.initialState ? { ...config.value.initialState } : void 0
-  };
-}
-function commit(w) {
-  const next = {
-    ...config.value,
-    columns: w.columns,
-    groups: w.groups
-  };
-  if (w.initialState && Object.keys(w.initialState).length > 0) {
-    next.initialState = w.initialState;
-  } else {
-    delete next.initialState;
-  }
-  config.value = next;
-}
-function normalizeForEmit(general) {
-  const out = { ...general };
-  const ds = out.dataSource;
-  const nextDs = { ...ds ?? {} };
-  if (typeof nextDs.request === "string" && nextDs.request.trim() === "") delete nextDs.request;
-  if (typeof nextDs.total === "string" && nextDs.total.trim() === "") delete nextDs.total;
-  out.dataSource = nextDs;
-  const pagination = out.pagination;
-  const p = { ...pagination ?? {} };
-  const hasPageSize = typeof p.pageSize === "number" && Number.isFinite(p.pageSize) && p.pageSize > 0;
-  const hasPageSizes = Array.isArray(p.pageSizes) && p.pageSizes.length > 0;
-  const hasTotal = nextDs.total !== void 0;
-  if (!hasPageSize && !hasPageSizes && !hasTotal) {
-    delete out.pagination;
-  } else {
-    out.pagination = p;
-  }
-  const query = out.query;
-  if (query && (!Array.isArray(query.fields) || query.fields.length === 0)) {
-    delete out.query;
-  }
-  return out;
-}
-function readGeneral() {
-  const { columns: _c, groups: _g, kind: _k, ...general } = config.value ?? {};
-  const cloned = JSON.parse(JSON.stringify(general));
-  if (!cloned.pagination) cloned.pagination = {};
-  if (!cloned.dataSource) cloned.dataSource = { data: "" };
-  return cloned;
-}
-function writeGeneralPatch(patch) {
-  const next = normalizeForEmit({ ...readGeneral(), ...patch });
-  config.value = {
-    ...config.value,
-    ...next
-  };
-}
-const editingGeneralConfig = computed(() => readGeneral());
-const selected = ref({ kind: "general" });
-const fieldErrors = ref({});
-watch(
-  config,
-  (value) => {
-    fieldErrors.value = {};
-    const result = Schema.decodeUnknownEither(tableConfigSchema)(value);
-    if (result._tag === "Left") {
-      const issues = ParseResult.ArrayFormatter.formatErrorSync(result.left);
-      for (const issue of issues) {
-        const pathKey = issue.path.map(String).join(".");
-        if (!fieldErrors.value[pathKey]) {
-          fieldErrors.value[pathKey] = issue.message;
-        }
-      }
-    }
-  },
-  { immediate: true, deep: true }
-);
-const selectedGeneral = computed(() => selected.value.kind === "general");
-const selectedActions = computed(() => selected.value.kind === "actions");
-const selectedQuery = computed(() => selected.value.kind === "query");
-const columnFullPane = ref(false);
-provide(TABLE_COLUMN_LAYOUT_KEY, { fullPane: columnFullPane });
-const isDrilled = computed(
-  () => selectedActions.value || selectedQuery.value || columnFullPane.value
-);
-function findGroup(id) {
-  return editingGroups.value.find((g) => g.id === id) ?? null;
-}
-function findColumn(id) {
-  return editingColumns.value.find((c) => c.id === id) ?? null;
-}
-const selectedGroupRef = computed(() => {
-  if (selected.value.kind !== "group") return null;
-  return findGroup(selected.value.id);
-});
-const selectedColumnRef = computed(() => {
-  if (selected.value.kind !== "column") return null;
-  return findColumn(selected.value.id);
-});
-const selectedColumnEntry = computed(() => {
-  const c = selectedColumnRef.value;
-  if (!c) return void 0;
-  return findColumnEntry(c.type, c.compatibilityDate);
-});
-const pinnedLeftIds = computed(() => {
-  const ids = editingGeneralConfig.value.initialState?.columnPinning?.left;
-  return new Set(Array.isArray(ids) ? ids : []);
-});
-const pinnedRightIds = computed(() => {
-  const ids = editingGeneralConfig.value.initialState?.columnPinning?.right;
-  return new Set(Array.isArray(ids) ? ids : []);
-});
-function columnBand(id) {
-  if (pinnedLeftIds.value.has(id)) return "left";
-  if (pinnedRightIds.value.has(id)) return "right";
-  return "main";
-}
-function groupBand(groupId) {
-  const members = editingColumns.value.filter((c) => c.groupId === groupId);
-  if (members.length === 0) return "main";
-  const first = columnBand(members[0].id);
-  return members.every((m) => columnBand(m.id) === first) ? first : "main";
-}
-function sameArray(a, b) {
-  if (!b) return a.length === 0;
-  if (a.length !== b.length) return false;
-  for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
-  return true;
-}
-function pinnedLeftSetOf(w) {
-  const arr = w.initialState?.columnPinning?.left;
-  return new Set(Array.isArray(arr) ? arr : []);
-}
-function pinnedRightSetOf(w) {
-  const arr = w.initialState?.columnPinning?.right;
-  return new Set(Array.isArray(arr) ? arr : []);
-}
-function writePinArraysW(w, nextLeft, nextRight) {
-  const prevLeft = w.initialState?.columnPinning?.left;
-  const prevRight = w.initialState?.columnPinning?.right;
-  if (sameArray(nextLeft, prevLeft) && sameArray(nextRight, prevRight)) return;
-  const initialState = { ...w.initialState ?? {} };
-  const pinning = { ...initialState.columnPinning ?? {} };
-  if (nextLeft.length > 0) pinning.left = nextLeft;
-  else delete pinning.left;
-  if (nextRight.length > 0) pinning.right = nextRight;
-  else delete pinning.right;
-  if (Object.keys(pinning).length > 0) initialState.columnPinning = pinning;
-  else delete initialState.columnPinning;
-  w.initialState = Object.keys(initialState).length > 0 ? initialState : void 0;
-}
-function reconcilePinningW(w) {
-  const cols = w.columns;
-  const leftSet = pinnedLeftSetOf(w);
-  const rightSet = pinnedRightSetOf(w);
-  const nextLeft = [];
-  let i = 0;
-  while (i < cols.length && leftSet.has(cols[i].id)) {
-    nextLeft.push(cols[i].id);
-    i++;
-  }
-  const tail = [];
-  let j = cols.length - 1;
-  while (j >= i && rightSet.has(cols[j].id)) {
-    tail.push(cols[j].id);
-    j--;
-  }
-  writePinArraysW(w, nextLeft, tail.reverse());
-}
-function setColumnPinW(w, id, side) {
-  const left = [...pinnedLeftSetOf(w)].filter((x) => x !== id);
-  const right = [...pinnedRightSetOf(w)].filter((x) => x !== id);
-  if (side === "left") left.push(id);
-  if (side === "right") right.push(id);
-  writePinArraysW(w, left, right);
-}
-function setGroupPinW(w, groupId, side) {
-  const members = w.columns.filter((c) => c.groupId === groupId);
-  const memberIds = new Set(members.map((m) => m.id));
-  const left = [...pinnedLeftSetOf(w)].filter((x) => !memberIds.has(x));
-  const right = [...pinnedRightSetOf(w)].filter((x) => !memberIds.has(x));
-  if (side === "left") for (const m of members) left.push(m.id);
-  if (side === "right") for (const m of members) right.push(m.id);
-  writePinArraysW(w, left, right);
-}
-const treeEntries = computed(() => {
-  const out = [];
-  let lastGid;
-  let lastBand;
-  for (const col of editingColumns.value) {
-    const gid = col.groupId && findGroup(col.groupId) ? col.groupId : void 0;
-    const band = pinnedLeftIds.value.has(col.id) ? "left" : pinnedRightIds.value.has(col.id) ? "right" : "main";
-    if (gid && (gid !== lastGid || band !== lastBand)) {
-      out.push({ kind: "group-header", groupId: gid, band });
-    }
-    out.push({ kind: "column", columnId: col.id, groupId: gid, band });
-    lastGid = gid;
-    lastBand = band;
-  }
-  return out;
-});
-const renderEntries = computed(() => {
-  const left = treeEntries.value.filter((e) => e.band === "left");
-  const main = treeEntries.value.filter((e) => e.band === "main");
-  const right = treeEntries.value.filter((e) => e.band === "right");
-  const out = [];
-  if (left.length > 0) {
-    out.push({ kind: "band-caption", band: "left", text: "\u56FA\u5B9A\u5728\u5DE6\u4FA7" });
-    out.push(...left);
-  }
-  if (left.length > 0 && (main.length > 0 || right.length > 0)) {
-    out.push({ kind: "band-separator", id: "sep-left" });
-  }
-  out.push(...main);
-  if (right.length > 0) {
-    if (main.length > 0 || left.length > 0) {
-      out.push({ kind: "band-separator", id: "sep-right" });
-    }
-    out.push({ kind: "band-caption", band: "right", text: "\u56FA\u5B9A\u5728\u53F3\u4FA7" });
-    out.push(...right);
-  }
-  return out;
-});
-function entryKey(entry) {
-  switch (entry.kind) {
-    case "group-header":
-      return `g-${entry.band}-${entry.groupId}`;
-    case "column":
-      return `c-${entry.columnId}`;
-    case "band-caption":
-      return `cap-${entry.band}`;
-    case "band-separator":
-      return entry.id;
-  }
-}
-function groupLabel(group) {
-  if (Array.isArray(group?.title)) {
-    const zh = group.title.find((t) => t.locale === "zh");
-    const msg = zh?.message || group.title[0]?.message;
-    if (msg) return msg;
-  }
-  return "\u672A\u547D\u540D\u5206\u7EC4";
-}
-function columnLabel(col) {
-  if (!col) return "(\u672A\u77E5)";
-  if (col.type === "com.shwfed.table.column.select") return "\u9009\u62E9\u5217";
-  if (!col.title) return "(\u65E0\u6807\u9898)";
-  if (Array.isArray(col.title)) {
-    const zh = col.title.find((t) => t.locale === "zh");
-    return zh?.message || col.title[0]?.message || "(\u65E0\u6807\u9898)";
-  }
-  return "(\u65E0\u6807\u9898)";
-}
-function getColumnTypeLabel(type, compatibilityDate) {
-  return findColumnEntry(type, compatibilityDate)?.metadata.name ?? type;
-}
-function getColumnDefaults(id, type, compatibilityDate) {
-  switch (type) {
-    case "com.shwfed.table.column.text":
-      return { id, type, compatibilityDate, title: [{ locale: "zh", message: "" }], accessor: "", size: 120 };
-    case "com.shwfed.table.column.date":
-      return { id, type, compatibilityDate, title: [{ locale: "zh", message: "" }], accessor: "", format: "yyyy-MM-dd", size: 120 };
-    case "com.shwfed.table.column.number":
-      return { id, type, compatibilityDate, title: [{ locale: "zh", message: "" }], accessor: "", size: 120, align: "right" };
-    case "com.shwfed.table.column.select":
-      return { id, type, compatibilityDate, mode: "checkbox" };
-    case "com.shwfed.table.column.markdown":
-      return { id, type, compatibilityDate, title: [{ locale: "zh", message: "" }], markdown: [{ locale: "zh", message: "" }], size: 120 };
-    case "com.shwfed.table.column.actions":
-      return { id, type, compatibilityDate, title: [{ locale: "zh", message: "" }], size: 200, groups: [], items: [] };
-    default:
-      return { id, type, compatibilityDate };
-  }
-}
-function addColumn(columnType, compatibilityDate) {
-  const col = getColumnDefaults(crypto.randomUUID(), columnType, compatibilityDate);
-  editingColumns.value = [...editingColumns.value, col];
-  selected.value = { kind: "column", id: col.id };
-}
-function pruneEmptyGroupW(w, groupId) {
-  const hasMembers = w.columns.some((c) => c.groupId === groupId);
-  if (hasMembers) return;
-  w.groups = w.groups.filter((g) => g.id !== groupId);
-}
-function deleteGroup(groupId) {
-  const w = snapshot();
-  w.columns = w.columns.map((c) => {
-    if (c.groupId !== groupId) return c;
-    const { groupId: _g, ...rest } = c;
-    return rest;
-  });
-  w.groups = w.groups.filter((g) => g.id !== groupId);
-  reconcilePinningW(w);
-  commit(w);
-  resolveSelection();
-}
-function deleteColumn(columnId) {
-  const w = snapshot();
-  const col = w.columns.find((c) => c.id === columnId);
-  w.columns = w.columns.filter((c) => c.id !== columnId);
-  if (col?.groupId) pruneEmptyGroupW(w, col.groupId);
-  reconcilePinningW(w);
-  commit(w);
-  resolveSelection();
-}
-function resolveSelection() {
-  const s = selected.value;
-  if (s.kind === "general") return;
-  if (s.kind === "actions") return;
-  if (s.kind === "query") return;
-  if (s.kind === "group" && findGroup(s.id)) return;
-  if (s.kind === "column" && findColumn(s.id)) return;
-  selected.value = { kind: "general" };
-}
-function selectGeneral() {
-  selected.value = { kind: "general" };
-}
-function selectActions() {
-  selected.value = { kind: "actions" };
-}
-function selectQuery() {
-  selected.value = { kind: "query" };
-}
-function selectGroup(id) {
-  selected.value = { kind: "group", id };
-}
-function selectColumn(id) {
-  selected.value = { kind: "column", id };
-}
-const breadcrumbExt = inject(BREADCRUMB_EXTENSION_KEY, null);
-if (breadcrumbExt) {
-  const crumb = breadcrumbExt.add();
-  watch(
-    [selected, columnFullPane],
-    ([s, full]) => {
-      if (s.kind === "actions") {
-        crumb.label.value = generalFieldTitle("actions");
-        crumb.back.value = selectGeneral;
-      } else if (s.kind === "query") {
-        crumb.label.value = generalFieldTitle("query");
-        crumb.back.value = selectGeneral;
-      } else if (s.kind === "column" && full) {
-        const col = findColumn(s.id);
-        crumb.label.value = col ? `\u7F16\u8F91${columnLabel(col)}` : "\u7F16\u8F91\u5217";
-        crumb.back.value = selectGeneral;
-      } else {
-        crumb.label.value = null;
-        crumb.back.value = null;
-      }
-    },
-    { immediate: true }
-  );
-  onBeforeUnmount(() => {
-    crumb.dispose();
-  });
-}
-function patchColumn(id, patch) {
-  editingColumns.value = editingColumns.value.map(
-    (c) => c.id === id ? { ...c, ...patch } : c
-  );
-}
-function patchSelectedColumn(next) {
-  if (selected.value.kind !== "column") return;
-  patchColumn(selected.value.id, next);
-}
-function patchSelectedGroup(next) {
-  if (selected.value.kind !== "group") return;
-  const id = selected.value.id;
-  editingGroups.value = editingGroups.value.map(
-    (g) => g.id === id ? { ...g, ...next } : g
-  );
-}
-const PIN_LEFT_ZONE = "pin-left-zone";
-const PIN_RIGHT_ZONE = "pin-right-zone";
-function reorderColumnNextW(w, sourceId, targetId, edge) {
-  if (sourceId === targetId) return;
-  const src = w.columns.find((c) => c.id === sourceId);
-  const tgt = w.columns.find((c) => c.id === targetId);
-  if (!src || !tgt) return;
-  const nextGroupId = tgt.groupId;
-  const next = { ...src };
-  if (nextGroupId) next.groupId = nextGroupId;
-  else delete next.groupId;
-  const formerGroupId = src.groupId && src.groupId !== nextGroupId ? src.groupId : void 0;
-  const without = w.columns.filter((c) => c.id !== sourceId);
-  const tgtIdx = without.findIndex((c) => c.id === targetId);
-  if (tgtIdx < 0) {
-    w.columns = [...without, next];
-  } else {
-    const insertAt = edge === "reorder-above" ? tgtIdx : tgtIdx + 1;
-    const arr = [...without];
-    arr.splice(insertAt, 0, next);
-    w.columns = arr;
-  }
-  if (formerGroupId) pruneEmptyGroupW(w, formerGroupId);
-}
-function reorderColumnAroundGroupW(w, sourceId, targetGroupId, edge) {
-  const src = w.columns.find((c) => c.id === sourceId);
-  if (!src) return;
-  const formerGroupId = src.groupId;
-  const next = { ...src };
-  delete next.groupId;
-  const without = w.columns.filter((c) => c.id !== sourceId);
-  const memberIndices = [];
-  without.forEach((c, i) => {
-    if (c.groupId === targetGroupId) memberIndices.push(i);
-  });
-  if (memberIndices.length === 0) return;
-  const insertAt = edge === "reorder-above" ? memberIndices[0] : memberIndices[memberIndices.length - 1] + 1;
-  const arr = [...without];
-  arr.splice(insertAt, 0, next);
-  w.columns = arr;
-  if (formerGroupId && formerGroupId !== targetGroupId) pruneEmptyGroupW(w, formerGroupId);
-}
-function assignColumnToGroupW(w, sourceId, groupId) {
-  const src = w.columns.find((c) => c.id === sourceId);
-  if (!src || src.groupId === groupId) return;
-  const formerGroupId = src.groupId;
-  const next = { ...src, groupId };
-  const without = w.columns.filter((c) => c.id !== sourceId);
-  const firstMemberIdx = without.findIndex((c) => c.groupId === groupId);
-  const arr = [...without];
-  if (firstMemberIdx >= 0) arr.splice(firstMemberIdx, 0, next);
-  else arr.push(next);
-  w.columns = arr;
-  if (formerGroupId) pruneEmptyGroupW(w, formerGroupId);
-}
-function moveGroupBlockW(w, sourceGroupId, target, edge) {
-  const block = w.columns.filter((c) => c.groupId === sourceGroupId);
-  if (block.length === 0) return;
-  const rest = w.columns.filter((c) => c.groupId !== sourceGroupId);
-  let anchorIdx;
-  if (target.kind === "column") {
-    if (block.some((b) => b.id === target.id)) return;
-    anchorIdx = rest.findIndex((c) => c.id === target.id);
-  } else {
-    if (target.id === sourceGroupId) return;
-    const firstIdx = rest.findIndex((c) => c.groupId === target.id);
-    if (firstIdx < 0) return;
-    const size = rest.filter((c) => c.groupId === target.id).length;
-    anchorIdx = edge === "reorder-above" ? firstIdx : firstIdx + size - 1;
-  }
-  if (anchorIdx < 0) return;
-  const insertAt = edge === "reorder-above" ? anchorIdx : anchorIdx + 1;
-  const arr = [...rest];
-  arr.splice(insertAt, 0, ...block);
-  w.columns = arr;
-}
-function wrapColumnsInNewGroupW(w, sourceId, targetId) {
-  if (sourceId === targetId) return void 0;
-  const src = w.columns.find((c) => c.id === sourceId);
-  const tgt = w.columns.find((c) => c.id === targetId);
-  if (!src || !tgt) return void 0;
-  if (src.groupId || tgt.groupId) return void 0;
-  const newGroup = { id: crypto.randomUUID() };
-  w.groups = [...w.groups, newGroup];
-  const srcUpdated = { ...src, groupId: newGroup.id };
-  const tgtUpdated = { ...tgt, groupId: newGroup.id };
-  const without = w.columns.filter((c) => c.id !== sourceId);
-  const tgtIdx = without.findIndex((c) => c.id === targetId);
-  if (tgtIdx < 0) return void 0;
-  const arr = [...without];
-  arr[tgtIdx] = tgtUpdated;
-  arr.splice(tgtIdx, 0, srcUpdated);
-  w.columns = arr;
-  return newGroup.id;
-}
-function pinColumnToW(w, id, side) {
-  const col = w.columns.find((c) => c.id === id);
-  if (!col) return;
-  const formerGroupId = col.groupId;
-  const detached = { ...col };
-  if (detached.groupId) delete detached.groupId;
-  setColumnPinW(w, id, side);
-  const without = w.columns.filter((c) => c.id !== id);
-  const left = pinnedLeftSetOf(w);
-  const right = pinnedRightSetOf(w);
-  let insertAt;
-  if (side === "left") {
-    let last = -1;
-    for (let k = 0; k < without.length; k++) {
-      if (left.has(without[k].id)) last = k;
-    }
-    insertAt = last + 1;
-  } else {
-    let first = without.length;
-    for (let k = 0; k < without.length; k++) {
-      if (right.has(without[k].id)) {
-        first = k;
-        break;
-      }
-    }
-    insertAt = first;
-  }
-  const arr = [...without];
-  arr.splice(insertAt, 0, detached);
-  w.columns = arr;
-  if (formerGroupId) pruneEmptyGroupW(w, formerGroupId);
-}
-function pinGroupToW(w, groupId, side) {
-  const members = w.columns.filter((c) => c.groupId === groupId);
-  if (members.length === 0) return;
-  const memberIds = new Set(members.map((m) => m.id));
-  setGroupPinW(w, groupId, side);
-  const without = w.columns.filter((c) => !memberIds.has(c.id));
-  const left = pinnedLeftSetOf(w);
-  const right = pinnedRightSetOf(w);
-  let insertAt;
-  if (side === "left") {
-    let last = -1;
-    for (let k = 0; k < without.length; k++) {
-      if (left.has(without[k].id)) last = k;
-    }
-    insertAt = last + 1;
-  } else {
-    let first = without.length;
-    for (let k = 0; k < without.length; k++) {
-      if (right.has(without[k].id)) {
-        first = k;
-        break;
-      }
-    }
-    insertAt = first;
-  }
-  const arr = [...without];
-  arr.splice(insertAt, 0, ...members);
-  w.columns = arr;
-}
-function targetBand(target) {
-  return target.kind === GROUP_DRAG_KIND ? groupBand(target.id) : columnBand(target.id);
-}
-function bandToPin(band) {
-  return band === "main" ? void 0 : band;
-}
-function onRowDrop({ source, target, instruction }) {
-  if (source.kind === GROUP_DRAG_KIND) {
-    const w = snapshot();
-    if (instruction === "reorder-above" || instruction === "reorder-below") {
-      if (target.kind === GROUP_DRAG_KIND) {
-        moveGroupBlockW(w, source.id, { kind: "group", id: target.id }, instruction);
-      } else if (target.kind === COLUMN_DRAG_KIND) {
-        moveGroupBlockW(w, source.id, { kind: "column", id: target.id }, instruction);
-      }
-      setGroupPinW(w, source.id, bandToPin(targetBand(target)));
-    }
-    reconcilePinningW(w);
-    commit(w);
-    return;
-  }
-  if (source.kind === COLUMN_DRAG_KIND) {
-    if (target.kind === GROUP_DRAG_KIND) {
-      const w = snapshot();
-      if (instruction === "make-child") {
-        assignColumnToGroupW(w, source.id, target.id);
-      } else if (instruction === "reorder-above" || instruction === "reorder-below") {
-        reorderColumnAroundGroupW(w, source.id, target.id, instruction);
-      } else return;
-      setColumnPinW(w, source.id, bandToPin(groupBand(target.id)));
-      reconcilePinningW(w);
-      commit(w);
-      return;
-    }
-    if (target.kind === COLUMN_DRAG_KIND) {
-      const w = snapshot();
-      let newGroupId;
-      if (instruction === "make-child") {
-        newGroupId = wrapColumnsInNewGroupW(w, source.id, target.id);
-        setColumnPinW(w, source.id, bandToPin(columnBand(target.id)));
-      } else if (instruction === "reorder-above" || instruction === "reorder-below") {
-        reorderColumnNextW(w, source.id, target.id, instruction);
-        setColumnPinW(w, source.id, bandToPin(columnBand(target.id)));
-      }
-      reconcilePinningW(w);
-      commit(w);
-      if (newGroupId) selected.value = { kind: "group", id: newGroupId };
-    }
-  }
-}
-function onZoneDrop({ source, zoneId }) {
-  if (zoneId !== PIN_LEFT_ZONE && zoneId !== PIN_RIGHT_ZONE) return;
-  const side = zoneId === PIN_LEFT_ZONE ? "left" : "right";
-  const w = snapshot();
-  if (source.kind === COLUMN_DRAG_KIND) {
-    pinColumnToW(w, source.id, side);
-  } else if (source.kind === GROUP_DRAG_KIND) {
-    pinGroupToW(w, source.id, side);
-  }
-  commit(w);
-}
-const dnd = useTreeDnd({ onRowDrop, onZoneDrop });
-const pickDragHandle = (el) => el.querySelector(".drag-handle");
-function pinZoneConfig(side) {
-  return {
-    data: { side },
-    canDrop: (src) => {
-      if (src.kind === COLUMN_DRAG_KIND) {
-        return columnBand(src.id) !== side;
-      }
-      if (src.kind === GROUP_DRAG_KIND) {
-        return groupBand(src.id) !== side;
-      }
-      return false;
-    }
-  };
-}
-function groupRowConfig(groupId) {
-  const band = groupBand(groupId);
-  return {
-    kind: GROUP_DRAG_KIND,
-    data: { band },
-    canDrop: (src) => {
-      if (src.kind === GROUP_DRAG_KIND) return src.id !== groupId;
-      if (src.kind === COLUMN_DRAG_KIND) return true;
-      return false;
-    },
-    blockInstructions: (src) => {
-      const block = ["reparent"];
-      if (src.kind === GROUP_DRAG_KIND) {
-        block.push("make-child");
-        if (src.id === groupId) block.push("reorder-above", "reorder-below");
-      }
-      return block;
-    },
-    resolveInstruction: ({ input, element, source }) => {
-      const rect = element.getBoundingClientRect();
-      const relY = input.clientY - rect.top;
-      if (source.kind === COLUMN_DRAG_KIND) {
-        const third = rect.height / 3;
-        if (relY < third) return "reorder-above";
-        if (relY > third * 2) return "reorder-below";
-        return "make-child";
-      }
-      return relY < rect.height / 2 ? "reorder-above" : "reorder-below";
-    },
-    dragHandle: pickDragHandle
-  };
-}
-function columnRowConfig(columnId) {
-  const col = findColumn(columnId);
-  const colGroupId = col?.groupId;
-  const band = columnBand(columnId);
-  return {
-    kind: COLUMN_DRAG_KIND,
-    data: { groupId: colGroupId, band },
-    canDrop: (src) => {
-      if (src.kind === COLUMN_DRAG_KIND) return src.id !== columnId;
-      if (src.kind === GROUP_DRAG_KIND) {
-        return colGroupId !== src.id;
-      }
-      return false;
-    },
-    blockInstructions: (src) => {
-      const block = ["reparent"];
-      if (src.id === columnId) {
-        block.push("reorder-above", "reorder-below", "make-child");
-        return block;
-      }
-      const targetUngrouped = !colGroupId;
-      const sourceUngrouped = src.kind === COLUMN_DRAG_KIND && !src.data.groupId;
-      if (!(targetUngrouped && sourceUngrouped)) block.push("make-child");
-      return block;
-    },
-    resolveInstruction: ({ input, element, source }) => {
-      const rect = element.getBoundingClientRect();
-      const relY = input.clientY - rect.top;
-      const third = rect.height / 3;
-      const allowMakeChild = source.kind === COLUMN_DRAG_KIND && source.id !== columnId && !colGroupId && !source.data.groupId;
-      if (allowMakeChild) {
-        if (relY < third) return "reorder-above";
-        if (relY > third * 2) return "reorder-below";
-        return "make-child";
-      }
-      return relY < rect.height / 2 ? "reorder-above" : "reorder-below";
-    },
-    dragHandle: pickDragHandle
-  };
-}
-function parsePageSizes(value) {
-  return value.split(",").map((s) => Number.parseInt(s.trim(), 10)).filter((n) => !Number.isNaN(n) && n > 0);
-}
-function updateGeneralOptionalString(key, value) {
-  const cur = readGeneral();
-  if (value.trim() === "") {
-    const { [key]: _, ...rest } = cur;
-    config.value = {
-      ...config.value,
-      ...normalizeForEmit(rest)
-    };
-    if (key in config.value) {
-      const { [key]: _drop, ...rest2 } = config.value;
-      config.value = rest2;
-    }
-  } else {
-    writeGeneralPatch({ [key]: value });
-  }
-}
-function setDataSourceField(key, value) {
-  const cur = readGeneral();
-  const ds = { ...cur.dataSource ?? {} };
-  ds[key] = value;
-  writeGeneralPatch({ dataSource: ds });
-}
-function applyAiDataSource(value) {
-  const cur = readGeneral();
-  const ds = { ...cur.dataSource ?? {} };
-  if (value.data !== void 0) ds.data = value.data;
-  if (value.request !== void 0) {
-    if (value.request) ds.request = value.request;
-    else delete ds.request;
-  }
-  if (value.total !== void 0) {
-    if (value.total) ds.total = value.total;
-    else delete ds.total;
-  }
-  writeGeneralPatch({ dataSource: ds });
-}
-function applyAiColumns(value) {
-  const next = value.filter(
-    (c) => c?.type !== "com.shwfed.table.column.actions" && findColumnEntry(c?.type, c?.compatibilityDate)
-  );
-  const w = snapshot();
-  w.columns = next;
-  reconcilePinningW(w);
-  commit(w);
-  resolveSelection();
-}
-function updateDataSourceOptional(key, value) {
-  const cur = readGeneral();
-  const { [key]: _omit, ...rest } = cur.dataSource ?? {};
-  const ds = value.trim() === "" ? rest : { ...rest, [key]: value };
-  writeGeneralPatch({ dataSource: ds });
-}
-function setPageSize(value) {
-  const cur = readGeneral();
-  const p = { ...cur.pagination ?? {} };
-  const n = typeof value === "number" ? value : Number(value);
-  if (!Number.isFinite(n) || n <= 0) delete p.pageSize;
-  else p.pageSize = n;
-  writeGeneralPatch({ pagination: p });
-}
-function setPageSizes(value) {
-  const parsed = parsePageSizes(value);
-  const cur = readGeneral();
-  const p = { ...cur.pagination ?? {} };
-  if (parsed.length === 0) delete p.pageSizes;
-  else p.pageSizes = parsed;
-  writeGeneralPatch({ pagination: p });
-}
-function setPaginationLocale(key, value) {
-  const cur = readGeneral();
-  const p = { ...cur.pagination ?? {} };
-  if (value == null) {
-    if (key === "left") delete p.left;
-    else delete p.right;
-  } else p[key] = value;
-  writeGeneralPatch({ pagination: p });
-}
-function getError(fieldPath) {
-  return fieldErrors.value[fieldPath];
-}
-const tableActionsValue = computed({
-  get: () => {
-    const a = editingGeneralConfig.value.actions ?? {};
-    return {
-      kind: "shwfed.component.action",
-      size: a.size ?? "default",
-      gap: a.gap ?? 4,
-      style: a.style,
-      groups: a.groups ?? [],
-      items: a.items ?? []
-    };
-  },
-  set: (next) => {
-    const { size, gap, style, groups, items } = next;
-    const hasContent = groups && groups.length > 0 || items && items.length > 0 || typeof style === "string" && style.length > 0;
-    if (!hasContent) {
-      const cur = readGeneral();
-      const { actions: _drop, ...rest } = cur;
-      const merged = normalizeForEmit(rest);
-      const cleared = { ...config.value, ...merged };
-      delete cleared.actions;
-      config.value = cleared;
-      return;
-    }
-    const actions = { size, gap, groups, items };
-    if (style !== void 0) actions.style = style;
-    writeGeneralPatch({ actions });
-  }
-});
-const tableQueryValue = computed({
-  get: () => {
-    const q = editingGeneralConfig.value.query;
-    if (q) return q;
-    return defaultFormConfig();
-  },
-  set: (next) => {
-    if (!next.fields || next.fields.length === 0) {
-      const cur = readGeneral();
-      const { query: _drop, ...rest } = cur;
-      const merged = normalizeForEmit(rest);
-      const cleared = { ...config.value, ...merged };
-      delete cleared.query;
-      config.value = cleared;
-      return;
-    }
-    writeGeneralPatch({ query: next });
-  }
-});
-</script>
-
-<template>
-  <div class="flex flex-col">
-    <div class="flex min-h-128 gap-6">
-      <div
-        v-if="!isDrilled"
-        class="flex w-64 shrink-0 flex-col"
-      >
-        <ScrollArea class="flex-1">
-          <div class="flex flex-col gap-1">
-            <div
-              class="row general-row pl-2"
-              :class="[
-  selectedGeneral ? 'bg-[color-mix(in_srgb,var(--primary)_10%,white)] text-(--primary)' : 'text-zinc-600 hover:bg-zinc-50'
-]"
-              @click.stop="selectGeneral()"
-            >
-              <Icon
-                icon="fluent:settings-20-regular"
-                class="size-4 shrink-0"
-              />
-              <span class="flex-1 truncate">通用配置</span>
-            </div>
-
-            <div
-              class="row general-row pl-2"
-              :class="[
-  selectedActions ? 'bg-[color-mix(in_srgb,var(--primary)_10%,white)] text-(--primary)' : 'text-zinc-600 hover:bg-zinc-50'
-]"
-              @click.stop="selectActions()"
-            >
-              <Icon
-                icon="fluent:slide-settings-20-regular"
-                class="size-4 shrink-0"
-              />
-              <span class="flex-1 truncate">{{ generalFieldTitle("actions") }}</span>
-            </div>
-
-            <div
-              class="row general-row pl-2"
-              :class="[
-  selectedQuery ? 'bg-[color-mix(in_srgb,var(--primary)_10%,white)] text-(--primary)' : 'text-zinc-600 hover:bg-zinc-50'
-]"
-              @click.stop="selectQuery()"
-            >
-              <Icon
-                icon="fluent:form-new-20-regular"
-                class="size-4 shrink-0"
-              />
-              <span class="flex-1 truncate">{{ generalFieldTitle("query") }}</span>
-            </div>
-          </div>
-
-          <Separator class="my-1" />
-
-          <div
-            v-if="pinnedLeftIds.size === 0"
-            :ref="dnd.zoneRef(PIN_LEFT_ZONE, pinZoneConfig('left'))"
-            class="pin-zone"
-            :data-active="dnd.isZoneActive(PIN_LEFT_ZONE) ? 'true' : void 0"
-          >
-            <Icon
-              icon="fluent:pin-20-regular"
-              class="size-3.5"
-            />
-            <span>固定到左侧</span>
-          </div>
-
-          <template
-            v-for="entry in renderEntries"
-            :key="entryKey(entry)"
-          >
-            <p
-              v-if="entry.kind === 'band-caption'"
-              class="band-caption"
-            >
-              {{ entry.text }}
-            </p>
-
-            <Separator
-              v-else-if="entry.kind === 'band-separator'"
-              class="my-1"
-            />
-
-            <div
-              v-else-if="entry.kind === 'group-header'"
-              :ref="dnd.rowRef(entry.groupId, groupRowConfig(entry.groupId))"
-              class="row group group-row pl-2"
-              :class="[
-  selected.kind === 'group' && selected.id === entry.groupId ? 'bg-[color-mix(in_srgb,var(--primary)_10%,white)] text-(--primary)' : ''
-]"
-              :data-instruction="dnd.instructionFor(entry.groupId) ?? void 0"
-              @click.stop="selectGroup(entry.groupId)"
-            >
-              <Icon
-                icon="fluent:re-order-dots-vertical-20-regular"
-                class="drag-handle size-4 shrink-0 cursor-grab text-zinc-400"
-              />
-              <Icon
-                icon="fluent:folder-20-regular"
-                class="size-4 shrink-0 text-zinc-400"
-              />
-              <span class="flex-1 truncate">{{ groupLabel(findGroup(entry.groupId) ?? { id: entry.groupId }) }}</span>
-              <Tooltip :delay-duration="180">
-                <TooltipTrigger as-child>
-                  <button
-                    class="shrink-0 text-zinc-300 opacity-0 transition-opacity hover:text-red-500 group-hover:opacity-100"
-                    @click.stop="deleteGroup(entry.groupId)"
-                  >
-                    <Icon
-                      icon="fluent:delete-20-regular"
-                      class="size-3.5"
-                    />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="right">
-                  移除该分组（其下的列将变为未分组）
-                </TooltipContent>
-              </Tooltip>
-            </div>
-
-            <div
-              v-else-if="entry.kind === 'column'"
-              :ref="dnd.rowRef(entry.columnId, columnRowConfig(entry.columnId))"
-              class="row group column-row"
-              :class="[
-  entry.groupId ? 'pl-6' : 'pl-2',
-  selected.kind === 'column' && selected.id === entry.columnId ? 'bg-[color-mix(in_srgb,var(--primary)_10%,white)] text-(--primary)' : 'text-zinc-600 hover:bg-zinc-50'
-]"
-              :data-instruction="dnd.instructionFor(entry.columnId) ?? void 0"
-              @click.stop="selectColumn(entry.columnId)"
-            >
-              <Icon
-                icon="fluent:re-order-dots-vertical-20-filled"
-                class="drag-handle size-4 shrink-0 cursor-grab text-zinc-300"
-              />
-              <span class="flex-1 truncate">{{ columnLabel(findColumn(entry.columnId) ?? { id: entry.columnId }) }}</span>
-              <Badge
-                variant="secondary"
-                class="shrink-0 text-[10px] leading-none"
-              >
-                {{ getColumnTypeLabel(findColumn(entry.columnId)?.type, findColumn(entry.columnId)?.compatibilityDate) }}
-              </Badge>
-              <Tooltip :delay-duration="180">
-                <TooltipTrigger as-child>
-                  <button
-                    class="shrink-0 text-zinc-300 opacity-0 transition-opacity hover:text-red-500 group-hover:opacity-100"
-                    @click.stop="deleteColumn(entry.columnId)"
-                  >
-                    <Icon
-                      icon="fluent:delete-20-regular"
-                      class="size-3.5"
-                    />
-                  </button>
-                </TooltipTrigger>
-                <TooltipContent side="right">
-                  从表格中移除该列
-                </TooltipContent>
-              </Tooltip>
-            </div>
-          </template>
-
-          <div
-            v-if="pinnedRightIds.size === 0"
-            :ref="dnd.zoneRef(PIN_RIGHT_ZONE, pinZoneConfig('right'))"
-            class="pin-zone"
-            :data-active="dnd.isZoneActive(PIN_RIGHT_ZONE) ? 'true' : void 0"
-          >
-            <Icon
-              icon="fluent:pin-20-regular"
-              class="size-3.5"
-            />
-            <span>固定到右侧</span>
-          </div>
-        </ScrollArea>
-
-        <div class="flex flex-col gap-2 border-t border-zinc-100 p-2">
-          <InputGroup>
-            <InputGroupAddon align="inline-start">
-              <Icon icon="fluent:add-20-regular" />
-            </InputGroupAddon>
-            <InputGroupCombobox>
-              <CommandGroup>
-                <CommandItem
-                  v-for="entry in COLUMNS"
-                  :key="`${entry.type}@${entry.compatibilityDate}`"
-                  :value="`${entry.type}@${entry.compatibilityDate}`"
-                  @select="addColumn(entry.type, entry.compatibilityDate)"
-                >
-                  <Icon
-                    :icon="entry.metadata.icon"
-                    class="size-4 text-zinc-500"
-                  />
-                  <span class="flex-1">{{ entry.metadata.name }}</span>
-                  <span class="ml-auto text-xs tabular-nums text-zinc-400">{{ entry.compatibilityDate }}</span>
-                </CommandItem>
-              </CommandGroup>
-            </InputGroupCombobox>
-            <InputGroupAddon align="inline-end">
-              <TableAiColumnsButton
-                :data-source="editingGeneralConfig.dataSource"
-                :columns="editingColumns"
-                @apply="applyAiColumns"
-              />
-            </InputGroupAddon>
-          </InputGroup>
-        </div>
-      </div>
-
-      <div class="flex flex-1 flex-col">
-        <ScrollArea class="flex-1">
-          <div
-            v-if="selectedGeneral"
-            class="space-y-5"
-          >
-            <div class="flex items-center gap-2">
-              <h3 class="text-xs font-medium text-zinc-500">
-                {{ generalFieldTitle("dataSource") }}
-              </h3>
-              <TableAiDataSourceButton
-                :data-source="editingGeneralConfig.dataSource"
-                :columns="editingColumns"
-                @apply="applyAiDataSource"
-              />
-            </div>
-
-            <div class="space-y-4">
-              <Field orientation="vertical">
-                <FieldLabel class="text-xs text-zinc-500">
-                  <template
-                    v-if="dataSourceFieldDescription('request')"
-                    #tooltip
-                  >
-                    <Markdown
-                      :source="dataSourceFieldDescription('request')"
-                      block
-                      class="prose prose-sm prose-zinc"
-                    />
-                  </template>
-                  {{ dataSourceFieldTitle("request") }}
-                </FieldLabel>
-                <RequestCELContext>
-                  <ExpressionEditor
-                    :model-value="editingGeneralConfig.dataSource?.request ?? ''"
-                    placeholder="如 http.get('/api/users').query('page', pageIndex)"
-                    result-type="HttpRequest"
-                    multiline
-                    class="min-h-20"
-                    @update:model-value="(v) => updateDataSourceOptional('request', v)"
-                  />
-                </RequestCELContext>
-                <p
-                  v-if="getError('dataSource.request')"
-                  class="text-xs text-red-500"
-                >
-                  {{ getError("dataSource.request") }}
-                </p>
-              </Field>
-
-              <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="dataSourceFieldDescription('data')"
-                      #tooltip
-                    >
-                      <Markdown
-                        :source="dataSourceFieldDescription('data')"
-                        block
-                        class="prose prose-sm prose-zinc"
-                      />
-                    </template>
-                    {{ dataSourceFieldTitle("data") }}
-                  </FieldLabel>
-                  <JsonCELContext>
-                    <ExpressionEditor
-                      :model-value="editingGeneralConfig.dataSource?.data ?? ''"
-                      placeholder="如 json.?value.items.orValue([])"
-                      result-type="list"
-                      @update:model-value="(v) => setDataSourceField('data', v)"
-                    />
-                  </JsonCELContext>
-                  <p
-                    v-if="getError('dataSource.data')"
-                    class="text-xs text-red-500"
-                  >
-                    {{ getError("dataSource.data") }}
-                  </p>
-                </Field>
-                <Field orientation="vertical">
-                  <FieldLabel class="text-xs text-zinc-500">
-                    <template
-                      v-if="dataSourceFieldDescription('total')"
-                      #tooltip
-                    >
-                      <Markdown
-                        :source="dataSourceFieldDescription('total')"
-                        block
-                        class="prose prose-sm prose-zinc"
-                      />
-                    </template>
-                    {{ dataSourceFieldTitle("total") }}
-                  </FieldLabel>
-                  <JsonCELContext>
-                    <ExpressionEditor
-                      :model-value="editingGeneralConfig.dataSource?.total ?? ''"
-                      placeholder="留空使用前端分页；如 json.?value.total.orValue(0)"
-                      result-type="number"
-                      @update:model-value="(v) => updateDataSourceOptional('total', v)"
-                    />
-                  </JsonCELContext>
-                  <p
-                    v-if="getError('dataSource.total')"
-                    class="text-xs text-red-500"
-                  >
-                    {{ getError("dataSource.total") }}
-                  </p>
-                </Field>
-              </div>
-            </div>
-
-            <Separator />
-
-            <h3 class="text-xs font-medium text-zinc-500">
-              {{ generalFieldTitle("pagination") }}
-            </h3>
-
-            <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="paginationFieldDescription('pageSize')"
-                    #tooltip
-                  >
-                    <Markdown
-                      :source="paginationFieldDescription('pageSize')"
-                      block
-                      class="prose prose-sm prose-zinc"
-                    />
-                  </template>
-                  {{ paginationFieldTitle("pageSize") }}
-                </FieldLabel>
-                <InputGroup>
-                  <InputGroupNumberField
-                    :model-value="editingGeneralConfig.pagination?.pageSize"
-                    :min="1"
-                    class="font-mono"
-                    @update:model-value="(v) => setPageSize(v)"
-                  />
-                </InputGroup>
-                <p
-                  v-if="getError('pagination.pageSize')"
-                  class="text-xs text-red-500"
-                >
-                  {{ getError("pagination.pageSize") }}
-                </p>
-              </Field>
-              <Field orientation="vertical">
-                <FieldLabel class="text-xs text-zinc-500">
-                  <template
-                    v-if="paginationFieldDescription('pageSizes')"
-                    #tooltip
-                  >
-                    <Markdown
-                      :source="paginationFieldDescription('pageSizes')"
-                      block
-                      class="prose prose-sm prose-zinc"
-                    />
-                  </template>
-                  {{ paginationFieldTitle("pageSizes") }}
-                </FieldLabel>
-                <Input
-                  :model-value="(editingGeneralConfig.pagination?.pageSizes ?? []).join(', ')"
-                  placeholder="如 20, 50, 100, 200"
-                  class="font-mono text-xs"
-                  @update:model-value="(v) => setPageSizes(String(v))"
-                />
-                <p
-                  v-if="getError('pagination.pageSizes')"
-                  class="text-xs text-red-500"
-                >
-                  {{ getError("pagination.pageSizes") }}
-                </p>
-              </Field>
-              <Field orientation="vertical">
-                <FieldLabel class="text-xs text-zinc-500">
-                  <template
-                    v-if="paginationFieldDescription('left')"
-                    #tooltip
-                  >
-                    <Markdown
-                      :source="paginationFieldDescription('left')"
-                      block
-                      class="prose prose-sm prose-zinc"
-                    />
-                  </template>
-                  {{ paginationFieldTitle("left") }}
-                </FieldLabel>
-                <Locale
-                  :model-value="editingGeneralConfig.pagination?.left"
-                  markdown
-                  @update:model-value="(v) => setPaginationLocale('left', v)"
-                />
-              </Field>
-              <Field orientation="vertical">
-                <FieldLabel class="text-xs text-zinc-500">
-                  <template
-                    v-if="paginationFieldDescription('right')"
-                    #tooltip
-                  >
-                    <Markdown
-                      :source="paginationFieldDescription('right')"
-                      block
-                      class="prose prose-sm prose-zinc"
-                    />
-                  </template>
-                  {{ paginationFieldTitle("right") }}
-                </FieldLabel>
-                <Locale
-                  :model-value="editingGeneralConfig.pagination?.right"
-                  markdown
-                  @update:model-value="(v) => setPaginationLocale('right', v)"
-                />
-              </Field>
-            </div>
-
-            <Separator />
-
-            <h3 class="text-xs font-medium text-zinc-500">
-              样式
-            </h3>
-
-            <div class="space-y-4">
-              <Field orientation="vertical">
-                <FieldLabel class="text-xs text-zinc-500">
-                  <template
-                    v-if="generalFieldDescription('cellStyle')"
-                    #tooltip
-                  >
-                    <Markdown
-                      :source="generalFieldDescription('cellStyle')"
-                      block
-                      class="prose prose-sm prose-zinc"
-                    />
-                  </template>
-                  {{ generalFieldTitle("cellStyle") }}
-                </FieldLabel>
-                <CellStyleCELContext>
-                  <ExpressionEditor
-                    :model-value="editingGeneralConfig.cellStyle ?? ''"
-                    placeholder="如 { 'color': 'red' }"
-                    result-type="map"
-                    multiline
-                    class="min-h-10"
-                    @update:model-value="(v) => updateGeneralOptionalString('cellStyle', v)"
-                  />
-                </CellStyleCELContext>
-                <p
-                  v-if="getError('cellStyle')"
-                  class="text-xs text-red-500"
-                >
-                  {{ getError("cellStyle") }}
-                </p>
-              </Field>
-
-              <Field orientation="vertical">
-                <FieldLabel class="text-xs text-zinc-500">
-                  <template
-                    v-if="generalFieldDescription('style')"
-                    #tooltip
-                  >
-                    <Markdown
-                      :source="generalFieldDescription('style')"
-                      block
-                      class="prose prose-sm prose-zinc"
-                    />
-                  </template>
-                  {{ generalFieldTitle("style") }}
-                </FieldLabel>
-                <Textarea
-                  :model-value="editingGeneralConfig.style ?? ''"
-                  placeholder="CSS 样式字符串"
-                  class="min-h-20 font-mono text-xs"
-                  @update:model-value="(v) => updateGeneralOptionalString('style', String(v))"
-                />
-                <p
-                  v-if="getError('style')"
-                  class="text-xs text-red-500"
-                >
-                  {{ getError("style") }}
-                </p>
-              </Field>
-            </div>
-          </div>
-
-          <TableActionsCELContext v-else-if="selectedActions">
-            <ActionsConfigEditor
-              v-model="tableActionsValue"
-              :configure="configureTableActions"
-            />
-          </TableActionsCELContext>
-
-          <ShwfedFormConfig
-            v-else-if="selectedQuery"
-            v-model="tableQueryValue"
-            :configure="configureTableQuery"
-          />
-
-          <div
-            v-else-if="selectedGroupRef"
-            class="grid grid-cols-2 gap-4"
-          >
-            <Field orientation="vertical">
-              <FieldLabel class="text-xs text-zinc-500">
-                <template
-                  v-if="groupFieldDescription('title')"
-                  #tooltip
-                >
-                  <Markdown
-                    :source="groupFieldDescription('title')"
-                    block
-                    class="prose prose-sm prose-zinc"
-                  />
-                </template>
-                {{ groupFieldTitle("title") }}
-              </FieldLabel>
-              <Locale
-                :model-value="selectedGroupRef.title"
-                @update:model-value="(v) => patchSelectedGroup({ title: v })"
-              />
-            </Field>
-
-            <Field orientation="vertical">
-              <FieldLabel class="text-xs text-zinc-500">
-                <template
-                  v-if="groupFieldDescription('tooltip')"
-                  #tooltip
-                >
-                  <Markdown
-                    :source="groupFieldDescription('tooltip')"
-                    block
-                    class="prose prose-sm prose-zinc"
-                  />
-                </template>
-                {{ groupFieldTitle("tooltip") }}
-              </FieldLabel>
-              <Locale
-                :model-value="selectedGroupRef.tooltip"
-                markdown
-                @update:model-value="(v) => patchSelectedGroup({ tooltip: v })"
-              />
-            </Field>
-          </div>
-
-          <div
-            v-else-if="selectedColumnRef"
-            :class="columnFullPane ? '' : 'space-y-5'"
-          >
-            <component
-              :is="selectedColumnEntry.config"
-              v-if="selectedColumnEntry"
-              :model-value="selectedColumnRef"
-              @update:model-value="(v) => patchSelectedColumn(v)"
-            />
-            <div
-              v-else
-              class="text-xs text-red-500"
-            >
-              未知列类型：{{ selectedColumnRef.type }}@{{ selectedColumnRef.compatibilityDate }}
-            </div>
-          </div>
-
-          <div
-            v-else
-            class="flex min-h-112 items-center justify-center text-sm text-zinc-400"
-          >
-            选择一项以编辑
-          </div>
-        </ScrollArea>
-      </div>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.row{align-items:center;border-radius:.25rem;cursor:pointer;display:flex;font-size:.875rem;gap:.375rem;padding-block:.375rem;padding-right:.5rem;position:relative;transition:background-color .1s ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.group-row{color:#3f3f46;font-weight:500}.group-row:hover{background:#fafafa}.general-row{font-weight:500}[data-instruction=reorder-above]:before,[data-instruction=reorder-below]:after{background:var(--primary,#2563eb);content:"";height:2px;left:.5rem;pointer-events:none;position:absolute;right:.5rem;z-index:1}[data-instruction=reorder-above]:before{top:-1px}[data-instruction=reorder-below]:after{bottom:-1px}.column-row[data-instruction=make-child],.group-row[data-instruction=make-child]{background:color-mix(in srgb,var(--primary,#2563eb) 12%,#fff);border-radius:.25rem;outline:1px dashed var(--primary,#2563eb);outline-offset:-2px}.band-caption{color:#a1a1aa;font-size:.625rem;font-weight:500;letter-spacing:.04em;padding:.125rem .5rem;text-transform:uppercase}.pin-zone{align-items:center;border-radius:.25rem;color:transparent;display:flex;font-size:.75rem;gap:.25rem;height:.5rem;justify-content:center;margin:.125rem 0;pointer-events:auto;transition:height .12s ease,color .12s ease,background-color .12s ease}.pin-zone>*{pointer-events:none}.pin-zone[data-active=true]{background-color:color-mix(in srgb,var(--primary,#2563eb) 8%,#fff);color:var(--primary,#2563eb);height:1.75rem}
-</style>