77 lines
2.4 KiB
TypeScript
77 lines
2.4 KiB
TypeScript
import React from 'react';
|
||
import { Drawer, Grid } from 'antd';
|
||
import InputPanel from './InputPanel.tsx';
|
||
import HintText from './HintText.tsx';
|
||
import './InputDrawer.css';
|
||
|
||
type Props = {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
onResult?: (data: any) => void;
|
||
containerEl?: HTMLElement | null; // 抽屉挂载容器（用于放在标题栏下方）
|
||
showUpload?: boolean; // 透传到输入面板，控制图片上传按钮
|
||
mode?: 'input' | 'search'; // 透传到输入面板，控制工作模式
|
||
};
|
||
|
||
const InputDrawer: React.FC<Props> = ({ open, onClose, onResult, containerEl, showUpload = true, mode = 'input' }) => {
|
||
const screens = Grid.useBreakpoint();
|
||
const isMobile = !screens.md;
|
||
const [topbarHeight, setTopbarHeight] = React.useState<number>(56);
|
||
|
||
React.useEffect(() => {
|
||
const update = () => {
|
||
const el = document.querySelector('.topbar') as HTMLElement | null;
|
||
const h = el?.clientHeight || 56;
|
||
setTopbarHeight(h);
|
||
};
|
||
update();
|
||
window.addEventListener('resize', update);
|
||
return () => window.removeEventListener('resize', update);
|
||
}, []);
|
||
|
||
// 在输入处理成功（onResult 被调用）后，自动关闭抽屉
|
||
const handleResult = React.useCallback(
|
||
(data: any) => {
|
||
onResult?.(data);
|
||
onClose();
|
||
},
|
||
[onResult, onClose]
|
||
);
|
||
|
||
return (
|
||
<Drawer
|
||
className="input-drawer"
|
||
placement="right"
|
||
width={isMobile ? '100%' : '33%'}
|
||
open={open}
|
||
onClose={onClose}
|
||
mask
|
||
getContainer={containerEl ? () => containerEl : undefined}
|
||
closable={false}
|
||
zIndex={1500}
|
||
rootStyle={{ top: topbarHeight, height: `calc(100% - ${topbarHeight}px)` }}
|
||
styles={{
|
||
header: { display: 'none' },
|
||
body: {
|
||
padding: 16,
|
||
height: '100%',
|
||
display: 'flex',
|
||
flexDirection: 'column',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
},
|
||
// mask: { top: topbarHeight, height: `calc(100% - ${topbarHeight}px)`, backgroundColor: 'var(--mask)' },
|
||
}}
|
||
>
|
||
<div className="input-drawer-inner">
|
||
<div className="input-drawer-title">AI FIND U</div>
|
||
<div className="input-drawer-box">
|
||
<InputPanel onResult={handleResult} showUpload={showUpload} mode={mode} />
|
||
<HintText showUpload={showUpload} />
|
||
</div>
|
||
</div>
|
||
</Drawer>
|
||
);
|
||
};
|
||
|
||
export default InputDrawer; |