koishi-plugin-kkk 1.0.0

package/src/ktr/template/bilibili/dynamic/DYNAMIC_TYPE_ARTICLE/index.tsx

@@ -0,0 +1,12 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { BilibiliArticleDynamic } from './components/DYNAMIC_TYPE_ARTICLE'
+import type { BilibiliArticleDynamicData } from './components/types'
+
+export default defineTemplate({
+  name: '专栏动态',
+  description: 'B站专栏动态展示模板',
+  component: BilibiliArticleDynamic,
+  validate: (data): data is BilibiliArticleDynamicData =>
+    typeof data === 'object' && data !== null && typeof (data as any).share_url === 'string'
+})

package/src/ktr/template/bilibili/dynamic/DYNAMIC_TYPE_AV/components/DYNAMIC_TYPE_AV.tsx

@@ -0,0 +1,238 @@
+import { renderRichTextToReact } from '@kkk/richtext'
+import { ClockIcon } from '@phosphor-icons/react'
+import React from 'react'
+
+import { cn } from '../../../../../utils/cn'
+import { isDark } from '../../../../../utils/theme'
+import { DefaultLayout } from '../../../../components/DefaultLayout'
+import type { PosterProps } from '../../../../types/ctx'
+import { CoinIcon, ViewIcon } from '../../../components/Icons'
+import { EnhancedImage } from '../../../components/shared'
+import { BilibiliDynamicFooter, BilibiliDynamicStatus, BilibiliDynamicUserInfo } from '../../components/CommonComponents'
+import type { BilibiliVideoDynamicData } from './types'
+
+/**
+ * B站视频内容组件
+ */
+const BilibiliVideoContent: React.FC<PosterProps<BilibiliVideoDynamicData>> = (props) => {
+  return (
+    <div className="px-16">
+      <div className="px-12 py-12 rounded-8xl bg-surface-secondary">
+        {/* 视频封面 */}
+        {props.data.image_url && (
+          <>
+            <div className="items-center">
+              <div className="flex overflow-hidden relative flex-col flex-1 items-center rounded-5xl shadow-large">
+                <EnhancedImage src={props.data.image_url} alt="封面" className="object-contain w-full h-full rounded-3xl" />
+                {/* 播放图标覆盖层 */}
+                <div className="flex absolute bottom-12 right-16">
+                  <img src="/image/bilibili/play.svg" alt="播放图标" className="w-40 h-40" />
+                </div>
+              </div>
+            </div>
+            <div className="h-10" />
+          </>
+        )}
+
+        {/* 视频信息 */}
+        <div className="flex flex-col w-full leading-relaxed">
+          {/* 视频标题 */}
+          <div className="relative items-center text-6xl font-bold tracking-wider wrap-break-word text-foreground leading-tight">
+            {props.data.text &&
+              renderRichTextToReact(props.data.text, {
+                at: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                topic: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                lottery: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                webLink: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                vote: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                viewPicture: { className: 'text-[#006A9E] dark:text-[#58B0D5]' }
+              })}
+          </div>
+
+          {/* 间距 */}
+          <div className="h-10" />
+
+          {/* 视频描述 */}
+          <div className="text-5xl text-muted leading-normal wrap-break-word break-keep">
+            {props.data.desc &&
+              renderRichTextToReact(props.data.desc, {
+                at: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                topic: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                lottery: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                webLink: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                vote: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                viewPicture: { className: 'text-[#006A9E] dark:text-[#58B0D5]' }
+              })}
+          </div>
+
+          {/* 间距 */}
+          <div className="h-20" />
+
+          {/* 视频统计信息 */}
+          <div className="flex flex-col gap-8 text-foreground/70">
+            <div className="flex gap-12 items-center text-5xl font-light tracking-normal">
+              <div className="flex gap-3 items-center">
+                <CoinIcon size={52} />
+                <span className="select-text">{props.data.coin}硬币</span>
+              </div>
+
+              <div className="flex gap-3 items-center">
+                <ViewIcon size={52} variant="solid" />
+                <span className="select-text">{props.data.view}播放</span>
+              </div>
+
+              <div className="flex gap-3 items-center text-5xl font-light tracking-normal">
+                <ClockIcon size={52} weight="fill" />
+                <span className="select-text">
+                  时长({props.data.page_length}P): {props.data.duration_text}
+                </span>
+              </div>
+            </div>
+          </div>
+
+          <div className="h-2" />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * B站视频动态共创者组件
+ */
+const BilibiliVideoStaff: React.FC<PosterProps<BilibiliVideoDynamicData>> = (props) => {
+  // 过滤掉已显示在底部的用户，避免重复
+  const otherStaff = props.data.staff?.filter((member) => member.mid !== Number(props.data.user_shortid)) || []
+
+  // 响应式计算可显示的共创者数量
+  const listRef = React.useRef<HTMLDivElement>(null)
+  const [visibleCount, setVisibleCount] = React.useState(otherStaff.length)
+
+  React.useEffect(() => {
+    const calc = () => {
+      const el = listRef.current
+      if (!el || otherStaff.length === 0) return
+      const containerWidth = el.offsetWidth
+
+      // 每项实际宽度约168px（头像w-42），间距gap-8=32px
+      const ITEM_W = 168
+      const GAP = 32
+
+      const capacity = Math.floor(containerWidth / (ITEM_W + GAP))
+      const needEllipsis = otherStaff.length > capacity
+      const nextVisible = needEllipsis ? Math.max(0, capacity - 1) : otherStaff.length
+      setVisibleCount(nextVisible)
+    }
+
+    calc()
+    window.addEventListener('resize', calc)
+    return () => window.removeEventListener('resize', calc)
+  }, [otherStaff.length])
+
+  if (otherStaff.length === 0) return null
+
+  return (
+    <div className="flex flex-col px-20 w-full">
+      <div ref={listRef} className="flex overflow-hidden gap-8 py-1 w-full">
+        {otherStaff.slice(0, visibleCount).map((member) => (
+          <div key={member.mid} className="flex flex-col items-center min-w-42 w-42 shrink-0">
+            <div className="flex justify-center items-center bg-white rounded-full w-30 h-30">
+              <EnhancedImage src={member.face} alt={member.name} className="object-cover w-28 h-28 rounded-full" isCircular />
+            </div>
+            <div className="overflow-hidden mt-6 w-full text-3xl font-medium leading-tight text-center truncate whitespace-nowrap select-text text-foreground">
+              {member.name}
+            </div>
+            <div className="overflow-hidden mt-2 w-full text-3xl leading-tight text-center truncate whitespace-nowrap select-text text-muted">
+              {member.title}
+            </div>
+          </div>
+        ))}
+
+        {otherStaff.length > visibleCount && (
+          <div className="flex flex-col items-center min-w-42 w-42 shrink-0">
+            <div className="flex justify-center items-center rounded-full bg-surface-secondary w-30 h-30">
+              <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">
+              还有{otherStaff.length - visibleCount}人
+            </div>
+            <div className="overflow-hidden mt-2 w-full text-3xl leading-tight text-center truncate whitespace-nowrap select-text text-muted">
+              共创
+            </div>
+          </div>
+        )}
+      </div>
+      <div className="h-15" />
+    </div>
+  )
+}
+
+/**
+ * B站视频动态组件
+ */
+export const BilibiliVideoDynamic: React.FC<PosterProps<BilibiliVideoDynamicData>> = React.memo((props) => {
+  return (
+    <DefaultLayout {...props}>
+      <div className="p-4">
+        {/* 间距 */}
+        <div className="h-25" />
+
+        {/* 用户信息 */}
+        <BilibiliDynamicUserInfo {...props.data} />
+
+        {/* 间距 */}
+        <div className="h-15" />
+
+        {/* 动态正文 */}
+        {props.data.dynamic_text && (
+          <div className="flex flex-col px-20 w-full leading-relaxed">
+            <div className="relative items-center text-5xl tracking-wider wrap-break-word text-foreground">
+              <div
+                className="text-[60px] tracking-[0.5px] leading-[1.6] whitespace-pre-wrap text-foreground select-text"
+                style={{
+                  wordBreak: 'break-word',
+                  overflowWrap: 'break-word'
+                }}
+              >
+                {props.data.dynamic_text.nodes.length > 0 ? (
+                  renderRichTextToReact(props.data.dynamic_text, {
+                    at: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                    topic: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                    lottery: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                    webLink: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                    vote: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                    viewPicture: { className: 'text-[#006A9E] dark:text-[#58B0D5]' }
+                  })
+                ) : (
+                  <span className="text-default-foreground/50">投稿了视频</span>
+                )}
+              </div>
+            </div>
+            <div className="h-15" />
+          </div>
+        )}
+
+        {/* 视频内容 */}
+        <BilibiliVideoContent {...props} />
+
+        <div className="h-15" />
+
+        {/* 动态状态 */}
+        <BilibiliDynamicStatus {...props.data} />
+
+        {/* 间距 */}
+        <div className={cn(props.data.staff && props.data.staff.length > 0 && 'h-23', !props.data.staff && 'h-40')} />
+
+        {/* 共创者信息 */}
+        <BilibiliVideoStaff {...props} />
+
+        {/* 底部信息 */}
+        <BilibiliDynamicFooter {...props.data} useDarkTheme={isDark(props.ctx)} />
+      </div>
+    </DefaultLayout>
+  )
+})
+
+BilibiliVideoDynamic.displayName = 'BilibiliVideoDynamic'
+
+export default BilibiliVideoDynamic

package/src/ktr/template/bilibili/dynamic/DYNAMIC_TYPE_AV/components/types.ts

@@ -0,0 +1,39 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+import type { RichTextDocument } from '@kkk/richtext'
+
+import type { BilibiliDynamicBaseData } from '../../types'
+
+/**
+ * B站视频动态组件属性接口
+ */
+export interface BilibiliVideoDynamicData extends BilibiliDynamicBaseData {
+  /** 视频标题 */
+  text: RichTextDocument
+  /** 视频描述 */
+  desc: RichTextDocument
+  /** 动态正文（富文本文档） */
+  dynamic_text: RichTextDocument | null
+  /** 视频封面图片URL */
+  image_url: string
+  /** 硬币数 */
+  coin: string | number
+  /** 浏览量 */
+  view: string | number
+  /** 视频时长 */
+  duration_text: string
+  /** 视频分P数量 */
+  page_length: number
+  /** 共创者列表 (可选) */
+  staff?: Array<{
+    /** 用户ID */
+    mid: number
+    /** 职位标题 (UP主/参演) */
+    title: string
+    /** 用户名 */
+    name: string
+    /** 头像URL */
+    face: string
+    /** 粉丝数 */
+    follower: number
+  }>
+}

package/src/ktr/template/bilibili/dynamic/DYNAMIC_TYPE_AV/index.tsx

@@ -0,0 +1,12 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { BilibiliVideoDynamic } from './components/DYNAMIC_TYPE_AV'
+import type { BilibiliVideoDynamicData } from './components/types'
+
+export default defineTemplate({
+  name: '视频动态',
+  description: 'B站视频动态展示模板',
+  component: BilibiliVideoDynamic,
+  validate: (data): data is BilibiliVideoDynamicData =>
+    typeof data === 'object' && data !== null && typeof (data as any).share_url === 'string'
+})

package/src/ktr/template/bilibili/dynamic/DYNAMIC_TYPE_DRAW/components/DYNAMIC_TYPE_DRAW.tsx

@@ -0,0 +1,205 @@
+import { renderRichTextToReact } from '@kkk/richtext'
+import React from 'react'
+
+import { isDark } from '../../../../../utils/theme'
+import { DefaultLayout } from '../../../../components/DefaultLayout'
+import type { PosterProps } from '../../../../types/ctx'
+import { EnhancedImage } from '../../../components/shared'
+import { BilibiliAdditionalCard } from '../../components/AdditionalCard'
+import { BilibiliDynamicFooter, BilibiliDynamicStatus, BilibiliDynamicUserInfo } from '../../components/CommonComponents'
+import type { BilibiliDynamicContentProps } from '../../types'
+import type { BilibiliDynamicData } from './types'
+
+/**
+ * B站动态内容组件
+ */
+const BilibiliDynamicContent: React.FC<BilibiliDynamicContentProps> = (props) => {
+  // 根据配置决定布局方式
+  const getLayoutType = () => {
+    if (!props.image_url || props.image_url.length === 0) return 'auto'
+
+    switch (props.imageLayout) {
+      case 'vertical':
+        return 'vertical'
+      case 'waterfall':
+        return 'waterfall'
+      case 'grid':
+        return 'grid'
+      case 'auto':
+      default:
+        // 自动布局逻辑
+        if (props.image_url.length <= 4) return 'vertical'
+        if (props.image_url.length >= 9) return 'grid'
+        return 'waterfall'
+    }
+  }
+
+  const layoutType = getLayoutType()
+
+  return (
+    <>
+      {/* 文本内容 */}
+      <div className="flex flex-col px-20 w-full leading-relaxed">
+        {/* 标题 */}
+        {props.title && (
+          <div className="mb-8">
+            <h2 className="text-[72px] font-bold leading-[1.4] text-foreground select-text">{props.title}</h2>
+          </div>
+        )}
+
+        <div className="relative items-center text-6xl tracking-wider wrap-break-word text-foreground">
+          <div
+            className="tracking-[0.5px] leading-[1.6] whitespace-pre-wrap text-foreground select-text"
+            style={{
+              wordBreak: 'break-word',
+              overflowWrap: 'break-word'
+            }}
+          >
+            {props.text &&
+              renderRichTextToReact(props.text, {
+                at: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                topic: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                lottery: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                webLink: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                vote: { className: 'text-[#006A9E] dark:text-[#58B0D5]' },
+                viewPicture: { className: 'text-[#006A9E] dark:text-[#58B0D5]' }
+              })}
+          </div>
+        </div>
+        <div className="h-15" />
+      </div>
+
+      {/* 图片内容 */}
+      {props.image_url && Array.isArray(props.image_url) && props.image_url.length > 0 && (
+        <div className="px-20">
+          {/* 九宫格布局 */}
+          {layoutType === 'grid' && (
+            <div className="grid grid-cols-3 gap-3 w-full">
+              {props.image_url.slice(0, 9).map((img, index) => {
+                const total = Math.min(props.image_url?.length || 0, 9)
+                const cols = 3
+                const row = Math.floor(index / cols)
+                const col = index % cols
+                const lastRow = Math.floor((total - 1) / cols)
+                const firstRowLastCol = Math.min(cols, total) - 1
+                const lastRowLastCol = (total - 1) % cols
+
+                const cornerClasses = [
+                  'overflow-hidden',
+                  'aspect-square',
+                  'shadow-medium',
+                  'rounded-2xl',
+                  row === 0 && col === 0 ? 'rounded-tl-4xl' : '',
+                  row === 0 && col === firstRowLastCol ? 'rounded-tr-4xl' : '',
+                  row === lastRow && col === 0 ? 'rounded-bl-4xl' : '',
+                  row === lastRow && col === lastRowLastCol ? 'rounded-br-4xl' : ''
+                ]
+                  .filter(Boolean)
+                  .join(' ')
+
+                return (
+                  <div key={index} className={cornerClasses}>
+                    <EnhancedImage src={img.image_src} alt={`图片${index + 1}`} className="object-cover w-full h-full" />
+                  </div>
+                )
+              })}
+            </div>
+          )}
+
+          {/* 瀑布流布局 */}
+          {layoutType === 'waterfall' && (
+            <div className="flex gap-4 w-full">
+              {/* 左列 */}
+              <div className="flex flex-col flex-1 gap-4">
+                {props.image_url
+                  .filter((_, index) => index % 2 === 0)
+                  .map((img, arrayIndex) => {
+                    const originalIndex = arrayIndex * 2
+                    return (
+                      <div key={originalIndex} className="overflow-hidden rounded-3xl shadow-medium">
+                        <EnhancedImage src={img.image_src} alt={`图片${originalIndex + 1}`} className="object-cover w-full h-auto" />
+                      </div>
+                    )
+                  })}
+              </div>
+              {/* 右列 */}
+              <div className="flex flex-col flex-1 gap-4">
+                {props.image_url
+                  .filter((_, index) => index % 2 === 1)
+                  .map((img, arrayIndex) => {
+                    const originalIndex = arrayIndex * 2 + 1
+                    return (
+                      <div key={originalIndex} className="overflow-hidden rounded-3xl shadow-medium">
+                        <EnhancedImage src={img.image_src} alt={`图片${originalIndex + 1}`} className="object-cover w-full h-auto" />
+                      </div>
+                    )
+                  })}
+              </div>
+            </div>
+          )}
+
+          {/* 垂直布局（逐张上下排列） */}
+          {layoutType === 'vertical' &&
+            props.image_url.map((img, index) => (
+              <React.Fragment key={index}>
+                <div className="flex items-center">
+                  <div className="flex overflow-hidden flex-col flex-1 items-center rounded-4xl shadow-large">
+                    <EnhancedImage src={img.image_src} alt="封面" className="object-contain w-full h-full rounded-5xl" />
+                  </div>
+                </div>
+                <div className="h-10" />
+              </React.Fragment>
+            ))}
+
+          {/* 底部间距 */}
+          {(layoutType === 'waterfall' || layoutType === 'grid') && <div className="h-18" />}
+        </div>
+      )}
+
+      {/* 相关卡片 - 放在图片底部 */}
+      {props.additional && <BilibiliAdditionalCard additional={props.additional} />}
+    </>
+  )
+}
+
+/**
+ * B站动态组件
+ */
+export const BilibiliDrawDynamic: React.FC<PosterProps<BilibiliDynamicData>> = React.memo((props) => {
+  return (
+    <DefaultLayout {...props}>
+      <div className="p-4">
+        {/* 间距 */}
+        <div className="h-25" />
+
+        {/* 用户信息 */}
+        <BilibiliDynamicUserInfo {...props.data} />
+
+        {/* 间距 */}
+        <div className="h-15" />
+
+        {/* 动态内容 */}
+        <BilibiliDynamicContent
+          title={props.data.title}
+          text={props.data.text}
+          image_url={props.data.image_url}
+          imageLayout={props.data.imageLayout}
+          additional={props.data.additional}
+        />
+
+        {/* 动态状态 */}
+        <BilibiliDynamicStatus {...props.data} />
+
+        {/* 间距 */}
+        <div className="h-40" />
+
+        {/* 底部信息 */}
+        <BilibiliDynamicFooter {...props.data} useDarkTheme={isDark(props.ctx)} />
+      </div>
+    </DefaultLayout>
+  )
+})
+
+BilibiliDrawDynamic.displayName = 'BilibiliDrawDynamic'
+
+export default BilibiliDrawDynamic

package/src/ktr/template/bilibili/dynamic/DYNAMIC_TYPE_DRAW/components/types.ts

@@ -0,0 +1,20 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+import type { RichTextDocument } from '@kkk/richtext'
+
+import type { BilibiliAdditionalData, BilibiliDynamicBaseData } from '../../types'
+
+/**
+ * B站普通动态组件属性接口
+ */
+export interface BilibiliDynamicData extends BilibiliDynamicBaseData {
+  /** 图文动态标题 */
+  title?: string
+  /** 动态文本内容（富文本文档） */
+  text: RichTextDocument | null
+  /** 图片URL数组 */
+  image_url: Array<{ image_src: string }>
+  /** 图片布局方式 */
+  imageLayout: string
+  /** 相关内容卡片 */
+  additional?: BilibiliAdditionalData
+}

package/src/ktr/template/bilibili/dynamic/DYNAMIC_TYPE_DRAW/index.tsx

@@ -0,0 +1,11 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { BilibiliDrawDynamic } from './components/DYNAMIC_TYPE_DRAW'
+import type { BilibiliDynamicData } from './components/types'
+
+export default defineTemplate({
+  name: '图文动态',
+  description: 'B站图文动态展示模板',
+  component: BilibiliDrawDynamic,
+  validate: (data): data is BilibiliDynamicData => typeof data === 'object' && data !== null && typeof (data as any).share_url === 'string'
+})