整体概览
这是一个基于 pnpm workspace 的前端多包(monorepo)项目,核心是一个 Vue3 低代码/大屏可视化设计器,外围有示例项目和文档站。
UI框架:Naive UI
20260226-评价:功能简单适合微服务集成,但是功能不完成编辑功能几乎没有,需要自行优化(可作为脚手架修改)。
开发环境
(和官方不同,用官方的有问题)
| 名称 | 版本 |
|---|---|
| node | 18.17.0 |
| pnpm | 10.30.2 |
| vue | 3.2.37 |
目录结构
.workflow
其他流水线配置(例如公司或 Gitee 的 CI/CD),里面有 pipeline-20241202.yml。
.husky
Husky Git 钩子配置目录,例如 commit / push 前自动执行 eslint、prettier 等。
docs
文档站源码:
- Content: 文档正文内容(Markdown / 配置等)。
- modules: 文档模块、路由或侧边栏结构相关代码。
- tutorial: 教程类文档或示例。
- 这个目录本身有 package.json,是一个独立的 Vue 文档应用。
examples
示例应用:
- 有自己的 package.json 和 vite 配置。
- 依赖 @open-data-v/base/ui/data/scripts/designer 等 workspace 包。
- 用来本地运行、调试和演示整个设计器的实际效果,是“集成示例项目”。
mock
Mock 服务与假数据:
- 使用 mockjs + vite-plugin-mock。
给 examples 或其他应用提供本地接口模拟,方便前端开发不用真实后端。
resource
组件“资源库”,按类别划分:
- 子目录如:Basic / Border / Container / Decoration / echarts / Gauge / Progress / Table / Text。
- 一般用于存放各类可视化组件的配置文件、静态资源、缩略图、默认 schema 等。
resources
组件资源注册/索引:
- 子目录 Basic / Chart / Gauge 和一个 components.ts。
- 通常是将 resource 中的各种组件资源集中注册成列表或映射,供设计器加载、渲染组件面板使用。
screenshot
README、文档或仓库介绍中使用的截图、动图和宣传图(如 screenshots.gif 等)。
packages 多包结构
packages 下是项目的核心可复用 npm 包,每个都有自己的 package.json 和打包配置:
- packages/base – 公共基础包
- name: "@open-data-v/base",描述里写的是“公共基础包”。
- 存放项目通用逻辑:如事件总线、工具函数、公共类型定义、运行时基础能力等。
- 被 ui / data / scripts / designer 等多个包依赖,是整个系统的“底座”。
- packages/ui – UI 基础包
- name: "@open-data-v/ui",描述“UI基础包”。
- 封装通用 UI 组件和样式(按钮、面板、颜色处理、主题等)。
- 依赖 @open-data-v/base,侧重界面展示与交互,不直接关心数据来源。
- packages/data – 数据处理基础包
- name: "@open-data-v/data",描述“数据处理基础组件包”。
- 提供数据源配置、请求封装、定时拉取、数据转换等与数据相关的能力。
- 重点是“怎么从接口/静态数据中拿到数据,并转成组件可用的格式”。
- packages/scripts – 脚本基础包
- name: "@open-data-v/scripts",描述“脚本基础包”。
- 和 base/ui 联合,提供脚本化能力,比如:
- 组件中的自定义 JS 逻辑
- 事件触发后执行脚本
- 更复杂的行为编排
- 也是一个可以发布到 npm 的独立库。
- packages/designer – 设计器核心包
- name: "@open-data-v/designer",描述中说明是“拖拽式、可视化、低代码数据可视化大屏应用基础组件包”。
- 依赖 @open-data-v/base 和 @open-data-v/ui。
- 这里通常包含:
- 画布 / 画布图层 / 对齐、吸附逻辑
- 左侧组件面板(会用到 resource/resources 里的组件资源)
- 右侧配置面板(属性编辑、样式调节、数据绑定配置)
- 页面/大屏的保存、加载等核心业务逻辑
- 可以单独作为一个库,嵌入到其他系统中当“可视化设计器”。