fix: 新增边框12

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

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

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

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/border11.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Border11Config: ConfigType = {
+  key: 'Border11',
+  chartKey: 'VBorder11',
+  conKey: 'VCBorder11',
+  title: '边框-11',
+  category: ChatCategoryEnum.BORDER,
+  categoryName: ChatCategoryEnumName.BORDER,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

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

@@ -0,0 +1,66 @@
+<template>
+  <div class="go-border-box">
+    <svg class="bv-border-svg-container" :width="w" :height="h">
+      <polygon
+        :fill="backgroundColor"
+        :points="`
+        23, 23 ${w - 24}, 23 ${w - 24}, ${h - 24} 23, ${h - 24}
+      `"
+      />
+
+      <polyline
+        class="go-border-line-1"
+        :stroke="colors[0]"
+        :points="`4, 4 ${w - 22} ,4 ${w - 22}, ${h - 22} 4, ${h - 22} 4, 4`"
+      />
+      <polyline
+        class="go-border-line-3"
+        :stroke="colors[1]"
+        :points="`10, 10 ${w - 16}, 10 ${w - 16}, ${h - 16} 10, ${
+          h - 16
+        } 10, 10`"
+      />
+      <polyline
+        class="go-border-line-3"
+        :stroke="colors[1]"
+        :points="`16, 16 ${w - 10}, 16 ${w - 10}, ${h - 10} 16, ${
+          h - 10
+        } 16, 16`"
+      />
+      <polyline
+        class="go-border-line-3"
+        :stroke="colors[1]"
+        :points="`22, 22 ${w - 4}, 22 ${w - 4}, ${h - 4} 22, ${h - 4} 22, 22`"
+      />
+    </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-line-line-1 {
+    stroke-width: 1;
+  }
+  .go-line-line-3 {
+    stroke-width: 3;
+  }
+}
+</style>

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

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

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

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/border12.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Border12Config: ConfigType = {
+  key: 'Border12',
+  chartKey: 'VBorder12',
+  conKey: 'VCBorder12',
+  title: '边框-12',
+  category: ChatCategoryEnum.BORDER,
+  categoryName: ChatCategoryEnumName.BORDER,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

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

@@ -0,0 +1,70 @@
+<template>
+  <div class="go-border-box">
+    <svg :width="w" :height="h">
+      <polygon
+        :fill="backgroundColor"
+        :points="`
+        10, 22 ${w - 22}, 22 ${w - 22}, ${h - 86} ${w - 84}, ${
+          h - 24
+        } 10, ${h - 24}
+      `"
+      />
+
+      <polyline
+        class="bv-bb5-line-1"
+        :stroke="colors[0]"
+        :points="`8, 5 ${w - 5}, 5 ${w - 5}, ${h - 100}
+          ${w - 100}, ${h - 5} 8, ${h - 5} 8, 5`"
+      />
+      <polyline
+        class="bv-bb5-line-2"
+        :stroke="colors[1]"
+        :points="`3, 5 ${w - 20}, 5 ${w - 20}, ${h - 60}
+          ${w - 74}, ${h - 5} 3, ${h - 5} 3, 5`"
+      />
+      <polyline
+        class="bv-bb5-line-3"
+        :stroke="colors[1]"
+        :points="`50, 13 ${w - 35}, 13`"
+      />
+      <polyline
+        class="bv-bb5-line-4"
+        :stroke="colors[1]"
+        :points="`15, 20 ${w - 35}, 20`"
+      />
+      <polyline
+        class="bv-bb5-line-5"
+        :stroke="colors[1]"
+        :points="`15, ${h - 20} ${w - 110}, ${h - 20}`"
+      />
+      <polyline
+        class="bv-bb5-line-6"
+        :stroke="colors[1]"
+        :points="`15, ${h - 13} ${w - 110}, ${h - 13}`"
+      />
+    </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;
+  }
+}
+</style>

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

@@ -8,6 +8,8 @@ import { Border07Config } from './Border07/index'
 import { Border08Config } from './Border08/index'
 import { Border09Config } from './Border09/index'
 import { Border10Config } from './Border10/index'
+import { Border11Config } from './Border11/index'
+import { Border12Config } from './Border12/index'
 
 export default [
   Border01Config,
@@ -19,5 +21,7 @@ export default [
   Border07Config,
   Border08Config,
   Border09Config,
-  Border10Config
+  Border10Config,
+  Border11Config,
+  Border12Config
 ]