From 852a22a3bf7ae939773d440baa057b2e15e468bc Mon Sep 17 00:00:00 2001
From: jingrow <support@jingrow.com>
Date: Sat, 23 Aug 2025 23:01:50 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=A7=E5=93=81=E8=AF=A6=E6=83=85=E9=A1=B5?=
 =?UTF-8?q?=E9=87=8D=E6=9E=84=E4=B8=BA=E6=A0=87=E7=AD=BE=E9=A1=B5=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA=E5=86=85=E5=AE=B9=E5=92=8C=E9=99=84=E5=8A=A0=E5=86=85?=
 =?UTF-8?q?=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/products/[...slug]/page.jsx | 40 ++++++++++++++++++++++-----------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/app/products/[...slug]/page.jsx b/app/products/[...slug]/page.jsx
index 5b20b79..b64d3b1 100644
--- a/app/products/[...slug]/page.jsx
+++ b/app/products/[...slug]/page.jsx
@@ -139,20 +139,34 @@ export default async function Page({ params, searchParams }) {
                       )}
                     </div>
                   )}
-                  {/* Product Description 标题 */}
-                  <div className="mb-2 md:mb-4">
-                    <span className="inline-block bg-[#1fc76f] text-white text-lg md:text-xl font-semibold px-5 py-2 rounded-t-md shadow-sm">Product Description</span>
-                  </div>
-                  <div className="prose max-w-none text-gray-700 mb-6 md:mb-8 px-1 md:px-0 prose-img:max-w-full prose-img:h-auto prose-table:border prose-table:border-gray-300 prose-th:border prose-th:border-gray-300 prose-td:border prose-td:border-gray-300 prose-th:bg-gray-50 prose-table:rounded-lg prose-table:overflow-hidden" dangerouslySetInnerHTML={{ __html: data.content || '' }} />
-                  {data.additional_content && (
-                    <>
-                      {/* Testing Report 标题 */}
-                      <div className="mb-2 md:mb-4">
-                        <span className="inline-block bg-[#1fc76f] text-white text-lg md:text-xl font-semibold px-5 py-2 rounded-t-md shadow-sm">Testing Report</span>
+                  {/* Product Description 和 Additional Content 标签式排版 */}
+                  <ul className="nav nav-tabs nav-tabs-basic !mt-[70px]">
+                    <li className="nav-item">
+                      <a className="nav-link active" data-bs-toggle="tab" href="#tab1-1">
+                        Product Description
+                      </a>
+                    </li>
+                    {data.additional_content && (
+                      <li className="nav-item">
+                        <a className="nav-link" data-bs-toggle="tab" href="#tab1-2">
+                          Additional Content
+                        </a>
+                      </li>
+                    )}
+                  </ul>
+                  
+                  {/* 标签内容 */}
+                  <div className="tab-content !mt-0 md:!mt-5">
+                    <div className="tab-pane fade show active" id="tab1-1">
+                      <div className="prose max-w-none text-gray-700 px-1 md:px-0 prose-img:max-w-full prose-img:h-auto prose-table:border prose-table:border-gray-300 prose-th:border prose-th:border-gray-300 prose-td:border prose-td:border-gray-300 prose-th:bg-gray-50 prose-table:rounded-lg prose-table:overflow-hidden" dangerouslySetInnerHTML={{ __html: data.content || '' }} />
+                    </div>
+                    
+                    {data.additional_content && (
+                      <div className="tab-pane fade" id="tab1-2">
+                        <div className="prose max-w-none text-gray-700 px-1 md:px-0 prose-img:max-w-full prose-img:h-auto prose-table:border prose-table:border-gray-300 prose-th:border prose-th:border-gray-300 prose-td:border prose-td:border-gray-300 prose-th:bg-gray-50 prose-table:rounded-lg prose-table:overflow-hidden" dangerouslySetInnerHTML={{ __html: data.additional_content }} />
                       </div>
-                      <div className="prose max-w-none text-gray-700 mt-6 md:mt-8 px-1 md:px-0 prose-img:max-w-full prose-img:h-auto prose-table:border prose-table:border-gray-300 prose-th:border prose-th:border-gray-300 prose-td:border prose-td:border-gray-300 prose-th:bg-gray-50 prose-table:rounded-lg prose-table:overflow-hidden" dangerouslySetInnerHTML={{ __html: data.additional_content }} />
-                    </>
-                  )}
+                    )}
+                  </div>
                 </div>
               </div>
             </div>