# 📊 数据展示优化 - 快速参考指南

> 30 秒快速查找你需要的样式类和用法

---

## 🎯 常用样式类速查表

### 文字样式类

| 类名 | 效果 | 使用场景 |
|------|------|----------|
| `.data-highlight` | 15px 加粗，主色 | 重要数据（姓名、标题） |
| `.amount-text` | 15px 加粗，蓝色 | 金额数字 |
| `.amount-text.positive` | 绿色 | 正数金额 |
| `.amount-text.negative` | 红色 | 负数金额 |
| `.number-emphasis` | 16px 加粗，主色 | 数字强调 |
| `.text-ellipsis-line` | 单行省略 | 长标题文本 |
| `.text-ellipsis-2-lines` | 两行省略 | 中等长度描述 |
| `.text-ellipsis-3-lines` | 三行省略 | 较长描述 |
| `.data-title` | 16px 加粗 | 卡片标题 |
| `.data-description` | 14px 次要色 | 描述文字 |
| `.data-meta` | 12px 浅色 | 元信息（时间等） |

### 状态标签类

| 类名 | 颜色 | 使用场景 |
|------|------|----------|
| `.status-success` | 绿色 | 成功、已完成、正常 |
| `.status-warning` | 橙色 | 警告、待处理 |
| `.status-danger` `.status-error` | 红色 | 危险、错误、已拒绝 |
| `.status-info` | 蓝色 | 信息、进行中 |
| `.status-pending` | 灰色 | 待处理、待开始 |
| `.status-processing` | 青色 | 正在处理 |
| `.status-disabled` | 浅灰 | 已禁用、已注销 |
| `.vip-tag` | 金色渐变 | VIP 标识 |
| `.hot-tag` | 红色渐变+动画 | 热门标识 |
| `.new-tag` | 绿色渐变 | 新品标识 |

### 布局容器类

| 类名 | 效果 | 使用场景 |
|------|------|----------|
| `.data-card` | 圆角卡片 | 数据展示卡片 |
| `.data-card-header` | 卡片头部 | 卡片标题区 |
| `.data-card-content` | 卡片内容 | 卡片主体 |
| `.data-row` | Flex 行布局 | 数据行 |
| `.data-label` | 标签样式 | 数据标签 |
| `.data-value` | 值样式 | 数据值 |

### 空状态类

| 类名 | 效果 | 使用场景 |
|------|------|----------|
| `.custom-empty-state` | 空状态容器 | 表格空状态 |
| `.empty-icon` | 大图标 | 空状态图标 |
| `.empty-text` | 主文字 | 空状态主文字 |
| `.empty-hint` | 提示文字 | 空状态提示 |

---

## 🚀 快速复制代码

### 1. 表格空状态

```vue
<el-table :data="list">
  <template #empty>
    <div class="custom-empty-state">
      <el-icon class="empty-icon"><Document /></el-icon>
      <div class="empty-text">暂无数据</div>
      <div class="empty-hint">您可以尝试调整筛选条件</div>
    </div>
  </template>
  <!-- 表格列 -->
</el-table>
```

### 2. 状态标签

```vue
<!-- 成功 -->
<el-tag class="status-success" size="small" effect="light">
  已完成
</el-tag>

<!-- 警告 -->
<el-tag class="status-warning" size="small" effect="light">
  待审核
</el-tag>

<!-- 危险 -->
<el-tag class="status-danger" size="small" effect="light">
  已拒绝
</el-tag>

<!-- VIP -->
<el-tag class="vip-tag" size="small">
  VIP 会员
</el-tag>
```

### 3. 长文本省略

```vue
<!-- 单行省略 -->
<span class="text-ellipsis-line" :title="row.name">
  {{ row.name }}
</span>

<!-- 两行省略 -->
<div class="text-ellipsis-2-lines" :title="row.description">
  {{ row.description }}
</div>
```

### 4. 数字强调

```vue
<!-- 关键数字 -->
<span class="number-emphasis">999</span>

<!-- 金额 -->
<span class="amount-text">¥199.00</span>

<!-- 正数金额 -->
<span class="amount-text positive">+50.00</span>

<!-- 负数金额 -->
<span class="amount-text negative">-30.00</span>
```

### 5. 表格列对齐

```vue
<!-- 文字左对齐（默认） -->
<el-table-column prop="name" label="名称" />

<!-- 数字右对齐 -->
<el-table-column prop="amount" label="金额" align="right" />

<!-- 状态居中 -->
<el-table-column prop="status" label="状态" align="center">
  <template #default="{ row }">
    <el-tag class="status-success" size="small" effect="light">
      {{ row.status }}
    </el-tag>
  </template>
</el-table-column>
```

### 6. 数据卡片

```vue
<div class="data-card">
  <div class="data-card-header">
    <div class="data-card-title">订单详情</div>
    <el-tag class="status-success" size="small">已完成</el-tag>
  </div>
  <div class="data-card-content">
    <div class="data-row">
      <span class="data-label">订单编号</span>
      <span class="data-value">20241025001</span>
    </div>
    <div class="data-row">
      <span class="data-label">订单金额</span>
      <span class="amount-text">¥199.00</span>
    </div>
  </div>
</div>
```

### 7. 开关样式优化

```vue
<el-switch
  v-model="row.status"
  :active-value="1"
  :inactive-value="0"
  active-color="var(--success-color)"
  inactive-color="var(--border-dark)"
  @change="handleStatusChange(row)"
/>
```

---

## 📋 表格列优化模板

### 序号列
```vue
<el-table-column type="index" label="序号" width="60" />
```

### ID 列
```vue
<el-table-column prop="id" label="ID" width="80" align="center" />
```

### 头像列
```vue
<el-table-column prop="avatar" label="头像" width="80">
  <template #default="{ row }">
    <el-avatar :src="row.avatar" />
  </template>
</el-table-column>
```

### 图片列
```vue
<el-table-column prop="imageUrl" label="图片" width="150">
  <template #default="{ row }">
    <el-image
      :src="row.imageUrl"
      fit="cover"
      class="banner-image"
      :preview-src-list="[row.imageUrl]"
    />
  </template>
</el-table-column>
```

### 标题列（带省略）
```vue
<el-table-column prop="title" label="标题" min-width="150">
  <template #default="{ row }">
    <span class="data-highlight text-ellipsis-line" :title="row.title">
      {{ row.title }}
    </span>
  </template>
</el-table-column>
```

### 描述列（带省略）
```vue
<el-table-column prop="description" label="描述" min-width="200">
  <template #default="{ row }">
    <span class="data-description text-ellipsis-2-lines" :title="row.description">
      {{ row.description || '-' }}
    </span>
  </template>
</el-table-column>
```

### 状态列（标签）
```vue
<el-table-column prop="status" label="状态" width="90" align="center">
  <template #default="{ row }">
    <el-tag 
      :class="row.status === 1 ? 'status-success' : 'status-danger'" 
      size="small"
      effect="light"
    >
      {{ row.status === 1 ? '正常' : '禁用' }}
    </el-tag>
  </template>
</el-table-column>
```

### 金额列
```vue
<el-table-column prop="amount" label="金额" width="120" align="right">
  <template #default="{ row }">
    <span class="amount-text">¥{{ row.amount }}</span>
  </template>
</el-table-column>
```

### 数量列
```vue
<el-table-column prop="count" label="数量" width="80" align="center">
  <template #default="{ row }">
    <span class="number-emphasis">{{ row.count }}</span>
  </template>
</el-table-column>
```

### VIP 列
```vue
<el-table-column prop="vipLevel" label="VIP" width="130" align="center">
  <template #default="{ row }">
    <el-tag 
      :class="row.isVip ? 'vip-tag' : ''" 
      :type="row.isVip ? '' : 'info'" 
      size="small"
      effect="light"
    >
      {{ row.vipLevel || '普通用户' }}
    </el-tag>
  </template>
</el-table-column>
```

### 时间列
```vue
<el-table-column prop="createdAt" label="创建时间" width="170">
  <template #default="{ row }">
    <span class="data-meta">{{ row.createdAt }}</span>
  </template>
</el-table-column>
```

### 开关列
```vue
<el-table-column prop="status" label="状态" width="90" align="center">
  <template #default="{ row }">
    <el-switch
      v-model="row.status"
      :active-value="1"
      :inactive-value="0"
      active-color="var(--success-color)"
      @change="handleStatusChange(row)"
    />
  </template>
</el-table-column>
```

### 操作列
```vue
<el-table-column label="操作" width="200" fixed="right">
  <template #default="{ row }">
    <el-button type="primary" size="small" link @click="handleView(row)">
      详情
    </el-button>
    <el-button type="success" size="small" link @click="handleEdit(row)">
      编辑
    </el-button>
    <el-button type="danger" size="small" link @click="handleDelete(row)">
      删除
    </el-button>
  </template>
</el-table-column>
```

---

## 🎨 Element Plus 组件属性推荐

### el-tag 推荐用法

```vue
<!-- 浅色效果（推荐） -->
<el-tag size="small" effect="light">标签</el-tag>

<!-- 自定义颜色 -->
<el-tag class="status-success" size="small" effect="light">
  成功
</el-tag>
```

### el-table 推荐属性

```vue
<el-table
  v-loading="loading"
  :data="list"
  stripe
  border
  highlight-current-row
>
  <template #empty>
    <!-- 自定义空状态 -->
  </template>
</el-table>
```

### el-button 推荐用法

```vue
<!-- 表格内操作按钮 -->
<el-button type="primary" size="small" link>操作</el-button>

<!-- 工具栏按钮 -->
<el-button type="primary" icon="Plus">新增</el-button>
```

---

## 💡 常见场景快速方案

### 场景 1：用户状态显示

```vue
<el-table-column prop="status" label="状态" width="90" align="center">
  <template #default="{ row }">
    <el-tag 
      v-if="row.status === 1" 
      class="status-success" 
      size="small" 
      effect="light"
    >
      正常
    </el-tag>
    <el-tag 
      v-else-if="row.status === 0" 
      class="status-danger" 
      size="small" 
      effect="light"
    >
      禁用
    </el-tag>
    <el-tag 
      v-else 
      class="status-disabled" 
      size="small" 
      effect="light"
    >
      注销
    </el-tag>
  </template>
</el-table-column>
```

### 场景 2：订单状态显示

```vue
<el-table-column prop="orderStatus" label="订单状态" width="100" align="center">
  <template #default="{ row }">
    <el-tag 
      :class="{
        'status-pending': row.orderStatus === 1,
        'status-processing': row.orderStatus === 2,
        'status-success': row.orderStatus === 3,
        'status-danger': row.orderStatus === 4
      }"
      size="small"
      effect="light"
    >
      {{ getOrderStatusText(row.orderStatus) }}
    </el-tag>
  </template>
</el-table-column>
```

### 场景 3：审核状态显示

```vue
<el-table-column prop="auditStatus" label="审核状态" width="100" align="center">
  <template #default="{ row }">
    <el-tag 
      :class="{
        'status-pending': row.auditStatus === 0,
        'status-success': row.auditStatus === 1,
        'status-danger': row.auditStatus === 2
      }"
      size="small"
      effect="light"
    >
      {{ row.auditStatus === 0 ? '待审核' : row.auditStatus === 1 ? '已通过' : '已拒绝' }}
    </el-tag>
  </template>
</el-table-column>
```

### 场景 4：支付状态显示

```vue
<el-table-column prop="payStatus" label="支付状态" width="100" align="center">
  <template #default="{ row }">
    <el-tag 
      :class="{
        'status-warning': row.payStatus === 0,
        'status-success': row.payStatus === 1,
        'status-danger': row.payStatus === 2
      }"
      size="small"
      effect="light"
    >
      {{ row.payStatus === 0 ? '待支付' : row.payStatus === 1 ? '已支付' : '已取消' }}
    </el-tag>
  </template>
</el-table-column>
```

### 场景 5：是否/真假值显示

```vue
<el-table-column prop="isCompleted" label="是否完成" width="100" align="center">
  <template #default="{ row }">
    <el-tag 
      :class="row.isCompleted ? 'status-success' : 'status-warning'" 
      size="small"
      effect="light"
    >
      {{ row.isCompleted ? '是' : '否' }}
    </el-tag>
  </template>
</el-table-column>
```

---

## 🔍 快速检查清单

优化一个列表页面时，确保完成以下项目：

- [ ] 添加自定义空状态
- [ ] 标题文字使用 `.data-highlight`
- [ ] 长文本添加省略 `.text-ellipsis-line`
- [ ] 状态字段改用彩色标签
- [ ] 标签添加 `effect="light"`
- [ ] 数字使用 `.number-emphasis`
- [ ] 金额使用 `.amount-text`
- [ ] VIP 使用 `.vip-tag`
- [ ] 开关添加自定义颜色
- [ ] 需要居中的列添加 `align="center"`
- [ ] 操作按钮使用 `size="small" link`

---

## 📞 需要帮助？

- 查看 `data-display.css` 完整样式定义
- 参考 `UserList.vue` 和 `BannerList.vue` 示例
- 阅读 `数据展示优化说明.md` 详细文档

---

**快速参考，即查即用！** 🚀📊