@xclqmc/base-form 1.0.0

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@xclqmc/base-form",
+  "version": "1.0.0",
+  "description": "声明式表单组件 BaseForm（弹窗/抽屉/内嵌三态）及配套基础组件（BasePopup/BaseDrawer/BaseRadio/BaseSelect/BaseEditor）—— 纯源码分发的 Vue3 + ElementPlus 表单组件库",
+  "license": "MIT",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "files": [
+    "src"
+  ],
+  "main": "./src/index.ts",
+  "module": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts",
+    "./src/*": "./src/*"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "@element-plus/icons-vue": ">=2.0.0",
+    "@wangeditor/editor": ">=5.0.0",
+    "@wangeditor/editor-for-vue": ">=5.0.0",
+    "element-plus": "^2.4.0",
+    "vue": "^3.3.0"
+  },
+  "devDependencies": {
+    "@element-plus/icons-vue": "^2.3.1",
+    "@vitejs/plugin-vue": "^4.0.0",
+    "@wangeditor/editor": "5.1.23",
+    "@wangeditor/editor-for-vue": "5.1.12",
+    "element-plus": "^2.8.8",
+    "sass": "^1.105.0",
+    "vite": "^4.3.3",
+    "vue": "^3.5.13"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "element-plus",
+    "form",
+    "base-form",
+    "lowcode"
+  ]
+}

package/src/components/BaseForm/BaseForm.vue

@@ -0,0 +1,440 @@
+<template>
+  <!-- 弹窗形态：mode='dialog'（默认）时用 BasePopup 包裹表单 -->
+  <BasePopup
+    v-if="isPopup"
+    :title="cptTitle"
+    v-model:show="visible"
+    @submit="onSubmit"
+    :loading="_loading"
+    :width="cptDialogWidth"
+    :height="cptDialogHeight"
+  >
+    <FormContent
+      ref="formContentRef"
+      :options="mergedOptions"
+      :form="formData"
+      :rules="cptRules"
+      :option-lists="optionLists"
+    >
+      <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps || {}"></slot>
+      </template>
+    </FormContent>
+  </BasePopup>
+
+  <!-- 抽屉形态：mode='drawer' 时用 BaseDrawer（右侧滑出）包裹表单；width 复用为抽屉宽度 -->
+  <BaseDrawer
+    v-else-if="isDrawer"
+    v-model:show="visible"
+    :title="cptTitle"
+    :width="cptDialogWidth"
+    :show-footer="true"
+  >
+    <div v-loading="_loading">
+      <FormContent
+        ref="formContentRef"
+        :options="mergedOptions"
+        :form="formData"
+        :rules="cptRules"
+        :option-lists="optionLists"
+      >
+        <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+          <slot :name="name" v-bind="slotProps || {}"></slot>
+        </template>
+      </FormContent>
+    </div>
+    <template #footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" :disabled="_loading" @click="onSubmit"
+        >确认</el-button
+      >
+    </template>
+  </BaseDrawer>
+
+  <!-- 内嵌模式：表单直接渲染在父组件中 -->
+  <FormContent
+    v-else
+    ref="formContentRef"
+    :options="mergedOptions"
+    :form="formData"
+    :rules="cptRules"
+    :option-lists="optionLists"
+  >
+    <template v-for="(_, name) in $slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps || {}"></slot>
+    </template>
+  </FormContent>
+
+  <!-- 子组件宿主：注册到组件内，通过 getComponentRef(ref) 获取实例并调用其方法（如关联弹窗） -->
+  <div v-if="!isEmpty(mergedOptions.components)">
+    <div v-for="(item, index) in mergedOptions.components" :key="index">
+      <component
+        :is="item.component"
+        :ref="(el: any) => setComponentRef(el, item.ref)"
+        @refresh="emit('refresh')"
+        v-bind="$attrs"
+      ></component>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch, reactive, nextTick, provide } from "vue";
+import { useMessage, useProps, useComponent } from "../../hooks";
+import { defaultFormOptions } from "./types";
+import { buildRules } from "./rules";
+import type { BaseFormOptions } from "./types";
+import FormContent from "./FormContent.vue";
+import BasePopup from "../base/BasePopup.vue";
+import BaseDrawer from "../base/BaseDrawer.vue";
+
+// 判空：undefined / null / 空串 / 空数组 / 空对象视为空（布尔 false、数字 0 视为有值）
+const isEmpty = (v: any) =>
+  v === undefined ||
+  v === null ||
+  v === "" ||
+  (Array.isArray(v) && v.length === 0) ||
+  (typeof v === "object" && Object.keys(v).length === 0);
+
+const emit = defineEmits(["refresh", "update:form", "update:loading", "close"]);
+
+//================================================================================================数据
+// 子组件别名引用管理（与 FormTable 的 useComponent 机制一致）
+const { setComponentRef, getComponentByAlias } = useComponent();
+
+const props = withDefaults(
+  defineProps<{
+    options?: BaseFormOptions;
+    loading?: boolean;
+    /** 外部表单数据：配合 v-model:form 使用，传入后表单以外部数据为数据源 */
+    form?: Record<string, any>;
+  }>(),
+  {
+    options: () => ({}),
+    loading: false,
+  },
+);
+const { _options } = useProps(props, emit, ["options"]);
+
+// loading 为组件内部真实状态：open/submit 内部可直接置位；同时与父组件 v-model:loading 双向同步
+// （原 useProps 生成的 _loading 只是 props.loading 的镜像，内部赋值只会 emit 而自身不存储，导致无效果）
+const internalLoading = ref(props.loading || false);
+const _loading = computed({
+  get: () => internalLoading.value,
+  set: (val: boolean) => {
+    internalLoading.value = val;
+    emit("update:loading", val);
+  },
+});
+// 父组件通过 prop 强制控制 loading 时，同步进内部状态
+watch(
+  () => props.loading,
+  (val) => {
+    internalLoading.value = val;
+  },
+);
+
+// 表单数据：传入 v-model:form 时以外部数据为准（受控模式），否则内部自持（非受控模式）
+// 输入框改的是对象字段（引用共享，天然同步）；整体替换（回填/重置）走 set 并 emit 通知父组件
+const internalForm = ref<Record<string, any>>({});
+const formData = computed<Record<string, any>>({
+  get: () => (props.form !== undefined ? props.form : internalForm.value),
+  set: (val) => {
+    internalForm.value = val;
+    emit("update:form", val);
+  },
+});
+
+// 字段间可继承的展示类属性：某项缺失时取 fields 第一项的同名属性（占位/栅格/下边距/显隐等渲染外观）。
+// 注意：format（选项来源）、params（组件入参）属字段私有配置，仅当「当前字段类型与首项一致」时才继承，
+// 避免 select 的 options/params 泄漏到其它类型字段（如 input 被误绑 value="id"）
+const INHERITABLE_FIELD_KEYS = [
+  "type",
+  "placeholder",
+  "format",
+  "span",
+  "marginBottom",
+  "show",
+  "params",
+];
+
+// 合并默认值：用户传入的属性覆盖默认值，未传入的用默认值填充
+const mergedOptions = computed<any>(() => {
+  const userOpts = _options.value || {};
+  const fields = userOpts.fields ?? defaultFormOptions.fields;
+  // 字段属性缺失继承第一项；format/params 仅在类型一致时继承，防止跨类型泄漏
+  const base = fields[0] || {};
+  const normalizedFields = fields.map((item: any, index: number) => {
+    if (index === 0) return item;
+    const filled = { ...item };
+    INHERITABLE_FIELD_KEYS.forEach((key) => {
+      // format/params 跨类型继承无意义且危险：select 的 options 配置会泄漏到 input 等其它类型
+      if ((key === "format" || key === "params") && item.type !== base.type)
+        return;
+      if (isEmpty(filled[key]) && !isEmpty(base[key])) {
+        filled[key] = base[key];
+      }
+    });
+    return filled;
+  });
+  return {
+    ...userOpts,
+    config: { ...defaultFormOptions.config, ...userOpts.config },
+    fields: normalizedFields,
+    api: { ...defaultFormOptions.api, ...userOpts.api },
+    event: { ...userOpts.event },
+  };
+});
+
+const formContentRef = ref();
+// 弹窗显隐（dialog 模式）
+const visible = ref(false);
+
+// 弹窗关闭（X / 取消 / ESC / 提交成功）统一发出 close 事件，便于父组件在关闭时做刷新等动作
+watch(visible, (val) => {
+  if (!val) emit("close");
+});
+
+// 存储每个选项类字段（radio / select）的选项列表（支持动态函数获取）
+const optionLists = reactive<Record<string, any>>({});
+
+// 向字段控件提供字典拉取函数：控件 format 为字符串（字典 code）时自行调用获取选项，
+// 读取实时 api.dict（宿主可换接口）；单独使用控件（无 BaseForm）时未注入，字符串 format 解析为空
+provide("baseFormDict", (code: string) =>
+  mergedOptions.value?.api?.dict?.(code),
+);
+
+//================================================================================================计算函数
+// 显示形态（统一三态，只认 config.mode）：dialog=弹窗 / drawer=抽屉 / form=原始表单（内嵌）
+const cptMode = computed<"dialog" | "drawer" | "form">(() => {
+  const cfg = mergedOptions.value?.config?.mode;
+  if (cfg === "dialog" || cfg === "drawer" || cfg === "form") return cfg;
+  return "form";
+});
+
+// 是否包裹形态（弹窗或抽屉，需要用 visible 控制显隐）；form 形态为内嵌、无包裹
+const isWrapped = computed(
+  () => cptMode.value === "dialog" || cptMode.value === "drawer",
+);
+
+// 渲染分支：居中弹窗（BasePopup）/ 侧边抽屉（BaseDrawer）/ 内嵌表单
+const isPopup = computed(() => cptMode.value === "dialog");
+const isDrawer = computed(() => cptMode.value === "drawer");
+
+// 弹窗标题：
+// 1) config.title 为函数 → 入参为表单值，返回字符串作为标题
+// 2) 为字符串 → 直接使用
+// 3) 为空 → 按主键（config.id）判断：存在值=编辑（isEdit），无值=新增
+const cptTitle = computed(() => {
+  const raw = mergedOptions.value?.config?.title;
+  if (typeof raw === "function") return raw(formData.value);
+  if (raw) return raw;
+  return isEdit.value ? "编辑" : "新增";
+});
+
+// 弹窗宽度（mode 为 dialog/drawer 时生效）：config.width 优先，默认 600px
+const cptDialogWidth = computed(
+  () => mergedOptions.value?.config?.width || "600px",
+);
+
+// 弹窗高度（dialog 模式生效）：config.height，默认 null（不限制）
+const cptDialogHeight = computed(
+  () => mergedOptions.value?.config?.height ?? null,
+);
+
+// 当前是编辑还是新增（用于标题）
+const isEdit = ref(false);
+
+// 校验规则：把 fields 上的声明式校验（必填/手机号/身份证/邮箱/长度/数值/自定义）翻译成 el-form 规则
+const cptRules = computed(() =>
+  buildRules(mergedOptions.value?.fields || [], () => formData.value),
+);
+
+// 解析单个选项类字段（radio / select）的选项来源 format，结果写入 optionLists
+// 判断顺序：为空（undefined/null/''）或字符串（字典 code，由控件经注入的 api.dict 自取）跳过 →
+// 数组直接用 → Promise 直接等 → 函数（含异步函数，入参为表单值）先调用再等结果；结果仅接受数组，其余视为无数据置 []
+const refreshFieldOptions = async (item: any) => {
+  if (item.type !== "radio" && item.type !== "select") return;
+  const fmt = item.format;
+  if (
+    fmt === undefined ||
+    fmt === null ||
+    fmt === "" ||
+    typeof fmt === "string"
+  )
+    return;
+  try {
+    let res: any = fmt;
+    if (typeof fmt === "function") {
+      res = await fmt(formData.value);
+    } else if (fmt instanceof Promise) {
+      res = await fmt;
+    }
+    optionLists[item.value] = Array.isArray(res) ? res : [];
+  } catch (err) {
+    console.error(`获取 ${item.value} 选项失败:`, err);
+    optionLists[item.value] = [];
+  }
+};
+
+// 初次加载选项列表（options 字段变化时重新加载）
+watch(
+  () => mergedOptions.value?.fields,
+  (fields) => {
+    (fields || []).forEach((item: any) => refreshFieldOptions(item));
+  },
+  { immediate: true },
+);
+
+// 联动：被 watch 的字段变化时，重新获取依赖它的字段选项，并触发 onWatch 回调
+// 注意：deep watch 下字段原地修改时 newVal/oldVal 是同一引用，拿不到旧值，
+// 故自持 prevForm 快照做 changedKey 对比（整体替换 formData 引用的场景同样适用）
+let prevForm: Record<string, any> | null = null;
+watch(
+  () => formData.value,
+  (val) => {
+    const fields = mergedOptions.value?.fields || [];
+    const prev = prevForm;
+    fields.forEach((item: any) => {
+      if (!item.watch || !prev) return;
+      const deps = Array.isArray(item.watch) ? item.watch : [item.watch];
+      const changedKey = deps.find((d: string) => val[d] !== prev[d]);
+      if (changedKey) {
+        refreshFieldOptions(item);
+        if (typeof item.onWatch === "function")
+          item.onWatch(formData.value, changedKey);
+      }
+    });
+    // 快照在回调末尾更新：onWatch 若改动其它字段，已包含在本次快照里，下轮不会重复触发
+    prevForm = { ...val };
+  },
+  { deep: true, immediate: true },
+);
+
+//================================================================================================方法
+// 按字段配置生成默认值表单（?? 保留 0 / false 等合法默认值）
+const buildDefaultForm = () => {
+  const result: Record<string, any> = {};
+  mergedOptions.value.fields.forEach((item: any) => {
+    result[item.value] = item.defaultValue ?? null;
+  });
+  return result;
+};
+
+// 打开弹窗/抽屉并载入数据（包裹形态专用，等价于旧版 AppForm 的 openDialog）
+const openDialog = async (id?: string) => {
+  isEdit.value = !isEmpty(id);
+  if (isWrapped.value) {
+    visible.value = true;
+    await nextTick();
+  }
+  // 按 config.id 包裹主键，使非 id 主键（如 roleId）也能走正常 api.get 详情分支
+  await open({ [mergedOptions.value?.config?.id ?? "id"]: id });
+};
+
+// 载入表单数据：row 中 id 字段有值为编辑（请求详情），否则按默认值新增
+const open = async (row: any) => {
+  try {
+    _loading.value = true;
+    formData.value = buildDefaultForm();
+    await nextTick();
+    if (
+      !isEmpty(mergedOptions.value?.event?.open) &&
+      mergedOptions.value?.event?.open instanceof Function
+    ) {
+      // open 钩子返回值作为表单值回填（覆盖默认空表单），便于扩展/非常规详情加载
+      const res = await mergedOptions.value.event.open(row);
+      if (!isEmpty(res)) {
+        formData.value = { ...buildDefaultForm(), ...res };
+      }
+      return;
+    }
+    if (isEmpty(row[mergedOptions.value?.config?.id])) {
+      return;
+    }
+
+    // 请求详情并回填：api.get 可返回 axios 响应（含 data）或直接返回数据本体
+    const res = await mergedOptions.value.api?.get(
+      row[mergedOptions.value?.config?.id],
+    );
+    const data = res?.data ?? res;
+
+    // 先在本地构建完整表单再一次性赋值：受控模式下 set 触发 emit 后 props.form 到下个渲染周期才刷新，
+    // 若赋值后再逐字段改 formData.value，会写进旧引用导致回填丢失
+    const next = buildDefaultForm();
+    mergedOptions.value.fields.forEach((item: any) => {
+      const val = data?.[item.value];
+      next[item.value] = isEmpty(val) ? next[item.value] : val;
+    });
+    // 接口返回但未在 fields 中配置的隐藏字段，原样保留，随表单一并提交
+    Object.keys(data ?? {}).forEach((key) => {
+      if (!(key in next)) next[key] = data[key];
+    });
+    formData.value = next;
+  } finally {
+    _loading.value = false;
+    // 数据就绪后清空校验状态：新增字段为空、或上次提交失败/编辑回填残留的红字，都不应在打开时显示
+    // 校验时机交给用户操作（blur/change）与提交时 submit 内显式 validate
+    await nextTick();
+    formContentRef.value?.formRef?.clearValidate();
+  }
+};
+
+// 提交表单（弹窗确认按钮和父组件主动调用共用）
+const submit = async () => {
+  const formRef = formContentRef.value?.formRef;
+  await formRef.validate();
+  try {
+    _loading.value = true;
+    // submit 钩子：提供后覆盖内置提交逻辑（自行调 add/put、自定义提示），BaseForm 仍负责关闭弹窗与刷新
+    if (
+      !isEmpty(mergedOptions.value?.event?.submit) &&
+      mergedOptions.value?.event?.submit instanceof Function
+    ) {
+      await mergedOptions.value.event.submit(formData.value);
+      emit("refresh");
+      return;
+    }
+    const id = formData.value[mergedOptions.value?.config?.id];
+    if (id) {
+      await mergedOptions.value.api?.put(formData.value);
+      useMessage().success("修改成功");
+    } else {
+      await mergedOptions.value.api?.add(formData.value);
+      useMessage().success("添加成功");
+    }
+    emit("refresh");
+  } finally {
+    _loading.value = false;
+  }
+};
+
+// 弹窗/抽屉确认按钮：提交成功后关闭（refresh 由 submit 发出，只发一次）
+const onSubmit = async () => {
+  await submit();
+  if (isWrapped.value) {
+    visible.value = false;
+  }
+};
+
+// 获取表单数据（深拷贝，避免外部误改内部状态）
+const getForm = () => JSON.parse(JSON.stringify(formData.value));
+
+// 合并设置表单数据
+const setForm = (data: Record<string, any>) => {
+  formData.value = { ...formData.value, ...data };
+};
+
+//================================================================================================暴露变量
+// 对外暴露：open（即打开弹窗，等价于旧 openDialog）、submit、表单读写、子组件获取
+// 注：内部 open(row) 仅用于详情加载，不对外暴露
+// openDialog 作为向后兼容别名保留（旧页面/旧 Form 仍可能调用 .openDialog）
+defineExpose({
+  open: openDialog,
+  openDialog,
+  submit,
+  getForm,
+  setForm,
+  getComponentRef: getComponentByAlias,
+});
+</script>

package/src/components/BaseForm/FormContent.vue

@@ -0,0 +1,179 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="form"
+    :rules="rules"
+    :label-width="options?.config?.labelWidth"
+    :validate-on-rule-change="false"
+  >
+    <el-row>
+      <template v-for="item in options?.fields" :key="item.value">
+        <slot v-if="getShow(item)" :name="item.value" :item="item">
+          <el-col
+            :span="item.span || options?.config?.span"
+            :style="getColStyle(item)"
+          >
+            <!-- 表单项壳：label（省略号 + 溢出悬浮提示）只写一处，内部按 type 切换控件 -->
+            <el-form-item :prop="item.value" :label-width="item.labelWidth">
+              <template #label>
+                <el-tooltip
+                  :content="item.label"
+                  :disabled="!labelTip[item.value]"
+                  placement="top"
+                >
+                  <span class="field-label" v-label-tip="item.value">{{
+                    item.label
+                  }}</span>
+                </el-tooltip>
+              </template>
+
+              <!-- 控件：按 type 解析（内置 input/radio/select/editor，或经 registerField 注入的自定义组件；注入与内置重复时覆盖内置）。
+                   v-model 双向绑定字段值，placeholder 统一透传，disabled 及类型特有入参（input 的 type / radio·select 的选项 format / editor 的 disable）经 getControlProps 下发 -->
+              <component
+                v-if="resolveFieldComponent(item.type)"
+                :is="resolveFieldComponent(item.type)"
+                v-model="form[item.value]"
+                :placeholder="item.placeholder"
+                v-bind="getControlProps(item)"
+                @change="(val: any) => onFieldChange(item, val)"
+                @click="(e: any) => onFieldClick(item, e)"
+              />
+            </el-form-item>
+          </el-col>
+        </slot>
+      </template>
+    </el-row>
+  </el-form>
+</template>
+
+<script setup lang="ts">
+// BaseForm 内部的表单渲染：弹窗模式与内嵌模式共用，避免字段模板重复
+import { ref, computed, reactive, nextTick } from "vue";
+import type { Directive } from "vue";
+import { resolveFieldComponent } from "../base/registry";
+
+//=======================数据与对外暴露
+const props = defineProps<{
+  options: any;
+  form: Record<string, any>;
+  rules?: Record<string, any>;
+  optionLists?: Record<string, any>;
+}>();
+
+// 表单实例：提交时由 BaseForm 调 validate / resetFields
+const formRef = ref();
+defineExpose({ formRef });
+
+//=======================标签溢出提示（label 省略号截断，悬浮显示完整内容）
+// 溢出标记：key 为字段 value，超出 label-width 时为 true，才启用 tooltip
+const labelTip = reactive<Record<string, boolean>>({});
+// 溢出检测指令：mounted/updated 时在 nextTick 里测量实际渲染宽度
+const vLabelTip: Directive<HTMLElement, string> = {
+  mounted(el, binding) {
+    measureLabel(el, binding.value);
+  },
+  updated(el, binding) {
+    measureLabel(el, binding.value);
+  },
+};
+function measureLabel(el: HTMLElement, key: string) {
+  nextTick(() => {
+    labelTip[key] = el.scrollWidth > el.clientWidth + 1;
+  });
+}
+
+//=======================字段显隐与布局
+// 字段是否显示：支持布尔或 (formData)=>boolean，缺省 true（false 时移除 DOM、回收空间）
+const getShow = (item: any) => {
+  if (typeof item.show === "function") return item.show(props.form);
+  return item.show !== false;
+};
+
+// 字段是否隐藏（保留布局空间）：支持布尔或 (formData)=>boolean，缺省 false
+const getHidden = (item: any) => {
+  if (typeof item.hidden === "function") return item.hidden(props.form);
+  return !!item.hidden;
+};
+
+// 可见字段列表（show 缺省视为显示；hidden 不影响可见性，仅控制不可见）
+const visibleFields = computed(() =>
+  (props.options?.fields || []).filter((item: any) => getShow(item)),
+);
+
+// 按行跨度换算每行列数：span=12 → 2 列，span=8 → 3 列
+const columnsPerRow = computed(() => {
+  const span = props.options?.config?.span || 12;
+  return Math.max(1, Math.round(24 / span));
+});
+
+// 字段下边距：最后一行（最后 N 个可见字段，N = 每行列数）去掉，其余按配置走
+const getMarginBottom = (item: any) => {
+  if (item.marginBottom) return item.marginBottom;
+  const visible = visibleFields.value;
+  const index = visible.lastIndexOf(item);
+  if (index !== -1 && index >= visible.length - columnsPerRow.value)
+    return null;
+  return props.options?.config?.marginBottom || "15px";
+};
+
+// el-col 样式：合并下边距 + 隐藏（visibility:hidden 保留空间）
+const getColStyle = (item: any) => {
+  const style: Record<string, any> = { marginBottom: getMarginBottom(item) };
+  if (getHidden(item)) style.visibility = "hidden";
+  return style;
+};
+
+//=======================控件入参与事件回调
+// 字段禁用状态：布尔直接取；函数为 (formData) => boolean，缺省 false（不禁用）
+const getDisabled = (item: any) => {
+  if (typeof item.disabled === "function")
+    return item.disabled(props.form) ?? false;
+  return item.disabled ?? false;
+};
+
+// 字段级 params：透传给该字段渲染组件的入参，支持「对象」或「(formData)=>对象」
+// 写成函数时在渲染期求值，读取到的表单字段会被追踪，值变化自动重算（故参数可随表单/变量联动）
+const getFieldParams = (item: any) => {
+  const conf =
+    (typeof item.params === "function"
+      ? item.params(props.form)
+      : item.params) || {};
+  return { ...conf };
+};
+
+// 控件入参：disabled 统一下发；类型特有项（input 的输入框类型 format / radio·select 的选项 format / editor 的 disable）
+// 作为缺省值在前，字段级 params 在后（params 可覆盖缺省项）。
+// radio·select 的 format：函数/Promise 已由 BaseForm 解析进 optionLists（下发数组）；
+// 字符串（字典 code）/数组原样下发，字符串由控件经 BaseForm 注入的 api.dict 自行拉取
+const getControlProps = (item: any) => {
+  const extra: Record<string, any> = { disabled: getDisabled(item) };
+  if (item.type === "input") extra.format = item.format || "text";
+  if (item.type === "radio" || item.type === "select")
+    extra.format = props.optionLists?.[item.value] ?? item.format ?? [];
+  if (item.type === "editor") {
+    extra.disable = extra.disabled; // BaseEditor 的禁用 prop 名为 disable
+    delete extra.disabled;
+  }
+  return { ...extra, ...getFieldParams(item) };
+};
+
+// 字段点击/值变化回调：仅在配置为函数时触发，入参原样透传给 field.click / field.change
+const onFieldClick = (item: any, ...args: any[]) => {
+  if (typeof item.click === "function") item.click(...args);
+};
+const onFieldChange = (item: any, ...args: any[]) => {
+  if (typeof item.change === "function") item.change(...args);
+};
+</script>
+
+<style scoped>
+/* 字段标签：超出 label-width 时省略号截断，完整内容由 tooltip 悬浮展示 */
+.field-label {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  vertical-align: bottom;
+}
+</style>