From 68d4aa7fac363f077f1e1d5ad614832b506d8e52 Mon Sep 17 00:00:00 2001
From: jingna <1264204245@qq.com>
Date: Mon, 5 May 2025 18:11:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=95=B0=E6=8D=AE=E7=9C=8B=E6=9D=BF=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/dashboard/DbCanvasAttr.vue |   1 +
 .../src/components/dashboard/DbToolbar.vue    |  27 +++-
 .../dashboard-style/ViewSimpleTitle.vue       |   2 +-
 .../pre-subject/SubjectTemplateItem.vue       |  15 +-
 .../components/visualization/DvSidebar.vue    | 148 +++++++++++++++++-
 .../component-group/DragComponent.vue         |   4 +-
 .../component-group/UserViewGroup.vue         |   8 +-
 core/core-frontend/src/style/index.less       |   6 +-
 .../editor/chart-type/ChartType.vue           |   4 +-
 .../editor-style/ChartStyleBatchSet.vue       |   4 +-
 .../views/chart/components/editor/index.vue   | 106 +++++++++++--
 .../src/views/dashboard/MobileConfigPanel.vue |  54 +++++--
 .../src/viewsnew/application/module/index.vue |   6 +-
 .../viewsnew/data-visualization/DvPreview.vue |   1 -
 14 files changed, 328 insertions(+), 58 deletions(-)

diff --git a/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue b/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
index 8d98c98..4149d9c 100644
--- a/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
+++ b/core/core-frontend/src/components/dashboard/DbCanvasAttr.vue
@@ -185,6 +185,7 @@ const saveSelfSubject = () => {
     top: 4px;
     right: 4px;
     font-size: 12px;
+    color: #0089ff;
   }
 }
 
diff --git a/core/core-frontend/src/components/dashboard/DbToolbar.vue b/core/core-frontend/src/components/dashboard/DbToolbar.vue
index f4e67f9..ba92dbd 100644
--- a/core/core-frontend/src/components/dashboard/DbToolbar.vue
+++ b/core/core-frontend/src/components/dashboard/DbToolbar.vue
@@ -696,6 +696,7 @@ const initOpenHandler = newWindow => {
           @click="saveCanvasWithCheck()"
           style="float: right; margin-right: 12px"
           type="primary"
+          class="savebtn"
         >
           {{ t('data_set.save') }}
         </el-button>
@@ -813,10 +814,11 @@ const initOpenHandler = newWindow => {
   height: @top-bar-height;
   white-space: nowrap;
   overflow-x: auto;
-  background: #050e21;
+  background: #252626;
   color: #ffffff;
   display: flex;
   transition: 0.5s;
+  box-shadow: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
   .back-icon {
     margin-left: 20px;
     margin-top: 22px;
@@ -893,16 +895,18 @@ const initOpenHandler = newWindow => {
 .preview-button {
   border-color: rgba(255, 255, 255, 0.3);
   color: #ffffff;
-  background-color: #050e21;
+  // background-color: #050e21;
+  background-color: transparent;
+    border-color: rgba(255, 255, 255, 0.3);
   &:hover,
   &:focus {
-    background-color: #121a2c;
-    border-color: #595f6b;
+    // background-color: #121a2c;
+    // border-color: #595f6b;
   }
 
   &:active {
-    border-color: #616774;
-    background-color: #1e2637;
+    // border-color: #616774;
+    // background-color: #1e2637;
   }
 }
 .custom-normal-button {
@@ -929,4 +933,15 @@ const initOpenHandler = newWindow => {
   font-weight: 400;
   padding-top: 14px;
 }
+.savebtn {
+  background: #0089ff;
+  border: 1px solid #0089ff;
+}
+.ed-button.is-disabled, .ed-button.is-disabled:focus, .ed-button.is-disabled:hover {
+  color: #fff;
+  cursor: not-allowed;
+  background-image: none;
+  background-color: #99b8ff;
+  border-color: #99b8ff;
+}
 </style>
diff --git 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
index d6af32b..dd26046 100644
--- 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
@@ -179,7 +179,7 @@ function setPosition(p: 'left' | 'center' | 'right') {
   font-size: 12px !important;
   font-weight: 400 !important;
   line-height: 20px;
-  color: #646a73 !important;
+  color: #A6A6A6 !important;
 }
 
 :deep(.ed-radio) {
diff --git 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
index acf3c9f..9916d3c 100644
--- 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
@@ -14,7 +14,7 @@
           :src="imgUrlTrans(subjectItem.coverUrl)"
           alt=""
           width="172"
-          height="79"
+          height="77"
         />
         <Icon v-else name="dv-no-img"
           ><dvNoImg class="svg-icon" style="width: 172px; height: 79px"
@@ -130,14 +130,14 @@ onMounted(() => {
   width: 182px;
   height: 116px;
   margin: 4px;
-  border: 1px solid #dee0e3;
+  border: 1px solid #676767;
   border-radius: 5px;
 }
 
 .subject-template:hover {
-  color: deepskyblue;
+  color: #0089ff;
   cursor: pointer;
-  border-color: var(--ed-color-primary-99, rgba(51, 112, 255, 0.6));
+  border-color: #0089ff;
 }
 
 .demonstration {
@@ -159,6 +159,7 @@ onMounted(() => {
   //inset: 0 0 30px;
   box-sizing: border-box;
   background-size: contain;
+  // margin-bottom: 1px;
 }
 
 .vertical-layout > i {
@@ -188,7 +189,7 @@ onMounted(() => {
   overflow: hidden;
   font-size: 12px;
   line-height: 30px;
-  color: #1f2329;
+  color: #fff;
   text-align: left;
   text-overflow: ellipsis;
   white-space: pre;
@@ -220,7 +221,7 @@ onMounted(() => {
 .title-main {
   height: 31px;
   display: flex;
-  border-top: 1px solid #dee0e3;
+  border-top: 1px solid #5f5f5f;
   width: 180px;
 }
 
@@ -245,7 +246,7 @@ onMounted(() => {
 
 .m-custom-icon {
   display: none;
-  color: #646a73;
+  color: #fff;
 
   &:hover {
     background: rgba(31, 35, 41, 0.1) !important;
diff --git a/core/core-frontend/src/components/visualization/DvSidebar.vue b/core/core-frontend/src/components/visualization/DvSidebar.vue
index 7320a60..3c881db 100644
--- a/core/core-frontend/src/components/visualization/DvSidebar.vue
+++ b/core/core-frontend/src/components/visualization/DvSidebar.vue
@@ -257,10 +257,10 @@ const menuOpt = optName => {
 }
 
 .aside-area-light {
-  color: @canvas-main-font-color-light;
-  background-color: #fff;
+  color: #ebebeb;
+  background-color: #1a1a1a;
   :deep(.title) {
-    border-bottom: #d5d6d8 1px solid !important;
+    border-bottom: rgba(255, 255, 255, 0.15) 1px solid !important;
   }
 }
 .dv-aside {
@@ -279,7 +279,7 @@ const menuOpt = optName => {
   .title-light {
     font-size: 14px;
     font-weight: 500;
-    border-bottom: #d5d6d8 1px solid;
+    border-bottom: rgba(255, 255, 255, 0.15) 1px solid;
     height: 45px;
     overflow: hidden;
     white-space: nowrap;
@@ -396,7 +396,6 @@ const menuOpt = optName => {
     
   }
 }
-
 </style>
 <style>
 .ed-popper.is-light {
@@ -410,4 +409,143 @@ const menuOpt = optName => {
   background: rgba(41, 41, 41, 1);
   border: 1px solid #434343;
 }
+.ed-collapse-item.ed-collapse--light .ed-collapse-item__header{
+  background-color: #1a1a1a;
+  color: #fff;
+}
+.ed-collapse-item__header{
+  border-bottom: 1px solid rgba(255,255,255,0.15) !important;
+}
+.ed-collapse-item__wrap{
+  background-color: #292929;
+}
+.ed-collapse-item__wrap .ed-form--default.ed-form--label-top .ed-form-item .ed-form-item__label{
+  color: #a6a6a6;
+}
+.ed-collapse-item__wrap .ed-radio .ed-radio__label{
+  color: #fff;
+}
+.ed-collapse-item__wrap .ed-radio .ed-radio__input.is-checked + .ed-radio__label{
+  color: #0089ff !important;
+}
+.ed-collapse-item__wrap .ed-input.is-disabled .ed-input__wrapper{
+  background-color: #373737;
+  box-shadow: 0 0 0 1px #5f5f5f inset;
+}
+.ed-collapse-item__wrap .ed-input--light .ed-input-group__append .ed-select.ed-select--disabled .ed-input__wrapper {
+  background: #373737 !important;
+  box-shadow: 0 1px 0 0 #5f5f5f inset, 0 -1px 0 0 #5f5f5f inset, -1px 0 0 0 #5f5f5f inset !important;
+}
+.ed-collapse-item__wrap .ed-input--dark .ed-input-group__append .ed-select .ed-input__wrapper {
+  background: #373737 !important;
+  box-shadow: 0 1px 0 0 #5f5f5f inset, 0 -1px 0 0 #5f5f5f inset, -1px 0 0 0 #5f5f5f inset !important;
+}
+.ed-collapse-item__wrap .ed-input-group__append, .ed-input-group__prepend{
+  background: #373737 !important;
+}
+.ed-collapse-item__wrap .ed-input-group--append .ed-input-group__append .ed-select:not(.ed-select--disabled) .ed-input .ed-input__wrapper{
+  box-shadow: 0 1px 0 0 #5f5f5f inset, 0 -1px 0 0 #5f5f5f inset, -1px 0 0 0 #5f5f5f inset !important;
+}
+.ed-collapse-item__wrap .image-hint{
+  color:#757575 !important;
+}
+.ed-collapse-item__wrap .avatar-uploader .ed-upload--picture-card {
+  background: #373737 !important;
+  border: 1px dashed #373737 !important;
+}
+.ed-collapse-item__wrap .indented-container .indented-item.disabled .img-area_light .ed-upload--picture-card .ed-icon {
+  color: #5f5f5f !important;
+}
+.ed-collapse-item__wrap .avatar-uploader .ed-upload--picture-card .ed-icon{
+  color: #ebebeb !important;
+}
+.ed-collapse-item__wrap .ed-input-number__decrease, .ed-input-number__increase{
+  background-color: #434343 !important;
+  color:#ffffff;
+}
+.ed-collapse-item__wrap .ed-input-number.is-controls-right .ed-input-number__increase{
+  border-bottom: 1px solid #5f5f5f !important;
+  border-left: 1px solid #5f5f5f !important;
+}
+.ed-collapse-item__wrap .ed-input-number.is-controls-right .ed-input-number__decrease{
+  border-left: 1px solid #5f5f5f !important;
+}
+.ed-collapse-item__wrap .ed-input.is-disabled .ed-select__prefix--light{
+  border-color: #5f5f5f;
+}
+.ed-collapse-item__wrap .ed-color-picker.is-custom.is-disabled .ed-color-picker__trigger{
+  border-color: #5f5f5f;
+}
+.ed-collapse-item__wrap .ed-select .ed-input.is-disabled:not(.ed-input--dark) .ed-input__wrapper:hover{
+  box-shadow: 0 0 0 1px #5f5f5f;
+}
+.ed-collapse-item__wrap .custom-color-setting-btn{
+  border: 1px solid #5f5f5f !important;
+  color: #fff !important;
+}
+.ed-collapse-item__wrap .ed-form-item__label{
+  color: #A6A6A6 !important;
+}
+.ed-collapse-item__wrap .custom-color-extend-setting{
+  color: #A6A6A6 !important;
+}
+.ed-collapse-item.ed-collapse--light .ed-collapse-item__content{
+  color: #A6A6A6 ;
+}
+.ed-collapse-item__wrap .m-divider{
+  border-color: rgba(233, 236, 241, 0.15) !important;
+}
+.ed-collapse-item__wrap .icon-btn{
+color: #ffffff !important;
+}
+.ed-collapse-item__wrap .icon-btn.active{
+  color: #0089ff !important;
+}
+.ed-collapse-item__wrap .color-button-outer{
+  border-color: rgba(233, 236, 241, 0.15) !important;
+}
+.ed-collapse-item__wrap .text-area{
+  color: #fff !important;
+}
+.ed-collapse-item__wrap .ed-radio__input.is-disabled.is-checked .ed-radio__inner {
+  background-color: #5f5f5f;
+  border: 1px solid #5f5f5f;
+}
+.ed-collapse-item__wrap .ed-radio__input.is-disabled.is-checked .ed-radio__inner::after {
+  background-color: #212121;
+}
+.ed-collapse-item__wrap .ed-radio .ed-radio__input.is-disabled.is-checked + .ed-radio__label {
+  color: #bbbfc4 !important;
+}
+.editor-light .editor-title{
+color: #ebebeb;
+}
+.editor-dark {
+  border-left: solid 1px rgba(235, 235, 235, 0.15) !important;
+}
+.content-area {
+  border-left: solid 1px rgba(235, 235, 235, 0.15) !important;
+}
+.editor-light .dataset-main {
+  border-left: 1px solid rgba(235, 235, 235, 0.15) !important;
+}
+.collapse-title{
+  color: #ebebeb !important;
+}
+.editor-light .ed-tabs__header {
+  border-top: 1px solid  #363636 !important;
+}
+.de-chart-editor .tab-header .ed-tabs__nav-wrap::after{
+  background-color: rgba(235, 235, 235, 0.15) !important;
+}
+.de-chart-editor .tab-header .ed-tabs__item{
+  color: #A6A6A6 !important;
+}
+.de-chart-editor .drag-block-style{
+  border: 1px dashed #5f5f5f !important;
+  background-color: rgba(235, 235, 235, 0.05) !important;
+}
+.editor-light .item-span-style{
+  color: #fff !important;
+}
 </style>
diff --git a/core/core-frontend/src/custom-component/component-group/DragComponent.vue b/core/core-frontend/src/custom-component/component-group/DragComponent.vue
index 24c2c89..00e453f 100644
--- a/core/core-frontend/src/custom-component/component-group/DragComponent.vue
+++ b/core/core-frontend/src/custom-component/component-group/DragComponent.vue
@@ -47,10 +47,10 @@ const { icon, name, label, dragInfo, themes } = toRefs(props)
 <style lang="less" scoped>
 .drag-light {
   :deep(.icon-content) {
-    background-color: #f5f6f7 !important;
+    background-color: #1a1a1a !important;
   }
   :deep(.label-content) {
-    color: #646a73 !important;
+    color: #A6A6A6 !important;
   }
 }
 .drag-component {
diff --git a/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue b/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
index 4159b8c..2e38a49 100644
--- a/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue
@@ -177,13 +177,13 @@ const loadPluginCategory = data => {
     border-left: 1px solid @side-outline-border-color-light!important;
   }
   :deep(.item-top) {
-    background-color: #f5f6f7 !important;
+    background-color: #1a1a1a !important;
   }
   :deep(.ul-custom) {
     color: @chart-change-font-color-light!important;
   }
   :deep(.li-custom) {
-    color: #646a73 !important;
+    color: #a6a6a6 !important;
     &.li-custom-active {
       color: var(--ed-color-primary) !important;
     }
@@ -192,10 +192,10 @@ const loadPluginCategory = data => {
     }
   }
   :deep(.item-bottom) {
-    color: @chart-change-font-color-light!important;
+    color: @chart-change-font-color-light ;
   }
   :deep(.item-top-icon) {
-    color: @chart-change-font-color-light!important;
+    color: @chart-change-font-color-light;
   }
   :deep(.group-title) {
     color: #1f2329;
diff --git a/core/core-frontend/src/style/index.less b/core/core-frontend/src/style/index.less
index 9fe2199..4dc83b0 100644
--- a/core/core-frontend/src/style/index.less
+++ b/core/core-frontend/src/style/index.less
@@ -212,9 +212,9 @@ body {
 
 .custom-popover-light {
   min-width: 50px !important;
-  background: @side-content-background-light !important;
+  background: @side-content-background-light;
   padding: 0px 4px 0 4px !important;
-  border: 1px solid @side-outline-border-color-light !important;
+  border: 1px solid @side-outline-border-color-light;
 }
 
 .custom-row {
@@ -585,7 +585,7 @@ strong {
 
 .preview-content-inner-width-first {
   width: 100%;
-  height: auto;
+  height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
 }
diff --git 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
index d776512..43eb40f 100644
--- 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
@@ -136,10 +136,10 @@ const groupActiveChange = category => {
     color: @chart-change-font-color-light!important;
   }
   :deep(.item-bottom) {
-    color: @chart-change-font-color-light!important;
+    color: @chart-change-font-color-light;
   }
   :deep(.item-top-icon) {
-    color: @chart-change-font-color-light!important;
+    color: @chart-change-font-color-light;
   }
 }
 .group {
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue
index 5068cf3..54792a4 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-style/ChartStyleBatchSet.vue
@@ -258,14 +258,14 @@ const onStyleAttrChange = params => {
     font-weight: 500 !important;
 
     &.is-active {
-      color: #1f2329;
+      color: #ffffff;
     }
 
     .ed-collapse-item__arrow {
       margin: 0 6px 0 8px;
 
       &.is-active {
-        color: #646a73;
+        color: #A6A6A6;
       }
     }
   }
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index 13475de..5ea66dc 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -4111,11 +4111,11 @@ const deleteChartFieldItem = id => {
 }
 
 .editor-light {
-  border-left: solid 1px @side-outline-border-color-light !important;
-  color: @canvas-main-font-color-light!important;
-  background-color: @side-area-background-light!important;
+  border-left: solid 1px @side-outline-border-color-light;
+  color: @canvas-main-font-color-light;
+  background-color: @side-area-background-light;
   :deep(.ed-tabs__header) {
-    border-top: solid 1px @side-outline-border-color-light !important;
+    border-top: solid 1px @side-outline-border-color-light;
   }
   :deep(.drag_main_area) {
     border-top: solid 1px @side-outline-border-color-light !important;
@@ -4130,7 +4130,7 @@ const deleteChartFieldItem = id => {
     border-top: 1px solid @side-outline-border-color-light !important;
   }
   :deep(.dataset-main) {
-    border-left: 1px solid @side-outline-border-color-light !important;
+    border-left: 1px solid @side-outline-border-color-light;
   }
   :deep(input) {
     font-size: 12px;
@@ -4140,14 +4140,14 @@ const deleteChartFieldItem = id => {
     background-color: @side-outline-border-color-light !important;
   }
   :deep(.item-span-style) {
-    color: @canvas-main-font-color-light!important;
+    color: @canvas-main-font-color-light;
   }
 
   :deep(.editor-title) {
-    color: #1f2329 !important;
+    color: #1f2329;
   }
   :deep(.collapse-title) {
-    color: #1f2329 !important;
+    color: #1f2329;
   }
   :deep(.collapse-icon) {
     color: #646a73 !important;
@@ -4214,7 +4214,7 @@ const deleteChartFieldItem = id => {
 
 // editor form 全局样式
 .editor-dark {
-  border-left: solid 1px @main-collapse-border-dark !important;
+  border-left: solid 1px @main-collapse-border-dark;
   .dataset-selector {
     :deep(.ed-input__inner),
     :deep(.ed-input__wrapper),
@@ -4324,14 +4324,14 @@ span {
 
       &.is-active {
         border-bottom-color: var(--ed-collapse-border-color);
-        color: #1f2329;
+        color: #ffffff;
       }
 
       .ed-collapse-item__arrow {
         margin: 0 6px 0 8px;
 
         &.is-active {
-          color: #646a73;
+          color: #A6A6A6;
         }
       }
     }
@@ -4805,6 +4805,7 @@ span {
     height: 40px;
     width: 100%;
     border-radius: 0;
+    background-color: #0089ff;
   }
 
   .switch-chart-dark {
@@ -4828,7 +4829,7 @@ span {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    color: #1f2329;
+    color: #fff;
     font-weight: 500;
 
     &.dark {
@@ -5118,7 +5119,7 @@ span {
 .field-setting {
   position: absolute;
   right: 8px;
-  color: #646a73;
+  color: #a6a6a6;
   &.remove-icon--dark {
     color: #a6a6a6;
   }
@@ -5287,4 +5288,83 @@ span {
 .ed-tree{
   background:transparent
 }
+.ed-button.is-secondary{
+  background: rgba(235, 235, 235, 0.05);
+  border-color: #5f5f5f;
+  color: #CCCCCC;
+}
+.ed-button.is-secondary:focus, .ed-button.is-secondary:hover{
+  background: rgba(235, 235, 235, 0.05);
+}
+.de-chart-editor .result-style-input .result-count-label{
+  color: #fff !important;
+}
+.de-chart-editor .ed-input.is-disabled .ed-input__wrapper {
+  box-shadow: 0 0 0 1px #5f5f5f inset;
+  background-color: #373737;
+}
+.de-chart-editor .ed-input-group--append .ed-input-group__append .ed-select:not(.ed-select--disabled):hover .ed-input__wrapper{
+  box-shadow: 0 1px 0 0 #5f5f5f inset, 0 -1px 0 0 #5f5f5f inset, -1px 0 0 0 #5f5f5f inset !important;
+}
+.de-chart-editor .ed-input-group__append, .ed-input-group__prepend{
+  background: #373737 !important;
+}
+.de-chart-editor .ed-input-group--append .ed-input-group__append .ed-select:not(.ed-select--disabled) .ed-input .ed-input__wrapper{
+  box-shadow: 0 1px 0 0 #5f5f5f inset, 0 -1px 0 0 #5f5f5f inset, -1px 0 0 0 #5f5f5f inset !important;
+}
+.de-chart-editor .view-panel-row .ed-collapse-item__header.is-active{
+  color: #fff !important;
+}
+.de-chart-editor .ed-input-group__append{
+  box-shadow: 0 1px 0 0 #5f5f5f inset, 0 -1px 0 0 #5f5f5f inset, -1px 0 0 0 #5f5f5f inset !important;
+}
+.remark-label{
+  color: #A6A6A6 !important;
+}
+.de-chart-editor .dataset-search-input .ed-input__wrapper{
+  border-bottom: 1px solid hsla(0, 0%, 100%, 0.15) !important;
+  background-color: #1a1a1a !important;
+}
+.de-chart-editor .dataset-search-input .ed-input__inner{
+  background-color: #1a1a1a !important;
+  color: #ffffff !important;
+}
+.de-chart-editor .field-height label{
+  color: #A6A6A6 !important;
+}
+.de-chart-editor .field-height .divider{
+  background-color: rgba(255, 255, 255, 0.15) !important;
+}
+.customDatasetSelect .ed-container .ed-main .ed-tree.dark .ed-tree-node__content:hover{
+  background: rgba(235, 235, 235, 0.1);
+}
+.ed-tree-node__content:hover{
+  background: rgba(235, 235, 235, 0.1);
+}
+.de-chart-editor .field-name{
+  color: #A6A6A6 !important;
+}
+.de-chart-editor .field-search-icon-btn{
+  color: #A6A6A6 !important;
+}
+.right-dimension .item .items:hover{
+  background: rgba(235, 235, 235, 0.1) !important;
+}
+.ed-collapse-item.ed-collapse--light .ed-collapse-item__header .ed-collapse-item__arrow{
+  color: #A6A6A6 !important;
+}
+.ed-input .ed-select__prefix--light{
+  color: #8d9199;
+  border-right: 1px solid #5f5f5f;
+}
+.config-hidden .wrapper-inner-adaptor {
+  background: transparent !important;
+  border-color: #5f5f5f !important;
+}
+.select-to-dashboard .ed-icon{
+  color: #0099ff;
+}
+.config-hidden .wrapper-inner-adaptor:hover{
+  border-color: #0089ff !important;
+}
 </style>
\ No newline at end of file
diff --git a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
index e138dc0..e9a841f 100644
--- a/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
+++ b/core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
@@ -297,7 +297,7 @@ const save = () => {
             <Icon name="icon_pc_outlined"><icon_pc_outlined class="svg-icon" /></Icon>
           </el-icon>
         </el-tooltip>
-        <el-button type="primary" @click="save">保存</el-button>
+        <el-button type="primary" style="background-color: #0089ff;border-color: #0089ff;" @click="save">保存</el-button>
       </div>
     </div>
     <div class="mobile-canvas" :style="mobileStyle" v-if="mobileStyle">
@@ -373,15 +373,14 @@ const save = () => {
   width: 100vw;
   overflow: hidden;
   position: relative;
-  background: #f5f6f7;
 
   .top-bar {
     position: sticky;
     top: 0;
     left: 0;
     z-index: 10;
-    background: #050e21;
-    box-shadow: 0px 2px 4px 0px #1f23291f;
+    background: #252626;
+    box-shadow: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
     height: 64px;
     padding: 0 24px 0 20px;
     display: flex;
@@ -392,6 +391,7 @@ const save = () => {
       display: flex;
       align-items: center;
       .switch-pc {
+        color: #A6A6A6;
         &::after {
           content: '';
           border-radius: 4px;
@@ -504,7 +504,7 @@ const save = () => {
   .mobile-com-list {
     float: right;
     width: 420px;
-    background-color: #fff;
+    background-color: #1a1a1a;
     position: relative;
     border-left: rgba(31, 35, 41, 0.15) 1px solid;
     height: calc(100% - 64px);
@@ -516,11 +516,11 @@ const save = () => {
 
     & > :deep(.ed-tabs) {
       --ed-tabs-header-height: 36px;
-      border-top: 1px solid #1f232926;
+      border-top: 1px solid #363636;
       position: sticky;
       top: 38px;
       left: 0;
-      background: #fff;
+      background: #1a1a1a;
       z-index: 25;
       .ed-tabs__header {
         padding-left: 8px;
@@ -541,7 +541,7 @@ const save = () => {
     }
 
     :deep(.ed-tabs__item):not(.is-active) {
-      color: #646a73;
+      color: #A6A6A6;
     }
 
     .config-mobile-sidebar {
@@ -552,7 +552,8 @@ const save = () => {
       position: sticky;
       top: 0;
       left: 0;
-      background: #fff;
+      background: #1a1a1a;
+      color: #ffffff;
       z-index: 25;
     }
 
@@ -635,4 +636,39 @@ const save = () => {
     width: 90% !important;
   }
 }
+.ed-tabs__nav-wrap::after{
+  background-color: rgba(235, 235, 235, 0.15) !important;
+}
+.ed-checkbox__input.is-disabled .ed-checkbox__inner{
+  background-color: #373737;
+  border-color: #5f5f5f;
+}
+.ed-color-picker.is-custom.is-disabled .ed-color-picker__trigger{
+  border-color: #5f5f5f;
+}
+.mobile-background-selector .avatar-uploader .ed-upload--picture-card {
+  background: #373737 !important;
+  border: 1px dashed #373737 !important;
+}
+.mobile-background-selector .avatar-uploader .ed-upload--picture-card .ed-icon{
+  color: #ebebeb !important;
+}
+.ed-message-box{
+  background: #212121;
+}
+.ed-message-box__content{
+  color: #ffffff;
+}
+.ed-message-box__btns .ed-button--primary{
+  background: #0089ff;
+  border-color: #0089ff;
+}
+.ed-message-box__btns .ed-button.is-secondary{
+  color: #F2F4F5 !important;
+  background-color: #212121 !important;
+  border: 1px solid #434343 !important;
+}
+.custom-popover-light{
+  border: 1px solid#363636 !important;
+}
 </style>
diff --git a/core/core-frontend/src/viewsnew/application/module/index.vue b/core/core-frontend/src/viewsnew/application/module/index.vue
index b6386ed..ed52cd2 100644
--- a/core/core-frontend/src/viewsnew/application/module/index.vue
+++ b/core/core-frontend/src/viewsnew/application/module/index.vue
@@ -6,6 +6,7 @@ import Rightmenu from './Rightmenu/index.vue'
 import { findApplicationById } from "@/api/application/application";
 import { useRouter, useRoute } from 'vue-router'
 import DvPreview from '@/viewsnew/data-visualization/DvPreview.vue'
+import DePreview from '@/components/data-visualization/canvas/DePreview.vue'
 import { initCanvasData, initCanvasDataPrepare, onInitReady } from '@/utils/canvasUtils'
 import { dvMainStoreWithOut } from '@/store/modules/data-visualization/dvMain'
 import { storeToRefs } from 'pinia'
@@ -68,7 +69,7 @@ function getInit() {
 
 const loadCanvasData = (dvId, weight?, ext?) => {
   // const initMethod = props.showPosition === 'multiplexing' ? initCanvasDataPrepare : initCanvasData
-  const initMethod =  initCanvasData
+  const initMethod = initCanvasData
   dataInitState.value = false
   initMethod(
     dvId,
@@ -109,7 +110,6 @@ function handleNodeClick(e){
   loadCanvasData(e.id,9,0)
 }
 onBeforeMount(() => {
- 
     dvMainStore.canvasDataInit()
 })
 </script>
@@ -128,7 +128,7 @@ onBeforeMount(() => {
             :dv-info="state.dvInfo"
             :cur-preview-gap="state.curPreviewGap"
             :download-status="downloadStatus"
-          ></dv-preview>
+          ></dv-preview> 
     </div>
   </div>
 </template>
diff --git a/core/core-frontend/src/viewsnew/data-visualization/DvPreview.vue b/core/core-frontend/src/viewsnew/data-visualization/DvPreview.vue
index 03246b5..ac91e34 100644
--- a/core/core-frontend/src/viewsnew/data-visualization/DvPreview.vue
+++ b/core/core-frontend/src/viewsnew/data-visualization/DvPreview.vue
@@ -41,7 +41,6 @@ const props = defineProps({
     default: false
   }
 })
-console.log(props)
 const restore = () => {
   dePreviewRef.value.restore()
 }