diff --git a/packages/fineui/src/base/foundation/message.js b/packages/fineui/src/base/foundation/message.js index 90990e37b..3847eba44 100644 --- a/packages/fineui/src/base/foundation/message.js +++ b/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("
") @@ -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: { + hgap: 32, + items: [ + { 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, - }, + type: HTapeLayout.xtype, + height: 24, + items: [ + { + type: IconLabel.xtype, + cls: `${getIconCls(config.level)} icon-size-20`, + width: 24, + height: 24, }, - east: { - 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: 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, - items: controlItems, - }, - top: 0, - left: 20, - right: 20, - bottom: 0, - } - ], + { + el: config.footer && isFunction(config.footer) ? config.footer(close) : { + type: RightVerticalAdaptLayout.xtype, + lgap: 12, + items: controlItems, }, - height: 44, + tgap: 32, + bgap: 24, }, - }, - width: 450, - height: 200, - } + ], + }, ], }; diff --git a/packages/fineui/src/less/lib/colors.less b/packages/fineui/src/less/lib/colors.less index fd429ac08..810745b94 100644 --- a/packages/fineui/src/less/lib/colors.less +++ b/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; diff --git a/packages/fineui/src/less/lib/constant.less b/packages/fineui/src/less/lib/constant.less index fa69a4783..eb03e23e8 100644 --- a/packages/fineui/src/less/lib/constant.less +++ b/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; diff --git a/packages/fineui/src/less/lib/font.less b/packages/fineui/src/less/lib/font.less index f37ec8615..d8eccc6f7 100644 --- a/packages/fineui/src/less/lib/font.less +++ b/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'; diff --git a/packages/fineui/src/less/resource/font.less b/packages/fineui/src/less/resource/font.less index d65940802..93330a958 100644 --- a/packages/fineui/src/less/resource/font.less +++ b/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); diff --git a/packages/fineui/typescript/base/foundation/message.ts b/packages/fineui/typescript/base/foundation/message.ts index 421d6e2a7..68a0c53c7 100644 --- a/packages/fineui/typescript/base/foundation/message.ts +++ b/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 }