From 188bcbfc3e83b91ea11900328f7e2b761cac19ca Mon Sep 17 00:00:00 2001 From: fmk1023 Date: Mon, 19 Jan 2026 15:18:05 +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=E5=A2=9E=E5=8A=A0=E9=B8=BF?= =?UTF-8?q?=E8=92=99=E7=94=9F=E6=80=81=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/Jyh/Community/index.vue | 258 ++++- src/views/Jyh/Community/indexOld.vue | 1408 -------------------------- 2 files changed, 248 insertions(+), 1418 deletions(-) delete mode 100644 src/views/Jyh/Community/indexOld.vue diff --git a/src/views/Jyh/Community/index.vue b/src/views/Jyh/Community/index.vue index 6317245..116b73a 100644 --- a/src/views/Jyh/Community/index.vue +++ b/src/views/Jyh/Community/index.vue @@ -34,7 +34,7 @@
-

武汉优质开源项目榜单

+

武汉优质开源项目榜

- 开源创新联盟优秀项目 - 武汉优秀开源项目 + 2024武汉优秀开源项目 + 2025武汉优秀开源项目
@@ -282,6 +282,105 @@
+
+
+

+ HarmonyOS 鸿蒙生态数据可视化 +

+
+
+ +
+

鸿蒙优质开源项目榜

+
+
+
+
+ {{ index + 1 }} +
+
+ {{ item.name }} + {{ item.desc }} +
+
+ ★ {{ item.stars }} +
+
+
+
+
+ 数据来源： +
+ + + + GitHub +
+
+
+ +
+

鸿蒙明星开发者贡献榜

+
+
+
+ + +
+ {{ item.name.charAt(0) }} +
+ +
+
{{ item.name }}
+
核心贡献者
+
+ +
+ + + + 活跃 +
+
+
+
+
+ 数据来源： +
+ + 华科开放原子俱乐部 +
+
+
+ + +
+

鸿蒙开源企业贡献榜

+
+
+
+
+
+ 数据来源： +
+ + 开放原子开源基金会 +
+
+
+
+
+
@@ -437,13 +536,18 @@ const chinaExcellentProjects = ref([ // 武汉知名社区数据 const wuhanCommunities = ref([ - { name: 'Deepin (深度)', type: '操作系统', slogan: '最大的国产桌面操作系统开源社区' }, - { name: 'OpenHarmony 武汉', type: '万物互联', slogan: '华科/武大等高校深度参与的终端操作系统' }, - { name: 'MindSpore 武汉', type: '人工智能', slogan: '昇思全场景AI框架武汉开发者社区' }, - { name: 'IoTDB 社区', type: '工业物联网', slogan: '源自清华在汉广泛应用的工业时序数据库' }, - { name: 'GoFrame 社区', type: '后端开发', slogan: '模块化、全栈式、模块化的Go语言开发框架' }, - { name: '飞桨 (PaddlePaddle)', type: '深度学习', slogan: '百度武汉开源生态开发者汇聚地' }, - { name: '极狐 GitLab 武汉', type: 'DevOps', slogan: '开源信息基础设施与协同开发平台' } + { name: '黄鹤开源社区', type: '核心生态', slogan: '国家级、城市级开源社区平台，武汉开源生态的核心枢纽' }, + { name: '深度社区 (Deepin)', type: '操作系统', slogan: '全球最大桌面操作系统社区之一，全球用户超过 750 万' }, + { name: '极狐社区 (GitLab China)', type: 'DevOps', slogan: '全球第二大开源托管平台 GitLab 在汉设立的中国发行版及开发者社区' }, + { name: '开源鸿蒙社区 (OpenHarmony)', type: '万物互联', slogan: '国家级生态创新中心，设有全国首个分委会' }, + { name: 'PostgreSQL 中文社区', type: '数据库', slogan: '全球四大开源数据库之一的运营中心设在武汉' }, + { name: '武汉大学开源社区', type: '学术社团', slogan: '老牌社团，涉及 Linux、嵌入式、深度学习等方向' }, + { name: '武汉大学 OpenHarmony 俱乐部', type: '万物互联', slogan: '专注于华为开源鸿蒙生态' }, + { name: '华中科技大学开源社团', type: '学术社团', slogan: '常年组织 LUG (Linux User Group) 及黑客松活动' }, + { name: '武汉理工大学开源联盟', type: '学术社团', slogan: '聚焦计算机科学与软件工程方向' }, + { name: '华中师范大学', type: '兴趣小组', slogan: '开源技术兴趣小组' }, + { name: '中南民族大学', type: '兴趣小组', slogan: '开源技术兴趣小组' }, + { name: '湖北大学', type: '兴趣小组', slogan: '开源技术兴趣小组' } ]); const activeCommunityTab = ref(0); @@ -591,6 +695,8 @@ const isEmpty = ref({ const chartInstances = ref<{ [key: string]: echarts.ECharts | null }>({}); const scrollContainer1 = ref(null); const scrollContainer2 = ref(null); +const scrollContainer3 = ref(null); +const scrollContainer4 = ref(null); const scrollTimers: { [key: number]: NodeJS.Timeout | null } = { 1: null, 2: null }; const autoScroll = (key: number) => { @@ -815,6 +921,7 @@ const initCharts = () => { const init = () => { nextTick(() => { initCityProjectChart(); + initHmEnterpriseChart(); initTalentChart(); initDeveloperChart(); initCommunityRankChart(); @@ -825,6 +932,8 @@ const init = () => { autoScroll(1); autoScroll(2); + autoScroll(3); + autoScroll(4); startCommunityScroll(); startDeveloperScroll(); }); @@ -835,6 +944,90 @@ const unInit = () => { 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(); }); @@ -1480,4 +1673,49 @@ 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); // 更加纯净的华为/鸿蒙蓝 +} diff --git a/src/views/Jyh/Community/indexOld.vue b/src/views/Jyh/Community/indexOld.vue deleted file mode 100644 index e347d3c..0000000 --- a/src/views/Jyh/Community/indexOld.vue +++ /dev/null @@ -1,1408 +0,0 @@ - - - - -