!227 新增流程通用组件

Merge pull request !227 from 阿飞/dev1

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

@@ -0,0 +1,21 @@
+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/config.vue

@@ -0,0 +1,67 @@
+<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
+            size="small"
+            v-model:value="optionData.lineNum"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="向上增加">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.lineNumUp"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="折线样式">
+      <SettingItem name="折线粗细">
+        <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>
+      </SettingItem>
+      <SettingItem name="流动颜色">
+        <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 {
+  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/FlowChart01/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const FlowChart01Config: ConfigType = {
+    key: 'FlowChart01',
+    chartKey: 'VFlowChart01',
+    conKey: 'VCFlowChart01',
+    title: '流程-折线',
+    category: ChatCategoryEnum.FlowChart,
+    categoryName: ChatCategoryEnumName.FlowChart,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'zhexian.png'
+}

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

@@ -0,0 +1,51 @@
+<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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,56 @@
+<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

@@ -0,0 +1,14 @@
+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: 'wubianxing.png'
+}

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

@@ -0,0 +1,34 @@
+<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

@@ -0,0 +1,20 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { FlowChart03Config} from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+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 chartConfig = cloneDeep(FlowChart03Config)
+    public option = cloneDeep(option)
+}

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

@@ -0,0 +1,59 @@
+<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

@@ -0,0 +1,14 @@
+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: 'pingxing.png'
+}

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

@@ -0,0 +1,39 @@
+<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/FlowChart04/config.ts

@@ -0,0 +1,18 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { FlowChart04Config} from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+    outCircle:15,
+    inCircle:5,
+    outCircleColor:'#3f5261',
+    inCircleColor:'#fff',
+    outCircleWidth:2
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+    public key = FlowChart04Config.key
+    public chartConfig = cloneDeep(FlowChart04Config)
+    public option = cloneDeep(option)
+}

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

@@ -0,0 +1,51 @@
+<template>
+  <CollapseItem name="线条" :expanded="true">
+    <SettingItemBox name="具体">
+      <SettingItem name="外圆环半径">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.outCircle"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="内部圆形半径">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.inCircle"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="外圆环粗细">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.outCircleWidth"
+        ></n-input-number>
+      </SettingItem>
+
+      <SettingItem name="外圆环颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.outCircleColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="内部圆形颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.inCircleColor"></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/FlowChart04/index.ts

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

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

@@ -0,0 +1,28 @@
+<template>
+  <svg :width="w" :height="h">
+    <defs>
+      <filter id="blurFilter" x="-20%" y="-20%" width="140%" height="140%">
+        <feGaussianBlur in="SourceGraphic" stdDeviation="1" />
+      </filter>
+    </defs>
+    <circle :cx="w / 2 " :cy="h / 2" :r="inCircle" :fill="inCircleColor" filter="url(#blurFilter)"/>
+    <!-- 外部圆环 -->
+    <circle :cx="w / 2 " :cy="h / 2" :r="outCircle" fill="none" :stroke="outCircleColor"  :stroke-width="outCircleWidth"/>
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } 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 { outCircle,inCircle,outCircleColor,inCircleColor,outCircleWidth} = toRefs(props.chartConfig.option)
+
+</script>
+

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

@@ -0,0 +1,16 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { FlowChart05Config} from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+    outRect:80,
+    outRectColor:'#2b93c6',
+    backColor:'#0e457b'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+    public key = FlowChart05Config.key
+    public chartConfig = cloneDeep(FlowChart05Config)
+    public option = cloneDeep(option)
+}

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

@@ -0,0 +1,40 @@
+<template>
+  <CollapseItem name="线条" :expanded="true">
+    <SettingItemBox name="具体">
+      <SettingItem name="大小">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.outRect"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="外边框颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.outRectColor"></n-color-picker>
+      </SettingItem>
+
+      <SettingItem name="斜线背景颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backColor"></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/FlowChart05/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const FlowChart05Config: ConfigType = {
+    key: 'FlowChart05',
+    chartKey: 'VFlowChart05',
+    conKey: 'VCFlowChart05',
+    title: '流程-icon01',
+    category: ChatCategoryEnum.FlowChart,
+    categoryName: ChatCategoryEnumName.FlowChart,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'icon1.png'
+}

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

@@ -0,0 +1,35 @@
+<template>
+  <svg :width="w" :height="h">
+    <!-- 外部圆角正方形 -->
+    <rect x="10" y="10" :width="outRect" :height="outRect" rx="20" fill="none"  :stroke="outRectColor" stroke-width="3"/>
+
+    <!-- 斜线背景 -->
+    <pattern :id="id" patternUnits="userSpaceOnUse" width="8" height="8" >
+      <path d="M-1,1 l2,2 M0,0 l8,8 M7,9 l2,2" :stroke="backColor" stroke-width="1" />
+    </pattern>
+    <rect x="12" y="12" :width="outRect - 5" :height="outRect - 5" rx="20" :fill="`url(#${id})`" />
+
+    <!-- 图标 -->
+    <foreignObject :x="10 + outRect / 4" :y="10 + outRect / 4" :width="outRect / 2" :height="outRect / 2">
+      <img src="./icon1.png" alt="图标" style="width: 100%; height: 100%;" />
+    </foreignObject>
+  </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 { outRect,outRectColor,backColor} = toRefs(props.chartConfig.option)
+
+</script>
+

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

@@ -0,0 +1,16 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { FlowChart06Config} from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+    outRect:80,
+    outRectColor:'#2b93c6',
+    backColor:'#0e457b'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+    public key = FlowChart06Config.key
+    public chartConfig = cloneDeep(FlowChart06Config)
+    public option = cloneDeep(option)
+}

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

@@ -0,0 +1,40 @@
+<template>
+  <CollapseItem name="线条" :expanded="true">
+    <SettingItemBox name="具体">
+      <SettingItem name="大小">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.outRect"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="外边框颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.outRectColor"></n-color-picker>
+      </SettingItem>
+
+      <SettingItem name="斜线背景颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backColor"></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/FlowChart06/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const FlowChart06Config: ConfigType = {
+    key: 'FlowChart06',
+    chartKey: 'VFlowChart06',
+    conKey: 'VCFlowChart06',
+    title: '流程-icon02',
+    category: ChatCategoryEnum.FlowChart,
+    categoryName: ChatCategoryEnumName.FlowChart,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'icon2.png'
+}

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

@@ -0,0 +1,35 @@
+<template>
+  <svg :width="w" :height="h">
+    <!-- 外部圆角正方形 -->
+    <rect x="10" y="10" :width="outRect" :height="outRect" rx="20" fill="none"  :stroke="outRectColor" stroke-width="3"/>
+
+    <!-- 斜线背景 -->
+    <pattern :id="id" patternUnits="userSpaceOnUse" width="8" height="8" >
+      <path d="M-1,1 l2,2 M0,0 l8,8 M7,9 l2,2" :stroke="backColor" stroke-width="1" />
+    </pattern>
+    <rect x="12" y="12" :width="outRect - 5" :height="outRect - 5" rx="20" :fill="`url(#${id})`" />
+
+    <!-- 图标 -->
+    <foreignObject :x="10 + outRect / 4" :y="10 + outRect / 4" :width="outRect / 2" :height="outRect / 2">
+      <img src="./icon02.png" alt="图标" style="width: 100%; height: 100%;" />
+    </foreignObject>
+  </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 { outRect,outRectColor,backColor} = toRefs(props.chartConfig.option)
+
+</script>
+

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

@@ -0,0 +1,16 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { FlowChart07Config} from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+    outRect:80,
+    outRectColor:'#2b93c6',
+    backColor:'#0e457b'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+    public key = FlowChart07Config.key
+    public chartConfig = cloneDeep(FlowChart07Config)
+    public option = cloneDeep(option)
+}

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

@@ -0,0 +1,40 @@
+<template>
+  <CollapseItem name="线条" :expanded="true">
+    <SettingItemBox name="具体">
+      <SettingItem name="大小">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.outRect"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="外边框颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.outRectColor"></n-color-picker>
+      </SettingItem>
+
+      <SettingItem name="斜线背景颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backColor"></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/FlowChart07/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const FlowChart07Config: ConfigType = {
+    key: 'FlowChart07',
+    chartKey: 'VFlowChart07',
+    conKey: 'VCFlowChart07',
+    title: '流程-icon03',
+    category: ChatCategoryEnum.FlowChart,
+    categoryName: ChatCategoryEnumName.FlowChart,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'icon3.png'
+}

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

@@ -0,0 +1,35 @@
+<template>
+  <svg :width="w" :height="h">
+    <!-- 外部圆角正方形 -->
+    <rect x="10" y="10" :width="outRect" :height="outRect" rx="20" fill="none"  :stroke="outRectColor" stroke-width="3"/>
+
+    <!-- 斜线背景 -->
+    <pattern :id="id" patternUnits="userSpaceOnUse" width="8" height="8" >
+      <path d="M-1,1 l2,2 M0,0 l8,8 M7,9 l2,2" :stroke="backColor" stroke-width="1" />
+    </pattern>
+    <rect x="12" y="12" :width="outRect - 5" :height="outRect - 5" rx="20" :fill="`url(#${id})`" />
+
+    <!-- 图标 -->
+    <foreignObject :x="10 + outRect / 4" :y="10 + outRect / 4" :width="outRect / 2" :height="outRect / 2">
+      <img src="./icon03.png" alt="图标" style="width: 100%; height: 100%;" />
+    </foreignObject>
+  </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 { outRect,outRectColor,backColor} = toRefs(props.chartConfig.option)
+
+</script>
+

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

@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { FlowChart08Config} from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+    outRect:80,
+    outRectColor:'#2b93c6',
+    backColor:'#0e457b'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+    public key = FlowChart08Config.key
+    public chartConfig = cloneDeep(FlowChart08Config)
+    public option = cloneDeep(option)
+}
+

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

@@ -0,0 +1,40 @@
+<template>
+  <CollapseItem name="线条" :expanded="true">
+    <SettingItemBox name="具体">
+      <SettingItem name="大小">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.outRect"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="外边框颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.outRectColor"></n-color-picker>
+      </SettingItem>
+
+      <SettingItem name="斜线背景颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backColor"></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/FlowChart08/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const FlowChart08Config: ConfigType = {
+    key: 'FlowChart08',
+    chartKey: 'VFlowChart08',
+    conKey: 'VCFlowChart08',
+    title: '流程-icon04',
+    category: ChatCategoryEnum.FlowChart,
+    categoryName: ChatCategoryEnumName.FlowChart,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'icon4.png'
+}

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

@@ -0,0 +1,35 @@
+<template>
+  <svg :width="w" :height="h">
+    <!-- 外部圆角正方形 -->
+    <rect x="10" y="10" :width="outRect" :height="outRect" rx="20" fill="none"  :stroke="outRectColor" stroke-width="3"/>
+
+    <!-- 斜线背景 -->
+    <pattern :id="id" patternUnits="userSpaceOnUse" width="8" height="8" >
+      <path d="M-1,1 l2,2 M0,0 l8,8 M7,9 l2,2" :stroke="backColor" stroke-width="1" />
+    </pattern>
+    <rect x="12" y="12" :width="outRect - 5" :height="outRect - 5" rx="20" :fill="`url(#${id})`" />
+
+    <!-- 图标 -->
+    <foreignObject :x="10 + outRect / 4" :y="10 + outRect / 4" :width="outRect / 2" :height="outRect / 2">
+      <img src="./icon4.png" alt="图标" style="width: 100%; height: 100%;" />
+    </foreignObject>
+  </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 { outRect,outRectColor,backColor} = toRefs(props.chartConfig.option)
+
+</script>
+

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

@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { FlowChart09Config} from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+    outRect:80,
+    outRectColor:'#2b93c6',
+    backColor:'#0e457b'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+    public key = FlowChart09Config.key
+    public chartConfig = cloneDeep(FlowChart09Config)
+    public option = cloneDeep(option)
+}
+

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

@@ -0,0 +1,40 @@
+<template>
+  <CollapseItem name="线条" :expanded="true">
+    <SettingItemBox name="具体">
+      <SettingItem name="大小">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.outRect"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="外边框颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.outRectColor"></n-color-picker>
+      </SettingItem>
+
+      <SettingItem name="斜线背景颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backColor"></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/FlowChart09/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const FlowChart09Config: ConfigType = {
+    key: 'FlowChart09',
+    chartKey: 'VFlowChart09',
+    conKey: 'VCFlowChart09',
+    title: '流程-icon05',
+    category: ChatCategoryEnum.FlowChart,
+    categoryName: ChatCategoryEnumName.FlowChart,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'icon5.png'
+}

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

@@ -0,0 +1,35 @@
+<template>
+  <svg :width="w" :height="h">
+    <!-- 外部圆角正方形 -->
+    <rect x="10" y="10" :width="outRect" :height="outRect" rx="20" fill="none"  :stroke="outRectColor" stroke-width="3"/>
+
+    <!-- 斜线背景 -->
+    <pattern :id="id" patternUnits="userSpaceOnUse" width="8" height="8" >
+      <path d="M-1,1 l2,2 M0,0 l8,8 M7,9 l2,2" :stroke="backColor" stroke-width="1" />
+    </pattern>
+    <rect x="12" y="12" :width="outRect - 5" :height="outRect - 5" rx="20" :fill="`url(#${id})`" />
+
+    <!-- 图标 -->
+    <foreignObject :x="10 + outRect / 4" :y="10 + outRect / 4" :width="outRect / 2" :height="outRect / 2">
+      <img src="./icon05.png" alt="图标" style="width: 100%; height: 100%;" />
+    </foreignObject>
+  </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 { outRect,outRectColor,backColor} = toRefs(props.chartConfig.option)
+
+</script>
+

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

@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { FlowChart10Config} from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+    outRect:80,
+    outRectColor:'#2b93c6',
+    backColor:'#0e457b'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+    public key = FlowChart10Config.key
+    public chartConfig = cloneDeep(FlowChart10Config)
+    public option = cloneDeep(option)
+}
+

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

@@ -0,0 +1,40 @@
+<template>
+  <CollapseItem name="线条" :expanded="true">
+    <SettingItemBox name="具体">
+      <SettingItem name="大小">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.outRect"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="外边框颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.outRectColor"></n-color-picker>
+      </SettingItem>
+
+      <SettingItem name="斜线背景颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backColor"></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/FlowChart10/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const FlowChart10Config: ConfigType = {
+    key: 'FlowChart10',
+    chartKey: 'VFlowChart10',
+    conKey: 'VCFlowChart10',
+    title: '流程-icon06',
+    category: ChatCategoryEnum.FlowChart,
+    categoryName: ChatCategoryEnumName.FlowChart,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'icon6.png'
+}

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

@@ -0,0 +1,35 @@
+<template>
+  <svg :width="w" :height="h">
+    <!-- 外部圆角正方形 -->
+    <rect x="10" y="10" :width="outRect" :height="outRect" rx="20" fill="none"  :stroke="outRectColor" stroke-width="3"/>
+
+    <!-- 斜线背景 -->
+    <pattern :id="id" patternUnits="userSpaceOnUse" width="8" height="8" >
+      <path d="M-1,1 l2,2 M0,0 l8,8 M7,9 l2,2" :stroke="backColor" stroke-width="1" />
+    </pattern>
+    <rect x="12" y="12" :width="outRect - 5" :height="outRect - 5" rx="20" :fill="`url(#${id})`" />
+
+    <!-- 图标 -->
+    <foreignObject :x="10 + outRect / 4" :y="10 + outRect / 4" :width="outRect / 2" :height="outRect / 2">
+      <img src="./icon06.png" alt="图标" style="width: 100%; height: 100%;" />
+    </foreignObject>
+  </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 { outRect,outRectColor,backColor} = toRefs(props.chartConfig.option)
+
+</script>
+

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

@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { FlowChart11Config} from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+    outRect:80,
+    outRectColor:'#2b93c6',
+    backColor:'#0e457b'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+    public key = FlowChart11Config.key
+    public chartConfig = cloneDeep(FlowChart11Config)
+    public option = cloneDeep(option)
+}
+

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

@@ -0,0 +1,40 @@
+<template>
+  <CollapseItem name="线条" :expanded="true">
+    <SettingItemBox name="具体">
+      <SettingItem name="大小">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.outRect"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="外边框颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.outRectColor"></n-color-picker>
+      </SettingItem>
+
+      <SettingItem name="斜线背景颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backColor"></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/FlowChart11/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const FlowChart11Config: ConfigType = {
+    key: 'FlowChart11',
+    chartKey: 'VFlowChart11',
+    conKey: 'VCFlowChart11',
+    title: '流程-icon07',
+    category: ChatCategoryEnum.FlowChart,
+    categoryName: ChatCategoryEnumName.FlowChart,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'icon7.png'
+}

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

@@ -0,0 +1,36 @@
+<template>
+  <svg :width="w" :height="h">
+    <!-- 外部圆角正方形 -->
+    <rect x="10" y="10" :width="outRect" :height="outRect" rx="20" fill="none"  :stroke="outRectColor" stroke-width="3"/>
+
+    <!-- 斜线背景 -->
+    <pattern :id="id" patternUnits="userSpaceOnUse" width="8" height="8" >
+      <path d="M-1,1 l2,2 M0,0 l8,8 M7,9 l2,2" :stroke="backColor" stroke-width="1" />
+    </pattern>
+    <rect x="12" y="12" :width="outRect - 5" :height="outRect - 5" rx="20" :fill="`url(#${id})`" />
+
+    <!-- 图标 -->
+    <foreignObject :x="10 + outRect / 4" :y="10 + outRect / 4" :width="outRect / 2" :height="outRect / 2">
+      <img src="./icon07.png" alt="图标" style="width: 100%; height: 100%;" />
+    </foreignObject>
+
+  </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 { outRect,outRectColor,backColor} = toRefs(props.chartConfig.option)
+
+</script>
+

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

@@ -0,0 +1,17 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { FlowChart12Config} from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+    outRect:80,
+    outRectColor:'#2b93c6',
+    backColor:'#0e457b'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+    public key = FlowChart12Config.key
+    public chartConfig = cloneDeep(FlowChart12Config)
+    public option = cloneDeep(option)
+}
+

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

@@ -0,0 +1,40 @@
+<template>
+  <CollapseItem name="线条" :expanded="true">
+    <SettingItemBox name="具体">
+      <SettingItem name="大小">
+        <n-input-number
+            size="small"
+            v-model:value="optionData.outRect"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="外边框颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.outRectColor"></n-color-picker>
+      </SettingItem>
+
+      <SettingItem name="斜线背景颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.backColor"></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/FlowChart12/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const FlowChart12Config: ConfigType = {
+    key: 'FlowChart12',
+    chartKey: 'VFlowChart12',
+    conKey: 'VCFlowChart12',
+    title: '流程-icon08',
+    category: ChatCategoryEnum.FlowChart,
+    categoryName: ChatCategoryEnumName.FlowChart,
+    package: PackagesCategoryEnum.DECORATES,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'icon8.png'
+}

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

@@ -0,0 +1,35 @@
+<template>
+  <svg :width="w" :height="h">
+    <!-- 外部圆角正方形 -->
+    <rect x="10" y="10" :width="outRect" :height="outRect" rx="20" fill="none"  :stroke="outRectColor" stroke-width="3"/>
+
+    <!-- 斜线背景 -->
+    <pattern :id="id" patternUnits="userSpaceOnUse" width="8" height="8" >
+      <path d="M-1,1 l2,2 M0,0 l8,8 M7,9 l2,2" :stroke="backColor" stroke-width="1" />
+    </pattern>
+    <rect x="12" y="12" :width="outRect - 5" :height="outRect - 5" rx="20" :fill="`url(#${id})`" />
+
+    <!-- 图标 -->
+    <foreignObject :x="10 + outRect / 4" :y="10 + outRect / 4" :width="outRect / 2" :height="outRect / 2">
+      <img src="./icon08.png" alt="图标" style="width: 100%; height: 100%;" />
+    </foreignObject>
+  </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 { outRect,outRectColor,backColor} = toRefs(props.chartConfig.option)
+
+</script>
+

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

@@ -0,0 +1,27 @@
+import { FlowChart01Config } from "./FlowChart01/index";
+import { FlowChart02Config } from "./FlowChart02/index";
+import { FlowChart03Config } from "./FlowChart03/index";
+import { FlowChart04Config } from "./FlowChart04/index";
+import { FlowChart05Config } from "./FlowChart05/index";
+import { FlowChart06Config } from "./FlowChart06/index";
+import { FlowChart07Config } from "./FlowChart07/index";
+import { FlowChart08Config } from "./FlowChart08/index";
+import { FlowChart09Config } from "./FlowChart09/index";
+import { FlowChart10Config } from "./FlowChart10/index";
+import { FlowChart11Config } from "./FlowChart11/index";
+import { FlowChart12Config } from "./FlowChart12/index";
+
+export default [
+    FlowChart01Config,
+    FlowChart02Config,
+    FlowChart03Config,
+    FlowChart04Config,
+    FlowChart05Config,
+    FlowChart06Config,
+    FlowChart07Config,
+    FlowChart08Config,
+    FlowChart09Config,
+    FlowChart10Config,
+    FlowChart11Config,
+    FlowChart12Config
+]

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

@@ -1,6 +1,7 @@
 export enum ChatCategoryEnum {
   BORDER = 'Borders',
   DECORATE = 'Decorates',
+  FlowChart = 'FlowChart',
   THREE = 'Three',
   MORE = 'Mores'
 }
@@ -8,6 +9,7 @@ export enum ChatCategoryEnum {
 export enum ChatCategoryEnumName {
   BORDER = '边框',
   DECORATE = '装饰',
+  FlowChart = '流程',
   THREE = '三维',
   MORE = '更多'
-}
+}

src/packages/components/Decorates/index.ts

@@ -1,6 +1,7 @@
 import Borders from './Borders'
 import Decorates from './Decorates'
+import FlowChart from './FlowChart'
 import Three from './Three'
 import Mores from './Mores'
 
-export const DecorateList = [...Borders, ...Decorates, ...Three, ...Mores]
+export const DecorateList = [...Borders, ...Decorates,...FlowChart, ...Three, ...Mores]