yuxuanhui
b9975e58e9
Deploy production / deploy (push) Successful in 53s
- Introduced a new `WorkspaceTable` component for consistent table styling and behavior. - Updated `BacktestPage`, `DatasetPage`, and `DataPreparationPage` to utilize the new `WorkspaceTable`. - Implemented compact row heights and ellipsis for long text in table cells. - Added validation for online field queries to ensure at least one filter is provided. - Enhanced error handling and user feedback for invalid input scenarios. - Improved pagination controls with dynamic page size options. - Documented table display specifications in `ui-tables.md`. - Added tests to verify table layout, interaction, and error handling.
2.9 KiB
2.9 KiB
表格展示规范
以 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 切换、分页及选择保留；在桌面与窄视口检查表体滚动和底栏可达。在线目录检查首次打开、仅输入未提交及重置均不会调用字段查询接口。