feat: 新增边框10

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

@@ -1,6 +1,6 @@
 <template>
   <div class="go-border-box">
-    <svg class="bv-border-svg-container" :width="w" :height="h">
+    <svg :width="w" :height="h">
       <defs>
         <path :id="path" :d="pathD" fill="transparent" />
         <radialGradient :id="gradient" cx="50%" cy="50%" r="50%">
@@ -22,9 +22,7 @@
 
       <polygon
         :fill="backgroundColor"
-        :points="`5, 5 ${w - 5}, 5 ${w - 5} ${h - 5} 5, ${
-          h - 5
-        }`"
+        :points="`5, 5 ${w - 5}, 5 ${w - 5} ${h - 5} 5, ${h - 5}`"
       />
 
       <use :stroke="colors[0]" stroke-width="1" :xlink:href="`#${path}`" />
@@ -64,17 +62,23 @@ 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 { colors, dur, backgroundColor, reverse } = toRefs(
+  props.chartConfig.option
+)
 
-const length =  computed(() => {
+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`
+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>

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

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

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

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/border09.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Border09Config: ConfigType = {
+  key: 'Border09',
+  chartKey: 'VBorder09',
+  conKey: 'VCBorder09',
+  title: '边框-09',
+  category: ChatCategoryEnum.BORDER,
+  categoryName: ChatCategoryEnumName.BORDER,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

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

@@ -0,0 +1,44 @@
+<template>
+  <div class="go-border-box">
+    <svg :width="w" :height="h">
+      <polygon :fill="backgroundColor" :points="` 9, 7 ${w - 9}, 7 ${w - 9}, ${h - 7} 9, ${h - 7}`"/>
+      <circle :fill="colors[1]" cx="5" cy="5" r="2"/>
+      <circle :fill="colors[1]" :cx="w - 5" cy="5" r="2"/>
+      <circle :fill="colors[1]" :cx="w - 5" :cy="h - 5" r="2"/>
+      <circle :fill="colors[1]" cx="5" :cy="h - 5" r="2"/>
+      <polyline :stroke="colors[0]" :points="`10, 4 ${w - 10}, 4`"/>
+      <polyline :stroke="colors[0]" :points="`10, ${h - 4} ${w - 10}, ${h - 4}`"/>
+      <polyline :stroke="colors[0]" :points="`5, 70 5, ${h - 70}`"/>
+      <polyline :stroke="colors[0]" :points="`${w - 5}, 70 ${w - 5}, ${h - 70}`"/>
+      <polyline :stroke="colors[0]" :points="`3, 10, 3, 50`"/>
+      <polyline :stroke="colors[0]" :points="`7, 30 7, 80`"/>
+      <polyline :stroke="colors[0]" :points="`${w - 3}, 10 ${w - 3}, 50`"/>
+      <polyline :stroke="colors[0]" :points="`${w - 7}, 30 ${w - 7}, 80`"/>
+      <polyline :stroke="colors[0]" :points="`3, ${h - 10} 3, ${h - 50}`"/>
+      <polyline :stroke="colors[0]" :points="`7, ${h - 30} 7, ${h - 80}`"/>
+      <polyline :stroke="colors[0]" :points="`${w - 3}, ${h - 10} ${w - 3}, ${h - 50}`"/>
+      <polyline :stroke="colors[0]" :points="`${w - 7}, ${h - 30} ${w - 7}, ${h - 80}`"/>
+    </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 { 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/Border10/config.ts

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

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

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/border10.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Border10Config: ConfigType = {
+  key: 'Border10',
+  chartKey: 'VBorder10',
+  conKey: 'VCBorder10',
+  title: '边框-10',
+  category: ChatCategoryEnum.BORDER,
+  categoryName: ChatCategoryEnumName.BORDER,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

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

@@ -0,0 +1,111 @@
+<template>
+  <div class="go-border-box">
+    <svg :width="w" :height="h">
+      <polygon
+        :fill="backgroundColor"
+        :points="`
+        ${w - 15}, 22 170, 22 150, 7 40, 7 28, 21 32, 24
+        16, 42 16, ${h - 32} 41, ${h - 7} ${w - 15}, ${h - 7}
+      `"
+      />
+
+      <polyline
+        class="go-border-line-1"
+        :stroke="colors[0]"
+        :points="`145, ${h - 5} 40, ${h - 5} 10, ${h - 35}
+          10, 40 40, 5 150, 5 170, 20 ${w - 15}, 20`"
+      />
+      <polyline
+        :stroke="colors[1]"
+        class="go-border-line-2"
+        :points="`245, ${h - 1} 36, ${h - 1} 14, ${h - 23}
+          14, ${h - 100}`"
+      />
+
+      <polyline
+        class="go-border-line-3"
+        :stroke="colors[0]"
+        :points="`7, ${h - 40} 7, ${h - 75}`"
+      />
+      <polyline
+        class="go-border-line-4"
+        :stroke="colors[0]"
+        :points="`28, 24 13, 41 13, 64`"
+      />
+      <polyline
+        class="go-border-line-5"
+        :stroke="colors[0]"
+        :points="`5, 45 5, 140`"
+      />
+      <polyline
+        class="go-border-line-6"
+        :stroke="colors[1]"
+        :points="`14, 75 14, 180`"
+      />
+      <polyline
+        class="go-border-line-7"
+        :stroke="colors[1]"
+        :points="`55, 11 147, 11 167, 26 250, 26`"
+      />
+      <polyline
+        class="go-border-line-8"
+        :stroke="colors[1]"
+        :points="`158, 5 173, 16`"
+      />
+      <polyline
+        class="go-border-line-9"
+        :stroke="colors[0]"
+        :points="`200, 17 ${w - 10}, 17`"
+      />
+      <polyline
+        class="go-border-line-10"
+        :stroke="colors[1]"
+        :points="`385, 17 ${w - 10}, 17`"
+      />
+    </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, backgroundColor } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('border-box') {
+  polyline {
+    fill: none;
+  }
+  .go-border-line-1,
+  .go-border-line-2,
+  .go-border-line-3,
+  .go-border-line-6,
+  .go-border-line-7,
+  .go-border-line-10 {
+    stroke-width: 1;
+  }
+  .go-border-line-3,
+  .go-border-line-4,
+  .go-border-line-8,
+  .go-border-line-9 {
+    stroke-width: 3px;
+    stroke-linecap: round;
+  }
+  .go-border-line-9 {
+    stroke-dasharray: 100 250;
+  }
+  .go-border-line-10 {
+    stroke-dasharray: 80 270;
+  }
+}
+</style>

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

@@ -6,6 +6,8 @@ import { Border05Config } from './Border05/index'
 import { Border06Config } from './Border06/index'
 import { Border07Config } from './Border07/index'
 import { Border08Config } from './Border08/index'
+import { Border09Config } from './Border09/index'
+import { Border10Config } from './Border10/index'
 
 export default [
   Border01Config,
@@ -15,5 +17,7 @@ export default [
   Border05Config,
   Border06Config,
   Border07Config,
-  Border08Config
+  Border08Config,
+  Border09Config,
+  Border10Config
 ]