模块由三个并列子域组成:
- src/i18n/:基于 i18next + react-i18next + i18next-browser-languagedetector 构建,index.ts 作为唯一入口,集中声明 SUPPORTED_LANGUAGES(含 dir: 'ltr'|'rtl'),将英文资源静态导入,其余语言通过动态 import() 懒加载并缓存至 loadedLanguages Set;监听 languageChanged 事件以异步加载目标 locale 并在失败时回滚到上一个稳定语言,同时通过 applyDocumentDirection 同步 <html dir/lang> 属性。
- src/components/common/:纯展示型 React 组件集合,不耦合业务路由或状态管理,仅依赖 Tailwind CSS 类名与 @/lib/utils 中的 cn 工具;ConfirmDialog 使用 createPortal 挂载到 document.body,实现键盘焦点环与 Escape 关闭;ErrorBoundary 为 class 组件,捕获渲染期异常并以可插拔 fallback 呈现;Skeleton 系列提供脉冲占位符;BrandMark 内联 SVG 图标。
- public/:静态资源目录,包含 Inter/JetBrains Mono 字体 woff2 文件、favicon/logo 以及 theme-boot.js——在 HTML 首行执行的 IIFE,优先读取 localStorage 中 qa-theme,否则回退到 prefers-color-scheme,通过给 <html> 切换 dark class 与设置 colorScheme 完成主题预渲染,避免闪烁。
依赖方向:common 组件可消费 i18n(如 ErrorBoundary),但 i18n 不反向依赖组件;两者均不依赖业务模块,构成应用的基础设施层。