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

langgenius/dify

菜单

前端开发

相关源文件

本文档涵盖了 Dify Web 应用程序的前端开发架构、技术和模式。它侧重于基于 Next.js 的 React 应用程序，该应用程序提供了管理应用程序、数据集、工作流和对话的用户界面。

有关后端 API 开发的信息，请参阅后端开发。有关整体系统架构的详细信息，请参阅系统架构。

技术栈

Dify 的前端建立在现代的、基于 React 的技术栈之上。

核心框架

  • Next.js 15.2.3 - 具有 SSR/SSG 功能的 React 框架
  • React 19.0.0 - 基于组件的 UI 库
  • TypeScript 4.9.5 - 类型安全的 JavaScript 开发

构建和开发工具

  • pnpm - 用于依赖管理的包管理器
  • Webpack - 模块打包器（通过 Next.js 配置）
  • ESLint - 代码 linting 和格式化
  • Storybook 8.5.0 - 组件开发和文档

UI 和样式

  • Tailwind CSS 3.4.17 - 实用至上的 CSS 框架
  • SASS 1.86.3 - 用于复杂样式的 CSS 预处理器
  • @headlessui/react - 未样式化、可访问的 UI 组件
  • @floating-ui/react - 用于工具提示和弹出窗口的定位引擎

来源：web/pnpm-lock.yaml209-530 web/next.config.js22-67

项目结构和架构

来源：web/app/(commonLayout)/app/(appDetailLayout)/layout.tsx1-32 web/next.config.js22-67

组件系统

基础组件库

前端使用了一个全面的基础组件库，提供了可复用的 UI 元素。

日期和时间选择器系统

日期/时间选择器系统展示了高级组件组合。

核心类型和架构

  • ViewType 枚举管理不同的选择器状态（日期、年月份、时间）。
  • Period 枚举处理上午/下午的选择。
  • 模块化组件结构，具有独立的部分、页脚和内容区域。

关键组件

  • DatePicker - 主要日期选择组件，可选时间选择。
  • TimePicker - 独立的日期选择组件。
  • Calendar - 基于网格的日期选择界面。
  • PortalToFollowElem - 弹出式覆盖层的定位系统。

来源：web/app/components/base/date-and-time-picker/types.ts1-106 web/app/components/base/date-and-time-picker/date-picker/index.tsx29-309

Markdown 和内容渲染

前端包含复杂的内容渲染功能。

Markdown 中的表单渲染

  • 自定义 markdown 表单渲染器，支持交互元素。
  • 支持输入类型：text, password, email, number, date, time, checkbox, select。
  • 与聊天上下文集成以进行表单提交。

SVG 图库系统

  • 使用 DOMPurify 进行清理的动态 SVG 渲染。
  • 带有图片模态框的交互式预览功能。
  • 响应式尺寸和错误处理。

来源：web/app/components/base/markdown-blocks/form.tsx32-238 web/app/components/base/svg-gallery/index.tsx6-78

样式架构

前端采用多层样式设计。

Markdown 样式系统

Markdown 样式展示了复杂的 CSS 架构。

主题集成

  • 导入 light、dark 和 markdown 特定主题。
  • 用于动态主题化的 CSS 自定义属性。
  • 全面的排版和布局样式。

组件特定样式

  • 代码块、表格和交互元素的专用样式。
  • 语法高亮集成。
  • 响应式设计考量。

来源：web/styles/markdown.scss1-1045

状态管理和数据流

状态管理架构

聊天系统集成

聊天系统展示了复杂的状态管理模式。

基于上下文的架构

  • useChatContext 为组件提供聊天功能。
  • 表单集成允许 markdown 表单发送消息。
  • 会话历史管理，支持分线。

数据流

  • 消息格式化，支持文件附件和元数据。
  • 引用和反馈系统集成。
  • 通过 WebSocket 连接进行实时更新。

来源：web/app/components/workflow/panel/chat-record/index.tsx49-138 web/app/components/base/markdown-blocks/form.tsx32-70

开发工作流和配置

构建配置

Next.js 配置展示了生产级别的设置。

关键配置特性

  • MDX 支持文档和内容。
  • 使用远程模式配置进行图像优化。
  • 用于开发调试的代码检查器插件。
  • TypeScript 和 ESLint 集成，禁用构建时检查以提高速度。

开发与生产

  • 生产环境中禁用源映射以提高性能。
  • 用于 Docker 部署的独立输出。
  • 资产前缀和基本路径配置，以实现部署的灵活性。

来源：web/next.config.js22-69

开发环境

国际化系统

前端包含全面的 i18n 支持。

实现细节

  • i18next 与 React 集成，实现动态翻译。
  • 语言检测和切换功能。
  • 资源加载，支持懒加载以提高性能。
  • Format.js 集成，实现本地化格式设置。

使用模式

  • 基于 Hook 的翻译访问（useTranslation）。
  • 组件级别的语言切换。
  • 动态内容本地化。

来源：web/app/components/header/maintenance-notice.tsx4-36 web/app/components/base/date-and-time-picker/hooks.ts7-49

关键 UI 模式和功能

基于 Portals 的覆盖层

前端使用复杂的 Portal 系统来处理模态框和覆盖层。

PortalToFollowElem 系统

  • 下拉菜单、工具提示和模态框的定位引擎。
  • 跟随元素的行为，实现动态定位。
  • Z-index 管理和点击外部处理。

使用示例

  • 日期/时间选择器下拉菜单。
  • 配置面板。
  • 上下文菜单和工具提示。

来源：web/app/components/app/configuration/config-vision/param-config.tsx15-42 web/app/components/base/date-and-time-picker/date-picker/index.tsx200-306

功能面板系统

配置界面的标准化面板布局。

FeaturePanel 组件

  • 一致的头部/主体布局结构。
  • 图标和操作集成。
  • 边框和间距标准化。
  • 灵活的内容区域，带有可选的间距控制。

来源：web/app/components/app/configuration/base/feature-panel/index.tsx16-48

响应式设计模式

前端通过以下方式实现响应式设计：

基于 Tailwind 的响应式设计

  • 移动优先的设计方法。
  • 特定断点的实用类。
  • 灵活的网格和布局系统。

组件级别的响应式设计

  • 基于视口进行动态尺寸调整。
  • 自适应内容呈现。
  • 触摸友好的交互式元素。

来源：web/app/components/base/svg-gallery/index.tsx8-75