Skip to content

S
sdream-ai-fe
Commit c52e6408 by weiw
Options

fix:按照ui设计稿改版

parent 3da94271
Showing with 47 additions and 36 deletions
src/App.css
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
box-sizing: border-box; box-sizing: border-box;
margin: 0 auto; margin: 0 auto;
font-family: 'alir'; font-family: 'alir';
background: #F7FAFD !important;
p { p {
font-family: font-family:
alir, alir,
......
src/components/ChatEditor/index.tsx
...@@ -108,7 +108,7 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, ...@@ -108,7 +108,7 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
) )
return ( return (
<div className="ask-input flex items-end w-full h-auto relative mx-auto bg-white rounded-[36px] overflow-hidden transition duration-200 py-[8px] pl-[12px] pr-[12px] sm:py-[12px] sm:pl-[32px] sm:pr-[20px]"> <div style={{ border: '1px solid #E3E3E3' }} className="ask-input flex items-end w-full h-auto relative mx-auto bg-white rounded-[36px] overflow-hidden transition duration-200 py-[8px] pl-[12px] pr-[12px] sm:py-[12px] sm:pl-[32px] sm:pr-[20px]">
<div <div
ref={editorRef} ref={editorRef}
contentEditable contentEditable
...@@ -120,7 +120,7 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth, ...@@ -120,7 +120,7 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
onFocus={onFocus} onFocus={onFocus}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onPaste={handlePaste} onPaste={handlePaste}
suppressContentEditableWarning={true} suppressContentEditableWarning
style={{ style={{
resize: 'none', resize: 'none',
}} }}
......
src/components/MarkdownDetail/index.tsx
...@@ -15,7 +15,7 @@ export const MarkdownDetail: React.FC<MarkdownDetailProps> = memo(({ children }) ...@@ -15,7 +15,7 @@ export const MarkdownDetail: React.FC<MarkdownDetailProps> = memo(({ children })
<ReactMarkdown <ReactMarkdown
rehypePlugins={[rehypeRaw, rehypeSanitize]} rehypePlugins={[rehypeRaw, rehypeSanitize]}
remarkPlugins={[remarkGfm]} remarkPlugins={[remarkGfm]}
className="markdown-body !bg-[#fff] flex flex-col text-[#27353C] text-[15px]" className="markdown-body flex flex-col text-[#27353C] text-[15px]"
components={{ components={{
img: ({ ...data }): JSX.Element => { img: ({ ...data }): JSX.Element => {
return ( return (
......
src/config/nav.ts
...@@ -4,11 +4,11 @@ import Collect from '@/assets/svg/collect.svg?react' ...@@ -4,11 +4,11 @@ import Collect from '@/assets/svg/collect.svg?react'
export const NAV_BAR_ITEMS = [ export const NAV_BAR_ITEMS = [
// { icon: Logo, label: '', key: 'logo' }, // { icon: Logo, label: '', key: 'logo' },
{ icon: '', label: '', key: 'line1' }, // { icon: '', label: '', key: 'line1' },
{ icon: AddNewChat, label: '新建对话', key: 'add' }, { icon: AddNewChat, label: '新建对话', key: 'add' },
{ icon: HistoryChat, label: '历史对话', key: 'history' }, { icon: HistoryChat, label: '历史对话', key: 'history' },
{ icon: Collect, label: '收藏', key: 'collect' }, { icon: Collect, label: '收藏', key: 'collect' },
{ icon: '', label: '', key: 'line2' }, // { icon: '', label: '', key: 'line2' },
// { icon: Tools, label: '工具', key: 'tools' }, // { icon: Tools, label: '工具', key: 'tools' },
// { icon: '', label: '', key: 'line3' }, // { icon: '', label: '', key: 'line3' },
] ]
src/config/theme.ts
...@@ -5,7 +5,7 @@ export const theme: HeroUIPluginConfig = { ...@@ -5,7 +5,7 @@ export const theme: HeroUIPluginConfig = {
themes: { themes: {
light: { light: {
colors: { colors: {
background: '#E6F6FE', // or DEFAULT background: '#F7F8FA', // or DEFAULT
primary: { primary: {
DEFAULT: '#29B6FD', DEFAULT: '#29B6FD',
}, },
...@@ -13,7 +13,7 @@ export const theme: HeroUIPluginConfig = { ...@@ -13,7 +13,7 @@ export const theme: HeroUIPluginConfig = {
}, },
dark: { dark: {
colors: { colors: {
background: '#E6F6FE', // or DEFAULT background: '#F7F8FA', // or DEFAULT
primary: { primary: {
DEFAULT: '#29B6FD', DEFAULT: '#29B6FD',
}, },
......
src/layouts/Navbar/Navbar.tsx
...@@ -10,7 +10,6 @@ import type { WithAuthProps } from '@/auth/withAuth' ...@@ -10,7 +10,6 @@ import type { WithAuthProps } from '@/auth/withAuth'
import { withAuth } from '@/auth/withAuth' import { withAuth } from '@/auth/withAuth'
import { NAV_BAR_ITEMS } from '@/config/nav' import { NAV_BAR_ITEMS } from '@/config/nav'
import { useAppDispatch, useAppSelector } from '@/store/hook' import { useAppDispatch, useAppSelector } from '@/store/hook'
import Logo from '@/assets/svg/logo.svg?react'
import { isMobile } from '@/utils' import { isMobile } from '@/utils'
interface NavbarProps { interface NavbarProps {
...@@ -104,7 +103,7 @@ const NavbarBase: React.FC<NavbarProps & WithAuthProps> = ({ isHistoryVisible, c ...@@ -104,7 +103,7 @@ const NavbarBase: React.FC<NavbarProps & WithAuthProps> = ({ isHistoryVisible, c
> >
{/* hidden */} {/* hidden */}
<motion.div className={`layoutNavBarJoyride ${styles.layoutNavBarAgent} rounded-full ${isH5NavVisible ? 'h-[55px] bg-white/70 shadow-md' : 'h-[380px]'} w-[54px] overflow-hidden py-[8px] sm:w-[64px] sm:bg-white gap-[24px] sm:h-auto sm:rounded-3xl sm:flex sm:py-[24px] sm:px-[8px]`}> <motion.div className={`layoutNavBarJoyride ${styles.layoutNavBarAgent} rounded-full ${isH5NavVisible ? 'h-[55px] bg-white/70 shadow-md' : 'h-[380px]'} w-[54px] overflow-hidden py-[8px] sm:w-[64px] sm:bg-white gap-[24px] sm:h-auto sm:rounded-3xl sm:flex sm:py-[24px] sm:px-[8px]`}>
<NavBarItem isHistoryVisible={isHistoryVisible} onClick={handleClick} icon={Logo} label="" key="logo" type={isMobile() ? 'logo3' : 'logo'} /> {/* <NavBarItem isHistoryVisible={isHistoryVisible} onClick={handleClick} icon={Logo} label="" key="logo" type={isMobile() ? 'logo3' : 'logo'} /> */}
{NAV_BAR_ITEMS.map((item) => { {NAV_BAR_ITEMS.map((item) => {
return ( return (
......
src/pages/Chat/Chat.tsx
...@@ -4,8 +4,6 @@ import { Button } from '@heroui/react' ...@@ -4,8 +4,6 @@ import { Button } from '@heroui/react'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import { useScroll } from 'ahooks' import { useScroll } from 'ahooks'
import styles from './Chat.module.less' import styles from './Chat.module.less'
import { ChatSlogan } from './components/ChatSlogan'
import { ChatMaskBar } from './components/ChatMaskBar'
import { processApiResponse } from './helper' import { processApiResponse } from './helper'
import { ChatWelcome } from './components/ChatWelcome' import { ChatWelcome } from './components/ChatWelcome'
import { ChatItemUser } from './components/ChatItem/ChatItemUser' import { ChatItemUser } from './components/ChatItem/ChatItemUser'
...@@ -203,8 +201,8 @@ export const Chat: React.FC = () => { ...@@ -203,8 +201,8 @@ export const Chat: React.FC = () => {
return ( return (
<div className={styles.scrollView}> <div className={styles.scrollView}>
<div className={`${styles.chatPage} relative`}> <div className={`${styles.chatPage} relative`}>
<ChatSlogan /> {/* <ChatSlogan />
<ChatMaskBar /> <ChatMaskBar /> */}
<div className={`${styles.content}`}> <div className={`${styles.content}`}>
{isLoading && <div className="w-full h-full flex justify-center items-center"><SdreamLoading /></div>} {isLoading && <div className="w-full h-full flex justify-center items-center"><SdreamLoading /></div>}
{!isLoading && ( {!isLoading && (
......
src/pages/Chat/components/ChatItem/ChatAnswerBox.tsx
...@@ -55,7 +55,8 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex, ...@@ -55,7 +55,8 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex,
<div className="flex"> <div className="flex">
<Avatar className="sm:mr-[20px] hidden sm:block flex-shrink-0" src={AvatarBot} /> <Avatar className="sm:mr-[20px] hidden sm:block flex-shrink-0" src={AvatarBot} />
<div <div
className="bg-white rounded-[20px] box-border px-[16px] py-[12px] sm:px-[24px] sm:py-[20px] relative" style={{ background: '#F7FAFD' }}
className="rounded-[20px] box-border px-[16px] py-[12px] sm:px-[24px] sm:py-[20px] relative"
> >
{(item.answer?.length || item.cardList?.length) {(item.answer?.length || item.cardList?.length)
? ( ? (
......
src/pages/Chat/components/ChatItem/ChatAnswerParser.tsx
...@@ -164,7 +164,7 @@ export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ isLastAnswer ...@@ -164,7 +164,7 @@ export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ isLastAnswer
</div> </div>
{!!displayedText.length && ( {!!displayedText.length && (
<div className={answer.cardList?.length ? 'mb-[20px]' : ''}> <div style={{ background: '#F7FAFD' }} className={answer.cardList?.length ? 'mb-[20px]' : ''}>
<MarkdownDetail> <MarkdownDetail>
{displayedText} {displayedText}
</MarkdownDetail> </MarkdownDetail>
......
src/pages/Chat/components/ChatItem/ChatItemUser.tsx
...@@ -12,7 +12,7 @@ export const ChatItemUser: React.FC<ChatItemUserProps> = ({ record }) => { ...@@ -12,7 +12,7 @@ export const ChatItemUser: React.FC<ChatItemUserProps> = ({ record }) => {
<div className="text-[#b9b9bb] text-[13px] text-center w-full">{record.qaTime}</div> <div className="text-[#b9b9bb] text-[13px] text-center w-full">{record.qaTime}</div>
<div className="flex justify-end"> <div className="flex justify-end">
<div className="sm:block w-[65px] flex-shrink-0"></div> <div className="sm:block w-[65px] flex-shrink-0"></div>
<div className="text-[15px] bg-[#29B6FD] rounded-[20px] box-border text-[#fff] px-[16px] py-[12px] sm:px-[24px] sm:py-[20px]">{record.question}</div> <div className="text-[15px] bg-[#BFE9FE] rounded-[20px] box-border text-[#000000] px-[16px] py-[12px] sm:px-[24px] sm:py-[20px]">{record.question}</div>
<Avatar className="hidden sm:block ml-[20px] flex-shrink-0" src={AvatarUser} /> <Avatar className="hidden sm:block ml-[20px] flex-shrink-0" src={AvatarUser} />
</div> </div>
<div className="h-[20px] sm:h-[32px] w-full"></div> <div className="h-[20px] sm:h-[32px] w-full"></div>
......
src/pages/Chat/components/ChatWelcome/index.tsx
...@@ -9,11 +9,12 @@ export const ChatWelcome: React.FC = () => { ...@@ -9,11 +9,12 @@ export const ChatWelcome: React.FC = () => {
<div className="flex"> <div className="flex">
<Avatar className="mr-[12px] hidden sm:block flex-shrink-0" src={AvatarBot} /> <Avatar className="mr-[12px] hidden sm:block flex-shrink-0" src={AvatarBot} />
<motion.div <motion.div
className="sm:ml-[20px] bg-white rounded-[20px] box-border px-[16px] py-[16px] sm:px-[24px] sm:py-[20px]" className="sm:ml-[20px] rounded-[20px] box-border px-[16px] py-[16px] sm:px-[24px] sm:py-[20px]"
style={{ background: '#F7FAFD' }}
> >
<div className="content"> <div className="content">
<p className="text-[16px] sm:text-[18px] font-medium text-[#333]">您好，我是晓得</p> <p className="text-[16px] sm:text-[18px] font-medium text-[#333]">您好，有什么我可以帮您的吗？</p>
<p className="text-[15px] mt-[4px] sm:mt-[8px] sm:text-13px text-[#27353C] font-300">作为您的智能保险伙伴，您有各类专业相关的问题都可以抛给我哟~让我们互相帮助共同成长吧~</p> {/* <p className="text-[15px] mt-[4px] sm:mt-[8px] sm:text-13px text-[#27353C] font-300">作为您的智能保险伙伴，您有各类专业相关的问题都可以抛给我哟~让我们互相帮助共同成长吧~</p> */}
</div> </div>
</motion.div> </motion.div>
</div> </div>
......
src/pages/Home/HomeNew.tsx
import type React from 'react' import type React from 'react'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import { Outlet, useLocation } from 'react-router-dom' import { Outlet } from 'react-router-dom'
import { useEffect } from 'react'
import styles from './Home.module.less' import styles from './Home.module.less'
import { QuestionList } from './components/QuestionList' import { QuestionList } from './components/QuestionList'
import { Slogan } from './components/Slogan/Slogan'
import HomeIcon1 from '@/assets/homeIcon1.png' import HomeIcon1 from '@/assets/homeIcon1.png'
import HomeIcon2 from '@/assets/homeIcon2.png' import HomeIcon2 from '@/assets/homeIcon2.png'
import { GradientBackground } from '@/components/GradientBackground'
import { ChatEditor } from '@/components/ChatEditor'
import { RECOMMEND_QUESTIONS_OTHER, RECOMMEND_QUESTIONS_PRODUCT } from '@/config/recommendQuestion' import { RECOMMEND_QUESTIONS_OTHER, RECOMMEND_QUESTIONS_PRODUCT } from '@/config/recommendQuestion'
import { createConversation } from '@/store/conversationSlice' import { createConversation } from '@/store/conversationSlice'
import { useAppDispatch } from '@/store/hook' import { useAppDispatch } from '@/store/hook'
...@@ -40,22 +38,31 @@ function getAnimationProps(delay: number) { ...@@ -40,22 +38,31 @@ function getAnimationProps(delay: number) {
export const Home: React.FC = () => { export const Home: React.FC = () => {
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
const location = useLocation() useEffect(() => {
// 在组件挂载时执行dispatch
// 检查当前路径是否包含 "/chat/"
const showOutlet = location.pathname.includes('/chat/')
const handleCreateConversation = (question: string) => {
dispatch( dispatch(
createConversation({ createConversation({
conversationData: {}, conversationData: {},
shouldNavigate: true, shouldNavigate: true,
shouldSendQuestion: question, shouldSendQuestion: '',
}), }),
) )
} }, []) // 空依赖数组确保只在组件挂载时执行一次
// const location = useLocation()
// 检查当前路径是否包含 "/chat/"
// const showOutlet = location.pathname.includes('/chat/')
// const handleCreateConversation = (question: string) => {
// dispatch(
// createConversation({
// conversationData: {},
// shouldNavigate: true,
// shouldSendQuestion: question,
// }),
// )
// }
return ( return (
<div className={styles.homePage}> <div className={styles.homePage}>
<GradientBackground />
<div className="h-full w-full"> <div className="h-full w-full">
<div className="box flex flex-col h-full w-full"> <div className="box flex flex-col h-full w-full">
<div className="flex-1 items-center pt-[24px] overflow-y-scroll sm:pt-[32px] scrollbar-hide sm:overflow-hidden"> <div className="flex-1 items-center pt-[24px] overflow-y-scroll sm:pt-[32px] scrollbar-hide sm:overflow-hidden">
...@@ -67,6 +74,7 @@ export const Home: React.FC = () => { ...@@ -67,6 +74,7 @@ export const Home: React.FC = () => {
<QuestionList <QuestionList
questions={RECOMMEND_QUESTIONS_PRODUCT} questions={RECOMMEND_QUESTIONS_PRODUCT}
dotColor="#D4CCFF" dotColor="#D4CCFF"
background="linear-gradient( 180deg, #EBE6FF 0%, #FFFFFF 100%)"
title="产品问答" title="产品问答"
iconImg={HomeIcon1} iconImg={HomeIcon1}
/> />
...@@ -75,6 +83,7 @@ export const Home: React.FC = () => { ...@@ -75,6 +83,7 @@ export const Home: React.FC = () => {
<QuestionList <QuestionList
questions={RECOMMEND_QUESTIONS_OTHER} questions={RECOMMEND_QUESTIONS_OTHER}
dotColor="#CBECFF" dotColor="#CBECFF"
background="linear-gradient( 180deg, #DBF1FF 0%, #FFFFFF 100%)"
title="您可以试着问我" title="您可以试着问我"
iconImg={HomeIcon2} iconImg={HomeIcon2}
/> />
...@@ -84,9 +93,10 @@ export const Home: React.FC = () => { ...@@ -84,9 +93,10 @@ export const Home: React.FC = () => {
<div className="hidden sm:flex flex-1 h-full sm:mt-[-62px]"> <div className="hidden sm:flex flex-1 h-full sm:mt-[-62px]">
<div <div
className="w-full h-full bg-transparent box-border rounded-[24px]" className="w-full h-full bg-transparent box-border rounded-[24px]"
style={{ height: 'calc(100vh - 64px)' }} style={{ height: 'calc(100vh - 64px)', background: '#FFFFFF' }}
> >
{showOutlet <Outlet />
{/* {showOutlet
? ( ? (
<Outlet /> <Outlet />
) )
...@@ -104,7 +114,7 @@ export const Home: React.FC = () => { ...@@ -104,7 +114,7 @@ export const Home: React.FC = () => {
</div> </div>
</div> </div>
</div> </div>
)} )} */}
</div> </div>
</div> </div>
</div> </div>
......
src/pages/Home/components/QuestionList/QuestionList.tsx
...@@ -15,6 +15,7 @@ interface QuestionListProps { ...@@ -15,6 +15,7 @@ interface QuestionListProps {
questions: string[] questions: string[]
showRefresh?: boolean showRefresh?: boolean
displayCount?: number displayCount?: number
background: string
} }
const containerVariants = { const containerVariants = {
hidden: {}, hidden: {},
...@@ -49,7 +50,7 @@ function getRandomIndices(total: number, count: number): number[] { ...@@ -49,7 +50,7 @@ function getRandomIndices(total: number, count: number): number[] {
return Array.from(indices) return Array.from(indices)
} }
const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAuth, questions, dotColor, title, iconImg, showRefresh = true, displayCount = 4 }) => { const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAuth, questions, dotColor, background, title, iconImg, showRefresh = true, displayCount = 4 }) => {
const [isRotating, setIsRotating] = useState(false) const [isRotating, setIsRotating] = useState(false)
const [displayedItems, setDisplayedItems] = useState<string[]>([]) const [displayedItems, setDisplayedItems] = useState<string[]>([])
const dispatch = useAppDispatch() const dispatch = useAppDispatch()
...@@ -78,7 +79,7 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu ...@@ -78,7 +79,7 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu
updateDisplayedItems() updateDisplayedItems()
}, [updateDisplayedItems]) }, [updateDisplayedItems])
return ( return (
<div className="h-[276px] bg-white box-border px-[20px] py-[24px] rounded-[24px] w-full sm:w-[360px] md:w-[300px]"> <div className="h-[276px] bg-white box-border px-[20px] py-[24px] rounded-[24px] w-full sm:w-[360px] md:w-[300px]" style={{ background }}>
<h3 className="h-[32px] flex items-center justify-between"> <h3 className="h-[32px] flex items-center justify-between">
<div className="flex items-center"> <div className="flex items-center">
<Image className="w-[32px] h-[32px]" src={iconImg} alt="" /> <Image className="w-[32px] h-[32px]" src={iconImg} alt="" />
......
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