CloudBeaver 开发指南:从项目地图到模块化规范的完整解读 后端数据库客户端前端【免费下载链接】cloudbeaverCloud Database Manager项目地址https://gitcode.com/gh_mirrors/cl/cloudbeaver点击查看免费下载CloudBeaver 是一个开源、基于 Web 的数据库管理应用Cloud Database Manager其模块化前端承载了数据库导航器、SQL 编辑器、数据编辑器、管理后台等全部功能并通过 GraphQL 与 CloudBeaver 服务端通信。本文以仓库根目录的 AGENTS.md 为主线系统梳理该仓库面向开发者的工程约定前端项目的目录地图与依赖方向、开发环境的搭建与常用命令、模块化工作规范以及后端 GraphQL API 的命名与兼容性要求。读完本文你将能在一个大型 Yarn PnP TypeScript React 工作区中快速定位模块、遵守依赖边界、正确运行构建与校验命令并理解前后端协作时的代码生成链路。一、CloudBeaver 是什么CloudBeaver 的定位是数据库管理应用其产品形态以 Web 方式交付用户通过浏览器即可完成对多种数据库的连接、浏览、SQL 执行与数据编辑等日常运维工作。从仓库结构看项目由两大块构成前端位于 webapp/ 目录是模块化的单页应用包含数据库导航树、SQL 编辑器、数据网格、管理控制台等所有交互界面后端位于 server/ 目录是一组基于 OSGi/Tycho 的 Java 插件bundle通过 GraphQL 向客户端暴露数据操作与业务能力。两者通过 GraphQL 协议衔接前端以.gql文件声明操作后端在server/bundles/*/schema/中维护*.graphqls模式定义前端再据此生成类型安全的客户端代码。这也解释了为什么 AGENTS.md 会强调后端 GraphQL schema 是前端代码生成的输入。需要特别指出的是CloudBeaver 后端是headless无界面的它不使用 SWT 或 Eclipse RCP全部能力都以 GraphQL API 形式对外提供这与经典 Eclipse 桌面插件体系有本质区别。后端至少要支持 PostgreSQL、MySQL、Oracle、SQL Server 四类数据库对其它数据库的支持是可选的。二、前端工程地图webapp 目录结构AGENTS.md 给出了明确的项目地图下面结合仓库实际内容逐项展开。工作区根与脚本入口webapp/package.json是整个前端工作区的根它声明了 Yarn PlugnPlayPnPworkspaces./common-react与packages/*并集中存放了仓库级脚本脚本作用yarn test调用dbeaver-test即cloudbeaver/tests-runner提供的测试运行器执行全仓测试yarn lint运行 ESLint 完成仓库级静态检查yarn validate-dependencies通过core-cli-validate-dependencies校验包间依赖方向与依赖图无环yarn check-license用core-cli-check-license检查源码文件的许可证头yarn add-plugin通过core-cli-add-plugin脚手架生成新插件包工作区根同时锁定了工具链版本packageManager: yarn4.14.1React/ReactDOM 为^19TypeScript 为^5.8ESLint 为^9Vitest 为^4并通过resolutions对 lodash、immutable、axios 等传递依赖做了统一版本约束。AGENTS.md 因此要求以package.json、.yarnrc.yml和前端 CI 工作流为工具与运行时版本的唯一事实来源不要在文档中重复维护版本号。核心包与插件包的分层按 AGENTS.md 的分层约定webapp/packages/下有三类包core-*共享应用基石如core-diDI/模块注册、core-utils工具函数、core-blocksUI 原语、core-events、core-settings、core-connections、core-navigation-tree等。它们提供应用基础服务、状态管理与通用 UI是其它包的地基。plugin-*功能模块如plugin-sql-editor、plugin-data-viewer、plugin-connections、plugin-navigation-tree等。每个插件通常通过src/module.ts注册服务与启动逻辑并通过src/index.ts暴露公共 API。product-*产品组装product-default是可运行/可打包的 CE 前端入口Vite 构建目标product-default-impl负责选定 CE 的插件集合另有product-base提供公共产品底座。以plugin-sql-editor为例其 src/module.ts 调用ModuleRegistry.add({ name, configure })在configure中通过serviceCollection.addSingleton(Bootstrap, ...)注册 LocaleService、MenuBootstrap、SqlEditorView 等引导与视图服务通过addTransient(SqlEditorModel)注册每次新建编辑器时瞬态创建的数据模型。而 src/index.ts 的第一行就是import ./module.js随后把SqlEditorService、SQLEditorLoader、ACTION_SQL_EDITOR_EXECUTE等公共符号统一 re-export——这就是 AGENTS.md 所说模块注册与公共 API 分离的标准形态。GraphQL 代码生成webapp/packages/core-sdk承担 GraphQL 操作的收集与客户端类型生成新增或修改 GraphQL 操作应写成core-sdk下的.gql文件通过yarn workspace cloudbeaver/core-sdk gql:gen重新生成代码生成产物src/sdk.ts属于被忽略gitignore的自动生成文件严禁手工编辑。core-sdk/package.json里可以看到完整的代码生成工具链graphql-codegen、graphql-codegen/typescript、graphql-codegen/typescript-operations、graphql-codegen/near-operation-file-preset等以及gql:gen:dev的--watch监听模式配合product-default的dev脚本可在开发时保持客户端类型与后端 schema 同步。共享工具与 React 组件工作区还包含两级共享库webapp/common-typescript/dbeaver/*纯 TypeScript 工具如js-helpers、jdbc-uri-parser、result-set-apiwebapp/common-react/dbeaver/*React 组件库如ui-kit、react-data-grid、react-translate。这些库通过dbeaver/*命名空间导出供工作区内各包引用。三、技术栈一览AGENTS.md 用一句话概括了前端技术栈可拆解如下语言与模块TypeScript ES ModulesUI 层React仓库当前为 React 19状态管理MobX配合mobx-react-lite在组件层响应式消费依赖注入与模块注册项目自研的 DI/模块注册体系cloudbeaver/core-di的ModuleRegistry、serviceCollectionGraphQL 客户端GraphQL Code Generator graphql-request/axios构建与包管理Viteproduct-default的bundle脚本用vite build --mode production、Yarn workspaces with PnP测试Vitest Testing Library含happy-dom、msw代码质量ESLint、Prettier样式CSS Modules 基于 Tailwind 的主题体系仓库根还引入了 Tailwind 4见product-default的tailwindcss: 4.0.7。测试约定是与源码同目录共置*.test.ts/*.test.tsx紧挨被测文件样式通常也是共置的 CSS Modules。四、环境搭建与常用命令AGENTS.md 给出的开发环境初始化命令如下前端命令默认在webapp/下执行Node 版本以前端 CI 配置为准Yarn 版本以webapp/package.json中packageManager为准corepack enable cd webapp yarn install --immutable由于工作区采用 Yarn PnP--immutable安装保证锁文件.yarn.lock仓库根另有webapp/yarn.lock不被改动适合 CI 与严格复现的场景。若需要同步tsconfig.json的项目引用则要执行一次非 immutable安装让配置好的ts-project-linker自动完成引用同步自动链接失败时才手工编辑 references之后运行yarn validate-dependencies校验。日常开发与校验命令# 启动前端开发服务器需要单独运行一个兼容的 CloudBeaver API 服务 (cd packages/product-default yarn dev) # 仓库级检查在 webapp/ 下执行 yarn lint yarn test yarn validate-dependencies # 生产构建 (cd packages/product-default yarn bundle)yarn dev实际执行yarn build concurrently ... vite {}即先做一次构建与gql:gen再用concurrently并行跑 Vite 开发服务器和core-sdk的gql:gen:dev --watch保证后端 schema 变化能实时反映到客户端类型yarn bundle是yarn build vite build --mode production产出可部署的生产包若只想聚焦某个包使用该包package.json中已存在的脚本例如yarn workspace cloudbeaver/core-utils test或yarn workspace cloudbeaver/plugin-sql-editor lint。AGENTS.md 明确提醒不要发明包中不存在的脚本。许可证头模板新增源码文件必须使用以下 Apache-2.0 许可证头并替换CURRENT_YEAR为当前年份仓库现有文件如plugin-sql-editor/src/module.ts即按此格式维护版权行写作Copyright (C) 2020-2026 DBeaver Corp and others/* * CloudBeaver - Cloud Database Manager * Copyright (C) 2020-CURRENT_YEAR DBeaver Corp and others * * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. */修改已有源文件时应保留原有起始年份只把结束年份更新为当前四位数年份并通过仓库自带的 ESLint/Prettier 配置约束格式而不是手工排版。仓库根的lefthook.yml与webapp/package.json中的sync-pre-commit-hooks脚本也体现了对 pre-commit 校验的自动化管理。五、前端工作约定依赖方向与模块边界AGENTS.md 把协作规范讲得很细这些约定直接决定了大型工作区能否长期健康演进改动放进最小的归属包优先复用现有core-*抽象与 UI 原语而不是新增跨包辅助工具。依赖方向固定为 plugin → corecore-*包绝不import 或依赖plugin-*包插件可以使用 core 包的公共 API也可以使用其它插件的公共 API但要遵守管理边界与无环规则。管理功能独立成包仅管理后台使用的行为放入以-administration结尾的独立包普通非管理插件不得依赖管理包。仓库中plugin-authentication-administration、plugin-connection-administration、plugin-product-information-administration等即是这类包的实例。依赖图必须无环禁止引入直接或间接的循环依赖。只通过公共导出导入工作区包一律通过cloudbeaver/*或dbeaver/*公共导出引用禁止深入其它包的src/目录。新增依赖走 Yarn通过 Yarn 修改目标包的package.json改完跑yarn validate-dependencies。注册走 module.ts服务与引导逻辑通过包的src/module.ts注册只有启用/停用 CE 产品的插件时才改动产品组装product-default-impl。文案走本地化用户可见文本放入包的本地化文件并遵循相邻的LocaleService模式不要在组件里硬编码 UI 文案。每个包的src/LocaleService.tslocales/目录就是该约定的落地形态。GraphQL 操作走 core-sdk以.gql文件新增/修改用yarn workspace cloudbeaver/core-sdk gql:gen重新生成永不手工编辑生成产物。不提交生成/安装产物node_modules/、.pnp.*、lib/、dist/、coverage/、allure-results/一律不编辑、不提交。行为变更补测试交付前对受影响的包运行 lint 与测试跨切面或产品组装变更还要跑仓库级检查与product-default打包。六、后端与 GraphQL API 规范后端工作开始前需阅读并遵循../dbeaver/AGENTS.md中继承的 Java 与 Tycho 约定该文件属于上游 DBeaver 仓库不在当前仓库内。此外注意三点headless 无 UI不用 SWT / Eclipse RCP配置生成链路服务端配置文件由 apps/config-generator 生成修改时更新 config/template/cloudbeaver-base.conf或针对特定产品参数使用补丁patches数据库支持下限必须支持 PostgreSQL、MySQL、Oracle、SQL Server其余数据库可选仓库 server/drivers/ 下可见 mysql、postgresql、oracle、sqlserver 等驱动 bundle 与之对应。GraphQL 命名与版本兼容ID 类型ID 必须使用 GraphQL 类型IDID 类参数与输入字段必须以Id结尾例如projectId。顶层方法命名遵循{pluginId}{methodName}模式例如authLogin、rmListProjects、navNodeChildren新增公共 API 需标记since。保持已发布 API 兼容对已发布 API 采用弃用deprecate而非重命名/删除标注弃用版本且只有超过一年之后才能移除EA 专属 API 可以在公开发布前变更。新参数必须可选给已发布 API 新增的参数与输入字段必须是可选的。这些约束在server/bundles/*/schema/*.graphqls的 schema 定义与server/bundles/*/src/的解析器实现中落地前端core-sdk的代码生成正是以它们为输入。七、结语把 AGENTS.md 当作协作契约AGENTS.md 本质上是 CloudBeaver 仓库的工程师协作契约它把目录职责、依赖方向、命令入口、代码生成链路和 API 兼容策略固化成了可执行规则。对初次接触仓库的开发者而言建议按以下顺序上手先读 AGENTS.md 与webapp/package.json建立工作区分层认知从webapp/packages/plugin-sql-editor/src/module.ts这类最小插件入手理解ModuleRegistry注册与服务引导的写法按第四节命令完成安装、yarn lint/yarn test/yarn validate-dependencies全绿后再动代码改动涉及 GraphQL 时遵守改.gql→gql:gen→ 不碰sdk.ts的闭环。这套规范既保证了上百个 workspace 包之间的依赖图始终无环可维护也让前后端通过 GraphQL schema 单一事实来源保持同步是支撑 CloudBeaver 持续迭代的工程地基。赞分享后端数据库客户端前端【免费下载链接】cloudbeaverCloud Database Manager项目地址https://gitcode.com/gh_mirrors/cl/cloudbeaver点击查看免费下载相关推荐Rsyslog项目开发指南从代码规范到模块化设计Rsyslog项目开发指南从代码规范到模块化设计 前言 Rsyslog作为一款高性能的日志处理系统其代码库采用C语言开发具有模块化架构和严格的编码规范。本OpenMed 仓库工程指南深度解读从模块组织到发布守门人的完整开发规范OpenMed 仓库工程指南深度解读从模块组织到发布守门人的完整开发规范 本指南以 OpenMed 仓库根目录下的 AGENTS.md https://lin人工智能NLP医疗健康数据脱敏本地部署大模型AI 应用MCP 服务联邦学习Paseo 贡献者开发指南从仓库地图、平台门控到协议兼容的完整规范解读Paseo 贡献者开发指南从仓库地图、平台门控到协议兼容的完整规范解读 Paseo 是一款面向本地 AI 编程代理Agent的监控与控制应用支持从手机或上一篇AndroidViewAnimations代码混淆实战保护你的动画实现逻辑下一篇从数据到决策Nightingale监控可视化的图表选型指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考