标准答案
- 国际化要处理语言包加载、日期数字格式、复数规则、文案 key 管理和缺失文案回退。
- 主题系统要明确设计 token、CSS 变量、暗色模式、品牌色覆盖和服务端首屏默认值。
- 运行时配置适合放 API 地址、开关、环境标识和第三方 key，但不能把敏感密钥暴露到客户端。
- 这些能力通常通过 Provider、Context、CSS 变量和配置注入组合实现。
- SSR 或 Next.js 场景下要保证服务端首屏和客户端接管时语言、主题和配置一致。
题目解析
这道题考的是基础能力设计。i18n、主题和配置都容易从页面里的硬编码逐渐失控。
主题最好落到 token 和 CSS 变量，而不是每个组件自己判断 dark mode。
运行时配置要区分服务端私密配置和客户端公开配置，不能因为方便把所有 env 都传给浏览器。
代码示例
下面通过 CSS 变量承载主题 token，组件只消费语义变量。
CSS
:root {
--color-bg: #ffffff;
--color-text: #1f2937;
}
[data-theme='dark'] {
--color-bg: #111827;
--color-text: #f9fafb;
}
.panel {
background: var(--color-bg);
color: var(--color-text);
}常见误区
- 文案直接写死在组件中，后续切换语言时只能全局搜索替换。
- 主题只靠组件 props 传递，层级一深就难以维护。
- 把服务端密钥当运行时配置传到客户端，造成安全风险。