feat: 新增装饰6组件

src/packages/components/Decorates/Decorates/Decorates06/config.ts

@@ -0,0 +1,19 @@
+import { PublicConfigClass } from '@/packages/public'
+import { chartInitConfig } from '@/settings/designSetting'
+import { CreateComponentType } from '@/packages/index.d'
+import { Decorates06Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  colors: ['#1DC1F533', '#1DC1F5FF'],
+  dataset: '我是标题',
+  textColor: '#fff',
+  textSize: 32
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = Decorates06Config.key
+  public attr = { ...chartInitConfig, w: 500, h: 70, zIndex: 1 }
+  public chartConfig = cloneDeep(Decorates06Config)
+  public option = cloneDeep(option)
+}

src/packages/components/Decorates/Decorates/Decorates06/config.vue

@@ -0,0 +1,42 @@
+<template>
+  <CollapseItem name="内容" expanded>
+    <SettingItemBox name="文字" alone>
+      <SettingItem>
+        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="样式">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.textColor"></n-color-picker>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number v-model:value="optionData.textSize" size="small" :min="12"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+
+  <CollapseItem name="样式" expanded>
+    <SettingItemBox :name="`颜色-${index + 1}`" v-for="(item, index) in optionData.colors" :key="index">
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.colors[index]"></n-color-picker>
+      </SettingItem>
+      <SettingItem>
+        <n-button size="small" @click="optionData.colors[index] = option.colors[index]"> 恢复默认 </n-button>
+      </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/Decorates/Decorates06/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/decorates06.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Decorates06Config: ConfigType = {
+  key: 'Decorates06',
+  chartKey: 'VDecorates06',
+  conKey: 'VCDecorates06',
+  title: '装饰-06',
+  category: ChatCategoryEnum.DECORATE,
+  categoryName: ChatCategoryEnumName.DECORATE,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

src/packages/components/Decorates/Decorates/Decorates06/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="go-border-06">
+    <svg xmlns="http://www.w3.org/2000/svg" :width="w" :height="h">
+      <polygon class="stroke fill" :points="`15.5 6.5 20.5 0.5 50.5 0.5 55.5 6.5 15.5 6.5`" />
+      <polygon
+        class="stroke fill"
+        :points="`15.5 ${h - 6.5} 20.5 ${h - 0.5} 50.5 ${h - 0.5} 55.5 ${h - 6.5} 15.5 ${h - 6.5}`"
+      />
+      <polygon
+        class="stroke fill"
+        :points="`${w - 15.5} 6.5 ${w - 20.5} 0.5 ${w - 50.5} 0.5 ${w - 55.5} 6.5 ${w - 15.5} 6.5`"
+      />
+      <polygon
+        class="stroke fill"
+        :points="`${w - 15.5} ${h - 6.5} ${w - 20.5} ${h - 0.5} ${w - 50.5} ${h - 0.5} ${w - 55.5} ${h - 6.5} ${
+          w - 15.5
+        } ${h - 6.5}`"
+      />
+      <polygon
+        class="stroke fill"
+        :points="`15.5 6.5 0.5 ${h / 2} 15.5 ${h - 6.5} ${w - 15.5} ${h - 6.5} ${w - 0.5} ${h / 2} ${
+          w - 15.5
+        } 6.5 15.5 6.5`"
+      />
+      <polyline class="stroke fill-none" :points="`20.5 14.5 8.5 ${h / 2} 20.5 ${h - 14.5}`" />
+      <polyline class="stroke fill-none" :points="`${w - 20.5} 14.5 ${w - 8.5} ${h / 2} ${w - 20.5} ${h - 14.5}`" />
+    </svg>
+    <span class="text">{{ dataset }}</span>
+  </div>
+</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()
+const { w, h } = toRefs(props.chartConfig.attr)
+const { colors, dataset, textSize, textColor } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('border-06') {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  svg {
+    position: absolute;
+    z-index: -1;
+  }
+
+  .fill {
+    fill: v-bind('colors[0]');
+  }
+  .fill-none {
+    fill: none;
+  }
+  .stroke {
+    stroke: v-bind('colors[1]');
+  }
+
+  .text {
+    color: v-bind('textColor');
+    font-size: v-bind('textSize+"px"');
+  }
+}
+</style>

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

@@ -3,6 +3,7 @@ import { Decorates02Config } from './Decorates02/index'
 import { Decorates03Config } from './Decorates03/index'
 import { Decorates04Config } from './Decorates04/index'
 import { Decorates05Config } from './Decorates05/index'
+import { Decorates06Config } from './Decorates06/index'
 
 export default [
   Decorates01Config,
@@ -10,4 +11,5 @@ export default [
   Decorates03Config,
   Decorates04Config,
   Decorates05Config,
+  Decorates06Config
 ]