修复Panel组件:替换图标为内联SVG以确保正确显示
This commit is contained in:
@@ -181,15 +181,21 @@ export default defineComponent({
|
|||||||
<span class="text-xs">{{ panel.title }}</span>
|
<span class="text-xs">{{ panel.title }}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex items-center gap-0.5">
|
<div class="flex items-center gap-0.5">
|
||||||
|
<!-- 折叠按钮 -->
|
||||||
<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="handleToggleCollapse"
|
@click.stop="handleToggleCollapse"
|
||||||
aria-label="折叠/展开"
|
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>
|
||||||
|
|
||||||
|
<!-- 最大化按钮 -->
|
||||||
<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"
|
@click.stop="handleMaximize"
|
||||||
aria-label="最大化"
|
aria-label="最大化"
|
||||||
>
|
>
|
||||||
@@ -200,12 +206,18 @@ export default defineComponent({
|
|||||||
<rect x="1" y="3" width="8.5" height="6.5" fill="#435d9c" />
|
<rect x="1" y="3" width="8.5" height="6.5" fill="#435d9c" />
|
||||||
</svg>
|
</svg>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
|
<!-- 关闭按钮 -->
|
||||||
<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"
|
@click.stop="handleClose"
|
||||||
aria-label="关闭"
|
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>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -221,12 +233,22 @@ export default defineComponent({
|
|||||||
@click.stop="handleToggleToolbar"
|
@click.stop="handleToggleToolbar"
|
||||||
aria-label="展开工具栏"
|
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>
|
</button>
|
||||||
</div>
|
</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>
|
<slot name="content"></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user