feat(frontend):add-loading-bar-when-intialize-project

frontend/src/components/chat/code-engine/code-engine.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { useContext, useEffect, useRef, useState } from 'react';
+import { useContext, useEffect, useRef, useState, useMemo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import { Loader } from 'lucide-react';
 import { TreeItem, TreeItemIndex } from 'react-complex-tree';
@@ -39,15 +39,51 @@ export function CodeEngine({
   const editorRef = useRef(null);
   const projectPathRef = useRef(null);
 
+  const [progress, setProgress] = useState(0); // 从0%开始
+  const [estimateTime, setEstimateTime] = useState(6 * 60); // 保留估计时间
+  const [timerActive, setTimerActive] = useState(false);
+  const initialTime = 6 * 60; // 初始总时间（6分钟）
+  const [projectCompleted, setProjectCompleted] = useState(false);
+  // 添加一个状态来跟踪完成动画
+  const [isCompleting, setIsCompleting] = useState(false);
+  // 添加一个ref来持久跟踪项目状态，避免重新渲染时丢失
+  const isProjectLoadedRef = useRef(false);
+
+  // 在组件挂载时从localStorage检查项目是否已完成
+  useEffect(() => {
+    try {
+      const savedCompletion = localStorage.getItem(
+        `project-completed-${chatId}`
+      );
+      if (savedCompletion === 'true') {
+        setProjectCompleted(true);
+        isProjectLoadedRef.current = true;
+        setProgress(100);
+      }
+    } catch (e) {
+      // 忽略localStorage错误
+    }
+  }, [chatId]);
+
   // Poll for project if needed using chatId
   useEffect(() => {
+    // 如果项目已经完成，跳过轮询
+    if (projectCompleted || isProjectLoadedRef.current) {
+      return;
+    }
+
     if (!curProject && chatId && !projectLoading) {
       const loadProjectFromChat = async () => {
         try {
           setIsLoading(true);
           const project = await pollChatProject(chatId);
           if (project) {
             setLocalProject(project);
+            // 如果成功加载项目，将状态设置为已完成
+            if (project.projectPath) {
+              setProjectCompleted(true);
+              isProjectLoadedRef.current = true;
+            }
           }
         } catch (error) {
           logger.error('Failed to load project from chat:', error);
@@ -60,7 +96,7 @@ export function CodeEngine({
     } else {
       setIsLoading(projectLoading);
     }
-  }, [chatId, curProject, projectLoading, pollChatProject]);
+  }, [chatId, curProject, projectLoading, pollChatProject, projectCompleted]);
 
   // Use either curProject from context or locally polled project
   const activeProject = curProject || localProject;
@@ -278,10 +314,92 @@ export function CodeEngine({
   }, [filePath, activeProject, fileStructureData]);
 
   // Determine if we're truly ready to render
-  const showLoader =
-    !isProjectReady ||
-    isLoading ||
-    (!activeProject?.projectPath && !projectPathRef.current && !localProject);
+  const showLoader = useMemo(() => {
+    // 如果项目已经被标记为完成，不再显示加载器
+    if (projectCompleted || isProjectLoadedRef.current) {
+      return false;
+    }
+    return (
+      !isProjectReady ||
+      isLoading ||
+      (!activeProject?.projectPath && !projectPathRef.current && !localProject)
+    );
+  }, [
+    isProjectReady,
+    isLoading,
+    activeProject,
+    projectCompleted,
+    localProject,
+  ]);
+
+  useEffect(() => {
+    if (!showLoader && timerActive) {
+      setIsCompleting(true);
+      setProgress(99);
+      const completionTimer = setTimeout(() => {
+        setProgress(100);
+        setTimeout(() => {
+          setTimerActive(false);
+          setIsCompleting(false);
+          setProjectCompleted(true);
+          // 同时更新ref以持久记住完成状态
+          isProjectLoadedRef.current = true;
+
+          // 可选：在完成时将状态保存到localStorage
+          try {
+            localStorage.setItem(`project-completed-${chatId}`, 'true');
+          } catch (e) {
+            // 忽略localStorage错误
+          }
+        }, 800);
+      }, 500);
+
+      return () => clearTimeout(completionTimer);
+    } else if (
+      showLoader &&
+      !timerActive &&
+      !projectCompleted &&
+      !isProjectLoadedRef.current
+    ) {
+      // 只有在项目未被标记为完成时才重置
+      setTimerActive(true);
+      setEstimateTime(initialTime);
+      setProgress(0);
+      setIsCompleting(false);
+    }
+  }, [showLoader, timerActive, projectCompleted, chatId]);
+
+  useEffect(() => {
+    let interval;
+
+    if (timerActive) {
+      interval = setInterval(() => {
+        setEstimateTime((prevTime) => {
+          if (prevTime <= 1) {
+            return initialTime;
+          }
+          const elapsedTime = initialTime - prevTime + 1;
+          const newProgress = Math.min(
+            Math.floor((elapsedTime / initialTime) * 100),
+            99
+          );
+          setProgress(newProgress);
+
+          return prevTime - 1;
+        });
+      }, 1000);
+    }
+
+    return () => {
+      if (interval) clearInterval(interval);
+    };
+  }, [timerActive]);
+
+  const formatTime = (seconds) => {
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+  };
 
   return (
     <div className="rounded-lg border shadow-sm overflow-scroll h-full">
@@ -293,20 +411,70 @@ export function CodeEngine({
 
       <div className="relative h-[calc(100vh-48px-4rem)]">
         <AnimatePresence>
-          {showLoader && (
+          {(showLoader || isCompleting) && (
             <motion.div
               key="loader"
               initial={{ opacity: 0 }}
               animate={{ opacity: 1 }}
               exit={{ opacity: 0 }}
-              className="absolute inset-0 bg-background/60 backdrop-blur-sm flex flex-col items-center justify-center gap-3 z-30"
+              className="absolute inset-0 bg-background/60 backdrop-blur-sm flex flex-col items-center justify-center gap-4 z-30"
             >
-              <Loader className="w-8 h-8 text-primary animate-spin" />
-              <p className="text-sm text-muted-foreground">
-                {projectLoading
-                  ? 'Loading project...'
-                  : 'Initializing project...'}
-              </p>
+              {progress === 100 ? (
+                <motion.div
+                  initial={{ scale: 0 }}
+                  animate={{ scale: 1, rotate: 0 }}
+                  transition={{ type: 'spring', stiffness: 200, damping: 10 }}
+                  className="w-16 h-16 bg-green-100 dark:bg-green-900/30 rounded-full flex items-center justify-center"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    className="h-10 w-10 text-green-500"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                      clipRule="evenodd"
+                    />
+                  </svg>
+                </motion.div>
+              ) : (
+                <Loader className="w-8 h-8 text-primary animate-spin" />
+              )}
+
+              <div className="w-64 flex flex-col items-center">
+                <p className="text-sm text-muted-foreground mb-2">
+                  {progress === 100
+                    ? 'Project ready!'
+                    : projectLoading
+                      ? 'Loading project...'
+                      : `Initializing project (${progress}%)`}
+                </p>
+
+                <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5 mb-1">
+                  <motion.div
+                    className={`h-2.5 rounded-full ${
+                      progress === 100 ? 'bg-green-500' : 'bg-primary'
+                    }`}
+                    initial={{ width: 0 }}
+                    animate={{ width: `${progress}%` }}
+                    transition={{
+                      ease: progress === 100 ? 'easeOut' : 'easeInOut',
+                      duration: progress === 100 ? 0.5 : 0.3,
+                    }}
+                  />
+                </div>
+              </div>
+
+              {/* 添加不同阶段的消息 */}
+              <motion.p
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ delay: 0.2 }}
+                className="text-sm text-center max-w-xs text-muted-foreground"
+              ></motion.p>
             </motion.div>
           )}
         </AnimatePresence>