feat: 增加仪表盘组件，解决冲突

src/api/mock/graph.json

@@ -0,0 +1,100 @@
+{
+    "nodes": [
+      {
+        "id": "0",
+        "name": "Myriel",
+        "symbolSize": "@integer(0, 50)",
+        "x": -266.82776,
+        "y": 299.6904,
+        "value": "@integer(0, 50)",
+        "category": 3
+      },
+      {
+        "id": "1",
+        "name": "Napoleon",
+        "symbolSize": "@integer(0, 50)",
+        "x": -418.08344,
+        "y": 446.8853,
+        "value": "@integer(0, 50)",
+        "category": 5
+      },
+      {
+        "id": "2",
+        "name": "MlleBaptistine",
+        "symbolSize": "@integer(0, 50)",
+        "x": -212.76357,
+        "y": 245.29176,
+        "value": "@integer(0, 50)",
+        "category": 1
+      },
+      {
+        "id": "3",
+        "name": "MmeMagloire",
+        "symbolSize": "@integer(0, 50)",
+        "x": -242.82404,
+        "y": 235.26283,
+        "value": "@integer(0, 50)",
+        "category": 1
+      },
+      {
+        "id": "4",
+        "name": "CountessDeLo",
+        "symbolSize": "@integer(0, 50)",
+        "x": -379.30386,
+        "y": 429.06424,
+        "value": "@integer(0, 50)",
+        "category": 0
+      }
+    ],
+    "links": [
+      {
+        "source": "1",
+        "target": "@integer(2, 4)"
+      },
+      {
+        "source": "2",
+        "target": "@integer(3, 4)"
+      },
+      {
+        "source": "3",
+        "target": "@integer(0, 2)"
+      },
+      {
+        "source": "3",
+        "target": "@integer(0, 1)"
+      },
+      {
+        "source": "4",
+        "target": "@integer(0, 3)"
+      }
+    ],
+    "categories": [
+      {
+        "name": "A"
+      },
+      {
+        "name": "B"
+      },
+      {
+        "name": "C"
+      },
+      {
+        "name": "D"
+      },
+      {
+        "name": "E"
+      },
+      {
+        "name": "F"
+      },
+      {
+        "name": "G"
+      },
+      {
+        "name": "H"
+      },
+      {
+        "name": "I"
+      }
+    ]
+  }

src/api/mock/index.ts

@@ -19,6 +19,8 @@ export const capsuleUrl = '/mock/capsule'
 export const wordCloudUrl = '/mock/wordCloud'
 export const treemapUrl = '/mock/treemap'
 export const threeEarth01Url = '/mock/threeEarth01Data'
+export const sankeyUrl = '/mock/sankey'
+export const graphUrl = '/mock/graphData'
 
 const mockObject: MockMethod[] = [
   {
@@ -103,6 +105,16 @@ const mockObject: MockMethod[] = [
     method: RequestHttpEnum.GET,
     response: () => test.threeEarth01Data
   },
+  {
+    url: sankeyUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.fetchSankey
+  },
+  {
+    url: graphUrl,
+    method: RequestHttpEnum.GET,
+    response: () => test.graphData
+  },
 ]
 
 export default mockObject

src/api/mock/sankey.json

@@ -0,0 +1,86 @@
+{
+  "label": [
+    {
+      "name": "a"
+    },
+    {
+      "name": "b"
+    },
+    {
+      "name": "a1"
+    },
+    {
+      "name": "a2"
+    },
+    {
+      "name": "b1"
+    },
+    {
+      "name": "b2"
+    }
+  ],
+  "links": [
+    {
+      "source": "a",
+      "target": "a1",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "a",
+      "target": "a2",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "b",
+      "target": "b1",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "a",
+      "target": "b1",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "b1",
+      "target": "a1",
+      "value": "@integer(0, 10)"
+    },
+    {
+      "source": "b1",
+      "target": "b2",
+      "value": "@integer(0, 10)"
+    }
+  ],
+  "levels": [
+    {
+      "depth": 0,
+      "itemStyle": {
+        "color": "#decbe4"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.9
+      }
+    },
+    {
+      "depth": 1,
+      "itemStyle": {
+        "color": "#b3cde3"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    },
+    {
+      "depth": 2,
+      "itemStyle": {
+        "color": "#ccebc5"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    }
+  ]
+}

src/api/mock/test.mock.ts

@@ -2,6 +2,8 @@ import heatmapJson from './heatMapData.json'
 import scatterJson from './scatter.json'
 import mapJson from './map.json'
 import tTreemapJson from './treemap.json'
+import sankeyJson from './sankey.json'
+import graphDataJson from './graph.json'
 
 export default {
   // 单图表
@@ -219,5 +221,19 @@ export default {
         'endArray|10': [{ name: '@name', N: '@integer(10, 100)', E: '@integer(10, 100)' }]
       }
     ]
-  }
+  },
+  // 桑基图
+  fetchSankey: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: sankeyJson
+  },
+  // 关系图
+  graphData: {
+    code: 0,
+    status: 200,
+    msg: '请求成功',
+    data: graphDataJson
+  },
 }

src/packages/components/Charts/Bars/BarCommon/index.vue

@@ -27,6 +27,7 @@ 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 cloneDeep from 'lodash/cloneDeep'
 
 const props = defineProps({
   themeSetting: {
@@ -62,7 +63,7 @@ watch(
       if (Array.isArray(newData?.dimensions)) {
         const seriesArr = []
         for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(seriesItem)
+          seriesArr.push(cloneDeep(seriesItem))
         }
         replaceMergeArr.value = ['series']
         props.chartConfig.option.series = seriesArr

src/packages/components/Charts/Bars/BarCrossrange/index.vue

@@ -26,6 +26,7 @@ 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 cloneDeep from 'lodash/cloneDeep'
 
 const props = defineProps({
   themeSetting: {
@@ -61,7 +62,7 @@ watch(
       if (Array.isArray(newData?.dimensions)) {
         const seriesArr = []
         for (let i = 0; i < newData.dimensions.length - 1; i++) {
-          seriesArr.push(seriesItem)
+          seriesArr.push(cloneDeep(seriesItem))
         }
         replaceMergeArr.value = ['series']
         props.chartConfig.option.series = seriesArr

src/packages/components/Charts/Mores/Graph/config.ts

@@ -0,0 +1,71 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { GraphConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = []
+
+// 关系图布局
+export const GraphLayout = [
+  { label: '无', value: 'none' },
+  { label: '环形', value: 'circular' }
+]
+
+// 标签开关
+export const LabelSwitch = [
+  { label: '开启', value: 1 },
+  { label: '关闭', value: 0 }
+]
+
+// 标签位置
+export const LabelPosition = [
+  { label: '左侧', value: 'left' },
+  { label: '右侧', value: 'right' },
+  { label: '顶部', value: 'top' },
+  { label: '底部', value: 'bottom' },
+  { label: '内部', value: 'inside' },
+]
+
+export const option = {
+    dataset: { ...dataJson },
+    tooltip: {},
+    legend:{
+      show:true,
+      textStyle:{
+        color:"#eee",
+        fontSize: 14 ,
+      },
+      data: dataJson.categories.map(function (a) {
+          return a.name;
+      })
+    },
+    series: [
+      {
+        type: 'graph',
+        layout: 'none', // none circular环形布局
+        data: dataJson.nodes,
+        links: dataJson.links,
+        categories: dataJson.categories,
+        label: { // 标签
+          show: 1,
+          position: 'right',
+          formatter: '{b}'
+        },
+        labelLayout: {
+          hideOverlap: true
+        },
+        lineStyle: {
+          color: 'source', // 线条颜色
+          curveness: 0.2 // 线条卷曲程度
+        }
+      }
+    ]
+  };
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = GraphConfig.key
+  public chartConfig = cloneDeep(GraphConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/Mores/Graph/config.vue

@@ -0,0 +1,62 @@
+<template>
+  <div>
+    <CollapseItem name="关系图" :expanded="true">
+      <SettingItemBox name="样式">
+        <setting-item name="布局">
+          <n-select v-model:value="graphConfig.layout" :options="GraphLayout" size="small" />
+        </setting-item>
+      </SettingItemBox>
+      <SettingItemBox name="标签">
+        <setting-item name="展示">
+          <n-select v-model:value="graphConfig.label.show" :options="LabelSwitch" size="small" />
+        </setting-item>
+        <setting-item name="位置">
+          <n-select v-model:value="graphConfig.label.position" :options="LabelPosition" size="small" />
+        </setting-item>
+      </SettingItemBox>
+      <SettingItemBox name="线条">
+        <SettingItem name="弧线">
+        <!-- 需要输入两位的小数才会变化 -->
+          <n-input-number
+          v-model:value="optionData.series[0].lineStyle.curveness"
+          :min="0"
+          :step="0.01"
+          placeholder="弯曲程度"
+          size="small"
+        ></n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+      <SettingItemBox name="图例">
+        <SettingItem name="颜色">
+          <n-color-picker
+            size="small"
+            :modes="['hex']"
+            v-model:value="optionData.legend.textStyle.color"
+        ></n-color-picker>
+        </SettingItem>
+        <SettingItem name="文本">
+          <n-input-number v-model:value="optionData.legend.textStyle.fontSize" :min="0" :step="1" size="small" placeholder="文字大小">
+          </n-input-number>
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option, GraphLayout, LabelSwitch, LabelPosition } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option & GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const graphConfig = computed<typeof option.series[0]>(() => {
+  return props.optionData.series[0]
+})
+</script>

src/packages/components/Charts/Mores/Graph/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const GraphConfig: ConfigType = {
+  key: 'Graph',
+  chartKey: 'VGraph',
+  conKey: 'VCGraph',
+  title: '关系图',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'graph.png'
+}

src/packages/components/Charts/Mores/Graph/index.vue

@@ -0,0 +1,80 @@
+<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, PropType, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import dataJson from './data.json'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { RadarChart } from 'echarts/charts'
+import { includes } from './config'
+import { mergeTheme, setOption } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+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<CreateComponentType>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
+
+const vChartRef = ref<typeof VChart>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const dataSetHandle = (dataset: typeof dataJson) => {
+  if (dataset.nodes) {
+    props.chartConfig.option.series[0].data = dataset.nodes
+  }
+  if (dataset.links) {
+    props.chartConfig.option.series[0].links = dataset.links
+  }
+  if (dataset.categories) {
+    props.chartConfig.option.series[0].categories = dataset.categories
+    // @ts-ignore
+    props.chartConfig.option.legend.data = dataset.categories.map((i: { name: string }) => i.name)
+  }
+  if (vChartRef.value && isPreview()) {
+    setOption(vChartRef.value, props.chartConfig.option)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataSetHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: false
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+  dataSetHandle(newData)
+})
+</script>

src/packages/components/Charts/Mores/Sankey/config.ts

@@ -0,0 +1,43 @@
+import { echartOptionProfixHandle, PublicConfigClass } from '@/packages/public'
+import { SankeyConfig } from './index'
+import { CreateComponentType } from '@/packages/index.d'
+import cloneDeep from 'lodash/cloneDeep'
+import dataJson from './data.json'
+
+export const includes = ['legend']
+
+// 图表方向
+export const orientList = [
+  { label: '水平', value: 'horizontal' },
+  { label: '垂直', value: 'vertical' }
+]
+
+// 标签展示
+export const toolTipSwitch = [
+  { label: '开启', value: 1 },
+  { label: '关闭', value: 0 }
+]
+
+export const option = {
+  dataset: { ...dataJson },
+  tooltip: {
+    show: 1,
+    trigger: 'item',
+    triggerOn: 'mousemove'
+  },
+  series: {
+    type: 'sankey',
+    layout: 'none',
+    orient:'horizontal',
+    data: dataJson.label,
+    links: dataJson.links,
+    levels: dataJson.levels
+  }
+};
+
+export default class Config extends PublicConfigClass implements CreateComponentType {
+  public key = SankeyConfig.key
+  public chartConfig = cloneDeep(SankeyConfig)
+  // 图表配置项
+  public option = echartOptionProfixHandle(option, includes)
+}

src/packages/components/Charts/Mores/Sankey/config.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <CollapseItem name="桑基图" :expanded="true">
+      <SettingItemBox name="样式">
+        <SettingItem name="方向">
+          <n-select
+            v-model:value="sankeyConfig.orient"
+            size="small"
+            :options="orientList"
+            placeholder="选择方向"
+          />
+        </SettingItem>
+        <SettingItem name="提示标签">
+          <n-select
+            v-model:value="optionData.tooltip.show"
+            size="small"
+            :options="toolTipSwitch"
+            placeholder="是否开启"
+          />
+        </SettingItem>
+      </SettingItemBox>
+    </CollapseItem>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { PropType, computed } from 'vue'
+import { CollapseItem, SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
+import { option, orientList, toolTipSwitch } from './config'
+import { GlobalThemeJsonType } from '@/settings/chartThemes/index'
+
+const props = defineProps({
+  optionData: {
+    type: Object as PropType<typeof option & GlobalThemeJsonType>,
+    required: true
+  }
+})
+
+const sankeyConfig = computed<typeof option.series>(() => {
+  return props.optionData.series
+})
+
+</script>

src/packages/components/Charts/Mores/Sankey/data.json

@@ -0,0 +1,86 @@
+{
+  "label": [
+    {
+      "name": "a"
+    },
+    {
+      "name": "b"
+    },
+    {
+      "name": "a1"
+    },
+    {
+      "name": "a2"
+    },
+    {
+      "name": "b1"
+    },
+    {
+      "name": "b2"
+    }
+  ],
+  "links": [
+    {
+      "source": "a",
+      "target": "a1",
+      "value": 5
+    },
+    {
+      "source": "a",
+      "target": "a2",
+      "value": 3
+    },
+    {
+      "source": "b",
+      "target": "b1",
+      "value": 8
+    },
+    {
+      "source": "a",
+      "target": "b1",
+      "value": 3
+    },
+    {
+      "source": "b1",
+      "target": "a1",
+      "value": 1
+    },
+    {
+      "source": "b1",
+      "target": "b2",
+      "value": 2
+    }
+  ],
+  "levels": [
+    {
+      "depth": 0,
+      "itemStyle": {
+        "color": "#decbe4"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.9
+      }
+    },
+    {
+      "depth": 1,
+      "itemStyle": {
+        "color": "#b3cde3"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    },
+    {
+      "depth": 2,
+      "itemStyle": {
+        "color": "#ccebc5"
+      },
+      "lineStyle": {
+        "color": "source",
+        "opacity": 0.6
+      }
+    }
+  ]
+}

src/packages/components/Charts/Mores/Sankey/index.ts

@@ -0,0 +1,14 @@
+import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d'
+import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d'
+
+export const SankeyConfig: ConfigType = {
+  key: 'Sankey',
+  chartKey: 'VSankey',
+  conKey: 'VCSankey',
+  title: '桑基图',
+  category: ChatCategoryEnum.MORE,
+  categoryName: ChatCategoryEnumName.MORE,
+  package: PackagesCategoryEnum.CHARTS,
+  chartFrame: ChartFrameEnum.COMMON,
+  image: 'sankey.png'
+}

src/packages/components/Charts/Mores/Sankey/index.vue

@@ -0,0 +1,78 @@
+<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, PropType, watch } from 'vue'
+import VChart from 'vue-echarts'
+import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
+import dataJson from './data.json'
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { RadarChart } from 'echarts/charts'
+import { includes } from './config'
+import { mergeTheme, setOption } from '@/packages/public/chart'
+import { useChartDataFetch } from '@/hooks'
+import { CreateComponentType } from '@/packages/index.d'
+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<CreateComponentType>,
+    required: true
+  }
+})
+
+const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
+
+use([DatasetComponent, CanvasRenderer, RadarChart, GridComponent, TooltipComponent, LegendComponent])
+
+const vChartRef = ref<typeof VChart>()
+
+const option = computed(() => {
+  return mergeTheme(props.chartConfig.option, props.themeSetting, includes)
+})
+
+const dataHandle = (dataset: typeof dataJson) => {
+  if (dataset.label) {
+    props.chartConfig.option.series.data = dataset.label
+  }
+  if (dataset.links) {
+    props.chartConfig.option.series.links = dataset.links
+  }
+  if (dataset.levels) {
+    props.chartConfig.option.series.levels = dataset.levels
+  }
+  if (vChartRef.value && isPreview()) {
+    setOption(vChartRef.value, props.chartConfig.option)
+  }
+}
+
+watch(
+  () => props.chartConfig.option.dataset,
+  newData => {
+    try {
+      dataHandle(newData)
+    } catch (error) {
+      console.log(error)
+    }
+  },
+  {
+    deep: true
+  }
+)
+
+useChartDataFetch(props.chartConfig, useChartEditStore, (newData: typeof dataJson) => {
+  dataHandle(newData)
+})
+</script>

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

@@ -5,5 +5,7 @@ import { HeatmapConfig } from './Heatmap/index'
 import { WaterPoloConfig } from './WaterPolo/index'
 import { TreeMapConfig } from './TreeMap/index'
 import { DialConfig } from './Dial/index'
+import { SankeyConfig } from './Sankey/index'
+import { GraphConfig } from './Graph/index'
 
-export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig, DialConfig]
+export default [ProcessConfig, RadarConfig, FunnelConfig, HeatmapConfig, WaterPoloConfig, TreeMapConfig, GraphConfig, SankeyConfig, DialConfig]

src/views/chart/ContentConfigurations/components/ChartData/components/ChartDataRequest/components/RequestTargetConfig/index.vue

@@ -65,6 +65,7 @@ import { RequestHeader } from '../RequestHeader'
 import { isDev } from '@/utils'
 import { icon } from '@/plugins'
 import {
+  graphUrl,
   chartDataUrl,
   chartSingleDataUrl,
   rankListUrl,
@@ -80,7 +81,8 @@ import {
   capsuleUrl,
   wordCloudUrl,
   treemapUrl,
-  threeEarth01Url
+  threeEarth01Url,
+  sankeyUrl
 } from '@/api/mock'
 
 const props = defineProps({
@@ -142,6 +144,12 @@ const apiList = [
   },
   {
     value: `【三维地球】${threeEarth01Url}`
+  },
+  {
+    value: `【桑基图】${sankeyUrl}`
+  },
+  {
+    value: `【关系图】${graphUrl}`
   }
 ]
 </script>

src/views/chart/ContentHeader/headerLeftBtn/index.vue

@@ -11,7 +11,7 @@
       <!-- 模块展示按钮 -->
       <n-tooltip v-for="item in btnList" :key="item.key" placement="bottom" trigger="hover">
         <template #trigger>
-          <n-button size="small" ghost :type="styleHandle(item)" :focusable="false" @click="clickHandle(item, $event)">
+          <n-button size="small" ghost :type="styleHandle(item)" :focusable="false" @click="clickHandle(item)">
             <component :is="item.icon"></component>
           </n-button>
         </template>