使用网页应用

网页应用已上线，地址是 washy-washy.ryankes.eu。它读取的是与 CLI 相同的图表与机器文件，只是渲染成了一个页面，而不是 PDF。

内置配置与当前配置

首页（/）自带一份虚构的示例图表和机器——与 CLI 自己的 README 中展示的是同一份示例数据。这是首次访问者看到的内容，也是在没有其他配置生效时，每个页面都会回退使用的内容。

上传一份配置会替换掉它。页眉中的“上传配置”按钮——每个页面上都有——以及 /config 页面上更完整的上传/下载区域，接受的都是同一种 { machine, chart } JSON 文件（参见图表与机器文件），会先校验，再存入浏览器的 localStorage。从那以后，除非你清除它，否则每个页面读取的都是这份配置，而不是内置的那份。

在 /config 或 /config/machine 上编辑的原理相同：保存操作会把编辑后的配置写入同一个存储位置。这一切都不会发送到服务器——配置永远不会离开你的浏览器，换一个浏览器或清除网站数据，都会重新回到内置示例。

/config 上还有一个下载链接，它会把当前生效的配置——不论是内置的还是自定义的——原样导出为与上传时相同的 JSON 结构。这就完成了一个往返：你可以在别处编辑这份副本，或者把配置交给别人。

主题切换

页眉中还有一个浅色/深色切换开关，位于每个页面上“上传配置”旁边。如果不去动它，网站会跟随你操作系统或浏览器的 prefers-color-scheme 设置，和这个功能出现之前一样。点击它则会设置一个明确的选择，存入 localStorage，此后在每个页面、每次访问时都会覆盖那个系统设置——直到你再次点击它。这是一个两态切换开关，不是一个选择器：并没有单独的“恢复跟随系统”选项。

键盘导航

网站还支持几个 vim 风格的快捷键，它们只在页眉中挂载一次，因此在每个页面上都能用——包括这些文档页面：

j 和 k 分别向下、向上滚动页面。
g g（连按两次 g）跳转到页面顶部。
G（shift-g）跳转到页面底部。
/ 聚焦到当前页面自己的搜索框——例如首页的衣物堆搜索——而不会把斜杠本身输入进去。
?（shift-?）打开一个列出所有这些快捷键的帮助浮层；按 Esc 或点击浮层外部即可关闭它。

同一个浮层也可以通过页眉中的 ? 按钮打开，方便使用鼠标或屏幕阅读器而非键盘的用户。当你正在文本框、文本域、下拉选择框或任何其他可编辑元素中输入时，这些快捷键都不会触发——正常输入始终优先。

筛选器

首页可以按你想要的范围筛选（完整图表、仅洗涤、仅熨烫），也可以用自由文本搜索衣物堆，此外还有一个默认收起的“高级”折叠区域，用于按精确的程序、温度或脱水转速筛选，以及搜索洗涤剂。所有这些筛选条件作用于同一份列表；一堆衣物必须满足所有生效的筛选条件才会显示出来。

在考虑到衣物堆搜索以及你在“高级”中已经选择的其他条件后，程序、温度和脱水转速这几个下拉选择框始终只会提供那些至少还能留下一堆衣物的选项——这样你就不可能选出一个会让图表变空的组合。这些列表会随着你更改其他筛选条件而实时更新，如果某个字段已经没有可能匹配的选项，它会直接禁用自己，而不是显示一个空的选项列表。

筛选条件会像配置一样保存在 localStorage 中，在多次访问之间保留。筛选后的视图也是可以分享的：地址栏会把 cut、pile、program、temperature、spin 和 detergent 作为查询参数带上，并且只要 URL 中带有其中任何一个参数，就会直接覆盖上次访问保存下来的内容——关于把这个 URL 分享出去的按钮，见下方的“分享”一节。

PDF 下载按钮旁边是分享此视图按钮，它会原样发送当前页面的 URL——包括所有筛选条件，因为地址栏已经把它们作为查询参数带上了（见上方的“筛选器”一节），所以不需要额外打包任何东西。

如果你当前正在使用自定义的机器或图表（见内置配置与当前配置），链接还会把整套设置一起带上，以一段压缩过的 #config= 片段追加在后面。打开这个链接的人会得到你确切的机器和图表，而不只是你的筛选条件——即使对方浏览器从未接触过你的 localStorage 也是如此。这一步同样不会经过服务器：片段从不通过网络发送，所以链接本身就是全部传输内容，和上传一份配置文件是一样的。页面读取并保存它之后，会把这段片段从地址栏中清除——之后再刷新或再次分享，得到的就是网站正常的短链接，而不是这个一次性链接。一个被破坏或手动改动过的链接，会显示与无效配置上传时相同的、精确到行列的错误提示，页面会回退到原先已生效的内容，而不会直接崩溃。当没有自定义内容生效时，这个链接和以前一样——只带筛选条件。

它会先尝试浏览器原生的分享面板（navigator.share——信息、WhatsApp、AirDrop，或操作系统提供的任何方式），只有在该 API 不可用，或者可用但确实失败时，才会回退为把 URL 复制到剪贴板——并像卡片自带的“复制链接”按钮一样显示“Copied!”。取消分享面板不属于这两种情况：那只是拒绝了这一种分享方式，不会发生任何其他动作，也不会在你不知情的情况下悄悄复制任何内容。

PDF 导出

首页有两个下载按钮，两者的范围都限定在当前筛选出来的内容上，并且都在客户端用与 CLI 的 bun run generate 相同的 @washy-washy/pdf 渲染。在你点击之前，两者都不会生成任何东西——筛选页面本身绝不会在后台触发渲染。

下载手机版生成的是与 CLI 相同的窄幅单页滚动版面——适合站在机器旁用手机阅读。
下载打印版生成的则是一张 A4 页面：一张速查表，加上每堆衣物各一张详情卡片，适合打印出来贴在墙上。

单张卡片也有自己的下载按钮，一次只下载一堆衣物。它只有手机版式——打印版式总是会绘制整张速查表加上每一堆衣物的卡片，因此无法像手机版式那样把范围缩小到单独一堆衣物。

复制链接，位于卡片下载按钮旁边，会把该筛选视图的 URL 放到你的剪贴板中——用的是与上方页面级分享按钮相同的剪贴板回退方式，只是范围限定在这一张卡片上。