easybill-ui 1.2.26 → 1.3.1

package/components/CurdForm/src/CurdForm.vue

@@ -1,31 +1,59 @@
 <template>
   <el-form ref="schemaFormRef" :model="formModel" :rules="rules" v-bind="{ ...$attrs, ...getFormProps }" class="curd-form" :style="getFormStyle()" @submit.prevent>
     <template v-for="formItem in schemaItems" :key="formItem.prop">
-      <el-form-item
-        v-if="!$slots[formItem.prop + 'Item']"
-        :required="rules && rules[formItem.prop]?.find((a) => a.hasOwnProperty('required'))?.required"
-        :label="formItem.label"
-        :prop="formItem.prop"
-        :label-width="formItem.labelWidth"
-        :class="getFormItemStyle(formItem)"
-        v-bind="getFormItemProps(formItem)"
-      >
-        <template v-for="(item, key) in getFormItemProps(formItem)?.slots || {}" :key="key" #[key]="row">
-          <component :is="item" v-bind="row" />
-        </template>
-
-        <slot :name="formItem.prop" :form-item="formItem" :form-model="formModel"></slot>
-        <FormItem v-if="!(formItem.prop && $slots[formItem.prop])" :form-item="formItem" :form-model="formModel" @change="onChange">
-          <template #prefix>
-            <slot :name="formItem.prop + 'Prefix'" :form-item="formItem" :form-model="formModel"></slot>
-          </template>
-          <template #suffix>
-            <slot :name="formItem.prop + 'Suffix'" :form-item="formItem" :form-model="formModel"></slot>
+      <!-- choose 类型特殊处理，不使用 el-form-item 包裹，避免嵌套问题 -->
+      <template v-if="formItem.type === 'choose'">
+        <div v-if="!$slots[formItem.prop + 'Item']" class="el-form-item choose-group-wrapper" :class="[getFormItemStyle(formItem), getChooseFormItemClass(formItem)]" :style="getChooseFormItemStyle(formItem)">
+          <!-- label 区域 -->
+          <label v-if="formItem.label" class="el-form-item__label" :style="{ width: getLabelWidth(formItem) }">
+            {{ formItem.label }}
+          </label>
+
+          <!-- content 区域 -->
+          <div class="el-form-item__content" :style="{ marginLeft: getLabelPosition(formItem) !== 'top' ? '' : '' }">
+            <slot :name="formItem.prop" :form-item="formItem" :form-model="formModel"></slot>
+            <FormItem v-if="!(formItem.prop && $slots[formItem.prop])" :form-item="formItem" :form-model="formModel" @change="onChange">
+              <template #prefix>
+                <slot :name="formItem.prop + 'Prefix'" :form-item="formItem" :form-model="formModel"></slot>
+              </template>
+              <template #suffix>
+                <slot :name="formItem.prop + 'Suffix'" :form-item="formItem" :form-model="formModel"></slot>
+              </template>
+            </FormItem>
+            <slot :name="formItem.prop + 'Bottom'" :form-item="formItem" :form-model="formModel"></slot>
+          </div>
+        </div>
+        <slot :name="formItem.prop + 'Item'" :form-item="formItem" :form-model="formModel"></slot>
+      </template>
+
+      <!-- 其他类型使用 el-form-item 包裹 -->
+      <template v-else>
+        <el-form-item
+          v-if="!$slots[formItem.prop + 'Item']"
+          :required="rules && rules[formItem.prop]?.find((a) => a.hasOwnProperty('required'))?.required"
+          :label="formItem.label"
+          :prop="formItem.prop"
+          :label-width="formItem.labelWidth"
+          :class="getFormItemStyle(formItem)"
+          v-bind="getFormItemProps(formItem)"
+        >
+          <template v-for="(item, key) in getFormItemProps(formItem)?.slots || {}" :key="key" #[key]="row">
+            <component :is="item" v-bind="row" />
           </template>
-        </FormItem>
-        <slot :name="formItem.prop + 'Bottom'" :form-item="formItem" :form-model="formModel"></slot>
-      </el-form-item>
-      <slot :name="formItem.prop + 'Item'" :form-item="formItem" :form-model="formModel"></slot>
+
+          <slot :name="formItem.prop" :form-item="formItem" :form-model="formModel"></slot>
+          <FormItem v-if="!(formItem.prop && $slots[formItem.prop])" :form-item="formItem" :form-model="formModel" @change="onChange">
+            <template #prefix>
+              <slot :name="formItem.prop + 'Prefix'" :form-item="formItem" :form-model="formModel"></slot>
+            </template>
+            <template #suffix>
+              <slot :name="formItem.prop + 'Suffix'" :form-item="formItem" :form-model="formModel"></slot>
+            </template>
+          </FormItem>
+          <slot :name="formItem.prop + 'Bottom'" :form-item="formItem" :form-model="formModel"></slot>
+        </el-form-item>
+        <slot :name="formItem.prop + 'Item'" :form-item="formItem" :form-model="formModel"></slot>
+      </template>
     </template>
     <template v-if="$slots['operate-button']">
       <el-form-item style="max-width: 100%">
@@ -36,6 +64,7 @@
 </template>
 
 <script lang="ts" setup>
+import { ElForm, type FormRules } from "element-plus"
 import { computed, getCurrentInstance, onMounted, provide, reactive, ref, triggerRef, watch, type PropType } from "vue"
 import FormItem from "./FormItem.vue"
 import type { CurdFormOptionItem, Fields, FormContext, FormItem as FormItemType, FormSchema } from "./types"
@@ -92,6 +121,21 @@ const schemaValues = sFormSchema.value.formItem.reduce<Fields>((previousValue, c
   if (typeof currentValue.value !== "undefined" && currentValue.prop && (typeof formModel[currentValue.prop] == "undefined" || formModel[currentValue.prop] === "" || formModel[currentValue.prop] === null)) {
     previousValue[currentValue.prop] = currentValue.value
   }
+
+  // 处理 choose 类型 items 的默认值
+  if (currentValue.type === "choose" && currentValue.options) {
+    currentValue.options.forEach((option) => {
+      if (option.items) {
+        option.items.forEach((subItem) => {
+          subItem.eventObject ??= {}
+          if (typeof subItem.value !== "undefined" && subItem.prop && (typeof formModel[subItem.prop] == "undefined" || formModel[subItem.prop] === "" || formModel[subItem.prop] === null)) {
+            previousValue[subItem.prop] = subItem.value
+          }
+        })
+      }
+    })
+  }
+
   return previousValue
 }, {})
 
@@ -114,13 +158,27 @@ const schemaItems = computed(() => {
 })
 // 异步设置默认数据
 sFormSchema.value.formItem.forEach(async (item) => {
-  //
-  // 异步选项
+  // 异步选项 - 顶层表单项
   if (item.asyncOptions && (item.autoload || typeof item.autoload == "undefined") && item.asyncOptions instanceof Function) {
     item.loading = true
     item.options = await item.asyncOptions(formModel, item, curdFormContext).finally(() => (item.loading = false))
     if (!instance?.isUnmounted && item.eventObject?.optionLoaded) item.eventObject.optionLoaded(formModel, item, curdFormContext)
   }
+
+  // 处理 choose 类型的 items 的异步选项
+  if (item.type === "choose" && item.options) {
+    for (const option of item.options) {
+      if (option.items && option.items.length > 0) {
+        for (const subItem of option.items) {
+          if (subItem.asyncOptions && (subItem.autoload || typeof subItem.autoload == "undefined") && subItem.asyncOptions instanceof Function) {
+            subItem.loading = true
+            subItem.options = await subItem.asyncOptions(formModel, subItem, curdFormContext).finally(() => (subItem.loading = false))
+            if (!instance?.isUnmounted && subItem.eventObject?.optionLoaded) subItem.eventObject.optionLoaded(formModel, subItem, curdFormContext)
+          }
+        }
+      }
+    }
+  }
 })
 
 // 生成表单验证规则
@@ -129,23 +187,77 @@ const rules = computed(() => {
   Promise.resolve().then(() => {
     triggerRef(rules)
   })
+  let baseRules: FormRules = {}
   if (typeof sFormSchema.value.rules == "function") {
-    return sFormSchema.value.rules(formModel, curdFormContext)
+    baseRules = sFormSchema.value.rules(formModel, curdFormContext)
+  } else if (typeof sFormSchema.value.getRules == "function") {
+    baseRules = sFormSchema.value.getRules(formModel, curdFormContext)
+  } else {
+    baseRules = sFormSchema.value.rules || {}
   }
-  if (typeof sFormSchema.value.getRules == "function") {
-    return sFormSchema.value.getRules(formModel, curdFormContext)
-  }
-  return sFormSchema.value.rules
+
+  // 合并 choose 类型 items 的验证规则
+  const mergedRules: FormRules = { ...baseRules }
+  sFormSchema.value.formItem.forEach((formItem) => {
+    if (formItem.type === "choose" && formItem.options) {
+      formItem.options.forEach((option) => {
+        if (option.items) {
+          option.items.forEach((subItem) => {
+            if (subItem.prop && subItem.rules) {
+              mergedRules[subItem.prop] = subItem.rules
+            }
+          })
+        }
+      })
+    }
+  })
+
+  return mergedRules
 })
 
+/**
+ * 递归查找表单项
+ * @param prop 表单项的 prop
+ * @returns 找到的表单项对象，包含 parent 信息
+ */
+const findFormItem = (prop: string): { item: FormItemType; parent?: FormItemType; path: string } | undefined => {
+  // 先在顶层查找
+  const topLevelItem = sFormSchema.value.formItem.find((a) => a.prop == prop)
+  if (topLevelItem) {
+    return { item: topLevelItem, path: prop }
+  }
+
+  // 在 choose 类型的 options.items 中递归查找
+  for (const formItem of sFormSchema.value.formItem) {
+    if (formItem.type === "choose" && formItem.options) {
+      for (const option of formItem.options) {
+        if (option.items) {
+          const foundItem = option.items.find((item) => item.prop === prop)
+          if (foundItem) {
+            return { item: foundItem, parent: formItem, path: `${formItem.prop}.${option.value}.${prop}` }
+          }
+        }
+      }
+    }
+  }
+
+  return undefined
+}
+
 // 供外部使用
 const validate = (callback: (valid: boolean) => void) => {
   return schemaFormRef.value?.validate(callback)
 }
 // 调用某个表单项的异步数据接口
 const loadOptions = async (prop: string, option?: unknown) => {
-  const cur: FormItemType | undefined = sFormSchema.value.formItem.find((a) => a.prop == prop)
-  if (cur && cur.asyncOptions && !instance?.isUnmounted) {
+  const result = findFormItem(prop)
+  if (!result) {
+    console.warn(`[CurdForm] loadOptions: 未找到 prop 为 "${prop}" 的表单项`)
+    return []
+  }
+
+  const cur = result.item
+  if (cur.asyncOptions && !instance?.isUnmounted) {
     cur.loading = true
     triggerRef(schemaItems)
     cur.options =
@@ -160,10 +272,13 @@ const loadOptions = async (prop: string, option?: unknown) => {
 }
 // 给某个item赋值options
 const setOptions = async (prop: string, options: CurdFormOptionItem[], option?: unknown) => {
-  const cur = sFormSchema.value.formItem.find((a) => a.prop == prop)
-  if (cur) {
-    cur.options = options
-    if (!instance?.isUnmounted && cur.eventObject?.optionLoaded) cur.eventObject.optionLoaded(formModel, cur, curdFormContext, option)
+  const result = findFormItem(prop)
+  if (result) {
+    result.item.options = options
+    triggerRef(schemaItems)
+    if (!instance?.isUnmounted && result.item.eventObject?.optionLoaded) result.item.eventObject.optionLoaded(formModel, result.item, curdFormContext, option)
+  } else {
+    console.warn(`[CurdForm] setOptions: 未找到 prop 为 "${prop}" 的表单项`)
   }
   // return cur
 }
@@ -179,11 +294,53 @@ const getFormItemProps = (formItem: FormItemType) => {
     if (formItem.formItemProps instanceof Function) {
       return formItem.formItemProps(formModel, formItem)
     }
-    const { slots, ...attrs } = formItem.formItemProps
-    return { ...attrs }
+    return { ...formItem.formItemProps }
   }
   return {}
 }
+
+// 获取表单项的 labelWidth
+const getLabelWidth = (formItem: FormItemType) => {
+  const itemLabelWidth = formItem.labelWidth
+  if (itemLabelWidth !== undefined) {
+    return typeof itemLabelWidth === "number" ? itemLabelWidth + "px" : itemLabelWidth
+  }
+  const formLabelWidth = props.formSchema.labelWidth
+  if (formLabelWidth !== undefined) {
+    return typeof formLabelWidth === "number" ? formLabelWidth + "px" : formLabelWidth
+  }
+  return undefined
+}
+
+// 获取表单项的 labelPosition
+const getLabelPosition = (formItem: FormItemType) => {
+  return formItem.labelPosition || props.formSchema.labelPosition || ""
+}
+
+// 获取 choose 类型的额外样式类
+const getChooseFormItemClass = (_formItem: FormItemType) => {
+  const classes: string[] = []
+  const labelPosition = getLabelPosition(_formItem)
+  if (labelPosition) {
+    classes.push("el-form-item--label-" + labelPosition)
+  }
+  return classes.join(" ")
+}
+
+// 获取 choose 类型的样式
+const getChooseFormItemStyle = (formItem: FormItemType) => {
+  const style: Record<string, string> = {}
+  const labelPosition = getLabelPosition(formItem)
+  if (labelPosition === "top") {
+    // top 模式下不需要额外样式
+  } else {
+    const labelWidth = getLabelWidth(formItem)
+    if (labelWidth) {
+      // 用于让 content 区域正确对齐
+    }
+  }
+  return style
+}
 const getFormStyle = () => {
   const gutter = props.formSchema.gutter
   if (gutter) {
@@ -207,6 +364,7 @@ curdFormContext.loadOptions = loadOptions
 curdFormContext.setOptions = setOptions
 curdFormContext.change = onChange
 curdFormContext.formModel = formModel
+curdFormContext.formSchema = props.formSchema
 
 if (props.extendContext) Object.assign(curdFormContext, props.extendContext)
 
@@ -231,3 +389,58 @@ defineExpose({
   onChange,
 })
 </script>
+
+<style scoped lang="scss">
+// choose 类型容器样式，模拟 el-form-item 布局
+/*
+.choose-group-wrapper {
+  display: flex;
+  align-items: flex-start;
+
+  :deep(.el-form-item__label) {
+    display: inline-flex;
+    justify-content: flex-end;
+    align-items: flex-start;
+    flex-shrink: 0;
+    font-size: var(--el-font-size-base);
+    color: var(--el-text-color-regular);
+    height: 32px;
+    line-height: 32px;
+    padding: 0 12px 0 0;
+    box-sizing: border-box;
+  }
+
+  :deep(.el-form-item__asterisk) {
+    color: var(--el-color-danger);
+    font-size: var(--el-font-size-base);
+    margin-left: 4px;
+  }
+
+  :deep(.el-form-item__content) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    flex: 1;
+    position: relative;
+    font-size: var(--el-font-size-base);
+    min-width: 0;
+  }
+
+  :deep(.top-label) {
+    justify-content: flex-start;
+    padding: 0 0 8px 0;
+    height: auto;
+    line-height: 1.5;
+  }
+
+  // label-top 模式
+  &.el-form-item--label-top {
+    flex-direction: column;
+
+    :deep(.el-form-item__content) {
+      margin-left: 0 !important;
+    }
+  }
+}
+*/
+</style>

package/components/CurdForm/src/components/index.ts

@@ -2,6 +2,7 @@ import { isReactive, isRef, isVNode, type Component, type VNode } from "vue"
 import SchemaFormAutocomplete from "./schema-form-autocomplete.vue"
 import SchemaFormCascader from "./schema-form-cascader.vue"
 import SchemaFormCheckbox from "./schema-form-checkbox.vue"
+import SchemaFormChoose from "./schema-form-choose.vue"
 import SchemaFormColorPicker from "./schema-form-color-picker.vue"
 import SchemaFormDatePicker from "./schema-form-date-picker.vue"
 import SchemaFormInputNumber from "./schema-form-input-number.vue"
@@ -31,6 +32,7 @@ const presetMap: PresetMap = {
   "schema-cascader": SchemaFormCascader,
   "schema-autocomplete": SchemaFormAutocomplete,
   "schema-tree-select": SchemaFormTreeSelect,
+  "schema-choose": SchemaFormChoose,
 }
 
 export default presetMap

package/components/CurdForm/src/components/schema-form-choose.vue

@@ -0,0 +1,225 @@
+<template>
+  <div class="schema-form-choose">
+    <div class="choose-content-wrapper">
+      <div v-if="formItem.loading" class="loading">
+        <el-icon class="is-loading"><Loading /></el-icon> {{ t("el.form.loading") }}
+      </div>
+      <el-radio-group v-else-if="options?.length" v-model="currentValue" :class="[props.props?.showType, chooseGroupClass]" v-bind="props.props" v-on="props.eventObject">
+        <template v-for="(option, index) in options" :key="option.value">
+          <component :is="props?.props?.componentName == 'button' ? 'el-radio-button' : 'el-radio'" :value="option.value" :disabled="option.disabled" :border="option.border" :size="option.size" :style="option.style">
+            <component v-if="option.component" :is="option.component" :row="option" :$index="index" :form-model="formModel" :form-item="formItem" :props="props" />
+            <span v-else-if="option.html" v-html="option.html"></span>
+            <span v-else>{{ option.label }}</span>
+            <FormTooltip v-if="option.tooltip" :tooltip="option.tooltip" :form-item="formItem" :form-model="formModel" />
+          </component>
+        </template>
+      </el-radio-group>
+      <div v-else class="empty">
+        <component :is="empty" v-if="empty" :form-model="formModel" :form-item="formItem" :props="props" />
+        <template v-else>
+          <el-icon><Warning /></el-icon> <span>{{ props.props?.noDataText || t("el.form.nodata") }}</span>
+        </template>
+      </div>
+
+      <!-- 子表单项区域 -->
+      <div class="choose-sub-items-wrapper" :style="wrapperStyle">
+        <div ref="innerRef" class="choose-sub-items" :class="subItemsClass">
+          <template v-for="subItem in displaySubItems" :key="subItem.prop">
+            <el-form-item :prop="subItem.prop" :label="subItem.label" :label-width="subItem.labelWidth" :class="getSubFormItemStyle(subItem)" v-bind="getSubFormItemProps(subItem)">
+              <template v-for="(item, key) in getSubFormItemProps(subItem)?.slots || {}" :key="key" #[key]="row">
+                <component :is="item" v-bind="row" />
+              </template>
+              <FormItem :form-item="subItem" :form-model="formModel" @change="onSubItemChange">
+                <template #prefix>
+                  <slot :name="subItem.prop + 'Prefix'" :form-item="subItem" :form-model="formModel"></slot>
+                </template>
+                <template #suffix>
+                  <slot :name="subItem.prop + 'Suffix'" :form-item="subItem" :form-model="formModel"></slot>
+                </template>
+              </FormItem>
+            </el-form-item>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Loading, Warning } from "@element-plus/icons-vue"
+import { useLocale } from "easybill-ui"
+import { computed, inject, nextTick, onUnmounted, ref, toRaw, watch, type PropType } from "vue"
+import FormItem from "../FormItem.vue"
+import FormTooltip from "../FormTooltip.vue"
+import { FormItemProps, type CurdFormOptionItem, type Fields, type FormContext, type FormItem as FormItemType } from "../types"
+
+const props = defineProps({
+  ...FormItemProps,
+  modelValue: {
+    type: [String, Number, Boolean] as PropType<string | number | boolean | null>,
+    default: null,
+  },
+})
+
+const emit = defineEmits(["update:modelValue"])
+const { t } = useLocale()
+const formContext = inject<FormContext>("curdFormContext")
+
+const chooseGroupClass = computed(() => {
+  return props?.props?.showType || ""
+})
+
+const subItemsClass = computed(() => {
+  return props?.props?.subItemsClass || ""
+})
+
+const currentValue = computed({
+  get: () => props.modelValue,
+  set: (val) => {
+    emit("update:modelValue", val)
+  },
+})
+
+const options = computed(() => {
+  const allOptions: CurdFormOptionItem[] = []
+  if (props.props?.all) {
+    const optionItem: CurdFormOptionItem = { value: "", label: t("el.form.all") }
+    if (typeof props.props.all === "object") {
+      Object.assign(optionItem, props.props.all)
+    }
+    allOptions.push(optionItem)
+  }
+  return [...allOptions, ...(props.formItem.options || [])]
+})
+
+const empty = computed(() => toRaw(props.props?.empty) || "")
+
+const currentOption = computed(() => {
+  if (!currentValue.value) return null
+  return options.value.find((opt) => opt.value === currentValue.value)
+})
+
+// 动画控制状态
+const innerRef = ref<HTMLElement | null>(null)
+const wrapperStyle = ref<Record<string, string>>({})
+const displaySubItems = ref<FormItemType[]>([])
+const isAnimating = ref(false)
+
+// 辅助函数：从父级 schema 中查找指定的表单项
+const findFormItemsByProps = (props: string[]) => {
+  const parentSchema = formContext?.formSchema || { formItem: [] }
+  const allFormItems = parentSchema.formItem || []
+  return allFormItems.filter((item: FormItemType) => props.includes(item.prop))
+}
+
+// 获取当前选项下需要显示的子表单项
+const visibleSubItems = computed(() => {
+  const opt = currentOption.value
+  if (!opt) return []
+
+  if (opt.items?.length) return opt.items
+  if (opt.props?.length) return findFormItemsByProps(opt.props)
+
+  return []
+})
+
+// 更新外层高度
+const updateWrapperHeight = (height: number, animate = true) => {
+  if (animate) {
+    wrapperStyle.value = { height: height + "px" }
+  } else {
+    wrapperStyle.value = { height: height + "px", transition: "none" }
+    nextTick(() => {
+      wrapperStyle.value.transition = ""
+    })
+  }
+}
+
+// 监听选项变化，动态计算高度实现平滑过渡
+watch(
+  visibleSubItems,
+  async (newItems) => {
+    // 获取旧高度
+    const oldHeight = innerRef.value?.scrollHeight || 0
+
+    if (newItems.length > 0) {
+      // 更新内容
+      displaySubItems.value = newItems
+      // 等待 DOM 渲染
+      await nextTick()
+      // 获取新高度
+      const newHeight = innerRef.value?.scrollHeight || 0
+      if (oldHeight !== newHeight) {
+        // 先设置回旧高度（防止跳动）
+        wrapperStyle.value = { height: oldHeight + "px" }
+        isAnimating.value = true
+        // 下一帧设置新高度触发过渡
+        requestAnimationFrame(() => {
+          updateWrapperHeight(newHeight)
+        })
+      } else {
+        updateWrapperHeight(newHeight, false)
+      }
+    } else {
+      // 无内容时收起
+      updateWrapperHeight(0)
+      isAnimating.value = false
+      setTimeout(() => {
+        displaySubItems.value = []
+      }, 300)
+    }
+  },
+  { immediate: true },
+)
+
+// ResizeObserver 监听内层高度变化
+let resizeObserver: ResizeObserver | null = null
+
+watch(innerRef, (el) => {
+  if (el) {
+    resizeObserver = new ResizeObserver((entries) => {
+      // 只在非动画状态且高度变化时更新
+      const newHeight = entries[0]?.contentRect.height
+      if (newHeight !== undefined && !isAnimating.value) {
+        updateWrapperHeight(newHeight, false)
+      }
+    })
+    resizeObserver.observe(el as unknown as Element)
+  }
+})
+
+onUnmounted(() => {
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+  }
+})
+
+// 获取子表单项的额外 props
+const getSubFormItemProps = (subItem: FormItemType) => {
+  if (subItem.formItemProps) {
+    if (subItem.formItemProps instanceof Function) {
+      return subItem.formItemProps(props.formModel, subItem)
+    }
+    return { ...subItem.formItemProps }
+  }
+  return {}
+}
+
+// 获取子表单项的样式类
+const getSubFormItemStyle = (subItem: FormItemType) => {
+  if (!subItem.span) return "el-form-item-full"
+  return "el-form-item-" + subItem.span
+}
+
+// 子表单项变化事件
+const onSubItemChange = (formModel: Fields, formItem: FormItemType) => {
+  // 1. 先执行子表单项自己的 change 事件
+  if (formItem.eventObject?.change) {
+    formItem.eventObject.change(formModel, formItem, formContext!)
+  }
+  // 2. 向上传递到 CurdForm，保持与其他表单项一致
+  if (formContext?.change) {
+    formContext.change(formModel, formItem)
+  }
+}
+</script>

package/components/CurdForm/src/types.ts

@@ -34,6 +34,7 @@ export interface FormItem {
   props?: FormItemPropObject | ((formModel: Fields, formItem: FormItem) => FormItemPropObject)
   formItemProps?: FormItemPropObject | ((formModel: Fields, formItem: FormItem) => void)
   labelWidth?: string | number
+  labelPosition?: "left" | "right" | "top" | string
   span?: number
   disabled?: boolean
   tooltip?: string | ((formModel: Fields, formItem: FormItem) => Partial<TooltipProps> | string) | Partial<TooltipProps>
@@ -43,7 +44,7 @@ export interface FormItem {
   empty?: string | unknown
   sortIndex?: number
 }
-export type FormItemTypeEmun = "input" | "select" | "radio" | "checkbox" | "input-number" | "switch" | "file" | "date-picker" | "time-picker" | "color-picker" | "value" | "tree-select" | "autocomplete"
+export type FormItemTypeEmun = "input" | "select" | "radio" | "checkbox" | "input-number" | "switch" | "file" | "date-picker" | "time-picker" | "color-picker" | "value" | "tree-select" | "autocomplete" | "choose"
 export interface FormItemPropObject extends Fields {
   slots?: Record<string, (props?: FormItemPropObject) => VNode | VNode[] | string | null>
   all?: boolean | CurdFormOptionItem
@@ -74,6 +75,7 @@ export interface FormContext {
   setOptions: (prop: string, options: CurdFormOptionItem[], config?: unknown) => void
   change: (formModel: Fields, formItem: FormItem) => void
   formModel: Fields
+  formSchema: FormSchema
   formRef: InstanceType<typeof ElForm> | undefined
   components: Record<string, unknown>
 }
@@ -85,6 +87,10 @@ export interface CurdFormOptionItem extends OptionItem {
   disabled?: boolean
   type?: string | "radio" | "button"
   rawContent?: boolean
+  /** 引用的表单项 prop 数组，用于 choose 类型 */
+  props?: string[]
+  /** 内联表单项定义，用于 choose 类型 */
+  items?: FormItem[]
 }
 // interface EventObjectDefault {
 //   change?: (formModel: Fields, formItem: FormItem, proxy: any) => void

package/components/CurdGroupForm/index.ts

@@ -0,0 +1,2 @@
+export { default as CurdGroupForm } from "./src/CurdGroupForm.vue"
+export * from "./types"