更新记录

1.0.0（2026-03-17）

更新日志

[0.2.0] - 2026-03-17

全站配色升级

• 全站切换为"赛博蓝"(Cyber Blue) 主题配色 (#0a0e1a + #00d4ff)
• 新增 :root 级别 CSS 变量系统，替换原 .figma-dark 作用域方案
• UnoCSS 主题色更新为 #00d4ff，新增 accent、success、warning、danger 语义色
• 登录页、首页、编辑器、模板库、分享管理、管理后台全部统一配色
• Element Plus 暗色变量覆盖迁移至 :root 级别

首页改版

• 新增左侧导航栏（220px），支持跳转：我的大屏、模板库、分享管理、管理后台
• 新增数据概览卡片（总项目数、已发布、草稿箱、总浏览量）
• 移除旧的文字统计，改为可视化卡片展示

编辑器精简

• 移除画布背景高级功能：叠加遮罩（纯色/渐变/多层）、混合模式、高斯模糊、蒙版裁剪、图片位置精调
• 移除组件样式高级功能：四角独立圆角、单边边框控制、阴影 spread/inset
• 移除样式模板系统：预设模板（Figma Dark/Ocean/Vibrant 等 9 个）、云端样式模板 CRUD、模板中心弹窗、导入模板 JSON
• 移除画布云端模板功能

编辑器增强

• 新增组件拖拽添加：从组件库拖拽到画布，自动定位到鼠标落点（H5）
• 新增图层拖拽排序：图层面板支持拖拽重排，自动更新 zIndex
• 新增数据库数据源面板：集合名称、查询条件、返回字段、排序、限制条数
• 新增字段映射 UI：X 轴字段、Y 轴字段、系列字段（API/数据库模式）
• ChartComponent 支持从 API/数据库动态获取数据并自动刷新
• API 面板自动刷新绑定迁移至顶层 DataConfig
• 移除 API 面板"数据转换"输入框（面向业务用户简化）

编辑器工具栏优化

• 顶部工具栏固定一行显示，不再换行撑高
• 中间工具区域超出部分裁剪，末尾固定"更多"下拉按钮展开全部工具
• 新增"存为模板"按钮

模板库

• 模板列表页重新设计：简化 hero 区域，移除官方模板/分类概念
• 改为用户私有模板列表 + 搜索/排序
• 新增模板导入功能（JSON 文件，含格式/大小校验）
• 新增模板导出功能（Blob 下载 JSON）
• 新增模板删除功能
• 保留"套用"功能（从模板创建大屏）
• 新增 src/api/template.ts API 模块

分享管理

• 页面 UI 重新设计，移除 "SHARE MATRIX" 等过度装饰
• 新增左侧导航栏，与首页/模板库保持一致
• 筛选区简化为内联搜索 + 状态标签

云函数配置

• 所有云函数新增 package.json，配置 runtime: Nodejs18
• screen/template/share/admin/style 新增 uni-config-center 依赖声明
• 修复云端部署后 token 验证失败（401）的问题

依赖更新

• 新增 @popperjs/core、async-validator 依赖（Element Plus peer deps）
• vite.config.ts optimizeDeps 新增上述两个包

新增文件

• src/api/template.ts — 模板 API 模块
• src/icons/grip-vertical.svg — 拖拽手柄图标
• docs/superpowers/specs/2026-03-17-datav-platform-optimization-design.md — 设计文档
• docs/superpowers/plans/2026-03-17-datav-platform-optimization.md — 实施计划

[0.1.0] - 2025-xx-xx

Phase 1: MVP

用户认证

• 登录/注册页面
• Token 持久化存储
• 用户状态管理

大屏管理

• 大屏列表（卡片/列表视图切换）
• 搜索、筛选、排序
• 新建、编辑、预览、复制、删除

可视化编辑器

• 组件库（图表/基础/装饰三类）
• 画布渲染（背景、网格）
• 组件选中、移动、缩放
• 属性面板（画布设置、组件属性、数据配置）
• 图层面板（显示/隐藏、锁定）
• 撤销/重做（50 步历史）

图表组件

• 折线图、柱状图、饼图、散点图、面积图
• 仪表盘、雷达图、漏斗图、热力图、地图
• 数字展示、进度条、数据表格、排行榜
• 文本、图片、视频

大屏展示

• 全屏展示
• 自适应缩放
• 分享与密码保护

管理后台

• 用户管理
• 大屏管理
• 分享管理
• 系统配置
• 操作日志

平台兼容性

云端兼容性

云函数类插件通用教程

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

DataV Pro - 数据大屏可视化管理平台

基于 uniapp + uniCloud + Vue 3 + TypeScript 的 Web 端数据大屏可视化管理平台，用户可以通过可视化编辑器快速创建和管理数据大屏。

技术栈

功能概览

用户系统

• 登录 / 注册（验证码）
• Token 自动刷新
• 角色权限（管理员 / 普通用户）

大屏管理

• 大屏列表（卡片 / 列表视图）
• 新建、编辑、预览、复制、删除
• 发布与分享（密码保护、有效期、下载权限）
• 数据概览统计

可视化编辑器

• 组件库：折线图、柱状图、饼图、散点图、面积图、仪表盘、雷达图、漏斗图、热力图、地图、数字展示、进度条、数据表格、排行榜、文本、图片、视频
• 画布：自定义尺寸、背景（纯色/渐变/图片）、网格、吸附
• 组件操作：拖拽添加、拖拽移动/缩放、多选对齐/分布、等宽等高、图层排序
• 属性面板：位置/大小、样式（背景/边框/阴影/圆角）、数据配置
• 数据源：静态数据、API 接口、云数据库、字段映射、自动刷新
• 撤销/重做：50 步历史记录

模板库

• 保存大屏为模板
• 从模板创建大屏
• 导入 / 导出模板 JSON

管理后台

• 用户管理（角色、状态）
• 大屏管理
• 分享管理
• 模板管理
• 系统配置
• 数据源管理
• 操作日志

快速开始

环境要求

• Node.js >= 18
• pnpm >= 8

安装依赖

pnpm install

开发

# H5 开发（主要开发模式）
pnpm dev:h5

# 微信小程序开发
pnpm dev:mp-weixin

# 其他平台
pnpm dev:mp-alipay
pnpm dev:mp-baidu
pnpm dev:mp-toutiao

构建

# H5 构建
pnpm build:h5

# 微信小程序构建
pnpm build:mp-weixin

类型检查

pnpm type-check

项目结构

datav/
├── src/
│   ├── pages/                  # 页面
│   │   ├── login/              # 登录/注册
│   │   ├── index/              # 首页（大屏列表）
│   │   ├── editor/             # 可视化编辑器
│   │   ├── screen/             # 大屏展示（全屏预览）
│   │   ├── template/           # 模板库
│   │   ├── share/              # 分享管理
│   │   └── admin/              # 管理后台
│   ├── components/
│   │   ├── editor/             # 编辑器组件
│   │   │   ├── ComponentLibrary.vue  # 组件库面板
│   │   │   ├── Canvas.vue            # 画布
│   │   │   ├── ComponentItem.vue     # 组件容器
│   │   │   ├── PropertyPanel.vue     # 属性面板
│   │   │   └── LayerPanel.vue        # 图层面板
│   │   └── charts/             # 图表渲染组件
│   ├── stores/                 # Pinia 状态管理
│   ├── api/                    # API 接口层
│   ├── types/                  # TypeScript 类型定义
│   ├── styles/                 # 全局样式（主题 CSS 变量）
│   ├── icons/                  # 本地 SVG 图标
│   ├── utils/                  # 工具函数
│   └── layout/                 # 布局组件
├── uniCloud-aliyun/
│   ├── cloudfunctions/         # 云函数
│   │   ├── auth/               # 认证（登录/注册/Token刷新）
│   │   ├── screen/             # 大屏 CRUD + 发布
│   │   ├── template/           # 模板 CRUD + 导入导出
│   │   ├── share/              # 分享管理
│   │   ├── admin/              # 管理后台
│   │   └── style/              # 样式模板
│   └── database/               # 数据库 Schema
├── uno.config.ts               # UnoCSS 配置
├── vite.config.ts              # Vite 配置
└── tsconfig.json               # TypeScript 配置

主题配色

项目使用 CSS 变量定义全局主题（赛博蓝），配置在 src/styles/theme.css：

云函数部署

云函数使用 uniCloud 阿里云空间，Node.js 18 运行时。

部署步骤

1. 在 HBuilderX 中右键 uni-config-center → 上传公共模块
2. 在 uniCloud 控制台确认或删除旧版云函数
3. 右键每个云函数目录 → 上传并部署
4. 右键 database 目录下的 Schema 文件 → 上传 Schema

数据库集合

多平台支持

• H5（主要平台，功能最完整）
• 微信小程序
• 支付宝小程序
• 其他小程序平台（百度、字节、QQ、快手、小红书等）

注：编辑器的拖拽功能、Element Plus 组件仅在 H5 平台可用，小程序使用原生组件替代。