fix: 新增边框6

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

@@ -4,11 +4,6 @@ import { Border05Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  borderTitle: '边框-04',
-  borderTitleWidth: 250,
-  borderTitleHeight: 32,
-  borderTitleSize: 18,
-  borderTitleColor: '#fff',
   colors: ['#1d48c4', '#d3e1f8']
 }
 

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

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

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

@@ -0,0 +1,42 @@
+<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>
+</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/Border06/index.ts

@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/border06.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Border06Config: ConfigType = {
+  key: 'Border06',
+  chartKey: 'VBorder06',
+  conKey: 'VCBorder06',
+  title: '边框-06',
+  category: ChatCategoryEnum.BORDER,
+  categoryName: ChatCategoryEnumName.BORDER,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}

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

@@ -0,0 +1,80 @@
+<template>
+  <div
+    class="go-border-box"
+    :style="`box-shadow: inset 0 0 40px ${colors[0]}; border: 1px solid ${colors[1]};`"
+  >
+    <svg :width="w" :height="h">
+      <polyline
+        class="go-border-line-w-2"
+        :stroke="colors[0]"
+        :points="`0, 25 0, 0 25, 0`"
+      />
+      <polyline
+        class="go-border-line-w-2"
+        :stroke="colors[0]"
+        :points="`${w - 25}, 0 ${w}, 0 ${w}, 25`"
+      />
+      <polyline
+        class="go-border-line-w-2"
+        :stroke="colors[0]"
+        :points="`${w - 25}, ${h} ${w}, ${h} ${w}, ${h - 25}`"
+      />
+      <polyline
+        class="go-border-line-w-2"
+        :stroke="colors[0]"
+        :points="`0, ${h - 25} 0, ${h} 25, ${h}`"
+      />
+
+      <polyline
+        class="go-border-line-w-5"
+        :stroke="colors[1]"
+        :points="`0, 10 0, 0 10, 0`"
+      />
+      <polyline
+        class="go-border-line-w-5"
+        :stroke="colors[1]"
+        :points="`${w - 10}, 0 ${w}, 0 ${w}, 10`"
+      />
+      <polyline
+        class="go-border-line-w-5"
+        :stroke="colors[1]"
+        :points="`${w - 10}, ${h} ${w}, ${h} ${w}, ${h - 10}`"
+      />
+      <polyline
+        class="go-border-line-w-5"
+        :stroke="colors[1]"
+        :points="`0, ${h - 10} 0, ${h} 10, ${h}`"
+      />
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, ref, 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 } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('border-box') {
+  polyline {
+    fill: none;
+    stroke-linecap: round;
+  }
+  .go-border-line-w-2 {
+    stroke-width: 2;
+  }
+  .go-border-line-w-5 {
+    stroke-width: 5;
+  }
+}
+</style>

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

@@ -3,11 +3,13 @@ import { Border02Config } from './Border02/index'
 import { Border03Config } from './Border03/index'
 import { Border04Config } from './Border04/index'
 import { Border05Config } from './Border05/index'
+import { Border06Config } from './Border06/index'
 
 export default [
   Border01Config,
   Border02Config,
   Border03Config,
   Border04Config,
-  Border05Config
+  Border05Config,
+  Border06Config
 ]