需求由来

Postman虽然功能齐全，但有些功能我用不上，再加上其强制要求登录，于是我很想自己开发一个类似的工具，仅实现我需要的功能。

踩坑

响应显示乱码

当我加上header后，请求中文网站就开始出现诸如zz��}��$�u߿�\������U}的乱码。逐个排查后发现是Accept-Encoding的原因。我开始的时候是照着Postman的设置来写，写成了 { key: 'Accept-Encoding', value: 'gzip, deflate, br', include: true }，但实际上只有deflate是支持的似乎也不尽然。我最终的解决办法是干脆不设置。

代码编辑框

Body的raw选项，我需要使其代码高亮。开始我直接引入了PrismJS/prism，并在其上进行修改。bug不断，折腾了蛮久。

后来才想到我需要的不只是语法高亮，确切地说应该是代码编辑框，这方面应该有现成的库才对。一番寻找，发现react-simple-code-editor/react-simple-code-editor符合我的需求。很快就解决了。

标签页多开

我先做好了./work/page这个组件。接下来我希望实现类似于Postman的多标签页，每个标签页都是用同样的组件，但它们互相独立。

本来这并不是件难事，但因为我之前偷懒，高度依赖jotai的atom来做状态管理,因此花了好些时间。

先尝试了jotaijs/jotai-scope,它给的示例确实符合我的需求，但当标签切走再切回去的时候，原来的状态就被重置了，我找不到问题所在，放弃。

中途多次问ChatGPT和Gemini，都是一开始看着很可行，然后实际不行，再问就开始重复之前的回答了。

最后是靠Devv解决的，它说Jotai的atomFamily能解决。atomFamily允许创建一组相关的原子，并为每个实例提供一个唯一的标识符。一试,确实可行。

现在再看我的实现，感觉还是比较简陋的。每个标签页对应一个特定的tagId，然后atomFamily就是"a Map whose key is a param and whose value is an atom config"。

cargo tauri build

没想到整个过程会这么折磨，一个问题解决后，新的问题又出现了。

Failed to fetch Inter from Google Fonts.

参考Error ‘Failed to fetch Noto Sans JP from Google Fonts.’ · Issue #45080 · vercel/next.js

Type ’number’ is not assignable to type ’never’.

排查无果，我选择修改next.config.mjs，dangerously produce production code even when your application has errors。

参考next.config.js Options: typescript | Next.js

ReferenceError: navigator is not defined

这个报错刚开始让我觉得莫名奇妙，因为我记得自己没用到navigator。搜索后发现是我引入的prism.js使用到了。

而报这个错的原因又与tauri有关:Tauri不支持Next.js的ssr模式。

Next.js is a React Framework that comes with both Server-Side Rendering (SSR) and Static-Site Generation (SSG) capabilities. To make Next.js work with Tauri we are going to use the SSG mode since it generates only static files that can be included in the final binary.

我最终的解决方法是参考高级特性: 动态导入（Import） | Next.js | Next.js中文网，将使用到prism的组件动态引入。

WixTools安装失败

Connection Failed: Connect error: 由于连接方在一段时间后没有正确答复或连接 的主机没有反应，连接尝试失败。 (os error 10060)

参考[如何解决安装失败] · Issue #7338 · tauri-apps/tauri。

参考