From ba16c7e5cb3a001a898f0a837a0a1487fa69c78e Mon Sep 17 00:00:00 2001
From: Michelle Rodriguez <lamprose2@gmail.com>
Date: Fri, 6 Dec 2024 16:35:43 +0800
Subject: [PATCH] feat: check update for ui (#57)

* feat: check update for ui

* chore: use fetch

---------

Co-authored-by: Zephyruso <176294927+Zephyruso@users.noreply.github.com>
---
 src/api/index.ts           |  8 ++++++++
 src/views/SettingsPage.vue | 27 +++++++++++++++++++++------
 2 files changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/api/index.ts b/src/api/index.ts
index 3b4d2b8a..0bd0cd46 100644
--- a/src/api/index.ts
+++ b/src/api/index.ts
@@ -11,6 +11,7 @@ axios.interceptors.request.use((config) => {
     activeBackend.value?.host +
     ':' +
     activeBackend.value?.port
+
   config.headers['Authorization'] = 'Bearer ' + activeBackend.value?.password
   return config
 })
@@ -156,3 +157,10 @@ export const fetchMemoryAPI = <T>() => {
 export const fetchTrafficAPI = <T>() => {
   return createWebSocket<T>('traffic')
 }
+
+export const fetchIsUIUpdateAvailable = async () => {
+  const response = await fetch('https://api.github.com/repos/Zephyruso/zashboard/releases/latest')
+  const { tag_name } = await response.json()
+
+  return tag_name !== `v${zashboardVersion.value}`
+}
diff --git a/src/views/SettingsPage.vue b/src/views/SettingsPage.vue
index 323a4768..13dd5bac 100644
--- a/src/views/SettingsPage.vue
+++ b/src/views/SettingsPage.vue
@@ -2,11 +2,20 @@
   <div class="grid grid-cols-1 gap-2 overflow-y-auto p-2">
     <div class="card card-compact bg-base-100 shadow-lg">
       <div class="card-title px-4 pt-4 text-primary">
-        <a
-          href="https://github.com/Zephyruso/zashboard"
-          target="_blank"
-          >zashboard v{{ zashboardVersion }}</a
-        >
+        <div class="indicator">
+          <span
+            v-if="isUIUpdateAvailable"
+            class="indicator-item flex"
+          >
+            <span class="badge badge-xs absolute animate-ping bg-secondary"></span>
+            <span class="badge badge-xs bg-secondary"></span>
+          </span>
+          <a
+            href="https://github.com/Zephyruso/zashboard"
+            target="_blank"
+            >zashboard v{{ zashboardVersion }}</a
+          >
+        </div>
       </div>
       <div class="card-body gap-4">
         <div class="flex items-center gap-2">
@@ -228,6 +237,7 @@
 
 <script setup lang="ts">
 import {
+  fetchIsUIUpdateAvailable,
   flushFakeIPAPI,
   isSingBox,
   reloadConfigsAPI,
@@ -256,7 +266,7 @@ import {
   useConnectionCard,
 } from '@/store/settings'
 import { twMerge } from 'tailwind-merge'
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 
 const isCoreUpgrading = ref(false)
 const handlerClickUpgradeCore = async () => {
@@ -270,6 +280,7 @@ const handlerClickUpgradeCore = async () => {
   }
 }
 
+const isUIUpdateAvailable = ref(false)
 const isUIUpgrading = ref(false)
 const handlerClickUpgradeUI = async () => {
   if (isUIUpgrading.value) return
@@ -282,6 +293,10 @@ const handlerClickUpgradeUI = async () => {
   }
 }
 
+onMounted(async () => {
+  isUIUpdateAvailable.value = await fetchIsUIUpdateAvailable()
+})
+
 const isConfigReloading = ref(false)
 const handlerClickReloadConfigs = async () => {
   if (isConfigReloading.value) return