koishi-plugin-kkk 1.0.0

package/lib/ktr/template/statistics/components/chartTheme.js

@@ -0,0 +1,226 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.splitLineStyle = exports.axisLineStyle = exports.axisLabelStyle = exports.withAlpha = exports.CHART_FONT_FAMILY = exports.renderChartToSVG = exports.METRIC_META = exports.WORK_TYPE_META = exports.platformLogo = exports.platformColor = exports.PLATFORM_ORDER = exports.PLATFORM_META = exports.getChartPalette = void 0;
+const charts_1 = require("echarts/charts");
+const components_1 = require("echarts/components");
+const echarts = __importStar(require("echarts/core"));
+const renderers_1 = require("echarts/renderers");
+/**
+ * 统计海报的图表基座。
+ *
+ * 三条硬约束（都是实测出来的）：
+ * 1. **必须 `dispose()`** —— ECharts 内部有一张全局实例表，不 dispose 每渲染一次就漏一份，
+ *    实测 300 次后 heap 从 25MB 涨到 62MB。
+ * 2. **不能嵌进外层 `<svg>`** —— `renderToSVGString()` 返回的是完整独立 `<svg>`，
+ *    只能整段注入 DOM，不能像 Victory 那样 `standalone={false}` 塞进父 svg。
+ * 3. **颜色只能用 hex** —— zrender 的颜色解析器不认 `oklch()` / `color-mix()`
+ *    （`parse()` 返回 undefined，任何参与颜色运算的路径都会静默变黑）。
+ *    HeroUI 主题 token 是 oklch，所以这里的色板都是换算好的 hex 常量。
+ */
+// 按需注册：只挂统计海报真正用到的图表与组件，避免把整个 echarts 打进产物。
+// 漏注册的后果分两种：渲染器漏了直接抛错，图表/组件漏了则是静默画不出东西，
+// 所以这张清单必须和两个模板实际用到的 series/component 严格对齐（test/statistics-render.test.ts 会兜底）。
+echarts.use([
+    charts_1.PieChart,
+    charts_1.LineChart,
+    charts_1.BarChart,
+    charts_1.HeatmapChart,
+    charts_1.BoxplotChart,
+    charts_1.ScatterChart,
+    charts_1.TreemapChart,
+    components_1.GridComponent,
+    components_1.PolarComponent,
+    components_1.GraphicComponent,
+    components_1.VisualMapComponent,
+    renderers_1.SVGRenderer
+]);
+const LIGHT_PALETTE = {
+    text: '#18181b',
+    textMuted: '#71717a',
+    axisLine: '#d4d4d8',
+    splitLine: '#e4e4e7',
+    accent: '#8b5cf6',
+    accentAlt: '#a1a1aa',
+    textOnColor: '#ffffff'
+};
+const DARK_PALETTE = {
+    text: '#fcfcfc',
+    textMuted: '#9f9fa9',
+    axisLine: '#3f3f46',
+    splitLine: '#28282c',
+    accent: '#a78bfa',
+    accentAlt: '#71717a',
+    textOnColor: '#18181b'
+};
+/** 按明暗取图表配色 */
+const getChartPalette = (dark) => (dark ? DARK_PALETTE : LIGHT_PALETTE);
+exports.getChartPalette = getChartPalette;
+/** 平台展示信息表 */
+exports.PLATFORM_META = {
+    douyin: {
+        name: '抖音',
+        nameEn: 'Douyin',
+        logo: { light: '/image/douyin/dylogo-dark.svg', dark: '/image/douyin/dylogo-light.svg' },
+        color: { light: '#111111', dark: '#ffffff' }
+    },
+    bilibili: {
+        name: '哔哩哔哩',
+        nameEn: 'Bilibili',
+        logo: { light: '/image/bilibili/bilibili-light.png', dark: '/image/bilibili/bilibili-light.png' },
+        color: { light: '#fb7299', dark: '#fb7299' }
+    },
+    kuaishou: {
+        name: '快手',
+        nameEn: 'Kuaishou',
+        logo: { light: '/image/kuaishou/logo.png', dark: '/image/kuaishou/logo.png' },
+        color: { light: '#ff4906', dark: '#ff4906' }
+    },
+    xiaohongshu: {
+        name: '小红书',
+        nameEn: 'XiaoHongShu',
+        logo: { light: '/image/xiaohongshu/logo.png', dark: '/image/xiaohongshu/logo.png' },
+        color: { light: '#ff2442', dark: '#ff2442' }
+    }
+};
+/** 平台展示顺序，多张图统一用它，避免各图排序不一致 */
+exports.PLATFORM_ORDER = ['douyin', 'bilibili', 'kuaishou', 'xiaohongshu'];
+/** 取平台品牌色 */
+const platformColor = (platform, dark) => exports.PLATFORM_META[platform].color[dark ? 'dark' : 'light'];
+exports.platformColor = platformColor;
+/** 取平台 logo 路径 */
+const platformLogo = (platform, dark) => exports.PLATFORM_META[platform].logo[dark ? 'dark' : 'light'];
+exports.platformLogo = platformLogo;
+/**
+ * 内容形态展示信息。
+ *
+ * 配色刻意避开四大平台的品牌色区间（粉/橙/红），
+ * 免得「平台」和「形态」两张图摆在一起时读者串色。
+ */
+exports.WORK_TYPE_META = {
+    video: { label: '视频', color: '#8b5cf6' },
+    gallery: { label: '图集', color: '#06b6d4' },
+    collection: { label: '合辑', color: '#0ea5e9' },
+    article: { label: '文章', color: '#f59e0b' },
+    live: { label: '直播', color: '#ef4444' },
+    bangumi: { label: '番剧', color: '#22c55e' },
+    dynamic: { label: '动态', color: '#14b8a6' },
+    music: { label: '音乐', color: '#a855f7' },
+    unknown: { label: '其他', color: '#a1a1aa' }
+};
+/**
+ * 量化指标图的展示信息。
+ *
+ * 目前只有解析耗时一项：作品时长、作品点赞属于**内容**属性而非解析服务本身的表现，
+ * 混进这张海报会跑题；而且它们的单位在各平台不统一（抖音毫秒、B站秒、快手/小红书未知），
+ * 口径也站不住，所以整体砍掉。
+ */
+exports.METRIC_META = {
+    duration: { title: '解析耗时分布', subtitle: 'PARSE TIME', accent: 'bg-sky-500' }
+};
+/**
+ * 把 ECharts option 渲染成一段独立 SVG 字符串。
+ *
+ * 纯同步函数，可以在 React 的 render 体里直接调 —— 这是本方案能绕开 hooks 的关键。
+ * @param option ECharts 配置，颜色需由调用方按主题算好（见 `getChartPalette`）
+ * @param width 画布宽（px）
+ * @param height 画布高（px）
+ * @returns 完整的 `<svg>...</svg>` 字符串
+ */
+const renderChartToSVG = (option, width, height) => {
+    const chart = echarts.init(null, null, { renderer: 'svg', ssr: true, width, height });
+    try {
+        chart.setOption({
+            // SSR 下本来就不跑动画，显式关掉是防止将来有人在浏览器侧复用时动起来
+            animation: false,
+            // 海报底色由外层卡片提供，图表本身保持透明
+            backgroundColor: 'transparent',
+            ...option
+        });
+        return chart.renderToSVGString();
+    }
+    finally {
+        // 不 dispose 会持续泄漏，见文件头注释
+        chart.dispose();
+    }
+};
+exports.renderChartToSVG = renderChartToSVG;
+/** 图表内文字统一走海报字体，否则 SVG 会退回浏览器默认字体 */
+exports.CHART_FONT_FAMILY = 'HarmonyOSHans-Regular';
+/**
+ * hex 转 `rgba()`。
+ *
+ * 刻意不产出 8 位 hex（`#RRGGBBAA`）：zrender 的颜色解析器只认 `#RGB` / `#RRGGBB`，
+ * 8 位会被判为非法值，凡是需要拿它做运算的地方都会静默出问题。
+ * @param hex 形如 `#8b5cf6` 或 `#abc`
+ * @param alpha 0~1
+ */
+const withAlpha = (hex, alpha) => {
+    const raw = hex.replace('#', '');
+    const full = raw.length === 3
+        ? raw
+            .split('')
+            .map((c) => c + c)
+            .join('')
+        : raw;
+    const r = parseInt(full.slice(0, 2), 16);
+    const g = parseInt(full.slice(2, 4), 16);
+    const b = parseInt(full.slice(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+exports.withAlpha = withAlpha;
+/**
+ * 坐标轴文字样式
+ * @param palette 配色
+ * @param fontSize 字号；海报宽 1440，轴标签不要小于 20
+ * @param rotate 类目轴标签倾斜角度
+ */
+const axisLabelStyle = (palette, fontSize = 24, rotate = 0) => ({
+    fontSize,
+    rotate,
+    color: palette.textMuted,
+    fontFamily: exports.CHART_FONT_FAMILY
+});
+exports.axisLabelStyle = axisLabelStyle;
+/** 坐标轴主线样式 */
+const axisLineStyle = (palette) => ({
+    lineStyle: { width: 2, color: palette.axisLine }
+});
+exports.axisLineStyle = axisLineStyle;
+/** 网格分隔线样式 */
+const splitLineStyle = (palette) => ({
+    lineStyle: { width: 1, color: palette.splitLine }
+});
+exports.splitLineStyle = splitLineStyle;

package/lib/ktr/template/statistics/components/format.js

@@ -0,0 +1,38 @@
+"use strict";
+/**
+ * 统计海报共用的数字格式化。
+ * 逻辑取自旧版两张海报里各自复制过一份的实现，这里合并成一处，口径保持不变。
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatDateShort = exports.formatPercent = exports.formatWithCommas = exports.formatCompact = void 0;
+/**
+ * 大数字紧凑格式（1.2k / 3.4w / 1.1亿）。
+ * 向下截断而不是四舍五入 —— 统计数字宁可少报也不要看起来比实际多。
+ */
+const formatCompact = (num) => {
+    const truncate = (divisor, suffix) => {
+        const result = Math.floor(num / (divisor / 10)) / 10;
+        return (result % 1 === 0 ? result.toFixed(0) : result.toFixed(1)) + suffix;
+    };
+    if (num >= 100000000)
+        return truncate(100000000, '亿');
+    if (num >= 10000)
+        return truncate(10000, 'w');
+    if (num >= 1000)
+        return truncate(1000, 'k');
+    return num.toString();
+};
+exports.formatCompact = formatCompact;
+/** 千位分隔符 */
+const formatWithCommas = (num) => num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
+exports.formatWithCommas = formatWithCommas;
+/**
+ * 占比百分比，保留一位小数。
+ * @param value 分子
+ * @param total 分母；为 0 时返回 '0.0'
+ */
+const formatPercent = (value, total) => (total > 0 ? ((value / total) * 100).toFixed(1) : '0.0');
+exports.formatPercent = formatPercent;
+/** 日期 `YYYY-MM-DD` → `MM-DD`，折线图类目轴用 */
+const formatDateShort = (date) => date.substring(5);
+exports.formatDateShort = formatDateShort;

package/lib/ktr/template/statistics/components/types.js

@@ -0,0 +1,9 @@
+"use strict";
+/**
+ * 统计海报共用的数据类型。
+ *
+ * 这两个联合类型与 core 侧 `ParsePlatform` / `ParseWorkType` 一一对应，
+ * 但**刻意在这里裸写一份**：模板要能在开发面板的浏览器里跑，不能反向 import `@/module/db`
+ * （那条链会把 node-karin/sqlite3 拖进浏览器包）。改 core 侧值域时记得同步这里。
+ */
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ktr/template/statistics/global/components/GlobalStatistics.js

@@ -0,0 +1,246 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GlobalStatistics = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const theme_1 = require("../../../../utils/theme");
+const DefaultLayout_1 = require("../../../components/DefaultLayout");
+const BoxplotGuide_1 = require("../../components/BoxplotGuide");
+const ChartCard_1 = require("../../components/ChartCard");
+const PlatformTable_1 = require("../../components/PlatformTable");
+const RankList_1 = require("../../components/RankList");
+const KpiCard_1 = require("../../components/KpiCard");
+const SSRChart_1 = require("../../components/SSRChart");
+const chartTheme_1 = require("../../components/chartTheme");
+const chartPresets_1 = require("../../components/chartPresets");
+const format_1 = require("../../components/format");
+/**
+ * 全局解析统计海报。
+ *
+ * 与群海报同一套密排卡片版式：每张图独占一张卡、卡内自带紧凑标题行，
+ * 两列网格铺满 1440 宽的画面，尽量压低总高度以适配手机竖屏浏览。
+ * 图表由 ECharts 在 render 期同步出 SVG 字符串再注入，不用 hooks、不碰 DOM。
+ */
+/** 海报内容区宽度：1440 - 左右各 72(p-18) */
+const CONTENT_WIDTH = 1296;
+/** 两列网格：gap-14(56px) 下每张卡 620 */
+const GRID_GAP = 56;
+const HALF_CARD_WIDTH = (CONTENT_WIDTH - GRID_GAP) / 2;
+/** 卡片内边距 p-6 = 24px，算画布宽度时必须减掉，否则 SVG 会溢出卡片边框 */
+const CARD_PADDING = 24;
+const FULL_CHART_WIDTH = CONTENT_WIDTH - CARD_PADDING * 2;
+const HALF_CHART_WIDTH = HALF_CARD_WIDTH - CARD_PADDING * 2;
+const HALF_CHART_HEIGHT = 340;
+/**
+ * 热力图的画布高度。
+ * 比同排的箱线图卡片高一截是刻意为之：箱线图那边多了个 `BoxplotGuide`（约 190px），
+ * 两列网格会把同排卡片拉成等高，左卡不跟着长高的话底部就会空出一大块。
+ * 加上说明文字补到三行之后，两边内容高度基本对齐。
+ */
+const HEATMAP_CHART_HEIGHT = 520;
+/** 平台分布里环形图的画布尺寸，剩下宽度留给右侧明细列表 */
+const DONUT_SIZE = { width: 420, height: 300 };
+/** 平台趋势：分平台堆叠面积图 */
+const buildPlatformTrendOption = (trend, dark) => {
+    const palette = (0, chartTheme_1.getChartPalette)(dark);
+    return {
+        grid: { top: 44, right: 24, bottom: 56, left: 76 },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: trend.dates.map((date) => (0, format_1.formatDateShort)(date)),
+            axisLine: (0, chartTheme_1.axisLineStyle)(palette),
+            axisTick: { show: false },
+            axisLabel: (0, chartTheme_1.axisLabelStyle)(palette, 20, 45),
+            splitLine: { show: false }
+        },
+        yAxis: {
+            type: 'value',
+            name: '解析次数',
+            nameTextStyle: { fontSize: 20, color: palette.textMuted, fontFamily: chartTheme_1.CHART_FONT_FAMILY, align: 'right' },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: (0, chartTheme_1.axisLabelStyle)(palette, 20),
+            splitLine: (0, chartTheme_1.splitLineStyle)(palette)
+        },
+        series: trend.series.map((item) => {
+            const color = (0, chartTheme_1.platformColor)(item.platform, dark);
+            return {
+                type: 'line',
+                name: chartTheme_1.PLATFORM_META[item.platform].name,
+                stack: 'total',
+                smooth: 0.3,
+                symbol: 'none',
+                lineStyle: { width: 2, color },
+                itemStyle: { color },
+                areaStyle: { color: (0, chartTheme_1.withAlpha)(color, 0.5) },
+                data: item.values
+            };
+        })
+    };
+};
+/** 平台 × 内容形态：按平台归一的百分比堆叠条，比绝对堆叠更能看出各平台的口味差异 */
+const buildPlatformWorkTypeOption = (rows, dark) => {
+    const palette = (0, chartTheme_1.getChartPalette)(dark);
+    // 平台顺序走全局常量，不跟着数据库返回顺序走，否则两次渲染的堆叠顺序可能不一样
+    const platforms = chartTheme_1.PLATFORM_ORDER.filter((platform) => rows.some((row) => row.platform === platform));
+    const workTypes = [...new Set(rows.map((row) => row.workType))];
+    const countOf = (platform, workType) => rows.find((row) => row.platform === platform && row.workType === workType)?.count ?? 0;
+    const totalOf = (platform) => rows.filter((row) => row.platform === platform).reduce((sum, row) => sum + row.count, 0);
+    return {
+        grid: { top: 16, right: 24, bottom: 44, left: 150 },
+        xAxis: {
+            type: 'value',
+            max: 100,
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { ...(0, chartTheme_1.axisLabelStyle)(palette, 20), formatter: '{value}%' },
+            splitLine: (0, chartTheme_1.splitLineStyle)(palette)
+        },
+        yAxis: {
+            type: 'category',
+            inverse: true,
+            data: platforms.map((platform) => `${chartTheme_1.PLATFORM_META[platform].name} ${(0, format_1.formatCompact)(totalOf(platform))}`),
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { fontSize: 22, color: palette.text, fontFamily: chartTheme_1.CHART_FONT_FAMILY }
+        },
+        series: workTypes.map((workType) => ({
+            type: 'bar',
+            name: chartTheme_1.WORK_TYPE_META[workType].label,
+            stack: 'share',
+            barWidth: 52,
+            itemStyle: { color: chartTheme_1.WORK_TYPE_META[workType].color },
+            label: {
+                show: true,
+                position: 'inside',
+                fontSize: 20,
+                color: palette.textOnColor,
+                fontFamily: chartTheme_1.CHART_FONT_FAMILY,
+                // 占比太小的段落放不下字，硬塞会糊成一团，交给下方图例认色
+                formatter: (params) => (params.value >= 14 ? `${Math.round(params.value)}%` : '')
+            },
+            data: platforms.map((platform) => {
+                const total = totalOf(platform);
+                return total > 0 ? Number(((countOf(platform, workType) / total) * 100).toFixed(2)) : 0;
+            })
+        }))
+    };
+};
+/** 群组增长：累计群数的阶梯折线 */
+const buildGroupGrowthOption = (growth, dark) => {
+    const palette = (0, chartTheme_1.getChartPalette)(dark);
+    return {
+        grid: { top: 44, right: 24, bottom: 56, left: 76 },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: growth.map((point) => (0, format_1.formatDateShort)(point.date)),
+            axisLine: (0, chartTheme_1.axisLineStyle)(palette),
+            axisTick: { show: false },
+            axisLabel: (0, chartTheme_1.axisLabelStyle)(palette, 20, 45),
+            splitLine: { show: false }
+        },
+        yAxis: {
+            type: 'value',
+            name: '累计群数',
+            nameTextStyle: { fontSize: 20, color: palette.textMuted, fontFamily: chartTheme_1.CHART_FONT_FAMILY, align: 'right' },
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: (0, chartTheme_1.axisLabelStyle)(palette, 20),
+            minInterval: 1,
+            splitLine: (0, chartTheme_1.splitLineStyle)(palette)
+        },
+        series: [
+            {
+                type: 'line',
+                // 群数是跳变的，阶梯线比斜线诚实
+                step: 'end',
+                symbol: 'none',
+                lineStyle: { width: 4, color: palette.accent },
+                itemStyle: { color: palette.accent },
+                areaStyle: {
+                    color: {
+                        type: 'linear',
+                        x: 0,
+                        y: 0,
+                        x2: 0,
+                        y2: 1,
+                        colorStops: [
+                            { offset: 0, color: (0, chartTheme_1.withAlpha)(palette.accent, 0.35) },
+                            { offset: 1, color: (0, chartTheme_1.withAlpha)(palette.accent, 0.02) }
+                        ]
+                    }
+                },
+                data: growth.map((point) => point.count)
+            }
+        ]
+    };
+};
+/**
+ * 全局解析统计组件 Global Statistics
+ */
+const GlobalStatistics = (props) => {
+    const dark = (0, theme_1.isDark)(props.ctx);
+    const data = props.data;
+    const palette = (0, chartTheme_1.getChartPalette)(dark);
+    // 热力图的两个派生量：总人数（说明里报占比用）和最密集的那一格
+    const heatTotal = data.userActivity.cells.reduce((sum, [, , count]) => sum + count, 0);
+    // 沉默分布里「最近一周还在用」的群占比，写进卡片说明
+    const silenceTotal = data.silenceBuckets.reduce((sum, bucket) => sum + bucket.count, 0);
+    const silenceActive = data.silenceBuckets.slice(0, 2).reduce((sum, bucket) => sum + bucket.count, 0);
+    const silenceActivePercent = silenceTotal > 0 ? Math.round((silenceActive / silenceTotal) * 100) : 0;
+    const heatPeak = data.userActivity.cells.reduce((peak, [x, y, count]) => (count > peak.count ? { x, y, count } : peak), { x: 0, y: 0, count: 0 });
+    const platformTotal = data.platformData.reduce((sum, item) => sum + item.count, 0);
+    const parsesPerUser = data.totalUsers > 0 ? data.totalParses / data.totalUsers : 0;
+    const parsesPerGroup = data.totalGroups > 0 ? data.totalParses / data.totalGroups : 0;
+    const hasTrend = data.trend.some((point) => point.count > 0);
+    const hasPlatformTrend = data.platformTrend.dates.length > 0;
+    const hasWorkTypes = data.workTypes.length > 0;
+    const weekdayTotal = data.weekday.reduce((sum, count) => sum + count, 0);
+    const trendIsSplit = Boolean(data.trendCompleteFrom) && data.trend.some((point) => point.date < data.trendCompleteFrom);
+    const platformLegend = (0, chartPresets_1.buildPlatformLegend)(data.platformData, dark);
+    const maxPlatformCount = Math.max(...data.platformData.map((item) => item.count), 1);
+    const groupRows = data.topGroups.map((group) => ({
+        name: group.name,
+        avatar: group.avatar,
+        segments: group.segments,
+        label: `${(0, format_1.formatWithCommas)(group.totalParses)} 次 · ${(0, format_1.formatWithCommas)(group.uniqueUsers)} 人`
+    }));
+    return ((0, jsx_runtime_1.jsxs)(DefaultLayout_1.DefaultLayout, { ...props, className: "relative overflow-hidden bg-surface", children: [(0, jsx_runtime_1.jsxs)("div", { className: "absolute inset-0 pointer-events-none z-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "absolute rounded-full w-450 h-500 -top-100 -left-75 blur-[180px]", style: {
+                            background: `radial-gradient(ellipse at 40% 40%, ${dark ? 'rgba(99, 102, 241, 0.4)' : 'rgba(129, 140, 248, 0.45)'} 0%, transparent 70%)`
+                        } }), (0, jsx_runtime_1.jsx)("div", { className: "absolute rounded-full w-350 h-400 top-150 -right-50 blur-[160px]", style: {
+                            background: `radial-gradient(ellipse at 50% 50%, ${dark ? 'rgba(139, 92, 246, 0.3)' : 'rgba(167, 139, 250, 0.4)'} 0%, transparent 70%)`
+                        } }), (0, jsx_runtime_1.jsx)("div", { className: "absolute rounded-full w-400 h-350 -bottom-75 left-75 blur-[180px]", style: {
+                            background: `radial-gradient(ellipse at 50% 60%, ${dark ? 'rgba(56, 189, 248, 0.22)' : 'rgba(125, 211, 252, 0.3)'} 0%, transparent 70%)`
+                        } })] }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 pointer-events-none z-0 opacity-[0.08] dark:opacity-[0.12]", children: (0, jsx_runtime_1.jsxs)("svg", { className: "w-full h-full", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsxs)("filter", { id: "pixelNoise", children: [(0, jsx_runtime_1.jsx)("feTurbulence", { type: "fractalNoise", baseFrequency: "0.8", numOctaves: "1", stitchTiles: "stitch" }), (0, jsx_runtime_1.jsx)("feColorMatrix", { type: "saturate", values: "0" }), (0, jsx_runtime_1.jsxs)("feComponentTransfer", { children: [(0, jsx_runtime_1.jsx)("feFuncR", { type: "discrete", tableValues: "0 1" }), (0, jsx_runtime_1.jsx)("feFuncG", { type: "discrete", tableValues: "0 1" }), (0, jsx_runtime_1.jsx)("feFuncB", { type: "discrete", tableValues: "0 1" })] })] }), (0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", filter: "url(#pixelNoise)" })] }) }), (0, jsx_runtime_1.jsx)("div", { className: "absolute top-24 right-15 pointer-events-none select-none opacity-[0.03] z-0", children: (0, jsx_runtime_1.jsx)("span", { className: "text-[180px] font-black tracking-tighter leading-none block text-right text-foreground", children: "GLOBAL" }) }), (0, jsx_runtime_1.jsxs)("div", { className: "relative z-10 p-14 flex flex-col gap-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "border-b-4 border-border/30 pb-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4 opacity-60 mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-3 h-3 rounded-full bg-indigo-500 animate-pulse" }), (0, jsx_runtime_1.jsx)("span", { className: "text-2xl font-mono tracking-widest text-muted/80", children: "GLOBAL_ANALYTICS" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline justify-between gap-4", children: [(0, jsx_runtime_1.jsx)("h1", { className: "text-[5rem] font-black leading-none tracking-tighter text-foreground/90", children: "\u5168\u5C40\u89E3\u6790\u7EDF\u8BA1" }), (0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 whitespace-nowrap text-2xl text-muted/70 font-mono", children: [data.statsSince ? `统计自 ${data.statsSince} · ` : '', "\u6570\u636E\u622A\u6B62 ", data.generatedAt] })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-6 gap-5", children: [(0, jsx_runtime_1.jsx)(KpiCard_1.KpiCard, { title: "\u670D\u52A1\u7FA4\u7EC4", titleEn: "GROUPS", value: (0, format_1.formatCompact)(data.totalGroups), unit: "\u4E2A" }), (0, jsx_runtime_1.jsx)(KpiCard_1.KpiCard, { title: "\u4F7F\u7528\u7528\u6237", titleEn: "USERS", value: (0, format_1.formatCompact)(data.totalUsers), unit: "\u4EBA" }), (0, jsx_runtime_1.jsx)(KpiCard_1.KpiCard, { title: "\u603B\u89E3\u6790", titleEn: "PARSES", value: (0, format_1.formatCompact)(data.totalParses), unit: "\u6B21" }), (0, jsx_runtime_1.jsx)(KpiCard_1.KpiCard, { title: "\u8986\u76D6\u5E73\u53F0", titleEn: "PLATFORMS", value: String(data.activePlatforms), unit: "\u4E2A" }), (0, jsx_runtime_1.jsx)(KpiCard_1.KpiCard, { title: "\u4EBA\u5747\u89E3\u6790", titleEn: "PER USER", value: parsesPerUser.toFixed(1), unit: "\u6B21" }), (0, jsx_runtime_1.jsx)(KpiCard_1.KpiCard, { title: "\u7FA4\u5747\u89E3\u6790", titleEn: "PER GROUP", value: (0, format_1.formatCompact)(Math.round(parsesPerGroup)), unit: "\u6B21" })] }), platformTotal > 0 && ((0, jsx_runtime_1.jsx)(ChartCard_1.ChartCard, { title: "\u5E73\u53F0\u5206\u5E03", subtitle: "DISTRIBUTION", accentClassName: "bg-blue-500", children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-6", children: [(0, jsx_runtime_1.jsx)(SSRChart_1.SSRChart, { option: (0, chartPresets_1.buildPlatformDonutOption)(data.platformData, dark, DONUT_SIZE, 'TOTAL PARSES'), width: DONUT_SIZE.width, height: DONUT_SIZE.height, className: "shrink-0" }), (0, jsx_runtime_1.jsx)(PlatformTable_1.PlatformTable, { className: "flex-1", columns: ['解析次数', '占比', '覆盖群数', '覆盖用户'], rows: platformLegend.map((row) => {
+                                        const detail = data.platformData.find((item) => item.platform === row.key);
+                                        return {
+                                            key: row.key,
+                                            logo: row.logo,
+                                            name: row.name,
+                                            color: row.color,
+                                            // 条长按「相对最大项」而不是相对总量：最大的那条顶满，量级差距一眼可见
+                                            barPercent: (row.count / maxPlatformCount) * 100,
+                                            cells: [
+                                                (0, format_1.formatWithCommas)(row.count),
+                                                `${row.percent}%`,
+                                                detail ? (0, format_1.formatWithCommas)(detail.groups) : '—',
+                                                detail ? (0, format_1.formatWithCommas)(detail.users) : '—'
+                                            ]
+                                        };
+                                    }) })] }) })), (0, jsx_runtime_1.jsx)(ChartCard_1.ChartCard, { title: "\u89E3\u6790\u8D8B\u52BF", subtitle: "TREND", accentClassName: "bg-violet-500", children: hasTrend ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SSRChart_1.SSRChart, { option: (0, chartPresets_1.buildTrendLineOption)(data.trend, dark, {
+                                        splitFrom: data.trendCompleteFrom,
+                                        baseline: data.dailyAverage,
+                                        baselineLabel: '全局日均'
+                                    }), width: FULL_CHART_WIDTH, height: 360 }), trendIsSplit ? ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2 text-center text-xl text-muted/80", children: ["\u8FD1 30 \u5929 \u00B7 \u865A\u7EBF\u4E3A\u5168\u5C40\u65E5\u5747 ", (0, jsx_runtime_1.jsx)("span", { className: "font-bold text-foreground/80", children: data.dailyAverage.toFixed(1) }), " \u6B21 \u00B7", ' ', (0, jsx_runtime_1.jsx)("span", { className: "text-foreground/80 font-bold", children: data.trendCompleteFrom }), " \u4E4B\u524D\u7684\u7070\u8272\u865A\u7EBF\u4E3A\u65E7\u7248\u56DE\u586B\u6570\u636E\uFF0C\u53E3\u5F84\u5931\u771F\u4EC5\u4F5C\u53C2\u8003"] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2 text-center text-xl text-muted/80", children: ["\u8FD1 30 \u5929 \u00B7 \u865A\u7EBF\u4E3A\u5168\u5C40\u65E5\u5747 ", (0, jsx_runtime_1.jsx)("span", { className: "font-bold text-foreground/80", children: data.dailyAverage.toFixed(1) }), " \u6B21"] }))] })) : ((0, jsx_runtime_1.jsxs)("div", { className: "h-80 flex flex-col items-center justify-center gap-3 text-muted/70", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-3xl font-bold", children: "\u6682\u65E0\u8D8B\u52BF\u6570\u636E" }), (0, jsx_runtime_1.jsx)("div", { className: "text-xl", children: "\u8BE5\u7EDF\u8BA1\u4ECE\u672C\u529F\u80FD\u4E0A\u7EBF\u540E\u5F00\u59CB\u6309\u5929\u8BB0\u5F55\uFF0C\u5148\u79EF\u7D2F\u51E0\u5929\u518D\u6765\u770B ~" })] })) }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-14", children: [hasPlatformTrend && ((0, jsx_runtime_1.jsxs)(ChartCard_1.ChartCard, { title: "\u5E73\u53F0\u8D8B\u52BF", subtitle: "PLATFORM TREND", accentClassName: "bg-sky-500", children: [(0, jsx_runtime_1.jsx)(SSRChart_1.SSRChart, { option: buildPlatformTrendOption(data.platformTrend, dark), width: HALF_CHART_WIDTH, height: HALF_CHART_HEIGHT }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2 flex flex-wrap justify-center gap-x-6 gap-y-2", children: data.platformTrend.series.map((item) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-6 h-6 rounded shrink-0", style: { backgroundColor: (0, chartTheme_1.platformColor)(item.platform, dark) } }), (0, jsx_runtime_1.jsx)("span", { className: "text-xl text-foreground/80", children: chartTheme_1.PLATFORM_META[item.platform].name })] }, item.platform))) })] })), hasWorkTypes && ((0, jsx_runtime_1.jsxs)(ChartCard_1.ChartCard, { title: "\u5185\u5BB9\u5F62\u6001", subtitle: "WORK TYPES", accentClassName: "bg-cyan-500", children: [(0, jsx_runtime_1.jsx)(SSRChart_1.SSRChart, { option: buildPlatformWorkTypeOption(data.workTypes, dark), width: HALF_CHART_WIDTH, height: HALF_CHART_HEIGHT }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2 flex flex-wrap justify-center gap-x-6 gap-y-2", children: (0, chartPresets_1.buildWorkTypeLegend)(data.workTypes).map((row) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-6 h-6 rounded shrink-0", style: { backgroundColor: row.color } }), (0, jsx_runtime_1.jsx)("span", { className: "text-xl text-foreground/80", children: row.label })] }, row.key))) })] }))] }), data.metrics.map((item) => {
+                        // 拿「≤5s」那一档的累计占比当读法示例。档位会被裁剪，只能按标签找，不能按下标
+                        const metricTotal = item.buckets.reduce((sum, bucket) => sum + bucket.count, 0);
+                        const fiveSecondIndex = item.buckets.findIndex((bucket) => bucket.upper === '≤5s');
+                        const fiveSecondShare = fiveSecondIndex >= 0 && metricTotal > 0
+                            ? Math.round((item.buckets.slice(0, fiveSecondIndex + 1).reduce((sum, bucket) => sum + bucket.count, 0) / metricTotal) * 100)
+                            : undefined;
+                        return ((0, jsx_runtime_1.jsx)(ChartCard_1.ChartCard, { title: chartTheme_1.METRIC_META[item.metric].title, subtitle: chartTheme_1.METRIC_META[item.metric].subtitle, accentClassName: chartTheme_1.METRIC_META[item.metric].accent, caption: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u6A2A\u8F74 = ", (0, jsx_runtime_1.jsx)("b", { className: "text-foreground/80", children: "\u8017\u65F6\u4E0A\u9650" }), " \u00B7 \u7EB5\u8F74 = \u6709\u591A\u5C11\u6BD4\u4F8B\u7684\u89E3\u6790\u5728\u8FD9\u4E2A\u65F6\u95F4\u5185\u8DD1\u5B8C \u00B7 \u4E24\u6761\u865A\u7EBF\u662F 50% / 90% \u7684\u4F4D\u7F6E", (0, jsx_runtime_1.jsx)("br", {}), "\u8BFB\u6CD5\uFF1A", fiveSecondShare !== undefined ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u300C\u22645s\u300D\u90A3\u4E2A\u70B9\u662F ", (0, jsx_runtime_1.jsxs)("b", { className: "text-foreground/80", children: [fiveSecondShare, "%"] }), "\uFF0C\u610F\u601D\u5C31\u662F ", fiveSecondShare, "% \u7684\u89E3\u6790 5 \u79D2\u5185\u8DD1\u5B8C"] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "\u4EFB\u53D6\u4E00\u70B9\uFF0C\u6A2A\u8F74\u662F\u8017\u65F6\u4E0A\u9650\u3001\u7EB5\u8F74\u5C31\u662F\u8DD1\u5B8C\u7684\u6BD4\u4F8B" })), "\uFF1B\u66F2\u7EBF\u8D8A\u9661\u8BF4\u660E\u89E3\u6790\u8D8A\u96C6\u4E2D\u5728\u8FD9\u4E00\u6BB5"] }), children: (0, jsx_runtime_1.jsx)(SSRChart_1.SSRChart, { option: (0, chartPresets_1.buildDurationCurveOption)(item, dark), width: FULL_CHART_WIDTH, height: 380 }) }, item.metric));
+                    }), groupRows.length > 0 && ((0, jsx_runtime_1.jsxs)(ChartCard_1.ChartCard, { title: "\u7FA4\u7EC4\u6392\u884C", subtitle: "TOP GROUPS", accentClassName: "bg-emerald-500", caption: "\u8FDB\u5EA6\u6761\u6309\u5E73\u53F0\u5206\u8272\uFF0C\u989C\u8272 = \u8BE5\u7FA4\u7684\u89E3\u6790\u6765\u81EA\u54EA\u4E2A\u5E73\u53F0\uFF1B\u53F3\u4FA7\u662F\u603B\u6B21\u6570\u548C\u4F7F\u7528\u4EBA\u6570", children: [(0, jsx_runtime_1.jsx)(RankList_1.RankList, { rows: groupRows, dark: dark }), (0, jsx_runtime_1.jsx)(RankList_1.RankLegend, { platforms: (0, RankList_1.collectRankPlatforms)(groupRows), dark: dark })] })), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-14", children: [data.sizeBuckets.some((bucket) => bucket.count > 0) && ((0, jsx_runtime_1.jsx)(ChartCard_1.ChartCard, { title: "\u7FA4\u89C4\u6A21\u5206\u5E03", subtitle: "GROUP SIZES", accentClassName: "bg-amber-500", caption: "\u6309\u5404\u7FA4\u7D2F\u8BA1\u89E3\u6790\u6B21\u6570\u5206\u6876", children: (0, jsx_runtime_1.jsx)(SSRChart_1.SSRChart, { option: (0, chartPresets_1.buildBucketOption)(data.sizeBuckets, dark, { yName: '群数' }), width: HALF_CHART_WIDTH, height: HALF_CHART_HEIGHT }) })), data.groupGrowth.length > 0 && ((0, jsx_runtime_1.jsx)(ChartCard_1.ChartCard, { title: "\u7FA4\u7EC4\u589E\u957F", subtitle: "GROUP GROWTH", accentClassName: "bg-teal-500", caption: "\u6309\u7FA4\u9996\u6B21\u51FA\u73B0\u89E3\u6790\u7684\u65E5\u671F\u7D2F\u8BA1", children: (0, jsx_runtime_1.jsx)(SSRChart_1.SSRChart, { option: buildGroupGrowthOption(data.groupGrowth, dark), width: HALF_CHART_WIDTH, height: HALF_CHART_HEIGHT }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-14", children: [data.userActivity.cells.length > 0 && ((0, jsx_runtime_1.jsx)(ChartCard_1.ChartCard, { title: "\u7528\u6237\u6D3B\u8DC3\u5EA6", subtitle: "USER ACTIVITY", accentClassName: "bg-rose-500", caption: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u6A2A\u8F74 \u2192 \u7528\u8FC7\u51E0\u4E2A\u7FA4 \u00B7 \u7EB5\u8F74 \u2191 \u603B\u89E3\u6790\u6B21\u6570 \u00B7 \u683C\u5B50\u6570\u5B57 = \u843D\u5728\u8FD9\u6863\u7684\u7528\u6237\u6570", (0, jsx_runtime_1.jsx)("br", {}), "\u5171 ", (0, jsx_runtime_1.jsx)("b", { className: "text-foreground/80", children: (0, format_1.formatWithCommas)(heatTotal) }), " \u4F4D\u7528\u6237 \u00B7 \u6700\u5BC6\u96C6\u7684\u4E00\u683C\u662F\u300C", data.userActivity.xLabels[heatPeak.x], " \u00D7 ", data.userActivity.yLabels[heatPeak.y], "\u300D\uFF0C \u5360 ", (0, jsx_runtime_1.jsxs)("b", { className: "text-foreground/80", children: [(0, format_1.formatPercent)(heatPeak.count, heatTotal), "%"] }), (0, jsx_runtime_1.jsx)("br", {}), "\u989C\u8272\u8D8A\u6DF1\u4EBA\u8D8A\u591A\uFF1B\u5DE6\u4E0A\u89D2\u5927\u7247\u6DF1\u8272 = \u5927\u591A\u6570\u4EBA\u53EA\u5728\u5C11\u6570\u7FA4\u91CC\u8F7B\u5EA6\u4F7F\u7528"] }), children: (0, jsx_runtime_1.jsx)(SSRChart_1.SSRChart, { option: (0, chartPresets_1.buildHeatmapOption)(data.userActivity, dark), width: HALF_CHART_WIDTH, height: HEATMAP_CHART_HEIGHT }) })), data.groupActivity.length > 0 && ((0, jsx_runtime_1.jsxs)(ChartCard_1.ChartCard, { title: "\u7FA4\u7EC4\u6D3B\u8DC3\u5EA6", subtitle: "GROUP ACTIVITY", accentClassName: "bg-purple-500", caption: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u600E\u4E48\u7B97\u7684\uFF1A\u628A\u6BCF\u4E2A\u7FA4\u6309", (0, jsx_runtime_1.jsx)("b", { className: "text-foreground/80", children: "\u7FA4\u5185\u4F7F\u7528\u4EBA\u6570" }), "\u5206\u6863\uFF0C \u6863\u5185\u6240\u6709\u7FA4\u7684", (0, jsx_runtime_1.jsx)("b", { className: "text-foreground/80", children: "\u603B\u89E3\u6790\u6B21\u6570" }), "\u5408\u8D77\u6765\u753B\u6210\u4E00\u4E2A\u7BB1\u4F53", (0, jsx_runtime_1.jsx)("br", {}), "\u6A2A\u8F74 = \u4F7F\u7528\u4EBA\u6570\u6863 \u00B7 \u7EB5\u8F74 = \u7FA4\u603B\u89E3\u6790\u6B21\u6570 \u00B7 \u7BB1\u4F53\u4E0A\u65B9\u7684\u6570\u5B57\u662F\u4E2D\u4F4D\u6570"] }), children: [(0, jsx_runtime_1.jsx)(SSRChart_1.SSRChart, { option: (0, chartPresets_1.buildBoxplotOption)(data.groupActivity, dark, '群总解析次数'), width: HALF_CHART_WIDTH, height: HALF_CHART_HEIGHT }), (0, jsx_runtime_1.jsx)(BoxplotGuide_1.BoxplotGuide, { accent: palette.accent })] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-14", children: [weekdayTotal > 0 && ((0, jsx_runtime_1.jsx)(ChartCard_1.ChartCard, { title: "\u5468\u5185\u5206\u5E03", subtitle: "BY WEEKDAY", accentClassName: "bg-orange-500", caption: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u6A2A\u8F74 = \u5468\u4E00\u5230\u5468\u65E5 \u00B7 \u7EB5\u8F74 = \u8BE5\u661F\u671F\u51E0\u7684", (0, jsx_runtime_1.jsx)("b", { className: "text-foreground/80", children: "\u65E5\u5747" }), "\u89E3\u6790\u6B21\u6570 \u00B7 \u865A\u7EBF = \u4E03\u65E5\u5747\u503C", (0, jsx_runtime_1.jsx)("br", {}), "\u67F1\u5B50\u6BD4\u865A\u7EBF\u9AD8 = \u8FD9\u5929\u6BD4\u5E73\u65F6\u66F4\u6D3B\u8DC3\uFF1B\u53D6\u65E5\u5747\u800C\u4E0D\u662F\u4E03\u5929\u603B\u548C\uFF0C\u662F\u56E0\u4E3A\u7A97\u53E3\u4E0D\u662F\u6574\u5468"] }), children: (0, jsx_runtime_1.jsx)(SSRChart_1.SSRChart, { option: (0, chartPresets_1.buildWeekdayOption)(data.weekday, dark), width: HALF_CHART_WIDTH, height: HALF_CHART_HEIGHT }) })), data.silenceBuckets.some((bucket) => bucket.count > 0) && ((0, jsx_runtime_1.jsx)(ChartCard_1.ChartCard, { title: "\u7FA4\u6C89\u9ED8\u5206\u5E03", subtitle: "SILENT GROUPS", accentClassName: "bg-slate-500", caption: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u600E\u4E48\u7B97\u7684\uFF1A\u6BCF\u4E2A\u7FA4\u6309", (0, jsx_runtime_1.jsx)("b", { className: "text-foreground/80", children: "\u6700\u540E\u4E00\u6B21\u89E3\u6790\u8DDD\u4ECA\u51E0\u5929" }), "\u5F52\u5230\u4E00\u6863\uFF0C\u67F1\u5B50\u9AD8\u5EA6 = \u843D\u5728\u8FD9\u6863\u7684\u7FA4\u6570", (0, jsx_runtime_1.jsx)("br", {}), "\u7EFF = \u6700\u8FD1\u4E00\u5468\u8FD8\u5728\u7528 \u00B7 \u9EC4 = \u4E00\u5468\u5230\u4E00\u6708 \u00B7 \u7070 = \u8D85\u8FC7\u4E00\u6708\u6CA1\u52A8\u9759 \u00B7 \u67F1\u9876\u7B2C\u4E8C\u884C\u662F\u8BE5\u6863\u5360\u5168\u90E8\u7FA4\u7684\u6BD4\u4F8B", (0, jsx_runtime_1.jsx)("br", {}), "\u5F53\u524D\u6709 ", (0, jsx_runtime_1.jsxs)("b", { className: "text-foreground/80", children: [silenceActivePercent, "%"] }), " \u7684\u7FA4\u6700\u8FD1\u4E00\u5468\u7528\u8FC7"] }), children: (0, jsx_runtime_1.jsx)(SSRChart_1.SSRChart, { option: (0, chartPresets_1.buildSilenceBucketsOption)(data.silenceBuckets, dark), width: HALF_CHART_WIDTH, height: HALF_CHART_HEIGHT }) }))] }), (0, jsx_runtime_1.jsx)("div", { className: "pt-6", children: (0, jsx_runtime_1.jsxs)("div", { className: "text-center", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-mono tracking-widest text-muted mb-2", children: "TOTAL SERVICE" }), (0, jsx_runtime_1.jsxs)("div", { className: "text-3xl font-medium text-foreground/70", children: ["\u7D2F\u8BA1\u670D\u52A1 ", (0, jsx_runtime_1.jsx)("span", { className: "font-black text-foreground", children: (0, format_1.formatWithCommas)(data.totalGroups) }), " \u4E2A\u7FA4\u7EC4 \u00B7 \u89E3\u6790", ' ', (0, jsx_runtime_1.jsx)("span", { className: "font-black text-foreground", children: (0, format_1.formatWithCommas)(data.totalParses) }), " \u6B21"] })] }) })] })] }));
+};
+exports.GlobalStatistics = GlobalStatistics;
+exports.default = exports.GlobalStatistics;

package/lib/ktr/template/statistics/global/components/types.js

@@ -0,0 +1,3 @@
+"use strict";
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ktr/template/statistics/global/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const template_react_1 = require("../../../../compat/template-react.js");
+const GlobalStatistics_1 = require("./components/GlobalStatistics");
+exports.default = (0, template_react_1.defineTemplate)({
+    name: '全局统计',
+    description: '全局解析统计页面',
+    component: GlobalStatistics_1.GlobalStatistics
+});