init doc

CLAUDE.md

@@ -52,10 +52,20 @@ cd frontend && make quick
 - `make install` - 安装依赖
 - `make dev` - 启动开发服务器
 - `make build` - 构建生产版本
-- `make clean` - 清理构建文件
+- `make start` - 启动生产服务器
+- `make clean` - 清理构建文件和缓存
 - `make status` - 检查项目状态
 - `make add PACKAGE=name` - 添加依赖
+- `make add-dev PACKAGE=name` - 添加开发依赖
 - `make remove PACKAGE=name` - 移除依赖
+- `make type-check` - 运行 TypeScript 类型检查
+- `make lint` - 运行代码检查
+- `make format` - 格式化代码
+- `make setup` - 设置开发环境
+- `make deploy-prep` - 准备生产部署
+- `make quick` - 快速启动（安装依赖并启动开发服务器）
+- `make update` - 更新所有依赖
+- `make reinstall` - 清理并重新安装依赖
 
 ## 项目结构
 
@@ -90,10 +100,19 @@ photography/
 - `components/navigation.tsx` - 粘性导航，带移动菜单
 - `components/photo-modal.tsx` - 照片详情模态框，带导航
 - `components/timeline-view.tsx` - 基于时间轴的照片展示
+- `components/timeline-stats.tsx` - 时间轴统计信息
 - `components/filter-bar.tsx` - 照片分类过滤
+- `components/about-view.tsx` - 关于页面组件
+- `components/contact-view.tsx` - 联系页面组件
+- `components/theme-provider.tsx` - 主题提供者（深色模式支持）
+- `components/providers/query-provider.tsx` - TanStack Query 提供者
+- `components/loading-spinner.tsx` - 加载动画组件
 - `components/ui/` - 来自 shadcn/ui 的可重用 UI 组件
 - `lib/api.ts` - 使用 axios 的 API 配置
 - `lib/queries.ts` - 用于数据获取的 TanStack Query hooks
+- `lib/utils.ts` - 工具函数
+- `hooks/use-mobile.tsx` - 移动端检测钩子
+- `hooks/use-toast.ts` - 通知钩子
 
 ## 数据结构
 
@@ -121,7 +140,14 @@ interface Photo {
 - `GET /api/photos` - 获取所有照片
 - `GET /api/photos/:id` - 获取单个照片
 - `GET /api/categories` - 获取分类列表
-- 标准 CRUD 操作用于照片管理
+- `POST /api/photos` - 添加新照片
+- `PUT /api/photos/:id` - 更新照片信息
+- `DELETE /api/photos/:id` - 删除照片
+
+启动模拟 API 服务器：
+```bash
+cd frontend && node mock-api.js
+```
 
 ## 环境变量
 
@@ -152,11 +178,19 @@ NEXT_PUBLIC_API_URL=http://localhost:3001/api
 ## 开发流程
 
 1. 所有开发都在 `frontend/` 目录中进行
-2. 使用 `make dev` 或 `bun run dev` 启动开发服务器
-3. 使用 `make lint` 检查代码规范问题
-4. 使用 `make type-check` 运行 TypeScript 检查
-5. 部署前使用 `make build` 构建
-6. 使用 `make status` 检查项目健康状况
+2. 首次设置：`make setup` 创建环境变量文件
+3. 使用 `make dev` 或 `bun run dev` 启动开发服务器
+4. 使用 `make lint` 检查代码规范问题
+5. 使用 `make type-check` 运行 TypeScript 检查
+6. 使用 `make format` 格式化代码
+7. 部署前使用 `make deploy-prep` 进行完整检查和构建
+8. 使用 `make status` 检查项目健康状况
+
+### 快速开始工作流程
+```bash
+cd frontend
+make quick    # 安装依赖并启动开发服务器
+```
 
 ## Bun 特定说明
 
@@ -181,4 +215,11 @@ NEXT_PUBLIC_API_URL=http://localhost:3001/api
 ### 开发环境配置
 - 构建时忽略 TypeScript 和 ESLint 错误（适用于开发环境）
 - 图像未优化设置，便于开发调试
-- 端口自动检测（如果 3000 被占用，会尝试 3001、3002 等）
+- 端口自动检测（如果 3000 被占用，会尝试 3001、3002 等）
+- 使用 Prettier 进行代码格式化
+- 支持通过 `make format` 统一代码风格
+
+## 文件锁定和包管理
+- 使用 `bun.lockb` 而非 `package-lock.json` 作为锁定文件
+- 项目名称：`my-v0-project`（可能需要更新为更合适的名称）
+- 所有包管理操作都应通过 Makefile 命令执行，确保使用 bun