本文使用「署名 4.0 国际 (CC BY 4.0)」许可协议，欢迎转载、或重新修改使用，但需要注明来源。 [署名 4.0 国际 (CC BY 4.0)](https://creativecommons.org/licenses/by/4.0/deed.zh)

本文作者: 苏洋

创建时间: 2025年03月07日
统计字数: 4227字
阅读时间: 9分钟阅读
本文链接: https://soulteary.com/2025/03/07/manage-homelab-devices-build-a-smarter-front-end-kanban-with-claude-1.html

-----


# 管理 HomeLab 设备：借助 Claude 3.7 构建更智能的前端看板（一）

再次聊聊如何用简单的模型工具，来快速完成一个提供设备管理和监控看板的工具，让我们从原型开始吧。

## 写在前面

本文使用的思路和之前的一些文章类似，[《AI 加持的代码编写实战：快速实现 Nginx 配置格式化工具》](https://soulteary.com/2023/05/20/code-writing-practice-supported-by-ai-quickly-implement-nginx-configuration-formatting-tool.html)、[《使用 AI 辅助开发一个开源 IP 信息查询工具：一》](https://soulteary.com/2024/12/21/use-ai-to-assist-in-developing-an-open-source-ip-information-tool-part-1.html)、[《使用 AI 辅助开发一个开源 IP 信息查询工具：二》](https://soulteary.com/2024/12/23/use-ai-to-assist-in-developing-an-open-source-ip-information-tool-part-2.html)。

因为 Claude 3.7 最近更新后，编程返工率更低。所以这次的构建，显然速度更快，时间也更短。IDE 相关的代码补全，在之前的文章有提及，所以这次不再展开。

好了，让我们回到本文的主题，先来聊聊为什么会有这篇文章。

因为，最近一段时间，我在用家里的设备做一些项目，因此更新了一些硬件。

![最近整理后的机柜设备](https://attachment.soulteary.com/2025/03/07/devices.jpg)

目前家里机柜内外的联网计算、存储设备（物理机和虚拟机）和网络辅助设备数量在三四十台以上，为了方便长期维护和管理，我计划做一个简单、易用且美观的服务看板程序。我计划通过这个看板，能够直观了解各类设备的硬件信息、网络状况和运行状态。这里面对我而言，最重要的事情，是尽量减少后续维护成本，甚至最好不需要维护。

基于上面的服务资源管理和服务运行状态监控的需求，除了在线的 SaaS 服务平台之外，主要有两个领域的工具可以满足我的需求：基础设施资产管理平台（Infrastructure Management Platform, IMP）和服务器与虚拟机监控平台。

### 现成方案的不足与思考

IMP 领域有一些相对成熟的开源解决方案，最常见的选择：

- NetBox：用于机柜、设备和网络的资产管理，数据结构清晰，但界面较为保守。[netbox-community/netbox](https://github.com/netbox-community/netbox)
- RackTables：传统的数据中心设备管理工具，但功能较为单一，界面略显陈旧。[RackTables/racktables](https://github.com/RackTables/racktables)

服务器与虚拟机监控平台同样有一些成熟的开源解决方案，包括：

- Zabbix：监控能力强大，不过对于几十台设备来说有些笨重。[zabbix/zabbix](https://github.com/zabbix/zabbix)
- Prometheus + Grafana：出色的时序数据存储及采集工具，搭配灵活的监控仪表盘工具，基本通吃所有监控场景。[prometheus/prometheus](https://github.com/prometheus/prometheus)、[grafana/grafana](https://github.com/grafana/grafana)。

就前文中提到的几十台设备而言，NetBox（资产与网络连接管理） + Prometheus/Grafana（设备状态监控）或许是最合的，几乎可以做到开箱即用。美中不足的是，相对还是有些笨重，尤其是 Prometheus 以及想有一个简洁好看的最终界面，需要大量的配置。这也是社区里经常出现使用  [grafana/loki](https://github.com/grafana/loki) 作为 Prometheus 的替代方案的原因。

因为是个人使用，我希望界面能够更加适配我自己的网络和设备环境，配置和维护方式能够更简单。当然最关键的是，我也希望个人经常使用的界面能够更简洁、好看一些。这些开源方案的界面几乎都看腻了。

## 快速设计一个看板原型

所以，我计划自己来做除了数据采集之外的相关功能，先从前端监控看板开始。

因为 AI 工具完善度还有待提升，相比这样半自动的方式，耗时会更久，所以这里就不使用“端到端”的工具来进行制作了。而是使用指令遵循能力更强，编程能力一向优秀的 Claude Sonnet 3.7 Web 和“代码编辑器”来进行工具构建。

编程工具则继续使用之前提到过的 GitHub Copilot，上周最新的 3.7 [同样在工具中有更新](https://github.blog/changelog/2025-02-24-claude-3-7-sonnet-is-now-available-in-github-copilot-in-public-preview/)。使用这俩组合一下，基本上半个小时就能做完你想要的原型。

### 快速设计设备列表页

我希望工具既能看到所有的设备，又能看到具体设备运行详细状况。用相对“准确”的黑话来拆解这个需求，大概需要设计一个“列表页”和一个“详情页”。（如果你不清楚该怎么做，可以和模型对话，让模型一步步教你如何拆解需求）

因为这几年的产品基本都是“图片墙”/“瀑布流”设计，也基本看习惯了这种界面。那么，就先让模型来帮助我们生成一个“图片墙”的页面结构吧。

![让模型先切一套“图片墙”结构](https://attachment.soulteary.com/2025/03/07/get-a-pic-wall-struct.jpg)

有了主要的内容呈现区域后，为了让页面像点样子，我们让模型再处理下页面的标题。为了让页面活泼一些，可以要求模型直接输出带动效的元素设计。

![获取一个略微调皮的修饰标题](https://attachment.soulteary.com/2025/03/07/get-funny-title.jpg)

接着，让模型帮忙出一些看的过去的占位图。

![使用模型来生成代表设备的占位图](https://attachment.soulteary.com/2025/03/07/get-placeholder.jpg)

将上面模型给到的代码结构进行组合，很容易得到下面的预览页面结果。

![简单调整内容，查看效果](https://attachment.soulteary.com/2025/03/07/mix-page-elements.jpg)

不同的团队对于服务器的命名风格不同，有一些会使用刻板的数字编号，或因为数量巨大，使用日期、机房、数字编号混合，也有一些团队会使用赛车、飞机、山峰、湖泊来进行命名。

这里我选择的命名方式，是水果。继续使用模型生成一些水果名称，和它们的提示词列表，获取更多的图片，然后编写一段简单的 JS 代码（可以问模型要）。

```html
<script>
    const pics = [
        "images/plum-red.png",
        "images/nut.png",
        "images/persimmon.png",
        "images/papaya.png",
        "images/peach.png",
        "images/fig.png",
        "images/plum-purple.png",
        "images/dragon.png",
        "images/plum-green.png",
        "images/plum-wine-red.png",
        "images/grape.png",
        "images/plum2.png",
        "images/orange.png",
        "images/apple.png",
        "images/litchi.png",
        "images/longan.png",
        "images/pear.png",
        "images/kumquat.png",
        "images/pomelo.png",
        "images/lemon.png",
        "images/strawberry.png",
        "images/guava.png",
        "images/kiwi.png",
    ];

    const makeTemplate = (img)=>{
        return `<div class="image-card">
                    <div class="image-container">
                        <img class="image-placeholder" src="${img}" alt="Image 1">
                    </div>
                    <div class="image-info">
                        <h3 class="image-name">${img}</h3>
                        <p class="image-description">
                            设备详细信息
                        </p>
                    </div>
                </div>`
    }

    document.getElementById('container').innerHTML = pics.map(makeTemplate).join('\n');
</script>
```

然后，我们就能够得到最终的列表页的设计了。

![使用更丰富的图片来更新列表页面](https://attachment.soulteary.com/2025/03/07/update-pics.jpg)

### 设计信息监控详情页面

我们继续设计详情页，输入需求，让模型先随便输出一个页面。

![使用模型获取简单的监控详情页设计](https://attachment.soulteary.com/2025/03/07/get-dashboard-design.jpg)

目前页面长成什么样子无所谓，因为在后续文章中，我们会根据需求进行细节调整。

![将页面单独保存下来](https://attachment.soulteary.com/2025/03/07/detial-stats.jpg)

考虑到调用的简单，我们可以将上面的页面代码保存为一个单独的页面（`iframe.html`），在后续使用 iframe 或当作模版动态插入页面。

### 设计交互方式，融合两个页面

为了让上面两个功能完全不同的页面融合在一起，我们需要一些“交互把戏”作为“粘结剂”。

将上面的列表页面截图，发送给模型，让模型知道我们要调整的界面长什么样子。接着，继续和模型对话，告诉模型“使用 HTML 和 CSS、JS ，点击页面卡片时，页面横向展开白色区域填充满整个区域。”

![设计点击交互展示层](https://attachment.soulteary.com/2025/03/07/combine-expend.jpg)

接下来，等模型输出完毕后，我们就能够得到一个简单的交互页面：当我们点击列表页面具体元素的时候，页面会被一个弹出的白色遮罩层挡住。新的界面中左边展示的是设备的图片，右边展示的则是一些详细的内容，稍后，我们可以使用之前的页面，通过 iframe 的方式进行替换。

![获取一个略微调皮的修饰标题](https://attachment.soulteary.com/2025/03/07/expend-stats.jpg)

将得到的代码进行简单的拼合，将弹出的白色遮罩层替换为上文中模型创建的详情页，效果如图所示。

到这里为止，基础的工具前端原型就制作完啦，是不是效率还挺高的？

如果你手速快一些，戳模型生成图片按钮（重试）快一些，完成完整原型应该不超过 1 个小时。如果你在起名上卡了很久，也应该不会超过两个小时，这个基础的原型就能够制作完了。

接下来，我们只需要让它和数据接口、各种设备联动起来，就能够完成这个工具的制作，这些内容在下一篇文章中再聊。

## 最后

写到这里，想为现在用模型辅助写代码的同学一个小的提醒。不要因为现在代码非常好写，编码速度提升了几个数量级就丢掉勤保存代码的习惯。

写好代码一定要记得保存，本文提到的程序，我之前其实实现过一个类似的。但是在上周忙其他的事情的时候，顺手用 Python 画图表的时候，清理程序目录的时候，意外“丢失”了。

--EOF