# Button 组件

一个多功能的按钮组件，支持多种变体、尺寸和类型，具备图标支持、自定义样式和全面的事件处理。

## 功能特性

- **多种类型**: 默认、主要、次要、第三级和第四级按钮样式
- **尺寸选项**: 大、中、小三种尺寸
- **图标支持**: 可选图标显示，位置灵活
- **变体样式**: 平面和圆角变体
- **事件处理**: 支持点击、聚焦和失焦事件
- **无障碍访问**: 使用语义化按钮元素，支持禁用状态
- **防抖保护**: 内置点击防抖，防止快速重复触发
- **自定义样式**: 灵活的样式定制

## 基本用法

```svelte
<script>
import Button from '@ticatec/uniface-element/Button';

const handleClick = (event) => {
  console.log('按钮被点击!', event);
};
</script>

<Button 
  label="点击我" 
  onclick={handleClick} 
/>
```

## 属性参数

| 属性 | 类型 | 默认值 | 描述 |
|------|------|---------|-------------|
| `type` | `ButtonType` | `'default'` | 按钮类型（default、primary、secondary、third、forth） |
| `label` | `string` | `''` | 按钮文本标签 |
| `variant` | `'plain' \| 'round' \| ''` | `''` | 按钮变体样式 |
| `disabled` | `boolean` | `false` | 是否禁用按钮 |
| `style` | `string` | `''` | 自定义CSS样式 |
| `size` | `'big' \| 'medium' \| 'mini'` | `'medium'` | 按钮尺寸 |
| `onclick` | `(event: MouseEvent) => void` | - | 点击事件处理器 |
| `onfocus` | `(event: FocusEvent) => void` | `() => {}` | 聚焦事件处理器 |
| `onblur` | `(event: FocusEvent) => void` | `() => {}` | 失焦事件处理器 |
| `icon` | `string \| null` | `null` | 图标类名 |

## 按钮类型

```svelte
<!-- 默认按钮 -->
<Button label="默认" type="default" onclick={handleClick} />

<!-- 主要按钮 -->
<Button label="主要" type="primary" onclick={handleClick} />

<!-- 次要按钮 -->
<Button label="次要" type="secondary" onclick={handleClick} />

<!-- 第三级按钮 -->
<Button label="第三级" type="third" onclick={handleClick} />

<!-- 第四级按钮 -->
<Button label="第四级" type="forth" onclick={handleClick} />
```

## 按钮尺寸

```svelte
<!-- 小型按钮 -->
<Button label="小型" size="mini" onclick={handleClick} />

<!-- 中型按钮（默认） -->
<Button label="中型" size="medium" onclick={handleClick} />

<!-- 大型按钮 -->
<Button label="大型" size="big" onclick={handleClick} />
```

## 按钮变体

```svelte
<!-- 平面变体 -->
<Button label="平面" variant="plain" onclick={handleClick} />

<!-- 圆角变体 -->
<Button label="圆角" variant="round" onclick={handleClick} />
```

## 带图标

```svelte
<!-- 带图标的按钮 -->
<Button 
  label="保存" 
  icon="fas fa-save" 
  onclick={handleSave} 
/>

<!-- 仅图标（使用空标签） -->
<Button 
  icon="fas fa-plus" 
  onclick={handleAdd} 
/>
```

## 事件处理

```svelte
<script>
const handleClick = (event) => {
  console.log('按钮被点击:', event);
};

const handleFocus = (event) => {
  console.log('按钮获得焦点:', event);
  // 显示工具提示或高亮
};

const handleBlur = (event) => {
  console.log('按钮失去焦点:', event);
  // 隐藏工具提示或移除高亮
};
</script>

<Button 
  label="交互按钮"
  onclick={handleClick}
  onfocus={handleFocus}
  onblur={handleBlur}
/>
```

## 禁用状态

```svelte
<Button 
  label="禁用按钮" 
  disabled={true}
  onclick={handleClick} 
/>
```

## 自定义样式

```svelte
<Button 
  label="自定义样式"
  style="background: linear-gradient(45deg, #ff6b6b, #4ecdc4); color: white; border: none;"
  onclick={handleClick}
/>
```

## 高级示例

### 表单提交按钮

```svelte
<script>
let isSubmitting = false;

const handleSubmit = async (event) => {
  isSubmitting = true;
  try {
    await submitForm();
    console.log('表单提交成功');
  } catch (error) {
    console.error('提交失败:', error);
  } finally {
    isSubmitting = false;
  }
};
</script>

<Button 
  label={isSubmitting ? "提交中..." : "提交"}
  type="primary"
  disabled={isSubmitting}
  icon={isSubmitting ? "fas fa-spinner fa-spin" : "fas fa-check"}
  onclick={handleSubmit}
/>
```

### 确认操作按钮

```svelte
<script>
let showConfirm = false;

const handleDelete = (event) => {
  if (!showConfirm) {
    showConfirm = true;
    setTimeout(() => showConfirm = false, 3000);
    return;
  }
  
  // 执行删除操作
  deleteItem();
  showConfirm = false;
};
</script>

<Button 
  label={showConfirm ? "确认删除？" : "删除"}
  type={showConfirm ? "primary" : "secondary"}
  icon="fas fa-trash"
  onclick={handleDelete}
  style={showConfirm ? "background-color: #dc3545;" : ""}
/>
```

### 导航按钮

```svelte
<script>
import { goto } from '$app/navigation';

const navigateToPage = (event) => {
  goto('/dashboard');
};
</script>

<Button 
  label="前往仪表板"
  type="primary"
  icon="fas fa-arrow-right"
  onclick={navigateToPage}
/>
```

### 按钮组

```svelte
<div class="button-group">
  <Button label="保存" type="primary" onclick={handleSave} />
  <Button label="取消" type="secondary" onclick={handleCancel} />
  <Button label="重置" type="third" onclick={handleReset} />
</div>

<style>
  .button-group {
    display: flex;
    gap: 8px;
    align-items: center;
  }
</style>
```

### 加载按钮

```svelte
<script>
let loading = false;

const handleAsyncAction = async (event) => {
  loading = true;
  try {
    await performAsyncOperation();
  } finally {
    loading = false;
  }
};
</script>

<Button 
  label={loading ? "加载中..." : "开始处理"}
  disabled={loading}
  icon={loading ? "fas fa-spinner fa-spin" : "fas fa-play"}
  onclick={handleAsyncAction}
/>
```

## 插槽用法

```svelte
<!-- 自定义内容替代标签 -->
<Button onclick={handleClick}>
  <div class="custom-content">
    <i class="fas fa-star"></i>
    <span>自定义内容</span>
    <span class="badge">新</span>
  </div>
</Button>
```

## 无障碍访问

Button组件遵循无障碍访问最佳实践：

- 使用语义化的`<button>`元素
- 支持键盘导航（Tab、Enter、Space键）
- 正确的禁用状态处理
- 为屏幕阅读器提供聚焦和失焦事件
- 需要时提供ARIA属性

```svelte
<!-- 带ARIA标签的无障碍按钮 -->
<Button 
  icon="fas fa-search"
  onclick={handleSearch}
  style="aria-label: 搜索产品"
/>
```

## 样式定制

组件使用以下CSS类：

- `.uniface-button` - 基础按钮类
- `.common-button` - 通用按钮样式
- `.{variant}` - 变体特定样式（plain、round）
- `.{size}` - 尺寸特定样式（big、medium、mini）
- `.{type}` - 类型特定样式（default、primary等）
- `.disabled` - 禁用状态样式

### CSS示例

```css
.uniface-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.uniface-button:hover:not(.disabled) {
  background: #f5f5f5;
}

.uniface-button:focus {
  outline: 2px solid #007acc;
  outline-offset: 2px;
}

.uniface-button.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.uniface-button.primary {
  background: #007acc;
  color: white;
  border-color: #007acc;
}

.uniface-button.round {
  border-radius: 20px;
}

.uniface-button.big {
  padding: 12px 24px;
  font-size: 16px;
}

.uniface-button.mini {
  padding: 4px 8px;
  font-size: 12px;
}
```

## 最佳实践

1. **一致的样式**: 在应用程序中一致地使用相同的按钮类型
2. **清晰的标签**: 提供清楚表明操作的描述性标签
3. **适当的类型**: 主要操作使用primary，辅助操作使用secondary
4. **加载状态**: 为异步操作显示加载指示器
5. **键盘导航**: 确保按钮可通过键盘访问
6. **图标使用**: 使用图标增强理解，而非替代清晰的文本
7. **防抖功能**: 组件包含内置防抖以防止意外双击

## 常见模式

### 模态框操作

```svelte
<div class="modal-actions">
  <Button 
    label="取消" 
    type="secondary" 
    onclick={closeModal} 
  />
  <Button 
    label="确认" 
    type="primary" 
    onclick={confirmAction} 
  />
</div>
```

### 工具栏操作

```svelte
<div class="toolbar">
  <Button icon="fas fa-bold" variant="plain" onclick={toggleBold} />
  <Button icon="fas fa-italic" variant="plain" onclick={toggleItalic} />
  <Button icon="fas fa-underline" variant="plain" onclick={toggleUnderline} />
</div>
```

### 表单操作

```svelte
<div class="form-actions">
  <Button label="重置" type="third" onclick={resetForm} />
  <Button label="保存草稿" type="secondary" onclick={saveDraft} />
  <Button label="提交" type="primary" onclick={submitForm} />
</div>
```

## 浏览器支持

Button组件在支持以下特性的所有现代浏览器中工作：
- ES6+ JavaScript
- CSS Flexbox
- 语义化按钮元素

## 性能

- 内置点击防抖防止快速点击导致的性能问题
- 轻量级实现，最小化重新渲染
- 高效的事件处理和适当的清理