Memory Atelier 个人纪念网站 Demo

这是一个全新的本地可运行个人纪念网站 Demo，采用 FastAPI 后端和 React + Vite + TypeScript 前端。项目包含登录、纪念日、照片墙三个核心模块，Demo 阶段不依赖云服务，后续可以部署到服务器并接入数据库。

技术栈

• 后端：Python + FastAPI + Uvicorn
• 前端：React + Vite + TypeScript
• 动画：Framer Motion + CSS 动效
• 数据：登录态和纪念日保存在 localStorage，照片由后端扫描本地目录

项目结构

personal-memory-site-pro/
  backend/
    app/
      main.py
      routers/
        auth.py
        photos.py
        anniversaries.py
      services/
        photo_service.py
      static/
        photos/
    requirements.txt
    README.md
  frontend/
    src/
      api/
      components/
      data/
      pages/
      styles/
      utils/
    package.json
    README.md
  docs/
    功能说明.md
    部署说明.md

功能列表

• Demo 登录：固定账号密码
• 未登录访问内部页面自动跳转登录页
• 登录状态 localStorage 持久化
• 退出登录
• PC 顶部导航和 Mobile 底部导航
• 纪念日默认 4 条 Demo 数据
• 纪念日正计时：年、月、日、时、分、秒
• 下一次周年/生日倒计时：年、月、日、时、分、秒
• 纪念日新增、编辑、删除
• 照片目录自动扫描
• 照片墙自动轮播、暂停、继续、左右切换、缩略图切换、大图预览
• 视频回忆自动扫描、轮播切换、原生播放控制
• 照片为空时显示空状态提示

默认账号密码

• 用户名：admin
• 密码：123456

本地启动

后端：

cd /Users/zhangxu/Desktop/医百/运维相关/Python/personal-memory-site-pro/backend
python3 -m pip install -r requirements.txt
python3 -m uvicorn app.main:app --reload --host 0.0.0.0 --port 8000

前端：

cd /Users/zhangxu/Desktop/医百/运维相关/Python/personal-memory-site-pro/frontend
npm install
npm run dev

访问：

http://localhost:5173

照片目录

请将照片放入：

/Users/zhangxu/Desktop/医百/运维相关/Python/personal-memory-site-pro/backend/static/photos

支持格式：jpg、jpeg、png、webp、gif。

目录为空时，照片墙会显示“请将照片放入 backend/static/photos 目录”的空状态提示。

视频目录

请将视频放入：

/Users/zhangxu/Desktop/医百/运维相关/Python/personal-memory-site-pro/backend/static/videos

支持格式：mp4、webm、ogg、mov、m4v。