featr: 新增图层选中的样式

src/packages/components/Charts/Bars/BarCommon/config.ts

@@ -1,13 +1,13 @@
 import { getUUID } from '@/utils'
 import { BarCommonConfig } from './index'
-import { ConfigType } from '@/packages/index.d'
+import { ConfigType, CreateComponentType } from '@/packages/index.d'
 import omit from 'lodash/omit'
 
-export default class Config {
-  private id: string = getUUID()
-  private key: string = BarCommonConfig.key
+export default class Config implements CreateComponentType {
+  public id: string = getUUID()
+  public key: string = BarCommonConfig.key
 
-  chartData: Exclude<ConfigType, ['node']> = omit(BarCommonConfig, ['node'])
+  public chartData: Exclude<ConfigType, ['node']> = omit(BarCommonConfig, ['node'])
 
   public attr = { x: 0, y: 0, w: 500, h: 300 }
 

src/packages/index.d.ts

@@ -1,6 +1,6 @@
 import { Component } from '@/router/types'
 
-// import { ConfigType } from '@/packages/index.d'
+// 组件配置
 export type ConfigType = {
   key: string
   title: string
@@ -12,6 +12,16 @@ export type ConfigType = {
   [T: string]: unknown
 }
 
+// 组件实例类
+export interface CreateComponentType {
+  id: string
+  key: string
+  chartData: ConfigType
+  config: object
+  setPosition: Function
+}
+
+// 包分类枚举
 export enum PackagesCategoryEnum {
   CHARTS = 'Charts',
   TABLES = 'Tables',
@@ -19,6 +29,7 @@ export enum PackagesCategoryEnum {
   DECORATES = 'Decorates'
 }
 
+// 包分类名称
 export enum PackagesCategoryName {
   CHARTS = '图表',
   TABLES = '表格',
@@ -26,6 +37,7 @@ export enum PackagesCategoryName {
   DECORATES = '小组件'
 }
 
+// 图表包类型
 export type PackagesType = {
   [PackagesCategoryEnum.CHARTS]: ConfigType[]
   [PackagesCategoryEnum.INFORMATION]: ConfigType[]

src/store/modules/chartEditStore/chartEditStore.d.ts

@@ -44,11 +44,12 @@ export type MousePositionType = {
 
 // 操作目标
 export type TargetChartType = {
-  index: number
+  hoverIndex?: string
+  selectIndex?: string
 }
 
 // Store 类型
-export enum chartEditStoreEnum {
+export enum ChartEditStoreEnum {
   EDITCANVAS = 'editCanvas',
   MOUSEPOSITION = 'mousePosition',
   COMPONENT_LIST = 'componentList',
@@ -56,8 +57,8 @@ export enum chartEditStoreEnum {
 }
 
 export interface chartEditStoreType {
-  [chartEditStoreEnum.EDITCANVAS]: EditCanvasType
-  [chartEditStoreEnum.MOUSEPOSITION]: MousePositionType
-  [chartEditStoreEnum.TARGET_CHART]: TargetChartType
-  [chartEditStoreEnum.COMPONENT_LIST]: any[]
+  [ChartEditStoreEnum.EDITCANVAS]: EditCanvasType
+  [ChartEditStoreEnum.MOUSEPOSITION]: MousePositionType
+  [ChartEditStoreEnum.TARGET_CHART]: TargetChartType
+  [ChartEditStoreEnum.COMPONENT_LIST]: any[]
 }

src/store/modules/chartEditStore/chartEditStore.ts

@@ -4,7 +4,8 @@ import { loadingStart, loadingFinish, loadingError } from '@/utils'
 import {
   chartEditStoreType,
   EditCanvasType,
-  MousePositionType
+  MousePositionType,
+  TargetChartType
 } from './chartEditStore.d'
 
 // 编辑区域内容
@@ -35,7 +36,8 @@ export const useChartEditStoreStore = defineStore({
       y: 0
     },
     targetChart: {
-      index: 0
+      hoverIndex: undefined,
+      selectIndex: undefined
     },
     componentList: []
   }),
@@ -46,11 +48,25 @@ export const useChartEditStoreStore = defineStore({
     getEditCanvas(): EditCanvasType {
       return this.editCanvas
     },
+    getTargetChart():TargetChartType {
+      return this.targetChart
+    },
     getComponentList(): any[] {
       return this.componentList
     }
   },
   actions: {
+    // * 设置 editCanvas 数据项
+    setEditCanvasItem< T extends keyof EditCanvasType,  K extends EditCanvasType[T] >(key: T, value: K) {
+      this.editCanvas[key] = value
+    },
+    // * 设置目标数据
+    setTargetHoverChart(hoverIndex?:TargetChartType["hoverIndex"]) {
+      this.targetChart.hoverIndex = hoverIndex
+    },
+    setTargetSelectChart(selectIndex?:TargetChartType["selectIndex"]) {
+      this.targetChart.selectIndex = selectIndex
+    },
     // * 新增组件列表
     addComponentList<T>(chartData: T): void {
       this.componentList.push(chartData)
@@ -75,13 +91,6 @@ export const useChartEditStoreStore = defineStore({
         loadingError()
       }
     },
-    // * 设置数据项
-    setEditCanvasItem<
-      T extends keyof EditCanvasType,
-      K extends EditCanvasType[T]
-    >(key: T, value: K) {
-      this.editCanvas[key] = value
-    },
     // * 设置页面样式属性
     setPageStyle<T extends keyof CSSStyleDeclaration>(
       key: T,

src/views/chart/ContentEdit/components/EditBottom/index.vue

@@ -75,7 +75,7 @@ const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
 
 const chartEditStore = getChartEditStore()
-const chartEditStoreEnum = getChartEditStoreEnum()
+const ChartEditStoreEnum = getChartEditStoreEnum()
 const { lockScale, scale } = toRefs(chartEditStore.getEditCanvas)
 
 // 缩放选项
@@ -117,7 +117,7 @@ const selectHandle = (v: number) => {
 // 点击锁处理
 const lockHandle = () => {
   chartEditStore.setEditCanvasItem(
-    chartEditStoreEnum.LOCK_SCALE,
+    ChartEditStoreEnum.LOCK_SCALE,
     !lockScale.value
   )
 }

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

@@ -1,27 +1,36 @@
 <template>
-  <div class="go-content-layers-list-item go-flex-center">
-    <n-image
-      class="list-img"
-      object-fit="contain"
-      preview-disabled
-      :src="image"
-      :fallback-src="requireFallbackImg()"
-    />
-    <n-ellipsis>
-      <b-text class="list-text">
-        {{ title }}
-      </b-text>
-    </n-ellipsis>
+  <div
+    class="go-content-layers-list-item"
+    :class="{ hover: hover, select: select }"
+  >
+    <div class="go-flex-center item-content">
+      <n-image
+        class="list-img"
+        object-fit="contain"
+        preview-disabled
+        :src="image"
+        :fallback-src="requireFallbackImg()"
+      />
+      <n-ellipsis>
+        <b-text class="list-text">
+          {{ title }}
+        </b-text>
+      </n-ellipsis>
+    </div>
+    <div :class="{ 'select-modal': select }" />
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, toRefs } from 'vue'
+import { ref, toRefs, computed } from 'vue'
 import { requireFallbackImg } from '@/utils'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
+import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+
 // 全局颜色
 const designStore = useDesignStore()
 const themeColor = ref(designStore.getAppTheme)
+const chartEditStore = useChartEditStoreStore()
 
 const props = defineProps({
   componentData: {
@@ -29,22 +38,61 @@ const props = defineProps({
     required: true
   }
 })
+
 const { image, title } = toRefs(props.componentData.chartData)
+
+// 计算当前选中目标
+const select = computed(() => {
+  return props.componentData.id === chartEditStore.getTargetChart.selectIndex
+})
+
+const hover = computed(() => {
+  return props.componentData.id === chartEditStore.getTargetChart.hoverIndex
+})
 </script>
 
 <style lang="scss" scoped>
-$centerHeight: 40px;
+$centerHeight: 52px;
 $textSize: 10px;
 
 @include go(content-layers-list-item) {
-  justify-content: start !important;
-  padding: 6px 10px;
-  cursor: pointer;
+  position: relative;
+  height: $centerHeight;
+  width: 90%;
+  margin: 10px 5%;
   margin-bottom: 5px;
+  border-radius: 5px;
+  cursor: pointer;
+  border: 1px solid rgba(0, 0, 0, 0);
   @extend .go-transition-quick;
+  &.hover,
   &:hover {
     @include filter-bg-color('background-color4');
-    color: v-bind('themeColor');
+  }
+  /* 选中 */
+  &.select {
+    border: 1px solid v-bind('themeColor');
+    /* 需要设置最高级，覆盖 hover 的颜色 */
+    background-color: rgba(0, 0, 0, 0) !important;
+  }
+  .select-modal,
+  .item-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .item-content {
+    z-index: 1;
+    padding: 6px 5px;
+    justify-content: start !important;
+    width: calc(100% - 10px);
+    height: calc(100% - 10px);
+  }
+  .select-modal {
+    background-color: v-bind('themeColor');
+    opacity: 0.3;
+    width: 100%;
+    height: 100%;
   }
   .list-img {
     flex-shrink: 0;
@@ -53,7 +101,7 @@ $textSize: 10px;
     overflow: hidden;
     border: 1px solid;
     padding: 2px;
-    @include hover-border-color('hover-border-color')
+    @include hover-border-color('hover-border-color');
   }
   .list-text {
     padding-left: 10px;

src/views/chart/ContentLayers/index.vue

@@ -17,30 +17,52 @@
       v-for="item in chartEditStore.getComponentList"
       :key="item.id"
       :componentData="item"
+      @mousedown="mousedownHandle(item)"
+      @mouseenter="mouseenterHandle(item)"
+      @mouseleave="mouseleaveHandle(item)"
     />
   </ContentBox>
 </template>
 
 <script setup lang="ts">
 import { ContentBox } from '../ContentBox/index'
+
 import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
 import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+
 import { useChartEditStoreStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { ChartEditStoreEnum, TargetChartType } from '@/store/modules/chartEditStore/chartEditStore.d'
+import { CreateComponentType } from '@/packages/index.d'
+
 import { ListItem } from './components/ListItem/index'
 import { icon } from '@/plugins'
 
 const { LayersIcon } = icon.ionicons5
 const chartLayoutStore = useChartLayoutStore()
-
 const chartEditStore = useChartEditStoreStore()
 
 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: 150px;
+$wight: 170px;
 @include go(content-layers) {
   width: $wight;
   flex-shrink: 0;