feat: 新增目标页面引导功能及相关组件

- 在目标页面中集成用户引导功能,帮助用户了解页面各项功能
- 创建 GoalsPageGuide 组件,支持多步骤引导和动态高亮功能区域
- 实现引导状态的检查、标记和重置功能,确保用户体验
- 添加开发测试按钮,方便开发者重置引导状态
- 更新相关文档,详细描述引导功能的实现和使用方法
This commit is contained in:
2025-08-23 13:53:18 +08:00
parent b807e498ed
commit 8a7599f630
7 changed files with 819 additions and 11 deletions

67
utils/guideHelpers.ts Normal file
View File

@@ -0,0 +1,67 @@
import AsyncStorage from '@react-native-async-storage/async-storage';
// 引导状态存储键
const GUIDE_KEYS = {
GOALS_PAGE: '@guide_goals_page_completed',
} as const;
/**
* 检查用户是否已经完成特定引导
* @param guideKey 引导键名
* @returns Promise<boolean> 是否已完成
*/
export const checkGuideCompleted = async (guideKey: keyof typeof GUIDE_KEYS): Promise<boolean> => {
try {
const completed = await AsyncStorage.getItem(GUIDE_KEYS[guideKey]);
return completed === 'true';
} catch (error) {
console.error('检查引导状态失败:', error);
return false;
}
};
/**
* 标记引导为已完成
* @param guideKey 引导键名
*/
export const markGuideCompleted = async (guideKey: keyof typeof GUIDE_KEYS): Promise<void> => {
try {
await AsyncStorage.setItem(GUIDE_KEYS[guideKey], 'true');
} catch (error) {
console.error('保存引导状态失败:', error);
}
};
/**
* 重置所有引导状态(用于测试或重置用户引导)
*/
export const resetAllGuides = async (): Promise<void> => {
try {
const keys = Object.values(GUIDE_KEYS);
await AsyncStorage.multiRemove(keys);
console.log('所有引导状态已重置');
} catch (error) {
console.error('重置引导状态失败:', error);
}
};
/**
* 获取所有引导状态
* @returns Promise<Record<string, boolean>> 所有引导的完成状态
*/
export const getAllGuideStatus = async (): Promise<Record<string, boolean>> => {
try {
const result: Record<string, boolean> = {};
const keys = Object.values(GUIDE_KEYS);
for (const key of keys) {
const completed = await AsyncStorage.getItem(key);
result[key] = completed === 'true';
}
return result;
} catch (error) {
console.error('获取引导状态失败:', error);
return {};
}
};