feat: 优化目标创建成功提示及任务筛选功能
- 将目标创建成功后的提示从系统默认的 Alert.alert 改为使用自定义确认弹窗,提升用户体验和视觉一致性 - 在任务筛选中新增“已跳过”选项,支持用户更好地管理任务状态 - 更新任务卡片和进度卡片,展示跳过任务的数量和状态 - 调整相关组件样式,确保界面一致性和美观性 - 编写相关文档,详细描述新功能和使用方法
This commit is contained in:
88
docs/goal-creation-success-dialog.md
Normal file
88
docs/goal-creation-success-dialog.md
Normal file
@@ -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. 保持与其他弹窗使用的一致性
|
||||
Reference in New Issue
Block a user