前言

前面做了几期前端实战的分享，但都是比较常规的界面，今天挑战一下，我们尝试实现一个数据大屏。

对，就是那种蓝蓝的背景，很多指标、图表的效果。

背景及任务

背景

依然是我们内部的协同办公平台，整个项目前端采用 Vue2+Element UI 实现。

任务

我们实现各种软件系统，除了维护数据外，往往还要给领导使用，他们查看的时候，往往需要一个更加宏观的界面，可以让他们直观地了解业务整体情况，这就是数据大屏的意义。

这次实战的任务呢，就是基于我们协同平台已有模块，实现一个数据大屏，方便领导对团队整体业务直观把握。

操作过程

本次分享依然采用 Cursor + Claude 3.7 实现。

功能分析

场景是针对研发管理使用的，主要包括以下元素：

左中
数字指标项目阶段分布及延期情况月度合同额及成本对比
右

生成初稿

按照以上功能分析进行生成。

注意数据大屏和普通前端较大的区别：

界面元素较多，因此布局部分需要调理清晰。界面图表较多，最好通过提示词限定好技术方式。

提示词：

我要实现一个研发项目的数据大屏。布局：左右两侧分别占据屏幕宽度的四分之一，中间占据屏幕宽度的二分之一。左侧上方展示项目规模，以项目合同额为依据，环图展示，横坐标为合同额区间，统计各个合同额区间的合同数量。左侧下方展示项目回款情况，横向柱状图展示，按照每个项目统计项目回款情况。中间上部是数字指标，包括项目数、总合同额、回款总额、研发成本。中间中部是一个流程图，展示研发流程：需求调研、分析设计、开发、测试、交付、运维，每一个节点上显示处于该阶段的项目个数以及项目延误程度，项目延误程度指超期天数除以原有合同天数的百分比。中间下部是本年各月度合同额和成本对比，通过柱状图展示，横坐标为月份，纵坐标为合同额和成本，分为双柱表示。右侧上方展示成员压力，统计团队成员同时参与项目个数，通过矩阵树图展示，颜色越重代表同时参与项目个数越多。右侧下方展示项目质量，通过横向柱状图展示，横坐标为项目名称，纵坐标为项目质量，通过缺陷率代表。技术实现：1. 基于vue+element+javascript，非element plus。2. 图片通过upsplash api选择适合的图片。3. 图标使用element ui自带图标。设计要求：1. 按照以上“布局”内容，分析主要功能和用户需求，确定界面布局。2. 参考主流大屏设计效果，设计效果精致，科技感强，使用现代化的 UI 元素，使其具有良好的视觉体验。3. 整体色彩风格保持一致。

结果：

效果：

是不是很快，当然，目前效果有点粗糙，我们优化一下。

优化-数字指标

我们先来优化一下顶部数字指标。

提示词：

项目关键指标不需要边框包裹，且占据区域太大，请优化一下，并增强数字指标渲染科技效果

结果：

效果：

这次不知道是幻觉，还是提示词有歧义，AI 帮我把顶部标题也优化了。

虽然顶部标题确实太简单，但由于顶部渲染一般设计感较强，本次分享没打算尝试，不过 AI 既然已经考虑了，并且优化是正向的，那就一起接受吧~

优化-颜色风格

设计是不会设计的，那遇到颜色优化怎么处理呢？

当然是接着靠 AI 了。

直接通过 Cursor 的 Chat 模式，找一个比较顺眼的大屏设计图，让 Cursor 提炼色调信息。

比如“请提取设计图色调，方便后续数据大屏参考”。

然后，我们使用提炼的色调信息进行优化。

提示词：

目前整体效果还可以，但整体颜色风格并不优秀，请按照以下设计色调进行优化。主要色调深蓝色背景：亮蓝色：青色/湖蓝色：白色/浅蓝色：

结果：

效果：

是不是色调统一了许多。

到此之后，大家完全可以发挥各自审美和创意进行个性化的改进了，这次实战主要是抛砖引玉。

总结

本次分享，我们挑战了使用 Cursor 生成数据大屏，虽然目前生成的大屏还比较初级，但整体思路应该是没有问题的。

后续，我们将针对提示词的设计再做进一步的优化，争取能让大家一步到位，敬请期待哈。