描述列表Descriptions

你可能会说

详情页把信息列清楚就行：名称、时间、状态，一项一项的。

在详情页里用“字段名 + 内容”展示一条记录的只读信息例如订单详情会显示“收货人：李明”“状态：已发货”“金额：¥199”。它只负责查看；如果用户需要修改这些内容，应使用可编辑的 表单 Form。
项目名称AI 图鉴
创建人oil-oil
状态进行中
更新时间2026-07-20 14:32

什么时候用

  • 详情页展示一条记录的全部字段
    订单号2026071801
    金额¥ 299.00
    状态已发货
  • 配置、参数这类只读信息
    环境production
    版本v2.4.0
    域名vibe-ui.dev
  • 订单、工单的信息汇总区
    工单 #1024
    提交人林小hu
    优先级高
  • 个人资料页：姓名、邮箱、角色
    油阿油
    邮箱you@example.com
    角色前端工程师

什么时候不用

  • 需要让用户填写或修改：使用 表单 Form
    姓名林小hu
    邮箱you@example.com
  • 多行同类数据：使用 表格 Table
    任务状态
    登录页进行中
    支付流已完成
  • 字段很少且一句话即可说明：直接使用正文
    版本v2.4.0
    就一个字段，写句话的事
  • 大段长文本放入并列描述会压缩内容宽度：改用段落布局
    简介
    长段落塞进右栏，读不动
组成结构 · Anatomy
创建人 oil-oil
一条记录的字段集合，只读
一对「字段名：值」
灰色、宽度对齐，方便扫读
正文颜色，真正的内容
常见变体 · Variants
水平排列Horizontal
版本v2.4.0
环境production
字段值都不长时的默认布局
垂直排列Vertical
版本v2.4.0
环境production
字段值较长或横向空间较窄时，将值置于标签下方
带边框Bordered
版本v2.4.0
环境production
字段较多且需要逐项核对时
典型使用场景
订单详情页
订单详情 已发货
订单号2026071801
商品无线耳机 Pro × 1
实付金额¥ 299.00
收货人林小hu 138****0000
用户资料页
林小hu
2024 年 3 月加入
邮箱you@example.com
角色前端工程师
所在团队AI 图鉴项目组
配置信息展示
应用配置 v2.4.0
运行环境production
访问域名vibe-ui.dev
自动部署已开启
最近发布2026-07-20 14:32
审核信息
发布审核 #1024 审核中
提交人阿油
提交时间2026-07-21 10:08
审核人林小hu
审核意见待填写