feat：新增边框13

src/packages/components/Decorates/Borders/BorderFirst/config.ts

@@ -1,14 +1,15 @@
 import { publicConfig } from '@/packages/public'
 import { CreateComponentType } from '@/packages/index.d'
-import {BorderCommonConfig} from './index'
+import {BorderFirstConfig} from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  colors: ['#6586ec', '#2cf7fe']
+  dur: 0.5,
+  colors: ['#4fd2dd', '#235fa7']
 } 
 
 export default class Config extends publicConfig implements CreateComponentType {
-  public key = BorderCommonConfig.key
+  public key = BorderFirstConfig.key
-  public chartConfig = cloneDeep(BorderCommonConfig)
+  public chartConfig = cloneDeep(BorderFirstConfig)
   public option = option
 }

src/packages/components/Decorates/Borders/BorderFirst/config.vue

@@ -0,0 +1,54 @@
+<template>
+  <CollapseItem name="边框" :expanded="true">
+    <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>
+
+  <CollapseItem name="动画" :expanded="true">
+    <SettingItemBox name="速度">
+      <SettingItem>
+        <n-input-number
+          v-model:value="optionData.dur"
+          :step="0.5"
+          :min="0.5"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/ChartItemSetting/index'
+import { option } from './config'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

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

@@ -1,12 +1,12 @@
-import image from '@/assets/images/chart/decorates/border.png'
+import image from '@/assets/images/chart/decorates/border_first.png'
 import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
 import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
 
-export const BorderCommonConfig: ConfigType = {
+export const BorderFirstConfig: ConfigType = {
-  key: 'BorderCommon',
+  key: 'BorderFirst',
-  chartKey: 'VBorderCommon',
+  chartKey: 'VBorderFirst',
-  conKey: 'VCBorderCommon',
+  conKey: 'VCBorderFirst',
-  title: '边框',
+  title: '边框-01',
   category: ChatCategoryEnum.BORDER,
   categoryName: ChatCategoryEnumName.BORDER,
   package: PackagesCategoryEnum.DECORATES,

src/packages/components/Decorates/Borders/BorderFirst/index.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="go-border-box">
+    <svg :width="w" :height="h">
+      <polygon fill="transparent" :points="`10, 27 10, ${h - 27} 13, ${h - 24} 13, ${h - 21} 24, ${h - 11}
+      38, ${h - 11} 41, ${h - 8} 73, ${h - 8} 75, ${h - 10} 81, ${h - 10}
+      85, ${h - 6} ${w - 85}, ${h - 6} ${w - 81}, ${h - 10} ${w - 75}, ${h - 10}
+      ${w - 73}, ${h - 8} ${w - 41}, ${h - 8} ${w - 38}, ${h - 11}
+      ${w - 24}, ${h - 11} ${w - 13}, ${h - 21} ${w - 13}, ${h - 24}
+      ${w - 10}, ${h - 27} ${w - 10}, 27 ${w - 13}, 25 ${w - 13}, 21
+      ${w - 24}, 11 ${w - 38}, 11 ${w - 41}, 8 ${w - 73}, 8 ${w - 75}, 10
+      ${w - 81}, 10 ${w - 85}, 6 85, 6 81, 10 75, 10 73, 8 41, 8 38, 11 24, 11 13, 21 13, 24`"/>
+    </svg>
+
+    <svg
+      :width="w" 
+      :height="h"
+      :key="item"
+      v-for="item in borders"
+      :class="`${item} border-item`"
+    >
+      <polygon
+        :fill="colors[0]"
+        points="6,66 6,18 12,12 18,12 24,6 27,6 30,9 36,9 39,6 84,6 81,9 75,9 73.2,7 40.8,7 37.8,10.2 24,10.2 12,21 12,24 9,27 9,51 7.8,54 7.8,63"
+      >
+        <animate
+          attributeName="fill"
+          :values="`${colors[0]};${colors[1]};${colors[0]}`"
+          :dur="`${dur}s`"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+      <polygon
+        :fill="colors[1]"
+        points="27.599999999999998,4.8 38.4,4.8 35.4,7.8 30.599999999999998,7.8"
+      >
+        <animate
+          attributeName="fill"
+          :values="`${colors[1]};${colors[0]};${colors[1]}`"
+          :dur="`${dur}s`"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+      <polygon
+        :fill="colors[0]"
+        points="9,54 9,63 7.199999999999999,66 7.199999999999999,75 7.8,78 7.8,110 8.4,110 8.4,66 9.6,66 9.6,54"
+      >
+        <animate
+          attributeName="fill"
+          :values="`${colors[0]};${colors[1]};transparent`"
+          :dur="`${dur + 1}s`"
+          begin="0s"
+          repeatCount="indefinite"
+        />
+      </polygon>
+    </svg>
+  </div>
+</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 borders = ['left-top', 'right-top', 'left-bottom', 'right-bottom']
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const colors = computed(() => {
+  return props.chartConfig.option.colors
+})
+
+const dur = computed(() => {
+  return props.chartConfig.option.dur
+})
+</script>
+
+<style lang="scss" scoped>
+@include go('border-box') {
+  .border-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .right-top {
+    right: 0;
+    transform: rotateY(180deg);
+  }
+  .left-bottom {
+    bottom: 0;
+    transform: rotateX(180deg);
+  }
+  .right-bottom {
+    right: 0;
+    bottom: 0;
+    transform: rotateX(180deg) rotateY(180deg);
+  }
+}
+</style>

src/packages/components/Decorates/Borders/BorderThirteenth/config.ts

@@ -0,0 +1,15 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { BorderThirteenthConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  colors: ['#6586ec', '#2cf7fe']
+}
+
+export default class Config extends publicConfig
+  implements CreateComponentType {
+  public key = BorderThirteenthConfig.key
+  public chartConfig = cloneDeep(BorderThirteenthConfig)
+  public option = option
+}

src/packages/components/Decorates/Borders/BorderThirteenth/config.vue

@@ -39,5 +39,4 @@ const props = defineProps({
     required: true
   }
 })
-console.log(props.optionData)
 </script>

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

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/border_thirteenth.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const BorderThirteenthConfig: ConfigType = {
+  key: 'BorderThirteenth',
+  chartKey: 'VBorderThirteenth',
+  conKey: 'VCBorderThirteenth',
+  title: '边框-13',
+  category: ChatCategoryEnum.BORDER,
+  categoryName: ChatCategoryEnumName.BORDER,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

src/packages/components/Decorates/Borders/BorderThirteenth/index.vue

@@ -50,6 +50,10 @@ const props = defineProps({
 const { w, h } = toRefs(props.chartConfig.attr)
 
 const colors = computed(() => {
-  return props.chartConfig.option?.colors
+  return props.chartConfig.option.colors
 })
 </script>
+
+<style lang="scss" scoped>
+@include go('border-box') {}
+</style>

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

@@ -1,3 +1,4 @@
-import { BorderCommonConfig } from './BorderCommon/index'
+import { BorderThirteenthConfig } from './BorderThirteenth/index'
+import { BorderFirstConfig } from './BorderFirst/index'
 
-export default [BorderCommonConfig]
+export default [BorderFirstConfig, BorderThirteenthConfig]