AI 开发的导航页——SimpleNav

前言

在此之前，我用过好几年的 weTab 插件，自定义程度很高，小组件也很丰富。这几年，我见证了 weTab 从一个简单的导航页渐渐做大做强，而我的首页超链接这几年几乎都没怎么变过，这也足以说明导航页对我而言并非刚需，也确实大多数时候我访问网站都是依赖浏览器的自动补全。话虽如此，在 weTab 每次打开浏览器就开始同步导致我的老电脑要卡死好一会开始，我就决心自己做个导航页了。

我的wetab首页

说干就干！今年七月份我在 github 上传了第一个版本——当然，是由 AI 写的。一开始想做成一个动态页面，但又不愿折腾数据库，所以干脆把我常用的链接写死成了一个完全的静态页面，仅仅壁纸由必应日图的 api 负责每天更换。

第一个纯静态版本

上周，我和 inkss 说了我的计划，想找一个好用又好看的开源项目改一改部署在 edgeone pages，他也有些兴致，但是我们都没有找到更好的方案。于是我提到七月份写的那个导航页项目，在他有事搁浅了之后，我每天抽闲暇时间用 AI 继续改写，本文就简要记述一下这一件事。

CodeBuddy

由于我的编程经验并不丰富，加上 VS code 上只有一个 codebuddy 插件，所以一开始的任务都是交给它的。需求是：把这个纯静态页改成 next.js 项目，使用 onedrive 登陆和同步数据，以便后续直接在前端管理，也无需后台和数据库。

codebuddy 很快就完成了项目重构，并且根据代码和实现功能写了第一版 README，网页可以正常跑起来了，但我没想到需要折腾修改的大量工作还在后面。

next.js的第一个版本

一开始在本地开发，测试没有发现什么问题。推送到 github 由 EO pages 拉取部署，我也在 EO 添加了对应的环境变量，而遇到的问题包括但不限于（npm run dev 和 npm run build 居然有这么大的差别）：

① TypeScript编译错误，代码中尝试直接展开（...）一个 Set 集合，但当前的TypeScript编译配置不支持这种操作；

解决方式：将编译目标设置为支持ES2015（即ES6）及以上的环境。

② Next.js 应用路由没有正确设置成动态，Next.js 14 默认会尝试静态化所有路由，包括 API 路由，这就导致无法正常登陆 onedrive 服务；

解决方式：在必要的 api 路由中添加代码强制动态渲染。

export const dynamic = 'force-dynamic';

③ 开发环境和生产环境混淆，在开发环境中使用的回调地址是 localhost，在生产环境中依然如此而不是我的域名；

解决方案：使用环境变量动态设置重定向 URI。

④ 登陆失败，在前端使用微软账户登陆，跳转回来后页面依然是未登陆状态。

解决方式：让 AI 在多个断点打 log，当然 codebuddy 也自作聪明地写了两个 debug 页面，以便输出更多调试信息。

debug页面给出了很详细的信息

但也正是因为这个调试信息，我发现 requestURL 依然是 localhost 而不是我当前使用的域名，于是围绕这个问题我和 codebuddy 改了多次。由于本地环境测试没有任何问题，所以我一度怀疑是 EO pages 的策略有问题。

腾讯云技术排查后，告诉我应该还是代码的问题，云平台是没问题的。我仔细查看更详细的 debug 页面内容和网络请求，发现登陆后确实正确回传了认证信息，而网页没有能够获取到这一点。

继续和 Codebuddy 多次斡旋，最后我终于忍受不了它时不时显示“模型参数错误”这类的提醒，修改代码时陷入死循环，决定再换回 trae 试试。

trae

trae 是字节跳动开发的一款 IDE，上一次用还是七月份，彼时的豆包大模型常常给我的代码重复写几千行相同的内容，我就卸载了它。

再次换回 trae，居然发现它比 codebuddy 好用太多，它好像更能理解我的表述，分析代码的逻辑性也更强，修改一处代码后也会记得同时修改受到影响的其它模块。一开始它在修改代码后会在本地启用 npm run dev，但是它会开多个终端，然后发现端口一直被占用，后来就不用开发模式，而是直接在本地构建 npm run build，终端有报错的话它还会再次修改代码。

trae会很有条理地解决问题

在 trae 的帮助下，我不断修复遇到的各种 bug ——用 AI 写代码就会面临这样的问题，要多次调试和修复。我的 github 仓库里最近的提交几乎全是修复 bug 的。

用 trae 后，这个导航页终于基本可以正常使用了。

目前基本可以正常使用的版本

SimpleNav

说起来是“简单”导航，但是我挺想实现还未实现的功能又挺复杂，比如在首页增加天气、热搜和电影推荐小组件，也想像 weTab 那样可以整一个在线的 TODO 小组件之类的玩意。但是我时间有限，尤其是最近超级忙，所以只能往后面再拖延了。

项目地址：W4J1e/Simple-navigation: 这是一个简洁的自用导航页。

体验地址：SimpleNav

功能特点

🎨 美观的界面设计：支持多种背景类型（纯色、图片、渐变、Bing每日一图、本地上传）
🌅 自动更新壁纸：支持自动获取并更新Bing每日一图作为背景
🔍 集成搜索功能：目前只支持必应，暂时没有能力把搜索引擎图标放到搜索框左侧用于点击切换
🕐 实时时钟显示：显示当前时间和日期
📱 响应式设计：适配各种设备屏幕
🗂️ 分类管理：支持链接分类和筛选
🌙 主题切换：支持明暗主题切换
☁️ 云同步：支持OneDrive云同步功能
📤 数据导入导出：支持 json 格式的数据的备份和恢复
🖼️ 图标选择：支持 Font Awesome 图标或网站 favicon

基本使用

添加链接：点击页面中的”+”按钮，填写链接信息
编辑链接：长按链接卡片进入编辑模式
分类筛选：点击顶部的分类标签进行筛选
搜索功能：使用搜索框进行网络搜索
设置页面：点击页脚的”设置”按钮登陆 onedrive 以同步、设置网页背景和数据导入导出

自部署

目前支持大多数无服务平台的部署，可以 folk 我的仓库，连接到 vercel 或者 EO pages 之类的平台，选择 nextJS 项目进行部署。

需要配置以下环境变量：

AZURE_CLIENT_ID=your_azure_client_id

AZURE_CLIENT_SECRET=your_azure_client_secret

AZURE_TENANT_ID=your_azure_tenant_id

AZURE_REDIRECT_URI=https://yourdomain.com/api/auth/callback

JWT_SECRET=your_jwt_secret_key

详情可以参考部署文档。