在 秒哒 里看到一个应用是"写word看小说"，觉得挺有意思的，但是体验了下，感觉不是很理想，比如：
- 由于导入的txt文本编码问题导致显示乱码
- 无法在已显示的内容里编辑错别字等
于是打算自己实现一个类似的。
开发过程
初始阶段
首先，分别通过chatgpt和claude生成一个UI框架，先不考虑交互逻辑，但是生成的页面布局什么的与自己期望的不太符合。于是决定自己动手写，参照了office 365的web网页端(好多svg是从上面扒下来的)和本地的word文档的色系。
最终效果如下：
功能实现
然后就是分别给chatgpt和claude上传文件，提示词如下：
以下只有一个UI框架，没有任何交互的。现在请完善页面：
1.所有下拉框在word-container内
2.点击设置按钮，从页面右侧滑出固定宽度的设置面板，面板里有头部（左侧设置文字，右侧关闭按钮），内容区域有编辑模式（自动/手动切换，默认为自动），文字显示行数（对应打字字数或者自定义行数，默认为对应打字字数）,关于（主要说明使用方法，包括快捷键切换编辑模式）
3.点击文件，出现下拉框，下拉框内容包含打开（支持导入txt和docx文件）,保存。
4.当文档区域有内容的时候，icon-saved会显示，表示文档正在编辑。
5.当导入本地文件后，nav-title会显示文件名。
6.编辑模式为自动的时候，在文档区域打任何字其实显示的是导入的本地文件内容（按源文件格式）。显示的字数是根据设置面板里的设置来决定。编辑模式为手动的时候，可以针对已显示的内容进行编辑，修改后需要在“文件-保存”里点击保存，这将只替换相应的修改区域文字，比如文件内容是“你好呀，世界”，此时显示了“你好呀，”，编辑后是“你好，”，那么保存后的文件内容是“你好，世界”。
7.状态栏根据文档内容的变化而变化，例如显示页数、字数等信息。如果文档内容一页放不下，按照word文档的格式进行分页。也就是在加一个文档区域？
8.实现缩放逻辑。
9.不要调整原来存在的样式和布局。js文件单独提供，遵循样式、脚本和html分离原则。原来就有的样式和html代码不要提供，只提供新增的和修改的。
10.页面上未提及的功能，比如编辑栏（包括标题栏里的切换等）里的任何操作都不用实现，只是占位模仿word编辑。值得注意的是如果页面有内容，那么编辑栏里的撤销和重做的UI状态要变，实际没功能。
以上就是这个“写word看小说”的需求文档。
遇到的问题
但是实际效果与需求还是有出入的，主要问题包括：
- 输入法候选词显示问题
- 为了看起来真实点，打字时候输入法候选词要显示出来，而不是通过代码实现一个模拟输入法
- AI给出的方案是页面上生成一个隐藏的textarea文本框，然后每次输入其实是聚焦到这个隐藏的文本框内实现的
- 实际体验下来，光标定位不准、会吞候选词
- 编辑模式切换问题
- 已显示内容切换为手动编辑模式的问题
- 删除了一些字，在切换为自动模式，会把已显示的内容末尾删除同等于编辑字数数量的字
- 不断的切换，会不断的删除直至把有显示的内容删除干净
解决方案
由于提到的两个问题算是这个工具的核心功能，没办法，只能让重构代码：
于是提示词思考了下，改为已显示内容和未显示的内容分别管理，这样手动模式下就可以编辑已显示的内容并在切换为自动模式后覆盖原来已显示的。关于候选词我的想法就是不考虑聚焦生成的隐藏textarea上，因为mommoth这个库在设置属性contenteditable="true"后，是可以正常触发输入法候选词的，要做的就是拦截输入法输入的词并显示出相应字数的内容即可。于是，在经历过两天的不断调整后（没办法，claude pro的使用限制，还有就是chatgpt在编码的需求理解上感觉有点小差距），终于算是达到了期望的效果。
**体验地址：https://paimons.cn/tools/word/index.html
实现的功能
- 历史记录
- 文字排版（居左、居右、居中、两端对齐）
- 缩放
- 页码显示
- 输入法候选词显示
- 自动分页
- 手动/自动编辑
欢迎佬摸鱼，咳咳，提高阅读的专注度
总结感想
ps: 昨天试用了下claude code，一共三四千行的代码，问题没解决，额度花的挺快，属实吓到我了，我还是老实使用网页端吧。
这次的需求给我的感觉就是：
- 实际上还需要自身在编程的过程中有明确的思路
- AI只是个辅助工具，在有明确的思路下，AI确实好用方便
微信登陆 
