30 lines
2.9 KiB
Markdown
30 lines
2.9 KiB
Markdown
|
# 表格展示规范
|
|||
|
|
|
|||
|
|
以 Alpha 管理为视觉基准。数据目录、字段目录、数据准备及其选择器使用 `frontend/src/components/WorkspaceTable.tsx`，底层为项目锁定版本的 Semi Design Table。新表格及涉及布局的改动复用此边界；业务页面负责服务端查询、排序、选择和分页状态。
|
|||
|
|
|
|||
|
|
## 布局与尺寸
|
|||
|
|
|
|||
|
|
| 部位 | 规范 |
|
|||
|
|
| --- | --- |
|
|||
|
|
| 页面结构 | 可选 Tab → 筛选及操作栏 → 表格 → 底部分页 |
|
|||
|
|
| Tab | Semi `Tabs type="card"`，浅灰栏底色，`tabPaneMotion={false}`；单视图无需空 Tab |
|
|||
|
|
| 表头、数据行 | 40px 高，单元格上下 8px、左右 16px；正文 13px，内容高不超过 23px（含边框后整行 40px） |
|
|||
|
|
| 筛选及操作栏 | 每行上下 padding 4px、左右 12px，margin 0，控件间距 8px；更多条件按需展开 |
|
|||
|
|
| 表体 | 列宽明确、固定表格布局；宽表仅在表体内横向滚动，主列表纵向占满剩余空间 |
|
|||
|
|
| 分页 | 表格外底栏，左侧总数及更新时间，右侧页码和每页条数；主列表支持 25／50／100 条 |
|
|||
|
|
|
|||
|
|
主列表使用 `WorkspaceTable fill`、`scroll.y="100%"`，父级 flex 链保持 `min-height: 0`。Tab 的内容及 motion overlay 同样参与高度约束，使表头和底栏可见、表体独立滚动。弹窗中的预览表格可使用限定高度。
|
|||
|
|
|
|||
|
|
## 单元格与交互
|
|||
|
|
|
|||
|
|
- 每列提供合适宽度，长名称、ID、描述保持单行省略。使用 Semi `ellipsis` 和共用 `.workspace-cell` 边界；完整内容可通过标题提示或详情查看。
|
|||
|
|
- 状态使用小尺寸、浅色 Semi `Tag`，文字明确表达状态，颜色仅作辅助：成功绿色、进行中蓝色、等待灰色、警告橙色、失败红色。缺失值显示“未提供”。
|
|||
|
|
- 名称入口使用 borderless Button，宽度限定在单元格内。行操作使用 `.workspace-cell-actions`，不复用筛选栏样式；按钮、Tag 和任何子元素均不得侵入相邻列。
|
|||
|
|
- 多选使用 Semi `rowSelection` 和稳定的业务键；表头全选只作用于当前页，跨页保留选择，切换数据范围清空选择。批量操作展示选择数量，空选择时禁用。
|
|||
|
|
- 筛选或每页条数改变时回到第一页。服务端分页场景由后端排序，保留受控分页；只有接口支持的排序条件才展示为可用。
|
|||
|
|
- 字段目录先“本地同步”，后“worldquant接口”。在线字段查询只有填写关键词、数据集、类型或数值筛选条件并点击查询后才执行；范围默认值本身不触发查询。重置及切换范围清空在线结果和勾选。
|
|||
|
|
|
|||
|
|
## 验证
|
|||
|
|
|
|||
|
|
使用长名称、长描述、状态、多页数据及空结果检查。浏览器回归需验证 40px 行高、单元格内截断、Tab 切换、分页及选择保留；在桌面与窄视口检查表体滚动和底栏可达。在线目录检查首次打开、仅输入未提交及重置均不会调用字段查询接口。
|