fix(web): 统一用户/角色/部门列表行样式与选中态
ci / 质量门禁 (push) Canceled after 0s

背景:
- 用户、角色列表行为全宽 + 1px 分隔线,选中行与相邻悬停行的高亮背景会盖住分隔线,
  两块色块粘连,看起来间距被挤在一起;
- 部门树为列表内留白 + 圆角行,其左侧 2px 竖条贴行左缘,而用户 / 角色的竖条贴卡片边缘,
  三页选中指示器不一致;部门子级缩进后竖条位置还会随层级漂移;
- 行宽收紧后角色副信息(编码 · 数据范围)会被硬裁掉半个字。

改动:
- 三页列表统一行几何:列表内留白 6px、行间 2px、行圆角 6px,去掉贯穿分隔线;
- 统一取消左侧 2px 竖条,选中态改为品牌浅底 + 品牌色 / 600 字重标题,与侧栏导航一致;
- 行高 64→60,保持 9 条一屏;部门树根级 / 子级行距同步;
- 新建角色页的角色模板列表套用同一套行样式;
- 角色副信息改为块级 text-overflow: ellipsis,右侧统计列 132→112px 归还宽度,
  1440 下角色编码与数据范围不再截断。

影响面:
- 仅管理中心用户 / 角色 / 部门三页与新建角色页的列表视觉;
- 结构与交互不变,接口、权限、路由、数据均不变;≤1280/1080 沿用原响应式收缩规则。

回滚方式:
- 回滚本提交即恢复全宽行 + 1px 分隔线 + 左侧竖条与原行宽。

验证证据:
- pnpm format:check / lint / typecheck 通过;pnpm test:web 120/120 通过;
- Chrome 1440×900 实机截图:选中 + 悬停相邻行留白清晰,三页选中态一致;
- 角色列表副信息溢出检测:overflow: [](无截断)。
This commit is contained in:
Stev_Wang committed 2026-11-03 15:55:06 +08:00
1 parent f849e443d7
commit 4f6ccda6e3
4 files changed
+41 -28

No files matched your search

@@ -83,7 +83,7 @@ function TemplateList({
onRetry={onRetry} onRetry={onRetry}
/> />
) : ( ) : (
<div role="listbox" aria-label="选择模板"> <div className="lx-role-template-list" role="listbox" aria-label="选择模板">
<button <button
type="button" type="button"
role="option" role="option"
+10 -1
View File
@@ -96,10 +96,17 @@
} }
.lx-dept-tree__list { .lx-dept-tree__list {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px; padding: 6px;
} }
.lx-dept-tree__children { .lx-dept-tree__children {
display: flex;
flex-direction: column;
gap: 2px;
margin-top: 2px;
padding-left: 14px; padding-left: 14px;
} }
@@ -110,15 +117,16 @@
gap: 6px; gap: 6px;
padding: 4px 6px; padding: 4px 6px;
border-radius: var(--lx-radius-md); border-radius: var(--lx-radius-md);
transition: background var(--lx-motion-fast) var(--lx-ease-out);
} }
.lx-dept-row:hover { .lx-dept-row:hover {
background: var(--lx-color-bg-hover); background: var(--lx-color-bg-hover);
} }
/* 选中态:品牌浅底 + 品牌色标题(与侧栏导航同一套语言,不再画左侧竖条) */
.lx-dept-row.is-selected { .lx-dept-row.is-selected {
background: var(--lx-color-brand-soft); background: var(--lx-color-brand-soft);
box-shadow: inset 2px 0 0 var(--lx-color-brand);
} }
.lx-dept-row.is-disabled .lx-dept-row__name b, .lx-dept-row.is-disabled .lx-dept-row__name b,
@@ -171,6 +179,7 @@
.lx-dept-row.is-selected .lx-dept-row__name b { .lx-dept-row.is-selected .lx-dept-row__name b {
color: var(--lx-color-brand); color: var(--lx-color-brand);
font-weight: 600;
} }
.lx-dept-row__meta { .lx-dept-row__meta {
+22 -17
View File
@@ -220,8 +220,9 @@
.lx-role-list__items { .lx-role-list__items {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px;
margin: 0; margin: 0;
padding: 0; padding: 6px 8px;
list-style: none; list-style: none;
} }
@@ -229,20 +230,16 @@
position: relative; position: relative;
display: flex; display: flex;
width: 100%; width: 100%;
min-height: 64px; min-height: 60px;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
padding: 8px 10px 8px 14px; padding: 8px 10px 8px 12px;
border-bottom: 1px solid var(--lx-color-border); border-radius: var(--lx-radius-md);
text-align: left; text-align: left;
cursor: pointer; cursor: pointer;
transition: background var(--lx-motion-fast) var(--lx-ease-out); transition: background var(--lx-motion-fast) var(--lx-ease-out);
} }
.lx-role-list__items li:last-child .lx-role-row {
border-bottom: none;
}
.lx-role-row:hover { .lx-role-row:hover {
background: var(--lx-color-bg-hover); background: var(--lx-color-bg-hover);
} }
@@ -252,9 +249,9 @@
outline-offset: -2px; outline-offset: -2px;
} }
/* 选中态:品牌浅底 + 品牌色标题(与侧栏导航同一套语言,不再画左侧竖条) */
.lx-role-row.is-selected { .lx-role-row.is-selected {
background: var(--lx-color-brand-soft); background: var(--lx-color-brand-soft);
box-shadow: inset 2px 0 0 var(--lx-color-brand);
} }
.lx-role-row__icon { .lx-role-row__icon {
@@ -302,17 +299,16 @@
.lx-role-row.is-selected .lx-role-row__name b { .lx-role-row.is-selected .lx-role-row__name b {
color: var(--lx-color-brand); color: var(--lx-color-brand);
font-weight: 600;
} }
.lx-role-row.is-disabled .lx-role-row__name b { .lx-role-row.is-disabled .lx-role-row__name b {
color: var(--lx-color-text-secondary); color: var(--lx-color-text-secondary);
} }
/* 块级 + ellipsis:角色编码与数据范围可能超宽,避免被侧栏裁掉半个字 */
.lx-role-row__meta { .lx-role-row__meta {
display: flex;
overflow: hidden; overflow: hidden;
align-items: center;
gap: 4px;
font-size: var(--lx-font-size-xs); font-size: var(--lx-font-size-xs);
line-height: 16px; line-height: 16px;
color: var(--lx-color-text-secondary); color: var(--lx-color-text-secondary);
@@ -322,13 +318,14 @@
} }
.lx-role-row__dot { .lx-role-row__dot {
margin: 0 4px;
color: var(--lx-color-border-strong); color: var(--lx-color-border-strong);
} }
.lx-role-row__side { .lx-role-row__side {
display: flex; display: flex;
width: 132px; width: 112px;
flex: 0 0 132px; flex: 0 0 112px;
flex-direction: column; flex-direction: column;
align-items: flex-end; align-items: flex-end;
gap: 4px; gap: 4px;
@@ -756,13 +753,20 @@
padding: var(--lx-space-4); padding: var(--lx-space-4);
} }
.lx-role-template-list {
display: flex;
flex-direction: column;
gap: 2px;
padding: 6px 8px;
}
.lx-role-template { .lx-role-template {
display: flex; display: flex;
width: 100%; width: 100%;
align-items: flex-start; align-items: flex-start;
gap: 10px; gap: 10px;
padding: 10px 14px; padding: 10px 12px;
border-bottom: 1px solid var(--lx-color-border); border-radius: var(--lx-radius-md);
text-align: left; text-align: left;
transition: background var(--lx-motion-fast) var(--lx-ease-out); transition: background var(--lx-motion-fast) var(--lx-ease-out);
} }
@@ -776,9 +780,9 @@
outline-offset: -2px; outline-offset: -2px;
} }
/* 选中态:品牌浅底 + 品牌色标题(与侧栏导航同一套语言,不再画左侧竖条) */
.lx-role-template.is-active { .lx-role-template.is-active {
background: var(--lx-color-brand-soft); background: var(--lx-color-brand-soft);
box-shadow: inset 2px 0 0 var(--lx-color-brand);
} }
.lx-role-template__icon { .lx-role-template__icon {
@@ -817,6 +821,7 @@
.lx-role-template.is-active .lx-role-template__name { .lx-role-template.is-active .lx-role-template__name {
color: var(--lx-color-brand); color: var(--lx-color-brand);
font-weight: 600;
} }
.lx-role-template__desc { .lx-role-template__desc {
+8 -9
View File
@@ -1,4 +1,4 @@
/* A1 · 用户与组织(方案 B:主从分栏 + 分屏登录) */ /* A1 · 用户管理(方案 B:主从分栏 + 分屏登录) */
/* ---------- 页面骨架 ---------- */ /* ---------- 页面骨架 ---------- */
@@ -159,31 +159,29 @@
.lx-user-list__items { .lx-user-list__items {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2px;
padding: 6px 8px;
} }
.lx-user-row { .lx-user-row {
display: flex; display: flex;
width: 100%; width: 100%;
min-height: 64px; min-height: 60px;
align-items: center; align-items: center;
gap: 10px; gap: 10px;
padding: 8px var(--lx-space-4); padding: 8px 12px;
border-bottom: 1px solid var(--lx-color-border); border-radius: var(--lx-radius-md);
text-align: left; text-align: left;
transition: background var(--lx-motion-fast) var(--lx-ease-out); transition: background var(--lx-motion-fast) var(--lx-ease-out);
} }
.lx-user-row:last-child {
border-bottom: none;
}
.lx-user-row:hover { .lx-user-row:hover {
background: var(--lx-color-bg-hover); background: var(--lx-color-bg-hover);
} }
/* 选中态:品牌浅底 + 品牌色标题(与侧栏导航同一套语言,不再画左侧竖条) */
.lx-user-row.is-selected { .lx-user-row.is-selected {
background: var(--lx-color-brand-soft); background: var(--lx-color-brand-soft);
box-shadow: inset 2px 0 0 var(--lx-color-brand);
} }
.lx-user-row__avatar { .lx-user-row__avatar {
@@ -224,6 +222,7 @@
.lx-user-row.is-selected .lx-user-row__name { .lx-user-row.is-selected .lx-user-row__name {
color: var(--lx-color-brand); color: var(--lx-color-brand);
font-weight: 600;
} }
.lx-user-row__phone { .lx-user-row__phone {