feat(ui): 为可伸缩弹窗新增额外按钮插槽并调整可折叠面板边距

- 在 `StretchableModal` 头部新增名为 `extraButtons` 的插槽,用于放置附加控制组件
- 确保 `StretchableModal` 始终渲染底部插槽(footer slot),移除条件显示逻辑
- 调整 `CollapsiblePanel` 的下边距(margin-bottom),使其仅在非最后一个子元素时生效,从而消除末尾的冗余空间
- 为额外按钮区域添加悬停发光效果样式
This commit is contained in:
Zzc 2025-11-28 15:13:28 +08:00
parent 50dd4cf76b
commit 66b719695c
2 changed files with 21 additions and 2 deletions

View File

@ -160,7 +160,9 @@ function onAfterLeave(el) {
.collapsible-panel { .collapsible-panel {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-bottom: vh(17); &:not(:last-child) {
margin-bottom: vh(17);
}
border: 2px solid transparent; /* 防止 hover 时抖动 */ border: 2px solid transparent; /* 防止 hover 时抖动 */
&__header { &__header {

View File

@ -15,6 +15,9 @@
<div class="stretchable-modal__header"> <div class="stretchable-modal__header">
<slot name="header"> <slot name="header">
<h3 class="stretchable-modal__title">{{ title }}</h3> <h3 class="stretchable-modal__title">{{ title }}</h3>
<div class="stretchable-modal__extra">
<slot name="extraButtons"></slot>
</div>
</slot> </slot>
<button <button
v-if="showClose" v-if="showClose"
@ -36,7 +39,7 @@
</div> </div>
<!-- 底部大弹窗bottom切图.png --> <!-- 底部大弹窗bottom切图.png -->
<div v-if="$slots.footer" class="stretchable-modal__footer"> <div class="stretchable-modal__footer">
<slot name="footer"></slot> <slot name="footer"></slot>
</div> </div>
</div> </div>
@ -212,6 +215,20 @@ onUnmounted(() => {
margin: 0; margin: 0;
} }
&__extra {
position: absolute;
right: 125px;
top: 18px;
display: flex;
align-items: center;
justify-content: center;
&:hover {
// border: 2px solid rgba(255, 80, 80, 0.6);
box-shadow: 0 0 10px rgba(255, 80, 80, 0.6), 0 0 20px rgba(255, 0, 0, 0.4),
0 0 35px rgba(255, 0, 0, 0.25);
}
}
&__close { &__close {
position: absolute; position: absolute;
top: 34px; top: 34px;