koishi-plugin-kkk 1.0.0

package/lib/ktr/template/statistics/group/components/GroupStatistics.js

@@ -0,0 +1,181 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GroupStatistics = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const theme_1 = require("../../../../utils/theme");
+const DefaultLayout_1 = require("../../../components/DefaultLayout");
+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 宽的画面里全部走卡片网格，
+ * 每张图独占一张卡，卡内自带紧凑标题行 —— 旧版那种「大标题 + 160px 下边距」的分区头
+ * 每张图要吃掉 360px，是海报被撑到 6900px 的主因。
+ *
+ * 图表由 ECharts 在 render 期同步渲染成 SVG 字符串后注入，
+ * 组件不持有状态、不碰 DOM、不用 hooks。配色约束见 `chartTheme.ts` 文件头。
+ */
+/** 海报内容区宽度：1440 - 左右各 72(p-18) */
+const CONTENT_WIDTH = 1296;
+/** 两列网格的间距与单卡宽度：gap-14(56px) 下正好铺满内容区 */
+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;
+/**
+ * 极坐标那一行的画布尺寸。
+ *
+ * 「活跃时段」那张是极坐标图，圆的外接正方形只能用画布**短边**，
+ * 所以常规的 572×340 里有 116px×2 的横向空间是纯浪费的。
+ * 处理办法是两件事一起做：
+ * 1. 把这一行整体加高 —— 半径上限就是短边的一半，不加高光调比例没用；
+ * 2. 把这一行拆成 1 : 1.35，让极坐标卡窄一点、周内分布宽一点，
+ *    加高到 480 之后短边就轮到宽度来当了，再高也不会更大。
+ * 同排的周内分布跟着一起长，不然网格拉平后那张卡底部会空出一块。
+ */
+const POLAR_CHART_WIDTH = 479;
+const POLAR_CHART_HEIGHT = 480;
+/** 周内分布那张卡的画布宽度（1.35 份） */
+const WEEKDAY_CHART_WIDTH = 664;
+/** 平台分布里环形图的画布尺寸，剩下宽度留给右侧明细列表 */
+const DONUT_SIZE = { width: 420, height: 300 };
+/**
+ * 活跃时段：24 小时极坐标柱，峰值小时单独提亮。
+ * 半径按画布短边换算 —— 极坐标图的实际可用直径受限于较短的那条边。
+ */
+const buildHourPolarOption = (hourly, size, dark) => {
+    const palette = (0, chartTheme_1.getChartPalette)(dark);
+    const peakHour = hourly.indexOf(Math.max(...hourly));
+    const short = Math.min(size.width, size.height);
+    return {
+        // 0.40 是留给轴标签后的上限：外圈半径 + 标签高度不能超过画布短边的一半
+        polar: { radius: [Math.round(short * 0.15), Math.round(short * 0.4)], center: ['50%', '50%'] },
+        angleAxis: {
+            type: 'category',
+            data: hourly.map((_, hour) => `${hour}时`),
+            startAngle: 90,
+            axisLine: (0, chartTheme_1.axisLineStyle)(palette),
+            axisTick: { show: false },
+            // 24 个刻度全画会糊，每 3 小时标一个
+            axisLabel: { ...(0, chartTheme_1.axisLabelStyle)(palette, 20), interval: 2 }
+        },
+        radiusAxis: {
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { show: false },
+            splitLine: (0, chartTheme_1.splitLineStyle)(palette)
+        },
+        series: [
+            {
+                type: 'bar',
+                coordinateSystem: 'polar',
+                barWidth: '60%',
+                itemStyle: { borderRadius: [6, 6, 0, 0] },
+                data: hourly.map((count, hour) => ({
+                    value: count,
+                    itemStyle: { color: hour === peakHour && count > 0 ? palette.accent : (0, chartTheme_1.withAlpha)(palette.accent, 0.4) }
+                }))
+            }
+        ]
+    };
+};
+/**
+ * 内容形态构成：矩形树图。
+ *
+ * 试过饼图和玫瑰图，都不合适：内容形态天然是单项独大（视频常占一半以上），
+ * 饼图/玫瑰图会把这个大类摊成一整块扇形，整张图歪向一边。
+ * 树图的面积严格正比于数值，独大项只体现为大矩形，不会破坏版面平衡。
+ */
+const buildWorkTypeTreemapOption = (workTypes, dark) => {
+    const palette = (0, chartTheme_1.getChartPalette)(dark);
+    const total = workTypes.reduce((sum, item) => sum + item.count, 0);
+    return {
+        series: [
+            {
+                type: 'treemap',
+                roam: false,
+                nodeClick: false,
+                // 关掉面包屑，否则它会占掉顶部一条高，树图也就填不满画布
+                breadcrumb: { show: false },
+                itemStyle: { borderColor: 'transparent', borderWidth: 5, gapWidth: 5, borderRadius: 12 },
+                label: {
+                    show: true,
+                    fontSize: 26,
+                    fontWeight: 'bold',
+                    color: palette.textOnColor,
+                    fontFamily: chartTheme_1.CHART_FONT_FAMILY,
+                    formatter: '{b}'
+                },
+                data: workTypes.map((item) => ({
+                    name: chartTheme_1.WORK_TYPE_META[item.workType].label,
+                    value: item.count,
+                    // 小块塞不下整词，会被截成一个字（「文」「直」），反而更难读；交给下方图例认色
+                    label: { show: total > 0 && item.count / total >= 0.08 },
+                    itemStyle: { color: chartTheme_1.WORK_TYPE_META[item.workType].color }
+                }))
+            }
+        ]
+    };
+};
+/**
+ * 群组解析统计组件 Group Statistics
+ */
+const GroupStatistics = (props) => {
+    const dark = (0, theme_1.isDark)(props.ctx);
+    const data = props.data;
+    const platformTotal = data.platformData.reduce((sum, item) => sum + item.count, 0);
+    const workTypeTotal = data.workTypes.reduce((sum, item) => sum + item.count, 0);
+    const hourlyTotal = data.hourly.reduce((sum, count) => sum + count, 0);
+    const weekdayTotal = data.weekday.reduce((sum, count) => sum + count, 0);
+    const hasTrend = data.trend.some((point) => point.count > 0);
+    const peakHour = hourlyTotal > 0 ? data.hourly.indexOf(Math.max(...data.hourly)) : -1;
+    const topPlatform = data.topPlatform ? chartTheme_1.PLATFORM_META[data.topPlatform] : undefined;
+    const platformLegend = (0, chartPresets_1.buildPlatformLegend)(data.platformData, dark);
+    const maxPlatformCount = Math.max(...data.platformData.map((item) => item.count), 1);
+    /** 排行条：按平台堆叠，条尾标总次数 */
+    const userRows = data.topUsers.map((user) => ({
+        name: user.name,
+        avatar: user.avatar,
+        segments: user.segments,
+        label: `${(0, format_1.formatWithCommas)(user.count)} 次`
+    }));
+    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(236, 72, 153, 0.4)' : 'rgba(244, 114, 182, 0.5)'} 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(59, 130, 246, 0.25)' : 'rgba(96, 165, 250, 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: "STATS" }) }), (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: "flex items-center gap-8 border-b-4 border-border/30 pb-8", children: [data.groupAvatar && ((0, jsx_runtime_1.jsx)("img", { src: data.groupAvatar, alt: "\u7FA4\u5934\u50CF", className: "w-28 h-28 rounded-2xl object-cover border-4 border-border/50 shrink-0" })), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1 min-w-0", 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-pink-500 animate-pulse" }), (0, jsx_runtime_1.jsx)("span", { className: "text-2xl font-mono tracking-widest text-muted/80", children: "GROUP_ANALYTICS" })] }), (0, jsx_runtime_1.jsx)("h1", { className: "text-[5rem] font-black leading-none tracking-tighter text-foreground/90", children: "\u89E3\u6790\u7EDF\u8BA1" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-right shrink-0", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-3xl font-bold text-foreground/80 max-w-140 truncate", children: [data.groupName, "(", data.groupId, ")"] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-2xl text-muted/70 mt-2", children: [data.groupMemberCount ? `共 ${data.groupMemberCount} 人 · ` : '', "\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: "\u672C\u7FA4\u89E3\u6790", titleEn: "GROUP TOTAL", value: (0, format_1.formatCompact)(data.groupTotalParses), unit: "\u6B21" }), (0, jsx_runtime_1.jsx)(KpiCard_1.KpiCard, { title: "\u4F7F\u7528\u7528\u6237", titleEn: "UNIQUE USERS", value: (0, format_1.formatCompact)(data.groupUniqueUsers), unit: "\u4EBA" }), (0, jsx_runtime_1.jsx)(KpiCard_1.KpiCard, { title: "\u4EBA\u5747\u89E3\u6790", titleEn: "PER USER", value: data.parsesPerUser.toFixed(1), unit: "\u6B21" }), (0, jsx_runtime_1.jsx)(KpiCard_1.KpiCard, { title: "\u65E5\u5747\u89E3\u6790", titleEn: "DAILY AVG", value: (data.activeDays > 0 ? data.groupTotalParses / data.activeDays : 0).toFixed(1), unit: "\u6B21", hint: data.activeDays > 0 ? `${data.activeDays} 天` : '无按天数据' }), (0, jsx_runtime_1.jsx)(KpiCard_1.KpiCard, { title: "\u6D3B\u8DC3\u5929\u6570", titleEn: "ACTIVE DAYS", value: (0, format_1.formatCompact)(data.activeDays), unit: "\u5929" }), (0, jsx_runtime_1.jsx)(KpiCard_1.KpiCard, { title: "\u4E3B\u529B\u5E73\u53F0", titleEn: "TOP PLATFORM", value: topPlatform ? topPlatform.name : '—', hint: topPlatform ? `占 ${(0, format_1.formatPercent)(data.platformData[0]?.count ?? 0, platformTotal)}%` : '暂无数据' })] }), 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.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, { baseline: data.globalDailyAverage, baselineLabel: '全局日均' }), width: FULL_CHART_WIDTH, height: 360 }), (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.globalDailyAverage.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-[1fr_1.35fr] gap-14", children: [hourlyTotal > 0 && ((0, jsx_runtime_1.jsx)(ChartCard_1.ChartCard, { title: "\u6D3B\u8DC3\u65F6\u6BB5", subtitle: "ACTIVE HOURS", accentClassName: "bg-amber-500", caption: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: ["\u6700\u6D3B\u8DC3\u65F6\u6BB5 ", peakHour, ":00 - ", peakHour + 1, ":00"] }), children: (0, jsx_runtime_1.jsx)(SSRChart_1.SSRChart, { option: buildHourPolarOption(data.hourly, { width: POLAR_CHART_WIDTH, height: POLAR_CHART_HEIGHT }, dark), width: POLAR_CHART_WIDTH, height: POLAR_CHART_HEIGHT }) })), weekdayTotal > 0 && ((0, jsx_runtime_1.jsx)(ChartCard_1.ChartCard, { title: "\u5468\u5185\u5206\u5E03", subtitle: "BY WEEKDAY", accentClassName: "bg-sky-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", {}), "\u53D6\u65E5\u5747\u800C\u4E0D\u662F\u4E03\u5929\u603B\u548C\uFF1A\u7A97\u53E3\u4E0D\u662F\u6574\u5468\uFF0C\u76F4\u63A5\u52A0\u603B\u4F1A\u8BA9\u672B\u5C3E\u90A3\u4E24\u4E2A\u661F\u671F\u51E0\u51ED\u7A7A\u9AD8\u51FA\u4E00\u622A"] }), children: (0, jsx_runtime_1.jsx)(SSRChart_1.SSRChart, { option: (0, chartPresets_1.buildWeekdayOption)(data.weekday, dark), width: WEEKDAY_CHART_WIDTH, height: POLAR_CHART_HEIGHT }) }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-14", children: [workTypeTotal > 0 && ((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: buildWorkTypeTreemapOption(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))) })] })), hourlyTotal > 0 && data.platformHourly.length > 0 && ((0, jsx_runtime_1.jsxs)(ChartCard_1.ChartCard, { title: "\u5E73\u53F0 \u00D7 \u65F6\u6BB5", subtitle: "PLATFORM BY HOUR", accentClassName: "bg-indigo-500", children: [(0, jsx_runtime_1.jsx)(SSRChart_1.SSRChart, { option: (0, chartPresets_1.buildPlatformHourOption)(data.platformHourly, 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.platformHourly.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))) })] }))] }), 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));
+                    }), userRows.length > 0 && ((0, jsx_runtime_1.jsxs)(ChartCard_1.ChartCard, { title: "\u6D3B\u8DC3\u7528\u6237", subtitle: "TOP USERS", accentClassName: "bg-emerald-500", caption: "\u8FDB\u5EA6\u6761\u6309\u5E73\u53F0\u5206\u8272\uFF0C\u989C\u8272 = \u8BE5\u7528\u6237\u5728\u8FD9\u4E2A\u7FA4\u91CC\u7684\u89E3\u6790\u6765\u81EA\u54EA\u4E2A\u5E73\u53F0\uFF1B\u53F3\u4FA7\u662F\u603B\u6B21\u6570", children: [(0, jsx_runtime_1.jsx)(RankList_1.RankList, { rows: userRows, dark: dark }), (0, jsx_runtime_1.jsx)(RankList_1.RankLegend, { platforms: (0, RankList_1.collectRankPlatforms)(userRows), dark: dark })] })), (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.globalTotalGroups) }), " \u4E2A\u7FA4\u7EC4 \u00B7 \u89E3\u6790", ' ', (0, jsx_runtime_1.jsx)("span", { className: "font-black text-foreground", children: (0, format_1.formatWithCommas)(data.globalTotalParses) }), " \u6B21"] })] }) })] })] }));
+};
+exports.GroupStatistics = GroupStatistics;
+exports.default = exports.GroupStatistics;

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

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

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

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

package/lib/ktr/template/types/ctx.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ktr/template/xiaohongshu/comment/components/Comment.js

@@ -0,0 +1,99 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XiaohongshuComment = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const richtext_1 = require("../../../../../richtext");
+const date_fns_1 = require("date-fns");
+const locale_1 = require("date-fns/locale");
+const lucide_react_1 = require("lucide-react");
+const react_1 = __importDefault(require("react"));
+const QRcode_1 = require("../../../../utils/QRcode");
+const theme_1 = require("../../../../utils/theme");
+const DefaultLayout_1 = require("../../../components/DefaultLayout");
+const xiaohongshuMentionClassName = 'text-[#13386c] dark:text-[#c7daef]';
+const renderXiaohongshuCommentRichText = (content) => {
+    return (0, richtext_1.renderRichTextToReact)(content, {
+        mention: { className: xiaohongshuMentionClassName }
+    });
+};
+const formatXiaohongshuCommentTime = (timestamp) => {
+    if (!timestamp) {
+        return '';
+    }
+    const commentDate = new Date(timestamp);
+    const diffSeconds = (0, date_fns_1.differenceInSeconds)(new Date(), commentDate);
+    if (diffSeconds < 30) {
+        return '刚刚';
+    }
+    if (diffSeconds < 7776000) {
+        return (0, date_fns_1.formatDistanceToNow)(commentDate, {
+            locale: locale_1.zhCN,
+            addSuffix: true
+        });
+    }
+    return (0, date_fns_1.format)(commentDate, 'yyyy-MM-dd');
+};
+const formatXiaohongshuLikeCount = (count) => {
+    const numberCount = Number(count);
+    if (Number.isFinite(numberCount) && numberCount >= 10000) {
+        return `${(numberCount / 10000).toFixed(1)}w`;
+    }
+    return count || '0';
+};
+/**
+ * 笔记信息头部组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+const NoteInfoHeader = (props) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center max-w-300 mx-auto p-5", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col justify-center items-start", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex justify-start items-center", children: (0, jsx_runtime_1.jsx)("img", { src: "/image/xiaohongshu/logo.png", alt: "\u5C0F\u7EA2\u4E66Logo", className: "object-contain mb-20 max-w-full max-h-full scale-180 ml-15", onError: (e) => {
+                                const target = e.target;
+                                target.style.display = 'none';
+                                const parent = target.parentElement;
+                                if (parent) {
+                                    parent.innerHTML = '<div class="flex justify-start items-center h-full text-2xl font-bold text-foreground/70">小红书</div>';
+                                }
+                            } }) }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-8 space-y-4 text-left text-muted", children: [(0, jsx_runtime_1.jsxs)("div", { className: "tracking-[6px] text-[45px] select-text", children: ["\u7B14\u8BB0\u7C7B\u578B\uFF1A", props.Type] }), (0, jsx_runtime_1.jsxs)("div", { className: "tracking-[6px] text-[45px] select-text", children: ["\u8BC4\u8BBA\u6570\u91CF\uFF1A", props.CommentLength, "\u6761"] }), props.Type === '图文' && props.ImageLength && ((0, jsx_runtime_1.jsxs)("div", { className: "tracking-[6px] text-[45px] select-text", children: ["\u56FE\u7247\u6570\u91CF\uFF1A", props.ImageLength, "\u5F20"] }))] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col justify-center items-center p-5", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex overflow-hidden justify-center items-center bg-white w-110 h-110", children: (0, jsx_runtime_1.jsx)("img", { src: (0, QRcode_1.generateQRCode)(props.share_url, props.useDarkTheme), alt: "\u4E8C\u7EF4\u7801", className: "object-contain" }) }), (0, jsx_runtime_1.jsx)("p", { className: "mt-5 text-[40px] text-muted text-center", children: "\u626B\u7801\u67E5\u770B\u539F\u7B14\u8BB0" })] })] }));
+};
+/**
+ * 单个评论组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+const CommentItemComponent = ({ ...props }, isLast = false) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: `flex px-10 pt-15 ${isLast ? 'pb-0' : 'pb-15'}`, children: [(0, jsx_runtime_1.jsx)("img", { src: props.user_info.image, className: "mb-12.5 w-[187.5px] h-[187.5px] rounded-full mr-8 object-cover shadow-lg", alt: "\u7528\u6237\u5934\u50CF" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "mb-12.5 text-[50px] text-foreground/70 relative flex items-center select-text", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-5xl", children: props.user_info.nickname }), props.show_tags &&
+                                props.show_tags.length > 0 &&
+                                props.show_tags.map((tag, index) => {
+                                    if (tag === 'is_author') {
+                                        return ((0, jsx_runtime_1.jsx)("div", { className: "inline-block px-6 py-3 ml-3 text-4xl rounded-full bg-surface text-muted", children: "\u4F5C\u8005" }, index));
+                                    }
+                                    else if (tag === 'user_top') {
+                                        return ((0, jsx_runtime_1.jsx)("div", { className: "inline-block px-6 py-3 rounded-full ml-3 text-4xl bg-[#ff2e4d0f] text-[#ff2e4d]", children: "\u7F6E\u9876\u8BC4\u8BBA" }, index));
+                                    }
+                                    else {
+                                        return null;
+                                    }
+                                })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-[60px] text-foreground leading-relaxed mb-2 whitespace-pre-wrap select-text", style: {
+                            wordBreak: 'break-word',
+                            overflowWrap: 'break-word'
+                        }, children: renderXiaohongshuCommentRichText(props.content) }), props.pictures && props.pictures.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "flex my-5 overflow-hidden shadow-md rounded-2xl w-[95%] flex-1", children: (0, jsx_runtime_1.jsx)("img", { className: "object-contain w-full h-full rounded-2xl", src: props.pictures[0].url_default, alt: "\u8BC4\u8BBA\u56FE\u7247" }) })), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mt-6 text-muted", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-6 select-text", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[45px]", children: formatXiaohongshuCommentTime(props.create_time) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[45px]", children: props.ip_location }), parseInt(props.sub_comment_count) > 0 ? ((0, jsx_runtime_1.jsxs)("span", { className: "text-[40px] text-foreground/70", children: ["\u5171", props.sub_comment_count, "\u6761\u56DE\u590D"] })) : ((0, jsx_runtime_1.jsx)("span", { className: "text-[40px] text-foreground/70", children: "\u56DE\u590D" }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2 transition-colors cursor-pointer", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Heart, { size: 60, className: props.liked ? 'text-red-500 fill-current' : 'text-muted' }), (0, jsx_runtime_1.jsx)("span", { className: "text-[50px] select-text", children: formatXiaohongshuLikeCount(props.like_count) })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex items-center transition-colors cursor-pointer", children: (0, jsx_runtime_1.jsx)(lucide_react_1.MessageCircle, { size: 60, className: "stroke-current text-muted" }) })] })] }), props.sub_comments && props.sub_comments.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "pl-6 mt-6", children: props.sub_comments.map((subComment, index) => ((0, jsx_runtime_1.jsx)("div", { className: `py-4 ${index !== props.sub_comments.length - 1 ? 'border-b border-divider' : ''}`, children: (0, jsx_runtime_1.jsxs)("div", { className: "flex items-start space-x-4", children: [(0, jsx_runtime_1.jsx)("img", { src: subComment.user_info.image, className: "object-cover mr-8 w-32 h-32 rounded-full", alt: "\u7528\u6237\u5934\u50CF" }), (0, jsx_runtime_1.jsxs)("div", { className: "flex-1", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center mb-2 space-x-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[40px] font-medium text-foreground/70", children: subComment.user_info.nickname }), subComment.show_tags &&
+                                                        subComment.show_tags.length > 0 &&
+                                                        subComment.show_tags.map((tag, tagIndex) => tag === 'is_author' ? ((0, jsx_runtime_1.jsx)("div", { className: "inline-block px-5 py-2 ml-2 text-3xl rounded-full bg-surface text-muted", children: "\u4F5C\u8005" }, tagIndex)) : null)] }), (0, jsx_runtime_1.jsx)("div", { className: "text-[45px] text-foreground leading-relaxed mb-2 whitespace-pre-wrap select-text", style: {
+                                                    wordBreak: 'break-word',
+                                                    overflowWrap: 'break-word'
+                                                }, children: (0, richtext_1.renderRichTextToReact)(subComment.content, {
+                                                    mention: { className: xiaohongshuMentionClassName }
+                                                }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center text-muted", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[35px]", children: formatXiaohongshuCommentTime(subComment.create_time) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[35px]", children: subComment.ip_location })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center space-x-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Heart, { size: 40, className: subComment.liked ? 'text-red-500 fill-current' : 'text-muted' }), (0, jsx_runtime_1.jsx)("span", { className: "text-[35px]", children: formatXiaohongshuLikeCount(subComment.like_count) })] })] })] })] }) }, subComment.id))) }))] })] }));
+};
+/**
+ * 小红书评论组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+exports.XiaohongshuComment = react_1.default.memo((props) => {
+    return ((0, jsx_runtime_1.jsxs)(DefaultLayout_1.DefaultLayout, { ...props, children: [(0, jsx_runtime_1.jsx)("div", { className: "h-30" }), (0, jsx_runtime_1.jsx)(NoteInfoHeader, { ...props.data, useDarkTheme: (0, theme_1.isDark)(props.ctx) }), (0, jsx_runtime_1.jsx)("div", { className: "overflow-auto mx-20 max-w-full", children: props.data.CommentsData.length > 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "divide-y divide-divider", children: props.data.CommentsData.map((comment, index) => ((0, jsx_runtime_1.jsx)(CommentItemComponent, { ...comment, isLast: index === props.data.CommentsData.length - 1 }, comment.id))) })) : ((0, jsx_runtime_1.jsx)("div", { className: "flex justify-center items-center py-20", children: (0, jsx_runtime_1.jsx)("p", { className: "text-[60px] text-muted", children: props.data.ErrorText ?? '暂无评论' }) })) })] }));
+});
+exports.default = exports.XiaohongshuComment;

package/lib/ktr/template/xiaohongshu/comment/components/types.js

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

package/lib/ktr/template/xiaohongshu/comment/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const template_react_1 = require("../../../../compat/template-react.js");
+const Comment_1 = require("./components/Comment");
+exports.default = (0, template_react_1.defineTemplate)({
+    name: '评论列表',
+    description: '小红书评论列表展示模板',
+    component: Comment_1.XiaohongshuComment
+});

package/lib/ktr/template/xiaohongshu/noteInfo/components/noteInfo.js

@@ -0,0 +1,93 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.XiaohongshuNoteInfo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const richtext_1 = require("../../../../../richtext");
+const react_1 = require("../../../../../compat/phosphor-icons.js");
+const date_fns_1 = require("date-fns");
+const lucide_react_1 = require("lucide-react");
+const react_2 = __importDefault(require("react"));
+const theme_1 = require("../../../../utils/theme");
+const AmbientCover_1 = require("../../../components/AmbientCover");
+const DefaultLayout_1 = require("../../../components/DefaultLayout");
+const QRCodeWithAvatar_1 = require("../../../components/QRCodeWithAvatar");
+/** 小红书品牌红：整图唯一强调色，只用于点赞图标与头像描边 */
+const XHS_RED = '#FF2442';
+const xiaohongshuNoteMentionClassName = 'text-[#13386c] dark:text-[#c7daef]';
+/**
+ * 格式化互动数：纯数字串过万缩写为 x.x万；API 已格式化的「5.7万」等原样返回
+ * @param num 数字
+ * @returns 格式化后的字符串
+ */
+const formatNumber = (num) => {
+    if (typeof num === 'string' && !/^\d+$/.test(num.trim()))
+        return num || '0';
+    const numValue = typeof num === 'string' ? parseInt(num, 10) : num;
+    if (!Number.isFinite(numValue))
+        return String(num) || '0';
+    if (numValue >= 10000) {
+        return `${(numValue / 10000).toFixed(1)}万`;
+    }
+    return numValue.toLocaleString();
+};
+/**
+ * 全局氛围背景层：弥散渐变封面 + 高对比杂色纹理。
+ * 与抖音/B站同一套骨架，噪点集中在上下两端、中间让位给正文。
+ */
+const NoteDiffuseBackground = ({ data, ctx }) => ((0, jsx_runtime_1.jsxs)("div", { className: "pointer-events-none absolute inset-0 overflow-hidden select-none", children: [(0, jsx_runtime_1.jsx)(AmbientCover_1.AmbientCover, { src: data.image_url, ctx: ctx }), (0, jsx_runtime_1.jsx)("div", { className: "absolute inset-0 opacity-[0.4] mix-blend-overlay dark:mix-blend-soft-light", children: (0, jsx_runtime_1.jsxs)("svg", { className: "h-full w-full", xmlns: "http://www.w3.org/2000/svg", children: [(0, jsx_runtime_1.jsxs)("defs", { children: [(0, jsx_runtime_1.jsxs)("filter", { id: "xhsNoteNoise", children: [(0, jsx_runtime_1.jsx)("feTurbulence", { type: "fractalNoise", baseFrequency: "1.2", numOctaves: "3", 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)("feComponentTransfer", { children: (0, jsx_runtime_1.jsx)("feFuncA", { type: "linear", slope: "2.5", intercept: "-0.6" }) })] }), (0, jsx_runtime_1.jsxs)("mask", { id: "xhsNoteNoiseMask", children: [(0, jsx_runtime_1.jsxs)("linearGradient", { id: "xhsNoteNoiseGradient", x1: "0%", y1: "0%", x2: "0%", y2: "100%", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "0%", stopColor: "white", stopOpacity: "0.85" }), (0, jsx_runtime_1.jsx)("stop", { offset: "25%", stopColor: "white", stopOpacity: "0.4" }), (0, jsx_runtime_1.jsx)("stop", { offset: "50%", stopColor: "white", stopOpacity: "0.08" }), (0, jsx_runtime_1.jsx)("stop", { offset: "75%", stopColor: "white", stopOpacity: "0.4" }), (0, jsx_runtime_1.jsx)("stop", { offset: "100%", stopColor: "white", stopOpacity: "0.85" })] }), (0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", fill: "url(#xhsNoteNoiseGradient)" })] })] }), (0, jsx_runtime_1.jsx)("rect", { width: "100%", height: "100%", filter: "url(#xhsNoteNoise)", mask: "url(#xhsNoteNoiseMask)", fill: "white" })] }) })] }));
+/**
+ * 顶部系统标签行：海报式技术标签 + 笔记 ID，替代平台 Logo 的顶部占位
+ */
+const NoteSystemLabel = ({ data }) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "h-8 w-2 rounded-full", style: { backgroundColor: XHS_RED } }), (0, jsx_runtime_1.jsx)("span", { className: "text-[26px] font-bold tracking-[0.3em] uppercase text-foreground/60", children: "Xiaohongshu Note" })] }), (0, jsx_runtime_1.jsxs)("span", { className: "font-mono text-[26px] text-foreground/40 select-text", children: ["ID: ", data.note_id] })] }));
+/**
+ * 笔记封面：官方分享长图的干净大图样式，圆角 + 大投影，不做溶解遮罩。
+ * 图集在右下角堆叠预览后续图片，超出部分以 +N 收尾；视频笔记改为白色半透明播放图标。
+ */
+const NoteCover = ({ data }) => {
+    const images = data.image_list?.length ? data.image_list : [data.image_url];
+    const previewImages = data.is_video ? [] : images.slice(1, 4).filter(Boolean);
+    const remainingPreviewCount = Math.max(images.length - previewImages.length - 1, 0);
+    return ((0, jsx_runtime_1.jsxs)("section", { className: "relative mt-12 overflow-hidden rounded-[3rem] shadow-2xl", children: [(0, jsx_runtime_1.jsx)("img", { src: data.image_url, alt: data.title || '小红书笔记封面', className: "block h-auto w-full object-cover", referrerPolicy: "no-referrer", crossOrigin: "anonymous" }), data.is_video && ((0, jsx_runtime_1.jsx)(react_1.PlayIcon, { size: 104, weight: "fill", "aria-label": "\u89C6\u9891\u7B14\u8BB0", className: "absolute right-10 bottom-10 z-10 text-white/50" })), previewImages.length > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "absolute right-10 bottom-10 z-10 flex items-center -space-x-5 drop-shadow-2xl", children: [previewImages.map((url, index) => ((0, jsx_runtime_1.jsx)("img", { src: url, alt: "\u56FE\u96C6\u9884\u89C8", className: "h-28 w-28 rounded-3xl object-cover ring-2 ring-white/25", style: { transform: `rotate(${(index - 1) * 8}deg)` }, referrerPolicy: "no-referrer", crossOrigin: "anonymous" }, `${url}-${index}`))), remainingPreviewCount > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "flex h-28 w-28 items-center justify-center rounded-3xl bg-black/50 px-5 text-[32px] font-black text-white ring-2 ring-white/25 backdrop-blur-xs", children: ["+", remainingPreviewCount] }))] }))] }));
+};
+/**
+ * 作者行：官方长图位置（封面之后、标题之前），头像带品牌红描边
+ */
+const NoteAuthorRow = ({ data }) => ((0, jsx_runtime_1.jsxs)("section", { className: "mt-14 flex items-center gap-6", children: [(0, jsx_runtime_1.jsx)("img", { src: data.author.avatar, alt: data.author.nickname, className: "h-28 w-28 shrink-0 rounded-full border-4 object-cover shadow-xl", style: { borderColor: `${XHS_RED}33` }, referrerPolicy: "no-referrer", crossOrigin: "anonymous" }), (0, jsx_runtime_1.jsxs)("div", { className: "min-w-0", children: [(0, jsx_runtime_1.jsx)("div", { className: "max-w-200 truncate text-[52px] font-black leading-tight text-foreground select-text", children: data.author.nickname }), (0, jsx_runtime_1.jsxs)("div", { className: "mt-3 flex flex-wrap items-center gap-x-6 gap-y-2 text-[30px] text-muted", children: [(0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.Calendar, { size: 28 }), (0, jsx_runtime_1.jsx)("span", { className: "select-text", children: (0, date_fns_1.format)(new Date(data.time), 'yyyy-MM-dd HH:mm') })] }), data.ip_location && ((0, jsx_runtime_1.jsxs)("span", { className: "inline-flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.MapPin, { size: 28 }), (0, jsx_runtime_1.jsx)("span", { className: "select-text", children: data.ip_location })] }))] })] })] }));
+/**
+ * 标题与正文：标题是唯一大字层级，正文降为次级明度
+ */
+const NoteContent = ({ data }) => ((0, jsx_runtime_1.jsxs)("section", { className: "mt-10", children: [data.title && ((0, jsx_runtime_1.jsx)("h1", { className: "text-[68px] font-black leading-[1.2] tracking-tight text-foreground select-text", style: { wordBreak: 'break-word', overflowWrap: 'break-word' }, children: data.title })), (0, jsx_runtime_1.jsx)("div", { className: "mt-8 whitespace-pre-wrap text-[42px] font-medium leading-[1.55] text-foreground/80 select-text", style: { wordBreak: 'break-word', overflowWrap: 'break-word' }, children: (0, richtext_1.renderRichTextToReact)(data.desc, {
+                mention: { className: xiaohongshuNoteMentionClassName }
+            }) })] }));
+/**
+ * 互动数据行：大数字做视觉锚点，只有点赞用心红，其余中性色
+ */
+const NoteStatsRow = ({ data }) => {
+    const stats = [
+        { icon: lucide_react_1.Heart, value: data.statistics.liked_count, label: '点赞', accent: true },
+        { icon: lucide_react_1.MessageCircle, value: data.statistics.comment_count, label: '评论', accent: false },
+        { icon: lucide_react_1.Star, value: data.statistics.collected_count, label: '收藏', accent: false },
+        { icon: lucide_react_1.Share2, value: data.statistics.share_count, label: '分享', accent: false }
+    ];
+    return ((0, jsx_runtime_1.jsx)("section", { className: "mt-14 flex flex-wrap items-end gap-x-20 gap-y-8", children: stats.map((stat) => {
+            const Icon = stat.icon;
+            return ((0, jsx_runtime_1.jsxs)("div", { className: "min-w-40", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-3 text-[28px] font-semibold text-muted", children: [(0, jsx_runtime_1.jsx)(Icon, { size: 36, strokeWidth: 2.2, style: stat.accent ? { color: XHS_RED, fill: XHS_RED } : undefined, className: stat.accent ? undefined : 'text-foreground/70' }), (0, jsx_runtime_1.jsx)("span", { children: stat.label })] }), (0, jsx_runtime_1.jsx)("div", { className: "mt-3 text-[64px] font-black leading-none text-foreground tabular-nums select-text", children: formatNumber(stat.value) })] }, stat.label));
+        }) }));
+};
+/**
+ * 底部行动条：官方长图的小红书 Logo + 二维码收尾
+ */
+const NoteFooter = ({ data, ctx }) => ((0, jsx_runtime_1.jsx)("footer", { className: "mt-16", children: (0, jsx_runtime_1.jsxs)("div", { className: "mt-12 flex items-center justify-between gap-16", children: [(0, jsx_runtime_1.jsx)("img", { src: "/image/xiaohongshu/logo.png", alt: "\u5C0F\u7EA2\u4E66", className: "h-16 w-auto shrink-0 object-contain opacity-90" }), data.share_url && ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-8", children: [(0, jsx_runtime_1.jsxs)("div", { className: "text-right", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[32px] font-black text-foreground", children: "\u626B\u7801\u67E5\u770B\u539F\u7B14\u8BB0" }), (0, jsx_runtime_1.jsx)("div", { className: "mt-2 text-[26px] text-muted", children: "\u957F\u6309\u8BC6\u522B\u4E8C\u7EF4\u7801" })] }), (0, jsx_runtime_1.jsx)("div", { className: "shrink-0 drop-shadow-2xl", children: (0, jsx_runtime_1.jsx)(QRCodeWithAvatar_1.QRCodeWithAvatar, { value: data.share_url, useDarkTheme: (0, theme_1.isDark)(ctx), alt: "\u7B14\u8BB0\u4E8C\u7EF4\u7801", className: "h-60 w-60" }) })] }))] }) }));
+/**
+ * 小红书笔记信息组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+exports.XiaohongshuNoteInfo = react_2.default.memo((props) => {
+    return ((0, jsx_runtime_1.jsxs)(DefaultLayout_1.DefaultLayout, { ...props, className: "relative overflow-hidden", children: [(0, jsx_runtime_1.jsx)(NoteDiffuseBackground, { ...props }), (0, jsx_runtime_1.jsxs)("section", { className: "relative z-10 px-20 pt-16", children: [(0, jsx_runtime_1.jsx)(NoteSystemLabel, { ...props }), (0, jsx_runtime_1.jsx)(NoteCover, { ...props }), (0, jsx_runtime_1.jsx)(NoteAuthorRow, { ...props }), (0, jsx_runtime_1.jsx)(NoteContent, { ...props }), (0, jsx_runtime_1.jsx)(NoteStatsRow, { ...props }), (0, jsx_runtime_1.jsx)(NoteFooter, { ...props })] })] }));
+});
+exports.XiaohongshuNoteInfo.displayName = 'XiaohongshuNoteInfo';
+exports.default = exports.XiaohongshuNoteInfo;

package/lib/ktr/template/xiaohongshu/noteInfo/components/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/ktr/template/xiaohongshu/noteInfo/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const template_react_1 = require("../../../../compat/template-react.js");
+const noteInfo_1 = require("./components/noteInfo");
+exports.default = (0, template_react_1.defineTemplate)({
+    name: '笔记信息',
+    description: '小红书笔记信息展示模板',
+    component: noteInfo_1.XiaohongshuNoteInfo
+});

package/lib/ktr/utils/QRCodeAvatar.js

@@ -0,0 +1,99 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadQRCodeAvatar = void 0;
+const avatarProxy_1 = require("./avatarProxy");
+const MAX_QRCODE_AVATAR_BYTES = 2 * 1024 * 1024;
+const QRCODE_AVATAR_TIMEOUT_MS = 5000;
+const QRCODE_AVATAR_CACHE_SIZE = 128;
+const SUPPORTED_QRCODE_AVATAR_TYPES = new Set(['image/png', 'image/jpeg', 'image/webp']);
+const avatarRequestCache = new Map();
+const isSupportedImageBytes = (image) => {
+    const isPng = image.byteLength >= 8 &&
+        image[0] === 0x89 &&
+        image[1] === 0x50 &&
+        image[2] === 0x4e &&
+        image[3] === 0x47 &&
+        image[4] === 0x0d &&
+        image[5] === 0x0a &&
+        image[6] === 0x1a &&
+        image[7] === 0x0a;
+    const isJpeg = image.byteLength >= 3 && image[0] === 0xff && image[1] === 0xd8 && image[2] === 0xff;
+    const isWebp = image.byteLength >= 12 &&
+        image[0] === 0x52 &&
+        image[1] === 0x49 &&
+        image[2] === 0x46 &&
+        image[3] === 0x46 &&
+        image[8] === 0x57 &&
+        image[9] === 0x45 &&
+        image[10] === 0x42 &&
+        image[11] === 0x50;
+    return isPng || isJpeg || isWebp;
+};
+const requestAvatarBytes = async (url) => {
+    try {
+        const response = await fetch(url, {
+            headers: {
+                accept: 'image/png,image/jpeg,image/webp,image/*;q=0.8,*/*;q=0.5'
+            },
+            signal: AbortSignal.timeout(QRCODE_AVATAR_TIMEOUT_MS)
+        });
+        if (!response.ok)
+            return undefined;
+        const declaredLength = Number(response.headers.get('content-length') ?? 0);
+        if (declaredLength > MAX_QRCODE_AVATAR_BYTES)
+            return undefined;
+        const contentType = response.headers.get('content-type')?.split(';', 1)[0]?.trim().toLowerCase();
+        const image = new Uint8Array(await response.arrayBuffer());
+        if (image.byteLength === 0 || image.byteLength > MAX_QRCODE_AVATAR_BYTES)
+            return undefined;
+        if (contentType && SUPPORTED_QRCODE_AVATAR_TYPES.has(contentType))
+            return image;
+        return isSupportedImageBytes(image) ? image : undefined;
+    }
+    catch {
+        return undefined;
+    }
+};
+/**
+ * 依次尝试的取图地址。
+ *
+ * 浏览器（只有 ktr 开发面板会走到）里头像 CDN 多半缺 CORS 头，直连必被同源策略拦，
+ * 所以优先走 dev 服务器的同源代理，代理不在（如面板未启动）时再退回直连。
+ * Node SSR 侧没有同源策略，始终直连。
+ */
+const avatarCandidates = (url) => {
+    if (typeof window === 'undefined' || !(0, avatarProxy_1.isProxyableAvatarUrl)(url))
+        return [url];
+    return [(0, avatarProxy_1.toProxiedAvatarUrl)(url), url];
+};
+const fetchQRCodeAvatar = async (url) => {
+    for (const candidate of avatarCandidates(url)) {
+        const image = await requestAvatarBytes(candidate);
+        if (image)
+            return image;
+    }
+    return undefined;
+};
+/**
+ * 加载并缓存二维码头像。同一头像的并发渲染会复用请求，失败结果不会进入缓存。
+ */
+const loadQRCodeAvatar = (url) => {
+    if (!url || !/^https?:\/\//i.test(url))
+        return Promise.resolve(undefined);
+    const cached = avatarRequestCache.get(url);
+    if (cached)
+        return cached;
+    if (avatarRequestCache.size >= QRCODE_AVATAR_CACHE_SIZE) {
+        const oldestKey = avatarRequestCache.keys().next().value;
+        if (oldestKey)
+            avatarRequestCache.delete(oldestKey);
+    }
+    const request = fetchQRCodeAvatar(url);
+    avatarRequestCache.set(url, request);
+    void request.then((image) => {
+        if (!image)
+            avatarRequestCache.delete(url);
+    });
+    return request;
+};
+exports.loadQRCodeAvatar = loadQRCodeAvatar;

package/lib/ktr/utils/QRcode.js

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateQRCode = exports.hasQrcodeGenerator = exports.setQrcodeGenerator = void 0;
+let generateSyncImpl;
+/** 由渲染入口在 SSR 之前注入（见 module/utils/Render/index.ts） */
+const setQrcodeGenerator = (impl) => {
+    generateSyncImpl = impl;
+};
+exports.setQrcodeGenerator = setQrcodeGenerator;
+/** 生成器是否已就绪 */
+const hasQrcodeGenerator = () => typeof generateSyncImpl === 'function';
+exports.hasQrcodeGenerator = hasQrcodeGenerator;
+/**
+ * Generates a QR code image in base64 format for the given text.
+ *
+ * @param {string} text - The text to encode in the QR code.
+ * @param {boolean} [useDarkTheme=false] - Whether to use a dark theme for the QR code.
+ * @param {Uint8Array} [image] - Optional binary logo image embedded in the center of the QR code.
+ * @return {string} The base64-encoded QR code image.
+ */
+const generateQRCode = (text, useDarkTheme = false, image) => {
+    if (typeof generateSyncImpl !== 'function') {
+        throw new Error('二维码生成器未初始化（@ikenxuan/qrcode 未加载）');
+    }
+    const hasImage = Boolean(image?.byteLength);
+    const base64 = generateSyncImpl({
+        data: text,
+        size: 1000,
+        dotsOptions: {
+            dotType: 'extra-rounded',
+            color: useDarkTheme ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.8)'
+        },
+        cornersSquareOptions: {
+            cornerType: 'dot',
+            color: useDarkTheme ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.8)'
+        },
+        cornersDotOptions: {
+            cornerType: 'dot',
+            color: useDarkTheme ? 'rgba(255, 255, 255, 0.9)' : 'rgba(0, 0, 0, 0.8)'
+        },
+        backgroundOptions: {
+            transparent: true
+        },
+        image: hasImage ? image : undefined,
+        imageOptions: hasImage
+            ? {
+                imageSize: 0.2,
+                margin: 24,
+                round: 0.2,
+                hideBackgroundDots: true
+            }
+            : undefined
+    }, 'webp', 'base64');
+    return `data:image/webp;base64,${base64}`;
+};
+exports.generateQRCode = generateQRCode;