feat: 新增文字边框

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