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-07 14:44:07 +08:00
parent a6026f7179
commit 145b82ecf9
1 changed files with 59 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -5,60 +5,67 @@
:WindowState="windowState" :WindowState="windowState"
:showTitleBar="false" :showTitleBar="false"
title="主区域" title="主区域"
:style="{ position: 'relative', zIndex: 1 }" :style="{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', zIndex: 1 }"
> >
<!-- 浮动区域列表 --> </Area>
<Area <!-- 浮动区域列表 -->
v-for="area in floatingAreas" <Area
:key="area.id" v-for="area in floatingAreas"
:id="area.id" :key="area.id"
:title="area.title" :id="area.id"
v-model:WindowState="area.WindowState" :title="area.title"
:showTitleBar="true" v-model:WindowState="area.WindowState"
:width="area.width" :showTitleBar="true"
:height="area.height" :width="area.width"
:left="area.WindowState !== '最大化' ? area.x : undefined" :height="area.height"
:top="area.WindowState !== '最大化' ? area.y : undefined" :left="area.WindowState !== '最大化' ? area.x : undefined"
:style="area.WindowState !== '最大化' ? { :top="area.WindowState !== '最大化' ? area.y : undefined"
position: 'absolute', :style="area.WindowState !== '最大化' ? {
zIndex: 10 position: 'absolute',
} : { zIndex: 10,
zIndex: 100 background: 'rgba(255, 255, 255, 1)',
}" border: '1px solid #4f72b3'
@close="onCloseFloatingArea(area.id)" } : {
@update:position="onUpdatePosition(area.id, $event)" position: 'absolute',
@panelMaximizeSync="onPanelMaximizeSync" top: 0,
left: 0,
width: '100%',
height: '100%',
zIndex: 100
}"
@close="onCloseFloatingArea(area.id)"
@update:position="onUpdatePosition(area.id, $event)"
@panelMaximizeSync="onPanelMaximizeSync"
>
<!-- 每个Area内渲染其包含的TabPages -->
<TabPage
v-for="tabPage in area.tabPages"
:key="tabPage.id"
:id="tabPage.id"
:title="tabPage.title"
:panels="tabPage.panels"
@tabDragStart="onTabDragStart(area.id, $event)"
@tabDragMove="onTabDragMove(area.id, $event)"
@tabDragEnd="onTabDragEnd"
> >
<!-- 每个Area内渲染其包含的TabPages --> <!-- 在TabPage内渲染其包含的Panels -->
<TabPage <Panel
v-for="tabPage in area.tabPages" v-for="panel in tabPage.panels"
:key="tabPage.id" :key="panel.id"
:id="tabPage.id" :id="panel.id"
:title="tabPage.title" :title="panel.title"
:panels="tabPage.panels" :collapsed="panel.collapsed"
@tabDragStart="onTabDragStart(area.id, $event)" :toolbarExpanded="panel.toolbarExpanded"
@tabDragMove="onTabDragMove(area.id, $event)" :maximized="panel.maximized"
@tabDragEnd="onTabDragEnd" @toggleCollapse="onToggleCollapse"
> @maximize="onMaximize"
<!-- 在TabPage内渲染其包含的Panels --> @close="onClosePanel(area.id, panel.id)"
<Panel @toggleToolbar="onToggleToolbar"
v-for="panel in tabPage.panels" @dragStart="onPanelDragStart(area.id, $event)"
:key="panel.id" @dragMove="onPanelDragMove(area.id, $event)"
:id="panel.id" @dragEnd="onPanelDragEnd"
:title="panel.title" />
:collapsed="panel.collapsed" </TabPage>
: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> </Area>
</div> </div>
</template> </template>