go-view/src/views/chart/ContentLayers/index.vue

<template>
  <ContentBox
    class="go-content-layers"
    :class="{ scoped: !chartLayoutStore.getLayers }"
    title="图层"
    :depth="2"
    @back="backHandle"
  >
    <template #icon>
      <n-icon size="16" :depth="2">
        <component :is="LayersIcon" />
      </n-icon>
    </template>

    <!-- 图层内容 -->
    <ListItem
      v-for="item in  reverseList"
      :key="item.id"
      :componentData="item"
      @mousedown="mousedownHandle(item)"
      @mouseenter="mouseenterHandle(item)"
      @mouseleave="mouseleaveHandle(item)"
      @contextmenu="handleContextMenu($event)"
    />
  </ContentBox>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ContentBox } from '../ContentBox/index'
import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { CreateComponentType } from '@/packages/index.d'
import cloneDeep from 'lodash/cloneDeep';
import {
  ChartEditStoreEnum,
  TargetChartType
} from '@/store/modules/chartEditStore/chartEditStore.d'
import {
  useContextMenu,
  MenuOptionsItemType,
  MenuEnum
} from '@/views/chart/hooks/useContextMenu.hook'

import { ListItem } from './components/ListItem/index'
import { icon } from '@/plugins'

const { LayersIcon } = icon.ionicons5
const chartLayoutStore = useChartLayoutStore()
const chartEditStore = useChartEditStore()

const { handleContextMenu } = useContextMenu({
  hideOptionsList: [MenuEnum.CLEAR, MenuEnum.PARSE]
})

// 逆序输出
const reverseList = computed(()=>{
  const list: CreateComponentType[] = cloneDeep(chartEditStore.getComponentList)
  return list.reverse()
})

const backHandle = () => {
  chartLayoutStore.setItem(ChartLayoutStoreEnum.LAYERS, false)
}

// 点击事件
const mousedownHandle = (item: CreateComponentType) => {
  chartEditStore.setTargetSelectChart(item.id)
}

// 进入事件
const mouseenterHandle = (item: CreateComponentType) => {
  chartEditStore.setTargetHoverChart(item.id)
}

// 移出事件
const mouseleaveHandle = (item: CreateComponentType) => {
  chartEditStore.setTargetHoverChart(undefined)
}
</script>

<style lang="scss" scoped>
$wight: 170px;
@include go(content-layers) {
  width: $wight;
  flex-shrink: 0;
  overflow: hidden;
  @extend .go-transition;
  &.scoped {
    width: 0;
  }
}
</style>