进阶版前端工程API封装说明提示词

角色定义与任务定位

请以资深前端架构师兼技术文档可视化专家的身份，进行视觉创作。你的核心目标是：将“进阶版API封装”这一抽象、复杂的技术概念，转化为一套逻辑清晰、视觉直观、可直接用于团队知识传递或项目文档的说明性图示或信息图表。你的产出不是基础教程，而是聚焦于封装策略、设计模式与工程化实践的高级解读。

适用场景

• 技术团队内部知识分享与培训材料
• 项目文档中的架构设计说明章节
• 技术博客或社区文章的配图与可视化摘要
• 前端工程化建设方案的演示与汇报

核心提示词

可直接用于图像生成或视觉设计的关键词组合：

• 基础描述：Advanced front-end API encapsulation architecture diagram, clean and professional tech documentation style
• 核心元素：modular design, request interceptors, response transformers, error handling layers, type safety with TypeScript, mock service integration, automated testing suite
• 视觉化关键词：flowchart, layered architecture diagram, node connections, code snippets overlay, clean UI components interacting with API layer, glowing data streams
• 氛围与质感：minimalist tech aesthetic, dark/light theme with accent colors (blue for logic, green for success, orange for warnings), glassmorphism or neumorphism elements, subtle grid background

风格方向

• 整体风格：现代极简技术风，兼具专业性与视觉亲和力。避免过于卡通或娱乐化。
• 色彩方案：主色调采用深空灰或纯白背景，搭配科技蓝（主逻辑）、生态绿（成功/数据）、琥珀橙（警告/错误）作为功能色区分。色彩用于区分不同封装层与数据流状态。
• 材质与效果：可运用轻微的毛玻璃效果区分层次，关键节点使用微光或柔和的阴影突出。线条清晰流畅，箭头指示明确。

构图建议

• 中心辐射构图：以“统一封装入口”或“核心封装类”为中心，向外辐射出拦截器层、适配器层、数据转换层、错误处理层等模块。
• 分层递进构图：从上至下或从左至右，展示“用户界面 -> 封装层 -> 原生Fetch/Axios -> 服务器”的数据流与调用链，清晰体现每一层的职责。
• 对比构图：左侧展示“封装前”分散、重复的API调用代码块，右侧展示“封装后”统一、简洁的调用示例，形成强烈对比。

细节强化

• 代码表示：在相关模块旁嵌入高亮、简洁的真实TypeScript/JavaScript代码片段，例如展示一个配置了拦截器和类型泛型的请求函数。
• 图标化抽象：使用公认的技术图标（如齿轮代表配置、盾牌代表拦截、循环箭头代表转换、闪电代表性能）来象征不同封装功能。
• 动态示意：用不同颜色和粗细的箭头、流动的光点或虚线，表示请求、响应、错误等不同状态的数据流向。
• 标注与图例：在图表一侧或底部添加简洁的图例，解释颜色、线型和图标含义，确保信息自解释。

使用建议

• 生成图像时，将“核心提示词”部分的关键词组合作为主要描述，并从中选取2-3个“构图建议”作为画面结构指导。
• 在AI绘画工具中，可通过调整权重（如(layered architecture diagram:1.3)）来强调主体结构，加入technical illustration, infographic, isometric view等词进一步限定风格。
• 本方案生成的视觉内容，可直接嵌入Keynote/PPT、Confluence文档或Markdown文件中，作为技术概念的权威可视化补充。
• 可根据实际项目使用的具体技术栈（如Vue/React、Axios/ky），在“核心元素”中替换或添加关键词，使图示更具针对性。