态势感知平台-开源生态与贡献价值全景-明星开发者聚焦组件抽离

src/views/Jyh/ecosystem/index.vue

@@ -136,33 +136,7 @@
           </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>
+          <StarDevelopersChart />
         </div>
       </div>
 
@@ -248,6 +222,7 @@ import UniversityClubStatsChart from './components/UniversityClubStatsChart.vue'
 import CommunityGovernanceHealthChart from './components/CommunityGovernanceHealthChart.vue'
 import VitalityWaveChart from './components/VitalityWaveChart.vue'
 import StatsGlass from './components/StatsGlass.vue'
+import StarDevelopersChart from './components/StarDevelopersChart.vue'
 import { usePageResize } from '@/utils/hooks/usePageResize';
 
 // 页面尺寸响应式
@@ -365,29 +340,7 @@ const excellentProjects = computed(() => {
   }));
 });
 
-// 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({
@@ -586,24 +539,6 @@ onUnmounted(() => {
   });
 });
 
-// 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';