koishi-plugin-kkk 1.0.0

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChartCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../utils/cn");
+/**
+ * 图表卡片：紧凑标题行 + 内容 + 可选说明。
+ *
+ * 取代了旧版那个「色条 + 5rem 大标题 + 英文副标题 + 160px 下边距」的分区头 ——
+ * 那张头每张图要吃掉约 360px，五张图光标题栏就占掉 1800px，
+ * 是海报被撑到 6900px 的主因。这里把标题压进卡片内部，一张图总共只需约 80px。
+ */
+const ChartCard = ({ title, subtitle, accentClassName = 'bg-violet-500', caption, className, children }) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)('relative flex flex-col rounded-2xl bg-surface/40 backdrop-blur-md border-2 border-border/40 p-6', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4 mb-4", children: [(0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)('w-3 h-10 rounded-full shrink-0', accentClassName) }), (0, jsx_runtime_1.jsx)("h3", { className: "text-4xl font-black tracking-tight leading-none text-foreground/90", children: title }), (0, jsx_runtime_1.jsx)("span", { className: "text-xl font-medium tracking-[0.15em] uppercase text-muted/60 leading-none", children: subtitle })] }), children, caption ? (0, jsx_runtime_1.jsx)("div", { className: "mt-3 text-center text-xl text-muted/80", children: caption }) : null] }));
+exports.ChartCard = ChartCard;
+exports.default = exports.ChartCard;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KpiCard = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../utils/cn");
+/**
+ * 指标卡：紧凑竖排。
+ *
+ * 旧版是「标题条 + 7rem 大数字」的厚卡，6 张要占两行共约 700px。
+ * 这里压成一行放 6 张，数值字号降到 5xl，读数依然清楚，但整块只占约 190px。
+ */
+const KpiCard = ({ title, titleEn, value, unit, hint, className }) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)('relative flex flex-col rounded-2xl bg-surface/40 backdrop-blur-md border-2 border-border/40 px-5 py-4', className), children: [(0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-black leading-tight text-foreground/90", children: title }), (0, jsx_runtime_1.jsx)("div", { className: "text-base font-medium tracking-widest uppercase text-muted/60 leading-tight mt-1", children: titleEn }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline gap-1 mt-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-5xl font-black leading-none text-foreground/90", children: value }), unit ? (0, jsx_runtime_1.jsx)("span", { className: "text-2xl font-medium text-foreground/70", children: unit }) : null] }), hint ? (0, jsx_runtime_1.jsx)("div", { className: "mt-2 text-lg leading-tight text-muted/70", children: hint }) : null] }));
+exports.KpiCard = KpiCard;
+exports.default = exports.KpiCard;

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlatformTable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../utils/cn");
+/** 数值列宽：够放下 `1,362` 和 `47.6%` */
+const CELL_WIDTH = 'w-28';
+/**
+ * 平台明细表。
+ *
+ * 环图旁边原来只是一列「logo + 名字 + 次数」，本质是图例；
+ * 这里升级成带表头的表格，能多塞两列数值（人数、人均之类），
+ * 同样的高度装的信息量翻倍 —— 这也是海报里唯一适合「读精确数字」的地方。
+ * 中间的占比条保留，让读者不读数字也能看出量级差距。
+ */
+const PlatformTable = ({ columns, rows, className }) => ((0, jsx_runtime_1.jsxs)("div", { className: (0, cn_1.cn)('flex flex-col gap-3', className), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4 pb-2 border-b-2 border-border/40", children: [(0, jsx_runtime_1.jsx)("span", { className: "w-12 shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "w-36 shrink-0 text-xl tracking-widest uppercase text-muted/60", children: "\u5E73\u53F0" }), (0, jsx_runtime_1.jsx)("span", { className: "flex-1" }), columns.map((column) => ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)(CELL_WIDTH, 'shrink-0 text-right text-xl tracking-widest uppercase text-muted/60'), children: column }, column)))] }), rows.map((row) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("img", { src: row.logo, alt: row.name, className: "w-12 h-12 object-contain shrink-0" }), (0, jsx_runtime_1.jsx)("span", { className: "w-36 shrink-0 text-2xl font-bold text-foreground/90", children: row.name }), (0, jsx_runtime_1.jsx)("div", { className: "flex-1 h-6 rounded-full bg-surface-secondary overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full rounded-full", style: { width: `${row.barPercent}%`, backgroundColor: row.color } }) }), row.cells.map((cell, index) => ((0, jsx_runtime_1.jsx)("span", { className: (0, cn_1.cn)(CELL_WIDTH, 'shrink-0 text-right text-2xl tabular-nums', 
+                    // 第一列是主数值，加粗；其余列弱一档，读起来有主次
+                    index === 0 ? 'font-black text-foreground/90' : 'text-foreground/70'), children: cell }, columns[index])))] }, row.key)))] }));
+exports.PlatformTable = PlatformTable;
+exports.default = exports.PlatformTable;

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

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RankLegend = exports.collectRankPlatforms = exports.RankList = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const chartTheme_1 = require("./chartTheme");
+/** 每段里「保持本色」的比例，剩下的部分渐到下一段的颜色 */
+const SEGMENT_SOLID_RATIO = 0.55;
+/**
+ * 把一行的平台构成编成一条 CSS 水平渐变。
+ *
+ * 思路是「整条只画一个渐变、平台边界只体现在色标的位置上」：
+ * 按堆叠顺序（`PLATFORM_ORDER`，不是按次数大小）算出每段的起止比例，
+ * 段内先保持本色、再渐到下一段的颜色，于是相邻两段首尾同色，接缝处完全连续。
+ *
+ * 早先是每个平台一个 ECharts 堆叠系列，也就是各自独立的 SVG path，
+ * 抗锯齿会在接缝处留一条细边，放大看很明显；合成一条渐变之后这个问题从根上消失。
+ */
+const toCssGradient = (segments, dark) => {
+    const ordered = chartTheme_1.PLATFORM_ORDER.map((platform) => ({
+        platform,
+        count: segments.find((segment) => segment.platform === platform)?.count ?? 0
+    })).filter((segment) => segment.count > 0);
+    const total = ordered.reduce((sum, segment) => sum + segment.count, 0);
+    if (ordered.length === 0 || total === 0)
+        return 'transparent';
+    const stops = [];
+    let cursor = 0;
+    ordered.forEach((segment, index) => {
+        const share = segment.count / total;
+        const own = (0, chartTheme_1.platformColor)(segment.platform, dark);
+        const next = ordered[index + 1] ? (0, chartTheme_1.platformColor)(ordered[index + 1].platform, dark) : own;
+        stops.push(`${own} ${(cursor * 100).toFixed(2)}%`);
+        stops.push(`${own} ${((cursor + share * SEGMENT_SOLID_RATIO) * 100).toFixed(2)}%`);
+        stops.push(`${next} ${((cursor + share) * 100).toFixed(2)}%`);
+        cursor += share;
+    });
+    return `linear-gradient(90deg, ${stops.join(', ')})`;
+};
+/**
+ * 排行榜列表。
+ *
+ * 用 HTML 而不是 ECharts：这个版式（头像占左侧一列、名字在进度条上方、每条占两行）
+ * 在 ECharts 里表达不了 —— 类目轴标签只能整体贴在轴的左边，没法让名字横跨到条子上方。
+ * 换成 HTML 之后头像的圆形、渐变条的接缝也都变成 CSS 的事，不用再跟富文本的限制较劲
+ * （ECharts 富文本的图片背景既不支持圆角、段内对齐也覆盖不掉）。
+ */
+const RankList = ({ rows, dark }) => {
+    const max = Math.max(...rows.map((row) => row.segments.reduce((sum, segment) => sum + segment.count, 0)), 1);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-col gap-8 px-6 py-10", children: rows.map((row) => {
+            const total = row.segments.reduce((sum, segment) => sum + segment.count, 0);
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-5", children: [(0, jsx_runtime_1.jsx)("img", { src: row.avatar, alt: "", className: "w-14 h-14 rounded-full shrink-0 object-cover" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-baseline justify-between gap-4 mb-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-3xl leading-none text-foreground/90 truncate", children: row.name }), (0, jsx_runtime_1.jsx)("span", { className: "text-2xl leading-none font-black text-foreground/80 shrink-0", children: row.label })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 rounded-full bg-surface-secondary overflow-hidden", children: (0, jsx_runtime_1.jsx)("div", { className: "h-full rounded-full", style: { width: `${(total / max) * 100}%`, background: toCssGradient(row.segments, dark) } }) })] })] }, row.name));
+        }) }));
+};
+exports.RankList = RankList;
+/** 榜单需要的平台图例（只列真正出现过的平台） */
+const collectRankPlatforms = (rows) => chartTheme_1.PLATFORM_ORDER.filter((platform) => rows.some((row) => row.segments.some((segment) => segment.platform === platform && segment.count > 0)));
+exports.collectRankPlatforms = collectRankPlatforms;
+/** 榜单的平台图例，和堆叠条配套使用 */
+const RankLegend = ({ platforms, dark }) => ((0, jsx_runtime_1.jsx)("div", { className: "mt-4 flex flex-wrap justify-center gap-x-6 gap-y-2", children: platforms.map((platform) => ((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)(platform, dark) } }), (0, jsx_runtime_1.jsx)("span", { className: "text-xl text-foreground/80", children: chartTheme_1.PLATFORM_META[platform].name })] }, platform))) }));
+exports.RankLegend = RankLegend;
+exports.default = exports.RankList;

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

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SSRChart = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const cn_1 = require("../../../utils/cn");
+const chartTheme_1 = require("./chartTheme");
+/**
+ * 图表渲染组件 —— 在 render 期同步产出 SVG 并整段注入。
+ *
+ * 为什么是 `dangerouslySetInnerHTML` 而不是返回 React 元素：
+ * `renderToSVGString()` 给的是完整独立 `<svg>` 字符串，React 没法把它当子树挂上去。
+ * 这里注入的内容全部由 ECharts 在本进程内生成（不含用户输入），不存在 XSS 面。
+ *
+ * 组件刻意不持有任何状态、不碰 DOM、不用 hooks —— 只走一次 SSR。
+ * 同一份代码在开发面板（浏览器 createRoot）下也成立：`ssr: true` 时 ECharts 会跳过所有 DOM 校验。
+ */
+const SSRChart = ({ option, width, height, className }) => {
+    const svg = (0, chartTheme_1.renderChartToSVG)(option, width, height);
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, cn_1.cn)('flex justify-center', className), style: { width, height }, dangerouslySetInnerHTML: { __html: svg } }));
+};
+exports.SSRChart = SSRChart;
+exports.default = exports.SSRChart;