refactor: improve error message display and validation feedback

- Enhanced the error alert in Form.vue to include a fitting content style and text truncation for better readability.
- Updated the validation message construction in ConditionBox.vue to format table relationships more clearly, improving user feedback during validation.

Author: cn-xufei

packages/business/src/views/verification/Form.vue

@@ -1074,9 +1074,14 @@ provide('ConnectorMap', ConnectorMap)
 
       <template v-if="!!errorMessageLevel">
         <el-divider class="mx-4" direction="vertical" />
-        <el-alert type="error" show-icon :closable="false" class="w-auto">
+        <el-alert
+          type="error"
+          show-icon
+          :closable="false"
+          class="w-auto fit-content"
+        >
           <template #title>
-            <div v-html="jointErrorMessage" />
+            <div class="text-truncate" v-html="jointErrorMessage" />
           </template>
         </el-alert>
       </template>

packages/business/src/views/verification/components/ConditionBox.vue

@@ -1151,12 +1151,13 @@ const validate = async () => {
       message = i18n.t(
         'packages_business_verification_form_index_field_count_is_not_equal',
       )
+      const arr = []
       countNotArr.forEach((el, elIndex) => {
         if (elIndex <= SHOW_COUNT) {
-          message += `${el.source.table} `
-          message += `${el.target.table} `
+          arr.push(`${el.source.table} → ${el.target.table} `)
         }
       })
+      message += arr.join(', ')
       if (countNotArr.length > SHOW_COUNT) {
         message += `...${countNotArr.length - SHOW_COUNT}`
       }