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:
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"
|
||||
|
||||
Reference in new issue
Block a user