【CodeBuddy篇】开启卷王模式！一周直接干了一个全网最全工具箱！

起初是想做一个公众号排版助手、json格式化、加解密等日常开发常用工具，后面不经意间遇上了腾讯的CodeBuddy, 后面干脆就整了个牛马工具箱，因为日常使用真的太频繁，每次都要去网页查找打开很不方便。

简要介绍下目前这款工具：牛马AI工具箱 一个集成了 500+ 实用工具的桌面级超级终端，融合多模型 AI 助手，以三栏式专业界面呈现，既是开发者的瑞士军刀，也是打工人的情绪充电站。 这款工具也是基本都是由CodeBuddy+Trae+Qoder 国产工具交替开发，同时使用GLM/kimi/minimax/gpt等厂商自定义模型,以及硅基流动的免费券 https://cloud.siliconflow.cn/i/Hwg3z28c

一、项开发初衷及概述

牛马AI工具箱 是一款基于 Tauri + React + TypeScript + Tailwind CSS 构建的桌面端工具箱应用。它打破了传统在线工具网站"打开浏览器 → 搜索工具 → 等待加载"的繁琐流程，将所有工具整合到一个本地桌面应用中，真正做到一键唤起、秒级响应、离线可用。

项目采用 Vite 作为构建工具，Zustand 进行状态管理，整体架构轻量高效。目前工具总量已覆盖 20+ 大分类、超过 500 个独立功能单元，从日常的 JSON 格式化、图片压缩，到专业的 SQL 转 Java 实体类、正则测试，再到趣味的退休倒计时、石头剪刀布——几乎涵盖了工作和生活中可能用到的所有小工具场景。

二、AI 助手的融合

这不仅仅是一个工具箱，更是一个懂你的 AI 智能伙伴。

2.1 多模型生态，一键切换

AI 助手模块支持市面上主流的大语言模型：

用户可在设置中自由配置各平台的 API Key 和接口地址，一键启用/禁用模型，实现多模型按需切换。

2.2 仿豆包风格的聊天界面

AI 助手采用了时下流行的融合式输入设计：

• 顶部：渐变色 AI 头像 + "你好，我是 AI 助手" 的欢迎语
• 中部：智能对话气泡，用户消息采用蓝紫渐变背景，AI 回复采用卡片式背景，视觉层次分明
• 底部：融合输入卡，集成模式选择、模型切换、推理深度调节和发送按钮于一体
• 快捷入口：提供「写代码」「文本润色」「头脑风暴」「找工具」等四大快捷卡片，点击即可快速提问

三、趣味功能：不只是工具，更是陪伴

3.1 退休倒计时 —— 打工人专属仪式感

这是牛马AI工具箱最具辨识度的特色功能之一。

用户在设置中填写性别和生日后，系统会自动：

• 根据国家法定退休年龄计算出准确的退休日期
• 实时显示距离退休还有多少天、多少个月、多少年
• 当已退休时，弹出 "🎉 已退休，享受自由吧！" 的祝福

更贴心的是，倒计时面板还会轮播鼓励语：

"加油吧！💪" "坚持住，胜利在望！🔥" "牛马精神，永不停歇！🐴" "再忍忍，自由就在前方！🌟"

这个功能把冰冷的日期计算变成了有温度的心理陪伴，在开发者群中收获了大量好评。

3.2 徽章助手 —— 你的努力看得见

系统会根据用户的月使用次数自动评定徽章等级：

徽章会实时显示在退休倒计时面板中，让每一次工具的调用都变成一次"升级打怪"的成就感积累。

四、工具矩阵：500+ 功能全覆盖

项目将工具细分为 20 余个主分类，每个分类下又有多个子工具：

核心分类速览

五、排版布局：专业级三栏式界面

5.1 整体架构

牛马AI工具箱采用了经典的三栏式布局，灵感来源于专业 IDE 和效率工具：

┌────────────────────────────────────────────────────────────┐
│  [首页] [工具] [终端▼]        [帮助▼]   [AI助手] [设置] [头像]  │  ← 顶部菜单栏
├────────┬──────────┬───────────────────────────────────────────┤
│        │          │                                           │
│  左侧   │  中间     │               右侧内容区                   │
│  边栏   │  分类栏   │                                           │
│        │          │         （工具详情 / AI聊天 / 首页 / 设置）   │
│ 收藏/  │ 分类列表  │                                           │
│ 我的   │ + 搜索框 │                                           │
│        │          │                                           │
├────────┴──────────┴───────────────────────────────────────────┤

5.2 各栏功能

左侧边栏（导航栏）：

• 顶部展示品牌 Logo + "牛马AI工具箱" 名称 + 品牌 Slogan
• 中部展示「收藏」或「我的（常用）」工具列表，点击即可快速打开
• 底部 Tab 切换「收藏」和「我的」两个视图

中间分类栏：

• 顶部集成搜索框，支持全局工具搜索
• 下方展示 20+ 个工具分类，点击可展开/折叠查看该分类下的所有工具
• 每个分类显示工具数量，一目了然
• 支持折叠隐藏，让出更多内容空间

右侧内容区：

• 根据当前选中的 Tab 动态渲染内容
• 工具详情页采用卡片式网格布局，工具卡片 hover 时有阴影反馈
• AI 助手页采用仿豆包的聊天界面设计
• 首页展示分类快捷入口和推荐工具

5.3 主题系统

支持 Light / Dark / Night 三种主题模式，通过 Zustand 全局状态管理：

• 浅色主题：清新的蓝白配色，适合白天办公
• 深色主题：沉稳的灰黑配色，降低夜间视觉疲劳
• 夜间模式：更深的背景色，保护视力

所有组件都实现了完整的深色模式适配，从背景到文字到边框，每一个细节都经过精心调校。

5.4 终端集成

项目还内置了终端功能，支持：

• 本地终端：直接调用系统 Shell（Bash / CMD / PowerShell）
• 远程终端：配置 SSH 会话，一键连接远程服务器
• 终端菜单集成在顶部导航栏，一键唤起

六、技术亮点

七、结语

牛马AI工具箱 slogan ：它不只是一个工具集合，它是一个有温度、有智能、有陪伴的桌面效率伴侣。

无论你是需要快速格式化一段 JSON 的开发者，还是需要计算退休日期的打工人；无论你是要生成二维码的运营同学，还是要进行正则测试的技术大牛——在这里，你都能找到对应的工具。

而当你遇到复杂问题时，内置的 AI 助手随时准备为你提供智能解答。当你在漫长的工作日里感到疲惫时，退休倒计时会告诉你自由就在前方。未来还会支持大家提出的各种需求按优先级进行实现。