zhao/badl
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

🎨 Finish AudioCard component

Browse source
This commit is contained in:
zhbaor 2023-02-22 16:24:08 +08:00
parent 3a7cb3e9bc
commit e75d604a01
2 changed files with 113 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
frontend/src/App.vue
View file

@ -1,12 +1,39 @@
<script setup>
import "bootstrap/dist/css/bootstrap.css";
import "bootstrap-icons/font/bootstrap-icons.css"
import "bootstrap-icons/font/bootstrap-icons.css";
import AudioCard from "./components/AudioCard.vue";
const p1 = {
number: "BV1es41127Fd",
received: 0,
total: 0,
};
const p2 = {
number: "BV1es41127Fd",
title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
received: 0,
total: 0,
};
const p3 = {
number: "BV1es41127Fd",
title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
received: 1314514,
total: 1919810,
};
const p4 = {
number: "BV1es41127Fd",
title: "【洛天依/乐正绫原创】霜雪千年【PV付/COP】",
received: 1919810,
total: 1919810,
};
</script>
<template>
<div id="wrapper">
<AudioCard></AudioCard>
<AudioCard v-bind="p1"></AudioCard>
<AudioCard v-bind="p2"></AudioCard>
<AudioCard v-bind="p3"></AudioCard>
<AudioCard v-bind="p4"></AudioCard>
</div>
</template>

147
frontend/src/components/AudioCard.vue
View file

@ -1,77 +1,94 @@
<script setup></script>
<script setup>
import { computed } from "vue";
const props = defineProps({
number: String,
title: String,
received: Number,
total: Number,
});
const status = computed(() => {
if (!props.number || !props.title) {
return "Fetching";
} else if (props.total == 0) {
return "Ready";
} else if (props.received < props.total) {
return "Downloading";
} else {
return "Finished";
}
});
const working = computed(() => {
return ["Fetching", "Downloading"].includes(status.value);
});
const B2MiB = 1048576; // 1024 * 1024
const received_mib = computed(() => {
return (props.received / B2MiB).toFixed(1);
});
const total_mib = computed(() => {
return (props.total / B2MiB).toFixed(1);
});
const progress = computed(() => {
if (status.value == "Downloading") {
return Math.round((props.received / props.total) * 100);
} else {
return 100;
}
});
</script>
<template>
<div class="card">
<div class="card-body position-relative" style="padding-right: 64px">
<h6 class="text-muted mb-1">BV1es41127Fd</h6>
<div class="placeholder-wave">
<h5 class="placeholder w-75" style="height: 24px"></h5>
<div class="card-body position-relative">
<h6 v-if="number" class="text-muted mb-1">{{ number }}</h6>
<div v-else class="placeholder-wave">
<h6 class="placeholder w-25 bg-secondary" style="height: 19px"></h6>
</div>
<h5 v-if="title">{{ title }}</h5>
<div v-else class="placeholder-wave">
<h5 class="placeholder w-75 bg-secondary" style="height: 24px"></h5>
</div>
<div class="progress">
<div
class="progress-bar progress-bar-striped progress-bar-animated bg-warning text-dark"
class="progress-bar"
:class="{
'progress-bar-striped': working,
'progress-bar-animated': working,
'bg-warning': status == 'Fetching',
'bg-secondary': status == 'Ready',
'bg-primary': status == 'Downloading',
'bg-success': status == 'Finished',
}"
role="progressbar"
style="width: 100%"
:style="{ width: progress + '%' }"
>
Fetching Information
<span v-if="status == 'Fetching'" class="text-dark">Fetching Information</span>
<span v-else-if="status == 'Ready'">Ready</span>
<span v-else-if="status == 'Downloading'"
>{{ progress }}%<span class="px-1"></span>({{ received_mib }} /
{{ total_mib }} MiB)</span
>
<span v-else="status == 'Finished'">Download Complete</span>
</div>
</div>
<i
class="text-warning bi-info-circle position-absolute end-0 top-50 translate-middle"
></i>
</div>
</div>
<div class="card">
<div class="card-body position-relative" style="padding-right: 64px">
<h6 class="text-muted mb-1">BV1es41127Fd</h6>
<h5>【洛天依/乐正绫原创】霜雪千年【PV付/COP】</h5>
<div class="progress">
<div
class="progress-bar bg-secondary"
role="progressbar"
style="width: 100%"
>
Ready
</div>
</div>
<i
class="text-secondary bi-slash-circle position-absolute end-0 top-50 translate-middle"
></i>
</div>
</div>
<div class="card">
<div class="card-body position-relative" style="padding-right: 64px">
<h6 class="text-muted mb-1">BV1es41127Fd</h6>
<h5>【洛天依/乐正绫原创】霜雪千年【PV付/COP】</h5>
<div class="progress">
<div
class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar"
style="width: 45%"
>
<span>45%<span class="px-1"></span>(4.9 / 10.8 MiB)</span>
</div>
</div>
<i
class="text-primary bi-arrow-down-circle position-absolute end-0 top-50 translate-middle"
></i>
</div>
</div>
<div class="card">
<div class="card-body position-relative" style="padding-right: 64px">
<h6 class="text-muted mb-1">BV1es41127Fd</h6>
<h5>【洛天依/乐正绫原创】霜雪千年【PV付/COP】</h5>
<div class="progress">
<div
class="progress-bar bg-success"
role="progressbar"
style="width: 100%"
>
Download Complete
</div>
</div>
<i
class="text-success bi-check-circle position-absolute end-0 top-50 translate-middle"
class="position-absolute end-0 top-50 translate-middle"
:class="{
'text-warning': status == 'Fetching',
'bi-info-circle': status == 'Fetching',
'text-secondary': status == 'Ready',
'bi-slash-circle': status == 'Ready',
'text-primary': status == 'Downloading',
'bi-arrow-down-circle': status == 'Downloading',
'text-success': status == 'Finished',
'bi-check-circle': status == 'Finished',
}"
></i>
</div>
</div>
@ -85,4 +102,8 @@
i {
font-size: 36px;
}
.card-body {
padding-right: 64px;
}
</style>