使用 Claude Code 重构 FIBOS 浏览器的记录

[以下内容由 Gemini 生成]

最近利用业余时间，使用 Claude Code 辅助把 fibos-explorer 项目重构了一遍。作为一个后端开发者，在面对前端重构时通常会有不少阻力，这次尝试借助 AI 工具，主要想看看它能在多大程度上提升开发效率，特别是在我不太擅长的 UI 样式调整方面。

缘起

fibos-explorer 是查看 FIBOS 区块链数据的浏览器。老版本使用的是上古时期的 Angular，代码结构和现在的开发习惯差异巨大，维护起来非常费劲。借着 Next.js 15 和 React 19 更新的机会，打算彻底重写真个项目。

以往做这种重构，最耗时的往往不是业务逻辑，而是CSS样式调整、组件封装以及适配移动端这些繁琐的工作。这往往会劝退很多想做全栈尝试的后端开发。

重构过程

这次我尝试调整了开发模式：主要逻辑和架构由我来把控，具体的代码实现和 UI 细节交给 Claude Code。

整个过程大概花了两个晚上，效率确实比我纯手写要高很多。

项目地址：fibos-explorer-next (本地项目)

新版部署: fo.chains.one
旧版存档: foo.chains.one

AI 的”降维打击”

这次重构让我最感概的，是 Claude Code 对旧代码的理解能力。

我并没有给它写详细的需求文档，而是直接让它读取老项目的代码。令人惊讶的是，它自动分析了原项目的目录结构、功能逻辑，甚至搞清楚了复杂的后端 API 调用方式。

对于 AI 来说，这种上下文明确的重构任务其实是非常简单的。

输入明确：老代码里有完整的业务逻辑（虽然写得很烂）。
目标明确：用新的框架（Next.js）实现同样的功能。

这本质上就是一种”翻译”工作。AI 就像一个经验丰富的老程序员，帮我把晦涩的 Angular 代码”翻译”成了现代的 React 代码，同时顺手把 UI 升级到了 shadcn/ui。

技术栈选择

在 AI 的辅助下，尝试了一些比较新的前端技术栈：

运行时: Bun 1.3+ (安装依赖和启动很快)
框架: Next.js 15 + React 19
UI 库: shadcn/ui + Tailwind CSS 4
状态管理: Zustand + TanStack Query

如果自己从头去啃 Tailwind CSS 4 的文档或者研究 shadcn/ui 的配置，成本会比较高。通过 Claude Code，可以快速生成一个可用的脚手架，省去了很多环境搭建的时间。

AI 带来的具体帮助

1. 样式和组件实现的加速

对我来说，AI 最大的帮助在于 UI 实现。

以前写一个支持多类型搜索（区块、交易、账户）的搜索框，需要写不少判断逻辑还要调样式。现在只需要把需求描述清楚，AI 就能生成大概 80-90% 可用的代码。

比如智能搜索的正则匹配逻辑，AI 生成的代码不仅带有类型定义，还考虑了一些边缘情况：

// AI 生成的简单的路由跳转逻辑
const getSearchPath = (term: string) => {
  if (term.startsWith('FO')) return \`/explorer/publickey/\${term}\`;
  if (/^[0-9]{12}$/.test(term)) return \`/explorer/accounts/\${term}\`;
  if (/^[0-9]+$/.test(term)) return \`/explorer/blocks/\${term}\`;
  if (/^[a-f0-9]{64}$/i.test(term)) return \`/explorer/transactions/\${term}\`;
  return \`/explorer/accounts/\${term}\`;
};

2. 快速熟悉 SDK

FIBOS 的交互逻辑需要使用 eosjs。因为很久没写，API 记得不太清楚。

这次我试着把 .d.ts 类型文件发给 Claude Code，它能比较准确地生成调用链交互的代码。比如实现”资源抵押”功能时，它生成的表单验证和 Transaction 构造代码，基本不需要大改就能跑通。

总结

目前新版浏览器完成了区块、交易、账户查询、转账和投票功能。

这次重构的感受是，AI 工具确实能降低全栈开发的门槛。它不能完全替代人工，通过 Code Review 还是能发现一些小问题需要修正，但它确实能帮我们处理掉大量重复、繁琐的编码工作，让开发者能把更多精力放在业务逻辑和架构设计上。

对于不擅长前端样式的后端开发来说，这是一个很实用的效率工具。