Merge branch 'ft' into 'main_dev'

feat: 新增plopjs配置，为此项目快速生成组件模板，比如需要新加一个组件，直接快速生成配置代码

See merge request yunteng/thingskit-view!132

@@ -12,6 +12,7 @@
     "preview": "vite preview",
     "preview": "vite preview",
     "preview:alone": "vite preview --mode alone.prod",
     "preview:alone": "vite preview --mode alone.prod",
     "new": "plop --plopfile ./plop/plopfile.js",
     "new": "plop --plopfile ./plop/plopfile.js",
+    "newCom": "plop --plopfile ./plop/external/plopfile.js",
     "postinstall": "husky install",
     "postinstall": "husky install",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx,.vue src",
     "lint": "eslint --ext .js,.jsx,.ts,.tsx,.vue src",
     "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx,.vue src --fix"
     "lint:fix": "eslint --ext .js,.jsx,.ts,.tsx,.vue src --fix"

+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { {{name}}Config } 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']
+
+export const seriesItem = {
+}
+
+export const option = {
+  dataset: { ...dataJson },
+  series: [seriesItem, seriesItem]
+}
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = {{name}}Config.key
+  public chartConfig = cloneDeep({{name}}Config)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

+<template>
+  <!-- Echarts 全局设置 -->
+  <global-setting :optionData="optionData"></global-setting>
+  <CollapseItem name="xxx" :expanded="true">
+    <SettingItemBox name="xx">
+      <SettingItem name="xx">
+      </SettingItem>
+    </SettingItemBox>
+  </CollapseItem>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { GlobalSetting, CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const seriesList = computed(() => {
+  return props.optionData.series
+})
+</script>

+{
+  "dimensions": ["product", "data1", "data2"],
+  "source": [
+    {
+      "product": "Mon",
+      "data1": 120,
+      "data2": 130
+    },
+    {
+      "product": "Tue",
+      "data1": 200,
+      "data2": 130
+    },
+    {
+      "product": "Wed",
+      "data1": 150,
+      "data2": 312
+    },
+    {
+      "product": "Thu",
+      "data1": 80,
+      "data2": 268
+    },
+    {
+      "product": "Fri",
+      "data1": 70,
+      "data2": 155
+    },
+    {
+      "product": "Sat",
+      "data1": 110,
+      "data2": 117
+    },
+    {
+      "product": "Sun",
+      "data1": 130,
+      "data2": 160
+    }
+  ]
+}

+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '@/packages/components/Charts/index.d'
+import { useWidgetKey } from '@/packages/external/useWidgetKey'
+
+const { key, conKey, chartKey } = useWidgetKey('{{name}}', true)
+
+export const {{name}}Config: ConfigType = {
+  key,
+  chartKey,
+  conKey,
+  title: 'xxx',
+  category: ChatCategoryEnum.BAR,
+  categoryName: ChatCategoryEnumName.BAR,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.ECHARTS,
+  image: 'bar_x.png'
+}

+<template>
+  <v-chart
+    ref="vChartRef"
+    :init-options="initOptions"
+    :theme="themeColor"
+    :option="option"
+    :manual-update="isPreview()"
+    :update-options="{
+      replaceMerge: replaceMergeArr
+    }"
+    autoresize
+    @mouseover="handleHighlight"
+    @mouseout="handleDownplay"
+  >
+  </v-chart>
+</template>
+
+<script setup lang="ts">
+import { ref, nextTick, computed, watch, PropType, onMounted } 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 } from 'echarts/charts'
+import config, { includes, seriesItem } from './config'
+import { mergeTheme } 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'
+import isObject from 'lodash/isObject'
+import dataJson from './data.json'
+import cloneDeep from 'lodash/cloneDeep'
+import { useAssembleDataHooks } from '@/hooks/external/useAssembleData.hook'
+import { SocketReceiveMessageType } from '@/store/external/modules/socketStore.d'
+
+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, GridComponent, TooltipComponent, LegendComponent])
+
+const chartEditStore = useChartEditStore()
+
+const replaceMergeArr = ref<string[]>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+
+// dataset 无法变更条数的补丁
+watch(
+  () => props.chartConfig.option.dataset,
+  (newData: { dimensions: any }, oldData) => {
+    try {
+      if (!isObject(newData) || !('dimensions' in newData)) return
+      if (Array.isArray(newData?.dimensions)) {
+        const seriesArr = []
+        // 对oldData进行判断，防止传入错误数据之后对旧维度判断产生干扰
+        // 此处计算的是dimensions的Y轴维度，若是dimensions.length为0或1，则默认为1，排除X轴维度干扰
+        const oldDimensions =
+          Array.isArray(oldData?.dimensions) && oldData.dimensions.length >= 1 ? oldData.dimensions.length : 1
+        const newDimensions = newData.dimensions.length >= 1 ? newData.dimensions.length : 1
+        const dimensionsGap = newDimensions - oldDimensions
+        if (dimensionsGap < 0) {
+          props.chartConfig.option.series.splice(newDimensions - 1)
+        } else if (dimensionsGap > 0) {
+          if (!oldData || !oldData?.dimensions || !Array.isArray(oldData?.dimensions) || !oldData?.dimensions.length) {
+            props.chartConfig.option.series = []
+          }
+          for (let i = 0; i < dimensionsGap; i++) {
+            seriesArr.push(cloneDeep(seriesItem))
+          }
+          props.chartConfig.option.series.push(...seriesArr)
+        }
+        replaceMergeArr.value = ['series']
+        nextTick(() => {
+          replaceMergeArr.value = []
+        })
+      }
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+//fix 修复v-chart图表绑定联动组件视图不更新问题
+const updateVChart = async (newData: SocketReceiveMessageType) => {
+  //区分是普通请求还是ws请求
+  if (!isObject(newData) || !('dimensions' in newData)) {
+    const { data } = newData
+    const { keys, record } = useAssembleDataHooks(data)
+    vChartRef.value?.setOption({
+      dataset: {
+        dimensions: ['ts', ...keys],
+        source: [record]
+      }
+    })
+  } else {
+    //异步更新，同步更新会造成联动组件控制，图表不及时更新
+    await nextTick().then(() => {
+      vChartRef.value?.setOption(
+        {
+          ...option.value,
+          dataset: newData
+        },
+        {
+          notMerge: true
+        }
+      )
+    })
+  }
+}
+
+const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, newData => {
+ //联动支持分组
+    /**
+     * 修复多个分组，然后下拉框联动，会影响另一个组件
+     */
+  chartEditStore.getComponentList.forEach(targetItem => {
+    if (targetItem.isGroup) {
+      targetItem.groupList?.forEach(groupItem => {
+        if (groupItem.id === props.chartConfig.id) {
+          groupItem.option.dataset = newData
+        }
+      })
+    } else {
+      if (targetItem.id === props.chartConfig.id) {
+        targetItem.option.dataset = newData
+      }
+    }
+  })
+  //
+  updateVChart(newData)
+})
+</script>

+module.exports = {
+  description:
+    'create a component（在packages/components/external,一般是需要重写的组件,这里写的示例生成在src/packages/components/external/Charts/Bars目录下）',
+  prompts: [
+    {
+      type: 'input',
+      name: 'name',
+      message: 'Please enter component name，such as "OverrideComponentName":',
+      validate(value) {
+        if (!value || value.trim === '') {
+          return 'component name is required'
+        }
+        return true
+      }
+    }
+  ],
+  actions: data => {
+    const dataName = data.name
+
+    const actions = [
+      {
+        type: 'add',
+        path: `${process.cwd()}/src/packages/components/external/Charts/Bars${dataName}/config.ts`,
+        templateFile: './component-template/config.ts.hbs',
+        data: {
+          name: data.name
+        }
+      },
+      {
+        type: 'add',
+        path: `${process.cwd()}/src/packages/components/external/Charts/Bars${dataName}/config.vue`,
+        templateFile: './component-template/config.vue.hbs',
+        data: {
+          name: data.name
+        }
+      },
+      {
+        type: 'add',
+        path: `${process.cwd()}/src/packages/components/external/Charts/Bars${dataName}/data.json`,
+        templateFile: './component-template/data.json.hbs',
+        data: {
+          name: data.name
+        }
+      },
+      {
+        type: 'add',
+        path: `${process.cwd()}/src/packages/components/external/Charts/Bars${dataName}/index.ts`,
+        templateFile: './component-template/index.ts.hbs',
+        data: {
+          name: data.name
+        }
+      },
+      {
+        type: 'add',
+        path: `${process.cwd()}/src/packages/components/external/Charts/Bars${dataName}/index.vue`,
+        templateFile: './component-template/index.vue.hbs',
+        data: {
+          name: data.name
+        }
+      }
+    ]
+
+    return actions
+  }
+}

+const componentsGenerator = require('./component-template/prompt')
+
+module.exports = plop => {
+  plop.setGenerator('component', componentsGenerator)
+}