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

修复Panel组件：替换图标为内联SVG以确保正确显示

Browse Source
This commit is contained in:
zqm
2025-10-30 21:13:52 +08:00
parent 05626e31ff
commit 035ccb8cf6
1 changed files with 29 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -181,15 +181,21 @@ export default defineComponent({
<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"
class="p-[2px] rounded hover:opacity-100 opacity-80 flex items-center justify-center w-5 h-5"
@click.stop="handleToggleCollapse"
aria-label="折叠/展开"
>
<span class="icon-triangle-down"></span>
<!-- 三角形图标 -->
<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>
</button>
<!-- 最大化按钮 -->
<button
class="p-[2px] rounded hover:opacity-100 opacity-80"
class="p-[2px] rounded hover:opacity-100 opacity-80 flex items-center justify-center w-5 h-5"
@click.stop="handleMaximize"
aria-label="最大化"
>
@@ -200,12 +206,18 @@ export default defineComponent({
<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"
class="p-[2px] rounded hover:opacity-100 opacity-80 flex items-center justify-center w-5 h-5"
@click.stop="handleClose"
aria-label="关闭"
>
<span class="icon-x"></span>
<!-- 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>
</button>
</div>
</div>
@@ -221,12 +233,22 @@ export default defineComponent({
@click.stop="handleToggleToolbar"
aria-label="展开工具栏"
>
<i class="fa-solid" :class="panel.toolbarExpanded ? 'fa-angles-left' : 'fa-angles-right'"></i>
<!-- 替代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>
</button>
</div>
<!-- 内容区 -->
<div class="bg-[#f5f7fb] flex-1" v-show="!panel.collapsed">
<div class="bg-[#f5f7fb] flex-1 p-2" v-show="!panel.collapsed">
<slot name="content"></slot>
</div>
</div>