koishi-plugin-kkk 1.0.0

package/src/ktr/template/xiaohongshu/noteInfo/components/noteInfo.tsx

@@ -0,0 +1,271 @@
+import { renderRichTextToReact } from '@kkk/richtext'
+import { PlayIcon } from '@phosphor-icons/react'
+import { format } from 'date-fns'
+import { Calendar, Heart, MapPin, MessageCircle, Share2, Star } from 'lucide-react'
+import React from 'react'
+
+import { isDark } from '../../../../utils/theme'
+import { AmbientCover } from '../../../components/AmbientCover'
+import { DefaultLayout } from '../../../components/DefaultLayout'
+import { QRCodeWithAvatar } from '../../../components/QRCodeWithAvatar'
+import type { PosterProps } from '../../../types/ctx'
+import type { XiaohongshuNoteInfoData } from './types'
+
+/** 小红书品牌红：整图唯一强调色，只用于点赞图标与头像描边 */
+const XHS_RED = '#FF2442'
+
+const xiaohongshuNoteMentionClassName = 'text-[#13386c] dark:text-[#c7daef]'
+
+/**
+ * 格式化互动数：纯数字串过万缩写为 x.x万；API 已格式化的「5.7万」等原样返回
+ * @param num 数字
+ * @returns 格式化后的字符串
+ */
+const formatNumber = (num: string | number): string => {
+  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: React.FC<PosterProps<XiaohongshuNoteInfoData>> = ({ data, ctx }) => (
+  <div className="pointer-events-none absolute inset-0 overflow-hidden select-none">
+    <AmbientCover src={data.image_url} ctx={ctx} />
+
+    <div className="absolute inset-0 opacity-[0.4] mix-blend-overlay dark:mix-blend-soft-light">
+      <svg className="h-full w-full" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <filter id="xhsNoteNoise">
+            <feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="3" stitchTiles="stitch" />
+            <feColorMatrix type="saturate" values="0" />
+            <feComponentTransfer>
+              <feFuncR type="discrete" tableValues="0 1" />
+              <feFuncG type="discrete" tableValues="0 1" />
+              <feFuncB type="discrete" tableValues="0 1" />
+            </feComponentTransfer>
+            <feComponentTransfer>
+              <feFuncA type="linear" slope="2.5" intercept="-0.6" />
+            </feComponentTransfer>
+          </filter>
+          <mask id="xhsNoteNoiseMask">
+            <linearGradient id="xhsNoteNoiseGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" stopColor="white" stopOpacity="0.85" />
+              <stop offset="25%" stopColor="white" stopOpacity="0.4" />
+              <stop offset="50%" stopColor="white" stopOpacity="0.08" />
+              <stop offset="75%" stopColor="white" stopOpacity="0.4" />
+              <stop offset="100%" stopColor="white" stopOpacity="0.85" />
+            </linearGradient>
+            <rect width="100%" height="100%" fill="url(#xhsNoteNoiseGradient)" />
+          </mask>
+        </defs>
+        <rect width="100%" height="100%" filter="url(#xhsNoteNoise)" mask="url(#xhsNoteNoiseMask)" fill="white" />
+      </svg>
+    </div>
+  </div>
+)
+
+/**
+ * 顶部系统标签行：海报式技术标签 + 笔记 ID，替代平台 Logo 的顶部占位
+ */
+const NoteSystemLabel: React.FC<PosterProps<XiaohongshuNoteInfoData>> = ({ data }) => (
+  <div className="flex items-center justify-between">
+    <div className="flex items-center gap-4">
+      <span className="h-8 w-2 rounded-full" style={{ backgroundColor: XHS_RED }} />
+      <span className="text-[26px] font-bold tracking-[0.3em] uppercase text-foreground/60">Xiaohongshu Note</span>
+    </div>
+    <span className="font-mono text-[26px] text-foreground/40 select-text">ID: {data.note_id}</span>
+  </div>
+)
+
+/**
+ * 笔记封面：官方分享长图的干净大图样式，圆角 + 大投影，不做溶解遮罩。
+ * 图集在右下角堆叠预览后续图片，超出部分以 +N 收尾；视频笔记改为白色半透明播放图标。
+ */
+const NoteCover: React.FC<PosterProps<XiaohongshuNoteInfoData>> = ({ 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 (
+    <section className="relative mt-12 overflow-hidden rounded-[3rem] shadow-2xl">
+      <img
+        src={data.image_url}
+        alt={data.title || '小红书笔记封面'}
+        className="block h-auto w-full object-cover"
+        referrerPolicy="no-referrer"
+        crossOrigin="anonymous"
+      />
+
+      {data.is_video && (
+        <PlayIcon size={104} weight="fill" aria-label="视频笔记" className="absolute right-10 bottom-10 z-10 text-white/50" />
+      )}
+
+      {previewImages.length > 0 && (
+        <div className="absolute right-10 bottom-10 z-10 flex items-center -space-x-5 drop-shadow-2xl">
+          {previewImages.map((url, index) => (
+            <img
+              key={`${url}-${index}`}
+              src={url}
+              alt="图集预览"
+              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"
+            />
+          ))}
+          {remainingPreviewCount > 0 && (
+            <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">
+              +{remainingPreviewCount}
+            </div>
+          )}
+        </div>
+      )}
+    </section>
+  )
+}
+
+/**
+ * 作者行：官方长图位置（封面之后、标题之前），头像带品牌红描边
+ */
+const NoteAuthorRow: React.FC<PosterProps<XiaohongshuNoteInfoData>> = ({ data }) => (
+  <section className="mt-14 flex items-center gap-6">
+    <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"
+    />
+    <div className="min-w-0">
+      <div className="max-w-200 truncate text-[52px] font-black leading-tight text-foreground select-text">{data.author.nickname}</div>
+      <div className="mt-3 flex flex-wrap items-center gap-x-6 gap-y-2 text-[30px] text-muted">
+        <span className="inline-flex items-center gap-2">
+          <Calendar size={28} />
+          <span className="select-text">{format(new Date(data.time), 'yyyy-MM-dd HH:mm')}</span>
+        </span>
+        {data.ip_location && (
+          <span className="inline-flex items-center gap-2">
+            <MapPin size={28} />
+            <span className="select-text">{data.ip_location}</span>
+          </span>
+        )}
+      </div>
+    </div>
+  </section>
+)
+
+/**
+ * 标题与正文：标题是唯一大字层级，正文降为次级明度
+ */
+const NoteContent: React.FC<PosterProps<XiaohongshuNoteInfoData>> = ({ data }) => (
+  <section className="mt-10">
+    {data.title && (
+      <h1
+        className="text-[68px] font-black leading-[1.2] tracking-tight text-foreground select-text"
+        style={{ wordBreak: 'break-word', overflowWrap: 'break-word' }}
+      >
+        {data.title}
+      </h1>
+    )}
+    <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' }}
+    >
+      {renderRichTextToReact(data.desc, {
+        mention: { className: xiaohongshuNoteMentionClassName }
+      })}
+    </div>
+  </section>
+)
+
+/**
+ * 互动数据行：大数字做视觉锚点，只有点赞用心红，其余中性色
+ */
+const NoteStatsRow: React.FC<PosterProps<XiaohongshuNoteInfoData>> = ({ data }) => {
+  const stats = [
+    { icon: Heart, value: data.statistics.liked_count, label: '点赞', accent: true },
+    { icon: MessageCircle, value: data.statistics.comment_count, label: '评论', accent: false },
+    { icon: Star, value: data.statistics.collected_count, label: '收藏', accent: false },
+    { icon: Share2, value: data.statistics.share_count, label: '分享', accent: false }
+  ]
+
+  return (
+    <section className="mt-14 flex flex-wrap items-end gap-x-20 gap-y-8">
+      {stats.map((stat) => {
+        const Icon = stat.icon
+        return (
+          <div key={stat.label} className="min-w-40">
+            <div className="flex items-center gap-3 text-[28px] font-semibold text-muted">
+              <Icon
+                size={36}
+                strokeWidth={2.2}
+                style={stat.accent ? { color: XHS_RED, fill: XHS_RED } : undefined}
+                className={stat.accent ? undefined : 'text-foreground/70'}
+              />
+              <span>{stat.label}</span>
+            </div>
+            <div className="mt-3 text-[64px] font-black leading-none text-foreground tabular-nums select-text">
+              {formatNumber(stat.value)}
+            </div>
+          </div>
+        )
+      })}
+    </section>
+  )
+}
+
+/**
+ * 底部行动条：官方长图的小红书 Logo + 二维码收尾
+ */
+const NoteFooter: React.FC<PosterProps<XiaohongshuNoteInfoData>> = ({ data, ctx }) => (
+  <footer className="mt-16">
+    <div className="mt-12 flex items-center justify-between gap-16">
+      <img src="/image/xiaohongshu/logo.png" alt="小红书" className="h-16 w-auto shrink-0 object-contain opacity-90" />
+      {data.share_url && (
+        <div className="flex items-center gap-8">
+          <div className="text-right">
+            <div className="text-[32px] font-black text-foreground">扫码查看原笔记</div>
+            <div className="mt-2 text-[26px] text-muted">长按识别二维码</div>
+          </div>
+          <div className="shrink-0 drop-shadow-2xl">
+            <QRCodeWithAvatar value={data.share_url} useDarkTheme={isDark(ctx)} alt="笔记二维码" className="h-60 w-60" />
+          </div>
+        </div>
+      )}
+    </div>
+  </footer>
+)
+
+/**
+ * 小红书笔记信息组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+export const XiaohongshuNoteInfo: React.FC<PosterProps<XiaohongshuNoteInfoData>> = React.memo((props) => {
+  return (
+    <DefaultLayout {...props} className="relative overflow-hidden">
+      <NoteDiffuseBackground {...props} />
+
+      <section className="relative z-10 px-20 pt-16">
+        <NoteSystemLabel {...props} />
+        <NoteCover {...props} />
+        <NoteAuthorRow {...props} />
+        <NoteContent {...props} />
+        <NoteStatsRow {...props} />
+        <NoteFooter {...props} />
+      </section>
+    </DefaultLayout>
+  )
+})
+
+XiaohongshuNoteInfo.displayName = 'XiaohongshuNoteInfo'
+
+export default XiaohongshuNoteInfo

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

@@ -0,0 +1,66 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+import type { RichTextDocument } from '@kkk/richtext'
+
+/**
+ * 小红书笔记统计信息接口
+ */
+interface XiaohongshuNoteStatistics {
+  /** 分享数 */
+  share_count: string | number
+  /** 是否已关注 */
+  followed: boolean
+  /** 关系状态 */
+  relation: string
+  /** 是否已点赞 */
+  liked: boolean
+  /** 点赞数 */
+  liked_count: string | number
+  /** 是否已收藏 */
+  collected: boolean
+  /** 收藏数 */
+  collected_count: string | number
+  /** 评论数 */
+  comment_count: string | number
+}
+
+/**
+ * 小红书作者信息接口
+ */
+interface XiaohongshuAuthor {
+  /** xsec_token */
+  xsec_token?: string
+  /** 用户ID */
+  user_id: string
+  /** 用户昵称 */
+  nickname: string
+  /** 用户头像URL */
+  avatar: string
+}
+
+/**
+ * 小红书笔记信息数据接口
+ */
+export interface XiaohongshuNoteInfoData {
+  /** 笔记标题 */
+  title: string
+  /** 笔记描述 */
+  desc: RichTextDocument
+  /** 统计信息 */
+  statistics: XiaohongshuNoteStatistics
+  /** 笔记ID */
+  note_id: string
+  /** 作者信息 */
+  author: XiaohongshuAuthor
+  /** 笔记封面图片URL */
+  image_url: string
+  /** 创建时间戳 */
+  time: number
+  /** IP位置 */
+  ip_location: string
+  /** 笔记分享链接（用于底部二维码） */
+  share_url?: string
+  /** 图集图片URL列表（视频笔记只有封面一张） */
+  image_list?: string[]
+  /** 是否为视频笔记 */
+  is_video?: boolean
+}

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

@@ -0,0 +1,9 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { XiaohongshuNoteInfo } from './components/noteInfo'
+
+export default defineTemplate({
+  name: '笔记信息',
+  description: '小红书笔记信息展示模板',
+  component: XiaohongshuNoteInfo
+})

package/src/ktr/utils/QRCodeAvatar.ts

@@ -0,0 +1,102 @@
+import { isProxyableAvatarUrl, toProxiedAvatarUrl } from './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<string, Promise<Uint8Array | undefined>>()
+
+const isSupportedImageBytes = (image: Uint8Array): boolean => {
+  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: string): Promise<Uint8Array | undefined> => {
+  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: string): string[] => {
+  if (typeof window === 'undefined' || !isProxyableAvatarUrl(url)) return [url]
+  return [toProxiedAvatarUrl(url), url]
+}
+
+const fetchQRCodeAvatar = async (url: string): Promise<Uint8Array | undefined> => {
+  for (const candidate of avatarCandidates(url)) {
+    const image = await requestAvatarBytes(candidate)
+    if (image) return image
+  }
+
+  return undefined
+}
+
+/**
+ * 加载并缓存二维码头像。同一头像的并发渲染会复用请求，失败结果不会进入缓存。
+ */
+export const loadQRCodeAvatar = (url?: string): Promise<Uint8Array | undefined> => {
+  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
+}

package/src/ktr/utils/QRcode.ts

@@ -0,0 +1,65 @@
+/**
+ * Koishi 移植：\`@ikenxuan/qrcode\` 是 ESM-only 包（exports 里没有 require 条件），
+ * 而模板组件在 react-dom/server 的**同步渲染**里调用本函数，没法 await import。
+ * 因此改为「渲染入口预先异步加载好生成器，这里同步取用」。
+ */
+type GenerateSync = (options: Record<string, unknown>, format: string, output: string) => string
+
+let generateSyncImpl: GenerateSync | undefined
+
+/** 由渲染入口在 SSR 之前注入（见 module/utils/Render/index.ts） */
+export const setQrcodeGenerator = (impl: GenerateSync) => {
+  generateSyncImpl = impl
+}
+
+/** 生成器是否已就绪 */
+export const hasQrcodeGenerator = () => typeof generateSyncImpl === 'function'
+
+/**
+ * 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.
+ */
+export const generateQRCode = (text: string, useDarkTheme: boolean = false, image?: Uint8Array) => {
+  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}`
+}

package/src/ktr/utils/avatarProxy.ts

@@ -0,0 +1,42 @@
+/**
+ * ktr 开发面板预览用的头像代理约定。
+ *
+ * 头像 CDN（尤其 `q*.qlogo.cn`）不返回 `Access-Control-Allow-Origin`，
+ * 浏览器里直接 fetch 会被同源策略拦掉，面板预览的二维码就嵌不上头像。
+ * 生产渲染走 Node SSR（服务端 fetch，无同源策略），不受影响也不需要这个代理。
+ *
+ * 代理端点由 `karin.template.ts` 的 avatarProxyPlugin 挂在 ktr dev 服务器上，仅 serve 态存在。
+ */
+
+/** 代理端点路径，dev 服务器与模板侧共用这一处定义。 */
+export const AVATAR_PROXY_PATH = '/__kkk/avatar-proxy'
+
+/**
+ * 允许转发的头像 CDN 域名。
+ *
+ * 白名单是为了不让 dev 服务器变成任意地址的开放转发；
+ * 其它适配器的头像域名如果也缺 CORS 头，在这里补一条即可（不在名单内的走直连）。
+ */
+const ALLOWED_AVATAR_HOSTS = [/(?:^|\.)qlogo\.cn$/i, /(?:^|\.)qpic\.cn$/i, /(?:^|\.)hdslb\.com$/i]
+
+/**
+ * 判断某个头像 URL 是否允许经代理转发
+ * @param url - 头像地址
+ * @returns 命中白名单且是 http(s) 时为 true
+ */
+export const isProxyableAvatarUrl = (url: string): boolean => {
+  try {
+    const parsed = new URL(url)
+    if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') return false
+    return ALLOWED_AVATAR_HOSTS.some((pattern) => pattern.test(parsed.hostname))
+  } catch {
+    return false
+  }
+}
+
+/**
+ * 把头像地址改写成同源代理地址
+ * @param url - 原始头像地址
+ * @returns 代理端点地址
+ */
+export const toProxiedAvatarUrl = (url: string): string => `${AVATAR_PROXY_PATH}?url=${encodeURIComponent(url)}`

package/src/ktr/utils/cn.ts

@@ -0,0 +1,6 @@
+import clsx, { type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/ktr/utils/theme.ts

@@ -0,0 +1,10 @@
+import type { RenderContext } from '@karinjs/template-react'
+
+/**
+ * 判断当前渲染是否为深色主题。
+ * 唯一事实来源是 `ctx.theme.mode`：生产渲染由 core 显式传入（'light' | 'dark'），
+ * 开发面板由「模板主题」弹窗下发；未设置时按浅色处理（框架不发明默认主题）。
+ * @param ctx ktr 注入的运行时上下文。
+ * @returns 深色主题返回 true。
+ */
+export const isDark = (ctx: RenderContext): boolean => ctx.theme?.mode === 'dark'

package/src/qqFields.json

@@ -0,0 +1,75 @@
+[
+  {
+    "key": "qqPanel",
+    "group": "解析面板",
+    "type": "boolean",
+    "default": true,
+    "label": "链接解析面板",
+    "description": "QQ 里收到链接时先回一条带按钮的面板，让用户自己挑解析内容和画质，点一下才开始下载。关掉就直接按默认配置解析。"
+  },
+  {
+    "key": "recallPanel",
+    "group": "解析面板",
+    "type": "boolean",
+    "default": true,
+    "label": "自动撤回面板",
+    "description": "用户在面板上点完按钮后，自动把上一条面板消息撤回，群里不会堆着一排旧面板。"
+  },
+  {
+    "key": "qqFileLimitMB",
+    "group": "解析面板",
+    "type": "number",
+    "default": 200,
+    "min": 1,
+    "max": 2000,
+    "label": "画质档体积上限（MB）",
+    "description": "面板里体积超过这个值的画质档直接不显示。QQ 单个视频上限 200MB，选了也发不出去，所以默认 200。"
+  },
+  {
+    "key": "bangumiPanelCols",
+    "group": "番剧选集面板",
+    "type": "number",
+    "default": 5,
+    "min": 1,
+    "max": 10,
+    "label": "表格列数",
+    "description": "番剧分集面板每行放几个集数，默认 5。"
+  },
+  {
+    "key": "bangumiPanelRows",
+    "group": "番剧选集面板",
+    "type": "number",
+    "default": 4,
+    "min": 1,
+    "max": 10,
+    "label": "表格行数",
+    "description": "番剧分集面板每页几行（含表头那一行），默认 4 行。列数 × 行数就是每页的集数。"
+  },
+  {
+    "key": "sliceImageOnDemand",
+    "group": "图片发送",
+    "type": "boolean",
+    "default": true,
+    "label": "超大图片自动切片",
+    "description": "长图（评论区那种）默认按普通图片发；只有超过 20MB 或者发送失败（拿不到消息 ID）时才自动切成几片，再用一条 markdown 拼回一整张。关掉就一律按普通图片发。"
+  },
+  {
+    "key": "sliceImageHeight",
+    "group": "图片发送",
+    "type": "number",
+    "default": 2000,
+    "min": 500,
+    "max": 4000,
+    "label": "切片高度（像素）",
+    "description": "切片时每片的高度，默认 2000。越大片数越少、字越小；越小越清晰、片数越多。"
+  },
+  {
+    "key": "ocrApiKey",
+    "group": "卡片识别",
+    "type": "string",
+    "default": "",
+    "label": "卡片文字识别密钥",
+    "secret": true,
+    "description": "群里转发过来的分享卡片没有链接，只能靠截图识别出标题和作者再去搜索。填自己的免费密钥更稳定：https://ocr.space/ocrapi 。留空会用公共测试密钥，容易被限流。"
+  }
+]