客户拼音筛选

要解决的具体问题

客户搜索场景中，用户输入拼音或首字母时无法匹配中文名称是常见痛点：客户下拉选择器输入zs却匹配不到「张三」，列表搜索不支持拼音首字母导致检索效率低，前端Demo缺乏后端支持时无法实现模糊搜索。这些问题直接影响用户体验，尤其对中文客户列表的交互场景造成明显阻碍。

技能如何工作

该技能基于pinyin-match库实现纯本地拼音筛选，核心能力是通过pinyinMatch.match(name, keyword)方法过滤客户列表。其工作原理是监听客户搜索框的关键字变化，调用filterByPinyin函数执行匹配，全程不依赖后端服务，完全在前端完成计算。

关键实现步骤

1. 首先集成pinyin-match依赖到项目中，确保本地环境可用
2. 在客户搜索框组件中设置watch监听关键字变化，触发filterByPinyin函数执行过滤
3. 执行匹配时优先处理空关键字情况，返回原列表或全量数据（按产品约定）
4. 匹配失败时需捕获异常，不得中断前端渲染流程，保证交互稳定性

核心特性

• 纯本地计算，无需请求后端服务，降低延迟与服务器压力
• 支持拼音全拼与首字母匹配，覆盖常见输入习惯
• 内置空关键字处理逻辑，可按产品需求返回原始列表或全量数据

适用边界与注意点

使用该技能需注意以下约束：必须依赖pinyin-match库，不可与pinyin-search-keys混淆而不安装核心依赖；禁止将全量客户数据拉取到前端却无分页或上限控制，大数据场景需另行设计；明确不做服务端索引构建，也不搭建拼音分词平台，定位为轻量级前端本地筛选方案。匹配失败时需确保不抛出异常中断渲染流程，保障用户交互的连续性。