在tabpage的标签为top时显示区域标题栏

This commit is contained in:
zqm
2026-01-15 09:09:21 +08:00
parent 89f9884df9
commit 8a2b07d36f
4 changed files with 42 additions and 9 deletions

View File

@@ -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) {

View File

@@ -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)
} }

View File

@@ -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:

View File

@@ -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%;"
/> />