# 🎨 快速样式参考指南

> 管理端样式速查手册 - 常用类名和使用示例

---

## 📋 目录

- [设计变量](#设计变量)
- [常用组件样式](#常用组件样式)
- [数据展示类](#数据展示类)
- [工具类](#工具类)
- [动画效果](#动画效果)
- [状态标签](#状态标签)
- [响应式断点](#响应式断点)

---

## 🎨 设计变量

### 颜色

```css
/* 主题色 */
var(--primary-color)        /* #3b82f6 蓝色 */
var(--primary-light)        /* #60a5fa 浅蓝 */
var(--primary-dark)         /* #2563eb 深蓝 */

/* 语义色 */
var(--success-color)        /* #22c55e 成功绿 */
var(--warning-color)        /* #facc15 警告黄 */
var(--danger-color)         /* #ef4444 危险红 */
var(--info-color)           /* #a1a1aa 信息灰 */

/* 文本色 */
var(--text-primary)         /* #1e293b 主要文本 */
var(--text-secondary)       /* #475569 次要文本 */
var(--text-tertiary)        /* #94a3b8 三级文本 */

/* 背景色 */
var(--bg-primary)           /* #f8fafc 主背景 */
var(--bg-secondary)         /* #f1f5f9 次背景 */
var(--bg-tertiary)          /* #e2e8f0 三级背景 */

/* 边框色 */
var(--border-color)         /* #e2e8f0 标准边框 */
var(--border-light)         /* #f1f5f9 浅色边框 */
var(--border-dark)          /* #cbd5e1 深色边框 */
```

### 间距

```css
var(--spacing-xs)           /* 4px */
var(--spacing-sm)           /* 8px */
var(--spacing-base)         /* 12px */
var(--spacing-md)           /* 16px */
var(--spacing-lg)           /* 20px */
var(--spacing-xl)           /* 24px */
var(--spacing-2xl)          /* 32px */
var(--spacing-3xl)          /* 40px */
```

### 圆角

```css
var(--radius-sm)            /* 4px */
var(--radius-base)          /* 6px */
var(--radius-md)            /* 8px */
var(--radius-lg)            /* 12px */
var(--radius-xl)            /* 16px */
var(--radius-full)          /* 9999px 圆形 */
```

### 阴影

```css
var(--shadow-xs)            /* 最轻微阴影 */
var(--shadow-sm)            /* 轻微阴影 */
var(--shadow-base)          /* 标准阴影 */
var(--shadow-md)            /* 中等阴影 */
var(--shadow-lg)            /* 较强阴影 */
var(--shadow-xl)            /* 强阴影 */
var(--shadow-2xl)           /* 最强阴影 */
```

### 字体

```css
/* 字体大小 */
var(--font-xs)              /* 12px */
var(--font-sm)              /* 14px */
var(--font-base)            /* 16px */
var(--font-md)              /* 18px */
var(--font-lg)              /* 20px */
var(--font-xl)              /* 24px */
var(--font-2xl)             /* 28px */
var(--font-3xl)             /* 32px */

/* 字体粗细 */
var(--font-light)           /* 300 */
var(--font-normal)          /* 400 */
var(--font-medium)          /* 500 */
var(--font-semibold)        /* 600 */
var(--font-bold)            /* 700 */
```

### 过渡动画

```css
var(--transition-fast)      /* 0.15s ease-out */
var(--transition-base)      /* 0.2s ease-out */
var(--transition-slow)      /* 0.3s ease-out */
```

---

## 📦 常用组件样式

### 页面容器

```vue
<!-- 列表页面容器 -->
<div class="list-container">
  <!-- 内容 -->
</div>
```

### 页面标题

```vue
<!-- 带下划线的页面标题 -->
<h2 class="page-title">用户管理</h2>
```

### 工具栏卡片

```vue
<!-- 搜索和操作按钮区域 -->
<el-card shadow="never" class="toolbar-card">
  <el-button type="primary">新增</el-button>
  <el-input placeholder="搜索" />
</el-card>
```

### 表格卡片

```vue
<!-- 数据表格区域 -->
<el-card shadow="never" class="table-card">
  <el-table :data="list">
    <!-- 列定义 -->
  </el-table>
  
  <!-- 分页 -->
  <div class="pagination-container">
    <el-pagination />
  </div>
</el-card>
```

### 信息卡片

```vue
<!-- 详情信息卡片 -->
<div class="info-card">
  <div class="info-card-title">基本信息</div>
  <div class="info-card-content">
    <div class="info-row">
      <div class="info-label">姓名：</div>
      <div class="info-value">张三</div>
    </div>
  </div>
</div>
```

---

## 📊 数据展示类

### 文本样式

```vue
<!-- 标题突出显示（加粗、15px、主色） -->
<span class="data-highlight">用户姓名</span>

<!-- 金额数字（加粗、15px、蓝色） -->
<span class="amount-text">¥199.00</span>

<!-- 统计数字（加粗、16px、主色） -->
<span class="number-emphasis">1,234</span>

<!-- 描述文字（14px、次要色） -->
<span class="data-description">这是一段描述文字</span>

<!-- 元信息（12px、浅色） -->
<span class="data-meta">2024-10-25 14:30</span>

<!-- 单行文本省略 -->
<span class="text-ellipsis-line">很长的标题会自动省略...</span>

<!-- 两行文本省略 -->
<div class="text-ellipsis-2-lines">
  较长的描述文本，超过两行会显示省略号...
</div>

<!-- 三行文本省略 -->
<div class="text-ellipsis-3-lines">
  更长的内容描述，最多显示三行，超出部分会显示省略号...
</div>
```

### 状态标签

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

<!-- 信息状态 -->
<el-tag class="status-info" size="small" effect="light">
  进行中
</el-tag>

<!-- 待处理状态 -->
<el-tag class="status-pending" size="small" effect="light">
  待处理
</el-tag>

<!-- 处理中状态 -->
<el-tag class="status-processing" size="small" effect="light">
  处理中
</el-tag>

<!-- 禁用状态 -->
<el-tag class="status-disabled" size="small" effect="light">
  已禁用
</el-tag>

<!-- VIP 金色标签 -->
<el-tag class="vip-tag" size="small">
  VIP
</el-tag>

<!-- 热门标签（带脉冲动画） -->
<el-tag class="hot-tag" size="small">
  热门
</el-tag>
```

### 空状态

```vue
<!-- 表格空状态 -->
<template #empty>
  <div class="custom-empty-state">
    <el-icon class="empty-icon"><User /></el-icon>
    <div class="empty-text">暂无数据</div>
    <div class="empty-hint">点击"新增"按钮开始添加</div>
  </div>
</template>
```

---

## 🛠️ 工具类

### 文本对齐

```vue
<div class="text-left">左对齐</div>
<div class="text-center">居中对齐</div>
<div class="text-right">右对齐</div>
```

### 文本颜色

```vue
<span class="text-primary">主要文本</span>
<span class="text-secondary">次要文本</span>
<span class="text-tertiary">三级文本</span>
<span class="text-success">成功文本</span>
<span class="text-warning">警告文本</span>
<span class="text-danger">危险文本</span>
<span class="text-info">信息文本</span>
```

### 文本大小

```vue
<span class="text-xs">12px 文本</span>
<span class="text-sm">14px 文本</span>
<span class="text-base">16px 文本</span>
<span class="text-md">18px 文本</span>
<span class="text-lg">20px 文本</span>
<span class="text-xl">24px 文本</span>
```

### 字体粗细

```vue
<span class="font-light">细体 300</span>
<span class="font-normal">常规 400</span>
<span class="font-medium">中等 500</span>
<span class="font-semibold">半粗 600</span>
<span class="font-bold">粗体 700</span>
```

### 外边距

```vue
<!-- 顶部外边距 -->
<div class="mt-xs">上边距 4px</div>
<div class="mt-sm">上边距 8px</div>
<div class="mt-md">上边距 16px</div>
<div class="mt-lg">上边距 20px</div>
<div class="mt-xl">上边距 24px</div>

<!-- 底部外边距 -->
<div class="mb-xs">下边距 4px</div>
<div class="mb-sm">下边距 8px</div>
<div class="mb-md">下边距 16px</div>
<div class="mb-lg">下边距 20px</div>
<div class="mb-xl">下边距 24px</div>

<!-- 左侧外边距 -->
<span class="ml-xs">左边距 4px</span>
<span class="ml-sm">左边距 8px</span>
<span class="ml-md">左边距 16px</span>
<span class="ml-lg">左边距 20px</span>

<!-- 右侧外边距 -->
<span class="mr-xs">右边距 4px</span>
<span class="mr-sm">右边距 8px</span>
<span class="mr-md">右边距 16px</span>
<span class="mr-lg">右边距 20px</span>
```

### 内边距

```vue
<div class="p-xs">内边距 4px</div>
<div class="p-sm">内边距 8px</div>
<div class="p-md">内边距 16px</div>
<div class="p-lg">内边距 20px</div>
<div class="p-xl">内边距 24px</div>
```

### Flex 布局

```vue
<!-- 弹性布局 -->
<div class="flex">Flex 容器</div>

<!-- 居中对齐 -->
<div class="flex-center">垂直水平居中</div>

<!-- 两端对齐 -->
<div class="flex-between">
  <span>左侧内容</span>
  <span>右侧内容</span>
</div>

<!-- 垂直方向 -->
<div class="flex-col">垂直布局</div>

<!-- 换行 -->
<div class="flex flex-wrap">可换行的 Flex</div>

<!-- Flex 填充 -->
<div class="flex">
  <div class="flex-1">占满剩余空间</div>
</div>
```

### 圆角

```vue
<div class="rounded-sm">4px 圆角</div>
<div class="rounded">6px 圆角</div>
<div class="rounded-md">8px 圆角</div>
<div class="rounded-lg">12px 圆角</div>
<div class="rounded-full">圆形</div>
```

### 阴影

```vue
<div class="shadow-none">无阴影</div>
<div class="shadow-sm">轻微阴影</div>
<div class="shadow">标准阴影</div>
<div class="shadow-md">中等阴影</div>
<div class="shadow-lg">强阴影</div>
```

### 过渡动画

```vue
<div class="transition">标准过渡 0.2s</div>
<div class="transition-fast">快速过渡 0.15s</div>
<div class="transition-slow">缓慢过渡 0.3s</div>
```

### 鼠标样式

```vue
<div class="cursor-pointer">鼠标指针</div>
<div class="cursor-not-allowed">禁止点击</div>
```

### 显示/隐藏

```vue
<div class="hidden">完全隐藏（display: none）</div>
<div class="invisible">不可见但占位（visibility: hidden）</div>
<div class="visible">可见</div>
```

### 溢出处理

```vue
<div class="overflow-hidden">隐藏溢出</div>
<div class="overflow-auto">自动滚动条</div>
<div class="overflow-scroll">始终显示滚动条</div>
```

---

## 🎭 动画效果

### 入场动画

```vue
<!-- 淡入 -->
<div class="animate-fade-in">淡入效果</div>

<!-- 从下往上淡入 -->
<div class="animate-fade-in-up">从下往上</div>

<!-- 从上往下淡入 -->
<div class="animate-fade-in-down">从上往下</div>

<!-- 从左滑入 -->
<div class="animate-slide-in-left">从左滑入</div>

<!-- 从右滑入 -->
<div class="animate-slide-in-right">从右滑入</div>

<!-- 缩放进入 -->
<div class="animate-scale-in">缩放进入</div>

<!-- 弹跳进入 -->
<div class="animate-bounce-in">弹跳进入</div>
```

### 持续动画

```vue
<!-- 脉冲动画 -->
<div class="animate-pulse">脉冲效果</div>

<!-- 弹跳动画 -->
<div class="animate-bounce">弹跳效果</div>

<!-- 旋转动画 -->
<div class="animate-spin">旋转效果</div>

<!-- 闪烁动画 -->
<div class="animate-blink">闪烁效果</div>
```

### 交互动画

```vue
<!-- 悬停上浮 -->
<div class="hover-lift">鼠标悬停上浮</div>

<!-- 悬停放大 -->
<div class="hover-scale">鼠标悬停放大</div>

<!-- 悬停发光 -->
<div class="hover-glow">鼠标悬停发光</div>
```

---

## 💼 实用组件

### 徽章

```vue
<!-- 数字徽章 -->
<span class="badge">5</span>
<span class="badge badge-primary">新</span>
<span class="badge badge-success">完成</span>
<span class="badge badge-warning">待办</span>
<span class="badge badge-danger">99+</span>
```

### 状态点

```vue
<!-- 状态指示点 -->
<span class="status-dot status-dot-success"></span> 在线
<span class="status-dot status-dot-warning"></span> 离开
<span class="status-dot status-dot-danger"></span> 离线
<span class="status-dot status-dot-info"></span> 隐身
```

### 提示框

```vue
<!-- 信息提示框 -->
<div class="tip-box tip-box-info">
  <div class="tip-box-icon">ℹ️</div>
  <div class="tip-box-content">这是一条信息提示</div>
</div>

<!-- 成功提示框 -->
<div class="tip-box tip-box-success">
  <div class="tip-box-icon">✅</div>
  <div class="tip-box-content">操作成功</div>
</div>

<!-- 警告提示框 -->
<div class="tip-box tip-box-warning">
  <div class="tip-box-icon">⚠️</div>
  <div class="tip-box-content">请注意这个警告</div>
</div>

<!-- 危险提示框 -->
<div class="tip-box tip-box-danger">
  <div class="tip-box-icon">❌</div>
  <div class="tip-box-content">操作失败</div>
</div>
```

### 批量操作栏

```vue
<div class="batch-actions-bar">
  <div class="batch-actions-info">
    已选择 <span class="count">5</span> 项
  </div>
  <div class="batch-actions-buttons">
    <el-button type="primary" size="small">批量审核</el-button>
    <el-button type="danger" size="small">批量删除</el-button>
  </div>
</div>
```

---

## 📱 响应式断点

```css
/* 移动端 */
@media (max-width: 768px) {
  /* 小屏幕样式 */
}

/* 平板端 */
@media (max-width: 1024px) {
  /* 中等屏幕样式 */
}

/* 超大屏 */
@media (min-width: 1920px) {
  /* 大屏幕样式 */
}
```

---

## 🎯 常用场景示例

### 场景1: 列表页面

```vue
<template>
  <div class="list-container">
    <!-- 页面标题 -->
    <h2 class="page-title">用户管理</h2>
    
    <!-- 工具栏 -->
    <el-card shadow="never" class="toolbar-card">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-button type="primary">新增用户</el-button>
          <el-button>导出</el-button>
        </el-col>
        <el-col :span="18">
          <el-input placeholder="搜索用户" />
        </el-col>
      </el-row>
    </el-card>
    
    <!-- 数据表格 -->
    <el-card shadow="never" class="table-card">
      <el-table :data="list">
        <el-table-column prop="name" label="姓名">
          <template #default="{ row }">
            <span class="data-highlight">{{ row.name }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="amount" label="金额" align="right">
          <template #default="{ row }">
            <span class="amount-text">¥{{ row.amount }}</span>
          </template>
        </el-table-column>
        
        <el-table-column prop="status" label="状态" 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>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination />
      </div>
    </el-card>
  </div>
</template>

<style scoped>
@import '@/assets/list-common.css';
</style>
```

### 场景2: 数据卡片

```vue
<template>
  <div class="info-card">
    <div class="info-card-title">用户详情</div>
    <div class="info-card-content">
      <div class="info-row">
        <div class="info-label">用户名</div>
        <div class="info-value">
          <span class="data-highlight">张三</span>
        </div>
      </div>
      <div class="info-row">
        <div class="info-label">账户余额</div>
        <div class="info-value">
          <span class="amount-text">¥1,234.56</span>
        </div>
      </div>
      <div class="info-row">
        <div class="info-label">状态</div>
        <div class="info-value">
          <el-tag class="status-success" size="small" effect="light">
            正常
          </el-tag>
        </div>
      </div>
    </div>
  </div>
</template>
```

### 场景3: 统计卡片

```vue
<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <div class="info-card hover-lift">
        <div class="flex-between">
          <div>
            <div class="data-meta mb-xs">总用户数</div>
            <div class="number-emphasis">1,234</div>
          </div>
          <el-icon class="text-primary" :size="40"><User /></el-icon>
        </div>
      </div>
    </el-col>
    
    <el-col :span="6">
      <div class="info-card hover-lift">
        <div class="flex-between">
          <div>
            <div class="data-meta mb-xs">总收入</div>
            <div class="amount-text">¥98,765</div>
          </div>
          <el-icon class="text-success" :size="40"><Money /></el-icon>
        </div>
      </div>
    </el-col>
  </el-row>
</template>
```

---

## 📝 使用建议

### 1. 优先使用设计变量

✅ **推荐：**
```css
.custom-element {
  color: var(--primary-color);
  padding: var(--spacing-md);
  border-radius: var(--radius-base);
}
```

❌ **不推荐：**
```css
.custom-element {
  color: #3b82f6;
  padding: 16px;
  border-radius: 6px;
}
```

### 2. 使用工具类减少重复代码

✅ **推荐：**
```vue
<div class="flex-between mb-lg">
  <span class="text-primary font-semibold">标题</span>
  <span class="text-secondary text-sm">副标题</span>
</div>
```

❌ **不推荐：**
```vue
<div style="display: flex; justify-content: space-between; margin-bottom: 20px;">
  <span style="color: #1e293b; font-weight: 600;">标题</span>
  <span style="color: #475569; font-size: 14px;">副标题</span>
</div>
```

### 3. 引入通用样式文件

```vue
<style scoped>
/* 引入列表页面通用样式 */
@import '@/assets/list-common.css';

/* 只写特定页面的样式 */
.custom-class {
  /* 自定义样式 */
}
</style>
```

---

## 🎉 完成

现在你已经掌握了管理端所有核心样式的使用方法！

**相关文档：**
- `美化方案说明.md` - 完整设计方案
- `美化-快速开始.md` - 快速上手指南
- `数据展示优化说明.md` - 数据展示详解
- `样式优化完成总结.md` - 完成总结

**核心文件：**
- `src/assets/variables.css` - 设计变量
- `src/assets/animations.css` - 动画效果
- `src/assets/list-common.css` - 通用列表样式
- `src/assets/data-display.css` - 数据展示样式

---

*最后更新：2024-10-25*
*版本：v1.0*