From 06f80a46459d5704e299f32cb0e6b8a2c178b93b Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Sat, 26 Mar 2022 22:52:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=BE=B9=E6=A1=86?=
 =?UTF-8?q?=E8=83=8C=E6=99=AF=E8=89=B2=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Decorates/Borders/Border01/config.ts           |  3 ++-
 .../Decorates/Borders/Border01/config.vue          | 12 ++++++++++++
 .../Decorates/Borders/Border01/index.vue           |  4 ++--
 .../Decorates/Borders/Border02/config.ts           |  3 ++-
 .../Decorates/Borders/Border02/config.vue          | 12 ++++++++++++
 .../Decorates/Borders/Border02/index.vue           |  4 ++--
 .../Decorates/Borders/Border03/config.ts           |  3 ++-
 .../Decorates/Borders/Border03/config.vue          | 12 ++++++++++++
 .../Decorates/Borders/Border03/index.vue           |  4 ++--
 .../Decorates/Borders/Border04/config.ts           |  3 ++-
 .../Decorates/Borders/Border04/config.vue          | 12 ++++++++++++
 .../Decorates/Borders/Border04/index.vue           | 14 +++++++++++---
 .../Decorates/Borders/Border05/config.ts           |  3 ++-
 .../Decorates/Borders/Border05/config.vue          | 12 ++++++++++++
 .../Decorates/Borders/Border05/index.vue           |  4 ++--
 .../Decorates/Borders/Border06/config.ts           |  3 ++-
 .../Decorates/Borders/Border06/config.vue          | 12 ++++++++++++
 .../Decorates/Borders/Border06/index.vue           |  8 ++++++--
 18 files changed, 109 insertions(+), 19 deletions(-)

diff --git a/src/packages/components/Decorates/Borders/Border01/config.ts b/src/packages/components/Decorates/Borders/Border01/config.ts
index 4a8f9703..8f4745b4 100644
--- a/src/packages/components/Decorates/Borders/Border01/config.ts
+++ b/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 {
diff --git a/src/packages/components/Decorates/Borders/Border01/config.vue b/src/packages/components/Decorates/Borders/Border01/config.vue
index 6e946469..41ba9dfd 100644
--- a/src/packages/components/Decorates/Borders/Border01/config.vue
+++ b/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">
diff --git a/src/packages/components/Decorates/Borders/Border01/index.vue b/src/packages/components/Decorates/Borders/Border01/index.vue
index ac7b9923..0f070ba1 100644
--- a/src/packages/components/Decorates/Borders/Border01/index.vue
+++ b/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>
diff --git a/src/packages/components/Decorates/Borders/Border02/config.ts b/src/packages/components/Decorates/Borders/Border02/config.ts
index 0b4fa2bb..1c9f5db0 100644
--- a/src/packages/components/Decorates/Borders/Border02/config.ts
+++ b/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
diff --git a/src/packages/components/Decorates/Borders/Border02/config.vue b/src/packages/components/Decorates/Borders/Border02/config.vue
index 5657b6a0..c629a0b6 100644
--- a/src/packages/components/Decorates/Borders/Border02/config.vue
+++ b/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">
diff --git a/src/packages/components/Decorates/Borders/Border02/index.vue b/src/packages/components/Decorates/Borders/Border02/index.vue
index 3e8aebe1..fc70bfa9 100644
--- a/src/packages/components/Decorates/Borders/Border02/index.vue
+++ b/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>
diff --git a/src/packages/components/Decorates/Borders/Border03/config.ts b/src/packages/components/Decorates/Borders/Border03/config.ts
index 31814923..c977370a 100644
--- a/src/packages/components/Decorates/Borders/Border03/config.ts
+++ b/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 {
diff --git a/src/packages/components/Decorates/Borders/Border03/config.vue b/src/packages/components/Decorates/Borders/Border03/config.vue
index 5657b6a0..0aa710d0 100644
--- a/src/packages/components/Decorates/Borders/Border03/config.vue
+++ b/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">
diff --git a/src/packages/components/Decorates/Borders/Border03/index.vue b/src/packages/components/Decorates/Borders/Border03/index.vue
index 99c123cc..3a8342bf 100644
--- a/src/packages/components/Decorates/Borders/Border03/index.vue
+++ b/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>
 
diff --git a/src/packages/components/Decorates/Borders/Border04/config.ts b/src/packages/components/Decorates/Borders/Border04/config.ts
index 74a39fdf..e5b38e29 100644
--- a/src/packages/components/Decorates/Borders/Border04/config.ts
+++ b/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 {
diff --git a/src/packages/components/Decorates/Borders/Border04/config.vue b/src/packages/components/Decorates/Borders/Border04/config.vue
index 5657b6a0..0aa710d0 100644
--- a/src/packages/components/Decorates/Borders/Border04/config.vue
+++ b/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">
diff --git a/src/packages/components/Decorates/Borders/Border04/index.vue b/src/packages/components/Decorates/Borders/Border04/index.vue
index 169b42cc..dc849811 100644
--- a/src/packages/components/Decorates/Borders/Border04/index.vue
+++ b/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>
diff --git a/src/packages/components/Decorates/Borders/Border05/config.ts b/src/packages/components/Decorates/Borders/Border05/config.ts
index b4ddb1b3..7783fdf6 100644
--- a/src/packages/components/Decorates/Borders/Border05/config.ts
+++ b/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 {
diff --git a/src/packages/components/Decorates/Borders/Border05/config.vue b/src/packages/components/Decorates/Borders/Border05/config.vue
index 5657b6a0..0aa710d0 100644
--- a/src/packages/components/Decorates/Borders/Border05/config.vue
+++ b/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">
diff --git a/src/packages/components/Decorates/Borders/Border05/index.vue b/src/packages/components/Decorates/Borders/Border05/index.vue
index 3696ebd2..aeb5c315 100644
--- a/src/packages/components/Decorates/Borders/Border05/index.vue
+++ b/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>
diff --git a/src/packages/components/Decorates/Borders/Border06/config.ts b/src/packages/components/Decorates/Borders/Border06/config.ts
index 003d026f..cd40a0a9 100644
--- a/src/packages/components/Decorates/Borders/Border06/config.ts
+++ b/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 {
diff --git a/src/packages/components/Decorates/Borders/Border06/config.vue b/src/packages/components/Decorates/Borders/Border06/config.vue
index 5657b6a0..0aa710d0 100644
--- a/src/packages/components/Decorates/Borders/Border06/config.vue
+++ b/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">
diff --git a/src/packages/components/Decorates/Borders/Border06/index.vue b/src/packages/components/Decorates/Borders/Border06/index.vue
index 98865939..60bcfeeb 100644
--- a/src/packages/components/Decorates/Borders/Border06/index.vue
+++ b/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>