feat: 刷新按钮

src/assets/svg/refresh.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>换一换</title>
+    <defs>
+        <rect id="path-1" x="0" y="0" width="12" height="12"></rect>
+    </defs>
+    <g id="晓得---PC端页面-草稿" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="晓得-PC端---默认页" transform="translate(-1426.000000, -444.000000)">
+            <g id="编组-12备份-2" transform="translate(498.000000, 440.000000)">
+                <g id="换一换标签" transform="translate(920.000000, 0.000000)">
+                    <path d="M10,0 L58,0 C63.5228475,-1.01453063e-15 68,4.4771525 68,10 C68,15.5228475 63.5228475,20 58,20 L10,20 C4.4771525,20 6.76353751e-16,15.5228475 0,10 C-6.76353751e-16,4.4771525 4.4771525,1.01453063e-15 10,0 Z" id="矩形"></path>
+                    <g id="换一换" transform="translate(8.000000, 4.000000)">
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <g id="蒙版"></g>
+                        <path d="M5.37894737,9.65 C4.96842105,9.65 4.63157895,9.98684211 4.63157895,10.3973684 C4.63157895,10.8078947 4.96842105,11.1447368 5.37894737,11.1447368 C5.78947368,11.1447368 6.12631579,10.8078947 6.12631579,10.3973684 C6.12631579,9.98684211 5.78947368,9.65 5.37894737,9.65 Z M6.69473684,0.818421053 C4.33684211,0.818421053 2.27368421,2.38684211 1.63157895,4.65 L1.4,4.19736842 L1.32631579,4.08157895 C1.07368421,3.75526316 0.6,3.69210526 0.273684211,3.94473684 C-0.0105263158,4.16578947 -0.105263158,4.55526316 0.0631578947,4.88157895 L0.989473684,6.70263158 L1.07368421,6.83947368 C1.37894737,7.26052632 1.94736842,7.39736842 2.41052632,7.16578947 L4.2,6.25 L4.31578947,6.17631579 C4.64210526,5.92368421 4.70526316,5.45 4.45263158,5.12368421 C4.23157895,4.83947368 3.84210526,4.74473684 3.51578947,4.91315789 L3.05263158,5.13421053 C3.57894737,3.12368421 5.63157895,1.91315789 7.64210526,2.43947368 C9.65263158,2.96578947 10.8631579,5.01842105 10.3368421,7.02894737 C10.0526316,8.12368421 9.28421053,9.03947368 8.25263158,9.50263158 C8.15789474,9.54473684 8.05263158,9.58684211 7.91578947,9.62894737 C7.49473684,9.76578947 7.24210526,10.1973684 7.34736842,10.6289474 C7.44210526,10.9973684 7.82105263,11.2078947 8.18947368,11.1131579 C8.42105263,11.05 8.61052632,10.9868421 8.74736842,10.9236842 C11.4210526,9.78684211 12.6736842,6.70263158 11.5368421,4.01842105 C10.7157895,2.08157895 8.81052632,0.818421053 6.69473684,0.818421053 Z M3.09473684,8.21842105 C2.68421053,8.21842105 2.34736842,8.55526316 2.34736842,8.96578947 C2.34736842,9.37631579 2.68421053,9.71315789 3.09473684,9.71315789 C3.50526316,9.71315789 3.84210526,9.37631579 3.84210526,8.96578947 C3.85263158,8.55526316 3.51578947,8.21842105 3.09473684,8.21842105 Z" fill="#29B6FD" fill-rule="nonzero" mask="url(#mask-2)"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

src/pages/Home/Home.tsx

@@ -4,7 +4,6 @@ import styles from './Home.module.less'
 import { QuestionList } from './components/QuestionList'
 import { WelcomeWord } from './components/WelcomeWord'
 import { Slogan } from './components/Slogan/Slogan'
-
 import HomeIcon1 from '@/assets/homeIcon1.png'
 import HomeIcon2 from '@/assets/homeIcon2.png'
 import { GradientBackground } from '@/components/GradientBackground'
@@ -35,8 +34,8 @@ export const Home: React.FC = () => {
             />
 
           </div>
-          <div className="mx-auto iptContainer w-full h-[132px] max-w-[1000px] flex-shrink-0 bg-[#cfc]">
-            123
+          <div className="mx-auto iptContainer w-full h-[132px] max-w-[1000px] flex-shrink-0">
+            input
           </div>
         </div>
       </div>

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

@@ -2,11 +2,14 @@ import { Button } from '@nextui-org/react'
 import type React from 'react'
 import { Image } from '@nextui-org/image'
 import { motion } from 'framer-motion'
+import { useState } from 'react'
+import Refresh from '@/assets/svg/refresh.svg?react'
 
 interface QuestionListProps {
   title: string
   iconImg: string
   dotColor: string
+  showRefresh?: boolean
 }
 
 const list = {
@@ -29,12 +32,44 @@ const item = {
   },
 }
 
-export const QuestionList: React.FC<QuestionListProps> = ({ dotColor, title, iconImg }) => {
+export const QuestionList: React.FC<QuestionListProps> = ({ dotColor, title, iconImg, showRefresh = true }) => {
+  const [isRotating, setIsRotating] = useState(false)
+  const handleRefresh = () => {
+    setIsRotating(true)
+  }
   return (
     <div className="h-[276px] bg-white box-border px-[20px] py-[24px] rounded-[24px] w-full sm:w-[360px] md:w-[300px]">
-      <h3 className="h-[32px] flex items-center">
+      <h3 className="h-[32px] flex items-center justify-between">
+        <div className="flex items-center">
           <Image className="w-[32px] h-[32px]" src={iconImg} alt="" />
           <span className="text-[18px] ml-[12px] font-medium">{title}</span>
+        </div>
+        {
+          showRefresh
+            ? (
+                <Button
+                  onClick={handleRefresh}
+                  isDisabled={isRotating}
+                  isIconOnly
+                  color="primary"
+                  variant="light"
+                >
+                  <motion.div
+                    animate={{ rotate: isRotating ? -360 : 0 }}
+                    transition={{
+                      duration: 0.7,
+                      ease: 'linear',
+                      repeat: isRotating ? Infinity : 0,
+                    }}
+                  >
+                    <Refresh />
+                  </motion.div>
+                </Button>
+              )
+            : null
+
+        }
+
       </h3>
       <motion.ul
         initial="hidden"