perf(X-Pack): 优化整合视图插件demo

core/core-frontend/src/api/plugin.ts

@@ -3,7 +3,7 @@ import request from '@/config/axios'
 export const load = (key: string) => request.get({ url: `/xpackComponent/content/${key}` })
 
 export const loadPluginApi = (key: string) =>
-  request.get({ url: `/xpackComponent/pluginContent/${key}` })
+  request.get({ url: `/xpackComponent/contentPlugin/${key}` })
 
 export const loadDistributed = () => request.get({ url: '/DEXPack.umd.js' })
 

core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue

@@ -44,7 +44,6 @@ import { activeWatermark } from '@/components/watermark/watermark'
 import { personInfoApi } from '@/api/user'
 import ComponentHangPopver from '@/custom-component/independent-hang/ComponentHangPopver.vue'
 
-import { PluginComponent } from '@/components/plugin'
 const snapshotStore = snapshotStoreWithOut()
 const dvMainStore = dvMainStoreWithOut()
 const composeStore = composeStoreWithOut()
@@ -1492,7 +1491,7 @@ defineExpose({
       @linkageSetOpen="linkageSetOpen(item)"
     >
       <!--如果是图表 则动态获取预存的chart-view数据-->
-      <PluginComponent
+      <!-- <PluginComponent
         v-if="item['isPlugin']"
         :jsname="item['pluginFlag'] || 'L2NvbXBvbmVudC9pbmRleA=='"
         class="component"
@@ -1509,10 +1508,10 @@ defineExpose({
         @input="handleInput"
         :dv-info="dvInfo"
         :canvas-active="canvasActive"
-      />
+      /> -->
       <component
         :is="findComponent(item.component)"
-        v-else-if="item.component === 'UserView'"
+        v-if="item.component === 'UserView' || item['isPlugin']"
         class="component"
         :id="'component' + item.id"
         :active="item.id === curComponentId"

core/core-frontend/src/components/plugin/src/PluginComponent.vue

@@ -34,9 +34,9 @@ const generateRamStr = (len: number) => {
 
 const importProxy = (bytesArray: any[]) => {
   const promise = import(
-    `../../../../../../../${formatArray(bytesArray[6])}/${formatArray(bytesArray[7])}/${formatArray(
+    `../../../../../../../${formatArray(bytesArray[7])}/${formatArray(bytesArray[8])}/${formatArray(
-      bytesArray[8]
+      bytesArray[9]
-    )}/${formatArray(bytesArray[9])}/${formatArray(bytesArray[10])}.vue`
+    )}/${formatArray(bytesArray[10])}/${formatArray(bytesArray[11])}.vue`
   )
   promise
     .then((res: any) => {
@@ -50,7 +50,7 @@ const importProxy = (bytesArray: any[]) => {
 
 const loadComponent = () => {
   loading.value = true
-  const byteArray = wsCache.get(`de-plugin-proxy`)
+  const byteArray = wsCache.get(`de-plugin-proxy-plugin`)
   if (byteArray) {
     importProxy(JSON.parse(byteArray))
     loading.value = false
@@ -77,7 +77,7 @@ const storeCacheProxy = byteArray => {
   byteArray.forEach(item => {
     result.push([...item])
   })
-  wsCache.set(`de-plugin-proxy`, JSON.stringify(result))
+  wsCache.set(`de-plugin-proxy-plugin`, JSON.stringify(result))
 }
 const pluginProxy = ref(null)
 const invokeMethod = param => {

core/core-frontend/src/models/chart/chart-plugin.d.ts

@@ -0,0 +1,4 @@
+declare interface ChartPlugin {
+  isPlugin: boolean
+  pluginResourceId?: string
+}

core/core-frontend/src/models/chart/chart.d.ts

@@ -56,15 +56,18 @@ declare interface Chart {
   linkageActive: boolean
   jumpActive: boolean
   aggregate?: boolean
+  plugin?: CustomPlugin
 }
 declare type CustomAttr = DeepPartial<ChartAttr> | JSONString<DeepPartial<ChartAttr>>
 declare type CustomStyle = DeepPartial<ChartStyle> | JSONString<DeepPartial<ChartStyle>>
 declare type CustomSenior = DeepPartial<ChartSenior> | JSONString<DeepPartial<ChartSenior>>
+declare type CustomPlugin = DeepPartial<ChartPlugin> | JSONString<DeepPartial<ChartPlugin>>
 
-declare type ChartObj = Omit<Chart, 'customAttr' | 'customStyle' | 'senior'> & {
+declare type ChartObj = Omit<Chart, 'customAttr' | 'customStyle' | 'senior' | 'plugin'> & {
   customAttr: ChartAttr
   customStyle: ChartStyle
   senior: ChartSenior
+  plugin?: ChartPlugin
 }
 
 /**

core/core-frontend/src/router/establish.ts

@@ -3,7 +3,7 @@ import { cloneDeep } from 'lodash'
 import { XpackComponent } from '@/components/plugin'
 const modules = import.meta.glob('../views/**/*.vue')
 export const Layout = () => import('@/layout/index.vue')
-const pluginComponent = 'components/plugin'
+const xpackComName = 'components/plugin'
 // 后端控制路由生成
 export const generateRoutesFn2 = (routes: AppCustomRouteRecordRaw[]): AppRouteRecordRaw[] => {
   const res: AppRouteRecordRaw[] = []
@@ -17,7 +17,7 @@ export const generateRoutesFn2 = (routes: AppCustomRouteRecordRaw[]): AppRouteRe
 
     if (route.plugin) {
       const jsName = route.component
-      route.component = pluginComponent
+      route.component = xpackComName
       route.props = {
         jsname: jsName,
         inLayout: route.inLayout
@@ -35,7 +35,7 @@ export const generateRoutesFn2 = (routes: AppCustomRouteRecordRaw[]): AppRouteRe
 
     if (route.component) {
       let comModule = null
-      if (route.component === pluginComponent) {
+      if (route.component === xpackComName) {
         comModule = XpackComponent
       } else {
         comModule = modules[`../views/${route.component}/index.vue`]

core/core-frontend/src/store/modules/data-visualization/dvMain.ts

@@ -383,7 +383,11 @@ export const dvMainStore = defineStore('dataVisualization', {
           ...defaultConfig,
           id: component.id,
           type: component.innerType,
-          render: component.render
+          render: component.render,
+          plugin: {
+            isPlugin: component.isPlugin,
+            pluginResourceId: component.pluginResourceId
+          }
         } as unknown as ChartObj
         // 处理配置项默认值，不同图表的同一配置项默认值不同
         const chartViewInstance = chartViewManager.getChartView(newView.render, newView.type)

core/core-frontend/src/views/chart/components/editor/index.vue

@@ -260,6 +260,9 @@ const chartStyleShow = computed(() => {
 })
 
 const chartViewInstance = computed(() => {
+  if (view.value.render === 'highchart') {
+    return chartViewManager.getChartView('antv', view.value.type)
+  }
   return chartViewManager.getChartView(view.value.render, view.value.type)
 })
 const showAxis = (axis: AxisType) => chartViewInstance.value?.axis?.includes(axis)
@@ -1599,12 +1602,13 @@ const deleteChartFieldItem = id => {
               </div>
             </div>
             <plugin-component
-              v-else-if="view?.isPlugin"
+              v-else-if="view.plugin?.isPlugin"
               jsname="L2NvbXBvbmVudC9lZGl0b3IvaW5kZXg="
               :view="view"
               :dimension="state.dimension"
               :quota="state.quota"
               :themes="themes"
+              @update-chart-data="updateChartData"
             />
             <el-tabs
               v-else

core/core-frontend/src/views/chart/components/views/index.vue

@@ -754,7 +754,7 @@ const showActionIcons = computed(() => {
     <!--这里去渲染不同图库的图表-->
     <div v-if="chartAreaShow" style="flex: 1; overflow: hidden">
       <plugin-component
-        v-if="view?.isPlugin"
+        v-if="view.plugin?.isPlugin"
         jsname="L2NvbXBvbmVudC9pbmRleA=="
         :scale="scale"
         :dynamic-area-id="dynamicAreaId"