我们把文档搬出了模态框

你正在为一个支付服务写新人上手页面。六个标题、两个代码块、一张它所消费队列的表格，还有一段你反复重写的文字——因为下一位工程师真正会读的就是那一段。

在 Archyl 里，直到这周为止，这些你都是在一个对话框里写的。它背后的页面会变暗。文档树——相邻页面所在的地方，你本会去那里确认上一篇是怎么命名的——也跟着一起变暗。编辑器填满了对话框，而对话框不是屏幕，于是读一个页面和写一个页面发生在两个不同的地方。

它能用。它也不太显得专业，这句话我一直绕不开，直到我坐下来把它重新做了一遍。

文档工作区里已经没有模态框了。 下面是取代它的东西。

编辑器在文档所在的位置打开

在页面上点编辑，或者阅读时按 E，编辑器就会就地接管内容栏。树还在原处，亮度不变，仍然可以点击。没有任何东西盖住任何东西。

你在写的时候，文档看起来仍然像一篇文档。标题是一个标题字号的纯输入框，没有说明文字，也没有外框。标签在下面：输入后按 Enter 或逗号即可添加一个，在空的输入框里按 Backspace 就能把上一个收回来。文件夹路径沿着操作栏顶部延伸，所以你随时知道正在写的这个页面会落在哪里。

这条栏也承载状态。当草稿和已存内容不一致时，会有一个琥珀色圆点和 未保存的更改，然后是带着 ⌘↵ 提示的保存。这个快捷键在编辑器的任何位置都有效，包括在 Markdown 正文里，所以你永远不用再跑回按钮那边。模式切换旁边有一个全屏开关，适合你只想要那一段文字的时候，按 Escape 就回来了。底边上是字数和阅读时间。

编写、分栏、预览

编辑器有三种模式，也是你在工具栏上唯一需要做的决定：

编写只有 Markdown，占满整列宽度。
分栏把源码和渲染后的页面并排放在一起。
预览只有渲染后的页面。

默认是分栏。无论你选哪一种，Archyl 都会把它存在你的浏览器里，并以此方式重新打开每一篇文档。于是喜欢写原始 Markdown 的人和想看到标题渲染出来的人，永远不必为此争论，也不必在每个页面上重设一次。

文件夹就是树里的一行

以前新建文件夹是它自己的一个对话框：一个框、一个文本输入框、一个创建按钮，以及对这个文件夹将出现在哪里毫无线索。

现在点击树头部的文件夹图标，会在这个文件夹将要存在的确切位置打开一行可编辑的行，缩进正确，文件夹图标已经画好。输入名字，按 Enter，它就存在了。Escape 取消。从某个文件夹自己的菜单里请求一个子文件夹，父文件夹会展开，那一行出现在它里面。

重命名也是同样的方式，在那一行里完成。移动页面和文件夹仍然是拖放。

你没法从未保存的工作上直接点走

文档工作区内的每一次移动都会经过同一道守卫：在树里选中另一个页面、开始一个新页面、把另一个页面打开来编辑、从编辑器里取消退出。如果草稿有未保存的更改，这个动作会被扣住，你会先拿到一个确认，继续编辑 是退路，放弃更改 是刻意为之的那一边。一旦你确认，你最初请求的那个动作就会执行。

浏览器也覆盖到了。带着未保存的草稿关闭标签页，会触发浏览器自己的警告。

这是这次发布里最不显眼的改动，也是我最愿意为之辩护的改动。一棵可点击的页面树摆在编辑器旁边，只有在点击不会让你损失一段文字的前提下，才是个好布局。

目录跟随面板，而不是窗口

当这一栏足够宽时，页面的标题会待在正文右侧的粘性导航条里，随着你滚动标出当前所在的小节。当它窄到放不下导航条时，它们改为收进工具栏里的内容弹出框。

两者之间的切换由面板的宽度决定，而不是浏览器窗口的宽度。这个区别就是全部要点：文档栏要和树共享空间，所以一台开着树的 27 英寸显示器，是一个宽窗口围着一栏窄窄的阅读区。基于窗口的断点会在那里塞进一条导航条，把正文挤扁。Tailwind 4 的 container query 让面板自己量自己。

点击一个标题会滚动文章，而且只滚动文章。导航条会滚动它自己的列表，让当前项保持在视野里，而不会把文档从你脚下挪走。

从这一堆里拿掉了什么

这次发布里有四个组件被彻底删掉了：文档模态框、新建文件夹模态框、旧的目录侧边栏，以及一个已经没有任何地方在渲染的卡片列表式文档页面。

Markdown 编辑器仍然是 @uiw/react-md-editor，但它的样式现在来自和 Archyl 其余部分相同的设计令牌。浅色和深色是同一套规则，而不是在库自带样式之上再压一层按主题覆写的代码块。

附件没有变化，工作方式和以前完全一样：把文件拖到编辑器上、粘贴一张截图，或者用附件。图片会直接嵌入正文，其余的都落在附件面板里，页面头部的回形针计数会把你带过去。完整的故事在拖拽、放下、搞定：文件来到 Archyl 文档。

为什么值得为一个文本框重新做设计

Archyl 的职责是让架构模型和代码保持一致，这一部分 discovery 会自己完成。围绕模型的那些文字得不到这样的帮助。解释这条队列为什么存在的 ADR、新人上手页面、运维手册：它们之所以还成立，只是因为有人一直在写；而当书写的界面跟人作对时，人就写得更少。

模态框是每一次都要交的一笔小税。它没了。