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瞬间告诉你它是公网、私有还是特殊用途地址结果用不同颜色的标签区分。现在所有工具页面都达到了这个水准。写在后头这个平台我会持续迭代后续计划加入更多实用工具。如果你是网络工程师、运维人员或者只是对网络感兴趣欢迎来体验。这不是一个商业项目就是一个网络爱好者给自己和同行们做的趁手工具。希望你们用得顺手。