koishi-plugin-kkk 1.0.0

package/src/ktr/template/statistics/group/components/types.ts

@@ -0,0 +1,113 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+
+import type { MetricDistribution, StatisticsPlatform, StatisticsWorkType } from '../../components/types'
+
+/** 平台明细的一行（环图旁边的表格用） */
+export interface PlatformCount {
+  /** 平台 */
+  platform: StatisticsPlatform
+  /** 解析次数 */
+  count: number
+  /** 该平台上用过的去重人数 */
+  users: number
+}
+
+/** 趋势图的一个数据点 */
+export interface TrendPoint {
+  /** 日期 (YYYY-MM-DD) */
+  date: string
+  /** 当日解析次数 */
+  count: number
+}
+
+/** 榜单条目的平台构成（堆叠条用） */
+export interface RankSegment {
+  /** 平台 */
+  platform: StatisticsPlatform
+  /** 该平台贡献的次数 */
+  count: number
+}
+
+/** 活跃用户条目 */
+export interface TopUser {
+  /** 用户ID */
+  userId: string
+  /** 展示名：群名片优先，取不到回落昵称，再取不到回落用户ID */
+  name: string
+  /** 解析次数 */
+  count: number
+  /** 各平台各贡献了多少，排行榜的堆叠条用它 */
+  segments: RankSegment[]
+  /**
+   * 头像的 data URI。
+   * 由后端保证一定有值：真实头像拉不到时会现场生成一个 dither 头像。
+   */
+  avatar: string
+}
+
+/** 内容形态计数 */
+export interface WorkTypeCount {
+  /** 内容形态 */
+  workType: StatisticsWorkType
+  /** 解析次数 */
+  count: number
+}
+
+/** 某平台在各小时上的分布 */
+export interface PlatformHourCount {
+  /** 平台 */
+  platform: StatisticsPlatform
+  /** 24 个小时的次数，下标即小时 */
+  values: number[]
+}
+
+/**
+ * 群组解析统计数据接口
+ */
+export interface GroupStatisticsData {
+  /** 群组ID */
+  groupId: string
+  /** 群组名称 */
+  groupName?: string
+  /** 群组人数 */
+  groupMemberCount?: number
+  /** 群组头像 */
+  groupAvatar?: string
+  /** 数据截止时间（海报上标注，避免读者把旧图当新图） */
+  generatedAt: string
+
+  /** 本群总解析次数 */
+  groupTotalParses: number
+  /** 本群唯一用户数 */
+  groupUniqueUsers: number
+  /** 人均解析次数 */
+  parsesPerUser: number
+  /** 有解析记录的天数 */
+  activeDays: number
+  /** 最活跃平台，无数据时不传 */
+  topPlatform?: StatisticsPlatform
+
+  /** 各平台解析数据，按次数降序 */
+  platformData: PlatformCount[]
+  /** 近 30 天趋势，按日期升序 */
+  trend: TrendPoint[]
+  /** 全局日均解析次数，作为趋势图的参照基准 */
+  globalDailyAverage: number
+  /** 本群活跃用户 TOP，按次数降序 */
+  topUsers: TopUser[]
+  /** 24 小时分布，长度固定 24，下标即小时 */
+  hourly: number[]
+  /** 周一到周日的解析次数，长度固定 7 */
+  weekday: number[]
+  /** 各平台在 24 小时上的分布 */
+  platformHourly: PlatformHourCount[]
+  /** 内容形态分布，按次数降序 */
+  workTypes: WorkTypeCount[]
+  /** 耗时 / 作品时长 / 点赞的分桶分布；一次都没采到的指标不会出现 */
+  metrics: MetricDistribution[]
+
+  /** 全局总群组数 */
+  globalTotalGroups: number
+  /** 全局总解析次数 */
+  globalTotalParses: number
+}

package/src/ktr/template/statistics/group/index.tsx

@@ -0,0 +1,9 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { GroupStatistics } from './components/GroupStatistics'
+
+export default defineTemplate({
+  name: '群组统计',
+  description: '群组解析统计页面',
+  component: GroupStatistics
+})

package/src/ktr/template/style.css

@@ -0,0 +1,65 @@
+@import 'tailwindcss';
+@import '@karinjs/template-react/styles';
+@import 'highlight.js/styles/github.css';
+@import 'highlight.js/styles/github-dark.css';
+@import './font.css';
+@import '../font/mono/font.css';
+@import '../font/bilifont/font.css';
+@import '../font/fansmedal-num/font.css';
+@theme {
+  --font-mono: 'JetBrains Mono';
+  --radius-5xl: calc(var(--radius) * 5);
+  --radius-6xl: calc(var(--radius) * 6);
+  --radius-7xl: calc(var(--radius) * 7);
+  --radius-8xl: calc(var(--radius) * 8);
+}
+
+@source './**/*.{js,ts,jsx,tsx,html}';
+
+@custom-variant dark {
+  &:is(
+    .dark,
+    .dark *:not(:is(.dark .light *, .dark [data-theme='light'] *)),
+    [data-theme='dark'],
+    [data-theme='dark'] *:not(:is([data-theme='dark'] .light *, [data-theme='dark'] [data-theme='light'] *))
+  ) {
+    @slot;
+  }
+  @media (prefers-color-scheme: dark) {
+    &:not(:is(.light, .light *, [data-theme='light'], [data-theme='light'] *)) {
+      @slot;
+    }
+  }
+}
+
+.hljs {
+  @import 'highlight.js/styles/github.css';
+}
+.dark .hljs {
+  @import 'highlight.js/styles/github-dark.css';
+}
+
+
+/* 基础样式 */
+@layer base {
+  * {
+    box-sizing: border-box;
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  body {
+    font-family: HarmonyOSHans-Regular, bilifont, fansmedal-num;
+    line-height: 1.6;
+    color: var(--theme-text);
+    background-color: var(--theme-bg);
+    margin: 0;
+    padding: 0;
+    min-height: 100vh;
+    transition:
+      color 0.3s ease,
+      background-color 0.3s ease;
+  }
+}

package/src/ktr/template/types/ctx.ts

@@ -0,0 +1,42 @@
+import type { RenderContext } from '@karinjs/template-react'
+
+/**
+ * kkk 注入模板的运行时上下文。
+ * ktr 的 mergeContext 会把调用方传入的字段原样透传。
+ */
+export interface PosterContext extends RenderContext {
+  /** 版本信息（页脚展示） */
+  version?: {
+    /** 框架插件 */
+    plugin: string
+    /** 插件名称 */
+    pluginName: string
+    /** 插件版本 */
+    pluginVersion: string
+    /** 发布类型 */
+    releaseType: 'Stable' | 'Preview'
+    /** 驱动框架 */
+    poweredBy: string
+    /** 框架版本 */
+    frameworkVersion: string
+    /** 是否有可用更新 */
+    hasUpdate?: boolean
+  }
+  /** 封面氛围背景贡献度参数（core 从 app.ambientCover 配置注入，缺省时模板用内置默认值） */
+  ambientCover?: {
+    /** 模糊封面层不透明度 (0~1) */
+    coverOpacity?: number
+    /** 压色罩两端（顶/底）不透明度 (0~1) */
+    overlayEdgeOpacity?: number
+    /** 压色罩中间带不透明度 (0~1) */
+    overlayMiddleOpacity?: number
+  }
+}
+
+/** kkk 模板组件 props：ktr 标准 { data, ctx } 形状，ctx 带 kkk 扩展字段。 */
+export type PosterProps<D> = {
+  /** 模板数据（路由级 Data 接口裸写，见 types/platforms/） */
+  data: D
+  /** ktr 注入的运行时上下文（scale/theme + kkk 扩展字段） */
+  ctx: PosterContext
+}

package/src/ktr/template/xiaohongshu/comment/components/Comment.tsx

@@ -0,0 +1,264 @@
+import { renderRichTextToReact } from '@kkk/richtext'
+import { differenceInSeconds, format, formatDistanceToNow } from 'date-fns'
+import { zhCN } from 'date-fns/locale'
+import { Heart, MessageCircle } from 'lucide-react'
+import React from 'react'
+
+import { generateQRCode } from '../../../../utils/QRcode'
+import { isDark } from '../../../../utils/theme'
+import { DefaultLayout } from '../../../components/DefaultLayout'
+import type { PosterProps } from '../../../types/ctx'
+import type { XiaohongshuCommentData } from './types'
+
+const xiaohongshuMentionClassName = 'text-[#13386c] dark:text-[#c7daef]'
+
+const renderXiaohongshuCommentRichText = (content: XiaohongshuCommentData['CommentsData'][0]['content']) => {
+  return renderRichTextToReact(content, {
+    mention: { className: xiaohongshuMentionClassName }
+  })
+}
+
+const formatXiaohongshuCommentTime = (timestamp: number): string => {
+  if (!timestamp) {
+    return ''
+  }
+
+  const commentDate = new Date(timestamp)
+  const diffSeconds = differenceInSeconds(new Date(), commentDate)
+
+  if (diffSeconds < 30) {
+    return '刚刚'
+  }
+
+  if (diffSeconds < 7776000) {
+    return formatDistanceToNow(commentDate, {
+      locale: zhCN,
+      addSuffix: true
+    })
+  }
+
+  return format(commentDate, 'yyyy-MM-dd')
+}
+
+const formatXiaohongshuLikeCount = (count: string): string => {
+  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: React.FC<XiaohongshuCommentData & { useDarkTheme: boolean }> = (props) => {
+  return (
+    <div className="flex justify-between items-center max-w-300 mx-auto p-5">
+      <div className="flex flex-col justify-center items-start">
+        {/* Logo 图片区域 */}
+        <div className="flex justify-start items-center">
+          <img
+            src="/image/xiaohongshu/logo.png"
+            alt="小红书Logo"
+            className="object-contain mb-20 max-w-full max-h-full scale-180 ml-15"
+            onError={(e) => {
+              const target = e.target as HTMLImageElement
+              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>'
+              }
+            }}
+          />
+        </div>
+
+        {/* 文字信息区域 */}
+        <div className="mt-8 space-y-4 text-left text-muted">
+          <div className="tracking-[6px] text-[45px] select-text">笔记类型：{props.Type}</div>
+          <div className="tracking-[6px] text-[45px] select-text">评论数量：{props.CommentLength}条</div>
+          {props.Type === '图文' && props.ImageLength && (
+            <div className="tracking-[6px] text-[45px] select-text">图片数量：{props.ImageLength}张</div>
+          )}
+        </div>
+      </div>
+      <div className="flex flex-col justify-center items-center p-5">
+        <div className="flex overflow-hidden justify-center items-center bg-white w-110 h-110">
+          <img src={generateQRCode(props.share_url, props.useDarkTheme)} alt="二维码" className="object-contain" />
+        </div>
+        <p className="mt-5 text-[40px] text-muted text-center">扫码查看原笔记</p>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 单个评论组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+const CommentItemComponent: React.FC<XiaohongshuCommentData['CommentsData'][0] & { isLast?: boolean }> = ({ ...props }, isLast = false) => {
+  return (
+    <div className={`flex px-10 pt-15 ${isLast ? 'pb-0' : 'pb-15'}`}>
+      {/* 用户头像 */}
+      <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="用户头像"
+      />
+
+      {/* 评论内容 */}
+      <div className="flex-1">
+        {/* 用户信息 */}
+        <div className="mb-12.5 text-[50px] text-foreground/70 relative flex items-center select-text">
+          <span className="text-5xl">{props.user_info.nickname}</span>
+          {props.show_tags &&
+            props.show_tags.length > 0 &&
+            props.show_tags.map((tag, index) => {
+              if (tag === 'is_author') {
+                return (
+                  <div key={index} className="inline-block px-6 py-3 ml-3 text-4xl rounded-full bg-surface text-muted">
+                    作者
+                  </div>
+                )
+              } else if (tag === 'user_top') {
+                return (
+                  <div key={index} className="inline-block px-6 py-3 rounded-full ml-3 text-4xl bg-[#ff2e4d0f] text-[#ff2e4d]">
+                    置顶评论
+                  </div>
+                )
+              } else {
+                return null
+              }
+            })}
+        </div>
+
+        {/* 评论文本 */}
+        <div
+          className="text-[60px] text-foreground leading-relaxed mb-2 whitespace-pre-wrap select-text"
+          style={{
+            wordBreak: 'break-word',
+            overflowWrap: 'break-word'
+          }}
+        >
+          {renderXiaohongshuCommentRichText(props.content)}
+        </div>
+
+        {/* 评论图片 */}
+        {props.pictures && props.pictures.length > 0 && (
+          <div className="flex my-5 overflow-hidden shadow-md rounded-2xl w-[95%] flex-1">
+            <img className="object-contain w-full h-full rounded-2xl" src={props.pictures[0].url_default} alt="评论图片" />
+          </div>
+        )}
+
+        {/* 底部信息和操作区域 */}
+        <div className="flex justify-between items-center mt-6 text-muted">
+          <div className="flex items-center space-x-6 select-text">
+            <span className="text-[45px]">{formatXiaohongshuCommentTime(props.create_time)}</span>
+            <span className="text-[45px]">{props.ip_location}</span>
+            {parseInt(props.sub_comment_count) > 0 ? (
+              <span className="text-[40px] text-foreground/70">共{props.sub_comment_count}条回复</span>
+            ) : (
+              <span className="text-[40px] text-foreground/70">回复</span>
+            )}
+          </div>
+
+          <div className="flex items-center space-x-6">
+            {/* 点赞按钮 */}
+            <div className="flex items-center space-x-2 transition-colors cursor-pointer">
+              <Heart size={60} className={props.liked ? 'text-red-500 fill-current' : 'text-muted'} />
+              <span className="text-[50px] select-text">{formatXiaohongshuLikeCount(props.like_count)}</span>
+            </div>
+
+            {/* 回复按钮 */}
+            <div className="flex items-center transition-colors cursor-pointer">
+              <MessageCircle size={60} className="stroke-current text-muted" />
+            </div>
+          </div>
+        </div>
+
+        {/* 子评论 */}
+        {props.sub_comments && props.sub_comments.length > 0 && (
+          <div className="pl-6 mt-6">
+            {props.sub_comments.map((subComment, index) => (
+              <div key={subComment.id} className={`py-4 ${index !== props.sub_comments.length - 1 ? 'border-b border-divider' : ''}`}>
+                <div className="flex items-start space-x-4">
+                  <img src={subComment.user_info.image} className="object-cover mr-8 w-32 h-32 rounded-full" alt="用户头像" />
+                  <div className="flex-1">
+                    <div className="flex items-center mb-2 space-x-2">
+                      <span className="text-[40px] font-medium text-foreground/70">{subComment.user_info.nickname}</span>
+                      {subComment.show_tags &&
+                        subComment.show_tags.length > 0 &&
+                        subComment.show_tags.map((tag, tagIndex) =>
+                          tag === 'is_author' ? (
+                            <div key={tagIndex} className="inline-block px-5 py-2 ml-2 text-3xl rounded-full bg-surface text-muted">
+                              作者
+                            </div>
+                          ) : null
+                        )}
+                    </div>
+                    <div
+                      className="text-[45px] text-foreground leading-relaxed mb-2 whitespace-pre-wrap select-text"
+                      style={{
+                        wordBreak: 'break-word',
+                        overflowWrap: 'break-word'
+                      }}
+                    >
+                      {renderRichTextToReact(subComment.content, {
+                        mention: { className: xiaohongshuMentionClassName }
+                      })}
+                    </div>
+                    <div className="flex justify-between items-center text-muted">
+                      <div className="flex items-center space-x-4">
+                        <span className="text-[35px]">{formatXiaohongshuCommentTime(subComment.create_time)}</span>
+                        <span className="text-[35px]">{subComment.ip_location}</span>
+                      </div>
+                      <div className="flex items-center space-x-2">
+                        <Heart size={40} className={subComment.liked ? 'text-red-500 fill-current' : 'text-muted'} />
+                        <span className="text-[35px]">{formatXiaohongshuLikeCount(subComment.like_count)}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 小红书评论组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+export const XiaohongshuComment: React.FC<PosterProps<XiaohongshuCommentData>> = React.memo((props) => {
+  return (
+    <DefaultLayout {...props}>
+      <div className="h-30" />
+      {/* 页面头部 */}
+      <NoteInfoHeader {...props.data} useDarkTheme={isDark(props.ctx)} />
+
+      {/* 评论列表 */}
+      <div className="overflow-auto mx-20 max-w-full">
+        {props.data.CommentsData.length > 0 ? (
+          <div className="divide-y divide-divider">
+            {props.data.CommentsData.map((comment, index) => (
+              <CommentItemComponent key={comment.id} {...comment} isLast={index === props.data.CommentsData.length - 1} />
+            ))}
+          </div>
+        ) : (
+          <div className="flex justify-center items-center py-20">
+            <p className="text-[60px] text-muted">{props.data.ErrorText ?? '暂无评论'}</p>
+          </div>
+        )}
+      </div>
+    </DefaultLayout>
+  )
+})
+
+export default XiaohongshuComment

package/src/ktr/template/xiaohongshu/comment/components/types.ts

@@ -0,0 +1,119 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+
+/**
+ * 小红书评论组件属性接口
+ */
+export interface XiaohongshuCommentData {
+  /** 笔记类型：图文/视频 */
+  Type: '图文' | '视频'
+  /** 评论数量 */
+  CommentLength: number
+  /** 图片数量 */
+  ImageLength?: number
+  /** 分享链接 */
+  share_url: string
+  /** 评论数据 - 简化为直接的评论数组 */
+  CommentsData: XiaohongshuCommentItem[]
+  /**
+   * 取不到评论数据时显示在卡片里的提示文案。
+   * 接口报错时不该只显示干巴巴的「暂无评论」，也不该让机器人另外发一条文字 ——
+   * 直接把原因写进卡片，看起来仍然是一张完整的评论卡。
+   */
+  ErrorText?: string
+}
+
+/** xiaohongshu板块共享类型（跨模板复用 / core 引用）。 */
+import type { RichTextDocument } from '@kkk/richtext'
+
+/**
+ * 小红书评论项数据接口
+ */
+interface XiaohongshuCommentItem {
+  /** 评论ID */
+  id: string
+  /** 笔记ID */
+  note_id: string
+  /** 评论内容 */
+  content: RichTextDocument
+  /** 用户信息 */
+  user_info: {
+    user_id: string
+    nickname: string
+    image: string
+    xsec_token: string
+  }
+  /** 创建时间戳（毫秒） */
+  create_time: number
+  /** IP位置 */
+  ip_location: string
+  /** 点赞数 */
+  like_count: string
+  /** 是否已点赞 */
+  liked: boolean
+  /** 评论图片 */
+  pictures: Array<{
+    height: number
+    width: number
+    url_pre: string
+    url_default: string
+    info_list: Array<{
+      image_scene: string
+      url: string
+    }>
+  }>
+  /** 子评论数量 */
+  sub_comment_count: string
+  /** 子评论列表 */
+  sub_comments: XiaohongshuSubComment[]
+  /** 显示标签 */
+  show_tags: string[]
+  /** @用户列表 */
+  at_users: string[]
+  /** 状态 */
+  status: number
+}
+
+/**
+ * 小红书子评论数据接口
+ */
+interface XiaohongshuSubComment {
+  /** 子评论ID */
+  id: string
+  /** 笔记ID */
+  note_id: string
+  /** 评论内容 */
+  content: RichTextDocument
+  /** 用户信息 */
+  user_info: {
+    user_id: string
+    nickname: string
+    image: string
+    xsec_token: string
+  }
+  /** 创建时间戳（毫秒） */
+  create_time: number
+  /** IP位置 */
+  ip_location: string
+  /** 点赞数 */
+  like_count: string
+  /** 是否已点赞 */
+  liked: boolean
+  /** 评论图片 */
+  pictures: string[]
+  /** 显示标签 */
+  show_tags: string[]
+  /** @用户列表 */
+  at_users: string[]
+  /** 状态 */
+  status: number
+  /** 目标评论 */
+  target_comment?: {
+    id: string
+    user_info: {
+      user_id: string
+      nickname: string
+      image: string
+      xsec_token: string
+    }
+  }
+}

package/src/ktr/template/xiaohongshu/comment/index.tsx

@@ -0,0 +1,9 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { XiaohongshuComment } from './components/Comment'
+
+export default defineTemplate({
+  name: '评论列表',
+  description: '小红书评论列表展示模板',
+  component: XiaohongshuComment
+})