---
title: 设计文档
order: 2
category: pro
---

# 设计文档

## 任务链接

&#x20;

## Figma链接

https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=13629-5817&m=dev

# 1. 组件概述

| **组件名称（英文）** | Find            |
|--------------|-----------------|
| **组件编号**     | pcl\_find\_V1.0 |
| **组件类型**     | Plus Components |
| **组件分类**     | Plus Components |
| **依赖组件**     | Lookup          |

# 2. 版本

| **版本**   | 1.0  |
|----------|------|
| **更新简介** | 首次发布 |

# 3. 组件简介

Find Plus组件 是基于Lookup pro 组件的“组件内查找模式”Plus 组件：面向**已加载/已知范围**的数据集（列表/表格/卡片流/树等），提供搜索。它
**不请求外部接口**，数据源来自页面现有 Data Source/State，并通过标准协议驱动结果展示区域。

**关键定位：**

> * **Lookup**：只定义展示样式、交互协议与状态（输入/触发/结果消费）
>
> * **Find**：在 Pro 协议上接入 **本地数据源**，实现“查找/定位/过滤”闭环，并可开箱即用

# 4. 需求来源

* **Big Sale SKU List** 优先落地：在不引入外部搜索服务的情况下，快速在当前 SKU 列表中定位目标并进行后续操作（查看、选中、加入购物车等）。

* 组件体系需要在“万能 Search Plus”之前，先交付一个**低风险、低依赖、高复用**的查找能力，用于快速覆盖大量列表场景。

# 5. 设计目标

* **统一“组件内查找”体验**：在列表/表格/卡片流等已加载数据中，提供一致的查找入口、状态反馈与命中展示，避免各业务各做一套。

* **可复用的对接协议**：继承 Lookup Pro 的事件/状态机，保证后续 Search Plus、其他业务 Plus 组件共享同一套交互规范。

# 6. UI设计

Find 组件视觉规范默认继承 Lookup 组件（如 Grid/Table/List）的样式和 token。

并且保留Lookup 组件的配置能力，特别是入口触发区和结果展示区的配置规则。

# 7. 支持功能

* 数据源绑定
* 支持配置搜索数据的字段
* placeholder 文案
* 配置 lookup inline 模式 或者 button 模式
* 将 lookup的 ref 透出
* lookup 默认不展示搜索按钮，输入就搜索