Skip to content

S
sdream-ai-fe
Commit c0bbcc7d by HoMeTown
Options

fix: 修复滚动问题

parent 787421db
Showing with 24 additions and 13 deletions
package.json
...@@ -48,6 +48,7 @@ ...@@ -48,6 +48,7 @@
"github-markdown-css": "^5.8.0", "github-markdown-css": "^5.8.0",
"react": "^18.3.1", "react": "^18.3.1",
"react-dom": "^18.3.1", "react-dom": "^18.3.1",
"react-draggable": "^4.4.6",
"react-hot-toast": "^2.4.1", "react-hot-toast": "^2.4.1",
"react-joyride": "^2.9.3", "react-joyride": "^2.9.3",
"react-markdown": "^9.0.1", "react-markdown": "^9.0.1",
......
src/App.css
...@@ -13,8 +13,15 @@ ...@@ -13,8 +13,15 @@
color: #161823; color: #161823;
line-height: 24px; line-height: 24px;
} }
@media screen and (max-width: 480px) {
img {
width: 100% !important;
display: block;
margin: 12px 0;
}
}
img { img {
width: 100%; width: 40%;
display: block; display: block;
margin: 12px 0; margin: 12px 0;
} }
......
src/components/MarkdownDetail/index.tsx
import type { ReactNode } from 'react' import { type ReactNode, memo } from 'react'
import ReactMarkdown from 'react-markdown' import ReactMarkdown from 'react-markdown'
import rehypeRaw from 'rehype-raw' import rehypeRaw from 'rehype-raw'
import rehypeSanitize from 'rehype-sanitize' import rehypeSanitize from 'rehype-sanitize'
...@@ -9,7 +9,7 @@ interface MarkdownDetailProps { ...@@ -9,7 +9,7 @@ interface MarkdownDetailProps {
children: ReactNode children: ReactNode
} }
export const MarkdownDetail: React.FC<MarkdownDetailProps> = ({ children }) => { export const MarkdownDetail: React.FC<MarkdownDetailProps> = memo(({ children }) => {
return ( return (
<ReactMarkdown <ReactMarkdown
rehypePlugins={[rehypeRaw, rehypeSanitize]} rehypePlugins={[rehypeRaw, rehypeSanitize]}
...@@ -37,4 +37,4 @@ export const MarkdownDetail: React.FC<MarkdownDetailProps> = ({ children }) => { ...@@ -37,4 +37,4 @@ export const MarkdownDetail: React.FC<MarkdownDetailProps> = ({ children }) => {
{children as string} {children as string}
</ReactMarkdown> </ReactMarkdown>
) )
} })
src/layouts/MainLayout/MainLayout.tsx
...@@ -52,9 +52,11 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => { ...@@ -52,9 +52,11 @@ export const MainLayout: React.FC<MainLayoutProps> = ({ children }) => {
<motion.div <motion.div
animate={isHistoryVisible ? 'shrunk' : 'expanded'} animate={isHistoryVisible ? 'shrunk' : 'expanded'}
variants={contentVariants} variants={contentVariants}
className={`fixed right-[0] top-[22px] z-[49] h-auto sm:relative flex sm:h-full pl-[12px] items-center ${isHistoryVisible && !isMobile() ? 'w-[340px]' : 'w-[90px]'} box-border`} className={`fixed right-[-12px] top-[10px] z-[49] h-auto sm:relative flex sm:h-full pl-[12px] items-center ${isHistoryVisible && !isMobile() ? 'w-[340px]' : 'w-[90px]'} box-border`}
> >
<Navbar isHistoryVisible={isHistoryVisible} onSetHistoryVisible={setHistoryVisible} /> <Navbar isHistoryVisible={isHistoryVisible} onSetHistoryVisible={setHistoryVisible} />
<HistoryBar isVisible={isHistoryVisible} onSetHistoryVisible={setHistoryVisible} /> <HistoryBar isVisible={isHistoryVisible} onSetHistoryVisible={setHistoryVisible} />
{!isHistoryVisible && ( {!isHistoryVisible && (
<motion.div <motion.div
......
src/pages/Chat/components/ChatItem/ChatAnswerBox.tsx
import { Avatar, Button } from '@nextui-org/react' import { Avatar, Button } from '@nextui-org/react'
import { motion } from 'framer-motion'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import { ChatAnswerShower } from './ChatAnswerShower' import { ChatAnswerShower } from './ChatAnswerShower'
import { ChatAnswerParser } from './ChatAnswerParser' import { ChatAnswerParser } from './ChatAnswerParser'
...@@ -45,6 +44,7 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex, ...@@ -45,6 +44,7 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex,
useEffect(() => { useEffect(() => {
setInnerRecord(record) setInnerRecord(record)
}, [record]) }, [record])
return ( return (
<div> <div>
{innerRecord.answerList.map((item, index) => { {innerRecord.answerList.map((item, index) => {
...@@ -53,7 +53,7 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex, ...@@ -53,7 +53,7 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex,
<div className="chatItemBotContainer w-full" key={`${item.recordId}-${index}`}> <div className="chatItemBotContainer w-full" key={`${item.recordId}-${index}`}>
<div className="flex"> <div className="flex">
<Avatar className="flex-shrink-0" src={AvatarBot} /> <Avatar className="flex-shrink-0" src={AvatarBot} />
<motion.div <div
className="ml-[20px] bg-white rounded-[20px] box-border px-[16px] py-[12px] sm:px-[24px] sm:py-[20px]" className="ml-[20px] bg-white rounded-[20px] box-border px-[16px] py-[12px] sm:px-[24px] sm:py-[20px]"
> >
{(item.answer?.length || item.attachmentList?.length) {(item.answer?.length || item.attachmentList?.length)
...@@ -64,7 +64,7 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex, ...@@ -64,7 +64,7 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex,
</div> </div>
) )
: <SdreamLoading />} : <SdreamLoading />}
</motion.div> </div>
<div className="hidden sm:block w-[65px] flex-shrink-0"></div> <div className="hidden sm:block w-[65px] flex-shrink-0"></div>
</div> </div>
{isTyping && ( {isTyping && (
......
src/pages/Chat/components/ChatItem/ChatAnswerRecommend.tsx
...@@ -43,10 +43,10 @@ export const ChatAnswerRecommend: React.FC<ChatAnswerRecommendProps> = ({ answer ...@@ -43,10 +43,10 @@ export const ChatAnswerRecommend: React.FC<ChatAnswerRecommendProps> = ({ answer
{ {
questionList.length === 0 && ( questionList.length === 0 && (
<div className="flex flex-col gap-[8px]"> <div className="flex flex-col gap-[8px]">
<Skeleton className="w-full rounded-lg"> <Skeleton className="w-full sm:w-[300px] rounded-lg">
<div className="h-[40px] w-full rounded-lg bg-[#fff]"></div> <div className="h-[40px] w-full rounded-lg bg-[#fff]"></div>
</Skeleton> </Skeleton>
<Skeleton className="w-full rounded-lg"> <Skeleton className="w-full sm:w-[300px] rounded-lg">
<div className="h-[40px] w-full rounded-lg bg-[#fff]"></div> <div className="h-[40px] w-full rounded-lg bg-[#fff]"></div>
</Skeleton> </Skeleton>
</div> </div>
......
src/pages/Chat/components/ChatItem/ChatItemUser.tsx
...@@ -10,7 +10,8 @@ export const ChatItemUser: React.FC<ChatItemUserProps> = ({ record }) => { ...@@ -10,7 +10,8 @@ export const ChatItemUser: React.FC<ChatItemUserProps> = ({ record }) => {
return ( return (
<div className="chatItemUser"> <div className="chatItemUser">
<div className="flex justify-end"> <div className="flex justify-end">
<div className="mr-[20px] bg-[#29B6FD] rounded-[20px] box-border text-[#fff] px-[16px] py-[12px] sm:px-[24px] sm:py-[20px]">{record.question}</div> <div className="sm:block w-[65px] flex-shrink-0"></div>
<div className="text-[14px] mr-[20px] bg-[#29B6FD] rounded-[20px] box-border text-[#fff] px-[16px] py-[12px] sm:px-[24px] sm:py-[20px]">{record.question}</div>
<Avatar className="flex-shrink-0" src={AvatarUser} /> <Avatar className="flex-shrink-0" src={AvatarUser} />
</div> </div>
<div className="h-[32px] w-full"></div> <div className="h-[32px] w-full"></div>
......
src/pages/Chat/components/ChatMaskBar/index.tsx
export const ChatMaskBar: React.FC = () => { export const ChatMaskBar: React.FC = () => {
return ( return (
<div className="absolute w-full h-[32px] z-[2] top-[110px] bg-gradient-to-b from-[hsl(var(--sdream-background))] to-transparent"></div> <div className="absolute top-[85px] w-full h-[32px] z-[2] sm:top-[110px] bg-gradient-to-b from-[hsl(var(--sdream-background))] to-transparent"></div>
) )
} }
src/pages/Chat/components/ChatSlogan/ChatSlogan.tsx
...@@ -6,7 +6,7 @@ export const ChatSlogan: React.FC = () => { ...@@ -6,7 +6,7 @@ export const ChatSlogan: React.FC = () => {
const navigate = useNavigate() const navigate = useNavigate()
return ( return (
<div className="w-full"> <div className="w-full">
<div className="max-w-[912px] mx-auto h-[112px] flex flex-col justify-center"> <div className="h-[86px] max-w-[912px] mx-auto sm:h-[112px] flex flex-col justify-center">
<div className="flex items-center cursor-pointer" onClick={() => navigate('/')}> <div className="flex items-center cursor-pointer" onClick={() => navigate('/')}>
<TextLogo className="w-[70px]" /> <TextLogo className="w-[70px]" />
<GradualSpacing text="晓得解惑，让沟通更智能" className="ml-[8px] text-[16px] text-[#333] font-medium" /> <GradualSpacing text="晓得解惑，让沟通更智能" className="ml-[8px] text-[16px] text-[#333] font-medium" />
......
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