koishi-plugin-kkk 1.0.0

package/src/ktr/template/bilibili/userlist/components/UserList.tsx

@@ -0,0 +1,246 @@
+import { FileText, Hash, Heart, Image as LucideImage, Radio, Share2, UserPlus, UsersRound, Video } from 'lucide-react'
+import React from 'react'
+
+import { isDark } from '../../../../utils/theme'
+import { DefaultLayout } from '../../../components/DefaultLayout'
+import type { PosterProps } from '../../../types/ctx'
+import { EnhancedImage } from '../../components/shared'
+import type { BilibiliUserListData } from './types'
+
+type BilibiliPushType = NonNullable<BilibiliUserListData['renderOpt'][number]['pushTypes']>[number]
+
+const pushTypeConfig: Record<BilibiliPushType, { label: string; color: string; icon: React.ComponentType<any> }> = {
+  video: { label: '投稿视频', color: 'bg-accent/6 text-accent/80 border-accent-soft', icon: Video },
+  draw: { label: '图文动态', color: 'bg-[#23ade5]/5 text-[#1a8fb8] border-[#23ade5]/12', icon: LucideImage },
+  word: { label: '纯文动态', color: 'bg-warning/5 text-warning/80 border-warning/12', icon: FileText },
+  live: { label: '直播动态', color: 'bg-success/5 text-success/80 border-success/12', icon: Radio },
+  forward: { label: '转发动态', color: 'bg-[#f97316]/5 text-[#cc6b1f] border-[#f97316]/12', icon: Share2 },
+  article: { label: '投稿专栏', color: 'bg-[#7c3aed]/5 text-[#6b4fa8] border-[#7c3aed]/12', icon: FileText }
+}
+
+/**
+ * B站用户项组件 - 工业风卡片设计 (V5: 语义化主题色重构)
+ */
+const BilibiliUserItem: React.FC<BilibiliUserListData['renderOpt'][number]> = (props) => {
+  const activePushTypes = new Set<BilibiliPushType>(props.pushTypes ?? (Object.keys(pushTypeConfig) as BilibiliPushType[]))
+
+  return (
+    <li className="relative group overflow-hidden rounded-4xl bg-surface/60 border border-border/50 backdrop-blur-xl shadow-xl">
+      {/* 渐进式模糊背景 - Progressive Blur Background */}
+      <div className="absolute inset-0 pointer-events-none z-0 overflow-hidden">
+        <EnhancedImage
+          src={props.avatar_img}
+          alt=""
+          className="w-full h-full object-cover opacity-20 blur-3xl scale-150 saturate-100 brightness-110"
+          style={{
+            maskImage: 'linear-gradient(135deg, black 0%, transparent 100%)',
+            WebkitMaskImage: 'linear-gradient(135deg, black 0%, transparent 100%)'
+          }}
+        />
+      </div>
+
+      {/* SVG 噪点 (作为卡片内层叠加) */}
+      <div className="absolute inset-0 pointer-events-none z-0 opacity-[0.08] mix-blend-overlay">
+        <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
+          <filter id="cardNoise" x="0%" y="0%" width="100%" height="100%">
+            <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" 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(#cardNoise)" />
+        </svg>
+      </div>
+
+      {/* 内容区域 */}
+      <div className="relative z-10 p-5 flex flex-col gap-4">
+        <div className="flex items-center gap-4">
+          {/* 左侧：头像与状态 */}
+          <div className="relative shrink-0">
+            {/* 头像容器 - 纯净玻璃态 */}
+            <div className="w-20 h-20 rounded-full p-1 bg-surface/20 backdrop-blur-md border border-border/30 shadow-lg">
+              <EnhancedImage src={props.avatar_img} alt="Avatar" className="w-full h-full rounded-full object-cover" />
+            </div>
+
+            {/* 状态徽章 - 扁平化/微立体 */}
+            <div
+              className={`absolute -bottom-1 -right-1 px-2.5 py-1 rounded-full border-2 border-background flex items-center gap-1.5 shadow-md ${
+                props.switch ? 'bg-success text-white' : 'bg-danger text-danger-foreground'
+              }`}
+            >
+              <div className={`w-1.5 h-1.5 rounded-full ${props.switch ? 'bg-white' : 'bg-border'}`} />
+              <span className="text-[10px] font-bold uppercase tracking-wider leading-none">{props.switch ? 'ON' : 'OFF'}</span>
+            </div>
+          </div>
+
+          {/* 右侧：信息主体 */}
+          <div className="flex-1 min-w-0">
+            {/* 名字 */}
+            <div>
+              <h3 className="text-[1.75rem] font-black tracking-tight text-foreground truncate drop-shadow-sm leading-none">
+                {props.username}
+              </h3>
+              <div className="flex items-center gap-2 mt-1">
+                <span className="px-2 py-0.5 rounded-md bg-surface border border-border text-xs font-mono font-bold text-muted flex items-center gap-1">
+                  <Hash size={12} className="opacity-70" />
+                  {props.host_mid}
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-[minmax(0,1.15fr)_minmax(0,0.95fr)] gap-3 items-stretch min-h-39">
+          <div className="grid grid-cols-3 gap-2 auto-rows-fr h-full">
+            {(Object.entries(pushTypeConfig) as [BilibiliPushType, (typeof pushTypeConfig)[BilibiliPushType]][]).map(([type, config]) => {
+              const isActive = activePushTypes.has(type)
+
+              return (
+                <div
+                  key={type}
+                  className={`h-full min-h-18.5 px-2.5 py-2.5 rounded-xl border backdrop-blur-sm flex flex-col justify-between transition-colors duration-200 ${
+                    isActive ? config.color : 'bg-surface/45 text-muted border-border/15'
+                  }`}
+                >
+                  <config.icon size={18} className={isActive ? '' : 'opacity-40'} />
+                  <span className="text-[13px] font-bold tracking-wide leading-tight">{config.label}</span>
+                </div>
+              )
+            })}
+          </div>
+
+          <div className="grid grid-rows-3 gap-2 h-full">
+            {[
+              { icon: UsersRound, value: props.fans, label: '粉丝' },
+              { icon: Heart, value: props.total_favorited, label: '获赞' },
+              { icon: UserPlus, value: props.following_count, label: '关注' }
+            ].map((item, index) => {
+              const StatIcon = item.icon
+              return (
+                <div
+                  key={index}
+                  className="h-full flex items-center gap-3 px-3.5 py-2.5 rounded-xl bg-surface-secondary/35 border border-border/35 backdrop-blur-sm"
+                >
+                  <StatIcon size={18} className="text-muted shrink-0" />
+                  <div className="flex items-baseline gap-2 flex-1 min-w-0">
+                    <span className="text-[15px] font-bold font-mono text-foreground truncate">{item.value}</span>
+                    <span className="text-xs text-muted font-medium shrink-0">{item.label}</span>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </li>
+  )
+}
+
+/**
+ * B站用户列表组件
+ */
+const BilibiliUserList: React.FC<PosterProps<BilibiliUserListData>> = (props) => {
+  const dark = isDark(props.ctx)
+
+  // 极简配色：主色(B站蓝) + 邻色(浅蓝/紫)
+  const primaryColor = dark ? '#23ade5' : '#00a1d6'
+  const secondaryColor = dark ? '#4f46e5' : '#60a5fa' // Indigo/Blue
+
+  return (
+    <DefaultLayout
+      {...props}
+      className="relative overflow-hidden bg-background"
+      style={{
+        width: '1440px',
+        minHeight: '600px'
+      }}
+    >
+      {/* 1. 弥散光背景层 - 极简单色系 */}
+      <div className="absolute inset-0 pointer-events-none z-0">
+        <div
+          className="absolute rounded-full w-350 h-350 -top-125 -left-100 blur-[150px] opacity-20 dark:opacity-10"
+          style={{
+            background: `radial-gradient(circle, ${primaryColor} 0%, transparent 70%)`
+          }}
+        />
+        <div
+          className="absolute rounded-full w-300 h-300 top-25 -right-100 blur-[140px] opacity-15 dark:opacity-10"
+          style={{
+            background: `radial-gradient(circle, ${secondaryColor} 0%, transparent 70%)`
+          }}
+        />
+      </div>
+
+      {/* 2. 全局噪点纹理 */}
+      <div className="absolute inset-0 pointer-events-none z-0 opacity-[0.08]">
+        <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
+          <filter id="globalNoise" x="0%" y="0%" width="100%" height="100%">
+            <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" 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(#globalNoise)" />
+        </svg>
+      </div>
+
+      {/* 3. 几何装饰 */}
+      <div className="absolute inset-0 pointer-events-none z-0">
+        <div className="absolute left-16 top-0 bottom-0 w-px bg-linear-to-b from-transparent via-border to-transparent" />
+        <div className="absolute top-0 right-0 p-16 opacity-10">
+          <svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg" className="text-foreground">
+            <circle cx="200" cy="200" r="199.5" stroke="currentColor" />
+            <circle cx="200" cy="200" r="149.5" stroke="currentColor" strokeDasharray="10 10" />
+            <circle cx="200" cy="200" r="99.5" stroke="currentColor" />
+            <path d="M200 0V400M0 200H400" stroke="currentColor" strokeWidth="0.5" />
+          </svg>
+        </div>
+      </div>
+
+      {/* 主要内容区域 */}
+      <div className="relative z-10 px-24 py-20 flex flex-col min-h-150">
+        {/* 极简头部 */}
+        <div className="flex justify-between items-end mb-16">
+          <div>
+            <div className="flex items-center gap-3 mb-4">
+              {/* 群头像 */}
+              <div className="w-10 h-10 rounded-xl overflow-hidden shadow-lg border border-border/30">
+                <EnhancedImage src={props.data.groupInfo.groupAvatar} alt="Group Avatar" className="w-full h-full object-cover" />
+              </div>
+              <span className="font-mono text-sm font-bold tracking-widest uppercase opacity-50 text-foreground">Subscriber List</span>
+            </div>
+            <h1 className="text-7xl font-black text-foreground tracking-tighter mb-2">{props.data.groupInfo.groupName}</h1>
+            <p className="font-mono text-xl opacity-40 text-foreground flex items-center gap-2">
+              <span>GROUP_ID</span>
+              <span className="w-12 h-px bg-current opacity-50" />
+              <span>{props.data.groupInfo.groupId}</span>
+            </p>
+          </div>
+
+          <div className="text-right">
+            {/* 字体黑白灰渐变 */}
+            <div className="text-8xl font-black text-transparent bg-clip-text bg-linear-to-b from-foreground to-muted leading-none">
+              {String(props.data.renderOpt.length).padStart(2, '0')}
+            </div>
+            <div className="text-sm font-bold tracking-[0.3em] uppercase opacity-40 mt-2 text-foreground">Total Users</div>
+          </div>
+        </div>
+
+        {/* 用户列表网格 - 调整为两列大卡片 */}
+        <ul className="grid grid-cols-2 gap-x-10 gap-y-10">
+          {props.data.renderOpt.map((user, index) => (
+            <BilibiliUserItem key={`${user.host_mid}-${index}`} {...user} />
+          ))}
+        </ul>
+      </div>
+    </DefaultLayout>
+  )
+}
+
+export default BilibiliUserList

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

@@ -0,0 +1,35 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+
+/**
+ * B站用户列表组件属性接口
+ */
+export interface BilibiliUserListData {
+  /** 群组信息 */
+  groupInfo: {
+    /** 群号 */
+    groupId: string
+    /** 群名称 */
+    groupName: string
+    /** 群头像 */
+    groupAvatar: string
+  }
+  /** 用户列表数据 */
+  renderOpt: {
+    /** 用户头像图片URL */
+    avatar_img: string
+    /** 用户名 */
+    username: string
+    /** 用户UID */
+    host_mid: string
+    /** 粉丝数 */
+    fans: string
+    /** 获赞总数 */
+    total_favorited: string
+    /** 关注数 */
+    following_count: string
+    /** 全局推送开关状态 */
+    switch: boolean
+    /** 推送类型列表 */
+    pushTypes?: ('video' | 'draw' | 'word' | 'live' | 'forward' | 'article')[]
+  }[]
+}

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

@@ -0,0 +1,11 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import type { BilibiliUserListData } from './components/types'
+import BilibiliUserList from './components/UserList'
+
+export default defineTemplate({
+  name: 'B站推送列表',
+  description: 'B站用户推送列表组件',
+  component: BilibiliUserList,
+  validate: (data): data is BilibiliUserListData => typeof data === 'object' && data !== null && Array.isArray((data as any).renderOpt)
+})

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

@@ -0,0 +1,28 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+import type { RichTextDocument } from '@kkk/richtext'
+
+import type { BilibiliHotDanmaku, BilibiliVideoOwner, BilibiliVideoStat } from '../../components/types'
+
+/**
+ * B站视频信息数据接口
+ */
+export interface BilibiliVideoInfoData {
+  /** 分享链接 */
+  share_url: string
+  /** 视频标题 */
+  title: string
+  /** 视频简介（富文本格式） */
+  desc: RichTextDocument
+  /** 统计数据 */
+  stat: BilibiliVideoStat
+  /** 视频BV号 */
+  bvid: string
+  /** 创建时间戳 */
+  ctime: number
+  /** 视频封面图片URL */
+  pic: string
+  /** UP主信息 */
+  owner: BilibiliVideoOwner
+  /** 出现次数最多的热门弹幕（可选，按次数降序） */
+  hotDanmaku?: BilibiliHotDanmaku[]
+}

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

@@ -0,0 +1,217 @@
+import { renderRichTextToReact } from '@kkk/richtext'
+import { format, fromUnixTime } from 'date-fns'
+import { Calendar } from 'lucide-react'
+import React from 'react'
+
+import { isDark } from '../../../../utils/theme'
+import { AmbientCover } from '../../../components/AmbientCover'
+import { DefaultLayout } from '../../../components/DefaultLayout'
+import { GlowText } from '../../../components/GlowImage'
+import type { PosterProps } from '../../../types/ctx'
+import { CoinIcon, CommentIcon, PlayIcon, ShareIcon, StarIcon, ThumbUpIcon } from '../../components/Icons'
+import { EnhancedImage } from '../../components/shared'
+import type { BilibiliHotDanmaku } from '../../components/types'
+import type { BilibiliVideoInfoData } from './types'
+
+const formatNumber = (num: number): string => {
+  if (num >= 10000) return `${(num / 10000).toFixed(1)}万`
+  return num.toLocaleString()
+}
+
+const coverMaskStyle: React.CSSProperties = {
+  maskImage: 'linear-gradient(to bottom, black 20%, transparent 100%)',
+  WebkitMaskImage: 'linear-gradient(to bottom, black 20%, transparent 100%)'
+}
+
+/**
+ * 全局氛围背景层：模糊封面 + 渐变遮罩 + 高对比杂色纹理
+ */
+const AmbientBackground: React.FC<{ pic: string; ctx: PosterProps<BilibiliVideoInfoData>['ctx'] }> = React.memo(({ pic, ctx }) => (
+  <div className="absolute inset-0 overflow-hidden">
+    <AmbientCover src={pic} ctx={ctx} />
+
+    {/* 高对比杂色纹理层 */}
+    <div className="absolute inset-0 pointer-events-none opacity-[0.45] mix-blend-overlay dark:mix-blend-soft-light">
+      <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+          <filter id="biliNoise">
+            <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="noiseMask">
+            <linearGradient id="noiseGradient" 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(#noiseGradient)" />
+          </mask>
+        </defs>
+        <rect width="100%" height="100%" filter="url(#biliNoise)" mask="url(#noiseMask)" fill="white" />
+      </svg>
+    </div>
+  </div>
+))
+
+AmbientBackground.displayName = 'AmbientBackground'
+
+const MAX_DANMAKU_ROWS = 4
+
+/**
+ * 封面弹幕层：模拟视频平台截图中的滚动弹幕轨道，行数由 MAX_DANMAKU_ROWS 控制。
+ */
+const DanmakuOverlay: React.FC<{ items: BilibiliHotDanmaku[] }> = React.memo(({ items }) => {
+  if (!items.length) return null
+
+  return (
+    <div
+      className="pointer-events-none absolute inset-x-0 top-0 z-20 overflow-hidden px-16"
+      style={{
+        height: `calc(${MAX_DANMAKU_ROWS} * 20rem)`,
+        maskImage: 'linear-gradient(to right, transparent 0, black 3rem, black calc(100% - 10rem), transparent 100%)',
+        WebkitMaskImage: 'linear-gradient(to right, transparent 0, black 3rem, black calc(100% - 10rem), transparent 100%)'
+      }}
+    >
+      {/* <div className="absolute inset-x-0 -top-10 bottom-0 bg-linear-to-b from-black/60 via-black/12 to-transparent" /> */}
+      <div className="relative pt-8 overflow-visible whitespace-normal text-[0] leading-16">
+        {items.map((item, index) => (
+          <span
+            key={`${item.content}-${index}`}
+            className="mr-20 inline-block shrink-0 whitespace-nowrap align-top text-4xl font-black leading-16 text-white"
+            style={{
+              marginLeft: index === 0 ? undefined : `${((index * 5 + item.content.length * 3) % 5) * 2}rem`,
+              opacity: Math.max(0.2, 1 - index * 0.025),
+              textShadow: '0 3px 8px rgba(0,0,0,0.85), 0 0 2px rgba(0,0,0,0.95)',
+              WebkitTextStroke: '1px rgba(0,0,0,0.58)'
+            }}
+          >
+            {item.content}
+          </span>
+        ))}
+      </div>
+    </div>
+  )
+})
+
+DanmakuOverlay.displayName = 'DanmakuOverlay'
+
+export const BilibiliVideoInfo: React.FC<PosterProps<BilibiliVideoInfoData>> = React.memo((props) => {
+  return (
+    <DefaultLayout {...props} className="relative overflow-hidden">
+      {/* 全局氛围层 */}
+      <AmbientBackground pic={props.data.pic} ctx={props.ctx} />
+
+      <div className="relative z-10">
+        {/* 封面：全宽，底部极轻微溶解，不接文字 */}
+        <div className="relative overflow-hidden" style={coverMaskStyle}>
+          <EnhancedImage src={props.data.pic} alt={props.data.title} className="object-cover w-full" placeholder="视频封面" />
+          {props.data.hotDanmaku && <DanmakuOverlay items={props.data.hotDanmaku} />}
+        </div>
+
+        {/* 内容区：压在封面溶解区域之上 */}
+        <div className="flex flex-col gap-10 px-16 pt-20">
+          {/* 标题区 */}
+          <div className="flex flex-col gap-5">
+            <h1 className="text-[80px] font-black leading-tight text-foreground tracking-tight">{props.data.title}</h1>
+            <div className="flex justify-between items-center gap-4">
+              <div className="flex items-center gap-6 text-3xl text-foreground/30">
+                {/* 时间 */}
+                <div className="flex items-center gap-2">
+                  <Calendar size={32} className="text-foreground/20" />
+                  <span>{format(fromUnixTime(props.data.ctime), 'yyyy-MM-dd HH:mm')}</span>
+                </div>
+                {/* 播放 */}
+                <span className="flex items-center gap-1.5">
+                  <PlayIcon size={28} className="text-foreground/20" />
+                  {formatNumber(props.data.stat.view)}
+                </span>
+                {/* 评论 */}
+                <span className="flex items-center gap-1.5">
+                  <CommentIcon variant="line" size={28} className="text-foreground/20" />
+                  {formatNumber(props.data.stat.reply)}
+                </span>
+              </div>
+              {/* BV号 */}
+              <span className="font-mono text-3xl text-foreground/30">稿件BV号：{props.data.bvid}</span>
+            </div>
+          </div>
+
+          {/* 视频简介 */}
+          {props.data.desc && (
+            <div className="text-5xl leading-relaxed text-foreground/75 pb-10">
+              {renderRichTextToReact(props.data.desc, {
+                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="flex justify-around items-center">
+            <div className="flex items-center gap-5 text-5xl">
+              <ThumbUpIcon size={90} className="text-foreground/30" />
+              <span className="tabular-nums text-foreground">{formatNumber(props.data.stat.like)}</span>
+            </div>
+            <div className="flex items-center gap-5 text-5xl">
+              <CoinIcon size={90} className="text-foreground/30" />
+              <span className="tabular-nums text-foreground">{formatNumber(props.data.stat.coin)}</span>
+            </div>
+            <div className="flex items-center gap-5 text-5xl">
+              <StarIcon size={90} className="text-foreground/30" />
+              <span className="tabular-nums text-foreground">{formatNumber(props.data.stat.favorite)}</span>
+            </div>
+            <div className="flex items-center gap-5 text-5xl">
+              <ShareIcon size={90} className="text-foreground/30" />
+              <span className="tabular-nums text-foreground">{formatNumber(props.data.stat.share)}</span>
+            </div>
+          </div>
+
+          <div />
+
+          {/* UP主信息：头像左，文字右，利用 flex 自然撑开宽度 */}
+          <div className="flex gap-10 items-center ml-6">
+            <div className="relative shrink-0 w-56 h-56 flex items-center justify-center">
+              <EnhancedImage
+                src={props.data.owner.face}
+                alt={props.data.owner.name}
+                className="object-cover w-44 h-44 rounded-full"
+                placeholder={props.data.owner.name.charAt(0)}
+                isCircular
+              />
+              {props.data.owner.frame && <EnhancedImage src={props.data.owner.frame} alt="头像框" className="absolute inset-0 scale-138" />}
+            </div>
+            <div className="flex flex-col gap-8 min-w-0 flex-1">
+              <GlowText glowStrength={isDark(props.ctx) ? 1 : 0}>
+                <p
+                  className="text-7xl font-bold truncate"
+                  style={props.data.owner.usernameMeta?.nicknameColor ? { color: props.data.owner.usernameMeta.nicknameColor } : undefined}
+                >
+                  {props.data.owner.usernameMeta?.name ?? props.data.owner.name}
+                </p>
+              </GlowText>
+              <p className="text-5xl text-scrollbar">UID: {props.data.owner.mid}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  )
+})
+
+BilibiliVideoInfo.displayName = 'BilibiliVideoInfo'
+
+export default BilibiliVideoInfo

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

@@ -0,0 +1,12 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import type { BilibiliVideoInfoData } from './components/types'
+import { BilibiliVideoInfo } from './components/videoInfo'
+
+export default defineTemplate({
+  name: '视频信息',
+  description: 'B站视频信息展示模板',
+  component: BilibiliVideoInfo,
+  validate: (data): data is BilibiliVideoInfoData =>
+    typeof data === 'object' && data !== null && typeof (data as any).share_url === 'string'
+})

package/src/ktr/template/components/AmbientCover.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+
+import type { PosterContext } from '../types/ctx'
+
+/**
+ * 氛围背景的封面色贡献默认参数。
+ * 生产渲染时 core 会把用户配置（app.ambientCover）经 ctx 注入覆盖这里；
+ * ktr 开发面板没有注入，直接使用这里的默认值。
+ * 封面色最终可见度 ≈ 封面层不透明度 × (1 − 压色罩对应位置不透明度)。
+ */
+/** 模糊封面层不透明度 (0~1)：封面色强度总闸，越大整体越浓 */
+export const AMBIENT_COVER_OPACITY = 0.7
+/** 主题色压色罩不透明度 (0~1)：edge 为顶/底两端，middle 为中间带；调小 middle 封面色更透 */
+export const AMBIENT_OVERLAY_OPACITY = { edge: 0.9, middle: 0.2 }
+
+/** 用 color-mix 生成三段压色渐变（0% / 50% / 100% 停靠点对应 edge / middle / edge） */
+const overlayGradient = (color: string, edge: number, middle: number) =>
+  `linear-gradient(to bottom, ` +
+  `color-mix(in oklab, ${color} ${edge * 100}%, transparent), ` +
+  `color-mix(in oklab, ${color} ${middle * 100}%, transparent), ` +
+  `color-mix(in oklab, ${color} ${edge * 100}%, transparent))`
+
+/**
+ * 氛围背景基础层：高斯模糊封面 + 主题色压色罩。
+ * 压色罩浅色用主题背景色、深色用纯黑（两个层按 dark 变体显隐），
+ * 各模板在此之上再叠加自己的杂色纹理层。
+ * 贡献度参数优先取 ctx.ambientCover（core 注入的用户配置），缺省用模块内默认值。
+ */
+export const AmbientCover: React.FC<{ src: string; ctx?: PosterContext }> = React.memo(({ src, ctx }) => {
+  const coverOpacity = ctx?.ambientCover?.coverOpacity ?? AMBIENT_COVER_OPACITY
+  const edge = ctx?.ambientCover?.overlayEdgeOpacity ?? AMBIENT_OVERLAY_OPACITY.edge
+  const middle = ctx?.ambientCover?.overlayMiddleOpacity ?? AMBIENT_OVERLAY_OPACITY.middle
+
+  return (
+    <>
+      <img
+        src={src}
+        alt=""
+        className="absolute inset-0 h-full w-full scale-150 object-cover blur-[120px] saturate-[1.8]"
+        style={{ opacity: coverOpacity }}
+        referrerPolicy="no-referrer"
+        crossOrigin="anonymous"
+      />
+      <div className="absolute inset-0 dark:hidden" style={{ background: overlayGradient('var(--background)', edge, middle) }} />
+      <div className="absolute inset-0 hidden dark:block" style={{ background: overlayGradient('#000', edge, middle) }} />
+    </>
+  )
+})
+
+AmbientCover.displayName = 'AmbientCover'