@ticatec/uniface-element 0.3.22 → 5.0.0

package/docs/search-filters/cn/searchbox.md

@@ -1,1582 +0,0 @@
-# SearchBox 搜索框组件
-
-一个多功能搜索输入组件，为基于文本的查询和过滤提供清洁的界面，具有内置搜索图标、清除功能和对国际文本输入方法的支持。
-
-## 概述
-
-SearchBox 组件通过 Google Material Design 图标、自动清除功能和对国际用户的全面输入方法支持，提供精美的搜索体验。它为在应用程序中实现搜索和过滤功能提供一致的界面，具有内置的焦点管理和多字节字符输入的合成事件处理。
-
-## 安装
-
-```typescript
-import SearchBox from '@ticatec/uniface-element/SearchBox';
-import type { OnChangeHandler } from '@ticatec/uniface-element/SearchBox';
-```
-
-## 基本用法
-
-```svelte
-<script lang="ts">
-  import SearchBox from '@ticatec/uniface-element/SearchBox';
-
-  let searchQuery: string | null = null;
-
-  function handleSearch(query: string | null) {
-    console.log('搜索查询:', query);
-  }
-</script>
-
-<SearchBox 
-  bind:value={searchQuery}
-  onChange={handleSearch}
-  placeholder="搜索..."
-/>
-```
-
-## 属性
-
-| 属性 | 类型 | 默认值 | 描述 |
-|------|------|--------|------|
-| `variant` | `'' \| 'plain' \| 'outlined' \| 'filled'` | `''` | 视觉样式变体 |
-| `compact` | `boolean` | `false` | 启用紧凑布局以适应密集表单 |
-| `style` | `string` | `''` | 自定义内联样式 |
-| `value` | `string \| null` | `null` | 当前搜索文本值（可绑定） |
-| `disabled` | `boolean` | `false` | 禁用输入交互 |
-| `onChange` | `OnChangeHandler<string \| null>` | `null` | 变更事件处理器 |
-| `placeholder` | `string \| null` | `null` | 占位符文本 |
-
-## 方法
-
-| 方法 | 描述 |
-|------|------|
-| `focus()` | 以编程方式聚焦搜索输入框 |
-
-## 类型定义
-
-```typescript
-/**
- * 变更事件处理器类型
- */
-type OnChangeHandler<T> = (value: T) => void;
-```
-
-## 功能特性
-
-- **内置搜索图标**：Google Material Design 搜索图标提供清晰的视觉指示
-- **自动清除功能**：输入文本时出现清除按钮
-- **国际化支持**：多字节字符的输入法合成支持
-- **焦点管理**：以编程方式进行焦点控制以获得更好的用户体验
-- **一致样式**：通过变体支持与其他表单组件匹配
-- **可访问性**：适当的 ARIA 标签和键盘导航
-
-## 使用示例
-
-### 产品搜索界面
-
-```svelte
-<script lang="ts">
-  import SearchBox from '@ticatec/uniface-element/SearchBox';
-
-  let searchQuery: string | null = null;
-  
-  // 模拟产品数据
-  let allProducts = [
-    { id: 1, name: '无线耳机', category: '电子产品', price: 899.99, brand: '音质科技' },
-    { id: 2, name: '智能手表', category: '电子产品', price: 2199.99, brand: '时间科技' },
-    { id: 3, name: '笔记本支架', category: '配件', price: 299.99, brand: '办公专家' },
-    { id: 4, name: 'USB-C 数据线', category: '配件', price: 99.99, brand: '连接助手' },
-    { id: 5, name: '蓝牙音箱', category: '电子产品', price: 499.99, brand: '声波制造' },
-    { id: 6, name: '手机保护套', category: '配件', price: 149.99, brand: '全方位保护' },
-    { id: 7, name: '无线充电器', category: '电子产品', price: 199.99, brand: '能量传输' }
-  ];
-
-  let filteredProducts = [];
-  let isSearching = false;
-
-  // 防抖搜索函数
-  let searchTimeout: number;
-
-  function performSearch(query: string | null) {
-    clearTimeout(searchTimeout);
-    isSearching = true;
-
-    searchTimeout = setTimeout(() => {
-      if (!query || query.trim() === '') {
-        filteredProducts = allProducts;
-      } else {
-        const searchTerm = query.toLowerCase().trim();
-        filteredProducts = allProducts.filter(product =>
-          product.name.toLowerCase().includes(searchTerm) ||
-          product.category.toLowerCase().includes(searchTerm) ||
-          product.brand.toLowerCase().includes(searchTerm)
-        );
-      }
-      isSearching = false;
-    }, 300); // 300ms 防抖延迟
-  }
-
-  // 初始加载
-  filteredProducts = allProducts;
-
-  // 响应式搜索
-  $: performSearch(searchQuery);
-
-  function clearSearch() {
-    searchQuery = null;
-  }
-
-  function handleProductClick(product) {
-    console.log('选中产品:', product);
-    alert(`选中：${product.name} - ¥${product.price}`);
-  }
-</script>
-
-<div class="product-search">
-  <header class="search-header">
-    <h2>产品目录</h2>
-    <p>搜索我们的产品库存</p>
-  </header>
-
-  <div class="search-controls">
-    <SearchBox
-      bind:value={searchQuery}
-      placeholder="搜索产品、分类或品牌..."
-      variant="outlined"
-      style="width: 100%; max-width: 500px;"
-    />
-    
-    {#if searchQuery}
-      <div class="search-info">
-        <span class="search-results">
-          {isSearching ? '搜索中...' : `找到 ${filteredProducts.length} 个产品`}
-        </span>
-        <button class="clear-search-btn" on:click={clearSearch}>
-          清除搜索
-        </button>
-      </div>
-    {/if}
-  </div>
-
-  <div class="products-grid">
-    {#if isSearching}
-      <div class="loading-state">
-        <div class="loading-spinner">🔍</div>
-        <p>正在搜索产品...</p>
-      </div>
-    {:else if filteredProducts.length > 0}
-      {#each filteredProducts as product}
-        <div 
-          class="product-card"
-          on:click={() => handleProductClick(product)}
-          tabindex="0"
-          role="button"
-        >
-          <div class="product-header">
-            <h3 class="product-name">{product.name}</h3>
-            <span class="product-price">¥{product.price}</span>
-          </div>
-          <div class="product-details">
-            <span class="product-category">{product.category}</span>
-            <span class="product-brand">{product.brand}</span>
-          </div>
-        </div>
-      {/each}
-    {:else}
-      <div class="no-results">
-        <div class="no-results-icon">🔍</div>
-        <h3>未找到产品</h3>
-        <p>无法找到与"{searchQuery}"匹配的产品</p>
-        <button class="reset-search-btn" on:click={clearSearch}>
-          查看所有产品
-        </button>
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>
-  .product-search {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
-  }
-
-  .search-header {
-    text-align: center;
-    margin-bottom: 30px;
-  }
-
-  .search-header h2 {
-    color: #333;
-    margin: 0 0 8px 0;
-  }
-
-  .search-header p {
-    color: #666;
-    margin: 0;
-  }
-
-  .search-controls {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    gap: 16px;
-    margin-bottom: 30px;
-  }
-
-  .search-info {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    font-size: 0.9rem;
-  }
-
-  .search-results {
-    color: #666;
-  }
-
-  .clear-search-btn {
-    padding: 4px 8px;
-    background: #f8f9fa;
-    border: 1px solid #dee2e6;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.8rem;
-  }
-
-  .clear-search-btn:hover {
-    background: #e9ecef;
-  }
-
-  .products-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    gap: 20px;
-    min-height: 200px;
-  }
-
-  .product-card {
-    background: white;
-    border: 1px solid #e9ecef;
-    border-radius: 8px;
-    padding: 20px;
-    cursor: pointer;
-    transition: all 0.2s;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  }
-
-  .product-card:hover,
-  .product-card:focus {
-    border-color: #007bff;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0,123,255,0.15);
-    outline: none;
-  }
-
-  .product-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 12px;
-  }
-
-  .product-name {
-    margin: 0;
-    color: #333;
-    font-size: 1.2rem;
-    font-weight: 600;
-  }
-
-  .product-price {
-    color: #007bff;
-    font-weight: 700;
-    font-size: 1.1rem;
-  }
-
-  .product-details {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .product-category {
-    background: #e9ecef;
-    color: #495057;
-    padding: 4px 8px;
-    border-radius: 12px;
-    font-size: 0.75rem;
-    font-weight: 500;
-  }
-
-  .product-brand {
-    color: #666;
-    font-size: 0.9rem;
-    font-style: italic;
-  }
-
-  .loading-state,
-  .no-results {
-    grid-column: 1 / -1;
-    text-align: center;
-    padding: 60px 20px;
-    color: #666;
-  }
-
-  .loading-spinner {
-    font-size: 3rem;
-    animation: pulse 1.5s infinite;
-  }
-
-  .no-results-icon {
-    font-size: 4rem;
-    opacity: 0.5;
-    margin-bottom: 16px;
-  }
-
-  .no-results h3 {
-    color: #333;
-    margin: 0 0 8px 0;
-  }
-
-  .no-results p {
-    margin: 0 0 20px 0;
-  }
-
-  .reset-search-btn {
-    padding: 8px 16px;
-    background: #007bff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.9rem;
-  }
-
-  .reset-search-btn:hover {
-    background: #0056b3;
-  }
-
-  @keyframes pulse {
-    0%, 100% { opacity: 1; }
-    50% { opacity: 0.5; }
-  }
-
-  @media (max-width: 768px) {
-    .products-grid {
-      grid-template-columns: 1fr;
-    }
-    
-    .product-header {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 8px;
-    }
-    
-    .product-details {
-      flex-direction: column;
-      align-items: flex-start;
-      gap: 8px;
-    }
-  }
-</style>
-```
-
-### 用户目录搜索
-
-```svelte
-<script lang="ts">
-  import SearchBox from '@ticatec/uniface-element/SearchBox';
-
-  let searchQuery: string | null = null;
-  let searchBoxRef: any;
-
-  // 模拟用户数据
-  let allUsers = [
-    { id: 1, name: '张小明', email: 'zhangxiaoming@company.com', department: '工程部', role: '高级开发工程师', status: '在职' },
-    { id: 2, name: '李小红', email: 'lixiaohong@company.com', department: '市场部', role: '市场经理', status: '在职' },
-    { id: 3, name: '王小刚', email: 'wangxiaogang@company.com', department: '销售部', role: '销售代表', status: '请假' },
-    { id: 4, name: '赵小丽', email: 'zhaoxiaoli@company.com', department: '人事部', role: '人事专员', status: '在职' },
-    { id: 5, name: '陈小华', email: 'chenxiaohua@company.com', department: '工程部', role: '技术主管', status: '远程' },
-    { id: 6, name: '孙小强', email: 'sunxiaoqiang@company.com', department: '财务部', role: '会计', status: '在职' }
-  ];
-
-  let filteredUsers = [];
-  let selectedUser = null;
-  let searchMode = 'all'; // 'all', 'name', 'email', 'department'
-
-  function performUserSearch(query: string | null) {
-    if (!query || query.trim() === '') {
-      filteredUsers = allUsers;
-      return;
-    }
-
-    const searchTerm = query.toLowerCase().trim();
-    filteredUsers = allUsers.filter(user => {
-      switch (searchMode) {
-        case 'name':
-          return user.name.toLowerCase().includes(searchTerm);
-        case 'email':
-          return user.email.toLowerCase().includes(searchTerm);
-        case 'department':
-          return user.department.toLowerCase().includes(searchTerm);
-        default: // 'all'
-          return user.name.toLowerCase().includes(searchTerm) ||
-                 user.email.toLowerCase().includes(searchTerm) ||
-                 user.department.toLowerCase().includes(searchTerm) ||
-                 user.role.toLowerCase().includes(searchTerm);
-      }
-    });
-  }
-
-  // 初始加载
-  filteredUsers = allUsers;
-
-  // 响应式搜索
-  $: performUserSearch(searchQuery);
-
-  function selectUser(user) {
-    selectedUser = user;
-  }
-
-  function focusSearch() {
-    searchBoxRef?.focus();
-  }
-
-  function resetSearch() {
-    searchQuery = null;
-    selectedUser = null;
-    searchMode = 'all';
-  }
-
-  // 搜索键盘快捷键
-  function handleKeydown(event) {
-    if (event.ctrlKey && event.key === 'k') {
-      event.preventDefault();
-      focusSearch();
-    }
-  }
-</script>
-
-<svelte:window on:keydown={handleKeydown} />
-
-<div class="user-directory">
-  <header class="directory-header">
-    <h2>员工目录</h2>
-    <p>搜索和浏览公司员工</p>
-    <div class="keyboard-hint">
-      <kbd>Ctrl</kbd> + <kbd>K</kbd> 聚焦搜索
-    </div>
-  </header>
-
-  <div class="search-section">
-    <div class="search-input-container">
-      <SearchBox
-        bind:this={searchBoxRef}
-        bind:value={searchQuery}
-        placeholder="搜索员工..."
-        variant="outlined"
-        style="width: 100%;"
-      />
-    </div>
-
-    <div class="search-options">
-      <label>搜索范围：</label>
-      <select bind:value={searchMode} class="search-mode-select">
-        <option value="all">所有字段</option>
-        <option value="name">仅姓名</option>
-        <option value="email">仅邮箱</option>
-        <option value="department">仅部门</option>
-      </select>
-      
-      {#if searchQuery || selectedUser}
-        <button class="reset-btn" on:click={resetSearch}>重置</button>
-      {/if}
-    </div>
-  </div>
-
-  <div class="directory-content">
-    <div class="users-list">
-      <div class="list-header">
-        <h3>搜索结果</h3>
-        <span class="result-count">{filteredUsers.length} 名用户</span>
-      </div>
-
-      <div class="users-grid">
-        {#each filteredUsers as user}
-          <div 
-            class="user-card" 
-            class:selected={selectedUser?.id === user.id}
-            on:click={() => selectUser(user)}
-            tabindex="0"
-            role="button"
-          >
-            <div class="user-avatar">
-              {user.name.substring(0, 2)}
-            </div>
-            <div class="user-info">
-              <div class="user-name">{user.name}</div>
-              <div class="user-email">{user.email}</div>
-              <div class="user-role">{user.role}</div>
-              <div class="user-department">{user.department}</div>
-            </div>
-            <div class="user-status">
-              <span class="status-badge status-{user.status.replace(' ', '-')}">{user.status}</span>
-            </div>
-          </div>
-        {/each}
-
-        {#if filteredUsers.length === 0}
-          <div class="no-users-found">
-            <h4>未找到员工</h4>
-            <p>
-              {#if searchQuery}
-                没有员工匹配您的搜索条件"{searchQuery}"
-              {:else}
-                目录中没有员工
-              {/if}
-            </p>
-            {#if searchQuery}
-              <button class="clear-search-btn" on:click={() => searchQuery = null}>清除搜索</button>
-            {/if}
-          </div>
-        {/if}
-      </div>
-    </div>
-
-    {#if selectedUser}
-      <div class="user-details">
-        <div class="details-header">
-          <h3>员工详情</h3>
-          <button class="close-details-btn" on:click={() => selectedUser = null}>×</button>
-        </div>
-        
-        <div class="details-content">
-          <div class="detail-avatar">
-            {selectedUser.name.substring(0, 2)}
-          </div>
-          
-          <div class="detail-info">
-            <h4>{selectedUser.name}</h4>
-            <div class="detail-row">
-              <span class="detail-label">邮箱：</span>
-              <span class="detail-value">
-                <a href="mailto:{selectedUser.email}">{selectedUser.email}</a>
-              </span>
-            </div>
-            <div class="detail-row">
-              <span class="detail-label">职位：</span>
-              <span class="detail-value">{selectedUser.role}</span>
-            </div>
-            <div class="detail-row">
-              <span class="detail-label">部门：</span>
-              <span class="detail-value">{selectedUser.department}</span>
-            </div>
-            <div class="detail-row">
-              <span class="detail-label">状态：</span>
-              <span class="detail-value">
-                <span class="status-badge status-{selectedUser.status.replace(' ', '-')}">{selectedUser.status}</span>
-              </span>
-            </div>
-          </div>
-          
-          <div class="detail-actions">
-            <button class="action-btn primary">发送消息</button>
-            <button class="action-btn secondary">查看资料</button>
-            <button class="action-btn secondary">安排会议</button>
-          </div>
-        </div>
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>
-  .user-directory {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 20px;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .directory-header {
-    text-align: center;
-    margin-bottom: 30px;
-  }
-
-  .directory-header h2 {
-    color: #333;
-    margin: 0 0 8px 0;
-  }
-
-  .directory-header p {
-    color: #666;
-    margin: 0 0 12px 0;
-  }
-
-  .keyboard-hint {
-    font-size: 0.8rem;
-    color: #888;
-  }
-
-  .keyboard-hint kbd {
-    background: #f8f9fa;
-    border: 1px solid #dee2e6;
-    border-radius: 3px;
-    padding: 2px 6px;
-    font-size: 0.7rem;
-  }
-
-  .search-section {
-    margin-bottom: 30px;
-  }
-
-  .search-input-container {
-    max-width: 600px;
-    margin: 0 auto 16px;
-  }
-
-  .search-options {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 16px;
-    font-size: 0.9rem;
-  }
-
-  .search-mode-select {
-    padding: 4px 8px;
-    border: 1px solid #dee2e6;
-    border-radius: 4px;
-    background: white;
-  }
-
-  .reset-btn {
-    padding: 4px 12px;
-    background: #6c757d;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.8rem;
-  }
-
-  .reset-btn:hover {
-    background: #5a6268;
-  }
-
-  .directory-content {
-    flex: 1;
-    display: flex;
-    gap: 20px;
-    min-height: 0;
-  }
-
-  .users-list {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-  }
-
-  .list-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 16px;
-    padding-bottom: 8px;
-    border-bottom: 2px solid #e9ecef;
-  }
-
-  .list-header h3 {
-    margin: 0;
-    color: #333;
-  }
-
-  .result-count {
-    color: #666;
-    font-size: 0.9rem;
-  }
-
-  .users-grid {
-    flex: 1;
-    overflow-y: auto;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-    gap: 16px;
-    padding-right: 8px;
-  }
-
-  .user-card {
-    background: white;
-    border: 2px solid #e9ecef;
-    border-radius: 8px;
-    padding: 16px;
-    cursor: pointer;
-    transition: all 0.2s;
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    height: fit-content;
-  }
-
-  .user-card:hover,
-  .user-card:focus {
-    border-color: #007bff;
-    box-shadow: 0 2px 4px rgba(0,123,255,0.15);
-    outline: none;
-  }
-
-  .user-card.selected {
-    border-color: #007bff;
-    background: #f0f8ff;
-  }
-
-  .user-avatar {
-    width: 48px;
-    height: 48px;
-    border-radius: 50%;
-    background: #007bff;
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 600;
-    font-size: 1.1rem;
-    flex-shrink: 0;
-  }
-
-  .user-info {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .user-name {
-    font-weight: 600;
-    color: #333;
-    margin-bottom: 4px;
-  }
-
-  .user-email {
-    color: #666;
-    font-size: 0.9rem;
-    margin-bottom: 4px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .user-role {
-    color: #495057;
-    font-size: 0.85rem;
-    font-weight: 500;
-  }
-
-  .user-department {
-    color: #6c757d;
-    font-size: 0.8rem;
-  }
-
-  .status-badge {
-    padding: 3px 8px;
-    border-radius: 12px;
-    font-size: 0.7rem;
-    font-weight: 500;
-    text-transform: uppercase;
-  }
-
-  .status-在职 {
-    background: #d4edda;
-    color: #155724;
-  }
-
-  .status-远程 {
-    background: #cce5ff;
-    color: #004085;
-  }
-
-  .status-请假 {
-    background: #fff3cd;
-    color: #856404;
-  }
-
-  .no-users-found {
-    grid-column: 1 / -1;
-    text-align: center;
-    padding: 60px 20px;
-    color: #666;
-  }
-
-  .no-users-found h4 {
-    color: #333;
-    margin: 0 0 8px 0;
-  }
-
-  .clear-search-btn {
-    margin-top: 16px;
-    padding: 8px 16px;
-    background: #007bff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-
-  .clear-search-btn:hover {
-    background: #0056b3;
-  }
-
-  .user-details {
-    width: 400px;
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-    display: flex;
-    flex-direction: column;
-    max-height: 600px;
-  }
-
-  .details-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 20px 20px 0;
-  }
-
-  .details-header h3 {
-    margin: 0;
-    color: #333;
-  }
-
-  .close-details-btn {
-    background: none;
-    border: none;
-    font-size: 24px;
-    cursor: pointer;
-    color: #666;
-    padding: 0;
-    width: 30px;
-    height: 30px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .close-details-btn:hover {
-    color: #333;
-    background: #f8f9fa;
-    border-radius: 50%;
-  }
-
-  .details-content {
-    padding: 20px;
-    flex: 1;
-    overflow-y: auto;
-  }
-
-  .detail-avatar {
-    width: 80px;
-    height: 80px;
-    border-radius: 50%;
-    background: #007bff;
-    color: white;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-weight: 600;
-    font-size: 1.8rem;
-    margin: 0 auto 20px;
-  }
-
-  .detail-info h4 {
-    text-align: center;
-    color: #333;
-    margin: 0 0 20px 0;
-    font-size: 1.3rem;
-  }
-
-  .detail-row {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 12px 0;
-    border-bottom: 1px solid #f0f0f0;
-  }
-
-  .detail-label {
-    font-weight: 500;
-    color: #555;
-  }
-
-  .detail-value a {
-    color: #007bff;
-    text-decoration: none;
-  }
-
-  .detail-value a:hover {
-    text-decoration: underline;
-  }
-
-  .detail-actions {
-    margin-top: 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .action-btn {
-    padding: 8px 16px;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.9rem;
-    font-weight: 500;
-  }
-
-  .action-btn.primary {
-    background: #007bff;
-    color: white;
-  }
-
-  .action-btn.primary:hover {
-    background: #0056b3;
-  }
-
-  .action-btn.secondary {
-    background: #f8f9fa;
-    color: #495057;
-    border: 1px solid #dee2e6;
-  }
-
-  .action-btn.secondary:hover {
-    background: #e9ecef;
-  }
-
-  @media (max-width: 768px) {
-    .directory-content {
-      flex-direction: column;
-    }
-    
-    .user-details {
-      width: 100%;
-    }
-    
-    .users-grid {
-      grid-template-columns: 1fr;
-    }
-    
-    .search-options {
-      flex-direction: column;
-      gap: 8px;
-    }
-  }
-</style>
-```
-
-### 多搜索框高级过滤
-
-```svelte
-<script lang="ts">
-  import SearchBox from '@ticatec/uniface-element/SearchBox';
-
-  // 多个搜索条件
-  let titleSearch: string | null = null;
-  let authorSearch: string | null = null;
-  let tagSearch: string | null = null;
-
-  // 模拟文章数据
-  let allArticles = [
-    {
-      id: 1,
-      title: 'Svelte 入门指南',
-      author: '张开发',
-      category: '教程',
-      tags: ['svelte', 'javascript', '前端'],
-      publishDate: '2024-03-01',
-      readTime: 8,
-      excerpt: '学习 Svelte 框架的基础知识并构建您的第一个应用程序。'
-    },
-    {
-      id: 2,
-      title: '高级 TypeScript 模式',
-      author: '李程序员',
-      category: '高级',
-      tags: ['typescript', '模式', '高级'],
-      publishDate: '2024-02-28',
-      readTime: 12,
-      excerpt: '探索高级 TypeScript 模式以更好地组织代码。'
-    },
-    {
-      id: 3,
-      title: 'CSS 网格布局指南',
-      author: '王设计师',
-      category: 'CSS',
-      tags: ['css', '网格', '布局', '响应式'],
-      publishDate: '2024-03-05',
-      readTime: 6,
-      excerpt: '掌握 CSS 网格布局以实现现代响应式布局。'
-    },
-    {
-      id: 4,
-      title: '数据库优化技巧',
-      author: '赵管理员',
-      category: '后端',
-      tags: ['数据库', '优化', '性能'],
-      publishDate: '2024-02-25',
-      readTime: 15,
-      excerpt: '使用这些优化技术提高数据库性能。'
-    },
-    {
-      id: 5,
-      title: 'React vs Svelte 对比',
-      author: '陈框架师',
-      category: '对比',
-      tags: ['react', 'svelte', '对比', '前端'],
-      publishDate: '2024-03-03',
-      readTime: 10,
-      excerpt: 'React 和 Svelte 框架之间的详细对比。'
-    }
-  ];
-
-  let filteredArticles = [];
-  let activeFiltersCount = 0;
-
-  function performSearch() {
-    let results = allArticles;
-
-    // 按标题过滤
-    if (titleSearch && titleSearch.trim()) {
-      const titleTerm = titleSearch.toLowerCase().trim();
-      results = results.filter(article =>
-        article.title.toLowerCase().includes(titleTerm)
-      );
-    }
-
-    // 按作者过滤
-    if (authorSearch && authorSearch.trim()) {
-      const authorTerm = authorSearch.toLowerCase().trim();
-      results = results.filter(article =>
-        article.author.toLowerCase().includes(authorTerm)
-      );
-    }
-
-    // 按标签过滤
-    if (tagSearch && tagSearch.trim()) {
-      const tagTerm = tagSearch.toLowerCase().trim();
-      results = results.filter(article =>
-        article.tags.some(tag => tag.toLowerCase().includes(tagTerm)) ||
-        article.category.toLowerCase().includes(tagTerm)
-      );
-    }
-
-    filteredArticles = results;
-
-    // 统计活跃过滤器
-    activeFiltersCount = [titleSearch, authorSearch, tagSearch]
-      .filter(search => search && search.trim()).length;
-  }
-
-  // 初始加载
-  filteredArticles = allArticles;
-
-  // 响应式搜索
-  $: {
-    titleSearch, authorSearch, tagSearch;
-    performSearch();
-  }
-
-  function clearAllFilters() {
-    titleSearch = null;
-    authorSearch = null;
-    tagSearch = null;
-  }
-
-  function readArticle(article) {
-    console.log('阅读文章:', article.title);
-    alert(`打开：${article.title}\n作者 ${article.author} • ${article.readTime} 分钟阅读`);
-  }
-
-  // 获取独特的作者和标签以提供建议
-  const allAuthors = [...new Set(allArticles.map(a => a.author))];
-  const allTags = [...new Set(allArticles.flatMap(a => a.tags))];
-  const allCategories = [...new Set(allArticles.map(a => a.category))];
-</script>
-
-<div class="article-search">
-  <header class="search-header">
-    <h2>文章库</h2>
-    <p>搜索和过滤我们的知识库</p>
-  </header>
-
-  <div class="search-filters">
-    <div class="filter-row">
-      <div class="filter-group">
-        <label>按标题搜索</label>
-        <SearchBox
-          bind:value={titleSearch}
-          placeholder="输入文章标题..."
-          variant="outlined"
-          compact={true}
-        />
-      </div>
-
-      <div class="filter-group">
-        <label>按作者搜索</label>
-        <SearchBox
-          bind:value={authorSearch}
-          placeholder="输入作者姓名..."
-          variant="outlined"
-          compact={true}
-        />
-      </div>
-
-      <div class="filter-group">
-        <label>按标签/分类搜索</label>
-        <SearchBox
-          bind:value={tagSearch}
-          placeholder="输入标签或分类..."
-          variant="outlined"
-          compact={true}
-        />
-      </div>
-    </div>
-
-    <div class="filter-actions">
-      <div class="filter-info">
-        {#if activeFiltersCount > 0}
-          <span class="active-filters">{activeFiltersCount} 个过滤器生效</span>
-          <button class="clear-all-btn" on:click={clearAllFilters}>清除所有</button>
-        {:else}
-          <span class="no-filters">未应用过滤器</span>
-        {/if}
-      </div>
-
-      <div class="results-info">
-        <span class="result-count">找到 {filteredArticles.length} 篇文章</span>
-      </div>
-    </div>
-
-    <!-- 快速过滤建议 -->
-    <div class="quick-suggestions">
-      <div class="suggestion-group">
-        <span class="suggestion-label">热门作者：</span>
-        {#each allAuthors.slice(0, 3) as author}
-          <button 
-            class="suggestion-btn" 
-            on:click={() => authorSearch = author}
-            class:active={authorSearch === author}
-          >
-            {author}
-          </button>
-        {/each}
-      </div>
-
-      <div class="suggestion-group">
-        <span class="suggestion-label">热门标签：</span>
-        {#each allTags.slice(0, 5) as tag}
-          <button 
-            class="suggestion-btn" 
-            on:click={() => tagSearch = tag}
-            class:active={tagSearch === tag}
-          >
-            #{tag}
-          </button>
-        {/each}
-      </div>
-    </div>
-  </div>
-
-  <div class="articles-section">
-    {#if filteredArticles.length > 0}
-      <div class="articles-grid">
-        {#each filteredArticles as article}
-          <div class="article-card" on:click={() => readArticle(article)}>
-            <div class="article-header">
-              <h3 class="article-title">{article.title}</h3>
-              <span class="article-category">{article.category}</span>
-            </div>
-            
-            <div class="article-meta">
-              <span class="article-author">作者 {article.author}</span>
-              <span class="article-date">{new Date(article.publishDate).toLocaleDateString()}</span>
-              <span class="article-read-time">{article.readTime} 分钟阅读</span>
-            </div>
-            
-            <p class="article-excerpt">{article.excerpt}</p>
-            
-            <div class="article-tags">
-              {#each article.tags as tag}
-                <span class="tag">#{tag}</span>
-              {/each}
-            </div>
-          </div>
-        {/each}
-      </div>
-    {:else}
-      <div class="no-articles">
-        <div class="no-articles-icon">📚</div>
-        <h3>未找到文章</h3>
-        <p>
-          {#if activeFiltersCount > 0}
-            没有文章匹配您当前的搜索条件。
-            <br>尝试调整您的过滤器或清除一些搜索条件。
-          {:else}
-            库中没有可用的文章。
-          {/if}
-        </p>
-        {#if activeFiltersCount > 0}
-          <button class="reset-btn" on:click={clearAllFilters}>清除所有过滤器</button>
-        {/if}
-      </div>
-    {/if}
-  </div>
-</div>
-
-<style>
-  .article-search {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 20px;
-  }
-
-  .search-header {
-    text-align: center;
-    margin-bottom: 30px;
-  }
-
-  .search-header h2 {
-    color: #333;
-    margin: 0 0 8px 0;
-  }
-
-  .search-header p {
-    color: #666;
-    margin: 0;
-  }
-
-  .search-filters {
-    background: #f8f9fa;
-    padding: 25px;
-    border-radius: 8px;
-    margin-bottom: 30px;
-  }
-
-  .filter-row {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-    gap: 20px;
-    margin-bottom: 20px;
-  }
-
-  .filter-group {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-  }
-
-  .filter-group label {
-    font-weight: 500;
-    color: #333;
-    font-size: 0.9rem;
-  }
-
-  .filter-actions {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 20px;
-    padding-bottom: 15px;
-    border-bottom: 1px solid #dee2e6;
-  }
-
-  .filter-info {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-  }
-
-  .active-filters {
-    color: #007bff;
-    font-weight: 500;
-  }
-
-  .no-filters {
-    color: #666;
-  }
-
-  .clear-all-btn {
-    padding: 4px 8px;
-    background: #dc3545;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-    font-size: 0.8rem;
-  }
-
-  .clear-all-btn:hover {
-    background: #c82333;
-  }
-
-  .result-count {
-    color: #495057;
-    font-weight: 500;
-  }
-
-  .quick-suggestions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-  }
-
-  .suggestion-group {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    flex-wrap: wrap;
-  }
-
-  .suggestion-label {
-    color: #666;
-    font-size: 0.85rem;
-    font-weight: 500;
-  }
-
-  .suggestion-btn {
-    padding: 4px 8px;
-    background: white;
-    border: 1px solid #dee2e6;
-    border-radius: 12px;
-    cursor: pointer;
-    font-size: 0.75rem;
-    transition: all 0.2s;
-  }
-
-  .suggestion-btn:hover {
-    border-color: #007bff;
-    color: #007bff;
-  }
-
-  .suggestion-btn.active {
-    background: #007bff;
-    color: white;
-    border-color: #007bff;
-  }
-
-  .articles-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
-    gap: 24px;
-  }
-
-  .article-card {
-    background: white;
-    border: 1px solid #e9ecef;
-    border-radius: 8px;
-    padding: 20px;
-    cursor: pointer;
-    transition: all 0.2s;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-  }
-
-  .article-card:hover {
-    border-color: #007bff;
-    transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(0,123,255,0.15);
-  }
-
-  .article-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-    margin-bottom: 12px;
-  }
-
-  .article-title {
-    margin: 0;
-    color: #333;
-    font-size: 1.2rem;
-    font-weight: 600;
-    line-height: 1.3;
-  }
-
-  .article-category {
-    background: #e9ecef;
-    color: #495057;
-    padding: 4px 8px;
-    border-radius: 12px;
-    font-size: 0.7rem;
-    font-weight: 500;
-    text-transform: uppercase;
-    flex-shrink: 0;
-    margin-left: 12px;
-  }
-
-  .article-meta {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 12px;
-    margin-bottom: 12px;
-    font-size: 0.85rem;
-    color: #666;
-  }
-
-  .article-author {
-    font-weight: 500;
-  }
-
-  .article-excerpt {
-    color: #555;
-    line-height: 1.5;
-    margin: 0 0 16px 0;
-  }
-
-  .article-tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 6px;
-  }
-
-  .tag {
-    background: #f8f9fa;
-    color: #495057;
-    padding: 3px 8px;
-    border-radius: 10px;
-    font-size: 0.7rem;
-    border: 1px solid #e9ecef;
-  }
-
-  .no-articles {
-    text-align: center;
-    padding: 80px 20px;
-    color: #666;
-  }
-
-  .no-articles-icon {
-    font-size: 4rem;
-    opacity: 0.5;
-    margin-bottom: 16px;
-  }
-
-  .no-articles h3 {
-    color: #333;
-    margin: 0 0 12px 0;
-  }
-
-  .no-articles p {
-    margin: 0 0 20px 0;
-    line-height: 1.6;
-  }
-
-  .reset-btn {
-    padding: 10px 20px;
-    background: #007bff;
-    color: white;
-    border: none;
-    border-radius: 4px;
-    cursor: pointer;
-  }
-
-  .reset-btn:hover {
-    background: #0056b3;
-  }
-
-  @media (max-width: 768px) {
-    .filter-row {
-      grid-template-columns: 1fr;
-    }
-    
-    .filter-actions {
-      flex-direction: column;
-      gap: 12px;
-      align-items: stretch;
-    }
-    
-    .quick-suggestions {
-      flex-direction: column;
-    }
-    
-    .articles-grid {
-      grid-template-columns: 1fr;
-    }
-    
-    .article-header {
-      flex-direction: column;
-      gap: 8px;
-    }
-    
-    .article-category {
-      align-self: flex-start;
-      margin-left: 0;
-    }
-  }
-</style>
-```
-
-## 样式
-
-SearchBox 组件使用以下 CSS 类：
-
-```css
-.uniface-common-editor {
-  /* 主输入容器 */
-  position: relative;
-}
-
-.uniface-common-editor .leading-icon {
-  /* 搜索图标容器 */
-  display: flex;
-  align-items: center;
-  padding: 0 8px;
-  color: var(--uniface-editor-icon-color, #6c757d);
-}
-
-.uniface-common-editor .action-icon {
-  /* 清除按钮样式 */
-  cursor: pointer;
-  opacity: 0.6;
-  transition: opacity 0.2s;
-}
-
-.uniface-common-editor .action-icon:hover {
-  opacity: 1;
-}
-```
-
-## API 参考
-
-### SearchBox 组件属性
-
-```typescript
-interface SearchBoxProps {
-  variant?: '' | 'plain' | 'outlined' | 'filled';  // 视觉样式变体
-  compact?: boolean;                                // 紧凑布局模式
-  style?: string;                                   // 自定义内联样式
-  value: string | null;                             // 搜索文本值
-  disabled?: boolean;                               // 禁用输入
-  onChange?: OnChangeHandler<string | null>;        // 变更事件处理器
-  placeholder?: string | null;                      // 占位符文本
-}
-```
-
-### 方法
-
-```typescript
-interface SearchBox {
-  focus(): void;  // 以编程方式聚焦输入框
-}
-```
-
-## 最佳实践
-
-1. **防抖处理** - 实现防抖搜索以避免过多的 API 调用
-2. **加载状态** - 在搜索操作期间显示加载指示器
-3. **空状态** - 在没有找到结果时提供有用的消息
-4. **键盘导航** - 支持搜索焦点的键盘快捷键
-5. **搜索范围** - 清楚地表明正在搜索哪些字段
-6. **清除功能** - 始终提供清除搜索的简单方法
-7. **移动端用户体验** - 确保在移动设备上的触摸友好交互
-8. **性能** - 为大数据集优化搜索算法
-9. **可访问性** - 提供适当的 ARIA 标签和屏幕阅读器支持
-10. **视觉反馈** - 尽可能在搜索结果中突出显示匹配条件