fix: 新增图层

Makefile

@@ -9,8 +9,12 @@ build:
 lint:
 	npm run lint
 
+new:
+	npm run new
+
 	
 help:
 	@echo "    make dev 开发模式"
 	@echo "    make build 编译模式"
+	@echo "    make new 通过自动化流程创建代码"
 	@echo "    make lint 格式校验"

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

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

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

@@ -2,7 +2,6 @@ import BarCommon from './index.vue'
 import image from '@/assets/images/chart/charts/bar_x.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
-import { chartSize } from './config'
 
 export const BarCommonConfig: ConfigType = {
   key: 'VBarCommon',
@@ -12,5 +11,4 @@ export const BarCommonConfig: ConfigType = {
   package: PackagesCategoryEnum.CHARTS,
   node: BarCommon,
   image: image,
-  chartData: { chartSize }
 }

src/packages/index.d.ts

@@ -7,12 +7,6 @@ export type ConfigType = {
   category: string
   categoryName: string
   package: string
-  chartData: {
-    chartSize: {
-      w: number
-      h: number
-    }
-  }
   node: Component
   image: string | (() => Promise<typeof import('*.png')>)
   [T: string]: unknown

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

@@ -42,15 +42,22 @@ export type MousePositionType = {
   [EditCanvasTypeEnum.Y]: number
 }
 
+// 操作目标
+export type TargetChartType = {
+  index: number
+}
+
 // Store 类型
 export enum chartEditStoreEnum {
   EDITCANVAS = 'editCanvas',
   MOUSEPOSITION = 'mousePosition',
-  COMPONENT_LIST = 'componentList'
+  COMPONENT_LIST = 'componentList',
+  TARGET_CHART = 'targetChart'
 }
 
 export interface chartEditStoreType {
   [chartEditStoreEnum.EDITCANVAS]: EditCanvasType
   [chartEditStoreEnum.MOUSEPOSITION]: MousePositionType
+  [chartEditStoreEnum.TARGET_CHART]: TargetChartType
   [chartEditStoreEnum.COMPONENT_LIST]: any[]
 }

src/store/modules/chartEditStore/chartEditStore.ts

@@ -34,6 +34,9 @@ export const useChartEditStoreStore = defineStore({
       x: 0,
       y: 0
     },
+    targetChart: {
+      index: 0
+    },
     componentList: []
   }),
   getters: {

src/store/modules/chartHistoryStore/chartHistoryStore.d.ts

@@ -0,0 +1,10 @@
+export interface HistoryStackType {
+  
+}
+
+export interface chartHistoryStoreType {
+  // 后退栈
+  backStack: [],
+  // 前进栈
+  forwardStack: []
+}

src/store/modules/chartHistoryStore/chartHistoryStore}.ts

@@ -0,0 +1,11 @@
+import { defineStore } from 'pinia'
+import { chartHistoryStoreType } from './chartHistoryStore.d'
+import { setLocalStorage, getLocalStorage } from '@/utils'
+import { StorageEnum } from '@/enums/storageEnum'
+
+export const useChartHistoryStoreStore = defineStore({
+  id: 'useChartHistoryStore',
+  state: (): chartHistoryStoreType => ({}),
+  getters: {},
+  actions: {}
+})

src/styles/common/_dark.scss

@@ -24,7 +24,7 @@ $dark: (
       linear-gradient(90deg, transparent 14px, $--color-text-2 0)
     ),
   // hover 边框颜色
-    hover-border-color: #55606e,
+    hover-border-color: $--color-dark-bg-5,
   // 阴影
     box-shadow: 0 8px 20px #5252521f
     

src/styles/common/_light.scss

@@ -26,7 +26,7 @@ $light: (
       linear-gradient(90deg, transparent 14px, $--color-dark-bg-5 0)
     ),
   // hover 边框颜色
-    hover-border-color: $--color-light-bg-1,
+    hover-border-color: $--color-light-bg-4,
   // 阴影
     box-shadow: 0 8px 20px #0000001a
 );

src/styles/common/style.scss

@@ -7,6 +7,10 @@
   transition: all 0.4s;
 }
 
+.go-transition-quick {
+  transition: all 0.2s;
+}
+
 .go-flex-center {
   display: flex;
   justify-content: center;

src/views/chart/ContentEdit/hooks/useDrop.hook.ts

@@ -23,8 +23,7 @@ export const handleDrop = async (e: DragEvent) => {
     // 创建新图表组件
     let newComponent = await createComponent(dropData)
 
-    const { w, h } = dropData.chartData.chartSize
+    newComponent.setPosition(e.offsetX - newComponent.attr.w / 2, e.offsetY - newComponent.attr.h / 2)
-    newComponent.setPosition(e.offsetX - w / 2, e.offsetY - h / 2)
     chartEditStore.addComponentList(newComponent)
 
     loadingFinish()

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

@@ -1,17 +1,63 @@
 <template>
-  <div class="go-content-layers-list-item">
+  <div class="go-content-layers-list-item go-flex-center">
-    <n-space>
+    <n-image
-      <div>图片</div>
+      class="list-img"
-      <b-text>
+      object-fit="contain"
-        文字
+      preview-disabled
+      :src="image"
+      :fallback-src="requireFallbackImg()"
+    />
+    <n-ellipsis>
+      <b-text class="list-text">
+        {{ title }}
       </b-text>
-    </n-space>
+    </n-ellipsis>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref, toRefs } from 'vue'
+import { requireFallbackImg } from '@/utils'
+import { useDesignStore } from '@/store/modules/designStore/designStore'
+// 全局颜色
+const designStore = useDesignStore()
+const themeColor = ref(designStore.getAppTheme)
+
+const props = defineProps({
+  componentData: {
+    type: Object,
+    required: true
+  }
+})
+const { image, title } = toRefs(props.componentData.chartData)
+</script>
 
 <style lang="scss" scoped>
-@include go(content-layers-list-items) {
+$centerHeight: 40px;
+$textSize: 10px;
+
+@include go(content-layers-list-item) {
+  justify-content: start !important;
+  padding: 6px 10px;
+  cursor: pointer;
+  margin-bottom: 5px;
+  @extend .go-transition-quick;
+  &:hover {
+    @include filter-bg-color('background-color4');
+    color: v-bind('themeColor');
+  }
+  .list-img {
+    flex-shrink: 0;
+    height: $centerHeight;
+    border-radius: 5px;
+    overflow: hidden;
+    border: 1px solid;
+    padding: 2px;
+    @include hover-border-color('hover-border-color')
+  }
+  .list-text {
+    padding-left: 10px;
+    font-size: $textSize;
+  }
 }
 </style>

src/views/chart/ContentLayers/index.vue

@@ -13,7 +13,11 @@
     </template>
 
     <!-- 图层内容 -->
-    <ListItem v-for="item in chartEditStore.getComponentList" :key="item.id"/>
+    <ListItem
+      v-for="item in chartEditStore.getComponentList"
+      :key="item.id"
+      :componentData="item"
+    />
   </ContentBox>
 </template>