列表页面看起来简单，真正做起来却有不少细节：搜索和分类是否同时生效、切换条件后是否保留旧结果、空列表如何展示、数据量增加后是否还流畅。AI Coding 可以快速生成基础逻辑，但如果没有明确规则，很容易只实现一个表面可用的版本。

我的做法是先确定筛选逻辑。比如搜索关键词匹配物品名称和地点；分类条件独立于关键词；两个条件同时存在时采用 AND 关系；用户清空关键词后，仍保留当前分类。然后再让 AI 根据这些规则编写过滤函数。

下面把过滤逻辑单独抽出来，页面组件只负责接收条件和展示结果，后续更容易测试。

代码示例

interface LostItem {

 id: string

 name: string

 location: string

 category: string

}

function filterItems(

 items: LostItem[],

 keyword: string,

 category: string

): LostItem[] {

 const key = keyword.trim().toLowerCase()

 return items.filter((item: LostItem) => {

   const matchesKeyword = !key ||

     item.name.toLowerCase().includes(key) ||

     item.location.toLowerCase().includes(key)

   const matchesCategory = category === '全部' || item.category === category

   return matchesKeyword && matchesCategory

 })

}

让 AI 写完后，我会重点测试组合场景：先选“数码”，再搜索“图书馆”；清空搜索词但不取消分类；搜索不存在的地点；切换分类后检查列表是否正确刷新。单独测试搜索和分类都通过，不代表两者组合起来一定正确。

如果列表来自服务端，还要考虑哪些筛选放在客户端、哪些交给接口处理。小数据集可以在本地过滤；数据量较大时，通常应让服务端承担搜索、分页和排序，避免一次加载全部记录。

开发者要把数据规模和接口能力告诉 AI，而不是让它凭空决定架构。对于排序规则，也要明确“最新”“最热”“附近”分别依赖哪些字段，避免界面入口存在、背后却没有可靠的数据依据。