easybill-ui 1.3.0 → 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "easybill-ui",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A component library for easybill",
   "author": "tuchongyang <779311998@qq.com>",
   "private": false,

package/theme-chalk/curd-form.css

@@ -1 +1 @@
-.curd-form{display:flex;flex-wrap:wrap;position:relative;box-sizing:border-box;min-width:0;align-items:flex-start;margin-left:calc(-1 * var(--curd-form-gutter)/ 2);margin-right:calc(-1 * var(--curd-form-gutter)/ 2)}.curd-form .el-form-item{padding:0 calc(var(--curd-form-gutter)/ 2);box-sizing:border-box}.curd-form .el-form-item .el-form-item__label:before{margin-left:-10px}.curd-form.el-form--inline .el-form-item{flex:0 0 auto}.curd-form .el-form-item-full{flex:0 0 100%}.curd-form .el-form-item-1,.curd-form.el-form--inline .el-form-item-1{flex:0 0 calc(4.1666666667% * 1)}.curd-form .el-form-item-2,.curd-form.el-form--inline .el-form-item-2{flex:0 0 calc(4.1666666667% * 2)}.curd-form .el-form-item-3,.curd-form.el-form--inline .el-form-item-3{flex:0 0 calc(4.1666666667% * 3)}.curd-form .el-form-item-4,.curd-form.el-form--inline .el-form-item-4{flex:0 0 calc(4.1666666667% * 4)}.curd-form .el-form-item-5,.curd-form.el-form--inline .el-form-item-5{flex:0 0 calc(4.1666666667% * 5)}.curd-form .el-form-item-6,.curd-form.el-form--inline .el-form-item-6{flex:0 0 calc(4.1666666667% * 6)}.curd-form .el-form-item-7,.curd-form.el-form--inline .el-form-item-7{flex:0 0 calc(4.1666666667% * 7)}.curd-form .el-form-item-8,.curd-form.el-form--inline .el-form-item-8{flex:0 0 calc(4.1666666667% * 8)}.curd-form .el-form-item-9,.curd-form.el-form--inline .el-form-item-9{flex:0 0 calc(4.1666666667% * 9)}.curd-form .el-form-item-10,.curd-form.el-form--inline .el-form-item-10{flex:0 0 calc(4.1666666667% * 10)}.curd-form .el-form-item-11,.curd-form.el-form--inline .el-form-item-11{flex:0 0 calc(4.1666666667% * 11)}.curd-form .el-form-item-12,.curd-form.el-form--inline .el-form-item-12{flex:0 0 calc(4.1666666667% * 12)}.curd-form .el-form-item-13,.curd-form.el-form--inline .el-form-item-13{flex:0 0 calc(4.1666666667% * 13)}.curd-form .el-form-item-14,.curd-form.el-form--inline .el-form-item-14{flex:0 0 calc(4.1666666667% * 14)}.curd-form .el-form-item-15,.curd-form.el-form--inline .el-form-item-15{flex:0 0 calc(4.1666666667% * 15)}.curd-form .el-form-item-16,.curd-form.el-form--inline .el-form-item-16{flex:0 0 calc(4.1666666667% * 16)}.curd-form .el-form-item-17,.curd-form.el-form--inline .el-form-item-17{flex:0 0 calc(4.1666666667% * 17)}.curd-form .el-form-item-18,.curd-form.el-form--inline .el-form-item-18{flex:0 0 calc(4.1666666667% * 18)}.curd-form .el-form-item-19,.curd-form.el-form--inline .el-form-item-19{flex:0 0 calc(4.1666666667% * 19)}.curd-form .el-form-item-20,.curd-form.el-form--inline .el-form-item-20{flex:0 0 calc(4.1666666667% * 20)}.curd-form .el-form-item-21,.curd-form.el-form--inline .el-form-item-21{flex:0 0 calc(4.1666666667% * 21)}.curd-form .el-form-item-22,.curd-form.el-form--inline .el-form-item-22{flex:0 0 calc(4.1666666667% * 22)}.curd-form .el-form-item-23,.curd-form.el-form--inline .el-form-item-23{flex:0 0 calc(4.1666666667% * 23)}.curd-form .el-form-item-24,.curd-form.el-form--inline .el-form-item-24{flex:0 0 calc(4.1666666667% * 24)}.curd-form .form-item{width:100%;display:flex;min-width:0}.curd-form .form-item .tooltip{color:var(--el-button-text-color);margin-left:10px;vertical-align:middle;color:var(--el-text-color-secondary)}.curd-form .form-item .tooltip:hover{color:var(--color-primary)}.curd-form .form-item .empty{color:var(--el-text-color-secondary)}.curd-form .schema-form-radio .el-radio-group{vertical-align:top}.curd-form .schema-tree-select{width:100%}.curd-form .el-checkbox-group.single .el-checkbox-button+.el-checkbox-button{margin-left:10px}.curd-form .el-checkbox-group.single .el-checkbox-button .el-checkbox-button__inner{border:var(--el-border);border-radius:var(--el-border-radius-base);padding-left:20px;padding-right:20px}.curd-form .el-checkbox-group.single .el-checkbox-button.is-checked .el-checkbox-button__inner{border-color:var(--el-checkbox-button-checked-border-color)}.curd-form .tooltip{color:var(--el-button-text-color);margin-left:10px;vertical-align:middle}.schema-form-select-check{height:25px;margin-left:20px;margin-top:10px;display:block}.schema-form-select-check :deep(.el-checkbox__input){vertical-align:middle}
+.curd-form{display:flex;flex-wrap:wrap;position:relative;box-sizing:border-box;min-width:0;align-items:flex-start;margin-left:calc(-1 * var(--curd-form-gutter)/ 2);margin-right:calc(-1 * var(--curd-form-gutter)/ 2)}.curd-form .el-form-item{padding:0 calc(var(--curd-form-gutter)/ 2);box-sizing:border-box}.curd-form .el-form-item .el-form-item__label:before{margin-left:-10px}.curd-form.el-form--inline .el-form-item{flex:0 0 auto}.curd-form .el-form-item-full{flex:0 0 100%}.curd-form .el-form-item-1,.curd-form.el-form--inline .el-form-item-1{flex:0 0 calc(4.1666666667% * 1)}.curd-form .el-form-item-2,.curd-form.el-form--inline .el-form-item-2{flex:0 0 calc(4.1666666667% * 2)}.curd-form .el-form-item-3,.curd-form.el-form--inline .el-form-item-3{flex:0 0 calc(4.1666666667% * 3)}.curd-form .el-form-item-4,.curd-form.el-form--inline .el-form-item-4{flex:0 0 calc(4.1666666667% * 4)}.curd-form .el-form-item-5,.curd-form.el-form--inline .el-form-item-5{flex:0 0 calc(4.1666666667% * 5)}.curd-form .el-form-item-6,.curd-form.el-form--inline .el-form-item-6{flex:0 0 calc(4.1666666667% * 6)}.curd-form .el-form-item-7,.curd-form.el-form--inline .el-form-item-7{flex:0 0 calc(4.1666666667% * 7)}.curd-form .el-form-item-8,.curd-form.el-form--inline .el-form-item-8{flex:0 0 calc(4.1666666667% * 8)}.curd-form .el-form-item-9,.curd-form.el-form--inline .el-form-item-9{flex:0 0 calc(4.1666666667% * 9)}.curd-form .el-form-item-10,.curd-form.el-form--inline .el-form-item-10{flex:0 0 calc(4.1666666667% * 10)}.curd-form .el-form-item-11,.curd-form.el-form--inline .el-form-item-11{flex:0 0 calc(4.1666666667% * 11)}.curd-form .el-form-item-12,.curd-form.el-form--inline .el-form-item-12{flex:0 0 calc(4.1666666667% * 12)}.curd-form .el-form-item-13,.curd-form.el-form--inline .el-form-item-13{flex:0 0 calc(4.1666666667% * 13)}.curd-form .el-form-item-14,.curd-form.el-form--inline .el-form-item-14{flex:0 0 calc(4.1666666667% * 14)}.curd-form .el-form-item-15,.curd-form.el-form--inline .el-form-item-15{flex:0 0 calc(4.1666666667% * 15)}.curd-form .el-form-item-16,.curd-form.el-form--inline .el-form-item-16{flex:0 0 calc(4.1666666667% * 16)}.curd-form .el-form-item-17,.curd-form.el-form--inline .el-form-item-17{flex:0 0 calc(4.1666666667% * 17)}.curd-form .el-form-item-18,.curd-form.el-form--inline .el-form-item-18{flex:0 0 calc(4.1666666667% * 18)}.curd-form .el-form-item-19,.curd-form.el-form--inline .el-form-item-19{flex:0 0 calc(4.1666666667% * 19)}.curd-form .el-form-item-20,.curd-form.el-form--inline .el-form-item-20{flex:0 0 calc(4.1666666667% * 20)}.curd-form .el-form-item-21,.curd-form.el-form--inline .el-form-item-21{flex:0 0 calc(4.1666666667% * 21)}.curd-form .el-form-item-22,.curd-form.el-form--inline .el-form-item-22{flex:0 0 calc(4.1666666667% * 22)}.curd-form .el-form-item-23,.curd-form.el-form--inline .el-form-item-23{flex:0 0 calc(4.1666666667% * 23)}.curd-form .el-form-item-24,.curd-form.el-form--inline .el-form-item-24{flex:0 0 calc(4.1666666667% * 24)}.curd-form .form-item{width:100%;display:flex;min-width:0}.curd-form .form-item .tooltip{color:var(--el-button-text-color);margin-left:10px;vertical-align:middle;color:var(--el-text-color-secondary)}.curd-form .form-item .tooltip:hover{color:var(--color-primary)}.curd-form .form-item .empty{color:var(--el-text-color-secondary)}.curd-form .schema-form-radio .el-radio-group{vertical-align:top}.curd-form .schema-tree-select{width:100%}.curd-form .el-checkbox-group.single .el-checkbox-button+.el-checkbox-button{margin-left:10px}.curd-form .el-checkbox-group.single .el-checkbox-button .el-checkbox-button__inner{border:var(--el-border);border-radius:var(--el-border-radius-base);padding-left:20px;padding-right:20px}.curd-form .el-checkbox-group.single .el-checkbox-button.is-checked .el-checkbox-button__inner{border-color:var(--el-checkbox-button-checked-border-color)}.curd-form .tooltip{color:var(--el-button-text-color);margin-left:10px;vertical-align:middle}.schema-form-select-check{height:25px;margin-left:20px;margin-top:10px;display:block}.schema-form-select-check :deep(.el-checkbox__input){vertical-align:middle}.schema-form-choose{width:100%}.schema-form-choose .choose-content-wrapper{width:100%}.schema-form-choose .choose-content-wrapper .choose-sub-items-wrapper{overflow:hidden;transition:height .3s ease-out}.schema-form-choose .choose-content-wrapper .choose-sub-items{padding-top:12px;padding-bottom:1px;overflow:hidden}.schema-form-choose .choose-content-wrapper .choose-sub-items .el-form-item{margin-bottom:18px}.schema-form-choose .choose-content-wrapper .choose-sub-items .el-form-item:last-child{margin-bottom:0}.schema-form-choose .empty,.schema-form-choose .loading{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 0;color:var(--el-text-color-secondary)}

package/theme-chalk/index.css

@@ -1 +1 @@
-.constant-status{--el-tag-border-opacity:1;--el-tag-bg-opacity:1;--el-tag-font-size:var(--el-font-size-base)}.constant-status .el-tag__content{display:flex;align-items:center;line-height:1}.constant-status .el-icon,.constant-status .name{vertical-align:top;line-height:1}.constant-status .dot{width:5px;height:5px;display:inline-block;vertical-align:middle;border-radius:50%;background:var(--el-tag-text-color);margin-right:5px}.constant-status.no-border{padding:0}.constant-status.dot-status{padding:0}.constant-status.dot-status .name{color:var(--el-text-color-primary)}.constant-status.el-tag--default{padding:0;--el-tag-bg-color:transparent;--el-tag-border-color:transparent;--el-tag-hover-color:var(--el-text-color-primary);--el-tag-text-color:var(--el-text-color-primary)}.constant-status.el-tag--blue{--el-tag-bg-color:rgba(236, 245, 255, var(--el-tag-bg-color));--el-tag-border-color:rgba(217, 236, 255, var(--el-tag-border-color));--el-tag-hover-color:rgba(111, 122, 175, 1);--el-tag-text-color:rgba(111, 122, 175, 1)}.constant-status.el-tag--blue.el-tag--dark{--el-tag-bg-color:rgba(111, 122, 175, 1);--el-tag-border-color:rgba(111, 122, 175, 1);--el-tag-hover-color:rgba(111, 122, 175, 0.8);--el-tag-text-color:#fff}.constant-status.el-tag--blue.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.el-tag--yellow{--el-tag-bg-color:rgba(255, 251, 230, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(255, 229, 143, var(--el-tag-borer-opacity));--el-tag-hover-color:rgba(212, 136, 6, 1);--el-tag-text-color:rgba(212, 136, 6, 1)}.constant-status.el-tag--yellow.el-tag--dark{--el-tag-bg-color:rgba(212, 136, 6, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(212, 136, 6, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(212, 136, 6, 1);--el-tag-text-color:#fff}.constant-status.el-tag--yellow.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.el-tag--blue-dark{--el-tag-bg-color:rgba(240, 245, 255, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(173, 198, 255, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(29, 57, 196, 1);--el-tag-text-color:rgba(29, 57, 196, 1)}.constant-status.el-tag--blue-dark.el-tag--dark{--el-tag-bg-color:rgba(29, 57, 196, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(29, 57, 196, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(29, 57, 196, 1);--el-tag-text-color:#fff}.constant-status.el-tag--blue-dark.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.el-tag--red-purple{--el-tag-bg-color:rgba(251, 243, 248, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(227, 206, 219, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(191, 117, 163, 1);--el-tag-text-color:rgba(191, 117, 163, 1)}.constant-status.el-tag--red-purple.el-tag--dark{--el-tag-bg-color:rgba(191, 117, 163, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(191, 117, 163, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(191, 117, 163, 1);--el-tag-text-color:#fff}.constant-status.el-tag--red-purple.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.el-tag--blueness{--el-tag-bg-color:rgba(243, 250, 251, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(194, 213, 221, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(99, 150, 177, 1);--el-tag-text-color:rgba(99, 150, 177, 1)}.constant-status.el-tag--blueness.el-tag--dark{--el-tag-bg-color:rgba(99, 150, 177, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(99, 150, 177, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(99, 150, 177, 1);--el-tag-text-color:#fff}.constant-status.el-tag--blueness.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.no-border{border:0!important;background:0 0}.curd-form{display:flex;flex-wrap:wrap;position:relative;box-sizing:border-box;min-width:0;align-items:flex-start;margin-left:calc(-1 * var(--curd-form-gutter)/ 2);margin-right:calc(-1 * var(--curd-form-gutter)/ 2)}.curd-form .el-form-item{padding:0 calc(var(--curd-form-gutter)/ 2);box-sizing:border-box}.curd-form .el-form-item .el-form-item__label:before{margin-left:-10px}.curd-form.el-form--inline .el-form-item{flex:0 0 auto}.curd-form .el-form-item-full{flex:0 0 100%}.curd-form .el-form-item-1,.curd-form.el-form--inline .el-form-item-1{flex:0 0 calc(4.1666666667% * 1)}.curd-form .el-form-item-2,.curd-form.el-form--inline .el-form-item-2{flex:0 0 calc(4.1666666667% * 2)}.curd-form .el-form-item-3,.curd-form.el-form--inline .el-form-item-3{flex:0 0 calc(4.1666666667% * 3)}.curd-form .el-form-item-4,.curd-form.el-form--inline .el-form-item-4{flex:0 0 calc(4.1666666667% * 4)}.curd-form .el-form-item-5,.curd-form.el-form--inline .el-form-item-5{flex:0 0 calc(4.1666666667% * 5)}.curd-form .el-form-item-6,.curd-form.el-form--inline .el-form-item-6{flex:0 0 calc(4.1666666667% * 6)}.curd-form .el-form-item-7,.curd-form.el-form--inline .el-form-item-7{flex:0 0 calc(4.1666666667% * 7)}.curd-form .el-form-item-8,.curd-form.el-form--inline .el-form-item-8{flex:0 0 calc(4.1666666667% * 8)}.curd-form .el-form-item-9,.curd-form.el-form--inline .el-form-item-9{flex:0 0 calc(4.1666666667% * 9)}.curd-form .el-form-item-10,.curd-form.el-form--inline .el-form-item-10{flex:0 0 calc(4.1666666667% * 10)}.curd-form .el-form-item-11,.curd-form.el-form--inline .el-form-item-11{flex:0 0 calc(4.1666666667% * 11)}.curd-form .el-form-item-12,.curd-form.el-form--inline .el-form-item-12{flex:0 0 calc(4.1666666667% * 12)}.curd-form .el-form-item-13,.curd-form.el-form--inline .el-form-item-13{flex:0 0 calc(4.1666666667% * 13)}.curd-form .el-form-item-14,.curd-form.el-form--inline .el-form-item-14{flex:0 0 calc(4.1666666667% * 14)}.curd-form .el-form-item-15,.curd-form.el-form--inline .el-form-item-15{flex:0 0 calc(4.1666666667% * 15)}.curd-form .el-form-item-16,.curd-form.el-form--inline .el-form-item-16{flex:0 0 calc(4.1666666667% * 16)}.curd-form .el-form-item-17,.curd-form.el-form--inline .el-form-item-17{flex:0 0 calc(4.1666666667% * 17)}.curd-form .el-form-item-18,.curd-form.el-form--inline .el-form-item-18{flex:0 0 calc(4.1666666667% * 18)}.curd-form .el-form-item-19,.curd-form.el-form--inline .el-form-item-19{flex:0 0 calc(4.1666666667% * 19)}.curd-form .el-form-item-20,.curd-form.el-form--inline .el-form-item-20{flex:0 0 calc(4.1666666667% * 20)}.curd-form .el-form-item-21,.curd-form.el-form--inline .el-form-item-21{flex:0 0 calc(4.1666666667% * 21)}.curd-form .el-form-item-22,.curd-form.el-form--inline .el-form-item-22{flex:0 0 calc(4.1666666667% * 22)}.curd-form .el-form-item-23,.curd-form.el-form--inline .el-form-item-23{flex:0 0 calc(4.1666666667% * 23)}.curd-form .el-form-item-24,.curd-form.el-form--inline .el-form-item-24{flex:0 0 calc(4.1666666667% * 24)}.curd-form .form-item{width:100%;display:flex;min-width:0}.curd-form .form-item .tooltip{color:var(--el-button-text-color);margin-left:10px;vertical-align:middle;color:var(--el-text-color-secondary)}.curd-form .form-item .tooltip:hover{color:var(--color-primary)}.curd-form .form-item .empty{color:var(--el-text-color-secondary)}.curd-form .schema-form-radio .el-radio-group{vertical-align:top}.curd-form .schema-tree-select{width:100%}.curd-form .el-checkbox-group.single .el-checkbox-button+.el-checkbox-button{margin-left:10px}.curd-form .el-checkbox-group.single .el-checkbox-button .el-checkbox-button__inner{border:var(--el-border);border-radius:var(--el-border-radius-base);padding-left:20px;padding-right:20px}.curd-form .el-checkbox-group.single .el-checkbox-button.is-checked .el-checkbox-button__inner{border-color:var(--el-checkbox-button-checked-border-color)}.curd-form .tooltip{color:var(--el-button-text-color);margin-left:10px;vertical-align:middle}.schema-form-select-check{height:25px;margin-left:20px;margin-top:10px;display:block}.schema-form-select-check :deep(.el-checkbox__input){vertical-align:middle}.table-container .table-pager{margin:15px 0;display:flex;justify-content:space-between;align-items:center}.table-container .table-pager .pagination{justify-content:end;font-weight:400}.table-container .table-control{display:flex;justify-content:space-between;padding-bottom:10px;align-items:flex-end}.table-container .table-control .min-control>.el-button{margin-right:10px}.table-container .s-table-filter .el-form--inline .el-form-item{margin-right:15px}.table-container .el-button+.dropdown-item{margin-left:10px}.table-container .copy{cursor:pointer;margin-right:3px}.table-container .header-td{display:inline-flex;align-items:center;word-break:break-word}.table-container .header-td.center{justify-content:center}.table-container .header-td.right{justify-content:flex-end}.table-container .filter-dropdown-toggle{display:inline-block;line-height:1;cursor:pointer;position:relative;margin-left:3px}.table-container .filter-dropdown-toggle.active{color:var(--el-color-primary)}.table-container .table-menu{display:inline-block;vertical-align:middle;position:relative}.table-container .table-menu .table-menu-item{color:var(--el-button-text-color);font-size:14px;border-radius:4px;border:1px solid var(--el-button-border-color);padding:0;height:28px;width:28px;vertical-align:top;vertical-align:middle}.table-container .table-menu .table-menu-item:not(.is-disabled):active,.table-container .table-menu .table-menu-item:not(.is-disabled):focus{border-color:var(--el-button-border-color)}.table-container .table-menu .table-menu-item+.table-menu-item{margin-left:3px}.table-container .table-menu .table-menu-item:hover{background-color:var(--el-fill-color-light);border-color:var(--el-button-border-color)}.table-container .table-menu .current-size{color:var(--el-color-primary)}.table-container .simple-page{padding:20px 0;text-align:right}.table-container .simple-page>span{margin:0 10px}.curd-table-dropdown-menu .el-dropdown-menu__item{padding:0}.curd-table-dropdown-menu .el-dropdown-menu__item:hover{background-color:var(--el-fill-color-light)}.curd-table-dropdown-menu .el-dropdown-menu__item .el-button{display:block;padding:5px 16px;flex:1;text-align:left;font-size:12px}.table-main-filter-dropdown{padding:0}.table-main-filter-dropdown .search{position:relative;margin-bottom:5px}.table-main-filter-dropdown .search input{outline:0;border:0;width:100%;padding:5px 10px;background:#f4f4f4}.table-main-filter-dropdown .search .icon-suffix{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.table-main-filter-dropdown .search .icon-close1{position:absolute;right:30px;top:50%;transform:translateY(-50%);cursor:pointer;opacity:.7}.table-main-filter-dropdown .search .icon-close1:hover{opacity:1;color:#444}.table-main-filter-dropdown .select li{line-height:30px;padding:0 20px;list-style:none;cursor:pointer}.table-main-filter-dropdown .select li:hover{background:#f4f4f4}.table-main-filter-dropdown .select li.active{color:var(--el-color-primary)}.filter-type-popper{width:auto!important;min-width:0!important;padding:0!important;box-shadow:none!important}.table-filter{display:flex;flex-direction:column;position:relative}.table-filter .filter-search-box{min-height:32px;border-width:1px;border-style:solid;border-color:var(--el-border-color);display:flex;min-width:460px;align-items:center;justify-items:center;justify-content:space-between;overflow:hidden;border-radius:var(--el-border-radius-base);transition:all .3s}.table-filter .filter-search-box.is-focus{border-color:var(--el-color-primary)}.table-filter .filter-search-box .filter-action{height:32px;line-height:32px;align-self:flex-end;display:flex}.table-filter .filter-search-box .filter-action div{cursor:pointer}.table-filter .filter-search-box .filter-action .empty{color:var(--el-color-info);margin-right:15px;padding-left:10px}.table-filter .filter-search-box .filter-action .empty:hover{color:var(--el-color-primary)}.table-filter .filter-search-box .filter-action .search{padding:0 20px;text-align:center;position:relative;display:flex;align-items:center}.table-filter .filter-search-box .filter-action .search:before{content:"";display:block;width:1px;height:20px;background:var(--el-border-color);position:absolute;left:0;top:50%;transform:translateY(-50%)}.table-filter .filter-search-box .filter-action .search:hover{color:var(--el-color-primary)}.table-filter .filter-external .el-form-item{margin-bottom:10px}.table-filter .filter-tags{height:100%;flex-wrap:wrap;display:flex;flex:1;align-items:flex-start;justify-items:center}.table-filter .filter-tags .tag-title{font-size:12px;color:var(--el-text-color-placeholder);height:24px;line-height:24px;margin:0 15px 5px 0}.table-filter .filter-tags .dropdown-toggle{white-space:nowrap;display:flex;align-items:center;justify-items:center;font-size:12px}.table-filter .filter-tags .tag-list{flex:1;display:flex;flex-wrap:wrap}.table-filter .filter-tags .tag-item{height:24px;line-height:24px;white-space:nowrap;display:flex;align-items:center;justify-items:center;padding:0 10px;color:var(--el-color-info-dark-2);background:var(--el-color-info-light-9);font-size:12px;border-radius:var(--el-border-radius-base);margin-right:5px;margin-bottom:10px;cursor:pointer}.table-filter .filter-tags .tag-item .action{color:var(--el-color-info-light-5);text-align:center;width:14px;height:14px;line-height:14px;border-radius:50%;margin-left:10px;font-size:14px;cursor:pointer}.table-filter .filter-tags .tag-item .action:hover{color:var(--el-color-primary)}.table-filter .tag-clear{margin-bottom:2px;margin-left:10px}.table-filter .filter-item .el-form-item{margin:0}.table-filter .filter-item .el-form-item__label{display:none}.table-filter .filter-item .el-input{--el-input-border:none;--el-input-border-color:transparent;--el-input-focus-border-color:transparent;--el-input-hover-border-color:transparent}.table-filter .filter-item .el-select{--el-select-border-color-hover:transparent;--el-select-input-focus-border-color:transparent}.table-filter .filter-item .el-select__wrapper{box-shadow:none}.table-filter-type{box-shadow:var(--el-box-shadow-light);background:var(--el-bg-color);z-index:3060;min-width:150px;max-height:300px;overflow:hidden;--el-font-size-base:12px}.table-filter-type .base-select{--el-font-size-base:12px;height:100%;max-height:300px;display:flex;flex-direction:column}.table-filter-type .base-select .remote-input{width:100%}.table-filter-type .base-select .remote-input .el-input{--el-input-border-radius:0;--el-input-bg-color:var(--el-bg-color-page);--el-input-border:none;--el-input-hover-border-color:transparent;--el-input-focus-border-color:var(--el-border-color)}.table-filter-type .base-select .el-empty__image svg{height:50px}.table-filter-type .base-select .select-spinner{flex:1;position:relative;overflow-y:auto}.table-filter-type .base-select .select-spinner ul{margin:0;padding:0}.table-filter-type .base-select .select-spinner ul li{list-style:none;padding:6px 10px;cursor:pointer;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;font-size:var(--el-font-size-base)}.table-filter-type .base-select .select-spinner ul li.active{color:var(--el-color-primary)}.table-filter-type .base-select .select-spinner ul li:hover{background:var(--el-color-primary-light-9);color:var(--el-color-primary)}.table-filter-toggle{padding:0 10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-width:120px;font-size:12px}.table-filter-toggle .current-filter-label{margin-right:20px}.table-filter-List{box-shadow:0 2px 8px 0 rgba(0,0,0,.2);background:var(--el-bg-color);z-index:3060;border-radius:2px;max-height:300px;overflow-y:auto;font-size:12px}.table-filter-List ul{width:100%;margin:0;padding:0}.table-filter-List ul li{width:100%;list-style:none;padding:6px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;cursor:pointer}.table-filter-List ul li:hover{background:var(--el-color-primary-light-9);color:var(--el-color-primary)}.table-filter-List ul li.active{color:var(--el-color-primary);font-weight:600}.table-filter-tag-popper{max-height:400px;overflow:auto;padding:0!important;width:250px!important}.table-filter-tag-popper .base-select{--el-font-size-base:12px;height:100%;max-height:300px;display:flex;flex-direction:column}.table-filter-tag-popper .base-select .remote-input{width:100%}.table-filter-tag-popper .base-select .remote-input :deep(.el-input){--el-input-border-radius:0;--el-input-bg-color:var(--el-bg-color-page);--el-input-border:none;--el-input-hover-border-color:transparent;--el-input-focus-border-color:var(--el-border-color)}.table-filter-tag-popper .base-select :deep(.el-empty__imagesvg){height:50px}.table-filter-tag-popper .base-select .select-spinner{flex:1;position:relative;overflow-y:auto}.table-filter-tag-popper .base-select .select-spinner ul{margin:0;padding:0}.table-filter-tag-popper .base-select .select-spinner ul li{list-style:none;padding:6px 10px;cursor:pointer;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--el-font-size-base);box-sizing:border-box}.table-filter-tag-popper .base-select .select-spinner ul li.active{color:var(--el-color-primary)}.table-filter-tag-popper .base-select .select-spinner ul li:hover{background:var(--el-color-primary-light-9);color:var(--el-color-primary)}.detail-info{flex:1}.detail-info .detail-info-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.detail-info .title{border-left:3px solid var(--el-color-primary);padding-left:10px;line-height:1.2}.detail-info+.detail-info{margin-top:30px}.detail-info.card{background:var(--el-bg-color);border-radius:0;opacity:1;border:1px solid var(--el-border-color)}.detail-info.card[shadow]{box-shadow:var(--el-box-shadow-lighter)}.detail-info.card .detail-info-header{height:50px;border-bottom:1px solid var(--el-border-color);margin:0;padding:0 20px}.detail-info.card .detail-info-header .title{border-left:0;padding:0}.detail-info.card .detail-info-body{padding:10px 20px 20px 20px;margin:0}.detail-info .detail-info-body{display:flex;flex-wrap:wrap;position:relative;box-sizing:border-box}.detail-info .detail-info-body:not(.table){margin-left:-calc(var(--gutter)/2);margin-right:-calc(var(--gutter)/2)}.detail-info .detail-info-body .table-detail-col{box-sizing:border-box}.detail-info .detail-info-body .item-col{line-height:20px;height:100%;box-sizing:border-box;display:flex}.detail-info .detail-info-body .item-col.item-col-top{flex-direction:column}.detail-info .detail-info-body .item-col.item-col-top .det{padding:0}.detail-info .detail-info-body .item-col .label{padding:4px 0;color:var(--el-text-color-secondary);box-sizing:border-box;vertical-align:middle;float:left;display:flex;align-items:center}.detail-info .detail-info-body .item-col .det{flex:1;padding:4px 10px;box-sizing:border-box;min-height:20px;height:100%;word-break:break-all;overflow:hidden}.detail-info .detail-info-body.table{border-top:1px solid var(--el-border-color);border-left:1px solid var(--el-border-color)}.detail-info .detail-info-body.table .table-detail-col{padding:0!important;border-bottom:1px solid var(--el-border-color);border-right:1px solid var(--el-border-color)}.detail-info .detail-info-body.table .item-col{background:var(--el-fill-color-light);border:1px solid var(--el-bg-color)}.detail-info .detail-info-body.table .item-col .label{padding-left:10px;padding-right:10px;width:100px}.detail-info .detail-info-body.table .item-col .det{border-left:1px solid var(--el-border-color);background-color:var(--el-bg-color)}.curdform-group{background-color:var(--el-bg-color);width:100%;margin:10px auto;border-radius:var(--el-border-radius-base)}.curdform-group .curdform-group-head{padding:15px 28px 5px;margin-bottom:10px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center}.curdform-group .curdform-group-head+.curdform-group-desc{margin-top:-10px}.curdform-group .curdform-group-head+.curdform-group-body{padding-top:0}.curdform-group .curdform-group-head .left{display:flex;align-items:center;gap:10px}.curdform-group .curdform-group-head .left .icon{background:#f3f4f6;border-radius:50%;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;color:#9ca3af}.curdform-group .curdform-group-head .left .icon i{font-size:22px}.curdform-group .curdform-group-head .left .title{font-size:calc(var(--el-font-size-base) + 2px);font-weight:700}.curdform-group .curdform-group-desc{font-size:var(--el-font-size-base);color:var(--el-text-color-secondary);margin:0 28px}.curdform-group .curdform-group-body{padding:18px 28px 10px}
+.constant-status{--el-tag-border-opacity:1;--el-tag-bg-opacity:1;--el-tag-font-size:var(--el-font-size-base)}.constant-status .el-tag__content{display:flex;align-items:center;line-height:1}.constant-status .el-icon,.constant-status .name{vertical-align:top;line-height:1}.constant-status .dot{width:5px;height:5px;display:inline-block;vertical-align:middle;border-radius:50%;background:var(--el-tag-text-color);margin-right:5px}.constant-status.no-border{padding:0}.constant-status.dot-status{padding:0}.constant-status.dot-status .name{color:var(--el-text-color-primary)}.constant-status.el-tag--default{padding:0;--el-tag-bg-color:transparent;--el-tag-border-color:transparent;--el-tag-hover-color:var(--el-text-color-primary);--el-tag-text-color:var(--el-text-color-primary)}.constant-status.el-tag--blue{--el-tag-bg-color:rgba(236, 245, 255, var(--el-tag-bg-color));--el-tag-border-color:rgba(217, 236, 255, var(--el-tag-border-color));--el-tag-hover-color:rgba(111, 122, 175, 1);--el-tag-text-color:rgba(111, 122, 175, 1)}.constant-status.el-tag--blue.el-tag--dark{--el-tag-bg-color:rgba(111, 122, 175, 1);--el-tag-border-color:rgba(111, 122, 175, 1);--el-tag-hover-color:rgba(111, 122, 175, 0.8);--el-tag-text-color:#fff}.constant-status.el-tag--blue.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.el-tag--yellow{--el-tag-bg-color:rgba(255, 251, 230, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(255, 229, 143, var(--el-tag-borer-opacity));--el-tag-hover-color:rgba(212, 136, 6, 1);--el-tag-text-color:rgba(212, 136, 6, 1)}.constant-status.el-tag--yellow.el-tag--dark{--el-tag-bg-color:rgba(212, 136, 6, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(212, 136, 6, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(212, 136, 6, 1);--el-tag-text-color:#fff}.constant-status.el-tag--yellow.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.el-tag--blue-dark{--el-tag-bg-color:rgba(240, 245, 255, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(173, 198, 255, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(29, 57, 196, 1);--el-tag-text-color:rgba(29, 57, 196, 1)}.constant-status.el-tag--blue-dark.el-tag--dark{--el-tag-bg-color:rgba(29, 57, 196, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(29, 57, 196, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(29, 57, 196, 1);--el-tag-text-color:#fff}.constant-status.el-tag--blue-dark.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.el-tag--red-purple{--el-tag-bg-color:rgba(251, 243, 248, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(227, 206, 219, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(191, 117, 163, 1);--el-tag-text-color:rgba(191, 117, 163, 1)}.constant-status.el-tag--red-purple.el-tag--dark{--el-tag-bg-color:rgba(191, 117, 163, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(191, 117, 163, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(191, 117, 163, 1);--el-tag-text-color:#fff}.constant-status.el-tag--red-purple.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.el-tag--blueness{--el-tag-bg-color:rgba(243, 250, 251, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(194, 213, 221, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(99, 150, 177, 1);--el-tag-text-color:rgba(99, 150, 177, 1)}.constant-status.el-tag--blueness.el-tag--dark{--el-tag-bg-color:rgba(99, 150, 177, var(--el-tag-bg-opacity));--el-tag-border-color:rgba(99, 150, 177, var(--el-tag-border-opacity));--el-tag-hover-color:rgba(99, 150, 177, 1);--el-tag-text-color:#fff}.constant-status.el-tag--blueness.el-tag--plain{--el-tag-bg-color:var(--el-fill-color-blank)}.constant-status.no-border{border:0!important;background:0 0}.curd-form{display:flex;flex-wrap:wrap;position:relative;box-sizing:border-box;min-width:0;align-items:flex-start;margin-left:calc(-1 * var(--curd-form-gutter)/ 2);margin-right:calc(-1 * var(--curd-form-gutter)/ 2)}.curd-form .el-form-item{padding:0 calc(var(--curd-form-gutter)/ 2);box-sizing:border-box}.curd-form .el-form-item .el-form-item__label:before{margin-left:-10px}.curd-form.el-form--inline .el-form-item{flex:0 0 auto}.curd-form .el-form-item-full{flex:0 0 100%}.curd-form .el-form-item-1,.curd-form.el-form--inline .el-form-item-1{flex:0 0 calc(4.1666666667% * 1)}.curd-form .el-form-item-2,.curd-form.el-form--inline .el-form-item-2{flex:0 0 calc(4.1666666667% * 2)}.curd-form .el-form-item-3,.curd-form.el-form--inline .el-form-item-3{flex:0 0 calc(4.1666666667% * 3)}.curd-form .el-form-item-4,.curd-form.el-form--inline .el-form-item-4{flex:0 0 calc(4.1666666667% * 4)}.curd-form .el-form-item-5,.curd-form.el-form--inline .el-form-item-5{flex:0 0 calc(4.1666666667% * 5)}.curd-form .el-form-item-6,.curd-form.el-form--inline .el-form-item-6{flex:0 0 calc(4.1666666667% * 6)}.curd-form .el-form-item-7,.curd-form.el-form--inline .el-form-item-7{flex:0 0 calc(4.1666666667% * 7)}.curd-form .el-form-item-8,.curd-form.el-form--inline .el-form-item-8{flex:0 0 calc(4.1666666667% * 8)}.curd-form .el-form-item-9,.curd-form.el-form--inline .el-form-item-9{flex:0 0 calc(4.1666666667% * 9)}.curd-form .el-form-item-10,.curd-form.el-form--inline .el-form-item-10{flex:0 0 calc(4.1666666667% * 10)}.curd-form .el-form-item-11,.curd-form.el-form--inline .el-form-item-11{flex:0 0 calc(4.1666666667% * 11)}.curd-form .el-form-item-12,.curd-form.el-form--inline .el-form-item-12{flex:0 0 calc(4.1666666667% * 12)}.curd-form .el-form-item-13,.curd-form.el-form--inline .el-form-item-13{flex:0 0 calc(4.1666666667% * 13)}.curd-form .el-form-item-14,.curd-form.el-form--inline .el-form-item-14{flex:0 0 calc(4.1666666667% * 14)}.curd-form .el-form-item-15,.curd-form.el-form--inline .el-form-item-15{flex:0 0 calc(4.1666666667% * 15)}.curd-form .el-form-item-16,.curd-form.el-form--inline .el-form-item-16{flex:0 0 calc(4.1666666667% * 16)}.curd-form .el-form-item-17,.curd-form.el-form--inline .el-form-item-17{flex:0 0 calc(4.1666666667% * 17)}.curd-form .el-form-item-18,.curd-form.el-form--inline .el-form-item-18{flex:0 0 calc(4.1666666667% * 18)}.curd-form .el-form-item-19,.curd-form.el-form--inline .el-form-item-19{flex:0 0 calc(4.1666666667% * 19)}.curd-form .el-form-item-20,.curd-form.el-form--inline .el-form-item-20{flex:0 0 calc(4.1666666667% * 20)}.curd-form .el-form-item-21,.curd-form.el-form--inline .el-form-item-21{flex:0 0 calc(4.1666666667% * 21)}.curd-form .el-form-item-22,.curd-form.el-form--inline .el-form-item-22{flex:0 0 calc(4.1666666667% * 22)}.curd-form .el-form-item-23,.curd-form.el-form--inline .el-form-item-23{flex:0 0 calc(4.1666666667% * 23)}.curd-form .el-form-item-24,.curd-form.el-form--inline .el-form-item-24{flex:0 0 calc(4.1666666667% * 24)}.curd-form .form-item{width:100%;display:flex;min-width:0}.curd-form .form-item .tooltip{color:var(--el-button-text-color);margin-left:10px;vertical-align:middle;color:var(--el-text-color-secondary)}.curd-form .form-item .tooltip:hover{color:var(--color-primary)}.curd-form .form-item .empty{color:var(--el-text-color-secondary)}.curd-form .schema-form-radio .el-radio-group{vertical-align:top}.curd-form .schema-tree-select{width:100%}.curd-form .el-checkbox-group.single .el-checkbox-button+.el-checkbox-button{margin-left:10px}.curd-form .el-checkbox-group.single .el-checkbox-button .el-checkbox-button__inner{border:var(--el-border);border-radius:var(--el-border-radius-base);padding-left:20px;padding-right:20px}.curd-form .el-checkbox-group.single .el-checkbox-button.is-checked .el-checkbox-button__inner{border-color:var(--el-checkbox-button-checked-border-color)}.curd-form .tooltip{color:var(--el-button-text-color);margin-left:10px;vertical-align:middle}.schema-form-select-check{height:25px;margin-left:20px;margin-top:10px;display:block}.schema-form-select-check :deep(.el-checkbox__input){vertical-align:middle}.schema-form-choose{width:100%}.schema-form-choose .choose-content-wrapper{width:100%}.schema-form-choose .choose-content-wrapper .choose-sub-items-wrapper{overflow:hidden;transition:height .3s ease-out}.schema-form-choose .choose-content-wrapper .choose-sub-items{padding-top:12px;padding-bottom:1px;overflow:hidden}.schema-form-choose .choose-content-wrapper .choose-sub-items .el-form-item{margin-bottom:18px}.schema-form-choose .choose-content-wrapper .choose-sub-items .el-form-item:last-child{margin-bottom:0}.schema-form-choose .empty,.schema-form-choose .loading{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 0;color:var(--el-text-color-secondary)}.table-container .table-pager{margin:15px 0;display:flex;justify-content:space-between;align-items:center}.table-container .table-pager .pagination{justify-content:end;font-weight:400}.table-container .table-control{display:flex;justify-content:space-between;padding-bottom:10px;align-items:flex-end}.table-container .table-control .min-control>.el-button{margin-right:10px}.table-container .s-table-filter .el-form--inline .el-form-item{margin-right:15px}.table-container .el-button+.dropdown-item{margin-left:10px}.table-container .copy{cursor:pointer;margin-right:3px}.table-container .header-td{display:inline-flex;align-items:center;word-break:break-word}.table-container .header-td.center{justify-content:center}.table-container .header-td.right{justify-content:flex-end}.table-container .filter-dropdown-toggle{display:inline-block;line-height:1;cursor:pointer;position:relative;margin-left:3px}.table-container .filter-dropdown-toggle.active{color:var(--el-color-primary)}.table-container .table-menu{display:inline-block;vertical-align:middle;position:relative}.table-container .table-menu .table-menu-item{color:var(--el-button-text-color);font-size:14px;border-radius:4px;border:1px solid var(--el-button-border-color);padding:0;height:28px;width:28px;vertical-align:top;vertical-align:middle}.table-container .table-menu .table-menu-item:not(.is-disabled):active,.table-container .table-menu .table-menu-item:not(.is-disabled):focus{border-color:var(--el-button-border-color)}.table-container .table-menu .table-menu-item+.table-menu-item{margin-left:3px}.table-container .table-menu .table-menu-item:hover{background-color:var(--el-fill-color-light);border-color:var(--el-button-border-color)}.table-container .table-menu .current-size{color:var(--el-color-primary)}.table-container .simple-page{padding:20px 0;text-align:right}.table-container .simple-page>span{margin:0 10px}.curd-table-dropdown-menu .el-dropdown-menu__item{padding:0}.curd-table-dropdown-menu .el-dropdown-menu__item:hover{background-color:var(--el-fill-color-light)}.curd-table-dropdown-menu .el-dropdown-menu__item .el-button{display:block;padding:5px 16px;flex:1;text-align:left;font-size:12px}.table-main-filter-dropdown{padding:0}.table-main-filter-dropdown .search{position:relative;margin-bottom:5px}.table-main-filter-dropdown .search input{outline:0;border:0;width:100%;padding:5px 10px;background:#f4f4f4}.table-main-filter-dropdown .search .icon-suffix{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.table-main-filter-dropdown .search .icon-close1{position:absolute;right:30px;top:50%;transform:translateY(-50%);cursor:pointer;opacity:.7}.table-main-filter-dropdown .search .icon-close1:hover{opacity:1;color:#444}.table-main-filter-dropdown .select li{line-height:30px;padding:0 20px;list-style:none;cursor:pointer}.table-main-filter-dropdown .select li:hover{background:#f4f4f4}.table-main-filter-dropdown .select li.active{color:var(--el-color-primary)}.filter-type-popper{width:auto!important;min-width:0!important;padding:0!important;box-shadow:none!important}.table-filter{display:flex;flex-direction:column;position:relative}.table-filter .filter-search-box{min-height:32px;border-width:1px;border-style:solid;border-color:var(--el-border-color);display:flex;min-width:460px;align-items:center;justify-items:center;justify-content:space-between;overflow:hidden;border-radius:var(--el-border-radius-base);transition:all .3s}.table-filter .filter-search-box.is-focus{border-color:var(--el-color-primary)}.table-filter .filter-search-box .filter-action{height:32px;line-height:32px;align-self:flex-end;display:flex}.table-filter .filter-search-box .filter-action div{cursor:pointer}.table-filter .filter-search-box .filter-action .empty{color:var(--el-color-info);margin-right:15px;padding-left:10px}.table-filter .filter-search-box .filter-action .empty:hover{color:var(--el-color-primary)}.table-filter .filter-search-box .filter-action .search{padding:0 20px;text-align:center;position:relative;display:flex;align-items:center}.table-filter .filter-search-box .filter-action .search:before{content:"";display:block;width:1px;height:20px;background:var(--el-border-color);position:absolute;left:0;top:50%;transform:translateY(-50%)}.table-filter .filter-search-box .filter-action .search:hover{color:var(--el-color-primary)}.table-filter .filter-external .el-form-item{margin-bottom:10px}.table-filter .filter-tags{height:100%;flex-wrap:wrap;display:flex;flex:1;align-items:flex-start;justify-items:center}.table-filter .filter-tags .tag-title{font-size:12px;color:var(--el-text-color-placeholder);height:24px;line-height:24px;margin:0 15px 5px 0}.table-filter .filter-tags .dropdown-toggle{white-space:nowrap;display:flex;align-items:center;justify-items:center;font-size:12px}.table-filter .filter-tags .tag-list{flex:1;display:flex;flex-wrap:wrap}.table-filter .filter-tags .tag-item{height:24px;line-height:24px;white-space:nowrap;display:flex;align-items:center;justify-items:center;padding:0 10px;color:var(--el-color-info-dark-2);background:var(--el-color-info-light-9);font-size:12px;border-radius:var(--el-border-radius-base);margin-right:5px;margin-bottom:10px;cursor:pointer}.table-filter .filter-tags .tag-item .action{color:var(--el-color-info-light-5);text-align:center;width:14px;height:14px;line-height:14px;border-radius:50%;margin-left:10px;font-size:14px;cursor:pointer}.table-filter .filter-tags .tag-item .action:hover{color:var(--el-color-primary)}.table-filter .tag-clear{margin-bottom:2px;margin-left:10px}.table-filter .filter-item .el-form-item{margin:0}.table-filter .filter-item .el-form-item__label{display:none}.table-filter .filter-item .el-input{--el-input-border:none;--el-input-border-color:transparent;--el-input-focus-border-color:transparent;--el-input-hover-border-color:transparent}.table-filter .filter-item .el-select{--el-select-border-color-hover:transparent;--el-select-input-focus-border-color:transparent}.table-filter .filter-item .el-select__wrapper{box-shadow:none}.table-filter-type{box-shadow:var(--el-box-shadow-light);background:var(--el-bg-color);z-index:3060;min-width:150px;max-height:300px;overflow:hidden;--el-font-size-base:12px}.table-filter-type .base-select{--el-font-size-base:12px;height:100%;max-height:300px;display:flex;flex-direction:column}.table-filter-type .base-select .remote-input{width:100%}.table-filter-type .base-select .remote-input .el-input{--el-input-border-radius:0;--el-input-bg-color:var(--el-bg-color-page);--el-input-border:none;--el-input-hover-border-color:transparent;--el-input-focus-border-color:var(--el-border-color)}.table-filter-type .base-select .el-empty__image svg{height:50px}.table-filter-type .base-select .select-spinner{flex:1;position:relative;overflow-y:auto}.table-filter-type .base-select .select-spinner ul{margin:0;padding:0}.table-filter-type .base-select .select-spinner ul li{list-style:none;padding:6px 10px;cursor:pointer;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;font-size:var(--el-font-size-base)}.table-filter-type .base-select .select-spinner ul li.active{color:var(--el-color-primary)}.table-filter-type .base-select .select-spinner ul li:hover{background:var(--el-color-primary-light-9);color:var(--el-color-primary)}.table-filter-toggle{padding:0 10px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;min-width:120px;font-size:12px}.table-filter-toggle .current-filter-label{margin-right:20px}.table-filter-List{box-shadow:0 2px 8px 0 rgba(0,0,0,.2);background:var(--el-bg-color);z-index:3060;border-radius:2px;max-height:300px;overflow-y:auto;font-size:12px}.table-filter-List ul{width:100%;margin:0;padding:0}.table-filter-List ul li{width:100%;list-style:none;padding:6px 10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-sizing:border-box;cursor:pointer}.table-filter-List ul li:hover{background:var(--el-color-primary-light-9);color:var(--el-color-primary)}.table-filter-List ul li.active{color:var(--el-color-primary);font-weight:600}.table-filter-tag-popper{max-height:400px;overflow:auto;padding:0!important;width:250px!important}.table-filter-tag-popper .base-select{--el-font-size-base:12px;height:100%;max-height:300px;display:flex;flex-direction:column}.table-filter-tag-popper .base-select .remote-input{width:100%}.table-filter-tag-popper .base-select .remote-input :deep(.el-input){--el-input-border-radius:0;--el-input-bg-color:var(--el-bg-color-page);--el-input-border:none;--el-input-hover-border-color:transparent;--el-input-focus-border-color:var(--el-border-color)}.table-filter-tag-popper .base-select :deep(.el-empty__imagesvg){height:50px}.table-filter-tag-popper .base-select .select-spinner{flex:1;position:relative;overflow-y:auto}.table-filter-tag-popper .base-select .select-spinner ul{margin:0;padding:0}.table-filter-tag-popper .base-select .select-spinner ul li{list-style:none;padding:6px 10px;cursor:pointer;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--el-font-size-base);box-sizing:border-box}.table-filter-tag-popper .base-select .select-spinner ul li.active{color:var(--el-color-primary)}.table-filter-tag-popper .base-select .select-spinner ul li:hover{background:var(--el-color-primary-light-9);color:var(--el-color-primary)}.detail-info{flex:1}.detail-info .detail-info-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.detail-info .title{border-left:3px solid var(--el-color-primary);padding-left:10px;line-height:1.2}.detail-info+.detail-info{margin-top:30px}.detail-info.card{background:var(--el-bg-color);border-radius:0;opacity:1;border:1px solid var(--el-border-color)}.detail-info.card[shadow]{box-shadow:var(--el-box-shadow-lighter)}.detail-info.card .detail-info-header{height:50px;border-bottom:1px solid var(--el-border-color);margin:0;padding:0 20px}.detail-info.card .detail-info-header .title{border-left:0;padding:0}.detail-info.card .detail-info-body{padding:10px 20px 20px 20px;margin:0}.detail-info .detail-info-body{display:flex;flex-wrap:wrap;position:relative;box-sizing:border-box}.detail-info .detail-info-body:not(.table){margin-left:-calc(var(--gutter)/2);margin-right:-calc(var(--gutter)/2)}.detail-info .detail-info-body .table-detail-col{box-sizing:border-box}.detail-info .detail-info-body .item-col{line-height:20px;height:100%;box-sizing:border-box;display:flex}.detail-info .detail-info-body .item-col.item-col-top{flex-direction:column}.detail-info .detail-info-body .item-col.item-col-top .det{padding:0}.detail-info .detail-info-body .item-col .label{padding:4px 0;color:var(--el-text-color-secondary);box-sizing:border-box;vertical-align:middle;float:left;display:flex;align-items:center}.detail-info .detail-info-body .item-col .det{flex:1;padding:4px 10px;box-sizing:border-box;min-height:20px;height:100%;word-break:break-all;overflow:hidden}.detail-info .detail-info-body.table{border-top:1px solid var(--el-border-color);border-left:1px solid var(--el-border-color)}.detail-info .detail-info-body.table .table-detail-col{padding:0!important;border-bottom:1px solid var(--el-border-color);border-right:1px solid var(--el-border-color)}.detail-info .detail-info-body.table .item-col{background:var(--el-fill-color-light);border:1px solid var(--el-bg-color)}.detail-info .detail-info-body.table .item-col .label{padding-left:10px;padding-right:10px;width:100px}.detail-info .detail-info-body.table .item-col .det{border-left:1px solid var(--el-border-color);background-color:var(--el-bg-color)}.curdform-group{background-color:var(--el-bg-color);width:100%;margin:10px auto;border-radius:var(--el-border-radius-base)}.curdform-group .curdform-group-head{padding:15px 28px 5px;margin-bottom:10px;box-sizing:border-box;display:flex;justify-content:space-between;align-items:center}.curdform-group .curdform-group-head+.curdform-group-desc{margin-top:-10px}.curdform-group .curdform-group-head+.curdform-group-body{padding-top:0}.curdform-group .curdform-group-head .left{display:flex;align-items:center;gap:10px}.curdform-group .curdform-group-head .left .icon{background:#f3f4f6;border-radius:50%;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;color:#9ca3af}.curdform-group .curdform-group-head .left .icon i{font-size:22px}.curdform-group .curdform-group-head .left .title{font-size:calc(var(--el-font-size-base) + 2px);font-weight:700}.curdform-group .curdform-group-desc{font-size:var(--el-font-size-base);color:var(--el-text-color-secondary);margin:0 28px}.curdform-group .curdform-group-body{padding:18px 28px 10px}