Commit 8954c246 authored by Ylg's avatar Ylg

resolve file conflict

parents 1bf28e3e 2c899e2a
import { Row, Col } from 'antd'; import { Row, Col, Grid } from 'antd';
import type { FC } from 'react'; import type { FC } from 'react';
import styles from './content.less'; import styles from './content.less';
import ProductionCard from './productionCard'; import ProductionCard from './productionCard';
const { useBreakpoint } = Grid;
interface ChatFirstContentProps { interface ChatFirstContentProps {
onChange?: (text: string) => void; onChange?: (text: string) => void;
} }
const ChatFirstContent: FC<ChatFirstContentProps> = (props) => { const ChatFirstContent: FC<ChatFirstContentProps> = (props) => {
const { onChange } = props; const { onChange } = props;
const screen = useBreakpoint();
const isMobile = screen.xs;
const cardList = [ const cardList = [
{ {
title: '市场营销', title: '市场营销',
...@@ -75,7 +79,7 @@ const ChatFirstContent: FC<ChatFirstContentProps> = (props) => { ...@@ -75,7 +79,7 @@ const ChatFirstContent: FC<ChatFirstContentProps> = (props) => {
<Row gutter={1}> <Row gutter={1}>
{cardList.map((item, index) => { {cardList.map((item, index) => {
return ( return (
<Col lg={8} md={12} span={8} xs={16} sm={16} key={`${item.title}-card-${index}`}> <Col lg={8} md={12} span={8} xs={24} sm={16} key={`${item.title}-card-${index}`}>
<div className={styles.cardPadding}> <div className={styles.cardPadding}>
<ProductionCard title={item.title} content={item.content} onChange={item.onclick} /> <ProductionCard title={item.title} content={item.content} onChange={item.onclick} />
</div> </div>
......
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
background: white; background: white;
.sider { .sider {
position: fixed; position: fixed;
top: 0;
left: 0; left: 0;
z-index: 100; z-index: 100;
width: 240px; width: 240px;
...@@ -24,8 +25,6 @@ ...@@ -24,8 +25,6 @@
} }
.siderTabs { .siderTabs {
} }
.noMentionLogin {
}
} }
} }
.header { .header {
...@@ -74,7 +73,8 @@ ...@@ -74,7 +73,8 @@
.footer { .footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
width: calc(100% - 200px); left: 0;
width: 100%;
height: 150px; height: 150px;
padding: 16px; padding: 16px;
background-color: white; background-color: white;
...@@ -104,6 +104,11 @@ ...@@ -104,6 +104,11 @@
} }
.mobileHeader { .mobileHeader {
position: fixed;
top: 0;
left: 0;
z-index: 99;
width: 100%;
height: 44px; height: 44px;
color: white; color: white;
font-size: 15px; font-size: 15px;
......
/* eslint-disable @typescript-eslint/no-unused-expressions */ /* eslint-disable @typescript-eslint/no-unused-expressions */
import { Form, Button, Col, Row, Input, Typography, message } from 'antd'; import { Form, Button, Col, Row, Input, Typography } from 'antd';
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import styles from './index.less'; import styles from './index.less';
import ChatFirstContent from './components/content'; import ChatFirstContent from './components/content';
...@@ -18,9 +18,7 @@ import LoginModal from '@/components/loginModal'; ...@@ -18,9 +18,7 @@ import LoginModal from '@/components/loginModal';
import NewSession from '@/components/newSession'; import NewSession from '@/components/newSession';
const { useBreakpoint } = Grid; const { useBreakpoint } = Grid;
const { Title } = Typography; const { Title } = Typography;
const { Item } = Form; const { Item } = Form;
const Chat: React.FC = () => { const Chat: React.FC = () => {
...@@ -35,12 +33,17 @@ const Chat: React.FC = () => { ...@@ -35,12 +33,17 @@ const Chat: React.FC = () => {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const tabShow = showSider; const tabShow = showSider;
useEffect(() => {
if (!isMobile) {
setShowSider(true);
}
}, [isMobile]);
useEffect(() => { useEffect(() => {
let token = ''; let token = '';
if (localStorage.getItem('user')) { if (localStorage.getItem('user')) {
token = JSON.parse(localStorage.user)?.token; token = JSON.parse(localStorage.user)?.token;
} }
if (token) { if (token) {
setOpen(false); setOpen(false);
} else { } else {
...@@ -109,61 +112,62 @@ const Chat: React.FC = () => { ...@@ -109,61 +112,62 @@ const Chat: React.FC = () => {
return ( return (
<> <>
<LoginModal <LoginModal open={open} setOpen={setOpen} />
open={open}
setOpen={setOpen}
/>
{isMobile && renderMobileHeader()} {isMobile && renderMobileHeader()}
<Row> <Row>
{tabShow && ( {tabShow && (
<Col span={4} sm={10} md={7} xs={12} lg={5} className={styles.siderWrapper}> <Col span={4} sm={10} md={7} xs={12} lg={5} className={styles.siderWrapper}>
<div className={styles.sider}> <div style={{ top: isMobile && '44px' }} className={styles.sider}>
<div className={styles.siderChatContent}> <div className={styles.siderChatContent}>
<Button size="large" block type="primary" icon={<PlusOutlined />}> <Button size="large" block type="primary" icon={<PlusOutlined />}>
新建对话 新建对话
</Button> </Button>
</div> </div>
<div className={styles.siderTabs}> <Row>
<Row> {siderTabsList.map((item) => {
{siderTabsList.map((item) => { return (
return ( <Col key={item.text}>
<Col key={item.text}> <div
className={styles.chatSiderChatTabsCard}
onClick={() => {
selectSliderTabsHandleClick(item.checked);
}}
>
<div <div
className={styles.chatSiderChatTabsCard} className={classNames(
onClick={() => { styles.chatSiderChatTabsCardIcons,
selectSliderTabsHandleClick(item.checked); selectSiderTabs === item.checked &&
}} styles.checkedChatSiderChatTabsCardIcons,
)}
> >
<div {item.icons}
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>
</Col> <div
); className={classNames(
})} styles.chatSiderChatTabsCardText,
</Row> selectSiderTabs === item.checked &&
</div> styles.checkedChatSiderChatTabsCardText,
<div className={styles.noMentionLogin} /> )}
>
{item.text}
</div>
</div>
</Col>
);
})}
</Row>
</div> </div>
</Col> </Col>
)} )}
<Col className={styles.chatContent} span={20} lg={19} sm={14} md={17} xs={12}> <Col
className={styles.chatContent}
span={20}
lg={19}
sm={14}
md={17}
xs={isMobile ? 24 : 12}
>
<div className={styles.header}> <div className={styles.header}>
<Row> <Row>
<Col span={24}> <Col span={24}>
...@@ -194,8 +198,8 @@ const Chat: React.FC = () => { ...@@ -194,8 +198,8 @@ const Chat: React.FC = () => {
)} )}
<div className={styles.footer}> <div className={styles.footer}>
<Row> <Row>
<Col span={20}> <Col span={16} push={4}>
<div className={styles.chatWrapper}> <div className={styles.chatWrapper} style={{ margin: isMobile && 'o auto' }}>
<Item name="chatInput"> <Item name="chatInput">
<Input <Input
placeholder="在这里输入你想知道的问题,给我几句提示,我来帮你回答" placeholder="在这里输入你想知道的问题,给我几句提示,我来帮你回答"
...@@ -204,7 +208,7 @@ const Chat: React.FC = () => { ...@@ -204,7 +208,7 @@ const Chat: React.FC = () => {
</Item> </Item>
</div> </div>
</Col> </Col>
<Col span={4}> <Col span={4} push={4}>
<div className={styles.outputButtonWrapper}> <div className={styles.outputButtonWrapper}>
<Item name="outputButton"> <Item name="outputButton">
<Button htmlType="submit" type="primary" size="large" disabled={chat.length === 0}> <Button htmlType="submit" type="primary" size="large" disabled={chat.length === 0}>
......
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