From 504c461c573e4a777711e9a8558828a8434dda53 Mon Sep 17 00:00:00 2001
From: mtrun <1262327911@qq.com>
Date: Thu, 31 Mar 2022 16:40:11 +0800
Subject: [PATCH] =?UTF-8?q?fix=EF=BC=9A=E6=96=B0=E5=A2=9E=E8=BE=B9?=
 =?UTF-8?q?=E6=A1=8602=EF=BC=8C03?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../images/chart/decorates/decorates02.png    | Bin 0 -> 1972 bytes
 .../images/chart/decorates/decorates03.png    | Bin 0 -> 3697 bytes
 .../Decorates/Decorates/Decorates01/index.vue |   2 +-
 .../Decorates/Decorates/Decorates02/config.ts |  16 +++++
 .../Decorates/Decorates02/config.vue          |  55 ++++++++++++++
 .../Decorates/Decorates/Decorates02/index.ts  |  14 ++++
 .../Decorates/Decorates/Decorates02/index.vue |  55 ++++++++++++++
 .../Decorates/Decorates/Decorates03/config.ts |  17 +++++
 .../Decorates/Decorates03/config.vue          |  67 ++++++++++++++++++
 .../Decorates/Decorates/Decorates03/index.ts  |  14 ++++
 .../Decorates/Decorates/Decorates03/index.vue |  62 ++++++++++++++++
 .../components/Decorates/Decorates/index.ts   |   4 +-
 12 files changed, 304 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/images/chart/decorates/decorates02.png
 create mode 100644 src/assets/images/chart/decorates/decorates03.png
 create mode 100644 src/packages/components/Decorates/Decorates/Decorates02/config.ts
 create mode 100644 src/packages/components/Decorates/Decorates/Decorates02/config.vue
 create mode 100644 src/packages/components/Decorates/Decorates/Decorates02/index.ts
 create mode 100644 src/packages/components/Decorates/Decorates/Decorates02/index.vue
 create mode 100644 src/packages/components/Decorates/Decorates/Decorates03/config.ts
 create mode 100644 src/packages/components/Decorates/Decorates/Decorates03/config.vue
 create mode 100644 src/packages/components/Decorates/Decorates/Decorates03/index.ts
 create mode 100644 src/packages/components/Decorates/Decorates/Decorates03/index.vue

diff --git a/src/assets/images/chart/decorates/decorates02.png b/src/assets/images/chart/decorates/decorates02.png
new file mode 100644
index 0000000000000000000000000000000000000000..652c801d3aa8fe675957d1b5f9d948c6bb2d9002
GIT binary patch
literal 1972
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

literal 0
HcmV?d00001

diff --git a/src/assets/images/chart/decorates/decorates03.png b/src/assets/images/chart/decorates/decorates03.png
new file mode 100644
index 0000000000000000000000000000000000000000..92c32cb15b4f3f1c7a785f305a346b9b365ab331
GIT binary patch
literal 3697
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
a!UOPKvo+_Bdf%SypFnerHM#`l5%EtSFoqET

literal 0
HcmV?d00001

diff --git a/src/packages/components/Decorates/Decorates/Decorates01/index.vue b/src/packages/components/Decorates/Decorates/Decorates01/index.vue
index 66296e52..023e8c38 100644
--- a/src/packages/components/Decorates/Decorates/Decorates01/index.vue
+++ b/src/packages/components/Decorates/Decorates/Decorates01/index.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, computed, toRefs, reactive } from 'vue'
+import { PropType, computed, toRefs } from 'vue'
 import { CreateComponentType } from '@/packages/index.d'
 
 const props = defineProps({
diff --git a/src/packages/components/Decorates/Decorates/Decorates02/config.ts b/src/packages/components/Decorates/Decorates/Decorates02/config.ts
new file mode 100644
index 00000000..9a18e8b8
--- /dev/null
+++ b/src/packages/components/Decorates/Decorates/Decorates02/config.ts
@@ -0,0 +1,16 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Decorates02Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  colors: ['#ffffff4d', '#ffffff4d'],
+  dur: 3,
+  lineHeight: 3,
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = Decorates02Config.key
+  public chartConfig = cloneDeep(Decorates02Config)
+  public option = option
+}
diff --git a/src/packages/components/Decorates/Decorates/Decorates02/config.vue b/src/packages/components/Decorates/Decorates/Decorates02/config.vue
new file mode 100644
index 00000000..2cfea9bf
--- /dev/null
+++ b/src/packages/components/Decorates/Decorates/Decorates02/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="速度">
+      <SettingItem>
+        <n-input-number
+          v-model:value="optionData.dur"
+          size="small"
+          :step="0.5"
+          :min="0.5"
+        ></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/Decorates02/index.ts b/src/packages/components/Decorates/Decorates/Decorates02/index.ts
new file mode 100644
index 00000000..4016dfac
--- /dev/null
+++ b/src/packages/components/Decorates/Decorates/Decorates02/index.ts
@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/decorates02.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const Decorates02Config: ConfigType = {
+  key: 'Decorates02',
+  chartKey: 'VDecorates02',
+  conKey: 'VCDecorates02',
+  title: '装饰-02',
+  category: ChatCategoryEnum.DECORATES,
+  categoryName: ChatCategoryEnumName.DECORATES,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}
diff --git a/src/packages/components/Decorates/Decorates/Decorates02/index.vue b/src/packages/components/Decorates/Decorates/Decorates02/index.vue
new file mode 100644
index 00000000..9abbed33
--- /dev/null
+++ b/src/packages/components/Decorates/Decorates/Decorates02/index.vue
@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="go-decorates-2"
+    :style="`width:${w}px; animation-duration:${dur}s`"
+  >
+    <svg :width="w" :height="3">
+      <polyline :stroke="colors[0]" :points="`0, 2.5 ${w}, 2.5`" />
+      <polyline
+        :stroke="colors[1]"
+        stroke-width="3"
+        stroke-dasharray="20, 80"
+        stroke-dashoffset="-30"
+        :points="`0, 2.5 ${w}, 2.5`"
+      />
+    </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, dur } = toRefs(props.chartConfig.option)
+</script>
+<style lang="scss" scoped>
+@include go('decorates-2') {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  animation: animationWidth ease-in-out infinite;
+}
+@keyframes animationWidth {
+  0% {
+    width: 0;
+    background-color: aliceblue;
+  }
+
+  70% {
+    width: 100%;
+  }
+
+  100% {
+    width: 100%;
+    background-color: red;
+  }
+}
+</style>
diff --git a/src/packages/components/Decorates/Decorates/Decorates03/config.ts b/src/packages/components/Decorates/Decorates/Decorates03/config.ts
new file mode 100644
index 00000000..41067c51
--- /dev/null
+++ b/src/packages/components/Decorates/Decorates/Decorates03/config.ts
@@ -0,0 +1,17 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { Decorates03Config } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  text: '装饰-03',
+  textColor: '#fff',
+  textSize: 24,
+  colors: ['#1dc1f5', '#1dc1f5'],
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = Decorates03Config.key
+  public chartConfig = cloneDeep(Decorates03Config)
+  public option = option
+}
diff --git a/src/packages/components/Decorates/Decorates/Decorates03/config.vue b/src/packages/components/Decorates/Decorates/Decorates03/config.vue
new file mode 100644
index 00000000..2ea6450f
--- /dev/null
+++ b/src/packages/components/Decorates/Decorates/Decorates03/config.vue
@@ -0,0 +1,67 @@
+<template>
+  <CollapseItem name="文字" :expanded="true">
+    <SettingItemBox name="内容" :alone="true">
+      <SettingItem>
+        <n-input v-model:value="optionData.text" size="small"></n-input>
+      </SettingItem>
+    </SettingItemBox>
+
+    <SettingItemBox name="样式">
+      <SettingItem name="颜色">
+        <n-color-picker
+          size="small"
+          :modes="['hex']"
+          v-model:value="optionData.textColor"
+        ></n-color-picker>
+      </SettingItem>
+      <SettingItem name="大小">
+        <n-input-number
+          v-model:value="optionData.textSize"
+          size="small"
+          :min="12"
+        ></n-input-number>
+      </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>
+</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/Decorates03/index.ts b/src/packages/components/Decorates/Decorates/Decorates03/index.ts
new file mode 100644
index 00000000..c2fda8ae
--- /dev/null
+++ b/src/packages/components/Decorates/Decorates/Decorates03/index.ts
@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/decorates/decorates03.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const Decorates03Config: ConfigType = {
+  key: 'Decorates03',
+  chartKey: 'VDecorates03',
+  conKey: 'VCDecorates03',
+  title: '装饰-03',
+  category: ChatCategoryEnum.DECORATES,
+  categoryName: ChatCategoryEnumName.DECORATES,
+  package: PackagesCategoryEnum.DECORATES,
+  image
+}
diff --git a/src/packages/components/Decorates/Decorates/Decorates03/index.vue b/src/packages/components/Decorates/Decorates/Decorates03/index.vue
new file mode 100644
index 00000000..e43fcdc7
--- /dev/null
+++ b/src/packages/components/Decorates/Decorates/Decorates03/index.vue
@@ -0,0 +1,62 @@
+<template>
+  <div class="go-border-03" :style="`width: ${w}px; height: ${h}px`">
+    <svg :width="20" :height="20">
+      <polyline
+        stroke-width="4"
+        fill="transparent"
+        :stroke="colors[0]"
+        points="10, 0 19, 10 10, 20"
+      />
+      <polyline
+        stroke-width="2"
+        fill="transparent"
+        :stroke="colors[1]"
+        points="2, 0 11, 10 2, 20"
+      />
+    </svg>
+    <span :style="`color: ${textColor};font-size: ${textSize}px`">
+      {{ text }}</span
+    >
+    <svg :width="20" :height="20">
+      <polyline
+        stroke-width="4"
+        fill="transparent"
+        :stroke="colors[0]"
+        points="11, 0 2, 10 11, 20"
+      />
+      <polyline
+        stroke-width="2"
+        fill="transparent"
+        :stroke="colors[1]"
+        points="19, 0 10, 10 19, 20"
+      />
+    </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, text, textSize, textColor } = toRefs(props.chartConfig.option)
+</script>
+
+<style lang="scss" scoped>
+@include go('border-03') {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  span {
+    text-align: center;
+    flex: 1;
+  }
+}
+</style>
diff --git a/src/packages/components/Decorates/Decorates/index.ts b/src/packages/components/Decorates/Decorates/index.ts
index d5c8662a..3324c4b6 100644
--- a/src/packages/components/Decorates/Decorates/index.ts
+++ b/src/packages/components/Decorates/Decorates/index.ts
@@ -1,3 +1,5 @@
 import { Decorates01Config } from './Decorates01/index'
+import { Decorates02Config } from './Decorates02/index'
+import { Decorates03Config } from './Decorates03/index'
 
-export default [Decorates01Config]
+export default [Decorates01Config, Decorates02Config, Decorates03Config]