可拖拽大屏
 
 
 
 
 
Go to file
LX e124c7a0ba no message 2023-12-06 16:48:25 +08:00
build no message 2023-12-05 13:23:01 +08:00
docs no message 2023-12-05 13:23:01 +08:00
examples 大屏数据展示 2023-12-06 16:29:45 +08:00
mock no message 2023-12-05 13:23:01 +08:00
public no message 2023-12-05 13:23:01 +08:00
resource no message 2023-12-06 16:48:25 +08:00
screenshot no message 2023-12-05 13:23:01 +08:00
src no message 2023-12-06 16:48:25 +08:00
.editorconfig no message 2023-12-05 13:23:01 +08:00
.env no message 2023-12-05 13:23:01 +08:00
.env.development no message 2023-12-05 13:23:01 +08:00
.env.production no message 2023-12-05 13:23:01 +08:00
.eslintignore no message 2023-12-05 13:23:01 +08:00
.eslintrc.js no message 2023-12-05 13:23:01 +08:00
.gitignore no message 2023-12-05 13:23:01 +08:00
.npmrc no message 2023-12-05 13:23:01 +08:00
LICENSE no message 2023-12-05 13:23:01 +08:00
README.md no message 2023-12-05 13:25:02 +08:00
index.html no message 2023-12-05 13:23:01 +08:00
package.json no message 2023-12-06 16:48:25 +08:00
pnpm-lock.yaml 大屏数据展示 2023-12-06 16:29:45 +08:00
pnpm-workspace.yaml no message 2023-12-05 13:23:01 +08:00
postcss.config.js no message 2023-12-05 13:23:01 +08:00
stylelint.config.js no message 2023-12-05 13:23:01 +08:00
tailwind.config.js no message 2023-12-05 13:23:01 +08:00
tsconfig.json no message 2023-12-05 13:23:01 +08:00
vite.config.ts no message 2023-12-05 13:23:01 +08:00

README.md

简介

🎃这是一个纯前端的拖拽式可视化低代码数据可视化🌈开发平台,你可以用它自由的拼接成各种炫酷的大屏,同时支持用户方便的开发自己的组件并接入平台。

目前该项目在不断的完善中,

👁️预览

🤿 页面编辑

  1. 组件添加 screenshots2.gif

  2. 组件操作 screenshots1.gif

  3. 组件数据配置 screenshots.gif

🖇️ 接口管理

API.png

💒功能

  • 🎊 编辑器页面基本功能完成,包括编辑、预览、导入、导出、保存
  • 🪄 图层的置顶、置底、上下移动、显示、隐藏、复制、剪切、粘贴
  • 🖼️ 组件的缩放、旋转、拖动、复制、粘贴、组合、拆分、移除、自动对齐
  • 🔮 支持用户操作记录的恢复、撤销功能
  • 🧶 支持用户自定义组件
  • 📔 支持组件的用户自定组件配置项
  • 🏪 支持明暗主题切换
  • 🧬 使用Monorepo模式进行组件和依赖管理
  • 🧶 组件数据自定义接入
  • 🔌 数据动态处理JS已完成
  • 🖇️ 接口管理(示例数据、静态数据、HTTP接口数据已完成适配)

🎢技术点

本项目采用Vue3 + vite + TypeScript开发,界面库使用NaiveUI使用面向对象方式封装了路由、请求、存储组件采用自动扫描注册、异步加载提升渲染速度使用IndexDB存储快照数据减少快照数据内存占用加快访问速度组件独立依赖解耦了组件和基础框架的依赖库方便后续独立开发组件。

目前仅开发了部分组件,后续还会继续完善。

计划功能

  • 组件管理
  • 脚本管理Python待支持
  • GraphQL、GRPC、WebScoket、MQTT、SocketIO多种数据接口适配
  • 代码生成
  • 动态文档
  • 全局数据接入

💂开发

🧊开发环境

名称 版本
node 16.14.x
pnpm 7.9.3
vue 3.2.37

🚥目前仅在 ChromeMicrosoft Edge 最新版浏览器测试过,其他浏览器未测试

🎮启动项目


# 安装依赖
pnpm install
或
pnpm bootstrap

# 运行项目
pnpm dev

# 打包项目
pnpm build

🧑‍💻代码提交

git commit 信息请按照如下规范进行书写

  • feat: 新功能
  • fix: 修复 Bug
  • docs: 文档修改
  • perf: 性能优化
  • revert: 版本回退
  • ci: CICD 集成相关
  • test: 添加测试代码
  • refactor: 代码重构
  • build: 影响项目构建或依赖修改
  • style: 不影响程序逻辑的代码修改
  • other: 不属于以上类型的其他类型(日常事务)