- 权限一览:应用层默认折叠,新增「全部展开」开关(事件不冒泡到标题行),MyTree 透传 expand-all - 应用模块树卡片:分类名与数量让位(超大收缩系数 + min-width:0),「子组继承」加 tooltip 与弹性空隙, 「全部展开」加标签样式与竖线分隔,避免整组被挤出可视区或被读成同一个开关 - 下线测试推送:删除 /push-test 路由、菜单项与 PushTest.vue
This commit is contained in:
@@ -62,7 +62,6 @@ export function getMenuList(userRole?: UserRoleEnum): Promise<IModule[]> {
|
|||||||
{ id: 53, modId: 1111, name: "操作日志", page: "/oplog", roles: [UserRoleEnum.SuperAdmin] },
|
{ id: 53, modId: 1111, name: "操作日志", page: "/oplog", roles: [UserRoleEnum.SuperAdmin] },
|
||||||
{ id: 56, modId: 1114, name: "开放接口日志", page: "/oapilog", roles: [UserRoleEnum.SuperAdmin] },
|
{ id: 56, modId: 1114, name: "开放接口日志", page: "/oapilog", roles: [UserRoleEnum.SuperAdmin] },
|
||||||
{ id: 54, modId: 1112, name: "推送日志", page: "/push-log", roles: [UserRoleEnum.SuperAdmin] },
|
{ id: 54, modId: 1112, name: "推送日志", page: "/push-log", roles: [UserRoleEnum.SuperAdmin] },
|
||||||
{ id: 55, modId: 1113, name: "测试推送", page: "/push-test", roles: [UserRoleEnum.SuperAdmin] },
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|||||||
@@ -12,7 +12,6 @@ import PermissionView from "@/views/PermissionView.vue";
|
|||||||
import OperationLogList from "@/views/oplog/OperationLogList.vue";
|
import OperationLogList from "@/views/oplog/OperationLogList.vue";
|
||||||
import OapiLogList from "@/views/oapilog/OapiLogList.vue";
|
import OapiLogList from "@/views/oapilog/OapiLogList.vue";
|
||||||
import PushLog from "@/views/push/PushLog.vue";
|
import PushLog from "@/views/push/PushLog.vue";
|
||||||
import PushTest from "@/views/push/PushTest.vue";
|
|
||||||
import NoAuth from "@/views/NoAuth.vue";
|
import NoAuth from "@/views/NoAuth.vue";
|
||||||
|
|
||||||
// 管理端四级访问控制:meta.roles 为空/未声明 = 登录即可访问
|
// 管理端四级访问控制:meta.roles 为空/未声明 = 登录即可访问
|
||||||
@@ -112,12 +111,6 @@ const routes: RouteRecordRaw[] = [
|
|||||||
component: PushLog,
|
component: PushLog,
|
||||||
meta: { title: "推送日志", icon: "icon-list", modId: 1112, keepAlive: true, roles: [UserRoleEnum.SuperAdmin] },
|
meta: { title: "推送日志", icon: "icon-list", modId: 1112, keepAlive: true, roles: [UserRoleEnum.SuperAdmin] },
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: "/push-test",
|
|
||||||
name: "PushTest",
|
|
||||||
component: PushTest,
|
|
||||||
meta: { title: "测试推送", icon: "icon-list", modId: 1113, roles: [UserRoleEnum.SuperAdmin] },
|
|
||||||
},
|
|
||||||
// ===== 操作日志 =====
|
// ===== 操作日志 =====
|
||||||
{
|
{
|
||||||
path: "/oplog",
|
path: "/oplog",
|
||||||
|
|||||||
+26
-4
@@ -39,10 +39,11 @@
|
|||||||
:type="collapsedMap[String(item.cat.id)] ? 'ios-arrow-forward' : 'ios-arrow-down'" />
|
:type="collapsedMap[String(item.cat.id)] ? 'ios-arrow-forward' : 'ios-arrow-down'" />
|
||||||
<span class="cat-name" :title="item.cat.name">{{ item.cat.name }}</span>
|
<span class="cat-name" :title="item.cat.name">{{ item.cat.name }}</span>
|
||||||
<span class="cat-count">{{ item.treeData.length }}个应用</span>
|
<span class="cat-count">{{ item.treeData.length }}个应用</span>
|
||||||
<span class="inherit-cap">子组继承</span>
|
<span class="cat-spacer"></span>
|
||||||
|
<span class="inherit-cap" title="勾选后子组继承本次授权,不勾选仅本组生效">子组继承</span>
|
||||||
<!-- 开关外层 @click.stop:否则点击会冒泡到卡片头部触发折叠 -->
|
<!-- 开关外层 @click.stop:否则点击会冒泡到卡片头部触发折叠 -->
|
||||||
<span class="expand-all" @click.stop>
|
<span class="expand-all" @click.stop>
|
||||||
<span class="expand-all-label">全部展开</span>
|
<span class="expand-all-label">全部展开:</span>
|
||||||
<Switch size="small" v-model="expandAllMap[String(item.cat.id)]" />
|
<Switch size="small" v-model="expandAllMap[String(item.cat.id)]" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -662,6 +663,10 @@ onMounted(async () => {
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
|
/* 卡片是 3 列布局,列宽有限:用超大的收缩系数让分类名先让位(省略号),
|
||||||
|
保证右侧「子组继承 / 全部展开」整组不被挤出可视区 */
|
||||||
|
flex: 0 999 auto;
|
||||||
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -671,15 +676,28 @@ onMounted(async () => {
|
|||||||
color: #999;
|
color: #999;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
flex: 1;
|
/* 次优先收缩:空间实在不够时先截断数量文案,也不挤走开关 */
|
||||||
|
flex: 0 10 auto;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 弹性空隙:把右侧「子组继承 | 全部展开」整组推到卡片头右端,与分类名/数量拉开距离 */
|
||||||
|
.cat-spacer {
|
||||||
|
flex: 1 1 0;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.inherit-cap {
|
.inherit-cap {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
color: #999;
|
color: #999;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
margin-right: 6px;
|
padding: 0 6px;
|
||||||
|
line-height: 18px;
|
||||||
|
background: #f0f2f5;
|
||||||
|
border-radius: 2px;
|
||||||
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
.expand-all {
|
.expand-all {
|
||||||
@@ -687,6 +705,10 @@ onMounted(async () => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
|
/* 与左侧「子组继承」提示以竖线分隔:否则两个标签相邻会被读成同一个开关的说明 */
|
||||||
|
margin-left: 10px;
|
||||||
|
padding-left: 10px;
|
||||||
|
border-left: 1px solid #e8eaec;
|
||||||
}
|
}
|
||||||
|
|
||||||
.expand-all-label {
|
.expand-all-label {
|
||||||
|
|||||||
@@ -62,11 +62,19 @@
|
|||||||
</div>
|
</div>
|
||||||
<!-- 右列:已授权应用(原有);支持三种视图:用户聚合 / 部门树节点 / 角色树节点 -->
|
<!-- 右列:已授权应用(原有);支持三种视图:用户聚合 / 部门树节点 / 角色树节点 -->
|
||||||
<div class="perm-main">
|
<div class="perm-main">
|
||||||
<div class="side-title">{{ permMainTitle }}</div>
|
<div class="side-title">
|
||||||
|
<span class="side-title-text">{{ permMainTitle }}</span>
|
||||||
|
<!-- 应用层默认折叠,这里提供一键展开/收起(事件不冒泡到标题行) -->
|
||||||
|
<span class="expand-all" @click.stop>
|
||||||
|
<span class="expand-all-label">全部展开:</span>
|
||||||
|
<Switch size="small" v-model="permExpandAll" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
<div class="side-body">
|
<div class="side-body">
|
||||||
<div v-if="permLoading" class="loading-tip">权限加载中...</div>
|
<div v-if="permLoading" class="loading-tip">权限加载中...</div>
|
||||||
<div v-else-if="permissionTree.length === 0" class="empty-tip">{{ permEmptyTip }}</div>
|
<div v-else-if="permissionTree.length === 0" class="empty-tip">{{ permEmptyTip }}</div>
|
||||||
<MyTree v-else ref="permTreeRef" :treeData="permissionTree" :setting="treeSetting" />
|
<MyTree v-else ref="permTreeRef" :treeData="permissionTree" :setting="treeSetting"
|
||||||
|
:expand-all="permExpandAll" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -156,6 +164,9 @@ const permScope = ref<{ type: "user" | "group" | "role"; id?: number; label: str
|
|||||||
label: "",
|
label: "",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// 已授权应用面板的「全部展开」开关(默认关闭):应用层默认折叠,需按需展开模块
|
||||||
|
const permExpandAll = ref(false);
|
||||||
|
|
||||||
const permMainTitle = computed(() => {
|
const permMainTitle = computed(() => {
|
||||||
if (permScope.value.type === "group") return `已授权应用(部门:${permScope.value.label})`;
|
if (permScope.value.type === "group") return `已授权应用(部门:${permScope.value.label})`;
|
||||||
if (permScope.value.type === "role") return `已授权应用(角色:${permScope.value.label})`;
|
if (permScope.value.type === "role") return `已授权应用(角色:${permScope.value.label})`;
|
||||||
@@ -571,6 +582,30 @@ function formatModules(modules: ModuleNode[]): any[] {
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
background: #fafafa;
|
background: #fafafa;
|
||||||
border-bottom: 1px solid #f0f0f0;
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.side-title-text {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-all {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
gap: 4px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.expand-all-label {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
.side-body {
|
.side-body {
|
||||||
|
|||||||
@@ -26,9 +26,10 @@
|
|||||||
:type="collapsedMap[String(item.cat.id)] ? 'ios-arrow-forward' : 'ios-arrow-down'" />
|
:type="collapsedMap[String(item.cat.id)] ? 'ios-arrow-forward' : 'ios-arrow-down'" />
|
||||||
<span class="cat-name" :title="item.cat.name">{{ item.cat.name }}</span>
|
<span class="cat-name" :title="item.cat.name">{{ item.cat.name }}</span>
|
||||||
<span class="cat-count">{{ item.treeData.length }}个应用</span>
|
<span class="cat-count">{{ item.treeData.length }}个应用</span>
|
||||||
|
<span class="cat-spacer"></span>
|
||||||
<!-- 开关外层 @click.stop:否则点击会冒泡到卡片头部触发折叠 -->
|
<!-- 开关外层 @click.stop:否则点击会冒泡到卡片头部触发折叠 -->
|
||||||
<span class="expand-all" @click.stop>
|
<span class="expand-all" @click.stop>
|
||||||
<span class="expand-all-label">全部展开</span>
|
<span class="expand-all-label">全部展开:</span>
|
||||||
<Switch size="small" v-model="expandAllMap[String(item.cat.id)]" />
|
<Switch size="small" v-model="expandAllMap[String(item.cat.id)]" />
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -393,6 +394,9 @@ watch(
|
|||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
color: #333;
|
color: #333;
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
|
/* 列宽有限:分类名优先让位(省略号),保证右侧「全部展开」不被挤出可视区 */
|
||||||
|
flex: 0 999 auto;
|
||||||
|
min-width: 0;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@@ -402,10 +406,18 @@ watch(
|
|||||||
color: #999;
|
color: #999;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
flex: 1;
|
flex: 0 10 auto;
|
||||||
|
min-width: 0;
|
||||||
|
overflow: hidden;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 弹性空隙:把「全部展开」整组推到卡片头右端 */
|
||||||
|
.cat-spacer {
|
||||||
|
flex: 1 1 0;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.cat-card-body {
|
.cat-card-body {
|
||||||
padding: 6px 8px;
|
padding: 6px 8px;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user