From 9fb970aa11041b89d3dedaea2ecbe87fb496b8f1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=98=E5=98=89=E4=BC=9F?= <8473136@qq.com>
Date: Mon, 27 Nov 2023 17:03:27 +0800
Subject: [PATCH] =?UTF-8?q?:lipstick:=20=E4=BC=98=E5=8C=96=E6=BB=9A?=
 =?UTF-8?q?=E5=8A=A8=E6=9D=A1=E3=80=81=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/index.scss        |  1 +
 src/styles/scrollbar.scss    | 24 +++++++++
 src/views/download/index.vue | 95 ++++++++++++++++++++++--------------
 3 files changed, 83 insertions(+), 37 deletions(-)
 create mode 100644 src/styles/scrollbar.scss

diff --git a/src/styles/index.scss b/src/styles/index.scss
index 892b598..3f8ae73 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -2,6 +2,7 @@
 @import "layout";
 @import "element";
 @import "tailwind";
+@import "scrollbar";
 /* 自定义全局 CssVar */
 :root {
   --pure-transition-duration: 0.016s;
diff --git a/src/styles/scrollbar.scss b/src/styles/scrollbar.scss
new file mode 100644
index 0000000..e7c78a1
--- /dev/null
+++ b/src/styles/scrollbar.scss
@@ -0,0 +1,24 @@
+
+::-webkit-scrollbar {
+  width: 7px;
+  height: 5px;
+  border-radius:15px;
+  -webkit-border-radius:  15px;
+}
+::-webkit-scrollbar-track-piece {
+  background-color: #ffff;
+  border-radius:15px;
+  -webkit-border-radius:  15px;
+}
+::-webkit-scrollbar-thumb:vertical {
+  height: 5px;
+  background-color: rgba(144, 147, 153, 0.5);
+  border-radius: 15px;
+  -webkit-border-radius:  15px;
+}
+::-webkit-scrollbar-thumb:horizontal {
+  width: 7px;
+  background-color: rgba(144, 147, 153, 0.5);
+  border-radius:  15px;
+  -webkit-border-radius: 15px;
+}
diff --git a/src/views/download/index.vue b/src/views/download/index.vue
index 75042a4..d640981 100644
--- a/src/views/download/index.vue
+++ b/src/views/download/index.vue
@@ -1,8 +1,10 @@
 <script lang="ts" setup>
-import { defineComponent, onMounted, onUnmounted, ref } from "vue";
-import { ipcRenderer } from "electron";
+import {defineComponent, onMounted, onUnmounted, ref} from "vue";
+import {ipcRenderer} from "electron";
 import moment from "moment";
 import Breadcrumb from "@/layout/compoenets/Breadcrumb.vue";
+import {Icon} from "@iconify/vue";
+
 defineComponent({
   name: "Download"
 });
@@ -12,6 +14,9 @@ type Version = {
   name: string;
   published_at: string;
   download_completed: boolean;
+  assets: Array<{
+    name: string;
+  }>[]
 };
 
 const versions = ref<Array<Version>>([]);
@@ -38,20 +43,23 @@ const handleDownload = (version: Version) => {
 const handleInitDownloadHook = () => {
   ipcRenderer.on("Download.frpVersionHook", (event, args) => {
     loading.value--;
-    versions.value = args as Array<Version>;
+    versions.value = args.map(m => {
+      m.published_at = moment(m.published_at).format("YYYY-MM-DD HH:mm:ss")
+      return m as Version;
+    }) as Array<Version>;
   });
   // 进度监听
   ipcRenderer.on("Download.frpVersionDownloadOnProgress", (event, args) => {
-    const { id, progress } = args;
+    const {id, progress} = args;
     downloading.value.set(
-      id,
-      Number(Number(progress.percent * 100).toFixed(2))
+        id,
+        Number(Number(progress.percent * 100).toFixed(2))
     );
   });
   ipcRenderer.on("Download.frpVersionDownloadOnCompleted", (event, args) => {
     downloading.value.delete(args);
     const version: Version | undefined = versions.value.find(
-      f => f.id === args
+        f => f.id === args
     );
     if (version) {
       version.download_completed = true;
@@ -75,39 +83,52 @@ onUnmounted(() => {
 </script>
 <template>
   <div class="main">
-    <breadcrumb />
-    <div class="app-container-breadcrumb" v-loading="loading > 0">
-      <div
-        class="w-full bg-white mb-4 rounded p-4 drop-shadow-lg flex justify-between items-center"
-        v-for="version in versions"
-        :key="version.id"
-      >
-        <div class="left">
-          <div class="mb-2">
-            <el-tag>{{ version.name }}</el-tag>
-          </div>
-          <div class="text-sm">
-            发布时间：<span class="text-gray-00">{{
-              moment(version.published_at).format("YYYY-MM-DD HH:mm:ss")
-            }}</span>
-          </div>
-        </div>
-        <div class="right">
-        <span
-          class="primary-text text-sm font-bold"
-          v-if="version.download_completed"
-        >已下载</span
+    <breadcrumb/>
+    <div class="app-container-breadcrumb pr-2" v-loading="loading > 0">
+      <template v-if="versions && versions.length > 0">
+        <div
+            class="w-full bg-white mb-4 rounded p-4 drop-shadow-lg flex justify-between items-center"
+            v-for="version in versions"
+            :key="version.id"
         >
-          <template v-else>
-            <div class="w-32" v-if="downloading.has(version.id)">
-              <el-progress
-                :percentage="downloading.get(version.id)"
-                :text-inside="false"
-              />
+          <div class="left">
+            <div class="mb-2">
+              <el-tag>{{ version.name }}</el-tag>
+              <el-tag class="ml-2">原文件名：{{ version.assets[0]?.name }}</el-tag>
             </div>
-            <el-button v-else @click="handleDownload(version)">下载</el-button>
-          </template>
+            <div class="text-sm">
+              发布时间：<span class="text-gray-00">{{
+                // moment(version.published_at).format("YYYY-MM-DD HH:mm:ss")
+                version.published_at
+              }}</span>
+            </div>
+          </div>
+          <div class="right">
+          <span
+              class="primary-text text-sm font-bold ml-2"
+              v-if="version.download_completed"
+          >已下载</span
+          >
+            <template v-else>
+              <div class="w-32" v-if="downloading.has(version.id)">
+                <el-progress
+                    :percentage="downloading.get(version.id)"
+                    :text-inside="false"
+                />
+              </div>
+              <el-button v-else size="small" type="primary" @click="handleDownload(version)">
+                <Icon class="mr-1" icon="material-symbols:download-2"/>
+                下载
+              </el-button>
+            </template>
+          </div>
         </div>
+      </template>
+      <div
+          v-else
+          class="w-full h-full bg-white rounded p-2 overflow-hidden drop-shadow-xl flex justify-center items-center"
+      >
+        <el-empty description="暂无可用版本"/>
       </div>
     </div>
   </div>