菜单上移下移样式修改

core/core-frontend/src/api/permission/menu.ts

@@ -5,3 +5,8 @@ export const addMenu = data => request.post({ url: '/menuInterface/addMenu', dat
 export const updateMenuById = data => request.post({ url: '/menuInterface/updateMenuById', data }) //修改菜单
 export const deleteMenuById = id => request.post({ url: '/menuInterface/deleteMenuById?id=' + id }) //删除菜单
 export const setModuleId = params => request.post({ url: '/menuInterface/setModuleId',params }) //关联模块
+export const changeOrder = params => request.post({ url: '/menuInterface/changeOrder',params }) //上移下移模块
+export const moveMenu = params => request.post({ url: '/menuInterface/moveMenu',params }) //移动菜单
+
+//192.168.1.20:8100/de2api/menuInterface/moveMenu?menuId=1926935293735411714&targetParentId=1930886238383067138
+// http://192.168.1.20:8100/de2api/menuInterface/changeOrder?menuId=1926935415483473921&direction=down

core/core-frontend/src/components/visualization/DvSidebar.vue

@@ -638,7 +638,7 @@ const onComponentNameChange = () => {
 }
 
 .ed-select-dropdown__item.is-hovering {
-  background: #434343 !important;
+  background: transparent !important;
 }
 
 .ed-select-dropdown__item {
@@ -667,8 +667,9 @@ const onComponentNameChange = () => {
   border:1px solid #636363 !important;
 }
 .ed-select__wrapper.is-disabled{
-  background-color:#434343;
+  background-color:#2f2f2f;
-  box-shadow:0 0 0 1px #787878 inset;
+  box-shadow:none;
+  border: 1px solid #636363;
 }
 .ed-checkbox__input .ed-checkbox__inner:after{
   background: transparent!important;

core/core-frontend/src/components/visualization/LinkJumpSet.vue

@@ -1118,7 +1118,7 @@ defineExpose({
 
 .preview {
   margin-top: 5px;
-  border: 1px solid #e6e6e6;
+  border: 1px solid #434343;
   border-radius: 4px;
   height: 470px !important;
   overflow: hidden;
@@ -1254,11 +1254,11 @@ defineExpose({
   text-overflow: ellipsis;
 
   border-radius: 4px;
-  border: 1px solid #dee0e3;
+  border: 1px solid #434343;
 
-  background: #fff;
+  background: #212121;
 
-  color: var(--neutral-900, #1f2329);
+  color: var(--neutral-900, #ffffff);
   /* 中文/桌面端/正文 14 22 Regular */
   font-family: var(--de-custom_font, 'PingFang');
   font-size: 14px;
@@ -1421,7 +1421,7 @@ span {
 .top-area-value {
   font-weight: 400;
   font-size: 14px;
-  color: #1f2329;
+  color: #ffffff;
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -1492,7 +1492,7 @@ span {
   color: var(--deTextDisable);
 }
 .outer-content-mirror {
-  border: 1px solid #bbbfc4;
+  border: 1px solid #434343;
   border-radius: 4px;
   height: calc(100% - 30px);
   width: 100%;
@@ -1505,13 +1505,13 @@ span {
   font-size: 14px;
   font-style: normal;
   font-weight: 400;
-  color: #1f2329;
+  color: #ffffff;
   display: flex;
   align-items: center;
 }
 
 .outer-content-right {
-  border: 1px solid #bbbfc4;
+  border: 1px solid #434343;
   border-radius: 4px;
   height: calc(100% - 30px);
   width: 100%;
@@ -1578,7 +1578,7 @@ span {
     --ed-tabs-header-height: 36px;
     margin-bottom: 12px;
     position: sticky;
-    background: #fff;
+    background: #212121;
     .ed-tabs__header {
       &::before {
         content: '';
@@ -1587,7 +1587,7 @@ span {
         position: absolute;
         bottom: 0;
         left: 0;
-        background: #1f232926;
+        background: #ffffff;
       }
     }
   }
@@ -1597,7 +1597,7 @@ span {
   }
 
   :deep(.ed-tabs__item):not(.is-active) {
-    color: #646a73;
+    color: #ffffff;
   }
 }
 

core/core-frontend/src/components/visualization/LinkageSet.vue

@@ -883,7 +883,7 @@ span {
 .top-area-value {
   font-weight: 400;
   font-size: 14px;
-  color: #1f2329;
+  color: #ffffff;
   display: flex;
   flex-direction: row;
   align-items: center;

core/core-frontend/src/views/data-visualization/MultiplexPreviewShow.vue

@@ -448,7 +448,7 @@ span {
 .top-area-value {
   font-weight: 400;
   font-size: 14px;
-  color: #1f2329;
+  color: #ffffff;
   display: flex;
   flex-direction: row;
   align-items: center;

core/core-frontend/src/views/visualized/data/dataset/form/CodeMirror.vue

@@ -11,6 +11,7 @@ import {
   keymap
 } from '@codemirror/view'
 import { propTypes } from '@/utils/propTypes'
+import { nextTick } from 'vue'
 
 const props = defineProps({
   domId: propTypes.string.def('editor'),
@@ -24,7 +25,7 @@ const props = defineProps({
 })
 const emits = defineEmits(['change'])
 
-const codeComInit = (doc: string, sqlMode?: boolean) => {
+const codeComInit = async (doc: string, sqlMode?: boolean) => {
   function _optionalChain(ops) {
     let lastAccessLHS = undefined
     let value = ops[0]
@@ -129,6 +130,9 @@ const codeComInit = (doc: string, sqlMode?: boolean) => {
         })
       ]
     : [basicSetup, placeholders, keymap.of([indentWithTab])]
+  // 确保 DOM 渲染完成
+  await nextTick()
+
   return new EditorView({
     doc,
     extensions: extensionsAttach,

core/core-frontend/src/viewsnew/TemplateResource/index.vue

@@ -774,7 +774,7 @@ background: #434343;
 }
 
 .ed-select-dropdown__item.is-hovering {
-  background: #434343 !important;
+  background: transparent !important;
 }
 
 .ed-select-dropdown__item {

core/core-frontend/src/viewsnew/TemplateResource/templateinfo.vue

@@ -538,14 +538,13 @@ function mouseleave() { // 鼠标移出遮罩层
 }
 </style>
 <style>
-.ed-select__wrapper {
-    background-color: #252626 !important;
-    border: 1px solid #434343 !important;
-    box-shadow: none !important;
-}
 
 ::-webkit-scrollbar {
     width: 0px !important;
     height: 0px !important;
 }
+.ed-dialog__header {
+  padding: 0px !important;
+  padding-bottom: 10px !important;
+}
 </style>

core/core-frontend/src/viewsnew/application/SfcEditor/NavbarEditor/Navbar.vue

@@ -114,6 +114,8 @@ onMounted(() => {
   navmenulist.value = props.menuList
   navtitle.value = props.projectName
   userList.value = wsCache.get('Permission-userinfo')
+  checkindex.value = 0
+  menuclick(checkindex.value)
 })
 onBeforeUnmount(() => {
 

core/core-frontend/src/viewsnew/application/menuconfig/index.vue

@@ -4,24 +4,24 @@ import Assocmodule from './assocmodule.vue'
 import Assocmenu from './assocmenu.vue'
 import { findApplicationById } from "@/api/application/application"
 import { useRoute, useRouter } from 'vue-router'
-import { ref, onMounted,reactive,nextTick } from 'vue'
+import { ref, onMounted, reactive, nextTick } from 'vue'
 import menuconfig_treeadd_white from '@/assets/svg/menuconfig_treeadd_white.svg'
 import icon_user_connect_white from '@/assets/svg/user_connect_white.svg'
 import icon_permission_more_white from '@/assets/svg/icon_more-vertical_outlined_white.svg'
-import { ElTree,FormInstance } from 'element-plus'
+import { ElTree, FormInstance } from 'element-plus'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { getMenuTree,addMenu,updateMenuById,deleteMenuById } from '@/api/permission/menu'
+import { getMenuTree, addMenu, updateMenuById, deleteMenuById, changeOrder, moveMenu } from '@/api/permission/menu'
 import type {
   NodeDropType,
 } from 'element-plus/es/components/tree/src/tree.type'
 import type { DragEvents } from 'element-plus/es/components/tree/src/model/useDragNode'
-const projectInfo:any =ref({})
+const projectInfo: any = ref({})
 const route = useRoute()
 const router = useRouter()
-const applicationId:any =ref("")
+const applicationId: any = ref("")
 const filterText = ref('')
 const treeRef = ref<InstanceType<typeof ElTree>>()
-const treeData:any = ref([])
+const treeData: any = ref([])
 const defaultProps = {
   children: 'children',
   label: 'name'
@@ -32,7 +32,7 @@ const currentNodeId = ref(null)
 const preventcombo = ref(false)
 const dialogVisible = ref(false)
 const title = ref('')
-const ruleForm:any = ref({})
+const ruleForm: any = ref({})
 const ruleFormRef = ref<FormInstance>()
 const rules = ref({
   name: [
@@ -49,6 +49,13 @@ const dataInitState = ref(true)
 
 const rightloading = ref(false)
 const moduleinfo = ref({})
+const menudialog = ref(false)
+const moveId = ref('')
+const menuAllData = ref([])
+const selecprops= {
+  children: 'children',
+  label: 'name'
+}
 const handleMouseEnter = (node) => {
   hoverNodeId.value = node.key;
 };
@@ -59,11 +66,11 @@ const submitForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.validate((valid) => {
     if (valid) {
-      if(preventcombo.value){
+      if (preventcombo.value) {
         return
       }
       preventcombo.value = true
-      if(ruleForm.value.id !== ''){
+      if (ruleForm.value.id !== '') {
         updateMenuById(ruleForm.value).then(res => {
           ElMessage({
             type: 'success',
@@ -73,7 +80,7 @@ const submitForm = (formEl: FormInstance | undefined) => {
           preventcombo.value = false
           gettree()
         })
-      }else{
+      } else {
         addMenu(ruleForm.value).then(res => {
           ElMessage({
             type: 'success',
@@ -104,14 +111,14 @@ onMounted(() => {
     gettree()
   }
 })
-function assocclick(data:any){
+function assocclick(data: any) {
   isFormCreate.value = false
   dataInitState.value = false
   assocmenuname.value = data.name
   currentNodeId.value = data.id
-  if(data.module_id !== '' && data.module_id !== undefined){
+  if (data.module_id !== '' && data.module_id !== undefined) {
     assoccurrentid.value = data.module_id
-  }else{
+  } else {
     assoccurrentid.value = ''
   }
   assocdialog.value = true
@@ -121,68 +128,69 @@ function gettree() {
   treeloading.value = true
   const params = {
     appId: applicationId.value,
-    name:'',
+    name: '',
-    isdisplay:''
+    isdisplay: ''
   }
   getMenuTree(params).then(res => {
     treeloading.value = false
     treeData.value = res.data
+    menuAllData.value = res.data
   })
 }
 function querytree() {
   treeloading.value = true
   const params = {
     appId: applicationId.value,
-    name:filterText.value,
+    name: filterText.value,
-    isdisplay:''
+    isdisplay: ''
   }
   getMenuTree(params).then(res => {
     treeloading.value = false
     treeData.value = res.data
   })
 }
-function nodeclick(data:any,node:any){
+function nodeclick(data: any, node: any) {
   moduleinfo.value = {}
   currentNodeId.value = node.key
   showmodule.value = false
   assocdialog.value = false
-  if(data.module_id !== '' && data.module_id !== undefined){
+  if (data.module_id !== '' && data.module_id !== undefined) {
     moduleinfo.value = data
     showmodule.value = true
-  }else{
+  } else {
     showmodule.value = false
   }
 }
-function addtree(){
+function addtree() {
   title.value = '新增菜单'
   ruleForm.value = {
-    id:'',
+    id: '',
-    appId:applicationId.value,
+    appId: applicationId.value,
     name: '',
-    code:'',
+    code: '',
-    parentid:'0',
+    parentid: '0',
-    type:'01'
+    type: '01'
   }
   dialogVisible.value = true;
 }
-function addchilnode(data:any){
+function addchilnode(data: any) {
   title.value = '新增子菜单'
   ruleForm.value = {
-    id:'',
+    id: '',
-    appId:applicationId.value,
+    appId: applicationId.value,
     name: '',
-    code:'',
+    code: '',
-    parentid:data.id,
+    parentid: data.id,
-    type:'01'
+    type: '01'
   }
   dialogVisible.value = true;
 }
-function rename(data:any){
+function rename(data: any) {
   title.value = '重命名'
   ruleForm.value = JSON.parse(JSON.stringify(data))
   dialogVisible.value = true;
 }
-function deltree(data:any){
+function deltree(data: any) {
   ElMessageBox.confirm(
     '确定删除该条信息吗?',
     '提示',
@@ -211,10 +219,53 @@ function handleClose() {
 function assochandleClose() {
   assocdialog.value = false;
 }
-function assocsubmit(){
+function assocsubmit() {
   assocdialog.value = false;
   gettree()
 }
+function ordermenu(data: any, type: any) {
+  const params = {
+    menuId: data.id,
+    direction: type,
+  }
+  changeOrder(params).then(res => {
+    if (res.data.code == '0') {
+      ElMessage.success('操作成功')
+      gettree()
+    }else{
+      ElMessage.success('移动失败')
+    }
+  })
+}
+function movemenu(data: any) {
+  console.log(data)
+  moveId.value = data.id
+  menudialog.value = true
+}
+function movemenusubmit() {
+  if(moveId.value == ''){
+    ElMessage.error('请选择移动位置')
+    return 
+  }
+  const params = {
+    menuId:currentNodeId.value,
+    targetParentId:moveId.value,
+  }
+  moveMenu(params).then(res => {
+    menudialog.value = false
+    if(res.data.code == '0'){
+      menudialog.value = false
+      ElMessage.success('移动成功')
+      gettree()
+    }else{
+      menudialog.value = false
+      ElMessage.error('移动失败')
+    }
+   })
+}
+function menuhandleClose() {
+  menudialog.value = false
+}
 </script>
 
 <template>
@@ -232,28 +283,30 @@ function assocsubmit(){
         </div>
         <el-input v-model="filterText" placeholder="请输入" @blur="querytree" />
         <el-tree v-loading="treeloading" ref="treeRef" :data="treeData" node-key="id" :props="defaultProps"
-            default-expand-all :expand-on-click-node="false" highlight-current
+          default-expand-all :expand-on-click-node="false" highlight-current @node-click="nodeclick"
-            @node-click="nodeclick" style="height: calc(100vh - 210px);margin-top: 10px;overflow: auto;">
+          style="height: calc(100vh - 210px);margin-top: 10px;overflow: auto;">
           <template #default="{ node, data }">
-              <div class="custom-tree-node" @mouseenter="handleMouseEnter(node)"
+            <div class="custom-tree-node" @mouseenter="handleMouseEnter(node)" @mouseleave="handleMouseLeave()">
-                @mouseleave="handleMouseLeave()">
               <div>{{ node.label }}</div>
-                <div v-show="hoverNodeId === node.key" style="display: flex;align-items: center;" >
+              <div v-show="hoverNodeId === node.key" style="display: flex;align-items: center;">
                 <div @click.stop="assocclick(data)">
                   <el-icon style="font-size: 16px;margin-top: 13px;">
-                        <icon_user_connect_white class="svg-icon"/>
+                    <icon_user_connect_white class="svg-icon" />
                   </el-icon>
                 </div>
                 <div style="margin-left: 8px;">
                   <el-popover placement="right" trigger="click">
                     <template #reference>
                       <el-icon style="font-size: 16px;margin-top: 13px;">
-                              <icon_permission_more_white class="svg-icon"/>
+                        <icon_permission_more_white class="svg-icon" />
                       </el-icon>
                     </template>
-                        <div class="menu-item" @click.stop="addchilnode(data)">添加子菜单</div>
+                    <div v-if="node.level < 2" class="menu-item" @click.stop="addchilnode(data)">添加子菜单</div>
                     <div class="menu-item" @click.stop="rename(data)">重命名</div>
                     <div class="menu-item" @click.stop="deltree(data)">删除</div>
+                    <div class="menu-item" @click.stop="ordermenu(data, 'up')">上移</div>
+                    <div class="menu-item" @click.stop="ordermenu(data, 'down')">下移</div>
+                    <div class="menu-item" @click.stop="movemenu(data)">调整到</div>
                   </el-popover>
                 </div>
               </div>
@@ -278,24 +331,36 @@ function assocsubmit(){
         </span>
       </template>
     </el-dialog>
-      <Assocmenu v-if="assocdialog" :assoccurrentid="assoccurrentid" 
+    <Assocmenu v-if="assocdialog" :assoccurrentid="assoccurrentid" :applicationId="applicationId"
-      :applicationId="applicationId" :assocmenuname="assocmenuname" :projectname="projectInfo.name"
+      :assocmenuname="assocmenuname" :projectname="projectInfo.name" :currentNodeId="currentNodeId"
-       :currentNodeId="currentNodeId" @assochandleClose="assochandleClose" @assocsubmit="assocsubmit" />
+      @assochandleClose="assochandleClose" @assocsubmit="assocsubmit" />
+    <el-dialog v-model="menudialog" title="调整菜单位置" width="30%" :before-close="menuhandleClose">
+      <el-tree-select v-model="moveId" node-key="id" highlight-current :data="menuAllData" :props="selecprops"
+       check-strictly :render-after-expand="false" style="width: 100%" />
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="menuhandleClose">取消</el-button>
+          <el-button type="primary" @click="movemenusubmit()">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
   </div>
 </template>
 
 <style lang="less" scoped>
-.permission-box{
+.permission-box {
-   background: rgb(21,21,21);
+  background: rgb(21, 21, 21);
   height: calc(100vh - 60px);
   display: flex;
-   .permission-leftbox{
+
+  .permission-leftbox {
     width: 260px;
     height: 100%;
     border-right: 1px solid #4f5052;
-      background: rgb(37,38,38);
+    background: rgb(37, 38, 38);
     padding: 10px;
-      .permission-leftbox-title{
+
+    .permission-leftbox-title {
       color: #F2F4F5;
       display: flex;
       align-items: center;
@@ -308,36 +373,43 @@ function assocsubmit(){
       margin-bottom: 10px;
     }
   }
-   .permission-rightbox{
+
+  .permission-rightbox {
     width: calc(100% - 260px);
     height: calc(100vh - 75px);
     padding: 13px;
     overflow: auto;
   }
 }
-.menu-item{
+
+.menu-item {
   height: 30px;
   line-height: 30px;
-  font-size:14px;
+  font-size: 14px;
   background: rgba(41, 41, 41, 1);
   padding-left: 20px;
   cursor: pointer;
 }
-.menu-item:hover{
+
+.menu-item:hover {
   background: #434343;
 }
-.assocbox{
+
+.assocbox {
   height: calc(100vh - 112px);
   display: flex;
-  .assocbox-left{
+
+  .assocbox-left {
     width: 290px;
     height: 100%;
     border-right: 1px solid #4f5052;
-    :deep(.el-tree-node__content){
+
+    :deep(.el-tree-node__content) {
       padding-left: 5px !important;
     }
   }
-  .assocbox-right{
+
+  .assocbox-right {
     width: calc(100% - 290px);
     overflow: auto;
     height: calc(100% - 15px);
@@ -346,52 +418,63 @@ function assocsubmit(){
     padding-right: 8px;
   }
 }
- :deep( .assocdialog .ed-dialog__body){
+
+:deep(.assocdialog .ed-dialog__body) {
   padding: 0px 0px;
-  }
+}
-  :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
+
+:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
   background: #409eff;
   color: #ffffff;
-  }
+}
-  :deep(.el-tree){
+
-    background:transparent;
+:deep(.el-tree) {
+  background: transparent;
   color: #ffffff;
   font-size: 14px;
-   }
+}
-   :deep(.el-tree-node__content){
+
+:deep(.el-tree-node__content) {
   height: 40px;
   line-height: 40px;
-  }
+}
-  :deep(.el-tree-node__content:hover){
+
-    background: rgba(61,158, 255, 0.1);
+:deep(.el-tree-node__content:hover) {
+  background: rgba(61, 158, 255, 0.1);
   color: #0089FF;
-  }
+}
-  :deep(.custom-tree-node){
+
+:deep(.custom-tree-node) {
   flex: 1;
   display: flex;
   align-items: center;
   justify-content: space-between;
   font-size: 14px;
   padding-right: 8px;
-  }
+}
-  :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
+
+:deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content) {
   background: #409eff;
   color: #ffffff;
-  }
+}
-  :deep(.el-tree-node:focus>.el-tree-node__content){
+
-    background:rgb(37,38,38);
+:deep(.el-tree-node:focus>.el-tree-node__content) {
+  background: rgb(37, 38, 38);
   color: #ffffff;
-  }
+}
-  :deep(.ed-popover.ed-popper){
+
+:deep(.ed-popover.ed-popper) {
   padding: 10px 0px !important;
-  }
+}
-  :deep(.el-text){
+
+:deep(.el-text) {
   color: #ffffff;
-  }
+}
-  .keywordsClass{
+
-    margin-left:10px;
+.keywordsClass {
+  margin-left: 10px;
   margin-top: 10px;
-    width: calc(100% - 20px) ;
+  width: calc(100% - 20px);
   height: 40px;
   background: inherit;
   background-color: rgba(37, 38, 38, 1);
@@ -400,17 +483,19 @@ function assocsubmit(){
   border-style: solid;
   border-color: rgba(51, 51, 51, 1);
   border-radius: 4px;
-    :deep(.ed-input__wrapper){
+
+  :deep(.ed-input__wrapper) {
     background-color: rgba(37, 38, 38, 1);
     box-sizing: border-box;
     border-width: 1px;
     border-style: solid;
     border-color: rgba(51, 51, 51, 0);
     border-radius: 4px;
-      box-shadow:none ;
+    box-shadow: none;
     border: none !important;
   }
-    :deep(.ed-input__inner){
+
+  :deep(.ed-input__inner) {
     background-color: rgba(37, 38, 38, 1);
     box-sizing: border-box;
     border-width: 1px;
@@ -419,18 +504,21 @@ function assocsubmit(){
     border-radius: 4px;
     color: #fff;
   }
-    :deep(.ed-input-group__prepend){
+
+  :deep(.ed-input-group__prepend) {
     background-color: rgba(37, 38, 38, 1);
     border: 0;
-      box-shadow:0 0 0 1px transparent ;
+    box-shadow: 0 0 0 1px transparent;
-      padding:0 10px;
+    padding: 0 10px;
     padding-right: 0;
   }
-    :deep(.ed-input__wrapper:hover){
+
+  :deep(.ed-input__wrapper:hover) {
     border: none;
   }
-  }
+}
-  .querybox{
+
+.querybox {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -440,35 +528,42 @@ function assocsubmit(){
   font-style: normal;
   font-size: 16px;
   color: #FFFFFF;
-  }
+}
-  .dvPreviewRef{
+
+.dvPreviewRef {
   position: relative;
-    z-index:1;
+  z-index: 1;
-  }
+}
 </style>
 <style>
-.el-message-box{
+.el-message-box {
   background: #212121;
-  }
+}
-  .el-message-box__content{
+
+.el-message-box__content {
   color: #ffffff;
-  }
+}
-  .el-message-box__title{
+
+.el-message-box__title {
   color: #ffffff;
-  }
+}
-  .el-message-box__btns .el-button{
+
+.el-message-box__btns .el-button {
   color: #F2F4F5;
   background-color: #212121;
   border: 1px solid #434343;
-  }
+}
-  .el-message-box__btns .el-button--primary{
+
+.el-message-box__btns .el-button--primary {
   background: #0089ff;
   border-color: #0089ff;
-  }
+}
-  .ed-form-item__label{
+
+.ed-form-item__label {
   color: #D2D2D2;
-  }
+}
-  .ed-input__wrapper {
+
+.ed-input__wrapper {
   background-color: #252626;
   box-sizing: border-box;
   border-width: 1px;
@@ -477,103 +572,150 @@ function assocsubmit(){
   border-radius: 4px;
   box-shadow: none;
   border: 1px solid #434343;
-  }
+}
-  .ed-form-item.is-error .ed-input__wrapper{
+
+.ed-form-item.is-error .ed-input__wrapper {
   box-shadow: none;
   border: 1px solid #f54a45;
-  }
+}
-  .ed-input__wrapper.is-focus{
+
+.ed-input__wrapper.is-focus {
   box-shadow: none;
   border: 1px solid #0089ff;
-  }
+}
-  .ed-input__wrapper:hover{
+
+.ed-input__wrapper:hover {
   box-shadow: none;
   border: 1px solid #0089ff;
-  }
+}
-  .ed-input__inner{
+
+.ed-input__inner {
   color: #fff;
-  }
+}
-  .ed-button {
+
+.ed-button {
   color: #ffffff;
-    background-color: rgb(54,55,56);
+  background-color: rgb(54, 55, 56);
   border: 1px solid #363636;
-  }
+}
-  .ed-button:focus, .ed-button:hover{
+
+.ed-button:focus,
+.ed-button:hover {
   color: #ffffff;
-    background-color: rgb(54,55,56);
+  background-color: rgb(54, 55, 56);
   border: 1px solid #363636;
-  }
+}
-  .ed-button--primary{
+
+.ed-button--primary {
   background-color: #0089ff;
-    border-color:#0089ff ;
+  border-color: #0089ff;
-  }
+}
-  .ed-button--primary:focus, .ed-button--primary:hover{
+
+.ed-button--primary:focus,
+.ed-button--primary:hover {
   background-color: #0089ff;
-    border-color:#0089ff ;
+  border-color: #0089ff;
-  }
+}
-  .ed-button.is-disabled{
+
+.ed-button.is-disabled {
   color: #949494;
-    background-color: rgb(54,55,56);
+  background-color: rgb(54, 55, 56);
-    border: 1px solid rgb(54,55,56);
+  border: 1px solid rgb(54, 55, 56);
-  }
+}
-  .ed-button.is-disabled, .ed-button.is-disabled:focus, .ed-button.is-disabled:hover{
+
+.ed-button.is-disabled,
+.ed-button.is-disabled:focus,
+.ed-button.is-disabled:hover {
   color: #949494;
-    background-color: rgb(54,55,56);
+  background-color: rgb(54, 55, 56);
-    border: 1px solid rgb(54,55,56);
+  border: 1px solid rgb(54, 55, 56);
-  }
+}
-  .el-table{
+
-    background-color: rgb(33,33,33);
+.el-table {
-  }
+  background-color: rgb(33, 33, 33);
-  .el-table tr{
+}
-    background: rgb(40,40,40);
+
+.el-table tr {
+  background: rgb(40, 40, 40);
   border-color: #434343;
-  }
+}
-  .el-table th.el-table__cell {
+
-    background-color: rgb(40,40,40);
+.el-table th.el-table__cell {
+  background-color: rgb(40, 40, 40);
   border-color: #434343;
-  }
+}
-  .el-table.is-scrolling-none th.el-table-fixed-column--left, .el-table.is-scrolling-none th.el-table-fixed-column--right {
+
-    background-color: rgb(40,40,40);
+.el-table.is-scrolling-none th.el-table-fixed-column--left,
-  }
+.el-table.is-scrolling-none th.el-table-fixed-column--right {
-  .el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before{
+  background-color: rgb(40, 40, 40);
+}
+
+.el-table--border .el-table__inner-wrapper:after,
+.el-table--border:after,
+.el-table--border:before,
+.el-table__inner-wrapper:before {
   background-color: #434343;
-  }
+}
-  .el-table__border-bottom-patch, .el-table__border-left-patch{
+
+.el-table__border-bottom-patch,
+.el-table__border-left-patch {
   background-color: #434343;
-  }
+}
-  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf{
+
+.el-table td.el-table__cell,
+.el-table th.el-table__cell.is-leaf {
   border-color: #434343;
-  }
+}
-  .ed-checkbox__inner{
+
+.ed-checkbox__inner {
   background: transparent;
   border-color: #787878;
-  }
+}
-  .ed-checkbox__input.is-disabled .ed-checkbox__inner{
+
+.ed-checkbox__input.is-disabled .ed-checkbox__inner {
   background: #434343;
   border-color: #787878;
-  }
+}
-  .el-table thead{
+
+.el-table thead {
   color: #E4E4E4;
-  }
+}
-  .el-table .el-table__cell{
+
+.el-table .el-table__cell {
   background: #212121;
   color: #F2F4F5;
-  }
+}
-  .el-table__body-wrapper tr td.el-table-fixed-column--left, .el-table__body-wrapper tr td.el-table-fixed-column--right, .el-table__body-wrapper tr th.el-table-fixed-column--left, .el-table__body-wrapper tr th.el-table-fixed-column--right, .el-table__footer-wrapper tr td.el-table-fixed-column--left, .el-table__footer-wrapper tr td.el-table-fixed-column--right, .el-table__footer-wrapper tr th.el-table-fixed-column--left, .el-table__footer-wrapper tr th.el-table-fixed-column--right, .el-table__header-wrapper tr td.el-table-fixed-column--left, .el-table__header-wrapper tr td.el-table-fixed-column--right, .el-table__header-wrapper tr th.el-table-fixed-column--left, .el-table__header-wrapper tr th.el-table-fixed-column--right{
+
+.el-table__body-wrapper tr td.el-table-fixed-column--left,
+.el-table__body-wrapper tr td.el-table-fixed-column--right,
+.el-table__body-wrapper tr th.el-table-fixed-column--left,
+.el-table__body-wrapper tr th.el-table-fixed-column--right,
+.el-table__footer-wrapper tr td.el-table-fixed-column--left,
+.el-table__footer-wrapper tr td.el-table-fixed-column--right,
+.el-table__footer-wrapper tr th.el-table-fixed-column--left,
+.el-table__footer-wrapper tr th.el-table-fixed-column--right,
+.el-table__header-wrapper tr td.el-table-fixed-column--left,
+.el-table__header-wrapper tr td.el-table-fixed-column--right,
+.el-table__header-wrapper tr th.el-table-fixed-column--left,
+.el-table__header-wrapper tr th.el-table-fixed-column--right {
   background: #212121;
-  }
+}
-  .hover-row > td {
+
-    background-color: rgb(48,48,48) !important;
+.hover-row>td {
-  }
+  background-color: rgb(48, 48, 48) !important;
-  .ed-checkbox__input.is-checked .ed-checkbox__inner {
+}
+
+.ed-checkbox__input.is-checked .ed-checkbox__inner {
   background-color: #409eff;
   border-color: #409eff;
-  }
+}
-  .ed-switch.is-checked .ed-switch__core{
+
+.ed-switch.is-checked .ed-switch__core {
   border-color: #0089ff;
   background-color: #0089ff;
-  }
+}
-  .ed-textarea__inner{
+
+.ed-textarea__inner {
   background-color: #252626;
   box-sizing: border-box;
   border-width: 1px;
@@ -583,55 +725,92 @@ function assocsubmit(){
   box-shadow: none;
   border: 1px solid #434343;
   color: #fff;
-  }
+}
-  .ed-textarea__inner:hover{
+
+.ed-textarea__inner:hover {
   box-shadow: none;
   border: 1px solid #0089ff;
-  }
+}
-  .ed-textarea__inner:focus{
+
+.ed-textarea__inner:focus {
   box-shadow: none;
   border: 1px solid #0089ff;
-  }
+}
-  .ed-input.is-disabled .ed-input__wrapper{
+
+.ed-input.is-disabled .ed-input__wrapper {
   border: 1px solid #434343;
   background: #212121;
   box-shadow: none;
-  }
+}
-  .el-loading-mask{
+
+.el-loading-mask {
   background-color: rgba(41, 41, 41, 0.9)
-  }
+}
-  .ed-popover.ed-popper{
+
+.ed-popover.ed-popper {
   background: rgba(41, 41, 41, 1);
   border: 1px solid #434343;
   color: #fff;
   padding: 10px 0px;
-   }
+}
-   .ed-dialog__header{
+
+.ed-dialog__header {
   padding: 13px 20px;
   border-bottom: 1px solid #333333;
   margin-right: 0px;
-    }
+}
-    .ed-dialog__headerbtn{
+
+.ed-dialog__header {
+  padding: 0px !important;
+  padding-bottom: 10px !important;
+  margin-bottom: 10px!important;
+}
+.ed-dialog__body {
+  background: rgb(33, 33, 33);
+}
+
+.ed-dialog__footer {
+  background: rgb(33, 33, 33);
+}
+
+.ed-dialog__title {
   color: #ffffff;
-      top: 11px !important;
+}
-      right: 15px !important;
+
-    }
+.ed-dialog {
-    .ed-dialog__body{
-      background: rgb(33,33,33);
-    }
-    .ed-dialog__footer{
-      background: rgb(33,33,33);
-    }
-    .ed-dialog__title{
-    color: #ffffff;
-    }
-    .ed-dialog {
   border: 1px solid #5f5f5f;
   border-radius: 4px;
-    background: rgb(33,33,33);
+  background: rgb(33, 33, 33);
-    }
+}
-    .el-tree-node__expand-icon{
-      color: #ffffff
-    }
 
+.el-tree-node__expand-icon {
+  color: #ffffff
+}
+.ed-select__wrapper{
+  background-color: rgba(37, 38, 38, 1) !important;
+  box-shadow: none !important;
+  border: 1px solid #636363 !important;
+  color: #fff !important;
+}
+.ed-select__popper.ed-popper{
+  background: rgb(41, 41, 41) !important;
+  color: #fff;
+  border: 1px solid #434343;
+}
+.ed-select__placeholder{
+  color: #fff;
+}
+.ed-tree{
+  background: rgb(41, 41, 41) !important;
+}
+.ed-select-dropdown__item{
+  color: #fff;
+}
+.ed-tree-node__content:hover{
+  background: #343434;
+}
+.ed-tree--highlight-current .ed-tree-node.is-current>.ed-tree-node__content{
+  background: #343434;
+  color: #f2f4f5;
+}
 </style>

core/core-frontend/src/viewsnew/application/service/dataset/index.vue

@@ -1743,7 +1743,7 @@ border-right: 1px solid rgba(54, 54, 54, 1)
   background: #3f3f3f !important;
 }
 .ed-table th.ed-table__cell:hover{
-  background-color: #282828;
+  background-color: #282828 !important;
 }
 .ed-table.is-scrolling-right th.ed-table-fixed-column--right{
   background-color: #434343 !important;

core/core-frontend/src/viewsnew/application/service/datasource/form/index.vue

@@ -1324,4 +1324,7 @@ defineExpose({
 .ed-step__title.is-process{
   color: #ffffff;
 }
+.ed-input-number.is-controls-right .ed-input-number__decrease [class*=ed-icon], .ed-input-number.is-controls-right .ed-input-number__increase [class*=ed-icon]{
+  color: #ffffff  !important;
+}
 </style>

core/core-frontend/src/viewsnew/application/service/datasource/index.vue

@@ -2651,7 +2651,7 @@ border-right: 1px solid rgba(54, 54, 54, 1);
 }
 
 .ed-select-dropdown__item.is-hovering {
-  background: #393939;
+  background: transparent;
 }
 
 .ed-select-dropdown__item {
@@ -2662,7 +2662,7 @@ border-right: 1px solid rgba(54, 54, 54, 1);
   border-top: 1px solid #434343  !important;
 }
 .ed-table th.ed-table__cell:hover{
-  background-color: #282828;
+  background-color: #282828 !important;
 }
 .ed-dialog__header {
   padding: 0px !important;

core/core-frontend/src/viewsnew/data-visualization/MultiplexPreviewShow.vue

@@ -448,7 +448,7 @@ span {
 .top-area-value {
   font-weight: 400;
   font-size: 14px;
-  color: #1f2329;
+  color: #ffffff;
   display: flex;
   flex-direction: row;
   align-items: center;