feat: 新增文字边框

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 {

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

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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 {

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'],

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>
 

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>

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)
+}

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>

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>
-
+@include go("text-box") {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 </style>

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 {