refactor(routes): split emoji.tsx into modular emoji/ directory (T19c)
This commit is contained in:
DrSmoothl
File diff suppressed because it is too large
Load Diff
933
dashboard/src/routes/resource/emoji/EmojiDialogs.tsx
Normal file
933
dashboard/src/routes/resource/emoji/EmojiDialogs.tsx
Normal file
@@ -0,0 +1,933 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react'
|
||||
import { ArrowLeft, Check, CheckCircle2, ImageIcon, Upload, X } from 'lucide-react'
|
||||
import Dashboard from '@uppy/react/dashboard'
|
||||
import Uppy from '@uppy/core'
|
||||
import '@uppy/core/css/style.min.css'
|
||||
import '@uppy/dashboard/css/style.min.css'
|
||||
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Checkbox } from '@/components/ui/checkbox'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { Markdown } from '@/components/ui/markdown'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import { Textarea } from '@/components/ui/textarea'
|
||||
|
||||
import '@/styles/uppy-custom.css'
|
||||
import { useToast } from '@/hooks/use-toast'
|
||||
import {
|
||||
getEmojiOriginalUrl,
|
||||
getEmojiUploadUrl,
|
||||
updateEmoji,
|
||||
} from '@/lib/emoji-api'
|
||||
import { fetchWithAuth } from '@/lib/fetch-with-auth'
|
||||
import type { Emoji } from '@/types/emoji'
|
||||
|
||||
import type { UploadedFileInfo, UploadStep } from './types'
|
||||
|
||||
// ============================
|
||||
// 详情对话框组件
|
||||
// ============================
|
||||
export function EmojiDetailDialog({
|
||||
emoji,
|
||||
open,
|
||||
onOpenChange,
|
||||
}: {
|
||||
emoji: Emoji | null
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
}) {
|
||||
if (!emoji) return null
|
||||
|
||||
const formatTime = (timestamp: number | null) => {
|
||||
if (!timestamp) return '-'
|
||||
return new Date(timestamp * 1000).toLocaleString('zh-CN')
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl max-h-[90vh]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>表情包详情</DialogTitle>
|
||||
</DialogHeader>
|
||||
<ScrollArea className="max-h-[calc(90vh-8rem)] pr-4">
|
||||
<div className="space-y-4">
|
||||
{/* 表情包预览图 - 使用原图 */}
|
||||
<div className="flex justify-center">
|
||||
<div className="w-32 h-32 bg-muted rounded-lg flex items-center justify-center overflow-hidden">
|
||||
<img
|
||||
src={getEmojiOriginalUrl(emoji.id)}
|
||||
alt={emoji.description || '表情包'}
|
||||
className="w-full h-full object-cover"
|
||||
onError={(e) => {
|
||||
const target = e.target as HTMLImageElement
|
||||
target.style.display = 'none'
|
||||
const parent = target.parentElement
|
||||
if (parent) {
|
||||
parent.innerHTML =
|
||||
'<svg class="h-16 w-16 text-muted-foreground" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>'
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<Label className="text-muted-foreground">ID</Label>
|
||||
<div className="mt-1 font-mono">{emoji.id}</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground">格式</Label>
|
||||
<div className="mt-1">
|
||||
<Badge variant="outline">{emoji.format.toUpperCase()}</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-muted-foreground">文件路径</Label>
|
||||
<div className="mt-1 font-mono text-sm break-all bg-muted p-2 rounded">
|
||||
{emoji.full_path}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-muted-foreground">哈希值</Label>
|
||||
<div className="mt-1 font-mono text-sm break-all bg-muted p-2 rounded">
|
||||
{emoji.emoji_hash}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-muted-foreground">描述</Label>
|
||||
{emoji.description ? (
|
||||
<div className="mt-1 rounded-lg border bg-muted/50 p-3">
|
||||
<Markdown className="prose-sm">{emoji.description}</Markdown>
|
||||
</div>
|
||||
) : (
|
||||
<div className="mt-1 text-sm text-muted-foreground">-</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-muted-foreground">情绪</Label>
|
||||
<div className="mt-1">
|
||||
{emoji.emotion ? (
|
||||
<span className="text-sm">{emoji.emotion}</span>
|
||||
) : (
|
||||
<span className="text-sm text-muted-foreground">-</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<Label className="text-muted-foreground">状态</Label>
|
||||
<div className="mt-2 flex gap-2">
|
||||
{emoji.is_registered && (
|
||||
<Badge variant="default" className="bg-green-600">
|
||||
已注册
|
||||
</Badge>
|
||||
)}
|
||||
{emoji.is_banned && (
|
||||
<Badge variant="destructive">已封禁</Badge>
|
||||
)}
|
||||
{!emoji.is_registered && !emoji.is_banned && (
|
||||
<Badge variant="outline">未注册</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground">使用次数</Label>
|
||||
<div className="mt-1 font-mono text-lg">
|
||||
{emoji.usage_count}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div>
|
||||
<Label className="text-muted-foreground">记录时间</Label>
|
||||
<div className="mt-1 text-sm">
|
||||
{formatTime(emoji.record_time)}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<Label className="text-muted-foreground">注册时间</Label>
|
||||
<div className="mt-1 text-sm">
|
||||
{formatTime(emoji.register_time)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Label className="text-muted-foreground">最后使用</Label>
|
||||
<div className="mt-1 text-sm">
|
||||
{formatTime(emoji.last_used_time)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================
|
||||
// 编辑对话框组件
|
||||
// ============================
|
||||
export function EmojiEditDialog({
|
||||
emoji,
|
||||
open,
|
||||
onOpenChange,
|
||||
onSuccess,
|
||||
}: {
|
||||
emoji: Emoji | null
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
onSuccess: () => void
|
||||
}) {
|
||||
const [emotionInput, setEmotionInput] = useState('')
|
||||
const [isRegistered, setIsRegistered] = useState(false)
|
||||
const [isBanned, setIsBanned] = useState(false)
|
||||
const [saving, setSaving] = useState(false)
|
||||
|
||||
const { toast } = useToast()
|
||||
|
||||
useEffect(() => {
|
||||
if (emoji) {
|
||||
setEmotionInput(emoji.emotion || '')
|
||||
setIsRegistered(emoji.is_registered)
|
||||
setIsBanned(emoji.is_banned)
|
||||
}
|
||||
}, [emoji])
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!emoji) return
|
||||
|
||||
try {
|
||||
setSaving(true)
|
||||
// 将输入的标签字符串标准化为逗号分隔格式
|
||||
const emotionString = emotionInput
|
||||
.split(/[,,]/)
|
||||
.map((s) => s.trim())
|
||||
.filter(Boolean)
|
||||
.join(',')
|
||||
|
||||
await updateEmoji(emoji.id, {
|
||||
emotion: emotionString || undefined,
|
||||
is_registered: isRegistered,
|
||||
is_banned: isBanned,
|
||||
})
|
||||
|
||||
toast({
|
||||
title: '成功',
|
||||
description: '表情包信息已更新',
|
||||
})
|
||||
onOpenChange(false)
|
||||
onSuccess()
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : '保存失败'
|
||||
toast({
|
||||
title: '错误',
|
||||
description: message,
|
||||
variant: 'destructive',
|
||||
})
|
||||
} finally {
|
||||
setSaving(false)
|
||||
}
|
||||
}
|
||||
|
||||
if (!emoji) return null
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-2xl">
|
||||
<DialogHeader>
|
||||
<DialogTitle>编辑表情包</DialogTitle>
|
||||
<DialogDescription>修改表情包的情绪和状态信息</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<Label>情绪</Label>
|
||||
<Textarea
|
||||
value={emotionInput}
|
||||
onChange={(e) => setEmotionInput(e.target.value)}
|
||||
placeholder="输入情绪描述..."
|
||||
rows={2}
|
||||
className="mt-1"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
输入情绪相关的文本描述
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="is_registered"
|
||||
checked={isRegistered}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked === true) {
|
||||
setIsRegistered(true)
|
||||
setIsBanned(false) // 注册时自动取消封禁
|
||||
} else {
|
||||
setIsRegistered(false)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Label htmlFor="is_registered" className="cursor-pointer">
|
||||
已注册
|
||||
</Label>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="is_banned"
|
||||
checked={isBanned}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked === true) {
|
||||
setIsBanned(true)
|
||||
setIsRegistered(false) // 封禁时自动取消注册
|
||||
} else {
|
||||
setIsBanned(false)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Label htmlFor="is_banned" className="cursor-pointer">
|
||||
已封禁
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => onOpenChange(false)}>
|
||||
取消
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={saving}>
|
||||
{saving ? '保存中...' : '保存'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================
|
||||
// 上传对话框组件
|
||||
// ============================
|
||||
export function EmojiUploadDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
onSuccess,
|
||||
}: {
|
||||
open: boolean
|
||||
onOpenChange: (open: boolean) => void
|
||||
onSuccess: () => void
|
||||
}) {
|
||||
const [step, setStep] = useState<UploadStep>('select')
|
||||
const [uploadedFiles, setUploadedFiles] = useState<UploadedFileInfo[]>([])
|
||||
const [selectedFileId, setSelectedFileId] = useState<string | null>(null)
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const { toast } = useToast()
|
||||
|
||||
// 创建 Uppy 实例（仅用于文件选择，不自动上传）
|
||||
const uppy = useMemo(() => {
|
||||
const uppyInstance = new Uppy({
|
||||
id: 'emoji-uploader',
|
||||
autoProceed: false,
|
||||
restrictions: {
|
||||
maxFileSize: 10 * 1024 * 1024, // 10MB
|
||||
allowedFileTypes: [
|
||||
'image/jpeg',
|
||||
'image/png',
|
||||
'image/gif',
|
||||
'image/webp',
|
||||
],
|
||||
maxNumberOfFiles: 20,
|
||||
},
|
||||
locale: {
|
||||
pluralize: () => 0,
|
||||
strings: {
|
||||
addMoreFiles: '添加更多文件',
|
||||
addingMoreFiles: '正在添加更多文件',
|
||||
allowedFileTypes: '允许的文件类型:%{types}',
|
||||
cancel: '取消',
|
||||
closeModal: '关闭',
|
||||
complete: '完成',
|
||||
connectedToInternet: '已连接到互联网',
|
||||
copyLink: '复制链接',
|
||||
copyLinkToClipboardFallback: '复制下方链接',
|
||||
copyLinkToClipboardSuccess: '链接已复制到剪贴板',
|
||||
dashboardTitle: '选择文件',
|
||||
dashboardWindowTitle: '文件选择窗口(按 ESC 关闭)',
|
||||
done: '完成',
|
||||
dropHereOr: '拖放文件到这里或 %{browse}',
|
||||
dropHint: '将文件拖放到此处',
|
||||
dropPasteFiles: '将文件拖放到这里或 %{browseFiles}',
|
||||
dropPasteFolders: '将文件拖放到这里或 %{browseFolders}',
|
||||
dropPasteBoth: '将文件拖放到这里,%{browseFiles} 或 %{browseFolders}',
|
||||
dropPasteImportFiles:
|
||||
'将文件拖放到这里,%{browseFiles} 或从以下位置导入:',
|
||||
dropPasteImportFolders:
|
||||
'将文件拖放到这里,%{browseFolders} 或从以下位置导入:',
|
||||
dropPasteImportBoth:
|
||||
'将文件拖放到这里,%{browseFiles},%{browseFolders} 或从以下位置导入:',
|
||||
editFile: '编辑文件',
|
||||
editing: '正在编辑 %{file}',
|
||||
emptyFolderAdded: '未从空文件夹添加文件',
|
||||
exceedsSize: '%{file} 超过了最大允许大小 %{size}',
|
||||
failedToUpload: '上传 %{file} 失败',
|
||||
fileSource: '文件来源:%{name}',
|
||||
filesUploadedOfTotal: {
|
||||
0: '已上传 %{complete} / %{smart_count} 个文件',
|
||||
1: '已上传 %{complete} / %{smart_count} 个文件',
|
||||
},
|
||||
filter: '筛选',
|
||||
finishEditingFile: '完成编辑文件',
|
||||
folderAdded: {
|
||||
0: '已从 %{folder} 添加 %{smart_count} 个文件',
|
||||
1: '已从 %{folder} 添加 %{smart_count} 个文件',
|
||||
},
|
||||
generatingThumbnails: '正在生成缩略图...',
|
||||
import: '导入',
|
||||
importFiles: '从以下位置导入文件:',
|
||||
importFrom: '从 %{name} 导入',
|
||||
loading: '加载中...',
|
||||
logOut: '登出',
|
||||
myDevice: '我的设备',
|
||||
noFilesFound: '这里没有文件或文件夹',
|
||||
noInternetConnection: '无网络连接',
|
||||
openFolderNamed: '打开文件夹 %{name}',
|
||||
pause: '暂停',
|
||||
pauseUpload: '暂停上传',
|
||||
paused: '已暂停',
|
||||
poweredBy: '技术支持:%{uppy}',
|
||||
processingXFiles: {
|
||||
0: '正在处理 %{smart_count} 个文件',
|
||||
1: '正在处理 %{smart_count} 个文件',
|
||||
},
|
||||
recording: '录制中',
|
||||
removeFile: '移除文件',
|
||||
resetFilter: '重置筛选',
|
||||
resume: '继续',
|
||||
resumeUpload: '继续上传',
|
||||
retry: '重试',
|
||||
retryUpload: '重试上传',
|
||||
save: '保存',
|
||||
saveChanges: '保存更改',
|
||||
selectFileNamed: '选择文件 %{name}',
|
||||
selectX: {
|
||||
0: '选择 %{smart_count}',
|
||||
1: '选择 %{smart_count}',
|
||||
},
|
||||
smile: '笑一个!',
|
||||
startRecording: '开始录制视频',
|
||||
stopRecording: '停止录制视频',
|
||||
takePicture: '拍照',
|
||||
timedOut: '上传已停滞 %{seconds} 秒,正在中止。',
|
||||
upload: '下一步',
|
||||
uploadComplete: '上传完成',
|
||||
uploadFailed: '上传失败',
|
||||
uploadPaused: '上传已暂停',
|
||||
uploadXFiles: {
|
||||
0: '下一步(%{smart_count} 个文件)',
|
||||
1: '下一步(%{smart_count} 个文件)',
|
||||
},
|
||||
uploadXNewFiles: {
|
||||
0: '下一步(+%{smart_count} 个文件)',
|
||||
1: '下一步(+%{smart_count} 个文件)',
|
||||
},
|
||||
uploading: '正在上传',
|
||||
uploadingXFiles: {
|
||||
0: '正在上传 %{smart_count} 个文件',
|
||||
1: '正在上传 %{smart_count} 个文件',
|
||||
},
|
||||
xFilesSelected: {
|
||||
0: '已选择 %{smart_count} 个文件',
|
||||
1: '已选择 %{smart_count} 个文件',
|
||||
},
|
||||
xMoreFilesAdded: {
|
||||
0: '又添加了 %{smart_count} 个文件',
|
||||
1: '又添加了 %{smart_count} 个文件',
|
||||
},
|
||||
xTimeLeft: '剩余 %{time}',
|
||||
youCanOnlyUploadFileTypes: '您只能上传:%{types}',
|
||||
youCanOnlyUploadX: {
|
||||
0: '您只能上传 %{smart_count} 个文件',
|
||||
1: '您只能上传 %{smart_count} 个文件',
|
||||
},
|
||||
youHaveToAtLeastSelectX: {
|
||||
0: '您至少需要选择 %{smart_count} 个文件',
|
||||
1: '您至少需要选择 %{smart_count} 个文件',
|
||||
},
|
||||
browseFiles: '浏览文件',
|
||||
browseFolders: '浏览文件夹',
|
||||
cancelUpload: '取消上传',
|
||||
addMore: '添加更多',
|
||||
back: '返回',
|
||||
editFileWithFilename: '编辑文件 %{file}',
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
return uppyInstance
|
||||
}, [])
|
||||
|
||||
// 处理"下一步"按钮点击 - 进入编辑阶段
|
||||
useEffect(() => {
|
||||
const handleUpload = () => {
|
||||
const files = uppy.getFiles()
|
||||
if (files.length === 0) return
|
||||
|
||||
// 将选择的文件转换为我们的数据结构
|
||||
const fileInfos: UploadedFileInfo[] = files.map((file) => ({
|
||||
id: file.id,
|
||||
name: file.name,
|
||||
previewUrl: file.preview || URL.createObjectURL(file.data as File),
|
||||
emotion: '',
|
||||
description: '',
|
||||
isRegistered: true,
|
||||
file: file.data as File,
|
||||
}))
|
||||
|
||||
setUploadedFiles(fileInfos)
|
||||
|
||||
// 根据文件数量决定进入哪个步骤
|
||||
if (files.length === 1) {
|
||||
setSelectedFileId(fileInfos[0].id)
|
||||
setStep('edit-single')
|
||||
} else {
|
||||
setStep('edit-multiple')
|
||||
}
|
||||
}
|
||||
|
||||
uppy.on('upload', handleUpload)
|
||||
return () => {
|
||||
uppy.off('upload', handleUpload)
|
||||
}
|
||||
}, [uppy])
|
||||
|
||||
// 对话框关闭时重置状态
|
||||
useEffect(() => {
|
||||
if (!open) {
|
||||
uppy.cancelAll()
|
||||
setStep('select')
|
||||
setUploadedFiles([])
|
||||
setSelectedFileId(null)
|
||||
setUploading(false)
|
||||
}
|
||||
}, [open, uppy])
|
||||
|
||||
// 更新单个文件的元数据
|
||||
const updateFileInfo = useCallback(
|
||||
(fileId: string, updates: Partial<UploadedFileInfo>) => {
|
||||
setUploadedFiles((prev) =>
|
||||
prev.map((f) => (f.id === fileId ? { ...f, ...updates } : f))
|
||||
)
|
||||
},
|
||||
[]
|
||||
)
|
||||
|
||||
// 检查文件是否填写完成必填项(情感标签必填)
|
||||
const isFileComplete = useCallback((file: UploadedFileInfo) => {
|
||||
return file.emotion.trim().length > 0
|
||||
}, [])
|
||||
|
||||
// 检查所有文件是否都填写完成
|
||||
const allFilesComplete = useMemo(() => {
|
||||
return uploadedFiles.length > 0 && uploadedFiles.every(isFileComplete)
|
||||
}, [uploadedFiles, isFileComplete])
|
||||
|
||||
// 获取当前选中的文件
|
||||
const selectedFile = useMemo(() => {
|
||||
return uploadedFiles.find((f) => f.id === selectedFileId) || null
|
||||
}, [uploadedFiles, selectedFileId])
|
||||
|
||||
// 返回上一步
|
||||
const handleBack = useCallback(() => {
|
||||
if (step === 'edit-single' || step === 'edit-multiple') {
|
||||
setStep('select')
|
||||
setUploadedFiles([])
|
||||
setSelectedFileId(null)
|
||||
}
|
||||
}, [step])
|
||||
|
||||
// 执行实际上传
|
||||
const handleSubmit = useCallback(async () => {
|
||||
if (!allFilesComplete) {
|
||||
toast({
|
||||
title: '请填写必填项',
|
||||
description: '每个表情包的情感标签都是必填的',
|
||||
variant: 'destructive',
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
setUploading(true)
|
||||
let successCount = 0
|
||||
let failedCount = 0
|
||||
|
||||
try {
|
||||
for (const fileInfo of uploadedFiles) {
|
||||
const formData = new FormData()
|
||||
formData.append('file', fileInfo.file)
|
||||
formData.append('emotion', fileInfo.emotion)
|
||||
formData.append('description', fileInfo.description)
|
||||
formData.append('is_registered', fileInfo.isRegistered.toString())
|
||||
|
||||
try {
|
||||
const response = await fetchWithAuth(getEmojiUploadUrl(), {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
})
|
||||
|
||||
if (response.ok) {
|
||||
successCount++
|
||||
} else {
|
||||
failedCount++
|
||||
}
|
||||
} catch {
|
||||
failedCount++
|
||||
}
|
||||
}
|
||||
|
||||
if (failedCount === 0) {
|
||||
toast({
|
||||
title: '上传成功',
|
||||
description: `成功上传 ${successCount} 个表情包`,
|
||||
})
|
||||
onOpenChange(false)
|
||||
onSuccess()
|
||||
} else {
|
||||
toast({
|
||||
title: '部分上传失败',
|
||||
description: `成功 ${successCount} 个,失败 ${failedCount} 个`,
|
||||
variant: 'destructive',
|
||||
})
|
||||
onSuccess()
|
||||
}
|
||||
} finally {
|
||||
setUploading(false)
|
||||
}
|
||||
}, [allFilesComplete, uploadedFiles, toast, onOpenChange, onSuccess])
|
||||
|
||||
// 渲染文件选择步骤
|
||||
const renderSelectStep = () => (
|
||||
<div className="space-y-4">
|
||||
<div className="border rounded-lg overflow-hidden w-full">
|
||||
<Dashboard
|
||||
uppy={uppy}
|
||||
proudlyDisplayPoweredByUppy={false}
|
||||
hideProgressDetails
|
||||
height={350}
|
||||
width="100%"
|
||||
theme="auto"
|
||||
note="支持 JPG、PNG、GIF、WebP 格式,最多 20 个文件"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
|
||||
// 渲染单个文件编辑步骤
|
||||
const renderEditSingleStep = () => {
|
||||
const file = uploadedFiles[0]
|
||||
if (!file) return null
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="sm" onClick={handleBack}>
|
||||
<ArrowLeft className="h-4 w-4 mr-1" />
|
||||
返回
|
||||
</Button>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
编辑表情包信息
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-6">
|
||||
{/* 预览图 */}
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-32 h-32 rounded-lg border overflow-hidden bg-muted flex items-center justify-center">
|
||||
<img
|
||||
src={file.previewUrl}
|
||||
alt={file.name}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mt-2 text-center truncate max-w-32">
|
||||
{file.name}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 表单 */}
|
||||
<div className="flex-1 space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="single-emotion">
|
||||
情感标签 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="single-emotion"
|
||||
value={file.emotion}
|
||||
onChange={(e) =>
|
||||
updateFileInfo(file.id, { emotion: e.target.value })
|
||||
}
|
||||
placeholder="多个标签用逗号分隔,如:开心,高兴"
|
||||
className={!file.emotion.trim() ? 'border-destructive' : ''}
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
用于情感匹配,多个标签用逗号分隔
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="single-description">描述</Label>
|
||||
<Input
|
||||
id="single-description"
|
||||
value={file.description}
|
||||
onChange={(e) =>
|
||||
updateFileInfo(file.id, { description: e.target.value })
|
||||
}
|
||||
placeholder="输入表情包描述..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="single-is-registered"
|
||||
checked={file.isRegistered}
|
||||
onCheckedChange={(checked) =>
|
||||
updateFileInfo(file.id, { isRegistered: checked === true })
|
||||
}
|
||||
/>
|
||||
<Label htmlFor="single-is-registered" className="cursor-pointer">
|
||||
上传后立即注册(可被麦麦使用)
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={!allFilesComplete || uploading}
|
||||
>
|
||||
{uploading ? '上传中...' : '上传'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 渲染多个文件编辑步骤
|
||||
const renderEditMultipleStep = () => {
|
||||
const completedCount = uploadedFiles.filter(isFileComplete).length
|
||||
const totalCount = uploadedFiles.length
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="sm" onClick={handleBack}>
|
||||
<ArrowLeft className="h-4 w-4 mr-1" />
|
||||
返回
|
||||
</Button>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
编辑表情包信息({completedCount}/{totalCount} 已完成)
|
||||
</span>
|
||||
</div>
|
||||
<Badge variant={allFilesComplete ? 'default' : 'secondary'}>
|
||||
{allFilesComplete ? (
|
||||
<>
|
||||
<Check className="h-3 w-3 mr-1" />
|
||||
全部完成
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<X className="h-3 w-3 mr-1" />
|
||||
未完成
|
||||
</>
|
||||
)}
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
{/* 左侧:文件卡片列表 */}
|
||||
<ScrollArea className="h-[350px] pr-2">
|
||||
<div className="space-y-2">
|
||||
{uploadedFiles.map((file) => {
|
||||
const complete = isFileComplete(file)
|
||||
const isSelected = selectedFileId === file.id
|
||||
return (
|
||||
<div
|
||||
key={file.id}
|
||||
onClick={() => setSelectedFileId(file.id)}
|
||||
className={`
|
||||
flex items-center gap-3 p-3 rounded-lg border-2 cursor-pointer transition-all
|
||||
${isSelected ? 'ring-2 ring-primary' : ''}
|
||||
${complete ? 'border-green-500 bg-green-50 dark:bg-green-950/20' : 'border-border hover:border-muted-foreground/50'}
|
||||
`}
|
||||
>
|
||||
<div className="w-12 h-12 rounded border overflow-hidden bg-muted flex-shrink-0 flex items-center justify-center">
|
||||
<img
|
||||
src={file.previewUrl}
|
||||
alt={file.name}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium truncate">{file.name}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{file.emotion || '未填写情感标签'}
|
||||
</p>
|
||||
</div>
|
||||
{complete ? (
|
||||
<CheckCircle2 className="h-5 w-5 text-green-500 flex-shrink-0" />
|
||||
) : (
|
||||
<div className="h-5 w-5 rounded-full border-2 border-muted-foreground/30 flex-shrink-0" />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{/* 右侧:选中文件的编辑表单 */}
|
||||
<div className="border rounded-lg p-4">
|
||||
{selectedFile ? (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-16 h-16 rounded border overflow-hidden bg-muted flex items-center justify-center">
|
||||
<img
|
||||
src={selectedFile.previewUrl}
|
||||
alt={selectedFile.name}
|
||||
className="max-w-full max-h-full object-contain"
|
||||
/>
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="font-medium truncate">{selectedFile.name}</p>
|
||||
{isFileComplete(selectedFile) && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="text-green-600 border-green-600"
|
||||
>
|
||||
<Check className="h-3 w-3 mr-1" />
|
||||
已完成
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="multi-emotion">
|
||||
情感标签 <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<Input
|
||||
id="multi-emotion"
|
||||
value={selectedFile.emotion}
|
||||
onChange={(e) =>
|
||||
updateFileInfo(selectedFile.id, {
|
||||
emotion: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="多个标签用逗号分隔,如:开心,高兴"
|
||||
className={
|
||||
!selectedFile.emotion.trim() ? 'border-destructive' : ''
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="multi-description">描述</Label>
|
||||
<Input
|
||||
id="multi-description"
|
||||
value={selectedFile.description}
|
||||
onChange={(e) =>
|
||||
updateFileInfo(selectedFile.id, {
|
||||
description: e.target.value,
|
||||
})
|
||||
}
|
||||
placeholder="输入表情包描述..."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-2">
|
||||
<Checkbox
|
||||
id="multi-is-registered"
|
||||
checked={selectedFile.isRegistered}
|
||||
onCheckedChange={(checked) =>
|
||||
updateFileInfo(selectedFile.id, {
|
||||
isRegistered: checked === true,
|
||||
})
|
||||
}
|
||||
/>
|
||||
<Label
|
||||
htmlFor="multi-is-registered"
|
||||
className="cursor-pointer text-sm"
|
||||
>
|
||||
上传后立即注册
|
||||
</Label>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full flex items-center justify-center text-muted-foreground">
|
||||
<div className="text-center">
|
||||
<ImageIcon className="h-12 w-12 mx-auto mb-2 opacity-50" />
|
||||
<p>点击左侧卡片编辑</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
onClick={handleSubmit}
|
||||
disabled={!allFilesComplete || uploading}
|
||||
>
|
||||
{uploading ? '上传中...' : `上传全部 (${totalCount})`}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="max-w-3xl max-h-[90vh] overflow-hidden">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="flex items-center gap-2">
|
||||
<Upload className="h-5 w-5" />
|
||||
{step === 'select' && '上传表情包 - 选择文件'}
|
||||
{step === 'edit-single' && '上传表情包 - 填写信息'}
|
||||
{step === 'edit-multiple' && '上传表情包 - 批量编辑'}
|
||||
</DialogTitle>
|
||||
<DialogDescription>
|
||||
{step === 'select' &&
|
||||
'支持 JPG、PNG、GIF、WebP 格式,单个文件最大 10MB,可同时上传多个文件'}
|
||||
{step === 'edit-single' && '请填写表情包的情感标签(必填)和描述'}
|
||||
{step === 'edit-multiple' &&
|
||||
'点击左侧卡片编辑每个表情包的信息,情感标签为必填项'}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="overflow-y-auto pr-1">
|
||||
{step === 'select' && renderSelectStep()}
|
||||
{step === 'edit-single' && renderEditSingleStep()}
|
||||
{step === 'edit-multiple' && renderEditMultipleStep()}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
302
dashboard/src/routes/resource/emoji/EmojiList.tsx
Normal file
302
dashboard/src/routes/resource/emoji/EmojiList.tsx
Normal file
@@ -0,0 +1,302 @@
|
||||
import { Ban, CheckCircle2, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, Edit, Info, Trash2 } from 'lucide-react'
|
||||
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import { EmojiThumbnail } from '@/components/emoji-thumbnail'
|
||||
|
||||
import { getEmojiThumbnailUrl } from '@/lib/emoji-api'
|
||||
import type { Emoji } from '@/types/emoji'
|
||||
|
||||
interface EmojiListProps {
|
||||
emojiList: Emoji[]
|
||||
loading: boolean
|
||||
total: number
|
||||
page: number
|
||||
pageSize: number
|
||||
selectedIds: Set<number>
|
||||
cardSize: 'small' | 'medium' | 'large'
|
||||
jumpToPage: string
|
||||
onPageChange: (page: number) => void
|
||||
onJumpToPage: () => void
|
||||
onJumpToPageChange: (value: string) => void
|
||||
onToggleSelect: (id: number) => void
|
||||
onEdit: (emoji: Emoji) => void
|
||||
onViewDetail: (emoji: Emoji) => void
|
||||
onRegister: (emoji: Emoji) => void
|
||||
onBan: (emoji: Emoji) => void
|
||||
onDelete: (emoji: Emoji) => void
|
||||
}
|
||||
|
||||
export function EmojiList({
|
||||
emojiList,
|
||||
// loading,
|
||||
total,
|
||||
page,
|
||||
pageSize,
|
||||
selectedIds,
|
||||
cardSize,
|
||||
jumpToPage,
|
||||
onPageChange,
|
||||
onJumpToPage,
|
||||
onJumpToPageChange,
|
||||
onToggleSelect,
|
||||
onEdit,
|
||||
onViewDetail,
|
||||
onRegister,
|
||||
onBan,
|
||||
onDelete,
|
||||
}: EmojiListProps) {
|
||||
// 空状态
|
||||
if (emojiList.length === 0) {
|
||||
return (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
暂无数据
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// 卡片网格视图
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
className={`grid gap-3 ${
|
||||
cardSize === 'small'
|
||||
? 'grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-10'
|
||||
: cardSize === 'medium'
|
||||
? 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8'
|
||||
: 'grid-cols-2 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5'
|
||||
}`}
|
||||
>
|
||||
{emojiList.map((emoji) => (
|
||||
<div
|
||||
key={emoji.id}
|
||||
className={`group relative rounded-lg border bg-card overflow-hidden hover:ring-2 hover:ring-primary transition-all cursor-pointer ${
|
||||
selectedIds.has(emoji.id)
|
||||
? 'ring-2 ring-primary bg-primary/5'
|
||||
: ''
|
||||
}`}
|
||||
onClick={() => onToggleSelect(emoji.id)}
|
||||
>
|
||||
{/* 选中指示器 */}
|
||||
<div
|
||||
className={`absolute top-1 left-1 z-10 transition-opacity ${
|
||||
selectedIds.has(emoji.id)
|
||||
? 'opacity-100'
|
||||
: 'opacity-0 group-hover:opacity-100'
|
||||
}`}
|
||||
>
|
||||
<div
|
||||
className={`w-5 h-5 rounded-full border-2 flex items-center justify-center ${
|
||||
selectedIds.has(emoji.id)
|
||||
? 'bg-primary border-primary text-primary-foreground'
|
||||
: 'bg-background/80 border-muted-foreground/50'
|
||||
}`}
|
||||
>
|
||||
{selectedIds.has(emoji.id) && (
|
||||
<CheckCircle2 className="h-3 w-3" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 状态标签 */}
|
||||
<div className="absolute top-1 right-1 z-10 flex flex-col gap-0.5">
|
||||
{emoji.is_registered && (
|
||||
<Badge
|
||||
variant="default"
|
||||
className="bg-green-600 text-[10px] px-1 py-0"
|
||||
>
|
||||
已注册
|
||||
</Badge>
|
||||
)}
|
||||
{emoji.is_banned && (
|
||||
<Badge variant="destructive" className="text-[10px] px-1 py-0">
|
||||
已封禁
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 图片 */}
|
||||
<div
|
||||
className={`aspect-square bg-muted flex items-center justify-center overflow-hidden ${
|
||||
cardSize === 'small'
|
||||
? 'p-1'
|
||||
: cardSize === 'medium'
|
||||
? 'p-2'
|
||||
: 'p-3'
|
||||
}`}
|
||||
>
|
||||
<EmojiThumbnail
|
||||
src={getEmojiThumbnailUrl(emoji.id)}
|
||||
alt="表情包"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 底部信息和操作 */}
|
||||
<div
|
||||
className={`border-t bg-card ${cardSize === 'small' ? 'p-1' : 'p-2'}`}
|
||||
>
|
||||
{/* 使用次数和格式 */}
|
||||
<div className="flex items-center justify-between gap-1 text-xs text-muted-foreground mb-1">
|
||||
<Badge variant="outline" className="text-[10px] px-1 py-0">
|
||||
{emoji.format.toUpperCase()}
|
||||
</Badge>
|
||||
<span className="font-mono">{emoji.usage_count}次</span>
|
||||
</div>
|
||||
|
||||
{/* 操作按钮 - 悬停时显示 */}
|
||||
<div
|
||||
className={`flex gap-1 justify-center opacity-0 group-hover:opacity-100 transition-opacity ${
|
||||
cardSize === 'small' ? 'flex-wrap' : ''
|
||||
}`}
|
||||
>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onEdit(emoji)
|
||||
}}
|
||||
title="编辑"
|
||||
>
|
||||
<Edit className="h-3 w-3" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onViewDetail(emoji)
|
||||
}}
|
||||
title="详情"
|
||||
>
|
||||
<Info className="h-3 w-3" />
|
||||
</Button>
|
||||
{!emoji.is_registered && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 text-green-600 hover:text-green-700"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onRegister(emoji)
|
||||
}}
|
||||
title="注册"
|
||||
>
|
||||
<CheckCircle2 className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
{!emoji.is_banned && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 text-orange-600 hover:text-orange-700"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onBan(emoji)
|
||||
}}
|
||||
title="封禁"
|
||||
>
|
||||
<Ban className="h-3 w-3" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 text-red-600 hover:text-red-700"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
onDelete(emoji)
|
||||
}}
|
||||
title="删除"
|
||||
>
|
||||
<Trash2 className="h-3 w-3" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 分页 - 增强版 */}
|
||||
{total > 0 && (
|
||||
<div className="flex flex-col sm:flex-row items-center justify-between gap-4 mt-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
显示 {(page - 1) * pageSize + 1} 到{' '}
|
||||
{Math.min(page * pageSize, total)} 条，共 {total} 条
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
{/* 首页 */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onPageChange(1)}
|
||||
disabled={page === 1}
|
||||
className="hidden sm:flex"
|
||||
>
|
||||
<ChevronsLeft className="h-4 w-4" />
|
||||
</Button>
|
||||
|
||||
{/* 上一页 */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onPageChange(Math.max(1, page - 1))}
|
||||
disabled={page === 1}
|
||||
>
|
||||
<ChevronLeft className="h-4 w-4 sm:mr-1" />
|
||||
<span className="hidden sm:inline">上一页</span>
|
||||
</Button>
|
||||
|
||||
{/* 页码跳转 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
type="number"
|
||||
value={jumpToPage}
|
||||
onChange={(e) => onJumpToPageChange(e.target.value)}
|
||||
onKeyDown={(e) => e.key === 'Enter' && onJumpToPage()}
|
||||
placeholder={page.toString()}
|
||||
className="w-16 h-8 text-center"
|
||||
min={1}
|
||||
max={Math.ceil(total / pageSize)}
|
||||
/>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onJumpToPage}
|
||||
disabled={!jumpToPage}
|
||||
className="h-8"
|
||||
>
|
||||
跳转
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* 下一页 */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onPageChange(page + 1)}
|
||||
disabled={page >= Math.ceil(total / pageSize)}
|
||||
>
|
||||
<span className="hidden sm:inline">下一页</span>
|
||||
<ChevronRight className="h-4 w-4 sm:ml-1" />
|
||||
</Button>
|
||||
|
||||
{/* 末页 */}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => onPageChange(Math.ceil(total / pageSize))}
|
||||
disabled={page >= Math.ceil(total / pageSize)}
|
||||
className="hidden sm:flex"
|
||||
>
|
||||
<ChevronsRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
1
dashboard/src/routes/resource/emoji/index.ts
Normal file
1
dashboard/src/routes/resource/emoji/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { EmojiManagementPage } from './index.tsx'
|
||||
651
dashboard/src/routes/resource/emoji/index.tsx
Normal file
651
dashboard/src/routes/resource/emoji/index.tsx
Normal file
@@ -0,0 +1,651 @@
|
||||
import { useCallback, useEffect, useState } from 'react'
|
||||
import { Filter, RefreshCw, Trash2, Upload } from 'lucide-react'
|
||||
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Card,
|
||||
CardContent,
|
||||
CardDescription,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
} from '@/components/ui/card'
|
||||
// import { Input } from '@/components/ui/input'
|
||||
import { Label } from '@/components/ui/label'
|
||||
import { ScrollArea } from '@/components/ui/scroll-area'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from '@/components/ui/alert-dialog'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
|
||||
import { useToast } from '@/hooks/use-toast'
|
||||
import {
|
||||
banEmoji,
|
||||
batchDeleteEmojis,
|
||||
deleteEmoji,
|
||||
getEmojiList,
|
||||
getEmojiStats,
|
||||
registerEmoji,
|
||||
} from '@/lib/emoji-api'
|
||||
import type { Emoji, EmojiStats } from '@/types/emoji'
|
||||
|
||||
import {
|
||||
EmojiDetailDialog,
|
||||
EmojiEditDialog,
|
||||
EmojiUploadDialog,
|
||||
} from './EmojiDialogs'
|
||||
import { EmojiList } from './EmojiList'
|
||||
|
||||
export function EmojiManagementPage() {
|
||||
const [emojiList, setEmojiList] = useState<Emoji[]>([])
|
||||
const [stats, setStats] = useState<EmojiStats | null>(null)
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [page, setPage] = useState(1)
|
||||
const [total, setTotal] = useState(0)
|
||||
const [pageSize, setPageSize] = useState(20)
|
||||
const [registeredFilter, setRegisteredFilter] = useState<string>('all')
|
||||
const [bannedFilter, setBannedFilter] = useState<string>('all')
|
||||
const [formatFilter, setFormatFilter] = useState<string>('all')
|
||||
const [sortBy, setSortBy] = useState<string>('usage_count')
|
||||
const [sortOrder, setSortOrder] = useState<'desc' | 'asc'>('desc')
|
||||
const [selectedEmoji, setSelectedEmoji] = useState<Emoji | null>(null)
|
||||
const [detailDialogOpen, setDetailDialogOpen] = useState(false)
|
||||
const [editDialogOpen, setEditDialogOpen] = useState(false)
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
|
||||
const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set())
|
||||
const [batchDeleteDialogOpen, setBatchDeleteDialogOpen] = useState(false)
|
||||
const [jumpToPage, setJumpToPage] = useState('')
|
||||
const [cardSize, setCardSize] = useState<'small' | 'medium' | 'large'>(
|
||||
'medium'
|
||||
)
|
||||
const [uploadDialogOpen, setUploadDialogOpen] = useState(false)
|
||||
|
||||
const { toast } = useToast()
|
||||
|
||||
// 加载表情包列表
|
||||
const loadEmojiList = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true)
|
||||
const response = await getEmojiList({
|
||||
page,
|
||||
page_size: pageSize,
|
||||
is_registered:
|
||||
registeredFilter === 'all'
|
||||
? undefined
|
||||
: registeredFilter === 'registered',
|
||||
is_banned:
|
||||
bannedFilter === 'all' ? undefined : bannedFilter === 'banned',
|
||||
format: formatFilter === 'all' ? undefined : formatFilter,
|
||||
sort_by: sortBy,
|
||||
sort_order: sortOrder,
|
||||
})
|
||||
setEmojiList(response.data)
|
||||
setTotal(response.total)
|
||||
} catch (error) {
|
||||
const message =
|
||||
error instanceof Error ? error.message : '加载表情包列表失败'
|
||||
toast({
|
||||
title: '错误',
|
||||
description: message,
|
||||
variant: 'destructive',
|
||||
})
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [
|
||||
page,
|
||||
pageSize,
|
||||
registeredFilter,
|
||||
bannedFilter,
|
||||
formatFilter,
|
||||
sortBy,
|
||||
sortOrder,
|
||||
toast,
|
||||
])
|
||||
|
||||
// 加载统计数据
|
||||
const loadStats = async () => {
|
||||
try {
|
||||
const response = await getEmojiStats()
|
||||
setStats(response.data)
|
||||
} catch (error) {
|
||||
console.error('加载统计数据失败:', error)
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
loadEmojiList()
|
||||
}, [loadEmojiList])
|
||||
|
||||
useEffect(() => {
|
||||
loadStats()
|
||||
}, [])
|
||||
|
||||
// 查看详情
|
||||
const handleViewDetail = async (emoji: Emoji) => {
|
||||
setSelectedEmoji(emoji)
|
||||
setDetailDialogOpen(true)
|
||||
}
|
||||
|
||||
// 编辑表情包
|
||||
const handleEdit = (emoji: Emoji) => {
|
||||
setSelectedEmoji(emoji)
|
||||
setEditDialogOpen(true)
|
||||
}
|
||||
|
||||
// 删除表情包
|
||||
const handleDelete = (emoji: Emoji) => {
|
||||
setSelectedEmoji(emoji)
|
||||
setDeleteDialogOpen(true)
|
||||
}
|
||||
|
||||
// 确认删除
|
||||
const confirmDelete = async () => {
|
||||
if (!selectedEmoji) return
|
||||
|
||||
try {
|
||||
await deleteEmoji(selectedEmoji.id)
|
||||
toast({
|
||||
title: '成功',
|
||||
description: '表情包已删除',
|
||||
})
|
||||
setDeleteDialogOpen(false)
|
||||
setSelectedEmoji(null)
|
||||
loadEmojiList()
|
||||
loadStats()
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : '删除失败'
|
||||
toast({
|
||||
title: '错误',
|
||||
description: message,
|
||||
variant: 'destructive',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 快速注册
|
||||
const handleRegister = async (emoji: Emoji) => {
|
||||
try {
|
||||
await registerEmoji(emoji.id)
|
||||
toast({
|
||||
title: '成功',
|
||||
description: '表情包已注册',
|
||||
})
|
||||
loadEmojiList()
|
||||
loadStats()
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : '注册失败'
|
||||
toast({
|
||||
title: '错误',
|
||||
description: message,
|
||||
variant: 'destructive',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 快速封禁
|
||||
const handleBan = async (emoji: Emoji) => {
|
||||
try {
|
||||
await banEmoji(emoji.id)
|
||||
toast({
|
||||
title: '成功',
|
||||
description: '表情包已封禁',
|
||||
})
|
||||
loadEmojiList()
|
||||
loadStats()
|
||||
} catch (error) {
|
||||
const message = error instanceof Error ? error.message : '封禁失败'
|
||||
toast({
|
||||
title: '错误',
|
||||
description: message,
|
||||
variant: 'destructive',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 切换选择
|
||||
const toggleSelect = (id: number) => {
|
||||
const newSelected = new Set(selectedIds)
|
||||
if (newSelected.has(id)) {
|
||||
newSelected.delete(id)
|
||||
} else {
|
||||
newSelected.add(id)
|
||||
}
|
||||
setSelectedIds(newSelected)
|
||||
}
|
||||
|
||||
// 批量删除
|
||||
const handleBatchDelete = async () => {
|
||||
try {
|
||||
const result = await batchDeleteEmojis(Array.from(selectedIds))
|
||||
toast({
|
||||
title: '批量删除完成',
|
||||
description: result.message,
|
||||
})
|
||||
setSelectedIds(new Set())
|
||||
setBatchDeleteDialogOpen(false)
|
||||
loadEmojiList()
|
||||
loadStats()
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: '批量删除失败',
|
||||
description:
|
||||
error instanceof Error ? error.message : '批量删除失败',
|
||||
variant: 'destructive',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 页面跳转
|
||||
const handleJumpToPage = () => {
|
||||
const targetPage = parseInt(jumpToPage)
|
||||
const totalPages = Math.ceil(total / pageSize)
|
||||
if (targetPage >= 1 && targetPage <= totalPages) {
|
||||
setPage(targetPage)
|
||||
setJumpToPage('')
|
||||
} else {
|
||||
toast({
|
||||
title: '无效的页码',
|
||||
description: `请输入1-${totalPages}之间的页码`,
|
||||
variant: 'destructive',
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 获取格式选项
|
||||
const formatOptions = stats?.formats ? Object.keys(stats.formats) : []
|
||||
|
||||
return (
|
||||
<div className="h-[calc(100vh-4rem)] flex flex-col p-4 sm:p-6">
|
||||
{/* 页面标题 */}
|
||||
<div className="mb-4 sm:mb-6 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-2xl sm:text-3xl font-bold">表情包管理</h1>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
管理麦麦的表情包资源
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => setUploadDialogOpen(true)}
|
||||
className="gap-2"
|
||||
>
|
||||
<Upload className="h-4 w-4" />
|
||||
上传表情包
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="space-y-4 sm:space-y-6 pr-4">
|
||||
{/* 统计卡片 */}
|
||||
{stats && (
|
||||
<div className="grid gap-4 grid-cols-2 lg:grid-cols-4">
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>总数</CardDescription>
|
||||
<CardTitle className="text-2xl">{stats.total}</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>已注册</CardDescription>
|
||||
<CardTitle className="text-2xl text-green-600">
|
||||
{stats.registered}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>已封禁</CardDescription>
|
||||
<CardTitle className="text-2xl text-red-600">
|
||||
{stats.banned}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader className="pb-2">
|
||||
<CardDescription>未注册</CardDescription>
|
||||
<CardTitle className="text-2xl text-gray-600">
|
||||
{stats.unregistered}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* 筛选和排序 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Filter className="h-5 w-5" />
|
||||
筛选和排序
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<div className="space-y-2">
|
||||
<Label>排序方式</Label>
|
||||
<Select
|
||||
value={`${sortBy}-${sortOrder}`}
|
||||
onValueChange={(value) => {
|
||||
const [newSortBy, newSortOrder] = value.split('-')
|
||||
setSortBy(newSortBy)
|
||||
setSortOrder(newSortOrder as 'desc' | 'asc')
|
||||
setPage(1)
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="usage_count-desc">
|
||||
使用次数 (多→少)
|
||||
</SelectItem>
|
||||
<SelectItem value="usage_count-asc">
|
||||
使用次数 (少→多)
|
||||
</SelectItem>
|
||||
<SelectItem value="register_time-desc">
|
||||
注册时间 (新→旧)
|
||||
</SelectItem>
|
||||
<SelectItem value="register_time-asc">
|
||||
注册时间 (旧→新)
|
||||
</SelectItem>
|
||||
<SelectItem value="record_time-desc">
|
||||
记录时间 (新→旧)
|
||||
</SelectItem>
|
||||
<SelectItem value="record_time-asc">
|
||||
记录时间 (旧→新)
|
||||
</SelectItem>
|
||||
<SelectItem value="last_used_time-desc">
|
||||
最后使用 (新→旧)
|
||||
</SelectItem>
|
||||
<SelectItem value="last_used_time-asc">
|
||||
最后使用 (旧→新)
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>注册状态</Label>
|
||||
<Select
|
||||
value={registeredFilter}
|
||||
onValueChange={(value) => {
|
||||
setRegisteredFilter(value)
|
||||
setPage(1)
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部</SelectItem>
|
||||
<SelectItem value="registered">已注册</SelectItem>
|
||||
<SelectItem value="unregistered">未注册</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>封禁状态</Label>
|
||||
<Select
|
||||
value={bannedFilter}
|
||||
onValueChange={(value) => {
|
||||
setBannedFilter(value)
|
||||
setPage(1)
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部</SelectItem>
|
||||
<SelectItem value="banned">已封禁</SelectItem>
|
||||
<SelectItem value="unbanned">未封禁</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label>格式</Label>
|
||||
<Select
|
||||
value={formatFilter}
|
||||
onValueChange={(value) => {
|
||||
setFormatFilter(value)
|
||||
setPage(1)
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="all">全部</SelectItem>
|
||||
{formatOptions.map((format) => (
|
||||
<SelectItem key={format} value={format}>
|
||||
{format.toUpperCase()} ({stats?.formats[format]})
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3 pt-4 border-t">
|
||||
<div className="flex items-center gap-4">
|
||||
{selectedIds.size > 0 && (
|
||||
<span className="text-sm text-muted-foreground">
|
||||
已选择 {selectedIds.size} 个表情包
|
||||
</span>
|
||||
)}
|
||||
{/* 卡片尺寸切换 */}
|
||||
<div className="flex items-center gap-2">
|
||||
<Label className="text-sm whitespace-nowrap">
|
||||
卡片大小
|
||||
</Label>
|
||||
<Select
|
||||
value={cardSize}
|
||||
onValueChange={(
|
||||
value: 'small' | 'medium' | 'large'
|
||||
) => setCardSize(value)}
|
||||
>
|
||||
<SelectTrigger className="w-24">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="small">小</SelectItem>
|
||||
<SelectItem value="medium">中</SelectItem>
|
||||
<SelectItem value="large">大</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Label
|
||||
htmlFor="emoji-page-size"
|
||||
className="text-sm whitespace-nowrap"
|
||||
>
|
||||
每页显示
|
||||
</Label>
|
||||
<Select
|
||||
value={pageSize.toString()}
|
||||
onValueChange={(value) => {
|
||||
setPageSize(parseInt(value))
|
||||
setPage(1)
|
||||
setSelectedIds(new Set())
|
||||
}}
|
||||
>
|
||||
<SelectTrigger id="emoji-page-size" className="w-20">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="20">20</SelectItem>
|
||||
<SelectItem value="40">40</SelectItem>
|
||||
<SelectItem value="60">60</SelectItem>
|
||||
<SelectItem value="100">100</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
{selectedIds.size > 0 && (
|
||||
<>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => setSelectedIds(new Set())}
|
||||
>
|
||||
取消选择
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => setBatchDeleteDialogOpen(true)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-1" />
|
||||
批量删除
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end pt-4 border-t">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={loadEmojiList}
|
||||
disabled={loading}
|
||||
>
|
||||
<RefreshCw
|
||||
className={`h-4 w-4 mr-2 ${loading ? 'animate-spin' : ''}`}
|
||||
/>
|
||||
刷新
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 表情包卡片列表 */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>表情包列表</CardTitle>
|
||||
<CardDescription>
|
||||
共 {total} 个表情包,当前第 {page} 页
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<EmojiList
|
||||
emojiList={emojiList}
|
||||
loading={loading}
|
||||
total={total}
|
||||
page={page}
|
||||
pageSize={pageSize}
|
||||
selectedIds={selectedIds}
|
||||
cardSize={cardSize}
|
||||
jumpToPage={jumpToPage}
|
||||
onPageChange={setPage}
|
||||
onJumpToPage={handleJumpToPage}
|
||||
onJumpToPageChange={setJumpToPage}
|
||||
onToggleSelect={toggleSelect}
|
||||
onEdit={handleEdit}
|
||||
onViewDetail={handleViewDetail}
|
||||
onRegister={handleRegister}
|
||||
onBan={handleBan}
|
||||
onDelete={handleDelete}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* 详情对话框 */}
|
||||
<EmojiDetailDialog
|
||||
emoji={selectedEmoji}
|
||||
open={detailDialogOpen}
|
||||
onOpenChange={setDetailDialogOpen}
|
||||
/>
|
||||
|
||||
{/* 编辑对话框 */}
|
||||
<EmojiEditDialog
|
||||
emoji={selectedEmoji}
|
||||
open={editDialogOpen}
|
||||
onOpenChange={setEditDialogOpen}
|
||||
onSuccess={() => {
|
||||
loadEmojiList()
|
||||
loadStats()
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* 上传对话框 */}
|
||||
<EmojiUploadDialog
|
||||
open={uploadDialogOpen}
|
||||
onOpenChange={setUploadDialogOpen}
|
||||
onSuccess={() => {
|
||||
loadEmojiList()
|
||||
loadStats()
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
|
||||
{/* 批量删除确认对话框 */}
|
||||
<AlertDialog
|
||||
open={batchDeleteDialogOpen}
|
||||
onOpenChange={setBatchDeleteDialogOpen}
|
||||
>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>确认批量删除</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
你确定要删除选中的 {selectedIds.size}{' '}
|
||||
个表情包吗?此操作不可撤销。
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>取消</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleBatchDelete}>
|
||||
确认删除
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* 删除确认对话框 */}
|
||||
<Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>确认删除</DialogTitle>
|
||||
<DialogDescription>
|
||||
确定要删除这个表情包吗?此操作无法撤销。
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
variant="outline"
|
||||
onClick={() => setDeleteDialogOpen(false)}
|
||||
>
|
||||
取消
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={confirmDelete}>
|
||||
删除
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
13
dashboard/src/routes/resource/emoji/types.ts
Normal file
13
dashboard/src/routes/resource/emoji/types.ts
Normal file
@@ -0,0 +1,13 @@
|
||||
// 上传文件的元数据类型
|
||||
export interface UploadedFileInfo {
|
||||
id: string
|
||||
name: string
|
||||
previewUrl: string
|
||||
emotion: string
|
||||
description: string
|
||||
isRegistered: boolean
|
||||
file: File
|
||||
}
|
||||
|
||||
// 上传步骤类型
|
||||
export type UploadStep = 'select' | 'edit-single' | 'edit-multiple'
|
||||
Reference in New Issue
Block a user