1.5 KiB
1.5 KiB
按钮规范
设计稿:统一设计项目「组件-按钮规范.dc.html」;完整决策档案见 .trellis/tasks/archive/**/07-24-button-spec-rollout/design.md。
七个合法变体(新增按钮先对号入座,禁用 secondary / tertiary / dashed / warning)
| 写法 | 用途 |
|---|---|
type="primary" |
区块唯一主操作(保存/登录/新建);一个区块至多一个 |
| (无 type) | 并列次操作(取消/测试/上一步) |
quaternary |
行内轻操作(修改/复制/分页);hover wash 底 |
quaternary type="primary" |
行内肯定动作(绑定/启用);一行至多一个 |
quaternary type="error" |
行内危险入口(删除/解绑);必接 ConfirmPop |
type="error" |
危险最终确认;仅确认层/危险区收尾 |
ghost type="error" |
详情页危险区入口(终止/删除资源) |
规则
- 行内(卡片头/表格/列表行尾)一律文字按钮;危险两段式:入口文字红或描边红 → 确认层内才出 Error 实底。
- 尺寸跟容器:页面级工具栏 medium;弹窗底部/筛选条/区块工具行/详情操作条 small;卡片行内/表格 tiny;登录页 large+block。同一容器不混档。
- 图标按钮方形(quaternary 去 circle)且必带 title/tooltip;circle 仅浮层关闭与 VNC 媒体控制。
- 异步必上 loading,宽度稳定、禁重复提交;成功后才关弹层。
- 互斥单选用
ChoiceChip(components/ChoiceChip.vue),不用 NButton 动态 type 模拟。 - pressed 色已入 token:accentPressed / errHover / errPressed(tokens.ts + main.css 双处同步)。