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

---
 .../images/chart/decorates/border08.png       | Bin 0 -> 1957 bytes
 .../Decorates/Borders/Border01/config.vue     |   3 +-
 .../Decorates/Borders/Border08/config.ts      |  17 ++++
 .../Decorates/Borders/Border08/config.vue     |  73 +++++++++++++++
 .../Decorates/Borders/Border08/index.ts       |  14 +++
 .../Decorates/Borders/Border08/index.vue      |  83 ++++++++++++++++++
 .../components/Decorates/Borders/index.ts     |   4 +-
 7 files changed, 192 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/images/chart/decorates/border08.png
 create mode 100644 src/packages/components/Decorates/Borders/Border08/config.ts
 create mode 100644 src/packages/components/Decorates/Borders/Border08/config.vue
 create mode 100644 src/packages/components/Decorates/Borders/Border08/index.ts
 create mode 100644 src/packages/components/Decorates/Borders/Border08/index.vue

diff --git a/src/assets/images/chart/decorates/border08.png b/src/assets/images/chart/decorates/border08.png
new file mode 100644
index 0000000000000000000000000000000000000000..5fd56fd416aa501ca53e3eb1cfaed5c0e85ce590
GIT binary patch
literal 1957
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
XOBJ`?Ep*X2%a2nSxQbW7*_`ng?zRdX

literal 0
HcmV?d00001

diff --git a/src/packages/components/Decorates/Borders/Border01/config.vue b/src/packages/components/Decorates/Borders/Border01/config.vue
index 41ba9dfd..300c407a 100644
--- a/src/packages/components/Decorates/Borders/Border01/config.vue
+++ b/src/packages/components/Decorates/Borders/Border01/config.vue
@@ -28,6 +28,7 @@
       <SettingItem>
         <n-input-number
           v-model:value="optionData.dur"
+          size="small"
           :step="0.5"
           :min="0.5"
         ></n-input-number>
@@ -39,9 +40,9 @@
     <SettingItemBox name="颜色">
       <SettingItem>
         <n-color-picker
+          v-model:value="optionData.backgroundColor"
           size="small"
           :modes="['hex']"
-          v-model:value="optionData.backgroundColor"
         ></n-color-picker>
       </SettingItem>
     </SettingItemBox>
diff --git a/src/packages/components/Decorates/Borders/Border08/config.ts b/src/packages/components/Decorates/Borders/Border08/config.ts
new file mode 100644
index 00000000..d999654a
--- /dev/null
+++ b/src/packages/components/Decorates/Borders/Border08/config.ts
@@ -0,0 +1,17 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Border08Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  colors: ['#235fa7', '#4fd2dd'],
+  dur: 3,
+  reverse: false,
+  backgroundColor: '#00000000'
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = Border08Config.key
+  public chartConfig = cloneDeep(Border08Config)
+  public option = option
+}
diff --git a/src/packages/components/Decorates/Borders/Border08/config.vue b/src/packages/components/Decorates/Borders/Border08/config.vue
new file mode 100644
index 00000000..adc3cde3
--- /dev/null
+++ b/src/packages/components/Decorates/Borders/Border08/config.vue
@@ -0,0 +1,73 @@
+<template>
+  <CollapseItem name="动画" :expanded="true">
+    <SettingItemBox name="设置">
+      <SettingItem name="速度">
+        <n-input-number
+          v-model:value="optionData.dur"
+          size="small"
+          :step="0.5"
+          :min="0.5"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem>
+        <n-space>
+          <n-text>开启反向</n-text>
+          <n-switch size="small" v-model:value="optionData.reverse" />
+        </n-space>
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+  
+  <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/Border08/index.ts b/src/packages/components/Decorates/Borders/Border08/index.ts
new file mode 100644
index 00000000..9d52aee1
--- /dev/null
+++ b/src/packages/components/Decorates/Borders/Border08/index.ts
@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/border08.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Border08Config: ConfigType = {
+  key: 'Border08',
+  chartKey: 'VBorder08',
+  conKey: 'VCBorder08',
+  title: '边框-08',
+  category: ChatCategoryEnum.BORDER,
+  categoryName: ChatCategoryEnumName.BORDER,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}
diff --git a/src/packages/components/Decorates/Borders/Border08/index.vue b/src/packages/components/Decorates/Borders/Border08/index.vue
new file mode 100644
index 00000000..4326761a
--- /dev/null
+++ b/src/packages/components/Decorates/Borders/Border08/index.vue
@@ -0,0 +1,83 @@
+<template>
+  <div class="go-border-box">
+    <svg class="bv-border-svg-container" :width="w" :height="h">
+      <defs>
+        <path :id="path" :d="pathD" fill="transparent" />
+        <radialGradient :id="gradient" cx="50%" cy="50%" r="50%">
+          <stop offset="0%" stop-color="#fff" stop-opacity="1" />
+          <stop offset="100%" stop-color="#fff" stop-opacity="0" />
+        </radialGradient>
+
+        <mask :id="mask">
+          <circle cx="0" cy="0" r="150" :fill="`url(#${gradient})`">
+            <animateMotion
+              :dur="`${dur}s`"
+              :path="pathD"
+              rotate="auto"
+              repeatCount="indefinite"
+            />
+          </circle>
+        </mask>
+      </defs>
+
+      <polygon
+        :fill="backgroundColor"
+        :points="`5, 5 ${w - 5}, 5 ${w - 5} ${h - 5} 5, ${
+          h - 5
+        }`"
+      />
+
+      <use :stroke="colors[0]" stroke-width="1" :xlink:href="`#${path}`" />
+
+      <use
+        :stroke="colors[1]"
+        stroke-width="3"
+        :xlink:href="`#${path}`"
+        :mask="`url(#${mask})`"
+      >
+        <animate
+          attributeName="stroke-dasharray"
+          :from="`0, ${length}`"
+          :to="`${length}, 0`"
+          :dur="`${dur}s`"
+          repeatCount="indefinite"
+        />
+      </use>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, computed } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { getUUID } from '@/utils'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const path = `border-box-08-path-${getUUID()}`
+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 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`
+})
+
+</script>
+
+<style lang="scss" scoped>
+@include go('border-box') {
+}
+</style>
diff --git a/src/packages/components/Decorates/Borders/index.ts b/src/packages/components/Decorates/Borders/index.ts
index 71d43bf0..5957c245 100644
--- a/src/packages/components/Decorates/Borders/index.ts
+++ b/src/packages/components/Decorates/Borders/index.ts
@@ -5,6 +5,7 @@ import { Border04Config } from './Border04/index'
 import { Border05Config } from './Border05/index'
 import { Border06Config } from './Border06/index'
 import { Border07Config } from './Border07/index'
+import { Border08Config } from './Border08/index'
 
 export default [
   Border01Config,
@@ -13,5 +14,6 @@ export default [
   Border04Config,
   Border05Config,
   Border06Config,
-  Border07Config
+  Border07Config,
+  Border08Config
 ]