koishi-plugin-kkk 1.0.0

package/src/ktr/template/other/live-photo-tip/components/LivePhotoTip.tsx

@@ -0,0 +1,295 @@
+import { SiApple, SiHonor, SiHuawei, SiOneplus, SiOppo, SiSamsung, SiVivo, SiXiaomi } from '@icons-pack/react-simple-icons'
+import { ArrowDownToLine, Check, HelpCircle, Info, X } from 'lucide-react'
+import React from 'react'
+
+import { isDark } from '../../../../utils/theme'
+import { DefaultLayout } from '../../../components/DefaultLayout'
+import { GlowImage } from '../../../components/GlowImage'
+import type { PosterProps } from '../../../types/ctx'
+import type { LivePhotoTipData } from './types'
+
+/**
+ * Google Photos 彩色官方 Logo
+ */
+const GooglePhotosIcon: React.FC<{ className?: string }> = ({ className }) => (
+  <svg className={className} viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4,16a6,6,0,0,1,12,0Z" fill="#ffba00" />
+    <path d="M22,10a6,6,0,0,1-6,6V4a6,6,0,0,1,6,6" fill="#ea4435" />
+    <path d="M28,16a6,6,0,0,1-12,0Z" fill="#0066da" />
+    <path d="M10,22a6,6,0,0,1,6-6V28a6,6,0,0,1-6-6" fill="#00ac47" />
+  </svg>
+)
+
+type BrandStatus = 'verified' | 'untested' | 'unsupported'
+
+interface BrandItem {
+  icon: React.ReactNode
+  color: string
+  status: BrandStatus
+}
+
+const statusConfig: Record<BrandStatus, { icon: React.ComponentType<any>; color: string; label: string }> = {
+  verified: { icon: Check, color: '#22c55e', label: '实测可用' },
+  untested: { icon: HelpCircle, color: '#f59e0b', label: '理论支持' },
+  unsupported: { icon: X, color: '#ef4444', label: '不支持' }
+}
+
+/**
+ * kkk Logo SVG
+ */
+const KkkLogo: React.FC<{ className?: string; color?: string }> = ({ className, color }) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 230 221" className={className} style={{ color: color }}>
+    <path
+      d="M132.75,87.37l-53.72-53.37c-4.66-4.63-1.38-12.58,5.18-12.58h115.13c6.57,0,9.84,7.95,5.18,12.58l-53.72,53.37c-4.99,4.96-13.06,4.96-18.05,0Z"
+      fill="currentColor"
+    />
+    <path
+      d="M28.49,186.89l.03-51.42c-.02-6.57,7.92-9.87,12.56-5.23l57.02,57.02c4.64,4.64,1.34,12.41-5.23,12.39h-51.42c-7.04-.02-12.94-5.72-12.96-12.76Z"
+      fill="currentColor"
+    />
+    <path
+      d="M41.54,23.68l163.04,163.05c4.78,4.78,1.39,12.95-5.36,12.94h-47.88c-9.69,0-18.99-3.86-25.84-10.71L39.3,102.75c-6.85-6.85-10.7-16.15-10.7-25.84V29.04c0-6.76,8.16-10.14,12.94-5.36Z"
+      fill="currentColor"
+    />
+  </svg>
+)
+
+function BrandCard({ brand, isDark }: { brand: BrandItem; isDark: boolean }) {
+  const StatusIcon = statusConfig[brand.status].icon
+  return (
+    <div className="flex flex-col items-center gap-3">
+      <div
+        className="relative flex items-center justify-center w-75 h-75 rounded-3xl"
+        style={{
+          background: isDark
+            ? 'radial-gradient(circle, ' + brand.color + '12 0%, transparent 70%)'
+            : 'radial-gradient(circle, ' + brand.color + '08 0%, transparent 70%)'
+        }}
+      >
+        {brand.icon}
+        <div
+          className="absolute top-4 right-4 flex items-center gap-1.5 px-5 py-2.5 rounded-full"
+          style={{ backgroundColor: statusConfig[brand.status].color + '20' }}
+        >
+          <StatusIcon className="w-5 h-auto" style={{ color: statusConfig[brand.status].color }} />
+          <span className="text-lg font-bold" style={{ color: statusConfig[brand.status].color }}>
+            {statusConfig[brand.status].label}
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function UnsupportedBrandCard({ brand, isDark }: { brand: BrandItem; isDark: boolean }) {
+  const StatusIcon = statusConfig[brand.status].icon
+  return (
+    <div className="flex flex-col items-center gap-2 opacity-50">
+      <div
+        className="relative flex items-center justify-center w-40 h-40 rounded-2xl"
+        style={{
+          background: isDark
+            ? 'radial-gradient(circle, ' + brand.color + '08 0%, transparent 70%)'
+            : 'radial-gradient(circle, ' + brand.color + '05 0%, transparent 70%)'
+        }}
+      >
+        {brand.icon}
+      </div>
+      <div className="flex items-center gap-1">
+        <StatusIcon className="w-5 h-auto" style={{ color: statusConfig[brand.status].color }} />
+        <span className="text-md font-bold" style={{ color: statusConfig[brand.status].color }}>
+          {statusConfig[brand.status].label}
+        </span>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * 实况图提示组件 - 正方形，Vercel 黑白风格
+ */
+export const LivePhotoTip: React.FC<PosterProps<LivePhotoTipData>> = React.memo((props) => {
+  const dark = isDark(props.ctx)
+
+  // Vercel 黑白风格
+  const bgColor = dark ? '#000000' : '#ffffff'
+  const primaryColor = dark ? '#ffffff' : '#000000'
+  const secondaryColor = dark ? '#888888' : '#666666'
+  const mutedColor = dark ? 'rgba(255,255,255,0.5)' : 'rgba(0,0,0,0.5)'
+  const accentColor = dark ? '#ffffff' : '#000000'
+
+  const glow1 = 'radial-gradient(ellipse at 30% 40%, ' + (dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)') + ' 0%, transparent 70%)'
+  const glow2 =
+    'radial-gradient(ellipse at 70% 60%, ' + (dark ? 'rgba(128,128,128,0.1)' : 'rgba(128,128,128,0.08)') + ' 0%, transparent 70%)'
+
+  const noiseOpacity = dark ? 0.04 : 0.06
+
+  const appleColor = dark ? '#ffffff' : '#000000'
+
+  const supportedBrands: BrandItem[] = [
+    { icon: <GooglePhotosIcon className="w-36 h-auto" />, color: '#4285F4', status: 'verified' },
+    { icon: <SiXiaomi className="w-28 h-auto" style={{ color: '#FF6900' }} />, color: '#FF6900', status: 'verified' },
+    { icon: <SiSamsung className="w-68 h-auto" style={{ color: '#1428A0' }} />, color: '#1428A0', status: 'verified' },
+    { icon: <SiOppo className="w-58 h-auto" />, color: '#009B77', status: 'verified' },
+    { icon: <SiOneplus className="w-26 h-auto" style={{ color: '#F50514' }} />, color: '#F50514', status: 'verified' },
+    { icon: <SiHuawei className="w-32 h-auto" style={{ color: '#CF0A2C' }} />, color: '#CF0A2C', status: 'untested' },
+    { icon: <SiHonor className="w-58 h-auto" style={{ color: '#00BFFF' }} />, color: '#00BFFF', status: 'untested' }
+  ]
+
+  const unsupportedBrands: BrandItem[] = [
+    {
+      icon: <SiApple className="w-20 h-auto" style={{ color: appleColor }} />,
+      color: appleColor,
+      status: 'unsupported'
+    },
+    { icon: <SiVivo className="w-24 h-auto" style={{ color: '#415FFF' }} />, color: '#415FFF', status: 'unsupported' }
+  ]
+
+  return (
+    <DefaultLayout
+      {...props}
+      ctx={{ ...props.ctx, version: undefined }}
+      className="relative overflow-hidden"
+      style={{ backgroundColor: bgColor, minHeight: '1440px' }}
+    >
+      {/* 弥散光 */}
+      <div className="absolute inset-0 pointer-events-none">
+        <div className="absolute rounded-full w-150 h-125 top-[20%] left-[10%] blur-[150px]" style={{ background: glow1 }} />
+        <div className="absolute rounded-full w-125 h-112.5 bottom-[15%] right-[10%] blur-[130px]" style={{ background: glow2 }} />
+      </div>
+
+      {/* 噪点 */}
+      <div className="absolute inset-0 pointer-events-none" style={{ opacity: noiseOpacity }}>
+        <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
+          <filter id="tipNoise" x="0%" y="0%" width="100%" height="100%">
+            <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="1" 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(#tipNoise)" />
+        </svg>
+      </div>
+
+      {/* 装饰 */}
+      <div className="absolute inset-0 pointer-events-none overflow-hidden">
+        <div className="absolute top-20 left-20 grid grid-cols-5 gap-2 opacity-30">
+          {Array.from({ length: 15 }).map((_, i) => (
+            <div key={i} className="w-2 h-2 rounded-full" style={{ backgroundColor: primaryColor }} />
+          ))}
+        </div>
+        <div className="absolute top-20 right-20 flex flex-col items-end gap-2 opacity-30">
+          <div className="h-0.75 rounded-full w-20" style={{ backgroundColor: secondaryColor }} />
+          <div className="h-0.75 rounded-full w-12" style={{ backgroundColor: secondaryColor }} />
+          <div className="h-0.75 rounded-full w-6" style={{ backgroundColor: secondaryColor }} />
+        </div>
+        <div className="absolute bottom-40 left-10 flex gap-2 opacity-30">
+          <div className="w-2 h-2 rounded-full" style={{ backgroundColor: primaryColor }} />
+          <div className="w-2 h-2 rounded-full" style={{ backgroundColor: primaryColor }} />
+          <div className="w-2 h-2 rounded-full" style={{ backgroundColor: primaryColor }} />
+          <div className="w-2 h-2 rounded-full" style={{ backgroundColor: primaryColor }} />
+        </div>
+        <div className="absolute bottom-10 right-10 opacity-30">
+          <svg width="100" height="100" viewBox="0 0 100 100">
+            <circle cx="50" cy="50" r="44" fill="none" stroke={primaryColor} strokeWidth="2" />
+            <circle cx="50" cy="50" r="28" fill="none" stroke={secondaryColor} strokeWidth="2" />
+          </svg>
+        </div>
+      </div>
+
+      {/* 内容层 - 正方形 */}
+      <div className="relative z-10 flex flex-col min-h-360 px-16 py-16">
+        {/* 顶部标签 */}
+        {/* <div className='flex items-center gap-3 mb-10'>
+          <div className='w-2.5 h-2.5 rounded-full' style={{ backgroundColor: primaryColor }} />
+          <span className='text-xl font-bold tracking-[0.2em] uppercase' style={{ color: mutedColor }}>
+            koishi-plugin-kkk · 实况照片
+          </span>
+        </div> */}
+        <div className="h-20"></div>
+
+        {/* 核心提示 */}
+        <div className="flex items-center gap-5 mb-16">
+          <div
+            className="rounded-full p-5 shrink-0"
+            style={{
+              background: 'radial-gradient(circle, ' + (dark ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.06)') + ' 0%, transparent 70%)'
+            }}
+          >
+            <ArrowDownToLine className="w-30 h-auto" style={{ color: primaryColor }} />
+          </div>
+          <div>
+            <h1 className="text-4xl font-bold leading-tight" style={{ color: accentColor }}>
+              保存原图
+            </h1>
+            <p className="text-5xl mt-1" style={{ color: mutedColor }}>
+              点击「查看原图」后保存到相册即可识别为实况照片
+            </p>
+          </div>
+        </div>
+
+        {/* 品牌 Logo 矩阵 */}
+        <div className="flex-1 flex flex-col justify-center items-center gap-6">
+          {/* 主体区域：支持 + 理论支持 */}
+          <div className="flex flex-col gap-6">
+            <div className="flex justify-center gap-6">
+              {supportedBrands.slice(0, 4).map((brand, idx) => (
+                <BrandCard key={idx} brand={brand} isDark={dark} />
+              ))}
+            </div>
+            <div className="flex justify-center gap-6">
+              {supportedBrands.slice(4).map((brand, idx) => (
+                <BrandCard key={idx} brand={brand} isDark={dark} />
+              ))}
+            </div>
+          </div>
+
+          {/* 分隔线 */}
+          <div className="w-200 h-px" style={{ backgroundColor: dark ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)' }} />
+
+          {/* 下方区域：不支持（显著缩小 + 弱化） */}
+          <div className="flex justify-center gap-8">
+            {unsupportedBrands.map((brand, idx) => (
+              <UnsupportedBrandCard key={idx} brand={brand} isDark={dark} />
+            ))}
+          </div>
+        </div>
+
+        {/* 兼容说明 */}
+        <div
+          className="flex items-start gap-4 mt-12 px-8 py-5 rounded-2xl"
+          style={{ backgroundColor: dark ? 'rgba(255,255,255,0.04)' : 'rgba(0,0,0,0.03)' }}
+        >
+          <Info className="w-6 h-6 shrink-0 mt-0.5" style={{ color: primaryColor }} />
+          <p className="text-xl leading-relaxed" style={{ color: mutedColor }}>
+            所有支持 Google Motion Photo 标准的相册 App 均可识别实况照片
+          </p>
+        </div>
+
+        {/* 底部：kkk 品牌标识 + Logo */}
+        <div className="flex justify-end items-end mt-auto pt-12">
+          <div className="flex items-end gap-6">
+            <div className="flex flex-col items-end">
+              <span className="text-xl font-bold tracking-[0.15em] uppercase" style={{ color: mutedColor }}>
+                KOISHI-PLUGIN
+              </span>
+              <span className="text-5xl font-black" style={{ color: accentColor }}>
+                kkk
+              </span>
+            </div>
+            <GlowImage glowStrength={1} blurRadius={25}>
+              <KkkLogo className="w-auto h-20" color={accentColor} />
+            </GlowImage>
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  )
+})
+
+LivePhotoTip.displayName = 'LivePhotoTip'
+
+export default LivePhotoTip

package/src/ktr/template/other/live-photo-tip/components/types.ts

@@ -0,0 +1,8 @@
+/** 本模板的数据类型（路由 index.tsx 与 components/ 实现共用）。 */
+
+export interface LivePhotoTipData {
+  /** 提示标题 */
+  title?: string
+  /** 附加说明 */
+  description?: string
+}

package/src/ktr/template/other/live-photo-tip/index.tsx

@@ -0,0 +1,9 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { LivePhotoTip } from './components/LivePhotoTip'
+
+export default defineTemplate({
+  name: '实况图提示',
+  description: '实况照片保存提示图片',
+  component: LivePhotoTip
+})

package/src/ktr/template/other/qrlogin/components/qrlogin.tsx

@@ -0,0 +1,295 @@
+import { AlertTriangle, QrCode, Smartphone } from 'lucide-react'
+import React from 'react'
+
+import { isDark } from '../../../../utils/theme'
+import { DefaultLayout } from '../../../components/DefaultLayout'
+import { GlowImage } from '../../../components/GlowImage'
+import { QRCodeWithAvatar } from '../../../components/QRCodeWithAvatar'
+import type { PosterProps } from '../../../types/ctx'
+import type { QrLoginData } from './types'
+
+/**
+ * APP 扫码登录组件
+ * @param props 组件属性
+ * @returns JSX元素
+ */
+export const QrLogin: React.FC<PosterProps<QrLoginData>> = React.memo((props) => {
+  const dark = isDark(props.ctx)
+
+  // 使用蓝紫色系弥散渐变
+  const bgColor = dark ? '#0f0f1a' : '#f8f6ff'
+  const secondaryColor = dark ? '#a78bfa' : '#8b5cf6'
+  const mutedColor = dark ? 'rgba(129,140,248,0.7)' : '#7c3aed'
+  const accentColor = dark ? '#c4b5fd' : '#4f46e5'
+  const warningColor = dark ? '#f87171' : '#dc2626' // 改为红色系警告色
+
+  return (
+    <DefaultLayout
+      {...props}
+      ctx={{ ...props.ctx, version: undefined }}
+      className="relative overflow-hidden"
+      style={{ backgroundColor: bgColor, minHeight: '2000px' }}
+    >
+      {/* 弥散光背景 */}
+      <div className="absolute inset-0 pointer-events-none">
+        {/* 顶部光斑 */}
+        <div
+          className="absolute rounded-full w-200 h-150 -top-50 left-1/2 -translate-x-1/2 blur-[150px]"
+          style={{
+            background: dark
+              ? 'radial-gradient(ellipse at 50% 30%, rgba(99,102,241,0.5) 0%, rgba(139,92,246,0.25) 50%, transparent 100%)'
+              : 'radial-gradient(ellipse at 50% 30%, rgba(99,102,241,0.35) 0%, rgba(139,92,246,0.18) 50%, transparent 100%)'
+          }}
+        />
+        {/* 中间光斑 */}
+        <div
+          className="absolute rounded-full w-175 h-175 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 blur-[140px]"
+          style={{
+            background: dark
+              ? 'radial-gradient(ellipse at 50% 50%, rgba(167,139,250,0.4) 0%, rgba(196,181,253,0.2) 50%, transparent 100%)'
+              : 'radial-gradient(ellipse at 50% 50%, rgba(167,139,250,0.3) 0%, rgba(196,181,253,0.12) 50%, transparent 100%)'
+          }}
+        />
+        {/* 底部光斑 */}
+        <div
+          className="absolute rounded-full w-200 h-150 -bottom-50 left-1/2 -translate-x-1/2 blur-[150px]"
+          style={{
+            background: dark
+              ? 'radial-gradient(ellipse at 50% 70%, rgba(124,58,237,0.35) 0%, rgba(99,102,241,0.18) 50%, transparent 100%)'
+              : 'radial-gradient(ellipse at 50% 70%, rgba(124,58,237,0.25) 0%, rgba(99,102,241,0.12) 50%, transparent 100%)'
+          }}
+        />
+      </div>
+
+      {/* 噪点纹理层 */}
+      <div className="absolute inset-0 pointer-events-none" style={{ opacity: dark ? 0.08 : 0.1 }}>
+        <svg className="w-full h-full" xmlns="http://www.w3.org/2000/svg">
+          <filter id="qrNoise" x="0%" y="0%" width="100%" height="100%">
+            <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="1" 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(#qrNoise)" />
+        </svg>
+      </div>
+
+      {/* 内容层 */}
+      <div className="relative z-10 flex flex-col min-h-500 pt-20 pb-20 px-32">
+        {/* 顶部标题区域 */}
+        <div className="flex flex-col gap-5">
+          <p className="text-2xl font-medium tracking-[0.3em] uppercase" style={{ color: mutedColor }}>
+            koishi-plugin-kkk
+          </p>
+          <div className="flex items-center gap-6">
+            <GlowImage glowStrength={0.8} blurRadius={25}>
+              <Smartphone className="w-20 h-20" style={{ color: accentColor }} />
+            </GlowImage>
+            <h1 className="text-[90px] font-black leading-none" style={{ color: accentColor }}>
+              扫码登录
+            </h1>
+          </div>
+          <p className="text-3xl font-medium" style={{ color: secondaryColor }}>
+            使用手机 APP 扫描二维码快速连接
+          </p>
+        </div>
+
+        {/* 警告提示卡片 */}
+        <div className="mt-10 mb-10">
+          <div
+            className="relative rounded-3xl p-10 border-4"
+            style={{
+              background: dark
+                ? 'linear-gradient(135deg, rgba(139,92,246,0.2) 0%, rgba(124,58,237,0.15) 100%)'
+                : 'linear-gradient(135deg, rgba(196,181,253,0.4) 0%, rgba(167,139,250,0.3) 100%)',
+              borderColor: dark ? '#a78bfa' : '#8b5cf6',
+              boxShadow: dark
+                ? '0 0 60px rgba(139,92,246,0.4), inset 0 0 40px rgba(139,92,246,0.15)'
+                : '0 0 60px rgba(139,92,246,0.3), inset 0 0 40px rgba(196,181,253,0.4)'
+            }}
+          >
+            {/* 警告图标 */}
+            <div className="absolute -top-12 left-1/2 -translate-x-1/2">
+              <div
+                className="rounded-full p-6"
+                style={{
+                  background: dark
+                    ? 'linear-gradient(135deg, #f87171 0%, #dc2626 100%)'
+                    : 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)',
+                  boxShadow: dark ? '0 0 40px rgba(248,113,113,0.6)' : '0 0 40px rgba(239,68,68,0.5)'
+                }}
+              >
+                <AlertTriangle className="w-16 h-16 text-white" strokeWidth={3} />
+              </div>
+            </div>
+
+            {/* 警告内容 */}
+            <div className="flex flex-col gap-6 mt-8">
+              <div className="text-center">
+                <h3 className="text-6xl font-black tracking-wider mb-4" style={{ color: warningColor }}>
+                  ⚠ 安全警告 ⚠
+                </h3>
+                <div className="space-y-3">
+                  <p className="text-4xl font-bold" style={{ color: dark ? '#c4b5fd' : '#7c3aed' }}>
+                    请勿截图转发此二维码
+                  </p>
+                  <p className="text-3xl font-medium" style={{ color: dark ? '#a78bfa' : '#8b5cf6' }}>
+                    图片含敏感登录信息
+                  </p>
+                </div>
+              </div>
+
+              {/* 分隔线 */}
+              <div className="flex items-center gap-4">
+                <div className="flex-1 h-1 rounded-full" style={{ backgroundColor: dark ? '#8b5cf6' : '#a78bfa', opacity: 0.5 }} />
+                <span className="text-3xl" style={{ color: dark ? '#a78bfa' : '#8b5cf6' }}>
+                  ◆
+                </span>
+                <div className="flex-1 h-1 rounded-full" style={{ backgroundColor: dark ? '#8b5cf6' : '#a78bfa', opacity: 0.5 }} />
+              </div>
+
+              <div className="text-center">
+                <p className="text-4xl font-bold tracking-wide" style={{ color: warningColor }}>
+                  泄露将导致服务器安全风险
+                </p>
+                <p className="text-3xl font-medium mt-3" style={{ color: dark ? '#a78bfa' : '#8b5cf6' }}>
+                  CONFIDENTIAL · 机密信息
+                </p>
+              </div>
+            </div>
+
+            {/* 装饰性边角 */}
+            <div
+              className="absolute top-4 left-4 w-12 h-12 border-t-4 border-l-4 rounded-tl-2xl"
+              style={{ borderColor: dark ? '#a78bfa' : '#8b5cf6' }}
+            />
+            <div
+              className="absolute top-4 right-4 w-12 h-12 border-t-4 border-r-4 rounded-tr-2xl"
+              style={{ borderColor: dark ? '#a78bfa' : '#8b5cf6' }}
+            />
+            <div
+              className="absolute bottom-4 left-4 w-12 h-12 border-b-4 border-l-4 rounded-bl-2xl"
+              style={{ borderColor: dark ? '#a78bfa' : '#8b5cf6' }}
+            />
+            <div
+              className="absolute bottom-4 right-4 w-12 h-12 border-b-4 border-r-4 rounded-br-2xl"
+              style={{ borderColor: dark ? '#a78bfa' : '#8b5cf6' }}
+            />
+          </div>
+        </div>
+
+        {/* 中间二维码区域 */}
+        <div className="flex-1 flex flex-col justify-center items-center py-12">
+          {/* 二维码 */}
+          {props.data.share_url ? (
+            <div className="flex justify-center items-center w-200 h-200">
+              <QRCodeWithAvatar
+                value={props.data.share_url}
+                avatarUrl={props.data.avatarUrl}
+                useDarkTheme={dark}
+                alt="登录二维码"
+                className="object-contain w-full h-full"
+              />
+            </div>
+          ) : (
+            <div className="flex flex-col gap-8 justify-center items-center w-200 h-200">
+              <QrCode className="w-40 h-40" style={{ color: mutedColor }} />
+              <span className="text-5xl font-medium" style={{ color: mutedColor }}>
+                二维码生成中...
+              </span>
+            </div>
+          )}
+
+          {/* 扫码提示 */}
+          <div className="mt-10 flex items-center gap-8">
+            <div className="w-32 h-2 rounded-full" style={{ background: `linear-gradient(90deg, transparent, ${mutedColor})` }} />
+            <div className="flex items-center gap-4">
+              <Smartphone className="w-12 h-12" style={{ color: mutedColor }} />
+              <span className="text-5xl font-bold" style={{ color: mutedColor }}>
+                打开 APP 扫一扫
+              </span>
+            </div>
+            <div className="w-32 h-2 rounded-full" style={{ background: `linear-gradient(90deg, ${mutedColor}, transparent)` }} />
+          </div>
+        </div>
+
+        {/* 底部服务器信息 */}
+        <div className="flex flex-col gap-6 mt-12">
+          <div
+            className="rounded-3xl p-10"
+            style={{
+              background: dark ? 'rgba(139,92,246,0.1)' : 'rgba(139,92,246,0.05)',
+              border: `2px solid ${dark ? 'rgba(139,92,246,0.3)' : 'rgba(139,92,246,0.2)'}`
+            }}
+          >
+            <div className="flex items-center gap-4 mb-6">
+              <svg className="w-12 h-12" viewBox="0 0 24 24" fill="none" stroke={mutedColor} strokeWidth="2">
+                <rect x="2" y="2" width="20" height="8" rx="2" />
+                <rect x="2" y="14" width="20" height="8" rx="2" />
+                <circle cx="6" cy="6" r="1" fill={mutedColor} />
+                <circle cx="6" cy="18" r="1" fill={mutedColor} />
+              </svg>
+              <span className="text-4xl font-bold" style={{ color: mutedColor }}>
+                服务器地址
+              </span>
+            </div>
+            <code className="text-6xl font-mono font-bold block text-center" style={{ color: accentColor }}>
+              {props.data.serverUrl}
+            </code>
+          </div>
+        </div>
+
+        {/* 底部装饰和 Logo */}
+        <div className="flex justify-between items-end mt-32">
+          {/* 左下角装饰 */}
+          <div className="flex flex-col space-y-3">
+            <svg className="w-12 h-12 opacity-20" viewBox="0 0 24 24" fill="none" stroke={mutedColor} strokeWidth="1.5">
+              <rect x="3" y="3" width="18" height="18" rx="2" />
+            </svg>
+            <svg className="w-12 h-12 opacity-40" viewBox="0 0 24 24" fill="none" stroke={mutedColor} strokeWidth="1.5">
+              <rect x="3" y="3" width="18" height="18" rx="2" />
+            </svg>
+            <svg className="w-12 h-12" viewBox="0 0 24 24" fill={accentColor}>
+              <rect x="3" y="3" width="18" height="18" rx="2" />
+            </svg>
+          </div>
+
+          {/* 右下角 Logo */}
+          <div className="flex items-end gap-6">
+            <div className="flex flex-col items-end justify-end">
+              <span className="text-3xl font-bold tracking-widest uppercase leading-tight mb-1" style={{ color: mutedColor }}>
+                KOISHI-PLUGIN
+              </span>
+              <span className="text-8xl font-black leading-none" style={{ color: accentColor }}>
+                kkk
+              </span>
+            </div>
+            <GlowImage glowStrength={1} blurRadius={25}>
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 230 221" className="w-auto h-36" style={{ color: accentColor }}>
+                <path
+                  d="M132.75,87.37l-53.72-53.37c-4.66-4.63-1.38-12.58,5.18-12.58h115.13c6.57,0,9.84,7.95,5.18,12.58l-53.72,53.37c-4.99,4.96-13.06,4.96-18.05,0Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M28.49,186.89l.03-51.42c-.02-6.57,7.92-9.87,12.56-5.23l57.02,57.02c4.64,4.64,1.34,12.41-5.23,12.39h-51.42c-7.04-.02-12.94-5.72-12.96-12.76Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M41.54,23.68l163.04,163.05c4.78,4.78,1.39,12.95-5.36,12.94h-47.88c-9.69,0-18.99-3.86-25.84-10.71L39.3,102.75c-6.85-6.85-10.7-16.15-10.7-25.84V29.04c0-6.76,8.16-10.14,12.94-5.36Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </GlowImage>
+          </div>
+        </div>
+      </div>
+    </DefaultLayout>
+  )
+})
+
+QrLogin.displayName = 'QrLogin'
+
+export default QrLogin

package/src/ktr/template/other/qrlogin/components/types.ts

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

package/src/ktr/template/other/qrlogin/index.tsx

@@ -0,0 +1,9 @@
+import { defineTemplate } from '@karinjs/template-react'
+
+import { QrLogin } from './components/qrlogin'
+
+export default defineTemplate({
+  name: 'APP扫码登录',
+  description: 'APP扫码登录二维码页面',
+  component: QrLogin
+})