`。
+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;
+}
diff --git a/databi/src/social/useSocialBiData.js b/databi/src/social/useSocialBiData.js
new file mode 100644
index 0000000..036df7d
--- /dev/null
+++ b/databi/src/social/useSocialBiData.js
@@ -0,0 +1,204 @@
+// 社交 BI v2 的数据层：负责 master/overview/kpi 三个接口的拉取与派生行，
+// 视图不直接调 API，只消费这里的产物（原始 snake_case 指标行 + 维度字段）。
+
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { 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 function useSocialBiData(filters) {
+ const [master, setMaster] = useState(null);
+ const [overview, setOverview] = 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);
+ }
+ });
+ 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]);
+
+ useEffect(() => {
+ 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 }),
+ fetchSocialBiKpi({ appCodes, endMs, startMs, statTz: SOCIAL_BI_TZ })
+ ]).then(([overviewResult, 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 (kpiResult.status === "fulfilled") {
+ setKpi(kpiResult.value);
+ Object.entries(kpiResult.value?.app_errors || {}).forEach(([appCode, message]) => {
+ nextErrors.push(`${appCode}: ${message}`);
+ });
+ } else {
+ setKpi(null);
+ nextErrors.push(`KPI 数据加载失败: ${kpiResult.reason?.message || "未知错误"}`);
+ }
+ setErrors(nextErrors);
+ setIsLoading(false);
+ });
+ }, [appCodes, range, refreshToken]);
+
+ const refresh = useCallback(() => {
+ setRefreshToken((current) => current + 1);
+ }, []);
+
+ const derived = useMemo(() => deriveRows(overview, filters, master), [filters, master, overview]);
+
+ return {
+ appCodes,
+ derived,
+ errors,
+ 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;
+}
diff --git a/databi/src/social/views/DataTableView.jsx b/databi/src/social/views/DataTableView.jsx
new file mode 100644
index 0000000..e4479f8
--- /dev/null
+++ b/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 = (
+
+ {SKELETON_WIDTHS.map((width) => (
+
+ ))}
+
+ );
+ } else if (!baseRows.length) {
+ content = (
+
+ 当前维度暂无数据
+
+ {dim.dims.includes("region")
+ ? "该区间没有区域级数据，可能尚未配置区域目录；试试更换日期区间或切换其它维度"
+ : "试试更换日期区间、调整 App 筛选或切换其它维度"}
+
+
+ );
+ } else if (!visibleMetrics.length) {
+ content = (
+
+ 所有列组已隐藏
+ 点击上方列组开关，恢复需要查看的指标列
+
+ );
+ } else {
+ content = (
+
+
+
+
+ {dimColumns.map((column, index) => (
+ |
+ {column.label}
+ |
+ ))}
+ {visibleGroups.map((group) => (
+
+ {group.label}
+ |
+ ))}
+
+
+ {visibleMetrics.map((key) => {
+ const isSorted = activeSort?.key === key;
+ return (
+ | handleSort(key)}
+ >
+
+ {metricLabel(key)}
+
+ {isSorted ? {activeSort.dir === "desc" ? "↓" : "↑"} : null}
+ |
+ );
+ })}
+
+
+
+ {totalRow ? (
+
+ {dimColumns.map((column, index) => (
+ |
+ {column.totalText}
+ |
+ ))}
+ {visibleMetrics.map((key) => (
+ {formatMetric(key, totalRow[key])} |
+ ))}
+
+ ) : null}
+ {renderRows.map((row, rowIndex) => (
+
+ {dimColumns.map((column, index) => (
+ |
+ {column.value(row)}
+ |
+ ))}
+ {visibleMetrics.map((key) => (
+ {formatMetric(key, row[key])} |
+ ))}
+
+ ))}
+
+ {isTruncated ? (
+
+
+ | 已截断，共 {sortedRows.length} 行，可导出 CSV 查看全部 |
+
+
+ ) : null}
+
+
+ 数据明细
+
+ {rangeLabel(range)} · 共 {sortedRows.length} 行
+
+
+
+
+ {DIMENSIONS.map((item) => (
+
+ ))}
+
+
+ 列组
+ {METRIC_GROUPS.map((group) => {
+ const isOpen = !closedGroups.includes(group.key);
+ return (
+
+ );
+ })}
+
+ {hasRestricted ?
已按数据范围过滤 : null}
+
+ }
+ variant="outlined"
+ >
+ 导出 CSV
+
+
+
");
+ },
+ 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 (
+
+
+
+ {metricLabel(metricKey)}
+
+ {!isBlank(deltaValue) ? (
+ {formatDeltaRate(deltaValue)}
+ ) : null}
+
+ {formatMetric(metricKey, value)}
+ {hasSpark ? : null}
+
+ );
+}
+
+function OverviewSkeleton() {
+ return (
+
+
+ {HERO_METRICS.map((metric) => (
+
+
+
+
+
+ ))}
+
+
+
+
+
+
+ );
+}
+
+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 ;
+ }
+
+ return (
+
+ {derived.appErrors.length || hasRestricted ? (
+
+ {derived.appErrors.map((item) => (
+
+ {item.app_name}: {item.error}
+
+ ))}
+ {hasRestricted ? 已按你的数据范围过滤 : null}
+
+ ) : null}
+
+
+ {HERO_METRICS.map((metric) => (
+
+ ))}
+
+
+
+
+
+ {hasTrend ? (
+
+ ) : (
+
+ 暂无趋势数据
+ 当前筛选范围内没有日级数据，试试放宽日期或 App 筛选
+
+ )}
+
+
+
+ 渠道构成
+ 谷歌 / 三方 / 币商充值
+
+
+ {hasChannelData ? (
+
+ ) : (
+
+ 暂无渠道拆分数据
+ 所选范围内各渠道充值均为空或 0
+
+ )}
+
+
+
+
+
+ {compareRows.length ? (
+
+ {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 (
+
+
+
+ {row.app_name}
+
+
+
{formatMetric(compareMetric, row.metrics[compareMetric])}
+
+
+ );
+ })}
+
+ ) : (
+
+ 暂无 App 数据
+ 调整顶部 App / 日期筛选后重试
+
+ )}
+
+
+ {topRegions.length ? (
+
+ {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 (
+
+
+ {row.region_name}
+
+
+ {row.app_name}
+
+
+
+
{formatMetric("recharge_usd_minor", row.recharge_usd_minor)}
+
+ );
+ })}
+
+ ) : (
+
+ 暂无区域数据
+ 该范围未配置区域目录，或你没有对应区域的数据权限
+
+ )}
+
暂无数据`;
+ }
+ return `${entry.label}
${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 ;
+ }
+
+ if (!regionTotals.length) {
+ return (
+
+
+ 暂无区域数据
+ 检查顶栏区域筛选，或该 App 尚未配置区域目录（legacy App 在其 Mongo sys_region_config，hyapp 在区域管理）
+
+
+ );
+ }
+
+ return (
+ <>
+
+
+ 覆盖区域数
+ {formatCount(regionCount)}
+ 按 App × 区域去重 · 覆盖 {formatCount(appCount)} 个 App
+
+
+ 覆盖国家数
+ {formatCount(countryCount)}
+ countryTotals 按国家去重（跨 App 合并）
+
+
+
+ 区域充值合计
+
+ {formatMoneyMinor(regionSummary.recharge_usd_minor)}
+ 当前区间 · 可见区域行合计
+
+
+
+
+
+
全球分布
+
+ {countryCount ? `${formatCount(countryCount)} 个国家 · 跨 App 合并` : "国家粒度"}
+ {mapIndex.unmatchedCount ? ` · ${mapIndex.unmatchedCount} 个国家未匹配到地图` : ""}
+
+
+
+ {MAP_METRICS.map((item) => (
+
+ ))}
+
+
+
+ {mapIndex.entries.size ? (
+
+ ) : (
+
+ 暂无国家数据
+ 当前区间没有国家粒度数据，或国家编码未能匹配到世界地图
+
+ )}
+
+ {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 (
+
+
+
+ {row.region_name}
+
+ {row.restricted ? (
+
+ 范围裁剪
+
+ ) : null}
+
+
+ {row.app_name}
+
+
+
+
+ {metricLabel("recharge_usd_minor")}
+
+ {formatMoneyMinor(row.recharge_usd_minor)}
+
+
+ {CARD_METRICS.map((metric) => (
+
+
+ {metricLabel(metric)}
+
+ {formatMetric(metric, row[metric])}
+
+ ))}
+
+
+ 占 {row.app_name} 总充值
+ {share === null ? "--" : formatRatioPercent(share)}
+
+
+
+
+
+
+ );
+ })}
+
+ 区域下钻
+ 点击区域行展开国家明细 · 按充值降序
+
+
+
+
+
+ | 地区 / 国家 |
+ App |
+ {TABLE_METRICS.map((metric) => (
+
+
+ {metricLabel(metric)}
+
+ |
+ ))}
+
+
+
+
+ | 全部区域 |
+ {formatCount(appCount)} 个 App |
+ {TABLE_METRICS.map((metric) => (
+ {formatMetric(metric, regionSummary[metric])} |
+ ))}
+
+ {regionRows.map((row) => {
+ const key = `${row.app_code}:${row.region_id}`;
+ const isOpen = expandedRegions.has(key);
+ const children = isOpen ? countriesByRegion.get(key) || [] : [];
+ return (
+
+ toggleRegion(key)}>
+ |
+
+
+ ▸
+
+ {row.region_name}
+ {row.restricted ? (
+
+ 范围裁剪
+
+ ) : null}
+
+ |
+
+
+
+ {row.app_name}
+
+ |
+ {TABLE_METRICS.map((metric) => (
+ {formatMetric(metric, row[metric])} |
+ ))}
+
+ {isOpen && !children.length ? (
+
+ |
+ 该区域暂无国家明细
+ |
+
+ ) : null}
+ {children.map((child) => (
+
+ |
+ {countryDisplayName(child.country_code, child.country_name)}
+ |
+ {child.app_name} |
+ {TABLE_METRICS.map((metric) => (
+ {formatMetric(metric, child[metric])} |
+ ))}
+
+ ))}
+
+ );
+ })}
+
+
+
+ {[0, 1, 2].map((index) => (
+
+ ))}
+
+
+
+ {[0, 1, 2].map((index) => (
+
+ ))}
+
+
+ );
+}
diff --git a/databi/src/social/views/RetentionView.jsx b/databi/src/social/views/RetentionView.jsx
new file mode 100644
index 0000000..242730e
--- /dev/null
+++ b/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 {formatMetric(key, value)} | ;
+ }
+ if (isBlank(value)) {
+ return -- | ;
+ }
+ 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 (
+
+ {formatRatioPercent(value)}
+ |
+ );
+}
+
+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 (
+
+
+ {RETENTION_SERIES.map(({ key }) => (
+
+ ))}
+
+
+
+
+
+
+
+ 暂无留存数据
+ 当前筛选没有返回任何 App 数据，试试调整日期区间或放宽 App/区域筛选。
+
+
+
+
+ {RETENTION_SERIES.map(({ key }) => {
+ const baseUsers = summary?.[key.replace("_retention_rate", "_retention_base_users")];
+ return (
+
+
+ 整体{metricLabel(key)}
+
+ {formatRatioPercent(summary?.[key])}
+
+ {regionScoped ? "所选区域汇总" : "全部所选 App 汇总"}
+ {isBlank(baseUsers) ? "" : ` · cohort 样本 ${formatCount(baseUsers)} 人`}
+
+
+ );
+ })}
+
+
+
+
+ 新增与次日留存
+ 柱=新增（左轴）· 线=次日留存率（右轴）· 按{granularityLabel}分桶
+
+ {comboOption ? (
+
+ ) : (
+
+ 暂无按日数据
+ 当前筛选没有返回按日序列，无法绘制新增与留存趋势。
+
+ )}
+
+
+
+
+
留存趋势
+
D1 / D7 / D30 · 按{granularityLabel}分桶
+
+
+
+ {appTotals.map((row) => (
+
+ ))}
+
+
+
+ 暂无留存趋势数据
+ {activeTrendApp === ALL ? "当前筛选没有返回按日序列。" : "该 App 在当前区间没有按日序列。"}
+
+ )}
+
+
+
+
+
留存对比
+
D1/D7/D30 底色越深留存越高
+
+
+
+
+
+
+
+
+
+
+ | 对象 |
+ {TABLE_METRIC_KEYS.map((key) => (
+
+
+ {metricLabel(key)}
+
+ |
+ ))}
+
+
+
+
+ | 合计 |
+ {TABLE_METRIC_KEYS.map((key) => renderMetricCell(key, tableTotal?.[key]))}
+
+ {tableRows.map((item) => (
+
+ | {item.label} |
+ {TABLE_METRIC_KEYS.map((key) => renderMetricCell(key, item.row[key]))}
+
+ ))}
+
+
+
+ 暂无对比数据
+ {tableDim === "region" ? "当前筛选下没有区域行，试试放宽顶栏的区域选择。" : "当前筛选下没有 App 合计行。"}
+
+ )}
+
+
+
+ 留存按注册日 cohort 计算；观察期未到的日期显示 "--"。hyapp App 的按日留存暂不提供（仅整段区间口径）。
+
+
+ 暂无 KPI 数据
+ 先在用户管理为运营人员分配 App/区域数据范围
+
+
+ );
+ }
+
+ const summary = kpi.summary || {};
+ const canViewAll = master?.permissions?.kpi_view_all !== false;
+ const canManage = Boolean(master?.permissions?.kpi_manage);
+ const remainingDays = remainingDaysOf(kpi.month_end_ms);
+
+ const heroRate = summary.month_attainment_rate;
+ const attainText = isBlank(heroRate) ? "未设目标" : formatRatioPercent(heroRate);
+ const ringPct = isBlank(heroRate) ? 0 : Math.max(0, Math.min(100, Number(heroRate) * 100));
+ const heroGap = gapMinorOf(summary.month_target_usd_minor, summary.month_recharge_usd_minor);
+ const heroGapText = heroGap === null ? "--" : heroGap <= 0 ? "已达成" : formatMoneyMinor(heroGap);
+ const heroDailyNeed =
+ heroGap !== null && heroGap > 0 && remainingDays > 0 ? formatMoneyMinor(Math.round(heroGap / remainingDays)) : "--";
+
+ return (
+
+
+
+
+ {canViewAll ? "团队 KPI" : "我的 KPI"}
+ 本月充值目标进度 · {kpi.period_month}
+ {!canViewAll ? 仅展示我负责的范围 : null}
+
+
+
+
+ {attainText}
+ 本月达成率
+
+
+
+
+
- 当月充值
+ - {formatMoneyMinor(summary.month_recharge_usd_minor)}
+
+
+
- 月目标
+ - {formatMoneyMinor(summary.month_target_usd_minor)}
+
+
+
- 缺口
+ - {heroGapText}
+
+
+
+
+
+
+
绩效排行
+
+ {kpi.period_month} · {formatCount(summary.operator_count)} 名运营
+
+
+
+ {DIMENSIONS.map((option) => (
+
+ ))}
+
+
+ {SORTS.map((option) => (
+
+ ))}
+
+ {canManage ? (
+
+ ) : null}
+
+
+ {dimension === "person" ? (
+
+ ) : (
+
+ )}
+
+
+ {isDrawerOpen ? (
+
setIsDrawerOpen(false)}
+ onSaved={() => {
+ setIsDrawerOpen(false);
+ refresh();
+ }}
+ />
+ ) : null}
+
+
+
+
+
+
+
+
+
+
+ {[0, 1, 2].map((index) => (
+
+
+
+
+
+ ))}
+
+
+
+ {[0, 1, 2, 3, 4].map((index) => (
+
+ ))}
+
+
+
+
+
+ | 名次 |
+ 运营人员 |
+ App |
+ 区域 |
+
+ 区间充值
+ |
+
+ 当月充值
+ |
+
+ 月目标
+ |
+
+ 达成率
+ |
+
+ 需日均
+ |
+
+
+
+ {rows.map((row, index) => {
+ const item = row.item;
+ const gap = gapMinorOf(item.month_target_usd_minor, item.month_recharge_usd_minor);
+ return (
+
+ |
+
+ |
+
+
+
+ {operatorLabelOf(item)}
+ {item.data_error ? (
+
+ 数据异常
+
+ ) : null}
+
+ {[item.operator_account, item.team || "未分组"].filter(Boolean).join(" · ")}
+
+ |
+
+
+
+ {item.app_name || item.app_code}
+
+ |
+ {regionLabelOf(item)} |
+ {formatMoneyMinor(item.range_recharge_usd_minor)} |
+ {formatMoneyMinor(item.month_recharge_usd_minor)} |
+ {formatMoneyMinor(item.month_target_usd_minor)} |
+
+
+ |
+ {dailyNeedText(gap, remainingDays)} |
+
+ );
+ })}
+
+
+ );
+}
+
+function TeamTable({ rows }) {
+ return (
+
+
+
+ | 名次 |
+ 部门 |
+
+ 人数
+ |
+
+ 区间充值
+ |
+
+ 当月充值
+ |
+
+ 月目标
+ |
+
+ 达成率
+ |
+
+
+
+ {rows.map((row, index) => (
+
+ |
+
+ |
+ {row.team} |
+ {formatCount(row.memberCount)} |
+ {formatMoneyMinor(row.rangeMinor)} |
+ {formatMoneyMinor(row.monthMinor)} |
+ {formatMoneyMinor(row.targetMinor)} |
+
+
+ |
+
+ ))}
+
+
+ );
+}
+
+// 配置目标抽屉：按 运营人员 × App × 区域 编辑当月/当日充值目标（美元），
+// 保存走 PUT /admin/databi/social/kpi-targets（replaceSocialBiKpiTargets），月/日目标填 0 表示清除。
+function KpiTargetDrawer({ appCodes, kpi, onClose, onSaved }) {
+ const [drafts, setDrafts] = useState(() =>
+ (kpi.items || []).map((item) => ({
+ appCode: item.app_code,
+ appName: item.app_name || item.app_code,
+ dailyText: usdInputText(item.daily_target_usd_minor),
+ monthText: usdInputText(item.month_target_usd_minor),
+ operatorAccount: item.operator_account || "",
+ operatorLabel: operatorLabelOf(item),
+ regionId: Number(item.region_id ?? 0),
+ regionName: regionLabelOf(item),
+ userId: item.operator_user_id
+ }))
+ );
+ const [isSaving, setIsSaving] = useState(false);
+ const [saveError, setSaveError] = useState("");
+
+ const hasInvalid = drafts.some(
+ (draft) => usdInputToMinor(draft.monthText) === null || usdInputToMinor(draft.dailyText) === null
+ );
+
+ const updateDraft = (index, key, value) => {
+ setDrafts((current) => current.map((draft, draftIndex) => (draftIndex === index ? { ...draft, [key]: value } : draft)));
+ };
+
+ const handleSave = async () => {
+ const payload = drafts.map((draft) => ({
+ appCode: draft.appCode,
+ dailyTargetUsdMinor: usdInputToMinor(draft.dailyText),
+ periodMonth: kpi.period_month,
+ regionId: draft.regionId,
+ targetUsdMinor: usdInputToMinor(draft.monthText),
+ userId: draft.userId
+ }));
+ setIsSaving(true);
+ setSaveError("");
+ try {
+ await replaceSocialBiKpiTargets(payload);
+ onSaved();
+ } catch (error) {
+ setSaveError(error?.message || "保存失败，请稍后重试");
+ setIsSaving(false);
+ }
+ };
+
+ return (
+
+ );
+}
diff --git a/databi/src/social/views/data-table-view.css b/databi/src/social/views/data-table-view.css
new file mode 100644
index 0000000..bfa79ba
--- /dev/null
+++ b/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;
+}
diff --git a/databi/src/social/views/overview-view.css b/databi/src/social/views/overview-view.css
new file mode 100644
index 0000000..a253e3d
--- /dev/null
+++ b/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));
+ }
+}
diff --git a/databi/src/social/views/regions-view.css b/databi/src/social/views/regions-view.css
new file mode 100644
index 0000000..eef83b2
--- /dev/null
+++ b/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);
+}
diff --git a/databi/src/social/views/retention-view.css b/databi/src/social/views/retention-view.css
new file mode 100644
index 0000000..598261a
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/databi/src/social/views/team-kpi-view.css b/databi/src/social/views/team-kpi-view.css
new file mode 100644
index 0000000..dd77928
--- /dev/null
+++ b/databi/src/social/views/team-kpi-view.css
@@ -0,0 +1,371 @@
+/* 人员绩效视图（TeamKpiView）专属样式：仅消费 social-v2.css 的 token，类名前缀 sbi-kpi-。
+ 金银铜名次徽标与图表网格色 #eef3f9 为本视图的功能色，其余颜色一律走 token。 */
+
+.sbi-kpi-view {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+/* ---------- Hero：1 大卡（环形进度）+ 3 小卡 ---------- */
+
+.sbi-kpi-hero {
+ display: grid;
+ grid-template-columns: minmax(0, 1.8fr) repeat(3, minmax(0, 1fr));
+ gap: 16px;
+}
+
+.sbi-kpi-hero-body {
+ display: flex;
+ align-items: center;
+ gap: 28px;
+ padding: 18px;
+}
+
+.sbi-kpi-ring {
+ --sbi-kpi-pct: 0;
+ display: grid;
+ flex: none;
+ width: 138px;
+ height: 138px;
+ place-items: center;
+ border-radius: 50%;
+ background: conic-gradient(var(--sbi-accent) calc(var(--sbi-kpi-pct) * 1%), #eef3f9 0);
+}
+
+.sbi-kpi-ring-hole {
+ display: grid;
+ gap: 2px;
+ width: 104px;
+ height: 104px;
+ place-content: center;
+ place-items: center;
+ border-radius: 50%;
+ background: var(--sbi-card);
+}
+
+.sbi-kpi-ring-hole strong {
+ font-size: 22px;
+ font-variant-numeric: tabular-nums;
+}
+
+.sbi-kpi-ring-hole strong.is-muted {
+ color: var(--sbi-text-3);
+ font-size: 14px;
+ font-weight: 700;
+}
+
+.sbi-kpi-ring-hole small {
+ color: var(--sbi-text-3);
+ font-size: 11px;
+}
+
+.sbi-kpi-hero-stats {
+ display: grid;
+ flex: 1;
+ gap: 11px;
+ min-width: 0;
+ margin: 0;
+}
+
+.sbi-kpi-hero-stats > div {
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+ gap: 12px;
+ padding-bottom: 9px;
+ border-bottom: 1px dashed var(--sbi-border);
+}
+
+.sbi-kpi-hero-stats > div:last-child {
+ padding-bottom: 0;
+ border-bottom: 0;
+}
+
+.sbi-kpi-hero-stats dt {
+ color: var(--sbi-text-2);
+ font-size: 12.5px;
+}
+
+.sbi-kpi-hero-stats dd {
+ margin: 0;
+ font-size: 17px;
+ font-weight: 720;
+ font-variant-numeric: tabular-nums;
+}
+
+.sbi-kpi-mini {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ gap: 5px;
+ padding: 16px 18px;
+}
+
+.sbi-kpi-mini-label {
+ align-self: flex-start;
+ color: var(--sbi-text-2);
+ font-size: 12.5px;
+ font-weight: 640;
+}
+
+.sbi-kpi-mini-value {
+ font-size: 22px;
+ font-weight: 760;
+ font-variant-numeric: tabular-nums;
+}
+
+.sbi-kpi-mini-note {
+ color: var(--sbi-text-3);
+ font-size: 11.5px;
+}
+
+/* ---------- 排行榜 ---------- */
+
+.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-attain {
+ display: inline-flex;
+ align-items: center;
+ gap: 8px;
+}
+
+.sbi-kpi-bar {
+ display: inline-block;
+ width: 96px;
+ height: 6px;
+ overflow: hidden;
+ border-radius: 999px;
+ background: #eef3f9;
+}
+
+.sbi-kpi-bar-fill {
+ display: block;
+ height: 100%;
+ border-radius: 999px;
+ background: var(--sbi-accent-grad);
+}
+
+.sbi-kpi-bar-fill.is-done {
+ background: var(--sbi-up);
+}
+
+.sbi-kpi-attain-value {
+ min-width: 52px;
+ text-align: right;
+ font-variant-numeric: tabular-nums;
+}
+
+.sbi-kpi-no-target {
+ color: var(--sbi-text-3);
+ font-size: 12px;
+}
+
+/* ---------- 骨架 ---------- */
+
+.sbi-kpi-hero-loading {
+ display: flex;
+ align-items: center;
+ gap: 28px;
+ padding: 18px;
+}
+
+.sbi-kpi-skeleton-ring {
+ flex: none;
+ width: 138px;
+ height: 138px;
+ border-radius: 50%;
+}
+
+.sbi-kpi-skeleton-lines {
+ display: grid;
+ flex: 1;
+ gap: 14px;
+}
+
+.sbi-kpi-table-skeleton {
+ display: grid;
+ gap: 14px;
+ padding: 18px;
+}
+
+/* ---------- 配置目标抽屉 ---------- */
+
+.sbi-kpi-drawer-mask {
+ position: fixed;
+ inset: 0;
+ z-index: 60;
+ background: rgba(16, 27, 45, 0.42);
+}
+
+.sbi-kpi-drawer {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ display: flex;
+ flex-direction: column;
+ width: min(760px, 94vw);
+ border-left: 1px solid var(--sbi-border);
+ background: var(--sbi-card);
+ box-shadow: var(--sbi-shadow);
+ animation: sbi-kpi-slide-in 180ms ease;
+}
+
+@keyframes sbi-kpi-slide-in {
+ from {
+ transform: translateX(28px);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+.sbi-kpi-drawer-header {
+ display: flex;
+ align-items: flex-start;
+ gap: 12px;
+ padding: 16px 20px;
+ border-bottom: 1px solid var(--sbi-border);
+}
+
+.sbi-kpi-drawer-title {
+ display: grid;
+ gap: 3px;
+}
+
+.sbi-kpi-drawer-title strong {
+ font-size: 15px;
+}
+
+.sbi-kpi-drawer-title small {
+ color: var(--sbi-text-3);
+ font-size: 12px;
+}
+
+.sbi-kpi-drawer-close {
+ display: grid;
+ width: 30px;
+ height: 30px;
+ place-items: center;
+ margin-left: auto;
+ border: 1px solid var(--sbi-border);
+ border-radius: 8px;
+ background: var(--sbi-card);
+ color: var(--sbi-text-2);
+ font-size: 16px;
+ line-height: 1;
+ cursor: pointer;
+}
+
+.sbi-kpi-drawer-close:hover {
+ border-color: var(--sbi-accent);
+ color: var(--sbi-accent);
+}
+
+.sbi-kpi-drawer-body {
+ flex: 1;
+ overflow: auto;
+ padding: 0 20px;
+}
+
+.sbi-kpi-drawer-footer {
+ display: flex;
+ align-items: center;
+ justify-content: flex-end;
+ gap: 10px;
+ padding: 14px 20px;
+ border-top: 1px solid var(--sbi-border);
+}
+
+.sbi-kpi-drawer-error {
+ margin-right: auto;
+ color: var(--sbi-down);
+ font-size: 12.5px;
+}
+
+.sbi-kpi-input {
+ width: 112px;
+ height: 30px;
+ padding: 0 8px;
+ border: 1px solid var(--sbi-border);
+ border-radius: 7px;
+ background: var(--sbi-card);
+ color: var(--sbi-text);
+ font-size: 13px;
+ text-align: right;
+ font-variant-numeric: tabular-nums;
+}
+
+.sbi-kpi-input:focus {
+ border-color: var(--sbi-accent);
+ outline: none;
+ box-shadow: 0 0 0 3px rgba(37, 87, 214, 0.12);
+}
+
+.sbi-kpi-input.is-invalid {
+ border-color: var(--sbi-down);
+}
diff --git a/databi/src/styles/index.css b/databi/src/styles/index.css
index 8fc9adc..749b25b 100644
--- a/databi/src/styles/index.css
+++ b/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";
diff --git a/databi/src/styles/social-bi.css b/databi/src/styles/social-bi.css
deleted file mode 100644
index 64540c7..0000000
--- a/databi/src/styles/social-bi.css
+++ /dev/null
@@ -1,773 +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;
- }
-}
-
-.social-bi-target-button.MuiButton-root {
- height: var(--social-bi-control-height);
- min-height: var(--social-bi-control-height);
- border-radius: 6px;
- border-color: #1688d9;
- color: #1688d9;
- font-weight: 720;
-}
-
-.social-bi-scope-hint {
- margin: 0;
- padding: 8px 14px;
- border: 1px solid #cfe6f8;
- border-radius: 8px;
- background: #eef7fe;
- color: #0f5d96;
- font-size: 13px;
- font-weight: 640;
-}
-
-.social-bi-dialog-backdrop {
- position: fixed;
- inset: 0;
- z-index: 60;
- display: grid;
- place-items: center;
- padding: 24px;
- background: rgba(7, 22, 38, 0.45);
-}
-
-.social-bi-dialog {
- display: flex;
- width: min(860px, 100%);
- max-height: min(80vh, 720px);
- flex-direction: column;
- overflow: hidden;
- border-radius: 12px;
- background: #ffffff;
- box-shadow: 0 24px 64px rgba(9, 30, 51, 0.28);
-}
-
-.social-bi-dialog-header {
- display: flex;
- flex-direction: column;
- gap: 4px;
- padding: 18px 22px 12px;
- border-bottom: 1px solid #e4ecf5;
-}
-
-.social-bi-dialog-header strong {
- font-size: 16px;
- color: #14263c;
-}
-
-.social-bi-dialog-header span {
- color: #5b7089;
- font-size: 13px;
-}
-
-.social-bi-dialog-body {
- flex: 1;
- overflow: auto;
- padding: 8px 22px;
-}
-
-.social-bi-dialog-table {
- width: 100%;
- border-collapse: collapse;
- font-size: 13px;
-}
-
-.social-bi-dialog-table th,
-.social-bi-dialog-table td {
- padding: 9px 10px;
- border-bottom: 1px solid #eef3f9;
- text-align: left;
- white-space: nowrap;
-}
-
-.social-bi-dialog-table th {
- position: sticky;
- top: 0;
- background: #f7fafd;
- color: #47607c;
- font-weight: 720;
-}
-
-.social-bi-dialog-table input {
- width: 120px;
- height: 32px;
- padding: 0 10px;
- border: 1px solid #cddaea;
- border-radius: 6px;
- font-size: 13px;
-}
-
-.social-bi-dialog-table input:focus {
- outline: none;
- border-color: #1688d9;
- box-shadow: 0 0 0 3px rgba(22, 136, 217, 0.14);
-}
-
-.social-bi-dialog-empty {
- margin: 18px 4px;
- color: #5b7089;
- font-size: 13px;
-}
-
-.social-bi-dialog-footer {
- display: flex;
- align-items: center;
- justify-content: flex-end;
- gap: 10px;
- padding: 12px 22px 16px;
- border-top: 1px solid #e4ecf5;
-}
diff --git a/databi/src/styles/social-v2.css b/databi/src/styles/social-v2.css
new file mode 100644
index 0000000..c816211
--- /dev/null
+++ b/databi/src/styles/social-v2.css
@@ -0,0 +1,601 @@
+/* 社交 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);
+}
+
+.sbi-custom-range {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ margin-left: 6px;
+ color: var(--sbi-text-3);
+}
+
+.sbi-custom-range input {
+ height: 30px;
+ padding: 0 8px;
+ border: 1px solid var(--sbi-border);
+ border-radius: 7px;
+ background: #ffffff;
+ color: var(--sbi-text);
+ font-size: 12.5px;
+}
+
+.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;
+ }
+}
diff --git a/finance/src/api.js b/finance/src/api.js
index 5771fc0..033559e 100644
--- a/finance/src/api.js
+++ b/finance/src/api.js
@@ -98,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)));
@@ -149,7 +150,11 @@ export async function fetchFinanceRechargeSummaries(query = {}, apps = []) {
if (!appList.length && selectedAppCode) {
appList.push({ appCode: selectedAppCode, appName: selectedAppCode });
}
- const summaries = await Promise.all(appList.map((app) => getRechargeSummaryForApp(app.appCode, cleanQuery)));
+ // 单个 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 };
}
@@ -164,8 +169,10 @@ export async function fetchFinanceRechargeOverview(query = {}, apps = []) {
if (!appCodes.length) {
return normalizeRechargeOverview({});
}
- const overviews = await Promise.all(appCodes.map((appCode) => getRechargeOverviewForApp(appCode, cleanQuery)));
- return mergeRechargeOverviews(overviews);
+ 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 = {}) {
diff --git a/finance/src/components/FinanceOverview.jsx b/finance/src/components/FinanceOverview.jsx
index 504641d..4300bd2 100644
--- a/finance/src/components/FinanceOverview.jsx
+++ b/finance/src/components/FinanceOverview.jsx
@@ -202,8 +202,10 @@ export function FinanceOverview({
);
}
-// WithdrawalKpi 是“用户提现”卡：工资转币商的 USDT + 审核通过的提现申请 USDT；点击进入提现审核页。
-// 提现不是充值渠道，不参与来源筛选联动，占比按“提现 / 充值总和”表达资金回流强度。
+// WithdrawalKpi 是两张独立口径的资金流出卡：
+// 「用户提现」只统计提现申请审核通过的 USDT（点击进入提现审核页）；
+// 「工资兑换」只统计用户工资转币商的 USDT（likei 平台为银行卡余额兑换金币）。
+// 两者都不是充值渠道，不参与来源筛选联动，占比按“金额 / 充值总和”表达资金回流强度。
function WithdrawalKpi({ loading, onOpenWithdrawals, totalUsd, withdrawal }) {
const data = withdrawal || {
approvedCount: 0,
@@ -212,35 +214,47 @@ function WithdrawalKpi({ loading, onOpenWithdrawals, totalUsd, withdrawal }) {
transferCount: 0,
transferUsdMinor: 0,
};
- const metaParts = [];
- if (totalUsd > 0) {
- const share = (data.totalUsdMinor / totalUsd) * 100;
- metaParts.push(`占充值 ${share.toLocaleString("zh-CN", { maximumFractionDigits: 1 })}%`);
- }
- metaParts.push(`${formatAmount(data.transferCount + data.approvedCount)} 笔`);
return (
-
+ <>
+
+
+ 工资兑换
+ {loading ? "…" : usdtText(data.transferUsdMinor)}
+
+ {loading ? "统计中" : outflowMeta(data.transferUsdMinor, data.transferCount, totalUsd)}
+
+ 用户工资转币商
+
+
);
}
+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) {
diff --git a/finance/src/styles/index.css b/finance/src/styles/index.css
index 3f2942f..525de58 100644
--- a/finance/src/styles/index.css
+++ b/finance/src/styles/index.css
@@ -259,6 +259,11 @@ a {
border-left-color: #be185d;
}
+.finance-kpi--salary {
+ border-left-color: #7c3aed;
+ cursor: default;
+}
+
.finance-kpi--active {
border-color: var(--primary, #4285f4);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary, #4285f4) 24%, transparent);