feat: 优化目标创建成功提示及任务筛选功能

- 将目标创建成功后的提示从系统默认的 Alert.alert 改为使用自定义确认弹窗，提升用户体验和视觉一致性 - 在任务筛选中新增“已跳过”选项，支持用户更好地管理任务状态 - 更新任务卡片和进度卡片，展示跳过任务的数量和状态 - 调整相关组件样式，确保界面一致性和美观性 - 编写相关文档，详细描述新功能和使用方法
2025-08-22 22:19:49 +08:00
parent 7d28b79d86
commit 75806df660
9 changed files with 436 additions and 37 deletions
--- a/docs/confirm-dialog-cancel-button-control.md
+++ b/docs/confirm-dialog-cancel-button-control.md
@@ -0,0 +1,175 @@
+# 确认弹窗取消按钮控制功能
+
+## 功能概述
+
+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. **无障碍访问**：确保按钮有足够的点击区域和清晰的文本
--- a/docs/goal-creation-success-dialog.md
+++ b/docs/goal-creation-success-dialog.md
@@ -0,0 +1,88 @@
+# 目标创建成功弹窗优化
+
+## 修改概述
+
+将目标创建成功后的提示从系统默认的 `Alert.alert` 改为使用自定义的确认弹窗，提供更好的用户体验和视觉一致性。
+
+## 修改内容
+
+### 1. 导入依赖
+
+在 `app/(tabs)/goals.tsx` 中添加了 `useGlobalDialog` hook 的导入：
+
+```typescript
+import { useGlobalDialog } from '@/components/ui/DialogProvider';
+```
+
+### 2. 使用 Dialog Hook
+
+在组件中添加了 `useGlobalDialog` hook 的使用：
+
+```typescript
+const { showConfirm } = useGlobalDialog();
+```
+
+### 3. 修改成功处理逻辑
+
+将 `handleCreateGoal` 函数中的成功提示从：
+
+```typescript
+Alert.alert('成功', '目标创建成功！');
+```
+
+改为：
+
+```typescript
+showConfirm(
+  {
+    title: '目标创建成功',
+    message: '恭喜！您的目标已成功创建。系统将自动生成相应的任务，帮助您实现目标。',
+    confirmText: '确定',
+    cancelText: '',
+    icon: 'checkmark-circle',
+    iconColor: '#10B981',
+  },
+  () => {
+    // 用户点击确定后的回调
+    console.log('用户确认了目标创建成功');
+  }
+);
+```
+
+## 改进效果
+
+### 视觉一致性
+- 使用与应用其他部分相同的弹窗样式
+- 保持设计语言的一致性
+
+### 用户体验提升
+- 更友好的成功消息文案
+- 使用绿色勾选图标表示成功状态
+- 更详细的说明信息，告知用户系统将自动生成任务
+
+### 交互优化
+- 只显示"确定"按钮，简化用户操作
+- 提供触觉反馈（通过 DialogProvider 实现）
+- 流畅的动画效果
+
+## 技术细节
+
+### 图标选择
+- 使用 `checkmark-circle` 图标表示成功
+- 图标颜色设置为 `#10B981`（绿色）
+
+### 文案优化
+- 标题：简洁明了
+- 消息：详细说明后续流程
+- 按钮：只保留"确定"按钮，避免用户困惑
+
+### 回调处理
+- 在用户确认后执行回调函数
+- 可以在这里添加额外的逻辑处理
+
+## 注意事项
+
+1. 确保 `DialogProvider` 已正确配置在应用的根级别
+2. 图标名称必须符合 Ionicons 的命名规范
+3. 颜色值使用十六进制格式
+4. 保持与其他弹窗使用的一致性