栖光小站是我和 Codex 一起持续完善的个人博客。它承载技术记录、项目展示和日常分享，也记录着我在实际使用中不断发现问题、提出想法，再把改动一点点落实到页面里的过程。

这次新前端以 Shirone 主题为基础，逐步接入已有的 Java 后端和内容管理后台。我希望它既有自己喜欢的视觉风格，也能方便地更新内容、与访客交流，并在网络或服务出现问题时给出清楚的反馈。

从页面风格开始确定方向

早期的博客围绕海岸背景和潮汐氛围展开。随着页面逐步丰富，我发现自己更喜欢现在这种浅紫、奶白、圆角卡片与柔和插画组合的感觉，因此开始重新整理站名、封面和页面细节，最终在后台使用“栖光小站”这个名字。

我向 Codex 提供当前页面的截图，指出哪些地方不协调、哪些内容没有显示完整，再一起调整。项目封面重新设计成与博客一致的插画风格；关于我里的技术标签补上对应图标，头像周围的跳动标签改成职业方向与生活记录；页脚也根据我的偏好进行精简。

这部分工作让我逐渐明确了网站的方向：希望访客能舒适地阅读，也能从文字、作品和日常内容里认识我。

把新主题接到自己的内容系统

前端采用 Astro，结合 Shirone 原有的 Svelte 组件，并复用 Vue 编写的账号、评论和管理能力；后端继续使用 Java、Spring Boot 和 MySQL。后台界面还使用了 TypeScript 与 Element Plus。

接入时，我要求以当前的新前端为准。我们保留既有文章、媒体与后台管理能力，把公开数据逐步接入主题页面，并为项目、动态和相册整理独立的详情入口。

这一阶段也暴露了一个具体问题：从项目卡片进入详情时，曾出现跳回首页的情况。我们重新检查了项目链接和路由，让作品列表与详情页能够对应起来。项目正文里原先依赖旧页面的入口，也需要随着新结构一起整理。

让后台编辑真正反映在前台

我在站点设置里改过博客名称和简介，但前台导航、首页、侧栏以及登录弹窗仍曾显示旧文案。这说明新主题和后台之间还有各自维护的配置。

我们逐步梳理站名、作者、副标题、首页简介和个人介绍的来源，让需要同步的页面读取后台设置。登录弹窗的欢迎语也跟随站名变化；首页简介与个人介绍可以留空，不再强制填入默认文字。

公告最初只是页面中的一张主题卡片，后来接入后台，可以编辑内容、控制显示，并设置有效期。关于我与技能页也曾各存一份不同的技术清单，最终按我的选择合并，由后台“技能”统一维护。日历切换到上个月后无法返回当前月份的问题，也在实际点击过程中被发现并修正。

这些改动的目标很直接：日常维护内容时，后台的保存应当有明确结果，前台也应当展示对应的数据。

把评论和登录做成完整的使用流程

评论区是我提出较多修改意见的地方。文章、动态和其他页面需要有协调的评论布局，登录访客要显示自己的头像，我的回复则使用后台上传的站长头像。

我们围绕这些要求调整评论与回复的展示，并接入登录访客的未读回复提醒，让访客可以从通知找到对应讨论。登录表单补上密码显示开关，密码输入默认保持隐藏，由使用者主动切换。

游戏页则逐步接入 Steam 名片、游戏资料与游玩时长。第三方接口由后端处理，密钥放在服务端私有配置；本地网络、代理连通性与接口鉴权分别排查。游戏封面展示也根据我的反馈调整，尽量保留完整画面。

把弱网和异常状态纳入设计

最初我关注的是页面能否正常打开，后来在使用中发现，弱网、断网和后台路由加载失败时，同样需要有完整的提示。

我们为前台与后台补充加载、等待、超时、离线、错误和恢复连接等状态，并沿用博客的配色、圆角和动效语言。我不希望关键网络提示只出现在页面角落，因此要求把相关提示调整到更容易注意的位置。

异常处理还需要解决交互上的细节：失败后能重试，恢复连接后提示能正常收起，已取消或过时的请求不能覆盖最新结果；手机页面、键盘操作和减少动态效果的设置，也要一起考虑。

开发中几次印象深刻的排查

刚发布的动态为什么少了八小时

我曾在发布动态后发现显示时间明显不对。排查后，我们把检查范围扩展到文章、评论和后台其他时间展示，统一按北京时间处理，并梳理日期解析与格式化的边界。

这让我意识到，界面上的一行时间背后，连接着数据保存、接口返回和浏览器显示，不能只修改某一处文字格式。

发布前预览为什么还是旧前端

后台虽然已有预览功能，但打开后仍然是之前的页面样式，无法判断内容在当前博客里的实际效果。

我们把文章、项目、相册和动态的发布前预览接到当前主题的详情页，支持桌面与手机视口。预览展示当前编辑副本，并隔离草稿、统计和真实提交，让我可以在保存前检查排版。

验证码输入正确为什么仍然失败

最近一次登录问题中，我尝试大小写都被提示验证码错误。排查发现，后端原本已经不区分大小写；问题出在图片重复加载会覆盖会话里保存的答案，导致看到的图片与实际校验内容错位。

我们改为一次取得图片和独立标识，切换登录方式时复用同一张图片，提交时按对应标识校验。同时保留过期与一次性使用限制，处理多标签页、加载失败和慢请求取消。随后用隔离浏览器与本地真实接口验证了这条流程。

我和 Codex 如何一起推进

我的参与主要体现在明确需求、提供截图与录屏、指出使用中的问题，以及判断设计是否符合自己的偏好。很多需求是在实际点击、编辑和阅读之后才变得清楚，例如头像是否正确、弹窗是否醒目、封面是否被裁切，以及后台修改有没有同步。

Codex 协助阅读现有代码、整理数据与路由关系、实现修改、排查问题，并补充对应的检查和交接记录。我再根据实际页面继续反馈，我们据此调整下一步。

Shirone 提供了新前端的主题基础。在这个基础上，我们逐步接入自己的内容、账号和管理服务，整理项目展示、个人资料以及异常反馈，使它越来越贴近我实际使用博客的方式。

目前进展与后续计划

目前，这些改造已在本地前后端逐步集成并完成相关验证。备份恢复补充了读者身份与回复回执的保留，发布流程增加了版本校验与回退准备，站点地图能够读取已发布内容，故障监控也准备了邮件提醒能力。

下一阶段会继续完成 wuhaiji.cn 对应云端环境的更新、访问核验和真实邮件联调，同时补充技术文章、项目成果与当前版本截图。这个博客会继续随着我的使用和记录而变化。

主题基础：Shirone。开发协作：杨真与 Codex。

我负责确定博客定位、页面风格与功能需求，通过截图、录屏和实际操作反馈发现问题，并决定每次改动是否符合预期。
Codex 协助梳理现有工程、编写前后端代码、定位问题、补充验证并整理交接记录。前端基于 Shirone 主题继续改造，既有 Java 后端与管理后台逐步接入新页面。

• 新旧前端的数据来源不同：将当前 Astro 前端接入既有 Java 接口，逐步替换主题示例数据，保留内容管理能力。
• 后台保存后前台仍显示旧内容：统一站点设置的运行时读取，处理常驻导航、登录弹窗和跨页更新；技能内容统一由后台维护。
• 正常网络下可用，弱网和断网时缺少反馈：补齐加载、超时、离线、失败重试及恢复连接状态，避免过时请求覆盖新状态。
• 发布时间少八小时：统一文章、动态、评论及后台的北京时间展示，并检查解析和格式化链路。
• 发布前预览仍是旧页面：直接使用当前主题详情页渲染编辑内容，隔离草稿、统计与真实提交。
• 图形验证码看似正确却校验失败：发现重复取图会覆盖会话答案，将图片与独立标识绑定，并处理多标签、过期、一次性使用和加载失败。

完成了当前博客前端与内容后台的持续整合：文章、动态、项目、相册、技能和个人资料可以通过各自入口维护；公告、站名和个人文案能随后台设置更新。
评论接入访客头像与站长头像，登录访客可查看回复提醒；游戏页接入第三方资料展示。阅读端和后台补充加载与异常反馈，项目发布前预览使用当前主题。
本地已完成相关接口、组件和浏览器场景验证；备份、发布校验及邮件监控工具已补充。云端更新和真实邮件联调仍作为下一阶段工作。

早期页面以海岸开场和独立阅读界面为主，项目介绍与部分预览沿用旧版文案；主题配置、关于我和技能页存在不同的数据来源。部分设置保存后仍需处理前台同步，弱网与异常状态的反馈也不完整。

当前前端采用浅紫与奶白配色、圆角卡片、星点装饰和插画封面，首页、详情页、登录弹窗及交互反馈逐步形成一致的视觉语言。站点内容与后台连接更加完整，项目、相册和动态有各自的详情入口；预览、时间、头像和验证码等问题经过逐项排查修正。

完成 wuhaiji.cn 对应云端环境的新前后端发布与访问核验，完成真实邮件告警联调；持续补充原创技术文章、项目成果和当前版本截图；根据真实访问反馈继续调整手机阅读、资源加载与异常恢复体验。