koishi-plugin-kkk 1.0.0

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

@@ -0,0 +1,85 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+import type { RichTextDocument } from '@kkk/richtext'
+
+import type { DouyinSubComment } from '../../components/types'
+
+/**
+ * 抖音评论模板数据
+ */
+export interface DouyinCommentData {
+  /** 作品类型：视频/图集/合辑/文章 */
+  Type: '视频' | '图集' | '合辑' | '文章'
+  /** 评论数量 */
+  CommentLength: number
+  /** 视频大小(MB) */
+  VideoSize?: string
+  /** 视频帧率(Hz) */
+  VideoFPS?: number
+  /** 图片数量 */
+  ImageLength?: number
+  /** 区域 */
+  Region: string
+  /** 相关搜索（大家都在搜） */
+  suggestWrod: string[]
+  /** 视频分辨率 */
+  Resolution: string | null
+  /** 分享链接 */
+  share_url: string
+  /** 作者昵称 */
+  Author: string
+  /** 作者头像 */
+  AuthorAvatar: string
+  /** 作品统计 */
+  Statistics: {
+    digg_count: number
+    comment_count: number
+    share_count: number
+    collect_count: number
+  }
+  /** 发布时间戳（秒） */
+  CreateTime: number
+  /** 评论数据列表 */
+  CommentsData: Array<{
+    /** 评论ID */
+    id?: number
+    /** 评论CID */
+    cid?: string
+    /** 作品ID */
+    aweme_id?: string
+    /** 用户头像URL */
+    userimageurl: string
+    /** 用户昵称 */
+    nickname: string
+    /** 标签类型 (1=作者) */
+    label_type?: number
+    /** 状态标签 */
+    status_label?: string
+    /** 评论内容 */
+    text: RichTextDocument
+    /** 评论图片 */
+    commentimage?: string
+    /** 贴纸 */
+    sticker?: string
+    /** 创建时间戳（秒） */
+    create_time: number
+    /** IP标签 */
+    ip_label: string
+    /** 点赞数 */
+    digg_count: number
+    /** 搜索文本 */
+    search_text?: Array<{
+      /** 搜索文本内容 */
+      search_text: string
+      /** 搜索查询ID */
+      search_query_id: string
+    }> | null
+    /** 是否@用户ID */
+    is_At_user_id?: any
+    /** 回复评论数据 */
+    replyComment?: DouyinSubComment[]
+    /** 作者是否点赞 */
+    is_author_digged?: boolean
+  }>
+  /** 最大嵌套层级 */
+  maxDepth?: number
+}

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

@@ -0,0 +1,11 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { DouyinComment } from './components/Comment'
+import type { DouyinCommentData } from './components/types'
+
+export default defineTemplate({
+  name: '评论列表',
+  description: '抖音评论列表展示模板',
+  component: DouyinComment,
+  validate: (data): data is DouyinCommentData => typeof data === 'object' && data !== null && typeof (data as any).share_url === 'string'
+})

package/src/ktr/template/douyin/components/Icons.tsx

@@ -0,0 +1,75 @@
+import type { SVGProps } from 'react'
+import React from 'react'
+
+type IconProps = Omit<SVGProps<SVGSVGElement>, 'width' | 'height'> & {
+  size?: number
+  weight?: 'fill'
+}
+
+const svgProps = (size: number | undefined, { weight: _weight, ...props }: Omit<IconProps, 'size'>) => ({
+  width: size,
+  height: size,
+  fill: 'none',
+  xmlns: 'http://www.w3.org/2000/svg',
+  ...props
+})
+
+/** 抖音官方点赞图标，提取自 packages/template/icon.html。 */
+export const DouyinLikeIcon = ({ size = 36, ...props }: IconProps) => (
+  <svg viewBox="0 0 891 816" {...svgProps(size, props)}>
+    <path
+      fill="currentColor"
+      d="M453.036 88.712C493.774 30.664 560.66 0 634.251 0 774.403 0 890.972 121.59 890.972 266.137v.054c.01-.02.019-.04.028-.06 0 4.121-.07 7.241-.122 9.537-.072 3.151-.108 4.747.122 5.247-.531 30.403-5.778 55.522-15.101 88.712-5.289 5.96-10.204 17.184-15.1 29.572-7.724 11.998-10.647 17.81-15.101 29.57a546.67 546.67 0 0 1-14.452 22.974c-37.449 56.8-87.537 113.33-137.579 163.509-78.331 79.025-158.123 144.805-192.835 173.422-9.585 7.901-15.732 12.969-17.464 14.7-12.301 12.303-24.603 12.611-36.905 12.619-.324.004-.649.006-.977.006-25.236 0-37.854-12.619-50.472-25.237-.963-.963-3.413-2.984-7.156-5.979-38.233-28.184-124.273-96.997-205.116-180C121.066 542.02 61.622 470.007 29.092 399.588 16.474 374.351.731 314.264 0 280.922c.269-.267.227-1.873.144-5.078C.083 273.498 0 270.297 0 266.137 0 121.524 116.502 0 256.721 0c73.458 0 140.405 30.664 196.315 88.712Z"
+    />
+  </svg>
+)
+
+/** 抖音官方评论图标，提取自 packages/template/icon.html。 */
+export const DouyinCommentIcon = ({ size = 36, ...props }: IconProps) => (
+  <svg viewBox="-24.75 -11.25 22.5 22.31" {...svgProps(size, props)}>
+    <path
+      fill="currentColor"
+      d=" M-4.644999980926514,4.482999801635742 C-7.25,7.818999767303467 -13.482000350952148,8.300000190734863 -13.482000350952148,8.300000190734863 C-13.482000350952148,8.300000190734863 -14.413999557495117,11.48799991607666 -12.135000228881836,10.821000099182129 C-9.855999946594238,10.154000282287598 -7.25,8.152000427246094 -4.644999980926514,4.482999801635742z M-17.36,-1.04 C-17.36,-0.16 -18.07,0.56 -18.96,0.56 C-18.96,0.56 -18.96,0.56 -18.96,0.56 C-19.85,0.56 -20.57,-0.16 -20.57,-1.04 C-20.57,-1.92 -19.85,-2.64 -18.96,-2.64 C-18.07,-2.64 -17.36,-1.92 -17.36,-1.04z M-11.89,-1.04 C-11.89,-0.16 -12.61,0.56 -13.5,0.56 C-13.5,0.56 -13.5,0.56 -13.5,0.56 C-14.39,0.56 -15.11,-0.16 -15.11,-1.04 C-15.11,-1.92 -14.39,-2.64 -13.5,-2.64 C-12.61,-2.64 -11.89,-1.92 -11.89,-1.04z M-6.43,-1.04 C-6.43,-0.16 -7.15,0.56 -8.04,0.56 C-8.04,0.56 -8.04,0.56 -8.04,0.56 C-8.92,0.56 -9.64,-0.16 -9.64,-1.04 C-9.64,-1.92 -8.92,-2.64 -8.04,-2.64 C-7.15,-2.64 -6.43,-1.92 -6.43,-1.04z M-5.79,5.98 C-3.56,3.75 -2.25,1.42 -2.25,-1.29 C-2.25,-6.79 -7.29,-11.25 -13.5,-11.25 C-19.71,-11.25 -24.75,-6.79 -24.75,-1.29 C-24.75,4.21 -19.55,7.99 -13.34,7.99 C-13.34,7.99 -13.34,11.06 -13.34,11.06 C-13.34,11.06 -8.51,8.72 -5.79,5.98z"
+    />
+  </svg>
+)
+
+/** 抖音官方收藏图标，提取自 packages/template/icon.html。 */
+export const DouyinFavoriteIcon = ({ size = 36, ...props }: IconProps) => (
+  <svg viewBox="-2.285 -1.439 104.57 99.703" {...svgProps(size, props)}>
+    <path
+      fill="currentColor"
+      d="M43.79199981689453,4.316999912261963 C45.93899917602539,-1.4390000104904175 54.06100082397461,-1.4390000104904175 56.20800018310547,4.316999912261963 C56.20800018310547,4.316999912261963 65.927001953125,30.375 65.927001953125,30.375 C65.927001953125,30.375 93.6510009765625,31.59000015258789 93.6510009765625,31.59000015258789 C99.7750015258789,31.857999801635742 102.28500366210938,39.60200119018555 97.48799896240234,43.428001403808594 C97.48799896240234,43.428001403808594 75.77100372314453,60.74700164794922 75.77100372314453,60.74700164794922 C75.77100372314453,60.74700164794922 83.18599700927734,87.55599975585938 83.18599700927734,87.55599975585938 C84.8239974975586,93.47799682617188 78.25299835205078,98.26399993896484 73.14099884033203,94.87200164794922 C73.14099884033203,94.87200164794922 50,79.51799774169922 50,79.51799774169922 C50,79.51799774169922 26.858999252319336,94.87200164794922 26.858999252319336,94.87200164794922 C21.746999740600586,98.26399993896484 15.175999641418457,93.47799682617188 16.81399917602539,87.55599975585938 C16.81399917602539,87.55599975585938 24.229000091552734,60.74700164794922 24.229000091552734,60.74700164794922 C24.229000091552734,60.74700164794922 2.51200008392334,43.428001403808594 2.51200008392334,43.428001403808594 C-2.2850000858306885,39.60200119018555 0.22499999403953552,31.857999801635742 6.348999977111816,31.59000015258789 C6.348999977111816,31.59000015258789 34.073001861572266,30.375 34.073001861572266,30.375 C34.073001861572266,30.375 43.79199981689453,4.316999912261963 43.79199981689453,4.316999912261963z"
+    />
+  </svg>
+)
+
+/** 抖音官方分享图标，提取自 packages/template/icon.html。 */
+export const DouyinShareIcon = ({ size = 36, ...props }: IconProps) => (
+  <svg viewBox="-13.517 -10.558 25.734 22.375" {...svgProps(size, props)}>
+    <path
+      fill="currentColor"
+      d="M.815 4.762V-4.93s-6.033-.564-10.06 3.755c-4.027 4.319-4.272 12.992-1.597 8.919C-8.062 3.511.815 4.762.815 4.762Zm9.699-1.767c1.655-1.461 1.703-3.887.107-5.413L3.706-9.032C2.11-10.558.815-10.264.815-8.375v3.421c.009 6.839 0 6.039 0 6.039 0 2.208 0 5.452 0 7.24 0 1.788 1.343 2.053 2.998.591l6.701-5.921Z"
+    />
+  </svg>
+)
+
+/** 抖音官方推荐图标。 */
+export const DouyinRecommendIcon = ({ size = 36, ...props }: IconProps) => (
+  <svg viewBox="0 0 27 27" {...svgProps(size, props)}>
+    <path
+      fill="currentColor"
+      d="M18.544 22.86H8.42V9.697l5.821-5.821a1.79 1.79 0 0 1 2.531 0c.118.118.215.278.291.48.076.203.114.397.114.583v.354l-1.114 4.404h5.518c.54 0 1.012.203 1.417.608.405.405.608.877.608 1.417v2.025a2.059 2.059 0 0 1-.152.759l-3.037 7.137c-.152.338-.405.625-.76.861a1.978 1.978 0 0 1-1.113.354ZM6.79 9.697V22.86H4.366a1.625 1.625 0 0 1-1.625-1.625v-9.91c0-.898.728-1.626 1.625-1.626H6.79Z"
+    />
+  </svg>
+)
+
+/** 抖音官方更多图标，提取自 packages/template/icon.html。 */
+export const DouyinMoreIcon = ({ size = 36, ...props }: IconProps) => (
+  <svg viewBox="0 0 36 36" {...svgProps(size, props)}>
+    <path
+      fill="currentColor"
+      d="M13.556 17.778a1.778 1.778 0 1 1-3.556 0 1.778 1.778 0 0 1 3.556 0Zm6.222 0a1.778 1.778 0 1 1-3.556 0 1.778 1.778 0 0 1 3.556 0Zm4.444 1.778a1.778 1.778 0 1 0 0-3.556 1.778 1.778 0 0 0 0 3.556Z"
+    />
+  </svg>
+)

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

@@ -0,0 +1,83 @@
+/** douyin板块共享类型（跨模板复用 / core 引用）。 */
+
+import type { RichTextDocument } from '@kkk/richtext'
+
+/**
+ * 抖音子评论数据接口
+ */
+export interface DouyinSubComment {
+  /** 创建时间戳（秒） */
+  create_time: number
+  /** 用户昵称 */
+  nickname: string
+  /** 用户头像URL */
+  userimageurl: string
+  /** 评论内容 */
+  text: RichTextDocument
+  /** 点赞数 */
+  digg_count: number
+  /** IP标签 */
+  ip_label: string
+  /** 文本额外信息 */
+  text_extra: any[]
+  /** 标签文本 */
+  label_text: string
+  /** 评论图片 */
+  image_list: string[] | null
+  /** 评论ID */
+  cid: string
+  /** 回复的评论ID */
+  reply_to_reply_id: string
+  /** 回复的用户昵称 */
+  reply_to_username: string
+}
+
+/**
+ * 音乐封面组件属性接口
+ */
+export interface MusicCoverProps {
+  /** 音乐封面图片URL */
+  imageUrl: string
+  /** 音乐描述 */
+  description: string
+}
+
+/**
+ * 音乐信息组件属性接口
+ */
+export interface MusicInfoProps {
+  /** 音乐ID */
+  musicId: string
+  /** 使用用户数量 */
+  userCount: string
+  /** 创建时间 */
+  createTime: string
+}
+
+/**
+ * 音乐作者信息组件属性接口
+ */
+export interface MusicAuthorInfoProps {
+  /** 用户头像URL */
+  avatarUrl: string
+  /** 用户名 */
+  username: string
+  /** 用户短ID */
+  userShortId: string
+  /** 获赞数 */
+  totalFavorited: number
+  /** 关注数 */
+  followingCount: number
+  /** 粉丝数 */
+  fans: number
+}
+
+/**
+ * 音乐二维码组件属性接口
+ */
+export interface MusicQRCodeProps {
+  /** 二维码内容。 */
+  share_url: string
+  /** 音乐作者头像 URL。 */
+  avatarUrl: string
+}

package/src/ktr/template/douyin/dynamic/components/Dynamic.tsx

@@ -0,0 +1,283 @@
+import { format } from 'date-fns'
+import { Clock, Eye, Hash, Maximize, 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 { DouyinCommentIcon, DouyinFavoriteIcon, DouyinLikeIcon, DouyinShareIcon } from '../../components/Icons'
+import type { DouyinDynamicData } 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"
+        />
+      </div>
+      <span className="text-[65px] ml-4 text-foreground/70">记录美好生活</span>
+    </div>
+  )
+}
+
+/**
+ * 作品封面组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+const CoverSection: React.FC<{ imageUrl: string }> = ({ 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" src={imageUrl} alt="封面" />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 作品信息组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+const InfoSection: React.FC<PosterProps<DouyinDynamicData>> = (props) => {
+  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: props.data.desc }}
+      />
+      <div className="flex items-center gap-6 text-[45px] text-muted font-light mb-2.5 select-text">
+        <div className="flex gap-2 items-center">
+          <DouyinLikeIcon size={44} />
+          <span>{props.data.dianzan}点赞</span>
+        </div>
+        <span>·</span>
+        <div className="flex gap-2 items-center">
+          <DouyinCommentIcon size={44} />
+          <span>{props.data.pinglun}评论</span>
+        </div>
+        <span>·</span>
+        <div className="flex gap-2 items-center">
+          <DouyinFavoriteIcon size={44} />
+          <span>{props.data.shouchang}收藏</span>
+        </div>
+        <span>·</span>
+        <div className="flex gap-2 items-center">
+          <DouyinShareIcon size={44} />
+          <span>{props.data.share}分享</span>
+        </div>
+      </div>
+      <div className="flex items-center gap-2 text-[45px] text-muted font-light select-text">
+        <Clock className="w-11 h-11 text-muted" />
+        <span>发布于: {props.data.create_time}</span>
+      </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>图片生成于: {format(new Date(), 'yyyy-MM-dd HH:mm:ss')}</span>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 用户信息组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+const UserInfoSection: React.FC<PosterProps<DouyinDynamicData> & { coCreatorCount?: number }> = (props) => {
+  return (
+    <div className="flex flex-col gap-12">
+      {/* 头像和用户名/抖音号 */}
+      <div className="flex gap-12 items-start">
+        {/* 头像 */}
+        <div className="relative shrink-0">
+          <div className="flex justify-center items-center bg-white rounded-full w-35 h-35">
+            <img src={props.data.avater_url} alt="头像" className="rounded-full w-33 h-33 shadow-large" />
+          </div>
+        </div>
+
+        {/* 用户名和抖音号 - 纵向排列 */}
+        <div className="flex flex-col gap-5">
+          <div className="text-7xl font-bold select-text text-foreground">@{props.data.username}</div>
+          <div className="flex gap-2 items-center text-4xl text-muted">
+            <Hash size={32} className="text-muted" />
+            <span className="select-text">抖音号: {props.data.抖音号}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* 用户统计信息 */}
+      <div className="text-3xl flex gap-6 items-center text-foreground/70">
+        <div className="flex flex-col gap-1 items-start px-6 py-3 rounded-2xl bg-surface">
+          <div className="flex gap-1 items-center">
+            <DouyinLikeIcon size={28} />
+            <span className="text-muted">获赞</span>
+          </div>
+          <div className="w-full h-px bg-border" />
+          <span className="select-text font-medium text-4xl">{props.data.获赞}</span>
+        </div>
+        <div className="flex flex-col gap-1 items-start px-6 py-3 rounded-2xl bg-surface">
+          <div className="flex gap-1 items-center">
+            <Eye size={28} className="text-view" />
+            <span className="text-muted">关注</span>
+          </div>
+          <div className="w-full h-px bg-border" />
+          <span className="select-text font-medium text-4xl">{props.data.关注}</span>
+        </div>
+        <div className="flex flex-col gap-1 items-start px-6 py-3 rounded-2xl bg-surface">
+          <div className="flex gap-1 items-center">
+            <Users size={28} className="text-accent" />
+            <span className="text-muted">粉丝</span>
+          </div>
+          <div className="w-full h-px bg-border" />
+          <span className="select-text font-medium text-4xl">{props.data.粉丝}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/** 共创者信息 */
+const CoCreatorsInfo: React.FC<{
+  info?: DouyinDynamicData['cooperation_info']
+}> = ({ info }) => {
+  const creators = info?.co_creators ?? []
+  if (creators.length === 0) return null
+
+  const items = creators.slice(0, 50)
+
+  // 根据容器宽度，计算可显示的条目数；剩余用省略占位符
+  const listRef = React.useRef<HTMLDivElement>(null)
+  const [visibleCount, setVisibleCount] = React.useState(items.length)
+
+  React.useEffect(() => {
+    const calc = () => {
+      const el = listRef.current
+      if (!el) return
+      const containerWidth = el.offsetWidth
+
+      // 每项实际宽度约152px（头像w-38），间距gap-8=32px，右内边距pr-2=8px
+      const ITEM_W = 152
+      const GAP = 32
+      const PAD_R = 8
+
+      const capacity = Math.floor((containerWidth - PAD_R) / (ITEM_W + GAP))
+      const needEllipsis = items.length > capacity
+      const nextVisible = needEllipsis ? Math.max(0, capacity - 1) : items.length
+      setVisibleCount(nextVisible)
+    }
+
+    calc()
+    window.addEventListener('resize', calc)
+    return () => window.removeEventListener('resize', calc)
+  }, [items.length])
+
+  return (
+    <div className="flex flex-col pl-16 w-full">
+      <div ref={listRef} className="flex overflow-hidden gap-8 py-1 pr-2 w-full" style={{ scrollbarWidth: 'thin' }}>
+        {items.slice(0, visibleCount).map((c, idx) => {
+          const avatar = c.avatar_url
+          return (
+            <div key={`${c.nickname || 'creator'}-${idx}`} className="flex flex-col items-center min-w-38 w-38 shrink-0">
+              <div className="flex justify-center items-center bg-white rounded-full w-30 h-30">
+                <img src={avatar} alt="共创者头像" className="object-cover w-28 h-auto rounded-full" />
+              </div>
+              <div className="overflow-hidden mt-6 w-full text-3xl font-medium leading-tight text-center truncate whitespace-nowrap select-text text-foreground/80">
+                {c.nickname || '未提供'}
+              </div>
+              <div className="overflow-hidden mt-2 w-full text-3xl leading-tight text-center truncate whitespace-nowrap select-text text-foreground/70">
+                {c.role_title || '未提供'}
+              </div>
+            </div>
+          )
+        })}
+
+        {items.length > visibleCount && (
+          <div className="flex flex-col items-center min-w-38 w-38 shrink-0">
+            <div className="flex justify-center items-center rounded-full bg-surface-secondary w-38 h-38">
+              <span className="text-[42px] leading-none text-muted">···</span>
+            </div>
+            <div className="overflow-hidden mt-6 w-full text-3xl font-medium leading-tight text-center truncate whitespace-nowrap select-text text-foreground/80">
+              还有{items.length - visibleCount}人
+            </div>
+            <div className="overflow-hidden mt-2 w-full text-3xl leading-tight text-center truncate whitespace-nowrap select-text text-foreground/70">
+              共创
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 抖音动态组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+export const DouyinDynamic: React.FC<PosterProps<DouyinDynamicData>> = (props) => {
+  const coCreatorCount = props.data.cooperation_info?.co_creator_nums ?? props.data.cooperation_info?.co_creators?.length ?? undefined
+
+  return (
+    <DefaultLayout {...props}>
+      <div>
+        {/* 头部Logo */}
+        <div className="h-15" />
+        <DouyinHeader useDarkTheme={isDark(props.ctx)} />
+        <div className="h-15" />
+
+        {/* 封面 */}
+        <CoverSection imageUrl={props.data.image_url} />
+        <div className="h-5" />
+
+        {/* 作品信息 */}
+        <InfoSection {...props} />
+        <div className="h-25" />
+
+        <div className="flex flex-col gap-10 px-0 pt-25">
+          <div className="w-full">
+            {coCreatorCount && coCreatorCount > 0 && (
+              <div className="px-16 pb-8">
+                <div className="gap-2 inline-flex items-center rounded-2xl bg-surface text-foreground/80 px-6 py-3">
+                  <Users className="w-7 h-7" />
+                  <span className="text-3xl font-medium leading-none select-text text-foreground/80">{coCreatorCount}人共创</span>
+                </div>
+              </div>
+            )}
+            <CoCreatorsInfo info={props.data.cooperation_info} />
+          </div>
+
+          {/* 底部信息区域 */}
+          <div className="flex justify-between items-start px-20 pb-20">
+            {/* 左侧：用户信息 */}
+            <UserInfoSection {...props} />
+
+            {/* 右侧：二维码 */}
+            <div className="flex flex-col items-center gap-4">
+              <QRCodeWithAvatar
+                value={props.data.share_url}
+                avatarUrl={props.data.avater_url}
+                useDarkTheme={isDark(props.ctx)}
+                alt="二维码"
+                className="h-auto w-75 rounded-xl"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  )
+}
+
+export default DouyinDynamic

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

@@ -0,0 +1,46 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+
+/**
+ * 抖音动态组件属性接口
+ */
+export interface DouyinDynamicData {
+  /** 图片URL */
+  image_url: string
+  /** 描述内容 */
+  desc: string
+  /** 点赞数 */
+  dianzan: string
+  /** 评论数 */
+  pinglun: string
+  /** 收藏数 */
+  shouchang: string
+  /** 分享数 */
+  share: string
+  /** 创建时间 */
+  create_time: string
+  /** 用户头像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/dynamic/index.tsx

@@ -0,0 +1,11 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { DouyinDynamic } from './components/Dynamic'
+import type { DouyinDynamicData } from './components/types'
+
+export default defineTemplate({
+  name: '作品列表',
+  description: '抖音作品列表推送模板',
+  component: DouyinDynamic,
+  validate: (data): data is DouyinDynamicData => typeof data === 'object' && data !== null && typeof (data as any).share_url === 'string'
+})