initial commit

2026-02-04 13:39:12 +08:00
commit 199940e958
175 changed files with 19963 additions and 0 deletions
--- a/components/transparency/AssetDistribution.tsx
+++ b/components/transparency/AssetDistribution.tsx
@@ -0,0 +1,178 @@
+"use client";
+
+import { useApp } from "@/contexts/AppContext";
+import { useEffect, useRef } from "react";
+import * as echarts from "echarts";
+
+export default function AssetDistribution() {
+  const { t } = useApp();
+  const chartRef = useRef<HTMLDivElement>(null);
+
+  const data = [
+    {
+      value: 52.7,
+      name: t("transparency.fixedIncome"),
+      itemStyle: {
+        color: "#1447e6",
+      },
+    },
+    {
+      value: 30.1,
+      name: t("transparency.alternativeAssets"),
+      itemStyle: {
+        color: "#10b981",
+      },
+    },
+    {
+      value: 17.2,
+      name: t("transparency.alternativeCredit"),
+      itemStyle: {
+        color: "#ff6900",
+      },
+    },
+  ];
+
+  useEffect(() => {
+    if (!chartRef.current) return;
+
+    const chart = echarts.init(chartRef.current, null, {
+      renderer: "svg",
+    });
+
+    const option = {
+      tooltip: {
+        trigger: "item",
+        backgroundColor: "rgba(255, 255, 255, 0.95)",
+        borderColor: "rgba(0, 0, 0, 0.1)",
+        borderWidth: 1,
+        padding: [12, 16],
+        textStyle: {
+          color: "#0f172b",
+          fontSize: 13,
+        },
+        formatter: (params: any) => {
+          return `
+            <div style="font-weight: 600; margin-bottom: 4px;">${params.name}</div>
+            <div style="color: ${params.color}; font-weight: 700; font-size: 15px;">${params.data.value}%</div>
+          `;
+        },
+      },
+      legend: {
+        top: "bottom",
+        left: "center",
+        itemWidth: 12,
+        itemHeight: 12,
+        itemGap: 16,
+        textStyle: {
+          fontSize: 13,
+          color: "#64748b",
+        },
+        icon: "circle",
+        inactiveColor: "#cbd5e1",
+      },
+      series: [
+        {
+          name: "Asset Distribution",
+          type: "pie",
+          radius: ["40%", "70%"],
+          center: ["50%", "45%"],
+          avoidLabelOverlap: false,
+          padAngle: 6,
+          itemStyle: {
+            borderRadius: 12,
+            borderColor: "#fff",
+            borderWidth: 3,
+          },
+          label: {
+            show: true,
+            position: "outside",
+            alignTo: "none",
+            formatter: (params: any) => {
+              return `{name|${params.name}}\n{line|}\n{value|${params.value}%}`;
+            },
+            rich: {
+              name: {
+                fontSize: 14,
+                fontWeight: "bold",
+                color: "#0f172b",
+                lineHeight: 20,
+              },
+              line: {
+                height: 1,
+                width: 80,
+                backgroundColor: "transparent",
+              },
+              value: {
+                fontSize: 13,
+                fontWeight: "600",
+                color: params => params.color,
+                lineHeight: 18,
+              },
+            },
+          },
+          labelLine: {
+            show: true,
+            length: 15,
+            length2: 50,
+            lineStyle: {
+              width: 1.5,
+            },
+          },
+          emphasis: {
+            scale: true,
+            scaleSize: 6,
+            itemStyle: {
+              shadowBlur: 20,
+              shadowColor: "rgba(0, 0, 0, 0.2)",
+            },
+            label: {
+              show: true,
+              fontSize: 40,
+              fontWeight: "bold",
+              color: "#0f172b",
+              lineHeight: 48,
+            },
+          },
+          data: data,
+          animationType: "expansion",
+          animationEasing: "cubicOut",
+          animationDuration: 800,
+        },
+      ],
+    };
+
+    chart.setOption(option);
+
+    const handleResize = () => {
+      chart.resize();
+    };
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      chart.dispose();
+    };
+  }, [t]);
+
+  return (
+    <div className="flex-1 bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 p-6 flex flex-col gap-6">
+      {/* Header */}
+      <div className="flex flex-col gap-0">
+        <h3 className="text-[20px] font-bold text-text-primary dark:text-white leading-[140%]">
+          {t("transparency.assetDistribution")}
+        </h3>
+        <p className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400 leading-[150%] tracking-[0.01em]">
+          {t("transparency.distributionSubtitle")}
+        </p>
+      </div>
+
+      {/* Pie Chart Section */}
+      <div className="flex flex-col gap-3">
+        {/* ECharts Pie Chart */}
+        <div className="relative h-[260px] w-full">
+          <div ref={chartRef} className="w-full h-full" />
+        </div>
+      </div>
+    </div>
+  );
+}