diff --git a/packages/ui-vue/components/message-box/index.ts b/packages/ui-vue/components/message-box/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/packages/ui-vue/components/message-box/src/composition/types.ts b/packages/ui-vue/components/message-box/src/composition/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
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
new file mode 100644
index 0000000000000000000000000000000000000000..3ab0fe7a6548dd4d47599716bce7e2d0a81b9a1e
--- /dev/null
+++ b/packages/ui-vue/components/message-box/src/message-box.component.tsx
@@ -0,0 +1,349 @@
+import { computed, defineComponent, ref, SetupContext } from "vue";
+import { MessageBoxProps, messageBoxProps } from "./message-box.props";
+import { type WebkitLineClampProperty, type BoxOrientProperty, type TextAlignProperty } from 'csstype';
+import { ModalButton } from "../../modal";
+
+export interface ExceptionInfo {
+    date: string;
+    message: string;
+    copyButton: ModalButton;
+}
+
+export default defineComponent({
+    name: 'FMessageBox',
+    props: messageBoxProps,
+    emits: [],
+    setup(props: MessageBoxProps, context: SetupContext) {
+        const messageType = ref('');
+        const messageIcon = ref('');
+        const messageTitle = ref('');
+        const messageDetail = ref('');
+        const exception = ref<ExceptionInfo>({} as ExceptionInfo);
+        const happend = ref('');
+        const promptInputType = ref('');
+        const promptFontSize = ref(14);
+        const promptMaxLength = ref(140);
+        const promptInputPlaceholder = ref('');
+        const messageText = ref('');
+        const enableWordCount = ref(true);
+        const wordsTotalTips = ref('');
+        const wordsTotal = ref(0);
+        const buttons = ref<ModalButton[]>([]);
+        const okButtonText = ref('');
+        const cancelButtonText = ref('');
+        const showFontSize = ref(true);
+        const showCancelButton = ref(true);
+        const showOkButton = ref(true);
+
+        const showLines = ref('');
+        const exceptionMessageMaxHeight = ref(0);
+
+        const messageBoxContainerClass = computed(() => {
+            const classObject = {
+                'modal-tips': true,
+                'd-flex': true,
+                'flex-row': true
+            } as Record<string, boolean>;
+            const messageBoxTypeClass = `messager-type-${messageType.value}`;
+            classObject[messageBoxTypeClass] = true;
+            return classObject;
+        });
+
+        const messageBoxIconClass = computed(() => {
+            const classObject = { 'f-icon': true } as Record<string, boolean>;
+            const iconClass = messageIcon.value;
+            classObject[iconClass] = true;
+            return classObject;
+        });
+
+        const safeMessageTitle = computed(() => {
+            return messageTitle.value;
+        });
+
+        const safeMessageDetail = computed(() => {
+            return messageDetail.value;
+        });
+
+        const shouldShowMessageDetail = computed(() => {
+            return messageDetail.value && !exception.value;
+        });
+
+        const isExceptionMessage = computed(() => {
+            return !!exception.value;
+        });
+
+        const shouldShowExceptionDate = computed(() => {
+            return !!exception.value && !!exception.value.date;
+        });
+
+        const exceptionDateMessage = computed(() => {
+            const exceptionDate = exception.value && exception.value.date || '';
+            return `${happend.value} : ${exceptionDate}`;
+        });
+
+        const shouldShowExceptionMessage = computed(() => {
+            return !!exception.value && !!exception.value.message;
+        });
+
+        const exceptionMessageStyle = computed(() => {
+            const maxHeight = `${exceptionMessageMaxHeight.value}px`;
+            const styleObject = {
+                'overflow': 'hidden',
+                'text-overflow': 'ellipsis',
+                'display': '-webkit-box',
+                '-webkit-box-orient': 'vertical' as BoxOrientProperty,
+                '-webkit-line-clamp': showLines.value as WebkitLineClampProperty,
+                'max-height': maxHeight
+            };
+            return styleObject;
+        });
+
+        const exceptionMessageDetail = computed(() => {
+            return '';
+        });
+
+        const safeExceptionMessage = computed(() => {
+            const safeMessage = exception.value && exception.value.message || '';
+            return safeMessage;
+        });
+
+        const shouldShowExpandHandle = computed(() => {
+            return true;
+        });
+
+        const expandHandleStyle = computed(() => {
+            const styleObject = {
+                'display': 'block',
+                'text-align': 'right' as TextAlignProperty,
+                'color': '#2A87FF'
+            };
+            return styleObject;
+        });
+
+        const expandExceptionMessage = ref(false);
+        const expandText = ref('');
+        const collapseText = ref('');
+
+        function toggalExceptionMessage(expand: boolean, $event: Event) {
+
+        }
+
+        function onClickExpand(payload: MouseEvent) {
+            return toggalExceptionMessage(true, payload);
+        }
+
+        function onClickCollapse(payload: MouseEvent) {
+            return toggalExceptionMessage(true, payload);
+        }
+
+        const promptTextAreaStyle = computed(() => {
+            const fontSize = `${promptFontSize.value}px`;
+            const styleObject = {
+                'font-size': fontSize,
+                'height': '100%'
+            };
+            return styleObject;
+        });
+
+        function onTextChange($event: Event) {
+
+        }
+
+        const shouldShowWordCount = computed(() => {
+            return enableWordCount.value && promptMaxLength.value;
+        });
+
+        const shouldShowOkCancelButtons = computed(() => {
+            return !(buttons.value && buttons.value.length) && (okButtonText.value || cancelButtonText.value);
+        });
+
+        const shouldShowFontSize = computed(() => {
+            return messageType.value === 'prompt' && showFontSize.value;
+        });
+
+        function onFontSizeChange($event: Event) { }
+
+        const shouldShowCancelButton = computed(() => {
+            return showCancelButton.value && cancelButtonText.value;
+        });
+
+        const shouldShowOkButton = computed(() => {
+            return showOkButton.value && okButtonText.value;
+        });
+
+        function onClickCancelButton($event: MouseEvent) {
+
+        }
+
+        function onClickOkButton($event: MouseEvent) {
+
+        }
+
+        const fontSizeName = ref('');
+        const fontSmall = '';
+        const fontMiddle = '';
+        const fontBig = '';
+        const fontLarge = '';
+        const fontHuge = '';
+
+        const shouldShowButtons = computed(() => {
+            return buttons.value && buttons.value.length;
+        });
+
+        const shouldShowCopyButton = computed(() => {
+            return exception.value && exception.value.copyButton && exception.value.copyButton.text;
+        });
+
+        function onClickCopyButton($event: MouseEvent) {
+
+        }
+
+        return () => {
+            return (
+                <>
+                    {
+                        messageType.value !== 'prompt' &&
+                        <section class={messageBoxContainerClass.value}>
+                            <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>
+                                {shouldShowMessageDetail.value && <p class="toast-msg-detail" v-html={safeMessageDetail.value}></p>}
+                                {isExceptionMessage.value && (
+                                    <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 >
+                                )}
+                            </div >
+                        </section >
+                    }
+                    {
+                        messageType.value === 'prompt' &&
+                        <section class={messageBoxContainerClass.value}>
+                            {
+                                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 >
+                            }
+                        </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>
+                    }
+                    {
+                        shouldShowOkCancelButtons.value &&
+                        <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 >
+                            }
+                            {
+                                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>
+                            }
+                        </div >
+                    }
+                    {
+                        shouldShowButtons.value && <div class="modal-footer">
+                            {
+                                shouldShowCopyButton.value &&
+                                <span style="width: 100%;color: #2A87FF;padding-left: 37px;">
+                                    <span onClick={onClickCopyButton} style="cursor: pointer;">{exception.value.copyButton.text}</span>
+                                </span>
+                            }
+                            {
+                                buttons.value.map((button) => {
+                                    return (
+                                        <button type="button" onClick={button.handle} class={button.class}>
+                                            {button.iconClass && <span class={button.iconClass}></span>}
+                                            {button.text}
+                                        </button >
+                                    );
+                                })
+                            }
+
+                        </div >
+                    }
+                    {
+                        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>
+                </>
+            );
+        };
+    }
+});
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
new file mode 100644
index 0000000000000000000000000000000000000000..9e79a38ec7a725ecfb003742352f179009c2f4af
--- /dev/null
+++ b/packages/ui-vue/components/message-box/src/message-box.props.ts
@@ -0,0 +1,4 @@
+import { ExtractPropTypes } from 'vue';
+
+export const messageBoxProps = {};
+export type MessageBoxProps = ExtractPropTypes<typeof messageBoxProps>;