43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import type { PropsWithChildren, ReactNode } from 'react';
|
|
import { View } from '@tarojs/components';
|
|
import FloatingToastHost from './FloatingToastHost';
|
|
import { pageShellCssVars, useNavBarMetrics } from '../lib/nav-bar';
|
|
|
|
type PageShellVariant = 'tab' | 'scroll' | 'sub' | 'plain';
|
|
|
|
type PageShellProps = PropsWithChildren<{
|
|
variant?: PageShellVariant;
|
|
className?: string;
|
|
/** 栈页固定底栏时额外底部留白 */
|
|
hasFixedFooter?: boolean;
|
|
}>;
|
|
|
|
/**
|
|
* 页面壳：唯一注入刘海屏 CSS 变量；统一 min-height / 底栏安全区。
|
|
* 顶栏组件自行调用 navBarStyle，不要在根节点再套 navBarStyle。
|
|
*/
|
|
export default function PageShell({
|
|
variant = 'tab',
|
|
className = '',
|
|
hasFixedFooter = false,
|
|
children,
|
|
}: PageShellProps) {
|
|
const metrics = useNavBarMetrics();
|
|
const classes = [
|
|
'page-shell',
|
|
`page-shell--${variant}`,
|
|
hasFixedFooter ? 'page-shell--fixed-footer' : '',
|
|
variant === 'tab' && process.env.TARO_ENV === 'weapp' ? 'page-shell--native-tabbar' : '',
|
|
className,
|
|
]
|
|
.filter(Boolean)
|
|
.join(' ');
|
|
|
|
return (
|
|
<View className={classes} style={pageShellCssVars(metrics)}>
|
|
{children as ReactNode}
|
|
<FloatingToastHost />
|
|
</View>
|
|
);
|
|
}
|