fix: center bottom composer between sidebar and teachers

This commit is contained in:
鲨鱼辣椒 committed 2026-09-29 16:15:05 +08:00
1 parent e812371973
commit 521e1ee167
8 files changed
+78 -15

No files matched your search

+12 -6
View File
@@ -8,14 +8,19 @@ export function CodingChatBody({ welcome, hidden, bubble, children }: {
useLayoutEffect(() => {
const body = ref.current;
const content = body?.querySelector<HTMLElement>('.classroom-chat-view');
if (!body || !content || !welcome || hidden || !bubble) return;
if (!body || !content || hidden || !bubble) return;
const update = () => {
const area = content.getBoundingClientRect();
const area = body.getBoundingClientRect();
const message = bubble.getBoundingClientRect();
const overlaps = message.height > 0 && message.right > area.left && message.left < area.right && message.bottom > area.top;
// Wide workspaces put the welcome beside the teachers. Compact ones flow below them.
content.style.paddingRight = overlaps && area.width >= 1050 ? `${Math.ceil(area.right - message.left + 24)}px` : '';
content.style.paddingTop = overlaps && area.width < 1050 ? `${Math.ceil(message.bottom - area.top + 24)}px` : '';
const rightInset = Math.ceil(area.right - message.left + 24);
const besideTeacher = overlaps && area.width >= 900 && area.width - rightInset - 24 >= 420;
// Reserve the same right rail for the welcome and bottom input. The teacher keeps its own fixed width.
body.style.paddingLeft = besideTeacher ? '24px' : '';
body.style.paddingRight = besideTeacher ? `${rightInset}px` : '';
// Put compact-screen clearance inside the scrolling heading, never around the fixed bottom input.
content.style.setProperty('--teacher-top-inset', welcome && overlaps && !besideTeacher
? `${Math.max(0, Math.ceil(message.bottom - content.getBoundingClientRect().top))}px` : '0px');
};
update();
const observer = typeof ResizeObserver === 'undefined' ? null : new ResizeObserver(update);
@@ -23,7 +28,8 @@ export function CodingChatBody({ welcome, hidden, bubble, children }: {
window.addEventListener('resize', update);
return () => {
observer?.disconnect(); window.removeEventListener('resize', update);
content.style.paddingRight = ''; content.style.paddingTop = '';
body.style.paddingLeft = ''; body.style.paddingRight = '';
content.style.removeProperty('--teacher-top-inset');
};
}, [welcome, hidden, bubble]);
return <div ref={ref} className="coding-chat-body" data-welcome={welcome} hidden={hidden}>{children}</div>;
+2 -1
View File
@@ -835,7 +835,7 @@ export function CodingChatPanel({
</div>
)}
{showWelcome ? <><CodingStartHeading /><CommunityInvitation /></> : targetConversationId
{showWelcome ? <CodingStartHeading /> : targetConversationId
? (
<CodingConversationTimeline
key={targetConversationId}
@@ -898,6 +898,7 @@ export function CodingChatPanel({
</div>
<div hidden={agentBrowserOpen} className="classroom-composer-view shrink-0">
{showWelcome && <CommunityInvitation />}
{selectedConversation?.archivedAt ? (
<div className="m-4 flex items-center justify-between gap-3 rounded-xl border bg-surface-subtle px-4 py-3 text-sm">
<span>{running ? '此对话已归档,任务仍在运行。' : '此对话已归档,恢复后可继续聊天。'}</span>