feat: setup frontend project with bun and dynamic data fetching

- Create new frontend project directory with Next.js 15 + React 19
- Migrate from pnpm to bun for faster package management
- Add TanStack Query + Axios for dynamic data fetching
- Create comprehensive Makefile with development commands
- Setup API layer with query hooks and error handling
- Configure environment variables and bun settings
- Add TypeScript type checking and project documentation
- Update CLAUDE.md with bun-specific development workflow
This commit is contained in:
xujiang
2025-07-08 15:28:26 +08:00
parent d06caee35a
commit 3d197eb7e3
87 changed files with 8329 additions and 0 deletions

99
frontend/README.md Normal file
View File

@ -0,0 +1,99 @@
# 摄影作品集前端项目
这是一个基于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等平台。确保设置正确的环境变量。