Skip to content

S
sdream-ai-fe
Commit be2a4fa0 by HoMeTown
Options

feat: 刷新按钮

parent e0e5c31b
Showing with 65 additions and 7 deletions
src/assets/svg/refresh.svg 0 → 100644
<?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' ...@@ -4,7 +4,6 @@ import styles from './Home.module.less'
import { QuestionList } from './components/QuestionList' import { QuestionList } from './components/QuestionList'
import { WelcomeWord } from './components/WelcomeWord' import { WelcomeWord } from './components/WelcomeWord'
import { Slogan } from './components/Slogan/Slogan' import { Slogan } from './components/Slogan/Slogan'
import HomeIcon1 from '@/assets/homeIcon1.png' import HomeIcon1 from '@/assets/homeIcon1.png'
import HomeIcon2 from '@/assets/homeIcon2.png' import HomeIcon2 from '@/assets/homeIcon2.png'
import { GradientBackground } from '@/components/GradientBackground' import { GradientBackground } from '@/components/GradientBackground'
...@@ -35,8 +34,8 @@ export const Home: React.FC = () => { ...@@ -35,8 +34,8 @@ export const Home: React.FC = () => {
/> />
</div> </div>
<div className="mx-auto iptContainer w-full h-[132px] max-w-[1000px] flex-shrink-0 bg-[#cfc]"> <div className="mx-auto iptContainer w-full h-[132px] max-w-[1000px] flex-shrink-0">
123 input
</div> </div>
</div> </div>
</div> </div>
......
src/pages/Home/components/QuestionList/QuestionList.tsx
...@@ -2,11 +2,14 @@ import { Button } from '@nextui-org/react' ...@@ -2,11 +2,14 @@ import { Button } from '@nextui-org/react'
import type React from 'react' import type React from 'react'
import { Image } from '@nextui-org/image' import { Image } from '@nextui-org/image'
import { motion } from 'framer-motion' import { motion } from 'framer-motion'
import { useState } from 'react'
import Refresh from '@/assets/svg/refresh.svg?react'
interface QuestionListProps { interface QuestionListProps {
title: string title: string
iconImg: string iconImg: string
dotColor: string dotColor: string
showRefresh?: boolean
} }
const list = { const list = {
...@@ -29,12 +32,44 @@ const item = { ...@@ -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 ( 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]">
<h3 className="h-[32px] flex items-center"> <h3 className="h-[32px] flex items-center justify-between">
<Image className="w-[32px] h-[32px]" src={iconImg} alt="" /> <div className="flex items-center">
<span className="text-[18px] ml-[12px] font-medium">{title}</span> <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> </h3>
<motion.ul <motion.ul
initial="hidden" initial="hidden"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment