build: 升级2.1.2

.workflow/branch-pipeline.yml

@@ -0,0 +1,51 @@
+version: '1.0'
+name: branch-pipeline
+displayName: BranchPipeline
+stages:
+  - stage: 
+    name: compile
+    displayName: 编译
+    steps:
+      - step: build@nodejs
+        name: build_nodejs
+        displayName: Nodejs 构建
+        # 支持8.16.2、10.17.0、12.16.1、14.16.0、15.12.0五个版本
+        nodeVersion: 14.16.0
+        # 构建命令：安装依赖 -> 清除上次打包产物残留 -> 执行构建 【请根据项目实际产出进行填写】
+        commands:
+          - npm install && rm -rf ./dist && npm run build
+        # 非必填字段，开启后表示将构建产物暂存，但不会上传到制品库中，7天后自动清除
+        artifacts:
+            # 构建产物名字，作为产物的唯一标识可向下传递，支持自定义，默认为BUILD_ARTIFACT。在下游可以通过${BUILD_ARTIFACT}方式引用来获取构建物地址
+          - name: BUILD_ARTIFACT
+            # 构建产物获取路径，是指代码编译完毕之后构建物的所在路径
+            path:
+              - ./dist
+      - step: publish@general_artifacts
+        name: publish_general_artifacts
+        displayName: 上传制品
+        # 上游构建任务定义的产物名，默认BUILD_ARTIFACT
+        dependArtifact: BUILD_ARTIFACT
+        # 上传到制品库时的制品命名，默认output
+        artifactName: output
+        dependsOn: build_nodejs
+  - stage: 
+    name: release
+    displayName: 发布
+    steps:
+      - step: publish@release_artifacts
+        name: publish_release_artifacts
+        displayName: '发布'
+        # 上游上传制品任务的产出
+        dependArtifact: output
+        # 发布制品版本号
+        version: '1.0.0.0'
+        # 是否开启版本号自增，默认开启
+        autoIncrement: true
+triggers:
+  push:
+    branches:
+      exclude:
+        - master
+      include:
+        - .*

.workflow/master-pipeline.yml

@@ -0,0 +1,49 @@
+version: '1.0'
+name: master-pipeline
+displayName: MasterPipeline
+stages:
+  - stage: 
+    name: compile
+    displayName: 编译
+    steps:
+      - step: build@nodejs
+        name: build_nodejs
+        displayName: Nodejs 构建
+        # 支持8.16.2、10.17.0、12.16.1、14.16.0、15.12.0五个版本
+        nodeVersion: 14.16.0
+        # 构建命令：安装依赖 -> 清除上次打包产物残留 -> 执行构建 【请根据项目实际产出进行填写】
+        commands:
+          - npm install && rm -rf ./dist && npm run build
+        # 非必填字段，开启后表示将构建产物暂存，但不会上传到制品库中，7天后自动清除
+        artifacts:
+            # 构建产物名字，作为产物的唯一标识可向下传递，支持自定义，默认为BUILD_ARTIFACT。在下游可以通过${BUILD_ARTIFACT}方式引用来获取构建物地址
+          - name: BUILD_ARTIFACT
+            # 构建产物获取路径，是指代码编译完毕之后构建物的所在路径
+            path:
+              - ./dist
+      - step: publish@general_artifacts
+        name: publish_general_artifacts
+        displayName: 上传制品
+        # 上游构建任务定义的产物名，默认BUILD_ARTIFACT
+        dependArtifact: BUILD_ARTIFACT
+        # 上传到制品库时的制品命名，默认output
+        artifactName: output
+        dependsOn: build_nodejs
+  - stage: 
+    name: release
+    displayName: 发布
+    steps:
+      - step: publish@release_artifacts
+        name: publish_release_artifacts
+        displayName: '发布'
+        # 上游上传制品任务的产出
+        dependArtifact: output
+        # 发布制品版本号
+        version: '1.0.0.0'
+        # 是否开启版本号自增，默认开启
+        autoIncrement: true
+triggers:
+  push:
+    branches:
+      include:
+        - master

.workflow/pr-pipeline.yml

@@ -0,0 +1,36 @@
+version: '1.0'
+name: pr-pipeline
+displayName: PRPipeline
+stages:
+  - stage: 
+    name: compile
+    displayName: 编译
+    steps:
+      - step: build@nodejs
+        name: build_nodejs
+        displayName: Nodejs 构建
+        # 支持8.16.2、10.17.0、12.16.1、14.16.0、15.12.0五个版本
+        nodeVersion: 14.16.0
+        # 构建命令：安装依赖 -> 清除上次打包产物残留 -> 执行构建 【请根据项目实际产出进行填写】
+        commands:
+          - npm install && rm -rf ./dist && npm run build
+        # 非必填字段，开启后表示将构建产物暂存，但不会上传到制品库中，7天后自动清除
+        artifacts:
+            # 构建产物名字，作为产物的唯一标识可向下传递，支持自定义，默认为BUILD_ARTIFACT。在下游可以通过${BUILD_ARTIFACT}方式引用来获取构建物地址
+          - name: BUILD_ARTIFACT
+            # 构建产物获取路径，是指代码编译完毕之后构建物的所在路径
+            path:
+              - ./dist
+      - step: publish@general_artifacts
+        name: publish_general_artifacts
+        displayName: 上传制品
+        # 上游构建任务定义的产物名，默认BUILD_ARTIFACT
+        dependArtifact: BUILD_ARTIFACT
+        # 上传到制品库时的制品命名，默认output
+        artifactName: output
+        dependsOn: build_nodejs
+triggers:
+  pr:
+    branches:
+      include:
+        - master

package.json

@@ -1,6 +1,9 @@
 {
   "name": "go-view",
-  "version": "2.1.1",
+  "version": "2.1.2",
+  "engines": {
+    "node": ">=16.14 <18.0.0"
+  },
   "scripts": {
     "dev": "vite --host",
     "build": "vue-tsc --noEmit && vite build",

src/packages/components/Charts/Bars/CapsuleChart/index.vue

@@ -111,9 +111,13 @@ watch(
   }
 )
 
-const calcData = (data: any) => {
+const calcData = (data: any, type?: string) => {
   mergeConfig(props.chartConfig.option)
-  calcCapsuleLengthAndLabelData()
+  if (type == 'preview') {
+    calcCapsuleLengthAndLabelData(data)
+  } else {
+    calcCapsuleLengthAndLabelData(state.mergedConfig.dataset)
+  }
 }
 
 const mergeConfig = (data: any) => {
@@ -121,8 +125,8 @@ const mergeConfig = (data: any) => {
 }
 
 // 数据解析
-const calcCapsuleLengthAndLabelData = () => {
-  const { source } = state.mergedConfig.dataset
+const calcCapsuleLengthAndLabelData = (dataset: any) => {
+  const { source } = dataset
   if (!source.length) return
 
   state.capsuleItemHeight = numberSizeHandle(state.mergedConfig.itemHeight)
@@ -151,7 +155,7 @@ onMounted(() => {
 
 // 预览
 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
-  calcData(newData)
+  calcData(newData, 'preview')
 })
 </script>
 

src/store/modules/chartLayoutStore/chartLayoutStore.d.ts

@@ -14,7 +14,8 @@ export enum ChartLayoutStoreEnum {
   DETAILS = 'details',
   Chart_TYPE = 'chartType',
   LAYER_TYPE = 'layerType',
-  PERCENTAGE = 'percentage'
+  PERCENTAGE = 'percentage',
+  RE_POSITION_CANVAS = 'rePositionCanvas'
 }
 
 export interface ChartLayoutType {
@@ -30,4 +31,6 @@ export interface ChartLayoutType {
   [ChartLayoutStoreEnum.LAYER_TYPE]: LayerModeEnum
   // 当前正在加载的数量
   [ChartLayoutStoreEnum.PERCENTAGE]: number
+  // 是否重置当前画布位置
+  [ChartLayoutStoreEnum.RE_POSITION_CANVAS]: boolean
 }

src/store/modules/chartLayoutStore/chartLayoutStore.ts

@@ -26,6 +26,8 @@ export const useChartLayoutStore = defineStore({
     layerType: LayerModeEnum.THUMBNAIL,
     // 当前加载数量
     percentage: 0,
+    // 是否重置当前画布位置
+    rePositionCanvas: false,
     // 防止值不存在
     ...storageChartLayout
   }),
@@ -47,6 +49,9 @@ export const useChartLayoutStore = defineStore({
     },
     getPercentage(): number {
       return this.percentage
+    },
+    getRePositionCanvas(): boolean {
+      return this.rePositionCanvas
     }
   },
   actions: {
@@ -54,7 +59,10 @@ export const useChartLayoutStore = defineStore({
       this.$patch(state => {
         state[key] = value
       })
+      // 存储本地
       setLocalStorage(GO_CHART_LAYOUT_STORE, this.$state)
+      // 这里需要标记重置画布位置
+      this.rePositionCanvas = true;
       // 重新计算拖拽区域缩放比例
       setTimeout(() => {
         chartEditStore.computedScale()

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

@@ -35,8 +35,12 @@ import { ref, reactive, onMounted, toRefs, watch, onUnmounted, computed } from '
 import { listen } from 'dom-helpers'
 import { useDesignStore } from '@/store/modules/designStore/designStore'
 import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartLayoutStore } from '@/store/modules/chartLayoutStore/chartLayoutStore'
+import { ChartLayoutStoreEnum } from '@/store/modules/chartLayoutStore/chartLayoutStore.d'
+import throttle from 'lodash/throttle'
 
 const chartEditStore = useChartEditStore()
+const chartLayoutStore = useChartLayoutStore()
 const designStore = useDesignStore()
 
 const thick = 20
@@ -84,6 +88,7 @@ const themeColor = computed(() => {
   return designStore.getAppTheme
 })
 
+// 处理鼠标拖动
 const handleWheel = (e: any) => {
   if (e.ctrlKey || e.metaKey) {
     e.preventDefault()
@@ -102,6 +107,7 @@ const handleWheel = (e: any) => {
   }
 }
 
+// 滚动条处理
 const handleScroll = () => {
   if (!$app.value) return
   const screensRect = $app.value.getBoundingClientRect()
@@ -111,6 +117,7 @@ const handleScroll = () => {
   startY.value = (screensRect.top + thick - canvasRect.top) / scale.value
 }
 
+// 拖拽处理
 const dragCanvas = (e: any) => {
   e.preventDefault()
   e.stopPropagation()
@@ -148,6 +155,7 @@ const dragCanvas = (e: any) => {
   })
 }
 
+// 计算画布大小
 const canvasBox = () => {
   const layoutDom = document.getElementById('go-chart-edit-layout')
   if (layoutDom) {
@@ -162,7 +170,7 @@ const canvasBox = () => {
   }
 }
 
-// 在位置不动的情况下重绘标尺
+// 重绘标尺
 const reDraw = () => {
   sketchRuleReDraw.value = false
   setTimeout(() => {
@@ -170,13 +178,6 @@ const reDraw = () => {
   }, 10)
 }
 
-watch(
-  () => designStore.getDarkTheme,
-  () => {
-    reDraw()
-  }
-)
-
 // 滚动居中
 const canvasPosCenter = () => {
   const { width: containerWidth, height: containerHeight } = $container.value.getBoundingClientRect()
@@ -186,20 +187,32 @@ const canvasPosCenter = () => {
   $app.value.scrollTop = containerHeight / 2 - height / 2
 }
 
-// 处理标尺重制大小
+// 处理主题变化
+watch(
+  () => designStore.getDarkTheme,
+  () => {
+    reDraw()
+  }
+)
+
+// // 处理标尺重制大小
 watch(
   () => scale.value,
   (newValue, oldValue) => {
-    if (oldValue !== newValue) {
+    if (oldValue !== newValue && chartLayoutStore.getRePositionCanvas) {
+      chartLayoutStore.setItemUnHandle(ChartLayoutStoreEnum.RE_POSITION_CANVAS, false)
       handleScroll()
-      chartEditStore.setScale(newValue)
       setTimeout(() => {
         canvasPosCenter()
-      }, 500)
+        reDraw()
+      }, 400)
+    } else {
+      throttle(reDraw, 20)
     }
   }
 )
 
+// 处理鼠标样式
 watch(
   () => isPressSpace.value,
   newValue => {

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

@@ -93,7 +93,7 @@ watch(
     position: absolute;
     width: 100%;
     height: 100%;
-    border-radius: 10px;
+    border-radius: 5px;
     overflow: hidden;
   }
   .select-border {
@@ -107,7 +107,7 @@ watch(
   .select-background {
     top: 2px;
     left: 2px;
-    opacity: 0.03;
+    opacity: 0.2;
     background-color: v-bind('themeColor');
   }
 }

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

@@ -152,7 +152,7 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C
         }
       }
     })
-  }, 20)
+  }, 30)
 
   // 鼠标抬起
   const mouseup = () => {

src/views/preview/components/PreviewRenderList/index.vue

@@ -2,7 +2,7 @@
   <div
     class="chart-item"
     v-for="(item, index) in localStorageInfo.componentList"
-    :class="animationsClass(item.styles.animations)"
+    :class="[animationsClass(item.styles.animations), !item.isGroup && 'hidden']"
     :key="item.id"
     :style="{
       ...getComponentAttrStyle(item.attr, index),
@@ -78,6 +78,8 @@ onMounted(() => {
 <style lang="scss" scoped>
 .chart-item {
   position: absolute;
-  overflow: hidden;
+  &.hidden {
+    overflow: hidden;
+  }
 }
 </style>