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

<template>
  <div class="analytics-page">
    <div class="page-header">
      <h2>数据分析</h2>
      <div class="header-actions">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="loadData"
        />
        <el-button 
          type="primary" 
          :icon="Refresh" 
          :loading="refreshing"
          @click="handleRefresh"
        >
          刷新数据
        </el-button>
      </div>
    </div>
    
    <!-- 统计摘要 -->
    <div class="stats-grid">
      <div class="stat-card" v-for="(item, index) in summaryItems" :key="index">
        <div class="stat-value">{{ formatNumber(item.value) }}</div>
        <div class="stat-label">{{ item.label }}</div>
      </div>
    </div>
    
    <!-- 趋势图 -->
    <div class="page-card" style="margin-top: 20px">
      <div class="card-header">
        <h3>数据趋势</h3>
        <el-radio-group v-model="trendMetric" size="small" @change="updateTrendChart">
          <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 ref="trendChartRef" style="height: 350px" v-loading="loading"></div>
    </div>
    
    <!-- 平台对比 -->
    <el-row :gutter="20" style="margin-top: 20px">
      <el-col :span="12">
        <div class="page-card">
          <h3>平台粉丝分布</h3>
          <div ref="platformChartRef" style="height: 300px"></div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="page-card">
          <h3>平台数据对比</h3>
          <el-table :data="platformComparison" size="small">
            <el-table-column prop="platform" label="平台" width="100">
              <template #default="{ row }">
                {{ getPlatformName(row.platform) }}
              </template>
            </el-table-column>
            <el-table-column prop="fansCount" label="粉丝" />
            <el-table-column prop="fansIncrease" label="粉丝增量" />
            <el-table-column prop="viewsCount" label="播放量" />
            <el-table-column prop="likesCount" label="点赞数" />
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import * as echarts from 'echarts';
import { Refresh } from '@element-plus/icons-vue';
import { PLATFORMS } from '@media-manager/shared';
import type { PlatformComparison, PlatformType } from '@media-manager/shared';
import { useAuthStore } from '@/stores/auth';
import dayjs from 'dayjs';
import request from '@/api/request';

// 单个平台的趋势数据
interface PlatformTrendItem {
  platform: string;
  platformName: string;
  fansIncrease: number[];
  views: number[];
  likes: number[];
  comments: number[];
}

// 趋势数据类型
interface TrendData {
  dates: string[];
  platforms: PlatformTrendItem[];
}

const authStore = useAuthStore();
const loading = ref(false);
const refreshing = ref(false);
const trendChartRef = ref<HTMLElement>();
const platformChartRef = ref<HTMLElement>();

let trendChart: echarts.ECharts | null = null;
let platformChart: echarts.ECharts | null = null;

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

const dateRange = ref<[Date, Date]>([
  dayjs().subtract(30, 'day').toDate(),
  dayjs().toDate(),
]);

const trendMetric = ref<'fansIncrease' | 'views' | 'likes' | 'comments'>('fansIncrease');
const trendData = ref<TrendData | null>(null);
const platformComparison = ref<PlatformComparison[]>([]);

// 从趋势数据计算统计摘要
// 口径变更：user_day_statistics 存储的是每日单独值，区间汇总需要直接 SUM
const summaryItems = computed(() => {
  const data = trendData.value;
  if (!data || data.platforms.length === 0) {
    return [
      { label: '涨粉总计', value: 0 },
      { label: '播放总计', value: 0 },
      { label: '点赞总计', value: 0 },
      { label: '评论总计', value: 0 },
    ];
  }
  
  // 计算所有平台的汇总
  let totalFansIncrease = 0;
  let totalViews = 0;
  let totalLikes = 0;
  let totalComments = 0;
  
  for (const platform of data.platforms) {
    totalFansIncrease += platform.fansIncrease.reduce((sum, v) => sum + v, 0);
    totalViews += platform.views.reduce((sum, v) => sum + v, 0);
    totalLikes += platform.likes.reduce((sum, v) => sum + v, 0);
    totalComments += platform.comments.reduce((sum, v) => sum + v, 0);
  }
  
  return [
    { label: '涨粉总计', value: totalFansIncrease },
    { label: '播放总计', value: totalViews },
    { label: '点赞总计', value: totalLikes },
    { label: '评论总计', value: totalComments },
  ];
});

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

function formatNumber(num: number) {
  if (num >= 10000) return (num / 10000).toFixed(1) + 'w';
  return num.toString();
}

// 获取趋势数据（通过 Node 转发调用 Python 接口）
async function loadTrendData() {
  if (!dateRange.value) return;

  const [start, end] = dateRange.value;
  const startDate = dayjs(start).format('YYYY-MM-DD');
  const endDate = dayjs(end).format('YYYY-MM-DD');

  const data = await request.get('/api/analytics/trend-from-python', {
    params: {
      startDate,
      endDate,
    },
  });

  return data as TrendData;
}

// 平台统计数据类型
interface PlatformStats {
  platform: string;
  fansCount: number;
  fansIncrease: number;
  viewsCount: number;
  likesCount: number;
  commentsCount: number;
  collectsCount: number;
}

// 获取平台统计数据（通过 Node 转发调用 Python 接口）
async function loadPlatformData() {
  if (!dateRange.value) return;

  const [start, end] = dateRange.value;
  const startDate = dayjs(start).format('YYYY-MM-DD');
  const endDate = dayjs(end).format('YYYY-MM-DD');

  const data = await request.get('/api/analytics/platforms-from-python', {
    params: {
      startDate,
      endDate,
    },
  });

  return data as PlatformStats[];
}

async function loadData() {
  if (!dateRange.value) return;
  
  loading.value = true;
  
  try {
    // 并行加载数据（全部从 Python API 获取）
    const [pythonTrendData, pythonPlatformData] = await Promise.all([
      loadTrendData().catch(() => null),
      loadPlatformData().catch(() => null),
    ]);
    
    if (pythonTrendData) {
      trendData.value = pythonTrendData;
    }
    
    if (pythonPlatformData) {
      // 转换为 PlatformComparison 格式
      platformComparison.value = pythonPlatformData.map(p => ({
        platform: p.platform as PlatformType,
        fansCount: p.fansCount,
        fansIncrease: p.fansIncrease,
        viewsCount: p.viewsCount,
        likesCount: p.likesCount,
      }));
    }
    
    updateTrendChart();
    updatePlatformChart();
  } catch {
    // 错误已处理
  } finally {
    loading.value = false;
  }
}

// 平台颜色配置（柔和协调的配色）
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 updateTrendChart() {
  if (!trendChartRef.value) return;
  
  if (!trendChart) {
    trendChart = echarts.init(trendChartRef.value);
  }
  
  const dates = trendData.value?.dates || [];
  const platforms = trendData.value?.platforms || [];
  
  // 生成每个平台的 series
  const series: echarts.SeriesOption[] = platforms.map((p) => {
    const data = p[trendMetric.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);
  
  trendChart.setOption({
    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;">${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,
  }, true);
}

function updatePlatformChart() {
  if (!platformChartRef.value) return;
  
  if (!platformChart) {
    platformChart = echarts.init(platformChartRef.value);
  }
  
  platformChart.setOption({
    tooltip: { trigger: 'item' },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      data: platformComparison.value.map(p => ({
        name: getPlatformName(p.platform),
        value: p.fansCount,
      })),
    }],
  });
}

onMounted(() => {
  loadData();
  
  window.addEventListener('resize', () => {
    trendChart?.resize();
    platformChart?.resize();
  });
});
</script>

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

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  
  h2 { margin: 0; }
  
  .header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
  }
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.stat-card {
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  
  .stat-value {
    font-size: 24px;
    font-weight: 600;
    color: $primary-color;
  }
  
  .stat-label {
    font-size: 14px;
    color: $text-secondary;
    margin-top: 8px;
  }
}

@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  
  h3 { margin: 0; }
}
</style>