Agent Skills
返回列表
列表筛选串

列表筛选串

开发编程 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_f1b049da/xeb20268894。

技能介绍

要解决什么问题

列表页的筛选条件通常保存在组件状态里，刷新页面后丢失，用户无法从分享的链接直接打开带筛选结果的列表。更麻烦的是，筛选值常常是数组或布尔值，直接塞进地址栏会出现 stage=跟进,已关闭&page=1 这类格式，不同模块各写一套序列化逻辑，时间一长就难以维护。

技能如何工作

核心是筛选对象与 query string 的双向转换，例如筛选对象 { stage: '跟进', page: 1 } 对应地址栏 ?stage=跟进&page=1。

关键步骤：

  • 使用 query-string 的 parse 和 stringify 完成序列化与反序列化
  • 筛选项变更时调用 router.replace({ query })，或直接写 location.search
  • 项目内统一配置，比如 arrayFormat: 'comma'，保证读写一致
  • 空值直接省略，不生成多余的 ?stage=

适用边界

  • 只处理列表筛选与地址栏同步，不包含权限校验或路由守卫
  • 不要把敏感 Token 放进 query，query 会出现在日志和浏览器历史里
  • 不要用手写 split('&') 冒充 query-string 的实现
  • 与 Vue Router 同步时注意类型，query 里取到的是字符串数组
  • 刷新后筛选条件应完整恢复，空筛选时地址栏不应残留多余参数

使用场景

  • 客户列表页要分享带阶段和页码的链接时，把筛选对象序列化进地址栏，接收者打开能直接看到对应筛选结果。
  • Demo 演示列表刷新后筛选丢失时，用 query-string 恢复条件，让观众看到同一阶段数据。
  • 从运营群点开带关键字的链接时，需要解析 query 并套用筛选，不必手动重选。
  • 多模块读取数组筛选时，统一用 comma 序列化，避免地址栏格式混乱。

适合人员

  • 负责列表筛选页分享链接的前端工程师，希望打开链接后自动恢复阶段、页码等条件。
  • 做产品演示需要刷新恢复筛选的开发者，希望地址栏成为可分享的状态入口。
  • 维护多端筛选参数格式的团队，希望数组和空值在 URL 中保持一致。
  • 通过链接查看客户列表的运营或销售，希望点开就能看到阶段筛选结果。