zhxiao1124
2dace1cf8d
1. 新增DramaQuery类型扩展分页查询参数，支持标题、状态、类型筛选 2. 重构usePageData hook，支持自定义查询类型和筛选状态管理 3. 新建Panel通用容器组件替代原生Card 4. 为短剧管理页面添加搜索筛选UI和逻辑 5. 统一所有页面的分页查询默认参数 6. 调整布局样式优化后台管理界面展示
60 lines
2.3 KiB
Markdown
60 lines
2.3 KiB
Markdown
# DramaList 筛选功能 + 自定义容器组件
|
||
|
||
## 目标
|
||
1. 为短剧管理页面添加搜索筛选功能（标题、状态、类型）
|
||
2. 将 Card 容器替换为自定义实现的容器组件
|
||
|
||
## 分析
|
||
|
||
### 现有架构
|
||
- `PageQuery` 类型仅支持 `{ page, pageSize }`，无筛选字段
|
||
- `fetchPage` 直接将 params 传给 axios，扩展字段会自动作为 query 参数发送
|
||
- `usePageData` hook 固定使用 `PageQuery`，需扩展支持筛选
|
||
|
||
### 筛选字段（基于 Drama 类型）
|
||
- `title` - 短剧标题（模糊搜索）
|
||
- `status` - 状态（draft/scheduled/published/offline）
|
||
- `type` - 类型（如复仇、爱情、动作等）
|
||
|
||
## 实现方案
|
||
|
||
### 1. 扩展 API 查询类型
|
||
**文件**: `src/api/interface.ts`
|
||
- 新增 `DramaQuery` 类型，继承 `PageQuery`，添加 `title?`、`status?`、`type?` 字段
|
||
|
||
**文件**: `src/api/dramas.ts`
|
||
- `listDramas` 参数类型从 `PageQuery` 改为 `DramaQuery`
|
||
|
||
### 2. 扩展 usePageData hook
|
||
**文件**: `src/hooks/interface.ts`
|
||
- `PageFetcher<T>` 泛型扩展，支持自定义查询类型
|
||
|
||
**文件**: `src/hooks/usePageData.ts`
|
||
- 泛型参数增加 `Q extends PageQuery`，支持自定义查询类型
|
||
- 新增 `setQuery` 方法用于更新筛选条件
|
||
- 筛选条件变化时重置到第 1 页
|
||
|
||
### 3. 创建自定义容器组件
|
||
**文件**: `src/components/Panel/index.tsx`（新建）
|
||
- 实现一个轻量级容器组件，替代 Card
|
||
- Props: `title`、`extra`（右侧操作区）、`children`、`className`
|
||
- 样式：圆角、边框、阴影，与现有 `.section-card` 风格一致
|
||
|
||
### 4. 改造 DramaList 页面
|
||
**文件**: `src/Drama/components/DramaList.tsx`
|
||
- 使用自定义 Panel 组件替换 Card
|
||
- 添加筛选区域：标题输入框 + 状态选择器 + 类型输入框 + 查询/重置按钮
|
||
- 管理筛选状态，调用 `setQuery` 更新查询
|
||
|
||
## 修改文件清单
|
||
1. `src/api/interface.ts` - 新增 DramaQuery 类型
|
||
2. `src/api/dramas.ts` - 更新 listDramas 参数类型
|
||
3. `src/hooks/interface.ts` - 扩展 PageFetcher 泛型
|
||
4. `src/hooks/usePageData.ts` - 支持自定义查询类型和 setQuery
|
||
5. `src/components/Panel/index.tsx` - 新建自定义容器组件
|
||
6. `src/Drama/components/DramaList.tsx` - 添加筛选 UI 和 Panel
|
||
|
||
## 验证
|
||
- `npm run lint` TypeScript 检查通过
|
||
- `npm run build` 构建成功
|