From 3d5006af48cdb6054bbf14610a19a6243697c97b Mon Sep 17 00:00:00 2001
From: MT-Mint <798521692@qq.com>
Date: Thu, 16 Apr 2026 15:18:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(frontend):=20artifact=20=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E5=8D=A1=E7=89=87=E6=94=AF=E6=8C=81=E5=8F=B3=E9=94=AE=E5=BC=95?=
 =?UTF-8?q?=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../artifacts/artifact-file-list.tsx          | 148 ++++++++++--------
 1 file changed, 86 insertions(+), 62 deletions(-)

diff --git a/frontend/src/components/workspace/artifacts/artifact-file-list.tsx b/frontend/src/components/workspace/artifacts/artifact-file-list.tsx
index e03eb67b..5c9d2cd2 100644
--- a/frontend/src/components/workspace/artifacts/artifact-file-list.tsx
+++ b/frontend/src/components/workspace/artifacts/artifact-file-list.tsx
@@ -10,9 +10,16 @@ import {
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuTrigger,
+} from "@/components/ui/context-menu";
 import { urlOfArtifact } from "@/core/artifacts/utils";
 import { useI18n } from "@/core/i18n/hooks";
 import { installSkill } from "@/core/skills/api";
+import { dispatchMentionReference } from "@/core/threads/reference-events";
 import {
   getFileExtensionDisplayName,
   getFileIcon,
@@ -78,69 +85,86 @@ export function ArtifactFileList({
       data-testid="artifact-file-list"
     >
       {files.map((file) => (
-        <Card
-          key={file}
-          className="relative cursor-pointer p-4"
-          data-testid="artifact-file-card"
-          onClick={() => handleClick(file)}
-        >
-          <CardHeader className="pr-2 pl-1">
-            <CardTitle className="relative overflow-hidden pl-10">
-              <div
-                className="text-sm font-normal text-ellipsis whitespace-nowrap"
-                title={getFileName(file)}
-              >
-                {truncateMiddle(getFileName(file), 50)}
-              </div>
-            </CardTitle>
-            <div className="absolute top-5 left-4">
-              {getFileIcon(file, "size-9 stroke-[1px] stroke-[#333333]")}
-            </div>
-            <CardDescription className="pl-10 text-xs">
-              {getFileExtensionDisplayName(file)} file
-            </CardDescription>
-            <CardAction>
-              {file.endsWith(".skill") && (
-                <Button
-                  variant="ghost"
-                  disabled={!threadId || installingFile === file}
-                  onClick={(e) => handleInstallSkill(e, file)}
-                >
-                  {installingFile === file ? (
-                    <LoaderIcon className="size-4 animate-spin" />
-                  ) : (
-                    <PackageIcon className="size-4" />
-                  )}
-                  {t.common.install}
-                </Button>
-              )}
-              {threadId ? (
-                <a
-                  href={urlOfArtifact({
-                    filepath: file,
-                    threadId,
-                    download: true,
-                  })}
-                  target="_blank"
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  <Button variant="ghost"  
-                  className="h-full! text-[var(--muted-foreground)]! hover:bg-transparent! hover:text-[#333333]!" 
-                  
+        <ContextMenu key={file}>
+          <ContextMenuTrigger asChild>
+            <Card
+              className="relative cursor-pointer p-4"
+              data-testid="artifact-file-card"
+              onClick={() => handleClick(file)}
+            >
+              <CardHeader className="pr-2 pl-1">
+                <CardTitle className="relative overflow-hidden pl-10">
+                  <div
+                    className="text-sm font-normal text-ellipsis whitespace-nowrap"
+                    title={getFileName(file)}
                   >
-                    <DownloadIcon className="size-4" />
-                    {t.common.download}
-                  </Button>
-                </a>
-              ) : (
-                <Button variant="ghost" disabled>
-                  <DownloadIcon className="size-4" />
-                  {t.common.download}
-                </Button>
-              )}
-            </CardAction>
-          </CardHeader>
-        </Card>
+                    {truncateMiddle(getFileName(file), 50)}
+                  </div>
+                </CardTitle>
+                <div className="absolute top-5 left-4">
+                  {getFileIcon(file, "size-9 stroke-[1px] stroke-[#333333]")}
+                </div>
+                <CardDescription className="pl-10 text-xs">
+                  {getFileExtensionDisplayName(file)} file
+                </CardDescription>
+                <CardAction>
+                  {file.endsWith(".skill") && (
+                    <Button
+                      variant="ghost"
+                      disabled={!threadId || installingFile === file}
+                      onClick={(e) => handleInstallSkill(e, file)}
+                    >
+                      {installingFile === file ? (
+                        <LoaderIcon className="size-4 animate-spin" />
+                      ) : (
+                        <PackageIcon className="size-4" />
+                      )}
+                      {t.common.install}
+                    </Button>
+                  )}
+                  {threadId ? (
+                    <a
+                      href={urlOfArtifact({
+                        filepath: file,
+                        threadId,
+                        download: true,
+                      })}
+                      target="_blank"
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      <Button
+                        variant="ghost"
+                        className="h-full! text-[var(--muted-foreground)]! hover:bg-transparent! hover:text-[#333333]!"
+                      >
+                        <DownloadIcon className="size-4" />
+                        {t.common.download}
+                      </Button>
+                    </a>
+                  ) : (
+                    <Button variant="ghost" disabled>
+                      <DownloadIcon className="size-4" />
+                      {t.common.download}
+                    </Button>
+                  )}
+                </CardAction>
+              </CardHeader>
+            </Card>
+          </ContextMenuTrigger>
+          <ContextMenuContent className="min-w-[120px] p-1">
+            <ContextMenuItem
+              onSelect={() => {
+                dispatchMentionReference({
+                  threadId,
+                  filename: getFileName(file),
+                  path: file,
+                  ref_source: "artifact",
+                });
+              }}
+            >
+              引用
+            </ContextMenuItem>
+          </ContextMenuContent>
+        </ContextMenu>
       ))}
     </ul>
   );