前言
前面做了几期前端实战的分享，但都是比较常规的界面，今天挑战一下，我们尝试实现一个数据大屏。
对，就是那种蓝蓝的背景，很多指标、图表的效果。
背景及任务
背景
依然是我们内部的协同办公平台，整个项目前端采用 Vue2+Element UI 实现。
任务
我们实现各种软件系统，除了维护数据外，往往还要给领导使用，他们查看的时候，往往需要一个更加宏观的界面，可以让他们直观地了解业务整体情况，这就是数据大屏的意义。
这次实战的任务呢，就是基于我们协同平台已有模块，实现一个数据大屏，方便领导对团队整体业务直观把握。
操作过程
本次分享依然采用 Cursor + Claude 3.7 实现。
功能分析
场景是针对研发管理使用的，主要包括以下元素：
- 左
- 左上：项目规模分布
- 左下：项目回款情况
- 中
- 数字指标
- 项目阶段分布及延期情况
- 月度合同额及成本对比
- 右
- 成员压力：并行参加项目数
- 项目质量：项目缺陷率
生成初稿
按照以上功能分析进行生成。
注意数据大屏和普通前端较大的区别：
- 界面元素较多，因此布局部分需要调理清晰。
- 界面图表较多，最好通过提示词限定好技术方式。
提示词：
markdown
我要实现一个研发项目的数据大屏。
布局：
左右两侧分别占据屏幕宽度的四分之一，中间占据屏幕宽度的二分之一。
左侧上方展示项目规模，以项目合同额为依据，环图展示，横坐标为合同额区间，统计各个合同额区间的合同数量。
左侧下方展示项目回款情况，横向柱状图展示，按照每个项目统计项目回款情况。
中间上部是数字指标，包括项目数、总合同额、回款总额、研发成本。
中间中部是一个流程图，展示研发流程：需求调研、分析设计、开发、测试、交付、运维，每一个节点上显示处于该阶段的项目个数以及项目延误程度，项目延误程度指超期天数除以原有合同天数的百分比。
中间下部是本年各月度合同额和成本对比，通过柱状图展示，横坐标为月份，纵坐标为合同额和成本，分为双柱表示。
右侧上方展示成员压力，统计团队成员同时参与项目个数，通过矩阵树图展示，颜色越重代表同时参与项目个数越多。
右侧下方展示项目质量，通过横向柱状图展示，横坐标为项目名称，纵坐标为项目质量，通过缺陷率代表。
技术实现：
1. 基于vue+element+javascript，非element plus。
2. 图片通过upsplash api选择适合的图片。
3. 图标使用element ui自带图标。
设计要求：
1. 按照以上"布局"内容，分析主要功能和用户需求，确定界面布局。
2. 参考主流大屏设计效果，设计效果精致，科技感强，使用现代化的 UI 元素，使其具有良好的视觉体验。
3. 整体色彩风格保持一致。结果：
效果：
是不是很快，当然，目前效果有点粗糙，我们优化一下。
优化-数字指标
我们先来优化一下顶部数字指标。
提示词：
项目关键指标不需要边框包裹，且占据区域太大，请优化一下，并增强数字指标渲染科技效果结果：
效果：
这次不知道是幻觉，还是提示词有歧义，AI 帮我把顶部标题也优化了。
虽然顶部标题确实太简单，但由于顶部渲染一般设计感较强，本次分享没打算尝试，不过 AI 既然已经考虑了，并且优化是正向的，那就一起接受吧~
优化-颜色风格
设计是不会设计的，那遇到颜色优化怎么处理呢？
当然是接着靠 AI 了。
直接通过 Cursor 的 Chat 模式，找一个比较顺眼的大屏设计图，让 Cursor 提炼色调信息。
比如"请提取设计图色调，方便后续数据大屏参考"。
然后，我们使用提炼的色调信息进行优化。
提示词：
bash
目前整体效果还可以，但整体颜色风格并不优秀，请按照以下设计色调进行优化。
主要色调
深蓝色背景：#0A1A3D 作为整体背景色，营造科技感和专业性
亮蓝色：#1E90FF 用于图表、数据线条和重点元素
青色/湖蓝色：#00CED1 用于高亮部分和交互元素
白色/浅蓝色：#F0F8FF 用于文字和数据展示结果：
效果：
是不是色调统一了许多。
到此之后，大家完全可以发挥各自审美和创意进行个性化的改进了，这次实战主要是抛砖引玉。
总结
本次分享，我们挑战了使用 Cursor 生成数据大屏，虽然目前生成的大屏还比较初级，但整体思路应该是没有问题的。
后续，我们将针对提示词的设计再做进一步的优化，争取能让大家一步到位，敬请期待哈。