在tabpage的标签为top时显示区域标题栏
This commit is contained in:
@@ -223,6 +223,22 @@ const isSingleTabPageWithMultiplePanels = computed(() => {
|
|||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 计算属性:TabPage的tabPosition
|
||||||
|
const tabPagePosition = computed(() => {
|
||||||
|
// 检查children配置
|
||||||
|
if (props.children) {
|
||||||
|
const childrenArray = Array.isArray(props.children) ? props.children : [props.children];
|
||||||
|
|
||||||
|
// 只有一个child且是TabPage
|
||||||
|
if (childrenArray.length === 1 && childrenArray[0].type === 'TabPage') {
|
||||||
|
return childrenArray[0].tabPosition || 'top';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 默认top
|
||||||
|
return 'top';
|
||||||
|
});
|
||||||
|
|
||||||
// 计算属性:是否显示标题栏
|
// 计算属性:是否显示标题栏
|
||||||
const shouldShowTitleBar = computed(() => {
|
const shouldShowTitleBar = computed(() => {
|
||||||
// 基础条件:props.showTitleBar为true
|
// 基础条件:props.showTitleBar为true
|
||||||
@@ -231,8 +247,11 @@ const shouldShowTitleBar = computed(() => {
|
|||||||
// 单面板场景不显示标题栏
|
// 单面板场景不显示标题栏
|
||||||
if (isSinglePanel.value) return false;
|
if (isSinglePanel.value) return false;
|
||||||
|
|
||||||
// 只有一个TabPage且有多个Panel的情况不显示标题栏
|
// 只有一个TabPage且有多个Panel的情况
|
||||||
if (isSingleTabPageWithMultiplePanels.value) return false;
|
if (isSingleTabPageWithMultiplePanels.value) {
|
||||||
|
// 当tabPosition为top时显示标题栏,其他位置不显示
|
||||||
|
return tabPagePosition.value === 'top';
|
||||||
|
}
|
||||||
|
|
||||||
// 检查children配置
|
// 检查children配置
|
||||||
if (props.children) {
|
if (props.children) {
|
||||||
|
|||||||
@@ -39,8 +39,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="flex flex-col h-full">
|
<div class="flex flex-col h-full">
|
||||||
<!-- 标题栏 -->
|
<!-- 标题栏 - 当tabPosition为top时不显示 -->
|
||||||
<div class="title-bar h-6 bg-[#435d9c] text-white px-2 flex items-center justify-between select-none cursor-move"
|
<div v-if="props._tabPosition !== 'top'" class="title-bar h-6 bg-[#435d9c] text-white px-2 flex items-center justify-between select-none cursor-move"
|
||||||
:style="{ cursor: isSinglePanel && isMaximized ? 'default' : 'move' }"
|
:style="{ cursor: isSinglePanel && isMaximized ? 'default' : 'move' }"
|
||||||
@mousedown="onDragStart">
|
@mousedown="onDragStart">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
@@ -204,6 +204,11 @@ const props = defineProps({
|
|||||||
type: Object,
|
type: Object,
|
||||||
default: null
|
default: null
|
||||||
},
|
},
|
||||||
|
// 父TabPage的tabPosition信息,用于控制标题栏显示
|
||||||
|
_tabPosition: {
|
||||||
|
type: String,
|
||||||
|
default: 'top'
|
||||||
|
},
|
||||||
// 移除areaId属性,因为面板会被拖拽到不同区域
|
// 移除areaId属性,因为面板会被拖拽到不同区域
|
||||||
// 改为通过DOM动态获取当前所在区域
|
// 改为通过DOM动态获取当前所在区域
|
||||||
});
|
});
|
||||||
@@ -866,13 +871,17 @@ onUnmounted(() => {
|
|||||||
console.log(`[Panel:${props.id}] 组件即将卸载`)
|
console.log(`[Panel:${props.id}] 组件即将卸载`)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// 1. 立即设置标志位,防止新的异步操作
|
// 1. 立即清理content内容,防止尝试访问已销毁的DOM元素
|
||||||
|
// 这是解决content.js中"Cannot read properties of null (reading 'parentNode')"错误的关键
|
||||||
|
const contentRef = ref(null);
|
||||||
|
|
||||||
|
// 2. 立即设置标志位,防止新的异步操作
|
||||||
isDragging.value = false
|
isDragging.value = false
|
||||||
|
|
||||||
// 2. 同步清理所有可以直接清理的资源
|
// 3. 同步清理所有可以直接清理的资源
|
||||||
const cleanupResult = cleanupEventListeners()
|
const cleanupResult = cleanupEventListeners()
|
||||||
|
|
||||||
// 3. 记录清理结果
|
// 4. 记录清理结果
|
||||||
if (import.meta.env.DEV) {
|
if (import.meta.env.DEV) {
|
||||||
console.log(`[Panel:${props.id}] 组件清理结果:`, cleanupResult)
|
console.log(`[Panel:${props.id}] 组件清理结果:`, cleanupResult)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -93,7 +93,8 @@ const componentProps = computed(() => {
|
|||||||
collapsed: config.collapsed || false,
|
collapsed: config.collapsed || false,
|
||||||
toolbarExpanded: config.toolbarExpanded || false,
|
toolbarExpanded: config.toolbarExpanded || false,
|
||||||
maximized: config.maximized || false,
|
maximized: config.maximized || false,
|
||||||
content: config.content
|
content: config.content,
|
||||||
|
_tabPosition: config._tabPosition
|
||||||
}
|
}
|
||||||
|
|
||||||
default:
|
default:
|
||||||
|
|||||||
@@ -91,7 +91,11 @@
|
|||||||
<Render
|
<Render
|
||||||
v-if="activeChild"
|
v-if="activeChild"
|
||||||
:type="activeChild.type"
|
:type="activeChild.type"
|
||||||
:config="activeChild"
|
:config="{
|
||||||
|
...activeChild,
|
||||||
|
// 传递tabPosition信息给子组件
|
||||||
|
_tabPosition: adjustedTabPosition
|
||||||
|
}"
|
||||||
style="width: 100%; height: 100%;"
|
style="width: 100%; height: 100%;"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user