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

完善Panel组件：添加maximized属性以支持最大化/还原图标切换，确保填充满父容器

Browse Source
This commit is contained in:
zqm
2025-11-04 15:45:10 +08:00
parent 5629018e55
commit 2e1b25c53a
1 changed files with 27 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.vue
View File

@@ -19,14 +19,25 @@
</button> </button>
<button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80"
@click="onMaximize" @click="onMaximize"
aria-label="最大化"> :aria-label="maximized ? '还原' : '最大化'">
<!-- 最大化图标：仅外框1px + 两行填充 --> <!-- 最大化图标 -->
<svg class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true"> <template v-if="!maximized">
<rect x="0.5" y="0.5" width="10" height="10" fill="#cbd6ff" stroke="#8ea3d8" stroke-width="1" /> <!-- 最大化图标：外框 + 内部线条 -->
<rect x="3" y="3" width="5" height="1" fill="#b8c6ff" /> <svg class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
<!-- 下行采用更宽填充以贴近示例图 --> <rect x="0.5" y="0.5" width="10" height="10" fill="#cbd6ff" stroke="#8ea3d8" stroke-width="1" />
<rect x="1" y="3" width="8.5" height="6.5" fill="#435d9c" /> <rect x="1" y="1" width="9" height="9" fill="none" stroke="#b8c6ff" stroke-width="1" />
</svg> </svg>
</template>
<!-- 还原图标 -->
<template v-else>
<!-- 还原图标：两个重叠的外框 -->
<svg class="icon-square-svg" width="11" height="11" viewBox="0 0 11 11" aria-hidden="true">
<!-- 第一个外框 -->
<rect x="0.5" y="2.5" width="6" height="6" fill="#cbd6ff" stroke="#8ea3d8" stroke-width="1" />
<!-- 第二个外框 -->
<rect x="3.5" y="0.5" width="6" height="6" fill="#cbd6ff" stroke="#8ea3d8" stroke-width="1" />
</svg>
</template>
</button> </button>
<button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80" <button class="button-icon p-[2px] rounded hover:opacity-100 opacity-80"
@click="onClose" @click="onClose"
@@ -95,6 +106,10 @@ const props = defineProps({
toolbarExpanded: { toolbarExpanded: {
type: Boolean, type: Boolean,
default: false default: false
},
maximized: {
type: Boolean,
default: false
} }
}); });
@@ -175,6 +190,10 @@ const onDragEnd = () => {
/* 面板基础样式 */ /* 面板基础样式 */
.panel { .panel {
border: 1px solid #c7d2ea; border: 1px solid #c7d2ea;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
} }
/* 图标样式优化 */ /* 图标样式优化 */