mirror of
https://github.com/Rain-kl/OpenFlare.git
synced 2026-10-06 23:56:37 +08:00
ryan
768 lines
31 KiB
TypeScript
768 lines
31 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import { useState, useEffect } from "react"
|
|
import Image from "next/image"
|
|
import { toast } from "sonner"
|
|
import { Gift, Copy, Check, ExternalLink, Pencil, X, ImagePlus, History } from "lucide-react"
|
|
import type { UploadImageResponse } from "@/lib/services"
|
|
import { getFileUrl } from "@/lib/services/upload/upload.service"
|
|
import { Input } from "@/components/ui/input"
|
|
import { Label } from "@/components/ui/label"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
|
import { PasswordDialog } from "@/components/common/general/password-dialog"
|
|
import { ListData } from "@/components/common/general/list-data"
|
|
import { ImageCropper } from "@/components/common/redenvelope/image-cropper"
|
|
import { motion } from "motion/react"
|
|
import { RedEnvelopeCard } from "@/components/common/redenvelope/red-envelope-card"
|
|
import { useUser } from "@/contexts/user-context"
|
|
import services from "@/lib/services"
|
|
import type { RedEnvelopeType, CreateRedEnvelopeRequest, PublicConfigResponse, RedEnvelope, RedEnvelopeListResponse } from "@/lib/services"
|
|
|
|
interface RedEnvelopeCover {
|
|
coverImageUrl: string | null
|
|
heterotypicImageUrl: string | null
|
|
coverUploadId: string | null
|
|
heterotypicUploadId: string | null
|
|
}
|
|
|
|
/**
|
|
* 红包组件
|
|
*
|
|
* 提供红包发送功能，包括 Banner 和创建对话框
|
|
*/
|
|
export function RedEnvelope({ onSuccess }: { onSuccess?: () => void }) {
|
|
const { user } = useUser()
|
|
const [isFormOpen, setIsFormOpen] = useState(false)
|
|
const [isPasswordOpen, setIsPasswordOpen] = useState(false)
|
|
const [isResultOpen, setIsResultOpen] = useState(false)
|
|
const [copiedId, setCopiedId] = useState<string | null>(null)
|
|
const [isCropperOpen, setIsCropperOpen] = useState(false)
|
|
const [cropperType, setCropperType] = useState<'cover' | 'heterotypic'>('cover')
|
|
const [showCustomization, setShowCustomization] = useState(false)
|
|
const [historyCoverCovers, setHistoryCoverCovers] = useState<UploadImageResponse[]>([])
|
|
const [historyHeterotypicCovers, setHistoryHeterotypicCovers] = useState<UploadImageResponse[]>([])
|
|
|
|
/* 表单状态 */
|
|
const [type, setType] = useState<RedEnvelopeType>("random")
|
|
const [totalAmount, setTotalAmount] = useState("")
|
|
const [totalCount, setTotalCount] = useState("")
|
|
const [greeting, setGreeting] = useState("")
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
/* 封面状态 */
|
|
const [cover, setCover] = useState<RedEnvelopeCover>({
|
|
coverImageUrl: null,
|
|
heterotypicImageUrl: null,
|
|
coverUploadId: null,
|
|
heterotypicUploadId: null
|
|
})
|
|
|
|
/* 结果状态 */
|
|
const [resultLink, setResultLink] = useState("")
|
|
|
|
/* 配置状态 */
|
|
const [config, setConfig] = useState<PublicConfigResponse | null>(null)
|
|
|
|
/* 加载配置 */
|
|
const loadConfig = async () => {
|
|
try {
|
|
const result = await services.config.getPublicConfig()
|
|
setConfig(result)
|
|
} catch {
|
|
toast.error('加载配置失败')
|
|
}
|
|
}
|
|
|
|
/* 初始加载 */
|
|
useEffect(() => {
|
|
loadConfig()
|
|
}, [])
|
|
|
|
/* 验证积分格式 */
|
|
const validateAmount = (value: string): boolean => {
|
|
const regex = /^\d+(\.\d{1,2})?$/
|
|
return regex.test(value) && parseFloat(value) > 0
|
|
}
|
|
|
|
/* 处理表单提交 */
|
|
const handleFormSubmit = () => {
|
|
if (!totalAmount.trim()) {
|
|
toast.error("请设置积分总数")
|
|
return
|
|
}
|
|
|
|
if (!validateAmount(totalAmount)) {
|
|
toast.error("积分格式不正确，必须大于1且最多2位小数")
|
|
return
|
|
}
|
|
|
|
if (!totalCount.trim()) {
|
|
toast.error("请设置可领取人数")
|
|
return
|
|
}
|
|
|
|
const count = parseInt(totalCount)
|
|
if (isNaN(count) || count <= 0) {
|
|
toast.error("可领取人数必须大于0")
|
|
return
|
|
}
|
|
|
|
const amount = parseFloat(totalAmount)
|
|
|
|
if (amount < 1) {
|
|
toast.error("红包总金额不能低于1 LDC")
|
|
return
|
|
}
|
|
|
|
if (config && parseFloat(config.red_envelope_max_amount) > 0) {
|
|
if (amount > parseFloat(config.red_envelope_max_amount)) {
|
|
toast.error(`红包的积分总数不能超过 ${ config.red_envelope_max_amount } LDC`)
|
|
return
|
|
}
|
|
}
|
|
|
|
if (count > 10000) {
|
|
toast.error("可领取人数不能超过 10000 个")
|
|
return
|
|
}
|
|
|
|
if (amount / count < 0.01) {
|
|
toast.error("单个红包不可低于 0.01 LDC")
|
|
return
|
|
}
|
|
|
|
if (greeting.length > 100) {
|
|
toast.error("祝福语最多100字符")
|
|
return
|
|
}
|
|
|
|
setIsPasswordOpen(true)
|
|
}
|
|
|
|
/* 提交创建 */
|
|
const handleConfirmCreate = async (password: string) => {
|
|
setLoading(true)
|
|
try {
|
|
const data: CreateRedEnvelopeRequest = {
|
|
type,
|
|
total_amount: parseFloat(totalAmount),
|
|
total_count: parseInt(totalCount),
|
|
greeting: greeting || "恭喜发财，大吉大利",
|
|
pay_key: password,
|
|
cover_upload_id: cover.coverUploadId || undefined,
|
|
heterotypic_upload_id: cover.heterotypicUploadId || undefined,
|
|
}
|
|
|
|
const result = await services.redEnvelope.create(data)
|
|
|
|
const link = getEnvelopeLink(result.id)
|
|
setResultLink(link)
|
|
setIsPasswordOpen(false)
|
|
setIsFormOpen(false)
|
|
setIsResultOpen(true)
|
|
onSuccess?.()
|
|
|
|
/* 重置表单 */
|
|
setType("random")
|
|
setTotalAmount("")
|
|
setTotalCount("")
|
|
setGreeting("")
|
|
setCover({
|
|
coverImageUrl: null,
|
|
heterotypicImageUrl: null,
|
|
coverUploadId: null,
|
|
heterotypicUploadId: null
|
|
})
|
|
setShowCustomization(false)
|
|
|
|
} catch (error: unknown) {
|
|
const errorMessage = error instanceof Error ? error.message : '创建失败'
|
|
toast.error('创建红包失败', { description: errorMessage })
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
/* 复制链接 */
|
|
const handleCopyLink = async (link: string, envelopeId: string) => {
|
|
try {
|
|
await navigator.clipboard.writeText(link)
|
|
setCopiedId(envelopeId)
|
|
toast.success("链接已复制")
|
|
setTimeout(() => setCopiedId(null), 2000)
|
|
} catch {
|
|
toast.error("复制失败")
|
|
}
|
|
}
|
|
|
|
/* 计算手续费 */
|
|
const feeInfo = React.useMemo(() => {
|
|
if (!totalAmount || !config) return null
|
|
const amount = parseFloat(totalAmount)
|
|
if (isNaN(amount)) return null
|
|
|
|
const feeRate = parseFloat(config.red_envelope_fee_rate)
|
|
const fee = (amount * feeRate).toFixed(2)
|
|
const total = (amount + parseFloat(fee)).toFixed(2)
|
|
|
|
return { fee, total, rate: feeRate }
|
|
}, [totalAmount, config])
|
|
|
|
/* 生成红包链接 */
|
|
const getEnvelopeLink = (id: string) => {
|
|
if (typeof window !== 'undefined') {
|
|
return `${ window.location.origin }/redenvelope/${ id }`
|
|
}
|
|
return `/redenvelope/${ id }`
|
|
}
|
|
|
|
/* 处理封面裁剪完成 */
|
|
const handleCropComplete = async (croppedImage: string, coverType: 'cover' | 'heterotypic') => {
|
|
const uploadingToast = toast.loading(`正在上传${ coverType === 'cover' ? '背景封面' : '装饰图片' }...`)
|
|
try {
|
|
const result = await services.upload.uploadBase64Image(
|
|
croppedImage,
|
|
coverType,
|
|
`${ coverType }-${ Date.now() }.png`
|
|
)
|
|
|
|
setCover(prev => ({
|
|
...prev,
|
|
[coverType === 'cover' ? 'coverImageUrl' : 'heterotypicImageUrl']: getFileUrl(result.id),
|
|
[coverType === 'cover' ? 'coverUploadId' : 'heterotypicUploadId']: result.id
|
|
}))
|
|
|
|
toast.dismiss(uploadingToast)
|
|
toast.success(`${ coverType === 'cover' ? '背景封面' : '装饰图片' }已设置`)
|
|
} catch (error) {
|
|
toast.dismiss(uploadingToast)
|
|
const errorMessage = error instanceof Error ? error.message : '上传失败'
|
|
toast.error(`上传${ coverType === 'cover' ? '背景封面' : '装饰图片' }失败`, {
|
|
description: errorMessage
|
|
})
|
|
}
|
|
}
|
|
|
|
/* 加载历史封面 */
|
|
const loadHistoryCovers = async () => {
|
|
try {
|
|
const [covers, heterotypics] = await Promise.all([
|
|
services.redEnvelope.listCovers('cover'),
|
|
services.redEnvelope.listCovers('heterotypic'),
|
|
])
|
|
setHistoryCoverCovers(covers || [])
|
|
setHistoryHeterotypicCovers(heterotypics || [])
|
|
} catch {
|
|
// 静默失败，不影响主功能
|
|
}
|
|
}
|
|
|
|
/* 选择历史封面 */
|
|
const handleSelectHistoryCover = (item: UploadImageResponse, type: 'cover' | 'heterotypic') => {
|
|
// 检查是否已经选中当前项
|
|
const currentId = type === 'cover' ? cover.coverUploadId : cover.heterotypicUploadId
|
|
if (currentId === item.id) {
|
|
// 取消选择
|
|
setCover(prev => ({
|
|
...prev,
|
|
[type === 'cover' ? 'coverImageUrl' : 'heterotypicImageUrl']: null,
|
|
[type === 'cover' ? 'coverUploadId' : 'heterotypicUploadId']: null
|
|
}))
|
|
toast.success(`已取消选择${ type === 'cover' ? '背景封面' : '装饰图片' }`)
|
|
return
|
|
}
|
|
|
|
setCover(prev => ({
|
|
...prev,
|
|
[type === 'cover' ? 'coverImageUrl' : 'heterotypicImageUrl']: getFileUrl(item.id),
|
|
[type === 'cover' ? 'coverUploadId' : 'heterotypicUploadId']: item.id
|
|
}))
|
|
toast.success(`已选择历史${ type === 'cover' ? '背景封面' : '装饰图片' }`)
|
|
}
|
|
|
|
/* 打开裁剪对话框 */
|
|
const handleOpenCropper = (type: 'cover' | 'heterotypic') => {
|
|
setCropperType(type)
|
|
setIsCropperOpen(true)
|
|
}
|
|
|
|
/* 移除封面 */
|
|
const handleRemoveCover = (type: 'cover' | 'heterotypic') => {
|
|
setCover(prev => ({
|
|
...prev,
|
|
[type === 'cover' ? 'coverImageUrl' : 'heterotypicImageUrl']: null,
|
|
[type === 'cover' ? 'coverUploadId' : 'heterotypicUploadId']: null
|
|
}))
|
|
toast.success(`${ type === 'cover' ? '背景封面' : '装饰图片' }已移除`)
|
|
}
|
|
|
|
/* 处理图片加载错误 */
|
|
const handleImageError = (id: string, type: 'cover' | 'heterotypic') => {
|
|
if (type === 'cover') {
|
|
setHistoryCoverCovers(prev => prev.filter(item => item.id !== id))
|
|
} else {
|
|
setHistoryHeterotypicCovers(prev => prev.filter(item => item.id !== id))
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="bg-gradient-to-r from-red-500/10 to-orange-500/10 rounded-lg px-6 py-8">
|
|
<div className="max-w-2xl">
|
|
<h2 className="text-2xl font-bold mb-4 text-foreground">
|
|
发红包
|
|
</h2>
|
|
<p className="text-muted-foreground mb-6 leading-relaxed">
|
|
创建积分红包，支持固定金额和拼手气两种模式。
|
|
</p>
|
|
<Button
|
|
onClick={() => setIsFormOpen(true)}
|
|
className="bg-red-500 hover:bg-red-600 font-medium px-6 rounded-md shadow-sm"
|
|
>
|
|
发红包
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<Dialog open={isFormOpen} onOpenChange={setIsFormOpen}>
|
|
<DialogContent className="sm:max-w-2xl md:max-w-3xl max-h-[90vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center justify-between pr-8">
|
|
<div className="flex items-center gap-2">
|
|
<Gift className="size-5 text-red-500" />
|
|
发红包
|
|
</div>
|
|
<Button
|
|
variant={showCustomization ? "default" : "ghost"}
|
|
size="sm"
|
|
onClick={() => setShowCustomization(!showCustomization)}
|
|
className={`flex items-center gap-1.5 text-xs transition-colors ${ showCustomization ? "bg-red-500 hover:bg-red-600 text-white" : "text-muted-foreground hover:text-foreground" }`}
|
|
>
|
|
<Pencil className="size-3.5" />
|
|
<span>自定义封面</span>
|
|
</Button>
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
创建积分红包，支持固定金额和拼手气两种模式{showCustomization && "，可添加个性化封面"}。
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="grid md:grid-cols-5 gap-8 pt-2">
|
|
<div className="space-y-4 md:col-span-3">
|
|
<div className="grid grid-cols-3 gap-4">
|
|
<div className="grid gap-2">
|
|
<Label>红包类型 <span className="text-red-500">*</span></Label>
|
|
<Select value={type} onValueChange={(v) => setType(v as RedEnvelopeType)}>
|
|
<SelectTrigger className="text-xs w-full shadow-none">
|
|
<SelectValue />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="random" className="text-xs">拼手气红包</SelectItem>
|
|
<SelectItem value="fixed" className="text-xs">普通红包</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="totalAmount">积分总数 <span className="text-red-500">*</span></Label>
|
|
<Input
|
|
id="totalAmount"
|
|
type="number"
|
|
step="0.01"
|
|
min="0.01"
|
|
max={config && parseFloat(config.red_envelope_max_amount) > 0 ? config.red_envelope_max_amount : undefined}
|
|
placeholder={config && parseFloat(config.red_envelope_max_amount) > 0 ? `最大 ${ config.red_envelope_max_amount }` : "0.00"}
|
|
value={totalAmount}
|
|
onChange={(e) => setTotalAmount(e.target.value)}
|
|
className="font-mono shadow-none"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="totalCount">可领取人数 <span className="text-red-500">*</span></Label>
|
|
<Input
|
|
id="totalCount"
|
|
type="number"
|
|
placeholder="最多 10000"
|
|
value={totalCount}
|
|
onChange={(e) => setTotalCount(e.target.value)}
|
|
className="font-mono shadow-none"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid gap-2">
|
|
<Label htmlFor="greeting">祝福语</Label>
|
|
<Textarea
|
|
id="greeting"
|
|
placeholder="恭喜发财，大吉大利"
|
|
value={greeting}
|
|
onChange={(e) => setGreeting(e.target.value)}
|
|
maxLength={100}
|
|
rows={2}
|
|
className="resize-none shadow-none"
|
|
disabled={loading}
|
|
/>
|
|
</div>
|
|
|
|
{showCustomization && (
|
|
<motion.div
|
|
initial={{ opacity: 0, height: 0 }}
|
|
animate={{ opacity: 1, height: 'auto' }}
|
|
exit={{ opacity: 0, height: 0 }}
|
|
transition={{ duration: 0.2, ease: 'easeOut' }}
|
|
className="rounded-lg bg-muted/40 p-4"
|
|
onAnimationComplete={() => loadHistoryCovers()}
|
|
>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<Label className="text-sm font-medium">红包封面</Label>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
onClick={() => {
|
|
setShowCustomization(false)
|
|
setCover({
|
|
coverImageUrl: null,
|
|
heterotypicImageUrl: null,
|
|
coverUploadId: null,
|
|
heterotypicUploadId: null
|
|
})
|
|
}}
|
|
className="size-6 text-muted-foreground hover:text-foreground"
|
|
>
|
|
<X className="size-3.5" />
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className="space-y-1.5">
|
|
<Label className="text-[11px] text-muted-foreground">背景封面</Label>
|
|
{cover.coverImageUrl ? (
|
|
<div className="relative group rounded-lg overflow-hidden ring-1 ring-border/50 aspect-[2/3] w-full">
|
|
<Image
|
|
src={cover.coverImageUrl}
|
|
alt="背景封面"
|
|
fill
|
|
className="object-cover"
|
|
unoptimized
|
|
/>
|
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-200 flex items-center justify-center gap-1.5 opacity-0 group-hover:opacity-100">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className="size-7 rounded-full bg-white/20 backdrop-blur-sm text-white hover:bg-white/30"
|
|
onClick={() => handleOpenCropper('cover')}
|
|
>
|
|
<Pencil className="size-3" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className="size-7 rounded-full bg-white/20 backdrop-blur-sm text-white hover:bg-white/30"
|
|
onClick={() => handleRemoveCover('cover')}
|
|
>
|
|
<X className="size-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<button
|
|
onClick={() => handleOpenCropper('cover')}
|
|
className="w-full aspect-[2/3] rounded-lg border border-dashed border-border hover:border-foreground/25 bg-background hover:bg-muted/50 transition-colors flex flex-col items-center justify-center gap-2 cursor-pointer"
|
|
>
|
|
<ImagePlus className="size-5 text-muted-foreground/50" />
|
|
<span className="text-[11px] text-muted-foreground">上传背景</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-1.5">
|
|
<Label className="text-[11px] text-muted-foreground">装饰图片</Label>
|
|
{cover.heterotypicImageUrl ? (
|
|
<div className="relative group rounded-lg overflow-hidden ring-1 ring-border/50 aspect-[2/3] w-full">
|
|
<Image
|
|
src={cover.heterotypicImageUrl}
|
|
alt="装饰图片"
|
|
fill
|
|
className="object-cover"
|
|
unoptimized
|
|
/>
|
|
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/40 transition-all duration-200 flex items-center justify-center gap-1.5 opacity-0 group-hover:opacity-100">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className="size-7 rounded-full bg-white/20 backdrop-blur-sm text-white hover:bg-white/30"
|
|
onClick={() => handleOpenCropper('heterotypic')}
|
|
>
|
|
<Pencil className="size-3" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className="size-7 rounded-full bg-white/20 backdrop-blur-sm text-white hover:bg-white/30"
|
|
onClick={() => handleRemoveCover('heterotypic')}
|
|
>
|
|
<X className="size-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<button
|
|
onClick={() => handleOpenCropper('heterotypic')}
|
|
className="w-full aspect-[2/3] rounded-lg border border-dashed border-border hover:border-foreground/25 bg-background hover:bg-muted/50 transition-colors flex flex-col items-center justify-center gap-2 cursor-pointer"
|
|
>
|
|
<ImagePlus className="size-5 text-muted-foreground/50" />
|
|
<span className="text-[11px] text-muted-foreground">上传装饰</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-[10px] text-muted-foreground/60 mt-2.5 text-center">推荐 2:3 比例，上传后可裁剪</p>
|
|
|
|
{(historyCoverCovers.length > 0 || historyHeterotypicCovers.length > 0) && (
|
|
<div className="mt-3 pt-3 border-t border-border/50">
|
|
<div className="flex items-center gap-1.5 mb-2.5">
|
|
<History className="size-3 text-muted-foreground/60" />
|
|
<span className="text-[11px] text-muted-foreground/60">历史封面</span>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div>
|
|
{historyCoverCovers.length > 0 && (
|
|
<div className="flex gap-2 overflow-x-auto p-1 no-scrollbar">
|
|
{historyCoverCovers.map((item: UploadImageResponse) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => handleSelectHistoryCover(item, 'cover')}
|
|
className={`relative shrink-0 size-12 rounded-md overflow-hidden ring-1 transition-all ${ cover.coverUploadId === item.id
|
|
? 'ring-2 ring-primary scale-105'
|
|
: 'ring-border/50 hover:ring-foreground/25'
|
|
}`}
|
|
>
|
|
<Image
|
|
src={getFileUrl(item.id) || ''}
|
|
alt="背景"
|
|
fill
|
|
className="object-cover"
|
|
unoptimized
|
|
onError={() => handleImageError(item.id, 'cover')}
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div>
|
|
{historyHeterotypicCovers.length > 0 && (
|
|
<div className="flex gap-2 overflow-x-auto p-1 no-scrollbar">
|
|
{historyHeterotypicCovers.map((item: UploadImageResponse) => (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => handleSelectHistoryCover(item, 'heterotypic')}
|
|
className={`relative shrink-0 size-12 rounded-md overflow-hidden ring-1 transition-all ${ cover.heterotypicUploadId === item.id
|
|
? 'ring-2 ring-primary scale-105'
|
|
: 'ring-border/50 hover:ring-foreground/25'
|
|
}`}
|
|
>
|
|
<Image
|
|
src={getFileUrl(item.id) || ''}
|
|
alt="装饰"
|
|
fill
|
|
className="object-cover"
|
|
unoptimized
|
|
onError={() => handleImageError(item.id, 'heterotypic')}
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</motion.div>
|
|
)}
|
|
|
|
{feeInfo && parseFloat(feeInfo.fee) > 0 && (
|
|
<div className="text-xs space-y-1.5 p-3 rounded-lg bg-muted/50">
|
|
<div className="flex justify-between">
|
|
<span className="text-muted-foreground">积分</span>
|
|
<span className="font-mono text-muted-foreground">{totalAmount} LDC</span>
|
|
</div>
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-muted-foreground">
|
|
费率 ({(feeInfo.rate * 100).toFixed(2)}%)
|
|
</span>
|
|
<span className="font-mono text-muted-foreground">+{feeInfo.fee} LDC</span>
|
|
</div>
|
|
<div className="border-t border-border/50 my-0.5" />
|
|
<div className="flex justify-between items-center">
|
|
<span className="text-foreground font-medium">总计</span>
|
|
<span className="font-mono font-semibold text-red-500">{feeInfo.total} LDC</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="md:col-span-2 flex items-center justify-center md:justify-end md:pr-8 my-6 md:my-0">
|
|
<div className="relative w-52 h-80">
|
|
{cover.heterotypicImageUrl && (
|
|
<motion.div
|
|
initial={{ scale: 0.95, opacity: 0 }}
|
|
animate={{ scale: 1, opacity: 1 }}
|
|
transition={{ duration: 0.3, ease: "easeOut" }}
|
|
className="absolute inset-0 z-0 pointer-events-none flex items-center justify-center"
|
|
>
|
|
<Image
|
|
src={cover.heterotypicImageUrl}
|
|
alt="装饰"
|
|
fill
|
|
className="object-cover"
|
|
style={{
|
|
transform: 'scale(1.2)',
|
|
transformOrigin: 'center center'
|
|
}}
|
|
unoptimized
|
|
/>
|
|
</motion.div>
|
|
)}
|
|
|
|
{/* 缩放容器：将 320px 宽的卡片等比缩放以适应 208px (w-52) 的容器 */}
|
|
<div className="absolute inset-0 overflow-hidden bg-[#F25542] rounded-lg">
|
|
<div className="absolute top-0 left-0 origin-top-left" style={{ width: 320, height: 533, transform: 'scale(0.65)' }}>
|
|
<RedEnvelopeCard
|
|
status="preview"
|
|
coverImage={cover.coverImageUrl}
|
|
greeting={greeting || "新年快乐，恭喜发财"}
|
|
sender={{
|
|
username: user?.username,
|
|
avatar_url: user?.avatar_url
|
|
}}
|
|
className="rounded-xl w-full h-full"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2 pt-4">
|
|
<Button variant="ghost" onClick={() => setIsFormOpen(false)} disabled={loading} className="h-8 text-xs">
|
|
取消
|
|
</Button>
|
|
<Button
|
|
onClick={handleFormSubmit}
|
|
disabled={!totalAmount || !totalCount || loading || !!(config && config.red_envelope_max_recipients > 0 && parseInt(totalCount) > config.red_envelope_max_recipients)}
|
|
className="bg-red-500 hover:bg-red-600 h-8 text-xs"
|
|
>
|
|
下一步
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<PasswordDialog
|
|
isOpen={isPasswordOpen}
|
|
onOpenChange={(open) => {
|
|
setIsPasswordOpen(open)
|
|
if (!open) setIsFormOpen(true)
|
|
}}
|
|
onConfirm={handleConfirmCreate}
|
|
loading={loading}
|
|
title="密码验证"
|
|
description={
|
|
feeInfo && parseFloat(feeInfo.fee) > 0
|
|
? `正在创建 ${ totalAmount } LDC 的积分红包，可领取人数 ${ totalCount } 个，服务费率 ${ feeInfo.fee } LDC，总计需要 ${ feeInfo.total } LDC`
|
|
: `正在创建 ${ totalAmount } LDC 的积分红包，可领取人数 ${ totalCount } 个`
|
|
}
|
|
/>
|
|
|
|
<Dialog open={isResultOpen} onOpenChange={setIsResultOpen}>
|
|
<DialogContent className="w-md">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2 text-green-600">
|
|
创建成功
|
|
</DialogTitle>
|
|
<DialogDescription>
|
|
复制此链接分享给好友领取红包
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
|
|
<div className="py-2">
|
|
<div className="flex gap-2">
|
|
<Input
|
|
value={resultLink}
|
|
readOnly
|
|
className="text-xs font-mono shadow-none border-none bg-muted"
|
|
/>
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => handleCopyLink(resultLink, "result")}
|
|
>
|
|
{copiedId === "result" ? <Check className="size-3" /> : <Copy className="size-3" />}
|
|
</Button>
|
|
<Button
|
|
variant="secondary"
|
|
size="sm"
|
|
onClick={() => window.open(resultLink, "_blank")}
|
|
>
|
|
<ExternalLink className="size-3" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex justify-end">
|
|
<Button onClick={() => setIsResultOpen(false)} className="h-8 text-xs">
|
|
完成
|
|
</Button>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<ImageCropper
|
|
isOpen={isCropperOpen}
|
|
onOpenChange={setIsCropperOpen}
|
|
onCropComplete={handleCropComplete}
|
|
coverType={cropperType}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* 红包列表组件
|
|
*
|
|
* 使用通用 ListData 组件展示红包记录
|
|
*/
|
|
export function RedEnvelopeList({ refreshTrigger }: { refreshTrigger?: number }) {
|
|
const fetchEnvelopes = async (params: { page: number, page_size: number, type: string }) => {
|
|
const result: RedEnvelopeListResponse = await services.redEnvelope.getList({
|
|
page: params.page,
|
|
page_size: params.page_size,
|
|
type: params.type as 'sent' | 'received',
|
|
})
|
|
return { list: result.red_envelopes, total: result.total }
|
|
}
|
|
|
|
return (
|
|
<ListData
|
|
fetchData={fetchEnvelopes}
|
|
tabs={[
|
|
{ value: 'sent', label: '我发出的', color: 'bg-primary/10 text-primary' },
|
|
{ value: 'received', label: '我收到的', color: 'bg-primary/10 text-primary' }
|
|
]}
|
|
defaultTab="received"
|
|
refreshTrigger={refreshTrigger}
|
|
/>
|
|
)
|
|
}
|