fix(仪表板): 过滤器样式优化

core/core-frontend/src/models/chart/chart.d.ts

@@ -26,7 +26,7 @@ declare interface Chart {
   extBubble?: Axis[]
   extLabel?: Axis[]
   extTooltip?: Axis[]
-  customFilter: []
+  customFilter: {}
   senior: CustomSenior
   customAttr: CustomAttr
   customStyle: CustomStyle

core/core-frontend/src/views/chart/components/editor/filter/FilterTree.vue

@@ -4,7 +4,7 @@ import { inject, computed, ref, nextTick, provide } from 'vue'
 import RowAuth from '@/views/visualized/data/dataset/auth-tree/RowAuth.vue'
 
 const emits = defineEmits(['filter-data'])
-const filedList = inject('filedList')
+const filedList = inject('filedList', () => [])
 const rowAuth = ref()
 const dialogVisible = ref(false)
 const computedFiledList = computed(() => {
@@ -47,7 +47,7 @@ const dfsTreeDelete = arr => {
       dfsTreeDelete(ele.subTree.items || [])
     } else {
       if (ele.field) {
-        delete (ele, 'field')
+        delete ele.field
       }
     }
   })

core/core-frontend/src/views/chart/components/editor/index.vue

@@ -367,6 +367,10 @@ const arrowIcon = () => {
   return h(Icon, { name: 'icon_down_outlined-1' })
 }
 
+const isFilterActive = computed(() => {
+  return !!view.value.customFilter?.items?.length
+})
+
 const drillItemChange = () => {
   recordSnapshotInfo('calcData')
   // temp do nothing
@@ -2129,7 +2133,7 @@ const drop = (ev: MouseEvent, type = 'xAxis') => {
                       </div>
                       <div
                         class="tree-btn"
-                        :class="!!view.customFilter.logic && 'active'"
+                        :class="isFilterActive && 'active'"
                         @click="openTreeFilter"
                       >
                         <el-icon>
@@ -3424,6 +3428,7 @@ span {
 
     .tree-btn {
       width: 100%;
+      margin-top: 8px;
       background: #fff;
       height: 32px;
       border-radius: 4px;

core/core-frontend/src/views/chart/components/editor/util/chart.ts

@@ -1425,7 +1425,7 @@ export const BASE_VIEW_CONFIG = {
   extBubble: [],
   extLabel: [],
   extTooltip: [],
-  customFilter: [],
+  customFilter: {},
   customAttr: {
     basicStyle: DEFAULT_BASIC_STYLE,
     misc: DEFAULT_MISC,

core/core-frontend/src/views/visualized/data/dataset/auth-tree/AuthTree.vue

@@ -86,7 +86,7 @@ const del = (index, child) => {
           {{ logic === 'or' ? 'OR' : 'AND' }}
         </span>
         <el-dropdown @command="handleCommand" trigger="click" v-else>
-          <span style="color: rgba(0 0 0 / 65%)" class="mrg-title">
+          <span style="color: rgba(0 0 0 / 65%)" class="mrg-title fir">
             {{ logic === 'or' ? 'OR' : 'AND' }}
             <el-icon>
               <Icon name="icon_down_outlined"></Icon>
@@ -183,7 +183,7 @@ const del = (index, child) => {
       }
 
       .operate-title {
-        .mrg-title {
+        .mrg-title:not(.fir) {
           margin: 0 5px;
         }
       }

core/core-frontend/src/views/visualized/data/dataset/auth-tree/RowAuth.vue

@@ -28,9 +28,9 @@ const svgDashinePath = computed(() => {
 })
 
 const init = expressionTree => {
-  const { logic: lg = 'or', items = [] } = expressionTree
+  const { logic: lg = 'or', items } = expressionTree
   logic.value = lg
-  relationList.value = dfsInit(items)
+  relationList.value = dfsInit(items || [])
 }
 const submit = () => {
   errorMessage.value = ''
@@ -73,7 +73,7 @@ const dfsInit = arr => {
   arr.forEach(ele => {
     const { subTree } = ele
     if (subTree) {
-      const { items, logic } = subTree
+      const { items = [], logic } = subTree
       const child = dfsInit(items)
       elementList.push({ logic, child })
     } else {