# DetailPopover 详情弹窗组件

一个通用的详情弹窗组件，用于展示结构化的详情信息。

## 功能特性

- ✅ 自定义标题和标题图标
- ✅ 支持多个详情项（label + content）
- ✅ 支持横向/纵向布局
- ✅ 支持自定义内容（插槽或组件）
- ✅ 支持标签图标
- ✅ 支持内容区域自定义样式类

## Props

| 参数        | 说明               | 类型             | 可选值                                                                                                    | 默认值    |
| ----------- | ------------------ | ---------------- | --------------------------------------------------------------------------------------------------------- | --------- |
| title       | 标题               | string           | -                                                                                                         | ''        |
| titleIcon   | 标题图标组件       | Component        | -                                                                                                         | undefined |
| items       | 详情项列表         | DetailItem[]     | -                                                                                                         | []        |
| placement   | 弹出位置           | string           | top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end | right     |
| width       | Popover 宽度       | string \| number | -                                                                                                         | 300       |
| trigger     | 触发方式           | string           | click/focus/hover/contextmenu                                                                             | click     |
| popperClass | Popover 自定义类名 | string           | -                                                                                                         | ''        |

## DetailItem 接口

```typescript
interface DetailItem {
	label?: string; // 标签文本
	content?: string | number; // 内容文本
	labelIcon?: Component; // 标签图标
	layout?: 'horizontal' | 'vertical'; // 布局方向，默认 vertical
	contentClass?: string; // 内容区域的自定义类名
	component?: Component; // 自定义组件
	componentProps?: Record<string, any>; // 自定义组件的 props
}
```

## Slots

| 插槽名          | 说明                               | 参数                 |
| --------------- | ---------------------------------- | -------------------- |
| reference       | 触发元素                           | -                    |
| content-{index} | 自定义第 index 项的内容            | { item: DetailItem } |
| custom-content  | 自定义内容（显示在所有详情项之后） | -                    |

## 使用示例

### 基础用法

```vue
<template>
	<DetailPopover
		title="专业变更详情"
		:title-icon="InfoFilled"
		:width="320"
		:items="[
			{ label: '旧专业', content: '计算机应用技术' },
			{ label: '新专业', content: '软件技术', contentClass: 'new-major' },
		]"
	>
		<template #reference>
			<span class="link">查看详情</span>
		</template>
	</DetailPopover>
</template>

<script setup>
import DetailPopover from '/@/components/DetailPopover/index.vue';
import { InfoFilled } from '@element-plus/icons-vue';
</script>
```

### 横向布局

```vue
<DetailPopover
	title="异动审核详情"
	:items="[
		{
			label: '审核状态',
			layout: 'horizontal',
			content: '待审核',
		},
	]"
>
  <template #reference>
    <el-button>查看</el-button>
  </template>
</DetailPopover>
```

### 使用插槽自定义内容

```vue
<DetailPopover
	title="异动审核详情"
	:items="[
		{ label: '审核状态', layout: 'horizontal' },
		{ label: '备注信息', contentClass: 'reason-content' },
	]"
>
  <template #reference>
    <ClickableTag>待审核</ClickableTag>
  </template>
  
  <!-- 自定义第一项内容 -->
  <template #content-0>
    <ClickableTag type="warning">待审核</ClickableTag>
  </template>
  
  <!-- 自定义第二项内容 -->
  <template #content-1>
    <div class="reason-content">
      <el-icon><Warning /></el-icon>
      <span>需要补充材料</span>
    </div>
  </template>
</DetailPopover>
```

### 使用标签图标

```vue
<DetailPopover
	title="详情"
	:items="[
		{
			label: '状态',
			labelIcon: CircleCheck,
			content: '已完成',
		},
	]"
>
  <template #reference>
    <el-button>查看</el-button>
  </template>
</DetailPopover>
```

## 样式自定义

可以通过 `contentClass` 为内容区域添加自定义样式类：

```vue
<DetailPopover
	:items="[
		{
			label: '新专业',
			content: '软件技术',
			contentClass: 'new-major', // 添加自定义样式类
		},
	]"
>
  <template #reference>
    <span>查看</span>
  </template>
</DetailPopover>

<style scoped>
.new-major {
	color: var(--el-color-primary);
	font-weight: 500;
}
</style>
```
