fix(authz): 组授权卡片计数改贴整卡右下角,与子组继承复选框同列
build / build (push) Successful in 1m51s

- 「N个应用」从卡片头移入 cat-card-body 末尾,绝对定位到整卡右下角
- .cat-count 的 right 与子组继承复选框同值 14px,上下对齐成一列
- cat-card-body 底部 padding 加到 24px 腾出计数位置;卡片头 padding 恢复 8px 12px
This commit is contained in:
chenxing
2026-09-23 09:29:32 +08:00
parent 02a203a7f1
commit 0080861482
+8 -10
View File
@@ -45,12 +45,12 @@
<Switch size="small" v-model="expandAllMap[String(item.cat.id)]" />
</span>
<span class="inherit-cap" title="勾选后子组继承本次授权,不勾选仅本组生效">子组继承</span>
<!-- 「N个应用」计数:绝对定位到卡片头右下角,不参与主行排布 -->
<span class="cat-count">{{ item.treeData.length }}个应用</span>
</div>
<div v-show="!collapsedMap[String(item.cat.id)]" class="cat-card-body">
<MyTree :treeData="item.treeData" :setting="treeSetting" :autoClick="false" :isCheck="true"
:expandAll="!!expandAllMap[String(item.cat.id)]" @on-tree-check="onTreeCheck" />
<!-- 「N个应用」计数:绝对定位到整个卡片的右下角(与子组继承复选框同列) -->
<span class="cat-count">{{ item.treeData.length }}个应用</span>
</div>
</div>
</div>
@@ -642,10 +642,7 @@ onMounted(async () => {
.cat-card-header {
display: flex;
align-items: center;
/* 角标绝对定位的锚点 */
position: relative;
/* 底部多留一行:容纳右下角的「N个应用」计数,避免与主行内容重叠 */
padding: 8px 12px 26px;
padding: 8px 12px;
background: #fafafa;
border-bottom: 1px solid #e8eaec;
cursor: pointer;
@@ -676,9 +673,9 @@ onMounted(async () => {
}
.cat-count {
/* 计数下沉到卡片头右下角:脱离主行,避免与「子组继承 / 全部展开」抢主行宽度 */
/* 计数贴在整张卡片右下角:与右侧「子组继承」复选框同列,脱离 tree 的文档流 */
position: absolute;
right: 12px;
right: 14px;
bottom: 6px;
color: #999;
font-size: 12px;
@@ -719,8 +716,9 @@ onMounted(async () => {
}
.cat-card-body {
padding: 6px 8px;
/* 子组继承复选框的绝对定位锚点:保证所有层级节点的复选框右对齐成一列 */
/* 底部多留一行:容纳右下角的「N个应用」计数,避免压住最后一行节点 */
padding: 6px 8px 24px;
/* 子组继承复选框 / 计数角标的绝对定位锚点:保证两者右对齐成一列 */
position: relative;
}