Skip to content

DetailPanel 详情面板

xy-detail-panel 用来统一表达“在覆盖层中查看详情”的能力,通过 container="drawer" | "dialog" 收口侧边详情和弹窗详情两种查看容器。

详情查看场景

这个场景把“侧边详情”和“居中详情”放在同一套详情面板模型下理解,核心是只读查看、历史说明和上下文保留。

收口后的理解方式

这里把“抽屉查看”和“弹窗查看”统一理解为详情面板。

详情内容的核心不是容器,而是只读信息、状态标记和历史记录如何被稳定承接。

发布任务

同一份任务详情,可以按上下文需求用抽屉或弹窗承接。

当前定位

  • 统一表达详情查看面板,不再让使用方在选型阶段先纠结抽屉还是弹窗。
  • 适合列表查看、审批复核、任务详情、日志回溯等只读链路。
  • 在收口后的公开体系里,它是 DetailPage 的近邻能力,而不是一组碎片化详情小组件的集合。

当前边界

  • 更复杂的详情区块能力,继续建议通过 DetailPage + AuditTimeline 这种页面级组合承接。
  • 当详情字段本身已经有稳定 schema 时,优先直接传 schema + model,不要再为简单资料卡重复写一遍模板。

DetailPanel API

DetailPanel Attributes

属性说明类型默认值
open是否打开booleanfalse
container容器类型'drawer' | 'dialog''drawer'
title标题string'详情信息'
description说明文案string''
loading是否显示加载态booleanfalse
model当前详情数据对象Record<string, unknown>{}
schema只读详情字段 schema,复用增强层显示协议ProFieldSchema[][]
descriptions-props透传给内置 xy-descriptions 的属性Omit<DescriptionsProps, 'items' | 'title' | 'extra'>{}
drawer-props透传给抽屉容器的属性Partial<DrawerProps>{}
dialog-props透传给弹窗容器的属性Partial<DialogProps>{}

DetailPanel Events

事件名说明参数
update:open打开状态变化时派发(value: boolean) => void
closed面板完全关闭后派发() => void

DetailPanel Slots

插槽说明
default主内容区
description头部说明区
meta头部右侧元信息,仅抽屉容器生效
timeline历史记录区
actions底部动作区