title: [ISSUE-0009] 国家标识用文字「US」而非 SVG 国旗 description: "国旗标识最好是用 svg" tags: [issue] created: 2026-05-26 updated: 2026-05-26 type: issue status: fixed severity: minor

[ISSUE-0009] 国家标识用文字「US」而非 SVG 国旗¶

相关源码：src/sections/page/cell-renderers.tsx

用户感知的现象¶

"国旗标识最好是用 svg"

商家列表位置列显示「US Arkansas / Rogers」，「US」是文字。国际化品味的产品应该用真国旗 SVG。

修复方案¶

两种方案： - 方案 A：Emoji 国旗 —— 🇺🇸 🇨🇳 🇯🇵。零依赖，操作系统渲染。某些 Windows 默认字体不显示，需要 fallback。 - 方案 B：CDN SVG —— 用 https://flagcdn.com/w40/us.png 之类 CDN。需要联网，但效果稳定。 - 方案 C：bundle SVG 库 —— 比如 country-flag-icons 包，引入包大小（~50KB）。

最优选择：A + C fallback。先 emoji，浏览器不支持就用 SVG。但增加复杂度，实际选 A（emoji）足够，浏览器都支持 Unicode 区域指示符。

改动文件¶

文件	改了什么
`src/sections/page/cell-renderers.tsx`	加 `countryCodeToFlag(code)` helper（Unicode 区域指示符算 emoji）；`RenderLocationCompact` + `RenderLocation` 改用 emoji，加 `fontFamily: '"Segoe UI Emoji", "Apple Color Emoji"'` 强制系统 emoji 字体

实现细节：

export function countryCodeToFlag(code) {
  if (!code || code.length !== 2) return '';
  const upper = code.toUpperCase();
  if (!/^[A-Z]{2}$/.test(upper)) return '';
  const base = 0x1f1e6 - 'A'.charCodeAt(0);
  return String.fromCodePoint(upper.charCodeAt(0) + base, upper.charCodeAt(1) + base);
}

例：'US' → '🇺🇸'。零依赖。

验证方式¶

打开商家列表 → 国家位置那列应显示 🇺🇸（Emoji 国旗，颜色丰富）。

如何避免再犯¶

新功能涉及国家/语言 → 默认用 Unicode 国旗 emoji，无需额外依赖