perf: 优化层级的 UI 样式,支持点击图标完成功能

src/views/chart/ContentLayers/components/LayersGroupListItem/index.vue

@@ -2,7 +2,7 @@
   <div class="go-content-layers-group-list-item">
     <div
       class="root-item-content"
-      :class="{ hover: hover, select: select, 'list-mini': layerMode === 'text' }"
+      :class="{ hover: hover, select: select, 'list-mini': selectText }"
       @click="clickHandle($event)"
       @mousedown="groupMousedownHandle($event)"
       @mouseenter="mouseenterHandle(componentGroupData)"
@@ -23,8 +23,7 @@
             {{ componentGroupData.chartConfig.title }}
           </n-text>
         </n-ellipsis>
-        <n-icon size="12" class="list-status-icon" :component="LockClosedOutlineIcon" v-if="status.lock" />
+        <layers-status :isGroup="false" :hover="hover" :status="status"></layers-status>
-        <n-icon size="12" class="list-status-icon" :component="EyeOffOutlineIcon" v-if="status.hide" />
       </div>
       <div :class="{ 'select-modal': select }"></div>
     </div>
@@ -34,6 +33,7 @@
         :key="element.id"
         :componentData="element"
         :layer-mode="layerMode"
+        :isGroup="true"
         @mousedown="mousedownHandle($event, element, componentGroupData.id)"
         @mouseenter="mouseenterHandle(element)"
         @mouseleave="mouseleaveHandle(element)"
@@ -53,10 +53,9 @@ import { useContextMenu, divider } from '@/views/chart/hooks/useContextMenu.hook
 import { MenuOptionsItemType } from '@/views/chart/hooks/useContextMenu.hook.d'
 import { CreateComponentType, CreateComponentGroupType } from '@/packages/index.d'
 import { LayersListItem } from '../LayersListItem'
+import { LayersStatus } from '../LayersStatus/index'
+import { LayerModeEnum } from '../../index.d'
 import { icon } from '@/plugins'
-import { LayerModeEnum } from '../../enums'
-
-const { LockClosedOutlineIcon, EyeOffOutlineIcon } = icon.ionicons5
 
 const props = defineProps({
   componentGroupData: {
@@ -64,10 +63,8 @@ const props = defineProps({
     required: true
   },
   layerMode: {
-    type: Object as PropType<LayerModeEnum>,
+    type: String as PropType<LayerModeEnum>,
-    default(): LayerModeEnum {
+    default: LayerModeEnum.THUMBNAIL
-      return 'thumbnail'
-    }
   }
 })
 
@@ -88,6 +85,27 @@ const themeColor = computed(() => {
   return designStore.getAppTheme
 })
 
+// 是否选中文本
+const selectText = computed(() => {
+  return props.layerMode === LayerModeEnum.TEXT
+})
+
+// 计算当前选中目标
+const select = computed(() => {
+  const id = props.componentGroupData.id
+  return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
+})
+
+// 悬浮
+const hover = computed(() => {
+  return props.componentGroupData.id === chartEditStore.getTargetChart.hoverId
+})
+
+// 组件状态 隐藏/锁定
+const status = computed(() => {
+  return props.componentGroupData.status
+})
+
 // 右键
 const optionsHandle = (
   targetList: MenuOptionsItemType[],
@@ -134,21 +152,6 @@ const clickHandle = (e: MouseEvent) => {
   mousedownHandle(e, props.componentGroupData)
 }
 
-// 计算当前选中目标
-const select = computed(() => {
-  const id = props.componentGroupData.id
-  return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
-})
-
-// 悬浮
-const hover = computed(() => {
-  return props.componentGroupData.id === chartEditStore.getTargetChart.hoverId
-})
-
-const status = computed(() => {
-  return props.componentGroupData.status
-})
-
 // 组点击事件
 const groupMousedownHandle = (e: MouseEvent) => {
   onClickOutSide()
@@ -206,10 +209,19 @@ $textSize: 10px;
   margin: 10px 5%;
   margin-bottom: 5px;
   @extend .go-transition-quick;
+  @include deep() {
+    .go-content-layers-list-item {
+      margin-right: 0 !important;
+      width: 95% !important;
+    }
+  }
 
-  :deep(.go-content-layers-list-item) {
+  &:hover {
-    margin-right: 0 !important;
+    @include deep() {
-    width: 95% !important;
+      .icon-item {
+        opacity: 1;
+      }
+    }
   }
 
   .root-item-content {

src/views/chart/ContentLayers/components/LayersListItem/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="go-content-layers-list-item" :class="{ hover: hover, select: select, 'list-mini': layerMode === 'text' }">
+  <div class="go-content-layers-list-item" :class="{ hover: hover, select: select, 'list-mini': selectText }">
     <div class="go-flex-center item-content">
       <n-image
         class="list-img"
@@ -13,61 +13,67 @@
           {{ props.componentData.chartConfig.title }}
         </n-text>
       </n-ellipsis>
-      <n-icon size="12" class="list-status-icon" :component="LockClosedOutlineIcon" v-if="status.lock" />
+      <layers-status :isGroup="isGroup" :hover="hover" :status="status"></layers-status>
-      <n-icon size="12" class="list-status-icon" :component="EyeOffOutlineIcon" v-if="status.hide" />
     </div>
     <div :class="{ 'select-modal': select }"></div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { toRefs, computed, PropType } from 'vue'
+import { computed, PropType } from 'vue'
 import { requireErrorImg } from '@/utils'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
-import { LayerModeEnum } from '../../enums'
+import { LayersStatus } from '../LayersStatus/index'
-
+import { LayerModeEnum } from '../../index.d'
-import { icon } from '@/plugins'
-const { LockClosedOutlineIcon, EyeOffOutlineIcon } = icon.ionicons5
-
-// 全局颜色
-const designStore = useDesignStore()
-const chartEditStore = useChartEditStore()
-
-// 颜色
-const themeColor = computed(() => {
-  return designStore.getAppTheme
-})
 
 const props = defineProps({
   componentData: {
     type: Object,
     required: true
   },
+  isGroup: {
+    type: Boolean,
+    default: false
+  },
   layerMode: {
-    type: Object as PropType<LayerModeEnum>,
+    type: String as PropType<LayerModeEnum>,
-    default(): LayerModeEnum {
+    default: LayerModeEnum.THUMBNAIL
-      return 'thumbnail'
-    }
   }
 })
 
+// 全局颜色
+const designStore = useDesignStore()
+const chartEditStore = useChartEditStore()
+
 // eslint-disable-next-line vue/no-setup-props-destructure
 const { image } = props.componentData.chartConfig
 
+// 颜色
+const themeColor = computed(() => {
+  return designStore.getAppTheme
+})
+
 // 计算当前选中目标
 const select = computed(() => {
   const id = props.componentData.id
   return chartEditStore.getTargetChart.selectId.find((e: string) => e === id)
 })
 
+// 悬浮对象
 const hover = computed(() => {
   return props.componentData.id === chartEditStore.getTargetChart.hoverId
 })
 
+// 组件状态 隐藏/锁定
 const status = computed(() => {
   return props.componentData.status
 })
+
+// 是否选中文本
+const selectText = computed(() => {
+  return props.layerMode === LayerModeEnum.TEXT
+})
 </script>
 
 <style lang="scss" scoped>
@@ -89,6 +95,13 @@ $textSize: 10px;
   &:hover {
     @include fetch-bg-color('background-color4');
   }
+  &:hover {
+    @include deep() {
+      .icon-item {
+        opacity: 1;
+      }
+    }
+  }
 
   .select-modal,
   .item-content {
@@ -126,18 +139,11 @@ $textSize: 10px;
     font-size: $textSize;
   }
 
-  .list-status-icon {
-    margin-left: 3px;
-  }
-
   /* 选中样式 */
   &.select {
     border: 1px solid v-bind('themeColor');
     /* 需要设置最高级，覆盖 hover 的颜色 */
     background-color: rgba(0, 0, 0, 0);
-    // .list-img {
-    //   border: 1px solid v-bind('themeColor') !important;
-    // }
   }
 
   // mini样式

src/views/chart/ContentLayers/components/LayersStatus/index.ts

@@ -0,0 +1,3 @@
+import LayersStatus from './index.vue'
+
+export { LayersStatus }

src/views/chart/ContentLayers/components/LayersStatus/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div v-show="!isGroup">
+    <n-icon
+      class="go-ml-1 icon-item"
+      :class="{ active: status.lock }"
+      size="15"
+      :component="status.lock ? LockClosedOutlineIcon : LockOpenOutlineIcon"
+      @click="lockHandle"
+    />
+    <n-icon
+      class="go-ml-1 icon-item"
+      :class="{ active: status.hide }"
+      size="15"
+      :component="status.hide ? EyeOffOutlineIcon : EyeOutlineIcon"
+      @click="showHandle"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, PropType } from 'vue'
+import { LayerModeEnum } from '../../index.d'
+import { PublicConfigType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { icon } from '@/plugins'
+
+const props = defineProps({
+  isGroup: {
+    type: Boolean,
+    default: false
+  },
+  hover: {
+    type: Boolean,
+    default: false
+  },
+  status: {
+    type: Object as PropType<Pick<PublicConfigType, 'status'>>,
+    default: () => ({
+      lock: false,
+      hide: false
+    })
+  }
+})
+
+const { LockClosedOutlineIcon, LockOpenOutlineIcon, EyeOutlineIcon, EyeOffOutlineIcon } = icon.ionicons5
+const chartEditStore = useChartEditStore()
+
+// 隐藏 / 展示
+const showHandle = (e: MouseEvent) => {
+  e.stopPropagation()
+  props.status.hide ? chartEditStore.setShow() : chartEditStore.setHide()
+}
+
+// 锁定 / 解锁
+const lockHandle = (e: MouseEvent) => {
+  e.stopPropagation()
+  props.status.lock ? chartEditStore.setUnLock() : chartEditStore.setLock()
+}
+</script>
+
+<style lang="scss" scoped>
+$activeColor: #ebcb87;
+
+.icon-item {
+  opacity: 0;
+  padding-top: 5px;
+  &.active,
+  &:hover {
+    color: $activeColor;
+  }
+  &.active {
+    opacity: 1 !important;
+  }
+}
+</style>

src/views/chart/ContentLayers/enums.ts

@@ -1 +0,0 @@
-export type LayerModeEnum = 'thumbnail' | 'text'

src/views/chart/ContentLayers/index.d.ts

@@ -0,0 +1,4 @@
+export enum LayerModeEnum {
+  THUMBNAIL = 'thumbnail',
+  TEXT = 'text'
+}

src/views/chart/ContentLayers/index.vue

@@ -17,7 +17,7 @@
           v-for="(item, index) in layerModeEnumList"
           :key="index"
           ghost
-          size="tiny"
+          size="small"
           :type="layerMode === item.value ? 'primary' : 'tertiary'"
           @click="layerMode = item.value as LayerModeEnum"
         >
@@ -77,7 +77,7 @@ import { MenuEnum, MouseEventButton, WinKeyboard, MacKeyboard } from '@/enums/ed
 
 import { LayersListItem } from './components/LayersListItem/index'
 import { LayersGroupListItem } from './components/LayersGroupListItem/index'
-import { LayerModeEnum } from './enums'
+import { LayerModeEnum } from './index.d'
 
 import { icon } from '@/plugins'