dsh-github-hot 0.1.2 → 0.1.3

package/lib/client.js

@@ -47,6 +47,18 @@
 
   /** 侧栏图标（走文字色，深浅主题自动适配）。 */
   const SIDEBAR_ICON_SVG = LINE_ICON(18);
+
+  /** 关闭图标（×）：设置面板右上角。 */
+  const CLOSE_ICON_SVG =
+    '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' +
+    '<path d="M6 6l12 12M18 6L6 18" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/></svg>';
+
+  /** 齿轮图标：设置按钮用，走 currentColor 适配深浅主题。 */
+  const GEAR_ICON_SVG =
+    '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">' +
+    '<circle cx="12" cy="12" r="3.2" stroke="currentColor" stroke-width="2"/>' +
+    '<path d="M12 2.5v2.2M12 19.3v2.2M21.5 12h-2.2M4.7 12H2.5M18.7 5.3l-1.6 1.6M6.9 17.1l-1.6 1.6M18.7 18.7l-1.6-1.6M6.9 6.9L5.3 5.3" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>' +
+    '</svg>';
   /** 面板标题图标，稍大一点。 */
   const BRAND_ICON_SVG = LINE_ICON(18);
 
@@ -86,6 +98,272 @@
     try { localStorage.setItem(LANG_KEY, v); } catch (e) { /* 忽略 */ }
   }
 
+  /* ---------------------------------------------------------------- 界面文案国际化 */
+
+  /**
+   * 界面文案表。
+   *
+   * 为什么集中在这里：切换语言时**整个界面**都要跟着变（不只是简介），
+   * 散落在各组件里的中文字面量没法统一翻译。这里用键值对，组件通过 t() 取。
+   *
+   * 约定：
+   *   · 键名用语义化的英文（title.summary 这种），不要用中文当键；
+   *   · 占位符用 {n} 形式，通过 t('key', { n: 42 }) 填；
+   *   · 中文/英文都必须写全，缺一个就会 fallback 到中文。
+   */
+  const COPY = {
+    zh: {
+      'brand.title': 'GitHub Hot',
+      'brand.subtitle': '多项目涨星走势对比',
+      'period.day': '日榜',
+      'period.week': '周榜',
+      'period.month': '月榜',
+      'view.board': '榜单',
+      'view.stats': '统计',
+      'lang.zh': '中',
+      'lang.en': 'EN',
+      'lang.tipZh': '当前显示中文。点击切到英文',
+      'lang.tipEn': '当前显示英文。点击切回中文',
+      'theme.dark': '深色',
+      'theme.paper': '纸感',
+      'theme.tipDark': '切到深色（融入界面）',
+      'theme.tipPaper': '切到纸感贴纸风',
+      'action.refresh': '刷新',
+      'action.refreshing': '刷新中…',
+      'action.close': '关闭',
+      'status.updatedTo': '数据更新到 {date}',
+      'status.today': '今日',
+      'status.justNow': '刚刚',
+      'status.minutesAgo': '{n} 分钟前',
+      'status.hoursAgo': '{n} 小时前',
+      'status.daysAgo': '{n} 天前',
+      'board.heroLabel': '{period} · TOP20 合计涨星',
+      'board.heroHint': '最高 {repo} 单项涨 {gain} 星',
+      'board.statAvg': 'TOP20 平均',
+      'board.statTop': '最高单项',
+      'board.statCount': '展示条数',
+      'board.countUnit': '{n} 个',
+      'board.topGain': '本期最猛',
+      'detail.introTitle': '项目简介',
+      'detail.chartTitle': '星数曲线',
+      'detail.loading': '加载中…',
+      'detail.loadingIntro': '正在读取并翻译中…',
+      'detail.noIntro': '暂无简介',
+      'detail.noChart': '暂无星数曲线数据',
+      'detail.chartError': '曲线读取失败：{msg}',
+      'detail.readError': '读取失败：{msg}',
+      'detail.sourceConclusion': '编辑结论',
+      'detail.sourceOverview': '项目概览',
+      'detail.sourceCredit': ' · 引用自 ',
+      'detail.sourceLicense': '（CC BY 4.0）',
+      'detail.translatedBy': ' · 中译由 DSH 模型生成，英文原文见下方',
+      'detail.analysisUpdated': '分析更新于 {date}',
+      'detail.kpiGained': '期间涨星',
+      'detail.kpiStart': '起点星数',
+      'detail.kpiEnd': '最新星数',
+      'detail.chartStart': '起点 {n}',
+      'detail.chartNow': '现在 {n}',
+      'detail.linkGithub': '↗ GitHub',
+      'detail.linkSource': '↗ hysenlabs',
+      'card.translating': '译',
+      'card.translatingTip': '中文翻译生成中',
+      'stats.pickerTitle': '选择项目',
+      'stats.pickTop': '前 {n}',
+      'stats.pickAll': '全选',
+      'stats.pickClear': '清空',
+      'stats.chartTitle': '本期涨幅走势对比',
+      'stats.axisHint': '纵轴：采样涨星（对称对数）',
+      'stats.linearAxis': '纵轴：采样涨星（线性 · 自动）',
+      'stats.gainTitle': '本期涨星对比',
+      'stats.gainHint': '榜单原始涨星数 · 横条从零起算',
+      'stats.sampleNote': '曲线由来源 SVG 还原，仅供趋势参考；各线从期内首个可用采样日起算，起始日见图例。精确涨星以上方榜单为准。坐标轴按当前所选项目自适应：同量级用线性，末端涨幅相差超过 10 倍用对称对数；头像引导线连接真实终点。',
+      'stats.unknownWindow': '未获得榜单日期范围，以下展示历史采样曲线。',
+      'stats.showAll': '展开全部 {n} 项',
+      'stats.showLess': '收起',
+      'stats.dailyTitle': '日涨星对比',
+      'stats.dailyAxis': '纵轴：当日涨星数（线性）',
+      'stats.dailyNote': '每个头像代表一个项目，位置越高，当日涨星越多；横轴按榜单名次排列。悬停或聚焦头像可查看项目及精确涨星数。',
+      'stats.emptyHint': '勾选左侧项目后这里会画出它们的走势对比',
+      'error.title': '取数失败',
+      'error.hint': '检查网络连接，然后点右上角「刷新」。',
+      'error.dailyHint': '数据每天更新一次，稍后重试即可。',
+      'error.stale': '本次取数失败（{err}），显示的是 {when} 的数据。',
+      'empty.noData': '暂无数据',
+      'empty.notFetched': '暂未取到数据',
+      'empty.partial': '暂未取到 · 显示 {n} 条',
+      'misc.stars': '星',
+      'misc.gainUnit': '涨',
+      'misc.topByRank': '按名次看每个项目',
+      'attribution': '',
+      'glance.translating': '正在努力翻译成中文…',
+      'glance.title': '一眼看懂',
+      'glance.what': '它是什么？',
+      'glance.who': '适合谁用？',
+      'glance.commercial': '可以商用吗？',
+      'glance.maintained': '还在维护吗？',
+      'glance.writtenIn': '用什么写的？',
+      'glance.footer': '内容来自项目公开数据与编辑分析，不构成法律意见。',
+      'settings.title': '设置',
+      'settings.tip': '插件设置',
+      'settings.version': '版本信息',
+      'settings.current': '当前版本',
+      'settings.latest': '最新版本',
+      'settings.checking': '检查中…',
+      'settings.upToDate': '已是最新',
+      'settings.localAhead': '本地为开发版（npm 上最新为 v{v}）',
+      'settings.hasUpdate': '有新版本',
+      'settings.updateTip': '有新版本 v{v} 可用',
+      'settings.updateHint': '升级命令：',
+      'settings.checkNow': '立即检查',
+      'settings.checkFailed': '检查失败：{msg}',
+      'settings.noNetwork': '暂时无法连接 npm',
+      'settings.close': '关闭',
+      'settings.repo': '项目主页',
+    },
+    en: {
+      'brand.title': 'GitHub Hot',
+      'brand.subtitle': 'Multi-project star growth',
+      'period.day': 'Daily',
+      'period.week': 'Weekly',
+      'period.month': 'Monthly',
+      'view.board': 'Ranking',
+      'view.stats': 'Stats',
+      'lang.zh': '中',
+      'lang.en': 'EN',
+      'lang.tipZh': 'Showing Chinese. Click for English',
+      'lang.tipEn': 'Showing English. Click for Chinese',
+      'theme.dark': 'Dark',
+      'theme.paper': 'Paper',
+      'theme.tipDark': 'Switch to dark theme',
+      'theme.tipPaper': 'Switch to paper sticker theme',
+      'action.refresh': 'Refresh',
+      'action.refreshing': 'Refreshing…',
+      'action.close': 'Close',
+      'status.updatedTo': 'Updated {date}',
+      'status.today': 'Today',
+      'status.justNow': 'just now',
+      'status.minutesAgo': '{n} min ago',
+      'status.hoursAgo': '{n} h ago',
+      'status.daysAgo': '{n} d ago',
+      'board.heroLabel': '{period} · TOP20 total gain',
+      'board.heroHint': 'Top: {repo} with {gain} stars',
+      'board.statAvg': 'TOP20 avg',
+      'board.statTop': 'Top gainer',
+      'board.statCount': 'Showing',
+      'board.countUnit': '{n}',
+      'board.topGain': 'Top gainer',
+      'detail.introTitle': 'About',
+      'detail.chartTitle': 'Star history',
+      'detail.loading': 'Loading…',
+      'detail.loadingIntro': 'Fetching and translating…',
+      'detail.noIntro': 'No description yet',
+      'detail.noChart': 'No star history available',
+      'detail.chartError': 'Failed to load chart: {msg}',
+      'detail.readError': 'Failed to load: {msg}',
+      'detail.sourceConclusion': 'Editorial take',
+      'detail.sourceOverview': 'Project overview',
+      'detail.sourceCredit': ' · via ',
+      'detail.sourceLicense': ' (CC BY 4.0)',
+      'detail.translatedBy': '',
+      'detail.analysisUpdated': 'Analysis updated {date}',
+      'detail.kpiGained': 'Gained',
+      'detail.kpiStart': 'Starting stars',
+      'detail.kpiEnd': 'Current stars',
+      'detail.chartStart': 'Start {n}',
+      'detail.chartNow': 'Now {n}',
+      'detail.linkGithub': '↗ GitHub',
+      'detail.linkSource': '↗ hysenlabs',
+      'card.translating': 'zh',
+      'card.translatingTip': 'Translating to Chinese',
+      'stats.pickerTitle': 'Select projects',
+      'stats.pickTop': 'Top {n}',
+      'stats.pickAll': 'All',
+      'stats.pickClear': 'Clear',
+      'stats.chartTitle': 'Growth comparison',
+      'stats.axisHint': 'Y-axis: sampled gain (symmetric log)',
+      'stats.linearAxis': 'Y-axis: sampled gain (linear · auto)',
+      'stats.gainTitle': 'Period star gains',
+      'stats.gainHint': 'Original ranking values · bars start at zero',
+      'stats.sampleNote': 'Trends are reconstructed from source SVGs. Each line starts at its first available sample in the period; see legend dates. Use the ranking above for exact gains. The axis adapts to selected projects: linear for comparable values, symmetric log when nonzero endpoint magnitudes differ by over 10×. Avatar guides connect to the true endpoints.',
+      'stats.unknownWindow': 'Ranking dates are unavailable; historical samples are shown below.',
+      'stats.showAll': 'Show all {n} projects',
+      'stats.showLess': 'Show less',
+      'stats.dailyTitle': 'Daily star gains',
+      'stats.dailyAxis': 'Y-axis: daily stars gained (linear)',
+      'stats.dailyNote': 'One avatar per project: higher means more stars gained that day. The x-axis follows ranking order. Hover or focus an avatar for its project and exact gain.',
+      'stats.emptyHint': 'Select projects to compare their trends',
+      'error.title': 'Failed to fetch',
+      'error.hint': 'Check your network, then click "Refresh".',
+      'error.dailyHint': 'Data updates once a day. Try again later.',
+      'error.stale': 'Fetch failed ({err}). Showing data from {when}.',
+      'empty.noData': 'No data',
+      'empty.notFetched': 'Not fetched yet',
+      'empty.partial': 'Partial · showing {n}',
+      'misc.stars': 'stars',
+      'misc.gainUnit': 'gain',
+      'misc.topByRank': 'Each project by rank',
+      'attribution': '',
+      'glance.translating': 'Translating to Chinese…',
+      'glance.title': 'At a glance',
+      'glance.what': 'What is it?',
+      'glance.who': 'Who is it for?',
+      'glance.commercial': 'Can I use it commercially?',
+      'glance.maintained': 'Is it still maintained?',
+      'glance.writtenIn': 'What is it written in?',
+      'glance.footer': 'Answers come from public project data and editorial analysis. Not legal advice.',
+      'settings.title': 'Settings',
+      'settings.tip': 'Plugin settings',
+      'settings.version': 'Version',
+      'settings.current': 'Current',
+      'settings.latest': 'Latest',
+      'settings.checking': 'Checking…',
+      'settings.upToDate': 'Up to date',
+      'settings.localAhead': 'Local dev build (npm latest v{v})',
+      'settings.hasUpdate': 'Update available',
+      'settings.updateTip': 'Version v{v} available',
+      'settings.updateHint': 'Upgrade with:',
+      'settings.checkNow': 'Check now',
+      'settings.checkFailed': 'Check failed: {msg}',
+      'settings.noNetwork': 'Cannot reach npm',
+      'settings.close': 'Close',
+      'settings.repo': 'Repository',
+    },
+  };
+
+  /**
+   * 取界面文案。找不到键时回退到中文，再找不到就返回键名本身
+   * （返回键名而不是空串，便于发现漏翻的地方）。
+   */
+  function translate(lang, key, vars) {
+    const table = COPY[lang] || COPY.zh;
+    let text = table[key];
+    if (text === undefined) text = COPY.zh[key];
+    if (text === undefined) return key;
+    if (vars) {
+      for (const [k, v] of Object.entries(vars)) {
+        text = text.split('{' + k + '}').join(String(v));
+      }
+    }
+    return text;
+  }
+
+  /**
+   * 比较两个版本号（忽略预发布后缀）。返回 1/0/-1。
+   * 与宿主侧 compareVersion 保持同一口径。
+   */
+  function cmpVersion(a, b) {
+    const norm = (v) => String(v || '').split('-')[0].split('.').map((x) => Number(x) || 0);
+    const pa = norm(a);
+    const pb = norm(b);
+    for (let i = 0; i < Math.max(pa.length, pb.length); i += 1) {
+      const x = pa[i] || 0;
+      const y = pb[i] || 0;
+      if (x > y) return 1;
+      if (x < y) return -1;
+    }
+    return 0;
+  }
+
   /**
    * 紧凑数字格式：1000 以上一律走 k，避免卡片里「3,988」和「13.2k」混排显得参差。
    * 注意保留一位小数但去掉多余的 .0（3,988 → 4.0k → 4k）。
@@ -186,13 +464,28 @@
    * 在 UTC-x 的时区里显示成「11月2日」。这里**直接切字符串**，日期串本来就是
    * 数据源的日期，不需要经过任何时区换算。
    */
-  function dataDateText(board) {
-    if (!board) return '今日';
+  function dataDateText(board, lang) {
+    const en = lang === 'en';
+    if (!board) return en ? 'today' : '今日';
     const raw = board.window && board.window.end ? board.window.end : board.week;
-    if (!raw) return '今日';
+    if (!raw) return en ? 'today' : '今日';
     const m = String(raw).match(/^(\d{4})-(\d{2})-(\d{2})/);
-    if (!m) return '今日';
-    return Number(m[2]) + '月' + Number(m[3]) + '日';
+    if (!m) return en ? 'today' : '今日';
+    const y = Number(m[1]);
+    const mo = Number(m[2]);
+    const d = Number(m[3]);
+    /**
+     * 日期写法按语言习惯分开 —— 直译会读着别扭：
+     *   中文：2026年11月4日（先说年，量词用「年/月/日」）
+     *   英文：Nov 4, 2026（月在前、日用序数直觉、年份放最后）
+     * 两者都精确到年，不会出现「11月3日」这种看不出是哪年的写法。
+     */
+    if (en) {
+      const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+      return MON[mo - 1] + ' ' + d + ', ' + y;
+    }
+    // 中文用紧凑写法「26.11.4」：两位年份 + 点分隔，一眼看完不占地方
+    return String(y).slice(2) + '.' + mo + '.' + d;
   }
 
   function fmtTime(iso) {
@@ -270,6 +563,11 @@
   --hp-shadow-hover:0 8px 24px rgba(0,0,0,.28);
   --hp-card-bg:var(--hp-surface);
   --hp-radius:13px;
+  /**
+   * 弹层（设置面板）的底色：**必须不透明**。
+   * 之前用了一个没定义的变量，回退到 transparent，面板直接透出下面的卡片内容。
+   */
+  --hp-panel:var(--dsw-alias-bg-layer-2,#1b1e24);
 }
 
 /* ---------- 纸感贴纸主题 ---------- */
@@ -290,6 +588,7 @@
   --hp-fg:var(--hp-ink);
   --hp-fg-2:#4a3f33;
   --hp-fg-3:#8a7a68;
+  --hp-panel:var(--hp-card);
   --hp-line:var(--hp-ink);
   --hp-sep:rgba(38,32,26,.16);
   --hp-border:2px solid var(--hp-ink);
@@ -366,6 +665,26 @@
 /* 上图下选：图表独占一行，勾选列表在下方横向铺开 */
 .hp-dash{display:flex;flex-direction:column;gap:12px;padding:16px 18px 28px}
 .hp-picker{border:var(--hp-border);border-radius:var(--hp-radius);background:var(--hp-card-bg);box-shadow:var(--hp-shadow);padding:11px 6px 8px;max-height:230px;overflow:auto}
+/* 快捷选择按钮行 */
+.hp-pick-actions{
+  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
+  padding:0 10px 9px;margin-bottom:6px;border-bottom:1px solid var(--hp-sep);
+}
+.hp-pick-btn{
+  padding:4px 10px;border-radius:7px;cursor:pointer;
+  font-size:11px;font-weight:550;line-height:1.5;
+  border:1px solid var(--hp-line);background:var(--hp-surface-2);color:var(--hp-fg-2);
+  transition:background .14s,border-color .14s,color .14s;
+}
+.hp-pick-btn:hover:not(:disabled){background:var(--hp-surface);border-color:var(--hp-fg-3);color:var(--hp-fg)}
+.hp-pick-btn:active:not(:disabled){transform:translateY(1px)}
+.hp-pick-btn:disabled{opacity:.4;cursor:default}
+.hp-pick-btn.clear{margin-left:auto;color:var(--hp-fg-3)}
+.hp-pick-btn.clear:hover:not(:disabled){color:var(--hp-up);border-color:var(--hp-up)}
+.hp-pick-sep{flex:1}
+.hp-root.hp-paper .hp-pick-btn{border:1.5px solid var(--hp-ink);background:var(--hp-card);color:var(--hp-ink)}
+.hp-root.hp-paper .hp-pick-btn.clear{border-color:rgba(38,32,26,.3)}
+
 .hp-picker-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1px 4px}
 .hp-picker-title{display:flex;justify-content:space-between;align-items:baseline;font-size:11.5px;font-weight:650;color:var(--hp-fg-3);padding:0 10px 8px;border-bottom:1px solid var(--hp-sep);margin-bottom:6px}
 .hp-picker-n{font-variant-numeric:tabular-nums}
@@ -398,6 +717,13 @@
 .hp-legend-item:hover,.hp-legend-item.act{background:var(--hp-surface-2);color:var(--hp-fg)}
 .hp-legend-line{width:16px;height:3px;border-radius:2px;flex:0 0 auto}
 .hp-mchart-note{font-size:11px;color:var(--hp-fg-3);margin-top:9px;line-height:1.5}
+.hp-gain-list{display:grid;gap:8px;margin-top:14px}
+.hp-gain-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(80px,2fr) 78px;gap:12px;align-items:center;font-size:12px}
+.hp-gain-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--hp-fg-2)}
+.hp-gain-track{height:7px;background:var(--hp-sep);border-radius:3px;overflow:hidden}
+.hp-gain-bar{height:100%;background:var(--hp-accent)}
+.hp-gain-value{text-align:right;font-variant-numeric:tabular-nums;color:var(--hp-fg)}
+@media(max-width:600px){.hp-gain-row{grid-template-columns:minmax(100px,1fr) minmax(40px,1fr) 64px;gap:8px}}
 
 
 /* ---------- 头像 ---------- */
@@ -406,6 +732,149 @@
 .hp-avatar-fb{display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:700;border-radius:9px;flex:0 0 auto;user-select:none}
 
 /* ---------- 右侧操作区 ---------- */
+/* 未译时的提示条：低调但明确，告诉用户「在翻了」而不是卡住 */
+.hp-tr-hint{
+  display:block;margin-bottom:4px;font-size:11px;font-weight:600;
+  color:var(--hp-accent);opacity:.9;letter-spacing:.01em;
+}
+.hp-tr-hint::after{content:'';display:inline-block;width:10px;text-align:left;animation:hp-dots 1.2s steps(4,end) infinite}
+@keyframes hp-dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
+@media (prefers-reduced-motion:reduce){.hp-tr-hint::after{animation:none;content:'…'}}
+.hp-glance-a.pending{opacity:.86}
+
+/* ---------- 详情页「一眼看懂」问答表 ---------- */
+.hp-glance{margin:0;padding:0;display:flex;flex-direction:column}
+.hp-glance-row{
+  display:grid;grid-template-columns:132px 1fr;gap:14px;
+  padding:11px 0;border-bottom:1px dashed var(--hp-sep);
+}
+.hp-glance-row:first-child{padding-top:2px}
+.hp-glance-row:last-child{border-bottom:none;padding-bottom:2px}
+.hp-glance-q{
+  font-size:11.5px;font-weight:600;color:var(--hp-fg-3);
+  line-height:1.5;margin:0;
+}
+.hp-glance-a{
+  margin:0;font-size:12.5px;line-height:1.65;color:var(--hp-fg);
+  /* 答案完整显示，不截断 —— 截断会丢掉「能不能商用」这类关键信息 */
+  overflow-wrap:anywhere;
+}
+.hp-root.hp-paper .hp-glance-q{color:var(--hp-ink);opacity:.62}
+.hp-root.hp-paper .hp-glance-row{border-bottom:1px dashed rgba(38,32,26,.22)}
+@media (max-width:760px){
+  .hp-glance-row{grid-template-columns:1fr;gap:3px}
+}
+
+/* ---------- 设置按钮与面板 ---------- */
+.hp-settings-btn{display:inline-flex;align-items:center;gap:6px;position:relative}
+.hp-gear{display:inline-flex;align-items:center;opacity:.75}
+.hp-settings-btn:hover .hp-gear{opacity:1}
+.hp-btn.hp-btn-update{
+  border-color:var(--hp-accent);color:var(--hp-accent);font-weight:600;
+  background:color-mix(in srgb, var(--hp-accent) 12%, transparent);
+}
+.hp-update-dot{
+  width:7px;height:7px;border-radius:50%;background:var(--hp-accent);display:inline-block;
+  box-shadow:0 0 0 0 color-mix(in srgb, var(--hp-accent) 60%, transparent);
+  animation:hp-pulse 1.8s ease-out infinite;
+}
+@keyframes hp-pulse{
+  0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--hp-accent) 60%, transparent)}
+  70%{box-shadow:0 0 0 7px transparent}
+  100%{box-shadow:0 0 0 0 transparent}
+}
+@media (prefers-reduced-motion:reduce){.hp-update-dot{animation:none}}
+/* ---------- 设置面板（重新设计）---------- */
+.hp-settings-mask{
+  position:fixed;inset:0;z-index:70;display:flex;align-items:flex-start;justify-content:flex-end;
+  padding:54px 20px 0;background:rgba(10,12,16,.46);backdrop-filter:blur(4px);
+  animation:hp-fade .14s ease-out;
+}
+.hp-root.hp-paper .hp-settings-mask{background:rgba(38,32,26,.38)}
+@keyframes hp-fade{from{opacity:0}to{opacity:1}}
+
+.hp-settings{
+  width:340px;max-width:calc(100vw - 40px);max-height:calc(100vh - 92px);overflow:auto;
+  background:var(--hp-panel,#1b1e24);
+  border:1px solid var(--hp-line);border-radius:16px;
+  box-shadow:0 24px 64px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.04);
+  position:relative;z-index:1;
+  animation:hp-rise .2s cubic-bezier(.22,.61,.36,1);
+}
+.hp-root.hp-paper .hp-settings{
+  background:var(--hp-card);border:2px solid var(--hp-ink);
+  box-shadow:7px 7px 0 var(--hp-ink);
+}
+@keyframes hp-rise{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
+
+/* 头部 */
+.hp-set-head{
+  display:flex;align-items:center;justify-content:space-between;
+  padding:15px 18px 12px;
+}
+.hp-set-title{font-size:14px;font-weight:650;letter-spacing:.01em;color:var(--hp-fg)}
+.hp-set-x{
+  display:inline-flex;align-items:center;justify-content:center;
+  width:26px;height:26px;border-radius:8px;border:none;cursor:pointer;
+  background:transparent;color:var(--hp-fg-3);transition:background .15s,color .15s;
+}
+.hp-set-x:hover{background:var(--hp-surface-2);color:var(--hp-fg)}
+
+/* 版本对比卡片：当前 → 最新 并排 */
+.hp-set-ver{
+  display:flex;align-items:center;gap:10px;
+  margin:0 18px;padding:13px 15px;border-radius:12px;
+  background:var(--hp-surface-2);
+}
+.hp-root.hp-paper .hp-set-ver{background:#fff9ec;border:1.5px solid rgba(38,32,26,.1)}
+.hp-set-ver-item{flex:1;min-width:0}
+.hp-set-ver-k{font-size:10.5px;color:var(--hp-fg-3);margin-bottom:3px;letter-spacing:.02em}
+.hp-set-ver-v{
+  font-family:ui-monospace,'SF Mono',Menlo,monospace;
+  font-size:16px;font-weight:650;color:var(--hp-fg);line-height:1.2;
+  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+}
+.hp-set-ver-v.new{color:var(--hp-accent)}
+.hp-set-ver-arrow{color:var(--hp-fg-3);font-size:13px;opacity:.55;flex:0 0 auto}
+
+/* 状态条 */
+.hp-set-note{
+  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
+  margin:12px 18px 0;font-size:11.5px;line-height:1.5;color:var(--hp-fg-2);
+}
+.hp-set-note.ok{color:var(--hp-down)}
+.hp-set-note.update{color:var(--hp-accent);font-weight:600}
+.hp-set-note.local{color:var(--hp-fg-2)}
+.hp-set-note.warn{color:var(--hp-up)}
+.hp-set-dot{width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:currentColor}
+
+/* 升级命令 */
+.hp-set-cmd{margin:10px 18px 0}
+.hp-set-cmd-k{font-size:10.5px;color:var(--hp-fg-3);margin-bottom:5px}
+.hp-set-cmd code{
+  display:block;padding:9px 11px;border-radius:9px;
+  background:var(--hp-surface-2);border:1px solid var(--hp-sep);
+  font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:10.5px;
+  line-height:1.6;word-break:break-all;color:var(--hp-fg);
+}
+.hp-root.hp-paper .hp-set-cmd code{background:#fff9ec}
+
+/* 底部操作 */
+.hp-set-foot{display:flex;gap:8px;padding:16px 18px 17px}
+.hp-set-btn{
+  flex:1;padding:8px 12px;border-radius:9px;cursor:pointer;
+  font-size:11.5px;font-weight:550;text-align:center;text-decoration:none;
+  border:1px solid var(--hp-line);background:var(--hp-surface-2);color:var(--hp-fg);
+  transition:background .15s,border-color .15s,transform .1s;
+}
+.hp-set-btn:hover:not(:disabled){background:var(--hp-surface);border-color:var(--hp-fg-3)}
+.hp-set-btn:active:not(:disabled){transform:translateY(1px)}
+.hp-set-btn:disabled{opacity:.55;cursor:default}
+.hp-set-btn.ghost{background:transparent;color:var(--hp-fg-2)}
+.hp-set-btn.ghost:hover{color:var(--hp-fg)}
+.hp-root.hp-paper .hp-set-btn{border:1.5px solid var(--hp-ink);box-shadow:2px 2px 0 var(--hp-ink);background:var(--hp-card)}
+.hp-root.hp-paper .hp-set-btn.ghost{box-shadow:none;border-color:rgba(38,32,26,.35)}
+
 /* ---------- 数据署名（CC BY 4.0 要求，放右下角不干扰主视觉）---------- */
 .hp-attr{
   display:flex;justify-content:flex-end;align-items:center;gap:5px;
@@ -432,6 +901,11 @@
 .hp-desc.zh{font-family:var(--dsw-font,-apple-system,'PingFang SC','Microsoft YaHei',sans-serif);letter-spacing:.01em;line-height:1.65}
 .hp-intro.zh{font-size:13.5px;line-height:1.75;color:var(--hp-fg)}
 .hp-intro-en{font-size:12px;line-height:1.65;color:var(--hp-fg-3);margin-top:10px;padding-top:9px;border-top:1px dashed var(--hp-sep)}
+@media(max-width:900px){
+  .hp-head{flex-wrap:wrap;overflow:visible}
+  .hp-head .hp-spacer{display:none}
+  .hp-head>.hp-actions{flex:1 1 auto;flex-wrap:wrap;margin-left:0}
+}
 
 /* ---------- 首屏主角（先给答案）---------- */
 .hp-hero{display:flex;gap:18px;align-items:stretch;padding:18px 20px 6px;flex-wrap:wrap}
@@ -681,7 +1155,8 @@
     const { React, chart } = props;
     const h = React.createElement;
     if (!chart || !Array.isArray(chart.series) || chart.series.length < 3) {
-      return h('div', { className: 'hp-chart-empty' }, '暂无星数曲线数据');
+      const t = (k, v) => translate(props.lang, k, v);
+      return h('div', { className: 'hp-chart-empty' }, t('detail.noChart'));
     }
     const W = 560;
     const H = 190;
@@ -747,9 +1222,13 @@
       h(
         'div',
         { className: 'hp-chart-legend' },
-        h('span', null, '起点 ' + fmtCount(first)),
+        h('span', null, (props.lang === 'en'
+          ? 'Start ' + fmtCount(first)
+          : '起点 ' + fmtCount(first))),
         h('span', { style: { color: '#ff8a90', fontWeight: 650 } }, '+' + fmtCount(gained) + ' ★'),
-        h('span', null, '现在 ' + fmtCount(last)),
+        h('span', null, (props.lang === 'en'
+          ? 'Now ' + fmtCount(last)
+          : '现在 ' + fmtCount(last))),
       ),
     );
   }
@@ -892,13 +1371,13 @@
           'div',
           { className: 'hp-gain' },
           h('div', { className: 'hp-gain-v ' + gainTone(item.starsGained) }, '+' + fmtCount(item.starsGained)),
-          h('div', { className: 'hp-gain-s' }, share >= 60 ? '本期最猛' : item.endStars ? fmtCount(item.endStars) + ' stars' : ''),
+          h('div', { className: 'hp-gain-s' }, share >= 60 ? translate(props.lang, 'board.topGain') : item.endStars ? fmtCount(item.endStars) + ' stars' : ''),
         ),
       ),
       // ── 简介：有才渲染 ──
       desc
         ? h('p', { className: 'hp-desc' + (descZh ? ' zh' : '') }, desc,
-            translating ? h('span', { className: 'hp-zh-pending', title: '中文翻译生成中' }, ' 译') : null)
+            translating ? h('span', { className: 'hp-zh-pending', title: translate(props.lang, 'card.translatingTip') }, translate(props.lang, 'card.translating')) : null)
         : // 还没取完：骨架；取完了却什么都没有（没有该项目分析）：留空不占位
           detail && detail.settled
           ? null
@@ -936,7 +1415,7 @@
             { className: 'hp-sub' },
             item.language ? h('span', { className: 'hp-chip' }, item.language) : null,
             item.license ? h('span', { className: 'hp-chip' }, item.license) : null,
-            d.analysisUpdated ? h('span', { style: { opacity: 0.7 } }, '分析更新于 ' + d.analysisUpdated) : null,
+            d.analysisUpdated ? h('span', { style: { opacity: 0.7 } }, translate(props.lang, 'detail.analysisUpdated', { date: d.analysisUpdated })) : null,
           ),
         ),
         h('div', { className: 'hp-gain', style: { marginLeft: 'auto' } },
@@ -948,27 +1427,74 @@
       h(
         'div',
         { className: 'hp-detail-body' },
-        // 左：简介
+        // 左：一眼看懂（结构化问答）
         h(
           'div',
           { className: 'hp-pane' },
-          h('div', { className: 'hp-pane-title' }, '项目简介'),
+          h('div', { className: 'hp-pane-title' }, translate(props.lang, 'glance.title')),
           loading
-            ? h('div', { className: 'hp-intro none' }, '正在读取并翻译中…')
-            : h(
-                'div',
-                null,
-                d.descZh
-                  ? h('div', { className: 'hp-intro zh' }, d.descZh)
-                  : null,
-                d.desc
-                  ? h(
+            ? h('div', { className: 'hp-intro none' }, translate(props.lang, 'detail.loadingIntro'))
+            : (() => {
+                /**
+                 * 把 glance 的问答渲染成表格式。
+                 *
+                 * 只显示一段「What is it?」会把「能不能商用」「还在维护吗」这些
+                 * 用户最关心的信息丢掉，而且长段落还会被截断。改成一组问答，
+                 * 每条答案完整显示（不截断），扫一眼就知道项目底细。
+                 *
+                 * 问题文本按语言映射到本地化标题；映射不到的原样显示（保证不漏内容）。
+                 */
+                const items = Array.isArray(d.glance) ? d.glance : [];
+                if (items.length === 0) {
+                  return d.desc
+                    ? h('div', { className: 'hp-intro' }, d.desc)
+                    : h('div', { className: 'hp-intro none' }, error ? translate(props.lang, 'detail.readError', { msg: error }) : translate(props.lang, 'detail.noIntro'));
+                }
+                /**
+                 * 只展示这三条。
+                 *
+                 * 「可以商用吗」「还在维护吗」去掉了：前者是法律判断、后者是会过期的
+                 * 时效信息，放在这个面板里容易被当成保证。项目主页/许可证标签已经
+                 * 足够回答这两个问题，想深究的人可以点 ↗ hysenlabs 看原文。
+                 */
+                const QMAP = {
+                  'what is it?': 'glance.what',
+                  'who is it for?': 'glance.who',
+                  'what is it written in?': 'glance.writtenIn',
+                };
+                // 只保留这三条；译文按原始下标对齐（glanceZh 与 items 等长）
+                const zhList = Array.isArray(d.glanceZh) ? d.glanceZh : [];
+                const show = items
+                  .map((qa, idx) => ({ qa, idx }))
+                  .filter(({ qa }) => QMAP[String(qa.q).trim().toLowerCase()]);
+                return h(
+                  'dl',
+                  { className: 'hp-glance' },
+                  ...show.map(({ qa, idx }) => {
+                    const key = QMAP[String(qa.q).trim().toLowerCase()];
+                    const label = translate(props.lang, key) || qa.q;
+                    /**
+                     * 中文模式下优先显示译文；没译文就先用英文顶着（不空白、不等待）。
+                     * 英文模式始终显示原文。
+                     */
+                    const zh = zhList[idx];
+                    const answer = props.lang === 'en' ? qa.a : (zh || qa.a);
+                    // 中文模式但这条还没译文 → 在答案上方标一行「正在努力翻译」
+                    const pending = props.lang !== 'en' && !zh;
+                    return h(
                       'div',
-                      { className: d.descZh ? 'hp-intro-en' : 'hp-intro' },
-                      d.desc,
-                    )
-                  : h('div', { className: 'hp-intro none' }, error ? '读取失败：' + error : '暂无简介'),
-              ),
+                      { className: 'hp-glance-row', key: idx },
+                      h('dt', { className: 'hp-glance-q' }, label),
+                      h(
+                        'dd',
+                        { className: 'hp-glance-a' + (pending ? ' pending' : '') },
+                        pending ? h('span', { className: 'hp-tr-hint' }, translate(props.lang, 'glance.translating')) : null,
+                        answer,
+                      ),
+                    );
+                  }),
+                );
+              })(),
           /**
            * 简介的来源说明。
            *
@@ -976,23 +1502,21 @@
            * 它不是本项目原创。所以明确写出「引用自 Hysen Labs」并带上链接，
            * 同时说明中译是谁做的、原文在哪。
            */
-          d.descSource === 'conclusion' || d.descSource === 'overview'
+          d.glance && d.glance.length > 0
             ? h(
                 'div',
                 { className: 'hp-srcline' },
-                h('span', null, d.descSource === 'conclusion' ? '编辑结论' : '项目概览'),
-                ' · 引用自 ',
-                h('a', { href: item.hysenUrl || 'https://hysenlabs.com', target: '_blank', rel: 'noreferrer' }, 'Hysen Labs'),
-                '（CC BY 4.0）',
-                d.descZh ? ' · 中译由 DSH 模型生成，英文原文见下方' : '',
+                translate(props.lang, 'glance.footer'),
+                ' ',
+                h('a', { href: item.hysenUrl || 'https://hysenlabs.com', target: '_blank', rel: 'noreferrer' }, 'Hysen Labs · CC BY 4.0'),
               )
             : null,
           h(
             'div',
             { className: 'hp-kpis' },
-            h('div', { className: 'hp-kpi' }, h('div', { className: 'hp-kpi-k' }, '期间涨星'), h('div', { className: 'hp-kpi-v up' }, '+' + fmtCount(item.starsGained))),
-            h('div', { className: 'hp-kpi' }, h('div', { className: 'hp-kpi-k' }, '起点星数'), h('div', { className: 'hp-kpi-v' }, fmtCount(item.startStars))),
-            h('div', { className: 'hp-kpi' }, h('div', { className: 'hp-kpi-k' }, '最新星数'), h('div', { className: 'hp-kpi-v' }, fmtCount(item.endStars))),
+            h('div', { className: 'hp-kpi' }, h('div', { className: 'hp-kpi-k' }, translate(props.lang, 'detail.kpiGained')), h('div', { className: 'hp-kpi-v up' }, '+' + fmtCount(item.starsGained))),
+            h('div', { className: 'hp-kpi' }, h('div', { className: 'hp-kpi-k' }, translate(props.lang, 'detail.kpiStart')), h('div', { className: 'hp-kpi-v' }, fmtCount(item.startStars))),
+            h('div', { className: 'hp-kpi' }, h('div', { className: 'hp-kpi-k' }, translate(props.lang, 'detail.kpiEnd')), h('div', { className: 'hp-kpi-v' }, fmtCount(item.endStars))),
           ),
           h(
             'div',
@@ -1008,9 +1532,14 @@
         h(
           'div',
           { className: 'hp-pane' },
-          h('div', { className: 'hp-pane-title' }, '星数曲线'),
-          loading ? h('div', { className: 'hp-chart-empty' }, '加载中…') : h(StarChart, { React, chart: d.chart }),
-          d.chartError && !d.chart ? h('div', { className: 'hp-chart-empty' }, '曲线读取失败：' + d.chartError) : null,
+          h('div', { className: 'hp-pane-title' }, translate(props.lang, 'detail.chartTitle')),
+          loading || d.chartPending
+            ? h('div', { className: 'hp-chart-empty' }, translate(props.lang, 'detail.loading'))
+            : h(StarChart, { React, lang: props.lang, chart: d.chart }),
+          // 只有真的失败了才报错；pending 时上面已经显示「加载中」，不重复报
+          d.chartError && !d.chart && !d.chartPending
+            ? h('div', { className: 'hp-chart-empty' }, translate(props.lang, 'detail.chartError', { msg: d.chartError }))
+            : null,
         ),
       ),
     );
@@ -1021,25 +1550,36 @@
   /** 多曲线对比用的色板（8 条以内，之后循环）。 */
   const SERIES_COLORS = ['#3a6fe0', '#30a46c', '#e8b53a', '#e5484d', '#7b5cff', '#12a594', '#f76b15', '#8e4ec6'];
 
+  function comparisonSamples(chart, start, end) {
+    const byDate = new Map();
+    for (const p of chart && Array.isArray(chart.series) ? chart.series : []) {
+      const ts = p && Date.parse(p.date);
+      if (!Number.isFinite(ts) || !Number.isFinite(p.stars)) continue;
+      if (Number.isFinite(start) && ts < start) continue;
+      if (Number.isFinite(end) && ts > end) continue;
+      byDate.set(p.date, p);
+    }
+    return [...byDate.values()].sort((a, b) => a.date.localeCompare(b.date));
+  }
+
   /**
    * 统计视图 —— 多项目星数曲线对比。
    *
-   * 左栏：勾选要看哪些项目（默认前 6 个），每项显示本期涨星；
-   * 右栏：把选中项目的曲线**按真实日期对齐**后叠在同一张图上。
-   *
-   * 两个必须守住的点：
-   *   1. **按日期对齐**，不是按点序号 —— 各项目起始日不同，按序号叠会错位。
-   *   2. **两种量纲分开**：绝对星数（谁体量大）与本期涨幅（谁涨得猛）是两个问题，
-   *      用分段器切换，不混在一张图里比。
+   * 先用榜单原始数值比较本期涨星，再用期内采样曲线观察趋势。
+   * 曲线按真实日期对齐；来源是 SVG 还原值，不能替代榜单精确值。
    */
   function Dashboard(props) {
     const { React } = props;
     const h = React.createElement;
     const { rows, charts, lang, periodKey } = props;
+    const isDaily = periodKey === 'day';
+    const windowStart = props.window && props.window.start ? Date.parse(props.window.start) : NaN;
+    const windowEnd = props.window && props.window.end ? Date.parse(props.window.end) : NaN;
 
     // 选项给全部（最多 20 条榜单），默认对比前 10 个 —— 再多线会糊成一团
     const [picked, setPicked] = React.useState(() => new Set((rows || []).slice(0, DEFAULT_COMPARE).map((r) => r.repository)));
     const [hover, setHover] = React.useState(null);
+    const [showAllGains, setShowAllGains] = React.useState(false);
 
     // 数据换了一批（切榜单）时重置选择
     React.useEffect(() => {
@@ -1055,72 +1595,51 @@
       });
     };
 
-    /** 取出选中项目的序列，并统一到全局时间轴。 */
     /**
-     * 把选中项目的曲线整理成可对比的序列。
+     * 批量勾选：0 = 清空，其他 = 选中名次最前的 n 个。
      *
-     * 基准口径：
-     *   1. 所有曲线用**同一天**当零点 —— 取所有选中项目里「最早出现的公共日期」。
-     *      这样 9 月一起爆发和 8 月就起量的项目，是在同一条时间尺度上比。
-     *   2. **不从 0 开始也没关系**：每条线从它自己第一次有数据那天开始画，
-     *      中途才起来的项目就是坐标轴中间才冒出来的一条线，不需要从最左边硬接。
-     *   3. 某个项目在基准日**还没有数据**时，用它最早那个点补齐起算
-     *      （不做插值，不编数据；就是"它进榜那天"起算）。
+     * 只选**有曲线的**项目 —— 没曲线的勾上也不会画线，等于白勾，
+     * 用户会以为按钮没生效。
      */
+    const onPickPreset = React.useCallback((n) => {
+      if (!n || n <= 0) {
+        setPicked(new Set());
+        return;
+      }
+      const candidates = (rows || []).filter((r) => {
+        if (isDaily) return true;
+        // charts[repo] 是 { series: [...] }，曲线数组在 .series 上（不是对象本身）
+        const c = charts && charts[r.repository];
+        return Array.isArray(c && c.series) && comparisonSamples(c, windowStart, windowEnd).length >= 2;
+      });
+      setPicked(new Set(candidates.slice(0, Math.min(n, MAX_COMPARE)).map((r) => r.repository)));
+    }, [rows, charts, windowStart, windowEnd, isDaily]);
+
+    // 只用榜单周期内的实际采样点；不补造缺失的日期或星数。
     const seriesList = React.useMemo(() => {
       const raw = [];
       for (const row of rows || []) {
         if (!picked.has(row.repository)) continue;
         const chart = charts && charts[row.repository];
-        if (!chart || !Array.isArray(chart.series) || chart.series.length < 3) continue;
-        const dated = chart.series.filter((p) => p && typeof p.date === 'string');
-        if (dated.length < 3) continue;
-        raw.push({ row, points: dated.slice().sort((a, b) => (a.date < b.date ? -1 : 1)) });
-      }
-      if (raw.length === 0) return [];
-
-      // 基准日 = 所有曲线里「最晚的起始日」（保证每条线在这个日子上都有或即将有数据）
-      // 与「最早的公共日」相比，取**最晚起始日**能让每条线都有完整的一段，
-      // 不会出现某条线在基准日还没出生、导致整段缺口。
-      let baseDate = raw[0].points[0].date;
-      for (const series of raw) {
-        const first = series.points[0].date;
-        if (first > baseDate) baseDate = first;
+        if (!chart || !Array.isArray(chart.series)) continue;
+        const points = comparisonSamples(chart, windowStart, windowEnd);
+        if (points.length < 2) continue;
+        const baseStars = points[0].stars;
+        raw.push({
+          repo: row.repository,
+          color: SERIES_COLORS[(rows || []).indexOf(row) % SERIES_COLORS.length],
+          points: points.map((p) => ({ date: p.date, stars: p.stars, gained: p.stars - baseStars })),
+          baseDate: points[0].date,
+          row,
+        });
       }
+      return raw;
+    }, [rows, charts, picked, windowStart, windowEnd]);
 
-      return raw.map((series, idx) => {
-        // 基准日之前没有数据的项目：用它的第一个点作为自己的起算点（不从 0 硬补）
-        const startIdx = series.points.findIndex((p) => p.date >= baseDate);
-        const from = startIdx >= 0 ? startIdx : 0;
-        const baseStars = series.points[from].stars;
-        return {
-          repo: series.row.repository,
-          color: SERIES_COLORS[idx % SERIES_COLORS.length],
-          // 每条线只保留**基准日之后**的点；起点那天值记 0
-          points: series.points.slice(from).map((p) => ({
-            date: p.date,
-            stars: p.stars,
-            gained: p.stars - baseStars,
-          })),
-          baseDate: series.points[from].date,
-          row: series.row,
-        };
-      });
-    }, [rows, charts, picked]);
-
-    /** 全局时间范围与量程。 */
-    /**
-     * 纵轴用**对数坐标**。
-     *
-     * 为什么：单条项目的涨幅可能比别人大一个量级（+425k vs +30k），线性坐标会把
-     * 其余九条全压成贴着底边的一条线，完全看不出形状。对数下 1k→10k→100k 等距，
-     * 大项目和小项目各自的走势都读得出来。
-     *
-     * 关键细节：涨幅可能从 0 开始，而 log(0) 无定义 —— 所以统一用 log(1 + 涨幅)，
-     * 起点处正好是 0，不会出现 NaN。
-     */
+    // 对称对数保留掉星；普通 log(max(0, v)) 会把所有负增长画成零。
     const LOG_BASE = 1;
-    const logV = (v) => Math.log10(Math.max(0, v) + LOG_BASE);
+    const logV = (v) => Math.sign(v) * Math.log10(Math.abs(v) + LOG_BASE);
+    const signed = (v) => (v > 0 ? '+' : '') + fmtCount(v);
     const frame = React.useMemo(() => {
       if (seriesList.length === 0) return null;
       let minDate = Infinity;
@@ -1137,37 +1656,64 @@
           if (v > maxV) maxV = v;
         }
       }
-      /**
-       * 对数轴的可视范围。
-       *
-       * 关键：**下界不取 0**。所有曲线都从 0 出发会让十条线在最左边挤成一坨，
-       * 而且下面那一大片空白完全是浪费。这里从「最小涨幅」再往下留半个数量级的余量，
-       * 曲线就能撑满整个绘图区。
-       *
-       * 上界同理留一点余量，免得最高的那条贴顶被裁掉。
-       */
+      const magnitudes = seriesList.map((s) => Math.abs(s.points[s.points.length - 1].gained)).filter((v) => v > 0);
+      const useLog = magnitudes.length > 1 && Math.max(...magnitudes) / Math.min(...magnitudes) > 10;
+      if (!useLog) {
+        const rawStep = Math.max(1, (maxV - minV) / 4);
+        const unit = Math.pow(10, Math.floor(Math.log10(rawStep)));
+        const step = [1, 2, 5, 10].find((n) => n * unit >= rawStep) * unit;
+        const lo = Math.floor(Math.min(0, minV) / step) * step;
+        const hi = Math.max(lo + step, Math.ceil(Math.max(0, maxV) / step) * step);
+        return { minDate, maxDate, minV, maxV, lo, hi, step, useLog };
+      }
       const loRaw = logV(minV);
       const hiRaw = logV(maxV);
       const pad = Math.max(0.12, (hiRaw - loRaw) * 0.06);
       const lo = loRaw - pad;
       const hi = hiRaw > loRaw ? hiRaw + pad : loRaw + 1;
-      return { minDate, maxDate, minV, maxV, lo, hi };
+      return { minDate, maxDate, minV, maxV, lo, hi, useLog };
     }, [seriesList]);
 
     const ready = rows && rows.length > 0;
+    const maxGain = Math.max(1, ...(rows || []).map((r) => Math.abs(r.starsGained)));
 
     // ── 左栏：项目勾选列表 ──
     const picker = h(
       'aside',
       { className: 'hp-picker' },
-      h('div', { className: 'hp-picker-title' }, '选择项目', h('span', { className: 'hp-picker-n' }, picked.size + ' / ' + MAX_COMPARE)),
+      // 快捷按钮需要回调，见下方 onPickPreset
+      h('div', { className: 'hp-picker-title' }, translate(props.lang, 'stats.pickerTitle'), h('span', { className: 'hp-picker-n' }, picked.size + ' / ' + MAX_COMPARE)),
+      /**
+       * 快捷选择：一次勾 5 个 / 10 个 / 全部，或者一键清空。
+       * 20 个项目逐个点太累，这里按「名次顺序」批量选中（前 N 名通常才是最值得比的）。
+       */
+      h('div', { className: 'hp-pick-actions' },
+        h('button', {
+          className: 'hp-pick-btn',
+          onClick: () => onPickPreset(5),
+        }, translate(props.lang, 'stats.pickTop', { n: 5 })),
+        h('button', {
+          className: 'hp-pick-btn',
+          onClick: () => onPickPreset(10),
+        }, translate(props.lang, 'stats.pickTop', { n: 10 })),
+        h('button', {
+          className: 'hp-pick-btn',
+          onClick: () => onPickPreset(MAX_COMPARE),
+        }, translate(props.lang, 'stats.pickAll')),
+        h('span', { className: 'hp-pick-sep' }),
+        h('button', {
+          className: 'hp-pick-btn clear',
+          onClick: () => onPickPreset(0),
+          disabled: picked.size === 0,
+        }, translate(props.lang, 'stats.pickClear')),
+      ),
       h(
         'div',
         { className: 'hp-picker-list' },
         (rows || []).map((row) => {
           const on = picked.has(row.repository);
           // charts 是 details[repo] = { desc, chart, ... }，曲线在 .chart.series
-          const hasChart = charts && charts[row.repository] && Array.isArray(charts[row.repository].series);
+          const hasChart = isDaily || comparisonSamples(charts && charts[row.repository], windowStart, windowEnd).length >= 2;
           const color = seriesList.find((s) => s.repo === row.repository)?.color;
           return h(
             'label',
@@ -1175,7 +1721,7 @@
             h('input', {
               type: 'checkbox',
               checked: on,
-              disabled: !hasChart,
+              disabled: !hasChart && !on,
               onChange: () => toggle(row.repository),
             }),
             h('span', { className: 'hp-pick-dot', style: color ? { background: color } : undefined }),
@@ -1189,17 +1735,59 @@
 
     // ── 右栏：多曲线图 ──
     const W = 760;
-    const H = 340;
-    const PAD = { l: 54, r: 16, t: 18, b: 30 };
+    const H = isDaily ? 340 : Math.max(340, seriesList.length * 22 + 48);
+    const PAD = { l: 54, r: isDaily ? 16 : 52, t: 18, b: 30 };
     let chartNode = null;
-    if (seriesList.length === 0) {
-      chartNode = h('div', { className: 'hp-chart-empty' }, '勾选左侧项目后这里会画出它们的走势对比');
+    if (isDaily && picked.size > 0) {
+      const dailyRows = (rows || []).filter((r) => picked.has(r.repository));
+      const rawMin = Math.min(0, ...dailyRows.map((r) => r.starsGained));
+      const rawMax = Math.max(1, ...dailyRows.map((r) => r.starsGained));
+      const tickBase = Math.pow(10, Math.floor(Math.log10((rawMax - rawMin) / 4)));
+      const tickStep = Math.max(1, Math.ceil((rawMax - rawMin) / 4 / tickBase) * tickBase);
+      const min = Math.floor(rawMin / tickStep) * tickStep;
+      const max = Math.ceil(rawMax / tickStep) * tickStep;
+      const span = max - min;
+      const py = (value) => H - PAD.b - (value - min) / span * (H - PAD.t - PAD.b - 18);
+      const px = (row) => PAD.l + ((dailyRows.indexOf(row) + 0.5) / dailyRows.length) * (W - PAD.l - PAD.r);
+      const hovered = dailyRows.find((r) => r.repository === hover);
+      chartNode = h('div', { className: 'hp-mchart' },
+        h('svg', { viewBox: '0 0 ' + W + ' ' + H, className: 'hp-mchart-svg', role: 'img', 'aria-label': translate(lang, 'stats.dailyTitle') },
+          Array.from({ length: Math.round(span / tickStep) + 1 }, (_, i) => min + i * tickStep).map((value) => {
+            return h('g', { key: value },
+              h('line', { x1: PAD.l, x2: W - PAD.r, y1: py(value), y2: py(value), className: value === 0 ? 'hp-zero' : 'hp-grid' }),
+              h('text', { x: PAD.l - 8, y: py(value) + 3.5, textAnchor: 'end', className: 'hp-axis' }, signed(value)),
+            );
+          }),
+          dailyRows.map((row) => {
+            const x = px(row), y = py(row.starsGained);
+            const owner = row.repository.split('/')[0];
+            const label = row.repository + ' · ' + (row.starsGained > 0 ? '+' : '') + row.starsGained.toLocaleString(lang === 'en' ? 'en-US' : 'zh-CN');
+            const color = SERIES_COLORS[rows.indexOf(row) % SERIES_COLORS.length];
+            const clipId = 'hp-daily-av-' + row.rank;
+            return h('g', { key: row.repository, tabIndex: 0, role: 'img', 'aria-label': label,
+              onMouseEnter: () => setHover(row.repository), onMouseLeave: () => setHover(null),
+              onFocus: () => setHover(row.repository), onBlur: () => setHover(null),
+              opacity: hover && hover !== row.repository ? 0.35 : 1 },
+              h('title', null, label),
+              h('defs', null, h('clipPath', { id: clipId }, h('circle', { cx: x, cy: y, r: 11 }))),
+              h('circle', { cx: x, cy: y, r: 12, fill: color }),
+              h('text', { x, y: y + 3.5, textAnchor: 'middle', fill: '#fff', fontSize: 10 }, owner.slice(0, 1).toUpperCase()),
+              h('image', { className: 'hp-daily-avatar', href: BASE + '/avatar?owner=' + encodeURIComponent(owner), x: x - 11, y: y - 11, width: 22, height: 22, clipPath: 'url(#' + clipId + ')', preserveAspectRatio: 'xMidYMid slice' }),
+              h('circle', { cx: x, cy: y, r: 12, fill: 'none', stroke: color, strokeWidth: hover === row.repository ? 3 : 1.5 }),
+              h('text', { x, y: H - 9, textAnchor: 'middle', className: 'hp-axis' }, '#' + row.rank),
+            );
+          }),
+          hovered ? h('text', { x: W / 2, y: 15, textAnchor: 'middle', className: 'hp-axis' }, hovered.repository + ' · ' + (hovered.starsGained > 0 ? '+' : '') + hovered.starsGained.toLocaleString(lang === 'en' ? 'en-US' : 'zh-CN')) : null,
+        ),
+      );
+    } else if (isDaily || seriesList.length === 0) {
+      chartNode = h('div', { className: 'hp-chart-empty' }, translate(props.lang, 'stats.emptyHint'));
     } else if (frame) {
-      const { minDate, maxDate, minV, maxV, lo, hi } = frame;
+      const { minDate, maxDate, minV, maxV, lo, hi, step, useLog } = frame;
       const spanX = maxDate - minDate || 1;
       const px = (date) => PAD.l + ((Date.parse(date) - minDate) / spanX) * (W - PAD.l - PAD.r);
       /** 值 → 屏幕 y（对数）。 */
-      const py = (v) => H - PAD.b - ((logV(v) - lo) / (hi - lo)) * (H - PAD.t - PAD.b);
+      const py = (v) => H - PAD.b - (((useLog ? logV(v) : v) - lo) / (hi - lo)) * (H - PAD.t - PAD.b);
       const val = (p) => p.gained;
 
       /**
@@ -1207,29 +1795,52 @@
        * 只保留落在可视范围内的那些，最多 7 条 —— 这就是对数图的读法。
        */
       const decadeTicks = [];
+      if (lo <= 0 && hi >= 0) decadeTicks.push({ value: 0, y: py(0) });
       for (let e = 0; e <= 7; e += 1) {
         const value = Math.pow(10, e);
         if (logV(value) >= lo - 0.001 && logV(value) <= hi + 0.001) {
           decadeTicks.push({ value, y: py(value) });
         }
+        if (logV(-value) >= lo - 0.001 && logV(-value) <= hi + 0.001) {
+          decadeTicks.push({ value: -value, y: py(-value) });
+        }
       }
       // 范围太窄（一个量级以内）时补中间刻度，避免只有一条线
-      const gridLines = decadeTicks.length >= 2
+      const gridLines = !useLog
+        ? Array.from({ length: Math.round((hi - lo) / step) + 1 }, (_, i) => ({ value: lo + i * step, y: py(lo + i * step) }))
+        : decadeTicks.length >= 2
         ? decadeTicks
         : [0, 0.25, 0.5, 0.75, 1].map((t) => {
             const target = lo + t * (hi - lo);
-            const value = Math.pow(10, target) - LOG_BASE;
-            return { value: Math.max(0, value), y: py(Math.max(0, value)) };
+            const value = Math.sign(target) * (Math.pow(10, Math.abs(target)) - LOG_BASE);
+            return { value, y: py(value) };
           });
 
       // x 轴日期刻度（5 个）
-      const xTicks = [0, 0.25, 0.5, 0.75, 1].map((t) => {
-        const ts = minDate + t * spanX;
+      const tickDates = [...new Set([0, 0.25, 0.5, 0.75, 1].map((t) =>
+        new Date(minDate + t * spanX).toISOString().slice(0, 10)))];
+      const xTicks = tickDates.map((date) => {
+        const ts = Date.parse(date);
         const d = new Date(ts);
         // 用 UTC 取月/日，避免本地时区把刻度挪一天
         return { x: px(new Date(ts).toISOString().slice(0, 10)), label: (d.getUTCMonth() + 1) + '/' + d.getUTCDate() };
       });
 
+      // 曲线终点保持真实坐标，只把头像移到右侧等间距排布，用引导线关联。
+      const endpointLabels = seriesList.map((s) => {
+        const last = s.points[s.points.length - 1];
+        return { s, cx: px(last.date), cy: py(last.gained), labelY: py(last.gained) };
+      }).sort((a, b) => a.cy - b.cy);
+      for (let i = 0; i < endpointLabels.length; i++) {
+        endpointLabels[i].labelY = Math.max(endpointLabels[i].cy, PAD.t + 10, i ? endpointLabels[i - 1].labelY + 22 : 0);
+      }
+      if (endpointLabels.length) {
+        endpointLabels.at(-1).labelY = Math.min(endpointLabels.at(-1).labelY, H - PAD.b - 10);
+        for (let i = endpointLabels.length - 2; i >= 0; i--) {
+          endpointLabels[i].labelY = Math.min(endpointLabels[i].labelY, endpointLabels[i + 1].labelY - 22);
+        }
+      }
+
       chartNode = h(
         'div',
         // key 里带周期：换榜单时整个图重建一次，配 CSS 淡入，避免生硬跳变
@@ -1244,7 +1855,7 @@
               { key: 'g' + i },
               h('line', { x1: PAD.l, x2: W - PAD.r, y1: g.y, y2: g.y, className: 'hp-grid' }),
               h('text', { x: PAD.l - 8, y: g.y + 3.5, textAnchor: 'end', className: 'hp-axis' },
-                g.value === 0 ? '0' : '+' + fmtCount(g.value)),
+                signed(g.value)),
             ),
           ),
           // x 轴
@@ -1255,12 +1866,13 @@
             : null,
           // 每条曲线
           seriesList.map((s) => {
-            const d = smoothPath(s.points.map((p) => [Number(px(p.date).toFixed(1)), Number(py(val(p)).toFixed(1))]));
+            const d = s.points.map((p, i) => (i ? 'L' : 'M') + px(p.date).toFixed(1) + ' ' + py(val(p)).toFixed(1)).join(' ');
             const dim = hover !== null && hover !== s.repo;
             return h('path', {
               d,
               fill: 'none',
               stroke: s.color,
+              strokeDasharray: [undefined, '6 4', '2 3'][Math.floor((rows || []).findIndex((r) => r.repository === s.repo) / SERIES_COLORS.length)],
               strokeWidth: hover === s.repo ? 2.8 : 1.9,
               strokeLinejoin: 'round',
               strokeLinecap: 'round',
@@ -1274,17 +1886,22 @@
           // 末端圆点
           // 每条线末端用**项目头像**代替圆点（像行情软件在线尾标品牌）。
           // 用 <clipPath> 裁成圆形；头像可能加载失败，失败时退化成同色圆点，绝不出现空白。
-          seriesList.map((s, i) => {
-            const last = s.points[s.points.length - 1];
-            const cx = px(last.date);
-            const cy = py(val(last));
+          endpointLabels.map(({ s, cx: trueX, cy: trueY, labelY }, i) => {
+            const cx = W - 14;
+            const cy = labelY;
             const r = 9;
             const owner = String(s.repo).split('/')[0] || '?';
             const clipId = 'hp-av-' + i;
             const dim = hover !== null && hover !== s.repo;
             return h(
               'g',
-              { key: 'end' + s.repo, opacity: dim ? 0.25 : 1, style: { transition: 'opacity .15s' } },
+              { key: 'end' + s.repo, opacity: dim ? 0.25 : 1, style: { transition: 'opacity .15s' },
+                tabIndex: 0, role: 'img', 'aria-label': s.repo + ' · ≈' + signed(s.points.at(-1).gained),
+                onMouseEnter: () => setHover(s.repo), onMouseLeave: () => setHover(null),
+                onFocus: () => setHover(s.repo), onBlur: () => setHover(null) },
+              h('title', null, s.repo + ' · ≈' + signed(s.points.at(-1).gained)),
+              h('line', { className: 'hp-endpoint-link', x1: trueX, y1: trueY, x2: cx - r, y2: cy, stroke: s.color, strokeWidth: 1, opacity: 0.6 }),
+              h('circle', { className: 'hp-endpoint-dot', cx: trueX, cy: trueY, r: 2.3, fill: s.color }),
               h(
                 'defs',
                 null,
@@ -1294,6 +1911,7 @@
               h('circle', { cx, cy, r: r + 1.6, fill: 'var(--hp-card-bg, #fff)', opacity: 0.9 }),
               h('circle', { cx, cy, r, fill: s.color, opacity: 0.18 }),
               h('image', {
+                className: 'hp-endpoint-avatar',
                 href: BASE + '/avatar?owner=' + encodeURIComponent(owner),
                 x: cx - r,
                 y: cy - r,
@@ -1318,11 +1936,13 @@
                 className: 'hp-legend-item' + (hover === s.repo ? ' act' : ''),
                 onMouseEnter: () => setHover(s.repo),
                 onMouseLeave: () => setHover(null),
+                onFocus: () => setHover(s.repo),
+                onBlur: () => setHover(null),
                 onClick: () => toggle(s.repo),
-                title: '点击移出对比',
+                title: s.repo + ' · ' + s.baseDate + ' → ' + s.points[s.points.length - 1].date,
               },
               h('span', { className: 'hp-legend-line', style: { background: s.color } }),
-              h('span', null, s.repo.split('/')[1] || s.repo),
+              h('span', null, s.repo + ' · ' + s.baseDate + ' · ≈' + signed(s.points[s.points.length - 1].gained)),
             ),
           ),
         ),
@@ -1333,23 +1953,39 @@
     return h(
       'div',
       { className: 'hp-dash' },
+      isDaily ? null : h('section', { className: 'hp-mchart-panel' },
+        h('div', { className: 'hp-mchart-title' }, translate(lang, 'stats.gainTitle')),
+        h('div', { className: 'hp-mchart-hint' }, translate(lang, 'stats.gainHint')),
+        h('div', { className: 'hp-gain-list' }, (showAllGains ? rows || [] : (rows || []).slice(0, 5)).map((row) =>
+          h('div', { className: 'hp-gain-row', key: row.repository },
+            h('span', { className: 'hp-gain-name', title: row.repository }, row.rank + '. ' + row.repository),
+            h('div', { className: 'hp-gain-track' }, h('div', { className: 'hp-gain-bar', style: { width: (Math.abs(row.starsGained) / maxGain * 100) + '%' } })),
+            h('span', { className: 'hp-gain-value' }, (row.starsGained > 0 ? '+' : '') + row.starsGained.toLocaleString(lang === 'en' ? 'en-US' : 'zh-CN')),
+          ),
+        )),
+        rows && rows.length > 5 ? h('button', { className: 'hp-pick-btn', style: { marginTop: 12 }, onClick: () => setShowAllGains((v) => !v) },
+          translate(lang, showAllGains ? 'stats.showLess' : 'stats.showAll', { n: rows.length })) : null,
+      ),
       h(
         'section',
         { className: 'hp-mchart-panel' },
         h(
           'div',
           { className: 'hp-mchart-head' },
-          h('div', { className: 'hp-mchart-title' }, '本期涨幅走势对比'),
+          h('div', { className: 'hp-mchart-title' }, translate(props.lang, isDaily ? 'stats.dailyTitle' : 'stats.chartTitle')),
           // 不再放「总星数 / 本期涨幅」切换：上面的「日/周/月」已经决定了周期，
           // 这里再让人选一次量纲就是重复决策。统一看「相对起点涨了多少」——
           // 它才是「谁这段涨得猛」的可比量（总星数比的是历史体量，与周期无关）。
-          h('div', { className: 'hp-mchart-hint' }, '纵轴：本期涨幅（对数）'),
+          h('div', { className: 'hp-mchart-hint' }, translate(props.lang, isDaily ? 'stats.dailyAxis' : frame && !frame.useLog ? 'stats.linearAxis' : 'stats.axisHint')),
         ),
+        !Number.isFinite(windowStart) || !Number.isFinite(windowEnd)
+          ? h('div', { className: 'hp-mchart-note' }, translate(lang, 'stats.unknownWindow'))
+          : h('div', { className: 'hp-mchart-note' }, props.window.start + ' → ' + props.window.end),
         chartNode,
         h(
           'div',
           { className: 'hp-mchart-note' },
-          '纵轴为对数刻度（跨度大时也能看清各自走势）；所有曲线以同期为基准起算，中途才起来的项目从它出现那天开始画。',
+          translate(lang, isDaily ? 'stats.dailyNote' : 'stats.sampleNote'),
         ),
       ),
       ready ? picker : null,
@@ -1372,8 +2008,18 @@
       const [detail, setDetail] = React.useState(null);
       const [detailLoading, setDetailLoading] = React.useState(false);
       const [detailError, setDetailError] = React.useState(null);
+      const detailRequestRef = React.useRef(0);
       const [theme, setTheme] = React.useState(readTheme);
       const [lang, setLang] = React.useState(readLang);
+      /**
+       * 设置面板开关，以及「有没有新版本」。
+       *
+       * 更新检查每天最多一次（后端 /update 自己有 24h 缓存，这里再挡一层
+       * localStorage，避免每次开面板都打请求）。
+       * 有新版时设置按钮变高亮色，让用户一眼看到。
+       */
+      const [showSettings, setShowSettings] = React.useState(false);
+      const [updateInfo, setUpdateInfo] = React.useState(null);
       const [lastFetch, setLastFetch] = React.useState(null);
       /** { [repository]: { desc, chart } } —— 列表页卡片的简介与迷你走势 */
       const [details, setDetails] = React.useState(readDetailsCache);
@@ -1451,10 +2097,11 @@
       const generationRef = React.useRef(0);
       const CHUNK = 6; // 每批条数：一屏 3 行卡片，够快看到结果
 
-      const loadDetails = React.useCallback(async (repos, known, wantLang) => {
+      const loadDetails = React.useCallback(async (repos, known, wantLang, attempt = 0) => {
         if (!repos || repos.length === 0) return;
         const list = repos.slice(0, 20);
         const gen = generationRef.current;
+        const pendingCharts = [];
 
         // 把 20 个切成若干 6 个一批
         const chunks = [];
@@ -1464,7 +2111,7 @@
           // 每批开始前检查代际：用户中途换了榜单/语言，剩下的批次直接放弃
           if (generationRef.current !== gen) return;
           const chunk = chunks[ci];
-          const batchKey = wantLang + '|' + chunk.join(',');
+          const batchKey = gen + '|' + wantLang + '|' + chunk.join(',');
           if (inflightRef.current.has(batchKey)) continue;
           inflightRef.current.add(batchKey);
           try {
@@ -1476,6 +2123,7 @@
             // 这一批回来就立刻合并 → 界面马上多出 6 张有内容的卡
             const next = {};
             for (const it of body.items || []) {
+              if (it.chartPending) pendingCharts.push(it.repository);
               next[it.repository] = {
                 desc: it.desc,
                 descZh: it.descZh,
@@ -1492,10 +2140,17 @@
                 const keepOld = !fresh.desc && old && old.desc;
                 merged[repo] = keepOld
                   ? { ...old, chart: fresh.chart || old.chart, avatar: fresh.avatar || old.avatar, settled: true }
-                  : { ...fresh, descZh: fresh.descZh || (old && old.descZh) || null };
+                  : { ...fresh, descZh: fresh.descZh || (old && old.desc === fresh.desc && old.descZh) || null };
               }
               return merged;
             });
+            if (wantLang === 'zh') {
+              const needZh = chunk.filter((r) => {
+                const entry = next[r] || known[r];
+                return entry && entry.desc && !entry.descZh;
+              });
+              if (needZh.length > 0) void loadTranslations(needZh, gen);
+            }
           } catch (e) {
             if (generationRef.current !== gen) return;
             // 这一批失败：把还没取过的标成 settled，避免永远转圈
@@ -1510,32 +2165,26 @@
             inflightRef.current.delete(batchKey);
           }
         }
-
-        /**
-         * 全部批次取完后，补一次中文。
-         *
-         * 这里必须**从 known 快照算需要翻译的条目**，不能在 setDetails 的
-         * 回调里做副作用 —— 那样在 React 严格模式下会执行两次，
-         * 而且 setter 应当保持纯函数。
-         */
-        if (wantLang === 'zh' && generationRef.current === gen) {
-          const needZh = list.filter((r) => {
-            const entry = known[r];
-            // 有简介、但还没有译文 → 需要翻
-            return entry && entry.desc && !entry.descZh;
-          });
-          if (needZh.length > 0) void loadTranslations(needZh, gen);
+        if (pendingCharts.length > 0 && attempt < 3 && generationRef.current === gen) {
+          setTimeout(() => {
+            if (generationRef.current === gen) void loadDetails(pendingCharts, known, wantLang, attempt + 1);
+          }, 2500);
         }
       }, [loadTranslations]);
 
+      React.useEffect(() => () => {
+        generationRef.current += 1;
+        detailRequestRef.current += 1;
+      }, []);
+
       React.useEffect(() => {
         void loadBoards(false);
         // 数据源每天只更新一次，所以不做分钟级轮询；只在**跨天**时自动静默刷新一次。
         // 判断方式：记住首次加载那天的日期，页面开着跨过零点才重新取。
-        const openedDay = localDayKey();
+        let openedDay = localDayKey();
         const timer = setInterval(() => {
           if (localDayKey() !== openedDay) {
-            clearInterval(timer);
+            openedDay = localDayKey();
             void loadBoards(true);
           }
         }, 60 * 1000);
@@ -1548,19 +2197,22 @@
       }, [boards, period]);
 
       const openDetail = React.useCallback(async (item) => {
+        const request = ++detailRequestRef.current;
         setSelected(item);
         setDetail(null);
         setDetailError(null);
         setDetailLoading(true);
         try {
-          const body = await getJson('/detail?repo=' + encodeURIComponent(item.repository));
+          const body = await getJson('/detail?repo=' + encodeURIComponent(item.repository) + (lang === 'en' ? '&translate=0' : ''));
+          if (request !== detailRequestRef.current) return;
           setDetail(body.detail || null);
         } catch (e) {
+          if (request !== detailRequestRef.current) return;
           setDetailError(String(e && e.message ? e.message : e));
         } finally {
-          setDetailLoading(false);
+          if (request === detailRequestRef.current) setDetailLoading(false);
         }
-      }, []);
+      }, [lang]);
 
       const rows = board && Array.isArray(board.rows) ? board.rows : [];
       const maxGain = React.useMemo(() => rows.reduce((m, r) => Math.max(m, r.starsGained || 0), 0), [rows]);
@@ -1597,6 +2249,24 @@
         void loadDetails(repoListKey.split('|'), detailsRef.current, lang);
       }, [repoListKey, lang, loadDetails]);
 
+      /**
+       * 榜单出来后就通知宿主**按排名顺序预翻译**。
+       *
+       * 用户此刻看到的是英文；等他点开第 1 名时，第 2、3、4 名正在依次翻译。
+       * 只在中文模式下触发（英文模式不需要译文，省模型额度）。
+       */
+      React.useEffect(() => {
+        if (lang !== 'zh') return;
+        if (!repoListKey) return;
+        const key = 'dsh-github-hot:prewarm:' + localDayKey() + ':' + repoListKey.slice(0, 80);
+        try {
+          if (localStorage.getItem(key) === '1') return; // 今天这批已经预热过
+          localStorage.setItem(key, '1');
+        } catch (e) { /* 忽略 */ }
+        const q = encodeURIComponent(repoListKey.split('|').join(','));
+        void getJson('/prewarm?repos=' + q + '&limit=20').catch(() => {});
+      }, [repoListKey, lang]);
+
       // 详情变化就落本地缓存（节流交给浏览器，量很小）
       React.useEffect(() => {
         if (Object.keys(details).length > 0) writeDetailsCache(details);
@@ -1620,6 +2290,51 @@
         });
       }, []);
 
+      /**
+       * 版本检查：打开面板时查一次，结果按天缓存。
+       *
+       * 只在「今天还没查过」时发请求；查失败不影响任何功能。
+       */
+      React.useEffect(() => {
+        let alive = true;
+        const UPDATE_KEY = 'dsh-github-hot:update';
+        const today = localDayKey();
+        try {
+          const raw = localStorage.getItem(UPDATE_KEY);
+          if (raw) {
+            const saved = JSON.parse(raw);
+            // 同一天且查到过结果 → 直接用缓存
+            if (saved && saved.day === today && saved.latest) {
+              setUpdateInfo(saved);
+              return undefined;
+            }
+          }
+        } catch (e) { /* 忽略 */ }
+
+        getJson('/update')
+          .then((r) => {
+            if (!alive || !r || !r.latest) return;
+            const next = { day: today, current: r.current, latest: r.latest, hasUpdate: r.hasUpdate };
+            setUpdateInfo(next);
+            try { localStorage.setItem(UPDATE_KEY, JSON.stringify(next)); } catch (e) { /* 忽略 */ }
+          })
+          .catch(() => { /* 检查失败静默 */ });
+
+        return () => { alive = false; };
+      }, []);
+
+      /** 手动再查一次（点「立即检查」）。 */
+      const recheckUpdate = React.useCallback(() => {
+        setUpdateInfo((cur) => ({ ...(cur || {}), checking: true }));
+        getJson('/update?force=1')
+          .then((r) => {
+            const next = { day: localDayKey(), current: r.current, latest: r.latest, hasUpdate: r.hasUpdate, error: r.error || null };
+            setUpdateInfo(next);
+            try { localStorage.setItem('dsh-github-hot:update', JSON.stringify(next)); } catch (e) { /* 忽略 */ }
+          })
+          .catch((e) => setUpdateInfo((cur) => ({ ...(cur || {}), checking: false, error: String(e && e.message ? e.message : e) })));
+      }, []);
+
       /**
        * 切到「中文」时，立刻给已有内容补译文 —— **不等重新取数**。
        *
@@ -1645,6 +2360,8 @@
         });
       }, []);
 
+      // 界面文案统一走 t()，切换语言时整个界面跟着变
+      const t = (key, vars) => translate(lang, key, vars);
       const periodLabel = board ? board.label : '—';
       const dataOk = board && board.ok;
       const dataStale = board && !board.ok && board.staleAt;
@@ -1664,15 +2381,15 @@
           h(
             'div',
             { className: 'hp-seg' },
-            h('button', { className: period === 'day' ? 'on' : '', onClick: () => setPeriod('day') }, '日榜'),
-            h('button', { className: period === 'week' ? 'on' : '', onClick: () => setPeriod('week') }, '周榜'),
-            h('button', { className: period === 'month' ? 'on' : '', onClick: () => setPeriod('month') }, '月榜'),
+            h('button', { className: period === 'day' ? 'on' : '', onClick: () => setPeriod('day') }, t('period.day')),
+            h('button', { className: period === 'week' ? 'on' : '', onClick: () => setPeriod('week') }, t('period.week')),
+            h('button', { className: period === 'month' ? 'on' : '', onClick: () => setPeriod('month') }, t('period.month')),
           ),
           h(
             'div',
             { className: 'hp-seg' },
-            h('button', { className: view === 'cards' ? 'on' : '', onClick: () => setView('cards'), title: '按名次看每个项目' }, '榜单'),
-            h('button', { className: view === 'dash' ? 'on' : '', onClick: () => setView('dash'), title: '汇总统计：多少仓库、多少星、什么语言' }, '统计'),
+            h('button', { className: view === 'cards' ? 'on' : '', onClick: () => setView('cards'), title: t('misc.topByRank') }, t('view.board')),
+            h('button', { className: view === 'dash' ? 'on' : '', onClick: () => setView('dash') }, t('view.stats')),
           ),
         ),
         // 一句话说清「数据是哪天的」。不再罗列取回时刻与起止日期 —— 那对读的人没有意义。
@@ -1684,10 +2401,10 @@
             { title: lastFetch ? '本机取回于 ' + fmtTime(lastFetch) : '' },
             h('span', { className: 'hp-dot ' + (dataOk ? 'ok' : dataStale ? 'warn' : 'bad') }),
             dataOk
-              ? '数据更新到 ' + dataDateText(board)
+              ? t('status.updatedTo', { date: dataDateText(board, lang) })
               : dataStale
-                ? '暂未取到 · 显示 ' + ago(board.staleAt) + ' 的数据'
-                : '暂未取到数据',
+                ? t('error.stale', { err: '', when: ago(board.staleAt) }).replace('（）', '').replace('()', '')
+                : t('empty.notFetched'),
           ),
         ),
         h(
@@ -1698,16 +2415,30 @@
             {
               className: 'hp-btn hp-lang-btn',
               onClick: toggleLang,
-              title: lang === 'zh' ? '当前显示中文（等翻译完成）。点击切到英文，加载更快' : '当前显示英文原文。点击切回中文',
+              title: lang === 'zh' ? t('lang.tipZh') : t('lang.tipEn'),
             },
-            lang === 'zh' ? '中' : 'EN',
+            lang === 'zh' ? t('lang.zh') : t('lang.en'),
           ),
           h(
             'button',
-            { className: 'hp-btn hp-theme-btn', onClick: toggleTheme, title: theme === 'paper' ? '切到深色（融入界面）' : '切到纸感贴纸风' },
-            theme === 'paper' ? '◐ 深色' : '◑ 纸感',
+            { className: 'hp-btn hp-theme-btn', onClick: toggleTheme, title: theme === 'paper' ? t('theme.tipDark') : t('theme.tipPaper') },
+            theme === 'paper' ? '◐ ' + t('theme.dark') : '◑ ' + t('theme.paper'),
+          ),
+          h(
+            'button',
+            {
+              // 有新版本时按钮变高亮（hp-btn-update），提示用户点进来
+              className: 'hp-btn hp-settings-btn' + (updateInfo && updateInfo.hasUpdate ? ' hp-btn-update' : ''),
+              onClick: () => setShowSettings((v) => !v),
+              title: updateInfo && updateInfo.hasUpdate
+                ? t('settings.updateTip', { v: updateInfo.latest })
+                : t('settings.tip'),
+            },
+            h('span', { className: 'hp-gear', dangerouslySetInnerHTML: { __html: GEAR_ICON_SVG } }),
+            t('settings.title'),
+            updateInfo && updateInfo.hasUpdate ? h('span', { className: 'hp-update-dot' }) : null,
           ),
-          h('button', { className: 'hp-btn', onClick: () => void loadBoards(false), disabled: loading }, loading ? '刷新中…' : '刷新'),
+          h('button', { className: 'hp-btn', onClick: () => void loadBoards(false), disabled: loading }, loading ? t('action.refreshing') : t('action.refresh')),
         ),
       );
 
@@ -1722,9 +2453,9 @@
         body = h(
           'div',
           { className: 'hp-empty' },
-          h('strong', null, '取数失败'),
+          h('strong', null, t('error.title')),
           h('div', null, error),
-          h('div', null, '检查网络连接，然后点右上角「刷新」。'),
+          h('div', null, t('error.hint')),
         );
       } else if (!dataOk && rows.length === 0) {
         body = h(
@@ -1737,7 +2468,7 @@
       } else if (view === 'dash') {
         // 统计只看展示的那一批，与榜单页口径一致。
         // details 是 { repo: { desc, chart } }，这里抽成 { repo: chart } 再传 —— 图表组件只认曲线。
-        body = h(Dashboard, { React, rows: visible, charts: chartMap, lang, periodKey: period });
+        body = h(Dashboard, { React, rows: visible, charts: chartMap, lang, periodKey: period, window: board && board.window });
       } else {
         body = h(
           'div',
@@ -1749,7 +2480,7 @@
             h(
               'div',
               { className: 'hp-hero-main' },
-              h('div', { className: 'hp-hero-k' }, periodLabel + ' · TOP ' + Math.min(MAX_ITEMS, rows.length) + ' 合计涨星'),
+              h('div', { className: 'hp-hero-k' }, t('board.heroLabel', { period: periodLabel })),
               h('div', { className: 'hp-hero-v' }, '+' + fmtCount(top20Gain)),
               h(
                 'div',
@@ -1762,9 +2493,9 @@
             h(
               'div',
               { className: 'hp-hero-side' },
-              h('div', { className: 'hp-stat-card rose' }, h('div', { className: 'hp-stat-k' }, 'TOP20 平均'), h('div', { className: 'hp-stat-v' }, '+' + fmtCount(Math.round(top20Gain / (visible.length || 1))))),
-              h('div', { className: 'hp-stat-card sky' }, h('div', { className: 'hp-stat-k' }, '最高单项'), h('div', { className: 'hp-stat-v' }, visible.length ? '+' + fmtCount(visible[0].starsGained) : '—')),
-              h('div', { className: 'hp-stat-card sun' }, h('div', { className: 'hp-stat-k' }, '展示条数'), h('div', { className: 'hp-stat-v' }, visible.length + ' 个')),
+              h('div', { className: 'hp-stat-card rose' }, h('div', { className: 'hp-stat-k' }, t('board.statAvg')), h('div', { className: 'hp-stat-v' }, '+' + fmtCount(Math.round(top20Gain / (visible.length || 1))))),
+              h('div', { className: 'hp-stat-card sky' }, h('div', { className: 'hp-stat-k' }, t('board.statTop')), h('div', { className: 'hp-stat-v' }, visible.length ? '+' + fmtCount(visible[0].starsGained) : '—')),
+              h('div', { className: 'hp-stat-card sun' }, h('div', { className: 'hp-stat-k' }, t('board.statCount')), h('div', { className: 'hp-stat-v' }, t('board.countUnit', { n: visible.length }))),
             ),
           ),
           h(
@@ -1790,8 +2521,83 @@
         'div',
         { className: 'hp-root hp-' + theme },
         header,
-        dataStale ? h('div', { className: 'hp-banner warn' }, '本次取数失败（' + board.error + '），显示的是 ' + ago(board.staleAt) + ' 的数据。') : null,
-        selected ? h(Detail, { React, item: selected, detail, loading: detailLoading, error: detailError, onClose: () => setSelected(null) }) : null,
+        dataStale ? h('div', { className: 'hp-banner warn' }, t('error.stale', { err: board.error, when: ago(board.staleAt) })) : null,
+        selected ? h(Detail, { React, lang, item: selected, detail, loading: detailLoading, error: detailError, onClose: () => { detailRequestRef.current += 1; setSelected(null); } }) : null,
+        /**
+         * 设置面板：点顶栏齿轮弹出，浮在内容之上。
+         * 目前只放版本信息与更新提示，后续功能（显示偏好、缓存管理）加在这里。
+         */
+        showSettings
+          ? h(
+              'div',
+              { className: 'hp-settings-mask', onClick: (e) => { if (e.target === e.currentTarget) setShowSettings(false); } },
+              h(
+                'div',
+                { className: 'hp-settings' },
+                // 头部：标题 + 关闭
+                h('div', { className: 'hp-set-head' },
+                  h('span', { className: 'hp-set-title' }, t('settings.title')),
+                  h('button', { className: 'hp-set-x', onClick: () => setShowSettings(false), title: t('settings.close'), 'aria-label': t('settings.close') },
+                    h('span', { dangerouslySetInnerHTML: { __html: CLOSE_ICON_SVG } })),
+                ),
+                // 版本卡片：当前版本是大字号主信息，与 npm 版本并排对比
+                h('div', { className: 'hp-set-ver' },
+                  h('div', { className: 'hp-set-ver-item' },
+                    h('div', { className: 'hp-set-ver-k' }, t('settings.current')),
+                    h('div', { className: 'hp-set-ver-v' }, updateInfo && updateInfo.current ? updateInfo.current : '—'),
+                  ),
+                  h('div', { className: 'hp-set-ver-arrow' }, '→'),
+                  h('div', { className: 'hp-set-ver-item' },
+                    h('div', { className: 'hp-set-ver-k' }, t('settings.latest')),
+                    h('div', {
+                      className: 'hp-set-ver-v' + (updateInfo && updateInfo.hasUpdate ? ' new' : ''),
+                    }, updateInfo && updateInfo.checking ? '…' : (updateInfo && updateInfo.latest ? updateInfo.latest : '—')),
+                  ),
+                ),
+                // 状态条：一眼看出「要不要升级」
+                (() => {
+                  if (!updateInfo || !updateInfo.latest) {
+                    return updateInfo && updateInfo.error
+                      ? h('div', { className: 'hp-set-note warn' }, t('settings.checkFailed', { msg: updateInfo.error }))
+                      : h('div', { className: 'hp-set-note' }, t('settings.checking'));
+                  }
+                  if (updateInfo.hasUpdate) {
+                    return h('div', { className: 'hp-set-note update' },
+                      h('span', { className: 'hp-update-dot' }),
+                      h('span', null, t('settings.updateTip', { v: updateInfo.latest })));
+                  }
+                  const cmp = cmpVersion(updateInfo.current, updateInfo.latest);
+                  if (cmp > 0) {
+                    return h('div', { className: 'hp-set-note local' },
+                      h('span', { className: 'hp-set-dot ok' }),
+                      h('span', null, t('settings.localAhead', { v: updateInfo.latest })));
+                  }
+                  return h('div', { className: 'hp-set-note ok' },
+                    h('span', { className: 'hp-set-dot ok' }),
+                    h('span', null, t('settings.upToDate')));
+                })(),
+                // 升级命令（仅在有新版时出现）
+                updateInfo && updateInfo.hasUpdate
+                  ? h('div', { className: 'hp-set-cmd' },
+                      h('div', { className: 'hp-set-cmd-k' }, t('settings.updateHint')),
+                      h('code', null, 'dsh plugin --profile desktop add dsh-github-hot@' + updateInfo.latest))
+                  : null,
+                // 底部操作
+                h('div', { className: 'hp-set-foot' },
+                  h('button', {
+                    className: 'hp-set-btn',
+                    onClick: () => void recheckUpdate(),
+                    disabled: updateInfo && updateInfo.checking,
+                  }, updateInfo && updateInfo.checking ? t('settings.checking') : t('settings.checkNow')),
+                  h('a', {
+                    className: 'hp-set-btn ghost',
+                    href: 'https://github.com/chiinsight/dsh-github-hot',
+                    target: '_blank', rel: 'noreferrer',
+                  }, t('settings.repo') + ' ↗'),
+                ),
+              ),
+            )
+          : null,
         h('div', { className: 'hp-scroll' }, body),
         /**
          * 数据署名 —— **不是装饰，是法律要求**。