feat: 收藏的样式

src/pages/Collect/Collect.tsx

@@ -87,41 +87,50 @@ export const Collect: React.FC = () => {
         <ChatMaskBar />
         <div className="content h-full overflow-y-auto">
           <motion.div
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{
-              duration: 0.3,
-              opacity: { duration: 0.1 },
-            }}
+
             className={`${styles.collectScrollable} scrollbar-hide`}
           >
-            <div className={`${styles.inter} gap-[32px]`}>
+            <div className={`${styles.inter}`}>
               {
-                collectList.map((item: any, index: number) => (
-                  <div className="w-full max-w-[1000px] mx-auto bg-white rounded-[20px] box-border px-[24px] py-[20px]" key={`${item.collectionId}_${index}`}>
-                    <ReactMarkdown
-                      rehypePlugins={[rehypeRaw, rehypeSanitize]}
-                      remarkPlugins={[remarkGfm]}
-                      className="markdown-content"
-                    >
-                      {formatMarkdown(item.answer || '')}
-                    </ReactMarkdown>
-                    {item.attachmentList && item.attachmentList?.length !== 0 && <ChatAnswerAttachment answer={item} />}
-                    <div className="mt-[12px] flex gap-[4px] justify-between items-center">
-                      <div className="text-12px text-[#B2B8C1]">
-                        {item.collectionTime}
-                      </div>
-                      <div>
-                        <Tooltip color="foreground" content="复制" className="capitalize">
-                          <Button variant="light" isIconOnly aria-label="CopyIcon" onClick={() => handleCopy(item)}><CopyIcon /></Button>
-                        </Tooltip>
-                        <Tooltip color="foreground" content="删除" className="capitalize">
-                          <Button variant="light" isIconOnly aria-label="DeleteIcon" onClick={() => handleDelete(item)}><DeleteIcon /></Button>
-                        </Tooltip>
-                      </div>
-                    </div>
-                  </div>
-                ))
+                collectList.length !== 0 && (
+                  <motion.div
+                    initial={{ opacity: 0, y: -10 }}
+                    animate={{ opacity: 1, y: 0 }}
+                    transition={{
+                      duration: 0.3,
+                      opacity: { duration: 0.1 },
+                    }}
+                    className="flex flex-col gap-[24px]"
+                  >
+                    {
+                      collectList.map((item: any, index: number) => (
+                        <div className="w-full max-w-[1000px] mx-auto bg-white rounded-[20px] box-border px-[24px] py-[20px]" key={`${item.collectionId}_${index}`}>
+                          <ReactMarkdown
+                            rehypePlugins={[rehypeRaw, rehypeSanitize]}
+                            remarkPlugins={[remarkGfm]}
+                            className="markdown-content"
+                          >
+                            {formatMarkdown(item.answer || '')}
+                          </ReactMarkdown>
+                          {item.attachmentList && item.attachmentList?.length !== 0 && <ChatAnswerAttachment answer={item} />}
+                          <div className="mt-[12px] flex gap-[4px] justify-between items-center">
+                            <div className="text-12px text-[#B2B8C1]">
+                              {item.collectionTime}
+                            </div>
+                            <div>
+                              <Tooltip color="foreground" content="复制" className="capitalize">
+                                <Button variant="light" isIconOnly aria-label="CopyIcon" onClick={() => handleCopy(item)}><CopyIcon /></Button>
+                              </Tooltip>
+                              <Tooltip color="foreground" content="删除" className="capitalize">
+                                <Button variant="light" isIconOnly aria-label="DeleteIcon" onClick={() => handleDelete(item)}><DeleteIcon /></Button>
+                              </Tooltip>
+                            </div>
+                          </div>
+                        </div>
+                      ))
+                    }
+                  </motion.div>
+                )
               }
               {isLoading && <div className="w-full flex justify-center"><Spinner /></div>}
               {
@@ -135,7 +144,7 @@ export const Collect: React.FC = () => {
               }
               {
                 collectList.length === total && collectList.length !== 0 && (
-                  <div className="w-full max-w-[1000px] mx-auto flex justify-center text-[#8D9795]">到底啦~</div>
+                  <div className="w-full mt-[24px] max-w-[1000px] mx-auto flex justify-center text-[#8D9795]">到底啦~</div>
                 )
               }
             </div>