From 339b59d842f85ad32b370d393895b810ab2b5e4d Mon Sep 17 00:00:00 2001
From: Sagi <chenshj@inspur.com>
Date: Sun, 6 Nov 2022 17:03:17 +0800
Subject: [PATCH 1/8] feature(message-box): add message box basic demo

---
 .../ui-vue/components/message-box/index.ts    |  12 +
 .../message-box/src/message-box.component.tsx | 214 ++++++++++++++++--
 packages/ui-vue/demos/message-box/basic.vue   |  10 +
 packages/ui-vue/src/app.vue                   |   2 +
 packages/ui-vue/src/main.ts                   |   2 +
 5 files changed, 217 insertions(+), 23 deletions(-)
 create mode 100644 packages/ui-vue/demos/message-box/basic.vue

diff --git a/packages/ui-vue/components/message-box/index.ts b/packages/ui-vue/components/message-box/index.ts
index e69de29bb2d..96558eda6e1 100644
--- a/packages/ui-vue/components/message-box/index.ts
+++ b/packages/ui-vue/components/message-box/index.ts
@@ -0,0 +1,12 @@
+import type { App } from 'vue';
+import FMessageBox from './src/message-box.component';
+
+export * from './src/message-box.props';
+
+export { FMessageBox };
+
+export default {
+    install(app: App): void {
+        app.component(FMessageBox.name, FMessageBox);
+    }
+};
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 3ab0fe7a654..0f7bb5990a8 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
@@ -14,10 +14,10 @@ export default defineComponent({
     props: messageBoxProps,
     emits: [],
     setup(props: MessageBoxProps, context: SetupContext) {
-        const messageType = ref('');
-        const messageIcon = ref('');
-        const messageTitle = ref('');
-        const messageDetail = ref('');
+        const messageType = ref('info');
+        const messageIcon = ref('f-icon-info');
+        const messageTitle = ref('This title');
+        const messageDetail = ref('Message Detail');
         const exception = ref<ExceptionInfo>({} as ExceptionInfo);
         const happend = ref('');
         const promptInputType = ref('');
@@ -198,9 +198,192 @@ export default defineComponent({
 
         }
 
-        return () => {
+        function renderPropmt() {
+            return (
+                <>
+                    {
+                        promptInputType.value === 'textarea' &&
+                        <div class="flex-fill fixdiv mb-1 mr-3">
+                            <textarea title="promptMessage" name="promptMessage" class="form-control"
+                                style={promptTextAreaStyle.value} rows="4" maxlength={promptMaxLength.value}
+                                onInput={onTextChange}>{messageText}</textarea>
+                        </div >
+                    }
+                    {
+                        promptInputType.value !== 'textarea' &&
+                        <div class="flex-fill fixdiv my-4 mr-4">
+                            <input type="text" class="form-control" maxlength={promptMaxLength.value} onInput={onTextChange}
+                                value={messageText.value} placeholder={promptInputPlaceholder.value} />
+                        </div >
+                    }
+                </>
+            );
+        }
+
+        function renderCommonMessageDetail() {
+            return (<p class="toast-msg-detail" v-html={safeMessageDetail.value}></p>);
+        }
+
+        function renderErrorMessageDetail() {
+            return (
+                <div class="toast-msg-detail">
+                    {shouldShowExceptionDate.value && <div>{exceptionDateMessage.value}</div>}
+                    {shouldShowExceptionMessage.value &&
+                        <div id="exception_error_msg" ref="exceptionMessageRef" style={exceptionMessageStyle.value}>
+                            {exceptionMessageDetail.value}: <span v-html={safeExceptionMessage.value}></span>
+                        </div >
+                    }
+                    {
+                        shouldShowExpandHandle.value &&
+                        <span style={expandHandleStyle.value}>
+                            {
+                                expandExceptionMessage.value &&
+                                <span onClick={onClickExpand} style="cursor: pointer;">
+                                    {expandText.value}
+                                </span >
+                            }
+                            {
+                                !expandExceptionMessage.value &&
+                                <span onClick={onClickCollapse} style="cursor: pointer;">
+                                    {collapseText.value}
+                                </span>
+                            }
+                        </span >
+                    }
+                </div >
+            );
+        }
+
+        function getMessageDetailRender(messageType: string) {
+            if (messageType === 'exception') {
+                return renderErrorMessageDetail;
+            }
+            return renderCommonMessageDetail;
+        }
+
+        const renderMessageDetail = getMessageDetailRender(messageType.value);
+
+        function renderContent() {
+            return (
+                <>
+                    <div class="float-left modal-tips-iconwrap">
+                        <span class={messageIcon.value}></span>
+                    </div>
+                    <div class="modal-tips-content">
+                        <p class="toast-msg-title" v-html={safeMessageTitle.value}></p>
+                        {renderMessageDetail()}
+                    </div >
+                </>
+            );
+        }
+
+        function renderDefaultButtons() {
             return (
                 <>
+                    {
+                        shouldShowCancelButton.value &&
+                        <button type="button" class="btn btn-secondary btn-lg" onClick={onClickCancelButton}>
+                            {cancelButtonText.value}
+                        </button>
+                    }
+                    {
+                        shouldShowOkButton.value &&
+                        <button type="button" class="btn btn-primary btn-lg" onClick={onClickOkButton}>
+                            {okButtonText.value}
+                        </button>
+                    }
+                </>
+            );
+        }
+
+        function renderCustomButtons() {
+            return (
+                <>
+                    {
+                        buttons.value.map((button) => {
+                            return (
+                                <button type="button" onClick={button.handle} class={button.class}>
+                                    {button.iconClass && <span class={button.iconClass}></span>}
+                                    {button.text}
+                                </button >
+                            );
+                        })
+                    }
+                </>
+            );
+        }
+
+        function getButtonRender() {
+            if (shouldShowButtons.value) {
+                return renderCustomButtons;
+            }
+            return renderDefaultButtons;
+        }
+
+        const renderButtons = getButtonRender();
+
+        function renderFooter() {
+            return (
+                <>
+                    <div class="modal-footer">
+                        {
+                            shouldShowFontSize.value &&
+                            <div class="d-flex flex-fill textarea-font-size" style="text-align: left">
+                                <span style="width:75px">{fontSizeName.value}</span>
+                                <select title="selectFontSize" class="form-control" style="max-width:100px"
+                                    v-model={promptFontSize} onChange={onFontSizeChange}>
+                                    <option value="14">{fontSmall}</option>
+                                    <option value="18">{fontMiddle}</option>
+                                    <option value="24">{fontBig}</option>
+                                    <option value="36">{fontLarge}</option>
+                                    <option value="48">{fontHuge}</option>
+                                </select>
+                            </div >
+                        }
+                        {
+                            shouldShowCopyButton.value &&
+                            <span style="width: 100%;color: #2A87FF;padding-left: 37px;">
+                                <span onClick={onClickCopyButton} style="cursor: pointer;">{exception.value.copyButton.text}</span>
+                            </span>
+
+                        }
+                        {renderButtons()}
+                    </div>
+                </>
+            );
+        }
+
+        function render() {
+            return (
+                <>
+                    <section class={messageBoxContainerClass.value}>
+                        {
+                            messageType.value === 'prompt' ? renderPropmt() : renderContent()
+                        }
+                    </section>
+                    {
+                        shouldShowWordCount.value &&
+                        <span class="textarea-wordcount" title={wordsTotalTips.value}
+                            style="position: relative;bottom: 10px;right: 20px;cursor: pointer;text-align: right;">
+                            {wordsTotal.value + ' / ' + promptMaxLength.value}
+                        </span>
+                    }
+                    {renderFooter()}
+                    {
+                        exception.value &&
+                        <div style="position: absolute;left: -21990px;top: -20000px;word-break: break-all;color: #747B8B;font-size: .875rem;">
+                            {messageDetail.value}: {exception.value?.message}
+                        </div >
+                    }
+                    <div style="position: absolute;left: 50%;top: 50%;width: 100px;height: 40px;background: #303C53;line-height: 40px;text-align: center;margin-left: -30px;margin-top: -50px;border-radius: 10px;box-shadow: 0px 2px 8px 0px;opacity: 0;color: #fff;transition: all .3s ease; display: none">
+                    </div>
+                </>
+            );
+        };
+
+        return () => {
+            return (
+                <div class="farris-messager">
                     {
                         messageType.value !== 'prompt' &&
                         <section class={messageBoxContainerClass.value}>
@@ -321,28 +504,13 @@ export default defineComponent({
                     }
                     {
                         exception.value &&
-                        <div style="position: absolute;left: -21990px;top: -20000px;
-                        word-break: break-all;color: #747B8B;font-size: .875rem;">
+                        <div style="position: absolute;left: -21990px;top: -20000px;word-break: break-all;color: #747B8B;font-size: .875rem;">
                             {messageDetail.value}: {exception.value?.message}
                         </div >
                     }
-                    <div style="position: absolute;
-                        left: 50%;
-                        top: 50%;
-                        width: 100px;
-                        height: 40px;
-                        background: #303C53;
-                        line-height: 40px;
-                        text-align: center;
-                        margin-left: -30px;
-                        margin-top: -50px;
-                        border-radius: 10px;
-                        box-shadow: 0px 2px 8px 0px;
-                        opacity: 0;
-                        color: #fff;
-                        transition: all .3s ease; display: none">
+                    <div style="position: absolute;left: 50%;top: 50%;width: 100px;height: 40px;background: #303C53;line-height: 40px;text-align: center;margin-left: -30px;margin-top: -50px;border-radius: 10px;box-shadow: 0px 2px 8px 0px;opacity: 0;color: #fff;transition: all .3s ease; display: none">
                     </div>
-                </>
+                </div>
             );
         };
     }
diff --git a/packages/ui-vue/demos/message-box/basic.vue b/packages/ui-vue/demos/message-box/basic.vue
new file mode 100644
index 00000000000..1c54fa2fddb
--- /dev/null
+++ b/packages/ui-vue/demos/message-box/basic.vue
@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const visiable = ref(true);
+</script>
+<template>
+    <f-modal v-model="visiable">
+        <f-message-box> </f-message-box>
+    </f-modal>
+</template>
diff --git a/packages/ui-vue/src/app.vue b/packages/ui-vue/src/app.vue
index 001e9398d13..dd0fa1e2405 100644
--- a/packages/ui-vue/src/app.vue
+++ b/packages/ui-vue/src/app.vue
@@ -10,6 +10,7 @@ import ButtonEdit from './components/button-edit.vue';
 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 Modal from './components/modal.vue';
 import Notify from './components/notify.vue';
 import Popover from './components/popover.vue';
@@ -28,6 +29,7 @@ const routes: Record<string, any> = {
     '/button-group': ButtonGroup,
     '/checkbox': Checkbox,
     '/combo-list': ComboList,
+    '/message-box/basic': MessageBoxBasic,
     '/modal': Modal,
     '/notify': Notify,
     '/popover': Popover,
diff --git a/packages/ui-vue/src/main.ts b/packages/ui-vue/src/main.ts
index 7cba09d0e7b..bc1048c8fb8 100644
--- a/packages/ui-vue/src/main.ts
+++ b/packages/ui-vue/src/main.ts
@@ -6,6 +6,7 @@ import Avatar from '../components/avatar';
 import Button from '../components/button';
 import ButtonEdit from '../components/button-edit';
 import ComboList from '../components/combo-list';
+import MessageBox from '../components/message-box';
 import Modal from '../components/modal';
 import Notify from '../components/notify';
 import Popover from '../components/popover';
@@ -22,6 +23,7 @@ app.use(Accordion)
     .use(Button)
     .use(ButtonEdit)
     .use(ComboList)
+    .use(MessageBox)
     .use(Modal)
     .use(Notify)
     .use(Popover)
-- 
Gitee


From 4ef6bb973abab9d1bdcd72c947a92ba55f75fc1d Mon Sep 17 00:00:00 2001
From: Sagi <chenshj@inspur.com>
Date: Sun, 6 Nov 2022 17:09:23 +0800
Subject: [PATCH 2/8] feature(message-box): add message box properties

---
 .../components/message-box/src/message-box.component.tsx    | 6 +++---
 .../ui-vue/components/message-box/src/message-box.props.ts  | 6 +++++-
 2 files changed, 8 insertions(+), 4 deletions(-)

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 0f7bb5990a8..139e6ca6af4 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
@@ -14,10 +14,10 @@ export default defineComponent({
     props: messageBoxProps,
     emits: [],
     setup(props: MessageBoxProps, context: SetupContext) {
-        const messageType = ref('info');
+        const messageType = ref(props.type);
         const messageIcon = ref('f-icon-info');
-        const messageTitle = ref('This title');
-        const messageDetail = ref('Message Detail');
+        const messageTitle = ref(props.title);
+        const messageDetail = ref(props.detail);
         const exception = ref<ExceptionInfo>({} as ExceptionInfo);
         const happend = ref('');
         const promptInputType = ref('');
diff --git a/packages/ui-vue/components/message-box/src/message-box.props.ts b/packages/ui-vue/components/message-box/src/message-box.props.ts
index 9e79a38ec7a..8ef07d41478 100644
--- a/packages/ui-vue/components/message-box/src/message-box.props.ts
+++ b/packages/ui-vue/components/message-box/src/message-box.props.ts
@@ -1,4 +1,8 @@
 import { ExtractPropTypes } from 'vue';
 
-export const messageBoxProps = {};
+export const messageBoxProps = {
+    type: { Type: String, default: 'info' },
+    title: { Type: String, default: '' },
+    detail: { Type: String, default: '' }
+};
 export type MessageBoxProps = ExtractPropTypes<typeof messageBoxProps>;
-- 
Gitee


From ddacb89c254abacfc26a4290304e83a81d127ca6 Mon Sep 17 00:00:00 2001
From: Sagi <chenshj@inspur.com>
Date: Sun, 6 Nov 2022 18:11:39 +0800
Subject: [PATCH 3/8] fix(modal): support fit content

---
 .../ui-vue/components/modal/src/modal.component.tsx   | 11 ++++++++++-
 packages/ui-vue/demos/message-box/basic.vue           |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/ui-vue/components/modal/src/modal.component.tsx b/packages/ui-vue/components/modal/src/modal.component.tsx
index e2a84dce949..5348fb6c4f4 100644
--- a/packages/ui-vue/components/modal/src/modal.component.tsx
+++ b/packages/ui-vue/components/modal/src/modal.component.tsx
@@ -52,6 +52,15 @@ export default defineComponent({
             return modelValue.value;
         });
 
+        const modalContainerClass = computed(() => {
+            const classObject = {
+                'modal': true,
+                'farris-modal': true
+            } as Record<string, boolean>;
+            classObject['f-modal-fitContent'] = fitContent.value;
+            return classObject;
+        });
+
         const modalContainerStyle = computed(() => {
             const styleObject = { 'display': showModal.value ? 'block' : 'none' };
             return styleObject;
@@ -121,7 +130,7 @@ export default defineComponent({
         return () => {
             return (
                 <Teleport to="body">
-                    <div class="modal farris-modal" style={modalContainerStyle.value}>
+                    <div class={modalContainerClass.value} style={modalContainerStyle.value}>
                         <div id={modalId.value} class={modalDialogClass.value} style={modalDialogStyle.value}>
                             <div class={modalContentClass.value} >
                                 <div ref="modalHeaderRef" class="modal-header" style={modalHeaderStyle.value}>
diff --git a/packages/ui-vue/demos/message-box/basic.vue b/packages/ui-vue/demos/message-box/basic.vue
index 1c54fa2fddb..3dbfcc79987 100644
--- a/packages/ui-vue/demos/message-box/basic.vue
+++ b/packages/ui-vue/demos/message-box/basic.vue
@@ -5,6 +5,6 @@ const visiable = ref(true);
 </script>
 <template>
     <f-modal v-model="visiable">
-        <f-message-box> </f-message-box>
+        <f-message-box title="This is a message box." detail="You can use it to show information."> </f-message-box>
     </f-modal>
 </template>
-- 
Gitee


From 48b62fe0e2aa60c52020109f1b75655d9bfbe83c Mon Sep 17 00:00:00 2001
From: Sagi <chenshj@inspur.com>
Date: Sun, 6 Nov 2022 18:16:08 +0800
Subject: [PATCH 4/8] fix(message-box): fix message icon size

---
 .../components/message-box/src/message-box.component.tsx      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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 139e6ca6af4..ebb4f1da714 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
@@ -267,7 +267,7 @@ export default defineComponent({
             return (
                 <>
                     <div class="float-left modal-tips-iconwrap">
-                        <span class={messageIcon.value}></span>
+                        <span class={messageBoxIconClass.value}></span>
                     </div>
                     <div class="modal-tips-content">
                         <p class="toast-msg-title" v-html={safeMessageTitle.value}></p>
@@ -388,7 +388,7 @@ export default defineComponent({
                         messageType.value !== 'prompt' &&
                         <section class={messageBoxContainerClass.value}>
                             <div class="float-left modal-tips-iconwrap">
-                                <span class={messageIcon.value}></span>
+                                <span class={messageBoxIconClass.value}></span>
                             </div>
                             <div class="modal-tips-content">
                                 <p class="toast-msg-title" v-html={safeMessageTitle.value}></p>
-- 
Gitee


From ff3b91a735f88102ef10b35f55782da417dada7d Mon Sep 17 00:00:00 2001
From: Sagi <chenshj@inspur.com>
Date: Sun, 6 Nov 2022 18:34:00 +0800
Subject: [PATCH 5/8] fix(modal): support hide header and buttons, support
 custom class

---
 .../components/message-box/src/message-box.component.tsx    | 6 +++---
 packages/ui-vue/components/modal/src/modal.component.tsx    | 6 +++---
 packages/ui-vue/components/modal/src/modal.props.ts         | 5 ++++-
 packages/ui-vue/demos/message-box/basic.vue                 | 2 +-
 4 files changed, 11 insertions(+), 8 deletions(-)

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 ebb4f1da714..8d6f1f99b9c 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
@@ -25,7 +25,7 @@ export default defineComponent({
         const promptMaxLength = ref(140);
         const promptInputPlaceholder = ref('');
         const messageText = ref('');
-        const enableWordCount = ref(true);
+        const enableWordCount = ref(false);
         const wordsTotalTips = ref('');
         const wordsTotal = ref(0);
         const buttons = ref<ModalButton[]>([]);
@@ -187,7 +187,7 @@ export default defineComponent({
         const fontHuge = '';
 
         const shouldShowButtons = computed(() => {
-            return buttons.value && buttons.value.length;
+            return !!(buttons.value && buttons.value.length);
         });
 
         const shouldShowCopyButton = computed(() => {
@@ -490,7 +490,7 @@ export default defineComponent({
                                 </span>
                             }
                             {
-                                buttons.value.map((button) => {
+                                buttons.value.length && buttons.value.map((button) => {
                                     return (
                                         <button type="button" onClick={button.handle} class={button.class}>
                                             {button.iconClass && <span class={button.iconClass}></span>}
diff --git a/packages/ui-vue/components/modal/src/modal.component.tsx b/packages/ui-vue/components/modal/src/modal.component.tsx
index 5348fb6c4f4..a2e965d3365 100644
--- a/packages/ui-vue/components/modal/src/modal.component.tsx
+++ b/packages/ui-vue/components/modal/src/modal.component.tsx
@@ -9,9 +9,9 @@ export default defineComponent({
     setup(props: ModalProps, context: SetupContext) {
         const { width, height, title, modelValue } = toRefs(props);
         const modalId = ref('');
-        const customClass = ref('');
+        const customClass = ref(props.class);
         const fitContent = ref(true);
-        const showHeader = ref(true);
+        const showHeader = ref(props.showHeader);
         const headerIconClass = ref('');
         const enableClose = ref(true);
         const enableMaximize = ref(false);
@@ -19,7 +19,7 @@ export default defineComponent({
         const dialogType = ref('');
         const iframeSrc = ref('');
         const buttonAlignment = ref('');
-        const showButtons = ref(true);
+        const showButtons = ref(props.showButtons);
 
         function close($event: MouseEvent, args: any) {
             modelValue.value = false;
diff --git a/packages/ui-vue/components/modal/src/modal.props.ts b/packages/ui-vue/components/modal/src/modal.props.ts
index 23aab25d039..232a3dc246c 100644
--- a/packages/ui-vue/components/modal/src/modal.props.ts
+++ b/packages/ui-vue/components/modal/src/modal.props.ts
@@ -10,13 +10,16 @@ export interface ModalButton {
 }
 
 export const modalProps = {
+    class: { type: String, default: '' },
     title: { type: String, default: '' },
     width: { type: Number, default: 500 },
     height: { type: Number, default: 320 },
     buttons: {
         type: Array<ModalButton>, default: []
     },
-    modelValue: { type: Boolean, default: false }
+    modelValue: { type: Boolean, default: false },
+    showHeader: { type: Boolean, default: true },
+    showButtons: { type: Boolean, default: true }
 };
 
 export type ModalProps = ExtractPropTypes<typeof modalProps>;
diff --git a/packages/ui-vue/demos/message-box/basic.vue b/packages/ui-vue/demos/message-box/basic.vue
index 3dbfcc79987..6051ca6de05 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 v-model="visiable">
+    <f-modal class="modal-message modal-message-type-info" v-model="visiable" :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>
-- 
Gitee


From 255e2ee2fb47d28cb07f68506ada8e952d29a418 Mon Sep 17 00:00:00 2001
From: Sagi <chenshj@inspur.com>
Date: Sun, 6 Nov 2022 18:38:26 +0800
Subject: [PATCH 6/8] fix(message-box): support show ok and cancel buttons

---
 .../components/message-box/src/message-box.component.tsx      | 4 ++--
 .../ui-vue/components/message-box/src/message-box.props.ts    | 4 +++-
 2 files changed, 5 insertions(+), 3 deletions(-)

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 8d6f1f99b9c..63e5272eac9 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
@@ -29,8 +29,8 @@ export default defineComponent({
         const wordsTotalTips = ref('');
         const wordsTotal = ref(0);
         const buttons = ref<ModalButton[]>([]);
-        const okButtonText = ref('');
-        const cancelButtonText = ref('');
+        const okButtonText = ref(props.okButtonText);
+        const cancelButtonText = ref(props.cancelButtonText);
         const showFontSize = ref(true);
         const showCancelButton = ref(true);
         const showOkButton = ref(true);
diff --git a/packages/ui-vue/components/message-box/src/message-box.props.ts b/packages/ui-vue/components/message-box/src/message-box.props.ts
index 8ef07d41478..fb762e9152a 100644
--- a/packages/ui-vue/components/message-box/src/message-box.props.ts
+++ b/packages/ui-vue/components/message-box/src/message-box.props.ts
@@ -3,6 +3,8 @@ import { ExtractPropTypes } from 'vue';
 export const messageBoxProps = {
     type: { Type: String, default: 'info' },
     title: { Type: String, default: '' },
-    detail: { Type: String, default: '' }
+    detail: { Type: String, default: '' },
+    okButtonText: { Type: String, default: '确定' },
+    cancelButtonText: { Type: String, default: '取消' }
 };
 export type MessageBoxProps = ExtractPropTypes<typeof messageBoxProps>;
-- 
Gitee


From d39afa4bd78f918c63686143459542e6327ca384 Mon Sep 17 00:00:00 2001
From: Sagi <chenshj@inspur.com>
Date: Sun, 6 Nov 2022 18:46:18 +0800
Subject: [PATCH 7/8] fix(message-box): support change message icon by message
 type

---
 .../ui-vue/components/message-box/src/message-box.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 63e5272eac9..ddb9a4e7f6d 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
@@ -51,7 +51,7 @@ export default defineComponent({
 
         const messageBoxIconClass = computed(() => {
             const classObject = { 'f-icon': true } as Record<string, boolean>;
-            const iconClass = messageIcon.value;
+            const iconClass = `f-icon-${messageType.value}`;
             classObject[iconClass] = true;
             return classObject;
         });
-- 
Gitee


From 6941310d7ff575a748993c078ee4fba06c1656c3 Mon Sep 17 00:00:00 2001
From: Sagi <chenshj@inspur.com>
Date: Sun, 6 Nov 2022 22:53:21 +0800
Subject: [PATCH 8/8] fix(message-box): fix don't show message detail

---
 .../ui-vue/components/message-box/src/message-box.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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 ddb9a4e7f6d..c8676f4cd30 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
@@ -65,7 +65,7 @@ export default defineComponent({
         });
 
         const shouldShowMessageDetail = computed(() => {
-            return messageDetail.value && !exception.value;
+            return messageDetail.value && !exception.value.message;
         });
 
         const isExceptionMessage = computed(() => {
-- 
Gitee