From fbe52a7780438a60fd15cbef92e3cabee90faec6 Mon Sep 17 00:00:00 2001
From: MT-Mint <798521692@qq.com>
Date: Tue, 31 Mar 2026 12:35:01 +0800
Subject: [PATCH] =?UTF-8?q?fix(workspace):=20=E4=BF=AE=E5=A4=8D=E7=BA=BF?=
 =?UTF-8?q?=E7=A8=8B=E4=B8=8E=E9=A2=84=E8=A7=88=E5=B8=83=E5=B1=80=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/workspace/chats/[thread_id]/page.tsx  |  2 +-
 frontend/src/app/workspace/layout.tsx         |  2 +-
 .../src/components/ai-elements/artifact.tsx   |  4 +-
 .../artifacts/artifact-file-detail.tsx        | 54 +++++++++++--------
 .../components/workspace/chats/chat-box.tsx   |  5 +-
 5 files changed, 41 insertions(+), 26 deletions(-)

diff --git a/frontend/src/app/workspace/chats/[thread_id]/page.tsx b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
index 47e477c2..5ae61615 100644
--- a/frontend/src/app/workspace/chats/[thread_id]/page.tsx
+++ b/frontend/src/app/workspace/chats/[thread_id]/page.tsx
@@ -6,7 +6,6 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 
 import { ConversationEmptyState } from "@/components/ai-elements/conversation";
 import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
 import {
   DevDialog,
   DevDialogContent,
@@ -15,6 +14,7 @@ import {
   DevDialogTitle,
 } from "@/components/ui/dev-dialog";
 import { useSidebar } from "@/components/ui/sidebar";
+import { Skeleton } from "@/components/ui/skeleton";
 import {
   ArtifactFileDetail,
   ArtifactFileList,
diff --git a/frontend/src/app/workspace/layout.tsx b/frontend/src/app/workspace/layout.tsx
index 14da7ae6..110de7a6 100644
--- a/frontend/src/app/workspace/layout.tsx
+++ b/frontend/src/app/workspace/layout.tsx
@@ -9,9 +9,9 @@ import {
   useRef,
   useState,
 } from "react";
-import { Toaster } from "@/components/ui/sonner";
 
 import { SidebarInset, SidebarProvider } from "@/components/ui/sidebar";
+import { Toaster } from "@/components/ui/sonner";
 import { CommandPalette } from "@/components/workspace/command-palette";
 import { WorkspaceSidebar } from "@/components/workspace/workspace-sidebar";
 import { getLocalSettings, useLocalSettings } from "@/core/settings";
diff --git a/frontend/src/components/ai-elements/artifact.tsx b/frontend/src/components/ai-elements/artifact.tsx
index cfd8f659..e7640d87 100644
--- a/frontend/src/components/ai-elements/artifact.tsx
+++ b/frontend/src/components/ai-elements/artifact.tsx
@@ -140,8 +140,8 @@ export const ArtifactContent = ({
   className,
   ...props
 }: ArtifactContentProps) => (
-  <div className="min-h-0 flex-1 overflow-auto rounded-[10px]">
+  <div className="min-h-0 flex-1 overflow-auto rounded-[10px]" {...props} >
     {/* <div className={cn("mb-[207px]! p-4", className)} {...props} /> */}
-    <div className={cn("mb-[150px] min-h-full p-4", className)} {...props} />
+    {/* <div className={cn("mb-[150px] min-h-full p-4", className)} /> */}
   </div>
 );
diff --git a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
index fb24baa3..dcee6279 100644
--- a/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
+++ b/frontend/src/components/workspace/artifacts/artifact-file-detail.tsx
@@ -198,7 +198,7 @@ export function ArtifactFileDetail({
     // 给滚动遮挡头部定位relative
     <Artifact
       className={cn(
-        "bg-background relative overflow-hidden rounded-2xl",
+        "bg-background relative h-full overflow-hidden rounded-2xl",
         className,
       )}
     >
@@ -480,33 +480,39 @@ export function ArtifactFileDetail({
           </ArtifactActions>
         </div>
       </ArtifactHeader>
-      <ArtifactContent className="rounded-b-[10px] bg-white p-0">
+      <ArtifactContent>
         {/* 遮挡多余的滚动顶部 */}
         {/* <div className="absolute w-[calc(100%-40px)] bg-white z-20 h-5 rounded-t-[10px] top-[57px]"></div> */}
         {previewable &&
           viewMode === "preview" &&
           (language === "markdown" || language === "html") && (
-            <ArtifactFilePreview
-              content={displayContent}
-              language={language ?? "text"}
-              zoom={zoom}
-            />
+            <div className="min-h-full mb-[150px]  rounded-b-[10px] bg-white p-0 mb-0">
+              <ArtifactFilePreview
+                content={displayContent}
+                language={language ?? "text"}
+                zoom={zoom}
+              />
+            </div>
           )}
         {isCodeFile && viewMode === "code" && (
-          <CodeEditor
-            className="size-full resize-none rounded-none border-none py-[20px]"
-            value={displayContent ?? ""}
-            zoom={zoom}
-            readonly
-          />
+          <div className="min-h-full mb-[150px]  rounded-b-[10px] bg-white p-0 mb-0">
+            <CodeEditor
+              className="size-full resize-none rounded-none border-none py-[20px]"
+              value={displayContent ?? ""}
+              zoom={zoom}
+              readonly
+            />
+          </div>
         )}
         {!isCodeFile && (
-          <iframe
-            className="size-full border-0"
-            srcDoc={artifactViewerSrcDoc}
-            sandbox="allow-same-origin allow-scripts allow-downloads"
-            title={`Artifact preview: ${fileName}`}
-          />
+            <div className="h-full mb-[150px] ">
+              <iframe
+                className="size-full border-0"
+                srcDoc={artifactViewerSrcDoc}
+                sandbox="allow-same-origin allow-scripts allow-downloads"
+                title={`Artifact preview: ${fileName}`}
+              />
+            </div>
         )}
       </ArtifactContent>
     </Artifact>
@@ -527,7 +533,7 @@ export function ArtifactFilePreview({
   if (language === "markdown") {
     return (
       <div
-        className={cn("w-full p-[20px]")}
+        className={cn("w-full mb-[207px] p-[20px]")}
         style={{ "--zoom-scale": zoomScale } as React.CSSProperties}
       >
         <Streamdown
@@ -617,6 +623,8 @@ function buildArtifactViewerSrcDoc({
     </div>`;
   })();
 
+  const bodyClass = kind === "image" ? "fullbleed" : "";
+
   return `<!doctype html>
 <html lang="en">
 <head>
@@ -648,8 +656,12 @@ function buildArtifactViewerSrcDoc({
       overflow: hidden;
       padding: 12px;
     }
+    body.fullbleed {
+      padding: 0;
+    }
     .preview {
       width: 100%;
+      height: 100%;
       border: 1px solid var(--line);
       border-radius: var(--radius);
       background: var(--panel);
@@ -715,7 +727,7 @@ function buildArtifactViewerSrcDoc({
     .link:hover { text-decoration: underline; }
   </style>
 </head>
-<body>
+<body class="${bodyClass}">
   ${content}
 </body>
 </html>`;
diff --git a/frontend/src/components/workspace/chats/chat-box.tsx b/frontend/src/components/workspace/chats/chat-box.tsx
index 3f693bc4..e92a6c39 100644
--- a/frontend/src/components/workspace/chats/chat-box.tsx
+++ b/frontend/src/components/workspace/chats/chat-box.tsx
@@ -23,7 +23,10 @@ import { useThread } from "../messages/context";
 const CLOSE_MODE = { chat: 100, artifacts: 0 };
 const OPEN_MODE = { chat: 60, artifacts: 40 };
 
-const ChatBox: React.FC<{ children: React.ReactNode; threadId: string }> = ({
+const ChatBox: React.FC<{
+  children: React.ReactNode;
+  threadId: string | undefined;
+}> = ({
   children,
   threadId,
 }) => {