diff --git a/src/components/common/Message/index.vue b/src/components/common/Message/index.vue
index e7807a0..3898e50 100644
--- a/src/components/common/Message/index.vue
+++ b/src/components/common/Message/index.vue
@@ -2,14 +2,22 @@
     <transition name="message-fade">
         <div v-show="visible" :class="['message-box', `message-box--${type}`]">
             <slot>
-                <p v-if="!isHTML" class="message-content">{{ message }}</p>
-                <p v-else v-html="message" class="message-content"></p>
+                <p v-if="!isHTML" class="message-content">
+                    {{ $props.content }}
+                </p>
+                <p v-else v-html="$props.content" class="message-content"></p>
             </slot>
         </div>
     </transition>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, onBeforeUnmount, defineProps } from "vue";
+import {
+    ref,
+    onMounted,
+    onBeforeUnmount,
+    defineProps,
+    getCurrentInstance,
+} from "vue";
 // 是否可见
 const visible = ref(false);
 
@@ -21,6 +29,7 @@ const props = defineProps({
         validator: (v: string) => {
             return ["info", "warn", "error", "success"].includes(v);
         },
+        default: "info",
     },
     /**
      * 弹窗文本内容
@@ -61,7 +70,7 @@ const onOpen = () => {
 
 onMounted(() => {
     onOpen();
-    console.log("message box onMounted");
+    console.log("message box onMounted", getCurrentInstance());
 });
 onBeforeUnmount(() => {
     if (typeof props.onClose === "function") {
diff --git a/src/components/common/Message/instance.ts b/src/components/common/Message/instance.ts
index 930a07c..82d3137 100644
--- a/src/components/common/Message/instance.ts
+++ b/src/components/common/Message/instance.ts
@@ -1,6 +1,12 @@
+import { createApp, getCurrentInstance } from "vue";
+import Ins from "./index.vue";
 import type { MessageInstance, Options } from "./type";
-const Message: MessageInstance = (opt: Options) => {
-    console.log(opt);
+const Message: MessageInstance = (opt?: Options) => {
+    const cfg = opt || {};
+    const app = createApp(Ins, { ...cfg });
+    const dom = document.createElement("div");
+    dom.className = "happy__message";
+    const t = app.mount(dom);
 };
 
 Message.closeAll = () => {};
@@ -12,3 +18,5 @@ Message.warn = () => {};
 Message.info = () => {};
 
 Message.error = () => {};
+
+export default Message;
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 55aa911..9ade147 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup="">
 import { defineProps, onMounted, reactive } from "vue";
 import { useHead } from "@vueuse/head";
-
+import M from "~/components/common/Message/instance";
 import { GetArticles } from "~/api/article";
 import ContentLayout from "~/components/layouts/Content/index.vue";
 import DefaultLayout from "~/components/layouts/Default/index.vue";
@@ -39,6 +39,7 @@ const getList = (req: API.ARTICLE.GetArticleListRequest) => {
 };
 
 onMounted(async () => {
+    M();
     await getList(props.query ?? {});
 });
 </script>