koishi-plugin-kkk 1.0.0

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

@@ -0,0 +1,388 @@
+/** bilibili板块共享类型（跨模板复用 / core 引用）。 */
+import type { RichTextDocument } from '@kkk/richtext'
+
+import type { UsernameMetadata } from '../dynamic/types'
+
+/**
+ * 粉丝卡片信息接口
+ */
+export interface FanCardInfo {
+  /** 卡片背景图片 */
+  image: string | null
+  /** 序号前缀 */
+  numPrefix: string
+  /** 序号描述 */
+  numDesc: string
+  /** 渐变色样式 */
+  gradientStyle: string
+}
+
+/**
+ * B站二级评论项数据接口
+ */
+export interface SubCommentItem {
+  /** 用户头像URL */
+  avatar: string
+  /** 用户昵称 */
+  uname: string
+  /** 用户昵称颜色 */
+  unameColor?: string | null
+  /** 用户等级 */
+  level: number
+  /** 头像框 */
+  frame?: string
+  /** 评论内容 */
+  message: RichTextDocument
+  /** 评论所有图片 */
+  pictures: string[]
+  /** 创建时间戳（秒） */
+  ctime: number
+  /** IP标签/地理位置 */
+  location: string
+  /** 点赞数 */
+  like: number
+  /** 是否为UP主评论 */
+  isUP: boolean
+  /** VIP状态 */
+  vipstatus?: number
+  /** 粉丝卡片信息 */
+  fanCard?: FanCardInfo | null
+  /** 粉丝勋章详情 */
+  fansDetail?: FansDetail | null
+}
+
+/**
+ * 粉丝勋章详情
+ */
+export interface FansDetail {
+  /** 用户ID */
+  uid: number
+  /** 勋章ID */
+  medal_id: number
+  /** 勋章名称 */
+  medal_name: string
+  /** 分数 */
+  score: number
+  /** 等级 */
+  level: number
+  /** 亲密度 */
+  intimacy: number
+  /** 主播状态 */
+  master_status: number
+  /** 是否领取 */
+  is_receive: number
+  /** 勋章颜色（起始） */
+  medal_color: number
+  /** 勋章颜色（结束） */
+  medal_color_end: number
+  /** 边框颜色 */
+  medal_color_border: number
+  /** 名称颜色 */
+  medal_color_name: number
+  /** 等级颜色 */
+  medal_color_level: number
+  /** 守护等级 */
+  guard_level: number
+  /** 守护图标 */
+  guard_icon: string
+  /** 荣誉图标 */
+  honor_icon: string
+  /** 首图标（可选） */
+  first_icon?: string
+  /** 等级背景色 */
+  medal_level_bg_color: number
+}
+
+/**
+ * B站评论项数据接口
+ */
+export interface CommentItem {
+  /** 用户头像URL */
+  avatar: string
+  /** 用户昵称 */
+  uname: string
+  /** 用户昵称颜色 */
+  unameColor?: string | null
+  /** 用户等级 */
+  level: number
+  /** 头像框 */
+  frame?: string
+  /** 标签类型 (1=作者) */
+  label_type?: number
+  /** 状态标签 */
+  status_label?: string | null
+  /** 评论内容 */
+  message: RichTextDocument
+  /** 评论所有图片 */
+  pictures: string[]
+  /** VIP状态 */
+  vipstatus?: number
+  /** 贴纸 */
+  sticker?: string
+  /** 创建时间戳（秒） */
+  ctime: number
+  /** IP标签/地理位置 */
+  location: string
+  /** 回复数量 */
+  replylength: number
+  /** 点赞数 */
+  like: number
+  /** 是否置顶评论 */
+  isTop: boolean
+  /** 是否为UP主评论 */
+  isUP: boolean
+  /** 二级评论列表 */
+  replies?: SubCommentItem[]
+  /** 粉丝卡片信息 */
+  fanCard?: FanCardInfo | null
+  /** 粉丝勋章详情 */
+  fansDetail?: FansDetail | null
+}
+
+/**
+ * B站视频统计数据接口
+ */
+export interface BilibiliVideoStat {
+  /** 视频AV号 */
+  aid: number
+  /** 播放量 */
+  view: number
+  /** 弹幕数 */
+  danmaku: number
+  /** 评论数 */
+  reply: number
+  /** 收藏数 */
+  favorite: number
+  /** 投币数 */
+  coin: number
+  /** 分享数 */
+  share: number
+  /** 当前排名 */
+  now_rank: number
+  /** 历史最高排名 */
+  his_rank: number
+  /** 点赞数 */
+  like: number
+  /** 点踩数 */
+  dislike: number
+  /** 评价 */
+  evaluation: string
+  /** VT标识 */
+  vt: number
+}
+
+/**
+ * B站视频UP主信息接口
+ */
+export interface BilibiliVideoOwner {
+  /** UP主用户ID */
+  mid: number
+  /** UP主昵称 */
+  name: string
+  /** UP主头像URL */
+  face: string
+  /** 用户名元数据（VIP颜色等） */
+  usernameMeta?: UsernameMetadata
+  /** 头像框图片URL */
+  frame?: string
+}
+
+/**
+ * 热门弹幕项接口（相同内容的弹幕聚合）
+ */
+export interface BilibiliHotDanmaku {
+  /** 弹幕内容 */
+  content: string
+  /** 出现次数 */
+  count: number
+}
+
+/**
+ * 视频统计项组件属性接口
+ */
+export interface VideoStatItemProps {
+  /** 图标组件 */
+  icon: React.ReactNode
+  /** 标签文本 */
+  label: string
+  /** 数值 */
+  value: number | string
+}
+
+/**
+ * 视频头部信息组件属性接口
+ */
+export interface VideoHeaderProps {
+  /** 视频标题 */
+  title: string
+  /** UP主信息 */
+  owner: BilibiliVideoOwner
+  /** 创建时间戳 */
+  ctime: number
+}
+
+/**
+ * 二维码区域组件属性接口
+ */
+export interface QRCodeSectionProps {
+  /** 分享链接 */
+  share_url: string
+}
+
+/**
+ * 徽章信息接口
+ */
+export interface BangumiBilibiliEpisodeBadgeInfo {
+  /** 背景颜色 */
+  bg_color: string
+  /** 夜间模式背景颜色 */
+  bg_color_night: string
+  /** 徽章文本 */
+  text: string
+}
+
+/**
+ * 番剧剧集信息接口
+ */
+export interface BangumiBilibiliEpisode {
+  /** 剧集封面图片URL */
+  cover: string
+  /** 视频BV号 */
+  bvid: string
+  /** 剧集链接 */
+  link: string
+  /** 剧集完整标题 */
+  long_title: string
+  /** 发布时间戳 */
+  pub_time: number
+  /** 徽章标识（如：限免、会员） */
+  badge: string
+  /** 徽章详细信息 */
+  badge_info: BangumiBilibiliEpisodeBadgeInfo
+}
+
+/**
+ * 番剧最新剧集信息接口
+ */
+export interface BangumiBilibiliNewEP {
+  /** 剧集描述 */
+  desc: string
+  /** 剧集ID */
+  id: number
+  /** 是否为新剧集 */
+  is_new: number
+  /** 剧集标题 */
+  title: string
+}
+
+/**
+ * 番剧统计数据接口
+ */
+export interface BangumiBilibiliStat {
+  /** 硬币数 */
+  coins: number
+  /** 弹幕数 */
+  danmakus: number
+  /** 收藏数 */
+  favorite: number
+  /** 总收藏数 */
+  favorites: number
+  /** 追番文本 */
+  follow_text: string
+  /** 点赞数 */
+  likes: number
+  /** 评论数 */
+  reply: number
+  /** 分享数 */
+  share: number
+  /** 播放量 */
+  views: number
+  /** VT标识 */
+  vt: number
+}
+
+/**
+ * UP主挂件信息接口
+ */
+export interface BangumiBilibiliPendant {
+  /** 挂件图片URL */
+  image: string
+  /** 挂件名称 */
+  name: string
+  /** 挂件ID */
+  pid: number
+}
+
+/**
+ * UP主VIP标签信息接口
+ */
+export interface BangumiBilibiliVipLabel {
+  /** 背景颜色 */
+  bg_color: string
+  /** 背景样式 */
+  bg_style: number
+  /** 边框颜色 */
+  border_color: string
+  /** 标签文本 */
+  text: string
+  /** 文本颜色 */
+  text_color: string
+}
+
+/**
+ * UP主信息接口
+ */
+export interface BangumiBilibiliUPInfo {
+  /** 头像URL */
+  avatar: string
+  /** 头像角标URL */
+  avatar_subscript_url: string
+  /** 粉丝数 */
+  follower: number
+  /** 是否已关注 */
+  is_follow: number
+  /** 用户ID */
+  mid: number
+  /** 昵称颜色 */
+  nickname_color: string
+  /** 挂件信息 */
+  pendant: BangumiBilibiliPendant
+  /** 主题类型 */
+  theme_type: number
+  /** 用户名 */
+  uname: string
+  /** 认证类型 */
+  verify_type: number
+  /** VIP标签信息 */
+  vip_label: BangumiBilibiliVipLabel
+  /** VIP状态 */
+  vip_status: number
+  /** VIP类型 */
+  vip_type: number
+}
+
+/**
+ * 番剧头部组件属性接口
+ */
+export interface BangumiBilibiliHeaderProps {
+  /** 番剧标题 */
+  title: string
+  /** 主封面图片URL */
+  mainCover: string
+  /** 番剧评价描述 */
+  evaluate: string
+  /** 演员信息 */
+  actors: string
+  /** 番剧风格标签 */
+  styles: string[]
+  /** 副标题信息 */
+  subtitle: string
+  /** UP主信息 */
+  upInfo?: BangumiBilibiliUPInfo
+  /** 统计数据 */
+  stat: BangumiBilibiliStat
+  /** 版权信息 */
+  copyright: string
+  /** 季度ID */
+  seasonID: number
+}

package/src/ktr/template/bilibili/dynamic/DYNAMIC_TYPE_ARTICLE/components/DYNAMIC_TYPE_ARTICLE.tsx

@@ -0,0 +1,251 @@
+import { renderRichTextToReact } from '@kkk/richtext'
+import { Bookmark, Clock, Eye, Hash, UsersRound } from 'lucide-react'
+import React from 'react'
+
+import { isDark } from '../../../../../utils/theme'
+import { DefaultLayout } from '../../../../components/DefaultLayout'
+import { QRCodeWithAvatar } from '../../../../components/QRCodeWithAvatar'
+import type { PosterProps } from '../../../../types/ctx'
+import { CommentIcon, ShareIcon, ThumbUpIcon } from '../../../components/Icons'
+import { CommentText, DecorationCard, EnhancedImage, UsernameDisplay } from '../../../components/shared'
+import type { BilibiliArticleDynamicData } from './types'
+
+/**
+ * B站专栏动态用户信息组件
+ */
+const BilibiliArticleUserInfo: React.FC<PosterProps<BilibiliArticleDynamicData>> = React.memo((props) => {
+  return (
+    <div className="flex gap-10 items-center justify-between px-0 pb-0 pl-24 pr-10">
+      <div className="flex gap-10 items-center">
+        <div className="relative">
+          <EnhancedImage src={props.data.avatar_url} alt="用户头像" className="w-32 h-32 rounded-full shadow-medium" isCircular />
+          {props.data.frame && <EnhancedImage src={props.data.frame} alt="头像框" className="absolute inset-0 transform scale-180" />}
+        </div>
+        <div className="flex flex-col gap-8 text-7xl">
+          <div className="text-6xl font-bold select-text text-foreground">
+            <UsernameDisplay metadata={props.data.usernameMeta} />
+          </div>
+          <div className="flex gap-2 items-center text-4xl font-normal whitespace-nowrap text-muted">
+            <Clock size={36} />
+            {props.data.create_time}
+          </div>
+        </div>
+      </div>
+      {props.data.decoration_card && (
+        <div className="shrink-0">
+          <DecorationCard data={props.data.decoration_card} />
+        </div>
+      )}
+    </div>
+  )
+})
+
+/**
+ * B站专栏动态内容组件
+ */
+const BilibiliArticleContent: React.FC<PosterProps<BilibiliArticleDynamicData>> = React.memo((props) => {
+  return (
+    <div className="flex flex-col px-20 w-full leading-relaxed">
+      {/* 专栏标题 */}
+      <div className="mb-8">
+        <h1 className="text-[60px] font-bold leading-[1.4] tracking-[0.5px] text-foreground select-text">
+          <CommentText content={props.data.title} />
+        </h1>
+      </div>
+
+      {/* 专栏封面 */}
+      {props.data.banner_url && (
+        <div className="mb-8">
+          <EnhancedImage src={props.data.banner_url} alt="专栏封面" className="w-full rounded-2xl shadow-medium" />
+        </div>
+      )}
+
+      {/* 专栏摘要 */}
+      {props.data.summary && (
+        <div className="mb-8">
+          <CommentText content={props.data.summary} className="text-[48px] leading-[1.6] text-foreground/70 select-text" />
+        </div>
+      )}
+
+      {/* 专栏正文内容 */}
+      {props.data.body && (
+        <div className="text-5xl leading-relaxed flex-col items-center mb-8 select-text">
+          {renderRichTextToReact(props.data.body, {
+            at: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            topic: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            webLink: { className: 'text-[#006A9E] dark:text-[#58B0D5] underline' },
+            opusLink: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            mention: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            lottery: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            vote: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            viewPicture: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            searchKeyword: {
+              className: 'text-[#006A9E] dark:text-[#58B0D5]',
+              iconClassName: 'text-[#006A9E] dark:text-[#58B0D5]'
+            },
+            codeBlock: {
+              className: 'font-mono'
+            },
+            linkCard: {
+              className: 'block bg-default rounded-4xl p-16 my-8 text-[#006A9E] dark:text-[#58B0D5] underline border border-scrollbar'
+            }
+          })}
+        </div>
+      )}
+    </div>
+  )
+})
+
+/**
+ * B站专栏动态状态组件
+ */
+const BilibiliArticleStatus: React.FC<PosterProps<BilibiliArticleDynamicData>> = React.memo((props) => {
+  return (
+    <div className="flex flex-col gap-12 px-20 py-16">
+      {/* 互动数据 */}
+      <div className="flex gap-24 items-center">
+        <div className="flex gap-3 items-center text-[42px]">
+          <ThumbUpIcon size={32} />
+          <span className="font-medium">{props.data.stats.like || 0}</span>
+          <span className="text-[36px] text-foreground/70">点赞</span>
+        </div>
+        <div className="flex gap-3 items-center text-[42px]">
+          <CommentIcon size={32} />
+          <span className="font-medium">{props.data.stats.reply || 0}</span>
+          <span className="text-[36px] text-foreground/70">评论</span>
+        </div>
+        <div className="flex gap-3 items-center text-[42px]">
+          <ShareIcon size={32} />
+          <span className="font-medium">{props.data.stats.dynamic || 0}</span>
+          <span className="text-[36px] text-foreground/70">分享</span>
+        </div>
+      </div>
+
+      {/* 专栏统计信息 */}
+      <div className="flex gap-20 items-center text-[36px] text-foreground/80">
+        <div className="flex gap-2 items-center">
+          <Eye size={28} />
+          <span className="font-medium">阅读量</span>
+          <span className="font-bold text-foreground">{props.data.stats.view || 0}</span>
+        </div>
+        <div className="flex gap-2 items-center">
+          <Bookmark size={28} />
+          <span className="font-medium">收藏</span>
+          <span className="font-bold text-foreground">{props.data.stats.favorite || 0}</span>
+        </div>
+        <div className="flex gap-2 items-center">
+          <ThumbUpIcon size={28} />
+          <span className="font-medium">获赞</span>
+          <span className="font-bold text-foreground">{props.data.stats.like || 0}</span>
+        </div>
+      </div>
+    </div>
+  )
+})
+
+/**
+ * B站专栏动态底部信息组件
+ */
+const BilibiliArticleFooter: React.FC<PosterProps<BilibiliArticleDynamicData>> = React.memo((props) => {
+  return (
+    <div className="flex justify-between items-start px-20 pb-20">
+      {/* 左侧：用户信息 */}
+      <div className="flex flex-col gap-12">
+        {/* 头像和用户名/UID */}
+        <div className="flex gap-12 items-start">
+          {/* 头像 */}
+          <div className="relative shrink-0">
+            <EnhancedImage src={props.data.avatar_url} alt="头像" className="rounded-full shadow-medium w-35 h-auto" isCircular />
+            {props.data.frame && <EnhancedImage src={props.data.frame} alt="头像框" className="absolute inset-0 transform scale-175" />}
+          </div>
+
+          {/* 用户名和UID - 纵向排列 */}
+          <div className="flex flex-col gap-5">
+            <div className="text-7xl font-bold select-text text-foreground">
+              <UsernameDisplay metadata={props.data.usernameMeta} />
+            </div>
+            <div className="flex gap-2 items-center text-4xl text-muted">
+              <Hash size={32} />
+              <span className="select-text">UID: {props.data.user_shortid}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* 用户统计信息 */}
+        <div className="text-3xl flex gap-6 items-center text-foreground/70">
+          <div className="flex flex-col gap-1 items-start px-6 py-3 rounded-2xl bg-surface">
+            <div className="flex gap-1 items-center">
+              <ThumbUpIcon size={28} />
+              <span className="text-muted">获赞</span>
+            </div>
+            <div className="w-full h-px bg-border" />
+            <span className="select-text font-medium text-4xl">{props.data.total_favorited}</span>
+          </div>
+          <div className="flex flex-col gap-1 items-start px-6 py-3 rounded-2xl bg-surface">
+            <div className="flex gap-1 items-center">
+              <Eye size={28} />
+              <span className="text-muted">关注</span>
+            </div>
+            <div className="w-full h-px bg-border" />
+            <span className="select-text font-medium text-4xl">{props.data.following_count}</span>
+          </div>
+          <div className="flex flex-col gap-1 items-start px-6 py-3 rounded-2xl bg-surface">
+            <div className="flex gap-1 items-center">
+              <UsersRound size={28} />
+              <span className="text-muted">粉丝</span>
+            </div>
+            <div className="w-full h-px bg-border" />
+            <span className="select-text font-medium text-4xl">{props.data.fans}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* 右侧：二维码 */}
+      <div className="flex flex-col items-center gap-4">
+        <QRCodeWithAvatar
+          value={props.data.share_url}
+          avatarUrl={props.data.avatar_url}
+          useDarkTheme={isDark(props.ctx)}
+          alt="二维码"
+          className="h-auto w-75 rounded-2xl"
+        />
+      </div>
+    </div>
+  )
+})
+
+/**
+ * B站专栏动态主组件
+ */
+export const BilibiliArticleDynamic: React.FC<PosterProps<BilibiliArticleDynamicData>> = React.memo((props) => {
+  return (
+    <DefaultLayout ctx={props.ctx}>
+      <div className="p-4">
+        {/* 间距 */}
+        <div className="h-25" />
+
+        {/* 用户信息 */}
+        <BilibiliArticleUserInfo {...props} />
+
+        {/* 间距 */}
+        <div className="h-15" />
+
+        {/* 专栏内容 */}
+        <BilibiliArticleContent {...props} />
+
+        {/* 互动状态 */}
+        <BilibiliArticleStatus {...props} />
+
+        {/* 间距 */}
+        <div className="h-23" />
+
+        {/* 底部信息 */}
+        <BilibiliArticleFooter {...props} />
+      </div>
+    </DefaultLayout>
+  )
+})
+
+BilibiliArticleDynamic.displayName = 'BilibiliArticleDynamic'
+
+export default BilibiliArticleDynamic

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

@@ -0,0 +1,67 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+import type { RichTextDocument } from '@kkk/richtext'
+
+import type { DecorationCardData, UsernameMetadata } from '../../types'
+
+/**
+ * B站专栏动态组件属性接口
+ */
+export interface BilibiliArticleDynamicData {
+  /** 用户头像URL */
+  avatar_url: string
+  /** 头像框 */
+  frame?: string
+  /** 用户名元数据 */
+  usernameMeta: UsernameMetadata
+  /** 动态创建时间 */
+  create_time: string
+  /** 装饰卡片 */
+  decoration_card?: DecorationCardData
+  /** 专栏标题 */
+  title: string
+  /** 专栏摘要 */
+  summary: string
+  /** 专栏封面图片URL */
+  banner_url?: string
+  /** 专栏分类 */
+  categories: Array<{
+    id: number
+    name: string
+    parent_id: number
+  }>
+  /** 专栏字数 */
+  words: number
+  /** 专栏统计数据 */
+  stats: {
+    /** 阅读数 */
+    view: number
+    /** 点赞数 */
+    like: number
+    /** 收藏数 */
+    favorite: number
+    /** 评论数 */
+    reply: number
+    /** 分享数 */
+    share: number
+    /** 投币数 */
+    coin: number
+    /** 转发动态 */
+    dynamic: number
+  }
+  /** 专栏正文（richtext 格式） */
+  body: RichTextDocument
+  /** 渲染时间 */
+  render_time: string
+  /** 动态类型 */
+  dynamicTYPE: string
+  /** 分享链接 */
+  share_url: string
+  /** 用户短ID */
+  user_shortid: string | number
+  /** 获赞总数 */
+  total_favorited: string | number
+  /** 关注数 */
+  following_count: string | number
+  /** 粉丝数 */
+  fans: string | number
+}