Skip to content

S
sdream-ai-fe
Commit 91474132 by weiw
Options

fix：修改猜你想问区域的样式错乱问题

parent eea86f1a
Showing with 69 additions and 58 deletions
src/pages/Home/HomeNew.tsx
...@@ -169,11 +169,11 @@ useEffect(() => { ...@@ -169,11 +169,11 @@ useEffect(() => {
)} )}
<div className="h-full w-full"> <div className="h-full w-full">
<div className="box flex flex-col h-full w-full"> <div className="box flex flex-col h-full w-full">
<div className="flex-1 items-center pt-[24px] overflow-y-scroll sm:pt-[32px] scrollbar-hide sm:overflow-hidden"> <div className="flex-1 items-center pt-[24px] overflow-y-scroll sm:pt-[32px] scrollbar-hide">
<div className="w-full"> <div className="w-full">
<div className="flex justify-center gap-[20px] mt-[22px] sm:mt-[62px]"> <div className="flex justify-center gap-[20px] mt-[22px] sm:mt-[62px]">
{/* 左侧区域 - 产品问答和您可以试着问我 */} {/* 左侧区域 - 产品问答和您可以试着问我 */}
<div className="flex flex-col gap-[20px] sm:mt-[-62px] justify-center"> <div className="flex flex-col gap-[20px] justify-center mt-0 sm:mt-[-62px]">
<motion.div className="w-full hidden sm:block sm:w-auto" {...getAnimationProps(2)}> <motion.div className="w-full hidden sm:block sm:w-auto" {...getAnimationProps(2)}>
<QuestionList <QuestionList
questions={productQuestions.content} questions={productQuestions.content}
......
src/pages/Home/components/QuestionList/QuestionList.tsx
...@@ -50,7 +50,16 @@ function getRandomIndices(total: number, count: number): number[] { ...@@ -50,7 +50,16 @@ function getRandomIndices(total: number, count: number): number[] {
return Array.from(indices) return Array.from(indices)
} }
const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAuth, questions, dotColor, background, title, iconImg, showRefresh = true, displayCount = 4 }) => { const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({
checkAuth,
questions,
dotColor,
background,
title,
iconImg,
showRefresh = true,
displayCount = 4,
}) => {
const [isRotating, setIsRotating] = useState(false) const [isRotating, setIsRotating] = useState(false)
const [displayedItems, setDisplayedItems] = useState<string[]>([]) const [displayedItems, setDisplayedItems] = useState<string[]>([])
const [isClicking, setIsClicking] = useState(false) const [isClicking, setIsClicking] = useState(false)
...@@ -69,11 +78,13 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu ...@@ -69,11 +78,13 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu
const handleClick = (item: string) => { const handleClick = (item: string) => {
if (checkAuth() && !isClicking) { if (checkAuth() && !isClicking) {
setIsClicking(true) setIsClicking(true)
dispatch(createConversation({ dispatch(
conversationData: {}, createConversation({
shouldNavigate: true, conversationData: {},
shouldSendQuestion: item, shouldNavigate: true,
})) shouldSendQuestion: item,
}),
)
// 防止重复点击 // 防止重复点击
setTimeout(() => { setTimeout(() => {
setIsClicking(false) setIsClicking(false)
...@@ -85,38 +96,35 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu ...@@ -85,38 +96,35 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu
updateDisplayedItems() updateDisplayedItems()
}, [updateDisplayedItems]) }, [updateDisplayedItems])
return ( return (
<div className="h-[276px] bg-white box-border px-[20px] py-[24px] rounded-[24px] w-full sm:w-[360px] md:w-[300px]" style={{ background }}> <div
<h3 className="h-[32px] flex items-center justify-between"> className="bg-white box-border px-[20px] py-[24px] rounded-[24px] w-full sm:w-[360px] md:w-[300px]"
<div className="flex items-center"> style={{ background }}
<Image className="w-[32px] h-[32px]" src={iconImg} alt="" /> >
<span className="text-[18px] ml-[12px] font-medium">{title}</span> <h3 className="min-h-[32px] flex items-center justify-between whitespace-nowrap">
<div className="flex items-center min-w-0 flex-1">
<Image className="w-[32px] h-[32px] flex-shrink-0" src={iconImg} alt="" />
<div className="text-[18px] ml-[12px] font-medium overflow-hidden text-ellipsis whitespace-nowrap flex-1 min-w-0">
{title}
</div>
</div> </div>
{ {showRefresh
showRefresh ? (
? ( <div className="flex-shrink-0 ml-[8px]">
<Button <Button onPress={handleRefresh} isDisabled={isRotating} isIconOnly color="primary" variant="light">
onPress={handleRefresh} <motion.div
isDisabled={isRotating} animate={{ rotate: isRotating ? -360 : 0 }}
isIconOnly transition={{
color="primary" duration: 0.7,
variant="light" ease: 'linear',
repeat: isRotating ? Infinity : 0,
}}
> >
<motion.div <Refresh />
animate={{ rotate: isRotating ? -360 : 0 }} </motion.div>
transition={{ </Button>
duration: 0.7, </div>
ease: 'linear', )
repeat: isRotating ? Infinity : 0, : null}
}}
>
<Refresh />
</motion.div>
</Button>
)
: null
}
</h3> </h3>
<motion.ul <motion.ul
key={displayedItems.join(',')} key={displayedItems.join(',')}
...@@ -125,27 +133,30 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu ...@@ -125,27 +133,30 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu
animate="visible" animate="visible"
className="mt-[18px] flex flex-col gap-[8px] w-full" className="mt-[18px] flex flex-col gap-[8px] w-full"
> >
{ {displayedItems.map((item, index) => (
displayedItems.map((item, index) => ( <motion.li
<motion.li key={`question-${item}`}
key={`question-${item}`} custom={index}
custom={index} variants={itemVariants}
variants={itemVariants} initial="hidden"
initial="hidden" animate="visible"
animate="visible" exit="exit"
exit="exit" layout
layout className="w-full"
className="w-full" >
<Button
onPress={() => handleClick(item)}
color="primary"
variant="light"
className="text-left bg-[#F7FCFF] w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary"
> >
<Button onPress={() => handleClick(item)} color="primary" variant="light" className="text-left bg-[#F7FCFF] w-full text-[#333] rounded-[23px] data-[hover=true]:bg-[#E5F6FF] data-[hover=true]:text-primary"> <div className="w-full text-nowrap text-ellipsis overflow-hidden">
<div className="w-full text-nowrap text-ellipsis overflow-hidden"> <span style={{ color: dotColor }}>·</span>
<span style={{ color: dotColor }}>·</span> <span className="ml-[8px]">{item}</span>
<span className="ml-[8px]">{item}</span> </div>
</div> </Button>
</Button> </motion.li>
</motion.li> ))}
))
}
</motion.ul> </motion.ul>
</div> </div>
) )
......
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