koishi-plugin-kkk 1.0.0

package/src/ktr/template/other/version_warning/components/VersionWarning.tsx

@@ -0,0 +1,392 @@
+import { Chip } from '@heroui/react'
+import { Puzzle } from 'lucide-react'
+import React from 'react'
+
+import { cn } from '../../../../utils/cn'
+import { isDark } from '../../../../utils/theme'
+import { DefaultLayout } from '../../../components/DefaultLayout'
+import { GlowImage } from '../../../components/GlowImage'
+import type { PosterProps } from '../../../types/ctx'
+import type { VersionWarningData } from './types'
+
+export const VersionWarning: React.FC<PosterProps<VersionWarningData>> = (props) => {
+  const dark = isDark(props.ctx)
+
+  const bgColor = dark ? '#1c1917' : '#faf5ef'
+  const primaryColor = dark ? '#fb923c' : '#c2410c'
+  const secondaryColor = dark ? '#fdba74' : '#9a3412'
+  const mutedColor = dark ? 'rgba(251,146,60,0.7)' : '#b45309'
+  const accentColor = dark ? '#fed7aa' : '#7c2d12'
+
+  return (
+    <DefaultLayout
+      {...props}
+      ctx={{ ...props.ctx, version: undefined }}
+      className="relative overflow-hidden"
+      style={{ backgroundColor: bgColor, height: '2450px' }}
+    >
+      {/* 弥散光背景 */}
+      <div className="absolute inset-0 pointer-events-none">
+        <div
+          className="absolute rounded-full w-315 h-360 -top-67.5 -left-45 blur-[108px] -rotate-20"
+          style={{
+            background: dark
+              ? 'radial-gradient(ellipse at 40% 40%, rgba(194,65,12,0.4) 0%, rgba(154,52,18,0.2) 50%, transparent 100%)'
+              : 'radial-gradient(ellipse at 40% 40%, rgba(234,88,12,0.5) 0%, rgba(251,146,60,0.25) 50%, transparent 100%)'
+          }}
+        />
+        <div
+          className="absolute rounded-full w-225 h-270 top-112.5 -right-22.5 blur-[90px] rotate-15"
+          style={{
+            background: dark
+              ? 'radial-gradient(ellipse at 50% 50%, rgba(68,44,21,0.35) 0%, rgba(41,26,13,0.18) 50%, transparent 100%)'
+              : 'radial-gradient(ellipse at 50% 50%, rgba(251,191,36,0.3) 0%, rgba(245,158,11,0.15) 50%, transparent 100%)'
+          }}
+        />
+        <div
+          className="absolute rounded-full w-270 h-225 -bottom-45 left-45 blur-[126px] -rotate-10"
+          style={{
+            background: dark
+              ? 'radial-gradient(ellipse at 50% 60%, rgba(180,83,9,0.35) 0%, rgba(146,64,14,0.18) 50%, transparent 100%)'
+              : 'radial-gradient(ellipse at 50% 60%, rgba(194,65,12,0.4) 0%, rgba(180,83,9,0.2) 50%, transparent 100%)'
+          }}
+        />
+      </div>
+
+      {/* 单色噪点层 */}
+      <div className="absolute inset-0 pointer-events-none" style={{ opacity: dark ? 0.1 : 0.15 }}>
+        <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
+          <filter id="pixelNoise" x="0%" y="0%" width="100%" height="100%">
+            <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="1" stitchTiles="stitch" result="noise" />
+            {/* 噪点 */}
+            <feColorMatrix type="saturate" values="0" result="gray" />
+            {/* 二值化 */}
+            <feComponentTransfer>
+              <feFuncR type="discrete" tableValues="0 1" />
+              <feFuncG type="discrete" tableValues="0 1" />
+              <feFuncB type="discrete" tableValues="0 1" />
+            </feComponentTransfer>
+          </filter>
+          <rect width="100%" height="100%" filter="url(#pixelNoise)" />
+        </svg>
+      </div>
+
+      {/* 背景大字 */}
+      <div className="absolute bottom-25 right-18 pointer-events-none select-none opacity-[0.03]">
+        <span
+          className="text-[200px] font-black tracking-tighter leading-none block text-right"
+          style={{ color: dark ? '#fff' : '#78350f' }}
+        >
+          VERSION
+        </span>
+        <span
+          className="text-[200px] font-black tracking-tighter leading-none block text-right"
+          style={{ color: dark ? '#fff' : '#78350f' }}
+        >
+          WARNING
+        </span>
+      </div>
+
+      {/* 内容层 */}
+      <div className="relative z-10 flex flex-col justify-between h-full p-18">
+        {/* 顶部 */}
+        <div className="flex justify-between items-start">
+          <div className="flex flex-col gap-12">
+            <p className="text-[28px] font-medium tracking-[0.3em] uppercase" style={{ color: mutedColor }}>
+              koishi-plugin-kkk
+            </p>
+            <h1 className="text-[180px] font-black leading-none" style={{ color: accentColor }}>
+              请升级你的
+            </h1>
+            <h1 className="text-[120px] font-black leading-none" style={{ color: accentColor }}>
+              <span className="font-mono">node-karin</span>
+            </h1>
+          </div>
+          {/* 右上角装饰图形 */}
+          <div className="flex flex-col items-end space-y-3 mt-4">
+            <div className="flex space-x-3">
+              <div className="w-8 h-8 rounded-full" style={{ backgroundColor: accentColor, opacity: 0.2 }} />
+              <div className="w-8 h-8 rounded-full" style={{ backgroundColor: accentColor, opacity: 0.4 }} />
+              <div className="w-8 h-8 rounded-full" style={{ backgroundColor: accentColor, opacity: 0.6 }} />
+              <div className="w-8 h-8 rounded-full" style={{ backgroundColor: accentColor }} />
+            </div>
+            <div className="flex space-x-3">
+              <div className="w-8 h-8 rounded" style={{ backgroundColor: secondaryColor, opacity: 0.15 }} />
+              <div className="w-8 h-8 rounded" style={{ backgroundColor: secondaryColor, opacity: 0.3 }} />
+              <div className="w-8 h-8 rounded" style={{ backgroundColor: secondaryColor, opacity: 0.5 }} />
+            </div>
+            <div className="flex space-x-3">
+              <div className="w-8 h-8 rotate-45" style={{ backgroundColor: mutedColor, opacity: 0.1 }} />
+              <div className="w-8 h-8 rotate-45" style={{ backgroundColor: mutedColor, opacity: 0.25 }} />
+            </div>
+          </div>
+        </div>
+
+        {/* 中间 */}
+        <div className="flex-1 flex flex-col justify-center">
+          {/* 版本对比卡片 */}
+          <div className="rounded-7xl p-12" style={{ backgroundColor: dark ? 'rgba(0,0,0,0.2)' : 'rgba(255,255,255,0.5)' }}>
+            {/* 版本对比 */}
+            <div className="flex items-stretch mb-10">
+              {/* 当前版本 */}
+              <div className="flex-1">
+                <div className="flex items-center space-x-3 mb-4">
+                  <div className="w-4 h-4 rounded-full" style={{ backgroundColor: primaryColor }} />
+                  <span className="text-[28px] font-medium" style={{ color: mutedColor }}>
+                    当前运行时版本
+                  </span>
+                </div>
+                <div className="relative inline-block">
+                  <span className="text-[56px] font-black font-mono leading-tight opacity-50 break-all" style={{ color: primaryColor }}>
+                    v{props.data.currentVersion}
+                  </span>
+                  <div
+                    className="absolute top-1/2 -left-2 -right-2 h-1.5 -rotate-3 rounded-full"
+                    style={{ backgroundColor: primaryColor }}
+                  />
+                </div>
+              </div>
+
+              {/* 分隔线 */}
+              <div
+                className="w-0.5 rounded-full mx-10"
+                style={{ backgroundColor: dark ? 'rgba(251,146,60,0.2)' : 'rgba(180,83,9,0.15)' }}
+              />
+
+              {/* 需要版本 */}
+              <div className="flex-1">
+                <div className="flex items-center space-x-3 mb-4">
+                  <div className="w-4 h-4 rounded-full" style={{ backgroundColor: accentColor }} />
+                  <span className="text-[28px] font-medium" style={{ color: mutedColor }}>
+                    需要/建议的版本
+                  </span>
+                  <Chip
+                    className="text-xl font-bold rounded-full px-4 py-2"
+                    style={{ backgroundColor: accentColor, color: bgColor }}
+                    size="md"
+                  >
+                    推荐
+                  </Chip>
+                </div>
+                <span className="text-[56px] font-black font-mono leading-tight break-all" style={{ color: accentColor }}>
+                  v{props.data.requireVersion}
+                </span>
+              </div>
+            </div>
+
+            {/* 分隔线 */}
+            <div className="h-0.5 rounded-full mb-10" style={{ backgroundColor: dark ? 'rgba(251,146,60,0.2)' : 'rgba(180,83,9,0.15)' }} />
+
+            {/* 更新方案 */}
+            <div className="space-y-20">
+              {/* 方案一：Web UI */}
+              <div>
+                <div className="flex items-center space-x-4 mb-6">
+                  <div
+                    className="flex items-center justify-center w-10 h-10 rounded-xl"
+                    style={{ backgroundColor: dark ? 'rgba(251,146,60,0.15)' : 'rgba(194,65,12,0.1)' }}
+                  >
+                    <span className="text-[28px] font-black" style={{ color: accentColor }}>
+                      1
+                    </span>
+                  </div>
+                  <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke={mutedColor} strokeWidth="2">
+                    <rect x="3" y="3" width="18" height="18" rx="2" strokeLinecap="round" strokeLinejoin="round" />
+                    <path d="M9 3v18M3 9h18M3 15h18" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                  <span className="text-[32px] font-bold" style={{ color: mutedColor }}>
+                    Web 控制台更新
+                  </span>
+                  <Chip
+                    className="text-2xl font-semibold px-5 py-3 rounded-full"
+                    style={{
+                      backgroundColor: dark ? 'rgba(251,146,60,0.2)' : 'rgba(194,65,12,0.15)',
+                      color: accentColor
+                    }}
+                    size="lg"
+                  >
+                    推荐
+                  </Chip>
+                </div>
+                <div className="ml-14 space-y-4">
+                  <div className="flex items-start space-x-4">
+                    <div className="w-3 h-3 rounded-full mt-3 shrink-0" style={{ backgroundColor: mutedColor }} />
+                    <span className="text-[28px] leading-relaxed" style={{ color: secondaryColor }}>
+                      访问 Karin Web 控制台首页，查看 Koishi 版本信息
+                    </span>
+                  </div>
+                  <div className="flex items-start space-x-4">
+                    <div className="w-3 h-3 rounded-full mt-3 shrink-0" style={{ backgroundColor: mutedColor }} />
+                    <span className="text-[28px] leading-relaxed" style={{ color: secondaryColor }}>
+                      当有新版本时会高亮提示，点击查看更新日志
+                    </span>
+                  </div>
+                  <div className="flex items-start space-x-4">
+                    <div className="w-3 h-3 rounded-full mt-3 shrink-0" style={{ backgroundColor: mutedColor }} />
+                    <span className="text-[28px] leading-relaxed" style={{ color: secondaryColor }}>
+                      点击<span className="font-mono font-black">「更新」</span>按钮，系统将自动完成更新并重启
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {/* 方案二：安装 karin-plugin-basic */}
+              <div>
+                <div className="flex items-center space-x-4 mb-6">
+                  <div
+                    className="flex items-center justify-center w-10 h-10 rounded-xl"
+                    style={{ backgroundColor: dark ? 'rgba(251,146,60,0.15)' : 'rgba(194,65,12,0.1)' }}
+                  >
+                    <span className="text-[28px] font-black" style={{ color: accentColor }}>
+                      2
+                    </span>
+                  </div>
+                  <Puzzle className={cn('w-10 h-auto')} style={{ color: mutedColor }} />
+                  <span className="text-[32px] font-bold" style={{ color: mutedColor }}>
+                    使用 basic 插件命令更新
+                  </span>
+                  <Chip
+                    className="text-2xl font-semibold px-5 py-3 rounded-full"
+                    style={{
+                      backgroundColor: dark ? 'rgba(251,146,60,0.2)' : 'rgba(194,65,12,0.15)',
+                      color: accentColor
+                    }}
+                    size="lg"
+                  >
+                    推荐
+                  </Chip>
+                </div>
+                <div className="ml-14 space-y-4">
+                  <div className="flex items-start space-x-4">
+                    <div className="w-3 h-3 rounded-full mt-3 shrink-0" style={{ backgroundColor: mutedColor }} />
+                    <span className="text-[28px] leading-relaxed" style={{ color: secondaryColor }}>
+                      插件市场搜索<span className="font-mono font-black">「karin-plugin-basic」</span>插件并安装
+                    </span>
+                  </div>
+                  <div className="flex items-start space-x-4">
+                    <div className="w-3 h-3 rounded-full mt-3 shrink-0" style={{ backgroundColor: mutedColor }} />
+                    <span className="text-[28px] leading-relaxed" style={{ color: secondaryColor }}>
+                      安装完成后发送 <span className="font-mono font-black">「#更新」</span>
+                    </span>
+                  </div>
+                  <div className="flex items-start space-x-4">
+                    <div className="w-3 h-3 rounded-full mt-3 shrink-0" style={{ backgroundColor: mutedColor }} />
+                    <span className="text-[28px] leading-relaxed" style={{ color: secondaryColor }}>
+                      插件会自动执行更新流程
+                    </span>
+                  </div>
+                </div>
+              </div>
+
+              {/* 方案三：命令行手动更新 */}
+              <div>
+                <div className="flex items-center space-x-4 mb-6">
+                  <div
+                    className="flex items-center justify-center w-10 h-10 rounded-xl"
+                    style={{ backgroundColor: dark ? 'rgba(251,146,60,0.15)' : 'rgba(194,65,12,0.1)' }}
+                  >
+                    <span className="text-[28px] font-black" style={{ color: accentColor }}>
+                      3
+                    </span>
+                  </div>
+                  <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" stroke={mutedColor} strokeWidth="2">
+                    <path d="M4 17l6-6-6-6M12 19h8" strokeLinecap="round" strokeLinejoin="round" />
+                  </svg>
+                  <span className="text-[32px] font-bold" style={{ color: mutedColor }}>
+                    命令行手动更新
+                  </span>
+                </div>
+                <div className="ml-14 space-y-4">
+                  <p className="text-[28px]" style={{ color: secondaryColor }}>
+                    在 Karin 根目录下执行以下命令
+                  </p>
+                  <div className="rounded-xl p-6" style={{ backgroundColor: dark ? 'rgba(0,0,0,0.4)' : 'rgba(255,255,255,0.7)' }}>
+                    <code className="text-[40px] font-mono font-bold block" style={{ color: accentColor }}>
+                      pnpm add node-karin@{props.data.requireVersion} -w
+                    </code>
+                  </div>
+                  <p className="text-[28px] opacity-80" style={{ color: secondaryColor }}>
+                    更新完成后手动重启 Karin 即可
+                  </p>
+                </div>
+              </div>
+            </div>
+
+            {/* 分隔线 */}
+            <div className="h-0.5 rounded-full my-10" style={{ backgroundColor: dark ? 'rgba(251,146,60,0.2)' : 'rgba(180,83,9,0.15)' }} />
+
+            {/* 重要提示 */}
+            <div
+              className="rounded-4xl p-6 flex items-start space-x-5"
+              style={{ backgroundColor: dark ? 'rgba(251,146,60,0.08)' : 'rgba(194,65,12,0.08)' }}
+            >
+              <svg className="w-10 h-10 mt-1 shrink-0" viewBox="0 0 24 24" fill={accentColor}>
+                <path d="M12 2L22 20H2L12 2Z" />
+                <path d="M12 9v4M12 17h.01" stroke={bgColor} strokeWidth="2" strokeLinecap="round" />
+              </svg>
+              <div className="flex-1">
+                <p className="text-[28px] font-semibold mb-2" style={{ color: accentColor }}>
+                  版本兼容性提示
+                </p>
+                <p className="text-[26px] leading-relaxed" style={{ color: secondaryColor }}>
+                  当前插件版本基于{' '}
+                  <span className="font-bold font-mono" style={{ color: accentColor }}>
+                    node-karin v{props.data.requireVersion}
+                  </span>{' '}
+                  开发，低版本运行时可能出现功能异常或兼容性问题，请及时更新以获得最佳体验
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 底部 */}
+        <div className="flex justify-between items-end">
+          {/* 左下角 */}
+          <div className="flex flex-col space-y-3">
+            <svg className="w-9 h-9 opacity-25" viewBox="0 0 24 24" fill="none" stroke={mutedColor} strokeWidth="1.5">
+              <path d="M12 2L22 20H2L12 2Z" />
+            </svg>
+            <svg className="w-9 h-9 opacity-40" viewBox="0 0 24 24" fill="none" stroke={mutedColor} strokeWidth="1.5">
+              <path d="M12 2L22 20H2L12 2Z" />
+            </svg>
+            <svg className="w-9 h-9 opacity-60" viewBox="0 0 24 24" fill="none" stroke={mutedColor} strokeWidth="1.5">
+              <path d="M12 2L22 20H2L12 2Z" />
+            </svg>
+            <svg className="w-9 h-9" viewBox="0 0 24 24" fill={accentColor}>
+              <path d="M12 2L22 20H2L12 2Z" />
+            </svg>
+          </div>
+
+          {/* 右下角 */}
+          <div className="flex items-end space-x-7">
+            <div className="flex flex-col items-end justify-end h-25">
+              <span className="text-[22px] font-bold tracking-widest uppercase" style={{ color: mutedColor }}>
+                KOISHI-PLUGIN
+              </span>
+              <span className="text-[54px] font-black leading-none" style={{ color: accentColor }}>
+                kkk
+              </span>
+            </div>
+            <GlowImage glowStrength={1} blurRadius={20}>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 230 221" className="h-22 w-auto" style={{ color: accentColor }}>
+                <path
+                  d="M132.75,87.37l-53.72-53.37c-4.66-4.63-1.38-12.58,5.18-12.58h115.13c6.57,0,9.84,7.95,5.18,12.58l-53.72,53.37c-4.99,4.96-13.06,4.96-18.05,0Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M28.49,186.89l.03-51.42c-.02-6.57,7.92-9.87,12.56-5.23l57.02,57.02c4.64,4.64,1.34,12.41-5.23,12.39h-51.42c-7.04-.02-12.94-5.72-12.96-12.76Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M41.54,23.68l163.04,163.05c4.78,4.78,1.39,12.95-5.36,12.94h-47.88c-9.69,0-18.99-3.86-25.84-10.71L39.3,102.75c-6.85-6.85-10.7-16.15-10.7-25.84V29.04c0-6.76,8.16-10.14,12.94-5.36Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </GlowImage>
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  )
+}

package/src/ktr/template/other/version_warning/components/types.ts

@@ -0,0 +1,8 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+
+export interface VersionWarningData {
+  /** 插件构建时的 karin 版本 */
+  requireVersion: string
+  /** 当前运行的 karin 版本 */
+  currentVersion: string
+}

package/src/ktr/template/other/version_warning/index.tsx

@@ -0,0 +1,9 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { VersionWarning } from './components/VersionWarning'
+
+export default defineTemplate({
+  name: '版本警告',
+  description: '版本不兼容警告页面',
+  component: VersionWarning
+})

package/src/ktr/template/statistics/components/BoxplotGuide.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+
+import { withAlpha } from './chartTheme'
+
+/** 箱线图阅读指南属性 */
+export interface BoxplotGuideProps {
+  /** 箱体主色（描边、须、端帽） */
+  accent: string
+}
+
+/**
+ * 箱线图怎么读 —— 一张示意图 + 一句注解。
+ *
+ * 加它的原因很直接：箱线图对没接触过的读者就是「一个带横线的方块」，
+ * 而 ECharts 的 boxplot 又不支持在图上打标签（series 级和逐项两种写法 SSR 下都不出文本，
+ * 实测过），没法把五个要素直接标在真实图形上。
+ * 所以退而求其次：在卡片里画一个放大的示意图把五个位置点名，
+ * 真实图上的中位数再用一个散点系列单独标数值。
+ */
+export const BoxplotGuide: React.FC<BoxplotGuideProps> = ({ accent }) => (
+  <div className="mt-3 rounded-xl bg-surface-secondary/60 px-6 py-4">
+    <svg viewBox="0 0 560 96" className="w-full h-24" role="img" aria-label="箱线图读法示意">
+      {/* 下须（最小 → 下四分位） */}
+      <line x1="30" y1="48" x2="120" y2="48" stroke={accent} strokeWidth="3" />
+      <line x1="30" y1="34" x2="30" y2="62" stroke={accent} strokeWidth="3" />
+      {/* 箱体（下四分位 → 上四分位） */}
+      <rect x="120" y="20" width="280" height="56" rx="8" fill={withAlpha(accent, 0.3)} stroke={accent} strokeWidth="3" />
+      {/* 中位线 */}
+      <line x1="320" y1="20" x2="320" y2="76" stroke={accent} strokeWidth="4" />
+      {/* 上须（上四分位 → 最大） */}
+      <line x1="400" y1="48" x2="510" y2="48" stroke={accent} strokeWidth="3" />
+      <line x1="510" y1="34" x2="510" y2="62" stroke={accent} strokeWidth="3" />
+
+      {/* 五个位置的标注 */}
+      <text x="42" y="92" textAnchor="middle" fontSize="18" fill="currentColor" opacity="0.7">
+        最小
+      </text>
+      <text x="150" y="92" textAnchor="middle" fontSize="18" fill="currentColor" opacity="0.7">
+        下四分位
+      </text>
+      <text x="320" y="92" textAnchor="middle" fontSize="18" fill="currentColor" opacity="0.7">
+        中位数
+      </text>
+      <text x="410" y="92" textAnchor="middle" fontSize="18" fill="currentColor" opacity="0.7">
+        上四分位
+      </text>
+      <text x="518" y="92" textAnchor="middle" fontSize="18" fill="currentColor" opacity="0.7">
+        最大
+      </text>
+    </svg>
+    <div className="mt-2 text-center text-xl text-muted/80">
+      每个箱体代表<b className="text-foreground/80">该档位里所有群</b>的分布 · 箱体越扁说明这档群的水平越整齐
+    </div>
+  </div>
+)
+
+export default BoxplotGuide

package/src/ktr/template/statistics/components/ChartCard.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import { cn } from '../../../utils/cn'
+
+/** 图表卡片属性 */
+export interface ChartCardProps {
+  /** 中文标题 */
+  title: string
+  /** 英文副标题，跟在中文标题后面同一行 */
+  subtitle: string
+  /** 左侧圆角色条的 Tailwind 背景类 */
+  accentClassName?: string
+  /** 卡片底部的一行说明，没有则不占位 */
+  caption?: React.ReactNode
+  /** 追加到卡片根元素的类名 */
+  className?: string
+  /** 卡片内容（通常是 SSRChart） */
+  children: React.ReactNode
+}
+
+/**
+ * 图表卡片：紧凑标题行 + 内容 + 可选说明。
+ *
+ * 取代了旧版那个「色条 + 5rem 大标题 + 英文副标题 + 160px 下边距」的分区头 ——
+ * 那张头每张图要吃掉约 360px，五张图光标题栏就占掉 1800px，
+ * 是海报被撑到 6900px 的主因。这里把标题压进卡片内部，一张图总共只需约 80px。
+ */
+export const ChartCard: React.FC<ChartCardProps> = ({ title, subtitle, accentClassName = 'bg-violet-500', caption, className, children }) => (
+  <div className={cn('relative flex flex-col rounded-2xl bg-surface/40 backdrop-blur-md border-2 border-border/40 p-6', className)}>
+    <div className="flex items-center gap-4 mb-4">
+      <div className={cn('w-3 h-10 rounded-full shrink-0', accentClassName)} />
+      <h3 className="text-4xl font-black tracking-tight leading-none text-foreground/90">{title}</h3>
+      <span className="text-xl font-medium tracking-[0.15em] uppercase text-muted/60 leading-none">{subtitle}</span>
+    </div>
+    {children}
+    {caption ? <div className="mt-3 text-center text-xl text-muted/80">{caption}</div> : null}
+  </div>
+)
+
+export default ChartCard

package/src/ktr/template/statistics/components/KpiCard.tsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import { cn } from '../../../utils/cn'
+
+/** 指标卡属性 */
+export interface KpiCardProps {
+  /** 中文标题 */
+  title: string
+  /** 英文副标题 */
+  titleEn: string
+  /** 主数值，已格式化好的字符串 */
+  value: string
+  /** 单位 */
+  unit?: string
+  /** 补充说明（如「按有记录的 23 天折算」），没有则不占位 */
+  hint?: string
+  /** 追加到卡片的类名 */
+  className?: string
+}
+
+/**
+ * 指标卡：紧凑竖排。
+ *
+ * 旧版是「标题条 + 7rem 大数字」的厚卡，6 张要占两行共约 700px。
+ * 这里压成一行放 6 张，数值字号降到 5xl，读数依然清楚，但整块只占约 190px。
+ */
+export const KpiCard: React.FC<KpiCardProps> = ({ title, titleEn, value, unit, hint, className }) => (
+  <div className={cn('relative flex flex-col rounded-2xl bg-surface/40 backdrop-blur-md border-2 border-border/40 px-5 py-4', className)}>
+    <div className="text-2xl font-black leading-tight text-foreground/90">{title}</div>
+    <div className="text-base font-medium tracking-widest uppercase text-muted/60 leading-tight mt-1">{titleEn}</div>
+    <div className="flex items-baseline gap-1 mt-3">
+      <span className="text-5xl font-black leading-none text-foreground/90">{value}</span>
+      {unit ? <span className="text-2xl font-medium text-foreground/70">{unit}</span> : null}
+    </div>
+    {hint ? <div className="mt-2 text-lg leading-tight text-muted/70">{hint}</div> : null}
+  </div>
+)
+
+export default KpiCard

package/src/ktr/template/statistics/components/PlatformTable.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+
+import { cn } from '../../../utils/cn'
+
+/** 平台明细表的一行 */
+export interface PlatformTableRow {
+  /** 平台标识，用作 React key */
+  key: string
+  /** 平台 logo */
+  logo: string
+  /** 平台名 */
+  name: string
+  /** 条形填充色 */
+  color: string
+  /** 条长百分比（相对最大值，0~100） */
+  barPercent: number
+  /** 数值列，顺序与 `columns` 对应，已格式化为展示文案 */
+  cells: string[]
+}
+
+/** 平台明细表属性 */
+export interface PlatformTableProps {
+  /** 数值列的表头文案 */
+  columns: string[]
+  /** 数据行 */
+  rows: PlatformTableRow[]
+  /** 追加到根元素的类名 */
+  className?: string
+}
+
+/** 数值列宽：够放下 `1,362` 和 `47.6%` */
+const CELL_WIDTH = 'w-28'
+
+/**
+ * 平台明细表。
+ *
+ * 环图旁边原来只是一列「logo + 名字 + 次数」，本质是图例；
+ * 这里升级成带表头的表格，能多塞两列数值（人数、人均之类），
+ * 同样的高度装的信息量翻倍 —— 这也是海报里唯一适合「读精确数字」的地方。
+ * 中间的占比条保留，让读者不读数字也能看出量级差距。
+ */
+export const PlatformTable: React.FC<PlatformTableProps> = ({ columns, rows, className }) => (
+  <div className={cn('flex flex-col gap-3', className)}>
+    {/* 表头 */}
+    <div className="flex items-center gap-4 pb-2 border-b-2 border-border/40">
+      <span className="w-12 shrink-0" />
+      <span className="w-36 shrink-0 text-xl tracking-widest uppercase text-muted/60">平台</span>
+      {/* 条形列不写表头：占比已经在后面的数值列里给了，重复标一次反而让人以为有两套口径 */}
+      <span className="flex-1" />
+      {columns.map((column) => (
+        <span key={column} className={cn(CELL_WIDTH, 'shrink-0 text-right text-xl tracking-widest uppercase text-muted/60')}>
+          {column}
+        </span>
+      ))}
+    </div>
+
+    {/* 数据行 */}
+    {rows.map((row) => (
+      <div key={row.key} className="flex items-center gap-4">
+        <img src={row.logo} alt={row.name} className="w-12 h-12 object-contain shrink-0" />
+        <span className="w-36 shrink-0 text-2xl font-bold text-foreground/90">{row.name}</span>
+        <div className="flex-1 h-6 rounded-full bg-surface-secondary overflow-hidden">
+          <div className="h-full rounded-full" style={{ width: `${row.barPercent}%`, backgroundColor: row.color }} />
+        </div>
+        {row.cells.map((cell, index) => (
+          <span
+            key={columns[index]}
+            className={cn(
+              CELL_WIDTH,
+              'shrink-0 text-right text-2xl tabular-nums',
+              // 第一列是主数值，加粗；其余列弱一档，读起来有主次
+              index === 0 ? 'font-black text-foreground/90' : 'text-foreground/70'
+            )}
+          >
+            {cell}
+          </span>
+        ))}
+      </div>
+    ))}
+  </div>
+)
+
+export default PlatformTable