资源撤回，系统消息

.claude/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.0.1",
+  "configurations": [
+    {
+      "name": "admin-platform",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run", "dev"],
+      "port": 7001
+    }
+  ]
+}

contracts/admin-openapi.json

@@ -15,7 +15,17 @@
                 "operationId": "listAchievementDefinitions",
                 "responses": {
                     "200": {
-                        "$ref": "#/components/responses/EmptyResponse"
+                        "description": "批量创建的礼物",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "type": "array",
+                                    "items": {
+                                        "type": "object"
+                                    }
+                                }
+                            }
+                        }
                     }
                 },
                 "x-permission": "achievement:view",
@@ -25,7 +35,17 @@
                 "operationId": "createAchievementDefinition",
                 "responses": {
                     "200": {
-                        "$ref": "#/components/responses/EmptyResponse"
+                        "description": "批量删除的资源",
+                        "content": {
+                            "application/json": {
+                                "schema": {
+                                    "type": "array",
+                                    "items": {
+                                        "type": "object"
+                                    }
+                                }
+                            }
+                        }
                     }
                 },
                 "x-permission": "achievement:create",
@@ -817,6 +837,38 @@
                 "x-permissions": ["bd:create"]
             }
         },
+        "/admin/managers/{user_id}": {
+            "put": {
+                "operationId": "updateManager",
+                "parameters": [
+                    {
+                        "in": "path",
+                        "name": "user_id",
+                        "required": true,
+                        "schema": {
+                            "type": "integer"
+                        }
+                    }
+                ],
+                "requestBody": {
+                    "required": true,
+                    "content": {
+                        "application/json": {
+                            "schema": {
+                                "$ref": "#/components/schemas/UpdateManagerPayload"
+                            }
+                        }
+                    }
+                },
+                "responses": {
+                    "200": {
+                        "$ref": "#/components/responses/ManagerResponse"
+                    }
+                },
+                "x-permission": "bd:update",
+                "x-permissions": ["bd:update"]
+            }
+        },
         "/admin/agencies": {
             "get": {
                 "operationId": "listAgencies",
@@ -2321,6 +2373,21 @@
                 "x-permissions": ["gift:create"]
             }
         },
+        "/admin/gifts/batch": {
+            "post": {
+                "operationId": "batchCreateGifts",
+                "requestBody": {
+                    "$ref": "#/components/requestBodies/BatchCreateGiftsRequest"
+                },
+                "responses": {
+                    "200": {
+                        "$ref": "#/components/responses/EmptyResponse"
+                    }
+                },
+                "x-permission": "gift:create",
+                "x-permissions": ["gift:create"]
+            }
+        },
         "/admin/gifts/{gift_id}": {
             "put": {
                 "operationId": "updateGift",
@@ -2614,6 +2681,39 @@
             },
             "post": {
                 "operationId": "createCoinAdjustment",
+                "requestBody": {
+                    "required": true,
+                    "content": {
+                        "application/json": {
+                            "schema": {
+                                "type": "object",
+                                "required": ["amount", "targetUserId", "reason", "remark"],
+                                "properties": {
+                                    "amount": {
+                                        "type": "integer",
+                                        "format": "int64"
+                                    },
+                                    "commandId": {
+                                        "type": "string"
+                                    },
+                                    "reason": {
+                                        "type": "string",
+                                        "minLength": 1
+                                    },
+                                    "remark": {
+                                        "type": "string",
+                                        "minLength": 1,
+                                        "maxLength": 512
+                                    },
+                                    "targetUserId": {
+                                        "type": "string",
+                                        "minLength": 1
+                                    }
+                                }
+                            }
+                        }
+                    }
+                },
                 "responses": {
                     "200": {
                         "$ref": "#/components/responses/EmptyResponse"
@@ -2728,13 +2828,25 @@
                                     "summary": { "type": "string" },
                                     "target_scope": {
                                         "type": "string",
-                                        "enum": ["all_active_users", "single_user", "user_ids", "region", "country"]
+                                        "enum": [
+                                            "all_registered_users",
+                                            "all_active_users",
+                                            "single_user",
+                                            "user_ids",
+                                            "region",
+                                            "country"
+                                        ]
                                     },
                                     "target_user_id": { "type": "integer", "format": "int64" },
                                     "title": { "type": "string" },
                                     "user_ids": {
                                         "type": "array",
-                                        "items": { "type": "integer", "format": "int64" }
+                                        "items": {
+                                            "oneOf": [
+                                                { "type": "integer", "format": "int64" },
+                                                { "type": "string", "pattern": "^[1-9][0-9]*$" }
+                                            ]
+                                        }
                                     }
                                 }
                             }
@@ -2825,6 +2937,234 @@
                 "x-permissions": ["payment-bill:view"]
             }
         },
+        "/admin/payment/recharge-bills/overview": {
+            "get": {
+                "operationId": "getRechargeBillOverview",
+                "parameters": [
+                    {
+                        "in": "query",
+                        "name": "keyword",
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "in": "query",
+                        "name": "recharge_type",
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "in": "query",
+                        "name": "status",
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "in": "query",
+                        "name": "region_id",
+                        "schema": {
+                            "type": "integer"
+                        }
+                    },
+                    {
+                        "in": "query",
+                        "name": "start_at_ms",
+                        "schema": {
+                            "type": "integer"
+                        }
+                    },
+                    {
+                        "in": "query",
+                        "name": "end_at_ms",
+                        "schema": {
+                            "type": "integer"
+                        }
+                    },
+                    {
+                        "in": "query",
+                        "name": "tz_offset_minutes",
+                        "schema": {
+                            "type": "integer"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "$ref": "#/components/responses/EmptyResponse"
+                    }
+                },
+                "x-permission": "payment-bill:view",
+                "x-permissions": ["payment-bill:view"]
+            }
+        },
+        "/admin/payment/recharge-bills/summary": {
+            "get": {
+                "operationId": "getRechargeBillSummary",
+                "parameters": [
+                    {
+                        "in": "query",
+                        "name": "keyword",
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "in": "query",
+                        "name": "recharge_type",
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "in": "query",
+                        "name": "status",
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "in": "query",
+                        "name": "region_id",
+                        "schema": {
+                            "type": "integer"
+                        }
+                    },
+                    {
+                        "in": "query",
+                        "name": "start_at_ms",
+                        "schema": {
+                            "type": "integer"
+                        }
+                    },
+                    {
+                        "in": "query",
+                        "name": "end_at_ms",
+                        "schema": {
+                            "type": "integer"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "$ref": "#/components/responses/EmptyResponse"
+                    }
+                },
+                "x-permission": "payment-bill:view",
+                "x-permissions": ["payment-bill:view"]
+            }
+        },
+        "/admin/payment/recharge-bills/export": {
+            "get": {
+                "operationId": "exportRechargeBills",
+                "parameters": [
+                    {
+                        "in": "query",
+                        "name": "keyword",
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "in": "query",
+                        "name": "recharge_type",
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "in": "query",
+                        "name": "status",
+                        "schema": {
+                            "type": "string"
+                        }
+                    },
+                    {
+                        "in": "query",
+                        "name": "region_id",
+                        "schema": {
+                            "type": "integer"
+                        }
+                    },
+                    {
+                        "in": "query",
+                        "name": "start_at_ms",
+                        "schema": {
+                            "type": "integer"
+                        }
+                    },
+                    {
+                        "in": "query",
+                        "name": "end_at_ms",
+                        "schema": {
+                            "type": "integer"
+                        }
+                    }
+                ],
+                "responses": {
+                    "200": {
+                        "$ref": "#/components/responses/EmptyResponse"
+                    }
+                },
+                "x-permission": "payment-bill:view",
+                "x-permissions": ["payment-bill:view"]
+            }
+        },
+        "/admin/payment/recharge-bills/google-paid/refresh": {
+            "post": {
+                "operationId": "refreshGoogleRechargePaid",
+                "requestBody": {
+                    "content": {
+                        "application/json": {
+                            "schema": {
+                                "type": "object",
+                                "properties": {
+                                    "transactionIds": {
+                                        "type": "array",
+                                        "items": { "type": "string" }
+                                    }
+                                },
+                                "required": ["transactionIds"]
+                            }
+                        }
+                    },
+                    "required": true
+                },
+                "responses": {
+                    "200": {
+                        "$ref": "#/components/responses/EmptyResponse"
+                    }
+                },
+                "x-permission": "payment-bill:view",
+                "x-permissions": ["payment-bill:view"]
+            }
+        },
+        "/admin/payment/recharge-regions": {
+            "get": {
+                "operationId": "listRechargeRegions",
+                "responses": {
+                    "200": {
+                        "$ref": "#/components/responses/EmptyResponse"
+                    }
+                },
+                "x-permission": "payment-bill:view",
+                "x-permissions": ["payment-bill:view"]
+            }
+        },
+        "/admin/payment/recharge-apps": {
+            "get": {
+                "operationId": "listRechargeApps",
+                "responses": {
+                    "200": {
+                        "$ref": "#/components/responses/EmptyResponse"
+                    }
+                },
+                "x-permission": "payment-bill:view",
+                "x-permissions": ["payment-bill:view"]
+            }
+        },
         "/admin/payment/recharge-products": {
             "get": {
                 "operationId": "listRechargeProducts",
@@ -2889,6 +3229,76 @@
                 "x-permissions": ["payment-product:delete"]
             }
         },
+        "/admin/databi/social/master": {
+            "get": {
+                "operationId": "getSocialBiMaster",
+                "x-permission": "overview:view",
+                "responses": {
+                    "200": {
+                        "$ref": "#/components/responses/StatisticsObjectResponse"
+                    }
+                },
+                "x-permissions": ["overview:view"]
+            }
+        },
+        "/admin/databi/social/overview": {
+            "get": {
+                "operationId": "getSocialBiOverview",
+                "x-permission": "overview:view",
+                "parameters": [
+                    { "in": "query", "name": "stat_tz", "schema": { "type": "string" } },
+                    { "in": "query", "name": "start_ms", "schema": { "type": "integer", "format": "int64" } },
+                    { "in": "query", "name": "end_ms", "schema": { "type": "integer", "format": "int64" } },
+                    { "in": "query", "name": "app_codes", "schema": { "type": "string" } },
+                    { "in": "query", "name": "region_id", "schema": { "type": "integer", "format": "int64" } }
+                ],
+                "responses": {
+                    "200": {
+                        "$ref": "#/components/responses/StatisticsObjectResponse"
+                    }
+                },
+                "x-permissions": ["overview:view"]
+            }
+        },
+        "/admin/databi/social/funnel": {
+            "get": {
+                "operationId": "getSocialBiFunnel",
+                "x-permission": "overview:view",
+                "parameters": [
+                    { "in": "query", "name": "stat_tz", "schema": { "type": "string" } },
+                    { "in": "query", "name": "start_ms", "schema": { "type": "integer", "format": "int64" } },
+                    { "in": "query", "name": "end_ms", "schema": { "type": "integer", "format": "int64" } },
+                    { "in": "query", "name": "app_codes", "schema": { "type": "string" } },
+                    { "in": "query", "name": "region_id", "schema": { "type": "integer", "format": "int64" } }
+                ],
+                "responses": {
+                    "200": {
+                        "$ref": "#/components/responses/StatisticsObjectResponse"
+                    }
+                },
+                "x-permissions": ["overview:view"]
+            }
+        },
+        "/admin/databi/social/kpi": {
+            "get": {
+                "operationId": "getSocialBiKpi",
+                "x-permission": "overview:view",
+                "parameters": [
+                    { "in": "query", "name": "stat_tz", "schema": { "type": "string" } },
+                    { "in": "query", "name": "start_ms", "schema": { "type": "integer", "format": "int64" } },
+                    { "in": "query", "name": "end_ms", "schema": { "type": "integer", "format": "int64" } },
+                    { "in": "query", "name": "period_month", "schema": { "type": "string" } },
+                    { "in": "query", "name": "app_codes", "schema": { "type": "string" } },
+                    { "in": "query", "name": "operator_user_id", "schema": { "type": "integer", "format": "int64" } }
+                ],
+                "responses": {
+                    "200": {
+                        "$ref": "#/components/responses/StatisticsObjectResponse"
+                    }
+                },
+                "x-permissions": ["overview:view"]
+            }
+        },
         "/admin/finance/scope": {
             "get": {
                 "operationId": "getFinanceScope",
@@ -3778,6 +4188,21 @@
                 "x-permissions": ["resource:create"]
             }
         },
+        "/admin/resources/batch-delete": {
+            "post": {
+                "operationId": "batchDeleteResources",
+                "requestBody": {
+                    "$ref": "#/components/requestBodies/BatchDeleteResourcesRequest"
+                },
+                "responses": {
+                    "200": {
+                        "$ref": "#/components/responses/EmptyResponse"
+                    }
+                },
+                "x-permission": "resource:delete",
+                "x-permissions": ["resource:delete"]
+            }
+        },
         "/admin/resources/{resource_id}": {
             "get": {
                 "operationId": "getResource",
@@ -3818,6 +4243,26 @@
                 ],
                 "x-permission": "resource:update",
                 "x-permissions": ["resource:update"]
+            },
+            "delete": {
+                "operationId": "deleteResource",
+                "responses": {
+                    "200": {
+                        "$ref": "#/components/responses/EmptyResponse"
+                    }
+                },
+                "parameters": [
+                    {
+                        "in": "path",
+                        "name": "resource_id",
+                        "required": true,
+                        "schema": {
+                            "type": "integer"
+                        }
+                    }
+                ],
+                "x-permission": "resource:delete",
+                "x-permissions": ["resource:delete"]
             }
         },
         "/admin/resources/{resource_id}/disable": {
@@ -5508,6 +5953,42 @@
             }
         },
         "requestBodies": {
+            "BatchCreateGiftsRequest": {
+                "content": {
+                    "application/json": {
+                        "schema": {
+                            "type": "object",
+                            "required": ["items"],
+                            "properties": {
+                                "items": {
+                                    "type": "array",
+                                    "items": {
+                                        "type": "object"
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            },
+            "BatchDeleteResourcesRequest": {
+                "content": {
+                    "application/json": {
+                        "schema": {
+                            "type": "object",
+                            "required": ["resourceIds"],
+                            "properties": {
+                                "resourceIds": {
+                                    "type": "array",
+                                    "items": {
+                                        "type": "integer"
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            },
             "BatchStatusRequest": {
                 "content": {
                     "application/json": {
@@ -6827,6 +7308,36 @@
                     "bdLeaderCount": {
                         "type": "integer"
                     },
+                    "canAddAdmin": {
+                        "type": "boolean"
+                    },
+                    "canAddBdLeader": {
+                        "type": "boolean"
+                    },
+                    "canAddSuperadmin": {
+                        "type": "boolean"
+                    },
+                    "canBlockUser": {
+                        "type": "boolean"
+                    },
+                    "canGrantAvatarFrame": {
+                        "type": "boolean"
+                    },
+                    "canGrantBadge": {
+                        "type": "boolean"
+                    },
+                    "canGrantVehicle": {
+                        "type": "boolean"
+                    },
+                    "canGrantVip": {
+                        "type": "boolean"
+                    },
+                    "canTransferUserCountry": {
+                        "type": "boolean"
+                    },
+                    "canUpdateUserLevel": {
+                        "type": "boolean"
+                    },
                     "createdAtMs": {
                         "type": "integer"
                     },
@@ -6864,6 +7375,36 @@
                 "type": "object",
                 "required": ["targetUserId"],
                 "properties": {
+                    "canAddAdmin": {
+                        "type": "boolean"
+                    },
+                    "canAddBdLeader": {
+                        "type": "boolean"
+                    },
+                    "canAddSuperadmin": {
+                        "type": "boolean"
+                    },
+                    "canBlockUser": {
+                        "type": "boolean"
+                    },
+                    "canGrantAvatarFrame": {
+                        "type": "boolean"
+                    },
+                    "canGrantBadge": {
+                        "type": "boolean"
+                    },
+                    "canGrantVehicle": {
+                        "type": "boolean"
+                    },
+                    "canGrantVip": {
+                        "type": "boolean"
+                    },
+                    "canTransferUserCountry": {
+                        "type": "boolean"
+                    },
+                    "canUpdateUserLevel": {
+                        "type": "boolean"
+                    },
                     "contact": {
                         "type": "string",
                         "maxLength": 128
@@ -6873,6 +7414,49 @@
                     }
                 }
             },
+            "UpdateManagerPayload": {
+                "type": "object",
+                "properties": {
+                    "canAddAdmin": {
+                        "type": "boolean"
+                    },
+                    "canAddBdLeader": {
+                        "type": "boolean"
+                    },
+                    "canAddSuperadmin": {
+                        "type": "boolean"
+                    },
+                    "canBlockUser": {
+                        "type": "boolean"
+                    },
+                    "canGrantAvatarFrame": {
+                        "type": "boolean"
+                    },
+                    "canGrantBadge": {
+                        "type": "boolean"
+                    },
+                    "canGrantVehicle": {
+                        "type": "boolean"
+                    },
+                    "canGrantVip": {
+                        "type": "boolean"
+                    },
+                    "canTransferUserCountry": {
+                        "type": "boolean"
+                    },
+                    "canUpdateUserLevel": {
+                        "type": "boolean"
+                    },
+                    "contact": {
+                        "type": "string",
+                        "maxLength": 128
+                    },
+                    "status": {
+                        "type": "string",
+                        "enum": ["active", "disabled"]
+                    }
+                }
+            },
             "BDProfile": {
                 "type": "object",
                 "required": ["userId"],

databi/social/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>HYApp Social BI</title>
+    <title>运营数据总览</title>
   </head>
   <body>
     <div id="databi-root"></div>

databi/src/DatabiApp.jsx

@@ -11,7 +11,7 @@ import { ReportOverview } from "./components/ReportOverview.jsx";
 import { EmptyReportSection, ReportSidebar } from "./components/ReportSidebar.jsx";
 import { RevenueTrendPanel } from "./components/RevenueTrendPanel.jsx";
 import { SelfGameScreen } from "./components/SelfGameScreen.jsx";
-import { SocialBiDashboard } from "./components/SocialBiDashboard.jsx";
+import { SocialBiApp } from "./social/SocialBiApp.jsx";
 import { createDashboardModel } from "./data/createDashboardModel.js";
 import { lastDaysRange, rangeEndMs, rangeStartMs, readStoredTimeZone, sameRange, thisMonthRange, TIME_ZONE_OPTIONS, todayRange, writeStoredTimeZone } from "./utils/time.js";
 
@@ -23,7 +23,7 @@ const initialFilterOptions = {
 
 export function DatabiApp() {
   if (isSocialBiPath()) {
-    return <SocialBiDashboard />;
+    return <SocialBiApp />;
   }
   return <DatabiOverviewApp />;
 }

databi/src/DatabiApp.test.jsx

@@ -1,11 +1,23 @@
 import { act, render, screen, within } from "@testing-library/react";
 import { afterEach, beforeEach, expect, test, vi } from "vitest";
 import { DatabiApp } from "./DatabiApp.jsx";
-import { fetchFilterOptions, fetchSelfGameStatisticsOverview, fetchSocialBiFilterOptions, fetchStatisticsOverview } from "./api.js";
+import {
+  fetchFilterOptions,
+  fetchSelfGameStatisticsOverview,
+  fetchSocialBiFunnel,
+  fetchSocialBiKpi,
+  fetchSocialBiMaster,
+  fetchSocialBiOverview,
+  fetchStatisticsOverview
+} from "./api.js";
 
 vi.mock("./api.js", () => ({
   fetchFilterOptions: vi.fn(),
   fetchSocialBiFilterOptions: vi.fn(),
+  fetchSocialBiFunnel: vi.fn(),
+  fetchSocialBiKpi: vi.fn(),
+  fetchSocialBiMaster: vi.fn(),
+  fetchSocialBiOverview: vi.fn(),
   fetchSelfGameStatisticsOverview: vi.fn(),
   fetchStatisticsOverview: vi.fn(),
   getCurrentAppCode: vi.fn(() => "lalu"),
@@ -36,15 +48,16 @@ beforeEach(() => {
     regionOptions: [{ countryCodes: [], id: "all", label: "全部区域", value: "all" }]
   });
   fetchSelfGameStatisticsOverview.mockResolvedValue({});
-  fetchSocialBiFilterOptions.mockResolvedValue({
-    appOptions: [
-      { label: "全部 App", value: "all" },
-      { label: "Lalu", value: "lalu" },
-      { label: "Aslan", value: "aslan" },
-      { label: "Yumi", value: "yumi" }
-    ],
-    operatorOptions: [{ label: "全部人员", searchText: "all 全部人员", value: "all" }]
+  fetchSocialBiMaster.mockResolvedValue({
+    access: { all: true, scopes: [] },
+    apps: [],
+    operators: [],
+    permissions: {},
+    regions: []
   });
+  fetchSocialBiOverview.mockResolvedValue({ access: { all: true, scopes: [] }, apps: [] });
+  fetchSocialBiFunnel.mockResolvedValue({ access: { all: true, scopes: [] }, apps: [] });
+  fetchSocialBiKpi.mockResolvedValue({ items: [], period_month: "2026-06", summary: {} });
 });
 
 afterEach(() => {
@@ -212,65 +225,222 @@ test("renders real-room robot gift cards in a separate row", async () => {
 
 test("routes databi social page to Social BI and loads real overview rows", async () => {
   window.history.pushState(null, "", "/databi/social/");
-  fetchStatisticsOverview.mockImplementation(async ({ appCode }) => ({
-    active_users: appCode === "lalu" ? 20 : 10,
-    app_name: appCode === "lalu" ? "Lalu" : appCode === "aslan" ? "Aslan" : "Yumi",
+  const laluTotal = {
+    active_users: 20,
     arpu_usd_minor: 410,
-    arppu_usd_minor: appCode === "aslan" ? null : 615,
+    arppu_usd_minor: 615,
     avg_mic_online_ms: 120_000,
-    coin_seller_recharge_usd_minor: 3400,
-    coin_seller_stock_coin: 400_000,
-    coin_seller_transfer_coin: 160_000,
-    coin_total: appCode === "aslan" ? 5000 : null,
     consumed_coin: 900_000,
     consume_output_delta: 450_000,
     consume_output_ratio: 0.5,
-    country_breakdown: [],
+    d1_retention_rate: 0.25,
     game_profit_rate: 0.17,
     game_turnover: 300_000,
     gift_coin_spent: 123_456,
     google_recharge_usd_minor: 700,
-    lucky_gift_profit_rate: 0.25,
-    lucky_gift_turnover: 200_000,
-    manual_grant_coin: 222,
-    mic_online_ms: 3_600_000,
     mifapay_recharge_usd_minor: 800,
-    new_user_recharge_usd_minor: 1200,
-    new_users: appCode === "lalu" ? 3 : 1,
+    new_users: 3,
     output_coin: 450_000,
     paid_conversion_rate: 0.2,
     paid_users: 4,
-    platform_grant_coin: 111,
-    recharge_usd_minor: appCode === "lalu" ? 12300 : 5000,
-    recharge_conversion_rate: 0.2,
-    recharge_users: 4,
-    retention: { day1_rate: 0.25, day7_rate: 0.1, day30_rate: 0.05 },
-    salary_transfer_coin: 88_000,
-    salary_usd_minor: appCode === "aslan" ? 2500 : null,
-    super_lucky_gift_profit_rate: 0.08,
-    super_lucky_gift_turnover: 50_000
-  }));
+    recharge_usd_minor: 12_300,
+    recharge_users: 4
+  };
+  const aslanRegionRow = {
+    active_users: 10,
+    new_users: 1,
+    paid_users: 2,
+    recharge_usd_minor: 5000,
+    recharge_users: 2,
+    region_code: "MENA",
+    region_id: 11,
+    region_name: "中东大区"
+  };
+  fetchSocialBiMaster.mockResolvedValue({
+    access: { all: true, scopes: [] },
+    apps: [
+      { app_code: "lalu", app_name: "Lalu", kind: "hyapp" },
+      { app_code: "aslan", app_name: "Aslan", kind: "legacy" }
+    ],
+    operators: [
+      { account: "omar", name: "Omar", scopes: [{ app_code: "aslan", region_id: 11 }], team: "中东运营部", team_id: 2, user_id: 9 }
+    ],
+    permissions: {},
+    regions: [{ app_code: "aslan", countries: ["SA"], region_code: "MENA", region_id: 11, region_name: "中东大区" }]
+  });
+  fetchSocialBiOverview.mockResolvedValue({
+    access: { all: true, scopes: [] },
+    apps: [
+      {
+        app_code: "lalu",
+        app_name: "Lalu",
+        country_breakdown: [],
+        daily_country_breakdown: [],
+        daily_region_breakdown: [],
+        daily_series: [],
+        kind: "hyapp",
+        region_breakdown: [],
+        total: laluTotal
+      },
+      {
+        app_code: "aslan",
+        app_name: "Aslan",
+        country_breakdown: [],
+        daily_country_breakdown: [],
+        daily_region_breakdown: [],
+        daily_series: [],
+        kind: "legacy",
+        region_breakdown: [aslanRegionRow],
+        total: { active_users: 10, new_users: 1, paid_users: 2, recharge_usd_minor: 5000, recharge_users: 2 }
+      }
+    ]
+  });
+  fetchSocialBiKpi.mockResolvedValue({
+    items: [
+      {
+        app_code: "aslan",
+        app_name: "Aslan",
+        month_recharge_usd_minor: 90_000,
+        operator_account: "omar",
+        operator_name: "Omar",
+        operator_user_id: 9,
+        range_new_users: 1,
+        range_recharge_usd_minor: 5000,
+        region_id: 11,
+        region_name: "中东大区",
+        team: "中东运营部",
+        team_id: 2
+      }
+    ],
+    period_month: "2026-06",
+    summary: { month_recharge_usd_minor: 90_000, operator_count: 1, range_recharge_usd_minor: 5000 }
+  });
 
   render(<DatabiApp />);
 
   await flushEffects();
 
+  // v2 Shell：主视图容器 + 侧栏视图 tab，默认选中“经营概览”。
   expect(screen.getByLabelText("Social BI 数据中心")).toBeTruthy();
-  expect(screen.queryByText("App 数据明细")).toBeNull();
-  expect(fetchSocialBiFilterOptions).toHaveBeenCalledTimes(1);
-  expect(fetchStatisticsOverview).toHaveBeenCalledWith(expect.objectContaining({ appCode: "lalu", statTz: "Asia/Shanghai" }));
-  expect(fetchStatisticsOverview).toHaveBeenCalledWith(expect.objectContaining({ appCode: "aslan", statTz: "Asia/Shanghai" }));
-  expect(fetchStatisticsOverview).toHaveBeenCalledWith(expect.objectContaining({ appCode: "yumi", statTz: "Asia/Shanghai" }));
+  const viewTabs = screen.getByRole("tablist", { name: "数据视图" });
+  ["经营概览", "地区洞察", "运营中心", "留存质量", "数据明细", "埋点漏斗"].forEach((name) => {
+    expect(within(viewTabs).getByRole("tab", { name })).toBeTruthy();
+  });
+  expect(within(viewTabs).getByRole("tab", { name: "经营概览" })).toHaveAttribute("aria-selected", "true");
+
+  expect(fetchSocialBiMaster).toHaveBeenCalledTimes(1);
+  expect(fetchSocialBiOverview).toHaveBeenCalledWith(expect.objectContaining({ statTz: "Asia/Shanghai" }));
+  expect(fetchSocialBiFunnel).toHaveBeenCalledWith(expect.objectContaining({ statTz: "Asia/Shanghai" }));
+  expect(fetchSocialBiKpi).toHaveBeenCalledWith(expect.objectContaining({ statTz: "Asia/Shanghai" }));
+
+  // 经营概览：App 名、Hero 汇总充值（12,300 + 5,000 USD 分 = $173）、
+  // App 对比里 Lalu 的单 App 充值（$123）、区域 Top5 里的中东大区。
   expect(screen.getAllByText("Lalu").length).toBeGreaterThan(0);
+  expect(screen.getAllByText("充值 ($)").length).toBeGreaterThan(0);
   expect(screen.getByText("付费用户")).toBeTruthy();
-  expect(screen.getByText("游戏流水/利润率")).toBeTruthy();
-  expect(screen.getByText("消耗产出比")).toBeTruthy();
-  expect(screen.getByText("ARPU ($)")).toBeTruthy();
+  expect(screen.getAllByText("$173").length).toBeGreaterThan(0);
   expect(screen.getAllByText("$123").length).toBeGreaterThan(0);
-  expect(screen.getAllByText("300,000").length).toBeGreaterThan(0);
-  expect(screen.getAllByText("17.0%").length).toBeGreaterThan(0);
-  expect(screen.getAllByText("2分").length).toBeGreaterThan(0);
-  expect(screen.queryByText("$284,300")).toBeNull();
+  expect(screen.getAllByText("中东大区").length).toBeGreaterThan(0);
+
+  // 侧栏切换：地区洞察 —— 区域下钻表出现，Aslan 中东大区行充值 $50。
+  await act(async () => {
+    within(viewTabs).getByRole("tab", { name: "地区洞察" }).click();
+  });
+  expect(within(viewTabs).getByRole("tab", { name: "地区洞察" })).toHaveAttribute("aria-selected", "true");
+  expect(screen.getByText("区域下钻")).toBeTruthy();
+  expect(screen.getAllByText("中东大区").length).toBeGreaterThan(0);
+  expect(screen.getAllByText("$50").length).toBeGreaterThan(0);
+
+  // 侧栏切换：运营中心 —— 运营人员 Omar 上榜，只展示负责范围内的充值数据。
+  await act(async () => {
+    within(viewTabs).getByRole("tab", { name: "运营中心" }).click();
+  });
+  expect(within(viewTabs).getByRole("tab", { name: "运营中心" })).toHaveAttribute("aria-selected", "true");
+  expect(screen.getAllByText("Omar").length).toBeGreaterThan(0);
+  expect(screen.getAllByText("$900").length).toBeGreaterThan(0);
+});
+
+test("renders social BI funnel view and limits funnel apps to supported apps", async () => {
+  window.history.pushState(null, "", "/databi/social/?view=funnel");
+  fetchSocialBiMaster.mockResolvedValue({
+    access: { all: true, scopes: [] },
+    apps: [
+      { app_code: "lalu", app_name: "Lalu", kind: "hyapp" },
+      { app_code: "huwaa", app_name: "Huwaa", kind: "hyapp" },
+      { app_code: "fami", app_name: "Fami", kind: "hyapp" },
+      { app_code: "aslan", app_name: "Aslan", kind: "legacy" },
+      { app_code: "yumi", app_name: "Yumi", kind: "legacy" }
+    ],
+    operators: [],
+    permissions: {},
+    regions: []
+  });
+  fetchSocialBiFunnel.mockResolvedValue({
+    access: { all: true, scopes: [] },
+    apps: [
+      {
+        app_code: "lalu",
+        app_name: "Lalu",
+        cohorts: [
+          {
+            base_users: 1,
+            d1_retention_rate: 1,
+            d1_retention_users: 1,
+            dimension: "country",
+            label: "US",
+            steps: [
+              { event_name: "login_success", user_count: 1 },
+              { event_name: "profile_complete", user_count: 1 },
+              { event_name: "room_join_success", user_count: 1 },
+              { event_name: "stay_3m", user_count: 1 },
+              { event_name: "send_message", user_count: 1 }
+            ],
+            value: "US"
+          }
+        ],
+        kind: "hyapp",
+        steps: [
+          { event_name: "login_start", event_count: 2, label: "登录开始", user_count: 2 },
+          { event_name: "login_success", event_count: 1, label: "登录成功", user_count: 1 },
+          { event_name: "room_join_success", event_count: 1, label: "进房成功", user_count: 1 },
+          { event_name: "room_join_fail", event_count: 1, is_failure: true, label: "进房失败", user_count: 1 },
+          { event_name: "stay_3m", event_count: 1, label: "停留 3 分钟", user_count: 1 },
+          { event_name: "send_message", event_count: 1, label: "发消息", user_count: 1 }
+        ],
+        totals: {
+          d1_retention_base_users: 1,
+          d1_retention_rate: 1,
+          d1_retention_users: 1,
+          login_start_users: 2,
+          login_success_users: 1,
+          room_join_fail_users: 1,
+          room_join_success_users: 1
+        }
+      }
+    ]
+  });
+
+  render(<DatabiApp />);
+
+  await flushEffects();
+
+  expect(screen.getByRole("tab", { name: "埋点漏斗" })).toHaveAttribute("aria-selected", "true");
+  expect(screen.getByRole("button", { name: "全部漏斗 App" })).toBeTruthy();
+  expect(screen.getByRole("button", { name: /Lalu/ })).toBeTruthy();
+  expect(screen.getByRole("button", { name: /Huwaa/ })).toBeTruthy();
+  expect(screen.getByRole("button", { name: /Fami/ })).toBeTruthy();
+  expect(screen.queryByRole("button", { name: /Aslan/ })).toBeNull();
+  expect(screen.queryByRole("button", { name: /Yumi/ })).toBeNull();
+  expect(fetchSocialBiFunnel).toHaveBeenCalledWith(expect.objectContaining({ appCodes: ["lalu", "huwaa", "fami"] }));
+
+  expect(screen.getByText("主路径转化")).toBeTruthy();
+  expect(screen.getByText("事件明细")).toBeTruthy();
+  expect(screen.getByText("D1 Cohort")).toBeTruthy();
+  expect(screen.getByText("login_start")).toBeTruthy();
+  expect(screen.getByText("room_join_fail")).toBeTruthy();
+  expect(screen.getByText("US")).toBeTruthy();
+  expect(screen.getAllByText("100.0%").length).toBeGreaterThan(0);
+  expect(screen.getByTestId("databi-chart")).toBeTruthy();
 });
 
 async function flushEffects() {

databi/src/api.js

@@ -155,11 +155,86 @@ export async function fetchSocialBiFilterOptions({ appCode } = {}) {
   };
 }
 
-async function fetchDatabiData(path, { appCode, query } = {}) {
-  const response = await fetch(buildURL(path, query), {
+// 社交 BI 主数据：按当前登录用户的数据范围返回可见 App、区域目录、运营人员及权限开关。
+export async function fetchSocialBiMaster() {
+  return fetchDatabiData(apiEndpointPath(API_OPERATIONS.getSocialBiMaster));
+}
+
+export async function fetchSocialBiOverview({ appCodes, endMs, regionId, startMs, statTz }) {
+  const query = {};
+  if (statTz) {
+    query.stat_tz = statTz;
+  }
+  if (startMs) {
+    query.start_ms = String(startMs);
+  }
+  if (endMs) {
+    query.end_ms = String(endMs);
+  }
+  if (appCodes?.length) {
+    query.app_codes = appCodes.join(",");
+  }
+  if (regionId) {
+    query.region_id = String(regionId);
+  }
+  return fetchDatabiData(apiEndpointPath(API_OPERATIONS.getSocialBiOverview), { query });
+}
+
+export async function fetchSocialBiFunnel({ appCodes, endMs, regionId, startMs, statTz }) {
+  const query = {};
+  if (statTz) {
+    query.stat_tz = statTz;
+  }
+  if (startMs) {
+    query.start_ms = String(startMs);
+  }
+  if (endMs) {
+    query.end_ms = String(endMs);
+  }
+  if (appCodes?.length) {
+    query.app_codes = appCodes.join(",");
+  }
+  if (regionId) {
+    query.region_id = String(regionId);
+  }
+  return fetchDatabiData(apiEndpointPath(API_OPERATIONS.getSocialBiFunnel), { query });
+}
+
+export async function fetchSocialBiKpi({ appCodes, endMs, operatorUserId, periodMonth, startMs, statTz }) {
+  const query = {};
+  if (statTz) {
+    query.stat_tz = statTz;
+  }
+  if (startMs) {
+    query.start_ms = String(startMs);
+  }
+  if (endMs) {
+    query.end_ms = String(endMs);
+  }
+  if (periodMonth) {
+    query.period_month = periodMonth;
+  }
+  if (appCodes?.length) {
+    query.app_codes = appCodes.join(",");
+  }
+  if (operatorUserId) {
+    query.operator_user_id = String(operatorUserId);
+  }
+  return fetchDatabiData(apiEndpointPath(API_OPERATIONS.getSocialBiKpi), { query });
+}
+
+async function fetchDatabiData(path, { appCode, body, method, query } = {}) {
+  const headers = requestHeaders(appCode);
+  const init = {
     credentials: "include",
-    headers: requestHeaders(appCode)
-  });
+    headers,
+    method: method || "GET"
+  };
+  if (body !== undefined) {
+    headers["Content-Type"] = "application/json";
+    init.body = JSON.stringify(body);
+  }
+  const response = await fetch(buildURL(path, query), init);
   const payload = await readJSON(response);
   if (isAuthExpired(response, payload)) {
     redirectToLogin(window);

databi/src/charts/EChart.jsx

@@ -1,11 +1,11 @@
 import { useEffect, useRef } from "react";
 import { BarChart, EffectScatterChart, FunnelChart, LineChart, LinesChart, MapChart, PieChart, ScatterChart } from "echarts/charts";
-import { GeoComponent, GridComponent, LegendComponent, TooltipComponent } from "echarts/components";
+import { GeoComponent, GridComponent, LegendComponent, TooltipComponent, VisualMapComponent } from "echarts/components";
 import * as echarts from "echarts/core";
 import { CanvasRenderer } from "echarts/renderers";
 import worldMap from "../data/world.json";
 
-echarts.use([BarChart, EffectScatterChart, FunnelChart, GeoComponent, GridComponent, LegendComponent, LineChart, LinesChart, MapChart, PieChart, ScatterChart, TooltipComponent, CanvasRenderer]);
+echarts.use([BarChart, EffectScatterChart, FunnelChart, GeoComponent, GridComponent, LegendComponent, LineChart, LinesChart, MapChart, PieChart, ScatterChart, TooltipComponent, VisualMapComponent, CanvasRenderer]);
 echarts.registerMap("databi-world", worldMap);
 
 export function EChart({ className = "", option }) {

databi/src/data/socialBiDashboard.js

@@ -1,505 +0,0 @@
-export const ALL_VALUE = "all";
-
-export const socialBiAppOptions = [
-  { label: "全部 App", value: ALL_VALUE },
-  { label: "Lalu", value: "lalu" },
-  { label: "Aslan", value: "aslan" },
-  { label: "Yumi", value: "yumi" }
-];
-
-export const socialBiOperatorOptions = [
-  { label: "全部人员", searchText: "all", value: ALL_VALUE },
-  { label: "Ava Chen", searchText: "ava chen 陈", value: "ava" },
-  { label: "Nora Li", searchText: "nora li 李", value: "nora" },
-  { label: "Omar Saleh", searchText: "omar saleh", value: "omar" },
-  { label: "Lina Gomez", searchText: "lina gomez", value: "lina" }
-];
-
-export const socialBiDepartmentOptions = [
-  { label: "全部部门", value: ALL_VALUE },
-  { label: "拉美运营一部", value: "latam-ops-1" },
-  { label: "中东运营部", value: "mena-ops" },
-  { label: "泛娱乐增长组", value: "growth" }
-];
-
-export const socialBiRegionOptions = [
-  {
-    children: [
-      { label: "巴西", value: "br" },
-      { label: "墨西哥", value: "mx" },
-      { label: "哥伦比亚", value: "co" }
-    ],
-    label: "拉美大区",
-    value: "latam"
-  },
-  {
-    children: [
-      { label: "沙特", value: "sa" },
-      { label: "阿联酋", value: "ae" },
-      { label: "埃及", value: "eg" }
-    ],
-    label: "中东大区",
-    value: "mena"
-  },
-  {
-    children: [
-      { label: "印度尼西亚", value: "id" },
-      { label: "菲律宾", value: "ph" }
-    ],
-    label: "东南亚大区",
-    value: "sea"
-  }
-];
-
-export const socialBiFilterDefinitions = {
-  apps: { label: "App", options: socialBiAppOptions, type: "multi" },
-  dateRange: { label: "日期区间", type: "dateRange" },
-  departments: { label: "运营部门", options: socialBiDepartmentOptions, type: "multi" },
-  operators: { label: "运营人员", options: socialBiOperatorOptions, placeholder: "搜索员工姓名", type: "searchMulti" },
-  regions: { label: "地区", options: socialBiRegionOptions, type: "cascade" }
-};
-
-export const socialBiSections = [
-  {
-    cards: [
-      { delta: 8.4, key: "recharge", label: "总充值 ($)", type: "money" },
-      { delta: -2.6, key: "newUsers", label: "总新增人数", type: "number" },
-      { delta: 3.8, key: "dau", label: "总日活 (DAU)", type: "number" },
-      { delta: 1.7, key: "arppu", label: "综合 ARPPU ($)", type: "money" }
-    ],
-    columns: [
-      textColumn("date", "日期"),
-      textColumn("appName", "App名称"),
-      numberColumn("newUsers", "新增"),
-      numberColumn("dau", "日活"),
-      numberColumn("paidUsers", "付费用户"),
-      numberColumn("rechargeUsers", "充值用户"),
-      moneyColumn("recharge", "充值 ($)"),
-      moneyColumn("newUserRecharge", "新用户充值"),
-      moneyColumn("coinSellerRecharge", "币商充值"),
-      numberColumn("coinSellerStockCoin", "币商充值金币"),
-      numberColumn("coinSellerTransferCoin", "币商出货金币"),
-      moneyColumn("googleRecharge", "谷歌充值"),
-      moneyColumn("thirdPartyRecharge", "三方充值"),
-      flowRateColumn("gameFlowProfit", "游戏流水/利润率"),
-      flowRateColumn("luckyGiftFlowProfit", "幸运礼物流水/利润率"),
-      flowRateColumn("superLuckyGiftFlowProfit", "超级幸运礼物流水/利润率"),
-      numberColumn("giftCoinSpent", "礼物流水"),
-      numberColumn("coins", "金币数量"),
-      numberColumn("consumedCoin", "消耗金币"),
-      numberColumn("outputCoin", "产出金币"),
-      consumeOutputColumn("consumeOutputRatio", "消耗产出比"),
-      numberColumn("platformGrantCoin", "平台发放金币"),
-      numberColumn("manualGrantCoin", "人工发放金币"),
-      moneyColumn("salary", "存量工资 ($)"),
-      numberColumn("salaryTransferCoin", "工资兑换金币"),
-      durationColumn("avgMicOnlineMs", "平均麦上时间", "average"),
-      durationColumn("micOnlineMs", "麦上总时长"),
-      moneyColumn("arpu", "ARPU ($)", "average"),
-      moneyColumn("arppu", "ARPPU ($)", "average"),
-      percentColumn("paidConversionRate", "付费转化率"),
-      percentColumn("rechargeConversionRate", "充值转化率"),
-      moneyColumn("turnover", "App流水 ($)"),
-      percentColumn("retentionD1", "次日留存"),
-      percentColumn("retentionD7", "7日留存"),
-      percentColumn("retentionD30", "30日留存")
-    ],
-    filters: ["dateRange", "apps", "operators"],
-    key: "appData",
-    label: "App 数据",
-    rows: [
-      {
-        appName: "Lalu",
-        arppu: 42.7,
-        coins: 49120000,
-        date: "2026-06-30",
-        dau: 18520,
-        id: "app-lalu",
-        newUsers: 843,
-        recharge: 284300,
-        retentionD1: 31.6,
-        retentionD7: 18.4,
-        retentionD30: 9.8,
-        salary: 62310,
-        turnover: 493820
-      },
-      {
-        appName: "Aslan",
-        arppu: 39.4,
-        coins: 32760000,
-        date: "2026-06-30",
-        dau: 12740,
-        id: "app-aslan",
-        newUsers: 612,
-        recharge: 196740,
-        retentionD1: 29.2,
-        retentionD7: 16.1,
-        retentionD30: 8.7,
-        salary: 42180,
-        turnover: 338560
-      },
-      {
-        appName: "Yumi",
-        arppu: 36.2,
-        coins: 24890000,
-        date: "2026-06-30",
-        dau: 9240,
-        id: "app-yumi",
-        newUsers: 438,
-        recharge: 142860,
-        retentionD1: 27.9,
-        retentionD7: 15.5,
-        retentionD30: 7.9,
-        salary: 31860,
-        turnover: 251420
-      }
-    ],
-    title: "App 数据"
-  },
-  {
-    cards: [
-      { delta: 7.3, key: "recharge", label: "部门总充值 ($)", type: "money" },
-      { delta: 4.8, key: "turnover", label: "部门总流水 ($)", type: "money" },
-      { delta: -1.8, key: "newUsers", label: "部门总新增", type: "number" },
-      { delta: 2.9, key: "dau", label: "部门总日活 (DAU)", type: "number" }
-    ],
-    columns: [
-      textColumn("date", "日期"),
-      textColumn("department", "部门"),
-      textColumn("appName", "App名称"),
-      textColumn("region", "负责地区"),
-      moneyColumn("recharge", "充值 ($)"),
-      numberColumn("newUsers", "新增"),
-      progressColumn("dayProgress", "当日目标完成进度"),
-      progressColumn("monthProgress", "当月目标完成进度")
-    ],
-    filters: ["dateRange", "apps", "departments"],
-    key: "department",
-    label: "部门看板",
-    rows: [
-      {
-        appName: "Lalu",
-        date: "2026-06-30",
-        dau: 14220,
-        dayProgress: progress(126800, 140000),
-        department: "拉美运营一部",
-        id: "dept-latam",
-        monthProgress: progress(3020000, 3600000),
-        newUsers: 516,
-        recharge: 126800,
-        region: "拉美大区",
-        turnover: 225400
-      },
-      {
-        appName: "Aslan",
-        date: "2026-06-30",
-        dau: 10540,
-        dayProgress: progress(96800, 90000),
-        department: "中东运营部",
-        id: "dept-mena",
-        monthProgress: progress(2416000, 2700000),
-        newUsers: 452,
-        recharge: 96800,
-        region: "中东大区",
-        turnover: 164300
-      },
-      {
-        appName: "Yumi",
-        date: "2026-06-30",
-        dau: 8160,
-        dayProgress: noGoal(),
-        department: "泛娱乐增长组",
-        id: "dept-growth",
-        monthProgress: progress(1682000, 2100000),
-        newUsers: 372,
-        recharge: 74200,
-        region: "东南亚大区",
-        turnover: 118900
-      }
-    ],
-    title: "部门看板"
-  },
-  {
-    cards: [
-      { delta: 6.5, key: "recharge", label: "人员充值合计 ($)", type: "money" },
-      { delta: 4.4, key: "turnover", label: "人员流水合计 ($)", type: "money" },
-      { delta: 2.1, key: "newUsers", label: "新增人数", type: "number" },
-      { delta: -3.2, key: "monthKpiRate", label: "当月充值 KPI 达成率 (%)", type: "percent" }
-    ],
-    columns: [
-      textColumn("date", "日期"),
-      textColumn("operator", "运营人员"),
-      textColumn("appName", "App名称"),
-      textColumn("region", "所管地区"),
-      moneyColumn("recharge", "充值 ($)"),
-      numberColumn("newUsers", "新增"),
-      progressColumn("dayProgress", "当日目标完成进度"),
-      progressColumn("monthProgress", "当月目标完成进度")
-    ],
-    filters: ["dateRange", "apps", "operators"],
-    key: "personnel",
-    label: "人员绩效",
-    rows: [
-      {
-        appName: "Lalu",
-        date: "2026-06-30",
-        dayProgress: progress(52800, 50000),
-        id: "person-ava",
-        monthKpiRate: 88.4,
-        monthProgress: progress(1182000, 1350000),
-        newUsers: 211,
-        operator: "Ava Chen",
-        recharge: 52800,
-        region: "巴西 / 墨西哥",
-        turnover: 94100
-      },
-      {
-        appName: "Aslan",
-        date: "2026-06-30",
-        dayProgress: progress(41600, 45000),
-        id: "person-omar",
-        monthKpiRate: 82.1,
-        monthProgress: progress(906000, 1100000),
-        newUsers: 186,
-        operator: "Omar Saleh",
-        recharge: 41600,
-        region: "沙特 / 阿联酋",
-        turnover: 70400
-      },
-      {
-        appName: "Yumi",
-        date: "2026-06-30",
-        dayProgress: noGoal(),
-        id: "person-lina",
-        monthKpiRate: 75.6,
-        monthProgress: progress(642000, 850000),
-        newUsers: 154,
-        operator: "Lina Gomez",
-        recharge: 32600,
-        region: "菲律宾",
-        turnover: 52900
-      }
-    ],
-    title: "人员绩效"
-  },
-  {
-    cards: [
-      { delta: 9.2, key: "recharge", label: "区域总充值 ($)", type: "money" },
-      { delta: -1.1, key: "newUsers", label: "区域总新增", type: "number" },
-      { delta: 2.4, key: "arppu", label: "区域综合 ARPPU ($)", type: "money" }
-    ],
-    columns: [
-      textColumn("date", "日期"),
-      textColumn("region", "地区"),
-      textColumn("appName", "App名称"),
-      moneyColumn("recharge", "充值 ($)"),
-      moneyColumn("turnover", "流水 ($)"),
-      moneyColumn("arppu", "ARPPU ($)", "average"),
-      numberColumn("newUsers", "新增"),
-      numberColumn("dau", "日活"),
-      percentColumn("retentionD1", "次留"),
-      percentColumn("retentionD7", "7日留"),
-      percentColumn("retentionD30", "30日留"),
-      moneyColumn("salary", "存量工资 ($)"),
-      numberColumn("coins", "金币数量"),
-      ratioColumn("agencyCount", "Agency数量"),
-      ratioColumn("hostCount", "Host数量"),
-      ratioColumn("bdCount", "BD数量"),
-      ratioColumn("coinSellerCount", "币商数量"),
-      numberColumn("coinSellerCoins", "币商金币数")
-    ],
-    filters: ["dateRange", "apps", "regions"],
-    key: "regional",
-    label: "地区分析",
-    rows: [
-      {
-        agencyCount: ratioCount(84, 112),
-        appName: "Lalu",
-        arppu: 44.1,
-        bdCount: ratioCount(26, 34),
-        coinSellerCoins: 9840000,
-        coinSellerCount: ratioCount(18, 24),
-        coins: 36120000,
-        date: "2026-06-30",
-        dau: 13280,
-        hostCount: ratioCount(412, 520),
-        id: "region-br",
-        newUsers: 506,
-        recharge: 206400,
-        region: "巴西",
-        retentionD1: 32.8,
-        retentionD7: 19.4,
-        retentionD30: 10.2,
-        salary: 52200,
-        turnover: 354200
-      },
-      {
-        agencyCount: ratioCount(66, 95),
-        appName: "Aslan",
-        arppu: 41.5,
-        bdCount: ratioCount(19, 28),
-        coinSellerCoins: 7420000,
-        coinSellerCount: ratioCount(15, 21),
-        coins: 28450000,
-        date: "2026-06-30",
-        dau: 11140,
-        hostCount: ratioCount(356, 480),
-        id: "region-sa",
-        newUsers: 442,
-        recharge: 173200,
-        region: "沙特",
-        retentionD1: 30.4,
-        retentionD7: 17.7,
-        retentionD30: 9.1,
-        salary: 44100,
-        turnover: 292600
-      },
-      {
-        agencyCount: ratioCount(41, 68),
-        appName: "Yumi",
-        arppu: 34.8,
-        bdCount: ratioCount(14, 22),
-        coinSellerCoins: 4180000,
-        coinSellerCount: ratioCount(9, 17),
-        coins: 17260000,
-        date: "2026-06-30",
-        dau: 6840,
-        hostCount: ratioCount(228, 346),
-        id: "region-ph",
-        newUsers: 318,
-        recharge: 94800,
-        region: "菲律宾",
-        retentionD1: 27.5,
-        retentionD7: 14.9,
-        retentionD30: 7.3,
-        salary: 22600,
-        turnover: 164900
-      }
-    ],
-    title: "地区分析"
-  },
-  {
-    cards: [
-      { delta: -1.7, key: "newUsers", label: "总新增", type: "number" },
-      { delta: 3.5, key: "dau", label: "总日活", type: "number" },
-      { delta: 1.2, key: "retentionD1", label: "次日留存均值 (%)", type: "percent" },
-      { delta: 4.1, key: "ecosystemActive", label: "生态角色总活跃数", type: "number" }
-    ],
-    columns: [
-      textColumn("date", "日期"),
-      textColumn("region", "地区"),
-      textColumn("appName", "App名称"),
-      numberColumn("newUsers", "新增"),
-      numberColumn("dau", "日活 (DAU)"),
-      percentColumn("retentionD1", "次日留存"),
-      percentColumn("retentionD7", "7日留存"),
-      percentColumn("retentionD30", "30日留存"),
-      ratioColumn("agencyActive", "Agency活跃数量"),
-      ratioColumn("hostActive", "Host活跃数量"),
-      ratioColumn("bdActive", "BD活跃数量"),
-      ratioColumn("coinSellerActive", "币商活跃数量")
-    ],
-    filters: ["dateRange", "apps", "regions"],
-    key: "retention",
-    label: "留存分析",
-    rows: [
-      {
-        agencyActive: ratioCount(84, 112),
-        appName: "Lalu",
-        bdActive: ratioCount(26, 34),
-        coinSellerActive: ratioCount(18, 24),
-        date: "2026-06-30",
-        dau: 13280,
-        ecosystemActive: 540,
-        hostActive: ratioCount(412, 520),
-        id: "retain-br",
-        newUsers: 506,
-        region: "巴西",
-        retentionD1: 32.8,
-        retentionD7: 19.4,
-        retentionD30: 10.2
-      },
-      {
-        agencyActive: ratioCount(66, 95),
-        appName: "Aslan",
-        bdActive: ratioCount(19, 28),
-        coinSellerActive: ratioCount(15, 21),
-        date: "2026-06-30",
-        dau: 11140,
-        ecosystemActive: 456,
-        hostActive: ratioCount(356, 480),
-        id: "retain-sa",
-        newUsers: 442,
-        region: "沙特",
-        retentionD1: 30.4,
-        retentionD7: 17.7,
-        retentionD30: 9.1
-      },
-      {
-        agencyActive: ratioCount(41, 68),
-        appName: "Yumi",
-        bdActive: ratioCount(14, 22),
-        coinSellerActive: ratioCount(9, 17),
-        date: "2026-06-30",
-        dau: 6840,
-        ecosystemActive: 292,
-        hostActive: ratioCount(228, 346),
-        id: "retain-ph",
-        newUsers: 318,
-        region: "菲律宾",
-        retentionD1: 27.5,
-        retentionD7: 14.9,
-        retentionD30: 7.3
-      }
-    ],
-    title: "留存分析"
-  }
-];
-
-function textColumn(key, label) {
-  return { aggregate: "text", align: "left", key, label, type: "text" };
-}
-
-function moneyColumn(key, label, aggregate = "sum") {
-  return { aggregate, align: "right", key, label, type: "money" };
-}
-
-function numberColumn(key, label) {
-  return { aggregate: "sum", align: "right", key, label, type: "number" };
-}
-
-function percentColumn(key, label) {
-  return { aggregate: "average", align: "right", key, label, type: "percent" };
-}
-
-function progressColumn(key, label) {
-  return { aggregate: "progress", align: "left", key, label, type: "progress" };
-}
-
-function ratioColumn(key, label) {
-  return { aggregate: "ratio", align: "right", key, label, type: "ratio" };
-}
-
-function flowRateColumn(key, label) {
-  return { aggregate: "flowRate", align: "right", key, label, type: "flowRate" };
-}
-
-function consumeOutputColumn(key, label) {
-  return { aggregate: "consumeOutput", align: "right", key, label, type: "consumeOutput" };
-}
-
-function durationColumn(key, label, aggregate = "sum") {
-  return { aggregate: aggregate === "average" ? "durationAverage" : "duration", align: "right", key, label, type: "duration" };
-}
-
-function progress(actual, target) {
-  return { actual, target };
-}
-
-function noGoal() {
-  return { actual: 0, noGoal: true, target: 0 };
-}
-
-function ratioCount(active, total) {
-  return { active, total };
-}

databi/src/main.jsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
 import { DatabiApp } from "./DatabiApp.jsx";
+// 全局设计 token（@/styles/tokens.css）供共享组件（如 TimeRangeFilter）取色，先于本地样式引入。
+import "@/styles/tokens.css";
 import "./styles/index.css";
 
 createRoot(document.getElementById("databi-root")).render(

databi/src/social/SocialBiApp.jsx

@@ -0,0 +1,338 @@
+// 社交 BI v2 Shell：深色侧栏（视图导航）+ 顶栏全局筛选（日期/App/区域/粒度），
+// 视图组件通过 useSocialBi() 消费统一的筛选状态与数据派生结果。
+
+import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import AccountTreeOutlined from "@mui/icons-material/AccountTreeOutlined";
+import GroupsOutlined from "@mui/icons-material/GroupsOutlined";
+import InsightsOutlined from "@mui/icons-material/InsightsOutlined";
+import PublicOutlined from "@mui/icons-material/PublicOutlined";
+import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
+import RepeatOutlined from "@mui/icons-material/RepeatOutlined";
+import TableChartOutlined from "@mui/icons-material/TableChartOutlined";
+import {
+  ALL,
+  DATE_PRESETS,
+  GRANULARITIES,
+  createDefaultFilters,
+  rangeLabel,
+  readStateFromURL,
+  toggleMultiValue,
+  writeStateToURL
+} from "./state.js";
+import { TimeRangeFilter } from "@/shared/ui/TimeRangeFilter.jsx";
+import { appColor } from "./metrics.js";
+import { SOCIAL_BI_FUNNEL_APP_CODES, useSocialBiData } from "./useSocialBiData.js";
+import { OverviewView } from "./views/OverviewView.jsx";
+import { RegionsView } from "./views/RegionsView.jsx";
+import { TeamKpiView } from "./views/TeamKpiView.jsx";
+import { RetentionView } from "./views/RetentionView.jsx";
+import { DataTableView } from "./views/DataTableView.jsx";
+import { FunnelView } from "./views/FunnelView.jsx";
+import "../styles/social-v2.css";
+
+const VIEWS = [
+  { component: OverviewView, icon: InsightsOutlined, key: "overview", label: "经营概览" },
+  { component: RegionsView, icon: PublicOutlined, key: "regions", label: "地区洞察" },
+  { component: TeamKpiView, icon: GroupsOutlined, key: "team", label: "运营中心" },
+  { component: RetentionView, icon: RepeatOutlined, key: "retention", label: "留存质量" },
+  { component: DataTableView, icon: TableChartOutlined, key: "table", label: "数据明细" },
+  { component: FunnelView, icon: AccountTreeOutlined, key: "funnel", label: "埋点漏斗" }
+];
+
+const SocialBiContext = createContext(null);
+
+export function useSocialBi() {
+  const context = useContext(SocialBiContext);
+  if (!context) {
+    throw new Error("useSocialBi must be used inside SocialBiApp");
+  }
+  return context;
+}
+
+export function SocialBiApp() {
+  const initial = useMemo(() => readStateFromURL(), []);
+  const [filters, setFilters] = useState(initial.filters);
+  const [viewKey, setViewKey] = useState(() => (VIEWS.some((view) => view.key === initial.view) ? initial.view : "overview"));
+  const data = useSocialBiData(filters);
+
+  useEffect(() => {
+    writeStateToURL(filters, viewKey);
+  }, [filters, viewKey]);
+
+  const updateFilter = useCallback((key, value) => {
+    setFilters((current) => ({ ...current, [key]: value }));
+  }, []);
+
+  const resetFilters = useCallback(() => {
+    setFilters(createDefaultFilters());
+  }, []);
+
+  const contextValue = useMemo(
+    () => ({ ...data, filters, resetFilters, setViewKey, updateFilter, viewKey }),
+    [data, filters, resetFilters, updateFilter, viewKey]
+  );
+
+  const ActiveView = (VIEWS.find((view) => view.key === viewKey) || VIEWS[0]).component;
+
+  return (
+    <SocialBiContext.Provider value={contextValue}>
+      <div className="sbi-shell">
+        <Sidebar data={data} onViewChange={setViewKey} viewKey={viewKey} />
+        <div className="sbi-main">
+          <TopBar data={data} filters={filters} updateFilter={updateFilter} viewKey={viewKey} />
+          {data.errors.length ? (
+            <div className="sbi-error-banner" role="alert">
+              {data.errors.map((message, index) => (
+                <span key={`${index}-${message}`}>{message}</span>
+              ))}
+            </div>
+          ) : null}
+          <main className="sbi-view" aria-label="Social BI 数据中心">
+            <ActiveView />
+          </main>
+        </div>
+      </div>
+    </SocialBiContext.Provider>
+  );
+}
+
+function Sidebar({ data, onViewChange, viewKey }) {
+  const access = data.master?.access;
+  const scopeLabel = !data.master ? "" : access?.all ? "全量数据范围" : `负责 ${access?.scopes?.length || 0} 个 App/区域`;
+  return (
+    <aside className="sbi-sidebar" aria-label="Social BI 导航">
+      <div className="sbi-brand">
+        <span className="sbi-brand-mark">HY</span>
+        <div className="sbi-brand-copy">
+          <strong>运营数据总览</strong>
+        </div>
+      </div>
+      <nav className="sbi-nav" role="tablist" aria-label="数据视图">
+        {VIEWS.map((view) => {
+          const Icon = view.icon;
+          const isActive = viewKey === view.key;
+          return (
+            <button
+              aria-selected={isActive}
+              className={isActive ? "sbi-nav-item is-active" : "sbi-nav-item"}
+              key={view.key}
+              onClick={() => onViewChange(view.key)}
+              role="tab"
+              type="button"
+            >
+              <Icon fontSize="small" />
+              <span>{view.label}</span>
+            </button>
+          );
+        })}
+      </nav>
+      {scopeLabel ? (
+        <div className="sbi-scope-badge" title="数据按你的负责范围裁剪，可在用户管理里调整">
+          <span className="sbi-scope-dot" />
+          {scopeLabel}
+        </div>
+      ) : null}
+    </aside>
+  );
+}
+
+function TopBar({ data, filters, updateFilter, viewKey }) {
+  return (
+    <header className="sbi-topbar">
+      <div className="sbi-topbar-row">
+        <DatePresetControl filters={filters} updateFilter={updateFilter} />
+        <GranularityControl filters={filters} updateFilter={updateFilter} />
+        <button className="sbi-refresh" onClick={data.refresh} title="刷新数据" type="button">
+          <RefreshOutlined fontSize="small" />
+        </button>
+      </div>
+      <div className="sbi-topbar-row">
+        <AppChips data={data} filters={filters} updateFilter={updateFilter} viewKey={viewKey} />
+        <RegionSelect data={data} filters={filters} updateFilter={updateFilter} />
+        <span className="sbi-range-label">{rangeLabel(data.range)}</span>
+        {data.isLoading ? <span className="sbi-loading-dot" aria-label="加载中" /> : null}
+      </div>
+    </header>
+  );
+}
+
+function DatePresetControl({ filters, updateFilter }) {
+  return (
+    <div className="sbi-date-presets" role="radiogroup" aria-label="日期区间">
+      {DATE_PRESETS.map((preset) => (
+        <button
+          aria-checked={filters.preset === preset.key}
+          className={filters.preset === preset.key ? "is-active" : ""}
+          key={preset.key}
+          onClick={() => updateFilter("preset", preset.key)}
+          role="radio"
+          type="button"
+        >
+          {preset.label}
+        </button>
+      ))}
+      {filters.preset === "custom" ? (
+        <TimeRangeFilter
+          className="sbi-custom-range"
+          label="自定义区间"
+          value={{ endMs: dayTextToEndMs(filters.customEnd), startMs: dayTextToStartMs(filters.customStart) }}
+          withTime={false}
+          onChange={(range) => {
+            updateFilter("customStart", msToDayText(range.startMs));
+            updateFilter("customEnd", msToDayText(range.endMs));
+          }}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+// 自定义区间在筛选状态里以天字符串（YYYY-MM-DD）存储，选择器以本地时区毫秒交互，这里做双向换算。
+function parseDayText(value) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(value || ""));
+  return match ? { day: Number(match[3]), month: Number(match[2]), year: Number(match[1]) } : null;
+}
+
+function dayTextToStartMs(dayText) {
+  const parts = parseDayText(dayText);
+  return parts ? new Date(parts.year, parts.month - 1, parts.day, 0, 0, 0, 0).getTime() : "";
+}
+
+function dayTextToEndMs(dayText) {
+  const parts = parseDayText(dayText);
+  return parts ? new Date(parts.year, parts.month - 1, parts.day, 23, 59, 59, 999).getTime() : "";
+}
+
+function msToDayText(ms) {
+  if (!ms) {
+    return "";
+  }
+  const date = new Date(Number(ms));
+  const pad = (value) => String(value).padStart(2, "0");
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+
+function GranularityControl({ filters, updateFilter }) {
+  return (
+    <div className="sbi-granularity" role="radiogroup" aria-label="趋势粒度">
+      {GRANULARITIES.map((item) => (
+        <button
+          aria-checked={filters.granularity === item.key}
+          className={filters.granularity === item.key ? "is-active" : ""}
+          key={item.key}
+          onClick={() => updateFilter("granularity", item.key)}
+          role="radio"
+          type="button"
+        >
+          {item.label}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function AppChips({ data, filters, updateFilter, viewKey }) {
+  const apps = viewKey === "funnel"
+    ? (data.master?.apps || []).filter((app) => SOCIAL_BI_FUNNEL_APP_CODES.includes(app.app_code))
+    : data.master?.apps || [];
+  const allCodes = apps.map((app) => app.app_code);
+  const hasSelectedVisibleApp = filters.apps.some((appCode) => allCodes.includes(appCode));
+  const isAll = filters.apps.includes(ALL) || (viewKey === "funnel" && !hasSelectedVisibleApp);
+  return (
+    <div className="sbi-app-chips" role="group" aria-label="App 筛选">
+      <button
+        aria-pressed={isAll}
+        className={isAll ? "sbi-chip is-active" : "sbi-chip"}
+        onClick={() => updateFilter("apps", [ALL])}
+        type="button"
+      >
+        {viewKey === "funnel" ? "全部漏斗 App" : "全部 App"}
+      </button>
+      {apps.map((app) => {
+        const selected = !isAll && filters.apps.includes(app.app_code);
+        return (
+          <button
+            aria-pressed={selected}
+            className={selected ? "sbi-chip is-active" : "sbi-chip"}
+            key={app.app_code}
+            onClick={() => updateFilter("apps", toggleMultiValue(filters.apps, app.app_code, allCodes))}
+            type="button"
+          >
+            <span className="sbi-chip-dot" style={{ background: appColor(app.app_code, allCodes) }} />
+            {app.app_name || app.app_code}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
+
+function RegionSelect({ data, filters, updateFilter }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef(null);
+  const apps = data.master?.apps || [];
+  const regions = data.master?.regions || [];
+  const groups = apps
+    .map((app) => ({
+      app,
+      regions: regions.filter((region) => region.app_code === app.app_code)
+    }))
+    .filter((group) => group.regions.length);
+
+  useEffect(() => {
+    const handlePointerDown = (event) => {
+      if (!containerRef.current?.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
+  }, []);
+
+  const selectedCount = filters.regions.includes(ALL) ? 0 : filters.regions.length;
+  return (
+    <div className="sbi-region-select" ref={containerRef}>
+      <button aria-expanded={isOpen} className="sbi-region-trigger" onClick={() => setIsOpen((open) => !open)} type="button">
+        地区：{selectedCount ? `已选 ${selectedCount} 项` : "全部"}
+      </button>
+      {isOpen ? (
+        <div className="sbi-region-menu" role="listbox" aria-label="地区筛选">
+          <button
+            className={filters.regions.includes(ALL) ? "sbi-region-option is-active" : "sbi-region-option"}
+            onClick={() => updateFilter("regions", [ALL])}
+            type="button"
+          >
+            全部地区
+          </button>
+          {groups.map((group) => (
+            <div className="sbi-region-group" key={group.app.app_code}>
+              <button
+                className={
+                  filters.regions.includes(`app:${group.app.app_code}`) ? "sbi-region-option is-group is-active" : "sbi-region-option is-group"
+                }
+                onClick={() => updateFilter("regions", toggleMultiValue(filters.regions, `app:${group.app.app_code}`))}
+                type="button"
+              >
+                {group.app.app_name || group.app.app_code} · 全部区域
+              </button>
+              {group.regions.map((region) => {
+                const value = `${region.app_code}:${region.region_id}`;
+                return (
+                  <button
+                    className={filters.regions.includes(value) ? "sbi-region-option is-active" : "sbi-region-option"}
+                    key={value}
+                    onClick={() => updateFilter("regions", toggleMultiValue(filters.regions, value))}
+                    type="button"
+                  >
+                    {region.region_name || region.region_code}
+                  </button>
+                );
+              })}
+            </div>
+          ))}
+          {!groups.length ? <p className="sbi-region-empty">暂无区域目录</p> : null}
+        </div>
+      ) : null}
+    </div>
+  );
+}

databi/src/social/format.js

@@ -0,0 +1,121 @@
+// 社交 BI v2 的展示格式化层：所有视图共用，保证同一指标在任何视图里的写法一致。
+// 后端金额一律是 USD 分（*_usd_minor），比例一律是 0-1 小数，这里统一换算。
+
+const numberFormatter = new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 });
+const decimalFormatter = new Intl.NumberFormat("en-US", { maximumFractionDigits: 1, minimumFractionDigits: 1 });
+
+export function isBlank(value) {
+  return value === null || value === undefined || value === "" || (typeof value === "number" && !Number.isFinite(value));
+}
+
+export function formatMoneyMinor(value) {
+  if (isBlank(value)) {
+    return "--";
+  }
+  return formatMoney(Number(value) / 100);
+}
+
+export function formatMoney(value) {
+  if (isBlank(value)) {
+    return "--";
+  }
+  const numeric = Number(value);
+  const digits = Math.abs(numeric) < 1000 && !Number.isInteger(numeric) ? 1 : 0;
+  return `$${numeric.toLocaleString("en-US", { maximumFractionDigits: digits, minimumFractionDigits: digits })}`;
+}
+
+export function formatCount(value) {
+  if (isBlank(value)) {
+    return "--";
+  }
+  return numberFormatter.format(Number(value));
+}
+
+// 金币等大数值在卡片/图表标签里用紧凑写法（1.2亿 视觉负担太大，用 en 缩写与后台其余模块一致）。
+export function formatCompact(value) {
+  if (isBlank(value)) {
+    return "--";
+  }
+  const numeric = Number(value);
+  const abs = Math.abs(numeric);
+  if (abs >= 1_000_000_000) {
+    return `${(numeric / 1_000_000_000).toFixed(1)}B`;
+  }
+  if (abs >= 1_000_000) {
+    return `${(numeric / 1_000_000).toFixed(1)}M`;
+  }
+  if (abs >= 10_000) {
+    return `${(numeric / 1_000).toFixed(1)}K`;
+  }
+  return numberFormatter.format(numeric);
+}
+
+export function formatRatioPercent(value) {
+  if (isBlank(value)) {
+    return "--";
+  }
+  return `${decimalFormatter.format(Number(value) * 100)}%`;
+}
+
+export function formatPercentValue(value) {
+  if (isBlank(value)) {
+    return "--";
+  }
+  return `${decimalFormatter.format(Number(value))}%`;
+}
+
+export function formatDurationMs(value) {
+  if (isBlank(value)) {
+    return "--";
+  }
+  const totalSeconds = Math.max(0, Math.round(Number(value) / 1000));
+  if (totalSeconds < 60) {
+    return `${totalSeconds}秒`;
+  }
+  const totalMinutes = Math.round(totalSeconds / 60);
+  if (totalMinutes < 60) {
+    return `${totalMinutes}分`;
+  }
+  const hours = Math.floor(totalMinutes / 60);
+  const minutes = totalMinutes % 60;
+  return minutes ? `${hours}小时${minutes}分` : `${hours}小时`;
+}
+
+// 环比：后端 delta 字段是 0-1 增幅（0.12 = +12%）。
+export function formatDeltaRate(value) {
+  if (isBlank(value)) {
+    return "";
+  }
+  const numeric = Number(value) * 100;
+  const sign = numeric >= 0 ? "+" : "";
+  return `${sign}${decimalFormatter.format(numeric)}%`;
+}
+
+export function deltaDirection(value) {
+  if (isBlank(value) || Number(value) === 0) {
+    return "flat";
+  }
+  return Number(value) > 0 ? "up" : "down";
+}
+
+export function csvEscape(value) {
+  const text = String(value ?? "");
+  if (/[",\n]/.test(text)) {
+    return `"${text.replace(/"/g, '""')}"`;
+  }
+  return text;
+}
+
+export function downloadCsv(filename, headerCells, rows) {
+  const lines = [headerCells.map(csvEscape).join(",")];
+  rows.forEach((cells) => {
+    lines.push(cells.map(csvEscape).join(","));
+  });
+  const blob = new Blob(["\uFEFF", lines.join("\n")], { type: "text/csv;charset=utf-8" });
+  const url = URL.createObjectURL(blob);
+  const anchor = document.createElement("a");
+  anchor.href = url;
+  anchor.download = filename;
+  anchor.click();
+  URL.revokeObjectURL(url);
+}

databi/src/social/metrics.js

@@ -0,0 +1,267 @@
+// 社交 BI v2 的指标口径中心：所有视图通过 METRIC_DEFS 取 label/格式化/口径说明，
+// 行数据保持后端原始 snake_case 字段（金额 USD 分、比例 0-1），渲染时才格式化。
+
+import { formatCompact, formatCount, formatDurationMs, formatMoneyMinor, formatRatioPercent, isBlank } from "./format.js";
+
+export const METRIC_DEFS = {
+  new_users: { label: "新增", tooltip: "当日新注册用户数（legacy 按 user_run_profile 创建时间）", type: "count" },
+  active_users: { label: "日活 (DAU)", tooltip: "当日活跃去重用户；跨天合计为人天", type: "count" },
+  paid_users: { label: "付费用户", tooltip: "发生成功充值的去重用户", type: "count" },
+  recharge_users: { label: "充值用户", tooltip: "与付费用户同口径", type: "count" },
+  recharge_usd_minor: { label: "充值 ($)", tooltip: "全部渠道充值合计（USD）", type: "money" },
+  new_user_recharge_usd_minor: { label: "新用户充值", tooltip: "当日注册用户当日的充值金额", type: "money" },
+  google_recharge_usd_minor: { label: "谷歌充值", tooltip: "Google Play 渠道充值", type: "money" },
+  mifapay_recharge_usd_minor: { label: "三方充值", tooltip: "非谷歌的三方渠道充值合计", type: "money" },
+  coin_seller_recharge_usd_minor: { label: "币商充值", tooltip: "币商进货充值金额", type: "money" },
+  coin_seller_stock_coin: { label: "币商充值金币", tooltip: "币商进货获得的金币", type: "coin" },
+  coin_seller_transfer_coin: { label: "币商出货金币", tooltip: "币商转给用户的金币（legacy 按 SELLER_AGENT 流水）", type: "coin" },
+  game_turnover: { label: "游戏流水", tooltip: "游戏下注金币流水", type: "coin" },
+  game_profit_rate: { label: "游戏利润率", tooltip: "（流水-返奖）/流水", type: "ratio" },
+  lucky_gift_turnover: { label: "幸运礼物流水", tooltip: "幸运礼物赠送金币流水", type: "coin" },
+  lucky_gift_payout: { label: "幸运礼物返奖", tooltip: "幸运礼物中奖返还金币", type: "coin" },
+  lucky_gift_profit_rate: { label: "幸运礼物利润率", tooltip: "（流水-返奖）/流水", type: "ratio" },
+  super_lucky_gift_turnover: { label: "超级幸运礼物流水", tooltip: "超级幸运礼物赠送金币流水（legacy 平台无此玩法）", type: "coin" },
+  super_lucky_gift_profit_rate: { label: "超级幸运礼物利润率", tooltip: "（流水-返奖）/流水", type: "ratio" },
+  gift_coin_spent: { label: "礼物流水", tooltip: "全部礼物赠送金币流水（含幸运礼物）", type: "coin" },
+  coin_total: { label: "金币数量", tooltip: "用户金币余额快照", type: "coin" },
+  consumed_coin: { label: "消耗金币", tooltip: "金币消耗流水合计（legacy 仅全 App 口径）", type: "coin" },
+  output_coin: { label: "产出金币", tooltip: "金币产出流水合计（legacy 仅全 App 口径）", type: "coin" },
+  consume_output_ratio: { label: "消耗产出比", tooltip: "消耗金币 / 产出金币", type: "ratio" },
+  platform_grant_coin: { label: "平台发放金币", tooltip: "平台活动发放金币", type: "coin" },
+  manual_grant_coin: { label: "人工发放金币", tooltip: "后台人工发放金币", type: "coin" },
+  salary_usd_minor: { label: "存量工资 ($)", tooltip: "主播工资余额快照（USD）", type: "money" },
+  salary_transfer_coin: { label: "工资兑换金币", tooltip: "工资兑换成金币的数量", type: "coin" },
+  avg_mic_online_ms: { label: "平均麦上时间", tooltip: "人均麦上时长", type: "duration" },
+  mic_online_ms: { label: "麦上总时长", tooltip: "全部用户麦上时长合计", type: "duration" },
+  arpu_usd_minor: { label: "ARPU ($)", tooltip: "充值 / 日活", type: "money" },
+  arppu_usd_minor: { label: "ARPPU ($)", tooltip: "充值 / 付费用户", type: "money" },
+  paid_conversion_rate: { label: "付费转化率", tooltip: "付费用户 / 日活", type: "ratio" },
+  recharge_conversion_rate: { label: "充值转化率", tooltip: "充值用户 / 日活", type: "ratio" },
+  d1_retention_rate: { label: "次日留存", tooltip: "注册次日仍活跃的比例", type: "ratio" },
+  d7_retention_rate: { label: "7日留存", tooltip: "注册第 7 日仍活跃的比例", type: "ratio" },
+  d30_retention_rate: { label: "30日留存", tooltip: "注册第 30 日仍活跃的比例", type: "ratio" }
+};
+
+// 数据明细宽表的列组：与运营的心智分组一致，支持整组折叠。
+export const METRIC_GROUPS = [
+  { key: "users", label: "用户", metrics: ["new_users", "active_users", "paid_users", "recharge_users"] },
+  {
+    key: "recharge",
+    label: "充值",
+    metrics: [
+      "recharge_usd_minor",
+      "new_user_recharge_usd_minor",
+      "google_recharge_usd_minor",
+      "mifapay_recharge_usd_minor",
+      "coin_seller_recharge_usd_minor"
+    ]
+  },
+  { key: "coinSeller", label: "币商", metrics: ["coin_seller_stock_coin", "coin_seller_transfer_coin"] },
+  {
+    key: "play",
+    label: "玩法流水",
+    metrics: [
+      "game_turnover",
+      "game_profit_rate",
+      "lucky_gift_turnover",
+      "lucky_gift_profit_rate",
+      "super_lucky_gift_turnover",
+      "super_lucky_gift_profit_rate",
+      "gift_coin_spent"
+    ]
+  },
+  {
+    key: "coins",
+    label: "金币",
+    metrics: ["coin_total", "consumed_coin", "output_coin", "consume_output_ratio", "platform_grant_coin", "manual_grant_coin"]
+  },
+  { key: "salary", label: "工资", metrics: ["salary_usd_minor", "salary_transfer_coin"] },
+  { key: "engagement", label: "时长", metrics: ["avg_mic_online_ms", "mic_online_ms"] },
+  {
+    key: "quality",
+    label: "质量",
+    metrics: [
+      "arpu_usd_minor",
+      "arppu_usd_minor",
+      "paid_conversion_rate",
+      "recharge_conversion_rate",
+      "d1_retention_rate",
+      "d7_retention_rate",
+      "d30_retention_rate"
+    ]
+  }
+];
+
+export function metricLabel(key) {
+  return METRIC_DEFS[key]?.label || key;
+}
+
+export function metricTooltip(key) {
+  return METRIC_DEFS[key]?.tooltip || "";
+}
+
+export function formatMetric(key, value) {
+  const type = METRIC_DEFS[key]?.type;
+  if (type === "money") {
+    return formatMoneyMinor(value);
+  }
+  if (type === "ratio") {
+    return formatRatioPercent(value);
+  }
+  if (type === "coin") {
+    return formatCount(value);
+  }
+  if (type === "duration") {
+    return formatDurationMs(value);
+  }
+  return formatCount(value);
+}
+
+export function formatMetricCompact(key, value) {
+  const type = METRIC_DEFS[key]?.type;
+  if (type === "money") {
+    return isBlank(value) ? "--" : `$${formatCompact(Number(value) / 100)}`;
+  }
+  if (type === "ratio") {
+    return formatRatioPercent(value);
+  }
+  if (type === "duration") {
+    return formatDurationMs(value);
+  }
+  return formatCompact(value);
+}
+
+// 图表取数值：金额换算成美元，比例换算成百分数，其余原样；缺失返回 null 让 ECharts 断线。
+export function metricChartValue(key, value) {
+  if (isBlank(value)) {
+    return null;
+  }
+  const type = METRIC_DEFS[key]?.type;
+  if (type === "money") {
+    return Number(value) / 100;
+  }
+  if (type === "ratio") {
+    return Number(value) * 100;
+  }
+  return Number(value);
+}
+
+// 可线性相加的字段；与后端 databi/metrics.go 的 additiveMetricKeys 对齐，前端聚合只做同一口径。
+const ADDITIVE_METRIC_KEYS = [
+  "new_users",
+  "active_users",
+  "paid_users",
+  "recharge_users",
+  "recharge_usd_minor",
+  "new_user_recharge_usd_minor",
+  "google_recharge_usd_minor",
+  "mifapay_recharge_usd_minor",
+  "coin_seller_recharge_usd_minor",
+  "coin_seller_stock_coin",
+  "coin_seller_transfer_coin",
+  "game_turnover",
+  "game_payout",
+  "lucky_gift_turnover",
+  "lucky_gift_payout",
+  "super_lucky_gift_turnover",
+  "super_lucky_gift_payout",
+  "gift_coin_spent",
+  "coin_total",
+  "consumed_coin",
+  "output_coin",
+  "platform_grant_coin",
+  "manual_grant_coin",
+  "salary_usd_minor",
+  "salary_transfer_coin",
+  "mic_online_ms",
+  "mic_online_users",
+  "d1_retention_users",
+  "d1_retention_base_users",
+  "d7_retention_users",
+  "d7_retention_base_users",
+  "d30_retention_users",
+  "d30_retention_base_users"
+];
+
+function readNumeric(row, key) {
+  const value = row?.[key];
+  if (isBlank(value)) {
+    return null;
+  }
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : null;
+}
+
+// 余额快照类指标只在"空间"维度可加（跨国家/区域/App），跨天求和没有业务含义；
+// 跨天聚合时取最后一天的快照（与后端整段口径一致）。
+const SNAPSHOT_METRIC_KEYS = new Set(["coin_total", "salary_usd_minor"]);
+
+// aggregateMetricMaps 把若干行（App 合计、区域行、日行）合并成一行：
+// 可加字段求和（全缺失保持 null → 显示 "--"），比例/均值按分子分母重算，避免"平均百分比"这类错误口径。
+// 行集跨多天时传 { acrossTime: true }，快照字段只累计最后一天的行。
+export function aggregateMetricMaps(rows, { acrossTime = false } = {}) {
+  const out = {};
+  let latestDay = "";
+  if (acrossTime) {
+    rows.forEach((row) => {
+      const day = String(row?.stat_day || "");
+      if (day > latestDay) {
+        latestDay = day;
+      }
+    });
+  }
+  ADDITIVE_METRIC_KEYS.forEach((key) => {
+    const snapshotOnly = acrossTime && SNAPSHOT_METRIC_KEYS.has(key);
+    let sum = null;
+    rows.forEach((row) => {
+      if (snapshotOnly && String(row?.stat_day || "") !== latestDay) {
+        return;
+      }
+      const value = readNumeric(row, key);
+      if (value !== null) {
+        sum = (sum ?? 0) + value;
+      }
+    });
+    out[key] = sum;
+  });
+
+  const recharge = out.recharge_usd_minor;
+  const active = out.active_users;
+  const paid = out.paid_users;
+  out.arpu_usd_minor = recharge !== null && active ? Math.round(recharge / active) : null;
+  out.arppu_usd_minor = recharge !== null && paid ? Math.round(recharge / paid) : null;
+  out.paid_conversion_rate = paid !== null && active ? paid / active : null;
+  out.recharge_conversion_rate = out.recharge_users !== null && active ? out.recharge_users / active : null;
+  out.game_profit_rate = out.game_turnover ? (out.game_turnover - (out.game_payout ?? 0)) / out.game_turnover : null;
+  out.lucky_gift_profit_rate = out.lucky_gift_turnover
+    ? (out.lucky_gift_turnover - (out.lucky_gift_payout ?? 0)) / out.lucky_gift_turnover
+    : null;
+  out.super_lucky_gift_profit_rate = out.super_lucky_gift_turnover
+    ? (out.super_lucky_gift_turnover - (out.super_lucky_gift_payout ?? 0)) / out.super_lucky_gift_turnover
+    : null;
+  out.consume_output_ratio = out.consumed_coin !== null && out.output_coin ? out.consumed_coin / out.output_coin : null;
+  out.avg_mic_online_ms = out.mic_online_ms !== null && out.mic_online_users ? Math.round(out.mic_online_ms / out.mic_online_users) : null;
+  ["d1", "d7", "d30"].forEach((day) => {
+    const users = out[`${day}_retention_users`];
+    const base = out[`${day}_retention_base_users`];
+    out[`${day}_retention_rate`] = users !== null && base ? users / base : null;
+  });
+  return out;
+}
+
+// App 品牌色：chips、图表系列、行标识统一取色，保证同一 App 全站同色。
+// 已知 App 用固定映射（与筛选状态无关）；未知 App 按 code 哈希取色，避免"选中子集后颜色漂移"。
+const APP_COLOR_PALETTE = ["#2563eb", "#0e9488", "#d97706", "#7c3aed", "#db2777", "#059669", "#dc2626", "#4f46e5"];
+const APP_COLOR_FIXED = { aslan: 2, fami: 3, huwaa: 4, lalu: 0, yumi: 1 };
+
+export function appColor(appCode) {
+  const code = String(appCode || "").toLowerCase();
+  if (code in APP_COLOR_FIXED) {
+    return APP_COLOR_PALETTE[APP_COLOR_FIXED[code]];
+  }
+  let hash = 0;
+  for (let index = 0; index < code.length; index += 1) {
+    hash = (hash * 31 + code.charCodeAt(index)) >>> 0;
+  }
+  return APP_COLOR_PALETTE[hash % APP_COLOR_PALETTE.length];
+}

databi/src/social/state.js

@@ -0,0 +1,206 @@
+// 社交 BI v2 的全局筛选状态：日期预设/自定义区间、App 多选、区域多选、趋势粒度，
+// 并同步到 URL query，保证筛选状态可以直接作为链接分享。
+
+import { lastDaysRange, thisMonthRange, todayRange } from "../utils/time.js";
+
+export const ALL = "all";
+
+export const DATE_PRESETS = [
+  { key: "today", label: "今日" },
+  { key: "yesterday", label: "昨日" },
+  { key: "last7", label: "近 7 日" },
+  { key: "last30", label: "近 30 日" },
+  { key: "month", label: "本月" },
+  { key: "prevMonth", label: "上月" },
+  { key: "custom", label: "自定义" }
+];
+
+export const GRANULARITIES = [
+  { key: "day", label: "日" },
+  { key: "week", label: "周" },
+  { key: "month", label: "月" }
+];
+
+export function createDefaultFilters() {
+  return {
+    apps: [ALL],
+    customEnd: "",
+    customStart: "",
+    granularity: "day",
+    preset: "yesterday",
+    regions: [ALL]
+  };
+}
+
+export function resolveDateRange(filters, timeZone) {
+  const today = todayRange(timeZone).start;
+  switch (filters.preset) {
+    case "today":
+      return { end: today, start: today };
+    case "yesterday": {
+      const yesterday = shiftDate(today, -1);
+      return { end: yesterday, start: yesterday };
+    }
+    case "last7": {
+      const range = lastDaysRange(7, timeZone);
+      return { end: range.end, start: range.start };
+    }
+    case "last30": {
+      const range = lastDaysRange(30, timeZone);
+      return { end: range.end, start: range.start };
+    }
+    case "month": {
+      const range = thisMonthRange(timeZone);
+      return { end: range.end, start: range.start };
+    }
+    case "prevMonth": {
+      const monthStart = thisMonthRange(timeZone).start;
+      const prevEnd = shiftDate(monthStart, -1);
+      return { end: prevEnd, start: `${prevEnd.slice(0, 7)}-01` };
+    }
+    case "custom": {
+      const start = normalizeDateText(filters.customStart) || shiftDate(today, -7);
+      const end = normalizeDateText(filters.customEnd) || today;
+      return end < start ? { end: start, start: end } : { end, start };
+    }
+    default: {
+      const yesterday = shiftDate(today, -1);
+      return { end: yesterday, start: yesterday };
+    }
+  }
+}
+
+export function rangeDayCount(range) {
+  const start = Date.parse(`${range.start}T00:00:00Z`);
+  const end = Date.parse(`${range.end}T00:00:00Z`);
+  if (!Number.isFinite(start) || !Number.isFinite(end) || end < start) {
+    return 1;
+  }
+  return Math.round((end - start) / 86400000) + 1;
+}
+
+export function rangeLabel(range) {
+  return range.start === range.end ? range.start : `${range.start} ~ ${range.end}`;
+}
+
+export function shiftDate(dateText, days) {
+  const [year, month, day] = String(dateText).split("-").map(Number);
+  const date = new Date(Date.UTC(year || 1970, (month || 1) - 1, (day || 1) + days));
+  return `${date.getUTCFullYear()}-${pad2(date.getUTCMonth() + 1)}-${pad2(date.getUTCDate())}`;
+}
+
+function normalizeDateText(value) {
+  const text = String(value || "").trim();
+  return /^\d{4}-\d{2}-\d{2}$/.test(text) ? text : "";
+}
+
+function pad2(value) {
+  return String(value).padStart(2, "0");
+}
+
+// stat_day → 周/月粒度的分桶 key；周取周一为锚点，与运营周报口径一致。
+export function bucketDay(statDay, granularity) {
+  if (granularity === "month") {
+    return String(statDay).slice(0, 7);
+  }
+  if (granularity === "week") {
+    const time = Date.parse(`${statDay}T00:00:00Z`);
+    if (!Number.isFinite(time)) {
+      return statDay;
+    }
+    const date = new Date(time);
+    const weekday = (date.getUTCDay() + 6) % 7;
+    date.setUTCDate(date.getUTCDate() - weekday);
+    return `${date.getUTCFullYear()}-${pad2(date.getUTCMonth() + 1)}-${pad2(date.getUTCDate())}`;
+  }
+  return statDay;
+}
+
+const URL_KEYS = ["preset", "start", "end", "apps", "regions", "view", "granularity"];
+
+export function readStateFromURL(location = window.location) {
+  const params = new URLSearchParams(location.search);
+  const filters = createDefaultFilters();
+  let view = "";
+  if (params.get("preset") && DATE_PRESETS.some((item) => item.key === params.get("preset"))) {
+    filters.preset = params.get("preset");
+  }
+  filters.customStart = normalizeDateText(params.get("start"));
+  filters.customEnd = normalizeDateText(params.get("end"));
+  if (params.get("apps")) {
+    filters.apps = params.get("apps").split(",").map((item) => item.trim().toLowerCase()).filter(Boolean);
+  }
+  if (params.get("regions")) {
+    filters.regions = params.get("regions").split(",").map((item) => item.trim()).filter(Boolean);
+  }
+  if (params.get("granularity") && GRANULARITIES.some((item) => item.key === params.get("granularity"))) {
+    filters.granularity = params.get("granularity");
+  }
+  if (params.get("view")) {
+    view = params.get("view");
+  }
+  if (!filters.apps.length) {
+    filters.apps = [ALL];
+  }
+  if (!filters.regions.length) {
+    filters.regions = [ALL];
+  }
+  return { filters, view };
+}
+
+export function writeStateToURL(filters, view, history = window.history, location = window.location) {
+  const params = new URLSearchParams(location.search);
+  URL_KEYS.forEach((key) => params.delete(key));
+  if (filters.preset !== "yesterday") {
+    params.set("preset", filters.preset);
+  }
+  if (filters.preset === "custom") {
+    if (filters.customStart) {
+      params.set("start", filters.customStart);
+    }
+    if (filters.customEnd) {
+      params.set("end", filters.customEnd);
+    }
+  }
+  if (filters.apps.length && !filters.apps.includes(ALL)) {
+    params.set("apps", filters.apps.join(","));
+  }
+  if (filters.regions.length && !filters.regions.includes(ALL)) {
+    params.set("regions", filters.regions.join(","));
+  }
+  if (filters.granularity !== "day") {
+    params.set("granularity", filters.granularity);
+  }
+  if (view && view !== "overview") {
+    params.set("view", view);
+  }
+  const query = params.toString();
+  history.replaceState(null, "", `${location.pathname}${query ? `?${query}` : ""}`);
+}
+
+// 区域选择值格式：整 App = `app:<appCode>`，单区域 = `<appCode>:<regionId>`。
+export function regionSelectionMatches(selection, appCode, regionId) {
+  if (!selection?.length || selection.includes(ALL)) {
+    return true;
+  }
+  return selection.includes(`app:${appCode}`) || selection.includes(`${appCode}:${regionId}`);
+}
+
+export function appSelectionMatches(selection, appCode) {
+  if (!selection?.length || selection.includes(ALL)) {
+    return true;
+  }
+  return selection.includes(String(appCode || "").toLowerCase());
+}
+
+export function toggleMultiValue(current, value, allValues) {
+  if (value === ALL) {
+    return [ALL];
+  }
+  const withoutAll = current.filter((item) => item !== ALL);
+  const next = withoutAll.includes(value) ? withoutAll.filter((item) => item !== value) : [...withoutAll, value];
+  if (!next.length || (allValues?.length && allValues.every((item) => next.includes(item)))) {
+    return [ALL];
+  }
+  return next;
+}

databi/src/social/useSocialBiData.js

@@ -0,0 +1,238 @@
+// 社交 BI v2 的数据层：负责 master/overview/funnel/kpi 接口的拉取与派生行，
+// 视图不直接调 API，只消费这里的产物（原始 snake_case 指标行 + 维度字段）。
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { fetchSocialBiFunnel, fetchSocialBiKpi, fetchSocialBiMaster, fetchSocialBiOverview } from "../api.js";
+import { DEFAULT_TIME_ZONE, rangeEndMs, rangeStartMs } from "../utils/time.js";
+import { ALL, appSelectionMatches, regionSelectionMatches, resolveDateRange } from "./state.js";
+
+export const SOCIAL_BI_TZ = DEFAULT_TIME_ZONE;
+export const SOCIAL_BI_FUNNEL_APP_CODES = ["lalu", "huwaa", "fami"];
+
+export function useSocialBiData(filters) {
+  const [master, setMaster] = useState(null);
+  // 数据请求等 master 结果落地后再发：否则会先用兜底 App 列表打一轮，master 到达后立刻重打一轮（整轮浪费）。
+  const [isMasterSettled, setIsMasterSettled] = useState(false);
+  const [overview, setOverview] = useState(null);
+  const [funnel, setFunnel] = useState(null);
+  const [kpi, setKpi] = useState(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [errors, setErrors] = useState([]);
+  const [refreshToken, setRefreshToken] = useState(0);
+  const requestSeq = useRef(0);
+
+  useEffect(() => {
+    let ignore = false;
+    fetchSocialBiMaster()
+      .then((data) => {
+        if (!ignore && data) {
+          setMaster(data);
+        }
+      })
+      .catch(() => {
+        if (!ignore) {
+          setMaster(null);
+        }
+      })
+      .finally(() => {
+        if (!ignore) {
+          setIsMasterSettled(true);
+        }
+      });
+    return () => {
+      ignore = true;
+    };
+  }, []);
+
+  // range 只依赖日期相关筛选：切换粒度/区域/App 多选不应触发接口重拉（那些是纯前端派生）。
+  const { customEnd, customStart, preset } = filters;
+  const range = useMemo(
+    () => resolveDateRange({ customEnd, customStart, preset }, SOCIAL_BI_TZ),
+    [customEnd, customStart, preset]
+  );
+  const appCodes = useMemo(() => {
+    const available = (master?.apps || []).map((app) => app.app_code);
+    if (!filters.apps.length || filters.apps.includes(ALL)) {
+      return available;
+    }
+    return filters.apps.filter((appCode) => !available.length || available.includes(appCode));
+  }, [filters.apps, master]);
+  const funnelAppCodes = useMemo(() => {
+    const available = (master?.apps || []).map((app) => app.app_code).filter((appCode) => SOCIAL_BI_FUNNEL_APP_CODES.includes(appCode));
+    if (!filters.apps.length || filters.apps.includes(ALL)) {
+      return available;
+    }
+    const selected = filters.apps.filter((appCode) => available.includes(appCode));
+    return selected.length ? selected : available;
+  }, [filters.apps, master]);
+
+  useEffect(() => {
+    if (!isMasterSettled) {
+      return;
+    }
+    const sequence = ++requestSeq.current;
+    const startMs = rangeStartMs(range, SOCIAL_BI_TZ);
+    const endMs = rangeEndMs(range, SOCIAL_BI_TZ);
+    setIsLoading(true);
+    Promise.allSettled([
+      fetchSocialBiOverview({ appCodes, endMs, startMs, statTz: SOCIAL_BI_TZ }),
+      fetchSocialBiFunnel({ appCodes: funnelAppCodes, endMs, startMs, statTz: SOCIAL_BI_TZ }),
+      fetchSocialBiKpi({ appCodes, endMs, startMs, statTz: SOCIAL_BI_TZ })
+    ]).then(([overviewResult, funnelResult, kpiResult]) => {
+      if (sequence !== requestSeq.current) {
+        return;
+      }
+      const nextErrors = [];
+      if (overviewResult.status === "fulfilled") {
+        setOverview(overviewResult.value);
+        (overviewResult.value?.apps || []).forEach((app) => {
+          if (app.error) {
+            nextErrors.push(`${app.app_name || app.app_code}: ${app.error}`);
+          }
+        });
+      } else {
+        setOverview(null);
+        nextErrors.push(`统计数据加载失败: ${overviewResult.reason?.message || "未知错误"}`);
+      }
+      if (funnelResult.status === "fulfilled") {
+        setFunnel(funnelResult.value);
+        (funnelResult.value?.apps || []).forEach((app) => {
+          if (app.error) {
+            nextErrors.push(`${app.app_name || app.app_code}: ${app.error}`);
+          }
+        });
+      } else {
+        setFunnel(null);
+        nextErrors.push(`埋点漏斗加载失败: ${funnelResult.reason?.message || "未知错误"}`);
+      }
+      if (kpiResult.status === "fulfilled") {
+        setKpi(kpiResult.value);
+        Object.entries(kpiResult.value?.app_errors || {}).forEach(([appCode, message]) => {
+          nextErrors.push(`${appCode}: ${message}`);
+        });
+      } else {
+        setKpi(null);
+        nextErrors.push(`运营充值数据加载失败: ${kpiResult.reason?.message || "未知错误"}`);
+      }
+      setErrors(nextErrors);
+      setIsLoading(false);
+    });
+  }, [appCodes, funnelAppCodes, isMasterSettled, range, refreshToken]);
+
+  const refresh = useCallback(() => {
+    setRefreshToken((current) => current + 1);
+  }, []);
+
+  const derived = useMemo(() => deriveRows(overview, filters, master), [filters, master, overview]);
+
+  return {
+    appCodes,
+    derived,
+    errors,
+    funnel,
+    funnelAppCodes,
+    isLoading,
+    kpi,
+    master,
+    overview,
+    range,
+    refresh
+  };
+}
+
+// deriveRows 输出四类行，全部带维度字段 + 原始指标字段：
+// appTotals/appDaily（App 粒度）、regionTotals/regionDaily（大区粒度，已按顶栏区域选择过滤）、
+// countryTotals（国家粒度，已按国家→区域目录归一 region_id 并跟随区域筛选）。restricted=true 表示该 App 已被数据范围裁剪。
+function deriveRows(overview, filters, master) {
+  const appTotals = [];
+  const appDaily = [];
+  const regionTotals = [];
+  const regionDaily = [];
+  const countryTotals = [];
+  const appErrors = [];
+  const regionByCountry = buildRegionByCountryIndex(master);
+
+  (overview?.apps || []).forEach((app) => {
+    if (!appSelectionMatches(filters.apps, app.app_code)) {
+      return;
+    }
+    const context = {
+      app_code: app.app_code,
+      app_name: app.app_name || app.app_code,
+      kind: app.kind,
+      restricted: Boolean(app.restricted)
+    };
+    if (app.error) {
+      appErrors.push({ ...context, error: app.error });
+      return;
+    }
+    appTotals.push({ ...context, ...(app.total || {}) });
+    (app.daily_series || []).forEach((row) => {
+      appDaily.push({ ...context, ...row, stat_day: row.stat_day || row.label });
+    });
+    (app.region_breakdown || []).forEach((row) => {
+      if (!regionSelectionMatches(filters.regions, app.app_code, Number(row.region_id ?? 0))) {
+        return;
+      }
+      regionTotals.push({
+        ...context,
+        ...row,
+        region_id: Number(row.region_id ?? 0),
+        region_name: row.region_name || row.region_code || `区域 ${row.region_id}`
+      });
+    });
+    (app.daily_region_breakdown || []).forEach((row) => {
+      if (!regionSelectionMatches(filters.regions, app.app_code, Number(row.region_id ?? 0))) {
+        return;
+      }
+      regionDaily.push({
+        ...context,
+        ...row,
+        region_id: Number(row.region_id ?? 0),
+        region_name: row.region_name || row.region_code || `区域 ${row.region_id}`,
+        stat_day: row.stat_day || row.label
+      });
+    });
+    (app.country_breakdown || []).forEach((row) => {
+      const countryCode = row.country_code || String(row.country_id || "");
+      // legacy 国家行不带 region_id，用区域目录（countries 列表）归一，保证下钻与区域筛选口径一致。
+      let regionId = Number(row.region_id ?? 0);
+      let regionName = row.region_name || "";
+      if (!regionId) {
+        const region = regionByCountry.get(`${app.app_code}:${String(countryCode).toUpperCase()}`);
+        if (region) {
+          regionId = region.region_id;
+          regionName = region.region_name || region.region_code || regionName;
+        }
+      }
+      if (!regionSelectionMatches(filters.regions, app.app_code, regionId)) {
+        return;
+      }
+      countryTotals.push({
+        ...context,
+        ...row,
+        country_code: countryCode,
+        country_name: row.country_name || row.country || row.country_code || `国家 ${row.country_id}`,
+        region_id: regionId,
+        region_name: regionName
+      });
+    });
+  });
+
+  // 顶栏选了区域时，App 合计/日行切换成所选区域行的聚合视角由各视图用 regionScoped 判断。
+  const regionScoped = Boolean(filters.regions.length && !filters.regions.includes(ALL));
+  return { appDaily, appErrors, appTotals, countryTotals, regionDaily, regionScoped, regionTotals };
+}
+
+function buildRegionByCountryIndex(master) {
+  const index = new Map();
+  (master?.regions || []).forEach((region) => {
+    (region.countries || []).forEach((countryCode) => {
+      const key = `${region.app_code}:${String(countryCode).toUpperCase()}`;
+      if (!index.has(key)) {
+        index.set(key, region);
+      }
+    });
+  });
+  return index;
+}

databi/src/social/views/DataTableView.jsx

@@ -0,0 +1,318 @@
+// DataTableView：数据明细视图 —— Excel 式全字段宽表（维度切换 / 列组开关 / 指标排序 /
+// 首列冻结 / CSV 导出）。行数据保持后端原始 snake_case 口径，渲染时经 metrics.js 统一格式化。
+
+import { useMemo, useState } from "react";
+import Button from "@mui/material/Button";
+import FileDownloadOutlined from "@mui/icons-material/FileDownloadOutlined";
+import { useSocialBi } from "../SocialBiApp.jsx";
+import {
+  METRIC_GROUPS,
+  aggregateMetricMaps,
+  formatMetric,
+  metricChartValue,
+  metricLabel,
+  metricTooltip
+} from "../metrics.js";
+import { downloadCsv, isBlank } from "../format.js";
+import { rangeLabel } from "../state.js";
+import "./data-table-view.css";
+
+const GROUPS_STORAGE_KEY = "hyapp-admin.sbi-table-groups";
+const MAX_RENDER_ROWS = 400;
+const SKELETON_WIDTHS = ["42%", "100%", "96%", "91%", "86%", "81%"];
+const EMPTY_ROWS = [];
+
+// 维度列定义：value 取行上的展示文本，totalText 是合计行占位（日期列"汇总"，其余"全部"）。
+const DIM_COLUMNS = {
+  app: { label: "App", totalText: "全部", value: (row) => row.app_name || row.app_code || "--" },
+  country: { label: "国家", totalText: "全部", value: (row) => row.country_name || row.country_code || "--" },
+  day: { label: "日期", totalText: "汇总", value: (row) => row.stat_day || "--" },
+  region: { label: "区域", totalText: "全部", value: (row) => row.region_name || row.region_code || "--" }
+};
+
+// 五种明细维度：key 与 derived 的行集字段一一对应。
+const DIMENSIONS = [
+  { csvName: "app-daily", dims: ["day", "app"], hasDay: true, key: "appDaily", label: "App×日" },
+  { csvName: "app-total", dims: ["app"], hasDay: false, key: "appTotals", label: "App 合计" },
+  { csvName: "region-daily", dims: ["day", "app", "region"], hasDay: true, key: "regionDaily", label: "区域×日" },
+  { csvName: "region-total", dims: ["app", "region"], hasDay: false, key: "regionTotals", label: "区域合计" },
+  { csvName: "country", dims: ["app", "country"], hasDay: false, key: "countryTotals", label: "国家" }
+];
+
+function readClosedGroups() {
+  try {
+    const raw = window.localStorage.getItem(GROUPS_STORAGE_KEY);
+    const parsed = raw ? JSON.parse(raw) : [];
+    if (Array.isArray(parsed)) {
+      const validKeys = new Set(METRIC_GROUPS.map((group) => group.key));
+      return parsed.filter((key) => validKeys.has(key));
+    }
+  } catch {
+    // localStorage 不可用或内容损坏时回退为全部列组展开。
+  }
+  return [];
+}
+
+function writeClosedGroups(keys) {
+  try {
+    window.localStorage.setItem(GROUPS_STORAGE_KEY, JSON.stringify(keys));
+  } catch {
+    // 存储失败只影响持久化，不影响本次会话内的开关状态。
+  }
+}
+
+function metricSortValue(row, key) {
+  const value = row?.[key];
+  if (isBlank(value)) {
+    return null;
+  }
+  const numeric = Number(value);
+  return Number.isFinite(numeric) ? numeric : null;
+}
+
+// null 视为最小：desc 时缺失口径沉底，asc 时排最前。
+function compareMetric(a, b, key, dir) {
+  const left = metricSortValue(a, key);
+  const right = metricSortValue(b, key);
+  const leftValue = left === null ? Number.NEGATIVE_INFINITY : left;
+  const rightValue = right === null ? Number.NEGATIVE_INFINITY : right;
+  if (leftValue === rightValue) {
+    return 0;
+  }
+  return dir === "asc" ? leftValue - rightValue : rightValue - leftValue;
+}
+
+function rowIdentity(row, dimKey, index) {
+  const parts = [row.app_code, row.region_id, row.country_code, row.stat_day].filter(
+    (part) => part !== undefined && part !== null && part !== ""
+  );
+  return parts.length ? `${dimKey}:${parts.join("|")}` : `${dimKey}:${index}`;
+}
+
+export function DataTableView() {
+  const { derived, isLoading, range } = useSocialBi();
+  const [dimKey, setDimKey] = useState("appDaily");
+  const [closedGroups, setClosedGroups] = useState(readClosedGroups);
+  const [sort, setSort] = useState(null);
+
+  const dim = DIMENSIONS.find((item) => item.key === dimKey) || DIMENSIONS[0];
+  const dimColumns = dim.dims.map((name) => DIM_COLUMNS[name]);
+  const hasDay = dim.hasDay;
+  const baseRows = derived?.[dim.key] || EMPTY_ROWS;
+
+  const visibleGroups = useMemo(() => METRIC_GROUPS.filter((group) => !closedGroups.includes(group.key)), [closedGroups]);
+  const visibleMetrics = useMemo(() => visibleGroups.flatMap((group) => group.metrics), [visibleGroups]);
+
+  // 排序列被列组开关隐藏时回退到维度默认排序。
+  const activeSort = sort && visibleMetrics.includes(sort.key) ? sort : null;
+
+  // 排序/合计每次渲染重算（行集千行量级可接受）；react-hooks 的 preserve-manual-memoization
+  // 规则不允许在这里包 useMemo（依赖来自模块常量推导，编译器无法证明不可变）。
+  const sortedRows = [...baseRows];
+  if (activeSort) {
+    sortedRows.sort((a, b) => compareMetric(a, b, activeSort.key, activeSort.dir));
+  } else if (hasDay) {
+    sortedRows.sort((a, b) => {
+      if (a.stat_day !== b.stat_day) {
+        return String(a.stat_day) < String(b.stat_day) ? 1 : -1;
+      }
+      return compareMetric(a, b, "recharge_usd_minor", "desc");
+    });
+  } else {
+    sortedRows.sort((a, b) => compareMetric(a, b, "recharge_usd_minor", "desc"));
+  }
+
+  // 日维度的汇总跨天：余额快照类指标（金币数量/存量工资）只取最后一天，避免按天数放大。
+  const totalRow = sortedRows.length ? aggregateMetricMaps(sortedRows, { acrossTime: hasDay }) : null;
+  const renderRows = sortedRows.slice(0, MAX_RENDER_ROWS);
+  const isTruncated = sortedRows.length > MAX_RENDER_ROWS;
+  const hasRestricted = baseRows.some((row) => row.restricted);
+  const columnCount = dimColumns.length + visibleMetrics.length;
+
+  const handleDimChange = (key) => {
+    setDimKey(key);
+    setSort(null);
+  };
+
+  const toggleGroup = (key) => {
+    const next = closedGroups.includes(key) ? closedGroups.filter((item) => item !== key) : [...closedGroups, key];
+    setClosedGroups(next);
+    writeClosedGroups(next);
+  };
+
+  const handleSort = (key) => {
+    setSort((current) => (current?.key === key ? { dir: current.dir === "desc" ? "asc" : "desc", key } : { dir: "desc", key }));
+  };
+
+  // 导出当前可见列与排序后的全部行：金额转美元、比例转百分数、缺失导出空串。
+  const handleExport = () => {
+    const header = [...dimColumns.map((column) => column.label), ...visibleMetrics.map((key) => metricLabel(key))];
+    const rows = sortedRows.map((row) => [
+      ...dimColumns.map((column) => column.value(row)),
+      ...visibleMetrics.map((key) => {
+        const value = metricChartValue(key, row[key]);
+        return value === null ? "" : value;
+      })
+    ]);
+    downloadCsv(`social-bi-${dim.csvName}-${rangeLabel(range).replace(/\s+/g, "")}.csv`, header, rows);
+  };
+
+  let content;
+  if (isLoading && !baseRows.length) {
+    content = (
+      <div className="sbi-dt-skeleton" aria-label="数据加载中">
+        {SKELETON_WIDTHS.map((width) => (
+          <span className="sbi-skeleton" key={width} style={{ width }} />
+        ))}
+      </div>
+    );
+  } else if (!baseRows.length) {
+    content = (
+      <div className="sbi-empty">
+        <strong>当前维度暂无数据</strong>
+        <span>
+          {dim.dims.includes("region")
+            ? "该区间没有区域级数据，可能尚未配置区域目录；试试更换日期区间或切换其它维度"
+            : "试试更换日期区间、调整 App 筛选或切换其它维度"}
+        </span>
+      </div>
+    );
+  } else if (!visibleMetrics.length) {
+    content = (
+      <div className="sbi-empty">
+        <strong>所有列组已隐藏</strong>
+        <span>点击上方列组开关，恢复需要查看的指标列</span>
+      </div>
+    );
+  } else {
+    content = (
+      <div className="sbi-table-scroll sbi-dt-scroll">
+        <table className="sbi-table sbi-dt-table">
+          <thead>
+            <tr>
+              {dimColumns.map((column, index) => (
+                <th className={index === 0 ? "is-left sbi-dt-sticky" : "is-left"} key={column.label} rowSpan={2}>
+                  {column.label}
+                </th>
+              ))}
+              {visibleGroups.map((group) => (
+                <th className="sbi-dt-group-th" colSpan={group.metrics.length} key={group.key}>
+                  {group.label}
+                </th>
+              ))}
+            </tr>
+            <tr>
+              {visibleMetrics.map((key) => {
+                const isSorted = activeSort?.key === key;
+                return (
+                  <th
+                    aria-sort={isSorted ? (activeSort.dir === "desc" ? "descending" : "ascending") : undefined}
+                    className={isSorted ? "sbi-dt-metric-th is-sorted" : "sbi-dt-metric-th"}
+                    key={key}
+                    onClick={() => handleSort(key)}
+                  >
+                    <span className="sbi-metric-hint" title={metricTooltip(key)}>
+                      {metricLabel(key)}
+                    </span>
+                    {isSorted ? <span className="sbi-dt-sort">{activeSort.dir === "desc" ? "↓" : "↑"}</span> : null}
+                  </th>
+                );
+              })}
+            </tr>
+          </thead>
+          <tbody>
+            {totalRow ? (
+              <tr className="is-total">
+                {dimColumns.map((column, index) => (
+                  <td className={index === 0 ? "is-left sbi-dt-sticky" : "is-left"} key={column.label}>
+                    {column.totalText}
+                  </td>
+                ))}
+                {visibleMetrics.map((key) => (
+                  <td key={key}>{formatMetric(key, totalRow[key])}</td>
+                ))}
+              </tr>
+            ) : null}
+            {renderRows.map((row, rowIndex) => (
+              <tr key={rowIdentity(row, dim.key, rowIndex)}>
+                {dimColumns.map((column, index) => (
+                  <td className={index === 0 ? "is-left sbi-dt-sticky" : "is-left"} key={column.label}>
+                    {column.value(row)}
+                  </td>
+                ))}
+                {visibleMetrics.map((key) => (
+                  <td key={key}>{formatMetric(key, row[key])}</td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+          {isTruncated ? (
+            <tfoot>
+              <tr className="sbi-dt-note">
+                <td colSpan={columnCount}>已截断，共 {sortedRows.length} 行，可导出 CSV 查看全部</td>
+              </tr>
+            </tfoot>
+          ) : null}
+        </table>
+      </div>
+    );
+  }
+
+  return (
+    <section className="sbi-card">
+      <div className="sbi-card-header">
+        <strong>数据明细</strong>
+        <small>
+          {rangeLabel(range)} · 共 {sortedRows.length} 行
+        </small>
+      </div>
+      <div className="sbi-dt-tools">
+        <div className="sbi-seg" role="radiogroup" aria-label="明细维度">
+          {DIMENSIONS.map((item) => (
+            <button
+              aria-checked={dim.key === item.key}
+              className={dim.key === item.key ? "is-active" : ""}
+              key={item.key}
+              onClick={() => handleDimChange(item.key)}
+              role="radio"
+              type="button"
+            >
+              {item.label}
+            </button>
+          ))}
+        </div>
+        <div className="sbi-dt-groups" role="group" aria-label="列组开关">
+          <span className="sbi-dt-groups-label">列组</span>
+          {METRIC_GROUPS.map((group) => {
+            const isOpen = !closedGroups.includes(group.key);
+            return (
+              <button
+                aria-pressed={isOpen}
+                className={isOpen ? "sbi-chip is-active" : "sbi-chip"}
+                key={group.key}
+                onClick={() => toggleGroup(group.key)}
+                title={isOpen ? "点击隐藏该组指标列" : "点击显示该组指标列"}
+                type="button"
+              >
+                {group.label}
+              </button>
+            );
+          })}
+        </div>
+        {hasRestricted ? <span className="sbi-badge">已按数据范围过滤</span> : null}
+        <div className="sbi-dt-export">
+          <Button
+            disabled={!sortedRows.length || !visibleMetrics.length}
+            onClick={handleExport}
+            size="small"
+            startIcon={<FileDownloadOutlined />}
+            variant="outlined"
+          >
+            导出 CSV
+          </Button>
+        </div>
+      </div>
+      {content}
+    </section>
+  );
+}

databi/src/social/views/FunnelView.jsx

@@ -0,0 +1,382 @@
+// 埋点漏斗：展示 App 原始 tracking 事件的总体漏斗、失败诊断和 D1 cohort。
+// 数据源为 statistics-service 的 app_tracking_events 聚合结果，视图只做跨 App 求和和排序。
+
+import { useMemo, useState } from "react";
+import { EChart } from "../../charts/EChart.jsx";
+import { formatCount, formatRatioPercent, isBlank } from "../format.js";
+import { rangeLabel } from "../state.js";
+import { useSocialBi } from "../SocialBiApp.jsx";
+import "./funnel-view.css";
+
+const COHORT_DIMENSIONS = [
+  { key: "country", label: "国家" },
+  { key: "language", label: "语言" },
+  { key: "channel", label: "渠道" },
+  { key: "login_method", label: "登录方式" },
+  { key: "first_room_stay", label: "首房停留时长" }
+];
+
+const COHORT_STEP_COLUMNS = [
+  { key: "login_success", label: "登录成功" },
+  { key: "profile_complete", label: "资料完成" },
+  { key: "room_join_success", label: "进房成功" },
+  { key: "stay_3m", label: "停留 3m" },
+  { key: "stay_10m", label: "停留 10m" },
+  { key: "send_message", label: "发消息" }
+];
+
+const SUMMARY_CARDS = [
+  { key: "login_start_users", label: "登录开始", type: "count" },
+  { key: "login_success_rate", label: "登录成功率", type: "ratio" },
+  { key: "room_join_success_users", label: "进房成功", type: "count" },
+  { key: "d1_retention_rate", label: "D1 留存", type: "ratio" },
+  { key: "room_join_fail_users", label: "进房失败", type: "count" }
+];
+
+const SUPPORTED_FUNNEL_APPS = "Lalu / Huwaa / Fami";
+
+export function FunnelView() {
+  const { funnel, isLoading, range } = useSocialBi();
+  const [dimension, setDimension] = useState("country");
+  const appRows = useMemo(() => (funnel?.apps || []).filter((app) => !app.error), [funnel]);
+  const appErrors = useMemo(() => (funnel?.apps || []).filter((app) => app.error), [funnel]);
+  const steps = useMemo(() => aggregateSteps(appRows), [appRows]);
+  const totals = useMemo(() => aggregateTotals(appRows), [appRows]);
+  const cohorts = useMemo(() => aggregateCohorts(appRows), [appRows]);
+  const selectedCohorts = useMemo(
+    () => (cohorts.get(dimension) || []).slice(0, 50),
+    [cohorts, dimension]
+  );
+  const chartOption = useMemo(() => funnelChartOption(steps), [steps]);
+
+  if (isLoading && !appRows.length) {
+    return (
+      <div className="sbi-funnel" aria-label="埋点漏斗加载中">
+        <div className="sbi-funnel-skeleton">
+          {["70%", "92%", "84%", "76%", "88%"].map((width) => (
+            <span className="sbi-skeleton" key={width} style={{ width }} />
+          ))}
+        </div>
+      </div>
+    );
+  }
+
+  if (!appRows.length) {
+    return (
+      <div className="sbi-funnel">
+        <div className="sbi-empty">
+          <strong>当前无埋点漏斗数据</strong>
+          <span>
+            {appErrors.length
+              ? "所选 App 暂未接入漏斗或统计服务返回错误"
+              : `埋点漏斗 App 筛选目前仅支持 ${SUPPORTED_FUNNEL_APPS}`}
+          </span>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="sbi-funnel">
+      <div className="sbi-funnel-head">
+        <div>
+          <h1>埋点漏斗</h1>
+          <span>
+            {rangeLabel(range)} · 仅支持 {SUPPORTED_FUNNEL_APPS}
+          </span>
+        </div>
+        <div className="sbi-funnel-apps">
+          {appRows.map((app) => (
+            <span key={app.app_code}>{app.app_name || app.app_code}</span>
+          ))}
+        </div>
+      </div>
+
+      {appErrors.length ? (
+        <div className="sbi-funnel-warning">
+          {appErrors.map((app) => (
+            <span key={app.app_code}>
+              {app.app_name || app.app_code}: {app.error}
+            </span>
+          ))}
+        </div>
+      ) : null}
+
+      <section className="sbi-funnel-summary" aria-label="漏斗核心指标">
+        {SUMMARY_CARDS.map((item) => (
+          <article className="sbi-card sbi-funnel-kpi" key={item.key}>
+            <span>{item.label}</span>
+            <strong>{item.type === "ratio" ? formatRatioPercent(totals[item.key]) : formatCount(totals[item.key])}</strong>
+          </article>
+        ))}
+      </section>
+
+      <section className="sbi-funnel-grid">
+        <article className="sbi-card sbi-funnel-chart-card">
+          <div className="sbi-card-title">
+            <div>
+              <h2>主路径转化</h2>
+              <span>按去重用户数计算</span>
+            </div>
+          </div>
+          <EChart className="sbi-funnel-chart" option={chartOption} />
+        </article>
+
+        <article className="sbi-card sbi-funnel-table-card">
+          <div className="sbi-card-title">
+            <div>
+              <h2>事件明细</h2>
+              <span>含进房失败和互动动作</span>
+            </div>
+          </div>
+          <div className="sbi-table-scroll sbi-funnel-step-scroll">
+            <table className="sbi-table sbi-funnel-step-table">
+              <thead>
+                <tr>
+                  <th className="is-left">事件</th>
+                  <th>用户</th>
+                  <th>次数</th>
+                  <th>上一步</th>
+                  <th>总转化</th>
+                  <th>流失</th>
+                </tr>
+              </thead>
+              <tbody>
+                {steps.map((step) => (
+                  <tr className={step.is_failure ? "is-failure" : ""} key={step.event_name}>
+                    <td className="is-left">
+                      <strong>{step.label || step.event_name}</strong>
+                      <span>{step.event_name}</span>
+                    </td>
+                    <td>{formatCount(step.user_count)}</td>
+                    <td>{formatCount(step.event_count)}</td>
+                    <td>{formatRatioPercent(step.previous_conversion_rate)}</td>
+                    <td>{formatRatioPercent(step.overall_conversion_rate)}</td>
+                    <td>{formatCount(step.dropoff_users)}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </article>
+      </section>
+
+      <section className="sbi-card sbi-funnel-cohort-card">
+        <div className="sbi-card-title sbi-funnel-cohort-title">
+          <div>
+            <h2>D1 Cohort</h2>
+            <span>基准用户为登录成功用户</span>
+          </div>
+          <div className="sbi-funnel-tabs" role="tablist" aria-label="D1 cohort 维度">
+            {COHORT_DIMENSIONS.map((item) => (
+              <button
+                aria-selected={dimension === item.key}
+                className={dimension === item.key ? "is-active" : ""}
+                key={item.key}
+                onClick={() => setDimension(item.key)}
+                role="tab"
+                type="button"
+              >
+                {item.label}
+              </button>
+            ))}
+          </div>
+        </div>
+        <div className="sbi-table-scroll sbi-funnel-cohort-scroll">
+          <table className="sbi-table sbi-funnel-cohort-table">
+            <thead>
+              <tr>
+                <th className="is-left">{COHORT_DIMENSIONS.find((item) => item.key === dimension)?.label || "Cohort"}</th>
+                <th>基准用户</th>
+                <th>D1 用户</th>
+                <th>D1 留存</th>
+                {COHORT_STEP_COLUMNS.map((item) => (
+                  <th key={item.key}>{item.label}</th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              {selectedCohorts.length ? (
+                selectedCohorts.map((row) => (
+                  <tr key={`${row.dimension}:${row.value}`}>
+                    <td className="is-left">
+                      <strong>{row.label || row.value || "unknown"}</strong>
+                    </td>
+                    <td>{formatCount(row.base_users)}</td>
+                    <td>{formatCount(row.d1_retention_users)}</td>
+                    <td>{formatRatioPercent(row.d1_retention_rate)}</td>
+                    {COHORT_STEP_COLUMNS.map((item) => (
+                      <td key={item.key}>{formatCount(stepUserCount(row, item.key))}</td>
+                    ))}
+                  </tr>
+                ))
+              ) : (
+                <tr>
+                  <td className="sbi-funnel-empty-cell" colSpan={4 + COHORT_STEP_COLUMNS.length}>
+                    当前维度暂无 cohort 数据
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function aggregateSteps(appRows) {
+  const order = [];
+  const byEvent = new Map();
+  appRows.forEach((app) => {
+    (app.steps || []).forEach((step) => {
+      const key = step.event_name || step.key;
+      if (!key) {
+        return;
+      }
+      if (!byEvent.has(key)) {
+        order.push(key);
+        byEvent.set(key, {
+          ...step,
+          device_count: 0,
+          event_count: 0,
+          user_count: 0
+        });
+      }
+      const current = byEvent.get(key);
+      current.device_count += Number(step.device_count || 0);
+      current.event_count += Number(step.event_count || 0);
+      current.user_count += Number(step.user_count || 0);
+      current.is_failure = Boolean(current.is_failure || step.is_failure);
+      if (!current.label) {
+        current.label = step.label;
+      }
+    });
+  });
+  const baseUsers = Number(byEvent.get("login_start")?.user_count || (order.length ? byEvent.get(order[0])?.user_count || 0 : 0));
+  let previousUsers = 0;
+  return order.map((key) => {
+    const step = byEvent.get(key);
+    const userCount = Number(step.user_count || 0);
+    const out = {
+      ...step,
+      dropoff_users: previousUsers > userCount ? previousUsers - userCount : 0,
+      overall_conversion_rate: ratio(userCount, baseUsers),
+      previous_conversion_rate: ratio(userCount, previousUsers)
+    };
+    previousUsers = userCount;
+    return out;
+  });
+}
+
+function aggregateTotals(appRows) {
+  const totals = {};
+  let d1Base = 0;
+  let d1Users = 0;
+  appRows.forEach((app) => {
+    Object.entries(app.totals || {}).forEach(([key, value]) => {
+      if (key.endsWith("_rate")) {
+        return;
+      }
+      totals[key] = Number(totals[key] || 0) + Number(value || 0);
+    });
+    d1Base += Number(app.totals?.d1_retention_base_users || 0);
+    d1Users += Number(app.totals?.d1_retention_users || 0);
+  });
+  totals.login_success_rate = ratio(totals.login_success_users, totals.login_start_users);
+  totals.d1_retention_rate = ratio(d1Users, d1Base);
+  return totals;
+}
+
+function aggregateCohorts(appRows) {
+  const grouped = new Map();
+  appRows.forEach((app) => {
+    (app.cohorts || []).forEach((cohort) => {
+      const dimension = cohort.dimension || "unknown";
+      const value = cohort.value || cohort.label || "unknown";
+      if (!grouped.has(dimension)) {
+        grouped.set(dimension, new Map());
+      }
+      const bucket = grouped.get(dimension);
+      if (!bucket.has(value)) {
+        bucket.set(value, {
+          dimension,
+          label: cohort.label || value,
+          value,
+          base_users: 0,
+          d1_retention_users: 0,
+          d1_retention_rate: 0,
+          steps: new Map()
+        });
+      }
+      const row = bucket.get(value);
+      row.base_users += Number(cohort.base_users || 0);
+      row.d1_retention_users += Number(cohort.d1_retention_users || 0);
+      (cohort.steps || []).forEach((step) => {
+        const eventName = step.event_name;
+        if (!eventName) {
+          return;
+        }
+        row.steps.set(eventName, Number(row.steps.get(eventName) || 0) + Number(step.user_count || 0));
+      });
+    });
+  });
+  const out = new Map();
+  grouped.forEach((bucket, dimension) => {
+    const rows = [...bucket.values()].map((row) => ({
+      ...row,
+      d1_retention_rate: ratio(row.d1_retention_users, row.base_users),
+      steps: [...row.steps.entries()].map(([event_name, user_count]) => ({ event_name, user_count }))
+    }));
+    rows.sort((left, right) => Number(right.base_users || 0) - Number(left.base_users || 0));
+    out.set(dimension, rows);
+  });
+  return out;
+}
+
+function stepUserCount(row, eventName) {
+  const step = (row.steps || []).find((item) => item.event_name === eventName);
+  return step?.user_count;
+}
+
+function funnelChartOption(steps) {
+  const data = steps
+    .filter((step) => !step.is_failure && Number(step.user_count || 0) > 0)
+    .map((step) => ({
+      name: step.label || step.event_name,
+      value: Number(step.user_count || 0)
+    }));
+  return {
+    color: ["#3056d3", "#3b82f6", "#14b8a6", "#22c55e", "#f59e0b", "#ef4444"],
+    series: [
+      {
+        bottom: 18,
+        data,
+        gap: 4,
+        label: {
+          color: "#1f2a44",
+          formatter: ({ name, value }) => `${name}\n${formatCount(value)}`
+        },
+        left: 18,
+        minSize: "8%",
+        right: 18,
+        sort: "none",
+        top: 10,
+        type: "funnel"
+      }
+    ],
+    tooltip: {
+      backgroundColor: "#ffffff",
+      borderColor: "#e3eaf3",
+      textStyle: { color: "#263246" },
+      valueFormatter: (value) => formatCount(value)
+    }
+  };
+}
+
+function ratio(numerator, denominator) {
+  if (isBlank(denominator) || Number(denominator) <= 0) {
+    return null;
+  }
+  return Number(numerator || 0) / Number(denominator);
+}

databi/src/social/views/OverviewView.jsx

@@ -0,0 +1,489 @@
+// OverviewView：经营概览首屏 —— Hero KPI、充值趋势、渠道构成、App 对比、区域 Top5。
+// 数据契约见 SocialBiApp.jsx 的 useSocialBi()；本视图只做展示与聚合，不直接调 API。
+
+import { useMemo, useState } from "react";
+import { EChart } from "../../charts/EChart.jsx";
+import { deltaDirection, formatCount, formatDeltaRate, formatMoney, isBlank } from "../format.js";
+import { aggregateMetricMaps, appColor, formatMetric, metricChartValue, metricLabel, metricTooltip } from "../metrics.js";
+import { useSocialBi } from "../SocialBiApp.jsx";
+import { bucketDay } from "../state.js";
+import "./overview-view.css";
+
+const HERO_METRICS = [
+  { deltaKey: "recharge_delta_rate", key: "recharge_usd_minor" },
+  { deltaKey: "new_users_delta_rate", key: "new_users" },
+  { deltaKey: "active_users_delta_rate", key: "active_users" },
+  { deltaKey: "paid_users_delta_rate", key: "paid_users" },
+  { deltaKey: "arppu_delta_rate", key: "arppu_usd_minor" },
+  { deltaKey: "", key: "paid_conversion_rate" }
+];
+
+const TREND_METRICS = [
+  { key: "recharge_usd_minor", label: "充值" },
+  { key: "new_users", label: "新增" },
+  { key: "active_users", label: "日活" },
+  { key: "gift_coin_spent", label: "礼物流水" }
+];
+
+const COMPARE_METRICS = [
+  { key: "recharge_usd_minor", label: "充值" },
+  { key: "active_users", label: "日活" },
+  { key: "new_users", label: "新增" }
+];
+
+const CHANNEL_METRICS = ["google_recharge_usd_minor", "mifapay_recharge_usd_minor", "coin_seller_recharge_usd_minor"];
+const CHANNEL_COLORS = ["#2557d6", "#0e7490", "#d97706"];
+
+const MONEY_METRIC_KEYS = new Set([
+  "recharge_usd_minor",
+  "google_recharge_usd_minor",
+  "mifapay_recharge_usd_minor",
+  "coin_seller_recharge_usd_minor"
+]);
+
+// 图表值已由 metricChartValue 换算（金额→美元），tooltip 里按指标类型补格式。
+function formatChartAmount(metricKey, value) {
+  if (isBlank(value)) {
+    return "--";
+  }
+  return MONEY_METRIC_KEYS.has(metricKey) ? formatMoney(value) : formatCount(value);
+}
+
+// 日行按 bucketDay 分桶，桶 key 升序；每桶保留原始行，由调用方再聚合。
+function buildBuckets(rows, granularity) {
+  const map = new Map();
+  rows.forEach((row) => {
+    const key = bucketDay(row.stat_day, granularity);
+    if (!map.has(key)) {
+      map.set(key, []);
+    }
+    map.get(key).push(row);
+  });
+  return [...map.keys()].sort().map((key) => ({ key, rows: map.get(key) }));
+}
+
+function buildStackedBarOption({ bucketKeys, series, valueMetric }) {
+  return {
+    grid: { bottom: 4, containLabel: true, left: 8, right: 8, top: 28 },
+    legend: { itemHeight: 10, itemWidth: 10, left: 0, textStyle: { color: "#5b7089", fontSize: 12 }, top: 0 },
+    series,
+    tooltip: {
+      axisPointer: { type: "shadow" },
+      backgroundColor: "#ffffff",
+      borderColor: "#e3eaf3",
+      formatter: (params) => {
+        const list = Array.isArray(params) ? params : [params];
+        let total = null;
+        const lines = list.map((item) => {
+          const numeric = isBlank(item.value) || !Number.isFinite(Number(item.value)) ? null : Number(item.value);
+          if (numeric !== null) {
+            total = (total ?? 0) + numeric;
+          }
+          return `${item.marker}${item.seriesName}&nbsp;&nbsp;<b>${formatChartAmount(valueMetric, numeric)}</b>`;
+        });
+        const header = list[0]?.axisValueLabel || list[0]?.name || "";
+        if (list.length > 1) {
+          lines.push(`合计&nbsp;&nbsp;<b>${formatChartAmount(valueMetric, total)}</b>`);
+        }
+        return [header, ...lines].filter(Boolean).join("<br/>");
+      },
+      textStyle: { color: "#14263c", fontSize: 12 },
+      trigger: "axis"
+    },
+    xAxis: {
+      axisLabel: { color: "#5b7089", fontSize: 11 },
+      axisLine: { lineStyle: { color: "#eef3f9" } },
+      axisTick: { show: false },
+      data: bucketKeys,
+      type: "category"
+    },
+    yAxis: {
+      axisLabel: { color: "#5b7089", fontSize: 11 },
+      splitLine: { lineStyle: { color: "#eef3f9" } },
+      type: "value"
+    }
+  };
+}
+
+function buildSparkOption(spark) {
+  return {
+    grid: { bottom: 2, left: 0, right: 0, top: 2 },
+    series: [
+      {
+        areaStyle: { color: "rgba(37, 87, 214, 0.12)" },
+        data: spark.map((point) => point.value),
+        lineStyle: { color: "#2557d6", width: 2 },
+        showSymbol: false,
+        smooth: true,
+        symbol: "none",
+        type: "line"
+      }
+    ],
+    xAxis: { boundaryGap: false, data: spark.map((point) => point.key), show: false, type: "category" },
+    yAxis: { show: false, type: "value" }
+  };
+}
+
+function HeroCard({ deltaValue, metricKey, spark, value }) {
+  const sparkOption = useMemo(() => buildSparkOption(spark), [spark]);
+  const hasSpark = spark.length > 1 && spark.some((point) => point.value !== null);
+  return (
+    <article className="sbi-card sbi-ov-hero-card">
+      <header className="sbi-ov-hero-top">
+        <span className="sbi-metric-hint sbi-ov-hero-label" title={metricTooltip(metricKey)}>
+          {metricLabel(metricKey)}
+        </span>
+        {!isBlank(deltaValue) ? (
+          <span className={`sbi-delta is-${deltaDirection(deltaValue)}`}>{formatDeltaRate(deltaValue)}</span>
+        ) : null}
+      </header>
+      <strong className="sbi-ov-hero-value">{formatMetric(metricKey, value)}</strong>
+      <div className="sbi-ov-hero-spark">{hasSpark ? <EChart className="sbi-ov-spark-chart" option={sparkOption} /> : null}</div>
+    </article>
+  );
+}
+
+function OverviewSkeleton() {
+  return (
+    <section className="sbi-ov">
+      <div className="sbi-ov-hero">
+        {HERO_METRICS.map((metric) => (
+          <article className="sbi-card sbi-ov-hero-card" key={metric.key}>
+            <span className="sbi-skeleton" style={{ height: 14, width: 72 }} />
+            <span className="sbi-skeleton" style={{ height: 26, width: 110 }} />
+            <span className="sbi-skeleton" style={{ height: 38, width: "100%" }} />
+          </article>
+        ))}
+      </div>
+      <section className="sbi-card sbi-ov-skeleton-card">
+        <span className="sbi-skeleton" style={{ height: 300, width: "100%" }} />
+      </section>
+      <div className="sbi-ov-duo">
+        <section className="sbi-card sbi-ov-skeleton-card">
+          <span className="sbi-skeleton" style={{ height: 220, width: "100%" }} />
+        </section>
+        <section className="sbi-card sbi-ov-skeleton-card">
+          <span className="sbi-skeleton" style={{ height: 220, width: "100%" }} />
+        </section>
+      </div>
+      <section className="sbi-card sbi-ov-skeleton-card">
+        <span className="sbi-skeleton" style={{ height: 180, width: "100%" }} />
+      </section>
+    </section>
+  );
+}
+
+export function OverviewView() {
+  const { appCodes, derived, filters, isLoading, setViewKey, updateFilter } = useSocialBi();
+  const [trendMetric, setTrendMetric] = useState("recharge_usd_minor");
+  const [compareMetric, setCompareMetric] = useState("recharge_usd_minor");
+
+  // regionScoped 时 App 级视角统一切到区域行聚合，保证与顶栏区域选择一致。
+  const dailyRows = derived.regionScoped ? derived.regionDaily : derived.appDaily;
+
+  const totals = useMemo(
+    () => aggregateMetricMaps(derived.regionScoped ? derived.regionTotals : derived.appTotals),
+    [derived.appTotals, derived.regionScoped, derived.regionTotals]
+  );
+
+  const buckets = useMemo(() => buildBuckets(dailyRows, filters.granularity), [dailyRows, filters.granularity]);
+
+  const bucketAggregates = useMemo(
+    () => buckets.map((bucket) => ({ key: bucket.key, metrics: aggregateMetricMaps(bucket.rows) })),
+    [buckets]
+  );
+
+  const heroSparks = useMemo(() => {
+    const map = {};
+    HERO_METRICS.forEach((metric) => {
+      map[metric.key] = bucketAggregates.map((bucket) => ({
+        key: bucket.key,
+        value: metricChartValue(metric.key, bucket.metrics[metric.key])
+      }));
+    });
+    return map;
+  }, [bucketAggregates]);
+
+  // 每 App × 每桶的聚合单元，供主趋势堆叠柱使用；App 顺序跟随顶栏 appCodes。
+  const appBuckets = useMemo(() => {
+    const keys = buckets.map((bucket) => bucket.key);
+    const appIndex = new Map();
+    buckets.forEach((bucket, bucketIdx) => {
+      const byApp = new Map();
+      bucket.rows.forEach((row) => {
+        if (!byApp.has(row.app_code)) {
+          byApp.set(row.app_code, []);
+        }
+        byApp.get(row.app_code).push(row);
+      });
+      byApp.forEach((rows, code) => {
+        if (!appIndex.has(code)) {
+          appIndex.set(code, { app_code: code, app_name: rows[0].app_name, cells: new Array(buckets.length).fill(null) });
+        }
+        appIndex.get(code).cells[bucketIdx] = aggregateMetricMaps(rows);
+      });
+    });
+    const apps = [...appIndex.values()].sort((a, b) => appCodes.indexOf(a.app_code) - appCodes.indexOf(b.app_code));
+    return { apps, keys };
+  }, [appCodes, buckets]);
+
+  const trendOption = useMemo(() => {
+    const series = appBuckets.apps.map((app) => ({
+      barMaxWidth: 26,
+      data: app.cells.map((cell) => (cell ? metricChartValue(trendMetric, cell[trendMetric]) : null)),
+      itemStyle: { color: appColor(app.app_code, appCodes) },
+      name: app.app_name,
+      stack: "total",
+      type: "bar"
+    }));
+    return buildStackedBarOption({ bucketKeys: appBuckets.keys, series, valueMetric: trendMetric });
+  }, [appBuckets, appCodes, trendMetric]);
+
+  const channelOption = useMemo(() => {
+    const series = CHANNEL_METRICS.map((key, index) => ({
+      barMaxWidth: 26,
+      data: bucketAggregates.map((bucket) => metricChartValue(key, bucket.metrics[key])),
+      itemStyle: { color: CHANNEL_COLORS[index] },
+      name: metricLabel(key),
+      stack: "channel",
+      type: "bar"
+    }));
+    return buildStackedBarOption({ bucketKeys: bucketAggregates.map((bucket) => bucket.key), series, valueMetric: CHANNEL_METRICS[0] });
+  }, [bucketAggregates]);
+
+  const hasChannelData = useMemo(
+    () => bucketAggregates.some((bucket) => CHANNEL_METRICS.some((key) => Number(bucket.metrics[key] ?? 0) > 0)),
+    [bucketAggregates]
+  );
+
+  const compareRows = useMemo(() => {
+    let rows;
+    if (derived.regionScoped) {
+      const byApp = new Map();
+      derived.regionTotals.forEach((row) => {
+        if (!byApp.has(row.app_code)) {
+          byApp.set(row.app_code, { app_code: row.app_code, app_name: row.app_name, rows: [] });
+        }
+        byApp.get(row.app_code).rows.push(row);
+      });
+      rows = [...byApp.values()].map((entry) => ({
+        app_code: entry.app_code,
+        app_name: entry.app_name,
+        metrics: aggregateMetricMaps(entry.rows)
+      }));
+    } else {
+      rows = derived.appTotals.map((row) => ({ app_code: row.app_code, app_name: row.app_name, metrics: row }));
+    }
+    return rows.sort((a, b) => {
+      const left = Number(a.metrics[compareMetric]);
+      const right = Number(b.metrics[compareMetric]);
+      return (Number.isFinite(right) ? right : 0) - (Number.isFinite(left) ? left : 0);
+    });
+  }, [compareMetric, derived.appTotals, derived.regionScoped, derived.regionTotals]);
+
+  const compareTotal = compareRows.reduce((sum, row) => {
+    const value = Number(row.metrics[compareMetric]);
+    return Number.isFinite(value) && value > 0 ? sum + value : sum;
+  }, 0);
+
+  const topRegions = useMemo(() => {
+    return [...derived.regionTotals]
+      .sort((a, b) => (Number(b.recharge_usd_minor) || 0) - (Number(a.recharge_usd_minor) || 0))
+      .slice(0, 5);
+  }, [derived.regionTotals]);
+  const topRegionMax = topRegions.reduce((max, row) => Math.max(max, Number(row.recharge_usd_minor) || 0), 0);
+
+  const soloApp = !derived.regionScoped && derived.appTotals.length === 1 ? derived.appTotals[0] : null;
+  const hasRestricted = derived.appTotals.some((row) => row.restricted) || derived.appErrors.some((row) => row.restricted);
+  const hasTrend = appBuckets.keys.length > 0 && appBuckets.apps.length > 0;
+  const trendLabel = TREND_METRICS.find((item) => item.key === trendMetric)?.label || "";
+
+  if (isLoading && !derived.appTotals.length && !derived.regionTotals.length) {
+    return <OverviewSkeleton />;
+  }
+
+  return (
+    <section className="sbi-ov">
+      {derived.appErrors.length || hasRestricted ? (
+        <div className="sbi-ov-info">
+          {derived.appErrors.map((item) => (
+            <span className="sbi-badge is-warn" key={item.app_code}>
+              {item.app_name}: {item.error}
+            </span>
+          ))}
+          {hasRestricted ? <span className="sbi-badge">已按你的数据范围过滤</span> : null}
+        </div>
+      ) : null}
+
+      <div className="sbi-ov-hero">
+        {HERO_METRICS.map((metric) => (
+          <HeroCard
+            deltaValue={soloApp && metric.deltaKey ? soloApp[metric.deltaKey] : null}
+            key={metric.key}
+            metricKey={metric.key}
+            spark={heroSparks[metric.key]}
+            value={totals[metric.key]}
+          />
+        ))}
+      </div>
+
+      <section className="sbi-card">
+        <header className="sbi-card-header">
+          <strong>{trendLabel}趋势</strong>
+          <small>按 App 堆叠</small>
+          <div className="sbi-card-toolbar">
+            <div className="sbi-seg" role="radiogroup" aria-label="趋势指标">
+              {TREND_METRICS.map((item) => (
+                <button
+                  aria-checked={trendMetric === item.key}
+                  className={trendMetric === item.key ? "is-active" : ""}
+                  key={item.key}
+                  onClick={() => setTrendMetric(item.key)}
+                  role="radio"
+                  title={metricTooltip(item.key)}
+                  type="button"
+                >
+                  {item.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </header>
+        <div className="sbi-ov-card-body">
+          {hasTrend ? (
+            <EChart className="sbi-ov-trend-chart" option={trendOption} />
+          ) : (
+            <div className="sbi-empty">
+              <strong>暂无趋势数据</strong>
+              <span>当前筛选范围内没有日级数据，试试放宽日期或 App 筛选</span>
+            </div>
+          )}
+        </div>
+      </section>
+
+      <div className="sbi-ov-duo">
+        <section className="sbi-card">
+          <header className="sbi-card-header">
+            <strong>渠道构成</strong>
+            <small>谷歌 / 三方 / 币商充值</small>
+          </header>
+          <div className="sbi-ov-card-body">
+            {hasChannelData ? (
+              <EChart className="sbi-ov-channel-chart" option={channelOption} />
+            ) : (
+              <div className="sbi-empty">
+                <strong>暂无渠道拆分数据</strong>
+                <span>所选范围内各渠道充值均为空或 0</span>
+              </div>
+            )}
+          </div>
+        </section>
+
+        <section className="sbi-card">
+          <header className="sbi-card-header">
+            <strong>App 对比</strong>
+            <small title={metricTooltip(compareMetric)}>按{COMPARE_METRICS.find((item) => item.key === compareMetric)?.label}占比</small>
+            <div className="sbi-card-toolbar">
+              <div className="sbi-seg" role="radiogroup" aria-label="对比指标">
+                {COMPARE_METRICS.map((item) => (
+                  <button
+                    aria-checked={compareMetric === item.key}
+                    className={compareMetric === item.key ? "is-active" : ""}
+                    key={item.key}
+                    onClick={() => setCompareMetric(item.key)}
+                    role="radio"
+                    title={metricTooltip(item.key)}
+                    type="button"
+                  >
+                    {item.label}
+                  </button>
+                ))}
+              </div>
+            </div>
+          </header>
+          <div className="sbi-ov-card-body">
+            {compareRows.length ? (
+              <div className="sbi-ov-compare">
+                {compareRows.map((row) => {
+                  const raw = Number(row.metrics[compareMetric]);
+                  const share = compareTotal > 0 && Number.isFinite(raw) && raw > 0 ? (raw / compareTotal) * 100 : 0;
+                  const color = appColor(row.app_code, appCodes);
+                  return (
+                    <div className="sbi-ov-compare-row" key={row.app_code}>
+                      <span className="sbi-ov-compare-name">
+                        <span className="sbi-ov-dot" style={{ background: color }} />
+                        {row.app_name}
+                      </span>
+                      <div className="sbi-ov-bar-track">
+                        <div className="sbi-ov-bar-fill" style={{ background: color, width: `${share}%` }} />
+                      </div>
+                      <span className="sbi-ov-num">{formatMetric(compareMetric, row.metrics[compareMetric])}</span>
+                      <button
+                        className="sbi-ov-link"
+                        onClick={() => {
+                          updateFilter("apps", [row.app_code]);
+                          setViewKey("regions");
+                        }}
+                        type="button"
+                      >
+                        地区 →
+                      </button>
+                    </div>
+                  );
+                })}
+              </div>
+            ) : (
+              <div className="sbi-empty">
+                <strong>暂无 App 数据</strong>
+                <span>调整顶部 App / 日期筛选后重试</span>
+              </div>
+            )}
+          </div>
+        </section>
+      </div>
+
+      <section className="sbi-card">
+        <header className="sbi-card-header">
+          <strong>区域 Top5</strong>
+          <small title={metricTooltip("recharge_usd_minor")}>按充值降序</small>
+          <div className="sbi-card-toolbar">
+            <button className="sbi-ov-link" onClick={() => setViewKey("regions")} type="button">
+              查看全部 →
+            </button>
+          </div>
+        </header>
+        <div className="sbi-ov-card-body">
+          {topRegions.length ? (
+            <div className="sbi-ov-top">
+              {topRegions.map((row) => {
+                const raw = Number(row.recharge_usd_minor);
+                const share = topRegionMax > 0 && Number.isFinite(raw) && raw > 0 ? (raw / topRegionMax) * 100 : 0;
+                const color = appColor(row.app_code, appCodes);
+                return (
+                  <div className="sbi-ov-top-row" key={`${row.app_code}:${row.region_id}`}>
+                    <span className="sbi-ov-top-name">
+                      <strong>{row.region_name}</strong>
+                      <span className="sbi-badge">
+                        <span className="sbi-ov-dot" style={{ background: color }} />
+                        {row.app_name}
+                      </span>
+                    </span>
+                    <div className="sbi-ov-bar-track">
+                      <div className="sbi-ov-bar-fill" style={{ background: color, width: `${share}%` }} />
+                    </div>
+                    <span className="sbi-ov-num">{formatMetric("recharge_usd_minor", row.recharge_usd_minor)}</span>
+                  </div>
+                );
+              })}
+            </div>
+          ) : (
+            <div className="sbi-empty">
+              <strong>暂无区域数据</strong>
+              <span>该范围未配置区域目录，或你没有对应区域的数据权限</span>
+            </div>
+          )}
+        </div>
+      </section>
+    </section>
+  );
+}

databi/src/social/views/RegionsView.jsx

@@ -0,0 +1,465 @@
+// RegionsView（地区洞察）：概要条 + 世界地图（国家粒度）+ 区域卡片网格 + 区域→国家下钻表。
+// 数据契约见 SocialBiApp.jsx 的 useSocialBi()；金额为 USD 分、比例为 0-1，渲染时统一走 metrics/format 层。
+
+import { Fragment, useMemo, useState } from "react";
+import { VisualMapComponent } from "echarts/components";
+import * as echarts from "echarts/core";
+import { EChart } from "../../charts/EChart.jsx";
+import { resolveCountryMeta } from "../../data/countryMeta.js";
+import worldMap from "../../data/world.json";
+import { formatCount, formatMoneyMinor, formatRatioPercent, isBlank } from "../format.js";
+import { aggregateMetricMaps, appColor, formatMetric, metricChartValue, metricLabel, metricTooltip } from "../metrics.js";
+import { useSocialBi } from "../SocialBiApp.jsx";
+import "./regions-view.css";
+
+// EChart.jsx 未注册 visualMap 组件，这里按需补注册（echarts.use 幂等，不影响其它图表）。
+echarts.use([VisualMapComponent]);
+
+const MAP_METRICS = [
+  { key: "recharge_usd_minor", label: "充值" },
+  { key: "new_users", label: "新增" },
+  { key: "active_users", label: "日活" }
+];
+
+const CARD_METRICS = ["new_users", "active_users", "arppu_usd_minor"];
+
+const TABLE_METRICS = [
+  "recharge_usd_minor",
+  "new_users",
+  "active_users",
+  "paid_users",
+  "arppu_usd_minor",
+  "d1_retention_rate",
+  "gift_coin_spent"
+];
+
+// databi-world 的合法地名索引（小写 → 原始 feature name），用于把 ISO alpha-2 / 后端国家名归一成地图地名。
+const MAP_NAME_INDEX = new Map();
+(worldMap.features || []).forEach((feature) => {
+  const name = feature?.properties?.name;
+  if (name) {
+    MAP_NAME_INDEX.set(String(name).trim().toLowerCase(), name);
+  }
+});
+
+// 复用 countryMeta 的 ISO alpha-2 → 备选英文/中文名列表，再校验哪一个是 databi-world 的 feature name。
+function resolveMapName(countryCode, countryName) {
+  const meta = resolveCountryMeta({ code: countryCode, name: countryName });
+  const candidates = [...(meta?.names || []), countryName];
+  for (const candidate of candidates) {
+    const hit = MAP_NAME_INDEX.get(String(candidate || "").trim().toLowerCase());
+    if (hit) {
+      return hit;
+    }
+  }
+  return "";
+}
+
+function countryDisplayName(countryCode, countryName) {
+  const meta = resolveCountryMeta({ code: countryCode, name: countryName });
+  return meta?.label || countryName || countryCode || "未知国家";
+}
+
+function rechargeValue(row) {
+  return isBlank(row?.recharge_usd_minor) ? -1 : Number(row.recharge_usd_minor);
+}
+
+function byRechargeDesc(a, b) {
+  return rechargeValue(b) - rechargeValue(a);
+}
+
+export function RegionsView() {
+  const { appCodes, derived, isLoading } = useSocialBi();
+  const { appTotals, countryTotals, regionTotals } = derived;
+  const [mapMetric, setMapMetric] = useState("recharge_usd_minor");
+  const [expandedRegions, setExpandedRegions] = useState(() => new Set());
+
+  const regionRows = useMemo(() => [...regionTotals].sort(byRechargeDesc), [regionTotals]);
+
+  const regionSummary = useMemo(() => aggregateMetricMaps(regionTotals), [regionTotals]);
+
+  const regionCount = useMemo(
+    () => new Set(regionTotals.map((row) => `${row.app_code}:${row.region_id}`)).size,
+    [regionTotals]
+  );
+
+  const appCount = useMemo(() => new Set(regionTotals.map((row) => row.app_code)).size, [regionTotals]);
+
+  const countryCount = useMemo(() => {
+    const codes = new Set();
+    countryTotals.forEach((row) => {
+      const key = String(row.country_code || row.country_name || "").trim();
+      if (key) {
+        codes.add(key);
+      }
+    });
+    return codes.size;
+  }, [countryTotals]);
+
+  // 每个 App 的总充值（占比条分母）：优先 appTotals 的整 App 口径，缺失时退化为可见区域行求和。
+  const appRechargeTotals = useMemo(() => {
+    const totals = new Map();
+    appTotals.forEach((row) => {
+      if (!isBlank(row.recharge_usd_minor)) {
+        totals.set(row.app_code, Number(row.recharge_usd_minor));
+      }
+    });
+    const fallback = new Map();
+    regionTotals.forEach((row) => {
+      if (!isBlank(row.recharge_usd_minor)) {
+        fallback.set(row.app_code, (fallback.get(row.app_code) || 0) + Number(row.recharge_usd_minor));
+      }
+    });
+    fallback.forEach((value, code) => {
+      if (!totals.has(code)) {
+        totals.set(code, value);
+      }
+    });
+    return totals;
+  }, [appTotals, regionTotals]);
+
+  // 下钻子行：countryTotals 按 app_code + region_id 分组（region_id 缺失已在数据层归一成 0，对应"未划分区域"）。
+  const countriesByRegion = useMemo(() => {
+    const groups = new Map();
+    countryTotals.forEach((row) => {
+      const key = `${row.app_code}:${Number(row.region_id ?? 0)}`;
+      const bucket = groups.get(key) || [];
+      bucket.push(row);
+      groups.set(key, bucket);
+    });
+    groups.forEach((rows) => rows.sort(byRechargeDesc));
+    return groups;
+  }, [countryTotals]);
+
+  // 地图数据：跨 App 同国家先按地图地名合桶，再用 aggregateMetricMaps 合并（比例按分子分母重算）。
+  const mapIndex = useMemo(() => {
+    const buckets = new Map();
+    const unmatched = new Set();
+    countryTotals.forEach((row) => {
+      const mapName = resolveMapName(row.country_code, row.country_name);
+      if (!mapName) {
+        unmatched.add(String(row.country_code || row.country_name || "?"));
+        return;
+      }
+      const bucket = buckets.get(mapName) || { label: countryDisplayName(row.country_code, row.country_name), rows: [] };
+      bucket.rows.push(row);
+      buckets.set(mapName, bucket);
+    });
+    const entries = new Map();
+    buckets.forEach((bucket, mapName) => {
+      entries.set(mapName, { label: bucket.label, metrics: aggregateMetricMaps(bucket.rows) });
+    });
+    return { entries, unmatchedCount: unmatched.size };
+  }, [countryTotals]);
+
+  const mapOption = useMemo(() => {
+    const data = [];
+    mapIndex.entries.forEach((entry, mapName) => {
+      const value = metricChartValue(mapMetric, entry.metrics[mapMetric]);
+      if (value !== null) {
+        data.push({ name: mapName, value });
+      }
+    });
+    const max = data.reduce((acc, item) => Math.max(acc, item.value), 0) || 1;
+    return {
+      series: [
+        {
+          data,
+          emphasis: { itemStyle: { areaColor: "#93b6f2" }, label: { show: false } },
+          itemStyle: { areaColor: "#e9eef5", borderColor: "#d5dfeb", borderWidth: 0.6 },
+          label: { show: false },
+          map: "databi-world",
+          name: metricLabel(mapMetric),
+          roam: false,
+          select: { disabled: true },
+          type: "map"
+        }
+      ],
+      tooltip: {
+        backgroundColor: "#ffffff",
+        borderColor: "#e3eaf3",
+        extraCssText: "box-shadow: 0 4px 16px rgba(16, 34, 56, 0.12);",
+        formatter: (params) => {
+          const entry = mapIndex.entries.get(params.name);
+          if (!entry) {
+            return `${params.name}<br/>暂无数据`;
+          }
+          return `${entry.label}<br/>${metricLabel(mapMetric)}：${formatMetric(mapMetric, entry.metrics[mapMetric])}`;
+        },
+        textStyle: { color: "#14263c", fontSize: 12 }
+      },
+      visualMap: {
+        bottom: 10,
+        calculable: false,
+        inRange: { color: ["#dbeafe", "#2557d6"] },
+        itemHeight: 110,
+        itemWidth: 10,
+        left: 12,
+        max,
+        min: 0,
+        orient: "horizontal",
+        text: ["高", "低"],
+        textStyle: { color: "#5b7089", fontSize: 11 }
+      }
+    };
+  }, [mapIndex, mapMetric]);
+
+  const toggleRegion = (key) => {
+    setExpandedRegions((current) => {
+      const next = new Set(current);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  };
+
+  if (isLoading && !regionTotals.length && !countryTotals.length) {
+    return <RegionsSkeleton />;
+  }
+
+  if (!regionTotals.length) {
+    return (
+      <section className="sbi-card">
+        <div className="sbi-empty">
+          <strong>暂无区域数据</strong>
+          <span>检查顶栏区域筛选，或该 App 尚未配置区域目录（legacy App 在其 Mongo sys_region_config，hyapp 在区域管理）</span>
+        </div>
+      </section>
+    );
+  }
+
+  return (
+    <>
+      <div className="sbi-rg-summary">
+        <section className="sbi-card sbi-rg-summary-card">
+          <span className="sbi-rg-summary-label">覆盖区域数</span>
+          <span className="sbi-rg-summary-value">{formatCount(regionCount)}</span>
+          <span className="sbi-rg-summary-sub">按 App × 区域去重 · 覆盖 {formatCount(appCount)} 个 App</span>
+        </section>
+        <section className="sbi-card sbi-rg-summary-card">
+          <span className="sbi-rg-summary-label">覆盖国家数</span>
+          <span className="sbi-rg-summary-value">{formatCount(countryCount)}</span>
+          <span className="sbi-rg-summary-sub">countryTotals 按国家去重（跨 App 合并）</span>
+        </section>
+        <section className="sbi-card sbi-rg-summary-card">
+          <span className="sbi-rg-summary-label" title={metricTooltip("recharge_usd_minor")}>
+            区域充值合计
+          </span>
+          <span className="sbi-rg-summary-value">{formatMoneyMinor(regionSummary.recharge_usd_minor)}</span>
+          <span className="sbi-rg-summary-sub">当前区间 · 可见区域行合计</span>
+        </section>
+      </div>
+
+      <section className="sbi-card sbi-rg-map-card">
+        <div className="sbi-card-header">
+          <strong>全球分布</strong>
+          <small>
+            {countryCount ? `${formatCount(countryCount)} 个国家 · 跨 App 合并` : "国家粒度"}
+            {mapIndex.unmatchedCount ? ` · ${mapIndex.unmatchedCount} 个国家未匹配到地图` : ""}
+          </small>
+          <div className="sbi-card-toolbar">
+            <div className="sbi-seg" role="radiogroup" aria-label="地图指标">
+              {MAP_METRICS.map((item) => (
+                <button
+                  aria-checked={mapMetric === item.key}
+                  className={mapMetric === item.key ? "is-active" : ""}
+                  key={item.key}
+                  onClick={() => setMapMetric(item.key)}
+                  role="radio"
+                  title={metricTooltip(item.key)}
+                  type="button"
+                >
+                  {item.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="sbi-rg-map-body">
+          {mapIndex.entries.size ? (
+            <EChart className="sbi-rg-map-chart" option={mapOption} />
+          ) : (
+            <div className="sbi-empty">
+              <strong>暂无国家数据</strong>
+              <span>当前区间没有国家粒度数据，或国家编码未能匹配到世界地图</span>
+            </div>
+          )}
+        </div>
+      </section>
+
+      <div className="sbi-rg-grid">
+        {regionRows.map((row) => {
+          const key = `${row.app_code}:${row.region_id}`;
+          const appTotal = appRechargeTotals.get(row.app_code);
+          const share = appTotal && !isBlank(row.recharge_usd_minor) ? Number(row.recharge_usd_minor) / appTotal : null;
+          return (
+            <section className="sbi-card sbi-rg-region-card" key={key}>
+              <div className="sbi-rg-region-head">
+                <span className="sbi-rg-region-name" title={row.region_name}>
+                  {row.region_name}
+                </span>
+                {row.restricted ? (
+                  <span className="sbi-badge" title="数据按你的负责范围裁剪">
+                    范围裁剪
+                  </span>
+                ) : null}
+                <span className="sbi-rg-app-tag">
+                  <span className="sbi-rg-app-dot" style={{ background: appColor(row.app_code, appCodes) }} />
+                  {row.app_name}
+                </span>
+              </div>
+              <div className="sbi-rg-region-money">
+                <small className="sbi-metric-hint" title={metricTooltip("recharge_usd_minor")}>
+                  {metricLabel("recharge_usd_minor")}
+                </small>
+                <strong>{formatMoneyMinor(row.recharge_usd_minor)}</strong>
+              </div>
+              <div className="sbi-rg-region-metrics">
+                {CARD_METRICS.map((metric) => (
+                  <div className="sbi-rg-region-metric" key={metric}>
+                    <small className="sbi-metric-hint" title={metricTooltip(metric)}>
+                      {metricLabel(metric)}
+                    </small>
+                    <span>{formatMetric(metric, row[metric])}</span>
+                  </div>
+                ))}
+              </div>
+              <div className="sbi-rg-share">
+                <span className="sbi-rg-share-head">
+                  <span>占 {row.app_name} 总充值</span>
+                  <span>{share === null ? "--" : formatRatioPercent(share)}</span>
+                </span>
+                <span className="sbi-rg-share-track">
+                  <span
+                    className="sbi-rg-share-fill"
+                    style={{ width: share === null ? 0 : `${Math.min(100, Math.max(0, share * 100))}%` }}
+                  />
+                </span>
+              </div>
+            </section>
+          );
+        })}
+      </div>
+
+      <section className="sbi-card sbi-rg-table-card">
+        <div className="sbi-card-header">
+          <strong>区域下钻</strong>
+          <small>点击区域行展开国家明细 · 按充值降序</small>
+        </div>
+        <div className="sbi-table-scroll">
+          <table className="sbi-table">
+            <thead>
+              <tr>
+                <th className="is-left">地区 / 国家</th>
+                <th className="is-left">App</th>
+                {TABLE_METRICS.map((metric) => (
+                  <th key={metric}>
+                    <span className="sbi-metric-hint" title={metricTooltip(metric)}>
+                      {metricLabel(metric)}
+                    </span>
+                  </th>
+                ))}
+              </tr>
+            </thead>
+            <tbody>
+              <tr className="is-total">
+                <td className="is-left">全部区域</td>
+                <td className="is-left">{formatCount(appCount)} 个 App</td>
+                {TABLE_METRICS.map((metric) => (
+                  <td key={metric}>{formatMetric(metric, regionSummary[metric])}</td>
+                ))}
+              </tr>
+              {regionRows.map((row) => {
+                const key = `${row.app_code}:${row.region_id}`;
+                const isOpen = expandedRegions.has(key);
+                const children = isOpen ? countriesByRegion.get(key) || [] : [];
+                return (
+                  <Fragment key={key}>
+                    <tr aria-expanded={isOpen} className="sbi-rg-row" onClick={() => toggleRegion(key)}>
+                      <td className="is-left">
+                        <span className="sbi-rg-region-cell">
+                          <span aria-hidden="true" className={isOpen ? "sbi-rg-caret is-open" : "sbi-rg-caret"}>
+                            ▸
+                          </span>
+                          {row.region_name}
+                          {row.restricted ? (
+                            <span className="sbi-badge" title="数据按你的负责范围裁剪">
+                              范围裁剪
+                            </span>
+                          ) : null}
+                        </span>
+                      </td>
+                      <td className="is-left">
+                        <span className="sbi-rg-app-tag">
+                          <span className="sbi-rg-app-dot" style={{ background: appColor(row.app_code, appCodes) }} />
+                          {row.app_name}
+                        </span>
+                      </td>
+                      {TABLE_METRICS.map((metric) => (
+                        <td key={metric}>{formatMetric(metric, row[metric])}</td>
+                      ))}
+                    </tr>
+                    {isOpen && !children.length ? (
+                      <tr className="sbi-rg-child">
+                        <td className="is-left" colSpan={2 + TABLE_METRICS.length}>
+                          <span className="sbi-rg-child-name">该区域暂无国家明细</span>
+                        </td>
+                      </tr>
+                    ) : null}
+                    {children.map((child) => (
+                      <tr className="sbi-rg-child" key={`${key}:${child.country_code || child.country_name}`}>
+                        <td className="is-left">
+                          <span className="sbi-rg-child-name">{countryDisplayName(child.country_code, child.country_name)}</span>
+                        </td>
+                        <td className="is-left sbi-rg-child-app">{child.app_name}</td>
+                        {TABLE_METRICS.map((metric) => (
+                          <td key={metric}>{formatMetric(metric, child[metric])}</td>
+                        ))}
+                      </tr>
+                    ))}
+                  </Fragment>
+                );
+              })}
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </>
+  );
+}
+
+function RegionsSkeleton() {
+  return (
+    <>
+      <div className="sbi-rg-summary" aria-busy="true">
+        {[0, 1, 2].map((index) => (
+          <section className="sbi-card sbi-rg-summary-card" key={index}>
+            <span className="sbi-skeleton" style={{ height: 12, width: 90 }} />
+            <span className="sbi-skeleton" style={{ height: 26, width: 140 }} />
+            <span className="sbi-skeleton" style={{ height: 11, width: 170 }} />
+          </section>
+        ))}
+      </div>
+      <section className="sbi-card sbi-rg-map-card" aria-busy="true">
+        <div className="sbi-card-header">
+          <span className="sbi-skeleton" style={{ height: 14, width: 120 }} />
+        </div>
+        <div className="sbi-rg-map-body">
+          <span className="sbi-skeleton" style={{ display: "block", height: "100%", width: "100%" }} />
+        </div>
+      </section>
+      <div className="sbi-rg-grid" aria-busy="true">
+        {[0, 1, 2].map((index) => (
+          <section className="sbi-card sbi-rg-region-card" key={index}>
+            <span className="sbi-skeleton" style={{ height: 14, width: 150 }} />
+            <span className="sbi-skeleton" style={{ height: 24, width: 130 }} />
+            <span className="sbi-skeleton" style={{ height: 34, width: "100%" }} />
+          </section>
+        ))}
+      </div>
+    </>
+  );
+}

databi/src/social/views/RetentionView.jsx

@@ -0,0 +1,400 @@
+// RetentionView（留存质量）：整体 D1/D7/D30 概要卡、新增×次日留存组合图、
+// 留存趋势（汇总/单 App）、App/区域留存热力对比表。数据契约见 SocialBiApp.jsx 的 useSocialBi()。
+
+import { useMemo, useState } from "react";
+import { useSocialBi } from "../SocialBiApp.jsx";
+import { EChart } from "../../charts/EChart.jsx";
+import { aggregateMetricMaps, formatMetric, metricChartValue, metricLabel, metricTooltip } from "../metrics.js";
+import { formatCount, formatPercentValue, formatRatioPercent, isBlank } from "../format.js";
+import { ALL, bucketDay } from "../state.js";
+import "./retention-view.css";
+
+// 图表 canvas 内无法读 CSS 变量，这里用与 social-v2.css token 一致的十六进制值。
+const CHART_ACCENT = "#2557d6"; // var(--sbi-accent)
+const CHART_ACCENT_2 = "#0e7490"; // var(--sbi-accent-2)
+const CHART_GRID_LINE = "#eef3f9";
+const CHART_TEXT = "#5b7089";
+const CHART_GRID = { bottom: 4, containLabel: true, left: 8, right: 8, top: 28 };
+const CHART_LEGEND = { itemHeight: 9, itemWidth: 14, textStyle: { color: CHART_TEXT, fontSize: 12 }, top: 0 };
+const CHART_TOOLTIP = { backgroundColor: "#ffffff", borderColor: CHART_GRID_LINE, textStyle: { color: CHART_TEXT }, trigger: "axis" };
+
+const RETENTION_SERIES = [
+  { color: CHART_ACCENT, key: "d1_retention_rate" },
+  { color: CHART_ACCENT_2, key: "d7_retention_rate" },
+  { color: "#7c3aed", key: "d30_retention_rate" }
+];
+
+const HEAT_KEYS = new Set(["d1_retention_rate", "d7_retention_rate", "d30_retention_rate"]);
+const TABLE_METRIC_KEYS = [
+  "new_users",
+  "active_users",
+  "d1_retention_rate",
+  "d7_retention_rate",
+  "d30_retention_rate",
+  "paid_conversion_rate"
+];
+
+const GRANULARITY_LABELS = { day: "日", month: "月", week: "周" };
+
+// 把日粒度行按 bucketDay 分桶后逐桶聚合（比例按分子分母重算），桶 key 升序。
+function bucketAggregates(rows, granularity) {
+  const map = new Map();
+  rows.forEach((row) => {
+    const bucket = bucketDay(row.stat_day, granularity);
+    const list = map.get(bucket);
+    if (list) {
+      list.push(row);
+    } else {
+      map.set(bucket, [row]);
+    }
+  });
+  const buckets = [...map.keys()].sort();
+  return { aggregates: buckets.map((key) => aggregateMetricMaps(map.get(key))), buckets };
+}
+
+function categoryAxis(buckets) {
+  return {
+    axisLabel: { color: CHART_TEXT },
+    axisLine: { lineStyle: { color: CHART_GRID_LINE } },
+    axisTick: { show: false },
+    data: buckets,
+    type: "category"
+  };
+}
+
+// 留存热力单元格：值越高蓝底越深（上限 0.85），深度超过 0.35 换白字保证对比度；null 无底色显示 "--"。
+function renderMetricCell(key, value) {
+  if (!HEAT_KEYS.has(key)) {
+    return <td key={key}>{formatMetric(key, value)}</td>;
+  }
+  if (isBlank(value)) {
+    return <td key={key}>--</td>;
+  }
+  const depth = Math.min(0.85, Number(value) * 2);
+  const style = { backgroundColor: `rgba(37, 87, 214, ${Number(depth.toFixed(3))})` };
+  if (depth > 0.35) {
+    style.color = "#ffffff";
+  }
+  return (
+    <td key={key} style={style}>
+      {formatRatioPercent(value)}
+    </td>
+  );
+}
+
+export function RetentionView() {
+  const { derived, filters, isLoading } = useSocialBi();
+  const { appDaily, appTotals, regionDaily, regionScoped, regionTotals } = derived;
+  const [trendApp, setTrendApp] = useState(ALL);
+  const [tableDim, setTableDim] = useState("app");
+
+  const granularityLabel = GRANULARITY_LABELS[filters.granularity] || "日";
+  // 筛选变化后所选 App 可能不在结果里，回退到汇总（不直接改 state，渲染期兜底即可）。
+  const activeTrendApp = trendApp !== ALL && appTotals.some((row) => row.app_code === trendApp) ? trendApp : ALL;
+  // 选了具体区域时，全视图（概要/图表/对比表）统一切到区域行口径，避免同屏两套数字。
+  const dailyRows = regionScoped ? regionDaily : appDaily;
+
+  // 1) 概要卡：选了具体区域时 App 级合计改用区域行聚合，与顶栏语义一致。
+  const summary = useMemo(() => {
+    const rows = regionScoped ? regionTotals : appTotals;
+    return rows.length ? aggregateMetricMaps(rows) : null;
+  }, [appTotals, regionScoped, regionTotals]);
+
+  // 2) 新增（柱/左轴）× 次日留存率（线/右轴），按全局粒度分桶；null 让线断开。
+  const comboOption = useMemo(() => {
+    const { aggregates, buckets } = bucketAggregates(dailyRows, filters.granularity);
+    if (!buckets.length) {
+      return null;
+    }
+    return {
+      grid: { ...CHART_GRID },
+      legend: { ...CHART_LEGEND },
+      series: [
+        {
+          barMaxWidth: 26,
+          data: aggregates.map((row) => metricChartValue("new_users", row.new_users)),
+          itemStyle: { borderRadius: [3, 3, 0, 0], color: CHART_ACCENT },
+          name: metricLabel("new_users"),
+          tooltip: { valueFormatter: (value) => formatCount(value) },
+          type: "bar"
+        },
+        {
+          connectNulls: false,
+          data: aggregates.map((row) => metricChartValue("d1_retention_rate", row.d1_retention_rate)),
+          itemStyle: { color: CHART_ACCENT_2 },
+          lineStyle: { color: CHART_ACCENT_2, width: 2.5 },
+          name: metricLabel("d1_retention_rate"),
+          symbol: "circle",
+          symbolSize: 6,
+          tooltip: { valueFormatter: (value) => formatPercentValue(value) },
+          type: "line",
+          yAxisIndex: 1
+        }
+      ],
+      tooltip: { ...CHART_TOOLTIP, axisPointer: { type: "shadow" } },
+      xAxis: categoryAxis(buckets),
+      yAxis: [
+        {
+          axisLabel: { color: CHART_TEXT },
+          splitLine: { lineStyle: { color: CHART_GRID_LINE } },
+          type: "value"
+        },
+        {
+          axisLabel: { color: CHART_TEXT, formatter: "{value}%" },
+          splitLine: { show: false },
+          type: "value"
+        }
+      ]
+    };
+  }, [dailyRows, filters.granularity]);
+
+  // 3) D1/D7/D30 留存趋势：汇总或单 App 的日行分桶聚合（区域筛选时用区域日行）。
+  const trendOption = useMemo(() => {
+    const rows = activeTrendApp === ALL ? dailyRows : dailyRows.filter((row) => row.app_code === activeTrendApp);
+    const { aggregates, buckets } = bucketAggregates(rows, filters.granularity);
+    if (!buckets.length) {
+      return null;
+    }
+    return {
+      grid: { ...CHART_GRID },
+      legend: { ...CHART_LEGEND },
+      series: RETENTION_SERIES.map(({ color, key }) => ({
+        connectNulls: false,
+        data: aggregates.map((row) => metricChartValue(key, row[key])),
+        itemStyle: { color },
+        lineStyle: { color, width: 2.5 },
+        name: metricLabel(key),
+        symbol: "circle",
+        symbolSize: 5,
+        tooltip: { valueFormatter: (value) => formatPercentValue(value) },
+        type: "line"
+      })),
+      tooltip: { ...CHART_TOOLTIP },
+      xAxis: categoryAxis(buckets),
+      yAxis: {
+        axisLabel: { color: CHART_TEXT, formatter: "{value}%" },
+        splitLine: { lineStyle: { color: CHART_GRID_LINE } },
+        type: "value"
+      }
+    };
+  }, [activeTrendApp, dailyRows, filters.granularity]);
+
+  // 4) 热力对比表：按 App / 按区域；区域筛选时"按 App"改为区域行按 App 聚合，保持口径一致。
+  const tableSource = useMemo(() => {
+    if (tableDim === "region") {
+      return regionTotals;
+    }
+    if (!regionScoped) {
+      return appTotals;
+    }
+    const byApp = new Map();
+    regionTotals.forEach((row) => {
+      const list = byApp.get(row.app_code) || [];
+      list.push(row);
+      byApp.set(row.app_code, list);
+    });
+    return [...byApp.entries()].map(([appCode, rows]) => ({
+      app_code: appCode,
+      app_name: rows[0].app_name,
+      ...aggregateMetricMaps(rows)
+    }));
+  }, [appTotals, regionScoped, regionTotals, tableDim]);
+
+  const tableRows = useMemo(() => {
+    return tableSource
+      .map((row) => ({
+        key: tableDim === "region" ? `${row.app_code}:${row.region_id}` : row.app_code,
+        label: tableDim === "region" ? `${row.app_name}·${row.region_name}` : row.app_name,
+        row
+      }))
+      .sort((a, b) => (Number(b.row.new_users) || 0) - (Number(a.row.new_users) || 0));
+  }, [tableDim, tableSource]);
+
+  const tableTotal = useMemo(() => {
+    return tableSource.length ? aggregateMetricMaps(tableSource) : null;
+  }, [tableSource]);
+
+  const hasRows = appTotals.length > 0 || appDaily.length > 0 || regionTotals.length > 0;
+
+  if (isLoading && !hasRows) {
+    return (
+      <div className="sbi-rt-view">
+        <div className="sbi-rt-summary">
+          {RETENTION_SERIES.map(({ key }) => (
+            <section className="sbi-card sbi-rt-summary-card" key={key}>
+              <span className="sbi-skeleton sbi-rt-skeleton-line" />
+              <span className="sbi-skeleton sbi-rt-skeleton-value" />
+            </section>
+          ))}
+        </div>
+        <section className="sbi-card">
+          <span className="sbi-skeleton sbi-rt-skeleton-chart" />
+        </section>
+        <section className="sbi-card">
+          <span className="sbi-skeleton sbi-rt-skeleton-chart" />
+        </section>
+        <section className="sbi-card">
+          <span className="sbi-skeleton sbi-rt-skeleton-table" />
+        </section>
+      </div>
+    );
+  }
+
+  if (!hasRows) {
+    return (
+      <div className="sbi-rt-view">
+        <section className="sbi-card">
+          <div className="sbi-empty">
+            <strong>暂无留存数据</strong>
+            <span>当前筛选没有返回任何 App 数据，试试调整日期区间或放宽 App/区域筛选。</span>
+          </div>
+        </section>
+      </div>
+    );
+  }
+
+  return (
+    <div className="sbi-rt-view">
+      <div className="sbi-rt-summary">
+        {RETENTION_SERIES.map(({ key }) => {
+          const baseUsers = summary?.[key.replace("_retention_rate", "_retention_base_users")];
+          return (
+            <section className="sbi-card sbi-rt-summary-card" key={key}>
+              <span className="sbi-rt-summary-label sbi-metric-hint" title={metricTooltip(key)}>
+                整体{metricLabel(key)}
+              </span>
+              <span className="sbi-rt-summary-value">{formatRatioPercent(summary?.[key])}</span>
+              <span className="sbi-rt-summary-note">
+                {regionScoped ? "所选区域汇总" : "全部所选 App 汇总"}
+                {isBlank(baseUsers) ? "" : ` · cohort 样本 ${formatCount(baseUsers)} 人`}
+              </span>
+            </section>
+          );
+        })}
+      </div>
+
+      <section className="sbi-card">
+        <div className="sbi-card-header">
+          <strong>新增与次日留存</strong>
+          <small>柱=新增（左轴）· 线=次日留存率（右轴）· 按{granularityLabel}分桶</small>
+        </div>
+        {comboOption ? (
+          <EChart className="sbi-rt-chart-combo" option={comboOption} />
+        ) : (
+          <div className="sbi-empty">
+            <strong>暂无按日数据</strong>
+            <span>当前筛选没有返回按日序列，无法绘制新增与留存趋势。</span>
+          </div>
+        )}
+      </section>
+
+      <section className="sbi-card">
+        <div className="sbi-card-header">
+          <strong>留存趋势</strong>
+          <small>D1 / D7 / D30 · 按{granularityLabel}分桶</small>
+          <div className="sbi-card-toolbar">
+            <div className="sbi-seg" role="radiogroup" aria-label="留存趋势维度">
+              <button
+                aria-checked={activeTrendApp === ALL}
+                className={activeTrendApp === ALL ? "is-active" : ""}
+                onClick={() => setTrendApp(ALL)}
+                role="radio"
+                type="button"
+              >
+                汇总
+              </button>
+              {appTotals.map((row) => (
+                <button
+                  aria-checked={activeTrendApp === row.app_code}
+                  className={activeTrendApp === row.app_code ? "is-active" : ""}
+                  key={row.app_code}
+                  onClick={() => setTrendApp(row.app_code)}
+                  role="radio"
+                  type="button"
+                >
+                  {row.app_name}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+        {trendOption ? (
+          <EChart className="sbi-rt-chart-trend" option={trendOption} />
+        ) : (
+          <div className="sbi-empty">
+            <strong>暂无留存趋势数据</strong>
+            <span>{activeTrendApp === ALL ? "当前筛选没有返回按日序列。" : "该 App 在当前区间没有按日序列。"}</span>
+          </div>
+        )}
+      </section>
+
+      <section className="sbi-card sbi-rt-table-card">
+        <div className="sbi-card-header">
+          <strong>留存对比</strong>
+          <small>D1/D7/D30 底色越深留存越高</small>
+          <div className="sbi-card-toolbar">
+            <div className="sbi-seg" role="radiogroup" aria-label="留存对比维度">
+              <button
+                aria-checked={tableDim === "app"}
+                className={tableDim === "app" ? "is-active" : ""}
+                onClick={() => setTableDim("app")}
+                role="radio"
+                type="button"
+              >
+                按 App
+              </button>
+              <button
+                aria-checked={tableDim === "region"}
+                className={tableDim === "region" ? "is-active" : ""}
+                onClick={() => setTableDim("region")}
+                role="radio"
+                type="button"
+              >
+                按区域
+              </button>
+            </div>
+          </div>
+        </div>
+        {tableRows.length ? (
+          <div className="sbi-table-scroll">
+            <table className="sbi-table">
+              <thead>
+                <tr>
+                  <th className="is-left">对象</th>
+                  {TABLE_METRIC_KEYS.map((key) => (
+                    <th key={key}>
+                      <span className="sbi-metric-hint" title={metricTooltip(key)}>
+                        {metricLabel(key)}
+                      </span>
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody>
+                <tr className="is-total">
+                  <td className="is-left">合计</td>
+                  {TABLE_METRIC_KEYS.map((key) => renderMetricCell(key, tableTotal?.[key]))}
+                </tr>
+                {tableRows.map((item) => (
+                  <tr key={item.key}>
+                    <td className="is-left">{item.label}</td>
+                    {TABLE_METRIC_KEYS.map((key) => renderMetricCell(key, item.row[key]))}
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="sbi-empty">
+            <strong>暂无对比数据</strong>
+            <span>{tableDim === "region" ? "当前筛选下没有区域行，试试放宽顶栏的区域选择。" : "当前筛选下没有 App 合计行。"}</span>
+          </div>
+        )}
+      </section>
+
+      <p className="sbi-rt-footnote">
+        留存按注册日 cohort 计算；观察期未到的日期显示 "--"。hyapp App 的按日留存暂不提供（仅整段区间口径）。
+      </p>
+    </div>
+  );
+}

databi/src/social/views/TeamKpiView.jsx

@@ -0,0 +1,322 @@
+// TeamKpiView：运营中心视图。后端已按当前登录用户的数据范围裁剪，页面只展示可见运营负责范围内的充值数据。
+// 金额字段为 USD 分，缺失值显示 "--"，不在前端把缺失口径当作 0。
+
+import { useMemo, useState } from "react";
+import { useSocialBi } from "../SocialBiApp.jsx";
+import { appColor } from "../metrics.js";
+import { formatCount, formatMoneyMinor, isBlank } from "../format.js";
+import "./team-kpi-view.css";
+
+const DIMENSIONS = [
+  { key: "person", label: "按人员×区域" },
+  { key: "operatorApp", label: "按人员×App" },
+  { key: "team", label: "按部门" }
+];
+
+function addNullable(sum, value) {
+  if (isBlank(value)) {
+    return sum;
+  }
+  return (sum ?? 0) + Number(value);
+}
+
+function numberOr(value, fallback) {
+  return isBlank(value) ? fallback : Number(value);
+}
+
+function compareByMonthRecharge(left, right) {
+  return numberOr(right.monthMinor, -1) - numberOr(left.monthMinor, -1);
+}
+
+function operatorLabelOf(item) {
+  return item.operator_name || item.operator_account || `#${item.operator_user_id}`;
+}
+
+function regionLabelOf(item) {
+  return item.region_name || item.region_code || "全部区域";
+}
+
+function operatorCountOf(items) {
+  return new Set(items.map((item) => item.operator_user_id).filter((id) => !isBlank(id))).size;
+}
+
+export function TeamKpiView() {
+  const { appCodes, isLoading, kpi } = useSocialBi();
+  const [dimension, setDimension] = useState("person");
+
+  const items = useMemo(() => kpi?.items || [], [kpi]);
+
+  const personRows = useMemo(() => {
+    const rows = items.map((item, index) => ({
+      item,
+      key: `${item.operator_user_id}-${item.app_code}-${item.region_id}-${index}`,
+      monthMinor: item.month_recharge_usd_minor
+    }));
+    rows.sort(compareByMonthRecharge);
+    return rows;
+  }, [items]);
+
+  const operatorAppRows = useMemo(() => {
+    const rows = (kpi?.operator_app_rows || []).map((item, index) => ({
+      item,
+      key: `${item.operator_user_id}-${item.app_code}-${index}`,
+      monthMinor: item.month_recharge_usd_minor
+    }));
+    rows.sort(compareByMonthRecharge);
+    return rows;
+  }, [kpi]);
+
+  const teamRows = useMemo(() => {
+    const groups = new Map();
+    items.forEach((item) => {
+      const teamName = item.team || "未分组";
+      let group = groups.get(teamName);
+      if (!group) {
+        group = { members: new Set(), monthMinor: null, rangeMinor: null, team: teamName };
+        groups.set(teamName, group);
+      }
+      group.members.add(item.operator_user_id);
+      group.rangeMinor = addNullable(group.rangeMinor, item.range_recharge_usd_minor);
+      group.monthMinor = addNullable(group.monthMinor, item.month_recharge_usd_minor);
+    });
+    const rows = [...groups.values()].map((group) => ({
+      memberCount: group.members.size,
+      monthMinor: group.monthMinor,
+      rangeMinor: group.rangeMinor,
+      team: group.team
+    }));
+    rows.sort(compareByMonthRecharge);
+    return rows;
+  }, [items]);
+
+  if (!items.length) {
+    return isLoading ? (
+      <KpiSkeleton />
+    ) : (
+      <section className="sbi-card">
+        <div className="sbi-empty">
+          <strong>暂无充值数据</strong>
+          <span>先在用户管理为运营人员分配 App/区域数据范围</span>
+        </div>
+      </section>
+    );
+  }
+
+  const summary = kpi.summary || {};
+  const operatorCount = isBlank(summary.operator_count) ? operatorCountOf(items) : summary.operator_count;
+
+  return (
+    <div className="sbi-kpi-view">
+      <section className="sbi-card sbi-kpi-board">
+        <div className="sbi-card-header">
+          <strong>充值排行</strong>
+          <small>
+            {kpi.period_month} · {formatCount(operatorCount)} 名运营
+          </small>
+          <div className="sbi-card-toolbar">
+            <div aria-label="排行维度" className="sbi-seg" role="radiogroup">
+              {DIMENSIONS.map((option) => (
+                <button
+                  aria-checked={dimension === option.key}
+                  className={dimension === option.key ? "is-active" : ""}
+                  key={option.key}
+                  onClick={() => setDimension(option.key)}
+                  role="radio"
+                  type="button"
+                >
+                  {option.label}
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+        <div className="sbi-table-scroll sbi-kpi-board-scroll">
+          {dimension === "person" ? (
+            <PersonTable appCodes={appCodes} rows={personRows} />
+          ) : dimension === "operatorApp" ? (
+            <OperatorAppTable appCodes={appCodes} rows={operatorAppRows} />
+          ) : (
+            <TeamTable rows={teamRows} />
+          )}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function KpiSkeleton() {
+  return (
+    <div aria-busy="true" className="sbi-kpi-view">
+      <section className="sbi-card">
+        <div className="sbi-kpi-table-skeleton">
+          {[0, 1, 2, 3, 4, 5].map((index) => (
+            <span className="sbi-skeleton" key={index} style={{ height: 18, width: "100%" }} />
+          ))}
+        </div>
+      </section>
+    </div>
+  );
+}
+
+function RankBadge({ rank }) {
+  const medal = rank === 1 ? " is-gold" : rank === 2 ? " is-silver" : rank === 3 ? " is-bronze" : "";
+  return <span className={`sbi-kpi-rank${medal}`}>{rank}</span>;
+}
+
+function OperatorAppTable({ appCodes, rows }) {
+  return (
+    <table className="sbi-table">
+      <thead>
+        <tr>
+          <th className="is-left">名次</th>
+          <th className="is-left">运营人员</th>
+          <th className="is-left">App</th>
+          <th className="is-left">负责区域</th>
+          <th>
+            <span className="sbi-metric-hint" title="所选区间内该运营在此 App 负责范围的充值合计（USD）">
+              区间充值
+            </span>
+          </th>
+          <th>
+            <span className="sbi-metric-hint" title="本自然月至今该运营在此 App 负责范围的充值合计（USD）">
+              当月充值
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, index) => {
+          const item = row.item;
+          return (
+            <tr key={row.key}>
+              <td className="is-left">
+                <RankBadge rank={index + 1} />
+              </td>
+              <td className="is-left">
+                <OperatorCell item={item} />
+              </td>
+              <td className="is-left">
+                <AppCell appCodes={appCodes} item={item} />
+              </td>
+              <td className="is-left">{item.whole_app_scope ? "全部区域" : item.region_names || `${formatCount(item.region_count)} 个区域`}</td>
+              <td>{formatMoneyMinor(item.range_recharge_usd_minor)}</td>
+              <td>{formatMoneyMinor(item.month_recharge_usd_minor)}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+function PersonTable({ appCodes, rows }) {
+  return (
+    <table className="sbi-table">
+      <thead>
+        <tr>
+          <th className="is-left">名次</th>
+          <th className="is-left">运营人员</th>
+          <th className="is-left">App</th>
+          <th className="is-left">区域</th>
+          <th>
+            <span className="sbi-metric-hint" title="所选区间内负责范围的充值合计（USD）">
+              区间充值
+            </span>
+          </th>
+          <th>
+            <span className="sbi-metric-hint" title="本自然月至今负责范围的充值合计（USD）">
+              当月充值
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, index) => {
+          const item = row.item;
+          return (
+            <tr key={row.key}>
+              <td className="is-left">
+                <RankBadge rank={index + 1} />
+              </td>
+              <td className="is-left">
+                <OperatorCell item={item} />
+              </td>
+              <td className="is-left">
+                <AppCell appCodes={appCodes} item={item} />
+              </td>
+              <td className="is-left">{regionLabelOf(item)}</td>
+              <td>{formatMoneyMinor(item.range_recharge_usd_minor)}</td>
+              <td>{formatMoneyMinor(item.month_recharge_usd_minor)}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}
+
+function TeamTable({ rows }) {
+  return (
+    <table className="sbi-table">
+      <thead>
+        <tr>
+          <th className="is-left">名次</th>
+          <th className="is-left">部门</th>
+          <th>
+            <span className="sbi-metric-hint" title="部门内去重运营人数">
+              人数
+            </span>
+          </th>
+          <th>
+            <span className="sbi-metric-hint" title="部门内区间充值合计（USD）">
+              区间充值
+            </span>
+          </th>
+          <th>
+            <span className="sbi-metric-hint" title="部门内本月充值合计（USD）">
+              当月充值
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row, index) => (
+          <tr key={row.team}>
+            <td className="is-left">
+              <RankBadge rank={index + 1} />
+            </td>
+            <td className="is-left">{row.team}</td>
+            <td>{formatCount(row.memberCount)}</td>
+            <td>{formatMoneyMinor(row.rangeMinor)}</td>
+            <td>{formatMoneyMinor(row.monthMinor)}</td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
+function OperatorCell({ item }) {
+  return (
+    <div className="sbi-kpi-person">
+      <span className="sbi-kpi-person-top">
+        <strong>{operatorLabelOf(item)}</strong>
+        {item.data_error ? (
+          <span className="sbi-badge is-warn" title={item.data_error}>
+            数据异常
+          </span>
+        ) : null}
+      </span>
+      <small>{[item.operator_account, item.team || "未分组"].filter(Boolean).join(" · ")}</small>
+    </div>
+  );
+}
+
+function AppCell({ appCodes, item }) {
+  return (
+    <span className="sbi-kpi-app">
+      <span className="sbi-kpi-app-dot" style={{ background: appColor(item.app_code, appCodes) }} />
+      {item.app_name || item.app_code}
+    </span>
+  );
+}

databi/src/social/views/data-table-view.css

@@ -0,0 +1,100 @@
+/* 数据明细视图（DataTableView）专属样式，类名前缀 sbi-dt-。
+   颜色/圆角只使用 social-v2.css 的 token 与其既有中性色（#f1f5fa / #f7fafd / rgba(16,34,56,…)）。 */
+
+.sbi-dt-tools {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  padding: 12px 18px 14px;
+}
+
+.sbi-dt-groups {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.sbi-dt-groups-label {
+  color: var(--sbi-text-3);
+  font-size: 12px;
+}
+
+.sbi-dt-export {
+  margin-left: auto;
+}
+
+/* 表格纵向滚动容器：限制高度让两级表头的 sticky 生效，底部跟随卡片圆角。 */
+.sbi-dt-scroll {
+  max-height: 72vh;
+  border-top: 1px solid var(--sbi-border);
+  border-radius: 0 0 var(--sbi-radius) var(--sbi-radius);
+}
+
+/* 第一行：列组表头（浅灰底、居中、固定高度，供第二行 sticky 偏移用）。 */
+.sbi-dt-table th.sbi-dt-group-th {
+  box-sizing: border-box;
+  height: 34px;
+  padding: 0 12px;
+  background: #f1f5fa;
+  color: var(--sbi-text-3);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.03em;
+  text-align: center;
+}
+
+/* 第二行：指标表头，sticky 吸附在列组行下方，可点击排序。 */
+.sbi-dt-table th.sbi-dt-metric-th {
+  top: 34px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.sbi-dt-table th.sbi-dt-metric-th:hover,
+.sbi-dt-table th.sbi-dt-metric-th.is-sorted {
+  color: var(--sbi-accent);
+}
+
+.sbi-dt-sort {
+  margin-left: 3px;
+  font-size: 11px;
+}
+
+/* 首列冻结：白底 + 右侧阴影；合计行/悬浮行的底色由 social-v2.css 中更高优先级规则接管。 */
+.sbi-dt-table .sbi-dt-sticky {
+  position: sticky;
+  left: 0;
+  box-shadow: 6px 0 10px -8px rgba(16, 34, 56, 0.28);
+}
+
+.sbi-dt-table td.sbi-dt-sticky {
+  z-index: 1;
+  background: var(--sbi-card);
+}
+
+.sbi-dt-table th.sbi-dt-sticky {
+  z-index: 4;
+}
+
+/* 截断提示（表尾整行）。 */
+.sbi-dt-note td {
+  padding: 10px 12px;
+  background: #f7fafd;
+  color: var(--sbi-text-3);
+  font-size: 12px;
+  text-align: center;
+  white-space: normal;
+}
+
+/* 无数据时的加载骨架。 */
+.sbi-dt-skeleton {
+  display: grid;
+  gap: 10px;
+  padding: 6px 18px 20px;
+}
+
+.sbi-dt-skeleton .sbi-skeleton {
+  height: 14px;
+}

databi/src/social/views/funnel-view.css

@@ -0,0 +1,221 @@
+/* 埋点漏斗视图专属样式：类名前缀 sbi-funnel-，沿用 social-v2 token。 */
+
+.sbi-funnel {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sbi-funnel-head {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.sbi-funnel-head h1 {
+  margin: 0 0 4px;
+  color: var(--sbi-text);
+  font-size: 22px;
+  line-height: 1.2;
+}
+
+.sbi-funnel-head span {
+  color: var(--sbi-text-2);
+  font-size: 12.5px;
+}
+
+.sbi-funnel-apps {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.sbi-funnel-apps span {
+  padding: 5px 10px;
+  border: 1px solid var(--sbi-border);
+  border-radius: 999px;
+  background: #ffffff;
+  color: var(--sbi-text-2);
+  font-weight: 700;
+}
+
+.sbi-funnel-warning {
+  display: grid;
+  gap: 4px;
+  padding: 10px 14px;
+  border: 1px solid #f3ddc0;
+  border-radius: 10px;
+  background: var(--sbi-warn-bg);
+  color: var(--sbi-warn-text);
+  font-size: 12.5px;
+}
+
+.sbi-funnel-summary {
+  display: grid;
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.sbi-funnel-kpi {
+  display: grid;
+  gap: 8px;
+  padding: 14px 16px;
+}
+
+.sbi-funnel-kpi span {
+  color: var(--sbi-text-2);
+  font-size: 12.5px;
+  font-weight: 700;
+}
+
+.sbi-funnel-kpi strong {
+  color: var(--sbi-text);
+  font-size: 23px;
+  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+}
+
+.sbi-funnel-grid {
+  display: grid;
+  grid-template-columns: minmax(380px, 0.95fr) minmax(520px, 1.25fr);
+  gap: 16px;
+}
+
+.sbi-funnel-chart-card,
+.sbi-funnel-table-card,
+.sbi-funnel-cohort-card {
+  min-width: 0;
+}
+
+.sbi-card-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 18px 0;
+}
+
+.sbi-card-title h2 {
+  margin: 0 0 3px;
+  color: var(--sbi-text);
+  font-size: 15px;
+  line-height: 1.2;
+}
+
+.sbi-card-title span {
+  color: var(--sbi-text-3);
+  font-size: 12px;
+}
+
+.sbi-funnel-chart {
+  height: 358px;
+  margin: 8px 8px 12px;
+}
+
+.sbi-funnel-step-scroll {
+  max-height: 390px;
+  margin-top: 10px;
+}
+
+.sbi-funnel-step-table td:first-child {
+  min-width: 150px;
+}
+
+.sbi-funnel-step-table td strong {
+  display: block;
+  color: var(--sbi-text);
+}
+
+.sbi-funnel-step-table td span {
+  display: block;
+  margin-top: 2px;
+  color: var(--sbi-text-3);
+  font-size: 11.5px;
+}
+
+.sbi-funnel-step-table tr.is-failure td {
+  background: #fff7ed;
+}
+
+.sbi-funnel-step-table tr.is-failure td:first-child strong {
+  color: #b45309;
+}
+
+.sbi-funnel-cohort-card {
+  overflow: hidden;
+}
+
+.sbi-funnel-cohort-title {
+  align-items: flex-start;
+}
+
+.sbi-funnel-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 4px;
+  padding: 3px;
+  border: 1px solid var(--sbi-border);
+  border-radius: 9px;
+  background: #f1f5fa;
+}
+
+.sbi-funnel-tabs button {
+  padding: 6px 10px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--sbi-text-2);
+  font-size: 12.5px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.sbi-funnel-tabs button.is-active {
+  background: #ffffff;
+  color: var(--sbi-accent);
+  box-shadow: 0 1px 3px rgba(16, 34, 56, 0.12);
+}
+
+.sbi-funnel-cohort-scroll {
+  max-height: 520px;
+  margin-top: 12px;
+}
+
+.sbi-funnel-cohort-table th,
+.sbi-funnel-cohort-table td {
+  min-width: 104px;
+}
+
+.sbi-funnel-cohort-table th:first-child,
+.sbi-funnel-cohort-table td:first-child {
+  min-width: 150px;
+}
+
+.sbi-funnel-empty-cell {
+  padding: 34px 12px !important;
+  color: var(--sbi-text-3);
+  text-align: center !important;
+}
+
+.sbi-funnel-skeleton {
+  display: grid;
+  gap: 12px;
+  padding: 20px;
+}
+
+.sbi-funnel-skeleton .sbi-skeleton {
+  height: 34px;
+}
+
+@media (max-width: 1360px) {
+  .sbi-funnel-summary {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .sbi-funnel-grid {
+    grid-template-columns: 1fr;
+  }
+}

databi/src/social/views/overview-view.css

@@ -0,0 +1,195 @@
+/* 经营概览视图专属样式：只消费 social-v2.css 的 token，类名前缀 sbi-ov-。 */
+
+.sbi-ov {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sbi-ov-info {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+
+/* ---------- Hero KPI ---------- */
+
+.sbi-ov-hero {
+  display: grid;
+  grid-template-columns: repeat(6, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.sbi-ov-hero-card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px 16px 10px;
+}
+
+.sbi-ov-hero-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.sbi-ov-hero-label {
+  overflow: hidden;
+  color: var(--sbi-text-2);
+  font-size: 12.5px;
+  font-weight: 640;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.sbi-ov-hero-value {
+  color: var(--sbi-text);
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 1.15;
+  font-variant-numeric: tabular-nums;
+}
+
+.sbi-ov-hero-spark {
+  height: 38px;
+  margin-top: auto;
+}
+
+.sbi-ov-spark-chart {
+  width: 100%;
+  height: 38px;
+}
+
+/* ---------- 卡片主体 / 图表容器 ---------- */
+
+.sbi-ov-card-body {
+  padding: 12px 18px 16px;
+}
+
+.sbi-ov-trend-chart {
+  height: 300px;
+}
+
+.sbi-ov-channel-chart {
+  height: 240px;
+}
+
+.sbi-ov-duo {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 16px;
+}
+
+/* ---------- App 对比 / 区域 Top5 横向条 ---------- */
+
+.sbi-ov-compare {
+  display: grid;
+  gap: 12px;
+}
+
+.sbi-ov-compare-row {
+  display: grid;
+  grid-template-columns: minmax(110px, 150px) minmax(0, 1fr) max-content max-content;
+  align-items: center;
+  gap: 10px;
+}
+
+.sbi-ov-compare-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  overflow: hidden;
+  color: var(--sbi-text);
+  font-size: 13px;
+  font-weight: 640;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.sbi-ov-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.sbi-ov-bar-track {
+  height: 10px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #eef3f9;
+}
+
+.sbi-ov-bar-fill {
+  height: 100%;
+  border-radius: 999px;
+  background: var(--sbi-accent-grad);
+}
+
+.sbi-ov-num {
+  min-width: 84px;
+  color: var(--sbi-text);
+  font-size: 13px;
+  font-weight: 700;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+
+.sbi-ov-link {
+  padding: 2px 6px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--sbi-accent);
+  font-size: 12.5px;
+  font-weight: 700;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.sbi-ov-link:hover {
+  background: rgba(37, 87, 214, 0.08);
+}
+
+.sbi-ov-top {
+  display: grid;
+  gap: 12px;
+}
+
+.sbi-ov-top-row {
+  display: grid;
+  grid-template-columns: minmax(180px, 260px) minmax(0, 1fr) max-content;
+  align-items: center;
+  gap: 10px;
+}
+
+.sbi-ov-top-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+  font-size: 13px;
+  font-weight: 640;
+}
+
+.sbi-ov-top-name > strong {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* ---------- 骨架 ---------- */
+
+.sbi-ov-skeleton-card {
+  display: grid;
+  padding: 16px 18px;
+}
+
+@media (max-width: 1280px) {
+  .sbi-ov-hero {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}

databi/src/social/views/regions-view.css

@@ -0,0 +1,222 @@
+/* 地区洞察（RegionsView）专属样式，类名前缀 sbi-rg-；颜色/圆角一律取 social-v2.css 的 token。 */
+
+/* ---------- 概要条 ---------- */
+
+.sbi-rg-summary {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.sbi-rg-summary-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 16px 18px;
+}
+
+.sbi-rg-summary-label {
+  color: var(--sbi-text-2);
+  font-size: 12.5px;
+  font-weight: 640;
+}
+
+.sbi-rg-summary-value {
+  color: var(--sbi-text);
+  font-size: 24px;
+  font-weight: 760;
+  font-variant-numeric: tabular-nums;
+}
+
+.sbi-rg-summary-sub {
+  color: var(--sbi-text-3);
+  font-size: 12px;
+}
+
+/* ---------- 世界地图卡 ---------- */
+
+.sbi-rg-map-card {
+  display: flex;
+  height: 380px;
+  flex-direction: column;
+}
+
+.sbi-rg-map-body {
+  flex: 1;
+  min-height: 0;
+  padding: 6px 12px 12px;
+}
+
+.sbi-rg-map-body .sbi-empty {
+  height: 100%;
+  place-content: center;
+}
+
+.sbi-rg-map-chart {
+  width: 100%;
+  height: 100%;
+}
+
+/* ---------- 区域卡片网格 ---------- */
+
+.sbi-rg-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.sbi-rg-region-card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px 18px;
+}
+
+.sbi-rg-region-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.sbi-rg-region-name {
+  overflow: hidden;
+  font-size: 14.5px;
+  font-weight: 720;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sbi-rg-app-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--sbi-text-2);
+  font-size: 12px;
+  font-weight: 640;
+  white-space: nowrap;
+}
+
+.sbi-rg-region-head .sbi-rg-app-tag {
+  margin-left: auto;
+}
+
+.sbi-rg-app-dot {
+  width: 8px;
+  height: 8px;
+  flex: none;
+  border-radius: 50%;
+}
+
+.sbi-rg-region-money {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sbi-rg-region-money small {
+  color: var(--sbi-text-3);
+  font-size: 11.5px;
+}
+
+.sbi-rg-region-money strong {
+  font-size: 22px;
+  font-weight: 760;
+  font-variant-numeric: tabular-nums;
+}
+
+.sbi-rg-region-metrics {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 8px;
+}
+
+.sbi-rg-region-metric {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.sbi-rg-region-metric small {
+  color: var(--sbi-text-3);
+  font-size: 11.5px;
+}
+
+.sbi-rg-region-metric span {
+  font-size: 13.5px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.sbi-rg-share {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: auto;
+}
+
+.sbi-rg-share-head {
+  display: flex;
+  justify-content: space-between;
+  color: var(--sbi-text-3);
+  font-size: 11.5px;
+}
+
+.sbi-rg-share-track {
+  display: block;
+  height: 6px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--sbi-bg);
+}
+
+.sbi-rg-share-fill {
+  display: block;
+  height: 100%;
+  border-radius: 999px;
+  background: var(--sbi-accent-grad);
+  transition: width 200ms ease;
+}
+
+/* ---------- 下钻表 ---------- */
+
+.sbi-rg-table-card .sbi-table-scroll {
+  max-height: 540px;
+  margin-top: 10px;
+}
+
+.sbi-rg-row {
+  cursor: pointer;
+}
+
+.sbi-rg-region-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.sbi-rg-caret {
+  display: inline-block;
+  width: 14px;
+  color: var(--sbi-text-3);
+  text-align: center;
+  transition: transform 120ms ease;
+}
+
+.sbi-rg-caret.is-open {
+  transform: rotate(90deg);
+}
+
+.sbi-rg-child td {
+  background: var(--sbi-bg);
+  color: var(--sbi-text-2);
+}
+
+.sbi-rg-child-name {
+  display: inline-block;
+  padding-left: 26px;
+}
+
+.sbi-rg-child-app {
+  color: var(--sbi-text-3);
+}

databi/src/social/views/retention-view.css

@@ -0,0 +1,102 @@
+/* 留存质量视图（RetentionView）专属样式；公共原语（卡片/表格/seg/骨架）见 social-v2.css。 */
+
+.sbi-rt-view {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+/* ---------- 概要卡 ---------- */
+
+.sbi-rt-summary {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 16px;
+}
+
+.sbi-rt-summary-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding: 16px 18px;
+}
+
+.sbi-rt-summary-label {
+  color: var(--sbi-text-2);
+  font-size: 12.5px;
+  font-weight: 640;
+}
+
+.sbi-rt-summary-value {
+  color: var(--sbi-text);
+  font-size: 26px;
+  font-weight: 760;
+  font-variant-numeric: tabular-nums;
+  line-height: 1.15;
+}
+
+.sbi-rt-summary-note {
+  color: var(--sbi-text-3);
+  font-size: 11.5px;
+}
+
+/* ---------- 图表卡（EChart 容器必须有确定高度） ---------- */
+
+.sbi-rt-chart-combo {
+  height: 300px;
+  margin: 4px 12px 12px;
+}
+
+.sbi-rt-chart-trend {
+  height: 280px;
+  margin: 4px 12px 12px;
+}
+
+/* ---------- 热力表 ---------- */
+
+.sbi-rt-table-card .sbi-table-scroll {
+  margin-top: 10px;
+}
+
+/* ---------- 底部口径说明 ---------- */
+
+.sbi-rt-footnote {
+  margin: 0;
+  color: var(--sbi-text-3);
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+/* ---------- 骨架 ---------- */
+
+.sbi-rt-skeleton-line {
+  display: block;
+  width: 96px;
+  height: 14px;
+}
+
+.sbi-rt-skeleton-value {
+  display: block;
+  width: 150px;
+  height: 30px;
+}
+
+.sbi-rt-skeleton-chart {
+  display: block;
+  width: auto;
+  height: 232px;
+  margin: 14px 16px 16px;
+}
+
+.sbi-rt-skeleton-table {
+  display: block;
+  width: auto;
+  height: 180px;
+  margin: 14px 16px 16px;
+}
+
+@media (max-width: 960px) {
+  .sbi-rt-summary {
+    grid-template-columns: 1fr;
+  }
+}

databi/src/social/views/team-kpi-view.css

@@ -0,0 +1,76 @@
+/* 运营中心充值排行视图专属样式：仅消费 social-v2.css 的 token，类名前缀 sbi-kpi-。 */
+
+.sbi-kpi-view {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.sbi-kpi-board-scroll {
+  max-height: 620px;
+  margin-top: 12px;
+  border-radius: 0 0 var(--sbi-radius) var(--sbi-radius);
+}
+
+.sbi-kpi-rank {
+  display: inline-grid;
+  width: 24px;
+  height: 24px;
+  place-items: center;
+  border-radius: 50%;
+  background: #f1f5fa;
+  color: var(--sbi-text-2);
+  font-size: 12px;
+  font-weight: 740;
+  font-variant-numeric: tabular-nums;
+}
+
+.sbi-kpi-rank.is-gold {
+  background: linear-gradient(135deg, #f6c34c, #d28f0e);
+  color: #ffffff;
+}
+
+.sbi-kpi-rank.is-silver {
+  background: linear-gradient(135deg, #cfd8e3, #97a4b4);
+  color: #ffffff;
+}
+
+.sbi-kpi-rank.is-bronze {
+  background: linear-gradient(135deg, #d9a06b, #a56a3c);
+  color: #ffffff;
+}
+
+.sbi-kpi-person {
+  display: grid;
+  gap: 2px;
+}
+
+.sbi-kpi-person-top {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.sbi-kpi-person small {
+  color: var(--sbi-text-3);
+  font-size: 11.5px;
+}
+
+.sbi-kpi-app {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+}
+
+.sbi-kpi-app-dot {
+  flex: none;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.sbi-kpi-table-skeleton {
+  display: grid;
+  gap: 14px;
+  padding: 18px;
+}

databi/src/styles/index.css

@@ -6,5 +6,4 @@
 @import "./charts.css";
 @import "./tables.css";
 @import "./report.css";
-@import "./social-bi.css";
 @import "./responsive.css";

databi/src/styles/social-bi.css

@@ -1,656 +0,0 @@
-.social-bi-shell {
-  --social-bi-control-height: 40px;
-  display: grid;
-  min-width: 1040px;
-  min-height: 100vh;
-  grid-template-columns: 72px minmax(0, 1fr);
-  background: #f5f7fb;
-  color: #172033;
-}
-
-.social-bi-sidebar {
-  position: sticky;
-  top: 0;
-  display: flex;
-  height: 100vh;
-  flex-direction: column;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 10px;
-  border-right: 1px solid #dfe8f2;
-  background: #ffffff;
-}
-
-.social-bi-sidebar-brand {
-  display: flex;
-  height: 42px;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-}
-
-.social-bi-sidebar-brand span {
-  display: grid;
-  width: 34px;
-  height: 34px;
-  place-items: center;
-  border-radius: 8px;
-  background: #1688d9;
-  color: #ffffff;
-  font-size: 13px;
-  font-weight: 800;
-}
-
-.social-bi-sidebar-brand strong {
-  display: none;
-}
-
-.social-bi-sidebar-nav {
-  display: grid;
-  width: 100%;
-  gap: 8px;
-  justify-items: center;
-}
-
-.social-bi-nav-item {
-  position: relative;
-  display: grid;
-  width: 48px;
-  height: 44px;
-  place-items: center;
-  padding: 0;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  background: transparent;
-  color: #5f6f86;
-  font: inherit;
-  transition:
-    background-color 180ms cubic-bezier(0.2, 0, 0, 1),
-    border-color 180ms cubic-bezier(0.2, 0, 0, 1),
-    color 180ms cubic-bezier(0.2, 0, 0, 1),
-    transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.social-bi-nav-item svg {
-  font-size: 20px;
-}
-
-.social-bi-nav-item span {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-}
-
-.social-bi-nav-item:hover {
-  border-color: #e0ebf5;
-  background: #f4f8fc;
-  color: #34445a;
-}
-
-.social-bi-nav-item.is-active,
-.social-bi-nav-item.is-active:hover {
-  border-color: #cfe3f5;
-  background: #eef7ff;
-  color: #126fb2;
-}
-
-.social-bi-nav-item:active {
-  transform: translateY(1px);
-}
-
-.social-bi-main {
-  display: grid;
-  min-width: 0;
-  align-content: start;
-  gap: 12px;
-  padding: 12px 14px 24px;
-}
-
-.social-bi-filter-section {
-  display: flex;
-  align-items: end;
-  gap: 8px;
-  padding: 8px 10px;
-  border: 1px solid #e4ebf3;
-  border-radius: 6px;
-  background: #ffffff;
-}
-
-.social-bi-filter-grid {
-  display: flex;
-  flex: 1 1 auto;
-  flex-wrap: wrap;
-  align-items: end;
-  gap: 8px;
-}
-
-.social-bi-field {
-  position: relative;
-  flex: 0 0 220px;
-  min-width: 0;
-}
-
-.social-bi-date-field {
-  flex-basis: 260px;
-}
-
-.social-bi-dropdown--wide {
-  flex-basis: 260px;
-}
-
-.social-bi-field-label {
-  display: block;
-  margin-bottom: 3px;
-  color: #718198;
-  font-size: 11px;
-  font-weight: 680;
-}
-
-.social-bi-date-options {
-  box-sizing: border-box;
-  display: grid;
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  height: var(--social-bi-control-height);
-  gap: 3px;
-  padding: 3px;
-  border: 1px solid #d8e5f0;
-  border-radius: 6px;
-  background: #f8fbfe;
-}
-
-.social-bi-date-options button {
-  display: grid;
-  min-width: 0;
-  height: 100%;
-  place-items: center;
-  border: 0;
-  border-radius: 5px;
-  background: transparent;
-  color: #5f6f86;
-  font: inherit;
-  transition:
-    background-color 180ms cubic-bezier(0.2, 0, 0, 1),
-    color 180ms cubic-bezier(0.2, 0, 0, 1),
-    box-shadow 180ms cubic-bezier(0.2, 0, 0, 1);
-}
-
-.social-bi-date-options button span {
-  font-size: 12px;
-  font-weight: 720;
-}
-
-.social-bi-date-options button small {
-  max-width: 100%;
-  overflow: hidden;
-  color: #8c9aab;
-  font-size: 9px;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.social-bi-date-options button:hover,
-.social-bi-date-options button.is-active {
-  background: #ffffff;
-  color: #126fb2;
-  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
-}
-
-.social-bi-dropdown summary {
-  box-sizing: border-box;
-  display: flex;
-  height: var(--social-bi-control-height);
-  min-height: var(--social-bi-control-height);
-  align-items: center;
-  gap: 8px;
-  padding: 0 30px 0 10px;
-  border: 1px solid #d8e5f0;
-  border-radius: 6px;
-  background: #ffffff;
-  color: #172033;
-  list-style: none;
-  transition:
-    border-color 180ms cubic-bezier(0.2, 0, 0, 1),
-    box-shadow 180ms cubic-bezier(0.2, 0, 0, 1);
-}
-
-.social-bi-dropdown summary::-webkit-details-marker {
-  display: none;
-}
-
-.social-bi-dropdown summary::after {
-  position: absolute;
-  right: 10px;
-  top: 50%;
-  color: #8c9aab;
-  content: "⌄";
-  font-size: 16px;
-  transform: translateY(-50%);
-}
-
-.social-bi-dropdown summary:hover,
-.social-bi-dropdown[open] summary {
-  border-color: #1688d9;
-  box-shadow: 0 0 0 3px rgba(22, 136, 217, 0.1);
-}
-
-.social-bi-dropdown summary strong {
-  display: block;
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  color: #172033;
-  font-size: 13px;
-  font-weight: 720;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.social-bi-dropdown summary .social-bi-field-label {
-  flex: 0 0 auto;
-  margin-bottom: 0;
-}
-
-.social-bi-dropdown-menu {
-  position: absolute;
-  z-index: 12;
-  top: calc(100% + 8px);
-  left: 0;
-  display: grid;
-  width: min(320px, 90vw);
-  max-height: 330px;
-  gap: 4px;
-  overflow: auto;
-  padding: 8px;
-  border: 1px solid #d8e5f0;
-  border-radius: 8px;
-  background: #ffffff;
-  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
-}
-
-.social-bi-dropdown--wide .social-bi-dropdown-menu {
-  width: min(380px, 90vw);
-}
-
-.social-bi-dropdown-menu--search input {
-  box-sizing: border-box;
-  height: var(--social-bi-control-height);
-  margin-bottom: 4px;
-  padding: 0 10px;
-  border: 1px solid #d8e5f0;
-  border-radius: 8px;
-  background: #ffffff;
-  color: #172033;
-  outline: none;
-}
-
-.social-bi-dropdown-menu--search input:focus {
-  border-color: #1688d9;
-  box-shadow: 0 0 0 3px rgba(22, 136, 217, 0.1);
-}
-
-.social-bi-option {
-  display: flex;
-  min-height: 34px;
-  align-items: center;
-  gap: 4px;
-  padding: 0 8px 0 0;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: #34445a;
-  font: inherit;
-  font-size: 13px;
-  text-align: left;
-  transition:
-    background-color 160ms cubic-bezier(0.2, 0, 0, 1),
-    color 160ms cubic-bezier(0.2, 0, 0, 1);
-}
-
-.social-bi-option:hover,
-.social-bi-option.is-selected {
-  background: #eef7ff;
-  color: #126fb2;
-}
-
-.social-bi-option .MuiCheckbox-root {
-  padding: 5px;
-}
-
-.social-bi-cascade-menu {
-  align-content: start;
-}
-
-.social-bi-cascade-group {
-  display: grid;
-  gap: 2px;
-}
-
-.social-bi-cascade-children {
-  display: grid;
-  gap: 2px;
-  padding-left: 22px;
-}
-
-.social-bi-dropdown-empty {
-  padding: 10px 8px;
-  color: #718198;
-  font-size: 13px;
-}
-
-.social-bi-query-button.MuiButton-root {
-  height: var(--social-bi-control-height);
-  min-height: var(--social-bi-control-height);
-  min-width: 84px;
-  border-radius: 6px;
-  background: #1688d9;
-  font-weight: 760;
-}
-
-.social-bi-query-button.MuiButton-root:hover {
-  background: #126fb2;
-}
-
-.social-bi-load-error {
-  align-self: center;
-  color: #c2410c;
-  font-size: 13px;
-  font-weight: 700;
-}
-
-.social-bi-summary-section {
-  display: grid;
-  grid-template-columns: repeat(5, minmax(0, 1fr));
-  gap: 8px;
-}
-
-.social-bi-summary-card {
-  display: grid;
-  min-height: 82px;
-  align-content: space-between;
-  gap: 6px;
-  padding: 12px;
-  border: 1px solid #e4ebf3;
-  border-radius: 6px;
-  background: #ffffff;
-}
-
-.social-bi-summary-card > span {
-  color: #718198;
-  font-size: 12px;
-  font-weight: 680;
-}
-
-.social-bi-summary-card strong {
-  color: #172033;
-  font-size: 22px;
-  font-weight: 800;
-  line-height: 1.1;
-}
-
-.social-bi-delta {
-  width: max-content;
-  padding: 3px 6px;
-  border-radius: 5px;
-  font-size: 11px;
-  font-weight: 760;
-}
-
-.social-bi-delta.is-up {
-  background: #ecfdf3;
-  color: #15803d;
-}
-
-.social-bi-delta.is-down {
-  background: #fff1f2;
-  color: #be123c;
-}
-
-.social-bi-table-section {
-  min-width: 0;
-  border: 1px solid #e4ebf3;
-  border-radius: 6px;
-  background: #ffffff;
-}
-
-.social-bi-table-head {
-  display: flex;
-  height: 42px;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 12px;
-  padding: 0 12px;
-  border-bottom: 1px solid #e4ebf3;
-}
-
-.social-bi-table-head span {
-  color: #718198;
-  font-size: 12px;
-  font-weight: 680;
-}
-
-.social-bi-table-scroll {
-  overflow-x: auto;
-}
-
-.social-bi-table {
-  width: 100%;
-  min-width: 1120px;
-  border-collapse: collapse;
-}
-
-.social-bi-table th,
-.social-bi-table td {
-  height: 34px;
-  padding: 0 8px;
-  border-bottom: 1px solid #edf2f7;
-  color: #34445a;
-  font-size: 12px;
-  text-align: right;
-  white-space: nowrap;
-}
-
-.social-bi-table th {
-  background: #f8fbfe;
-  color: #5f6f86;
-  font-size: 12px;
-  font-weight: 760;
-}
-
-.social-bi-table th.is-left,
-.social-bi-table td.is-left {
-  text-align: left;
-}
-
-.social-bi-table th button {
-  display: inline-flex;
-  max-width: 100%;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 6px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-}
-
-.social-bi-table th.is-left button {
-  justify-content: flex-start;
-}
-
-.social-bi-table th button:hover,
-.social-bi-table th button.is-active {
-  color: #126fb2;
-}
-
-.social-bi-sort-arrow {
-  color: #8c9aab;
-  font-size: 11px;
-}
-
-.social-bi-table tr.is-total td {
-  position: sticky;
-  top: 0;
-  z-index: 1;
-  background: #f0f7ff;
-  color: #172033;
-  font-weight: 760;
-}
-
-.social-bi-pair-cell {
-  display: inline-grid;
-  min-width: 86px;
-  gap: 2px;
-  justify-items: end;
-  line-height: 1.15;
-}
-
-.social-bi-pair-cell strong {
-  color: #172033;
-  font-size: 12px;
-  font-weight: 760;
-}
-
-.social-bi-pair-cell small {
-  color: #718198;
-  font-size: 11px;
-  font-weight: 680;
-}
-
-.social-bi-progress-cell {
-  display: grid;
-  min-width: 150px;
-  gap: 4px;
-}
-
-.social-bi-progress-copy {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.social-bi-progress-copy strong {
-  color: #172033;
-  font-size: 12px;
-  font-weight: 760;
-}
-
-.social-bi-progress-copy span {
-  color: #126fb2;
-  font-size: 12px;
-  font-weight: 760;
-}
-
-.social-bi-progress-track {
-  height: 5px;
-  overflow: hidden;
-  border-radius: 999px;
-  background: #e8eef5;
-}
-
-.social-bi-progress-track span {
-  display: block;
-  height: 100%;
-  border-radius: inherit;
-  background: linear-gradient(90deg, #1688d9, #1fbf75);
-  transition: width 220ms cubic-bezier(0.16, 1, 0.3, 1);
-}
-
-.social-bi-goal-empty {
-  color: #8c9aab;
-  font-weight: 680;
-}
-
-.social-bi-empty-row td {
-  height: 64px;
-  color: #718198;
-  text-align: center;
-}
-
-.social-bi-skeleton {
-  position: relative;
-  display: block;
-  overflow: hidden;
-  border-radius: 6px;
-  background: #edf2f7;
-}
-
-.social-bi-skeleton::after {
-  position: absolute;
-  inset: 0;
-  animation: social-bi-shimmer 1.15s infinite;
-  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.75), transparent);
-  content: "";
-  transform: translateX(-100%);
-}
-
-.social-bi-skeleton--title {
-  width: 54%;
-  height: 14px;
-}
-
-.social-bi-skeleton--value {
-  width: 74%;
-  height: 28px;
-}
-
-.social-bi-skeleton--line {
-  width: 42%;
-  height: 20px;
-}
-
-.social-bi-skeleton--cell {
-  width: 100%;
-  height: 14px;
-}
-
-@keyframes social-bi-shimmer {
-  to {
-    transform: translateX(100%);
-  }
-}
-
-@media (max-width: 1360px) {
-  .social-bi-summary-section {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-@media (max-width: 1180px) {
-  .social-bi-shell {
-    min-width: 0;
-    grid-template-columns: 64px minmax(0, 1fr);
-  }
-
-  .social-bi-filter-section {
-    align-items: stretch;
-    flex-direction: column;
-  }
-
-  .social-bi-field,
-  .social-bi-date-field,
-  .social-bi-dropdown--wide {
-    flex: 1 1 220px;
-  }
-
-  .social-bi-query-button.MuiButton-root {
-    width: 100%;
-  }
-
-  .social-bi-summary-section {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .social-bi-shell *,
-  .social-bi-shell *::before,
-  .social-bi-shell *::after {
-    animation-duration: 1ms !important;
-    transition-duration: 1ms !important;
-  }
-}

databi/src/styles/social-v2.css

@@ -0,0 +1,588 @@
+/* 社交 BI v2 设计基座：与 finance v2 同一设计语言（深色海军侧栏 + 浅色内容区 + 蓝青渐变强调）。
+   各视图自己的样式放在 databi/src/social/views/*.css，只允许使用这里定义的 token。 */
+
+.sbi-shell {
+  --sbi-sidebar-bg: #101b2d;
+  --sbi-sidebar-hover: rgba(120, 165, 255, 0.12);
+  --sbi-accent: #2557d6;
+  --sbi-accent-2: #0e7490;
+  --sbi-accent-grad: linear-gradient(135deg, #2557d6, #0e7490);
+  --sbi-bg: #f6f8fb;
+  --sbi-card: #ffffff;
+  --sbi-border: #e3eaf3;
+  --sbi-text: #14263c;
+  --sbi-text-2: #5b7089;
+  --sbi-text-3: #8aa0b8;
+  --sbi-up: #0f9d58;
+  --sbi-down: #d93025;
+  --sbi-warn-bg: #fdf3e7;
+  --sbi-warn-text: #9a5b13;
+  --sbi-radius: 12px;
+  --sbi-shadow: 0 1px 2px rgba(16, 34, 56, 0.06), 0 4px 16px rgba(16, 34, 56, 0.05);
+
+  display: grid;
+  grid-template-columns: 216px minmax(0, 1fr);
+  min-height: 100vh;
+  min-width: 1080px;
+  background: var(--sbi-bg);
+  color: var(--sbi-text);
+  font-size: 14px;
+}
+
+/* ---------- 侧栏 ---------- */
+
+.sbi-sidebar {
+  position: sticky;
+  top: 0;
+  display: flex;
+  height: 100vh;
+  flex-direction: column;
+  gap: 20px;
+  padding: 18px 12px;
+  background: var(--sbi-sidebar-bg);
+  color: #dbe7f7;
+}
+
+.sbi-brand {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 2px 8px;
+}
+
+.sbi-brand-mark {
+  display: grid;
+  width: 36px;
+  height: 36px;
+  place-items: center;
+  border-radius: 10px;
+  background: var(--sbi-accent-grad);
+  color: #ffffff;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.sbi-brand-copy {
+  display: flex;
+  flex-direction: column;
+  line-height: 1.2;
+}
+
+.sbi-brand-copy strong {
+  font-size: 15px;
+  color: #ffffff;
+}
+
+.sbi-brand-copy small {
+  color: #7e8db0;
+  font-size: 11px;
+  letter-spacing: 0.04em;
+}
+
+.sbi-nav {
+  display: grid;
+  gap: 4px;
+}
+
+.sbi-nav-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border: 0;
+  border-radius: 9px;
+  background: transparent;
+  color: #a9bcd8;
+  font-size: 13.5px;
+  font-weight: 600;
+  text-align: left;
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+}
+
+.sbi-nav-item:hover {
+  background: var(--sbi-sidebar-hover);
+  color: #e9f2ff;
+}
+
+.sbi-nav-item.is-active {
+  background: var(--sbi-accent-grad);
+  color: #ffffff;
+}
+
+.sbi-scope-badge {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: auto;
+  padding: 10px 12px;
+  border: 1px solid rgba(126, 141, 176, 0.35);
+  border-radius: 9px;
+  color: #a9bcd8;
+  font-size: 12px;
+}
+
+.sbi-scope-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: #38bdf8;
+}
+
+/* ---------- 主区 / 顶栏 ---------- */
+
+.sbi-main {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.sbi-topbar {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 14px 22px;
+  border-bottom: 1px solid var(--sbi-border);
+  background: rgba(255, 255, 255, 0.92);
+  backdrop-filter: blur(8px);
+}
+
+.sbi-topbar-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.sbi-date-presets {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px;
+  border: 1px solid var(--sbi-border);
+  border-radius: 9px;
+  background: #f1f5fa;
+}
+
+.sbi-date-presets > button {
+  padding: 6px 12px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--sbi-text-2);
+  font-size: 13px;
+  font-weight: 640;
+  cursor: pointer;
+}
+
+.sbi-date-presets > button.is-active {
+  background: #ffffff;
+  color: var(--sbi-accent);
+  box-shadow: 0 1px 3px rgba(16, 34, 56, 0.12);
+}
+
+/* 自定义区间触发按钮：复用全局 TimeRangeFilter（@/shared/ui），这里只做与预设条的对齐微调。 */
+.sbi-custom-range {
+  margin-left: 6px;
+}
+
+.sbi-granularity {
+  display: flex;
+  gap: 4px;
+  padding: 3px;
+  border: 1px solid var(--sbi-border);
+  border-radius: 9px;
+  background: #f1f5fa;
+}
+
+.sbi-granularity > button {
+  padding: 6px 12px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--sbi-text-2);
+  font-size: 13px;
+  font-weight: 640;
+  cursor: pointer;
+}
+
+.sbi-granularity > button.is-active {
+  background: #ffffff;
+  color: var(--sbi-accent);
+  box-shadow: 0 1px 3px rgba(16, 34, 56, 0.12);
+}
+
+.sbi-refresh {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  margin-left: auto;
+  border: 1px solid var(--sbi-border);
+  border-radius: 9px;
+  background: #ffffff;
+  color: var(--sbi-text-2);
+  cursor: pointer;
+}
+
+.sbi-refresh:hover {
+  color: var(--sbi-accent);
+  border-color: var(--sbi-accent);
+}
+
+.sbi-app-chips {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.sbi-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  padding: 6px 13px;
+  border: 1px solid var(--sbi-border);
+  border-radius: 999px;
+  background: #ffffff;
+  color: var(--sbi-text-2);
+  font-size: 13px;
+  font-weight: 640;
+  cursor: pointer;
+  transition: border-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
+}
+
+.sbi-chip:hover {
+  border-color: var(--sbi-accent);
+}
+
+.sbi-chip.is-active {
+  border-color: var(--sbi-accent);
+  color: var(--sbi-accent);
+  box-shadow: 0 0 0 3px rgba(37, 87, 214, 0.1);
+}
+
+.sbi-chip-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+}
+
+.sbi-region-select {
+  position: relative;
+}
+
+.sbi-region-trigger {
+  height: 32px;
+  padding: 0 14px;
+  border: 1px solid var(--sbi-border);
+  border-radius: 999px;
+  background: #ffffff;
+  color: var(--sbi-text-2);
+  font-size: 13px;
+  font-weight: 640;
+  cursor: pointer;
+}
+
+.sbi-region-trigger:hover {
+  border-color: var(--sbi-accent);
+}
+
+.sbi-region-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  z-index: 40;
+  display: grid;
+  gap: 2px;
+  min-width: 260px;
+  max-height: 360px;
+  overflow: auto;
+  padding: 8px;
+  border: 1px solid var(--sbi-border);
+  border-radius: 10px;
+  background: #ffffff;
+  box-shadow: var(--sbi-shadow);
+}
+
+.sbi-region-group {
+  display: grid;
+  gap: 2px;
+  padding-top: 4px;
+  border-top: 1px dashed var(--sbi-border);
+}
+
+.sbi-region-option {
+  padding: 7px 10px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--sbi-text);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.sbi-region-option:hover {
+  background: #f1f5fa;
+}
+
+.sbi-region-option.is-group {
+  color: var(--sbi-text-2);
+  font-weight: 700;
+}
+
+.sbi-region-option.is-active {
+  background: rgba(37, 87, 214, 0.08);
+  color: var(--sbi-accent);
+  font-weight: 700;
+}
+
+.sbi-region-empty {
+  margin: 6px;
+  color: var(--sbi-text-3);
+  font-size: 12.5px;
+}
+
+.sbi-range-label {
+  color: var(--sbi-text-3);
+  font-size: 12.5px;
+}
+
+.sbi-loading-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: var(--sbi-accent);
+  animation: sbi-pulse 900ms ease-in-out infinite;
+}
+
+@keyframes sbi-pulse {
+  0%,
+  100% {
+    opacity: 0.25;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.sbi-error-banner {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 12px 22px 0;
+  padding: 10px 14px;
+  border: 1px solid #f3ddc0;
+  border-radius: 10px;
+  background: var(--sbi-warn-bg);
+  color: var(--sbi-warn-text);
+  font-size: 12.5px;
+}
+
+.sbi-view {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 18px 22px 40px;
+}
+
+/* ---------- 视图共用原语（卡片/表格/骨架/空态/徽标） ---------- */
+
+.sbi-card {
+  border: 1px solid var(--sbi-border);
+  border-radius: var(--sbi-radius);
+  background: var(--sbi-card);
+  box-shadow: var(--sbi-shadow);
+}
+
+.sbi-card-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 14px 18px 0;
+}
+
+.sbi-card-header strong {
+  font-size: 14.5px;
+}
+
+.sbi-card-header small {
+  color: var(--sbi-text-3);
+  font-size: 12px;
+}
+
+.sbi-card-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+
+.sbi-seg {
+  display: inline-flex;
+  gap: 2px;
+  padding: 2px;
+  border: 1px solid var(--sbi-border);
+  border-radius: 8px;
+  background: #f1f5fa;
+}
+
+.sbi-seg > button {
+  padding: 4px 10px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--sbi-text-2);
+  font-size: 12px;
+  font-weight: 640;
+  cursor: pointer;
+}
+
+.sbi-seg > button.is-active {
+  background: #ffffff;
+  color: var(--sbi-accent);
+  box-shadow: 0 1px 2px rgba(16, 34, 56, 0.12);
+}
+
+.sbi-delta {
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.sbi-delta.is-up {
+  color: var(--sbi-up);
+}
+
+.sbi-delta.is-down {
+  color: var(--sbi-down);
+}
+
+.sbi-delta.is-flat {
+  color: var(--sbi-text-3);
+}
+
+.sbi-table-scroll {
+  overflow: auto;
+}
+
+.sbi-table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 13px;
+}
+
+.sbi-table th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--sbi-border);
+  background: #f7fafd;
+  color: var(--sbi-text-2);
+  font-weight: 700;
+  text-align: right;
+  white-space: nowrap;
+}
+
+.sbi-table th.is-left,
+.sbi-table td.is-left {
+  text-align: left;
+}
+
+.sbi-table td {
+  padding: 9px 12px;
+  border-bottom: 1px solid #eef3f9;
+  text-align: right;
+  white-space: nowrap;
+  font-variant-numeric: tabular-nums;
+}
+
+.sbi-table tbody tr:hover td {
+  background: #f4f8fd;
+}
+
+.sbi-table tr.is-total td {
+  background: #f0f5fc;
+  font-weight: 720;
+}
+
+.sbi-empty {
+  display: grid;
+  gap: 6px;
+  place-items: center;
+  padding: 46px 20px;
+  color: var(--sbi-text-3);
+  font-size: 13px;
+  text-align: center;
+}
+
+.sbi-empty strong {
+  color: var(--sbi-text-2);
+  font-size: 14px;
+}
+
+.sbi-skeleton {
+  display: inline-block;
+  border-radius: 6px;
+  background: linear-gradient(90deg, #edf2f8 25%, #f7fafd 50%, #edf2f8 75%);
+  background-size: 200% 100%;
+  animation: sbi-shimmer 1.1s linear infinite;
+}
+
+@keyframes sbi-shimmer {
+  to {
+    background-position: -200% 0;
+  }
+}
+
+.sbi-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 2px 9px;
+  border-radius: 999px;
+  background: rgba(37, 87, 214, 0.08);
+  color: var(--sbi-accent);
+  font-size: 11.5px;
+  font-weight: 700;
+}
+
+.sbi-badge.is-warn {
+  background: var(--sbi-warn-bg);
+  color: var(--sbi-warn-text);
+}
+
+.sbi-metric-hint {
+  cursor: help;
+  border-bottom: 1px dotted var(--sbi-text-3);
+}
+
+@media (max-width: 1280px) {
+  .sbi-shell {
+    grid-template-columns: 68px minmax(0, 1fr);
+  }
+
+  .sbi-brand-copy,
+  .sbi-nav-item span,
+  .sbi-scope-badge {
+    display: none;
+  }
+
+  .sbi-nav-item {
+    justify-content: center;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sbi-shell *,
+  .sbi-shell *::before,
+  .sbi-shell *::after {
+    animation-duration: 1ms !important;
+    transition-duration: 1ms !important;
+  }
+}

finance/src/FinanceApp.test.jsx

@@ -41,7 +41,10 @@ test("keeps create application dialog open when backdrop is clicked", async () =
     </ToastProvider>
   );
 
-  fireEvent.click(await screen.findByRole("button", { name: "添加" }));
+  await screen.findByRole("button", { name: "添加" });
+  expect(document.querySelector(".finance-header")).toBeNull();
+
+  fireEvent.click(screen.getByRole("button", { name: "添加" }));
   expect(within(screen.getByRole("dialog")).getByRole("heading", { name: "发起申请" })).toBeInTheDocument();
 
   const backdrop = document.querySelector(".MuiBackdrop-root");

finance/src/api.js

@@ -2,7 +2,16 @@ import { getMe, refreshSession } from "@/features/auth/api";
 import { API_ENDPOINTS, API_OPERATIONS, apiEndpointPath } from "@/shared/api/generated/endpoints";
 import { apiRequest, getAccessToken } from "@/shared/api/request";
 import { FINANCE_OPERATIONS, FINANCE_PERMISSIONS, WALLET_IDENTITIES } from "./constants.js";
-import { normalizeApplicationPage, normalizeRechargeBillPage, normalizeWithdrawalApplicationPage } from "./format.js";
+import {
+  mergeRechargeOverviews,
+  mergeRechargeSummaries,
+  normalizeApplicationPage,
+  normalizeRechargeBillPage,
+  normalizeRechargeOverview,
+  normalizeRechargeRegions,
+  normalizeRechargeSummary,
+  normalizeWithdrawalApplicationPage
+} from "./format.js";
 
 const appCodeHeader = "X-App-Code";
 
@@ -36,6 +45,15 @@ export async function fetchFinanceApplicationOptions() {
   return normalizeOptions({ apps: data });
 }
 
+// 充值详情的 App 目录与其他财务页不同：包含 Yumi 这类 legacy 外部账单源，只用于账单查询。
+export async function fetchFinanceRechargeApps() {
+  const endpoint = API_ENDPOINTS.listRechargeApps;
+  const data = await apiRequest(apiEndpointPath(API_OPERATIONS.listRechargeApps), {
+    method: endpoint.method
+  });
+  return normalizeApps(data);
+}
+
 export async function listFinanceApplications(query = {}) {
   const endpoint = API_ENDPOINTS.listFinanceApplications;
   const data = await apiRequest(apiEndpointPath(API_OPERATIONS.listFinanceApplications), {
@@ -80,9 +98,10 @@ export async function listFinanceRechargeDetails(query = {}, apps = []) {
   }
 
   const mergedPageSize = page * pageSize;
-  const pages = await Promise.all(
+  const pageResults = await Promise.allSettled(
     appCodes.map((appCode) => listRechargeBillsForApp(appCode, { ...cleanQuery, page: 1, page_size: mergedPageSize }))
   );
+  const pages = pageResults.filter((result) => result.status === "fulfilled").map((result) => result.value);
   const items = pages
     .flatMap((data) => data.items || [])
     .sort((left, right) => (right.createdAtMs || 0) - (left.createdAtMs || 0) || String(right.transactionId).localeCompare(String(left.transactionId)));
@@ -96,6 +115,86 @@ export async function listFinanceRechargeDetails(query = {}, apps = []) {
   };
 }
 
+export async function fetchFinanceRechargeSummary(query = {}, apps = []) {
+  const selectedAppCode = stringValue(query.app_code ?? query.appCode);
+  const cleanQuery = cleanRechargeBillQuery(query);
+
+  if (selectedAppCode) {
+    return getRechargeSummaryForApp(selectedAppCode, cleanQuery);
+  }
+
+  const appCodes = normalizeApps(apps).map((app) => app.appCode);
+  if (!appCodes.length) {
+    return mergeRechargeSummaries([]);
+  }
+  const summaries = await Promise.all(appCodes.map((appCode) => getRechargeSummaryForApp(appCode, cleanQuery)));
+  return mergeRechargeSummaries(summaries);
+}
+
+export async function listFinanceRechargeRegions(appCode) {
+  const endpoint = API_ENDPOINTS.listRechargeRegions;
+  const data = await apiRequest(apiEndpointPath(API_OPERATIONS.listRechargeRegions), {
+    headers: { [appCodeHeader]: appCode },
+    method: endpoint.method
+  });
+  return normalizeRechargeRegions(data);
+}
+
+// fetchFinanceRechargeSummaries 返回逐 App 的汇总（App 对比表用）和全局合并值。
+export async function fetchFinanceRechargeSummaries(query = {}, apps = []) {
+  const selectedAppCode = stringValue(query.app_code ?? query.appCode);
+  const cleanQuery = cleanRechargeBillQuery(query);
+  const appList = selectedAppCode
+    ? normalizeApps(apps).filter((app) => app.appCode === selectedAppCode)
+    : normalizeApps(apps);
+  if (!appList.length && selectedAppCode) {
+    appList.push({ appCode: selectedAppCode, appName: selectedAppCode });
+  }
+  // 单个 App 查询失败（如后端灰度中）按空汇总降级，不拖垮其余 App 的数据。
+  const results = await Promise.allSettled(appList.map((app) => getRechargeSummaryForApp(app.appCode, cleanQuery)));
+  const summaries = results.map((result) =>
+    result.status === "fulfilled" ? result.value : normalizeRechargeSummary({})
+  );
+  const perApp = appList.map((app, index) => ({ ...app, summary: summaries[index] }));
+  return { merged: mergeRechargeSummaries(summaries), perApp };
+}
+
+export async function fetchFinanceRechargeOverview(query = {}, apps = []) {
+  const selectedAppCode = stringValue(query.app_code ?? query.appCode);
+  const cleanQuery = { ...cleanRechargeBillQuery(query), tz_offset_minutes: 480 };
+  if (selectedAppCode) {
+    return getRechargeOverviewForApp(selectedAppCode, cleanQuery);
+  }
+  const appCodes = normalizeApps(apps).map((app) => app.appCode);
+  if (!appCodes.length) {
+    return normalizeRechargeOverview({});
+  }
+  const results = await Promise.allSettled(appCodes.map((appCode) => getRechargeOverviewForApp(appCode, cleanQuery)));
+  return mergeRechargeOverviews(
+    results.filter((result) => result.status === "fulfilled").map((result) => result.value)
+  );
+}
+
+export async function exportFinanceRechargeBills(appCode, query = {}) {
+  const endpoint = API_ENDPOINTS.exportRechargeBills;
+  return apiRequest(apiEndpointPath(API_OPERATIONS.exportRechargeBills), {
+    headers: { [appCodeHeader]: appCode },
+    method: endpoint.method,
+    query: cleanRechargeBillQuery(query),
+    raw: true
+  });
+}
+
+export async function refreshFinanceGoogleRechargePaid(appCode, transactionIds) {
+  const endpoint = API_ENDPOINTS.refreshGoogleRechargePaid;
+  const data = await apiRequest(apiEndpointPath(API_OPERATIONS.refreshGoogleRechargePaid), {
+    body: { transactionIds },
+    headers: { [appCodeHeader]: appCode },
+    method: endpoint.method
+  });
+  return Array.isArray(data?.items) ? data.items : [];
+}
+
 export async function createFinanceApplication(payload) {
   const endpoint = API_ENDPOINTS.createFinanceApplication;
   return apiRequest(apiEndpointPath(API_OPERATIONS.createFinanceApplication), {
@@ -152,6 +251,26 @@ async function currentSession() {
   }
 }
 
+async function getRechargeOverviewForApp(appCode, query = {}) {
+  const endpoint = API_ENDPOINTS.getRechargeBillOverview;
+  const data = await apiRequest(apiEndpointPath(API_OPERATIONS.getRechargeBillOverview), {
+    headers: { [appCodeHeader]: appCode },
+    method: endpoint.method,
+    query
+  });
+  return normalizeRechargeOverview(data);
+}
+
+async function getRechargeSummaryForApp(appCode, query = {}) {
+  const endpoint = API_ENDPOINTS.getRechargeBillSummary;
+  const data = await apiRequest(apiEndpointPath(API_OPERATIONS.getRechargeBillSummary), {
+    headers: { [appCodeHeader]: appCode },
+    method: endpoint.method,
+    query
+  });
+  return normalizeRechargeSummary(data);
+}
+
 async function listRechargeBillsForApp(appCode, query = {}) {
   const endpoint = API_ENDPOINTS.listRechargeBills;
   const data = await apiRequest(apiEndpointPath(API_OPERATIONS.listRechargeBills), {

finance/src/components/FinanceOverview.jsx

@@ -0,0 +1,432 @@
+import { EMPTY_RECHARGE_OVERVIEW, EMPTY_RECHARGE_SUMMARY, formatAmount, formatUsdMinor } from "../format.js";
+
+const KPI_CARDS = [
+    { filter: "", key: "total", label: "充值总和", tone: "total" },
+    { filter: "google_play_recharge", key: "googlePlay", label: "谷歌充值", tone: "google" },
+    { filter: "third_party", key: "thirdParty", label: "三方充值", tone: "thirdparty" },
+    { filter: "coin_seller", key: "coinSeller", label: "币商充值", tone: "coinseller" },
+];
+
+const DAILY_FIELDS = {
+    coinSeller: { coin: "coinSellerCoinAmount", usd: "coinSellerUsdMinor" },
+    googlePlay: { coin: "googleCoinAmount", usd: "googleUsdMinor" },
+    thirdParty: { coin: "thirdPartyCoinAmount", usd: "thirdPartyUsdMinor" },
+};
+
+export function FinanceOverview({
+    currency,
+    filters,
+    loading,
+    onFiltersChange,
+    onGoUnsynced,
+    onOpenApp,
+    onOpenWithdrawals,
+    overview,
+    perAppSummaries,
+    prevSummary,
+    regions,
+    summary,
+}) {
+    const data = summary || EMPTY_RECHARGE_SUMMARY;
+    const trend = overview || EMPTY_RECHARGE_OVERVIEW;
+    const showCoins = currency === "coin";
+    const totalUsd = Number(data.total?.usdMinorAmount) || 0;
+    const unsynced = trend.googlePaid.unsyncedCount;
+    const selectedApp = filters.appCode;
+
+    return (
+        <div className="finance-overview">
+            {unsynced > 0 ? (
+                <div className="finance-alerts">
+                    <span className="finance-alert finance-alert--warn">
+                        ⚠ {formatAmount(unsynced)} 笔谷歌订单实付未同步，手续费口径尚不完整
+                        <button type="button" onClick={onGoUnsynced}>
+                            去同步
+                        </button>
+                    </span>
+                </div>
+            ) : null}
+
+            <div className="finance-kpi-band">
+                {KPI_CARDS.map(({ filter, key, label, tone }) => {
+                    const bucket = data[key] || { billCount: 0, coinAmount: 0, usdMinorAmount: 0 };
+                    const active = (filters.rechargeType || "") === filter;
+                    return (
+                        <button
+                            className={["finance-kpi", `finance-kpi--${tone}`, active ? "finance-kpi--active" : ""]
+                                .filter(Boolean)
+                                .join(" ")}
+                            key={key}
+                            title={filter ? `点击只看${label}` : "查看全部来源"}
+                            type="button"
+                            onClick={() => onFiltersChange({ rechargeType: active && filter ? "" : filter })}
+                        >
+                            <span className="finance-kpi__label">{label}</span>
+                            <strong className="finance-kpi__value">
+                                {loading
+                                    ? "…"
+                                    : showCoins
+                                      ? `${formatAmount(bucket.coinAmount)} 金币`
+                                      : formatUsdMinor(bucket.usdMinorAmount, "USD")}
+                            </strong>
+                            <small className="finance-kpi__meta">
+                                {loading ? "统计中" : kpiMeta(bucket, key, totalUsd, prevSummary)}
+                            </small>
+                            <Sparkline daily={trend.daily} field={key} showCoins={showCoins} tone={tone} />
+                        </button>
+                    );
+                })}
+                <WithdrawalKpi
+                    loading={loading}
+                    totalUsd={totalUsd}
+                    withdrawal={trend.withdrawal}
+                    onOpenWithdrawals={onOpenWithdrawals}
+                />
+            </div>
+
+            <div className="finance-overview__split">
+                <section className="finance-card">
+                    <div className="finance-card__head">
+                        <span className="finance-card__title">
+                            充值趋势<small>按渠道堆叠 · 日 · {showCoins ? "金币" : "USD"}</small>
+                        </span>
+                        <div className="finance-card__tools finance-chartlegend">
+                            <span>
+                                <i style={{ background: "var(--fin-google)" }} />
+                                谷歌
+                            </span>
+                            <span>
+                                <i style={{ background: "var(--fin-third)" }} />
+                                三方
+                            </span>
+                            <span>
+                                <i style={{ background: "var(--fin-seller)" }} />
+                                币商
+                            </span>
+                        </div>
+                    </div>
+                    <div className="finance-card__body">
+                        <TrendChart daily={trend.daily} showCoins={showCoins} />
+                    </div>
+                </section>
+
+                <section className="finance-card">
+                    <div className="finance-card__head">
+                        <span className="finance-card__title">
+                            净入账拆解<small>谷歌已同步口径</small>
+                        </span>
+                    </div>
+                    <div className="finance-card__body">
+                        <DeductionBreakdown paid={trend.googlePaid} />
+                        <div className="finance-card__divider" />
+                        <div className="finance-card__title" style={{ marginBottom: 8 }}>
+                            {selectedApp ? "区域分布 Top 5" : "区域分布"}
+                        </div>
+                        {selectedApp ? (
+                            <RegionRanks regions={regions} />
+                        ) : (
+                            <p className="finance-hint">选择单个 App 后查看区域分布</p>
+                        )}
+                    </div>
+                </section>
+            </div>
+
+            <section className="finance-card">
+                <div className="finance-card__head">
+                    <span className="finance-card__title">
+                        App 对比<small>点击行进入该 App 流水</small>
+                    </span>
+                </div>
+                <div className="finance-tablewrap">
+                    <table className="finance-flat-table">
+                        <thead>
+                            <tr>
+                                <th>App</th>
+                                <th className="r">充值流水</th>
+                                <th className="r">笔数</th>
+                                <th className="r">谷歌</th>
+                                <th className="r">三方</th>
+                                <th className="r">币商</th>
+                                <th style={{ width: 180 }}>占比</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {(perAppSummaries || []).map((app) => {
+                                const appTotal = Number(app.summary?.total?.usdMinorAmount) || 0;
+                                const maxTotal = Math.max(
+                                    1,
+                                    ...(perAppSummaries || []).map(
+                                        (item) => Number(item.summary?.total?.usdMinorAmount) || 0,
+                                    ),
+                                );
+                                return (
+                                    <tr
+                                        className="finance-flat-table__row"
+                                        key={app.appCode}
+                                        onClick={() => onOpenApp(app.appCode)}
+                                    >
+                                        <td>
+                                            <b>{app.appName || app.appCode}</b>
+                                        </td>
+                                        <td className="r num">{formatUsdMinor(appTotal, "USD")}</td>
+                                        <td className="r num">{formatAmount(app.summary?.total?.billCount || 0)}</td>
+                                        <td className="r num">
+                                            {formatUsdMinor(app.summary?.googlePlay?.usdMinorAmount || 0, "USD")}
+                                        </td>
+                                        <td className="r num">
+                                            {formatUsdMinor(app.summary?.thirdParty?.usdMinorAmount || 0, "USD")}
+                                        </td>
+                                        <td className="r num">
+                                            {formatUsdMinor(app.summary?.coinSeller?.usdMinorAmount || 0, "USD")}
+                                        </td>
+                                        <td>
+                                            <span className="finance-rankbar">
+                                                <i style={{ width: `${(appTotal / maxTotal) * 100}%` }} />
+                                            </span>
+                                        </td>
+                                    </tr>
+                                );
+                            })}
+                            {!perAppSummaries?.length ? (
+                                <tr>
+                                    <td colSpan={7} style={{ textAlign: "center" }}>
+                                        暂无数据
+                                    </td>
+                                </tr>
+                            ) : null}
+                        </tbody>
+                    </table>
+                </div>
+            </section>
+        </div>
+    );
+}
+
+// WithdrawalKpi 是两张独立口径的资金流出卡：
+// 「用户提现」只统计提现申请审核通过的 USDT（点击进入提现审核页）；
+// 「工资兑换」只统计用户工资转币商的 USDT（likei 平台为银行卡余额兑换金币）。
+// 两者都不是充值渠道，不参与来源筛选联动，占比按“金额 / 充值总和”表达资金回流强度。
+function WithdrawalKpi({ loading, onOpenWithdrawals, totalUsd, withdrawal }) {
+    const data = withdrawal || {
+        approvedCount: 0,
+        approvedUsdMinor: 0,
+        totalUsdMinor: 0,
+        transferCount: 0,
+        transferUsdMinor: 0,
+    };
+    return (
+        <>
+            <button
+                className="finance-kpi finance-kpi--withdrawal"
+                title="点击进入用户提现申请"
+                type="button"
+                onClick={onOpenWithdrawals}
+            >
+                <span className="finance-kpi__label">用户提现</span>
+                <strong className="finance-kpi__value">{loading ? "…" : usdtText(data.approvedUsdMinor)}</strong>
+                <small className="finance-kpi__meta">
+                    {loading ? "统计中" : outflowMeta(data.approvedUsdMinor, data.approvedCount, totalUsd)}
+                </small>
+                <small className="finance-kpi__meta">提现申请审核通过</small>
+            </button>
+            <div className="finance-kpi finance-kpi--salary">
+                <span className="finance-kpi__label">工资兑换</span>
+                <strong className="finance-kpi__value">{loading ? "…" : usdtText(data.transferUsdMinor)}</strong>
+                <small className="finance-kpi__meta">
+                    {loading ? "统计中" : outflowMeta(data.transferUsdMinor, data.transferCount, totalUsd)}
+                </small>
+                <small className="finance-kpi__meta">用户工资转币商</small>
+            </div>
+        </>
+    );
+}
+
+function usdtText(usdMinor) {
+    return `USDT ${(usdMinor / 100).toLocaleString("zh-CN", { maximumFractionDigits: 2, minimumFractionDigits: 2 })}`;
+}
+
+function outflowMeta(usdMinor, count, totalUsd) {
+    const parts = [];
+    if (totalUsd > 0) {
+        const share = (usdMinor / totalUsd) * 100;
+        parts.push(`占充值 ${share.toLocaleString("zh-CN", { maximumFractionDigits: 1 })}%`);
+    }
+    parts.push(`${formatAmount(count)} 笔`);
+    return parts.join(" · ");
+}
+
+function kpiMeta(bucket, key, totalUsd, prevSummary) {
+    const parts = [`${formatAmount(bucket.billCount)} 笔`];
+    if (key !== "total" && totalUsd > 0) {
+        const share = ((Number(bucket.usdMinorAmount) || 0) / totalUsd) * 100;
+        parts.push(`占比 ${share.toLocaleString("zh-CN", { maximumFractionDigits: 1 })}%`);
+    }
+    const prev = prevSummary?.[key];
+    if (prev && Number(prev.usdMinorAmount) > 0) {
+        const delta =
+            ((Number(bucket.usdMinorAmount) - Number(prev.usdMinorAmount)) / Number(prev.usdMinorAmount)) * 100;
+        const arrow = delta >= 0 ? "▲" : "▼";
+        parts.push(`${arrow} ${Math.abs(delta).toLocaleString("zh-CN", { maximumFractionDigits: 1 })}% vs 上期`);
+    }
+    return parts.join(" · ");
+}
+
+function Sparkline({ daily, field, showCoins, tone }) {
+    const values = (daily || []).map((bucket) => {
+        if (field === "total") {
+            return showCoins
+                ? bucket.googleCoinAmount + bucket.thirdPartyCoinAmount + bucket.coinSellerCoinAmount
+                : bucket.googleUsdMinor + bucket.thirdPartyUsdMinor + bucket.coinSellerUsdMinor;
+        }
+        const fields = DAILY_FIELDS[field];
+        return fields ? bucket[showCoins ? fields.coin : fields.usd] : 0;
+    });
+    if (values.length < 2) {
+        return <span className="finance-sparkline" />;
+    }
+    const width = 100;
+    const height = 28;
+    const max = Math.max(...values);
+    const min = Math.min(...values);
+    const points = values.map((value, index) => {
+        const x = (index * width) / (values.length - 1);
+        const y = height - 3 - ((value - min) / (max - min || 1)) * (height - 8);
+        return `${x.toFixed(1)},${y.toFixed(1)}`;
+    });
+    const colors = {
+        coinseller: "#B45309",
+        google: "#1B873F",
+        thirdparty: "#0E7490",
+        total: "#2557D6",
+    };
+    const color = colors[tone] || colors.total;
+    return (
+        <svg className="finance-sparkline" preserveAspectRatio="none" viewBox={`0 0 ${width} ${height}`}>
+            <polyline fill={`${color}22`} points={`${points.join(" ")} ${width},${height} 0,${height}`} stroke="none" />
+            <polyline
+                fill="none"
+                points={points.join(" ")}
+                stroke={color}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="1.8"
+            />
+        </svg>
+    );
+}
+
+function TrendChart({ daily, showCoins }) {
+    const buckets = daily || [];
+    if (!buckets.length) {
+        return <p className="finance-hint">当前时间范围内没有充值数据</p>;
+    }
+    const totals = buckets.map((bucket) =>
+        showCoins
+            ? bucket.googleCoinAmount + bucket.thirdPartyCoinAmount + bucket.coinSellerCoinAmount
+            : bucket.googleUsdMinor + bucket.thirdPartyUsdMinor + bucket.coinSellerUsdMinor,
+    );
+    const max = Math.max(1, ...totals);
+    const value = (bucket, channel) => {
+        const fields = DAILY_FIELDS[channel];
+        return bucket[showCoins ? fields.coin : fields.usd];
+    };
+    return (
+        <div>
+            <div className="finance-trend" role="img" aria-label="按渠道堆叠的每日充值趋势">
+                {buckets.map((bucket) => (
+                    <div
+                        className="finance-trend__col"
+                        key={bucket.date}
+                        title={`${bucket.date} · 谷歌 ${trendTip(bucket, "googlePlay", showCoins)} · 三方 ${trendTip(bucket, "thirdParty", showCoins)} · 币商 ${trendTip(bucket, "coinSeller", showCoins)}`}
+                    >
+                        {["googlePlay", "thirdParty", "coinSeller"].map((channel) => {
+                            const amount = value(bucket, channel);
+                            if (amount <= 0) {
+                                return null;
+                            }
+                            return (
+                                <span
+                                    className={`finance-trend__seg finance-trend__seg--${channel}`}
+                                    key={channel}
+                                    style={{ height: `${(amount / max) * 100}%` }}
+                                />
+                            );
+                        })}
+                    </div>
+                ))}
+            </div>
+            <div className="finance-trend__axis">
+                <span>{buckets[0].date.slice(5)}</span>
+                {buckets.length > 2 ? <span>{buckets[Math.floor(buckets.length / 2)].date.slice(5)}</span> : null}
+                <span>{buckets[buckets.length - 1].date.slice(5)}</span>
+            </div>
+        </div>
+    );
+}
+
+function trendTip(bucket, channel, showCoins) {
+    const fields = DAILY_FIELDS[channel];
+    const amount = bucket[showCoins ? fields.coin : fields.usd];
+    return showCoins ? formatAmount(amount) : formatUsdMinor(amount, "USD");
+}
+
+function DeductionBreakdown({ paid }) {
+    const covered = paid.coveredUsdMinor;
+    if (covered <= 0) {
+        return (
+            <p className="finance-hint">
+                暂无已同步的谷歌实付明细；点「查询谷歌实付」同步后这里会展示手续费与税费拆解。
+            </p>
+        );
+    }
+    const rows = [
+        { amount: paid.estNetUsdMinor, color: "var(--fin-pos)", label: "净入账（估）" },
+        { amount: paid.estFeeUsdMinor, color: "#E19B3C", label: "谷歌服务费（估）" },
+        { amount: paid.estTaxUsdMinor, color: "#C86A6A", label: "代缴税费（估）" },
+    ];
+    return (
+        <div>
+            <div className="finance-mixbar">
+                {rows.map((row) => (
+                    <span key={row.label} style={{ background: row.color, flex: Math.max(row.amount, 1) }} />
+                ))}
+            </div>
+            {rows.map((row) => (
+                <div className="finance-mixrow" key={row.label}>
+                    <i style={{ background: row.color }} />
+                    <span className="finance-mixrow__name">{row.label}</span>
+                    <span className="finance-mixrow__amt num">{formatUsdMinor(row.amount, "USD")}</span>
+                    <span className="finance-mixrow__pct num">
+                        {((row.amount / covered) * 100).toLocaleString("zh-CN", { maximumFractionDigits: 1 })}%
+                    </span>
+                </div>
+            ))}
+            <p className="finance-hint" style={{ marginTop: 8 }}>
+                口径：已同步 {formatAmount(paid.syncedCount)} / {formatAmount(paid.googleBillCount)}{" "}
+                笔谷歌订单，覆盖流水 {formatUsdMinor(covered, "USD")}；按各订单实付占比折算成 USD
+            </p>
+        </div>
+    );
+}
+
+function RegionRanks({ regions }) {
+    const top = (regions || []).slice(0, 5);
+    if (!top.length) {
+        return <p className="finance-hint">当前筛选下暂无区域数据</p>;
+    }
+    const max = Math.max(1, ...top.map((region) => region.usdMinorAmount));
+    return (
+        <div>
+            {top.map((region, index) => (
+                <div className="finance-rankrow" key={region.regionId || region.name || index}>
+                    <span className="finance-rankrow__idx num">{index + 1}</span>
+                    <span className="finance-rankrow__name">{region.name || `区域 ${region.regionId}`}</span>
+                    <span className="finance-rankbar">
+                        <i style={{ width: `${(region.usdMinorAmount / max) * 100}%` }} />
+                    </span>
+                    <span className="finance-rankrow__amt num">{formatUsdMinor(region.usdMinorAmount, "USD")}</span>
+                </div>
+            ))}
+        </div>
+    );
+}

finance/src/components/FinanceRechargeDetailList.jsx

@@ -1,147 +1,460 @@
+import CloudSyncOutlined from "@mui/icons-material/CloudSyncOutlined";
+import FileDownloadOutlined from "@mui/icons-material/FileDownloadOutlined";
 import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
 import Button from "@mui/material/Button";
 import MenuItem from "@mui/material/MenuItem";
-import Table from "@mui/material/Table";
-import TableBody from "@mui/material/TableBody";
-import TableCell from "@mui/material/TableCell";
-import TableContainer from "@mui/material/TableContainer";
-import TableHead from "@mui/material/TableHead";
-import TableRow from "@mui/material/TableRow";
 import TextField from "@mui/material/TextField";
-import { TimeRangeFilter } from "@/shared/ui/TimeRangeFilter.jsx";
+import { Fragment, useState } from "react";
 import {
     formatAmount,
     formatMicroMoney,
     formatTime,
     formatUsdMinor,
-    formatPercent,
+    rechargeSourceTone,
     rechargeTypeLabel,
 } from "../format.js";
 
-export function FinanceRechargeDetailList({ bills, error, filters, loading, onFiltersChange, onReload, options }) {
+// 系统保存视图：财务高频筛选组合一键切换；与全局 rechargeType/paidState 联动。
+const SAVED_VIEWS = [
+    { key: "all", label: "全部", paidState: "", rechargeType: "" },
+    { key: "google", label: "谷歌充值", paidState: "", rechargeType: "google_play_recharge" },
+    { key: "third", label: "三方充值", paidState: "", rechargeType: "third_party" },
+    { key: "seller", label: "币商充值", paidState: "", rechargeType: "coin_seller" },
+    { key: "unsynced", label: "实付未同步", paidState: "unsynced", rechargeType: "" },
+];
+
+export function FinanceRechargeDetailList({
+    apps,
+    bills,
+    currency,
+    error,
+    exporting,
+    filters,
+    googlePaidRefreshing,
+    loading,
+    onExport,
+    onFiltersChange,
+    onRefreshGooglePaid,
+    onReload,
+    regions,
+    regionsByApp,
+    summary,
+}) {
+    const [expandedId, setExpandedId] = useState("");
     const items = bills.items || [];
     const page = Number(bills.page || filters.page || 1);
     const pageSize = Number(bills.pageSize || 50);
     const total = Number(bills.total || 0);
     const hasNextPage = page * pageSize < total;
+    const showCoins = currency === "coin";
+    const regionNames = new Map(
+        (regions || []).map((region) => [String(region.regionId), region.name || region.regionCode]),
+    );
+    const activeView =
+        SAVED_VIEWS.find(
+            (view) =>
+                view.rechargeType === (filters.rechargeType || "") && view.paidState === (filters.paidState || ""),
+        )?.key || "all";
+    const pendingGoogleTxIds = items
+        .filter((item) => item.rechargeType === "google_play_recharge" && !item.paidSyncedAtMs)
+        .map((item) => item.transactionId)
+        .filter(Boolean);
+    const columnCount = showCoins ? 9 : 8;
+
+    const chips = [
+        filters.appCode
+            ? { key: "appCode", label: `App：${appName(filters.appCode, apps)}`, reset: { appCode: "", regionId: "" } }
+            : null,
+        filters.regionId
+            ? {
+                  key: "regionId",
+                  label: `区域：${regionNames.get(String(filters.regionId)) || filters.regionId}`,
+                  reset: { regionId: "" },
+              }
+            : null,
+        filters.timeRange?.startMs || filters.timeRange?.endMs
+            ? {
+                  key: "time",
+                  label: `时间：${rangeLabel(filters.timeRange)}`,
+                  reset: { timeRange: { endMs: "", startMs: "" } },
+              }
+            : null,
+        filters.keyword ? { key: "keyword", label: `搜索：${filters.keyword}`, reset: { keyword: "" } } : null,
+    ].filter(Boolean);
 
     return (
-        <section className="finance-panel finance-list">
-            <div className="finance-toolbar finance-toolbar--recharge-details">
+        <section className="finance-card finance-list">
+            <div className="finance-views" role="tablist" aria-label="流水视图">
+                {SAVED_VIEWS.map((view) => (
+                    <button
+                        aria-selected={activeView === view.key}
+                        className={activeView === view.key ? "is-on" : ""}
+                        key={view.key}
+                        role="tab"
+                        type="button"
+                        onClick={() => onFiltersChange({ paidState: view.paidState, rechargeType: view.rechargeType })}
+                    >
+                        {view.label}
+                        {activeView === view.key && !loading ? (
+                            <span className="finance-views__cnt num">{formatAmount(total)}</span>
+                        ) : null}
+                    </button>
+                ))}
+            </div>
+
+            <div className="finance-filterrow">
+                {chips.map((chip) => (
+                    <button
+                        className="finance-fchip"
+                        key={chip.key}
+                        type="button"
+                        onClick={() => onFiltersChange(chip.reset)}
+                    >
+                        {chip.label}
+                        <span aria-hidden="true">×</span>
+                    </button>
+                ))}
                 <TextField
-                    label="APP"
+                    className="finance-filterrow__region"
+                    disabled={!filters.appCode}
+                    label="区域"
                     select
-                    value={filters.appCode}
-                    onChange={(event) => onFiltersChange({ appCode: event.target.value })}
+                    size="small"
+                    title={filters.appCode ? "" : "先选择 App"}
+                    value={filters.regionId}
+                    onChange={(event) => onFiltersChange({ regionId: event.target.value })}
                 >
-                    <MenuItem value="">全部 APP</MenuItem>
-                    {options.apps.map((app) => (
-                        <MenuItem key={app.appCode} value={app.appCode}>
-                            {app.appName || app.appCode}
+                    <MenuItem value="">全部区域</MenuItem>
+                    {(regions || []).map((region) => (
+                        <MenuItem key={region.regionId} value={String(region.regionId)}>
+                            {region.name || region.regionCode || region.regionId}
                         </MenuItem>
                     ))}
                 </TextField>
-                <TimeRangeFilter
-                    label="充值时间 · 中国时区"
-                    value={filters.timeRange}
-                    onChange={(timeRange) => onFiltersChange({ timeRange })}
-                />
                 <TextField
+                    className="finance-filterrow__search"
                     label="订单搜索"
+                    placeholder="交易号 / GPA单号 / 凭证号"
+                    size="small"
                     value={filters.keyword}
                     onChange={(event) => onFiltersChange({ keyword: event.target.value })}
                 />
-                <Button startIcon={<RefreshOutlined fontSize="small" />} variant="outlined" onClick={onReload}>
-                    刷新列表
+                <span className="finance-filterrow__spacer" />
+                <Button
+                    disabled={googlePaidRefreshing || !filters.appCode || !pendingGoogleTxIds.length}
+                    size="small"
+                    startIcon={<CloudSyncOutlined fontSize="small" />}
+                    title={filters.appCode ? "查询本页谷歌订单的用户实付币种和金额" : "先选择 App 后可查询"}
+                    variant="outlined"
+                    onClick={() => onRefreshGooglePaid(pendingGoogleTxIds)}
+                >
+                    {googlePaidRefreshing ? "查询中…" : "查询谷歌实付"}
+                </Button>
+                <Button
+                    disabled={exporting || !filters.appCode}
+                    size="small"
+                    startIcon={<FileDownloadOutlined fontSize="small" />}
+                    title={filters.appCode ? "按当前筛选导出全部明细（CSV）" : "先选择 App 后可导出"}
+                    variant="contained"
+                    onClick={onExport}
+                >
+                    {exporting ? "导出中…" : "导出报表"}
+                </Button>
+                <Button
+                    size="small"
+                    startIcon={<RefreshOutlined fontSize="small" />}
+                    variant="outlined"
+                    onClick={onReload}
+                >
+                    刷新
                 </Button>
             </div>
+
             {error ? <div className="finance-error">{error}</div> : null}
             {loading && !items.length ? <div className="finance-skeleton" /> : null}
             {!loading || items.length ? (
-                <TableContainer className="finance-table-wrap">
-                    <Table className="finance-table finance-table--recharge-details" size="small" stickyHeader>
-                        <TableHead>
-                            <TableRow>
-                                <TableCell>APP</TableCell>
-                                <TableCell align="right">充值总额</TableCell>
-                                <TableCell>充值来源</TableCell>
-                                <TableCell>充值订单号</TableCell>
-                                <TableCell>美金换算</TableCell>
-                                <TableCell>账单金额</TableCell>
-                                <TableCell>用户实付</TableCell>
-                                <TableCell>三方税率扣款</TableCell>
-                                <TableCell className="finance-time-cell">充值时间</TableCell>
-                            </TableRow>
-                        </TableHead>
-                        <TableBody>
+                <div className="finance-tablewrap">
+                    <table className="finance-flat-table finance-flat-table--bills">
+                        <thead>
+                            <tr>
+                                <th>充值时间</th>
+                                <th>APP</th>
+                                <th>充值来源</th>
+                                <th>充值订单号</th>
+                                {showCoins ? <th className="r">充值金币</th> : null}
+                                <th className="r">账单金额</th>
+                                <th className="r">用户实付</th>
+                                <th className="r">三方税率扣款</th>
+                                <th>区域</th>
+                            </tr>
+                        </thead>
+                        <tbody>
                             {items.length ? (
-                                items.map((item) => (
-                                    <TableRow key={item.id || item.transactionId}>
-                                        <TableCell>{appName(item, options.apps)}</TableCell>
-                                        <TableCell align="right">{coinText(item.coinAmount)}</TableCell>
-                                        <TableCell>{rechargeTypeLabel(item.rechargeType)}</TableCell>
-                                        <TableCell>
-                                            <Stacked
-                                                primary={item.transactionId || "-"}
-                                                secondary={secondaryOrderNo(item)}
-                                            />
-                                        </TableCell>
-                                        <TableCell>{exchangeText(item)}</TableCell>
-                                        <TableCell>{billAmountText(item)}</TableCell>
-                                        <TableCell>{userPaidText(item)}</TableCell>
-                                        <TableCell>{taxDeductionText(item)}</TableCell>
-                                        <TableCell className="finance-time-cell">
-                                            {formatTime(item.createdAtMs)}
-                                        </TableCell>
-                                    </TableRow>
-                                ))
+                                items.map((item) => {
+                                    const rowId = item.id || item.transactionId;
+                                    const expanded = expandedId === rowId;
+                                    return (
+                                        <Fragment key={rowId}>
+                                            <tr
+                                                className="finance-flat-table__row"
+                                                onClick={() => setExpandedId(expanded ? "" : rowId)}
+                                            >
+                                                <td className="num">{formatTime(item.createdAtMs)}</td>
+                                                <td>{appName(item.appCode, apps)}</td>
+                                                <td>
+                                                    <span
+                                                        className={`finance-badge finance-badge--${badgeTone(item.rechargeType)}`}
+                                                    >
+                                                        {rechargeTypeLabel(item.rechargeType)}
+                                                    </span>
+                                                </td>
+                                                <td className="finance-order-cell">
+                                                    <span className="finance-stack">
+                                                        <span>{item.transactionId || "-"}</span>
+                                                        <small>{secondaryOrderNo(item)}</small>
+                                                    </span>
+                                                </td>
+                                                {showCoins ? (
+                                                    <td className="r num">
+                                                        <AmountText value={item.coinAmount}>
+                                                            {coinText(item.coinAmount)}
+                                                        </AmountText>
+                                                    </td>
+                                                ) : null}
+                                                <td className="r num">
+                                                    <AmountText value={item.usdMinorAmount}>
+                                                        {billAmountText(item)}
+                                                    </AmountText>
+                                                </td>
+                                                <td className="r num">
+                                                    <AmountText value={item.userPaidAmountMicro}>
+                                                        {userPaidText(item)}
+                                                    </AmountText>
+                                                </td>
+                                                <td className="r num">{taxDeductionText(item)}</td>
+                                                <td>{regionText(item, regionsByApp, apps, !filters.appCode)}</td>
+                                            </tr>
+                                            {expanded ? (
+                                                <tr className="finance-detailrow">
+                                                    <td colSpan={columnCount}>
+                                                        <BillDetail
+                                                            googlePaidRefreshing={googlePaidRefreshing}
+                                                            item={item}
+                                                            onRefreshGooglePaid={onRefreshGooglePaid}
+                                                        />
+                                                    </td>
+                                                </tr>
+                                            ) : null}
+                                        </Fragment>
+                                    );
+                                })
                             ) : (
-                                <TableRow>
-                                    <TableCell align="center" colSpan={9}>
-                                        当前无数据
-                                    </TableCell>
-                                </TableRow>
+                                <tr>
+                                    <td colSpan={columnCount} style={{ textAlign: "center" }}>
+                                        当前筛选条件下没有账单
+                                    </td>
+                                </tr>
                             )}
-                        </TableBody>
-                    </Table>
-                </TableContainer>
+                        </tbody>
+                    </table>
+                </div>
             ) : null}
-            {total > pageSize ? (
-                <div className="finance-pagination">
+
+            <div className="finance-pagination">
+                <span className="finance-pagination__meta num">
+                    共 {formatAmount(total)} 笔
+                    {summary ? ` · 筛选合计 ${formatUsdMinor(summary.total?.usdMinorAmount || 0, "USD")}` : ""} · 第{" "}
+                    {page} / {Math.max(1, Math.ceil(total / pageSize))} 页
+                </span>
+                <div className="finance-pagination__buttons">
                     <Button
                         disabled={page <= 1 || loading}
+                        size="small"
                         variant="outlined"
                         onClick={() => onFiltersChange({ page: page - 1 })}
                     >
                         上一页
                     </Button>
-                    <span>
-                        第 {page} 页 / 共 {total} 条
-                    </span>
                     <Button
                         disabled={!hasNextPage || loading}
+                        size="small"
                         variant="outlined"
                         onClick={() => onFiltersChange({ page: page + 1 })}
                     >
                         下一页
                     </Button>
                 </div>
-            ) : null}
+            </div>
         </section>
     );
 }
 
-function Stacked({ primary, secondary }) {
+// BillDetail 是行内展开的单笔明细：金额瀑布 + 单号集合 + 谷歌实付操作。
+function BillDetail({ googlePaidRefreshing, item, onRefreshGooglePaid }) {
+    const currencyCode = item.userPaidCurrencyCode || item.currencyCode || "USD";
+    const paid = Number(item.userPaidAmountMicro) || 0;
+    const fee = Number(item.providerFeeMicro) || 0;
+    const tax = Number(item.providerTaxMicro) || 0;
+    const net = Number(item.providerNetMicro) || 0;
+    const isGoogle = item.rechargeType === "google_play_recharge";
+    const unsynced = isGoogle && !item.paidSyncedAtMs;
     return (
-        <span className="finance-stack">
-            <span>{primary || "-"}</span>
-            <small>{secondary || ""}</small>
-        </span>
+        <div className="finance-detail">
+            <div>
+                <div className="finance-card__title" style={{ marginBottom: 10 }}>
+                    金额拆解{paid ? ` · 实付币种 ${currencyCode}` : ""}
+                </div>
+                {paid && (fee || tax || net) ? (
+                    <div className="finance-wfall">
+                        <DetailWfallRow
+                            amount={paid}
+                            color="var(--fin-ink)"
+                            currency={currencyCode}
+                            label="用户实付"
+                            max={paid}
+                        />
+                        {tax ? (
+                            <DetailWfallRow
+                                amount={-tax}
+                                color="#C86A6A"
+                                currency={currencyCode}
+                                label="代缴税费"
+                                max={paid}
+                            />
+                        ) : null}
+                        {fee ? (
+                            <DetailWfallRow
+                                amount={-fee}
+                                color="#E19B3C"
+                                currency={currencyCode}
+                                label="渠道服务费"
+                                max={paid}
+                            />
+                        ) : null}
+                        {net ? (
+                            <DetailWfallRow
+                                amount={net}
+                                color="var(--fin-pos)"
+                                currency={currencyCode}
+                                label="开发者净收"
+                                max={paid}
+                            />
+                        ) : null}
+                    </div>
+                ) : unsynced ? (
+                    <p className="finance-hint">
+                        实付明细未同步。
+                        <Button
+                            disabled={googlePaidRefreshing}
+                            size="small"
+                            style={{ marginLeft: 8 }}
+                            variant="outlined"
+                            onClick={(event) => {
+                                event.stopPropagation();
+                                onRefreshGooglePaid([item.transactionId]);
+                            }}
+                        >
+                            同步这一笔
+                        </Button>
+                    </p>
+                ) : (
+                    <p className="finance-hint">
+                        {paid ? `用户实付 ${formatMicroMoney(paid, currencyCode)} · ` : ""}
+                        该渠道未提供扣费明细
+                    </p>
+                )}
+            </div>
+            <dl className="finance-kv">
+                <dt>交易号</dt>
+                <dd className="finance-order-cell">{item.transactionId || "-"}</dd>
+                {item.commandId ? (
+                    <>
+                        <dt>业务单号</dt>
+                        <dd className="finance-order-cell">{item.commandId}</dd>
+                    </>
+                ) : null}
+                {item.externalRef ? (
+                    <>
+                        <dt>外部订单</dt>
+                        <dd className="finance-order-cell">{item.externalRef}</dd>
+                    </>
+                ) : null}
+                {item.user?.username || item.user?.userId ? (
+                    <>
+                        <dt>充值用户</dt>
+                        <dd>
+                            {item.user.username || "-"}
+                            {item.user.userId ? ` · ID ${item.user.userId}` : ""}
+                        </dd>
+                    </>
+                ) : null}
+                {item.sellerUserId ? (
+                    <>
+                        <dt>币商 ID</dt>
+                        <dd className="num">{item.sellerUserId}</dd>
+                    </>
+                ) : null}
+                <dt>美金换算</dt>
+                <dd className="num">{formatUsdMinor(item.usdMinorAmount, "USD")}</dd>
+                {item.paidSyncedAtMs ? (
+                    <>
+                        <dt>实付同步于</dt>
+                        <dd className="num">{formatTime(item.paidSyncedAtMs)}</dd>
+                    </>
+                ) : null}
+            </dl>
+        </div>
     );
 }
 
-function appName(item, apps) {
-    return item.appName || apps.find((app) => app.appCode === item.appCode)?.appName || item.appCode || "-";
+function DetailWfallRow({ amount, color, currency, label, max }) {
+    const negative = amount < 0;
+    const width = max > 0 ? (Math.abs(amount) / max) * 100 : 0;
+    return (
+        <div className="finance-wfall__row">
+            <span className="finance-wfall__label">{label}</span>
+            <span className="finance-wfall__track">
+                <i style={{ background: color, width: `${Math.min(100, width)}%` }} />
+            </span>
+            <span className={negative ? "finance-wfall__val num finance-amount--negative" : "finance-wfall__val num"}>
+                {negative ? `− ${formatMicroMoney(-amount, currency)}` : formatMicroMoney(amount, currency)}
+            </span>
+        </div>
+    );
+}
+
+function AmountText({ children, value }) {
+    const negative = hasNumber(value) && Number(value) < 0;
+    return <span className={negative ? "finance-amount finance-amount--negative" : "finance-amount"}>{children}</span>;
+}
+
+function badgeTone(rechargeType) {
+    return rechargeSourceTone(rechargeType) === "google"
+        ? "google"
+        : rechargeSourceTone(rechargeType) === "coinseller"
+          ? "coinseller"
+          : "thirdparty";
+}
+
+function rangeLabel(timeRange) {
+    const start = timeRange?.startMs ? formatTime(timeRange.startMs) : "…";
+    const end = timeRange?.endMs ? formatTime(timeRange.endMs) : "…";
+    return `${start} ~ ${end}`;
+}
+
+function appName(appCode, apps) {
+    return (apps || []).find((app) => app.appCode === appCode)?.appName || appCode || "-";
+}
+
+// regionText 解析区域列：全部 App 视图下带上 App 前缀（如 “Lalu-南亚区”），单 App 视图只显示区域名。
+function regionText(item, regionsByApp, apps, withAppPrefix) {
+    const regionId = item.targetRegionId || item.sellerRegionId;
+    if (!regionId) {
+        return "—";
+    }
+    const appRegions = (regionsByApp || {})[item.appCode] || [];
+    const name = appRegions.find((region) => String(region.regionId) === String(regionId))?.name || `区域 ${regionId}`;
+    return withAppPrefix ? `${appName(item.appCode, apps)}-${name}` : name;
 }
 
 function secondaryOrderNo(item) {
@@ -153,20 +466,13 @@ function coinText(value) {
     return text === "-" ? "-" : `${text} 金币`;
 }
 
-function exchangeText(item) {
-    if (hasNumber(item.exchangeCoinAmount) || hasNumber(item.exchangeUsdMinorAmount)) {
-        return `${coinText(item.exchangeCoinAmount)} = ${formatUsdMinor(item.exchangeUsdMinorAmount, "USD")}`;
-    }
-    return formatUsdMinor(item.usdMinorAmount, "USD");
-}
-
 function billAmountText(item) {
     if (item.billAmountText) {
         return item.billAmountText;
     }
     const amount = hasNumber(item.billAmountMinor)
         ? item.billAmountMinor
-        : hasNumber(item.providerAmountMinor)
+        : hasPositiveNumber(item.providerAmountMinor)
           ? item.providerAmountMinor
           : item.usdMinorAmount;
     return formatUsdMinor(amount, item.currencyCode || "USD");
@@ -176,27 +482,42 @@ function userPaidText(item) {
     if (item.userPaidText) {
         return item.userPaidText;
     }
-    if (hasNumber(item.userPaidAmountMinor)) {
-        return formatUsdMinor(item.userPaidAmountMinor, item.currencyCode || "USD");
+    if (hasNonZeroNumber(item.userPaidAmountMicro) && item.userPaidCurrencyCode) {
+        return formatMicroMoney(item.userPaidAmountMicro, item.userPaidCurrencyCode);
     }
-    if (hasNumber(item.providerAmountMinor)) {
-        return formatUsdMinor(item.providerAmountMinor, item.currencyCode || "USD");
+    if (isGoogleBill(item) && !item.paidSyncedAtMs) {
+        return "未同步";
     }
-    if (hasNumber(item.userPaidAmountMicro)) {
-        return formatMicroMoney(item.userPaidAmountMicro, item.currencyCode || "USD");
+    if (hasPositiveNumber(item.userPaidAmountMinor)) {
+        return formatUsdMinor(item.userPaidAmountMinor, item.userPaidCurrencyCode || item.currencyCode || "USD");
     }
     return "-";
 }
 
 function taxDeductionText(item) {
-    const rate = formatPercent(item.taxRate);
-    const amount =
-        item.taxDeductionText ||
-        (hasNumber(item.taxDeductionMinor) ? formatUsdMinor(item.taxDeductionMinor, item.currencyCode || "USD") : "");
-    if (amount && rate) {
-        return `${amount} / ${rate}`;
+    const currency = item.userPaidCurrencyCode || item.currencyCode || "USD";
+    const fee = hasPositiveNumber(item.providerFeeMicro) ? item.providerFeeMicro : 0;
+    const tax = hasPositiveNumber(item.providerTaxMicro) ? item.providerTaxMicro : 0;
+    const deduction = fee + tax;
+    if (deduction > 0) {
+        const parts = [formatMicroMoney(deduction, currency)];
+        if (hasPositiveNumber(item.userPaidAmountMicro)) {
+            const percent = (deduction / item.userPaidAmountMicro) * 100;
+            parts.push(`${percent.toLocaleString("zh-CN", { maximumFractionDigits: 2 })}%`);
+        }
+        return parts.join(" / ");
     }
-    return amount || rate || "-";
+    if (item.taxDeductionText) {
+        return item.taxDeductionText;
+    }
+    if (isGoogleBill(item) && !item.paidSyncedAtMs) {
+        return "未同步";
+    }
+    return "-";
+}
+
+function isGoogleBill(item) {
+    return item.rechargeType === "google_play_recharge" || item.providerCode === "google_play";
 }
 
 function hasNumber(value) {
@@ -205,3 +526,11 @@ function hasNumber(value) {
     }
     return Number.isFinite(Number(value));
 }
+
+function hasPositiveNumber(value) {
+    return hasNumber(value) && Number(value) > 0;
+}
+
+function hasNonZeroNumber(value) {
+    return hasNumber(value) && Number(value) !== 0;
+}

finance/src/components/FinanceRechargeDetailList.test.jsx

@@ -1,4 +1,4 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { expect, test, vi } from "vitest";
 import { FinanceRechargeDetailList } from "./FinanceRechargeDetailList.jsx";
 
@@ -14,6 +14,7 @@ const baseProps = {
         appCode: "",
         keyword: "",
         page: 1,
+        regionId: "",
         timeRange: { endMs: "", startMs: "" },
     },
     loading: false,
@@ -25,49 +26,63 @@ const baseProps = {
             { appCode: "aslan", appName: "Aslan" },
         ],
     },
+    summary: {
+        googlePlay: { billCount: 1, coinAmount: 90000, usdMinorAmount: 999 },
+        thirdParty: { billCount: 0, coinAmount: 0, usdMinorAmount: 0 },
+        total: { billCount: 1, coinAmount: 90000, usdMinorAmount: 999 },
+    },
+    summaryLoading: false,
 };
 
-test("renders app recharge detail columns and values", () => {
+test("hides coin recharge columns by default", () => {
     render(
         <FinanceRechargeDetailList
             {...baseProps}
             bills={{
                 ...baseProps.bills,
-                items: [
-                    {
-                        appCode: "aslan",
-                        coinAmount: 90000,
-                        commandId: "cmd-1",
-                        createdAtMs: 1760000000000,
-                        currencyCode: "SAR",
-                        exchangeCoinAmount: 90000,
-                        exchangeUsdMinorAmount: 999,
-                        externalRef: "GPA.1",
-                        id: "tx-google",
-                        providerAmountMinor: 1299,
-                        rechargeType: "google_play_recharge",
-                        taxDeductionMinor: 195,
-                        taxRate: 0.15,
-                        transactionId: "tx-google",
-                        usdMinorAmount: 999,
-                    },
-                ],
+                items: [rechargeBillFixture()],
                 total: 1,
             }}
         />,
     );
 
+    expect(screen.getByRole("switch", { name: "金币显示" })).not.toBeChecked();
+    expect(screen.queryByRole("columnheader", { name: "充值金币" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("columnheader", { name: "金币换算" })).not.toBeInTheDocument();
+    expect(screen.queryByText("90,000 金币")).not.toBeInTheDocument();
+    expect(screen.queryByText("90,000 金币 = USD 9.99")).not.toBeInTheDocument();
+    expect(screen.queryByText("1 笔 · 90,000 金币")).not.toBeInTheDocument();
+    expect(screen.getAllByText("1 笔")).toHaveLength(2);
+    expect(screen.getByRole("columnheader", { name: "账单金额" })).toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: "用户实付" })).toBeInTheDocument();
+});
+
+test("renders app recharge coin columns and values when switch is enabled", () => {
+    render(
+        <FinanceRechargeDetailList
+            {...baseProps}
+            bills={{
+                ...baseProps.bills,
+                items: [rechargeBillFixture()],
+                total: 1,
+            }}
+        />,
+    );
+
+    fireEvent.click(screen.getByRole("switch", { name: "金币显示" }));
+
     expect(screen.getByRole("columnheader", { name: "APP" })).toBeInTheDocument();
-    expect(screen.getByRole("columnheader", { name: "充值总额" })).toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: "充值金币" })).toBeInTheDocument();
     expect(screen.getByRole("columnheader", { name: "充值来源" })).toBeInTheDocument();
     expect(screen.getByRole("columnheader", { name: "充值订单号" })).toBeInTheDocument();
-    expect(screen.getByRole("columnheader", { name: "美金换算" })).toBeInTheDocument();
+    expect(screen.getByRole("columnheader", { name: "金币换算" })).toBeInTheDocument();
     expect(screen.getByRole("columnheader", { name: "账单金额" })).toBeInTheDocument();
     expect(screen.getByRole("columnheader", { name: "用户实付" })).toBeInTheDocument();
     expect(screen.getByRole("columnheader", { name: "三方税率扣款" })).toBeInTheDocument();
     expect(screen.getByText("Aslan")).toBeInTheDocument();
     expect(screen.getByText("90,000 金币")).toBeInTheDocument();
-    expect(screen.getByText("谷歌充值")).toBeInTheDocument();
+    expect(screen.getAllByText("1 笔 · 90,000 金币")).toHaveLength(2);
+    expect(screen.getAllByText("谷歌充值").length).toBeGreaterThanOrEqual(1);
     expect(screen.getByText("tx-google")).toBeInTheDocument();
     expect(screen.getByText("cmd-1 / GPA.1")).toBeInTheDocument();
     expect(screen.getByText("90,000 金币 = USD 9.99")).toBeInTheDocument();
@@ -79,6 +94,32 @@ test("renders app recharge detail columns and values", () => {
 test("keeps empty recharge detail table colspan aligned with visible columns", () => {
     const { container } = render(<FinanceRechargeDetailList {...baseProps} />);
 
-    expect(container.querySelector("tbody td")?.colSpan).toBe(9);
+    expect(container.querySelector("tbody td")?.colSpan).toBe(7);
     expect(screen.getByText("当前无数据")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("switch", { name: "金币显示" }));
+    expect(container.querySelector("tbody td")?.colSpan).toBe(9);
 });
+
+function rechargeBillFixture() {
+    return {
+        appCode: "aslan",
+        coinAmount: 90000,
+        commandId: "cmd-1",
+        createdAtMs: 1760000000000,
+        currencyCode: "SAR",
+        exchangeCoinAmount: 90000,
+        exchangeUsdMinorAmount: 999,
+        externalRef: "GPA.1",
+        id: "tx-google",
+        paidSyncedAtMs: 1760000100000,
+        providerAmountMinor: 1299,
+        providerTaxMicro: 1950000,
+        rechargeType: "google_play_recharge",
+        transactionId: "tx-google",
+        usdMinorAmount: 999,
+        userPaidAmountMicro: 13000000,
+        userPaidCurrencyCode: "SAR",
+        userPaidText: "SAR 12.99",
+    };
+}

finance/src/components/FinanceReconciliation.jsx

@@ -0,0 +1,152 @@
+import Button from "@mui/material/Button";
+import { EMPTY_RECHARGE_OVERVIEW, EMPTY_RECHARGE_SUMMARY, formatAmount, formatUsdMinor } from "../format.js";
+
+// 渠道对账页：按结算月核对各渠道的流水与扣费。谷歌口径来自 Orders API 同步的实付明细；
+// 三方与币商没有渠道侧扣费数据时如实标注，不做拍脑袋估算。
+export function FinanceReconciliation({ loading, month, onMonthChange, overview, summary }) {
+    const data = summary || EMPTY_RECHARGE_SUMMARY;
+    const paid = (overview || EMPTY_RECHARGE_OVERVIEW).googlePaid;
+    const totalUsd = Number(data.total?.usdMinorAmount) || 0;
+    const feeUsd = paid.estFeeUsdMinor;
+    const taxUsd = paid.estTaxUsdMinor;
+    const netUsd = totalUsd - feeUsd - taxUsd;
+
+    return (
+        <div className="finance-overview">
+            <div className="finance-recon-toolbar">
+                <Button size="small" variant="outlined" onClick={() => onMonthChange(-1)}>
+                    ‹ 上月
+                </Button>
+                <span className="finance-recon-toolbar__month">{month.label} 结算期</span>
+                <Button disabled={month.isCurrent} size="small" variant="outlined" onClick={() => onMonthChange(1)}>
+                    下月 ›
+                </Button>
+                <span className="finance-hint" style={{ marginLeft: "auto" }}>
+                    对账口径：平台流水 × 谷歌 Orders API 实付 · 中国时区
+                </span>
+            </div>
+
+            <section className="finance-card">
+                <div className="finance-card__head">
+                    <span className="finance-card__title">
+                        结算瀑布<small>全渠道 · USD{paid.unsyncedCount > 0 ? " · 谷歌扣费为已同步部分估算" : ""}</small>
+                    </span>
+                </div>
+                <div className="finance-card__body">
+                    {loading ? (
+                        <p className="finance-hint">统计中…</p>
+                    ) : (
+                        <div className="finance-wfall">
+                            <WaterfallRow amount={totalUsd} color="var(--fin-ink)" label="充值流水" max={totalUsd} />
+                            <WaterfallRow amount={-feeUsd} color="#E19B3C" label="渠道手续费（估）" max={totalUsd} />
+                            <WaterfallRow amount={-taxUsd} color="#C86A6A" label="代缴税费（估）" max={totalUsd} />
+                            <WaterfallRow amount={netUsd} color="var(--fin-pos)" label="净入账（估）" max={totalUsd} />
+                        </div>
+                    )}
+                </div>
+            </section>
+
+            <div className="finance-recon-grid">
+                <section className="finance-card">
+                    <div className="finance-card__head">
+                        <span className="finance-badge finance-badge--google">谷歌</span>
+                        {paid.unsyncedCount > 0 ? (
+                            <span className="finance-pill finance-pill--warn">
+                                <i />
+                                {formatAmount(paid.unsyncedCount)} 笔待同步
+                            </span>
+                        ) : (
+                            <span className="finance-pill finance-pill--ok">
+                                <i />
+                                实付已全量同步
+                            </span>
+                        )}
+                    </div>
+                    <div className="finance-card__body">
+                        <ReconLine
+                            label="平台流水"
+                            value={formatUsdMinor(data.googlePlay?.usdMinorAmount || 0, "USD")}
+                        />
+                        <ReconLine
+                            label={`已同步实付覆盖（${formatAmount(paid.syncedCount)}/${formatAmount(paid.googleBillCount)} 笔）`}
+                            value={formatUsdMinor(paid.coveredUsdMinor, "USD")}
+                        />
+                        <ReconLine
+                            label="谷歌服务费（估）"
+                            negative
+                            value={`− ${formatUsdMinor(paid.estFeeUsdMinor, "USD")}`}
+                        />
+                        <ReconLine
+                            label="代缴税费（估）"
+                            negative
+                            value={`− ${formatUsdMinor(paid.estTaxUsdMinor, "USD")}`}
+                        />
+                        <ReconLine label="预计净入账" total value={formatUsdMinor(paid.estNetUsdMinor, "USD")} />
+                        <p className="finance-hint" style={{ marginTop: 10 }}>
+                            与 Play Console 财务报告按月核对；未同步订单可在流水页批量补数
+                        </p>
+                    </div>
+                </section>
+
+                <section className="finance-card">
+                    <div className="finance-card__head">
+                        <span className="finance-badge finance-badge--thirdparty">三方</span>
+                    </div>
+                    <div className="finance-card__body">
+                        <ReconLine
+                            label="三方流水"
+                            value={formatUsdMinor(data.thirdParty?.usdMinorAmount || 0, "USD")}
+                        />
+                        <ReconLine label="笔数" value={`${formatAmount(data.thirdParty?.billCount || 0)} 笔`} />
+                        <ReconLine label="渠道扣费" value="V5Pay 逐笔回传 / MiFaPay 未提供" />
+                        <p className="finance-hint" style={{ marginTop: 10 }}>
+                            V5Pay 的 fee/tax 已逐笔展示在流水明细；MiFaPay 仅提供毛额，需用渠道后台月账单人工核对
+                        </p>
+                    </div>
+                </section>
+
+                <section className="finance-card">
+                    <div className="finance-card__head">
+                        <span className="finance-badge finance-badge--coinseller">币商</span>
+                    </div>
+                    <div className="finance-card__body">
+                        <ReconLine
+                            label="净进货（进货 − 冲回）"
+                            value={formatUsdMinor(data.coinSeller?.usdMinorAmount || 0, "USD")}
+                        />
+                        <ReconLine label="记录数" value={`${formatAmount(data.coinSeller?.billCount || 0)} 笔`} />
+                        <ReconLine label="金币入库" value={`${formatAmount(data.coinSeller?.coinAmount || 0)} 金币`} />
+                        <p className="finance-hint" style={{ marginTop: 10 }}>
+                            打款凭证与 TRC20 交易号逐笔登记在流水明细，可按凭证号搜索核对
+                        </p>
+                    </div>
+                </section>
+            </div>
+        </div>
+    );
+}
+
+function WaterfallRow({ amount, color, label, max }) {
+    const width = max > 0 ? (Math.abs(amount) / max) * 100 : 0;
+    const negative = amount < 0;
+    return (
+        <div className="finance-wfall__row">
+            <span className="finance-wfall__label">{label}</span>
+            <span className="finance-wfall__track">
+                <i style={{ background: color, width: `${Math.min(100, width)}%` }} />
+            </span>
+            <span className={negative ? "finance-wfall__val num finance-amount--negative" : "finance-wfall__val num"}>
+                {negative ? `− ${formatUsdMinor(-amount, "USD")}` : formatUsdMinor(amount, "USD")}
+            </span>
+        </div>
+    );
+}
+
+function ReconLine({ label, negative, total, value }) {
+    return (
+        <div className={["finance-recon-line", total ? "finance-recon-line--total" : ""].filter(Boolean).join(" ")}>
+            <span>{label}</span>
+            <b className={negative ? "num finance-amount--negative" : "num"}>{value}</b>
+        </div>
+    );
+}

finance/src/components/FinanceShell.jsx

@@ -1,77 +1,120 @@
 import AssignmentOutlined from "@mui/icons-material/AssignmentOutlined";
 import FactCheckOutlined from "@mui/icons-material/FactCheckOutlined";
+import InsightsOutlined from "@mui/icons-material/InsightsOutlined";
 import PaymentsOutlined from "@mui/icons-material/PaymentsOutlined";
 import ReceiptLongOutlined from "@mui/icons-material/ReceiptLongOutlined";
-import RefreshOutlined from "@mui/icons-material/RefreshOutlined";
-import Button from "@mui/material/Button";
+import RuleFolderOutlined from "@mui/icons-material/RuleFolderOutlined";
 import LinearProgress from "@mui/material/LinearProgress";
 
-const views = [
-  { icon: ReceiptLongOutlined, id: "rechargeDetails", label: "APP充值详情" },
-  { icon: AssignmentOutlined, id: "create", label: "发起申请" },
-  { icon: FactCheckOutlined, id: "applications", label: "申请审核" },
-  { icon: PaymentsOutlined, id: "withdrawals", label: "用户提现申请" }
+const NAV_GROUPS = [
+    {
+        label: "经营",
+        views: [
+            { icon: InsightsOutlined, id: "overview", label: "财务概览" },
+            { icon: ReceiptLongOutlined, id: "rechargeDetails", label: "充值流水" },
+            { icon: RuleFolderOutlined, id: "recon", label: "渠道对账" },
+        ],
+    },
+    {
+        label: "审批",
+        views: [
+            { icon: AssignmentOutlined, id: "create", label: "发起申请" },
+            { icon: FactCheckOutlined, id: "applications", label: "申请审核" },
+            { icon: PaymentsOutlined, id: "withdrawals", label: "用户提现申请" },
+        ],
+    },
 ];
 
-export function FinanceShell({ activeView, canAudit, canCreate, canViewRechargeDetails, canViewWithdrawals, children, loading, onRefresh, onViewChange, session }) {
-  const visibleViews = views.filter((view) => {
-    if (view.id === "rechargeDetails") {
-      return canViewRechargeDetails;
-    }
-    if (view.id === "applications") {
-      return canAudit;
-    }
-    if (view.id === "withdrawals") {
-      return canViewWithdrawals;
-    }
-    return canCreate;
-  });
-  const activeLabel = visibleViews.find((view) => view.id === activeView)?.label || visibleViews[0]?.label || "财务系统";
+const VIEW_TITLES = {
+    applications: "申请审核",
+    create: "发起申请",
+    overview: "财务概览",
+    recon: "渠道对账",
+    rechargeDetails: "充值流水",
+    withdrawals: "用户提现申请",
+};
 
-  return (
-    <main className="finance-shell">
-      <aside className="finance-sidebar">
-        <div className="finance-brand">
-          <span>HY</span>
-          <strong>财务系统</strong>
-        </div>
-        <nav className="finance-nav" aria-label="财务系统菜单">
-          {visibleViews.map((view) => {
-            const Icon = view.icon;
-            return (
-              <button className={activeView === view.id ? "is-active" : ""} key={view.id} type="button" onClick={() => onViewChange(view.id)}>
-                <Icon fontSize="small" />
-                <span>{view.label}</span>
-              </button>
-            );
-          })}
-        </nav>
-        <div className="finance-user">
-          <span>{session?.user?.name || session?.user?.account || "当前用户"}</span>
-          <small>
-            {canViewRechargeDetails
-              ? "payment-bill:view"
-              : canAudit
-                ? "finance-application:audit"
-                : canViewWithdrawals
-                  ? "finance-withdrawal:view"
-                  : "finance-application:create"}
-          </small>
-        </div>
-      </aside>
-      <section className="finance-main">
-        <header className="finance-header">
-          <div>
-            <span>HYApp</span>
-            <h1>{activeLabel}</h1>
-          </div>
-          <Button startIcon={<RefreshOutlined fontSize="small" />} variant="outlined" onClick={onRefresh}>
-            刷新
-          </Button>
-        </header>
-        {loading ? <LinearProgress className="finance-progress" /> : null}
-        <div className="finance-content">{children}</div>
-      </section>
-    </main>
-  );
+export function FinanceShell({
+    activeView,
+    appBar,
+    canAudit,
+    canCreate,
+    canViewRechargeDetails,
+    canViewWithdrawals,
+    children,
+    loading,
+    onViewChange,
+    session,
+    subtitle,
+    toolbar,
+}) {
+    const allows = (viewId) => {
+        if (viewId === "overview" || viewId === "rechargeDetails" || viewId === "recon") {
+            return canViewRechargeDetails;
+        }
+        if (viewId === "applications") {
+            return canAudit;
+        }
+        if (viewId === "withdrawals") {
+            return canViewWithdrawals;
+        }
+        return canCreate;
+    };
+    return (
+        <main className="finance-shell">
+            <aside className="finance-sidebar">
+                <div className="finance-brand">
+                    <span>HY</span>
+                    <div>
+                        <strong>财务工作台</strong>
+                        <small>Finance Console</small>
+                    </div>
+                </div>
+                <nav className="finance-nav" aria-label="财务系统菜单">
+                    {NAV_GROUPS.map((group) => {
+                        const visible = group.views.filter((view) => allows(view.id));
+                        if (!visible.length) {
+                            return null;
+                        }
+                        return (
+                            <div className="finance-nav__group" key={group.label}>
+                                <span className="finance-nav__label">{group.label}</span>
+                                {visible.map((view) => {
+                                    const Icon = view.icon;
+                                    return (
+                                        <button
+                                            className={activeView === view.id ? "is-active" : ""}
+                                            key={view.id}
+                                            type="button"
+                                            onClick={() => onViewChange(view.id)}
+                                        >
+                                            <Icon fontSize="small" />
+                                            <span>{view.label}</span>
+                                        </button>
+                                    );
+                                })}
+                            </div>
+                        );
+                    })}
+                </nav>
+                <div className="finance-user">
+                    <span>{session?.user?.name || session?.user?.account || "当前用户"}</span>
+                    <small>财务系统</small>
+                </div>
+            </aside>
+            <section className="finance-main">
+                {loading ? <LinearProgress className="finance-progress" /> : null}
+                <header className="finance-topbar">
+                    {appBar || (
+                        <div className="finance-topbar__title">
+                            <h1>{VIEW_TITLES[activeView] || "财务系统"}</h1>
+                            {subtitle ? <small>{subtitle}</small> : null}
+                        </div>
+                    )}
+                    {toolbar ? <div className="finance-topbar__tools">{toolbar}</div> : null}
+                </header>
+                <div className="finance-content">{children}</div>
+            </section>
+        </main>
+    );
 }

finance/src/format.js

@@ -138,9 +138,17 @@ export function normalizeRechargeBill(item = {}) {
         exchangeUsdMinorAmount: numberValue(item.exchangeUsdMinorAmount ?? item.exchange_usd_minor_amount),
         externalRef: stringValue(item.externalRef ?? item.external_ref),
         id: stringValue(item.id ?? item.transactionId ?? item.transaction_id),
+        paidSyncedAtMs: numberOrNull(item.paidSyncedAtMs ?? item.paid_synced_at_ms),
         providerAmountMinor: numberOrNull(item.providerAmountMinor ?? item.provider_amount_minor),
+        providerCode: stringValue(item.providerCode ?? item.provider_code),
+        providerFeeMicro: numberOrNull(item.providerFeeMicro ?? item.provider_fee_micro),
+        providerNetMicro: numberOrNull(item.providerNetMicro ?? item.provider_net_micro),
+        providerTaxMicro: numberOrNull(item.providerTaxMicro ?? item.provider_tax_micro),
         rechargeType: stringValue(item.rechargeType ?? item.recharge_type),
+        sellerRegionId: numberOrNull(item.sellerRegionId ?? item.seller_region_id),
+        sellerUserId: numberOrNull(item.sellerUserId ?? item.seller_user_id),
         status: stringValue(item.status),
+        targetRegionId: numberOrNull(item.targetRegionId ?? item.target_region_id),
         taxDeductionMinor: numberOrNull(
             item.taxDeductionMinor ??
                 item.tax_deduction_minor ??
@@ -156,6 +164,11 @@ export function normalizeRechargeBill(item = {}) {
         taxRate: numberOrNull(item.taxRate ?? item.tax_rate ?? item.thirdPartyTaxRate ?? item.third_party_tax_rate),
         transactionId: stringValue(item.transactionId ?? item.transaction_id),
         usdMinorAmount: numberValue(item.usdMinorAmount ?? item.usd_minor_amount),
+        user: {
+            displayUserId: stringValue(item.user?.displayUserId ?? item.user?.display_user_id),
+            userId: stringValue(item.user?.userId ?? item.user?.user_id) || stringValue(item.userId ?? item.user_id),
+            username: stringValue(item.user?.username),
+        },
         userPaidAmountMicro: numberOrNull(
             item.userPaidAmountMicro ?? item.user_paid_amount_micro ?? item.paidAmountMicro ?? item.paid_amount_micro,
         ),
@@ -167,6 +180,7 @@ export function normalizeRechargeBill(item = {}) {
                 item.providerAmountMinor ??
                 item.provider_amount_minor,
         ),
+        userPaidCurrencyCode: stringValue(item.userPaidCurrencyCode ?? item.user_paid_currency_code),
         userPaidText: stringValue(
             item.userPaidText ??
                 item.user_paid_text ??
@@ -188,6 +202,158 @@ export function normalizeRechargeBillPage(data = {}) {
     };
 }
 
+const EMPTY_RECHARGE_SUMMARY_BUCKET = { billCount: 0, coinAmount: 0, usdMinorAmount: 0 };
+
+export const EMPTY_RECHARGE_SUMMARY = {
+    coinSeller: EMPTY_RECHARGE_SUMMARY_BUCKET,
+    googlePlay: EMPTY_RECHARGE_SUMMARY_BUCKET,
+    thirdParty: EMPTY_RECHARGE_SUMMARY_BUCKET,
+    total: EMPTY_RECHARGE_SUMMARY_BUCKET,
+};
+
+function normalizeRechargeSummaryBucket(bucket = {}) {
+    return {
+        billCount: numberValue(bucket.billCount ?? bucket.bill_count) || 0,
+        coinAmount: numberValue(bucket.coinAmount ?? bucket.coin_amount) || 0,
+        usdMinorAmount: numberValue(bucket.usdMinorAmount ?? bucket.usd_minor_amount) || 0,
+    };
+}
+
+export function normalizeRechargeSummary(data = {}) {
+    return {
+        coinSeller: normalizeRechargeSummaryBucket(data.coinSeller ?? data.coin_seller),
+        googlePlay: normalizeRechargeSummaryBucket(data.googlePlay ?? data.google_play),
+        thirdParty: normalizeRechargeSummaryBucket(data.thirdParty ?? data.third_party),
+        total: normalizeRechargeSummaryBucket(data.total),
+    };
+}
+
+export function mergeRechargeSummaries(summaries = []) {
+    const merged = normalizeRechargeSummary({});
+    for (const summary of summaries) {
+        for (const key of ["coinSeller", "googlePlay", "thirdParty", "total"]) {
+            merged[key] = {
+                billCount: merged[key].billCount + summary[key].billCount,
+                coinAmount: merged[key].coinAmount + summary[key].coinAmount,
+                usdMinorAmount: merged[key].usdMinorAmount + summary[key].usdMinorAmount,
+            };
+        }
+    }
+    return merged;
+}
+
+export const EMPTY_RECHARGE_OVERVIEW = {
+    daily: [],
+    googlePaid: {
+        coveredUsdMinor: 0,
+        estFeeUsdMinor: 0,
+        estNetUsdMinor: 0,
+        estTaxUsdMinor: 0,
+        googleBillCount: 0,
+        syncedCount: 0,
+        unsyncedCount: 0,
+    },
+    regions: [],
+    withdrawal: {
+        approvedCount: 0,
+        approvedUsdMinor: 0,
+        totalUsdMinor: 0,
+        transferCount: 0,
+        transferUsdMinor: 0,
+    },
+};
+
+export function normalizeRechargeOverview(data = {}) {
+    const daily = Array.isArray(data.daily) ? data.daily : [];
+    const regions = Array.isArray(data.regions) ? data.regions : [];
+    const paid = data.googlePaid ?? data.google_paid ?? {};
+    const withdrawal = data.withdrawal ?? {};
+    return {
+        daily: daily.map((item) => ({
+            coinSellerCoinAmount: numberValue(item.coinSellerCoinAmount ?? item.coin_seller_coin_amount) || 0,
+            coinSellerUsdMinor: numberValue(item.coinSellerUsdMinor ?? item.coin_seller_usd_minor) || 0,
+            date: stringValue(item.date),
+            googleCoinAmount: numberValue(item.googleCoinAmount ?? item.google_coin_amount) || 0,
+            googleUsdMinor: numberValue(item.googleUsdMinor ?? item.google_usd_minor) || 0,
+            thirdPartyCoinAmount: numberValue(item.thirdPartyCoinAmount ?? item.third_party_coin_amount) || 0,
+            thirdPartyUsdMinor: numberValue(item.thirdPartyUsdMinor ?? item.third_party_usd_minor) || 0,
+        })),
+        googlePaid: {
+            coveredUsdMinor: numberValue(paid.coveredUsdMinor ?? paid.covered_usd_minor) || 0,
+            estFeeUsdMinor: numberValue(paid.estFeeUsdMinor ?? paid.est_fee_usd_minor) || 0,
+            estNetUsdMinor: numberValue(paid.estNetUsdMinor ?? paid.est_net_usd_minor) || 0,
+            estTaxUsdMinor: numberValue(paid.estTaxUsdMinor ?? paid.est_tax_usd_minor) || 0,
+            googleBillCount: numberValue(paid.googleBillCount ?? paid.google_bill_count) || 0,
+            syncedCount: numberValue(paid.syncedCount ?? paid.synced_count) || 0,
+            unsyncedCount: numberValue(paid.unsyncedCount ?? paid.unsynced_count) || 0,
+        },
+        regions: regions.map((item) => ({
+            billCount: numberValue(item.billCount ?? item.bill_count) || 0,
+            name: stringValue(item.name),
+            regionId: numberOrNull(item.regionId ?? item.region_id),
+            usdMinorAmount: numberValue(item.usdMinorAmount ?? item.usd_minor_amount) || 0,
+        })),
+        withdrawal: {
+            approvedCount: numberValue(withdrawal.approvedCount ?? withdrawal.approved_count) || 0,
+            approvedUsdMinor: numberValue(withdrawal.approvedUsdMinor ?? withdrawal.approved_usd_minor) || 0,
+            totalUsdMinor: numberValue(withdrawal.totalUsdMinor ?? withdrawal.total_usd_minor) || 0,
+            transferCount: numberValue(withdrawal.transferCount ?? withdrawal.transfer_count) || 0,
+            transferUsdMinor: numberValue(withdrawal.transferUsdMinor ?? withdrawal.transfer_usd_minor) || 0,
+        },
+    };
+}
+
+// mergeRechargeOverviews 把多 App 概览合并成全局口径：daily 按日期求和，googlePaid 求和；
+// 区域 ID 属于单 App 语义，跨 App 合并时丢弃区域分布。
+export function mergeRechargeOverviews(overviews = []) {
+    const dailyByDate = new Map();
+    const merged = normalizeRechargeOverview({});
+    for (const overview of overviews) {
+        for (const bucket of overview.daily) {
+            const existing = dailyByDate.get(bucket.date);
+            if (!existing) {
+                dailyByDate.set(bucket.date, { ...bucket });
+                continue;
+            }
+            for (const key of [
+                "coinSellerCoinAmount",
+                "coinSellerUsdMinor",
+                "googleCoinAmount",
+                "googleUsdMinor",
+                "thirdPartyCoinAmount",
+                "thirdPartyUsdMinor",
+            ]) {
+                existing[key] += bucket[key];
+            }
+        }
+        for (const key of Object.keys(merged.googlePaid)) {
+            merged.googlePaid[key] += overview.googlePaid[key];
+        }
+        for (const key of Object.keys(merged.withdrawal)) {
+            merged.withdrawal[key] += overview.withdrawal[key];
+        }
+    }
+    merged.daily = [...dailyByDate.values()].sort((left, right) => left.date.localeCompare(right.date));
+    return merged;
+}
+
+export function normalizeRechargeRegions(data = {}) {
+    const items = Array.isArray(data.items) ? data.items : Array.isArray(data) ? data : [];
+    return items
+        .map((item) => {
+            const regionId = numberOrNull(item.regionId ?? item.region_id);
+            if (!regionId) {
+                return null;
+            }
+            return {
+                name: stringValue(item.name),
+                regionCode: stringValue(item.regionCode ?? item.region_code),
+                regionId,
+            };
+        })
+        .filter(Boolean);
+}
+
 export function operationLabel(value, operations = FINANCE_OPERATIONS) {
     return operations.find((item) => item.value === value)?.label || value || "-";
 }
@@ -196,12 +362,54 @@ export function rechargeTypeLabel(value) {
     if (value === "coin_seller_transfer") {
         return "币商充值";
     }
+    if (value === "coin_seller_stock_purchase") {
+        return "币商进货";
+    }
+    if (value === "coin_seller_stock_deduction") {
+        return "币商冲回";
+    }
     if (value === "google_play_recharge") {
         return "谷歌充值";
     }
+    if (value === "mifapay") {
+        return "三方充值 · MiFaPay";
+    }
+    if (value === "v5pay") {
+        return "三方充值 · V5Pay";
+    }
+    if (value === "usdt_trc20") {
+        return "三方充值 · USDT";
+    }
+    if (value === "apple_recharge") {
+        return "苹果充值";
+    }
+    if (value === "huawei_recharge") {
+        return "华为充值";
+    }
+    if (value === "telegram_recharge") {
+        return "Telegram 充值";
+    }
+    if (value === "web_recharge") {
+        return "三方充值 · Web";
+    }
     return value || "-";
 }
 
+// rechargeSourceTone 决定来源徽章与 KPI 卡片的配色分组：google/thirdparty/coinseller。
+export function rechargeSourceTone(rechargeType) {
+    if (rechargeType === "google_play_recharge") {
+        return "google";
+    }
+    if (
+        rechargeType === "coin_seller_stock_purchase" ||
+        rechargeType === "coin_seller_stock_deduction" ||
+        rechargeType === "coin_seller_transfer"
+    ) {
+        return "coinseller";
+    }
+    return "thirdparty";
+}
+
 export function statusLabel(value) {
     return APPLICATION_STATUS.find(([status]) => status === value)?.[1] || value || "-";
 }

src/app/navigation/menu.js

@@ -162,6 +162,7 @@ export const fallbackNavigation = [
             routeNavItem("app-config-popups", { icon: ImageOutlined }),
             routeNavItem("app-config-explore", { icon: MapOutlined }),
             routeNavItem("app-config-versions", { icon: SettingsApplicationsOutlined }),
+            routeNavItem("operation-full-server-notice", { icon: CampaignOutlined }),
         ],
     },
     {
@@ -190,7 +191,6 @@ export const fallbackNavigation = [
             routeNavItem("lucky-gift", { icon: RedeemOutlined }),
             routeNavItem("operation-reports", { icon: FlagOutlined }),
             routeNavItem("operation-gift-diamond", { icon: DiamondOutlined }),
-            routeNavItem("operation-full-server-notice", { icon: CampaignOutlined }),
         ],
     },
     {
@@ -268,15 +268,16 @@ export const fallbackNavigation = [
     },
 ];
 
-export function mapBackendMenus(menus = []) {
-    return orderTopLevelMenus(relocateBackendMenus(menus))
+export function mapBackendMenus(menus = [], options = { relocate: true }) {
+    const sourceMenus = options.relocate ? orderTopLevelMenus(relocateBackendMenus(menus)) : menus;
+    return sourceMenus
         .map((item) => {
             if (deprecatedMenuCodes.has(item.code)) {
                 return null;
             }
 
             const route = item.code ? getRouteByMenuCode(item.code) : undefined;
-            const children = item.children?.length ? mapBackendMenus(item.children) : undefined;
+            const children = item.children?.length ? mapBackendMenus(item.children, { relocate: false }) : undefined;
 
             return {
                 children: children?.length ? children : undefined,
@@ -292,7 +293,49 @@ export function mapBackendMenus(menus = []) {
 }
 
 function relocateBackendMenus(menus = []) {
-    return relocateLogMenusToSystem(menus);
+    return relocateFullServerNoticeToAppConfig(relocateLogMenusToSystem(menus));
+}
+
+function relocateFullServerNoticeToAppConfig(menus = []) {
+    let movedItem = null;
+
+    function strip(items = []) {
+        return items
+            .map((item) => {
+                if (item.code === "operation-full-server-notice") {
+                    if (!movedItem) {
+                        movedItem = item;
+                    }
+                    return null;
+                }
+                const children = item.children?.length ? strip(item.children) : item.children;
+                return children === item.children ? item : { ...item, children };
+            })
+            .filter(Boolean);
+    }
+
+    const strippedMenus = strip(menus);
+    if (!movedItem) {
+        return strippedMenus;
+    }
+
+    return strippedMenus.map((item) =>
+        item.code === "app-config"
+            ? {
+                  ...item,
+                  children: [
+                      ...(item.children || []),
+                      {
+                          ...movedItem,
+                          icon: movedItem.icon || "campaign",
+                          label: "系统消息推送",
+                          path: "/app-config/system-message-push",
+                          permissionCode: movedItem.permissionCode || "full-server-notice:view",
+                      },
+                  ],
+              }
+            : item,
+    );
 }
 
 function orderTopLevelMenus(menus = []) {

src/app/navigation/menu.test.jsx

@@ -162,7 +162,10 @@ describe("navigation menu helpers", () => {
                 label: "APP配置",
             },
         ];
-        const fallbackMenus = filterNavigationByPermission(fallbackNavigation, (code) => code === "app-config:view");
+        const fallbackMenus = filterNavigationByPermission(
+            fallbackNavigation,
+            (code) => code === "app-config:view" || code === "full-server-notice:view",
+        );
         const merged = mergeNavigationItems(mapBackendMenus(backendMenus), fallbackMenus);
         const appConfig = merged.find((item) => item.code === "app-config");
 
@@ -173,9 +176,46 @@ describe("navigation menu helpers", () => {
             "app-config-popups",
             "app-config-explore",
             "app-config-versions",
+            "operation-full-server-notice",
         ]);
     });
 
+    test("moves stale full server notice backend menu under app config", () => {
+        const mapped = mapBackendMenus([
+            {
+                children: [{ code: "app-config-h5", id: "app-config-h5", label: "H5配置", path: "/app-config/h5" }],
+                code: "app-config",
+                icon: "settings",
+                id: "app-config",
+                label: "APP配置",
+            },
+            {
+                children: [
+                    {
+                        code: "operation-full-server-notice",
+                        icon: "campaign",
+                        id: "operation-full-server-notice",
+                        label: "全服通知",
+                        path: "/operations/full-server-notices",
+                        permissionCode: "full-server-notice:view",
+                    },
+                ],
+                code: "operations",
+                icon: "receipt",
+                id: "operations",
+                label: "运营管理",
+            },
+        ]);
+        const appConfig = mapped.find((item) => item.code === "app-config");
+        const operations = mapped.find((item) => item.code === "operations");
+
+        expect(appConfig.children.map((item) => item.code)).toEqual(["app-config-h5", "operation-full-server-notice"]);
+        expect(appConfig.children.find((item) => item.code === "operation-full-server-notice").path).toBe(
+            "/app-config/system-message-push",
+        );
+        expect((operations.children || []).map((item) => item.code)).not.toContain("operation-full-server-notice");
+    });
+
     test("adds team settings under system menu when backend menu is stale", () => {
         const backendMenus = [
             {

src/app/permissions.ts

@@ -132,6 +132,7 @@ export const PERMISSIONS = {
     resourceView: "resource:view",
     resourceCreate: "resource:create",
     resourceUpdate: "resource:update",
+    resourceDelete: "resource:delete",
     resourceShopView: "resource-shop:view",
     resourceShopUpdate: "resource-shop:update",
     resourceGroupView: "resource-group:view",

src/features/achievements/hooks/useAchievementsPage.js

@@ -20,6 +20,7 @@ const emptyForm = (achievement = {}) => ({
     achievementType: achievement.achievementType || "ordinary",
     description: achievement.description || "",
     primaryBadgeResourceId: optionalId(achievement.primaryBadgeResourceId),
+    sortOrder: String(achievement.sortOrder || 0),
     title: achievement.title || "",
 });
 
@@ -196,7 +197,7 @@ function buildAchievementPayload(form) {
         honor_visibility: true,
         primary_badge_resource_id: Number(form.primaryBadgeResourceId || 0),
         reward_resource_group_id: 0,
-        sort_order: 0,
+        sort_order: Number(form.sortOrder || 0),
         status: "active",
         title: String(form.title || "").trim(),
     };

src/features/achievements/pages/AchievementConfigPage.jsx

@@ -46,6 +46,12 @@ const baseColumns = [
             <span className={styles.typeBadge}>{achievementTypeLabel(achievement.achievementType)}</span>
         ),
     },
+    {
+        key: "sortOrder",
+        label: "排序",
+        width: "96px",
+        render: (achievement) => <span className={styles.meta}>{achievement.sortOrder || 0}</span>,
+    },
     {
         key: "description",
         label: "成就描述",
@@ -201,6 +207,13 @@ function AchievementFormDialog({ disabled, form, loading, mode, onClose, onSubmi
                         value={form.title}
                         onChange={changeField(page.setForm, "title")}
                     />
+                    <TextField
+                        disabled={disabled}
+                        label="排序"
+                        type="number"
+                        value={form.sortOrder}
+                        onChange={changeField(page.setForm, "sortOrder")}
+                    />
                     <TextField
                         disabled={disabled}
                         label="描述"

src/features/achievements/schema.ts

@@ -9,6 +9,7 @@ export const achievementFormSchema = z
         achievementType: achievementTypeSchema,
         description: z.string().trim().max(240, "描述不能超过 240 个字符").optional(),
         primaryBadgeResourceId: optionalNumberInput,
+        sortOrder: z.coerce.number().int("排序必须是整数").min(0, "排序不能小于 0").default(0),
         title: z.string().trim().min(1, "请输入成就名称").max(64, "成就名称不能超过 64 个字符"),
     })
     .superRefine((value, context) => {

src/features/app-config/api.test.ts

@@ -0,0 +1,91 @@
+import { afterEach, expect, test, vi } from "vitest";
+import { setAccessToken } from "@/shared/api/request";
+import { createSystemMessagePushFanout } from "./api";
+
+afterEach(() => {
+    setAccessToken("");
+    vi.unstubAllGlobals();
+});
+
+test("system message push fanout API keeps existing operations path", async () => {
+    vi.stubGlobal(
+        "fetch",
+        vi.fn(
+            async () =>
+                new Response(
+                    JSON.stringify({
+                        code: 0,
+                        data: {
+                            command_id: "admin_notice_test",
+                            created: true,
+                            job_id: "mfan_test",
+                            message_type: "system",
+                            status: "pending",
+                            target_scope: "all_registered_users",
+                        },
+                    }),
+                ),
+        ),
+    );
+
+    await createSystemMessagePushFanout({
+        action_param: "https://example.com",
+        action_type: "app_h5",
+        batch_size: 500,
+        message_type: "system",
+        producer_event_type: "admin_full_server_notice",
+        summary: "今晚 23:00 维护",
+        target_scope: "all_registered_users",
+        title: "维护通知",
+    });
+
+    const [url, init] = vi.mocked(fetch).mock.calls[0];
+
+    expect(String(url)).toContain("/api/v1/admin/operations/full-server-notices/fanout");
+    expect(init?.method).toBe("POST");
+    expect(JSON.parse(String(init?.body))).toMatchObject({
+        action_param: "https://example.com",
+        action_type: "app_h5",
+        message_type: "system",
+        producer_event_type: "admin_full_server_notice",
+        target_scope: "all_registered_users",
+        title: "维护通知",
+    });
+});
+
+test("system message push fanout API preserves string user IDs", async () => {
+    vi.stubGlobal(
+        "fetch",
+        vi.fn(
+            async () =>
+                new Response(
+                    JSON.stringify({
+                        code: 0,
+                        data: {
+                            command_id: "admin_notice_users",
+                            created: true,
+                            job_id: "mfan_users",
+                            message_type: "system",
+                            status: "pending",
+                            target_scope: "user_ids",
+                        },
+                    }),
+                ),
+        ),
+    );
+
+    await createSystemMessagePushFanout({
+        message_type: "system",
+        summary: "指定用户维护",
+        target_scope: "user_ids",
+        title: "维护通知",
+        user_ids: ["325379237278126080", "42"],
+    });
+
+    const [, init] = vi.mocked(fetch).mock.calls[0];
+
+    expect(JSON.parse(String(init?.body))).toMatchObject({
+        target_scope: "user_ids",
+        user_ids: ["325379237278126080", "42"],
+    });
+});

src/features/app-config/api.ts

@@ -19,6 +19,40 @@ import type {
     PageQuery,
 } from "@/shared/api/types";
 
+export interface SystemMessagePushPayload {
+    action_param?: string;
+    action_type?: string;
+    aggregate_type?: string;
+    batch_size?: number;
+    body?: string;
+    message_type: "system";
+    producer_event_type?: string;
+    summary: string;
+    target_scope: "all_registered_users" | "user_ids";
+    title: string;
+    user_ids?: string[];
+}
+
+export interface SystemMessagePushResponse {
+    command_id: string;
+    created: boolean;
+    job_id: string;
+    message_type: string;
+    status: string;
+    target_scope: string;
+}
+
+export function createSystemMessagePushFanout(payload: SystemMessagePushPayload): Promise<SystemMessagePushResponse> {
+    const endpoint = API_ENDPOINTS.createFullServerNoticeFanout;
+    return apiRequest<SystemMessagePushResponse, SystemMessagePushPayload>(
+        apiEndpointPath(API_OPERATIONS.createFullServerNoticeFanout),
+        {
+            body: payload,
+            method: endpoint.method,
+        },
+    );
+}
+
 export function listH5Links(): Promise<ApiList<H5LinkConfigDto>> {
     const endpoint = API_ENDPOINTS.listH5Links;
     return apiRequest<ApiList<H5LinkConfigDto>>(apiEndpointPath(API_OPERATIONS.listH5Links), {

src/features/app-config/app-config.module.css

@@ -1,176 +1,273 @@
 .linkText {
-  overflow: hidden;
-  max-width: 100%;
-  color: var(--text-secondary);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    overflow: hidden;
+    max-width: 100%;
+    color: var(--text-secondary);
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 .bannerCover,
 .bannerCoverEmpty {
-  display: inline-flex;
-  width: 88px;
-  height: 50px;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--bg-card-strong);
-  color: var(--text-tertiary);
+    display: inline-flex;
+    width: 88px;
+    height: 50px;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg-card-strong);
+    color: var(--text-tertiary);
 }
 
 .bannerCover {
-  object-fit: cover;
+    object-fit: cover;
 }
 
 .popupCover,
 .popupCoverEmpty {
-  display: inline-flex;
-  width: 72px;
-  height: 72px;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--bg-card-strong);
-  color: var(--text-tertiary);
+    display: inline-flex;
+    width: 72px;
+    height: 72px;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg-card-strong);
+    color: var(--text-tertiary);
 }
 
 .popupCover {
-  object-fit: cover;
+    object-fit: cover;
 }
 
 .splashCover,
 .splashCoverEmpty {
-  display: inline-flex;
-  width: 54px;
-  height: 96px;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  border: 1px solid var(--border);
-  border-radius: var(--radius-sm);
-  background: var(--bg-card-strong);
-  color: var(--text-tertiary);
+    display: inline-flex;
+    width: 54px;
+    height: 96px;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg-card-strong);
+    color: var(--text-tertiary);
 }
 
 .splashCover {
-  object-fit: cover;
+    object-fit: cover;
 }
 
 .formWideField {
-  grid-column: 1 / -1;
+    grid-column: 1 / -1;
+}
+
+.noticeBody {
+    display: grid;
+    min-height: 0;
+    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
+    gap: var(--space-5);
+    padding: var(--space-5);
+    background: var(--bg-card);
+}
+
+.noticePanel {
+    display: grid;
+    min-width: 0;
+    gap: var(--space-5);
+}
+
+.noticeHeader {
+    display: flex;
+    min-width: 0;
+    align-items: center;
+    gap: var(--space-2);
+    color: var(--text-primary);
+}
+
+.noticeHeader h2,
+.noticePreview h3 {
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+    font-size: 16px;
+    font-weight: 800;
+    line-height: 1.4;
+}
+
+.noticeGrid,
+.noticeContentGrid {
+    display: grid;
+    min-width: 0;
+    grid-template-columns: repeat(2, minmax(220px, 1fr));
+    gap: var(--space-4);
+}
+
+.noticeContentGrid {
+    grid-template-columns: repeat(2, minmax(260px, 1fr));
+}
+
+.noticeWideField {
+    grid-column: 1 / -1;
+}
+
+.noticePreview {
+    display: grid;
+    align-content: start;
+    min-width: 0;
+    gap: var(--space-4);
+    padding: var(--space-4);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-card);
+    background: var(--bg-card-strong);
+}
+
+.noticePreview p {
+    min-width: 0;
+    margin: 0;
+    overflow-wrap: anywhere;
+    color: var(--text-secondary);
+    line-height: 1.6;
+}
+
+.noticePreviewMeta {
+    display: flex;
+    min-width: 0;
+    flex-wrap: wrap;
+    gap: var(--space-2);
+}
+
+.noticePreviewMeta span {
+    display: inline-flex;
+    max-width: 100%;
+    min-height: 28px;
+    align-items: center;
+    padding: 0 var(--space-3);
+    border: 1px solid var(--border-soft);
+    border-radius: var(--radius-control);
+    color: var(--text-secondary);
+    font-size: 12px;
+    font-weight: 700;
+    overflow-wrap: anywhere;
 }
 
 .splashFormLayout {
-  display: grid;
-  width: 100%;
-  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
-  align-items: start;
-  gap: var(--space-5);
+    display: grid;
+    width: 100%;
+    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
+    align-items: start;
+    gap: var(--space-5);
 }
 
 .splashAssetPane,
 .splashFieldPane {
-  display: grid;
-  min-width: 0;
-  gap: var(--space-4);
+    display: grid;
+    min-width: 0;
+    gap: var(--space-4);
 }
 
 .splashAssetPane {
-  padding-right: var(--space-1);
+    padding-right: var(--space-1);
 }
 
 .splashFieldPane {
-  padding-left: var(--space-1);
+    padding-left: var(--space-1);
 }
 
 .splashUploadField {
-  width: min(100%, 260px);
-  justify-self: center;
+    width: min(100%, 260px);
+    justify-self: center;
 }
 
 .splashUploadField .splashUploadPreview {
-  height: auto;
-  aspect-ratio: 9 / 16;
-  max-height: min(52vh, 420px);
+    height: auto;
+    aspect-ratio: 9 / 16;
+    max-height: min(52vh, 420px);
 }
 
 .splashStatusField {
-  align-self: center;
+    align-self: center;
 }
 
 .popupFormLayout {
-  display: grid;
-  width: 100%;
-  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
-  align-items: start;
-  gap: var(--space-5);
+    display: grid;
+    width: 100%;
+    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
+    align-items: start;
+    gap: var(--space-5);
 }
 
 .popupAssetPane,
 .popupFieldPane {
-  display: grid;
-  min-width: 0;
-  gap: var(--space-4);
+    display: grid;
+    min-width: 0;
+    gap: var(--space-4);
 }
 
 .popupAssetPane {
-  padding-right: var(--space-1);
+    padding-right: var(--space-1);
 }
 
 .popupFieldPane {
-  padding-left: var(--space-1);
+    padding-left: var(--space-1);
 }
 
 .popupUploadField {
-  width: min(100%, 280px);
-  justify-self: center;
+    width: min(100%, 280px);
+    justify-self: center;
 }
 
 .popupUploadField .popupUploadPreview {
-  aspect-ratio: 1 / 1;
-  height: auto;
-  max-height: min(42vh, 300px);
+    aspect-ratio: 1 / 1;
+    height: auto;
+    max-height: min(42vh, 300px);
 }
 
 .statusCell {
-  display: inline-flex;
-  align-items: center;
+    display: inline-flex;
+    align-items: center;
 }
 
 @media (max-width: 760px) {
-  .splashFormLayout {
-    grid-template-columns: 1fr;
-    gap: var(--space-4);
-  }
+    .splashFormLayout {
+        grid-template-columns: 1fr;
+        gap: var(--space-4);
+    }
 
-  .splashAssetPane,
-  .splashFieldPane {
-    padding-right: 0;
-    padding-left: 0;
-  }
+    .splashAssetPane,
+    .splashFieldPane {
+        padding-right: 0;
+        padding-left: 0;
+    }
 
-  .splashUploadField {
-    justify-self: stretch;
-    width: min(100%, 260px);
-  }
+    .splashUploadField {
+        justify-self: stretch;
+        width: min(100%, 260px);
+    }
 
-  .popupFormLayout {
-    grid-template-columns: 1fr;
-    gap: var(--space-4);
-  }
+    .popupFormLayout {
+        grid-template-columns: 1fr;
+        gap: var(--space-4);
+    }
 
-  .popupAssetPane,
-  .popupFieldPane {
-    padding-right: 0;
-    padding-left: 0;
-  }
+    .popupAssetPane,
+    .popupFieldPane {
+        padding-right: 0;
+        padding-left: 0;
+    }
 
-  .popupUploadField {
-    justify-self: stretch;
-    width: min(100%, 280px);
-  }
+    .popupUploadField {
+        justify-self: stretch;
+        width: min(100%, 280px);
+    }
+}
+
+@media (max-width: 720px) {
+    .noticeBody,
+    .noticeGrid,
+    .noticeContentGrid {
+        grid-template-columns: minmax(0, 1fr);
+    }
 }

src/features/app-config/pages/SystemMessagePushPage.jsx

@@ -0,0 +1,220 @@
+import CampaignOutlined from "@mui/icons-material/CampaignOutlined";
+import SendOutlined from "@mui/icons-material/SendOutlined";
+import Alert from "@mui/material/Alert";
+import MenuItem from "@mui/material/MenuItem";
+import TextField from "@mui/material/TextField";
+import { useMemo, useState } from "react";
+import { createSystemMessagePushFanout } from "@/features/app-config/api";
+import { useSystemMessagePushAbilities } from "@/features/app-config/permissions.js";
+import { parseSystemMessagePushUserIds, systemMessagePushSchema } from "@/features/app-config/schema";
+import styles from "@/features/app-config/app-config.module.css";
+import { FormValidationError, parseForm } from "@/shared/forms/validation";
+import { AdminListPage, AdminListToolbar } from "@/shared/ui/AdminListLayout.jsx";
+import { Button } from "@/shared/ui/Button.jsx";
+import { useConfirm } from "@/shared/ui/ConfirmProvider.jsx";
+import { useToast } from "@/shared/ui/ToastProvider.jsx";
+
+const targetScopes = [
+    { label: "所有注册用户", value: "all_registered_users" },
+    { label: "指定用户", value: "user_ids" },
+];
+
+const actionTypes = [
+    { label: "无跳转", value: "" },
+    { label: "活动详情", value: "activity_detail" },
+    { label: "H5 页面", value: "app_h5" },
+    { label: "房间详情", value: "room_detail" },
+    { label: "用户主页", value: "user_profile" },
+    { label: "提现详情", value: "wallet_withdraw_detail" },
+    { label: "主播申请", value: "host_application_detail" },
+    { label: "币商转账", value: "coin_seller_transfer_detail" },
+];
+
+const initialForm = {
+    actionParam: "",
+    actionType: "",
+    body: "",
+    summary: "",
+    targetScope: "all_registered_users",
+    title: "",
+    userIdsText: "",
+};
+
+export function SystemMessagePushPage() {
+    const abilities = useSystemMessagePushAbilities();
+    const confirm = useConfirm();
+    const { showToast } = useToast();
+    const [form, setForm] = useState(initialForm);
+    const [result, setResult] = useState(null);
+    const [saving, setSaving] = useState(false);
+
+    const targetLabel = useMemo(
+        () => targetScopes.find((item) => item.value === form.targetScope)?.label || form.targetScope,
+        [form.targetScope],
+    );
+
+    const updateField = (field) => (event) => {
+        setForm((current) => ({ ...current, [field]: event.target.value }));
+    };
+
+    const submit = async () => {
+        let parsed;
+        try {
+            parsed = parseForm(systemMessagePushSchema, form);
+        } catch (error) {
+            if (error instanceof FormValidationError) {
+                showToast(error.message, "error");
+                return;
+            }
+            throw error;
+        }
+
+        const userIds = parsed.targetScope === "user_ids" ? parseSystemMessagePushUserIds(parsed.userIdsText) : [];
+        const targetText =
+            parsed.targetScope === "all_registered_users" ? "所有注册用户" : `${userIds.length} 个指定用户`;
+        const accepted = await confirm({
+            confirmText: "发送",
+            message: `将向${targetText}发送「${parsed.title}」。`,
+            title: "发送系统消息",
+        });
+        if (!accepted) {
+            return;
+        }
+
+        setSaving(true);
+        try {
+            const next = await createSystemMessagePushFanout(buildPayload(parsed, userIds));
+            setResult(next);
+            showToast(next.created ? "系统消息推送任务已创建" : "已返回现有系统消息推送任务", "success");
+        } catch (error) {
+            showToast(error.message || "创建系统消息推送失败", "error");
+        } finally {
+            setSaving(false);
+        }
+    };
+
+    return (
+        <AdminListPage>
+            <AdminListToolbar
+                actions={
+                    abilities.canSend ? (
+                        <Button disabled={saving} startIcon={<SendOutlined />} variant="primary" onClick={submit}>
+                            发送
+                        </Button>
+                    ) : null
+                }
+                filters={null}
+            />
+            <div className={styles.noticeBody}>
+                <section className={styles.noticePanel}>
+                    <div className={styles.noticeHeader}>
+                        <CampaignOutlined fontSize="small" />
+                        <h2>系统消息推送</h2>
+                    </div>
+                    <div className={styles.noticeGrid}>
+                        <TextField label="消息类型" size="small" value="系统消息" disabled />
+                        <TextField
+                            select
+                            label="发送范围"
+                            size="small"
+                            value={form.targetScope}
+                            onChange={updateField("targetScope")}
+                        >
+                            {targetScopes.map((item) => (
+                                <MenuItem key={item.value} value={item.value}>
+                                    {item.label}
+                                </MenuItem>
+                            ))}
+                        </TextField>
+                        {form.targetScope === "user_ids" ? (
+                            <TextField
+                                className={styles.noticeWideField}
+                                label="用户 ID 列表"
+                                minRows={3}
+                                multiline
+                                placeholder="1001,1002"
+                                value={form.userIdsText}
+                                onChange={updateField("userIdsText")}
+                            />
+                        ) : null}
+                    </div>
+                    <div className={styles.noticeContentGrid}>
+                        <TextField
+                            required
+                            label="标题"
+                            size="small"
+                            value={form.title}
+                            onChange={updateField("title")}
+                        />
+                        <TextField
+                            required
+                            label="摘要"
+                            size="small"
+                            value={form.summary}
+                            onChange={updateField("summary")}
+                        />
+                        <TextField
+                            className={styles.noticeWideField}
+                            label="正文"
+                            minRows={4}
+                            multiline
+                            value={form.body}
+                            onChange={updateField("body")}
+                        />
+                    </div>
+                    <div className={styles.noticeGrid}>
+                        <TextField
+                            select
+                            label="跳转类型"
+                            size="small"
+                            value={form.actionType}
+                            onChange={updateField("actionType")}
+                        >
+                            {actionTypes.map((item) => (
+                                <MenuItem key={item.value || "none"} value={item.value}>
+                                    {item.label}
+                                </MenuItem>
+                            ))}
+                        </TextField>
+                        <TextField
+                            label="跳转参数"
+                            size="small"
+                            value={form.actionParam}
+                            onChange={updateField("actionParam")}
+                        />
+                    </div>
+                </section>
+                <section className={styles.noticePreview}>
+                    <h3>{form.title || "标题"}</h3>
+                    <p>{form.summary || "摘要"}</p>
+                    <div className={styles.noticePreviewMeta}>
+                        <span>系统消息</span>
+                        <span>{targetLabel}</span>
+                        <span>{form.actionType || "无跳转"}</span>
+                    </div>
+                    {result ? (
+                        <Alert severity={result.created ? "success" : "info"}>
+                            {result.status} · {result.job_id} · {result.command_id}
+                        </Alert>
+                    ) : null}
+                </section>
+            </div>
+        </AdminListPage>
+    );
+}
+
+function buildPayload(form, userIds) {
+    return {
+        action_param: form.actionParam || undefined,
+        action_type: form.actionType || undefined,
+        aggregate_type: "admin_notice",
+        batch_size: 500,
+        body: form.body || undefined,
+        message_type: "system",
+        producer_event_type: "admin_full_server_notice",
+        summary: form.summary,
+        target_scope: form.targetScope,
+        title: form.title,
+        user_ids: form.targetScope === "user_ids" ? userIds : undefined,
+    };
+}

src/features/app-config/pages/SystemMessagePushPage.test.jsx

@@ -0,0 +1,120 @@
+import { render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { afterEach, expect, test, vi } from "vitest";
+import { AppProviders } from "@/app/providers.jsx";
+import { SystemMessagePushPage } from "./SystemMessagePushPage.jsx";
+
+vi.mock("@/app/auth/AuthProvider.jsx", () => ({
+    AuthProvider: ({ children }) => children,
+    useAuth: () => ({ can: () => true }),
+}));
+
+afterEach(() => {
+    vi.unstubAllGlobals();
+});
+
+test("submits all registered users payload with fixed system message type", async () => {
+    const user = userEvent.setup();
+    vi.stubGlobal("fetch", createFanoutFetch({ target_scope: "all_registered_users" }));
+
+    renderPage();
+    await user.type(screen.getByRole("textbox", { name: "标题" }), "维护通知");
+    await user.type(screen.getByRole("textbox", { name: "摘要" }), "今晚 23:00 维护");
+    await user.click(screen.getByRole("button", { name: "发送" }));
+    await confirmSend(user);
+
+    await waitFor(() =>
+        expect(fanoutPostBodies()).toEqual([
+            expect.objectContaining({
+                message_type: "system",
+                producer_event_type: "admin_full_server_notice",
+                target_scope: "all_registered_users",
+                title: "维护通知",
+            }),
+        ]),
+    );
+});
+
+test("submits specified users after parsing and deduping separators", async () => {
+    const user = userEvent.setup();
+    vi.stubGlobal("fetch", createFanoutFetch({ target_scope: "user_ids" }));
+
+    renderPage();
+    await user.click(screen.getByRole("combobox", { name: "发送范围" }));
+    await user.click(screen.getByRole("option", { name: "指定用户" }));
+    await user.type(screen.getByRole("textbox", { name: "用户 ID 列表" }), "325379237278126080, 42，42");
+    await user.type(screen.getByRole("textbox", { name: "标题" }), "指定用户通知");
+    await user.type(screen.getByRole("textbox", { name: "摘要" }), "只发给指定用户");
+    await user.click(screen.getByRole("button", { name: "发送" }));
+    await confirmSend(user);
+
+    await waitFor(() =>
+        expect(fanoutPostBodies()).toEqual([
+            expect.objectContaining({
+                message_type: "system",
+                target_scope: "user_ids",
+                user_ids: ["325379237278126080", "42"],
+            }),
+        ]),
+    );
+});
+
+test("blocks specified users submit when user ID list is empty", async () => {
+    const user = userEvent.setup();
+    vi.stubGlobal("fetch", createFanoutFetch({ target_scope: "user_ids" }));
+
+    renderPage();
+    await user.click(screen.getByRole("combobox", { name: "发送范围" }));
+    await user.click(screen.getByRole("option", { name: "指定用户" }));
+    await user.type(screen.getByRole("textbox", { name: "标题" }), "指定用户通知");
+    await user.type(screen.getByRole("textbox", { name: "摘要" }), "只发给指定用户");
+    await user.click(screen.getByRole("button", { name: "发送" }));
+
+    await waitFor(() => expect(screen.getByText("用户 ID 列表不能为空")).toBeInTheDocument());
+    expect(fanoutPostBodies()).toHaveLength(0);
+});
+
+function renderPage() {
+    return render(
+        <AppProviders>
+            <MemoryRouter>
+                <SystemMessagePushPage />
+            </MemoryRouter>
+        </AppProviders>,
+    );
+}
+
+async function confirmSend(user) {
+    const dialog = await screen.findByRole("dialog", { name: "发送系统消息" });
+    await user.click(within(dialog).getByRole("button", { name: "发送" }));
+}
+
+function fanoutPostBodies() {
+    return vi
+        .mocked(fetch)
+        .mock.calls.filter(
+            ([url, init]) =>
+                String(url).includes("/api/v1/admin/operations/full-server-notices/fanout") && init?.method === "POST",
+        )
+        .map(([, init]) => JSON.parse(String(init?.body)));
+}
+
+function createFanoutFetch({ target_scope }) {
+    return vi.fn(
+        async () =>
+            new Response(
+                JSON.stringify({
+                    code: 0,
+                    data: {
+                        command_id: "admin_notice_test",
+                        created: true,
+                        job_id: "mfan_test",
+                        message_type: "system",
+                        status: "pending",
+                        target_scope,
+                    },
+                }),
+            ),
+    );
+}

src/features/app-config/permissions.js

@@ -2,15 +2,24 @@ import { useAuth } from "@/app/auth/AuthProvider.jsx";
 import { PERMISSIONS } from "@/app/permissions";
 
 export function useAppConfigAbilities() {
-  const { can } = useAuth();
+    const { can } = useAuth();
 
-  return {
-    canCreateVersion: can(PERMISSIONS.appVersionCreate),
-    canDeleteVersion: can(PERMISSIONS.appVersionDelete),
-    canUpdate: can(PERMISSIONS.appConfigUpdate),
-    canUpdateVersion: can(PERMISSIONS.appVersionUpdate),
-    canUpload: can(PERMISSIONS.uploadCreate),
-    canView: can(PERMISSIONS.appConfigView),
-    canViewVersion: can(PERMISSIONS.appVersionView)
-  };
+    return {
+        canCreateVersion: can(PERMISSIONS.appVersionCreate),
+        canDeleteVersion: can(PERMISSIONS.appVersionDelete),
+        canUpdate: can(PERMISSIONS.appConfigUpdate),
+        canUpdateVersion: can(PERMISSIONS.appVersionUpdate),
+        canUpload: can(PERMISSIONS.uploadCreate),
+        canView: can(PERMISSIONS.appConfigView),
+        canViewVersion: can(PERMISSIONS.appVersionView),
+    };
+}
+
+export function useSystemMessagePushAbilities() {
+    const { can } = useAuth();
+
+    return {
+        canSend: can(PERMISSIONS.fullServerNoticeSend),
+        canView: can(PERMISSIONS.fullServerNoticeView),
+    };
 }

src/features/app-config/routes.js

@@ -49,4 +49,12 @@ export const appConfigRoutes = [
         path: "/app-config/versions",
         permission: PERMISSIONS.appVersionView,
     },
+    {
+        label: "系统消息推送",
+        loader: () => import("./pages/SystemMessagePushPage.jsx").then((module) => module.SystemMessagePushPage),
+        menuCode: MENU_CODES.operationFullServerNotice,
+        pageKey: "app-config-system-message-push",
+        path: "/app-config/system-message-push",
+        permission: PERMISSIONS.fullServerNoticeView,
+    },
 ];

src/features/app-config/schema.test.ts

@@ -5,6 +5,8 @@ import {
     appSplashScreenSchema,
     exploreTabSchema,
     h5LinkUpdateSchema,
+    parseSystemMessagePushUserIds,
+    systemMessagePushSchema,
 } from "@/features/app-config/schema";
 import { FormValidationError, parseForm } from "@/shared/forms/validation";
 
@@ -75,6 +77,42 @@ describe("app config form schema", () => {
         ).toThrow(FormValidationError);
     });
 
+    test("parses and dedupes system message push user IDs as strings", () => {
+        expect(parseSystemMessagePushUserIds("325379237278126080, 42，42  1001")).toEqual([
+            "325379237278126080",
+            "42",
+            "1001",
+        ]);
+    });
+
+    test("keeps system message push payload constrained to supported scopes", () => {
+        const payload = parseForm(systemMessagePushSchema, {
+            actionParam: "",
+            actionType: "",
+            body: "正文",
+            summary: "摘要",
+            targetScope: "all_registered_users",
+            title: "标题",
+            userIdsText: "",
+        });
+
+        expect(payload.targetScope).toBe("all_registered_users");
+    });
+
+    test("requires system message push user IDs for specified users", () => {
+        expect(() =>
+            parseForm(systemMessagePushSchema, {
+                actionParam: "",
+                actionType: "",
+                body: "",
+                summary: "摘要",
+                targetScope: "user_ids",
+                title: "标题",
+                userIdsText: "",
+            }),
+        ).toThrow(FormValidationError);
+    });
+
     test("keeps banner display scope and delivery time fields", () => {
         const payload = parseForm(appBannerSchema, validBannerForm);
 

src/features/app-config/schema.ts

@@ -2,6 +2,17 @@ import { z } from "zod";
 import { validatePublicAppJumpParam } from "@/shared/app-jump/appJumpConfig.js";
 
 const appBannerDisplayScopes = ["home", "room", "recharge", "me"] as const;
+const systemMessagePushTargetScopes = ["all_registered_users", "user_ids"] as const;
+const systemMessagePushActionTypes = [
+    "",
+    "activity_detail",
+    "app_h5",
+    "room_detail",
+    "user_profile",
+    "wallet_withdraw_detail",
+    "host_application_detail",
+    "coin_seller_transfer_detail",
+] as const;
 
 const requiredH5LinkURLSchema = z
     .string()
@@ -34,6 +45,61 @@ export const exploreTabSchema = z.object({
 
 export type ExploreTabForm = z.infer<typeof exploreTabSchema>;
 
+export function parseSystemMessagePushUserIds(value: string): string[] {
+    const tokens = String(value || "")
+        .split(/[\s,，]+/)
+        .map((item) => item.trim())
+        .filter(Boolean);
+    const invalid = tokens.find((item) => !/^[1-9]\d*$/.test(item));
+    if (invalid) {
+        throw new Error("用户 ID 必须是正整数");
+    }
+    return Array.from(new Set(tokens));
+}
+
+export const systemMessagePushSchema = z
+    .object({
+        actionParam: z.string().trim().max(2048, "跳转参数不能超过 2048 个字符").default(""),
+        actionType: z.enum(systemMessagePushActionTypes).default(""),
+        body: z.string().trim().max(4000, "正文不能超过 4000 个字符").default(""),
+        summary: z.string().trim().min(1, "请填写摘要").max(240, "摘要不能超过 240 个字符"),
+        targetScope: z.enum(systemMessagePushTargetScopes),
+        title: z.string().trim().min(1, "请填写标题").max(80, "标题不能超过 80 个字符"),
+        userIdsText: z.string().trim().default(""),
+    })
+    .superRefine((value, ctx) => {
+        if (value.targetScope === "user_ids") {
+            let userIds: string[];
+            try {
+                userIds = parseSystemMessagePushUserIds(value.userIdsText);
+            } catch (error) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: error instanceof Error ? error.message : "用户 ID 必须是正整数",
+                    path: ["userIdsText"],
+                });
+                return;
+            }
+            if (!userIds.length) {
+                ctx.addIssue({
+                    code: z.ZodIssueCode.custom,
+                    message: "用户 ID 列表不能为空",
+                    path: ["userIdsText"],
+                });
+            }
+        }
+
+        if (value.actionParam && !value.actionType) {
+            ctx.addIssue({
+                code: z.ZodIssueCode.custom,
+                message: "请选择跳转类型",
+                path: ["actionType"],
+            });
+        }
+    });
+
+export type SystemMessagePushForm = z.infer<typeof systemMessagePushSchema>;
+
 export const appBannerSchema = z
     .object({
         bannerType: z.enum(["h5", "app"]),

src/features/host-org/api.test.ts

@@ -62,10 +62,11 @@ test("host org list APIs use generated admin paths and filters", async () => {
         region_id: 7,
         status: "active",
     });
-    await createManager({ canBlockUser: false, canGrantBadge: false, contact: "+63", targetUserId: "1003" });
+    await createManager({ canBlockUser: false, canGrantBadge: false, canGrantVip: true, contact: "+63", targetUserId: "1003" });
     await updateManager("1003", {
         canBlockUser: false,
         canGrantVehicle: true,
+        canGrantVip: false,
         canTransferUserCountry: false,
         contact: "+63",
         status: "disabled",
@@ -147,6 +148,7 @@ test("host org list APIs use generated admin paths and filters", async () => {
     expect(JSON.parse(String(managerCreateInit?.body))).toEqual({
         canBlockUser: false,
         canGrantBadge: false,
+        canGrantVip: true,
         contact: "+63",
         targetUserId: "1003",
     });
@@ -155,6 +157,7 @@ test("host org list APIs use generated admin paths and filters", async () => {
     expect(JSON.parse(String(managerUpdateInit?.body))).toEqual({
         canBlockUser: false,
         canGrantVehicle: true,
+        canGrantVip: false,
         canTransferUserCountry: false,
         contact: "+63",
         status: "disabled",

src/features/host-org/api.ts

@@ -191,9 +191,10 @@ export function createManager(payload: CreateManagerPayload): Promise<ManagerDto
 }
 
 export function updateManager(userId: EntityId, payload: UpdateManagerPayload): Promise<ManagerDto> {
-    return apiRequest<ManagerDto, UpdateManagerPayload>(`/v1/admin/managers/${encodeURIComponent(String(userId))}`, {
+    const endpoint = API_ENDPOINTS.updateManager;
+    return apiRequest<ManagerDto, UpdateManagerPayload>(apiEndpointPath(API_OPERATIONS.updateManager, { user_id: userId }), {
         body: payload,
-        method: "PUT",
+        method: endpoint.method,
     });
 }
 

src/features/host-org/hooks/useHostManagersPage.js

@@ -14,6 +14,7 @@ export const managerPermissionFields = [
     "canGrantAvatarFrame",
     "canGrantVehicle",
     "canGrantBadge",
+    "canGrantVip",
     "canUpdateUserLevel",
     "canAddBdLeader",
     "canAddAdmin",

src/features/host-org/pages/HostManagersPage.jsx

@@ -19,6 +19,7 @@ const managerPermissionOptions = [
     { key: "canGrantAvatarFrame", label: "头像框" },
     { key: "canGrantVehicle", label: "Car" },
     { key: "canGrantBadge", label: "徽章" },
+    { key: "canGrantVip", label: "VIP" },
     { key: "canUpdateUserLevel", label: "升级等级" },
     { key: "canAddBdLeader", label: "BD Leader" },
     { key: "canAddAdmin", label: "Admin" },

src/features/host-org/pages/HostManagersPage.test.jsx

@@ -21,6 +21,8 @@ test("manager status column uses a switch and toggles through the page hook", ()
 
     render(<HostManagersPage />);
 
+    expect(screen.getByText("VIP")).toBeInTheDocument();
+
     const statusSwitch = screen.getByRole("switch", { name: "停用经理" });
     expect(statusSwitch).toBeChecked();
 
@@ -55,6 +57,7 @@ function pageFixture(patch = {}) {
             canGrantAvatarFrame: true,
             canGrantBadge: true,
             canGrantVehicle: true,
+            canGrantVip: true,
             canTransferUserCountry: true,
             canUpdateUserLevel: true,
             contact: "",
@@ -88,6 +91,7 @@ function managerFixture() {
         canGrantAvatarFrame: true,
         canGrantBadge: true,
         canGrantVehicle: true,
+        canGrantVip: true,
         canTransferUserCountry: true,
         canUpdateUserLevel: true,
         contact: "+63 910 323 3670",

src/features/host-org/schema.test.ts

@@ -1,5 +1,5 @@
 import { expect, test } from "vitest";
-import { agencyCloseSchema, agencyJoinEnabledSchema, coinSellerStatusSchema } from "./schema";
+import { agencyCloseSchema, agencyJoinEnabledSchema, coinSellerStatusSchema, createManagerSchema } from "./schema";
 
 test("coin seller contact accepts plus sign with large internal user id", () => {
     const result = coinSellerStatusSchema.safeParse({
@@ -40,3 +40,17 @@ test("agency action schemas preserve large agency ids as strings", () => {
         expect(joinResult.data.agencyId).toBe(agencyId);
     }
 });
+
+test("manager schema defaults vip grant permission on and preserves explicit false", () => {
+    const defaultResult = createManagerSchema.safeParse({ targetUserId: "1003" });
+    const disabledResult = createManagerSchema.safeParse({ canGrantVip: false, targetUserId: "1003" });
+
+    expect(defaultResult.success).toBe(true);
+    expect(disabledResult.success).toBe(true);
+    if (defaultResult.success) {
+        expect(defaultResult.data.canGrantVip).toBe(true);
+    }
+    if (disabledResult.success) {
+        expect(disabledResult.data.canGrantVip).toBe(false);
+    }
+});

src/features/host-org/schema.ts

@@ -116,6 +116,7 @@ export const createManagerSchema = z.object({
     canGrantAvatarFrame: z.boolean().optional().default(true),
     canGrantBadge: z.boolean().optional().default(true),
     canGrantVehicle: z.boolean().optional().default(true),
+    canGrantVip: z.boolean().optional().default(true),
     canTransferUserCountry: z.boolean().optional().default(true),
     canUpdateUserLevel: z.boolean().optional().default(true),
     contact: z.string().trim().max(128, "联系方式不能超过 128 个字符").optional().default(""),

src/features/operations/api.test.ts

@@ -2,7 +2,6 @@ import { afterEach, expect, test, vi } from "vitest";
 import { setAccessToken } from "@/shared/api/request";
 import {
     createCoinAdjustment,
-    createFullServerNoticeFanout,
     exportCoinSellerLedger,
     getGiftDiamondRatios,
     getWheelConfig,
@@ -49,52 +48,6 @@ test("gift diamond ratio APIs use operations paths", async () => {
     });
 });
 
-test("full server notice fanout API uses operations path", async () => {
-    vi.stubGlobal(
-        "fetch",
-        vi.fn(
-            async () =>
-                new Response(
-                    JSON.stringify({
-                        code: 0,
-                        data: {
-                            command_id: "admin_notice_test",
-                            created: true,
-                            job_id: "mfan_test",
-                            message_type: "system",
-                            status: "pending",
-                            target_scope: "all_active_users",
-                        },
-                    }),
-                ),
-        ),
-    );
-
-    await createFullServerNoticeFanout({
-        action_type: "app_h5",
-        action_param: "https://example.com",
-        batch_size: 500,
-        command_id: "admin_notice_test",
-        message_type: "system",
-        summary: "今晚 23:00 维护",
-        target_scope: "all_active_users",
-        title: "维护通知",
-    });
-
-    const [url, init] = vi.mocked(fetch).mock.calls[0];
-
-    expect(String(url)).toContain("/api/v1/admin/operations/full-server-notices/fanout");
-    expect(init?.method).toBe("POST");
-    expect(JSON.parse(String(init?.body))).toMatchObject({
-        action_param: "https://example.com",
-        action_type: "app_h5",
-        command_id: "admin_notice_test",
-        message_type: "system",
-        target_scope: "all_active_users",
-        title: "维护通知",
-    });
-});
-
 test("coin adjustment APIs use generated admin paths", async () => {
     vi.stubGlobal(
         "fetch",
@@ -109,6 +62,7 @@ test("coin adjustment APIs use generated admin paths", async () => {
         amount: 500,
         commandId: "coin-adjustment-test",
         reason: "运营发放",
+        remark: "客服复核后补发",
         targetUserId: "1001",
     });
 
@@ -124,6 +78,13 @@ test("coin adjustment APIs use generated admin paths", async () => {
     expect(lookupInit?.method).toBe("GET");
     expect(String(createUrl)).toContain("/api/v1/admin/operations/coin-adjustments");
     expect(createInit?.method).toBe("POST");
+    expect(JSON.parse(String(createInit?.body))).toMatchObject({
+        amount: 500,
+        commandId: "coin-adjustment-test",
+        reason: "运营发放",
+        remark: "客服复核后补发",
+        targetUserId: "1001",
+    });
 });
 
 test("coin ledger API sends type filter", async () => {

src/features/operations/api.ts

@@ -27,40 +27,6 @@ export interface GiftDiamondRatioResponse {
     items: GiftDiamondRatioItem[];
 }
 
-export interface FullServerNoticeFanoutPayload {
-    action_param?: string;
-    action_type?: string;
-    aggregate_id?: string;
-    aggregate_type?: string;
-    batch_size?: number;
-    body?: string;
-    command_id?: string;
-    country?: string;
-    expire_at_ms?: number;
-    icon_url?: string;
-    image_url?: string;
-    message_type: "system" | "activity";
-    metadata_json?: string;
-    priority?: number;
-    producer_event_type?: string;
-    region_id?: number;
-    sent_at_ms?: number;
-    summary: string;
-    target_scope: "all_active_users" | "single_user" | "user_ids" | "region" | "country";
-    target_user_id?: number;
-    title: string;
-    user_ids?: number[];
-}
-
-export interface FullServerNoticeFanoutResponse {
-    command_id: string;
-    created: boolean;
-    job_id: string;
-    message_type: string;
-    status: string;
-    target_scope: string;
-}
-
 export type WheelRewardType = "coin" | "dress" | "gift" | "prop";
 
 export interface WheelTierDto {
@@ -235,19 +201,6 @@ export function updateGiftDiamondRatios(payload: {
     });
 }
 
-export function createFullServerNoticeFanout(
-    payload: FullServerNoticeFanoutPayload,
-): Promise<FullServerNoticeFanoutResponse> {
-    const endpoint = API_ENDPOINTS.createFullServerNoticeFanout;
-    return apiRequest<FullServerNoticeFanoutResponse, FullServerNoticeFanoutPayload>(
-        apiEndpointPath(API_OPERATIONS.createFullServerNoticeFanout),
-        {
-            body: payload,
-            method: endpoint.method,
-        },
-    );
-}
-
 export function getWheelConfig(wheelId = "default"): Promise<WheelConfigDto> {
     const endpoint = API_ENDPOINTS.getWheelConfig;
     return apiRequest<RawWheelConfig>(apiEndpointPath(API_OPERATIONS.getWheelConfig), {
@@ -318,7 +271,10 @@ function normalizeWheelTier(raw: unknown): WheelTierDto {
         rewardCount: numberValue(item.rewardCount ?? item.reward_count),
         rewardId: stringValue(item.rewardId ?? item.reward_id),
         rewardType,
-        rtpValueCoins: rewardType === "prop" || rewardType === "dress" ? 0 : numberValue(item.rtpValueCoins ?? item.rtp_value_coins),
+        rtpValueCoins:
+            rewardType === "prop" || rewardType === "dress"
+                ? 0
+                : numberValue(item.rtpValueCoins ?? item.rtp_value_coins),
         tierId: stringValue(item.tierId ?? item.tier_id) || rewardType,
     };
 }

src/features/operations/operations.module.css

@@ -559,95 +559,6 @@
     font-size: 12px;
 }
 
-.noticeBody {
-    display: grid;
-    min-height: 0;
-    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
-    gap: var(--space-5);
-    padding: var(--space-5);
-    background: var(--bg-card);
-}
-
-.noticePanel {
-    display: grid;
-    min-width: 0;
-    gap: var(--space-5);
-}
-
-.noticeHeader {
-    display: flex;
-    min-width: 0;
-    align-items: center;
-    gap: var(--space-2);
-    color: var(--text-primary);
-}
-
-.noticeHeader h2,
-.noticePreview h3 {
-    min-width: 0;
-    margin: 0;
-    overflow-wrap: anywhere;
-    font-size: 16px;
-    font-weight: 800;
-    line-height: 1.4;
-}
-
-.noticeGrid,
-.noticeContentGrid {
-    display: grid;
-    min-width: 0;
-    grid-template-columns: repeat(2, minmax(220px, 1fr));
-    gap: var(--space-4);
-}
-
-.noticeContentGrid {
-    grid-template-columns: repeat(2, minmax(260px, 1fr));
-}
-
-.noticeWideField {
-    grid-column: 1 / -1;
-}
-
-.noticePreview {
-    display: grid;
-    align-content: start;
-    min-width: 0;
-    gap: var(--space-4);
-    padding: var(--space-4);
-    border: 1px solid var(--border);
-    border-radius: var(--radius-card);
-    background: var(--bg-card-strong);
-}
-
-.noticePreview p {
-    min-width: 0;
-    margin: 0;
-    overflow-wrap: anywhere;
-    color: var(--text-secondary);
-    line-height: 1.6;
-}
-
-.noticePreviewMeta {
-    display: flex;
-    min-width: 0;
-    flex-wrap: wrap;
-    gap: var(--space-2);
-}
-
-.noticePreviewMeta span {
-    display: inline-flex;
-    max-width: 100%;
-    min-height: 28px;
-    align-items: center;
-    padding: 0 var(--space-3);
-    border: 1px solid var(--border-soft);
-    border-radius: var(--radius-control);
-    color: var(--text-secondary);
-    font-size: 12px;
-    font-weight: 700;
-    overflow-wrap: anywhere;
-}
-
 @media (max-width: 720px) {
     .ratioGrid,
     .ratioTable {
@@ -667,10 +578,7 @@
 
     .wheelBody,
     .wheelConfigGrid,
-    .wheelSummaryGrid,
-    .noticeBody,
-    .noticeGrid,
-    .noticeContentGrid {
+    .wheelSummaryGrid {
         grid-template-columns: minmax(0, 1fr);
     }
 }

src/features/operations/pages/CoinAdjustmentPage.jsx

@@ -38,6 +38,7 @@ const emptyForm = () => ({
     amount: "",
     mode: "increase",
     reason: adjustmentReasons[0],
+    remark: "",
     userKeyword: "",
 });
 
@@ -60,6 +61,12 @@ const columns = [
         render: (item) => item.reason || "-",
         width: "minmax(170px, 0.85fr)",
     },
+    {
+        key: "remark",
+        label: "备注",
+        render: (item) => item.remark || "-",
+        width: "minmax(220px, 1fr)",
+    },
     {
         key: "operator",
         label: "发放人",
@@ -221,7 +228,7 @@ export function CoinAdjustmentPage() {
                     <DataTable
                         columns={tableColumns}
                         items={items}
-                        minWidth="1010px"
+                        minWidth="1230px"
                         pagination={
                             total > 0
                                 ? {
@@ -275,6 +282,19 @@ export function CoinAdjustmentPage() {
                     </div>
                     {targetUser ? <TargetUserPreview user={targetUser} /> : null}
                 </AdminFormSection>
+                <AdminFormSection title="备注">
+                    <TextField
+                        disabled={!abilities.canCreate || submitting}
+                        fullWidth
+                        label="备注"
+                        multiline
+                        required
+                        rows={3}
+                        slotProps={{ htmlInput: { maxLength: 512 } }}
+                        value={form.remark}
+                        onChange={(event) => changeForm({ remark: event.target.value })}
+                    />
+                </AdminFormSection>
                 <AdminFormSection title="金币信息">
                     <AdminFormFieldGrid columns="repeat(3, minmax(0, 1fr))">
                         <TextField
@@ -358,10 +378,18 @@ function buildAdjustmentPayload(form, targetUser) {
     if (!reason) {
         throw new Error("请选择发放理由");
     }
+    const remark = String(form.remark || "").trim();
+    if (!remark) {
+        throw new Error("请输入备注");
+    }
+    if (remark.length > 512) {
+        throw new Error("备注不能超过 512 个字符");
+    }
     return {
         amount: signedAmount,
         commandId: `coin-adjustment-${Date.now()}`,
         reason,
+        remark,
         targetUserId: String(targetUser.userId),
     };
 }

src/features/operations/pages/CoinAdjustmentPage.test.jsx

@@ -0,0 +1,178 @@
+import { fireEvent, render, screen, waitFor, within } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MemoryRouter } from "react-router-dom";
+import { afterEach, expect, test, vi } from "vitest";
+import { AppProviders } from "@/app/providers.jsx";
+import { queryClient } from "@/shared/query/client";
+import { CoinAdjustmentPage } from "./CoinAdjustmentPage.jsx";
+
+vi.mock("@/app/auth/AuthProvider.jsx", () => ({
+    AuthProvider: ({ children }) => children,
+    useAuth: () => ({ can: () => true }),
+}));
+
+afterEach(() => {
+    queryClient.clear();
+    vi.unstubAllGlobals();
+});
+
+test("coin adjustment does not submit when remark is blank", async () => {
+    const user = userEvent.setup();
+    vi.stubGlobal("fetch", createCoinAdjustmentFetch());
+
+    renderPage();
+    await openReadyDialog(user);
+    await user.type(screen.getByRole("textbox", { name: "用户 ID" }), "1001");
+    await user.click(screen.getByRole("button", { name: "搜索" }));
+    await waitFor(() => expect(screen.getByText("测试用户")).toBeInTheDocument());
+    await user.type(screen.getByRole("textbox", { name: "备注" }), "   ");
+    await user.type(screen.getByRole("textbox", { name: "发放数量" }), "500");
+    await user.click(screen.getByRole("button", { name: "确认" }));
+
+    await waitFor(() => expect(screen.getByText("请输入备注")).toBeInTheDocument());
+    expect(coinAdjustmentPostBodies()).toHaveLength(0);
+});
+
+test("coin adjustment request body includes trimmed remark", async () => {
+	const user = userEvent.setup();
+	vi.stubGlobal("fetch", createCoinAdjustmentFetch());
+
+    renderPage();
+    await openReadyDialog(user);
+    await user.type(screen.getByRole("textbox", { name: "用户 ID" }), "1001");
+    await user.click(screen.getByRole("button", { name: "搜索" }));
+    await waitFor(() => expect(screen.getByText("测试用户")).toBeInTheDocument());
+    await user.type(screen.getByRole("textbox", { name: "备注" }), "  客服复核后补发  ");
+    await user.type(screen.getByRole("textbox", { name: "发放数量" }), "500");
+    await user.click(screen.getByRole("button", { name: "确认" }));
+
+    await waitFor(() =>
+        expect(coinAdjustmentPostBodies()).toEqual([
+            expect.objectContaining({
+                amount: 500,
+                reason: "运营发放",
+                remark: "客服复核后补发",
+                targetUserId: "1001",
+            }),
+        ]),
+	);
+});
+
+test("coin adjustment does not submit when remark exceeds 512 characters", async () => {
+	const user = userEvent.setup();
+	vi.stubGlobal("fetch", createCoinAdjustmentFetch());
+
+	renderPage();
+	await openReadyDialog(user);
+	await user.type(screen.getByRole("textbox", { name: "用户 ID" }), "1001");
+	await user.click(screen.getByRole("button", { name: "搜索" }));
+	await waitFor(() => expect(screen.getByText("测试用户")).toBeInTheDocument());
+	fireEvent.change(screen.getByRole("textbox", { name: "备注" }), { target: { value: "补".repeat(513) } });
+	await user.type(screen.getByRole("textbox", { name: "发放数量" }), "500");
+	await user.click(screen.getByRole("button", { name: "确认" }));
+
+	await waitFor(() => expect(screen.getByText("备注不能超过 512 个字符")).toBeInTheDocument());
+	expect(coinAdjustmentPostBodies()).toHaveLength(0);
+});
+
+test("coin adjustment list displays remark and falls back for empty remark", async () => {
+	vi.stubGlobal(
+		"fetch",
+        createCoinAdjustmentFetch({
+            items: [
+                coinAdjustmentFixture({ entryId: 1, remark: "客服复核后补发", transactionId: "tx-remark" }),
+                coinAdjustmentFixture({ entryId: 2, remark: "", transactionId: "tx-empty" }),
+            ],
+        }),
+    );
+
+    renderPage();
+
+    await waitFor(() => expect(screen.getByText("客服复核后补发")).toBeInTheDocument());
+    expect(screen.getByText("备注")).toBeInTheDocument();
+    const rows = document.querySelectorAll(".admin-row:not(.admin-row--head)");
+    expect(within(rows[1]).getByText("-")).toBeInTheDocument();
+});
+
+function renderPage() {
+    return render(
+        <AppProviders>
+            <MemoryRouter>
+                <CoinAdjustmentPage />
+            </MemoryRouter>
+        </AppProviders>,
+    );
+}
+
+async function openReadyDialog(user) {
+    await waitFor(() => expect(screen.getByText("当前无数据")).toBeInTheDocument());
+    await user.click(screen.getByRole("button", { name: "金币增减" }));
+    await waitFor(() => expect(screen.getByRole("dialog", { name: "金币增减" })).toBeInTheDocument());
+}
+
+function coinAdjustmentPostBodies() {
+    return vi
+        .mocked(fetch)
+        .mock.calls.filter(([url, init]) => String(url).includes("/api/v1/admin/operations/coin-adjustments") && init?.method === "POST")
+        .map(([, init]) => JSON.parse(String(init?.body)));
+}
+
+function createCoinAdjustmentFetch({ items = [] } = {}) {
+    return vi.fn(async (input, init = {}) => {
+        const url = String(input);
+        const method = init.method || "GET";
+
+        if (url.includes("/api/v1/admin/operations/coin-adjustments/target")) {
+            return jsonResponse({
+                code: 0,
+                data: {
+                    displayUserId: "1001",
+                    userId: "1001",
+                    username: "测试用户",
+                },
+            });
+        }
+        if (url.includes("/api/v1/admin/operations/coin-adjustments") && method === "POST") {
+            return jsonResponse({
+                code: 0,
+                data: {
+                    amount: 500,
+                    availableDelta: 500,
+                    balanceAfter: 1500,
+                    transactionId: "tx-created",
+                    user: { displayUserId: "1001", userId: "1001", username: "测试用户" },
+                },
+            });
+        }
+        if (url.includes("/api/v1/admin/operations/coin-adjustments")) {
+            return jsonResponse({ code: 0, data: { items, page: 1, pageSize: 50, total: items.length } });
+        }
+
+        return jsonResponse({ code: 0, data: {} });
+    });
+}
+
+function coinAdjustmentFixture(patch = {}) {
+    return {
+        amount: 500,
+        availableAfter: 1500,
+        availableDelta: 500,
+        createdAtMs: 1762300800000,
+        direction: "income",
+        entryId: 1,
+        operator: { name: "运营" },
+        reason: "运营发放",
+        remark: "",
+        transactionId: "tx-1",
+        user: { displayUserId: "1001", userId: "1001", username: "测试用户" },
+        userId: "1001",
+        ...patch,
+    };
+}
+
+function jsonResponse(body) {
+    return new Response(JSON.stringify(body), {
+        headers: { "content-type": "application/json" },
+        status: 200,
+    });
+}

src/features/operations/pages/FullServerNoticePage.jsx

@@ -1,398 +0,0 @@
-import CampaignOutlined from "@mui/icons-material/CampaignOutlined";
-import SendOutlined from "@mui/icons-material/SendOutlined";
-import Alert from "@mui/material/Alert";
-import MenuItem from "@mui/material/MenuItem";
-import TextField from "@mui/material/TextField";
-import { useMemo, useState } from "react";
-import { createFullServerNoticeFanout } from "@/features/operations/api";
-import { useFullServerNoticeAbilities } from "@/features/operations/permissions.js";
-import styles from "@/features/operations/operations.module.css";
-import { AdminListPage, AdminListToolbar } from "@/shared/ui/AdminListLayout.jsx";
-import { Button } from "@/shared/ui/Button.jsx";
-import { useToast } from "@/shared/ui/ToastProvider.jsx";
-
-const messageTypes = [
-    { label: "系统消息", value: "system" },
-    { label: "活动消息", value: "activity" },
-];
-
-const targetScopes = [
-    { label: "全量活跃用户", value: "all_active_users" },
-    { label: "指定用户", value: "single_user" },
-    { label: "用户列表", value: "user_ids" },
-    { label: "指定区域", value: "region" },
-    { label: "指定国家", value: "country" },
-];
-
-const actionTypes = [
-    { label: "无跳转", value: "" },
-    { label: "活动详情", value: "activity_detail" },
-    { label: "H5 页面", value: "app_h5" },
-    { label: "房间详情", value: "room_detail" },
-    { label: "用户主页", value: "user_profile" },
-    { label: "提现详情", value: "wallet_withdraw_detail" },
-    { label: "主播申请", value: "host_application_detail" },
-    { label: "币商转账", value: "coin_seller_transfer_detail" },
-];
-
-const initialForm = {
-    actionParam: "",
-    actionType: "",
-    aggregateId: "",
-    aggregateType: "admin_notice",
-    batchSize: "500",
-    body: "",
-    commandId: "",
-    country: "",
-    expireAt: "",
-    messageType: "system",
-    metadataJson: "",
-    priority: "0",
-    producerEventType: "admin_full_server_notice",
-    regionId: "",
-    summary: "",
-    targetScope: "all_active_users",
-    targetUserId: "",
-    title: "",
-    userIds: "",
-};
-
-export function FullServerNoticePage() {
-    const abilities = useFullServerNoticeAbilities();
-    const { showToast } = useToast();
-    const [form, setForm] = useState(initialForm);
-    const [result, setResult] = useState(null);
-    const [saving, setSaving] = useState(false);
-
-    const targetLabel = useMemo(
-        () => targetScopes.find((item) => item.value === form.targetScope)?.label || form.targetScope,
-        [form.targetScope],
-    );
-
-    const updateField = (field) => (event) => {
-        setForm((current) => ({ ...current, [field]: event.target.value }));
-    };
-
-    const submit = async () => {
-        const payload = buildPayload(form);
-        if (!payload.ok) {
-            showToast(payload.error, "error");
-            return;
-        }
-        setSaving(true);
-        try {
-            const next = await createFullServerNoticeFanout(payload.value);
-            setResult(next);
-            showToast(next.created ? "全服通知任务已创建" : "已返回现有通知任务", "success");
-        } catch (err) {
-            showToast(err.message || "创建全服通知失败", "error");
-        } finally {
-            setSaving(false);
-        }
-    };
-
-    return (
-        <AdminListPage>
-            <AdminListToolbar
-                actions={
-                    abilities.canSend ? (
-                        <Button disabled={saving} startIcon={<SendOutlined />} variant="primary" onClick={submit}>
-                            发送
-                        </Button>
-                    ) : null
-                }
-                filters={null}
-            />
-            <div className={styles.noticeBody}>
-                <section className={styles.noticePanel}>
-                    <div className={styles.noticeHeader}>
-                        <CampaignOutlined fontSize="small" />
-                        <h2>全服通知</h2>
-                    </div>
-                    <div className={styles.noticeGrid}>
-                        <TextField
-                            select
-                            label="消息类型"
-                            size="small"
-                            value={form.messageType}
-                            onChange={updateField("messageType")}
-                        >
-                            {messageTypes.map((item) => (
-                                <MenuItem key={item.value} value={item.value}>
-                                    {item.label}
-                                </MenuItem>
-                            ))}
-                        </TextField>
-                        <TextField
-                            select
-                            label="发送范围"
-                            size="small"
-                            value={form.targetScope}
-                            onChange={updateField("targetScope")}
-                        >
-                            {targetScopes.map((item) => (
-                                <MenuItem key={item.value} value={item.value}>
-                                    {item.label}
-                                </MenuItem>
-                            ))}
-                        </TextField>
-                        {form.targetScope === "single_user" ? (
-                            <TextField
-                                label="用户 ID"
-                                size="small"
-                                value={form.targetUserId}
-                                onChange={updateField("targetUserId")}
-                            />
-                        ) : null}
-                        {form.targetScope === "user_ids" ? (
-                            <TextField
-                                label="用户 ID 列表"
-                                size="small"
-                                value={form.userIds}
-                                onChange={updateField("userIds")}
-                            />
-                        ) : null}
-                        {form.targetScope === "region" ? (
-                            <TextField
-                                label="区域 ID"
-                                size="small"
-                                value={form.regionId}
-                                onChange={updateField("regionId")}
-                            />
-                        ) : null}
-                        {form.targetScope === "country" ? (
-                            <TextField
-                                label="国家"
-                                size="small"
-                                value={form.country}
-                                onChange={updateField("country")}
-                            />
-                        ) : null}
-                        <TextField
-                            label="幂等命令 ID"
-                            size="small"
-                            value={form.commandId}
-                            onChange={updateField("commandId")}
-                        />
-                        <TextField
-                            label="批量大小"
-                            size="small"
-                            type="number"
-                            value={form.batchSize}
-                            onChange={updateField("batchSize")}
-                        />
-                    </div>
-                    <div className={styles.noticeContentGrid}>
-                        <TextField
-                            required
-                            label="标题"
-                            size="small"
-                            value={form.title}
-                            onChange={updateField("title")}
-                        />
-                        <TextField
-                            required
-                            label="摘要"
-                            size="small"
-                            value={form.summary}
-                            onChange={updateField("summary")}
-                        />
-                        <TextField
-                            multiline
-                            minRows={4}
-                            className={styles.noticeWideField}
-                            label="正文"
-                            value={form.body}
-                            onChange={updateField("body")}
-                        />
-                    </div>
-                    <div className={styles.noticeGrid}>
-                        <TextField
-                            select
-                            label="跳转类型"
-                            size="small"
-                            value={form.actionType}
-                            onChange={updateField("actionType")}
-                        >
-                            {actionTypes.map((item) => (
-                                <MenuItem key={item.value || "none"} value={item.value}>
-                                    {item.label}
-                                </MenuItem>
-                            ))}
-                        </TextField>
-                        <TextField
-                            label="跳转参数"
-                            size="small"
-                            value={form.actionParam}
-                            onChange={updateField("actionParam")}
-                        />
-                        <TextField
-                            label="关联类型"
-                            size="small"
-                            value={form.aggregateType}
-                            onChange={updateField("aggregateType")}
-                        />
-                        <TextField
-                            label="关联 ID"
-                            size="small"
-                            value={form.aggregateId}
-                            onChange={updateField("aggregateId")}
-                        />
-                        <TextField
-                            label="事件类型"
-                            size="small"
-                            value={form.producerEventType}
-                            onChange={updateField("producerEventType")}
-                        />
-                        <TextField
-                            label="优先级"
-                            size="small"
-                            type="number"
-                            value={form.priority}
-                            onChange={updateField("priority")}
-                        />
-                        <TextField
-                            label="过期时间"
-                            size="small"
-                            type="datetime-local"
-                            value={form.expireAt}
-                            InputLabelProps={{ shrink: true }}
-                            onChange={updateField("expireAt")}
-                        />
-                        <TextField
-                            multiline
-                            minRows={3}
-                            label="Metadata JSON"
-                            value={form.metadataJson}
-                            onChange={updateField("metadataJson")}
-                        />
-                    </div>
-                </section>
-                <section className={styles.noticePreview}>
-                    <h3>{form.title || "标题"}</h3>
-                    <p>{form.summary || "摘要"}</p>
-                    <div className={styles.noticePreviewMeta}>
-                        <span>{messageTypes.find((item) => item.value === form.messageType)?.label}</span>
-                        <span>{targetLabel}</span>
-                        <span>{form.actionType || "无跳转"}</span>
-                    </div>
-                    {result ? (
-                        <Alert severity={result.created ? "success" : "info"}>
-                            {result.status} · {result.job_id} · {result.command_id}
-                        </Alert>
-                    ) : null}
-                </section>
-            </div>
-        </AdminListPage>
-    );
-}
-
-function buildPayload(form) {
-    const title = form.title.trim();
-    const summary = form.summary.trim();
-    if (!title || !summary) {
-        return { error: "标题和摘要不能为空", ok: false };
-    }
-    const batchSize = parsePositiveNumber(form.batchSize, "批量大小");
-    if (!batchSize.ok) {
-        return batchSize;
-    }
-    const priority = parseOptionalNumber(form.priority, "优先级");
-    if (!priority.ok) {
-        return priority;
-    }
-    const expireAtMS = datetimeLocalToMS(form.expireAt);
-    if (!expireAtMS.ok) {
-        return expireAtMS;
-    }
-    const target = buildTargetPayload(form);
-    if (!target.ok) {
-        return target;
-    }
-    const metadataJson = form.metadataJson.trim();
-    if (metadataJson) {
-        try {
-            JSON.parse(metadataJson);
-        } catch {
-            return { error: "Metadata JSON 不正确", ok: false };
-        }
-    }
-    return {
-        ok: true,
-        value: {
-            ...target.value,
-            action_param: form.actionParam.trim() || undefined,
-            action_type: form.actionType,
-            aggregate_id: form.aggregateId.trim() || undefined,
-            aggregate_type: form.aggregateType.trim() || undefined,
-            batch_size: batchSize.value,
-            body: form.body.trim() || undefined,
-            command_id: form.commandId.trim() || undefined,
-            expire_at_ms: expireAtMS.value || undefined,
-            message_type: form.messageType,
-            metadata_json: metadataJson || undefined,
-            priority: priority.value,
-            producer_event_type: form.producerEventType.trim() || undefined,
-            summary,
-            target_scope: form.targetScope,
-            title,
-        },
-    };
-}
-
-function buildTargetPayload(form) {
-    if (form.targetScope === "single_user") {
-        const targetUserID = parsePositiveNumber(form.targetUserId, "用户 ID");
-        return targetUserID.ok ? { ok: true, value: { target_user_id: targetUserID.value } } : targetUserID;
-    }
-    if (form.targetScope === "user_ids") {
-        const ids = form.userIds
-            .split(/[\s,，]+/)
-            .map((item) => Number(item.trim()))
-            .filter((value) => Number.isInteger(value) && value > 0);
-        if (!ids.length) {
-            return { error: "用户 ID 列表不能为空", ok: false };
-        }
-        return { ok: true, value: { user_ids: Array.from(new Set(ids)) } };
-    }
-    if (form.targetScope === "region") {
-        const regionID = parsePositiveNumber(form.regionId, "区域 ID");
-        return regionID.ok ? { ok: true, value: { region_id: regionID.value } } : regionID;
-    }
-    if (form.targetScope === "country") {
-        const country = form.country.trim();
-        return country ? { ok: true, value: { country } } : { error: "国家不能为空", ok: false };
-    }
-    return { ok: true, value: {} };
-}
-
-function parsePositiveNumber(value, label) {
-    const number = Number(String(value || "").trim());
-    if (!Number.isInteger(number) || number <= 0) {
-        return { error: `${label} 必须是正整数`, ok: false };
-    }
-    return { ok: true, value: number };
-}
-
-function parseOptionalNumber(value, label) {
-    const raw = String(value ?? "").trim();
-    if (!raw) {
-        return { ok: true, value: 0 };
-    }
-    const number = Number(raw);
-    if (!Number.isInteger(number)) {
-        return { error: `${label} 必须是整数`, ok: false };
-    }
-    return { ok: true, value: number };
-}
-
-function datetimeLocalToMS(value) {
-    if (!value) {
-        return { ok: true, value: 0 };
-    }
-    const ms = new Date(value).getTime();
-    if (!Number.isFinite(ms)) {
-        return { error: "过期时间不正确", ok: false };
-    }
-    return { ok: true, value: ms };
-}

src/features/operations/permissions.js

@@ -19,15 +19,6 @@ export function useGiftDiamondAbilities() {
     };
 }
 
-export function useFullServerNoticeAbilities() {
-    const { can } = useAuth();
-
-    return {
-        canSend: can(PERMISSIONS.fullServerNoticeSend),
-        canView: can(PERMISSIONS.fullServerNoticeView),
-    };
-}
-
 export function useWheelAbilities() {
     const { can } = useAuth();
 

src/features/operations/routes.js

@@ -49,12 +49,4 @@ export const operationsRoutes = [
         path: "/operations/gift-diamonds",
         permission: PERMISSIONS.giftDiamondView,
     },
-    {
-        label: "全服通知",
-        loader: () => import("./pages/FullServerNoticePage.jsx").then((module) => module.FullServerNoticePage),
-        menuCode: MENU_CODES.operationFullServerNotice,
-        pageKey: "operation-full-server-notice",
-        path: "/operations/full-server-notices",
-        permission: PERMISSIONS.fullServerNoticeView,
-    },
 ];

src/features/payment/hooks/useThirdPartyPaymentPage.js

@@ -153,7 +153,7 @@ export function useThirdPartyPaymentPage() {
 
     const submitSyncRates = async (event) => {
         event?.preventDefault();
-        // 上浮比例只表达运营策略，不在前端计算最终汇率；服务端会拉实时源、套用比例并按 1 位小数向上取整，避免旧页面数据参与写库。
+        // 上浮比例只表达运营策略，不在前端计算最终汇率；服务端会拉实时源、套用比例并按高汇率整数规则向上取整，避免旧页面数据参与写库。
         if (!abilities.canUpdateThirdParty) {
             return;
         }

src/features/resources/api.test.ts

@@ -1,6 +1,8 @@
 import { afterEach, expect, test, vi } from "vitest";
 import { setAccessToken } from "@/shared/api/request";
 import {
+    batchCreateGifts,
+    batchDeleteResources,
     createEmojiPack,
     createGift,
     createResource,
@@ -10,6 +12,7 @@ import {
     disableResource,
     disableResourceGroup,
     deleteGift,
+    deleteResource,
     enableResourceShopItem,
     enableGift,
     enableResource,
@@ -83,6 +86,8 @@ test("resource APIs use generated admin paths", async () => {
         sortOrder: 0,
         status: "active",
     });
+    await deleteResource(11);
+    await batchDeleteResources([11, 12]);
     await listGifts({ page: 1, page_size: 10, region_id: 1001 });
     await createGift({
         chargeAssetType: "COIN",
@@ -102,6 +107,26 @@ test("resource APIs use generated admin paths", async () => {
         sortOrder: 0,
         status: "active",
     });
+    await batchCreateGifts([
+        {
+            chargeAssetType: "COIN",
+            coinPrice: 20,
+            cpRelationType: "",
+            effectiveAtMs: 1777766400000,
+            effectiveFromMs: 0,
+            effectiveToMs: 0,
+            effectTypes: ["animation"],
+            giftId: "ring",
+            giftTypeCode: "normal",
+            name: "Ring",
+            presentationJson: "{}",
+            priceVersion: "default",
+            regionIds: [0],
+            resourceId: 12,
+            sortOrder: 1,
+            status: "active",
+        },
+    ]);
     await enableResource(11);
     await disableResource(11);
     await createResourceGroup({
@@ -177,23 +202,26 @@ test("resource APIs use generated admin paths", async () => {
     const [listUrl, listInit] = vi.mocked(fetch).mock.calls[0];
     const [createUrl, createInit] = vi.mocked(fetch).mock.calls[1];
     const [updateUrl, updateInit] = vi.mocked(fetch).mock.calls[2];
-    const [giftListUrl, giftListInit] = vi.mocked(fetch).mock.calls[3];
-    const [createGiftUrl, createGiftInit] = vi.mocked(fetch).mock.calls[4];
-    const [enableUrl, enableInit] = vi.mocked(fetch).mock.calls[5];
-    const [disableUrl, disableInit] = vi.mocked(fetch).mock.calls[6];
-    const [createGroupUrl, createGroupInit] = vi.mocked(fetch).mock.calls[7];
-    const [updateGroupUrl, updateGroupInit] = vi.mocked(fetch).mock.calls[8];
-    const [enableGroupUrl, enableGroupInit] = vi.mocked(fetch).mock.calls[9];
-    const [disableGroupUrl, disableGroupInit] = vi.mocked(fetch).mock.calls[10];
-    const [updateGiftUrl, updateGiftInit] = vi.mocked(fetch).mock.calls[11];
-    const [enableGiftUrl, enableGiftInit] = vi.mocked(fetch).mock.calls[12];
-    const [disableGiftUrl, disableGiftInit] = vi.mocked(fetch).mock.calls[13];
-    const [deleteGiftUrl, deleteGiftInit] = vi.mocked(fetch).mock.calls[14];
-    const [grantListUrl, grantListInit] = vi.mocked(fetch).mock.calls[15];
-    const [grantTargetUrl, grantTargetInit] = vi.mocked(fetch).mock.calls[16];
-    const [grantResourceUrl, grantResourceInit] = vi.mocked(fetch).mock.calls[17];
-    const [grantGroupUrl, grantGroupInit] = vi.mocked(fetch).mock.calls[18];
-    const [revokeGrantUrl, revokeGrantInit] = vi.mocked(fetch).mock.calls[19];
+    const [deleteResourceUrl, deleteResourceInit] = vi.mocked(fetch).mock.calls[3];
+    const [batchDeleteResourceUrl, batchDeleteResourceInit] = vi.mocked(fetch).mock.calls[4];
+    const [giftListUrl, giftListInit] = vi.mocked(fetch).mock.calls[5];
+    const [createGiftUrl, createGiftInit] = vi.mocked(fetch).mock.calls[6];
+    const [batchCreateGiftUrl, batchCreateGiftInit] = vi.mocked(fetch).mock.calls[7];
+    const [enableUrl, enableInit] = vi.mocked(fetch).mock.calls[8];
+    const [disableUrl, disableInit] = vi.mocked(fetch).mock.calls[9];
+    const [createGroupUrl, createGroupInit] = vi.mocked(fetch).mock.calls[10];
+    const [updateGroupUrl, updateGroupInit] = vi.mocked(fetch).mock.calls[11];
+    const [enableGroupUrl, enableGroupInit] = vi.mocked(fetch).mock.calls[12];
+    const [disableGroupUrl, disableGroupInit] = vi.mocked(fetch).mock.calls[13];
+    const [updateGiftUrl, updateGiftInit] = vi.mocked(fetch).mock.calls[14];
+    const [enableGiftUrl, enableGiftInit] = vi.mocked(fetch).mock.calls[15];
+    const [disableGiftUrl, disableGiftInit] = vi.mocked(fetch).mock.calls[16];
+    const [deleteGiftUrl, deleteGiftInit] = vi.mocked(fetch).mock.calls[17];
+    const [grantListUrl, grantListInit] = vi.mocked(fetch).mock.calls[18];
+    const [grantTargetUrl, grantTargetInit] = vi.mocked(fetch).mock.calls[19];
+    const [grantResourceUrl, grantResourceInit] = vi.mocked(fetch).mock.calls[20];
+    const [grantGroupUrl, grantGroupInit] = vi.mocked(fetch).mock.calls[21];
+    const [revokeGrantUrl, revokeGrantInit] = vi.mocked(fetch).mock.calls[22];
 
     expect(String(listUrl)).toContain("/api/v1/admin/resources?");
     expect(String(listUrl)).toContain("resource_type=gift");
@@ -217,12 +245,20 @@ test("resource APIs use generated admin paths", async () => {
         badgeKind: "normal",
         metadataJson: '{"profile_card_layout":{"content_top":120,"content_height":1500}}',
     });
+    expect(String(deleteResourceUrl)).toContain("/api/v1/admin/resources/11");
+    expect(deleteResourceInit?.method).toBe("DELETE");
+    expect(String(batchDeleteResourceUrl)).toContain("/api/v1/admin/resources/batch-delete");
+    expect(batchDeleteResourceInit?.method).toBe("POST");
+    expect(JSON.parse(String(batchDeleteResourceInit?.body))).toEqual({ resourceIds: [11, 12] });
     expect(String(giftListUrl)).toContain("/api/v1/admin/gifts?");
     expect(String(giftListUrl)).toContain("region_id=1001");
     expect(giftListInit?.method).toBe("GET");
     expect(String(createGiftUrl)).toContain("/api/v1/admin/gifts");
     expect(createGiftInit?.method).toBe("POST");
     expect(JSON.parse(String(createGiftInit?.body))).toMatchObject({ giftId: "rose", resourceId: 11 });
+    expect(String(batchCreateGiftUrl)).toContain("/api/v1/admin/gifts/batch");
+    expect(batchCreateGiftInit?.method).toBe("POST");
+    expect(JSON.parse(String(batchCreateGiftInit?.body))).toMatchObject({ items: [{ giftId: "ring", resourceId: 12 }] });
     expect(String(enableUrl)).toContain("/api/v1/admin/resources/11/enable");
     expect(enableInit?.method).toBe("POST");
     expect(String(disableUrl)).toContain("/api/v1/admin/resources/11/disable");

src/features/resources/api.ts

@@ -224,6 +224,10 @@ export interface GiftPayload {
     regionIds: number[];
 }
 
+export interface BatchCreateGiftsPayload {
+    items: GiftPayload[];
+}
+
 export interface GiftTypePayload {
     displayName: string;
     tabName: string;
@@ -337,6 +341,10 @@ export interface ResourceShopItemsPayload {
     items: ResourceShopItemPayload[];
 }
 
+export interface BatchDeleteResourcesPayload {
+    resourceIds: EntityId[];
+}
+
 export function listResources(query: PageQuery = {}): Promise<ApiPage<ResourceDto>> {
     const endpoint = API_ENDPOINTS.listResources;
     return apiRequest<ApiPage<ResourceDto>>(apiEndpointPath(API_OPERATIONS.listResources), {
@@ -364,6 +372,24 @@ export function updateResource(resourceId: EntityId, payload: ResourcePayload):
     );
 }
 
+export function deleteResource(resourceId: EntityId): Promise<ResourceDto> {
+    const endpoint = API_ENDPOINTS.deleteResource;
+    return apiRequest<ResourceDto>(apiEndpointPath(API_OPERATIONS.deleteResource, { resource_id: resourceId }), {
+        method: endpoint.method,
+    });
+}
+
+export function batchDeleteResources(resourceIds: EntityId[]): Promise<ResourceDto[]> {
+    const endpoint = API_ENDPOINTS.batchDeleteResources;
+    return apiRequest<ResourceDto[], BatchDeleteResourcesPayload>(
+        apiEndpointPath(API_OPERATIONS.batchDeleteResources),
+        {
+            body: { resourceIds },
+            method: endpoint.method,
+        },
+    );
+}
+
 export function updateResourceMp4Layouts(items: ResourceMp4LayoutUpdatePayload[]): Promise<ResourceDto[]> {
     return apiRequest<ResourceDto[], ResourceMp4LayoutsPayload>("/v1/admin/resources/mp4-layouts/batch", {
         body: { items },
@@ -541,6 +567,14 @@ export function createGift(payload: GiftPayload): Promise<GiftDto> {
     });
 }
 
+export function batchCreateGifts(payloads: GiftPayload[]): Promise<GiftDto[]> {
+    const endpoint = API_ENDPOINTS.batchCreateGifts;
+    return apiRequest<GiftDto[], BatchCreateGiftsPayload>(apiEndpointPath(API_OPERATIONS.batchCreateGifts), {
+        body: { items: payloads },
+        method: endpoint.method,
+    });
+}
+
 export function updateGift(giftId: string, payload: GiftPayload): Promise<GiftDto> {
     const endpoint = API_ENDPOINTS.updateGift;
     return apiRequest<GiftDto, GiftPayload>(apiEndpointPath(API_OPERATIONS.updateGift, { gift_id: giftId }), {

src/features/resources/components/GiftResourceSelectDrawer.jsx

@@ -21,6 +21,7 @@ const drawerZIndex = 1600;
 export function GiftResourceSelectField({
     disabled = false,
     drawerTitle = "选择资源",
+    excludedResourceIds = [],
     giftTypes = [],
     gifts = [],
     label = "资源",
@@ -36,6 +37,8 @@ export function GiftResourceSelectField({
     const [activeType, setActiveType] = useState("");
     const selectedIds = useMemo(() => selectedResourceIds.map((id) => String(id)), [selectedResourceIds]);
     const selectedIdSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+    const excludedIds = useMemo(() => excludedResourceIds.map((id) => String(id)), [excludedResourceIds]);
+    const excludedIdSet = useMemo(() => new Set(excludedIds), [excludedIds]);
     const giftsByResourceId = useMemo(() => {
         const items = new Map();
         gifts.forEach((gift) => {
@@ -49,10 +52,19 @@ export function GiftResourceSelectField({
         () => buildResourceItems(resources, giftsByResourceId),
         [giftsByResourceId, resources],
     );
-    const itemCounts = useMemo(() => countResourceItems(resourceItems), [resourceItems]);
+    const visibleResourceItems = useMemo(
+        () =>
+            resourceItems.filter((item) => {
+                const resourceId = String(item.resource.resourceId);
+                return !excludedIdSet.has(resourceId) || selectedIdSet.has(resourceId);
+            }),
+        [excludedIdSet, resourceItems, selectedIdSet],
+    );
+    const visibleResources = useMemo(() => visibleResourceItems.map((item) => item.resource), [visibleResourceItems]);
+    const itemCounts = useMemo(() => countResourceItems(visibleResourceItems), [visibleResourceItems]);
     const categoryOptions = useMemo(
-        () => buildCategoryOptions(giftTypes, resources, resourceItems),
-        [giftTypes, resourceItems, resources],
+        () => buildCategoryOptions(giftTypes, visibleResources, visibleResourceItems),
+        [giftTypes, visibleResourceItems, visibleResources],
     );
     const activeCategory = categoryOptions.some((item) => item.value === activeType)
         ? activeType
@@ -76,7 +88,7 @@ export function GiftResourceSelectField({
     }, [resourcesById, selectedIds]);
     const filteredResources = useMemo(() => {
         const keyword = query.trim().toLowerCase();
-        return resourceItems.filter((item) => {
+        return visibleResourceItems.filter((item) => {
             if (activeCategory && item.categoryValue !== activeCategory) {
                 return false;
             }
@@ -99,7 +111,7 @@ export function GiftResourceSelectField({
                 .toLowerCase();
             return haystack.includes(keyword);
         });
-    }, [activeCategory, query, resourceItems]);
+    }, [activeCategory, query, visibleResourceItems]);
 
     const openDrawer = () => {
         if (!disabled && !loading) {

src/features/resources/components/GiftResourceSelectDrawer.test.jsx

@@ -117,3 +117,71 @@ test("gift resource select drawer filters by gift type and supports multiple sel
     expect(changes.at(-1)).toEqual(["11", "12"]);
     expect(screen.getByDisplayValue("Rose Gift，CP Ring")).toBeInTheDocument();
 });
+
+test("gift resource select drawer hides excluded gift resources from candidates", () => {
+    function Harness() {
+        const [value, setValue] = useState([]);
+        return (
+            <GiftResourceSelectField
+                excludedResourceIds={[11]}
+                giftTypes={giftTypes}
+                gifts={gifts}
+                resources={resources}
+                selectedResourceIds={value}
+                onChange={setValue}
+            />
+        );
+    }
+
+    render(<Harness />);
+
+    fireEvent.click(screen.getByPlaceholderText("请选择资源"));
+    fireEvent.click(screen.getByRole("tab", { name: "普通礼物" }));
+
+    expect(screen.queryByText("Rose Gift")).not.toBeInTheDocument();
+    expect(screen.getByText("当前无可选资源")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("tab", { name: "CP礼物" }));
+    expect(screen.getByText("CP Ring")).toBeInTheDocument();
+});
+
+test("gift resource select drawer hides excluded resources but keeps selected resources removable", () => {
+    const changes = [];
+
+    function Harness() {
+        const [value, setValue] = useState(["11"]);
+        return (
+            <GiftResourceSelectField
+                excludedResourceIds={[11, 21]}
+                giftTypes={giftTypes}
+                gifts={gifts}
+                resources={resources}
+                selectedResourceIds={value}
+                onChange={(nextValue) => {
+                    changes.push(nextValue);
+                    setValue(nextValue);
+                }}
+            />
+        );
+    }
+
+    render(<Harness />);
+
+    fireEvent.click(screen.getByPlaceholderText("请选择资源"));
+
+    expect(screen.getByText("Rose Gift")).toBeInTheDocument();
+    expect(screen.queryByText("VIP Vehicle")).not.toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("tab", { name: "CP礼物" }));
+    fireEvent.click(screen.getByText("CP Ring"));
+
+    expect(changes.at(-1)).toEqual(["11", "12"]);
+    expect(screen.getByDisplayValue("Rose Gift，CP Ring")).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole("tab", { name: "普通礼物" }));
+    fireEvent.click(screen.getByText("Rose Gift"));
+
+    expect(changes.at(-1)).toEqual(["12"]);
+    expect(screen.queryByText("Rose Gift")).not.toBeInTheDocument();
+    expect(screen.getByDisplayValue("CP Ring")).toBeInTheDocument();
+});

src/features/resources/hooks/useGiftListPageBatchCreate.test.jsx

@@ -0,0 +1,117 @@
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import { useGiftListPage } from "./useResourcePages.js";
+
+const mocks = vi.hoisted(() => ({
+    batchCreateGifts: vi.fn(),
+    can: vi.fn(),
+    createGift: vi.fn(),
+    listGifts: vi.fn(),
+    listGiftTypes: vi.fn(),
+    listResources: vi.fn(),
+    reload: vi.fn(),
+    showToast: vi.fn(),
+    usePaginatedQuery: vi.fn(),
+}));
+
+vi.mock("@/app/auth/AuthProvider.jsx", () => ({
+    useAuth: () => ({ can: mocks.can }),
+}));
+
+vi.mock("@/shared/hooks/usePaginatedQuery.js", () => ({
+    usePaginatedQuery: mocks.usePaginatedQuery,
+}));
+
+vi.mock("@/shared/hooks/useRegionOptions.js", () => ({
+    useRegionOptions: () => ({ loadingRegions: false, regionOptions: [{ label: "全球", value: "0" }] }),
+}));
+
+vi.mock("@/shared/ui/ConfirmProvider.jsx", () => ({
+    useConfirm: () => vi.fn(),
+}));
+
+vi.mock("@/shared/ui/ToastProvider.jsx", () => ({
+    useToast: () => ({ showToast: mocks.showToast }),
+}));
+
+vi.mock("@/features/resources/api", async (importOriginal) => ({
+    ...(await importOriginal()),
+    batchCreateGifts: mocks.batchCreateGifts,
+    createGift: mocks.createGift,
+    listGifts: mocks.listGifts,
+    listGiftTypes: mocks.listGiftTypes,
+    listResources: mocks.listResources,
+}));
+
+beforeEach(() => {
+    mocks.can.mockReturnValue(true);
+    mocks.batchCreateGifts.mockResolvedValue([]);
+    mocks.createGift.mockResolvedValue({});
+    mocks.listGifts.mockResolvedValue({ items: [], page: 1, pageSize: 100, total: 0 });
+    mocks.listGiftTypes.mockResolvedValue([]);
+    mocks.listResources.mockResolvedValue({ items: [], page: 1, pageSize: 100, total: 0 });
+    mocks.reload.mockResolvedValue(undefined);
+    mocks.usePaginatedQuery.mockReturnValue({
+        data: { items: [], page: 1, pageSize: 50, total: 0 },
+        error: null,
+        loading: false,
+        reload: mocks.reload,
+    });
+});
+
+afterEach(() => {
+    vi.clearAllMocks();
+});
+
+test("creating multiple gift drafts calls the batch create endpoint once", async () => {
+    const { result } = renderHook(() => useGiftListPage());
+
+    await act(async () => {
+        result.current.openCreateGift();
+    });
+    await waitFor(() => expect(result.current.activeAction).toBe("create"));
+
+    await act(async () => {
+        result.current.setForm({
+            ...giftDraft({ giftId: "rose", name: "Rose", resourceId: "11" }),
+            items: [
+                giftDraft({ giftId: "rose", name: "Rose", resourceId: "11" }),
+                giftDraft({ giftId: "ring", name: "Ring", resourceId: "12" }),
+            ],
+            resourceId: "11",
+        });
+    });
+
+    await act(async () => {
+        await result.current.submitGift({ preventDefault: vi.fn() });
+    });
+
+    expect(mocks.batchCreateGifts).toHaveBeenCalledTimes(1);
+    expect(mocks.batchCreateGifts).toHaveBeenCalledWith([
+        expect.objectContaining({ giftId: "rose", name: "Rose", resourceId: 11 }),
+        expect.objectContaining({ giftId: "ring", name: "Ring", resourceId: 12 }),
+    ]);
+    expect(mocks.createGift).not.toHaveBeenCalled();
+    expect(mocks.reload).toHaveBeenCalledTimes(1);
+});
+
+function giftDraft(patch = {}) {
+    return {
+        chargeAssetType: "COIN",
+        coinPrice: "10",
+        cpRelationType: "",
+        effectTypes: ["animation"],
+        effectiveFrom: "",
+        effectiveTo: "",
+        enabled: true,
+        giftId: "gift",
+        giftTypeCode: "normal",
+        name: "Gift",
+        presentationJson: "{}",
+        priceVersion: "default",
+        regionIds: ["0"],
+        resourceId: "1",
+        sortOrder: "0",
+        ...patch,
+    };
+}

src/features/resources/hooks/useResourceListPageDelete.test.jsx

@@ -0,0 +1,158 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import { useResourceListPage } from "./useResourcePages.js";
+
+const mocks = vi.hoisted(() => ({
+    batchDeleteResources: vi.fn(),
+    can: vi.fn(),
+    confirm: vi.fn(),
+    deleteResource: vi.fn(),
+    reload: vi.fn(),
+    showToast: vi.fn(),
+    usePaginatedQuery: vi.fn(),
+}));
+
+vi.mock("@/app/auth/AuthProvider.jsx", () => ({
+    useAuth: () => ({ can: mocks.can }),
+}));
+
+vi.mock("@/shared/hooks/usePaginatedQuery.js", () => ({
+    usePaginatedQuery: mocks.usePaginatedQuery,
+}));
+
+vi.mock("@/shared/ui/ConfirmProvider.jsx", () => ({
+    useConfirm: () => mocks.confirm,
+}));
+
+vi.mock("@/shared/ui/ToastProvider.jsx", () => ({
+    useToast: () => ({ showToast: mocks.showToast }),
+}));
+
+vi.mock("@/features/resources/api", async (importOriginal) => ({
+    ...(await importOriginal()),
+    batchDeleteResources: mocks.batchDeleteResources,
+    deleteResource: mocks.deleteResource,
+}));
+
+beforeEach(() => {
+    mocks.can.mockReturnValue(true);
+    mocks.confirm.mockResolvedValue(true);
+    mocks.batchDeleteResources.mockResolvedValue([]);
+    mocks.deleteResource.mockResolvedValue({});
+    mocks.reload.mockResolvedValue(undefined);
+    mocks.usePaginatedQuery.mockReturnValue({
+        data: resourcePage(),
+        error: null,
+        loading: false,
+        reload: mocks.reload,
+    });
+});
+
+afterEach(() => {
+    vi.clearAllMocks();
+});
+
+test("deleting a resource hides only that row without reloading the list", async () => {
+    const { result } = renderHook(() => useResourceListPage());
+
+    let deletedResourceIds = [];
+    await act(async () => {
+        deletedResourceIds = await result.current.deleteResources([resourceFixture({ resourceId: 11 })]);
+    });
+
+    expect(deletedResourceIds).toEqual([11]);
+    expect(mocks.deleteResource).toHaveBeenCalledWith(11);
+    expect(mocks.reload).not.toHaveBeenCalled();
+    expect(result.current.data.items.map((resource) => resource.resourceId)).toEqual([12]);
+    expect(mocks.showToast).toHaveBeenCalledWith("资源已删除", "success");
+});
+
+test("batch resource delete hides successful rows without reloading the list", async () => {
+    const { result } = renderHook(() => useResourceListPage());
+
+    let deletedResourceIds = [];
+    await act(async () => {
+        deletedResourceIds = await result.current.deleteResources([
+            resourceFixture({ resourceId: 11 }),
+            resourceFixture({ resourceId: 12 }),
+        ]);
+    });
+
+    expect(deletedResourceIds).toEqual([11, 12]);
+    expect(mocks.batchDeleteResources).toHaveBeenCalledWith([11, 12]);
+    expect(mocks.deleteResource).not.toHaveBeenCalled();
+    expect(mocks.reload).not.toHaveBeenCalled();
+    expect(result.current.data.items).toEqual([]);
+    expect(mocks.showToast).toHaveBeenCalledWith("已删除 2 个资源", "success");
+});
+
+test("failed batch resource delete keeps all rows visible", async () => {
+    mocks.usePaginatedQuery.mockReturnValue({
+        data: {
+            items: [
+                resourceFixture({ resourceId: 11 }),
+                resourceFixture({ resourceId: 12 }),
+                resourceFixture({ resourceId: 13 }),
+            ],
+            page: 1,
+            pageSize: 50,
+            total: 3,
+        },
+        error: null,
+        loading: false,
+        reload: mocks.reload,
+    });
+    mocks.batchDeleteResources.mockRejectedValueOnce(new Error("delete failed"));
+    const { result } = renderHook(() => useResourceListPage());
+
+    let deletedResourceIds = [];
+    await act(async () => {
+        deletedResourceIds = await result.current.deleteResources([
+            resourceFixture({ resourceId: 11 }),
+            resourceFixture({ resourceId: 12 }),
+            resourceFixture({ resourceId: 13 }),
+        ]);
+    });
+
+    expect(deletedResourceIds).toEqual([]);
+    expect(mocks.batchDeleteResources).toHaveBeenCalledWith([11, 12, 13]);
+    expect(mocks.deleteResource).not.toHaveBeenCalled();
+    expect(result.current.data.items.map((resource) => resource.resourceId)).toEqual([11, 12, 13]);
+    expect(mocks.showToast).toHaveBeenCalledWith("delete failed", "error");
+});
+
+test("failed resource delete keeps the row visible", async () => {
+    mocks.deleteResource.mockRejectedValueOnce(new Error("delete failed"));
+    const { result } = renderHook(() => useResourceListPage());
+
+    let deletedResourceIds = [];
+    await act(async () => {
+        deletedResourceIds = await result.current.deleteResources([resourceFixture({ resourceId: 11 })]);
+    });
+
+    expect(deletedResourceIds).toEqual([]);
+    expect(mocks.reload).not.toHaveBeenCalled();
+    expect(result.current.data.items.map((resource) => resource.resourceId)).toEqual([11, 12]);
+    expect(mocks.showToast).toHaveBeenCalledWith("delete failed", "error");
+});
+
+function resourcePage() {
+    return {
+        items: [resourceFixture({ resourceId: 11, name: "Rose" }), resourceFixture({ resourceId: 12, name: "Ring" })],
+        page: 1,
+        pageSize: 50,
+        total: 2,
+    };
+}
+
+function resourceFixture(patch = {}) {
+    return {
+        coinPrice: 10,
+        name: "Rose",
+        resourceCode: "gift_rose",
+        resourceId: 11,
+        resourceType: "gift",
+        status: "active",
+        ...patch,
+    };
+}

src/features/resources/hooks/useResourcePages.js

@@ -6,11 +6,14 @@ import { useConfirm } from "@/shared/ui/ConfirmProvider.jsx";
 import { useToast } from "@/shared/ui/ToastProvider.jsx";
 import { emptyUserIdentityFilter, userIdentityFilterParams } from "@/shared/ui/userIdentityFilter.js";
 import {
+    batchCreateGifts,
+    batchDeleteResources as requestBatchDeleteResources,
     createEmojiPack,
     createGift,
     createResource,
     createResourceGroup,
     deleteGift as requestDeleteGift,
+    deleteResource as requestDeleteResource,
     disableResourceShopItem,
     disableGift,
     disableResource,
@@ -163,6 +166,7 @@ const emptyGiftForm = (gift = {}) => {
         priceVersion: gift.priceVersion || "default",
         regionIds: (gift.regionIds?.length ? gift.regionIds : [0]).map(String),
         resourceId: gift.resourceId ? String(gift.resourceId) : "",
+        items: [],
         sortOrder: gift.sortOrder === 0 || gift.sortOrder ? String(gift.sortOrder) : "0",
     };
 };
@@ -180,6 +184,52 @@ export function applyGiftResourceSelection(form, resource, fillIdentity = true)
     return applyGiftResourcePrice(nextForm, resource);
 }
 
+export function buildGiftResourceDrafts(form, resourceIds = [], resources = []) {
+    const resourcesById = new Map(resources.map((resource) => [String(resource.resourceId), resource]));
+    const existingDraftsByResourceId = new Map(
+        (form.items || [])
+            .filter((item) => item?.resourceId)
+            .map((item) => [String(item.resourceId), item]),
+    );
+
+    return resourceIds
+        .map((resourceId) => String(resourceId || "").trim())
+        .filter(Boolean)
+        .map((resourceId) => {
+            const existingDraft = existingDraftsByResourceId.get(resourceId);
+            if (existingDraft) {
+                return existingDraft;
+            }
+            const resource = resourcesById.get(resourceId) || { resourceId };
+            return {
+                ...applyGiftResourceSelection(giftDraftDefaultsFromForm(form), resource, true),
+                resource,
+            };
+        });
+}
+
+function giftDraftDefaultsFromForm(form) {
+    const giftTypeCode = form.giftTypeCode || "normal";
+    const cpRelationType = giftTypeCode === cpGiftTypeCode ? form.cpRelationType || defaultCPRelationType : "";
+    return {
+        chargeAssetType: form.chargeAssetType || "COIN",
+        coinPrice: "",
+        cpRelationType,
+        effectTypes: form.effectTypes || [],
+        effectiveFrom: form.effectiveFrom || "",
+        effectiveTo: form.effectiveTo || "",
+        enabled: form.enabled !== false,
+        giftId: "",
+        giftTypeCode,
+        name: "",
+        presentationJson: normalizeGiftPresentationJson(form.presentationJson || "{}", giftTypeCode, cpRelationType),
+        priceVersion: form.priceVersion || "default",
+        regionIds: form.regionIds?.length ? form.regionIds : ["0"],
+        resourceId: "",
+        sortOrder: form.sortOrder || "0",
+    };
+}
+
 export function applyGiftPriceDefaults(form, coinPrice) {
     const priceValue = String(coinPrice ?? "");
     return {
@@ -234,12 +284,12 @@ export function normalizeGiftPresentationJson(presentationJson, giftTypeCode, cp
     return isCPGift ? cpPresentationJson(nextPresentation, cpRelationType) : JSON.stringify(nextPresentation);
 }
 
-export async function fetchAllOptionPages(fetcher, query = {}, pageSize = optionPageSize) {
+export async function fetchAllOptionPages(fetcher, query = {}, pageSize = optionPageSize, maxPages = optionMaxPages) {
     const items = [];
     let total = Number.POSITIVE_INFINITY;
 
     // 后台会把选项接口的 page_size 截断到 100；抽屉候选项必须按真实分页拉全，避免只展示第一页资源。
-    for (let page = 1; page <= optionMaxPages; page += 1) {
+    for (let page = 1; page <= maxPages; page += 1) {
         const data = await fetcher({ ...query, page, page_size: pageSize });
         const pageItems = Array.isArray(data?.items) ? data.items : [];
         const responsePageSize = Number(data?.pageSize || data?.page_size || pageSize) || pageSize;
@@ -344,6 +394,7 @@ function groupItemToForm(item) {
 
 export function useResourceListPage() {
     const abilities = useResourceAbilities();
+    const confirm = useConfirm();
     const { showToast } = useToast();
     const [query, setQuery] = useState("");
     const [status, setStatus] = useState("");
@@ -353,6 +404,8 @@ export function useResourceListPage() {
     const [form, setForm] = useState(emptyResourceForm);
     const [selectedResource, setSelectedResource] = useState(null);
     const [loadingAction, setLoadingAction] = useState("");
+    const [resourceRowPatches, setResourceRowPatches] = useState({});
+    const [hiddenResourceIds, setHiddenResourceIds] = useState([]);
     const filters = useMemo(
         () => ({
             keyword: query,
@@ -369,6 +422,61 @@ export function useResourceListPage() {
         pageSize,
         queryKey: ["resources", filters, page],
     });
+    const hiddenResourceIdSet = useMemo(() => new Set(hiddenResourceIds), [hiddenResourceIds]);
+    const resourceData = useMemo(() => {
+        const source = result.data || emptyData;
+        const sourceItems = Array.isArray(source.items) ? source.items : [];
+        const patchedItems = sourceItems
+            .map((item) => ({
+                ...item,
+                ...(resourceRowPatches[item.resourceId] || {}),
+            }))
+            .filter((item) => !hiddenResourceIdSet.has(item.resourceId));
+        return {
+            ...source,
+            items: patchedItems,
+        };
+    }, [hiddenResourceIdSet, resourceRowPatches, result.data]);
+
+    useEffect(() => {
+        setResourceRowPatches({});
+        setHiddenResourceIds([]);
+    }, [filters]);
+
+    const patchResourceRow = (resourceId, patch) => {
+        if (!resourceId) {
+            return;
+        }
+        setHiddenResourceIds((current) => current.filter((hiddenId) => hiddenId !== resourceId));
+        setResourceRowPatches((current) => ({
+            ...current,
+            [resourceId]: {
+                ...(current[resourceId] || {}),
+                ...patch,
+            },
+        }));
+    };
+
+    const hideResourceRow = (resourceId) => {
+        if (!resourceId) {
+            return;
+        }
+        setHiddenResourceIds((current) => (current.includes(resourceId) ? current : [...current, resourceId]));
+    };
+
+    const hideResourceRows = (resourceIds) => {
+        const nextIds = resourceIds.filter(Boolean);
+        if (!nextIds.length) {
+            return;
+        }
+        setHiddenResourceIds((current) => Array.from(new Set([...current, ...nextIds])));
+    };
+
+    const reloadResources = async () => {
+        setResourceRowPatches({});
+        setHiddenResourceIds([]);
+        return result.reload();
+    };
 
     const openCreateResource = () => {
         setForm(emptyResourceForm());
@@ -422,12 +530,21 @@ export function useResourceListPage() {
             `resource-status-${resource.resourceId}`,
             nextEnabled ? "资源已启用" : "资源已禁用",
             async () => {
+                let updatedResource;
                 if (nextStatus === "active") {
-                    await enableResource(resource.resourceId);
+                    updatedResource = await enableResource(resource.resourceId);
                 } else {
-                    await disableResource(resource.resourceId);
+                    updatedResource = await disableResource(resource.resourceId);
+                }
+                if (status && nextStatus !== status) {
+                    hideResourceRow(resource.resourceId);
+                } else {
+                    patchResourceRow(resource.resourceId, {
+                        ...(updatedResource || {}),
+                        status: updatedResource?.status || nextStatus,
+                        updatedAtMs: updatedResource?.updatedAtMs ?? Date.now(),
+                    });
                 }
-                await result.reload();
             },
         );
     };
@@ -447,12 +564,59 @@ export function useResourceListPage() {
                     ...emptyResourceForm(resource),
                     managerGrantEnabled: nextEnabled,
                 });
-                await updateResource(resource.resourceId, buildResourcePayload(formValue));
-                await result.reload();
+                const updatedResource = await updateResource(resource.resourceId, buildResourcePayload(formValue));
+                patchResourceRow(resource.resourceId, {
+                    ...(updatedResource || {}),
+                    managerGrantEnabled: updatedResource?.managerGrantEnabled ?? nextEnabled,
+                    updatedAtMs: updatedResource?.updatedAtMs ?? Date.now(),
+                });
             },
         );
     };
 
+    const deleteResources = async (resources = []) => {
+        const targetResources = resources.filter((resource) => resource?.resourceId);
+        if (!abilities.canDelete || !targetResources.length) {
+            return [];
+        }
+        const title = targetResources.length > 1 ? "批量删除资源" : "删除资源";
+        const message =
+            targetResources.length > 1
+                ? `确认删除选中的 ${targetResources.length} 个资源？删除成功后资源会从资源列表移除。`
+                : `确认删除资源 ${targetResources[0].name || targetResources[0].resourceCode || targetResources[0].resourceId}？删除成功后资源会从资源列表移除。`;
+        const ok = await confirm({
+            confirmText: "删除",
+            message,
+            title,
+            tone: "danger",
+        });
+        if (!ok) {
+            return [];
+        }
+
+        const deletedResourceIds = [];
+        setLoadingAction(
+            targetResources.length > 1 ? "resource-delete-batch" : `resource-delete-${targetResources[0].resourceId}`,
+        );
+        try {
+            if (targetResources.length > 1) {
+                await requestBatchDeleteResources(targetResources.map((resource) => resource.resourceId));
+                deletedResourceIds.push(...targetResources.map((resource) => resource.resourceId));
+            } else {
+                await requestDeleteResource(targetResources[0].resourceId);
+                deletedResourceIds.push(targetResources[0].resourceId);
+            }
+            hideResourceRows(deletedResourceIds);
+            showToast(targetResources.length > 1 ? `已删除 ${deletedResourceIds.length} 个资源` : "资源已删除", "success");
+            return deletedResourceIds;
+        } catch (err) {
+            showToast(err.message || "删除资源失败", "error");
+            return [];
+        } finally {
+            setLoadingAction("");
+        }
+    };
+
     const runAction = async (action, successMessage, submitter) => {
         setLoadingAction(action);
         try {
@@ -473,12 +637,13 @@ export function useResourceListPage() {
     };
 
     return {
-        ...sharedPageState({ page, query, result, setPage, setQuery }),
+        ...sharedPageState({ data: resourceData, page, query, reload: reloadResources, result, setPage, setQuery }),
         abilities,
         activeAction,
         changeResourceType: resetSetter(setResourceType, setPage),
         changeStatus: resetSetter(setStatus, setPage),
         closeAction,
+        deleteResources,
         form,
         loadingAction,
         openCreateResource,
@@ -1049,6 +1214,8 @@ export function useGiftListPage() {
     const [giftTypeDialogOpen, setGiftTypeDialogOpen] = useState(false);
     const [giftTypesLoading, setGiftTypesLoading] = useState(false);
     const [resourceOptions, setResourceOptions] = useState([]);
+    const [giftResourceGiftOptions, setGiftResourceGiftOptions] = useState([]);
+    const [existingGiftResourceIds, setExistingGiftResourceIds] = useState([]);
     const [resourceOptionsLoading, setResourceOptionsLoading] = useState(false);
     const { loadingRegions, regionOptions } = useRegionOptions();
     const filters = useMemo(
@@ -1113,10 +1280,25 @@ export function useGiftListPage() {
         }
         let ignore = false;
         setResourceOptionsLoading(true);
-        fetchAllOptionPages(listResources, { resource_type: "gift" })
-            .then((data) => {
+        const optionRequests =
+            activeAction === "create"
+                ? [
+                      fetchAllOptionPages(listResources, { resource_type: "gift" }),
+                      fetchAllOptionPages(listGifts, {}, optionPageSize, 1000),
+                  ]
+                : [fetchAllOptionPages(listResources, { resource_type: "gift" }), Promise.resolve({ items: [] })];
+        Promise.all(optionRequests)
+            .then(([resourceData, giftOptionsData]) => {
                 if (!ignore) {
-                    setResourceOptions(toGiftResourceOptions(data.items || [], selectedGift));
+                    const giftOptions = giftOptionsData.items || [];
+                    setGiftResourceGiftOptions(giftOptions);
+                    setExistingGiftResourceIds(
+                        giftOptions
+                            .map((gift) => gift?.resourceId)
+                            .filter((resourceId) => resourceId || resourceId === 0)
+                            .map(String),
+                    );
+                    setResourceOptions(toGiftResourceOptions(resourceData.items || [], selectedGift));
                 }
             })
             .catch((err) => {
@@ -1165,6 +1347,66 @@ export function useGiftListPage() {
         });
     };
 
+    const selectGiftResources = (resourceIds) => {
+        setForm((currentForm) => {
+            const items = buildGiftResourceDrafts(currentForm, resourceIds, resourceOptions);
+            return {
+                ...currentForm,
+                items,
+                resourceId: items[0]?.resourceId || "",
+            };
+        });
+    };
+
+    const updateGiftDraft = (resourceId, patch) => {
+        setForm((currentForm) => ({
+            ...currentForm,
+            items: (currentForm.items || []).map((item) => {
+                if (String(item.resourceId) !== String(resourceId)) {
+                    return item;
+                }
+                const nextItem = { ...item, ...patch };
+                if (Object.prototype.hasOwnProperty.call(patch, "giftTypeCode")) {
+                    const cpRelationType =
+                        nextItem.giftTypeCode === cpGiftTypeCode
+                            ? nextItem.cpRelationType || defaultCPRelationType
+                            : "";
+                    return {
+                        ...nextItem,
+                        cpRelationType,
+                        presentationJson: normalizeGiftPresentationJson(
+                            nextItem.presentationJson,
+                            nextItem.giftTypeCode,
+                            cpRelationType,
+                        ),
+                    };
+                }
+                if (Object.prototype.hasOwnProperty.call(patch, "cpRelationType")) {
+                    return {
+                        ...nextItem,
+                        presentationJson: normalizeGiftPresentationJson(
+                            nextItem.presentationJson,
+                            nextItem.giftTypeCode,
+                            nextItem.cpRelationType,
+                        ),
+                    };
+                }
+                return nextItem;
+            }),
+        }));
+    };
+
+    const removeGiftDraft = (resourceId) => {
+        setForm((currentForm) => {
+            const items = (currentForm.items || []).filter((item) => String(item.resourceId) !== String(resourceId));
+            return {
+                ...currentForm,
+                items,
+                resourceId: items[0]?.resourceId || "",
+            };
+        });
+    };
+
     const changeGiftPrice = (coinPrice) => {
         setForm((currentForm) => applyGiftPriceDefaults(currentForm, coinPrice));
     };
@@ -1249,21 +1491,58 @@ export function useGiftListPage() {
             return;
         }
         setLoadingAction(editing ? "gift-edit" : "gift-create");
+        const createdDrafts = [];
+        let shouldReload = false;
         try {
-            const payload = buildGiftPayload(parseForm(giftFormSchema, form));
+            const createDrafts = !editing && Array.isArray(form.items) && form.items.length ? form.items : [form];
             if (editing) {
+                const payload = buildGiftPayload(parseForm(giftFormSchema, form));
                 await updateGift(selectedGift.giftId, payload);
             } else {
-                await createGift(payload);
+                const payloads = createDrafts.map((draft) => ({
+                    draft,
+                    payload: buildGiftPayload(parseForm(giftFormSchema, draft)),
+                }));
+                if (payloads.length > 1) {
+                    await batchCreateGifts(payloads.map(({ payload }) => payload));
+                    createdDrafts.push(...payloads.map(({ draft }) => draft));
+                } else {
+                    await createGift(payloads[0].payload);
+                    createdDrafts.push(payloads[0].draft);
+                }
             }
-            showToast(editing ? "礼物已更新" : "礼物已创建", "success");
+            showToast(editing ? "礼物已更新" : `已创建 ${createDrafts.length} 个礼物`, "success");
             closeAction();
-            await result.reload();
+            shouldReload = true;
         } catch (err) {
-            showToast(err.message || "操作失败", "error");
+            if (!editing && createdDrafts.length) {
+                const createdResourceIds = new Set(createdDrafts.map((draft) => String(draft.resourceId)));
+                setExistingGiftResourceIds((current) => Array.from(new Set([...current, ...createdResourceIds])));
+                setForm((currentForm) => {
+                    const items = (currentForm.items || []).filter(
+                        (item) => !createdResourceIds.has(String(item.resourceId)),
+                    );
+                    return {
+                        ...currentForm,
+                        items,
+                        resourceId: items[0]?.resourceId || "",
+                    };
+                });
+                shouldReload = true;
+                showToast(`已创建 ${createdDrafts.length} 个礼物，剩余礼物创建失败：${err.message || "操作失败"}`, "error");
+            } else {
+                showToast(err.message || "操作失败", "error");
+            }
         } finally {
             setLoadingAction("");
         }
+        if (shouldReload) {
+            try {
+                await result.reload();
+            } catch (err) {
+                showToast(err.message || "刷新礼物列表失败", "error");
+            }
+        }
     };
 
     const toggleGift = async (gift, nextEnabled = gift.status !== "active") => {
@@ -1389,6 +1668,8 @@ export function useGiftListPage() {
         giftTypeForm,
         giftTypeOptions: giftTypes,
         giftTypesLoading,
+        giftResourceGiftOptions,
+        existingGiftResourceIds,
         loadingAction,
         loadingRegions,
         openCreateGift,
@@ -1401,12 +1682,15 @@ export function useGiftListPage() {
         selectedGift,
         resetFilters,
         selectGiftResource,
+        selectGiftResources,
+        removeGiftDraft,
         setForm,
         saveGiftSortOrder,
         submitGiftTypes,
         status,
         submitGift,
         toggleGift,
+        updateGiftDraft,
         updateGiftTypeFormItem,
     };
 }
@@ -1660,13 +1944,14 @@ export function useResourceGrantListPage() {
             !abilities.canRevokeGrant ||
             !grant?.grantId ||
             grant.status !== "succeeded" ||
-            grant.grantSubjectType !== "resource_group"
+            !isRevocableGrantSubject(grant.grantSubjectType)
         ) {
             return;
         }
         const accepted = await confirm({
-            title: "撤销资源组赠送",
-            message: "撤销后会扣回金币并移除资源组内装扮。该操作不可自动恢复。",
+            title: "撤销资源赠送",
+            message:
+                "撤销后会按原发放内容扣回资源：素材扣减对应有效天数，金币扣减对应数量，最低扣至 0。该操作不可自动恢复。",
             confirmText: "撤销",
             tone: "danger",
         });
@@ -1676,7 +1961,7 @@ export function useResourceGrantListPage() {
         setLoadingAction(`grant-revoke-${grant.grantId}`);
         try {
             await revokeResourceGrant(grant.grantId);
-            showToast("资源组赠送已撤销", "success");
+            showToast("资源赠送已撤销", "success");
             await result.reload();
         } catch (err) {
             showToast(err.message || "撤销失败", "error");
@@ -1720,14 +2005,14 @@ export function useResourceGrantListPage() {
     };
 }
 
-function sharedPageState({ page, query, result, setPage, setQuery }) {
+function sharedPageState({ data, page, query, reload, result, setPage, setQuery }) {
     return {
-        data: result.data || emptyData,
+        data: data || result.data || emptyData,
         error: result.error,
         loading: result.loading,
         page,
         query,
-        reload: result.reload,
+        reload: reload || result.reload,
         setPage,
         changeQuery: resetSetter(setQuery, setPage),
     };
@@ -2081,6 +2366,10 @@ function grantResourceIds(form) {
     return form.resourceId ? [form.resourceId] : [];
 }
 
+function isRevocableGrantSubject(subjectType) {
+    return subjectType === "resource" || subjectType === "resource_group";
+}
+
 function makeCommandId(prefix) {
     return `${prefix}-${Date.now()}`;
 }

src/features/resources/hooks/useResourcePages.test.js

@@ -2,6 +2,7 @@ import { expect, test, vi } from "vitest";
 import {
     applyGiftPriceDefaults,
     applyGiftResourceSelection,
+    buildGiftResourceDrafts,
     cpRelationTypeFromGift,
     cpRelationTypeFromPresentationJson,
     cpRelationTypeShortLabel,
@@ -47,6 +48,76 @@ test("fills gift price without gift points", () => {
     });
 });
 
+test("builds gift drafts from multiple selected resources and preserves edits", () => {
+    const form = {
+        chargeAssetType: "COIN",
+        cpRelationType: "",
+        effectTypes: ["animation"],
+        effectiveFrom: "",
+        effectiveTo: "",
+        enabled: true,
+        giftTypeCode: "normal",
+        items: [
+            {
+                chargeAssetType: "COIN",
+                coinPrice: "88",
+                effectTypes: [],
+                effectiveFrom: "",
+                effectiveTo: "",
+                enabled: false,
+                giftId: "custom_rose",
+                giftTypeCode: "normal",
+                name: "Custom Rose",
+                presentationJson: "{}",
+                priceVersion: "default",
+                regionIds: ["0"],
+                resourceId: "11",
+                sortOrder: "7",
+            },
+        ],
+        presentationJson: "{}",
+        priceVersion: "default",
+        regionIds: ["0", "1001"],
+        sortOrder: "3",
+    };
+
+    const drafts = buildGiftResourceDrafts(form, ["11", "12"], [
+        {
+            coinPrice: 10,
+            name: "Rose",
+            priceType: "coin",
+            resourceCode: "gift_rose",
+            resourceId: 11,
+        },
+        {
+            coinPrice: 20,
+            name: "Ring",
+            priceType: "coin",
+            resourceCode: "gift_ring",
+            resourceId: 12,
+        },
+    ]);
+
+    expect(drafts).toHaveLength(2);
+    expect(drafts[0]).toMatchObject({
+        coinPrice: "88",
+        giftId: "custom_rose",
+        name: "Custom Rose",
+        resourceId: "11",
+        sortOrder: "7",
+    });
+    expect(drafts[1]).toMatchObject({
+        coinPrice: "20",
+        effectTypes: ["animation"],
+        giftId: "12",
+        giftTypeCode: "normal",
+        name: "Ring",
+        regionIds: ["0", "1001"],
+        resourceId: "12",
+        sortOrder: "3",
+    });
+});
+
 test("fetches all option pages instead of only the first resource page", async () => {
     const fetcher = vi
         .fn()

src/features/resources/mp4AlphaLayout.js

@@ -21,6 +21,9 @@ const videoFrameStepSeconds = 1 / 24;
 const maxSeekFrameCount = 360;
 const videoLoadTimeoutMs = 8000;
 const videoSeekTimeoutMs = 5000;
+const mp4BoxHeaderSize = 8;
+const mp4LargeBoxHeaderSize = 16;
+const vapcMarkerBytes = [118, 97, 112, 99];
 
 export function isMp4File(file) {
     if (!file?.name) {
@@ -170,6 +173,10 @@ export async function detectMp4AlphaLayout(file) {
     if (!isMp4File(file)) {
         throw new Error("请选择 MP4 动效素材");
     }
+    const vapcLayout = await detectVapcMp4AlphaLayout(file);
+    if (vapcLayout) {
+        return vapcLayout;
+    }
     const frames = await readVideoFrames(file);
     if (!frames.length) {
         const info = await readMp4VideoInfo(file);
@@ -183,6 +190,44 @@ export async function detectMp4AlphaLayout(file) {
     return detectMp4AlphaLayoutFromFrames(frames);
 }
 
+async function detectVapcMp4AlphaLayout(file) {
+    const info = await parseVapcInfo(file).catch(() => null);
+    if (!info || typeof info !== "object") {
+        return null;
+    }
+    return createMp4AlphaLayout({
+        alphaLayout: "custom",
+        alphaFrame: info.aFrame ?? info.a_frame,
+        confirmed: false,
+        confidence: 0.99,
+        rgbFrame: info.rgbFrame ?? info.rgb_frame,
+        videoH: info.videoH ?? info.video_height,
+        videoW: info.videoW ?? info.video_width,
+    });
+}
+
+async function parseVapcInfo(file) {
+    if (!file?.arrayBuffer) {
+        return null;
+    }
+    const bytes = new Uint8Array(await file.arrayBuffer());
+    const boxPayload = findMp4BoxPayload(bytes, vapcMarkerBytes);
+    return boxPayload ? parseVapcJsonPayload(boxPayload, 0, boxPayload.length) : null;
+}
+
+function parseVapcJsonPayload(bytes, start, end) {
+    const jsonStart = findByte(bytes, 123, start, end);
+    if (jsonStart < 0) {
+        return null;
+    }
+    const jsonEnd = findJsonObjectEnd(bytes, jsonStart, end);
+    if (jsonEnd <= jsonStart) {
+        return null;
+    }
+    const payload = JSON.parse(new TextDecoder().decode(bytes.slice(jsonStart, jsonEnd + 1)));
+    return payload?.info || null;
+}
+
 export async function mp4FileFromSource(source) {
     const normalizedSource = String(source || "").trim();
     if (!isMp4Source(normalizedSource)) {
@@ -353,6 +398,90 @@ function parseFrameText(value) {
     return values.length >= 4 && values.every(Number.isFinite) ? values.slice(0, 4) : null;
 }
 
+function findMp4BoxPayload(bytes, boxType) {
+    let offset = 0;
+    while (offset + mp4BoxHeaderSize <= bytes.length) {
+        const size = readUint32(bytes, offset);
+        const headerSize = size === 1 ? mp4LargeBoxHeaderSize : mp4BoxHeaderSize;
+        if (offset + headerSize > bytes.length) {
+            return null;
+        }
+        const boxEnd = size === 0 ? bytes.length : offset + (size === 1 ? readUint64(bytes, offset + 8) : size);
+        if (boxEnd < offset + headerSize || boxEnd > bytes.length) {
+            return null;
+        }
+        if (bytesMatchAt(bytes, boxType, offset + 4)) {
+            return bytes.slice(offset + headerSize, boxEnd);
+        }
+        offset = boxEnd;
+    }
+    return null;
+}
+
+function bytesMatchAt(bytes, pattern, offset) {
+    if (!bytes?.length || !pattern?.length || offset < 0 || offset + pattern.length > bytes.length) {
+        return false;
+    }
+    for (let index = 0; index < pattern.length; index += 1) {
+        if (bytes[offset + index] !== pattern[index]) {
+            return false;
+        }
+    }
+    return true;
+}
+
+function readUint32(bytes, offset) {
+    return bytes[offset] * 2 ** 24 + bytes[offset + 1] * 2 ** 16 + bytes[offset + 2] * 2 ** 8 + bytes[offset + 3];
+}
+
+function readUint64(bytes, offset) {
+    const value = readUint32(bytes, offset) * 2 ** 32 + readUint32(bytes, offset + 4);
+    return Number.isSafeInteger(value) ? value : 0;
+}
+
+function findByte(bytes, target, start, end) {
+    for (let index = Math.max(0, start); index < Math.min(bytes.length, end); index += 1) {
+        if (bytes[index] === target) {
+            return index;
+        }
+    }
+    return -1;
+}
+
+function findJsonObjectEnd(bytes, start, end) {
+    let depth = 0;
+    let inString = false;
+    let escaping = false;
+    for (let index = start; index < Math.min(bytes.length, end); index += 1) {
+        const byte = bytes[index];
+        if (inString) {
+            if (escaping) {
+                escaping = false;
+            } else if (byte === 92) {
+                escaping = true;
+            } else if (byte === 34) {
+                inString = false;
+            }
+            continue;
+        }
+        if (byte === 34) {
+            inString = true;
+            continue;
+        }
+        if (byte === 123) {
+            depth += 1;
+            continue;
+        }
+        if (byte === 125) {
+            depth -= 1;
+            if (depth === 0) {
+                return index;
+            }
+        }
+    }
+    return -1;
+}
+
 function filenameFromSource(source) {
     try {
         const url = new URL(source, "https://admin.local");

src/features/resources/mp4AlphaLayout.test.js

@@ -2,6 +2,7 @@ import { afterEach, describe, expect, test, vi } from "vitest";
 import {
     confirmMp4AlphaLayoutMetadata,
     createMp4AlphaLayout,
+    detectMp4AlphaLayout,
     detectMp4AlphaLayoutFromFrames,
     isMp4Source,
     mp4AlphaLayoutFromMetadata,
@@ -158,8 +159,154 @@ describe("mp4 alpha layout metadata", () => {
             video_w: 1500,
         });
     });
+
+    test("uses VAPC payload info as a custom transparent MP4 layout", async () => {
+        const createElementSpy = vi.spyOn(document, "createElement").mockImplementation((tagName, options) => {
+            if (String(tagName).toLowerCase() === "video") {
+                throw new Error("VAPC payload should be parsed without decoding video frames");
+            }
+            return Document.prototype.createElement.call(document, tagName, options);
+        });
+        const file = buildVapcMp4File({
+            info: {
+                aFrame: [724, 0, 360, 780],
+                rgbFrame: [0, 0, 720, 1560],
+                videoH: 1568,
+                videoW: 1088,
+            },
+        });
+
+        try {
+            const layout = await detectMp4AlphaLayout(file);
+
+            expect(layout?.alpha_layout).not.toBe("normal");
+            expect(layout).toMatchObject({
+                alpha_frame: [724, 0, 360, 780],
+                alpha_layout: "custom",
+                rgb_frame: [0, 0, 720, 1560],
+                video_h: 1568,
+                video_w: 1088,
+            });
+        } finally {
+            createElementSpy.mockRestore();
+        }
+    });
+
+    test("ignores VAPC-looking bytes outside a real MP4 box and falls back to frame detection", async () => {
+        const restoreMockVideo = mockVideoFrameRead({ height: 30, width: 20 });
+        const file = buildMdatWithVapcBytesFile({
+            info: {
+                aFrame: [724, 0, 360, 780],
+                rgbFrame: [0, 0, 720, 1560],
+                videoH: 1568,
+                videoW: 1088,
+            },
+        });
+
+        try {
+            const layout = await detectMp4AlphaLayout(file);
+
+            expect(layout).toMatchObject({
+                alpha_frame: null,
+                alpha_layout: "normal",
+                rgb_frame: [0, 0, 20, 30],
+                video_h: 30,
+                video_w: 20,
+            });
+        } finally {
+            restoreMockVideo();
+        }
+    });
 });
 
+function buildVapcMp4File(payload) {
+    return new File(
+        [
+            mp4Box("ftyp", new Uint8Array([105, 115, 111, 109, 0, 0, 0, 1, 105, 115, 111, 109])),
+            mp4Box("vapc", new TextEncoder().encode(JSON.stringify(payload))),
+        ],
+        "vapc-layout.mp4",
+        { type: "video/mp4" },
+    );
+}
+
+function buildMdatWithVapcBytesFile(payload) {
+    return new File(
+        [
+            mp4Box("ftyp", new Uint8Array([105, 115, 111, 109, 0, 0, 0, 1, 105, 115, 111, 109])),
+            mp4Box("mdat", new TextEncoder().encode(`frame bytes vapc ${JSON.stringify(payload)}`)),
+        ],
+        "ordinary-with-vapc-bytes.mp4",
+        { type: "video/mp4" },
+    );
+}
+
+function mp4Box(type, payload) {
+    const bytes = new Uint8Array(8 + payload.length);
+    const view = new DataView(bytes.buffer);
+    view.setUint32(0, bytes.length);
+    for (let index = 0; index < 4; index += 1) {
+        bytes[index + 4] = type.charCodeAt(index);
+    }
+    bytes.set(payload, 8);
+    return bytes;
+}
+
+function mockVideoFrameRead({ width, height }) {
+    const originalCreateElement = document.createElement.bind(document);
+    const createElementSpy = vi.spyOn(document, "createElement").mockImplementation((tagName, options) => {
+        const normalizedTag = String(tagName).toLowerCase();
+        if (normalizedTag === "video") {
+            return mockVideoElement({ height, width });
+        }
+        if (normalizedTag === "canvas") {
+            const canvas = originalCreateElement(tagName, options);
+            canvas.getContext = vi.fn(() => ({
+                drawImage: vi.fn(),
+                getImageData: vi.fn((left, top, canvasWidth, canvasHeight) => ({
+                    data: new Uint8ClampedArray(canvasWidth * canvasHeight * 4),
+                    height: canvasHeight,
+                    width: canvasWidth,
+                })),
+            }));
+            return canvas;
+        }
+        return originalCreateElement(tagName, options);
+    });
+    vi.stubGlobal("URL", {
+        createObjectURL: vi.fn(() => "blob:mock-video"),
+        revokeObjectURL: vi.fn(),
+    });
+    return () => {
+        createElementSpy.mockRestore();
+        vi.unstubAllGlobals();
+    };
+}
+
+function mockVideoElement({ width, height }) {
+    return {
+        currentTime: 0,
+        duration: 0,
+        load: vi.fn(),
+        muted: false,
+        onerror: null,
+        playsInline: false,
+        preload: "",
+        readyState: 2,
+        removeAttribute: vi.fn(),
+        src: "",
+        videoHeight: height,
+        videoWidth: width,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        set onloadedmetadata(handler) {
+            if (typeof handler === "function") {
+                queueMicrotask(handler);
+            }
+        },
+    };
+}
+
 function buildSyntheticFrame(width, height, { alphaFrame, rgbFrame }) {
     const data = new Uint8ClampedArray(width * height * 4);
     fillRect(data, width, [0, 0, width, height], [32, 32, 32]);

src/features/resources/pages/GiftListPage.jsx

@@ -43,6 +43,7 @@ import {
     resourceStatusFilters,
 } from "@/features/resources/constants.js";
 import { GiftTypeConfigDialog } from "@/features/resources/components/GiftTypeConfigDialog.jsx";
+import { GiftResourceSelectField } from "@/features/resources/components/GiftResourceSelectDrawer.jsx";
 import { ResourceSelectField } from "@/features/resources/components/ResourceSelectDrawer.jsx";
 import {
     cpRelationTypeFromGift,
@@ -137,7 +138,7 @@ const baseColumns = (giftTypeOptions) => [
 
 export function GiftListPage() {
     const page = useGiftListPage();
-    const items = page.data.items || [];
+    const items = useMemo(() => page.data.items || [], [page.data.items]);
     const total = page.data.total || 0;
     const [selectedGiftIds, setSelectedGiftIds] = useState([]);
     const isEditing = page.activeAction === "edit";
@@ -419,7 +420,14 @@ function GiftSortOrderCell({ gift, page }) {
 function GiftFormDialog({ disabled, form, loading, mode, onClose, onSubmit, open, page, regionOptions }) {
     const submitDisabled =
         disabled || loading || page.resourceOptionsLoading || page.loadingRegions || page.giftTypesLoading;
-    const showGiftIdentityFields = mode === "edit" || Boolean(form.resourceId);
+    const isCreateMode = mode === "create";
+    const giftDrafts = Array.isArray(form.items) ? form.items : [];
+    const selectedResourceIds = isCreateMode
+        ? giftDrafts.map((item) => item.resourceId).filter(Boolean)
+        : form.resourceId
+          ? [form.resourceId]
+          : [];
+    const showGiftIdentityFields = mode === "edit" && Boolean(form.resourceId);
     const isCPGiftType = form.giftTypeCode === "cp";
     return (
         <AdminFormDialog
@@ -433,15 +441,30 @@ function GiftFormDialog({ disabled, form, loading, mode, onClose, onSubmit, open
         >
             <AdminFormSection title="资源信息">
                 <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
-                    <ResourceSelectField
-                        disabled={disabled || page.resourceOptionsLoading}
-                        drawerTitle="选择礼物资源"
-                        label="礼物资源"
-                        loading={page.resourceOptionsLoading}
-                        resources={page.resourceOptions}
-                        value={form.resourceId}
-                        onChange={(resourceId) => page.selectGiftResource(resourceId)}
-                    />
+                    {isCreateMode ? (
+                        <GiftResourceSelectField
+                            disabled={disabled || page.resourceOptionsLoading}
+                            drawerTitle="选择礼物资源"
+                            excludedResourceIds={page.existingGiftResourceIds}
+                            giftTypes={page.giftTypeOptions}
+                            gifts={page.giftResourceGiftOptions}
+                            label="礼物资源"
+                            loading={page.resourceOptionsLoading}
+                            resources={page.resourceOptions}
+                            selectedResourceIds={selectedResourceIds}
+                            onChange={page.selectGiftResources}
+                        />
+                    ) : (
+                        <ResourceSelectField
+                            disabled={disabled || page.resourceOptionsLoading}
+                            drawerTitle="选择礼物资源"
+                            label="礼物资源"
+                            loading={page.resourceOptionsLoading}
+                            resources={page.resourceOptions}
+                            value={form.resourceId}
+                            onChange={(resourceId) => page.selectGiftResource(resourceId)}
+                        />
+                    )}
                     {showGiftIdentityFields ? (
                         <>
                             <TextField
@@ -460,21 +483,23 @@ function GiftFormDialog({ disabled, form, loading, mode, onClose, onSubmit, open
                             />
                         </>
                     ) : null}
-                    <TextField
-                        disabled={disabled || page.giftTypesLoading}
-                        label="礼物类型"
-                        required
-                        select
-                        value={form.giftTypeCode}
-                        onChange={(event) => page.changeGiftFormTypeCode(event.target.value)}
-                    >
-                        {page.giftTypeOptions.map((item) => (
-                            <MenuItem key={item.tabKey} value={item.tabKey}>
-                                {item.displayName || item.tabKey}
-                            </MenuItem>
-                        ))}
-                    </TextField>
-                    {isCPGiftType ? (
+                    {!isCreateMode ? (
+                        <TextField
+                            disabled={disabled || page.giftTypesLoading}
+                            label="礼物类型"
+                            required
+                            select
+                            value={form.giftTypeCode}
+                            onChange={(event) => page.changeGiftFormTypeCode(event.target.value)}
+                        >
+                            {page.giftTypeOptions.map((item) => (
+                                <MenuItem key={item.tabKey} value={item.tabKey}>
+                                    {item.displayName || item.tabKey}
+                                </MenuItem>
+                            ))}
+                        </TextField>
+                    ) : null}
+                    {!isCreateMode && isCPGiftType ? (
                         <TextField
                             disabled={disabled}
                             label="关系类型"
@@ -492,56 +517,216 @@ function GiftFormDialog({ disabled, form, loading, mode, onClose, onSubmit, open
                     ) : null}
                 </AdminFormFieldGrid>
             </AdminFormSection>
-            <AdminFormSection title="价格与排序">
-                <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
-                    <TextField disabled label="价格" required type="number" value={form.coinPrice} />
+            {isCreateMode ? (
+                <GiftDraftSection
+                    disabled={disabled}
+                    drafts={giftDrafts}
+                    page={page}
+                    regionOptions={regionOptions}
+                />
+            ) : (
+                <>
+                    <AdminFormSection title="价格与排序">
+                        <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
+                            <TextField disabled label="价格" required type="number" value={form.coinPrice} />
+                            <TextField
+                                disabled={disabled}
+                                label="排序"
+                                type="number"
+                                value={form.sortOrder}
+                                onChange={(event) => page.setForm({ ...form, sortOrder: event.target.value })}
+                            />
+                            <AdminFormSwitchField
+                                checked={form.enabled}
+                                checkedLabel="启用"
+                                className={styles.giftSwitch}
+                                disabled={disabled}
+                                label="礼物状态"
+                                uncheckedLabel="禁用"
+                                onChange={(checked) => page.setForm({ ...form, enabled: checked })}
+                            />
+                        </AdminFormFieldGrid>
+                    </AdminFormSection>
+                    <AdminFormSection title="投放与时间">
+                        <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
+                            <GiftRegionSelect
+                                disabled={disabled || page.loadingRegions}
+                                labels={buildRegionLabelMap(regionOptions)}
+                                options={regionOptions}
+                                value={form.regionIds}
+                                onChange={(regionIds) => page.setForm({ ...form, regionIds })}
+                            />
+                            <DateTimeField
+                                disabled={disabled}
+                                label="有效开始时间"
+                                value={form.effectiveFrom}
+                                onChange={(effectiveFrom) => page.setForm({ ...form, effectiveFrom })}
+                            />
+                            <DateTimeField
+                                disabled={disabled}
+                                label="有效结束时间"
+                                value={form.effectiveTo}
+                                onChange={(effectiveTo) => page.setForm({ ...form, effectiveTo })}
+                            />
+                            <GiftEffectSelect
+                                disabled={disabled}
+                                value={form.effectTypes}
+                                onChange={(effectTypes) => page.setForm({ ...form, effectTypes })}
+                            />
+                        </AdminFormFieldGrid>
+                    </AdminFormSection>
+                </>
+            )}
+        </AdminFormDialog>
+    );
+}
+
+function GiftDraftSection({ disabled, drafts, page, regionOptions }) {
+    const regionLabels = buildRegionLabelMap(regionOptions);
+    if (!drafts.length) {
+        return (
+            <AdminFormSection title="礼物配置">
+                <div className={styles.giftDraftEmpty}>当前无数据</div>
+            </AdminFormSection>
+        );
+    }
+
+    return (
+        <AdminFormSection title={`礼物配置（${drafts.length}）`}>
+            <div className={styles.giftDraftList}>
+                {drafts.map((draft, index) => (
+                    <GiftDraftEditor
+                        disabled={disabled}
+                        draft={draft}
+                        index={index}
+                        key={draft.resourceId || index}
+                        page={page}
+                        regionLabels={regionLabels}
+                        regionOptions={regionOptions}
+                    />
+                ))}
+            </div>
+        </AdminFormSection>
+    );
+}
+
+function GiftDraftEditor({ disabled, draft, index, page, regionLabels, regionOptions }) {
+    const isCPGiftType = draft.giftTypeCode === "cp";
+    const updateDraft = (patch) => page.updateGiftDraft(draft.resourceId, patch);
+    return (
+        <div className={styles.giftDraftItem}>
+            <div className={styles.giftDraftHeader}>
+                <GiftDraftThumb draft={draft} />
+                <div className={styles.giftDraftTitle}>
+                    <span>{draft.name || draft.giftId || `礼物 ${index + 1}`}</span>
+                    <span>资源 {draft.resourceId || "-"}</span>
+                </div>
+                <AdminActionIconButton
+                    disabled={disabled}
+                    label="移除礼物"
+                    onClick={() => page.removeGiftDraft(draft.resourceId)}
+                >
+                    <DeleteOutlineOutlined fontSize="small" />
+                </AdminActionIconButton>
+            </div>
+            <AdminFormFieldGrid columns="repeat(4, minmax(0, 1fr))">
+                <TextField
+                    disabled={disabled}
+                    label="礼物名称"
+                    required
+                    value={draft.name}
+                    onChange={(event) => updateDraft({ name: event.target.value })}
+                />
+                <TextField
+                    disabled={disabled}
+                    label="礼物 ID"
+                    required
+                    value={draft.giftId}
+                    onChange={(event) => updateDraft({ giftId: event.target.value })}
+                />
+                <TextField disabled label="价格" required type="number" value={draft.coinPrice} />
+                <TextField
+                    disabled={disabled}
+                    label="排序"
+                    type="number"
+                    value={draft.sortOrder}
+                    onChange={(event) => updateDraft({ sortOrder: event.target.value })}
+                />
+                <TextField
+                    disabled={disabled || page.giftTypesLoading}
+                    label="礼物类型"
+                    required
+                    select
+                    value={draft.giftTypeCode}
+                    onChange={(event) => updateDraft({ giftTypeCode: event.target.value })}
+                >
+                    {page.giftTypeOptions.map((item) => (
+                        <MenuItem key={item.tabKey} value={item.tabKey}>
+                            {item.displayName || item.tabKey}
+                        </MenuItem>
+                    ))}
+                </TextField>
+                {isCPGiftType ? (
                     <TextField
                         disabled={disabled}
-                        label="排序"
-                        type="number"
-                        value={form.sortOrder}
-                        onChange={(event) => page.setForm({ ...form, sortOrder: event.target.value })}
-                    />
-                    <AdminFormSwitchField
-                        checked={form.enabled}
-                        checkedLabel="启用"
-                        className={styles.giftSwitch}
-                        disabled={disabled}
-                        label="礼物状态"
-                        uncheckedLabel="禁用"
-                        onChange={(checked) => page.setForm({ ...form, enabled: checked })}
-                    />
-                </AdminFormFieldGrid>
-            </AdminFormSection>
-            <AdminFormSection title="投放与时间">
-                <AdminFormFieldGrid columns="repeat(2, minmax(0, 1fr))">
-                    <GiftRegionSelect
-                        disabled={disabled || page.loadingRegions}
-                        labels={buildRegionLabelMap(regionOptions)}
-                        options={regionOptions}
-                        value={form.regionIds}
-                        onChange={(regionIds) => page.setForm({ ...form, regionIds })}
-                    />
-                    <DateTimeField
-                        disabled={disabled}
-                        label="有效开始时间"
-                        value={form.effectiveFrom}
-                        onChange={(effectiveFrom) => page.setForm({ ...form, effectiveFrom })}
-                    />
-                    <DateTimeField
-                        disabled={disabled}
-                        label="有效结束时间"
-                        value={form.effectiveTo}
-                        onChange={(effectiveTo) => page.setForm({ ...form, effectiveTo })}
-                    />
-                    <GiftEffectSelect
-                        disabled={disabled}
-                        value={form.effectTypes}
-                        onChange={(effectTypes) => page.setForm({ ...form, effectTypes })}
-                    />
-                </AdminFormFieldGrid>
-            </AdminFormSection>
-        </AdminFormDialog>
+                        label="关系类型"
+                        required
+                        select
+                        value={draft.cpRelationType || "cp"}
+                        onChange={(event) => updateDraft({ cpRelationType: event.target.value })}
+                    >
+                        {cpRelationTypeOptions.map(([value, label]) => (
+                            <MenuItem key={value} value={value}>
+                                {label}
+                            </MenuItem>
+                        ))}
+                    </TextField>
+                ) : null}
+                <GiftRegionSelect
+                    disabled={disabled || page.loadingRegions}
+                    labels={regionLabels}
+                    options={regionOptions}
+                    value={draft.regionIds}
+                    onChange={(regionIds) => updateDraft({ regionIds })}
+                />
+                <AdminFormSwitchField
+                    checked={draft.enabled}
+                    checkedLabel="启用"
+                    className={styles.giftSwitch}
+                    disabled={disabled}
+                    label="礼物状态"
+                    uncheckedLabel="禁用"
+                    onChange={(checked) => updateDraft({ enabled: checked })}
+                />
+                <DateTimeField
+                    disabled={disabled}
+                    label="有效开始时间"
+                    value={draft.effectiveFrom}
+                    onChange={(effectiveFrom) => updateDraft({ effectiveFrom })}
+                />
+                <DateTimeField
+                    disabled={disabled}
+                    label="有效结束时间"
+                    value={draft.effectiveTo}
+                    onChange={(effectiveTo) => updateDraft({ effectiveTo })}
+                />
+                <GiftEffectSelect
+                    disabled={disabled}
+                    value={draft.effectTypes}
+                    onChange={(effectTypes) => updateDraft({ effectTypes })}
+                />
+            </AdminFormFieldGrid>
+        </div>
+    );
+}
+
+function GiftDraftThumb({ draft }) {
+    const resource = draft.resource || {};
+    const imageUrl = imageURL(resource.previewUrl || resource.assetUrl || resource.animationUrl);
+    return (
+        <span className={styles.giftDraftThumb}>
+            {imageUrl ? <img alt="" src={imageUrl} /> : <CardGiftcardOutlined fontSize="small" />}
+        </span>
     );
 }
 

src/features/resources/pages/ResourceGrantListPage.jsx

@@ -174,7 +174,9 @@ export function ResourceGrantListPage() {
 
 function ResourceGrantActions({ grant, page }) {
     const canRevoke =
-        page.abilities.canRevokeGrant && grant?.status === "succeeded" && grant?.grantSubjectType === "resource_group";
+        page.abilities.canRevokeGrant &&
+        grant?.status === "succeeded" &&
+        isRevocableGrantSubject(grant?.grantSubjectType);
     if (!canRevoke) {
         return <span className={styles.meta}>-</span>;
     }
@@ -185,7 +187,7 @@ function ResourceGrantActions({ grant, page }) {
                 disabled={page.loadingAction === `grant-revoke-${grant.grantId}`}
                 label="撤销"
                 sx={dangerActionSx}
-                tooltip="撤销资源组赠送"
+                tooltip="撤销资源赠送"
                 onClick={() => page.revokeGrant(grant)}
             >
                 <UndoOutlined fontSize="small" />
@@ -461,6 +463,10 @@ function subjectMeta(grant) {
     return grant.grantSubjectId ? `${subjectLabel} ID ${grant.grantSubjectId}` : "-";
 }
 
+function isRevocableGrantSubject(subjectType) {
+    return subjectType === "resource" || subjectType === "resource_group";
+}
+
 function grantItemLabel(item, snapshot = parseGrantItemSnapshot(item.resourceSnapshotJson)) {
     const walletAssetType = snapshotValue(snapshot, "walletAssetType", "wallet_asset_type", "WalletAssetType");
     if (walletAssetType) {

src/features/resources/pages/ResourceGrantListPage.test.jsx

@@ -15,19 +15,28 @@ afterEach(() => {
     vi.clearAllMocks();
 });
 
-test("resource grant list shows revoke only for succeeded resource group grants", () => {
-    const eligible = grantFixture({
+test("resource grant list shows revoke for succeeded resource and resource group grants", () => {
+    const eligibleGroup = grantFixture({
         grantId: "rgr_group_ok",
         grantSubjectType: "resource_group",
         status: "succeeded",
     });
+    const eligibleResource = grantFixture({
+        grantId: "rgr_resource_ok",
+        grantSubjectType: "resource",
+        status: "succeeded",
+    });
     vi.mocked(useResourceGrantListPage).mockReturnValue(
         pageFixture({
             data: {
                 items: [
-                    eligible,
-                    grantFixture({ grantId: "rgr_resource_ok", grantSubjectType: "resource", status: "succeeded" }),
-                    grantFixture({ grantId: "rgr_group_revoked", grantSubjectType: "resource_group", status: "revoked" }),
+                    eligibleGroup,
+                    eligibleResource,
+                    grantFixture({
+                        grantId: "rgr_group_revoked",
+                        grantSubjectType: "resource_group",
+                        status: "revoked",
+                    }),
                 ],
                 page: 1,
                 pageSize: 50,
@@ -40,11 +49,13 @@ test("resource grant list shows revoke only for succeeded resource group grants"
 
     expect(screen.getByText("已撤销")).toBeInTheDocument();
     const revokeButtons = screen.getAllByLabelText("撤销");
-    expect(revokeButtons).toHaveLength(1);
+    expect(revokeButtons).toHaveLength(2);
 
     fireEvent.click(revokeButtons[0]);
+    fireEvent.click(revokeButtons[1]);
 
-    expect(mocks.revokeGrant).toHaveBeenCalledWith(eligible);
+    expect(mocks.revokeGrant).toHaveBeenNthCalledWith(1, eligibleGroup);
+    expect(mocks.revokeGrant).toHaveBeenNthCalledWith(2, eligibleResource);
 });
 
 test("resource grant list hides revoke without permission", () => {

src/features/resources/pages/ResourceListPage.jsx

@@ -1,4 +1,5 @@
 import Add from "@mui/icons-material/Add";
+import DeleteOutlineOutlined from "@mui/icons-material/DeleteOutlineOutlined";
 import EditOutlined from "@mui/icons-material/EditOutlined";
 import FileUploadOutlined from "@mui/icons-material/FileUploadOutlined";
 import HelpOutlineOutlined from "@mui/icons-material/HelpOutlineOutlined";
@@ -163,6 +164,9 @@ export function ResourceListPage() {
     const selectedOnPageCount = items.filter((resource) => selectedIdSet.has(resource.resourceId)).length;
     const someChecked = selectedOnPageCount > 0 && !allChecked;
     const batchMp4Running = batchMp4Progress.running;
+    const deletingResources = page.loadingAction.startsWith("resource-delete-");
+    const deletingBatch = page.loadingAction === "resource-delete-batch";
+    const canSelectResources = page.abilities.canUpdate || page.abilities.canDelete;
 
     useEffect(() => {
         const itemIds = new Set(items.map((resource) => resource.resourceId));
@@ -196,9 +200,10 @@ export function ResourceListPage() {
         header: (
             <Checkbox
                 checked={allChecked}
-                disabled={!page.abilities.canUpdate || items.length === 0 || batchMp4Running}
+                disabled={!canSelectResources || items.length === 0 || batchMp4Running || deletingResources}
                 indeterminate={someChecked}
                 size="small"
+                slotProps={{ input: { "aria-label": "选择当前页资源" } }}
                 onChange={(event) => toggleAllResources(event.target.checked)}
             />
         ),
@@ -208,8 +213,10 @@ export function ResourceListPage() {
             return (
                 <Checkbox
                     checked={selectedIdSet.has(resource.resourceId)}
-                    disabled={!page.abilities.canUpdate || batchMp4Running}
-                    inputProps={{ "aria-label": `选择 ${resource.name || resource.resourceCode || resource.resourceId}` }}
+                    disabled={!canSelectResources || batchMp4Running || deletingResources}
+                    slotProps={{
+                        input: { "aria-label": `选择 ${resource.name || resource.resourceCode || resource.resourceId}` },
+                    }}
                     size="small"
                     onChange={(event) => toggleResourceSelection(resource, event.target.checked)}
                 />
@@ -257,7 +264,13 @@ export function ResourceListPage() {
                       : column.key === "actions"
                         ? {
                               ...column,
-                              render: (resource) => <ResourceRowActions page={page} resource={resource} />,
+                              render: (resource) => (
+                                  <ResourceRowActions
+                                      deleteDisabled={batchMp4Running || Boolean(mp4BatchResult)}
+                                      page={page}
+                                      resource={resource}
+                                  />
+                              ),
                           }
                         : column,
         ),
@@ -394,6 +407,18 @@ export function ResourceListPage() {
         setMp4BatchResult({ ignoredCount, layoutCounts, rows: updates });
     };
 
+    const deleteSelectedResources = async () => {
+        if (!page.abilities.canDelete || !selectedResources.length || deletingResources) {
+            return;
+        }
+        const deletedResourceIds = await page.deleteResources(selectedResources);
+        if (!deletedResourceIds.length) {
+            return;
+        }
+        const deletedIdSet = new Set(deletedResourceIds);
+        setSelectedResourceIds((current) => current.filter((resourceId) => !deletedIdSet.has(resourceId)));
+    };
+
     const writeMp4BatchResult = async () => {
         const rows = mp4BatchResult?.rows || [];
         if (!rows.length || batchMp4Running) {
@@ -504,11 +529,24 @@ export function ResourceListPage() {
         <AdminListPage>
             <AdminListToolbar
                 actions={
-                    page.abilities.canCreate || page.abilities.canUpdate ? (
+                    page.abilities.canCreate || page.abilities.canUpdate || page.abilities.canDelete ? (
                         <>
+                            {page.abilities.canDelete ? (
+                                <AdminActionIconButton
+                                    disabled={!selectedResources.length || deletingResources || batchMp4Running}
+                                    label={deletingBatch ? "批量删除中" : `批量删除资源（${selectedResources.length}）`}
+                                    onClick={deleteSelectedResources}
+                                >
+                                    {deletingBatch ? (
+                                        <CircularProgress size={16} />
+                                    ) : (
+                                        <DeleteOutlineOutlined fontSize="small" />
+                                    )}
+                                </AdminActionIconButton>
+                            ) : null}
                             {page.abilities.canUpdate ? (
                                 <AdminActionIconButton
-                                    disabled={!selectedResources.length || batchMp4Running}
+                                    disabled={!selectedResources.length || batchMp4Running || deletingResources}
                                     label={
                                         batchMp4Running
                                             ? batchMp4Progress.label || "批量重算 MP4"
@@ -885,11 +923,14 @@ function Mp4BatchResultDialog({ loading, onClose, onSubmit, open, result }) {
     );
 }
 
-function ResourceRowActions({ page, resource }) {
+function ResourceRowActions({ deleteDisabled = false, page, resource }) {
     const { showToast } = useToast();
     const [recalculating, setRecalculating] = useState(false);
     const mp4AnimationSource = mp4ResourceAnimationSource(resource);
     const loading = recalculating || page.loadingAction === `resource-mp4-layout-${resource.resourceId}`;
+    const deleting = page.loadingAction === `resource-delete-${resource.resourceId}`;
+    const deletingBatch = page.loadingAction === "resource-delete-batch";
+    const deletingResources = page.loadingAction.startsWith("resource-delete-");
 
     const recalculateMp4Layout = async () => {
         if (!mp4AnimationSource || !page.abilities.canUpdate || loading) {
@@ -927,6 +968,15 @@ function ResourceRowActions({ page, resource }) {
             >
                 <EditOutlined fontSize="small" />
             </AdminActionIconButton>
+            {page.abilities.canDelete ? (
+                <AdminActionIconButton
+                    disabled={deleteDisabled || deletingResources || deletingBatch}
+                    label={deleting ? "删除中" : "删除资源"}
+                    onClick={() => page.deleteResources([resource])}
+                >
+                    {deleting ? <CircularProgress size={16} /> : <DeleteOutlineOutlined fontSize="small" />}
+                </AdminActionIconButton>
+            ) : null}
         </AdminRowActions>
     );
 }

src/features/resources/pages/ResourceListPage.test.jsx

@@ -0,0 +1,150 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import { ResourceListPage } from "./ResourceListPage.jsx";
+import { useResourceListPage } from "@/features/resources/hooks/useResourcePages.js";
+
+const mocks = vi.hoisted(() => ({
+    deleteResources: vi.fn(),
+    showToast: vi.fn(),
+}));
+
+vi.mock("@/features/resources/hooks/useResourcePages.js", () => ({
+    useResourceListPage: vi.fn(),
+}));
+
+vi.mock("@/shared/ui/ToastProvider.jsx", () => ({
+    useToast: () => ({ showToast: mocks.showToast }),
+}));
+
+beforeEach(() => {
+    globalThis.ResizeObserver = class ResizeObserver {
+        observe() {}
+        disconnect() {}
+    };
+    mocks.deleteResources.mockResolvedValue([]);
+});
+
+afterEach(() => {
+    vi.clearAllMocks();
+});
+
+test("resource list calls row delete action with the target resource", async () => {
+    const page = pageFixture();
+    vi.mocked(useResourceListPage).mockReturnValue(page);
+
+    render(<ResourceListPage />);
+
+    fireEvent.click(screen.getAllByRole("button", { name: "删除资源" })[0]);
+
+    await waitFor(() => {
+        expect(mocks.deleteResources).toHaveBeenCalledWith([page.data.items[0]]);
+    });
+});
+
+test("resource list batch delete uses selected resources and clears selected rows after success", async () => {
+    const page = pageFixture();
+    mocks.deleteResources.mockResolvedValue([11, 12]);
+    vi.mocked(useResourceListPage).mockReturnValue(page);
+
+    render(<ResourceListPage />);
+
+    fireEvent.click(screen.getByLabelText("选择 Rose"));
+    fireEvent.click(screen.getByLabelText("选择 Ring"));
+    fireEvent.click(screen.getByRole("button", { name: "批量删除资源（2）" }));
+
+    await waitFor(() => {
+        expect(mocks.deleteResources).toHaveBeenCalledWith(page.data.items);
+    });
+    await waitFor(() => {
+        expect(screen.getByLabelText("选择 Rose")).not.toBeChecked();
+        expect(screen.getByLabelText("选择 Ring")).not.toBeChecked();
+    });
+});
+
+test("resource list hides delete actions without delete permission", () => {
+    vi.mocked(useResourceListPage).mockReturnValue(
+        pageFixture({
+            abilities: {
+                canCreate: false,
+                canDelete: false,
+                canUpdate: true,
+                canUpload: true,
+            },
+        }),
+    );
+
+    render(<ResourceListPage />);
+
+    expect(screen.queryByLabelText(/批量删除资源/)).not.toBeInTheDocument();
+    expect(screen.queryByLabelText("删除资源")).not.toBeInTheDocument();
+});
+
+test("resource list disables other delete actions while a resource delete is running", () => {
+    vi.mocked(useResourceListPage).mockReturnValue(pageFixture({ loadingAction: "resource-delete-11" }));
+
+    render(<ResourceListPage />);
+
+    expect(screen.getByRole("button", { name: "删除中" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "删除资源" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "批量删除资源（0）" })).toBeDisabled();
+    expect(screen.getByLabelText("选择 Rose")).toBeDisabled();
+});
+
+function pageFixture(patch = {}) {
+    return {
+        abilities: {
+            canCreate: true,
+            canDelete: true,
+            canUpdate: true,
+            canUpload: true,
+        },
+        activeAction: "",
+        changeQuery: vi.fn(),
+        changeResourceType: vi.fn(),
+        changeStatus: vi.fn(),
+        closeAction: vi.fn(),
+        data: {
+            items: [resourceFixture({ resourceId: 11, name: "Rose" }), resourceFixture({ resourceId: 12, name: "Ring" })],
+            page: 1,
+            pageSize: 50,
+            total: 2,
+        },
+        deleteResources: mocks.deleteResources,
+        error: null,
+        form: {},
+        loading: false,
+        loadingAction: "",
+        openCreateResource: vi.fn(),
+        openEditResource: vi.fn(),
+        page: 1,
+        query: "",
+        reload: vi.fn(),
+        resetFilters: vi.fn(),
+        resourceType: "",
+        selectedResource: null,
+        setForm: vi.fn(),
+        setPage: vi.fn(),
+        status: "",
+        submitResource: vi.fn(),
+        toggleManagerGrant: vi.fn(),
+        toggleResource: vi.fn(),
+        ...patch,
+    };
+}
+
+function resourceFixture(patch = {}) {
+    return {
+        assetUrl: "https://media.example.com/resource.png",
+        coinPrice: 10,
+        managerGrantEnabled: false,
+        name: "Rose",
+        previewUrl: "https://media.example.com/cover.png",
+        priceType: "coin",
+        resourceCode: "gift_rose",
+        resourceId: 11,
+        resourceType: "gift",
+        status: "active",
+        updatedAtMs: 1782287714973,
+        ...patch,
+    };
+}

src/features/resources/permissions.js

@@ -11,6 +11,7 @@ export function useResourceAbilities() {
         canCreateGroup: can(PERMISSIONS.resourceGroupCreate),
         canRevokeGrant: can(PERMISSIONS.resourceGrantRevoke),
         canCreateEmojiPack: can(PERMISSIONS.emojiPackCreate),
+        canDelete: can(PERMISSIONS.resourceDelete),
         canDeleteGift: can(PERMISSIONS.giftDelete),
         canStatusGift: can(PERMISSIONS.giftStatus),
         canUpdateShop: can(PERMISSIONS.resourceShopUpdate),

src/features/resources/resources.module.css

@@ -308,6 +308,82 @@
     color: var(--text-tertiary);
 }
 
+.giftDraftList {
+    display: grid;
+    gap: var(--space-3);
+}
+
+.giftDraftItem {
+    display: grid;
+    gap: var(--space-3);
+    padding: var(--space-3);
+    border: 1px solid var(--border);
+    border-radius: var(--radius-card);
+    background: var(--bg-card);
+}
+
+.giftDraftHeader {
+    display: grid;
+    min-width: 0;
+    align-items: center;
+    gap: var(--space-2);
+    grid-template-columns: 44px minmax(0, 1fr) var(--control-height);
+}
+
+.giftDraftThumb {
+    display: inline-flex;
+    width: 44px;
+    height: 44px;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border: 1px solid var(--border);
+    border-radius: var(--radius-sm);
+    background: var(--bg-card-strong);
+    color: var(--text-secondary);
+}
+
+.giftDraftThumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.giftDraftTitle {
+    display: grid;
+    min-width: 0;
+    gap: 3px;
+}
+
+.giftDraftTitle span {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.giftDraftTitle span:first-child {
+    color: var(--text-primary);
+    font-weight: 750;
+}
+
+.giftDraftTitle span:last-child {
+    color: var(--text-tertiary);
+    font-size: 12px;
+}
+
+.giftDraftEmpty {
+    display: flex;
+    min-height: 120px;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--border-muted);
+    border-radius: var(--radius-sm);
+    background: var(--bg-card-strong);
+    color: var(--text-tertiary);
+    font-weight: 650;
+}
+
 .batchInput {
     display: none;
 }

src/features/vip-config/api.ts

@@ -108,9 +108,9 @@ function normalizeLevel(item: RawLevel): VipLevelDto {
         durationMs: numberValue(item.durationMs ?? item.duration_ms),
         rewardResourceGroupId: numberValue(item.rewardResourceGroupId ?? item.reward_resource_group_id),
         sortOrder: numberValue(item.sortOrder ?? item.sort_order),
-        rechargeGateRequired: Boolean(item.rechargeGateRequired ?? item.recharge_gate_required ?? level >= 6),
-        requiredRechargeCoinAmount: numberValue(item.requiredRechargeCoinAmount ?? item.required_recharge_coin_amount),
-        userRechargeCoinAmount: numberValue(item.userRechargeCoinAmount ?? item.user_recharge_coin_amount),
+        rechargeGateRequired: false,
+        requiredRechargeCoinAmount: 0,
+        userRechargeCoinAmount: 0,
         purchaseLockedReason: stringValue(item.purchaseLockedReason ?? item.purchase_locked_reason),
         createdAtMs: numberValue(item.createdAtMs ?? item.created_at_ms),
         updatedAtMs: numberValue(item.updatedAtMs ?? item.updated_at_ms),

src/features/vip-config/hooks/useVipConfigPage.js

@@ -174,7 +174,7 @@ function defaultLevels() {
             durationMs: defaultDurationMs,
             rewardResourceGroupId: 0,
             requiredRechargeCoinAmount: 0,
-            rechargeGateRequired: level >= 6,
+            rechargeGateRequired: false,
             sortOrder: level * 10,
         };
     });
@@ -216,7 +216,6 @@ function payloadFromForm(form) {
         const priceCoin = Number(level.priceCoin || 0);
         const durationDays = Number(level.durationDays || 0);
         const rewardResourceGroupId = Number(level.rewardResourceGroupId || 0);
-        const requiredRechargeCoinAmount = level.level >= 6 ? Number(level.requiredRechargeCoinAmount || 0) : 0;
         const sortOrder = Number(level.sortOrder || level.level * 10);
         const status = level.status === "active" ? "active" : "disabled";
         if (!String(level.name || "").trim()) {
@@ -234,9 +233,6 @@ function payloadFromForm(form) {
         if (status === "active" && rewardResourceGroupId <= 0) {
             throw new Error(`VIP${level.level} 启用时必须选择奖励资源组`);
         }
-        if (status === "active" && level.level >= 6 && requiredRechargeCoinAmount <= 0) {
-            throw new Error(`VIP${level.level} 启用时必须配置累计充值门槛`);
-        }
         return {
             level: Number(level.level),
             name: String(level.name || "").trim(),
@@ -244,7 +240,7 @@ function payloadFromForm(form) {
             priceCoin,
             durationMs: durationDays * 86400000,
             rewardResourceGroupId,
-            requiredRechargeCoinAmount,
+            requiredRechargeCoinAmount: 0,
             sortOrder,
         };
     });

src/features/vip-config/pages/VipConfigPage.jsx

@@ -28,9 +28,7 @@ export function VipConfigPage() {
                 <div className={styles.summaryItems}>
                     <SummaryItem label="总等级">{levels.length || 10}</SummaryItem>
                     <SummaryItem label="启用等级">{page.activeCount}</SummaryItem>
-                    <SummaryItem label="高阶门槛">
-                        {levels.filter((level) => level.level >= 6 && level.status === "active").length}
-                    </SummaryItem>
+                    <SummaryItem label="购买门槛">无</SummaryItem>
                 </div>
                 <div className={styles.summaryActions}>
                     <Button
@@ -202,22 +200,6 @@ function VipConfigDrawer({ page }) {
                                             page.updateLevel(level.level, { rewardResourceGroupId: value })
                                         }
                                     />
-                                    {level.level >= 6 ? (
-                                        <TextField
-                                            disabled={disabled}
-                                            inputProps={{ min: 0, step: 1 }}
-                                            label="累计充值门槛"
-                                            type="number"
-                                            value={level.requiredRechargeCoinAmount}
-                                            onChange={(event) =>
-                                                page.updateLevel(level.level, {
-                                                    requiredRechargeCoinAmount: event.target.value,
-                                                })
-                                            }
-                                        />
-                                    ) : (
-                                        <TextField disabled label="购买门槛" value="直接购买" />
-                                    )}
                                     <TextField
                                         disabled={disabled}
                                         inputProps={{ min: 0, step: 1 }}
@@ -283,8 +265,7 @@ function vipColumns(resourceLabels) {
         {
             key: "gate",
             label: "购买门槛",
-            render: (item) =>
-                item.level >= 6 ? `${formatNumber(item.requiredRechargeCoinAmount)} 累充金币` : "直接购买",
+            render: () => "直接购买",
             width: "minmax(180px, 0.8fr)",
         },
         {

src/features/vip-config/vip-config.module.css

@@ -86,11 +86,6 @@
     font-weight: 700;
 }
 
-.directLabel {
-    color: var(--color-text-muted);
-    font-size: 12px;
-}
-
 @media (max-width: 760px) {
     .summaryPanel {
         align-items: stretch;

src/shared/api/generated/endpoints.ts

@@ -26,6 +26,8 @@ export const API_OPERATIONS = {
   appSetPassword: "appSetPassword",
   appUnbanUser: "appUnbanUser",
   appUpdateUser: "appUpdateUser",
+  batchCreateGifts: "batchCreateGifts",
+  batchDeleteResources: "batchDeleteResources",
   batchUpdateUserStatus: "batchUpdateUserStatus",
   cancelRoomPin: "cancelRoomPin",
   changePassword: "changePassword",
@@ -87,6 +89,7 @@ export const API_OPERATIONS = {
   deletePermission: "deletePermission",
   deletePopup: "deletePopup",
   deleteRechargeProduct: "deleteRechargeProduct",
+  deleteResource: "deleteResource",
   deleteRole: "deleteRole",
   deleteRoom: "deleteRoom",
   deleteSplashScreen: "deleteSplashScreen",
@@ -106,6 +109,7 @@ export const API_OPERATIONS = {
   expireRoomRpsChallenge: "expireRoomRpsChallenge",
   exportLoginLogs: "exportLoginLogs",
   exportOperationLogs: "exportOperationLogs",
+  exportRechargeBills: "exportRechargeBills",
   exportUsers: "exportUsers",
   generateDiceRobots: "generateDiceRobots",
   generatePrettyIds: "generatePrettyIds",
@@ -120,6 +124,8 @@ export const API_OPERATIONS = {
   getInviteActivityRewardConfig: "getInviteActivityRewardConfig",
   getLuckyGiftConfig: "getLuckyGiftConfig",
   getLuckyGiftDrawSummary: "getLuckyGiftDrawSummary",
+  getRechargeBillOverview: "getRechargeBillOverview",
+  getRechargeBillSummary: "getRechargeBillSummary",
   getRedPacket: "getRedPacket",
   getRedPacketConfig: "getRedPacketConfig",
   getRegion: "getRegion",
@@ -136,6 +142,10 @@ export const API_OPERATIONS = {
   getRoomTurnoverRewardConfig: "getRoomTurnoverRewardConfig",
   getRoomWhitelistConfig: "getRoomWhitelistConfig",
   getSevenDayCheckInConfig: "getSevenDayCheckInConfig",
+  getSocialBiFunnel: "getSocialBiFunnel",
+  getSocialBiKpi: "getSocialBiKpi",
+  getSocialBiMaster: "getSocialBiMaster",
+  getSocialBiOverview: "getSocialBiOverview",
   getTemporaryPaymentLink: "getTemporaryPaymentLink",
   getUser: "getUser",
   getWeeklyStarCycle: "getWeeklyStarCycle",
@@ -191,8 +201,10 @@ export const API_OPERATIONS = {
   listPopups: "listPopups",
   listPrettyIdPools: "listPrettyIdPools",
   listPrettyIds: "listPrettyIds",
+  listRechargeApps: "listRechargeApps",
   listRechargeBills: "listRechargeBills",
   listRechargeProducts: "listRechargeProducts",
+  listRechargeRegions: "listRechargeRegions",
   listRedPackets: "listRedPackets",
   listRegionBlocks: "listRegionBlocks",
   listRegions: "listRegions",
@@ -235,6 +247,7 @@ export const API_OPERATIONS = {
   publishHostAgencyPolicy: "publishHostAgencyPolicy",
   recyclePrettyId: "recyclePrettyId",
   refresh: "refresh",
+  refreshGoogleRechargePaid: "refreshGoogleRechargePaid",
   rejectFinanceApplication: "rejectFinanceApplication",
   rejectFinanceWithdrawalApplication: "rejectFinanceWithdrawalApplication",
   replaceCoinSellerSalaryRates: "replaceCoinSellerSalaryRates",
@@ -287,6 +300,7 @@ export const API_OPERATIONS = {
   updateHostAgencyPolicy: "updateHostAgencyPolicy",
   updateHumanRoomRobotConfig: "updateHumanRoomRobotConfig",
   updateInviteActivityRewardConfig: "updateInviteActivityRewardConfig",
+  updateManager: "updateManager",
   updateMenu: "updateMenu",
   updateMenuVisible: "updateMenuVisible",
   updatePermission: "updatePermission",
@@ -422,6 +436,20 @@ export const API_ENDPOINTS: Record<ApiOperationId, ApiEndpoint> = {
     permission: "app-user:update",
     permissions: ["app-user:update"]
   },
+  batchCreateGifts: {
+    method: "POST",
+    operationId: API_OPERATIONS.batchCreateGifts,
+    path: "/v1/admin/gifts/batch",
+    permission: "gift:create",
+    permissions: ["gift:create"]
+  },
+  batchDeleteResources: {
+    method: "POST",
+    operationId: API_OPERATIONS.batchDeleteResources,
+    path: "/v1/admin/resources/batch-delete",
+    permission: "resource:delete",
+    permissions: ["resource:delete"]
+  },
   batchUpdateUserStatus: {
     method: "POST",
     operationId: API_OPERATIONS.batchUpdateUserStatus,
@@ -847,6 +875,13 @@ export const API_ENDPOINTS: Record<ApiOperationId, ApiEndpoint> = {
     permission: "payment-product:delete",
     permissions: ["payment-product:delete"]
   },
+  deleteResource: {
+    method: "DELETE",
+    operationId: API_OPERATIONS.deleteResource,
+    path: "/v1/admin/resources/{resource_id}",
+    permission: "resource:delete",
+    permissions: ["resource:delete"]
+  },
   deleteRole: {
     method: "DELETE",
     operationId: API_OPERATIONS.deleteRole,
@@ -980,6 +1015,13 @@ export const API_ENDPOINTS: Record<ApiOperationId, ApiEndpoint> = {
     permission: "log:export",
     permissions: ["log:export"]
   },
+  exportRechargeBills: {
+    method: "GET",
+    operationId: API_OPERATIONS.exportRechargeBills,
+    path: "/v1/admin/payment/recharge-bills/export",
+    permission: "payment-bill:view",
+    permissions: ["payment-bill:view"]
+  },
   exportUsers: {
     method: "GET",
     operationId: API_OPERATIONS.exportUsers,
@@ -1078,6 +1120,20 @@ export const API_ENDPOINTS: Record<ApiOperationId, ApiEndpoint> = {
     permission: "lucky-gift:view",
     permissions: ["lucky-gift:view"]
   },
+  getRechargeBillOverview: {
+    method: "GET",
+    operationId: API_OPERATIONS.getRechargeBillOverview,
+    path: "/v1/admin/payment/recharge-bills/overview",
+    permission: "payment-bill:view",
+    permissions: ["payment-bill:view"]
+  },
+  getRechargeBillSummary: {
+    method: "GET",
+    operationId: API_OPERATIONS.getRechargeBillSummary,
+    path: "/v1/admin/payment/recharge-bills/summary",
+    permission: "payment-bill:view",
+    permissions: ["payment-bill:view"]
+  },
   getRedPacket: {
     method: "GET",
     operationId: API_OPERATIONS.getRedPacket,
@@ -1190,6 +1246,34 @@ export const API_ENDPOINTS: Record<ApiOperationId, ApiEndpoint> = {
     permission: "seven-day-checkin:view",
     permissions: ["seven-day-checkin:view"]
   },
+  getSocialBiFunnel: {
+    method: "GET",
+    operationId: API_OPERATIONS.getSocialBiFunnel,
+    path: "/v1/admin/databi/social/funnel",
+    permission: "overview:view",
+    permissions: ["overview:view"]
+  },
+  getSocialBiKpi: {
+    method: "GET",
+    operationId: API_OPERATIONS.getSocialBiKpi,
+    path: "/v1/admin/databi/social/kpi",
+    permission: "overview:view",
+    permissions: ["overview:view"]
+  },
+  getSocialBiMaster: {
+    method: "GET",
+    operationId: API_OPERATIONS.getSocialBiMaster,
+    path: "/v1/admin/databi/social/master",
+    permission: "overview:view",
+    permissions: ["overview:view"]
+  },
+  getSocialBiOverview: {
+    method: "GET",
+    operationId: API_OPERATIONS.getSocialBiOverview,
+    path: "/v1/admin/databi/social/overview",
+    permission: "overview:view",
+    permissions: ["overview:view"]
+  },
   getTemporaryPaymentLink: {
     method: "GET",
     operationId: API_OPERATIONS.getTemporaryPaymentLink,
@@ -1573,6 +1657,13 @@ export const API_ENDPOINTS: Record<ApiOperationId, ApiEndpoint> = {
     permission: "pretty-id:view",
     permissions: ["pretty-id:view"]
   },
+  listRechargeApps: {
+    method: "GET",
+    operationId: API_OPERATIONS.listRechargeApps,
+    path: "/v1/admin/payment/recharge-apps",
+    permission: "payment-bill:view",
+    permissions: ["payment-bill:view"]
+  },
   listRechargeBills: {
     method: "GET",
     operationId: API_OPERATIONS.listRechargeBills,
@@ -1587,6 +1678,13 @@ export const API_ENDPOINTS: Record<ApiOperationId, ApiEndpoint> = {
     permission: "payment-product:view",
     permissions: ["payment-product:view"]
   },
+  listRechargeRegions: {
+    method: "GET",
+    operationId: API_OPERATIONS.listRechargeRegions,
+    path: "/v1/admin/payment/recharge-regions",
+    permission: "payment-bill:view",
+    permissions: ["payment-bill:view"]
+  },
   listRedPackets: {
     method: "GET",
     operationId: API_OPERATIONS.listRedPackets,
@@ -1871,6 +1969,13 @@ export const API_ENDPOINTS: Record<ApiOperationId, ApiEndpoint> = {
     operationId: API_OPERATIONS.refresh,
     path: "/v1/auth/refresh"
   },
+  refreshGoogleRechargePaid: {
+    method: "POST",
+    operationId: API_OPERATIONS.refreshGoogleRechargePaid,
+    path: "/v1/admin/payment/recharge-bills/google-paid/refresh",
+    permission: "payment-bill:view",
+    permissions: ["payment-bill:view"]
+  },
   rejectFinanceApplication: {
     method: "POST",
     operationId: API_OPERATIONS.rejectFinanceApplication,
@@ -2233,6 +2338,13 @@ export const API_ENDPOINTS: Record<ApiOperationId, ApiEndpoint> = {
     permission: "invite-activity-reward:update",
     permissions: ["invite-activity-reward:update"]
   },
+  updateManager: {
+    method: "PUT",
+    operationId: API_OPERATIONS.updateManager,
+    path: "/v1/admin/managers/{user_id}",
+    permission: "bd:update",
+    permissions: ["bd:update"]
+  },
   updateMenu: {
     method: "PATCH",
     operationId: API_OPERATIONS.updateMenu,

src/shared/api/generated/schema.d.ts

@@ -676,6 +676,22 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/admin/managers/{user_id}": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put: operations["updateManager"];
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/admin/agencies": {
         parameters: {
             query?: never;
@@ -1604,6 +1620,22 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/admin/gifts/batch": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["batchCreateGifts"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/admin/gifts/{gift_id}": {
         parameters: {
             query?: never;
@@ -1876,6 +1908,102 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/admin/payment/recharge-bills/overview": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["getRechargeBillOverview"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/admin/payment/recharge-bills/summary": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["getRechargeBillSummary"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/admin/payment/recharge-bills/export": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["exportRechargeBills"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/admin/payment/recharge-bills/google-paid/refresh": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["refreshGoogleRechargePaid"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/admin/payment/recharge-regions": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["listRechargeRegions"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/admin/payment/recharge-apps": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["listRechargeApps"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/admin/payment/recharge-products": {
         parameters: {
             query?: never;
@@ -1908,6 +2036,70 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/admin/databi/social/master": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["getSocialBiMaster"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/admin/databi/social/overview": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["getSocialBiOverview"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/admin/databi/social/funnel": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["getSocialBiFunnel"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
+    "/admin/databi/social/kpi": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get: operations["getSocialBiKpi"];
+        put?: never;
+        post?: never;
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/admin/finance/scope": {
         parameters: {
             query?: never;
@@ -2468,6 +2660,22 @@ export interface paths {
         patch?: never;
         trace?: never;
     };
+    "/admin/resources/batch-delete": {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        get?: never;
+        put?: never;
+        post: operations["batchDeleteResources"];
+        delete?: never;
+        options?: never;
+        head?: never;
+        patch?: never;
+        trace?: never;
+    };
     "/admin/resources/{resource_id}": {
         parameters: {
             query?: never;
@@ -2478,7 +2686,7 @@ export interface paths {
         get: operations["getResource"];
         put: operations["updateResource"];
         post?: never;
-        delete?: never;
+        delete: operations["deleteResource"];
         options?: never;
         head?: never;
         patch?: never;
@@ -3821,6 +4029,16 @@ export interface components {
         Manager: {
             avatar?: string;
             bdLeaderCount?: number;
+            canAddAdmin?: boolean;
+            canAddBdLeader?: boolean;
+            canAddSuperadmin?: boolean;
+            canBlockUser?: boolean;
+            canGrantAvatarFrame?: boolean;
+            canGrantBadge?: boolean;
+            canGrantVehicle?: boolean;
+            canGrantVip?: boolean;
+            canTransferUserCountry?: boolean;
+            canUpdateUserLevel?: boolean;
             createdAtMs?: number;
             contact?: string;
             displayUserId?: string;
@@ -3834,9 +4052,34 @@ export interface components {
             username?: string;
         };
         CreateManagerPayload: {
+            canAddAdmin?: boolean;
+            canAddBdLeader?: boolean;
+            canAddSuperadmin?: boolean;
+            canBlockUser?: boolean;
+            canGrantAvatarFrame?: boolean;
+            canGrantBadge?: boolean;
+            canGrantVehicle?: boolean;
+            canGrantVip?: boolean;
+            canTransferUserCountry?: boolean;
+            canUpdateUserLevel?: boolean;
             contact?: string;
             targetUserId: string;
         };
+        UpdateManagerPayload: {
+            canAddAdmin?: boolean;
+            canAddBdLeader?: boolean;
+            canAddSuperadmin?: boolean;
+            canBlockUser?: boolean;
+            canGrantAvatarFrame?: boolean;
+            canGrantBadge?: boolean;
+            canGrantVehicle?: boolean;
+            canGrantVip?: boolean;
+            canTransferUserCountry?: boolean;
+            canUpdateUserLevel?: boolean;
+            contact?: string;
+            /** @enum {string} */
+            status?: "active" | "disabled";
+        };
         BDProfile: {
             agencyCount?: number;
             createdAtMs?: number;
@@ -4374,6 +4617,20 @@ export interface components {
         Status: string;
     };
     requestBodies: {
+        BatchCreateGiftsRequest: {
+            content: {
+                "application/json": {
+                    items: Record<string, never>[];
+                };
+            };
+        };
+        BatchDeleteResourcesRequest: {
+            content: {
+                "application/json": {
+                    resourceIds: number[];
+                };
+            };
+        };
         BatchStatusRequest: {
             content: {
                 "application/json": {
@@ -4502,7 +4759,15 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            200: components["responses"]["EmptyResponse"];
+            /** @description 批量创建的礼物 */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": Record<string, never>[];
+                };
+            };
         };
     };
     createAchievementDefinition: {
@@ -4514,7 +4779,15 @@ export interface operations {
         };
         requestBody?: never;
         responses: {
-            200: components["responses"]["EmptyResponse"];
+            /** @description 批量删除的资源 */
+            200: {
+                headers: {
+                    [name: string]: unknown;
+                };
+                content: {
+                    "application/json": Record<string, never>[];
+                };
+            };
         };
     };
     updateAchievementDefinition: {
@@ -5240,6 +5513,24 @@ export interface operations {
             201: components["responses"]["ManagerResponse"];
         };
     };
+    updateManager: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                user_id: number;
+            };
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": components["schemas"]["UpdateManagerPayload"];
+            };
+        };
+        responses: {
+            200: components["responses"]["ManagerResponse"];
+        };
+    };
     listAgencies: {
         parameters: {
             query?: {
@@ -6386,6 +6677,18 @@ export interface operations {
             200: components["responses"]["EmptyResponse"];
         };
     };
+    batchCreateGifts: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: components["requestBodies"]["BatchCreateGiftsRequest"];
+        responses: {
+            200: components["responses"]["EmptyResponse"];
+        };
+    };
     updateGift: {
         parameters: {
             query?: never;
@@ -6610,7 +6913,18 @@ export interface operations {
             path?: never;
             cookie?: never;
         };
-        requestBody?: never;
+        requestBody: {
+            content: {
+                "application/json": {
+                    /** Format: int64 */
+                    amount: number;
+                    commandId?: string;
+                    reason: string;
+                    remark: string;
+                    targetUserId: string;
+                };
+            };
+        };
         responses: {
             200: components["responses"]["EmptyResponse"];
         };
@@ -6691,11 +7005,11 @@ export interface operations {
                     sent_at_ms?: number;
                     summary: string;
                     /** @enum {string} */
-                    target_scope: "all_active_users" | "single_user" | "user_ids" | "region" | "country";
+                    target_scope: "all_registered_users" | "all_active_users" | "single_user" | "user_ids" | "region" | "country";
                     /** Format: int64 */
                     target_user_id?: number;
                     title: string;
-                    user_ids?: number[];
+                    user_ids?: (number | string)[];
                 };
             };
         };
@@ -6735,6 +7049,106 @@ export interface operations {
             200: components["responses"]["RechargeBillPageResponse"];
         };
     };
+    getRechargeBillOverview: {
+        parameters: {
+            query?: {
+                keyword?: string;
+                recharge_type?: string;
+                status?: string;
+                region_id?: number;
+                start_at_ms?: number;
+                end_at_ms?: number;
+                tz_offset_minutes?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: components["responses"]["EmptyResponse"];
+        };
+    };
+    getRechargeBillSummary: {
+        parameters: {
+            query?: {
+                keyword?: string;
+                recharge_type?: string;
+                status?: string;
+                region_id?: number;
+                start_at_ms?: number;
+                end_at_ms?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: components["responses"]["EmptyResponse"];
+        };
+    };
+    exportRechargeBills: {
+        parameters: {
+            query?: {
+                keyword?: string;
+                recharge_type?: string;
+                status?: string;
+                region_id?: number;
+                start_at_ms?: number;
+                end_at_ms?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: components["responses"]["EmptyResponse"];
+        };
+    };
+    refreshGoogleRechargePaid: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody: {
+            content: {
+                "application/json": {
+                    transactionIds: string[];
+                };
+            };
+        };
+        responses: {
+            200: components["responses"]["EmptyResponse"];
+        };
+    };
+    listRechargeRegions: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: components["responses"]["EmptyResponse"];
+        };
+    };
+    listRechargeApps: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: components["responses"]["EmptyResponse"];
+        };
+    };
     listRechargeProducts: {
         parameters: {
             query?: never;
@@ -6787,6 +7201,73 @@ export interface operations {
             200: components["responses"]["EmptyResponse"];
         };
     };
+    getSocialBiMaster: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: components["responses"]["StatisticsObjectResponse"];
+        };
+    };
+    getSocialBiOverview: {
+        parameters: {
+            query?: {
+                stat_tz?: string;
+                start_ms?: number;
+                end_ms?: number;
+                app_codes?: string;
+                region_id?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: components["responses"]["StatisticsObjectResponse"];
+        };
+    };
+    getSocialBiFunnel: {
+        parameters: {
+            query?: {
+                stat_tz?: string;
+                start_ms?: number;
+                end_ms?: number;
+                app_codes?: string;
+                region_id?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: components["responses"]["StatisticsObjectResponse"];
+        };
+    };
+    getSocialBiKpi: {
+        parameters: {
+            query?: {
+                stat_tz?: string;
+                start_ms?: number;
+                end_ms?: number;
+                period_month?: string;
+                app_codes?: string;
+                operator_user_id?: number;
+            };
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: components["responses"]["StatisticsObjectResponse"];
+        };
+    };
     getFinanceScope: {
         parameters: {
             query?: never;
@@ -7398,6 +7879,18 @@ export interface operations {
             200: components["responses"]["EmptyResponse"];
         };
     };
+    batchDeleteResources: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path?: never;
+            cookie?: never;
+        };
+        requestBody?: components["requestBodies"]["BatchDeleteResourcesRequest"];
+        responses: {
+            200: components["responses"]["EmptyResponse"];
+        };
+    };
     getResource: {
         parameters: {
             query?: never;
@@ -7426,6 +7919,20 @@ export interface operations {
             200: components["responses"]["EmptyResponse"];
         };
     };
+    deleteResource: {
+        parameters: {
+            query?: never;
+            header?: never;
+            path: {
+                resource_id: number;
+            };
+            cookie?: never;
+        };
+        requestBody?: never;
+        responses: {
+            200: components["responses"]["EmptyResponse"];
+        };
+    };
     disableResource: {
         parameters: {
             query?: never;

src/shared/api/request.test.ts

@@ -2,6 +2,7 @@ import { afterEach, expect, test, vi } from "vitest";
 import { apiRequest, setAccessToken, setRefreshHandler, setUnauthorizedHandler } from "./request";
 
 afterEach(() => {
+  vi.useRealTimers();
   setAccessToken("");
   setRefreshHandler(null);
   setUnauthorizedHandler(null);
@@ -59,3 +60,27 @@ test("shares one refresh request across concurrent stale access token responses"
   expect(refreshCount).toBe(1);
   expect(fetch).toHaveBeenCalledTimes(4);
 });
+
+test("retries idempotent reads after a transient network failure", async () => {
+  vi.useFakeTimers();
+  vi.stubGlobal(
+    "fetch",
+    vi
+      .fn()
+      .mockRejectedValueOnce(new TypeError("Failed to fetch"))
+      .mockResolvedValueOnce(new Response(JSON.stringify({ code: 0, data: { ok: true } })))
+  );
+
+  const request = apiRequest("/v1/admin/apps");
+
+  await vi.advanceTimersByTimeAsync(350);
+  await expect(request).resolves.toEqual({ ok: true });
+  expect(fetch).toHaveBeenCalledTimes(2);
+});
+
+test("does not replay mutations after a network failure", async () => {
+  vi.stubGlobal("fetch", vi.fn().mockRejectedValueOnce(new TypeError("Failed to fetch")));
+
+  await expect(apiRequest("/v1/admin/countries", { body: {}, method: "POST" })).rejects.toThrow("Failed to fetch");
+  expect(fetch).toHaveBeenCalledTimes(1);
+});

src/shared/api/request.ts

@@ -3,6 +3,8 @@ import { API_BASE_URL } from "@/shared/config/env.js";
 const TOKEN_KEY = "hyapp-admin.access-token";
 const APP_CODE_KEY = "hyapp-admin.app-code";
 const APP_CODE_HEADER = "X-App-Code";
+const NETWORK_RETRY_ATTEMPTS = 2;
+const NETWORK_RETRY_DELAY_MS = 350;
 
 let accessToken = window.localStorage.getItem(TOKEN_KEY) || "";
 let selectedAppCode = normalizeAppCode(window.localStorage.getItem(APP_CODE_KEY) || "lalu");
@@ -102,7 +104,7 @@ export async function apiRequest<TData = unknown, TBody = unknown>(
     requestHeaders[APP_CODE_HEADER] = selectedAppCode;
   }
 
-  const response = await fetch(url, {
+  const response = await fetchWithNetworkRetry(url, {
     method,
     headers: requestHeaders,
     body: body === undefined ? undefined : body instanceof FormData ? body : JSON.stringify(body),
@@ -155,6 +157,34 @@ function resolveErrorMessage(response: Response, message?: string) {
   return message || response.statusText || "请求失败";
 }
 
+async function fetchWithNetworkRetry(url: string, init: RequestInit) {
+  const method = String(init.method || "GET").toUpperCase();
+  const maxAttempts = method === "GET" || method === "HEAD" ? NETWORK_RETRY_ATTEMPTS + 1 : 1;
+  let lastError: unknown;
+
+  for (let attempt = 1; attempt <= maxAttempts; attempt += 1) {
+    try {
+      return await fetch(url, init);
+    } catch (error) {
+      lastError = error;
+      if (attempt >= maxAttempts) {
+        break;
+      }
+
+      // GAAP occasionally resets the browser HTTP/2 stream before a response exists; retry only idempotent reads.
+      await delay(NETWORK_RETRY_DELAY_MS * attempt);
+    }
+  }
+
+  throw lastError;
+}
+
+function delay(ms: number) {
+  return new Promise((resolve) => {
+    window.setTimeout(resolve, ms);
+  });
+}
+
 function buildURL(path: string, query?: QueryParams) {
   const url = new URL(`${API_BASE_URL}${path}`, window.location.origin);
   if (query) {

src/shared/api/types.ts

@@ -316,6 +316,7 @@ export interface CoinAdjustmentDto {
     operator?: CoinAdjustmentOperatorDto;
     operatorUserId?: string;
     reason?: string;
+    remark?: string;
     transactionId: string;
     user: CoinLedgerUserDto;
     userId: string;
@@ -325,6 +326,7 @@ export interface CoinAdjustmentPayload {
     amount: number;
     commandId?: string;
     reason: string;
+    remark: string;
     targetUserId: string;
 }
 
@@ -333,6 +335,7 @@ export interface CoinAdjustmentCreateDto {
     availableDelta: number;
     balanceAfter: number;
     reason?: string;
+    remark?: string;
     transactionId: string;
     user: CoinLedgerUserDto;
 }
@@ -681,6 +684,7 @@ export interface ManagerDto {
     canGrantAvatarFrame?: boolean;
     canGrantBadge?: boolean;
     canGrantVehicle?: boolean;
+    canGrantVip?: boolean;
     canTransferUserCountry?: boolean;
     canUpdateUserLevel?: boolean;
     contact?: string;
@@ -703,6 +707,7 @@ export interface CreateManagerPayload {
     canGrantAvatarFrame?: boolean;
     canGrantBadge?: boolean;
     canGrantVehicle?: boolean;
+    canGrantVip?: boolean;
     canTransferUserCountry?: boolean;
     canUpdateUserLevel?: boolean;
     contact?: string;
@@ -717,6 +722,7 @@ export interface UpdateManagerPayload {
     canGrantAvatarFrame?: boolean;
     canGrantBadge?: boolean;
     canGrantVehicle?: boolean;
+    canGrantVip?: boolean;
     canTransferUserCountry?: boolean;
     canUpdateUserLevel?: boolean;
     contact?: string;

src/shared/ui/TimeRangeFilter.jsx

@@ -18,7 +18,9 @@ const quickRanges = [
 ];
 const weekLabels = ["一", "二", "三", "四", "五", "六", "日"];
 
-export function TimeRangeFilter({ className = "", disabled = false, label = "时间", onChange, value }) {
+// withTime=false 时是纯日期区间选择器：隐藏时/分与小时级快捷区间，
+// 选中的开始/结束日分别取当天 00:00:00.000 与 23:59:59.999 的本地毫秒。
+export function TimeRangeFilter({ className = "", disabled = false, label = "时间", onChange, value, withTime = true }) {
     const range = useMemo(() => normalizeRange(value), [value]);
     const [anchorEl, setAnchorEl] = useState(null);
     const [draft, setDraft] = useState(() => range);
@@ -39,7 +41,14 @@ export function TimeRangeFilter({ className = "", disabled = false, label = "时
         }
     }, [open, range]);
 
-    const displayLabel = useMemo(() => timeRangeLabel(label, range), [label, range]);
+    const formatPart = withTime ? formatRangePart : formatDayPart;
+    const displayLabel = useMemo(
+        () =>
+            !range.startMs && !range.endMs
+                ? label
+                : `${formatPart(range.startMs) || "不限"} - ${formatPart(range.endMs) || "不限"}`,
+        [formatPart, label, range],
+    );
 
     const openPopover = (event) => {
         if (disabled) {
@@ -71,15 +80,12 @@ export function TimeRangeFilter({ className = "", disabled = false, label = "时
     const changeDay = (day) => {
         setDraft((current) => {
             const base = dateForField(current, activeField, viewDate);
-            const nextDate = new Date(
-                day.getFullYear(),
-                day.getMonth(),
-                day.getDate(),
-                base.getHours(),
-                base.getMinutes(),
-                0,
-                0,
-            );
+            const timeParts = withTime
+                ? [base.getHours(), base.getMinutes(), 0, 0]
+                : activeField === "start"
+                  ? [0, 0, 0, 0]
+                  : [23, 59, 59, 999];
+            const nextDate = new Date(day.getFullYear(), day.getMonth(), day.getDate(), ...timeParts);
             return setRangeField(current, activeField, nextDate.getTime());
         });
         setViewDate(new Date(day.getFullYear(), day.getMonth(), 1));
@@ -105,7 +111,7 @@ export function TimeRangeFilter({ className = "", disabled = false, label = "时
         event.stopPropagation();
         const nextRange = normalizeRange(draft);
         if (nextRange.startMs && nextRange.endMs && nextRange.endMs <= nextRange.startMs) {
-            setError("结束时间必须晚于开始时间");
+            setError(withTime ? "结束时间必须晚于开始时间" : "结束日期不能早于开始日期");
             return;
         }
         applyRange(nextRange);
@@ -136,27 +142,31 @@ export function TimeRangeFilter({ className = "", disabled = false, label = "时
                 onClose={closePopover}
             >
                 <form className={styles.panel} onSubmit={submitDraft}>
-                    <div className={styles.quickRanges}>
-                        {quickRanges.map(([quickLabel, durationMs]) => (
-                            <Button
-                                key={quickLabel}
-                                className={styles.quickButton}
-                                onClick={() => applyQuickRange(durationMs)}
-                            >
-                                {quickLabel}
-                            </Button>
-                        ))}
-                    </div>
+                    {withTime ? (
+                        <div className={styles.quickRanges}>
+                            {quickRanges.map(([quickLabel, durationMs]) => (
+                                <Button
+                                    key={quickLabel}
+                                    className={styles.quickButton}
+                                    onClick={() => applyQuickRange(durationMs)}
+                                >
+                                    {quickLabel}
+                                </Button>
+                            ))}
+                        </div>
+                    ) : null}
                     <div className={styles.rangeFields}>
                         <RangeFieldButton
                             active={activeField === "start"}
-                            label="开始时间"
+                            formatPart={formatPart}
+                            label={withTime ? "开始时间" : "开始日期"}
                             value={draft.startMs}
                             onClick={() => activateField("start")}
                         />
                         <RangeFieldButton
                             active={activeField === "end"}
-                            label="结束时间"
+                            formatPart={formatPart}
+                            label={withTime ? "结束时间" : "结束日期"}
                             value={draft.endMs}
                             onClick={() => activateField("end")}
                         />
@@ -197,34 +207,36 @@ export function TimeRangeFilter({ className = "", disabled = false, label = "时
                             );
                         })}
                     </div>
-                    <div className={styles.timeGrid}>
-                        <TextField
-                            label="时"
-                            select
-                            size="small"
-                            value={String(selectedDate.getHours())}
-                            onChange={(event) => changeTime("hour", event.target.value)}
-                        >
-                            {Array.from({ length: 24 }, (_, hour) => (
-                                <MenuItem key={hour} value={String(hour)}>
-                                    {pad2(hour)}
-                                </MenuItem>
-                            ))}
-                        </TextField>
-                        <TextField
-                            label="分"
-                            select
-                            size="small"
-                            value={String(selectedDate.getMinutes())}
-                            onChange={(event) => changeTime("minute", event.target.value)}
-                        >
-                            {Array.from({ length: 60 }, (_, minute) => (
-                                <MenuItem key={minute} value={String(minute)}>
-                                    {pad2(minute)}
-                                </MenuItem>
-                            ))}
-                        </TextField>
-                    </div>
+                    {withTime ? (
+                        <div className={styles.timeGrid}>
+                            <TextField
+                                label="时"
+                                select
+                                size="small"
+                                value={String(selectedDate.getHours())}
+                                onChange={(event) => changeTime("hour", event.target.value)}
+                            >
+                                {Array.from({ length: 24 }, (_, hour) => (
+                                    <MenuItem key={hour} value={String(hour)}>
+                                        {pad2(hour)}
+                                    </MenuItem>
+                                ))}
+                            </TextField>
+                            <TextField
+                                label="分"
+                                select
+                                size="small"
+                                value={String(selectedDate.getMinutes())}
+                                onChange={(event) => changeTime("minute", event.target.value)}
+                            >
+                                {Array.from({ length: 60 }, (_, minute) => (
+                                    <MenuItem key={minute} value={String(minute)}>
+                                        {pad2(minute)}
+                                    </MenuItem>
+                                ))}
+                            </TextField>
+                        </div>
+                    ) : null}
                     {error ? <div className={styles.error}>{error}</div> : null}
                     <div className={styles.actions}>
                         <Button onClick={clearRange}>清空</Button>
@@ -238,7 +250,7 @@ export function TimeRangeFilter({ className = "", disabled = false, label = "时
     );
 }
 
-function RangeFieldButton({ active, label, onClick, value }) {
+function RangeFieldButton({ active, formatPart = formatRangePart, label, onClick, value }) {
     return (
         <button
             className={[styles.rangeField, active ? styles.rangeFieldActive : ""].filter(Boolean).join(" ")}
@@ -246,7 +258,7 @@ function RangeFieldButton({ active, label, onClick, value }) {
             onClick={onClick}
         >
             <span className={styles.rangeFieldLabel}>{label}</span>
-            <span className={styles.rangeFieldValue}>{formatRangePart(value) || "不限"}</span>
+            <span className={styles.rangeFieldValue}>{formatPart(value) || "不限"}</span>
         </button>
     );
 }
@@ -337,6 +349,15 @@ function formatRangePart(value) {
     return text ? text.replace("-", "/").replace("-", "/") : "";
 }
 
+function formatDayPart(value) {
+    const ms = normalizeMs(value);
+    if (!ms) {
+        return "";
+    }
+    const date = new Date(ms);
+    return `${date.getFullYear()}/${pad2(date.getMonth() + 1)}/${pad2(date.getDate())}`;
+}
+
 function msToDatetimeText(value) {
     const ms = normalizeMs(value);
     if (!ms) {

src/shared/ui/TimeRangeFilter.test.jsx

@@ -26,6 +26,33 @@ describe("TimeRangeFilter helpers", () => {
         expect(timeRangeLabel("时间", {})).toBe("时间");
     });
 
+    test("date-only mode hides time controls and returns day boundaries", async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        const startMs = datetimeTextToMs("2026-05-13 00:00");
+        const endMs = datetimeTextToMs("2026-05-20 23:59");
+
+        render(<TimeRangeFilter label="自定义区间" value={{ endMs, startMs }} withTime={false} onChange={onChange} />);
+
+        await user.click(screen.getByRole("button", { name: /自定义区间/ }));
+
+        expect(screen.queryByLabelText("时")).toBeNull();
+        expect(screen.queryByRole("button", { name: "近 24 小时" })).toBeNull();
+
+        await user.click(screen.getByRole("button", { name: /结束日期/ }));
+        await user.click(screen.getByRole("button", { name: "21" }));
+        await user.click(screen.getByRole("button", { name: "确定" }));
+
+        const next = onChange.mock.calls[0][0];
+        const end = new Date(next.endMs);
+        expect(next.startMs).toBe(startMs);
+        expect(end.getFullYear()).toBe(2026);
+        expect(end.getMonth()).toBe(4);
+        expect(end.getDate()).toBe(21);
+        expect(end.getHours()).toBe(23);
+        expect(end.getMinutes()).toBe(59);
+    });
+
     test("confirms picker changes without submitting an outer form", async () => {
         const user = userEvent.setup();
         const onChange = vi.fn();

src/shared/ui/UploadField.jsx

@@ -2,10 +2,16 @@ import DeleteOutlineOutlined from "@mui/icons-material/DeleteOutlineOutlined";
 import FileUploadOutlined from "@mui/icons-material/FileUploadOutlined";
 import ImageOutlined from "@mui/icons-material/ImageOutlined";
 import InsertDriveFileOutlined from "@mui/icons-material/InsertDriveFileOutlined";
+import VisibilityOutlined from "@mui/icons-material/VisibilityOutlined";
 import CircularProgress from "@mui/material/CircularProgress";
+import Dialog from "@mui/material/Dialog";
+import DialogActions from "@mui/material/DialogActions";
+import DialogContent from "@mui/material/DialogContent";
+import DialogTitle from "@mui/material/DialogTitle";
 import Tooltip from "@mui/material/Tooltip";
 import { useEffect, useId, useRef, useState } from "react";
 import { uploadFile, uploadImage } from "@/shared/api/upload";
+import { Button } from "@/shared/ui/Button.jsx";
 import { useToast } from "@/shared/ui/ToastProvider.jsx";
 import styles from "./UploadField.module.css";
 
@@ -33,6 +39,7 @@ export function UploadField({
     const { showToast } = useToast();
     const [uploading, setUploading] = useState(false);
     const [localPreview, setLocalPreview] = useState(null);
+    const [videoPreviewOpen, setVideoPreviewOpen] = useState(false);
     const isImage = kind === "image";
     const uploadMode = uploadKind || kind;
     const useImageUpload = uploadMode === "image";
@@ -40,6 +47,7 @@ export function UploadField({
     const assetKind = localPreview?.assetKind || getAssetKind(value, kind);
     const displayName = localPreview?.name || getDisplayValue(value);
     const inputAccept = accept !== undefined ? accept : useImageUpload && isImage ? imageAccept : undefined;
+    const canPreviewVideo = Boolean(source && assetKind === "mp4");
 
     useEffect(() => {
         return () => {
@@ -89,6 +97,7 @@ export function UploadField({
 
     const clearValue = () => {
         setLocalPreview(null);
+        setVideoPreviewOpen(false);
         onChange("");
     };
 
@@ -142,6 +151,21 @@ export function UploadField({
                                 </button>
                             </span>
                         </Tooltip>
+                        {canPreviewVideo ? (
+                            <Tooltip arrow title="查看 MP4">
+                                <span>
+                                    <button
+                                        className={styles.action}
+                                        disabled={disabled || uploading}
+                                        type="button"
+                                        onClick={() => setVideoPreviewOpen(true)}
+                                    >
+                                        <VisibilityOutlined fontSize="small" />
+                                        查看
+                                    </button>
+                                </span>
+                            </Tooltip>
+                        ) : null}
                         {source ? (
                             <Tooltip arrow title="清除">
                                 <span>
@@ -160,6 +184,12 @@ export function UploadField({
                     </span>
                 </div>
             </div>
+            <VideoPreviewDialog
+                label={label}
+                open={videoPreviewOpen}
+                src={canPreviewVideo ? source : ""}
+                onClose={() => setVideoPreviewOpen(false)}
+            />
             <input
                 ref={inputRef}
                 accept={inputAccept}
@@ -172,6 +202,24 @@ export function UploadField({
     );
 }
 
+function VideoPreviewDialog({ label, onClose, open, src }) {
+    return (
+        <Dialog fullWidth maxWidth="sm" open={open} onClose={onClose}>
+            <DialogTitle>{label} MP4</DialogTitle>
+            <DialogContent>
+                <div className={styles.videoPreviewFrame}>
+                    {src ? (
+                        <video className={styles.videoPreview} controls playsInline preload="metadata" src={src} />
+                    ) : null}
+                </div>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose}>关闭</Button>
+            </DialogActions>
+        </Dialog>
+    );
+}
+
 function AssetPreview({ assetKind, isImage, src }) {
     if (!src) {
         return (
@@ -368,6 +416,9 @@ function getAssetKind(value, kind, contentType = "") {
     if (extension === "pag") {
         return "pag";
     }
+    if (extension === "mp4") {
+        return "mp4";
+    }
     if (isRasterImageExtension(extension)) {
         return "image";
     }
@@ -378,6 +429,9 @@ function getAssetKind(value, kind, contentType = "") {
     if (normalizedType.includes("pag")) {
         return "pag";
     }
+    if (normalizedType === "video/mp4") {
+        return "mp4";
+    }
     if (isRasterImageContentType(normalizedType)) {
         return "image";
     }
@@ -422,5 +476,8 @@ function assetKindLabel(assetKind, isImage) {
     if (assetKind === "pag") {
         return "PAG";
     }
+    if (assetKind === "mp4") {
+        return "MP4";
+    }
     return isImage ? "图片" : "文件";
 }