koishi-plugin-kkk 1.0.0

package/src/ktr/template/douyin/image-work/components/ImageWork.tsx

@@ -0,0 +1,437 @@
+import { extractRichTextPlainText, renderRichTextToReact, type RichTextRenderOptions } from '@kkk/richtext'
+import { ImageIcon, MapPinIcon, MusicNoteIcon, UserPlusIcon, UsersIcon, UsersThreeIcon, VideoCameraIcon } from '@phosphor-icons/react'
+import { format, formatDistanceToNow, fromUnixTime } from 'date-fns'
+import { zhCN } from 'date-fns/locale'
+import { Clock3, Hash } from 'lucide-react'
+import React from 'react'
+
+import { DefaultLayout } from '../../../components/DefaultLayout'
+import { AmbientCover } from '../../../components/AmbientCover'
+import { GlowImage } from '../../../components/GlowImage'
+import { QRCodeWithAvatar } from '../../../components/QRCodeWithAvatar'
+import type { PosterProps } from '../../../types/ctx'
+import { cn } from '../../../../utils/cn'
+import { isDark } from '../../../../utils/theme'
+import { DouyinCommentIcon, DouyinFavoriteIcon, DouyinLikeIcon, DouyinShareIcon } from '../../components/Icons'
+import type { DouyinImageWorkData } from './types'
+
+/** 单张媒体的类型，从总数据类型里逐步取，不再单独导出。 */
+type ImageMediaType = DouyinImageWorkData['image_list']['images'][number]['media_type']
+
+const LivePhotoIcon: React.FC<{ size?: number; className?: string; weight?: 'fill' }> = ({ size = 28, className }) => (
+  <svg
+    width={size}
+    height={size}
+    viewBox="0 0 100 100"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    aria-hidden="true"
+  >
+    <circle cx="50" cy="50" r="37" stroke="currentColor" strokeWidth="6" strokeDasharray="2 9" strokeLinecap="round" />
+    <circle cx="50" cy="50" r="25" stroke="currentColor" strokeWidth="6" />
+    <circle cx="50" cy="50" r="10" fill="currentColor" />
+  </svg>
+)
+
+const imageMediaTypeMeta = {
+  static: { label: '图片', icon: ImageIcon },
+  live: { label: '实况', icon: LivePhotoIcon },
+  clip: { label: '短片', icon: VideoCameraIcon }
+} satisfies Record<
+  ImageMediaType,
+  {
+    label: string
+    icon: React.FC<{ size?: number; className?: string; weight?: 'fill' }>
+  }
+>
+
+const getTitleClassName = (titleLength: number): string => {
+  if (titleLength > 96) return 'text-[42px] leading-[1.34]'
+  if (titleLength > 72) return 'text-[48px] leading-[1.3]'
+  if (titleLength > 48) return 'text-[54px] leading-[1.26]'
+  return 'text-[62px] leading-[1.18]'
+}
+
+/**
+ * 多段透明度停靠点用于模拟 smoothstep，让封面从环境柔光进入清晰主体时没有明显的线性渐变拐点。
+ */
+const ambientCoverMask =
+  'linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.08) 6%, rgba(0,0,0,0.32) 16%, rgba(0,0,0,0.68) 28%, black 42%, black 58%, rgba(0,0,0,0.68) 72%, rgba(0,0,0,0.32) 84%, rgba(0,0,0,0.08) 94%, transparent 100%)'
+
+const foregroundCoverMask =
+  'linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.1) 4%, rgba(0,0,0,0.35) 10%, rgba(0,0,0,0.68) 17%, rgba(0,0,0,0.9) 23%, black 30%, black 70%, rgba(0,0,0,0.9) 77%, rgba(0,0,0,0.68) 83%, rgba(0,0,0,0.35) 90%, rgba(0,0,0,0.1) 96%, transparent 100%)'
+
+const getCoverUrl = (data: DouyinImageWorkData): string | undefined => data.image_list.images[0]?.url
+
+const DouyinDiffuseBackground: React.FC<PosterProps<DouyinImageWorkData>> = ({ data, ctx }) => {
+  const coverUrl = getCoverUrl(data)
+
+  return (
+    <div className="pointer-events-none absolute inset-0 overflow-hidden select-none">
+      {coverUrl && <AmbientCover src={coverUrl} ctx={ctx} />}
+
+      <div className="absolute inset-0 opacity-[0.35] mix-blend-overlay dark:mix-blend-soft-light">
+        <svg className="h-full w-full" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <filter id="douyinImageWorkNoise">
+              <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch" />
+              <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>
+              <feComponentTransfer>
+                <feFuncA type="linear" slope="2" intercept="-0.5" />
+              </feComponentTransfer>
+            </filter>
+          </defs>
+          <rect width="100%" height="100%" filter="url(#douyinImageWorkNoise)" mask="url(#douyinImageWorkNoiseMask)" fill="white" />
+        </svg>
+      </div>
+    </div>
+  )
+}
+
+const DouyinPosterHeader: React.FC<PosterProps<DouyinImageWorkData>> = ({ data, ctx }) => {
+  const { avater_url, username, create_time, ip_location } = data
+  const dark = isDark(ctx)
+  const publishTime = formatDistanceToNow(fromUnixTime(create_time), {
+    addSuffix: true,
+    locale: zhCN
+  })
+
+  return (
+    <header className="flex items-start justify-between gap-14">
+      <div className="flex min-w-0 items-center gap-6">
+        <img
+          src={avater_url}
+          alt="头像"
+          className="h-24 w-24 shrink-0 rounded-full object-cover shadow-2xl"
+          referrerPolicy="no-referrer"
+          crossOrigin="anonymous"
+        />
+        <div className="min-w-0">
+          <div className="max-w-165 truncate text-[44px] font-black leading-tight text-foreground select-text">{username}</div>
+          <div className="mt-3 flex flex-wrap items-center gap-x-5 gap-y-2 text-[30px] text-muted">
+            <span className="inline-flex items-center gap-2">
+              <Clock3 size={28} />
+              <span className="select-text">{publishTime}</span>
+            </span>
+            {ip_location && (
+              <span className="inline-flex items-center gap-2">
+                <MapPinIcon size={30} weight="fill" />
+                <span className="select-text">{ip_location}</span>
+              </span>
+            )}
+          </div>
+        </div>
+      </div>
+      <img
+        src={dark ? '/image/douyin/dylogo-light.svg' : '/image/douyin/dylogo-dark.svg'}
+        alt="抖音"
+        className="mt-2 h-17 w-auto shrink-0 object-contain opacity-90"
+      />
+    </header>
+  )
+}
+
+const DouyinPosterTitle: React.FC<PosterProps<DouyinImageWorkData>> = ({ data }) => {
+  const { title, desc } = data
+  const hasTitle = Boolean(title?.nodes.length)
+  const hasDesc = Boolean(desc?.nodes.length)
+  const titleLength = title ? extractRichTextPlainText(title).length : 0
+  const titleClassName = getTitleClassName(titleLength)
+  const richTextOptions: RichTextRenderOptions = {
+    hashtag: {
+      className: cn('text-inherit opacity-60', !hasTitle && 'text-6xl')
+    },
+    mention: {
+      className: 'text-inherit'
+    }
+  }
+
+  if (!hasTitle && !hasDesc) {
+    return <h1 className="mt-14 text-[68px] font-black leading-[1.16] text-foreground select-text">抖音图文作品</h1>
+  }
+
+  return (
+    <section className="mt-13">
+      {hasTitle && title && (
+        <h1
+          className={`${titleClassName} font-bold text-foreground select-text`}
+          style={{ wordBreak: 'break-word', overflowWrap: 'break-word' }}
+        >
+          {renderRichTextToReact(title, richTextOptions)}
+        </h1>
+      )}
+      {hasDesc && (
+        <div
+          className={cn('mt-7 whitespace-pre-wrap select-text', !hasTitle ? 'text-6xl font-bold' : 'text-5xl font-medium', 'leading-tight')}
+          style={{ wordBreak: 'break-word', overflowWrap: 'break-word' }}
+        >
+          {renderRichTextToReact(desc, richTextOptions)}
+        </div>
+      )}
+    </section>
+  )
+}
+
+const DouyinImageCover: React.FC<PosterProps<DouyinImageWorkData>> = ({ data }) => {
+  const { image_list, music } = data
+  const cover = image_list.images[0]
+  if (!cover?.url) return null
+
+  const totalCount = image_list.total_count || image_list.images.length
+  const mediaType = cover.media_type ?? 'static'
+  const mediaMeta = imageMediaTypeMeta[mediaType]
+  const MediaIcon = mediaMeta.icon
+  const previewImages = image_list.images.slice(1, 4).filter((image) => image.url)
+  const remainingPreviewCount = Math.max(totalCount - previewImages.length - 1, 0)
+
+  return (
+    <section className="relative -mx-20 mt-12 overflow-visible">
+      <div
+        className="absolute -inset-x-20 -inset-y-32 z-0 overflow-hidden"
+        style={{
+          maskImage: ambientCoverMask,
+          WebkitMaskImage: ambientCoverMask
+        }}
+      >
+        <img
+          src={cover.url}
+          alt=""
+          className="h-full w-full scale-[1.16] object-cover opacity-48 blur-[72px] saturate-[1.2]"
+          referrerPolicy="no-referrer"
+          crossOrigin="anonymous"
+        />
+      </div>
+
+      <img
+        src={cover.url}
+        alt="图文封面"
+        className="relative z-10 block h-auto w-full drop-shadow-xl"
+        style={{
+          maskImage: foregroundCoverMask,
+          WebkitMaskImage: foregroundCoverMask
+        }}
+        referrerPolicy="no-referrer"
+        crossOrigin="anonymous"
+      />
+
+      <div className="absolute left-24 top-12 z-30 flex items-center gap-4 text-foreground/85">
+        <MediaIcon size={72} weight="fill" />
+        <span className="text-[34px] font-black select-text">{mediaMeta.label}</span>
+      </div>
+
+      {previewImages.length > 0 && (
+        <div className="absolute right-24 top-8 z-30 flex items-center -space-x-5 drop-shadow-2xl">
+          {previewImages.map((image, index) => (
+            <img
+              key={`${image.url}-${index}`}
+              src={image.url}
+              alt="图文预览"
+              className="h-28 w-28 rounded-3xl object-cover ring-2 ring-white/25"
+              style={{ transform: `rotate(${(index - 1) * 8}deg)` }}
+              referrerPolicy="no-referrer"
+              crossOrigin="anonymous"
+            />
+          ))}
+          {remainingPreviewCount > 0 && (
+            <div className="flex h-28 w-28 items-center justify-center rounded-3xl backdrop-blur-xs bg-black/50 px-5 text-[32px] font-black text-white ring-2 ring-white/25">
+              +{remainingPreviewCount}
+            </div>
+          )}
+        </div>
+      )}
+
+      <div className="absolute bottom-12 right-24 z-30 flex items-center gap-5 text-foreground/85">
+        <span className="text-[34px] font-black tabular-nums">共 {totalCount} 张</span>
+      </div>
+
+      {music && (
+        <div className="absolute bottom-12 left-24 z-30 flex max-w-212.5 items-center gap-5 text-foreground/85">
+          {music.cover ? (
+            <div className="relative h-20 w-20 shrink-0">
+              <GlowImage glowStrength={1} blurRadius={20}>
+                <img
+                  src={music.cover}
+                  alt="BGM封面"
+                  className="relative z-10 h-full w-full rounded-2xl object-cover"
+                  referrerPolicy="no-referrer"
+                  crossOrigin="anonymous"
+                />
+              </GlowImage>
+            </div>
+          ) : (
+            <MusicNoteIcon size={44} weight="fill" className="shrink-0" />
+          )}
+          <div className="min-w-0">
+            <div className="truncate text-[36px] font-black leading-tight select-text">{music.title}</div>
+            <div className="truncate text-[27px] font-semibold text-foreground/60 select-text">{music.author}</div>
+          </div>
+        </div>
+      )}
+    </section>
+  )
+}
+
+const DouyinSignalLine: React.FC<PosterProps<DouyinImageWorkData>> = ({ data }) => {
+  const { dianzan, pinglun, shouchang, share, suggest_word } = data
+  const renderTime = format(new Date(), 'yyyy-MM-dd HH:mm:ss')
+  const stats = [
+    { icon: DouyinLikeIcon, value: dianzan, label: '点赞' },
+    { icon: DouyinCommentIcon, value: pinglun, label: '评论' },
+    { icon: DouyinFavoriteIcon, value: shouchang, label: '收藏' },
+    { icon: DouyinShareIcon, value: share, label: '分享' }
+  ]
+
+  return (
+    <section className="mt-12">
+      <div className="flex flex-wrap items-end gap-x-16 gap-y-8">
+        {stats.map((stat) => {
+          const Icon = stat.icon
+          return (
+            <div key={stat.label} className="min-w-37.5">
+              <div className="flex items-center gap-3 text-[28px] font-semibold text-muted">
+                <Icon size={36} weight="fill" className="text-foreground/80" />
+                <span>{stat.label}</span>
+              </div>
+              <div className="mt-2 text-[64px] font-black leading-none text-foreground tabular-nums select-text">{stat.value}</div>
+            </div>
+          )
+        })}
+      </div>
+      <div className="mt-8 flex min-w-0 flex-col gap-3 text-[29px] leading-[1.45] text-muted">
+        {suggest_word && (
+          <div className="min-w-0 truncate select-text">
+            <span>{suggest_word.hint_text}</span>
+            <span className="ml-2 font-black text-foreground">{suggest_word.word}</span>
+          </div>
+        )}
+        <div className="flex items-center gap-3">
+          <span className="select-text">图片生成于: {renderTime}</span>
+        </div>
+      </div>
+    </section>
+  )
+}
+
+const DouyinCoCreatorList: React.FC<PosterProps<DouyinImageWorkData> & { coCreatorCount: number }> = ({ data, coCreatorCount }) => {
+  const allCreators = data.cooperation_info?.co_creators ?? []
+  const creators = allCreators.filter((creator) => creator.nickname !== data.username)
+  if (creators.length === 0) return null
+
+  const visibleCreators = creators.slice(0, 8)
+  const hasSubscriberInList = allCreators.some((creator) => creator.nickname === data.username)
+  const remainingCount = Math.max(coCreatorCount - visibleCreators.length - (hasSubscriberInList ? 1 : 0), 0)
+
+  return (
+    <section className="mt-16">
+      <div className="flex items-center gap-3 text-[34px] font-black text-foreground">
+        <UsersIcon size={42} weight="fill" className="text-foreground/80" />
+        <span>共 {coCreatorCount} 人共创</span>
+      </div>
+      <div className="mt-6 flex min-w-0 flex-wrap items-center gap-x-10 gap-y-6 overflow-hidden">
+        {visibleCreators.map((creator, index) => (
+          <div key={`${creator.nickname || 'creator'}-${index}`} className="flex min-w-0 max-w-77.5 items-center gap-4">
+            <img
+              src={creator.avatar_url || data.avater_url}
+              alt="共创者头像"
+              className="h-18 w-18 shrink-0 rounded-full object-cover shadow-xl"
+              referrerPolicy="no-referrer"
+              crossOrigin="anonymous"
+            />
+            <div className="min-w-0">
+              <div className="truncate text-[28px] font-black leading-tight text-foreground select-text">
+                {creator.nickname || '未提供'}
+              </div>
+              <div className="mt-1 truncate text-[23px] font-semibold text-muted select-text">{creator.role_title || '共创者'}</div>
+            </div>
+          </div>
+        ))}
+        {remainingCount > 0 && <div className="text-[32px] font-black text-muted">剩余 {remainingCount} 个...</div>}
+      </div>
+    </section>
+  )
+}
+
+const DouyinPosterFooter: React.FC<PosterProps<DouyinImageWorkData>> = ({ data, ctx }) => {
+  const { avater_url, username, 抖音号, 获赞, 关注, 粉丝, share_url } = data
+  const dark = isDark(ctx)
+  const stats = [
+    { icon: DouyinLikeIcon, iconSize: 26, label: '获赞', value: 获赞 },
+    { icon: UserPlusIcon, iconSize: 32, label: '关注', value: 关注 },
+    { icon: UsersThreeIcon, iconSize: 32, label: '粉丝', value: 粉丝 }
+  ]
+
+  return (
+    <footer className="mt-10 flex items-start justify-between gap-16">
+      <div className="min-w-0 flex-1 pt-10">
+        <div className="flex items-center gap-6">
+          <img
+            src={avater_url}
+            alt="头像"
+            className="h-26 w-26 shrink-0 rounded-full object-cover shadow-xl"
+            referrerPolicy="no-referrer"
+            crossOrigin="anonymous"
+          />
+          <div className="min-w-0">
+            <div className="max-w-162.5 truncate text-[48px] font-black leading-tight text-foreground select-text">{username}</div>
+            <div className="mt-3 flex items-center gap-2 text-[30px] text-muted">
+              <Hash size={28} />
+              <span className="truncate select-text">抖音号: {抖音号}</span>
+            </div>
+          </div>
+        </div>
+
+        <div className="mt-10 flex flex-wrap gap-x-14 gap-y-6">
+          {stats.map((stat) => {
+            const Icon = stat.icon
+            return (
+              <div key={stat.label} className="min-w-37.5">
+                <div className="flex items-center gap-3 text-[25px] font-semibold text-muted">
+                  <Icon size={stat.iconSize} weight="fill" className="text-foreground/80" />
+                  <span>{stat.label}</span>
+                </div>
+                <div className="mt-2 text-[32px] font-black leading-none text-foreground select-text">{stat.value}</div>
+              </div>
+            )
+          })}
+        </div>
+      </div>
+
+      <div className="shrink-0 text-center">
+        <div className="drop-shadow-2xl">
+          <QRCodeWithAvatar value={share_url} avatarUrl={avater_url} useDarkTheme={dark} alt="二维码" className="h-75 w-75" />
+        </div>
+        <div className="mt-2 text-[28px] font-black text-foreground/80">扫码查看作品详情</div>
+      </div>
+    </footer>
+  )
+}
+
+export const DouyinImageWork: React.FC<PosterProps<DouyinImageWorkData>> = React.memo((props) => {
+  const coCreatorCount = props.data.cooperation_info?.co_creator_nums ?? props.data.cooperation_info?.co_creators?.length ?? undefined
+  const hasCoCreators = !!coCreatorCount && coCreatorCount > 0
+
+  return (
+    <DefaultLayout {...props} className="relative overflow-hidden">
+      <DouyinDiffuseBackground {...props} />
+
+      <section className="relative z-10 px-20 pt-18">
+        <DouyinPosterHeader {...props} />
+        <DouyinPosterTitle {...props} />
+        <DouyinImageCover {...props} />
+        <DouyinSignalLine {...props} />
+        {hasCoCreators && <DouyinCoCreatorList {...props} coCreatorCount={coCreatorCount} />}
+        <DouyinPosterFooter {...props} />
+      </section>
+    </DefaultLayout>
+  )
+})
+
+DouyinImageWork.displayName = 'DouyinImageWork'
+
+export default DouyinImageWork

package/src/ktr/template/douyin/image-work/components/types.ts

@@ -0,0 +1,78 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+import type { RichTextDocument } from '@kkk/richtext'
+
+/** 抖音图文中单张媒体的类型。组件内需要时从总类型逐步取：DouyinImageWorkData['image_list']['images'][number]['media_type'] */
+type DouyinImageMediaType = 'static' | 'live' | 'clip'
+
+/**
+ * 抖音图文作品组件属性接口
+ */
+export interface DouyinImageWorkData {
+  /** 图文图片列表（首项为封面；组件从索引 1 起最多展示 3 张预览图） */
+  image_list: {
+    /** 图片列表，按原始顺序排列 */
+    images: Array<{
+      /** 图片 URL */
+      url: string
+      /** 媒体类型 */
+      media_type: DouyinImageMediaType
+    }>
+    /** 作品总图片数（包含封面） */
+    total_count: number
+  }
+  /** 标题（从描述中按首个句号拆分，含有效 @ 用户与 topic 节点） */
+  title?: RichTextDocument
+  /** 描述内容（去除标题后的正文，含有效 @ 用户、topic/lineBreak 节点） */
+  desc: RichTextDocument
+  /** IP 属地 */
+  ip_location?: string
+  /** 热点搜索词 */
+  suggest_word?: {
+    hint_text: string
+    word: string
+  }
+  /** 背景音乐信息 */
+  music?: {
+    /** 音乐作者 */
+    author: string
+    /** 音乐标题 */
+    title: string
+    /** 音乐封面 URL */
+    cover?: string
+  }
+  /** 点赞数 */
+  dianzan: string
+  /** 评论数 */
+  pinglun: string
+  /** 收藏数 */
+  shouchang: string
+  /** 分享数 */
+  share: string
+  /** 创建时间（Unix 时间戳，秒） */
+  create_time: number
+  /** 用户头像URL */
+  avater_url: string
+  /** 用户名 */
+  username: string
+  /** 抖音号 */
+  抖音号: string
+  /** 获赞数 */
+  获赞: string
+  /** 关注数 */
+  关注: string
+  /** 粉丝数 */
+  粉丝: string
+  /** 分享链接 */
+  share_url: string
+  /** 动态类型 */
+  dynamicTYPE?: string
+  /** 合作信息 */
+  cooperation_info?: {
+    co_creator_nums: number
+    co_creators: Array<{
+      avatar_url?: string
+      nickname: string
+      role_title: string
+    }>
+  }
+}

package/src/ktr/template/douyin/image-work/index.tsx

@@ -0,0 +1,11 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { DouyinImageWork } from './components/ImageWork'
+import type { DouyinImageWorkData } from './components/types'
+
+export default defineTemplate({
+  name: '图文作品',
+  description: '抖音图文作品解析与推送模板',
+  component: DouyinImageWork,
+  validate: (data): data is DouyinImageWorkData => typeof data === 'object' && data !== null && typeof (data as any).share_url === 'string'
+})