我做的这个页面左边读诗右边看月夜。第一张运行截图里我选中了《水调歌头》的“转朱阁低绮户照无眠”旁边就有对应的短注和窗景换到王建《十五夜望月》诗句、短注、画面也一起换了。比起只摆一张月亮图我更想让读者朋友们点一句诗再看看窗外发生了什么。“月下读诗”是我用 AtomGit 上的华为云码道 CodeArts 代码智能体做的中秋诗词阅读网页。我们可以选句、看短注、切换诗篇也能展开《水调歌头》全文或暂停窗景动效。我用 Vue 3、TypeScript 和 Vite 把它做成了打开就能读的小应用不用注册账号阅读过程也不依赖在线大模型。先把范围收住诗能读画面再跟上最初给 Agent 提需求时我先把内容压到三首苏轼《水调歌头》、王建《十五夜望月》、白居易《八月十五日夜湓亭望月》每首挑三处句子供读者点选。苏轼这首默认只露出下阕标明“节选”想看小序和上阕再点“展开全文”。那么画面怎么配合阅读我的要求是点中诗句短注马上更新窗景可以慢慢变即使暂停动效也照样能读诗、选句。我还给 Agent 一张概念效果图让它参考左右布局但文字、目录、按钮和窗景都得在网页里真正做出来。那张图只是我想要的样子下面两张运行截图才是页面做出来后的效果。我特别提了一个小要求打开页面就能读第一首诗别让读者等“写字动画”播完才可以点句子。诗文不能只顾着排版我也得看看文字从哪儿来。开发记录显示Agent 查资料时有些页面能打开维基文库当时却超时了这部分没比对完的情况它写进了docs/SOURCES.md。白居易那首采用“临风一叹无人会”文档也记下了另一网络页面的不同写法。写这篇文章时我又去看了《全唐诗》卷 440 的在线录文确实能找到这句。不过这只是在线文本的核对我没有查古籍原刻更谈不上完成版本考证。页面里的九条短注也是辅助阅读的小解释不是权威译注。页面能用了我又改了三处观感Agent 把诗文数据、选句逻辑和页面组件搭起来后我先看了一遍运行画面。结果有三处让我想再改改目录一打开就占着位置读诗时有点碍眼右边的图片看着不完整整幅画面也太静了。我把这三点发回会话请 Agent 收起目录、调整图片比例再加一点缓慢的呼吸感。截图里保留了我当时的反馈和它的分析过程。接下来我对照了源码目录初始是open false窗景视口定为 16:9和项目里图片的比例接近图片用 22 秒完成一次缓慢缩放也照顾到了暂停和系统的“减少动态效果”设置。我还发现旧 README 没跟上这次改动它写的仍是“内联 SVG、25 秒薄云漂移”。当前MoonWindow.vue实际用的是三张本地 WebP 图片外加 CSS 光色叠层。所以这里我按现有代码和运行画面来写不沿用旧说明。第二张运行截图里我切到了王建《十五夜望月》。目录收起来了右边换成庭院与桂花的月夜图左边选中“中庭地白树栖鸦”下方的短注和窗景说明也跟着换。两张图能让我们看清页面前后是什么样至于选句怎样带动这些变化我又回头看了组件和状态代码。一句诗怎样找到自己的窗景读者点一句诗窗景为什么能找到对应的变化我在代码里看到诗行、注释和场景参数是分开放的。每行诗有固定 ID通过annotationId找到短注另外还有九条“诗行 → 场景目标”的配置。接下来程序先拿这首诗的基础场景再叠上选中句子的设置。src/data/scenePresets.ts里负责这一步的代码不长exportfunctionsceneTargetForSelection(poem:Poem,lineId:string|null,):{state:SceneState;durationMs:number;note:string}{constbase:SceneState{...DEFAULT_SCENE,...(BASE_SCENE_PRESETS[poem.id]??{})}if(!lineId){return{state:base,durationMs:600,note:}}constlinkfindLineScene(poem.id,lineId)if(!link){return{state:base,durationMs:600,note:}}conststate:SceneState{...base,...link.preset.target}return{state,durationMs:link.preset.durationMs,note:link.note}}这样一来切到另一首诗上一首的短注就不会留在下面接连选句时状态会按最后一次选中的 ID 更新。我也在意文字能不能被正常阅读诗句是页面上的文字带注释的句子做成可用键盘操作的按钮没有把字直接烘焙进窗景图片。不过我翻到MoonWindow.vue时也发现一个没做完的地方。组件目前会读取月亮亮度、冷暖色调、地面和水面的光层设置但还没用到预设里的cloudOffsetX、floorLightOffsetX和birdOpacity。所以窗景说明虽然写了“云掠过月面”“窗格投影移动”我不能说这些都已经做成逐部件动画。现版代码里能确认的是三张图片随诗切换以及滤镜和整幅叠层的透明度随选句调整。动效开关我也核对了一遍。useMotionPreference.ts分别看用户有没有暂停、系统是否要求“减少动态效果”、页面当前是否可见三项都允许动效才播放。暂停以后我们仍能选诗、读短注。要是这时再切换诗图现版还留着约 200 毫秒的淡入过渡并不是“所有动画瞬间消失”。我核对了什么还没核对什么写到测试这里我得把两次记录分开说。开发会话的截图里Agent 报告首版 Playwright 点击流 36 项、键盘流 23 项通过那时还没换成现在的 WebP 场景图。我没有把这份旧记录当成现版视觉效果的浏览器回归测试。然后我在当前本地项目重跑了npm test、npm run typecheck和npm run build三个测试文件共 27 项通过类型检查也过了Vite 构建成功。单测检查了三首诗和九条短注的数据、切诗选句状态以及暂停、系统偏好和页面可见性如何配合。这能说明相关逻辑在当前工作区跑通了但我还没在真实手机上检查字的大小和触摸操作也没逐句核对动画。当前工作区的依赖版本与首次提交时不同所以两次结果得分开看。我把源码推到了 AtomGitcannonjinx/moonlight-poetry。下面这张 Agent 截图里能看到账号cannonjinx和推送记录我也核对过远端main它与本地当前提交2f38a61一致。同学们如果想自己打开看看拉取项目后执行npm install、npm run dev即可启动npm test、npm run typecheck、npm run build则可以分别复核逻辑、类型和构建。做完这一版我最在意的还是读诗时会不会被画面打断。目录默认收起、图片比例调对以后页面顺眼多了回头看源码我又发现有些场景参数还没接进窗景README 也停在旧实现。接下来我会补测真实手机、Safari 和大字号场景再把这些遗漏逐个补上。