From e730875db30d4ac3adc6c968d439473e97995c42 Mon Sep 17 00:00:00 2001
From: kuaifan <aipaw@live.cn>
Date: Thu, 13 Jan 2022 23:55:07 +0800
Subject: [PATCH] =?UTF-8?q?perf:=20=E5=AE=A2=E6=88=B7=E7=AB=AF=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E6=8F=90=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 resources/assets/js/components/AppDown.vue | 113 +++++++++++----------
 1 file changed, 58 insertions(+), 55 deletions(-)

diff --git a/resources/assets/js/components/AppDown.vue b/resources/assets/js/components/AppDown.vue
index b4b6a23e..79bd7ff0 100644
--- a/resources/assets/js/components/AppDown.vue
+++ b/resources/assets/js/components/AppDown.vue
@@ -1,5 +1,5 @@
 <template>
-    <div v-if="showButton" class="common-app-down" :class="{'on-client': $Electron}" :data-route="$route.name">
+    <div v-if="showButton" class="common-app-down" :class="{'on-client': !!$Electron}" :data-route="$route.name">
         <div v-if="$Electron" class="common-app-down-link" @click="releasesNotification">
             <Icon type="md-download"/> {{$L(repoTitle)}}
         </div>
@@ -15,18 +15,22 @@ import MarkdownPreview from "./MDEditor/components/preview";
 import axios from "axios";
 Vue.component('MarkdownPreview', MarkdownPreview)
 
-import { Notification } from 'element-ui';
+import {Store} from "le5le-store";
 
 export default {
     name: 'AppDown',
     data() {
         return {
+            loadIng: 0,
+
             repoName: 'kuaifan/dootask',
             repoData: {},
 
             status: 0, // 0 没有，1有客户端，2客户端有新版本
             releases: {},
-            downInfo: {}
+            downInfo: {},
+
+            websocketOpenSubscribe: null
         }
     },
     mounted() {
@@ -40,6 +44,14 @@ export default {
                 }
             })
         }
+        //
+        this.websocketOpenSubscribe = Store.subscribe('websocketOpen', this.getReleases);
+    },
+    destroyed() {
+        if (this.websocketOpenSubscribe) {
+            this.websocketOpenSubscribe.unsubscribe();
+            this.websocketOpenSubscribe = null;
+        }
     },
     computed: {
         repoTitle() {
@@ -98,6 +110,9 @@ export default {
             if (this.status > 0) {
                 return;
             }
+            if (this.loadIng > 0) {
+                return;
+            }
             //
             let cache = $A.getStorageJson("cacheAppdown");
             let timeout = 1800;
@@ -107,21 +122,21 @@ export default {
                 return;
             }
             //
-            ;(() => {
-                axios
-                    .get("https://api.github.com/repos/" + this.repoName + "/releases/latest")
-                    .then(({status, data}) => {
-                        if (status === 200) {
-                            $A.setStorage("cacheAppdown", {
-                                time: Math.round(new Date().getTime() / 1000),
-                                data: data
-                            });
-                            this.releases = data;
-                            this.chackReleases();
-                            setTimeout(this.getReleases, timeout)
-                        }
+            this.loadIng++;
+            axios.get("https://api.github.com/repos/" + this.repoName + "/releases/latest").then(({status, data}) => {
+                this.loadIng--;
+                if (status === 200) {
+                    $A.setStorage("cacheAppdown", {
+                        time: Math.round(new Date().getTime() / 1000),
+                        data: data
                     });
-            })();
+                    this.releases = data;
+                    this.chackReleases();
+                    setTimeout(this.getReleases, timeout)
+                }
+            }).catch(() => {
+                this.loadIng--;
+            });
         },
 
         chackReleases() {
@@ -171,50 +186,38 @@ export default {
             if (this.downInfo.state != "completed") {
                 return;
             }
-            const h = this.$createElement;
-            window.__appNotification && window.__appNotification.close();
-            window.__appNotification = Notification({
-                title: this.$L("更新提示"),
-                duration: 0,
-                position: "bottom-right",
-                customClass: "common-app-down-notification",
-                onClose: () => {
+            $A.modalConfirm({
+                okText: this.$L('立即更新'),
+                onOk: () => {
+                    this.installApplication();
+                },
+                onCancel: () => {
                     this.status = 2;
                 },
-                message: h('span', [
-                    h('span', [
-                        h('span', this.$L('发现新版本') + ": "),
-                        h('Tag', {
-                            props: {
-                                color: 'volcano'
-                            }
-                        }, this.releases.tag_name)
-                    ]),
-                    h('MarkdownPreview', {
-                        class: 'common-app-down-body',
-                        props: {
-                            initialValue: this.releases.body
-                        }
-                    }),
-                    h('div', {
-                        class: 'common-app-down-link',
-                        on: {
-                            click: () => {
-                                this.installApplication();
-                            }
-                        },
+                render: (h) => {
+                    return h('div', {
+                        class: 'common-app-down-notification'
                     }, [
-                        h('Icon', {
+                        h('div', {
+                            class: "notification-head"
+                        }, [
+                            h('div', {
+                                class: "notification-title"
+                            }, this.$L('发现新版本')),
+                            h('Tag', {
+                                props: {
+                                    color: 'volcano'
+                                }
+                            }, this.releases.tag_name)
+                        ]),
+                        h('MarkdownPreview', {
+                            class: 'notification-body overlay-y',
                             props: {
-                                type: 'md-checkmark-circle-outline'
-                            },
-                            style: {
-                                marginRight: '5px'
+                                initialValue: this.releases.body
                             }
                         }),
-                        h('span', this.$L('立即更新'))
-                    ]),
-                ])
+                    ])
+                }
             });
         },