diff --git a/databi/src/components/MetricCard.jsx b/databi/src/components/MetricCard.jsx
index 96af163..579cb80 100644
--- a/databi/src/components/MetricCard.jsx
+++ b/databi/src/components/MetricCard.jsx
@@ -65,10 +65,11 @@ function MetricSubValues({ items }) {
 }
 
 function MetricDelta({ compact = false, item }) {
+  const tone = item.deltaTone || (String(item.delta || "").trim().startsWith("-") ? "down" : "up");
   return (
-    <div className={["metric-delta", compact ? "metric-delta--compact" : "", item.deltaTone === "down" ? "metric-delta--down" : ""].filter(Boolean).join(" ")}>
+    <div className={["metric-delta", compact ? "metric-delta--compact" : "", tone === "down" ? "metric-delta--down" : ""].filter(Boolean).join(" ")}>
       <span>{item.caption}</span>
-      <b className={item.delta ? "" : "metric-delta-empty"}>{item.delta ? `${item.deltaTone === "down" ? "↓" : "↑"} ${item.delta.replace(/^[-+]/, "")}` : "--"}</b>
+      <b className={item.delta ? "" : "metric-delta-empty"}>{item.delta ? `${tone === "down" ? "↓" : "↑"} ${item.delta.replace(/^[-+]/, "")}` : "--"}</b>
     </div>
   );
 }
diff --git a/databi/src/components/MetricCard.test.jsx b/databi/src/components/MetricCard.test.jsx
new file mode 100644
index 0000000..515fc23
--- /dev/null
+++ b/databi/src/components/MetricCard.test.jsx
@@ -0,0 +1,10 @@
+import { render, screen } from "@testing-library/react";
+import { expect, test } from "vitest";
+import { MetricCard } from "./MetricCard.jsx";
+
+test("renders a down arrow when delta text is negative", () => {
+  render(<MetricCard item={{ caption: "与昨日相比", delta: "-39.27%", label: "活跃用户", value: "116" }} />);
+
+  expect(screen.getByText("↓ 39.27%")).toBeInTheDocument();
+});
+