Volta-XTY

稍微搞了搞，感觉这样效果也还可以吧：  实际上只加了几行CSS： `#chapter-content{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } #chapter-content > p.line-break{ grid-column: 1 / 3; height: 0px; }` 因为``元素和grid layout相性不好（我自己怎么搞都不行），所以需要把``换成空的``元素，这里加了一个`line-break`class用于CSS选中。 这里没有考虑设备宽度和切换单/双栏，不过也并不麻烦。

> 这种能做到同步滚动吗？比如两边行数不一样的情况 是完全同步的，因为是把所有行重新排列成两列的表格（空行独占一行两列）。至于两边行数不一样，如果一行翻译一定和一行原文对应的话，应该是不需要考虑的吧，如果有的原文对应不到相应翻译，那也可以强制让翻译占据左边一列，原文占据右边一列： `#chapter-content > p.翻译{ grid-column: 1 / 2; } #chapter-content > p.原文{ grid-column: 2 / 3; }` 只要一一对应的翻译和原文相邻，应该就不会错位。  更新了一下显示效果↑（动画有点大，可能加载失败）

> 这个问题我觉得大概是来自vueuse本身的实现，可能不好搞。 我看了一下，大概是`useLocalStorage()`返回的`ref`在切换一次页面以后就不再和 localStorage 同步了，确实大概不好搞，尝试更新了vueuse/core也无法解决。姑且想到几个解决办法： 1. 在每次调用`addJob()`等方法时，多写一行`const ref = useLocalStorage(...)`。这样可以保证写时与 localStorage 同步，但是无法保证读时与 localStorage 同步。 2. 直接把`Locator.sakuraWorkspaceRepository: lazy(...)`套的`lazy()`直接去掉，每次获取`workspace`时，都是一个新的 Ref。这样就可以保证读写时均与 localStorage 同步，如果可以保证，切换页面时，必定调用`Locator.sakura...()`方法，那么所有的 Ref 就都是有效的。然而既然套了一层`lazy`，大概是有其他作用，所以不是很想用这种方法，感觉以后会出问题。 3. 提前`Locator.sakuraWorkspaceRepository()`第一次调用的时机。在App.vue里面额外加入一行`const _ = Locator.sakuraWorkspaceRepository()`（空读一次），似乎确实可以解决问题。但是这样说实话还是不太优雅，而且我不太清楚为什么这样可以 work，是凭借直觉猜出来的。不过确实仅这一行代码就可以解决问题（不过我还把vueuse升级到11.0.1了），当然或许也要对 GPT Workspace...