Trisol Web UI 交互标准

背景：我们把全站前端翻了一遍，同一类交互普遍存在多种实现。下面 14 个类别，每类列了现状和候选做法——请逐项选一个你认可的，产品选定后我们就以它为标准沉淀规范、逐页对齐。有补充意见可写在每类下面的意见框里。

你的称呼（必填，同名再投会覆盖旧票）：

看完结果点这里 → 实时统计（投完票也能看）

1. 表格基座

现状：业务主列表（模型/推理/训练/数据集/集群）已统一用共享表格组件 DataTable；但管理后台 12 个面板里 10 个是手写表格，API Keys、机型定价、排行榜、调度页也是手写。

A.全站统一用 DataTable，存量手写表格分批改造（推荐）B.新页面必须用 DataTable，存量维持不动C.允许特殊页面手写，不需要统一

对照页面：模型/推理/训练/数据集列表已统一；API Keys、机型定价、排行榜、调度页、管理后台为手写

2. 分页

现状：主列表用统一分页组件（20/50/100 条可选，默认 20）；排行榜、用量审计等是手写的固定条数翻页；监控、账单、团队等页面干脆不分页全量加载（有页面已因此卡死过）。

A.所有列表必须分页；档位加 10 条/页，默认 10 条B.所有列表必须分页；维持 20/50/100，默认 20（推荐）C.是否分页按页面数据量各自决定

对照页面：模型列表（统一分页）/ 排行榜（手写翻页）/ 账单（不分页）

3. 筛选

现状：模型/推理/训练等 7 个页面的筛选条件会同步到网址（刷新不丢、可分享链接）；团队/账单/监控等页面筛选不进网址；另有几个页面是完全自画的筛选条。

A.所有列表筛选统一进网址，可刷新可分享（推荐）B.只有核心列表（模型/推理/训练/数据集）需要进网址C.不需要统一

对照页面：模型列表（进网址）/ 团队页（不进网址）

4. 排序

现状：主列表是后端排序（点表头真的发请求）；团队/账单/监控是前端排序；训练列表表头有排序按钮但点了没反应（实现没接线，属 bug）。

A.都以后端排序为准，表头排序按钮必须真实可用（推荐）B.数据量小的页面允许前端排序C.不需要统一

对照页面：模型列表（后端排序）/ 训练列表（表头按钮没接线）

5. 列表→详情的打开方式

现状：模型/推理/训练/数据集/集群/组织是新标签页打开；团队相关是当前页跳转；调度页是右侧抽屉；账单是页内下钻。周慧 9-04 走查时提过希望新标签打开。

A.一律新标签页打开，列表不丢（推荐）B.一律当前页跳转C.按场景区分：主流程当前页、关联查看新标签

对照页面：模型列表（新标签）/ 团队页（当前页）/ 调度页（抽屉）

6. 下拉选择器

现状：两种样式并存且原生系统下拉是主体（全站 85 处，集中在管理后台和推理创建/更新页）；组件库样式 SelectField 只有 30 处（训练创建、模型列表等）。周慧 9-04/9-18 两次点名要统一、提“项目级设计 token”。

A.全站统一组件库样式，存量原生下拉分批替换（推荐）B.只改用户高频页面（创建/更新表单），管理后台维持C.不需要统一

对照页面：训练创建（组件库样式）/ 推理创建（原生样式）

7. 危险操作确认

现状：5 套并存——统一删除确认弹窗（17 处）、另一套二次确认弹窗（6 处）、手写弹窗（12 处）、浏览器原生 confirm（2 处）、业务自封弹窗（推理服务 5 个）。

A.收敛成一套：按危险程度分级（删除=红色确认弹窗+危险区，普通=单一确认弹窗）（推荐）B.只保留一种确认弹窗，不区分危险等级C.不需要统一

对照页面：模型删除（统一弹窗）/ Sophie 页（浏览器原生弹窗）

8. 加载态

现状：约 5 种——统一 LoadingSpinner 只有 4 个页面用、19 个页面手写转圈、6 处裸文字“Loading...”、表格自带一层遮罩、全站没有骨架屏。

A.统一 LoadingSpinner + 表格遮罩，手写转圈收编（推荐）B.顺便引入骨架屏（列表/详情先出骨架再出数据）C.不需要统一

对照页面：模型详情（统一组件）/ 多数详情页（手写）

9. 错误态与空态

现状：错误横幅组件采用率最高（33 处）但仍有 20 处手写红框；空态组件 23 处，排行榜/Vault/API Keys 等页面全手写。

A.手写件全部收编成统一错误横幅/空态组件（推荐）B.新页面统一，存量维持C.不需要统一

对照页面：组织详情（统一三件套）/ API Keys（手写）

10. 状态徽标与失败原因

现状：状态颜色已集中定义，但徽标组件分叉（StatusCell 只有推理/训练两页用，全站约 10 个页面自封徽标）；失败原因 3 种展示：徽标旁 hover 问号 / 截断文字 / 独立一行，失败原因会把状态列撑得很宽。周慧 9-04 建议过：小 icon + 鼠标悬停看原因。

A.全站统一 StatusCell：徽标 + 失败原因 hover icon，列宽收窄（推荐）B.只统一徽标，失败原因展示方式按页面定C.不需要统一

对照页面：推理列表（StatusCell）/ API Keys（手写徽标）

11. 页面骨架（页头/页签/宽度）

现状：页头组件 29 处在用，但推理创建/更新、个人中心是自画页头；详情页页签 6 处用统一 TabBar、5 处手写（且训练详情的页签切换不回写网址，刷新就丢）；各页面最大宽度 2xl/3xl/5xl/7xl 任选，留白不一致。

A.页头/页签全部收编成统一组件，页签状态进网址；页面宽度定 2~3 档规则（推荐）B.新页面统一，存量逐步C.不需要统一

对照页面：组织详情（统一）/ 推理创建（自画）

12. 表格长文本与折行

现状：无规则混用——全站不换行 65 处、截断省略 54 处、允许折行 46 处。模型列表的策略是“全部不换行 + 横向滚动”。周慧 9-04 提过表格尽量别折行、调整列宽。

A.表头强制单行；内容列不换行 + 横向滚动，长文截断 + 悬停看全文（推荐）B.允许内容折行，行高自适应C.按页面内容类型各自决定

对照页面：模型列表（不换行+横滚）/ 部分页面（折行）

13. 操作成功/失败的轻提示

现状：全站没有 toast 通知系统；个别页面手写“绿色小条 5 秒消失”；大部分操作成功后没有轻提示（靠页面刷新或 inline 文字）；2 处还在用浏览器原生弹窗。

A.引入统一的 toast 组件，成功/失败有轻提示（推荐）B.不加 toast，维持 inline 提示C.群里再讨论

对照页面：存储页（手写小绿条）

14. 移动端适配

现状：9 月 11 日那轮移动端适配覆盖了模型/推理/训练/数据集/集群列表（手机下列表变卡片、侧栏变抽屉）；团队/配额/监控/管理后台没覆盖。

A.所有列表页铺开移动端适配（推荐）B.只保核心页面，其余不管C.暂不做移动端

对照页面：模型列表（已适配）/ 监控页（未适配）

Trisol Web UI 交互标准 · 拍板投票