diff --git a/packages/ui-vue/components/message-box/index.ts b/packages/ui-vue/components/message-box/index.ts
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..96558eda6e17f8b6c1312c36d7c146b1ad37f35b 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 3ab0fe7a6548dd4d47599716bce7e2d0a81b9a1e..c8676f4cd30e0d6aadcf9c2f6dce809d7b671f62 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(props.type);
+        const messageIcon = ref('f-icon-info');
+        const messageTitle = ref(props.title);
+        const messageDetail = ref(props.detail);
         const exception = ref<ExceptionInfo>({} as ExceptionInfo);
         const happend = ref('');
         const promptInputType = ref('');
@@ -25,12 +25,12 @@ 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[]>([]);
-        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);
@@ -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;
         });
@@ -65,7 +65,7 @@ export default defineComponent({
         });
 
         const shouldShowMessageDetail = computed(() => {
-            return messageDetail.value && !exception.value;
+            return messageDetail.value && !exception.value.message;
         });
 
         const isExceptionMessage = computed(() => {
@@ -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(() => {
@@ -198,14 +198,197 @@ 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={messageBoxIconClass.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}>
                             <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>
@@ -307,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>}
@@ -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/components/message-box/src/message-box.props.ts b/packages/ui-vue/components/message-box/src/message-box.props.ts
index 9e79a38ec7a725ecfb003742352f179009c2f4af..fb762e9152a25d0320e30cabbe6360bf816420c6 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,10 @@
 import { ExtractPropTypes } from 'vue';
 
-export const messageBoxProps = {};
+export const messageBoxProps = {
+    type: { Type: String, default: 'info' },
+    title: { Type: String, default: '' },
+    detail: { Type: String, default: '' },
+    okButtonText: { Type: String, default: '确定' },
+    cancelButtonText: { Type: String, default: '取消' }
+};
 export type MessageBoxProps = ExtractPropTypes<typeof messageBoxProps>;
diff --git a/packages/ui-vue/components/modal/src/modal.component.tsx b/packages/ui-vue/components/modal/src/modal.component.tsx
index e2a84dce94919909056a6ce1fc2d574207c2498c..a2e965d3365039f2398b6a8b910966664cb98574 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;
@@ -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/components/modal/src/modal.props.ts b/packages/ui-vue/components/modal/src/modal.props.ts
index 23aab25d039e37963fa994b10e6f05925fcf4339..232a3dc246cbcd558b5b8812154140f30c8f3392 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
new file mode 100644
index 0000000000000000000000000000000000000000..6051ca6de05f02f0a033227dfba69175912c5941
--- /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 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>
diff --git a/packages/ui-vue/src/app.vue b/packages/ui-vue/src/app.vue
index 001e9398d13a1061d6feb7c53dc0b53b8eb24bb8..dd0fa1e2405d4ccccd51c72f07f2909f3c2edd66 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 7cba09d0e7ba0826ef03198a876196c61f371cff..bc1048c8fb82787e65a604d64deca8a4b39fd824 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)