MomoPix 是一个轻量、易于搭建的个人图床工具，名字取自日语中的“桃 ( もも )”，意为“桃子”。 基于 Cloudflare Pages, R2 作为储存空间，为你提供简洁、优雅的图床体验！🎉
🚧 本项目仍在开发中，部署文档尚未编写完成，请暂时勿用于生产环境。
- 基本功能实现（上传、删除、查看、复制链接、相册管理）
- 完善前端界面（主题、样式、交互）
- 完善后端逻辑（上传、删除、查看）
- 移除单独的后端服务，改为 Cloudflare Pages Functions
- 移除 Firebase 依赖，改为 Cloudflare KV 存储
- 完善文档，编写部署指南
- 📂 快速上传：支持拖拽上传，简洁明了的操作界面。
- 🌐 多种格式链接：一键复制直链、HTML、Markdown 或 BBCode 格式链接。
- 🔒 安全：基于 Cloudflare 的存储与 Cloudflare Pages Functions 框架，轻松部署，安全可靠。
- 📸 相簿管理：分类管理你的图片，自定义相簿名称与封面。
- 🎨 自定义外观：灵活的样式与主题支持，打造专属体验。
MomoPix/
.
├── src
│ ├── App.tsx # React 应用主入口
│ ├── AppProviders.tsx # 全局 Provider 管理
│ ├── api # API 调用模块
│ ├── assets # 静态资源
│ ├── components # 可复用组件
│ │ ├── Albums # 相册相关组件
│ │ ├── SingleAlbum # 单个相册页面组件
│ │ ├── SinglePhoto # 单张图片相关组件
│ │ └── common # 通用组件
│ ├── hooks
│ │ ├── useAuthContext.ts # 全局 Context
│ │ ├── usePagination.ts # 分页逻辑
│ │ └── useUpdateUserData # 用户数据更新逻辑
│ ├── pages
│ │ ├── Albums.tsx # 相册页（首页）
│ │ ├── Profile.tsx # 用户资料页
│ │ ├── SignIn.tsx # 登录页
│ │ ├── SignUp.tsx # 注册页
│ │ └── SingleAlbum.tsx # 单个相册页面
│ ├── utils # 工具函数
│ │ ├── copyPhotoLinks.ts # 图片链接复制工具
│ │ ├── image # 图片相关工具
│ │ └── theme.ts # 主题配置
│ ├── consts.ts # 常量定义
│ └── types # 全局类型定义
│ └── userData.d.ts # 用户数据类型
├── functions # Cloudflare Pages Functions
│ └── api # 后端逻辑
│ ├── upload.ts # 图片上传处理
│ └── delete.ts # 图片删除处理
├── public # 静态资源
│ └── favicon.ico # 网站图标
├── package.json # 项目依赖和脚本
├── vite.config.ts # Vite 配置
├── README.md # 项目说明
└── LICENSE # 开源协议
-
克隆项目：
git clone https://github.com/ZL-Asica/MomoPix.git cd MomoPix -
安装依赖：
pnpm install
-
本地启动开发环境：
pnpm dev
-
构建项目：
pnpm build
-
预览生产环境：
pnpm preview