属于网络工程师的工具更加专业了

这几天的改动没有新增工具，全部集中在「页面怎么读、怎么点」这件事上。起因是几张截图：卡片大小不一、上传搜索框重复、顶部一排图标分不出主次、上下两块像是不同组件拼起来的。工具本身没变，但一个工具站每天被打开几十次，这些细节叠起来就是产品的全部观感。GeekIt V2.13.0 把这些一起收拾了一遍。

https://tool.geek.cab

从卡片开始

最早的卡片是「玻璃拟态 + 大圆角 + 阴影 + hover 上浮」，单看没问题，一排排铺开以后每张卡都在抢注意力，内容反而成了配角。现在换成轻卡片：–card 白底、1px 细边框、10px 圆角、无阴影，hover 只把边框换成品牌蓝，过渡 0.18s。图标底衬统一 32px 中性灰，只在 hover 和当前项才转成品牌蓝。

配套解决了一个老问题：同一行卡片高度不齐。原因是网格子项其实是外层容器（星标按钮住在里面），Link 作为子元素不会自动撑满行高，于是描述一行的卡片比两行的矮一整行。现在容器和 Link 都加 h-full，卡片加 min-h-[100px]，描述用 line-clamp-2 min-h-[36px] 锁死两行空间——短文案的卡片下方留白，而不是整行高度塌陷。

分类页：从「一排排名字」变成「按任务找」

原来的分类页是「标题 → 工具总数 → 卡片网格」，信息没有错，但辨识度低。现在改成：

• 标题下方只留一句「按任务快速查找」，数量统一交给列表标题右侧，不再出现两次「25 个」
• 新增紧凑的任务筛选胶囊：IP 地址规划、路由与 ACL、地址转换、VLAN 与交换、MAC 与二层、连通性诊断、DNS 与域名、协议与端口参考；只展示当前分类里确实有成员的任务，点了按任务内推荐顺序重排
• 侧边栏负责一级分类，主体只负责当前分类内的定位，避免两套并列导航

页面里那个大搜索框后来去掉了。搜索统一由顶部承担，Ctrl K 只在顶部生效，不会再出现两个输入框抢焦点。

搜索本身也重做了：lib/tool-search.ts 按四层加权建索引——工具名(6) > slug/别名与协议名(4) > 描述(2) > 分类名(1)，空格分词后逐词 AND 匹配。当存在更精确的命中时，自动丢弃「仅凭分类名」的泛化结果，所以搜 CIDR 出 6 个真正相关的工具，而不是把 25 个网络工具全列出来。实测：acl 2 个、IPv6 3 个、vlan 2 个、端口 4 个、ospf 1 个。

顶部：先让人看见搜索

之前搜索框旁边挤着火箭、灯泡、统计图、爱心、桌面版五个入口，右侧还有主题和登录，像是从不同组件里拼出来的。现在按优先级排列：

搜索（flex-1） │ ★收藏 🕘历史 │ 桌面版 更多⋯ │ 主题 登录

• 搜索是唯一的主入口，max-w-xl、Ctrl K、无结果时给「试试 CIDR、VLAN、ACL」的提示
• 收藏和历史合成一组，点开是小面板：收藏列表／最近 24 小时使用记录，条目带图标、名称、分类，历史面板附清空，空态给的是可执行提示
• 桌面版从「品牌蓝描边按钮」降级成 muted 文字按钮
• 里程碑、建议反馈、数据统计、赞助收进「更多」菜单，每项带一句说明
• 登录从实心蓝按钮改成品牌蓝文字按钮

侧边栏：克制的选中态

原来是纯蓝色胶囊 + 白字，和其他只有文字的菜单项反差过大。现在当前分类是浅蓝底（–nav-active-bg）+ 品牌蓝文字 + 左侧 3px 指示线，字重 500、圆角 8px；普通项是中性文字 + 线性图标，hover 只给浅灰底。一级导航与分类列表之间一度加过细分割线，觉得割裂，改回用间距区分。

首页：先定位，再入口

几轮调整之后的首页结构：

GeekIt · 极客在线工具箱
常用工具，一个网站就够了。网络计算、协议查询、格式转换、文件处理，打开即用。
140 款工具 · 多种使用场景

[我的常用：收藏 / 最近使用] [最新更新 →]
[工具分类]
[交流与支持]

• 原来居中悬浮的那句「极客一下，效率翻倍」换成了产品名 H1 + 定位副标题，左对齐成一个整块。首页因此第一次有了 H1，顺带解决了 SEO 上的空档
• 两张统计卡片下线：「累计使用次数」对新用户永远是 0，除了暴露「没人用」没有别的作用；「工具总数」压缩成标题下的一行 13px 小字。左侧换成「我的常用」——有记录就列出工具名，没有记录就显示空状态提示，而不是一个醒目的 0
• 「最新更新」原本被 h-full 拉成 340px 高，三条内容靠 justify-between 平均铺开，看起来很空。现在高度由内容决定，行距收紧，标题右侧加了「查看全部 →」指向版本记录
• 工具分类卡片从约 194px 压到 150px：图标容器 56→50、图标 32→26、名称 16px font-semibold、数量 13px，去掉 hover:-translate-y-1 和图标放大动画

卡片文案：写清楚输入和输出

网络工具那 25 条描述按「输入 → 输出 → 场景」重写过，例如：

改写前逐页核对了每个工具真实的输入项和输出结果，所以顺便修正了一处不准确的说法：「子网划分工具」是按子网位数等分网段（2ⁿ），按主机数切分属于 VLSM 规划计算器，两者职责不再混淆。长度控制在 18–28 字，两行内不出省略号。

视觉语言统一

最后一刀是表面层。之前上半部分的面板只有白底、没有边框，下半部分的分类卡片有明显灰边，看起来像两套组件。现在定义了公共表面：

描述文字的对比度也提了一档：新增 –text-desc，浅色主题取 #667085，深色主题维持 #a9bccf；标题仍是 –text-primary，主次层级更清楚。