feat: 样式效果优化

src/App.css

@@ -11,7 +11,7 @@
    font-weight: 400;
    font-weight: 400;
    font-size: 15px;
    font-size: 15px;
    color: #161823;
    color: #161823;
-   line-height: 24px;
+   line-height: 28px;
  }
  }
  /* @media screen and (max-width: 480px)  {
  /* @media screen and (max-width: 480px)  {
   img {
   img {

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

@@ -57,6 +57,10 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex,
                 <div
                 <div
                   className="bg-white rounded-[20px] box-border px-[16px] py-[12px] sm:px-[24px] sm:py-[20px] relative"
                   className="bg-white rounded-[20px] box-border px-[16px] py-[12px] sm:px-[24px] sm:py-[20px] relative"
                 >
                 >
+                  {
+                    (item.isShow || (!item.isShow && !isTyping && item.answer && item.answer?.length !== 0))
+                    && <div className="absolute left-[24px] text-[10px] text-[#d0d1d2] bottom-[24px] sm:bottom-[28px]">AI生成</div>
+                  }
                   {(item.answer?.length || item.cardList?.length)
                   {(item.answer?.length || item.cardList?.length)
                     ? (
                     ? (
                         <div className="content">
                         <div className="content">
@@ -68,7 +72,7 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex,
                     : <SdreamLoading />}
                     : <SdreamLoading />}
 
 
                 </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 && (
                 <div className="sm:pl-[62px] mt-[12px]">
                 <div className="sm:pl-[62px] mt-[12px]">

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

@@ -151,8 +151,6 @@ export const ChatAnswerParser: React.FC<ChatAnswerParserProps> = ({ isLastAnswer
       && <ChatAnswerAttachment fromParser isLastAnswer={isLastAnswer} onSubmitQuestion={onSubmitQuestion} answer={answer} />}
       && <ChatAnswerAttachment fromParser isLastAnswer={isLastAnswer} onSubmitQuestion={onSubmitQuestion} answer={answer} />}
 
 
       {!isTyping && !hideOperate && <ChatAnswerOperate answer={answer} />}
       {!isTyping && !hideOperate && <ChatAnswerOperate answer={answer} />}
-
-      {!isTyping && <div className="flex text-[10px] right-[16px] text-[#d0d1d2] bottom-[4px]">AI生成</div>}
     </div>
     </div>
   )
   )
 }
 }

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

@@ -13,16 +13,14 @@ interface ChatAnswerShowerProps {
 export const ChatAnswerShower: React.FC<ChatAnswerShowerProps> = ({ answer, isLastAnswer, onSubmitQuestion }) => {
 export const ChatAnswerShower: React.FC<ChatAnswerShowerProps> = ({ answer, isLastAnswer, onSubmitQuestion }) => {
   const hideOperate = (answer.cardList || []).some(attachment => attachment.type === 'box' || attachment?.type?.includes('card-'))
   const hideOperate = (answer.cardList || []).some(attachment => attachment.type === 'box' || attachment?.type?.includes('card-'))
   return (
   return (
-    <div>
+    <div className="relative flex flex-col gap-[8px]">
       {answer.answer && (
       {answer.answer && (
         <MarkdownDetail>
         <MarkdownDetail>
           {formatMarkdown(answer.answer || '')}
           {formatMarkdown(answer.answer || '')}
         </MarkdownDetail>
         </MarkdownDetail>
       )}
       )}
       {answer.cardList && answer.cardList?.length !== 0 && <ChatAnswerAttachment onSubmitQuestion={onSubmitQuestion} isLastAnswer={isLastAnswer} answer={answer} />}
       {answer.cardList && answer.cardList?.length !== 0 && <ChatAnswerAttachment onSubmitQuestion={onSubmitQuestion} isLastAnswer={isLastAnswer} answer={answer} />}
-      {/* {} */}
       {!hideOperate && <ChatAnswerOperate answer={answer} />}
       {!hideOperate && <ChatAnswerOperate answer={answer} />}
-      <div className="flex text-[10px] right-[16px] text-[#d0d1d2] bottom-[4px]">AI生成</div>
     </div>
     </div>
   )
   )
 }
 }

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

@@ -9,11 +9,11 @@ interface ChatItemUserProps {
 export const ChatItemUser: React.FC<ChatItemUserProps> = ({ record }) => {
 export const ChatItemUser: React.FC<ChatItemUserProps> = ({ record }) => {
   return (
   return (
     <div className="chatItemUser">
     <div className="chatItemUser">
-      <div className="text-[#b9b9bb] text-[13px] text-center w-full">{record.qaTime}</div>
+      <div className="text-[#b9b9bb] text-[13px] text-center w-full mb-[12px]">{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-[#29B6FD] rounded-[20px] box-border  text-[#fff] 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>
     </div>
     </div>

src/pages/Collect/Collect.tsx

@@ -96,8 +96,7 @@ export const Collect: React.FC = () => {
         <ChatMaskBar />
         <ChatMaskBar />
         <div className="content h-full overflow-y-auto">
         <div className="content h-full overflow-y-auto">
           <motion.div
           <motion.div
-
-            className={`${styles.collectScrollable} scrollbar-hide`}
+            className={`${styles.collectScrollable} scrollbar-hide pt-[16px]`}
           >
           >
             <div className={`${styles.inter}`}>
             <div className={`${styles.inter}`}>
               {
               {