From f5ca879bff280f2ce3b4e8a27037f80d5a4cd145 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Sun, 27 Mar 2022 00:58:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=BE=B9=E6=A1=8610?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/chart/decorates/border09.png       | Bin 0 -> 2168 bytes
 .../images/chart/decorates/border10.png       | Bin 0 -> 2499 bytes
 .../Decorates/Borders/Border08/index.vue      |  24 ++--
 .../Decorates/Borders/Border09/config.ts      |  15 +++
 .../Decorates/Borders/Border09/config.vue     |  54 +++++++++
 .../Decorates/Borders/Border09/index.ts       |  14 +++
 .../Decorates/Borders/Border09/index.vue      |  44 +++++++
 .../Decorates/Borders/Border10/config.ts      |  15 +++
 .../Decorates/Borders/Border10/config.vue     |  54 +++++++++
 .../Decorates/Borders/Border10/index.ts       |  14 +++
 .../Decorates/Borders/Border10/index.vue      | 111 ++++++++++++++++++
 .../components/Decorates/Borders/index.ts     |   6 +-
 12 files changed, 340 insertions(+), 11 deletions(-)
 create mode 100644 src/assets/images/chart/decorates/border09.png
 create mode 100644 src/assets/images/chart/decorates/border10.png
 create mode 100644 src/packages/components/Decorates/Borders/Border09/config.ts
 create mode 100644 src/packages/components/Decorates/Borders/Border09/config.vue
 create mode 100644 src/packages/components/Decorates/Borders/Border09/index.ts
 create mode 100644 src/packages/components/Decorates/Borders/Border09/index.vue
 create mode 100644 src/packages/components/Decorates/Borders/Border10/config.ts
 create mode 100644 src/packages/components/Decorates/Borders/Border10/config.vue
 create mode 100644 src/packages/components/Decorates/Borders/Border10/index.ts
 create mode 100644 src/packages/components/Decorates/Borders/Border10/index.vue

diff --git a/src/assets/images/chart/decorates/border09.png b/src/assets/images/chart/decorates/border09.png
new file mode 100644
index 0000000000000000000000000000000000000000..7672b8d965cbf85e833b28df6ce9e9fa2516ac7d
GIT binary patch
literal 2168
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/chart/decorates/border10.png b/src/assets/images/chart/decorates/border10.png
new file mode 100644
index 0000000000000000000000000000000000000000..d68123ebedbffcb87fd122fa3407bde0312ec3da
GIT binary patch
literal 2499
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

literal 0
HcmV?d00001

diff --git a/src/packages/components/Decorates/Borders/Border08/index.vue b/src/packages/components/Decorates/Borders/Border08/index.vue
index 4326761a..113db569 100644
--- a/src/packages/components/Decorates/Borders/Border08/index.vue
+++ b/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>
diff --git a/src/packages/components/Decorates/Borders/Border09/config.ts b/src/packages/components/Decorates/Borders/Border09/config.ts
new file mode 100644
index 00000000..2189a3f8
--- /dev/null
+++ b/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
+}
diff --git a/src/packages/components/Decorates/Borders/Border09/config.vue b/src/packages/components/Decorates/Borders/Border09/config.vue
new file mode 100644
index 00000000..0aa710d0
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/Decorates/Borders/Border09/index.ts b/src/packages/components/Decorates/Borders/Border09/index.ts
new file mode 100644
index 00000000..0733ba92
--- /dev/null
+++ b/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
+}
diff --git a/src/packages/components/Decorates/Borders/Border09/index.vue b/src/packages/components/Decorates/Borders/Border09/index.vue
new file mode 100644
index 00000000..f37e8b26
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/Decorates/Borders/Border10/config.ts b/src/packages/components/Decorates/Borders/Border10/config.ts
new file mode 100644
index 00000000..3539ad18
--- /dev/null
+++ b/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
+}
diff --git a/src/packages/components/Decorates/Borders/Border10/config.vue b/src/packages/components/Decorates/Borders/Border10/config.vue
new file mode 100644
index 00000000..0aa710d0
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/Decorates/Borders/Border10/index.ts b/src/packages/components/Decorates/Borders/Border10/index.ts
new file mode 100644
index 00000000..02f96a73
--- /dev/null
+++ b/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
+}
diff --git a/src/packages/components/Decorates/Borders/Border10/index.vue b/src/packages/components/Decorates/Borders/Border10/index.vue
new file mode 100644
index 00000000..d6e4f885
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/Decorates/Borders/index.ts b/src/packages/components/Decorates/Borders/index.ts
index 5957c245..a441434c 100644
--- a/src/packages/components/Decorates/Borders/index.ts
+++ b/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
 ]