koishi-plugin-kkk 1.0.0

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

@@ -0,0 +1,170 @@
+import { Menu, ScanLine, ShieldCheck, Smartphone } from 'lucide-react'
+import React from 'react'
+import { RiArrowRightFill, RiTiktokFill } from 'react-icons/ri'
+
+import { isDark } from '../../../../utils/theme'
+import { DefaultLayout } from '../../../components/DefaultLayout'
+import { QRCodeWithAvatar } from '../../../components/QRCodeWithAvatar'
+import type { PosterProps } from '../../../types/ctx'
+import type { DouyinQrcodeImgData } from './types'
+
+/**
+ * 抖音二维码登录组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+export const DouyinQrcodeImg: React.FC<PosterProps<DouyinQrcodeImgData>> = React.memo((props) => {
+  const dark = isDark(props.ctx)
+
+  const theme = {
+    bg: dark ? '#000000' : '#FFFFFF',
+    text: dark ? '#FFFFFF' : '#000000',
+    subText: dark ? '#888888' : '#666666',
+    accent: '#FF2C55',
+    // 双色弥散
+    gradientTL: '#fe1700', // 左上
+    gradientBR: '#0fffff' // 右下
+  }
+
+  return (
+    <DefaultLayout
+      {...props}
+      className="relative overflow-hidden font-sans"
+      style={{
+        background: theme.bg,
+        color: theme.text
+      }}
+    >
+      {/* 1. 弥散模糊效果 */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        {/* 左上角主光辉 */}
+        <div
+          className="absolute top-[-40%] left-[-50%] w-400 h-600 rounded-full blur-[200px] opacity-25"
+          style={{ background: theme.gradientTL }}
+        />
+        {/* 右下角氛围光 */}
+        <div
+          className="absolute top-[80%] right-[-50%] w-400 h-600 rounded-full blur-[200px] opacity-25"
+          style={{ background: theme.gradientBR }}
+        />
+      </div>
+
+      {/* 2. 单色噪点层 */}
+      <div className="absolute inset-0 pointer-events-none" style={{ opacity: dark ? 0.16 : 0.2 }}>
+        <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
+          <filter id="pixelNoise" x="0%" y="0%" width="100%" height="100%">
+            <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" 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(#pixelNoise)" />
+        </svg>
+      </div>
+
+      <div className="relative z-10 flex flex-col items-center justify-center h-full py-40 px-24 space-y-32">
+        {/* 标题区 */}
+        <div className="text-center space-y-12">
+          {/* Title */}
+          <h1 className="text-8xl font-bold tracking-tight">
+            <span className="bg-linear-to-r from-foreground to-muted bg-clip-text text-transparent">扫码登录</span>
+          </h1>
+
+          {/* 操作步骤 */}
+          <div className="flex items-start justify-center gap-10 opacity-90" style={{ color: theme.text }}>
+            {/* Step 1 */}
+            <div className="flex flex-col items-center gap-4">
+              <div className="p-5 rounded-3xl bg-surface/50 backdrop-blur-md">
+                <RiTiktokFill size={64} />
+              </div>
+              <span className="text-[28px] font-medium tracking-wide">打开抖音</span>
+            </div>
+            <RiArrowRightFill size={40} className="mt-8 opacity-40" />
+            {/* Step 2 */}
+            <div className="flex flex-col items-center gap-4">
+              <div className="p-5 rounded-3xl bg-surface/50 backdrop-blur-md">
+                <Menu size={64} />
+              </div>
+              <span className="text-[28px] font-medium tracking-wide">左上角菜单</span>
+            </div>
+            <RiArrowRightFill size={40} className="mt-8 opacity-40" />
+            {/* Step 3 */}
+            <div className="flex flex-col items-center gap-4">
+              <div className="p-5 rounded-3xl bg-surface/50 backdrop-blur-md">
+                <ScanLine size={64} />
+              </div>
+              <span className="text-[28px] font-medium tracking-wide">顶部扫一扫</span>
+            </div>
+          </div>
+        </div>
+
+        {/* 二维码 */}
+        <div className="relative group">
+          <div
+            className="relative p-4"
+            style={{
+              width: '800px',
+              height: '800px'
+            }}
+          >
+            {props.data.share_url ? (
+              <QRCodeWithAvatar
+                value={props.data.share_url}
+                avatarUrl={props.data.avatarUrl}
+                useDarkTheme={dark}
+                alt="QR Code"
+                className="w-full h-full object-contain"
+              />
+            ) : (
+              <div className="w-full h-full flex flex-col items-center justify-center gap-8">
+                <div className="w-24 h-24 border-4 border-gray-200 border-t-black rounded-full animate-spin" />
+              </div>
+            )}
+          </div>
+
+          {/* 倒计时 */}
+          <div className="absolute -bottom-24 left-0 right-0 text-center">
+            <p className="text-[28px] font-medium tracking-wide flex items-center justify-center gap-3" style={{ color: theme.subText }}>
+              <span className="h-6 w-1.5 rounded-full bg-danger shadow-[0_0_8px_rgba(255,44,85,0.8)]"></span>
+              此二维码 120 秒内有效，请及时扫码登录。
+            </p>
+          </div>
+        </div>
+
+        {/* 底部信息 */}
+        <div className="w-full max-w-225 grid grid-cols-2 gap-24 pt-20">
+          <div className="flex flex-col items-start space-y-6 mt-1.5">
+            <div className="flex items-center justify-center w-16 h-16 mb-2">
+              <Smartphone size={64} style={{ color: theme.text }} strokeWidth={1} />
+            </div>
+            <h3 className="text-[40px] font-bold" style={{ color: theme.text }}>
+              扫码登录说明
+            </h3>
+            <p className="text-[24px] leading-relaxed opacity-60" style={{ color: theme.text }}>
+              抖音目前仅禁止相册扫码，无法通过截图在本机自助登录，请在另一台设备上展示二维码，并使用手机抖音扫码完成登录。
+            </p>
+          </div>
+
+          <div className="flex flex-col items-start space-y-6">
+            <div className="flex items-center justify-center w-16 h-16 mb-2">
+              <ShieldCheck size={64} style={{ color: theme.text }} strokeWidth={1} />
+            </div>
+            <h3 className="text-[40px] font-bold" style={{ color: theme.text }}>
+              安全承诺
+            </h3>
+            <p className="text-[24px] leading-relaxed opacity-60" style={{ color: theme.text }}>
+              扫码后仅会在本地获取您的登录凭据（CK），用于视频解析等相关业务，不会上传至任何第三方，也不会用于与本工具无关的操作，请在可信环境下使用本功能。
+            </p>
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  )
+})
+
+DouyinQrcodeImg.displayName = 'DouyinQrcodeImg'
+
+export default DouyinQrcodeImg

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

@@ -0,0 +1,9 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+
+/** 抖音二维码登录组件属性 */
+export interface DouyinQrcodeImgData {
+  /** 分享链接（用于生成自定义二维码） */
+  share_url?: string
+  /** 触发登录的用户头像 URL，嵌入二维码中心作为 logo；缺省时生成普通二维码 */
+  avatarUrl?: string
+}

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

@@ -0,0 +1,9 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { DouyinQrcodeImg } from './components/qrcodeImg'
+
+export default defineTemplate({
+  name: '登录二维码',
+  description: '抖音登录二维码展示模板',
+  component: DouyinQrcodeImg
+})

package/src/ktr/template/douyin/recommend-list/components/RecommendList.tsx

@@ -0,0 +1,201 @@
+import { format } from 'date-fns'
+import { Quote } 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, DouyinRecommendIcon, DouyinShareIcon } from '../../components/Icons'
+import type { DouyinRecommendListData } from './types'
+
+/**
+ * 抖音推荐列表组件
+ */
+export const DouyinRecommendList: React.FC<PosterProps<DouyinRecommendListData>> = (props) => {
+  const dark = isDark(props.ctx)
+
+  // 弥散光颜色配置 - 绿色 + 蓝色
+  const glowColors = dark
+    ? {
+        primary: 'rgba(16, 185, 129, 0.15)', // Emerald-500 (Green)
+        secondary: 'rgba(59, 130, 246, 0.15)' // Blue-500 (Blue)
+      }
+    : {
+        primary: 'rgba(34, 197, 94, 0.25)', // Green-500
+        secondary: 'rgba(59, 130, 246, 0.25)' // Blue-500
+      }
+
+  return (
+    <DefaultLayout {...props} className="relative overflow-hidden bg-surface">
+      {/* 1. 弥散光背景层 */}
+      <div className="absolute inset-0 pointer-events-none z-0">
+        <div
+          className="absolute rounded-full w-full h-[60%] top-[-20%] left-[-20%] blur-[150px]"
+          style={{ background: glowColors.primary }}
+        />
+        <div
+          className="absolute rounded-full w-full h-[60%] bottom-[-20%] right-[-20%] blur-[180px]"
+          style={{ background: glowColors.secondary }}
+        />
+      </div>
+
+      {/* 2. 杂色纹理层 */}
+      <div className={'absolute inset-0 pointer-events-none z-10 mix-blend-overlay'}>
+        <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
+          <filter id="noiseFilter">
+            <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch" />
+            <feColorMatrix type="saturate" values="0" />
+          </filter>
+          <rect width="100%" height="100%" filter="url(#noiseFilter)" />
+        </svg>
+      </div>
+
+      {/* 3. 主要内容区域 */}
+      <div className="relative z-20 p-12 pb-0 grid grid-cols-12 gap-12 min-h-150 items-stretch">
+        {/* 左侧 */}
+        <div className="col-span-4 flex flex-col justify-between py-8">
+          {/* 顶部 Branding */}
+          <div className="flex flex-col gap-1 select-none">
+            <span className="text-6xl font-black text-foreground/10 tracking-tighter leading-none">DOUYIN</span>
+            <span className="text-6xl font-black text-emerald-500/20 tracking-tighter leading-none">RECOMMEND</span>
+            <div className="flex items-center gap-3 mt-2">
+              <div className="h-1.5 w-16 bg-emerald-500 rounded-full"></div>
+              <span className="text-base text-muted font-mono tracking-widest uppercase">Push Notification</span>
+            </div>
+          </div>
+
+          {/* 中间 */}
+          <div className="flex flex-col gap-10 relative">
+            {/* 装饰图形 */}
+            <div className="absolute -left-8 top-10 w-16 h-16 rounded-full border-4 border-emerald-300/30 animate-[bounce_4s_infinite]"></div>
+
+            {/* 装饰图形 */}
+            <div className="absolute right-10 -top-4 w-6 h-6 rounded-full bg-blue-300/40"></div>
+
+            <div className="relative w-fit self-center">
+              <div className="absolute -inset-8 bg-linear-to-br from-emerald-400 to-blue-400 rounded-full blur-2xl opacity-40 animate-pulse"></div>
+              {/* 装饰图形 */}
+              <div className="absolute -inset-4 rounded-full border-2 border-dashed border-emerald-400/30 animate-[spin_10s_linear_infinite]"></div>
+
+              <img
+                src={props.data.recommender_avatar}
+                className="relative w-64 h-64 rounded-full border-[6px] border-white object-cover shadow-2xl"
+                alt="Recommender"
+              />
+              <div className="absolute -bottom-3 -right-3 bg-emerald-500 text-white px-5 py-2 rounded-full border-[5px] border-white font-bold text-xl shadow-xl flex items-center gap-2">
+                <DouyinRecommendIcon size={20} />
+                <span>推荐</span>
+              </div>
+            </div>
+
+            <div className="flex flex-col items-center text-center">
+              <span className="text-6xl font-black text-foreground leading-tight relative">
+                {props.data.recommender_username}
+                {/* 装饰图形 */}
+                <svg className="absolute -right-8 -top-2 text-blue-400 w-8 h-8 opacity-60" viewBox="0 0 24 24" fill="currentColor">
+                  <path d="M12 2l2.4 7.2h7.6l-6 4.8 2.4 7.2-6-4.8-6 4.8 2.4-7.2-6-4.8h7.6z" />
+                </svg>
+              </span>
+              <div className="px-6 py-6 pt-0 rounded-full text-2xl text-muted font-mono">@{props.data.recommender_douyin_id}</div>
+
+              <div className="mt-6 flex flex-col items-center gap-2 text-emerald-500">
+                <div className="flex items-center gap-3">
+                  <DouyinRecommendIcon size={40} />
+                  <span className="text-4xl font-bold">刚刚推荐了这个作品</span>
+                </div>
+                {/* 装饰线条 */}
+                <svg width="200" height="20" viewBox="0 0 200 20" className="opacity-60">
+                  <path d="M0 10 Q 50 20, 100 10 T 200 10" stroke="currentColor" strokeWidth="3" fill="none" strokeLinecap="round" />
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          {/* 底部 */}
+          <div className="flex flex-col gap-8 relative">
+            {/* 装饰图形 */}
+            <div className="absolute left-4 bottom-4 w-32 h-32 bg-emerald-500/5 rounded-2xl -z-10 rotate-12"></div>
+
+            <div className="h-px w-full bg-linear-to-r from-surface-secondary via-border to-transparent"></div>
+            <div className="flex items-end gap-6">
+              <QRCodeWithAvatar
+                value={props.data.share_url}
+                avatarUrl={props.data.author_avatar}
+                useDarkTheme={dark}
+                className="w-65 h-auto rounded-2xl mix-blend-multiply"
+                alt="QR"
+              />
+              <div className="flex flex-col justify-end h-56 pb-2">
+                <span className="text-muted text-sm font-mono mb-2">SCAN TO VIEW</span>
+                <span className="text-3xl font-bold text-foreground/80 leading-none">{format(new Date(), 'HH:mm')}</span>
+                <span className="text-lg text-muted font-medium">{format(new Date(), 'yyyy.MM.dd')}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* 右侧 */}
+        <div className="col-span-8 h-full">
+          <div className="h-full bg-surface/60 backdrop-blur-xl rounded-[3rem] p-10 border border-border flex flex-col gap-8 shadow-2xl relative overflow-hidden">
+            {/* 作者信息栏 */}
+            <div className="flex items-center justify-between z-10">
+              <div className="flex items-center gap-6 flex-1 min-w-0 mr-6">
+                <img
+                  src={props.data.author_avatar}
+                  className="w-24 h-24 rounded-full border-2 border-surface shadow-md shrink-0"
+                  alt="Author"
+                />
+                <div className="flex flex-col gap-1 min-w-0">
+                  <span className="text-4xl font-bold text-foreground/90 truncate" title={props.data.author_username}>
+                    {props.data.author_username}
+                  </span>
+                  <span className="text-xl text-muted font-mono truncate">抖音号: {props.data.author_douyin_id}</span>
+                </div>
+              </div>
+              <div className="px-6 py-3 bg-surface/80 backdrop-blur-md rounded-full text-muted font-medium text-lg shrink-0">
+                发布于 {props.data.create_time.split(' ')[0]}
+              </div>
+            </div>
+
+            {/* 封面图 */}
+            <div className="flex-1 relative rounded-[2.5rem] overflow-hidden group shadow-inner bg-black/5">
+              <img src={props.data.image_url} className="w-full h-full object-cover transition-transform duration-700" alt="Cover" />
+              {/* 描述遮罩 */}
+              <div className="absolute inset-x-0 bottom-0 pt-40 pb-12 px-12 bg-linear-to-t from-black/90 via-black/50 to-transparent">
+                <div className="flex gap-6 items-start">
+                  <Quote size={48} className="text-emerald-500/90 shrink-0 rotate-180 mt-2" />
+                  <div
+                    className="text-white text-4xl font-medium leading-relaxed line-clamp-3 drop-shadow-lg tracking-wide"
+                    dangerouslySetInnerHTML={{ __html: props.data.desc || '分享视频' }}
+                  />
+                </div>
+              </div>
+            </div>
+
+            {/* 统计数据 */}
+            <div className="grid grid-cols-5 gap-6 z-10">
+              <StatItem icon={DouyinLikeIcon} value={props.data.dianzan} />
+              <StatItem icon={DouyinRecommendIcon} value={props.data.tuijian} iconColor="#13C15A" />
+              <StatItem icon={DouyinCommentIcon} value={props.data.pinglun} />
+              <StatItem icon={DouyinFavoriteIcon} value={props.data.shouchang} />
+              <StatItem icon={DouyinShareIcon} value={props.data.share} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  )
+}
+
+/** 统计项小组件 */
+const StatItem: React.FC<{
+  icon: React.ComponentType<{ size?: number; className?: string; color?: string }>
+  value: string
+  iconColor?: string
+}> = ({ icon: IconComponent, value, iconColor }) => (
+  <div className="flex flex-col items-center justify-center gap-2 py-6 rounded-3xl bg-surface">
+    <IconComponent size={48} color={iconColor} className="opacity-90" />
+    <span className="text-2xl font-bold text-foreground/70 mt-1">{value}</span>
+  </div>
+)

package/src/ktr/template/douyin/recommend-list/components/types.ts

@@ -0,0 +1,37 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+
+/**
+ * 抖音推荐列表组件属性接口
+ */
+export interface DouyinRecommendListData {
+  /** 图片URL */
+  image_url: string
+  /** 描述内容 */
+  desc: string
+  /** 点赞数 */
+  dianzan: string
+  /** 评论数 */
+  pinglun: string
+  /** 收藏数 */
+  shouchang: string
+  /** 推荐数 */
+  tuijian: string
+  /** 分享数 */
+  share: string
+  /** 创建时间 */
+  create_time: string
+  /** 推荐者（订阅者）用户名 */
+  recommender_username: string
+  /** 推荐者头像URL */
+  recommender_avatar: string
+  /** 推荐者抖音号 */
+  recommender_douyin_id: string
+  /** 作品作者用户名 */
+  author_username: string
+  /** 作品作者头像URL */
+  author_avatar: string
+  /** 作品作者抖音号 */
+  author_douyin_id: string
+  /** 分享链接 */
+  share_url: string
+}

package/src/ktr/template/douyin/recommend-list/index.tsx

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

package/src/ktr/template/douyin/user_profile/components/UserVideoList.tsx

@@ -0,0 +1,225 @@
+import { formatDistanceToNow } from 'date-fns'
+import { zhCN } from 'date-fns/locale'
+import React from 'react'
+import { AiFillPushpin, AiOutlineVideoCamera } from 'react-icons/ai'
+import { BiImage } from 'react-icons/bi'
+import { FaMusic, FaTiktok, FaUserGroup } from 'react-icons/fa6'
+import { MdLightbulbOutline, MdLocationOn } from 'react-icons/md'
+import { RiUserFollowLine, RiVerifiedBadgeFill } from 'react-icons/ri'
+
+import { DefaultLayout } from '../../../components/DefaultLayout'
+import type { PosterProps } from '../../../types/ctx'
+import { DouyinCommentIcon, DouyinFavoriteIcon, DouyinLikeIcon, DouyinShareIcon } from '../../components/Icons'
+import type { DouyinUserVideoListData } from './types'
+
+/**
+ * 格式化数字显示 (使用中文单位：万、亿)
+ */
+const formatCount = (count: number): string => {
+  if (count >= 100000000) return (count / 100000000).toFixed(1) + '亿'
+  if (count >= 10000) return (count / 10000).toFixed(1) + '万'
+  return count.toString()
+}
+
+/**
+ * 格式化视频时长显示 (如: 6:20)
+ * @param milliseconds 毫秒数
+ */
+const formatDuration = (milliseconds: number): string => {
+  const seconds = Math.floor(milliseconds / 1000)
+  const mins = Math.floor(seconds / 60)
+  const secs = seconds % 60
+  return `${mins}:${secs.toString().padStart(2, '0')}`
+}
+
+/**
+ * 单个视频卡片组件
+ */
+const VideoCard: React.FC<{ video: DouyinUserVideoListData['videos'][number] }> = ({ video }) => {
+  const titleRef = React.useRef<HTMLHeadingElement>(null)
+
+  return (
+    <div className="bg-surface rounded-3xl overflow-hidden flex flex-col h-full">
+      {/* 视频封面 - 固定 3:4 比例 */}
+      <div className="relative bg-foreground overflow-hidden" style={{ aspectRatio: '3 / 4' }}>
+        <img src={video.cover} alt={video.title} className="w-full h-full object-cover" />
+
+        {/* 左上角索引标签 */}
+        {video.index && (
+          <div className="absolute top-4 left-4 px-6 py-4 rounded-2xl text-4xl font-bold bg-black/40 text-white backdrop-blur-md shadow-lg border border-white/10 z-10">
+            {video.index}
+          </div>
+        )}
+
+        {/* 视频/图集标签 */}
+        <div className="absolute top-4 right-4 flex flex-col gap-2">
+          <div className="px-6 py-4 rounded-2xl text-4xl bg-white/50 text-black backdrop-blur-xs shadow-lg flex items-center gap-2">
+            {video.is_video ? <AiOutlineVideoCamera size={34} /> : <BiImage size={34} />}
+            <span>{video.is_video ? '视频' : '图集'}</span>
+          </div>
+          {video.is_top && (
+            <div className="px-6 py-4 rounded-2xl text-4xl bg-warning text-black backdrop-blur-xs shadow-lg flex items-center gap-2">
+              <AiFillPushpin size={34} />
+              <span>置顶</span>
+            </div>
+          )}
+        </div>
+
+        {/* 时长标签（仅视频显示） */}
+        {video.is_video && (
+          <div className="absolute bottom-4 right-4 px-8 py-3 rounded-2xl text-4xl bg-white/50 text-black backdrop-blur-xs shadow-lg">
+            {formatDuration(video.duration)}
+          </div>
+        )}
+
+        {/* 背景音乐图标 */}
+        {video.music && (
+          <div className="absolute bottom-4 left-4 flex items-center gap-2 px-6 py-3 rounded-2xl text-xl bg-white/50 text-black backdrop-blur-xs shadow-lg">
+            <FaMusic size={34} />
+            <span className="max-w-80 truncate">{video.music.title}</span>
+          </div>
+        )}
+      </div>
+
+      {/* 视频信息 */}
+      <div className="p-4 px-8 pb-8 flex flex-col flex-1">
+        {/* 标题 */}
+        <h3 ref={titleRef} className="text-4xl font-semibold text-foreground line-clamp-2 my-2">
+          {video.title || '无标题'}
+        </h3>
+
+        {/* 发布时间 */}
+        <p className="text-3xl text-foreground/70 mb-8">
+          {formatDistanceToNow(new Date(video.create_time * 1000), {
+            locale: zhCN,
+            addSuffix: true
+          })}
+        </p>
+
+        {/* 统计数据 */}
+        <div className="mt-auto">
+          <div className="grid grid-cols-2 gap-3 text-3xl">
+            <div className="flex items-center gap-2 text-foreground/70">
+              <DouyinLikeIcon size={34} />
+              <span>{formatCount(video.statistics.like_count)}</span>
+            </div>
+            <div className="flex items-center gap-2 text-foreground/70">
+              <DouyinCommentIcon size={34} />
+              <span>{formatCount(video.statistics.comment_count)}</span>
+            </div>
+            <div className="flex items-center gap-2 text-foreground/70">
+              <DouyinFavoriteIcon size={34} />
+              <span>{formatCount(video.statistics.collect_count)}</span>
+            </div>
+            <div className="flex items-center gap-2 text-foreground/70">
+              <DouyinShareIcon size={34} />
+              <span>{formatCount(video.statistics.share_count)}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 抖音用户视频列表页面组件
+ */
+export const DouyinUserVideoList: React.FC<PosterProps<DouyinUserVideoListData>> = (prpos) => {
+  return (
+    <DefaultLayout {...prpos}>
+      {/* 头部背景图片 - 占满宽度 */}
+      {prpos.data.user.head_image && (
+        <div className="relative w-full overflow-hidden">
+          <img src={prpos.data.user.head_image} alt="头部背景" className="w-full h-auto object-cover" />
+          {/* 渐变遮罩 - 从图片渐变到 bg-surface */}
+          <div className="absolute inset-0 bg-linear-to-b from-transparent via-surface/40 to-surface" />
+        </div>
+      )}
+
+      <div className="flex justify-center">
+        <div className="px-20">
+          {/* 用户信息头部 */}
+          <div
+            className={`bg-surface/60 backdrop-blur-xl mb-30 rounded-4xl p-10 relative ${prpos.data.user.head_image ? '-mt-170' : 'mt-35'}`}
+          >
+            {/* 上部分：头像、名称、抖音号、IP、用户统计 */}
+            <div className="flex items-start gap-8 pb-8 border-b border-border mb-8">
+              {/* 用户头像 */}
+              <img src={prpos.data.user.avatar} alt={prpos.data.user.nickname} className="w-45 h-auto rounded-2xl object-cover shrink-0" />
+              {/* 用户信息 */}
+              <div className="flex-1">
+                <div className="flex items-center gap-3 mb-4">
+                  <h1 className="text-6xl font-bold text-foreground">{prpos.data.user.nickname}</h1>
+                  {prpos.data.user.verified && <RiVerifiedBadgeFill size={40} className="text-accent" />}
+                </div>
+
+                {/* 抖音号和 IP 属地 */}
+                <div className="flex gap-6 mb-6 text-2xl text-muted">
+                  <span className="flex items-center gap-2">
+                    <FaTiktok size={24} /> 抖音号：{prpos.data.user.short_id}
+                  </span>
+                  {prpos.data.user.ip_location && (
+                    <span className="flex items-center gap-1">
+                      <MdLocationOn size={28} /> {prpos.data.user.ip_location}
+                    </span>
+                  )}
+                </div>
+
+                {/* 用户统计 */}
+                <div className="flex gap-8 text-3xl">
+                  <div className="flex items-center gap-2">
+                    <RiUserFollowLine size={28} className="text-muted" />
+                    <span className="text-muted">关注</span>
+                    <span className="font-medium text-4xl text-foreground"> {formatCount(prpos.data.user.following_count)}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <FaUserGroup size={28} className="text-muted" />
+                    <span className="text-muted">粉丝</span>
+                    <span className="font-medium text-4xl text-foreground"> {formatCount(prpos.data.user.follower_count)}</span>
+                  </div>
+                  <div className="flex items-center gap-2">
+                    <DouyinLikeIcon size={28} />
+                    <span className="text-muted">获赞</span>
+                    <span className="font-medium text-4xl  text-foreground"> {formatCount(prpos.data.user.total_favorited)}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* 下部分：用户签名 */}
+            <p className="text-3xl text-foreground/80 line-clamp-3">{prpos.data.user.signature || '这个用户很懒，还没有签名'}</p>
+          </div>
+
+          {/* 提示信息卡片 */}
+          {prpos.data.timeoutSeconds && (
+            <div className="bg-surface/60 backdrop-blur-xl mb-8 rounded-4xl p-6 border border-border/50 shadow-sm flex justify-center items-center">
+              <p className="text-3xl text-foreground/80 font-medium flex items-center gap-3">
+                <MdLightbulbOutline size={40} className="text-warning" />
+                <span>
+                  请在 {prpos.data.timeoutSeconds} 秒内发送 <span className="text-accent font-bold">1~{prpos.data.videos.length}</span>{' '}
+                  之间的数字解析对应作品。例如发送“1”解析第一个作品
+                </span>
+              </p>
+            </div>
+          )}
+
+          {/* 视频网格 */}
+          {prpos.data.videos.length > 0 ? (
+            <>
+              <div className="grid grid-cols-2 gap-6 mb-8">
+                {prpos.data.videos.map((video) => (
+                  <VideoCard key={video.aweme_id} video={video} />
+                ))}
+              </div>
+            </>
+          ) : (
+            <div className="text-center py-20">
+              <p className="text-[32px] text-muted">暂无视频内容</p>
+            </div>
+          )}
+        </div>
+      </div>
+    </DefaultLayout>
+  )
+}