feat: check update for ui (#57)

* feat: check update for ui * chore: use fetch --------- Co-authored-by: Zephyruso <176294927+Zephyruso@users.noreply.github.com>
Zephyruso · Dec 6, 2024 · ba16c7e · ba16c7e
1 parent 6f2a6f6
commit ba16c7e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git 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
@@ -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