koishi-plugin-kkk 1.0.0

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

@@ -0,0 +1,348 @@
+import { renderRichTextToReact } from '@kkk/richtext'
+import { Clock } from 'lucide-react'
+import React from 'react'
+
+import { isDark } from '../../../../../utils/theme'
+import { DefaultLayout } from '../../../../components/DefaultLayout'
+import type { PosterProps } from '../../../../types/ctx'
+import { DecorationCard, EnhancedImage, UsernameDisplay } from '../../../components/shared'
+import { BilibiliAdditionalCard } from '../../components/AdditionalCard'
+import { BilibiliDynamicFooter, BilibiliDynamicStatus, BilibiliDynamicUserInfo } from '../../components/CommonComponents'
+import type { DecorationCardData, OriginalContentAV, OriginalContentDraw, OriginalContentLiveRcmd, OriginalContentWord } from '../../types'
+import type { BilibiliForwardDynamicData } from './types'
+
+/**
+ * 原始内容用户信息组件
+ */
+const OriginalUserInfo: React.FC<{
+  avatar_url: string
+  frame?: string
+  usernameMeta: { name: string; vipStatus: number; nicknameColor: string | null }
+  create_time: string
+  decoration_card?: DecorationCardData
+}> = (props) => {
+  return (
+    <div className="flex justify-between items-center pl-8 pr-0">
+      <div className="flex gap-10 items-center min-w-0">
+        <div className="relative shrink-0">
+          <EnhancedImage src={props.avatar_url} alt="转发用户头像" className="rounded-full shadow-medium w-30 h-30" />
+          {props.frame && <EnhancedImage src={props.frame} alt="转发用户头像框" className="absolute inset-0 transform scale-180" />}
+        </div>
+        <div className="flex flex-col gap-4 text-7xl">
+          <div className="text-5xl font-normal select-text text-foreground">
+            <UsernameDisplay metadata={props.usernameMeta} />
+          </div>
+          <div className="flex gap-2 items-center text-4xl font-normal whitespace-nowrap text-muted">
+            <Clock size={32} />
+            {props.create_time}
+          </div>
+        </div>
+      </div>
+      {props.decoration_card && (
+        <div className="shrink-0">
+          <DecorationCard data={props.decoration_card} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * AV类型原始内容组件
+ */
+const OriginalAVContent: React.FC<{ content: OriginalContentAV }> = ({ content }) => {
+  return (
+    <div className="px-12 py-8 mt-4 w-full rounded-8xl bg-surface-secondary">
+      <div className="h-10" />
+
+      <OriginalUserInfo
+        avatar_url={content.avatar_url}
+        frame={content.frame}
+        usernameMeta={content.usernameMeta}
+        create_time={content.create_time}
+        decoration_card={content.decoration_card}
+      />
+
+      <div className="h-15" />
+
+      <div className="relative items-center text-5xl tracking-wider wrap-break-word text-muted leading-relaxed">
+        {content.text.nodes.length > 0 &&
+          renderRichTextToReact(content.text, {
+            at: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            topic: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            lottery: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            webLink: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            vote: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            viewPicture: { className: 'text-[#006A9E] dark:text-[#58B0D5]' }
+          })}
+      </div>
+
+      {content.text.nodes.length > 0 && <div className="h-5" />}
+
+      <div className="flex overflow-hidden relative flex-col items-center w-full rounded-5xl aspect-video">
+        <EnhancedImage src={content.cover} alt="视频封面" className="w-full h-full" />
+        <div className="absolute right-0 bottom-0 left-0 h-1/2 bg-linear-to-t to-transparent pointer-events-none from-black/75" />
+        <div className="absolute right-5 left-12 bottom-14 z-10 text-4xl font-light text-white select-text">
+          <span className="px-4 py-2 mr-3 text-4xl text-white rounded-2xl bg-black/50">{content.duration_text}</span>
+          {content.play}观看 {content.danmaku}弹幕
+        </div>
+      </div>
+
+      <div className="h-10" />
+
+      <div className="pl-2 text-6xl font-bold select-text leading-20 text-foreground">
+        {content.title &&
+          renderRichTextToReact(content.title, {
+            at: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            topic: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            lottery: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            webLink: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            vote: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            viewPicture: { className: 'text-[#006A9E] dark:text-[#58B0D5]' }
+          })}
+      </div>
+
+      <div className="h-4" />
+    </div>
+  )
+}
+
+/**
+ * DRAW类型原始内容组件
+ */
+const OriginalDrawContent: React.FC<{ content: OriginalContentDraw }> = ({ content }) => {
+  return (
+    <div className="px-12 py-12 mt-4 w-full rounded-8xl bg-surface-secondary">
+      <OriginalUserInfo
+        avatar_url={content.avatar_url}
+        frame={content.frame}
+        usernameMeta={content.usernameMeta}
+        create_time={content.create_time}
+        decoration_card={content.decoration_card}
+      />
+
+      <div className="h-15" />
+
+      <div className="text-5xl leading-relaxed text-foreground wrap-break-word">
+        {content.title && (
+          <span className="text-6xl font-bold">
+            {content.title}
+            <br />
+            <br />
+          </span>
+        )}
+        {content.text &&
+          renderRichTextToReact(content.text, {
+            at: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            topic: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            lottery: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            webLink: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            vote: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            viewPicture: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            iconScale: 0.8
+          })}
+      </div>
+
+      {content.image_url && content.image_url.length === 1 ? (
+        <div className="flex justify-center py-11 pb-0">
+          <div className="flex overflow-hidden flex-col items-center w-full rounded-4xl shadow-large">
+            <EnhancedImage src={content.image_url[0].image_src} alt="图片" className="object-cover w-full h-full rounded-6" />
+          </div>
+        </div>
+      ) : (
+        <div className={`grid gap-3 ${content.image_url?.length === 4 ? 'grid-cols-2' : 'grid-cols-3'}`}>
+          {content.image_url?.map((img, index) => {
+            const total = content.image_url?.length || 0
+            const cols = total === 4 ? 2 : 3
+            const row = Math.floor(index / cols)
+            const col = index % cols
+            const lastRow = Math.floor((total - 1) / cols)
+            const firstRowLastCol = Math.min(cols, total) - 1
+            const lastRowLastCol = (total - 1) % cols
+
+            const cornerClasses = [
+              'overflow-hidden',
+              'relative',
+              'shadow-medium',
+              'aspect-square',
+              'rounded-2xl',
+              row === 0 && col === 0 ? 'rounded-tl-4xl' : '',
+              row === 0 && col === firstRowLastCol ? 'rounded-tr-4xl' : '',
+              row === lastRow && col === 0 ? 'rounded-bl-4xl' : '',
+              row === lastRow && col === lastRowLastCol ? 'rounded-br-4xl' : ''
+            ]
+              .filter(Boolean)
+              .join(' ')
+
+            return (
+              <div key={index} className={cornerClasses}>
+                <EnhancedImage src={img.image_src} alt={`图片${index + 1}`} className="object-cover  w-full h-full" />
+              </div>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * WORD类型原始内容组件
+ */
+const OriginalWordContent: React.FC<{ content: OriginalContentWord }> = ({ content }) => {
+  return (
+    <div className="px-12 py-8 mt-4 w-full rounded-8xl bg-surface-secondary">
+      <OriginalUserInfo
+        avatar_url={content.avatar_url}
+        frame={content.frame}
+        usernameMeta={content.usernameMeta}
+        create_time={content.create_time}
+        decoration_card={content.decoration_card}
+      />
+
+      <div className="py-4">
+        <div className="text-5xl leading-relaxed text-foreground wrap-break-word">
+          {content.text &&
+            renderRichTextToReact(content.text, {
+              at: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+              topic: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+              lottery: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+              webLink: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+              vote: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+              viewPicture: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+              iconScale: 0.8
+            })}
+        </div>
+      </div>
+      <BilibiliAdditionalCard additional={content.additional} gap={false} className="pb-4" />
+    </div>
+  )
+}
+
+/**
+ * LIVE_RCMD类型原始内容组件
+ */
+const OriginalLiveRcmdContent: React.FC<{ content: OriginalContentLiveRcmd }> = ({ content }) => {
+  return (
+    <div className="px-12 py-8 mt-4 w-full rounded-8xl bg-surface-secondary">
+      <OriginalUserInfo
+        avatar_url={content.avatar_url}
+        frame={content.frame}
+        usernameMeta={content.usernameMeta}
+        create_time={content.create_time}
+        decoration_card={content.decoration_card}
+      />
+
+      <div className="flex flex-col items-center py-11">
+        <div className="flex overflow-hidden relative flex-col items-center w-full rounded-10 aspect-video shadow-large">
+          <EnhancedImage src={content.cover} alt="直播封面" className="object-cover absolute w-full h-full rounded-3xl" />
+          <div className="absolute right-0 bottom-0 left-0 h-1/2 bg-linear-to-t to-transparent pointer-events-none from-black/75 rounded-3xl" />
+          <div className="absolute right-5 bottom-8 left-12 z-10 text-4xl font-light text-white select-text">
+            <span className="px-4 py-2 mr-3 text-3xl text-white bg-black/50 rounded-3xl">{content.area_name}</span>
+            {content.text_large}、在线: {content.online}
+          </div>
+        </div>
+      </div>
+
+      <div className="pl-8 text-6xl font-bold select-text text-foreground mb-8">
+        {content.title &&
+          renderRichTextToReact(content.title, {
+            at: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            topic: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            lottery: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            webLink: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            vote: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+            viewPicture: { className: 'text-[#006A9E] dark:text-[#58B0D5]' }
+          })}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * B站转发动态内容组件
+ */
+const BilibiliForwardContent: React.FC<BilibiliForwardDynamicData> = (props) => {
+  return (
+    <>
+      {/* 转发文本内容 */}
+      <div className="flex flex-col px-20 w-full">
+        <div className="relative items-center text-6xl tracking-wider wrap-break-word text-foreground leading-relaxed">
+          {props.text &&
+            renderRichTextToReact(props.text, {
+              at: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+              topic: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+              lottery: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+              webLink: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+              vote: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+              viewPicture: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+              iconScale: 0.8
+            })}
+        </div>
+        {props.imgList && props.imgList.length === 0 && <div className="h-15" />}
+      </div>
+
+      {props.imgList && props.imgList.length > 0 && (
+        <div className="flex flex-col items-center px-20 w-full">
+          {props.imgList.map((img, idx) => (
+            <React.Fragment key={`${img}-${idx}`}>
+              <div className="flex overflow-hidden relative flex-col items-center rounded-3xl shadow-large">
+                <EnhancedImage src={img} alt={`图片${idx + 1}`} className="object-contain w-full h-full rounded-3xl" />
+              </div>
+              <div className="h-10" />
+            </React.Fragment>
+          ))}
+        </div>
+      )}
+
+      {/* 原始内容 */}
+      <div className="flex px-20">
+        {props.original_content.DYNAMIC_TYPE_AV && <OriginalAVContent content={props.original_content.DYNAMIC_TYPE_AV} />}
+        {props.original_content.DYNAMIC_TYPE_DRAW && <OriginalDrawContent content={props.original_content.DYNAMIC_TYPE_DRAW} />}
+        {props.original_content.DYNAMIC_TYPE_WORD && <OriginalWordContent content={props.original_content.DYNAMIC_TYPE_WORD} />}
+        {props.original_content.DYNAMIC_TYPE_LIVE_RCMD && (
+          <OriginalLiveRcmdContent content={props.original_content.DYNAMIC_TYPE_LIVE_RCMD} />
+        )}
+      </div>
+    </>
+  )
+}
+
+/**
+ * B站转发动态组件
+ */
+export const BilibiliForwardDynamic: React.FC<PosterProps<BilibiliForwardDynamicData>> = React.memo((props) => {
+  return (
+    <DefaultLayout {...props}>
+      <div className="p-4">
+        {/* 间距 */}
+        <div className="h-25" />
+
+        {/* 用户信息 */}
+        <BilibiliDynamicUserInfo {...props.data} />
+
+        {/* 间距 */}
+        <div className="h-15" />
+
+        {/* 转发动态内容 */}
+        <BilibiliForwardContent {...props.data} />
+
+        {/* 间距 */}
+        <div className="h-25" />
+
+        {/* 动态状态 */}
+        <BilibiliDynamicStatus {...props.data} />
+
+        {/* 间距 */}
+        <div className="h-40" />
+
+        {/* 底部信息 */}
+        <BilibiliDynamicFooter {...props.data} useDarkTheme={isDark(props.ctx)} />
+      </div>
+    </DefaultLayout>
+  )
+})
+
+BilibiliForwardDynamic.displayName = 'BilibiliForwardDynamic'
+
+export default BilibiliForwardDynamic

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

@@ -0,0 +1,16 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+import type { RichTextDocument } from '@kkk/richtext'
+
+import type { BilibiliDynamicBaseData, BilibiliForwardOriginalContentProps } from '../../types'
+
+/**
+ * B站转发动态组件属性接口
+ */
+export interface BilibiliForwardDynamicData extends BilibiliDynamicBaseData {
+  /** 动态文本内容（富文本文档） */
+  text: RichTextDocument
+  /** 原始内容 */
+  original_content: BilibiliForwardOriginalContentProps['original_content']
+  /** 图片URL */
+  imgList: string[] | null
+}

package/src/ktr/template/bilibili/dynamic/DYNAMIC_TYPE_FORWARD/index.tsx

@@ -0,0 +1,12 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { BilibiliForwardDynamic } from './components/DYNAMIC_TYPE_FORWARD'
+import type { BilibiliForwardDynamicData } from './components/types'
+
+export default defineTemplate({
+  name: '转发动态',
+  description: 'B站转发动态展示模板',
+  component: BilibiliForwardDynamic,
+  validate: (data): data is BilibiliForwardDynamicData =>
+    typeof data === 'object' && data !== null && typeof (data as any).share_url === 'string'
+})

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

@@ -0,0 +1,264 @@
+import { extractRichTextPlainText, renderRichTextToReact } from '@kkk/richtext'
+import { Clock, Radio, UsersRound } from 'lucide-react'
+import React from 'react'
+
+// import { cn } from '../../../../../utils/cn'
+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 { EnhancedImage, UsernameDisplay } from '../../../components/shared'
+import type { BilibiliLiveDynamicData } from './types'
+
+/** B站品牌粉，直播状态徽章 / 脉冲灯 / 均衡器强调条统一使用，与封面取色无关。 */
+const LIVE_PINK = '#FB7299'
+
+/** 压在封面上的白色文字统一使用重投影，保证在任意封面亮度下可读（与弹幕层同策略）。 */
+const onCoverTextShadow: React.CSSProperties = {
+  textShadow: '0 4px 14px rgba(0,0,0,0.78), 0 0 4px rgba(0,0,0,0.9)'
+}
+
+/**
+ * 封面底部溶解遮罩：多段停靠点模拟 smoothstep，
+ * 让封面下缘无明显线性拐点地融入下方的氛围背景层。
+ */
+const coverMaskStyle: React.CSSProperties = {
+  maskImage:
+    'linear-gradient(to bottom, black 52%, rgba(0,0,0,0.9) 60%, rgba(0,0,0,0.68) 70%, rgba(0,0,0,0.35) 82%, rgba(0,0,0,0.1) 93%, transparent 100%)',
+  WebkitMaskImage:
+    'linear-gradient(to bottom, black 52%, rgba(0,0,0,0.9) 60%, rgba(0,0,0,0.68) 70%, rgba(0,0,0,0.35) 82%, rgba(0,0,0,0.1) 93%, transparent 100%)'
+}
+
+/**
+ * 全局氛围背景层：模糊封面 + 渐变遮罩 + 高对比杂色纹理。
+ * 背景色完全取自封面图本身，不再依赖后端取色。
+ */
+const LiveAmbientBackground: React.FC<{ cover: string; ctx: PosterProps<BilibiliLiveDynamicData>['ctx'] }> = React.memo(
+  ({ cover, ctx }) => (
+    <div className="pointer-events-none absolute inset-0 overflow-hidden select-none">
+      <AmbientCover src={cover} ctx={ctx} />
+
+      {/* 高对比杂色纹理层 */}
+      <div className="absolute inset-0 opacity-[0.45] mix-blend-overlay dark:mix-blend-soft-light">
+        <svg className="h-full w-full" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <filter id="liveRcmdNoise">
+              <feTurbulence type="fractalNoise" baseFrequency="1.4" 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="liveRcmdNoiseMask">
+              <linearGradient id="liveRcmdNoiseGradient" 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(#liveRcmdNoiseGradient)" />
+            </mask>
+          </defs>
+          <rect width="100%" height="100%" filter="url(#liveRcmdNoise)" mask="url(#liveRcmdNoiseMask)" fill="white" />
+        </svg>
+      </div>
+    </div>
+  )
+)
+
+LiveAmbientBackground.displayName = 'LiveAmbientBackground'
+
+/** 直播音频均衡器装饰条：直播模板的专属信号装饰。 */
+const LiveEqualizer: React.FC = React.memo(() => (
+  <div className="flex items-end gap-2.5 pb-4">
+    {[46, 88, 62, 98, 52].map((height, index) => (
+      <span
+        key={index}
+        className="w-2.5 rounded-full"
+        style={{
+          height: `${height}px`,
+          backgroundColor: index === 3 ? LIVE_PINK : 'rgba(255,255,255,0.88)',
+          boxShadow: '0 3px 12px rgba(0,0,0,0.55)'
+        }}
+      />
+    ))}
+  </div>
+))
+
+LiveEqualizer.displayName = 'LiveEqualizer'
+
+const stripHtmlTags = (content: string): string => {
+  return content.replace(/<[^>]+>/g, '').trim()
+}
+
+const getSingleLineFontSize = (content: string, base: number, min: number): number => {
+  const length = stripHtmlTags(content).length
+  if (length <= 4) return base
+  if (length <= 8) return base - 4
+  if (length <= 12) return base - 10
+  if (length <= 18) return base - 16
+  return min
+}
+
+export const BilibiliLiveDynamic: React.FC<PosterProps<BilibiliLiveDynamicData>> = React.memo((props) => {
+  const { data, ctx } = props
+  const dark = isDark(ctx)
+
+  // 面板允许数据文件缺字段，关键引用全部兜底，避免白屏
+  const usernameMeta = data.usernameMeta ?? { name: '', vipStatus: 0, nicknameColor: null }
+  const liveinf = data.liveinf ?? ''
+  const fans = data.fans ?? ''
+  const liveTitleLength = data.text ? extractRichTextPlainText(data.text).length : 0
+
+  const logo = dark ? '/image/bilibili/bilibili-light.png' : '/image/bilibili/bilibili.png'
+  const streamerName = usernameMeta.name
+  const streamerFontSize = getSingleLineFontSize(streamerName, 68, 42)
+  const liveInfoFontSize = getSingleLineFontSize(liveinf, 36, 26)
+  const followerFontSize = getSingleLineFontSize(`${fans} 粉丝`, 30, 24)
+  const liveTitleFontSize = liveTitleLength <= 16 ? 74 : liveTitleLength <= 28 ? 66 : liveTitleLength <= 44 ? 58 : 52
+
+  return (
+    <DefaultLayout {...props} className="relative overflow-hidden">
+      {/* 全局氛围层：模糊封面 + 高对比杂色 */}
+      {data.image_url && <LiveAmbientBackground cover={data.image_url} ctx={props.ctx} />}
+
+      <div className="relative z-10 flex flex-col">
+        {/* 封面：占满模板全宽，底部溶解进氛围层 */}
+        {data.image_url && (
+          <section className="relative">
+            <div className="overflow-hidden" style={coverMaskStyle}>
+              <EnhancedImage src={data.image_url} alt="直播封面" className="block h-auto w-full object-cover" />
+            </div>
+
+            {/* 底部直播状态：压在封面溶解区上，靠重投影保持可读 */}
+            <div className="absolute inset-x-0 bottom-0 flex items-end justify-between gap-10 px-16 pb-4" style={onCoverTextShadow}>
+              <div className="min-w-0">
+                <div className="inline-flex items-center gap-3 text-[20px] font-black tracking-[0.26em] uppercase text-white/85">
+                  <span className="h-3 w-3 animate-pulse rounded-full" style={{ backgroundColor: LIVE_PINK }} />
+                  <span>Now Live</span>
+                </div>
+                <div className="mt-2 flex items-end gap-7">
+                  <span className="text-[92px] leading-none font-black tracking-[-0.03em] whitespace-nowrap text-white select-text">
+                    正在开播
+                  </span>
+                  <LiveEqualizer />
+                </div>
+                <div className="mt-5 inline-flex max-w-full items-center gap-3 font-bold text-white/92">
+                  <Radio size={26} className="shrink-0" />
+                  <span className="min-w-0 select-text" style={{ fontSize: `${liveInfoFontSize}px` }}>
+                    {liveinf}
+                  </span>
+                </div>
+              </div>
+              <div className="shrink-0 pb-2 text-right font-mono text-white/85">
+                <div className="inline-flex items-center gap-3 text-[26px] font-bold whitespace-nowrap select-text">
+                  <Clock size={24} />
+                  <span>{data.create_time}</span>
+                </div>
+              </div>
+            </div>
+          </section>
+        )}
+
+        {/* 内容区：压在氛围层之上 */}
+        <section className="relative flex flex-col px-16 pt-14">
+          {/* 背景气氛字 */}
+          <div className="pointer-events-none absolute top-24 right-0 z-0 opacity-[0.05] select-none">
+            <div className="text-[190px] leading-[0.88] font-black tracking-tighter text-foreground">ON</div>
+            <div className="text-[190px] leading-[0.88] font-black tracking-tighter text-foreground">AIR</div>
+          </div>
+
+          {/* 直播标题：主视觉文本 */}
+          <h1
+            className="relative z-10 leading-[1.18] font-black tracking-[-0.02em] whitespace-pre-wrap text-foreground select-text"
+            style={{ fontSize: `${liveTitleFontSize}px`, wordBreak: 'break-word', overflowWrap: 'break-word' }}
+          >
+            {data.text &&
+              renderRichTextToReact(data.text, {
+                at: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                topic: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                lottery: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                webLink: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                vote: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                viewPicture: { className: 'text-[#006A9E] dark:text-[#58B0D5]' }
+              })}
+          </h1>
+
+          {/* 主播身份行 */}
+          <div className="relative z-10 mt-14 flex items-center justify-between gap-10">
+            <div className="flex min-w-0 items-center gap-7">
+              <div className="relative shrink-0">
+                <EnhancedImage src={data.avatar_url} alt="头像" className="h-36 w-36 rounded-full object-cover" isCircular />
+                {data.frame && <EnhancedImage src={data.frame} alt="头像框" className="absolute inset-0 scale-160" />}
+              </div>
+              <div className="min-w-0">
+                <div className="text-[20px] font-black tracking-[0.28em] uppercase text-muted">Live Streamer</div>
+                <div
+                  className="mt-3 truncate leading-none font-black tracking-[-0.03em] text-foreground select-text"
+                  style={{ fontSize: `${streamerFontSize}px` }}
+                >
+                  <UsernameDisplay metadata={usernameMeta} />
+                </div>
+                <div className="mt-4 inline-flex items-center gap-3 font-bold text-foreground/70">
+                  <UsersRound size={26} />
+                  <span className="select-text" style={{ fontSize: `${followerFontSize}px` }}>
+                    {fans} 粉丝
+                  </span>
+                </div>
+              </div>
+            </div>
+
+            <div className="shrink-0 text-right">
+              <div className="text-[20px] font-black tracking-[0.26em] uppercase text-muted">Signal Time</div>
+              <div className="mt-3 font-mono text-[30px] font-bold text-foreground/75 select-text">{data.now_time}</div>
+            </div>
+          </div>
+
+          {/* 底部：品牌 + 行动区 */}
+          <footer className="relative z-10 mt-16 flex items-end justify-between gap-14 pb-16">
+            <div className="min-w-0">
+              <img src={logo} alt="哔哩哔哩" className={`h-auto ${dark ? 'w-72' : 'w-108'}`} />
+              <div className="mt-5 text-[26px] font-bold text-muted select-text">你感兴趣的直播都在哔哩哔哩</div>
+              <div className="mt-4 flex flex-wrap items-center gap-x-5 gap-y-2 text-[22px] font-semibold text-foreground/50">
+                <span className="select-text">{data.dynamicTYPE}</span>
+                <span className="opacity-40">/</span>
+                <span className="font-mono select-text">{data.now_time}</span>
+              </div>
+            </div>
+
+            <div className="shrink-0 text-right">
+              <div className="text-[20px] font-black tracking-[0.24em] uppercase text-muted">Scan To Watch</div>
+              <div className="mt-2 text-[40px] leading-none font-black tracking-[-0.02em] text-foreground select-text">扫码进入直播间</div>
+              <div className="mt-6 flex justify-end">
+                {data.share_url ? (
+                  <QRCodeWithAvatar
+                    value={data.share_url}
+                    avatarUrl={data.avatar_url}
+                    useDarkTheme={dark}
+                    alt="二维码"
+                    className="h-72 w-72 object-contain drop-shadow-[0_20px_38px_rgba(0,0,0,0.18)]"
+                  />
+                ) : (
+                  <div className="flex h-72 w-72 items-center justify-center">
+                    <span className="text-[28px] text-muted">二维码</span>
+                  </div>
+                )}
+              </div>
+            </div>
+          </footer>
+        </section>
+      </div>
+    </DefaultLayout>
+  )
+})
+
+BilibiliLiveDynamic.displayName = 'BilibiliLiveDynamic'
+
+export default BilibiliLiveDynamic

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

@@ -0,0 +1,32 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+import type { RichTextDocument } from '@kkk/richtext'
+
+import type { UsernameMetadata } from '../../types'
+
+/**
+ * B站直播动态组件属性接口
+ */
+export interface BilibiliLiveDynamicData {
+  /** 直播封面 */
+  image_url: string
+  /** 直播标题 */
+  text: RichTextDocument
+  /** 直播房间信息（分区 | 房间号） */
+  liveinf: string
+  /** 用户名元数据 */
+  usernameMeta: UsernameMetadata
+  /** 用户头像URL */
+  avatar_url: string
+  /** 头像框 */
+  frame?: string
+  /** 粉丝数 */
+  fans: string
+  /** 时间信息 */
+  create_time: string
+  /** 直播开始时间 */
+  now_time: string
+  /** 分享和配置 */
+  share_url: string
+  /** 动态类型 */
+  dynamicTYPE: string
+}