fix(editor): 修复slide 全部拖出来再关闭回去时不展示slide操作栏的问题

This commit is contained in:
moonszhang 2023-11-16 20:20:15 +08:00 committed by roymondchen
parent fded26251f
commit c80ea829ac
2 changed files with 24 additions and 6 deletions

View File

@ -1,5 +1,5 @@
<template> <template>
<div class="m-editor-sidebar" v-if="data.type === 'tabs' && data.items.length" v-show="!isHideSlideBar"> <div class="m-editor-sidebar" v-if="data.type === 'tabs' && data.items.length">
<div class="m-editor-sidebar-header"> <div class="m-editor-sidebar-header">
<div <div
class="m-editor-sidebar-header-item" class="m-editor-sidebar-header-item"
@ -114,8 +114,8 @@
<div class="m-editor-float-box-body"> <div class="m-editor-float-box-body">
<component <component
v-if="config && floatBoxStates?.get(config.$key)?.status" v-if="config && floatBoxStates?.get(config.$key)?.status"
:is="config.component" :is="config.boxComponentConfig?.component || config.component"
v-bind="{ ...config.props, slideType: 'box' }" v-bind="config.boxComponentConfig?.props || config.props || {}"
v-on="config?.listeners || {}" v-on="config?.listeners || {}"
/> />
</div> </div>
@ -193,6 +193,11 @@ const getItemConfig = (data: SideItem): SideComponent => {
text: '代码编辑', text: '代码编辑',
component: CodeBlockListPanel, component: CodeBlockListPanel,
slots: {}, slots: {},
boxComponentConfig: {
props: {
slideType: 'box',
},
},
}, },
'data-source': { 'data-source': {
$key: 'data-source', $key: 'data-source',
@ -201,6 +206,11 @@ const getItemConfig = (data: SideItem): SideComponent => {
text: '数据源', text: '数据源',
component: DataSourceListPanel, component: DataSourceListPanel,
slots: {}, slots: {},
boxComponentConfig: {
props: {
slideType: 'box',
},
},
}, },
}; };
@ -217,20 +227,20 @@ watch(
); );
const slideKeys = computed(() => sideBarItems.value.map((sideBarItem) => sideBarItem.$key)); const slideKeys = computed(() => sideBarItems.value.map((sideBarItem) => sideBarItem.$key));
const isHideSlideBar = computed(() => services?.uiService.get('hideSlideBar'));
const { showFloatBox, closeFloatBox, dragstartHandler, dragendHandler, floatBoxStates, floatBox, showingBoxKeys } = const { showFloatBox, closeFloatBox, dragstartHandler, dragendHandler, floatBoxStates, floatBox, showingBoxKeys } =
useFloatBox(slideKeys); useFloatBox(slideKeys);
watch( watch(
() => showingBoxKeys.value, () => showingBoxKeys.value.length,
() => { () => {
const isActiveTabShow = showingBoxKeys.value.some( const isActiveTabShow = showingBoxKeys.value.some(
(key) => activeTabName.value === sideBarItems.value.find((v) => v.$key === key)?.text, (key) => activeTabName.value === sideBarItems.value.find((v) => v.$key === key)?.text,
); );
if (!isActiveTabShow) return; if (!isActiveTabShow && activeTabName.value) return;
const nextSlideBarItem = sideBarItems.value.find((sideBarItem) => !showingBoxKeys.value.includes(sideBarItem.$key)); const nextSlideBarItem = sideBarItems.value.find((sideBarItem) => !showingBoxKeys.value.includes(sideBarItem.$key));
if (!nextSlideBarItem) { if (!nextSlideBarItem) {
activeTabName.value = '';
services?.uiService.set('hideSlideBar', true); services?.uiService.set('hideSlideBar', true);
return; return;
} }

View File

@ -334,6 +334,14 @@ export interface SideComponent extends MenuComponent {
icon: Component<{}, {}, any>; icon: Component<{}, {}, any>;
/** slide 唯一标识 key */ /** slide 唯一标识 key */
$key: string; $key: string;
/** 组件扩展参数 */
boxComponentConfig?: {
/** Vue3组件 */
component?: any;
/** 传入组件的props对象 */
props?: Record<string, any>;
};
} }
/** /**