# 确认弹窗取消按钮控制功能

## 功能概述

ConfirmDialog 组件现在支持控制是否显示取消按钮，通过设置 `cancelText` 参数来控制。

## 实现原理

### 1. 条件渲染逻辑

在 ConfirmDialog 组件中，取消按钮的显示基于 `cancelText` 参数：

```typescript
{cancelText && (
  <TouchableOpacity
    style={[styles.button, styles.cancelButton]}
    onPress={handleCancel}
    activeOpacity={0.7}
  >
    <Text style={styles.cancelButtonText}>{cancelText}</Text>
  </TouchableOpacity>
)}
```

### 2. 样式适配

根据是否显示取消按钮，动态调整按钮容器的样式：

```typescript
<View style={[
  styles.buttonContainer,
  !cancelText && styles.singleButtonContainer
]}>
```

### 3. 确认按钮样式

当只有确认按钮时，应用特殊样式：

```typescript
<TouchableOpacity
  style={[
    styles.button,
    styles.confirmButton,
    { backgroundColor: confirmButtonColor },
    !cancelText && styles.singleConfirmButton,
  ]}
  onPress={handleConfirm}
  activeOpacity={0.7}
>
```

## 使用方法

### 显示双按钮（默认行为）

```typescript
showConfirm(
  {
    title: '确认操作',
    message: '确定要执行此操作吗？',
    confirmText: '确定',
    cancelText: '取消', // 设置取消按钮文本
    icon: 'warning',
    iconColor: '#F59E0B',
  },
  () => {
    // 确认回调
  }
);
```

### 只显示确认按钮

```typescript
showConfirm(
  {
    title: '目标创建成功',
    message: '恭喜！您的目标已成功创建。',
    confirmText: '确定',
    cancelText: '', // 空字符串或不设置
    icon: 'checkmark-circle',
    iconColor: '#10B981',
  },
  () => {
    // 确认回调
  }
);
```

### 完全不显示取消按钮

```typescript
showConfirm(
  {
    title: '操作成功',
    message: '操作已完成',
    confirmText: '确定',
    // 不设置 cancelText 或设置为 undefined
    icon: 'checkmark-circle',
    iconColor: '#10B981',
  },
  () => {
    // 确认回调
  }
);
```

## 样式变化

### 双按钮布局
- 两个按钮并排显示
- 按钮之间有 12px 间距
- 每个按钮占据 50% 宽度

### 单按钮布局
- 只显示确认按钮
- 按钮占据 100% 宽度
- 无按钮间距

## 应用场景

### 1. 成功提示（单按钮）
- 目标创建成功
- 操作完成提示
- 信息确认

### 2. 确认操作（双按钮）
- 删除确认
- 跳过任务确认
- 重要操作确认

### 3. 警告提示（双按钮）
- 危险操作确认
- 数据丢失警告
- 权限确认

## 技术细节

### 接口定义

```typescript
export interface DialogConfig {
  title: string;
  message?: string;
  confirmText?: string;
  cancelText?: string; // 可选参数，控制取消按钮显示
  destructive?: boolean;
  icon?: keyof typeof Ionicons.glyphMap;
  iconColor?: string;
}
```

### 样式类

```typescript
buttonContainer: {
  flexDirection: 'row',
  gap: 12,
  width: '100%',
},
singleButtonContainer: {
  gap: 0, // 单按钮时移除间距
},
singleConfirmButton: {
  flex: 1, // 单按钮时占满宽度
},
```

## 注意事项

1. **空字符串 vs undefined**：两者都会隐藏取消按钮
2. **按钮文本**：建议为取消按钮提供有意义的文本
3. **用户体验**：单按钮适合成功提示，双按钮适合需要确认的操作
4. **无障碍访问**：确保按钮有足够的点击区域和清晰的文本