koishi-plugin-kkk 1.0.0

package/src/karin/types/config/request.ts

@@ -0,0 +1,27 @@
+/** amagi 解析库请求配置 */
+export type requestConfig = {
+  /** 请求超时时间，单位：毫秒 */
+  timeout: number
+
+  /** 浏览器用户代理 */
+  'User-Agent': string
+
+  /** 代理配置 */
+  proxy?: {
+    /** 代理开关 */
+    switch: boolean
+    /** 代理主机 */
+    host: string
+    /** 代理端口 */
+    port: number
+    /** 代理协议 */
+    protocol: 'http' | 'https'
+    /** 代理认证 */
+    auth?: {
+      /** 用户名 */
+      username: string
+      /** 密码 */
+      password: string
+    }
+  }
+}

package/src/karin/types/config/upload.ts

@@ -0,0 +1,49 @@
+export interface uploadConfig {
+  /**
+   * 本地视频发送方式
+   * - 'file': 使用 file 协议发送本地视频（需 Karin 与协议端在同一系统）
+   * - 'base64': 转换为 base64 后发送（传输数据量增大约 30%，不在同一网络环境可能导致额外带宽成本）
+   */
+  videoSendMode: 'file' | 'base64'
+
+  /** 视频上传拦截，开启后会根据视频文件大小判断是否需要上传，需配置「视频拦截阈值」。 */
+  usefilelimit: boolean
+
+  /** 视频拦截阈值，视频文件大于该数值则直接结束任务，不会上传，单位: MB，「视频上传拦截」开启后才会生效。 */
+  filelimit: number
+
+  /** 压缩视频，开启后会将视频文件压缩后再上传，适合上传大文件，任务过程中会吃满CPU，对低配服务器不友好。需配置「压缩触发阈值」与「压缩后的值」 */
+  compress: boolean
+
+  /** 压缩触发阈值，触发视频压缩的阈值，单位：MB。当文件大小超过该值时，才会压缩视频，「压缩视频」开启后才会生效 */
+  compresstrigger: number
+
+  /** 压缩后的值，单位：MB。若视频文件大小大于「压缩触发阈值」的值，则会进行压缩至该值（±5%），「压缩视频」开启后才会生效 */
+  compressvalue: number
+
+  /** 群文件上传，使用群文件上传，开启后会将视频文件上传到群文件中，需配置「群文件上传阈值」 */
+  usegroupfile: boolean
+
+  /** 群文件上传阈值，当文件大小超过该值时将使用群文件上传，单位：MB，「使用群文件上传」开启后才会生效 */
+  groupfilevalue: number
+
+  /**
+   * 网络图片发送方式
+   * - 'url': 直接传递 HTTP 链接给上游下载（可能因上游网络问题导致下载超时）
+   * - 'file': 下载到本地使用 file 协议发送（需 Karin 与协议端在同一系统）
+   * - 'base64': 下载后转换为 base64 发送（传输数据量增大约 30%，不在同一网络环境可能导致额外带宽成本）
+   */
+  imageSendMode: 'url' | 'file' | 'base64'
+
+  /** 下载限速开关，开启后会限制下载速度，避免触发服务器风控导致连接被重置 */
+  downloadThrottle: boolean
+
+  /** 下载速度限制，单位：MB/s，0 表示不限速。建议设置为 5-20 之间，过高可能触发风控 */
+  downloadMaxSpeed: number
+
+  /** 断流自动降速，当检测到连接被重置时自动降低下载速度 */
+  downloadAutoReduce: boolean
+
+  /** 最低下载速度，单位：MB/s，自动降速时不会低于此值 */
+  downloadMinSpeed: number
+}

package/src/karin/types/config/xiaohongshu.ts

@@ -0,0 +1,24 @@
+/** 小红书配置 */
+export interface xiaohongshuConfig {
+  /** 是否开启小红书解析功能 */
+  switch: boolean
+
+  /** 解析时发送的内容，可选值：'info'(笔记、视频信息)、'comment'(评论图片)、'image'(笔记图片)、'video'(视频文件) */
+  sendContent: ('info' | 'comment' | 'image' | 'video')[]
+
+  /** 小红书评论数量 */
+  numcomment: number
+
+  /**
+   * 视频画质偏好设置，'adapt' 为自动根据「maxAutoVideoSize」大小选择，其他为固定画质
+   * - '540p': 540P 标清
+   * - '720p': 720P 高清
+   * - '1080p': 1080P 超清
+   * - '2k': 2K 超高清
+   * - '4k': 4K 超高清
+   */
+  videoQuality: 'adapt' | '540p' | '720p' | '1080p' | '2k' | '4k'
+
+  /** 视频体积上限，自动画质模式下可接受的最大视频大小（单位：MB），仅在 「videoQuality」 为 'adapt' 时生效 */
+  maxAutoVideoSize: number
+}

package/src/karin/types/datatypes.ts

@@ -0,0 +1,42 @@
+export interface BilibiliDataTypes {
+  one_video: 'one_video'
+  nock_video: 'nock_video'
+  video_playurl: 'video_playurl'
+  work_comments: 'work_comments'
+  bangumi_video_info: 'bangumi_video_info'
+  bangumi_video_playurl: 'bangumi_video_playurl'
+  user_dynamic: 'user_dynamic'
+  dynamic_info: 'dynamic_info'
+  dynamic_card: 'dynamic_card'
+  user_profile: 'user_profile'
+  live_room_detail: 'live_room_detail'
+  liveroom_def: 'liveroom_def'
+  emoji_list: 'emoji_list'
+  new_login_qrcode: 'new_login_qrcode'
+  check_qrcode: 'check_qrcode'
+  login_basic_info: 'login_basic_info'
+  undefined: 'undefined'
+}
+
+export interface DouyinDataTypes {
+  /** 单个视频 */
+  one_work: 'one_work'
+  work_comments: 'work_comments'
+  user_mix_videos: 'user_mix_videos'
+  user_dynamic: 'user_dynamic'
+  user_profile: 'user_profile'
+  live_room_detail: 'live_room_detail'
+  liveroom_def: 'liveroom_def'
+  emoji_list: 'emoji_list'
+  music_work: 'music_work'
+  suggest_words: 'suggest_words'
+  search_info: 'search_info'
+  undefined: 'undefined'
+}
+
+export interface KuaishouDataTypes {
+  /** 单个视频 */
+  one_work: 'one_work'
+  work_comments: 'work_comments'
+  emoji_list: 'emoji_list'
+}

package/src/karin/types/index.ts

@@ -0,0 +1,4 @@
+export * from './config'
+export type { BilibiliDataTypes, DouyinDataTypes, KuaishouDataTypes } from './datatypes'
+export * from './netrorks'
+export type { DouyinIdData, ExtendedKuaishouOptionsType } from '@/platform'

package/src/karin/types/netrorks/NetworksConfigType.ts

@@ -0,0 +1,61 @@
+import { ResponseType } from 'node-karin/axios'
+
+import { downLoadFileOptions } from '@/module'
+
+/**
+ * 限速配置
+ */
+export interface ThrottleConfig {
+  /** 是否启用限速，默认 true */
+  enabled?: boolean
+  /** 最大下载速度 (bytes/s)，默认 10MB/s */
+  maxSpeed?: number
+  /** 检测到断流后自动降速的比例，默认 0.7 (降到 70%) */
+  autoReduceRatio?: number
+  /** 最小速度限制 (bytes/s)，默认 1MB/s */
+  minSpeed?: number
+}
+
+export interface NetworksConfigType {
+  /**
+   * 请求地址
+   */
+  url?: string
+  /**
+   * 请求方法
+   */
+  method?: string
+  /**
+   * 请求头
+   */
+  headers?: downLoadFileOptions['headers']
+  /**
+   * 返回数据类型，默认json
+   */
+  type?: ResponseType
+  /**
+   * 请求体
+   */
+  body?: string
+  /**
+   * 超时时间，单位毫秒
+   */
+  timeout?: number
+  /**
+   * 默认跟随重定向到: 'follow'，不跟随: manual
+   */
+  redirect?: RequestRedirect
+  /**
+   * 文件保存路径
+   */
+  filepath?: string
+  /**
+   * 最大重试请求次数
+   */
+  maxRetries?: number
+  /**
+   * 限速配置，用于规避服务器风控
+   * 当下载速度过快导致连接被重置时，会自动降速重试
+   */
+  throttle?: ThrottleConfig
+}

package/src/karin/types/netrorks/index.ts

@@ -0,0 +1 @@
+export * from './NetworksConfigType'

package/src/karin/web.config.ts

@@ -0,0 +1,48 @@
+import fs from 'node:fs'
+import path from 'node:path'
+
+import { defineConfig } from 'node-karin'
+
+import { Root } from '@/module'
+
+const resolveRealPath = (value: string) => {
+  try {
+    return fs.realpathSync.native(value)
+  } catch {
+    return path.resolve(value)
+  }
+}
+
+const isLocalDevelopment = process.env.NODE_ENV === 'development' && resolveRealPath(Root.pluginPath) === resolveRealPath(process.cwd())
+
+export const webConfig = defineConfig({
+  info: {
+    id: 'koishi-plugin-kkk',
+    name: 'kkk插件',
+    description: `Karin 的「抖音」「B站」视频解析/动态推送插件。v${Root.pluginVersion}`,
+    icon: {
+      name: 'radio_button_checked',
+      color: '#F31260'
+    },
+    version: Root.pluginVersion,
+    author: [
+      {
+        name: 'ikenxuan',
+        home: 'https://github.com/ikenxuan',
+        avatar: 'https://github.com/ikenxuan.png'
+      },
+      {
+        name: 'sj817',
+        home: 'https://github.com/sj817',
+        avatar: 'https://github.com/sj817.png'
+      }
+    ]
+  },
+  page: {
+    url: isLocalDevelopment ? 'http://localhost:5176/kkk/assets/karin-config' : '/kkk/assets/karin-config',
+    title: 'kkk插件配置管理',
+    description: '使用 kkk 插件自带的配置管理页面'
+  }
+})
+
+export default webConfig

package/src/ktr/registry.ts

@@ -0,0 +1,55 @@
+/**
+ * 模板路由表（构建期生成的等价物）。
+ *
+ * 上游由 ktr 的 \`ktr sync\` 扫描 \`template/<板块>/<模板>/index.tsx\` 生成 \`.ktr\` 注册表；
+ * 这里改成**惰性动态 import**：
+ *   - 不必为 35 个模板的依赖（echarts / heroui / 图标库…）在启动时全部付代价；
+ *   - 某个模板缺依赖时只有它自己失败，不会拖垮整个插件（Render 会回退到内置卡片）。
+ */
+export type TemplateLoader = () => Promise<{ default?: any }>
+
+export const templateRegistry: Record<string, TemplateLoader> = {
+  'bilibili/bangumi': () => import('./template/bilibili/bangumi'),
+  'bilibili/comment': () => import('./template/bilibili/comment'),
+  'bilibili/dynamic/DYNAMIC_TYPE_ARTICLE': () => import('./template/bilibili/dynamic/DYNAMIC_TYPE_ARTICLE'),
+  'bilibili/dynamic/DYNAMIC_TYPE_AV': () => import('./template/bilibili/dynamic/DYNAMIC_TYPE_AV'),
+  'bilibili/dynamic/DYNAMIC_TYPE_DRAW': () => import('./template/bilibili/dynamic/DYNAMIC_TYPE_DRAW'),
+  'bilibili/dynamic/DYNAMIC_TYPE_FORWARD': () => import('./template/bilibili/dynamic/DYNAMIC_TYPE_FORWARD'),
+  'bilibili/dynamic/DYNAMIC_TYPE_LIVE_RCMD': () => import('./template/bilibili/dynamic/DYNAMIC_TYPE_LIVE_RCMD'),
+  'bilibili/dynamic/DYNAMIC_TYPE_WORD': () => import('./template/bilibili/dynamic/DYNAMIC_TYPE_WORD'),
+  'bilibili/qrcodeImg': () => import('./template/bilibili/qrcodeImg'),
+  'bilibili/userlist': () => import('./template/bilibili/userlist'),
+  'bilibili/videoInfo': () => import('./template/bilibili/videoInfo'),
+  'douyin/article-work': () => import('./template/douyin/article-work'),
+  'douyin/comment': () => import('./template/douyin/comment'),
+  'douyin/dynamic': () => import('./template/douyin/dynamic'),
+  'douyin/favorite-list': () => import('./template/douyin/favorite-list'),
+  'douyin/image-work': () => import('./template/douyin/image-work'),
+  'douyin/live': () => import('./template/douyin/live'),
+  'douyin/musicinfo': () => import('./template/douyin/musicinfo'),
+  'douyin/qrcodeImg': () => import('./template/douyin/qrcodeImg'),
+  'douyin/recommend-list': () => import('./template/douyin/recommend-list'),
+  'douyin/userlist': () => import('./template/douyin/userlist'),
+  'douyin/user_profile': () => import('./template/douyin/user_profile'),
+  'douyin/video-work': () => import('./template/douyin/video-work'),
+  'kuaishou/comment': () => import('./template/kuaishou/comment'),
+  'other/changelog': () => import('./template/other/changelog'),
+  'other/handlerError': () => import('./template/other/handlerError'),
+  'other/help': () => import('./template/other/help'),
+  'other/live-photo-tip': () => import('./template/other/live-photo-tip'),
+  'other/qrlogin': () => import('./template/other/qrlogin'),
+  'other/runtime': () => import('./template/other/runtime'),
+  'other/version_warning': () => import('./template/other/version_warning'),
+  'statistics/global': () => import('./template/statistics/global'),
+  'statistics/group': () => import('./template/statistics/group'),
+  'xiaohongshu/comment': () => import('./template/xiaohongshu/comment'),
+  'xiaohongshu/noteInfo': () => import('./template/xiaohongshu/noteInfo')
+}
+
+/** 取某个路由的模板定义（不做缓存，模块本身有 require 缓存） */
+export async function loadTemplate (route: string) {
+  const loader = templateRegistry[route]
+  if (!loader) return undefined
+  const mod: any = await loader()
+  return mod?.default ?? mod
+}

package/src/ktr/template/_preview/components/PreviewInfoCard.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import type { PreviewState } from '../types'
+import { buildStatus } from '../utils/status'
+
+type PreviewInfoCardProps = {
+  state: PreviewState
+}
+
+export const PreviewInfoCard: React.FC<PreviewInfoCardProps> = ({ state }) => {
+  const status = buildStatus(state)
+
+  return (
+    <div
+      className="relative z-10 mt-12 flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between"
+      style={{ mixBlendMode: 'difference', color: '#ffffff' }}
+    >
+      <div>
+        <div className="text-xs uppercase tracking-[0.2em]">删除倒计时</div>
+        <div className="mt-2 text-5xl font-semibold" id="preview-countdown">
+          {status.countdownText}
+        </div>
+      </div>
+      <a
+        className="inline-flex h-10 items-center justify-center rounded-full border border-white/50 px-4 text-sm font-medium text-white backdrop-blur"
+        href={state.videoUrl}
+        download
+      >
+        下载视频
+      </a>
+    </div>
+  )
+}

package/src/ktr/template/_preview/components/PreviewLayout.tsx

@@ -0,0 +1,65 @@
+import React from 'react'
+
+import type { PreviewState } from '../types'
+import { PreviewInfoCard } from './PreviewInfoCard'
+import { PreviewVideoCard } from './PreviewVideoCard'
+
+type PreviewLayoutProps = {
+  state: PreviewState
+}
+
+export const PreviewLayout: React.FC<PreviewLayoutProps> = ({ state }) => {
+  return (
+    <div className="relative min-h-screen bg-(--preview-bg) text-(--preview-fg)">
+      <div className="absolute inset-0 overflow-hidden">
+        <video
+          className="h-full w-full object-cover blur-3xl scale-110 saturate-150 contrast-125"
+          autoPlay
+          loop
+          muted
+          playsInline
+          preload="metadata"
+          src={state.videoUrl}
+        />
+        <div className="absolute inset-0 pointer-events-none opacity-[0.35] mix-blend-overlay dark:mix-blend-soft-light">
+          <svg className="h-full w-full" xmlns="http://www.w3.org/2000/svg">
+            <defs>
+              <filter id="previewNoise">
+                <feTurbulence type="fractalNoise" baseFrequency="1.2" numOctaves="3" stitchTiles="stitch" />
+                <feColorMatrix type="saturate" values="0" />
+                <feComponentTransfer>
+                  <feFuncR type="discrete" tableValues="0 1" />
+                  <feFuncG type="discrete" tableValues="0 1" />
+                  <feFuncB type="discrete" tableValues="0 1" />
+                </feComponentTransfer>
+                <feComponentTransfer>
+                  <feFuncA type="linear" slope="2" intercept="-0.5" />
+                </feComponentTransfer>
+              </filter>
+              <mask id="previewNoiseMask">
+                <linearGradient id="previewNoiseGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+                  <stop offset="0%" stopColor="white" stopOpacity="1" />
+                  <stop offset="15%" stopColor="white" stopOpacity="0.6" />
+                  <stop offset="50%" stopColor="white" stopOpacity="0.15" />
+                  <stop offset="85%" stopColor="white" stopOpacity="0.6" />
+                  <stop offset="100%" stopColor="white" stopOpacity="1" />
+                </linearGradient>
+                <rect width="100%" height="100%" fill="url(#previewNoiseGradient)" />
+              </mask>
+            </defs>
+            <rect width="100%" height="100%" filter="url(#previewNoise)" mask="url(#previewNoiseMask)" fill="white" />
+          </svg>
+        </div>
+        <div className="absolute inset-0 bg-black/35" />
+      </div>
+      <div className="relative z-10 w-full px-4 py-16 sm:px-6">
+        <div className="flex flex-col gap-2" style={{ mixBlendMode: 'difference', color: '#ffffff' }}>
+          <h1 className="text-2xl font-semibold">临时预览</h1>
+          <p className="text-sm">查看视频内容与删除时间</p>
+        </div>
+        <PreviewVideoCard videoUrl={state.videoUrl} />
+        <PreviewInfoCard state={state} />
+      </div>
+    </div>
+  )
+}

package/src/ktr/template/_preview/components/PreviewVideoCard.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+type PreviewVideoCardProps = {
+  videoUrl: string
+}
+
+export const PreviewVideoCard: React.FC<PreviewVideoCardProps> = ({ videoUrl }) => {
+  return (
+    <div className="relative z-10 mt-10 w-full">
+      <video
+        className="w-full max-h-[86vh] rounded-2xl bg-black shadow-2xl"
+        controls
+        preload="metadata"
+        autoPlay
+        loop
+        muted
+        playsInline
+        src={videoUrl}
+      />
+    </div>
+  )
+}

package/src/ktr/template/_preview/render.ts

@@ -0,0 +1,158 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { HtmlWrapper, resolveTemplateStyle } from '@karinjs/template-react'
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+
+import { PreviewLayout } from './components/PreviewLayout'
+import type { PreviewState } from './types'
+
+type VideoPreviewRenderOptions = {
+  filename: string
+  filePath: string
+  videoUrl: string
+  removeCache: boolean
+  createdAt: number
+  expireAt?: number
+  eventsUrl?: string
+}
+
+type VideoPreviewState = PreviewState & {
+  serverNow: number
+}
+
+/**
+ * 向上定位 koishi-plugin-kkk 包根目录。
+ * 生产环境当前模块在 lib/core_chunk 内，向上两级即包根；
+ * 开发环境本文件在 packages/template/src/_preview，回退到 monorepo 的 packages/core。
+ * @returns core 包根目录绝对路径。
+ */
+const findCoreRoot = (): string => {
+  // Koishi 移植：产物是 CJS，没有 import.meta；直接取 __dirname。
+  // 同时把包名判断放宽到移植后的包名（koishi-plugin-kkk），否则永远找不到包根。
+  const moduleDir = __dirname
+  let dir = moduleDir
+  for (let i = 0; i < 10; i++) {
+    const pkgPath = path.join(dir, 'package.json')
+    if (fs.existsSync(pkgPath)) {
+      try {
+        const name = JSON.parse(fs.readFileSync(pkgPath, 'utf-8')).name
+        if (name === 'koishi-plugin-kkk' || name === 'koishi-plugin-kkk') {
+          return dir
+        }
+      } catch {
+        // package.json 解析失败时继续向上找
+      }
+    }
+    const parent = path.dirname(dir)
+    if (parent === dir) break
+    dir = parent
+  }
+  return path.resolve(moduleDir, '..', '..', '..', 'core')
+}
+
+/** 读取并按需内联模板 CSS（相对 url 资源转 data URI）。 */
+const loadInlineTemplateCss = (): string => {
+  const coreRoot = findCoreRoot()
+  const cssPath = resolveTemplateStyle({
+    cachePath: path.join(coreRoot, 'node_modules', '.cache', 'ktr', 'style.css'),
+    distDir: path.join(coreRoot, 'lib')
+  })
+  // HtmlWrapper 只借用它的 CSS 内联能力，不走完整外壳包装。
+  return new HtmlWrapper({ cssPath }).loadInlineCss(cssPath)
+}
+
+const escapeVideoPreviewJson = (data: unknown): string => {
+  return JSON.stringify(data).replace(/</g, '\\u003c')
+}
+
+/**
+ * 渲染临时视频预览页 HTML（/kkk/ssr/video/* 使用）。
+ * 逻辑与旧引擎 main.ts 中的实现一致，仅 CSS 来源换成 ktr 构建的 style.css。
+ */
+export const renderVideoPreviewPage = (options: VideoPreviewRenderOptions): string => {
+  const serverNow = Date.now()
+  const remainingMs = options.removeCache && options.expireAt ? Math.max(options.expireAt - serverNow, 0) : null
+  const state: VideoPreviewState = {
+    ...options,
+    eventsUrl: options.eventsUrl ?? '',
+    serverNow,
+    remainingMs,
+    removed: false
+  }
+  const appHtml = renderToString(React.createElement(PreviewLayout, { state }))
+  const serializedState = escapeVideoPreviewJson(state)
+  const cssContent = loadInlineTemplateCss()
+
+  return `<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>临时预览</title>
+  <style>
+    * { box-sizing: border-box; }
+    :root { --preview-bg: #ffffff; --preview-fg: #0f172a; --preview-muted: #64748b; }
+    @media (prefers-color-scheme: dark) {
+      :root { --preview-bg: #050505; --preview-fg: #e2e8f0; --preview-muted: #94a3b8; }
+    }
+    body { margin: 0; font-family: "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--preview-bg); color: var(--preview-fg); }
+    .preview-noise { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; opacity: 0.8; }
+    @media (max-width: 720px) {
+      .max-w-6xl { padding-left: 16px; padding-right: 16px; }
+    }
+  </style>
+  <style>${cssContent}</style>
+</head>
+<body>
+  <div id="app">${appHtml}</div>
+  <script>
+    window.__VIDEO_PREVIEW__=${serializedState};
+    (() => {
+      const state = window.__VIDEO_PREVIEW__ || {};
+      const countdownEl = document.getElementById('preview-countdown');
+      if (!countdownEl) return;
+      const format = (ms) => {
+        const totalSeconds = Math.max(Math.floor(ms / 1000), 0);
+        const hours = Math.floor(totalSeconds / 3600);
+        const minutes = Math.floor((totalSeconds % 3600) / 60);
+        const seconds = totalSeconds % 60;
+        const pad = (value) => String(value).padStart(2, '0');
+        return hours > 0 ? pad(hours) + ':' + pad(minutes) + ':' + pad(seconds) : pad(minutes) + ':' + pad(seconds);
+      };
+      const update = (payload) => {
+        if (!payload.removeCache) {
+          countdownEl.textContent = '不删除';
+          return;
+        }
+        if (payload.removed) {
+          countdownEl.textContent = '00:00';
+          return;
+        }
+        const remainingMs = typeof payload.remainingMs === 'number'
+          ? payload.remainingMs
+          : (payload.expireAt ? Math.max(payload.expireAt - (payload.serverNow || Date.now()), 0) : null);
+        if (remainingMs === null) {
+          countdownEl.textContent = '--:--';
+          return;
+        }
+        countdownEl.textContent = format(remainingMs);
+      };
+      update(state);
+      if (state.eventsUrl) {
+        const source = new EventSource(state.eventsUrl);
+        source.onmessage = (event) => {
+          try {
+            update(JSON.parse(event.data));
+          } catch {}
+        };
+      }
+    })();
+  </script>
+</body>
+</html>`
+}
+
+export type { VideoPreviewRenderOptions }

package/src/ktr/template/_preview/types.ts

@@ -0,0 +1,15 @@
+type PreviewParams = {
+  filename: string
+  filePath: string
+  videoUrl: string
+  removeCache: boolean
+  createdAt: number
+  expireAt?: number
+  eventsUrl: string
+}
+
+export type PreviewState = PreviewParams & {
+  remainingMs: number | null
+  removed: boolean
+  serverNow?: number
+}

package/src/ktr/template/_preview/utils/status.ts

@@ -0,0 +1,29 @@
+import type { PreviewState } from '../types'
+import { formatDuration } from './time'
+
+export const buildStatus = (state: PreviewState): { statusText: string; countdownText: string } => {
+  const filePath = state.filePath || state.filename
+  if (!state.removeCache) {
+    return {
+      statusText: `文件 ${filePath} 不会自动删除`,
+      countdownText: '不删除'
+    }
+  }
+  if (state.removed) {
+    return {
+      statusText: `文件 ${filePath} 已删除`,
+      countdownText: '00:00'
+    }
+  }
+  if (state.remainingMs === null) {
+    return {
+      statusText: `文件 ${filePath} 将在未知时间后删除`,
+      countdownText: '--:--'
+    }
+  }
+  const countdownText = formatDuration(state.remainingMs)
+  return {
+    statusText: `文件 ${filePath} 将在 ${countdownText} 后删除`,
+    countdownText
+  }
+}

package/src/ktr/template/_preview/utils/time.ts

@@ -0,0 +1,8 @@
+export const formatDuration = (ms: number): string => {
+  const totalSeconds = Math.max(Math.floor(ms / 1000), 0)
+  const hours = Math.floor(totalSeconds / 3600)
+  const minutes = Math.floor((totalSeconds % 3600) / 60)
+  const seconds = totalSeconds % 60
+  const pad = (value: number) => String(value).padStart(2, '0')
+  return hours > 0 ? `${pad(hours)}:${pad(minutes)}:${pad(seconds)}` : `${pad(minutes)}:${pad(seconds)}`
+}