From c132816a9fa66abc513e28888181cf0b2d6fd3f6 Mon Sep 17 00:00:00 2001
From: xingyy <64720302+Concur-max@users.noreply.github.com>
Date: Fri, 10 Jan 2025 16:45:18 +0800
Subject: [PATCH] 1

---
 app/components/x-message/index.vue     |  1 -
 app/components/x-message/useMessage.js | 44 ++++++++++++++++++++++++++
 app/layouts/default.vue                |  7 +++-
 3 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 app/components/x-message/useMessage.js

diff --git a/app/components/x-message/index.vue b/app/components/x-message/index.vue
index 5ddc84e..6d9194e 100644
--- a/app/components/x-message/index.vue
+++ b/app/components/x-message/index.vue
@@ -16,7 +16,6 @@ const showMessage = ({ type = 'warning', message, duration = 2000 }) => {
     visible.value = false
   }, duration)
 }
-
 defineExpose({ showMessage })
 </script>
 
diff --git a/app/components/x-message/useMessage.js b/app/components/x-message/useMessage.js
new file mode 100644
index 0000000..10eed19
--- /dev/null
+++ b/app/components/x-message/useMessage.js
@@ -0,0 +1,44 @@
+import { createApp, nextTick } from 'vue'
+import MessagePopup from './index.vue'
+
+const message = {
+  success(text, duration = 2000) {
+    if (process.client) {
+      this.show({ type: 'success', message: text, duration })
+    }
+  },
+  error(text, duration = 2000) {
+    if (process.client) {
+      this.show({ type: 'error', message: text, duration })
+    }
+  },
+  warning(text, duration = 2000) {
+    if (process.client) {
+      this.show({ type: 'warning', message: text, duration })
+    }
+  },
+  show({ type = 'success', message, duration = 2000 }) {
+    if (!process.client) return
+    
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    
+    const app = createApp(MessagePopup, {
+      onAfterLeave: () => {
+        app.unmount()
+        document.body.removeChild(container)
+      }
+    })
+    
+    const instance = app.mount(container)
+    nextTick(() => {
+      instance.showMessage?.({
+        type,
+        message,
+        duration
+      })
+    })
+  }
+}
+
+export { message }
\ No newline at end of file
diff --git a/app/layouts/default.vue b/app/layouts/default.vue
index 498cb5b..b7ea566 100644
--- a/app/layouts/default.vue
+++ b/app/layouts/default.vue
@@ -1,8 +1,13 @@
 <template>
   <main class="flex flex-col min-h-svh">
-    <div class="flex-1 pb-[var(--van-nav-bar-height)]">
+    <AppHeader class="h-[var(--van-nav-bar-height)]" />
+
+    <div class="flex-1 p-16 pb-[var(--van-nav-bar-height)]">
       <slot />
     </div>
+
     <AppFooter />
   </main>
 </template>
+<script setup lang="ts">
+</script>
\ No newline at end of file