NetTools Web版本终于有了它该有的样子

做这个网络工具平台的初衷很简单——市面上的在线网络工具要么广告满天飞，要么界面停留在十年前，要么功能东一个西一个，用起来特别割裂。于是我自己动手撸了一个，把 Ping、DNS 查询、端口扫描、Traceroute、IP 计算器、Whois 这些网络工程师日常高频使用的工具全部整合到一起，一站式搞定。

https://tool.geek.cab/

这两天花时间做了一次比较彻底的视觉升级，比之前更加高级。

整体设计语言：暗色主题 + 玻璃质感

所有工具页面统一采用了深色背景配合毛玻璃卡片的风格。不是那种刺眼的纯黑，而是带一点蓝灰色调的暗色，长时间盯着屏幕不会累。每张卡片都做了柔和的阴影和圆角处理，有一种"浮在页面上"的层次感，不再是扁平的一片。

工具页面的布局也统一了：每个工具页左侧或上方是输入区，右侧或下方是结果展示区，用卡片清晰分隔。顶部导航栏改成了纯图标加 Tooltip 的形式，鼠标悬停才显示文字说明，整体更干净。

IP 计算器：这次改动最大的页面

IP 计算器是改动量最大的工具。输入区域做了不少优化：CIDR 前缀从一长串下拉列表改成了快捷按钮加精简下拉的组合，/8、/16、/24 这些常用掩码一键切换。计算按钮加大了尺寸、加了渐变和阴影，视觉上更突出。

IPv4 和 IPv6 用 Tab 切换，选中态有醒目的蓝色高亮。IPv6 子网计算也完整支持了，包括那行让人眼花缭乱的 1.844×10¹⁹ 个地址数。

结果展示区是这次升级的重点。不同类型的信息用不同颜色区分：网络地址是蓝色系、广播地址是橙红色系、可用 IP 范围是绿色系、IPv6 相关用紫色。每张卡片的背景色、边框色、图标色全部统一在该色系内，一眼就能分辨信息类型。可用主机数做成了醒目的绿色大数字，二进制掩码用了等宽字体分段展示，可读性好了很多。

其他工具页面：全部统一风格

之前有些工具页面还是旧样式，这次全部拉齐了。Ping 的流式输出、DNS 查询的结果列表、端口扫描的开闭状态标签、Traceroute 的跳数路线，都用了和 IP 计算器一致的卡片和配色方案。颜色不再随便用——绿色代表正常/开放，橙色/红色代表警告或异常，蓝色代表信息提示，形成了一套统一的语义体系。

移动端也没落下

手机上的体验也考虑到了。侧边栏在小屏幕上自动变成抽屉式，从左侧滑出，不占主屏幕空间。卡片在窄屏幕上自动堆叠，不会被挤变形。输入框和按钮的触控区域都够大，手指操作不会误触。

公私网 IP 判断

这次统一风格时，公私网 IP 判断页面被当作了设计样板。这个页面之前就做得比较好——输入一个 IP，瞬间告诉你它是公网、私有还是特殊用途地址，结果用不同颜色的标签区分。现在所有工具页面都达到了这个水准。

写在后头

这个平台我会持续迭代，后续计划加入更多实用工具。如果你是网络工程师、运维人员，或者只是对网络感兴趣，欢迎来体验。

这不是一个商业项目，就是一个网络爱好者给自己和同行们做的趁手工具。希望你们用得顺手。