refactor: enhance TableSelector component with error handling and localization

- Simplified imports by removing unused APIs and consolidating component imports.
- Added error handling for table selection to provide user feedback when tables do not exist.
- Implemented localization for error messages using the `useI18n` hook.
- Updated clipboard submission logic to prevent adding invalid tables and improved autofix functionality.

Author: cn-xufei

packages/dag/src/components/form/table-selector/TableSelector.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
-import {
-  connectionsApi,
-  metadataInstancesApi,
-  taskApi,
-  workerApi,
-} from '@tap/api'
-import { RightBoldOutlined, VEmpty } from '@tap/component'
-import VIcon from '@tap/component/src/base/VIcon'
+import { metadataInstancesApi, taskApi } from '@tap/api'
+import { RightBoldOutlined, VEmpty, VIcon } from '@tap/component'
 import OverflowTooltip from '@tap/component/src/overflow-tooltip'
+import { useI18n } from '@tap/i18n'
 import { computed, ref, watch } from 'vue'
 import { RecycleScroller } from 'vue-virtual-scroller'
 import { useStore } from 'vuex'
@@ -17,6 +12,7 @@ import { getPrimaryKeyTablesByType } from '../../../util'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
 const store = useStore()
+const { t } = useI18n()
 
 // Props
 const props = defineProps({
@@ -25,7 +21,7 @@ const props = defineProps({
     required: true,
   },
   value: {
-    type: Array as PropType<string[]>,
+    type: Array,
     default: () => [],
   },
   disabled: Boolean,
@@ -232,17 +228,48 @@ const changeSeletedMode = () => {
   }
 }
 
+const getErrorTables = (tables: string[]) => {
+  const errors = {}
+  const allTables = table.value.tables
+
+  if (!loading.value) {
+    tables.forEach((table) => {
+      if (!allTables.includes(table)) {
+        errors[table] = t(
+          'packages_form_component_table_selector_error_not_exit',
+        )
+      }
+    })
+  }
+
+  errorTables.value = errors
+  return errors
+}
+
 const submitClipboard = () => {
-  selected.value.tables = clipboardTables.value
+  const errorTables = getErrorTables(clipboardTables.value)
+
+  if (Object.keys(errorTables).length) return
+
+  selected.value.tables = Array.from(
+    new Set(selected.value.tables.concat(clipboardTables.value)),
+  )
   isOpenClipMode.value = false
   emit('change', selected.value.tables)
 }
 
 const autofix = () => {
-  selected.value.tables = selected.value.tables.filter(
-    (t) => !errorTables.value[t],
-  )
-  emit('change', selected.value.tables)
+  if (isOpenClipMode.value) {
+    clipboardValue.value = clipboardTables.value
+      .filter((t) => !errorTables.value[t])
+      .join(', ')
+    errorTables.value = {}
+  } else {
+    selected.value.tables = selected.value.tables.filter(
+      (t) => !errorTables.value[t],
+    )
+    emit('change', selected.value.tables)
+  }
 }
 
 const getTableInfo = (table: string) => {
@@ -252,7 +279,7 @@ const getTableInfo = (table: string) => {
 // Watch
 watch(
   () => props.value,
-  (val) => {
+  (val: string[]) => {
     selected.value.tables = val || []
   },
   { immediate: true },
@@ -641,15 +668,14 @@ getTables()
           <span class="color-danger"
             >*{{ $t('packages_form_component_table_selector_error') }}</span
           >
-          <ElLink class="ml-2" type="primary" @click="autofix">{{
+          <el-button text class="ml-1" type="primary" @click="autofix">{{
             $t('packages_form_component_table_selector_autofix')
-          }}</ElLink>
+          }}</el-button>
         </div>
         <div v-if="isOpenClipMode" class="px-4 pb-4 text-end">
-          <!--          <ElButton @click="changeSeletedMode()">{{ $t('public_button_cancel') }}</ElButton>-->
-          <ElButton type="primary" @click="submitClipboard">{{
+          <el-button type="primary" @click="submitClipboard">{{
             $t('public_button_confirm')
-          }}</ElButton>
+          }}</el-button>
         </div>
       </div>
     </div>