feat(ui): 调整聊天页布局比例及 artifacts 滚动条遮挡处理

- 修改 artifactsOpen 时容器宽度从 70% 改为 50%
- 文件阅读区添加圆角样式
- 文件阅读区添加滚动条顶部遮挡层,优化视觉体验
- 代码编辑器增加 py-[20px] 内边距
- InputBox 已提交状态强制显示阴影效果
This commit is contained in:
肖应宇 2026-03-20 16:31:28 +08:00
parent 0e3da716ed
commit 03e95aee91
4 changed files with 10 additions and 6 deletions

View File

@ -255,7 +255,7 @@ export default function ChatPage() {
<div <div
className={cn( className={cn(
"m-auto flex h-screen min-h-svh overflow-hidden rounded-t-[20px] transition-[width] duration-300 ease-in-out", "m-auto flex h-screen min-h-svh overflow-hidden rounded-t-[20px] transition-[width] duration-300 ease-in-out",
artifactsOpen ? "w-full" : "w-[70%]", artifactsOpen ? "w-full" : "w-[50%]",
)} )}
> >
<div className="relative flex size-full min-h-0 justify-between rounded-t-[20px]"> <div className="relative flex size-full min-h-0 justify-between rounded-t-[20px]">
@ -372,7 +372,7 @@ export default function ChatPage() {
artifactPanelOpen artifactPanelOpen
? fullscreen ? fullscreen
? "ml-0 w-full" ? "ml-0 w-full"
: "w-[70%]" : "w-[50%]"
: "w-0", : "w-0",
)} )}
> >

View File

@ -140,7 +140,7 @@ export const ArtifactContent = ({
className, className,
...props ...props
}: ArtifactContentProps) => ( }: ArtifactContentProps) => (
<div className="min-h-0 flex-1 overflow-auto"> <div className="min-h-0 rounded-[10px] flex-1 overflow-auto">
<div className={cn("mb-[150px] p-4", className)} {...props} /> <div className={cn("mb-[150px] p-4", className)} {...props} />
</div> </div>
); );

View File

@ -154,7 +154,8 @@ export function ArtifactFileDetail({
} }
}, [threadId, filepath, isInstalling]); }, [threadId, filepath, isInstalling]);
return ( return (
<Artifact className={cn(className)}> // 给滚动遮挡头部定位relative
<Artifact className={cn("relative",className)}>
<ArtifactHeader> <ArtifactHeader>
<div className="flex items-center justify-start gap-2"> <div className="flex items-center justify-start gap-2">
{previewable && ( {previewable && (
@ -387,7 +388,9 @@ export function ArtifactFileDetail({
</ArtifactActions> </ArtifactActions>
</div> </div>
</ArtifactHeader> </ArtifactHeader>
<ArtifactContent className="rounded-[10px] bg-white p-0"> <ArtifactContent className=" rounded-b-[10px] bg-white p-0">
{/* 遮挡多余的滚动顶部 */}
<div className="absolute w-[calc(100%-40px)] bg-white z-20 h-5 rounded-t-[10px] top-[57px]"></div>
{previewable && {previewable &&
viewMode === "preview" && viewMode === "preview" &&
(language === "markdown" || language === "html") && ( (language === "markdown" || language === "html") && (
@ -399,7 +402,7 @@ export function ArtifactFileDetail({
)} )}
{isCodeFile && viewMode === "code" && ( {isCodeFile && viewMode === "code" && (
<CodeEditor <CodeEditor
className="size-full resize-none rounded-none border-none" className="size-full py-[20px] resize-none rounded-none border-none"
value={displayContent ?? ""} value={displayContent ?? ""}
zoom={zoom} zoom={zoom}
readonly readonly

View File

@ -307,6 +307,7 @@ export function InputBox({
"border-0 rounded-[20px] backdrop-blur-sm", "border-0 rounded-[20px] backdrop-blur-sm",
"transition-[height] duration-300 ease-out shadow-none ", "transition-[height] duration-300 ease-out shadow-none ",
!isNewThread && "h-[200px] shadow-[0_0_20px_0_rgba(0,0,0,0.10)]", !isNewThread && "h-[200px] shadow-[0_0_20px_0_rgba(0,0,0,0.10)]",
hasSubmitted&& "shadow-[0_0_20px_0_rgba(0,0,0,0.10)]!",
effectiveIsFocused ? "h-[200px]" : "h-[80px]", effectiveIsFocused ? "h-[200px]" : "h-[80px]",
)} )}
disabled={disabled} disabled={disabled}