LZapi - 极简美学图片管理系统 & 随机图片 API

LZapi 是一个基于 Next.js 14+ 和 Supabase 构建的高性能、全免费的图片管理系统。它不仅提供了优雅的管理后台，还为开发者提供了简单易用的随机图片调用接口。

✨ 特性

• 🎨 极简美学设计: 基于 Glassmorphism（毛玻璃）风格的 UI 交互，极致的视觉体验。
• 🚀 全自动化处理: 上传图片时自动转换为 WebP 格式并进行压缩优化，节省空间。
• 📂 智能分类管理: 支持自定义分类，图片可按分类筛选、上传和批量迁移。
• ⚡ 批量操作: 支持多选图片上传、全选删除及批量分类更新。
• 📱 交互优化:
  • 支持点击放大预览（Lightbox 模式）。
  • 引入 1 秒长按删除（带进度环反馈），有效防止误触。
• 🌐 国际化支持: 内置中英文双语无缝切换。
• 🔗 随机图片 API: 简单接口即可在任何地方调用您的私有图库。

🛠️ 技术栈

• 框架: Next.js 14 (App Router)
• 数据库/对象存储: Supabase
• 图像处理: Sharp (高性能 WebP 转换)
• 样式: Tailwind CSS + Framer Motion (动画效果)
• 图标: Lucide React

🚀 快速开始

1. 准备 Supabase 环境

1. 注册 Supabase 并创建一个新项目。
2. 在 SQL Editor 中运行以下命令初始化数据库：

   create table images (
     id uuid default gen_random_uuid() primary key,
     url text not null,
     name text,
     hash text unique,
     category text default 'default',
     created_at timestamp with time zone default timezone('utc'::text, now()) not null
   );

3. 在 Storage 中创建一个名为 images 的 Public 存储桶。

2. 本地部署

1. 克隆仓库：

   git clone https://github.com/bileizhen/LZapi.git
   cd LZapi

2. 安装依赖：

   npm install

3. 配置环境变量： 创建 .env.local 文件并填入：

   NEXT_PUBLIC_SUPABASE_URL=你的Supabase项目地址
   NEXT_PUBLIC_SUPABASE_ANON_KEY=你的AnonKey
   SUPABASE_SERVICE_ROLE_KEY=你的ServiceRoleKey

4. 启动开发服务器：

   npm run dev

📖 API 调用说明

1. 随机获取图片

Endpoint: GET /api/random

参数:

• category (可选): 筛选特定分类（如 wallpaper）。

调用示例:

// 获取一张随机壁纸并重定向
window.open('https://your-domain.com/api/random?category=wallpaper');

2. 获取图片列表

Endpoint: GET /api/images

响应: 返回包含图片 URL、ID、Hash 和分类的 JSON 数组。

📸 管理后台

访问 /manage 即可进入工作室：

• 上传: 支持拖拽或点击上传多张图片。
• 预览: 点击图片卡片可进入 Lightbox 放大模式。
• 删除: 长按图片卡片 1 秒并等待进度条填满后确认删除。
• 分类: 点击左侧分类标签进行筛选，或点击“新增分类”创建个性化标签。

📄 开源协议

MIT License

---

Build with aesthetic intent by bileizhen