ZengQingming/JoyD
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改DockLayout.vue：将浮动区域列表移动到主区域的内容区内显示

Browse Source
This commit is contained in:
zqm
2025-11-05 16:40:27 +08:00
parent cad92346f9
commit b44d94a25e
1 changed files with 50 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
AutoRobot/Windows/Robot/Web/src/DockLayout/DockLayout.vue
View File

@@ -1,61 +1,61 @@
<template>
<div class="dock-layout" ref="dockLayoutRef">
<!-- 浮动区域列表 -->
<Area
v-for="area in floatingAreas"
:key="area.id"
:id="area.id"
:title="area.title"
v-model:WindowState="area.WindowState"
:showTitleBar="true"
:width="area.width"
:height="area.height"
:left="area.WindowState !== '最大化' ? area.x : undefined"
:top="area.WindowState !== '最大化' ? area.y : undefined"
:style="area.WindowState !== '最大化' ? {
position: 'absolute',
zIndex: 10
} : {
zIndex: 100
}"
@close="onCloseFloatingArea(area.id)"
@update:position="onUpdatePosition(area.id, $event)"
>
<!-- 每个Area内渲染其包含的TabPages -->
<TabPage
v-for="tabPage in area.tabPages"
:key="tabPage.id"
:id="tabPage.id"
:title="tabPage.title"
:panels="tabPage.panels"
>
<!-- 在TabPage内渲染其包含的Panels -->
<Panel
v-for="panel in tabPage.panels"
:key="panel.id"
:id="panel.id"
:title="panel.title"
:collapsed="panel.collapsed"
:toolbarExpanded="panel.toolbarExpanded"
:maximized="panel.maximized"
@toggleCollapse="onToggleCollapse"
@maximize="onMaximize"
@close="onClosePanel(area.id, panel.id)"
@toggleToolbar="onToggleToolbar"
@dragStart="onPanelDragStart(area.id, $event)"
@dragMove="onPanelDragMove(area.id, $event)"
@dragEnd="onPanelDragEnd"
/>
</TabPage>
</Area>
<!-- 主区域 -->
<Area
:WindowState="windowState"
:showTitleBar="false"
title="主区域"
:style="{ position: 'relative', zIndex: 1 }"
/>
>
<!-- 浮动区域列表 -->
<Area
v-for="area in floatingAreas"
:key="area.id"
:id="area.id"
:title="area.title"
v-model:WindowState="area.WindowState"
:showTitleBar="true"
:width="area.width"
:height="area.height"
:left="area.WindowState !== '最大化' ? area.x : undefined"
:top="area.WindowState !== '最大化' ? area.y : undefined"
:style="area.WindowState !== '最大化' ? {
position: 'absolute',
zIndex: 10
} : {
zIndex: 100
}"
@close="onCloseFloatingArea(area.id)"
@update:position="onUpdatePosition(area.id, $event)"
>
<!-- 每个Area内渲染其包含的TabPages -->
<TabPage
v-for="tabPage in area.tabPages"
:key="tabPage.id"
:id="tabPage.id"
:title="tabPage.title"
:panels="tabPage.panels"
>
<!-- 在TabPage内渲染其包含的Panels -->
<Panel
v-for="panel in tabPage.panels"
:key="panel.id"
:id="panel.id"
:title="panel.title"
:collapsed="panel.collapsed"
:toolbarExpanded="panel.toolbarExpanded"
:maximized="panel.maximized"
@toggleCollapse="onToggleCollapse"
@maximize="onMaximize"
@close="onClosePanel(area.id, panel.id)"
@toggleToolbar="onToggleToolbar"
@dragStart="onPanelDragStart(area.id, $event)"
@dragMove="onPanelDragMove(area.id, $event)"
@dragEnd="onPanelDragEnd"
/>
</TabPage>
</Area>
</Area>
</div>
</template>