DetailPage 详情页面容器
xy-detail-page 用来把详情头部、分组信息区、附件区、变更区和历史区组织成统一详情页面。
基础用法
适合中后台详情页的完整结构。
成员详情
DetailPage 适合标准后台详情页。
基础信息
负责人
小叶
状态
审核中
最近更新
2026/04/18 14:30
预算
¥128,000.50
变更对比
角色changed
运营
管理员
操作日志
提交复核
字段详情区
sections现在除了继续支持具名插槽,也可以直接在每个 section 上声明items。items内部复用了xy-descriptions的显示协议,适合直接承接状态、金额、日期、链接和自定义只读渲染。- 如果字段本身已经有增强层 schema,section 也可以直接声明
schema + model,不需要再把它手工改写成items。
当前定位
- 承接详情页的结构和常见详情子面板。
- 不直接处理路由和后端 SDK。
类型命名约定
- 对外主类型名统一使用
DetailPageBreadcrumbItem、DetailPageAction、DetailPageAttachmentFile、DetailPageProps。 - 旧的
PageHeaderBreadcrumbItem、PageHeaderAction、AttachmentPanelFile仅作为源码兼容别名保留,不再作为正式文档类型入口。
DetailPage API
DetailPage Attributes
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
title | 页面标题 | string | '' |
description | 页面描述 | string | '' |
breadcrumbs | 面包屑配置 | DetailPageBreadcrumbItem[] | [] |
actions | 头部操作按钮组 | DetailPageAction[] | [] |
loading | 是否加载中 | boolean | false |
error | 错误信息,非空时进入错误态 | string | null | null |
sections | 详情分组配置 | DetailSectionItem[] | [] |
attachments | 附件列表 | DetailPageAttachmentFile[] | [] |
changes | 变更对比数据,status 为 'same' 的项不展示 | ChangeDiffItem[] | [] |
logs | 操作日志数据 | AuditTimelineEntry[] | [] |
DetailPage Slots
| 插槽 | 说明 | 接收参数 |
|---|---|---|
meta | 头部标题旁的元信息区 | — |
actions | 头部操作区,默认渲染 actions 按钮 | — |
[section.key] | 各详情分组的内容,默认按 items / schema + model 渲染描述列表 | { section: DetailSectionItem } |