From b8d0d1a2ffa0992b71cd1c11efea05bb79de7e87 Mon Sep 17 00:00:00 2001
From: Ryker <1132969953@qq.com>
Date: Wed, 15 Jun 2022 01:43:07 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E4=BF=A1=E6=81=AF-?=
 =?UTF-8?q?=E6=96=87=E5=AD=97-=E6=96=B0=E5=A2=9E=E3=80=90=E6=B8=90?=
 =?UTF-8?q?=E5=8F=98=E6=96=87=E5=AD=97=E3=80=91=E7=BB=84=E4=BB=B6=20feat:?=
 =?UTF-8?q?=20=E6=96=B0=E5=A2=9E=E4=BF=A1=E6=81=AF-=E6=96=87=E5=AD=97-?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E3=80=90=E6=B8=90=E5=8F=98=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E3=80=91=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Informations/Texts/TextGradient/config.ts | 20 +++++++
 .../Texts/TextGradient/config.vue             | 45 ++++++++++++++++
 .../Informations/Texts/TextGradient/index.ts  | 14 +++++
 .../Informations/Texts/TextGradient/index.vue | 52 +++++++++++++++++++
 .../components/Informations/Texts/index.ts    |  3 +-
 5 files changed, 133 insertions(+), 1 deletion(-)
 create mode 100644 src/packages/components/Informations/Texts/TextGradient/config.ts
 create mode 100644 src/packages/components/Informations/Texts/TextGradient/config.vue
 create mode 100644 src/packages/components/Informations/Texts/TextGradient/index.ts
 create mode 100644 src/packages/components/Informations/Texts/TextGradient/index.vue

diff --git a/src/packages/components/Informations/Texts/TextGradient/config.ts b/src/packages/components/Informations/Texts/TextGradient/config.ts
new file mode 100644
index 00000000..8114b404
--- /dev/null
+++ b/src/packages/components/Informations/Texts/TextGradient/config.ts
@@ -0,0 +1,20 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { TextGradientConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export const option = {
+  dataset: '我是渐变文本',
+  size: 20,
+  gradient: {
+    from: '#0000FFFF',
+    to: '#00FF00FF',
+    deg: 45
+  }
+}
+
+export default class Config extends publicConfig implements CreateComponentType {
+  public key = TextGradientConfig.key
+  public chartConfig = cloneDeep(TextGradientConfig)
+  public option = cloneDeep(option)
+}
diff --git a/src/packages/components/Informations/Texts/TextGradient/config.vue b/src/packages/components/Informations/Texts/TextGradient/config.vue
new file mode 100644
index 00000000..44e08757
--- /dev/null
+++ b/src/packages/components/Informations/Texts/TextGradient/config.vue
@@ -0,0 +1,45 @@
+<template>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="文字" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+  <collapse-item name="样式" :expanded="true">
+    <setting-item-box name="文字">
+      <setting-item name="字体大小">
+        <n-input-number v-model:value="optionData.size" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="渐变色参数">
+      <setting-item name="起始值">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.gradient.from"></n-color-picker>
+      </setting-item>
+      <setting-item name="结束值">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.gradient.to"></n-color-picker>
+      </setting-item>
+      <setting-item name="偏移角度">
+        <n-input-number v-model:value="optionData.gradient.deg" size="small" placeholder="颜色旋转"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option } from './config'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/Pages/ChartItemSetting'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>
diff --git a/src/packages/components/Informations/Texts/TextGradient/index.ts b/src/packages/components/Informations/Texts/TextGradient/index.ts
new file mode 100644
index 00000000..701c29f0
--- /dev/null
+++ b/src/packages/components/Informations/Texts/TextGradient/index.ts
@@ -0,0 +1,14 @@
+import image from '@/assets/images/chart/informations/text_static.png'
+import { ConfigType, PackagesCategoryEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const TextGradientConfig: ConfigType = {
+  key: 'TextGradient',
+  chartKey: 'VTextGradient',
+  conKey: 'VCTextGradient',
+  title: '渐变文字',
+  category: ChatCategoryEnum.TEXT,
+  categoryName: ChatCategoryEnumName.TEXT,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  image
+}
diff --git a/src/packages/components/Informations/Texts/TextGradient/index.vue b/src/packages/components/Informations/Texts/TextGradient/index.vue
new file mode 100644
index 00000000..87160cbf
--- /dev/null
+++ b/src/packages/components/Informations/Texts/TextGradient/index.vue
@@ -0,0 +1,52 @@
+<template>
+  <div class="go-text-box">
+    <n-gradient-text :size="size" :gradient="gradient">
+      {{ option.dataset }}
+    </n-gradient-text>
+  </div>
+</template>
+<script setup lang="ts">
+import { PropType, toRefs, reactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true,
+  },
+})
+
+const option = reactive({
+  dataset: ''
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+
+const {
+  size,
+  gradient
+} = toRefs(props.chartConfig.option)
+
+const callback = (newData: string) => {
+  option.dataset = newData
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  () => {
+    option.dataset = props.chartConfig.option.dataset
+  }, { immediate: true }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, callback)
+</script>
+
+<style lang="scss" scoped>
+@include go('text-box') {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/src/packages/components/Informations/Texts/index.ts b/src/packages/components/Informations/Texts/index.ts
index 60f9e456..093a2d52 100644
--- a/src/packages/components/Informations/Texts/index.ts
+++ b/src/packages/components/Informations/Texts/index.ts
@@ -1,3 +1,4 @@
 import { TextCommonConfig } from './TextCommon/index'
+import { TextGradientConfig } from './TextGradient/index'
 
-export default [TextCommonConfig]
+export default [TextCommonConfig, TextGradientConfig]