可视化大屏数据展示系统 拖拽生成各种炫酷的大屏

源码基础信息

系统简介

核心功能特点

• 编辑器基础功能：完成编辑器核心操作，支持大屏的编辑、预览、导入（外部模板）、导出（本地备份）、保存（快照/模板），满足大屏开发全流程需求
• 图层精细化管理：支持图层置顶、置底、上下移动调整层级；可单独控制图层显示/隐藏；支持图层复制、剪切、粘贴，提升大屏布局效率
• 组件灵活操作：组件支持缩放（比例调整）、旋转（角度自定义）、拖动（位置微调）；支持组件复制、粘贴、组合（多组件合并）、拆分（组合组件拆分）、移除；提供组件自动对齐功能（如左对齐、居中对齐、等距分布），保障大屏布局工整
• 操作记录回溯：支持用户操作记录的恢复（Redo）与撤销（Undo），避免误操作导致的开发成果丢失
• 自定义组件支持：允许用户开发自定义组件并接入平台，同时支持为自定义组件配置专属配置项（如样式、数据来源），扩展大屏组件库
• 主题切换：支持明暗两种主题切换，适配不同使用场景（如白天亮色主题、夜间暗色主题），提升视觉体验
• 组件与依赖管理：采用Monorepo模式管理组件与项目依赖，实现组件模块化开发与维护，降低依赖冲突风险
• 数据灵活接入：支持组件数据自定义接入，同时提供数据动态处理能力（JS逻辑已完成开发），满足复杂数据展示需求
• 多类型接口适配：已完成对多种数据来源的适配，包括示例数据（测试用）、静态数据（本地JSON）、HTTP接口数据（对接后端服务），覆盖常见数据接入场景

核心技术点

• 前端框架与构建工具：基于Vue3 + Vite + TypeScript开发，兼顾开发效率与代码健壮性，Vite提供快速热更新，提升开发体验
• 界面组件库：使用NaiveUI作为界面库，提供丰富的UI组件，保障系统界面的美观性与交互流畅性
• 核心功能封装：采用面向对象方式封装路由、请求、存储等核心模块，提升代码可维护性与复用性
• 组件加载优化：组件支持自动扫描注册与异步加载，减少初始加载资源体积，提升页面渲染速度
• 快照数据存储：使用IndexDB存储大屏快照数据，减少内存占用，加快快照数据的读写与访问速度
• 组件解耦设计：实现组件与基础框架依赖库的解耦，组件独立依赖管理，方便后续组件的独立开发、更新与维护