在 Devin 中试用 DeepWiki 处理私有仓库
DeepWiki

langgenius/dify

菜单

Web 前端架构

相关源文件

本文档提供了Dify Web前端架构的技术概述，包括其核心组件、结构和关键技术。它解释了前端是如何组织的，组件之间是如何通信的，以及国际化是如何实现的。

技术栈

Dify的Web前端基于现代JavaScript栈构建

  • 框架：Next.js (基于React的框架)
  • 语言：TypeScript
  • 样式：Tailwind CSS (从组件结构推断)
  • 国际化：i18next，支持多种语言
  • 状态管理：React Context API
  • 路由：Next.js 内置路由系统

来源

整体架构

Dify前端遵循模块化架构，关注点分离清晰

来源

页面和布局结构

前端使用Next.js的app目录结构和嵌套布局。这种方法支持

  1. 分层组件组合
  2. 相关页面之间的共享布局
  3. 通过持久化组件实现高效路由

当用户在同一布局内页面之间导航时（例如从应用概览到应用日志），只有页面内容会发生变化，而布局组件将保持挂载状态，从而提供更流畅的用户体验。

来源

组件架构

组件架构遵循分层组织

  1. 基础组件：低级、可复用的UI组件
  2. 领域组件：特定于应用、数据集等领域的更高级组件
  3. 页面组件：由领域组件和基础组件组成的完整页面
  4. 布局组件：围绕页面提供一致结构的包装器

来源

国际化系统

Dify通过全面的i18n系统支持多语言

翻译文件被组织成层级对象，其中键代表UI元素或消息，值是翻译后的字符串。所有语言文件中的键都是一致的，从而实现无缝的语言切换。

组件中的使用示例

来源

通过Context进行状态管理

前端使用React Context API进行状态管理，创建了一个Context Provider层级结构。

这种基于Context的方法允许

  1. 全局状态在整个组件树中可访问
  2. 相关状态和功能被逻辑地分组
  3. 状态可在需要的地方被选择性地消费

来源

路由和导航

Dify利用了Next.js的路由能力，这些能力提供了

  1. 基于文件系统的路由
  2. 自动代码分割
  3. 带预加载的客户端导航

程序化导航示例

来源

结论

Dify Web前端架构使用现代React模式和Next.js，创建了一个模块化、可维护且用户友好的应用程序。Context的状态管理、全面的i18n系统和分层组件组织，实现了高效的开发和流畅的用户体验。

有关前端与之通信的API后端架构信息，请参阅API后端架构。