大改变

2026-02-03 19:56:21 +08:00
parent 4b13d255bc
commit 9aa9e44295
545 changed files with 8712 additions and 16168 deletions
--- a/components/transparency/AssetDistribution.tsx
+++ b/components/transparency/AssetDistribution.tsx
@@ -0,0 +1,192 @@
+"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 legends = [
+    { nameKey: "transparency.fixedIncome", color: "bg-[#1447e6]" },
+    { nameKey: "transparency.alternativeAssets", color: "bg-[#10b981]" },
+    { nameKey: "transparency.alternativeCredit", color: "bg-[#ff6900]" },
+  ];
+
+  useEffect(() => {
+    if (!chartRef.current) return;
+
+    const chart = echarts.init(chartRef.current, null, {
+      renderer: "svg",
+    });
+
+    const option = {
+      series: [
+        {
+          type: "pie",
+          radius: ["45%", "70%"],
+          center: ["50%", "50%"],
+          avoidLabelOverlap: true,
+          itemStyle: {
+            borderRadius: 0,
+            borderColor: "transparent",
+            borderWidth: 0,
+          },
+          label: {
+            show: true,
+            position: "outside",
+            alignTo: "none",
+            formatter: (params: any) => {
+              return `{name|${params.name}}\n{line|}\n{value|${params.data.displayValue}}`;
+            },
+            rich: {
+              name: {
+                fontSize: 14,
+                fontWeight: "bold",
+                color: "#0f172b",
+                lineHeight: 20,
+              },
+              line: {
+                height: 1,
+                width: 100,
+                backgroundColor: "transparent",
+              },
+              value: {
+                fontSize: 12,
+                fontWeight: "500",
+                lineHeight: 18,
+              },
+            },
+          },
+          labelLine: {
+            show: true,
+            length: 20,
+            length2: 60,
+            lineStyle: {
+              width: 1,
+            },
+          },
+          emphasis: {
+            disabled: true,
+          },
+          data: [
+            {
+              value: 52.7,
+              name: t("transparency.usTreasuryBills"),
+              displayValue: "$140M (30.1%)",
+              itemStyle: {
+                color: "#1447e6",
+              },
+              label: {
+                rich: {
+                  value: {
+                    color: "#1447e6",
+                  },
+                },
+              },
+              labelLine: {
+                lineStyle: {
+                  color: "#1447e6",
+                },
+              },
+            },
+            {
+              value: 30.1,
+              name: t("transparency.realEstate"),
+              displayValue: "$140M (30.1%)",
+              itemStyle: {
+                color: "#10b981",
+              },
+              label: {
+                rich: {
+                  value: {
+                    color: "#10b981",
+                  },
+                },
+              },
+              labelLine: {
+                lineStyle: {
+                  color: "#10b981",
+                },
+              },
+            },
+            {
+              value: 17.2,
+              name: t("transparency.privateCredit"),
+              displayValue: "$80M (17.2%)",
+              itemStyle: {
+                color: "#ff6900",
+              },
+              label: {
+                rich: {
+                  value: {
+                    color: "#ff6900",
+                  },
+                },
+              },
+              labelLine: {
+                lineStyle: {
+                  color: "#ff6900",
+                },
+              },
+            },
+          ],
+          animationType: "expansion",
+          animationEasing: "cubicOut",
+          animationDuration: 1000,
+        },
+      ],
+    };
+
+    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-[210px] w-full">
+          <div ref={chartRef} className="w-full h-full" />
+          {/* Center 100 */}
+          <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-[40px] font-bold text-text-primary dark:text-white leading-[130%] tracking-[-0.01em] pointer-events-none">
+            100
+          </div>
+        </div>
+
+        {/* Legends */}
+        <div className="flex items-center justify-center gap-6">
+          {legends.map((legend, index) => (
+            <div key={index} className="flex items-center gap-2">
+              <div className={`w-3 h-3 rounded-full ${legend.color}`} />
+              <span className="text-body-small font-regular text-text-primary dark:text-white leading-[150%]">
+                {t(legend.nameKey)}
+              </span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}