From 7fbd67721bb9aa3fad141ea2fedecc3bd6b5427f Mon Sep 17 00:00:00 2001
From: Sagi <chenshj@inspur.com>
Date: Sat, 5 Nov 2022 10:24:15 +0800
Subject: [PATCH 1/2] feature(message-box): add meesage box

---
 packages/ui-vue/components/message-box/index.ts   |  0
 .../message-box/src/composition/types.ts          |  0
 .../message-box/src/message-box.component.tsx     | 15 +++++++++++++++
 .../message-box/src/message-box.props.ts          |  4 ++++
 4 files changed, 19 insertions(+)
 create mode 100644 packages/ui-vue/components/message-box/index.ts
 create mode 100644 packages/ui-vue/components/message-box/src/composition/types.ts
 create mode 100644 packages/ui-vue/components/message-box/src/message-box.component.tsx
 create mode 100644 packages/ui-vue/components/message-box/src/message-box.props.ts

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 00000000000..e69de29bb2d
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 00000000000..e69de29bb2d
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 00000000000..06318f1c78e
--- /dev/null
+++ b/packages/ui-vue/components/message-box/src/message-box.component.tsx
@@ -0,0 +1,15 @@
+import { defineComponent, SetupContext } from "vue";
+import { MessageBoxProps, messageBoxProps } from "./message-box.props";
+
+export default defineComponent({
+    name: 'FMessageBox',
+    props: messageBoxProps,
+    emits: [],
+    setup(props: MessageBoxProps, context: SetupContext) {
+        return () => {
+            return (
+                <></>
+            );
+        };
+    }
+});
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 00000000000..9e79a38ec7a
--- /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>;
-- 
Gitee


From b50b3b33c955925415be266f205fedb5364fcd31 Mon Sep 17 00:00:00 2001
From: Sagi <chenshj@inspur.com>
Date: Sat, 5 Nov 2022 14:34:50 +0800
Subject: [PATCH 2/2] feature(message-box): implement message box render
 template

---
 .../message-box/src/message-box.component.tsx | 338 +++++++++++++++++-
 1 file changed, 336 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 06318f1c78e..3ab0fe7a654 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
@@ -1,14 +1,348 @@
-import { defineComponent, SetupContext } from "vue";
+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>
+                </>
             );
         };
     }
-- 
Gitee