This commit is contained in:
Junhui Chen 2025-08-07 17:11:36 +08:00
parent b960ebac72
commit bf12a157c5

View File

@ -5,8 +5,8 @@ import { ThemedText } from "@/components/ThemedText";
import { useWebSocketStreamHandler } from "@/hooks/useWebSocketStreamHandler"; import { useWebSocketStreamHandler } from "@/hooks/useWebSocketStreamHandler";
import { fetchApi } from "@/lib/server-api-util"; import { fetchApi } from "@/lib/server-api-util";
import { Message } from "@/types/ask"; import { Message } from "@/types/ask";
import { useLocalSearchParams, useRouter } from "expo-router"; import { useFocusEffect, useLocalSearchParams, useRouter } from "expo-router";
import React, { useEffect, useRef, useState } from 'react'; import React, { useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { import {
Animated, Animated,
@ -17,7 +17,7 @@ import {
TouchableOpacity, TouchableOpacity,
View View
} from 'react-native'; } from 'react-native';
import { useSharedValue } from 'react-native-reanimated'; import { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
import { useSafeAreaInsets } from "react-native-safe-area-context"; import { useSafeAreaInsets } from "react-native-safe-area-context";
export default function AskScreen() { export default function AskScreen() {
@ -44,91 +44,91 @@ export default function AskScreen() {
}>(); }>();
// 创建一个安全的滚动函数 // 创建一个安全的滚动函数
// const scrollToEnd = useCallback((animated = true) => { const scrollToEnd = useCallback((animated = true) => {
// if (!isMountedRef.current || !chatListRef.current) return; if (!isMountedRef.current || !chatListRef.current) return;
// // 清理之前的定时器 // 清理之前的定时器
// if (scrollTimeoutRef.current) { if (scrollTimeoutRef.current) {
// clearTimeout(scrollTimeoutRef.current); clearTimeout(scrollTimeoutRef.current);
// } }
// scrollTimeoutRef.current = setTimeout(() => { scrollTimeoutRef.current = setTimeout(() => {
// if (isMountedRef.current && chatListRef.current) { if (isMountedRef.current && chatListRef.current) {
// try { try {
// chatListRef.current.scrollToEnd({ animated }); chatListRef.current.scrollToEnd({ animated });
// } catch (error) { } catch (error) {
// console.warn('滚动到底部失败:', error); console.warn('滚动到底部失败:', error);
// } }
// } }
// }, 100); }, 100);
// }, []); }, []);
// 清理函数 // 清理函数
// const cleanup = useCallback(() => { const cleanup = useCallback(() => {
// isMountedRef.current = false; isMountedRef.current = false;
// // 清理定时器 // 清理定时器
// if (scrollTimeoutRef.current) { if (scrollTimeoutRef.current) {
// clearTimeout(scrollTimeoutRef.current); clearTimeout(scrollTimeoutRef.current);
// scrollTimeoutRef.current = null; scrollTimeoutRef.current = null;
// } }
// if (keyboardTimeoutRef.current) { if (keyboardTimeoutRef.current) {
// clearTimeout(keyboardTimeoutRef.current); clearTimeout(keyboardTimeoutRef.current);
// keyboardTimeoutRef.current = null; keyboardTimeoutRef.current = null;
// } }
// // 取消API请求 // 取消API请求
// if (abortControllerRef.current) { if (abortControllerRef.current) {
// abortControllerRef.current.abort(); abortControllerRef.current.abort();
// abortControllerRef.current = null; abortControllerRef.current = null;
// } }
// }, []); }, []);
// useEffect(() => { useEffect(() => {
// if (!isHello && userMessages.length > 0 && isMountedRef.current) { if (!isHello && userMessages.length > 0 && isMountedRef.current) {
// scrollToEnd(); scrollToEnd();
// } }
// }, [userMessages, isHello, scrollToEnd]); }, [userMessages, isHello, scrollToEnd]);
// useEffect(() => { useEffect(() => {
// const keyboardDidShowListener = Keyboard.addListener( const keyboardDidShowListener = Keyboard.addListener(
// 'keyboardDidShow', 'keyboardDidShow',
// (e) => { (e) => {
// if (keyboardTimeoutRef.current) { if (keyboardTimeoutRef.current) {
// clearTimeout(keyboardTimeoutRef.current); clearTimeout(keyboardTimeoutRef.current);
// } }
// keyboardTimeoutRef.current = setTimeout(() => { keyboardTimeoutRef.current = setTimeout(() => {
// if (isMountedRef.current && !isHello) { if (isMountedRef.current && !isHello) {
// scrollToEnd(); scrollToEnd();
// } }
// }, 100); }, 100);
// } }
// ); );
// const keyboardDidHideListener = Keyboard.addListener( const keyboardDidHideListener = Keyboard.addListener(
// 'keyboardDidHide', 'keyboardDidHide',
// () => { () => {
// if (keyboardTimeoutRef.current) { if (keyboardTimeoutRef.current) {
// clearTimeout(keyboardTimeoutRef.current); clearTimeout(keyboardTimeoutRef.current);
// } }
// keyboardTimeoutRef.current = setTimeout(() => { keyboardTimeoutRef.current = setTimeout(() => {
// if (isMountedRef.current && !isHello) { if (isMountedRef.current && !isHello) {
// scrollToEnd(false); scrollToEnd(false);
// } }
// }, 100); }, 100);
// } }
// ); );
// return () => { return () => {
// keyboardDidShowListener.remove(); keyboardDidShowListener.remove();
// keyboardDidHideListener.remove(); keyboardDidHideListener.remove();
// if (keyboardTimeoutRef.current) { if (keyboardTimeoutRef.current) {
// clearTimeout(keyboardTimeoutRef.current); clearTimeout(keyboardTimeoutRef.current);
// } }
// }; };
// }, [isHello, scrollToEnd]); }, [isHello, scrollToEnd]);
// 使用新的WebSocket流处理hook使用实时模式 // 使用新的WebSocket流处理hook使用实时模式
const { subscribeToWebSocket } = useWebSocketStreamHandler({ const { subscribeToWebSocket } = useWebSocketStreamHandler({
@ -153,25 +153,25 @@ export default function AskScreen() {
// ); // );
// 创建动画样式 // 创建动画样式
// const welcomeStyle = useAnimatedStyle(() => { const welcomeStyle = useAnimatedStyle(() => {
// return { return {
// opacity: fadeAnim.value, opacity: fadeAnim.value,
// pointerEvents: isHello ? 'auto' : 'none', pointerEvents: isHello ? 'auto' : 'none',
// }; };
// }); });
// const chatStyle = useAnimatedStyle(() => { const chatStyle = useAnimatedStyle(() => {
// return { return {
// opacity: fadeAnimChat.value, opacity: fadeAnimChat.value,
// pointerEvents: isHello ? 'none' : 'auto', pointerEvents: isHello ? 'none' : 'auto',
// }; };
// }); });
// 触发动画 // 触发动画
// useEffect(() => { useEffect(() => {
// fadeAnim.value = withTiming(isHello ? 1 : 0, { duration: 300 }); fadeAnim.value = withTiming(isHello ? 1 : 0, { duration: 300 });
// fadeAnimChat.value = withTiming(isHello ? 0 : 1, { duration: 300 }); fadeAnimChat.value = withTiming(isHello ? 0 : 1, { duration: 300 });
// }, [isHello]); }, [isHello]);
useEffect(() => { useEffect(() => {
if (sessionId && isMountedRef.current) { if (sessionId && isMountedRef.current) {
@ -200,29 +200,29 @@ export default function AskScreen() {
} }
}, [sessionId, newSession]); }, [sessionId, newSession]);
// useEffect(() => { useEffect(() => {
// if (!isHello && isMountedRef.current) { if (!isHello && isMountedRef.current) {
// // 不再自动关闭键盘,让用户手动控制 // 不再自动关闭键盘,让用户手动控制
// // 这里可以添加其他需要在隐藏hello界面时执行的逻辑 // 这里可以添加其他需要在隐藏hello界面时执行的逻辑
// scrollToEnd(false); scrollToEnd(false);
// } }
// }, [isHello, scrollToEnd]); }, [isHello, scrollToEnd]);
// useFocusEffect( useFocusEffect(
// useCallback(() => { useCallback(() => {
// if (!sessionId && isMountedRef.current) { if (!sessionId && isMountedRef.current) {
// setIsHello(true); setIsHello(true);
// setUserMessages([]); setUserMessages([]);
// } }
// }, [sessionId]) }, [sessionId])
// ); );
// 组件卸载时的清理 // 组件卸载时的清理
// useEffect(() => { useEffect(() => {
// return () => { return () => {
// cleanup(); cleanup();
// }; };
// }, [cleanup]); }, [cleanup]);
return ( return (
<View style={[styles.container, { paddingTop: insets.top, paddingBottom: insets.bottom }]}> <View style={[styles.container, { paddingTop: insets.top, paddingBottom: insets.bottom }]}>
@ -253,7 +253,7 @@ export default function AskScreen() {
{/* 欢迎页面 */} {/* 欢迎页面 */}
<Animated.View <Animated.View
style={[styles.absoluteView, style={[styles.absoluteView,
// welcomeStyle, welcomeStyle,
{ zIndex: 1 }]} { zIndex: 1 }]}
> >
<AskHello setUserMessages={setUserMessages} setConversationId={setConversationId} setIsHello={setIsHello} /> <AskHello setUserMessages={setUserMessages} setConversationId={setConversationId} setIsHello={setIsHello} />
@ -262,7 +262,7 @@ export default function AskScreen() {
{/* 聊天页面 */} {/* 聊天页面 */}
<Animated.View <Animated.View
style={[styles.absoluteView, style={[styles.absoluteView,
// chatStyle, chatStyle,
{ zIndex: 0 }]} { zIndex: 0 }]}
> >
<Chat <Chat