koishi-plugin-kkk 1.0.0

package/src/ktr/template/other/handlerError/components/stackHighlight.ts

@@ -0,0 +1,127 @@
+/**
+ * 调用栈的结构化高亮。
+ *
+ * 与 `convertAnsiToHtml` 的分工：那个按 ANSI 转义上色，只适用于 `util.inspect`
+ * 的彩色转储。amagi 的错误现在只印 `error.stack`（纯文本、没有 ANSI），交给它
+ * 整段就是一个颜色 —— 所以这里按**结构**上色：错误名、`[kind/CODE]` 标签、
+ * 函数名、目录、文件名、行列号各一色，外部帧（依赖库与 node 内部）整行压暗，
+ * 一眼能挑出项目里的帧。归属由调用方的 {@link HighlightStackOptions.isOwnFrame} 判定 ——
+ * 不能只看路径里有没有 `node_modules`：发布后的插件自己就装在 `node_modules` 里。
+ *
+ * 单独成文件（不带 JSX / React import）是为了能直接单测 —— 颜色是否真的分层，
+ * 只有断言才说得清。
+ */
+
+/**
+ * 调用栈高亮用的一组颜色。
+ *
+ * 整个错误页是暖红底，所以这里只用邻近色：玫瑰 → 红 → 橙 → 琥珀，靠色相小步移动
+ * 加明度差把各段分开，不再借蓝紫这类对比色 —— 蓝紫压在红底上会跳出来抢戏。
+ */
+export const stackPalette = (dark: boolean) => ({
+  base: dark ? 'rgba(255,255,255,0.82)' : 'rgba(127,29,29,0.88)',
+  dim: dark ? 'rgba(255,255,255,0.32)' : 'rgba(127,29,29,0.38)',
+  errName: dark ? '#f87171' : '#dc2626',
+  tag: dark ? '#fb923c' : '#9a3412',
+  fn: dark ? '#fda4af' : '#be123c',
+  file: dark ? '#fcd34d' : '#a16207',
+  num: dark ? '#fdba74' : '#c2410c'
+})
+
+const escapeHtmlText = (str: string) =>
+  str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#039;')
+
+/** 转义 + 给 CJK 段落套字体，与 convertAnsiToHtml 的 formatLogContent 同款 */
+const withCjkFont = (str: string) =>
+  escapeHtmlText(str).replace(/([㐀-鿿豈-﫿　-〿＀-￯]+)/g, '<span class="font-[HarmonyOSHans-Regular]">$1</span>')
+
+/**
+ * 兜底的外部帧判定：只看文本特征，认不出路径。
+ *
+ * 它区分不了「第三方依赖」与「装在 node_modules 里跑的插件自己」—— 发布后的 kkk 正是
+ * 后者，调用帧形如
+ * `file:///…/node_modules/.pnpm/koishi-plugin-kkk@…/node_modules/koishi-plugin-kkk/lib/core_chunk/main.js:84860:65`，
+ * `node_modules` 出现两次，于是每一帧都被压暗、整块图失去分层。所以它只作兜底（单测等
+ * 无调用方上下文的场景），真实渲染一律由调用方给出 {@link HighlightStackOptions.isOwnFrame}。
+ * @param location - 帧里的位置原文
+ * @returns 是否属于本插件自己的代码
+ */
+const defaultIsOwnFrame = (location: string): boolean => !/node_modules|^node:|\(node:/.test(location)
+
+/** {@link highlightStack} 的选项。 */
+export interface HighlightStackOptions {
+  /**
+   * 判断一个调用帧的位置是否属于本插件自己的代码；返回 false 的帧整行压暗。
+   * @param location - 帧里的位置原文，形如 `路径:行:列` 或 `node:internal/…`
+   */
+  isOwnFrame?: (location: string) => boolean
+}
+
+/**
+ * 按结构高亮 JS 调用栈。
+ * @param text - `error.stack` 原文（纯文本）
+ * @param dark - 是否深色模式
+ * @param options - 可选覆盖项；不给 `isOwnFrame` 时退回文本特征判定
+ * @returns 可交给 dangerouslySetInnerHTML 的 HTML
+ */
+export const highlightStack = (text: string, dark: boolean, options: HighlightStackOptions = {}): string => {
+  const isOwnFrame = options.isOwnFrame ?? defaultIsOwnFrame
+  const c = stackPalette(dark)
+  const paint = (color: string, str: string, bold = false) =>
+    `<span style="color:${color}${bold ? ';font-weight:700' : ''}">${withCjkFont(str)}</span>`
+
+  /**
+   * `路径:行:列` —— 目录压暗、文件名高亮、行列号另一色。
+   * @param loc - 位置原文
+   * @param foreign - 外部帧，整行压暗
+   * @param ownFrame - 有路径可判归属的帧；裸文件名无从判断，按外部保守处理
+   */
+  const paintLocation = (loc: string, foreign: boolean, ownFrame: boolean): string => {
+    const dimAll = foreign || !ownFrame
+    const pos = /^(.*?):(\d+):(\d+)$/.exec(loc)
+    const body = pos ? pos[1] : loc
+    const tail = pos ? paint(dimAll ? c.dim : c.num, `:${pos[2]}:${pos[3]}`) : ''
+    const cut = Math.max(body.lastIndexOf('/'), body.lastIndexOf('\\'))
+    if (cut < 0) return paint(dimAll ? c.dim : c.file, body) + tail
+    return paint(c.dim, body.slice(0, cut + 1)) + paint(dimAll ? c.dim : c.file, body.slice(cut + 1)) + tail
+  }
+
+  return text
+    .split('\n')
+    .map((line) => {
+      // 调用帧：`    at [async |new ]名字 (位置)` 或 `    at 位置`
+      const frame = /^(\s*)at\s+(.*)$/.exec(line)
+      if (frame) {
+        const rest = frame[2]
+        const prefix = paint(c.dim, `${frame[1]}at `)
+
+        const named = /^(?:(async|new)\s+)?(.+?)\s+\((.+)\)$/.exec(rest)
+        if (named) {
+          const foreign = !isOwnFrame(named[3])
+          const modifier = named[1] ? paint(c.dim, `${named[1]} `) : ''
+          return (
+            prefix +
+            modifier +
+            paint(foreign ? c.dim : c.fn, named[2]) +
+            paint(c.dim, ' (') +
+            paintLocation(named[3], foreign, true) +
+            paint(c.dim, ')')
+          )
+        }
+        // 匿名帧：整段就是位置；没有行列号的多半是裸文件名，无从判归属，按外部处理
+        const hasPosition = /^(.*?):(\d+):(\d+)$/.test(rest)
+        return prefix + paintLocation(rest, !isOwnFrame(rest), hasPosition)
+      }
+
+      // 首行：`AmagiError: [risk/ANTIBOT_PAGE] 平台返回了反爬页面 (...)`
+      const head = /^([A-Za-z_$][\w$]*):\s([\s\S]*)$/.exec(line)
+      if (head) {
+        const tagMatch = /^(\[[^\]]+\])\s?([\s\S]*)$/.exec(head[2])
+        const body = tagMatch ? paint(c.tag, tagMatch[1], true) + paint(c.base, ` ${tagMatch[2]}`) : paint(c.base, head[2])
+        return paint(c.errName, head[1], true) + paint(c.dim, ': ') + body
+      }
+
+      return paint(c.base, line)
+    })
+    .join('\n')
+}

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

@@ -0,0 +1,124 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+import type { AmagiErrorCode, ErrorKind, RequestTrace, ValidationIssue } from '@ikenxuan/amagi'
+import type { AdapterInfo as KarinAdapterInfo } from 'node-karin'
+
+/** 业务错误类型。组件内需要时从总类型取：ApiErrorData['error'] */
+interface BusinessError {
+  /** 错误消息 */
+  message: string
+  /** 错误名称 */
+  name: string
+  /**
+   * 调用栈信息，纯文本（amagi 的 `error.stack`，或调用方显式覆盖的文本）。
+   * 模板按「有没有 ANSI」挑高亮方式：没有的按结构上色，有的走 ANSI 解析。
+   */
+  stack: string
+  /**
+   * 非 amagi 异常的自有属性转储（`util.inspect`，带 ANSI）。
+   *
+   * 调用帧已经在上面单独印了，这里只有 message 与调用点挂的属性 —— 那种情况下
+   * 它们往往是唯一线索。amagi 异常与显式覆盖堆栈的情况都没有这一块。
+   */
+  dump?: string
+  /** 业务名称 */
+  businessName: string
+}
+
+/**
+ * amagi v7 的分层错误信息。
+ *
+ * v6 只有一个混装的 `code`（HTTP 状态码、平台业务码、内部码挤在一起），错误图
+ * 也就只能印那个数字。v7 把三种码分了层，另外还给出可重试与请求归因信息 ——
+ * 这些正是「这次失败该怎么办」的判据，所以整块透到模板上：
+ * `kind` 决定是配置问题还是平台问题，`retryable` 决定要不要让用户重试，
+ * `requestId` / `attempts` 决定排查时从哪条日志看起。
+ *
+ * 只有 amagi 抛出的错误才有这一块；插件自身的异常没有。
+ */
+export interface AmagiErrorDetail {
+  /** 跨平台统一的错误大类，12 个之一 */
+  kind: ErrorKind
+  /** amagi 自己的字符串错误码，22 个之一 */
+  code: AmagiErrorCode
+  /** 平台返回的原文（未经 inspect 包装） */
+  reason: string
+  /** 是否值得重试 */
+  retryable: boolean
+  /** 平台业务码，如 B站的 -352（风控）/ 12061（评论区关闭） */
+  platformCode?: string | number
+  /** 真实发生的 HTTP 状态 */
+  httpStatus?: number
+  /** 一次逻辑调用的 id，事件、日志、trace 共用 */
+  requestId?: string
+  /** 实际发出的请求数，含重试与翻页 */
+  attempts?: number
+  /** 从 fetcher 入口到信封返回的耗时（毫秒） */
+  durationMs?: number
+  /** 参数校验的字段级错误，仅 `kind === 'validation'` 时有 */
+  issues?: ValidationIssue[]
+  /**
+   * 逐个请求的明细：URL（含签名参数）、方法、HTTP 状态、耗时与发起原因
+   * （`initial` / `retry` / `page` / `segment` / `prepare`）。
+   *
+   * amagi 只在 `debug: true` 时把它放进 `meta.trace`。它替代了原先靠
+   * `util.inspect` 整体转储才能看到的那部分上下文 —— 一次「翻 3 页 + 重试 1 次」
+   * 的调用在这里就是 4 行，而转储要几十行还会把同一个 URL 印两遍。
+   */
+  trace?: RequestTrace[]
+}
+
+/** 日志等级类型。组件内需要时从总类型逐步取：NonNullable<ApiErrorData['logs']>[number]['level'] */
+type LogLevel = 'TRAC' | 'DEBU' | 'MARK' | 'INFO' | 'ERRO' | 'WARN' | 'FATA'
+
+/** 日志条目接口。 */
+interface LogEntry {
+  /** 时间戳 */
+  timestamp: string
+  /** 日志等级 */
+  level: LogLevel
+  /** 日志内容 */
+  message: string
+  /** 原始日志字符串 */
+  raw: string
+}
+
+/** 适配器信息接口。 */
+type AdapterInfo = Omit<KarinAdapterInfo, 'index' | 'secret' | 'connectTime' | 'address'>
+
+/**
+ * API错误组件属性接口
+ */
+export interface ApiErrorData {
+  /** 错误类型 */
+  type: 'business_error'
+  /** 平台名称 */
+  platform: 'douyin' | 'bilibili' | 'kuaishou' | 'xiaohongshu' | 'system' | 'unknown'
+  /** 错误信息 */
+  error: BusinessError
+  /** amagi v7 的分层错误信息，仅当这次失败来自 amagi 时有 */
+  amagi?: AmagiErrorDetail
+  /** 调用的方法名 */
+  method: string
+  /** 错误发生时间 */
+  timestamp: string
+  /** 收集到的日志信息 */
+  logs?: LogEntry[]
+  /** 触发命令 */
+  triggerCommand?: string
+  /** 框架版本 */
+  frameworkVersion: string
+  /** 插件版本 */
+  pluginVersion: string
+  /** 构建时间 */
+  buildTime?: string
+  /** Commit ID */
+  commitHash?: string
+  /** 适配器信息 */
+  adapterInfo?: AdapterInfo
+  /** 是否为验证流程 */
+  isVerification?: boolean
+  /** 验证链接 */
+  verificationUrl?: string
+  /** 分享链接（用于生成二维码） */
+  share_url?: string
+}

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

@@ -0,0 +1,9 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { handlerError } from './components/handlerError'
+
+export default defineTemplate({
+  name: '错误页面',
+  description: 'KKK插件错误页面',
+  component: handlerError
+})

package/src/ktr/template/other/help/components/Help.tsx

@@ -0,0 +1,249 @@
+import React from 'react'
+
+import { isDark } from '../../../../utils/theme'
+import { DefaultLayout } from '../../../components/DefaultLayout'
+import { resolveIcon } from '../../../components/iconRegistry'
+import type { PosterProps } from '../../../types/ctx'
+import type { HelpData } from './types'
+
+/** 菜单分组类型：从 HelpData 逐步索引派生，types.ts 不再单独导出子类型 */
+type MenuGroup = NonNullable<HelpData['menu']>[number]
+/** 菜单项类型：同上，由 MenuGroup 继续索引得到 */
+type MenuItem = MenuGroup['items'][number]
+
+/**
+ * 获取图标组件，兜底为默认图标
+ * @param icon - 图标：可以是字符串或带颜色的对象
+ * @returns React 图标组件类型
+ */
+const getIconForItem = (icon?: MenuItem['icon']): React.ComponentType<any> => {
+  if (!icon) return resolveIcon('ph:question-fill')
+  const name = typeof icon === 'string' ? icon : icon.name
+  return resolveIcon(name)
+}
+
+/**
+ * 菜单项组件
+ * 展示单个功能的图标、标题和描述
+ */
+const MenuItemComponent: React.FC<{
+  /** 菜单项数据 */
+  item: MenuItem
+  /** 主题色 */
+  themeColor: string
+}> = ({ item, themeColor }) => {
+  const IconComponent = getIconForItem(item.icon)
+  const iconColor = typeof item.icon === 'object' && item.icon?.color ? item.icon.color : themeColor
+
+  return (
+    <div className="flex flex-row gap-8 py-2 relative">
+      <div className="pt-2 shrink-0 relative">
+        <IconComponent className="w-16 h-16 relative z-10 text-foreground" style={{ color: iconColor }} />
+      </div>
+      <div className="flex-1 min-w-0">
+        <h3 className="mb-3 text-4xl font-black leading-tight tracking-wide text-foreground">{item.title}</h3>
+        <p className="text-2xl font-medium leading-relaxed whitespace-pre-line text-muted">{item.description}</p>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 菜单分组组件
+ */
+const MenuGroupComponent: React.FC<{
+  /** 分组数据 */
+  group: MenuGroup
+  /** 主题色 */
+  themeColor: string
+}> = ({ group, themeColor }) => {
+  return (
+    <div className="relative py-8">
+      {/* 分组标题 */}
+      <div className="flex items-center gap-6 mb-16">
+        <div className="w-3 h-16 rounded-full" style={{ backgroundColor: themeColor }} />
+        <h2 className="m-0 text-[4rem] font-black tracking-tight uppercase leading-none text-foreground">{group.title}</h2>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-x-24 gap-y-16">
+        {group.items.map((item, idx) => (
+          <MenuItemComponent key={idx} item={item} themeColor={themeColor} />
+        ))}
+      </div>
+
+      {group.subGroups?.map((sub, i) => (
+        <div key={i} className="mt-20 relative">
+          <h3 className="m-0 mb-10 text-3xl font-bold tracking-wide uppercase opacity-60 flex items-center gap-4 text-foreground">
+            <div className="w-2 h-2 rounded-full bg-current" />
+            {sub.title}
+          </h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-x-24 gap-y-16">
+            {sub.items.map((item, idx) => (
+              <MenuItemComponent key={idx} item={item} themeColor={themeColor} />
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+/**
+ * 帮助页面组件
+ */
+export const Help: React.FC<PosterProps<HelpData>> = React.memo((props) => {
+  const title = props.data?.title || 'KKK PLUGIN'
+  const menuData = props.data?.menu || []
+  const dark = isDark(props.ctx)
+
+  // 弥散光颜色配置
+  const glowColors = dark
+    ? {
+        primary: 'rgba(59, 130, 246, 0.4)', // Blue
+        secondary: 'rgba(139, 92, 246, 0.3)', // Violet
+        accent: 'rgba(6, 182, 212, 0.25)' // Cyan
+      }
+    : {
+        primary: 'rgba(56, 189, 248, 0.5)', // Sky
+        secondary: 'rgba(167, 139, 250, 0.4)', // Violet
+        accent: 'rgba(45, 212, 191, 0.3)' // Teal
+      }
+
+  // 内容主题色轮换
+  const contentColors = dark
+    ? ['#60a5fa', '#a78bfa', '#2dd4bf'] // Blue-400, Violet-400, Teal-400
+    : ['#2563eb', '#7c3aed', '#0d9488'] // Blue-600, Violet-600, Teal-600
+
+  return (
+    <DefaultLayout {...props}>
+      {/* 1. 弥散光背景层 */}
+      <div className="absolute inset-0 pointer-events-none z-0">
+        <div
+          className="absolute rounded-full w-315 h-360 -top-67.5 -left-45 blur-[128px] -rotate-20"
+          style={{
+            background: `radial-gradient(ellipse at 40% 40%, ${glowColors.primary} 0%, transparent 70%)`
+          }}
+        />
+        <div
+          className="absolute rounded-full w-225 h-270 top-112.5 -right-22.5 blur-[108px] rotate-15"
+          style={{
+            background: `radial-gradient(ellipse at 50% 50%, ${glowColors.secondary} 0%, transparent 70%)`
+          }}
+        />
+        <div
+          className="absolute rounded-full w-270 h-225 -bottom-45 left-45 blur-[128px] -rotate-10"
+          style={{
+            background: `radial-gradient(ellipse at 50% 60%, ${glowColors.accent} 0%, transparent 70%)`
+          }}
+        />
+      </div>
+
+      {/* 2. 杂色纹理层 */}
+      <div className="absolute inset-0 pointer-events-none z-0 opacity-[0.08] dark:opacity-[0.12]">
+        <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>
+
+      {/* 3. 背景大字装饰 */}
+      <div className="absolute top-30 right-15 pointer-events-none select-none opacity-[0.03] z-0">
+        <span
+          className="text-[200px] font-black tracking-tighter leading-none block text-right text-foreground"
+          style={{
+            writingMode: 'vertical-rl',
+            textOrientation: 'mixed'
+          }}
+        >
+          GUIDE
+        </span>
+      </div>
+
+      {/* 4. 四周装饰性图形点缀 */}
+      <div className="absolute inset-0 pointer-events-none z-0 overflow-hidden">
+        {/* 左上角：矩阵点阵 */}
+        <div className="absolute top-12 left-12 grid grid-cols-4 gap-2 opacity-20">
+          {[...Array(16)].map((_, i) => (
+            <div key={i} className="w-1.5 h-1.5 rounded-full bg-foreground" />
+          ))}
+        </div>
+
+        {/* 右上角 */}
+        <div className="absolute top-12 right-12 flex flex-col items-end gap-1 opacity-20">
+          <div className="w-32 h-1 bg-foreground" />
+          <div className="w-24 h-1 bg-foreground" />
+          <div className="w-16 h-1 bg-foreground" />
+          <div className="text-xs font-mono mt-1 text-foreground">SYS.32.91</div>
+        </div>
+
+        {/* 左侧边缘 */}
+        <div className="absolute top-1/2 -translate-y-1/2 left-0 w-8 h-64 flex flex-col justify-between opacity-10">
+          {[...Array(20)].map((_, i) => (
+            <div
+              key={i}
+              className="w-full bg-foreground"
+              style={{ height: Math.random() > 0.5 ? '4px' : '2px', width: Math.random() * 100 + '%' }}
+            />
+          ))}
+        </div>
+
+        {/* 右侧边缘 */}
+        <div className="absolute top-1/3 right-0 w-0 h-0 border-t-20 border-t-transparent border-r-30 border-r-foreground border-b-20 border-b-transparent opacity-10" />
+
+        {/* 底部装饰 */}
+        <div className="absolute bottom-0 left-0 right-0 h-48 pointer-events-none">
+          {/* 左下角装饰条纹 */}
+          <div
+            className="absolute bottom-0 left-0 w-130 h-100 opacity-[0.04]"
+            style={{
+              background: `repeating-linear-gradient(45deg, ${dark ? '#fff' : '#000'}, ${dark ? '#fff' : '#000'} 5px, transparent 2px, transparent 10px)`
+            }}
+          />
+          {/* 右下角大圆环 */}
+          <div className="absolute -bottom-120 -right-90 w-300 h-300 rounded-full border-200 border-foreground opacity-[0.04]" />
+        </div>
+      </div>
+
+      {/* 5. 主要内容区域 */}
+      <div className="relative z-10 p-18 flex flex-col min-h-100">
+        {/* 头部区域 */}
+        <div className="flex justify-between items-end mb-24 border-b-4 border-foreground/10 pb-8">
+          <div className="flex flex-col gap-2">
+            <div className="flex items-center gap-3 opacity-60">
+              <span className="w-2 h-2 rounded-full bg-blue-500 animate-pulse" />
+              <span className="text-sm font-mono tracking-widest text-muted">SYSTEM_READY</span>
+            </div>
+            <h1 className="text-[5rem] font-black leading-none tracking-tighter text-foreground">COMMANDS</h1>
+          </div>
+
+          <div className="text-right pb-2 opacity-80">
+            <div className="text-xs font-bold tracking-[0.2em] uppercase text-muted mb-1">CURRENT MODULE</div>
+            <div className="text-2xl font-bold text-foreground">{title}</div>
+          </div>
+        </div>
+
+        {/* 菜单列表区域 */}
+        <div className="space-y-28 flex-1 pb-48">
+          {menuData.map((group, index) => {
+            // 轮换颜色
+            const themeColor = contentColors[index % contentColors.length]
+
+            return <MenuGroupComponent key={index} group={group} themeColor={themeColor} />
+          })}
+        </div>
+      </div>
+    </DefaultLayout>
+  )
+})
+
+Help.displayName = 'Help'
+
+export default Help

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

@@ -0,0 +1,47 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+
+/**
+ * 帮助页面组件属性接口
+ */
+export interface HelpData {
+  /** 页面标题 */
+  title?: string
+  /** 角色：主人/普通 */
+  role?: 'master' | 'member'
+  /** 菜单数据：按角色筛选后的分组 */
+  menu?: MenuGroup[]
+  /** 简单的列表数据 (用于 Help.tsx 渲染) */
+  list: {
+    title: string
+    description: string
+  }[]
+}
+
+/**
+ * 菜单项接口
+ */
+interface MenuItem {
+  /** 菜单项标题 */
+  title: string
+  /** 菜单项描述 */
+  description: string
+  /** 图标：可以是图标名称字符串，或带颜色的对象 */
+  icon?: string | { name: string; color?: string }
+}
+
+/**
+ * 菜单分组接口
+ */
+interface MenuGroup {
+  /** 分组标题 */
+  title: string
+  /** 菜单项列表 */
+  items: MenuItem[]
+  /** 子分组（可选） */
+  subGroups?: {
+    /** 子分组标题 */
+    title: string
+    /** 子分组菜单项 */
+    items: MenuItem[]
+  }[]
+}

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

@@ -0,0 +1,9 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import Help from './components/Help'
+
+export default defineTemplate({
+  name: '帮助页面',
+  description: 'KKK插件帮助页面',
+  component: Help
+})