@anker-in/campaign-ui 0.5.3 → 0.5.4-beta.1

package/src/components/credits/creditsRedeemList/CreditsRedeemList.tsx

@@ -1,4 +1,4 @@
-import { Container, Heading, Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
+import { Container, Heading, Tabs, TabsContent, TabsList, TabsTrigger } from '@anker-in/headless-ui'
 import classNames from 'classnames'
 import { useCallback, useMemo, useState } from 'react'
 
@@ -32,8 +32,6 @@ export const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; i
 
   const isLogin = Object.keys(profile || {}).length > 0
 
-  const [activeTab, setActiveTab] = useState<string>(copy.list?.[0]?.label || '')
-
   const [popRedeemData, setPopRedeemData] = useState<RedeemableItemType | undefined>(undefined)
 
   const [rules, setRules] = useState<string | string[]>()
@@ -69,38 +67,43 @@ export const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; i
         image: item.goods_url,
       }
     })
-  }, [copy.list, activeTab, redeemableList])
+  }, [redeemableList])
 
   const handles = alpcList.map(item => item.handle)
   const { data: products } = useProductsByHandles({ handles })
 
-  const list = useMemo(() => {
-    const currentList = copy.list?.find(item => item.label === activeTab)
-    return (currentList?.list || [])
-      .filter(item => alpcList.some(alpcItem => String(alpcItem.id) === String(item.id)))
-      .map(item => {
-        const alpcItem = alpcList.find(alpcItem => String(alpcItem.id) === String(item.id))
-        const product = products?.find(product => product.handle === alpcItem?.handle)
-        const variant = product?.variants.find(variant => variant.sku === alpcItem?.sku)
-        // 过滤掉库存不足的商品
-        if (alpcItem?.isLimited && (!alpcItem?.remainingInventory || alpcItem.remainingInventory <= 0)) return null
-        if (alpcItem?.consumeType === AlpcConsumeType.Product && (!product || !variant)) return null
-
-        // 检查 GoGift 是否已经兑换过（只有 GoGift 限制兑换一次）
-        const hasRedeemed = item.type === ConsumeType.GoGift &&
-          isLogin &&
-          myRewards.some(reward => reward.rule_id === Number(item.id))
-
-        return {
-          alpc: alpcList.find(alpcItem => String(alpcItem.id) === String(item.id)),
-          config: item,
-          product,
-          variant,
-          hasRedeemed,
-        }
-      })
-      .filter(item => item !== null) as unknown as RedeemableItemType[]
-  }, [alpcList, products, isLogin, myRewards])
+  // 按 tab label 分组预计算列表，配合 TabsContent 声明式渲染，避免手动 activeTab 字符串比较
+  const listByTab = useMemo(() => {
+    const map = new Map<string, RedeemableItemType[]>()
+    ;(copy.list || []).forEach(categoryItem => {
+      const items = (categoryItem.list || [])
+        .filter(item => alpcList.some(alpcItem => String(alpcItem.id) === String(item.id)))
+        .map(item => {
+          const alpcItem = alpcList.find(alpcItem => String(alpcItem.id) === String(item.id))
+          const product = products?.find(product => product.handle === alpcItem?.handle)
+          const variant = product?.variants.find(variant => variant.sku === alpcItem?.sku)
+          // 过滤掉库存不足的商品
+          if (alpcItem?.isLimited && (!alpcItem?.remainingInventory || alpcItem.remainingInventory <= 0)) return null
+          if (alpcItem?.consumeType === AlpcConsumeType.Product && (!product || !variant)) return null
+
+          // 检查 GoGift 是否已经兑换过（只有 GoGift 限制兑换一次）
+          const hasRedeemed = item.type === ConsumeType.GoGift &&
+            isLogin &&
+            myRewards.some(reward => reward.rule_id === Number(item.id))
+
+          return {
+            alpc: alpcItem,
+            config: item,
+            product,
+            variant,
+            hasRedeemed,
+          }
+        })
+        .filter(item => item !== null) as unknown as RedeemableItemType[]
+      map.set(categoryItem.label, items)
+    })
+    return map
+  }, [copy.list, alpcList, products, isLogin, myRewards])
 
   const handleRedeemError = useCallback(
     (errorCode: AlpcErrorCode) => {
@@ -142,9 +145,8 @@ export const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; i
         shape={rounded ? 'rounded' : 'square'}
         align="left"
         className={classNames('py-[24px] md:justify-center')}
-        value={activeTab.toString()}
+        defaultValue={copy.list?.[0]?.label || ''}
         onValueChange={value => {
-          setActiveTab(value)
           gaTrack({
             event: 'ga4Event',
             event_name: 'lp_navigation',
@@ -162,32 +164,38 @@ export const CreditsRedeemList = ({ copy, id }: { copy: CreditsRedeemListCopy; i
             </TabsTrigger>
           ))}
         </TabsList>
+        {(copy.list || []).map(categoryItem => (
+          <TabsContent key={categoryItem.label} value={categoryItem.label}>
+            {/* PC端 */}
+            {!!alpcList?.length && !listLoading && (
+              <div
+                className={classNames(
+                  'relative grid grid-cols-4 gap-[16px] md:grid-cols-2 md:gap-[12px] md-xl:grid-cols-3'
+                )}
+              >
+                {(listByTab.get(categoryItem.label) || [])?.map(item => (
+                  <RedeemableItem
+                    key={item?.alpc?.id}
+                    copy={copy}
+                    item={item}
+                    onRedeem={(item: RedeemableItemType) => {
+                      if (!isLogin) {
+                        openSignUpPopup()
+                      } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {
+                        authCodeActivate.setAutoSendEmail(true)
+                        authCodeActivate.open()
+                      } else {
+                        setPopRedeemData(item)
+                      }
+                    }}
+                    onRulesOpen={setRules}
+                  />
+                ))}
+              </div>
+            )}
+          </TabsContent>
+        ))}
       </Tabs>
-      {/* PC端 */}
-      {!!alpcList?.length && !listLoading && (
-        <div
-          className={classNames('relative grid grid-cols-4 gap-[16px] md:grid-cols-2 md:gap-[12px] md-xl:grid-cols-3')}
-        >
-          {list?.map(item => (
-            <RedeemableItem
-              key={item?.alpc?.id}
-              copy={copy}
-              item={item}
-              onRedeem={(item: RedeemableItemType) => {
-                if (!isLogin) {
-                  openSignUpPopup()
-                } else if (!profile?.activated && !authCodeActivate.isActivateSuccess) {
-                  authCodeActivate.setAutoSendEmail(true)
-                  authCodeActivate.open()
-                } else {
-                  setPopRedeemData(item)
-                }
-              }}
-              onRulesOpen={setRules}
-            />
-          ))}
-        </div>
-      )}
 
       {(popRedeemData?.config?.type === ConsumeType.Coupon ||
         popRedeemData?.config?.type === ConsumeType.ShippingCoupon) &&

package/src/components/credits/modal/ActivitiesModal.tsx

@@ -5,7 +5,7 @@ import useActivities from '../context/hooks/useActivities'
 import type { Task } from '../context/response'
 import { CreditsModalContainer, type ModalContainerProps } from './ModalContainer'
 import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
-import { Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@anker-in/headless-ui'
 import LoadingDots from './LoadingDots'
 import { Picture, Text } from '@anker-in/headless-ui'
 import { ROUNDED_BRANDS } from '../../../constants'
@@ -55,7 +55,6 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
     }
   }, [props.isOpen, page])
 
-  const [activeTab, setActiveTab] = useState(CreditType.All)
   const tabs = useMemo(() => {
     const tabs = [
       {
@@ -82,7 +81,7 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
 
   const { activities = [], canNext, isLoading } = useActivities(myActivitiesOptions)
 
-  const list = useMemo(() => {
+  const allList = useMemo(() => {
     const taskNameMap = {
       [TaskSubType.Activation]: data.activationTask,
       [TaskSubType.UpdateName]: data.updateNameTask,
@@ -114,7 +113,7 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
       }
     }
 
-    const all = activities.map(item => ({
+    return activities.map(item => ({
       title: getTitle(item),
       date: new Date(item.create_time * 1000),
       value: item.credit,
@@ -123,27 +122,6 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
       credit_type: item.credit_type,
       status: item.status,
     }))
-
-    let filtered = all || []
-    if (activeTab === CreditType.Earned) {
-      filtered = filtered?.filter(item => item.type === 1)
-    } else if (activeTab === CreditType.Deducted) {
-      filtered = filtered?.filter(item => item.type === 2 && item.status !== 3)
-    } else if (activeTab === CreditType.Expired) {
-      filtered = filtered?.filter(item => item.type === 2 && item.status === 3)
-    }
-
-    return filtered.map(item => {
-      let { value, ...otherItem } = item
-      if (item.type === CreditType.Deducted && value > 0) {
-        value = -value
-      }
-
-      return {
-        value,
-        ...otherItem,
-      }
-    })
   }, [
     data.activationTask,
     data.updateNameTask,
@@ -157,10 +135,36 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
     data.uploadReceiptTask,
     data.shoppingTask,
     activities,
-    activeTab,
     taskIdToTypeMapping,
   ])
 
+  const normalizeValue = useCallback((item: (typeof allList)[number]) => {
+    let { value, ...otherItem } = item
+    if (item.type === CreditType.Deducted && value > 0) {
+      value = -value
+    }
+    return { value, ...otherItem }
+  }, [])
+
+  // 按 tab 类型预计算列表，配合 TabsContent 声明式渲染，避免手动 activeTab 数值比较
+  const listByTab = useMemo(() => {
+    const map = new Map<CreditType, ReturnType<typeof normalizeValue>[]>()
+    map.set(CreditType.All, allList.map(normalizeValue))
+    map.set(
+      CreditType.Earned,
+      allList.filter(item => item.type === 1).map(normalizeValue)
+    )
+    map.set(
+      CreditType.Deducted,
+      allList.filter(item => item.type === 2 && item.status !== 3).map(normalizeValue)
+    )
+    map.set(
+      CreditType.Expired,
+      allList.filter(item => item.type === 2 && item.status === 3).map(normalizeValue)
+    )
+    return map
+  }, [allList, normalizeValue])
+
   const handleScrollEnd = useCallback(() => {
     if (!canNext) {
       return
@@ -168,36 +172,8 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
     setPage(page + 1)
   }, [page, canNext])
 
-  return (
-    <CreditsModalContainer
-      title={data.title}
-      className={cn('h-[800px] w-[640px]')}
-      useAnimation
-      animationClassName="md:translate-y-[100vh]"
-      scrollClassName="flex flex-col"
-      {...props}
-      onScrollEnd={handleScrollEnd}
-    >
-      <div className="w-full sticky top-0 bg-white z-10 pb-[24px] overflow-x-auto">
-        <Tabs
-          align="left"
-          shape={rounded ? 'rounded' : 'square'}
-          value={activeTab.toString()}
-          onValueChange={value => {
-            setActiveTab(Number(value))
-          }}
-          className=""
-        >
-          <TabsList>
-            {tabs.map(tab => (
-              <TabsTrigger key={tab.type} value={tab.type.toString()}>
-                {tab.title}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-        </Tabs>
-      </div>
-
+  const renderList = (list: ReturnType<typeof normalizeValue>[]) => (
+    <>
       <div className="flex-1 overflow-auto overscroll-contain">
         <div className="grid gap-[18px] md:gap-[12px]">
           {isLoading && (
@@ -259,6 +235,36 @@ function ActivitiesModal({ data, ...props }: ActivitiesModalProps) {
       </div>
       {/* 积分到账时间提醒 */}
       {list.length > 0 && <div className="mt-[12px] pb-[24px] text-[14px] font-semibold text-[#999]">{data.tips}</div>}
+    </>
+  )
+
+  return (
+    <CreditsModalContainer
+      title={data.title}
+      className={cn('h-[800px] w-[640px]')}
+      useAnimation
+      animationClassName="md:translate-y-[100vh]"
+      scrollClassName="flex flex-col"
+      {...props}
+      onScrollEnd={handleScrollEnd}
+    >
+      <Tabs align="left" shape={rounded ? 'rounded' : 'square'} defaultValue={tabs[0]?.type?.toString()} className="flex-1 flex flex-col">
+        <div className="w-full sticky top-0 bg-white z-10 pb-[24px] overflow-x-auto">
+          <TabsList>
+            {tabs.map(tab => (
+              <TabsTrigger key={tab.type} value={tab.type.toString()}>
+                {tab.title}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </div>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.type} value={tab.type.toString()} className="flex-1 flex flex-col">
+            {renderList(listByTab.get(tab.type) || [])}
+          </TabsContent>
+        ))}
+      </Tabs>
     </CreditsModalContainer>
   )
 }

package/src/components/credits/modal/RewardsModal.tsx

@@ -1,4 +1,4 @@
-import { Tabs, TabsList, TabsTrigger, Picture } from '@anker-in/headless-ui'
+import { Tabs, TabsContent, TabsList, TabsTrigger, Picture } from '@anker-in/headless-ui'
 import classNames from 'classnames'
 import clipboard from 'copy-to-clipboard'
 import dayjs from 'dayjs'
@@ -245,35 +245,10 @@ function RewardsModal({ data, ...props }: RewardsModalProps) {
   }, [])
 
 
-  return (
-    <CreditsModalContainer
-      title={data.title}
-      className={classNames('h-[800px] w-[640px]')}
-      useAnimation
-      animationClassName="md:translate-y-[100vh]"
-      scrollClassName="md:mb-0 flex flex-col"
-        {...props}
-      onScrollEnd={handleScrollEnd}
-    >
-      <div className="shrink-0">
-        <Tabs
-          align="left"
-          shape={rounded ? 'rounded' : 'square'}
-          value={activeTab.toString()}
-          onValueChange={value => {
-            setActiveTab(Number(value))
-          }}
-        >
-          <TabsList>
-            {tabs.map(tab => (
-              <TabsTrigger key={tab.type} value={tab.type.toString()}>
-                {tab.title}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-        </Tabs>
-      </div>
-
+  // 每个 tab 对应一次独立的接口请求（consumeType 不同），当前只有激活 tab 的数据存在于客户端。
+  // TabsContent 只挂载当前激活的一个，各 tab 复用同一份 list/isLoading 状态是安全的。
+  const renderContent = () => (
+    <>
       {isLoading && (
         <div className="flex flex-1 flex-col items-center justify-center">
           <LoadingDots />
@@ -365,6 +340,44 @@ function RewardsModal({ data, ...props }: RewardsModalProps) {
           )}
         </div>
       )}
+    </>
+  )
+
+  return (
+    <CreditsModalContainer
+      title={data.title}
+      className={classNames('h-[800px] w-[640px]')}
+      useAnimation
+      animationClassName="md:translate-y-[100vh]"
+      scrollClassName="md:mb-0 flex flex-col"
+        {...props}
+      onScrollEnd={handleScrollEnd}
+    >
+      <Tabs
+        align="left"
+        shape={rounded ? 'rounded' : 'square'}
+        value={activeTab.toString()}
+        onValueChange={value => {
+          setActiveTab(Number(value))
+        }}
+        className="flex flex-1 flex-col"
+      >
+        <div className="shrink-0">
+          <TabsList>
+            {tabs.map(tab => (
+              <TabsTrigger key={tab.type} value={tab.type.toString()}>
+                {tab.title}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </div>
+
+        {tabs.map(tab => (
+          <TabsContent key={tab.type} value={tab.type.toString()} className="flex flex-1 flex-col">
+            {renderContent()}
+          </TabsContent>
+        ))}
+      </Tabs>
     </CreditsModalContainer>
   )
 }