refactor: unify group fetching logic across manager components and improve rendering in file picker dialog

Author: 杨纲

frontend/src/components/console/files/file-picker-dialog.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from "react"
+import React, { useState, useEffect, useCallback } from "react"
 import {
   Dialog,
   DialogContent,
@@ -375,7 +375,11 @@ export default function FilePickerDialog({
                 (空目录)
               </div>
             ) : (
-              node.children.map(child => renderNode(child))
+              node.children.map(child => (
+                <React.Fragment key={child.path}>
+                  {renderNode(child)}
+                </React.Fragment>
+              ))
             )}
           </>
         )}
@@ -400,7 +404,11 @@ export default function FilePickerDialog({
             </div>
           ) : (
             <div className="flex flex-col">
-              {treeNodes.map(node => renderNode(node))}
+              {treeNodes.map(node => (
+                <React.Fragment key={node.path}>
+                  {renderNode(node)}
+                </React.Fragment>
+              ))}
             </div>
           )}
         </div>

frontend/src/components/manager/add-image.tsx

@@ -35,6 +35,16 @@ export default function AddImage({
   const [selectOpen, setSelectOpen] = useState(false)
   const selectRef = useRef<HTMLDivElement>(null)
 
+  const fetchGroups = async () => {
+    await apiRequest('v1TeamsGroupsList', {}, [], (resp) => {
+      if (resp.code === 0) {
+        setGroups(resp.data?.groups || [])
+      } else {
+        toast.error("获取分组列表失败: " + resp.message);
+      }
+    })
+  }
+
   useEffect(() => {
     if (open) {
       fetchGroups()
@@ -57,16 +67,6 @@ export default function AddImage({
     }
   }, [selectOpen])
 
-  const fetchGroups = async () => {
-    await apiRequest('v1TeamsGroupsList', {}, [], (resp) => {
-      if (resp.code === 0) {
-        setGroups(resp.data?.groups || [])
-      } else {
-        toast.error("获取分组列表失败: " + resp.message);
-      }
-    })
-  }
-
   const handleGroupCheckboxChange = (groupId: string, checked: boolean) => {
     if (checked) {
       setSelectedGroupIds([...selectedGroupIds, groupId])

frontend/src/components/manager/add-model.tsx

@@ -53,6 +53,16 @@ export default function AddModel({
   const [selectOpen, setSelectOpen] = useState(false)
   const selectRef = useRef<HTMLDivElement>(null)
 
+  const fetchGroups = async () => {
+    await apiRequest('v1TeamsGroupsList', {}, [], (resp) => {
+      if (resp.code === 0) {
+        setGroups(resp.data?.groups || [])
+      } else {
+        toast.error("获取分组列表失败: " + resp.message);
+      }
+    })
+  }
+
   useEffect(() => {
     if (open) {
       fetchGroups()
@@ -75,16 +85,6 @@ export default function AddModel({
     }
   }, [selectOpen])
 
-  const fetchGroups = async () => {
-    await apiRequest('v1TeamsGroupsList', {}, [], (resp) => {
-      if (resp.code === 0) {
-        setGroups(resp.data?.groups || [])
-      } else {
-        toast.error("获取分组列表失败: " + resp.message);
-      }
-    })
-  }
-
   const handleGroupCheckboxChange = (groupId: string, checked: boolean) => {
     if (checked) {
       setSelectedGroupIds([...selectedGroupIds, groupId])

frontend/src/components/manager/edit-host.tsx

@@ -38,6 +38,16 @@ export default function EditHost({
   const [remark, setRemark] = useState("")
   const selectRef = useRef<HTMLDivElement>(null)
 
+  const fetchGroups = async () => {
+    await apiRequest('v1TeamsGroupsList', {}, [], (resp) => {
+      if (resp.code === 0) {
+        setGroups(resp.data?.groups || [])
+      } else {
+        toast.error("获取分组列表失败: " + resp.message);
+      }
+    })
+  }
+
   useEffect(() => {
     if (open) {
       fetchGroups()
@@ -69,16 +79,6 @@ export default function EditHost({
     }
   }, [selectOpen])
 
-  const fetchGroups = async () => {
-    await apiRequest('v1TeamsGroupsList', {}, [], (resp) => {
-      if (resp.code === 0) {
-        setGroups(resp.data?.groups || [])
-      } else {
-        toast.error("获取分组列表失败: " + resp.message);
-      }
-    })
-  }
-
   const handleGroupCheckboxChange = (groupId: string, checked: boolean) => {
     if (checked) {
       setSelectedGroupIds([...selectedGroupIds, groupId])

frontend/src/components/manager/edit-image.tsx

@@ -39,6 +39,16 @@ export default function EditImage({
   const [selectOpen, setSelectOpen] = useState(false)
   const selectRef = useRef<HTMLDivElement>(null)
 
+  const fetchGroups = async () => {
+    await apiRequest('v1TeamsGroupsList', {}, [], (resp) => {
+      if (resp.code === 0) {
+        setGroups(resp.data?.groups || [])
+      } else {
+        toast.error("获取分组列表失败: " + resp.message);
+      }
+    })
+  }
+
   useEffect(() => {
     if (open) {
       fetchGroups()
@@ -70,16 +80,6 @@ export default function EditImage({
     }
   }, [selectOpen])
 
-  const fetchGroups = async () => {
-    await apiRequest('v1TeamsGroupsList', {}, [], (resp) => {
-      if (resp.code === 0) {
-        setGroups(resp.data?.groups || [])
-      } else {
-        toast.error("获取分组列表失败: " + resp.message);
-      }
-    })
-  }
-
   const handleGroupCheckboxChange = (groupId: string, checked: boolean) => {
     if (checked) {
       setSelectedGroupIds([...selectedGroupIds, groupId])

frontend/src/components/manager/edit-model.tsx

@@ -53,6 +53,16 @@ export default function EditModel({
   const [selectOpen, setSelectOpen] = useState(false)
   const selectRef = useRef<HTMLDivElement>(null)
 
+  const fetchGroups = async () => {
+    await apiRequest('v1TeamsGroupsList', {}, [], (resp) => {
+      if (resp.code === 0) {
+        setGroups(resp.data?.groups || [])
+      } else {
+        toast.error("获取分组列表失败: " + resp.message);
+      }
+    })
+  }
+
   useEffect(() => {
     if (open) {
       fetchGroups()
@@ -87,16 +97,6 @@ export default function EditModel({
     }
   }, [selectOpen])
 
-  const fetchGroups = async () => {
-    await apiRequest('v1TeamsGroupsList', {}, [], (resp) => {
-      if (resp.code === 0) {
-        setGroups(resp.data?.groups || [])
-      } else {
-        toast.error("获取分组列表失败: " + resp.message);
-      }
-    })
-  }
-
   const handleGroupCheckboxChange = (groupId: string, checked: boolean) => {
     if (checked) {
       setSelectedGroupIds([...selectedGroupIds, groupId])

frontend/src/components/welcome/git-bot.tsx

@@ -17,20 +17,29 @@ const GitBot = () => {
 
   useEffect(() => {
     let currentIndex = 0;
-    const interval = setInterval(() => {
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+    const tick = () => {
       if (currentIndex <= typewriterText.length) {
         setDisplayedText(typewriterText.slice(0, currentIndex));
-        currentIndex++;
-      } else {
-        // 重置动画，循环播放
-        setTimeout(() => {
-          setDisplayedText("");
-          currentIndex = 0;
-        }, 2000);
+        currentIndex += 1;
+        timeoutId = setTimeout(tick, 100);
+        return;
       }
-    }, 100);
 
-    return () => clearInterval(interval);
+      // 完整播放结束后，停顿 2s 再重置并重新开始
+      timeoutId = setTimeout(() => {
+        setDisplayedText("");
+        currentIndex = 0;
+        tick();
+      }, 2000);
+    };
+
+    tick();
+
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId);
+    };
   }, []);
 
   const advantages = [

frontend/src/pages/playground-detail.tsx

@@ -2,7 +2,7 @@ import Header from "@/components/welcome/header"
 import Footer from "@/components/welcome/footer";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import dayjs from "dayjs";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { apiRequest } from "@/utils/requestUtils";
 import { ConstsPostKind, type DomainPlaygroundPost } from "@/api/Api";
@@ -167,9 +167,20 @@ const PlaygroundDetailPage = () => {
 
   const fileTree = buildTree(zipFiles);
 
+  const fetchPost = useCallback(async () => {
+    if (!postId) {
+      return
+    }
+    await apiRequest('v1PlaygroundPostsDetail', {}, [postId], (resp) => {
+      if (resp.code === 0) {
+        setPost(resp.data)
+      }
+    })
+  }, [postId])
+
   useEffect(() => {
     fetchPost()
-  }, [postId])
+  }, [fetchPost])
 
   useEffect(() => {
     if (post?.task_post?.code) {
@@ -196,17 +207,6 @@ const PlaygroundDetailPage = () => {
     }
   }, [zipFiles])
 
-  const fetchPost = async () => {
-    if (!postId) {
-      return
-    }
-    await apiRequest('v1PlaygroundPostsDetail', {}, [postId], (resp) => {
-      if (resp.code === 0) {
-        setPost(resp.data)
-      }
-    })
-  }
-
   const loadZipFile = async (url: string) => {
     setLoadingZip(true)
     try {
@@ -321,7 +321,11 @@ const PlaygroundDetailPage = () => {
           </div>
           {isExpanded && node.children.length > 0 && (
             <div>
-              {node.children.map(child => renderTreeNode(child, depth + 1))}
+              {node.children.map(child => (
+                <React.Fragment key={child.path}>
+                  {renderTreeNode(child, depth + 1)}
+                </React.Fragment>
+              ))}
             </div>
           )}
         </div>
@@ -438,7 +442,11 @@ const PlaygroundDetailPage = () => {
                   </div>
                 ) : (
                   <div className="flex flex-col pr-3">
-                    {fileTree.map(node => renderTreeNode(node, 0))}
+                    {fileTree.map(node => (
+                      <React.Fragment key={node.path}>
+                        {renderTreeNode(node, 0)}
+                      </React.Fragment>
+                    ))}
                   </div>
                 )}
               </div>}