From 7a1d64c7e2ec05619c4a40c59d802e8e5ef1d656 Mon Sep 17 00:00:00 2001
From: mtrun <1262327911@qq.com>
Date: Thu, 31 Mar 2022 18:02:45 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E8=A3=85=E9=A5=B04?=
 =?UTF-8?q?=20-5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/chart/decorates/decorates04.png    | Bin 0 -> 2820 bytes
 .../Decorates/Decorates03/config.vue          |   2 +-
 .../Decorates/Decorates/Decorates04/config.ts |  16 ++
 .../Decorates/Decorates04/config.vue          |  51 +++++
 .../Decorates/Decorates/Decorates04/index.ts  |  14 ++
 .../Decorates/Decorates/Decorates04/index.vue |  53 ++++++
 .../Decorates/Decorates/Decorates05/config.ts |  15 ++
 .../Decorates/Decorates05/config.vue          |  55 ++++++
 .../Decorates/Decorates/Decorates05/index.ts  |  14 ++
 .../Decorates/Decorates/Decorates05/index.vue | 174 ++++++++++++++++++
 .../components/Decorates/Decorates/index.ts   |  10 +-
 11 files changed, 402 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/images/chart/decorates/decorates04.png
 create mode 100644 src/packages/components/Decorates/Decorates/Decorates04/config.ts
 create mode 100644 src/packages/components/Decorates/Decorates/Decorates04/config.vue
 create mode 100644 src/packages/components/Decorates/Decorates/Decorates04/index.ts
 create mode 100644 src/packages/components/Decorates/Decorates/Decorates04/index.vue
 create mode 100644 src/packages/components/Decorates/Decorates/Decorates05/config.ts
 create mode 100644 src/packages/components/Decorates/Decorates/Decorates05/config.vue
 create mode 100644 src/packages/components/Decorates/Decorates/Decorates05/index.ts
 create mode 100644 src/packages/components/Decorates/Decorates/Decorates05/index.vue

diff --git a/src/assets/images/chart/decorates/decorates04.png b/src/assets/images/chart/decorates/decorates04.png
new file mode 100644
index 0000000000000000000000000000000000000000..7a3d3529dd61353e837d4749b253c3ef3c1a38ed
GIT binary patch
literal 2820
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
JQ;qgN|2JTnw+#RQ

literal 0
HcmV?d00001

diff --git a/src/packages/components/Decorates/Decorates/Decorates03/config.vue b/src/packages/components/Decorates/Decorates/Decorates03/config.vue
index 2ea6450f..58655388 100644
--- a/src/packages/components/Decorates/Decorates/Decorates03/config.vue
+++ b/src/packages/components/Decorates/Decorates/Decorates03/config.vue
@@ -24,7 +24,7 @@
     </SettingItemBox>
   </CollapseItem>
 
-  <CollapseItem name="装饰" :expanded="true">
+  <CollapseItem name="样式" :expanded="true">
     <SettingItemBox
       :name="`颜色-${index + 1}`"
       v-for="(item, index) in optionData.colors"
diff --git a/src/packages/components/Decorates/Decorates/Decorates04/config.ts b/src/packages/components/Decorates/Decorates/Decorates04/config.ts
new file mode 100644
index 00000000..1078a347
--- /dev/null
+++ b/src/packages/components/Decorates/Decorates/Decorates04/config.ts
@@ -0,0 +1,16 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Decorates04Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  colors: ['#1dc1f5', '#1dc1f5'],
+  // 是否翻转
+  reverse: false
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = Decorates04Config.key
+  public chartConfig = cloneDeep(Decorates04Config)
+  public option = option
+}
diff --git a/src/packages/components/Decorates/Decorates/Decorates04/config.vue b/src/packages/components/Decorates/Decorates/Decorates04/config.vue
new file mode 100644
index 00000000..9d8059cf
--- /dev/null
+++ b/src/packages/components/Decorates/Decorates/Decorates04/config.vue
@@ -0,0 +1,51 @@
+<template>
+  <CollapseItem name="样式" :expanded="true">
+    <SettingItemBox name="方向">
+      <SettingItem >
+        <n-space>
+        <n-switch v-model:value="optionData.reverse" size="small" />
+          <n-text>开启反向</n-text>
+        </n-space>
+      </SettingItem>
+    </SettingItemBox>
+
+    <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/Decorates/Decorates04/index.ts b/src/packages/components/Decorates/Decorates/Decorates04/index.ts
new file mode 100644
index 00000000..38adf988
--- /dev/null
+++ b/src/packages/components/Decorates/Decorates/Decorates04/index.ts
@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/decorates04.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Decorates04Config: ConfigType = {
+  key: 'Decorates04',
+  chartKey: 'VDecorates04',
+  conKey: 'VCDecorates04',
+  title: '装饰-04',
+  category: ChatCategoryEnum.DECORATES,
+  categoryName: ChatCategoryEnumName.DECORATES,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}
diff --git a/src/packages/components/Decorates/Decorates/Decorates04/index.vue b/src/packages/components/Decorates/Decorates/Decorates04/index.vue
new file mode 100644
index 00000000..a9a8fe79
--- /dev/null
+++ b/src/packages/components/Decorates/Decorates/Decorates04/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="go-border-04">
+    <svg :width="w" :height="h">
+      <polyline
+        :stroke="colors[0]"
+        stroke-width="2"
+        fill="transparent"
+        :points="`${xPos(0)}, 0 ${xPos(30)}, ${h / 2}`"
+      />
+
+      <polyline
+        :stroke="colors[0]"
+        stroke-width="2"
+        fill="transparent"
+        :points="`${xPos(20)}, 0 ${xPos(50)}, ${h / 2} ${xPos(w)}, ${
+          h / 2
+        }`"
+      />
+
+      <polyline
+        :stroke="colors[1]"
+        fill="transparent"
+        stroke-width="3"
+        :points="`${xPos(0)}, ${h - 3}, ${xPos(200)}, ${h - 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 { w, h } = toRefs(props.chartConfig.attr)
+const { colors, reverse } = toRefs(props.chartConfig.option)
+
+const xPos = (pos: number) => {
+  if (!reverse.value) return pos
+  return w.value - pos
+}
+</script>
+
+<style lang="scss" scoped>
+@include go('border-04') {
+}
+</style>
diff --git a/src/packages/components/Decorates/Decorates/Decorates05/config.ts b/src/packages/components/Decorates/Decorates/Decorates05/config.ts
new file mode 100644
index 00000000..7e82d847
--- /dev/null
+++ b/src/packages/components/Decorates/Decorates/Decorates05/config.ts
@@ -0,0 +1,15 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Decorates05Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  colors: ['#00c2ff', '#00c2ff4d'],
+  dur: 3,
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = Decorates05Config.key
+  public chartConfig = cloneDeep(Decorates05Config)
+  public option = option
+}
diff --git a/src/packages/components/Decorates/Decorates/Decorates05/config.vue b/src/packages/components/Decorates/Decorates/Decorates05/config.vue
new file mode 100644
index 00000000..201b8d33
--- /dev/null
+++ b/src/packages/components/Decorates/Decorates/Decorates05/config.vue
@@ -0,0 +1,55 @@
+<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="速度(s)">
+      <SettingItem>
+        <n-input-number
+          v-model:value="optionData.dur"
+          size="small"
+          :step="1"
+          :min="2"
+        ></n-input-number>
+      </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/Decorates/Decorates05/index.ts b/src/packages/components/Decorates/Decorates/Decorates05/index.ts
new file mode 100644
index 00000000..9a61f90f
--- /dev/null
+++ b/src/packages/components/Decorates/Decorates/Decorates05/index.ts
@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/decorates05.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Decorates05Config: ConfigType = {
+  key: 'Decorates05',
+  chartKey: 'VDecorates05',
+  conKey: 'VCDecorates05',
+  title: '装饰-05',
+  category: ChatCategoryEnum.DECORATES,
+  categoryName: ChatCategoryEnumName.DECORATES,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}
diff --git a/src/packages/components/Decorates/Decorates/Decorates05/index.vue b/src/packages/components/Decorates/Decorates/Decorates05/index.vue
new file mode 100644
index 00000000..692054bf
--- /dev/null
+++ b/src/packages/components/Decorates/Decorates/Decorates05/index.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="go-border-05">
+    <svg :width="w" :height="h">
+      <polyline
+        :stroke="colors[1]"
+        stroke-width="2"
+        :points="`0, ${h / 2} ${w}, ${h / 2}`"
+      />
+
+      <polyline
+        :stroke="colors[0]"
+        stroke-width="2"
+        :points="`5, ${h / 2} ${w * 0.2 - 3}, ${h / 2}`"
+        :stroke-dasharray="`0, ${w * 0.2}`"
+        fill="freeze"
+      >
+        <animate
+          :id="animationId2"
+          attributeName="stroke-dasharray"
+          :values="`0, ${w * 0.2};${w * 0.2}, 0;`"
+          :dur="dur"
+          :begin="`${animationId1}.end`"
+          fill="freeze"
+        />
+        <animate
+          attributeName="stroke-dasharray"
+          :values="`${w * 0.2}, 0;0, ${w * 0.2}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </polyline>
+
+      <polyline
+        :stroke="colors[0]"
+        stroke-width="2"
+        :points="`${w * 0.2 + 3}, ${h / 2} ${w * 0.8 - 3}, ${h / 2}`"
+        :stroke-dasharray="`0, ${w * 0.6}`"
+      >
+        <animate
+          :id="animationId4"
+          attributeName="stroke-dasharray"
+          :values="`0, ${w * 0.6};${w * 0.6}, 0`"
+          :dur="dur"
+          :begin="`${animationId3}.end + 1s`"
+          fill="freeze"
+        />
+        <animate
+          attributeName="stroke-dasharray"
+          :values="`${w * 0.6}, 0;0, ${w * 0.6}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </polyline>
+
+      <polyline
+        :stroke="colors[0]"
+        stroke-width="2"
+        :points="`${w * 0.8 + 3}, ${h / 2} ${w - 5}, ${h / 2}`"
+        :stroke-dasharray="`0, ${w * 0.2}`"
+      >
+        <animate
+          :id="animationId6"
+          attributeName="stroke-dasharray"
+          :values="`0, ${w * 0.2};${w * 0.2}, 0`"
+          :dur="dur"
+          :begin="`${animationId5}.end + 1s`"
+          fill="freeze"
+        />
+        <animate
+          attributeName="stroke-dasharray"
+          :values="`${w * 0.2}, 0;0, ${w * 0.3}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </polyline>
+
+      <circle cx="2" :cy="h / 2" r="2" :fill="colors[1]">
+        <animate
+          :id="animationId1"
+          attributeName="fill"
+          :values="`${colors[1]};${colors[0]}`"
+          :begin="`0s;${animationId7}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+      </circle>
+
+      <circle :cx="w * 0.2" :cy="h / 2" r="2" :fill="colors[1]">
+        <animate
+          :id="animationId3"
+          attributeName="fill"
+          :values="`${colors[1]};${colors[0]}`"
+          :begin="`${animationId2}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+        <animate
+          attributeName="fill"
+          :values="`${colors[1]};${colors[1]}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </circle>
+
+      <circle :cx="w * 0.8" :cy="h / 2" r="2" :fill="colors[1]">
+        <animate
+          :id="animationId5"
+          attributeName="fill"
+          :values="`${colors[1]};${colors[0]}`"
+          :begin="`${animationId4}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+        <animate
+          attributeName="fill"
+          :values="`${colors[1]};${colors[1]}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </circle>
+
+      <circle :cx="w - 2" :cy="h / 2" r="2" :fill="colors[1]">
+        <animate
+          :id="animationId7"
+          attributeName="fill"
+          :values="`${colors[1]};${colors[0]}`"
+          :begin="`${animationId6}.end`"
+          dur="0.3s"
+          fill="freeze"
+        />
+        <animate
+          attributeName="fill"
+          :values="`${colors[1]};${colors[1]}`"
+          dur="0.01s"
+          :begin="`${animationId7}.end`"
+          fill="freeze"
+        />
+      </circle>
+    </svg>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { getUUID } from '@/utils'
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true,
+  },
+})
+
+const id = getUUID()
+const { w, h } = toRefs(props.chartConfig.attr)
+const { colors, dur } = toRefs(props.chartConfig.option)
+const animationId1 = `d10ani1${id}`
+const animationId2 = `d10ani2${id}`
+const animationId3 = `d10ani3${id}`
+const animationId4 = `d10ani4${id}`
+const animationId5 = `d10ani5${id}`
+const animationId6 = `d10ani6${id}`
+const animationId7 = `d10ani7${id}`
+</script>
+
+<style lang="scss" scoped>
+@include go('border-04') {
+}
+</style>
diff --git a/src/packages/components/Decorates/Decorates/index.ts b/src/packages/components/Decorates/Decorates/index.ts
index 3324c4b6..ddecd0ed 100644
--- a/src/packages/components/Decorates/Decorates/index.ts
+++ b/src/packages/components/Decorates/Decorates/index.ts
@@ -1,5 +1,13 @@
 import { Decorates01Config } from './Decorates01/index'
 import { Decorates02Config } from './Decorates02/index'
 import { Decorates03Config } from './Decorates03/index'
+import { Decorates04Config } from './Decorates04/index'
+import { Decorates05Config } from './Decorates05/index'
 
-export default [Decorates01Config, Decorates02Config, Decorates03Config]
+export default [
+  Decorates01Config,
+  Decorates02Config,
+  Decorates03Config,
+  Decorates04Config,
+  Decorates05Config,
+]