多语言站点代码生成调试高阶版提示词

角色定义与任务定位

请以“资深全栈架构师兼本地化技术专家”的身份执行任务。你的核心目标是：生成结构清晰、易于维护、符合国际最佳实践的多语言网站代码模块，并针对常见多语言陷阱提供预置的调试与优化策略。你的产出不是孤立的代码片段，而是包含架构思考、错误预防和性能考量的综合性解决方案。

适用场景

• 为新建项目搭建多语言（i18n）基础框架。
• 为现有项目添加新的语言支持或重构国际化代码。
• 诊断和修复因语言切换导致的布局错乱、数据格式错误或功能异常。
• 优化多语言站点的资源加载策略与性能。

核心提示词

请基于以下结构化提示生成或调试代码：

• 生成React/Vue多语言上下文与钩子：“创建一个多语言上下文提供者，使用i18next库，支持懒加载语言包。包含一个`useTranslation`自定义钩子，能返回翻译函数`t`、当前语言`language`和切换函数`changeLanguage`。确保上下文能优雅地处理加载状态。”
• 生成结构化语言资源文件：“为‘首页’和‘用户面板’两个模块，分别生成JSON格式的英文（en）和中文（zh）语言资源文件。键名采用‘命名空间:键名’的格式（如`home:title`），值包含文本和可选的动态变量占位符（如`{{userName}}`）。”
• 调试布局与文本溢出
  • 为新建项目搭建多语言（i18n）基础框架。
  • 为现有项目添加新的语言支持或重构国际化代码。
  • 诊断和修复因语言切换导致的布局错乱、数据格式错误或功能异常。
  • 优化多语言站点的资源加载策略与性能。

  核心提示词

  请基于以下结构化提示生成或调试代码：

  • 生成React/Vue多语言上下文与钩子：“创建一个多语言上下文提供者，使用i18next库，支持懒加载语言包。包含一个`useTranslation`自定义钩子，能返回翻译函数`t`、当前语言`language`和切换函数`changeLanguage`。确保上下文能优雅地处理加载状态。”
  • 生成结构化语言资源文件：“为‘首页’和‘用户面板’两个模块，分别生成JSON格式的英文（en）和中文（zh）语言资源文件。键名采用‘命名空间:键名’的格式（如`home:title`），值包含文本和可选的动态变量占位符（如`{{userName}}`）。”
  • 调试布局与文本溢出：“分析以下CSS代码，指出可能导致德语长单词溢出容器的风险点，并提供使用`hyphens: auto;`、`overflow-wrap: break-word;`以及Flexbox/Grid布局的适应性修改方案。”
  • 调试日期/货币/数字格式：“编写一个工具函数`formatLocalized`，根据当前语言环境，使用Intl API统一格式化日期、货币和数字。提供针对阿拉伯语（ar-SA）从右至左布局和日语（ja-JP）货币符号位置的测试用例。”

  风格方向

  • 代码风格：模块化、函数式编程优先，代码注释明确，标注出与多语言处理相关的关键逻辑。
  • 架构风格：关注分离（Separation of Concerns），将语言逻辑、UI组件和业务逻辑清晰分离。
  • 文档风格：内联文档应包含使用示例、参数说明以及可能触发的边界条件警告。

  构图建议（代码结构）

  • 采用“分层设计”：基础设施层（i18n配置/上下文）、资源层（JSON文件）、组件层（使用翻译的UI）、工具层（格式化函数）。
  • 关键文件结构建议：`src/i18n/`（配置、上下文）、`src/locales/`（各语言JSON）、`src/utils/format.js`（格式化工具）。
  • 在组件中，将翻译键名集中定义为常量，避免硬编码字符串散落。

  细节强化

  • 动态变量处理：确保翻译字符串中的变量（如`{{count}}`）能安全地插入并正确转义。
  • 复数处理：提示生成支持复数规则的翻译键（如`“message_one”`， `“message_other”`）。
  • 方向性（RTL）支持：在生成CSS或组件时，提示添加对`dir=”rtl”`和`[dir=”rtl”]`选择器的支持。
  • 可访问性（A11y）：确保语言切换按钮具有清晰的`aria-label`，并且页面`lang`属性随语言动态更新。
  • 性能细节：强调语言包的代码分割（懒加载）和持久化缓存策略。

  使用建议

  • 直接复制“核心提示词”中的任意一条到你的AI编程助手，即可生成针对性代码。
  • 调试时，将出错的代码片段与相关语言环境信息一并提供给AI，并引用本方案中的调试提示词方向。
  • 将“风格方向”和“构图建议”作为代码审查的检查清单，确保项目结构的一致性。
  • 利用“细节强化”列表，在代码生成后主动提问或添加要求，以覆盖边缘情况，提升代码健壮性。