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

91474132 · weiw · eea86f1a · 91474132 · 91474132
Commit 91474132 authored Sep 16, 2025 by weiw
Show whitespace changes
Inline Side-by-side

Showing with 40 additions and 29 deletions

src/pages/Home/HomeNew.tsx
+2 -2

src/pages/Home/components/QuestionList/QuestionList.tsx
+38 -27

No files found.
--- a/src/pages/Home/HomeNew.tsx
+++ b/src/pages/Home/HomeNew.tsx
@@ -169,11 +169,11 @@ useEffect(() => {
      )}
      <div className="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="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)}>
                    <QuestionList
                      questions={productQuestions.content}

--- a/src/pages/Home/components/QuestionList/QuestionList.tsx
+++ b/src/pages/Home/components/QuestionList/QuestionList.tsx
@@ -50,7 +50,16 @@ function getRandomIndices(total: number, count: number): number[] {
  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 [displayedItems, setDisplayedItems] = useState<string[]>([])
  const [isClicking, setIsClicking] = useState(false)
@@ -69,11 +78,13 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu
  const handleClick = (item: string) => {
    if (checkAuth() && !isClicking) {
      setIsClicking(true)
-      dispatch(createConversation({
+      dispatch(
+        createConversation({
          conversationData: {},
          shouldNavigate: true,
          shouldSendQuestion: item,
-      }))
+        }),
+      )
      // 防止重复点击
      setTimeout(() => {
        setIsClicking(false)
@@ -85,22 +96,21 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu
    updateDisplayedItems()
  }, [updateDisplayedItems])
  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>
-        </div>
-        {
-          showRefresh
-            ? (
-              <Button
-                onPress={handleRefresh}
-                isDisabled={isRotating}
-                isIconOnly
-                color="primary"
-                variant="light"
    >
+      <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>
+        {showRefresh
+? (
+          <div className="flex-shrink-0 ml-[8px]">
+            <Button onPress={handleRefresh} isDisabled={isRotating} isIconOnly color="primary" variant="light">
              <motion.div
                animate={{ rotate: isRotating ? -360 : 0 }}
                transition={{
@@ -112,11 +122,9 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu
                <Refresh />
              </motion.div>
            </Button>
+          </div>
        )
-            : null
+: null}
-        }
      </h3>
      <motion.ul
        key={displayedItems.join(',')}
@@ -125,8 +133,7 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu
        animate="visible"
        className="mt-[18px] flex flex-col gap-[8px] w-full"
      >
-        {
+        {displayedItems.map((item, index) => (
-          displayedItems.map((item, index) => (
          <motion.li
            key={`question-${item}`}
            custom={index}
@@ -137,15 +144,19 @@ const QuestionListBase: React.FC<QuestionListProps & WithAuthProps> = ({ checkAu
            layout
            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">
                <span style={{ color: dotColor }}>·</span>
                <span className="ml-[8px]">{item}</span>
              </div>
            </Button>
          </motion.li>
-          ))
+        ))}
-        }
      </motion.ul>
    </div>
  )