1

src/App.vue

@@ -2,12 +2,27 @@
 import { ref, watchEffect, provide, onMounted } from 'vue'
 import { RouterView } from 'vue-router'
 import ThemeToggle from './components/ThemeToggle.vue'
+import AlertComponent from './components/AlertComponent.vue'
 import { useRouter } from 'vue-router'
-
+import api from './utils/api'
 const isDarkMode = ref(false)
 const isLoading = ref(false)
 const router = useRouter()
 
+const showAlert = ref(false)
+const alertMessage = ref('')
+const alertType = ref('success')
+const closeAlert = () => {
+  showAlert.value = false
+}
+const showAlertMessage = (
+  message: string,
+  type: 'success' | 'error' | 'warning' | 'info' = 'success'
+) => {
+  alertMessage.value = message
+  alertType.value = type
+  showAlert.value = true
+}
 // 检查系统颜色模式
 const checkSystemColorScheme = () => {
   return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
@@ -35,6 +50,19 @@ onMounted(() => {
   } else {
     setColorMode(checkSystemColorScheme())
   }
+  api.post('/', {}).then((res: any) => {
+    if (res.code === 200) {
+      localStorage.setItem('config', JSON.stringify(res.detail))
+      if (
+        res.detail.notify_title &&
+        res.detail.notify_content &&
+        localStorage.getItem('notify') !== res.detail.notify_title + res.detail.notify_content
+      ) {
+        localStorage.setItem('notify', res.detail.notify_title + res.detail.notify_content)
+        showAlertMessage(res.detail.notify_title + ': ' + res.detail.notify_content, 'success')
+      }
+    }
+  })
 })
 
 watchEffect(() => {
@@ -68,6 +96,12 @@ provide('isLoading', isLoading)
         <component :is="Component" :key="$route.fullPath" />
       </transition>
     </RouterView>
+    <AlertComponent
+      :show="showAlert"
+      :message="alertMessage"
+      :type="alertType"
+      @close="closeAlert"
+    />
   </div>
 </template>
 
@@ -123,7 +157,11 @@ provide('isLoading', isLoading)
 }
 
 @keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
 }
 </style>