https://github.com/blandalpha/circular_gallery
将图片排列成圆形阵列并连线
https://github.com/blandalpha/circular_gallery
nextjs react web
Last synced: 3 months ago
JSON representation
将图片排列成圆形阵列并连线
- Host: GitHub
- URL: https://github.com/blandalpha/circular_gallery
- Owner: BlandAlpha
- Created: 2025-03-16T05:08:31.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-03-16T05:12:47.000Z (over 1 year ago)
- Last Synced: 2025-03-16T06:19:24.468Z (over 1 year ago)
- Topics: nextjs, react, web
- Language: TypeScript
- Homepage:
- Size: 73.2 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 圆形照片画廊 (Circular Photo Gallery)
> 此项目代码由 [Cursor](https://cursor.sh/) 辅助编写
一个基于Next.js和React的交互式圆形照片画廊，允许用户上传照片并在照片之间创建连线。
## 功能特点
- **圆形布局**：照片自动排列成圆形
- **动态调整**：照片大小根据数量和容器大小自动调整
- **拖拽连线**：从一个照片拖拽到另一个照片创建连线
- **连线样式**：支持多种连线样式（默认、虚线、点线、粗线、红色、绿色）
- **响应式设计**：适应不同屏幕大小
- **用户友好**：直观的界面和交互
## 技术栈
- Next.js 15
- React 19
- TypeScript
- Tailwind CSS
- Lucide React (图标库)
## 本地开发
```bash
# 安装依赖
npm install
# 启动开发服务器
npm run dev
```
然后在浏览器中打开 [http://localhost:3000](http://localhost:3000) 查看应用。
## 使用方法
1. 点击"上传照片"按钮选择并上传照片
2. 照片会自动排列成圆形，大小会根据数量和容器大小自动调整
3. 从一个照片拖拽到另一个照片创建连线
4. 点击线条中间的控制点访问选项菜单
5. 在菜单中，您可以删除连线或更改其样式
6. 悬停在照片上并点击红色X删除照片
## 构建生产版本
```bash
npm run build
```
## 许可证
MIT