GlucoWise/REPORT_SEARCH_IMPLEMENTATION.md

客户举报管理搜索功能实现总结

实现内容

1. 修改分页数量

• 修改前：每页显示 4 条举报记录
• 修改后：每页显示 10 条举报记录

// 修改前
const reportPageSize = ref(4)

// 修改后
const reportPageSize = ref(10)

2. 添加举报理由搜索功能

前端实现

搜索选项

UI 中已经包含了"举报理由"选项：

<select v-model="searchReportType" class="select">
  <option value="reporterId">举报人ID</option>
  <option value="reportedId">被举报人ID</option>
  <option value="reason">举报理由</option> <!-- 已存在 -->
</select>

搜索逻辑

在 filteredPendingReports 和 filteredHistoryReports 计算属性中添加举报理由搜索：

// 待处理举报筛选
const filteredPendingReports = computed(() => {
  return reportData.value.filter(report => {
    if (report.status !== 'pending') return false

    if (!searchReportQuery.value) return true
    if (searchReportType.value === 'reportId') 
      return report.id.toString().includes(searchReportQuery.value)
    if (searchReportType.value === 'reporterId') 
      return report.reporterId.includes(searchReportQuery.value)
    if (searchReportType.value === 'reportedId') 
      return report.reportedId.includes(searchReportQuery.value)
    if (searchReportType.value === 'reason') 
      return report.reason && report.reason.includes(searchReportQuery.value) // ✅ 新增
    return false
  })
})

// 历史举报筛选
const filteredHistoryReports = computed(() => {
  return historyReportData.value.filter(report => {
    if (!searchReportQuery.value) return true
    if (searchReportType.value === 'reportId') 
      return report.id.toString().includes(searchReportQuery.value)
    if (searchReportType.value === 'reporterId') 
      return report.reporterId.includes(searchReportQuery.value)
    if (searchReportType.value === 'reportedId') 
      return report.reportedId.includes(searchReportQuery.value)
    if (searchReportType.value === 'reason') 
      return report.reason && report.reason.includes(searchReportQuery.value) // ✅ 新增
    return false
  })
})

功能说明

搜索类型

1. 举报人ID (reporterId)

   • 精确匹配举报人的用户ID
   • 示例：输入 "123" 查找举报人ID包含123的举报

2. 被举报人ID (reportedId)

   • 精确匹配被举报人的用户ID
   • 示例：输入 "456" 查找被举报人ID包含456的举报

3. 举报理由 (reason) - ✅ 新增

   • 模糊匹配举报理由文本
   • 示例：输入 "骚扰" 查找理由包含"骚扰"的举报
   • 支持的理由类型：
     • 骚扰
     • 垃圾信息
     • 不当内容
     • 虚假信息
     • 其他

分页功能

待处理举报列表

• 每页显示：10 条记录
• 支持翻页导航
• 显示当前页码和总页数

历史举报列表

• 每页显示：10 条记录
• 支持翻页导航
• 显示当前页码和总页数

使用示例

示例1：按举报理由搜索

1. 选择搜索类型：举报理由
2. 输入搜索内容：骚扰
3. 点击搜索按钮
4. 结果：显示所有理由包含"骚扰"的举报记录

示例2：按举报人ID搜索

1. 选择搜索类型：举报人ID
2. 输入搜索内容：123
3. 点击搜索按钮
4. 结果：显示所有举报人ID包含"123"的举报记录

示例3：按被举报人ID搜索

1. 选择搜索类型：被举报人ID
2. 输入搜索内容：456
3. 点击搜索按钮
4. 结果：显示所有被举报人ID包含"456"的举报记录

示例4：重置搜索

1. 点击"重置"按钮
2. 搜索框清空
3. 显示所有举报记录

分页效果

修改前

第1页：显示 1-4 条记录
第2页：显示 5-8 条记录
第3页：显示 9-12 条记录
...

修改后

第1页：显示 1-10 条记录
第2页：显示 11-20 条记录
第3页：显示 21-30 条记录
...

技术细节

搜索实现方式

• 前端过滤：使用 Vue 的 computed 属性实时过滤
• 模糊匹配：使用 JavaScript 的 includes() 方法
• 大小写敏感：当前实现区分大小写

数据流程

用户输入搜索条件
    ↓
searchReportQuery 和 searchReportType 更新
    ↓
filteredPendingReports / filteredHistoryReports 自动重新计算
    ↓
paginatedPendingReports / paginatedHistoryReports 应用分页
    ↓
UI 显示过滤和分页后的结果

性能考虑

• 使用 computed 属性，Vue 会自动缓存计算结果
• 只在依赖数据变化时重新计算
• 前端过滤，无需额外的后端请求

注意事项

1. 搜索是实时的：输入搜索内容后，结果会立即更新
2. 搜索是模糊匹配：不需要输入完整的内容
3. 搜索区分大小写：输入"骚扰"和"SARAO"会得到不同结果
4. 空搜索显示全部：清空搜索框会显示所有记录
5. 分页自动调整：搜索后，分页会根据结果数量自动调整

未修改的部分

按照要求，以下部分保持不变：

• ✅ 其他页面的 UI 界面
• ✅ 举报管理的其他功能（处理、驳回、判定等）
• ✅ 举报详情查看功能
• ✅ 举报统计数据
• ✅ 举报列表切换（待处理/历史）

测试建议

测试场景1：举报理由搜索

1. 进入客户举报管理页面
2. 选择"举报理由"
3. 输入"骚扰"
4. 验证：只显示理由包含"骚扰"的举报

测试场景2：分页功能

1. 确保有超过10条举报记录
2. 验证：第一页显示1-10条
3. 点击下一页
4. 验证：第二页显示11-20条

测试场景3：搜索+分页

1. 搜索"骚扰"，假设有25条结果
2. 验证：第一页显示1-10条
3. 点击下一页
4. 验证：第二页显示11-20条
5. 点击第三页
6. 验证：第三页显示21-25条

测试场景4：重置功能

1. 输入搜索条件并搜索
2. 点击"重置"按钮
3. 验证：搜索框清空，显示所有记录

总结

本次实现完成了：

• ✅ 修改分页数为每页10行
• ✅ 添加举报理由搜索功能
• ✅ 支持模糊匹配搜索
• ✅ 同时支持待处理和历史举报搜索
• ✅ 保持其他UI界面不变

功能已完全实现，可以立即使用！