From da2864f42287ad86f37c0ab28edd2415f5c96627 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=91=A3=E5=AE=8F=E5=87=AF?= <hkdong@kland.com.cn>
Date: Sun, 14 Jun 2026 19:30:04 +0800
Subject: [PATCH] fix(chat): align compactChrome logic with layoutMode
 preference for dark-blue bg

ChatPage's compactChrome was still using readSidebarEnabled() alone, but
PageRoutes now honors the explicit layoutMode setting (full/compact). When a
user sets layout to 'full' without portal login, PageRoutes shows chrome but
ChatPage didn't apply workspace-chat-bg, hiding the dark-blue theme background.

Now ChatPage mirrors PageRoutes' logic: prioritize layoutMode, fallback to
readSidebarEnabled() if unset.
---
 frontend-web/src/pages/ChatPage.tsx | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/frontend-web/src/pages/ChatPage.tsx b/frontend-web/src/pages/ChatPage.tsx
index bec69ea1..e39c5f58 100644
--- a/frontend-web/src/pages/ChatPage.tsx
+++ b/frontend-web/src/pages/ChatPage.tsx
@@ -42,6 +42,7 @@ import {
   getLastAgentId,
   saveLastAgentId,
   useKnowledgeRagEnabled,
+  useLocalSettings,
   useThreadSettings,
 } from "@/core/settings";
 import { useThreadStream } from "@/core/threads/hooks";
@@ -95,6 +96,7 @@ export default function ChatPage() {
   const { open: historySidebarOpen, toggleSidebar: toggleHistorySidebar } =
     useSidebar();
   const { t } = useI18n();
+  const [localSettings] = useLocalSettings();
   const [showFollowups, setShowFollowups] = useState(false);
   const [hasStartedConversation, setHasStartedConversation] = useState(false);
   const { threadId, setThreadId, isNewThread, setIsNewThread, isMock } =
@@ -412,15 +414,31 @@ export default function ChatPage() {
     : undefined;
   const isLandingState = isNewThread && !hasStartedConversation;
   // 紧凑模式（正常 App，有外层页面侧栏）落地态：用 CM 参考图样式重画；
-  // 判定与 PageRoutes 的 compactWorkspaceSidebar 一致，非紧凑（嵌入/standalone）保持原样。
+  // 判定与 PageRoutes 的 compactWorkspaceSidebar(pageSidebarAllowed) 保持一致 ——
+  // 优先看外观设置的「全量/简洁」，未设置过才回退到会话级 sidebarEnabled。否则用户显式
+  // 选「全量」时 PageRoutes 已挂出顶栏+侧栏，这里却还按旧 sidebarEnabled 判定，导致深蓝
+  // 主题底图(workspace-chat-bg)不生效。非紧凑（嵌入/standalone）保持原样。
+  const layoutMode = localSettings.display.layoutMode;
+  const chromeByPreference =
+    layoutMode === "full"
+      ? true
+      : layoutMode === "compact"
+        ? false
+        : readSidebarEnabled();
   const compactChrome =
-    readSidebarEnabled() && !isChatsIframeWorkspacePath(pathname);
+    chromeByPreference && !isChatsIframeWorkspacePath(pathname);
   const compactLanding = isLandingState && compactChrome;
 
   return (
     <ThreadContext.Provider value={{ thread, isMock }}>
       <ChatBox threadId={threadId}>
-        <div className="relative flex size-full min-h-0 justify-between">
+        <div
+          className={cn(
+            "relative flex size-full min-h-0 justify-between",
+            // 紧凑模式（有顶栏+左侧页面侧栏）下，深色背景换成设计稿深蓝主题底图
+            compactChrome && "workspace-chat-bg",
+          )}
+        >
           <header
             className={cn(
               "absolute top-0 right-0 left-0 z-30 flex h-12 shrink-0 items-center border-b px-4",