# UGDataPanel 数据面板

> 适配器：Vue；状态：available；slug：`data-panel`。

用于统一数据块的标题、操作区、内容布局以及加载、空和错误状态。

## 适用场景

- 统计图、排名或明细需要统一标题、操作区和异步状态容器。

## 不适用场景

- 只需要普通内容分组时使用 Card。

## 公开入口

- 包入口：`@ug666/ui-vue/components`
- 公开成员：`UGDataPanel`
- 交互文档：[https://ui.ug666.top/vue/components/data-panel](https://ui.ug666.top/vue/components/data-panel)

```vue
import { UGDataPanel } from '@ug666/ui-vue/components'
```

## 使用规则

- 业务请求和字段映射留在消费项目，面板只负责通用结构与状态。
- 标题保持单层级，不在面板内叠加业务副标题。
- 双向值优先使用组件声明的 v-model 参数。
- 事件、插槽和 expose 以 Vue 类型为准，不照搬 React 回调名。
- 只通过公开 Props、事件、插槽、class/className 和语义 Token 扩展。

## 相关候选

- [card](https://ui.ug666.top/ai/vue/components/card.md)
- [empty-state](https://ui.ug666.top/ai/vue/components/empty-state.md)
- [spinner](https://ui.ug666.top/ai/vue/components/spinner.md)
- [trend-chart](https://ui.ug666.top/ai/vue/components/trend-chart.md)

## 生成前检查

- 当前适配器是否真实提供该组件。
- 导入路径、组件名和 API 是否存在于当前版本类型声明。
- 是否覆盖长文本、窄容器、键盘、焦点、disabled、loading 和错误状态。