# 摄影作品集前端项目

这是一个基于Next.js 15的现代化摄影作品集网站，支持动态数据获取和响应式设计。

## 技术栈

- **Next.js 15** - React框架
- **React 19** - 用户界面库
- **TypeScript** - 类型安全
- **Tailwind CSS** - 样式框架
- **shadcn/ui** - UI组件库
- **TanStack Query** - 数据获取和缓存
- **Axios** - HTTP客户端

## 功能特性

- 🖼️ 照片画廊展示
- 📅 时间线视图
- 🔍 分类筛选
- 🎨 响应式设计
- 🌙 主题切换支持
- 📱 移动端优化
- 🔄 数据缓存和同步
- 🎯 TypeScript类型安全

## 开发环境设置

1. 安装依赖：
```bash
npm install
```

2. 配置环境变量：
复制 `.env.local` 文件并设置API地址

3. 启动开发服务器：
```bash
npm run dev
```

4. 构建生产版本：
```bash
npm run build
```

## 项目结构

```
frontend/
├── app/                    # Next.js应用目录
│   ├── layout.tsx         # 根布局
│   ├── page.tsx           # 主页
│   └── globals.css        # 全局样式
├── components/            # 组件目录
│   ├── providers/         # 上下文提供者
│   ├── ui/               # UI组件
│   └── ...               # 业务组件
├── lib/                  # 工具库
│   ├── api.ts            # API配置
│   ├── queries.ts        # 数据查询
│   └── utils.ts          # 工具函数
├── hooks/                # 自定义钩子
├── public/               # 静态资源
└── types/                # 类型定义
```

## API接口

项目使用React Query进行数据管理，支持以下API接口：

- `GET /api/photos` - 获取所有照片
- `GET /api/photos/:id` - 获取单张照片
- `GET /api/categories` - 获取分类列表
- `POST /api/photos` - 添加照片
- `PUT /api/photos/:id` - 更新照片
- `DELETE /api/photos/:id` - 删除照片

## 开发命令

```bash
# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 启动生产服务器
npm start

# 代码检查
npm run lint

# 类型检查
npm run type-check
```

## 部署

项目可以部署到Vercel、Netlify等平台。确保设置正确的环境变量。test change