diff --git a/.ls-lint.yml b/.ls-lint.yml
index 4bfae5ba7b10683b5b0be8545324944dddc572c0..4376f5bb39fbfd0150aaf8e95e08617d125b42a0 100644
--- a/.ls-lint.yml
+++ b/.ls-lint.yml
@@ -7,6 +7,7 @@ ls:
     .ts: kebab-case | pointcase
     .tsx: kebab-case | pointcase
     .component.tsx: kebab-case
+    .service.tsx: kebab-case
     .props.ts: kebab-case
     .spec.ts: kebab-case
     .spec.tsx: kebab-case
diff --git a/packages/ui-vue/components/message-box/index.ts b/packages/ui-vue/components/message-box/index.ts
index 96558eda6e17f8b6c1312c36d7c146b1ad37f35b..d3f6f6cdd037de42278ce42e530fcb3c04090505 100644
--- a/packages/ui-vue/components/message-box/index.ts
+++ b/packages/ui-vue/components/message-box/index.ts
@@ -1,12 +1,14 @@
 import type { App } from 'vue';
 import FMessageBox from './src/message-box.component';
+import MessageBoxService from './src/message-box.service';
 
 export * from './src/message-box.props';
 
-export { FMessageBox };
+export { FMessageBox, MessageBoxService };
 
 export default {
     install(app: App): void {
         app.component(FMessageBox.name, FMessageBox);
+        app.provide('MessageBoxService', MessageBoxService);
     }
 };
diff --git a/packages/ui-vue/components/message-box/src/message-box.component.tsx b/packages/ui-vue/components/message-box/src/message-box.component.tsx
index c8676f4cd30e0d6aadcf9c2f6dce809d7b671f62..3d5542b2a0c5b104e3ec3bf9738fae36d7c76f61 100644
--- a/packages/ui-vue/components/message-box/src/message-box.component.tsx
+++ b/packages/ui-vue/components/message-box/src/message-box.component.tsx
@@ -12,7 +12,7 @@ export interface ExceptionInfo {
 export default defineComponent({
     name: 'FMessageBox',
     props: messageBoxProps,
-    emits: [],
+    emits: ['close'],
     setup(props: MessageBoxProps, context: SetupContext) {
         const messageType = ref(props.type);
         const messageIcon = ref('f-icon-info');
@@ -172,11 +172,11 @@ export default defineComponent({
         });
 
         function onClickCancelButton($event: MouseEvent) {
-
+            context.emit('close');
         }
 
         function onClickOkButton($event: MouseEvent) {
-
+            context.emit('close');
         }
 
         const fontSizeName = ref('');
diff --git a/packages/ui-vue/components/message-box/src/message-box.service.tsx b/packages/ui-vue/components/message-box/src/message-box.service.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7215f076dbcbf638f4df5330fc7980108453619c
--- /dev/null
+++ b/packages/ui-vue/components/message-box/src/message-box.service.tsx
@@ -0,0 +1,78 @@
+import { reactive, createApp, onUnmounted } from 'vue';
+import type { App } from 'vue';
+import { MessageBoxProps } from './message-box.props';
+import FMessageBox from './message-box.component';
+import { FModal } from '../../modal';
+
+function initInstance(props: MessageBoxProps, content?: string): App {
+    const container = document.createElement('div');
+    container.style.display = 'contents';
+    const app: App = createApp({
+        setup() {
+            onUnmounted(() => {
+                document.body.removeChild(container);
+            });
+            const showModal = true;
+            return () =>
+                <FModal class="modal-message modal-message-type-info" v-model={showModal} show-header={false} show-buttons={false}>
+                    <FMessageBox {...props} onClose={app.unmount}></FMessageBox>
+                </FModal>;
+        }
+    });
+    document.body.appendChild(container);
+    app.mount(container);
+    return app;
+}
+
+export default class MessageBoxService {
+    static show(options: MessageBoxProps): void {
+        const props: MessageBoxProps = reactive({
+            ...options
+        });
+        initInstance(props);
+    }
+
+    static info(message: string, detail: string) {
+        const props: MessageBoxProps = reactive({
+            type: 'info',
+            title: message,
+            detail,
+            okButtonText: '确定',
+            cancelButtonText: ''
+        });
+        this.show(props);
+    }
+
+    static warning(message: string, detail: string) {
+        const props: MessageBoxProps = reactive({
+            type: 'warning',
+            title: message,
+            detail,
+            okButtonText: '确定',
+            cancelButtonText: ''
+        });
+        this.show(props);
+    }
+
+    static success(message: string, detail: string) {
+        const props: MessageBoxProps = reactive({
+            type: 'success',
+            title: message,
+            detail,
+            okButtonText: '确定',
+            cancelButtonText: ''
+        });
+        this.show(props);
+    }
+
+    static error(message: string, detail: string) {
+        const props: MessageBoxProps = reactive({
+            type: 'error',
+            title: message,
+            detail,
+            okButtonText: '确定',
+            cancelButtonText: ''
+        });
+        this.show(props);
+    }
+}
diff --git a/packages/ui-vue/demos/message-box/basic.vue b/packages/ui-vue/demos/message-box/basic.vue
index 6051ca6de05f02f0a033227dfba69175912c5941..e4d0b716bdf3bff61c5154ef277e738de7d5b3f7 100644
--- a/packages/ui-vue/demos/message-box/basic.vue
+++ b/packages/ui-vue/demos/message-box/basic.vue
@@ -4,7 +4,7 @@ import { ref } from 'vue';
 const visiable = ref(true);
 </script>
 <template>
-    <f-modal class="modal-message modal-message-type-info" v-model="visiable" :show-header="false" :show-buttons="false">
+    <f-modal class="modal-message modal-message-type-info" :v-model="true" :show-header="false" :show-buttons="false">
         <f-message-box title="This is a message box." detail="You can use it to show information."> </f-message-box>
     </f-modal>
 </template>
diff --git a/packages/ui-vue/demos/message-box/types.vue b/packages/ui-vue/demos/message-box/types.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e86a83d11575840dba9badc6f7c898b8b570e52a
--- /dev/null
+++ b/packages/ui-vue/demos/message-box/types.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { inject } from 'vue';
+
+const MessageBoxService = inject('MessageBoxService');
+function showInfo() {
+    MessageBoxService.info('This is a message box.', 'You can use it to show information.');
+}
+
+function showWarningInfo() {
+    MessageBoxService.warning('This is a warning box.', 'You can use it to show warning information.');
+}
+
+function showSuccessInfo() {
+    MessageBoxService.success('This is a success box.', 'You can use it to show success information.');
+}
+
+function showError() {
+    MessageBoxService.error('This is a error box.', 'You can use it to show error information.');
+}
+</script>
+<template>
+    <f-button style="margin: 5px" :type="'secondary'" @click="showInfo"> 提示信息 </f-button>
+    <f-button style="margin: 5px" :type="'warning'" @click="showWarningInfo"> 警告信息 </f-button>
+    <f-button style="margin: 5px" :type="'success'" @click="showSuccessInfo"> 成功信息 </f-button>
+    <f-button style="margin: 5px" :type="'danger'" @click="showError"> 错误信息 </f-button>
+</template>
diff --git a/packages/ui-vue/src/app.vue b/packages/ui-vue/src/app.vue
index dd0fa1e2405d4ccccd51c72f07f2909f3c2edd66..27edafce6f6debea13705eb03d2669a01c3f91ef 100644
--- a/packages/ui-vue/src/app.vue
+++ b/packages/ui-vue/src/app.vue
@@ -11,6 +11,7 @@ import ButtonGroup from './components/button-group.vue';
 import Checkbox from './components/checkbox.vue';
 import ComboList from './components/combo-list.vue';
 import MessageBoxBasic from '../demos/message-box/basic.vue';
+import MessageBoxTypes from '../demos/message-box/types.vue';
 import Modal from './components/modal.vue';
 import Notify from './components/notify.vue';
 import Popover from './components/popover.vue';
@@ -30,6 +31,7 @@ const routes: Record<string, any> = {
     '/checkbox': Checkbox,
     '/combo-list': ComboList,
     '/message-box/basic': MessageBoxBasic,
+    '/message-box/types': MessageBoxTypes,
     '/modal': Modal,
     '/notify': Notify,
     '/popover': Popover,