From 277cd64c9902aaf996ba937dfe1c90df038d9b4f Mon Sep 17 00:00:00 2001 From: jingna <1264204245@qq.com> Date: Wed, 23 Apr 2025 18:15:30 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../data-visualization/DvToolbar.vue | 15 +++--- .../components/visualization/DvSidebar.vue | 22 +++++++- .../components/dialog/LineThresholdEdit.vue | 4 +- .../components/dialog/TableThresholdEdit.vue | 35 ++++++++++-- .../components/dialog/TextThresholdEdit.vue | 53 +++++++++++++++++-- .../table/TableHeaderGroupConfig.vue | 9 ++++ .../components/table/TableHeaderSelector.vue | 4 +- .../components/editor/filter/FilterTree.vue | 4 +- .../filter/auth-tree-chart/AuthTree.vue | 13 +++-- .../filter/auth-tree-chart/FilterFiled.vue | 23 ++++---- .../views/chart/components/editor/index.vue | 2 +- .../src/views/common/DeResourceTree.vue | 4 +- .../src/views/common/MultiplexingCanvas.vue | 5 +- .../views/data-visualization/PreviewShow.vue | 2 +- 14 files changed, 153 insertions(+), 42 deletions(-) diff --git a/core/core-frontend/src/components/data-visualization/DvToolbar.vue b/core/core-frontend/src/components/data-visualization/DvToolbar.vue index 98fd268..4acc3ac 100644 --- a/core/core-frontend/src/components/data-visualization/DvToolbar.vue +++ b/core/core-frontend/src/components/data-visualization/DvToolbar.vue @@ -655,18 +655,21 @@ const fullScreenPreview = () => { background-color: transparent; &:hover, &:focus { - background-color: #121a2c; - border-color: #595f6b; + background-color: transparent; + border-color: rgba(255, 255, 255, 0.3); } &:active { - border-color: #616774; - background-color: #1e2637; + border-color: rgba(255, 255, 255, 0.3); + background-color: transparent; } } - +:deep(.ed-button--primary){ + background: #0089ff; + border: 1px solid #0089ff; +} .divider { - background: #ffffff4d; + background: #ffffff; width: 1px; height: 18px; margin-right: 20px; diff --git a/core/core-frontend/src/components/visualization/DvSidebar.vue b/core/core-frontend/src/components/visualization/DvSidebar.vue index cba2e41..7320a60 100644 --- a/core/core-frontend/src/components/visualization/DvSidebar.vue +++ b/core/core-frontend/src/components/visualization/DvSidebar.vue @@ -173,7 +173,7 @@ const menuOpt = optName => { :id="'attr-slide-component-name' + slideIndex" v-if="!canvasCollapse[sideName]" class="name-area-attr" - style="max-width: 180px; text-overflow: ellipsis; white-space: nowrap" + style="max-width: 180px; text-overflow: ellipsis; white-space: nowrap;" :style="{ width: componentNameEdit ? '300px' : 'auto' }" :class="{ 'component-name-dark': themeInfo === 'dark' }" @dblclick="editComponentName" @@ -191,7 +191,7 @@ const menuOpt = optName => { @@ -366,6 +366,7 @@ const menuOpt = optName => { overflow: hidden; cursor: pointer; display: flex; + align-items: center; input { position: absolute; left: 0; @@ -391,5 +392,22 @@ const menuOpt = optName => { padding: 0 4px; height: 100%; } + .ed-icon{ + + } +} + + + diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/LineThresholdEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/LineThresholdEdit.vue index 92379fd..b0a414e 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/LineThresholdEdit.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/LineThresholdEdit.vue @@ -300,7 +300,7 @@ init() :style="{ float: 'right' }" @click="removeThreshold(fieldIndex)" > - + @@ -440,7 +440,7 @@ init() text @click="removeCondition(fieldItem, index)" > - + diff --git 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 index 8dc6fb5..51f88e2 100644 --- 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 @@ -428,7 +428,7 @@ init() :style="{ float: 'right' }" @click="removeThreshold(fieldIndex)" > - + @@ -436,7 +436,7 @@ init() - + - + @@ -811,7 +811,7 @@ init() border-radius: 4px; padding: 10px 16px; margin-top: 10px; - background: #f5f6f7; + background:#333333; } .line-item { @@ -879,7 +879,7 @@ span { .tip { font-size: 12px; - background: #d6e2ff; + background: #333333; border-radius: 4px; padding: 10px 20px; display: flex; @@ -914,4 +914,29 @@ span { justify-content: flex-start; padding: 0 11px; } +:deep(.ed-input__wrapper){ + background-color: #252424 ; + box-shadow: 0 0 0 1px #5f5f5f inset; +} +:deep(.ed-input__inner){ + color: #fff; +} +:deep(.ed-select-dropdown__item){ + color: #ffffff !important; +} +:deep(.ed-select-dropdown__item.hover, .ed-select-dropdown__item:hover){ + background: rgb(61,61,61) !important; +} +.ed-select-dropdown__item{ + color: #ffffff; +} +.ed-select-dropdown__item.hover, .ed-select-dropdown__item:hover{ + background: rgb(61,61,61); +} +.ed-select-dropdown__item.selected{ + color: #0089ff; +} +:deep(.ed-color-picker__trigger){ + border: 1px solid #5f5f5f ; +} diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue index a6a60a0..85cb46f 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TextThresholdEdit.vue @@ -166,7 +166,7 @@ init() -
+
{{ t('chart.textColor') }}
@@ -214,7 +214,7 @@ init() .line-item { width: 100%; border-radius: 4px; - border: 1px solid #dcdfe6; + border: 1px solid #363636; padding: 4px 14px; margin-bottom: 10px; display: flex; @@ -267,7 +267,7 @@ span { } .color-title { - color: #646a73; + color: #ffffff; font-size: 14px; font-style: normal; font-weight: 400; @@ -282,4 +282,47 @@ span { font-size: 12px; } } + +.circle-button{ + background: rgb(61,61,61); + color: #fff; + border: 1px solid rgb(61,61,61); +} +.circle-buttons{ + background: transparent; + border: none; +} +:deep(.ed-input__wrapper){ + background-color: #292929; + box-shadow: 0 0 0 1px #5f5f5f inset; +} +:deep(.ed-color-picker__trigger){ +border-color: #5f5f5f; +} +:deep(.ed-input__inner){ + color: #fff; +} +:deep(.ed-input-number__decrease){ +background-color: #434343 !important; +color:#ffffff; +} +:deep(.ed-input-number__increase){ + background-color: #434343 !important; + color:#ffffff; +} +:deep(.ed-input-number.is-controls-right .ed-input-number__increase){ + border-bottom: 1px solid #5f5f5f; + border-left: 1px solid #5f5f5f; +} +:deep(.ed-input-number.is-controls-right .ed-input-number__decrease){ + border-left: 1px solid #5f5f5f; +} +.ed-select-group__wrap:not(:last-of-type)::after{ + background: #5f5f5f; +} + \ No newline at end of file diff --git a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderGroupConfig.vue b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderGroupConfig.vue index c87c695..6493c96 100644 --- a/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderGroupConfig.vue +++ b/core/core-frontend/src/views/chart/components/editor/editor-style/components/table/TableHeaderGroupConfig.vue @@ -556,5 +556,14 @@ class GroupMenu extends BaseTooltip { .button-group { display: flex; justify-content: end; + .ed-button{ + color: #F2F4F5; + background-color: #212121; + border: 1px solid #434343; + } + .ed-button--primary{ + background-color:#0089FF; + border: 1px solid #0089FF; + } } diff --git 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 index 0a6f449..0cc7704 100644 --- 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 @@ -899,8 +899,8 @@ onMounted(() => { .table-header-group-config-dialog { .ed-dialog__header, .ed-dialog__body { - color: #a6a6a6; - background-color: #1a1a1a; + color: #ffffff; + background-color: rgb(33,33,33); margin-right: 0; } } diff --git a/core/core-frontend/src/views/chart/components/editor/filter/FilterTree.vue b/core/core-frontend/src/views/chart/components/editor/filter/FilterTree.vue index b89920c..e8bdd5f 100644 --- a/core/core-frontend/src/views/chart/components/editor/filter/FilterTree.vue +++ b/core/core-frontend/src/views/chart/components/editor/filter/FilterTree.vue @@ -107,7 +107,7 @@ defineExpose({ width: 100%; padding: 16px; border-radius: 4px; - border: 1px solid var(--deBorderBase, #595f6b); + border: 1px solid var(--deBorderBase, #333333); overflow: auto; max-height: 500px; .content { @@ -118,7 +118,7 @@ defineExpose({ .ed-button.is-secondary{ color: #F2F4F5; background-color: #212121; - border: 1px solid #434343; + border: 1px solid #363636; } .ed-button--primary{ background-color:#0089FF; diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/AuthTree.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/AuthTree.vue index 9440381..435f3de 100644 --- a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/AuthTree.vue +++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/AuthTree.vue @@ -173,7 +173,7 @@ const del = (index, child) => { background-color: #212121; border:1px solid #434343; color: #F2F4F5; - border-radius: 2px; + // border-radius: 2px; .mrg-title { text-align: left; box-sizing: border-box; @@ -187,6 +187,10 @@ const del = (index, child) => { } &:hover { + .operate-title{ + border-right: none; + } + .operate-icon { display: inline-block; } @@ -202,10 +206,12 @@ const del = (index, child) => { width: 40px; height: 28px; line-height: 28px; - background-color: #f8f8fa; + background-color: #212121; z-index: 1; display: none; - + border-right: 1px solid #434343; + border-top: 1px solid #434343; + border-bottom: 1px solid #434343; i { font-size: 12px; font-style: normal; @@ -214,6 +220,7 @@ const del = (index, child) => { cursor: pointer; position: relative; z-index: 10; + color: #fff; } } } diff --git a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/FilterFiled.vue b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/FilterFiled.vue index d99c6af..37f6ff6 100644 --- a/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/FilterFiled.vue +++ b/core/core-frontend/src/views/chart/components/editor/filter/auth-tree-chart/FilterFiled.vue @@ -734,7 +734,7 @@ const emits = defineEmits(['update:item', 'del']) .filed-title { word-wrap: break-word; line-height: 28px; - color: #7e7e7e; + color: #fff; font-size: 14px; white-space: nowrap; box-sizing: border-box; @@ -748,6 +748,7 @@ const emits = defineEmits(['update:item', 'del']) font-size: 14px; margin: 0 10px; cursor: pointer; + color: #ffffff; } .ed-input { @@ -845,8 +846,8 @@ const emits = defineEmits(['update:item', 'del']) } :deep(.ed-input__wrapper) { - background-color: #f8f8fa; - border: none; + background-color: #212121; + border: 1px solid #5f5f5f; border-radius: 0; box-shadow: none; height: 26px; @@ -878,7 +879,7 @@ const emits = defineEmits(['update:item', 'del']) } } .filed:hover { - background-color: #e9eaef; + background-color: rgb(61,61,61); :deep(.ed-input-number__decrease), :deep(.ed-input-number__increase) { display: flex; @@ -935,10 +936,10 @@ const emits = defineEmits(['update:item', 'del']) width: 100%; height: 28px; padding: 4px 7px; - color: rgba(0, 0, 0, 0.65); + color: #fff; font-size: 14px; line-height: 28px; - background-color: #fff; + // background-color: #212121; background-image: none; transition: all 0.3s; touch-action: manipulation; @@ -952,9 +953,10 @@ const emits = defineEmits(['update:item', 'del']) .ed-input__wrapper { box-shadow: none; - border-bottom: 1px solid #e5e5e5; + border-bottom: 1px solid #5f5f5f; + background-color: transparent; &:focus { - box-shadow: 0 0 0 2px rgb(46 116 255 / 20%); + box-shadow: 0 0 0 2px rgb(61,61,61); border-right-width: 1px !important; outline: 0; border-color: none; @@ -966,7 +968,7 @@ const emits = defineEmits(['update:item', 'del']) font-family: var(--de-custom_font, 'PingFang'); box-sizing: border-box; margin: 0; - color: rgba(0, 0, 0, 0.65); + color: #fff; font-size: 14px; font-variant: tabular-nums; line-height: 1.5; @@ -978,6 +980,9 @@ const emits = defineEmits(['update:item', 'del']) text-align: start; padding: 0 6px; } + .ed-input__inner{ + color: #fff; + } } .de-el-dropdown-menu-fixed { 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 b08db50..13475de 100644 --- a/core/core-frontend/src/views/chart/components/editor/index.vue +++ b/core/core-frontend/src/views/chart/components/editor/index.vue @@ -4769,7 +4769,7 @@ span { .result-style-dark { :deep(.ed-button) { color: #ffffff; - background-color: var(--ed-color-primary, #3370ff); + background-color: #0089ff !important; border: none; border-radius: 0; } diff --git a/core/core-frontend/src/views/common/DeResourceTree.vue b/core/core-frontend/src/views/common/DeResourceTree.vue index d5a5340..7896776 100644 --- a/core/core-frontend/src/views/common/DeResourceTree.vue +++ b/core/core-frontend/src/views/common/DeResourceTree.vue @@ -940,12 +940,12 @@ background-color: rgb(41, 41, 41); background-color: rgb(61, 61, 61); } .ed-tree--highlight-current .ed-tree-node.is-current>.ed-tree-node__content{ - background-color: rgb(61, 61, 61); + background-color: rgba(0, 137, 255, 0.3); } .ed-tree-node__content.is-menu:hover{ background-color: rgb(61, 61, 61); } .ed-tree-node.is-current.is-menu>:nth-child(1){ - color: #0089ff; + color: #fff; } diff --git a/core/core-frontend/src/views/common/MultiplexingCanvas.vue b/core/core-frontend/src/views/common/MultiplexingCanvas.vue index 8fd3a1b..8762ce8 100644 --- a/core/core-frontend/src/views/common/MultiplexingCanvas.vue +++ b/core/core-frontend/src/views/common/MultiplexingCanvas.vue @@ -173,7 +173,7 @@ defineExpose({ .ed-drawer__footer { height: 64px !important; padding: 0px !important; - box-shadow: 0 -1px 0px #5f5f5f; + box-shadow: 0 -1px 0px #3a3a3a; } .ed-drawer__body { @@ -181,13 +181,14 @@ defineExpose({ } } .ed-select-dropdown__item{ - color: #ffffff ; + color: #ffffff; } .ed-select-dropdown__item.hover, .ed-select-dropdown__item:hover{ background: rgb(61,61,61); } .ed-drawer__header{ color: #fff; + border-bottom: 1px solid #3a3a3a } .ed-drawer__close-btn:hover{ background:rgb(61,61,61) diff --git a/core/core-frontend/src/views/data-visualization/PreviewShow.vue b/core/core-frontend/src/views/data-visualization/PreviewShow.vue index 87fab43..778d7a0 100644 --- a/core/core-frontend/src/views/data-visualization/PreviewShow.vue +++ b/core/core-frontend/src/views/data-visualization/PreviewShow.vue @@ -338,7 +338,7 @@ onBeforeMount(() => { width: 279px; padding: 0; overflow: visible; - border-right: 1px solid #5f5f5f; + border-right: 1px solid #3a3a3a; &.retract { display: none;