feat(authz): 权限一览加「全部展开」开关与卡片布局加固；下线测试推送页

- 权限一览：应用层默认折叠，新增「全部展开」开关（事件不冒泡到标题行），MyTree 透传 expand-all - 应用模块树卡片：分类名与数量让位（超大收缩系数 + min-width:0），「子组继承」加 tooltip 与弹性空隙，「全部展开」加标签样式与竖线分隔，避免整组被挤出可视区或被读成同一个开关 - 下线测试推送：删除 /push-test 路由、菜单项与 PushTest.vue
2026-09-18 11:13:36 +08:00
parent 7784492522
commit 71c08d6e9a
5 changed files with 77 additions and 16 deletions
@@ -62,7 +62,6 @@ export function getMenuList(userRole?: UserRoleEnum): Promise<IModule[]> {
                { id: 53, modId: 1111, name: "操作日志", page: "/oplog", 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: 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 OapiLogList from "@/views/oapilog/OapiLogList.vue";
 import PushLog from "@/views/push/PushLog.vue";
-import PushTest from "@/views/push/PushTest.vue";
 import NoAuth from "@/views/NoAuth.vue";

 // 管理端四级访问控制：meta.roles 为空/未声明 = 登录即可访问
@@ -112,12 +111,6 @@ const routes: RouteRecordRaw[] = [
        component: PushLog,
        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",
@@ -39,10 +39,11 @@
                                    :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-count">{{ item.treeData.length }}个应用</span>
-                                <span class="inherit-cap">子组继承</span>
+                                <span class="cat-spacer"></span>
+                                <span class="inherit-cap" title="勾选后子组继承本次授权，不勾选仅本组生效">子组继承</span>
                                <!-- 开关外层 @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)]" />
                                </span>
                            </div>
@@ -662,6 +663,10 @@ onMounted(async () => {
    font-size: 13px;
    color: #333;
    margin-left: 6px;
+    /* 卡片是 3 列布局，列宽有限：用超大的收缩系数让分类名先让位（省略号），
+       保证右侧「子组继承 / 全部展开」整组不被挤出可视区 */
+    flex: 0 999 auto;
+    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
@@ -671,15 +676,28 @@ onMounted(async () => {
    color: #999;
    font-size: 12px;
    margin-left: 8px;
-    flex: 1;
+    /* 次优先收缩：空间实在不够时先截断数量文案，也不挤走开关 */
+    flex: 0 10 auto;
+    min-width: 0;
+    overflow: hidden;
    white-space: nowrap;
 }

+/* 弹性空隙：把右侧「子组继承 | 全部展开」整组推到卡片头右端，与分类名/数量拉开距离 */
+.cat-spacer {
+    flex: 1 1 0;
+    min-width: 0;
+}
+
 .inherit-cap {
    font-size: 12px;
    color: #999;
    flex-shrink: 0;
-    margin-right: 6px;
+    padding: 0 6px;
+    line-height: 18px;
+    background: #f0f2f5;
+    border-radius: 2px;
+    cursor: default;
 }

 .expand-all {
@@ -687,6 +705,10 @@ onMounted(async () => {
    align-items: center;
    flex-shrink: 0;
    gap: 4px;
+    /* 与左侧「子组继承」提示以竖线分隔：否则两个标签相邻会被读成同一个开关的说明 */
+    margin-left: 10px;
+    padding-left: 10px;
+    border-left: 1px solid #e8eaec;
 }

 .expand-all-label {
@@ -62,11 +62,19 @@
                    </div>
                    <!-- 右列：已授权应用（原有）；支持三种视图：用户聚合 / 部门树节点 / 角色树节点 -->
                    <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 v-if="permLoading" class="loading-tip">权限加载中...</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>
@@ -156,6 +164,9 @@ const permScope = ref<{ type: "user" | "group" | "role"; id?: number; label: str
    label: "",
 });

+// 已授权应用面板的「全部展开」开关（默认关闭）：应用层默认折叠，需按需展开模块
+const permExpandAll = ref(false);
+
 const permMainTitle = computed(() => {
    if (permScope.value.type === "group") 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;
    background: #fafafa;
    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 {
@@ -26,9 +26,10 @@
                            :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-count">{{ item.treeData.length }}个应用</span>
+                        <span class="cat-spacer"></span>
                        <!-- 开关外层 @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)]" />
                        </span>
                    </div>
@@ -393,6 +394,9 @@ watch(
    font-size: 13px;
    color: #333;
    margin-left: 6px;
+    /* 列宽有限：分类名优先让位（省略号），保证右侧「全部展开」不被挤出可视区 */
+    flex: 0 999 auto;
+    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
@@ -402,10 +406,18 @@ watch(
    color: #999;
    font-size: 12px;
    margin-left: 8px;
-    flex: 1;
+    flex: 0 10 auto;
+    min-width: 0;
+    overflow: hidden;
    white-space: nowrap;
 }

+/* 弹性空隙：把「全部展开」整组推到卡片头右端 */
+.cat-spacer {
+    flex: 1 1 0;
+    min-width: 0;
+}
+
 .cat-card-body {
    padding: 6px 8px;
 }