From 761cb651abe5edc9e9dd00f412f4e0be6852ef14 Mon Sep 17 00:00:00 2001
From: Zhao Zuohong <zhbaor@zhaozuohong.vip>
Date: Thu, 23 Feb 2023 11:08:38 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20Organize=20cards=20into=20view?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package-lock.json            |  8 +++---
 frontend/package.json                 |  2 +-
 frontend/src/App.vue                  | 40 ++-------------------------
 frontend/src/components/AudioCard.vue |  6 ++--
 frontend/src/views/AudioDownload.vue  | 40 +++++++++++++++++++++++++++
 5 files changed, 52 insertions(+), 44 deletions(-)
 create mode 100644 frontend/src/views/AudioDownload.vue

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d8b75a7..84786e2 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -8,7 +8,7 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
-        "bootstrap": "^5.2.3",
+        "bootstrap": "^5.3.0-alpha1",
         "bootstrap-icons": "^1.10.3",
         "vue": "^3.2.45"
       },
@@ -506,9 +506,9 @@
       "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
     },
     "node_modules/bootstrap": {
-      "version": "5.2.3",
-      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
-      "integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
+      "version": "5.3.0-alpha1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha1.tgz",
+      "integrity": "sha512-ABZpKK4ObS3kKlIqH+ZVDqoy5t/bhFG0oHTAzByUdon7YIom0lpCeTqRniDzJmbtcWkNe800VVPBiJgxSYTYew==",
       "funding": [
         {
           "type": "github",
diff --git a/frontend/package.json b/frontend/package.json
index aadf4d5..477f5a6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "bootstrap": "^5.2.3",
+    "bootstrap": "^5.3.0-alpha1",
     "bootstrap-icons": "^1.10.3",
     "vue": "^3.2.45"
   },
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 15ae394..ec77da1 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -1,45 +1,11 @@
 <script setup>
 import "bootstrap/dist/css/bootstrap.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,
-};
+import AudioDownload from "./views/AudioDownload.vue";
 </script>
 
 <template>
-  <div id="wrapper">
-    <AudioCard v-bind="p1"></AudioCard>
-    <AudioCard v-bind="p2"></AudioCard>
-    <AudioCard v-bind="p3"></AudioCard>
-    <AudioCard v-bind="p4"></AudioCard>
-  </div>
+  <AudioDownload></AudioDownload>
 </template>
 
-<style scoped>
-#wrapper {
-  margin-top: 20px;
-  margin-left: 20px;
-}
-</style>
+<style scoped></style>
diff --git a/frontend/src/components/AudioCard.vue b/frontend/src/components/AudioCard.vue
index 21095f1..f9a7f9d 100644
--- a/frontend/src/components/AudioCard.vue
+++ b/frontend/src/components/AudioCard.vue
@@ -44,7 +44,7 @@ const progress = computed(() => {
 </script>
 
 <template>
-  <div class="card">
+  <div class="card mb-2 w-100 shadow-sm">
     <div class="card-body position-relative">
       <h6 v-if="number" class="text-muted mb-1">{{ number }}</h6>
       <div v-else class="placeholder-wave">
@@ -68,7 +68,9 @@ const progress = computed(() => {
           role="progressbar"
           :style="{ width: progress + '%' }"
         >
-          <span v-if="status == 'Fetching'" class="text-dark">Fetching Information</span>
+          <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 }} /
diff --git a/frontend/src/views/AudioDownload.vue b/frontend/src/views/AudioDownload.vue
new file mode 100644
index 0000000..1bf388e
--- /dev/null
+++ b/frontend/src/views/AudioDownload.vue
@@ -0,0 +1,40 @@
+<script setup>
+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
+    class="d-flex flex-column p-3 align-items-center bg-body-secondary vh-100"
+  >
+    <AudioCard v-bind="p1"></AudioCard>
+    <AudioCard v-bind="p2"></AudioCard>
+    <AudioCard v-bind="p3"></AudioCard>
+    <AudioCard v-bind="p4"></AudioCard>
+  </div>
+</template>
+
+<style scoped></style>