feat(device): 新增开发者模式指令及下拉菜单样式优化

新增推送开发者模式指令到设备的 API。

优化设备页面表格工具栏更多按钮的下拉菜单:
- 点击触发并支持点击菜单项后自动隐藏
- 移除触发按钮 hover 时的背景色
- 调整下拉菜单项的布局、间距与圆角样式
This commit is contained in:
TongTongStudio
2026-07-31 02:14:30 +08:00
parent bd348e7aeb
commit d698dd7395
5 changed files with 494 additions and 1 deletions

View File

@@ -160,11 +160,17 @@
<template v-else-if="col.templet === 'tool'">
<div class="flex items-center justify-center gap-x-2">
<template v-for="(btn, index) in tableToolbarBtn" :key="index">
<el-dropdown v-if="btn.children !== undefined && btn.children.length > 0">
<el-dropdown
v-if="btn.children !== undefined && btn.children.length > 0"
trigger="click"
:hide-on-click="true"
popper-class="more-dropdown-menu"
>
<el-button
v-if="btn.render === undefined || btn.render(scope.row)"
v-hasPerm="btn.perm ?? '*:*:*'"
v-bind="btn.attrs"
class="more-trigger-btn"
>
{{ btn.text }}
<el-icon class="el-icon--right"><arrow-down /></el-icon>
@@ -976,4 +982,40 @@ defineExpose({ fetchPageData, exportPageData, getFilterParams, getSelectionData,
margin-left: 0 !important;
}
}
/* 更多按钮:去掉 link 类型 hover 时的浅蓝背景层 */
.more-trigger-btn {
&:hover,
&:focus,
&:focus-visible {
background-color: transparent !important;
}
}
</style>
<!-- scoped下拉菜单通过 teleport 渲染到 body需用全局样式覆盖 -->
<style lang="scss">
.more-dropdown-menu {
.el-dropdown-menu {
gap: 2px;
padding: 6px;
}
.el-dropdown-menu__item {
display: flex;
gap: 8px;
align-items: center;
padding: 8px 16px;
line-height: 1.4;
border-radius: 6px;
& + .el-dropdown-menu__item {
margin-top: 2px;
}
.el-icon {
margin-right: 0;
}
}
}
</style>