Commit f82245a9 authored by drigle's avatar drigle

fix: pin project table header while scrolling

parent 05d0a6b7
......@@ -1177,6 +1177,7 @@ export default function RecordWorkbench({
<div ref={tableScrollRef} className={tableContentClass}>
<DataTable
ariaLabel={title || '业务数据列表'}
className={stickyTable ? 'rc-data-table-sticky' : ''}
columns={dataGridColumns}
rows={dataGridRows}
isLoading={loading}
......
......@@ -717,6 +717,43 @@
gap: var(--rc-list-stack-gap);
}
/* Keep long data sets inside the table while the column headings remain visible. */
.rc-data-table-sticky .data-table-scroll {
position: relative;
max-height: min(60dvh, 42rem);
overflow-x: auto;
overflow-y: auto;
overscroll-behavior: contain;
}
/* DataGrid adds a non-scrolling resize wrapper. Let sticky headers use the
outer scroll container as their containing block instead of this wrapper. */
.rc-data-table-sticky .table__resizable-container {
overflow: visible;
}
.rc-data-table-sticky [data-slot='table-header'] .table__column {
position: sticky;
top: 0;
inset-block-start: 0;
z-index: 4;
display: table-cell;
color: var(--muted);
background: var(--surface-secondary);
box-shadow: inset 0 -1px 0 var(--separator);
}
.rc-data-table-sticky [data-slot='table-header'] .table__column.bg-accent-soft {
background: var(--accent-soft);
color: var(--accent-soft-foreground);
}
@media (max-width: 48rem) {
.rc-data-table-sticky .data-table-scroll {
max-height: min(54dvh, 32rem);
}
}
@media (min-width: 769px) {
.action-bar:has(.rc-data-grid-action-bar) {
inset-inline: 0;
......
......@@ -29,6 +29,7 @@
1. 页面通过 `loadSubject`、`getSubjectView` 和 `POST /record/query` 读取字段、视图和记录。
2. 表格列、视图限制、排序、选择字段选项和字段分组来自服务端配置;字段分组读取当前 Grid View 的 `settings.groups`,按配置展示分组表头并支持展开或收起。当前 Grid View 的 `settings.shortTitle === true` 时只隐藏通用 `title` 展示列;`false` 或未配置时正常展示。`title` 数据仍参与关键词搜索、排序、详情和保存,详情入口保留在项目名称和固定操作列。
切换 Grid View 时立即切换当前视图、清空跨视图选择并回到第一页,同时重新读取 Subject、视图配置和 `/record/query` 数据;项目状态不再单独提供下拉筛选,按顶部 Grid View Tabs 切换;刷新期间不展示上一次请求的记录行,表格在当前可视区域中心显示加载状态,失败时保留错误反馈并清空不可确认的旧数据。
项目列表表格使用限定高度的内部滚动区域,支持纵向和横向滚动;表头在表格滚动区域内吸顶,分页位于滚动区域外,避免页面因记录行过多持续向下延伸。
View 中兼容历史字段 `metadata.project_finish_time` 时按数据定义显示为“项目完成时间”;
内部 `metadata.*` 路径不作为可见表头,字段取值路径和服务端配置保持不变。
3. 新建和编辑时业务字段统一写入 `metadata`;引用和用户字段只提交 ID,日期提交 ISO 8601。
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment