可拖拽式低代码数据可视化大屏开发平台

该平台是一款以「可视化操作、低代码开发、高扩展性」为核心的大屏搭建工具，支持用户零代码拼接炫酷数据大屏，同时提供组件自定义开发与接入能力，兼顾易用性与灵活性。

一、核心功能特点

1. 编辑器基础操作与数据管理

• 编辑器核心能力已落地：支持编辑模式（组件拖拽与配置）、预览模式（大屏效果实时预览），并提供项目「导入、导出、保存」功能，保障开发成果可复用、可备份。
• 接口管理适配完成：已支持三种数据来源接入 ——示例数据（快速调试组件）、静态数据（本地固定数据）、HTTP 接口数据（对接真实业务系统），满足不同开发阶段的数据需求。

2. 图层与组件精细化控制

（1）图层操作

• 支持图层全生命周期管理：包括图层置顶 / 置底、上下移动（调整层级顺序）、显示 / 隐藏（控制组件可见性）、复制 / 剪切 / 粘贴（快速复用图层），精准控制大屏元素层级。

（2）组件操作

• 组件交互功能完善：支持组件缩放、旋转、自由拖动（可视化调整位置与尺寸），以及复制 / 粘贴、组合 / 拆分、一键移除（批量管理组件）；同时提供组件自动对齐功能，确保大屏布局规整。
• 操作可逆性保障：支持用户操作记录的恢复（Redo）、撤销（Undo） ，避免误操作导致的开发成本浪费。

3. 数据接入与动态处理

• 数据接入灵活：支持组件自定义数据接入，用户可根据业务需求为不同组件配置专属数据源。
• 数据动态处理：已完成JS 数据动态处理能力，支持通过自定义脚本对原始数据进行过滤、计算、格式化，满足大屏数据可视化的个性化展示需求。

4. 个性化配置与扩展能力

• 视觉个性化：支持明暗主题切换，适配不同使用场景（如暗色主题适配夜间开发、亮色主题提升白天视觉清晰度）。
• 组件高扩展性：支持用户自定义组件开发，并提供「组件自定义配置项」能力，允许用户为自研组件添加专属参数（如颜色、尺寸、数据字段映射等），满足特殊业务场景的大屏需求。

二、关键技术架构

1. 核心技术栈

项目基于 Vue3 + Vite + TypeScript 构建，确保代码类型安全与开发热更新效率；界面组件库采用 NaiveUI，保障界面美观度与交互一致性。

2. 技术实现亮点

• 架构封装优化：采用「面向对象」思想封装路由、请求、存储模块，提升代码可维护性与复用性，降低后续功能迭代成本。
• 组件加载优化：组件采用「自动扫描注册 + 异步加载」机制，无需手动注册组件，同时减少初始加载资源体积，显著提升大屏渲染速度。
• 快照数据存储优化：使用 IndexDB 存储项目快照数据，替代传统内存存储，大幅减少快照数据对内存的占用，同时加快快照的读写与访问速度。
• 组件依赖解耦：设计「组件独立依赖」模式，将组件与基础框架的依赖库解耦，后续开发新组件时无需依赖框架核心库，支持组件独立开发、测试与迭代。