Merge pull request #602 from tapdata/fix/TAP-12135-api

fix: enhance parameter name validation with tooltip feedback and rege…

Author: feynmx

packages/business/src/views/data-server/Drawer.vue

@@ -46,7 +46,7 @@ import FieldsTree from './FieldsTree.vue'
 import FieldsTreePreview from './FieldsTreePreview.vue'
 import MqlEditor from './MqlEditor.vue'
 
-import { getTableOptions, useDrawer } from './shared'
+import { getTableOptions, PARAM_NAME_PATTERN, useDrawer } from './shared'
 import type { InputInstance, SelectInstance, TableInstance } from 'element-plus'
 
 // Types
@@ -640,6 +640,45 @@ const tabChanged = (tab: string | number) => {
 
 const handleChangeApiType = () => {
   form.value.params = getDefaultParams(form.value.apiType)
+  focusedParamNameIndex.value = null
+  hoveredParamNameIndex.value = null
+}
+
+const focusedParamNameIndex = ref<number | null>(null)
+const hoveredParamNameIndex = ref<number | null>(null)
+
+const getParamNameError = (index: number) => {
+  const paramName = form.value.params?.[index]?.name || ''
+
+  if (!paramName.trim()) {
+    return t('packages_business_data_server_drawer_qingshurucanshu')
+  }
+
+  if (!PARAM_NAME_PATTERN.test(paramName)) {
+    return t('packages_business_data_server_drawer_geshicuowu')
+  }
+
+  return ''
+}
+
+const isParamNameTipVisible = (index: number) => {
+  return (
+    !!getParamNameError(index) &&
+    (focusedParamNameIndex.value === index ||
+      hoveredParamNameIndex.value === index)
+  )
+}
+
+const hideFocusedParamNameTip = (index: number) => {
+  if (focusedParamNameIndex.value === index) {
+    focusedParamNameIndex.value = null
+  }
+}
+
+const hideHoveredParamNameTip = (index: number) => {
+  if (hoveredParamNameIndex.value === index) {
+    hoveredParamNameIndex.value = null
+  }
 }
 
 const handleChangeTable = () => {
@@ -1747,16 +1786,33 @@ provide('form', form)
             min-width="80"
           >
             <template #default="{ row, $index }">
-              <div v-if="editable(row, form)">
-                <ElFormItem
-                  :prop="`params.${$index}.name`"
-                  :error="!form.params[$index].name ? 'true' : ''"
-                  :show-message="false"
-                  :rules="rules.param"
-                  class="mb-0"
+              <div
+                v-if="editable(row, form)"
+                @mouseenter="hoveredParamNameIndex = $index"
+                @mouseleave="hideHoveredParamNameTip($index)"
+              >
+                <ElTooltip
+                  :disabled="!getParamNameError($index)"
+                  :content="getParamNameError($index)"
+                  :hide-after="0"
+                  transition="none"
+                  :visible="isParamNameTipVisible($index)"
+                  placement="top"
                 >
-                  <ElInput v-model="form.params[$index].name" />
-                </ElFormItem>
+                  <ElFormItem
+                    :prop="`params.${$index}.name`"
+                    :error="getParamNameError($index)"
+                    :show-message="false"
+                    :rules="rules.param"
+                    class="mb-0"
+                  >
+                    <ElInput
+                      v-model="form.params[$index].name"
+                      @focus="focusedParamNameIndex = $index"
+                      @blur="hideFocusedParamNameTip($index)"
+                    />
+                  </ElFormItem>
+                </ElTooltip>
               </div>
               <div v-else>{{ row.name }}</div>
             </template>
@@ -1800,7 +1856,7 @@ provide('form', form)
           <ElTableColumn
             :label="$t('packages_business_data_server_drawer_required')"
             prop="required"
-            min-width="60"
+            min-width="80"
             align="center"
           >
             <template #default="{ row, $index }">

packages/business/src/views/data-server/shared.ts

@@ -3,6 +3,8 @@ import { uid } from '@tap/shared'
 import { merge } from 'lodash-es'
 import type { Ref } from 'vue'
 
+export const PARAM_NAME_PATTERN = /^[a-z$_\u4E00-\u9FA5][\w$\u4E00-\u9FA5]*$/i
+
 export const makeTree = (data: any[]) => {
   const root: any = {
     children: [],
@@ -91,27 +93,30 @@ export const useDrawer = (t: any, apiApplication?: Ref<any>) => {
     'tidb',
   ]
   // Regex validation patterns
-  const PARAM_PATTERN = /^[a-z$_\u4E00-\u9FA5][\w$\u4E00-\u9FA5]*$/i
   const PATH_PATTERN = /^(?!\/)[\w$/-]+$/
 
   // Validation rules
-  const validateParams = (rule: any, value: string, callback: Function) => {
-    if (PARAM_PATTERN.test(value)) {
+  const validateParams = (_rule: any, value: string, callback: Function) => {
+    const paramName = value || ''
+
+    if (!paramName.trim()) {
+      callback(t('packages_business_data_server_drawer_qingshurucanshu'))
+    } else if (PARAM_NAME_PATTERN.test(paramName)) {
       callback()
     } else {
       callback(t('packages_business_data_server_drawer_geshicuowu'))
     }
   }
 
-  const validateBasePath = (rule: any, value: string, callback: Function) => {
+  const validateBasePath = (_rule: any, value: string, callback: Function) => {
     if (!value || PATH_PATTERN.test(value)) {
       callback()
     } else {
       callback(t('packages_business_data_server_drawer_validate'))
     }
   }
 
-  const validatePrefix = (rule: any, value: string, callback: Function) => {
+  const validatePrefix = (_rule: any, value: string, callback: Function) => {
     if (PATH_PATTERN.test(value) || value === '') {
       callback()
     } else {