详情页游客uuid优化

src/app/(public)/product/_components/ProductReviewSection.tsx

@@ -12,7 +12,6 @@ interface ProductReviewSectionProps {
   onOpenBaseModal: () => void;
   activeTab: string;
   onChangeTab: (tabKey: string) => void;
-  uuid:string;
 }
 
 function ProductReviewSection({
@@ -23,7 +22,6 @@ function ProductReviewSection({
   activeTab,
   onOpenBaseModal,
   onChangeTab,
-  uuid,
 }: ProductReviewSectionProps) {
   // const getAllreviews = await getProductReviews(productId)
   console.log("productId-------------:", productId, reviews);
@@ -41,7 +39,6 @@ function ProductReviewSection({
               onClose={closeModal}
               activeTab={activeTab}
               onChangeTab={onChangeTab} // 关键：把切换tab的函数传给弹窗
-              uuid={uuid}
             />
           </>
         ) : (

src/app/(public)/product/_components/SwitchButton.tsx

@@ -6,6 +6,7 @@ import ReviewAdd from "@/app/(public)/product/_components/review/ReviewAdd";
 import FaqList, { FaqItem } from "./question/FaqList";
 import HairPhotoGallery from "./review/HairPhotoGallery";
 import { clientFetch } from "@/lib/restApiClient";
+import { getUuId } from "@/utils/helper";
 interface ReviewQuestionTabProps {
   productId: string;
   questionList: any[];
@@ -53,18 +54,7 @@ export default function SwitchButton({
   // 自己通过接口拿到，不再由父组件传入
   const [reviewList, setReviewList] = useState<any[]>([]);
   const [reviewTotal, setReviewTotal] = useState<number>(0);
-    // 获取/生成访客UUID
-  const getUuId = () => {
-    const key = "GUEST_UUID";
-    let id = localStorage.getItem(key);
-    if (!id) {
-      id = crypto.randomUUID();
-      localStorage.setItem(key, id);
-    }
-    return id;
-  };
-  // 组件顶层，只生成一次uuid
-const [clientUuid] = useState(() => getUuId());
+
   useEffect(() => {
   if (!productId) return;
   // 1. 请求中断控制器，组件卸载时取消网络请求，防止卸载后执行setState
@@ -76,6 +66,7 @@ const [clientUuid] = useState(() => getUuId());
   
   const fetchReviews = async () => {
     try {
+      const clientUuid = getUuId();
       const res = await clientFetch(
         `/api/shop/products/${productId}/reviews?page=1&per_page=10&has_images=0&sort=all&client_id=${clientUuid}`,
         { signal } // 绑定中断信号
@@ -200,7 +191,6 @@ const [clientUuid] = useState(() => getUuId());
               onOpenBaseModal={openAllReviewModal}
               activeTab={activeModalTab}
               onChangeTab={onTabChange}
-              uuid={clientUuid}
             />
           )
         ) : isEmptyQuestion ? (

src/app/(public)/product/_components/review/ReviewDetail.tsx

@@ -17,6 +17,7 @@ import ReviewModal from "./ReviewModal";
 // import { ReviewTabType } from "@/types/products/review";
 import { useCustomToast } from "@utils/hooks/useToast";
 import { clientFetch } from "@/lib/restApiClient";
+import { getUuId } from "@/utils/helper";
 interface ProductReviewEdge {
   __typename: "ProductReviewEdge";
   node: ProductReviewNode;
@@ -31,7 +32,6 @@ interface ReviewDetailProps {
   activeTab: string;
   onChangeTab: (tabKey: string) => void;
   onOpenBaseModal: () => void;
-  uuid:string;
 }
 
 const ReviewDetail: FC<ReviewDetailProps> = ({
@@ -43,7 +43,6 @@ const ReviewDetail: FC<ReviewDetailProps> = ({
   activeTab,
   onChangeTab,
   onOpenBaseModal,
-  uuid,
 }) => {
  
   const [visibleCount, setVisibleCount] = useState(5);
@@ -65,10 +64,7 @@ const ReviewDetail: FC<ReviewDetailProps> = ({
 
   const visibleReviews = reviewDetails.slice(0, visibleCount);
   console.log("visibleReviews-------------------:", visibleReviews);
-  // useEffect(() => {
-  //   const uuid = getGuestUUID();
-  //   if (uuid) setGuestId(uuid);
-  // }, []);
+
   const handleLikeClick = async (item: any) => {
     // id直接从item拿
     const id = item.id;
@@ -90,6 +86,7 @@ const ReviewDetail: FC<ReviewDetailProps> = ({
       },
     }));
     try {
+      const uuid = getUuId();
       const res = await clientFetch(`/api/shop/reviews/${id}/like`, {
         method: "POST",
         headers: {
@@ -368,7 +365,6 @@ const ReviewDetail: FC<ReviewDetailProps> = ({
         productId={productId}
         onChangeTab={onChangeTab}
         activeTab={activeTab}
-        guestId={uuid}
       />
     </>
   );

src/app/(public)/product/_components/review/ReviewModal.tsx

@@ -9,6 +9,7 @@ import ReviewImageGalleryModal from "./ReviewImageGalleryModal";
 import Image from "next/image";
 import { clientFetch } from "@/lib/restApiClient";
 import { useCustomToast } from "@utils/hooks/useToast";
+import { getUuId } from "@/utils/helper";
 // 分页常量
 const PAGE_SIZE = 10;
 
@@ -19,7 +20,6 @@ interface ReviewModalProps {
   productId: string;
   // 父组件传入默认Tab all / newest / photos
   activeTab: ReviewTabType;
-  guestId: string | null;
 }
 // 模拟后端请求函数，替换为你的真实接口
 async function fetchReviewApi(
@@ -127,7 +127,6 @@ const ReviewModal: React.FC<ReviewModalProps> = React.memo(
     productId,
     onChangeTab,
     activeTab,
-    guestId,
   }) {
     // 全部原始评论数据（接口返回完整数据缓存）
     const [fullReviewList, setFullReviewList] = useState<ProductReviewList>([]);
@@ -161,7 +160,8 @@ const ReviewModal: React.FC<ReviewModalProps> = React.memo(
       async (tab: ReviewTabType, pageNum: number, reset = false) => {
         setLoading(true);
         try {
-          const res = await fetchReviewApi(productId, tab, pageNum, guestId);
+          const uuid = getUuId();
+          const res = await fetchReviewApi(productId, tab, pageNum, uuid);
           if (reset) {
             // 切换Tab/首次打开，重置列表
             setFullReviewList(res.list);
@@ -287,13 +287,14 @@ const ReviewModal: React.FC<ReviewModalProps> = React.memo(
         },
       }));
       try {
+        const uuid = getUuId();
         const res = await clientFetch(`/api/shop/reviews/${id}/like`, {
           method: "POST",
           headers: {
             "Content-Type": "application/json",
           },
           body: JSON.stringify({
-            client_id: guestId,
+            client_id: uuid,
           }),
         });
 

src/utils/helper.ts

@@ -358,4 +358,15 @@ export function lyCompute(
     }
     
     return isMinus ? '-' + final : final;
-}
+}
+
+// 获取/生成访客UUID
+export function getUuId() {
+    const key = "GUEST_UUID";
+    let id = localStorage.getItem(key);
+    if (!id) {
+        id = crypto.randomUUID();
+        localStorage.setItem(key, id);
+    }
+    return id;
+};