修改左侧页标签的显示问题

This commit is contained in:
zqm
2026-01-08 16:08:57 +08:00
parent 83291baa0f
commit d458426b52
3 changed files with 7 additions and 26 deletions

View File

@@ -871,7 +871,7 @@ const addFloatingPanel = (panel) => {
// 使用children结构以兼容Render组件的渲染逻辑 // 使用children结构以兼容Render组件的渲染逻辑
children: { children: {
type: 'TabPage', type: 'TabPage',
tabPosition: 'bottom', tabPosition: 'left',
children: [ children: [
{ {
...safePanel, ...safePanel,

View File

@@ -5,18 +5,7 @@
v-bind="componentProps" v-bind="componentProps"
:style="combinedStyle" :style="combinedStyle"
> >
<!-- 统一处理children属性不区分组件类型只要有children就渲染 --> <!-- 移除递归渲染由各个组件自己处理children -->
<template v-if="config.children">
<!-- 统一处理children为数组或单个对象的情况 -->
<div v-for="child in Array.isArray(config.children) ? config.children : [config.children]" :key="child.id" style="width: 100%; height: 100%;">
<Render
:type="child.type"
:config="child"
:debug="debug"
:style="child.style"
/>
</div>
</template>
</component> </component>
</template> </template>

View File

@@ -191,16 +191,8 @@ const activeChild = computed(() => {
// 计算属性:动态调整标签页位置 // 计算属性:动态调整标签页位置
const adjustedTabPosition = computed(() => { const adjustedTabPosition = computed(() => {
// 检查是否有多个Panel // 直接返回配置的标签页位置,不进行额外转换
const childrenArray = Array.isArray(props.children) ? props.children : [props.children] // 确保所有位置都能正确处理多个Panel
const hasMultiplePanels = childrenArray.length > 1
// 如果有多个Panel且当前位置是top则改为bottom
if (hasMultiplePanels && props.tabPosition === 'top') {
return 'bottom'
}
// 其他情况保持原位置
return props.tabPosition return props.tabPosition
}) })
@@ -388,6 +380,7 @@ onUnmounted(() => {
/* 垂直标签栏样式 */ /* 垂直标签栏样式 */
.tab-header-vertical { .tab-header-vertical {
display: flex; display: flex;
flex-direction: column;
flex-wrap: nowrap; flex-wrap: nowrap;
width: 28px; width: 28px;
background: transparent; background: transparent;
@@ -397,7 +390,6 @@ onUnmounted(() => {
} }
.tab-header-right { .tab-header-right {
flex-direction: column;
padding-left: 0; padding-left: 0;
padding-right: 2px; padding-right: 2px;
} }
@@ -460,7 +452,7 @@ onUnmounted(() => {
/* 垂直标签项样式 */ /* 垂直标签项样式 */
.tab-item-vertical { .tab-item-vertical {
width: 26px; width: 26px;
height: 60px; height: 80px;
margin-top: 1px; margin-top: 1px;
background: linear-gradient(to right, var(--vs-blue-top), var(--vs-blue-bottom)); background: linear-gradient(to right, var(--vs-blue-top), var(--vs-blue-bottom));
border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px;
@@ -486,7 +478,7 @@ onUnmounted(() => {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin: 0 4px; margin: 0 6px;
writing-mode: vertical-rl; writing-mode: vertical-rl;
text-orientation: mixed; text-orientation: mixed;
} }