feat(pages): show live npm downloads in highlights stats

pages/src/components/HighlightsSection.tsx

@@ -4,6 +4,17 @@
 import React, { useRef, useEffect, useState } from 'react';
 import { useTranslation } from '../i18n';
 import { useResponsive } from '../hooks/useResponsive';
+import { useNpmDownloads } from '../hooks/useNpmDownloads';
+
+// npm 包名，用于拉取外部真实下载量
+const NPM_PACKAGE = '@alibaba-group/open-code-review';
+
+// 将下载量压缩为紧凑格式，与其它指标风格一致：149176 -> "149K+"
+function formatNpmDownloads(n: number): string {
+  if (n >= 1_000_000) return `${Math.floor(n / 1_000_000)}M+`;
+  if (n >= 1_000) return `${Math.floor(n / 1_000)}K+`;
+  return `${n}`;
+}
 
 // 从字符串中解析数字和前后缀
 function parseStatValue(value: string): { prefix: string; number: number; suffix: string } {
@@ -57,6 +68,8 @@ const CountUpValue: React.FC<{ value: string; isVisible: boolean }> = ({ value,
 const HighlightsSection: React.FC = () => {
   const { t } = useTranslation();
   const { isMobile, isTablet } = useResponsive();
+  // 实时拉取 npm 月下载量，代表外部社区真实使用量
+  const npm = useNpmDownloads(NPM_PACKAGE, 'last-month');
   const sectionRef = useRef<HTMLDivElement>(null);
   const [isVisible, setIsVisible] = useState(false);
 
@@ -78,8 +91,13 @@ const HighlightsSection: React.FC = () => {
 
   const stats = [
     { value: t('highlights.stat1Value'), label: t('highlights.stat1Label'), caption: t('highlights.stat1Caption') },
-    { value: t('highlights.stat2Value'), label: t('highlights.stat2Label'), caption: t('highlights.stat2Caption') },
     { value: t('highlights.stat3Value'), label: t('highlights.stat3Label'), caption: t('highlights.stat3Caption') },
+    {
+      // 实时 npm 月下载量；请求未完成或失败时回退到 i18n 中的兜底静态值
+      value: npm.downloads !== null ? formatNpmDownloads(npm.downloads) : t('highlights.stat2Value'),
+      label: t('highlights.stat2Label'),
+      caption: t('highlights.stat2Caption'),
+    },
     { value: t('highlights.stat4Value'), label: t('highlights.stat4Label'), caption: t('highlights.stat4Caption') },
     { value: t('highlights.stat5Value'), label: t('highlights.stat5Label'), caption: t('highlights.stat5Caption') },
   ];

pages/src/hooks/useNpmDownloads.ts

@@ -0,0 +1,63 @@
+// SPDX-License-Identifier: Apache-2.0
+// Copyright 2026 alibaba/open-code-review Contributors
+
+import { useEffect, useState } from 'react';
+
+type Period = 'last-day' | 'last-week' | 'last-month' | 'last-year';
+
+interface NpmDownloadsState {
+  downloads: number | null;
+  loading: boolean;
+  error: boolean;
+}
+
+/**
+ * 实时获取某个 npm 包的下载量。
+ * 数据源为 npm 官方统计 API（支持 CORS，可在纯静态页面直接调用）。
+ * 请求失败时 error 为 true，调用方可据此优雅降级。
+ *
+ * 当前用于 HighlightsSection 的「NPM 社区下载量」指标：请求进行中或失败时，
+ * 组件回退到 i18n 中的兜底静态值。
+ */
+export function useNpmDownloads(pkg: string, period: Period = 'last-month'): NpmDownloadsState {
+  const [state, setState] = useState<NpmDownloadsState>({
+    downloads: null,
+    loading: true,
+    error: false,
+  });
+
+  useEffect(() => {
+    let cancelled = false;
+    setState({ downloads: null, loading: true, error: false });
+
+    // 弱网或 API 无响应时，超时后 abort 请求并降级，避免界面长期卡在 loading
+    const controller = new AbortController();
+    const timeout = setTimeout(() => controller.abort(), 8000);
+
+    // pkg 可能是 scoped 包名（含 `/`），编码后再插值以保证 URL 路径合法
+    fetch(`https://api.npmjs.org/downloads/point/${period}/${encodeURIComponent(pkg)}`, {
+      signal: controller.signal,
+    })
+      .then((r) => {
+        if (!r.ok) throw new Error(`npm downloads API responded ${r.status}`);
+        return r.json();
+      })
+      .then((data: { downloads?: number }) => {
+        if (cancelled) return;
+        if (typeof data.downloads !== 'number') throw new Error('unexpected payload');
+        setState({ downloads: data.downloads, loading: false, error: false });
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setState({ downloads: null, loading: false, error: true });
+      });
+
+    return () => {
+      cancelled = true;
+      clearTimeout(timeout);
+      controller.abort();
+    };
+  }, [pkg, period]);
+
+  return state;
+}

pages/src/i18n/en.ts

@@ -25,14 +25,14 @@ export const en = {
 
   // Highlights
   'highlights.stat1Value': '20K+',
-  'highlights.stat1Label': 'ACTIVE USERS',
+  'highlights.stat1Label': 'INTERNAL ACTIVE USERS',
   'highlights.stat1Caption': 'Battle-tested inside Alibaba Group',
-  'highlights.stat2Value': '> 30%',
-  'highlights.stat2Label': 'ADOPTION RATE',
-  'highlights.stat2Caption': 'Battle-tested inside Alibaba Group',
-  'highlights.stat3Value': '1M+',
+  'highlights.stat2Value': '150K+',
+  'highlights.stat2Label': 'NPM COMMUNITY DOWNLOADS',
+  'highlights.stat2Caption': 'Real npm downloads · last 30 days',
+  'highlights.stat3Value': '3M+',
   'highlights.stat3Label': 'REAL-WORLD TASKS',
-  'highlights.stat3Caption': 'Code review tasks executed',
+  'highlights.stat3Caption': 'Battle-tested inside Alibaba Group',
   'highlights.stat4Value': '1/9',
   'highlights.stat4Label': 'TOKEN COST',
   'highlights.stat4Caption': 'vs. Claude Code · 1,000 PRs',

pages/src/i18n/ja.ts

@@ -27,14 +27,14 @@ export const ja: TranslationKeys = {
 
   // Highlights
   'highlights.stat1Value': '20K+',
-  'highlights.stat1Label': 'アクティブユーザー',
+  'highlights.stat1Label': '社内アクティブユーザー',
   'highlights.stat1Caption': 'Alibabaグループ内で実戦検証済み',
-  'highlights.stat2Value': '> 30%',
-  'highlights.stat2Label': '採用率',
-  'highlights.stat2Caption': 'Alibabaグループ内で実戦検証済み',
-  'highlights.stat3Value': '1M+',
+  'highlights.stat2Value': '150K+',
+  'highlights.stat2Label': 'NPM コミュニティダウンロード',
+  'highlights.stat2Caption': 'npm 過去30日の実ダウンロード数',
+  'highlights.stat3Value': '3M+',
   'highlights.stat3Label': '実タスク',
-  'highlights.stat3Caption': '実行されたコードレビュータスク',
+  'highlights.stat3Caption': 'Alibabaグループ内で実戦検証済み',
   'highlights.stat4Value': '1/9',
   'highlights.stat4Label': 'トークンコスト',
   'highlights.stat4Caption': 'Claude Code との比較 · 1,000 PR',

pages/src/i18n/ru.ts

@@ -27,14 +27,14 @@ export const ru: TranslationKeys = {
 
   // Highlights
   'highlights.stat1Value': '20K+',
-  'highlights.stat1Label': 'АКТИВНЫХ ПОЛЬЗОВАТЕЛЕЙ',
+  'highlights.stat1Label': 'ВНУТРЕННИЕ АКТИВНЫЕ ПОЛЬЗОВАТЕЛИ',
   'highlights.stat1Caption': 'в Alibaba Group',
-  'highlights.stat2Value': '> 30%',
-  'highlights.stat2Label': 'ЗАМЕЧАНИЙ ПРИНЯТО',
-  'highlights.stat2Caption': 'в Alibaba Group',
-  'highlights.stat3Value': '1M+',
+  'highlights.stat2Value': '150K+',
+  'highlights.stat2Label': 'ЗАГРУЗКИ СООБЩЕСТВА NPM',
+  'highlights.stat2Caption': 'реальные загрузки npm · 30 дней',
+  'highlights.stat3Value': '3M+',
   'highlights.stat3Label': 'ЗАДАЧ КОД-РЕВЬЮ',
-  'highlights.stat3Caption': 'выполнено в реальных проектах',
+  'highlights.stat3Caption': 'в Alibaba Group',
   'highlights.stat4Value': '1/9',
   'highlights.stat4Label': 'ОТ РАСХОДА ТОКЕНОВ',
   'highlights.stat4Caption': 'Claude Code · 1 000 PR',

pages/src/i18n/zh.ts

@@ -27,14 +27,14 @@ export const zh: TranslationKeys = {
 
   // Highlights
   'highlights.stat1Value': '20K+',
-  'highlights.stat1Label': '活跃用户',
+  'highlights.stat1Label': '内部活跃用户',
   'highlights.stat1Caption': '经阿里巴巴集团内部实战验证',
-  'highlights.stat2Value': '> 30%',
-  'highlights.stat2Label': '采纳率',
-  'highlights.stat2Caption': '经阿里巴巴集团内部实战验证',
-  'highlights.stat3Value': '1M+',
+  'highlights.stat2Value': '150K+',
+  'highlights.stat2Label': 'NPM 社区下载量',
+  'highlights.stat2Caption': 'npm 近 30 天真实下载',
+  'highlights.stat3Value': '3M+',
   'highlights.stat3Label': '真实任务',
-  'highlights.stat3Caption': '已执行的代码审查任务',
+  'highlights.stat3Caption': '经阿里巴巴集团内部实战验证',
   'highlights.stat4Value': '1/9',
   'highlights.stat4Label': 'TOKEN 成本',
   'highlights.stat4Caption': '对比 Claude Code · 1,000 个 PR',