koishi-plugin-kkk 1.0.0

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

@@ -0,0 +1,71 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+
+/**
+ * 用户视频列表页面的数据类型定义
+ */
+type VideoListItem = {
+  /** 视频ID */
+  aweme_id: string
+  /** 视频索引 */
+  index?: number
+  /** 是否置顶 */
+  is_top: boolean
+  /** 视频标题/描述 */
+  title: string
+  /** 视频封面URL */
+  cover: string
+  /** 视频时长（秒） */
+  duration: number
+  /** 创建时间戳 */
+  create_time: number
+  /** 统计数据 */
+  statistics: {
+    /** 点赞数 */
+    like_count: number
+    /** 评论数 */
+    comment_count: number
+    /** 分享数 */
+    share_count: number
+    /** 收藏数 */
+    collect_count: number
+  }
+  /** 是否为视频(true)还是图集(false) */
+  is_video: boolean
+  /** 背景音乐信息 */
+  music?: {
+    /** 音乐标题 */
+    title: string
+    /** 音乐作者 */
+    author: string
+  }
+}
+
+export type DouyinUserVideoListData = {
+  /** 用户基本信息 */
+  user: {
+    /** 头像图片（可能为 null） */
+    head_image: string | null
+    /** 用户昵称 */
+    nickname: string
+    /** 抖音号 */
+    short_id: string
+    /** 头像URL */
+    avatar: string
+    /** 用户签名/简介 */
+    signature: string
+    /** 粉丝数 */
+    follower_count: number
+    /** 关注数 */
+    following_count: number
+    /** 获赞总数 */
+    total_favorited: number
+    /** 是否认证 */
+    verified: boolean
+    /** IP属地 */
+    ip_location: string
+  }
+  /** 视频列表 */
+  videos: Array<VideoListItem>
+  /** 超时秒数 */
+  timeoutSeconds?: number
+}

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

@@ -0,0 +1,9 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { DouyinUserVideoList } from './components/UserVideoList'
+
+export default defineTemplate({
+  name: '用户主页',
+  description: '抖音用户主页信息模板',
+  component: DouyinUserVideoList
+})

package/src/ktr/template/douyin/userlist/components/UserList.tsx

@@ -0,0 +1,229 @@
+import { Clapperboard, Hash, Radio, UserPlus, UsersRound } from 'lucide-react'
+import React from 'react'
+
+import { isDark } from '../../../../utils/theme'
+import { DefaultLayout } from '../../../components/DefaultLayout'
+import type { PosterProps } from '../../../types/ctx'
+import { DouyinLikeIcon, DouyinRecommendIcon } from '../../components/Icons'
+import type { DouyinUserListData } from './types'
+
+const pushTypeConfig: Record<string, { label: string; color: string; icon: React.ComponentType<any> }> = {
+  post: { label: '作品更新', color: 'bg-accent/5 text-accent/80 border-accent/12', icon: Clapperboard },
+  favorite: { label: '喜欢列表', color: 'bg-[#d94f50]/5 text-[#b04546] border-[#d94f50]/12', icon: DouyinLikeIcon },
+  recommend: { label: '推荐列表', color: 'bg-[#c9943a]/5 text-[#a07d30] border-[#c9943a]/12', icon: DouyinRecommendIcon },
+  live: { label: '直播状态', color: 'bg-[#3aa876]/5 text-[#2e8a5e] border-[#3aa876]/12', icon: Radio }
+}
+
+/**
+ * 抖音用户项组件
+ */
+const DouyinUserItem: React.FC<DouyinUserListData['renderOpt'][number]> = (props) => {
+  return (
+    <li className="relative group overflow-hidden rounded-4xl bg-surface/60 border border-border/50 backdrop-blur-xl shadow-xl">
+      {/* 渐进式模糊背景 - Progressive Blur Background */}
+      <div className="absolute inset-0 pointer-events-none z-0 overflow-hidden">
+        <img
+          src={props.avatar_img}
+          alt=""
+          className="w-full h-full object-cover opacity-20 blur-3xl scale-150 saturate-100 brightness-110"
+          style={{
+            maskImage: 'linear-gradient(135deg, black 0%, transparent 100%)',
+            WebkitMaskImage: 'linear-gradient(135deg, black 0%, transparent 100%)'
+          }}
+        />
+      </div>
+
+      {/* SVG 噪点 (作为卡片内层叠加) */}
+      <div className="absolute inset-0 pointer-events-none z-0 opacity-[0.08] mix-blend-overlay">
+        <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
+          <filter id="cardNoise" x="0%" y="0%" width="100%" height="100%">
+            <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" 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(#cardNoise)" />
+        </svg>
+      </div>
+
+      {/* 内容区域 */}
+      <div className="relative z-10 p-6 flex flex-col gap-4">
+        <div className="flex items-center gap-4">
+          <div className="w-20 h-20 rounded-full p-1 bg-surface/20 backdrop-blur-md border border-border/30 shadow-lg shrink-0">
+            <img src={props.avatar_img} alt="Avatar" className="w-full h-full rounded-full object-cover" />
+          </div>
+
+          <div className="flex-1 min-w-0">
+            <h3 className="text-3xl font-black tracking-tight text-foreground truncate drop-shadow-sm mb-1.5">{props.username}</h3>
+            <span className="inline-flex items-center gap-1 px-2 py-1 rounded-md bg-surface/50 border border-border/50 text-xs font-mono font-bold text-muted">
+              <Hash size={12} className="opacity-70" />
+              {props.short_id}
+            </span>
+          </div>
+
+          <div
+            className={`px-4 py-2 rounded-full border-2 border-background flex items-center gap-2 shadow-md shrink-0 ${
+              props.switch ? 'bg-success text-white' : 'bg-danger text-danger-foreground'
+            }`}
+          >
+            <div className={`w-2 h-2 rounded-full ${props.switch ? 'bg-white' : 'bg-border'}`} />
+            <span className="text-xs font-bold uppercase tracking-wider leading-none">{props.switch ? 'ON' : 'OFF'}</span>
+          </div>
+        </div>
+
+        <div className="flex gap-6">
+          {/* 左侧 */}
+          <div className="flex gap-2.5">
+            {Object.entries(pushTypeConfig).map(([type, config]) => {
+              const isActive = props.pushTypes?.includes(type)
+              return (
+                <div
+                  key={type}
+                  className={`px-2.5 py-3 rounded-xl border flex flex-col items-center gap-2.5 transition-colors duration-200 ${
+                    isActive ? config.color : 'bg-surface/50 text-muted border-transparent dark:bg-surface/10'
+                  }`}
+                >
+                  <config.icon size={20} className={isActive ? '' : 'opacity-50'} />
+                  <span className="text-xs font-bold whitespace-nowrap tracking-wide" style={{ writingMode: 'vertical-rl' }}>
+                    {config.label}
+                  </span>
+                </div>
+              )
+            })}
+          </div>
+
+          {/* 右侧 */}
+          <div className="flex-1 flex flex-col gap-2">
+            {[
+              { icon: UsersRound, value: props.fans, label: '粉丝' },
+              { icon: DouyinLikeIcon, value: props.total_favorited, label: '获赞' },
+              { icon: UserPlus, value: props.following_count, label: '关注' }
+            ].map((item, index) => {
+              const StatIcon = item.icon
+              return (
+                <div
+                  key={index}
+                  className="flex items-center gap-3 px-4 py-2 rounded-lg bg-surface-secondary/30 border border-border/30 backdrop-blur-sm"
+                >
+                  <StatIcon size={20} className="text-muted shrink-0" />
+                  <div className="flex items-baseline gap-2 flex-1">
+                    <span className="text-base font-bold font-mono text-foreground">{item.value}</span>
+                    <span className="text-xs text-muted font-medium">{item.label}</span>
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+    </li>
+  )
+}
+
+/**
+ * 抖音用户列表组件
+ */
+const DouyinUserList: React.FC<PosterProps<DouyinUserListData>> = (props) => {
+  const dark = isDark(props.ctx)
+
+  // 抖音配色：Danger红 (#ef4444) + 黑色 (#000000)
+  const primaryColor = dark ? '#ef4444' : '#dc2626' // Red-500/600
+  const secondaryColor = dark ? '#000000' : '#171717' // Black/Neutral-900
+
+  return (
+    <DefaultLayout
+      {...props}
+      className="relative overflow-hidden bg-background"
+      style={{
+        width: '1440px',
+        minHeight: '600px'
+      }}
+    >
+      {/* 1. 弥散光背景层 */}
+      <div className="absolute inset-0 pointer-events-none z-0">
+        <div
+          className="absolute rounded-full w-350 h-350 -top-125 -left-100 blur-[150px] opacity-15 dark:opacity-10"
+          style={{
+            background: `radial-gradient(circle, ${primaryColor} 0%, transparent 70%)`
+          }}
+        />
+        <div
+          className="absolute rounded-full w-300 h-300 top-25 -right-100 blur-[140px] opacity-10 dark:opacity-20"
+          style={{
+            background: `radial-gradient(circle, ${secondaryColor} 0%, transparent 70%)`
+          }}
+        />
+      </div>
+
+      {/* 2. 全局噪点纹理 */}
+      <div className="absolute inset-0 pointer-events-none z-0 opacity-[0.08]">
+        <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
+          <filter id="globalNoise" x="0%" y="0%" width="100%" height="100%">
+            <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" 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(#globalNoise)" />
+        </svg>
+      </div>
+
+      {/* 3. 几何装饰 */}
+      <div className="absolute inset-0 pointer-events-none z-0">
+        <div className="absolute left-16 top-0 bottom-0 w-px bg-linear-to-b from-transparent via-border to-transparent" />
+        <div className="absolute top-0 right-0 p-16 opacity-10">
+          <svg width="400" height="400" viewBox="0 0 400 400" fill="none" xmlns="http://www.w3.org/2000/svg" className="text-foreground">
+            <rect x="100" y="100" width="200" height="200" stroke="currentColor" strokeWidth="1" />
+            <path d="M200 0V400M0 200H400" stroke="currentColor" strokeWidth="0.5" />
+            <circle cx="200" cy="200" r="50" fill="currentColor" fillOpacity="0.1" />
+          </svg>
+        </div>
+      </div>
+
+      {/* 主要内容区域 */}
+      <div className="relative z-10 px-24 py-20 flex flex-col min-h-150">
+        {/* 极简头部 */}
+        <div className="flex justify-between items-end mb-16">
+          <div>
+            <div className="flex items-center gap-3 mb-4">
+              {/* 群头像 */}
+              <div className="w-10 h-10 rounded-xl overflow-hidden shadow-lg border border-border/30">
+                <img src={props.data.groupInfo.groupAvatar} alt="Group Avatar" className="w-full h-full object-cover" />
+              </div>
+              <span className="font-mono text-sm font-bold tracking-widest uppercase opacity-50 text-foreground">Douyin Monitor</span>
+            </div>
+            <h1 className="text-7xl font-black text-foreground tracking-tighter mb-2">{props.data.groupInfo.groupName}</h1>
+            <p className="font-mono text-xl opacity-40 text-foreground flex items-center gap-2">
+              <span>GROUP_ID</span>
+              <span className="w-12 h-px bg-current opacity-50" />
+              <span>{props.data.groupInfo.groupId}</span>
+            </p>
+          </div>
+
+          <div className="text-right">
+            {/* 字体黑白灰渐变 */}
+            <div className="text-8xl font-black text-transparent bg-clip-text bg-linear-to-b from-foreground to-muted leading-none">
+              {String(props.data.renderOpt.length).padStart(2, '0')}
+            </div>
+            <div className="text-sm font-bold tracking-[0.3em] uppercase opacity-40 mt-2 text-foreground">Monitoring</div>
+          </div>
+        </div>
+
+        {/* 用户列表网格 */}
+        <ul className="grid grid-cols-2 gap-x-10 gap-y-10">
+          {props.data.renderOpt.map((user, index) => (
+            <DouyinUserItem key={`${user.short_id}-${index}`} {...user} />
+          ))}
+        </ul>
+      </div>
+    </DefaultLayout>
+  )
+}
+
+export default DouyinUserList

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

@@ -0,0 +1,35 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+
+/**
+ * 抖音用户列表组件属性接口
+ */
+export interface DouyinUserListData {
+  /** 群组信息 */
+  groupInfo: {
+    /** 群号 */
+    groupId: string
+    /** 群名称 */
+    groupName: string
+    /** 群头像 */
+    groupAvatar: string
+  }
+  /** 用户列表数据 */
+  renderOpt: {
+    /** 用户头像图片URL */
+    avatar_img: string
+    /** 用户名 */
+    username: string
+    /** 抖音短ID */
+    short_id: string
+    /** 粉丝数 */
+    fans: string
+    /** 获赞总数 */
+    total_favorited: string
+    /** 关注数 */
+    following_count: string
+    /** 全局推送开关状态 */
+    switch: boolean
+    /** 推送类型列表 */
+    pushTypes: string[]
+  }[]
+}

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

@@ -0,0 +1,11 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import type { DouyinUserListData } from './components/types'
+import DouyinUserList from './components/UserList'
+
+export default defineTemplate({
+  name: '抖音推送列表',
+  description: '抖音用户推送列表组件',
+  component: DouyinUserList,
+  validate: (data): data is DouyinUserListData => typeof data === 'object' && data !== null && Array.isArray((data as any).renderOpt)
+})