downloading

.env.development

@@ -1 +1 @@
-VITE_API_BASE_URL=http://10.10.10.10:3001/api/v1/
+VITE_API_BASE_URL=http://10.10.10.105:3001/api/v1/

src/api/types.ts

@@ -154,3 +154,19 @@ export interface Site {
     // 是否启用
     is_active: boolean
 }
+
+
+// 正在下载
+export interface DownloadingInfo {
+    hash?: string
+    title?: string
+    name?: string
+    year?: string
+    season_episode?: string
+    size?: number
+    progress?: number
+    state?: string
+    dlspeed?: string
+    upspeed?: string
+    media: {[key: string]: any}
+  }

src/components/cards/DownloadingCard.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { DownloadingInfo } from "@/api/types";
+
+// 输入参数
+const props = defineProps({
+  info: Object as PropType<DownloadingInfo>,
+});
+
+// 进度条
+const getPercentage = () => {
+  return props.info?.progress || 0;
+};
+
+// 速度
+const getSpeedText = () => {
+  return `↑${props.info?.upspeed}B/s ↓${props.info?.dlspeed}B/s`;
+};
+
+// 暂述状态
+const isDownloading = () => {
+  return props.info?.state === "downloading";
+};
+
+// 下载状态控制
+const toggleDownload = () => {
+  if (isDownloading()) {
+    // 暂停
+  } else {
+    // 开始
+  }
+};
+
+// 删除下截
+const deleteDownload = () => {
+  // 删除
+};
+</script>
+
+<template>
+  <VCard :key="props.info?.hash">
+    <div class="d-flex justify-space-between flex-nowrap flex-row">
+      <div class="ma-auto pa-5 pe-0" v-if="props.info?.media.image">
+        <VImg
+          aspect-ratio="2/3"
+          width="120"
+          class="rounded shadow-lg"
+          :src="props.info?.media.image"
+        />
+      </div>
+
+      <div class="w-full">
+        <VCardItem>
+          <VCardTitle>{{ props.info?.media.title || props.info?.name }}</VCardTitle>
+        </VCardItem>
+
+        <VCardText
+          class="break-all whitespace-normal line-clamp-2 overflow-hidden text-ellipsis ..."
+        >
+          {{ props.info?.title }}
+        </VCardText>
+
+        <VCardText class="text-subtitle-1"> {{ getSpeedText() }} </VCardText>
+
+        <VCardText>
+          <VProgressLinear v-if="getPercentage() > 0" :model-value="getPercentage()" />
+        </VCardText>
+
+        <VCardActions class="justify-space-t">
+          <VBtn @click="toggleDownload">
+            <span class="ms-2">{{ isDownloading() ? "暂停" : "开始" }}</span>
+          </VBtn>
+          <VBtn color="error" icon="mdi-trash-can-outline" @click="deleteDownload" />
+        </VCardActions>
+      </div>
+    </div>
+  </VCard>
+</template>

src/pages/downloading.vue

@@ -1,93 +1,9 @@
-<script lang="ts" setup>
+<script setup lang="ts">
-const iconsList = [
+import DownloadingListView from "@/views/reorganize/DownloadingListView.vue";
-  'mdi-ab-testing',
-  'mdi-abacus',
-  'mdi-abjad-arabic',
-  'mdi-abjad-hebrew',
-  'mdi-abugida-devanagari',
-  'mdi-abugida-thai',
-  'mdi-access-point',
-  'mdi-access-point-check',
-  'mdi-access-point-minus',
-  'mdi-access-point-network',
-  'mdi-access-point-network-off',
-  'mdi-access-point-off',
-  'mdi-access-point-plus',
-  'mdi-access-point-remove',
-  'mdi-account-alert-outline',
-  'mdi-account-arrow-left-outline',
-  'mdi-account-arrow-right-outline',
-  'mdi-account-box-multiple-outline',
-  'mdi-account-box-outline',
-  'mdi-account-cancel-outline',
-  'mdi-account-cash-outline',
-  'mdi-account-check-outline',
-  'mdi-account-child-outline',
-  'mdi-account-circle-outline',
-  'mdi-account-clock-outline',
-  'mdi-account-cog-outline',
-  'mdi-account-details-outline',
-  'mdi-alarm-light-outline',
-  'mdi-alert-box-outline',
-  'mdi-alert-circle-check-outline',
-  'mdi-alert-decagram-outline',
-  'mdi-alert-minus-outline',
-  'mdi-alert-outline',
-  'mdi-alert-plus-outline',
-  'mdi-check-outline',
-  'mdi-clipboard-outline',
-  'mdi-clipboard-play-outline',
-  'mdi-close-outline',
-  'mdi-cloud-check-outline',
-  'mdi-cloud-download-outline',
-  'mdi-cog-outline',
-  'mdi-compass-off-outline',
-  'mdi-contactless-payment-circle-outline',
-  'mdi-crown-outline',
-  'mdi-delete-outline',
-  'mdi-diamond-outline',
-  'mdi-email-open-outline',
-  'mdi-emoticon-happy-outline',
-  'mdi-file-multiple-outline',
-  'mdi-flask-empty-outline',
-]
 </script>
 
 <template>
   <div>
-    <div class="d-flex align-center flex-wrap">
+    <DownloadingListView />
-      <VCard
-        v-for="icon in iconsList"
-        :key="icon"
-        class="mb-6 me-6"
-      >
-        <VCardText class="py-3 px-4">
-          <VIcon
-            size="30"
-            :icon="icon"
-          />
-        </VCardText>
-
-        <!-- tooltips -->
-        <VTooltip
-          location="top"
-          activator="parent"
-        >
-          {{ icon }}
-        </VTooltip>
-      </VCard>
-    </div>
-
-    <!-- more icons -->
-    <div class="text-center">
-      <VBtn
-        href="https://materialdesignicons.com/"
-        rel="noopener noreferrer"
-        color="primary"
-        target="_blank"
-      >
-        View All Material Design Icons
-      </VBtn>
-    </div>
   </div>
 </template>

src/views/reorganize/DownloadingListView.vue

@@ -0,0 +1,46 @@
+<script lang="ts" setup>
+import api from "@/api";
+import type { DownloadingInfo } from "@/api/types";
+import DownloadingCard from "@/components/cards/DownloadingCard.vue";
+import PullRefresh from "pull-refresh-vue3";
+
+// 数据列表
+const dataList = ref<DownloadingInfo[]>([]);
+
+// 获取订阅列表数据
+const fetchData = async () => {
+  try {
+    dataList.value = await api.get("download");
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+// 加载时获取数据
+onMounted(fetchData);
+
+// 刷新状态
+const loading = ref(false);
+
+// 下拉刷新
+const onRefresh = () => {
+  loading.value = true;
+  fetchData();
+  loading.value = false;
+};
+</script>
+
+<template>
+  <PullRefresh v-model="loading" @refresh="onRefresh">
+    <div class="grid gap-3 grid-downloading-card">
+      <DownloadingCard v-for="data in dataList" :key="data.hash" :info="data" />
+    </div>
+  </PullRefresh>
+</template>
+
+<style type="scss">
+.grid-downloading-card {
+  grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
+  padding-block-end: 1rem;
+}
+</style>