mirror of
https://github.com/keven1024/015.git
synced 2026-05-26 07:08:02 +00:00
feat(front): add AboutChartTooltip and ImageCompressResult components for enhanced file upload statistics and visualization
This commit is contained in:
keven1024
38
front/components/AboutChartTooltip.vue
Normal file
38
front/components/AboutChartTooltip.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<script setup lang="ts">
|
||||
import { filesize } from "filesize";
|
||||
|
||||
const props = defineProps<{
|
||||
data: { name: string; value: string; color: string }[];
|
||||
title: string;
|
||||
}>();
|
||||
const dataKeyMap = {
|
||||
file_size: "文件大小",
|
||||
file_num: "文件数量",
|
||||
processed: "处理数量",
|
||||
failed: "失败数量",
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rounded-md bg-white p-2 flex flex-col gap-2">
|
||||
<div class="text-sm font-medium">{{ title }}</div>
|
||||
<div v-for="(item, index) in data" :key="index">
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<div
|
||||
class="h-5 w-2 rounded-full"
|
||||
:style="{ backgroundColor: item.color ?? '#222' }"
|
||||
></div>
|
||||
<div class="text-xs font-medium">
|
||||
{{ dataKeyMap?.[item.name as keyof typeof dataKeyMap] ?? item.name }}
|
||||
</div>
|
||||
<div class="text-sm">
|
||||
{{
|
||||
["file_size"]?.includes(item?.name)
|
||||
? filesize(item.value)
|
||||
: item.value
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
146
front/components/Result/ImageCompressResult.vue
Normal file
146
front/components/Result/ImageCompressResult.vue
Normal file
@@ -0,0 +1,146 @@
|
||||
<script setup lang="ts">
|
||||
import { useQuery } from "@tanstack/vue-query";
|
||||
import { AsyncButton, Button } from "@/components/ui/button";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import { filesize } from "filesize";
|
||||
import useAppShare from "~/composables/useShare";
|
||||
const props = defineProps<{
|
||||
data: { file: File; config: any; handle_type: string; file_id: string };
|
||||
}>();
|
||||
|
||||
const { data } = useQuery({
|
||||
queryKey: ["create-image-compress", props?.data?.file_id],
|
||||
queryFn: async () => {
|
||||
const { file_id } = props?.data || {};
|
||||
const data = await $fetch<{
|
||||
code: number;
|
||||
data: {
|
||||
id?: string;
|
||||
};
|
||||
}>(`/api/image/compress`, {
|
||||
method: "POST",
|
||||
body: {
|
||||
file_id,
|
||||
},
|
||||
});
|
||||
return data?.data;
|
||||
},
|
||||
staleTime: Infinity,
|
||||
});
|
||||
|
||||
const taskId = computed(() => data?.value?.id);
|
||||
|
||||
const { data: taskData, refetch } = useQuery({
|
||||
queryKey: ["image-compress-task", taskId],
|
||||
queryFn: async () => {
|
||||
const data = await $fetch<{
|
||||
code: number;
|
||||
data: {
|
||||
result: {
|
||||
old_file: {
|
||||
id: string;
|
||||
size: number;
|
||||
};
|
||||
new_file: {
|
||||
id: string;
|
||||
size: number;
|
||||
};
|
||||
}[];
|
||||
status: "success" | "processing" | "failed";
|
||||
};
|
||||
}>(`/api/image/compress/${taskId.value}`);
|
||||
return data?.data;
|
||||
},
|
||||
enabled: !!taskId.value,
|
||||
});
|
||||
|
||||
const { downloadFile, createFileShare } = useAppShare();
|
||||
|
||||
const { counter, pause } = useInterval(2000, { controls: true });
|
||||
|
||||
watch(
|
||||
() => counter.value,
|
||||
() => {
|
||||
if (taskData.value?.status === "success") {
|
||||
pause();
|
||||
return;
|
||||
}
|
||||
refetch();
|
||||
},
|
||||
);
|
||||
</script>
|
||||
<template>
|
||||
<div class="flex flex-col gap-3">
|
||||
<h2 class="text-lg">上传成功</h2>
|
||||
<div class="flex flex-col gap-1 items-center">
|
||||
<div class="flex flex-col h-30 items-center justify-center">
|
||||
<FilePreviewView :value="props?.data?.file" />
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="taskData?.status === 'success'"
|
||||
class="flex flex-col gap-2"
|
||||
v-for="item in taskData?.result"
|
||||
>
|
||||
<div
|
||||
class="bg-white/80 p-2 rounded-md w-full flex flex-row items-center justify-between"
|
||||
>
|
||||
<div class="flex flex-row gap-2 items-center">
|
||||
<div
|
||||
class="flex flex-row items-center justify-center rounded-md bg-black/5 p-2"
|
||||
>
|
||||
<LucideImage />
|
||||
</div>
|
||||
{{ props?.data?.file?.name }}
|
||||
<div class="flex flex-row gap-2 items-center text-sm">
|
||||
<span class="opacity-75">{{
|
||||
filesize(item.new_file.size ?? 0)
|
||||
}}</span>
|
||||
<span
|
||||
class="bg-green-200 text-green-600 rounded-md px-1 py-0.5 flex flex-row gap-1 items-center text-xs"
|
||||
>
|
||||
<LucideChevronDown class="size-4" />
|
||||
{{
|
||||
((1 - item.new_file.size / item.old_file.size) * 100).toFixed(
|
||||
2,
|
||||
)
|
||||
}}%
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<AsyncButton
|
||||
variant="outline"
|
||||
class="bg-black/5"
|
||||
size="icon"
|
||||
@click="
|
||||
async () => {
|
||||
const data = await createFileShare({
|
||||
file_id: item.new_file.id,
|
||||
config: {
|
||||
download_nums: 1,
|
||||
expire_time: 60,
|
||||
has_pickup_code: false,
|
||||
has_password: false,
|
||||
},
|
||||
file_name: props?.data?.file?.name,
|
||||
});
|
||||
const { id } = data?.data || {};
|
||||
if (!id) {
|
||||
return;
|
||||
}
|
||||
await downloadFile(id);
|
||||
}
|
||||
"
|
||||
>
|
||||
<LucideDownload />
|
||||
</AsyncButton>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="flex flex-col gap-2">
|
||||
<Skeleton
|
||||
class="w-full h-16 flex flex-row items-center justify-between"
|
||||
v-for="i in 3"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
233
front/pages/about.vue
Normal file
233
front/pages/about.vue
Normal file
@@ -0,0 +1,233 @@
|
||||
<script setup lang="ts">
|
||||
import { CurveType } from "@unovis/ts";
|
||||
import { AreaChart } from "@/components/ui/chart-area";
|
||||
import { cx } from "class-variance-authority";
|
||||
import { useQuery } from "@tanstack/vue-query";
|
||||
import { Skeleton } from "@/components/ui/skeleton";
|
||||
import AboutChartTooltip from "@/components/AboutChartTooltip.vue";
|
||||
import { filesize } from "filesize";
|
||||
import SparkMD5 from "spark-md5";
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
queryKey: ["stat"],
|
||||
queryFn: async () => {
|
||||
const data = await $fetch<{ data: any }>("/api/stat");
|
||||
return data.data;
|
||||
},
|
||||
});
|
||||
|
||||
const chartTabs = computed(() => {
|
||||
return [
|
||||
{
|
||||
label: "文件",
|
||||
value: "storage",
|
||||
total:
|
||||
data.value?.chart?.storage?.reduce(
|
||||
(acc: number, curr: { file_size: number; file_num: number }) =>
|
||||
acc + curr.file_num,
|
||||
0,
|
||||
) ?? 0,
|
||||
},
|
||||
{
|
||||
label: "任务",
|
||||
value: "queue",
|
||||
total:
|
||||
data.value?.chart?.queue?.reduce(
|
||||
(acc: number, curr: { processed: number; failed: number }) =>
|
||||
acc + curr.processed + curr.failed,
|
||||
0,
|
||||
) ?? 0,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const currentFileSize = computed(() => {
|
||||
return (
|
||||
data.value?.chart?.storage?.reduce(
|
||||
(acc: number, curr: { file_size: number; file_num: number }) =>
|
||||
acc + curr.file_size,
|
||||
0,
|
||||
) ?? 0
|
||||
);
|
||||
});
|
||||
|
||||
const currentChartTab = ref<"storage" | "queue">("storage");
|
||||
const currentChartData = computed(() => {
|
||||
const { storage, queue } = data.value?.chart || {};
|
||||
if (currentChartTab.value === "storage") {
|
||||
return {
|
||||
data: storage,
|
||||
index: "date",
|
||||
categories: ["file_size", "file_num"],
|
||||
colors: ["#22d3ee", "#c084fc"],
|
||||
};
|
||||
}
|
||||
return {
|
||||
data: queue,
|
||||
index: "date",
|
||||
categories: ["processed", "failed"],
|
||||
colors: ["#4ade80", "#f87171"],
|
||||
};
|
||||
});
|
||||
|
||||
const genUserAvatar = ({ email }: { email: string }) => {
|
||||
if (!email) {
|
||||
return "/logo.png";
|
||||
}
|
||||
return `https://www.gravatar.com/avatar/${SparkMD5.hash(email)}?d=retro`;
|
||||
};
|
||||
|
||||
const handleUserClick = ({ url, email }: { url: string; email: string }) => {
|
||||
if (url) {
|
||||
return navigateTo(url, { external: true });
|
||||
}
|
||||
if (email) {
|
||||
return navigateTo(`mailto:${email}`, { external: true });
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const users = computed(() => {
|
||||
const { email, name, url } = data.value?.admin || {};
|
||||
return [
|
||||
...(!!name
|
||||
? [
|
||||
{
|
||||
title: "站长",
|
||||
email,
|
||||
name,
|
||||
url: url ?? (email ? `mailto:${email}` : null),
|
||||
},
|
||||
]
|
||||
: []),
|
||||
{
|
||||
title: "作者",
|
||||
name: "keven1024",
|
||||
email: "keven@fudaoyuan.icu",
|
||||
url: "https://github.com/keven1024",
|
||||
},
|
||||
];
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="rounded-xl p-5 bg-white/50 backdrop-blur-xl w-full lg:w-200 my-5 flex flex-col gap-5"
|
||||
>
|
||||
<div class="text-xl font-normal">关于</div>
|
||||
<div class="flex flex-col gap-2 items-center">
|
||||
<NuxtImg src="/logo.png" class="size-20 rounded-xl" />
|
||||
<div class="text-xl">015</div>
|
||||
<div class="text-sm opacity-75">
|
||||
015
|
||||
是一个开源的临时文件分享平台项目，支持临时大文件切片上传，临时文本上传、下载、分享
|
||||
</div>
|
||||
</div>
|
||||
<div class="font-semibold">系统信息</div>
|
||||
<template v-if="isLoading">
|
||||
<div class="flex flex-row gap-2">
|
||||
<Skeleton class="w-full h-20 rounded-xl" v-for="i in 2" :key="i" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="grid grid-cols-2 gap-2">
|
||||
<div class="rounded-xl bg-white/50 flex-1 flex flex-col p-3">
|
||||
<div class="opacity-75 text-xs">系统版本</div>
|
||||
<div class="text-xl font-semibold">
|
||||
{{ data?.version }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-xl bg-white/50 flex-1 flex flex-col p-3">
|
||||
<div class="opacity-75 text-xs">存储空间</div>
|
||||
<div class="text-right flex flex-row items-baseline">
|
||||
<span class="text-lg font-semibold">{{
|
||||
filesize(currentFileSize ?? 0)
|
||||
}}</span>
|
||||
<span class="text-md opacity-75"
|
||||
>/ {{ filesize(data?.max_limit?.file_size ?? 0) }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="rounded-full w-full h-1 bg-black/10">
|
||||
<div
|
||||
class="rounded-full h-full bg-blue-500"
|
||||
:style="{
|
||||
width: `${(currentFileSize / (data?.max_limit?.file_size ?? 0)) * 100}%`,
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="font-semibold">分析</div>
|
||||
<template v-if="isLoading">
|
||||
<div class="flex flex-row gap-2">
|
||||
<Skeleton class="w-full h-96 rounded-xl" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="flex flex-col gap-2 bg-white/50 w-full rounded-xl py-5">
|
||||
<div class="flex flex-row gap-2 px-5">
|
||||
<div
|
||||
:class="
|
||||
cx(
|
||||
'rounded-md min-w-30 flex flex-col px-3 py-1.5 cursor-pointer',
|
||||
currentChartTab === tab.value && 'bg-black/10',
|
||||
)
|
||||
"
|
||||
v-for="tab in chartTabs"
|
||||
:key="tab.value"
|
||||
@click="
|
||||
() => {
|
||||
currentChartTab = tab.value as 'storage' | 'queue';
|
||||
}
|
||||
"
|
||||
>
|
||||
<div class="opacity-75 text-xs">{{ tab.label }}</div>
|
||||
<div class="text-lg font-semibold">{{ tab.total }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<AreaChart
|
||||
v-if="currentChartData"
|
||||
class="h-64 w-full"
|
||||
:key="currentChartTab"
|
||||
:index="currentChartData.index"
|
||||
:data="currentChartData.data"
|
||||
:categories="currentChartData.categories"
|
||||
:show-grid-line="false"
|
||||
:show-legend="false"
|
||||
:colors="currentChartData.colors"
|
||||
:custom-tooltip="AboutChartTooltip"
|
||||
:curve-type="CurveType.CatmullRom"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="isLoading">
|
||||
<div class="flex flex-row gap-2">
|
||||
<Skeleton class="w-full h-20 rounded-xl" v-for="i in 2" :key="i" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-2">
|
||||
<div class="flex flex-col gap-3" v-for="user in users" :key="user.name">
|
||||
<div class="font-semibold">{{ user.title }}</div>
|
||||
<div
|
||||
class="rounded-xl bg-white/50 hover:bg-white/40 flex-1 flex flex-row items-center gap-2 p-3 cursor-pointer"
|
||||
@click="
|
||||
() => {
|
||||
handleUserClick(user);
|
||||
}
|
||||
"
|
||||
>
|
||||
<div class="size-10 rounded-full bg-white/50">
|
||||
<NuxtImg
|
||||
:src="genUserAvatar(user)"
|
||||
class="size-full rounded-full"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-md font-semibold">{{ user.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user