样式问题

src/app/(checkout)/checkout/_components/CheckoutProducts/CheckoutProducts.tsx

@@ -3,6 +3,7 @@
 import {useState} from "react";
 import { useRouter } from 'next/navigation';
 import Image from "next/image";
+import clsx from "clsx";
 import type {CartDetail, CartItem} from "@/types/cart/type";
 import { useAddProduct } from "@utils/hooks/useAddToCart";
 import { useCustomToast } from "@/utils/hooks/useToast";
@@ -191,7 +192,7 @@ export default function CheckoutProducts({
                                         </div>
                                         {product.canChangeQty ?
                                             <div className=" flex-none flex border-1 rounded-lg p-2 gap-4">
-                                                <button className="flex-none" onClick={() => changeProductQty(product,'minus')}>
+                                                <button disabled={product.quantity <= 1} className={clsx("flex-none", product.quantity <= 1 && "opacity-30")} onClick={() => changeProductQty(product,'minus')}>
                                                     <svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><path    stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="square"  d="M3.33301 8L12.6663 8"></path></svg>
                                                 </button>
                                                 <span className="text-ly-14">{product.quantity}</span>

src/app/(checkout)/checkout/cart/_components/CartWrapper.tsx

@@ -262,7 +262,7 @@ export function CartWrapper({
                                     </div>
                                     {product.canChangeQty ?
                                         <div className=" flex-none flex border-1 rounded-lg p-2 gap-4">
-                                            <button className="flex-none" onClick={() => changeProductQty(product,'minus')} type="button">
+                                            <button disabled={product.quantity <= 1} className={clsx("flex-none", product.quantity <= 1 && "opacity-30")} onClick={() => changeProductQty(product,'minus')} type="button">
                                                 <svg className="w-4 h-4" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16 16" fill="none"><path    stroke="rgba(0, 0, 0, 1)" strokeWidth="1.5" strokeLinejoin="round" strokeLinecap="square"  d="M3.33301 8L12.6663 8"></path></svg>
                                             </button>
                                             <span className="text-ly-14">{product.quantity}</span>

src/app/(public)/_components/HomeBestSellers.tsx

@@ -63,19 +63,13 @@ const HomeBestSellers = ({ bestSellers }: HomeBestSellersProps) => {
                   </Link>
                   {/* 评分 + 评论数 */}
                   <div className="flex items-center gap-1">
-                    <div className="flex">
-                      {/* 星级图标（简化版，可替换为真实星星图标） */}
-                      {[1, 2, 3, 4, 5].map((star) => (
-                        <svg
-                          key={star}
-                          className="w-4 h-4 text-yellow-400"
-                          fill="currentColor"
-                          viewBox="0 0 20 20"
-                        >
-                          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                        </svg>
-                      ))}
-                    </div>
+
+                    <Image className="w-22.5 h-3.75"
+                        width={90}
+                        height={15}
+                        src="/image/five-star.webp"
+                        alt="review star"
+                    />
                     <span className="text-xs text-gray-600">
                       {product.review_count}
                     </span>

src/app/(public)/_components/HomeNewArrival.tsx

@@ -62,17 +62,12 @@ const HomeNewArrival = ({ newArrival }: NewArrivalProps) => {
                   {/* 评分 + 评论数 */}
                   <div className="flex items-center gap-1">
                     <div className="flex">
-                      {/* 星级图标（简化版，可替换为真实星星图标） */}
-                      {[1, 2, 3, 4, 5].map((star) => (
-                        <svg
-                          key={star}
-                          className="w-4 h-4 text-yellow-400"
-                          fill="currentColor"
-                          viewBox="0 0 20 20"
-                        >
-                          <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
-                        </svg>
-                      ))}
+                      <Image className="w-22.5 h-3.75"
+                          width={90}
+                          height={15}
+                          src="/image/five-star.webp"
+                          alt="review star"
+                      />
                     </div>
                     <span className="text-xs text-gray-600">
                       {product.review_count}

src/app/(public)/_components/RecommendedProducts.tsx

@@ -103,19 +103,7 @@ export default function RecommendedProducts({ recommended }: recommendedProps) {
     fetchPageData(nextPage);
   };
   if (!recommended || recommended.length === 0) return null;
-  // 五星星星渲染
-  const renderStars = (count: number) => {
-    return Array.from({ length: count }).map((_, idx) => (
-      <svg
-        key={idx}
-        className="w-4 h-4 text-green-600 inline-block"
-        viewBox="0 0 24 24"
-        fill="currentColor"
-      >
-        <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
-      </svg>
-    ));
-  };
+
 
   return (
     <section className="py-6 px-4 pt-8">
@@ -145,37 +133,17 @@ export default function RecommendedProducts({ recommended }: recommendedProps) {
 
             {/* 星级 + 评论数 */}
             <div className="flex items-center gap-1">
-              {renderStars(item.rating)}
+              <Image className="w-22.5 h-3.75"
+                  width={90}
+                  height={15}
+                  src="/image/five-star.webp"
+                  alt="review star"
+              />
               <span className="text-sm text-gray-600 ml-1 underline">
                 {item.review_count}
               </span>
             </div>
 
-            {/* 价格 + 购物车按钮 */}
-            {/* <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <span className="text-xl font-bold text-black">
-                  ${item.price}
-                </span>
-                <span className="text-sm text-gray-400 line-through">
-                  ${item.originPrice}
-                </span>
-              </div>
-              <button className="w-10 h-10 bg-emerald-600 rounded-lg flex items-center justify-center text-white">
-                <svg
-                  width="18"
-                  height="18"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                >
-                  <path d="M6 3h12M3 6h18l-2 11H5L3 6z" />
-                  <circle cx="9" cy="20" r="1" />
-                  <circle cx="15" cy="20" r="1" />
-                </svg>
-              </button>
-            </div> */}
             {/* 价格 + 购物车图标 */}
             <div className="flex items-center justify-between">
               <div className="flex items-center gap-1">

src/components/common/AddToCartModal/ProductOptionsInAddToCartModal.tsx

@@ -31,7 +31,6 @@ export default function ProductOptionsInAddToCartModal({
 
     return (
         <>
-            this is test
             {productOptions.map((option) => { 
                 return (<div key={option.id}>
                     <div className="text-ly-12 font-medium">{option.label}</div>