From 7d5f607b9280343ecd8b28eb77bd7eee801560f6 Mon Sep 17 00:00:00 2001
From: MTrun <1262327911@qq.com>
Date: Sun, 27 Mar 2022 01:18:22 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E6=96=B0=E5=A2=9Eborder13?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/chart/decorates/border13.png       | Bin 0 -> 1902 bytes
 .../Decorates/Borders/Border13/config.ts      |  15 +++++
 .../Decorates/Borders/Border13/config.vue     |  54 ++++++++++++++++++
 .../Decorates/Borders/Border13/index.ts       |  14 +++++
 .../Decorates/Borders/Border13/index.vue      |  48 ++++++++++++++++
 .../components/Decorates/Borders/index.ts     |   4 +-
 6 files changed, 134 insertions(+), 1 deletion(-)
 create mode 100644 src/assets/images/chart/decorates/border13.png
 create mode 100644 src/packages/components/Decorates/Borders/Border13/config.ts
 create mode 100644 src/packages/components/Decorates/Borders/Border13/config.vue
 create mode 100644 src/packages/components/Decorates/Borders/Border13/index.ts
 create mode 100644 src/packages/components/Decorates/Borders/Border13/index.vue

diff --git a/src/assets/images/chart/decorates/border13.png b/src/assets/images/chart/decorates/border13.png
new file mode 100644
index 0000000000000000000000000000000000000000..c46f7c3e13abff52b91ee99af8b53b42b2bf9f0f
GIT binary patch
literal 1902
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
R^jQ9YP(YaQ7ylI*{{Toy-QNHJ

literal 0
HcmV?d00001

diff --git a/src/packages/components/Decorates/Borders/Border13/config.ts b/src/packages/components/Decorates/Borders/Border13/config.ts
new file mode 100644
index 00000000..aaff3192
--- /dev/null
+++ b/src/packages/components/Decorates/Borders/Border13/config.ts
@@ -0,0 +1,15 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Border13Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  colors: ['#2862b7', '#4b77b7'],
+  backgroundColor: '#00000000'
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = Border13Config.key
+  public chartConfig = cloneDeep(Border13Config)
+  public option = option
+}
diff --git a/src/packages/components/Decorates/Borders/Border13/config.vue b/src/packages/components/Decorates/Borders/Border13/config.vue
new file mode 100644
index 00000000..0aa710d0
--- /dev/null
+++ b/src/packages/components/Decorates/Borders/Border13/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/Border13/index.ts b/src/packages/components/Decorates/Borders/Border13/index.ts
new file mode 100644
index 00000000..7f756116
--- /dev/null
+++ b/src/packages/components/Decorates/Borders/Border13/index.ts
@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/border13.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Border13Config: ConfigType = {
+  key: 'Border13',
+  chartKey: 'VBorder13',
+  conKey: 'VCBorder13',
+  title: '边框-13',
+  category: ChatCategoryEnum.BORDER,
+  categoryName: ChatCategoryEnumName.BORDER,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}
diff --git a/src/packages/components/Decorates/Borders/Border13/index.vue b/src/packages/components/Decorates/Borders/Border13/index.vue
new file mode 100644
index 00000000..c73dc2a0
--- /dev/null
+++ b/src/packages/components/Decorates/Borders/Border13/index.vue
@@ -0,0 +1,48 @@
+<template>
+  <div class="go-border-box">
+    <svg :width="w" :height="h">
+      <polygon
+        :fill="backgroundColor"
+        :points="`
+        7, 7 ${w - 7}, 7 ${w - 7}, ${h - 7} 7, ${h - 7}
+      `"
+      />
+
+      <polyline
+        :stroke="colors[0]"
+        :points="`2, 2 ${w - 2} ,2 ${w - 2}, ${h - 2} 2, ${h - 2} 2, 2`"
+      />
+      <polyline
+        :stroke="colors[1]"
+        :points="`6, 6 ${w - 6}, 6 ${w - 6}, ${h - 6} 6, ${h - 6} 6, 6`"
+      />
+      <circle :fill="colors[0]" cx="11" cy="11" r="1" />
+      <circle :fill="colors[0]" :cx="w - 11" cy="11" r="1" />
+      <circle :fill="colors[0]" :cx="w - 11" :cy="h - 11" r="1" />
+      <circle :fill="colors[0]" cx="11" :cy="h - 11" r="1" />
+    </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 e796ea5d..2e05e4be 100644
--- a/src/packages/components/Decorates/Borders/index.ts
+++ b/src/packages/components/Decorates/Borders/index.ts
@@ -10,6 +10,7 @@ import { Border09Config } from './Border09/index'
 import { Border10Config } from './Border10/index'
 import { Border11Config } from './Border11/index'
 import { Border12Config } from './Border12/index'
+import { Border13Config } from './Border13/index'
 
 export default [
   Border01Config,
@@ -23,5 +24,6 @@ export default [
   Border09Config,
   Border10Config,
   Border11Config,
-  Border12Config
+  Border12Config,
+  Border13Config
 ]