feat: chats_iframe去掉侧边栏和主题
This commit is contained in:
1 parent
41ce95cbf1
commit
3f014a6fe1
5 files changed
+74
-9
No files matched your search
@@ -7,6 +7,7 @@ import { QueryClientProvider } from "@/components/query-client-provider";
|
|||||||
import { AuthSyncWatcher } from "@/core/auth/sync";
|
import { AuthSyncWatcher } from "@/core/auth/sync";
|
||||||
import { I18nProvider } from "@/core/i18n/context";
|
import { I18nProvider } from "@/core/i18n/context";
|
||||||
import { detectLocale } from "@/core/i18n/locale";
|
import { detectLocale } from "@/core/i18n/locale";
|
||||||
|
import { resolveForcedThemeForPath } from "@/core/page-layout/chats-iframe-route";
|
||||||
import { ChatProvider } from "@/contexts/ChatContext";
|
import { ChatProvider } from "@/contexts/ChatContext";
|
||||||
import { ThemeProvider } from "@/contexts/ThemeContext";
|
import { ThemeProvider } from "@/contexts/ThemeContext";
|
||||||
|
|
||||||
@@ -29,7 +30,7 @@ import { NotFoundPage } from "./pages/NotFoundPage";
|
|||||||
function AppProviders({ children }: { children: React.ReactNode }) {
|
function AppProviders({ children }: { children: React.ReactNode }) {
|
||||||
const locale = useMemo(() => detectLocale(), []);
|
const locale = useMemo(() => detectLocale(), []);
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
const forcedTheme = location.pathname === "/landing" ? "light" : undefined;
|
const forcedTheme = resolveForcedThemeForPath(location.pathname);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<NextThemesProvider
|
<NextThemesProvider
|
||||||
|
|||||||
@@ -0,0 +1,33 @@
|
|||||||
|
import assert from "node:assert/strict";
|
||||||
|
import test from "node:test";
|
||||||
|
|
||||||
|
import {
|
||||||
|
isChatsIframeWorkspacePath,
|
||||||
|
resolveForcedThemeForPath,
|
||||||
|
} from "./chats-iframe-route.ts";
|
||||||
|
|
||||||
|
test("matches only workspace chats_iframe routes", () => {
|
||||||
|
assert.equal(
|
||||||
|
isChatsIframeWorkspacePath("/page/workspace/chats_iframe/new"),
|
||||||
|
true,
|
||||||
|
);
|
||||||
|
assert.equal(
|
||||||
|
isChatsIframeWorkspacePath("/page/workspace/chats_iframe/thread-123"),
|
||||||
|
true,
|
||||||
|
);
|
||||||
|
assert.equal(isChatsIframeWorkspacePath("/page/workspace/chats/new"), false);
|
||||||
|
assert.equal(isChatsIframeWorkspacePath("/landing"), false);
|
||||||
|
});
|
||||||
|
|
||||||
|
test("forces light theme for landing and chats_iframe routes only", () => {
|
||||||
|
assert.equal(resolveForcedThemeForPath("/landing"), "light");
|
||||||
|
assert.equal(
|
||||||
|
resolveForcedThemeForPath("/page/workspace/chats_iframe/new"),
|
||||||
|
"light",
|
||||||
|
);
|
||||||
|
assert.equal(
|
||||||
|
resolveForcedThemeForPath("/page/workspace/chats_iframe/thread-123"),
|
||||||
|
"light",
|
||||||
|
);
|
||||||
|
assert.equal(resolveForcedThemeForPath("/page/workspace/chats/new"), undefined);
|
||||||
|
});
|
||||||
@@ -0,0 +1,16 @@
|
|||||||
|
export function isChatsIframeWorkspacePath(pathname: string): boolean {
|
||||||
|
return (
|
||||||
|
pathname === "/page/workspace/chats_iframe/new" ||
|
||||||
|
pathname.startsWith("/page/workspace/chats_iframe/")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function resolveForcedThemeForPath(
|
||||||
|
pathname: string,
|
||||||
|
): "light" | undefined {
|
||||||
|
if (pathname === "/landing" || isChatsIframeWorkspacePath(pathname)) {
|
||||||
|
return "light";
|
||||||
|
}
|
||||||
|
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
@@ -3,8 +3,10 @@ import { Navigate, Route, Routes } from "react-router-dom";
|
|||||||
|
|
||||||
import { PageSidebar } from "@/components/page-sidebar";
|
import { PageSidebar } from "@/components/page-sidebar";
|
||||||
import { PageSidebarDark } from "@/components/page-sidebar-dark";
|
import { PageSidebarDark } from "@/components/page-sidebar-dark";
|
||||||
|
import { isChatsIframeWorkspacePath } from "@/core/page-layout/chats-iframe-route";
|
||||||
import { readSidebarEnabled } from "@/core/page-layout/sidebar-enabled";
|
import { readSidebarEnabled } from "@/core/page-layout/sidebar-enabled";
|
||||||
import { useTheme } from "@/contexts/ThemeContext";
|
import { useTheme } from "@/contexts/ThemeContext";
|
||||||
|
import { useLocation } from "react-router-dom";
|
||||||
|
|
||||||
import WorkspaceRoutes from "./WorkspaceRoutes";
|
import WorkspaceRoutes from "./WorkspaceRoutes";
|
||||||
import StrategyRoutes from "./StrategyRoutes";
|
import StrategyRoutes from "./StrategyRoutes";
|
||||||
@@ -16,17 +18,20 @@ import NotebookRoutes from "./NotebookRoutes";
|
|||||||
function PageLayout() {
|
function PageLayout() {
|
||||||
const [collapsed, setCollapsed] = useState(false);
|
const [collapsed, setCollapsed] = useState(false);
|
||||||
const sidebarEnabled = useMemo(() => readSidebarEnabled(), []);
|
const sidebarEnabled = useMemo(() => readSidebarEnabled(), []);
|
||||||
|
const location = useLocation();
|
||||||
const { theme } = useTheme();
|
const { theme } = useTheme();
|
||||||
const isDark = theme === "dark";
|
const isDark = theme === "dark";
|
||||||
|
const pageSidebarAllowed =
|
||||||
|
sidebarEnabled && !isChatsIframeWorkspacePath(location.pathname);
|
||||||
|
|
||||||
// h-full(100%)而非 h-screen(100vh):配合 globals.css 的 html/body/#root height:100%
|
// h-full(100%)而非 h-screen(100vh):配合 globals.css 的 html/body/#root height:100%
|
||||||
// 高度链,根布局跟随容器高度。全屏下 100% 解析到视口,与 h-screen 等价;无界等嵌套
|
// 高度链,根布局跟随容器高度。全屏下 100% 解析到视口,与 h-screen 等价;无界等嵌套
|
||||||
// 下容器不占满整屏时,高度才能正确收缩而非锁死整屏。
|
// 下容器不占满整屏时,高度才能正确收缩而非锁死整屏。
|
||||||
return (
|
return (
|
||||||
<div className="h-full flex flex-col bg-muted/20">
|
<div className="h-full flex flex-col bg-muted/20">
|
||||||
{sidebarEnabled && <Header collapsed={collapsed} />}
|
{pageSidebarAllowed && <Header collapsed={collapsed} />}
|
||||||
<div className="flex flex-1 overflow-hidden">
|
<div className="flex flex-1 overflow-hidden">
|
||||||
{sidebarEnabled && (
|
{pageSidebarAllowed && (
|
||||||
isDark ? (
|
isDark ? (
|
||||||
<PageSidebarDark
|
<PageSidebarDark
|
||||||
collapsed={collapsed}
|
collapsed={collapsed}
|
||||||
@@ -41,7 +46,7 @@ function PageLayout() {
|
|||||||
)}
|
)}
|
||||||
<main
|
<main
|
||||||
className={`flex-1 overflow-hidden ${
|
className={`flex-1 overflow-hidden ${
|
||||||
!sidebarEnabled
|
!pageSidebarAllowed
|
||||||
? ""
|
? ""
|
||||||
: isDark
|
: isDark
|
||||||
// 深色 sidebar:展开 118px(10 + 98 + 10 gap),收起 = 0 sidebar 完全消失,
|
// 深色 sidebar:展开 118px(10 + 98 + 10 gap),收起 = 0 sidebar 完全消失,
|
||||||
@@ -59,9 +64,9 @@ function PageLayout() {
|
|||||||
element={
|
element={
|
||||||
<WorkspaceRoutes
|
<WorkspaceRoutes
|
||||||
pageSidebarCollapsed={collapsed}
|
pageSidebarCollapsed={collapsed}
|
||||||
pageSidebarHidden={!sidebarEnabled}
|
pageSidebarHidden={!pageSidebarAllowed}
|
||||||
headerHidden={!sidebarEnabled}
|
headerHidden={!pageSidebarAllowed}
|
||||||
compactWorkspaceSidebar={sidebarEnabled}
|
compactWorkspaceSidebar={pageSidebarAllowed}
|
||||||
pageSidebarDark={isDark}
|
pageSidebarDark={isDark}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -67,6 +67,7 @@ export function WorkspaceLayout({
|
|||||||
children,
|
children,
|
||||||
pageSidebarCollapsed,
|
pageSidebarCollapsed,
|
||||||
pageSidebarHidden = false,
|
pageSidebarHidden = false,
|
||||||
|
workspaceSidebarHidden = false,
|
||||||
headerHidden = false,
|
headerHidden = false,
|
||||||
compactWorkspaceSidebar = false,
|
compactWorkspaceSidebar = false,
|
||||||
wrapperOverflowHidden = false,
|
wrapperOverflowHidden = false,
|
||||||
@@ -76,6 +77,7 @@ export function WorkspaceLayout({
|
|||||||
children: ReactNode;
|
children: ReactNode;
|
||||||
pageSidebarCollapsed: boolean;
|
pageSidebarCollapsed: boolean;
|
||||||
pageSidebarHidden?: boolean;
|
pageSidebarHidden?: boolean;
|
||||||
|
workspaceSidebarHidden?: boolean;
|
||||||
headerHidden?: boolean;
|
headerHidden?: boolean;
|
||||||
compactWorkspaceSidebar?: boolean;
|
compactWorkspaceSidebar?: boolean;
|
||||||
wrapperOverflowHidden?: boolean;
|
wrapperOverflowHidden?: boolean;
|
||||||
@@ -109,7 +111,9 @@ export function WorkspaceLayout({
|
|||||||
data-page-sidebar-collapsed={pageSidebarCollapsed}
|
data-page-sidebar-collapsed={pageSidebarCollapsed}
|
||||||
defaultOpen
|
defaultOpen
|
||||||
>
|
>
|
||||||
<WorkspaceSidebar compactChrome={compactWorkspaceSidebar} />
|
{!workspaceSidebarHidden && (
|
||||||
|
<WorkspaceSidebar compactChrome={compactWorkspaceSidebar} />
|
||||||
|
)}
|
||||||
<SidebarInset
|
<SidebarInset
|
||||||
className={cn('min-w-0', insetOverflowHidden && 'overflow-hidden')}
|
className={cn('min-w-0', insetOverflowHidden && 'overflow-hidden')}
|
||||||
>
|
>
|
||||||
@@ -205,7 +209,11 @@ export default function WorkspaceRoutes({
|
|||||||
<Route
|
<Route
|
||||||
path="chats_iframe/new"
|
path="chats_iframe/new"
|
||||||
element={
|
element={
|
||||||
<WorkspaceLayout {...layoutProps}>
|
<WorkspaceLayout
|
||||||
|
{...layoutProps}
|
||||||
|
pageSidebarHidden
|
||||||
|
workspaceSidebarHidden
|
||||||
|
>
|
||||||
<ChatRuntime>
|
<ChatRuntime>
|
||||||
<IframeChatPage />
|
<IframeChatPage />
|
||||||
</ChatRuntime>
|
</ChatRuntime>
|
||||||
@@ -217,6 +225,8 @@ export default function WorkspaceRoutes({
|
|||||||
element={
|
element={
|
||||||
<WorkspaceLayout
|
<WorkspaceLayout
|
||||||
{...layoutProps}
|
{...layoutProps}
|
||||||
|
pageSidebarHidden
|
||||||
|
workspaceSidebarHidden
|
||||||
wrapperOverflowHidden
|
wrapperOverflowHidden
|
||||||
insetOverflowHidden
|
insetOverflowHidden
|
||||||
>
|
>
|
||||||
|
|||||||
Reference in new issue
Block a user