feat: 优化样式

src/App.css

@@ -3,7 +3,60 @@
  box-sizing: border-box;
  margin: 0 auto;
  font-family: 'alir';
+ p {
+   font-family:
+     alir,
+     PingFangSC,
+     PingFang SC;
+   font-weight: 400;
+   font-size: 14px;
+   color: #161823;
+   line-height: 24px;
+ }
+ img {
+   width: 100%;
+   display: block;
+   margin: 12px 0;
+ }
+ h3 {
+   font-size: 14px;
+ }
+ table {
+   border-collapse: collapse;
+   text-align: center;
+   margin: 12px 0;
+   width: 100%;
+   font-size: 10px;
+ }
+ table td,
+ table th {
+   border: 1px solid #fff9fa;
+   color: #666;
+   height: 30px;
+ }
+ table thead th {
+   background-color: hsl(350, 100%, 99%);
+ }
+ table tr:nth-child(odd) {
+   background: #fff;
+ }
+ table tr:nth-child(even) {
+   background: #fff9fa;
+ }
+ ol {
+   list-style-type: disc;
+   padding-left: 16px;
+   display: flex;
+   flex-direction: column;
+   gap: 12px 0;
+   margin: 6px 0;
+ }
  ul {
-    list-style: circle;
+   list-style-type: decimal;
+   padding-left: 16px;
+   display: flex;
+   flex-direction: column;
+   gap: 8px 0;
+   margin: 4px 0;
  }
 }

src/components/ChatEditor/index.tsx

@@ -138,7 +138,7 @@ const ChatEditorBase: React.FC<ChatEditorProps & WithAuthProps> = ({ checkAuth,
                 duration: 0.3,
                 ease: 'linear',
               }}
-              className="dark:text-zinc-500 text-[12px] sm:text-base font-normal text-[#3333334d] pl-4 sm:pl-12 text-left w-[calc(100%-2rem)] truncate"
+              className="dark:text-zinc-500 text-[14px] sm:text-[14px] font-normal text-[#3333334d] pl-4 sm:pl-12 text-left w-[calc(100%-2rem)] truncate"
             >
               {placeholders[currentPlaceholder]}
             </motion.p>

src/components/PlaceholdersInput/index.tsx

@@ -266,7 +266,7 @@ export function PlaceholdersInput({
                 duration: 0.3,
                 ease: 'linear',
               }}
-              className="dark:text-zinc-500 text-[12px] sm:text-base font-normal text-[#3333334d] pl-4 sm:pl-12 text-left w-[calc(100%-2rem)] truncate"
+              className="dark:text-zinc-500 text-[14px] sm:text-[14px] font-normal text-[#3333334d] pl-4 sm:pl-12 text-left w-[calc(100%-2rem)] truncate"
             >
               {placeholders[currentPlaceholder]}
             </motion.p>

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

@@ -65,7 +65,7 @@ export const ChatAnswerBox: React.FC<ChatAnswerBoxProps> = ({ record, showIndex,
                       )
                     : <SdreamLoading />}
                 </motion.div>
-                <div className="w-[65px] flex-shrink-0"></div>
+                <div className="hidden sm:block w-[65px] flex-shrink-0"></div>
               </div>
               {isTyping && (
                 <div className="pl-[62px] mt-[12px]">

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

@@ -30,8 +30,8 @@ export const ChatAnswerRecommend: React.FC<ChatAnswerRecommendProps> = ({ answer
         <div className="flex flex-col gap-[8px]">
           {
             questionList.map((item, index) => (
-              <Button onClick={() => onSubmitQuestion(item)} key={index} color="primary" variant="light" className="text-left bg-[#fff] w-fit text-[#333] rounded-[8px] data-[hover=true]:bg-[#F6F6F8] data-[hover=true]:text-[#333]">
-                <div className="w-[150px] sm:w-full text-nowrap text-ellipsis overflow-hidden">
+              <Button onClick={() => onSubmitQuestion(item)} key={index} color="primary" variant="light" className="text-left bg-[#fff] w-fit max-w-full text-[#333] rounded-[8px] data-[hover=true]:bg-[#F6F6F8] data-[hover=true]:text-[#333]">
+                <div className="w-full sm:w-full text-nowrap text-ellipsis overflow-hidden">
                   {item}
                 </div>
                 <SendIcon />
@@ -43,10 +43,10 @@ export const ChatAnswerRecommend: React.FC<ChatAnswerRecommendProps> = ({ answer
       {
         questionList.length === 0 && (
           <div className="flex flex-col gap-[8px]">
-            <Skeleton className="w-[300px] rounded-lg">
+            <Skeleton className="w-full rounded-lg">
               <div className="h-[40px] w-full rounded-lg bg-[#fff]"></div>
             </Skeleton>
-            <Skeleton className="w-[300px] rounded-lg">
+            <Skeleton className="w-full rounded-lg">
               <div className="h-[40px] w-full rounded-lg bg-[#fff]"></div>
             </Skeleton>
           </div>