Merge pull request #8291 from dataease/pr@dev-v2_dzz_mobile

Pr@dev v2 dzz mobile
2024-03-04 11:52:32 +08:00 · 2024-03-04 11:52:32 +08:00 · e90b9930bf
commit e90b9930bf
parent d384814604 79d712798e
81 changed files with 182 additions and 179 deletions
--- a/core/core-frontend/src/components/assist-button/ColorButton.vue
+++ b/core/core-frontend/src/components/assist-button/ColorButton.vue
@ -62,7 +62,7 @@ const colorButtonClick = () => {
  padding-left: 4px;
  padding-top: 4px;
  border-width: 2px;
-  border-color: #3370ff;
+  border-color: var(--ed-color-primary);
 }

 .color-button-inner {
--- a/core/core-frontend/src/components/color-scheme/src/ColorScheme.vue
+++ b/core/core-frontend/src/components/color-scheme/src/ColorScheme.vue
@ -223,7 +223,7 @@ const resetCustomColor = () => {

      &.active {
        &::after {
-          border-color: #3370ff;
+          border-color: var(--ed-color-primary);
          display: block;
        }
      }
--- a/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
+++ b/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
@ -239,7 +239,7 @@ const saveSelfSubject = () => {

    &:hover {
      .ed-icon {
-        color: #3370ff;
+        color: var(--ed-color-primary);
      }
    }
  }
@ -295,7 +295,7 @@ const saveSelfSubject = () => {

 .re-update-span {
  cursor: pointer;
-  color: #3370ff;
+  color: var(--ed-color-primary);
  size: 14px;
  line-height: 22px;
  font-weight: 400;
--- a/core/core-frontend/src/components/dashboard/DbToolbar.vue
+++ b/core/core-frontend/src/components/dashboard/DbToolbar.vue
@ -141,13 +141,6 @@ const saveCanvasWithCheck = () => {
  saveResource()
 }

-const saveCanvasWithCheckFromMobile = () => {
-  snapshotStore.resetStyleChangeTimes()
-  canvasSave(() => {
-    ElMessage.success('保存成功')
-  })
-}
-
 const saveResource = () => {
  if (styleChangeTimes.value > 0) {
    snapshotStore.resetStyleChangeTimes()
@ -199,7 +192,6 @@ const mobileConfig = () => {

 eventBus.on('preview', previewInner)
 eventBus.on('save', saveCanvasWithCheck)
-eventBus.on('saveFromMobile', saveCanvasWithCheckFromMobile)
 eventBus.on('clearCanvas', clearCanvas)

 const openDataBoardSetting = () => {
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/FilterStyleSimpleSelector.vue
@ -189,7 +189,7 @@ onMounted(() => {
 <style scoped lang="less">
 .hover-icon {
  &.active {
-    color: #3370ff !important;
+    color: var(--ed-color-primary) !important;
    background-color: rgba(51, 112, 255, 0.1);
  }
  & + & {
--- a/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/dashboard-style/ViewSimpleTitle.vue
@ -185,7 +185,7 @@ function setPosition(p: 'left' | 'center' | 'right') {
    .bash-icon {
      background: rgba(51, 112, 255, 0.1);
      border-radius: 4px;
-      color: #3370ff;
+      color: var(--ed-color-primary);
    }
  }
 }
@ -238,7 +238,7 @@ function setPosition(p: 'left' | 'center' | 'right') {
  &.dark {
    color: #a6a6a6;
    &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
      background-color: rgba(51, 112, 255, 0.1);
    }
    &:hover {
@ -247,7 +247,7 @@ function setPosition(p: 'left' | 'center' | 'right') {
  }

  &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
    background-color: rgba(51, 112, 255, 0.1);
  }

--- a/core/core-frontend/src/components/dashboard/subject-setting/pre-subject/SubjectTemplateItem.vue
+++ b/core/core-frontend/src/components/dashboard/subject-setting/pre-subject/SubjectTemplateItem.vue
@ -196,7 +196,7 @@ onMounted(() => {
 }

 .background-selected {
-  border: solid 1px #3370ff !important;
+  border: solid 1px var(--ed-color-primary) !important;
  .title-main {
    background: rgba(51, 112, 255, 0.1);
  }
--- a/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
+++ b/core/core-frontend/src/components/data-visualization/CanvasAttr.vue
@ -229,7 +229,7 @@ onMounted(() => {

 .re-update-span {
  cursor: pointer;
-  color: #3370ff;
+  color: var(--ed-color-primary);
  size: 14px;
  line-height: 22px;
  font-weight: 400;
--- a/core/core-frontend/src/components/data-visualization/RealTimeComponentList.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeComponentList.vue
@ -409,10 +409,10 @@ const handleContextMenu = e => {
      .activated {
        background-color: rgba(51, 112, 255, 0.1) !important;
        :deep(.component-icon) {
-          color: #3370ff;
+          color: var(--ed-color-primary);
        }
        :deep(.component-label) {
-          color: #3370ff;
+          color: var(--ed-color-primary);
        }
      }
    }
--- a/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeGroup.vue
@ -422,10 +422,10 @@ const handleContextMenu = e => {
      .activated {
        background-color: rgba(51, 112, 255, 0.1) !important;
        :deep(.component-icon) {
-          color: #3370ff;
+          color: var(--ed-color-primary);
        }
        :deep(.component-label) {
-          color: #3370ff;
+          color: var(--ed-color-primary);
        }
      }
    }
--- a/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeListTree.vue
@ -442,10 +442,10 @@ const handleContextMenu = e => {
      .activated {
        background-color: rgba(51, 112, 255, 0.1) !important;
        :deep(.component-icon) {
-          color: #3370ff;
+          color: var(--ed-color-primary);
        }
        :deep(.component-label) {
-          color: #3370ff;
+          color: var(--ed-color-primary);
        }
      }
    }
--- a/core/core-frontend/src/components/data-visualization/canvas/ComposeShow.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/ComposeShow.vue
@ -55,6 +55,6 @@ const handleMouseDown = e => {
 }

 .shadow-border {
-  border: 1px solid #3370ff;
+  border: 1px solid var(--ed-color-primary);
 }
 </style>
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@ -963,7 +963,7 @@ onMounted(() => {
 }

 .active {
-  outline: 1px solid rgba(51, 112, 255, 1) !important;
+  outline: 1px solid var(--ed-color-primary) !important;
  user-select: none;
 }

--- a/core/core-frontend/src/components/filter-text/src/FilterText.vue
+++ b/core/core-frontend/src/components/filter-text/src/FilterText.vue
@ -114,7 +114,7 @@ watch(
  }

  .clear-btn:hover {
-    color: #3370ff;
+    color: var(--ed-color-primary);
  }

  .filter-texts-container::-webkit-scrollbar {
--- a/core/core-frontend/src/components/visualization/ComponentButton.vue
+++ b/core/core-frontend/src/components/visualization/ComponentButton.vue
@ -60,7 +60,7 @@ const emits = defineEmits(['customClick'])
 }

 .inner-active {
-  border: 1px solid #3370ff;
+  border: 1px solid var(--ed-color-primary);
  background: rgba(255, 255, 255, 0.2);
 }

--- a/core/core-frontend/src/components/visualization/ComponentButtonLabel.vue
+++ b/core/core-frontend/src/components/visualization/ComponentButtonLabel.vue
@ -65,7 +65,7 @@ const emits = defineEmits(['customClick'])
 }

 .inner-active {
-  border: 1px solid #3370ff;
+  border: 1px solid var(--ed-color-primary);
  background: rgba(255, 255, 255, 0.2);
 }

--- a/core/core-frontend/src/components/visualization/LinkJumpSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkJumpSet.vue
@ -1014,7 +1014,7 @@ span {
  align-items: center;
 }
 .view-type-icon {
-  color: #3370ff;
+  color: var(--ed-color-primary);
  width: 22px;
  height: 16px;
 }
--- a/core/core-frontend/src/components/visualization/LinkageSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkageSet.vue
@ -642,7 +642,7 @@ span {
  align-items: center;
 }
 .view-type-icon {
-  color: #3370ff;
+  color: var(--ed-color-primary);
  width: 22px;
  height: 16px;
 }
--- a/core/core-frontend/src/components/visualization/common/DeUpload.vue
+++ b/core/core-frontend/src/components/visualization/common/DeUpload.vue
@ -135,7 +135,7 @@ watch(

    &:hover {
      .ed-icon {
-        color: #3370ff;
+        color: var(--ed-color-primary);
      }
    }
  }
@ -213,7 +213,7 @@ watch(

    &:hover {
      .ed-icon {
-        color: #3370ff;
+        color: var(--ed-color-primary);
      }
    }
  }
@ -249,7 +249,7 @@ watch(

 .re-update-span {
  cursor: pointer;
-  color: #3370ff;
+  color: var(--ed-color-primary);
  size: 14px;
  line-height: 22px;
  font-weight: 400;
--- a/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
+++ b/core/core-frontend/src/components/visualization/component-background/BackgroundOverallCommon.vue
@ -375,7 +375,7 @@ watch(

    &:hover {
      .ed-icon {
-        color: #3370ff;
+        color: var(--ed-color-primary);
      }
    }
  }
@ -428,7 +428,7 @@ watch(

    &:hover {
      .ed-icon {
-        color: #3370ff;
+        color: var(--ed-color-primary);
      }
    }
  }
@ -513,7 +513,7 @@ watch(

 .re-update-span {
  cursor: pointer;
-  color: #3370ff;
+  color: var(--ed-color-primary);
  size: 14px;
  line-height: 22px;
  font-weight: 400;
--- a/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
+++ b/core/core-frontend/src/components/visualization/component-background/CanvasBackground.vue
@ -245,7 +245,7 @@ watch(

    &:hover {
      .ed-icon {
-        color: #3370ff;
+        color: var(--ed-color-primary);
      }
    }
  }
@ -298,7 +298,7 @@ watch(

    &:hover {
      .ed-icon {
-        color: #3370ff;
+        color: var(--ed-color-primary);
      }
    }
  }
--- a/core/core-frontend/src/components/visualization/linkJump.vue
+++ b/core/core-frontend/src/components/visualization/linkJump.vue
@ -281,7 +281,7 @@ defineExpose({
        color: #1f2329;

        .main-color {
-          color: #3370ff;
+          color: var(--ed-color-primary);
        }
      }
    }
--- a/core/core-frontend/src/custom-component/common/CommonAttr.vue
+++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue
@ -454,7 +454,7 @@ const stopEvent = e => {
  &.dark {
    color: #a6a6a6;
    &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
      background-color: rgba(51, 112, 255, 0.1);
    }
    &:hover {
@ -463,7 +463,7 @@ const stopEvent = e => {
  }

  &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
    background-color: rgba(51, 112, 255, 0.1);
  }

--- a/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
@ -149,9 +149,9 @@ const groupActiveChange = category => {

 .li-custom-active {
  background: rgba(51, 112, 255, 0.1);
-  color: #3370ff !important;
+  color: var(--ed-color-primary) !important;
  .li-a {
-    color: #3370ff !important;
+    color: var(--ed-color-primary) !important;
  }
 }

@ -165,7 +165,7 @@ const groupActiveChange = category => {
    border-radius: 4px;
    cursor: pointer;
    &:hover {
-      outline: 1px solid #3370ff;
+      outline: 1px solid var(--ed-color-primary);
    }
    .item-top-icon {
      width: 80px;
@ -191,7 +191,7 @@ const groupActiveChange = category => {
    padding: 4px;
    cursor: pointer;
    &:hover {
-      outline: 1px solid #3370ff;
+      outline: 1px solid var(--ed-color-primary);
    }
    .item-top-icon {
      width: 20px;
--- a/core/core-frontend/src/custom-component/component-group/DragComponent.vue
+++ b/core/core-frontend/src/custom-component/component-group/DragComponent.vue
@ -59,7 +59,7 @@ const { icon, name, label, dragInfo, themes } = toRefs(props)
    height: 64px !important;
    border-radius: 4px;
    &:hover {
-      border: 1px solid rgba(51, 112, 255, 1);
+      border: 1px solid var(--ed-color-primary);
      cursor: pointer;
    }
    display: flex;
--- a/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
@ -132,7 +132,7 @@ const groupActiveChange = category => {
  :deep(.li-custom) {
    color: #646a73 !important;
    &.li-custom-active {
-      color: #3370ff !important;
+      color: var(--ed-color-primary) !important;
    }
    &:hover {
      background: rgba(31, 35, 41, 0.1) !important;
@ -201,9 +201,9 @@ const groupActiveChange = category => {

 .li-custom-active {
  background: rgba(51, 112, 255, 0.1);
-  color: #3370ff !important;
+  color: var(--ed-color-primary) !important;
  .li-a {
-    color: #3370ff !important;
+    color: var(--ed-color-primary) !important;
  }
 }

@ -223,7 +223,7 @@ const groupActiveChange = category => {
    align-items: center;
    justify-content: center;
    &:hover {
-      border: 1px solid #3370ff;
+      border: 1px solid var(--ed-color-primary);
    }
    .item-top-icon {
      width: 80px;
--- a/core/core-frontend/src/custom-component/de-graphical/Attr.vue
+++ b/core/core-frontend/src/custom-component/de-graphical/Attr.vue
@ -157,7 +157,7 @@ onBeforeUnmount(() => {

  &:hover {
    .ed-icon {
-      color: #3370ff;
+      color: var(--ed-color-primary);
    }
  }
 }
@ -179,7 +179,7 @@ onBeforeUnmount(() => {
      }
      &:hover {
        .ed-icon {
-          color: #3370ff;
+          color: var(--ed-color-primary);
        }
      }
    }
@ -205,7 +205,7 @@ onBeforeUnmount(() => {

 .re-update-span {
  cursor: pointer;
-  color: #3370ff;
+  color: var(--ed-color-primary);
  size: 14px;
  line-height: 22px;
  font-weight: 400;
--- a/core/core-frontend/src/custom-component/group/Component.vue
+++ b/core/core-frontend/src/custom-component/group/Component.vue
@ -118,6 +118,6 @@ watch(
 }

 .canvas-active-custom {
-  outline: 2px solid rgba(51, 112, 255, 1) !important;
+  outline: 2px solid var(--ed-color-primary) !important;
 }
 </style>
--- a/core/core-frontend/src/custom-component/picture/Attr.vue
+++ b/core/core-frontend/src/custom-component/picture/Attr.vue
@ -212,7 +212,7 @@ onBeforeUnmount(() => {

  &:hover {
    .ed-icon {
-      color: #3370ff;
+      color: var(--ed-color-primary);
    }
  }
 }
@ -234,7 +234,7 @@ onBeforeUnmount(() => {
      }
      &:hover {
        .ed-icon {
-          color: #3370ff;
+          color: var(--ed-color-primary);
        }
      }
    }
@ -260,7 +260,7 @@ onBeforeUnmount(() => {

 .re-update-span {
  cursor: pointer;
-  color: #3370ff;
+  color: var(--ed-color-primary);
  size: 14px;
  line-height: 22px;
  font-weight: 400;
--- a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
@ -1486,7 +1486,7 @@ defineExpose({
        .ed-icon {
          cursor: pointer;
          font-size: 16px;
-          color: #3370ff;
+          color: var(--ed-color-primary);
        }
      }
      .list-item_primary {
@ -1560,7 +1560,7 @@ defineExpose({
        .component-type {
          margin-right: 4px;
          font-size: 20px;
-          color: #3370ff;
+          color: var(--ed-color-primary);
        }
        .list-item {
          height: 32px;
--- a/core/core-frontend/src/custom-component/v-query/Time.vue
+++ b/core/core-frontend/src/custom-component/v-query/Time.vue
@ -220,6 +220,7 @@ const setArrValue = () => {

 const onConfirm = () => {
  setArrValue()
+  handleValueChange()
  showDate.value = false
 }

--- a/core/core-frontend/src/layout/components/AccountOperator.vue
+++ b/core/core-frontend/src/layout/components/AccountOperator.vue
@ -190,7 +190,7 @@ if (uid.value === '1') {
    background-color: #1e2738;
  }
  .main-color {
-    background: #3370ff;
+    background: var(--ed-color-primary);
    width: 24px;
    height: 24px;
    border-radius: 50%;
--- a/core/core-frontend/src/layout/components/Header.vue
+++ b/core/core-frontend/src/layout/components/Header.vue
@ -128,21 +128,21 @@ onMounted(() => {
      &.is-active {
        border-bottom: none;
        color: #ffffff !important;
-        background-color: #245bdb;
+        background-color: var(--ed-color-primary);
      }
    }

    > .is-active {
      :deep(.ed-sub-menu__title) {
        color: #ffffff !important;
-        background-color: #245bdb;
+        background-color: var(--ed-color-primary);
      }
    }

    .ed-menu-item:not(.is-disabled):hover,
    :deep(.ed-sub-menu__title):not(.is-disabled):hover {
      color: #ffffff;
-      background-color: #245bdb;
+      background-color: var(--ed-color-primary);
    }
  }
 }
--- a/core/core-frontend/src/layout/components/Sidebar.vue
+++ b/core/core-frontend/src/layout/components/Sidebar.vue
@ -29,7 +29,7 @@ const { width, node } = useMoveLine('DATASET')
    position: absolute;
    right: -1px;
    top: 0;
-    background: #3370ff;
+    background: var(--ed-color-primary);
  }
 }
 </style>
--- a/core/core-frontend/src/style/index.less
+++ b/core/core-frontend/src/style/index.less
@ -1,6 +1,7 @@
 :root {
-  font-family: '阿里巴巴普惠体 3.0 55 Regular L3', Helvetica Neue, Helvetica, '阿里巴巴普惠体 3.0 55 Regular L3', Hiragino Sans GB, Microsoft YaHei,
-    \5fae\8f6f\96c5\9ed1, Arial, sans-serif;
+  font-family: '阿里巴巴普惠体 3.0 55 Regular L3', Helvetica Neue, Helvetica,
+    '阿里巴巴普惠体 3.0 55 Regular L3', Hiragino Sans GB, Microsoft YaHei, \5fae\8f6f\96c5\9ed1,
+    Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

@ -78,7 +79,7 @@ body {

  &.active {
    background: rgba(51, 112, 255, 0.1);
-    color: #3370ff;
+    color: var(--ed-color-primary);
  }
 }

@ -112,7 +113,7 @@ body {
    content: '';
    width: 2px;
    height: 14px;
-    background: #3370ff;
+    background: var(--ed-color-primary);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
@ -134,11 +135,11 @@ body {
 }

 .field-icon-text {
-  color: #3370ff;
+  color: var(--ed-color-primary);
 }

 .field-icon-time {
-  color: #3370ff;
+  color: var(--ed-color-primary);
 }

 .field-icon-value {
@ -146,7 +147,7 @@ body {
 }

 .field-icon-location {
-  color: #3370ff;
+  color: var(--ed-color-primary);
 }

 .field-icon-red {
@ -160,7 +161,7 @@ body {
 }

 .field-icon-dimension {
-  color: #3370ff;
+  color: var(--ed-color-primary);
 }

 .field-icon-quota {
@ -195,7 +196,7 @@ body {
 }

 .hover-icon-in-table {
-  color: #3370ff !important;
+  color: var(--ed-color-primary) !important;
  &[aria-expanded='true'] {
    background: rgba(51, 112, 255, 0.1);
  }
@ -290,7 +291,7 @@ body {
 //   padding: 0 0 64px 0 !important;
 // }

-.ed-tree-node.is-current>.ed-tree-node__content:not(.is-menu):after {
+.ed-tree-node.is-current > .ed-tree-node__content:not(.is-menu):after {
  display: none;
 }

@ -363,11 +364,11 @@ em {
 }

 .color-panel {
-  background: #3370ff;
+  background: var(--ed-color-primary);
 }

 .color-dashboard {
-  background: #3370ff;
+  background: var(--ed-color-primary);
 }

 .color-screen {
--- a/core/core-frontend/src/views/chart/components/editor/chart-type/ChartType.vue
+++ b/core/core-frontend/src/views/chart/components/editor/chart-type/ChartType.vue
@ -177,9 +177,9 @@ const groupActiveChange = category => {

 .li-custom-active {
  background: rgba(51, 112, 255, 0.1);
-  color: #3370ff !important;
+  color: var(--ed-color-primary) !important;
  .li-a {
-    color: #3370ff !important;
+    color: var(--ed-color-primary) !important;
  }
 }

@ -199,7 +199,7 @@ const groupActiveChange = category => {
    align-items: center;
    justify-content: center;
    &:hover {
-      border: 1px solid #3370ff;
+      border: 1px solid var(--ed-color-primary);
    }
    .item-top-icon {
      width: 80px;
@ -208,7 +208,7 @@ const groupActiveChange = category => {
    }
  }
  .item-active {
-    border: 1px solid #3370ff;
+    border: 1px solid var(--ed-color-primary);
  }
  .item-bottom {
    height: 20px;
--- a/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
+++ b/core/core-frontend/src/views/chart/components/editor/dataset-select/DatasetSelect.vue
@ -502,14 +502,14 @@ onMounted(() => {
        }

        &.active {
-          color: #3370ff;
+          color: var(--ed-color-primary);
          padding-right: 30px;
        }
        .checked-item {
          position: absolute;
          right: 10px;
          padding-top: 2px;
-          color: #3370ff;
+          color: var(--ed-color-primary);
          font-size: 16px;
        }
      }
@ -523,12 +523,12 @@ onMounted(() => {

    &:not(.is-disabled):focus,
    &:not(.is-disabled):hover {
-      color: rgba(51, 112, 255, 1);
+      color: var(--ed-color-primary);
      border-color: transparent;
      background-color: rgba(51, 112, 255, 0.1);
    }
    &:not(.is-disabled):active {
-      color: rgba(51, 112, 255, 1);
+      color: var(--ed-color-primary);
      border-color: transparent;
      background-color: rgba(51, 112, 255, 0.2);
    }
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/DimensionItem.vue
@ -554,7 +554,7 @@ onMounted(() => {
  justify-content: space-between;
  align-items: center;
  background-color: #3370ff0a;
-  border: 1px solid #3370ff;
+  border: 1px solid var(--ed-color-primary);
 }

 .item-axis:hover {
@ -592,7 +592,7 @@ span {
  width: 100%;

  &.content-active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
  }

  .sub-menu-content--icon {
@ -706,7 +706,7 @@ span {
  }

  .sub-menu-content--icon {
-    color: #3370ff;
+    color: var(--ed-color-primary);
    margin-right: -7px;
  }
  :nth-child(1).ed-icon {
@ -727,7 +727,7 @@ span {
  }

  .sub-menu-content--icon {
-    color: #3370ff;
+    color: var(--ed-color-primary);
    margin-right: -7px !important;
  }
 }
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/DrillItem.vue
@ -144,7 +144,7 @@ onMounted(() => {
  justify-content: space-between;
  align-items: center;
  background-color: #3370ff0a;
-  border: 1px solid #3370ff;
+  border: 1px solid var(--ed-color-primary);
 }

 .item-axis:hover {
--- a/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
+++ b/core/core-frontend/src/views/chart/components/editor/drag-item/QuotaItem.vue
@ -787,7 +787,7 @@ span {
  width: 100%;

  &.content-active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
  }

  .sub-menu-content--icon {
@ -908,7 +908,7 @@ span {
  }

  .sub-menu-content--icon {
-    color: #3370ff;
+    color: var(--ed-color-primary);
    margin-right: -7px;
  }
  :nth-child(1).ed-icon {
@ -929,7 +929,7 @@ span {
  }

  .sub-menu-content--icon {
-    color: #3370ff;
+    color: var(--ed-color-primary);
    margin-right: -7px !important;
  }
 }
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/Senior.vue
@ -395,7 +395,7 @@ span {
  line-height: 20px;
  color: #a6a6a6 !important;
  &.ed-button {
-    color: #3370ff !important;
+    color: var(--ed-color-primary) !important;
  }
  &.is-disabled {
    color: #5f5f5f !important;
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/AssistLine.vue
@ -324,7 +324,7 @@ span {
  line-height: 20px;
  color: #a6a6a6 !important;
  &.ed-button {
-    color: #3370ff !important;
+    color: var(--ed-color-primary) !important;
  }
  &.is-disabled {
    color: #5f5f5f !important;
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/Threshold.vue
@ -803,7 +803,7 @@ span {
  line-height: 20px;
  color: #a6a6a6 !important;
  &.ed-button {
-    color: #3370ff !important;
+    color: var(--ed-color-primary) !important;
  }
  &.is-disabled {
    color: #5f5f5f !important;
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
@ -544,7 +544,7 @@ span {
 .icon-style {
  width: 14px;
  height: 14px;
-  color: #3370ff;
+  color: var(--ed-color-primary);
 }

 .m-icon-btn {
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/VQueryChartStyle.vue
@ -208,7 +208,7 @@ const { chart } = toRefs(props)
  &.dark {
    color: #a6a6a6;
    &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
      background-color: rgba(51, 112, 255, 0.1);
    }
    &:hover {
@ -217,7 +217,7 @@ const { chart } = toRefs(props)
  }

  &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
    background-color: rgba(51, 112, 255, 0.1);
  }

--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/CustomColorStyleSelect.vue
@ -176,7 +176,7 @@ function onPopoverHide() {
    <template v-if="customColorExtendSettingOpened">
      <div class="custom-color-extend-setting" :class="{ dark: 'dark' === themes }">
        {{ t('chart.custom_case') }}
-        <span style="color: #3370ff; cursor: pointer" @click="resetCustomColor">
+        <span style="color: var(--ed-color-primary); cursor: pointer" @click="resetCustomColor">
          {{ t('chart.reset') }}
        </span>
      </div>
@ -260,8 +260,8 @@ function onPopoverHide() {

  &.active,
  &:hover {
-    border-color: #3370ff;
-    color: #3370ff;
+    border-color: var(--ed-color-primary);
+    color: var(--ed-color-primary);
  }
 }
 .custom-color-extend-setting {
@ -303,7 +303,7 @@ function onPopoverHide() {
        border-color: rgba(51, 112, 255, 0.6);
      }
      &.active {
-        border-color: #3370ff;
+        border-color: var(--ed-color-primary);
      }
    }

--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorNameSelector.vue
@ -276,7 +276,7 @@ defineExpose({ getFormData })
  &.dark {
    color: #a6a6a6;
    &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
      background-color: rgba(51, 112, 255, 0.1);
    }
    &:hover {
@ -285,7 +285,7 @@ defineExpose({ getFormData })
  }

  &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
    background-color: rgba(51, 112, 255, 0.1);
  }

--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/IndicatorValueSelector.vue
@ -576,7 +576,7 @@ defineExpose({ getFormData })
  &.dark {
    color: #a6a6a6;
    &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
      background-color: rgba(51, 112, 255, 0.1);
    }
    &:hover {
@ -585,7 +585,7 @@ defineExpose({ getFormData })
  }

  &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
    background-color: rgba(51, 112, 255, 0.1);
  }

--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/LegendSelector.vue
@ -311,7 +311,7 @@ onMounted(() => {
  &.dark {
    color: #a6a6a6;
    &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
      background-color: rgba(51, 112, 255, 0.1);
    }
    &:hover {
@ -320,7 +320,7 @@ onMounted(() => {
  }

  &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
    background-color: rgba(51, 112, 255, 0.1);
  }

--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/TitleSelector.vue
@ -398,7 +398,7 @@ watch(
  &.dark {
    color: #a6a6a6;
    &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
      background-color: rgba(51, 112, 255, 0.1);
    }
    &:hover {
@ -407,7 +407,7 @@ watch(
  }

  &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
    background-color: rgba(51, 112, 255, 0.1);
  }

--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableCellSelector.vue
@ -255,7 +255,7 @@ onMounted(() => {
  &.dark {
    color: #a6a6a6;
    &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
      background-color: rgba(51, 112, 255, 0.1);
    }
    &:hover {
@ -264,7 +264,7 @@ onMounted(() => {
  }

  &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
    background-color: rgba(51, 112, 255, 0.1);
  }

--- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderSelector.vue
@ -256,7 +256,7 @@ onMounted(() => {
  &.dark {
    color: #a6a6a6;
    &.active {
-      color: #3370ff;
+      color: var(--ed-color-primary);
      background-color: rgba(51, 112, 255, 0.1);
    }
    &:hover {
@ -265,7 +265,7 @@ onMounted(() => {
  }

  &.active {
-    color: #3370ff;
+    color: var(--ed-color-primary);
    background-color: rgba(51, 112, 255, 0.1);
  }

--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@ -2292,7 +2292,7 @@ const onRefreshChange = val => {
      .ed-tabs__item {
        height: 35px;
        line-height: 35px;
-        color: #3370ff;
+        color: var(--ed-color-primary);
        font-family: '阿里巴巴普惠体 3.0 55 Regular L3';
        font-size: 12px;
        font-style: normal;
@ -2460,7 +2460,7 @@ span {
    }
    :deep(.is-active) {
      font-weight: 500;
-      color: #3370ff;
+      color: var(--ed-color-primary);
    }

    :deep(.ed-tabs__nav-scroll) {
@ -2509,7 +2509,7 @@ span {
        position: absolute;
        left: 0px;
        top: 0;
-        background: #3370ff;
+        background: var(--ed-color-primary);
      }
    }

@ -2565,7 +2565,7 @@ span {
    }

    &.sortable-chosen {
-      border: 1px solid #3370ff;
+      border: 1px solid var(--ed-color-primary);
      background: #fff;

      &:hover {
@ -2818,7 +2818,7 @@ span {
      border-radius: 2px;
    }
    :deep(.ed-button:hover) {
-      border: 1px solid #3370ff;
+      border: 1px solid var(--ed-color-primary);
    }
  }

--- a/core/core-frontend/src/views/common/DeResourceArrow.vue
+++ b/core/core-frontend/src/views/common/DeResourceArrow.vue
@ -71,7 +71,7 @@ const handleClick = val => {
  z-index: 10;
  &:hover {
    .ed-icon {
-      color: #3370ff;
+      color: var(--ed-color-primary);
    }
  }
  .ed-icon {
--- a/core/core-frontend/src/views/common/DeResourceTree.vue
+++ b/core/core-frontend/src/views/common/DeResourceTree.vue
@ -542,7 +542,7 @@ defineExpose({
    .custom-icon {
      font-size: 20px;
      &.btn {
-        color: #3370ff;
+        color: var(--ed-color-primary);
      }
      &:hover {
        cursor: pointer;
--- a/core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue
+++ b/core/core-frontend/src/views/dashboard/MobileBackgroundSelector.vue
@ -244,7 +244,7 @@ watch(

      &:hover {
        .ed-icon {
-          color: #3370ff;
+          color: var(--ed-color-primary);
        }
      }
    }
@ -297,7 +297,7 @@ watch(

      &:hover {
        .ed-icon {
-          color: #3370ff;
+          color: var(--ed-color-primary);
        }
      }
    }
--- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
+++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
@ -1,8 +1,9 @@
 <script lang="ts" setup>
 import { ref, onMounted, unref, onBeforeUnmount, computed } from 'vue'
-import eventBus from '@/utils/eventBus'
+import { ElMessage, ElMessageBox } from 'element-plus-secondary'
 import MobileBackgroundSelector from './MobileBackgroundSelector.vue'
-import { ElMessageBox } from 'element-plus-secondary'
+import { snapshotStoreWithOut } from '@/store/modules/data-visualization/snapshot'
+import { canvasSave } from '@/utils/canvasUtils'
 import { useEmitt } from '@/hooks/web/useEmitt'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { getStyle } from '@/utils/style'
@ -12,6 +13,7 @@ const dvMainStore = dvMainStoreWithOut()
 const { componentData, canvasStyleData, canvasViewInfo, dvInfo } = storeToRefs(dvMainStore)
 const mobileLoading = ref(true)
 const emits = defineEmits(['pcMode'])
+const snapshotStore = snapshotStoreWithOut()

 const getComponentStyleDefault = style => {
  return getStyle(style, ['top', 'left', 'width', 'height', 'rotate'])
@ -78,9 +80,16 @@ const hanedleMessage = event => {
      }
    })

-    eventBus.emit('saveFromMobile')
+    saveCanvasWithCheckFromMobile()
  }
 }
+
+const saveCanvasWithCheckFromMobile = () => {
+  snapshotStore.resetStyleChangeTimes()
+  canvasSave(() => {
+    ElMessage.success('保存成功')
+  })
+}
 onMounted(() => {
  window.addEventListener('message', hanedleMessage)
  dvMainStore.setMobileInPc(true)
--- a/core/core-frontend/src/views/login/index.vue
+++ b/core/core-frontend/src/views/login/index.vue
@ -418,7 +418,7 @@ onMounted(() => {
    margin: 20px auto 20px;
    position: relative;
    width: 80px;
-    background: #3370ff;
+    background: var(--ed-color-primary);
    @media only screen and (max-width: 1280px) {
      margin: 20px auto 20px;
    }
--- a/core/core-frontend/src/views/share/share/ShareGrid.vue
+++ b/core/core-frontend/src/views/share/share/ShareGrid.vue
@ -235,7 +235,7 @@ watch(
    margin-right: 12px;
    border-radius: 4px;
    color: #fff;
-    background: #3370ff;
+    background: var(--ed-color-primary);
  }
  .name-star {
    font-size: 15px;
--- a/core/core-frontend/src/views/system/parameter/email/EmailEdit.vue
+++ b/core/core-frontend/src/views/system/parameter/email/EmailEdit.vue
@ -134,7 +134,7 @@ defineExpose({
    padding-left: 16px;

    i {
-      color: #3370ff;
+      color: var(--ed-color-primary);
      font-size: 14.666666030883789px;
    }

--- a/core/core-frontend/src/views/system/parameter/map/Geometry.vue
+++ b/core/core-frontend/src/views/system/parameter/map/Geometry.vue
@ -213,7 +213,7 @@ loadTreeData(true)
        line-height: 24px;
      }
      .add-icon-span {
-        color: #3370ff;
+        color: var(--ed-color-primary);
        height: 20px;
        width: 20px;
        i {
--- a/core/core-frontend/src/views/system/parameter/map/MapSetting.vue
+++ b/core/core-frontend/src/views/system/parameter/map/MapSetting.vue
@ -68,7 +68,7 @@ const selectHandler = (index: number) => {
      }
      .active {
        background: #3370ff1a;
-        color: #3370ff;
+        color: var(--ed-color-primary);
        font-weight: 500;
      }
    }
--- a/core/core-frontend/src/views/template-market/component/CategoryTemplateV2.vue
+++ b/core/core-frontend/src/views/template-market/component/CategoryTemplateV2.vue
@ -93,7 +93,7 @@ const props = defineProps({
    margin: 4px 8px 0 12px;
    width: 2px;
    height: 16px;
-    background: rgba(51, 112, 255, 1);
+    background: var(--ed-color-primary);
    float: left;
  }
  .custom-category {
@ -106,7 +106,7 @@ const props = defineProps({
    float: left;
    font-weight: 500;
    font-size: 16px;
-    color: rgba(51, 112, 255, 1);
+    color: var(--ed-color-primary);
    margin-right: 8px;
  }

--- a/core/core-frontend/src/views/template-market/component/MarketPreview.vue
+++ b/core/core-frontend/src/views/template-market/component/MarketPreview.vue
@ -473,13 +473,13 @@ onMounted(() => {
 }

 .filter-icon-active {
-  border: 1px solid #3370ff;
-  color: #3370ff;
+  border: 1px solid var(--ed-color-primary);
+  color: var(--ed-color-primary);
 }

 .filter-icon-active {
-  border: 1px solid #3370ff;
-  color: #3370ff;
+  border: 1px solid var(--ed-color-primary);
+  color: var(--ed-color-primary);
 }

 .search-area {
--- a/core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue
+++ b/core/core-frontend/src/views/template-market/component/MarketPreviewV2.vue
@ -617,13 +617,13 @@ onMounted(() => {
 }

 .filter-icon-active {
-  border: 1px solid #3370ff;
-  color: #3370ff;
+  border: 1px solid var(--ed-color-primary);
+  color: var(--ed-color-primary);
 }

 .filter-icon-active {
-  border: 1px solid #3370ff;
-  color: #3370ff;
+  border: 1px solid var(--ed-color-primary);
+  color: var(--ed-color-primary);
 }

 .search-area {
--- a/core/core-frontend/src/views/template-market/component/TemplateMarketPreviewItem.vue
+++ b/core/core-frontend/src/views/template-market/component/TemplateMarketPreviewItem.vue
@ -76,7 +76,7 @@ const previewTemplate = () => {
 }

 .template-item-main-active {
-  border: 2px solid #3370ff !important;
+  border: 2px solid var(--ed-color-primary) !important;
 }
 .template-item-img {
  position: absolute;
@ -103,6 +103,6 @@ const previewTemplate = () => {
 }

 .template-item-main:hover {
-  border: solid 1px #3370ff;
+  border: solid 1px var(--ed-color-primary);
 }
 </style>
--- a/core/core-frontend/src/views/template-market/index.vue
+++ b/core/core-frontend/src/views/template-market/index.vue
@ -601,7 +601,7 @@ defineExpose({
    margin: 4px 8px 0 12px;
    width: 2px;
    height: 16px;
-    background: rgba(51, 112, 255, 1);
+    background: var(--ed-color-primary);
    float: left;
  }
  .custom-category {
@ -614,7 +614,7 @@ defineExpose({
    float: left;
    font-weight: 500;
    font-size: 16px;
-    color: rgba(51, 112, 255, 1);
+    color: var(--ed-color-primary);
    margin-right: 8px;
  }

--- a/core/core-frontend/src/views/template/component/DeTemplateItem.vue
+++ b/core/core-frontend/src/views/template/component/DeTemplateItem.vue
@ -81,7 +81,7 @@ const handleCommand = key => {

 <style lang="less">
 .de-card-model-checked {
-  border: 1px solid #3370ff !important;
+  border: 1px solid var(--ed-color-primary) !important;
 }
 .de-card-model-active {
  .custom-item-checkbox {
@ -181,7 +181,7 @@ const handleCommand = key => {
 }

 .icon-screen-new {
-  background: #3370ff;
+  background: var(--ed-color-primary);
  border-radius: 4px;
  color: #fff;
  padding: 3px;
--- a/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
@ -527,7 +527,7 @@ const mousedownDrag = () => {
                      {{ ele.name }}
                    </div>
                    <el-icon
-                      style="color: #3370ff !important"
+                      style="color: var(--ed-color-primary)!important"
                      class="hover-icon"
                      @click.stop="copyInfo(ele.name)"
                    >
@ -563,7 +563,7 @@ const mousedownDrag = () => {
                      <el-table-column :label="t('common.operate')">
                        <template #default="scope">
                          <el-icon
-                            style="color: #3370ff !important"
+                            style="color: var(--ed-color-primary)!important"
                            class="hover-icon"
                            @click.stop="copyInfo(scope.row.originName)"
                          >
--- a/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
@ -996,7 +996,7 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields'])
  padding-right: 12px;

  &:hover {
-    border-color: #3370ff;
+    border-color: var(--ed-color-primary);
  }

  .placeholder {
@ -1021,7 +1021,7 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields'])
    height: 32px;
    left: -1px;
    top: -1px;
-    background: #3370ff;
+    background: var(--ed-color-primary);
    border-radius: 4px 0px 0px 4px;
  }
 }
@ -1038,13 +1038,13 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields'])
  background: #fff;
  cursor: pointer;
  &:hover {
-    border-color: #3370ff;
+    border-color: var(--ed-color-primary);
  }
 }

 .shadow-node {
  border: 1px dashed;
-  border-color: #3370ff;
+  border-color: var(--ed-color-primary);
  background-color: rgba(51, 112, 255, 0.08);
  .ed-icon,
  .tableName {
@ -1057,7 +1057,7 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields'])
 }

 .active-node {
-  border-color: #3370ff;
+  border-color: var(--ed-color-primary);
 }

 .drag-mask {
@ -1080,7 +1080,7 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields'])
 .mask-dataset-none {
  background-color: #e5ebf8;
  border: 1px dashed;
-  border-color: #3370ff;
+  border-color: var(--ed-color-primary);
 }

 .zero {
--- a/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
@ -1911,7 +1911,7 @@ const getDsIconName = data => {
        height: 24px;
        :deep(.ed-input__wrapper) {
          background-color: #050e21;
-          box-shadow: 0 0 0 1px #3370ff;
+          box-shadow: 0 0 0 1px var(--ed-color-primary);
          padding: 0 4px;
        }
        :deep(.ed-input__inner) {
@ -1945,7 +1945,7 @@ const getDsIconName = data => {
        position: absolute;
        left: -1px;
        top: 0;
-        background: #3370ff;
+        background: var(--ed-color-primary);
      }
    }

--- a/core/core-frontend/src/views/visualized/data/dataset/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/index.vue
@ -775,7 +775,7 @@ const getMenuList = (val: boolean) => {

        .custom-icon {
          &.btn {
-            color: #3370ff;
+            color: var(--ed-color-primary);
          }

          &:hover {
--- a/core/core-frontend/src/views/visualized/data/datasource/BaseInfoContent.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/BaseInfoContent.vue
@ -64,7 +64,7 @@ defineExpose({
    .title {
      .ed-icon {
        transform: rotate(90deg);
-        color: #3370ff;
+        color: var(--ed-color-primary);
      }
    }
    overflow: auto;
@ -77,7 +77,7 @@ defineExpose({
    .title {
      .ed-icon {
        transform: rotate(0);
-        color: #3370ff;
+        color: var(--ed-color-primary);
      }
    }
  }
--- a/core/core-frontend/src/views/visualized/data/datasource/SheetTabs.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/SheetTabs.vue
@ -120,7 +120,7 @@ const nextClick = () => {
      }

      &:not(.disabled):hover {
-        color: #3370ff;
+        color: var(--ed-color-primary);
      }

      & + .ed-icon {
@ -140,7 +140,7 @@ const nextClick = () => {
    max-width: 200px;
    border-bottom: 1px solid rgba(31, 35, 41, 0.15);
    &:hover {
-      color: #3370ff;
+      color: var(--ed-color-primary);
    }

    .ellipsis {
@ -180,7 +180,7 @@ const nextClick = () => {
  }
  .active {
    box-shadow: 0px -1px 0px 0px #f5f6f7 inset;
-    color: #3370ff;
+    color: var(--ed-color-primary);
    border: 1px solid rgba(31, 35, 41, 0.15);
    border-bottom: none;
    border-top-left-radius: 4px;
--- a/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/ApiHttpRequestDraw.vue
@ -646,7 +646,7 @@ defineExpose({
      background-color: transparent;
      .step-icon {
        .icon {
-          background: #3370ff;
+          background: var(--ed-color-primary);
        }
      }
    }
@ -655,7 +655,7 @@ defineExpose({
      background-color: transparent;
      .step-icon {
        .icon {
-          border: 1px solid #3370ff;
+          border: 1px solid var(--ed-color-primary);
        }
      }
    }
@ -750,14 +750,14 @@ defineExpose({
    &.active {
      .ed-icon {
        transform: rotate(90deg);
-        color: #3370ff;
+        color: var(--ed-color-primary);
      }
    }

    &.deactivate {
      .ed-icon {
        transform: rotate(0);
-        color: #3370ff;
+        color: var(--ed-color-primary);
      }
    }
  }
--- a/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
@ -977,7 +977,7 @@ defineExpose({
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
-    color: #3370ff;
+    color: var(--ed-color-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
@ -1056,7 +1056,7 @@ defineExpose({
          left: 0;
          top: 50%;
          transform: translateY(-50%);
-          border: 1px solid #3370ff;
+          border: 1px solid var(--ed-color-primary);
          border-radius: 50%;
        }

@ -1066,7 +1066,7 @@ defineExpose({

        &.active::before {
          border: none;
-          background: #3370ff;
+          background: var(--ed-color-primary);
        }
      }
    }
@ -1100,7 +1100,7 @@ defineExpose({
  cursor: pointer;

  &:hover {
-    border-color: #3370ff;
+    border-color: var(--ed-color-primary);
  }
  .name {
    font-size: 16px;
--- a/core/core-frontend/src/views/visualized/data/datasource/form/index.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/index.vue
@ -723,7 +723,7 @@ defineExpose({
      background-color: transparent;
      .step-icon {
        .icon {
-          background: #3370ff;
+          background: var(--ed-color-primary);
        }
      }
    }
@ -732,7 +732,7 @@ defineExpose({
      background-color: transparent;
      .step-icon {
        .icon {
-          border: 1px solid #3370ff;
+          border: 1px solid var(--ed-color-primary);
        }
      }
    }
--- a/core/core-frontend/src/views/visualized/data/datasource/index.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/index.vue
@ -1456,7 +1456,7 @@ const getMenuList = (val: boolean) => {

        .custom-icon {
          &.btn {
-            color: #3370ff;
+            color: var(--ed-color-primary);
          }

          &:hover {
@ -1595,7 +1595,7 @@ const getMenuList = (val: boolean) => {
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
-    color: #3370ff;
+    color: var(--ed-color-primary);
    cursor: pointer;
    margin-top: 16px;
    display: inline-flex;
--- a/core/core-frontend/src/views/workbranch/JumpLinkageBack.vue
+++ b/core/core-frontend/src/views/workbranch/JumpLinkageBack.vue
@ -273,7 +273,7 @@ const handleCheckedFieldsChange = (value: string[]) => {
        color: #1f2329;

        .main-color {
-          color: #3370ff;
+          color: var(--ed-color-primary);
        }
      }
    }
--- a/core/core-frontend/src/views/workbranch/ShortcutTable.vue
+++ b/core/core-frontend/src/views/workbranch/ShortcutTable.vue
@ -393,7 +393,7 @@ const getEmptyDesc = (): string => {
    &:hover,
    &:active,
    &:focus {
-      border-color: #3370ff;
+      border-color: var(--ed-color-primary);
      background-color: #fff;
    }
  }
--- a/core/core-frontend/src/views/workbranch/index.vue
+++ b/core/core-frontend/src/views/workbranch/index.vue
@ -404,7 +404,7 @@ initMarketTemplate()
  .info-quick-creation {
    width: 360px;
    .main-color {
-      background: #3370ff;
+      background: var(--ed-color-primary);
      width: 32px;
      height: 32px;
    }