init

components/ProductTabsClient.tsx

@@ -0,0 +1,57 @@
+// @/components/ProductTabsClient.tsx (客户端组件)
+'use client';
+import { useTranslations } from 'next-intl';
+import { useState } from 'react';
+
+type ProductTabsClientProps = {
+  detail: string;
+  spec: string[];
+  packaging: string;
+  locale: string;
+};
+
+// 纯客户端交互组件（仅处理标签页切换）
+export default function ProductTabsClient({ detail, spec, packaging, locale }: ProductTabsClientProps) {
+  const [activeTab, setActiveTab] = useState('spec'); // 仅客户端使用状态
+  const t = useTranslations("Product");
+
+  return (
+    <div className="border rounded">
+      {/* 标签栏 */}
+      <div className="flex border-b">
+        <button
+          className={`px-4 py-2 border-r transition-colors ${activeTab === 'detail' ? 'bg-orange-50 text-orange-600 font-medium' : 'hover:bg-gray-50'}`}
+          onClick={() => setActiveTab('detail')}
+        >
+          {t('productDetail')}
+        </button>
+        <button
+          className={`px-4 py-2 border-r transition-colors ${activeTab === 'spec' ? 'bg-orange-50 text-orange-600 font-medium' : 'hover:bg-gray-50'}`}
+          onClick={() => setActiveTab('spec')}
+        >
+          {t('productSpec')}
+        </button>
+        <button
+          className={`px-4 py-2 transition-colors ${activeTab === 'packaging' ? 'bg-orange-50 text-orange-600 font-medium' : 'hover:bg-gray-50'}`}
+          onClick={() => setActiveTab('packaging')}
+        >
+          {t('productPacking')}
+        </button>
+      </div>
+      {/* 内容区 */}
+      <div className="p-4">
+        {activeTab === 'detail' && <div className="text-gray-800">{detail || t('productNoDetail')}</div>}
+        {activeTab === 'spec' && (
+          spec.length > 0 ? (
+            <div className="space-y-1 text-gray-800">
+              {spec.map((item, idx) => <div key={idx}>{item}</div>)}
+            </div>
+          ) : (
+            <p className="text-gray-500">{t('productNoSpec')}</p>
+          )
+        )}
+        {activeTab === 'packaging' && <div className="text-gray-800">{packaging || t('productNoPacking')}</div>}
+      </div>
+    </div>
+  );
+}