koishi-plugin-kkk 1.0.0

package/src/ktr/template/bilibili/dynamic/types.ts

@@ -0,0 +1,382 @@
+/** bilibili dynamic 板块共享类型（跨模板复用 / core 引用）。 */
+import type { RichTextDocument } from '@kkk/richtext'
+
+/**
+ * 装饰卡片数据
+ */
+export interface DecorationCardData {
+  /** 卡片背景图片URL */
+  card_url: string
+  /** 渐变颜色数组 */
+  colors: string[]
+  /** 卡片显示文字 */
+  text: string
+}
+
+/**
+ * 用户名元数据，用于传递 VIP 状态和颜色信息
+ */
+export interface UsernameMetadata {
+  /** 用户名 */
+  name: string
+  /** VIP状态，1为年度大会员 */
+  vipStatus: number
+  /** 昵称颜色，VIP用户特有 */
+  nicknameColor: string | null
+}
+
+/**
+ * B站动态基础数据接口（所有动态类型共有的字段）
+ */
+export interface BilibiliDynamicBaseData {
+  /** 用户头像URL */
+  avatar_url: string
+  /** 头像框 */
+  frame?: string
+  /** 用户名元数据 */
+  usernameMeta: UsernameMetadata
+  /** 动态创建时间 */
+  create_time: string
+  /** 装饰卡片 */
+  decoration_card?: DecorationCardData
+  /** 点赞数 */
+  dianzan: string | number
+  /** 评论数 */
+  pinglun: string | number
+  /** 分享数 */
+  share: string | number
+  /** 渲染时间 */
+  render_time: string
+  /** 用户短ID */
+  user_shortid: string | number
+  /** 获赞总数 */
+  total_favorited: string | number
+  /** 关注数 */
+  following_count: string | number
+  /** 粉丝数 */
+  fans: string | number
+  /** 动态类型 */
+  dynamicTYPE: string
+  /** 动态ID */
+  dynamic_id: string
+  /** 分享链接 */
+  share_url: string
+}
+
+/**
+ * B站预约卡片数据接口
+ */
+export interface BilibiliReserveData {
+  /** 预约标题 */
+  title: string
+  /** 时间信息 */
+  desc1: string
+  /** 预约人数 */
+  desc2: string
+  /** 预约奖励信息（可选） */
+  desc3?: string
+  /** 按钮文本 */
+  buttonText: string
+}
+
+/**
+ * B站投票卡片数据接口
+ */
+export interface BilibiliVoteData {
+  /** 投票标题 */
+  title: string
+  /** 参与人数描述（如 "1703人参与"） */
+  desc: string
+  /** 投票状态: 4-已结束 */
+  status: number
+}
+
+/**
+ * B站通用卡片数据接口（游戏等）
+ */
+export interface BilibiliCommonData {
+  /** 封面图 */
+  cover: string
+  /** 标题 */
+  title: string
+  /** 描述1（标签） */
+  desc1: string
+  /** 描述2（副标题） */
+  desc2: string
+  /** 按钮文本 */
+  button_text?: string
+  /** 头部文本（如"相关游戏"） */
+  head_text?: string
+  /** 子类型 */
+  sub_type?: string
+}
+
+/**
+ * B站视频跳转卡片数据接口（UGC）
+ */
+export interface BilibiliUgcData {
+  /** 封面图 */
+  cover: string
+  /** 标题 */
+  title: string
+  /** 时长（如 "08:01"） */
+  duration: string
+  /** 播放量（如 "12.6万播放"） */
+  play: string
+  /** 弹幕数（如 "1061弹幕"） */
+  danmaku: string
+}
+
+/**
+ * B站相关内容卡片联合类型
+ */
+export interface BilibiliAdditionalData {
+  /** 卡片类型 */
+  type:
+    | 'ADDITIONAL_TYPE_RESERVE'
+    | 'ADDITIONAL_TYPE_VOTE'
+    | 'ADDITIONAL_TYPE_COMMON'
+    | 'ADDITIONAL_TYPE_UGC'
+    | 'ADDITIONAL_TYPE_GOODS'
+    | 'ADDITIONAL_TYPE_UPOWER_LOTTERY'
+    | 'ADDITIONAL_TYPE_NONE'
+  /** 预约数据 */
+  reserve?: BilibiliReserveData
+  /** 投票数据 */
+  vote?: BilibiliVoteData
+  /** 通用卡片数据 */
+  common?: BilibiliCommonData
+  /** 视频跳转数据 */
+  ugc?: BilibiliUgcData
+}
+
+/**
+ * B站动态内容组件属性接口
+ */
+export interface BilibiliDynamicContentProps {
+  /** 图文动态标题 */
+  title?: string
+  /** 动态文本内容（富文本文档） */
+  text: RichTextDocument | null
+  /** 图片URL数组 */
+  image_url: Array<{ image_src: string }>
+  /** 图片布局方式 */
+  imageLayout: string
+  /** 相关内容卡片 */
+  additional?: BilibiliAdditionalData
+}
+
+/**
+ * B站动态状态组件属性接口
+ */
+export interface BilibiliDynamicStatusProps {
+  /** 点赞数 */
+  dianzan: string | number
+  /** 评论数 */
+  pinglun: string | number
+  /** 分享数 */
+  share: string | number
+  /** 渲染时间 */
+  render_time: string
+}
+
+/**
+ * B站动态底部信息组件属性接口
+ */
+export interface BilibiliDynamicFooterProps {
+  /** 用户短ID */
+  user_shortid: string | number
+  /** 获赞总数 */
+  total_favorited: string | number
+  /** 关注数 */
+  following_count: string | number
+  /** 粉丝数 */
+  fans: string | number
+  /** 动态类型 */
+  dynamicTYPE: string
+  /** 分享链接 */
+  share_url: string
+  /** 头像URL */
+  avatar_url: string
+  /** 头像框URL */
+  frame?: string
+  /** 用户名元数据 */
+  usernameMeta: {
+    /** 用户名 */
+    name: string
+    /** VIP状态，1为年度大会员 */
+    vipStatus: number
+    /** 昵称颜色 */
+    nicknameColor: string | null
+  }
+}
+
+/**
+ * B站纯文动态内容组件属性接口
+ */
+export interface BilibiliWordContentProps {
+  /** 动态文本内容（富文本文档） */
+  text: RichTextDocument | null
+  /** 相关内容卡片 */
+  additional?: BilibiliAdditionalData
+}
+
+/**
+ * 原始内容AV类型接口
+ */
+export interface OriginalContentAV {
+  /** 用户头像URL */
+  avatar_url: string
+  /** 头像框 */
+  frame?: string
+  /** 用户名元数据 */
+  usernameMeta: UsernameMetadata
+  /** 创建时间 */
+  create_time: string
+  /** 装饰卡片 */
+  decoration_card?: DecorationCardData
+  /** 视频封面 */
+  cover: string
+  /** 视频时长文本 */
+  duration_text: string
+  /** 播放量 */
+  play: string
+  /** 弹幕数 */
+  danmaku: string
+  /** 视频标题 */
+  title: RichTextDocument
+  /** 动态文本内容（富文本文档） */
+  text: RichTextDocument
+}
+
+/**
+ * 原始内容图文类型接口
+ */
+export interface OriginalContentDraw {
+  /** 标题 */
+  title?: string
+  /** 用户头像URL */
+  avatar_url: string
+  /** 头像框 */
+  frame?: string
+  /** 用户名元数据 */
+  usernameMeta: UsernameMetadata
+  /** 创建时间 */
+  create_time: string
+  /** 装饰卡片 */
+  decoration_card?: DecorationCardData
+  /** 动态文本内容（富文本文档） */
+  text: RichTextDocument
+  /** 图片URL数组 */
+  image_url: Array<{ image_src: string }>
+}
+
+/**
+ * 原始内容文字类型接口
+ */
+export interface OriginalContentWord {
+  /** 用户头像URL */
+  avatar_url: string
+  /** 头像框 */
+  frame?: string
+  /** 用户名元数据 */
+  usernameMeta: UsernameMetadata
+  /** 创建时间 */
+  create_time: string
+  /** 装饰卡片 */
+  decoration_card?: DecorationCardData
+  /** 动态文本内容（富文本文档） */
+  text: RichTextDocument
+  /** 相关内容卡片 */
+  additional?: BilibiliAdditionalData
+}
+
+/**
+ * 原始内容直播推荐类型接口
+ */
+export interface OriginalContentLiveRcmd {
+  /** 用户头像URL */
+  avatar_url: string
+  /** 头像框 */
+  frame?: string
+  /** 用户名元数据 */
+  usernameMeta: UsernameMetadata
+  /** 创建时间 */
+  create_time: string
+  /** 装饰卡片 */
+  decoration_card?: DecorationCardData
+  /** 直播封面 */
+  cover: string
+  /** 分区名称 */
+  area_name: string
+  /** 大文本 */
+  text_large: string
+  /** 在线人数 */
+  online: string
+  /** 直播标题 */
+  title: RichTextDocument
+}
+
+/**
+ * 转发动态原始内容Props接口
+ */
+export interface BilibiliForwardOriginalContentProps {
+  /** 原始内容 */
+  original_content: {
+    /** AV类型内容 */
+    DYNAMIC_TYPE_AV?: OriginalContentAV
+    /** 图文类型内容 */
+    DYNAMIC_TYPE_DRAW?: OriginalContentDraw
+    /** 文字类型内容 */
+    DYNAMIC_TYPE_WORD?: OriginalContentWord
+    /** 直播推荐类型内容 */
+    DYNAMIC_TYPE_LIVE_RCMD?: OriginalContentLiveRcmd
+  }
+}
+
+/**
+ * 转发动态内容Props接口
+ */
+export interface BilibiliForwardContentProps {
+  /** 动态文本内容（富文本文档） */
+  text: RichTextDocument
+  /** 原始内容 */
+  original_content: BilibiliForwardOriginalContentProps['original_content']
+}
+
+/**
+ * B站直播动态内容组件属性接口
+ */
+export interface BilibiliLiveDynamicContentProps {
+  /** 直播封面 */
+  image_url: string
+  /** 直播标题 */
+  text: RichTextDocument
+  /** 直播房间信息（分区 | 房间号） */
+  liveinf: string
+  /** 用户名元数据 */
+  usernameMeta: UsernameMetadata
+  avatar_url: string
+  frame?: string
+  fans: string
+  /** 时间信息 */
+  create_time: string
+}
+
+/**
+ * B站直播动态底部信息组件属性接口
+ */
+export interface BilibiliLiveDynamicFooterProps {
+  /** 用户头像URL */
+  avatar_url: string
+  /** 头像框 */
+  frame?: string
+  /** 用户名元数据 */
+  usernameMeta: UsernameMetadata
+  /** 粉丝数 */
+  fans: string
+  /** 动态类型 */
+  dynamicTYPE: string
+  /** 分享链接 */
+  share_url: string
+}

package/src/ktr/template/bilibili/qrcodeImg/components/qrcodeImg.tsx

@@ -0,0 +1,179 @@
+import { SiBilibili } from '@icons-pack/react-simple-icons'
+import { AlertTriangle, ScanLine, User } from 'lucide-react'
+import React from 'react'
+import { RiArrowRightFill } from 'react-icons/ri'
+
+import { isDark } from '../../../../utils/theme'
+import { DefaultLayout } from '../../../components/DefaultLayout'
+import { QRCodeWithAvatar } from '../../../components/QRCodeWithAvatar'
+import type { PosterProps } from '../../../types/ctx'
+import type { BilibiliQrcodeImgData } from './types'
+
+/**
+ * B站二维码登录组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+export const BilibiliQrcodeImg: React.FC<PosterProps<BilibiliQrcodeImgData>> = React.memo((props) => {
+  const dark = isDark(props.ctx)
+
+  const theme = {
+    bg: dark ? '#000000' : '#FFFFFF',
+    text: dark ? '#FFFFFF' : '#000000',
+    subText: dark ? '#888888' : '#666666',
+    accent: '#FF6699', // B站粉
+    // 双色弥散
+    gradientTL: '#FF6699', // 左上 B站粉
+    gradientBR: '#00AEEC' // 右下 B站蓝
+  }
+
+  const disclaimer = [
+    '您将通过扫码完成获取哔哩哔哩网页端的用户登录凭证（ck），该ck将用于请求哔哩哔哩WEB API接口。',
+    '本BOT不会上传任何有关你的信息到第三方，所配置的 ck 只会用于请求官方 API 接口。',
+    '我方仅提供视频解析及相关哔哩哔哩内容服务,若您的账号封禁、被盗等处罚与我方无关。',
+    '害怕风险请勿扫码 ~'
+  ]
+
+  return (
+    <DefaultLayout
+      {...props}
+      className="relative overflow-hidden font-sans"
+      style={{
+        background: theme.bg,
+        color: theme.text
+      }}
+    >
+      {/* 1. 弥散模糊效果 */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        {/* 右上角主光辉 */}
+        <div
+          className="absolute top-[-40%] right-[-50%] w-400 h-600 rounded-full blur-[200px] opacity-25"
+          style={{ background: theme.gradientBR }}
+        />
+        {/* 左下角氛围光 */}
+        <div
+          className="absolute bottom-[-40%] left-[-50%] w-400 h-600 rounded-full blur-[200px] opacity-25"
+          style={{ background: theme.gradientTL }}
+        />
+      </div>
+
+      {/* 2. 单色噪点层 */}
+      <div className="absolute inset-0 pointer-events-none" style={{ opacity: dark ? 0.16 : 0.2 }}>
+        <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="2" 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="relative z-10 flex flex-col items-center justify-center h-full py-40 px-24 space-y-32">
+        {/* 标题区 */}
+        <div className="text-center space-y-12">
+          {/* Title */}
+          <h1 className="text-8xl font-bold tracking-tight">
+            <span
+              className="bg-clip-text text-transparent"
+              style={{
+                backgroundImage: `linear-gradient(to right, ${theme.text}, ${theme.subText})`
+              }}
+            >
+              B站扫码登录
+            </span>
+          </h1>
+
+          {/* 操作步骤 */}
+          <div className="flex items-start justify-center gap-10 opacity-90" style={{ color: theme.text }}>
+            {/* Step 1 */}
+            <div className="flex flex-col items-center gap-4">
+              <div className="p-5 rounded-3xl bg-surface/50 backdrop-blur-md">
+                <SiBilibili size={64} />
+              </div>
+              <span className="text-[28px] font-medium tracking-wide">打开哔哩哔哩</span>
+            </div>
+            <RiArrowRightFill size={40} className="mt-8 opacity-40" />
+            {/* Step 2 */}
+            <div className="flex flex-col items-center gap-4">
+              <div className="p-5 rounded-3xl bg-surface/50 backdrop-blur-md">
+                <User size={64} />
+              </div>
+              <span className="text-[28px] font-medium tracking-wide">点击我的</span>
+            </div>
+            <RiArrowRightFill size={40} className="mt-8 opacity-40" />
+            {/* Step 3 */}
+            <div className="flex flex-col items-center gap-4">
+              <div className="p-5 rounded-3xl bg-surface/50 backdrop-blur-md">
+                <ScanLine size={64} />
+              </div>
+              <span className="text-[28px] font-medium tracking-wide">右上角扫一扫</span>
+            </div>
+          </div>
+        </div>
+
+        {/* 二维码 */}
+        <div className="relative group">
+          <div
+            className="relative p-4"
+            style={{
+              width: '800px',
+              height: '800px'
+            }}
+          >
+            {props.data.share_url ? (
+              <QRCodeWithAvatar
+                value={props.data.share_url}
+                avatarUrl={props.data.avatarUrl}
+                useDarkTheme={dark}
+                alt="QR Code"
+                className="w-full h-full object-contain"
+              />
+            ) : (
+              <div className="w-full h-full flex flex-col items-center justify-center gap-8">
+                <div className="w-24 h-24 border-4 border-gray-200 rounded-full animate-spin" style={{ borderTopColor: theme.accent }} />
+                <span className="text-3xl text-muted">未提供二维码图片</span>
+              </div>
+            )}
+          </div>
+
+          {/* 倒计时 */}
+          <div className="absolute -bottom-24 left-0 right-0 text-center">
+            <p className="text-[28px] font-medium tracking-wide flex items-center justify-center gap-3" style={{ color: theme.subText }}>
+              <span
+                className="h-6 w-1.5 rounded-full shadow-[0_0_8px_rgba(255,102,153,0.8)]"
+                style={{ backgroundColor: theme.accent }}
+              ></span>
+              此二维码 120 秒内有效，请及时扫码登录。
+            </p>
+          </div>
+        </div>
+
+        {/* 底部信息 */}
+        <div className="w-full max-w-4xl pt-20">
+          <div className="flex flex-col items-center space-y-6 text-center">
+            <div className="flex items-center justify-center w-16 h-16 mb-2">
+              <AlertTriangle size={64} style={{ color: theme.text }} strokeWidth={1.5} />
+            </div>
+            <h3 className="text-[40px] font-bold" style={{ color: theme.text }}>
+              免责声明
+            </h3>
+            <div className="text-[24px] leading-relaxed opacity-60 space-y-2 max-w-3xl" style={{ color: theme.text }}>
+              {disclaimer.map((line, index) => (
+                <p key={index}>{line}</p>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  )
+})
+
+BilibiliQrcodeImg.displayName = 'BilibiliQrcodeImg'
+
+export default BilibiliQrcodeImg

package/src/ktr/template/bilibili/qrcodeImg/components/types.ts

@@ -0,0 +1,9 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+
+/** B站二维码登录组件属性 */
+export interface BilibiliQrcodeImgData {
+  /** 分享链接 */
+  share_url: string
+  /** 触发登录的用户头像 URL，嵌入二维码中心作为 logo；缺省时生成普通二维码 */
+  avatarUrl?: string
+}

package/src/ktr/template/bilibili/qrcodeImg/index.tsx

@@ -0,0 +1,12 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { BilibiliQrcodeImg } from './components/qrcodeImg'
+import type { BilibiliQrcodeImgData } from './components/types'
+
+export default defineTemplate({
+  name: '登录二维码',
+  description: 'B站登录二维码展示模板',
+  component: BilibiliQrcodeImg,
+  validate: (data): data is BilibiliQrcodeImgData =>
+    typeof data === 'object' && data !== null && typeof (data as any).share_url === 'string'
+})