feat: 新增边框7

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

@@ -0,0 +1,15 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Border07Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  colors: ['#11eefd', '#0078d2'],
+  backgroundColor: '#00000000'
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = Border07Config.key
+  public chartConfig = cloneDeep(Border07Config)
+  public option = option
+}

src/packages/components/Decorates/Borders/Border07/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-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/Border07/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/border07.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Border07Config: ConfigType = {
+  key: 'Border07',
+  chartKey: 'VBorder07',
+  conKey: 'VCBorder07',
+  title: '边框-07',
+  category: ChatCategoryEnum.BORDER,
+  categoryName: ChatCategoryEnumName.BORDER,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

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

@@ -0,0 +1,143 @@
+<template>
+  <div class="go-border-box">
+    <svg :width="w" :height="h">
+      <defs>
+        <linearGradient :id="filterId" x1="0%" y1="0%" x2="100%" y2="100%">
+          <animate
+            attributeName="x1"
+            values="0%;100%;0%"
+            dur="10s"
+            begin="0s"
+            repeatCount="indefinite"
+          />
+
+          <animate
+            attributeName="x2"
+            values="100%;0%;100%"
+            dur="10s"
+            begin="0s"
+            repeatCount="indefinite"
+          />
+
+          <stop offset="0%" :stop-color="colors[0]">
+            <animate
+              attributeName="stop-color"
+              :values="`${colors[0]};${colors[1]};${colors[0]}`"
+              dur="10s"
+              begin="0s"
+              repeatCount="indefinite"
+            />
+          </stop>
+          <stop offset="100%" :stop-color="colors[1]">
+            <animate
+              attributeName="stop-color"
+              :values="`${colors[1]};${colors[0]};${colors[1]}`"
+              dur="10s"
+              begin="0s"
+              repeatCount="indefinite"
+            />
+          </stop>
+        </linearGradient>
+
+        <mask :id="maskId">
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`8, ${h * 0.4} 8, 3, ${w * 0.4 + 7}, 3`"
+          />
+          <polyline
+            fill="#fff"
+            :points="
+              `8, ${h * 0.15} 8, 3, ${w * 0.1 + 7}, 3
+              ${w * 0.1}, 8 14, 8 14, ${h * 0.15 - 7}
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`${w * 0.5}, 3 ${w - 3}, 3, ${w - 3}, ${h * 0.25}`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${w * 0.52}, 3 ${w * 0.58}, 3
+              ${w * 0.58 - 7}, 9 ${w * 0.52 + 7}, 9
+            `"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${w * 0.9}, 3 ${w - 3}, 3 ${w - 3}, ${h * 0.1}
+              ${w - 9}, ${h * 0.1 - 7} ${w - 9}, 9 ${w * 0.9 + 7}, 9
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`8, ${h * 0.5} 8, ${h - 3} ${w * 0.3 + 7}, ${h - 3}`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              8, ${h * 0.55} 8, ${h * 0.7}
+              2, ${h * 0.7 - 7} 2, ${h * 0.55 + 7}
+            `"
+          />
+
+          <polyline
+            stroke="#fff"
+            stroke-width="3"
+            fill="transparent"
+            :points="`${w * 0.35}, ${h - 3} ${w - 3}, ${h - 3} ${w - 3}, ${h * 0.35}`"
+          />
+          <polyline
+            fill="#fff"
+            :points="`
+              ${w * 0.92}, ${h - 3} ${w - 3}, ${h - 3} ${w - 3}, ${h * 0.8}
+              ${w - 9}, ${h * 0.8 + 7} ${w - 9}, ${h - 9} ${w * 0.92 + 7}, ${h - 9}
+            `"
+          />
+        </mask>
+      </defs>
+
+      <polygon :fill="backgroundColor" :points="`
+        15, 9 ${w * 0.1 + 1}, 9 ${w * 0.1 + 4}, 6 ${w * 0.52 + 2}, 6
+        ${w * 0.52 + 6}, 10 ${w * 0.58 - 7}, 10 ${w * 0.58 - 2}, 6
+        ${w * 0.9 + 2}, 6 ${w * 0.9 + 6}, 10 ${w - 10}, 10 ${w - 10}, ${h * 0.1 - 6}
+        ${w - 6}, ${h * 0.1 - 1} ${w - 6}, ${h * 0.8 + 1} ${w - 10}, ${h * 0.8 + 6}
+        ${w - 10}, ${h - 10} ${w * 0.92 + 7}, ${h - 10}  ${w * 0.92 + 2}, ${h - 6}
+        11, ${h - 6} 11, ${h * 0.15 - 2} 15, ${h * 0.15 - 7}
+      `"/>
+
+      <rect x="0" y="0" :width="w" :height="h" :fill="`url(#${filterId})`" :mask="`url(#${maskId})`"/>
+    </svg>
+  </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 filterId = `border-box-07-filter-${getUUID()}`
+const maskId = `border-box-07-mask-${getUUID()}`
+const { w, h } = toRefs(props.chartConfig.attr)
+const { colors, backgroundColor } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('border-box') {
+}
+</style>

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

@@ -4,6 +4,7 @@ import { Border03Config } from './Border03/index'
 import { Border04Config } from './Border04/index'
 import { Border05Config } from './Border05/index'
 import { Border06Config } from './Border06/index'
+import { Border07Config } from './Border07/index'
 
 export default [
   Border01Config,
@@ -11,5 +12,6 @@ export default [
   Border03Config,
   Border04Config,
   Border05Config,
-  Border06Config
+  Border06Config,
+  Border07Config
 ]