Merge branch 'master' of http://192.168.0.200/knowledge-base-bj/deerflow-server into dhk-2

frontend-web/src/components/workspace/agents/agent-card.tsx

@@ -66,10 +66,11 @@ export function AgentCard({ agent }: AgentCardProps) {
   const isOwned =
     !isBuiltin && agent.user_id !== null && agent.user_id === currentUserId;
   const isFromOthers = !isBuiltin && !isOwned;
-  // System admins are allowed to edit built-in agents in place. Delete and
-  // publish-toggle stay owner-only — built-ins shouldn't be removable, and
-  // they are inherently visible to everyone so toggling published is moot.
+  // System admins are allowed to edit and delete built-in agents.
+  // Publish-toggle stays owner-only — built-ins are inherently visible to
+  // everyone so toggling published is moot.
   const canEdit = isOwned || (isBuiltin && isAdmin);
+  const canDelete = isOwned || (isBuiltin && isAdmin);
 
   useEffect(() => {
     if (!editOpen) {
@@ -241,7 +242,7 @@ export function AgentCard({ agent }: AgentCardProps) {
             <MessageSquareIcon className="mr-1.5 h-3.5 w-3.5" />
             {t.agents.chat}
           </Button>
-          {(canEdit || isOwned) && (
+          {(canEdit || canDelete || isOwned) && (
             <div className="flex gap-1">
               {isOwned && (
                 <Button
@@ -270,7 +271,7 @@ export function AgentCard({ agent }: AgentCardProps) {
                   <SquarePenIcon className="h-3.5 w-3.5" />
                 </Button>
               )}
-              {isOwned && (
+              {canDelete && (
                 <Button
                   size="icon"
                   variant="ghost"

frontend-web/src/components/workspace/agents/agent-gallery.tsx

@@ -2,9 +2,12 @@
 
 import { BotIcon, PlusIcon } from "lucide-react";
 import { useRouter } from "next/navigation";
+import { useMemo, useState } from "react";
 
 import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useAgents } from "@/core/agents";
+import { getStoredAuth } from "@/core/auth";
 import { useI18n } from "@/core/i18n/hooks";
 
 import { AgentCard } from "./agent-card";
@@ -13,11 +16,51 @@ export function AgentGallery() {
   const { t } = useI18n();
   const { agents, isLoading } = useAgents();
   const router = useRouter();
+  const [activeTab, setActiveTab] = useState<"all" | "mine">("all");
+
+  const storedAuth = useMemo(() => getStoredAuth(), []);
+  const currentUserId = storedAuth?.user_id ?? null;
+
+  const allAgents = useMemo(
+    () => agents.filter((a) => a.builtin || a.published),
+    [agents],
+  );
+
+  const myAgents = useMemo(
+    () => agents.filter((a) => a.user_id !== null && a.user_id === currentUserId),
+    [agents, currentUserId],
+  );
 
   const handleNewAgent = () => {
     router.push("/page/workspace/agents/new");
   };
 
+  const renderGrid = (list: typeof agents) => (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+      {list.map((agent) => (
+        <AgentCard key={agent.id} agent={agent} />
+      ))}
+    </div>
+  );
+
+  const renderEmpty = (description: string, showNewButton = false) => (
+    <div className="flex h-64 flex-col items-center justify-center gap-3 text-center">
+      <div className="bg-muted flex h-14 w-14 items-center justify-center rounded-full">
+        <BotIcon className="text-muted-foreground h-7 w-7" />
+      </div>
+      <div>
+        <p className="font-medium">{t.agents.emptyTitle}</p>
+        <p className="text-muted-foreground mt-1 text-sm">{description}</p>
+      </div>
+      {showNewButton && (
+        <Button variant="outline" className="mt-2" onClick={handleNewAgent}>
+          <PlusIcon className="mr-1.5 h-4 w-4" />
+          {t.agents.newAgent}
+        </Button>
+      )}
+    </div>
+  );
+
   return (
     <div className="flex size-full flex-col">
       {/* Page header */}
@@ -34,36 +77,41 @@ export function AgentGallery() {
         </Button>
       </div>
 
-      {/* Content */}
-      <div className="flex-1 overflow-y-auto p-6">
-        {isLoading ? (
-          <div className="text-muted-foreground flex h-40 items-center justify-center text-sm">
-            {t.common.loading}
-          </div>
-        ) : agents.length === 0 ? (
-          <div className="flex h-64 flex-col items-center justify-center gap-3 text-center">
-            <div className="bg-muted flex h-14 w-14 items-center justify-center rounded-full">
-              <BotIcon className="text-muted-foreground h-7 w-7" />
+      {/* Tabs */}
+      <Tabs
+        value={activeTab}
+        onValueChange={(v) => setActiveTab(v as "all" | "mine")}
+        className="flex flex-1 flex-col overflow-hidden"
+      >
+        <TabsList className="mx-6 mt-4 w-auto self-start">
+          <TabsTrigger value="all">全部</TabsTrigger>
+          <TabsTrigger value="mine">自己的</TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="all" className="flex-1 overflow-y-auto p-6 mt-0">
+          {isLoading ? (
+            <div className="text-muted-foreground flex h-40 items-center justify-center text-sm">
+              {t.common.loading}
             </div>
-            <div>
-              <p className="font-medium">{t.agents.emptyTitle}</p>
-              <p className="text-muted-foreground mt-1 text-sm">
-                {t.agents.emptyDescription}
-              </p>
+          ) : allAgents.length === 0 ? (
+            renderEmpty(t.agents.emptyDescription)
+          ) : (
+            renderGrid(allAgents)
+          )}
+        </TabsContent>
+
+        <TabsContent value="mine" className="flex-1 overflow-y-auto p-6 mt-0">
+          {isLoading ? (
+            <div className="text-muted-foreground flex h-40 items-center justify-center text-sm">
+              {t.common.loading}
             </div>
-            <Button variant="outline" className="mt-2" onClick={handleNewAgent}>
-              <PlusIcon className="mr-1.5 h-4 w-4" />
-              {t.agents.newAgent}
-            </Button>
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-            {agents.map((agent) => (
-              <AgentCard key={agent.id} agent={agent} />
-            ))}
-          </div>
-        )}
-      </div>
+          ) : myAgents.length === 0 ? (
+            renderEmpty(t.agents.emptyDescription, true)
+          ) : (
+            renderGrid(myAgents)
+          )}
+        </TabsContent>
+      </Tabs>
     </div>
   );
 }