koishi-plugin-kkk 1.0.0

package/src/ktr/template/douyin/comment/components/Comment.tsx

@@ -0,0 +1,612 @@
+import { createRichTextDocument, renderRichTextToReact } from '@kkk/richtext'
+import { PlayIcon } from '@phosphor-icons/react'
+import { differenceInSeconds, format, formatDistanceToNow, fromUnixTime } from 'date-fns'
+import { zhCN } from 'date-fns/locale'
+import { Search } from 'lucide-react'
+import React, { type ReactNode } from 'react'
+
+import { cn } from '../../../../utils/cn'
+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, DouyinMoreIcon, DouyinShareIcon } from '../../components/Icons'
+import type { DouyinSubComment } from '../../components/types'
+import type { DouyinCommentData } from './types'
+
+const douyinMentionClassName = 'text-[#04498d] dark:text-[#face15]'
+const douyinSearchKeywordClassName = 'font-medium text-[#04498d] dark:text-[#face15]'
+const douyinSearchKeywordIconClassName = 'opacity-90'
+// 注意不能提升到模块顶层调用：打包后注册表与共享 chunk 存在循环引用，
+// 模块求值期调用会在「未初始化」的绑定上炸出 is not a function，必须惰性创建。
+const createEmptyDouyinRichText = () => createRichTextDocument([], { platform: 'douyin' })
+
+const renderDouyinCommentRichText = (content: DouyinSubComment['text'] | DouyinCommentData['CommentsData'][number]['text']): ReactNode => {
+  return renderRichTextToReact(content, {
+    mention: { className: douyinMentionClassName },
+    searchKeyword: { className: douyinSearchKeywordClassName, iconClassName: douyinSearchKeywordIconClassName }
+  })
+}
+
+const formatDouyinCommentTime = (timestamp: number): string => {
+  if (!timestamp) {
+    return ''
+  }
+
+  const commentDate = fromUnixTime(timestamp)
+  const diffSeconds = differenceInSeconds(new Date(), commentDate)
+
+  if (diffSeconds < 30) {
+    return '刚刚'
+  }
+
+  if (diffSeconds < 7776000) {
+    return formatDistanceToNow(commentDate, {
+      locale: zhCN,
+      addSuffix: true
+    })
+  }
+
+  return format(commentDate, 'yyyy-MM-dd')
+}
+
+const formatDouyinCommentDiggCount = (count: number): string => {
+  if (count >= 10000) {
+    return `${(count / 10000).toFixed(1)}w`
+  }
+
+  return String(count)
+}
+
+const formatPublishTime = (timestamp: number): string => {
+  if (!timestamp) return ''
+  return format(fromUnixTime(timestamp), 'yyyy年MM月dd日 HH:mm', { locale: zhCN })
+}
+
+// const DouyinLogo: React.FC<{ useDarkTheme?: boolean }> = ({ useDarkTheme }) => {
+//   const [hasError, setHasError] = React.useState(false)
+
+//   if (hasError) {
+//     return (
+//       <div className='flex items-center h-full text-6xl font-bold text-foreground/70'>
+//         抖音
+//       </div>
+//     )
+//   }
+
+//   return (
+//     <img
+//       src={useDarkTheme ? '/image/douyin/dylogo-light.svg' : '/image/douyin/dylogo-dark.svg'}
+//       alt='抖音Logo'
+//       className='object-contain h-full w-auto max-w-125'
+//       onError={() => setHasError(true)}
+//     />
+//   )
+// }
+
+/**
+ * 二维码组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+const QRCodeSection: React.FC<Omit<DouyinCommentData, 'CommentsData'> & { useDarkTheme?: boolean }> = (props) => {
+  return (
+    <div className="flex flex-col items-center">
+      <div className="flex justify-center items-center w-100 h-100 p-4">
+        <QRCodeWithAvatar
+          value={props.share_url}
+          avatarUrl={props.AuthorAvatar}
+          useDarkTheme={props.useDarkTheme}
+          alt="二维码"
+          className="object-contain w-full h-full rounded-lg"
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 视频信息头部组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+const VideoInfoHeader: React.FC<Omit<DouyinCommentData, 'CommentsData'> & { useDarkTheme?: boolean }> = (props) => {
+  return (
+    <div className="max-w-350 mx-auto px-10 pt-14">
+      <div className="flex items-start justify-between gap-10">
+        {/* 左侧内容区 */}
+        <div className="flex flex-col gap-10 flex-1 min-w-0">
+          {/* 作者信息 + Logo */}
+          <div className="flex items-start justify-between gap-6">
+            <div className="flex items-center gap-6 min-w-0">
+              {/* 作者头像 */}
+              <div className="w-35 h-35 shrink-0 rounded-full overflow-hidden bg-surface-secondary ring-2 ring-border/40">
+                <img src={props.AuthorAvatar} className="w-full h-full object-cover" alt={props.Author} />
+              </div>
+              {/* 作者名 + 时间 */}
+              <div className="flex flex-col gap-3 min-w-0">
+                <div className="flex items-center gap-4 flex-wrap">
+                  <span className="text-5xl font-medium text-foreground truncate">{props.Author}</span>
+                </div>
+                <span className="text-4xl text-muted">{formatPublishTime(props.CreateTime)}</span>
+              </div>
+            </div>
+
+            {/* 抖音 Logo */}
+            {/* <div className='h-28 flex items-center shrink-0'>
+              <DouyinLogo useDarkTheme={props.useDarkTheme} />
+            </div> */}
+          </div>
+
+          {/* 数据统计 */}
+          <div className="grid grid-cols-2 gap-8">
+            <div className="flex items-center gap-4 text-foreground/50">
+              <DouyinLikeIcon size={48} />
+              <span className="text-5xl font-medium text-foreground/90">{formatDouyinCommentDiggCount(props.Statistics.digg_count)}</span>
+            </div>
+            <div className="flex items-center gap-4 text-foreground/50">
+              <DouyinCommentIcon size={48} />
+              <span className="text-5xl font-medium text-foreground/90">
+                {formatDouyinCommentDiggCount(props.Statistics.comment_count)}
+              </span>
+            </div>
+            <div className="flex items-center gap-4 text-foreground/50">
+              <DouyinShareIcon size={48} />
+              <span className="text-5xl font-medium text-foreground/90">{formatDouyinCommentDiggCount(props.Statistics.share_count)}</span>
+            </div>
+            <div className="flex items-center gap-4 text-foreground/50">
+              <DouyinFavoriteIcon size={48} />
+              <span className="text-5xl font-medium text-foreground/90">
+                {formatDouyinCommentDiggCount(props.Statistics.collect_count)}
+              </span>
+            </div>
+          </div>
+
+          {/* 规格信息 */}
+          <div className="flex items-center gap-4 flex-wrap text-muted">
+            <span className="text-4xl">{props.Type}</span>
+            {props.Type === '视频' && props.Resolution && (
+              <>
+                <span className="text-4xl text-border">·</span>
+                <span className="text-4xl">{props.Resolution}</span>
+              </>
+            )}
+            {props.Type === '视频' ? (
+              <>
+                <span className="text-4xl text-border">·</span>
+                <span className="text-4xl">{props.VideoSize}MB</span>
+                <span className="text-4xl text-border">·</span>
+                <span className="text-4xl">{props.VideoFPS}Hz</span>
+              </>
+            ) : (
+              <>
+                <span className="text-4xl text-border">·</span>
+                <span className="text-4xl">{props.Region}</span>
+                <span className="text-4xl text-border">·</span>
+                <span className="text-4xl">{props.ImageLength}张</span>
+              </>
+            )}
+          </div>
+        </div>
+
+        {/* 右侧二维码 */}
+        <div className="shrink-0">
+          <QRCodeSection {...props} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface ReplyNode extends DouyinSubComment {
+  children: ReplyNode[]
+  hiddenCount?: number
+}
+
+const organizeReplies = (replies: DouyinSubComment[], rootCid: string, maxDepth: number = 6): ReplyNode[] => {
+  const map = new Map<string, ReplyNode>()
+  const roots: ReplyNode[] = []
+
+  // 第一遍：创建节点
+  replies.forEach((r) => {
+    map.set(r.cid, { ...r, children: [] })
+  })
+
+  // 第二遍：构建树
+  replies.forEach((r) => {
+    const node = map.get(r.cid)!
+    const parentId = r.reply_to_reply_id
+    if (parentId && map.has(parentId) && parentId !== rootCid && parentId !== '0') {
+      map.get(parentId)!.children.push(node)
+    } else {
+      roots.push(node)
+    }
+  })
+
+  // 计算深度并修剪树的函数
+  const pruneTree = (nodes: ReplyNode[], currentDepth: number): ReplyNode[] => {
+    if (currentDepth > maxDepth) {
+      const count = nodes.length + nodes.reduce((acc, node) => acc + countChildren(node), 0)
+      if (count > 0) {
+        return [
+          {
+            cid: `more-${Date.now()}-${Math.random()}`,
+            text: createEmptyDouyinRichText(),
+            digg_count: 0,
+            create_time: 0,
+            nickname: '',
+            userimageurl: '',
+            ip_label: '',
+            text_extra: [],
+            label_text: '',
+            image_list: null,
+            reply_to_reply_id: '',
+            reply_to_username: '',
+            children: [],
+            hiddenCount: count
+          }
+        ]
+      }
+      return []
+    }
+
+    return nodes.map((node) => {
+      node.children = pruneTree(node.children, currentDepth + 1)
+      return node
+    })
+  }
+
+  const countChildren = (node: ReplyNode): number => {
+    return node.children.length + node.children.reduce((acc, child) => acc + countChildren(child), 0)
+  }
+
+  return pruneTree(roots, 1)
+}
+
+const ReplyItemComponent: React.FC<{ reply: ReplyNode; depth?: number; isLast?: boolean; maxDepth?: number }> = ({
+  reply,
+  depth = 0,
+  isLast,
+  maxDepth = 6
+}) => {
+  const nicknameLength = reply.nickname.length
+  const replyToLength = reply.reply_to_username?.length || 0
+  const isNicknameLonger = nicknameLength >= replyToLength
+
+  if (reply.hiddenCount) {
+    return (
+      <div className="flex relative flex-col mb-6">
+        {/*
+        外部网格：处理缩进和树连接
+        第1列：父级线程线（脊柱） + 连接到此评论的线（曲线）
+        第2列：评论本身
+      */}
+        <div className="grid grid-cols-[100px_minmax(0,1fr)] relative">
+          {/* 第1列：树连接区域 */}
+          <div className="flex relative justify-center">
+            {/* 1. 脊柱：来自父级的垂直线 */}
+            {/* 如果不是最后一个子节点则穿过 */}
+            {!isLast && <div className="absolute top-0 bottom-0 left-1/2 w-0.5 bg-border -ml-px"></div>}
+
+            {/* 脊柱延伸用于边距间隙 */}
+            {/* 连接到下一个兄弟节点的 mb-6 间隙 */}
+            {!isLast && <div className="absolute -bottom-6 left-1/2 w-0.5 h-6 bg-border -ml-px"></div>}
+
+            {/* 2. 曲线：L形连接到当前评论 */}
+            <svg className="absolute top-0 left-0 w-full h-12.5 pointer-events-none overflow-visible z-0 text-border">
+              <path d="M 50 0 V 15 Q 50 50 85 50 H 90" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+            </svg>
+          </div>
+
+          {/* 第2列：显示更多文本 */}
+          <div className="flex flex-col mt-6 min-w-0">
+            <div className="flex items-center h-12.5">
+              <div className="flex items-center text-muted">
+                <DouyinMoreIcon size={45} className="mr-5" />
+                <span className="text-4xl font-medium tracking-wide">另外 {reply.hiddenCount} 条回复</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex relative flex-col">
+      {/*
+        外部网格：处理缩进和树连接
+        第1列：父级线程线（脊柱） + 连接到此评论的线（曲线）
+        第2列：评论本身
+      */}
+      <div className="grid grid-cols-[100px_minmax(0,1fr)] relative">
+        {/* 第1列：树连接区域 */}
+        <div className="flex relative justify-center">
+          {/* 1. 脊柱：来自父级的垂直线 */}
+          {/* 如果不是最后一个子节点则穿过 */}
+          {!isLast && <div className="absolute top-0 bottom-0 left-1/2 w-0.5 bg-border-secondary -ml-px"></div>}
+
+          {/* 脊柱延伸用于边距间隙 */}
+          {/* 连接到下一个兄弟节点的 mb-6 间隙 */}
+          {!isLast && <div className="absolute -bottom-6 left-1/2 w-0.5 h-6 bg-border -ml-px"></div>}
+
+          {/* 2. 曲线：L形连接到当前评论 */}
+          <svg className="absolute top-0 left-0 w-full h-12.5 pointer-events-none overflow-visible z-0 text-border-secondary">
+            <path d="M 50 0 V 15 Q 50 50 85 50 H 90" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+          </svg>
+        </div>
+
+        {/* 第2列：评论主体（六宫格） */}
+        <div className="flex flex-col min-w-0">
+          {/* 内部网格：头像 | 内容 */}
+          <div className="grid grid-cols-[100px_minmax(0,1fr)] relative">
+            {/* 内部第1列：头像 & 子线程线 */}
+            {/* 添加 h-full 以确保其拉伸以匹配内容高度 */}
+            <div className="flex relative flex-col items-center h-full">
+              {/* 头像 - 固定高度 */}
+              <div className="w-25 h-25 shrink-0 z-10 relative">
+                <img src={reply.userimageurl} className="object-cover rounded-full w-25 h-25 bg-background" alt="用户头像" />
+              </div>
+
+              {/* 子线程线 - 从头像下方开始并延伸到此单元格底部 */}
+              {reply.children.length > 0 && <div className="w-0.5 bg-border-secondary h-full grow mt-3 rounded-t-full"></div>}
+            </div>
+
+            {/* 内部第2列：头部、内容、操作 */}
+            <div className={cn('flex flex-col pl-6 min-w-0 gap-2', isLast && reply.children.length === 0 ? 'pb-16' : 'pb-6')}>
+              {/* 第1行：头部 */}
+              <div className="flex flex-nowrap items-center content-center w-full overflow-hidden">
+                <span className={cn('mr-2 text-4xl font-normal text-muted', isNicknameLonger ? 'min-w-0 truncate shrink' : 'shrink-0')}>
+                  {reply.nickname}
+                </span>
+                {reply.label_text !== '' && (
+                  <div
+                    className={cn(
+                      'px-4 py-1 text-3xl rounded-xl mr-2',
+                      reply.label_text === '作者' ? 'bg-[#fe2c55] text-white' : 'bg-surface text-muted'
+                    )}
+                  >
+                    {reply.label_text}
+                  </div>
+                )}
+                {reply.reply_to_username && (
+                  <div className={cn('flex items-center', !isNicknameLonger ? 'overflow-hidden min-w-0 shrink' : 'shrink-0')}>
+                    <PlayIcon weight="fill" className="w-7 h-auto mr-3.5 mx-1 text-muted shrink-0" />
+                    <span className={cn('text-4xl font-normal text-muted', !isNicknameLonger && 'truncate')}>
+                      {reply.reply_to_username}
+                    </span>
+                  </div>
+                )}
+              </div>
+
+              {/* 第2行：内容 */}
+              <div>
+                <div
+                  className="text-5xl text-foreground leading-normal whitespace-pre-wrap select-text"
+                  style={{
+                    wordBreak: 'break-word',
+                    overflowWrap: 'break-word'
+                  }}
+                >
+                  {renderDouyinCommentRichText(reply.text)}
+                </div>
+
+                {reply.image_list &&
+                  reply.image_list.length > 0 &&
+                  reply.image_list.filter(Boolean).map((img, idx) => (
+                    <div key={idx} className="my-4 overflow-hidden shadow-sm rounded-xl max-w-150">
+                      <img className="object-contain w-full h-auto rounded-xl" src={img} alt="评论图片" />
+                    </div>
+                  ))}
+              </div>
+
+              {/* 第3行：操作 */}
+              <div className="pb-4">
+                <div className="flex gap-6 items-center text-muted">
+                  <span className="text-4xl">{formatDouyinCommentTime(reply.create_time)}</span>
+                  <span className="text-4xl">{reply.ip_label}</span>
+                  <div className="flex gap-2 items-center">
+                    <DouyinLikeIcon size={40} />
+                    <span className="text-4xl select-text">{formatDouyinCommentDiggCount(reply.digg_count)}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 子容器 - 递归 */}
+          {reply.children.length > 0 && (
+            <div className="flex relative flex-col">
+              <div>
+                {reply.children.map((child, index) => (
+                  <ReplyItemComponent
+                    key={child.cid}
+                    reply={child}
+                    depth={depth + 1}
+                    isLast={index === reply.children.length - 1}
+                    maxDepth={maxDepth}
+                  />
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 单个评论组件
+ * @param props 组件属性
+ * @returns JSX元素
+ * @description Root comment component
+ */
+const CommentItemComponent: React.FC<DouyinCommentData['CommentsData'][number] & { isLast?: boolean; maxDepth?: number }> = (props) => {
+  return (
+    <div className={cn('flex flex-col px-6 pt-8', { 'pb-0': props.isLast, 'pb-10': !props.isLast })}>
+      {/* 根网格 - 单列主体（根节点没有连接列） */}
+      <div className="flex flex-col min-w-0">
+        {/* 内部网格：头像 | 内容 */}
+        <div className="grid grid-cols-[140px_minmax(0,1fr)] relative">
+          {/* 内部第1列：头像 & 子线程线 */}
+          <div className="flex relative flex-col items-center">
+            {/* 头像 - 根节点更大 */}
+            <div className="w-35 h-35 shrink-0 z-10 relative">
+              <img src={props.userimageurl} className="w-35 h-35 rounded-full object-cover shadow-md bg-background" alt="用户头像" />
+            </div>
+
+            {/* 子线程线 */}
+            {props.replyComment && props.replyComment.length > 0 && (
+              <div className="w-0.5 bg-border-secondary h-full grow mt-4 rounded-t-full"></div>
+            )}
+          </div>
+
+          {/* 内部第2列：内容 */}
+          <div className="flex flex-col py-4 pl-6 min-w-0 gap-2">
+            {/* 头部 */}
+            <div className="flex flex-wrap gap-4 items-center mb-3 text-4xl select-text content-center">
+              <span className="font-normal text-muted">{props.nickname}</span>
+              {props.label_type === 1 && (
+                <div className="inline-flex items-center px-3 py-1 rounded-lg text-3xl bg-[#fe2c55] text-white">作者</div>
+              )}
+              {props.is_author_digged && props.status_label !== '作者赞过' && (
+                <div className="inline-flex items-center px-3 py-1 text-3xl font-light rounded-lg bg-surface-secondary text-foreground/80">
+                  作者赞过
+                </div>
+              )}
+              {props.status_label && (
+                <div className="inline-flex items-center px-3 py-1 text-3xl font-light rounded-lg bg-surface-secondary text-foreground/80">
+                  {props.status_label}
+                </div>
+              )}
+            </div>
+
+            <div
+              className="text-5xl text-foreground leading-normal whitespace-pre-wrap select-text"
+              style={{
+                wordBreak: 'break-word',
+                overflowWrap: 'break-word'
+              }}
+            >
+              {renderDouyinCommentRichText(props.text)}
+            </div>
+
+            {/* 评论图片 */}
+            {(props.commentimage || props.sticker) && (
+              <div className="my-6 overflow-hidden shadow-sm rounded-2xl max-w-200">
+                <img className="object-contain w-full h-auto rounded-2xl" src={props.commentimage || props.sticker} alt="评论图片" />
+              </div>
+            )}
+
+            <div className="flex justify-between items-center text-muted">
+              <div className="flex gap-6 items-center shrink-0">
+                <span className="text-4xl">{formatDouyinCommentTime(props.create_time)}</span>
+                <span className="text-4xl">{props.ip_label}</span>
+                <div className="flex gap-2 items-center transition-colors cursor-pointer">
+                  <DouyinLikeIcon size={44} />
+                  <span className="text-4xl select-text">{formatDouyinCommentDiggCount(props.digg_count)}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 回复容器 */}
+        {/*
+           根缩进调整：
+           根头像列为 140px。中心点为 70px。
+           子外部列为 100px。中心点为 50px。
+           
+           我们需要子中心点（50px）与根中心点（70px）对齐。
+           所以我们需要将子元素向右推 20px。
+           
+           容器上使用 pl-5。
+        */}
+        {props.replyComment && props.replyComment.length > 0 && (
+          <div className="flex relative flex-col mt-8 ml-5">
+            <div className="absolute -top-8 left-12.5 w-0.5 h-8 bg-border-secondary -ml-px"></div>
+            {organizeReplies(props.replyComment, props.cid || '', props.maxDepth).map((reply, index, arr) => (
+              <ReplyItemComponent key={reply.cid} reply={reply} depth={1} isLast={index === arr.length - 1} maxDepth={props.maxDepth} />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 抖音评论组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+export const DouyinComment: React.FC<PosterProps<DouyinCommentData>> = React.memo((props) => {
+  // 随机选择一个搜索词
+  const randomSuggestWord = () => {
+    if (props.data.suggestWrod && props.data.suggestWrod.length > 0) {
+      const randomIndex = Math.floor(Math.random() * props.data.suggestWrod.length)
+      return props.data.suggestWrod[randomIndex]
+    }
+    return null
+  }
+
+  return (
+    <DefaultLayout {...props}>
+      <div className="p-5 px-15">
+        <div className="h-20"></div>
+        {/* 视频信息头部 */}
+        <VideoInfoHeader {...props.data} useDarkTheme={isDark(props.ctx)} />
+
+        {/* 推荐搜索词 */}
+        {randomSuggestWord() && (
+          <div className="mx-auto my-20 mb-5 ml-10">
+            <div className="flex gap-3 items-center px-6 py-4 rounded-2xl">
+              <span className="text-5xl text-muted">大家都在搜：</span>
+              <span className="relative text-5xl text-[#04498d] dark:text-[#face15]">
+                {randomSuggestWord()}
+                <Search size={32} className="absolute -top-2 -right-8" />
+              </span>
+            </div>
+          </div>
+        )}
+        {/* {randomSuggestWord && (
+          <div className='mx-auto my-20 ml-10'>
+            <div className='flex gap-10 items-center px-6 py-4 rounded-2xl'>
+              <span className='text-5xl font-bold text-muted'>相关搜索</span>
+              <span className='flex gap-2 bg-surface py-5 px-5 rounded-3xl relative text-5xl text-[#04498d] dark:text-[#face15]'>
+                <Search size={50} />
+                {randomSuggestWord}
+                
+              </span>
+            </div>
+          </div>
+        )} */}
+
+        {/* 评论列表 */}
+        <div className="overflow-hidden mt-8">
+          {props.data.CommentsData.length > 0 ? (
+            <>
+              {props.data.CommentsData.map((comment, index) => (
+                <CommentItemComponent
+                  key={comment.cid || index}
+                  {...comment}
+                  isLast={index === props.data.CommentsData.length - 1}
+                  maxDepth={props.data.maxDepth}
+                />
+              ))}
+            </>
+          ) : (
+            <div className="flex justify-center items-center py-20 text-muted">
+              <div className="text-center">
+                <p className="text-xl">暂无评论数据</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </DefaultLayout>
+  )
+})
+
+export default DouyinComment