# SearchBar 组件自定义文档

## 概述

SearchBar 是一个功能完整的搜索输入框组件，提供了搜索、清除、聚焦等基础功能。组件支持多种显示模式（迷你、标准、嵌入式），能够适配移动端和桌面端的不同交互需求。具备自定义图标、占位符文本、键盘事件处理等功能，同时支持自动聚焦和完整的事件回调机制，为用户提供流畅的搜索体验。

## Props 配置表格

| 字段 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| value | `string` | - | 搜索输入框的值 |
| onChange | `(e: React.ChangeEvent<HTMLInputElement>) => void` | - | 输入内容变化回调 |
| onKeyDown | `(e: React.KeyboardEvent<HTMLInputElement>) => void` | - | 键盘按下事件回调 |
| onClear | `() => void` | - | 清除按钮点击回调 |
| placeholder | `string` | - | 输入框占位符文本 |
| SearchIcon | `React.ReactElement` | `<IconSearch />` | 自定义搜索图标 |
| ClearIcon | `React.ReactElement` | `<IconCloseCircleFilled />` | 自定义清除图标 |
| className | `string` | `''` | 自定义样式类名 |
| style | `React.CSSProperties` | - | 自定义内联样式 |
| onFocus | `(e: React.FocusEvent<HTMLInputElement>) => void` | - | 输入框聚焦回调 |
| onBlur | `(e: React.FocusEvent<HTMLInputElement>) => void` | - | 输入框失焦回调 |
| autoFocus | `boolean` | `false` | 是否自动聚焦 |
| variant | `VariantType` | `VariantType.STANDARD` | 组件显示模式 |

## Props 详解

### value

type: `string`

value 用于控制搜索输入框的当前值，支持受控组件模式，默认值为 `-`。

### onChange

type: `(e: React.ChangeEvent<HTMLInputElement>) => void`

onChange 用于处理输入内容变化事件，在用户输入或删除内容时触发，默认值为 `-`。

#### Example1: 基础输入处理

```tsx
import { SearchBar } from 'tuikit-atomicx-react';
import { useState } from 'react';

function BasicSearchInput() {
  const [searchValue, setSearchValue] = useState('');

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setSearchValue(newValue);
    
    // 实时搜索建议
    if (newValue.length >= 2) {
      console.log('触发搜索建议:', newValue);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <SearchBar
        value={searchValue}
        onChange={handleInputChange}
        placeholder="输入关键词搜索..."
      />
      
      {/* 显示当前输入值 */}
      {searchValue && (
        <div style={{ marginTop: '12px', fontSize: '14px', color: '#666' }}>
          当前输入: {searchValue}
        </div>
      )}
    </div>
  );
}
```

#### Example2: 防抖搜索处理

```tsx
import { SearchBar } from 'tuikit-atomicx-react';
import { useState, useCallback, useRef } from 'react';

function DebounceSearchInput() {
  const [searchValue, setSearchValue] = useState('');
  const [searchResults, setSearchResults] = useState<string[]>([]);
  const debounceTimerRef = useRef<NodeJS.Timeout>();

  const performSearch = useCallback(async (keyword: string) => {
    if (!keyword.trim()) {
      setSearchResults([]);
      return;
    }

    try {
      // 模拟搜索API调用
      console.log('执行搜索:', keyword);
      
      // 模拟搜索结果
      const mockResults = [
        `${keyword}相关结果1`,
        `${keyword}相关结果2`,
        `${keyword}相关结果3`
      ];
      
      setSearchResults(mockResults);
    } catch (error) {
      console.error('搜索失败:', error);
      setSearchResults([]);
    }
  }, []);

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setSearchValue(newValue);

    // 清除之前的防抖定时器
    if (debounceTimerRef.current) {
      clearTimeout(debounceTimerRef.current);
    }

    // 设置新的防抖定时器
    debounceTimerRef.current = setTimeout(() => {
      performSearch(newValue);
    }, 300);
  };

  const handleClear = () => {
    setSearchValue('');
    setSearchResults([]);
    
    // 清除防抖定时器
    if (debounceTimerRef.current) {
      clearTimeout(debounceTimerRef.current);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <SearchBar
        value={searchValue}
        onChange={handleInputChange}
        onClear={handleClear}
        placeholder="输入关键词，300ms后自动搜索..."
      />
      
      {/* 搜索结果展示 */}
      {searchResults.length > 0 && (
        <div style={{
          marginTop: '12px',
          border: '1px solid #e0e0e0',
          borderRadius: '4px',
          maxHeight: '200px',
          overflowY: 'auto'
        }}>
          {searchResults.map((result, index) => (
            <div
              key={index}
              style={{
                padding: '8px 12px',
                borderBottom: index < searchResults.length - 1 ? '1px solid #f0f0f0' : 'none',
                cursor: 'pointer'
              }}
              onClick={() => console.log('选择结果:', result)}
            >
              {result}
            </div>
          ))}
        </div>
      )}
    </div>
  );
}
```

### onKeyDown

type: `(e: React.KeyboardEvent<HTMLInputElement>) => void`

onKeyDown 用于处理键盘按下事件，可以响应回车、ESC 等特殊按键操作，默认值为 `-`。

#### Example1: 回车搜索处理

```tsx
import { SearchBar } from 'tuikit-atomicx-react';
import { useState } from 'react';

function EnterSearchHandler() {
  const [searchValue, setSearchValue] = useState('');
  const [searchHistory, setSearchHistory] = useState<string[]>([]);

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    if (e.key === 'Enter') {
      e.preventDefault();
      
      const trimmedValue = searchValue.trim();
      if (trimmedValue) {
        // 执行搜索
        performSearch(trimmedValue);
        
        // 添加到搜索历史
        setSearchHistory(prev => {
          const newHistory = [trimmedValue, ...prev.filter(item => item !== trimmedValue)];
          return newHistory.slice(0, 10); // 保留最近10条
        });
      }
    } else if (e.key === 'Escape') {
      // ESC键清空搜索
      setSearchValue('');
    }
  };

  const performSearch = (keyword: string) => {
    console.log('执行搜索:', keyword);
    // 这里可以调用实际的搜索API
  };

  return (
    <div style={{ padding: '20px' }}>
      <SearchBar
        value={searchValue}
        onChange={(e) => setSearchValue(e.target.value)}
        onKeyDown={handleKeyDown}
        placeholder="输入关键词，按回车搜索，ESC清空"
      />
      
      {/* 搜索历史 */}
      {searchHistory.length > 0 && (
        <div style={{ marginTop: '16px' }}>
          <h4 style={{ margin: '0 0 8px 0', fontSize: '14px', color: '#666' }}>
            搜索历史:
          </h4>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px' }}>
            {searchHistory.map((item, index) => (
              <span
                key={index}
                style={{
                  padding: '4px 8px',
                  backgroundColor: '#f0f0f0',
                  borderRadius: '12px',
                  fontSize: '12px',
                  cursor: 'pointer'
                }}
                onClick={() => setSearchValue(item)}
              >
                {item}
              </span>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
```

#### Example2: 快捷键操作处理

```tsx
import { SearchBar } from 'tuikit-atomicx-react';
import { useState, useRef } from 'react';

function ShortcutKeyHandler() {
  const [searchValue, setSearchValue] = useState('');
  const [suggestions, setSuggestions] = useState<string[]>([]);
  const [selectedIndex, setSelectedIndex] = useState(-1);
  const inputRef = useRef<HTMLInputElement>(null);

  const mockSuggestions = [
    '用户管理',
    '用户权限',
    '用户设置',
    '群组管理',
    '群组设置',
    '消息记录'
  ];

  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
    const currentSuggestions = suggestions;
    
    switch (e.key) {
      case 'Enter':
        e.preventDefault();
        if (selectedIndex >= 0 && currentSuggestions[selectedIndex]) {
          // 选择建议项
          setSearchValue(currentSuggestions[selectedIndex]);
          setSuggestions([]);
          setSelectedIndex(-1);
        } else if (searchValue.trim()) {
          // 直接搜索
          performSearch(searchValue.trim());
        }
        break;
        
      case 'ArrowDown':
        e.preventDefault();
        if (currentSuggestions.length > 0) {
          setSelectedIndex(prev => 
            prev < currentSuggestions.length - 1 ? prev + 1 : 0
          );
        }
        break;
        
      case 'ArrowUp':
        e.preventDefault();
        if (currentSuggestions.length > 0) {
          setSelectedIndex(prev => 
            prev > 0 ? prev - 1 : currentSuggestions.length - 1
          );
        }
        break;
        
      case 'Escape':
        setSuggestions([]);
        setSelectedIndex(-1);
        setSearchValue('');
        inputRef.current?.blur();
        break;
        
      case 'Tab':
        if (selectedIndex >= 0 && currentSuggestions[selectedIndex]) {
          e.preventDefault();
          setSearchValue(currentSuggestions[selectedIndex]);
          setSuggestions([]);
          setSelectedIndex(-1);
        }
        break;
    }
  };

  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const newValue = e.target.value;
    setSearchValue(newValue);
    setSelectedIndex(-1);

    // 过滤建议
    if (newValue.trim()) {
      const filtered = mockSuggestions.filter(item =>
        item.toLowerCase().includes(newValue.toLowerCase())
      );
      setSuggestions(filtered.slice(0, 5));
    } else {
      setSuggestions([]);
    }
  };

  const performSearch = (keyword: string) => {
    console.log('执行搜索:', keyword);
    setSuggestions([]);
    setSelectedIndex(-1);
  };

  return (
    <div style={{ padding: '20px', position: 'relative' }}>
      <SearchBar
        ref={inputRef}
        value={searchValue}
        onChange={handleInputChange}
        onKeyDown={handleKeyDown}
        placeholder="输入搜索，支持方向键选择，Tab补全，ESC清空"
      />
      
      {/* 搜索建议下拉框 */}
      {suggestions.length > 0 && (
        <div style={{
          position: 'absolute',
          top: '100%',
          left: '20px',
          right: '20px',
          backgroundColor: 'white',
          border: '1px solid #e0e0e0',
          borderRadius: '4px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
          zIndex: 1000,
          marginTop: '4px'
        }}>
          {suggestions.map((suggestion, index) => (
            <div
              key={index}
              style={{
                padding: '8px 12px',
                cursor: 'pointer',
                backgroundColor: selectedIndex === index ? '#e3f2fd' : 'transparent',
                borderBottom: index < suggestions.length - 1 ? '1px solid #f0f0f0' : 'none'
              }}
              onClick={() => {
                setSearchValue(suggestion);
                setSuggestions([]);
                setSelectedIndex(-1);
              }}
            >
              {suggestion}
            </div>
          ))}
        </div>
      )}
      
      {/* 快捷键提示 */}
      <div style={{
        marginTop: '16px',
        fontSize: '12px',
        color: '#999',
        lineHeight: '1.4'
      }}>
        <div>• 回车: 搜索选中项或当前输入</div>
        <div>• ↑↓: 选择建议项</div>
        <div>• Tab: 补全选中建议</div>
        <div>• ESC: 清空并失焦</div>
      </div>
    </div>
  );
}
```

### SearchIcon

type: `React.ReactElement`

SearchIcon 用于自定义搜索图标，可以替换默认的搜索图标样式，默认值为 `<IconSearch />`。

#### Example1: 自定义搜索图标

```tsx
import { SearchBar } from 'tuikit-atomicx-react';
import { Icon, IconFilter } from '@tencentcloud/uikit-base-component-react';
import { useState } from 'react';

function CustomSearchIcon() {
  const [searchValue, setSearchValue] = useState('');

  // 自定义搜索图标组件
  const CustomIcon = () => (
    <Icon size="16px" style={{ color: '#007AFF' }}>
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
      </svg>
    </Icon>
  );

  return (
    <div style={{ padding: '20px' }}>
      <h3>自定义搜索图标</h3>
      
      {/* 默认图标 */}
      <div style={{ marginBottom: '16px' }}>
        <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}>
          默认图标:
        </label>
        <SearchBar
          value={searchValue}
          onChange={(e) => setSearchValue(e.target.value)}
          placeholder="默认搜索图标"
        />
      </div>
      
      {/* 自定义图标 */}
      <div style={{ marginBottom: '16px' }}>
        <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}>
          自定义图标:
        </label>
        <SearchBar
          value={searchValue}
          onChange={(e) => setSearchValue(e.target.value)}
          SearchIcon={<CustomIcon />}
          placeholder="自定义搜索图标"
        />
      </div>
      
      {/* 使用过滤图标 */}
      <div>
        <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}>
          过滤图标:
        </label>
        <SearchBar
          value={searchValue}
          onChange={(e) => setSearchValue(e.target.value)}
          SearchIcon={<Icon><IconFilter /></Icon>}
          placeholder="使用过滤图标"
        />
      </div>
    </div>
  );
}
```

#### Example2: 动态搜索图标

```tsx
import { SearchBar } from 'tuikit-atomicx-react';
import { Icon, IconSearch, IconLoading } from '@tencentcloud/uikit-base-component-react';
import { useState, useEffect } from 'react';

function DynamicSearchIcon() {
  const [searchValue, setSearchValue] = useState('');
  const [isSearching, setIsSearching] = useState(false);
  const [searchMode, setSearchMode] = useState<'normal' | 'advanced'>('normal');

  // 模拟搜索状态
  useEffect(() => {
    if (searchValue.length >= 2) {
      setIsSearching(true);
      const timer = setTimeout(() => {
        setIsSearching(false);
      }, 1000);
      
      return () => clearTimeout(timer);
    } else {
      setIsSearching(false);
    }
  }, [searchValue]);

  // 根据状态动态生成图标
  const getDynamicIcon = () => {
    if (isSearching) {
      return (
        <Icon size="16px" style={{ color: '#007AFF' }}>
          <IconLoading />
        </Icon>
      );
    }
    
    if (searchMode === 'advanced') {
      return (
        <Icon size="16px" style={{ color: '#ff6b35' }}>
          <svg viewBox="0 0 24 24" fill="currentColor">
            <path d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"/>
          </svg>
        </Icon>
      );
    }
    
    return (
      <Icon size="16px" style={{ color: '#666' }}>
        <IconSearch />
      </Icon>
    );
  };

  const toggleSearchMode = () => {
    setSearchMode(prev => prev === 'normal' ? 'advanced' : 'normal');
  };

  return (
    <div style={{ padding: '20px' }}>
      <div style={{ marginBottom: '16px' }}>
        <button
          onClick={toggleSearchMode}
          style={{
            padding: '6px 12px',
            backgroundColor: searchMode === 'advanced' ? '#ff6b35' : '#007AFF',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '12px'
          }}
        >
          {searchMode === 'advanced' ? '高级搜索模式' : '普通搜索模式'}
        </button>
      </div>
      
      <SearchBar
        value={searchValue}
        onChange={(e) => setSearchValue(e.target.value)}
        SearchIcon={getDynamicIcon()}
        placeholder={
          searchMode === 'advanced' 
            ? "高级搜索 - 支持多条件筛选" 
            : "普通搜索 - 输入关键词"
        }
      />
      
      {/* 状态显示 */}
      <div style={{ marginTop: '12px', fontSize: '12px', color: '#666' }}>
        <div>搜索模式: {searchMode === 'advanced' ? '高级' : '普通'}</div>
        <div>搜索状态: {isSearching ? '搜索中...' : '待输入'}</div>
        {searchValue && (
          <div>当前输入: {searchValue}</div>
        )}
      </div>
    </div>
  );
}
```

### ClearIcon

type: `React.ReactElement`

ClearIcon 用于自定义清除图标，可以替换默认的清除按钮样式，默认值为 `<IconCloseCircleFilled />`。

#### Example1: 自定义清除图标

```tsx
import { SearchBar } from 'tuikit-atomicx-react';
import { Icon, IconClose } from '@tencentcloud/uikit-base-component-react';
import { useState } from 'react';

function CustomClearIcon() {
  const [searchValue, setSearchValue] = useState('');

  // 自定义清除图标
  const CustomClearIcon = () => (
    <Icon size="14px" style={{ color: '#ff4444' }}>
      <svg viewBox="0 0 24 24" fill="currentColor">
        <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
      </svg>
    </Icon>
  );

  const handleClear = () => {
    setSearchValue('');
    console.log('搜索内容已清除');
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>自定义清除图标</h3>
      
      {/* 默认清除图标 */}
      <div style={{ marginBottom: '16px' }}>
        <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}>
          默认清除图标:
        </label>
        <SearchBar
          value={searchValue}
          onChange={(e) => setSearchValue(e.target.value)}
          onClear={handleClear}
          placeholder="输入内容查看默认清除图标"
        />
      </div>
      
      {/* 自定义清除图标 */}
      <div style={{ marginBottom: '16px' }}>
        <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}>
          自定义清除图标:
        </label>
        <SearchBar
          value={searchValue}
          onChange={(e) => setSearchValue(e.target.value)}
          onClear={handleClear}
          ClearIcon={<CustomClearIcon />}
          placeholder="输入内容查看自定义清除图标"
        />
      </div>
      
      {/* 文字清除按钮 */}
      <div>
        <label style={{ display: 'block', marginBottom: '4px', fontSize: '14px' }}>
          文字清除按钮:
        </label>
        <SearchBar
          value={searchValue}
          onChange={(e) => setSearchValue(e.target.value)}
          onClear={handleClear}
          ClearIcon={<span style={{ fontSize: '12px', color: '#007AFF' }}>清除</span>}
          placeholder="输入内容查看文字清除按钮"
        />
      </div>
    </div>
  );
}
```

#### Example2: 动态清除图标

```tsx
import { SearchBar } from 'tuikit-atomicx-react';
import { Icon, IconClose, IconUndo } from '@tencentcloud/uikit-base-component-react';
import { useState } from 'react';

function DynamicClearIcon() {
  const [searchValue, setSearchValue] = useState('');
  const [lastSearchValue, setLastSearchValue] = useState('');
  const [clearMode, setClearMode] = useState<'clear' | 'undo'>('clear');

  const getDynamicClearIcon = () => {
    if (clearMode === 'undo' && lastSearchValue) {
      return (
        <Icon size="14px" style={{ color: '#28a745' }}>
          <IconUndo />
        </Icon>
      );
    }
    
    return (
      <Icon size="14px" style={{ color: '#dc3545' }}>
        <IconClose />
      </Icon>
    );
  };

  const handleClear = () => {
    if (clearMode === 'undo' && lastSearchValue) {
      // 撤销模式：恢复上次的搜索内容
      setSearchValue(lastSearchValue);
      setLastSearchValue('');
      setClearMode('clear');
      console.log('已恢复搜索内容:', lastSearchValue);
    } else {
      // 清除模式：清空搜索内容
      setLastSearchValue(searchValue);
      setSearchValue('');
      setClearMode('undo');
      console.log('搜索内容已清除，可撤销');
      
      // 5秒后自动切回清除模式
      setTimeout(() => {
        setClearMode('clear');
        setLastSearchValue('');
      }, 5000);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <SearchBar
        value={searchValue}
        onChange={(e) => setSearchValue(e.target.value)}
        onClear={handleClear}
        ClearIcon={getDynamicClearIcon()}
        placeholder="输入内容，清除后可撤销（5秒内有效）"
      />
      
      {/* 状态显示 */}
      <div style={{ marginTop: '12px', fontSize: '12px', color: '#666' }}>
        <div>当前模式: {clearMode === 'clear' ? '清除' : '撤销'}</div>
        {lastSearchValue && (
          <div>可恢复内容: {lastSearchValue}</div>
        )}
      </div>
      
      {/* 操作提示 */}
      {clearMode === 'undo' && lastSearchValue && (
        <div style={{
          marginTop: '8px',
          padding: '8px 12px',
          backgroundColor: '#d4edda',
          color: '#155724',
          borderRadius: '4px',
          fontSize: '12px'
        }}>
          点击撤销图标可恢复搜索内容："{lastSearchValue}"
        </div>
      )}
    </div>
  );
}
```

### onClear

type: `() => void`

onClear 用于处理清除按钮点击事件，在用户点击清除图标时触发，默认值为 `-`。

#### Example1: 基础清除功能

```tsx
import { SearchBar } from 'tuikit-atomicx-react';
import { useState } from 'react';

function BasicClearFunction() {
  const [searchValue, setSearchValue] = useState('');
  const [clearCount, setClearCount] = useState(0);

  const handleClear = () => {
    setSearchValue('');
    setClearCount(prev => prev + 1);
    console.log('搜索内容已清除');
  };

  return (
    <div style={{ padding: '20px' }}>
      <SearchBar
        value={searchValue}
        onChange={(e) => setSearchValue(e.target.value)}
        onClear={handleClear}
        placeholder="输入内容，点击清除按钮测试"
      />
      
      <div style={{ marginTop: '12px', fontSize: '14px', color: '#666' }}>
        <div>当前输入: {searchValue || '(空)'}</div>
        <div>清除次数: {clearCount}</div>
      </div>
    </div>
  );
}
```

#### Example2: 清除时的数据重置

```tsx
import { SearchBar } from 'tuikit-atomicx-react';
import { useState } from 'react';

function ClearWithDataReset() {
  const [searchValue, setSearchValue] = useState('');
  const [searchResults, setSearchResults] = useState<string[]>([]);
  const [searchHistory, setSearchHistory] = useState<string[]>(['历史搜索1', '历史搜索2']);
  const [filters, setFilters] = useState({
    category: 'all',
    dateRange: 'week'
  });

  const handleClear = () => {
    // 清除搜索内容
    setSearchValue('');
    
    // 清除搜索结果
    setSearchResults([]);
    
    // 重置筛选条件
    setFilters({
      category: 'all',
      dateRange: 'week'
    });
    
    // 记录清除操作
    console.log('搜索已重置，所有相关数据已清除');
    
    // 可选：清除搜索历史
    // setSearchHistory([]);
  };

  const handleSearch = (keyword: string) => {
    if (keyword.trim()) {
      // 模拟搜索结果
      const mockResults = [
        `${keyword} - 结果1`,
        `${keyword} - 结果2`,
        `${keyword} - 结果3`
      ];
      setSearchResults(mockResults);
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <SearchBar
        value={searchValue}
        onChange={(e) => {
          const newValue = e.target.value;
          setSearchValue(newValue);
          handleSearch(newValue);
        }}
        onClear={handleClear}
        placeholder="输入搜索关键词"
      />
      
      {/* 筛选条件 */}
      <div style={{ 
        marginTop: '12px', 
        padding: '8px', 
        backgroundColor: '#f5f5f5', 
        borderRadius: '4px' 
      }}>
        <div style={{ fontSize: '12px', color: '#666', marginBottom: '4px' }}>
          筛选条件:
        </div>
        <select
          value={filters.category}
          onChange={(e) => setFilters(prev => ({ ...prev, category: e.target.value }))}
          style={{ marginRight: '8px', fontSize: '12px' }}
        >
          <option value="all">全部分类</option>
          <option value="user">用户</option>
          <option value="group">群组</option>
        </select>
        <select
          value={filters.dateRange}
          onChange={(e) => setFilters(prev => ({ ...prev, dateRange: e.target.value }))}
          style={{ fontSize: '12px' }}
        >
          <option value="week">最近一周</option>
          <option value="month">最近一月</option>
          <option value="year">最近一年</option>
        </select>
      </div>
      
      {/* 搜索结果 */}
      {searchResults.length > 0 && (
        <div style={{ marginTop: '12px' }}>
          <div style={{ fontSize: '14px', fontWeight: 'bold', marginBottom: '4px' }}>
            搜索结果:
          </div>
          {searchResults.map((result, index) => (
            <div key={index} style={{ fontSize: '12px', padding: '2px 0' }}>
              • {result}
            </div>
          ))}
        </div>
      )}
      
      {/* 搜索历史 */}
      {searchHistory.length > 0 && !searchValue && (
        <div style={{ marginTop: '12px' }}>
          <div style={{ fontSize: '14px', fontWeight: 'bold', marginBottom: '4px' }}>
            搜索历史:
          </div>
          {searchHistory.map((item, index) => (
            <span
              key={index}
              onClick={() => setSearchValue(item)}
              style={{
                display: 'inline-block',
                padding: '4px 8px',
                margin: '2px',
                backgroundColor: '#e0e0e0',
                borderRadius: '12px',
                fontSize: '12px',
                cursor: 'pointer'
              }}
            >
              {item}
            </span>
          ))}
        </div>
      )}
    </div>
  );
}
```

### onFocus

type: `(e: React.FocusEvent<HTMLInputElement>) => void`

onFocus 用于处理输入框获得焦点事件，在用户点击或Tab键聚焦输入框时触发，默认值为 `-`。

#### Example1: 基础聚焦处理

```tsx
import { SearchBar } from 'tuikit-atomicx-react';
import { useState } from 'react';

function BasicFocusHandler() {
  const [searchValue, setSearchValue] = useState('');
  const [isFocused, setIsFocused] = useState(false);
  const [focusCount, setFocusCount] = useState(0);

  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
    setIsFocused(true);
    setFocusCount(prev => prev + 1);
    console.log('搜索框获得焦点');
  };

  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
    setIsFocused(false);
    console.log('搜索框失去焦点');
  };

  return (
    <div style={{ padding: '20px' }}>
      <SearchBar
        value={searchValue}
        onChange={(e) => setSearchValue(e.target.value)}
        onFocus={handleFocus}
        onBlur={handleBlur}
        placeholder="点击输入框测试聚焦事件"
      />
      
      <div style={{ marginTop: '12px', fontSize: '14px', color: '#666' }}>
        <div>焦点状态: {isFocused ? '已聚焦' : '未聚焦'}</div>
        <div>聚焦次数: {focusCount}</div>
      </div>
    </div>
  );
}
```

#### Example2: 聚焦时显示搜索建议

```tsx
import { SearchBar } from 'tuikit-atomicx-react';
import { useState } from 'react';

function FocusWithSuggestions() {
  const [searchValue, setSearchValue] = useState('');
  const [showSuggestions, setShowSuggestions] = useState(false);
  const [searchHistory, setSearchHistory] = useState([
    '用户管理',
    '群组设置',
    '消息记录',
    '权限配置'
  ]);
  const [hotSearches] = useState([
    '最新功能',
    '使用教程',
    '常见问题',
    '技术支持'
  ]);

  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
    setShowSuggestions(true);
    console.log('显示搜索建议');
  };

  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
    // 延迟隐藏，让点击建议项有时间响应
    setTimeout(() => {
      setShowSuggestions(false);
    }, 200);
  };

  const selectSuggestion = (suggestion: string) => {
    setSearchValue(suggestion);
    setShowSuggestions(false);
    
    // 添加到搜索历史
    if (!searchHistory.includes(suggestion)) {
      setSearchHistory(prev => [suggestion, ...prev.slice(0, 9)]);
    }
  };

  return (
    <div style={{ padding: '20px', position: 'relative' }}>
      <SearchBar
        value={searchValue}
        onChange={(e) => setSearchValue(e.target.value)}
        onFocus={handleFocus}
        onBlur={handleBlur}
        placeholder="点击输入框查看搜索建议"
      />
      
      {/* 搜索建议面板 */}
      {showSuggestions && (
        <div style={{
          position: 'absolute',
          top: '100%',
          left: '0',
          right: '0',
          backgroundColor: 'white',
          border: '1px solid #e0e0e0',
          borderRadius: '4px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
          zIndex: 1000,
          marginTop: '4px'
        }}>
          {/* 搜索历史 */}
          {searchHistory.length > 0 && (
            <div style={{ padding: '8px 12px', borderBottom: '1px solid #f0f0f0' }}>
              <div style={{ fontSize: '12px', color: '#999', marginBottom: '4px' }}>
                搜索历史
              </div>
              {searchHistory.slice(0, 4).map((item, index) => (
                <div
                  key={index}
                  onClick={() => selectSuggestion(item)}
                  style={{
                    padding: '4px 0',
                    cursor: 'pointer',
                    fontSize: '14px',
                    color: '#333'
                  }}
                >
                  {item}
                </div>
              ))}
            </div>
          )}
          
          {/* 热门搜索 */}
          <div style={{ padding: '8px 12px' }}>
            <div style={{ fontSize: '12px', color: '#999', marginBottom: '4px' }}>
              热门搜索
            </div>
            {hotSearches.map((item, index) => (
              <div
                key={index}
                onClick={() => selectSuggestion(item)}
                style={{
                  padding: '4px 0',
                  cursor: 'pointer',
                  fontSize: '14px',
                  color: '#007AFF'
                }}
              >
                {item}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}
```

### onBlur

type: `(e: React.FocusEvent<HTMLInputElement>) => void`

onBlur 用于处理输入框失去焦点事件，在用户点击其他区域或Tab键离开输入框时触发，默认值为 `-`。

### placeholder

type: `string`

placeholder 用于设置输入框的占位符文本，当输入框为空时显示，默认值为 `-`。

### autoFocus

type: `boolean`

autoFocus 用于控制组件是否在渲染后自动获得焦点，默认值为 `false`。

### variant

type: `VariantType`

variant 用于指定组件的显示模式，支持迷你、标准、嵌入式三种模式，默认值为 `VariantType.STANDARD`。

### className

type: `string`

className 用于自定义组件的样式类名，默认值为 `''`。

### style

type: `React.CSSProperties`

style 用于自定义组件的内联样式，默认值为 `-`。