From 19c94ece28939a0c0172e891cba65ee410b856bb Mon Sep 17 00:00:00 2001 From: zhf <1204297681@qq.com> Date: Fri, 18 Oct 2024 20:18:28 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A7=86=E5=9B=BE=E8=AE=BE=E8=AE=A1?= =?UTF-8?q?=E5=B7=A5=E5=85=B7=E8=A1=A5=E5=85=85=E6=BB=9A=E5=8A=A8=E6=9D=A1?= =?UTF-8?q?=E5=AE=B9=E5=99=A8=E5=92=8C=E5=88=86=E5=89=B2=E5=AE=B9=E5=99=A8?= =?UTF-8?q?=E7=9A=84=E7=BB=98=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../panel-item-widgets/widgets/index.ts | 8 + .../panel-scroll-container-item.scss | 39 +++ .../panel-scroll-container-item.tsx | 98 +++++++ .../panel-scroll-container.scss | 76 +++++ .../panel-scroll-container.tsx | 268 ++++++++++++++++++ .../split-layout-container-item.scss | 15 + .../split-layout-container-item.tsx | 80 ++++++ .../split-layout-container.scss | 130 +++++++++ .../split-layout-container.tsx | 186 ++++++++++++ .../util/create-provider/create-provider.ts | 4 +- 10 files changed, 902 insertions(+), 2 deletions(-) create mode 100644 packages/view-design/src/components/panel-item-widgets/widgets/panel-scroll-container/panel-scroll-container-item/panel-scroll-container-item.scss create mode 100644 packages/view-design/src/components/panel-item-widgets/widgets/panel-scroll-container/panel-scroll-container-item/panel-scroll-container-item.tsx create mode 100644 packages/view-design/src/components/panel-item-widgets/widgets/panel-scroll-container/panel-scroll-container.scss create mode 100644 packages/view-design/src/components/panel-item-widgets/widgets/panel-scroll-container/panel-scroll-container.tsx create mode 100644 packages/view-design/src/components/panel-item-widgets/widgets/split-layout-container/split-layout-container-item/split-layout-container-item.scss create mode 100644 packages/view-design/src/components/panel-item-widgets/widgets/split-layout-container/split-layout-container-item/split-layout-container-item.tsx create mode 100644 packages/view-design/src/components/panel-item-widgets/widgets/split-layout-container/split-layout-container.scss create mode 100644 packages/view-design/src/components/panel-item-widgets/widgets/split-layout-container/split-layout-container.tsx diff --git a/packages/view-design/src/components/panel-item-widgets/widgets/index.ts b/packages/view-design/src/components/panel-item-widgets/widgets/index.ts index 0a983e10..78c8a19c 100644 --- a/packages/view-design/src/components/panel-item-widgets/widgets/index.ts +++ b/packages/view-design/src/components/panel-item-widgets/widgets/index.ts @@ -12,6 +12,10 @@ import IBizPanelContentItemButtonList from './panel-content-item-button-list/pan import IBizPanelIdentityCheck from './panel-identity-check/panel-identity-check'; import IBizPanelEditorItem from './panel-editor-item/panel-editor-item'; import IBizPanelContentItem from './panel-content-item/panel-content-item'; +import IBizPanelScrollContainer from './panel-scroll-container/panel-scroll-container'; +import IBizPanelScrollContainerItem from './panel-scroll-container/panel-scroll-container-item/panel-scroll-container-item'; +import IBizSplitLayoutContainer from './split-layout-container/split-layout-container'; +import IBizSplitLayoutContainerItem from './split-layout-container/split-layout-container-item/split-layout-container-item'; export default { install(app: App): void { @@ -31,5 +35,9 @@ export default { app.component('IBizPanelIdentityCheck', IBizPanelIdentityCheck); app.component('IBizPanelEditorItem', IBizPanelEditorItem); app.component('IBizPanelContentItem', IBizPanelContentItem); + app.component('IBizPanelScrollContainer', IBizPanelScrollContainer); + app.component('IBizPanelScrollContainerItem', IBizPanelScrollContainerItem); + app.component('IBizSplitLayoutContainer', IBizSplitLayoutContainer); + app.component('IBizSplitLayoutContainerItem', IBizSplitLayoutContainerItem); }, }; diff --git a/packages/view-design/src/components/panel-item-widgets/widgets/panel-scroll-container/panel-scroll-container-item/panel-scroll-container-item.scss b/packages/view-design/src/components/panel-item-widgets/widgets/panel-scroll-container/panel-scroll-container-item/panel-scroll-container-item.scss new file mode 100644 index 00000000..10dc4761 --- /dev/null +++ b/packages/view-design/src/components/panel-item-widgets/widgets/panel-scroll-container/panel-scroll-container-item/panel-scroll-container-item.scss @@ -0,0 +1,39 @@ +@include b(panel-scroll-container-item) { + position: relative; + height: 100%; + + @include when(active) { + border: 1px solid var(--container-border-hover-color); + + > .#{bem(panel-scroll-container-item-title)} { + color: var(--container-border-hover-color); + border-bottom: 1px dashed var(--container-border-hover-color); + } + } +} + +@include b(panel-scroll-container-item-title) { + height: 20px; + overflow: hidden; + font-size: 12px; + text-align: center; + text-overflow: ellipsis; + white-space: nowrap; + border-bottom: 1px dashed var(--container-border-color); +} + +@include b(panel-scroll-container-item-draggable) { + display: flex; + flex-flow: column nowrap; + min-height: calc(100% - 20px); + padding-bottom: 30px; +} + +@include b(panel-scroll-container-item-svg) { + position: absolute; + top: 20px; + right: 0; + width: 4px; + height: 50%; + background-color: #8c8c8c; +} diff --git a/packages/view-design/src/components/panel-item-widgets/widgets/panel-scroll-container/panel-scroll-container-item/panel-scroll-container-item.tsx b/packages/view-design/src/components/panel-item-widgets/widgets/panel-scroll-container/panel-scroll-container-item/panel-scroll-container-item.tsx new file mode 100644 index 00000000..f063d73f --- /dev/null +++ b/packages/view-design/src/components/panel-item-widgets/widgets/panel-scroll-container/panel-scroll-container-item/panel-scroll-container-item.tsx @@ -0,0 +1,98 @@ +import { PropType, defineComponent } from 'vue'; +import draggable from 'vuedraggable'; +import { AppDataEntity } from '@ibiz-template/runtime'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import { PanelLayoutDataProvider } from '../../../../../providers'; +import { useLayoutItemContainer, useSortableLayout } from '../../../hooks'; +import './panel-scroll-container-item.scss'; + +// 滚动条容器子项 +export default defineComponent({ + name: 'IBizPanelScrollContainerItem', + components: { + draggable, + }, + props: { + context: { type: Object as PropType, required: true }, + params: { type: Object as PropType, default: () => ({}) }, + parent: { + type: Object as PropType>, + }, + data: { + type: Object as PropType>, + required: true, + }, + pos: { + type: String, + }, + }, + setup(props, ctx) { + const ns = useNamespace('panel-scroll-container-item'); + + const { active, onItemClick } = useLayoutItemContainer(props, ctx); + const { children, sortableOptions, sortableGroupOptions, deleteChild } = + useSortableLayout(props, ctx); + + // 计算高度 + const getHeightStyle = () => { + const style: IData = {}; + if (props.pos === 'top' || props.pos === 'bottom') { + style['min-height'] = '80px'; + } + return style; + }; + + return { + ns, + active, + children, + sortableOptions, + sortableGroupOptions, + deleteChild, + onItemClick, + getHeightStyle, + }; + }, + render() { + return ( +
+
{this.data.label}
+ + {{ + item: ({ + element, + }: { + element: PanelLayoutDataProvider; + index: number; + }) => { + return ( + { + this.deleteChild(element); + }} + > + ); + }, + }} + +
+
+ ); + }, +}); diff --git a/packages/view-design/src/components/panel-item-widgets/widgets/panel-scroll-container/panel-scroll-container.scss b/packages/view-design/src/components/panel-item-widgets/widgets/panel-scroll-container/panel-scroll-container.scss new file mode 100644 index 00000000..2f75a8e5 --- /dev/null +++ b/packages/view-design/src/components/panel-item-widgets/widgets/panel-scroll-container/panel-scroll-container.scss @@ -0,0 +1,76 @@ +@include b(panel-scroll-container) { + display: flex; + flex-flow: column nowrap; + height: 100%; +} + +@include b(panel-scroll-container-title) { + height: 20px; + padding-right: 10px; + overflow: hidden; + font-size: 12px; + color: var(--container-border-hover-color); + text-align: right; + text-overflow: ellipsis; + white-space: nowrap; + border-bottom: 1px dashed var(--container-border-hover-color); + + @include b(panel-scroll-container-caption) { + margin-right: 100px; + } +} + +@include b(panel-scroll-container-actions) { + position: absolute; + top: 1px; + right: 10px; + display: flex; + flex-wrap: wrap; +} + +@include b(panel-scroll-container-action-item) { + display: flex; + align-items: center; + justify-content: center; + margin: 0 3px; + font-size: 16px; + color: #c5c5c5; + cursor: pointer; + + &:hover { + color: var(--container-border-hover-color); + } + + @include when(active) { + color: var(--container-border-hover-color); + } +} + +@include b(panel-scroll-container-top) { + border-bottom: 1px solid var(--container-border-color); +} + +@include b(panel-scroll-container-content) { + display: flex; + flex-grow: 1; + flex-wrap: nowrap; +} + +@include b(panel-scroll-container-left) { + flex-shrink: 0; + border-right: 1px solid var(--container-border-color); +} + +@include b(panel-scroll-container-main) { + flex-grow: 1; + overflow: auto; +} + +@include b(panel-scroll-container-right) { + flex-shrink: 0; + border-left: 1px solid var(--container-border-color); +} + +@include b(panel-scroll-container-bottom) { + border-top: 1px solid var(--container-border-color); +} diff --git a/packages/view-design/src/components/panel-item-widgets/widgets/panel-scroll-container/panel-scroll-container.tsx b/packages/view-design/src/components/panel-item-widgets/widgets/panel-scroll-container/panel-scroll-container.tsx new file mode 100644 index 00000000..6f747378 --- /dev/null +++ b/packages/view-design/src/components/panel-item-widgets/widgets/panel-scroll-container/panel-scroll-container.tsx @@ -0,0 +1,268 @@ +import { PropType, computed, defineComponent, ref, watch } from 'vue'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import { AppDataEntity } from '@ibiz-template/runtime'; +import { + PanelContentProvider, + PanelLayoutDataProvider, +} from '../../../../providers'; +import { resource } from '../../../../global'; +import { useLayoutItem } from '../../hooks'; +import './panel-scroll-container.scss'; + +// 滚动条容器 +export default defineComponent({ + name: 'IBizPanelScrollContainer', + props: { + context: { type: Object as PropType, required: true }, + params: { type: Object as PropType, default: () => ({}) }, + parent: { + type: Object as PropType>, + }, + data: { + type: Object as PropType>, + required: true, + }, + provider: { + type: Object as PropType, + required: true, + }, + }, + setup(props, ctx) { + const ns = useNamespace('panel-scroll-container'); + + const { children } = useLayoutItem(props, ctx); + + // 顶部数据 + const top = ref>(); + + // 是否存在顶部数据 + const existTop = computed(() => { + return !!top.value; + }); + + // 右侧数据 + const right = ref>(); + + // 是否存在右侧数据 + const existRight = computed(() => { + return !!right.value; + }); + + // 底部数据 + const bottom = ref>(); + + // 是否存在底部数据 + const existBottom = computed(() => { + return !!bottom.value; + }); + + // 左侧数据 + const left = ref>(); + + // 是否存在左侧数据 + const existLeft = computed(() => { + return !!left.value; + }); + + // 主内容数据 + const main = ref>(); + + // 是否存在主内容数据 + const existMain = computed(() => { + return !!main.value; + }); + + // 设置子项数据 + const setChildData = (data: PanelLayoutDataProvider) => { + switch (data.type) { + case 'CONTAINER_SCROLL_HEADER': + top.value = data; + break; + case 'CONTAINER_SCROLL_BOTTOM': + bottom.value = data; + break; + case 'CONTAINER_SCROLL_LEFT': + left.value = data; + break; + case 'CONTAINER_SCROLL_RIGHT': + right.value = data; + break; + case 'CONTAINER_SCROLL_MAIN': + main.value = data; + break; + default: + break; + } + }; + + // 获取宽度 + const getWidthStyle = (data: PanelLayoutDataProvider) => { + const item = data; + const style: IData = {}; + if (Object.is(item.widthMode, 'FULL')) { + style.width = '20%'; + } else if (item.width) { + style.width = + item.width + (Object.is(item.widthMode, 'PERCENTAGE') ? '%' : 'px'); + } else { + style.width = '20%'; + } + return style; + }; + + // 面板布局过滤 + const onLayoutChange = (e: MouseEvent, type: string) => { + e.stopPropagation(); + switch (type) { + case 'CONTAINER_SCROLL_HEADER': + break; + case 'CONTAINER_SCROLL_RIGHT': + break; + case 'CONTAINER_SCROLL_BOTTOM': + break; + case 'CONTAINER_SCROLL_LEFT': + break; + default: + break; + } + }; + + watch( + () => children.value, + () => { + children.value.forEach(item => + setChildData(item as PanelLayoutDataProvider), + ); + }, + ); + + // 绘制滚动条容器右上角布局功能功能按钮 + const renderScrollActions = () => { + return ( +
+
+ onLayoutChange(e, 'CONTAINER_SCROLL_LEFT') + } + > + +
+
+ onLayoutChange(e, 'CONTAINER_SCROLL_HEADER') + } + > + +
+
+ onLayoutChange(e, 'CONTAINER_SCROLL_BOTTOM') + } + > + +
+
+ onLayoutChange(e, 'CONTAINER_SCROLL_RIGHT') + } + > + +
+
+ ); + }; + + // 渲染子项 + const renderContentItem = ( + pos: string, + data: PanelLayoutDataProvider, + ) => { + return ( + + ); + }; + + return { + ns, + top, + right, + bottom, + left, + main, + existTop, + existRight, + existBottom, + existLeft, + existMain, + getWidthStyle, + renderScrollActions, + renderContentItem, + }; + }, + render() { + return ( +
+
+ {this.data.label} + {this.renderScrollActions()} +
+ {this.existTop ? ( +
+ {this.renderContentItem('top', this.top!)} +
+ ) : null} +
+ {this.existLeft ? ( +
+ {this.renderContentItem('left', this.left!)} +
+ ) : null} + {this.existMain ? ( +
+ {this.renderContentItem('main', this.main!)} +
+ ) : null} + {this.existRight ? ( +
+ {this.renderContentItem('right', this.right!)} +
+ ) : null} +
+ {this.existBottom ? ( +
+ {this.renderContentItem('bottom', this.bottom!)} +
+ ) : null} +
+ ); + }, +}); diff --git a/packages/view-design/src/components/panel-item-widgets/widgets/split-layout-container/split-layout-container-item/split-layout-container-item.scss b/packages/view-design/src/components/panel-item-widgets/widgets/split-layout-container/split-layout-container-item/split-layout-container-item.scss new file mode 100644 index 00000000..21e92f98 --- /dev/null +++ b/packages/view-design/src/components/panel-item-widgets/widgets/split-layout-container/split-layout-container-item/split-layout-container-item.scss @@ -0,0 +1,15 @@ +@include b(split-layout-container-item) { + display: flex; + flex-direction: column; + width: 100%; + min-width: 8.33%; + min-height: 100px; + border: 1px solid var(--container-border-color); +} + +@include b(split-layout-container-item-draggable) { + display: flex; + flex: 1; + flex-flow: column nowrap; + height: 100%; +} diff --git a/packages/view-design/src/components/panel-item-widgets/widgets/split-layout-container/split-layout-container-item/split-layout-container-item.tsx b/packages/view-design/src/components/panel-item-widgets/widgets/split-layout-container/split-layout-container-item/split-layout-container-item.tsx new file mode 100644 index 00000000..6137ce15 --- /dev/null +++ b/packages/view-design/src/components/panel-item-widgets/widgets/split-layout-container/split-layout-container-item/split-layout-container-item.tsx @@ -0,0 +1,80 @@ +import { PropType, defineComponent } from 'vue'; +import draggable from 'vuedraggable'; +import { AppDataEntity } from '@ibiz-template/runtime'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import { PanelLayoutDataProvider } from '../../../../../providers'; +import { useSortableLayout } from '../../../hooks'; +import './split-layout-container-item.scss'; + +// 分割容器子项 +export default defineComponent({ + name: 'IBizSplitLayoutContainerItem', + components: { + draggable, + }, + props: { + context: { type: Object as PropType, required: true }, + params: { type: Object as PropType, default: () => ({}) }, + parent: { + type: Object as PropType>, + }, + data: { + type: Object as PropType>, + required: true, + }, + brother: { + type: Object as PropType[]>, + required: true, + }, + }, + setup(props, ctx) { + const ns = useNamespace('split-layout-container-item'); + + const { children, sortableOptions, sortableGroupOptions, deleteChild } = + useSortableLayout(props, ctx); + + return { + ns, + children, + sortableOptions, + sortableGroupOptions, + deleteChild, + }; + }, + render() { + return ( +
+ + {{ + item: ({ + element, + }: { + element: PanelLayoutDataProvider; + index: number; + }) => { + return ( + { + this.deleteChild(element); + }} + > + ); + }, + }} + +
+ ); + }, +}); diff --git a/packages/view-design/src/components/panel-item-widgets/widgets/split-layout-container/split-layout-container.scss b/packages/view-design/src/components/panel-item-widgets/widgets/split-layout-container/split-layout-container.scss new file mode 100644 index 00000000..6c5fc3bd --- /dev/null +++ b/packages/view-design/src/components/panel-item-widgets/widgets/split-layout-container/split-layout-container.scss @@ -0,0 +1,130 @@ +/* stylelint-disable rule-empty-line-before */ +/* stylelint-disable no-descending-specificity */ +/* stylelint-disable selector-class-pattern */ +@include b(split-layout-container) { + --min-height: 100px; + + min-height: var(--min-height); +} + +@include b(split-layout-container-header) { + height: 20px; + font-size: 12px; + text-align: right; + border-bottom: 1px dashed var(--container-border-color); +} + +@include b(split-layout-container-content) { + display: flex; + min-height: calc(var(--min-height) - 20px); + + @include m(column) { + flex-direction: column; + } +} + +@include b(split-layout-container-trigger-con) { + display: flex; + align-items: center; + justify-content: center; + margin: 2px; + font-size: 12px; + border: 1px solid #d9d9d9; + border-radius: 2px; + + .el-input__wrapper { + padding: 1px 2px; + } + + .el-input__inner { + text-align: center; + } + + .el-radio-button { + --el-font-size-base: 12px; + --el-radio-button-checked-bg-color: #ffe9c0; + --el-radio-button-checked-text-color: #c0c4cc; + --el-radio-button-checked-border-color: #ffa500; + } + + @include m(row) { + flex-direction: row; + padding: 8px 0; + + .el-input { + width: 40px; + margin-left: 3px; + } + + .el-radio-group { + flex-direction: row; + margin-left: 4px; + + .el-radio-button__inner { + padding-top: 9px; + padding-bottom: 9px; + } + + .el-radio-button__original-radio:checked + .el-radio-button__inner { + color: var(--el-radio-button-checked-text-color); + background-color: var(--el-radio-button-checked-bg-color); + border-color: var(--el-radio-button-checked-border-color); + border-bottom: var(--el-border); + border-bottom-color: var(--el-radio-button-checked-border-color); + } + } + } + + @include m(column) { + flex-direction: column; + padding: 4px 8px; + + .el-input { + width: 45px; + margin-top: 3px; + } + + .el-radio-group { + flex-direction: column; + margin-top: 4px; + + .el-radio-button:first-child { + .el-radio-button__inner { + width: 45px; + border-right: var(--el-border); + border-radius: var(--el-border-radius-base) + var(--el-border-radius-base) 0 0; + box-shadow: none; + } + .el-radio-button__original-radio:checked + .el-radio-button__inner { + color: var(--el-radio-button-checked-text-color); + background-color: var(--el-radio-button-checked-bg-color); + border-color: var(--el-radio-button-checked-border-color); + border-bottom: var(--el-border); + border-bottom-color: var(--el-radio-button-checked-border-color); + } + } + + .el-radio-button:last-child { + .el-radio-button__inner { + width: 45px; + border-left: var(--el-border); + border-radius: 0 0 var(--el-border-radius-base) + var(--el-border-radius-base); + box-shadow: none; + } + .el-radio-button__original-radio:checked + .el-radio-button__inner { + color: var(--el-radio-button-checked-text-color); + background-color: var(--el-radio-button-checked-bg-color); + border-color: var(--el-radio-button-checked-border-color); + } + } + } + } +} + +@include b(split-layout-container-trigger-con-text) { + font-size: 14px; + line-height: 19px; + color: #b6b6b4; +} diff --git a/packages/view-design/src/components/panel-item-widgets/widgets/split-layout-container/split-layout-container.tsx b/packages/view-design/src/components/panel-item-widgets/widgets/split-layout-container/split-layout-container.tsx new file mode 100644 index 00000000..79fba3e9 --- /dev/null +++ b/packages/view-design/src/components/panel-item-widgets/widgets/split-layout-container/split-layout-container.tsx @@ -0,0 +1,186 @@ +import { PropType, computed, defineComponent, ref, watch } from 'vue'; +import { useNamespace } from '@ibiz-template/vue3-util'; +import { AppDataEntity } from '@ibiz-template/runtime'; +import { + PanelContentProvider, + PanelLayoutDataProvider, +} from '../../../../providers'; +import { useLayoutItem, useLayoutItemContainer } from '../../hooks'; +import './split-layout-container.scss'; + +// 分割容器 +export default defineComponent({ + name: 'IBizSplitLayoutContainer', + props: { + context: { type: Object as PropType, required: true }, + params: { type: Object as PropType, default: () => ({}) }, + parent: { + type: Object as PropType>, + }, + data: { + type: Object as PropType>, + required: true, + }, + provider: { + type: Object as PropType, + required: true, + }, + }, + setup(props, ctx) { + const ns = useNamespace('split-layout-container'); + + // 分割模式 + const splitMode = computed(() => { + return props.data.predefinedtype === 'CONTAINER_H_SPLIT' + ? 'horizontal' + : 'vertical'; + }); + + // 分割值 + const splitValue = ref(''); + + // 分割值单位 + const selectValue = ref('px'); + + // 分割值单位选项 + const selectOption = [ + { + value: 'px', + label: 'PX', + }, + { + value: '%', + label: 'PERCENTAGE', + }, + ]; + + // 分割值单位映射 + const selectLabelMap = new Map( + selectOption.map(item => [item.value, item.label]), + ); + + // 分割样式 + const splitStyle = ref(''); + + const { active } = useLayoutItemContainer(props, ctx); + + const { children } = useLayoutItem(props, ctx); + + // 计算样式 + const getStyle = () => { + const label = selectLabelMap.get(selectValue.value); + if (splitMode.value === 'horizontal') { + if (splitValue.value) { + if (label === 'PX') { + splitStyle.value = `width:${splitValue.value}px`; + } else { + splitStyle.value = `width:${splitValue.value}%`; + } + } + } else if (splitValue.value) { + if (label === 'PX') { + splitStyle.value = `height:${splitValue.value}px`; + } else { + splitStyle.value = `height:${splitValue.value}%`; + } + } + }; + + watch( + () => children.value, + () => { + if (children.value.length === 0) { + return; + } + if (splitMode.value === 'horizontal') { + splitValue.value = String( + children.value[0]?.width ? children.value[0].width : '', + ); + const widthValue = children.value[0]?.widthMode; + if (widthValue) { + selectValue.value = widthValue === 'PX' ? 'px' : '%'; + } + } else { + splitValue.value = String( + children.value[0]?.height ? children.value[0].height : '', + ); + const heightValue = children.value[0]?.heightMode; + if (heightValue) { + selectValue.value = heightValue === 'PX' ? 'px' : '%'; + } + } + getStyle(); + }, + ); + + return { + ns, + splitMode, + splitStyle, + active, + splitValue, + selectValue, + selectOption, + children, + }; + }, + render() { + return ( +
+
{this.data.label}
+
+ {this.children[0] && ( + + )} +
+ 比例: + + + {this.selectOption.map(item => { + return ; + })} + +
+ {this.children[1] && ( + + )} +
+
+ ); + }, +}); diff --git a/packages/view-design/src/providers/util/create-provider/create-provider.ts b/packages/view-design/src/providers/util/create-provider/create-provider.ts index ba0e2395..e44a71d8 100644 --- a/packages/view-design/src/providers/util/create-provider/create-provider.ts +++ b/packages/view-design/src/providers/util/create-provider/create-provider.ts @@ -31,7 +31,7 @@ export function createProvider( model, type, panelDesignMetaData, - 'scroll-container', + 'IBizPanelScrollContainer', ); case 'CONTAINER_GRID': return new PanelContainerProvider( @@ -46,7 +46,7 @@ export function createProvider( model, type, panelDesignMetaData, - 'split-layout-container', + 'IBizSplitLayoutContainer', ); case 'TOOLBAR': case 'SEARCHFORM': -- Gitee