fix(authz): 组授权卡片头计数下沉右下角,子组继承回归最右
build / build (push) Successful in 2m29s

- 「N个应用」改为绝对定位到卡片头右下角,不再参与主行 flex 排布
- 主行右侧顺序调整:全部展开 → 子组继承(居最右)
- 卡片头底部 padding 加到 26px 容纳角标;分类名收缩系数收敛为 flex: 0 1 auto
This commit is contained in:
chenxing
2026-09-23 09:24:46 +08:00
parent 71c08d6e9a
commit 02a203a7f1
+17 -16
View File
@@ -38,14 +38,15 @@
<Icon class="collapse-icon" <Icon class="collapse-icon"
: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-spacer"></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>
<span class="inherit-cap" title="勾选后子组继承本次授权,不勾选仅本组生效">子组继承</span>
<!-- 「N个应用」计数:绝对定位到卡片头右下角,不参与主行排布 -->
<span class="cat-count">{{ item.treeData.length }}个应用</span>
</div> </div>
<div v-show="!collapsedMap[String(item.cat.id)]" class="cat-card-body"> <div v-show="!collapsedMap[String(item.cat.id)]" class="cat-card-body">
<MyTree :treeData="item.treeData" :setting="treeSetting" :autoClick="false" :isCheck="true" <MyTree :treeData="item.treeData" :setting="treeSetting" :autoClick="false" :isCheck="true"
@@ -641,7 +642,10 @@ onMounted(async () => {
.cat-card-header { .cat-card-header {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 8px 12px; /* 角标绝对定位的锚点 */
position: relative;
/* 底部多留一行:容纳右下角的「N个应用」计数,避免与主行内容重叠 */
padding: 8px 12px 26px;
background: #fafafa; background: #fafafa;
border-bottom: 1px solid #e8eaec; border-bottom: 1px solid #e8eaec;
cursor: pointer; cursor: pointer;
@@ -663,9 +667,8 @@ onMounted(async () => {
font-size: 13px; font-size: 13px;
color: #333; color: #333;
margin-left: 6px; margin-left: 6px;
/* 卡片是 3 列布局,列宽有限:用超大的收缩系数让分类名先让位(省略号), /* 「N个应用」计数已绝对定位脱离主行,主行只剩分类名 + 全部展开 + 子组继承 */
保证右侧「子组继承 / 全部展开」整组不被挤出可视区 */ flex: 0 1 auto;
flex: 0 999 auto;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@@ -673,17 +676,17 @@ onMounted(async () => {
} }
.cat-count { .cat-count {
/* 计数下沉到卡片头右下角:脱离主行,避免与「子组继承 / 全部展开」抢主行宽度 */
position: absolute;
right: 12px;
bottom: 6px;
color: #999; color: #999;
font-size: 12px; font-size: 12px;
margin-left: 8px; line-height: 18px;
/* 次优先收缩:空间实在不够时先截断数量文案,也不挤走开关 */
flex: 0 10 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap; white-space: nowrap;
} }
/* 弹性空隙:把右侧「子组继承 | 全部展开」整组推到卡片头右端,与分类名/数量拉开距离 */ /* 弹性空隙:把「全部展开 / 子组继承」推到卡片头右端,与分类名拉开距离 */
.cat-spacer { .cat-spacer {
flex: 1 1 0; flex: 1 1 0;
min-width: 0; min-width: 0;
@@ -693,6 +696,7 @@ onMounted(async () => {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
flex-shrink: 0; flex-shrink: 0;
margin-left: 10px;
padding: 0 6px; padding: 0 6px;
line-height: 18px; line-height: 18px;
background: #f0f2f5; background: #f0f2f5;
@@ -705,10 +709,7 @@ onMounted(async () => {
align-items: center; align-items: center;
flex-shrink: 0; flex-shrink: 0;
gap: 4px; gap: 4px;
/* 与左侧「子组继承」提示以竖线分隔:否则两个标签相邻会被读成同一个开关的说明 */ margin-left: 12px;
margin-left: 10px;
padding-left: 10px;
border-left: 1px solid #e8eaec;
} }
.expand-all-label { .expand-all-label {