Pre Merge pull request !187 from 阿飞/dev

src/packages/components/Charts/COMBINATIONS/BarLine/config.ts

@@ -0,0 +1,76 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { BarLineConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+
+export const includes = ['legend', 'xAxis', 'yAxis', 'grid']
+// 柱状折线组合图 分别定义series
+// 写死name可以定义legend显示的名称
+export const barSeriesItem = {
+    type: 'bar',
+    barWidth: 15,
+    label: {
+        show: true,
+        position: 'top',
+        color: '#fff',
+        fontSize: 12
+    },
+    itemStyle: {
+        color: null,
+        borderRadius: 2
+    }
+}
+
+export const lineSeriesItem = {
+    type: 'line',
+    symbol: "circle",
+    label: {
+        show: true,
+        position: 'top',
+        color: '#fff',
+        fontSize: 12
+    },
+    symbolSize: 5, //设定实心点的大小
+    itemStyle: {
+        color: '#FFE47A',
+        borderWidth: 1
+    },
+    lineStyle: {
+        type: 'solid',
+        width: 3,
+        color: null
+    }
+}
+
+export const option = {
+    tooltip: {
+        show: true,
+        trigger: 'axis',
+        axisPointer: {
+            show: true,
+            type: 'shadow'
+        }
+    },
+    legend: {
+        data:null
+    },
+    xAxis: {
+        show: true,
+        type: 'category'
+    },
+    yAxis: {
+        show: true,
+        type: 'value'
+    },
+    dataset: { ...dataJson },
+    series: [barSeriesItem, lineSeriesItem]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+    public key = BarLineConfig.key
+    public chartConfig = cloneDeep(BarLineConfig)
+    // 图表配置项
+    public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/COMBINATIONS/BarLine/config.vue

@@ -0,0 +1,89 @@
+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem v-for="(item, index) in seriesList" :key="index" :name="`${item.type=='bar' ? '柱状图' : '折线图'}`" :expanded="true">
+    <SettingItemBox name="图形" v-if="item.type=='bar'">
+      <SettingItem name="宽度">
+        <n-input-number
+            v-model:value="item.barWidth"
+            :min="1"
+            :max="100"
+            size="small"
+            placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="圆角">
+        <n-input-number v-model:value="item.itemStyle.borderRadius" :min="0" size="small"></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="线条" v-if="item.type=='line'">
+      <SettingItem name="宽度">
+        <n-input-number
+            v-model:value="item.lineStyle.width"
+            :min="1"
+            :max="100"
+            size="small"
+            placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+      <SettingItem name="类型">
+        <n-select v-model:value="item.lineStyle.type" size="small" :options="lineConf.lineStyle.type"></n-select>
+      </SettingItem>
+    </SettingItemBox>
+    <SettingItemBox name="实心点" v-if="item.type=='line'">
+      <SettingItem name="大小">
+        <n-input-number
+            v-model:value="item.symbolSize"
+            :min="1"
+            :max="100"
+            size="small"
+            placeholder="自动计算"
+        ></n-input-number>
+      </SettingItem>
+    </SettingItemBox>
+    <setting-item-box name="标签">
+      <setting-item>
+        <n-space>
+          <n-switch v-model:value="item.label.show" size="small" />
+          <n-text>展示标签</n-text>
+        </n-space>
+      </setting-item>
+      <setting-item name="大小">
+        <n-input-number v-model:value="item.label.fontSize" size="small" :min="1"></n-input-number>
+      </setting-item>
+      <setting-item name="颜色">
+        <n-color-picker size="small" :modes="['hex']" v-model:value="item.label.color"></n-color-picker>
+      </setting-item>
+      <setting-item name="位置">
+        <n-select
+            v-model:value="item.label.position"
+            :options="[
+            { label: 'top', value: 'top' },
+            { label: 'left', value: 'left' },
+            { label: 'right', value: 'right' },
+            { label: 'bottom', value: 'bottom' }
+          ]"
+        />
+      </setting-item>
+    </setting-item-box>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { lineConf } from '@/packages/chartConfiguration/echarts/index'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  console.log(props.optionData);
+  return props.optionData.series
+})
+</script>

src/packages/components/Charts/COMBINATIONS/BarLine/data.json

@@ -0,0 +1,40 @@
+{
+  "dimensions": ["product", "data1", "data2"],
+  "source": [
+    {
+      "product": "1月",
+      "data1": 104,
+      "data2": 30
+    },
+    {
+      "product": "2月",
+      "data1": 56,
+      "data2": 56
+    },
+    {
+      "product": "3月",
+      "data1": 136,
+      "data2": 36
+    },
+    {
+      "product": "4月",
+      "data1": 86,
+      "data2": 6
+    },
+    {
+      "product": "5月",
+      "data1": 98,
+      "data2": 10
+    },
+    {
+      "product": "6月",
+      "data1": 86,
+      "data2": 70
+    },
+    {
+      "product": "7月",
+      "data1": 77,
+      "data2": 57
+    }
+  ]
+}

src/packages/components/Charts/COMBINATIONS/BarLine/index.ts

@@ -0,0 +1,16 @@
+// 公共类型声明
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+// 当前[信息模块]分类声明
+import { ChatCategoryEnum,ChatCategoryEnumName } from '../../index.d'
+
+export const BarLineConfig: ConfigType = {
+    key: 'BarLine',
+    chartKey: 'VBarLine',
+    conKey: 'VCBarLine',
+    title: '柱状加折线图',
+    category: ChatCategoryEnum.COMBINATION,
+    categoryName: ChatCategoryEnumName.COMBINATION,
+    package: PackagesCategoryEnum.CHARTS,
+    chartFrame: ChartFrameEnum.ECHARTS,
+    image: 'bar_x.png'
+}

src/packages/components/Charts/COMBINATIONS/BarLine/index.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="option" :manual-update="isPreview()"
+           autoresize></v-chart>
+</template>
+
+<script setup lang="ts">
+import {ref, computed, watch, PropType, nextTick} from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+//引入柱状图 折线图
+import { BarChart, LineChart } from 'echarts/charts'
+import config, { includes, barSeriesItem, lineSeriesItem } from './config'
+import { mergeTheme, setOption } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { isPreview } from '@/utils'
+import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+
+const props = defineProps({
+  themeSetting: {
+    type: Object,
+    required: true
+  },
+  themeColor: {
+    type: Object,
+    required: true
+  },
+  chartConfig: {
+    type: Object as PropType<config>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, BarChart, LineChart, GridComponent, TooltipComponent, LegendComponent])
+
+const replaceMergeArr = ref<string[]>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+watch(
+    () => props.chartConfig.option.dataset,
+    (newData, oldData) => {
+      if (newData.dimensions.length !== oldData.dimensions.length) {
+        const seriesArr = []
+        for (let i = 0; i < newData.dimensions.length - 1; i++) {
+          seriesArr.push(barSeriesItem, lineSeriesItem)
+        }
+        replaceMergeArr.value = ['series']
+        props.chartConfig.option.series = seriesArr
+        nextTick(() => {
+          replaceMergeArr.value = []
+        })
+      }
+    },
+    {
+      deep: false
+    }
+)
+
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore)
+</script>

src/packages/components/Charts/COMBINATIONS/index.ts

@@ -0,0 +1,3 @@
+import { BarLineConfig } from './BarLine/index'
+
+export default [BarLineConfig]

src/packages/components/Charts/Lines/LineLinearSingle/config.ts

@@ -33,6 +33,10 @@ export const option = {
         width: 3,
         color: {
           type: 'linear',
+          x: 0,
+          y: 0,
+          x2: 0,
+          y2: 1,
           colorStops: [
             {
               offset: 0,

src/packages/components/Charts/index.ts

@@ -3,6 +3,7 @@ import Pies from './Pies'
 import Lines from './Lines'
 import Scatters from './Scatters'
 import Mores from './Mores'
+import COMBINATIONS from "./COMBINATIONS";
 import Maps from './Maps'
 
-export const ChartList = [...Bars, ...Lines, ...Pies, ...Scatters, ...Maps, ...Mores]
+export const ChartList = [...Bars, ...Lines, ...Pies, ...Scatters, ...Maps,...COMBINATIONS, ...Mores]

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/InputsInput/config.ts

@@ -0,0 +1,24 @@
+import cloneDeep from 'lodash/cloneDeep'
+import { PublicConfigClass } from '@/packages/public'
+import { CreateComponentType } from '@/packages/index.d'
+import { chartInitConfig } from '@/settings/designSetting'
+import { COMPONENT_INTERACT_EVENT_KET } from '@/enums/eventEnum'
+import { interactActions, ComponentInteractEventEnum } from './interact'
+import {InputsInputConfig} from "./index";
+
+export const option = {
+    // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+    [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+    // 默认值
+    inputValue: "0",
+    // 暴露配置内容给用户
+    dataset: ""
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+    public key = InputsInputConfig.key
+    public attr = { ...chartInitConfig, w: 260, h: 32, zIndex: -1 }
+    public chartConfig = cloneDeep(InputsInputConfig)
+    public interactActions = interactActions
+    public option = cloneDeep(option)
+}

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

@@ -0,0 +1,18 @@
+<template>
+  <collapse-item name="输入框配置" :expanded="true">
+    <setting-item-box name="默认值" :alone="true">
+      <n-input  v-model:value="optionData.dataset"  placeholder="若未输入，则默认值为0"/>
+    </setting-item-box>
+  </collapse-item>
+</template>
+<script setup lang="ts">
+import { PropType } from 'vue'
+import { CollapseItem, SettingItemBox } from '@/components/Pages/ChartItemSetting'
+import { option } from './config'
+defineProps({
+  optionData: {
+    type: Object as PropType<typeof option>,
+    required: true
+  }
+})
+</script>

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

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const InputsInputConfig: ConfigType = {
+    key: 'InputsInput',
+    chartKey: 'VInputsInput',
+    conKey: 'VCInputsInput',
+    title: '输入框',
+    category: ChatCategoryEnum.INPUTS,
+    categoryName: ChatCategoryEnumName.INPUTS,
+    package: PackagesCategoryEnum.INFORMATIONS,
+    chartFrame: ChartFrameEnum.STATIC,
+    image: 'inputs_select.png'
+}

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

@@ -0,0 +1,64 @@
+<template>
+  <div>
+    <n-input :style="`width:${w}px;`" type="text"
+             v-model:value="option.value.dataset"
+             placeholder="请填入id"
+             @change="onChange">
+
+    </n-input>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, toRefs, shallowReactive, watch } from 'vue'
+import { CreateComponentType } from '@/packages/index.d'
+import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
+import { useChartInteract } from '@/hooks'
+import { InteractEventOn } from '@/enums/eventEnum'
+import { ComponentInteractParamsEnum } from './interact'
+
+const props = defineProps({
+  chartConfig: {
+    type: Object as PropType<CreateComponentType>,
+    required: true
+  }
+})
+
+const { w, h } = toRefs(props.chartConfig.attr)
+const option = shallowReactive({
+  value: {
+    inputValue: props.chartConfig.option.inputValue,
+    dataset: props.chartConfig.option.dataset
+  }
+})
+
+const onChange = (v: string) => {
+  if(v == undefined) return;
+  // 存储到联动数据
+  useChartInteract(
+      props.chartConfig,
+      useChartEditStore,
+      { [ComponentInteractParamsEnum.DATA]: v },
+      InteractEventOn.CHANGE
+  )
+}
+
+// 手动更新
+watch(
+    () => props.chartConfig.option,
+    (newData: any) => {
+      option.value = newData
+      onChange(newData.inputValue)
+    },
+    {
+      immediate: true,
+      deep: true
+    }
+)
+
+</script>
+
+
+
+
+

src/packages/components/Informations/Inputs/InputsInput/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.CHANGE,
+        interactName: '选择完成',
+        componentEmitEvents: {
+            [ComponentInteractEventEnum.DATA]: [
+                {
+                    value: ComponentInteractParamsEnum.DATA,
+                    label: '选择项'
+                }
+            ]
+        }
+    }
+]

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

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