photography/frontend

摄影作品集前端项目

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

技术栈

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

功能特性

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

开发环境设置

1. 安装依赖：

npm install

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

3. 启动开发服务器：

npm run dev

4. 构建生产版本：

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 - 删除照片

开发命令

# 启动开发服务器
npm run dev

# 构建生产版本
npm run build

# 启动生产服务器
npm start

# 代码检查
npm run lint

# 类型检查
npm run type-check

部署

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