fix：新增边框02，03

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

@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, toRefs, reactive } from 'vue'
+import { PropType, computed, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 
 const props = defineProps({

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

@@ -0,0 +1,16 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Decorates02Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  colors: ['#ffffff4d', '#ffffff4d'],
+  dur: 3,
+  lineHeight: 3,
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = Decorates02Config.key
+  public chartConfig = cloneDeep(Decorates02Config)
+  public option = option
+}

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

@@ -0,0 +1,55 @@
+<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"
+          size="small"
+          :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/Decorates/Decorates02/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/decorates02.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const Decorates02Config: ConfigType = {
+  key: 'Decorates02',
+  chartKey: 'VDecorates02',
+  conKey: 'VCDecorates02',
+  title: '装饰-02',
+  category: ChatCategoryEnum.DECORATES,
+  categoryName: ChatCategoryEnumName.DECORATES,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

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

@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="go-decorates-2"
+    :style="`width:${w}px; animation-duration:${dur}s`"
+  >
+    <svg :width="w" :height="3">
+      <polyline :stroke="colors[0]" :points="`0, 2.5 ${w}, 2.5`" />
+      <polyline
+        :stroke="colors[1]"
+        stroke-width="3"
+        stroke-dasharray="20, 80"
+        stroke-dashoffset="-30"
+        :points="`0, 2.5 ${w}, 2.5`"
+      />
+    </svg>
+  </div>
+</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 { colors, dur } = toRefs(props.chartConfig.option)
+</script>
+<style lang="scss" scoped>
+@include go('decorates-2') {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  animation: animationWidth ease-in-out infinite;
+}
+@keyframes animationWidth {
+  0% {
+    width: 0;
+    background-color: aliceblue;
+  }
+
+  70% {
+    width: 100%;
+  }
+
+  100% {
+    width: 100%;
+    background-color: red;
+  }
+}
+</style>

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

@@ -0,0 +1,17 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Decorates03Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  text: '装饰-03',
+  textColor: '#fff',
+  textSize: 24,
+  colors: ['#1dc1f5', '#1dc1f5'],
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = Decorates03Config.key
+  public chartConfig = cloneDeep(Decorates03Config)
+  public option = option
+}

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

@@ -0,0 +1,67 @@
+<template>
+  <CollapseItem name="文字" :expanded="true">
+    <SettingItemBox name="内容" :alone="true">
+      <SettingItem>
+        <n-input v-model:value="optionData.text" 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="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>
+</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/Decorates/Decorates03/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/decorates03.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Decorates03Config: ConfigType = {
+  key: 'Decorates03',
+  chartKey: 'VDecorates03',
+  conKey: 'VCDecorates03',
+  title: '装饰-03',
+  category: ChatCategoryEnum.DECORATES,
+  categoryName: ChatCategoryEnumName.DECORATES,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

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

@@ -0,0 +1,62 @@
+<template>
+  <div class="go-border-03" :style="`width: ${w}px; height: ${h}px`">
+    <svg :width="20" :height="20">
+      <polyline
+        stroke-width="4"
+        fill="transparent"
+        :stroke="colors[0]"
+        points="10, 0 19, 10 10, 20"
+      />
+      <polyline
+        stroke-width="2"
+        fill="transparent"
+        :stroke="colors[1]"
+        points="2, 0 11, 10 2, 20"
+      />
+    </svg>
+    <span :style="`color: ${textColor};font-size: ${textSize}px`">
+      {{ text }}</span
+    >
+    <svg :width="20" :height="20">
+      <polyline
+        stroke-width="4"
+        fill="transparent"
+        :stroke="colors[0]"
+        points="11, 0 2, 10 11, 20"
+      />
+      <polyline
+        stroke-width="2"
+        fill="transparent"
+        :stroke="colors[1]"
+        points="19, 0 10, 10 19, 20"
+      />
+    </svg>
+  </div>
+</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 { colors, text, textSize, textColor } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('border-03') {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  span {
+    text-align: center;
+    flex: 1;
+  }
+}
+</style>

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

@@ -1,3 +1,5 @@
 import { Decorates01Config } from './Decorates01/index'
+import { Decorates02Config } from './Decorates02/index'
+import { Decorates03Config } from './Decorates03/index'
 
-export default [Decorates01Config]
+export default [Decorates01Config, Decorates02Config, Decorates03Config]