BI-137665 feat: 修改弹窗样式

packages/fineui/src/base/foundation/message.js

@@ -17,9 +17,13 @@ import {
     i18nText,
     KeyCode,
     isPlainObject,
-    SIZE_CONSANTS
+    SIZE_CONSANTS,
+    CenterAdaptLayout,
+    VerticalLayout,
+    HTapeLayout,
+    RightVerticalAdaptLayout
 } from "../../core";
-import { Toast } from "../single";
+import { Button, IconLabel, Label, Toast } from "../single";
 
 let $mask, $pop;
 
@@ -27,15 +31,33 @@ const messageShows = [];
 
 const toastStack = [];
 
-const defaultConfig = {
-    buttonHeight: 24,
-};
+const AlertLevel = {
+    WARNING: 'warning',
+    INFO: 'info',
+    ERROR: 'error',
+    SUCCESS: 'success',
+}
+
+function getIconCls(level) {
+    switch (level) {
+        case AlertLevel.ERROR:
+            return 'alert-error-font';
+        case AlertLevel.SUCCESS:
+            return 'alert-success-font';
+        case AlertLevel.INFO:
+            return 'alert-info-font';
+        case AlertLevel.WARNING:
+        default:
+            return 'alert-warning-font';
+    }
+}
+
 
 export const Msg = {
-    alert(title, message, callback, config = defaultConfig) {
+    alert(title, message, callback, config) {
         _show(false, title, message, callback, config);
     },
-    confirm(title, message, callback, config = defaultConfig) {
+    confirm(title, message, callback, config) {
         _show(true, title, message, callback, config);
     },
     toast(message, options, context) {
@@ -99,7 +121,14 @@ export const Msg = {
     },
 };
 
-function _show(hasCancel, title, message, callback, config) {
+function _show(hasCancel, title, message, callback, config = {}) {
+    config = {
+        buttonHeight: 24,
+        cancelText: i18nText("BI-Basic_Cancel"),
+        sureText: i18nText("BI-Basic_OK"),
+        level: AlertLevel.WARNING,
+        ...config,
+    }
     isNull($mask) &&
     ($mask = Widget._renderEngine
         .createElement("<div class=\"bi-z-index-mask\">")
@@ -138,9 +167,9 @@ function _show(hasCancel, title, message, callback, config) {
     if (hasCancel === true) {
         controlItems.push({
             el: {
-                type: "bi.button",
+                type: Button.xtype,
                 height: config.buttonHeight,
-                text: i18nText("BI-Basic_Cancel"),
+                text: config.cancelText,
                 light: true,
                 handler() {
                     close();
@@ -153,9 +182,9 @@ function _show(hasCancel, title, message, callback, config) {
     }
     controlItems.push({
         el: {
-            type: "bi.button",
+            type: Button.xtype,
             height: config.buttonHeight,
-            text: i18nText("BI-Basic_OK"),
+            text: config.sureText,
             handler() {
                 close();
                 if (isFunction(callback)) {
@@ -166,10 +195,11 @@ function _show(hasCancel, title, message, callback, config) {
     });
     const conf = {
         element: $pop,
-        type: "bi.center_adapt",
+        type: CenterAdaptLayout.xtype,
         items: [
             {
-                type: "bi.border",
+                type: VerticalLayout.xtype,
+                width: 450,
                 attributes: {
                     tabIndex: 1,
                 },
@@ -195,74 +225,58 @@ function _show(hasCancel, title, message, callback, config) {
                     }
                 },
                 cls: "bi-card",
-                items: {
-                    north: {
-                        el: {
-                            type: "bi.border",
-                            cls: "bi-message-title bi-background",
-                            items: {
-                                center: {
-                                    el: {
-                                        type: "bi.label",
-                                        cls: "bi-font-bold",
-                                        text: title || i18nText("BI-Basic_Prompt"),
-                                        textAlign: "left",
-                                        hgap: 20,
-                                        height: 40,
-                                    },
-                                },
-                                east: {
+                hgap: 32,
+                items: [
+                    {
                         el: {
-                                        type: "bi.icon_button",
-                                        cls: "bi-message-close close-font",
-                                        // height: 50,
-                                        handler() {
-                                            close();
-                                            if (isFunction(callback)) {
-                                                callback.apply(null, [false]);
-                                            }
-                                        },
-                                    },
-                                    width: 56,
+                            type: HTapeLayout.xtype,
+                            height: 24,
+                            items: [
+                                {
+                                    type: IconLabel.xtype,
+                                    cls: `${getIconCls(config.level)} icon-size-20`,
+                                    width: 24,
+                                    height: 24,
                                 },
+                                {
+                                    type: Label.xtype,
+                                    css: { "font-size": 16 },
+                                    cls: 'bi-font-bold', // 16px
+                                    textAlign: 'left',
+                                    width: 'fill',
+                                    text: title || i18nText('BI-Basic_Prompt'),
+                                    lgap: 16,
                                 },
+                            ],
                         },
-                        height: 40,
+                        tgap: 32,
                     },
-                    center: {
+                    {
                         el: isPlainObject(message)
                             ? message
                             : {
-                                type: "bi.label",
-                                vgap: 10,
-                                hgap: 20,
-                                whiteSpace: "normal",
+                                type: Label.xtype,
+                                css: { "font-size": 14 },
+                                cls: 'alert-content',
+                                textAlign: 'left',
                                 text: message,
+                                whiteSpace: 'normal',
                             },
+                        height: 'fill',
+                        tgap: 12,
+                        lgap: 40,
                     },
-                    south: {
-                        el: {
-                            type: "bi.absolute",
-                            items: [
                     {
-                                    el: {
-                                        type: "bi.right_vertical_adapt",
-                                        lgap: 10,
+                        el: config.footer && isFunction(config.footer) ? config.footer(close) : {
+                            type: RightVerticalAdaptLayout.xtype,
+                            lgap: 12,
                             items: controlItems,
                         },
-                                    top: 0,
-                                    left: 20,
-                                    right: 20,
-                                    bottom: 0,
-                                }
-                            ],
-                        },
-                        height: 44,
+                        tgap: 32,
+                        bgap: 24,
                     },
+                ],
             },
-                width: 450,
-                height: 200,
-            }
         ],
     };
 

packages/fineui/src/less/lib/colors.less

@@ -132,3 +132,5 @@
 @color-bi-border-warning: @border-color-warning;
 //边框提亮
 @color-bi-border-highlight: @border-color-highlight;
+
+@color-bi-alert-warning: @color-bi-orange;

packages/fineui/src/less/lib/constant.less

@@ -248,3 +248,5 @@
 
 //box-shadow效果
 @box-shadow-toast: 0 6px 20px -2px rgba(9, 30, 64, 0.16);
+
+@color-bi-orange: #f0ac3c;

packages/fineui/src/less/lib/font.less

@@ -58,3 +58,8 @@
 @font-key: "e1d0";
 
 @font-add: "e1c7";
+
+@font-alert-warning: 'e755';
+@font-alert-success: 'e6de';
+@font-alert-info: 'e74b';
+@font-alert-error: 'e757';

packages/fineui/src/less/resource/font.less

@@ -118,3 +118,8 @@
 .font(text-align-left-font, @font-align-left);
 .font(text-align-center-font, @font-align-center);
 .font(text-align-right-font, @font-align-right);
+
+.font(alert-success-font, @font-alert-success, @color-sea-green-100);
+.font(alert-warning-font, @font-alert-warning, @color-bi-alert-warning);
+.font(alert-error-font, @font-alert-error, @color-red-100);
+.font(alert-info-font, @font-alert-info, @color-bi-text-highlight);

packages/fineui/typescript/base/foundation/message.ts

@@ -8,11 +8,23 @@ type toastOptions = {
 export declare namespace Msg {
     function alert(title: string, message?: string | {
         [key: string]: any
-    }, callback?: (result?: boolean) => void): void
+    }, callback?: (result?: boolean) => void, config?: {
+        buttonHeight?: number,
+        sureText?: string,
+        cancelText?: string,
+        level?: 'success' | 'warning' | 'error' | 'info',
+        footer?: (onClose: Function) => Obj;
+    }): void
 
     function confirm(title: string, message?: string | {
         [key: string]: any
-    }, callback?: (result: boolean) => void): void
+    }, callback?: (result: boolean) => void, config?: {
+        buttonHeight?: number,
+        sureText?: string,
+        cancelText?: string,
+        level?: 'success' | 'warning' | 'error' | 'info',
+        footer?: (onClose: Function) => Obj;
+    }): void
 
     function toast(message: string | Obj, options?: toastOptions | string, context?: HTMLElement): Function
 }