# TextButton 组件

`TextButton` 组件针对纯文本按钮进行了优化，采用最小化样式。

## 基础用法

```svelte
<script lang="ts">
  import TextButton from '@ticatec/uniface-element/TextButton';
  
  const handleCancel = async (event: MouseEvent) => {
    // 处理取消操作
  };
</script>

<TextButton 
  label="取消"
  type="secondary"
  onClick={handleCancel}
/>
```

## 使用示例

```svelte
<script lang="ts">
  import TextButton from '@ticatec/uniface-element/TextButton';
  
  const actions = {
    save: async () => { /* 保存逻辑 */ },
    delete: async () => { /* 删除逻辑 */ },
    cancel: async () => { /* 取消逻辑 */ }
  };
</script>

<!-- 不同按钮类型 -->
<TextButton label="主要操作" type="primary" onClick={actions.save} />
<TextButton label="次要操作" type="secondary" onClick={actions.cancel} />
<TextButton label="危险操作" type="third" onClick={actions.delete} />

<!-- 不同大小 -->
<TextButton label="大号" size="big" onClick={actions.save} />
<TextButton label="普通" size="medium" onClick={actions.save} />
<TextButton label="小号" size="mini" onClick={actions.save} />

<!-- 带自定义内容 -->
<TextButton type="primary" onClick={actions.save}>
  <i class="icon_google_check"></i> 确认更改
</TextButton>
```

## 属性

| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| `label` | `string` | `''` | 按钮文本标签 |
| `type` | `ButtonType` | `'default'` | 视觉样式变体 |
| `size` | `'big' \| 'medium' \| 'mini'` | `'medium'` | 按钮大小 |
| `disabled` | `boolean` | `false` | 禁用按钮交互 |
| `style` | `string` | `''` | 自定义 CSS 样式 |
| `onClick` | `MouseClickHandler` | - | 异步点击事件处理器 |

## 样式变体

### ButtonType 选项

```typescript
type ButtonType = 'default' | 'primary' | 'secondary' | 'third' | 'forth';
```

### 视觉外观

- **default**: 标准中性按钮外观
- **primary**: 强调主要操作的按钮（通常为蓝色）
- **secondary**: 次要操作按钮（通常为灰色）
- **third**: 替代样式（通常用于警告/注意）
- **forth**: 附加样式变体

### 大小变体

- **big**: 大按钮尺寸，用于突出操作
- **medium**: 标准按钮尺寸，适用于大多数使用场景
- **mini**: 小按钮尺寸，用于紧凑界面

## 使用场景

TextButton 组件特别适合以下场景：

- 对话框中的取消/确认操作
- 导航链接样式的按钮
- 内联操作按钮
- 表单中的辅助操作

## 最佳实践

### 在对话框中使用

```svelte
<script lang="ts">
  import TextButton from '@ticatec/uniface-element/TextButton';
  
  const handleCancel = async () => {
    closeDialog();
  };
  
  const handleConfirm = async () => {
    await saveChanges();
    closeDialog();
  };
</script>

<div class="dialog-actions">
  <TextButton label="取消" type="secondary" onClick={handleCancel} />
  <TextButton label="确认" type="primary" onClick={handleConfirm} />
</div>

<style>
  .dialog-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 16px;
  }
</style>
```

### 作为内联操作

```svelte
<div class="content-item">
  <span class="item-text">项目名称</span>
  <div class="item-actions">
    <TextButton label="编辑" type="primary" size="mini" onClick={editItem} />
    <TextButton label="删除" type="third" size="mini" onClick={deleteItem} />
  </div>
</div>

<style>
  .content-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
  }
  
  .item-actions {
    display: flex;
    gap: 8px;
  }
</style>
```

## API 参考

### MouseClickHandler 类型

```typescript
type MouseClickHandler = (event: MouseEvent) => Promise<void>;
```

### 点击节流

TextButton 组件实现了自动点击节流，具有 500ms 冷却时间，以防止意外的双击并确保正确的异步操作处理。