diff --git a/src/views/GroupAuth.vue b/src/views/GroupAuth.vue
index 43ad0cd..a7a9ae8 100644
--- a/src/views/GroupAuth.vue
+++ b/src/views/GroupAuth.vue
@@ -38,14 +38,15 @@
{{ item.cat.name }}
- {{ item.treeData.length }}个应用
- 子组继承
全部展开:
+ 子组继承
+
+ {{ item.treeData.length }}个应用
{
.cat-card-header {
display: flex;
align-items: center;
- padding: 8px 12px;
+ /* 角标绝对定位的锚点 */
+ position: relative;
+ /* 底部多留一行:容纳右下角的「N个应用」计数,避免与主行内容重叠 */
+ padding: 8px 12px 26px;
background: #fafafa;
border-bottom: 1px solid #e8eaec;
cursor: pointer;
@@ -663,9 +667,8 @@ onMounted(async () => {
font-size: 13px;
color: #333;
margin-left: 6px;
- /* 卡片是 3 列布局,列宽有限:用超大的收缩系数让分类名先让位(省略号),
- 保证右侧「子组继承 / 全部展开」整组不被挤出可视区 */
- flex: 0 999 auto;
+ /* 「N个应用」计数已绝对定位脱离主行,主行只剩分类名 + 全部展开 + 子组继承 */
+ flex: 0 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
@@ -673,17 +676,17 @@ onMounted(async () => {
}
.cat-count {
+ /* 计数下沉到卡片头右下角:脱离主行,避免与「子组继承 / 全部展开」抢主行宽度 */
+ position: absolute;
+ right: 12px;
+ bottom: 6px;
color: #999;
font-size: 12px;
- margin-left: 8px;
- /* 次优先收缩:空间实在不够时先截断数量文案,也不挤走开关 */
- flex: 0 10 auto;
- min-width: 0;
- overflow: hidden;
+ line-height: 18px;
white-space: nowrap;
}
-/* 弹性空隙:把右侧「子组继承 | 全部展开」整组推到卡片头右端,与分类名/数量拉开距离 */
+/* 弹性空隙:把「全部展开 / 子组继承」推到卡片头右端,与分类名拉开距离 */
.cat-spacer {
flex: 1 1 0;
min-width: 0;
@@ -693,6 +696,7 @@ onMounted(async () => {
font-size: 12px;
color: #999;
flex-shrink: 0;
+ margin-left: 10px;
padding: 0 6px;
line-height: 18px;
background: #f0f2f5;
@@ -705,10 +709,7 @@ onMounted(async () => {
align-items: center;
flex-shrink: 0;
gap: 4px;
- /* 与左侧「子组继承」提示以竖线分隔:否则两个标签相邻会被读成同一个开关的说明 */
- margin-left: 10px;
- padding-left: 10px;
- border-left: 1px solid #e8eaec;
+ margin-left: 12px;
}
.expand-all-label {