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();
|
const [mode, setLayoutMode] = useLayoutMode();
|
||||||
// 未显式设置过时简洁模式才会渲染本控件(全量模式有全局顶栏),故当前态按 compact 兜底。
|
const current = mode ?? fallback;
|
||||||
const current = mode === "full" ? "full" : "compact";
|
|
||||||
const TriggerIcon = current === "full" ? PanelLeftIcon : LayoutIcon;
|
const TriggerIcon = current === "full" ? PanelLeftIcon : LayoutIcon;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ import { useLocation, useNavigate } from "react-router-dom";
|
|||||||
|
|
||||||
import { Button } from "@/components/ui/button";
|
import { Button } from "@/components/ui/button";
|
||||||
import "@/components/page-sdebar.css";
|
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 { NotificationDialog } from "@/components/workspace/notification-dialog";
|
||||||
import { getStoredAuth, getAccountDisplayName } from "@/core/auth";
|
import { getStoredAuth, getAccountDisplayName } from "@/core/auth";
|
||||||
import { isWujieEnv } from "@/core/embed/wujie";
|
import { isWujieEnv } from "@/core/embed/wujie";
|
||||||
@@ -126,6 +126,11 @@ const Header = ({ collapsed }: HeaderProps) => {
|
|||||||
<>
|
<>
|
||||||
<ThemeSwitcher tone={isDark ? "banner-dark" : "banner-light"} />
|
<ThemeSwitcher tone={isDark ? "banner-dark" : "banner-light"} />
|
||||||
|
|
||||||
|
<LayoutModeSwitcher
|
||||||
|
tone={isDark ? "banner-dark" : "banner-light"}
|
||||||
|
fallback="full"
|
||||||
|
/>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
type="button"
|
type="button"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
|
|||||||
Reference in new issue
Block a user