Situation-Awareness-Platform-Frontend/src/views/Jyh/ecosystem/index.vue

<template>
  <div class="index-module__NV_5cW__container">
    <!-- 头部区域：标题、副标题、武汉核心数据统计 -->
    <div class="index-module__NV_5cW__header">
      <div class="index-module__NV_5cW__floatingElements">
        <div class="index-module__NV_5cW__floatingElement"></div>
        <div class="index-module__NV_5cW__floatingElement"></div>
        <div class="index-module__NV_5cW__floatingElement"></div>
      </div>
      <div class="index-module__NV_5cW__titleSection">
        <div class="index-module__NV_5cW__titleContainer">
          <h1 class="index-module__NV_5cW__title">开源生态与贡献价值全景</h1>
          <div class="index-module__NV_5cW__titleBadge">WOS</div>
        </div>
        <!--        <div class="index-module__NV_5cW__subtitle">-->
        <!--          <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"-->
        <!--               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"-->
        <!--               class="lucide lucide-users" aria-hidden="true">-->
        <!--            <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>-->
        <!--            <path d="M16 3.128a4 4 0 0 1 0 7.744"></path>-->
        <!--            <path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>-->
        <!--            <circle cx="9" cy="7" r="4"></circle>-->
        <!--          </svg>-->
        <!--          <span>汇聚武汉开源力量，共建城市开源生态</span>-->
        <!--        </div>-->
        <!-- 武汉4项核心开源数据统计 -->
        <div class="index-module__NV_5cW__statsBar">
          <div class="index-module__NV_5cW__stat">
            <span class="index-module__NV_5cW__statNumber">200万 +</span>
            <span class="index-module__NV_5cW__statLabel">活跃开发者</span>
          </div>
          <div class="index-module__NV_5cW__statDivider"></div>
          <div class="index-module__NV_5cW__stat">
            <span class="index-module__NV_5cW__statNumber">300万 +</span>
            <span class="index-module__NV_5cW__statLabel">开源项目</span>
          </div>
          <div class="index-module__NV_5cW__statDivider"></div>
          <div class="index-module__NV_5cW__stat">
            <span class="index-module__NV_5cW__statNumber">500 +</span>
            <span class="index-module__NV_5cW__statLabel">开源企业</span>
          </div>
          <div class="index-module__NV_5cW__statDivider"></div>
          <div class="index-module__NV_5cW__stat">
            <span class="index-module__NV_5cW__statNumber">2800亿</span>
            <span class="index-module__NV_5cW__statLabel">产业估值</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 内容区域：ECharts图表模块 + 项目列表 -->
    <div class="index-module__NV_5cW__content">
      <!-- ECharts图表区域 -->
      <div class="index-module__NV_5cW__chartsSection">
        <div class="index-module__NV_5cW__sectionHeader">
          <h2 class="index-module__NV_5cW__sectionTitle">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
              class="lucide lucide-chart-pie" aria-hidden="true">
              <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
              <circle cx="12" cy="10" r="3"></circle>
            </svg>
            <span>开源生态与贡献价值全景数据可视化</span>
          </h2>
        </div>

        <!-- 图表网格布局：新增多个模块 -->
        <div class="index-module__NV_5cW__chartsGrid">
          <!-- 1. 开源企业贡献榜-->
          <div class="index-module__NV_5cW__chartCard list-card">
            <div class="chartCard__header">
              <div class="title-with-stats">
                <h3 class="chartCard__title">全球开源企业贡献榜 TOP 30</h3>
                <div class="enterprise-stats" v-if="enterpriseFilter !== 'all'">
                  <span class="stat-badge">
                    平均分: {{ avgScore }}
                  </span>
                  <span class="stat-badge">
                    总仓库: {{ totalRepos }}
                  </span>
                </div>
              </div>
              <div class="enterprise-filter">
                <span :class="['filter-tag', { active: enterpriseFilter === 'all' }]"
                  @click="changeEnterpriseFilter('all')">
                  全部 ({{ allEnterprises.length }})
                </span>
                <span :class="['filter-tag', { active: enterpriseFilter === 'China' }]"
                  @click="changeEnterpriseFilter('China')">
                  🇨🇳 中国 ({{ chinaCount }})
                </span>
                <span :class="['filter-tag', { active: enterpriseFilter === 'USA' }]"
                  @click="changeEnterpriseFilter('USA')">
                  🇺🇸 美国 ({{ usaCount }})
                </span>
              </div>
            </div>
            <div class="chartCard__container list-container" ref="scrollContainer1" @mouseenter="pauseScroll(1)"
              @mouseleave="resumeScroll(1)">
              <div class="scroll-indicator">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2">
                  <path d="M12 5v14M19 12l-7 7-7-7" />
                </svg>
                <span>悬停暂停滚动</span>
              </div>
              <div class="project-list enterprise-list">
                <div class="project-item enterprise-item" v-for="(item, index) in excellentProjects" :key="index"
                  :title="`${item.name}\n全球排名: #${item.rank}\n综合得分: ${item.score}\n仓库数: ${item.repos}\n开发者: ${item.devs}\n国家: ${item.country}`">
                  <span :class="['enterprise-rank', getRankClass(item.displayRank || item.rank)]">
                    {{ getRankText(item.displayRank || item.rank) }}
                  </span>
                  <div class="enterprise-info">
                    <span class="enterprise-name">{{ item.name }}</span>
                    <div class="enterprise-meta">
                      <span class="meta-item">{{ getCountryFlag(item.country) }}</span>
                      <span class="meta-item">{{ item.repos }} 仓库</span>
                      <span class="meta-item meta-devs">{{ formatDevs(item.devs) }} 开发者</span>
                    </div>
                  </div>
                  <div class="score-bar-container">
                    <div :class="['score-bar', getScoreBarClass(item.score)]"
                      :style="{ width: (30 + (item.score - 60) / 36 * 70) + '%' }">
                    </div>
                  </div>
                  <span :class="['enterprise-score', getScoreClass(item.score)]">
                    {{ item.score }}
                  </span>
                </div>
              </div>
            </div>
          </div>

          <!-- 2. 基础设施覆盖率（多层环形图）-->
          <div class="index-module__NV_5cW__chartCard">
            <h3 class="chartCard__title">基础设施覆盖率</h3>
            <div class="chartCard__container">
              <div class="num-empty" v-if="isEmpty.infrastructure"></div>
              <div v-else id="infrastructureChart" class="chart"></div>
            </div>
          </div>

          <!-- 3. 高校开源社团/俱乐部数量-->
          <div class="index-module__NV_5cW__chartCard">
            <h3 class="chartCard__title">高校开源社团/俱乐部数量</h3>
            <div class="chartCard__container">
              <div class="num-empty" v-if="isEmpty.community"></div>
              <div v-else id="communityChart" class="chart"></div>
            </div>
          </div>

          <!-- 4. 社区治理健康度对比-->
          <div class="index-module__NV_5cW__chartCard">
            <h3 class="chartCard__title">社区治理健康度对比</h3>
            <div class="chartCard__container">
              <div class="num-empty" v-if="isEmpty.ossCompass"></div>
              <div v-else id="ossCompassChart" class="chart"></div>
            </div>
          </div>

          <!-- 5. 语言与技术竞争-->
          <div class="index-module__NV_5cW__chartCard">
            <div class="chartCard__header">
              <h3 class="chartCard__title">语言与技术竞争</h3>
              <div class="language-tab" @click="changeLanguageTab">
                <span :class="{ active: languageTab === 'mainstream' }">主流语言</span>
                <span :class="{ active: languageTab === 'emerging' }">新兴语言</span>
              </div>
            </div>
            <div class="chartCard__container">
              <div class="num-empty" v-if="isEmpty.languageTech"></div>
              <div v-else id="languageTechChart" class="chart"></div>
            </div>
          </div>

          <!-- 6. 明星开发者聚焦（列表）-->
          <div class="index-module__NV_5cW__chartCard list-card">
            <h3 class="chartCard__title">明星开发者聚焦</h3>
            <!-- 新增：ref + 鼠标事件 -->
            <div class="chartCard__container list-container developer-list-container" ref="scrollContainer2"
              @mouseenter="pauseScroll(2)" @mouseleave="resumeScroll(2)">
              <div class="project-list developer-list">
                <div class="project-item developer-item" v-for="(item, index) in excellentProjects2025" :key="index">
                  <div class="dev-avatar">
                    <img :src="item.avatar" :alt="item.name" class="avatar-img" @error="handleImageError" />
                  </div>
                  <span class="project-rank dev-rank">{{ item.desc }}</span>
                  <div class="project-info dev-info">
                    <span class="project-name dev-name">{{ item.name }}</span>
                    <span class="project-desc dev-location">📍 {{ item.org }}</span>
                  </div>
                  <span class="project-org dev-followers">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
                      stroke="currentColor" stroke-width="2">
                      <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
                      <circle cx="9" cy="7" r="4"></circle>
                    </svg>
                    {{ formatFollowers(item.followers) }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 开发者活力波形图 -->
      <div class="index-module__NV_5cW__vitalitySection">
        <h3 class="vitality__title">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M22 12h-4l-3 9L9 3l-3 9H2"></path>
          </svg>
          <span>开发者活力波形图</span>
        </h3>
        <div class="vitality__container">
          <div id="vitalityChart" class="chart"></div>
        </div>
      </div>
      <!-- 开源项目热力图 -->
      <div class="index-module__NV_5cW__vitalitySection heatmap-section">
        <div class="heatmap-header">
          <div class="title-row">
            <h3 class="vitality__title">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z">
                </path>
              </svg>
              <span>开源项目热力图</span>
            </h3>
            <div class="label-toggle" @click="toggleLabels">
              <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <path d="M12 2v20M2 12h20"></path>
              </svg>
              <span>{{ showAllLabels ? '隐藏标签' : '显示全部' }}</span>
            </div>
          </div>
          <div class="heatmap-stats">
            <div class="stat-item">
              <span class="stat-value">{{ heatmapData.length }}</span>
              <span class="stat-label">项目总数</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
              <span class="stat-value">{{ topProject.name }}</span>
              <span class="stat-label">领先项目</span>
            </div>
            <div class="stat-divider"></div>
            <div class="stat-item">
              <span class="stat-value">{{ totalDevs }}</span>
              <span class="stat-label">总开发者数</span>
            </div>
          </div>
        </div>
        <div class="vitality__container heatmap-container">
          <div class="heatmap-legend">
            <div class="legend-item">
              <div class="legend-icon bubble-small"></div>
              <span>少量开发者</span>
            </div>
            <div class="legend-item">
              <div class="legend-icon bubble-medium"></div>
              <span>中等规模</span>
            </div>
            <div class="legend-item">
              <div class="legend-icon bubble-large"></div>
              <span>大量开发者</span>
            </div>
          </div>
          <div id="heatmapChart" class="chart"></div>
        </div>
      </div>
      <!-- 中国开源人才密度地图 -->
      <div class="index-module__NV_5cW__vitalitySection map-section">
        <h3 class="vitality__title">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"></path>
            <circle cx="12" cy="10" r="3"></circle>
          </svg>
          <span>🌍 中国开源人才密度地图</span>
        </h3>
        <div class="map-container">
          <div id="talentMapChart" class="chart"></div>

          <!-- 右侧排行榜 -->
          <div class="map-rank-panel">
            <div class="panel-title">🏆 开源人才数量排行 TOP 5</div>
            <div class="rank-list">
              <div class="rank-item" v-for="(item, index) in topRegions" :key="index">
                <span :class="['rank-num', 'rank-' + (index + 1)]">{{ index + 1 }}</span>
                <span class="rank-name">{{ item.name }}</span>
                <span class="rank-score">{{ item.score }} 万人</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, nextTick, watch, onUnmounted, computed } from 'vue';
import * as echarts from 'echarts';
import { usePageResize } from '@/utils/hooks/usePageResize';

// 页面尺寸响应式
const { widthType } = usePageResize();

// 1. 全球开源企业贡献榜数据（来自 EnterpriseContributionRanking.vue）
const rawEnterpriseData = [
  { name: 'Microsoft', openrank: 177654.43, repos: 9211, devs: 14954, country: 'USA' },
  { name: 'Huawei', openrank: 108690.66, repos: 11407, devs: 16413, country: 'China' },
  { name: 'Google', openrank: 64156.6, repos: 3426, devs: 64115, country: 'USA' },
  { name: 'Amazon', openrank: 54776.3, repos: 7850, devs: 35802, country: 'USA' },
  { name: 'Meta', openrank: 34811.3, repos: 1410, devs: 31912, country: 'USA' },
  { name: 'RedHat', openrank: 28004.37, repos: 736, devs: 3626, country: 'USA' },
  { name: 'Mozilla', openrank: 27085.14, repos: 1792, devs: 17242, country: 'USA' },
  { name: 'Alibaba', openrank: 24744.15, repos: 5570, devs: 18661, country: 'China' },
  { name: 'IBM', openrank: 21165.28, repos: 626, devs: 5658, country: 'USA' },
  { name: 'Elastic', openrank: 21472.45, repos: 2437, devs: 17735, country: 'USA' },
  { name: 'Nabu Casa', openrank: 18499.45, repos: 101, devs: 27413, country: 'USA' },
  { name: 'Grafana Labs', openrank: 18237.03, repos: 756, devs: 10925, country: 'USA' },
  { name: 'Ant Group', openrank: 17916.45, repos: 1251, devs: 13760, country: 'China' },
  { name: 'DataDog', openrank: 17795.41, repos: 935, devs: 5401, country: 'USA' },
  { name: 'Intel', openrank: 17725.74, repos: 1046, devs: 6142, country: 'USA' },
  { name: 'HashiCorp', openrank: 17229.81, repos: 745, devs: 17068, country: 'USA' },
  { name: 'Hugging Face', openrank: 16909.25, repos: 277, devs: 15021, country: 'USA' },
  { name: 'NVIDIA', openrank: 16082.9, repos: 850, devs: 12362, country: 'USA' },
  { name: 'Baidu', openrank: 15695.3, repos: 408, devs: 9386, country: 'China' },
  { name: 'VMWare', openrank: 14627.44, repos: 634, devs: 11794, country: 'USA' },
  { name: 'Odoo', openrank: 12959.59, repos: 27, devs: 2678, country: 'Belgium' },
  { name: 'Dio Academia', openrank: 11231.13, repos: 169, devs: 24070, country: 'Portugal' },
  { name: 'Oracle', openrank: 10799.13, repos: 528, devs: 37959, country: 'USA' },
  { name: 'Yandex', openrank: 10025.79, repos: 283, devs: 10112, country: 'Germany' },
  { name: 'NextCloud', openrank: 10029.67, repos: 229, devs: 39516, country: 'Russia' },
  { name: 'ByteDance', openrank: 8310.37, repos: 652, devs: 5989, country: 'China' },
  { name: 'WordPress', openrank: 8267.62, repos: 176, devs: 777, country: 'USA' },
  { name: 'Vercel', openrank: 8214.69, repos: 170, devs: 13420, country: 'USA' },
  { name: 'LangChain', openrank: 8108.64, repos: 135, devs: 10099, country: 'USA' },
  { name: 'ConsenSys', openrank: 8071.43, repos: 640, devs: 4686, country: 'USA' }
];

// 计算综合得分并排序
const calculateEnterpriseScore = () => {
  const maxOpenrank = Math.max(...rawEnterpriseData.map(d => d.openrank));
  const maxRepos = Math.max(...rawEnterpriseData.map(d => d.repos));
  const maxDevs = Math.max(...rawEnterpriseData.map(d => d.devs));

  const scored = rawEnterpriseData.map(item => {
    const openrankScore = Math.sqrt(item.openrank / maxOpenrank) * 100;
    const reposScore = Math.sqrt(item.repos / maxRepos) * 100;
    const devsScore = Math.sqrt(item.devs / maxDevs) * 100;
    const compositeScore = openrankScore * 0.4 + reposScore * 0.25 + devsScore * 0.35;

    return { ...item, rawScore: compositeScore };
  });

  const sorted = scored.sort((a, b) => b.rawScore - a.rawScore);
  const maxScore = sorted[0].rawScore;
  const minScore = sorted[sorted.length - 1].rawScore;

  return sorted.map((item, index) => {
    let normalizedScore = ((item.rawScore - minScore) / (maxScore - minScore)) * 36 + 60;
    normalizedScore = Math.max(60, Math.min(96, normalizedScore - index * 0.15));

    return {
      rank: index + 1,
      name: item.name,
      score: Math.round(normalizedScore * 10) / 10,
      repos: item.repos,
      country: item.country,
      devs: item.devs
    };
  });
};

const allEnterprises = calculateEnterpriseScore();
const enterpriseFilter = ref<'all' | 'China' | 'USA'>('all');

// 计算各国企业数量
const chinaCount = computed(() => allEnterprises.filter(item => item.country === 'China').length);
const usaCount = computed(() => allEnterprises.filter(item => item.country === 'USA').length);

// 切换筛选并重启滚动
const changeEnterpriseFilter = (filter: 'all' | 'China' | 'USA') => {
  enterpriseFilter.value = filter;
  // 重启滚动
  nextTick(() => {
    pauseScroll(1);
    setTimeout(() => autoScroll(1), 100);
  });
};

// 计算筛选后的统计数据
const avgScore = computed(() => {
  if (enterpriseFilter.value === 'all') return 0;
  const filtered = excellentProjects.value;
  if (filtered.length === 0) return 0;
  const sum = filtered.reduce((acc, item) => acc + item.score, 0);
  return (sum / filtered.length).toFixed(1);
});

const totalRepos = computed(() => {
  if (enterpriseFilter.value === 'all') return 0;
  return excellentProjects.value.reduce((acc, item) => acc + item.repos, 0).toLocaleString();
});

// 根据筛选条件过滤企业数据
const excellentProjects = computed(() => {
  if (enterpriseFilter.value === 'all') {
    return allEnterprises;
  }
  const filtered = allEnterprises.filter(item => item.country === enterpriseFilter.value);
  // 重新计算排名
  return filtered.map((item, index) => ({
    ...item,
    displayRank: index + 1
  }));
});

// 2. 明星开发者数据（基于GitHub中国区Top开发者）
const excellentProjects2025 = ref([
  { name: '稚晖', desc: 'TOP 1', org: 'Shanghai', followers: 82738, avatar: 'https://github.com/peng-zhihui.png' },
  { name: 'Crypto Michael', desc: 'TOP 2', org: 'Beijing, China', followers: 37622, avatar: 'https://github.com/michaelliao.png' },
  { name: '代码家', desc: 'TOP 3', org: 'Beijing, China', followers: 24743, avatar: 'https://github.com/daimajia.png' },
  { name: 'Jackson Tian', desc: 'TOP 4', org: 'Hangzhou, China', followers: 21267, avatar: 'https://github.com/JacksonTian.png' },
  { name: '云风', desc: 'TOP 5', org: 'China', followers: 21192, avatar: 'https://github.com/cloudwu.png' },
  { name: 'Fengda Huang', desc: 'TOP 6', org: 'Shanghai / Hangzhou', followers: 20229, avatar: 'https://github.com/phodal.png' },
  { name: '程序员鱼皮', desc: 'TOP 7', org: 'Shanghai', followers: 18461, avatar: 'https://github.com/liyupi.png' },
  { name: 'Trinea', desc: 'TOP 8', org: 'HangZhou', followers: 17019, avatar: 'https://github.com/Trinea.png' },
  { name: 'lifesinger', desc: 'TOP 9', org: 'Hangzhou, China', followers: 15894, avatar: 'https://github.com/lifesinger.png' },
  { name: 'stormzhang', desc: 'TOP 10', org: 'Shanghai, China', followers: 15889, avatar: 'https://github.com/stormzhang.png' },
  { name: 'Wenli Zhang', desc: 'TOP 11', org: 'Shanghai, China', followers: 15680, avatar: 'https://github.com/Ovilia.png' },
  { name: 'Wei Wang', desc: 'TOP 12', org: 'Yokohama / China', followers: 15532, avatar: 'https://github.com/onevcat.png' },
  { name: 'astaxie', desc: 'TOP 13', org: 'Shanghai, China', followers: 15022, avatar: 'https://github.com/astaxie.png' },
  { name: '司徒正美', desc: 'TOP 14', org: 'China', followers: 14742, avatar: 'https://github.com/RubyLouvre.png' },
  { name: '云谦', desc: 'TOP 15', org: 'HangZhou, China', followers: 14466, avatar: 'https://github.com/sorrycc.png' },
  { name: 'cangdu', desc: 'TOP 16', org: 'Shanghai, China', followers: 13728, avatar: 'https://github.com/bailicangdu.png' },
  { name: 'Huang Haiguang', desc: 'TOP 17', org: 'Qingdao, China', followers: 13422, avatar: 'https://github.com/fengdu78.png' },
  { name: '花裤衩', desc: 'TOP 18', org: 'Shanghai, China', followers: 13236, avatar: 'https://github.com/PanJiaChen.png' },
  { name: '破娃酱', desc: 'TOP 19', org: 'China', followers: 13203, avatar: 'https://github.com/breakwa11.png' },
  { name: 'Draven', desc: 'TOP 20', org: 'Beijing, China', followers: 13094, avatar: 'https://github.com/draveness.png' }
]);

// 3. 图表数据定义
const chartData = ref({
  // 基础设施覆盖率（来自 InfrastructureCoverageRings.vue）
  infrastructure: [
    {
      name: '镜像站规模',
      value: 85,
      color: '#00F0FF',
      radius: ['70%', '80%']
    },
    {
      name: '代码托管平台规模',
      value: 90,
      color: '#FFAB00',
      radius: ['50%', '60%']
    },
    {
      name: '构建平台活跃度',
      value: 40,
      color: '#B20003',
      radius: ['30%', '40%']
    }
  ],
  // 高校开源社团/俱乐部数据（来自 UniversityClubStatsChart.vue）
  universityClubs: [
    // 华东地区
    { university: '上海交通大学', club: 'SJTU-LUG (Linux User Group)' },
    { university: '上海交通大学', club: '开放原子开源俱乐部' },
    { university: '复旦大学', club: 'Fudan LUG' },
    { university: '复旦大学', club: '开放原子开源俱乐部' },
    { university: '浙江大学', club: 'ZJU-LUG' },
    { university: '浙江大学', club: 'AAA (Azure Availability Association)' },
    { university: '浙江大学', club: '开放原子开源俱乐部' },
    { university: '南京大学', club: 'NJU-LUG' },
    { university: '南京大学', club: 'eScience 协会' },
    { university: '南京大学', club: '开放原子开源俱乐部' },
    { university: '中国科学技术大学', club: 'USTC-LUG' },
    { university: '中国科学技术大学', club: 'VLAB' },
    { university: '同济大学', club: 'Tongji LUG' },
    { university: '同济大学', club: '开放原子开源俱乐部' },
    { university: '华东师范大学', club: 'ECNU LUG' },
    // 华北地区
    { university: '清华大学', club: 'TUNA (清华大学学生网络与开源软件协会)' },
    { university: '清华大学', club: '开放原子开源俱乐部' },
    { university: '北京大学', club: 'PKUOSC (北京大学开源软件协会)' },
    { university: '北京大学', club: 'PKU-LUG' },
    { university: '北京邮电大学', club: 'BYR Team' },
    { university: '北京邮电大学', club: '开放原子开源俱乐部' },
    { university: '北京航空航天大学', club: 'BUAA LUG' },
    { university: '北京航空航天大学', club: '开放原子开源俱乐部' },
    { university: '中国科学院大学', club: 'UCAS LUG' },
    { university: '天津大学', club: 'TJU LUG' },
    { university: '南开大学', club: 'NKU LUG' },
    { university: '哈尔滨工业大学', club: 'HIT LUG' },
    { university: '哈尔滨工业大学', club: '开放原子开源俱乐部' },
    // 华中/华南地区
    { university: '华中科技大学', club: 'HUST LUG' },
    { university: '华中科技大学', club: '联创团队' },
    { university: '华中科技大学', club: '开放原子开源俱乐部' },
    { university: '武汉大学', club: 'WHU LUG' },
    { university: '武汉大学', club: '网络安全协会' },
    { university: '中山大学', club: 'SYSU LUG' },
    { university: '南方科技大学', club: 'SUSTech CRA' },
    { university: '南方科技大学', club: '开放原子开源俱乐部' },
    { university: '深圳大学', club: 'SZU LUG' },
    { university: '深圳大学', club: '开放原子开源俱乐部' },
    // 西部/其他地区
    { university: '电子科技大学', club: 'UESTC LUG' },
    { university: '电子科技大学', club: '星辰工作室' },
    { university: '电子科技大学', club: '开放原子开源俱乐部' },
    { university: '四川大学', club: 'SCU LUG' },
    { university: '西安电子科技大学', club: 'XDU LUG' },
    { university: '西安电子科技大学', club: '开放原子开源俱乐部' },
    { university: '兰州大学', club: 'LZU LUG' },
    { university: '兰州大学', club: '开放原子开源俱乐部' },
    { university: '重庆邮电大学', club: 'Redrock 团队' },
    { university: '重庆邮电大学', club: 'LUG' },
    { university: '湖南大学', club: 'HNU LUG' },
    { university: '中南大学', club: 'CSU LUG' },
    { university: '山东大学', club: 'SDU LUG' },
    { university: '厦门大学', club: 'XMU LUG' }
  ],
  // 社区治理健康度对比（来自 CommunityGovernanceHealth.vue）
  communityHealth: {
    indicators: ['PR 合并率', 'Issue 响应时间', 'CI/CD 使用率', '平均代码质量得分', '安全审计频率', '贡献者多样性'],
    github: [82, 88, 78, 85, 75, 80],
    gitcode: [68, 75, 55, 72, 60, 65]
  },
  // 语言与技术竞争（南丁格尔玫瑰图数据）
  languageTech: {
    // 主流语言数据（基于2025年数据，增长率为2024→2025的变化）
    mainstream: [
      { name: 'JavaScript', value: 61, growth: 0 },
      { name: 'Python', value: 57, growth: 0 },
      { name: 'HTML/CSS', value: 52, growth: 1.96 },
      { name: 'Java', value: 49, growth: 6.52 },
      { name: 'SQL', value: 47, growth: -2.08 },
      { name: 'Shell', value: 36, growth: 0 }
    ],
    // 新兴语言数据（基于2025年数据，增长率为2024→2025的变化）
    emerging: [
      { name: 'TypeScript', value: 42, growth: 13.51 },
      { name: 'C++', value: 25, growth: 0 },
      { name: 'C#', value: 21, growth: -4.55 },
      { name: 'Go', value: 20, growth: 11.11 },
      { name: 'Kotlin', value: 18, growth: 28.57 },
      { name: 'C', value: 18, growth: 0 }
    ]
  }
});

// 处理高校社团数据
const processUniversityClubsData = () => {
  const counts: { [key: string]: { count: number; clubs: string[] } } = {};

  chartData.value.universityClubs.forEach(item => {
    if (!counts[item.university]) {
      counts[item.university] = { count: 0, clubs: [] };
    }
    counts[item.university].count++;
    counts[item.university].clubs.push(item.club);
  });

  // 转换为数组并排序
  const sorted = Object.entries(counts)
    .map(([name, data]) => ({
      name,
      value: data.count,
      clubs: data.clubs
    }))
    .sort((a, b) => b.value - a.value);

  return {
    universities: sorted.slice(0, 10).map(item => item.name), // 取前10名，避免X轴过挤
    values: sorted.slice(0, 10).map(item => item.value),
    details: sorted.slice(0, 10).reduce((acc, item) => {
      acc[item.name] = item.clubs;
      return acc;
    }, {} as { [key: string]: string[] })
  };
};

const communityData = computed(() => processUniversityClubsData());

// 空数据标识
const isEmpty = ref({
  infrastructure: false,
  community: false,
  communityHealth: false,
  languageTech: false
});

// 语言图表Tab状态
const languageTab = ref<'mainstream' | 'emerging'>('mainstream');

// 开发者活力数据
const vitalityData = ref({
  timeData: ["2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024"],
  total: [20, 50, 100, 200, 300, 400, 600, 800, 1000, 1200, 1350],
  new: [20, 30, 50, 100, 100, 100, 200, 200, 200, 200, 150]
});

// 开源项目热力图数据 [OpenRank, 活跃仓库数, 活跃开发者数, 项目名称, 所属组织]
const heatmapData = ref([
  [67538.71, 29433, 1409, 'OpenHarmony', 'Huawei'],
  [55000, 15000, 6000, 'Linux', 'Linux Foundation'],
  [60000, 8000, 7000, 'Android', 'Google'],
  [52000, 20000, 5500, 'Chromium', 'Google'],
  [38000, 16000, 4500, 'TensorFlow', 'Google'],
  [42000, 13000, 5000, 'React', 'Meta'],
  [45417.67, 18000, 8629, 'Azure', 'Microsoft'],
  [35000, 22000, 5000, 'Kubernetes', 'CNCF'],
  [21844.62, 12340, 57, 'LLM', '发芽工具'],
  [25241.13, 8000, 83, 'NixOS', '-'],
  [22961.09, 4500, 9377, 'openEuler', 'Huawei'],
  [17795.41, 2792, 975, 'DataDog', 'DataDog'],
  [25598.21, 2082, 282, '.Net', '操作系统'],
  [7405.46, 9639, 3, 'Expensify', 'Expensify'],
  [8862.2, 4625, 120, 'PaddlePaddle', 'Baidu'],
  [12959.59, 2363, 1, 'Odoo', 'Odoo'],
  [12326.76, 881, 179, 'Rust', 'Rust Foundation'],
  [6778.7, 400, 479, 'CloudHarmony', '企业应用']
]);

// 计算热力图统计数据
const topProject = computed(() => {
  const sorted = [...heatmapData.value].sort((a, b) => b[0] - a[0]);
  return { name: sorted[0][3], openrank: sorted[0][0] };
});

const totalDevs = computed(() => {
  const total = heatmapData.value.reduce((sum, item) => sum + item[2], 0);
  if (total >= 10000) {
    return (total / 10000).toFixed(1) + '万';
  }
  return total.toLocaleString();
});

// 标签显示控制（默认显示全部）
const showAllLabels = ref(true);

const toggleLabels = () => {
  showAllLabels.value = !showAllLabels.value;
  initHeatmapChart();
};

// 中国开源人才密度地图数据
const talentMapData = ref([
  { name: '北京市', value: [116.4074, 39.9042, 141.15, 231.47] },
  { name: '上海市', value: [121.4737, 31.2304, 269.83, 169.99] },
  { name: '浙江省', value: [120.1551, 30.2794, 8.94, 90.98] },
  { name: '广东省', value: [113.2644, 23.1291, 7.5, 149.76] },
  { name: '台湾省', value: [121.5090, 25.0443, 32.75, 117.88] },
  { name: '四川省', value: [104.0657, 30.6595, 1.01, 48.7] },
  { name: '江苏省', value: [118.7780, 32.0472, 5.25, 56.28] },
  { name: '湖北省', value: [114.3053, 30.5928, 1.84, 34.09] },
  { name: '福建省', value: [119.3062, 26.0747, 1.39, 16.79] },
  { name: '陕西省', value: [108.9480, 34.2632, 1.04, 21.38] },
  { name: '重庆市', value: [106.5049, 29.5332, 1.61, 13.24] },
  { name: '山东省', value: [120.3331, 36.0670, 1.02, 16.02] },
  { name: '湖南省', value: [112.9822, 28.1944, 0.68, 14.25] },
  { name: '安徽省', value: [117.2830, 31.8611, 0.93, 12.92] },
  { name: '辽宁省', value: [123.4321, 41.8007, 0.77, 11.37] },
  { name: '云南省', value: [102.7123, 25.0406, 0.1, 3.68] },
  { name: '天津市', value: [117.1901, 39.1258, 7.79, 9.34] },
  { name: '河南省', value: [113.6654, 34.7579, 0.55, 9.07] },
  { name: '吉林省', value: [125.3245, 43.8171, 0.15, 2.7] },
  { name: '江西省', value: [115.8581, 28.6820, 0.25, 4.17] },
  { name: '广西壮族自治区', value: [108.3200, 22.8241, 0.14, 3.15] },
  { name: '黑龙江省', value: [126.5349, 45.8038, 0.11, 5.13] },
  { name: '澳门特别行政区', value: [113.5490, 22.1987, 737.5, 2.36] },
  { name: '河北省', value: [114.5024, 38.0454, 0.26, 4.74] },
  { name: '山西省', value: [112.5489, 37.8570, 0.25, 3.78] },
  { name: '贵州省', value: [106.7135, 26.5783, 0.11, 1.93] },
  { name: '内蒙古自治区', value: [111.6708, 40.8183, 0.01, 0.96] },
  { name: '香港特别行政区', value: [114.1095, 22.3964, 1797.7, 197.75] },
  { name: '新疆维吾尔自治区', value: [87.6168, 43.7928, 0.01, 0.77] },
  { name: '甘肃省', value: [103.8235, 36.0580, 0.04, 1.46] },
  { name: '海南省', value: [110.3312, 20.0319, 0.36, 1.25] },
  { name: '宁夏回族自治区', value: [106.2782, 38.4664, 0.05, 0.27] },
  { name: '西藏自治区', value: [91.1175, 29.6469, 0.01, 0.14] },
  { name: '青海省', value: [101.7782, 36.6172, 0.01, 0.18] }
]);

// 计算 TOP 5 地区
const topRegions = computed(() => {
  const sorted = [...talentMapData.value]
    .map(item => ({
      name: item.name,
      score: item.value[3],
      density: item.value[2]
    }))
    .sort((a, b) => b.score - a.score);

  return sorted.slice(0, 5);
});

// 获取人才等级
const getTalentLevel = (density: number) => {
  if (density >= 500) return '🔥 核心枢纽';
  if (density >= 100) return '⭐ 重要聚集地';
  if (density >= 10) return '📈 潜力增长区';
  return '🌱 发展中区域';
};

// 图表实例存储（用于resize时销毁重绘）
const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({
  infrastructureChart: null,
  communityChart: null,
  communityHealthChart: null,
  languageTechChart: null,
  vitalityChart: null,
  heatmapChart: null,
  talentMapChart: null
});

// ===================== 新增：列表自动滚动逻辑 =====================
// 1. 定义滚动容器的ref
const scrollContainer1 = ref<HTMLDivElement | null>(null); // 第一个列表容器
const scrollContainer2 = ref<HTMLDivElement | null>(null); // 第二个列表容器

// 2. 存储定时器（键：1/2，值：定时器ID）
const scrollTimers: { [key: number]: NodeJS.Timeout | null } = {
  1: null,
  2: null
};

// 3. 滚动配置
const scrollStep = 1; // 每次滚动的步长（像素，越小越流畅）
const scrollInterval = 20; // 滚动间隔（毫秒，越小越流畅）

// 4. 通用自动滚动函数
const autoScroll = (containerKey: number) => {
  // 获取对应容器
  const container = containerKey === 1 ? scrollContainer1.value : scrollContainer2.value;
  if (!container) return;

  // 获取列表内容元素（project-list）
  const projectList = container.querySelector('.project-list') as HTMLDivElement;
  if (!projectList) return;

  // 若内容高度 ≤ 容器高度，不执行滚动
  if (projectList.scrollHeight <= container.clientHeight) {
    // 清除现有定时器
    if (scrollTimers[containerKey]) {
      clearInterval(scrollTimers[containerKey]!);
      scrollTimers[containerKey] = null;
    }
    return;
  }

  // 清除现有定时器（避免重复）
  if (scrollTimers[containerKey]) {
    clearInterval(scrollTimers[containerKey]!);
  }

  // 启动定时器滚动
  scrollTimers[containerKey] = setInterval(() => {
    // 向下滚动步长
    container.scrollTop += scrollStep;

    // 滚动到底部时，重置为0（循环滚动）
    // 加1是为了兼容像素精度问题
    if (projectList.scrollHeight - container.scrollTop <= container.clientHeight + 1) {
      container.scrollTop = 0; // 直接重置（也可以用平滑滚动：container.scrollTo({ top: 0, behavior: 'smooth' })）
    }
  }, scrollInterval);
};

// 5. 暂停滚动
const pauseScroll = (containerKey: number) => {
  if (scrollTimers[containerKey]) {
    clearInterval(scrollTimers[containerKey]!);
    scrollTimers[containerKey] = null;
  }
};

// 6. 恢复滚动
const resumeScroll = (containerKey: number) => {
  autoScroll(containerKey);
};

// 7. 组件卸载时清除所有定时器
onUnmounted(() => {
  Object.keys(scrollTimers).forEach(key => {
    const k = Number(key);
    if (scrollTimers[k]) {
      clearInterval(scrollTimers[k]!);
      scrollTimers[k] = null;
    }
  });
});

// 8. 格式化粉丝数（82738 → 82.7K）
const formatFollowers = (num: number) => {
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K';
  }
  return num.toString();
};

// 9. 图片加载失败处理
const handleImageError = (e: Event) => {
  const target = e.target as HTMLImageElement;
  const name = target.alt;
  target.style.display = 'none';
  if (target.parentElement) {
    target.parentElement.innerHTML = `<span class="avatar-text">${name.slice(0, 1)}</span>`;
  }
};

// 10. 企业排名相关方法
const getRankClass = (rank: number) => {
  if (rank === 1) return 'gold';
  if (rank === 2) return 'silver';
  if (rank === 3) return 'bronze';
  return 'normal';
};

const getRankText = (rank: number) => {
  if (rank <= 3) return rank.toString();
  return rank.toString().padStart(2, '0');
};

const getScoreClass = (score: number) => {
  if (score >= 90) return 'score-blue';        // 90+ 蓝色
  if (score >= 80) return 'score-light-blue';  // 80-89 浅蓝色
  if (score >= 70) return 'score-green';       // 70-79 绿色
  return 'score-red';                          // 60-69 红色
};

const getScoreBarClass = (score: number) => {
  if (score >= 90) return 'bar-blue';          // 90+ 蓝色
  if (score >= 80) return 'bar-light-blue';    // 80-89 浅蓝色
  if (score >= 70) return 'bar-green';         // 70-79 绿色
  return 'bar-red';                            // 60-69 红色
};

const getCountryFlag = (country: string) => {
  const countryMap: { [key: string]: string } = {
    'China': '🇨🇳',
    'USA': '🇺🇸',
    'Belgium': '🇧🇪',
    'Portugal': '🇵🇹',
    'Germany': '🇩🇪',
    'Russia': '🇷🇺'
  };
  return countryMap[country] || country;
};

const formatDevs = (num: number) => {
  if (num >= 10000) {
    return (num / 1000).toFixed(1) + 'K';
  }
  if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K';
  }
  return num.toString();
};
// ===================== 新增结束 =====================

// 初始化基础设施覆盖率图表（多层环形图）
const initInfrastructureChart = () => {
  const el = document.getElementById('infrastructureChart');
  if (!el) return;

  if (chartInstances.value.infrastructureChart) {
    chartInstances.value.infrastructureChart.dispose();
  }

  const myChart = echarts.init(el);
  chartInstances.value.infrastructureChart = myChart;

  const seriesData: any[] = [];
  const center = ['50%', '50%'];

  chartData.value.infrastructure.forEach(item => {
    const completeValue = item.value;
    const remainingValue = 100 - item.value;

    seriesData.push({
      name: item.name,
      type: 'pie',
      radius: item.radius,
      center: center,
      avoidLabelOverlap: false,
      startAngle: 90,
      hoverAnimation: true,
      label: {
        show: false
      },
      labelLine: {
        show: false
      },
      emphasis: {
        scale: true,
        scaleSize: 5
      },
      data: [
        {
          value: completeValue,
          name: item.name,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
              0, 0, 0, 1,
              [
                { offset: 0, color: item.color },
                { offset: 1, color: item.color + '80' }
              ]
            ),
            shadowBlur: 10,
            shadowColor: item.color + '40'
          }
        },
        {
          value: remainingValue,
          name: '未覆盖',
          itemStyle: {
            color: 'rgba(255, 255, 255, 0.08)'
          },
          tooltip: {
            show: false
          },
          emphasis: {
            disabled: true
          }
        }
      ]
    });
  });

  // 计算平均覆盖率
  const avgCoverage = Math.round(
    chartData.value.infrastructure.reduce((sum, d) => sum + d.value, 0) /
    chartData.value.infrastructure.length
  );

  myChart.setOption({
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#3b82f6',
      borderWidth: 1,
      borderRadius: 6,
      padding: 12,
      textStyle: { color: '#333', fontSize: 13 },
      formatter: (params: any) => {
        if (params.name === '未覆盖') return '';
        const remaining = 100 - params.value;
        return `
          <div style="line-height: 2;">
            <div style="font-weight: bold; color: #3b82f6; margin-bottom: 6px; border-bottom: 2px solid #3b82f6; padding-bottom: 4px;">${params.name}</div>
            <div style="display: flex; align-items: center; gap: 8px;">
              <span style="display: inline-block; width: 8px; height: 8px; background: #10b981; border-radius: 50%;"></span>
              已覆盖：<span style="color: #10b981; font-weight: 700; font-size: 15px;">${params.value}%</span>
            </div>
            <div style="display: flex; align-items: center; gap: 8px;">
              <span style="display: inline-block; width: 8px; height: 8px; background: #ef4444; border-radius: 50%;"></span>
              未覆盖：<span style="color: #ef4444; font-weight: 700; font-size: 15px;">${remaining}%</span>
            </div>
          </div>
        `;
      }
    },
    legend: {
      data: chartData.value.infrastructure.map(d => d.name),
      orient: 'vertical',
      right: '5%',
      top: 'center',
      itemWidth: 12,        // 图例方块宽度
      itemHeight: 12,       // 图例方块高度
      itemGap: 15,          // 图例项之间的间距
      icon: 'circle',       // 图例形状：'circle'圆形, 'rect'方形, 'roundRect'圆角方形
      textStyle: {
        color: '#333',
        fontSize: 12,
        padding: [0, 0, 0, 8]  // 文字与图标的间距
      }
    },
    graphic: [
      {
        type: 'text',
        left: 'center',
        top: '45%',
        style: {
          text: '总覆盖度',
          fill: '#666',
          fontSize: 13,
          fontWeight: '500'
        }
      },
      {
        type: 'text',
        left: 'center',
        top: '52%',
        style: {
          text: `${avgCoverage}%`,
          fill: '#3b82f6',
          fontSize: 28,
          fontWeight: 'bold'
        }
      }
    ],
    series: seriesData,
    animationDuration: 1000,
    animationEasing: 'cubicOut',
    animationDelay: (idx: number) => idx * 100
  });
};

// 初始化高校开源社团/俱乐部数量图表（纵向柱状图）
const initCommunityChart = () => {
  const el = document.getElementById('communityChart');
  if (!el) return;

  if (chartInstances.value.communityChart) {
    chartInstances.value.communityChart.dispose();
  }

  const myChart = echarts.init(el);
  chartInstances.value.communityChart = myChart;

  const data = communityData.value;

  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' },
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#3b82f6',
      borderWidth: 1,
      borderRadius: 6,
      padding: 12,
      textStyle: { color: '#333', fontSize: 13 },
      formatter: (params: any) => {
        const name = params[0].name;
        const value = params[0].value;
        const clubs = data.details[name] || [];

        const clubsHtml = clubs.map(c => `• ${c}`).join('<br/>');

        return `
          <div style="line-height: 2;">
            <div style="font-weight: bold; color: #3b82f6; margin-bottom: 6px; border-bottom: 2px solid #3b82f6; padding-bottom: 4px;">${name}</div>
            <div>社团数量: <span style="color: #10b981; font-weight: 700; font-size: 16px;">${value}</span> 个</div>
            <div style="margin-top: 8px; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 6px; font-size: 11px; color: #666; max-height: 150px; overflow-y: auto;">
              ${clubsHtml}
            </div>
          </div>
        `;
      }
    },
    grid: {
      left: '10%',
      right: '10%',
      bottom: '5%',
      top: '20%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: data.universities,
      axisLabel: {
        fontSize: 10,
        rotate: 45,
        interval: 0,
        color: '#666',
        margin: 15
      },
      axisTick: {
        alignWithLabel: true,
        length: 5
      },
      axisLine: {
        lineStyle: { color: '#e5e7eb', width: 2 }
      }
    },
    yAxis: {
      type: 'value',
      name: '社团数量',
      nameTextStyle: { fontSize: 12, color: '#666' },
      axisLabel: { fontSize: 12, color: '#666' },
      minInterval: 1,
      splitLine: {
        lineStyle: { color: 'rgba(0, 0, 0, 0.06)', type: 'dashed' }
      }
    },
    series: [
      {
        name: '社团数量',
        type: 'bar',
        data: data.values,
        barWidth: '60%',
        barCategoryGap: '30%',
        itemStyle: {
          color: (params: any) => {
            // 根据排名使用不同颜色
            const colors = [
              ['#3b82f6', '#60a5fa'], // 蓝色
              ['#8b5cf6', '#a78bfa'], // 紫色
              ['#ec4899', '#f472b6'], // 粉色
              ['#10b981', '#34d399'], // 绿色
              ['#f59e0b', '#fbbf24']  // 橙色
            ];
            const colorPair = colors[params.dataIndex % colors.length];
            return new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              { offset: 0, color: colorPair[1] },
              { offset: 1, color: colorPair[0] }
            ]);
          },
          borderRadius: [4, 4, 0, 0],
          shadowBlur: 8,
          shadowColor: 'rgba(59, 130, 246, 0.3)'
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}',
          fontSize: 11,
          color: '#3b82f6',
          fontWeight: 'bold'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 15,
            shadowColor: 'rgba(59, 130, 246, 0.6)'
          }
        }
      }
    ],
    animationDuration: 1000,
    animationEasing: 'cubicOut',
    animationDelay: (idx: number) => idx * 50
  });
};

// 初始化社区治理健康度对比（纵向柱状图）
const initCommunityHealthChart = () => {
  const el = document.getElementById('ossCompassChart');
  if (!el) return;

  if (chartInstances.value.communityHealthChart) {
    chartInstances.value.communityHealthChart.dispose();
  }

  const myChart = echarts.init(el);
  chartInstances.value.communityHealthChart = myChart;

  const data = chartData.value.communityHealth;

  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow',
        shadowStyle: {
          color: 'rgba(59, 130, 246, 0.1)'
        }
      },
      backgroundColor: 'rgba(255, 255, 255, 0.98)',
      borderColor: '#3b82f6',
      borderWidth: 2,
      borderRadius: 8,
      padding: 16,
      textStyle: { color: '#333', fontSize: 13 },
      extraCssText: 'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);',
      formatter: (params: any) => {
        const indicator = params[0].name;
        const githubValue = params[0].value;
        const gitcodeValue = params[1].value;
        const diff = githubValue - gitcodeValue;
        const diffPercent = ((diff / githubValue) * 100).toFixed(1);

        return `
          <div style="line-height: 2.2;">
            <div style="font-weight: bold; color: #3b82f6; font-size: 15px; margin-bottom: 8px; border-bottom: 2px solid #3b82f6; padding-bottom: 4px;">${indicator}</div>
            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 6px;">
              <span style="display: inline-block; width: 10px; height: 10px; background: linear-gradient(135deg, #BF232A, #FF4900); border-radius: 50%; box-shadow: 0 2px 4px rgba(191, 35, 42, 0.3);"></span>
              <span style="color: #666; min-width: 100px;">GitHub 社区</span>
              <span style="color: #BF232A; font-weight: 700; font-size: 15px;">${githubValue}</span>
            </div>
            <div style="display: flex; align-items: center; gap: 10px;">
              <span style="display: inline-block; width: 10px; height: 10px; background: linear-gradient(135deg, #FF4900, #FFAB00); border-radius: 50%; box-shadow: 0 2px 4px rgba(255, 73, 0, 0.3);"></span>
              <span style="color: #666; min-width: 100px;">GitCode 社区</span>
              <span style="color: #FF4900; font-weight: 700; font-size: 15px;">${gitcodeValue}</span>
            </div>
            ${diff > 0 ? `<div style="margin-top: 8px; padding: 4px 8px; background: rgba(59, 130, 246, 0.1); border-radius: 4px; color: #3b82f6; font-size: 11px;">📊 GitHub 领先 ${diffPercent}%</div>` : ''}
          </div>
        `;
      }
    },
    legend: {
      data: ['GitHub 社区', 'GitCode 社区'],
      top: '2%',
      right: '5%',
      itemWidth: 14,
      itemHeight: 14,
      itemGap: 15,
      textStyle: {
        color: '#333',
        fontSize: 12,
        fontWeight: '600'
      },
      icon: 'roundRect'
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '8%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: data.indicators,
      axisLabel: {
        fontSize: 11,
        color: '#666',
        fontWeight: '500',
        interval: 0,
        rotate: 20,
        margin: 12
      },
      axisTick: {
        alignWithLabel: true,
        length: 5
      },
      axisLine: {
        lineStyle: { color: '#e5e7eb', width: 2 }
      }
    },
    yAxis: {
      type: 'value',
      name: '健康度得分',
      nameTextStyle: {
        fontSize: 13,
        color: '#666',
        fontWeight: '600',
        padding: [0, 0, 0, 10]
      },
      max: 100,
      axisLabel: {
        fontSize: 12,
        color: '#666',
        formatter: '{value}'
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 0, 0, 0.06)',
          type: 'dashed'
        }
      }
    },
    series: [
      {
        name: 'GitHub 社区',
        type: 'bar',
        data: data.github,
        barWidth: '35%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: '#FF4900' },
            { offset: 0.5, color: '#BF232A' },
            { offset: 1, color: '#BF232A' }
          ]),
          borderRadius: [6, 6, 0, 0],
          shadowBlur: 10,
          shadowColor: 'rgba(191, 35, 42, 0.3)'
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}',
          fontSize: 11,
          color: '#BF232A',
          fontWeight: 'bold'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 20,
            shadowColor: 'rgba(191, 35, 42, 0.6)'
          }
        }
      },
      {
        name: 'GitCode 社区',
        type: 'bar',
        data: data.gitcode,
        barWidth: '35%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            { offset: 0, color: '#FFAB00' },
            { offset: 0.5, color: '#FF4900' },
            { offset: 1, color: '#FF4900' }
          ]),
          borderRadius: [6, 6, 0, 0],
          shadowBlur: 10,
          shadowColor: 'rgba(255, 73, 0, 0.3)'
        },
        label: {
          show: true,
          position: 'top',
          formatter: '{c}',
          fontSize: 11,
          color: '#FF4900',
          fontWeight: 'bold'
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 20,
            shadowColor: 'rgba(255, 73, 0, 0.6)'
          }
        }
      }
    ],
    animationDuration: 1000,
    animationEasing: 'cubicOut',
    animationDelay: (idx: number) => idx * 80
  });
};

// 根据增长率动态生成颜色的函数
const getColorByGrowth = (growth: number, tab: string) => {
  const minGrowth = -5;
  const maxGrowth = tab === 'mainstream' ? 10 : 30;
  const normalized = Math.max(0, Math.min(1, (growth - minGrowth) / (maxGrowth - minGrowth)));

  const colorStops = [
    { pos: 0, color: '#0063D0' },
    { pos: 0.2, color: '#0081FF' },
    { pos: 0.4, color: '#00A0FF' },
    { pos: 0.6, color: '#00C0FF' },
    { pos: 0.8, color: '#00E0FF' },
    { pos: 1, color: '#00F2FF' }
  ];

  let startColor = colorStops[0].color;
  let endColor = colorStops[0].color;
  let localPos = 0;

  for (let i = 0; i < colorStops.length - 1; i++) {
    if (normalized >= colorStops[i].pos && normalized <= colorStops[i + 1].pos) {
      startColor = colorStops[i].color;
      endColor = colorStops[i + 1].color;
      localPos = (normalized - colorStops[i].pos) / (colorStops[i + 1].pos - colorStops[i].pos);
      break;
    }
  }

  const interpolateColor = (color1: string, color2: string, factor: number) => {
    const c1 = parseInt(color1.slice(1), 16);
    const c2 = parseInt(color2.slice(1), 16);
    const r1 = (c1 >> 16) & 0xff, g1 = (c1 >> 8) & 0xff, b1 = c1 & 0xff;
    const r2 = (c2 >> 16) & 0xff, g2 = (c2 >> 8) & 0xff, b2 = c2 & 0xff;
    const r = Math.round(r1 + (r2 - r1) * factor);
    const g = Math.round(g1 + (g2 - g1) * factor);
    const b = Math.round(b1 + (b2 - b1) * factor);
    return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
  };

  const topColor = interpolateColor(startColor, endColor, localPos);

  return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
    { offset: 0, color: topColor },
    { offset: 1, color: startColor }
  ]);
};

// 初始化语言与技术竞争（南丁格尔玫瑰图）
const initLanguageTechChart = () => {
  const el = document.getElementById('languageTechChart');
  if (!el) return;

  if (chartInstances.value.languageTechChart) {
    chartInstances.value.languageTechChart.dispose();
  }

  const myChart = echarts.init(el);
  chartInstances.value.languageTechChart = myChart;

  const currentData = languageTab.value === 'mainstream'
    ? chartData.value.languageTech.mainstream
    : chartData.value.languageTech.emerging;

  myChart.setOption({
    graphic: {
      elements: [
        // 中心发光圆
        {
          type: 'circle',
          z: 0,
          shape: { cx: '48%', cy: '54%', r: '21%' },
          style: {
            fill: {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [
                { offset: 0, color: 'rgba(59, 130, 246, 0.15)' },
                { offset: 0.7, color: 'rgba(59, 130, 246, 0.05)' },
                { offset: 1, color: 'rgba(59, 130, 246, 0)' }
              ]
            },
            stroke: 'rgba(59, 130, 246, 0.4)',
            lineWidth: 2,
            shadowBlur: 10,
            shadowColor: 'rgba(59, 130, 246, 0.3)'
          }
        },
        // 中间虚线圆
        {
          type: 'circle',
          z: 0,
          shape: { cx: '48%', cy: '54%', r: '50%' },
          style: {
            stroke: 'rgba(139, 92, 246, 0.2)',
            lineWidth: 1.5,
            lineDash: [8, 4]
          }
        },
        // 外层虚线圆
        {
          type: 'circle',
          z: 0,
          shape: { cx: '48%', cy: '54%', r: '80%' },
          style: {
            stroke: 'rgba(236, 72, 153, 0.15)',
            lineWidth: 1,
            lineDash: [5, 5]
          }
        },
        // 装饰性小圆点（12点钟方向）
        {
          type: 'circle',
          z: 1,
          shape: { cx: '48%', cy: '12%', r: 4 },
          style: {
            fill: '#3b82f6',
            shadowBlur: 8,
            shadowColor: 'rgba(59, 130, 246, 0.6)'
          }
        },
        // 装饰性小圆点（3点钟方向）
        {
          type: 'circle',
          z: 1,
          shape: { cx: '88%', cy: '54%', r: 3 },
          style: {
            fill: '#8b5cf6',
            shadowBlur: 6,
            shadowColor: 'rgba(139, 92, 246, 0.6)'
          }
        },
        // 装饰性小圆点（6点钟方向）
        {
          type: 'circle',
          z: 1,
          shape: { cx: '48%', cy: '96%', r: 3 },
          style: {
            fill: '#ec4899',
            shadowBlur: 6,
            shadowColor: 'rgba(236, 72, 153, 0.6)'
          }
        },
        // 装饰性小圆点（9点钟方向）
        {
          type: 'circle',
          z: 1,
          shape: { cx: '8%', cy: '54%', r: 3 },
          style: {
            fill: '#10b981',
            shadowBlur: 6,
            shadowColor: 'rgba(16, 185, 129, 0.6)'
          }
        }
      ]
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      borderColor: '#3b82f6',
      borderWidth: 1,
      borderRadius: 6,
      padding: 10,
      textStyle: { color: '#333', fontSize: 13 },
      formatter: (params: any) => `
        <div style="line-height: 1.8;">
          <div style="font-weight: bold; color: #3b82f6;">${params.name}</div>
          <div>市场占比：<span style="color: #10b981;">${params.value}%</span></div>
          <div>增长率：<span style="color: #f59e0b;">${params.data.growth}%</span></div>
        </div>
      `
    },
    visualMap: {
      show: true,
      type: 'continuous',
      min: -5,
      max: languageTab.value === 'mainstream' ? 10 : 30,
      dimension: 2,
      orient: 'vertical',
      itemWidth: 14,
      itemHeight: 90,
      text: ['高增长', '低增长'],
      textStyle: { color: '#333', fontSize: 11, fontWeight: '600' },
      inRange: { color: ['#0063D0', '#00F2FF'] },
      right: '2%',
      top: '0%',
      borderColor: 'rgba(59, 130, 246, 0.3)',
      borderWidth: 2,
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      padding: 8,
      borderRadius: 8,
      shadowBlur: 10,
      shadowColor: 'rgba(0, 0, 0, 0.1)'
    },
    polar: {
      radius: ['25%', '78%'],
      center: ['48%', '54%'],
      axisLine: { show: false },
      splitLine: {
        show: true,
        lineStyle: { color: 'rgba(0,0,0,0.05)', type: 'dashed' }
      }
    },
    angleAxis: {
      type: 'category',
      data: currentData.map(item => item.name),
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: {
        color: '#333',
        fontSize: 13,
        fontWeight: '500',
        margin: 18,
        rotate: 0
      }
    },
    radiusAxis: {
      type: 'value',
      min: 0,
      max: Math.max(...currentData.map(item => item.value)) * 1.1,
      axisLine: { show: false },
      axisTick: { show: false },
      axisLabel: { show: false },
      splitLine: {
        show: true,
        lineStyle: { color: 'rgba(0,0,0,0.08)', type: 'dashed' }
      }
    },
    series: [
      {
        name: '语言占比',
        type: 'bar',
        coordinateSystem: 'polar',
        data: currentData.map((item, index) => {
          const baseColor = getColorByGrowth(item.growth, languageTab.value);
          // 为每个花瓣添加独特的渐变效果
          const gradientColor = new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: baseColor.colorStops[0].color },
            { offset: 0.5, color: baseColor.colorStops[0].color },
            { offset: 1, color: baseColor.colorStops[1].color }
          ]);

          return {
            value: item.value,
            growth: item.growth,
            itemStyle: {
              color: gradientColor,
              borderRadius: [18, 18, 0, 0],
              borderWidth: 2,
              borderColor: 'rgba(255, 255, 255, 0.4)',
              shadowBlur: 12,
              shadowColor: 'rgba(59, 130, 246, 0.4)',
              opacity: 0.95
            }
          };
        }),
        barWidth: '35%',
        barGap: '-15%',
        label: {
          show: true,
          position: 'inside',
          color: '#FFFFFF',
          fontSize: 13,
          fontWeight: 'bold',
          formatter: '{c}%',
          distance: 5
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 25,
            shadowColor: 'rgba(59, 130, 246, 0.8)',
            borderWidth: 3,
            borderColor: 'rgba(255, 255, 255, 0.6)',
            opacity: 1
          },
          label: {
            fontSize: 15,
            fontWeight: 'bold',
            color: '#FFFFFF',
            textShadowBlur: 4,
            textShadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        // 添加动画效果
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: (idx: number) => idx * 100
      }
    ]
  });
};

// 切换语言Tab
const changeLanguageTab = () => {
  languageTab.value = languageTab.value === 'mainstream' ? 'emerging' : 'mainstream';
  initLanguageTechChart();
};

// 初始化开发者活力波形图
const initVitalityChart = () => {
  const el = document.getElementById('vitalityChart');
  if (!el) return;

  if (chartInstances.value.vitalityChart) {
    chartInstances.value.vitalityChart.dispose();
  }

  const myChart = echarts.init(el);
  chartInstances.value.vitalityChart = myChart;

  myChart.setOption({
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        crossStyle: {
          color: '#999',
          width: 1,
          type: 'dashed'
        },
        lineStyle: {
          color: '#3b82f6',
          width: 1,
          type: 'dashed'
        }
      },
      backgroundColor: 'rgba(255, 255, 255, 0.98)',
      borderColor: '#10b981',
      borderWidth: 2,
      borderRadius: 8,
      padding: 16,
      textStyle: { color: '#333', fontSize: 14 },
      extraCssText: 'box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);',
      formatter: (params: any) => {
        if (!Array.isArray(params) || params.length === 0) {
          return '<div>暂无数据</div>';
        }
        const totalItem = params.find((item: any) => item.seriesName === '累计开发者');
        const newItem = params.find((item: any) => item.seriesName === '年度新增');
        const totalValue = totalItem?.value || 0;
        const newValue = newItem?.value || 0;
        const time = totalItem?.axisValue || newItem?.axisValue || '未知时间';

        // 计算增长率
        const prevIndex = vitalityData.value.timeData.indexOf(time) - 1;
        let growthRate = 0;
        if (prevIndex >= 0) {
          const prevTotal = vitalityData.value.total[prevIndex];
          growthRate = ((totalValue - prevTotal) / prevTotal * 100).toFixed(1);
        }

        return `
          <div style="line-height: 2;">
            <div style="font-weight: bold; color: #10b981; font-size: 16px; margin-bottom: 8px; border-bottom: 2px solid #10b981; padding-bottom: 4px;">📅 ${time}年</div>
            <div style="display: flex; align-items: center; gap: 8px;">
              <span style="display: inline-block; width: 8px; height: 8px; background: #10b981; border-radius: 50%;"></span>
              累计开发者：<span style="color: #10b981; font-weight: 700; font-size: 15px;">${totalValue}</span> 万人
            </div>
            <div style="display: flex; align-items: center; gap: 8px;">
              <span style="display: inline-block; width: 8px; height: 8px; background: #f59e0b; border-radius: 50%;"></span>
              年度新增：<span style="color: #f59e0b; font-weight: 700; font-size: 15px;">${newValue}</span> 万人
            </div>
            ${growthRate > 0 ? `<div style="margin-top: 6px; padding: 4px 8px; background: rgba(16, 185, 129, 0.1); border-radius: 4px; color: #10b981; font-size: 12px;">📈 同比增长 ${growthRate}%</div>` : ''}
          </div>
        `;
      }
    },
    legend: {
      left: 'center',
      top: '0%',
      itemWidth: 16,
      itemHeight: 16,
      itemGap: 20,
      textStyle: { color: '#333', fontSize: 14, fontWeight: '600' },
      data: ['累计开发者', '年度新增'],
      icon: 'roundRect',
      borderRadius: 4
    },
    grid: {
      top: '18%',
      left: '3%',
      right: '4%',
      bottom: '8%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      axisTick: { show: false },
      axisLine: {
        lineStyle: { color: '#e5e7eb', width: 2 },
        onZero: false
      },
      axisLabel: {
        color: '#666',
        fontSize: 13,
        fontWeight: '500',
        interval: 0,
        margin: 12
      },
      data: vitalityData.value.timeData
    },
    yAxis: {
      type: 'value',
      name: '开发者数量（万人）',
      nameTextStyle: { color: '#666', fontSize: 12 },
      axisLabel: { color: '#666', fontSize: 12 },
      splitLine: {
        show: true,
        lineStyle: { color: 'rgba(0, 0, 0, 0.06)', type: 'dashed' }
      }
    },
    series: [
      {
        name: '累计开发者',
        type: 'line',
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: { color: '#10b981', width: 3 },
        itemStyle: {
          color: '#10b981',
          borderWidth: 2,
          borderColor: '#fff'
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: 'rgba(16, 185, 129, 0.4)' },
            { offset: 1, color: 'rgba(16, 185, 129, 0.05)' }
          ]),
          shadowBlur: 10,
          shadowColor: 'rgba(16, 185, 129, 0.2)'
        },
        data: vitalityData.value.total,
        emphasis: {
          itemStyle: {
            shadowBlur: 20,
            shadowColor: 'rgba(16, 185, 129, 0.6)',
            scale: 1.2
          },
          label: {
            show: true,
            formatter: '{c} 万',
            position: 'top',
            color: '#10b981',
            fontSize: 13,
            fontWeight: 'bold'
          }
        },
        markPoint: {
          data: [
            {
              type: 'max', name: '最大值',
              itemStyle: { color: '#10b981' },
              label: {
                color: '#fff',
                fontSize: 12,
                fontWeight: 'bold'
              }
            }
          ],
          symbolSize: 60
        },
        markLine: {
          silent: true,
          lineStyle: {
            color: '#10b981',
            type: 'dashed',
            width: 1
          },
          label: {
            color: '#10b981',
            fontSize: 11
          },
          data: [{ type: 'average', name: '平均值' }]
        }
      },
      {
        name: '年度新增',
        type: 'bar',
        barWidth: '40%',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#f59e0b' },
            { offset: 1, color: '#fbbf24' }
          ]),
          borderRadius: [4, 4, 0, 0],
          shadowBlur: 8,
          shadowColor: 'rgba(245, 158, 11, 0.3)'
        },
        data: vitalityData.value.new,
        emphasis: {
          itemStyle: {
            shadowBlur: 20,
            shadowColor: 'rgba(245, 158, 11, 0.6)'
          },
          label: {
            show: true,
            formatter: '{c} 万',
            position: 'top',
            color: '#f59e0b',
            fontSize: 12,
            fontWeight: 'bold'
          }
        },
        markPoint: {
          data: [
            {
              type: 'max', name: '峰值',
              itemStyle: { color: '#f59e0b' },
              label: {
                color: '#fff',
                fontSize: 12,
                fontWeight: 'bold'
              }
            }
          ],
          symbolSize: 60
        },
        animationDelay: (idx: number) => idx * 50
      }
    ]
  });
};

// 初始化开源项目热力图
const initHeatmapChart = () => {
  const el = document.getElementById('heatmapChart');
  if (!el) return;

  if (chartInstances.value.heatmapChart) {
    chartInstances.value.heatmapChart.dispose();
  }

  const myChart = echarts.init(el);
  chartInstances.value.heatmapChart = myChart;

  myChart.setOption({
    tooltip: {
      trigger: 'item',
      backgroundColor: 'rgba(255, 255, 255, 0.98)',
      borderColor: '#3b82f6',
      borderWidth: 2,
      borderRadius: 10,
      padding: 18,
      textStyle: { color: '#333', fontSize: 13 },
      extraCssText: 'box-shadow: 0 8px 24px rgba(59, 130, 246, 0.25);',
      formatter: (params: any) => {
        const data = params.data.value;
        const name = data[3];
        const org = data[4];
        const openrank = data[0].toLocaleString();
        const repos = data[1].toLocaleString();
        const devs = data[2].toLocaleString();

        // 计算排名
        const sorted = [...heatmapData.value].sort((a, b) => b[0] - a[0]);
        const rank = sorted.findIndex(item => item[3] === name) + 1;

        return `
          <div style="line-height: 2.2;">
            <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;">
              <div style="font-weight: bold; color: #3b82f6; font-size: 16px;">${name}</div>
              <div style="background: linear-gradient(135deg, #3b82f6, #8b5cf6); color: #fff; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 600;">TOP ${rank}</div>
            </div>
            <div style="border-bottom: 2px solid #3b82f6; margin-bottom: 10px; opacity: 0.3;"></div>
            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 6px;">
              <span style="display: inline-block; width: 10px; height: 10px; background: linear-gradient(135deg, #f59e0b, #fbbf24); border-radius: 50%; box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);"></span>
              <span style="color: #666; min-width: 80px;">所属组织</span>
              <span style="color: #f59e0b; font-weight: 700;">${org}</span>
            </div>
            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 6px;">
              <span style="display: inline-block; width: 10px; height: 10px; background: linear-gradient(135deg, #3b82f6, #60a5fa); border-radius: 50%; box-shadow: 0 2px 4px rgba(59, 130, 246, 0.3);"></span>
              <span style="color: #666; min-width: 80px;">OpenRank</span>
              <span style="color: #3b82f6; font-weight: 700; font-size: 14px;">${openrank}</span>
            </div>
            <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 6px;">
              <span style="display: inline-block; width: 10px; height: 10px; background: linear-gradient(135deg, #8b5cf6, #a78bfa); border-radius: 50%; box-shadow: 0 2px 4px rgba(139, 92, 246, 0.3);"></span>
              <span style="color: #666; min-width: 80px;">活跃仓库</span>
              <span style="color: #8b5cf6; font-weight: 700; font-size: 14px;">${repos}</span>
            </div>
            <div style="display: flex; align-items: center; gap: 10px;">
              <span style="display: inline-block; width: 10px; height: 10px; background: linear-gradient(135deg, #10b981, #34d399); border-radius: 50%; box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);"></span>
              <span style="color: #666; min-width: 80px;">活跃开发者</span>
              <span style="color: #10b981; font-weight: 700; font-size: 14px;">${devs}</span>
            </div>
          </div>
        `;
      }
    },
    visualMap: {
      min: 0,
      max: 9000,
      dimension: 2,
      orient: 'vertical',
      right: '2%',
      top: 'center',
      itemWidth: 18,
      itemHeight: 140,
      text: ['🔥 热门', '❄️ 冷门'],
      calculable: true,
      inRange: {
        color: ['#FF4900', '#FFAB00', '#00B03E', '#00C0FF', '#00F0FF']
      },
      textStyle: {
        color: '#333',
        fontSize: 13,
        fontWeight: '600'
      },
      borderColor: 'rgba(59, 130, 246, 0.3)',
      borderWidth: 2,
      backgroundColor: 'rgba(255, 255, 255, 0.95)',
      padding: 12,
      borderRadius: 8,
      shadowBlur: 10,
      shadowColor: 'rgba(0, 0, 0, 0.1)'
    },
    grid: {
      top: '8%',
      left: '8%',
      right: '16%',
      bottom: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'value',
      name: 'OpenRank 影响力指数',
      nameLocation: 'center',
      nameGap: 35,
      min: 1000,
      max: 70000,
      nameTextStyle: {
        color: '#3b82f6',
        fontSize: 14,
        fontWeight: '700'
      },
      axisLine: {
        lineStyle: {
          color: '#3b82f6',
          width: 2,
          shadowBlur: 4,
          shadowColor: 'rgba(59, 130, 246, 0.3)'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 12,
        fontWeight: '600',
        formatter: (value: number) => {
          if (value >= 1000) {
            return (value / 1000).toFixed(0) + 'k';
          }
          return value;
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(59, 130, 246, 0.1)',
          type: 'dashed',
          width: 1
        }
      }
    },
    yAxis: {
      type: 'value',
      name: '活跃仓库数量',
      nameLocation: 'center',
      nameGap: 45,
      min: 0,
      max: 30000,
      nameTextStyle: {
        color: '#8b5cf6',
        fontSize: 14,
        fontWeight: '700'
      },
      axisLine: {
        lineStyle: {
          color: '#8b5cf6',
          width: 2,
          shadowBlur: 4,
          shadowColor: 'rgba(139, 92, 246, 0.3)'
        }
      },
      axisLabel: {
        color: '#666',
        fontSize: 12,
        fontWeight: '600',
        formatter: (value: number) => {
          if (value >= 1000) {
            return (value / 1000).toFixed(0) + 'k';
          }
          return value;
        }
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: 'rgba(139, 92, 246, 0.1)',
          type: 'dashed',
          width: 1
        }
      }
    },
    series: [
      {
        name: '开源项目',
        type: 'scatter',
        data: heatmapData.value.map(item => ({
          value: item,
          name: item[3]
        })),
        symbolSize: (data: any) => {
          const devs = data[2];
          return Math.log(devs + 1) * 4 + 10;
        },
        itemStyle: {
          opacity: 0.9,
          shadowBlur: 15,
          shadowColor: 'rgba(59, 130, 246, 0.5)',
          borderWidth: 2.5,
          borderColor: 'rgba(255, 255, 255, 0.8)'
        },
        label: {
          show: true,
          formatter: (params: any) => {
            const openrank = params.value[0];
            const repos = params.value[1];
            const devs = params.value[2];

            // 如果开启显示全部，则显示所有标签
            if (showAllLabels.value) {
              return params.value[3];
            }

            // 否则只显示重要项目：OpenRank > 15000 或 开发者数 > 3000 或 仓库数 > 10000
            if (openrank > 15000 || devs > 3000 || repos > 10000) {
              return params.value[3];
            }
            return '';
          },
          position: (pos: any, params: any, dom: any, rect: any, size: any) => {
            // 智能定位：根据位置自动调整标签方向，避免重叠
            const x = pos[0];
            const y = pos[1];
            const viewWidth = size.viewSize[0];
            const viewHeight = size.viewSize[1];

            // 右上区域：标签在上方
            if (x > viewWidth * 0.6 && y < viewHeight * 0.4) {
              return 'top';
            }
            // 右下区域：标签在右侧
            if (x > viewWidth * 0.6 && y > viewHeight * 0.6) {
              return 'right';
            }
            // 左上区域：标签在左侧
            if (x < viewWidth * 0.4 && y < viewHeight * 0.4) {
              return 'left';
            }
            // 左下区域：标签在下方
            if (x < viewWidth * 0.4 && y > viewHeight * 0.6) {
              return 'bottom';
            }
            // 默认在上方
            return 'top';
          },
          color: '#1e293b',
          fontSize: 10,
          fontWeight: 'bold',
          backgroundColor: 'rgba(255, 255, 255, 0.95)',
          padding: [3, 7],
          borderRadius: 5,
          borderWidth: 1.5,
          borderColor: 'rgba(59, 130, 246, 0.4)',
          shadowBlur: 6,
          shadowColor: 'rgba(0, 0, 0, 0.1)',
          distance: 8
        },
        labelLayout: {
          // 标签避让配置
          hideOverlap: true,
          moveOverlap: 'shiftY',
          draggable: false
        },
        emphasis: {
          focus: 'self',
          itemStyle: {
            shadowBlur: 25,
            shadowColor: 'rgba(59, 130, 246, 0.9)',
            borderWidth: 4,
            borderColor: '#fff',
            opacity: 1
          },
          label: {
            show: true,
            fontSize: 12,
            fontWeight: 'bold',
            backgroundColor: 'rgba(59, 130, 246, 0.98)',
            color: '#fff',
            borderColor: '#3b82f6',
            borderWidth: 2,
            padding: [5, 9],
            shadowBlur: 10,
            shadowColor: 'rgba(59, 130, 246, 0.5)',
            distance: 10
          }
        },
        animationType: 'scale',
        animationEasing: 'elasticOut',
        animationDelay: (idx: number) => idx * 40
      }
    ]
  });
};

// 初始化中国开源人才密度地图
const initTalentMapChart = () => {
  const el = document.getElementById('talentMapChart');
  if (!el) return;

  if (chartInstances.value.talentMapChart) {
    chartInstances.value.talentMapChart.dispose();
  }

  const myChart = echarts.init(el);
  chartInstances.value.talentMapChart = myChart;

  // 注册中国地图（科技蓝风格）
  // 尝试导入本地地图文件，如果失败则从 CDN 加载
  import('@/views/Jyh/ecosystem/json/china.js')
    .then(() => {
      console.log('本地地图文件加载成功');
      // 延迟一下确保地图注册完成
      setTimeout(() => {
        renderMap();
      }, 100);
    })
    .catch(err => {
      console.warn('本地地图文件加载失败，尝试从 CDN 加载:', err);
      // 从 CDN 加载地图数据
      fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
        .then(response => response.json())
        .then(geoJson => {
          echarts.registerMap('china', geoJson);
          renderMap();
        })
        .catch(cdnErr => {
          console.error('CDN 地图数据加载失败:', cdnErr);
          el.innerHTML = '<div style="display: flex; align-items: center; justify-content: center; height: 100%; color: #666; font-size: 14px;">地图数据加载失败，请刷新页面重试</div>';
        });
    });

  // 渲染地图的函数
  function renderMap() {
    myChart.setOption({
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(17, 54, 122, 0.95)',
        borderColor: '#00A0FF',
        borderWidth: 1,
        borderRadius: 8,
        padding: 16,
        textStyle: { color: '#6dd0e3', fontSize: 14 },
        extraCssText: 'box-shadow: 0 4px 16px rgba(0, 160, 255, 0.4);',
        formatter: (params: any) => {
          if (params.componentSubType === 'scatter') {
            const data = params.data.value;
            const name = params.name;
            const density = data[2];
            const total = data[3];
            const level = getTalentLevel(density);

            return `
              <div style="line-height: 2;">
                <div style="font-weight: bold; color: #00F2FF; font-size: 16px; margin-bottom: 10px;">${name}</div>
                <div style="margin-bottom: 6px;">
                  <span style="color: #6dd0e3;">开源人才密度：</span>
                  <span style="color: #00C0FF; font-weight: 700; font-size: 15px;">${density}</span> 人/km²
                </div>
                <div style="margin-bottom: 6px;">
                  <span style="color: #6dd0e3;">开源人才数量：</span>
                  <span style="color: #00C0FF; font-weight: 700; font-size: 15px;">${total}</span> 万人
                </div>
                <div style="margin-top: 8px; padding: 4px 10px; background: rgba(0, 242, 255, 0.2); border-radius: 6px; color: #00F2FF; font-size: 12px; font-weight: 600;">
                  ${level}
                </div>
              </div>
            `;
          }
          return '';
        }
      },
      visualMap: {
        show: false,
        min: 0,
        max: 500,
        inRange: {
          color: ['#00A0FF', '#0063D0', '#004190'],
          symbolSize: [10, 60]
        }
      },
      geo: {
        map: 'china',
        roam: true,
        scaleLimit: {
          min: 0.8,
          max: 4
        },
        zoom: 2.1,
        center: [105, 38],
        label: {
          show: true,
          fontSize: 10,
          color: '#CEF4FD',
          emphasis: {
            color: '#00F2FF',
            fontSize: 11,
            fontWeight: 'bold'
          }
        },
        itemStyle: {
          areaColor: 'rgba(0, 30, 80, 0.6)',
          borderColor: 'rgba(0, 160, 255, 0.5)',
          borderWidth: 1.5,
          shadowBlur: 10,
          shadowColor: 'rgba(0, 160, 255, 0.3)'
        },
        emphasis: {
          itemStyle: {
            areaColor: 'rgba(0, 50, 120, 0.8)',
            borderColor: '#00C0FF',
            borderWidth: 2,
            shadowBlur: 15,
            shadowColor: 'rgba(0, 192, 255, 0.6)'
          }
        }
      },
      series: [
        {
          name: '开源人才密度',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: talentMapData.value,
          symbol: 'circle',
          symbolSize: (val: any) => {
            const density = val[2];
            return Math.sqrt(density) * 1.5 + 8;
          },
          itemStyle: {
            color: (params: any) => {
              const density = params.value[2];
              if (density >= 500) return '#FF4900';
              if (density >= 100) return '#FFAB00';
              if (density >= 10) return '#00C0FF';
              return '#00A0FF';
            },
            shadowBlur: 25,
            shadowColor: 'rgba(0, 242, 255, 0.6)',
            opacity: 0.85
          },
          label: {
            show: false
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 35,
              shadowColor: 'rgba(0, 242, 255, 1)',
              scale: 1.3,
              opacity: 1
            },
            label: {
              show: true,
              formatter: '{b}',
              fontSize: 13,
              fontWeight: 'bold',
              backgroundColor: 'rgba(0, 192, 255, 0.95)',
              color: '#fff',
              borderColor: '#00F2FF',
              borderWidth: 2,
              padding: [5, 10],
              borderRadius: 6
            }
          },
          animationType: 'scale',
          animationEasing: 'elasticOut',
          animationDelay: (idx: number) => idx * 50
        }
      ]
    });
  }
};

// 统一初始化图表
const initCharts = () => {
  // 空数据判断
  isEmpty.value = {
    infrastructure: chartData.value.infrastructure.length === 0,
    community: chartData.value.universityClubs.length === 0,
    communityHealth: chartData.value.communityHealth.github.every(item => item === 0),
    languageTech: chartData.value.languageTech.mainstream.length === 0 && chartData.value.languageTech.emerging.length === 0
  };

  // 初始化各图表
  if (!isEmpty.value.infrastructure) nextTick(() => initInfrastructureChart());
  if (!isEmpty.value.community) nextTick(() => initCommunityChart());
  if (!isEmpty.value.communityHealth) nextTick(() => initCommunityHealthChart());
  if (!isEmpty.value.languageTech) nextTick(() => initLanguageTechChart());
  nextTick(() => initVitalityChart());
  nextTick(() => initHeatmapChart());
  nextTick(() => initTalentMapChart());
};

// 页面resize时重绘图表
watch(widthType, () => {
  initCharts();
  // 重新启动滚动（防止resize后滚动失效）
  autoScroll(1);
  autoScroll(2);
});

// 挂载时初始化
onMounted(() => {
  setTimeout(() => {
    initCharts();
    // 启动列表自动滚动
    autoScroll(1);
    autoScroll(2);
  }, 100);
});
</script>

<style lang="scss" scoped>
.index-module__NV_5cW__container {
  background: linear-gradient(to bottom right, #faf5ff, #60a5fa);
  min-height: 100vh;
  padding: 2rem 1rem;
  position: relative;
  overflow-x: hidden;
  animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.index-module__NV_5cW__header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 2rem 1rem 1rem;
  position: relative;
}

.index-module__NV_5cW__floatingElements {
  pointer-events: none;
  opacity: 0.3;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.index-module__NV_5cW__floatingElement {
  background: linear-gradient(135deg, #3b82f60d, #9333ea0d);
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: 30s linear infinite index-module__NV_5cW__float;
  position: absolute;
}

.index-module__NV_5cW__floatingElement:first-child {
  animation-delay: 0s;
  top: 10%;
  left: 10%;
}

.index-module__NV_5cW__floatingElement:nth-child(2) {
  animation-delay: -7s;
  top: 60%;
  right: 10%;
}

.index-module__NV_5cW__floatingElement:nth-child(3) {
  animation-delay: -14s;
  bottom: 20%;
  left: 50%;
}

@keyframes index-module__NV_5cW__float {
  0% {
    transform: translateY(0) rotate(0);
  }

  33% {
    transform: translateY(-20px) rotate(120deg);
  }

  66% {
    transform: translateY(10px) rotate(240deg);
  }

  to {
    transform: translateY(0) rotate(360deg);
  }
}

.index-module__NV_5cW__titleSection {
  color: #333;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  display: flex;
  position: relative;
}

.index-module__NV_5cW__titleContainer {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  display: flex;
}

.index-module__NV_5cW__title {
  background: #333;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.02em;
  white-space: nowrap;
  -webkit-background-clip: text;
  background-clip: text;
  margin: 0;
  font-size: 2.8rem;
  font-weight: 700;
}

.index-module__NV_5cW__titleBadge {
  color: #fff;
  letter-spacing: 0.05em;
  white-space: nowrap;
  background: #60a5fa;
  border-radius: 1.5rem;
  padding: 0.4rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  box-shadow: 0 2px 10px #3b82f64d;
}

.index-module__NV_5cW__subtitle {
  color: #666;
  text-align: center;
  align-items: center;
  gap: 0.5rem;
  max-width: 500px;
  font-size: 1.1rem;
  font-weight: 400;
  display: flex;
}

.index-module__NV_5cW__statsBar {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #ffffff1a;
  border: 1px solid #fff3;
  border-radius: 1.5rem;
  align-items: center;
  gap: 1.5rem;
  width: fit-content;
  max-width: 90%;
  margin-top: 0.75rem;
  padding: 0.75rem 1.5rem;
  display: flex;
}

.index-module__NV_5cW__stat {
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  display: flex;
}

.index-module__NV_5cW__statNumber {
  color: #60a5fa;
  font-size: 1.5rem;
  font-weight: 700;
}

.index-module__NV_5cW__statLabel {
  color: #333;
  font-size: 0.875rem;
  font-weight: 500;
}

.index-module__NV_5cW__statDivider {
  background: #fff3;
  width: 1px;
  height: 2rem;
}

.index-module__NV_5cW__content {
  max-width: 1400px;
  /* 加宽容器，适配更多图表 */
  margin: 0 auto;
  padding: 0 1rem;
}

/* 图表区域样式（适配示例的num-empty） */
.index-module__NV_5cW__chartsSection {
  margin-bottom: 3rem;
}

.index-module__NV_5cW__chartsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  /* 调整列宽，适配列表 */
  gap: 1.5rem;
  padding: 0;
}

.index-module__NV_5cW__chartCard {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #ffffffe6;
  border: 1px solid #ffffff4d;
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 16px #00000014;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.index-module__NV_5cW__chartCard::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.05), transparent);
  transition: left 0.6s;
}

.index-module__NV_5cW__chartCard:hover::before {
  left: 100%;
}

/* 列表卡片特殊样式 */
.index-module__NV_5cW__chartCard.list-card {
  padding: 1.5rem;
}

.index-module__NV_5cW__chartCard:hover {
  border-color: #3b82f64d;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px #0000001f;
}

.index-module__NV_5cW__chartCard:hover .chartCard__title {
  color: #3b82f6;
  transform: scale(1.02);
  transition: all 0.3s;
}

.chartCard__wide {
  grid-column: 1 / -1;
  /* 跨列显示 */
}

.chartCard__header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  gap: 0.75rem;
}

.title-with-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.chartCard__title {
  color: #333;
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  text-align: center;
  width: 100%;
}

.enterprise-stats {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  animation: fadeInDown 0.5s ease-out;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.stat-badge {
  padding: 0.25rem 0.75rem;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid rgba(59, 130, 246, 0.2);
  border-radius: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #3b82f6;
  white-space: nowrap;
}

.language-tab {
  display: flex;
  gap: 0.5rem;
  background: linear-gradient(135deg, #f0f4ff, #faf5ff);
  border-radius: 1rem;
  padding: 0.3rem;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.1);
  transition: all 0.3s;
}

.language-tab:hover {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.2);
}

.language-tab span {
  padding: 0.45rem 1.2rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #666;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.language-tab span::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.language-tab span:hover::before {
  width: 100%;
  height: 100%;
}

.language-tab span.active {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #fff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}

.language-tab span.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
  border-radius: 0.75rem;
}

/* 企业筛选器样式 */
.enterprise-filter {
  display: flex;
  gap: 0.4rem;
  background: linear-gradient(135deg, #f0f4ff, #faf5ff);
  border-radius: 1rem;
  padding: 0.25rem;
  cursor: pointer;
  user-select: none;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.1);
  transition: all 0.3s;
}

.enterprise-filter:hover {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.15);
  border-color: rgba(59, 130, 246, 0.2);
}

.filter-tag {
  padding: 0.35rem 0.9rem;
  border-radius: 0.75rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: #666;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.filter-tag::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.filter-tag:hover::before {
  width: 100%;
  height: 100%;
}

.filter-tag.active {
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  color: #fff;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
  transform: translateY(-1px);
}

.filter-tag.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);
  border-radius: 0.75rem;
}

.chartCard__container {
  width: 100%;
  height: 300px;
  position: relative;
  overflow: hidden;
}

/* 为语言图表添加特殊背景 */
.chartCard__wide .chartCard__container {
  background: linear-gradient(135deg,
      rgba(59, 130, 246, 0.02) 0%,
      rgba(139, 92, 246, 0.02) 50%,
      rgba(236, 72, 153, 0.02) 100%);
  border-radius: 0.5rem;
}

/* 列表容器样式：隐藏原生滚动条（可选，视觉更美观） */
.chartCard__container.list-container {
  height: auto;
  max-height: 300px;
  /* 限制列表高度，超出滚动 */
  overflow-y: auto;
  padding: 0 0.5rem;
  /* 隐藏滚动条 */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
  position: relative;
}

/* 隐藏webkit内核浏览器的滚动条 */
.chartCard__container.list-container::-webkit-scrollbar {
  display: none;
}

/* 滚动指示器 */
.scroll-indicator {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  background: rgba(59, 130, 246, 0.1);
  border-radius: 0 0 0 0.5rem;
  font-size: 0.7rem;
  color: #3b82f6;
  z-index: 10;
  animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(3px);
  }
}

.scroll-indicator svg {
  width: 12px;
  height: 12px;
}

/* 项目列表样式 */
.project-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.project-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.8rem;
  background: #f8f9fa;
  border-radius: 0.5rem;
  border-left: 3px solid #2951E0;
  transition: all 0.2s;
}

/* 鼠标悬停项目项时的样式（可选） */
.project-item:hover {
  background: #f0f4ff;
  transform: translateX(2px);
}

.project-rank {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #2951E0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.project-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.project-name {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.project-desc {
  font-size: 12px;
  color: #666;
  font-style: italic;
}

.project-org {
  font-size: 12px;
  color: #888;
  flex-shrink: 0;
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 企业列表特殊样式 */
.enterprise-list {
  gap: 0.6rem;
}

.enterprise-item {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
  border-left: 3px solid #3b82f6;
  padding: 0.75rem 1rem;
  gap: 0.75rem;
  align-items: center;
  position: relative;
  overflow: hidden;
  animation: slideInRight 0.3s ease-out backwards;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.enterprise-item:nth-child(1) {
  animation-delay: 0.05s;
}

.enterprise-item:nth-child(2) {
  animation-delay: 0.1s;
}

.enterprise-item:nth-child(3) {
  animation-delay: 0.15s;
}

.enterprise-item:nth-child(4) {
  animation-delay: 0.2s;
}

.enterprise-item:nth-child(5) {
  animation-delay: 0.25s;
}

.enterprise-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(59, 130, 246, 0.1), transparent);
  transition: left 0.5s;
}

.enterprise-item:hover::before {
  left: 100%;
}

.enterprise-item:hover {
  background: linear-gradient(135deg, #f0f4ff 0%, #eff6ff 100%);
  border-left-color: #2563eb;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
  transform: translateX(3px);
}

.enterprise-rank {
  width: 32px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: 'DIN Alternate', 'Arial', sans-serif;
}

.enterprise-rank.gold {
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  color: #2c3e50;
  box-shadow: 0 2px 8px rgba(255, 215, 0, 0.4);
}

.enterprise-rank.silver {
  background: linear-gradient(135deg, #E8E8E8 0%, #C0C0C0 100%);
  color: #2c3e50;
  box-shadow: 0 2px 6px rgba(192, 192, 192, 0.4);
}

.enterprise-rank.bronze {
  background: linear-gradient(135deg, #CD7F32 0%, #B8733C 100%);
  color: #fff;
  box-shadow: 0 2px 6px rgba(205, 127, 50, 0.4);
}

.enterprise-rank.normal {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: #fff;
}

.enterprise-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.enterprise-name {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.enterprise-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 11px;
  color: #64748b;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 2px;
}

.meta-devs {
  color: #8b5cf6;
  font-weight: 600;
}

.score-bar-container {
  width: 80px;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  overflow: hidden;
  flex-shrink: 0;
}

.score-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease-out;
}

.score-bar.bar-blue {
  background: linear-gradient(90deg, #2563eb 0%, #3b82f6 100%);
  box-shadow: 0 0 4px rgba(37, 99, 235, 0.5);
}

.score-bar.bar-light-blue {
  background: linear-gradient(90deg, #60a5fa 0%, #93c5fd 100%);
  box-shadow: 0 0 4px rgba(96, 165, 250, 0.4);
}

.score-bar.bar-green {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
  box-shadow: 0 0 4px rgba(16, 185, 129, 0.4);
}

.score-bar.bar-red {
  background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
  box-shadow: 0 0 4px rgba(239, 68, 68, 0.4);
}

.enterprise-score {
  font-family: 'DIN Alternate', 'Arial', sans-serif;
  font-size: 15px;
  font-weight: 700;
  width: 40px;
  text-align: right;
  flex-shrink: 0;
}

.enterprise-score.score-blue {
  color: #2563eb;
  text-shadow: 0 0 8px rgba(37, 99, 235, 0.3);
}

.enterprise-score.score-light-blue {
  color: #60a5fa;
  text-shadow: 0 0 6px rgba(96, 165, 250, 0.3);
}

.enterprise-score.score-green {
  color: #10b981;
  text-shadow: 0 0 6px rgba(16, 185, 129, 0.2);
}

.enterprise-score.score-red {
  color: #ef4444;
  text-shadow: 0 0 6px rgba(239, 68, 68, 0.3);
}

/* 明星开发者特殊样式 */
.developer-list-container {
  max-height: 320px;
}

.developer-item {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
  border-left: 3px solid #3b82f6;
  padding: 0.75rem 1rem;
  gap: 0.75rem;
}

.developer-item:hover {
  background: linear-gradient(135deg, #eff6ff 0%, #f0f4ff 100%);
  border-left-color: #8b5cf6;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.15);
}

.dev-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-text {
  font-size: 16px;
  font-weight: bold;
  color: #fff;
}

.dev-rank {
  width: auto;
  height: auto;
  border-radius: 12px;
  background: linear-gradient(135deg, #ec4899 0%, #f59e0b 100%);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(236, 72, 153, 0.3);
}

.dev-info {
  flex: 1;
  gap: 0.3rem;
}

.dev-name {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
}

.dev-location {
  font-size: 11px;
  color: #64748b;
  font-style: normal;
}

.dev-followers {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.2);
  color: #3b82f6;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  max-width: none;
}

.dev-followers svg {
  flex-shrink: 0;
}

/* 与示例一致的空数据样式 */
.num-empty {
  height: 10px;
  border-top: 2px solid #2951E0;
  width: 100%;
  background: linear-gradient(180deg, rgba(41, 81, 224, 0.12) 0%, rgba(41, 81, 224, 0.04) 100%);
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

.chart {
  width: 100%;
  height: 100%;
}

.index-module__NV_5cW__sectionHeader {
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  display: flex;
  position: relative;
}

.index-module__NV_5cW__sectionTitle {
  color: #333;
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  display: flex;
}

.index-module__NV_5cW__vitalitySection {
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #ffffffe6;
  border: 1px solid #ffffff4d;
  border-radius: 1.5rem;
  margin-bottom: 2rem;
  padding: 2rem;
  box-shadow: 0 8px 24px #00000014;
  transition: all 0.3s;
}

.index-module__NV_5cW__vitalitySection:hover {
  border-color: #3b82f64d;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px #0000001f;
}

.vitality__title {
  color: #333;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0 0 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  position: relative;
}

.vitality__title::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #10b981, #f59e0b);
  border-radius: 2px;
}

.vitality__title svg {
  color: #10b981;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

.vitality__container {
  width: 100%;
  height: 400px;
  position: relative;
  background: linear-gradient(135deg,
      rgba(16, 185, 129, 0.02) 0%,
      rgba(245, 158, 11, 0.02) 100%);
  border-radius: 0.75rem;
  padding: 1rem;
}

/* 地图区域样式（科技蓝风格） */
.map-section {
  background: linear-gradient(135deg,
      rgba(0, 30, 80, 0.08) 0%,
      rgba(0, 63, 208, 0.08) 100%);
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(0, 192, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 192, 255, 0.1);
}

.map-section::before {
  content: '';
  position: absolute;
  top: -30%;
  left: -30%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(0, 192, 255, 0.1) 0%, transparent 70%);
  animation: rotate 30s linear infinite;
  pointer-events: none;
}

.map-container {
  display: flex;
  gap: 2rem;
  align-items: stretch;
  position: relative;
  min-height: 600px;
}

.map-container .chart {
  flex: 1;
  min-height: 600px;
  background: linear-gradient(135deg,
      rgba(0, 20, 60, 0.4) 0%,
      rgba(0, 40, 100, 0.3) 100%);
  border-radius: 1rem;
  border: 2px solid rgba(0, 192, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 192, 255, 0.2);
  padding: 1rem;
}

.map-rank-panel {
  width: 300px;
  background: linear-gradient(135deg,
      rgba(15, 23, 42, 0.9) 0%,
      rgba(0, 30, 80, 0.9) 100%);
  border-radius: 1rem;
  border: 2px solid rgba(0, 192, 255, 0.3);
  padding: 1.5rem;
  box-shadow: 0 8px 32px rgba(0, 192, 255, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.panel-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #00F2FF;
  text-align: center;
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 2px solid rgba(0, 242, 255, 0.3);
}

.rank-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-height: 400px;
  overflow-y: auto;
  padding-right: 5px;
}

.rank-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: rgba(0, 192, 255, 0.08);
  border-radius: 0.75rem;
  border: 1px solid rgba(0, 192, 255, 0.2);
  border-left: 3px solid #00A0FF;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  margin-bottom: 0.75rem;
}

.rank-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 242, 255, 0.15), transparent);
  transition: left 0.5s;
}

.rank-item:hover::before {
  left: 100%;
}

.rank-item:hover {
  background: rgba(0, 192, 255, 0.2);
  border-color: #00F2FF;
  border-left-color: #00F2FF;
  box-shadow: 0 6px 16px rgba(0, 242, 255, 0.3);
  transform: translateX(5px) scale(1.02);
}

.rank-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  font-family: 'DIN Alternate', 'Arial', sans-serif;
}

.rank-num.rank-1 {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: #1a1a1a;
  box-shadow: 0 4px 12px rgba(255, 215, 0, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.rank-num.rank-2 {
  background: linear-gradient(135deg, #E8E8E8, #C0C0C0);
  color: #1a1a1a;
  box-shadow: 0 4px 12px rgba(192, 192, 192, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.rank-num.rank-3 {
  background: linear-gradient(135deg, #CD7F32, #B8733C);
  color: white;
  box-shadow: 0 4px 12px rgba(205, 127, 50, 0.6);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.rank-num.rank-4,
.rank-num.rank-5 {
  background: rgba(0, 192, 255, 0.2);
  color: #00C0FF;
  font-weight: bold;
  border: 2px solid rgba(0, 192, 255, 0.4);
}

.rank-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: #e2e8f0;
}

.rank-score {
  font-size: 14px;
  font-weight: 700;
  color: #00F2FF;
  font-family: 'DIN Alternate', 'Arial', sans-serif;
  text-shadow: 0 0 8px rgba(0, 242, 255, 0.5);
}

/* 热力图特殊样式 */
.heatmap-section {
  background: linear-gradient(135deg,
      rgba(59, 130, 246, 0.03) 0%,
      rgba(139, 92, 246, 0.03) 50%,
      rgba(236, 72, 153, 0.03) 100%);
  position: relative;
  overflow: hidden;
}

.heatmap-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.1) 0%, transparent 70%);
  animation: rotate 20s linear infinite;
  pointer-events: none;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.heatmap-header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.label-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
  border: 2px solid rgba(59, 130, 246, 0.3);
  border-radius: 1.5rem;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  font-size: 0.85rem;
  font-weight: 600;
  color: #3b82f6;
}

.label-toggle:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2));
  border-color: rgba(59, 130, 246, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.label-toggle:active {
  transform: translateY(0);
}

.label-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform 0.3s;
}

.label-toggle:hover svg {
  transform: rotate(90deg);
}

.heatmap-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.9) 0%,
      rgba(255, 255, 255, 0.7) 100%);
  border-radius: 1rem;
  border: 2px solid rgba(59, 130, 246, 0.2);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
}

.stat-value {
  font-size: 1.3rem;
  font-weight: 700;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label {
  font-size: 0.8rem;
  color: #666;
  font-weight: 500;
}

.stat-divider {
  width: 2px;
  height: 2.5rem;
  background: linear-gradient(to bottom,
      transparent 0%,
      rgba(59, 130, 246, 0.3) 50%,
      transparent 100%);
}

.heatmap-container {
  background: linear-gradient(135deg,
      rgba(59, 130, 246, 0.02) 0%,
      rgba(139, 92, 246, 0.02) 50%,
      rgba(236, 72, 153, 0.02) 100%);
  border: 1px solid rgba(59, 130, 246, 0.1);
  position: relative;
}

.heatmap-legend {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: flex;
  gap: 1.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 1rem;
  border: 2px solid rgba(59, 130, 246, 0.2);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: #666;
  font-weight: 600;
}

.legend-icon {
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 6px rgba(59, 130, 246, 0.3);
}

.bubble-small {
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #FF4900, #FFAB00);
}

.bubble-medium {
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #00B03E, #00C0FF);
}

.bubble-large {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #00C0FF, #00F0FF);
}

.index-module__NV_5cW__actionSection {
  text-align: center;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: #ffffffe6;
  border: 1px solid #ffffff4d;
  border-radius: 1.5rem;
  margin: 0;
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px #00000014;
}

.index-module__NV_5cW__actionBackground {
  z-index: 1;
  background: linear-gradient(135deg, #3b82f60d 0%, #9333ea0d 100%);
  position: absolute;
  inset: 0;
}

.index-module__NV_5cW__actionContent {
  z-index: 2;
  max-width: 600px;
  margin: 0 auto;
  position: relative;
}

.index-module__NV_5cW__actionIcon {
  color: #fff;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0 auto 1.5rem;
  display: flex;
  box-shadow: 0 4px 12px #3b82f633;
}

.index-module__NV_5cW__actionTitle {
  background: linear-gradient(135deg, #1e293b 0%, #3b82f6 100%);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  margin-bottom: 1rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.index-module__NV_5cW__actionDescription {
  color: #64748b;
  margin-bottom: 2rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
}

.index-module__NV_5cW__actionFeatures {
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  margin-bottom: 2rem;
  display: flex;
}

.index-module__NV_5cW__feature {
  color: #3b82f6;
  background: #3b82f614;
  border: 1px solid #3b82f626;
  border-radius: 1.5rem;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
}

.index-module__NV_5cW__createButton {
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  border: none;
  border-radius: 1.5rem;
  align-items: center;
  gap: 0.5rem;
  height: auto;
  margin: 0 auto;
  padding: 0.75rem 2rem;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s;
  display: flex;
  box-shadow: 0 4px 12px #3b82f64d;
}

.index-module__NV_5cW__createButton:hover {
  background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px #3b82f666;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .index-module__NV_5cW__titleContainer {
    text-align: center;
    flex-direction: column;
    gap: 0.5rem;
  }

  .index-module__NV_5cW__title {
    font-size: 2.5rem;
  }

  .index-module__NV_5cW__titleBadge {
    padding: 0.4rem 1.2rem;
    font-size: 1rem;
  }

  .index-module__NV_5cW__container {
    padding: 1rem;
  }

  .index-module__NV_5cW__header {
    margin-bottom: 2rem;
    padding: 1.5rem 1rem;
  }

  .index-module__NV_5cW__statsBar {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.8rem;
    width: 100%;
    max-width: 100%;
    padding: 0.8rem 1.2rem;
  }

  .index-module__NV_5cW__stat {
    text-align: center;
    flex: 1;
    min-width: 60px;
  }

  .index-module__NV_5cW__statNumber {
    font-size: 1.1rem;
  }

  .index-module__NV_5cW__statLabel {
    white-space: nowrap;
    font-size: 0.7rem;
  }

  .index-module__NV_5cW__statDivider {
    width: 1px;
    height: 1.2rem;
  }

  .index-module__NV_5cW__sectionTitle {
    text-align: left;
    flex: 1;
    justify-content: flex-start;
    gap: 0.5rem;
    font-size: 1.3rem;
  }

  .index-module__NV_5cW__actionSection {
    border-radius: 1rem;
    margin: 0;
    padding: 2rem 1.5rem;
  }

  .index-module__NV_5cW__actionTitle {
    font-size: 1.6rem;
  }

  .index-module__NV_5cW__actionFeatures {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .index-module__NV_5cW__createButton {
    padding: 0.65rem 1.5rem;
    font-size: 0.95rem;
  }

  .chartCard__container {
    height: 250px;
  }

  .vitality__container {
    height: 300px;
  }

  .heatmap-stats {
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.8rem 1rem;
  }

  .stat-item {
    flex: 1;
    min-width: 80px;
  }

  .stat-value {
    font-size: 1.1rem;
  }

  .stat-label {
    font-size: 0.7rem;
  }

  .stat-divider {
    height: 2rem;
  }

  .title-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .label-toggle {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
  }

  .heatmap-legend {
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    top: 0.5rem;
    left: 0.5rem;
  }

  .legend-item {
    font-size: 0.7rem;
  }

  .bubble-small {
    width: 10px;
    height: 10px;
  }

  .bubble-medium {
    width: 14px;
    height: 14px;
  }

  .bubble-large {
    width: 18px;
    height: 18px;
  }

  /* 地图移动端适配 */
  .map-container {
    flex-direction: column;
    gap: 1rem;
  }

  .map-container .chart {
    min-height: 350px;
  }

  .map-rank-panel {
    width: 100%;
  }

  .rank-item {
    padding: 0.6rem 0.8rem;
    gap: 0.5rem;
  }

  .rank-num {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }

  .rank-name {
    font-size: 13px;
  }

  .rank-score {
    font-size: 13px;
  }

  /* 移动端列表样式调整 */
  .project-item {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .project-org {
    width: 100%;
    max-width: 100%;
    margin-top: 0.2rem;
  }

  /* 企业列表移动端调整 */
  .enterprise-item {
    padding: 0.6rem 0.8rem;
    gap: 0.5rem;
  }

  .enterprise-rank {
    width: 28px;
    height: 22px;
    font-size: 12px;
  }

  .enterprise-name {
    font-size: 13px;
  }

  .enterprise-meta {
    font-size: 10px;
  }

  .score-bar-container {
    width: 60px;
  }

  .enterprise-score {
    font-size: 13px;
    width: 35px;
  }
}

@media (max-width: 480px) {
  .index-module__NV_5cW__title {
    font-size: 1.8rem;
  }

  .index-module__NV_5cW__actionSection {
    padding: 1.5rem 1rem;
  }

  .index-module__NV_5cW__statsBar {
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
  }

  .index-module__NV_5cW__statNumber {
    font-size: 1rem;
  }

  .index-module__NV_5cW__statLabel {
    font-size: 0.65rem;
  }

  .index-module__NV_5cW__sectionTitle {
    gap: 0.4rem;
    font-size: 1.2rem;
  }

  .chartCard__container {
    height: 200px;
  }

  .vitality__container {
    height: 250px;
  }

  .heatmap-stats {
    gap: 0.6rem;
    padding: 0.6rem 0.8rem;
  }

  .stat-value {
    font-size: 1rem;
  }

  .stat-label {
    font-size: 0.65rem;
  }

  .heatmap-legend {
    gap: 0.5rem;
    padding: 0.5rem 0.7rem;
  }

  .legend-item {
    font-size: 0.65rem;
    gap: 0.3rem;
  }

  .vitality__title {
    font-size: 1.2rem;
  }

  .index-module__NV_5cW__chartsGrid {
    grid-template-columns: 1fr;
  }

  /* 地图小屏适配 */
  .map-container .chart {
    min-height: 300px;
    padding: 0.5rem;
  }

  .map-rank-panel {
    padding: 1rem;
  }

  .panel-title {
    font-size: 1rem;
    padding-bottom: 0.75rem;
  }

  .rank-item {
    padding: 0.5rem 0.6rem;
  }

  .rank-num {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }

  .rank-name {
    font-size: 12px;
  }

  .rank-score {
    fo

    /* 小屏列表高度调整 */
    .chartCard__container.list-container {
      max-height: 300px;
    }

    /* 企业列表小屏调整 */
    .enterprise-item {
      padding: 0.5rem 0.6rem;
    }

    .enterprise-rank {
      width: 26px;
      height: 20px;
      font-size: 11px;
    }

    .enterprise-name {
      font-size: 12px;
    }

    .score-bar-container {
      width: 50px;
      height: 5px;
    }

    .enterprise-score {
      font-size: 12px;
      width: 32px;
    }
  }
}
</style>