<template>
  <div class="index-container">
    <!-- 第一部分：高频功能块 -->
    <FrequentFeatures />
    
    <!-- 第二部分：数据统计 -->
    <DataStatistics :post-type="postType" />
    
    <!-- 第三部分：图表展示 -->
    <ChartsGroupOne :post-type="postType" />
  </div>
</template>

<script>
import { mapState } from 'pinia'
import useUserStore from '@/store/modules/user'
import FrequentFeatures from '@/components/Dashboard/FrequentFeatures.vue'
import DataStatistics from '@/components/Dashboard/DataStatistics.vue'
import ChartsGroupOne from '@/components/Dashboard/ChartsGroupOne.vue'

export default {
  name: 'Index2',
  components: {
    FrequentFeatures,
    DataStatistics,
    ChartsGroupOne
  },
  computed: {
    // 从store中获取postType
    ...mapState(useUserStore, ['postType'])
  }
}
</script>

<style scoped>
.index-container {
  padding: 20px;
  min-height: calc(100vh - 84px);
  position: relative;
}

/* 悬浮卡片通用样式 */
.floating-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.floating-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* 图表样式 */
.chart-container {
  height: 340px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 20px;
  box-sizing: border-box;
  backdrop-filter: blur(5px);
}

.chart-container:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.chart {
  width: 100%;
  height: 100%;
}
</style>