结构化多语言站点代码生成调试提示词

角色定义与任务定位

请以「资深全栈开发工程师兼国际化项目架构师」的身份，运用本提示词方案。你的核心目标是：为构建一个具备健壮多语言支持（i18n）的现代化Web站点，生成可直接运行或易于调试的前端代码结构。你的产出不是孤立的代码片段，而是考虑到了翻译键管理、文本动态替换、布局兼容性及常见调试场景的完整解决方案。

适用场景

• 启动一个全新的多语言React/Vue/Next.js项目，需要快速搭建国际化基础框架。
• 为现有单语站点添加多语言支持，进行代码重构与模块化改造。
• 在代码生成后，针对语言切换、文本溢出、动态内容注入等常见问题进行预设调试。
• 编写与国际化相关的单元测试或组件测试用例。

核心提示词

以下提示词组合可根据具体技术栈替换（如将React替换为Vue）：

• 生成一个React函数组件，使用react-i18next库，包含语言切换器、欢迎语展示及一个带有动态翻译值的用户仪表板头部。
• 创建对应的i18n配置文件结构，包含en.json和zh-CN.json，并演示如何在组件中通过useTranslation hook调用。
• 为上述语言切换功能编写一个简单的单元测试，模拟点击事件并断言页面文本变化。
• 调试提示：如果翻译键缺失，如何配置回退语言并触发控制台警告？请提供代码解决方案。

风格方向

• 代码风格：模块化、函数式编程。分离逻辑（hooks）、展示组件（components）与国际化资源（locales）。
• 架构风格：采用容器组件与展示组件分离的模式，确保翻译逻辑的纯净性和可测试性。
• 命名风格：翻译键名采用“模块名:组件名.元素名”的层级结构，如dashboard:header.welcome。

构图建议（代码结构）

• 顶层布局：构建一个<I18nProvider>包裹的根组件，初始化i18n实例并加载语言资源包。
• 核心功能区：在布局顶部或侧边栏固定位置，设计一个简洁的下拉框或按钮组作为语言切换器。
• 内容区：主要页面内容区域使用占位符或真实数据，充分展示长文本、短标签、日期货币格式化等不同元素的国际化处理。
• 调试面板构想：可在开发环境中构思一个浮动调试面板，实时显示当前激活的语言、正在查找的翻译键及其状态。

细节强化

• 文本方向（RTL/LTR）：提示词中需包含对阿拉伯语（ar）等从右至左语言的支持逻辑，动态调整CSS direction属性。
• 动态参数：演示如何在翻译字符串中嵌入变量，例如“欢迎回来，{{userName}}！”。
• 复数处理：展示针对英文复数规则（如“1 message” vs “{{count}} messages”）的代码处理示例。
• 异步加载：实现语言资源包的按需异步加载，以优化初始页面性能。
• 错误边界：为翻译组件添加错误边界，防止因资源加载失败导致整个应用崩溃。

使用建议

• 将“核心提示词”中的每一条直接复制到你的AI编程助手（如Cursor、Claude Code、GitHub Copilot）对话中，可逐条执行或组合使用。
• 生成代码后，优先运行单元测试，并手动测试语言切换的流畅度与布局稳定性。
• 利用“细节强化”中的要点，对生成的基础代码进行迭代和深化，构建更企业级的解决方案。
• 本方案提示词是“生成与调试”的起点，实际项目中请根据UI设计稿和具体业务逻辑调整组件样式与交互细节。