From 8b7606f8939011186867f51abece656f8a2bb905 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A5=94=E8=B7=91=E7=9A=84=E9=9D=A2=E6=9D=A1?=
 <1262327911@qq.com>
Date: Wed, 6 Apr 2022 21:53:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E6=96=87=E5=AD=97?=
 =?UTF-8?q?=E8=BE=B9=E6=A1=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Decorates/Borders/Border01/config.ts      |  3 +-
 .../Decorates/Borders/Border02/config.ts      |  3 +-
 .../Decorates/Borders/Border03/config.ts      |  3 +-
 .../Decorates/Borders/Border04/config.ts      |  3 +-
 .../Decorates/Borders/Border05/config.ts      |  3 +-
 .../Decorates/Borders/Border06/config.ts      |  3 +-
 .../Decorates/Borders/Border07/config.ts      |  3 +-
 .../Decorates/Borders/Border08/config.ts      |  3 +-
 .../Decorates/Borders/Border09/config.ts      |  3 +-
 .../Decorates/Borders/Border10/config.ts      |  3 +-
 .../Decorates/Borders/Border11/config.ts      |  3 +-
 .../Decorates/Borders/Border12/config.ts      |  3 +-
 .../Decorates/Borders/Border13/config.ts      |  3 +-
 .../Decorates/Decorates/Decorates03/config.ts |  2 +-
 .../Decorates/Decorates03/config.vue          |  2 +-
 .../Decorates/Decorates/Decorates03/index.vue |  4 +-
 .../Informations/Texts/TextCommon/config.ts   | 33 ++++++++++
 .../Informations/Texts/TextCommon/config.vue  | 60 +++++++++++++++++++
 .../Informations/Texts/TextCommon/index.vue   | 35 +++++++++--
 src/views/chart/ContentLayers/index.vue       |  1 +
 20 files changed, 154 insertions(+), 22 deletions(-)
 create mode 100644 src/packages/components/Informations/Texts/TextCommon/config.ts

diff --git a/src/packages/components/Decorates/Borders/Border01/config.ts b/src/packages/components/Decorates/Borders/Border01/config.ts
index 3715dfbb..1e12251e 100644
--- a/src/packages/components/Decorates/Borders/Border01/config.ts
+++ b/src/packages/components/Decorates/Borders/Border01/config.ts
@@ -6,7 +6,8 @@ import cloneDeep from 'lodash/cloneDeep'
 export const option = {
   dur: 0.5,
   colors: ['#4fd2dd', '#235fa7'],
-  backgroundColor: '#00000000'
+  backgroundColor: '#00000000',
+  dataset: null
 }
 
 export default class Config extends publicConfig implements CreateComponentType {
diff --git a/src/packages/components/Decorates/Borders/Border02/config.ts b/src/packages/components/Decorates/Borders/Border02/config.ts
index 89b90089..f43d2d19 100644
--- a/src/packages/components/Decorates/Borders/Border02/config.ts
+++ b/src/packages/components/Decorates/Borders/Border02/config.ts
@@ -5,7 +5,8 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   colors: ['#6586ec', '#2cf7fe'],
-  backgroundColor: '#00000000'
+  backgroundColor: '#00000000',
+  dataset: null
 }
 
 export default class Config extends publicConfig
diff --git a/src/packages/components/Decorates/Borders/Border03/config.ts b/src/packages/components/Decorates/Borders/Border03/config.ts
index 4e086673..f88a7a80 100644
--- a/src/packages/components/Decorates/Borders/Border03/config.ts
+++ b/src/packages/components/Decorates/Borders/Border03/config.ts
@@ -5,7 +5,8 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   colors: ['#6586ec', '#2cf7fe'],
-  backgroundColor: '#00000000'
+  backgroundColor: '#00000000',
+  dataset: null
 }
 
 export default class Config extends publicConfig implements CreateComponentType {
diff --git a/src/packages/components/Decorates/Borders/Border04/config.ts b/src/packages/components/Decorates/Borders/Border04/config.ts
index 93b3a5da..6fa483f8 100644
--- a/src/packages/components/Decorates/Borders/Border04/config.ts
+++ b/src/packages/components/Decorates/Borders/Border04/config.ts
@@ -10,7 +10,8 @@ export const option = {
   borderTitleSize: 18,
   borderTitleColor: '#fff',
   colors: ['#8aaafb', '#1f33a2'],
-  backgroundColor: '#00000000'
+  backgroundColor: '#00000000',
+  dataset: null
 }
 
 export default class Config extends publicConfig implements CreateComponentType {
diff --git a/src/packages/components/Decorates/Borders/Border05/config.ts b/src/packages/components/Decorates/Borders/Border05/config.ts
index b6baaf9b..826204b1 100644
--- a/src/packages/components/Decorates/Borders/Border05/config.ts
+++ b/src/packages/components/Decorates/Borders/Border05/config.ts
@@ -5,7 +5,8 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   colors: ['#1d48c4', '#d3e1f8'],
-  backgroundColor: '#00000000'
+  backgroundColor: '#00000000',
+  dataset: null
 }
 
 export default class Config extends publicConfig implements CreateComponentType {
diff --git a/src/packages/components/Decorates/Borders/Border06/config.ts b/src/packages/components/Decorates/Borders/Border06/config.ts
index 31301475..73223dec 100644
--- a/src/packages/components/Decorates/Borders/Border06/config.ts
+++ b/src/packages/components/Decorates/Borders/Border06/config.ts
@@ -5,7 +5,8 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   colors: ['#3140ad', '#1089ff'],
-  backgroundColor: '#00000000'
+  backgroundColor: '#00000000',
+  dataset: null
 }
 
 export default class Config extends publicConfig implements CreateComponentType {
diff --git a/src/packages/components/Decorates/Borders/Border07/config.ts b/src/packages/components/Decorates/Borders/Border07/config.ts
index 1b11dff8..ace6e346 100644
--- a/src/packages/components/Decorates/Borders/Border07/config.ts
+++ b/src/packages/components/Decorates/Borders/Border07/config.ts
@@ -5,7 +5,8 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   colors: ['#11eefd', '#0078d2'],
-  backgroundColor: '#00000000'
+  backgroundColor: '#00000000',
+  dataset: null
 }
 
 export default class Config extends publicConfig implements CreateComponentType {
diff --git a/src/packages/components/Decorates/Borders/Border08/config.ts b/src/packages/components/Decorates/Borders/Border08/config.ts
index 3b117c25..19f8eeee 100644
--- a/src/packages/components/Decorates/Borders/Border08/config.ts
+++ b/src/packages/components/Decorates/Borders/Border08/config.ts
@@ -7,7 +7,8 @@ export const option = {
   colors: ['#235fa7', '#4fd2dd'],
   dur: 3,
   reverse: false,
-  backgroundColor: '#00000000'
+  backgroundColor: '#00000000',
+  dataset: null
 }
 
 export default class Config extends publicConfig implements CreateComponentType {
diff --git a/src/packages/components/Decorates/Borders/Border09/config.ts b/src/packages/components/Decorates/Borders/Border09/config.ts
index 6cb98608..618ceaa2 100644
--- a/src/packages/components/Decorates/Borders/Border09/config.ts
+++ b/src/packages/components/Decorates/Borders/Border09/config.ts
@@ -5,7 +5,8 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   colors: ['#3140ad', '#235fa7'],
-  backgroundColor: '#00000000'
+  backgroundColor: '#00000000',
+  dataset: null
 }
 
 export default class Config extends publicConfig implements CreateComponentType {
diff --git a/src/packages/components/Decorates/Borders/Border10/config.ts b/src/packages/components/Decorates/Borders/Border10/config.ts
index 60f38a95..d6a08d76 100644
--- a/src/packages/components/Decorates/Borders/Border10/config.ts
+++ b/src/packages/components/Decorates/Borders/Border10/config.ts
@@ -5,7 +5,8 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   colors: ['#1089ff', '#0000ff'],
-  backgroundColor: '#00000000'
+  backgroundColor: '#00000000',
+  dataset: null
 }
 
 export default class Config extends publicConfig implements CreateComponentType {
diff --git a/src/packages/components/Decorates/Borders/Border11/config.ts b/src/packages/components/Decorates/Borders/Border11/config.ts
index 0ba75746..e153311a 100644
--- a/src/packages/components/Decorates/Borders/Border11/config.ts
+++ b/src/packages/components/Decorates/Borders/Border11/config.ts
@@ -5,7 +5,8 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   colors: ['#2862b7', '#2862b7'],
-  backgroundColor: '#00000000'
+  backgroundColor: '#00000000',
+  dataset: null
 }
 
 export default class Config extends publicConfig implements CreateComponentType {
diff --git a/src/packages/components/Decorates/Borders/Border12/config.ts b/src/packages/components/Decorates/Borders/Border12/config.ts
index 48d59d7f..730bb906 100644
--- a/src/packages/components/Decorates/Borders/Border12/config.ts
+++ b/src/packages/components/Decorates/Borders/Border12/config.ts
@@ -5,7 +5,8 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   colors: ['#2862b7', '#2862b7'],
-  backgroundColor: '#00000000'
+  backgroundColor: '#00000000',
+  dataset: null
 }
 
 export default class Config extends publicConfig implements CreateComponentType {
diff --git a/src/packages/components/Decorates/Borders/Border13/config.ts b/src/packages/components/Decorates/Borders/Border13/config.ts
index 36154e6a..7d27b612 100644
--- a/src/packages/components/Decorates/Borders/Border13/config.ts
+++ b/src/packages/components/Decorates/Borders/Border13/config.ts
@@ -5,7 +5,8 @@ import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
   colors: ['#2862b7', '#4b77b7'],
-  backgroundColor: '#00000000'
+  backgroundColor: '#00000000',
+  dataset: null
 }
 
 export default class Config extends publicConfig implements CreateComponentType {
diff --git a/src/packages/components/Decorates/Decorates/Decorates03/config.ts b/src/packages/components/Decorates/Decorates/Decorates03/config.ts
index f03afa0d..169688f1 100644
--- a/src/packages/components/Decorates/Decorates/Decorates03/config.ts
+++ b/src/packages/components/Decorates/Decorates/Decorates03/config.ts
@@ -4,7 +4,7 @@ import { Decorates03Config } from './index'
 import cloneDeep from 'lodash/cloneDeep'
 
 export const option = {
-  text: '装饰-03',
+  dataset: '装饰-03',
   textColor: '#fff',
   textSize: 24,
   colors: ['#1dc1f5', '#1dc1f5'],
diff --git a/src/packages/components/Decorates/Decorates/Decorates03/config.vue b/src/packages/components/Decorates/Decorates/Decorates03/config.vue
index 58655388..a8f795b7 100644
--- a/src/packages/components/Decorates/Decorates/Decorates03/config.vue
+++ b/src/packages/components/Decorates/Decorates/Decorates03/config.vue
@@ -2,7 +2,7 @@
   <CollapseItem name="文字" :expanded="true">
     <SettingItemBox name="内容" :alone="true">
       <SettingItem>
-        <n-input v-model:value="optionData.text" size="small"></n-input>
+        <n-input v-model:value="optionData.dataset" size="small"></n-input>
       </SettingItem>
     </SettingItemBox>
 
diff --git a/src/packages/components/Decorates/Decorates/Decorates03/index.vue b/src/packages/components/Decorates/Decorates/Decorates03/index.vue
index e43fcdc7..2a0db678 100644
--- a/src/packages/components/Decorates/Decorates/Decorates03/index.vue
+++ b/src/packages/components/Decorates/Decorates/Decorates03/index.vue
@@ -15,7 +15,7 @@
       />
     </svg>
     <span :style="`color: ${textColor};font-size: ${textSize}px`">
-      {{ text }}</span
+      {{ dataset }}</span
     >
     <svg :width="20" :height="20">
       <polyline
@@ -46,7 +46,7 @@ const props = defineProps({
 })
 
 const { w, h } = toRefs(props.chartConfig.attr)
-const { colors, text, textSize, textColor } = toRefs(props.chartConfig.option)
+const { colors, dataset, textSize, textColor } = toRefs(props.chartConfig.option)
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/packages/components/Informations/Texts/TextCommon/config.ts b/src/packages/components/Informations/Texts/TextCommon/config.ts
new file mode 100644
index 00000000..18ea4181
--- /dev/null
+++ b/src/packages/components/Informations/Texts/TextCommon/config.ts
@@ -0,0 +1,33 @@
+import { publicConfig } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { TextCommonConfig } from './index'
+import cloneDeep from 'lodash/cloneDeep'
+
+export enum WritingModeEnum {
+  HORIZONTAL = '水平',
+  VERTICAL = '垂直',
+}
+
+export const WritingModeObject = {
+  [WritingModeEnum.HORIZONTAL]: 'horizontal-tb',
+  [WritingModeEnum.VERTICAL]: 'vertical-rl',
+}
+
+export const option = {
+  dataset: '我是一个文本',
+  fontSize: 20,
+  fontColor: '#ffffffff',
+  padding: 5,
+  // 字间距
+  letterSpacing: 5,
+  borderRadius: 0,
+  writingMode: 'horizontal-tb',
+  backgroundColor: '#00000000',
+}
+
+export default class Config extends publicConfig implements CreateComponentType
+{
+  public key = TextCommonConfig.key
+  public chartConfig = cloneDeep(TextCommonConfig)
+  public option = cloneDeep(option)
+}
diff --git a/src/packages/components/Informations/Texts/TextCommon/config.vue b/src/packages/components/Informations/Texts/TextCommon/config.vue
index 44a7bc22..2f2fe862 100644
--- a/src/packages/components/Informations/Texts/TextCommon/config.vue
+++ b/src/packages/components/Informations/Texts/TextCommon/config.vue
@@ -1,6 +1,66 @@
 <template>
+  <CollapseItem name="样式" :expanded="true">
+   <SettingItemBox name="内容" :alone="true">
+      <SettingItem>
+        <n-input v-model:value="optionData.dataset" size="small"></n-input>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="文字">
+      <SettingItem name="字体大小">
+        <n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
+      </SettingItem>
+
+      <SettingItem name="文本方向">
+        <n-select v-model:value="optionData.writingMode" size="small" :options="verticalOptions" />
+      </SettingItem>
+      <SettingItem name="字间距">
+        <n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
+      </SettingItem>
+      <SettingItem name="内边距">
+        <n-input-number v-model:value="optionData.padding" size="small" placeholder="输入内边距"></n-input-number>
+      </SettingItem>
+
+      <SettingItem name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontColor"></n-color-picker>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="背景">
+      <SettingItem name="背景圆角">
+        <n-input-number
+          v-model:value="optionData.borderRadius"
+          size="small"
+          :min="0"
+          placeholder="背景圆角"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="背景颜色">
+        <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 { option, WritingModeEnum, WritingModeObject } from './config'
+import {
+  CollapseItem,
+  SettingItemBox,
+  SettingItem
+} from '@/components/ChartItemSetting/index'
 
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const verticalOptions = [{
+  label: WritingModeEnum.HORIZONTAL,
+  value: WritingModeObject[WritingModeEnum.HORIZONTAL]
+}, {
+  label: WritingModeEnum.VERTICAL,
+  value: WritingModeObject[WritingModeEnum.VERTICAL]
+}]
 </script>
diff --git a/src/packages/components/Informations/Texts/TextCommon/index.vue b/src/packages/components/Informations/Texts/TextCommon/index.vue
index d98869ef..153bd598 100644
--- a/src/packages/components/Informations/Texts/TextCommon/index.vue
+++ b/src/packages/components/Informations/Texts/TextCommon/index.vue
@@ -1,13 +1,38 @@
 <template>
-  <div>
-    信息
+  <div class="go-text-box">
+    <div
+      :style="`
+      color: ${fontColor};
+      padding: ${padding}px;
+      font-size: ${fontSize}px;
+      letter-spacing: ${letterSpacing}px;
+      border-radius: ${borderRadius}px;
+      writing-mode: ${writingMode};
+      background-color:${backgroundColor}`"
+    >{{ dataset }}</div>
   </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 { dataset, fontColor, fontSize, letterSpacing, padding, borderRadius, writingMode, backgroundColor } = toRefs(
+  props.chartConfig.option
+)
 </script>
 
 <style lang="scss" scoped>
-
-</style>
\ No newline at end of file
+@include go("text-box") {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/src/views/chart/ContentLayers/index.vue b/src/views/chart/ContentLayers/index.vue
index eb929b9e..d7fe70b6 100644
--- a/src/views/chart/ContentLayers/index.vue
+++ b/src/views/chart/ContentLayers/index.vue
@@ -114,6 +114,7 @@ $wight: 170px;
   .not-layer-text {
     position: relative;
     top: 10px;
+    white-space: nowrap;
     opacity: .4;
   }
   &.scoped {