圆形照片画廊 (Circular Photo Gallery)

此项目代码由 Cursor 辅助编写

一个基于Next.js和React的交互式圆形照片画廊，允许用户上传照片并在照片之间创建连线。

功能特点

• 圆形布局：照片自动排列成圆形
• 动态调整：照片大小根据数量和容器大小自动调整
• 拖拽连线：从一个照片拖拽到另一个照片创建连线
• 连线样式：支持多种连线样式（默认、虚线、点线、粗线、红色、绿色）
• 响应式设计：适应不同屏幕大小
• 用户友好：直观的界面和交互

技术栈

• Next.js 15
• React 19
• TypeScript
• Tailwind CSS
• Lucide React (图标库)

本地开发

# 安装依赖
npm install

# 启动开发服务器
npm run dev

然后在浏览器中打开 http://localhost:3000 查看应用。

使用方法

1. 点击"上传照片"按钮选择并上传照片
2. 照片会自动排列成圆形，大小会根据数量和容器大小自动调整
3. 从一个照片拖拽到另一个照片创建连线
4. 点击线条中间的控制点访问选项菜单
5. 在菜单中，您可以删除连线或更改其样式
6. 悬停在照片上并点击红色X删除照片

构建生产版本

npm run build

许可证

MIT