Files

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

- 将目标创建成功后的提示从系统默认的 Alert.alert 改为使用自定义确认弹窗，提升用户体验和视觉一致性
- 在任务筛选中新增“已跳过”选项，支持用户更好地管理任务状态
- 更新任务卡片和进度卡片，展示跳过任务的数量和状态
- 调整相关组件样式，确保界面一致性和美观性
- 编写相关文档，详细描述新功能和使用方法

2025-08-22 22:19:49 +08:00

2.1 KiB

Raw Blame History

目标创建成功弹窗优化

修改概述

将目标创建成功后的提示从系统默认的 Alert.alert 改为使用自定义的确认弹窗，提供更好的用户体验和视觉一致性。

修改内容

1. 导入依赖

在 app/(tabs)/goals.tsx 中添加了 useGlobalDialog hook 的导入：

import { useGlobalDialog } from '@/components/ui/DialogProvider';

2. 使用 Dialog Hook

在组件中添加了 useGlobalDialog hook 的使用：

const { showConfirm } = useGlobalDialog();

3. 修改成功处理逻辑

将 handleCreateGoal 函数中的成功提示从：

Alert.alert('成功', '目标创建成功！');

改为：

showConfirm(
  {
    title: '目标创建成功',
    message: '恭喜！您的目标已成功创建。系统将自动生成相应的任务，帮助您实现目标。',
    confirmText: '确定',
    cancelText: '',
    icon: 'checkmark-circle',
    iconColor: '#10B981',
  },
  () => {
    // 用户点击确定后的回调
    console.log('用户确认了目标创建成功');
  }
);

改进效果

视觉一致性

使用与应用其他部分相同的弹窗样式
保持设计语言的一致性

用户体验提升

更友好的成功消息文案
使用绿色勾选图标表示成功状态
更详细的说明信息，告知用户系统将自动生成任务

交互优化

只显示"确定"按钮，简化用户操作
提供触觉反馈（通过 DialogProvider 实现）
流畅的动画效果

技术细节

图标选择

使用 checkmark-circle 图标表示成功
图标颜色设置为 #10B981（绿色）

文案优化

标题：简洁明了
消息：详细说明后续流程
按钮：只保留"确定"按钮，避免用户困惑

回调处理

在用户确认后执行回调函数
可以在这里添加额外的逻辑处理

注意事项

确保 DialogProvider 已正确配置在应用的根级别
图标名称必须符合 Ionicons 的命名规范
颜色值使用十六进制格式
保持与其他弹窗使用的一致性

2.1 KiB Raw Blame History