潇湘的个人博客系统 - 全栈SPA应用产品系统Vibe Coding

1、立项原因：市面上个人博客系统要么太重（WordPress），要么依赖第三方平台（微信公众号、CSDN），缺乏一个轻量、可自主部署、带音乐播放器的个人展示型博客。旨在为独立开发者提供一个开箱即用、支持后端管理、可自定义主题的轻量级博客解决方案。

2、行业场景：适合个人开发者、技术爱好者搭建个人主页/作品集，支持文章发布、音乐分享、友情链接、在线管理后台等场景。

1、首页/文章模块：Hero头部展示头像、签名、社交链接，文章列表支持分类筛选、标签过滤、关键词搜索、分页加载，点击文章弹出模态框展示全文。

2、音乐播放模块：右下角悬浮唱片组件，支持播放/暂停/上一首/下一首/列表循环/音量调节，专辑封面同步显示，hover展开歌词进度条。

3、在线管理后台：通过独立admin.html页面登录，支持文章增删改查、个人信息编辑、头像上传、友链管理、工具管理、音乐列表管理、背景渐变色调色。

4、数据持久化：使用Node.js自建后端API（/api/data），数据存储为JSON文件，支持本地localStorage离线兼容，前后端数据实时同步。

5、视觉体验：暗色渐变背景（自定义起始色），Canvas粒子动画系统，卡片淡入动画，响应式布局适配PC和移动端。

1、我负责的任务：独立完成前后端全栈开发，包括UI设计、HTML/CSS/JS编码、Node.js后端API开发、数据持久化、管理后台开发、音乐播放组件、Canvas粒子动画。

2、技术栈与亮点：前端使用原生JS+CSS3实现SPA，无任何第三方前端框架依赖；后端使用Node.js原生http模块搭建REST API，零依赖轻量部署；数据层采用JSON文件+localStorage双写策略，后端不可用时自动降级为本地存储；Canvas粒子系统实现动态背景；唱片播放器使用CSS3旋转动画，进度条支持拖拽；管理后台与前端共用同一套API，通过密码验证保护。