perf: 去除多余流程组件，优化流程线交互

src/packages/components/Decorates/FlowChart/FlowChart01/config.ts

@@ -1,21 +0,0 @@
-import { PublicConfigClass } from '@/packages/public'
-import { CreateComponentType } from '@/packages/index.d'
-import { FlowChart01Config } from './index'
-import cloneDeep from 'lodash/cloneDeep'
-
-export const option = {
-    endWidth: 15,
-    lineLength: 150,//水平层级距离
-    lineWidth:2,//线条粗细
-    lineNum:2,//向下数量
-    lineNumUp:2,//向上数量
-    lineColLength:50,//纵向层级距离
-    backgroundCol:'#303a4c',//线条背景
-    animateCol:'#3788ea'//流动动画背景
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-    public key = FlowChart01Config.key
-    public chartConfig = cloneDeep(FlowChart01Config)
-    public option = cloneDeep(option)
-}

src/packages/components/Decorates/FlowChart/FlowChart01/index.vue

@@ -1,51 +0,0 @@
-<template>
-  <svg :width="w" :height="h">
-    <polyline :stroke-width="lineWidth" :points="getStartPoint(-1,'')" :stroke="backgroundCol" fill="none"/>
-    <polyline :stroke-width="lineWidth" class="g-dashed-line"   :points="getStartPoint(-1,'')" :stroke="animateCol" fill="none"/>
-    <polyline :stroke-width="lineWidth" v-for="(item,index) in lineNum" :key="index" :points="getStartPoint(index + 1,'down')" :stroke="backgroundCol" fill="none"/>
-    <polyline :stroke-width="lineWidth" class="g-dashed-line"   v-for="(item,index) in lineNum" :key="index" :points="getStartPoint(index + 1,'down')" :stroke="animateCol" fill="none"/>
-    <polyline :stroke-width="lineWidth" v-for="(item,index) in lineNumUp" :key="index" :points="getStartPoint(index + 1,'up')" :stroke="backgroundCol" fill="none"/>
-    <polyline :stroke-width="lineWidth" class="g-dashed-line"   v-for="(item,index) in lineNumUp" :key="index" :points="getStartPoint(index + 1,'up')" :stroke="animateCol" fill="none"/>
-  </svg>
-</template>
-
-<script setup lang="ts">
-import { PropType, toRefs,computed } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
-
-const props = defineProps({
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true,
-  },
-})
-
-const { w, h } = toRefs(props.chartConfig.attr)
-const { lineLength,lineNum,lineColLength,lineNumUp,lineWidth,backgroundCol,animateCol } = toRefs(props.chartConfig.option)
-const getStartPoint = (num:number,direction:string)=>{
-  if(num === -1 && direction === ''){
-    return `0,${h.value/2} ${lineLength.value},${h.value/2} ${lineLength.value * 2},${h.value/2}`
-  }else if(num !== -1 && direction === 'down'){
-    return `0,${h.value/2} ${lineLength.value},${h.value/2} ${lineLength.value},${ h.value/2 + num * lineColLength.value},${lineLength.value *2},${h.value/2 + num * lineColLength.value}`
-  }else if(num !== -1 && direction === 'up'){
-    return `0,${h.value/2} ${lineLength.value},${h.value/2} ${lineLength.value},${ h.value/2 - num * lineColLength.value},${lineLength.value *2},${h.value/2 - num * lineColLength.value}`
-  }
-}
-
-</script>
-
-<style scoped>
-.g-dashed-line {
-  stroke-dasharray:20 130;
-  stroke-dashoffset: 0;
-  animation: move 3s infinite linear;
-}
-@keyframes move {
-  0% {
-    stroke-dashoffset: 20;
-  }
-  100% {
-   stroke-dashoffset: -130;
-  }
-}
-</style>

src/packages/components/Decorates/FlowChart/FlowChart02/config.ts

@@ -1,19 +0,0 @@
-import { PublicConfigClass } from '@/packages/public'
-import { CreateComponentType } from '@/packages/index.d'
-import { FlowChart02Config } from './index'
-import cloneDeep from 'lodash/cloneDeep'
-
-export const option = {
-    boxWidth:100,
-    boxHeight:200,
-    cornerTip:30,
-    startColor:'#3cb1e4',
-    endColor:'#144b6b',
-    strokeWidth:3
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-    public key = FlowChart02Config.key
-    public chartConfig = cloneDeep(FlowChart02Config)
-    public option = cloneDeep(option)
-}

src/packages/components/Decorates/FlowChart/FlowChart02/config.vue

@@ -1,56 +0,0 @@
-<template>
-  <CollapseItem name="线条" :expanded="true">
-    <SettingItemBox name="具体">
-      <SettingItem name="宽度">
-        <n-input-number
-            size="small"
-            v-model:value="optionData.boxWidth"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem name="高度">
-        <n-input-number
-            size="small"
-            v-model:value="optionData.boxHeight"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem name="角尖高度">
-        <n-input-number
-            size="small"
-            v-model:value="optionData.cornerTip"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem name="边框粗细">
-        <n-input-number
-            size="small"
-            v-model:value="optionData.strokeWidth"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem name="起点颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.startColor"></n-color-picker>
-      </SettingItem>
-      <SettingItem name="终点颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.endColor"></n-color-picker>
-      </SettingItem>
-    </SettingItemBox>
-
-  </CollapseItem>
-
-</template>
-
-<script setup lang="ts">
-import { PropType } from 'vue'
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem
-} from '@/components/Pages/ChartItemSetting'
-import { option } from './config'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true
-  }
-})
-
-</script>

src/packages/components/Decorates/FlowChart/FlowChart02/index.ts

@@ -1,14 +0,0 @@
-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
-
-export const FlowChart02Config: ConfigType = {
-    key: 'FlowChart02',
-    chartKey: 'VFlowChart02',
-    conKey: 'VCFlowChart02',
-    title: '流程-五边形',
-    category: ChatCategoryEnum.FlowChart,
-    categoryName: ChatCategoryEnumName.FlowChart,
-    package: PackagesCategoryEnum.DECORATES,
-    chartFrame: ChartFrameEnum.STATIC,
-    image: 'flow-wubianxing.png'
-}

src/packages/components/Decorates/FlowChart/FlowChart02/index.vue

@@ -1,34 +0,0 @@
-<template>
-  <svg :width="w" :height="h">
-    <defs>
-      <linearGradient :id="id" x1="0%" y1="0%" x2="0%" y2="100%">
-        <stop offset="0%"  :stop-color="startColor" stop-opacity="1"/>
-        <stop offset="100%" :stop-color="endColor"  stop-opacity="1"/>
-      </linearGradient>
-    </defs>
-    <polyline :points="getBox()" fill="none" :stroke="`url(#${id})`" :stroke-width="strokeWidth"/>
-  </svg>
-</template>
-
-<script setup lang="ts">
-import { PropType, toRefs } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
-import { getUUID } from '@/utils'
-
-const id = getUUID();
-const props = defineProps({
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true,
-  },
-})
-
-const { w, h } = toRefs(props.chartConfig.attr)
-const { boxWidth, boxHeight,cornerTip,startColor,endColor,strokeWidth } = toRefs(props.chartConfig.option)
-
-const getBox = ():string =>{
-  return `${ w.value / 3 },0 ${ w.value / 3 + boxWidth.value},0 ${ w.value / 3 + boxWidth.value},${boxHeight.value} ${ w.value / 3 + boxWidth.value/2 },${boxHeight.value + cornerTip.value} ${ w.value / 3 },${boxHeight.value} ${ w.value / 3 },0`
-}
-
-</script>
-

src/packages/components/Decorates/FlowChart/FlowChart03/config.ts

@@ -1,22 +0,0 @@
-import { PublicConfigClass } from '@/packages/public'
-import { CreateComponentType } from '@/packages/index.d'
-import { FlowChart03Config } from './index'
-import cloneDeep from 'lodash/cloneDeep'
-import { chartInitConfig } from '@/settings/designSetting'
-
-export const option = {
-  boxWidth: 300,
-  boxHeight: 100,
-  outBorderColor: '#045da2',
-  inBorderColor: '#045da2',
-  startColor: '#025596',
-  endColor: '#052339',
-  borderWidth: 3
-}
-
-export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = FlowChart03Config.key
-  public attr = { ...chartInitConfig, w: 390, h: 120, zIndex: 1 }
-  public chartConfig = cloneDeep(FlowChart03Config)
-  public option = cloneDeep(option)
-}

src/packages/components/Decorates/FlowChart/FlowChart03/config.vue

@@ -1,59 +0,0 @@
-<template>
-  <CollapseItem name="线条" :expanded="true">
-    <SettingItemBox name="具体">
-      <SettingItem name="宽度">
-        <n-input-number
-            size="small"
-            v-model:value="optionData.boxWidth"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem name="高度">
-        <n-input-number
-            size="small"
-            v-model:value="optionData.boxHeight"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem name="边框粗细">
-        <n-input-number
-            size="small"
-            v-model:value="optionData.borderWidth"
-        ></n-input-number>
-      </SettingItem>
-
-      <SettingItem name="外边框颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.outBorderColor"></n-color-picker>
-      </SettingItem>
-      <SettingItem name="内边框颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.inBorderColor"></n-color-picker>
-      </SettingItem>
-
-      <SettingItem name="起点颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.startColor"></n-color-picker>
-      </SettingItem>
-
-      <SettingItem name="终点颜色">
-        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.endColor"></n-color-picker>
-      </SettingItem>
-    </SettingItemBox>
-
-  </CollapseItem>
-
-</template>
-
-<script setup lang="ts">
-import { PropType } from 'vue'
-import {
-  CollapseItem,
-  SettingItemBox,
-  SettingItem
-} from '@/components/Pages/ChartItemSetting'
-import { option } from './config'
-
-const props = defineProps({
-  optionData: {
-    type: Object as PropType<typeof option>,
-    required: true
-  }
-})
-
-</script>

src/packages/components/Decorates/FlowChart/FlowChart03/index.ts

@@ -1,14 +0,0 @@
-import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
-import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
-
-export const FlowChart03Config: ConfigType = {
-    key: 'FlowChart03',
-    chartKey: 'VFlowChart03',
-    conKey: 'VCFlowChart03',
-    title: '平行四边形',
-    category: ChatCategoryEnum.FlowChart,
-    categoryName: ChatCategoryEnumName.FlowChart,
-    package: PackagesCategoryEnum.DECORATES,
-    chartFrame: ChartFrameEnum.STATIC,
-    image: 'flow-pingxing.png'
-}

src/packages/components/Decorates/FlowChart/FlowChart03/index.vue

@@ -1,39 +0,0 @@
-<template>
-  <svg :width="w" :height="h">
-    <defs>
-      <linearGradient :id="id"  x1="0%" y1="0%" x2="100%" y2="0%">
-        <stop offset="0%"  :stop-color="startColor" stop-opacity="1"/>
-        <stop offset="100%" :stop-color="endColor"  stop-opacity="1"/>
-      </linearGradient>
-    </defs>
-<!--    <polyline :points="getBorder()" fill="none" :stroke="outBorderColor" :stroke-width="borderWidth"/>-->
-    <polyline :points="getBox()" :fill="`url(#${id})`" :stroke="inBorderColor" :stroke-width="borderWidth"/>
-  </svg>
-</template>
-
-<script setup lang="ts">
-import { PropType, toRefs } from 'vue'
-import { CreateComponentType } from '@/packages/index.d'
-import { getUUID } from '@/utils'
-
-const props = defineProps({
-  chartConfig: {
-    type: Object as PropType<CreateComponentType>,
-    required: true,
-  },
-})
-const id = getUUID();
-console.log(id)
-const { w, h } = toRefs(props.chartConfig.attr)
-const { boxWidth, boxHeight,outBorderColor,inBorderColor,startColor,endColor ,borderWidth} = toRefs(props.chartConfig.option)
-
-const getBox = ():string =>{
-  return `${ w.value / 10 +50},30 ${ w.value / 10 + boxWidth.value},30 ${boxWidth.value},${boxHeight.value} 50,${boxHeight.value} ${ w.value / 10 +50},30`
-}
-
-const getBorder = ():string =>{
-  return `${ w.value / 10 + 45},20 ${ w.value / 10 + boxWidth.value + 20},20 ${boxWidth.value + 10},${boxHeight.value+10} 30,${boxHeight.value+10} ${ w.value / 10 + 45},20`
-}
-
-</script>
-

src/packages/components/Decorates/FlowChart/FlowChartLine/config.ts

@@ -0,0 +1,19 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { FlowChartLineConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  endWidth: 15,
+  lineWidth: 2, //线条粗细
+  lineNum: 2, //向下数量
+  lineNumUp: 2, //向上数量
+  backgroundCol: '#303a4c', //线条背景
+  animateCol: '#3788ea' //流动动画背景
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = FlowChartLineConfig.key
+  public chartConfig = cloneDeep(FlowChartLineConfig)
+  public option = cloneDeep(option)
+}

src/packages/components/Decorates/FlowChart/FlowChartLine/config.vue

@@ -1,41 +1,17 @@
 <template>
   <CollapseItem name="线条" :expanded="true">
-    <SettingItemBox name="具体">
-      <SettingItem name="水平层级宽度">
-        <n-input-number
-            size="small"
-            v-model:value="optionData.lineLength"
-        ></n-input-number>
-      </SettingItem>
-      <SettingItem name="纵向层级宽度">
-        <n-input-number
-            size="small"
-            v-model:value="optionData.lineColLength"
-        ></n-input-number>
-      </SettingItem>
-    </SettingItemBox>
-
     <SettingItemBox name="折线数量">
       <SettingItem name="向下增加">
-        <n-input-number
+        <n-input-number size="small" :min="0" v-model:value="optionData.lineNum"></n-input-number>
-            size="small"
-            v-model:value="optionData.lineNum"
-        ></n-input-number>
       </SettingItem>
       <SettingItem name="向上增加">
-        <n-input-number
+        <n-input-number size="small" :min="0" v-model:value="optionData.lineNumUp"></n-input-number>
-            size="small"
-            v-model:value="optionData.lineNumUp"
-        ></n-input-number>
       </SettingItem>
     </SettingItemBox>
 
     <SettingItemBox name="折线样式">
       <SettingItem name="折线粗细">
-        <n-input-number
+        <n-input-number size="small" :min="1" v-model:value="optionData.lineWidth"></n-input-number>
-            size="small"
-            v-model:value="optionData.lineWidth"
-        ></n-input-number>
       </SettingItem>
       <SettingItem name="背景条颜色">
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backgroundCol"></n-color-picker>
@@ -44,18 +20,12 @@
         <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.animateCol"></n-color-picker>
       </SettingItem>
     </SettingItemBox>
-
   </CollapseItem>
-
 </template>
 
 <script setup lang="ts">
 import { PropType } from 'vue'
-import {
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
-  CollapseItem,
-  SettingItemBox,
-  SettingItem
-} from '@/components/Pages/ChartItemSetting'
 import { option } from './config'
 
 const props = defineProps({

src/packages/components/Decorates/FlowChart/FlowChartLine/index.ts

@@ -1,11 +1,11 @@
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
-export const FlowChart01Config: ConfigType = {
+export const FlowChartLineConfig: ConfigType = {
-    key: 'FlowChart01',
+    key: 'FlowChartLine',
-    chartKey: 'VFlowChart01',
+    chartKey: 'VFlowChartLine',
-    conKey: 'VCFlowChart01',
+    conKey: 'VCFlowChartLine',
-    title: '流程-折线',
+    title: '流程线',
     category: ChatCategoryEnum.FlowChart,
     categoryName: ChatCategoryEnumName.FlowChart,
     package: PackagesCategoryEnum.DECORATES,

src/packages/components/Decorates/FlowChart/FlowChartLine/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <svg :width="w" :height="h">
+    <polyline :stroke-width="lineWidth" :points="getStartPoint(-1, '')" :stroke="backgroundCol" fill="none" />
+    <polyline
+      :stroke-width="lineWidth"
+      class="g-dashed-line"
+      :points="getStartPoint(-1, '')"
+      :stroke="animateCol"
+      fill="none"
+    />
+    <polyline
+      :stroke-width="lineWidth"
+      v-for="(item, index) in lineNum"
+      :key="index"
+      :points="getStartPoint(index + 1, 'down')"
+      :stroke="backgroundCol"
+      fill="none"
+    />
+    <polyline
+      :stroke-width="lineWidth"
+      class="g-dashed-line"
+      v-for="(item, index) in lineNum"
+      :key="index"
+      :points="getStartPoint(index + 1, 'down')"
+      :stroke="animateCol"
+      fill="none"
+    />
+    <polyline
+      :stroke-width="lineWidth"
+      v-for="(item, index) in lineNumUp"
+      :key="index"
+      :points="getStartPoint(index + 1, 'up')"
+      :stroke="backgroundCol"
+      fill="none"
+    />
+    <polyline
+      :stroke-width="lineWidth"
+      class="g-dashed-line"
+      v-for="(item, index) in lineNumUp"
+      :key="index"
+      :points="getStartPoint(index + 1, 'up')"
+      :stroke="animateCol"
+      fill="none"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, computed } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { lineNum, lineNumUp, lineWidth, backgroundCol, animateCol } = toRefs(props.chartConfig.option)
+const getStartPoint = (num: number, direction: string) => {
+  const lineLength = w.value / 2
+  const lineColLength =
+    h.value / (lineNumUp.value + lineNum.value) - lineWidth.value / (lineNumUp.value + lineNum.value)
+  if (num === -1 && direction === '') {
+    return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength * 2},${h.value / 2}`
+  } else if (num !== -1 && direction === 'down') {
+    return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength},${h.value / 2 + num * lineColLength},${
+      lineLength * 2
+    },${h.value / 2 + num * lineColLength}`
+  } else if (num !== -1 && direction === 'up') {
+    return `0,${h.value / 2} ${lineLength},${h.value / 2} ${lineLength},${h.value / 2 - num * lineColLength},${
+      lineLength * 2
+    },${h.value / 2 - num * lineColLength}`
+  }
+}
+</script>
+
+<style scoped>
+.g-dashed-line {
+  stroke-dasharray: 20 130;
+  stroke-dashoffset: 0;
+  animation: move 3s infinite linear;
+}
+@keyframes move {
+  0% {
+    stroke-dashoffset: 20;
+  }
+  100% {
+    stroke-dashoffset: -130;
+  }
+}
+</style>

src/packages/components/Decorates/FlowChart/index.ts

@@ -1,6 +1,3 @@
-import { FlowChart01Config } from './FlowChart01/index'
+import { FlowChartLineConfig } from './FlowChartLine/index'
-import { FlowChart02Config } from './FlowChart02/index'
-import { FlowChart03Config } from './FlowChart03/index'
-import { FlowChart04Config } from './FlowChart04/index'
 
-export default [FlowChart01Config, FlowChart02Config, FlowChart03Config, FlowChart04Config]
+export default [FlowChartLineConfig]

src/packages/components/Decorates/Mores/CirclePoint/config.ts

@@ -1,6 +1,6 @@
 import { PublicConfigClass } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
-import { FlowChart04Config } from './index'
+import { CirclePointConfig } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 import { chartInitConfig } from '@/settings/designSetting'
 
@@ -13,8 +13,8 @@ export const option = {
 }
 
 export default class Config extends PublicConfigClass implements CreateComponentType {
-  public key = FlowChart04Config.key
+  public key = CirclePointConfig.key
   public attr = { ...chartInitConfig, w: 97, h: 97, zIndex: 1 }
-  public chartConfig = cloneDeep(FlowChart04Config)
+  public chartConfig = cloneDeep(CirclePointConfig)
   public option = cloneDeep(option)
 }

src/packages/components/Decorates/Mores/CirclePoint/index.ts

@@ -1,13 +1,13 @@
 import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
 import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
 
-export const FlowChart04Config: ConfigType = {
+export const CirclePointConfig: ConfigType = {
-    key: 'FlowChart04',
+    key: 'CirclePoint',
-    chartKey: 'VFlowChart04',
+    chartKey: 'VCirclePoint',
-    conKey: 'VCFlowChart04',
+    conKey: 'VCCirclePoint',
     title: '圆点光环',
-    category: ChatCategoryEnum.FlowChart,
+    category: ChatCategoryEnum.MORE,
-    categoryName: ChatCategoryEnumName.FlowChart,
+    categoryName: ChatCategoryEnumName.MORE,
     package: PackagesCategoryEnum.DECORATES,
     chartFrame: ChartFrameEnum.STATIC,
     image: 'flow-circle.png'

src/packages/components/Decorates/Mores/index.ts

@@ -6,6 +6,7 @@ import { CountDownConfig } from './CountDown/index'
 import { FlipperNumberConfig } from './FlipperNumber'
 import { PipelineHConfig } from './PipelineH/index'
 import { PipelineVConfig } from './PipelineV/index'
+import { CirclePointConfig } from './CirclePoint/index'
 
 export default [
   NumberConfig,
@@ -15,5 +16,6 @@ export default [
   ClockConfig,
   FullScreenConfig,
   PipelineHConfig,
-  PipelineVConfig
+  PipelineVConfig,
+  CirclePointConfig
 ]