diff --git a/src/components/common/Message/index.vue b/src/components/common/Message/index.vue
index 3898e50..9d50d34 100644
--- a/src/components/common/Message/index.vue
+++ b/src/components/common/Message/index.vue
@@ -47,7 +47,7 @@ const props = defineProps({
      */
     duration: {
         type: Number,
-        default: 3, // 秒
+        default: 30, // 秒
         validator: (v: number) => {
             return +v > 0;
         },
@@ -80,4 +80,37 @@ onBeforeUnmount(() => {
 });
 </script>
 
-<style scoped></style>
+<style scoped>
+.message-box {
+    position: fixed;
+    left: 50%;
+    top: 20px;
+    transform: translateX(-50%);
+    transition: opacity 0.3s, transform 0.4s, top 0.4s;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    background: #909399;
+}
+
+p {
+    margin: 0;
+}
+.message-box--info {
+    background: #909399;
+}
+.message-box--warn {
+    background: #f6a23c;
+}
+.message-box--error {
+    background: #f56c6c;
+}
+.message-box--success {
+    background: #67c23a;
+}
+.message-fade-enter-from,
+.message-fade-leave-to {
+    opacity: 0;
+    transform: translate(-50%, -100%);
+}
+</style>
diff --git a/src/components/common/Message/instance.ts b/src/components/common/Message/instance.ts
index 9fae781..b70a954 100644
--- a/src/components/common/Message/instance.ts
+++ b/src/components/common/Message/instance.ts
@@ -3,9 +3,14 @@ import Ins from "./index.vue";
 import type { MessageInstance, Options } from "./type";
 const Message: MessageInstance = (opt?: Options) => {
     const cfg = opt || {};
+    const ContainerClassName = "happy__message";
+    const c = document.querySelector(`.${ContainerClassName}`);
+    if (c) {
+        document.body.removeChild(c);
+    }
     const vm = createVNode(Ins, { ...cfg });
     const container = document.createElement("div");
-    container.className = "happy__message";
+    container.className = ContainerClassName;
     render(vm, container);
     document.body.appendChild(container);
 };
diff --git a/src/components/common/Message/type.ts b/src/components/common/Message/type.ts
index d830cf5..9d681c8 100644
--- a/src/components/common/Message/type.ts
+++ b/src/components/common/Message/type.ts
@@ -13,5 +13,6 @@ export type Options = {
     content: string; // 文字类型
     isHTML?: boolean; // 是否是html
     duration?: number; // 显示时长
-    onClose: () => void; // 关闭时的调用
+    onClose?: () => void; // 关闭时的调用
+    type?: MessageType;
 };
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 9ade147..399d8f3 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -39,7 +39,10 @@ const getList = (req: API.ARTICLE.GetArticleListRequest) => {
 };
 
 onMounted(async () => {
-    M();
+    M({
+        content: "222",
+        type: "error",
+    });
     await getList(props.query ?? {});
 });
 </script>