态势感知平台-开源生态与贡献价值全景-明星开发者聚焦接口对接

src/views/Jyh/ecosystem/components/StarDevelopersChart.vue

@@ -4,7 +4,8 @@
     <!-- 新增：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="num-empty" v-if="loading">加载中...</div>
+      <div class="project-list developer-list" v-else>
         <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" />
@@ -30,9 +31,37 @@
 
 <script lang="ts" setup>
 import { ref, onMounted, onUnmounted } from 'vue';
+import { excellentDeveloperPage2 } from '@/api/jyh/situation';
 
-// 明星开发者数据（基于GitHub中国区Top开发者）
-const excellentProjects2025 = ref([
+// 定义数据结构
+interface DeveloperItem {
+  name: string;
+  description: string;
+  followers: number;
+  avatar: string;
+  org: string;
+}
+
+// 明星开发者数据
+const excellentProjects2025 = ref<DeveloperItem[]>([]);
+const loading = ref(true);
+
+// 从API获取数据
+const fetchDataFromApi = async () => {
+  try {
+    loading.value = true;
+    const response = await excellentDeveloperPage2();
+    
+    if (response.code === 0 && response.data) {
+      // 适配后端数据格式，将description映射为desc
+      excellentProjects2025.value = response.data.map((item: any) => ({
+        ...item,
+        desc: item.description
+      }));
+    } else {
+      console.error('获取明星开发者数据失败:', response.msg || '未知错误');
+      // 设置默认数据
+      excellentProjects2025.value = [
         { 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' },
@@ -51,7 +80,35 @@ const excellentProjects2025 = ref([
         { 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' },
-]);
+      ];
+    }
+  } catch (error) {
+    console.error('获取明星开发者数据异常:', error);
+    // 设置默认数据
+    excellentProjects2025.value = [
+      { 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' },
+    ];
+  } finally {
+    loading.value = false;
+  }
+};
 
 // 滚动相关变量
 const scrollContainer2 = ref<HTMLDivElement | null>(null);
@@ -138,9 +195,13 @@ const handleImageError = (e: Event) => {
   }
 };
 
+// 组件挂载时获取数据
 onMounted(() => {
-  // 启动自动滚动
+  fetchDataFromApi();
+  // 数据加载完成后启动自动滚动
+  setTimeout(() => {
     autoScroll(2);
+  }, 100);
 });
 </script>
 
@@ -225,6 +286,17 @@ onMounted(() => {
   display: none;
 }
 
+/* 空数据显示样式 */
+.num-empty {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  color: #999;
+}
+
 .developer-list-container {
   max-height: 400px;
   margin-top: 20px;