update default-mask

src/components/default-mask/index.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { Icon } from '@iconify/vue';
+interface IProps {
+  text: string;
+}
+defineProps<IProps>();
+</script>
+
+<template>
+  <div class="loading-mask">
+    <Icon class="text-[60px] mb-4" icon="svg-spinners:blocks-shuffle-3" />
+    <div class="text-[20px]">{{ text }}</div>
+  </div>
+</template>
+
+<style scoped>
+.loading-mask {
+  @apply absolute flex flex-col justify-center w-full h-full top-0 bottom-0 items-center;
+  background-color: rgba(121, 121, 121, 0.2);
+}
+</style>

src/views/board/components/message-form.vue

@@ -18,7 +18,10 @@ import { User } from '@/types/user';
 const form = ref<MessageType>({} as MessageType);
 const no = ref();
 //onClick open alert
-const { userChoice, alert } = useAlert('发布提示', '确定发布吗？');
+const { userChoice, alert } = useAlert({
+  header: '发布提示',
+  message: '确定发布吗？'
+});
 const onClick = async () => {
   if (form.value) {
     if (!form.value.content) {

src/views/board/index.vue

@@ -1,14 +1,15 @@
 <script lang="ts" setup>
 import { IonButton, IonIcon } from '@ionic/vue';
 import { computed, onBeforeMount, ref } from 'vue';
-import MessageList from '@/views/board/components/message-list.vue';
 import { IHttpOptions, useHttp } from '@/utils/http';
 import { MessageType } from '@/views/board/components/type';
-import MessageForm from '@/views/board/components/message-form.vue';
 import { useModal } from '@/composables/use-modal';
 import { add } from 'ionicons/icons';
 import { format } from 'date-fns';
 import { useUserStore } from '@/stores/user';
+import MessageList from '@/views/board/components/message-list.vue';
+import MessageForm from '@/views/board/components/message-form.vue';
+import DefaultMask from '@/components/default-mask/index.vue';
 
 const rawMsgs = ref<MessageType[]>();
 const msgs = computed(() => {
@@ -59,15 +60,16 @@ onBeforeMount(async () => {
 <template>
   <div v-if="msgs?.length && msgs.length > 0">
     <MessageList :msgs="msgs" />
-    <IonButton
-      v-if="isAdmin"
-      class="message-add-btn"
-      size="small"
-      @click="publish"
-    >
-      <IonIcon :icon="add"></IonIcon>
-    </IonButton>
   </div>
+  <DefaultMask v-else text="还未有任何通知发布..." />
+  <IonButton
+    v-if="isAdmin"
+    class="message-add-btn"
+    size="small"
+    @click="publish"
+  >
+    <IonIcon :icon="add"></IonIcon>
+  </IonButton>
 </template>
 
 <style scoped>