OpenDataV(大屏)

整体概览

这是一个基于 pnpm workspace 的前端多包(monorepo)项目,核心是一个 Vue3 低代码/大屏可视化设计器,外围有示例项目和文档站。

UI框架:Naive UI

20260226-评价:功能简单适合微服务集成,但是功能不完成编辑功能几乎没有,需要自行优化(可作为脚手架修改)。

开发环境

(和官方不同,用官方的有问题)

名称版本
node18.17.0
pnpm10.30.2
vue3.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.jsonvite 配置。
  • 依赖 @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 里的组件资源)
    • 右侧配置面板(属性编辑、样式调节、数据绑定配置)
    • 页面/大屏的保存、加载等核心业务逻辑
    • 可以单独作为一个库,嵌入到其他系统中当“可视化设计器”。