态势感知平台-增加武汉鸿蒙项目榜单

src/views/Jyh/Community/components/HarmonyEcoCharts.vue

@@ -11,7 +11,8 @@
         <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>
+            <span :class="{ active: activeTab === 1 }" @click="switchTab(1)">鸿蒙开源项目</span>
+            <span :class="{ active: activeTab === 2 }" @click="switchTab(2)">武汉鸿蒙项目</span>
           </div>
         </div>
 
@@ -24,12 +25,41 @@
                @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-item" v-for="(item, index) in [...hmProjects, ...hmProjects]" :key="'hm-'+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>
+                  <div class="dev-name-row">
+                    <span class="project-name">{{ item.name }}</span>
+                    <span class="project-company-tag" v-if="item.company">{{ item.company }}</span>
+                  </div>
+                  <span class="project-desc">{{ item.desc }}</span>
+                </div>
+                <div class="project-meta">
+                  <span class="project-stars">★ {{ item.stars }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div v-show="activeTab === 2"
+               class="chartCard__container list-container"
+               ref="scrollContainerWhProject"
+               @mouseenter="pauseScroll('whProject')"
+               @mouseleave="resumeScroll('whProject')">
+            <div class="project-list">
+              <div class="project-item" v-for="(item, index) in [...whProjects, ...whProjects]" :key="'wh-'+index">
+                <div class="project-rank-wrapper">
+        <span class="project-rank" :class="{'top-three': (index % whProjects.length) < 3}">
+          {{ (index % whProjects.length) + 1 }}
+        </span>
+                </div>
+                <div class="project-info">
+                  <div class="dev-name-row">
+                    <span class="project-name">{{ item.name }}</span>
+                    <span class="project-company-tag" v-if="item.company">{{ item.company }}</span>
+                  </div>
                   <span class="project-desc">{{ item.desc }}</span>
                 </div>
                 <div class="project-meta">
@@ -41,15 +71,6 @@
         </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>
 
@@ -284,16 +305,29 @@ const hmEnterpriseCityData = [
 ];
 
 const hmProjects = [
-  { name: 'OpenHarmony', desc: '开源鸿蒙操作系统核心项目', stars: '50k+' },
+  { name: 'OpenHarmony', desc: '开源鸿蒙操作系统核心项目', stars: '50k+', company: '华为' },
-  { name: 'HarmonyOS Developer Tools', desc: '鸿蒙开发工具集', stars: '15k+' },
+  { name: 'HarmonyOS Developer Tools', desc: '鸿蒙开发工具集', stars: '15k+', company: '华为' },
-  { name: 'HarmonyOS Application Framework', desc: '鸿蒙应用框架', stars: '12k+' },
+  { name: 'HarmonyOS Application Framework', desc: '鸿蒙应用框架', stars: '12k+', company: '华为' },
-  { name: 'HarmonyOS Distributed Hardware', desc: '分布式硬件管理', stars: '10k+' },
+  { name: 'HarmonyOS Distributed Hardware', desc: '分布式硬件管理', stars: '10k+', company: '华为' },
-  { name: 'HarmonyOS Security Framework', desc: '鸿蒙安全框架', stars: '9k+' },
+  { name: 'HarmonyOS Security Framework', desc: '鸿蒙安全框架', stars: '9k+' , company: '华为'},
-  { name: 'HarmonyOS AI Framework', desc: '鸿蒙AI框架', stars: '8.5k+' },
+  { name: 'HarmonyOS AI Framework', desc: '鸿蒙AI框架', stars: '8.5k+', company: '华为' },
-  { name: 'HarmonyOS Graphics Framework', desc: '鸿蒙图形框架', stars: '8k+' },
+  { name: 'HarmonyOS Graphics Framework', desc: '鸿蒙图形框架', stars: '8k+', company: '华为' },
-  { name: 'HarmonyOS Multimedia Framework', desc: '鸿蒙多媒体框架', stars: '7.5k+' },
+  { name: 'HarmonyOS Multimedia Framework', desc: '鸿蒙多媒体框架', stars: '7.5k+', company: '华为' },
-  { name: 'HarmonyOS Kernel LiteOS-M', desc: '轻量级内核', stars: '7k+' },
+  { name: 'HarmonyOS Kernel LiteOS-M', desc: '轻量级内核', stars: '7k+', company: '华为' },
-  { name: 'HarmonyOS Kernel Linux', desc: 'Linux内核适配', stars: '6.5k+' }
+  { name: 'HarmonyOS Kernel Linux', desc: 'Linux内核适配', stars: '6.5k+', company: '华为' }
+];
+
+const whProjects = [
+  { name: 'OpenHarmony', desc: '开源鸿蒙操作系统核心项目', stars: '50k+', company: '华为' },
+  { name: 'HarmonyOS Developer Tools', desc: '鸿蒙开发工具集', stars: '15k+', company: '华为' },
+  { name: 'HarmonyOS Application Framework', desc: '鸿蒙应用框架', stars: '12k+' , company: '华为'},
+  { name: 'HarmonyOS Distributed Hardware', desc: '分布式硬件管理', stars: '10k+', company: '华为' },
+  { name: 'HarmonyOS Security Framework', desc: '鸿蒙安全框架', stars: '9k+', company: '华为' },
+  { name: 'HarmonyOS AI Framework', desc: '鸿蒙AI框架', stars: '8.5k+', company: '华为' },
+  { name: 'HarmonyOS Graphics Framework', desc: '鸿蒙图形框架', stars: '8k+', company: '华为' },
+  { name: 'HarmonyOS Multimedia Framework', desc: '鸿蒙多媒体框架', stars: '7.5k+', company: '华为' },
+  { name: 'HarmonyOS Kernel LiteOS-M', desc: '轻量级内核', stars: '7k+', company: '华为' },
+  { name: 'HarmonyOS Kernel Linux', desc: 'Linux内核适配', stars: '6.5k+', company: '华为' }
 ];
 
 const hmDevelopers = [
@@ -544,10 +578,12 @@ 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 scrollContainerWhProject = ref<HTMLDivElement | null>(null);
 
 const autoScroll = (key: string) => {
   let container;
   if (key === 'hmProject') container = scrollContainerHmProject.value;
+  else if (key === 'whProject') container = scrollContainerWhProject.value;
   else if (key === 'hmDev') container = scrollContainerHmDev.value;
   else if (key === 'hmEnt') container = scrollContainerHmEnt.value;
   else if (key === 'uni') container = scrollContainerUni.value;
@@ -786,6 +822,7 @@ onMounted(() => {
     autoScroll('hmProject');
     autoScroll('hmDev');
     autoScroll('hmEnt');
+    autoScroll('whProject');
     initUniCityChart(); // 初始化高校分布图
     autoScroll('uni');   // 启动高校列表滚动
     window.addEventListener('resize', handleResize);
@@ -932,6 +969,25 @@ onUnmounted(() => {
   color: #333;
 }
 
+/* 企业标签样式 */
+.project-company-tag {
+  font-size: 11px;
+  padding: 0px 6px;
+  background-color: #f1f5f9;
+  color: #64748b;
+  border-radius: 4px;
+  border: 1px solid #e2e8f0;
+  white-space: nowrap;
+  margin-right: 4px;
+}
+
+/* 针对 Top 3 项目的企业标签可以加深一点颜色（可选） */
+.project-item:nth-child(-n+3) .project-company-tag {
+  background-color: #eff6ff;
+  color: #3b82f6;
+  border-color: #dbeafe;
+}
+
 .project-desc {
   font-size: 11px;
   color: #64748b;
@@ -1052,7 +1108,7 @@ onUnmounted(() => {
 }
 
 .language-tab span {
-  padding: 0.45rem 1.2rem;
+  padding: 0.45rem 1rem;
   border-radius: 0.75rem;
   font-size: 0.875rem;
   font-weight: 600;

src/views/Jyh/Community/components/StatsBar.vue

@@ -2,7 +2,11 @@
   <div class="stats-glass-bar">
     <div class="stat-node">
       <span class="stat-value">1000W+</span>
-      <span class="stat-desc">鸿蒙开发者</span>
+      <span class="stat-desc">全国鸿蒙认证开发者</span>
+    </div>
+    <div class="stat-node">
+      <span class="stat-value">1W+</span>
+      <span class="stat-desc">武汉鸿蒙认证开发者</span>
     </div>
     <div class="stat-separator"></div>
     <div class="stat-node">