From eb26fd1518f4ab7b115b427a4c54ba6f8a63e51e Mon Sep 17 00:00:00 2001
From: Sagi <chenshj@inspur.com>
Date: Sun, 6 Nov 2022 23:55:56 +0800
Subject: [PATCH] feature(message-box-service): implement message box service
 and add message box demo

---
 .ls-lint.yml                                  |  1 +
 .../ui-vue/components/message-box/index.ts    |  4 +-
 .../message-box/src/message-box.component.tsx |  6 +-
 .../message-box/src/message-box.service.tsx   | 78 +++++++++++++++++++
 packages/ui-vue/demos/message-box/basic.vue   |  2 +-
 packages/ui-vue/demos/message-box/types.vue   | 26 +++++++
 packages/ui-vue/src/app.vue                   |  2 +
 7 files changed, 114 insertions(+), 5 deletions(-)
 create mode 100644 packages/ui-vue/components/message-box/src/message-box.service.tsx
 create mode 100644 packages/ui-vue/demos/message-box/types.vue

diff --git a/.ls-lint.yml b/.ls-lint.yml
index 4bfae5ba7b1..4376f5bb39f 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 96558eda6e1..d3f6f6cdd03 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 c8676f4cd30..3d5542b2a0c 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 00000000000..7215f076dbc
--- /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 6051ca6de05..e4d0b716bdf 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 00000000000..e86a83d1157
--- /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 dd0fa1e2405..27edafce6f6 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,
-- 
Gitee