feat(packages/external): 新增自定义按钮

@@ -43,6 +43,7 @@ export const weatherTextMapImg = [
   }
   }
 ]
 ]
 
 
+console.log(clearDay, cloudy)
 //风力等级文字映射
 //风力等级文字映射
 export const weatherSpeedMapText = [
 export const weatherSpeedMapText = [
   {
   {

+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 { ButtonConfig } from './index'
+
+export const option = {
+  // 时间组件展示类型，必须和 interactActions 中定义的数据一致
+  [COMPONENT_INTERACT_EVENT_KET]: ComponentInteractEventEnum.DATA,
+  // 暴露配置内容给用户
+  dataset: [
+    {
+      label: '',
+      current: '',
+      target: '',
+      currentButton: '',
+      targetButton: ''
+    }
+  ]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = ButtonConfig.key
+  public attr = { ...chartInitConfig, w: 460, h: 32, zIndex: -1 }
+  public chartConfig = cloneDeep(ButtonConfig)
+  public interactActions = interactActions
+  public option = cloneDeep(option)
+}

+<template>
+  <collapse-item name="按钮配置" :expanded="true">
+    <setting-item-box name="配置项" :alone="true">
+      <setting-item v-for="(item, index) in optionData.dataset" :key="index">
+        <n-input v-model:value="item.label" size="small" placeholder="按钮文字"></n-input>
+        <div style="height: 5px"></div>
+        <n-input v-model:value="item.currentButton" size="small" placeholder="当前按钮"></n-input>
+        <div style="height: 5px"></div>
+        <n-input v-model:value="item.targetButton" size="small" placeholder="目标按钮"></n-input>
+        <div style="height: 5px"></div>
+        <n-input v-model:value="item.current" size="small" placeholder="当前页面"></n-input>
+        <div style="height: 5px"></div>
+        <n-input v-model:value="item.target" size="small" placeholder="目标页面"></n-input>
+        <div style="height: 5px"></div>
+      </setting-item>
+    </setting-item-box>
+  </collapse-item>
+</template>
+
+<script lang="ts" setup>
+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>

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Informations/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('Button', true)
+
+export const ButtonConfig: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: '自定义按钮',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.INFORMATIONS,
+  chartFrame: ChartFrameEnum.STATIC,
+  image: 'inputs_tab.png'
+}

+<template>
+  <n-button :style="{ width: `${w}px`, height: `${h}px` }" type="primary" @click="onClick(option.value.dataset[0])">{{
+    option.value.dataset[0].label
+  }}</n-button>
+</template>
+
+<script setup lang="ts">
+import { PropType, toRefs, shallowReactive, watch, onMounted } from 'vue'
+import cloneDeep from 'lodash/cloneDeep'
+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: cloneDeep(props.chartConfig.option)
+})
+
+const onClick = (v: any) => {
+  useChartInteract(
+    props.chartConfig,
+    useChartEditStore,
+    { [ComponentInteractParamsEnum.DATA]: v?.current },
+    InteractEventOn.CHANGE
+  )
+}
+
+onMounted(() => {
+  // onClick(option.value.dataset[0], false)
+})
+
+// 手动更新
+watch(
+  () => props.chartConfig.option,
+  (newData: any) => {
+    option.value = newData
+    // onClick(newData.tabValue, true)
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+</script>

+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: '选择项'
+        }
+      ]
+    }
+  }
+]

@@ -9,6 +9,7 @@ import { OverrideSelectConfig } from '@/packages/components/external/Information
 import { OverrideInputsDateConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsDate'
 import { OverrideInputsDateConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsDate'
 import { OverrideInputsTabConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsTab'
 import { OverrideInputsTabConfig } from '@/packages/components/external/Informations/Mores/OverrideInputsTab'
 import { OverrideTextCommonConfig } from '@/packages/components/external/Informations/Mores/OverrideTextCommon'
 import { OverrideTextCommonConfig } from '@/packages/components/external/Informations/Mores/OverrideTextCommon'
+import { ButtonConfig } from '@/packages/components/external/Informations/Mores/Button'
 import { OverrideBarCommonConfig } from '@/packages/components/external/Charts/Bars/OverrideBarCommon'
 import { OverrideBarCommonConfig } from '@/packages/components/external/Charts/Bars/OverrideBarCommon'
 import { OverrideLineCommonConfig } from '@/packages/components/external/Charts/Lines/OverrideLineCommon'
 import { OverrideLineCommonConfig } from '@/packages/components/external/Charts/Lines/OverrideLineCommon'
 import { OverrideLineGradientsConfig } from '@/packages/components/external/Charts/Lines/OverrideLineGradients'
 import { OverrideLineGradientsConfig } from '@/packages/components/external/Charts/Lines/OverrideLineGradients'
@@ -25,6 +26,7 @@ export function useInjectLib(packagesList: EPackagesType) {
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsDateConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsTabConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideInputsTabConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, OverrideTextCommonConfig)
+  addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.INFORMATIONS, ButtonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideBarCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideBarCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineCommonConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineGradientsConfig)
   addWidgetToCategoryByCategoryName(packagesList, PackagesCategoryEnum.CHARTS, OverrideLineGradientsConfig)