# 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>
```
