131 lines
3.8 KiB
TypeScript
131 lines
3.8 KiB
TypeScript
"use client"
|
|
|
|
import { Task } from "../api/task/typing"
|
|
import CustomModal from "./CustomModal"
|
|
import { Skeleton, Stack, Flex, Box, Text } from "@mantine/core"
|
|
import { FolderPen, ImageDown, Trash2 } from "lucide-react"
|
|
import { useCallback, useEffect, useState } from "react"
|
|
import { storage, useImagesStore } from "../store"
|
|
|
|
interface ComponentProps {
|
|
open: boolean
|
|
handleClose: () => void
|
|
taskDetail?: Task.DataProps
|
|
}
|
|
|
|
const formatSize = (bytes: number) => {
|
|
const units = ["B", "KB", "MB", "GB", "TB"]
|
|
let unitIndex = 0
|
|
|
|
while (bytes >= 1024 && unitIndex < units.length - 1) {
|
|
bytes /= 1024
|
|
unitIndex++
|
|
}
|
|
|
|
return `${bytes.toFixed(2)} ${units[unitIndex]}`
|
|
}
|
|
|
|
const TaskCacheModal = ({ open, handleClose, taskDetail }: ComponentProps) => {
|
|
const [loading, setLoading] = useState(false)
|
|
const [data1, setData1] = useState<string>("0.00 B")
|
|
const [data2, setData2] = useState<string>("0.00 B")
|
|
|
|
const getData = useCallback(async () => {
|
|
setLoading(true)
|
|
if (open && taskDetail) {
|
|
const { id, data_name } = taskDetail
|
|
// 图片缓存
|
|
const imgNames = data_name.map((item) => item.name[0])
|
|
const imageData = useImagesStore.getState().images
|
|
let size = 0
|
|
imgNames.forEach((name) => {
|
|
if (imageData.has(name)) {
|
|
const base64Text = imageData.get(name)!
|
|
const text = base64Text.split("data:image/jpeg;base64,")[1]
|
|
size += (text.length * 3) / 4
|
|
}
|
|
})
|
|
setData1(formatSize(size))
|
|
// 标注备份
|
|
let taskLabelData = await storage.getItem(id.toString())
|
|
const jsonString = JSON.stringify(taskLabelData)
|
|
const encoder = new TextEncoder()
|
|
const uint8Array = encoder.encode(jsonString)
|
|
const byteSize = uint8Array.length
|
|
setData2(formatSize(byteSize))
|
|
setLoading(false)
|
|
}
|
|
}, [open, taskDetail])
|
|
|
|
useEffect(() => {
|
|
queueMicrotask(() => getData())
|
|
}, [getData])
|
|
|
|
const handleDeleteImageCache = () => {
|
|
// 删除图片缓存
|
|
if (data1 === "0.00 B") return
|
|
const imgNames = taskDetail?.data_name.map((item) => item.name[0]) ?? []
|
|
const imageData = structuredClone(useImagesStore.getState().images)
|
|
imgNames.forEach((name) => {
|
|
imageData.delete(name)
|
|
})
|
|
useImagesStore.getState().setImages(imageData)
|
|
setData1("0.00 B")
|
|
}
|
|
|
|
const handleDeleteLabelCache = () => {
|
|
// 删除标注备份
|
|
if (data2 === "0.00 B") return
|
|
storage.removeItem(taskDetail?.id.toString()!)
|
|
setData2("0.00 B")
|
|
}
|
|
|
|
return (
|
|
<CustomModal
|
|
title="任务缓存"
|
|
open={open}
|
|
onCancel={handleClose}
|
|
centered
|
|
footer={null}>
|
|
<Stack gap="sm">
|
|
<Flex justify="space-between" align="center" py="xs">
|
|
<Flex align="center" gap="xs">
|
|
<ImageDown size={16} />
|
|
<Text size="sm">图片缓存</Text>
|
|
{!loading ? (
|
|
<Text size="sm">{data1}</Text>
|
|
) : (
|
|
<Skeleton height={20} width={60} />
|
|
)}
|
|
</Flex>
|
|
<Box
|
|
style={{ cursor: "pointer" }}
|
|
onClick={handleDeleteImageCache}
|
|
c="gray">
|
|
<Trash2 size={16} />
|
|
</Box>
|
|
</Flex>
|
|
<Flex justify="space-between" align="center" py="xs">
|
|
<Flex align="center" gap="xs">
|
|
<FolderPen size={16} />
|
|
<Text size="sm">标注备份</Text>
|
|
{!loading ? (
|
|
<Text size="sm">{data2}</Text>
|
|
) : (
|
|
<Skeleton height={20} width={60} />
|
|
)}
|
|
</Flex>
|
|
<Box
|
|
style={{ cursor: "pointer" }}
|
|
onClick={handleDeleteLabelCache}
|
|
c="gray">
|
|
<Trash2 size={16} />
|
|
</Box>
|
|
</Flex>
|
|
</Stack>
|
|
</CustomModal>
|
|
)
|
|
}
|
|
|
|
export default TaskCacheModal
|