feat: 新增边框背景色修改

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

@@ -5,7 +5,8 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   dur: 0.5,
-  colors: ['#4fd2dd', '#235fa7']
+  colors: ['#4fd2dd', '#235fa7'],
+  backgroundColor: '#00000000'
 }
 
 export default class Config extends publicConfig implements CreateComponentType {

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

@@ -34,6 +34,18 @@
       </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">

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

@@ -1,7 +1,7 @@
 <template>
   <div class="go-border-box">
     <svg :width="w" :height="h">
-      <polygon fill="transparent" :points="`10, 27 10, ${h - 27} 13, ${h - 24} 13, ${h - 21} 24, ${h - 11}
+      <polygon :fill="backgroundColor" :points="`10, 27 10, ${h - 27} 13, ${h - 24} 13, ${h - 21} 24, ${h - 11}
       38, ${h - 11} 41, ${h - 8} 73, ${h - 8} 75, ${h - 10} 81, ${h - 10}
       85, ${h - 6} ${w - 85}, ${h - 6} ${w - 81}, ${h - 10} ${w - 75}, ${h - 10}
       ${w - 73}, ${h - 8} ${w - 41}, ${h - 8} ${w - 38}, ${h - 11}
@@ -72,7 +72,7 @@ const props = defineProps({
 const borders = ['left-top', 'right-top', 'left-bottom', 'right-bottom']
 
 const { w, h } = toRefs(props.chartConfig.attr)
-const { colors, dur } = toRefs(props.chartConfig.option)
+const { colors, dur, backgroundColor } = toRefs(props.chartConfig.option)
 </script>
 
 <style lang="scss" scoped>

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

@@ -4,7 +4,8 @@ import { Border02Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  colors: ['#6586ec', '#2cf7fe']
+  colors: ['#6586ec', '#2cf7fe'],
+  backgroundColor: '#00000000'
 }
 
 export default class Config extends publicConfig

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

@@ -22,6 +22,18 @@
       </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">

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

@@ -2,7 +2,7 @@
   <div class="go-border-box">
     <svg :width="w" :height="h">
       <path
-        fill="transparent"
+        :fill="backgroundColor"
         :stroke="colors[0]"
         :d="`
           M 5 20 L 5 10 L 12 3  L 60 3 L 68 10
@@ -48,7 +48,7 @@ const props = defineProps({
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
-const { colors } = toRefs(props.chartConfig.option)
+const { colors, backgroundColor } = toRefs(props.chartConfig.option)
 </script>
 
 <style lang="scss" scoped>

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

@@ -4,7 +4,8 @@ import { Border03Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  colors: ['#6586ec', '#2cf7fe']
+  colors: ['#6586ec', '#2cf7fe'],
+  backgroundColor: '#00000000'
 }
 
 export default class Config extends publicConfig implements CreateComponentType {

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

@@ -22,6 +22,18 @@
       </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">

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

@@ -38,7 +38,7 @@
 
       <path
         v-if="w && h"
-        fill="transparent"
+        :fill="backgroundColor"
         stroke-width="2"
         :stroke="colors[0]"
         :d="`
@@ -112,7 +112,7 @@ const props = defineProps({
 const filterId = `border-box-03-filterId-${getUUID()}`
 
 const { w, h } = toRefs(props.chartConfig.attr)
-const { colors } = toRefs(props.chartConfig.option)
+const { colors, backgroundColor } = toRefs(props.chartConfig.option)
 
 </script>
 

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

@@ -9,7 +9,8 @@ export const option = {
   borderTitleHeight: 32,
   borderTitleSize: 18,
   borderTitleColor: '#fff',
-  colors: ['#8aaafb', '#1f33a2']
+  colors: ['#8aaafb', '#1f33a2'],
+  backgroundColor: '#00000000'
 }
 
 export default class Config extends publicConfig implements CreateComponentType {

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

@@ -22,6 +22,18 @@
       </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">

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

@@ -25,7 +25,7 @@
       </defs>
 
       <polygon
-        fill="transparent"
+        :fill="backgroundColor"
         :points="`
         20, 32 ${w * 0.5 - borderTitleWidth / 2}, 32 ${w * 0.5 - borderTitleWidth / 2 + 20}, 53
         ${w * 0.5 + borderTitleWidth / 2 - 20}, 53 ${w * 0.5 + borderTitleWidth / 2}, 32
@@ -35,7 +35,7 @@
       />
 
       <polyline
-        fill="transparent"
+        :fill="backgroundColor"
         :stroke="colors[0]"
         :filter="`url(#${filterId})`"
         :points="`
@@ -236,7 +236,15 @@ const props = defineProps({
 
 const filterId = `border-box-04-filterId-${getUUID()}`
 const { w, h } = toRefs(props.chartConfig.attr)
-const { colors, borderTitle, borderTitleColor, borderTitleSize, borderTitleHeight, borderTitleWidth} = toRefs(props.chartConfig.option)
+const {
+  colors,
+  borderTitle,
+  borderTitleColor,
+  borderTitleSize,
+  borderTitleHeight,
+  borderTitleWidth,
+  backgroundColor
+} = toRefs(props.chartConfig.option)
 </script>
 
 <style lang="scss" scoped>

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

@@ -4,7 +4,8 @@ import { Border05Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  colors: ['#1d48c4', '#d3e1f8']
+  colors: ['#1d48c4', '#d3e1f8'],
+  backgroundColor: '#00000000'
 }
 
 export default class Config extends publicConfig implements CreateComponentType {

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

@@ -22,6 +22,18 @@
       </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">

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

@@ -1,7 +1,7 @@
 <template>
   <div class="go-border-box"  :style="`box-shadow: inset 0 0 25px 3px ${colors[0]}`">
     <svg :width="w" :height="h">
-      <polygon fill="transparent" :points="`
+      <polygon :fill="backgroundColor" :points="`
         4, 0 ${w - 4}, 0 ${w}, 4 ${w}, ${h - 4} ${w - 4}, ${h}
         4, ${h} 0, ${h - 4} 0, 4
       `"/>
@@ -35,7 +35,7 @@ const props = defineProps({
 
 const border = ['left-top', 'right-top', 'left-bottom', 'right-bottom']
 const { w, h } = toRefs(props.chartConfig.attr)
-const { colors } = toRefs(props.chartConfig.option)
+const { colors, backgroundColor } = toRefs(props.chartConfig.option)
 </script>
 
 <style lang="scss" scoped>

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

@@ -4,7 +4,8 @@ import { Border06Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  colors: ['#3140ad', '#1089ff']
+  colors: ['#3140ad', '#1089ff'],
+  backgroundColor: '#00000000'
 }
 
 export default class Config extends publicConfig implements CreateComponentType {

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

@@ -22,6 +22,18 @@
       </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">

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

@@ -1,7 +1,11 @@
 <template>
   <div
     class="go-border-box"
-    :style="`box-shadow: inset 0 0 40px ${colors[0]}; border: 1px solid ${colors[1]};`"
+    :style="`
+      box-shadow: inset 0 0 40px ${colors[0]}; 
+      border: 1px solid ${colors[1]};
+      background-color: ${backgroundColor};
+    `"
   >
     <svg :width="w" :height="h">
       <polyline
@@ -61,7 +65,7 @@ const props = defineProps({
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
-const { colors } = toRefs(props.chartConfig.option)
+const { colors, backgroundColor } = toRefs(props.chartConfig.option)
 </script>
 
 <style lang="scss" scoped>