feat(layout): 全量模式右上角也加界面模式切换

复用 appearance-controls 的 LayoutModeSwitcher,Header 操作区在换肤旁
补上界面模式下拉,与简洁模式右上角保持一致。LayoutModeSwitcher 新增
fallback 属性指明 mode 未设置时的兜底界面(Header 传 full,ChatPage 传 compact)。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
fengxiangdebaoziandClaude Opus 4.8 committed 2026-06-22 15:43:55 +08:00
1 parent 79f1a004a0
commit e28277b21b
2 files changed
+19 -6

No files matched your search

@@ -126,13 +126,21 @@ const LAYOUT_OPTIONS = [
];
/**
* 界面模式(全量 / 简洁)下拉切换。简洁模式下全局顶栏被隐藏,故把外观设置里的
* 「界面模式」切换也搬到页面级顶栏右上角,图标 + 下拉,与换肤并排。
* 界面模式(全量 / 简洁)下拉切换。换肤旁并排,图标 + 下拉:
* - 简洁模式 ChatPage 顶栏(全局顶栏被隐藏)。
* - 全量模式 Header 右上角。
* 用户未显式设置过界面模式时(mode === undefined),当前态按调用方所在的实际界面
* 兜底——`fallback` 指明这一回退值(Header 传 "full",ChatPage 传 "compact")。
*/
export function LayoutModeSwitcher({ tone }: { tone: AppearanceControlTone }) {
export function LayoutModeSwitcher({
tone,
fallback = "compact",
}: {
tone: AppearanceControlTone;
fallback?: "full" | "compact";
}) {
const [mode, setLayoutMode] = useLayoutMode();
// 未显式设置过时简洁模式才会渲染本控件(全量模式有全局顶栏),故当前态按 compact 兜底。
const current = mode === "full" ? "full" : "compact";
const current = mode ?? fallback;
const TriggerIcon = current === "full" ? PanelLeftIcon : LayoutIcon;
return (
@@ -4,7 +4,7 @@ import { useLocation, useNavigate } from "react-router-dom";
import { Button } from "@/components/ui/button";
import "@/components/page-sdebar.css";
import { ThemeSwitcher } from "@/components/workspace/appearance-controls";
import { LayoutModeSwitcher, ThemeSwitcher } from "@/components/workspace/appearance-controls";
import { NotificationDialog } from "@/components/workspace/notification-dialog";
import { getStoredAuth, getAccountDisplayName } from "@/core/auth";
import { isWujieEnv } from "@/core/embed/wujie";
@@ -126,6 +126,11 @@ const Header = ({ collapsed }: HeaderProps) => {
<>
<ThemeSwitcher tone={isDark ? "banner-dark" : "banner-light"} />
<LayoutModeSwitcher
tone={isDark ? "banner-dark" : "banner-light"}
fallback="full"
/>
<Button
type="button"
variant="ghost"