大改变

app/product/[id]/page.tsx

@@ -0,0 +1,27 @@
+import Sidebar from "@/components/layout/Sidebar";
+import TopBar from "@/components/layout/TopBar";
+import ContentSection from "@/components/product/ContentSection";
+
+export default function ProductDetailPage() {
+  const breadcrumbItems = [
+    { label: "ASSETX", href: "/" },
+    { label: "Fund Market", href: "/" },
+    { label: "High-Yield US Equity" },
+  ];
+
+  return (
+    <div className="min-h-screen bg-bg-subtle dark:bg-gray-900 flex">
+      <Sidebar />
+      <div className="flex-1 flex flex-col ml-[222px]">
+        <div className="bg-[#F3F4F6] dark:bg-gray-800 border-b border-border-normal dark:border-gray-700 px-8 py-6">
+          <TopBar breadcrumbItems={breadcrumbItems} />
+        </div>
+
+        <div className="flex-1 px-8 py-8 bg-[#F3F4F6] dark:bg-gray-900">
+          {/* Tab Navigation and Content */}
+          <ContentSection />
+        </div>
+      </div>
+    </div>
+  );
+}

app/product/page.tsx

@@ -1,163 +0,0 @@
-"use client";
-
-import { useApp } from "@/contexts/AppContext";
-import Sidebar from "@/components/Sidebar";
-import TopBar from "@/components/TopBar";
-import StatsCards from "@/components/StatsCards";
-import ProductCard from "@/components/ProductCard";
-import Image from "next/image";
-import { Button } from "@heroui/react";
-
-export default function ProductPage() {
-  const { t } = useApp();
-
-  const statsData = [
-    {
-      label: "Total Value Locked",
-      value: "$465.0M",
-      change: "+2.4%",
-      isPositive: true,
-    },
-    {
-      label: "Cumulative Yield",
-      value: "$505,232",
-      change: "+2.4%",
-      isPositive: true,
-    },
-    {
-      label: "Your Total Balance",
-      value: "$10,000",
-      change: "+2.4%",
-      isPositive: true,
-    },
-    {
-      label: "Your Total Earning",
-      value: "--",
-      change: "+2.4%",
-      isPositive: true,
-    },
-  ];
-
-  const products = [
-    {
-      id: 1,
-      name: "High-Yield US Equity",
-      category: "Quant Strategy",
-      categoryColor: "blue" as const,
-      iconType: "us-flag-1" as const,
-      yieldAPY: "22.0%",
-      poolCap: "10M",
-      maturity: "05 Feb 2026",
-      risk: "Medium",
-      riskLevel: 2 as const,
-      lockUp: "12 Months",
-      circulatingSupply: "$2.5M",
-      poolCapacityPercent: 75,
-    },
-    {
-      id: 2,
-      name: "HK Commercial RE",
-      category: "Real Estate",
-      categoryColor: "green" as const,
-      iconType: "hk-flag" as const,
-      yieldAPY: "22.0%",
-      poolCap: "10M",
-      maturity: "05 Feb 2026",
-      risk: "LOW",
-      riskLevel: 1 as const,
-      lockUp: "12 Months",
-      circulatingSupply: "$2.5M",
-      poolCapacityPercent: 75,
-    },
-    {
-      id: 3,
-      name: "High-Yield US Equity",
-      category: "Quant Strategy",
-      categoryColor: "purple" as const,
-      iconType: "us-flag-2" as const,
-      yieldAPY: "22.0%",
-      poolCap: "10M",
-      maturity: "05 Feb 2026",
-      risk: "High",
-      riskLevel: 3 as const,
-      lockUp: "12 Months",
-      circulatingSupply: "$2.5M",
-      poolCapacityPercent: 75,
-    },
-  ];
-
-  return (
-    <div className="min-h-screen bg-bg-subtle dark:bg-gray-900 flex">
-      <Sidebar />
-      <div className="flex-1 flex flex-col ml-[222px]">
-        <div className="bg-bg-surface dark:bg-gray-800 border-b border-border-normal dark:border-gray-700 px-8 py-6">
-          <TopBar />
-        </div>
-
-        <div className="flex-1 px-8 py-8">
-          {/* Page Title */}
-          <div className="mb-8">
-            <h1 className="text-heading-h2 font-bold text-text-primary dark:text-white">
-              AssetX Fund Market
-            </h1>
-          </div>
-
-          {/* Stats Cards */}
-          <div className="mb-8">
-            <StatsCards stats={statsData} />
-          </div>
-
-          {/* Assets Section */}
-          <div className="flex flex-col gap-6">
-            {/* Section Header */}
-            <div className="flex items-center justify-between">
-              <h2 className="text-heading-h3 font-bold text-text-primary dark:text-white">
-                Assets
-              </h2>
-              <div className="flex items-center gap-2">
-                <button className="p-2 rounded-lg hover:bg-bg-subtle dark:hover:bg-gray-700 transition-colors">
-                  <Image
-                    src="/edit-list-unordered0.svg"
-                    alt="List view"
-                    width={20}
-                    height={20}
-                  />
-                </button>
-                <button className="p-2 rounded-lg hover:bg-bg-subtle dark:hover:bg-gray-700 transition-colors">
-                  <Image
-                    src="/menu-more-grid-small0.svg"
-                    alt="Grid view"
-                    width={20}
-                    height={20}
-                  />
-                </button>
-              </div>
-            </div>
-
-            {/* Product Cards Grid - Horizontal Layout */}
-            <div className="flex flex-row gap-6">
-              {products.map((product) => (
-                <ProductCard
-                  key={product.id}
-                  name={product.name}
-                  category={product.category}
-                  categoryColor={product.categoryColor}
-                  iconType={product.iconType}
-                  yieldAPY={product.yieldAPY}
-                  poolCap={product.poolCap}
-                  maturity={product.maturity}
-                  risk={product.risk}
-                  riskLevel={product.riskLevel}
-                  lockUp={product.lockUp}
-                  circulatingSupply={product.circulatingSupply}
-                  poolCapacityPercent={product.poolCapacityPercent}
-                  onInvest={() => console.log("Invest in", product.name)}
-                />
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}