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

---
 .../images/chart/decorates/border05.png       | Bin 0 -> 2537 bytes
 .../Decorates/Borders/Border01/index.vue      |   4 +-
 .../Decorates/Borders/Border02/index.vue      |   2 +-
 .../Decorates/Borders/Border03/index.vue      |   2 +-
 .../Decorates/Borders/Border04/index.vue      |   2 +-
 .../Decorates/Borders/Border05/config.ts      |  19 ++++++
 .../Decorates/Borders/Border05/config.vue     |  42 ++++++++++++
 .../Decorates/Borders/Border05/index.ts       |  14 ++++
 .../Decorates/Borders/Border05/index.vue      |  62 ++++++++++++++++++
 .../components/Decorates/Borders/index.ts     |   9 ++-
 10 files changed, 150 insertions(+), 6 deletions(-)
 create mode 100644 src/assets/images/chart/decorates/border05.png
 create mode 100644 src/packages/components/Decorates/Borders/Border05/config.ts
 create mode 100644 src/packages/components/Decorates/Borders/Border05/config.vue
 create mode 100644 src/packages/components/Decorates/Borders/Border05/index.ts
 create mode 100644 src/packages/components/Decorates/Borders/Border05/index.vue

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

literal 0
HcmV?d00001

diff --git a/src/packages/components/Decorates/Borders/Border01/index.vue b/src/packages/components/Decorates/Borders/Border01/index.vue
index b6bdc30c..ac7b9923 100644
--- a/src/packages/components/Decorates/Borders/Border01/index.vue
+++ b/src/packages/components/Decorates/Borders/Border01/index.vue
@@ -16,7 +16,7 @@
       :height="h"
       :key="item"
       v-for="item in borders"
-      :class="`${item} border-item`"
+      :class="`border-item ${item}`"
     >
       <polygon
         :fill="colors[0]"
@@ -59,7 +59,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, computed } from 'vue'
+import { PropType, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 
 const props = defineProps({
diff --git a/src/packages/components/Decorates/Borders/Border02/index.vue b/src/packages/components/Decorates/Borders/Border02/index.vue
index d7ac6180..3e8aebe1 100644
--- a/src/packages/components/Decorates/Borders/Border02/index.vue
+++ b/src/packages/components/Decorates/Borders/Border02/index.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, computed } from 'vue'
+import { PropType, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 
 const props = defineProps({
diff --git a/src/packages/components/Decorates/Borders/Border03/index.vue b/src/packages/components/Decorates/Borders/Border03/index.vue
index 55d6beed..99c123cc 100644
--- a/src/packages/components/Decorates/Borders/Border03/index.vue
+++ b/src/packages/components/Decorates/Borders/Border03/index.vue
@@ -99,7 +99,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, computed } from 'vue'
+import { PropType, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { getUUID, alpha } from '@/utils'
 
diff --git a/src/packages/components/Decorates/Borders/Border04/index.vue b/src/packages/components/Decorates/Borders/Border04/index.vue
index b8a7d8f2..169b42cc 100644
--- a/src/packages/components/Decorates/Borders/Border04/index.vue
+++ b/src/packages/components/Decorates/Borders/Border04/index.vue
@@ -223,7 +223,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs, computed } from 'vue'
+import { PropType, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 import { getUUID } from '@/utils'
 
diff --git a/src/packages/components/Decorates/Borders/Border05/config.ts b/src/packages/components/Decorates/Borders/Border05/config.ts
new file mode 100644
index 00000000..10cbf28b
--- /dev/null
+++ b/src/packages/components/Decorates/Borders/Border05/config.ts
@@ -0,0 +1,19 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Border05Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  borderTitle: '边框-04',
+  borderTitleWidth: 250,
+  borderTitleHeight: 32,
+  borderTitleSize: 18,
+  borderTitleColor: '#fff',
+  colors: ['#1d48c4', '#d3e1f8']
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = Border05Config.key
+  public chartConfig = cloneDeep(Border05Config)
+  public option = option
+}
diff --git a/src/packages/components/Decorates/Borders/Border05/config.vue b/src/packages/components/Decorates/Borders/Border05/config.vue
new file mode 100644
index 00000000..5657b6a0
--- /dev/null
+++ b/src/packages/components/Decorates/Borders/Border05/config.vue
@@ -0,0 +1,42 @@
+<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>
+</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/Border05/index.ts b/src/packages/components/Decorates/Borders/Border05/index.ts
new file mode 100644
index 00000000..7cdfb822
--- /dev/null
+++ b/src/packages/components/Decorates/Borders/Border05/index.ts
@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/border05.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Border05Config: ConfigType = {
+  key: 'Border05',
+  chartKey: 'VBorder05',
+  conKey: 'VCBorder05',
+  title: '边框-05',
+  category: ChatCategoryEnum.BORDER,
+  categoryName: ChatCategoryEnumName.BORDER,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}
diff --git a/src/packages/components/Decorates/Borders/Border05/index.vue b/src/packages/components/Decorates/Borders/Border05/index.vue
new file mode 100644
index 00000000..3696ebd2
--- /dev/null
+++ b/src/packages/components/Decorates/Borders/Border05/index.vue
@@ -0,0 +1,62 @@
+<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="`
+        4, 0 ${w - 4}, 0 ${w}, 4 ${w}, ${h - 4} ${w - 4}, ${h}
+        4, ${h} 0, ${h - 4} 0, 4
+      `"/>
+    </svg>
+
+    <svg
+      :width="w"
+      :height="h"
+      :key="item"
+      v-for="item in border"
+      :class="`border-item ${item}`"
+    >
+      <polygon
+        :fill="colors[1]"
+        points="40, 0 5, 0 0, 5 0, 16 3, 19 3, 7 7, 3 35, 3"
+      />
+    </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 border = ['left-top', 'right-top', 'left-bottom', 'right-bottom']
+const { w, h } = toRefs(props.chartConfig.attr)
+const { colors } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('border-box') {
+  .border-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+  .right-top {
+    right: 0;
+    transform: rotateY(180deg);
+  }
+  .left-bottom {
+    bottom: 0;
+    transform: rotateX(180deg);
+  }
+  .right-bottom {
+    right: 0;
+    bottom: 0;
+    transform: rotateX(180deg) rotateY(180deg);
+  }
+}
+</style>
diff --git a/src/packages/components/Decorates/Borders/index.ts b/src/packages/components/Decorates/Borders/index.ts
index 4ba231d2..f48c1327 100644
--- a/src/packages/components/Decorates/Borders/index.ts
+++ b/src/packages/components/Decorates/Borders/index.ts
@@ -2,5 +2,12 @@ import { Border01Config } from './Border01/index'
 import { Border02Config } from './Border02/index'
 import { Border03Config } from './Border03/index'
 import { Border04Config } from './Border04/index'
+import { Border05Config } from './Border05/index'
 
-export default [Border01Config, Border02Config, Border03Config, Border04Config]
+export default [
+  Border01Config,
+  Border02Config,
+  Border03Config,
+  Border04Config,
+  Border05Config
+]