feat: 增加了一个显示当前任务进度的进度条

components/ProgressBar.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+
+// 定义props的类型
+interface ProgressDisplayProps {
+  generatedPaperNumber: number;
+  i: number;
+}
+
+// 使用接口为函数组件的props提供类型注解
+const ProgressDisplay: React.FC<ProgressDisplayProps> = ({
+  generatedPaperNumber,
+  i,
+}) => {
+  // 计算完成的百分比
+  const percentage = ((i / generatedPaperNumber) * 100).toFixed(2);
+
+  return (
+    <div className="relative">
+      {/* 可以添加一个进度条来直观显示进度 */}
+      <div className="h-4 bg-gray-200 rounded-full">
+        <div
+          className={`h-full rounded-full ${
+            Number(percentage) < 100 ? "bg-yellow-500" : "bg-green-500"
+          }`}
+          style={{ width: `${percentage}%` }}
+        ></div>
+      </div>
+      {/* 文字放置在进度条内部 */}
+      <div className="absolute inset-0 flex items-center justify-center text-xs text-white pointer-events-none">
+        <p>
+          {i} / {generatedPaperNumber}task {percentage}% Complete
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default ProgressDisplay;

components/QuillEditor.tsx

@@ -22,6 +22,7 @@ import {
 //组件
 import ExportDocx from "./Export";
 import ReferenceList from "./ReferenceList";
+import ProgressDisplay from "./ProgressBar";
 //redux
 import { useAppDispatch, useAppSelector } from "@/app/store";
 import {
@@ -105,6 +106,8 @@ const QEditor = ({ lng }) => {
     "生成次数",
     1
   ); // 初始值设为1
+  const [generateNumber, setGenerateNumber] = useState(0); //当前任务的进行数
+  const [openProgressBar, setOpenProgressBar] = useState(false);
 
   //redux
   const dispatch = useAppDispatch();
@@ -267,6 +270,7 @@ const QEditor = ({ lng }) => {
     quill!.setSelection(cursorPosition!, 0); // 将光标移动到原来的位置
     let offset = -1;
     if (generatedPaperNumber) offset = 0;
+    setOpenProgressBar(true);
     for (let i = 0; i < generatedPaperNumber!; i++) {
       try {
         if (!topic) {
@@ -385,12 +389,15 @@ const QEditor = ({ lng }) => {
         }
         //修改offset使得按照接下来的顺序进行获取文献
         offset += 2;
+        setGenerateNumber(i + 1);
       } catch (error) {
         // console.error("Error fetching data:", error);
         // 在处理错误后，再次抛出这个错误
         throw new Error(`Paper2AI出现错误: ${error}`);
       }
     }
+    setOpenProgressBar(false);
+    setGenerateNumber(0); //总的已经生成的数量
   }
 
   return (
@@ -449,10 +456,16 @@ const QEditor = ({ lng }) => {
           {t("更新索引")}
         </button>
       </div>
+      {openProgressBar ? (
+        <ProgressDisplay
+          generatedPaperNumber={generatedPaperNumber!}
+          i={generateNumber}
+        />
+      ) : null}
       <div>
         <div id="editor"></div>
         <ReferenceList editor={quill} lng={lng} />
-        <ExportDocx editor={quill} lng={lng} />
+        <ExportDocx editor={quill} />
       </div>
     </div>
   );

components/SignInGitHub.tsx

@@ -7,6 +7,10 @@ export function SignInGitHub() {
     const { data, error } = await supabase.auth.signInWithOAuth({
       provider: "github",
     });
+    if (error) {
+      console.error("GitHub authentication failed:", error.message);
+      return; // 如果出现错误，不再继续执行
+    }
     //profiles表 插入用户信息
     await insertUserProfile(data, supabase);
   };