组件片段库

无JS · AntD风格 · Tailwind

使用说明

本页为通用原型设计规范落地的可复制片段库。所有示例均不依赖JavaScript,可直接拷贝到业务页面使用。

  • 命名约定:多选字段使用数组命名,例如 name="userRoles[]"
  • 语义结构:使用语义化标签(header/main/section/footer)。
  • 可访问性:图标按钮需提供 aria-label;高对比度文本。

按钮(Actions)

主 > 次 > 危险;同一行不超过 3 个操作

状态标签(Tags)

已生效 审批中 暂停 终止 草稿
已生效

功能入口卡片(Card)

合同管理

合同录入、变更、结算等全生命周期管理

前往
...

表单(分组卡片 + 多选)

多选字段命名:field[](与现有页面一致)

基本信息

带 * 为必填项

角色与流程权限

支持多选;命名 userRoles[] / departmentHeadRoles[]

菜单角色
流程权限

列表页骨架(Toolbar + Table + Pagination)

搜索 重置
名称 状态 操作
示例A 审批中 编辑 删除

空状态 / 占位(Empty / Skeleton)

暂无数据

新建
空状态