feat: 新增边框8

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

@@ -28,6 +28,7 @@
       <SettingItem>
         <n-input-number
           v-model:value="optionData.dur"
+          size="small"
           :step="0.5"
           :min="0.5"
         ></n-input-number>
@@ -39,9 +40,9 @@
     <SettingItemBox name="颜色">
       <SettingItem>
         <n-color-picker
+          v-model:value="optionData.backgroundColor"
           size="small"
           :modes="['hex']"
-          v-model:value="optionData.backgroundColor"
         ></n-color-picker>
       </SettingItem>
     </SettingItemBox>

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

@@ -0,0 +1,17 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Border08Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  colors: ['#235fa7', '#4fd2dd'],
+  dur: 3,
+  reverse: false,
+  backgroundColor: '#00000000'
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = Border08Config.key
+  public chartConfig = cloneDeep(Border08Config)
+  public option = option
+}

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

@@ -0,0 +1,73 @@
+<template>
+  <CollapseItem name="动画" :expanded="true">
+    <SettingItemBox name="设置">
+      <SettingItem name="速度">
+        <n-input-number
+          v-model:value="optionData.dur"
+          size="small"
+          :step="0.5"
+          :min="0.5"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem>
+        <n-space>
+          <n-text>开启反向</n-text>
+          <n-switch size="small" v-model:value="optionData.reverse" />
+        </n-space>
+      </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>
+
+  <CollapseItem name="背景" :expanded="true">
+    <SettingItemBox name="颜色">
+      <SettingItem>
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.backgroundColor"
+        ></n-color-picker>
+      </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/Border08/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/border08.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Border08Config: ConfigType = {
+  key: 'Border08',
+  chartKey: 'VBorder08',
+  conKey: 'VCBorder08',
+  title: '边框-08',
+  category: ChatCategoryEnum.BORDER,
+  categoryName: ChatCategoryEnumName.BORDER,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

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

@@ -0,0 +1,83 @@
+<template>
+  <div class="go-border-box">
+    <svg class="bv-border-svg-container" :width="w" :height="h">
+      <defs>
+        <path :id="path" :d="pathD" fill="transparent" />
+        <radialGradient :id="gradient" cx="50%" cy="50%" r="50%">
+          <stop offset="0%" stop-color="#fff" stop-opacity="1" />
+          <stop offset="100%" stop-color="#fff" stop-opacity="0" />
+        </radialGradient>
+
+        <mask :id="mask">
+          <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
+            <animateMotion
+              :dur="`${dur}s`"
+              :path="pathD"
+              rotate="auto"
+              repeatCount="indefinite"
+            />
+          </circle>
+        </mask>
+      </defs>
+
+      <polygon
+        :fill="backgroundColor"
+        :points="`5, 5 ${w - 5}, 5 ${w - 5} ${h - 5} 5, ${
+          h - 5
+        }`"
+      />
+
+      <use :stroke="colors[0]" stroke-width="1" :xlink:href="`#${path}`" />
+
+      <use
+        :stroke="colors[1]"
+        stroke-width="3"
+        :xlink:href="`#${path}`"
+        :mask="`url(#${mask})`"
+      >
+        <animate
+          attributeName="stroke-dasharray"
+          :from="`0, ${length}`"
+          :to="`${length}, 0`"
+          :dur="`${dur}s`"
+          repeatCount="indefinite"
+        />
+      </use>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, computed } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { getUUID } from '@/utils'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const path = `border-box-08-path-${getUUID()}`
+const gradient = `border-box-08-gradient-${getUUID()}`
+const mask = `border-box-08-mask-${getUUID()}`
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const { colors, dur, backgroundColor, reverse } = toRefs(props.chartConfig.option)
+
+const length =  computed(() => {
+  return (w.value + h.value - 5) * 2
+})
+
+const pathD =  computed(() => {
+  if (reverse.value) return `M 2.5, 2.5 L 2.5, ${h.value - 2.5} L ${w.value - 2.5}, ${h.value - 2.5} L ${w.value - 2.5}, 2.5 L 2.5, 2.5`
+  return `M2.5, 2.5 L${w.value - 2.5}, 2.5 L${w.value - 2.5}, ${h.value - 2.5} L2.5, ${h.value - 2.5} L2.5, 2.5`
+})
+
+</script>
+
+<style lang="scss" scoped>
+@include go('border-box') {
+}
+</style>

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

@@ -5,6 +5,7 @@ import { Border04Config } from './Border04/index'
 import { Border05Config } from './Border05/index'
 import { Border06Config } from './Border06/index'
 import { Border07Config } from './Border07/index'
+import { Border08Config } from './Border08/index'
 
 export default [
   Border01Config,
@@ -13,5 +14,6 @@ export default [
   Border04Config,
   Border05Config,
   Border06Config,
-  Border07Config
+  Border07Config,
+  Border08Config
 ]