@antsoo-lib/core 2.0.0 → 2.0.3

package/src/Form/CoreForm.vue

@@ -0,0 +1,782 @@
+<script lang="ts" setup>
+import { Col, Form, FormItem, FormItemRest, Row, Tooltip } from '@antsoo-lib/components'
+import { QuestionCircleOutlined } from '@antsoo-lib/icons'
+import type { AnyObject } from '@antsoo-lib/shared'
+import { env } from '@antsoo-lib/utils'
+import { isBoolean, isEqual, isFunction } from 'lodash-es'
+
+import { computed, inject, nextTick, ref, watch } from 'vue'
+
+import { rendererMap } from '../render'
+import { useToolbarState } from '../render/state'
+import { applyAttrMapping, buildValueFromAttr } from '../utils/attrMapping'
+import { COMMON_CODE_SERVICE_KEY } from './types'
+import type { BaseFormProps, FormField } from './types'
+
+const props = withDefaults(defineProps<BaseFormProps>(), {
+  value: () => ({}),
+  fields: () => [],
+  disabled: false,
+  labelWidth: 90,
+  labelAlign: 'right',
+  labelPosition: 'horizontal',
+  inlineActions: false,
+  actionsSpan: 8,
+  colon: false,
+  gutter: 0,
+})
+const emit = defineEmits<{
+  'update:value': [value: AnyObject]
+  change: [value: AnyObject]
+}>()
+const { isDev, isTest } = env()
+const showHelpText = isDev || isTest
+
+// 表单引用
+const formRef = ref()
+const isUpdatingFromProps = ref(false)
+// 表单数据 - 合并默认值
+const formData = ref<AnyObject>({})
+
+// 初始化 commonCode store（可选注入：业务未提供时回退为空实现）
+const commonCodeStore = inject(COMMON_CODE_SERVICE_KEY, {
+  getCodesByType: () => [],
+})
+
+// 创建工具栏状态实例
+const toolbarState = useToolbarState()
+
+/**
+ * 获取表单字段的属性值
+ */
+const getFieldTitle = (field: FormField) => {
+  if (field.type === 'datePicker' && field.attr) {
+    return field.attr?.join(', ')
+  }
+  if (field.type === 'areaCascader' && field.attr) {
+    const { ids = [], names = [] } = (field.attr as AnyObject) || {}
+    return ids.concat(names).join(', ')
+  }
+  return field.key
+}
+
+/**
+ * 获取 helpText 的显示内容
+ */
+const getHelpText = (field: FormField) => {
+  // 显式设置为 false 时不显示
+  if (field.helpText === false) return null
+  // 有值则显示
+  if (field.helpText) return field.helpText
+  // 开发/测试环境下，默认显示 key 或 attr 用于辅助调试
+  if (showHelpText) return getFieldTitle(field)
+
+  return null
+}
+
+// 生成表单校验规则
+const formRules = computed(() => {
+  const rules: Record<string, any> = {}
+  props.fields.forEach((field) => {
+    if (!field.key) return
+    if (field.rules && field.rules.length > 0) {
+      rules[field.key] = field.rules.map((rule) => ({
+        ...rule,
+        message: rule.message || `请输入${field.name}`,
+        trigger: rule.trigger || 'change',
+      }))
+    } else if (field.required) {
+      // 如果没有自定义规则但是必填，添加默认必填规则
+      rules[field.key] = [
+        {
+          required: true,
+          message: `请输入${field.name}`,
+          trigger: 'change',
+        },
+      ]
+    }
+  })
+  return rules
+})
+
+// 初始化表单数据
+const initFormData = () => {
+  const initialData = { ...props.value }
+  // 设置字段默认值
+  props.fields.forEach((field) => {
+    let val = field.props?.value
+    if (val === undefined) return
+
+    // 尝试格式化 dayjs 对象
+    const format = field.props?.valueFormat
+    const formatVal = (v: any) =>
+      format && v && typeof v.format === 'function' ? v.format(format) : v
+
+    if (Array.isArray(val)) {
+      val = val.map(formatVal).filter((v) => v !== null && v !== undefined && v !== '')
+    } else {
+      val = formatVal(val)
+    }
+
+    if (field.key) {
+      if (initialData[field.key] === undefined) {
+        if (val !== undefined && (Array.isArray(val) ? val.length > 0 : true)) {
+          initialData[field.key] = val
+        } else if (
+          (field.type === 'select' || field.type === 'sselectPage') &&
+          (field.props?.mode === 'multiple' || field.props?.mode === 'tags')
+        ) {
+          initialData[field.key] = []
+        } else if (field.type === 'checkboxGroup' || field.type === 'upload') {
+          initialData[field.key] = []
+        } else if (
+          field.type === 'treeSelect' &&
+          (field.props?.multiple || field.props?.treeCheckable)
+        ) {
+          initialData[field.key] = []
+        }
+      }
+    } else if (Array.isArray(field.attr)) {
+      // 处理 attr 映射（主要用于 datePicker range 模式）
+      field.attr.forEach((targetKey: string, idx: number) => {
+        if (targetKey && initialData[targetKey] === undefined) {
+          initialData[targetKey] = Array.isArray(val) ? val[idx] : val
+        }
+      })
+    }
+  })
+  formData.value = { ...initialData }
+  Object.keys(formData.value).forEach((key) => {
+    toolbarState.setValue(key, formData.value[key]) // 同步更新toolbarState
+  })
+}
+
+// 监听props.value变化
+watch(
+  () => props.value,
+  (newVal) => {
+    if (isEqual(newVal, formData.value)) return
+    isUpdatingFromProps.value = true
+    // 覆盖表单数据（不直接写入 toolbarState，避免非渲染周期的副作用导致 UI 异常）
+    formData.value = { ...newVal }
+    nextTick(() => {
+      isUpdatingFromProps.value = false
+    })
+  },
+  { deep: true, immediate: true },
+)
+
+// 监听formData变化并触发事件
+watch(
+  formData,
+  (newVal) => {
+    if (!isUpdatingFromProps.value) {
+      Object.keys(newVal).forEach((key) => {
+        toolbarState.setValue(key, newVal[key])
+      })
+      emit('update:value', { ...newVal })
+      emit('change', { ...newVal })
+    }
+  },
+  { deep: true },
+)
+
+// 过滤隐藏的字段
+const visibleFields = computed(() => {
+  return props.fields.filter((field) => {
+    if (isBoolean(field.beforeCreate)) {
+      return field.beforeCreate
+    }
+    if (isFunction(field.beforeCreate) && !field.beforeCreate(field)) {
+      return false
+    }
+    return true
+  })
+})
+
+// 渲染表单字段
+const renderField = (field: FormField) => {
+  // 处理动态 props：支持函数式配置
+  let resolvedProps = field.props
+  if (isFunction(resolvedProps)) {
+    resolvedProps = resolvedProps(formData.value, toolbarState, field)
+  }
+  // 确保 resolvedProps 为对象
+  if (!resolvedProps) resolvedProps = {}
+
+  // 处理 commonCode 字段，为 select 类型自动添加选项
+  let processedField = { ...field, props: resolvedProps }
+
+  if (field.commonCode && field.type === 'select') {
+    const codes = commonCodeStore ? commonCodeStore.getCodesByType(field.commonCode) : []
+    const options = codes.map((item) => ({
+      label: item.name,
+      value: item.code,
+    }))
+
+    processedField = {
+      ...processedField,
+      props: {
+        ...processedField.props,
+        options,
+      },
+    }
+  }
+
+  // 计算通用初始值（不引入任何特定业务逻辑）：
+  // 1) 优先使用 key 对应的值
+  // 2) 若未设置 key，但存在 attr 映射，则从 formData 中根据 attr 规则聚合初始值
+  // 3) 当 key 与 attr 同时存在时：使用 key 作为 value，attr 原样透传给组件（仅在组件需要时）
+  const deriveInitialValue = () => {
+    const hasKey = field.key !== undefined && field.key !== ''
+    const hasAttr = !!processedField.attr
+
+    // 情况一：仅有 key，直接返回 key 对应的值（若未设置则回退 props.value）
+    if (hasKey && !hasAttr) {
+      const keyVal = formData.value[field.key!]
+      return keyVal !== undefined ? keyVal : processedField.props?.value
+    }
+
+    // 情况二：仅有 attr（维持已有逻辑，使用 attr 生成组件初始值）
+    if (!hasKey && hasAttr) {
+      const attr = processedField.attr as any
+      // 使用通用构造函数统一处理对象映射与分组数组映射
+      return buildValueFromAttr(formData.value, attr)
+    }
+
+    // 情况三：key 与 attr 同时存在
+    // 特例：对于 areaCascader，优先根据 attr 从 formData 聚合对象，用于路径回显（省/市/区）
+    if (hasKey && hasAttr) {
+      if (processedField.type === 'areaCascader') {
+        const byAttr = buildValueFromAttr(formData.value, processedField.attr as any)
+        if (byAttr !== undefined) return byAttr
+      }
+      const keyVal = formData.value[field.key!]
+      return keyVal !== undefined ? keyVal : processedField.props?.value
+    }
+
+    // 情况四：二者都不存在，回退到 props.value
+    return processedField.props?.value
+  }
+
+  // 合并字段属性
+  const fieldConfig = {
+    ...processedField,
+    props: {
+      ...processedField.props,
+      value: deriveInitialValue(),
+      // 情况三：仅当组件类型为 sselectPage 且同时存在 key 与 attr 时，将 attr 以 props 方式透传给组件
+      ...(processedField.type === 'sselectPage' && processedField.attr && processedField.key
+        ? { attr: processedField.attr }
+        : {}),
+    },
+    // 全局禁用状态优先，若未全局禁用则使用字段级别的禁用状态
+    disabled: props.disabled
+      ? true
+      : isFunction(field.disabled)
+        ? !!field.disabled(formData.value, toolbarState, processedField)
+        : field.disabled !== undefined
+          ? field.disabled
+          : false,
+    events: {
+      // 预先捕获用户自定义事件，避免被覆盖
+      // 注意：不要在最终 events 对象中再次展开这两个键，否则会覆盖拦截器
+      ...(() => {
+        const { events = {} } = processedField as any
+        const {
+          'onUpdate:value': userOnUpdateValue,
+          onChange: userOnChange,
+          ...rest
+        } = events as AnyObject
+        // 将除 onUpdate:value / onChange 外的用户事件原样透传
+        return rest
+      })(),
+      // 添加默认的值更新事件（组件中立）：支持 key 存储或按 attr 映射拆分
+      'onUpdate:value': (value: any) => {
+        const attr = processedField.attr as any
+
+        // 若存在 attr 映射：
+        // - 对数组映射保持原有写入逻辑
+        // - 对对象映射：
+        //    a) 若符合旧版 { ids: string[]; names: string[] } 结构，仍按数组下标写入（保持兼容）
+        //    b) 其他对象映射，优先由 onChange 携带的 option 进行写入（此处仅更新 key）
+        if (attr) {
+          if (Array.isArray(attr)) {
+            const isObj = value && typeof value === 'object' && !Array.isArray(value)
+            const isArr = Array.isArray(value)
+            ;(attr as string[]).forEach((targetKey: string, idx: number) => {
+              if (!targetKey) return
+              const v = isArr
+                ? (value as any[])[idx]
+                : isObj
+                  ? (value as any)[targetKey]
+                  : undefined
+              formData.value[targetKey] = v
+              toolbarState.setValue(targetKey, v)
+            })
+
+            // 用户自定义回调
+            if (field.events?.['onUpdate:value']) {
+              try {
+                field.events['onUpdate:value'](value, formData.value, toolbarState)
+              } catch (e) {
+                console.warn('onUpdate:value user handler error:', e)
+              }
+            }
+            return
+          } else if (
+            typeof attr === 'object' &&
+            (Array.isArray((attr as any).ids) || Array.isArray((attr as any).names))
+          ) {
+            // 兼容旧版对象映射：{ ids: string[]; names: string[] }
+            const isObj = value && typeof value === 'object' && !Array.isArray(value)
+            const ids: string[] = Array.isArray(attr?.ids) ? attr.ids : []
+            const names: string[] = Array.isArray(attr?.names) ? attr.names : []
+            ids.forEach((targetKey: string, idx: number) => {
+              if (!targetKey) return
+              const v = isObj
+                ? (value as any)[targetKey]
+                : Array.isArray(value)
+                  ? (value as any[])[idx]
+                  : undefined
+              formData.value[targetKey] = v
+              toolbarState.setValue(targetKey, v)
+            })
+            names.forEach((targetKey: string) => {
+              if (!targetKey) return
+              const v = isObj ? (value as any)[targetKey] : undefined // 数组模式无法携带名称
+              formData.value[targetKey] = v
+              toolbarState.setValue(targetKey, v)
+            })
+
+            if (field.events?.['onUpdate:value']) {
+              try {
+                field.events['onUpdate:value'](value, formData.value, toolbarState)
+              } catch (e) {
+                console.warn('onUpdate:value user handler error:', e)
+              }
+            }
+            return
+          }
+        }
+
+        // 未配置 attr：回退到 key 字段（若存在）
+        if (processedField.key) {
+          // 输入框类型在 update 时不做 trim，在 onChange 时 trim
+          formData.value[processedField.key] = value
+          toolbarState.setValue(processedField.key, value)
+        }
+
+        // 如果有自定义事件，也要调用（使用预先捕获的用户事件）
+        const userHandler = (processedField as any)?.events?.['onUpdate:value']
+        if (userHandler) userHandler(value, formData.value, toolbarState)
+      },
+      // 新增：通用 onChange 事件拦截，用于对象映射（特别是 SselectPage）根据 option 写入 formData
+      onChange: (value: any, option: any, allOptions?: any) => {
+        const shouldAutoValidateOnChange = processedField.type !== 'upload'
+
+        // 处理输入框 trim 逻辑
+        if (processedField.type === 'input') {
+          let val: string | undefined
+          // 兼容事件对象
+          if (value && typeof value === 'object' && 'target' in value) {
+            val = value.target?.value
+          } else if (typeof value === 'string') {
+            val = value
+          }
+
+          if (typeof val === 'string') {
+            const trimmedVal = val.trim()
+            // 更新表单数据
+            if (processedField.key) {
+              formData.value[processedField.key] = trimmedVal
+              toolbarState.setValue(processedField.key, trimmedVal)
+            }
+            // 更新传递给用户的 value
+            value = trimmedVal
+          }
+        }
+
+        // 仅在存在 attr 对象映射时执行，保持对其他组件的兼容
+        const attr = processedField.attr as any
+        if (attr && typeof attr === 'object' && !Array.isArray(attr)) {
+          try {
+            // 识别是否为多选
+            const isMultiple = Array.isArray(value)
+            applyAttrMapping(formData.value, toolbarState, attr, value, option, isMultiple)
+            try {
+              const mappedKeys = Object.entries(attr)
+                .filter(
+                  ([k, v]) => typeof v === 'string' && typeof k === 'string' && k.trim().length > 0,
+                )
+                .map(([k]) => k)
+              const extraKeys = processedField.key ? [processedField.key] : []
+              const validateKeys = Array.from(new Set([...mappedKeys, ...extraKeys]))
+              if (validateKeys.length) {
+                if (shouldAutoValidateOnChange) {
+                  nextTick(() => {
+                    formRef.value?.validateFields(validateKeys)
+                  })
+                }
+              }
+            } catch {}
+          } catch (e) {
+            console.warn('onChange attr mapping error:', e)
+          }
+        } else if (processedField?.key) {
+          try {
+            if (shouldAutoValidateOnChange) {
+              nextTick(() => {
+                formRef.value?.validateFields([processedField.key as string])
+              })
+            }
+          } catch {}
+        }
+
+        const userOnChange = (processedField as any)?.events?.onChange
+        if (userOnChange) {
+          try {
+            userOnChange(value, option, allOptions, formData.value, toolbarState)
+          } catch (e) {
+            console.warn('onChange user handler error:', e)
+          }
+        }
+      },
+      // 其余事件已在顶部透传，这里不再展开 field.events，避免覆盖拦截器
+    },
+  }
+
+  if (!field.type) return
+  // 保持组件渲染通用性：将当前表单的全量值透传给渲染器（第三参数），避免渲染器仅依赖 toolbarState 的缓存
+  return (rendererMap as any)[field.type](fieldConfig, toolbarState, formData.value)
+}
+
+// 解析目标字段集合：以表单 fields 为基础，附加传入的额外字段（若有）
+const resolveTargetKeys = (extraKeys?: string[]) => {
+  const baseKeys: string[] = Array.isArray(props.fields)
+    ? props.fields.map((f) => f.key).filter((k): k is string => !!k)
+    : []
+  const extras: string[] = Array.isArray(extraKeys) && extraKeys.length > 0 ? extraKeys : []
+  return Array.from(new Set([...baseKeys, ...extras]))
+}
+
+const getFormValue = (key?: string[]) => {
+  const targetKeys = resolveTargetKeys(key)
+  const val: AnyObject = {}
+  targetKeys.forEach((k) => {
+    val[k] = formData.value[k]
+  })
+  return val
+}
+
+const setFormValue = (values: AnyObject, key?: string[]) => {
+  const targetKeys = resolveTargetKeys(key)
+  targetKeys.forEach((k) => {
+    if (Object.prototype.hasOwnProperty.call(values, k)) {
+      const v = values[k]
+      formData.value[k] = v
+      toolbarState.setValue(k, v)
+    }
+  })
+}
+
+// 新增：统一的存取方法（接收对象，返回对象），用于按指定字段读取或写入表单值
+interface GetAccessParams {
+  operation: 'get'
+  keys: string[] | string
+}
+interface SetAccessParams {
+  operation: 'set'
+  keys: string[] | string
+  values: AnyObject
+}
+type AccessFormFieldsParams = GetAccessParams | SetAccessParams
+type AccessFormFieldsResult =
+  | { success: true; operation: 'get'; keys: string[]; data: AnyObject; missingKeys?: string[] }
+  | { success: true; operation: 'set'; keys: string[]; applied: string[]; skipped: string[] }
+  | { success: false; message: string }
+
+function accessFormFields(params: AccessFormFieldsParams): AccessFormFieldsResult {
+  // 规范化 keys：支持 string 或 string[]；去重并过滤空白键
+  const rawKeys = typeof params.keys === 'string' ? [params.keys] : params.keys
+  const targetKeys = Array.isArray(rawKeys)
+    ? Array.from(new Set(rawKeys.filter((k) => typeof k === 'string' && k.trim().length > 0)))
+    : []
+  if (targetKeys.length === 0) {
+    return { success: false, message: 'accessFormFields: 必须提供非空的 keys（字符串或数组）' }
+  }
+
+  // 读取模式：返回指定字段的值集合，仅限于传入的 keys
+  if (params.operation === 'get') {
+    const data: AnyObject = {}
+    const missingKeys: string[] = []
+    for (const k of targetKeys) {
+      if (Object.prototype.hasOwnProperty.call(formData.value, k)) data[k] = formData.value[k]
+      else missingKeys.push(k)
+    }
+    const result: {
+      success: true
+      operation: 'get'
+      keys: string[]
+      data: AnyObject
+      missingKeys?: string[]
+    } = {
+      success: true,
+      operation: 'get',
+      keys: targetKeys,
+      data,
+    }
+    if (missingKeys.length) result.missingKeys = missingKeys
+    return result
+  }
+
+  // 写入模式：仅对传入的 keys 进行写入；未在 values 中出现的键将被跳过
+  if (params.operation === 'set') {
+    const values = (params as SetAccessParams).values
+    if (!values || typeof values !== 'object')
+      return { success: false, message: 'accessFormFields: 写入操作需要提供有效的 values 对象' }
+    const applied: string[] = []
+    const skipped: string[] = []
+    for (const k of targetKeys) {
+      if (!Object.prototype.hasOwnProperty.call(values, k)) {
+        skipped.push(k)
+        continue
+      }
+      const v = values[k]
+      formData.value[k] = v
+      toolbarState.setValue(k, v)
+      applied.push(k)
+    }
+    return { success: true, operation: 'set', keys: targetKeys, applied, skipped }
+  }
+
+  return { success: false, message: 'accessFormFields: 不支持的 operation 类型' }
+}
+
+const resetFormValue = (key?: string[]) => {
+  const targetKeys = resolveTargetKeys(key)
+  targetKeys.forEach((k) => {
+    // 尝试在 fields 中找到对应配置，以便根据类型/props重置默认值
+    const field = Array.isArray(props.fields) ? props.fields.find((f) => f.key === k) : undefined
+    let resetValue: any
+    if (field && field.props?.value !== undefined) {
+      resetValue = field.props.value
+    } else if (
+      field &&
+      (field.type === 'select' || field.type === 'sselectPage') &&
+      (field.props?.mode === 'multiple' || field.props?.mode === 'tags')
+    ) {
+      // 多选/标签模式默认重置为空数组，避免出现空标签
+      resetValue = []
+    } else if (field && (field.type === 'checkboxGroup' || field.type === 'upload')) {
+      resetValue = []
+    } else if (
+      field &&
+      field.type === 'treeSelect' &&
+      (field.props?.multiple || field.props?.treeCheckable)
+    ) {
+      resetValue = []
+    } else {
+      resetValue = undefined
+    }
+    formData.value[k] = resetValue
+    toolbarState.setValue(k, resetValue)
+  })
+  // 清除校验状态
+  formRef.value?.clearValidate()
+}
+
+// 校验表单
+const validateForm = async (): Promise<{ valid: boolean; errors?: any }> => {
+  try {
+    await formRef.value?.validate()
+    return { valid: true }
+  } catch (errors) {
+    return { valid: false, errors }
+  }
+}
+
+// 校验指定字段
+const validateFields = async (fieldKey: string[]): Promise<{ valid: boolean; errors?: any }> => {
+  try {
+    await formRef.value?.validateFields(fieldKey)
+    return { valid: true }
+  } catch (errors) {
+    return { valid: false, errors }
+  }
+}
+
+// 清除校验状态
+const clearValidate = (fieldKeys?: string[]) => {
+  if (fieldKeys) {
+    formRef.value?.clearValidate(fieldKeys)
+  } else {
+    formRef.value?.clearValidate()
+  }
+}
+
+// 暴露方法给父组件
+defineExpose({
+  getFormValue,
+  setFormValue,
+  accessFormFields,
+  resetFormValue,
+  validateForm,
+  validateFields,
+  clearValidate,
+})
+
+// 初始化
+initFormData()
+</script>
+
+<template>
+  <div class="form-container">
+    <Form
+      ref="formRef"
+      :model="formData"
+      :rules="formRules"
+      :label-col="{ style: { width: `${props.labelWidth}px` } }"
+      :label-align="props.labelAlign"
+      :disabled="props.disabled"
+      :layout="props.labelPosition"
+      :colon="props.colon"
+    >
+      <Row :gutter="props.gutter">
+        <Col
+          v-for="(field, index) in visibleFields"
+          v-show="!field.hidden"
+          :key="field.key ?? index"
+          :span="field.span || 24"
+        >
+          <FormItem
+            :label-align="field.labelAlign || props.labelAlign"
+            :name="field.type === 'inputGroup' ? undefined : field.key"
+            :label-col="
+              field.labelWidth ? { style: { width: `${field.labelWidth}px` } } : undefined
+            "
+            :required="field.required"
+            :html-for="undefined"
+          >
+            <template #label>
+              <span>{{ field.name }}</span>
+              <Tooltip v-if="getHelpText(field)" :title="getHelpText(field)">
+                <QuestionCircleOutlined class="form-help-text" />
+              </Tooltip>
+            </template>
+            <!-- 为 inputGroup 类型包裹 a-form-item-rest，避免一个 FormItem 收集多个字段导致的警告 -->
+            <template v-if="field.type === 'inputGroup'">
+              <FormItemRest>
+                <component :is="renderField(field)" />
+              </FormItemRest>
+            </template>
+            <template v-else>
+              <component :is="renderField(field)" />
+            </template>
+          </FormItem>
+        </Col>
+        <Col
+          v-if="$slots.search && props.inlineActions"
+          :span="props.actionsSpan"
+          class="form-actions-inline"
+        >
+          <FormItem>
+            <slot name="search" />
+          </FormItem>
+        </Col>
+      </Row>
+      <div v-if="$slots.actions" class="form-actions">
+        <slot name="actions" />
+      </div>
+    </Form>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.ant-form {
+  width: 100%;
+}
+
+.ant-form-vertical {
+  .ant-row {
+    row-gap: 8px;
+  }
+  :deep(.ant-form-item) {
+    margin-bottom: 0;
+    .ant-form-item-label {
+      padding: 0 0 4px;
+      > label {
+        white-space: normal;
+        overflow-wrap: break-word;
+        height: auto;
+        line-height: 1.5;
+      }
+    }
+  }
+}
+
+.ant-form-horizontal {
+  .ant-row {
+    row-gap: 20px;
+  }
+  :deep(.ant-form-item) {
+    margin-bottom: 0;
+    .ant-form-item-control {
+      position: relative;
+    }
+    .ant-form-item-explain {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      width: 100%;
+      font-size: 12px;
+    }
+    .ant-form-item-explain-error {
+      height: 20px;
+      line-height: 20px;
+    }
+    .ant-form-item-label {
+      > label {
+        white-space: normal;
+        overflow-wrap: break-word;
+        height: 32px;
+        line-height: 1;
+        vertical-align: 0.2em;
+      }
+    }
+  }
+}
+
+.ant-input-number {
+  width: 100%;
+}
+
+.ant-picker {
+  width: 100%;
+}
+
+// 修复带 addonBefore/addonAfter 时 InputNumber 未能撑满容器宽度的问题
+:deep(.ant-input-number-group-wrapper) {
+  display: block;
+  width: 100%;
+}
+
+// 同步修复普通 Input 在存在 addon 时的 group-wrapper 宽度问题，确保表现一致
+:deep(.ant-input-group-wrapper) {
+  display: block;
+  width: 100%;
+}
+
+.form-container {
+  width: 100%;
+  background: #fff;
+  border-radius: 15px;
+  height: 100%;
+}
+
+.form-help-text {
+  margin-left: 4px;
+  color: #999;
+  cursor: help;
+}
+</style>