39 lines
1.0 KiB
TypeScript
39 lines
1.0 KiB
TypeScript
/**
|
||
* 500px 移动端 Shell（Server Component）
|
||
*
|
||
* 原始 Dart: 每个屏幕的 `Scaffold → SafeArea → Center → ConstrainedBox(maxWidth: 500)` 模式
|
||
* （`Breakpoints.mobileMaxWidth = 500.0`）。
|
||
*
|
||
* 集中封装，调用方仅需 `<MobileShell>{...}</MobileShell>` 即可获得统一的移动端宽度约束。
|
||
*
|
||
* 本组件无 hooks，可作为 Server Component 直接 SSR。
|
||
*/
|
||
import type { ReactNode } from "react";
|
||
|
||
import styles from "./mobile-shell.module.css";
|
||
|
||
export interface MobileShellProps {
|
||
children: ReactNode;
|
||
/** 自定义背景色（默认透明，继承 body 背景）。 */
|
||
background?: string;
|
||
/** 自定义 className（注入到内容容器上）。 */
|
||
className?: string;
|
||
}
|
||
|
||
export function MobileShell({
|
||
children,
|
||
background,
|
||
className,
|
||
}: MobileShellProps) {
|
||
return (
|
||
<div className={styles.shell}>
|
||
<div
|
||
className={[styles.content, className].filter(Boolean).join(" ")}
|
||
style={background ? { background } : undefined}
|
||
>
|
||
{children}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|