平时经常帮身边朋友看二手电脑配置，市面上检测软件捆绑广告多、 - 北江爱国 - 沸点 - 掘金

漏洞挖掘 @中国华电集团公司

#VibeLaunch 沸点秀# 平时经常帮身边朋友看二手电脑配置，市面上检测软件捆绑广告多、安装麻烦，线下验机带一堆软件特别不方便。我想着能不能做一个单文件工具，存在 U 盘里双击就能打开，不用联网、不用安装任何程序。
一、分层分步创作思路
1. 第一轮：先敲定页面整体布局，确定冷暖双色调切换、四块硬件信息展示卡片、操作按钮分区，做出基础页面框架；
2. 第二轮：新增硬件读取核心功能，实现一键扫描整机参数、一键汇总复制全部硬件文字信息；
3. 第三轮：解决兼容 bug，发现浏览器权限限制部分硬件读不出，专门补充空白兜底提示，避免页面直接崩溃；
4. 第四轮：精简多余代码，增加卡片悬浮、加载过渡动画，压缩文件体积，低配老旧电脑也能流畅打开。
二、我实际使用的四段完整提示词
1、搭建页面框架
生成单 HTML 硬件查询页面，使用 Tailwind 样式，简约科技蓝色调，页面分顶部标题、操作按钮区、四块硬件信息卡片，支持深色浅色一键切换，电脑端自适应，增加卡片悬浮效果和数据加载动画。
2、写入硬件检测核心功能
在页面内增加 JS 代码，实现按钮一键读取 CPU 线程、物理内存、显卡型号、网络状态；把所有硬件信息汇总成一段文本，新增复制按钮一键复制到剪贴板；硬件无法读取时显示友好提示文字，页面不会报错卡死。
3、页面优化精简指令
删减页面冗余代码，优化深色模式文字对比度，去掉外部依赖插件，保证文件保存本地离线打开也能正常使用。
4、最终细节调整
缩小整体文件体积，排版留白均衡，文字层级清晰，适配 13 寸到 27 寸各类显示器，界面简洁易懂，中老年也能轻松操作。
三、简单使用教程
1. 新建文本文档，把上面所有代码完整复制粘贴进去；
2. 保存文件，将后缀`.txt`修改为`.html`；
3. 直接双击文件，任意浏览器打开即可，无网络也能正常检测硬件。
五、后续优化规划
后续打算继续完善两个功能：一是增加硬件报告导出 TXT 文档的功能，方便保存配置；二是拓展显示器参数识别模块，让工具检测维度更全面。

展开

VibeLaunch

等人赞过