<template>
  <div class="dashboard-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2 class="page-title">数据面板</h2>
      <div class="page-subtitle">实时监控和分析平台关键数据指标</div>
    </div>
    
    <!-- 统计卡片 -->
    <el-row :gutter="24" class="stats-row">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card stat-card--primary">
          <div class="stat-content">
            <div class="stat-icon-wrapper">
              <el-icon class="stat-icon"><User /></el-icon>
            </div>
            <div class="stat-info">
              <p class="stat-label">总用户数</p>
              <h3 class="stat-value">{{ stats.totalUsers }}</h3>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card stat-card--success">
          <div class="stat-content">
            <div class="stat-icon-wrapper">
              <el-icon class="stat-icon"><Calendar /></el-icon>
            </div>
            <div class="stat-info">
              <p class="stat-label">活动数量</p>
              <h3 class="stat-value">{{ stats.totalActivities }}</h3>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card stat-card--warning">
          <div class="stat-content">
            <div class="stat-icon-wrapper">
              <el-icon class="stat-icon"><TrophyBase /></el-icon>
            </div>
            <div class="stat-info">
              <p class="stat-label">成功案例</p>
              <h3 class="stat-value">{{ stats.totalCases }}</h3>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card stat-card--danger">
          <div class="stat-content">
            <div class="stat-icon-wrapper">
              <el-icon class="stat-icon"><Reading /></el-icon>
            </div>
            <div class="stat-info">
              <p class="stat-label">课程数量</p>
              <h3 class="stat-value">{{ stats.totalCourses }}</h3>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 图表区域 -->
    <el-row :gutter="24" class="charts-row">
      <el-col :xs="24" :md="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">用户增长趋势</span>
            </div>
          </template>
          <div ref="userTrendChart" class="chart-container"></div>
        </el-card>
      </el-col>
      
      <el-col :xs="24" :md="12">
        <el-card shadow="hover" class="chart-card">
          <template #header>
            <div class="card-header">
              <span class="card-title">活动报名统计</span>
            </div>
          </template>
          <div ref="activityStatsChart" class="chart-container"></div>
        </el-card>
      </el-col>
    </el-row>
    
    <!-- 最近活动 -->
    <el-card shadow="hover" class="table-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">最近活动</span>
        </div>
      </template>
      <el-table :data="recentActivities" style="width: 100%" class="dashboard-table">
        <el-table-column prop="name" label="活动名称" min-width="200">
          <template #default="{ row }">
            <div class="activity-name">{{ row.name }}</div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="类型" width="120">
          <template #default="{ row }">
            <el-tag :type="row.type === 1 ? 'success' : 'primary'" size="small" effect="light">
              {{ row.type === 1 ? '线上' : '线下' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="participants" label="报名人数" width="120" align="center" />
        <el-table-column prop="status" label="状态" width="120" align="center">
          <template #default="{ row }">
            <el-tag :type="getStatusType(row.status)" size="small" effect="light">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" width="200" align="center" />
        <el-table-column label="操作" width="120" align="center">
          <template #default="{ row }">
            <el-button type="primary" size="small" link>
              查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { User, Calendar, TrophyBase, Reading, ArrowUp, Plus } from '@element-plus/icons-vue'
import * as echarts from 'echarts'
import request from '@/utils/request'

const stats = ref({
  totalUsers: 0,
  totalActivities: 0,
  totalCases: 0,
  totalCourses: 0
})

const recentActivities = ref([])
const userTrendChart = ref(null)
const activityStatsChart = ref(null)
let userChart = null
let activityChart = null

const loadStats = async () => {
  try {
    const response = await request.get('/admin/dashboard/stats')
    if (response.code === 200) {
      stats.value = {
        totalUsers: response.data.totalUsers || 0,
        totalActivities: response.data.totalActivities || 0,
        totalCases: response.data.totalCases || 0,
        totalCourses: response.data.totalCourses || 0
      }
    }
  } catch (error) {
    console.error('加载统计数据失败:', error)
    // 使用默认值
    stats.value = {
      totalUsers: 0,
      totalActivities: 0,
      totalCases: 0,
      totalCourses: 0
    }
  }
}

const loadRecentActivities = async () => {
  try {
    const response = await request.get('/admin/dashboard/recent-activities', {
      params: { limit: 5 }
    })
    if (response.code === 200) {
      // 处理活动数据
      const activities = response.data || []
      recentActivities.value = activities.map(activity => ({
        name: activity.name || '未命名活动',
        type: activity.type || 2,
        participants: activity.actualParticipants || 0,
        status: getActivityStatus(activity),
        startTime: formatDateTime(activity.startTime) || '-'
      }))
      console.log('最近活动数据:', recentActivities.value)
    }
  } catch (error) {
    console.error('加载最近活动失败:', error)
    recentActivities.value = []
  }
}

// 根据时间判断活动状态
const getActivityStatus = (activity) => {
  if (!activity.startTime || !activity.endTime) return 1
  
  const now = new Date()
  const start = new Date(activity.startTime)
  const end = new Date(activity.endTime)
  
  if (now < start) return 1 // 未开始
  if (now >= start && now <= end) return 2 // 进行中
  return 3 // 已结束
}

// 格式化日期时间
const formatDateTime = (dateTime) => {
  if (!dateTime) return '-'
  const date = new Date(dateTime)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hours = String(date.getHours()).padStart(2, '0')
  const minutes = String(date.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}`
}

const getStatusType = (status) => {
  const types = { 1: 'info', 2: 'success', 3: 'warning' }
  return types[status] || 'info'
}

const getStatusText = (status) => {
  const texts = { 1: '未开始', 2: '进行中', 3: '已结束' }
  return texts[status] || '未知'
}

// 初始化用户增长趋势图表
const initUserTrendChart = async () => {
  if (!userTrendChart.value) {
    console.warn('用户趋势图表 DOM 未准备好')
    return
  }
  
  try {
    const response = await request.get('/admin/dashboard/user-trend', {
      params: { days: 7 }
    })
    
    if (response.code === 200 && response.data) {
      // 确保 DOM 已渲染完成
      await nextTick()
      
      // 如果已经有实例，先销毁
      if (userChart) {
        userChart.dispose()
      }
      
      userChart = echarts.init(userTrendChart.value)
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: response.data.dates || [],
          axisLabel: {
            rotate: 45
          }
        },
        yAxis: {
          type: 'value',
          name: '用户数'
        },
        series: [{
          name: '新增用户',
          type: 'line',
          smooth: true,
          data: response.data.counts || [],
          itemStyle: {
            color: '#409EFF'
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: 'rgba(64, 158, 255, 0.3)'
              }, {
                offset: 1,
                color: 'rgba(64, 158, 255, 0.05)'
              }]
            }
          }
        }]
      }
      
      userChart.setOption(option)
    }
  } catch (error) {
    console.error('加载用户趋势图表失败:', error)
  }
}

// 初始化活动报名统计图表
const initActivityStatsChart = async () => {
  if (!activityStatsChart.value) {
    console.warn('活动统计图表 DOM 未准备好')
    return
  }
  
  try {
    const response = await request.get('/admin/dashboard/activity-stats', {
      params: { days: 7 }
    })
    
    if (response.code === 200 && response.data) {
      // 确保 DOM 已渲染完成
      await nextTick()
      
      // 如果已经有实例，先销毁
      if (activityChart) {
        activityChart.dispose()
      }
      
      activityChart = echarts.init(activityStatsChart.value)
      
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: response.data.dates || [],
          axisLabel: {
            rotate: 45
          }
        },
        yAxis: {
          type: 'value',
          name: '报名人数'
        },
        series: [{
          name: '活动报名',
          type: 'bar',
          data: response.data.counts || [],
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0,
                color: '#E91E63'
              }, {
                offset: 1,
                color: '#F06292'
              }]
            },
            borderRadius: [8, 8, 0, 0]
          }
        }]
      }
      
      activityChart.setOption(option)
    }
  } catch (error) {
    console.error('加载活动统计图表失败:', error)
  }
}

onMounted(async () => {
  // 加载统计数据
  await loadStats()
  await loadRecentActivities()
  
  // 确保 DOM 完全渲染后再初始化图表
  await nextTick()
  
  // 使用 setTimeout 确保 ECharts 能找到 DOM
  setTimeout(async () => {
    await initUserTrendChart()
    await initActivityStatsChart()
  }, 300)
  
  // 监听窗口大小变化，自动调整图表
  const handleResize = () => {
    if (userChart) userChart.resize()
    if (activityChart) activityChart.resize()
  }
  
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  // 销毁图表实例
  if (userChart) {
    userChart.dispose()
    userChart = null
  }
  if (activityChart) {
    activityChart.dispose()
    activityChart = null
  }
  
  // 移除事件监听
  window.removeEventListener('resize', () => {})
})
</script>

<style scoped>
/* ==================== 全局变量 ==================== */
:root {
  --primary-gradient: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%);
  --success-gradient: linear-gradient(135deg, #67C23A 0%, #85CE61 100%);
  --warning-gradient: linear-gradient(135deg, #E6A23C 0%, #F0C14B 100%);
  --danger-gradient: linear-gradient(135deg, #F56C6C 0%, #F78989 100%);
  --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  --card-shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.12);
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.4s ease;
}

/* ==================== 仪表盘容器 ==================== */
.dashboard-container {
  padding: 24px;
  background-color: #f8f9fa;
  min-height: 100vh;
  animation: fadeIn 0.6s ease-out;
}

/* 页面标题 */
.page-header {
  margin-bottom: 32px;
}

.page-title {
  font-size: 28px;
  font-weight: 700;
  color: #2c3e50;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}

.page-subtitle {
  font-size: 14px;
  color: #909399;
  font-weight: 400;
}

/* ==================== 统计卡片区域 ==================== */
.stats-row {
  margin-bottom: 28px;
}

.stat-card {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  overflow: hidden;
  position: relative;
  animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 卡片渐变边框效果 */
.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  opacity: 0.9;
  z-index: 2;
}

.stat-card--primary::before {
  background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%);
}

.stat-card--success::before {
  background: linear-gradient(135deg, #67C23A 0%, #85CE61 100%);
}

.stat-card--warning::before {
  background: linear-gradient(135deg, #E6A23C 0%, #F0C14B 100%);
}

.stat-card--danger::before {
  background: linear-gradient(135deg, #F56C6C 0%, #F78989 100%);
}

/* 卡片发光效果 */
.stat-card::after {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
  border-radius: 16px;
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.stat-card:hover::after {
  opacity: 1;
}

.stat-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
}

/* 统计卡片内容 */
.stat-content {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 32px;
  position: relative;
  z-index: 3;
}

.stat-icon-wrapper {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.stat-icon-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  opacity: 0.6;
}

.stat-card--primary .stat-icon-wrapper {
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.1) 0%, rgba(102, 177, 255, 0.05) 100%);
  box-shadow: 0 4px 16px rgba(64, 158, 255, 0.2);
}

.stat-card--success .stat-icon-wrapper {
  background: linear-gradient(135deg, rgba(103, 194, 58, 0.1) 0%, rgba(133, 206, 97, 0.05) 100%);
  box-shadow: 0 4px 16px rgba(103, 194, 58, 0.2);
}

.stat-card--warning .stat-icon-wrapper {
  background: linear-gradient(135deg, rgba(230, 162, 60, 0.1) 0%, rgba(240, 193, 75, 0.05) 100%);
  box-shadow: 0 4px 16px rgba(230, 162, 60, 0.2);
}

.stat-card--danger .stat-icon-wrapper {
  background: linear-gradient(135deg, rgba(245, 108, 108, 0.1) 0%, rgba(247, 137, 137, 0.05) 100%);
  box-shadow: 0 4px 16px rgba(245, 108, 108, 0.2);
}

.stat-card:hover .stat-icon-wrapper {
  transform: scale(1.1) rotate(5deg);
}

.stat-icon {
  font-size: 36px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
}

.stat-card--primary .stat-icon {
  color: #409EFF;
  text-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
}

.stat-card--success .stat-icon {
  color: #67C23A;
  text-shadow: 0 4px 12px rgba(103, 194, 58, 0.2);
}

.stat-card--warning .stat-icon {
  color: #E6A23C;
  text-shadow: 0 4px 12px rgba(230, 162, 60, 0.2);
}

.stat-card--danger .stat-icon {
  color: #F56C6C;
  text-shadow: 0 4px 12px rgba(245, 108, 108, 0.2);
}

.stat-card:hover .stat-icon {
  transform: scale(1.2);
}

.stat-info {
  flex: 1;
  min-width: 0;
}

.stat-label {
  font-size: 13px;
  color: #909399;
  margin: 0 0 10px 0;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.8;
}

.stat-value {
  font-size: 36px;
  font-weight: 800;
  color: #2c3e50;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -1px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.stat-card:hover .stat-value {
  transform: translateX(5px);
}

/* ==================== 图表区域 ==================== */
.charts-row {
  margin-bottom: 28px;
}

.chart-card {
  height: 100%;
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s both;
  position: relative;
}

.chart-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #409EFF, #67C23A);
  opacity: 0.8;
}

.chart-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  transform: translateY(-6px) scale(1.01);
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 16px;
}

.card-title {
  font-size: 17px;
  font-weight: 700;
  color: #2c3e50;
  letter-spacing: -0.3px;
  position: relative;
  padding-left: 12px;
}

.card-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 16px;
  background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%);
  border-radius: 2px;
}

.chart-card :deep(.el-card__header) {
  background: transparent;
  font-size: 17px;
  font-weight: 700;
  color: #2c3e50;
  border-bottom: 1px solid rgba(235, 238, 245, 0.8);
  padding: 24px 28px;
}

.chart-container {
  width: 100%;
  height: 380px;
  padding: 24px;
  background: radial-gradient(circle at top right, rgba(64, 158, 255, 0.03) 0%, transparent 50%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.chart-card:hover .chart-container {
  background: radial-gradient(circle at top right, rgba(64, 158, 255, 0.06) 0%, transparent 50%);
}

/* ==================== 表格卡片 ==================== */
.table-card {
  border: none;
  border-radius: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  animation: fadeInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
  position: relative;
}

.table-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #67C23A, #E6A23C);
  opacity: 0.8;
}

.table-card:hover {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

.table-card :deep(.el-card__header) {
  background: transparent;
  font-size: 17px;
  font-weight: 700;
  color: #2c3e50;
  border-bottom: 1px solid rgba(235, 238, 245, 0.8);
  padding: 24px 28px;
}

/* 表格样式增强 */
.dashboard-table {
  font-size: 14px;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

.dashboard-table :deep(.el-table__header-wrapper) {
  background: linear-gradient(135deg, #fafafa 0%, #f0f2f5 100%);
}

.dashboard-table :deep(.el-table th) {
  background-color: transparent;
  color: #606266;
  font-weight: 700;
  height: 56px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(235, 238, 245, 0.8);
  font-size: 13px;
  letter-spacing: 0.5px;
}

.dashboard-table :deep(.el-table td) {
  color: #606266;
  height: 52px;
  padding: 0 20px;
  border-bottom: 1px solid rgba(240, 240, 240, 0.6);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-table :deep(.el-table__row) {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.dashboard-table :deep(.el-table__row)::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(64, 158, 255, 0.05) 0%, transparent 100%);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-table :deep(.el-table__row:hover) {
  background-color: #f8fafc;
  transform: translateX(5px);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.dashboard-table :deep(.el-table__row:hover::after) {
  width: 100%;
}

.dashboard-table :deep(.el-table__body-wrapper) {
  overflow-x: auto;
  border-radius: 0 0 16px 16px;
}

/* 活动名称 */
.activity-name {
  color: #409EFF;
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: inline-block;
  padding: 2px 0;
}

.activity-name::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(135deg, #409EFF 0%, #66B1FF 100%);
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.activity-name:hover {
  color: #66B1FF;
  transform: translateX(3px);
}

.activity-name:hover::after {
  width: 100%;
}

/* 标签样式 */
.dashboard-table :deep(.el-tag) {
  font-weight: 600;
  border-radius: 16px;
  padding: 6px 16px;
  font-size: 12px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  border: none;
}

.dashboard-table :deep(.el-tag--success) {
  background: linear-gradient(135deg, rgba(103, 194, 58, 0.15) 0%, rgba(133, 206, 97, 0.05) 100%);
  color: #67C23A;
  box-shadow: 0 2px 8px rgba(103, 194, 58, 0.2);
}

.dashboard-table :deep(.el-tag--primary) {
  background: linear-gradient(135deg, rgba(64, 158, 255, 0.15) 0%, rgba(102, 177, 255, 0.05) 100%);
  color: #409EFF;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
}

.dashboard-table :deep(.el-tag--info) {
  background: linear-gradient(135deg, rgba(144, 147, 153, 0.15) 0%, rgba(166, 168, 173, 0.05) 100%);
  color: #909399;
  box-shadow: 0 2px 8px rgba(144, 147, 153, 0.2);
}

.dashboard-table :deep(.el-tag--warning) {
  background: linear-gradient(135deg, rgba(230, 162, 60, 0.15) 0%, rgba(240, 193, 75, 0.05) 100%);
  color: #E6A23C;
  box-shadow: 0 2px 8px rgba(230, 162, 60, 0.2);
}

/* 按钮样式 */
.dashboard-table :deep(.el-button--primary.is-text) {
  color: #409EFF;
  font-size: 13px;
  font-weight: 600;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.dashboard-table :deep(.el-button--primary.is-text:hover) {
  color: #66B1FF;
  background: transparent;
  transform: translateX(3px);
}

/* ==================== 动画效果 ==================== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ==================== 响应式设计 ==================== */

/* 平板设备 */
@media (max-width: 1024px) {
  .dashboard-container {
    padding: 20px;
  }

  .page-title {
    font-size: 28px;
  }

  .stat-value {
    font-size: 32px;
  }

  .stat-icon-wrapper {
    width: 64px;
    height: 64px;
  }

  .stat-icon {
    font-size: 32px;
  }

  .chart-container {
    height: 340px;
    padding: 20px;
  }
}

/* 移动设备 */
@media (max-width: 768px) {
  .dashboard-container {
    padding: 16px;
  }

  .page-title {
    font-size: 24px;
  }

  .page-header {
    margin-bottom: 24px;
  }

  .stats-row {
    margin-bottom: 20px;
  }

  .stat-content {
    gap: 20px;
    padding: 24px;
  }

  .stat-icon-wrapper {
    width: 56px;
    height: 56px;
  }

  .stat-icon {
    font-size: 28px;
  }

  .stat-value {
    font-size: 28px;
  }

  .chart-container {
    height: 300px;
    padding: 16px;
  }

  .charts-row {
    margin-bottom: 20px;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .chart-card :deep(.el-card__header),
  .table-card :deep(.el-card__header) {
    padding: 20px 24px;
  }

  .dashboard-table :deep(.el-table th),
  .dashboard-table :deep(.el-table td) {
    padding: 0 16px;
    font-size: 13px;
  }
}

/* 超小屏幕 */
@media (max-width: 480px) {
  .stat-content {
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }

  .chart-container {
    height: 260px;
  }

  .dashboard-table :deep(.el-table th),
  .dashboard-table :deep(.el-table td) {
    padding: 0 12px;
    font-size: 12px;
  }
}

/* 超大屏幕 */
@media (min-width: 1920px) {
  .dashboard-container {
    padding: 40px;
  }

  .chart-container {
    height: 450px;
  }

  .stat-value {
    font-size: 42px;
  }
}
</style>

