65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
|
|
import { XProvider } from "@ant-design/x";
|
|
import zhCN_X from "@ant-design/x/locale/zh_CN";
|
|
import { App as AntApp, Layout } from "antd";
|
|
import zhCN from "antd/locale/zh_CN";
|
|
import { useMemo } from "react";
|
|
|
|
import type { ConsoleShellProps } from "./types";
|
|
|
|
import { APP } from "../../../../shared/app";
|
|
import { useMeta } from "../../hooks/use-meta";
|
|
import { useSidebarCollapsed } from "../../hooks/use-sidebar-collapsed";
|
|
import { useThemePreference } from "../../hooks/use-theme-preference";
|
|
import { buildThemeConfig } from "../../theme/theme-config";
|
|
import { Sidebar } from "../Sidebar";
|
|
import { ConsoleOutlet } from "./ConsoleOutlet";
|
|
|
|
const { Content, Header, Sider } = Layout;
|
|
|
|
export function ConsoleShell({ headerExtra, menuItems, title }: ConsoleShellProps) {
|
|
const { effectiveTheme } = useThemePreference();
|
|
const { collapsed, setCollapsed } = useSidebarCollapsed();
|
|
const { data: meta } = useMeta();
|
|
|
|
const versionDisplay = meta?.version ? `v${meta.version}` : null;
|
|
const locale = useMemo(() => ({ ...zhCN, ...zhCN_X }), []);
|
|
|
|
return (
|
|
<XProvider locale={locale} theme={buildThemeConfig(effectiveTheme)}>
|
|
<AntApp>
|
|
<Layout className="app-layout">
|
|
<Header className="app-header">
|
|
<div className="app-header-left">
|
|
<span className="app-brand-group">
|
|
<span className="app-brand">{APP.title}</span>
|
|
{versionDisplay && <span className="app-version">{versionDisplay}</span>}
|
|
<span className="app-console-title">{title}</span>
|
|
</span>
|
|
</div>
|
|
<div className="app-header-right">{headerExtra}</div>
|
|
</Header>
|
|
<Layout>
|
|
<Sider
|
|
collapsed={collapsed}
|
|
collapsedWidth={64}
|
|
collapsible
|
|
onCollapse={(c) => setCollapsed(c)}
|
|
theme={effectiveTheme === "dark" ? "dark" : "light"}
|
|
trigger={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
|
|
width={232}
|
|
>
|
|
<Sidebar menuItems={menuItems} />
|
|
</Sider>
|
|
<Layout>
|
|
<Content className="app-content">
|
|
<ConsoleOutlet />
|
|
</Content>
|
|
</Layout>
|
|
</Layout>
|
|
</Layout>
|
|
</AntApp>
|
|
</XProvider>
|
|
);
|
|
}
|