initial commit

components/alp/PriceHistoryCard.tsx

@@ -0,0 +1,185 @@
+"use client";
+
+import { useState, useEffect, useRef } from "react";
+import { useApp } from "@/contexts/AppContext";
+import * as echarts from "echarts";
+
+export default function PriceHistoryCard() {
+  const { t } = useApp();
+  const chartRef = useRef<HTMLDivElement>(null);
+  const chartInstance = useRef<echarts.ECharts | null>(null);
+
+  // 模拟价格数据
+  const priceData = [1.01, 1.02, 1.03, 1.02, 1.04, 1.03, 1.05, 1.04, 1.03];
+
+  useEffect(() => {
+    if (chartRef.current) {
+      chartInstance.current = echarts.init(chartRef.current);
+      updateChart();
+    }
+
+    const handleResize = () => {
+      chartInstance.current?.resize();
+    };
+    window.addEventListener("resize", handleResize);
+
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      chartInstance.current?.dispose();
+    };
+  }, []);
+
+  const updateChart = () => {
+    if (!chartInstance.current) return;
+
+    const option: echarts.EChartsOption = {
+      grid: {
+        left: 0,
+        right: 0,
+        top: 10,
+        bottom: 0,
+      },
+      tooltip: {
+        trigger: "axis",
+        show: true,
+        confine: true,
+        backgroundColor: "rgba(17, 24, 39, 0.9)",
+        borderColor: "#374151",
+        textStyle: {
+          color: "#f9fafb",
+          fontSize: 12,
+          fontWeight: 500,
+        },
+        formatter: function(params: any) {
+          const data = params[0];
+          return `<div style="padding: 4px 8px;">
+            <span style="color: #9ca3af; font-size: 11px;">Day ${data.dataIndex + 1}</span><br/>
+            <span style="color: #10b981; font-weight: 600; font-size: 14px;">${data.value} USDC</span>
+          </div>`;
+        },
+      },
+      xAxis: {
+        type: "category",
+        data: priceData.map((_, i) => i + 1),
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+      },
+      yAxis: {
+        type: "value",
+        axisLine: {
+          show: false,
+        },
+        axisTick: {
+          show: false,
+        },
+        axisLabel: {
+          show: false,
+        },
+        splitLine: {
+          show: false,
+        },
+      },
+      series: [
+        {
+          data: priceData,
+          type: "line",
+          smooth: true,
+          symbol: "circle",
+          symbolSize: 6,
+          lineStyle: {
+            color: "#10b981",
+            width: 2,
+          },
+          itemStyle: {
+            color: "#10b981",
+          },
+          areaStyle: {
+            color: {
+              type: "linear",
+              x: 0,
+              y: 0,
+              x2: 0,
+              y2: 1,
+              colorStops: [
+                { offset: 0, color: "rgba(16, 185, 129, 0.3)" },
+                { offset: 1, color: "rgba(16, 185, 129, 0)" },
+              ],
+            },
+          },
+        },
+      ],
+    };
+
+    chartInstance.current.setOption(option);
+  };
+
+  // 计算统计数据
+  const highest = Math.max(...priceData).toFixed(2);
+  const lowest = Math.min(...priceData).toFixed(2);
+  const current = priceData[priceData.length - 1].toFixed(2);
+  const avg = (priceData.reduce((a, b) => a + b, 0) / priceData.length).toFixed(2);
+
+  return (
+    <div className="bg-bg-surface dark:bg-gray-800 rounded-3xl border border-border-gray dark:border-gray-700 px-6 py-8 flex flex-col gap-6">
+      {/* Header */}
+      <div className="text-body-large font-bold text-text-primary dark:text-white">
+        {t("alp.priceHistory")}
+      </div>
+
+      {/* Content */}
+      <div className="flex flex-col gap-6">
+        {/* Info Row */}
+        <div className="flex items-center justify-between">
+          <div className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">
+            {t("alp.lastDays")}
+          </div>
+          <div className="text-caption-tiny font-bold text-[#10b981] dark:text-green-400">
+            {t("alp.avg")}: {avg} USDC
+          </div>
+        </div>
+
+        {/* ECharts Chart */}
+        <div
+          ref={chartRef}
+          className="w-full border-b border-border-gray dark:border-gray-600"
+          style={{ height: "200px" }}
+        />
+
+        {/* Stats - Vertical Layout */}
+        <div className="flex flex-col gap-3">
+          <div className="flex items-start justify-between">
+            <div className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">
+              {t("alp.highest")}
+            </div>
+            <div className="text-caption-tiny font-bold text-text-primary dark:text-white tabular-nums">
+              {highest} USDC
+            </div>
+          </div>
+          <div className="flex items-start justify-between">
+            <div className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">
+              {t("alp.lowest")}
+            </div>
+            <div className="text-caption-tiny font-bold text-text-primary dark:text-white tabular-nums">
+              {lowest} USDC
+            </div>
+          </div>
+          <div className="flex items-start justify-between">
+            <div className="text-caption-tiny font-regular text-text-tertiary dark:text-gray-400">
+              {t("alp.current")}
+            </div>
+            <div className="text-caption-tiny font-bold text-text-primary dark:text-white tabular-nums">
+              {current} USDC
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}