# 笑话大全平台 - 实施计划

> **推荐执行方式:** 使用 subagent-driven-development，按任务逐步实现

**目标:** 完成笑话大全平台一期建设（前台网站 + 后台管理 + 后端 API）

**技术栈:**
- 后端: Python FastAPI + SQLite + SQLAlchemy
- 前端: Vue3 + Vite + Element Plus + Axios
- 状态管理: Pinia
- 路由: Vue Router

---

## 阶段一：后端 API (api/)

### Task 1: 项目初始化
- 创建: `api/requirements.txt`
- 创建: `api/main.py` - FastAPI 入口
- 创建: `api/app/config.py` - 配置管理
- 创建: `api/app/database.py` - SQLite 连接

```bash
# 依赖
fastapi==0.109.0
uvicorn[standard]==0.27.0
sqlalchemy==2.0.25
pydantic==2.5.3
python-jose[cryptography]==3.3.0
passlib[bcrypt]==1.7.4
python-multipart==0.0.6
```

### Task 2: 数据库模型
- 创建: `api/app/models/__init__.py`
- 创建: `api/app/models/joke.py` - Joke 模型
- 创建: `api/app/models/category.py` - Type/Crowd 模型
- 创建: `api/app/models/user.py` - AdminUser 模型

### Task 3: Pydantic Schemas
- 创建: `api/app/schemas/__init__.py`
- 创建: `api/app/schemas/joke.py` - Joke 请求/响应模型
- 创建: `api/app/schemas/category.py` - Category 模型
- 创建: `api/app/schemas/auth.py` - 登录/Token 模型

### Task 4: 路由实现
- 创建: `api/app/routers/__init__.py`
- 创建: `api/app/routers/jokes.py` - 笑话 CRUD 路由
- 创建: `api/app/routers/categories.py` - 分类路由
- 创建: `api/app/routers/auth.py` - 认证路由
- 创建: `api/app/routers/admin.py` - 管理后台路由

### Task 5: 数据库初始化与种子数据
- 创建: `api/init_db.py` - 初始化表和示例数据

---

## 阶段二：后台管理前端 (admin/)

### Task 6: 项目初始化
- 创建: `admin/package.json`
- 创建: `admin/vite.config.js`
- 创建: `admin/index.html`
- 创建: `admin/src/main.js`
- 创建: `admin/src/App.vue`

### Task 7: 路由和状态管理
- 创建: `admin/src/router/index.js` - 路由配置
- 创建: `admin/src/stores/auth.js` - 认证状态
- 创建: `admin/src/stores/joke.js` - 笑话状态

### Task 8: API 封装
- 创建: `admin/src/api/request.js` - Axios 封装
- 创建: `admin/src/api/joke.js` - 笑话 API
- 创建: `admin/src/api/category.js` - 分类 API
- 创建: `admin/src/api/auth.js` - 认证 API

### Task 9: 登录页
- 创建: `admin/src/views/login/index.vue`

### Task 10: 布局和导航
- 创建: `admin/src/layout/index.vue`
- 创建: `admin/src/layout/components/Sidebar.vue`

### Task 11: 仪表盘
- 创建: `admin/src/views/dashboard/index.vue`

### Task 12: 笑话管理 - 列表
- 创建: `admin/src/views/joke/List.vue` - 列表 + 分页 + 筛选

### Task 13: 笑话管理 - 编辑
- 创建: `admin/src/views/joke/Edit.vue` - 添加/编辑表单

### Task 14: 分类管理
- 创建: `admin/src/views/category/Type.vue` - 类型管理
- 创建: `admin/src/views/category/Crowd.vue` - 人群管理

---

## 阶段三：前台展示前端 (web/)

### Task 15: 项目初始化
- 创建: `web/package.json`
- 创建: `web/vite.config.js`
- 创建: `web/index.html`
- 创建: `web/src/main.js`
- 创建: `web/src/App.vue`

### Task 16: 路由和状态管理
- 创建: `web/src/router/index.js`
- 创建: `web/src/stores/joke.js`

### Task 17: API 封装
- 创建: `web/src/api/request.js`
- 创建: `web/src/api/joke.js`
- 创建: `web/src/api/category.js`

### Task 18: 首页
- 创建: `web/src/views/home/index.vue` - 笑话列表
- 创建: `web/src/views/home/components/JokeCard.vue` - 卡片组件

### Task 19: 分类筛选页
- 创建: `web/src/views/category/index.vue`

### Task 20: 笑话详情页
- 创建: `web/src/views/detail/index.vue`

### Task 21: 搜索页
- 创建: `web/src/views/search/index.vue`

### Task 22: 通用组件
- 创建: `web/src/components/Header.vue` - 页头
- 创建: `web/src/components/Footer.vue` - 页脚

---

## 验证方式

1. **后端验证:**
   ```bash
   cd api
   pip install -r requirements.txt
   python init_db.py
   uvicorn main:app --reload
   # 访问 http://localhost:8000/docs 测试 API
   ```

2. **后台管理验证:**
   ```bash
   cd admin
   npm install
   npm run dev
   # 登录后测试各项管理功能
   ```

3. **前台验证:**
   ```bash
   cd web
   npm install
   npm run dev
   # 浏览笑话列表、分类筛选、搜索等功能
   ```

---

## 文件清单汇总

**后端 API (api/):**
```
api/
├── requirements.txt
├── main.py
├── init_db.py
└── app/
    ├── __init__.py
    ├── config.py
    ├── database.py
    ├── models/
    │   ├── __init__.py
    │   ├── joke.py
    │   ├── category.py
    │   └── user.py
    ├── schemas/
    │   ├── __init__.py
    │   ├── joke.py
    │   ├── category.py
    │   └── auth.py
    └── routers/
        ├── __init__.py
        ├── jokes.py
        ├── categories.py
        ├── auth.py
        └── admin.py
```

**后台管理 (admin/):**
```
admin/
├── package.json
├── vite.config.js
├── index.html
└── src/
    ├── main.js
    ├── App.vue
    ├── api/
    ├── stores/
    ├── router/
    ├── layout/
    └── views/
```

**前台展示 (web/):**
```
web/
├── package.json
├── vite.config.js
├── index.html
└── src/
    ├── main.js
    ├── App.vue
    ├── api/
    ├── stores/
    ├── router/
    ├── components/
    └── views/
        ├── home/
        ├── category/
        ├── detail/
        └── search/
```