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

# PisellQuickFilter 设计文档

## 设计理念

PisellQuickFilter 组件的设计旨在为用户提供快速、简洁的数据筛选体验。通过标准化的筛选项配置，实现统一的交互体验和视觉呈现。

## 设计原则

### 1. 简洁高效

- 筛选项以行内（inline）形式排列，节省垂直空间
- 支持快速筛选项和高级筛选项分离，避免界面过于复杂

### 2. 一致性

- 基于 Ant Design Form 组件，保持与系统整体风格一致
- 统一的标签、输入框、按钮样式

### 3. 灵活可扩展

- 支持多种筛选项类型（输入框、下拉选择、日期选择等）
- 支持自定义表单前缀和配置项

## 视觉规范

### 布局

- **表单布局**: inline 布局，筛选项水平排列
- **标签宽度**: 自动适应内容宽度（`labelCol={{ span: 0 }}`）
- **组件尺寸**: large 尺寸，提供更好的点击区域

### 间距

- 筛选项之间自动保持合适间距
- 继承 Ant Design Form inline 布局的默认间距规范

## 交互规范

### 用户操作流程

1. 用户进入页面，看到快速筛选项
2. 选择/输入筛选条件
3. 系统实时响应，更新数据展示

### 反馈机制

- 输入框支持 placeholder 提示
- 下拉选择支持选项列表展示
- 日期选择器提供日历选择界面

## 使用场景

### 适用场景

- ✅ 数据列表筛选
- ✅ 商品检索
- ✅ 订单查询
- ✅ 用户管理筛选

### 不适用场景

- ❌ 复杂的多条件组合筛选（建议使用完整的 Filter 组件）
- ❌ 需要表单验证的场景（建议直接使用 Form 组件）

## 可访问性

- 支持键盘导航
- 表单标签语义化
- 支持屏幕阅读器

## 响应式设计

- 大屏：筛选项水平排列
- 小屏：自动换行，保持可用性




### 设计资源

- [Figma 设计稿](https://www.figma.com/design/pM8Ho6d7kCMv9vIBvFHUlj/Pisell-2.0-Component-Library?node-id=12699-114223)
- [文档规范](https://m1ed09stz4r.feishu.cn/wiki/HpclwRw4rij4UBklLuzcgFIhn1f)
