vue2-client 1.15.142 → 1.15.144

package/src/base-client/components/common/HIS/HAddNativeForm/HAddNativeForm.vue

@@ -1,411 +1,411 @@
-<script>
-import { v4 as uuidv4 } from 'uuid'
-import {
-  FormModel,
-  Input,
-  Button,
-  Row,
-  Col,
-  Card,
-  Divider,
-  message,
-  Select,
-  Spin
-} from 'ant-design-vue'
-import { getConfigByNameAsync, runLogic } from '@vue2-client/services/api/common'
-import { mapState } from 'vuex'
-import { debounce } from 'lodash'
-
-export default {
-  name: 'HAddNativeForm',
-  components: {
-    'a-form-model': FormModel,
-    'a-form-item': FormModel.Item,
-    'a-input': Input,
-    'a-button': Button,
-    'a-row': Row,
-    'a-col': Col,
-    'a-card': Card,
-    'a-divider': Divider,
-    'a-select': Select,
-    'a-select-option': Select.Option,
-    'a-spin': Spin
-  },
-  props: {
-    queryParamsName: {
-      type: String,
-      required: true
-    },
-    serviceName: {
-      type: String,
-      default: process.env.VUE_APP_SYSTEM_NAME
-    },
-    formStyle: {
-      type: String,
-      default: 'defaultForm'
-    }
-  },
-  data () {
-    return {
-      loading: true,
-      config: {},
-      formInstances: []
-    }
-  },
-  computed: {
-    formItemLayoutComputed () {
-      // 如果是 inline 布局，则不绑定 formItemLayout，让其使用 Ant Design Vue 默认的 inline 样式
-      if (this.config.xAddFormLayout === 'inline') {
-        return {}
-      }
-      if (this.config.formItemLayout) {
-        return {
-          labelCol: { span: this.config.formItemLayout.labelCol },
-          wrapperCol: { span: this.config.formItemLayout.wrapperCol }
-        }
-      }
-      return {}
-    },
-    ...mapState('account', { currUser: 'user' })
-  },
-  created () {
-    this.debouncedSearch = debounce(this.performSearch, 500)
-    this.fetchConfigAndInitializeForms()
-  },
-  methods: {
-    async fetchConfigAndInitializeForms () {
-      try {
-        this.loading = true
-        const res = await getConfigByNameAsync(this.queryParamsName, this.serviceName)
-        if (res) {
-          this.config = res
-          if (this.config.manyForm) {
-            this.addFormInstance()
-          } else {
-            this.addFormInstance()
-          }
-        } else {
-          console.error('HAddNativeForm: 未能获取到配置内容。')
-          message.error('未能获取到表单配置，请检查配置名称或网络。')
-        }
-      } catch (error) {
-        console.error('HAddNativeForm: 获取配置时发生错误:', error)
-        message.error('获取表单配置时发生错误。')
-      } finally {
-        this.loading = false
-      }
-    },
-    async getOptions (item, formDataContext, searchKeyword = '') {
-      if (!item.keyName) {
-        return
-      }
-
-      this.$set(item, 'loadingOptions', true)
-      let fetchedOptions = []
-
-      try {
-        if (item.keyName.startsWith('logic@')) {
-          const logicName = item.keyName.substring(6)
-          const result = await runLogic(logicName, { searchKeyword: searchKeyword }, this.serviceName)
-
-          if (Array.isArray(result)) {
-            fetchedOptions = result.map(opt => ({
-              label: opt.label || opt.name || opt.text,
-              value: (opt.value || opt.id) + ''
-            }))
-          } else {
-            console.warn(`Logic '${logicName}' did not return an array for options. Result:`, result)
-          }
-        } else if (item.keyName.startsWith('config@')) {
-          const configName = item.keyName.substring(7)
-          const res = await getConfigByNameAsync(configName, this.serviceName)
-          if (res && res.value && Array.isArray(res.value)) {
-            fetchedOptions = res.value.map(opt => ({
-              label: opt.label || opt.name || opt.text,
-              value: (opt.value || opt.id) + ''
-            }))
-          } else {
-            console.warn(`Config '${configName}' did not return a valid 'value' array for options. Result:`, res)
-          }
-        } else {
-          // 全局字典
-          if (this.$appdata && typeof this.$appdata.getDictionaryList === 'function') {
-            const dictionaryList = this.$appdata.getDictionaryList(item.keyName)
-            if (Array.isArray(dictionaryList)) {
-              fetchedOptions = dictionaryList.map(opt => ({
-                label: opt.text,
-                value: opt.value + ''
-              }))
-            } else {
-              console.warn(`Global dictionary '${item.keyName}' did not return an array. Result:`, dictionaryList)
-            }
-          } else {
-            console.error('$appdata.getDictionaryList is not available. Please ensure it\'s globally provided.')
-          }
-        }
-      } catch (error) {
-        console.error(`Error fetching options for item '${item.key}':`, error)
-        fetchedOptions = []
-      } finally {
-        this.$set(item, 'options', fetchedOptions)
-        this.$set(item, 'loadingOptions', false)
-      }
-    },
-    // 搜索处理函数，使用 debounce 优化性能
-    handleSelectSearch (value, item, formDataContext) {
-      // 更新搜索关键字，并触发 debouncedSearch
-      this.$set(item, 'searchKeyword', value)
-      this.debouncedSearch(item, formDataContext)
-    },
-    // 执行实际的搜索操作
-    performSearch (item, formDataContext) {
-      this.getOptions(item, formDataContext, item.searchKeyword)
-    },
-    // 当选择框获得焦点时，重新加载选项（如果没有搜索关键字）
-    handleSelectFocus (item, formDataContext) {
-      if (!item.searchKeyword || item.searchKeyword === '') {
-        this.getOptions(item, formDataContext)
-      }
-    },
-    addFormInstance () {
-      const newId = uuidv4()
-      const newFormData = {}
-      const clonedFormItems = this.config.formItem ? JSON.parse(JSON.stringify(this.config.formItem)) : []
-
-      if (clonedFormItems.length > 0) {
-        for (const item of clonedFormItems) {
-          newFormData[item.key] = undefined
-          if (item.formType === 'select' && item.keyName) {
-            this.$set(item, 'options', [])
-            this.$set(item, 'loadingOptions', false)
-            this.$set(item, 'searchKeyword', '')
-            this.getOptions(item, newFormData)
-          }
-        }
-      }
-
-      this.formInstances.push({
-        id: newId,
-        formData: newFormData,
-        formItems: clonedFormItems
-      })
-    },
-    deleteFormInstance (id) {
-      if (this.formInstances.length > 1) {
-        this.formInstances = this.formInstances.filter(instance => instance.id !== id)
-      } else {
-        message.warning('至少需要保留一个表单实例。')
-      }
-    },
-    getRules (item) {
-      const rules = []
-      if (item.rule && (item.rule.required === true || item.rule.required === 'true')) {
-        rules.push({
-          required: true,
-          message: `请输入${item.title}`,
-          trigger: 'blur'
-        })
-      }
-      return rules
-    },
-    async onSubmit () {
-      let allFormsValid = true
-      const allFormsData = []
-
-      for (const instance of this.formInstances) {
-        const formRef = this.$refs['formModel_' + instance.id][0]
-        if (formRef) {
-          try {
-            await formRef.validate()
-            allFormsData.push(instance.formData)
-          } catch (error) {
-            allFormsValid = false
-            break
-          }
-        }
-      }
-
-      if (allFormsValid) {
-        message.success('表单提交成功！')
-        this.$emit('submit', allFormsData)
-      } else {
-        message.error('部分表单校验失败，请检查。')
-      }
-    },
-    getAllFormsData () {
-      return new Promise((resolve, reject) => {
-        let allFormsValid = true
-        const allFormsData = []
-        let validatedCount = 0
-
-        if (this.formInstances.length === 0) {
-          resolve([])
-          return
-        }
-
-        this.formInstances.forEach((instance, index) => {
-          const formRef = this.$refs['formModel_' + instance.id][0]
-          if (formRef) {
-            formRef.validate(valid => {
-              validatedCount++
-              if (valid) {
-                allFormsData.push(instance.formData)
-              } else {
-                allFormsValid = false
-              }
-
-              if (validatedCount === this.formInstances.length) {
-                if (allFormsValid) {
-                  resolve(allFormsData)
-                } else {
-                  reject(new Error('部分表单校验失败。'))
-                }
-              }
-            })
-          } else {
-            console.warn(`无法获取表单实例 ${instance.id} 的引用进行校验。`)
-            allFormsValid = false
-            validatedCount++
-            if (validatedCount === this.formInstances.length) {
-              if (allFormsValid) {
-                resolve(allFormsData)
-              } else {
-                reject(new Error('部分表单校验失败。'))
-              }
-            }
-          }
-        })
-      })
-    }
-  }
-}
-</script>
-
-<template>
-  <div class="h-add-native-form-group" :class="[`h-add-native-form-${formStyle}`]">
-    <a-skeleton :loading="loading" :paragraph="{ rows: 4 }" />
-    <div v-if="!loading">
-      <div v-for="(formInstance, formIndex) in formInstances" :key="formInstance.id" class="form-instance-wrapper">
-        <div v-if="config.manyForm" class="form-instance-title">药品 {{ formIndex + 1 }}</div>
-        <a-form-model
-          :ref="'formModel_' + formInstance.id"
-          :model="formInstance.formData"
-          v-bind="formItemLayoutComputed"
-          :layout="config.xAddFormLayout || 'horizontal'"
-        >
-          <a-row :gutter="16">
-            <a-col :span="8" v-for="(item, itemIndex) in formInstance.formItems" :key="itemIndex">
-              <a-form-item
-                :label="item.title"
-                :prop="item.key"
-                :rules="getRules(item)"
-              >
-                <a-input
-                  v-if="item.formType === 'input'"
-                  v-model="formInstance.formData[item.key]"
-                  :placeholder="'请输入' + item.title"
-                />
-                <a-select
-                  v-else-if="item.formType === 'select'"
-                  v-model="formInstance.formData[item.key]"
-                  :placeholder="item.loadingOptions ? '加载中...' : '请选择' + item.title"
-                  :options="item.options"
-                  :loading="item.loadingOptions"
-                  show-search
-                  allowClear
-                  :filter-option="false"
-                  @search="(value) => handleSelectSearch(value, item, formInstance.formData)"
-                  @focus="() => handleSelectFocus(item, formInstance.formData)"
-                  :dropdownMatchSelectWidth="false"
-                  :dropdownStyle="{ minWidth: '200px' }"
-                >
-                  <a-spin v-if="item.loadingOptions" slot="notFoundContent" size="small" />
-                </a-select>
-                <!-- 可以根据需要添加其他表单类型，例如 select, datePicker 等 -->
-              </a-form-item>
-            </a-col>
-          </a-row>
-        </a-form-model>
-        <a-divider v-if="config.manyForm && formIndex < formInstances.length - 1" />
-      </div>
-
-      <!-- 全局添加/删除按钮，只在所有表单实例之后显示 -->
-      <a-row v-if="config.manyForm" type="flex" justify="start" style="margin-top: 20px; gap: 10px;">
-        <a-button v-if="config.showAddButton" class="form-action-button" icon="plus" @click="addFormInstance"></a-button>
-        <a-button v-if="config.showDeleteButton && formInstances.length > 1" class="form-action-button" icon="minus" @click="deleteFormInstance(formInstances[formInstances.length - 1].id)"></a-button>
-      </a-row>
-
-      <a-row v-if="config.showSubmitBtn" type="flex" justify="start" style="margin-top: 20px;">
-        <a-col>
-          <a-button type="primary" @click="onSubmit">{{ config.btnName || '提交' }}</a-button>
-        </a-col>
-      </a-row>
-    </div>
-  </div>
-</template>
-
-<style scoped lang="less">
-.h-add-native-form-group {
-  // 基础样式，对应 defaultForm
-  &.h-add-native-form-defaultForm {
-    padding: 0px;
-    background-color: #fff;
-    border-radius: 8px;
-  }
-}
-
-.form-instance-wrapper {
-  margin-bottom: 20px;
-  /* 移除边框和背景色，使其看起来像一个整体 */
-  /* border: 1px solid #e8e8e8;
-  border-radius: 4px;
-  background-color: #fff; */
-}
-
-.form-instance-title {
-  font-weight: bold;
-  font-size: 16px;
-  margin-bottom: 10px;
-  padding-left: 10px; /* 与表单项对齐 */
-  color: rgba(0, 0, 0, 0.85);
-}
-
-.form-action-button {
-  width: 40px;
-  height: 40px;
-  border-radius: 8px;
-  border: 1px solid #d9d9d9;
-  background-color: #fff;
-  color: rgba(0, 0, 0, 0.65);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  &:hover {
-    border-color: #40a9ff; /* 鼠标悬停时边框颜色 */
-    color: #40a9ff; /* 鼠标悬停时图标颜色 */
-  }
-}
-
-:deep(.ant-card-extra) {
-  padding: 0;
-}
-
-:deep(.ant-form-item) {
-  margin-bottom: 5px;
-}
-
-:deep(.ant-form-inline .ant-form-item) {
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: 12px;
-
-  .ant-form-item-control-wrapper {
-    min-width: 0;
-  }
-}
-
-// :deep(.ant-form-inline .ant-form-item-label) {
-//   padding-right: 8px; /* 调整标签的右内边距，增加标签和控件的间距 */
-// }
-</style>
+<script>
+import { v4 as uuidv4 } from 'uuid'
+import {
+  FormModel,
+  Input,
+  Button,
+  Row,
+  Col,
+  Card,
+  Divider,
+  message,
+  Select,
+  Spin
+} from 'ant-design-vue'
+import { getConfigByNameAsync, runLogic } from '@vue2-client/services/api/common'
+import { mapState } from 'vuex'
+import { debounce } from 'lodash'
+
+export default {
+  name: 'HAddNativeForm',
+  components: {
+    'a-form-model': FormModel,
+    'a-form-item': FormModel.Item,
+    'a-input': Input,
+    'a-button': Button,
+    'a-row': Row,
+    'a-col': Col,
+    'a-card': Card,
+    'a-divider': Divider,
+    'a-select': Select,
+    'a-select-option': Select.Option,
+    'a-spin': Spin
+  },
+  props: {
+    queryParamsName: {
+      type: String,
+      required: true
+    },
+    serviceName: {
+      type: String,
+      default: process.env.VUE_APP_SYSTEM_NAME
+    },
+    formStyle: {
+      type: String,
+      default: 'defaultForm'
+    }
+  },
+  data () {
+    return {
+      loading: true,
+      config: {},
+      formInstances: []
+    }
+  },
+  computed: {
+    formItemLayoutComputed () {
+      // 如果是 inline 布局，则不绑定 formItemLayout，让其使用 Ant Design Vue 默认的 inline 样式
+      if (this.config.xAddFormLayout === 'inline') {
+        return {}
+      }
+      if (this.config.formItemLayout) {
+        return {
+          labelCol: { span: this.config.formItemLayout.labelCol },
+          wrapperCol: { span: this.config.formItemLayout.wrapperCol }
+        }
+      }
+      return {}
+    },
+    ...mapState('account', { currUser: 'user' })
+  },
+  created () {
+    this.debouncedSearch = debounce(this.performSearch, 500)
+    this.fetchConfigAndInitializeForms()
+  },
+  methods: {
+    async fetchConfigAndInitializeForms () {
+      try {
+        this.loading = true
+        const res = await getConfigByNameAsync(this.queryParamsName, this.serviceName)
+        if (res) {
+          this.config = res
+          if (this.config.manyForm) {
+            this.addFormInstance()
+          } else {
+            this.addFormInstance()
+          }
+        } else {
+          console.error('HAddNativeForm: 未能获取到配置内容。')
+          message.error('未能获取到表单配置，请检查配置名称或网络。')
+        }
+      } catch (error) {
+        console.error('HAddNativeForm: 获取配置时发生错误:', error)
+        message.error('获取表单配置时发生错误。')
+      } finally {
+        this.loading = false
+      }
+    },
+    async getOptions (item, formDataContext, searchKeyword = '') {
+      if (!item.keyName) {
+        return
+      }
+
+      this.$set(item, 'loadingOptions', true)
+      let fetchedOptions = []
+
+      try {
+        if (item.keyName.startsWith('logic@')) {
+          const logicName = item.keyName.substring(6)
+          const result = await runLogic(logicName, { searchKeyword: searchKeyword }, this.serviceName)
+
+          if (Array.isArray(result)) {
+            fetchedOptions = result.map(opt => ({
+              label: opt.label || opt.name || opt.text,
+              value: (opt.value || opt.id) + ''
+            }))
+          } else {
+            console.warn(`Logic '${logicName}' did not return an array for options. Result:`, result)
+          }
+        } else if (item.keyName.startsWith('config@')) {
+          const configName = item.keyName.substring(7)
+          const res = await getConfigByNameAsync(configName, this.serviceName)
+          if (res && res.value && Array.isArray(res.value)) {
+            fetchedOptions = res.value.map(opt => ({
+              label: opt.label || opt.name || opt.text,
+              value: (opt.value || opt.id) + ''
+            }))
+          } else {
+            console.warn(`Config '${configName}' did not return a valid 'value' array for options. Result:`, res)
+          }
+        } else {
+          // 全局字典
+          if (this.$appdata && typeof this.$appdata.getDictionaryList === 'function') {
+            const dictionaryList = this.$appdata.getDictionaryList(item.keyName)
+            if (Array.isArray(dictionaryList)) {
+              fetchedOptions = dictionaryList.map(opt => ({
+                label: opt.text,
+                value: opt.value + ''
+              }))
+            } else {
+              console.warn(`Global dictionary '${item.keyName}' did not return an array. Result:`, dictionaryList)
+            }
+          } else {
+            console.error('$appdata.getDictionaryList is not available. Please ensure it\'s globally provided.')
+          }
+        }
+      } catch (error) {
+        console.error(`Error fetching options for item '${item.key}':`, error)
+        fetchedOptions = []
+      } finally {
+        this.$set(item, 'options', fetchedOptions)
+        this.$set(item, 'loadingOptions', false)
+      }
+    },
+    // 搜索处理函数，使用 debounce 优化性能
+    handleSelectSearch (value, item, formDataContext) {
+      // 更新搜索关键字，并触发 debouncedSearch
+      this.$set(item, 'searchKeyword', value)
+      this.debouncedSearch(item, formDataContext)
+    },
+    // 执行实际的搜索操作
+    performSearch (item, formDataContext) {
+      this.getOptions(item, formDataContext, item.searchKeyword)
+    },
+    // 当选择框获得焦点时，重新加载选项（如果没有搜索关键字）
+    handleSelectFocus (item, formDataContext) {
+      if (!item.searchKeyword || item.searchKeyword === '') {
+        this.getOptions(item, formDataContext)
+      }
+    },
+    addFormInstance () {
+      const newId = uuidv4()
+      const newFormData = {}
+      const clonedFormItems = this.config.formItem ? JSON.parse(JSON.stringify(this.config.formItem)) : []
+
+      if (clonedFormItems.length > 0) {
+        for (const item of clonedFormItems) {
+          newFormData[item.key] = undefined
+          if (item.formType === 'select' && item.keyName) {
+            this.$set(item, 'options', [])
+            this.$set(item, 'loadingOptions', false)
+            this.$set(item, 'searchKeyword', '')
+            this.getOptions(item, newFormData)
+          }
+        }
+      }
+
+      this.formInstances.push({
+        id: newId,
+        formData: newFormData,
+        formItems: clonedFormItems
+      })
+    },
+    deleteFormInstance (id) {
+      if (this.formInstances.length > 1) {
+        this.formInstances = this.formInstances.filter(instance => instance.id !== id)
+      } else {
+        message.warning('至少需要保留一个表单实例。')
+      }
+    },
+    getRules (item) {
+      const rules = []
+      if (item.rule && (item.rule.required === true || item.rule.required === 'true')) {
+        rules.push({
+          required: true,
+          message: `请输入${item.title}`,
+          trigger: 'blur'
+        })
+      }
+      return rules
+    },
+    async onSubmit () {
+      let allFormsValid = true
+      const allFormsData = []
+
+      for (const instance of this.formInstances) {
+        const formRef = this.$refs['formModel_' + instance.id][0]
+        if (formRef) {
+          try {
+            await formRef.validate()
+            allFormsData.push(instance.formData)
+          } catch (error) {
+            allFormsValid = false
+            break
+          }
+        }
+      }
+
+      if (allFormsValid) {
+        message.success('表单提交成功！')
+        this.$emit('submit', allFormsData)
+      } else {
+        message.error('部分表单校验失败，请检查。')
+      }
+    },
+    getAllFormsData () {
+      return new Promise((resolve, reject) => {
+        let allFormsValid = true
+        const allFormsData = []
+        let validatedCount = 0
+
+        if (this.formInstances.length === 0) {
+          resolve([])
+          return
+        }
+
+        this.formInstances.forEach((instance, index) => {
+          const formRef = this.$refs['formModel_' + instance.id][0]
+          if (formRef) {
+            formRef.validate(valid => {
+              validatedCount++
+              if (valid) {
+                allFormsData.push(instance.formData)
+              } else {
+                allFormsValid = false
+              }
+
+              if (validatedCount === this.formInstances.length) {
+                if (allFormsValid) {
+                  resolve(allFormsData)
+                } else {
+                  reject(new Error('部分表单校验失败。'))
+                }
+              }
+            })
+          } else {
+            console.warn(`无法获取表单实例 ${instance.id} 的引用进行校验。`)
+            allFormsValid = false
+            validatedCount++
+            if (validatedCount === this.formInstances.length) {
+              if (allFormsValid) {
+                resolve(allFormsData)
+              } else {
+                reject(new Error('部分表单校验失败。'))
+              }
+            }
+          }
+        })
+      })
+    }
+  }
+}
+</script>
+
+<template>
+  <div class="h-add-native-form-group" :class="[`h-add-native-form-${formStyle}`]">
+    <a-skeleton :loading="loading" :paragraph="{ rows: 4 }" />
+    <div v-if="!loading">
+      <div v-for="(formInstance, formIndex) in formInstances" :key="formInstance.id" class="form-instance-wrapper">
+        <div v-if="config.manyForm" class="form-instance-title">药品 {{ formIndex + 1 }}</div>
+        <a-form-model
+          :ref="'formModel_' + formInstance.id"
+          :model="formInstance.formData"
+          v-bind="formItemLayoutComputed"
+          :layout="config.xAddFormLayout || 'horizontal'"
+        >
+          <a-row :gutter="16">
+            <a-col :span="8" v-for="(item, itemIndex) in formInstance.formItems" :key="itemIndex">
+              <a-form-item
+                :label="item.title"
+                :prop="item.key"
+                :rules="getRules(item)"
+              >
+                <a-input
+                  v-if="item.formType === 'input'"
+                  v-model="formInstance.formData[item.key]"
+                  :placeholder="'请输入' + item.title"
+                />
+                <a-select
+                  v-else-if="item.formType === 'select'"
+                  v-model="formInstance.formData[item.key]"
+                  :placeholder="item.loadingOptions ? '加载中...' : '请选择' + item.title"
+                  :options="item.options"
+                  :loading="item.loadingOptions"
+                  show-search
+                  allowClear
+                  :filter-option="false"
+                  @search="(value) => handleSelectSearch(value, item, formInstance.formData)"
+                  @focus="() => handleSelectFocus(item, formInstance.formData)"
+                  :dropdownMatchSelectWidth="false"
+                  :dropdownStyle="{ minWidth: '200px' }"
+                >
+                  <a-spin v-if="item.loadingOptions" slot="notFoundContent" size="small" />
+                </a-select>
+                <!-- 可以根据需要添加其他表单类型，例如 select, datePicker 等 -->
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-form-model>
+        <a-divider v-if="config.manyForm && formIndex < formInstances.length - 1" />
+      </div>
+
+      <!-- 全局添加/删除按钮，只在所有表单实例之后显示 -->
+      <a-row v-if="config.manyForm" type="flex" justify="start" style="margin-top: 20px; gap: 10px;">
+        <a-button v-if="config.showAddButton" class="form-action-button" icon="plus" @click="addFormInstance"></a-button>
+        <a-button v-if="config.showDeleteButton && formInstances.length > 1" class="form-action-button" icon="minus" @click="deleteFormInstance(formInstances[formInstances.length - 1].id)"></a-button>
+      </a-row>
+
+      <a-row v-if="config.showSubmitBtn" type="flex" justify="start" style="margin-top: 20px;">
+        <a-col>
+          <a-button type="primary" @click="onSubmit">{{ config.btnName || '提交' }}</a-button>
+        </a-col>
+      </a-row>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="less">
+.h-add-native-form-group {
+  // 基础样式，对应 defaultForm
+  &.h-add-native-form-defaultForm {
+    padding: 0px;
+    background-color: #fff;
+    border-radius: 8px;
+  }
+}
+
+.form-instance-wrapper {
+  margin-bottom: 20px;
+  /* 移除边框和背景色，使其看起来像一个整体 */
+  /* border: 1px solid #e8e8e8;
+  border-radius: 4px;
+  background-color: #fff; */
+}
+
+.form-instance-title {
+  font-weight: bold;
+  font-size: 16px;
+  margin-bottom: 10px;
+  padding-left: 10px; /* 与表单项对齐 */
+  color: rgba(0, 0, 0, 0.85);
+}
+
+.form-action-button {
+  width: 40px;
+  height: 40px;
+  border-radius: 8px;
+  border: 1px solid #d9d9d9;
+  background-color: #fff;
+  color: rgba(0, 0, 0, 0.65);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &:hover {
+    border-color: #40a9ff; /* 鼠标悬停时边框颜色 */
+    color: #40a9ff; /* 鼠标悬停时图标颜色 */
+  }
+}
+
+:deep(.ant-card-extra) {
+  padding: 0;
+}
+
+:deep(.ant-form-item) {
+  margin-bottom: 5px;
+}
+
+:deep(.ant-form-inline .ant-form-item) {
+  margin-right: 0;
+  margin-top: 0;
+  margin-bottom: 12px;
+
+  .ant-form-item-control-wrapper {
+    min-width: 0;
+  }
+}
+
+// :deep(.ant-form-inline .ant-form-item-label) {
+//   padding-right: 8px; /* 调整标签的右内边距，增加标签和控件的间距 */
+// }
+</style>