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 styles from './content.less';
import ProductionCard from './productionCard';
const { useBreakpoint } = Grid;
interface ChatFirstContentProps {
onChange?: (text: string) => void;
}
const ChatFirstContent: FC<ChatFirstContentProps> = (props) => {
const { onChange } = props;
const screen = useBreakpoint();
const isMobile = screen.xs;
const cardList = [
{
title: '市场营销',
......@@ -75,7 +79,7 @@ const ChatFirstContent: FC<ChatFirstContentProps> = (props) => {
<Row gutter={1}>
{cardList.map((item, index) => {
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}>
<ProductionCard title={item.title} content={item.content} onChange={item.onclick} />
</div>
......
......@@ -7,6 +7,7 @@
background: white;
.sider {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 240px;
......@@ -24,8 +25,6 @@
}
.siderTabs {
}
.noMentionLogin {
}
}
}
.header {
......@@ -74,7 +73,8 @@
.footer {
position: fixed;
bottom: 0;
width: calc(100% - 200px);
left: 0;
width: 100%;
height: 150px;
padding: 16px;
background-color: white;
......@@ -104,6 +104,11 @@
}
.mobileHeader {
position: fixed;
top: 0;
left: 0;
z-index: 99;
width: 100%;
height: 44px;
color: white;
font-size: 15px;
......
/* 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 styles from './index.less';
import ChatFirstContent from './components/content';
......@@ -17,15 +17,12 @@ import { Grid } from 'antd';
import LoginModal from '@/components/loginModal';
const { useBreakpoint } = Grid;
const { Title } = Typography;
const { Item } = Form;
const Chat: React.FC = () => {
const screens = useBreakpoint();
const isMobile = screens.xs;
const isPod = screens.sm;
const [chat, SetChat] = useState({
chatInput: '',
});
......@@ -37,12 +34,17 @@ const Chat: React.FC = () => {
const [open, setOpen] = useState(false);
const tabShow = showSider;
useEffect(() => {
if (!isMobile) {
setShowSider(true);
}
}, [isMobile]);
useEffect(() => {
let token = '';
if (localStorage.getItem('user')) {
token = JSON.parse(localStorage.user)?.token;
}
if (token) {
setOpen(false);
} else {
......@@ -113,61 +115,62 @@ const Chat: React.FC = () => {
return (
<>
<LoginModal
open={open}
setOpen={setOpen}
/>
<LoginModal open={open} setOpen={setOpen} />
{isMobile && renderMobileHeader()}
<Row>
{tabShow && (
<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}>
<Button size="large" block type="primary" icon={<PlusOutlined />}>
新建对话
</Button>
</div>
<div className={styles.siderTabs}>
<Row>
{siderTabsList.map((item) => {
return (
<Col key={item.text}>
<Row>
{siderTabsList.map((item) => {
return (
<Col key={item.text}>
<div
className={styles.chatSiderChatTabsCard}
onClick={() => {
selectSliderTabsHandleClick(item.checked);
}}
>
<div
className={styles.chatSiderChatTabsCard}
onClick={() => {
selectSliderTabsHandleClick(item.checked);
}}
className={classNames(
styles.chatSiderChatTabsCardIcons,
selectSiderTabs === item.checked &&
styles.checkedChatSiderChatTabsCardIcons,
)}
>
<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>
{item.icons}
</div>
</Col>
);
})}
</Row>
</div>
<div className={styles.noMentionLogin} />
<div
className={classNames(
styles.chatSiderChatTabsCardText,
selectSiderTabs === item.checked &&
styles.checkedChatSiderChatTabsCardText,
)}
>
{item.text}
</div>
</div>
</Col>
);
})}
</Row>
</div>
</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 && (
<>
<div className={styles.header}>
......@@ -184,7 +187,6 @@ const Chat: React.FC = () => {
</div>
</>
)}
<Form
form={form}
initialValues={{ ...chat }}
......@@ -201,8 +203,8 @@ const Chat: React.FC = () => {
)}
<div className={styles.footer}>
<Row>
<Col span={20}>
<div className={styles.chatWrapper}>
<Col span={16} push={4}>
<div className={styles.chatWrapper} style={{ margin: isMobile && 'o auto' }}>
<Item name="chatInput">
<Input
placeholder="在这里输入你想知道的问题,给我几句提示,我来帮你回答"
......@@ -211,7 +213,7 @@ const Chat: React.FC = () => {
</Item>
</div>
</Col>
<Col span={4}>
<Col span={4} push={4}>
<div className={styles.outputButtonWrapper}>
<Item name="outputButton">
<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