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

抽取浮动窗口为独立Vue3组件Panel.js并更新DockLayoutTest.vue引用

Browse Source
This commit is contained in:
zqm
2025-10-30 21:03:58 +08:00
parent c832e1fbbd
commit 0d0d5f835d
2 changed files with 227 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
AutoRobot/Windows/Robot/Web/src/views/DockLayoutTest.vue
View File

@@ -44,56 +44,31 @@
<!-- 预留主区域（暂不放面板） -->
<div ref="panelHost" class="flex-1 w-full h-[calc(100%-4rem)] relative bg-gray-100">
<!-- 浮动面板渲染区 -->
<div
<!-- 浮动面板渲染区 - 使用Panel组件 -->
<Panel
v-for="panel in floatingPanels"
:key="panel.id"
class="absolute bg-white shadow rounded border overflow-hidden"
:style="{ top: panel.y + 'px', left: panel.x + 'px', width: panel.width + 'px', height: panel.height + 'px' }"
:panel="panel"
:hostRef="panelHost"
@close="closePanel"
@toggleCollapse="toggleCollapse"
@toggleToolbar="toggleToolbarExpand"
@maximize="maximizePanel"
>
<div class="flex flex-col h-full">
<!-- 标题栏：小三角移到右侧，压缩高度与间距 -->
<div class="h-6 bg-[#435d9c] text-white px-2 flex items-center justify-between select-none">
<div class="flex items-center">
<span class="text-xs">{{ panel.title }}</span>
</div>
<div class="flex items-center gap-0.5">
<button class="p-[2px] rounded hover:opacity-100 opacity-80" @click="toggleCollapse(panel.id)" aria-label="折叠/展开">
<span class="icon-triangle-down"></span>
</button>
<button class="p-[2px] rounded hover:opacity-100 opacity-80" @click="maximizePanel(panel.id)" aria-label="最大化">
<svg class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
<!-- 外框与底色（仅1px边框） -->
<rect x="0.5" y="0.5" width="10" height="10" fill="#cbd6ff" stroke="#8ea3d8" stroke-width="1" />
<!-- 两行填充：上行1px浅蓝，下行标题栏色 -->
<rect x="1" y="3" width="8.5" height="6.5" fill="#435d9c" />
</svg>
</button>
<button class="p-[2px] rounded hover:opacity-100 opacity-80" @click="closePanel(panel.id)" aria-label="关闭">
<span class="icon-x"></span>
</button>
</div>
<template #content>
<!-- 面板内容区域 -->
<div class="p-4">
<div class="text-center text-gray-500 text-sm">面板内容区域 - {{ panel.id }}</div>
</div>
<!-- 工具栏：位于标题栏下方，右侧扩展钮 -->
<div class="h-6 bg-[#d5e2f6] text-[#2c3e7a] px-2 flex items-center justify-between border-b border-[#c7d2ea]">
<div class="flex items-center gap-2">
<span class="text-xs">工具栏</span>
<button v-if="panel.toolbarExpanded" class="px-2 py-0.5 text-xs bg-white/60 rounded hover:bg-white">示例按钮</button>
</div>
<button class="px-2 py-0.5 text-xs rounded hover:bg-white/40" @click="toggleToolbarExpand(panel.id)" aria-label="展开工具栏">
<i class="fa-solid" :class="panel.toolbarExpanded ? 'fa-angles-left' : 'fa-angles-right'"></i>
</button>
</div>
<!-- 内容区：可折叠 -->
<div class="bg-[#f5f7fb] flex-1" v-show="!panel.collapsed"></div>
</div>
</div>
</template>
</Panel>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import Panel from '../DockLayout/Panel.js';
// 顶部控制栏按钮的引用
const layoutFileInput = ref(null);
@@ -211,8 +186,7 @@ function toggleToolbarExpand(id) {
}
.icon-square { /* 最大化图标：外层浅蓝方块 + 内层细边框 */
position: relative;
width: 11px;
height: 11px;
width: 11px; height: 11px;
background: linear-gradient(180deg, #cbd6ff 0%, #b9c8ff 100%);
border: 1px solid #b8c6ff;
box-sizing: border-box;