Skip to content

DetailPage 详情页面容器

xy-detail-page 用来把详情头部、分组信息区、附件区、变更区和历史区组织成统一详情页面。

基础用法

适合中后台详情页的完整结构。

成员详情

DetailPage 适合标准后台详情页。

基础信息

负责人
小叶
状态
审核中
最近更新
2026/04/18 14:30
预算
¥128,000.50
附件信息
权限矩阵.xlsx128 KBsuccess
变更对比
角色changed
运营
管理员
操作日志
提交复核
小叶处理中
2026-03-28 09:20

字段详情区

  • sections 现在除了继续支持具名插槽,也可以直接在每个 section 上声明 items
  • items 内部复用了 xy-descriptions 的显示协议,适合直接承接状态、金额、日期、链接和自定义只读渲染。
  • 如果字段本身已经有增强层 schema,section 也可以直接声明 schema + model,不需要再把它手工改写成 items

当前定位

  • 承接详情页的结构和常见详情子面板。
  • 不直接处理路由和后端 SDK。

类型命名约定

  • 对外主类型名统一使用 DetailPageBreadcrumbItemDetailPageActionDetailPageAttachmentFileDetailPageProps
  • 旧的 PageHeaderBreadcrumbItemPageHeaderActionAttachmentPanelFile 仅作为源码兼容别名保留,不再作为正式文档类型入口。

DetailPage API

DetailPage Attributes

属性说明类型默认值
title页面标题string''
description页面描述string''
breadcrumbs面包屑配置DetailPageBreadcrumbItem[][]
actions头部操作按钮组DetailPageAction[][]
loading是否加载中booleanfalse
error错误信息,非空时进入错误态string | nullnull
sections详情分组配置DetailSectionItem[][]
attachments附件列表DetailPageAttachmentFile[][]
changes变更对比数据,status'same' 的项不展示ChangeDiffItem[][]
logs操作日志数据AuditTimelineEntry[][]

DetailPage Slots

插槽说明接收参数
meta头部标题旁的元信息区
actions头部操作区,默认渲染 actions 按钮
[section.key]各详情分组的内容,默认按 items / schema + model 渲染描述列表{ section: DetailSectionItem }