multi-platform-media-manage/client/src/views/Dashboard/index.vue

<template>
  <div class="dashboard">
    <!-- 页面标题和刷新按钮 -->
    <div class="page-header">
      <h2>数据看板</h2>
      <el-button 
        type="primary" 
        :icon="Refresh" 
        :loading="refreshing"
        @click="handleRefresh"
      >
        刷新数据
      </el-button>
    </div>
    
    <!-- 统计卡片 -->
    <div class="stats-grid">
      <div class="stat-card" v-for="stat in stats" :key="stat.label">
        <div class="stat-icon" :class="stat.iconClass">
          <el-icon><component :is="stat.icon" /></el-icon>
        </div>
        <div class="stat-content">
          <div class="stat-value">{{ stat.value }}</div>
          <div class="stat-label">{{ stat.label }}</div>
        </div>
      </div>
    </div>
    
    <!-- 主要内容区 -->
    <div class="content-grid">
      <!-- 平台账号状态 -->
      <div class="content-card">
        <div class="card-header">
          <h3>平台账号状态</h3>
          <el-button type="primary" link @click="handleNavigate('/accounts')">
            管理账号
          </el-button>
        </div>
        <div class="account-list">
          <div v-if="accounts.length === 0" class="empty-state">
            <el-empty description="暂无账号" :image-size="80">
              <el-button type="primary" @click="handleNavigate('/accounts')">
                添加账号
              </el-button>
            </el-empty>
          </div>
          <div v-else v-for="account in accounts" :key="account.id" class="account-item">
            <el-avatar :size="44" :src="account.avatarUrl || undefined">
              {{ account.accountName?.[0] }}
            </el-avatar>
            <div class="account-info">
              <div class="account-name">{{ account.accountName }}</div>
              <div class="account-platform">{{ getPlatformName(account.platform) }}</div>
            </div>
            <el-tag
              :type="account.status === 'active' ? 'success' : 'danger'"
              size="small"
              effect="light"
              round
            >
              {{ account.status === 'active' ? '正常' : '已过期' }}
            </el-tag>
          </div>
        </div>
      </div>
      
      <!-- 最近任务 -->
      <div class="content-card">
        <div class="card-header">
          <h3>最近发布任务</h3>
          <el-button type="primary" link @click="handleNavigate('/publish')">
            查看全部
          </el-button>
        </div>
        <div class="task-list">
          <div v-if="tasks.length === 0" class="empty-state">
            <el-empty description="暂无任务" :image-size="80">
              <el-button type="primary" @click="handleNavigate('/publish')">
                创建任务
              </el-button>
            </el-empty>
          </div>
          <div v-else v-for="task in tasks" :key="task.id" class="task-item">
            <div class="task-info">
              <div class="task-title">{{ task.title }}</div>
              <div class="task-time">{{ formatDate(task.createdAt) }}</div>
            </div>
            <el-tag
              :type="getTaskStatusType(task.status)"
              size="small"
              effect="light"
              round
            >
              {{ getTaskStatusText(task.status) }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 数据趋势图 -->
    <div class="content-card chart-card">
      <div class="card-header">
        <h3>数据趋势（近30天）</h3>
        <el-radio-group v-model="trendType" size="small">
          <el-radio-button label="fansIncrease">涨粉</el-radio-button>
          <el-radio-button label="views">播放</el-radio-button>
          <el-radio-button label="likes">点赞</el-radio-button>
          <el-radio-button label="comments">评论</el-radio-button>
        </el-radio-group>
      </div>
      <div class="chart-container">
        <div ref="chartRef" style="width: 100%; height: 280px"></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, onActivated, watch, markRaw, nextTick } from 'vue';
import { User, VideoPlay, UserFilled, TrendCharts, Refresh } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import { accountsApi } from '@/api/accounts';
import { dashboardApi, type TrendData } from '@/api/dashboard';
import request from '@/api/request';
import { PLATFORMS } from '@media-manager/shared';
import type { PlatformAccount, PublishTask, PlatformType } from '@media-manager/shared';
import { useTabsStore } from '@/stores/tabs';
import { useAuthStore } from '@/stores/auth';
import dayjs from 'dayjs';

const tabsStore = useTabsStore();
const authStore = useAuthStore();
const accounts = ref<PlatformAccount[]>([]);
const tasks = ref<PublishTask[]>([]);
const trendType = ref<'fansIncrease' | 'views' | 'likes' | 'comments'>('fansIncrease');
const chartRef = ref<HTMLElement>();
const trendData = ref<TrendData | null>(null);
const refreshing = ref(false);
let chartInstance: echarts.ECharts | null = null;
let resizeObserver: ResizeObserver | null = null;

const stats = ref([
  { label: '平台账号', value: 0, icon: markRaw(User), iconClass: 'blue' },
  { label: '总作品数', value: 0, icon: markRaw(VideoPlay), iconClass: 'green' },
  { label: '总粉丝数', value: '0', icon: markRaw(UserFilled), iconClass: 'orange' },
  { label: '总播放量', value: '0', icon: markRaw(TrendCharts), iconClass: 'pink' },
]);

function handleNavigate(path: string) {
  tabsStore.openPageTab(path);
}

// 刷新数据
async function handleRefresh() {
  refreshing.value = true;
  try {
    await loadData();
  } finally {
    refreshing.value = false;
  }
}

function getPlatformName(platform: PlatformType) {
  return PLATFORMS[platform]?.name || platform;
}

function getTaskStatusType(status: string) {
  const types: Record<string, string> = {
    pending: 'info',
    processing: 'warning',
    completed: 'success',
    failed: 'danger',
    cancelled: 'info',
  };
  return types[status] || 'info';
}

function getTaskStatusText(status: string) {
  const texts: Record<string, string> = {
    pending: '待发布',
    processing: '发布中',
    completed: '已完成',
    failed: '失败',
    cancelled: '已取消',
  };
  return texts[status] || status;
}

function formatDate(date: string) {
  return dayjs(date).format('YYYY-MM-DD HH:mm');
}

// 平台颜色配置（柔和协调的配色）
const platformColors: Record<string, string> = {
  xiaohongshu: '#E91E63',
  douyin: '#374151',
  kuaishou: '#F59E0B',
  weixin: '#10B981',
  weixin_video: '#10B981',
  shipinhao: '#10B981',
  baijiahao: '#3B82F6',
};

// 获取图表标题
function getChartTitle(type: 'fansIncrease' | 'views' | 'likes' | 'comments') {
  const titles: Record<string, string> = {
    fansIncrease: '涨粉数',
    views: '播放量',
    likes: '点赞数',
    comments: '评论数',
  };
  return titles[type] || '';
}

function initChart() {
  if (!chartRef.value) return;
  
  chartInstance = echarts.init(chartRef.value);
  updateChart();
}

function updateChart() {
  if (!chartInstance) return;
  
  const dates = trendData.value?.dates || [];
  const platforms = trendData.value?.platforms || [];
  
  // 生成每个平台的 series
  const series: echarts.SeriesOption[] = platforms.map((p) => {
    const data = p[trendType.value] || [];
    const color = platformColors[p.platform] || '#6B7280';
    
    return {
      name: p.platformName,
      data: data,
      type: 'line',
      smooth: 0.3,
      showSymbol: false,
      symbol: 'circle',
      symbolSize: 4,
      lineStyle: {
        width: 2.5,
        color: color,
      },
      itemStyle: {
        color: color,
        borderWidth: 2,
        borderColor: '#fff',
      },
      emphasis: {
        focus: 'series',
        showSymbol: true,
        symbolSize: 6,
        lineStyle: { width: 3 },
        itemStyle: { borderWidth: 2, borderColor: '#fff' },
      },
    };
  });
  
  const legendData = platforms.map(p => p.platformName);
  
  const option: echarts.EChartsOption = {
    tooltip: { 
      trigger: 'axis',
      backgroundColor: 'rgba(255, 255, 255, 0.98)',
      borderColor: '#e5e7eb',
      borderWidth: 1,
      padding: [10, 14],
      textStyle: {
        color: '#374151',
        fontSize: 13,
      },
      formatter: (params: unknown) => {
        const p = params as { seriesName: string; name: string; value: number; color: string }[];
        if (!Array.isArray(p) || p.length === 0) return '';
        
        let html = `<div style="font-weight: 600; margin-bottom: 8px; font-size: 13px;">${p[0].name}</div>`;
        for (const item of p) {
          html += `<div style="display: flex; align-items: center; gap: 10px; margin-bottom: 4px;">
            <span style="display: inline-block; width: 8px; height: 8px; background: ${item.color}; border-radius: 2px;"></span>
            <span style="color: #6b7280;">${item.seriesName}</span>
            <span style="font-weight: 600; margin-left: auto;">${item.value.toLocaleString()}</span>
          </div>`;
        }
        return html;
      },
      axisPointer: {
        type: 'line',
        lineStyle: {
          color: '#9ca3af',
          type: 'dashed',
          width: 1,
        },
      },
    },
    legend: {
      data: legendData,
      bottom: 4,
      type: 'scroll',
      itemWidth: 14,
      itemHeight: 10,
      itemGap: 20,
      textStyle: {
        color: '#6b7280',
        fontSize: 12,
      },
      icon: 'roundRect',
    },
    grid: {
      left: '2%',
      right: '2%',
      top: '8%',
      bottom: '36px',
      containLabel: true,
    },
    xAxis: {
      type: 'category',
      data: dates,
      boundaryGap: false,
      axisLine: {
        lineStyle: { color: '#e5e7eb' },
      },
      axisTick: { show: false },
      axisLabel: {
        color: '#9ca3af',
        fontSize: 11,
      },
    },
    yAxis: { 
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false },
      splitLine: {
        lineStyle: { 
          color: '#f3f4f6',
          type: 'dashed',
        },
      },
      axisLabel: {
        color: '#9ca3af',
        fontSize: 11,
        formatter: (value: number) => {
          if (value >= 10000) return (value / 10000).toFixed(1) + 'w';
          return value.toString();
        },
      },
    },
    series: series,
  };
  
  chartInstance.setOption(option, true);
}

// 加载数据趋势
async function loadTrendData() {
  try {
    trendData.value = await dashboardApi.getTrend({
      days: 30,  // 获取最近30天的数据
    });
    
    // 更新图表
    updateChart();
  } catch (error) {
    console.error('加载数据趋势失败:', error);
  }
}

async function loadData() {
  try {
    // 并行获取所有数据
    const [accountsData, worksStats, tasksData] = await Promise.all([
      accountsApi.getAccounts(),
      dashboardApi.getWorksStats().catch(() => null),
      request.get('/api/publish', { params: { page: 1, pageSize: 5 } }).catch(() => null),
    ]);

    accounts.value = accountsData;

    // 加载最近发布任务
    if (tasksData) {
      tasks.value = tasksData.items || [];
    }
    
    // 更新统计数据
    stats.value[0].value = accounts.value.length;
    
    // 总粉丝数：当前用户所有平台账号的 fans_count 总和
    const totalFans = accounts.value.reduce((sum, a) => sum + (a.fansCount || 0), 0);
    stats.value[2].value = totalFans >= 10000 
      ? (totalFans / 10000).toFixed(1) + '万' 
      : totalFans.toString();
    
    if (worksStats) {
      stats.value[1].value = worksStats.totalCount || 0;
      // 格式化播放量
      const playCount = worksStats.totalPlayCount || 0;
      stats.value[3].value = playCount >= 10000 
        ? (playCount / 10000).toFixed(1) + '万' 
        : playCount.toString();
    }
    
    // 加载数据趋势
    await loadTrendData();
  } catch {
    // 错误已在拦截器中处理
  }
}

// resize 处理函数
function handleResize() {
  if (chartInstance && !chartInstance.isDisposed()) {
    chartInstance.resize();
  }
}

onMounted(async () => {
  loadData();
  
  // 等待 DOM 完全渲染后再初始化图表
  await nextTick();
  
  // 延迟初始化以确保容器尺寸正确
  setTimeout(() => {
    initChart();
    
    // 使用 ResizeObserver 监听容器大小变化
    if (chartRef.value) {
      resizeObserver = new ResizeObserver(() => {
        handleResize();
      });
      resizeObserver.observe(chartRef.value);
    }
  }, 100);
  
  window.addEventListener('resize', handleResize);
});

// 页面激活时自动刷新数据（从其他标签页切换回来时）
onActivated(() => {
  loadData();
  // 确保图表正确显示
  nextTick(() => {
    handleResize();
  });
});

onUnmounted(() => {
  window.removeEventListener('resize', handleResize);
  resizeObserver?.disconnect();
  resizeObserver = null;
  chartInstance?.dispose();
  chartInstance = null;
});

watch(trendType, () => {
  updateChart();
});
</script>

<style lang="scss" scoped>
@use '@/styles/variables.scss' as *;

.dashboard {
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  
  h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 600;
    color: $text-primary;
  }
}

// 统计卡片网格
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.stat-card {
  background: #fff;
  border-radius: $radius-lg;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: $shadow-sm;
  border: 1px solid $border-light;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: $shadow-md;
  }
  
  .stat-icon {
    width: 56px;
    height: 56px;
    border-radius: $radius-lg;
    display: flex;
    align-items: center;
    justify-content: center;
    
    .el-icon {
      font-size: 26px;
      color: #fff;
    }
    
    &.blue {
      background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    }
    
    &.green {
      background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
    }
    
    &.orange {
      background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    }
    
    &.pink {
      background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    }
  }
  
  .stat-content {
    flex: 1;
  }
  
  .stat-value {
    font-size: 32px;
    font-weight: 700;
    color: $text-primary;
    line-height: 1.2;
  }
  
  .stat-label {
    font-size: 14px;
    color: $text-secondary;
    margin-top: 6px;
  }
}

// 内容卡片网格
.content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.content-card {
  background: #fff;
  border-radius: $radius-lg;
  padding: 24px;
  box-shadow: $shadow-sm;
  border: 1px solid $border-light;
  
  &.chart-card {
    width: 100%;
    overflow: hidden;
    
    .card-header {
      margin-bottom: 20px;
    }
  }
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  
  h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: $text-primary;
  }
  
  .el-button {
    font-weight: 500;
  }
  
  :deep(.el-radio-group) {
    .el-radio-button__inner {
      border-radius: $radius-sm;
      border-color: $border-light;
      color: $text-secondary;
      font-weight: 500;
    }
    
    .el-radio-button__original-radio:checked + .el-radio-button__inner {
      background: $primary-color;
      border-color: $primary-color;
    }
  }
}

.account-list, .task-list {
  min-height: 200px;
}

.account-item, .task-item {
  display: flex;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid $border-light;
  
  &:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
  
  &:first-child {
    padding-top: 0;
  }
}

.account-item {
  gap: 14px;
  
  :deep(.el-avatar) {
    flex-shrink: 0;
    border: 2px solid $border-light;
    background: linear-gradient(135deg, $primary-color-light, #fff);
    color: $primary-color;
    font-weight: 600;
  }
  
  .account-info {
    flex: 1;
    min-width: 0;
    
    .account-name {
      font-weight: 600;
      color: $text-primary;
      font-size: 15px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .account-platform {
      font-size: 13px;
      color: $text-secondary;
      margin-top: 4px;
    }
  }
}

.task-item {
  justify-content: space-between;
  
  .task-info {
    flex: 1;
    min-width: 0;
  }
  
  .task-title {
    font-weight: 600;
    color: $text-primary;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .task-time {
    font-size: 13px;
    color: $text-secondary;
    margin-top: 4px;
  }
}

.empty-state {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  
  :deep(.el-empty__description p) {
    color: $text-secondary;
  }
}

.chart-container {
  margin-top: 10px;
  width: 100%;
  min-height: 280px;
  
  > div {
    width: 100% !important;
  }
}

// 响应式调整
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .content-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}
</style>