拖拽式仪表盘 - 功能需求分析

仪表盘简介

仪表盘（dashboard）作为一种直观、灵活的数据可视化工具，正在越来越多地应用于各种领域，帮助用户实时监控和分析数据。常见于各类数据分析平台、数据可视化平台、数据大屏等场景。

传统的仪表盘往往是开发者固定好的，用户只能使用，无法自定义。而拖拽式仪表盘则可以让用户自由地选择、拖拽、调整仪表盘中的各种组件，从而实现自定义的仪表盘。

功能需求

由于本系列文章写作在设计和开发之后，所以先一睹为快，看看最终的效果：在线 Demo

技术背景是基于 Vue2 实现，功能需求大致如下：

布局需求

仪表盘布局是拖拽式仪表盘的核心功能之一。布局应该是一个可复用的模板，因为对于一个中后台系统，往往会有多个仪表盘，所有基础功能应该提炼出来，以便于快速复用。

• 组件拖放到布局容器中时，用户应能够自由拖拽、调整组件的大小和位置，也可以对组件进行排序、刷新、删除等操作
• 允许创建、删除、复制布局，每个布局可以有不同的组件排列

组件需求

• 统一的配置项（宽高、是否可调整大小、各种事件钩子等）
• 组件分类
• 自动加载组件列表
• 组件独立（每个组件有自己完整的生命周期）

每个组件应该拥有相同的配置项，以便于按照相同的规范限制进行后续的组件开发。

组件统一存放在一个文件夹中，仪表盘模板自动加载这个文件夹中的所有组件到组件列表。

组件列表中的组件可以通过拖拽或者点击添加到布局容器中。

组件需要有分类，例如：模块 A 的组件、模块 B 的组件等。因为虽然系统中的每个模块的仪表盘只需要显示当前模块相关的图表组件，但是整个系统的仪表盘需要显示各个模块的图表统计数据，所以需要对组件进行分类。

另外，应该有一个通用分类，用于存放所有模块都可以使用的组件。例如：便签、天气组件、时间组件等。

布局和组件交互

仪表盘布局内通常有多个组件，布局和组件之间可能需要进行交互，例如：

• 点击总的刷新按钮，所有组件都刷新；点击某个组件的刷新按钮，只刷新当前组件
• 点击某个组件的设置按钮，弹出设置框，设置当前组件的配置项保存到当前布局数据中
• 点击某个组件的删除按钮，从当前布局数据中删除当前组件
• ……

用户角色和权限管理需求

在拖拽式仪表盘中，不同用户角色可能具有不同的访问权限和操作权限。

管理员拥有完整的权限：

• 可以查看所有仪表盘
• 可以编辑所有仪表盘
• 可以删除除默认仪表盘之外的所有仪表盘
• 可以拖拽、调整所有组件在仪表盘中的位置和大小

普通用户只能永远部分权限：

• 可以查看所有仪表盘
• 工作台仪表盘可以新增、删除、编辑组织内可见的仪表盘布局
• 工作台仪表盘可以拖拽、调整组件在非默认仪表盘布局中的位置和大小
• 其他模块的仪表盘只能查看和刷新，不能编辑

总结

通过分析，简单来说，拖拽式仪表盘的功能需求主要包括：

• 布局需求
• 组件需求
• 布局和组件交互
• 用户角色和权限管理需求

了解清楚需求后，下一篇文章将探讨拖拽式仪表盘的布局模板设计。