Commit 2c899e2a authored by littleforest's avatar littleforest

feat: fix moblie version

parent 6e10377d
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';
...@@ -17,15 +17,12 @@ import { Grid } from 'antd'; ...@@ -17,15 +17,12 @@ import { Grid } from 'antd';
import LoginModal from '@/components/loginModal'; import LoginModal from '@/components/loginModal';
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 = () => {
const screens = useBreakpoint(); const screens = useBreakpoint();
const isMobile = screens.xs; const isMobile = screens.xs;
const isPod = screens.sm;
const [chat, SetChat] = useState({ const [chat, SetChat] = useState({
chatInput: '', chatInput: '',
}); });
...@@ -37,12 +34,17 @@ const Chat: React.FC = () => { ...@@ -37,12 +34,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 {
...@@ -113,21 +115,17 @@ const Chat: React.FC = () => { ...@@ -113,21 +115,17 @@ 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 (
...@@ -162,12 +160,17 @@ const Chat: React.FC = () => { ...@@ -162,12 +160,17 @@ const Chat: React.FC = () => {
})} })}
</Row> </Row>
</div> </div>
<div className={styles.noMentionLogin} />
</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}
>
{!firstChat && ( {!firstChat && (
<> <>
<div className={styles.header}> <div className={styles.header}>
...@@ -184,7 +187,6 @@ const Chat: React.FC = () => { ...@@ -184,7 +187,6 @@ const Chat: React.FC = () => {
</div> </div>
</> </>
)} )}
<Form <Form
form={form} form={form}
initialValues={{ ...chat }} initialValues={{ ...chat }}
...@@ -201,8 +203,8 @@ const Chat: React.FC = () => { ...@@ -201,8 +203,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="在这里输入你想知道的问题,给我几句提示,我来帮你回答"
...@@ -211,7 +213,7 @@ const Chat: React.FC = () => { ...@@ -211,7 +213,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 type="primary" size="large"> <Button type="primary" size="large">
......
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