@windrun-huaiin/third-ui 7.6.0 → 10.0.0

package/src/main/cta.tsx

@@ -2,6 +2,7 @@ import { getTranslations } from 'next-intl/server';
 import { GradientButton } from "@third-ui/fuma/mdx/gradient-button";
 import { cn } from '@windrun-huaiin/lib/utils';
 import { richText } from '@third-ui/main/rich-text-expert';
+import { responsiveSection } from './section-layout';
 
 interface CTAData {
   title: string;
@@ -31,20 +32,21 @@ export async function CTA({
   };
 
   return (
-    <section id="cta" className={cn("px-16 py-20 mx-16 md:mx-32 scroll-mt-20", sectionClassName)}>
+    <section id="cta" className={cn(responsiveSection, sectionClassName)}>
       <div className="
-        bg-gradient-to-r from-[#f7f8fa] via-[#e0c3fc] to-[#b2fefa]
-        dark:bg-gradient-to-r dark:from-[#2d0b4e] dark:via-[#6a3fa0] dark:to-[#3a185a]
-        rounded-2xl p-12 text-center
-        bg-[length:200%_auto] animate-cta-gradient-wave
+        py-3 sm:py-6 md:8
+        bg-linear-to-r from-[#f7f8fa] via-[#e0c3fc] to-[#b2fefa]
+        dark:bg-linear-to-r dark:from-[#2d0b4e] dark:via-[#6a3fa0] dark:to-[#3a185a]
+        rounded-2xl text-center
+        bg-size[200%_auto] animate-cta-gradient-wave
         ">
         <h2 className="text-3xl md:text-4xl font-bold mb-6">
           {data.title} <span className="text-purple-400">{data.eyesOn}</span>?
         </h2>
-        <p className="text-2xl mx-auto mb-8">
+        <p className="text-base sm:text-xl mx-auto mb-8 max-w-3xl">
           {data.description1}
           <br />
-          <span className="text-purple-400">{data.description2}</span>
+          <span className="text-purple-400 text-xl sm:text-2xl">{data.description2}</span>
         </p>
         <GradientButton
           title={data.button}
@@ -55,4 +57,3 @@ export async function CTA({
     </section>
   )
 }
-

package/src/main/faq.tsx

@@ -2,6 +2,7 @@ import { getTranslations } from 'next-intl/server';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { richText } from '@third-ui/main/rich-text-expert';
 import { FAQInteractive } from '@third-ui/main';
+import { responsiveSection } from './section-layout';
 
 interface FAQData {
   title: string;
@@ -39,11 +40,11 @@ export async function FAQ({
   };
 
   return (
-    <section id="faq" className={cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-20", sectionClassName)}>
+    <section id="faq" className={cn(responsiveSection, sectionClassName)}>
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
         {data.title}
       </h2>
-      <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto">
+      <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base sm:text-lg mx-auto max-w-3xl">
         {data.description}
       </p>
       <div className="space-y-6">
@@ -82,4 +83,4 @@ export async function FAQ({
       <FAQInteractive data={data} />
     </section>
   );
-} 
+} 

package/src/main/features.tsx

@@ -3,6 +3,7 @@ import { getGlobalIcon } from '@windrun-huaiin/base-ui/components/server';
 import { globalLucideIcons as icons } from '@windrun-huaiin/base-ui/components/server';
 import { cn } from '@windrun-huaiin/lib/utils';
 import { richText } from '@third-ui/main/rich-text-expert';
+import { responsiveSection } from './section-layout';
 
 interface FeaturesData {
   title: string;
@@ -45,11 +46,11 @@ export async function Features({
   };
 
   return (
-    <section id="features" className={cn("px-16 py-10 mx-16 md:mx-32 scroll-mt-18", sectionClassName)}>
+    <section id="features" className={cn(responsiveSection, sectionClassName)}>
       <h2 className="text-3xl md:text-4xl font-bold text-center mb-4">
         {data.title} <span className="text-purple-500">{data.eyesOn}</span>
       </h2>
-      <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base md:text-lg mx-auto whitespace-nowrap">
+      <p className="text-center text-gray-600 dark:text-gray-400 mb-12 text-base sm:text-lg mx-auto max-w-3xl">
         {data.description}
       </p>
       <div className="grid grid-cols-1 md:grid-cols-3 gap-8 gap-y-12">
@@ -73,4 +74,3 @@ export async function Features({
     </section>
   )
 }
-

package/src/main/footer.tsx

@@ -24,7 +24,7 @@ export async function Footer({ locale }: { locale: string }) {
   };
 
   return (
-    <div className="mb-10 w-full mx-auto border-t-purple-700/80 border-t-1">
+    <div className="mb-10 w-full mx-auto border-t-purple-700/80 border-t">
       <footer>
         <div className="w-full flex flex-col items-center justify-center px-4 py-8 space-y-3">
           <div className="flex items-center justify-center space-x-6 text-xs">

package/src/main/gallery/gallery-desktop-grid.tsx

@@ -0,0 +1,41 @@
+import Image from "next/image";
+import { GalleryItem } from "./gallery-types";
+
+interface Props {
+  items: GalleryItem[];
+}
+
+export function GalleryDesktopGrid({ items }: Props) {
+  return (
+    <div className="hidden sm:grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
+        {items.map((item, index) => (
+          <div 
+            key={item.id} 
+            className="group relative overflow-hidden rounded-xl"
+            data-gallery-item={item.id}
+            data-gallery-index={index}
+          >
+            <Image
+              src={item.url}
+              alt={item.altMsg}
+              width={600}
+              height={600}
+              className="w-full h-80 object-cover transition duration-300 group-hover:scale-105"
+              data-gallery-image={item.id}
+            />
+            <div className="absolute inset-0 flex items-end justify-end p-4 opacity-0 group-hover:opacity-100 transition duration-300">
+              <button
+                className="p-2 rounded-full bg-black/50 hover:bg-black/70 text-white/80 hover:text-white transition-all duration-300"
+                data-gallery-download={item.id}
+                aria-label={`Download ${item.altMsg}`}
+              >
+                <svg className="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        ))}
+      </div>
+  );
+}

package/src/main/gallery/gallery-interactive.tsx

@@ -0,0 +1,153 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import type { GalleryData } from './gallery-types';
+
+export function GalleryInteractive({ data }: { data: GalleryData }) {
+  const [imageErrors, setImageErrors] = useState<Set<string>>(new Set());
+  const [downloadingItems, setDownloadingItems] = useState<Set<string>>(new Set());
+  const cdnProxyUrl = process.env.NEXT_PUBLIC_STYLE_CDN_PROXY_URL;
+
+  useEffect(() => {
+    const downloadListeners = new Map<HTMLButtonElement, () => void>();
+    const imageErrorListeners = new Map<HTMLImageElement, () => void>();
+
+    data.items.forEach((item, index) => {
+      const downloadButtons = Array.from(
+        document.querySelectorAll(`[data-gallery-download="${item.id}"]`)
+      ) as HTMLButtonElement[];
+
+      const imageElements = Array.from(
+        document.querySelectorAll(`[data-gallery-image="${item.id}"]`)
+      ) as HTMLImageElement[];
+
+      const handleDownload = async () => {
+        if (downloadingItems.has(item.id)) {
+          return;
+        }
+
+        setDownloadingItems(prev => new Set(prev).add(item.id));
+
+        try {
+          if (!cdnProxyUrl) {
+            throw new Error('CDN proxy URL not configured');
+          }
+
+          const originalUrl = new URL(item.url);
+          const filename = originalUrl.pathname.substring(1);
+          const proxyUrl = `${cdnProxyUrl}/${encodeURIComponent(filename)}`;
+          const urlExtension = item.url.split('.').pop()?.toLowerCase();
+          let extension = '.webp';
+
+          if (urlExtension && ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg'].includes(urlExtension)) {
+            extension = `.${urlExtension}`;
+          }
+
+          const response = await fetch(proxyUrl);
+
+          if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+          }
+
+          const blob = await response.blob();
+          const blobUrl = URL.createObjectURL(blob);
+
+          const a = document.createElement('a');
+          a.href = blobUrl;
+          a.download = `${data.downloadPrefix}-${index + 1}${extension}`;
+          a.style.display = 'none';
+          document.body.appendChild(a);
+          a.click();
+
+          setTimeout(() => {
+            document.body.removeChild(a);
+            URL.revokeObjectURL(blobUrl);
+          }, 100);
+        } catch (error) {
+          console.error('Download failed:', error);
+        } finally {
+          setDownloadingItems(prev => {
+            const next = new Set(prev);
+            next.delete(item.id);
+            return next;
+          });
+        }
+      };
+
+      downloadButtons.forEach((button) => {
+        button.addEventListener('click', handleDownload);
+        downloadListeners.set(button, handleDownload);
+      });
+
+      const handleImageError = () => {
+        setImageErrors(prev => new Set(prev).add(item.id));
+      };
+
+      imageElements.forEach((imageElement) => {
+        imageElement.addEventListener('error', handleImageError);
+        imageErrorListeners.set(imageElement, handleImageError);
+      });
+    });
+
+    const updateDownloadStates = () => {
+      data.items.forEach((item) => {
+        const downloadButtons = Array.from(
+          document.querySelectorAll(`[data-gallery-download="${item.id}"]`)
+        ) as HTMLButtonElement[];
+
+        downloadButtons.forEach((downloadButton) => {
+          const isDownloading = downloadingItems.has(item.id);
+
+          if (isDownloading) {
+            downloadButton.disabled = true;
+            downloadButton.classList.add('bg-black/30', 'text-white/50');
+            downloadButton.classList.remove('bg-black/50', 'hover:bg-black/70', 'text-white/80', 'hover:text-white');
+            downloadButton.innerHTML = `
+              <svg class="h-5 w-5 text-white animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+            `;
+          } else {
+            downloadButton.disabled = false;
+            downloadButton.classList.remove('bg-black/30', 'text-white/50');
+            downloadButton.classList.add('bg-black/50', 'hover:bg-black/70', 'text-white/80', 'hover:text-white');
+            downloadButton.innerHTML = `
+              <svg class="h-5 w-5 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+              </svg>
+            `;
+          }
+        });
+      });
+    };
+
+    const updateImageErrors = () => {
+      data.items.forEach((item) => {
+        if (imageErrors.has(item.id)) {
+          const imageElements = Array.from(
+            document.querySelectorAll(`[data-gallery-image="${item.id}"]`)
+          ) as HTMLImageElement[];
+
+          imageElements.forEach((imageElement) => {
+            imageElement.src = data.defaultImgUrl;
+          });
+        }
+      });
+    };
+
+    updateDownloadStates();
+    updateImageErrors();
+
+    return () => {
+      downloadListeners.forEach((handler, downloadButton) => {
+        downloadButton.removeEventListener('click', handler);
+      });
+      imageErrorListeners.forEach((handler, imageElement) => {
+        imageElement.removeEventListener('error', handler);
+      });
+    };
+  }, [data, downloadingItems, imageErrors, cdnProxyUrl]);
+
+  return null;
+}

package/src/main/gallery/gallery-mobile-swiper.tsx

@@ -0,0 +1,65 @@
+"use client";
+
+import { Swiper, SwiperSlide } from "swiper/react";
+import { Pagination } from "swiper/modules";
+import Image from "next/image";
+import { GalleryItem } from "./gallery-types";
+
+interface Props {
+  items: GalleryItem[];
+}
+
+export function GalleryMobileSwiper({ items }: Props) {
+  return (
+    <div className="block sm:hidden px-4">
+      {/* 外层容器：强制 maxWidth，防止任何溢出 */}
+      <div className="w-full overflow-hidden" 
+        style={{ maxWidth: "min(calc(100vw - 48px), 350px)", margin: "0 auto" }}
+      >
+        <Swiper
+          modules={[Pagination]}
+          pagination={{ clickable: true }}
+          spaceBetween={12}
+          slidesPerView={1}
+          loop={true}
+          grabCursor={true}
+          className="gallery-mobile-swiper rounded-2xl"
+        >
+          {items.map((item) => (
+            <SwiperSlide key={item.id}>
+              <div className="relative w-full pb-[100%] bg-gray-100">
+                <Image
+                  src={item.url}
+                  alt={item.altMsg}
+                  fill
+                  sizes="(max-width: 600px) min(100vw-48px, 350px)"
+                  className="object-cover"
+                  data-gallery-image={item.id}
+                />
+                <button
+                  className="absolute bottom-4 right-4 p-3 rounded-full bg-black/60 hover:bg-black/80 text-white transition-all z-10"
+                  data-gallery-download={item.id}
+                  aria-label={`Download ${item.altMsg}`}
+                >
+                  <svg
+                    className="h-5 w-5 text-white"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+                    />
+                  </svg>
+                </button>
+              </div>
+            </SwiperSlide>
+          ))}
+        </Swiper>
+      </div>
+    </div>
+  );
+}

package/src/main/gallery/gallery-server.tsx

@@ -0,0 +1,46 @@
+import { getTranslations } from 'next-intl/server';
+import { cn } from '@windrun-huaiin/lib/utils';
+import { responsiveSection } from '../section-layout';
+import { GalleryInteractive } from '@third-ui/main';
+import { GalleryDesktopGrid } from './gallery-desktop-grid';
+import { GalleryMobileSwiper } from './gallery-mobile-swiper';
+import type { GalleryProps, GalleryData } from './gallery-types';
+
+export async function Gallery({ locale, sectionClassName, button }: GalleryProps) {
+  const t = await getTranslations({ locale, namespace: 'gallery' });
+
+  const galleryItems = t.raw('prompts') as Array<{ url: string; altMsg: string }>;
+
+  const data: GalleryData = {
+    titleL: t('titleL'),
+    eyesOn: t('eyesOn'),
+    titleR: t('titleR'),
+    description: t('description'),
+    items: galleryItems.map((item, index) => ({
+      id: `gallery-item-${index}`,
+      url: item.url,
+      altMsg: item.altMsg,
+    })),
+    defaultImgUrl: t.raw('defaultImgUrl') as string,
+    downloadPrefix: t('downloadPrefix'),
+  };
+
+  return (
+    <section id="gallery" className={cn(responsiveSection, sectionClassName)}>
+      <h2 className="text-3xl md:text-4xl font-bold text-center mb-6">
+        {data.titleL} <span className="text-purple-500">{data.eyesOn}</span> {data.titleR}
+      </h2>
+      <p className="text-center max-w-2xl mx-auto mb-16">{data.description}</p>
+
+      {/* 移动端轮播 */}
+      <GalleryMobileSwiper items={data.items} />
+
+      {/* 桌面端网格 */}
+      <GalleryDesktopGrid items={data.items} />
+
+      {button && <div className="text-center mx-auto mt-12 max-w-[85vw]">{button}</div>}
+
+      <GalleryInteractive data={data} />
+    </section>
+  );
+}

package/src/main/gallery/gallery-types.ts

@@ -0,0 +1,22 @@
+
+export interface GalleryProps {
+  locale: string;
+  sectionClassName?: string;
+  button?: React.ReactNode;
+}
+
+export interface GalleryItem {
+  id: string;
+  url: string;
+  altMsg: string;
+}
+
+export interface GalleryData {
+  titleL: string;
+  eyesOn: string;
+  titleR: string;
+  description: string;
+  items: GalleryItem[];
+  defaultImgUrl: string;
+  downloadPrefix: string;
+}

package/src/main/go-to-top.tsx

@@ -33,7 +33,7 @@ export function GoToTop() {
       {isVisible && (
         <button
           onClick={scrollToTop}
-          className="fixed bottom-6 right-6 p-3 bg-gradient-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 z-50"
+          className="fixed bottom-6 right-6 p-3 bg-linear-to-r from-purple-400 to-pink-500 hover:from-purple-500 hover:to-pink-600 dark:from-purple-500 dark:to-pink-600 dark:hover:from-purple-600 dark:hover:to-pink-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all duration-300 z-50"
           aria-label="Go to top"
         >
           <icons.ArrowUp size={20} className="text-white" />

package/src/main/index.ts

@@ -10,8 +10,10 @@ export * from './ai-prompt-textarea'
 export * from './rich-text-expert'
 export * from './faq-interactive'
 export * from './price-plan-interactive'
-export * from './gallery-interactive'
-
+export * from './gallery/gallery-interactive'
 // Money Price Client Components
 export { MoneyPriceInteractive } from './money-price/money-price-interactive';
-export { MoneyPriceButton } from './money-price/money-price-button';
+export { MoneyPriceButton } from './money-price/money-price-button';
+
+export { CreditOverviewClient } from './credit/credit-overview-client';
+export { CreditNavButton } from './credit/credit-nav-button';

package/src/main/money-price/customer-portal.ts

@@ -0,0 +1,63 @@
+'use client';
+
+interface RedirectToCustomerPortalOptions {
+  customerPortalApiEndpoint?: string;
+  redirectToSignIn: () => void;
+  returnUrl?: string;
+}
+
+export async function redirectToCustomerPortal({
+  customerPortalApiEndpoint,
+  redirectToSignIn,
+  returnUrl = window.location.href,
+}: RedirectToCustomerPortalOptions): Promise<boolean> {
+  if (!customerPortalApiEndpoint) {
+    console.error('Customer portal endpoint is not configured.');
+    alert('Customer portal is temporarily unavailable.');
+    return false;
+  }
+
+  try {
+    const response = await fetch(customerPortalApiEndpoint, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        returnUrl,
+      }),
+    });
+
+    const contentType = response.headers.get('content-type');
+    if (!contentType || !contentType.includes('application/json')) {
+      console.error('Received non-JSON response from customer portal API');
+      return false;
+    }
+
+    const result = await response.json();
+
+    if (!response.ok) {
+      const errorMessage = result.error || `Request failed with status ${response.status}`;
+      console.error('Customer portal request failed:', errorMessage);
+
+      if (response.status === 401 || response.status === 403) {
+        redirectToSignIn();
+        return true;
+      }
+
+      alert(`Operation failed: ${errorMessage}`);
+      return false;
+    }
+
+    if (result.success && result.data?.sessionUrl) {
+      window.location.href = result.data.sessionUrl;
+      return true;
+    }
+
+    console.error('Customer portal session response invalid', result);
+    return false;
+  } catch (error) {
+    console.error('Error creating customer portal session:', error);
+    return false;
+  }
+}