@anker-in/campaign-ui 0.2.11-beta.2 → 0.2.11-beta.3

package/dist/esm/helpers/utils.js

@@ -0,0 +1,2 @@
+import{clsx as r}from"clsx";import{twMerge as t}from"tailwind-merge";function p(...o){return t(r(o))}function a(){}export{p as cn,a as noop};
+//# sourceMappingURL=utils.js.map

package/dist/esm/helpers/utils.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/helpers/utils.ts"],
+  "sourcesContent": ["import { clsx, type ClassValue } from 'clsx'\nimport { twMerge } from 'tailwind-merge'\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs))\n}\n\nexport function noop(): any {}\n"],
+  "mappings": "AAAA,OAAS,QAAAA,MAA6B,OACtC,OAAS,WAAAC,MAAe,iBAEjB,SAASC,KAAMC,EAAsB,CAC1C,OAAOF,EAAQD,EAAKG,CAAM,CAAC,CAC7B,CAEO,SAASC,GAAY,CAAC",
+  "names": ["clsx", "twMerge", "cn", "inputs", "noop"]
+}

package/dist/esm/index.d.ts

@@ -1,2 +1,3 @@
-export * from './components';
-export * from './templates';
+export * from './components/index.js';
+export * from './templates/index.js';
+export * from './constants.js';

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export*from"./components";export*from"./templates";
+export*from"./components/index.js";export*from"./templates/index.js";export*from"./constants.js";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/index.ts"],
-  "sourcesContent": ["export * from './components'\nexport * from './templates'\n"],
-  "mappings": "AAAA,WAAc,eACd,WAAc",
+  "sourcesContent": ["export * from './components/index.js'\nexport * from './templates/index.js'\nexport * from './constants.js'\n"],
+  "mappings": "AAAA,WAAc,wBACd,WAAc,uBACd,WAAc",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@anker-in/campaign-ui",
-  "version": "0.2.11-beta.2",
+  "version": "0.2.11-beta.3",
   "description": "Campaign UI components and utilities for Anker projects",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
@@ -88,8 +88,8 @@
     "swiper": "^11.1.3",
     "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
-    "@anker-in/headless-ui": "1.1.25-alpha.1767516866003",
-    "@anker-in/lib": "1.1.2-beta.1"
+    "@anker-in/lib": "1.1.2-beta.2",
+    "@anker-in/headless-ui": "1.1.25-alpha.1767516866003"
   },
   "publishConfig": {
     "access": "public",

package/src/components/credits/context/utils.ts

@@ -147,3 +147,12 @@ export function formatVariantPrice({
 
   return { price, basePrice, discount }
 }
+
+/**
+ * 提取 variant id，去掉 gid://shopify/ProductVariant/ 前缀
+ */
+export function extractVariantId(id: string | number | undefined): string | null {
+  if (!id) return null
+  const idStr = typeof id === 'number' ? id.toString() : id
+  return idStr.replace('gid://shopify/ProductVariant/', '')
+}

package/src/components/credits/creditsAnkersolixTask/CreditsAnkersolixTask.tsx

@@ -6,10 +6,11 @@ import { useMemo, useState } from 'react'
 import { TaskType, type CreditsAnkersolixTaskProps } from './type'
 import { useActions } from '../creditsWaysToGetCredits/useActions'
 import { useCreditsContext } from '../context/provider'
-import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useRegistration } from '../../registration'
 import { CreditsUploadReceiptModal } from '../modal/creditsUploadReceiptModal'
 import { CreditsSubscribeModal } from '../modal/subscribeModal'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersolixTaskProps & { id?: string }) => {
   const [showMore, setShowMore] = useState(false)
@@ -94,8 +95,8 @@ export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersoli
   const shouldShowMask = list.length > 3
 
   return (
-    <Container id={id} className="[&>div]:l:!px-0 bg-[#F5F5F7]">
-      <Heading as="h2" size="4" html={copy.title} className='md:px-[16px]'/>
+    <Container id={id} className="bg-[#F5F5F7]">
+      <Heading as="h2" size="4" html={copy.title} />
       <div
         className={cn(
           'mt-[24px] p-[32px] md-l:p-[32px] md:p-[16px] relative overflow-hidden',
@@ -114,8 +115,8 @@ export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersoli
           }}
         />
         {/* 副标题和装饰图部分 */}
-        <div className="flex items-center justify-between h-[560px] md:h-auto md:flex-col md:items-start l:h-auto l:mb-[16px] l:flex-col-reverse l:items-start">
-          <div className="flex flex-col gap-[8px]">
+        <div className="flex items-center justify-between xl-xxl:h-[448px] l-xl:h-[336px] h-[560px] l:h-auto md:flex-col md:items-start l:h-auto l:mb-[16px] l:flex-col-reverse l:items-start">
+          <div className="flex flex-col gap-[8px] l:mt-[8px]">
             <Heading
               as="h3"
               size={4}
@@ -130,16 +131,18 @@ export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersoli
             </div>
           </div>
           {copy.mainImage?.url && (
-            <Picture className="w-full max-w-[50%] md:max-w-full md:mt-[24px] l:max-w-full l:mt-[24px]" source={copy.mainImage.url} />
+            <Picture
+              className="h-full object-contain l:mx-auto md:h-auto md:w-full md-l:h-[302px]"
+              imgClassName="!h-full !object-contain"
+              source={copy.mainImage.url}
+            />
           )}
         </div>
 
         {/* 卡片列表 */}
-        <div className="relative">
+        <div className="relative mt-[24px]">
           <motion.div
-            className={cn(
-              'grid grid-cols-3 gap-[16px] overflow-hidden md:grid-cols-1 md-l:grid-cols-2 min-md:!h-auto'
-            )}
+            className={cn('grid grid-cols-3 gap-[16px] overflow-hidden md:grid-cols-1 md-l:grid-cols-2 min-md:!h-auto')}
             initial={{ height: shouldShowMask ? 512 : 'auto' }}
             animate={{ height: showMore || !shouldShowMask ? 'auto' : 512 }}
             transition={{ duration: 0.3 }}
@@ -156,27 +159,27 @@ export const CreditsAnkersolixTask = ({ copy, classNames, id }: CreditsAnkersoli
               <div
                 key={item.id}
                 className={cn(
-                  'flex min-h-[241px] xl-xxl:min-h-[192px] l:min-h-[160px] l-xl:min-h-[170px] flex-col justify-between bg-white p-[32px] md:p-[16px] l:p-[24px]',
-                  rounded ? '' : ''
+                  'flex min-h-[241px] xl-xxl:min-h-[192px] l:min-h-[160px] l-xl:min-h-[170px] flex-col justify-between bg-white p-[32px] xl:p-[16px]',
+                  rounded ? 'rounded-[16px]' : ''
                 )}
               >
                 <div>
-                  <Heading
-                    as="h4"
+                  <Text
+                    as="p"
                     html={item.title}
                     size={2}
-                    className="text-[24px] font-bold text-[#080a0f] tracking-[-0.96px] leading-[1.2] text-pretty md:text-[18px] l:text-[20px]"
+                    className="text-pretty text-[24px] font-bold xxl:text-[20px]"
                   />
-                  <div className="mt-[8px] flex items-center gap-[4px]">
+                  <div className="mt-[8px] l:mt-[4px] flex items-center">
                     <Picture
-                      className="size-[24px] [&_path]:size-full"
+                      className="size-[24px] xxl:size-[18px] [&_path]:size-full"
                       source="https://cdn.shopify.com/s/files/1/0511/6346/3874/files/20250902-153351.png?v=1756798450"
                     />
                     <Text
                       as="p"
                       html={item.credits}
                       size={2}
-                      className="text-[18px] font-bold text-[#080a0f] tracking-[-0.36px] leading-[1.4] md:text-[16px]"
+                      className="ml-[4px] mt-[6px] text-[18px] xxl:text-[14px]"
                     />
                   </div>
                 </div>

package/src/components/credits/creditsBenefits/BenefitItem.tsx

@@ -1,6 +1,7 @@
 import { Heading, Picture, Text } from '@anker-in/headless-ui'
-import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import IconInfo from './IconInfo'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export interface BenefitItemCopy {
   icon: {
@@ -60,7 +61,7 @@ const BenefitItem = ({
       <div className="flex flex-col">
         <Picture className={iconSizeClass} alt={item.icon?.alt} source={item.icon?.url} />
         <div className="flex items-center">
-          <Heading html={item.text} size="2" className="break-all" />
+          <Heading html={item.text} size="2" className="break-all md-l:line-clamp-3" />
           {item.note && (
             <div
               role="button"

package/src/components/credits/creditsBenefits/index.tsx

@@ -47,7 +47,7 @@ export const CreditsBenefits = ({ copy, id }: { copy: CreditsBenefitsCopy; id?:
   return (
     <Container id={id} className="!z-[30] bg-[#F5F5F7]">
       <Heading as="h2" size="4" html={copy?.title} />
-      <div className="mt-[24px] grid grid-cols-4 xl:grid-cols-3 gap-[16px] l:hidden items-stretch">
+      <div className="mt-[24px] grid grid-cols-4 gap-[16px] l:hidden items-stretch">
         {copy.benefits.map((item, index) => (
           <BenefitItem
             key={index}

package/src/components/credits/creditsCash/RedeemableItem.tsx

@@ -4,9 +4,10 @@ import { useMemo, useState } from 'react'
 import { CreditsCashCopy, RedeemItem } from './type'
 import { useCreditsContext } from '../context/provider'
 import { useRedeemAndBuy } from '../context/hooks/useRedeemAndBuy'
-import { formatPrice, numberFormat } from '../context/utils'
-import { gaTrack, classNames as cn, ROUNDED_BRANDS, useHeadlessContext } from '@anker-in/lib'
+import { formatPrice, numberFormat, extractVariantId } from '../context/utils'
+import { gaTrack, classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useRegistration } from '../../../components/registration'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 function RedeemableItem({
   copy,
@@ -112,13 +113,17 @@ function RedeemableItem({
   return (
     <div
       className={cn(
-        'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] p-[24px] md:rounded-[12px] md:px-[8px] xl:py-[16px] md-xl:px-[16px]',
+        'flex flex-col items-center rounded-[16px] bg-[#EAEAEC] md:rounded-[12px] p-[24px] l:p-[8px] md-xl:p-[16px]',
         !rounded && 'rounded-none md:rounded-none',
         className
       )}
     >
       <a
-        href={`/products/${itemData.product.handle}`}
+        href={
+          extractVariantId(itemData.productVariant?.id)
+            ? `/products/${itemData.product.handle}?variant=${extractVariantId(itemData.productVariant?.id)}`
+            : `/products/${itemData.product.handle}`
+        }
         className={cn('relative mx-auto h-[224px] w-fit l:h-[120px] l-xxl:h-[138px]')}
       >
         <Picture

package/src/components/credits/creditsFaq/index.tsx

@@ -1,8 +1,9 @@
 import { Container, Heading, Tabs, TabsList, TabsTrigger, Text } from '@anker-in/headless-ui'
-import { classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { classNames as cn, useHeadlessContext } from '@anker-in/lib'
 import { useMemo, useState } from 'react'
 
 import { FaqItem } from './faqItem/FaqItem'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 export type CreditsFaqCopy = {
   title: string

package/src/components/credits/creditsInfoCard/index.tsx

@@ -5,7 +5,8 @@ import { useCreditsContext } from '../context/provider'
 import { numberFormat } from '../context/utils'
 import ActivitiesModal from '../modal/activitiesModal'
 import MyRewardsModal from '../modal/MyRewardsModal'
-import { gaNormalClick, classNames as cn, useHeadlessContext, ROUNDED_BRANDS } from '@anker-in/lib'
+import { gaNormalClick, classNames as cn, useHeadlessContext } from '@anker-in/lib'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 type ButtonConfig = {
   text: string

package/src/components/credits/creditsMemberPrice/CreditsMemberPrice.tsx

@@ -1,11 +1,12 @@
 import { Container, Heading, Tabs, TabsList, TabsTrigger } from '@anker-in/headless-ui'
-import { useMemo, useState, useEffect, useCallback } from 'react'
+import { useMemo, useState, useEffect, useCallback, useRef } from 'react'
 import Decimal from 'decimal.js'
 
 import MemberPriceItem from './MemberPriceItem'
 import RedeemableItem from '../creditsCash/RedeemableItem'
 import useRedeemableList from '../context/hooks/useRedeemableList'
 import RulesModal from '../modal/rulesModal'
+import { Pagination } from './Pagination'
 import { useProductsByHandles } from '@anker-in/lib'
 import { CreditsMemberPriceCopy, MemberPriceProduct } from './type'
 import { Product, classNames as cn } from '@anker-in/lib'
@@ -20,6 +21,7 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
   const [itemsPerPage, setItemsPerPage] = useState(9) // 默认 1024px 以上：3列 × 3行 = 9
   const { redeemableList } = useRedeemableList()
   const { pageCommon, memberPriceDiscount } = useCreditsContext()
+  const containerRef = useRef<HTMLDivElement>(null)
 
   console.log('copy in CreditsMemberPrice', copy)
 
@@ -35,11 +37,17 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
   useEffect(() => {
     const updateItemsPerPage = () => {
       const width = window.innerWidth
-      if (width >= 1024) {
-        // 1024px 以上：3列 × 3行 = 9个
+      if (width >= 1440) {
+        // 1920px 以上：4列 × 3行 = 12个
+        setItemsPerPage(12)
+      } else if (width >= 1024) {
+        // 1024px - 1919px：3列 × 3行 = 9个
         setItemsPerPage(9)
+      } else if (width >= 768) {
+        // 1024px 以下：3列 × 4行 = 12个
+        setItemsPerPage(12)
       } else {
-        // 1024px 以下：2列 × 4行 = 8个
+        // 768px 以下：2列 × 4行 = 8个
         setItemsPerPage(8)
       }
     }
@@ -208,115 +216,24 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
     }
   }, [redeemList, currentPage, itemsPerPage])
 
-  // 分页导航组件 - 按照 Figma 设计
-  const renderPagination = (totalPages: number) => {
-    if (totalPages <= 1) return null
-
-    // 计算要显示的页码
-    const getPageNumbers = () => {
-      const delta = 2 // 当前页前后显示的页码数量
-      const range = []
-      const rangeWithDots = []
-
-      for (let i = 1; i <= totalPages; i++) {
-        if (i === 1 || i === totalPages || (i >= currentPage - delta && i <= currentPage + delta)) {
-          range.push(i)
-        }
-      }
-
-      let prev = 0
-      for (const i of range) {
-        if (prev && i - prev > 1) {
-          rangeWithDots.push('...')
-        }
-        rangeWithDots.push(i)
-        prev = i
+  // 处理页面切换，滚动到模块顶部
+  const handlePageChange = useCallback(
+    (page: number) => {
+      setCurrentPage(page)
+      // 滚动到模块顶部
+      if (containerRef.current) {
+        const top = containerRef.current.offsetTop
+        window.scrollTo({
+          top: top - 80, // 减去 80px 的偏移量，避免被固定头部遮挡
+          behavior: 'smooth',
+        })
       }
-
-      return rangeWithDots
-    }
-
-    const pages = getPageNumbers()
-
-    return (
-      <div className="mt-[32px] flex items-center justify-center gap-[8px]">
-        {/* 上一页按钮 */}
-        <button
-          onClick={() => setCurrentPage(prev => Math.max(1, prev - 1))}
-          disabled={currentPage === 1}
-          className={cn(
-            'flex size-[32px] xl:size-[24px] items-center justify-center overflow-hidden bg-white',
-            currentPage === 1 && 'cursor-not-allowed opacity-50'
-          )}
-        >
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <path
-              d="M10 12L6 8L10 4"
-              stroke={currentPage === 1 ? '#767880' : '#080A0F'}
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </button>
-
-        {/* 页码按钮 */}
-        {pages.map((page, index) => {
-          if (page === '...') {
-            return (
-              <div
-                key={`ellipsis-${index}`}
-                className="flex size-[32px] xl:size-[24px] items-center justify-center overflow-hidden bg-white"
-              >
-                <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
-                  <circle cx="4.5" cy="10" r="1.25" fill="#2A2C32" />
-                  <circle cx="10" cy="10" r="1.25" fill="#2A2C32" />
-                  <circle cx="15.5" cy="10" r="1.25" fill="#2A2C32" />
-                </svg>
-              </div>
-            )
-          }
-
-          const isActive = currentPage === page
-          return (
-            <button
-              key={page}
-              onClick={() => setCurrentPage(page as number)}
-              className={cn(
-                'flex size-[32px] xl:size-[24px] pt-[4px] items-center justify-center overflow-hidden text-[16px] xl:text-[14px] font-bold leading-[1.4] tracking-[-0.28px]',
-                isActive ? 'bg-[#080a0f] text-white' : 'bg-white text-[#080a0f]'
-              )}
-            >
-              {page}
-            </button>
-          )
-        })}
-
-        {/* 下一页按钮 */}
-        <button
-          onClick={() => setCurrentPage(prev => Math.min(totalPages, prev + 1))}
-          disabled={currentPage === totalPages}
-          className={cn(
-            'flex size-[32px] xl:size-[24px] items-center justify-center overflow-hidden bg-white',
-            currentPage === totalPages && 'cursor-not-allowed opacity-50'
-          )}
-        >
-          <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
-            <path
-              d="M6 4L10 8L6 12"
-              stroke={currentPage === totalPages ? '#767880' : '#080A0F'}
-              strokeWidth="1.5"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </button>
-      </div>
-    )
-  }
+    },
+    [setCurrentPage]
+  )
 
   return (
-    <Container id={id} className={cn('bg-[#F5F5F5]')}>
+    <Container id={id} className={cn('bg-[#F5F5F5]')} ref={containerRef}>
       <Heading as="h2" size="4" html={copy.title} className="mx:px-[16px]" />
 
       <Tabs
@@ -344,7 +261,11 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
                 <MemberPriceItem key={index} itemData={item} copy={copy.memberPriceTab} />
               ))}
             </div>
-            {renderPagination(memberPricePagination.totalPages)}
+            <Pagination
+              currentPage={currentPage}
+              totalPages={memberPricePagination.totalPages}
+              onPageChange={handlePageChange}
+            />
           </>
         )}
 
@@ -365,7 +286,11 @@ export const CreditsMemberPrice = ({ copy, id }: { copy: CreditsMemberPriceCopy;
                 />
               ))}
             </div>
-            {renderPagination(redeemPagination.totalPages)}
+            <Pagination
+              currentPage={currentPage}
+              totalPages={redeemPagination.totalPages}
+              onPageChange={handlePageChange}
+            />
           </>
         )}
       </div>

package/src/components/credits/creditsMemberPrice/MemberPriceItem.tsx

@@ -2,9 +2,10 @@ import { Button, Text, Picture } from '@anker-in/headless-ui'
 import { useMemo } from 'react'
 
 import { CreditsMemberPriceCopy, MemberPriceProduct } from './type'
-import { formatPrice } from '../context/utils'
-import { classNames as cn, ROUNDED_BRANDS, useHeadlessContext, useBuyNow } from '@anker-in/lib'
+import { formatPrice, extractVariantId } from '../context/utils'
+import { classNames as cn, useHeadlessContext, useBuyNow } from '@anker-in/lib'
 import { useCreditsContext } from '../context/provider'
+import { ROUNDED_BRANDS } from '../../../constants'
 
 function MemberPriceItem({
   itemData,
@@ -16,7 +17,7 @@ function MemberPriceItem({
   className?: string
 }) {
   const { brand, locale } = useHeadlessContext()
-  const { profile } = useCreditsContext()
+  const { profile, openSignUpPopup } = useCreditsContext()
   const rounded = ROUNDED_BRANDS.includes(brand)
 
   // 使用 buyNow hook 来处理结算
@@ -26,13 +27,28 @@ function MemberPriceItem({
     return itemData.productVariant?.availableForSale
   }, [itemData.productVariant?.availableForSale])
 
+  const isLogin = useMemo(() => {
+    return !!profile
+  }, [profile])
+
   // Learn More 按钮点击 - 跳转到产品详情页
   const handleLearnMore = () => {
-    window.location.href = `/products/${itemData.product.handle}`
+    const variantId = extractVariantId(itemData.productVariant?.id)
+    const url = variantId
+      ? `/products/${itemData.product.handle}?variant=${variantId}`
+      : `/products/${itemData.product.handle}`
+    window.location.href = url
   }
 
-  // Shop Now 按钮点击 - 使用 buyNow 进行结算
+  // Shop Now 按钮点击 - 检查登录状态后使用 buyNow 进行结算
   const handleShopNow = () => {
+    // 如果未登录，弹出登录弹窗
+    if (!isLogin) {
+      openSignUpPopup()
+      return
+    }
+
+    // 已登录，执行购买
     buyNow({
       customAttributes: [
         {
@@ -52,7 +68,7 @@ function MemberPriceItem({
   return (
     <div
       className={cn(
-        'relative flex flex-col items-center bg-[#EAEAEC] p-[16px] md:rounded-[12px]',
+        'relative flex flex-col items-center bg-[#EAEAEC] p-[24px] l:p-[8px] rounded-[16px] md-xl:p-[16px] md:rounded-[12px]',
         !rounded && 'rounded-none md:rounded-none',
         className
       )}
@@ -68,7 +84,14 @@ function MemberPriceItem({
       )}
 
       {/* 产品图片 - 优先使用产品的 metafields 透明图 */}
-      <a href={`/products/${itemData.product.handle}`} className={cn('relative mx-auto size-[138px]')}>
+      <a
+        href={
+          extractVariantId(itemData.productVariant?.id)
+            ? `/products/${itemData.product.handle}?variant=${extractVariantId(itemData.productVariant?.id)}`
+            : `/products/${itemData.product.handle}`
+        }
+        className={cn('relative mx-auto size-[138px]')}
+      >
         <Picture
           className="mx-auto size-full"
           imgClassName="object-contain"
@@ -81,7 +104,7 @@ function MemberPriceItem({
       </a>
 
       {/* 产品信息 */}
-      <div className={cn('mt-[4px] w-full')}>
+      <div className={cn('mt-[10px] xl:mt-[8px] w-full')}>
         {/* 产品标题 - 使用产品的真实标题 */}
         <Text
           html={itemData?.product?.title}
@@ -125,7 +148,7 @@ function MemberPriceItem({
           </div>
 
           {/* 按钮组 */}
-          <div className="flex w-full gap-[8px] md:flex-col">
+          <div className="flex w-full gap-[8px] l:flex-col">
             {/* Learn More 按钮 */}
             <Button
               variant="secondary"

package/src/components/credits/creditsMemberPrice/Pagination.tsx

@@ -0,0 +1,113 @@
+import { classNames as cn } from '@anker-in/lib'
+
+interface PaginationProps {
+  currentPage: number
+  totalPages: number
+  onPageChange: (page: number) => void
+}
+
+export function Pagination({ currentPage, totalPages, onPageChange }: PaginationProps) {
+  if (totalPages <= 1) return null
+
+  // 计算要显示的页码
+  const getPageNumbers = () => {
+    const delta = 2 // 当前页前后显示的页码数量
+    const range = []
+    const rangeWithDots = []
+
+    for (let i = 1; i <= totalPages; i++) {
+      if (i === 1 || i === totalPages || (i >= currentPage - delta && i <= currentPage + delta)) {
+        range.push(i)
+      }
+    }
+
+    let prev = 0
+    for (const i of range) {
+      if (prev && i - prev > 1) {
+        rangeWithDots.push('...')
+      }
+      rangeWithDots.push(i)
+      prev = i
+    }
+
+    return rangeWithDots
+  }
+
+  const pages = getPageNumbers()
+
+  return (
+    <div className="mt-[32px] flex items-center justify-center gap-[8px]">
+      {/* 上一页按钮 */}
+      <button
+        onClick={() => onPageChange(Math.max(1, currentPage - 1))}
+        disabled={currentPage === 1}
+        className={cn(
+          'flex size-[32px] xl:size-[24px] items-center justify-center overflow-hidden bg-white',
+          currentPage === 1 && 'cursor-not-allowed opacity-50'
+        )}
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path
+            d="M10 12L6 8L10 4"
+            stroke={currentPage === 1 ? '#767880' : '#080A0F'}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+
+      {/* 页码按钮 */}
+      {pages.map((page, index) => {
+        if (page === '...') {
+          return (
+            <div
+              key={`ellipsis-${index}`}
+              className="flex size-[32px] xl:size-[24px] items-center justify-center overflow-hidden bg-white"
+            >
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <circle cx="4.5" cy="10" r="1.25" fill="#2A2C32" />
+                <circle cx="10" cy="10" r="1.25" fill="#2A2C32" />
+                <circle cx="15.5" cy="10" r="1.25" fill="#2A2C32" />
+              </svg>
+            </div>
+          )
+        }
+
+        const isActive = currentPage === page
+        return (
+          <button
+            key={page}
+            onClick={() => onPageChange(page as number)}
+            className={cn(
+              'flex size-[32px] xl:size-[24px] pt-[4px] items-center justify-center overflow-hidden text-[16px] xl:text-[14px] font-bold leading-[1.4] tracking-[-0.28px]',
+              isActive ? 'bg-[#080a0f] text-white' : 'bg-white text-[#080a0f]'
+            )}
+          >
+            {page}
+          </button>
+        )
+      })}
+
+      {/* 下一页按钮 */}
+      <button
+        onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
+        disabled={currentPage === totalPages}
+        className={cn(
+          'flex size-[32px] xl:size-[24px] items-center justify-center overflow-hidden bg-white',
+          currentPage === totalPages && 'cursor-not-allowed opacity-50'
+        )}
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
+          <path
+            d="M6 4L10 8L6 12"
+            stroke={currentPage === totalPages ? '#767880' : '#080A0F'}
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </button>
+    </div>
+  )
+}