refactor: 合并多语言支持的显示名称字段，优化奖池手动爆发功能的返回数据结构，增强管理端权限控制

src/modules/dashboard/dashboard-visuals.tsx

@@ -123,8 +123,8 @@ export function FinanceStructureChart({
   const payoutRate = ((payout / bet) * 100).toFixed(1);
 
   const segments = [
-    { key: "win", width: winW, className: "bg-chart-2", label: t("winPayout"), value: win },
-    { key: "jackpot", width: jpW, className: "bg-chart-4", label: t("jackpotPayout"), value: jackpot },
+    { key: "win", width: winW, className: "bg-emerald-500", label: t("winPayout"), value: win },
+    { key: "jackpot", width: jpW, className: "bg-violet-500", label: t("jackpotPayout"), value: jackpot },
     { key: "gross", width: grossW, className: "bg-primary", label: t("houseGross"), value: gross },
   ].filter((s) => s.width > 0.05);
 
@@ -176,9 +176,17 @@ export function PayoutCompositionChart({
   }
 
   const winPct = (win / total) * 100;
+  const winColor = "oklch(0.62 0.17 162)";
+  const jackpotColor = "oklch(0.56 0.22 303)";
   const items = [
-    { label: t("winPayout"), value: win, pct: winPct, className: "bg-chart-2" },
-    { label: t("jackpotPayout"), value: jackpot, pct: 100 - winPct, className: "bg-chart-4" },
+    { label: t("winPayout"), value: win, pct: winPct, className: "bg-emerald-500", color: winColor },
+    {
+      label: t("jackpotPayout"),
+      value: jackpot,
+      pct: 100 - winPct,
+      className: "bg-violet-500",
+      color: jackpotColor,
+    },
   ];
 
   return (
@@ -186,7 +194,7 @@ export function PayoutCompositionChart({
       <div
         className="relative mx-auto size-36 shrink-0 rounded-full"
         style={{
-          background: `conic-gradient(from -90deg, var(--chart-2) 0deg ${winPct * 3.6}deg, var(--chart-4) ${winPct * 3.6}deg 360deg)`,
+          background: `conic-gradient(from -90deg, ${winColor} 0deg ${winPct * 3.6}deg, ${jackpotColor} ${winPct * 3.6}deg 360deg)`,
           mask: "radial-gradient(farthest-side, transparent 58%, #000 59%)",
           WebkitMask: "radial-gradient(farthest-side, transparent 58%, #000 59%)",
         }}
@@ -203,7 +211,10 @@ export function PayoutCompositionChart({
             </div>
             <p className="text-sm font-semibold tabular-nums">{formatMoney(item.value, currency)}</p>
             <div className="mt-1.5 h-1.5 overflow-hidden rounded-full bg-muted">
-              <div className={cn("h-full rounded-full", item.className)} style={{ width: `${item.pct}%` }} />
+              <div
+                className="h-full rounded-full"
+                style={{ width: `${item.pct}%`, background: item.color }}
+              />
             </div>
           </li>
         ))}
@@ -249,12 +260,12 @@ export function HotUsageBars({ rows }: { rows: AdminRiskPoolRow[] }): ReactEleme
 
 export function SoldOutRing({ buckets }: { buckets: SoldOutBuckets }): ReactElement {
   const { t } = useTranslation("dashboard");
-  const entries: { key: keyof SoldOutBuckets; label: string; color: string }[] = [
-    { key: "d4", label: t("soldOutBuckets.d4"), color: "var(--chart-1)" },
-    { key: "d3", label: t("soldOutBuckets.d3"), color: "var(--chart-2)" },
-    { key: "d2", label: t("soldOutBuckets.d2"), color: "var(--chart-3)" },
-    { key: "special", label: t("soldOutBuckets.special"), color: "var(--chart-4)" },
-    { key: "other", label: t("soldOutBuckets.other"), color: "var(--chart-5)" },
+  const entries: { key: keyof SoldOutBuckets; label: string; color: string; swatch: string }[] = [
+    { key: "d4", label: t("soldOutBuckets.d4"), color: "oklch(0.52 0.19 264)", swatch: "bg-blue-600" },
+    { key: "d3", label: t("soldOutBuckets.d3"), color: "oklch(0.62 0.17 162)", swatch: "bg-emerald-500" },
+    { key: "d2", label: t("soldOutBuckets.d2"), color: "oklch(0.72 0.16 75)", swatch: "bg-amber-500" },
+    { key: "special", label: t("soldOutBuckets.special"), color: "oklch(0.56 0.22 303)", swatch: "bg-violet-500" },
+    { key: "other", label: t("soldOutBuckets.other"), color: "oklch(0.58 0.2 25)", swatch: "bg-rose-500" },
   ];
   const total = entries.reduce((s, e) => s + buckets[e.key], 0);
 
@@ -307,7 +318,7 @@ export function SoldOutRing({ buckets }: { buckets: SoldOutBuckets }): ReactElem
             <li key={e.key}>
               <div className="mb-1 flex justify-between text-sm">
                 <span className="flex items-center gap-2 text-muted-foreground">
-                  <span className="size-2.5 rounded-sm" style={{ background: e.color }} />
+                  <span className={cn("size-2.5 rounded-sm", e.swatch)} />
                   {e.label}
                 </span>
                 <span className="font-medium tabular-nums">
@@ -381,6 +392,25 @@ export function SettlementStatusChart({
   const entries = [...counts.entries()].sort((a, b) => b[1] - a[1]);
   const max = Math.max(...entries.map((e) => e[1]));
 
+  const barTone = (status: string): string => {
+    switch (status) {
+      case "pending_review":
+        return "bg-amber-500";
+      case "approved":
+        return "bg-sky-500";
+      case "paid":
+      case "completed":
+        return "bg-emerald-600";
+      case "running":
+        return "bg-blue-500";
+      case "rejected":
+      case "failed":
+        return "bg-rose-500";
+      default:
+        return "bg-violet-500";
+    }
+  };
+
   return (
     <ul className="space-y-3">
       {entries.map(([status, count]) => (
@@ -391,7 +421,7 @@ export function SettlementStatusChart({
           </div>
           <div className="h-2 overflow-hidden rounded-full bg-muted">
             <div
-              className="h-full rounded-full bg-primary/80"
+              className={cn("h-full rounded-full transition-all", barTone(status))}
               style={{ width: `${max > 0 ? (count / max) * 100 : 0}%` }}
             />
           </div>