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

优化Panel组件渲染：简化图标结构、修复DOM渲染问题、将v-show改为v-if

Browse Source
This commit is contained in:
zqm
2025-10-30 21:19:33 +08:00
parent 886f4be951
commit cb0098757a
1 changed files with 35 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
AutoRobot/Windows/Robot/Web/src/DockLayout/Panel.js
View File

@@ -185,10 +185,7 @@ export default defineComponent({
@click.stop="handleToggleCollapse"
aria-label="折叠/展开"
>
<!-- 三角形图标 -->
<svg width="8" height="5" viewBox="0 0 8 5" fill="none">
<path d="M1 1.5L4 4L7 1.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<div class="icon-triangle-down"></div>
</button>
<!-- 最大化按钮 -->
@@ -197,12 +194,7 @@ export default defineComponent({
@click.stop="handleMaximize"
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>
<div class="icon-square"></div>
</button>
<!-- 关闭按钮 -->
@@ -211,11 +203,7 @@ export default defineComponent({
@click.stop="handleClose"
aria-label="关闭"
>
<!-- X图标 -->
<svg width="8" height="8" viewBox="0 0 8 8" fill="none">
<path d="M1 1L7 7" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
<path d="M7 1L1 7" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<div class="icon-x"></div>
</button>
</div>
</div>
@@ -231,25 +219,45 @@ export default defineComponent({
@click.stop="handleToggleToolbar"
aria-label="展开工具栏"
>
<!-- 替代Font Awesome图标的SVG -->
<svg v-if="panel.toolbarExpanded" width="8" height="8" viewBox="0 0 8 8" fill="none">
<path d="M6 4L2 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M2 4L4 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M2 4L4 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<svg v-else width="8" height="8" viewBox="0 0 8 8" fill="none">
<path d="M2 4L6 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6 4L4 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
<path d="M6 4L4 2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
</svg>
<span v-if="panel.toolbarExpanded" class="text-xs">-</span>
<span v-else class="text-xs">+</span>
</button>
</div>
<!-- 内容区 -->
<div class="bg-[#f5f7fb] flex-1 p-2" v-show="!panel.collapsed">
<div class="bg-[#f5f7fb] flex-1 p-2" v-if="!panel.collapsed">
<slot name="content"></slot>
</div>
</div>
</div>
<style scoped>
/* 向下小三角 */
.icon-triangle-down {
width: 0; height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid #cbd6ff;
}
/* 最大化图标 */
.icon-square {
position: relative;
width: 11px; height: 11px;
background: linear-gradient(180deg, #cbd6ff 0%, #b9c8ff 100%);
border: 1px solid #b8c6ff;
box-sizing: border-box;
}
/* X图标 */
.icon-x {
position: relative; width: 11px; height: 11px;
}
.icon-x::before, .icon-x::after {
content: ''; position: absolute; left: 5px; top: 0; width: 1px; height: 11px; background: #e6efff;
}
.icon-x::before { transform: rotate(45deg); }
.icon-x::after { transform: rotate(-45deg); }
</style>
`
});