1、立项原因与产品问题：个人的网站需求往往碎、急、预算为零——课表要能一直贴在桌面上、班级值日表要能打印上墙、学生组织的查寝周报要能自动核对数据、手作小店要一个能讲故事的官网。这类需求单个都撑不起一次外包，套模板又改不动，于是决定用一套「小而具体」的单文件站点把它们逐个解决。
2、行业场景与业务背景：覆盖校园管理（班级值日、宿舍查寝）、个人表达（个人主页、节日互动页）、内容运营（单文件 CMS、微信回复与语气分析）与小型商业展示（手作珠宝品牌官网、AI 视频分镜管理）四类场景。使用方是个体创作者、学生组织与小微商家，共同点是缺技术人手、缺预算、不接受服务器运维，所以全部做成零成本、可离线打开的形式。
整套作品含十二个独立站点，归为五类能力：①内容系统——单文件 CMS，支持文章增删改、分类管理、草稿与发布、前台实时预览、JSON 全量备份与恢复；②数据看板——查寝周报把个人上报、人工汇总、宿舍名册三份数据合并，冲突按权重自动裁决并保留原文核对，名册差异单独提示，支持多维筛选与打印；③效率工具——透明桌面周课表（Excel 导入、.ics 日历导出）、微信回复副驾（剪贴板读取＋候选拆分＋快捷短语）、语气取样器（本地聊天记录口径统计）、MV 分镜制作台（104 镜管理与提示词一键复制）；④品牌与个人站——珠宝品牌官网含四季爱情树、戒指 360° 展示、邀请码与 SEO 结构化数据，个人小站含时光轴、心愿板与可视化编辑；⑤互动体验——五关解谜生日页与 Canvas 玫瑰烟花贺卡。全部适配移动端，双击即可运行。
我负责全部需求定义、交互设计、文案撰写与验收：先用一句话把场景说清，再逐轮提出修改（配色、布局、字号、动效节奏），由 WorkBuddy 生成并重构代码，我在浏览器和手机上实测后反馈问题，如此往复。技术上是纯前端方案——HTML5 + CSS3 + 原生 JavaScript（ES6+），无框架、无构建步骤、无外部 CDN 依赖；视觉层用 Canvas 2D 实现粒子与 3D 感渲染；数据层统一走 Web Storage 加 JSON 导入导出；交互层调用 Clipboard、File、Notification 等浏览器 API。三个主要难点：一是单文件体积与渲染性能的平衡，例如 104 镜分镜台用分批渲染与事件委托把首屏压到毫秒级；二是没有后端时的数据可靠性，用「自动保存＋占用率可视化＋JSON 备份」三重保障；三是手机与桌面共用一套代码，通过 UA 检测与视口变量切换两套 UI 骨架。
评论