feat: add WeChat community group QR to site widget and READMEs

[study8677]

Summary

• Repurpose the always-visible bottom-right floating widget into a "join our WeChat group" CTA; updated contactQR.* strings across en/zh/ja/ko/es.
• Render the new portrait group QR card undistorted in the widget (was forced to a square height).
• Add a centered community QR block near the top of all five README files (assets/community-qr.png).
• Update the swap doc: replace both frontend/public/contact-qr.png and assets/community-qr.png when the QR is refreshed.

Notes

• The WeChat group QR expires periodically; swapping the two image files is all that's needed to refresh it.

Test plan

• Build frontend and confirm the floating widget shows the group QR undistorted on public pages
• Confirm the QR block renders near the top of each README on GitHub

[study8677]

Code Review — PR #29: feat: add WeChat community group QR to site widget and READMEs

语言 / Language: TypeScript · React · Markdown
状态: 已合并 (Merged) — 以下为事后审查记录

---

总体评价

这个 PR 是一个纯内容/UI 更新，逻辑清晰、改动范围明确。五个语言文件的翻译一致性很好，h-auto 修复图片拉伸的思路正确。有一个值得关注的维护性风险（双文件冗余）和两个轻量优化建议，不影响功能。整体可 Approve，但建议在后续迭代中消除重复资产。

---

问题清单

级别	文件 & 行号	描述	建议
🟡 建议	frontend/public/contact-qr.png & assets/community-qr.png	两个文件是完全相同的二进制 PNG（diff 显示同一 blob 78cae8c），分别服务于 frontend widget 和 READMEs。每次更换 QR 都需要同步覆盖两处，文档虽有提醒，但仍是高频失误点	考虑在 CI/构建脚本 或 vite.config.ts 中用 fs.copyFileSync 从单一源文件生成两处副本；或在 README 中 src 直接指向 frontend/public/contact-qr.png 的 raw CDN 地址，消除双轨
🟡 建议	FloatingContactQR.tsx 原行 ~183	height={337} 是一个无来源说明的魔法数字。虽然它配合 w-full h-auto 能让浏览器提前算出宽高比（避免 CLS），但三个月后没人知道这个值从哪来	加一行简短注释，例如 {/* natural px height of the portrait QR card at 240 px wide */}
🟢 优化	FloatingContactQR.tsx 原行 ~182	width={240} HTML 属性与 CSS w-full 并存：w-full 会覆盖渲染宽度，width={240} 仅作 aspect-ratio hint 使用，功能正确但语义略混淆	无需修改，但可考虑改用 style={{ aspectRatio: "240/337" }} 替代 height={337}，让意图更自文档化

---

亮点

• ✅ 五语言翻译一致性极佳：EN/ZH/JA/KO/ES 四个 key 逐一更新，没有遗漏，措辞自然
• ✅ h-auto 修复正确：从 h-[160px] sm:h-[200px]（强制正方形裁切）改为 h-auto，配合显式 width/height 属性，浏览器可在图片加载前预留正确高度，无 CLS 问题
• ✅ loading="lazy" 保留：浮窗图片懒加载，不影响首屏性能
• ✅ contact-qr.README.md 更新及时：明确列出换 QR 时需同步覆盖的两个文件路径，降低操作失误概率

---

修改示例（双文件冗余消除）

若希望从根源解决双文件同步问题，可在 vite.config.ts 的 buildStart 钩子中自动同步：

// vite.config.ts
import { copyFileSync } from "fs";

export default defineConfig({
  plugins: [
    {
      name: "sync-community-qr",
      buildStart() {
        // Single source of truth: frontend/public/contact-qr.png
        copyFileSync(
          "frontend/public/contact-qr.png",
          "assets/community-qr.png"
        );
      },
    },
    react(),
  ],
  // ...
});

这样每次 npm run build 都会自动保持两处一致，无需人工记忆。

---

Code review by Claude Code — 2026-05-21

---

Generated by Claude Code