koishi-plugin-kkk 1.0.0

package/src/ktr/template/douyin/live/components/Live.tsx

@@ -0,0 +1,229 @@
+import { Eye, FileVideo, MapPin, Monitor, ShoppingBag, UserPlus, Users } from 'lucide-react'
+import React from 'react'
+
+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 { DouyinLikeIcon } from '../../components/Icons'
+import type { DouyinLiveData } from './types'
+
+const coverMaskStyle: React.CSSProperties = {
+  maskImage: 'linear-gradient(to bottom, transparent 0%, black 0, black 28%, transparent 100%)',
+  WebkitMaskImage: 'linear-gradient(to bottom, transparent 0%, black 0, black 28%, transparent 100%)'
+}
+
+/**
+ * 全局氛围背景层：模糊封面 + 渐变遮罩 + 高对比杂色纹理
+ */
+const AmbientBackground: React.FC<{ pic: string; ctx: PosterProps<DouyinLiveData>['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="douyinNoise">
+            <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(#douyinNoise)" mask="url(#noiseMask)" fill="white" />
+      </svg>
+    </div>
+  </div>
+))
+
+AmbientBackground.displayName = 'AmbientBackground'
+
+/**
+ * 封面组件 - 全宽铺满 + 双向渐变溶解 + LIVE大字
+ */
+const CoverSection: React.FC<{ imageUrl: string }> = ({ imageUrl }) => {
+  return (
+    <div className="relative">
+      <div style={coverMaskStyle}>
+        <img className="object-cover w-full" src={imageUrl} alt="直播封面" />
+      </div>
+      <div className="absolute right-20 top-20 pointer-events-none select-none">
+        <span className="text-7xl font-black tracking-[0.15em] uppercase text-white/20">直播中</span>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 直播信息组件
+ */
+const InfoSection: React.FC<{ data: DouyinLiveData }> = ({ data }) => {
+  return (
+    <div className="flex flex-col gap-8 px-16 pt-12">
+      {/* 直播标题 - 视觉锚点 */}
+      <h1 className="text-[80px] font-black leading-tight text-foreground tracking-tight select-text">{data.text}</h1>
+
+      {/* 直播中 + 分区 + 房间号 */}
+      <div className="flex items-center gap-4 text-3xl text-foreground/30">
+        <span className="text-danger/60 font-black tracking-wider text-[32px]">直播中</span>
+        <span>/</span>
+        <span>{data.partition_title}</span>
+        <span>/</span>
+        <span>房间号 {data.room_id}</span>
+      </div>
+
+      {/* 直播数据 */}
+      <div className="flex flex-wrap items-center gap-6 text-3xl text-foreground/30">
+        <span className="flex items-center gap-1.5">
+          <Users size={28} className="text-foreground/20" />
+          {data.online_viewers}在线
+        </span>
+        <span className="flex items-center gap-1.5">
+          <Eye size={28} className="text-foreground/20" />
+          {data.total_viewers}观看
+        </span>
+        <span className="flex items-center gap-1.5">
+          <DouyinLikeIcon size={28} />
+          {data.like_count}点赞
+        </span>
+        {data.resolution && (
+          <span className="flex items-center gap-1.5">
+            <Monitor size={28} className="text-foreground/20" />
+            {data.resolution}
+          </span>
+        )}
+        {data.has_commerce_goods && (
+          <span className="flex items-center gap-1.5">
+            <ShoppingBag size={28} className="text-foreground/20" />
+            带货中
+          </span>
+        )}
+      </div>
+
+      {/* 签名 */}
+      {data.signature && <div className="text-5xl leading-relaxed text-foreground/75 select-text">{data.signature}</div>}
+
+      {/* 城市 */}
+      {data.city && (
+        <div className="flex items-center gap-2 text-3xl text-foreground/30">
+          <MapPin size={28} className="text-foreground/20" />
+          <span>{data.city}</span>
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * 底部区域 - 主播信息 + 二维码 + 抖音Logo
+ */
+const BottomSection: React.FC<PosterProps<DouyinLiveData>> = ({ data, ctx }) => {
+  return (
+    <div className="flex justify-between items-end px-16 pt-24 pb-16">
+      {/* 左侧：主播信息 */}
+      <div className="flex flex-col gap-10">
+        <div className="flex gap-10 items-center">
+          <div className="relative shrink-0">
+            <div className="flex justify-center items-center bg-white rounded-full w-35 h-35">
+              <img src={data.avater_url} alt="头像" className="rounded-full w-33 h-33" />
+            </div>
+          </div>
+          <div className="flex flex-col gap-3">
+            <div className="text-7xl font-bold text-foreground select-text">@{data.username}</div>
+            <div className="flex items-center gap-3 text-4xl text-foreground/50">
+              <span className="text-foreground/50 font-black tracking-wider text-3xl">直播中</span>
+              <span className="text-foreground/40">·</span>
+              <Users size={32} />
+              <span className="select-text">{data.fans}粉丝</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex gap-6 text-3xl text-foreground/70">
+          <div className="flex flex-col gap-2 px-6 py-3 rounded-2xl bg-default/45">
+            <div className="flex items-center gap-2">
+              <FileVideo size={28} />
+              <span className="text-foreground/40">作品</span>
+            </div>
+            <span className="font-medium text-4xl select-text">{data.aweme_count}</span>
+          </div>
+          <div className="flex flex-col gap-2 px-6 py-3 rounded-2xl bg-default/45">
+            <div className="flex items-center gap-2">
+              <UserPlus size={28} />
+              <span className="text-foreground/40">关注</span>
+            </div>
+            <span className="font-medium text-4xl select-text">{data.following_count}</span>
+          </div>
+          <div className="flex flex-col gap-2 px-6 py-3 rounded-2xl bg-default/45">
+            <div className="flex items-center gap-2">
+              <DouyinLikeIcon size={28} />
+              <span className="text-foreground/40">获赞</span>
+            </div>
+            <span className="font-medium text-4xl select-text">{data.total_favorited}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* 右侧：抖音Logo + 二维码 */}
+      <div className="flex flex-col items-end gap-6">
+        <img
+          src={isDark(ctx) ? '/image/douyin/dylogo-light.svg' : '/image/douyin/dylogo-dark.svg'}
+          alt="抖音"
+          className="w-60 h-auto opacity-80 dark:opacity-70"
+        />
+        {data.share_url ? (
+          <QRCodeWithAvatar
+            value={data.share_url}
+            avatarUrl={data.avater_url}
+            useDarkTheme={isDark(ctx)}
+            alt="二维码"
+            className="h-auto w-75"
+          />
+        ) : (
+          <div className="flex justify-center items-center bg-surface w-75 h-75">
+            <span className="text-foreground/50">二维码</span>
+          </div>
+        )}
+        <span className="text-2xl text-foreground/50 select-text">扫码进入直播间</span>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 抖音直播组件
+ */
+export const DouyinLive: React.FC<PosterProps<DouyinLiveData>> = (props) => {
+  const d = props.data
+  const { ctx } = props
+
+  return (
+    <DefaultLayout {...props} className="relative overflow-hidden">
+      <AmbientBackground pic={d.image_url} ctx={ctx} />
+
+      <div className="relative z-10">
+        <CoverSection imageUrl={d.image_url} />
+        <InfoSection data={d} />
+        <BottomSection data={d} ctx={ctx} />
+      </div>
+    </DefaultLayout>
+  )
+}
+
+export default DouyinLive

package/src/ktr/template/douyin/live/components/types.ts

@@ -0,0 +1,47 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+
+/**
+ * 抖音直播组件属性接口
+ */
+export interface DouyinLiveData {
+  /** 直播封面图片URL */
+  image_url: string
+  /** 直播标题/描述 */
+  text: string
+  /** 直播分区标题 */
+  partition_title: string
+  /** 房间号 */
+  room_id: string
+  /** 总观看次数 */
+  total_viewers: string
+  /** 在线观众数 */
+  online_viewers: string
+  /** 用户头像URL */
+  avater_url: string
+  /** 用户名 */
+  username: string
+  /** 粉丝数 */
+  fans: string
+  /** 动态类型 */
+  dynamicTYPE: string
+  /** 分享链接 */
+  share_url: string
+  /** 点赞数 */
+  like_count: string
+  /** 在线人数文本 */
+  user_count_str: string
+  /** 直播分辨率 */
+  resolution: string
+  /** 主播签名 */
+  signature: string
+  /** 城市 */
+  city: string
+  /** 作品数 */
+  aweme_count: string
+  /** 关注数 */
+  following_count: string
+  /** 获赞数 */
+  total_favorited: string
+  /** 是否有商品 */
+  has_commerce_goods: boolean
+}

package/src/ktr/template/douyin/live/index.tsx

@@ -0,0 +1,11 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { DouyinLive } from './components/Live'
+import type { DouyinLiveData } from './components/types'
+
+export default defineTemplate({
+  name: '直播状态',
+  description: '抖音直播状态推送模板',
+  component: DouyinLive,
+  validate: (data): data is DouyinLiveData => typeof data === 'object' && data !== null && typeof (data as any).share_url === 'string'
+})

package/src/ktr/template/douyin/musicinfo/components/MusicInfo.tsx

@@ -0,0 +1,187 @@
+import { Hash, Maximize, Music, QrCode, UserPlus, Users } 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 { DouyinLikeIcon } from '../../components/Icons'
+import type { MusicAuthorInfoProps, MusicCoverProps, MusicInfoProps, MusicQRCodeProps } from '../../components/types'
+import type { DouyinMusicInfoData } from './types'
+
+/**
+ * 抖音Logo头部组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+const DouyinHeader: React.FC<{ useDarkTheme?: boolean }> = ({ useDarkTheme }) => {
+  return (
+    <div className="flex items-center px-12 py-15">
+      <div className="w-[39%] h-50 bg-cover bg-center bg-fixed">
+        <img
+          src={useDarkTheme ? '/image/douyin/dylogo-light.svg' : '/image/douyin/dylogo-dark.svg'}
+          alt="抖音Logo"
+          className="object-contain w-full h-full select-text"
+        />
+      </div>
+      <span className="text-[65px] ml-4 text-foreground select-text">记录美好生活</span>
+    </div>
+  )
+}
+
+/**
+ * 音乐封面组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+const MusicCoverSection: React.FC<MusicCoverProps> = ({ imageUrl }) => {
+  return (
+    <div className="flex flex-col items-center my-5">
+      <div className="flex flex-col items-center overflow-hidden shadow-large rounded-[25px] w-[90%] relative">
+        <img className="rounded-[25px] object-contain w-full h-full select-text" src={imageUrl} alt="音乐封面" />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 音乐信息组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+const MusicInfoSection: React.FC<MusicInfoProps & { desc: string }> = ({ desc, musicId, userCount, createTime }) => {
+  return (
+    <div className="flex flex-col px-16 py-5">
+      <div
+        className="text-[70px] font-bold leading-relaxed mb-9 text-foreground select-text"
+        style={{ letterSpacing: '1.5px', wordWrap: 'break-word' }}
+        dangerouslySetInnerHTML={{ __html: desc }}
+      />
+      <div className="flex flex-col gap-2 text-[45px] text-muted font-light mb-2.5">
+        <div className="flex gap-2 items-center select-text">
+          <Music className="w-11 h-11" />
+          <span>音乐ID: {musicId}</span>
+        </div>
+        <div className="flex gap-2 items-center select-text">
+          <Users className="w-11 h-11" />
+          <span>{userCount} 人使用过</span>
+        </div>
+      </div>
+      <div className="flex items-center gap-2 text-[45px] text-muted font-light select-text">
+        <Maximize className="w-11 h-11 text-muted" />
+        <span>图片生成于: {createTime}</span>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 音乐作者信息组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+const MusicAuthorInfoSection: React.FC<MusicAuthorInfoProps> = ({
+  avatarUrl,
+  username,
+  userShortId,
+  totalFavorited,
+  followingCount,
+  fans
+}) => {
+  return (
+    <div className="flex flex-col pl-16">
+      <div className="flex items-center mb-6">
+        <img src={avatarUrl} alt="头像" className="w-50 h-50 rounded-full mr-7 shadow-large select-text" />
+        <div className="flex flex-col">
+          <span className="text-[80px] font-bold text-foreground select-text">{username}</span>
+        </div>
+      </div>
+      <div className="flex flex-col text-[35px] mt-6 space-y-1 text-foreground select-text" style={{ letterSpacing: '2.5px' }}>
+        <div className="flex gap-2 items-center">
+          <Hash className="w-8 h-8" />
+          <span>ID: {userShortId}</span>
+        </div>
+        <div className="flex gap-2 items-center">
+          <DouyinLikeIcon size={32} />
+          <span>获赞: {totalFavorited}</span>
+        </div>
+        <div className="flex gap-2 items-center">
+          <UserPlus className="w-8 h-8" />
+          <span>关注: {followingCount}</span>
+        </div>
+        <div className="flex gap-2 items-center">
+          <Users className="w-8 h-" />
+          <span>粉丝: {fans}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 音乐二维码组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+const MusicQRCodeSection: React.FC<MusicQRCodeProps & { useDarkTheme?: boolean }> = ({ share_url, avatarUrl, useDarkTheme }) => {
+  return (
+    <div className="flex flex-col-reverse items-center -mb-12 mr-18">
+      <div className="flex items-center gap-2 text-[45px] text-right mt-5 text-muted select-text">
+        <QrCode className="w-11 h-11" />
+        <span>文件直链：永久有效</span>
+      </div>
+      <div className="p-2.5 rounded-sm border-[7px] border-dashed border-border">
+        <QRCodeWithAvatar
+          value={share_url}
+          avatarUrl={avatarUrl}
+          useDarkTheme={useDarkTheme}
+          alt="二维码"
+          className="w-87.5 h-87.5 select-text"
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 抖音音乐信息组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+export const DouyinMusicInfo: React.FC<PosterProps<DouyinMusicInfoData>> = (props) => {
+  const { data } = props
+
+  return (
+    <DefaultLayout {...props}>
+      <div>
+        <DouyinHeader useDarkTheme={isDark(props.ctx)} />
+
+        {/* 音乐封面 */}
+        <MusicCoverSection imageUrl={data.image_url} description={data.desc} />
+        <div className="h-22.5" />
+
+        {/* 音乐信息 */}
+        <MusicInfoSection desc={data.desc} musicId={data.music_id} userCount={data.user_count} createTime={data.create_time} />
+        <div className="h-25" />
+
+        {/* 底部文字 */}
+        <div className="text-[70px] text-right mr-21 -mb-11 z-[-1] text-muted select-text">抖音音乐信息</div>
+
+        {/* 用户信息和二维码 */}
+        <div className="flex justify-between items-center px-0 pt-25">
+          <MusicAuthorInfoSection
+            avatarUrl={data.avater_url}
+            username={data.username}
+            userShortId={data.user_shortid}
+            totalFavorited={data.total_favorited}
+            followingCount={data.following_count}
+            fans={data.fans}
+          />
+          <MusicQRCodeSection share_url={data.share_url} avatarUrl={data.avater_url} useDarkTheme={isDark(props.ctx)} />
+        </div>
+      </div>
+    </DefaultLayout>
+  )
+}
+
+export default DouyinMusicInfo

package/src/ktr/template/douyin/musicinfo/components/types.ts

@@ -0,0 +1,31 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+
+/**
+ * 抖音音乐信息组件属性接口
+ */
+export interface DouyinMusicInfoData {
+  /** 音乐封面图片URL */
+  image_url: string
+  /** 音乐描述/标题 */
+  desc: string
+  /** 音乐ID */
+  music_id: string
+  /** 创建时间 */
+  create_time: string
+  /** 使用该音乐的用户数量 */
+  user_count: string
+  /** 用户头像URL */
+  avater_url: string
+  /** 用户名 */
+  username: string
+  /** 用户短ID */
+  user_shortid: string
+  /** 获赞数 */
+  total_favorited: number
+  /** 关注数 */
+  following_count: number
+  /** 粉丝数 */
+  fans: number
+  /** 分享链接 */
+  share_url: string
+}

package/src/ktr/template/douyin/musicinfo/index.tsx

@@ -0,0 +1,11 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { DouyinMusicInfo } from './components/MusicInfo'
+import type { DouyinMusicInfoData } from './components/types'
+
+export default defineTemplate({
+  name: '音乐信息',
+  description: '抖音音乐信息展示模板',
+  component: DouyinMusicInfo,
+  validate: (data): data is DouyinMusicInfoData => typeof data === 'object' && data !== null && typeof (data as any).share_url === 'string'
+})