diff --git a/core/core-frontend/package.json b/core/core-frontend/package.json
index 893c6b56ba..3bfeddddde 100644
--- a/core/core-frontend/package.json
+++ b/core/core-frontend/package.json
@@ -24,7 +24,7 @@
     "axios": "^1.3.3",
     "crypto-js": "^4.1.1",
     "dayjs": "^1.11.9",
-    "element-plus-secondary": "^0.5.1",
+    "element-plus-secondary": "^0.5.2",
     "element-resize-detector": "^1.2.4",
     "file-saver": "^2.0.5",
     "html-to-image": "^1.11.11",
diff --git a/core/core-frontend/src/components/visualization/ComponentEditBar.vue b/core/core-frontend/src/components/visualization/ComponentEditBar.vue
index 41c658f775..511fc750ca 100644
--- a/core/core-frontend/src/components/visualization/ComponentEditBar.vue
+++ b/core/core-frontend/src/components/visualization/ComponentEditBar.vue
@@ -488,7 +488,7 @@ watch(
   font-size: 16px !important;
 }
 .bar-main-background {
-  background-color: var(--primary, #3370ff);
+  background-color: var(--ed-color-primary, #3370ff);
 }
 
 .bar-main-right {
diff --git a/core/core-frontend/src/store/modules/appearance.ts b/core/core-frontend/src/store/modules/appearance.ts
index cbe9dc1dc5..0100681d91 100644
--- a/core/core-frontend/src/store/modules/appearance.ts
+++ b/core/core-frontend/src/store/modules/appearance.ts
@@ -2,6 +2,8 @@ import { defineStore } from 'pinia'
 import { store } from '@/store/index'
 import { uiLoadApi } from '@/api/login'
 import { useCache } from '@/hooks/web/useCache'
+import colorFunctions from 'less/lib/less/functions/color.js'
+import colorTree from 'less/lib/less/tree/color.js'
 const basePath = import.meta.env.VITE_API_BASEPATH
 const baseUrl = basePath + '/appearance/image/'
 interface AppearanceState {
@@ -135,6 +137,24 @@ export const useAppearanceStore = defineStore('appearanceStore', {
       this.customColor = data.customColor
       if (this.themeColor === 'custom' && this.customColor) {
         document.documentElement.style.setProperty('--ed-color-primary', this.customColor)
+        document.documentElement.style.setProperty(
+          '--ed-color-primary-light-5',
+          colorFunctions
+            .mix(new colorTree('ffffff'), new colorTree(this.customColor.substr(1)), { value: 40 })
+            .toRGB()
+        )
+        document.documentElement.style.setProperty(
+          '--ed-color-primary-light-3',
+          colorFunctions
+            .mix(new colorTree('ffffff'), new colorTree(this.customColor.substr(1)), { value: 15 })
+            .toRGB()
+        )
+        document.documentElement.style.setProperty(
+          '--ed-color-primary-dark-2',
+          colorFunctions
+            .mix(new colorTree('000000'), new colorTree(this.customColor.substr(1)), { value: 15 })
+            .toRGB()
+        )
       } else if (document.documentElement.style.getPropertyValue('--ed-color-primary')) {
         document.documentElement.style.setProperty('--ed-color-primary', '#3370FF')
       }
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue b/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
index 900132c1c3..58d5f04a89 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
@@ -1041,7 +1041,7 @@ const mousedownDrag = () => {
       .de-Exec-result,
       .de-Underway-pre {
         &::before {
-          background: var(--primary, #3370ff);
+          background: var(--ed-color-primary, #3370ff);
         }
       }
 
@@ -1058,7 +1058,7 @@ const mousedownDrag = () => {
         }
 
         .ed-icon-s-order {
-          color: var(--primary, #3370ff);
+          color: var(--ed-color-primary, #3370ff);
           cursor: pointer;
         }
       }
@@ -1245,7 +1245,7 @@ const mousedownDrag = () => {
       top: 10.6px;
       left: 16px;
       font-size: 14px;
-      color: var(--primary, #3370ff);
+      color: var(--ed-color-primary, #3370ff);
     }
 
     margin-bottom: 16px;
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue b/core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue
index 3deefae7e0..c43522bcd5 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue
@@ -547,7 +547,7 @@ initFunction()
 }
 
 .item-dimension:hover {
-  border-color: var(--primary, #3370ff);
+  border-color: var(--ed-color-primary, #3370ff);
   background: rgba(51, 112, 255, 0.1);
   cursor: pointer;
 }
@@ -576,7 +576,7 @@ initFunction()
 }
 
 .function-style:hover {
-  border-color: var(--primary, #3370ff);
+  border-color: var(--ed-color-primary, #3370ff);
   cursor: pointer;
 }
 .function-height {
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue b/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
index 514dbb99b1..0e062efa24 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
@@ -7,12 +7,13 @@ import { guid } from './util'
 import { HandleMore } from '@/components/handle-more'
 import { propTypes } from '@/utils/propTypes'
 import UnionFieldList from './UnionFieldList.vue'
-import type { Node } from './UnionEdit.vue'
+import type { Node, Field } from './util'
 import { getTableField } from '@/api/dataset'
-import type { Field } from './UnionFieldList.vue'
 import type { SqlNode } from './AddSql.vue'
 import { cloneDeep } from 'lodash-es'
 import type { Table } from '@/api/dataset'
+import { useAppearanceStoreWithOut } from '@/store/modules/appearance'
+const appearanceStore = useAppearanceStoreWithOut()
 const state = reactive({
   nodeList: [],
   pathList: [],
@@ -28,6 +29,10 @@ const props = defineProps({
   getDsName: propTypes.func
 })
 
+const primaryColor = computed(() => {
+  return appearanceStore.themeColor === 'custom' ? appearanceStore.customColor : '#3370FF'
+})
+
 const iconName = {
   left: 'icon_left-association',
   right: 'icon_right-association',
@@ -803,7 +808,7 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields'])
         v-for="ele in flatPathList"
         :d="ele.d"
         :stroke-dasharray="ele.isShadow ? '4,4' : '0'"
-        :stroke="ele.isShadow ? '#3370ff' : '#BBBFC4'"
+        :stroke="ele.isShadow ? primaryColor : '#BBBFC4'"
         stroke-width="1"
         fill="none"
       />
@@ -1036,6 +1041,7 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields'])
   align-items: center;
   justify-content: center;
   background: #fff;
+  color: var(--ed-color-primary);
   cursor: pointer;
   &:hover {
     border-color: var(--ed-color-primary);
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/UnionEdit.vue b/core/core-frontend/src/views/visualized/data/dataset/form/UnionEdit.vue
index 9f3bafda02..5284811210 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/UnionEdit.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/UnionEdit.vue
@@ -2,29 +2,10 @@
 import { ref, reactive } from 'vue'
 import UnionFieldList from './UnionFieldList.vue'
 import UnionItemEdit from './UnionItemEdit.vue'
-import type { Field } from './UnionFieldList.vue'
+import type { Field, NodeType, UnionType, Node } from './util'
 import { getTableField } from '@/api/dataset'
 import { cloneDeep } from 'lodash-es'
-interface UnionField {
-  currentField: Field
-  parentField: Field
-}
 
-type NodeType = 'db' | 'sql'
-type UnionType = 'left' | 'right' | 'inner'
-
-export interface Node {
-  tableName: string
-  type: NodeType
-  datasourceId: string
-  id: string
-  unionType: UnionType
-  unionFields: UnionField[]
-  info: string
-  sqlVariableDetails: string
-  currentDsFields: Field[]
-  children?: Node[]
-}
 const changeParentFields = val => {
   parent.currentDsFields = val
 }
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/UnionFieldList.vue b/core/core-frontend/src/views/visualized/data/dataset/form/UnionFieldList.vue
index cf6e467dfc..51891c1c05 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/UnionFieldList.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/UnionFieldList.vue
@@ -4,15 +4,7 @@ import { useI18n } from '@/hooks/web/useI18n'
 import { propTypes } from '@/utils/propTypes'
 import { ElTable } from 'element-plus-secondary'
 import { fieldType } from '@/utils/attr'
-export interface Field {
-  checked: boolean
-  deExtractType: number
-  deType: number
-  name: string
-  type: string
-  originName: string
-  id: string
-}
+import { type Field } from './util'
 
 const { t } = useI18n()
 const props = defineProps({
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/index.vue b/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
index 16eba7ed09..2c7ee687da 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
@@ -644,6 +644,11 @@ const tabChange = val => {
         ele.deType === 1 && ele.deExtractType === 0
           ? [ele.deType, ele.dateFormatType]
           : [ele.deType]
+    } else {
+      const [type] = ele.deTypeArr
+      if (ele.deTypeArr.length && type !== ele.deType) {
+        ele.deTypeArr.splice(0, 1, ele.deType)
+      }
     }
   })
 }
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/util.ts b/core/core-frontend/src/views/visualized/data/dataset/form/util.ts
index ebacab63d9..1d596529f3 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/util.ts
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/util.ts
@@ -120,4 +120,45 @@ const timeTypes = [
   'custom'
 ]
 
-export { timestampFormatDate, defaultValueScopeList, fieldOptions, guid, getFieldName, timeTypes }
+type NodeType = 'db' | 'sql'
+type UnionType = 'left' | 'right' | 'inner'
+interface UnionField {
+  currentField: Field
+  parentField: Field
+}
+interface Node {
+  tableName: string
+  type: NodeType
+  datasourceId: string
+  id: string
+  unionType: UnionType
+  unionFields: UnionField[]
+  info: string
+  sqlVariableDetails: string
+  currentDsFields: Field[]
+  children?: Node[]
+}
+
+interface Field {
+  checked: boolean
+  deExtractType: number
+  deType: number
+  name: string
+  type: string
+  originName: string
+  id: string
+}
+
+export {
+  NodeType,
+  UnionType,
+  UnionField,
+  Node,
+  Field,
+  timestampFormatDate,
+  defaultValueScopeList,
+  fieldOptions,
+  guid,
+  getFieldName,
+  timeTypes
+}