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

fix(系统设置): 外观设置漏掉的样式
2024-03-05 10:15:48 +08:00 · 2024-03-05 10:15:48 +08:00 · ad37dfe5ef
commit ad37dfe5ef
parent b046f8599c e71450caf6
38 changed files with 70 additions and 64 deletions
--- a/core/core-frontend/src/assets/svg/icon_assigned_outlined.svg
+++ b/core/core-frontend/src/assets/svg/icon_assigned_outlined.svg
@ -1,9 +1,9 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <g id="icon_assigned_outlined">
 <g id="Union">
-<path d="M10.332 4.33333C10.332 2.49233 8.8387 1 6.9987 1C5.1587 1 3.66536 2.49233 3.66536 4.33333C3.66536 6.17433 5.1587 7.66667 6.9987 7.66667C8.8387 7.66667 10.332 6.17433 10.332 4.33333ZM6.9987 6.33333C5.89536 6.33333 4.9987 5.438 4.9987 4.33333C4.9987 3.22867 5.89536 2.33333 6.9987 2.33333C8.10203 2.33333 8.9987 3.22867 8.9987 4.33333C8.9987 5.438 8.10203 6.33333 6.9987 6.33333Z" fill="#3370FF"/>
-<path d="M2.66536 12.6667C2.66536 12.4363 2.69536 12.213 2.7487 12C3.04536 10.85 4.0887 10 5.33203 10H8.01534C8.19943 10 8.34867 9.85076 8.34867 9.66667V9C8.34867 8.81591 8.19943 8.66667 8.01534 8.66667H5.33203C3.12203 8.66667 1.33203 10.4577 1.33203 12.6667V14C1.33203 14.3683 1.63203 14.6667 1.9987 14.6667H8.01534C8.19943 14.6667 8.34867 14.5174 8.34867 14.3333V13.6667C8.34867 13.4826 8.19943 13.3333 8.01534 13.3333H2.66536V12.6667Z" fill="#3370FF"/>
-<path d="M12.1298 10.3738L13.1087 11.3526H9.66537C9.48127 11.3526 9.33203 11.5019 9.33203 11.686V12.3526C9.33203 12.5367 9.48127 12.686 9.66537 12.686H13.1175L12.1298 13.6736C11.9997 13.8038 11.9997 14.0148 12.1298 14.145L12.6012 14.6164C12.7314 14.7466 12.9425 14.7466 13.0726 14.6164L15.4297 12.2594C15.5598 12.1292 15.5598 11.9182 15.4297 11.788L13.0726 9.43096C12.9425 9.30079 12.7314 9.30079 12.6012 9.43096L12.1298 9.90237C11.9997 10.0325 11.9997 10.2436 12.1298 10.3738Z" fill="#3370FF"/>
+<path d="M10.332 4.33333C10.332 2.49233 8.8387 1 6.9987 1C5.1587 1 3.66536 2.49233 3.66536 4.33333C3.66536 6.17433 5.1587 7.66667 6.9987 7.66667C8.8387 7.66667 10.332 6.17433 10.332 4.33333ZM6.9987 6.33333C5.89536 6.33333 4.9987 5.438 4.9987 4.33333C4.9987 3.22867 5.89536 2.33333 6.9987 2.33333C8.10203 2.33333 8.9987 3.22867 8.9987 4.33333C8.9987 5.438 8.10203 6.33333 6.9987 6.33333Z"/>
+<path d="M2.66536 12.6667C2.66536 12.4363 2.69536 12.213 2.7487 12C3.04536 10.85 4.0887 10 5.33203 10H8.01534C8.19943 10 8.34867 9.85076 8.34867 9.66667V9C8.34867 8.81591 8.19943 8.66667 8.01534 8.66667H5.33203C3.12203 8.66667 1.33203 10.4577 1.33203 12.6667V14C1.33203 14.3683 1.63203 14.6667 1.9987 14.6667H8.01534C8.19943 14.6667 8.34867 14.5174 8.34867 14.3333V13.6667C8.34867 13.4826 8.19943 13.3333 8.01534 13.3333H2.66536V12.6667Z"/>
+<path d="M12.1298 10.3738L13.1087 11.3526H9.66537C9.48127 11.3526 9.33203 11.5019 9.33203 11.686V12.3526C9.33203 12.5367 9.48127 12.686 9.66537 12.686H13.1175L12.1298 13.6736C11.9997 13.8038 11.9997 14.0148 12.1298 14.145L12.6012 14.6164C12.7314 14.7466 12.9425 14.7466 13.0726 14.6164L15.4297 12.2594C15.5598 12.1292 15.5598 11.9182 15.4297 11.788L13.0726 9.43096C12.9425 9.30079 12.7314 9.30079 12.6012 9.43096L12.1298 9.90237C11.9997 10.0325 11.9997 10.2436 12.1298 10.3738Z"/>
 </g>
 </g>
 </svg>
--- a/core/core-frontend/src/components/assist-button/ColorButton.vue
+++ b/core/core-frontend/src/components/assist-button/ColorButton.vue
@ -55,7 +55,7 @@ const colorButtonClick = () => {
    padding-left: 4px;
    padding-top: 4px;
    border-width: 2px;
-    border-color: #3370ff99;
+    border-color: var(--ed-color-primary-99, #3370ff99);
  }
 }
 .color-button-active {
--- a/core/core-frontend/src/components/color-scheme/src/ColorScheme.vue
+++ b/core/core-frontend/src/components/color-scheme/src/ColorScheme.vue
@ -216,7 +216,7 @@ const resetCustomColor = () => {

      &:hover {
        &::after {
-          border-color: #3370ff99;
+          border-color: var(--ed-color-primary-99, #3370ff99);
          display: block;
        }
      }
--- 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
@ -190,7 +190,7 @@ onMounted(() => {
 .hover-icon {
  &.active {
    color: var(--ed-color-primary) !important;
-    background-color: rgba(51, 112, 255, 0.1);
+    background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
  }
  & + & {
    margin-left: 8px;
--- 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
@ -183,7 +183,7 @@ function setPosition(p: 'left' | 'center' | 'right') {
 :deep(.ed-checkbox.is-checked) {
  .ed-checkbox__label {
    .bash-icon {
-      background: rgba(51, 112, 255, 0.1);
+      background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
      border-radius: 4px;
      color: var(--ed-color-primary);
    }
@ -193,7 +193,7 @@ function setPosition(p: 'left' | 'center' | 'right') {
 :deep(.ed-radio.is-checked) {
  .ed-radio__label {
    .bash-icon {
-      background: rgba(51, 112, 255, 0.1);
+      background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
      border-radius: 4px;
    }
  }
@ -239,7 +239,7 @@ function setPosition(p: 'left' | 'center' | 'right') {
    color: #a6a6a6;
    &.active {
      color: var(--ed-color-primary);
-      background-color: rgba(51, 112, 255, 0.1);
+      background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
    }
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
@ -248,7 +248,7 @@ function setPosition(p: 'left' | 'center' | 'right') {

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

  &:hover {
--- 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
@ -132,7 +132,7 @@ onMounted(() => {
 .subject-template:hover {
  color: deepskyblue;
  cursor: pointer;
-  border-color: rgba(51, 112, 255, 0.6);
+  border-color: var(--ed-color-primary-99, rgba(51, 112, 255, 0.6));
 }

 .demonstration {
@ -198,7 +198,7 @@ onMounted(() => {
 .background-selected {
  border: solid 1px var(--ed-color-primary) !important;
  .title-main {
-    background: rgba(51, 112, 255, 0.1);
+    background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
  }
 }

--- a/core/core-frontend/src/components/data-visualization/RealTimeComponentList.vue
+++ b/core/core-frontend/src/components/data-visualization/RealTimeComponentList.vue
@ -407,7 +407,7 @@ const handleContextMenu = e => {
        }
      }
      .activated {
-        background-color: rgba(51, 112, 255, 0.1) !important;
+        background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1)) !important;
        :deep(.component-icon) {
          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
@ -420,7 +420,7 @@ const handleContextMenu = e => {
        }
      }
      .activated {
-        background-color: rgba(51, 112, 255, 0.1) !important;
+        background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1)) !important;
        :deep(.component-icon) {
          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
@ -440,7 +440,7 @@ const handleContextMenu = e => {
        }
      }
      .activated {
-        background-color: rgba(51, 112, 255, 0.1) !important;
+        background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1)) !important;
        :deep(.component-icon) {
          color: var(--ed-color-primary);
        }
--- a/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
+++ b/core/core-frontend/src/components/data-visualization/canvas/Shape.vue
@ -955,7 +955,7 @@ onMounted(() => {
 .shape-edit {
  &:hover {
    cursor: move;
-    outline: 1px solid rgba(51, 112, 255, 0.6);
+    outline: 1px solid var(--ed-color-primary-99, rgba(51, 112, 255, 0.6));
  }
 }

--- a/core/core-frontend/src/components/drawer-filter/src/DrawerEnumFilter.vue
+++ b/core/core-frontend/src/components/drawer-filter/src/DrawerEnumFilter.vue
@ -89,7 +89,7 @@ defineExpose({

    .active,
    .more:hover {
-      background: var(--primary10, rgba(51, 112, 255, 0.1));
+      background: var(--primary10, var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1)));
      color: var(--primaryselect, #0c296e);
    }

--- a/core/core-frontend/src/components/filter-text/src/FilterText.vue
+++ b/core/core-frontend/src/components/filter-text/src/FilterText.vue
@ -94,7 +94,7 @@ watch(
    color: #0c296e;
    font-size: 14px;
    line-height: 22px;
-    background: rgba(51, 112, 255, 0.1);
+    background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
    border-radius: 2px;
    margin: 0;
    margin-right: 8px;
--- a/core/core-frontend/src/components/visualization/LinkJumpSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkJumpSet.vue
@ -874,7 +874,7 @@ defineExpose({

 .item-dimension:hover {
  border: 1px solid var(--blue-500, #3370ff);
-  background: rgba(51, 112, 255, 0.1);
+  background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
 }

 .item-quota {
--- a/core/core-frontend/src/components/visualization/component-background/BoardItem.vue
+++ b/core/core-frontend/src/components/visualization/component-background/BoardItem.vue
@ -44,11 +44,11 @@ const mainIconClass = itemUrl => {
  flex-direction: column;
  align-content: center;
  .selected-active {
-    border: 1px solid rgba(51, 112, 255, 0.6);
+    border: 1px solid var(--ed-color-primary-99, rgba(51, 112, 255, 0.6));
  }
  .icon-area {
    &:hover {
-      border: 1px dashed rgba(51, 112, 255, 0.6);
+      border: 1px dashed var(--ed-color-primary-99, rgba(51, 112, 255, 0.6));
    }
    border-radius: 4px;
    background-color: #f5f6f7;
--- a/core/core-frontend/src/custom-component/common/CommonAttr.vue
+++ b/core/core-frontend/src/custom-component/common/CommonAttr.vue
@ -455,7 +455,7 @@ const stopEvent = e => {
    color: #a6a6a6;
    &.active {
      color: var(--ed-color-primary);
-      background-color: rgba(51, 112, 255, 0.1);
+      background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
    }
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
@ -464,7 +464,7 @@ const stopEvent = e => {

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

  &:hover {
--- a/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
@ -148,7 +148,7 @@ const groupActiveChange = category => {
 }

 .li-custom-active {
-  background: rgba(51, 112, 255, 0.1);
+  background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
  color: var(--ed-color-primary) !important;
  .li-a {
    color: var(--ed-color-primary) !important;
--- a/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
@ -200,7 +200,7 @@ const groupActiveChange = category => {
 }

 .li-custom-active {
-  background: rgba(51, 112, 255, 0.1);
+  background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
  color: var(--ed-color-primary) !important;
  .li-a {
    color: var(--ed-color-primary) !important;
--- a/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
+++ b/core/core-frontend/src/custom-component/v-query/QueryConditionConfiguration.vue
@ -1502,7 +1502,7 @@ defineExpose({
          left: 0;
          width: 100%;
          height: 100%;
-          background: rgba(51, 112, 255, 0.1);
+          background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
          padding: 4px 10px;
          z-index: 5;
        }
--- a/core/core-frontend/src/store/modules/appearance.ts
+++ b/core/core-frontend/src/store/modules/appearance.ts
@ -149,6 +149,9 @@ export const useAppearanceStore = defineStore('appearanceStore', {
            .mix(new colorTree('ffffff'), new colorTree(this.customColor.substr(1)), { value: 15 })
            .toRGB()
        )
+        document.documentElement.style.setProperty('--ed-color-primary-1a', `${this.customColor}1a`)
+        document.documentElement.style.setProperty('--ed-color-primary-33', `${this.customColor}33`)
+        document.documentElement.style.setProperty('--ed-color-primary-99', `${this.customColor}99`)
        document.documentElement.style.setProperty(
          '--ed-color-primary-dark-2',
          colorFunctions
--- a/core/core-frontend/src/style/index.less
+++ b/core/core-frontend/src/style/index.less
@ -78,7 +78,7 @@ body {
  }

  &.active {
-    background: rgba(51, 112, 255, 0.1);
+    background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
    color: var(--ed-color-primary);
  }
 }
@ -198,10 +198,10 @@ body {
 .hover-icon-in-table {
  color: var(--ed-color-primary) !important;
  &[aria-expanded='true'] {
-    background: rgba(51, 112, 255, 0.1);
+    background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
  }
  &:hover {
-    background: rgba(51, 112, 255, 0.1);
+    background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
  }
 }

@ -391,7 +391,6 @@ em {
  --ed-table-row-hover-bg-color: #e8e9e9 !important;
 }

-
 strong {
  font-synthesis: weight;
 }
--- 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
@ -176,7 +176,7 @@ const groupActiveChange = category => {
 }

 .li-custom-active {
-  background: rgba(51, 112, 255, 0.1);
+  background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
  color: var(--ed-color-primary) !important;
  .li-a {
    color: var(--ed-color-primary) !important;
--- 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
@ -525,12 +525,12 @@ onMounted(() => {
    &:not(.is-disabled):hover {
      color: var(--ed-color-primary);
      border-color: transparent;
-      background-color: rgba(51, 112, 255, 0.1);
+      background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
    }
    &:not(.is-disabled):active {
      color: var(--ed-color-primary);
      border-color: transparent;
-      background-color: rgba(51, 112, 255, 0.2);
+      background-color: var(--ed-color-primary-33, rgba(51, 112, 255, 0.2));
    }
  }
 }
--- 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
@ -209,7 +209,7 @@ const { chart } = toRefs(props)
    color: #a6a6a6;
    &.active {
      color: var(--ed-color-primary);
-      background-color: rgba(51, 112, 255, 0.1);
+      background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
    }
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
@ -218,7 +218,7 @@ const { chart } = toRefs(props)

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

  &:hover {
--- 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
@ -300,7 +300,7 @@ function onPopoverHide() {
      }

      &:hover {
-        border-color: rgba(51, 112, 255, 0.6);
+        border-color: var(--ed-color-primary-99, rgba(51, 112, 255, 0.6));
      }
      &.active {
        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
@ -277,7 +277,7 @@ defineExpose({ getFormData })
    color: #a6a6a6;
    &.active {
      color: var(--ed-color-primary);
-      background-color: rgba(51, 112, 255, 0.1);
+      background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
    }
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
@ -286,7 +286,7 @@ defineExpose({ getFormData })

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

  &:hover {
--- 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
@ -577,7 +577,7 @@ defineExpose({ getFormData })
    color: #a6a6a6;
    &.active {
      color: var(--ed-color-primary);
-      background-color: rgba(51, 112, 255, 0.1);
+      background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
    }
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
@ -586,7 +586,7 @@ defineExpose({ getFormData })

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

  &:hover {
--- 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
@ -312,7 +312,7 @@ onMounted(() => {
    color: #a6a6a6;
    &.active {
      color: var(--ed-color-primary);
-      background-color: rgba(51, 112, 255, 0.1);
+      background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
    }
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
@ -321,7 +321,7 @@ onMounted(() => {

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

  &:hover {
--- 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
@ -399,7 +399,7 @@ watch(
    color: #a6a6a6;
    &.active {
      color: var(--ed-color-primary);
-      background-color: rgba(51, 112, 255, 0.1);
+      background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
    }
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
@ -408,7 +408,7 @@ watch(

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

  &:hover {
--- 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
@ -256,7 +256,7 @@ onMounted(() => {
    color: #a6a6a6;
    &.active {
      color: var(--ed-color-primary);
-      background-color: rgba(51, 112, 255, 0.1);
+      background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
    }
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
@ -265,7 +265,7 @@ onMounted(() => {

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

  &:hover {
--- 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
@ -257,7 +257,7 @@ onMounted(() => {
    color: #a6a6a6;
    &.active {
      color: var(--ed-color-primary);
-      background-color: rgba(51, 112, 255, 0.1);
+      background-color: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
    }
    &:hover {
      background-color: rgba(255, 255, 255, 0.1);
@ -266,7 +266,7 @@ onMounted(() => {

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

  &:hover {
--- a/core/core-frontend/src/views/system/modify-pwd/index.vue
+++ b/core/core-frontend/src/views/system/modify-pwd/index.vue
@ -124,9 +124,9 @@ const { t } = useI18n()
        padding: 0 6px;
        align-items: center;
        font-size: 12px;
-        color: #2b5fd9;
+        color: var(--ed-color-primary-dark-2, #2b5fd9);
        border-radius: 2px;
-        background: rgba(51, 112, 255, 0.2);
+        background: var(--ed-color-primary-33, rgba(51, 112, 255, 0.2));
      }
      .info-title {
        .ed-button {
--- a/core/core-frontend/src/views/system/parameter/engine/EngineInfo.vue
+++ b/core/core-frontend/src/views/system/parameter/engine/EngineInfo.vue
@ -175,8 +175,8 @@ refresh()
      color: #646a73;
    }
    &.updating {
-      color: #2b5fd9;
-      background: rgba(51, 112, 255, 0.2);
+      color: var(--ed-color-primary-dark-2, #2b5fd9);
+      background: var(--ed-color-primary-33, rgba(51, 112, 255, 0.2));
    }
    &.pause {
      background: rgba(31, 35, 41, 0.1);
--- a/core/core-frontend/src/views/system/parameter/engine/EngineInfoTemplate.vue
+++ b/core/core-frontend/src/views/system/parameter/engine/EngineInfoTemplate.vue
@ -208,8 +208,8 @@ const validateById = async () => {
      color: #646a73;
    }
    &.updating {
-      color: #2b5fd9;
-      background: rgba(51, 112, 255, 0.2);
+      color: var(--ed-color-primary-dark-2, #2b5fd9);
+      background: var(--ed-color-primary-33, rgba(51, 112, 255, 0.2));
    }
    &.pause {
      background: rgba(31, 35, 41, 0.1);
--- a/core/core-frontend/src/views/system/parameter/map/MapSetting.vue
+++ b/core/core-frontend/src/views/system/parameter/map/MapSetting.vue
@ -67,7 +67,7 @@ const selectHandler = (index: number) => {
        }
      }
      .active {
-        background: #3370ff1a;
+        background: var(--ed-color-primary-1a, #3370ff1a);
        color: var(--ed-color-primary);
        font-weight: 500;
      }
--- a/core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/CalcFieldEdit.vue
@ -469,7 +469,7 @@ initFunction()
    border-radius: 4px;

    .is-active {
-      background: rgba(51, 112, 255, 0.1);
+      background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
    }

    .ed-button:not(.is-active) {
@ -548,7 +548,7 @@ initFunction()

 .item-dimension:hover {
  border-color: var(--ed-color-primary, #3370ff);
-  background: rgba(51, 112, 255, 0.1);
+  background: var(--ed-color-primary-1a, rgba(51, 112, 255, 0.1));
  cursor: pointer;
 }

--- a/core/core-frontend/src/views/visualized/data/datasource/index.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/index.vue
@ -1489,8 +1489,8 @@ const getMenuList = (val: boolean) => {
      color: #646a73;
    }
    &.updating {
-      color: #2b5fd9;
-      background: rgba(51, 112, 255, 0.2);
+      color: var(--ed-color-primary-dark-2, #2b5fd9);
+      background: var(--ed-color-primary-33, rgba(51, 112, 255, 0.2));
    }
    &.pause {
      background: rgba(31, 35, 41, 0.1);
--- a/core/core-frontend/src/views/workbranch/ShortcutTable.vue
+++ b/core/core-frontend/src/views/workbranch/ShortcutTable.vue
@ -416,6 +416,10 @@ const getEmptyDesc = (): string => {
    .name-content {
      display: flex;
      align-items: center;
+
+      .color-panel {
+        background: #3370ff !important;
+      }
      .custom-icon {
        display: none;
      }
--- a/core/core-frontend/src/views/workbranch/index.vue
+++ b/core/core-frontend/src/views/workbranch/index.vue
@ -451,7 +451,7 @@ initMarketTemplate()
            padding: 0 6px;
            align-items: center;
            font-size: 12px;
-            color: #2b5fd9;
+            color: var(--ed-color-primary-dark-2, #2b5fd9);
            border-radius: 2px;
          }
        }
@ -649,12 +649,12 @@ initMarketTemplate()
          }

          &:hover {
-            color: #2b5fd9;
+            color: var(--ed-color-primary-dark-2, #2b5fd9);
          }

          &.active {
-            color: #2b5fd9;
-            background: rgba(51, 112, 255, 0.2);
+            color: var(--ed-color-primary-dark-2, #2b5fd9);
+            background: var(--ed-color-primary-33, rgba(51, 112, 255, 0.2));
          }
        }
      }