diff --git a/.workflow/branch-pipeline.yml b/.workflow/branch-pipeline.yml new file mode 100644 index 00000000..1128d8a4 --- /dev/null +++ b/.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: + - .* diff --git a/.workflow/master-pipeline.yml b/.workflow/master-pipeline.yml new file mode 100644 index 00000000..8faf2bcc --- /dev/null +++ b/.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 diff --git a/.workflow/pr-pipeline.yml b/.workflow/pr-pipeline.yml new file mode 100644 index 00000000..1a05dd09 --- /dev/null +++ b/.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 diff --git a/package.json b/package.json index 1440f39e..c28cb3f9 100644 --- a/package.json +++ b/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", diff --git a/src/packages/components/Charts/Bars/CapsuleChart/index.vue b/src/packages/components/Charts/Bars/CapsuleChart/index.vue index 87971d01..135ef1d0 100644 --- a/src/packages/components/Charts/Bars/CapsuleChart/index.vue +++ b/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') }) diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts index abcef916..b485dd59 100644 --- a/src/store/modules/chartLayoutStore/chartLayoutStore.d.ts +++ b/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 } diff --git a/src/store/modules/chartLayoutStore/chartLayoutStore.ts b/src/store/modules/chartLayoutStore/chartLayoutStore.ts index 5aa5704e..c2b63592 100644 --- a/src/store/modules/chartLayoutStore/chartLayoutStore.ts +++ b/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() diff --git a/src/views/chart/ContentEdit/components/EditRule/index.vue b/src/views/chart/ContentEdit/components/EditRule/index.vue index 13078ec4..e200bee7 100644 --- a/src/views/chart/ContentEdit/components/EditRule/index.vue +++ b/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 => { diff --git a/src/views/chart/ContentEdit/components/EditSelect/index.vue b/src/views/chart/ContentEdit/components/EditSelect/index.vue index 1a8df6c7..90fc086b 100644 --- a/src/views/chart/ContentEdit/components/EditSelect/index.vue +++ b/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'); } } diff --git a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts index 82fce985..b87bdd5f 100644 --- a/src/views/chart/ContentEdit/hooks/useDrag.hook.ts +++ b/src/views/chart/ContentEdit/hooks/useDrag.hook.ts @@ -152,7 +152,7 @@ export const mousedownBoxSelect = (e: MouseEvent, item?: CreateComponentType | C } } }) - }, 20) + }, 30) // 鼠标抬起 const mouseup = () => { diff --git a/src/views/preview/components/PreviewRenderList/index.vue b/src/views/preview/components/PreviewRenderList/index.vue index 8ed703d1..ee5ea39c 100644 --- a/src/views/preview/components/PreviewRenderList/index.vue +++ b/src/views/preview/components/PreviewRenderList/index.vue @@ -2,7 +2,7 @@
.chart-item { position: absolute; - overflow: hidden; + &.hidden { + overflow: hidden; + } }