更新记录

1.0.0（2026-08-02）

平台兼容性

云端兼容性

uni-app(5.21)

云函数类插件通用教程

使用云函数类插件的前提是：使用HBuilderX 2.9+

x1-datav - 数据大屏可视化管理平台

项目演示

在线演示地址：https://static-mp-59e26d1e-620f-45f5-927d-53f8ae9065fc.next.bspapp.com/

测试账号：admin
测试密码：admin888

打开演示后，可从「我的大屏」创建项目，进入编辑器体验组件拖拽、属性配置、发布和分享等功能。

📌 项目简介

x1-datav 是一套基于 uni-app Vue 3 + uniCloud 的数据大屏可视化管理平台模板。它提供从用户登录、可视化编辑、数据配置到发布分享和后台管理的完整流程，适合用于经营分析、设备监控、指挥中心、业务看板等 H5 数据展示场景。

插件内置 ECharts 图表组件和本地中国地图数据；大屏配置、模板、分享链接及审计记录均存储在 uniCloud 云数据库中。

✨ 核心功能

• ✅ 拖拽式编辑器：组件可拖拽添加、缩放、旋转、复制、删除、锁定和显隐
• ✅ 图层与排版：支持图层排序、对齐、水平/垂直等距分布、网格吸附和缩放预览
• ✅ 丰富组件库：折线、柱状、饼图、散点、面积、地图、仪表盘、雷达、漏斗、热力图、数字、进度条、表格、排行榜、文本、图片和视频
• ✅ 灵活数据源：支持静态数据、HTTP API 和 uniCloud 数据库查询，并可配置自动刷新
• ✅ 画布与样式：支持画布尺寸、背景色/渐变/背景图、遮罩、网格，以及组件边框、阴影、透明度和入场动画
• ✅ 大屏全生命周期：新建、编辑、复制、预览、发布、版本快照、导入导出
• ✅ 模板与样式：支持保存大屏模板、模板导入导出及图表样式模板管理
• ✅ 分享与权限：可创建公开分享链接，支持访问密码、有效期和撤销分享
• ✅ 用户与后台：支持注册登录、验证码、密码修改、用户/大屏/模板/分享管理及操作审计

🧠 支持平台

🚀 快速开始

1️⃣ 安装前置依赖

请使用 HBuilderX 3.1.0+ 创建或打开一个 uni-app Vue 3 项目，并开通、关联 uniCloud 云空间。

本插件为 H5 大屏编辑器，需要在项目根目录安装下列前端依赖：

npm install echarts pinia element-plus @element-plus/icons-vue lodash-es

页面样式使用原子化 CSS 类名；请确保宿主项目已经配置可识别这些类名的原子化 CSS 方案（例如 UnoCSS 或 Tailwind CSS）。

认证云函数依赖 uni-config-center 和 uni-captcha。请在项目中安装对应 uni_modules，并完成 uni-id 的基础配置。

2️⃣ 导入插件与页面

将 x1-datav 导入项目的 uni_modules 目录。将插件内的 pages_init.json 页面配置合并至项目的 pages.json，或通过 HBuilderX 的插件导入流程自动写入页面配置。

默认入口页为：

/uni_modules/x1-datav/pages/login/login

如需作为应用首页，可在项目 pages.json 中将该页面调整到 pages 数组首位。

3️⃣ 初始化云数据库

在 HBuilderX 的 uniCloud 数据库控制台中，上传插件 uniCloud/database 下的全部 schema 文件：

dv-audit-logs
dv-datasources
dv-screen-versions
dv-screens
dv-shares
dv-style-templates
dv-system-config
dv-templates

同时需要具备 uni-id-users 集合，以及验证码功能所需的 opendb-verify-codes 集合；它们通常随 uni-id、uni-captcha 模块安装创建。

4️⃣ 配置认证密钥

在 uni-config-center 的 uni-id 配置中设置安全的 tokenSecret；可选设置 passwordSecret 与 tokenExpiresIn。所有 x1-datav-* 云函数使用同一份 tokenSecret 校验登录令牌，因此各环境必须保持一致。

请勿使用示例密钥上线，也不要将真实密钥提交到仓库。

5️⃣ 部署云函数

将下列目录中的云函数上传并部署到已关联的云空间：

uniCloud/cloudfunctions/x1-datav-auth
uniCloud/cloudfunctions/x1-datav-screen
uniCloud/cloudfunctions/x1-datav-template
uniCloud/cloudfunctions/x1-datav-share
uniCloud/cloudfunctions/x1-datav-style
uniCloud/cloudfunctions/x1-datav-admin

云函数运行时为 Node.js 18。首次部署时，请按各云函数 package.json 安装依赖；确保 uni-config-center 和 uni-captcha 的 common 模块路径在当前项目中可用。

6️⃣ 设置首个管理员

先通过登录页注册一个账号，然后在 uniCloud 数据库的 uni-id-users 集合中，将该用户的 is_admin 字段设置为 true。重新登录后即可进入「管理后台」。

🧩 使用方式

完成部署后，运行 H5 项目并按以下流程使用：

1. 在登录页注册账号并完成验证码校验。
2. 进入「我的大屏」，点击「新建大屏」。
3. 在编辑器左侧选择或拖拽组件到画布。
4. 在右侧属性面板配置组件位置、样式、数据和图表选项。
5. 点击「保存」持久化草稿；点击「预览」查看展示效果；点击「发布」生成可访问的大屏。
6. 使用「分享」创建带密码或有效期的访问链接，或将当前大屏保存为模板。

页面路由

📊 组件与数据配置

内置组件

数据源类型

使用外部 API 时，请在 dv-system-config 的 apiWhitelist 中维护允许访问的域名，并同时完成浏览器跨域（CORS）配置；不要在大屏配置中填写敏感密钥。

📁 项目结构

x1-datav/
├── components/                   # 编辑器、图表及基础组件
├── pages/                        # 登录、列表、编辑、展示、模板、分享、后台页面
├── js_sdk/                       # 云函数 API、Pinia 状态、类型与工具方法
├── static/                       # 图标、地图 GeoJSON、字体和主题样式
├── uniCloud/
│   ├── cloudfunctions/           # 认证、大屏、模板、分享、样式、后台云函数
│   └── database/                 # 数据库 schema
├── pages_init.json               # 需合并到主项目的页面配置
├── package.json                  # uni_modules 插件配置
├── readme.md
└── changelog.md

⚠️ 注意事项

• 本插件定位为 H5 数据大屏编辑平台，建议在桌面端 Chrome 浏览器中进行编辑。
• 运行前请确认宿主项目已注册 Pinia，并已引入 Element Plus 及其样式；否则界面组件和通知功能无法正常工作。
• 云函数使用 JWT 认证。修改 uni-id 的 tokenSecret 会使既有登录令牌失效。
• 发布前请检查外部接口跨域、接口白名单、分享有效期及数据库权限，避免公开敏感数据。
• 大屏缩略图由浏览器端生成。若画布内包含跨域图片或视频资源，浏览器安全策略可能导致缩略图生成失败。