Skip to content
Projects
Groups
Snippets
Help
Loading...
Sign in / Register
Toggle navigation
A
audit_project_manager
Project
Project
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Registry
Registry
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
David Yang
audit_project_manager
Commits
a562482f
Commit
a562482f
authored
Aug 31, 2026
by
Andy-bubu
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
fix: align list sticky header and pinned hover
parent
f82245a9
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
74 additions
and
5 deletions
+74
-5
ui-architecture.md
docs/ui-architecture.md
+1
-1
xinyuan-design-system.md
docs/xinyuan-design-system.md
+10
-0
DynamicFormManager.jsx
src/components/DynamicFormManager.jsx
+1
-0
index.jsx
src/components/record-workbench/index.jsx
+0
-4
shell.css
src/design-system/shell.css
+62
-0
No files found.
docs/ui-architecture.md
View file @
a562482f
...
@@ -28,7 +28,7 @@ Hover/Focus/Selected/Disabled。`src/pages` 下没有页面私有 CSS/Less/SCSS
...
@@ -28,7 +28,7 @@ Hover/Focus/Selected/Disabled。`src/pages` 下没有页面私有 CSS/Less/SCSS
`/info -> site.group`
配置生成有序分组;Header 右侧提供 HeroUI
`SearchField secondary`
,
`/info -> site.group`
配置生成有序分组;Header 右侧提供 HeroUI
`SearchField secondary`
,
按应用名称、描述和标识过滤当前已授权集合,空分组隐藏、分组数量反映匹配结果,清空后恢复
按应用名称、描述和标识过滤当前已授权集合,空分组隐藏、分组数量反映匹配结果,清空后恢复
原顺序,不拥有接口、权限、会话或跳转逻辑。
原顺序,不拥有接口、权限、会话或跳转逻辑。
-
`DataTable`
:Pro DataGrid 原生选择、排序、固定列、
内部滚动
、EmptyState、ActionBar;共享
-
`DataTable`
:Pro DataGrid 原生选择、排序、固定列、
页面纵向滚动下的 sticky 表头
、EmptyState、ActionBar;共享
`DataTablePagination`
将摘要与 HeroUI Autocomplete 页容量选择器组成左侧同组,选择器紧接摘要
`DataTablePagination`
将摘要与 HeroUI Autocomplete 页容量选择器组成左侧同组,选择器紧接摘要
右侧;Pagination 页码控制靠右。项目业务列表使用 20/50/100 条,选择器不显示搜索框,变更时重置到第一页。
右侧;Pagination 页码控制靠右。项目业务列表使用 20/50/100 条,选择器不显示搜索框,变更时重置到第一页。
该结构是跨应用固定基线,业务页面不得改变其层级、顺序、对齐和尺寸。
该结构是跨应用固定基线,业务页面不得改变其层级、顺序、对齐和尺寸。
...
...
docs/xinyuan-design-system.md
View file @
a562482f
...
@@ -110,6 +110,16 @@ Inter 与系统回退字体之间切换。
...
@@ -110,6 +110,16 @@ Inter 与系统回退字体之间切换。
-
页面首层模块、普通模块、紧密相关列表/KPI 分别使用 32/24/16px 间距;移动端为 24/16px。
-
页面首层模块、普通模块、紧密相关列表/KPI 分别使用 32/24/16px 间距;移动端为 24/16px。
-
列表标题和工具栏透明无框;搜索在左、列分组紧随其后、业务操作在右、主操作最右;
-
列表标题和工具栏透明无框;搜索在左、列分组紧随其后、业务操作在右、主操作最右;
手机搜索独占第一行。DataGrid 是列表唯一数据 Surface。
手机搜索独占第一行。DataGrid 是列表唯一数据 Surface。
-
列表区域不重复渲染与页面/Navbar 相同层级的模块标题;页面标题或当前 Tab 已能表达业务语境时,
列表直接从工具栏开始,避免重复文案占用垂直空间。
-
列表采用页面整体纵向滚动,不创建固定高度的表格纵向滚动容器,也不产生“页面滚动 + 表格滚动”的
双重体验。DataGrid 内容随页面自然向下滚动,Pagination 位于数据列表底部并随列表一起滚动。
-
DataGrid 表头进入页面顶部时使用 CSS
`position: sticky`
吸顶,
`top`
必须避开固定 Navbar 的实际高度;
表头保持原有
`surface-secondary`
背景、底部边界和层级阴影。不得用 JS 监听滚动计算位置。
-
吸顶表头沿用 DataGrid 实际列宽;固定首列与操作列的 sticky 偏移和层级不得改变。首列背景必须不透明,
避免横向滚动时相邻列文案穿透,Hover/selected 状态仍与同一行普通单元格一致。
-
表格父级不得使用
`overflow: hidden/auto/scroll`
阻断页面 sticky;仅允许 DataGrid 为真实横向列宽溢出提供
横向滚动,禁止额外纵向滚动层。数据量少时不拉伸出空白滚动区域,数据量多时继续保持页面滚动。
-
列表普通业务列不显示 Hover 文案 Tooltip,避免每个单元格悬浮都弹出重复内容;通过可读列宽、
-
列表普通业务列不显示 Hover 文案 Tooltip,避免每个单元格悬浮都弹出重复内容;通过可读列宽、
单/双行截断和表格内部滚动解决长文案。操作列必须保留,操作列内的图标按钮可继续使用
单/双行截断和表格内部滚动解决长文案。操作列必须保留,操作列内的图标按钮可继续使用
Tooltip 和无障碍名称,因为它们说明的是操作而不是重复数据。
Tooltip 和无障碍名称,因为它们说明的是操作而不是重复数据。
...
...
src/components/DynamicFormManager.jsx
View file @
a562482f
...
@@ -551,6 +551,7 @@ export default function DynamicFormManager() {
...
@@ -551,6 +551,7 @@ export default function DynamicFormManager() {
{
key
:
'edit'
,
label
:
'编辑表单'
,
icon
:
Edit
,
onClick
:
({
record
})
=>
{
setEditingForm
(
record
.
raw
);
setFormDialogOpen
(
true
);
}
},
{
key
:
'edit'
,
label
:
'编辑表单'
,
icon
:
Edit
,
onClick
:
({
record
})
=>
{
setEditingForm
(
record
.
raw
);
setFormDialogOpen
(
true
);
}
},
{
key
:
'delete'
,
label
:
'删除表单'
,
icon
:
Delete
,
tone
:
'danger'
,
onClick
:
({
record
})
=>
setDeleteForm
(
record
.
raw
)
},
{
key
:
'delete'
,
label
:
'删除表单'
,
icon
:
Delete
,
tone
:
'danger'
,
onClick
:
({
record
})
=>
setDeleteForm
(
record
.
raw
)
},
]
}
]
}
stickyTable
pagination=
{
{
pagination=
{
{
page
,
page
,
pageSize
,
pageSize
,
...
...
src/components/record-workbench/index.jsx
View file @
a562482f
...
@@ -1100,10 +1100,6 @@ export default function RecordWorkbench({
...
@@ -1100,10 +1100,6 @@ export default function RecordWorkbench({
) : null}
) : null}
<section className={tableSectionClass}>
<section className={tableSectionClass}>
<div className="flex min-w-0 items-center">
<h2 className="text-base font-medium text-foreground">{title}</h2>
</div>
<div className="rc-page-toolbar rc-page-toolbar-responsive">
<div className="rc-page-toolbar rc-page-toolbar-responsive">
<div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
<div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
{toolbarSearchField ? (
{toolbarSearchField ? (
...
...
src/design-system/shell.css
View file @
a562482f
...
@@ -748,6 +748,68 @@
...
@@ -748,6 +748,68 @@
color
:
var
(
--accent-soft-foreground
);
color
:
var
(
--accent-soft-foreground
);
}
}
/* The leading pinned column must sit above scrolling body cells. Keep its
surface opaque so text from adjacent columns cannot bleed through while
horizontal or vertical scrolling. */
.rc-data-table-sticky
[
data-pinned
=
'start'
]
{
position
:
sticky
;
z-index
:
6
;
background
:
var
(
--surface
);
}
.rc-data-table-sticky
[
data-slot
=
'table-header'
]
[
data-pinned
=
'start'
]
{
z-index
:
8
;
background
:
var
(
--surface-secondary
);
}
/* Mirror HeroUI's row states on the opaque pinned surface so the leading
column still responds to hover and selection instead of looking detached. */
@media
(
hover
:
hover
)
{
.rc-data-table-sticky
[
data-slot
=
'data-grid'
]
.table__row
:hover
[
data-pinned
=
'start'
]
.table__cell
,
.rc-data-table-sticky
[
data-slot
=
'data-grid'
]
.table__row
[
data-hovered
=
'true'
]
[
data-pinned
=
'start'
]
.table__cell
{
/* Keep the pinned cell opaque; transparent hover fills let scrolled
sibling-cell text show through the fixed column. */
background-color
:
var
(
--color-surface-secondary
);
}
@supports
(
color
:
color-mix
(
in
oklab
,
white
,
black
))
{
.rc-data-table-sticky
[
data-slot
=
'data-grid'
]
.table__row
:hover
[
data-pinned
=
'start'
]
.table__cell
,
.rc-data-table-sticky
[
data-slot
=
'data-grid'
]
.table__row
[
data-hovered
=
'true'
]
[
data-pinned
=
'start'
]
.table__cell
{
background-color
:
color-mix
(
in
oklab
,
var
(
--color-surface
)
40%
,
var
(
--color-surface-secondary
)
);
}
}
}
.rc-data-table-sticky
[
data-slot
=
'data-grid'
]
.table__row
[
data-selected
=
'true'
]
[
data-pinned
=
'start'
]
.table__cell
{
background-color
:
var
(
--color-surface-secondary
);
}
@supports
(
color
:
color-mix
(
in
oklab
,
white
,
black
))
{
.rc-data-table-sticky
[
data-slot
=
'data-grid'
]
.table__row
[
data-selected
=
'true'
]
[
data-pinned
=
'start'
]
.table__cell
{
background-color
:
color-mix
(
in
oklab
,
var
(
--color-surface
)
10%
,
var
(
--color-surface-secondary
)
);
}
}
@media
(
max-width
:
48rem
)
{
@media
(
max-width
:
48rem
)
{
.rc-data-table-sticky
.data-table-scroll
{
.rc-data-table-sticky
.data-table-scroll
{
max-height
:
min
(
54
dvh
,
32rem
);
max-height
:
min
(
54
dvh
,
32rem
);
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment