@rxdrag/website-lib-core 0.0.12 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rxdrag/website-lib-core",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "type": "module",
   "exports": {
     ".": "./index.ts"
@@ -24,10 +24,10 @@
     "@types/react-dom": "^18.2.7",
     "eslint": "^7.32.0",
     "typescript": "^5",
-    "@rxdrag/entify-hooks": "0.2.42",
+    "@rxdrag/entify-hooks": "0.2.43",
+    "@rxdrag/slate-preview": "1.2.56",
     "@rxdrag/eslint-config-custom": "0.2.12",
-    "@rxdrag/tsconfig": "0.2.0",
-    "@rxdrag/slate-preview": "1.2.55"
+    "@rxdrag/tsconfig": "0.2.0"
   },
   "dependencies": {
     "clsx": "^2.1.0",
@@ -35,7 +35,7 @@
     "lodash-es": "^4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "@rxdrag/rxcms-models": "0.3.48"
+    "@rxdrag/rxcms-models": "0.3.49"
   },
   "peerDependencies": {
     "astro": "^4.0.0 || ^5.0.0"

package/src/component-logic/modal.ts

@@ -1,4 +1,9 @@
-import { DATA_OPENABLE, DATA_OPENABLE_ROLE, OpenAble } from "../controller";
+import {
+  DATA_OPENABLE,
+  DATA_OPENABLE_ROLE,
+  DATA_POPUP_CTA,
+  OpenAble,
+} from "../controller";
 import { HTMLElementsWithChildren, IMotionProps } from "./motion";
 
 export type ModalTriggerProps = IMotionProps & {
@@ -28,9 +33,13 @@ export function getModalPanelDataAttrs(openableKey?: string) {
   };
 }
 
-export function getModalTriggerDataAttrs(openableKey?: string) {
+export function getModalTriggerDataAttrs(
+  openableKey: string | undefined,
+  callToAction?: string
+) {
   return {
     [DATA_OPENABLE]: openableKey,
     [DATA_OPENABLE_ROLE]: OpenAble.ModalTrigger,
+    [DATA_POPUP_CTA]: callToAction,
   };
 }

package/src/controller/OpenableController.ts

@@ -9,6 +9,7 @@ import {
   OpenAble,
   EVENT_SELECT,
   EVENT_UNSELECT,
+  DATA_POPUP_CTA,
 } from "./consts";
 import { applyInitialState } from "./applyInitialState";
 
@@ -130,6 +131,7 @@ export class OpenableController {
   constructor(protected doc: Document | undefined) {}
   protected unmountHandlers: (() => void)[] = [];
   protected eventBus = new EventBus();
+  public lastCta?: string | null;
 
   mount() {
     this.unmount();
@@ -152,6 +154,9 @@ export class OpenableController {
       // 查找 Modal 容器
       const modalContainer = this.getOpenableContainer(openableKey);
       if (modalContainer) {
+        if (target.getAttribute(DATA_POPUP_CTA)) {
+          this.lastCta = target.getAttribute(DATA_POPUP_CTA);
+        }
         modalContainer.classList.add("open");
         this.eventBus.emit(EVENT_OPEN, { key: openableKey, target });
       } else {

package/src/controller/PageLoader.ts

@@ -136,7 +136,7 @@ export class PageLoader implements IPageLoader {
       // 移除所有事件监听器
       const noop = () => {};
       this.doc.removeEventListener("astro:after-swap", noop);
-      this.doc.removeEventListener("DOMContentLoaded", noop);
+      this.doc.removeEventListener("astro:page-load", noop);
 
       // 清空回调集合
       this.callbacks.clear();

package/src/entify/Entify.ts

@@ -52,6 +52,10 @@ export class Entify implements IEntify {
     );
   }
 
+  public getLang() {
+    return this.envVariables.language || "en-US";
+  }
+
   public async getWebsite() {
     return queryWebsite(this.envVariables);
   }

package/src/entify/IEntify.ts

@@ -23,6 +23,7 @@ export type PostPatinateOptions = {
 };
 
 export interface IEntify {
+  getLang(): string;
   queryEntityList<
     T,
     WhereExp = unknown,

package/src/entify/lib/queryOneProductBySlug.ts

@@ -59,9 +59,14 @@ export async function queryOneProductBySlug(
       envVariables
     );
 
-    tProduct.related = result?.items?.map((pro) => productToViewModel(pro)) as
-      | TProduct[]
-      | undefined;
+    const relatedProducts = result?.items?.map((pro) =>
+      productToViewModel(pro)
+    ) as TProduct[] | undefined;
+
+    //重新排序后赋值
+    tProduct.related = product?.relatedSlugs.map((slug) =>
+      relatedProducts?.find((p) => p.slug === slug)
+    ) as TProduct[] | undefined;
   }
 
   return tProduct;

package/src/entify/lib/queryPostCategories.ts

@@ -30,6 +30,13 @@ export async function queryPostCategories(envVariables: EnvVariables) {
         PostCategoryFields.description,
       ],
       {
+        where: {
+          lang: {
+            abbr: {
+              _eq: envVariables.language,
+            },
+          },
+        },
         orderBy: [{ [PostCategoryFields.seqValue]: "asc" }],
       }
     ).posts(

package/src/entify/lib/queryProductCategories.ts

@@ -15,6 +15,13 @@ export async function queryProductCategories(envVariables: EnvVariables) {
         ProductCategoryFields.description,
       ],
       {
+        where: {
+          lang: {
+            abbr: {
+              _eq: envVariables.language,
+            },
+          },
+        },
         orderBy: [
           { [ProductCategoryFields.seqValue]: "asc" }
         ]

package/src/entify/lib/queryWebSiteSettings.ts

@@ -17,11 +17,10 @@ export async function queryWebSiteSettings(envVariables: EnvVariables) {
     WebsiteSettingsDistinctExp
   >(
     new WebsiteSettingsQueryOptions([
-      WebsiteSettingsFields.footerCode,
-      WebsiteSettingsFields.headerCode,
-      WebsiteSettingsFields.gaTrackingId,
       WebsiteSettingsFields.noticeEmail,
       WebsiteSettingsFields.smtpConfig,
+      WebsiteSettingsFields.replyToEmail,
+      WebsiteSettingsFields.useCustomizedSmtp,
     ]),
     envVariables
   );

package/src/entify/view-model/models.ts

@@ -110,9 +110,7 @@ export type TWebsiteSettings = {
   facebook?: string;
   twitter?: string;
   instagram?: string;
-  footerCode?: string;
   websiteName?: string;
-  map301?: string;
 };
 
 export type TBreadcrumbItem = {

package/src/react/components/ContactForm/index.tsx

@@ -1,10 +1,9 @@
-import { forwardRef, useEffect, useState } from "react";
+import { forwardRef, useState } from "react";
 import { Input } from "./Input";
 import { Submit } from "./Submit";
 import { Textarea } from "./Textarea";
-import { DATA_POPUP_CTA } from "../../../controller/consts";
 import clsx from "clsx";
-import { popover } from "../../../controller";
+import { modal } from "../../../controller";
 
 /**
  * 简单的加密函数，用于生成防机器人的加密字段
@@ -114,7 +113,6 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
       email: "",
       company: "",
       message: "",
-      fromCta: "",
       phone: "", // 初始化蜜罐字段
     });
     // 错误状态
@@ -124,26 +122,6 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
       success?: boolean;
       message?: string;
     }>({});
-    //最近被点击过的cta
-
-    useEffect(() => {
-      const unsub = popover.onOpenAll((event) => {
-        setFormData((prev) => ({
-          ...prev,
-          fromCta: event.target?.getAttribute(DATA_POPUP_CTA) || undefined,
-        }));
-      });
-      const unsub2 = popover.onCloseAll(() => {
-        setFormData((prev) => ({
-          ...prev,
-          fromCta: "",
-        }));
-      });
-      return () => {
-        unsub();
-        unsub2();
-      };
-    }, []);
 
     // 处理输入变化
     const handleChange = (
@@ -205,11 +183,11 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
       try {
         setSubmitting(true);
         setSubmitStatus({}); // 重置提交状态
-
         const response = await fetch(actionUrl, {
           method: "POST",
           body: JSON.stringify({
             ...formData,
+            fromCta: modal.lastCta,
             encryptedField: encrypt(formData.phone, formSalt),
           }),
           headers: {
@@ -236,7 +214,6 @@ export const ContactForm = forwardRef<HTMLDivElement, ContactFormProps>(
             email: "",
             company: "",
             message: "",
-            fromCta: "产品页面",
             phone: "",
           });
           window.location.href = "/thanks";

package/src/react/components/Medias/index.tsx

@@ -8,146 +8,227 @@ export type MediasProps = {
   children?: React.ReactNode;
   // Aspect ratio, format is `aspect-[width/height]`
   aspect?: string;
+  thumbnailAspect?: string;
 };
 
-export const Medias = forwardRef<HTMLDivElement, MediasProps>(
-  (props, ref) => {
-    const {
-      value,
-      className,
-      children,
-      aspect = "aspect-[5/4]",
-      ...rest
-    } = props;
-    const [selectedId, setSelectedId] = useState<string | undefined | null>(
+export const Medias = forwardRef<HTMLDivElement, MediasProps>((props, ref) => {
+  const {
+    value,
+    className,
+    children,
+    aspect = "aspect-[1/1]",
+    thumbnailAspect = "aspect-[5/4]",
+    ...rest
+  } = props;
+  const [selectedId, setSelectedId] = useState<string | undefined | null>(
+    value?.externalVideoUrl ? "video" : value?.medias?.[0]?.id || ""
+  );
+  const [videoUrl, setVideoUrl] = useState<string>("");
+  const [thumbnailUrl, setThumbnailUrl] = useState<string>("");
+
+  useEffect(() => {
+    setSelectedId(
       value?.externalVideoUrl ? "video" : value?.medias?.[0]?.id || ""
     );
-    const [videoUrl, setVideoUrl] = useState<string>("");
-    const [thumbnailUrl, setThumbnailUrl] = useState<string>("");
+  }, [value]);
 
-    useEffect(() => {
-      setSelectedId(
-        value?.externalVideoUrl ? "video" : value?.medias?.[0]?.id || ""
+  useEffect(() => {
+    if (value?.externalVideoUrl) {
+      const baseUrl = value.externalVideoUrl.replace(
+        "https://youtu.be/",
+        "https://www.youtube.com/embed/"
       );
-    }, [value]);
-
-    useEffect(() => {
-      if (value?.externalVideoUrl) {
-        const baseUrl = value.externalVideoUrl.replace(
-          "https://youtu.be/",
-          "https://www.youtube.com/embed/"
-        );
-        const separator = baseUrl.includes("?") ? "&" : "?";
-        setVideoUrl(
-          `${baseUrl}${separator}autoplay=1&muted=1&modestbranding=1&rel=0&controls=1&playsinline=1&enablejsapi=1&origin=${encodeURIComponent(
-            window.location.origin
-          )}`
-        );
-      }
-    }, [value?.externalVideoUrl]);
+      const separator = baseUrl.includes("?") ? "&" : "?";
+      setVideoUrl(
+        `${baseUrl}${separator}autoplay=1&muted=1&modestbranding=1&rel=0&controls=1&playsinline=1&enablejsapi=1&origin=${encodeURIComponent(
+          window.location.origin
+        )}`
+      );
+    }
+  }, [value?.externalVideoUrl]);
 
-    useEffect(() => {
-      if (value?.externalVideoUrl) {
-        const videoId = value.externalVideoUrl.includes("youtu.be/")
-          ? value.externalVideoUrl.split("youtu.be/")[1].split("?")[0]
-          : value.externalVideoUrl.split("v=")[1]?.split("&")[0];
+  useEffect(() => {
+    if (value?.externalVideoUrl) {
+      const videoId = value.externalVideoUrl.includes("youtu.be/")
+        ? value.externalVideoUrl.split("youtu.be/")[1].split("?")[0]
+        : value.externalVideoUrl.split("v=")[1]?.split("&")[0];
 
-        if (videoId) {
-          setThumbnailUrl(
-            `https://img.youtube.com/vi/${videoId}/hqdefault.jpg`
-          );
-        }
+      if (videoId) {
+        setThumbnailUrl(`https://img.youtube.com/vi/${videoId}/hqdefault.jpg`);
       }
-    }, [value?.externalVideoUrl]);
+    }
+  }, [value?.externalVideoUrl]);
 
-    const selectedIndex = value?.externalVideoUrl
-      ? selectedId === "video"
-        ? 0
-        : (value?.medias?.findIndex((media) => media.id === selectedId) || 0) +
-          1
-      : value?.medias?.findIndex((media) => media.id === selectedId) || 0;
+  const selectedIndex = value?.externalVideoUrl
+    ? selectedId === "video"
+      ? 0
+      : (value?.medias?.findIndex((media) => media.id === selectedId) || 0) + 1
+    : value?.medias?.findIndex((media) => media.id === selectedId) || 0;
 
-    const totalItems =
-      (value?.externalVideoUrl ? 1 : 0) + (value?.medias?.length || 0);
+  const totalItems =
+    (value?.externalVideoUrl ? 1 : 0) + (value?.medias?.length || 0);
 
-    // Calculate visible thumbnails (show 6 items)
-    const visibleCount = 6;
-    const halfVisible = Math.floor(visibleCount / 2);
-    const startIndex = Math.max(
-      0,
-      Math.min(selectedIndex - halfVisible, totalItems - visibleCount)
-    );
-    const endIndex = Math.min(startIndex + visibleCount, totalItems);
+  // Calculate visible thumbnails (show 6 items)
+  const visibleCount = 6;
+  const halfVisible = Math.floor(visibleCount / 2);
+  const startIndex = Math.max(
+    0,
+    Math.min(selectedIndex - halfVisible, totalItems - visibleCount)
+  );
+  const endIndex = Math.min(startIndex + visibleCount, totalItems);
 
-    const handlePrevious = useCallback(() => {
-      if (selectedIndex > 0) {
-        if (value?.externalVideoUrl) {
-          if (selectedIndex === 1) {
-            setSelectedId("video");
-          } else {
-            const prevIndex = selectedIndex - 2;
-            setSelectedId(value.medias?.[prevIndex]?.id || "");
-          }
+  const handlePrevious = useCallback(() => {
+    if (selectedIndex > 0) {
+      if (value?.externalVideoUrl) {
+        if (selectedIndex === 1) {
+          setSelectedId("video");
         } else {
-          const prevIndex = selectedIndex - 1;
-          setSelectedId(value?.medias?.[prevIndex]?.id || "");
+          const prevIndex = selectedIndex - 2;
+          setSelectedId(value.medias?.[prevIndex]?.id || "");
         }
+      } else {
+        const prevIndex = selectedIndex - 1;
+        setSelectedId(value?.medias?.[prevIndex]?.id || "");
       }
-    }, [selectedIndex, value]);
+    }
+  }, [selectedIndex, value]);
 
-    const handleNext = useCallback(() => {
-      if (selectedIndex < totalItems - 1) {
-        if (value?.externalVideoUrl) {
-          if (selectedId === "video") {
-            setSelectedId(value.medias?.[0]?.id || "");
-          } else {
-            const currentMediaIndex =
-              value.medias?.findIndex((media) => media.id === selectedId) || 0;
-            const nextIndex = currentMediaIndex + 1;
-            setSelectedId(value.medias?.[nextIndex]?.id || "");
-          }
+  const handleNext = useCallback(() => {
+    if (selectedIndex < totalItems - 1) {
+      if (value?.externalVideoUrl) {
+        if (selectedId === "video") {
+          setSelectedId(value.medias?.[0]?.id || "");
         } else {
           const currentMediaIndex =
-            value?.medias?.findIndex((media) => media.id === selectedId) || 0;
+            value.medias?.findIndex((media) => media.id === selectedId) || 0;
           const nextIndex = currentMediaIndex + 1;
-          setSelectedId(value?.medias?.[nextIndex]?.id || "");
+          setSelectedId(value.medias?.[nextIndex]?.id || "");
         }
+      } else {
+        const currentMediaIndex =
+          value?.medias?.findIndex((media) => media.id === selectedId) || 0;
+        const nextIndex = currentMediaIndex + 1;
+        setSelectedId(value?.medias?.[nextIndex]?.id || "");
       }
-    }, [selectedIndex, totalItems, value, selectedId]);
+    }
+  }, [selectedIndex, totalItems, value, selectedId]);
 
-    const handleKeyDown = useCallback(
-      (e: KeyboardEvent) => {
-        if (e.key === "ArrowLeft") {
-          handlePrevious();
-        } else if (e.key === "ArrowRight") {
-          handleNext();
-        }
-      },
-      [handleNext, handlePrevious]
-    );
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent) => {
+      if (e.key === "ArrowLeft") {
+        handlePrevious();
+      } else if (e.key === "ArrowRight") {
+        handleNext();
+      }
+    },
+    [handleNext, handlePrevious]
+  );
 
-    useEffect(() => {
-      window.addEventListener("keydown", handleKeyDown);
-      return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [handleKeyDown]);
+  useEffect(() => {
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [handleKeyDown]);
 
-    const canPrevious = selectedIndex > 0;
-    const canNext = selectedIndex < totalItems - 1;
+  const canPrevious = selectedIndex > 0;
+  const canNext = selectedIndex < totalItems - 1;
+
+  return (
+    <div ref={ref} className={clsx("flex flex-col", className)} {...rest}>
+      {children}
+      {/* Main display area */}
+      <div className={clsx("relative group")}>
+        {canPrevious && (
+          <button
+            onClick={handlePrevious}
+            className="absolute left-4 top-1/2 transform -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+            aria-label="Previous slide"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M15 19l-7-7 7-7"
+              />
+            </svg>
+          </button>
+        )}
+        {canNext && (
+          <button
+            onClick={handleNext}
+            className="absolute right-4 top-1/2 transform -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
+            aria-label="Next slide"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-6 w-6"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M9 5l7 7-7 7"
+              />
+            </svg>
+          </button>
+        )}
+        {value?.externalVideoUrl && selectedId === "video" && (
+          <div className={clsx("w-full rounded-md overflow-hidden", aspect)}>
+            <iframe
+              src={videoUrl}
+              className="w-full h-full"
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; autoplay"
+              referrerPolicy="strict-origin-when-cross-origin"
+              allowFullScreen
+            />
+          </div>
+        )}
+        {value?.medias?.map((media) => (
+          <div
+            key={media.id}
+            className={clsx(
+              "transition-opacity duration-300 overflow-hidden rounded-md",
+              media.id === selectedId ? "opacity-100" : "opacity-0 hidden",
+              aspect
+            )}
+          >
+            <img
+              src={media?.resize || media?.url}
+              alt={media?.alt}
+              className="w-full h-full object-cover object-center"
+            />
+          </div>
+        ))}
+      </div>
 
-    return (
-      <div ref={ref} className={clsx("flex flex-col", className)} {...rest}>
-        {children}
-        {/* Main display area */}
-        <div className={clsx("relative group")}>
-          {canPrevious && (
+      {/* Thumbnail navigation */}
+      <div className="relative mt-4">
+        <div className="flex items-stretch gap-2">
+          {totalItems > 6 && (
             <button
               onClick={handlePrevious}
-              className="absolute left-4 top-1/2 transform -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-              aria-label="Previous slide"
+              disabled={!canPrevious}
+              className={clsx(
+                "flex items-center justify-center w-6",
+                "transition-colors duration-200 rounded-l-md",
+                !canPrevious
+                  ? "bg-gray-100 text-gray-400 cursor-not-allowed"
+                  : "bg-gray-200 hover:bg-gray-300 text-gray-700"
+              )}
+              aria-label="Previous"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                className="h-6 w-6"
+                className="h-4 w-4 md:h-5 md:w-5"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -161,15 +242,88 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>(
               </svg>
             </button>
           )}
-          {canNext && (
+          <div className="flex-1">
+            <div className="grid grid-cols-6 gap-2">
+              {value?.externalVideoUrl && startIndex === 0 && (
+                <div
+                  className={clsx(
+                    "relative cursor-pointer overflow-hidden rounded-sm border-2",
+                    thumbnailAspect,
+                    selectedId === "video"
+                      ? "border-primary-500"
+                      : "border-transparent hover:border-primary-300"
+                  )}
+                  onClick={() => setSelectedId("video")}
+                >
+                  <img
+                    src={thumbnailUrl}
+                    alt="Video thumbnail"
+                    className="w-full h-full object-cover"
+                  />
+                  <div className="absolute inset-0 flex items-center justify-center bg-black/30">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      className="h-8 w-8 text-white"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        fill="currentColor"
+                        fill-rule="evenodd"
+                        d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10"
+                        clipRule="evenodd"
+                        opacity="0.5"
+                      />
+                      <path
+                        fill="currentColor"
+                        d="m15.414 13.059l-4.72 2.787C9.934 16.294 9 15.71 9 14.786V9.214c0-.924.934-1.507 1.694-1.059l4.72 2.787c.781.462.781 1.656 0 2.118"
+                      />
+                    </svg>
+                  </div>
+                </div>
+              )}
+              {value?.medias?.map((media, index) => {
+                const adjustedIndex = value?.externalVideoUrl
+                  ? index + 1
+                  : index;
+                return adjustedIndex >= startIndex &&
+                  adjustedIndex < endIndex ? (
+                  <div
+                    key={media.id}
+                    className={clsx(
+                      "relative cursor-pointer overflow-hidden rounded-sm border-2",
+                      thumbnailAspect,
+                      selectedId === media.id
+                        ? "border-primary-500"
+                        : "border-transparent hover:border-primary-300"
+                    )}
+                    onClick={() => setSelectedId(media.id)}
+                  >
+                    <img
+                      src={media?.resize || media?.url}
+                      alt={media?.alt}
+                      className="w-full h-full object-cover"
+                    />
+                  </div>
+                ) : null;
+              })}
+            </div>
+          </div>
+          {totalItems > 6 && (
             <button
               onClick={handleNext}
-              className="absolute right-4 top-1/2 transform -translate-y-1/2 z-10 bg-black/50 hover:bg-black/70 text-white rounded-full p-2 opacity-0 group-hover:opacity-100 transition-opacity duration-200"
-              aria-label="Next slide"
+              disabled={!canNext}
+              className={clsx(
+                "flex items-center justify-center w-6",
+                "transition-colors duration-200 rounded-r-md",
+                !canNext
+                  ? "bg-gray-100 text-gray-400 cursor-not-allowed"
+                  : "bg-gray-200 hover:bg-gray-300 text-gray-700"
+              )}
+              aria-label="Next"
             >
               <svg
                 xmlns="http://www.w3.org/2000/svg"
-                className="h-6 w-6"
+                className="h-4 w-4 md:h-5 md:w-5"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke="currentColor"
@@ -183,165 +337,8 @@ export const Medias = forwardRef<HTMLDivElement, MediasProps>(
               </svg>
             </button>
           )}
-          {value?.externalVideoUrl && selectedId === "video" && (
-            <div className={clsx("w-full rounded-md overflow-hidden", aspect)}>
-              <iframe
-                src={videoUrl}
-                className="w-full h-full"
-                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share; autoplay"
-                referrerPolicy="strict-origin-when-cross-origin"
-                allowFullScreen
-              />
-            </div>
-          )}
-          {value?.medias?.map((media) => (
-            <div
-              key={media.id}
-              className={clsx(
-                "transition-opacity duration-300 overflow-hidden rounded-md",
-                media.id === selectedId ? "opacity-100" : "opacity-0 hidden",
-                aspect
-              )}
-            >
-              <img
-                src={media?.resize || media?.url}
-                alt={media?.alt}
-                className="w-full h-full object-cover object-center"
-              />
-            </div>
-          ))}
-        </div>
-
-        {/* Thumbnail navigation */}
-        <div className="relative mt-4">
-          <div className="flex items-stretch gap-2">
-            {totalItems > 6 && (
-              <button
-                onClick={handlePrevious}
-                disabled={!canPrevious}
-                className={clsx(
-                  "flex items-center justify-center w-6",
-                  "transition-colors duration-200 rounded-l-md",
-                  !canPrevious
-                    ? "bg-gray-100 text-gray-400 cursor-not-allowed"
-                    : "bg-gray-200 hover:bg-gray-300 text-gray-700"
-                )}
-                aria-label="Previous"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-4 w-4 md:h-5 md:w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M15 19l-7-7 7-7"
-                  />
-                </svg>
-              </button>
-            )}
-            <div className="flex-1">
-              <div className="grid grid-cols-6 gap-2">
-                {value?.externalVideoUrl && startIndex === 0 && (
-                  <div
-                    className={clsx(
-                      "relative cursor-pointer overflow-hidden rounded-sm border-2",
-                      aspect,
-                      selectedId === "video"
-                        ? "border-primary-500"
-                        : "border-transparent hover:border-primary-300"
-                    )}
-                    onClick={() => setSelectedId("video")}
-                  >
-                    <img
-                      src={thumbnailUrl}
-                      alt="Video thumbnail"
-                      className="w-full h-full object-cover"
-                    />
-                    <div className="absolute inset-0 flex items-center justify-center bg-black/30">
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        className="h-8 w-8 text-white"
-                        viewBox="0 0 24 24"
-                      >
-                        <path
-                          fill="currentColor"
-                          fill-rule="evenodd"
-                          d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10"
-                          clipRule="evenodd"
-                          opacity="0.5"
-                        />
-                        <path
-                          fill="currentColor"
-                          d="m15.414 13.059l-4.72 2.787C9.934 16.294 9 15.71 9 14.786V9.214c0-.924.934-1.507 1.694-1.059l4.72 2.787c.781.462.781 1.656 0 2.118"
-                        />
-                      </svg>
-                    </div>
-                  </div>
-                )}
-                {value?.medias?.map((media, index) => {
-                  const adjustedIndex = value?.externalVideoUrl
-                    ? index + 1
-                    : index;
-                  return adjustedIndex >= startIndex &&
-                    adjustedIndex < endIndex ? (
-                    <div
-                      key={media.id}
-                      className={clsx(
-                        "relative cursor-pointer overflow-hidden rounded-sm border-2",
-                        aspect,
-                        selectedId === media.id
-                          ? "border-primary-500"
-                          : "border-transparent hover:border-primary-300"
-                      )}
-                      onClick={() => setSelectedId(media.id)}
-                    >
-                      <img
-                        src={media?.resize || media?.url}
-                        alt={media?.alt}
-                        className="w-full h-full object-cover"
-                      />
-                    </div>
-                  ) : null;
-                })}
-              </div>
-            </div>
-            {totalItems > 6 && (
-              <button
-                onClick={handleNext}
-                disabled={!canNext}
-                className={clsx(
-                  "flex items-center justify-center w-6",
-                  "transition-colors duration-200 rounded-r-md",
-                  !canNext
-                    ? "bg-gray-100 text-gray-400 cursor-not-allowed"
-                    : "bg-gray-200 hover:bg-gray-300 text-gray-700"
-                )}
-                aria-label="Next"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  className="h-4 w-4 md:h-5 md:w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M9 5l7 7-7 7"
-                  />
-                </svg>
-              </button>
-            )}
-          </div>
         </div>
       </div>
-    );
-  }
-);
+    </div>
+  );
+});

package/src/react/components/ProductCard/ProductCta/index.tsx

@@ -25,7 +25,7 @@ export function ProductCta(props: {
 
   const handleClick = () => {
     if (ref.current) {
-      popover.open(roleProps[DATA_POPUP_CTA] || openableKey, ref.current);
+      popover.open(openableKey, ref.current);
     }
   };
 

package/src/react/components/RichTextOutline/index.tsx

@@ -1,5 +1,5 @@
 import { extractOutline, mdxToSlate } from "@rxdrag/slate-preview";
-import { forwardRef, ReactNode, useEffect } from "react";
+import { forwardRef, useEffect } from "react";
 import { useAcitviedHeading } from "./useAcitviedHeading";
 import clsx from "clsx";
 
@@ -16,8 +16,8 @@ export const RichTextOutline = forwardRef<
   HTMLUListElement,
   RichTextOutlineProps
 >((props, ref) => {
-  const { className, itemClassName, value, yOffset = 100, ...rest } = props;
-  const activiedId = useAcitviedHeading();
+  const { className, itemClassName, value, yOffset = 200, ...rest } = props;
+  const activiedId = useAcitviedHeading(yOffset);
   const nodes = mdxToSlate(value ?? "");
   const outline = extractOutline(nodes ?? []);
 
@@ -38,7 +38,7 @@ export const RichTextOutline = forwardRef<
     return () => {
       window.removeEventListener("hashchange", handleHashChange);
     };
-  }, []);
+  }, [yOffset]);
 
   return outline?.length ? (
     <ul ref={ref} className={className} {...rest}>
@@ -57,7 +57,6 @@ export const RichTextOutline = forwardRef<
                 e.preventDefault();
                 const element = document.getElementById(item?.key);
                 if (element) {
-                  const yOffset = -100; // 偏移量
                   const y =
                     element.getBoundingClientRect().top +
                     window.scrollY +

package/src/react/components/RichTextOutline/useAcitviedHeading.ts

@@ -1,54 +1,81 @@
-import { useCallback, useEffect, useState } from 'react';
-
-export function useAcitviedHeading() {
-  const [activeId, setActiveId] = useState<string | null>(null);
-
-  const handleScroll = useCallback(() => {
-    const anchorElements = document.querySelectorAll('a[href^="#"]');
-    let closestId = null;
-    let closestDistance = Infinity;
-
-    anchorElements.forEach((element) => {
-      const id = element.getAttribute('href')?.slice(1) || '';
-      const targetElement = document.getElementById(id);
-      if (targetElement) {
-        const { top } = targetElement.getBoundingClientRect();
-        const distance = Math.abs(top);
-        // 寻找最接近视口顶部但不超过视口顶部的锚点
-        if (top <= 160 && distance < closestDistance) {
-          closestId = id;
-          closestDistance = distance;
-        }
-      }
-    });
-
-    setActiveId(closestId);
-  }, []);
-
-  useEffect(() => {
-    const handleHashChange = () => {
-      const hash = window.location.hash.substring(1); // 获取哈希值（去掉#）
-      setActiveId(hash);
-
-      const element = document.getElementById(hash);
-      if (element) {
-        const yOffset = -100; // 偏移量
-        const y = element.getBoundingClientRect().top + window.scrollY - yOffset;
-        window.scrollTo({ top: y, behavior: 'smooth' });
-      }
-    };
-
-    window.addEventListener('hashchange', handleHashChange);
-    window.addEventListener('scroll', handleScroll);
-
-    // 初始化时检查当前哈希值
-    handleHashChange();
-
-    return () => {
-      window.removeEventListener('hashchange', handleHashChange);
-      window.removeEventListener('scroll', handleScroll);
-    };
-  }, [handleScroll]);
-
-  return activeId;
-}
+import { useCallback, useEffect, useState, useRef, useMemo } from "react";
+import { throttle } from "lodash-es";
+
+export function useAcitviedHeading(yOffset = 200) {
+  const [activeId, setActiveId] = useState<string | null>(null);
+  const anchorElementsRef = useRef<HTMLAnchorElement[]>([]);
+  const lastScrollTopRef = useRef(0);
+  const activeIdRef = useRef<string | null>(null);
+
+  // 同步 activeId 到 ref
+  useEffect(() => {
+    activeIdRef.current = activeId;
+  }, [activeId]);
+
+  // 初始化时获取所有锚点元素
+  useEffect(() => {
+    anchorElementsRef.current = Array.from(
+      document.querySelectorAll('a[href^="#"]')
+    );
+  }, []);
+
+  const handleScroll = useCallback(() => {
+    const scrollTop = window.scrollY;
+    lastScrollTopRef.current = scrollTop;
+
+    let closestId = null;
+    let closestDistance = Infinity;
+
+    anchorElementsRef.current.forEach((element) => {
+      const id = element.getAttribute("href")?.slice(1) || "";
+      const targetElement = document.getElementById(id);
+
+      if (targetElement) {
+        const { top } = targetElement.getBoundingClientRect();
+        const distance = Math.abs(top);
+        if (top <= yOffset && distance < closestDistance) {
+          closestId = id;
+          closestDistance = distance;
+        }
+      }
+    });
+
+    if (activeIdRef.current !== closestId) {
+      setActiveId(closestId);
+    }
+  }, [yOffset]); // 移除 activeId 依赖，因为我们只需要比较当前值
+
+  // 使用节流函数包装handleScroll
+  const throttledHandleScroll = useMemo(
+    () => throttle(handleScroll, 100, { leading: true, trailing: true }),
+    [handleScroll]
+  );
+
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.substring(1);
+      setActiveId(hash);
+
+      const element = document.getElementById(hash);
+      if (element) {
+        const y =
+          element.getBoundingClientRect().top + window.scrollY - yOffset;
+        window.scrollTo({ top: y, behavior: "smooth" });
+      }
+    };
+
+    window.addEventListener("hashchange", handleHashChange);
+    window.addEventListener("scroll", throttledHandleScroll);
+
+    // 初始化时检查当前哈希值
+    handleHashChange();
+
+    return () => {
+      window.removeEventListener("hashchange", handleHashChange);
+      window.removeEventListener("scroll", throttledHandleScroll);
+      throttledHandleScroll.cancel(); // 清理节流函数
+    };
+  }, [handleScroll, throttledHandleScroll, yOffset]);
+
+  return activeId;
+}