diff --git a/core/core-frontend/src/api/plugin.ts b/core/core-frontend/src/api/plugin.ts index b708650759..ca46ba6613 100644 --- a/core/core-frontend/src/api/plugin.ts +++ b/core/core-frontend/src/api/plugin.ts @@ -2,6 +2,9 @@ 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}` }) + export const loadDistributed = () => request.get({ url: '/DEXPack.umd.js' }) export const xpackModelApi = () => request.get({ url: '/xpackModel' }) diff --git a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue index 800f5a30c1..8124d96530 100644 --- a/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue +++ b/core/core-frontend/src/components/data-visualization/canvas/CanvasCore.vue @@ -43,6 +43,8 @@ import DragInfo from '@/components/visualization/common/DragInfo.vue' 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() @@ -1490,9 +1492,27 @@ defineExpose({ @linkageSetOpen="linkageSetOpen(item)" > + `#${props.prefix}-${props.name}`) const svgClass = computed(() => { @@ -17,14 +18,32 @@ const svgClass = computed(() => { - + + - diff --git a/core/core-frontend/src/components/plugin/index.ts b/core/core-frontend/src/components/plugin/index.ts index ec3e799a3a..6e790b2880 100644 --- a/core/core-frontend/src/components/plugin/index.ts +++ b/core/core-frontend/src/components/plugin/index.ts @@ -1,3 +1,4 @@ import XpackComponent from './src/index.vue' +import PluginComponent from './src/PluginComponent.vue' -export { XpackComponent } +export { XpackComponent, PluginComponent } diff --git a/core/core-frontend/src/components/plugin/src/PluginComponent.vue b/core/core-frontend/src/components/plugin/src/PluginComponent.vue new file mode 100644 index 0000000000..568b19e436 --- /dev/null +++ b/core/core-frontend/src/components/plugin/src/PluginComponent.vue @@ -0,0 +1,139 @@ + + + + + + + diff --git a/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue b/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue index ad90171f69..a29141eaf4 100644 --- a/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue +++ b/core/core-frontend/src/custom-component/component-group/UserViewGroup.vue @@ -5,6 +5,7 @@ import { CHART_TYPE_CONFIGS } from '@/views/chart/components/editor/util/chart' import Icon from '@/components/icon-custom/src/Icon.vue' import { commonHandleDragEnd, commonHandleDragStart } from '@/utils/canvasUtils' import { ElScrollbar } from 'element-plus-secondary' +import { XpackComponent } from '@/components/plugin' const props = defineProps({ propValue: { @@ -47,8 +48,8 @@ const anchorPosition = anchor => { scrollTo(element.offsetTop) } -const newComponent = innerType => { - eventBus.emit('handleNew', { componentName: 'UserView', innerType: innerType }) +const newComponent = (innerType, isPlugin) => { + eventBus.emit('handleNew', { componentName: 'UserView', innerType: innerType, isPlugin }) } const handleDragStart = e => { @@ -63,6 +64,36 @@ const groupActiveChange = category => { state.curCategory = category anchorPosition('#' + category) } +const loadPluginCategory = data => { + data.forEach(item => { + const { category, title, render, chartValue, chartTitle, icon } = item + const node = { + render, + category, + icon, + value: chartValue, + title: chartTitle, + isPlugin: true + } + const stack = [...state.chartGroupList] + let findParent = false + while (stack?.length) { + const parent = stack.pop() + if (parent.category === category) { + parent.details.push(node) + findParent = true + } + } + if (!findParent) { + state.chartGroupList.push({ + category, + title, + display: 'show', + details: [node] + }) + } + }) +} @@ -97,12 +128,18 @@ const groupActiveChange = category => { :key="chartInfo.title" > + @@ -115,6 +152,10 @@ const groupActiveChange = category => { +