调整首页页面布局

2026-06-01 16:02:27 +08:00
parent e0bdcabbfe
commit 9f74483345
11 changed files with 967 additions and 553 deletions
--- a/src/components/charts/SimpleLineChart.tsx
+++ b/src/components/charts/SimpleLineChart.tsx
@@ -0,0 +1,193 @@
+"use client"
+
+import { useMemo, useState } from "react"
+
+interface SimpleLineChartProps {
+  data: Record<string, string | number>[]
+  dataKey: string
+  xAxisKey: string
+  stroke?: string
+  height?: number
+}
+
+export function SimpleLineChart({
+  data,
+  dataKey,
+  xAxisKey,
+  stroke = "#3b82f6",
+  height = 250,
+}: SimpleLineChartProps) {
+  const [tooltip, setTooltip] = useState<{
+    x: number
+    y: number
+    label: string
+    value: number
+  } | null>(null)
+
+  const padding = { top: 20, right: 20, bottom: 40, left: 50 }
+  const chartWidth = 600
+  const chartHeight = height
+  const innerWidth = chartWidth - padding.left - padding.right
+  const innerHeight = chartHeight - padding.top - padding.bottom
+
+  const { points, xLabels, yLabels } = useMemo(() => {
+    if (data.length === 0) return { points: [], xLabels: [], yLabels: [] }
+
+    const values = data.map(d => Number(d[dataKey]) || 0)
+    const maxVal = Math.max(...values, 1)
+    const yMax = Math.ceil(maxVal * 1.2)
+
+    const step = innerWidth / Math.max(data.length - 1, 1)
+
+    const pts = data.map((d, i) => ({
+      x: padding.left + i * step,
+      y: padding.top + innerHeight - (Number(d[dataKey]) / yMax) * innerHeight,
+    }))
+
+    const xLbls = data.map((d, i) => ({
+      x: padding.left + i * step,
+      label: String(d[xAxisKey] ?? ""),
+    }))
+
+    const yTickCount = 5
+    const yLbls = Array.from({ length: yTickCount + 1 }, (_, i) => {
+      const val = Math.round((yMax / yTickCount) * i)
+      return {
+        y: padding.top + innerHeight - (val / yMax) * innerHeight,
+        label: String(val),
+      }
+    })
+
+    return { points: pts, xLabels: xLbls, yLabels: yLbls }
+  }, [data, dataKey, xAxisKey, innerWidth, innerHeight])
+
+  if (data.length === 0) {
+    return (
+      <div
+        className="flex items-center justify-center text-muted-foreground text-sm"
+        style={{ height }}
+      >
+        暂无数据
+      </div>
+    )
+  }
+
+  const linePath = points
+    .map((p, i) => `${i === 0 ? "M" : "L"} ${p.x} ${p.y}`)
+    .join(" ")
+  const areaPath =
+    points.length > 0
+      ? `${linePath} L ${points[points.length - 1].x} ${padding.top + innerHeight} L ${points[0].x} ${padding.top + innerHeight} Z`
+      : ""
+
+  return (
+    <div className="relative" style={{ height }}>
+      <svg
+        viewBox={`0 0 ${chartWidth} ${chartHeight}`}
+        className="w-full h-full"
+        preserveAspectRatio="xMidYMid meet"
+      >
+        <defs>
+          <linearGradient
+            id={`area-${stroke.replace("#", "")}`}
+            x1="0"
+            y1="0"
+            x2="0"
+            y2="1"
+          >
+            <stop offset="0%" stopColor={stroke} stopOpacity={0.2} />
+            <stop offset="100%" stopColor={stroke} stopOpacity={0} />
+          </linearGradient>
+        </defs>
+
+        {yLabels.map(yl => (
+          <g key={yl.label}>
+            <line
+              x1={padding.left}
+              y1={yl.y}
+              x2={padding.left + innerWidth}
+              y2={yl.y}
+              stroke="hsl(var(--border))"
+              strokeDasharray="4 4"
+              strokeWidth={0.5}
+            />
+            <text
+              x={padding.left - 8}
+              y={yl.y + 4}
+              textAnchor="end"
+              className="fill-muted-foreground"
+              fontSize={11}
+            >
+              {yl.label}
+            </text>
+          </g>
+        ))}
+
+        <path d={areaPath} fill={`url(#area-${stroke.replace("#", "")})`} />
+
+        <path
+          d={linePath}
+          fill="none"
+          stroke={stroke}
+          strokeWidth={2}
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+
+        {points.map((p, i) => (
+          <circle
+            key={i}
+            cx={p.x}
+            cy={p.y}
+            r={3}
+            fill="#fff"
+            stroke={stroke}
+            strokeWidth={2}
+            role="button"
+            aria-label={`${String(data[i]?.[xAxisKey] ?? "")}: ${Number(data[i]?.[dataKey]) || 0}`}
+            className="cursor-pointer"
+            onMouseEnter={() =>
+              setTooltip({
+                x: p.x,
+                y: p.y,
+                label: String(data[i]?.[xAxisKey] ?? ""),
+                value: Number(data[i]?.[dataKey]) || 0,
+              })
+            }
+            onMouseLeave={() => setTooltip(null)}
+          />
+        ))}
+
+        {xLabels.map((xl, i) =>
+          i % Math.ceil(xLabels.length / 7) === 0 ||
+          i === xLabels.length - 1 ? (
+            <text
+              key={i}
+              x={xl.x}
+              y={padding.top + innerHeight + 20}
+              textAnchor="middle"
+              className="fill-muted-foreground"
+              fontSize={11}
+            >
+              {xl.label}
+            </text>
+          ) : null,
+        )}
+      </svg>
+
+      {tooltip && (
+        <div
+          className="absolute pointer-events-none bg-popover border rounded-md px-2 py-1 text-xs shadow-sm"
+          style={{
+            left: `${((tooltip.x / chartWidth) * 100).toFixed(1)}%`,
+            top: tooltip.y - 30,
+            transform: "translate(-50%, -100%)",
+          }}
+        >
+          <div className="text-muted-foreground">{tooltip.label}</div>
+          <div className="font-semibold">{tooltip.value}</div>
+        </div>
+      )}
+    </div>
+  )
+}