Develop

apps/daas/src/components.d.ts

@@ -2,6 +2,7 @@
 // @ts-nocheck
 // Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
 export {}
 
 /* prettier-ignore */
@@ -34,11 +35,11 @@ declare module 'vue' {
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElEmpty: typeof import('element-plus/es')['ElEmpty']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
-    ElIconArrowRight: typeof import('@element-plus/icons-vue')['ArrowRight']
     ElIconCircleCloseFilled: typeof import('@element-plus/icons-vue')['CircleCloseFilled']
     ElIconCirclePlus: typeof import('@element-plus/icons-vue')['CirclePlus']
     ElIconLoading: typeof import('@element-plus/icons-vue')['Loading']
@@ -64,7 +65,6 @@ declare module 'vue' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSelectLoading: typeof import('element-plus/es')['ElSelectLoading']
     ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
     ElSkeleton: typeof import('element-plus/es')['ElSkeleton']
     ElSkeletonItem: typeof import('element-plus/es')['ElSkeletonItem']

package.json

@@ -66,8 +66,7 @@
       "vue-virtual-scroller": "2.0.0-beta.8"
     },
     "patchedDependencies": {
-      "@formily/element-plus@1.1.0": "patches/@formily__element-plus@1.1.0.patch",
-      "@formily/vue@2.3.3": "patches/@formily__vue@2.3.3.patch"
+      "@formily/element-plus@1.1.0": "patches/@formily__element-plus@1.1.0.patch"
     }
   },
   "prettier": "@sxzz/prettier-config"

packages/dag/src/components/form/schema-preview/index.jsx

@@ -89,7 +89,9 @@ export const SchemaPreview = defineComponent({
 
         tableName.value =
           schema.name || form.values.tableName || form.values.name
-        emit('update-table-name', tableName.value)
+
+        // 仅仅为了动态日期后缀更新，增加这个事件有风险，会循环更新表名
+        // emit('update-table-name', tableName.value)
 
         const {
           isMultiIndex: _isMultiIndex,

packages/dag/src/components/form/table-select/index.jsx

@@ -3,7 +3,7 @@ import { connect, mapProps } from '@formily/vue'
 
 import { metadataInstancesApi, taskApi } from '@tap/api'
 import { VEmpty } from '@tap/component'
-import { AsyncSelect } from '@tap/form'
+import { InfiniteSelect } from '@tap/form'
 import i18n from '@tap/i18n'
 
 import {
@@ -17,8 +17,8 @@ import {
 import { useStore } from 'vuex'
 import './style.scss'
 
-const useTableExist = (attrs, selectRef, connectionId) => {
-  if (!attrs.allowCreate) {
+const useTableExist = (props, selectRef, connectionId) => {
+  if (!props.allowCreate) {
     return {
       showNotExistsTip: ref(false),
       leftPosition: ref(''),
@@ -56,9 +56,20 @@ const useTableExist = (attrs, selectRef, connectionId) => {
       showNotExistsTip.value = true
     }, 10)
   }
-  const handleChange = () => {
-    showNotExistsTip.value = false
+
+  const handleChange = (value, option, created) => {
+    clearTimeout(timer)
+    if (created) {
+      setTagPosition(value)
+
+      timer = setTimeout(() => {
+        showNotExistsTip.value = true
+      }, 10)
+    } else {
+      showNotExistsTip.value = false
+    }
   }
+
   const setTagPosition = (tableName) => {
     if (!$input || !tableName) return
 
@@ -76,10 +87,8 @@ const useTableExist = (attrs, selectRef, connectionId) => {
   let baseLeftPosition
   let leftPosition = ref('')
 
-  watch(() => attrs.value, handleChange)
-
   onMounted(() => {
-    /*$input = selectRef.value.$el.querySelector('input')
+    $input = selectRef.value.$el.querySelector('input')
     const { fontSize, fontFamily, fontWeight } = getComputedStyle($input)
 
     inputStyle = {
@@ -89,11 +98,11 @@ const useTableExist = (attrs, selectRef, connectionId) => {
       visibility: 'hidden',
     }
 
-    // 8: .el-input__prefix-inner > :last-child {margin-right: 8px;}
+    // 12: el-select__wrapper 左内边距
     // 4: 间距
-    baseLeftPosition = parseInt($input.offsetLeft) + 4*/
+    baseLeftPosition = Number.parseInt($input.offsetLeft) + 12 + 4
 
-    checkTableExist(attrs.value)
+    checkTableExist(props.modelValue)
   })
 
   return {
@@ -108,7 +117,7 @@ export const TableSelect = connect(
   observer(
     defineComponent({
       name: 'TableSelect',
-      props: ['reloadTime', 'connectionId', 'modelValue'],
+      props: ['reloadTime', 'connectionId', 'modelValue', 'allowCreate'],
       setup(props, { attrs }) {
         const select = ref(null)
         const store = useStore()
@@ -123,16 +132,13 @@ export const TableSelect = connect(
           }
         })
 
-        const { showNotExistsTip, leftPosition, handleCreated } = useTableExist(
-          attrs,
-          select,
-          props.connectionId,
-        )
+        const { showNotExistsTip, leftPosition, handleCreated, handleChange } =
+          useTableExist(props, select, props.connectionId)
 
         const loading = ref(false)
 
         const loadSelectData = () => {
-          select.value.getInnerRef()?.refresh?.()
+          select.value.refresh?.()
         }
 
         const loadSchema = async (keys) => {
@@ -162,16 +168,21 @@ export const TableSelect = connect(
           unWatch()
         })
 
-        return () => {
-          const scopedSlots = {
-            'created-option': ({ value }) => (
-              <span class="flex align-center gap-1">
-                {value}
-                <ElTag class="ml-1">
+        const renderCreatedOption = (scope) => {
+          return scope.value ? (
+            <ElOption created value={scope.value}>
+              <span class="flex align-center gap-2">
+                {scope.value}
+                <ElTag disable-transitions>
                   {i18n.t('packages_dag_table_not_exist')}
                 </ElTag>
               </span>
-            ),
+            </ElOption>
+          ) : null
+        }
+
+        return () => {
+          const scopedSlots = {
             empty: ({ query }) =>
               query ? (
                 <div class="pt-2">
@@ -203,6 +214,10 @@ export const TableSelect = connect(
               ),
           }
 
+          if (props.allowCreate) {
+            scopedSlots['created-option'] = renderCreatedOption
+          }
+
           if (showNotExistsTip.value) {
             scopedSlots.prefix = () => (
               <ElTag
@@ -215,19 +230,20 @@ export const TableSelect = connect(
           }
 
           return (
-            <AsyncSelect
+            <InfiniteSelect
               {...attrs}
               modelValue={props.modelValue}
               loading={loading.value}
-              class="async-select"
+              class="table-select"
               ref={select}
-              onCreate={handleCreated}
+              hasCreate={props.allowCreate}
               itemType={attrs.itemType || 'string'}
               itemQuery={attrs.itemQuery || 'original_name'}
               params={params.value}
+              onSelect={handleChange}
             >
               {scopedSlots}
-            </AsyncSelect>
+            </InfiniteSelect>
           )
         }
       },

packages/dag/src/components/form/table-select/style.scss

@@ -1,13 +1,14 @@
-.async-select {
+.table-select {
   //.el-input--prefix .el-input__inner {
   //  // prefix 用来做Tag显示, 不需要padding
   //  padding-left: 15px;
   //}
-  .el-input__prefix-inner > :last-child {
-    margin-right: 0;
+  .el-select__prefix:has(.prefix-tag) {
+    margin-left: -6px;
   }
-  &.is-drop-menu-visible {
-    .el-input__prefix {
+  // aria-describedby 表明下拉菜单显示
+  .is-focused[aria-describedby] {
+    .el-select__prefix {
       display: none;
     }
   }

packages/dag/src/components/migration/SettingPanel.vue

@@ -1647,6 +1647,12 @@ const schema = {
                 class: 'flex align-center',
               },
               properties: {
+                key: {
+                  type: 'string',
+                  default: 'TASK_INSPECT_DIFFERENCE',
+                  'x-editable': true,
+                  'x-display': 'hidden',
+                },
                 open: {
                   title: i18n.t('packages_dag_task_inspect_difference_alarm'),
                   type: 'boolean',

packages/dag/src/components/monitor/components/TaskInspect.vue

@@ -3,7 +3,7 @@ import { taskInspectApi } from '@tap/api'
 import { VEmpty } from '@tap/component'
 import i18n from '@tap/i18n'
 import dayjs from 'dayjs'
-import { onBeforeUnmount, ref, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import InspectDetailDialog from './InspectDetailDialog.vue'
 
 interface Props {
@@ -165,25 +165,9 @@ const stopLoop = () => {
   }
 }
 
-watch(
-  () => props.currentTab,
-  (val) => {
-    if (val === 'inspect') {
-      fetch()
-      startLoop()
-    } else {
-      stopLoop()
-    }
-  },
-)
-
-fetch().then(async () => {
-  if (!inspectList.value.length) {
-    const enabled = await checkEnabled()
-    if (!enabled) {
-      showEnabled.value = true
-    }
-  }
+onMounted(() => {
+  fetch()
+  startLoop()
 })
 
 onBeforeUnmount(() => {

packages/form/src/components/infinite-select/InfiniteSelect.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { isNum } from '@tap/shared'
 import { debounce, escapeRegExp, isString, merge } from 'lodash-es'
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, markRaw, nextTick, onMounted, ref, toRaw, watch } from 'vue'
 import SelectLoading from './SelectLoading.vue'
 
 const page = ref(0)
@@ -32,6 +32,7 @@ interface Props {
   cache?: boolean
   loadingText?: string
   noMoreText?: string
+  hasCreate?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -41,6 +42,7 @@ const props = withDefaults(defineProps<Props>(), {
   itemValue: 'value',
   debounceWait: 200,
   cache: true,
+  hasCreate: false,
   paramsSerializer: (params: {
     query: string
     page: number
@@ -63,11 +65,24 @@ const isStrItem = computed(() => {
   return isString(selectOptions.value[0])
 })
 
+const showNewOption = computed(() => {
+  if (!query.value || !props.hasCreate) return false
+
+  const hasExistingOption = isStrItem.value
+    ? selectOptions.value.includes(query.value)
+    : selectOptions.value.some((option) => {
+        return option[props.itemLabel] === query.value
+      })
+
+  return !hasExistingOption
+})
+
 const emit = defineEmits([
   'update:modelValue',
   'update:loading',
   'changeLabel',
   'optionSelect',
+  'select',
 ])
 
 const showLoading = computed(() => props.loading || loadingData.value)
@@ -200,25 +215,17 @@ const handleChange = () => {
 
 const onChange = (value: any) => {
   nextTick(() => {
-    emit('changeLabel', selectRef.value.states.selected.currentLabel)
-
-    // Find the selected object by matching itemValue with the selected value
-    const selectedOption = isStrItem.value
-      ? value
-      : selectOptions.value.find((option) => option[props.itemValue] === value)
-
-    if (selectedOption) {
-      // Pass the full object to onSetSelected
-      props.onSetSelected?.(selectedOption)
-      // Also emit the selected option and whether it was clicked
-      emit('optionSelect', selectedOption, true)
-    } else {
-      // Fallback to the hovering index method if needed
-      const index = selectRef.value.states.hoveringIndex
-      if (isNum(index) && index > -1) {
-        props.onSetSelected?.(selectOptions.value[index])
-        emit('optionSelect', selectOptions.value[index], true)
-      }
+    const selectedOption = selectRef.value.states.options.get(value)
+
+    if (isStrItem.value) {
+      emit('changeLabel', value)
+      emit('optionSelect', value, true)
+      selectedOption && emit('select', value, value, selectedOption.created)
+    } else if (selectedOption) {
+      const originData = selectedOption.$attrs?.['origin-data']
+      emit('changeLabel', selectedOption.label)
+      emit('optionSelect', originData, true)
+      emit('select', value, originData, selectedOption.created)
     }
   })
 }
@@ -286,6 +293,8 @@ onMounted(() => {
       <span>{{ getLabel(value, label) }}</span>
     </template>
 
+    <slot v-if="showNewOption" name="created-option" :value="query" />
+
     <el-option v-if="showLoading" class="el-select-loading">
       <el-icon class="el-select-loading__icon"><ElIconLoading /></el-icon>
       <span class="el-select-loading__tips">{{
@@ -300,6 +309,7 @@ onMounted(() => {
           :key="item[itemValue]"
           :label="item[itemLabel]"
           :value="item[itemValue]"
+          :origin-data="toRaw(item)"
         />
       </template>