fix:按照ui设计稿改版

src/App.css

@@ -3,6 +3,7 @@
  box-sizing: border-box;
  margin: 0 auto;
  font-family: 'alir';
+ background: #F7FAFD !important;
  p {
    font-family:
      alir,

src/components/ChatEditor/index.tsx

@@ -108,7 +108,7 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
   )
 
   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
         ref={editorRef}
         contentEditable
@@ -120,7 +120,7 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
         onFocus={onFocus}
         onKeyDown={handleKeyDown}
         onPaste={handlePaste}
-        suppressContentEditableWarning={true}
+        suppressContentEditableWarning
         style={{
           resize: 'none',
         }}

src/components/MarkdownDetail/index.tsx

@@ -15,7 +15,7 @@ export const MarkdownDetail: React.FC<MarkdownDetailProps> = memo(({ children })
     <ReactMarkdown
       rehypePlugins={[rehypeRaw, rehypeSanitize]}
       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={{
         img: ({ ...data }): JSX.Element => {
           return (

src/config/nav.ts

@@ -4,11 +4,11 @@ import Collect from '@/assets/svg/collect.svg?react'
 
 export const NAV_BAR_ITEMS = [
   // { icon: Logo, label: '', key: 'logo' },
-  { icon: '', label: '', key: 'line1' },
+  // { icon: '', label: '', key: 'line1' },
   { icon: AddNewChat, label: '新建对话', key: 'add' },
   { icon: HistoryChat, label: '历史对话', key: 'history' },
   { icon: Collect, label: '收藏', key: 'collect' },
-  { icon: '', label: '', key: 'line2' },
+  // { icon: '', label: '', key: 'line2' },
   // { icon: Tools, label: '工具', key: 'tools' },
   // { icon: '', label: '', key: 'line3' },
 ]

src/config/theme.ts

@@ -5,7 +5,7 @@ export const theme: HeroUIPluginConfig = {
   themes: {
     light: {
       colors: {
-        background: '#E6F6FE', // or DEFAULT
+        background: '#F7F8FA', // or DEFAULT
         primary: {
           DEFAULT: '#29B6FD',
         },
@@ -13,7 +13,7 @@ export const theme: HeroUIPluginConfig = {
     },
     dark: {
       colors: {
-        background: '#E6F6FE', // or DEFAULT
+        background: '#F7F8FA', // or DEFAULT
         primary: {
           DEFAULT: '#29B6FD',
         },

src/layouts/Navbar/Navbar.tsx

@@ -10,7 +10,6 @@ import type { WithAuthProps } from '@/auth/withAuth'
 import { withAuth } from '@/auth/withAuth'
 import { NAV_BAR_ITEMS } from '@/config/nav'
 import { useAppDispatch, useAppSelector } from '@/store/hook'
-import Logo from '@/assets/svg/logo.svg?react'
 import { isMobile } from '@/utils'
 
 interface NavbarProps {
@@ -104,7 +103,7 @@ const NavbarBase: React.FC<NavbarProps & WithAuthProps> = ({ isHistoryVisible, c
       >
         {/* 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]`}>
-          <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) => {
             return (

src/pages/Chat/Chat.tsx

@@ -4,8 +4,6 @@ import { Button } from '@heroui/react'
 import { motion } from 'framer-motion'
 import { useScroll } from 'ahooks'
 import styles from './Chat.module.less'
-import { ChatSlogan } from './components/ChatSlogan'
-import { ChatMaskBar } from './components/ChatMaskBar'
 import { processApiResponse } from './helper'
 import { ChatWelcome } from './components/ChatWelcome'
 import { ChatItemUser } from './components/ChatItem/ChatItemUser'
@@ -203,8 +201,8 @@ export const Chat: React.FC = () => {
   return (
     <div className={styles.scrollView}>
       <div className={`${styles.chatPage} relative`}>
-        <ChatSlogan />
-        <ChatMaskBar />
+        {/* <ChatSlogan />
+        <ChatMaskBar /> */}
         <div className={`${styles.content}`}>
           {isLoading && <div className="w-full h-full flex justify-center items-center"><SdreamLoading /></div>}
           {!isLoading && (

src/pages/Chat/components/ChatItem/ChatAnswerBox.tsx

@@ -55,7 +55,8 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex,
               <div className="flex">
                 <Avatar className="sm:mr-[20px] hidden sm:block flex-shrink-0" src={AvatarBot} />
                 <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)
                     ? (

src/pages/Chat/components/ChatItem/ChatAnswerParser.tsx

@@ -164,7 +164,7 @@ export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ isLastAnswer
       </div>
 
       {!!displayedText.length && (
-        <div className={answer.cardList?.length ? 'mb-[20px]' : ''}>
+        <div style={{ background: '#F7FAFD' }} className={answer.cardList?.length ? 'mb-[20px]' : ''}>
           <MarkdownDetail>
             {displayedText}
           </MarkdownDetail>

src/pages/Chat/components/ChatItem/ChatItemUser.tsx

@@ -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="flex justify-end">
         <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} />
       </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 = () => {
       <div className="flex">
         <Avatar className="mr-[12px] hidden sm:block flex-shrink-0" src={AvatarBot} />
         <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">
-            <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-[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> */}
           </div>
         </motion.div>
       </div>

src/pages/Home/HomeNew.tsx

 import type React from 'react'
 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 { QuestionList } from './components/QuestionList'
-import { Slogan } from './components/Slogan/Slogan'
 import HomeIcon1 from '@/assets/homeIcon1.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 { createConversation } from '@/store/conversationSlice'
 import { useAppDispatch } from '@/store/hook'
@@ -40,22 +38,31 @@ function getAnimationProps(delay: number) {
 
 export const Home: React.FC = () => {
   const dispatch = useAppDispatch()
-  const location = useLocation()
-
-  // 检查当前路径是否包含 "/chat/"
-  const showOutlet = location.pathname.includes('/chat/')
-  const handleCreateConversation = (question: string) => {
+  useEffect(() => {
+    // 在组件挂载时执行dispatch
     dispatch(
       createConversation({
         conversationData: {},
         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 (
     <div className={styles.homePage}>
-      <GradientBackground />
       <div className="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">
@@ -67,6 +74,7 @@ export const Home: React.FC = () => {
                     <QuestionList
                       questions={RECOMMEND_QUESTIONS_PRODUCT}
                       dotColor="#D4CCFF"
+                      background="linear-gradient( 180deg, #EBE6FF 0%, #FFFFFF 100%)"
                       title="产品问答"
                       iconImg={HomeIcon1}
                     />
@@ -75,6 +83,7 @@ export const Home: React.FC = () => {
                     <QuestionList
                       questions={RECOMMEND_QUESTIONS_OTHER}
                       dotColor="#CBECFF"
+                      background="linear-gradient( 180deg, #DBF1FF 0%, #FFFFFF 100%)"
                       title="您可以试着问我"
                       iconImg={HomeIcon2}
                     />
@@ -84,9 +93,10 @@ export const Home: React.FC = () => {
                 <div className="hidden sm:flex flex-1 h-full sm:mt-[-62px]">
                   <div
                     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 />
                         )
@@ -104,7 +114,7 @@ export const Home: React.FC = () => {
                               </div>
                             </div>
                           </div>
-                        )}
+                        )} */}
                   </div>
                 </div>
               </div>

src/pages/Home/components/QuestionList/QuestionList.tsx

@@ -15,6 +15,7 @@ interface QuestionListProps {
   questions: string[]
   showRefresh?: boolean
   displayCount?: number
+  background: string
 }
 const containerVariants = {
   hidden: {},
@@ -49,7 +50,7 @@ function getRandomIndices(total: number, count: number): number[] {
   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 [displayedItems, setDisplayedItems] = useState<string[]>([])
   const dispatch = useAppDispatch()
@@ -78,7 +79,7 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu
     updateDisplayedItems()
   }, [updateDisplayedItems])
   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">
         <div className="flex items-center">
           <Image className="w-[32px] h-[32px]" src={iconImg} alt="" />