From 598dcd07b2404f52cf0414bc627d9d6a7c94e256 Mon Sep 17 00:00:00 2001
From: limengnan <420004014@qq.com>
Date: Tue, 24 Jun 2025 11:55:42 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=89=8D=E7=AB=AFsrc/views/v?=
 =?UTF-8?q?isualized=E7=9B=AE=E5=BD=95=E6=96=87=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../visualized/data/dataset/ExportExcel.vue   |  156 +-
 .../data/dataset/auth-tree/FilterFiled.vue    |   14 +-
 .../visualized/data/dataset/form/AddSql.vue   |  145 +-
 .../data/dataset/form/CalcFieldEdit.vue       |   16 +-
 .../data/dataset/form/CodeMirror.vue          |    9 +-
 .../data/dataset/form/CreatDsGroup.vue        |    4 +
 .../data/dataset/form/DatasetUnion.vue        |   27 +-
 .../data/dataset/form/UnionEdit.vue           |   17 +-
 .../data/dataset/form/UnionItemEdit.vue       |    7 +-
 .../visualized/data/dataset/form/index.vue    |  129 +-
 .../views/visualized/data/dataset/index.vue   |   29 +-
 .../data/datasource/BaseInfoContent.vue       |   17 +-
 .../data/datasource/BaseInfoItem.vue          |    2 +-
 .../visualized/data/datasource/ExcelInfo.vue  |    5 +-
 .../data/datasource/ExcelInfoBase.vue         |   54 +
 .../visualized/data/datasource/FinishPage.vue |    2 +-
 .../datasource/form/ApiHttpRequestDraw.vue    |  137 +-
 .../data/datasource/form/ApiKeyValue.vue      |    2 +-
 .../data/datasource/form/CreatDsGroup.vue     |    2 +-
 .../data/datasource/form/EditorDetail.vue     |  142 +-
 .../data/datasource/form/ExcelDetail.vue      |  198 ++-
 .../datasource/form/ExcelRemoteDetail.vue     | 1452 +++++++++++++++++
 .../visualized/data/datasource/form/index.vue |  188 ++-
 .../visualized/data/datasource/form/option.ts |    8 +-
 .../visualized/data/datasource/index.vue      |  128 +-
 25 files changed, 2335 insertions(+), 555 deletions(-)
 create mode 100644 core/core-frontend/src/views/visualized/data/datasource/ExcelInfoBase.vue
 create mode 100644 core/core-frontend/src/views/visualized/data/datasource/form/ExcelRemoteDetail.vue

diff --git a/core/core-frontend/src/views/visualized/data/dataset/ExportExcel.vue b/core/core-frontend/src/views/visualized/data/dataset/ExportExcel.vue
index 013c755..dec8d88 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/ExportExcel.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/ExportExcel.vue
@@ -3,7 +3,7 @@ import dvPreviewDownload from '@/assets/svg/icon_download_outlined.svg'
 import deDelete from '@/assets/svg/de-delete.svg'
 import icon_fileExcel_colorful from '@/assets/svg/icon_file-excel_colorful.svg'
 import icon_refresh_outlined from '@/assets/svg/icon_refresh_outlined.svg'
-import { ref, h, onUnmounted, computed } from 'vue'
+import { ref, h, onUnmounted, computed, reactive } from 'vue'
 import { EmptyBackground } from '@/components/empty-background'
 import { ElButton, ElMessage, ElMessageBox, ElTabPane, ElTabs } from 'element-plus-secondary'
 import { RefreshLeft } from '@element-plus/icons-vue'
@@ -12,7 +12,9 @@ import {
   exportRetry,
   exportDelete,
   exportDeleteAll,
-  exportDeletePost
+  exportDeletePost,
+  exportTasksRecords,
+  generateDownloadUri
 } from '@/api/dataset'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useEmitt } from '@/hooks/web/useEmitt'
@@ -22,6 +24,13 @@ import { useLinkStoreWithOut } from '@/store/modules/link'
 import { useAppStoreWithOut } from '@/store/modules/app'
 
 const { t } = useI18n()
+const state = reactive({
+  paginationConfig: {
+    currentPage: 1,
+    pageSize: 10,
+    total: 0
+  }
+})
 const tableData = ref([])
 const drawerLoading = ref(false)
 const drawer = ref(false)
@@ -59,7 +68,6 @@ const handleClose = () => {
 }
 const { wsCache } = useCache()
 const openType = wsCache.get('open-backend') === '1' ? '_self' : '_blank'
-const xpack = wsCache.get('xpack-model-distributed')
 const desktop = wsCache.get('app.desktop')
 
 onUnmounted(() => {
@@ -77,46 +85,29 @@ const handleClick = tab => {
     description.value = t('data_export.no_task')
   }
   drawerLoading.value = true
-  exportTasks(activeName.value)
-    .then(res => {
-      tabList.value.forEach(item => {
-        if (item.name === 'ALL') {
-          item.label = t('data_set.all') + '(' + res.data.length + ')'
-        }
-        if (item.name === 'IN_PROGRESS') {
-          item.label =
-            t('data_set.exporting') +
-            '(' +
-            res.data.filter(task => task.exportStatus === 'IN_PROGRESS').length +
-            ')'
-        }
-        if (item.name === 'SUCCESS') {
-          item.label =
-            t('data_set.success') +
-            '(' +
-            res.data.filter(task => task.exportStatus === 'SUCCESS').length +
-            ')'
-        }
-        if (item.name === 'FAILED') {
-          item.label =
-            t('data_set.fail') +
-            '(' +
-            res.data.filter(task => task.exportStatus === 'FAILED').length +
-            ')'
-        }
-        if (item.name === 'PENDING') {
-          item.label =
-            t('data_set.waiting') +
-            '(' +
-            res.data.filter(task => task.exportStatus === 'PENDING').length +
-            ')'
-        }
-      })
-      if (activeName.value === 'ALL') {
-        tableData.value = res.data
-      } else {
-        tableData.value = res.data.filter(task => task.exportStatus === activeName.value)
+  exportTasksRecords().then(res => {
+    tabList.value.forEach(item => {
+      if (item.name === 'ALL') {
+        item.label = t('data_set.all') + '(' + res.data.ALL + ')'
       }
+      if (item.name === 'IN_PROGRESS') {
+        item.label = t('data_set.exporting') + '(' + res.data.IN_PROGRESS + ')'
+      }
+      if (item.name === 'SUCCESS') {
+        item.label = t('data_set.success') + '(' + res.data.SUCCESS + ')'
+      }
+      if (item.name === 'FAILED') {
+        item.label = t('data_set.fail') + '(' + res.data.FAILED + ')'
+      }
+      if (item.name === 'PENDING') {
+        item.label = t('data_set.waiting') + '(' + res.data.PENDING + ')'
+      }
+    })
+  })
+  exportTasks(state.paginationConfig.currentPage, state.paginationConfig.pageSize, activeName.value)
+    .then(res => {
+      state.paginationConfig.total = res.data.total
+      tableData.value = res.data.records
     })
     .finally(() => {
       drawerLoading.value = false
@@ -131,45 +122,32 @@ const init = params => {
   handleClick()
   timer = setInterval(() => {
     if (activeName.value === 'IN_PROGRESS') {
-      exportTasks(activeName.value).then(res => {
+      exportTasksRecords().then(res => {
         tabList.value.forEach(item => {
           if (item.name === 'ALL') {
-            item.label = t('data_set.all') + '(' + res.data.length + ')'
+            item.label = t('data_set.all') + '(' + res.data.ALL + ')'
           }
           if (item.name === 'IN_PROGRESS') {
-            item.label =
-              t('data_set.exporting') +
-              '(' +
-              res.data.filter(task => task.exportStatus === 'IN_PROGRESS').length +
-              ')'
+            item.label = t('data_set.exporting') + '(' + res.data.IN_PROGRESS + ')'
           }
           if (item.name === 'SUCCESS') {
-            item.label =
-              t('data_set.success') +
-              '(' +
-              res.data.filter(task => task.exportStatus === 'SUCCESS').length +
-              ')'
+            item.label = t('data_set.success') + '(' + res.data.SUCCESS + ')'
           }
           if (item.name === 'FAILED') {
-            item.label =
-              t('data_set.fail') +
-              '(' +
-              res.data.filter(task => task.exportStatus === 'FAILED').length +
-              ')'
+            item.label = t('data_set.fail') + '(' + res.data.FAILED + ')'
           }
           if (item.name === 'PENDING') {
-            item.label =
-              t('data_set.waiting') +
-              '(' +
-              res.data.filter(task => task.exportStatus === 'PENDING').length +
-              ')'
+            item.label = t('data_set.waiting') + '(' + res.data.PENDING + ')'
           }
         })
-        if (activeName.value === 'ALL') {
-          tableData.value = res.data
-        } else {
-          tableData.value = res.data.filter(task => task.exportStatus === activeName.value)
-        }
+      })
+      exportTasks(
+        state.paginationConfig.currentPage,
+        state.paginationConfig.pageSize,
+        activeName.value
+      ).then(res => {
+        state.paginationConfig.total = res.data.total
+        tableData.value = res.data.records
       })
     }
   }, 5000)
@@ -242,12 +220,16 @@ const callbackExportSuc = () => {
 const downLoadAll = () => {
   if (multipleSelection.value.length === 0) {
     tableData.value.forEach(item => {
-      window.open(PATH_URL + '/exportCenter/download/' + item.id)
+      generateDownloadUri(item.id).then(() => {
+        window.open(PATH_URL + '/exportCenter/download/' + item.id)
+      })
     })
     return
   }
   multipleSelection.value.map(ele => {
-    window.open(PATH_URL + '/exportCenter/download/' + ele.id)
+    generateDownloadUri(ele.id).then(() => {
+      window.open(PATH_URL + '/exportCenter/download/' + ele.id)
+    })
   })
 }
 const showMsg = item => {
@@ -262,8 +244,11 @@ const timestampFormatDate = value => {
   return new Date(value).toLocaleString()
 }
 import { PATH_URL } from '@/config/axios/service'
+import GridTable from '../../../../components/grid-table/src/GridTable.vue'
 const downloadClick = item => {
-  window.open(PATH_URL + '/exportCenter/download/' + item.id, openType)
+  generateDownloadUri(item.id).then(() => {
+    window.open(PATH_URL + '/exportCenter/download/' + item.id, openType)
+  })
 }
 
 const retry = item => {
@@ -294,6 +279,19 @@ const handleSelectionChange = val => {
   multipleSelection.value = val
 }
 
+const pageChange = index => {
+  if (typeof index !== 'number') {
+    return
+  }
+  state.paginationConfig.currentPage = index
+  handleClick()
+}
+const sizeChange = size => {
+  state.paginationConfig.currentPage = 1
+  state.paginationConfig.pageSize = size
+  handleClick()
+}
+
 const delAll = () => {
   if (multipleSelection.value.length === 0) {
     ElMessageBox.confirm(t('data_export.sure_del_all'), {
@@ -344,7 +342,7 @@ defineExpose({
 <template>
   <el-drawer
     v-loading="drawerLoading"
-    custom-class="de-export-excel"
+    modal-class="de-export-excel"
     :title="$t('data_export.export_center')"
     v-model="drawer"
     direction="rtl"
@@ -386,11 +384,13 @@ defineExpose({
       >{{ $t('commons.delete') }}
     </el-button>
     <div class="table-container" :class="!tableData.length && 'hidden-bottom'">
-      <el-table
+      <GridTable
         ref="multipleTable"
-        :data="tableData"
-        height="100%"
-        style="width: 100%"
+        :pagination="state.paginationConfig"
+        :table-data="tableData"
+        class="popper-max-width"
+        @current-change="pageChange"
+        @size-change="sizeChange"
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="50" />
@@ -482,7 +482,7 @@ defineExpose({
         <template #empty>
           <empty-background :description="description" img-type="noneWhite" />
         </template>
-      </el-table>
+      </GridTable>
     </div>
   </el-drawer>
 
diff --git a/core/core-frontend/src/views/visualized/data/dataset/auth-tree/FilterFiled.vue b/core/core-frontend/src/views/visualized/data/dataset/auth-tree/FilterFiled.vue
index dd86d0c..0d8e8a4 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/auth-tree/FilterFiled.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/auth-tree/FilterFiled.vue
@@ -384,6 +384,7 @@ const emits = defineEmits(['update:item', 'del'])
           size="small"
           @change="filterTypeChange"
           v-model="item.filterType"
+          class="w181"
           :placeholder="t('auth.select')"
         >
           <el-option
@@ -586,11 +587,15 @@ const emits = defineEmits(['update:item', 'del'])
   }
 
   .w100.ed-select {
-    width: 100px;
+    width: 100px !important;
+  }
+
+  .w181.ed-select {
+    width: 181px !important;
   }
 
   .w70 {
-    width: 70px;
+    width: 70px !important;
   }
 
   .mar5 {
@@ -676,11 +681,12 @@ const emits = defineEmits(['update:item', 'del'])
     }
   }
 
-  :deep(.ed-input__wrapper) {
+  :deep(.ed-input__wrapper),
+  :deep(.ed-select__wrapper) {
     background-color: #f8f8fa;
     border: none;
     border-radius: 0;
-    box-shadow: none;
+    box-shadow: none !important;
     height: 26px;
     font-family: var(--de-custom_font, 'PingFang');
     word-wrap: break-word;
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue b/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
index 0d1ea9c..ae38580 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
@@ -24,7 +24,9 @@ import {
   onBeforeUnmount,
   shallowRef,
   computed,
-  h
+  inject,
+  h,
+  Ref
 } from 'vue'
 import { debounce } from 'lodash-es'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -100,7 +102,7 @@ const state = reactive({
 })
 
 const datasourceTableData = shallowRef([])
-
+const isCross = inject<Ref>('isCross')
 const paginationConfig = reactive({
   currentPage: 1,
   pageSize: 10,
@@ -203,18 +205,25 @@ const insertFieldToCodeMirror = (value: string) => {
 
 const setNameIdTrans = (from, to, originName, name2Auto?: string[]) => {
   let name2Id = originName
+  const ids = [...builtInList.value, ...fieldFormList.value].map(item => item.id)
+  const names = [...builtInList.value, ...fieldFormList.value].map(item => item.name)
   const nameIdMap = [...builtInList.value, ...fieldFormList.value].reduce((pre, next) => {
     pre[next[from]] = next[to]
     return pre
   }, {})
-  const on = originName.match(/\[(.+?)\]/g)
+  const on = originName.match(/\$f2cde\[(.+?)\]/g)
   if (on) {
     on.forEach(itm => {
-      const ele = itm.slice(1, -1)
+      const ele = itm.slice(7, -1)
       if (name2Auto) {
         name2Auto.push(nameIdMap[ele])
       }
-      name2Id = name2Id.replace(`[${ele}]`, `[${nameIdMap[ele]}]`)
+      if (from === 'id' && ids.includes(ele)) {
+        name2Id = name2Id.replace(`$f2cde[${ele}]`, `$f2cde[${nameIdMap[ele]}]`)
+      }
+      if (from === 'name' && names.includes(ele)) {
+        name2Id = name2Id.replace(`$f2cde[${ele}]`, `$f2cde[${nameIdMap[ele]}]`)
+      }
     })
   }
   return name2Id
@@ -253,7 +262,13 @@ const getNodeField = ({ datasourceId, tableName }) => {
     table: tableName,
     sql: ''
   }
-  getTableField({ datasourceId, info: JSON.stringify(info), tableName, type: 'db' })
+  getTableField({
+    datasourceId,
+    info: JSON.stringify(info),
+    tableName,
+    type: 'db',
+    isCross: isCross.value
+  })
     .then(res => {
       gridData.value = res as unknown as Field[]
     })
@@ -263,7 +278,6 @@ const getNodeField = ({ datasourceId, tableName }) => {
 }
 
 const getDatasource = () => {
-  debugger  
   getDatasourceList().then(res => {
     const _list = (res as unknown as DataSource[]) || []
     if (_list && _list.length > 0 && _list[0].id === '0') {
@@ -412,6 +426,7 @@ const getSQLPreview = () => {
   parseVariable()
   dataPreviewLoading.value = true
   getPreviewSql({
+    isCross: isCross.value,
     sql: Base64.encode((sql = setNameIdTrans('name', 'id', codeCom.value.state.doc.toString()))),
     datasourceId: sqlNode.value.datasourceId,
     sqlVariableDetails: JSON.stringify(state.variables)
@@ -427,7 +442,9 @@ const getSQLPreview = () => {
 
 let tableList = []
 watch(searchTable, val => {
-  datasourceTableData.value = tableList.filter(ele => ele.tableName.includes(val))
+  datasourceTableData.value = tableList.filter(ele =>
+    ele.tableName.toLowerCase().includes(val.toLowerCase())
+  )
 })
 
 const getIconName = (type: string) => {
@@ -489,37 +506,77 @@ const mouseupDrag = () => {
 
 const parseVariable = () => {
   state.variablesTmp = []
-  const reg = new RegExp('\\${(.*?)}', 'gim')
-  const match = codeCom.value.state.doc.toString().match(reg)
-  const names = []
-  if (match !== null) {
-    for (let index = 0; index < match.length; index++) {
-      let name = match[index].substring(2, match[index].length - 1)
-      if (names.indexOf(name) < 0) {
-        names.push(name)
-        // eslint-disable-next-line
-        let obj = undefined
-        for (let i = 0; i < state.variables?.length; i++) {
-          if (state.variables[i].variableName === name) {
-            obj = state.variables[i]
-            if (!obj.hasOwnProperty('defaultValueScope')) {
-              obj.defaultValueScope = 'EDIT'
+  const variableReg = new RegExp('\\$DE_PARAM{(.*?)}', 'gim')
+  const variableMatch = codeCom.value.state.doc.toString().match(variableReg)
+  if (variableMatch !== null) {
+    const names = []
+    const reg = new RegExp('\\$\\[[^\\]]+\\]', 'gim')
+    for (let index = 0; index < variableMatch.length; index++) {
+      let sqlItem = variableMatch[index].substring(10, variableMatch[index].length - 1)
+      const match = sqlItem.match(reg)
+      if (match !== null) {
+        for (let matchIndex = 0; matchIndex < match.length; matchIndex++) {
+          let name = match[matchIndex].substring(2, match[matchIndex].length - 1)
+          if (names.indexOf(name) < 0) {
+            names.push(name)
+            let obj = undefined
+            for (let i = 0; i < state.variables?.length; i++) {
+              if (state.variables[i].variableName === name) {
+                obj = state.variables[i]
+                if (!obj.hasOwnProperty('defaultValueScope')) {
+                  obj.defaultValueScope = 'EDIT'
+                }
+              }
+            }
+            if (obj === undefined) {
+              obj = {
+                variableName: name,
+                alias: '',
+                type: [],
+                required: false,
+                defaultValue: '',
+                details: '',
+                defaultValueScope: 'EDIT'
+              }
+              obj.type.push('TEXT')
+            }
+            state.variablesTmp.push(obj)
+          }
+        }
+      }
+    }
+  } else {
+    const reg = new RegExp('\\${(.*?)}', 'gim')
+    const match = codeCom.value.state.doc.toString().match(reg)
+    const names = []
+    if (match !== null) {
+      for (let index = 0; index < match.length; index++) {
+        let name = match[index].substring(2, match[index].length - 1)
+        if (names.indexOf(name) < 0) {
+          names.push(name)
+          let obj = undefined
+          for (let i = 0; i < state.variables?.length; i++) {
+            if (state.variables[i].variableName === name) {
+              obj = state.variables[i]
+              if (!obj.hasOwnProperty('defaultValueScope')) {
+                obj.defaultValueScope = 'EDIT'
+              }
             }
           }
-        }
-        if (obj === undefined) {
-          obj = {
-            variableName: name,
-            alias: '',
-            type: [],
-            required: false,
-            defaultValue: '',
-            details: '',
-            defaultValueScope: 'EDIT'
+          if (obj === undefined) {
+            obj = {
+              variableName: name,
+              alias: '',
+              type: [],
+              required: false,
+              defaultValue: '',
+              details: '',
+              defaultValueScope: 'EDIT'
+            }
+            obj.type.push('TEXT')
           }
-          obj.type.push('TEXT')
+          state.variablesTmp.push(obj)
         }
-        state.variablesTmp.push(obj)
       }
     }
   }
@@ -779,6 +836,7 @@ const mousedownDrag = () => {
         @change="changeFlagCode = true"
         :height="`${dragHeight}px`"
         dom-id="sql-editor"
+        :regexp="/\$f2cde\[(.*?)\]/g"
         ref="myCm"
         :quotaMap="fieldFormList.filter(ele => ['num'].includes(ele.type)).map(ele => ele.name)"
         :dimensionMap="
@@ -906,7 +964,7 @@ const mousedownDrag = () => {
             </div>
             <div
               class="variable-item flex-align-center"
-              @click="insertFieldToCodeMirror(`[${fieldForm.name}]`)"
+              @click="insertFieldToCodeMirror(`$f2cde[${fieldForm.name}]`)"
               v-for="fieldForm in builtInList"
               :key="fieldForm.id"
             >
@@ -919,7 +977,7 @@ const mousedownDrag = () => {
               class="variable-item flex-align-center"
               v-for="fieldForm in fieldFormListComputed"
               :key="fieldForm.id"
-              @click="insertFieldToCodeMirror(`[${fieldForm.name}]`)"
+              @click="insertFieldToCodeMirror(`$f2cde[${fieldForm.name}]`)"
               :class="['num'].includes(fieldForm.type) && 'with-type'"
             >
               <el-icon>
@@ -931,7 +989,7 @@ const mousedownDrag = () => {
                   ></component
                 ></Icon>
               </el-icon>
-              <span :title="fieldForm.name">{{ fieldForm.name }}</span>
+              <span :title="fieldForm.name" class="ellipsis">{{ fieldForm.name }}</span>
             </div>
           </div>
         </div>
@@ -941,7 +999,7 @@ const mousedownDrag = () => {
   <el-drawer
     :title="dialogTitle"
     v-model="showVariableMgm"
-    custom-class="sql-dataset-drawer"
+    modal-class="sql-dataset-drawer"
     size="870px"
     direction="rtl"
   >
@@ -1181,7 +1239,7 @@ const mousedownDrag = () => {
         z-index: 10;
         &:hover {
           .ed-icon {
-            color: var(--ed-color-primary, #3370ff);
+            color: var(--ed-color-primary, #3370ff) !important;
           }
         }
       }
@@ -1593,6 +1651,7 @@ const mousedownDrag = () => {
   }
   .ed-input-group__prepend {
     padding: 0 11px;
+    width: 163px;
   }
   .de-group__prepend {
     .ed-date-editor {
@@ -1607,7 +1666,6 @@ const mousedownDrag = () => {
 
   .ed-date-editor {
     width: 100%;
-    display: inline-block;
   }
 
   .select-type {
@@ -1619,15 +1677,16 @@ const mousedownDrag = () => {
   .select-svg-icon {
     position: absolute;
     left: 24px;
-    top: 15px;
+    top: 19px;
   }
 
   .content {
-    height: 62px;
+    height: 80px;
     width: 822px;
     border-radius: 4px;
     background: #e1eaff;
     position: relative;
+    line-height: 22px;
     padding: 9px 0 9px 40px;
     font-family: var(--de-custom_font, 'PingFang');
     font-size: 14px;
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue b/core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue
index 935c97d..7810536 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue
@@ -136,11 +136,11 @@ const setFieldForm = () => {
 
 const setNameIdTrans = (from, to, originName, name2Auto?: string[]) => {
   let name2Id = originName
-  const nameIdMap = [...state.dimensionData, ...state.quotaData].reduce((pre, next) => {
+  const nameIdMap = [...dimensionDataList, ...quotaDataList].reduce((pre, next) => {
     pre[next[from]] = next[to]
     return pre
   }, {})
-  const on = originName.match(/\[(.+?)\]/g)
+  const on = originName.match(/\[(.+?)\]/g) || []
   if (on) {
     on.forEach(itm => {
       const ele = itm.slice(1, -1)
@@ -235,10 +235,8 @@ watch(
         )
       )
     } else {
-      state.dimensionData = JSON.parse(JSON.stringify(dimensionDataList)).filter(
-        ele => ele.extField === 0
-      )
-      state.quotaData = JSON.parse(JSON.stringify(quotaDataList)).filter(ele => ele.extField === 0)
+      state.dimensionData = JSON.parse(JSON.stringify(dimensionDataList))
+      state.quotaData = JSON.parse(JSON.stringify(quotaDataList))
     }
   }
 )
@@ -652,10 +650,8 @@ initFunction()
   .mr0 {
     margin-right: 0;
 
-    :deep(.ed-select__prefix--light) {
-      padding: 0;
-      border: none;
-      margin: 0;
+    :deep(.ed-select__prefix::after) {
+      display: none;
     }
   }
 
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/CodeMirror.vue b/core/core-frontend/src/views/visualized/data/dataset/form/CodeMirror.vue
index 7f7d239..662a98c 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/CodeMirror.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/CodeMirror.vue
@@ -16,9 +16,12 @@ const props = defineProps({
   domId: propTypes.string.def('editor'),
   height: propTypes.string.def('250px'),
   quotaMap: propTypes.arrayOf(String).def(() => []),
-  dimensionMap: propTypes.arrayOf(String).def(() => [])
+  dimensionMap: propTypes.arrayOf(String).def(() => []),
+  regexp: {
+    type: RegExp,
+    default: /\[(.*?)\]/g
+  }
 })
-
 const emits = defineEmits(['change'])
 
 const codeComInit = (doc: string, sqlMode?: boolean) => {
@@ -45,7 +48,7 @@ const codeComInit = (doc: string, sqlMode?: boolean) => {
   } //!placeholderMatcher
 
   const placeholderMatcher = new MatchDecorator({
-    regexp: /\[(.*?)\]/g,
+    regexp: new RegExp(props.regexp),
     decoration: match =>
       Decoration.replace({
         widget: new PlaceholderWidget(match[1])
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/CreatDsGroup.vue b/core/core-frontend/src/views/visualized/data/dataset/form/CreatDsGroup.vue
index bbef061..0edcb6c 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/CreatDsGroup.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/CreatDsGroup.vue
@@ -18,6 +18,7 @@ import nothingTree from '@/assets/img/nothing-tree.png'
 import { BusiTreeRequest } from '@/models/tree/TreeNode'
 import { filterFreeFolder } from '@/utils/utils'
 export interface Tree {
+  isCross: boolean
   name: string
   value?: string | number
   id: string | number
@@ -47,6 +48,7 @@ const treeRef = ref()
 const filterText = ref('')
 let union = []
 let allfields = []
+let isCross = false
 const datasetForm = reactive({
   pid: '',
   name: ''
@@ -156,6 +158,7 @@ const createInit = (type, data: Tree, exec, name: string) => {
   if (type === 'dataset') {
     union = data.union
     allfields = data.allfields
+    isCross = data.isCross
   }
   if (data.id) {
     const request = { leaf: false, weight: 7 } as BusiTreeRequest
@@ -264,6 +267,7 @@ const saveDataset = () => {
       if (nodeType.value === 'dataset') {
         params.union = union
         params.allFields = allfields
+        params.isCross = isCross
       }
       if (cmd.value === 'move' && !checkPid(params.pid)) {
         return
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue b/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
index 364b422..311cae5 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
@@ -43,6 +43,7 @@ const props = defineProps({
 const primaryColor = computed(() => {
   return appearanceStore.themeColor === 'custom' ? appearanceStore.customColor : '#3370FF'
 })
+const isCross = inject<Ref>('isCross')
 
 const iconName = {
   left: icon_leftAssociation,
@@ -62,7 +63,7 @@ const sqlNode = ref<SqlNode>()
 const allfields = inject('allfields') as Ref
 
 const getNodeField = ({ datasourceId, id, info, tableName, type, currentDsFields }) => {
-  return getTableField({ datasourceId, id, info, tableName, type })
+  return getTableField({ datasourceId, id, info, tableName, type, isCross: isCross.value })
     .then(res => {
       const idOriginNameMap = allfields.value.reduce((pre, next) => {
         pre[`${next.datasetTableId}${next.originName}`] = next.id
@@ -230,7 +231,8 @@ const saveSqlNode = (val: SqlNode, cb) => {
         id: id,
         info: state.visualNode.info,
         tableName,
-        type: 'sql'
+        type: 'sql',
+        isCross: isCross.value
       }).then(res => {
         nodeField.value = res as unknown as Field[]
         nodeField.value.forEach(ele => {
@@ -244,7 +246,13 @@ const saveSqlNode = (val: SqlNode, cb) => {
     }
     return
   }
-  const obj = { info: JSON.stringify({ table: tableName, sql }), id, tableName, sqlVariableDetails }
+  const obj = {
+    info: JSON.stringify({ table: tableName, sql }),
+    id,
+    datasourceId,
+    tableName,
+    sqlVariableDetails
+  }
   dfsNodeBack([obj], [id], state.nodeList)
   emits('reGetName')
 }
@@ -261,13 +269,15 @@ const closeSqlNode = () => {
     changeSqlId.value.length === 1
   ) {
     currentNode.value = state.nodeList[0]
-    const { datasourceId, id, info, tableName } = currentNode.value
+    const { datasourceId, id, info, tableName, sqlVariableDetails } = currentNode.value
     getTableField({
       datasourceId,
       id,
       info,
       tableName,
-      type: 'sql'
+      type: 'sql',
+      isCross: isCross.value,
+      sqlVariableDetails: sqlVariableDetails
     }).then(res => {
       const idOriginNameMap = allfields.value.reduce((pre, next) => {
         pre[`${next.datasetTableId}${next.originName}`] = next.id
@@ -364,7 +374,7 @@ const confirmEditUnion = () => {
   if (!!ids.length) {
     const idArr = allfields.value.reduce((pre, next) => {
       if (next.extField === 2) {
-        let idMap = next.originName.match(/\[(.+?)\]/g)
+        let idMap = next.originName.match(/\[(.+?)\]/g) || []
         idMap = idMap.filter(
           itx => !next.params?.map(element => element.id).includes(itx.slice(1, -1))
         )
@@ -452,7 +462,7 @@ const handleCommand = (ele, command) => {
     if (!!fakeDelId.length) {
       const idArr = allfields.value.reduce((pre, next) => {
         if (next.extField === 2) {
-          const idMap = next.originName.match(/\[(.+?)\]/g)
+          const idMap = next.originName.match(/\[(.+?)\]/g) || []
           const result = idMap.map(itm => {
             return itm.slice(1, -1)
           })
@@ -908,6 +918,7 @@ const drop_handler = ev => {
       id: currentNode.value.id,
       info: currentNode.value.info,
       tableName,
+      isCross: isCross.value,
       type
     })
       .then(res => {
@@ -1190,7 +1201,7 @@ const emits = defineEmits([
   <el-drawer
     :before-close="closeEditUnion"
     v-model="editUnion"
-    custom-class="union-item-drawer"
+    modal-class="union-item-drawer"
     size="600px"
     direction="rtl"
   >
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/UnionEdit.vue b/core/core-frontend/src/views/visualized/data/dataset/form/UnionEdit.vue
index 5bc3374..b81a426 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/UnionEdit.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/UnionEdit.vue
@@ -1,11 +1,13 @@
 <script lang="ts" setup>
-import { ref, reactive } from 'vue'
+import { ref, reactive, inject, type Ref } from 'vue'
 import UnionFieldList from './UnionFieldList.vue'
 import UnionItemEdit from './UnionItemEdit.vue'
 import type { Field, NodeType, UnionType, Node } from './util'
 import { getTableField } from '@/api/dataset'
 import { cloneDeep } from 'lodash-es'
 
+const isCross = inject<Ref>('isCross')
+
 const changeParentFields = val => {
   parent.currentDsFields = val
 }
@@ -69,10 +71,15 @@ const initState = () => {
 }
 
 const getParams = (obj: Node) => {
-  return ['datasourceId', 'id', 'info', 'tableName', 'type'].reduce((pre, next) => {
-    pre[next] = obj[next]
-    return pre
-  }, {})
+  return ['datasourceId', 'id', 'info', 'tableName', 'type'].reduce(
+    (pre, next) => {
+      pre[next] = obj[next]
+      return pre
+    },
+    {
+      isCross: isCross.value
+    }
+  )
 }
 const getFields = async () => {
   const [n, p] = props.editArr as Node[]
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/UnionItemEdit.vue b/core/core-frontend/src/views/visualized/data/dataset/form/UnionItemEdit.vue
index 3949adb..aa92d98 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/UnionItemEdit.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/UnionItemEdit.vue
@@ -223,10 +223,11 @@ init()
 }
 .union-selector {
   width: 180px;
-  :deep(.ed-select__prefix--light) {
-    border-right: none;
+  :deep(.ed-select__prefix) {
     font-size: 22px;
-    padding: 0;
+    &::after {
+      display: none;
+    }
   }
 }
 .union-add {
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/index.vue b/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
index c6f45ca..8fb508c 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
@@ -16,6 +16,10 @@ import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.s
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import dayjs from 'dayjs'
+import {
+  iconFieldCalculatedMap,
+  iconFieldCalculatedQMap
+} from '@/components/icon-group/field-calculated-list'
 import { enumValueDs } from '@/api/dataset'
 import {
   ref,
@@ -66,11 +70,6 @@ import { cloneDeep, debounce } from 'lodash-es'
 import { XpackComponent } from '@/components/plugin'
 import { iconFieldMap } from '@/components/icon-group/field-list'
 import { iconDatasourceMap } from '@/components/icon-group/datasource-list'
-const route = useRoute()
-const appId:any = ref('')
-if (route.query.appId) {
-  appId.value = route.query.appId
-}
 interface DragEvent extends MouseEvent {
   dataTransfer: DataTransfer
 }
@@ -86,7 +85,13 @@ const { wsCache } = useCache()
 const appStore = useAppStoreWithOut()
 const embeddedStore = useEmbedded()
 const { t } = useI18n()
-const { push } = useRouter()
+const route = useRoute()
+const { push } = useRouter() || {
+  push: val => {
+    if (embeddedStore.getToken) return
+    window.location.href = val as string
+  }
+}
 const quotaTableHeight = ref(238)
 const creatDsFolder = ref()
 const editCalcField = ref(false)
@@ -116,6 +121,7 @@ const currentField = ref({
   name: '',
   idArr: []
 })
+const isCross = ref(false)
 let isUpdate = false
 
 const fieldTypes = index => {
@@ -253,14 +259,14 @@ const getDsName = (id: string) => {
 }
 
 const pushDataset = () => {
+  wsCache.set(`dataset-info-id`, nodeInfo.id)
   if (appStore.isDataEaseBi) {
     embeddedStore.clearState()
     useEmitt().emitter.emit('changeCurrentComponent', 'Dataset')
     return
   }
   const routeName = embeddedStore.getToken && appStore.getIsIframe ? 'dataset-embedded' : 'dataset'
-  wsCache.set(`${routeName}-info-id`, nodeInfo.id)
-  if (!!history.state.back) {
+  if (!!history.state.back && !appStore.getIsIframe) {
     history.back()
   } else {
     push({
@@ -362,6 +368,7 @@ const editeSave = () => {
     ...nodeInfo,
     name: datasetName.value,
     union,
+    isCross: isCross.value,
     allFields: allfields.value,
     nodeType: 'dataset'
   })
@@ -486,7 +493,7 @@ const delFieldById = arr => {
     const allfieldsId = allfields.value.map(ele => ele.id).concat(paramsId)
     allfields.value = allfields.value.filter(ele => {
       if (![2, 3].includes(ele.extField)) return true
-      const idMap = ele.originName.match(/\[(.+?)\]/g)
+      const idMap = ele.originName.match(/\[(.+?)\]/g) || []
       if (!idMap) return true
       const result = idMap.every(itm => {
         const id = itm.slice(1, -1)
@@ -511,7 +518,7 @@ const delFieldByIdFake = (arr, fakeAllfields) => {
     const allfieldsId = fakeAllfields.map(ele => ele.id)
     fakeAllfields = fakeAllfields.filter(ele => {
       if (![2, 3].includes(ele.extField)) return true
-      const idMap = ele.originName.match(/\[(.+?)\]/g)
+      const idMap = ele.originName.match(/\[(.+?)\]/g) || []
       if (
         !idMap ||
         idMap.every(itx => ele.params?.map(element => element.id).includes(itx.slice(1, -1)))
@@ -731,6 +738,7 @@ const initEdite = async () => {
     }
     datasetName.value = nodeInfo.name
     allfields.value = res.allFields || []
+    isCross.value = res.isCross || false
     dfsUnion(arr, res.union || [])
     const [fir] = res.union as { currentDs: { datasourceId: string } }[]
     dataSource.value = fir?.currentDs?.datasourceId
@@ -834,6 +842,7 @@ const getIconName = (type: number) => {
 const allfields = ref([])
 
 provide('allfields', allfields)
+provide('isCross', isCross)
 
 let num = +new Date()
 
@@ -962,7 +971,7 @@ const confirmEditUnion = () => {
   if (!!idList.length) {
     const idArr = allfields.value.reduce((pre, next) => {
       if (idList.includes(next.id)) {
-        const idMap = next.originName.match(/\[(.+?)\]/g)
+        const idMap = next.originName.match(/\[(.+?)\]/g) || []
         const result = idMap.map(itm => {
           return itm.slice(1, -1)
         })
@@ -1093,7 +1102,7 @@ const handleFieldschange = val => {
   const arr = []
   const allfieldsCopy = cloneDeep(unref(allfields))
   dfsNodeList(arr, datasetDrag.value.getNodeList())
-  enumValueDs({ dataset: { union: arr, allFields: allfieldsCopy }, field })
+  enumValueDs({ dataset: { union: arr, allFields: allfieldsCopy, isCross: isCross.value }, field })
     .then(res => {
       enumValue.value = res || []
     })
@@ -1105,6 +1114,14 @@ const closeGroupField = () => {
   editGroupField.value = false
 }
 
+const disabledEnumArr = computed(() => {
+  return currentGroupField.groupList?.map(ele => ele.text).flat()
+})
+
+const disabledEnum = (item, arr) => {
+  return disabledEnumArr.value.includes(item) && !arr.includes(item)
+}
+
 const titleForGroup = ref(t('dataset.create_grouping_field'))
 
 const initGroupField = val => {
@@ -1122,7 +1139,7 @@ const initGroupField = val => {
       maxTerm,
       time: []
     }
-    if (currentGroupField.deTypeOrigin === 1) {
+    if (startTime && endTime) {
       obj.time = [startTime, endTime]
     }
     groupList.push(obj)
@@ -1138,7 +1155,6 @@ const initGroupField = val => {
 const confirmGroupField = () => {
   ruleGroupFieldRef.value.validate(val => {
     let count = 0
-    let flag = false
     let time
     refsForm.value.forEach(ele => {
       ele?.validate(val => {
@@ -1149,7 +1165,6 @@ const confirmGroupField = () => {
     })
     time = setTimeout(() => {
       clearTimeout(time)
-      flag = true
       time = null
       if (val && count === currentGroupField.groupList.length) {
         const groupList = []
@@ -1240,7 +1255,7 @@ const verify = () => {
       const arr = []
       dfsNodeList(arr, datasetDrag.value.getNodeList())
       datasetPreviewLoading.value = true
-      getPreviewData({ union: arr, allFields: allfieldsCopy })
+      getPreviewData({ union: arr, allFields: allfieldsCopy, isCross: isCross.value })
         .then(() => {
           ElMessage.success(t('data_set.validation_succeeded'))
         })
@@ -1336,7 +1351,7 @@ const getSqlResultHeight = () => {
   sqlResultHeight.value = (document.querySelector('.sql-result') as HTMLElement).offsetHeight
 }
 const getDatasource = (weight?: number) => {
-  getDatasourceList(weight,appId.value).then(res => {
+  getDatasourceList(weight).then(res => {
     const _list = (res as unknown as DataSource[]) || []
     if (_list && _list.length > 0 && _list[0].id === '0') {
       state.dataSourceList = dfsChild(_list[0].children)
@@ -1408,7 +1423,7 @@ const datasetSave = () => {
 
   creatDsFolder.value.createInit(
     'dataset',
-    { id: pid || '0', union, allfields: allfields.value },
+    { id: pid || '0', union, allfields: allfields.value, isCross: isCross.value },
     '',
     datasetName.value
   )
@@ -1425,7 +1440,7 @@ const datasetPreview = () => {
   const arr = []
   dfsNodeList(arr, datasetDrag.value.getNodeList())
   datasetPreviewLoading.value = true
-  getPreviewData({ union: arr, allFields: allfields.value })
+  getPreviewData({ union: arr, allFields: allfields.value, isCross: isCross.value })
     .then(res => {
       columns.value = generateColumns((res.data.fields as Field[]) || [])
       tableData.value = (res.data.data as Array<{}>) || []
@@ -1615,6 +1630,24 @@ const handleClick = () => {
   })
 }
 
+const sourceChange = val => {
+  if (val) return
+  if (crossDatasources.value) {
+    isCross.value = !val
+    ElMessageBox.confirm(t('common.source_tips'), {
+      confirmButtonText: t('dataset.confirm'),
+      cancelButtonText: t('common.cancel'),
+      showCancelButton: true,
+      confirmButtonType: 'primary',
+      type: 'warning',
+      autofocus: false,
+      showClose: false
+    }).then(() => {
+      isCross.value = val
+    })
+  }
+}
+
 const finish = res => {
   const { id, pid, name } = res
   datasetName.value = name
@@ -1666,6 +1699,14 @@ const getDsIconName = data => {
   if (!data.leaf) return dvFolder
   return iconDatasourceMap[data.type]
 }
+
+const getIconNameCalc = (deType, extField, dimension = false) => {
+  if (extField === 2) {
+    const iconFieldCalculated = dimension ? iconFieldCalculatedMap : iconFieldCalculatedQMap
+    return iconFieldCalculated[deType]
+  }
+  return iconFieldMap[fieldType[deType]]
+}
 </script>
 
 <template>
@@ -1702,7 +1743,7 @@ const getDsIconName = data => {
     <div class="container dataset-db" @mouseup="mouseupDrag">
       <p v-show="!showLeft" class="arrow-right" @click="showLeft = true">
         <el-icon>
-          <Icon name="icon_right_outlined"><icon_right_outlined class="svg-icon" /></Icon>
+          <Icon><icon_right_outlined class="svg-icon" /></Icon>
         </el-icon>
       </p>
       <div
@@ -1719,6 +1760,14 @@ const getDsIconName = data => {
         :style="{ width: LeftWidth + 'px' }"
       >
         <div class="table-list-top">
+          <el-switch
+            style="margin-bottom: 8px"
+            v-model="isCross"
+            @change="sourceChange"
+            :active-text="$t('common.cross_source')"
+            :inactive-text="$t('common.single_source')"
+          />
+
           <p class="select-ds">
             {{ t('data_set.select_data_source') }}
             <span class="left-outlined">
@@ -1923,7 +1972,7 @@ const getDsIconName = data => {
                           ><component
                             class="svg-icon"
                             :class="`field-icon-${fieldType[[2, 3].includes(data.deType) ? 2 : 0]}`"
-                            :is="iconFieldMap[fieldType[data.deType]]"
+                            :is="getIconNameCalc(data.deType, data.extField)"
                           ></component
                         ></Icon>
                       </el-icon>
@@ -1957,7 +2006,7 @@ const getDsIconName = data => {
                           ><component
                             class="svg-icon"
                             :class="`field-icon-${fieldType[[2, 3].includes(data.deType) ? 2 : 0]}`"
-                            :is="iconFieldMap[fieldType[data.deType]]"
+                            :is="getIconNameCalc(data.deType, data.extField, true)"
                           ></component
                         ></Icon>
                       </el-icon>
@@ -2091,6 +2140,7 @@ const getDsIconName = data => {
                           :class="
                             !!scope.row.deTypeArr && !!scope.row.deTypeArr.length && 'select-type'
                           "
+                          v-if="scope.row.extField !== 3"
                           popper-class="cascader-panel"
                           v-model="scope.row.deTypeArr"
                           @change="val => cascaderChange(scope.row, val)"
@@ -2111,6 +2161,7 @@ const getDsIconName = data => {
                             <span>{{ data.label }}</span>
                           </template>
                         </el-cascader>
+                        <div style="padding-left: 30px" v-else>{{ $t('data_set.text') }}</div>
                         <span class="select-svg-icon">
                           <el-icon>
                             <Icon
@@ -2134,7 +2185,13 @@ const getDsIconName = data => {
                     >
                       <template #default="scope">
                         <div class="column-style">
-                          <span class="flex-align-center icon" v-if="scope.row.extField === 0">
+                          <span style="color: #8d9199" v-if="scope.row.extField === 2">{{
+                            t('dataset.calc_field')
+                          }}</span>
+                          <span style="color: #8d9199" v-else-if="scope.row.extField === 3">{{
+                            t('dataset.grouping_field')
+                          }}</span>
+                          <span class="flex-align-center icon" v-else-if="scope.row.extField === 0">
                             <el-icon>
                               <Icon className="primary-color"
                                 ><component
@@ -2145,7 +2202,6 @@ const getDsIconName = data => {
                             </el-icon>
                             {{ fieldTypes(scope.row.deExtractType) }}
                           </span>
-                          <span v-else style="color: #8d9199">{{ t('dataset.calc_field') }}</span>
                         </div>
                       </template>
                     </el-table-column>
@@ -2328,7 +2384,13 @@ const getDsIconName = data => {
                     >
                       <template #default="scope">
                         <div class="column-style">
-                          <span class="flex-align-center icon" v-if="scope.row.extField === 0">
+                          <span style="color: #8d9199" v-if="scope.row.extField === 2">{{
+                            t('dataset.calc_field')
+                          }}</span>
+                          <span style="color: #8d9199" v-else-if="scope.row.extField === 3">{{
+                            t('dataset.grouping_field')
+                          }}</span>
+                          <span class="flex-align-center icon" v-else-if="scope.row.extField === 0">
                             <el-icon>
                               <Icon className="green-color"
                                 ><component
@@ -2339,7 +2401,6 @@ const getDsIconName = data => {
                             </el-icon>
                             {{ fieldTypes(scope.row.deExtractType) }}
                           </span>
-                          <span v-else style="color: #8d9199">{{ t('dataset.calc_field') }}</span>
                         </div>
                       </template>
                     </el-table-column>
@@ -2490,7 +2551,7 @@ const getDsIconName = data => {
     <el-drawer
       :title="t('dataset.edit_union_relation')"
       v-model="editUnion"
-      custom-class="union-dataset-drawer"
+      modal-class="union-dataset-drawer"
       size="840px"
       :before-close="closeEditUnion"
       direction="rtl"
@@ -2508,7 +2569,7 @@ const getDsIconName = data => {
     ref="creatDsFolder"
   ></creat-ds-group>
   <el-dialog
-    custom-class="calc-field-edit-dialog"
+    modal-class="calc-field-edit-dialog"
     v-model="editCalcField"
     width="1000px"
     :title="calcTitle"
@@ -2651,6 +2712,7 @@ const getDsIconName = data => {
                     style="width: 100%"
                     multiple
                     collapse-tags
+                    filterable
                     collapse-tags-tooltip
                     :max-collapse-tags="2"
                     v-model="domain.text"
@@ -2659,6 +2721,7 @@ const getDsIconName = data => {
                       v-for="item in enumValue"
                       :key="item"
                       :label="item"
+                      :disabled="disabledEnum(item, domain.text)"
                       :value="item"
                     /> </el-select
                 ></el-form-item>
@@ -2753,7 +2816,7 @@ const getDsIconName = data => {
         {{ t('auth.add_condition') }}
       </el-button>
       <div class="line"></div>
-      <div class="group-fields_item">
+      <div class="group-fields_item" style="align-items: center">
         <el-input
           :placeholder="t('common.inputText')"
           style="width: 278px; margin-right: 24px"
@@ -2847,7 +2910,7 @@ const getDsIconName = data => {
         height: 24px;
         :deep(.ed-input__wrapper) {
           background-color: #050e21;
-          border: 1px solid #0089ff;
+          box-shadow: 0 0 0 1px var(--ed-color-primary);
           padding: 0 4px;
         }
         :deep(.ed-input__inner) {
@@ -2963,7 +3026,7 @@ const getDsIconName = data => {
           z-index: 10;
           &:hover {
             .ed-icon {
-              color: var(--ed-color-primary, #3370ff);
+              color: var(--ed-color-primary, #3370ff) !important;
             }
           }
         }
@@ -3203,8 +3266,8 @@ const getDsIconName = data => {
 }
 
 .ed-button.is-secondary.is-disabled {
-  color: #5f5f5f !important;
-  border-color: #5f5f5f !important;
+  color: #bbbfc4 !important;
+  border-color: #bbbfc4 !important;
 }
 
 .father .child {
diff --git a/core/core-frontend/src/views/visualized/data/dataset/index.vue b/core/core-frontend/src/views/visualized/data/dataset/index.vue
index a6cc513..0e63197 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/index.vue
@@ -397,6 +397,7 @@ const save = ({ logic, items, errorMessage }) => {
   table.value.id = nodeInfo.id
   table.value.row = 100000
   table.value.filename = exportForm.value.name
+  table.value.dataEaseBi = isDataEaseBi.value || appStore.getIsIframe
   if (errorMessage) {
     ElMessage.error(errorMessage)
     return
@@ -405,10 +406,17 @@ const save = ({ logic, items, errorMessage }) => {
   exportDatasetLoading.value = true
   exportDatasetData(table.value)
     .then(res => {
-      if (res.code === 0) {
-        openMessageLoading(exportData)
+      if (isDataEaseBi.value || appStore.getIsIframe) {
+        const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
+        const link = document.createElement('a')
+        link.style.display = 'none'
+        link.href = URL.createObjectURL(blob)
+        link.download = table.value.filename + '.xlsx' // 下载的文件名
+        document.body.appendChild(link)
+        link.click()
+        document.body.removeChild(link)
       } else {
-        ElMessage.error(res.msg)
+        openMessageLoading(exportData)
       }
     })
     .finally(() => {
@@ -1040,8 +1048,8 @@ const proxyAllowDrop = debounce((arg1, arg2) => {
                     key="structPreview"
                     :columns="columns"
                     v-loading="dataPreviewLoading"
-                    header-class="header-cell"
                     :data="tableData"
+                    header-class="excel-header-cell"
                     :width="width"
                     :height="height"
                     fixed
@@ -1057,7 +1065,6 @@ const proxyAllowDrop = debounce((arg1, arg2) => {
                 <el-table
                   v-loading="dataPreviewLoading"
                   class="dataset-preview_table"
-                  header-class="header-cell"
                   :data="tableData"
                   @row-click="rowClick"
                   key="dataPreview"
@@ -1217,6 +1224,10 @@ const proxyAllowDrop = debounce((arg1, arg2) => {
     background: #eff0f1;
   }
 }
+.custom-tree {
+  height: calc(100vh - 172px);
+  padding: 0 8px;
+}
 .dataset-manage {
   display: flex;
   width: 100%;
@@ -1226,6 +1237,9 @@ const proxyAllowDrop = debounce((arg1, arg2) => {
 
   &.de-100vh {
     height: 100vh;
+    .custom-tree {
+      height: calc(100vh - 122px);
+    }
   }
 
   .resource-area {
@@ -1392,11 +1406,6 @@ const proxyAllowDrop = debounce((arg1, arg2) => {
   }
 }
 
-.custom-tree {
-  height: calc(100vh - 172px);
-  padding: 0 8px;
-}
-
 .custom-tree-node {
   width: calc(100% - 30px);
   display: flex;
diff --git a/core/core-frontend/src/views/visualized/data/datasource/BaseInfoContent.vue b/core/core-frontend/src/views/visualized/data/datasource/BaseInfoContent.vue
index 9e003c3..22ea718 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/BaseInfoContent.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/BaseInfoContent.vue
@@ -2,10 +2,15 @@
 import icon_expandRight_filled from '@/assets/svg/icon_expand-right_filled.svg'
 import { ref } from 'vue'
 import { propTypes } from '@/utils/propTypes'
+import { timestampFormatDate } from '../dataset/form/util'
+import { useI18n } from '@/hooks/web/useI18n'
 defineProps({
-  name: propTypes.string.def('')
+  name: propTypes.string.def(''),
+  time: propTypes.number.def(0),
+  showTime: propTypes.bool.def(false)
 })
 const active = ref(true)
+const { t } = useI18n()
 defineExpose({
   active
 })
@@ -18,6 +23,9 @@ defineExpose({
         <Icon name="icon_expand-right_filled"><icon_expandRight_filled class="svg-icon" /></Icon>
       </el-icon>
       <span class="name">{{ name }}</span>
+      <span v-show="showTime" class="time">
+        {{ t('data_source.data_time') }}{{ timestampFormatDate(time) }}</span
+      >
     </p>
     <slot :active="active"></slot>
   </div>
@@ -60,7 +68,12 @@ defineExpose({
     line-height: 24px;
     margin-left: 8px;
   }
-
+  .time {
+    color: #8f959e;
+    font-size: 14px;
+    line-height: 22px;
+    padding: 0 0 0 8px;
+  }
   &.active {
     .title {
       .ed-icon {
diff --git a/core/core-frontend/src/views/visualized/data/datasource/BaseInfoItem.vue b/core/core-frontend/src/views/visualized/data/datasource/BaseInfoItem.vue
index 4cf4191..9678a3d 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/BaseInfoItem.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/BaseInfoItem.vue
@@ -8,7 +8,7 @@ defineProps({
 <template>
   <div class="base-info-item">
     <p class="label">{{ label }}</p>
-    <p class="value">
+    <p class="value ellipsis">
       <slot></slot>
     </p>
   </div>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/ExcelInfo.vue b/core/core-frontend/src/views/visualized/data/datasource/ExcelInfo.vue
index ad2bdb6..a93eb77 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/ExcelInfo.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/ExcelInfo.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import icon_excel from '@/assets/svg/icon_excel.svg'
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
-const props = withDefaults(
+withDefaults(
   defineProps<{
     name?: string
     size?: number
@@ -41,9 +41,8 @@ const del = () => {
   align-items: center;
   width: 100%;
   height: 58px;
-  padding: 0 16px 0 12px;
+  padding: 0 0 0 0;
   border-radius: 4px;
-  border: 1px solid #dee0e3;
   .excel {
     font-size: 32px;
     margin-right: 14.67px;
diff --git a/core/core-frontend/src/views/visualized/data/datasource/ExcelInfoBase.vue b/core/core-frontend/src/views/visualized/data/datasource/ExcelInfoBase.vue
new file mode 100644
index 0000000..ecfc020
--- /dev/null
+++ b/core/core-frontend/src/views/visualized/data/datasource/ExcelInfoBase.vue
@@ -0,0 +1,54 @@
+<script lang="ts" setup>
+import icon_excel from '@/assets/svg/icon_excel.svg'
+withDefaults(
+  defineProps<{
+    name?: string
+    size?: number
+    showDel?: boolean
+  }>(),
+  {
+    name: '',
+    size: 0
+  }
+)
+</script>
+
+<template>
+  <div class="excel-info_base">
+    <el-icon class="excel">
+      <Icon name="icon_excel"><icon_excel class="svg-icon" /></Icon>
+    </el-icon>
+    <p :title="name" class="name ellipsis">{{ name || '-' }}</p>
+    <p class="size">{{ size || '-' }}</p>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.excel-info_base {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 24px;
+  padding: 0 0 0 0;
+  border-radius: 4px;
+  font-weight: 400;
+  .excel {
+    font-size: 24px;
+    margin-right: 4px;
+  }
+
+  .name {
+    color: #1f2329;
+    font-size: 14px;
+    max-width: calc(100% - 112px);
+    margin-right: 12px;
+    line-height: 22px;
+  }
+
+  .size {
+    color: #8f959e;
+    font-size: 14px;
+    line-height: 22px;
+  }
+}
+</style>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/FinishPage.vue b/core/core-frontend/src/views/visualized/data/datasource/FinishPage.vue
index 75377c7..3cd3335 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/FinishPage.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/FinishPage.vue
@@ -66,7 +66,7 @@ const handleChange = (val: boolean) => {
           </el-icon>
           <div class="info">
             <p class="name">{{ $t('auth.dataset') }}</p>
-            <p class="size">{{ t('data_source.or_large_screen') }}1</p>
+            <p class="size">{{ t('data_source.or_large_screen') }}</p>
           </div>
           <el-button class="create" secondary :disabled="disabled" @click="createDataset">
             {{ t('data_source.go_to_create') }}
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue b/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
index fc271e6..34df5e4 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
@@ -190,7 +190,17 @@ const initApiItem = (
 ) => {
   pluginDs.value = pluginDsList
   pluginIndex.value = indexPlugin
-  isPlugin.value = isPluginDs
+  if (!isPluginDs) {
+    const arr = pluginDs.value.filter(ele => {
+      return ele.type === from.type
+    })
+    if (arr && arr.length > 0) {
+      isPlugin.value = true
+    }
+  } else {
+    isPlugin.value = isPluginDs
+  }
+
   copyItem.value = val.copy
   copyDs.value = from.copy
   dsType.value = from.type
@@ -354,6 +364,12 @@ const saveItem = () => {
     }
   }
   returnAPIItem('returnItem', cloneDeep(apiItem))
+  if (isPlugin.value) {
+    xpackApiItemBasicInfo?.value?.invokeMethod({
+      methodName: 'resetForm',
+      args: []
+    })
+  }
   edit_api_item.value = false
 }
 const before = () => {
@@ -450,12 +466,14 @@ const validateItem = () => {
   }
   cancelMap['/datasource/checkApiDatasource']?.()
   const params = Base64.encode(JSON.stringify(paramsList))
+  formLoading.value = true
   checkApiItem({
     dsType: dsType.value,
     data: Base64.encode(JSON.stringify(apiItem)),
     paramsList: params
   })
     .then(response => {
+      formLoading.value = false
       apiItem.jsonFields = response.data.jsonFields
       apiItem.fields = []
       apiItem.name = response.data.name
@@ -464,6 +482,7 @@ const validateItem = () => {
       ElMessage.success(t('datasource.validate_success'))
     })
     .catch(() => {
+      formLoading.value = false
       ElMessage.error(t('data_source.verification_failed'))
     })
 }
@@ -483,6 +502,12 @@ const handleSubmit = param => {
 
 const closeEditItem = () => {
   cancelMap['/datasource/checkApiDatasource']?.()
+  if (isPlugin.value) {
+    xpackApiItemBasicInfo?.value?.invokeMethod({
+      methodName: 'resetForm',
+      args: []
+    })
+  }
   edit_api_item.value = false
 }
 
@@ -645,35 +670,25 @@ defineExpose({
       activeName === 'table' ? t('datasource.data_table') : t('data_source.interface_parameters')
     "
     v-model="edit_api_item"
-    custom-class="api-datasource-drawer"
+    modal-class="api-datasource-drawer"
     size="1000px"
     :before-close="closeEditItem"
     direction="rtl"
   >
-    <div class="flex-center">
-      <el-steps :active="active" align-center>
+    <div style="display: flex; width: 100%; justify-content: center">
+      <el-steps custom style="max-width: 400px; flex: 1" :active="active" align-center>
         <el-step>
-          <template #icon>
-            <div class="step-icon">
-              <span class="icon">
-                {{ active <= 0 ? '1' : '' }}
-              </span>
-              <span class="title">{{ t('datasource.api_step_1') }}</span>
-            </div>
+          <template #title>
+            {{ t('datasource.api_step_1') }}
           </template>
         </el-step>
         <el-step>
-          <template #icon>
-            <div class="step-icon">
-              <span class="icon">
-                {{ active <= 1 ? '2' : '' }}
-              </span>
-              <span class="title">{{
-                activeName === 'table'
-                  ? t('datasource.api_step_2')
-                  : t('data_source.extract_parameters')
-              }}</span>
-            </div>
+          <template #title>
+            {{
+              activeName === 'table'
+                ? t('datasource.api_step_2')
+                : t('data_source.extract_parameters')
+            }}
           </template>
         </el-step>
       </el-steps>
@@ -979,7 +994,7 @@ defineExpose({
     </el-row>
     <template #footer>
       <el-button secondary @click="closeEditItem">{{ t('common.cancel') }}</el-button>
-      <el-button v-show="active === 0" secondary @click="validate"
+      <el-button v-show="active === 0" :disabled="formLoading" secondary @click="validate"
         >{{ t('commons.validate') }}
       </el-button>
       <el-button type="primary" v-show="active === 0" :disabled="disabledNext" @click="next"
@@ -996,84 +1011,16 @@ defineExpose({
 <style lang="less">
 .api-datasource-drawer {
   .select-type {
-    .ed-select__prefix--light {
-      border-right: none;
-      padding: 0;
+    .ed-select__prefix {
       font-size: 16px;
+      &::after {
+        display: none;
+      }
     }
   }
   .ed-drawer__body {
     padding: 24px 24px 80px 24px !important;
   }
-  .flex-center {
-    .ed-steps {
-      width: 630px;
-    }
-    .ed-step.is-center .ed-step__line {
-      width: 208px;
-      right: 104px;
-      z-index: 5;
-      left: calc(100% - 104px);
-    }
-
-    .ed-step__icon.is-icon {
-      width: auto;
-      position: relative;
-      z-index: 0;
-    }
-
-    .ed-step__head.is-finish::after {
-      right: calc(100% - 133px);
-      top: 44%;
-    }
-
-    .ed-step__head.is-process .ed-step__icon {
-      background-color: transparent;
-      .step-icon {
-        .icon {
-          background: var(--ed-color-primary);
-        }
-      }
-    }
-
-    .ed-step__head.is-finish .ed-step__icon {
-      background-color: transparent;
-      .step-icon {
-        .icon {
-          border: 1px solid var(--ed-color-primary);
-        }
-      }
-    }
-
-    .ed-step__head.is-wait .ed-step__icon {
-      background-color: transparent;
-      .step-icon {
-        .icon {
-          color: #8f959e;
-          border: 1px solid #8f959e;
-        }
-      }
-    }
-
-    .step-icon {
-      display: flex;
-      padding: 0 48px;
-      align-items: center;
-      .icon {
-        width: 28px;
-        height: 28px;
-        line-height: 27px;
-        border-radius: 50%;
-      }
-      .title {
-        margin-left: 8px;
-        color: #1f2329;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 22px;
-      }
-    }
-  }
 
   .ed-form {
     width: 100%;
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/ApiKeyValue.vue b/core/core-frontend/src/views/visualized/data/datasource/form/ApiKeyValue.vue
index 61473c1..c050778 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/ApiKeyValue.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/ApiKeyValue.vue
@@ -3,7 +3,7 @@ import icon_drag_outlined from '@/assets/svg/icon_drag_outlined.svg'
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import icon_add_outlined from '@/assets/svg/icon_add_outlined.svg'
 import { propTypes } from '@/utils/propTypes'
-import { computed, onBeforeMount, PropType, toRefs, inject, ref } from 'vue'
+import { computed, onBeforeMount, PropType, toRefs, inject } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { KeyValue } from './ApiTestModel.js'
 import draggable from 'vuedraggable'
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/CreatDsGroup.vue b/core/core-frontend/src/views/visualized/data/datasource/form/CreatDsGroup.vue
index 01b1148..58b25ed 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/CreatDsGroup.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/CreatDsGroup.vue
@@ -291,7 +291,7 @@ const saveDataset = () => {
         request.apiConfiguration = ''
         checkRepeat(request).then(res => {
           let method = request.id === '' ? save : update
-          if (!request.type.startsWith('API')) {
+          if (!request.type.startsWith('API') && request.type !== 'ExcelRemote') {
             request.syncSetting = null
           }
           if (res) {
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue b/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
index 4959a8c..8baeccc 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
@@ -9,7 +9,7 @@ import deDelete from '@/assets/svg/de-delete.svg'
 import icon_warning_filled from '@/assets/svg/icon_warning_filled.svg'
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
-import { ref, reactive, h, computed, toRefs, nextTick, watch } from 'vue'
+import { ref, reactive, computed, toRefs, nextTick, watch } from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import type { FormInstance, FormRules } from 'element-plus-secondary'
 import EmptyBackground from '@/components/empty-background/src/EmptyBackground.vue'
@@ -24,7 +24,7 @@ import { CustomPassword } from '@/components/custom-password'
 import { ElForm, ElMessage, ElMessageBox } from 'element-plus-secondary'
 import Cron from '@/components/cron/src/Cron.vue'
 import { ComponentPublicInstance } from 'vue'
-import { PluginComponent, XpackComponent } from '@/components/plugin'
+import { XpackComponent } from '@/components/plugin'
 import { iconFieldMap } from '@/components/icon-group/field-list'
 import { boolean } from 'mathjs'
 const { t } = useI18n()
@@ -82,6 +82,9 @@ const state = reactive({
 })
 
 const schemas = ref([])
+const targetCharset = ref(['GBK', 'UTF-8'])
+const charset = ref(['GBK', 'BIG5', 'ISO-8859-1', 'UTF-8', 'UTF-16', 'CP850', 'EUC_JP', 'EUC_KR'])
+
 const loading = ref(false)
 const dsForm = ref<FormInstance>()
 
@@ -106,8 +109,6 @@ const defaultRule = {
 const rule = ref<FormRules>(cloneDeep(defaultRule))
 const api_table_title = ref('')
 const editApiItem = ref()
-const xpack = ref()
-const visible = ref(false)
 const defaultApiItem = {
   name: '',
   deTableName: '',
@@ -446,35 +447,6 @@ const addApiItem = item => {
   })
 }
 
-const addLarkItem = item => {
-  let apiItem = null
-  let editItem = false
-  api_table_title.value = t('datasource.data_table')
-  if (item) {
-    apiItem = cloneDeep(item)
-    editItem = true
-  } else {
-    apiItem = cloneDeep(defaultApiItem)
-    apiItem.type = activeName.value
-    let serialNumber1 =
-      form.value.apiConfiguration.length > 0
-        ? form.value.apiConfiguration[form.value.apiConfiguration.length - 1].serialNumber + 1
-        : 0
-    let serialNumber2 =
-      form.value.paramsConfiguration && form.value.paramsConfiguration.length > 0
-        ? form.value.paramsConfiguration[form.value.paramsConfiguration.length - 1].serialNumber + 1
-        : 0
-    apiItem.serialNumber = serialNumber1 + serialNumber2
-  }
-  visible.value = true
-  nextTick(() => {
-    xpack?.value?.invokeMethod({
-      methodName: 'initApiItem',
-      args: [apiItem, form.value, activeName.value, editItem, isSupportSetKey.value]
-    })
-  })
-}
-
 const activeName = ref('table')
 const showPriority = ref(false)
 const showSSH = ref(false)
@@ -656,7 +628,6 @@ const apiRule = {
 }
 const dialogEditParams = ref(false)
 const dialogRenameApi = ref(false)
-const dialogAddLarkItem = ref(false)
 const activeParamsName = ref('')
 const activeParamsID = ref(0)
 const paramsObj = ref({
@@ -773,21 +744,6 @@ const handleApiParams = (cmd: string, data) => {
   }
 }
 
-const editParams = data => {
-  dialogEditParams.value = true
-}
-
-const getPluginStatic = () => {
-  const arr = pluginDs.value.filter(ele => {
-    return ele.type === form.value.type
-  })
-  return pluginIndex.value
-    ? pluginIndex.value
-    : arr && arr.length > 0
-    ? arr[0].staticMap?.index
-    : null
-}
-
 const delParams = data => {
   ElMessageBox.confirm(t('data_source.sure_to_delete'), {
     confirmButtonType: 'danger',
@@ -848,7 +804,7 @@ defineExpose({
         v-loading="loading"
       >
         <el-form-item
-          :label="t('auth.datasource') + ' ' + t('chart.name')"
+          :label="t('data_source.data_source_name')"
           prop="name"
           v-show="activeStep !== 2"
         >
@@ -881,7 +837,9 @@ defineExpose({
             </el-tabs>
             <el-button type="primary" style="margin-left: auto" @click="() => addApiItem(null)">
               <template #icon>
-                <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
+                <Icon name="icon_add_outlined">
+                  <icon_add_outlined class="svg-icon" />
+                </Icon>
               </template>
               {{ t('common.add') }}
             </el-button>
@@ -914,7 +872,9 @@ defineExpose({
                   </el-col>
                   <el-col style="text-align: right" :span="5">
                     <el-icon class="de-copy-icon hover-icon" @click.stop="copyItem(api)">
-                      <Icon name="de-copy"><deCopy class="svg-icon" /></Icon>
+                      <Icon name="de-copy">
+                        <deCopy class="svg-icon" />
+                      </Icon>
                     </el-icon>
 
                     <span @click.stop>
@@ -1012,13 +972,13 @@ defineExpose({
                   <template #default="scope">
                     <div class="flex-align-center icon">
                       <el-icon>
-                        <Icon
-                          ><component
+                        <Icon>
+                          <component
                             class="svg-icon"
                             :class="`field-icon-${fieldType[scope.row.deType]}`"
                             :is="iconFieldMap[fieldType[scope.row.deType]]"
-                          ></component
-                        ></Icon>
+                          ></component>
+                        </Icon>
                       </el-icon>
                       {{ fieldTypeText[scope.row.deType] }}
                     </div>
@@ -1029,9 +989,9 @@ defineExpose({
                   <template #default="scope">
                     <el-button text @click.stop="delParams(scope.row)">
                       <template #icon>
-                        <Icon name="icon_delete-trash_outlined"
-                          ><icon_deleteTrash_outlined class="svg-icon"
-                        /></Icon>
+                        <Icon name="icon_delete-trash_outlined">
+                          <icon_deleteTrash_outlined class="svg-icon" />
+                        </Icon>
                       </template>
                     </el-button>
                   </template>
@@ -1193,7 +1153,9 @@ defineExpose({
               <span class="name">{{ t('datasource.schema') }}<i class="required" /></span>
               <el-button text size="small" @click="getDsSchema()">
                 <template #icon>
-                  <Icon name="icon_add_outlined"><icon_add_outlined class="svg-icon" /></Icon>
+                  <Icon name="icon_add_outlined">
+                    <icon_add_outlined class="svg-icon" />
+                  </Icon>
                 </template>
                 {{ t('datasource.get_schema') }}
               </el-button>
@@ -1208,6 +1170,26 @@ defineExpose({
               @blur="validatorSchema"
             />
           </el-form-item>
+          <el-form-item v-if="form.type == 'oracle'" :label="$t('datasource.charset')">
+            <el-select
+              v-model="form.configuration.charset"
+              filterable
+              :placeholder="$t('datasource.please_choose_charset')"
+              class="de-select"
+            >
+              <el-option v-for="item in charset" :key="item" :label="item" :value="item" />
+            </el-select>
+          </el-form-item>
+          <el-form-item v-if="form.type == 'oracle'" :label="$t('datasource.targetCharset')">
+            <el-select
+              v-model="form.configuration.targetCharset"
+              filterable
+              :placeholder="$t('datasource.please_choose_targetCharset')"
+              class="de-select"
+            >
+              <el-option v-for="item in targetCharset" :key="item" :label="item" :value="item" />
+            </el-select>
+          </el-form-item>
           <el-form-item
             :label="t('datasource.extra_params')"
             v-if="form.configuration.urlType !== 'jdbcUrl' && form.type !== 'es'"
@@ -1236,9 +1218,9 @@ defineExpose({
           </el-form-item>
           <template v-if="showSSH">
             <el-form-item>
-              <el-checkbox v-model="form.configuration.useSSH">{{
-                t('data_source.enable_ssh')
-              }}</el-checkbox>
+              <el-checkbox v-model="form.configuration.useSSH"
+                >{{ t('data_source.enable_ssh') }}
+              </el-checkbox>
             </el-form-item>
             <el-form-item :label="t('data_source.host')" prop="configuration.sshHost">
               <el-input
@@ -1468,7 +1450,7 @@ defineExpose({
           <el-form-item v-if="form.syncSetting.syncRate === 'CRON'" prop="syncSetting.cron">
             <el-popover :width="834" v-model="cronEdit" trigger="click">
               <template #default>
-                <div style="width: 814px; height: 400px; overflow-y: auto">
+                <div style="width: 814px; height: 450px; overflow-y: auto">
                   <cron
                     v-if="showCron"
                     v-model="form.syncSetting.cron"
@@ -1542,8 +1524,8 @@ defineExpose({
           </el-form-item>
         </el-form>
         <template #footer>
-          <el-button secondary @click="paramsResetForm">{{ t('dataset.cancel') }} </el-button>
-          <el-button type="primary" @click="saveParamsObj">{{ t('dataset.confirm') }} </el-button>
+          <el-button secondary @click="paramsResetForm">{{ t('dataset.cancel') }}</el-button>
+          <el-button type="primary" @click="saveParamsObj">{{ t('dataset.confirm') }}</el-button>
         </template>
       </el-dialog>
       <el-dialog
@@ -1566,8 +1548,8 @@ defineExpose({
           </el-form-item>
         </el-form>
         <template #footer>
-          <el-button secondary @click="apiResetForm">{{ t('dataset.cancel') }} </el-button>
-          <el-button type="primary" @click="saveApiObj">{{ t('dataset.confirm') }} </el-button>
+          <el-button secondary @click="apiResetForm">{{ t('dataset.cancel') }}</el-button>
+          <el-button type="primary" @click="saveApiObj">{{ t('dataset.confirm') }}</el-button>
         </template>
       </el-dialog>
       <api-http-request-draw @return-item="returnItem" ref="editApiItem"></api-http-request-draw>
@@ -1580,6 +1562,7 @@ defineExpose({
   width: 100%;
   display: flex;
   justify-content: center;
+
   .ed-radio {
     height: 22px;
   }
@@ -1598,6 +1581,7 @@ defineExpose({
   .de-select {
     width: 100%;
   }
+
   .ed-input-number {
     width: 100%;
   }
@@ -1625,16 +1609,20 @@ defineExpose({
     .ed-input__wrapper {
       width: 100%;
     }
+
     width: 100%;
   }
+
   .simple-cron {
     height: 32px;
+
     .ed-select,
     .ed-input-number {
       width: 140px;
       margin: 0 8px;
     }
   }
+
   .detail-inner {
     width: 800px;
     padding-top: 8px;
@@ -1655,6 +1643,7 @@ defineExpose({
       border: 1px solid #bbbfc4;
       width: 300px;
       padding: 16px;
+
       .name-copy {
         display: none;
         line-height: 24px;
@@ -1682,6 +1671,7 @@ defineExpose({
 
     .table-info-mr {
       margin: 28px 0 12px 0;
+
       .api-tabs {
         :deep(.ed-tabs__nav-wrap::after) {
           display: none;
@@ -1718,6 +1708,7 @@ defineExpose({
         font-size: 14px;
         font-style: normal;
         line-height: 22px;
+
         &::before {
           width: 8px;
           height: 8px;
@@ -1758,6 +1749,7 @@ defineExpose({
   flex-wrap: wrap;
   margin-left: -16px;
 }
+
 .api-card {
   height: 120px;
   width: 392px;
@@ -1772,20 +1764,24 @@ defineExpose({
   &:hover {
     border-color: var(--ed-color-primary);
   }
+
   .name {
     font-size: 16px;
     font-weight: 500;
     margin-right: 8px;
     max-width: 70%;
   }
+
   .req-title,
   .req-value {
     display: flex;
     font-size: 14px;
     font-weight: 400;
+
     :nth-child(1) {
       width: 120px;
     }
+
     :nth-child(2) {
       margin-left: 24px;
       max-width: 230px;
@@ -1794,20 +1790,25 @@ defineExpose({
       white-space: nowrap;
     }
   }
+
   .req-title {
     color: var(--deTextSecondary, #646a73);
     margin: 16px 0 4px 0;
   }
+
   .req-value {
     color: var(--deTextPrimary, #1f2329);
   }
+
   .de-copy-icon {
     margin-right: 16px;
     color: var(--deTextSecondary, #646a73);
   }
+
   .de-delete-icon {
     cursor: pointer;
   }
+
   .de-tag {
     display: inline-flex;
     justify-content: center;
@@ -1835,6 +1836,7 @@ defineExpose({
   padding: 20px 24px !important;
   display: flex;
   flex-wrap: wrap;
+
   .small {
     height: 28px;
     min-width: 48px !important;
@@ -1852,11 +1854,13 @@ defineExpose({
     margin-left: 8.67px;
     color: var(--deTextPrimary, #1f2329);
   }
+
   i {
     font-size: 14.666666030883789px;
     color: var(--deWarning, #ff8800);
     line-height: 22px;
   }
+
   .foot {
     text-align: right;
     width: 100%;
@@ -1869,9 +1873,11 @@ defineExpose({
     display: flex !important;
     justify-content: space-between;
     padding-right: 0;
+
     &::after {
       display: none;
     }
+
     .name {
       .required::after {
         content: '*';
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/ExcelDetail.vue b/core/core-frontend/src/views/visualized/data/datasource/form/ExcelDetail.vue
index 33dd6f4..c168fd7 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/ExcelDetail.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/ExcelDetail.vue
@@ -1,6 +1,5 @@
 <script lang="tsx" setup>
 import icon_upload_outlined from '@/assets/svg/icon_upload_outlined.svg'
-import icon_refresh_outlined from '@/assets/svg/icon_refresh_outlined.svg'
 import { Icon } from '@/components/icon-custom'
 import { ElIcon } from 'element-plus-secondary'
 import { useI18n } from '@/hooks/web/useI18n'
@@ -15,6 +14,7 @@ import {
   onBeforeUnmount,
   nextTick
 } from 'vue'
+import { fieldType as fieldTypeLowercase } from '@/utils/attr'
 import { ElMessage, ElMessageBox } from 'element-plus-secondary'
 import { save, update } from '@/api/datasource'
 import type { Action } from 'element-plus-secondary'
@@ -36,6 +36,7 @@ export interface Param {
   creator?: string
   isPlugin?: boolean
   staticMap?: any
+  configuration?: {}
 }
 
 export interface Field {
@@ -44,6 +45,10 @@ export interface Field {
   fieldSize: number
   fieldType: string
   name: string
+  deExtractType: number
+  checked: boolean
+  primaryKey: boolean
+  length: number
 }
 const props = defineProps({
   param: {
@@ -116,10 +121,17 @@ const fieldType = {
   DOUBLE: 'value'
 }
 
+const fieldTypeToStr = {
+  0: 'TEXT',
+  2: 'LONG',
+  3: 'DOUBLE'
+}
+
 const generateColumns = (arr: Field[]) =>
   arr.map(ele => ({
     key: ele.originName,
     fieldType: ele.fieldType,
+    deExtractType: ele.deExtractType,
     dataKey: ele.originName,
     title: ele.name,
     checked: ele.checked,
@@ -325,68 +337,21 @@ const saveExcelData = (sheetFileMd5, table, params, successCb, finallyCb) => {
   } else {
     method = update
   }
-  if (new Set(sheetFileMd5).size !== sheetFileMd5.length && !props.param.id) {
-    ElMessageBox.confirm(t('dataset.merge_title'), {
-      confirmButtonText: t('dataset.merge'),
-      tip: t('dataset.task.excel_replace_msg'),
-      cancelButtonText: t('dataset.no_merge'),
-      confirmButtonType: 'primary',
-      type: 'warning',
-      autofocus: false,
-      callback: (action: Action) => {
-        if (action === 'close') return
-        loading.value = true
-        table.mergeSheet = action === 'confirm'
-        if (action === 'confirm') {
-          method(table)
-            .then(res => {
-              emitter.emit('showFinishPage', res)
-              successCb?.()
-              ElMessage({
-                message: t('commons.save_success'),
-                type: 'success'
-              })
-            })
-            .finally(() => {
-              finallyCb?.()
-              loading.value = false
-            })
-        }
-
-        if (action === 'cancel') {
-          method(table)
-            .then(res => {
-              emitter.emit('showFinishPage', res)
-              successCb?.()
-              ElMessage({
-                message: t('commons.save_success'),
-                type: 'success'
-              })
-            })
-            .finally(() => {
-              finallyCb?.()
-              loading.value = false
-            })
-        }
-      }
+  if (loading.value) return
+  loading.value = true
+  method(table)
+    .then(res => {
+      emitter.emit('showFinishPage', res)
+      successCb?.()
+      ElMessage({
+        message: t('commons.save_success'),
+        type: 'success'
+      })
+    })
+    .finally(() => {
+      finallyCb?.()
+      loading.value = false
     })
-  } else {
-    if (loading.value) return
-    loading.value = true
-    method(table)
-      .then(res => {
-        emitter.emit('showFinishPage', res)
-        successCb?.()
-        ElMessage({
-          message: t('commons.save_success'),
-          type: 'success'
-        })
-      })
-      .finally(() => {
-        finallyCb?.()
-        loading.value = false
-      })
-  }
 }
 
 const onChange = file => {
@@ -455,8 +420,17 @@ const appendReplaceExcel = response => {
 const status = ref(false)
 const initMultipleTable = ref(false)
 const currentMode = ref('preview')
-const refreshData = () => {
-  currentMode.value = 'preview'
+
+const deExtractTypeChange = item => {
+  item.deType = item.deExtractType
+  const sheet = state.excelData[0]?.sheets.find(ele => ele.sheetId === activeTab.value)
+  sheet.fields.forEach(row => {
+    if (row.originName === item.dataKey) {
+      row.deExtractType = item.deExtractType
+      row.deType = item.deExtractType
+      row.fieldType = fieldTypeToStr[item.deExtractType]
+    }
+  })
 }
 
 const lengthChange = val => {
@@ -476,6 +450,15 @@ const primaryKeyChange = val => {
   })
 }
 
+const fieldOptions = [
+  { label: t('dataset.text'), value: 0 },
+  { label: t('dataset.value'), value: 2 },
+  {
+    label: t('dataset.value') + '(' + t('dataset.float') + ')',
+    value: 3
+  }
+]
+
 const handleSelectionChange = val => {
   if (!initMultipleTable.value) {
     multipleSelection.value = val
@@ -517,7 +500,7 @@ const disabledFieldLength = item => {
   if (!item.checked) {
     return true
   }
-  if (item.fieldType !== 'TEXT') {
+  if (item.deExtractType !== 0) {
     return true
   }
 }
@@ -534,6 +517,9 @@ const changeCurrentMode = val => {
       }
       initMultipleTable.value = false
     })
+  } else {
+    const sheet = state.excelData[0]?.sheets.find(ele => ele.sheetId === activeTab.value)
+    handleNodeClick(sheet)
   }
 }
 
@@ -638,14 +624,31 @@ defineExpose({
           :rules="[
             {
               required: true,
-              message: t('common.please_input') + t('datasource.datasource') + t('common.name')
+              message:
+                t('common.please_input') +
+                t('common.empty') +
+                t('datasource.datasource') +
+                t('common.empty') +
+                t('common.name')
             }
           ]"
-          :label="t('visualization.custom') + t('datasource.datasource') + t('common.name')"
+          :label="
+            t('visualization.custom') +
+            t('common.empty') +
+            t('datasource.datasource') +
+            t('common.empty') +
+            t('common.name')
+          "
         >
           <el-input
             v-model="param.name"
-            :placeholder="t('common.please_input') + t('datasource.datasource') + t('common.name')"
+            :placeholder="
+              t('common.please_input') +
+              t('common.empty') +
+              t('datasource.datasource') +
+              t('common.empty') +
+              t('common.name')
+            "
           />
         </el-form-item>
       </el-form>
@@ -706,20 +709,48 @@ defineExpose({
             <el-table-column :label="t('data_set.field_name')">
               <template #default="scope">{{ scope.row.title }}</template>
             </el-table-column>
-            <el-table-column :label="t('data_set.field_type')">
-              <template #default="scope">
-                <div class="flex-align-center">
-                  <el-icon>
-                    <Icon>
-                      <component
-                        :class="`svg-icon field-icon-${fieldType[scope.row.fieldType]}`"
-                        :is="iconFieldMap[fieldType[scope.row.fieldType]]"
-                      ></component>
-                    </Icon>
-                  </el-icon>
 
-                  {{ t(`dataset.${fieldType[scope.row.fieldType]}`) }}
-                </div>
+            <el-table-column prop="deExtractType" :label="t('datasource.field_type')">
+              <template #default="scope">
+                <el-select
+                  v-model="scope.row.deExtractType"
+                  class="select-type"
+                  style="display: inline-block; width: 120px"
+                  @change="deExtractTypeChange(scope.row)"
+                >
+                  <template #prefix>
+                    <el-icon>
+                      <Icon :className="`field-icon-${fieldTypeLowercase[scope.row.deExtractType]}`"
+                        ><component
+                          class="svg-icon"
+                          :class="`field-icon-${fieldTypeLowercase[scope.row.deExtractType]}`"
+                          :is="iconFieldMap[fieldTypeLowercase[scope.row.deExtractType]]"
+                        ></component
+                      ></Icon>
+                    </el-icon>
+                  </template>
+                  <el-option
+                    v-for="item in fieldOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                    <span style="float: left">
+                      <el-icon>
+                        <Icon :className="`field-icon-${fieldTypeLowercase[item.value]}`"
+                          ><component
+                            class="svg-icon"
+                            :class="`field-icon-${fieldTypeLowercase[item.value]}`"
+                            :is="iconFieldMap[fieldTypeLowercase[item.value]]"
+                          ></component
+                        ></Icon>
+                      </el-icon>
+                    </span>
+                    <span style="float: left; font-size: 12px; color: #8492a6">{{
+                      item.label
+                    }}</span>
+                  </el-option>
+                </el-select>
               </template>
             </el-table-column>
             <el-table-column
@@ -784,7 +815,8 @@ defineExpose({
     background: #f5f6f7;
     padding: 16px;
     .btn-select {
-      width: 164px;
+      min-width: 164px;
+      padding: 0 6px;
       height: 32px;
       display: flex;
       align-items: center;
@@ -802,7 +834,7 @@ defineExpose({
       }
       .ed-button.is-text {
         height: 24px;
-        width: 74px;
+        min-width: 74px;
         line-height: 24px;
       }
       .ed-button + .ed-button {
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/ExcelRemoteDetail.vue b/core/core-frontend/src/views/visualized/data/datasource/form/ExcelRemoteDetail.vue
new file mode 100644
index 0000000..7c89c51
--- /dev/null
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/ExcelRemoteDetail.vue
@@ -0,0 +1,1452 @@
+<script lang="tsx" setup>
+import icon_calendar_outlined from '@/assets/svg/icon_calendar_outlined.svg'
+import {
+  ref,
+  reactive,
+  h,
+  toRefs,
+  nextTick,
+  watch,
+  shallowRef,
+  onMounted,
+  onBeforeUnmount
+} from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import { type Action, ElIcon, FormInstance, FormRules } from 'element-plus-secondary'
+import { cloneDeep, debounce } from 'lodash-es'
+import { iconFieldMap } from '@/components/icon-group/field-list'
+import { Icon } from '@/components/icon-custom'
+import { ElForm, ElMessage, ElMessageBox } from 'element-plus-secondary'
+import Cron from '@/components/cron/src/Cron.vue'
+import { boolean } from 'mathjs'
+import SheetTabs from '@/views/visualized/data/datasource/SheetTabs.vue'
+import { loadRemoteFile, save, update } from '@/api/datasource'
+import { Base64 } from 'js-base64'
+import { useEmitt } from '@/hooks/web/useEmitt'
+import { CustomPassword } from '@/components/custom-password'
+import { fieldType as fieldTypeLowercase } from '@/utils/attr'
+const { t } = useI18n()
+export interface Param {
+  editType: number
+  pid?: string
+  type?: string
+  id?: string
+  name?: string
+  creator?: string
+  isPlugin?: boolean
+  staticMap?: any
+}
+
+export interface Field {
+  accuracy: number
+  originName: string
+  fieldSize: number
+  fieldType: string
+  name: string
+  deExtractType: number
+  checked: boolean
+  primaryKey: boolean
+  length: number
+}
+
+const props = defineProps({
+  form: {
+    required: false,
+    default() {
+      return reactive<{
+        id: string
+        name: string
+        desc: string
+        type: string
+        editType: number
+      }>({
+        id: '0',
+        name: '',
+        desc: '',
+        type: 'Excel',
+        editType: 0
+      })
+    },
+    type: Object
+  },
+  isSupportSetKey: {
+    type: boolean,
+    required: true
+  },
+  activeStep: {
+    required: false,
+    default: 1,
+    type: Number
+  }
+})
+
+const { form, isSupportSetKey, activeStep } = toRefs(props)
+const defaultSheetObj = {
+  tableName: ' ',
+  sheetExcelId: '',
+  fields: [],
+  jsonArray: [],
+  nameExist: false,
+  empty: '',
+  overLength: false
+}
+const sheetObj = reactive(cloneDeep(defaultSheetObj))
+const state = reactive({
+  excelData: [],
+  defaultExpandedKeys: [],
+  defaultCheckedKeys: [],
+  fileList: null,
+  sheets: []
+})
+
+const currentMode = ref('preview')
+const remoteExcelForm = ref<FormInstance>()
+const uploading = ref(false)
+const multipleSelection = shallowRef([])
+const isResize = ref(true)
+const initMultipleTable = ref(false)
+const multipleTable = ref()
+const { emitter } = useEmitt()
+const columns = shallowRef([])
+const tabList = shallowRef([])
+const loading = ref(false)
+const cronEdit = ref(true)
+const defaultRule = {
+  name: [
+    {
+      required: true,
+      message: t('sync_datasource.input_ds_name'),
+      trigger: 'blur'
+    },
+    {
+      min: 1,
+      max: 64,
+      message: t('datasource.input_limit_1_64', [1, 64]),
+      trigger: 'blur'
+    }
+  ],
+  'configuration.url': [
+    {
+      required: true,
+      message: t('datasource.remote_excel_url_empty'),
+      trigger: 'blur'
+    }
+  ]
+}
+
+const rule = ref<FormRules>(cloneDeep(defaultRule))
+const activeTab = ref('')
+
+const initForm = type => {
+  form.value.configuration = {
+    url: '',
+    userName: '',
+    passwd: ''
+  }
+  form.value.syncSetting = {
+    updateType: 'all_scope',
+    syncRate: 'SIMPLE_CRON',
+    simpleCronValue: '1',
+    simpleCronType: 'minute',
+    startTime: '',
+    endTime: '',
+    endLimit: '0',
+    cron: '0 0/1 * * * ? *'
+  }
+  form.value.type = type
+}
+
+const handleResize = debounce(() => {
+  isResize.value = false
+  nextTick(() => {
+    isResize.value = true
+  })
+}, 500)
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize)
+})
+
+watch(
+  () => form.value.type,
+  val => {
+    if (!val.startsWith('API')) {
+      rule.value = cloneDeep(defaultRule)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => activeStep.value,
+  () => {
+    showCron.value = form.value.syncSetting?.syncRate === 'CRON'
+  }
+)
+
+const submitForm = () => {
+  remoteExcelForm.value.clearValidate()
+  return remoteExcelForm.value.validate
+}
+
+const submitSyncSettingForm = () => {
+  dsApiForm.value.clearValidate()
+  return dsApiForm.value.validate
+}
+
+const validateExcel = () => {
+  let selectedSheet = []
+  let sheetFileMd5 = []
+  let selectNode = state.excelData[0]?.sheets
+  if (selectNode === undefined) {
+    ElMessage({
+      message: t('datasource.file_not_empty'),
+      type: 'error'
+    })
+    return false
+  }
+  for (let i = 0; i < selectNode.length; i++) {
+    if (selectNode[i].sheet) {
+      if (selectNode[i].fields.filter(field => field.checked).length == 0) {
+        ElMessage({
+          message: selectNode[i].excelLabel + t('datasource.api_field_not_empty'),
+          type: 'error'
+        })
+        return false
+      }
+      for (let j = 0; j < selectNode[i].fields.length; j++) {
+        if (
+          selectNode[i].fields[j].checked &&
+          selectNode[i].fields[j].primaryKey &&
+          !selectNode[i].fields[j].length &&
+          selectNode[i].fields[j].deExtractType === 0
+        ) {
+          ElMessage({
+            message:
+              t('datasource.primary_key_length') +
+              selectNode[i].excelLabel +
+              ': ' +
+              selectNode[i].fields[j].name,
+            type: 'error'
+          })
+          return false
+        }
+      }
+      selectedSheet.push(selectNode[i])
+      sheetFileMd5.push(selectNode[i].fieldsMd5)
+    }
+  }
+  if (!selectedSheet.length) {
+    ElMessage({
+      message: t('dataset.ple_select_excel'),
+      type: 'error'
+    })
+    return false
+  }
+  return true
+}
+
+const clearForm = () => {
+  state.excelData = []
+  activeTab.value = ''
+  tabList.value = []
+  Object.assign(sheetObj, cloneDeep(defaultSheetObj))
+  return remoteExcelForm.value.clearValidate()
+}
+
+const resetForm = () => {
+  remoteExcelForm.value.resetFields()
+}
+
+const showCron = ref(false)
+
+const onRateChange = () => {
+  if (form.value.syncSetting.syncRate === 'SIMPLE') {
+    form.value.syncSetting.endLimit = 0
+    form.value.syncSetting.endTime = 0
+    form.value.syncSetting.cron = ''
+  }
+  if (form.value.syncSetting.syncRate === 'SIMPLE_CRON') {
+    form.value.syncSetting.cron = '0 0/1 * * * ? *'
+    form.value.syncSetting.simpleCronType = 'minute'
+  }
+  if (form.value.syncSetting.syncRate === 'CRON') {
+    form.value.syncSetting.cron = '00 00 * ? * * *'
+  }
+  nextTick(() => {
+    showCron.value = form.value.syncSetting.syncRate === 'CRON'
+  })
+}
+
+const onSimpleCronChange = () => {
+  if (form.value.syncSetting.simpleCronType === 'minute') {
+    if (form.value.syncSetting.simpleCronValue < 1 || form.value.syncSetting.simpleCronValue > 59) {
+      ElMessage.warning(t('cron.minute_limit'))
+      form.value.syncSetting.simpleCronValue = 59
+    }
+    form.value.syncSetting.cron = '0 0/' + form.value.syncSetting.simpleCronValue + ' * * * ? *'
+    return
+  }
+  if (form.value.syncSetting.simpleCronType === 'hour') {
+    if (form.value.syncSetting.simpleCronValue < 1 || form.value.syncSetting.simpleCronValue > 23) {
+      ElMessage.warning(t('cron.hour_limit'))
+      form.value.syncSetting.simpleCronValue = 23
+    }
+    form.value.syncSetting.cron = '0 0 0/' + form.value.syncSetting.simpleCronValue + ' * * ? *'
+    return
+  }
+  if (form.value.syncSetting.simpleCronType === 'day') {
+    if (form.value.syncSetting.simpleCronValue < 1 || form.value.syncSetting.simpleCronValue > 31) {
+      ElMessage.warning(t('cron.day_limit'))
+      form.value.syncSetting.simpleCronValue = 31
+    }
+    form.value.syncSetting.cron = '0 0 0 1/' + form.value.syncSetting.simpleCronValue + ' * ? *'
+    return
+  }
+}
+
+const dsApiForm = ref()
+const apiRule = {
+  'syncSetting.updateType': [
+    {
+      required: true,
+      message: t('datasource.update_type'),
+      trigger: 'change'
+    }
+  ],
+  'syncSetting.syncRate': [
+    {
+      required: true,
+      message: t('datasource.sync_rate'),
+      trigger: 'change'
+    }
+  ],
+  'syncSetting.simpleCronValue': [
+    {
+      required: true,
+      message: t('auth.set_rules'),
+      trigger: 'change'
+    }
+  ],
+  'syncSetting.cron': [
+    {
+      required: true,
+      message: t('common.cron_exp'),
+      trigger: 'change'
+    }
+  ],
+  'syncSetting.startTime': [
+    {
+      required: true,
+      message: t('datasource.start_time'),
+      trigger: 'change'
+    }
+  ]
+}
+
+const handleTabClick = tab => {
+  activeTab.value = tab.value
+  const sheet = state.excelData[0]?.sheets.find(ele => ele.sheetId === tab.value)
+  handleNodeClick(sheet)
+}
+
+const handleNodeClick = data => {
+  if (data.sheet) {
+    Object.assign(sheetObj, data)
+    columns.value = generateColumns(data.fields)
+    multipleSelection.value = columns.value.filter(item => item.checked)
+    currentMode.value = 'preview'
+  }
+}
+const fieldType = {
+  TEXT: 'text',
+  DATETIME: 'time',
+  LONG: 'value',
+  DOUBLE: 'value'
+}
+
+const generateColumns = (arr: Field[]) =>
+  arr.map(ele => ({
+    key: ele.originName,
+    fieldType: ele.fieldType,
+    deExtractType: ele.deExtractType,
+    dataKey: ele.originName,
+    title: ele.name,
+    checked: ele.checked,
+    primaryKey: ele.primaryKey,
+    length: ele.length,
+    width: 150,
+    headerCellRenderer: ({ column }) => (
+      <div class="flex-align-center icon">
+        <ElIcon>
+          <Icon>
+            {h(iconFieldMap[fieldType[column.fieldType]], {
+              class: `svg-icon field-icon-${fieldType[column.fieldType]}`
+            })}
+          </Icon>
+        </ElIcon>
+        <span class="ellipsis" title={column.title} style={{ width: '100px' }}>
+          {column.title}
+        </span>
+      </div>
+    )
+  }))
+
+const loadData = () => {
+  remoteExcelForm.value.validate(val => {
+    if (val) {
+      const request = JSON.parse(JSON.stringify(form.value.configuration))
+      request.userName = Base64.encode(request.userName)
+      request.passwd = Base64.encode(request.passwd)
+      request.datasourceId = form.value.id || 0
+      request.editType = form.value.editType
+      loading.value = true
+      return loadRemoteFile(request)
+        .then(res => {
+          loading.value = false
+          uploadSuccess(res)
+          loading.value = false
+        })
+        .catch(error => {
+          state.excelData = []
+          activeTab.value = ''
+          tabList.value = []
+          Object.assign(sheetObj, cloneDeep(defaultSheetObj))
+          if (error.code === 'ECONNABORTED') {
+            ElMessage({
+              type: 'error',
+              message: error.message,
+              showClose: true
+            })
+          }
+          loading.value = false
+        })
+    }
+  })
+}
+
+const uploadSuccess = response => {
+  if (!response) {
+    state.excelData = []
+    activeTab.value = ''
+    tabList.value = []
+    Object.assign(sheetObj, cloneDeep(defaultSheetObj))
+    ElMessage.warning(response.msg)
+    return
+  }
+  if (response?.code !== 0) {
+    state.excelData = []
+    activeTab.value = ''
+    tabList.value = []
+    Object.assign(sheetObj, cloneDeep(defaultSheetObj))
+    ElMessage.warning(response.msg)
+    return
+  }
+  columns.value = []
+  Object.assign(sheetObj, cloneDeep(defaultSheetObj))
+  multipleSelection.value = []
+  uploading.value = false
+  if (!form.value.name) {
+    form.value.name = response.data.excelLabel
+  }
+  tabList.value = response.data.sheets.map(ele => {
+    const { sheetId, tableName, newSheet } = ele
+    return {
+      value: sheetId,
+      label: tableName,
+      newSheet: newSheet
+    }
+  })
+  state.excelData = [response.data]
+  const [sheet] = tabList.value
+  sheet && handleTabClick(sheet)
+}
+
+const changeCurrentMode = val => {
+  currentMode.value = val
+  if (val === 'select') {
+    nextTick(() => {
+      initMultipleTable.value = true
+      for (let i = 0; i < columns.value.length; i++) {
+        if (columns.value[i].checked) {
+          multipleTable?.value?.toggleRowSelection(columns.value[i], true)
+        }
+      }
+      initMultipleTable.value = false
+    })
+  } else {
+    const sheet = state.excelData[0]?.sheets.find(ele => ele.sheetId === activeTab.value)
+    handleNodeClick(sheet)
+  }
+}
+
+const handleSelectionChange = val => {
+  if (!initMultipleTable.value) {
+    multipleSelection.value = val
+    multipleSelection.value.forEach(row => {
+      row.checked = true
+    })
+    columns.value.forEach(row => {
+      let item
+      for (let i = 0; i < multipleSelection.value.length; i++) {
+        if (row.dataKey === multipleSelection.value[i].dataKey) {
+          item = multipleSelection.value[i]
+        }
+      }
+      if (item) {
+        row.checked = item.checked
+      } else {
+        row.checked = false
+      }
+    })
+
+    const sheet = state.excelData[0]?.sheets.find(ele => ele.sheetId === activeTab.value)
+    sheet.fields.forEach(row => {
+      let item
+      for (let i = 0; i < multipleSelection.value.length; i++) {
+        if (row.originName === multipleSelection.value[i].dataKey) {
+          item = multipleSelection.value[i]
+        }
+      }
+      if (item) {
+        row.checked = item.checked
+      } else {
+        row.checked = false
+      }
+    })
+  }
+}
+
+const lengthChange = val => {
+  const sheet = state.excelData[0]?.sheets.find(ele => ele.sheetId === activeTab.value)
+  sheet.fields.forEach(row => {
+    if (row.originName === val.dataKey) {
+      row.length = val.length
+    }
+  })
+}
+
+const primaryKeyChange = val => {
+  const sheet = state.excelData[0]?.sheets.find(ele => ele.sheetId === activeTab.value)
+  sheet.fields.forEach(row => {
+    if (row.originName === val.dataKey) {
+      row.primaryKey = val.primaryKey
+    }
+  })
+}
+
+const disabledFieldLength = item => {
+  if (!item.checked) {
+    return true
+  }
+  if (item.deExtractType !== 0) {
+    return true
+  }
+}
+
+const saveExcelDs = (params, successCb, finallyCb) => {
+  let validate = true
+  let selectedSheet = []
+  let sheetFileMd5 = []
+  let effectExtField = false
+  let changeFiled = false
+  let selectNode = state.excelData[0]?.sheets
+  for (let i = 0; i < selectNode.length; i++) {
+    if (selectNode[i].sheet) {
+      if (selectNode[i].effectExtField) {
+        effectExtField = true
+      }
+      if (selectNode[i].changeFiled) {
+        changeFiled = true
+      }
+      if (selectNode[i].fields.filter(field => field.checked).length == 0) {
+        ElMessage({
+          message: selectNode[i].excelLabel + t('datasource.api_field_not_empty'),
+          type: 'error'
+        })
+        finallyCb?.()
+        return
+      }
+      for (let j = 0; j < selectNode[i].fields.length; j++) {
+        if (
+          selectNode[i].fields[j].checked &&
+          selectNode[i].fields[j].primaryKey &&
+          !selectNode[i].fields[j].length &&
+          selectNode[i].fields[j].deExtractType === 0
+        ) {
+          ElMessage({
+            message:
+              t('datasource.primary_key_length') +
+              selectNode[i].excelLabel +
+              ': ' +
+              selectNode[i].fields[j].name,
+            type: 'error'
+          })
+          finallyCb?.()
+          return
+        }
+      }
+      selectedSheet.push(selectNode[i])
+      sheetFileMd5.push(selectNode[i].fieldsMd5)
+    }
+  }
+  if (!selectedSheet.length) {
+    ElMessage({
+      message: t('dataset.ple_select_excel'),
+      type: 'error'
+    })
+    finallyCb?.()
+    return
+  }
+  if (!validate) {
+    finallyCb?.()
+    return
+  }
+
+  let table = {}
+  if (params) {
+    form.value.name = params.name
+  }
+  form.value.configuration.sheets = selectedSheet
+  if (!props.form.id) {
+    table = {
+      id: props.form.id,
+      name: props.form.name,
+      type: 'ExcelRemote',
+      configuration: JSON.parse(JSON.stringify(form.value.configuration)),
+      editType: 0
+    }
+  } else {
+    table = {
+      id: props.form.id,
+      name: props.form.name,
+      type: 'ExcelRemote',
+      configuration: JSON.parse(JSON.stringify(form.value.configuration)),
+      editType: props.form.editType ? props.form.editType : 0
+    }
+  }
+  table.syncSetting = form.value.syncSetting
+  if (props.form.editType === 0 && props.form.id && (effectExtField || changeFiled)) {
+    ElMessageBox.confirm(t('deDataset.replace_the_data'), {
+      confirmButtonText: t('dataset.confirm'),
+      tip: t('data_source.to_replace_it'),
+      cancelButtonText: 'Cancel',
+      confirmButtonType: 'primary',
+      type: 'warning',
+      autofocus: false,
+      showClose: false,
+      callback: (action: Action) => {
+        if (action === 'confirm') {
+          saveExcelData(sheetFileMd5, table, params, successCb, finallyCb)
+        }
+      }
+    })
+  } else {
+    saveExcelData(sheetFileMd5, table, params, successCb, finallyCb)
+  }
+}
+
+const fieldOptions = [
+  { label: t('dataset.text'), value: 0 },
+  { label: t('dataset.value'), value: 2 },
+  {
+    label: t('dataset.value') + '(' + t('dataset.float') + ')',
+    value: 3
+  }
+]
+
+const deExtractTypeChange = item => {
+  item.deType = item.deExtractType
+  const sheet = state.excelData[0]?.sheets.find(ele => ele.sheetId === activeTab.value)
+  sheet.fields.forEach(row => {
+    if (row.originName === item.dataKey) {
+      row.deExtractType = item.deExtractType
+      row.deType = item.deExtractType
+      row.fieldType = fieldTypeToStr[item.deExtractType]
+    }
+  })
+}
+
+const fieldTypeToStr = {
+  0: 'TEXT',
+  2: 'LONG',
+  3: 'DOUBLE'
+}
+const saveExcelData = (sheetFileMd5, table, params, successCb, finallyCb) => {
+  for (let i = 0; i < table.configuration.sheets.length; i++) {
+    table.configuration.sheets[i].data = []
+    table.configuration.sheets[i].jsonArray = []
+  }
+  table.configuration = Base64.encode(JSON.stringify(table.configuration))
+  table.syncSetting.startTime = new Date(table.syncSetting.startTime).getTime()
+  table.syncSetting.endTime = new Date(table.syncSetting.endTime).getTime()
+  let method = save
+  if (!table.id || table.id === '0') {
+    delete table.id
+    table.pid = params.pid
+  } else {
+    method = update
+  }
+  if (loading.value) return
+  loading.value = true
+  method(table)
+    .then(res => {
+      emitter.emit('showFinishPage', res)
+      successCb?.()
+      ElMessage({
+        message: t('commons.save_success'),
+        type: 'success'
+      })
+    })
+    .finally(() => {
+      finallyCb?.()
+      loading.value = false
+    })
+}
+
+defineExpose({
+  submitForm,
+  resetForm,
+  initForm,
+  clearForm,
+  submitSyncSettingForm,
+  validateExcel,
+  saveExcelDs
+})
+</script>
+
+<template>
+  <div class="editor-detail">
+    <div class="detail-inner create-dialog">
+      <div class="info-update">
+        <div :class="activeStep === 1 && 'active'" class="info-text">
+          {{ t('data_source.source_configuration_information') }}
+        </div>
+        <div class="update-info-line"></div>
+        <div :class="activeStep === 2 && 'active'" class="update-text">
+          {{ t('data_source.data_update_settings') }}
+        </div>
+      </div>
+      <div class="title-form_primary base-info" v-show="activeStep !== 2">
+        {{ t('datasource.basic_info') }}
+      </div>
+      <el-form
+        ref="remoteExcelForm"
+        @submit.prevent
+        :model="form"
+        :rules="rule"
+        label-width="180px"
+        label-position="top"
+        require-asterisk-position="right"
+        v-loading="loading"
+        v-show="activeStep !== 2"
+      >
+        <el-form-item
+          :label="t('data_source.data_source_name')"
+          prop="name"
+          v-show="activeStep !== 2"
+        >
+          <el-input
+            v-model="form.name"
+            autocomplete="off"
+            :placeholder="t('data_source.data_source_name_de')"
+          />
+        </el-form-item>
+        <el-form-item
+          :label="t('datasource.remote_excel_url')"
+          prop="configuration.url"
+          v-show="activeStep !== 2"
+        >
+          <el-input
+            v-model="form.configuration.url"
+            autocomplete="off"
+            :placeholder="t('datasource.remote_excel_url_placeholder')"
+          />
+        </el-form-item>
+        <el-form-item :label="t('datasource.username')" v-show="activeStep !== 2">
+          <el-input
+            v-model="form.configuration.userName"
+            autocomplete="off"
+            :placeholder="t('datasource.please_input_user_name')"
+          />
+        </el-form-item>
+        <el-form-item :label="t('datasource.password')" v-show="activeStep !== 2">
+          <CustomPassword
+            :placeholder="t('common.inputText') + t('common.empty') + t('datasource.password')"
+            show-password
+            type="password"
+            v-model="form.configuration.passwd"
+          />
+        </el-form-item>
+        <el-form-item v-show="activeStep !== 2">
+          <el-button type="primary" @click="loadData()">
+            {{ t('datasource.load_data') }}
+          </el-button>
+        </el-form-item>
+      </el-form>
+      <template v-if="activeTab">
+        <div class="title-form_primary" v-show="activeStep !== 2">
+          {{ t('chart.data_preview') }}
+        </div>
+        <SheetTabs
+          v-show="activeStep !== 2"
+          :activeTab="activeTab"
+          @tab-click="handleTabClick"
+          :tab-list="tabList"
+        ></SheetTabs>
+
+        <div class="table-select_mode" v-if="form.editType === 0" v-show="activeStep !== 2">
+          <div class="btn-select">
+            <el-button
+              @click="changeCurrentMode('preview')"
+              :class="[currentMode === 'preview' && 'is-active']"
+              text
+            >
+              {{ t('chart.data_preview') }}
+            </el-button>
+            <el-button
+              @click="changeCurrentMode('select')"
+              :class="[currentMode === 'select' && 'is-active']"
+              text
+            >
+              {{ t('data_set.field_selection') }}
+            </el-button>
+          </div>
+        </div>
+        <div
+          class="info-table"
+          :class="form.editType === 0 && 'info-table_height'"
+          v-if="isResize"
+          v-show="activeStep !== 2"
+        >
+          <el-auto-resizer v-if="currentMode === 'preview'">
+            <template #default="{ height, width }">
+              <el-table-v2
+                :columns="multipleSelection"
+                header-class="excel-header-cell"
+                :data="sheetObj.jsonArray"
+                :width="width"
+                :height="height"
+                fixed
+              />
+            </template>
+          </el-auto-resizer>
+          <el-table
+            header-class="header-cell"
+            v-else
+            ref="multipleTable"
+            :data="columns"
+            style="width: 100%"
+            @selection-change="handleSelectionChange"
+          >
+            <el-table-column type="selection" width="55" />
+            <el-table-column :label="t('data_set.field_name')">
+              <template #default="scope">{{ scope.row.title }}</template>
+            </el-table-column>
+
+            <el-table-column prop="deExtractType" :label="t('datasource.field_type')">
+              <template #default="scope">
+                <el-select
+                  v-model="scope.row.deExtractType"
+                  class="select-type"
+                  style="display: inline-block; width: 120px"
+                  @change="deExtractTypeChange(scope.row)"
+                >
+                  <template #prefix>
+                    <el-icon>
+                      <Icon :className="`field-icon-${fieldTypeLowercase[scope.row.deExtractType]}`"
+                        ><component
+                          class="svg-icon"
+                          :class="`field-icon-${fieldTypeLowercase[scope.row.deExtractType]}`"
+                          :is="iconFieldMap[fieldTypeLowercase[scope.row.deExtractType]]"
+                        ></component
+                      ></Icon>
+                    </el-icon>
+                  </template>
+                  <el-option
+                    v-for="item in fieldOptions"
+                    :key="item.value"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                    <span style="float: left">
+                      <el-icon>
+                        <Icon :className="`field-icon-${fieldTypeLowercase[item.value]}`"
+                          ><component
+                            class="svg-icon"
+                            :class="`field-icon-${fieldTypeLowercase[item.value]}`"
+                            :is="iconFieldMap[fieldTypeLowercase[item.value]]"
+                          ></component
+                        ></Icon>
+                      </el-icon>
+                    </span>
+                    <span style="float: left; font-size: 12px; color: #8492a6">{{
+                      item.label
+                    }}</span>
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+
+            <el-table-column :label="t('data_set.field_type')">
+              <template #default="scope">
+                <div class="flex-align-center">
+                  <el-icon>
+                    <Icon>
+                      <component
+                        :class="`svg-icon field-icon-${fieldType[scope.row.fieldType]}`"
+                        :is="iconFieldMap[fieldType[scope.row.fieldType]]"
+                      ></component>
+                    </Icon>
+                  </el-icon>
+
+                  {{ t(`dataset.${fieldType[scope.row.fieldType]}`) }}
+                </div>
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="length"
+              :label="t('datasource.length')"
+              v-if="form.editType === 0"
+            >
+              <template #default="scope">
+                <el-input-number
+                  :disabled="disabledFieldLength(scope.row)"
+                  v-model="scope.row.length"
+                  autocomplete="off"
+                  step-strictly
+                  class="text-left edit-all-line"
+                  :min="1"
+                  :max="512"
+                  :placeholder="t('common.inputText')"
+                  controls-position="right"
+                  type="number"
+                  @change="lengthChange(scope.row)"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column
+              prop="primaryKey"
+              class-name="checkbox-table"
+              :label="t('datasource.set_key')"
+              width="100"
+              v-if="form.editType === 0 && isSupportSetKey"
+            >
+              <template #default="scope">
+                <el-checkbox
+                  :key="scope.row.dataKey"
+                  v-model="scope.row.primaryKey"
+                  :disabled="!scope.row.checked"
+                  @change="primaryKeyChange(scope.row)"
+                >
+                </el-checkbox>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+      </template>
+      <el-form
+        ref="dsApiForm"
+        :model="form"
+        style="margin-top: 24px"
+        :rules="apiRule"
+        label-width="180px"
+        label-position="top"
+        require-asterisk-position="right"
+      >
+        <el-form-item
+          :label="t('datasource.update_type')"
+          prop="syncSetting.updateType"
+          v-if="activeStep === 2"
+        >
+          <el-radio-group v-model="form.syncSetting.updateType">
+            <el-radio label="add_scope"> {{ t('data_source.append_data') }}</el-radio>
+            <el-radio label="all_scope">{{ t('data_source.replace_data') }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <el-form-item
+          :label="t('datasource.sync_rate')"
+          prop="syncSetting.syncRate"
+          v-if="activeStep === 2"
+        >
+          <el-radio-group v-model="form.syncSetting.syncRate" @change="onRateChange">
+            <el-radio label="RIGHTNOW">{{ t('data_source.update_now') }}</el-radio>
+            <el-radio label="CRON">{{ t('datasource.cron_config') }}</el-radio>
+            <el-radio label="SIMPLE_CRON">{{ t('datasource.simple_cron') }}</el-radio>
+          </el-radio-group>
+        </el-form-item>
+        <div
+          v-if="activeStep === 2 && form.syncSetting.syncRate !== 'RIGHTNOW'"
+          class="execute-rate-cont"
+        >
+          <el-form-item
+            :label="t('auth.set_rules')"
+            v-if="form.syncSetting.syncRate === 'SIMPLE_CRON'"
+            prop="syncSetting.simpleCronValue"
+          >
+            <div class="simple-cron">
+              {{ t('common.every') }}
+              <el-input-number
+                v-model="form.syncSetting.simpleCronValue"
+                controls-position="right"
+                :min="1"
+                @change="onSimpleCronChange()"
+              />
+              <el-select
+                v-model="form.syncSetting.simpleCronType"
+                filterable
+                @change="onSimpleCronChange()"
+              >
+                <el-option :label="t('common.minute')" value="minute" />
+                <el-option :label="t('common.hour')" value="hour" />
+                <el-option :label="t('common.day')" value="day" />
+              </el-select>
+              {{ t('data_source.update_once') }}
+            </div>
+          </el-form-item>
+          <el-form-item v-if="form.syncSetting.syncRate === 'CRON'" prop="syncSetting.cron">
+            <el-popover :width="834" v-model="cronEdit" trigger="click">
+              <template #default>
+                <div style="width: 814px; height: 450px; overflow-y: auto">
+                  <cron
+                    v-if="showCron"
+                    v-model="form.syncSetting.cron"
+                    :is-rate="form.syncRate === 'CRON'"
+                    @close="cronEdit = false"
+                  />
+                </div>
+              </template>
+              <template #reference>
+                <el-input v-model="form.syncSetting.cron" @click="cronEdit = true" />
+              </template>
+            </el-popover>
+          </el-form-item>
+          <el-form-item
+            v-if="form.syncSetting.syncRate !== 'RIGHTNOW'"
+            :label="t('datasource.start_time')"
+            prop="syncSetting.startTime"
+          >
+            <el-date-picker
+              v-model="form.syncSetting.startTime"
+              class="de-date-picker"
+              :prefix-icon="icon_calendar_outlined"
+              type="datetime"
+              :placeholder="t('datasource.start_time')"
+            />
+          </el-form-item>
+          <el-form-item
+            v-if="form.syncSetting.syncRate !== 'RIGHTNOW'"
+            :label="t('datasource.end_time')"
+            prop="syncSetting.endLimit"
+          >
+            <div style="width: 100%">
+              <el-date-picker
+                v-model="form.syncSetting.endTime"
+                class="de-date-picker"
+                :prefix-icon="icon_calendar_outlined"
+                type="datetime"
+                :placeholder="t('datasource.end_time')"
+              />
+            </div>
+          </el-form-item>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.editor-detail {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  .ed-radio {
+    height: 22px;
+  }
+
+  .mb16 {
+    :deep(.ed-form-item) {
+      margin-bottom: 16px;
+    }
+  }
+
+  .execute-rate-cont {
+    border-radius: 4px;
+    margin-top: -8px;
+  }
+
+  .de-select {
+    width: 100%;
+  }
+  .ed-input-number {
+    width: 100%;
+  }
+
+  :deep(.is-controls-right > span) {
+    background: #fff;
+  }
+
+  .de-expand {
+    font-family: var(--de-custom_font, 'PingFang');
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
+    color: var(--ed-color-primary);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+
+    .ed-icon {
+      margin-left: 4px;
+    }
+  }
+
+  :deep(.ed-date-editor.ed-input) {
+    .ed-input__wrapper {
+      width: 100%;
+    }
+    width: 100%;
+  }
+  .simple-cron {
+    height: 32px;
+    .ed-select,
+    .ed-input-number {
+      width: 140px;
+      margin: 0 8px;
+    }
+  }
+  .detail-inner {
+    height: calc(100vh - 280px);
+    min-height: 700px;
+
+    .dropdown-icon {
+      .down-outlined {
+        transform: rotate(180deg);
+      }
+      &[aria-expanded='true'] {
+        .down-outlined {
+          transform: rotate(0);
+        }
+      }
+      cursor: pointer;
+    }
+
+    .error-status {
+      margin-top: 32px;
+    }
+
+    .upload-tip {
+      color: #8f959e;
+      font-family: var(--de-custom_font, 'PingFang');
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+
+    .title-form_primary {
+      margin: 16px 0;
+      margin-top: 32px;
+    }
+
+    .info-table {
+      width: 100%;
+      height: calc(100% - 200px);
+      &.info-table_height {
+        height: calc(100% - 379px);
+      }
+    }
+    width: 800px;
+    padding-top: 8px;
+
+    .description-text {
+      :deep(.ed-textarea__inner) {
+        height: 92px;
+      }
+    }
+
+    .base-info {
+      margin: 24px 0 16px 0;
+    }
+
+    .left-api_params {
+      border-top-left-radius: 4px;
+      border-bottom-left-radius: 4px;
+      border: 1px solid #bbbfc4;
+      width: 300px;
+      padding: 16px;
+      .name-copy {
+        display: none;
+        line-height: 24px;
+        margin-left: 4px;
+      }
+
+      .list-item_primary:hover {
+        .name-copy {
+          display: inline;
+        }
+
+        .label {
+          width: 74% !important;
+        }
+      }
+    }
+
+    .right-api_params {
+      border-top-right-radius: 4px;
+      border-bottom-right-radius: 4px;
+      border: 1px solid #bbbfc4;
+      border-left: none;
+      width: calc(100% - 200px);
+    }
+
+    .table-info-mr {
+      margin: 28px 0 12px 0;
+      .api-tabs {
+        :deep(.ed-tabs__nav-wrap::after) {
+          display: none;
+        }
+      }
+    }
+
+    .info-update {
+      height: 22px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      font-family: var(--de-custom_font, 'PingFang');
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+      justify-content: center;
+
+      .update-info-line {
+        width: 208px;
+        height: 1px;
+        background: #bcbdbf;
+        margin: 0 8px;
+      }
+
+      .info-text,
+      .update-text {
+        padding-left: 16px;
+        position: relative;
+        color: #1f2329;
+        font-weight: 400;
+        font-family: var(--de-custom_font, 'PingFang');
+        font-size: 14px;
+        font-style: normal;
+        line-height: 22px;
+        &::before {
+          width: 8px;
+          height: 8px;
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          border: 1px solid var(--ed-color-primary);
+          border-radius: 50%;
+        }
+
+        &.active {
+          font-weight: 500;
+        }
+
+        &.active::before {
+          border: none;
+          background: var(--ed-color-primary);
+        }
+      }
+    }
+
+    .detail-operate {
+      text-align: right;
+      padding: 8px 0;
+    }
+
+    .flex-space {
+      display: flex;
+      align-items: center;
+    }
+  }
+  .table-select_mode {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background: #f5f6f7;
+    padding: 16px;
+    .btn-select {
+      min-width: 164px;
+      padding: 0 6px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: #ffffff;
+      border: 1px solid #bbbfc4;
+      border-radius: 4px;
+
+      .is-active {
+        background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
+      }
+
+      .ed-button:not(.is-active) {
+        color: #1f2329;
+      }
+      .ed-button.is-text {
+        height: 24px;
+        min-width: 74px;
+        line-height: 24px;
+      }
+      .ed-button + .ed-button {
+        margin-left: 4px;
+      }
+    }
+  }
+  .detail-operate {
+    height: 56px;
+    padding: 16px 24px;
+    font-size: 16px;
+    font-weight: 500;
+    width: 100%;
+    border-bottom: 1px solid rgba(31, 35, 41, 0.15);
+  }
+}
+
+.api-card-content {
+  display: flex;
+  flex-wrap: wrap;
+  margin-left: -16px;
+}
+.api-card {
+  height: 120px;
+  width: 392px;
+  border-radius: 4px;
+  border: 1px solid var(--deCardStrokeColor, #dee0e3);
+  border-radius: 4px;
+  margin: 0 0 16px 16px;
+  padding: 16px;
+  font-family: var(--de-custom_font, 'PingFang');
+  cursor: pointer;
+
+  &:hover {
+    border-color: var(--ed-color-primary);
+  }
+  .name {
+    font-size: 16px;
+    font-weight: 500;
+    margin-right: 8px;
+    max-width: 70%;
+  }
+  .req-title,
+  .req-value {
+    display: flex;
+    font-size: 14px;
+    font-weight: 400;
+    :nth-child(1) {
+      width: 120px;
+    }
+    :nth-child(2) {
+      margin-left: 24px;
+      max-width: 230px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+  .req-title {
+    color: var(--deTextSecondary, #646a73);
+    margin: 16px 0 4px 0;
+  }
+  .req-value {
+    color: var(--deTextPrimary, #1f2329);
+  }
+  .de-copy-icon {
+    margin-right: 16px;
+    color: var(--deTextSecondary, #646a73);
+  }
+  .de-delete-icon {
+    cursor: pointer;
+  }
+  .de-tag {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 2px;
+    padding: 1px 6px;
+    height: 24px;
+    font-size: 14px;
+
+    &.invalid {
+      color: #646a73;
+      background: rgba(31, 35, 41, 0.1);
+    }
+
+    &.valid {
+      color: green;
+      background: rgba(52, 199, 36, 0.2);
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.api-table-delete {
+  padding: 20px 24px !important;
+  display: flex;
+  flex-wrap: wrap;
+  .small {
+    height: 28px;
+    min-width: 48px !important;
+  }
+
+  .icon-warning {
+    transform: translateY(3px);
+  }
+
+  .tips {
+    font-family: var(--de-custom_font, 'PingFang');
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 22px;
+    margin-left: 8.67px;
+    color: var(--deTextPrimary, #1f2329);
+  }
+  i {
+    font-size: 14.666666030883789px;
+    color: var(--deWarning, #ff8800);
+    line-height: 22px;
+  }
+  .foot {
+    text-align: right;
+    width: 100%;
+    margin-top: 16px;
+  }
+}
+
+.schema-label {
+  .ed-form-item__label {
+    display: flex !important;
+    justify-content: space-between;
+    padding-right: 0;
+    &::after {
+      display: none;
+    }
+    .name {
+      .required::after {
+        content: '*';
+        color: #f54a45;
+        margin-left: 2px;
+      }
+    }
+  }
+}
+</style>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/index.vue b/core/core-frontend/src/views/visualized/data/datasource/form/index.vue
index 0e5249e..036f8fc 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/index.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/index.vue
@@ -9,7 +9,15 @@ import DsTypeList from './DsTypeList.vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import EditorDetail from './EditorDetail.vue'
 import ExcelDetail from './ExcelDetail.vue'
-import { save, update, validate, latestUse, isShowFinishPage, checkRepeat } from '@/api/datasource'
+import {
+  save,
+  update,
+  validate,
+  latestUse,
+  isShowFinishPage,
+  checkRepeat,
+  loadRemoteFile
+} from '@/api/datasource'
 import { Base64 } from 'js-base64'
 import type { Param } from './ExcelDetail.vue'
 import type { Configuration, ApiConfiguration, SyncSetting } from './option'
@@ -23,6 +31,7 @@ import { useCache } from '@/hooks/web/useCache'
 import Icon from '@/components/icon-custom/src/Icon.vue'
 import { XpackComponent, PluginComponent } from '@/components/plugin'
 import { iconDatasourceMap } from '@/components/icon-group/datasource-list'
+import ExcelRemoteDetail from '@/views/visualized/data/datasource/form/ExcelRemoteDetail.vue'
 
 interface Node {
   name: string
@@ -73,6 +82,7 @@ const activeStep = ref(0)
 const detail = ref()
 const xpack = ref()
 const excel = ref()
+const excelRemote = ref()
 const latestUseTypes = ref([])
 const currentType = ref<DsType>('OLTP')
 const filterText = ref('')
@@ -85,20 +95,13 @@ const selectDsType = (type: string) => {
   currentDsType.value = type
   activeStep.value = 1
   activeApiStep.value = 1
-  currentTypeList.value
-    .map(ele => ele.dbList)
-    .flat()
-    .some(ele => {
-      if (ele.type === currentDsType.value) {
-        isPlugin.value = ele['isPlugin']
-      }
-    })
   nextTick(() => {
     detail?.value?.initForm(type, pluginDs.value, pluginIndex.value, isPlugin.value) ||
       xpack?.value?.invokeMethod({
         methodName: 'initForm',
         args: type
       })
+    excelRemote?.value?.initForm(type)
     if (!dsTree.value) return
     currentTypeList.value
       .map(ele => ele.dbList)
@@ -204,7 +207,11 @@ const activeApiStep = ref(0)
 
 const setNextStep = () => {
   activeApiStep.value = activeStep.value + 1
-  if (currentDsType.value.includes('API') && activeStep.value === 1) return
+  if (
+    (currentDsType.value.includes('API') || currentDsType.value === 'ExcelRemote') &&
+    activeStep.value === 1
+  )
+    return
   activeStep.value = activeStep.value + 1
 }
 
@@ -223,6 +230,14 @@ const next = () => {
     return
   }
 
+  if (currentDsType.value.includes('ExcelRemote') && activeStep.value !== 2) {
+    const validate = excelRemote.value.validateExcel()
+    if (validate) {
+      setNextStep()
+    }
+    return
+  }
+
   if (currentDsType.value.includes('API') && activeStep.value !== 2) {
     const validateFrom = detail.value.submitForm()
     validateFrom(val => {
@@ -237,7 +252,15 @@ const next = () => {
 }
 
 const complete = (params, successCb, finallyCb) => {
-  excel.value.saveExcelDs(
+  excel?.value?.saveExcelDs(
+    params,
+    () => {
+      pid.value = params.pid
+      successCb()
+    },
+    finallyCb
+  )
+  excelRemote?.value?.saveExcelDs(
     params,
     () => {
       pid.value = params.pid
@@ -292,25 +315,14 @@ const handleShowFinishPage = ({ id, name, pid }) => {
 emitter.on('showFinishPage', handleShowFinishPage)
 
 const prev = () => {
-  if (
-    (currentDsType.value.includes('API') && activeApiStep.value === 1) ||
-    activeStep.value === 1
-  ) {
-    ElMessageBox.confirm(t('data_source.the_previous_step'), {
-      confirmButtonType: 'primary',
-      type: 'warning',
-      autofocus: false,
-      showClose: false
-    }).then(() => {
-      prevConfirm()
-    })
-  } else {
-    prevConfirm()
-  }
+  prevConfirm()
 }
 
 const prevConfirm = () => {
-  if (currentDsType.value.includes('API') && activeApiStep.value === 2) {
+  if (
+    (currentDsType.value.includes('API') || currentDsType.value === 'ExcelRemote') &&
+    activeApiStep.value === 2
+  ) {
     activeApiStep.value = 1
     activeStep.value = 1
     return
@@ -369,7 +381,10 @@ const validateDS = () => {
       args: [{ eventName: 'validateDs', args: request }]
     })
   } else {
-    const validateFrom = detail?.value?.submitForm()
+    let validateFrom = detail?.value?.submitForm()
+    if (excelRemote?.value?.submitForm()) {
+      validateFrom = excelRemote?.value?.submitForm()
+    }
     validateFrom(val => {
       if (val) {
         doValidateDs(request)
@@ -380,9 +395,34 @@ const validateDS = () => {
 
 const doValidateDs = request => {
   dsLoading.value = true
+  if (currentDsType.value === 'ExcelRemote') {
+    let excelRequest = JSON.parse(JSON.stringify(form2.configuration))
+    excelRequest.datasourceId = form2.id || 0
+    excelRequest.editType = form2.editType
+    excelRequest.userName = Base64.encode(excelRequest.userName)
+    excelRequest.passwd = Base64.encode(excelRequest.passwd)
+    return loadRemoteFile(excelRequest)
+      .then(res => {
+        dsLoading.value = false
+        if (!res) {
+          ElMessage.warning(res.msg)
+          return
+        }
+        if (res?.code !== 0) {
+          ElMessage.warning(res.msg)
+          return
+        }
+        ElMessage.success(t('datasource.validate_success'))
+        dsLoading.value = false
+      })
+      .catch(() => {
+        ElMessage.error(t('data_source.verification_failed'))
+        dsLoading.value = false
+      })
+  }
   validate(request)
     .then(res => {
-      if (res.data.type === 'API') {
+      if (res.data.type.includes('API')) {
         let error = 0
         const status = JSON.parse(res.data.status) as Array<{ status: string; name: string }>
         for (let i = 0; i < status.length; i++) {
@@ -435,13 +475,13 @@ const saveDS = () => {
     configuration: string
     apiConfiguration: string
   }
+
   if (currentDsType.value === 'Excel') {
     excel.value.uploadStatus(false)
     if (!excel.value.sheetFile?.name) {
       excel.value.uploadStatus(true)
       return
     }
-
     const validate = excel.value.submitForm()
     validate(val => {
       if (val) {
@@ -452,7 +492,25 @@ const saveDS = () => {
         }
       }
     })
+    return
+  }
 
+  if (currentDsType.value === 'ExcelRemote') {
+    const validate = excelRemote.value.submitForm()
+    validate(val => {
+      if (val) {
+        const validateApi = excelRemote?.value?.submitSyncSettingForm()
+        validateApi(v => {
+          if (v) {
+            if (editDs.value && form2.id) {
+              complete(null, null, null)
+            } else {
+              creatDsFolder.value.createInit('datasource', { id: pid.value }, '', form2.name)
+            }
+          }
+        })
+      }
+    })
     return
   } else if (currentDsType.value.includes('API')) {
     for (let i = 0; i < request.apiConfiguration.length; i++) {
@@ -486,7 +544,7 @@ const saveDS = () => {
   if (isPlugin.value && !currentDsType.value.includes('API')) {
     xpack?.value?.invokeMethod({
       methodName: 'submitForm',
-      args: [{ eventName: 'save Ds', args: request }]
+      args: [{ eventName: 'saveDs', args: request }]
     })
   } else {
     const validate = detail?.value?.submitForm()
@@ -569,16 +627,18 @@ const defaultForm = {
   paramsConfiguration: [],
   enableDataFill: false
 }
-const form = reactive<Form>(cloneDeep(defaultForm))
-const origin = reactive<Form>(cloneDeep(defaultForm))
 const defaultForm2 = {
   type: '',
   id: '0',
   editType: 0,
   name: '',
-  creator: ''
+  creator: '',
+  configuration: {}
 }
+const origin = reactive<Form>(cloneDeep(defaultForm))
+const form = reactive<Form>(cloneDeep(defaultForm))
 const form2 = reactive<Param>(cloneDeep(defaultForm2))
+
 const visible = ref(false)
 const editDs = ref(false)
 const pid = ref('0')
@@ -611,7 +671,7 @@ const init = (nodeInfo: Form | Param, id?: string, res?: object, supportSetKey:
   showFinishPage.value = false
 
   if (!!nodeInfo) {
-    if (nodeInfo.type == 'Excel') {
+    if (nodeInfo.type.startsWith('Excel')) {
       Object.assign(form2, cloneDeep(nodeInfo))
     } else {
       Object.assign(form, cloneDeep(nodeInfo))
@@ -649,6 +709,7 @@ const init = (nodeInfo: Form | Param, id?: string, res?: object, supportSetKey:
       }
       nextTick(() => {
         detail?.value?.clearForm()
+        excelRemote?.value?.clearForm()
         xpack?.value?.invokeMethod({
           methodName: 'clearForm',
           args: []
@@ -663,6 +724,13 @@ const drawTitle = computed(() => {
   if (creator && id && currentDsType.value == 'Excel') {
     return editType === 1 ? t('data_source.append_data') : t('data_source.replace_data')
   }
+  if (currentDsType.value == 'ExcelRemote') {
+    return editDs.value
+      ? !form2.id
+        ? t('data_source.copy_data_source')
+        : t('datasource.modify')
+      : t('data_source.create_data_source')
+  }
   return editDs.value
     ? !form.id
       ? t('data_source.copy_data_source')
@@ -713,26 +781,16 @@ defineExpose({
   >
     <template #header="{ close }">
       <span>{{ drawTitle }}</span>
-      <div v-if="!editDs" class="editor-step flex-center">
-        <el-steps space="150px" :active="activeStep" align-center>
+      <div v-if="!editDs" class="flex-center" style="width: 100%">
+        <el-steps custom style="max-width: 500px; flex: 1" :active="activeStep" align-center>
           <el-step>
-            <template #icon>
-              <div class="step-icon">
-                <span class="icon">
-                  {{ activeStep <= 0 ? '1' : '' }}
-                </span>
-                <span class="title">{{ t('deDataset.select_data_source') }}</span>
-              </div>
+            <template #title>
+              {{ t('deDataset.select_data_source') }}
             </template>
           </el-step>
           <el-step>
-            <template #icon>
-              <div class="step-icon">
-                <span class="icon">
-                  {{ activeStep <= 1 ? '2' : '' }}
-                </span>
-                <span class="title">{{ t('data_source.configuration_information') }}</span>
-              </div>
+            <template #title>
+              {{ t('data_source.configuration_information') }}
             </template>
           </el-step>
         </el-steps>
@@ -833,7 +891,7 @@ defineExpose({
             v-if="
               activeStep !== 0 &&
               currentDsType &&
-              currentDsType !== 'Excel' &&
+              !currentDsType.startsWith('Excel') &&
               visible &&
               (!isPlugin || currentDsType.startsWith('API'))
             "
@@ -863,6 +921,15 @@ defineExpose({
               :param="form2"
             ></excel-detail>
           </template>
+          <template v-if="activeStep !== 0 && currentDsType == 'ExcelRemote'">
+            <excel-remote-detail
+              :editDs="editDs"
+              :is-supportSetKey="isSupportSetKey"
+              ref="excelRemote"
+              :active-step="activeApiStep"
+              :form="form2"
+            ></excel-remote-detail>
+          </template>
         </div>
       </div>
       <div class="editor-footer">
@@ -883,8 +950,11 @@ defineExpose({
         >
         <el-button
           v-show="
-            (activeStep === 0 && !currentDsType.startsWith('API')) ||
-            (activeApiStep !== 2 && currentDsType.startsWith('API'))
+            (activeStep === 0 &&
+              !currentDsType.startsWith('API') &&
+              currentDsType !== 'ExcelRemote') ||
+            (activeApiStep !== 2 &&
+              (currentDsType.startsWith('API') || currentDsType === 'ExcelRemote'))
           "
           type="primary"
           @click="next"
@@ -893,8 +963,11 @@ defineExpose({
         >
         <el-button
           v-show="
-            (activeStep === 1 && !currentDsType.startsWith('API')) ||
-            (activeApiStep === 2 && currentDsType.startsWith('API'))
+            (activeStep === 1 &&
+              !currentDsType.startsWith('API') &&
+              currentDsType !== 'ExcelRemote') ||
+            (activeApiStep === 2 &&
+              (currentDsType.startsWith('API') || currentDsType === 'ExcelRemote'))
           "
           type="primary"
           @click="saveDS"
@@ -1122,6 +1195,9 @@ defineExpose({
       padding-right: 24px;
       float: left;
       border-top: 1px solid rgba(31, 35, 41, 0.15);
+      position: relative;
+      z-index: 10;
+      background: #fff;
     }
   }
 }
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/option.ts b/core/core-frontend/src/views/visualized/data/datasource/form/option.ts
index 19e9afe..2e9a9b9 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/option.ts
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/option.ts
@@ -111,7 +111,13 @@ export const dsTypes = [
   },
   {
     type: 'Excel',
-    name: 'Excel',
+    name: t('common.local_excel'),
+    catalog: 'LOCAL',
+    extraParams: ''
+  },
+  {
+    type: 'ExcelRemote',
+    name: t('common.remote_excel'),
     catalog: 'LOCAL',
     extraParams: ''
   }
diff --git a/core/core-frontend/src/views/visualized/data/datasource/index.vue b/core/core-frontend/src/views/visualized/data/datasource/index.vue
index 4fc5758..cea4067 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/index.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/index.vue
@@ -49,7 +49,8 @@ import {
   uploadFile,
   perDeleteDatasource,
   getSimpleDs,
-  supportSetKey
+  supportSetKey,
+  getTableStatus
 } from '@/api/datasource'
 import CreatDsGroup from './form/CreatDsGroup.vue'
 import type { Tree } from '../dataset/form/CreatDsGroup.vue'
@@ -74,7 +75,7 @@ import {
 } from '@/api/datasource'
 import type { SyncSetting, Node } from './form/option'
 import EditorDatasource from './form/index.vue'
-import ExcelInfo from './ExcelInfo.vue'
+import ExcelInfoBase from './ExcelInfoBase.vue'
 import SheetTabs from './SheetTabs.vue'
 import BaseInfoItem from './BaseInfoItem.vue'
 import BaseInfoContent from './BaseInfoContent.vue'
@@ -204,7 +205,7 @@ const selectDataset = row => {
   Object.assign(dsTableDetail, row)
   userDrawer.value = true
   dsTableDataLoading.value = true
-  getTableField({ tableName: row.tableName, datasourceId: nodeInfo.id })
+  getTableField({ tableName: row.tableName, datasourceId: nodeInfo.id, isCross: false })
     .then(res => {
       state.dsTableData = res.data
     })
@@ -707,7 +708,7 @@ const filterNode = (value: string, data: BusiTreeNode) => {
 }
 
 const editDatasource = (editType?: number) => {
-  if (nodeInfo.type === 'Excel') {
+  if (nodeInfo.type.startsWith('Excel')) {
     nodeInfo.editType = editType
   }
   return getById(nodeInfo.id).then(res => {
@@ -940,7 +941,7 @@ const handleClick = (tabName: TabPaneName) => {
   switch (tabName) {
     case 'config':
       tableData.value = []
-      if (nodeInfo.type === 'Excel') {
+      if (nodeInfo.type.startsWith('Excel')) {
         listDatasourceTables({ datasourceId: nodeInfo.id }).then(res => {
           tabList.value = res.data.map(ele => {
             const { name, tableName } = ele
@@ -962,6 +963,26 @@ const handleClick = (tabName: TabPaneName) => {
       listDatasourceTables({ datasourceId: nodeInfo.id }).then(res => {
         tableData.value = res.data
         initSearch()
+        if (nodeInfo.type.startsWith('API') || nodeInfo.type === 'ExcelRemote') {
+          getTableStatus({ datasourceId: nodeInfo.id }).then(res => {
+            for (let i = 0; i < state.filterTable.length; i++) {
+              for (let j = 0; j < res.data.length; j++) {
+                if (state.filterTable[i].tableName === res.data[j].tableName) {
+                  state.filterTable[i].lastUpdateTime = res.data[j].lastUpdateTime
+                  state.filterTable[i].status = res.data[j].status
+                }
+              }
+            }
+            for (let i = 0; i < tableData.value.length; i++) {
+              for (let j = 0; j < res.data.length; j++) {
+                if (tableData.value[i].tableName === res.data[j].tableName) {
+                  tableData.value[i].lastUpdateTime = res.data[j].lastUpdateTime
+                  tableData.value[i].status = res.data[j].status
+                }
+              }
+            }
+          })
+        }
       })
       break
     default:
@@ -1030,7 +1051,7 @@ onMounted(() => {
   loadInit()
   listDs()
   setSupportSetKey()
-  const { opt } = router.currentRoute.value.query
+  const { opt } = router?.currentRoute?.value?.query || {}
   if (opt && opt === 'create') {
     datasourceEditor.value.init(null, null, null, isSupportSetKey.value)
   }
@@ -1469,7 +1490,7 @@ const getMenuList = (val: boolean) => {
             <template v-if="slotProps.active">
               <el-row :gutter="24">
                 <el-col :span="12">
-                  <BaseInfoItem :label="t('auth.datasource') + ' ' + t('common.name')">{{
+                  <BaseInfoItem :label="t('data_source.data_source_name')">{{
                     nodeInfo.name
                   }}</BaseInfoItem>
                 </el-col>
@@ -1482,10 +1503,20 @@ const getMenuList = (val: boolean) => {
               <el-row :gutter="24">
                 <el-col v-if="nodeInfo.type === 'Excel'" :span="12">
                   <BaseInfoItem :label="t('data_source.document')">
-                    <ExcelInfo :name="nodeInfo.fileName" :size="nodeInfo.size"></ExcelInfo>
+                    <ExcelInfoBase :name="nodeInfo.fileName" :size="nodeInfo.size"></ExcelInfoBase>
                   </BaseInfoItem>
                 </el-col>
-                <el-col v-else :span="24">
+                <el-col v-if="nodeInfo.type === 'ExcelRemote'" :span="12">
+                  <BaseInfoItem :label="t('datasource.remote_excel_url')">
+                    {{ nodeInfo.configuration.url }}
+                  </BaseInfoItem>
+                </el-col>
+                <el-col v-if="nodeInfo.type === 'ExcelRemote'" :span="12">
+                  <BaseInfoItem :label="t('data_source.document')">
+                    <ExcelInfoBase :name="nodeInfo.fileName" :size="nodeInfo.size"></ExcelInfoBase>
+                  </BaseInfoItem>
+                </el-col>
+                <el-col v-if="!nodeInfo.type.startsWith('Excel')" :span="24">
                   <BaseInfoItem :label="t('common.description')">{{
                     nodeInfo.description
                   }}</BaseInfoItem>
@@ -1495,6 +1526,7 @@ const getMenuList = (val: boolean) => {
                 v-if="
                   !['Excel', 'es'].includes(nodeInfo.type) &&
                   !nodeInfo.type.startsWith('API') &&
+                  !nodeInfo.type.startsWith('Excel') &&
                   nodeInfo.weight >= 7
                 "
               >
@@ -1698,7 +1730,47 @@ const getMenuList = (val: boolean) => {
             </el-button>
           </BaseInfoContent>
           <BaseInfoContent
-            v-if="nodeInfo.type.startsWith('API') && nodeInfo.weight >= 7"
+            v-if="nodeInfo.type.startsWith('Excel')"
+            v-slot="slotProps"
+            :name="t('dataset.data_preview')"
+            :time="nodeInfo.lastSyncTime"
+            :showTime="nodeInfo.type === 'ExcelRemote'"
+          >
+            <template v-if="slotProps.active">
+              <div class="excel-table">
+                <SheetTabs
+                  :active-tab="activeTab"
+                  @tab-click="handleTabClick"
+                  :tab-list="tabList"
+                ></SheetTabs>
+                <div class="sheet-table-content">
+                  <el-auto-resizer>
+                    <template #default="{ height, width }">
+                      <el-table-v2
+                        :columns="columns"
+                        v-loading="dataPreviewLoading"
+                        header-class="excel-header-cell"
+                        :data="tabData"
+                        :width="width"
+                        :height="height"
+                        fixed
+                        ><template #empty>
+                          <empty-background
+                            :description="t('data_set.no_data')"
+                            img-type="noneWhite"
+                          /> </template
+                      ></el-table-v2>
+                    </template>
+                  </el-auto-resizer>
+                </div>
+              </div>
+            </template>
+          </BaseInfoContent>
+          <BaseInfoContent
+            v-if="
+              (nodeInfo.type.startsWith('API') || nodeInfo.type === 'ExcelRemote') &&
+              nodeInfo.weight >= 7
+            "
             v-slot="slotProps"
             :name="t('dataset.update_setting')"
             :time="(nodeInfo.lastSyncTime as string)"
@@ -1732,41 +1804,6 @@ const getMenuList = (val: boolean) => {
               {{ t('dataset.update_records') }}
             </el-button>
           </BaseInfoContent>
-          <BaseInfoContent
-            v-if="nodeInfo.type === 'Excel'"
-            v-slot="slotProps"
-            :name="t('dataset.data_preview')"
-          >
-            <template v-if="slotProps.active">
-              <div class="excel-table">
-                <SheetTabs
-                  :active-tab="activeTab"
-                  @tab-click="handleTabClick"
-                  :tab-list="tabList"
-                ></SheetTabs>
-                <div class="sheet-table-content">
-                  <el-auto-resizer>
-                    <template #default="{ height, width }">
-                      <el-table-v2
-                        :columns="columns"
-                        v-loading="dataPreviewLoading"
-                        header-class="excel-header-cell"
-                        :data="tabData"
-                        :width="width"
-                        :height="height"
-                        fixed
-                        ><template #empty>
-                          <empty-background
-                            :description="t('data_set.no_data')"
-                            img-type="noneWhite"
-                          /> </template
-                      ></el-table-v2>
-                    </template>
-                  </el-auto-resizer>
-                </div>
-              </div>
-            </template>
-          </BaseInfoContent>
         </template>
       </template>
       <template v-else-if="mounted">
@@ -2352,5 +2389,4 @@ const getMenuList = (val: boolean) => {
     color: var(--deTextPrimary, #1f2329);
   }
 }
-
 </style>