提交代码

frontend/src/pages/ChatBotPage.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type KeyboardEvent } from 'react';
-import { useNavigate, useSearchParams } from 'react-router-dom';
+import { useNavigate, useSearchParams, useLocation } from 'react-router-dom';
 import { message as antMessage } from 'antd';
 import { v4 as uuidv4 } from 'uuid';
 import { useAppStore } from '@/store';
@@ -96,6 +96,7 @@ const getEmotionCategory = (emotion: string): 'positive' | 'negative' | 'neutral
 export const ChatBotPage = () => {
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
+  const location = useLocation();
   const {
     currentState,
     currentRequestId,
@@ -353,29 +354,53 @@ export const ChatBotPage = () => {
     (avatarId: string | null | undefined): AvatarGifSet => {
       const fallback = avatarGifSets[AVATAR_ID_DEFAULT];
       if (!avatarId) {
+        console.log(`[resolveAvatarGifSet] avatarId 为 null，返回默认形象`);
         return fallback;
       }
       const set = avatarGifSets[avatarId];
-      return {
+      const result = {
         default: set?.default || fallback.default,
         positive: set?.positive || fallback.positive,
         negative: set?.negative || fallback.negative,
         talking: set?.talking || fallback.talking,
       };
+      console.log(`[resolveAvatarGifSet] avatarId=${avatarId}, set存在=${!!set}, result=`, result);
+      return result;
     },
     [avatarGifSets],
   );
-  const avatarGifSet = useMemo(() => resolveAvatarGifSet(currentAvatarId), [currentAvatarId, resolveAvatarGifSet]);
+  const avatarGifSet = useMemo(() => {
+    const gifSet = resolveAvatarGifSet(currentAvatarId);
+    console.log(`[avatarGifSet] currentAvatarId=${currentAvatarId}, gifSet=`, gifSet);
+    return gifSet;
+  }, [currentAvatarId, resolveAvatarGifSet]);
   const [currentAvatarGif, setCurrentAvatarGif] = useState<string>(() => {
     const storedId = getStorage(STORAGE_KEYS.CURRENT_AVATAR_ID);
     return resolveAvatarGifSet(storedId).default;
   });
   const setGifByState = useCallback(
     (state: AvatarState) => {
-      const nextGif = avatarGifSet[state] || avatarGifSet.default;
+      // 实时获取最新的 avatarGifSet，避免闭包问题
+      const latestAvatarId = getStorage(STORAGE_KEYS.CURRENT_AVATAR_ID);
+      // 使用最新的 avatarGifSets 状态来计算 GIF
+      const fallback = avatarGifSets[AVATAR_ID_DEFAULT];
+      let latestGifSet: AvatarGifSet;
+      if (!latestAvatarId) {
+        latestGifSet = fallback;
+      } else {
+        const set = avatarGifSets[latestAvatarId];
+        latestGifSet = {
+          default: set?.default || fallback.default,
+          positive: set?.positive || fallback.positive,
+          negative: set?.negative || fallback.negative,
+          talking: set?.talking || fallback.talking,
+        };
+      }
+      const nextGif = latestGifSet[state] || latestGifSet.default;
+      console.log(`[setGifByState] state=${state}, currentAvatarId=${currentAvatarId}, latestAvatarId=${latestAvatarId}, nextGif=${nextGif}`);
       setCurrentAvatarGif(nextGif);
     },
-    [avatarGifSet],
+    [avatarGifSet, currentAvatarId, avatarGifSets],
   );
   const showDefaultGif = useCallback(() => setGifByState('default'), [setGifByState]);
   const showPositiveGif = useCallback(() => setGifByState('positive'), [setGifByState]);
@@ -462,6 +487,23 @@ export const ChatBotPage = () => {
       window.removeEventListener('storage', handleStorage);
     };
   }, []);
+
+  // 监听路由变化，同步 localStorage 中的 currentAvatarId（处理从其他页面返回的情况）
+  useEffect(() => {
+    if (location.pathname === '/chatbot') {
+      const storedAvatarId = getStorage(STORAGE_KEYS.CURRENT_AVATAR_ID);
+      // 只有当 localStorage 中的值与当前状态不一致时才更新
+      if (storedAvatarId !== currentAvatarId) {
+        console.log(`[ChatBotPage] 检测到 localStorage 中的形象ID变化: ${currentAvatarId} -> ${storedAvatarId}`);
+        setCurrentAvatarId(storedAvatarId);
+        // 立即更新显示的 GIF，使用最新的 avatarGifSets
+        const newGifSet = resolveAvatarGifSet(storedAvatarId);
+        console.log(`[ChatBotPage] 更新显示的 GIF: ${newGifSet.default}`);
+        setCurrentAvatarGif(newGifSet.default);
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname]);
   // 当形象变化时立即更新显示 GIF
   useEffect(() => {
     showDefaultGif();