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

# 设计文档

## Figma链接

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

# 1. 组件概述

| **组件名称（英文）** | Lookup                |
|--------------|-----------------------|
| **组件编号**     | pcp\_de\_lookup\_V1.0 |
| **组件类型**     | Pro Components        |
| **组件分类**     | Data Entry            |

# 2. 版本

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

# 3. 组件概述

## 3.1 组件简介

Lookup Pro 是“目标定位（Lookup）”的通用交互协议组件：只负责输入、触发、状态流转、结果承载形态、结果选择/确认/取消等交互规范；*
*不负责数据请求、数据结构定义、业务字段语义**。Plus 组件通过事件协议接入数据源与渲染结果。

## 3.2 设计目标

* **统一搜索体验**：避免不同页面、不同组件各自实现搜索逻辑

* **避免状态混乱**：明确搜索 ≠ 分类，搜索是一种独立模式

* **高复用性**：适用于商品、订单、用户、内容等多种业务实体

* **低代码友好**：可被拖入页面，通过配置即可接入数据

* **防止误实现**：通过组件边界约束开发实现方式

# 4. 适用场景

1. **列表页快速定位**：在商品/客户/订单列表中快速定位目标并高亮或筛出。

2. **加购/加单选择**：从候选集合中定位并选择条目，回填到购物车/表单。

3. **弹层选择**：通过弹窗/抽屉进行复杂选择（多选+确认）。

4. **移动端/Pad/Kiosk**：更强调“确认触发”和“大点击目标”的定位入口。

# 5. UI 设计

## 5.1 组件构成

Lookup Pro 由两部分组成：

* **入口区（Lookup Entry）**：输入框 +（可选）清除 +（可选）触发按钮 +（可选）辅助区（历史/联想/热词）

* **结果承载区（Result Host）**：用于承载“建议/历史/结果”，**结果内容由外部渲染器/Plus 注入**

## 5.2 展示样式

* 组件默认展示样式

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=NWUyODc2YTQ2OGE1MDhhNWQxZTM0OWEyNGQyODM5MThfYTVKSTZZME13QnZyOFd0d0xwV2hmZ1F5QXl2TTlwR0FfVG9rZW46WW9pMmIzME4wbzRxbTJ4YlRHQ2NSNEMybnNlXzE3NzAwMTcwNjE6MTc3MDAyMDY2MV9WNA)

* 输入框组件分为默认号和大号

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=MWU0N2RjMzFlODBmNzYxZWJlM2FjNWY1MmI0Y2Q0NGNfb3pJbnZNN3NiYlF4a0RSSHVLVmM1YW1xZlFNY3ZHMlhfVG9rZW46VVc3SmJiZTZab3VtVG54aGhuTmNZM0xDbnVjXzE3NzAwMTcwNjE6MTc3MDAyMDY2MV9WNA)

* 变体展示，icon、文本、按钮、输入框

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=NTg5MTI1OTkwYzMxZTY0ZmI1NjE4MTMwZjE1MjRjODFfSHFlWUN1U0ZMMHFIWUJtOGs4RkxFMnB5aUx6MTRoem1fVG9rZW46VHFNVmJsTHBBb1B0ME54V2ZqbGNFN3FWbkpiXzE3NzAwMTcwNjE6MTc3MDAyMDY2MV9WNA)

* 当使用输入框时，默认按照输入框的规则，在其下方悬浮展示搜索结果或联想词

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=MTUyNDg4OTZlYWI5ZGY0ZDEwMTcwZTg0YWI0NjgzMzVfZzE4U25Od2paSWh1dmFlQlFaUTBIbk9nSjFaRTZrNElfVG9rZW46Tk9ZNWJJdFAwb0JwRTJ4TmhnVGN3alhFbkRnXzE3NzAwMTcwNjE6MTc3MDAyMDY2MV9WNA)

* 当使用文本、icon、按钮等这些触发动作时，默认使用弹出层，搜索空态为

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=NDU2YThkMjc0M2I1ZWMwYmQxOTQzY2QwNTZkMjgyMWZfd1ZSM1ZvTXpTUHZMS3A5R0JGTUtkVTdrWVJydERrbzRfVG9rZW46RE53SWJhQW1Fb1dGNmt4S0xMUmNRYTA2bmtjXzE3NzAwMTcwNjE6MTc3MDAyMDY2MV9WNA)

* 搜索开启搜索历史和热门搜索

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=OGM1NmY5MTY4MGU5NGE3ZmM0Y2UwYWZjYjliNzlhNzJfWVBWMWRhbjFLZFRFcWlnY1VYVjg2cmF6TjJaUFFpYTJfVG9rZW46TGYwM2JHYXM1bzhOYVN4ZWhhS2NPaFZubm5kXzE3NzAwMTcwNjE6MTc3MDAyMDY2MV9WNA)

* 搜索结果可在层层内部下方展示，也可在其他页面区域中展示。

  * 搜索结果统一平铺，与分类完全解耦，可以通过“来源标签”提示上下文。

  * <span style="color: rgb(222,120,2); background-color: inherit">
    搜索结果在弹出层上展示结果的样式这期不做，搜索结果的筛选排序分组等还有结果的tab标签切换等还有搜索结果的上一条下一条等这期不做，但要结构规划出来</span>

常用形态（由 displayType 决定）：

* **Inline**：入口下方占位展开结果区

* **Popup**：下拉/Popover 浮层承载结果区

* **Modal/Drawer**：弹窗/抽屉承载（适合复杂筛选、多选确认）

* **Detached**：独立承载（移动端优先兜底）

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=NzY0Y2JmMWY0ZjQ2OWQxM2MyZWMyNmQ1YWJkOGI3NTJfc0hFeFZ1dmdWUUpOUWQxdkZKNEM3Vkh1VmVPeEM2eVZfVG9rZW46SzBibWJXdnBMbzdOaXp4b0J1bGNsa3VDbnVkXzE3NzAwMTcwNjE6MTc3MDAyMDY2MV9WNA)

## 5.3 交互

### 5.3.1 交互步骤

1. 点击搜索按钮，触发弹出层

2. 展示搜索弹出层，光标定位在输入框中，拉起键盘，键盘类型根据搜索框指定的文本类型来确定

3. 输入框中输入文本内容，此时搜索结果展示在相应区域

4. 点击关闭搜索弹出层，搜索结束

## 5.4 自适应与响应式规则

* 弹出层组件宽度默认撑满整个容器，当宽度减少时，输入框变小

* 弹出层组件高度默认由内容撑高

## 5.5 **视觉设计规范（需要主题模块完成）**

### 5.5.1 颜色规范

* 使用主题色，token：colorPrimary

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=NzJlNDA1YzYzZjFmNDYzNjgwOTIxMzM1ZmU1OGM1MTNfRkt1VG4xdU5OVzBzYVBNSXdNeUJueDk0bnd6OUlNRk1fVG9rZW46V2dzbmJxMUJ3b090bEZ4dmxXWmNoUmNHbmliXzE3NzAwMTcwNjE6MTc3MDAyMDY2MV9WNA)

* 使用token：主色浅色背景色 colorPrimaryBg

![](https://m1ed09stz4r.feishu.cn/space/api/box/stream/download/asynccode/?code=OWNhZjk3ZmVhYmU5ODk4ZGE2NDI4MDg0MWFkNTA5YzVfcnlsUGFGNkpJZHBPVkN4YWNwRlpSR1lQOGE1SkFWQ1FfVG9rZW46SjN0V2JQQ1NEb3J4SEd4cmdPWWNSeW9sblBjXzE3NzAwMTcwNjE6MTc3MDAyMDY2MV9WNA)

### 5.5.2 尺寸规范

### 5.5.3 间距规范

# 6. 配置项

## 6.1 样式自定义

* 可自定义触发搜索入口控件尺寸的样式：是文本、按钮、icon、搜索框，并能自定义其样式

* 可以在默认基础上更改搜索的弹出窗口的样式，背景、阴影、圆角、padding、gap、边框

* 可更改弹出框的宽度和高度，默认为宽度撑满容器，高度自适应

## 6.2 基础配置

* 搜索结果的展示：Inline、Popup、Modal/Drawer、Detached，默认为Detached

* 自定义输入提示文案

* 是否禁用，默认否

* 是否开启扫码，默认开启

* 是否显示前缀图标，默认关闭

* 是否显示清除按钮，默认开启

* 是否显示“确认触发”按钮，默认开启

## 6.3 行为配置

* 搜索触发模式：实时 / 确认触发，默认为实时触发

* 防抖时间

* 关闭搜索模式，默认为按钮关闭，可以开启点击其他页面区域关闭

## 6.4 辅助配置

* 搜索历史，默认关闭

* 联想词，默认关闭

* 热门搜索，默认关闭

# 7. 示例

