Commit 7bacd635 authored by littleforest's avatar littleforest

feat: fiished chat pages

parent e76dd32d
...@@ -3,3 +3,49 @@ ...@@ -3,3 +3,49 @@
.chatContent { .chatContent {
background: white !important; background: white !important;
} }
.sider {
min-height: 100vh;
padding: 30px 20px;
.siderChatContent {
height: 70%;
:global(.ant-btn-primary) {
background: #009b95;
border: solid 1px #009b95;
border-radius: 2px;
}
}
.siderTabs {
}
.noMentionLogin {
}
}
.chatSiderChatTabsCard {
display: flex;
margin-top: 40px;
color: white;
font-size: 18px;
cursor: pointer;
transition: all 0.15s;
.chatSiderChatTabsCardIcons {
width: 18px;
height: 18px;
margin-right: 12px;
}
.checkedChatSiderChatTabsCardIcons {
svg {
color: #009b95 !important;
}
}
.checkedChatSiderChatTabsCardText {
color: #009b95 !important;
}
.chatSiderChatTabsCardText {
flex: 1;
width: 108px;
height: 26px;
color: #ffffff;
font-weight: 400;
font-size: 18px;
font-family: PingFangSC-Regular, PingFang SC;
}
}
import { Layout, Form } from 'antd'; /* eslint-disable @typescript-eslint/no-unused-expressions */
import { Layout, Form, Button } from 'antd';
import React, { useState } from 'react'; import React, { useState } from 'react';
import { useIntl } from 'umi';
import styles from './index.less'; import styles from './index.less';
import ChatFirstContent from './components/content'; import ChatFirstContent from './components/content';
import ChatHeader from './components/header'; import ChatHeader from './components/header';
import ChatFooter from './components/footer'; import ChatFooter from './components/footer';
import {
DeleteOutlined,
PlusOutlined,
SettingOutlined,
UserOutlined,
WechatOutlined,
} from '@ant-design/icons';
import classNames from 'classnames';
const { Sider } = Layout; const { Sider } = Layout;
const { Item } = Form; const { Item } = Form;
const Chat: React.FC = () => { const Chat: React.FC = () => {
const [chat, SetChat] = useState({ const [chat, SetChat] = useState({
chatInput: '123123', chatInput: '',
}); });
const [firstChat, setFirstChat] = useState(false);
const [form] = Form.useForm();
const [selectSiderTabs, setSelectSiderTabs] = useState('');
const onSend = (value: any) => { const onSend = (value: any) => {
console.log(value); console.log(value);
form.setFieldValue('chatInput', '');
}; };
const onChange = (value: any) => { const onChange = (value: any) => {
console.log(value);
value?.chatInput && SetChat(value?.chatInput); value?.chatInput && SetChat(value?.chatInput);
value?.firstInput && SetChat({ chatInput: value?.firstInput }); value?.firstInput && setInput(value);
};
const setInput = (value: any) => {
form.setFieldValue('chatInput', value?.firstInput);
setFirstChat(true);
}; };
console.log(chat);
const siderTabsList = [
{
icons: <DeleteOutlined />,
text: '清空所有会话',
checked: 'clear',
},
{
icons: <SettingOutlined />,
text: '预留功能',
checked: 'moreFunction',
},
{
icons: <WechatOutlined />,
text: '活动交流群',
checked: 'wechat',
},
{
icons: <UserOutlined />,
text: '游客登录',
checked: 'noMentionLogin',
},
];
const selectSliderTabsHandleClick = (value: string) => {
setSelectSiderTabs(value);
};
return ( return (
<Layout> <Layout>
<Sider>Sider</Sider> <Sider className={styles.sider}>
<div className={styles.siderChatContent}>
<Button size="large" block type="primary" icon={<PlusOutlined />}>
新建对话
</Button>
</div>
<div className={styles.siderTabs}>
{siderTabsList.map((item) => {
return (
<div
key={item.text}
className={styles.chatSiderChatTabsCard}
onClick={() => {
selectSliderTabsHandleClick(item.checked);
}}
>
<div
className={classNames(
styles.chatSiderChatTabsCardIcons,
selectSiderTabs === item.checked && styles.checkedChatSiderChatTabsCardIcons,
)}
>
{item.icons}
</div>
<div
className={classNames(
styles.chatSiderChatTabsCardText,
selectSiderTabs === item.checked && styles.checkedChatSiderChatTabsCardText,
)}
>
{item.text}
</div>
</div>
);
})}
</div>
<div className={styles.noMentionLogin} />
</Sider>
<Layout className={styles.chatContent}> <Layout className={styles.chatContent}>
<ChatHeader /> {!firstChat && <ChatHeader />}
<Form initialValues={{ ...chat }} name="chat" onValuesChange={onChange} onFinish={onSend}> <Form
<Item name="firstInput"> form={form}
<ChatFirstContent /> initialValues={{ ...chat }}
</Item> name="chat"
onValuesChange={onChange}
onFinish={onSend}
>
{firstChat ? (
<div className={styles.chatRoom}>sss</div>
) : (
<Item name="firstInput">
<ChatFirstContent />
</Item>
)}
<ChatFooter /> <ChatFooter />
</Form> </Form>
</Layout> </Layout>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment