知识库文档，部分组件文档内容调整，部分文档优化文案

Tevin

2025-03-20 b1e987944d36275906373fcd24705f37e1909f11

 _cursor.ai/plugins.doc/filter.doc/CFilter.doc.md

@@ -1,98 +1,37 @@
# 筛选组件
# CFilter 筛选组件

## 组件名称

`CFilter` - 用于页面筛选条件的组件

## 组件说明
## 功能说明

该组件用于实现页面筛选功能，包含顶部筛选条和展开的更多筛选抽屉，支持多种筛选控件类型，包括选择器、日期范围、单选和输入框等。

## 使用方法

```html
<CFilter
  :filterData="filterData"
  :bar="barConfig"
  :items="itemsConfig"
  :selectOptions="selectOptions"
  :onChange="handleFilterChange"
/>
```

## 属性说明

| 属性名        | 类型     | 默认值 | 说明                   |
| ------------- | -------- | ------ | ---------------------- |
| filterData    | Object   | {}     | 筛选数据对象           |
| bar           | Object   | {}     | 筛选横条项目配置       |
| items         | Array    | []     | 筛选展开层项目列表配置 |
| selectOptions | Object   | {}     | 各个项目的选项列表     |
| onChange      | Function | -      | 筛选变化时的回调函数   |

## 子组件说明

CFilter组件包含以下子组件：

1. `CFilterSelect` - 下拉选择组件
2. `CFilterDateRange` - 日期范围选择组件
3. `CFilterRadio` - 单选组件
4. `CFilterInput` - 输入框组件

## 配置项说明

### bar 配置项

顶部筛选条配置，支持类型：
## 引用方式

```js
{
  type: 'select', // 类型：select/dateRange/input
  label: '状态', // 显示的标签
  name: 'status', // 字段名称
  cancelable: true // 是否可取消选择
}
import { CFilter } from '@components/plugins/filter';
```

### items 配置项
## 组件参数

更多筛选项配置数组：
- `filterData` (Object，默认值：{})：筛选数据对象
- `bar` (Object，默认值：{})：筛选横条项目配置
  - `type` (String)：控件类型，可选值有 'select'、'dateRange'、'input'
  - `label` (String)：显示的标签
  - `name` (String)：字段名称
  - `cancelable` (Boolean)：是否可取消选择，仅对select类型有效
- `items` (Array，默认值：[])：筛选展开层项目列表配置
  - 每项格式同bar，但type可选值多一个'radio'
- `selectOptions` (Object，默认值：{})：各个项目的选项列表
  - 格式为 `{ 字段名: [{label: '显示文本', value: '值'}] }`
- `onChange` (Function，必填)：筛选变化时的回调函数
  - 参数：`filterData` (Object) 变更后的筛选数据对象

```js
[
  {
    type: 'select', // 类型：select/dateRange/radio/input
    label: '会员类型', // 显示的标签
    name: 'memberType', // 字段名称
  },
  {
    type: 'dateRange',
    label: '日期范围',
    name: 'dateRange'
  }
]
```
## 实例方法

### selectOptions 配置项

选项数据配置：

```js
{
  status: [
    { label: '全部', value: '' },
    { label: '正常', value: 1 },
    { label: '停用', value: 0 }
  ],
  memberType: [
    { label: '全部', value: '' },
    { label: '普通会员', value: 'normal' },
    { label: 'VIP会员', value: 'vip' }
  ]
}
```
组件没有对外暴露的实例方法

## 使用示例

### 基础用法

```html
<template>
@@ -187,7 +126,7 @@

## 注意事项

1. 筛选条（bar）只能配置一个筛选项
2. 抽屉式筛选（items）可以配置多个筛选项
3. 每个筛选项的类型（type）必须与组件类型匹配
4. select和radio类型的选项必须在selectOptions中配置对应的选项数据 
- 筛选条（bar）只能配置一个筛选项
- 抽屉式筛选（items）可以配置多个筛选项
- 每个筛选项的类型（type）必须与组件类型匹配
- select和radio类型的选项必须在selectOptions中配置对应的选项数据