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

---
 .../images/chart/decorates/border11.png       | Bin 0 -> 2106 bytes
 .../images/chart/decorates/border12.png       | Bin 0 -> 2436 bytes
 .../Decorates/Borders/Border11/config.ts      |  15 ++++
 .../Decorates/Borders/Border11/config.vue     |  54 ++++++++++++++
 .../Decorates/Borders/Border11/index.ts       |  14 ++++
 .../Decorates/Borders/Border11/index.vue      |  66 +++++++++++++++++
 .../Decorates/Borders/Border12/config.ts      |  15 ++++
 .../Decorates/Borders/Border12/config.vue     |  54 ++++++++++++++
 .../Decorates/Borders/Border12/index.ts       |  14 ++++
 .../Decorates/Borders/Border12/index.vue      |  70 ++++++++++++++++++
 .../components/Decorates/Borders/index.ts     |   6 +-
 11 files changed, 307 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/images/chart/decorates/border11.png
 create mode 100644 src/assets/images/chart/decorates/border12.png
 create mode 100644 src/packages/components/Decorates/Borders/Border11/config.ts
 create mode 100644 src/packages/components/Decorates/Borders/Border11/config.vue
 create mode 100644 src/packages/components/Decorates/Borders/Border11/index.ts
 create mode 100644 src/packages/components/Decorates/Borders/Border11/index.vue
 create mode 100644 src/packages/components/Decorates/Borders/Border12/config.ts
 create mode 100644 src/packages/components/Decorates/Borders/Border12/config.vue
 create mode 100644 src/packages/components/Decorates/Borders/Border12/index.ts
 create mode 100644 src/packages/components/Decorates/Borders/Border12/index.vue

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

literal 0
HcmV?d00001

diff --git a/src/assets/images/chart/decorates/border12.png b/src/assets/images/chart/decorates/border12.png
new file mode 100644
index 0000000000000000000000000000000000000000..b3205521b8d34682c1c29803ac3c90e3ed57b659
GIT binary patch
literal 2436
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
E5AA6E5dZ)H

literal 0
HcmV?d00001

diff --git a/src/packages/components/Decorates/Borders/Border11/config.ts b/src/packages/components/Decorates/Borders/Border11/config.ts
new file mode 100644
index 00000000..b4fbad15
--- /dev/null
+++ b/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
+}
diff --git a/src/packages/components/Decorates/Borders/Border11/config.vue b/src/packages/components/Decorates/Borders/Border11/config.vue
new file mode 100644
index 00000000..0aa710d0
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/Decorates/Borders/Border11/index.ts b/src/packages/components/Decorates/Borders/Border11/index.ts
new file mode 100644
index 00000000..eb75beb6
--- /dev/null
+++ b/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
+}
diff --git a/src/packages/components/Decorates/Borders/Border11/index.vue b/src/packages/components/Decorates/Borders/Border11/index.vue
new file mode 100644
index 00000000..b3f00ac1
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/Decorates/Borders/Border12/config.ts b/src/packages/components/Decorates/Borders/Border12/config.ts
new file mode 100644
index 00000000..8e815226
--- /dev/null
+++ b/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
+}
diff --git a/src/packages/components/Decorates/Borders/Border12/config.vue b/src/packages/components/Decorates/Borders/Border12/config.vue
new file mode 100644
index 00000000..0aa710d0
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/Decorates/Borders/Border12/index.ts b/src/packages/components/Decorates/Borders/Border12/index.ts
new file mode 100644
index 00000000..9a9686e0
--- /dev/null
+++ b/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
+}
diff --git a/src/packages/components/Decorates/Borders/Border12/index.vue b/src/packages/components/Decorates/Borders/Border12/index.vue
new file mode 100644
index 00000000..84d9d53a
--- /dev/null
+++ b/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>
diff --git a/src/packages/components/Decorates/Borders/index.ts b/src/packages/components/Decorates/Borders/index.ts
index a441434c..e796ea5d 100644
--- a/src/packages/components/Decorates/Borders/index.ts
+++ b/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
 ]