新增分页联动控件

src/packages/components/Informations/Inputs/InputsCharacters/config.ts

@@ -0,0 +1,55 @@
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { InputsCharactersConfig } from './index'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import cloneDeep from 'lodash/cloneDeep'
+import {COMPONENT_INTERACT_EVENT_KET} from "@/enums/eventEnum";
+
+export enum WritingModeEnum {
+    HORIZONTAL = '水平',
+    VERTICAL = '垂直'
+}
+
+export const WritingModeObject = {
+    [WritingModeEnum.HORIZONTAL]: 'horizontal-tb',
+    [WritingModeEnum.VERTICAL]: 'vertical-rl'
+}
+
+export enum FontWeightEnum {
+    NORMAL = '常规',
+    BOLD = '加粗',
+}
+
+export const FontWeightObject = {
+    [FontWeightEnum.NORMAL]: 'normal',
+    [FontWeightEnum.BOLD]: 'bold',
+}
+
+export const option = {
+    [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+    dataset: '我是展示文本',
+    datasetValue:'我是联动值',
+    fontSize: 20,
+    fontColor: '#ffffff',
+    paddingX: 10,
+    paddingY: 10,
+    textAlign: 'center', // 水平对齐方式
+    fontWeight: 'normal',
+
+    // 边框
+    borderWidth: 0,
+    borderColor: '#ffffff',
+    borderRadius: 5,
+
+    // 字间距
+    letterSpacing: 5,
+    writingMode: 'horizontal-tb',
+    backgroundColor: '#00000000'
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+    public key = InputsCharactersConfig.key
+    public chartConfig = cloneDeep(InputsCharactersConfig)
+    public interactActions = interactActions
+    public option = cloneDeep(option)
+}

src/packages/components/Informations/Inputs/InputsCharacters/config.vue

@@ -0,0 +1,107 @@
+<template>
+  <collapse-item name="信息" :expanded="true">
+    <setting-item-box name="展示文本" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.dataset" type="textarea" size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+    <setting-item-box name="联动值" :alone="true">
+      <setting-item>
+        <n-input v-model:value="optionData.datasetValue"  size="small"></n-input>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+
+  <collapse-item name="样式" :expanded="true">
+    <setting-item-box name="文字">
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.fontColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="字体大小">
+        <n-input-number v-model:value="optionData.fontSize" size="small" placeholder="字体大小"></n-input-number>
+      </setting-item>
+      <setting-item name="字体粗细">
+        <n-select v-model:value="optionData.fontWeight" size="small" :options="fontWeightOptions" />
+      </setting-item>
+      <setting-item name="X轴内边距">
+        <n-input-number v-model:value="optionData.paddingX" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+      <setting-item name="Y轴内边距">
+        <n-input-number v-model:value="optionData.paddingY" size="small" placeholder="输入内边距"></n-input-number>
+      </setting-item>
+
+      <setting-item name="水平对齐">
+        <n-select v-model:value="optionData.textAlign" size="small" :options="textAlignOptions" />
+      </setting-item>
+      <setting-item name="文本方向">
+        <n-select v-model:value="optionData.writingMode" size="small" :options="verticalOptions" />
+      </setting-item>
+
+      <setting-item name="字间距">
+        <n-input-number v-model:value="optionData.letterSpacing" size="small" placeholder="输入字间距"></n-input-number>
+      </setting-item>
+    </setting-item-box>
+
+    <setting-item-box name="边框">
+      <setting-item name="宽度">
+        <n-input-number
+            v-model:value="optionData.borderWidth"
+            size="small"
+            :min="0"
+            placeholder="宽度"
+        ></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="optionData.borderColor"></n-color-picker>
+      </setting-item>
+      <setting-item name="圆角">
+        <n-input-number
+            v-model:value="optionData.borderRadius"
+            size="small"
+            :min="0"
+            placeholder="圆角"
+        ></n-input-number>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { option, WritingModeEnum, WritingModeObject, FontWeightEnum, FontWeightObject } from './config'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+
+const textAlignOptions = [
+  { label: '左对齐', value: 'start' },
+  { label: '居中', value: 'center' },
+  { label: '右对齐', value: 'end' }
+]
+
+const verticalOptions = [
+  {
+    label: WritingModeEnum.HORIZONTAL,
+    value: WritingModeObject[WritingModeEnum.HORIZONTAL]
+  },
+  {
+    label: WritingModeEnum.VERTICAL,
+    value: WritingModeObject[WritingModeEnum.VERTICAL]
+  }
+]
+const fontWeightOptions = [
+  {
+    label: FontWeightEnum.NORMAL,
+    value: FontWeightObject[FontWeightEnum.NORMAL]
+  },
+  {
+    label: FontWeightEnum.BOLD,
+    value: FontWeightObject[FontWeightEnum.BOLD]
+  }
+]
+
+</script>

src/packages/components/Informations/Inputs/InputsCharacters/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const InputsCharactersConfig: ConfigType = {
+    key: 'InputsCharacters',
+    chartKey: 'VInputsCharacters',
+    conKey: 'VCInputsCharacters',
+    title: '联动文字',
+    category: ChatCategoryEnum.INPUTS,
+    categoryName: ChatCategoryEnumName.INPUTS,
+    package: PackagesCategoryEnum.INFORMATIONS,
+    chartFrame: ChartFrameEnum.COMMON,
+    image: 'text_static.png'
+}

src/packages/components/Informations/Inputs/InputsCharacters/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="go-text-box">
+    <div class="content" @click="onChange(option.datasetValue)">
+      <span style="white-space: pre-wrap" >{{ option.dataset }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import {useChartDataFetch, useChartInteract} from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { ComponentInteractParamsEnum } from './interact'
+import {InteractEventOn} from "@/enums/eventEnum";
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const {
+  fontSize,
+  fontColor,
+  textAlign,
+  letterSpacing,
+  paddingY,
+  paddingX,
+  writingMode,
+  borderWidth,
+  borderColor,
+  borderRadius,
+  backgroundColor,
+  fontWeight
+} = toRefs(props.chartConfig.option)
+
+const option = shallowReactive({
+  dataset: props.chartConfig.option.dataset,
+  datasetValue:props.chartConfig.option.datasetValue
+})
+
+const onChange = (v: string) => {
+  if(v == undefined) return;
+  // 存储到联动数据
+  useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      { [ComponentInteractParamsEnum.DATA]: v },
+      InteractEventOn.CLICK
+  )
+  return v;
+}
+
+// 手动更新
+watch(
+    () => props.chartConfig.option.dataset,
+    (newData: any) => {
+      option.dataset = newData
+    },
+    {
+      immediate: true,
+      deep: false
+    }
+)
+
+// 预览更新
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: string) => {
+  option.dataset = newData
+})
+
+</script>
+
+<style lang="scss" scoped>
+@include go('text-box') {
+  display: flex;
+  align-items: center;
+  justify-content: v-bind('textAlign');
+
+  .content {
+    color: v-bind('fontColor');
+    padding: v-bind('`${paddingY}px ${paddingX}px`');
+    font-size: v-bind('fontSize + "px"');
+    letter-spacing: v-bind('letterSpacing + "px"');
+    writing-mode: v-bind('writingMode');
+    font-weight: v-bind('fontWeight');
+    border-style: solid;
+    border-width: v-bind('borderWidth + "px"');
+    border-radius: v-bind('borderRadius + "px"');
+    border-color: v-bind('borderColor');
+    background-color: v-bind('backgroundColor');
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}
+</style>

src/packages/components/Informations/Inputs/InputsCharacters/interact.ts

@@ -0,0 +1,27 @@
+import { InteractEventOn, InteractActionsType } from '@/enums/eventEnum'
+
+// 时间组件类型
+export enum ComponentInteractEventEnum {
+    DATA = 'data'
+}
+
+// 联动参数
+export enum ComponentInteractParamsEnum {
+    DATA = 'data'
+}
+
+// 定义组件触发回调事件
+export const interactActions: InteractActionsType[] = [
+    {
+        interactType: InteractEventOn.CLICK,
+        interactName: '点击完成',
+        componentEmitEvents: {
+            [ComponentInteractEventEnum.DATA]: [
+                {
+                    value: ComponentInteractParamsEnum.DATA,
+                    label: '文本内容'
+                }
+            ]
+        }
+    }
+]

src/packages/components/Informations/Inputs/index.ts

@@ -1,5 +1,6 @@
 import { InputsDateConfig } from './InputsDate/index'
 import { InputsSelectConfig } from './InputsSelect/index'
 import { InputsTabConfig } from './InputsTab/index'
+import { InputsCharactersConfig} from "./InputsCharacters/index";
 
-export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig]
+export default [InputsDateConfig, InputsSelectConfig, InputsTabConfig,InputsCharactersConfig]