ryesun's picture
initial
d757506
import React, {useEffect, useState} from 'react'
import { withRouter } from 'react-router-dom'
import { Tabs, Space, Input, Button } from 'antd-mobile'
import { ArrowsAltOutline, UpCircleOutline, AudioOutline } from 'antd-mobile-icons';
import ChatCom from './components/ChatCom';
import SearchCom from './components/SearchCom'
import { getTxt2Img, getChatData } from './components/ChatCom/service';
import defaultDemo from './images/defaultImage.png';
import type { MessageType } from './components/ChatCom';
import "./style.less"
function Home(props: any) {
const [bgImage, setBgImage] = useState(defaultDemo);
const [isShowBig, setShowBig] = useState(false);
const [value, setValue] = useState('');
const [messages, setMessages] = useState<MessageType[]>([]);
const [isShowInput, setIsShowInput] = useState(true);
const handleEnterPress = () => {
if (value === '') {
return;
}
setMessages((messages) => [...messages, {
type: '0',
value,
}]);
setValue('');
getChatData(value).then((res: any) => {
setTimeout(() => {
setMessages((messages) => [...messages, {
type: '1',
value: res.data?.response || '',
}]);
}, 30);
})
}
useEffect(() => {
getTxt2Img('A young lady is wearing a white button-down shirt, a black midi skirt, light brown pumps, and a beige trench coat for a professional and elegant look.').then((res: any) => {
if (res) {
setBgImage('data:image/png;base64,' + res.data.images[0]);
}
})
}, []);
return (
<div className="home" style={{backgroundImage: `url(${bgImage})`}}>
<ArrowsAltOutline fontSize={32} onClick={() => setShowBig(!isShowBig)}></ArrowsAltOutline>
{
!isShowBig && <Tabs onChange={(key) => { setIsShowInput(key === 'chat')}}>
<Tabs.Tab title='穿搭' key='chat'>
<ChatCom messages={messages}></ChatCom>
</Tabs.Tab>
<Tabs.Tab title='单品' key='recommend'>
<SearchCom></SearchCom>
</Tabs.Tab>
</Tabs>
}
{isShowBig && isShowInput && <ChatCom messages={messages}></ChatCom>}
{isShowInput && <div className="chat-container-input">
<Space>
<AudioOutline fontSize={24} />
<Input
placeholder='输入文字'
value={value}
onChange={val => {
setValue(val)
}}
onEnterPress={handleEnterPress}
/>
<Button onClick={handleEnterPress}>
<UpCircleOutline fontSize={24}></UpCircleOutline>
</Button>
</Space>
</div>
}
</div>
)
}
export default withRouter(Home)