mirror of
https://github.com/keven1024/015.git
synced 2026-05-26 07:08:02 +00:00
feat: update primary color in CSS and enhance about page with relative time display and progress component
This commit is contained in:
keven1024
@@ -50,7 +50,7 @@
|
|||||||
--card-foreground: oklch(0.129 0.042 264.695);
|
--card-foreground: oklch(0.129 0.042 264.695);
|
||||||
--popover: oklch(1 0 0);
|
--popover: oklch(1 0 0);
|
||||||
--popover-foreground: oklch(0.129 0.042 264.695);
|
--popover-foreground: oklch(0.129 0.042 264.695);
|
||||||
--primary: oklch(0.208 0.042 265.755);
|
--primary: oklch(0.4349 0.0673 257.47);
|
||||||
--primary-foreground: oklch(0.984 0.003 247.858);
|
--primary-foreground: oklch(0.984 0.003 247.858);
|
||||||
--secondary: oklch(0.968 0.007 247.896);
|
--secondary: oklch(0.968 0.007 247.896);
|
||||||
--secondary-foreground: oklch(0.208 0.042 265.755);
|
--secondary-foreground: oklch(0.208 0.042 265.755);
|
||||||
|
|||||||
@@ -1,240 +1,213 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { CurveType } from "@unovis/ts";
|
import { CurveType } from '@unovis/ts'
|
||||||
import { AreaChart } from "@/components/ui/chart-area";
|
import { AreaChart } from '@/components/ui/chart-area'
|
||||||
import { cx } from "class-variance-authority";
|
import { cx } from 'class-variance-authority'
|
||||||
import { useQuery } from "@tanstack/vue-query";
|
import { useQuery } from '@tanstack/vue-query'
|
||||||
import { Skeleton } from "@/components/ui/skeleton";
|
import { Skeleton } from '@/components/ui/skeleton'
|
||||||
import AboutChartTooltip from "@/components/AboutChartTooltip.vue";
|
import AboutChartTooltip from '@/components/AboutChartTooltip.vue'
|
||||||
import { filesize } from "filesize";
|
import { filesize } from 'filesize'
|
||||||
import SparkMD5 from "spark-md5";
|
import SparkMD5 from 'spark-md5'
|
||||||
import useMyAppConfig from "@/composables/useMyAppConfig";
|
import useMyAppConfig from '@/composables/useMyAppConfig'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import relativeTime from 'dayjs/plugin/relativeTime'
|
||||||
|
import Progress from '~/components/ui/progress/Progress.vue'
|
||||||
|
|
||||||
const appConfig = useMyAppConfig();
|
dayjs.extend(relativeTime)
|
||||||
const { site_title, site_desc } = appConfig.value || {};
|
|
||||||
|
const appConfig = useMyAppConfig()
|
||||||
|
const { site_title, site_desc } = appConfig.value || {}
|
||||||
|
|
||||||
const { data, isLoading } = useQuery({
|
const { data, isLoading } = useQuery({
|
||||||
queryKey: ["stat"],
|
queryKey: ['stat'],
|
||||||
queryFn: async () => {
|
queryFn: async () => {
|
||||||
const data = await $fetch<{ data: any }>("/api/stat");
|
const data = await $fetch<{ data: any }>('/api/stat')
|
||||||
return data.data;
|
return data.data
|
||||||
},
|
},
|
||||||
});
|
})
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n()
|
||||||
|
|
||||||
const chartTabs = computed(() => {
|
const chartTabs = computed(() => {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
label: t("about.file"),
|
label: t('about.file'),
|
||||||
value: "storage",
|
value: 'storage',
|
||||||
total:
|
total: data.value?.chart?.storage?.reduce((acc: number, curr: { file_size: number; file_num: number }) => acc + curr.file_num, 0) ?? 0,
|
||||||
data.value?.chart?.storage?.reduce(
|
},
|
||||||
(acc: number, curr: { file_size: number; file_num: number }) =>
|
{
|
||||||
acc + curr.file_num,
|
label: t('about.task'),
|
||||||
0,
|
value: 'queue',
|
||||||
) ?? 0,
|
total:
|
||||||
},
|
data.value?.chart?.queue?.reduce(
|
||||||
{
|
(acc: number, curr: { processed: number; failed: number }) => acc + curr.processed + curr.failed,
|
||||||
label: t("about.task"),
|
0
|
||||||
value: "queue",
|
) ?? 0,
|
||||||
total:
|
},
|
||||||
data.value?.chart?.queue?.reduce(
|
]
|
||||||
(acc: number, curr: { processed: number; failed: number }) =>
|
})
|
||||||
acc + curr.processed + curr.failed,
|
|
||||||
0,
|
|
||||||
) ?? 0,
|
|
||||||
},
|
|
||||||
];
|
|
||||||
});
|
|
||||||
|
|
||||||
const currentFileSize = computed(() => {
|
const currentFileSize = computed(() => {
|
||||||
return (
|
return data.value?.chart?.storage?.reduce((acc: number, curr: { file_size: number; file_num: number }) => acc + curr.file_size, 0) ?? 0
|
||||||
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 currentChartTab = ref<'storage' | 'queue'>('storage')
|
||||||
const currentChartData = computed(() => {
|
const currentChartData = computed(() => {
|
||||||
const { storage, queue } = data.value?.chart || {};
|
const { storage, queue } = data.value?.chart || {}
|
||||||
if (currentChartTab.value === "storage") {
|
if (currentChartTab.value === 'storage') {
|
||||||
|
return {
|
||||||
|
data: storage,
|
||||||
|
index: 'date',
|
||||||
|
categories: ['file_size', 'file_num'],
|
||||||
|
colors: ['#22d3ee', '#c084fc'],
|
||||||
|
}
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
data: storage,
|
data: queue,
|
||||||
index: "date",
|
index: 'date',
|
||||||
categories: ["file_size", "file_num"],
|
categories: ['processed', 'failed'],
|
||||||
colors: ["#22d3ee", "#c084fc"],
|
colors: ['#4ade80', '#f87171'],
|
||||||
};
|
}
|
||||||
}
|
})
|
||||||
return {
|
|
||||||
data: queue,
|
|
||||||
index: "date",
|
|
||||||
categories: ["processed", "failed"],
|
|
||||||
colors: ["#4ade80", "#f87171"],
|
|
||||||
};
|
|
||||||
});
|
|
||||||
|
|
||||||
const genUserAvatar = ({ email }: { email: string }) => {
|
const genUserAvatar = ({ email }: { email: string }) => {
|
||||||
if (!email) {
|
if (!email) {
|
||||||
return "/logo.png";
|
return '/logo.png'
|
||||||
}
|
}
|
||||||
return `https://www.gravatar.com/avatar/${SparkMD5.hash(email)}?d=retro`;
|
return `https://www.gravatar.com/avatar/${SparkMD5.hash(email)}?d=retro`
|
||||||
};
|
}
|
||||||
|
|
||||||
const handleUserClick = ({ url, email }: { url: string; email: string }) => {
|
const handleUserClick = ({ url, email }: { url: string; email: string }) => {
|
||||||
if (url) {
|
if (url) {
|
||||||
return navigateTo(url, { external: true });
|
return navigateTo(url, { external: true })
|
||||||
}
|
}
|
||||||
if (email) {
|
if (email) {
|
||||||
return navigateTo(`mailto:${email}`, { external: true });
|
return navigateTo(`mailto:${email}`, { external: true })
|
||||||
}
|
}
|
||||||
return null;
|
return null
|
||||||
};
|
}
|
||||||
|
|
||||||
const users = computed(() => {
|
const users = computed(() => {
|
||||||
const { email, name, url } = data.value?.admin || {};
|
const { email, name, url } = data.value?.admin || {}
|
||||||
return [
|
return [
|
||||||
...(!!name
|
...(!!name
|
||||||
? [
|
? [
|
||||||
{
|
{
|
||||||
title: t("about.admin"),
|
title: t('about.admin'),
|
||||||
email,
|
email,
|
||||||
name,
|
name,
|
||||||
url: url ?? (email ? `mailto:${email}` : null),
|
url: url ?? (email ? `mailto:${email}` : null),
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
: []),
|
: []),
|
||||||
{
|
{
|
||||||
title: t("about.author"),
|
title: t('about.author'),
|
||||||
name: "keven1024",
|
name: 'keven1024',
|
||||||
email: "keven@fudaoyuan.icu",
|
email: 'keven@fudaoyuan.icu',
|
||||||
url: "https://github.com/keven1024",
|
url: 'https://github.com/keven1024',
|
||||||
},
|
},
|
||||||
];
|
]
|
||||||
});
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div class="rounded-xl p-5 bg-white/50 backdrop-blur-xl w-full lg:w-200 my-5 flex flex-col gap-5">
|
||||||
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">{{ t('about.title') }}</div>
|
||||||
>
|
<div class="flex flex-col gap-2 items-center">
|
||||||
<div class="text-xl font-normal">{{ t("about.title") }}</div>
|
<NuxtImg src="/logo.png" class="size-20 rounded-xl" />
|
||||||
<div class="flex flex-col gap-2 items-center">
|
<div class="text-xl">{{ site_title ?? '015' }}</div>
|
||||||
<NuxtImg src="/logo.png" class="size-20 rounded-xl" />
|
<div class="text-sm opacity-75 text-center px-5">
|
||||||
<div class="text-xl">{{ site_title ?? "015" }}</div>
|
{{ site_desc ?? t('seo.desc') }}
|
||||||
<div class="text-sm opacity-75 text-center px-5">
|
|
||||||
{{ site_desc ?? t("seo.desc") }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="font-semibold">{{ t("about.systemInfo") }}</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">{{ t("about.systemVersion") }}</div>
|
|
||||||
<div class="text-xl font-semibold">
|
|
||||||
{{ data?.version ?? "dev" }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="rounded-xl bg-white/50 flex-1 flex flex-col p-3">
|
|
||||||
<div class="opacity-75 text-xs">{{ t("about.storage") }}</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">{{ t("about.analysis") }}</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"
|
|
||||||
:show-y-axis="true"
|
|
||||||
:show-x-axis="true"
|
|
||||||
: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>
|
||||||
<div class="text-md font-semibold">{{ user.name }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="font-semibold">{{ t('about.systemInfo') }}</div>
|
||||||
</template>
|
<template v-if="isLoading">
|
||||||
</div>
|
<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">{{ t('about.systemVersion') }}</div>
|
||||||
|
<div class="text-xl font-semibold flex items-center gap-1">
|
||||||
|
{{ data?.version ?? 'dev' }}
|
||||||
|
<span class="text-xs px-2 py-0.5 rounded bg-primary/20 text-primary">{{ dayjs(data?.build_time * 1000).fromNow() }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="rounded-xl bg-white/50 flex-1 flex flex-col p-3">
|
||||||
|
<div class="opacity-75 text-xs">{{ t('about.storage') }}</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>
|
||||||
|
<Progress class="h-1" :model-value="(currentFileSize / (data?.max_limit?.file_size ?? 0)) * 100" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="font-semibold">{{ t('about.analysis') }}</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"
|
||||||
|
:show-y-axis="true"
|
||||||
|
:show-x-axis="true"
|
||||||
|
: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>
|
</template>
|
||||||
|
|||||||
Reference in New Issue
Block a user