feat: add ANNOUNCEMENT (#357)

frontend/src/App.vue

@@ -54,7 +54,7 @@ onMounted(async () => {
   <n-config-provider :locale="localeConfig" :theme="theme">
     <n-global-style />
     <n-spin description="loading..." :show="loading">
-      <n-message-provider>
+      <n-message-provider container-style="margin-top: 20px;">
         <n-grid x-gap="12" :cols="12">
           <n-gi v-if="showSideMargin" span="1"></n-gi>
           <n-gi :span="!showSideMargin ? 12 : 10">

frontend/src/api/index.js

@@ -4,7 +4,7 @@ import axios from 'axios'
 const API_BASE = import.meta.env.VITE_API_BASE || "";
 const {
     loading, auth, jwt, settings, openSettings,
-    userOpenSettings, userSettings,
+    userOpenSettings, userSettings, announcement,
     showAuth, adminAuth, showAdminAuth, userJwt
 } = useGlobalState();
 
@@ -56,6 +56,7 @@ const getOpenSettings = async (message) => {
         const res = await api.fetch("/open_api/settings");
         const domainLabels = res["domainLabels"] || [];
         Object.assign(openSettings.value, {
+            ...res,
             title: res["title"] || "",
             prefix: res["prefix"] || "",
             minAddressLen: res["minAddressLen"] || 1,
@@ -81,6 +82,14 @@ const getOpenSettings = async (message) => {
         if (openSettings.value.needAuth) {
             showAuth.value = true;
         }
+        if (openSettings.value.announcement && openSettings.value.announcement != announcement.value) {
+            announcement.value = openSettings.value.announcement;
+            message.info(announcement.value, {
+                showIcon: false,
+                duration: 0,
+                closable: true
+            });
+        }
     } catch (error) {
         message.error(error.message || "error");
     }

frontend/src/store/index.js

@@ -1,13 +1,15 @@
 import { ref } from "vue";
-import { createGlobalState, useStorage, useDark, useToggle } from '@vueuse/core'
+import { createGlobalState, useStorage, useDark, useToggle, useLocalStorage } from '@vueuse/core'
 
 export const useGlobalState = createGlobalState(
     () => {
         const isDark = useDark()
         const toggleDark = useToggle(isDark)
         const loading = ref(false);
+        const announcement = useLocalStorage('announcement', '');
         const openSettings = ref({
             title: '',
+            announcement: '',
             prefix: '',
             needAuth: false,
             adminContact: '',
@@ -83,6 +85,7 @@ export const useGlobalState = createGlobalState(
             loading,
             settings,
             sendMailModel,
+            announcement,
             openSettings,
             showAuth,
             showAddressCredential,