Files

zhxiao1124 2dace1cf8d feat: 添加短剧筛选功能和自定义Panel容器组件

1. 新增DramaQuery类型扩展分页查询参数，支持标题、状态、类型筛选
2. 重构usePageData hook，支持自定义查询类型和筛选状态管理
3. 新建Panel通用容器组件替代原生Card
4. 为短剧管理页面添加搜索筛选UI和逻辑
5. 统一所有页面的分页查询默认参数
6. 调整布局样式优化后台管理界面展示

2026-07-02 18:48:51 +08:00

2.3 KiB

Raw Blame History

DramaList 筛选功能 + 自定义容器组件

目标

为短剧管理页面添加搜索筛选功能（标题、状态、类型）
将 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 更新查询

修改文件清单

src/api/interface.ts - 新增 DramaQuery 类型
src/api/dramas.ts - 更新 listDramas 参数类型
src/hooks/interface.ts - 扩展 PageFetcher 泛型
src/hooks/usePageData.ts - 支持自定义查询类型和 setQuery
src/components/Panel/index.tsx - 新建自定义容器组件
src/Drama/components/DramaList.tsx - 添加筛选 UI 和 Panel

验证

npm run lint TypeScript 检查通过
npm run build 构建成功

2.3 KiB Raw Blame History Unescape Escape