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

---
 .../service/datasource/BaseInfoContent.vue    |   26 +-
 .../service/datasource/BaseInfoItem.vue       |    6 +-
 .../service/datasource/ExcelInfo.vue          |    2 +-
 .../service/datasource/ExcelInfoBase.vue      |   54 +
 .../datasource/form/ApiHttpRequestDraw.vue    |   68 +-
 .../datasource/form/ApiHttpRequestForm.vue    |    8 -
 .../service/datasource/form/ApiKeyValue.vue   |   84 +-
 .../service/datasource/form/ApiVariable.vue   |    3 -
 .../service/datasource/form/CreatDsGroup.vue  |    6 +-
 .../service/datasource/form/EditorDetail.vue  |  142 +-
 .../service/datasource/form/ExcelDetail.vue   |  197 ++-
 .../datasource/form/ExcelRemoteDetail.vue     | 1452 +++++++++++++++++
 .../service/datasource/form/Pagination.vue    |   10 +-
 .../service/datasource/form/index.vue         |  200 ++-
 .../service/datasource/form/option.ts         |    8 +-
 .../application/service/datasource/index.vue  |  210 ++-
 16 files changed, 2051 insertions(+), 425 deletions(-)
 create mode 100644 core/core-frontend/src/viewsnew/application/service/datasource/ExcelInfoBase.vue
 create mode 100644 core/core-frontend/src/viewsnew/application/service/datasource/form/ExcelRemoteDetail.vue

diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/BaseInfoContent.vue b/core/core-frontend/src/viewsnew/application/service/datasource/BaseInfoContent.vue
index ec3d448..bf84201 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/BaseInfoContent.vue
+++ b/core/core-frontend/src/viewsnew/application/service/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
 })
@@ -13,13 +18,15 @@ defineExpose({
 
 <template>
   <div :class="[active ? 'active' : 'deactivate', 'base-info-content']">
-    <div class="title" @click="active = !active">
-      <!-- <el-icon style="font-size: 10px">
+    <p class="title" @click="active = !active">
+      <el-icon style="font-size: 10px">
         <Icon name="icon_expand-right_filled"><icon_expandRight_filled class="svg-icon" /></Icon>
-      </el-icon> -->
-      <div class="icon-title"></div>
+      </el-icon>
       <span class="name">{{ name }}</span>
-    </div>
+      <span v-show="showTime" class="time">
+        {{ t('data_source.data_time') }}{{ timestampFormatDate(time) }}</span
+      >
+    </p>
     <slot :active="active"></slot>
   </div>
 </template>
@@ -61,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/viewsnew/application/service/datasource/BaseInfoItem.vue b/core/core-frontend/src/viewsnew/application/service/datasource/BaseInfoItem.vue
index d013785..cca145e 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/BaseInfoItem.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/BaseInfoItem.vue
@@ -7,10 +7,10 @@ defineProps({
 
 <template>
   <div class="base-info-item">
-    <div class="label">{{ label }}</div>
-    <div class="value">
+    <p class="label">{{ label }}</p>
+    <p class="value ellipsis">
       <slot></slot>
-    </div>
+    </p>
   </div>
 </template>
 
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/ExcelInfo.vue b/core/core-frontend/src/viewsnew/application/service/datasource/ExcelInfo.vue
index ad2bdb6..4984a01 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/ExcelInfo.vue
+++ b/core/core-frontend/src/viewsnew/application/service/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
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/ExcelInfoBase.vue b/core/core-frontend/src/viewsnew/application/service/datasource/ExcelInfoBase.vue
new file mode 100644
index 0000000..ecfc020
--- /dev/null
+++ b/core/core-frontend/src/viewsnew/application/service/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/viewsnew/application/service/datasource/form/ApiHttpRequestDraw.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiHttpRequestDraw.vue
index 0110386..391b99f 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiHttpRequestDraw.vue
+++ b/core/core-frontend/src/viewsnew/application/service/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,10 +1011,11 @@ 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 {
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiHttpRequestForm.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiHttpRequestForm.vue
index 31772d8..b72232d 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiHttpRequestForm.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiHttpRequestForm.vue
@@ -246,12 +246,4 @@ const emits = defineEmits(['changeId'])
     margin-right: 45px;
   }
 }
-:deep(.ed-tabs__nav-wrap::after){
-  background: #5f5f5f !important;
-}
-</style>
-<style>
-.ed-drawer__close-btn:hover{
-  background: #5f5f5f;
-}
 </style>
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiKeyValue.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiKeyValue.vue
index 2643928..464672e 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiKeyValue.vue
+++ b/core/core-frontend/src/viewsnew/application/service/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'
@@ -285,86 +285,4 @@ const timeFunLists = [
     margin-bottom: 0 !important;
   }
 }
-:deep(.ed-input .ed-input__count .ed-input__count-inner){
-  background: transparent;
-}
-
-:deep(.ed-select__popper.ed-popper) {
-  background: rgb(61, 61, 61) !important;
-  border: 1px solid var(--ed-border-color-light);
-  box-shadow: var(--ed-box-shadow-light);
-}
-</style>
-<style>
-.ed-select__popper.ed-popper{
-  background: rgb(41, 41, 41) !important;
-  border: 1px solid #5f5f5f;
-  color: #fff;
-  box-shadow: var(--ed-box-shadow-light);
-}
-.ed-select-dropdown__item{
-  color: #fff;
-}
-.ed-dropdown-menu__item{
-  color: #fff;
-}
-.ed-select-dropdown__item.hover, .ed-select-dropdown__item:hover{
-  background: rgb(61, 61, 61);
-}
-.ed-input-group__append, .ed-input-group__prepend{
-  background-color:rgba(37, 38, 38, 1);
-}
-.ed-input-group__append{
-  box-shadow: 0 0 0 1px #636363;
-}
-.ed-input-group__append .ed-button{
-  background-color: rgba(37, 38, 38, 1) !important;
-  border: 1px solid rgba(37, 38, 38, 1) !important;
-}
-.api-datasource-drawer .input-with-select .ed-input-group__append{
-  background-color: rgba(37, 38, 38, 1) !important;
-}
-.api-datasource-drawer .table-container{
-  border: 1px solid #5f5f5f !important; 
-}
-.ed-autocomplete__popper.ed-popper{
-  background: rgb(41, 41, 41);
-  border: 1px solid #5f5f5f;
-  box-shadow: none;
-}
-.ed-autocomplete-suggestion li{
-  color: #fff;
-}
-.ed-scrollbar__thumb{
-  background-color: rgba(30,30,30, 1) !important;
-}
-.ed-autocomplete-suggestion li:hover{
-  background: rgb(61, 61, 61);
-}
-.ed-popper.is-light .ed-popper__arrow::before {
-  border: 1px solid #5f5f5f;
-  background: rgb(41, 41, 41);
-  right: 0;
-}
-.ace-chrome .ace_gutter-active-line {
-  background-color: #595959;
-}
-.ace-chrome .ace_gutter {
-  background: #717171;
-  color: #fff;
-  overflow: hidden;
-}
-.ace-chrome {
-  background-color: #2e2e2e;
-  color: #fff;
-}
-.ace-chrome .ace_marker-layer .ace_active-line {
-  background: #717171;
-}
-.api-body-code {
-  border: 1px solid #5f5f5f !important;
-}
-.el-loading-mask{
-  background-color: rgba(33,33,33, 0.9) !important;
-}
 </style>
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiVariable.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiVariable.vue
index bf1ecb3..60c15e2 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiVariable.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/form/ApiVariable.vue
@@ -342,7 +342,4 @@ const timeFunLists = [
     font-size: 13px;
   }
 }
-:deep(.ed-input .ed-input__count .ed-input__count-inner){
-  background: transparent;
-}
 </style>
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/form/CreatDsGroup.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/CreatDsGroup.vue
index 51cb22a..5cb66da 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/CreatDsGroup.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/form/CreatDsGroup.vue
@@ -298,7 +298,7 @@ const saveDataset = () => {
         request.appId = appId.value
         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) {
@@ -371,7 +371,7 @@ const emits = defineEmits(['finish', 'handleShowFinishPage'])
       <el-form-item v-if="showName" :label="labelName" prop="name">
         <el-input :placeholder="placeholder" v-model="datasetForm.name" />
       </el-form-item>
-      <!-- <el-form-item v-if="showPid" :label="t('deDataset.folder')" prop="pid">
+      <el-form-item v-if="showPid" :label="t('deDataset.folder')" prop="pid">
         <el-tree-select
           v-model="datasetForm.pid"
           :data="state.tData"
@@ -427,7 +427,7 @@ const emits = defineEmits(['finish', 'handleShowFinishPage'])
             <span>{{ t('data_source.relevant_content_found') }}</span>
           </div>
         </div>
-      </div> -->
+      </div>
     </el-form>
     <template #footer>
       <el-button secondary @click="resetForm">{{ t('dataset.cancel') }} </el-button>
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/form/EditorDetail.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/EditorDetail.vue
index 57c6e40..4164dc5 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/EditorDetail.vue
+++ b/core/core-frontend/src/viewsnew/application/service/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 #5f5f5f;
       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/viewsnew/application/service/datasource/form/ExcelDetail.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/ExcelDetail.vue
index a4485fa..cd5d783 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/ExcelDetail.vue
+++ b/core/core-frontend/src/viewsnew/application/service/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'
@@ -41,6 +41,7 @@ export interface Param {
   creator?: string
   isPlugin?: boolean
   staticMap?: any
+  configuration?: {}
 }
 
 export interface Field {
@@ -49,6 +50,10 @@ export interface Field {
   fieldSize: number
   fieldType: string
   name: string
+  deExtractType: number
+  checked: boolean
+  primaryKey: boolean
+  length: number
 }
 const props = defineProps({
   param: {
@@ -121,10 +126,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,
@@ -324,77 +336,28 @@ const saveExcelData = (sheetFileMd5, table, params, successCb, finallyCb) => {
   }
   table.configuration = Base64.encode(JSON.stringify(table.sheets))
   let method = save
-  debugger
   if (!table.id || table.id === '0') {
     delete table.id
     table.pid = params.pid
   } 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'
-
-        table.appId = appId.value
-        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
+  table.appId = appId.value
+  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 => {
@@ -463,8 +426,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 => {
@@ -484,6 +456,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
@@ -525,7 +506,7 @@ const disabledFieldLength = item => {
   if (!item.checked) {
     return true
   }
-  if (item.fieldType !== 'TEXT') {
+  if (item.deExtractType !== 0) {
     return true
   }
 }
@@ -542,6 +523,9 @@ const changeCurrentMode = val => {
       }
       initMultipleTable.value = false
     })
+  } else {
+    const sheet = state.excelData[0]?.sheets.find(ele => ele.sheetId === activeTab.value)
+    handleNodeClick(sheet)
   }
 }
 
@@ -646,14 +630,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>
@@ -714,20 +715,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
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/form/ExcelRemoteDetail.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/ExcelRemoteDetail.vue
new file mode 100644
index 0000000..7c89c51
--- /dev/null
+++ b/core/core-frontend/src/viewsnew/application/service/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/viewsnew/application/service/datasource/form/Pagination.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/Pagination.vue
index 4d43981..2733f56 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/Pagination.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/form/Pagination.vue
@@ -171,10 +171,9 @@ const handleNumberSizeChange = () => {
           <template #default="scope">
             <el-input
               v-model="scope.row.resolutionPath"
-              style="width: 100%;"
+              style="width: 100%"
               :placeholder="t('api_pagination.please_enter_jsonpath')"
-              >
-              <template #prepend>
+              ><template #prepend>
                 <el-select
                   class="bg-white"
                   v-model="scope.row.resolutionPathType"
@@ -186,8 +185,7 @@ const handleNumberSizeChange = () => {
                     :label="item.label"
                     :value="item.value"
                   />
-                </el-select>
-                </template
+                </el-select> </template
             ></el-input>
           </template>
         </el-table-column>
@@ -198,12 +196,10 @@ const handleNumberSizeChange = () => {
 
 <style lang="less" scoped>
 .api-pagination {
-  margin-bottom: 16px;
   .type {
     font-size: 14px;
     font-weight: 400;
     line-height: 22px;
-    color: #fff;
   }
 
   .table-title {
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/form/index.vue b/core/core-frontend/src/viewsnew/application/service/datasource/form/index.vue
index dfff2c3..c86692b 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/index.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/form/index.vue
@@ -9,12 +9,20 @@ 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'
 import { dsTypes, typeList, nameMap } from './option'
-import { useRouter,useRoute } from 'vue-router'
+import { useRouter } from 'vue-router'
 import { uuid } from 'vue-uuid'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import FinishPage from '../FinishPage.vue'
@@ -57,17 +65,14 @@ interface Form {
   staticMap?: any
 }
 
-
 const { t } = useI18n()
 const creatDsFolder = ref()
-
+const router = useRouter()
 const { wsCache } = useCache()
 const dsLoading = ref(false)
 let isFormUpdate = false
 let isForm2Update = false
 let isUpdate = false
-
-
 const changeUpdate = val => {
   isUpdate = val
 }
@@ -85,6 +90,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('')
@@ -97,20 +103,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)
@@ -216,7 +215,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
 }
 
@@ -235,6 +238,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 => {
@@ -249,7 +260,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
@@ -305,25 +324,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
@@ -382,7 +390,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)
@@ -393,9 +404,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++) {
@@ -448,13 +484,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) {
@@ -465,7 +501,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++) {
@@ -499,7 +553,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()
@@ -531,7 +585,7 @@ const doSaveDs = request => {
       tip: ''
     }
     request.appId = appId.value
-    
+
     checkRepeat(request).then(res => {
       let method = request.id === '' ? save : update
       if (res) {
@@ -541,7 +595,6 @@ const doSaveDs = request => {
               return
             }
             dsLoading.value = true
-            debugger
             method(request)
               .then(res => {
                 if (res !== undefined) {
@@ -585,16 +638,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')
@@ -627,7 +682,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))
@@ -665,6 +720,7 @@ const init = (nodeInfo: Form | Param, id?: string, res?: object, supportSetKey:
       }
       nextTick(() => {
         detail?.value?.clearForm()
+        excelRemote?.value?.clearForm()
         xpack?.value?.invokeMethod({
           methodName: 'clearForm',
           args: []
@@ -679,6 +735,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')
@@ -729,26 +792,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>
@@ -849,7 +902,7 @@ defineExpose({
             v-if="
               activeStep !== 0 &&
               currentDsType &&
-              currentDsType !== 'Excel' &&
+              !currentDsType.startsWith('Excel') &&
               visible &&
               (!isPlugin || currentDsType.startsWith('API'))
             "
@@ -879,6 +932,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">
@@ -899,8 +961,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"
@@ -909,8 +974,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"
@@ -1066,7 +1134,7 @@ defineExpose({
         top: 0;
         left: 24px;
         z-index: 5;
-        // background: white;
+        background: white;
         padding: 0 17px;
         &::before {
           content: '';
@@ -1197,7 +1265,7 @@ defineExpose({
   background-color: #434343 !important;
 }
 .editor-detail .is-controls-right > span{
-  background-color: #434343 !important; 
+  background-color: #434343 !important;
 }
 .ed-input-number.is-controls-right .ed-input-number__decrease{
   border-left: 1px solid #5f5f5f;
@@ -1252,4 +1320,4 @@ defineExpose({
   box-shadow: none !important;
   border: 1px solid #f54a45 !important;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/core/core-frontend/src/viewsnew/application/service/datasource/form/option.ts b/core/core-frontend/src/viewsnew/application/service/datasource/form/option.ts
index 19e9afe..2e9a9b9 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/form/option.ts
+++ b/core/core-frontend/src/viewsnew/application/service/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/viewsnew/application/service/datasource/index.vue b/core/core-frontend/src/viewsnew/application/service/datasource/index.vue
index 6c78663..2bd454b 100644
--- a/core/core-frontend/src/viewsnew/application/service/datasource/index.vue
+++ b/core/core-frontend/src/viewsnew/application/service/datasource/index.vue
@@ -1,14 +1,10 @@
 <script lang="tsx" setup>
-import Header from '../header.vue'
-import { findApplicationById } from "@/api/application/application";
 import icon_down_outlined1 from '@/assets/svg/icon_down_outlined-1.svg'
 import icon_down_outlined from '@/assets/svg/icon_down_outlined.svg'
 import icon_copy_filled from '@/assets/svg/icon_copy_filled.svg'
 import icon_dataset from '@/assets/svg/icon_dataset.svg'
 import icon_deleteTrash_outlined from '@/assets/svg/icon_delete-trash_outlined.svg'
 import icon_intoItem_outlined from '@/assets/svg/icon_into-item_outlined.svg'
-import icon_datasoure_details from '@/assets/svg/datasoure_details.svg'
-import icon_datasoure_add_dataset from '@/assets/svg/datasoure_add_dataset.svg'
 import { debounce } from 'lodash-es'
 import icon_rename_outlined from '@/assets/svg/icon_rename_outlined.svg'
 import icon_warning_colorful_red from '@/assets/svg/icon_warning_colorful_red.svg'
@@ -53,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'
@@ -78,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'
@@ -211,7 +208,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
     })
@@ -714,7 +711,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 => {
@@ -948,7 +945,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
@@ -970,6 +967,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:
@@ -1050,7 +1067,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)
   }
@@ -1086,7 +1103,6 @@ const getMenuList = (val: boolean) => {
 </script>
 
 <template>
-  <Header :projectInfo="projectInfo"/>
   <div class="datasource-manage" v-loading="dsLoading">
     <ArrowSide
       :style="{ left: (sideTreeStatus ? width - 12 : 0) + 'px' }"
@@ -1113,7 +1129,7 @@ const getMenuList = (val: boolean) => {
             <div v-if="rootManage" class="flex-align-center">
               <el-tooltip effect="dark" :content="t('datasource.create')" placement="top">
                 <img src="@/assets/newimg/u43.png" alt="" style="cursor: pointer;"
-                @click="createDatasource()"> 
+                @click="createDatasource()">
               </el-tooltip>
             </div>
           </div>
@@ -1132,7 +1148,34 @@ const getMenuList = (val: boolean) => {
               </el-icon>
             </template>
           </el-input>
-        
+          <el-dropdown @command="handleSortTypeChange" trigger="click">
+            <el-icon class="filter-icon-span">
+              <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
+                <Icon name="dv-sort-asc" class="opt-icon"
+                  ><dvSortAsc v-if="state.curSortType.includes('asc')" class="svg-icon opt-icon"
+                /></Icon>
+              </el-tooltip>
+              <el-tooltip :offset="16" effect="dark" :content="sortTypeTip" placement="top">
+                <Icon name="dv-sort-desc" class="opt-icon"
+                  ><dvSortDesc v-if="state.curSortType.includes('desc')" class="svg-icon opt-icon"
+                /></Icon>
+              </el-tooltip>
+            </el-icon>
+            <template #dropdown>
+              <el-dropdown-menu style="width: 246px">
+                <template :key="ele.value" v-for="ele in sortList">
+                  <el-dropdown-item
+                    class="ed-select-dropdown__item"
+                    :class="ele.value === state.curSortType && 'selected'"
+                    :command="ele.value"
+                  >
+                    {{ ele.name }}
+                  </el-dropdown-item>
+                  <li v-if="ele.divided" class="ed-dropdown-menu__item--divided"></li>
+                </template>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
         </div>
         <el-scrollbar @scroll="handleScroll" ref="scrollbarRef" class="custom-tree">
           <el-tree
@@ -1235,16 +1278,38 @@ const getMenuList = (val: boolean) => {
       <template v-else-if="!!nodeInfo.id">
         <div class="datasource-info">
           <div class="info-method">
-           
+            <el-icon class="icon-border">
+              <Icon :static-content="getDsIconType(nodeInfo.type)"
+                ><component class="svg-icon" :is="iconDatasourceMap[nodeInfo.type]"></component
+              ></Icon>
+            </el-icon>
+            <span :title="nodeInfo.name" class="name ellipsis">
+              {{ nodeInfo.name }}
+            </span>
+            <el-divider style="margin: 0 12px" direction="vertical" />
+            <span class="create-user">
+              {{ t('visualization.create_by') }}:{{ nodeInfo.creator }}
+            </span>
+            <el-popover :offset="8" show-arrow placement="bottom" width="290" trigger="hover">
+              <template #reference>
+                <el-icon size="16px" class="create-user">
+                  <Icon name="icon_info_outlined"><icon_info_outlined class="svg-icon" /></Icon>
+                </el-icon>
+              </template>
+              <dataset-detail
+                :create-time="infoList.createTime"
+                :creator="infoList.creator"
+              ></dataset-detail>
+            </el-popover>
             <div class="right-btn flex-align-center">
-              <!-- <el-button secondary @click="createDataset(null)" v-permission="['dataset']">
+              <el-button secondary @click="createDataset(null)" v-permission="['dataset']">
                 <template #icon>
                   <Icon name="icon_dataset_outlined"
                     ><icon_dataset_outlined class="svg-icon"
                   /></Icon>
                 </template>
                 {{ t('data_set.a_new_dataset') }}
-              </el-button> -->
+              </el-button>
               <el-button
                 v-if="nodeInfo.type !== 'Excel' && nodeInfo.weight >= 7"
                 secondary
@@ -1356,7 +1421,7 @@ const getMenuList = (val: boolean) => {
                 <template #default="scope">
                   <div class="flex-align-center">
                     <template v-if="scope.row.status === 'Completed'">
-                      <el-icon style="margin-right: 8px;">
+                      <el-icon style="margin-right: 8px">
                         <icon name="icon_succeed_filled"
                           ><icon_succeed_filled class="svg-icon"
                         /></icon>
@@ -1404,8 +1469,8 @@ const getMenuList = (val: boolean) => {
                       v-permission="['dataset']"
                     >
                       <template #icon>
-                        <Icon name="icon_datasoure_add_dataset"
-                          ><icon_datasoure_add_dataset  style="font-size: 16px;" class="svg-icon"
+                        <Icon name="icon_dataset_outlined"
+                          ><icon_dataset_outlined class="svg-icon"
                         /></Icon>
                       </template>
                     </el-button>
@@ -1413,8 +1478,8 @@ const getMenuList = (val: boolean) => {
                   <el-tooltip effect="dark" :content="t('visualization.details')" placement="top">
                     <el-button @click.stop="selectDataset(scope.row)" text>
                       <template #icon>
-                        <Icon name="icon_datasoure_details"
-                          ><icon_datasoure_details class="svg-icon"
+                        <Icon name="icon_describe_outlined"
+                          ><icon_describe_outlined class="svg-icon"
                         /></Icon>
                       </template>
                     </el-button>
@@ -1429,7 +1494,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>
@@ -1442,10 +1507,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>
@@ -1455,6 +1530,7 @@ const getMenuList = (val: boolean) => {
                 v-if="
                   !['Excel', 'es'].includes(nodeInfo.type) &&
                   !nodeInfo.type.startsWith('API') &&
+                  !nodeInfo.type.startsWith('Excel') &&
                   nodeInfo.weight >= 7
                 "
               >
@@ -1504,7 +1580,6 @@ const getMenuList = (val: boolean) => {
                   </el-col>
                 </el-row>
                 <el-row :gutter="24">
-                  <span class="icon-title" style="margin-top: 18px;margin-right: 8px;"></span>
                   <span
                     v-if="
                       !['es', 'api'].includes(nodeInfo.type.toLowerCase()) &&
@@ -1544,7 +1619,6 @@ const getMenuList = (val: boolean) => {
                   </el-row>
                 </template>
                 <el-row :gutter="24">
-                  <span class="icon-title" style="margin-top: 18px;margin-right: 8px;"></span>
                   <span
                     v-if="!['es', 'api'].includes(nodeInfo.type.toLowerCase())"
                     class="de-expand"
@@ -1660,7 +1734,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)"
@@ -1694,41 +1808,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">
@@ -1766,6 +1845,7 @@ const getMenuList = (val: boolean) => {
           v-loading="dsTableDataLoading"
           header-cell-class-name="header-cell"
           :data="state.dsTableData"
+          stripe
           style="width: 100%"
         >
           <el-table-column prop="originName" :label="t('datasource.column_name')" />
@@ -2323,7 +2403,7 @@ const getMenuList = (val: boolean) => {
     margin: 4px 0 24px 0;
     color: var(--deTextPrimary, #ffffff);
   }
- 
+
 }
 
 
@@ -2449,7 +2529,7 @@ border-right: 1px solid rgba(54, 54, 54, 1);
   background: rgba(40, 40, 40, 1);
   color: #C9C9C9;
   border-right: 1px solid rgba(54, 54, 54, 1);
- 
+
 }
 .ed-table-v2__header-row{
   border-bottom: 1px solid rgba(54, 54, 54, 1)
@@ -2574,4 +2654,4 @@ border-right: 1px solid rgba(54, 54, 54, 1);
 .arrow-side-tree .ed-icon{
   color: #fff !important;
 }
-</style>
\ No newline at end of file
+</style>