From c9da77844b0188c10b2344ed98ad7a7992e9b539 Mon Sep 17 00:00:00 2001
From: fmk1023 <fmk1023@noreply.gitcode.com>
Date: Wed, 21 Jan 2026 16:40:23 +0800
Subject: [PATCH] =?UTF-8?q?=E6=80=81=E5=8A=BF=E6=84=9F=E7=9F=A5=E5=B9=B3?=
 =?UTF-8?q?=E5=8F=B0-=E6=AD=A6=E6=B1=89=E5=B8=82=E5=BC=80=E6=BA=90?=
 =?UTF-8?q?=E5=BB=BA=E8=AE=BE=E7=94=9F=E6=80=81=E9=A1=B5=E9=9D=A2=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E9=B8=BF=E8=92=99=E7=94=9F=E6=80=81=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E5=8F=AF=E8=A7=86=E5=8C=96=E6=A8=A1=E5=9D=97=E5=B1=95=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Community/components/HarmonyEcoCharts.vue | 1288 +++++++++++++++++
 .../Community/{ => components}/StatsBar.vue   |    5 +
 src/views/Jyh/Community/index.vue             |  531 ++-----
 3 files changed, 1381 insertions(+), 443 deletions(-)
 create mode 100644 src/views/Jyh/Community/components/HarmonyEcoCharts.vue
 rename src/views/Jyh/Community/{ => components}/StatsBar.vue (94%)

diff --git a/src/views/Jyh/Community/components/HarmonyEcoCharts.vue b/src/views/Jyh/Community/components/HarmonyEcoCharts.vue
new file mode 100644
index 0000000..b9a06e9
--- /dev/null
+++ b/src/views/Jyh/Community/components/HarmonyEcoCharts.vue
@@ -0,0 +1,1288 @@
+<template>
+  <div class="index-module__NV_5cW__chartsSection" style="margin-bottom: 20px">
+    <div class="index-module__NV_5cW__sectionHeader">
+      <h2 class="index-module__NV_5cW__sectionTitle">
+        <span class="hm-tag-icon">HarmonyOS</span> 鸿蒙生态数据可视化
+      </h2>
+    </div>
+    <div class="index-module__NV_5cW__chartsGrid">
+
+      <div class="index-module__NV_5cW__chartCard list-card">
+        <div class="flex justify-center pb-2">
+          <div class="language-tab">
+            <span :class="{ active: activeTab === 0 }" @click="switchTab(0)">鸿蒙项目城市分布</span>
+            <span :class="{ active: activeTab === 1 }" @click="switchTab(1)">鸿蒙优秀开源项目</span>
+          </div>
+        </div>
+
+        <div class="chartCard__container">
+          <div v-show="activeTab === 0" id="hmCityChart" style="height: 300px; width: 100%;"></div>
+
+          <div v-show="activeTab === 1"
+               class="chartCard__container list-container"
+               ref="scrollContainerHmProject"
+               @mouseenter="pauseScroll('hmProject')"
+               @mouseleave="resumeScroll('hmProject')">
+            <div class="project-list">
+              <div class="project-item" v-for="(item, index) in [...hmProjects, ...hmProjects]" :key="index">
+                <div class="project-rank-wrapper">
+                  <span class="project-rank">{{ (index % hmProjects.length) + 1 }}</span>
+                </div>
+                <div class="project-info">
+                  <span class="project-name">{{ item.name }}</span>
+                  <span class="project-desc">{{ item.desc }}</span>
+                </div>
+                <div class="project-meta">
+                  <span class="project-stars">★ {{ item.stars }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="source-footer">
+          <span class="source-label">数据来源：</span>
+          <div class="source-content">
+            <svg class="source-icon" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
+              <path fill-rule="evenodd" clip-rule="evenodd"
+                    d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.128 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
+                    fill="#333" />
+            </svg>
+            <span class="source-name">Gitee / GitHub</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="index-module__NV_5cW__chartCard list-card">
+        <div class="flex justify-center pb-2">
+          <div class="language-tab">
+            <span :class="{ active: activeDevTab === 0 }" @click="switchDevTab(0)">鸿蒙开发者城市分布</span>
+            <span :class="{ active: activeDevTab === 1 }" @click="switchDevTab(1)">鸿蒙明星开发者贡献榜</span>
+          </div>
+        </div>
+
+        <div class="chartCard__container">
+          <div v-show="activeDevTab === 0" id="hmDevCityChart" style="height: 300px; width: 100%;"></div>
+
+          <div v-show="activeDevTab === 1"
+               class="chartCard__container list-container"
+               ref="scrollContainerHmDev"
+               @mouseenter="pauseScroll('hmDev')"
+               @mouseleave="resumeScroll('hmDev')">
+            <div class="developer-list">
+              <div class="developer-item" v-for="(item, index) in [...hmDevelopers, ...hmDevelopers]" :key="index">
+                <div class="dev-avatar" :style="{ background: getAvatarBg(index) }">
+                  {{ item.name.charAt(0).toUpperCase() }}
+                </div>
+
+                <div class="dev-info">
+                  <div class="dev-name-row">
+                    <span class="dev-name">{{ item.name }}</span>
+                    <span class="dev-employer-tag">{{ item.employer }}</span>
+                  </div>
+                  <div class="dev-stats">
+                    <span class="stat-add">++{{ item.added }}</span>
+                    <span class="stat-sep">/</span>
+                    <span class="stat-del">--{{ item.deleted }}</span>
+                  </div>
+                </div>
+
+                <div class="dev-medal">
+                  <div class="score-container">
+                    <span class="score-label">总修改</span>
+                    <span class="score-val" :class="{ 'top-three': (index % hmDevelopers.length) < 3 }">
+                      {{ item.score }}
+                    </span>
+                  </div>
+                  <svg v-if="(index % hmDevelopers.length) < 3" class="medal-icon" viewBox="0 0 24 24">
+                    <path fill="#f59e0b"
+                          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" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="source-footer">
+          <span class="source-label">数据来源：</span>
+          <div class="source-content">
+            <img src="@/assets/imgs/logo/logo-kfyzjjh.png" class="source-logo-circle" />
+            <span class="source-name">开放原子开源基金会</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="index-module__NV_5cW__chartCard">
+        <div class="flex justify-center pb-2">
+          <div class="language-tab">
+            <span :class="{ active: activeEntTab === 0 }" @click="switchEntTab(0)">开源企业城市分布</span>
+            <span :class="{ active: activeEntTab === 1 }" @click="switchEntTab(1)">开源企业贡献榜</span>
+          </div>
+        </div>
+
+        <div class="chartCard__container">
+          <div v-show="activeEntTab === 0" id="hmEntCityChart" style="height: 300px; width: 100%;"></div>
+
+          <div v-show="activeEntTab === 1"
+               class="chartCard__container list-container"
+               ref="scrollContainerHmEnt"
+               @mouseenter="pauseScroll('hmEnt')"
+               @mouseleave="resumeScroll('hmEnt')">
+            <div class="project-list">
+              <div class="project-item" v-for="(item, index) in [...hmEnterprises, ...hmEnterprises]" :key="index">
+                <div class="project-rank-wrapper">
+            <span class="project-rank" :style="(index % hmEnterprises.length) < 3 ? 'background:#f59e0b' : ''">
+              {{ (index % hmEnterprises.length) + 1 }}
+            </span>
+                </div>
+                <div class="project-info">
+                  <div style="display:flex; align-items:center; gap:8px">
+                    <span class="project-name">{{ item.name }}</span>
+                    <span class="ent-city-badge">{{ item.city }}</span>
+                  </div>
+                  <span class="project-desc">{{ item.business }}</span>
+                </div>
+                <div class="project-meta">
+                  <span class="ent-remark-badge">{{ item.remark }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="source-footer">
+          <span class="source-label">数据来源：</span>
+          <div class="source-content">
+            <img src="@/assets/imgs/logo/logo-kfyzjjh.png" class="source-logo-circle" />
+            <span class="source-name">开放原子开源基金会</span>
+          </div>
+        </div>
+      </div>
+
+
+      <div class="index-module__NV_5cW__chartCard chartCard__wide">
+        <div class="flex justify-center pb-2">
+          <div class="language-tab">
+            <span :class="{ active: activeUniTab === 0 }" @click="switchUniTab(0)">高校鸿蒙贡献分布</span>
+            <span :class="{ active: activeUniTab === 1 }" @click="switchUniTab(1)">高校鸿蒙贡献榜</span>
+          </div>
+        </div>
+
+        <div class="chartCard__container">
+          <div v-show="activeUniTab === 0" id="uniCityChart" style="height: 300px; width: 100%;"></div>
+
+          <div v-show="activeUniTab === 1"
+               class="chartCard__container list-container"
+               ref="scrollContainerUni"
+               @mouseenter="pauseScroll('uni')"
+               @mouseleave="resumeScroll('uni')">
+            <div class="project-list">
+              <div class="project-item" v-for="(item, index) in [...uniContributors, ...uniContributors]" :key="index">
+                <div class="project-rank-wrapper">
+        <span class="project-rank" :style="(index % uniContributors.length) < 3 ? 'background:#10B981; box-shadow: 0 0 8px rgba(16,185,129,0.4)' : 'background:#334155'">
+          {{ (index % uniContributors.length) + 1 }}
+        </span>
+                </div>
+
+                <div class="project-info">
+                  <div class="info-top-row">
+                    <span class="author-name">{{ item.authorName }}</span>
+                    <span class="university-tag">{{ item.university }}</span>
+                  </div>
+                  <div class="info-bottom-row">
+                    <span class="repo-name">@{{ item.repo }}</span>
+                    <span class="commit-message" :title="item.detailMessage">{{ item.detailMessage }}</span>
+                  </div>
+                </div>
+
+                <div class="project-meta">
+                  <div class="change-stats">
+                    <span style="color: #10B981">新增：+{{ item.additions }}</span>
+                    <span style="color: #F43F5E; margin-left: 8px">减少：-{{ item.deletions }}</span>
+                    <span style="color: #0194ff; margin-left: 8px">修改：{{ item.changeNum }}</span>
+                  </div>
+                  <div class="author-email">{{ item.authorEmail }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="source-footer">
+          <span class="source-label">数据来源：</span>
+          <div class="source-content">
+            <img src="@/assets/imgs/logo/logo-kfyzjjh.png" class="source-logo-circle" />
+            <span class="source-name">开放原子开源基金会</span>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick, onUnmounted } from 'vue';
+import * as echarts from 'echarts';
+
+// ================= 数据定义 =================
+const hmCityData = [
+  { name: '广东', value: 185 },
+  { name: '北京', value: 95 },
+  { name: '上海', value: 88 },
+  { name: '江苏', value: 70 },
+  { name: '浙江', value: 52 },
+  { name: '湖北', value: 38 },
+  { name: '四川', value: 32 },
+  { name: '福建', value: 30 },
+  { name: '陕西', value: 28 },
+  { name: '山东', value: 24 }
+];
+
+const hmDevCityData = [
+  { name: '北京', value: 17.00 },
+  { name: '广东', value: 12.00 },
+  { name: '河北', value: 8.30 },
+  { name: '上海', value: 7.20 },
+  { name: '浙江', value: 5.60 },
+  { name: '山东', value: 5.10 },
+  { name: '江苏', value: 4.60 },
+  { name: '湖南', value: 4.30 },
+  { name: '福建', value: 3.50 },
+  { name: '河南', value: 3.40 }
+];
+
+const hmEnterpriseCityData = [
+  { name: '广东', value: 133 },
+  { name: '北京', value: 72 },
+  { name: '上海', value: 65 },
+  { name: '江苏', value: 55 },
+  { name: '浙江', value: 42 },
+  { name: '湖北', value: 30 },
+  { name: '四川', value: 28 },
+  { name: '福建', value: 25 },
+  { name: '陕西', value: 22 },
+  { name: '山东', value: 20 }
+  // { name: '湖南', value: 18 },
+  // { name: '重庆', value: 16 },
+  // { name: '天津', value: 14 },
+  // { name: '河南', value: 13 },
+  // { name: '安徽', value: 12 },
+  // { name: '辽宁', value: 8 }
+];
+
+const hmProjects = [
+  { name: 'OpenHarmony', desc: '开源鸿蒙操作系统核心项目', stars: '50k+' },
+  { name: 'HarmonyOS Developer Tools', desc: '鸿蒙开发工具集', stars: '15k+' },
+  { name: 'HarmonyOS Application Framework', desc: '鸿蒙应用框架', stars: '12k+' },
+  { name: 'HarmonyOS Distributed Hardware', desc: '分布式硬件管理', stars: '10k+' },
+  { name: 'HarmonyOS Security Framework', desc: '鸿蒙安全框架', stars: '9k+' },
+  { name: 'HarmonyOS AI Framework', desc: '鸿蒙AI框架', stars: '8.5k+' },
+  { name: 'HarmonyOS Graphics Framework', desc: '鸿蒙图形框架', stars: '8k+' },
+  { name: 'HarmonyOS Multimedia Framework', desc: '鸿蒙多媒体框架', stars: '7.5k+' },
+  { name: 'HarmonyOS Kernel LiteOS-M', desc: '轻量级内核', stars: '7k+' },
+  { name: 'HarmonyOS Kernel Linux', desc: 'Linux内核适配', stars: '6.5k+' }
+];
+
+const hmDevelopers = [
+  { name: 'ar*******o', employer: '华为', added: '1,348,180', deleted: '11,022', score: '1,359,202' },
+  { name: 'gu****o', employer: '华为', added: '892,199', deleted: '466,304', score: '1,358,503' },
+  { name: 'wa***i', employer: '深开鸿', added: '1,074,812', deleted: '216,511', score: '1,291,323' },
+  { name: 'ze****1', employer: '华为', added: '718,467', deleted: '452,733', score: '1,171,200' },
+  { name: 'wa*****2', employer: '华为', added: '831,282', deleted: '249,505', score: '1,080,787' },
+  { name: 'wu****g', employer: '华为', added: '648,545', deleted: '336,836', score: '985,381' },
+  { name: 'zh*****7', employer: '华为', added: '680,056', deleted: '151,257', score: '831,313' },
+  { name: 'zh******5', employer: '开鸿智谷', added: '812,520', deleted: '9,929', score: '822,449' },
+  { name: 'zh******7', employer: '华为', added: '492,068', deleted: '270,411', score: '762,479' },
+  { name: 'ta*****n', employer: '润开鸿', added: '531,640', deleted: '136,900', score: '668,540' },
+  { name: 'an*****i', employer: '华为', added: '429,272', deleted: '226,777', score: '656,049' },
+  { name: 'do***i', employer: '深开鸿', added: '502,956', deleted: '139,366', score: '642,322' },
+  { name: 'zh****7', employer: '华为', added: '479,092', deleted: '159,437', score: '638,529' },
+  { name: 'ne****g', employer: '华为', added: '67,272', deleted: '569,087', score: '636,359' },
+  { name: 'ta******1', employer: '华为', added: '630,294', deleted: '1,861', score: '632,155' },
+  { name: 'wa*****1', employer: '华为', added: '620,905', deleted: '11,220', score: '632,125' },
+  { name: 'xi****3', employer: '华为', added: '498,998', deleted: '119,428', score: '618,426' },
+  { name: 'ba****g', employer: '深开鸿', added: '498,481', deleted: '46,544', score: '545,025' },
+  { name: 'zh******1', employer: '华为', added: '378,416', deleted: '144,456', score: '522,872' },
+  { name: 'ch****0', employer: '华为', added: '498,437', deleted: '17,953', score: '516,390' }
+];
+
+const hmEnterprises = [
+  { name: '华为技术有限公司', city: '深圳', business: '鸿蒙系统核心开发与生态建设', remark: '鸿蒙发起者' },
+  { name: '润和软件', city: '南京', business: '鸿蒙生态解决方案提供商', remark: '核心合作伙伴' },
+  { name: '中软国际', city: '北京', business: '鸿蒙应用开发服务', remark: '重要参与者' },
+  { name: '软通动力', city: '北京', business: '鸿蒙IT服务与解决方案', remark: '合作伙伴' },
+  { name: '诚迈科技', city: '南京', business: '鸿蒙系统开发与适配', remark: '开发合作伙伴' },
+  { name: '博泰车联网', city: '上海', business: '鸿蒙智能汽车解决方案', remark: '智能驾驶舱' },
+  { name: '科蓝软件', city: '北京', business: '鸿蒙金融科技解决方案', remark: '金融合作伙伴' },
+  { name: '常山北明', city: '石家庄', business: '鸿蒙数字化解决方案', remark: '合作伙伴' },
+  { name: '九联科技', city: '广州', business: '鸿蒙智能终端设备', remark: '智能硬件提供商' },
+  { name: '创维集团', city: '深圳', business: '鸿蒙智能家电产品', remark: '家电制造商' }
+];
+
+// 全国高校分布数据
+const uniCityData = [
+  { name: '北邮', value: 52 },
+  { name: '浙大', value: 16 },
+  { name: '华科', value: 12 },
+  { name: '北理工', value: 10 },
+  { name: '中科大', value: 10 },
+  { name: '上交大', value: 4 },
+  { name: '北大', value: 3 },
+  { name: '西安建大', value: 2 },
+  { name: '南大', value: 2 },
+  { name: '哈工大', value: 2 },
+  { name: '东南大学', value: 2 },
+  { name: '暨大', value: 1 },
+  { name: '武理工', value: 1 },
+  { name: '中山大学', value: 1 },
+  { name: '北航', value: 1 },
+  { name: '华南理工', value: 1 },
+  { name: '人大', value: 1 },
+  { name: '深大', value: 1 },
+  { name: '西电', value: 1 },
+  { name: '南理工', value: 1 },
+  { name: '云大', value: 1 },
+  { name: '广工', value: 1 },
+  { name: '复旦', value: 1 },
+  { name: '中南大学', value: 1 },
+  { name: '清华', value: 1 },
+  { name: '东北大学', value: 1 }
+];
+
+// 高校贡献者榜单
+const uniContributors = [
+  {
+    authorName: "d00887893",
+    project: "arkcompiler_ets_frontend",
+    branch: "master",
+    repo: "communication_nfc",
+    authorEmail: "re****g@whut.edu.cn",
+    detailMessage: "Add SDK test cases  Issue: I9CRGH  Signed-off-by: d00887893 <realdong@whut.edu.cn>",
+    additions: 664,
+    deletions: 97,
+    changeNum: 761,
+    rollbackCount: 0,
+    university: "武汉理工大学",
+    contributionScore: 845.3 // 计算结果
+  },
+  {
+    authorName: "Jiefeng Li",
+    project: "openharmony",
+    branch: "master",
+    repo: "docs",
+    authorEmail: "ji****i@hust.edu.cn",
+    detailMessage: "fix typo",
+    additions: 116,
+    deletions: 116,
+    changeNum: 232,
+    rollbackCount: 0,
+    university: "华中科技大学",
+    contributionScore: 197.2
+  },
+  {
+    authorName: "”景涛“",
+    project: "openharmony",
+    branch: "master",
+    repo: "kernel_liteos_a",
+    authorEmail: "ji****3@hust.edu.cn",
+    detailMessage: "fix some typo errors",
+    additions: 17,
+    deletions: 17,
+    changeNum: 34,
+    rollbackCount: 0,
+    university: "华中科技大学",
+    contributionScore: 28.9
+  },
+  {
+    authorName: "Zian",
+    project: "openharmony",
+    branch: "master",
+    repo: "drivers_peripheral",
+    authorEmail: "u2****5@hust.edu.cn",
+    detailMessage: "fix NULL pointer problem caused by function HdfRemoteServiceWriteInterfaceToken()",
+    additions: 10,
+    deletions: 9,
+    changeNum: 19,
+    rollbackCount: 0,
+    university: "华中科技大学",
+    contributionScore: 16.5
+  },
+  {
+    authorName: "fly1ngpengu1ns",
+    project: "openharmony",
+    branch: "master",
+    repo: "drivers_hdf_core",
+    authorEmail: "pe****n@hust.edu.cn",
+    detailMessage: "fix: fix the fault handler when ctrl_hdlr is NULL",
+    additions: 6,
+    deletions: 5,
+    changeNum: 11,
+    rollbackCount: 0,
+    university: "华中科技大学",
+    contributionScore: 9.7
+  },
+  {
+    authorName: "phd",
+    project: "openharmony",
+    branch: "master",
+    repo: "drivers_hdf_core",
+    authorEmail: "m2****8@hust.edu.cn",
+    detailMessage: "fix:An exception when queue is NULL",
+    additions: 5,
+    deletions: 5,
+    changeNum: 10,
+    rollbackCount: 0,
+    university: "华中科技大学",
+    contributionScore: 8.5
+  },
+  {
+    authorName: "辛哲麒",
+    project: "openharmony",
+    branch: "master",
+    repo: "communication_nfc",
+    authorEmail: "xi****i@hust.edu.cn",
+    detailMessage: "fix:context maybe nullptr",
+    additions: 3,
+    deletions: 3,
+    changeNum: 6,
+    rollbackCount: 0,
+    university: "华中科技大学",
+    contributionScore: 5.1
+  },
+  {
+    authorName: "Ruibo Lu",
+    project: "openharmony",
+    branch: "master",
+    repo: "update_packaging_tools",
+    authorEmail: "re****u@hust.edu.cn",
+    detailMessage: "[fix]: fix indent in blocks_manager.py",
+    additions: 1,
+    deletions: 1,
+    changeNum: 2,
+    rollbackCount: 0,
+    university: "华中科技大学",
+    contributionScore: 1.7
+  },
+  {
+    authorName: "Zian",
+    project: "openharmony",
+    branch: "master",
+    repo: "drivers_peripheral",
+    authorEmail: "u2****5@hust.edu.cn",
+    detailMessage: "fix:NULL pointer reference caused by variable hwAdapter",
+    additions: 1,
+    deletions: 1,
+    changeNum: 2,
+    rollbackCount: 0,
+    university: "华中科技大学",
+    contributionScore: 1.7
+  },
+  {
+    authorName: "xy420",
+    project: "openharmony",
+    branch: "master",
+    repo: "communication_dsoftbus",
+    authorEmail: "ch*****g@hust.edu.cn",
+    detailMessage: "update tests/sdk/transmission/fuzztest/rawstreamdata_fuzzer/rawstreamdata_fuzzer.cpp",
+    additions: 1,
+    deletions: 1,
+    changeNum: 2,
+    rollbackCount: 0,
+    university: "华中科技大学",
+    contributionScore: 1.7
+  },
+  {
+    authorName: "辛哲麒",
+    project: "openharmony",
+    branch: "master",
+    repo: "distributeddatamgr_datamgr_service",
+    authorEmail: "xi****i@hust.edu.cn",
+    detailMessage: "update services/distributeddataservice/service/directory/src/directory_manager.cpp",
+    additions: 1,
+    deletions: 1,
+    changeNum: 2,
+    rollbackCount: 0,
+    university: "华中科技大学",
+    contributionScore: 1.7
+  }
+];
+
+// ================= 逻辑处理 =================
+const activeTab = ref(0);
+const activeDevTab = ref(0);
+const activeEntTab = ref(0);
+
+let enterpriseChart: echarts.ECharts | null = null;
+let cityChart: echarts.ECharts | null = null;
+let devCityChart: echarts.ECharts | null = null;
+let entCityChart: echarts.ECharts | null = null;
+
+// 控制变量
+const activeUniTab = ref(0); // 对应第四个卡片的Tab
+const scrollContainerUni = ref<HTMLDivElement | null>(null); // 滚动引用
+let uniCityChart: echarts.ECharts | null = null; // 图表实例
+
+const getAvatarBg = (index: number) => {
+  const colors = ['#6366f1', '#8b5cf6', '#ec4899', '#f43f5e', '#f59e0b', '#10b981', '#06b6d4', '#3b82f6'];
+  return colors[index % colors.length];
+};
+
+const scrollContainerHmProject = ref<HTMLDivElement | null>(null);
+const scrollContainerHmDev = ref<HTMLDivElement | null>(null);
+const scrollTimers: { [key: string]: NodeJS.Timeout | null } = { hmProject: null, hmDev: null };
+const scrollContainerHmEnt = ref<HTMLDivElement | null>(null);
+
+const autoScroll = (key: string) => {
+  let container;
+  if (key === 'hmProject') container = scrollContainerHmProject.value;
+  else if (key === 'hmDev') container = scrollContainerHmDev.value;
+  else if (key === 'hmEnt') container = scrollContainerHmEnt.value;
+  else if (key === 'uni') container = scrollContainerUni.value;
+  if (!container) return;
+  const list = container.firstElementChild as HTMLElement;
+  if (!list || list.scrollHeight <= container.clientHeight) return;
+
+  if (scrollTimers[key]) clearInterval(scrollTimers[key]!);
+  scrollTimers[key] = setInterval(() => {
+    container.scrollTop += 1;
+    if (container.scrollTop >= (list.scrollHeight / 2)) container.scrollTop = 0;
+  }, 40);
+};
+
+const pauseScroll = (key: string) => {
+  if (scrollTimers[key]) clearInterval(scrollTimers[key]!);
+};
+const resumeScroll = (key: string) => autoScroll(key);
+
+const initHmCityChart = () => {
+  const chartDom = document.getElementById('hmCityChart');
+  if (!chartDom) return;
+  if (cityChart) cityChart.dispose();
+  cityChart = echarts.init(chartDom);
+  cityChart.setOption({
+    tooltip: { trigger: 'axis' },
+    grid: { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true },
+    xAxis: { type: 'category', data: hmCityData.map(i => i.name), axisLabel: { color: '#64748b' } },
+    yAxis: { type: 'value', name: '单位：个', axisLabel: { color: '#64748b' } },
+    series: [{
+      type: 'bar', barWidth: '40%', data: hmCityData.map(i => i.value),
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#3b82f6' }, {
+          offset: 1,
+          color: '#8b5cf6'
+        }]), borderRadius: [4, 4, 0, 0]
+      }
+    }]
+  });
+};
+
+const initHmEntCityChart = () => {
+  const chartDom = document.getElementById('hmEntCityChart');
+  if (!chartDom) return;
+  if (entCityChart) entCityChart.dispose();
+  entCityChart = echarts.init(chartDom);
+  entCityChart.setOption({
+    tooltip: { trigger: 'axis' },
+    grid: { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true },
+    xAxis: { type: 'category', data: hmEnterpriseCityData.map(i => i.name), axisLabel: { color: '#64748b' } },
+    yAxis: { type: 'value', name: '单位：个', axisLabel: { color: '#64748b' } },
+    series: [{
+      type: 'bar', barWidth: '40%', data: hmEnterpriseCityData.map(i => i.value),
+      itemStyle: {
+        // 使用橙色/黄色渐变，区别于项目的蓝色
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#f59e0b' },
+          { offset: 1, color: '#fbbf24' }
+        ]),
+        borderRadius: [4, 4, 0, 0]
+      }
+    }]
+  });
+};
+
+const initHmDevCityChart = () => {
+  const chartDom = document.getElementById('hmDevCityChart');
+  if (!chartDom) return;
+  if (devCityChart) devCityChart.dispose();
+  devCityChart = echarts.init(chartDom);
+
+  const colorPalette = [
+    '#3b82f6', '#6366f1', '#8b5cf6', '#a855f7', '#d946ef',
+    '#ec4899', '#f43f5e', '#f59e0b', '#10b981', '#06b6d4'
+  ];
+
+  const option = {
+    tooltip: {
+      trigger: 'item',
+      backgroundColor: 'rgba(255, 255, 255, 0.95)',
+      formatter: '{b}: <b>{c}%</b>',
+      textStyle: { fontSize: 14 }
+    },
+    legend: {
+      bottom: '0%',
+      // left: 'center',
+      itemWidth: 14,
+      itemHeight: 14,
+      textStyle: { color: '#64748b', fontSize: 12 },
+      data: hmDevCityData.map(i => i.name)
+    },
+    series: [
+      {
+        name: '开发者分布',
+        type: 'pie',
+        radius: ['40%', '65%'],
+        center: ['50%', '40%'],
+        avoidLabelOverlap: true,
+        itemStyle: {
+          borderRadius: 10,
+          borderColor: '#fff',
+          borderWidth: 2
+        },
+        label: {
+          show: true,
+          position: 'outside',
+          // 关键修改：调大字号并加粗
+          formatter: '{b}\n{d}%',
+          color: '#334155',
+          fontSize: 12,
+          fontWeight: 'bold'
+        },
+        labelLine: {
+          show: true,
+          length: 12,
+          length2: 20,
+          lineStyle: { width: 1.5, color: '#94a3b8' }
+        },
+        emphasis: {
+          label: {
+            show: true,
+            fontSize: 16,
+            fontWeight: 'bold'
+          }
+        },
+        data: hmDevCityData.map((item, index) => ({
+          ...item,
+          itemStyle: {
+            color: colorPalette[index % colorPalette.length]
+          }
+        }))
+      }
+    ]
+  };
+  devCityChart.setOption(option);
+};
+
+const initHmEnterpriseChart = () => {
+  const chartDom = document.getElementById('hmEnterpriseChart');
+  if (!chartDom) return;
+  if (enterpriseChart) enterpriseChart.dispose();
+  enterpriseChart = echarts.init(chartDom);
+  enterpriseChart.setOption({
+    grid: { left: '3%', right: '12%', bottom: '3%', top: '5%', containLabel: true },
+    xAxis: { type: 'value', show: false },
+    yAxis: { type: 'category', data: hmEnterprises.map(i => i.name).reverse(), axisLabel: { color: '#64748b' } },
+    series: [{
+      type: 'bar', data: hmEnterprises.map(i => i.value).reverse(), barWidth: 16,
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{ offset: 0, color: '#3b82f6' }, {
+          offset: 1,
+          color: '#60a5fa'
+        }]), borderRadius: [0, 8, 8, 0]
+      },
+      label: { show: true, position: 'right', formatter: '{c}', color: '#1e293b', fontWeight: 'bold' }
+    }]
+  });
+};
+
+// 初始化高校城市分布图
+const initUniCityChart = () => {
+  const el = document.getElementById('uniCityChart');
+  if (!el) return;
+  if (uniCityChart) uniCityChart.dispose();
+  uniCityChart = echarts.init(el);
+  uniCityChart.setOption({
+    tooltip: { trigger: 'axis' },
+    grid: { left: '3%', right: '4%', bottom: '3%', top: '10%', containLabel: true },
+    xAxis: {
+      type: 'category', data: uniCityData.map(i => i.name), axisLabel: {
+        color: '#64748b',
+        interval: 0
+      }
+    },
+    yAxis: { type: 'value', name: '单位：所', axisLabel: { color: '#64748b' } },
+    series: [{
+      type: 'bar', barWidth: '40%', data: uniCityData.map(i => i.value),
+      itemStyle: {
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+          { offset: 0, color: '#10b981' }, // 绿色系，区别于其他卡片
+          { offset: 1, color: '#34d399' }
+        ]),
+        borderRadius: [4, 4, 0, 0]
+      }
+    }]
+  });
+};
+
+// 第四个卡片的切换逻辑
+const switchUniTab = (idx: number) => {
+  activeUniTab.value = idx;
+  nextTick(() => {
+    if (idx === 0) {
+      initUniCityChart();
+    } else {
+      pauseScroll('uni');
+      resumeScroll('uni');
+    }
+  });
+};
+
+const switchTab = (idx: number) => {
+  activeTab.value = idx;
+  nextTick(() => idx === 0 ? initHmCityChart() : (pauseScroll('hmProject'), resumeScroll('hmProject')));
+};
+
+const switchDevTab = (idx: number) => {
+  activeDevTab.value = idx;
+  nextTick(() => idx === 0 ? initHmDevCityChart() : (pauseScroll('hmDev'), resumeScroll('hmDev')));
+};
+
+const switchEntTab = (idx: number) => {
+  activeEntTab.value = idx;
+  nextTick(() => {
+    if (idx === 0) initHmEntCityChart();
+    else {
+      pauseScroll('hmEnt');
+      resumeScroll('hmEnt');
+    }
+  });
+};
+
+const handleResize = () => {
+  enterpriseChart?.resize();
+  cityChart?.resize();
+  devCityChart?.resize();
+  entCityChart?.resize();
+};
+
+onMounted(() => {
+  nextTick(() => {
+    initHmCityChart();
+    initHmEnterpriseChart();
+    initHmEntCityChart();
+    initHmDevCityChart();
+    autoScroll('hmProject');
+    autoScroll('hmDev');
+    autoScroll('hmEnt');
+    initUniCityChart(); // 初始化高校分布图
+    autoScroll('uni');   // 启动高校列表滚动
+    window.addEventListener('resize', handleResize);
+  });
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', handleResize);
+  Object.values(scrollTimers).forEach(t => t && clearInterval(t));
+  enterpriseChart?.dispose();
+  cityChart?.dispose();
+  devCityChart?.dispose();
+});
+</script>
+
+<style scoped lang="scss">
+.index-module__NV_5cW__chartsSection {
+  margin-top: 30px;
+}
+
+.index-module__NV_5cW__sectionHeader {
+  display: flex;
+  justify-content: flex-start;
+  margin-bottom: 1.5rem;
+  max-width: 1400px;
+  margin: 0 auto 1.5rem auto;
+  padding: 0 0.5rem;
+}
+
+.index-module__NV_5cW__sectionTitle {
+  display: flex;
+  align-items: center;
+  gap: 0.8rem;
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: #fff;
+}
+
+.index-module__NV_5cW__chartsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
+  gap: 1.5rem;
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.index-module__NV_5cW__chartCard {
+  background: rgba(255, 255, 255, 0.95);
+  border: 1px solid rgba(0, 125, 255, 0.1);
+  border-radius: 16px;
+  padding: 1.25rem;
+  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
+  display: flex;
+  flex-direction: column;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+
+.index-module__NV_5cW__chartCard:hover {
+  transform: translateY(-5px);
+  border-color: rgba(0, 125, 255, 0.4);
+  box-shadow: 0 10px 30px rgba(0, 125, 255, 0.1);
+}
+
+.chartCard__title {
+  font-size: 1.05rem;
+  font-weight: 700;
+  color: #1e293b;
+  margin-bottom: 1rem;
+  text-align: center;
+}
+
+.chartCard__container {
+  width: 100%;
+  height: 300px;
+  position: relative;
+  overflow: hidden;
+}
+
+.list-container {
+  height: 300px;
+  overflow-y: hidden;
+  padding: 0 4px;
+}
+
+.chart {
+  width: 100%;
+  height: 100%;
+}
+
+.hm-tag-icon {
+  background: linear-gradient(90deg, #007dff, #4da1ff);
+  color: white;
+  padding: 2px 10px;
+  border-radius: 4px;
+  font-size: 14px;
+  margin-right: 8px;
+  font-weight: bold;
+}
+
+.project-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  padding-bottom: 1rem;
+}
+
+.project-item {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  background: #f8fafc;
+  border-radius: 8px;
+  border: 1px solid #e2e8f0;
+  transition: all 0.2s;
+}
+
+.project-rank {
+  width: 20px;
+  height: 20px;
+  border-radius: 6px;
+  background: #cbd5e1;
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.project-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+}
+
+.project-name {
+  font-size: 13px;
+  font-weight: 700;
+  color: #333;
+}
+
+.project-desc {
+  font-size: 11px;
+  color: #64748b;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.project-stars {
+  font-size: 11px;
+  font-weight: 600;
+  color: #f59e0b;
+  background: #fffbeb;
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+
+.developer-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 4px 2px 20px 2px;
+}
+
+.developer-item {
+  display: flex;
+  align-items: center;
+  padding: 10px 12px;
+  background: #ffffff;
+  border: 1px solid #f1f5f9;
+  border-radius: 12px;
+  transition: all 0.2s ease;
+}
+
+.dev-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  font-size: 16px;
+  margin-right: 12px;
+}
+
+.dev-info {
+  flex: 1;
+}
+
+.dev-name {
+  font-size: 14px;
+  font-weight: 700;
+  color: #1e293b;
+}
+
+.dev-tag {
+  font-size: 11px;
+  color: #64748b;
+}
+
+.dev-score {
+  font-size: 11px;
+  color: #10b981;
+  background: #f0fdf4;
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+.source-footer {
+  margin-top: auto;
+  padding-top: 0.75rem;
+  border-top: 1px solid #f1f5f9;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  font-size: 11px;
+}
+
+.source-label {
+  color: #94a3b8;
+  margin-right: 4px;
+}
+
+.source-content {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.source-icon {
+  width: 14px;
+  height: 14px;
+  opacity: 0.8;
+}
+
+.source-logo-circle {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+}
+
+.source-name {
+  color: #475569;
+  font-weight: 500;
+}
+
+.language-tab {
+  display: flex;
+  gap: 0.5rem;
+  background: linear-gradient(135deg, #f0f4ff, #faf5ff);
+  border-radius: 1rem;
+  padding: 0.3rem;
+  cursor: pointer;
+  user-select: none;
+  border: 1px solid rgba(59, 130, 246, 0.1);
+}
+
+.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;
+}
+
+.language-tab span.active {
+  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
+  color: #fff;
+  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
+}
+
+@media (max-width: 1024px) {
+  .index-module__NV_5cW__chartsGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+#hmCityChart, #hmDevCityChart {
+  margin-top: 10px;
+}
+
+.flex {
+  display: flex;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.pb-2 {
+  padding-bottom: 0.5rem;
+}
+
+.developer-item {
+  display: flex;
+  align-items: center;
+  padding: 12px 16px;
+  background: #ffffff;
+  border: 1px solid #f1f5f9;
+  border-radius: 12px;
+  margin-bottom: 8px;
+  transition: all 0.2s;
+
+  &:hover {
+    border-color: #3b82f6;
+    background: #f8faff;
+  }
+}
+
+.dev-name-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 2px;
+}
+
+.dev-employer-tag {
+  font-size: 10px;
+  background: #eff6ff;
+  color: #3b82f6;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.dev-stats {
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+  font-family: 'Consolas', monospace; // 使用等宽字体
+
+  .stat-add {
+    color: #10b981;
+  }
+
+  // 绿色代表新增
+  .stat-del {
+    color: #ef4444;
+  }
+
+  // 红色代表删除
+  .stat-sep {
+    color: #cbd5e1;
+    margin: 0 4px;
+  }
+}
+
+.dev-medal {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-align: right;
+}
+
+.score-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.score-label {
+  font-size: 9px;
+  color: #94a3b8;
+  text-transform: uppercase;
+}
+
+.score-val {
+  font-size: 13px;
+  font-weight: 700;
+  color: #475569;
+
+  &.top-three {
+    color: #f59e0b; // 前三名高亮
+  }
+}
+
+.medal-icon {
+  width: 18px;
+  height: 18px;
+}
+
+/* 仅在 style 末尾追加，用于处理企业特有的城市和备注小标签 */
+.ent-city-badge {
+  font-size: 10px;
+  background: #f1f5f9;
+  color: #64748b;
+  padding: 0 4px;
+  border-radius: 3px;
+  font-weight: normal;
+}
+
+.ent-remark-badge {
+  font-size: 10px;
+  color: #10b981;
+  background: #f0fdf4;
+  padding: 2px 8px;
+  border-radius: 10px;
+  border: 1px solid rgba(16, 185, 129, 0.1);
+  white-space: nowrap;
+}
+
+.chartCard__wide {
+  grid-column: 1 / -1;
+}
+
+
+/*高校鸿蒙贡献榜*/
+.list-container {
+  overflow: hidden;
+  height: 100%;
+
+  .project-item {
+    display: flex;
+    align-items: center;
+    padding: 14px 16px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+    transition: background 0.2s ease;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.05);
+    }
+
+    .project-rank-wrapper {
+      margin-right: 14px;
+      .project-rank {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 22px;
+        height: 22px;
+        border-radius: 4px;
+        color: #FFFFFF;
+        font-size: 12px;
+        font-weight: bold;
+      }
+    }
+
+    .project-info {
+      flex: 1;
+      min-width: 0;
+
+      .info-top-row {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 4px;
+
+        .author-name {
+          font-size: 15px;
+          font-weight: 600;
+          color: #000; // 姓名最亮
+        }
+
+        .university-tag {
+          font-size: 11px;
+          color: #10B981;
+          background: rgba(16, 185, 129, 0.15);
+          border: 1px solid rgba(16, 185, 129, 0.4);
+          padding: 0 6px;
+          border-radius: 10px;
+        }
+      }
+
+      .info-bottom-row {
+        display: flex;
+        gap: 8px;
+        font-size: 14px;
+        line-height: 1.4;
+
+        .repo-name {
+          color: #002aff; // 仓库名浅蓝色
+          font-family: monospace;
+          flex-shrink: 0;
+        }
+
+        .commit-message {
+          color: #94A3B8; // 提交信息中等亮度
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
+    .project-meta {
+      text-align: right;
+      margin-left: 12px;
+      flex-shrink: 0;
+
+      .change-stats {
+        font-size: 14px;
+        //font-weight: bold;
+        margin-bottom: 2px;
+      }
+
+      .author-email {
+        font-size: 14px;
+        color: #64748B; // 邮箱最暗
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/Jyh/Community/StatsBar.vue b/src/views/Jyh/Community/components/StatsBar.vue
similarity index 94%
rename from src/views/Jyh/Community/StatsBar.vue
rename to src/views/Jyh/Community/components/StatsBar.vue
index 1760fe1..e053869 100644
--- a/src/views/Jyh/Community/StatsBar.vue
+++ b/src/views/Jyh/Community/components/StatsBar.vue
@@ -1,5 +1,10 @@
 <template>
   <div class="stats-glass-bar">
+    <div class="stat-node">
+      <span class="stat-value">1000W+</span>
+      <span class="stat-desc">鸿蒙开发者</span>
+    </div>
+    <div class="stat-separator"></div>
     <div class="stat-node">
       <span class="stat-value">150+</span>
       <span class="stat-desc">开源企业</span>
diff --git a/src/views/Jyh/Community/index.vue b/src/views/Jyh/Community/index.vue
index 116b73a..e9ab071 100644
--- a/src/views/Jyh/Community/index.vue
+++ b/src/views/Jyh/Community/index.vue
@@ -19,6 +19,9 @@
     </div>
 
     <div class="index-module__NV_5cW__content">
+
+      <HarmonyEcoCharts />
+
       <div class="index-module__NV_5cW__chartsSection">
         <div class="index-module__NV_5cW__sectionHeader">
           <h2 class="index-module__NV_5cW__sectionTitle">
@@ -143,17 +146,13 @@
                  @mouseleave="resumeDeveloperScroll">
               <div class="developer-list">
                 <div class="developer-item" v-for="(name, index) in developerNames" :key="index">
-                  <!--                  <div class="dev-rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>-->
-
                   <div class="dev-avatar" :style="{ background: getAvatarBg(index) }">
                     {{ name.charAt(0) }}
                   </div>
-
                   <div class="dev-info">
                     <div class="dev-name">{{ name }}</div>
                     <div class="dev-tag">核心贡献者</div>
                   </div>
-
                   <div class="dev-medal">
                     <svg v-if="index < 3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
                          fill="#f59e0b" stroke="none">
@@ -184,7 +183,6 @@
 
             <div class="chartCard__container">
               <div v-if="activeCommunityTab === 0" id="communityRankChart" class="chart"></div>
-
               <div v-else class="list-container"
                    ref="communityScrollRef"
                    @mouseenter="pauseCommunityScroll"
@@ -209,7 +207,6 @@
                 </div>
               </div>
             </div>
-
             <div class="source-footer">
               <span class="source-label">数据来源：</span>
               <div class="source-content">
@@ -282,105 +279,6 @@
         </div>
       </div>
 
-      <div class="index-module__NV_5cW__chartsSection" style="margin-top: 20px">
-        <div class="index-module__NV_5cW__sectionHeader">
-          <h2 class="index-module__NV_5cW__sectionTitle">
-            <span class="hm-tag-icon">HarmonyOS</span> 鸿蒙生态数据可视化
-          </h2>
-        </div>
-        <div class="index-module__NV_5cW__chartsGrid">
-
-          <div class="index-module__NV_5cW__chartCard list-card">
-            <h3 class="chartCard__title">鸿蒙优质开源项目榜</h3>
-            <div class="chartCard__container list-container"
-                 ref="scrollContainer3"
-                 @mouseenter="pauseScroll(3)"
-                 @mouseleave="resumeScroll(3)">
-              <div class="project-list">
-                <div class="project-item" v-for="(item, index) in hmProjects" :key="index">
-                  <div class="project-rank-wrapper">
-                    <span class="project-rank">{{ index + 1 }}</span>
-                  </div>
-                  <div class="project-info">
-                    <span class="project-name">{{ item.name }}</span>
-                    <span class="project-desc">{{ item.desc }}</span>
-                  </div>
-                  <div class="project-meta">
-                    <span class="project-stars">★ {{ item.stars }}</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="source-footer">
-              <span class="source-label">数据来源：</span>
-              <div class="source-content">
-                <svg class="source-icon" viewBox="0 0 98 96" xmlns="http://www.w3.org/2000/svg">
-                  <path fill-rule="evenodd" clip-rule="evenodd"
-                        d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.128 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"
-                        fill="#333" />
-                </svg>
-                <span class="source-name">GitHub</span>
-              </div>
-            </div>
-          </div>
-
-          <div class="index-module__NV_5cW__chartCard list-card">
-            <h3 class="chartCard__title">鸿蒙明星开发者贡献榜</h3>
-            <div class="chartCard__container list-container"
-                 ref="scrollContainer4"
-                 @mouseenter="pauseScroll(4)"
-                 @mouseleave="resumeScroll(4)">
-              <div class="developer-list">
-                <div class="developer-item" v-for="(item, index) in hmDevelopers" :key="index">
-                  <!--                  <div class="dev-rank" :class="'rank-' + (index + 1)">{{ index + 1 }}</div>-->
-
-                  <div class="dev-avatar" :style="{ background: getAvatarBg(index) }">
-                    {{ item.name.charAt(0) }}
-                  </div>
-
-                  <div class="dev-info">
-                    <div class="dev-name">{{ item.name }}</div>
-                    <div class="dev-tag">核心贡献者</div>
-                  </div>
-
-                  <div class="dev-medal">
-                    <svg v-if="index < 3" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
-                         fill="#f59e0b" stroke="none">
-                      <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" />
-                    </svg>
-                    <span v-else class="dev-score">活跃</span>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class="source-footer">
-              <span class="source-label">数据来源：</span>
-              <div class="source-content">
-                <img src="@/assets/imgs/logo/penguin_blue.svg" class="source-logo-circle" />
-                <span class="source-name">华科开放原子俱乐部</span>
-              </div>
-            </div>
-          </div>
-
-
-          <div class="index-module__NV_5cW__chartCard">
-            <h3 class="chartCard__title">鸿蒙开源企业贡献榜</h3>
-            <div class="chartCard__container">
-              <div v-if="!hmEnterprises.length" class="num-empty"></div>
-              <div v-else id="hmEnterpriseChart" class="chart" style="height: 300px;"></div>
-            </div>
-            <div class="source-footer">
-              <span class="source-label">数据来源：</span>
-              <div class="source-content">
-                <img src="@/assets/imgs/logo/logo-kfyzjjh.png" class="source-logo-circle" />
-                <span class="source-name">开放原子开源基金会</span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
       <div class="index-module__NV_5cW__actionSection">
         <div class="index-module__NV_5cW__actionBackground"></div>
         <div class="index-module__NV_5cW__actionContent">
@@ -409,11 +307,11 @@
 import { onMounted, ref, nextTick, watch, onUnmounted, computed } from 'vue';
 import * as echarts from 'echarts';
 import { usePageResize } from '@/utils/hooks/usePageResize';
-import StatsBar from './StatsBar.vue';
+import StatsBar from './components/StatsBar.vue';
+import HarmonyEcoCharts from './components/HarmonyEcoCharts.vue';
 
 const { widthType } = usePageResize();
 
-// ================= 数据定义 =================
 const githubProjects = ref([
   {
     name: 'bootstrap',
@@ -481,6 +379,7 @@ const excellentProjects = ref([
   { 'name': 'RustSBI', 'desc': 'RISC-V 安全引导程序', 'org': '华中科技大学' },
   { 'name': 'NextDenovo', 'desc': '长读长序列组装工具', 'org': '武汉希望组' }
 ]);
+
 const chinaExcellentProjects = ref([
   {
     'name': 'Deepin 深度操作系统',
@@ -534,11 +433,14 @@ const chinaExcellentProjects = ref([
   }
 ]);
 
-// 武汉知名社区数据
 const wuhanCommunities = ref([
   { name: '黄鹤开源社区', type: '核心生态', slogan: '国家级、城市级开源社区平台，武汉开源生态的核心枢纽' },
   { name: '深度社区 (Deepin)', type: '操作系统', slogan: '全球最大桌面操作系统社区之一，全球用户超过 750 万' },
-  { name: '极狐社区 (GitLab China)', type: 'DevOps', slogan: '全球第二大开源托管平台 GitLab 在汉设立的中国发行版及开发者社区' },
+  {
+    name: '极狐社区 (GitLab China)',
+    type: 'DevOps',
+    slogan: '全球第二大开源托管平台 GitLab 在汉设立的中国发行版及开发者社区'
+  },
   { name: '开源鸿蒙社区 (OpenHarmony)', type: '万物互联', slogan: '国家级生态创新中心，设有全国首个分委会' },
   { name: 'PostgreSQL 中文社区', type: '数据库', slogan: '全球四大开源数据库之一的运营中心设在武汉' },
   { name: '武汉大学开源社区', type: '学术社团', slogan: '老牌社团，涉及 Linux、嵌入式、深度学习等方向' },
@@ -550,6 +452,50 @@ const wuhanCommunities = ref([
   { name: '湖北大学', type: '兴趣小组', slogan: '开源技术兴趣小组' }
 ]);
 
+// 开发者名单
+const developerNames = ['白纯骢', '陆红旭', '慕冬亮', '张继德', '蒋周奇', '张天雄', '阮文俊', '李奇', '陈鹏轩', '杨帆'];
+
+// 图表数据
+const chartData = ref({
+  cityProject: {
+    xAxis: ['北京', '上海', '深圳', '杭州', '广州', '成都', '武汉', '南京', '西安', '重庆'],
+    data: [757259, 678614, 343417, 315406, 177003, 168300, 120827, 111593, 58678, 56564]
+  },
+  talent: {
+    xAxis: ['北京', '上海', '广州', '深圳', '成都', '杭州', '武汉', '南京', '郑州', '长沙'],
+    data: [2115924, 1591988, 1555240, 1163580, 894108, 830306, 791335, 733581, 553397, 487971]
+  },
+  communityRank: {
+    xAxis: ['Deepin', 'OpenHarmony', 'MindSpore', 'IoTDB', 'GoFrame'],
+    data: [95, 92, 88, 76, 72]
+  },
+  club: {
+    xAxis: ['成都', '北京', '上海', '武汉', '重庆', '深圳', '苏州', '杭州', '合肥', '青岛'],
+    data: [10, 7, 5, 4, 3, 2, 2, 2, 2, 2]
+  },
+  policy: {
+    xAxis: ['江苏', '北京', '浙江', '广东', '上海', '湖北', '天津', '陕西', '河南', '云南'],
+    data: [11, 7, 3, 3, 3, 2, 2, 2, 2, 2]
+  },
+  campus: {
+    xAxis: ['南京', '武汉', '北京', '长沙', '成都', '上海', '天津', '深圳', '济南', '广州'],
+    data: [20, 16, 16, 16, 11, 10, 8, 8, 7, 6]
+  },
+  mirrors: {
+    xAxis: ['上海', '北京', '西安', '重庆', '济南', '南京', '武汉', '合肥', '香港', '长春', '成都', '深圳', '兰州', '哈尔滨', '南阳', '杭州'],
+    data: [4, 4, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
+  }
+});
+
+// ================= 逻辑处理 =================
+
+const isEmpty = ref({
+  cityProject: false, talent: false, developer: false, communityRank: false,
+  club: false, policy: false, campus: false, mirrors: false
+});
+const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({});
+
+// 社区 Tab 切换
 const activeCommunityTab = ref(0);
 const communityScrollRef = ref<HTMLElement | null>(null);
 let communityTimer: NodeJS.Timeout | null = null;
@@ -570,7 +516,6 @@ const startCommunityScroll = () => {
   if (!container) return;
   const list = container.querySelector('.community-scroll-list') as HTMLElement;
   if (!list || list.scrollHeight <= container.clientHeight) return;
-
   if (communityTimer) clearInterval(communityTimer);
   communityTimer = setInterval(() => {
     container.scrollTop += 1;
@@ -582,16 +527,13 @@ const startCommunityScroll = () => {
 const pauseCommunityScroll = () => communityTimer && clearInterval(communityTimer);
 const resumeCommunityScroll = () => activeCommunityTab.value === 1 && startCommunityScroll();
 
+// 项目 Tab 切换
 const currentProjectList = computed(() => {
   return activeTab.value === 0 ? chinaExcellentProjects.value : excellentProjects.value;
 });
 
-const switchTab = (index: number) => {
-  if (activeTab.value === 1) {
-    activeTab.value = 0;
-  } else {
-    activeTab.value = 1;
-  }
+const switchTab = () => {
+  activeTab.value = activeTab.value === 1 ? 0 : 1;
   nextTick(() => {
     if (scrollContainer2.value) scrollContainer2.value.scrollTop = 0;
     pauseScroll(2);
@@ -599,82 +541,21 @@ const switchTab = (index: number) => {
   });
 };
 
-const chartData = ref({
-  cityProject: {
-    xAxis: ['北京', '上海', '深圳', '杭州', '广州', '成都', '武汉', '南京', '西安', '重庆'],
-    data: [757259, 678614, 343417, 315406, 177003, 168300, 120827, 111593, 58678, 56564]
-  },
-  talent: {
-    xAxis: ['北京', '上海', '广州', '深圳', '成都', '杭州', '武汉', '南京', '郑州', '长沙'],
-    data: [2115924, 1591988, 1555240, 1163580, 894108, 830306, 791335, 733581, 553397, 487971]
-  },
-  communityRank: {
-    xAxis: ['Deepin', 'OpenHarmony', 'MindSpore', 'IoTDB', 'GoFrame'],
-    data: [95, 92, 88, 76, 72]
-  },
-  club: {
-    xAxis: ['成都', '北京', '上海', '武汉','重庆', '深圳', '苏州', '杭州', '合肥', '青岛' ],
-    data: [10, 7, 5, 4, 3, 2, 2, 2, 2, 2]
-  },
-  policy: {
-    xAxis: [
-      '江苏', '北京', '浙江', '广东', '上海', '湖北', '天津',
-      '陕西', '河南', '云南'
-      // '黑龙江','安徽省', '重庆市', '宁夏回族自治区', '山东省', '湖南省'
-    ],
-    data: [11, 7, 3, 3, 3, 2, 2, 2, 2, 2
-      // 2, 2, 1, 1, 1, 1
-    ]
-  },
-  campus: {
-    xAxis: [
-      '南京', '武汉', '北京', '长沙', '成都', '上海', '天津', '深圳',
-      '济南', '广州'
-      // '呼和浩特', '长春', '吉林', '沈阳', '苏州', '青岛',
-      // '惠州', '合肥', '佛山', '南昌', '南充', '徐州', '西安', '郑州',
-      // '贵阳', '线上', '哈尔滨', '宜宾', '杭州', '太原', '大连', '银川',
-      // '西宁', '中山', '乐山', '内江', '泸州', '常德', '昌吉', '桂林',
-      // '福州', '常州', '库尔勒', '兰州', '温州', '鄂州', '乌鲁木齐', '日照',
-      // '无锡', '重庆', '东莞', '赣州'
-    ],
-    data: [
-      20, 16, 16, 16, 11, 10, 8, 8, 7, 6
-      // 5, 4, 3, 3, 3, 3,
-      // 3, 3, 3, 3, 3, 2, 2, 2,
-      // 2, 2, 2, 2, 2, 2, 2, 1,
-      // 1, 1, 1, 1, 1, 1, 1, 1,
-      // 1, 1, 1, 1, 1, 1, 1, 1,
-      // 1, 1, 1, 1
-    ]
-  },
-  mirrors: {
-    xAxis: [
-      '上海', '北京', '西安', '重庆', '济南', '南京', '武汉', '合肥', '香港',
-      '长春', '成都', '深圳', '兰州', '哈尔滨', '南阳', '杭州'
-    ],
-    data: [4, 4, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
-  }
-});
-
-// 数据定义
-const developerNames = ['白纯骢', '陆红旭', '慕冬亮', '张继德', '蒋周奇', '张天雄', '阮文俊', '李奇', '陈鹏轩', '杨帆'];
-
-const developerScrollRef = ref<HTMLElement | null>(null);
-let developerTimer: NodeJS.Timeout | null = null;
-
-// 自动生成头像背景色
+// 头像背景色
 const getAvatarBg = (index: number) => {
   const colors = ['#6366f1', '#8b5cf6', '#ec4899', '#f43f5e', '#f59e0b', '#10b981', '#06b6d4', '#3b82f6'];
   return colors[index % colors.length];
 };
 
-// 滚动逻辑
+// 开发者列表滚动
+const developerScrollRef = ref<HTMLElement | null>(null);
+let developerTimer: NodeJS.Timeout | null = null;
+
 const startDeveloperScroll = () => {
   const container = developerScrollRef.value;
   if (!container) return;
   const list = container.querySelector('.developer-list') as HTMLElement;
   if (!list || list.scrollHeight <= container.clientHeight) return;
-
   if (developerTimer) clearInterval(developerTimer);
   developerTimer = setInterval(() => {
     container.scrollTop += 1;
@@ -687,16 +568,9 @@ const startDeveloperScroll = () => {
 const pauseDeveloperScroll = () => developerTimer && clearInterval(developerTimer);
 const resumeDeveloperScroll = () => startDeveloperScroll();
 
-const isEmpty = ref({
-  cityProject: false, talent: false, developer: false, communityRank: false,
-  club: false, policy: false, campus: false, mirrors: false
-});
-
-const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({});
+// 自动滚动 (通用项目列表)
 const scrollContainer1 = ref<HTMLDivElement | null>(null);
 const scrollContainer2 = ref<HTMLDivElement | null>(null);
-const scrollContainer3 = ref<HTMLDivElement | null>(null);
-const scrollContainer4 = ref<HTMLDivElement | null>(null);
 const scrollTimers: { [key: number]: NodeJS.Timeout | null } = { 1: null, 2: null };
 
 const autoScroll = (key: number) => {
@@ -721,10 +595,8 @@ const pauseScroll = (key: number) => {
 };
 const resumeScroll = (key: number) => autoScroll(key);
 
-// ================= 图表初始化=================
-
+// ================= 图表初始化 =================
 const commonGrid = { left: '3%', right: '4%', bottom: '15px', top: '15%', containLabel: true };
-const colorPalette = ['#3b82f6', '#06b6d4', '#8b5cf6', '#ec4899', '#f59e0b']; // 蓝, 青, 紫, 粉, 橙
 
 const initCityProjectChart = () => {
   const el = document.getElementById('cityProjectChart');
@@ -761,36 +633,7 @@ const initTalentChart = () => {
     yAxis: { type: 'value', name: '单位：人', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
     series: [{
       type: 'bar', data: chartData.value.talent.data, barWidth: '50%',
-      itemStyle: { borderRadius: [4, 4, 0, 0], color: '#F97316' } // 橙色
-    }]
-  });
-};
-
-const initDeveloperChart = () => {
-  const el = document.getElementById('developerChart');
-  if (!el) return;
-  const myChart = echarts.init(el);
-  chartInstances.value.developer = myChart;
-  myChart.setOption({
-    tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 贡献分' },
-    grid: { left: '3%', right: '5%', bottom: '15px', top: '5%', containLabel: true },
-    xAxis: { type: 'value', show: false }, // 隐藏x轴
-    yAxis: {
-      type: 'category',
-      data: chartData.value.developer.yAxis.reverse(),
-      axisLine: { show: false },
-      axisTick: { show: false },
-      axisLabel: { color: '#333', fontWeight: 500 }
-    },
-    series: [{
-      type: 'bar', data: chartData.value.developer.data.reverse(), barWidth: 16,
-      itemStyle: {
-        color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{ offset: 0, color: '#7C3AED' }, {
-          offset: 1,
-          color: '#C4B5FD'
-        }]), borderRadius: [0, 8, 8, 0]
-      },
-      label: { show: false } // **修改点：隐藏具体分数**
+      itemStyle: { borderRadius: [4, 4, 0, 0], color: '#F97316' }
     }]
   });
 };
@@ -809,9 +652,7 @@ const initCommunityRankChart = () => {
     },
     yAxis: { type: 'value', name: '单位：个', nameTextStyle: { color: '#999' } },
     series: [{
-      type: 'bar',
-      data: [69, 35, 31, 25, 18, 15, 12, 12],
-      barWidth: '40%',
+      type: 'bar', data: [69, 35, 31, 25, 18, 15, 12, 12], barWidth: '40%',
       itemStyle: { borderRadius: [4, 4, 0, 0], color: '#3b82f6' }
     }]
   });
@@ -828,8 +669,7 @@ const initClubChart = () => {
     xAxis: { type: 'category', data: chartData.value.club.xAxis, axisLabel: { color: '#666' } },
     yAxis: { type: 'value', name: '单位：个', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
     series: [{
-      type: 'line', data: chartData.value.club.data,
-      smooth: true, symbolSize: 8,
+      type: 'line', data: chartData.value.club.data, smooth: true, symbolSize: 8,
       lineStyle: { width: 3, color: '#F59E0B' },
       itemStyle: { color: '#F59E0B', borderColor: '#fff', borderWidth: 2 },
       areaStyle: { opacity: 0.15, color: '#F59E0B' }
@@ -849,7 +689,7 @@ const initPolicyChart = () => {
     yAxis: { type: 'value', name: '单位：条', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
     series: [{
       type: 'bar', data: chartData.value.policy.data, barWidth: '45%',
-      itemStyle: { borderRadius: [4, 4, 0, 0], color: '#2563EB' } // 蓝色
+      itemStyle: { borderRadius: [4, 4, 0, 0], color: '#2563EB' }
     }]
   });
 };
@@ -859,23 +699,19 @@ const initCampusChart = () => {
   if (!el) return;
   const myChart = echarts.init(el);
   chartInstances.value.campus = myChart;
-  // **修改点：去掉三角形pictorialBar，改为美观的圆角柱状图**
   myChart.setOption({
     tooltip: { trigger: 'axis', valueFormatter: (value: any) => value + ' 场' },
     grid: commonGrid,
     xAxis: { type: 'category', data: chartData.value.campus.xAxis, axisLabel: { color: '#666' } },
     yAxis: { type: 'value', name: '单位：场次', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
     series: [{
-      type: 'bar',
-      data: chartData.value.campus.data,
-      barWidth: '35%',
+      type: 'bar', data: chartData.value.campus.data, barWidth: '35%',
       itemStyle: {
-        borderRadius: [8, 8, 0, 0], // 圆角
-        // 活力洋红色渐变
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: '#EC4899' },
-          { offset: 1, color: '#F472B6' }
-        ])
+        borderRadius: [8, 8, 0, 0],
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#EC4899' }, {
+          offset: 1,
+          color: '#F472B6'
+        }])
       }
     }]
   });
@@ -892,38 +728,22 @@ const initMirrorChart = () => {
     xAxis: { type: 'category', data: chartData.value.mirrors.xAxis, axisLabel: { color: '#666' } },
     yAxis: { type: 'value', name: '单位：个', splitLine: { lineStyle: { type: 'dashed', color: '#eee' } } },
     series: [{
-      type: 'bar', data: chartData.value.mirrors.data,
-      barWidth: 30,
+      type: 'bar', data: chartData.value.mirrors.data, barWidth: 30,
       itemStyle: {
         borderRadius: [4, 4, 0, 0],
-        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-          { offset: 0, color: '#0EA5E9' },
-          { offset: 1, color: '#38BDF8' }
-        ])
+        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{ offset: 0, color: '#0EA5E9' }, {
+          offset: 1,
+          color: '#38BDF8'
+        }])
       }
     }]
   });
 };
 
-const initCharts = () => {
-  nextTick(() => {
-    initCityProjectChart();
-    initTalentChart();
-    initDeveloperChart();
-    initCommunityRankChart();
-    initClubChart();
-    initPolicyChart();
-    initCampusChart();
-    initMirrorChart();
-  });
-};
-
 const init = () => {
   nextTick(() => {
     initCityProjectChart();
-    initHmEnterpriseChart();
     initTalentChart();
-    initDeveloperChart();
     initCommunityRankChart();
     initClubChart();
     initPolicyChart();
@@ -932,108 +752,25 @@ const init = () => {
 
     autoScroll(1);
     autoScroll(2);
-    autoScroll(3);
-    autoScroll(4);
     startCommunityScroll();
     startDeveloperScroll();
   });
 };
+
 const unInit = () => {
   Object.values(scrollTimers).forEach(t => t && clearInterval(t));
   pauseDeveloperScroll();
   pauseCommunityScroll();
 };
 
-
-// 1. 鸿蒙优秀开源项目 (突出核心技术组件)
-const hmProjects = [
-  { name: 'OpenHarmony/arkui_ace_engine', desc: 'ArkUI 声明式UI开发框架引擎' },
-  { name: 'HarmonyOS/dist_softbus', desc: '极简协议分布式软总线技术' },
-  { name: 'OpenHarmony/communication_netmanager', desc: '网络管理与连接调度子系统' },
-  { name: 'ohos-standard/third_party_sqlite', desc: '适配于鸿蒙的高性能数据库组件' },
-];
-
-// 2. 鸿蒙明星开发者贡献榜 (模拟活跃度分数)
-const hmDevelopers = [
-  { name: 'Harmony_Hacker', score: '3,210', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Ark' },
-  { name: 'BlueOS_Contributor', score: '2,850', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Blue' },
-  { name: 'OpenSource_Fanatic', score: '2,460', avatar: 'https://api.dicebear.com/7.x/avataaars/svg?seed=Fan' },
-];
-
-// 3. 鸿蒙开源企业排行榜 (体现生态伙伴参与度)
-const hmEnterprises = [
-  { name: '华为技术', value: 100 },
-  { name: '软通动力', value: 85 },
-  { name: '拓维信息', value: 72 },
-  { name: '润和软件', value: 65 },
-  { name: '中软国际', value: 58 }
-];
-
-const initHmEnterpriseChart = () => {
-  const chartDom = document.getElementById('hmEnterpriseChart');
-  if (!chartDom) return;
-
-  const myChart = echarts.init(chartDom);
-
-  const option = {
-    grid: {
-      left: '3%',
-      right: '12%',
-      bottom: '3%',
-      top: '5%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'value',
-      show: false // 保持与政策图一致，不显示坐标轴
-    },
-    yAxis: {
-      type: 'category',
-      // 反转数据，让高分的排在上面
-      data: hmEnterprises.map(item => item.name).reverse(),
-      axisLine: { show: false },
-      axisTick: { show: false },
-      axisLabel: {
-        color: '#64748b',
-        fontSize: 12
-      }
-    },
-    series: [
-      {
-        type: 'bar',
-        data: hmEnterprises.map(item => item.value).reverse(),
-        barWidth: 16,
-        itemStyle: {
-          // 使用渐变色提升质感
-          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-            { offset: 0, color: '#3b82f6' },
-            { offset: 1, color: '#60a5fa' }
-          ]),
-          borderRadius: [0, 8, 8, 0] // 右侧圆角
-        },
-        label: {
-          show: true,
-          position: 'right',
-          formatter: '{c}', // 直接显示数值
-          color: '#1e293b',
-          fontWeight: 'bold'
-        }
-      }
-    ]
-  };
-
-  myChart.setOption(option);
-
-  // 窗口缩放自适应
-  window.addEventListener('resize', () => myChart.resize());
-};
-
 watch(widthType, () => {
   init();
 });
+
 onMounted(() => {
   init();
 });
+
 onUnmounted(() => {
   unInit();
 });
@@ -1042,7 +779,6 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .index-module__NV_5cW__container {
   min-height: 100vh;
-  //background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%); /* 深蓝到深紫背景 */
   padding: 2rem 1rem;
   font-family: 'Inter', system-ui, -apple-system, sans-serif;
   color: #fff;
@@ -1125,7 +861,7 @@ onUnmounted(() => {
 
 /* 卡片玻璃拟态美化 */
 .index-module__NV_5cW__chartCard {
-  background: rgba(255, 255, 255, 0.95); /* 高不透明度白底，保证图表清晰 */
+  background: rgba(255, 255, 255, 0.95);
   border: 1px solid rgba(255, 255, 255, 0.1);
   border-radius: 16px;
   padding: 1.25rem;
@@ -1212,7 +948,6 @@ onUnmounted(() => {
   font-weight: 700;
 }
 
-/* 前三名高亮 */
 .project-item:nth-child(1) .project-rank {
   background: linear-gradient(135deg, #fbbf24, #d97706);
 }
@@ -1281,36 +1016,19 @@ onUnmounted(() => {
   width: fit-content;
 }
 
-.tab-pill {
-  font-size: 12px;
-  padding: 4px 12px;
-  cursor: pointer;
-  border-radius: 6px;
-  color: #64748b;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.tab-pill.active {
-  background: #fff;
-  color: #3b82f6;
-  font-weight: 600;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-}
-
-/* 来源 Footer 样式 (修改版：数据来源：Icon + Text) */
+/* 来源 Footer */
 .source-footer {
   margin-top: auto;
   padding-top: 0.75rem;
   border-top: 1px solid #f1f5f9;
   display: flex;
   align-items: center;
-  justify-content: flex-end; /* 右对齐 */
+  justify-content: flex-end;
   font-size: 11px;
 }
 
 .source-label {
-  color: #94a3b8; /* 浅灰色标签 */
+  color: #94a3b8;
   margin-right: 4px;
 }
 
@@ -1347,9 +1065,6 @@ onUnmounted(() => {
   font-weight: 500;
 }
 
-/* 深一点的灰色文字 */
-
-
 /* 行动区域 */
 .index-module__NV_5cW__actionSection {
   max-width: 1400px;
@@ -1357,7 +1072,7 @@ onUnmounted(() => {
   text-align: center;
   border-radius: 24px;
   padding: 3rem;
-  background: rgba(30, 41, 59, 0.6); /* 深色背景 */
+  background: rgba(30, 41, 59, 0.6);
   border: 1px solid rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(12px);
   position: relative;
@@ -1603,31 +1318,6 @@ onUnmounted(() => {
   border-color: #e2e8f0;
 }
 
-/* 排名样式 */
-.dev-rank {
-  width: 24px;
-  font-weight: 800;
-  font-style: italic;
-  color: #94a3b8;
-  font-size: 14px;
-}
-
-.dev-rank.rank-1 {
-  color: #fbbf24;
-  font-size: 18px;
-}
-
-.dev-rank.rank-2 {
-  color: #94a3b8;
-  font-size: 16px;
-}
-
-.dev-rank.rank-3 {
-  color: #b45309;
-  font-size: 15px;
-}
-
-/* 头像占位 */
 .dev-avatar {
   width: 36px;
   height: 36px;
@@ -1673,49 +1363,4 @@ onUnmounted(() => {
     grid-template-columns: 1fr;
   }
 }
-
-/* 鸿蒙专项板块样式 */
-.hm-grid-container {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 24px;
-}
-
-.hm-tag-icon {
-  background: linear-gradient(90deg, #007dff, #00c4ff);
-  color: white;
-  padding: 2px 10px;
-  border-radius: 4px;
-  font-size: 14px;
-  margin-right: 8px;
-  font-weight: bold;
-}
-
-.hm-rank-card {
-  background: #ffffff;
-  border-radius: 16px;
-  overflow: hidden;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
-  border: 1px solid #f1f5f9;
-  transition: transform 0.3s ease;
-
-  &:hover {
-    transform: translateY(-5px);
-  }
-}
-
-.hm-rank-card {
-  // ... 原有样式
-  border: 1px solid rgba(0, 125, 255, 0.1); // 淡淡的鸿蒙蓝边框
-
-  &:hover {
-    transform: translateY(-5px);
-    border-color: rgba(0, 125, 255, 0.4);
-    box-shadow: 0 10px 30px rgba(0, 125, 255, 0.1); // 蓝色系投影
-  }
-}
-
-.hm-tag-icon {
-  background: linear-gradient(90deg, #007dff, #4da1ff); // 更加纯净的华为/鸿蒙蓝
-}
 </style>