Apache DolphinScheduler 前端架构深度解析Vue 3 Vite TypeScript 构建现代数据编排平台的 Web 界面【免费下载链接】dolphinschedulerApache DolphinScheduler is the modern data orchestration platform. Agile to create high performance workflow with low-code项目地址: https://gitcode.com/GitHub_Trending/dol/dolphinschedulerApache DolphinScheduler 的 Web 前端模块dolphinscheduler-ui是一套基于Vue 3 Vite TypeScript构建的现代化管理界面采用 Naive UI 作为组件库、AntV X6 实现 DAG 工作流编辑器、ECharts 渲染监控大盘与 Java 后端dolphinscheduler-api通过 axios 解耦通信。本文以该模块的 CLAUDE.md 为骨架结合仓库源码、配置文件与打包链路系统讲解其技术选型、目录结构、开发命令、前后端集成方式与典型坑点帮助读者快速上手开发、排查问题并理解 UI 在整个 DolphinScheduler 发行版中的角色。一、模块定位独立构建、随发行版分发的 Web 前端在 Apache DolphinScheduler 的多模块 Java 工程中dolphinscheduler-ui是一个独立于 Java 反应堆reactor构建的前端子模块它不参与 Maven 的 Java 编译链而是使用pnpm构建出静态资源目录dist/dolphinscheduler-dist/pom.xml 声明依赖dolphinscheduler-ui并在 dolphinscheduler-dist/src/main/assembly/dolphinscheduler-bin.xml 中将dolphinscheduler-ui/dist目录整体打入发行包最终在安装包的ui/目录下提供前端静态文件。因此无论手动打包还是执行./mvnw package都必须先运行pnpm run build:prod生成dist/否则发行包内将缺失前端资源dolphinscheduler-dist/CLAUDE.md 也明确提示broken UI build breaks the dist build。二、技术栈总览关注点选型仓库佐证框架Vue 3Composition API TypeScriptpackage.json 中vue ^3.2.39、typescript ^4.8.3构建工具Vite 6.x生产环境启用 gzip 预压缩vite.config.ts 中vite-plugin-compression状态管理Piniasrc/store 下user、project、locales、theme等 store路由Vue Router 45 大顶层路由分组src/router/modulesHTTPaxios唯一封装入口 src/service/service.ts32 个后端资源模块见下文i18nvue-i18nen_US/zh_CN双语src/localesUI 组件Naive UI 2.33.5naive-ui: 2.33.5图编辑AntV X6DAG 画布 antv/layout自动布局antv/x6 ^1.34.1、antv/layout 0.1.31图表ECharts 5.x监控大盘、D3 7.xecharts ^5.3.3、d3 7.8.5其他monaco-editor脚本/任务代码编辑、js-cookie、qs、lodash、vueuse/corepackage.json从 package.json 看UI 还内置了monaco-editor用于 Shell/SQL 等任务的代码编辑体验、protobufjs部分接口的序列化、screenfull全屏与nprogress路由进度条等辅助库形成了完整的前端工程能力闭环。三、推荐工具链与版本约束CLAUDE.md 与模块 README 一致强调版本约束Node 16.x不要使用 18pnpm 7.x。原因Node 18/20 自带的新版 OpenSSL 与旧版 webpack/vite 配置存在兼容性问题Node 版本漂移是 UI 开发中排名第一的破坏性因素。.nvmrc/package.json中的packageManager字段才是权威版本声明应以仓库实际固定版本为准。四、常用脚本命令在dolphinscheduler-ui/目录下执行# 1. 安装依赖 pnpm install # 2. 启动 Vite 开发服务器默认端口 5173 pnpm run dev # 3. 生产构建vue-tsc 类型检查 Vite 构建 → dist/ pnpm run build:prod # 4. 代码检查自动修复 .ts/.tsx/.vue pnpm run lint # 5. 代码格式化作用于 src/ pnpm run prettier对应脚本定义见 package.json脚本底层命令作用devvite开发服务器默认:5173将/dolphinscheduler代理到后端build:prodvue-tsc --noEmit vite build --mode production先做全量 TS 类型检查失败即终止再产出dist/linteslint src --fix --ext .ts,.tsx,.vueESLint 自动修复prettierprettier --write src/**/*.{vue,ts,tsx}Prettier 统一风格previewvite preview本地预览构建产物开发服务器代理逻辑见 vite.config.ts所有/dolphinscheduler前缀请求被代理到.env.development中的VITE_APP_DEV_WEB_URL。五、环境变量与前后端联调配置仓库中存在两个环境文件开发环境 .env.developmentNODE_ENVdevelopment VITE_APP_DEV_WEB_URLhttp://127.0.0.1:12345pnpm run dev启动后浏览器访问http://localhost:5173前端请求/dolphinscheduler/...会被 Vite 代理转发到VITE_APP_DEV_WEB_URL即默认假设dolphinscheduler-api服务运行在本机12345端口按 README 说明修改该变量时只需填写http://IP:端口末尾不要带/例如http://127.0.0.1:12345。生产环境 .env.productionNODE_ENVproduction VITE_APP_PROD_WEB_URLpnpm run build:prod打包时需按实际部署场景设置VITE_APP_PROD_WEB_URL确保打包产物能请求到正确的后端服务地址为空时走同源策略即前端与dolphinscheduler-api部署在同一域名下由反向代理统一转发。六、顶层源码目录结构dolphinscheduler-ui/src/ ├── assets/ # 静态图片 字体 ├── components/ # 可复用 UI 部件表单控件、数据展示、DAG 画布组件 ├── layouts/ # 应用外壳 / 页面框架 ├── locales/ # i18n 翻译en_US、zh_CN ├── router/ # Vue Router 配置每个顶层功能一个模块 ├── service/ # axios 实例 每个后端资源一个文件 ├── store/ # Pinia 状态user、project、locales、theme、timezone、route、ui-setting、file ├── views/ # 页面组件 └── utils/ # 工具函数6.1 路由5 大顶层分组src/router/modules 下按功能拆分为 5 个顶层路由模块projects项目管理、resources资源中心、datasource数据源、monitor监控中心、security安全中心外加一个ui-setting界面设置。src/router/routes.ts 使用 Vite 的import.meta.glob(/src/views/**/**.tsx)自动扫描views/下所有 TSX 文件生成组件映射配合utils.mapping完成路由与页面组件的绑定新增页面时只需在views/添加 TSX 文件与对应路由模块即可。6.2 服务层按后端资源拆分的 API 模块src/service/modules 下按后端资源拆分出32 个 API 模块login、logout、users、tenants、worker-groups、queues、alert-group、alert-plugin、data-source、projects、workflow-definition、workflow-instances、task-definition、task-instances、task-group、schedules、executors、monitor、audit、token、environment、cluster、k8s-namespace、log、lineages、projects-analysis、projects-parameter、projects-preference、projects-worker-group、dynamic-dag、dag-menu、ui-plugins、azure等基本一一对应 dolphinscheduler-api 后端的 Controller 资源。6.3 状态管理Pinia storessrc/store 中管理 8 个全局 storeuser用户与会话、project项目上下文含dynamic/dag动态 DAG 状态、locales语言、theme明暗主题、timezone时区、route路由辅助、ui-setting界面偏好含 API 超时时间、file文件资源。项目依赖pinia-plugin-persistedstate实现状态持久化。6.4 页面视图src/views 下包含home首页、projects工作流/任务编排含最复杂的 DAG 编辑器、datasource数据源管理、monitor监控中心、resource资源中心、security安全中心、login登录、profile用户信息、password改密、about产品信息、ui-setting界面设置。七、后端集成axios 封装与拦截器唯一 axios 封装位于 src/service/service.ts全项目 API 调用均复用此实例const baseRequestConfig: AxiosRequestConfig { baseURL: import.meta.env.MODE development ? /dolphinscheduler : import.meta.env.VITE_APP_PROD_WEB_URL /dolphinscheduler, timeout: uiSettingStore.getApiTimer ? uiSettingStore.getApiTimer : 20000, ... }关键行为全部可从源码确认baseURL 双模式开发模式为/dolphinscheduler由 Vite 代理转发生产模式为VITE_APP_PROD_WEB_URL /dolphinscheduler通常同源部署在反向代理之后。请求拦截器service.ts自动注入sessionId请求头取自userStore并读取languagecookie 注入language请求头。响应拦截器service.ts统一解包后端{ code, msg, data }三层结构——code 0时直接返回datacode缺失非标准结构时原样返回其他 code 触发handleError开发模式打印日志 window.$message.error并抛出错误。401 / 504 统一处理service.ts清空userStore中的会话信息并跳转/login。参数序列化使用qs.stringify(params, { arrayFormat: repeat })数组参数以重复键a1a2形式提交。重要提醒来自 CLAUDE.md本项目没有生成 OpenAPI SDK后端方法签名与这些 TypeScript 封装各自独立演进。后端 Controller 变更后前端往往要到运行时出现 4xx / 5xx 才能发现回归。开发时改动接口务必前后端联动验证。八、i18n 国际化机制当前支持en_US、zh_CN两种语言语言包位于 src/locales语言切换偏好通过js-cookie写入languagecookiepackage.json 依赖js-cookie ^3.0.1语言状态同时由 Pinialocalesstore 管理请求时由 axios 请求拦截器读取 cookie 注入请求头保证前端界面语言与后端返回文案一致。九、生产构建与 gzip 预压缩vite.config.ts 中通过vite-plugin-compression配置了 gzip 预压缩viteCompression({ verbose: true, disable: false, threshold: 10240, // 仅压缩超过 10KB 的文件 algorithm: gzip, ext: .gz, deleteOriginFile: false // 保留原文件 })注意两点生产构建 base 路径为/dolphinscheduler/ui/vite.config.ts部署时需保证静态资源可通过该路径访问调试某个文件加载不出来时先确认服务器是否正确返回.gz变体因为很多场景是压缩文件未随服务器配置正确服务。十、最复杂的视图AntV X6 DAG 编辑器工作流编排是 DolphinScheduler 的核心能力其 DAG 编辑器位于 src/views/projects/workflow/components/dag是全项目最复杂、最需要谨慎改动的视图。目录下约 30 个文件覆盖了完整的图编辑能力文件部分职责dag-canvas.tsx/index.tsx画布主组件与整体编排use-canvas-init.ts画布初始化X6 Graph 实例use-custom-cell-builder.ts自定义节点/边构建器use-dag-drag-drop.ts拖拽创建任务节点use-cell-active.ts/use-cell-update.ts节点激活与属性更新use-node-status.ts/dag-node-status.tsx运行状态着色展示use-graph-auto-layout.ts/dag-auto-layout-modal.tsx基于antv/layout的自动布局use-node-search.ts/use-node-menu.ts节点搜索与右键菜单use-task-edit.ts任务编辑联动use-business-mapper.ts/use-graph-backfill.ts业务数据与图数据双向映射/回填dag-toolbar.tsx/dag-sidebar.tsx/dag-context-menu.tsx工具栏、侧边栏与右键菜单dag-startup-param.tsx/dag-save-modal.tsx启动参数与保存弹窗dag-config.ts/types.ts常量与类型定义DAG 编辑器把工作流定义 ↔ 图数据模型做了双向映射涉及节点状态展示运行中/成功/失败着色、拖拽、连线、自动布局、批量回填等大量交互逻辑改动风险高社区在 CLAUDE.md 中明确建议Touch carefully。十一、测试策略无单测依赖 E2Edolphinscheduler-ui模块没有配置单元测试仓库中不存在*.spec.ts/*.test.ts前端功能由 dolphinscheduler-e2e 模块以 Selenium 驱动的浏览器端到端测试覆盖UI API 集成场景。十二、常见坑点清单Gotchas综合 CLAUDE.md 与源码在实际开发中优先排查以下问题Node 版本漂移必须使用固定 Node 16.x pnpm 7.x18/20 会因 OpenSSL 变化破坏构建。忘记构建 dist发行打包前务必先执行pnpm run build:proddolphinscheduler-dist直接从dolphinscheduler-ui/dist取材dolphinscheduler-bin.xml。接口变更回归无 OpenAPI SDK后端签名变化需运行时才能发现改动接口前后端要同步验证。gzip 预压缩生产环境文件以.gz变体提供排查加载失败先看服务器是否正确服务压缩文件。代理与 baseURL开发走/dolphinscheduler代理目标VITE_APP_DEV_WEB_URL默认 12345 端口生产走VITE_APP_PROD_WEB_URL /dolphinscheduler两个环境变量别配错。DAG 编辑器高复杂度涉及 src/views/projects/workflow/components/dag 的改动需格外谨慎回归测试要覆盖拖拽、连线、状态回填等核心交互。十三、与其他模块的关系dolphinscheduler-api ←─ HTTP/JSON ── dolphinscheduler-ui本模块 │ │ pnpm run build:prod │ ▼ dolphinscheduler-dist ── 打包 dist/ → 发行包 ui/ 目录 ▲ dolphinscheduler-e2e ── 基于 Selenium 的集成测试UI APIdolphinscheduler-apiUI 调用的后端服务提供登录、项目、工作流、任务、数据源、监控等 REST APIdolphinscheduler-dist在发行包中打包dist/到ui/目录dolphinscheduler-e2e对集成后的 UI API 进行浏览器端到端测试。结语dolphinscheduler-ui以 Vue 3 Vite TypeScript 的现代前端工程栈承载了 DolphinScheduler 全部可视化能力——从登录鉴权、项目管理、数据源配置到基于 AntV X6 的 DAG 工作流编排、基于 ECharts 的监控大盘再到完善的双语国际化与明暗主题。理解其独立构建、后端解耦、dist 交付的定位掌握环境变量、axios 拦截器、路由自动映射与构建链路就能在 dolphinscheduler-ui 中高效地开发与排障。【免费下载链接】dolphinschedulerApache DolphinScheduler is the modern data orchestration platform. Agile to create high performance workflow with low-code项目地址: https://gitcode.com/GitHub_Trending/dol/dolphinscheduler创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考