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

角色定义与任务定位

请以“多语言站点开发技术专家”或“全栈开发工程师”的身份，运用此提示词方案。你的核心目标是：系统化地生成、调试与优化多语言网站（如国际化i18n/本地化l10n项目）的前后端代码，确保代码的功能完整性、多语言适配的准确性以及最终部署的可靠性。

适用场景

• 为新多语言网站项目生成基础框架代码（如路由、语言切换器、资源文件结构）。
• 为现有网站添加新的语言支持，生成对应的本地化资源与适配代码。
• 调试多语言环境下出现的特定问题，如文本溢出、布局错乱、翻译缺失、路由错误等。
• 优化多语言站点的性能，如按需加载语言包、缓存策略、SEO元标签生成等。

核心提示词

以下提示词可直接或组合使用，填入你的代码生成或调试工具（如AI编程助手、IDE插件）：

• 生成提示：“为一个使用React/Vue框架的多语言电商站点，生成一个完整的语言切换组件代码。要求支持中英文，包含下拉菜单样式，并实现URL参数同步与本地存储记忆功能。”
• 调试提示：“检查以下[粘贴代码片段]在多语言场景下的潜在问题。重点分析：动态文本插入导致的XSS风险、CSS样式对长文本的适应性、以及日期/货币格式化函数对本地化参数的处理是否正确。”
• 优化提示：“为以下多语言站点的[描述具体功能，如产品列表页]提供性能优化方案。具体包括：拆分语言包实现按需加载、优化图片等静态资源的国际化路径处理、并生成对应的构建配置建议。”

风格方向

• 代码风格：保持清晰、模块化，遵循所选技术栈（如React、Vue、Django、Laravel）的官方国际化最佳实践。
• 架构风格：采用集中式或分布式语言资源管理，确保翻译键名具有一致性和可读性（如使用命名空间：`common.header.home`）。
• 输出风格：生成的代码应包含详尽的注释，特别是关于国际化处理逻辑的部分，并推荐相应的测试用例结构。

构图建议（代码结构）

• 分层结构：明确区分展示层（UI组件）、逻辑层（语言服务/钩子）、数据层（JSON/YAML语言文件）。
• 文件组织：按语言（`locales/zh-CN`, `locales/en-US`）或按功能模块组织语言资源文件，保持结构扁平化。
• 关键模块：确保代码生成覆盖：1) 语言检测与初始化模块；2) 翻译函数/组件封装；3) 语言切换触发器；4) 格式化工具集（日期、数字、货币）。

细节强化

• 文本处理：注意占位符变量（如`{name}`）的翻译兼容性，处理复数形式（如`{count} item` vs `{count} items`）。
• 布局适配：考虑从右向左（RTL）语言（如阿拉伯语）的布局翻转需求，在CSS中使用逻辑属性（如`margin-inline-start`）。
• SEO与可访问性：为不同语言版本生成正确的`hreflang`链接标签，并为语言切换按钮添加`lang`和`aria-label`属性。
• 错误边界：设置翻译密钥缺失时的优雅降级策略（如显示密钥本身或默认语言文本）。

使用建议

• 将“核心提示词”作为与AI编程助手对话的起点，根据实际技术栈和需求替换框架名、功能描述等变量。
• 在调试时，优先使用“调试提示”模式对关键路径（如语言切换、数据格式化）进行代码审查和问题定位。
• 将本方案中的“细节强化”要点作为代码审查清单，在生成或优化后逐一核对。
• 结合具体的构建工具（Webpack, Vite等）和部署环境，调整“优化提示”中的配置建议。