Pull request #3746: 无JIRA 节点的宽度要随内容撑起来

Merge in VISUAL/fineui from ~DAILER/fineui:master to master

* commit '4bba27b638b0073b7fb2eac01d4ccddc5e4bb722':
  无JIRA 节点的宽度要随内容撑起来

README

@@ -13,14 +13,24 @@ http://fanruan.design/doc.html?post=0169cf558d
 
 ## 开发
 
-pnpm run dev
+`pnpm run dev`
 
-* demo: [http://localhost:3000/](http://localhost:3000/) 
+* demo: [http://localhost:3000/](http://localhost:3000/)
 * fineui: [http://localhost:9001/fineui.js](http://localhost:9001/fineui.js)
 
 ## 构建
 
-pnpm run build
+`pnpm run build`
+
+## 自定义less变量构建
+```
+cross-env LESS_CONFIG_PATH=your_less_config.json && pnpm build
+```
+
+## 构建自定义的css
+```
+cross-env LESS_CONFIG_PATH=your_less_config.json LESS_FILE_NAME=your_file_name pnpm --filter @fui/core webpack:css
+```
 
 ## 发布
 
@@ -28,4 +38,4 @@ pnpm run build
 
 License
 ============
-Please refer to [LICENSE](https://code.fanruan.com/fanruan/fineui/src/branch/master/LICENSE) file.
+Please refer to [LICENSE](https://code.fanruan.com/fanruan/fineui/src/branch/master/LICENSE) file.

package.json

@@ -23,13 +23,17 @@
         "@babel/core": "^7.21.0",
         "@babel/runtime": "^7.21.0",
         "@fui/babel-preset-fineui": "^3.0.1",
+        "@fui/eslint-plugin": "^1.1.0",
         "@types/node": "^18.15.11",
+        "@typescript-eslint/eslint-plugin": "^5.60.0",
+        "@typescript-eslint/parser": "^5.60.0",
         "autoprefixer": "^10.4.14",
         "babel-loader": "^9.1.2",
         "babel-plugin-module-resolver": "^5.0.0",
         "circular-dependency-plugin": "^5.2.2",
         "css-loader": "^6.7.3",
         "css-minimizer-webpack-plugin": "^5.0.0",
+        "eslint": "^8.43.0",
         "fork-ts-checker-webpack-plugin": "^8.0.0",
         "glob": "^9.3.4",
         "html-webpack-plugin": "^5.5.0",
@@ -39,14 +43,15 @@
         "npm-run-all": "^4.1.5",
         "postcss": "^8.4.21",
         "postcss-loader": "^7.1.0",
+        "prettier": "^3.0.0",
         "style-loader": "^3.3.1",
         "terser-webpack-plugin": "^5.3.7",
         "ts-node": "^10.9.1",
         "typescript": "^4.9.5",
         "webpack": "^5.75.0",
         "webpack-bundle-analyzer": "^4.8.0",
-        "webpack-cli": "^5.0.1",
-        "webpack-dev-server": "^4.11.1",
-        "webpack-merge": "^5.8.0"
+        "webpack-cli": "^5.1.4",
+        "webpack-dev-server": "^4.15.1",
+        "webpack-merge": "^5.9.0"
     }
 }

packages/fineui/bi.lessconfig.json

@@ -28,7 +28,7 @@
   "@color-bi-background-disabled-active-radio-content": "#FFFFFF",
   "@color-bi-background-disabled-active-radio-content-theme-dark": "#606479",
   "@color-bi-background-disabled-active-checkbox-content": "#FFFFFF",
-  "@color-bi-background-disabled-active-checkbox-content-theme-dark": "#606479",
+  "@color-bi-background-disabled-active-checkbox-content-theme-dark": "rgba(255, 255, 255, 0.24)",
   "@color-bi-background-tooltip-success": "#3F506A",
   "@color-bi-background-tooltip-failure": "#E65251",
   "@color-bi-border-tooltip-success": "#2E3A4D",

packages/fineui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fui/core",
-  "version": "3.0.20230615140705",
+  "version": "3.0.20231204103846",
   "description": "fineui",
   "main": "dist/fineui.min.js",
   "module": "dist/lib/index.js",
@@ -23,11 +23,14 @@
     "dev:fineui": "webpack-dev-server --progress --config=webpack/webpack.dev.js",
     "build": "tsc && run-p build:*",
     "build:es": "babel src -d dist/lib --config-file ./esm.babel.js",
+    "webpack:css": "webpack --progress --config=webpack/webpack.css.js --mode production",
     "build:fineui": "webpack --progress --config=webpack/webpack.prod.js",
     "prepublishToPrivate": "npm run build && node ./lib/prepublish.js",
     "publishToPrivate": "npm publish",
     "tsc": "tsc",
-    "link": "pnpm link --global"
+    "link": "pnpm link --global",
+    "build:biCss": "cross-env LESS_CONFIG_PATH=bi.lessconfig.json LESS_FILE_NAME=bi npm run webpack:css",
+    "build:jsyCss": "cross-env LESS_CONFIG_PATH=jsy.lessconfig.json LESS_FILE_NAME=jsy npm run webpack:css"
   },
   "files": [
     "dist",

packages/fineui/src/base/1.pane.js

@@ -111,11 +111,11 @@ export class Pane extends Widget {
             }
         ];
         isNotEmptyString(o.loadingText) &&
-            loadingTipItems.push({
-                type: Text.xtype,
-                text: o.loadingText,
-                tgap: this._getSize(10),
-            });
+        loadingTipItems.push({
+            type: Text.xtype,
+            text: o.loadingText,
+            tgap: this._getSize(10),
+        });
 
         return [
             {
@@ -158,4 +158,10 @@ export class Pane extends Widget {
         this.options.items = items || [];
         this.check();
     }
+
+    destroyed() {
+        super.destroyed?.();
+        Layers.remove(`${this.getName()}-loading`);
+        this._loading?.destroy();
+    }
 }

packages/fineui/src/base/collection/collection.js

@@ -124,6 +124,12 @@ export class CollectionView extends Widget {
             this.element.scrollLeft(scrollLeft);
         }
     }
+    
+    destroyed() {
+        each(this.renderedCells, (i, cell) => {
+            cell.el._destroy();
+        });
+    }
 
     _calculateSizeAndPositionData() {
         const { items, cellSizeAndPositionGetter } = this.options;

packages/fineui/src/base/combination/bubble.js

@@ -72,6 +72,7 @@ export class Bubble extends Widget {
             popup: {},
             comboClass: "bi-combo-popup",
             hoverClass: "bi-combo-hover",
+            extraModifiers: []
         });
     }
 
@@ -410,7 +411,16 @@ export class Bubble extends Widget {
     }
 
     _popupView(e) {
-        const { adjustXOffset, showArrow, adjustYOffset, adjustLength, placement, hideWhenClickOutside, hideWhenBlur } =
+        const {
+            adjustXOffset,
+            showArrow,
+            adjustYOffset,
+            adjustLength,
+            placement,
+            hideWhenClickOutside,
+            hideWhenBlur,
+            extraModifiers
+        } =
             this.options;
         this._assertPopupViewRender();
         this.fireEvent(Bubble.EVENT_BEFORE_POPUPVIEW);
@@ -429,6 +439,7 @@ export class Bubble extends Widget {
                     offset: () => [adjustXOffset, (showArrow ? 12 : 0) + (adjustYOffset + adjustLength)],
                 },
             },
+            ...extraModifiers
         ];
         if (this.options.showArrow) {
             modifiers.push({
@@ -520,6 +531,7 @@ export class Bubble extends Widget {
         this.combo.setValue(v);
         if (isNull(this.popupView)) {
             this.options.popup.value = v;
+            !isNull(this.options.popup.el) && (this.options.popup.el.value = v);
         } else {
             this.popupView.setValue(v);
         }

packages/fineui/src/base/combination/expander.js

@@ -276,7 +276,7 @@ export class Expander extends Widget {
     }
 
     _setEnable(arg) {
-        super._setEnable(arguments);
+        super._setEnable(...arguments);
         !arg && this.element.removeClass(this.options.hoverClass);
         !arg && this.isViewVisible() && this._hideView();
     }
@@ -341,6 +341,6 @@ export class Expander extends Widget {
     }
 
     destroy() {
-        super.destroy(arguments);
+        super.destroy(...arguments);
     }
 }

packages/fineui/src/base/combination/group.button.js

@@ -418,12 +418,12 @@ export class ButtonGroup extends Widget {
     }
 
     empty() {
-        super.empty(arguments);
+        super.empty(...arguments);
         this.options.items = [];
     }
 
     destroy() {
-        super.destroy(arguments);
+        super.destroy(...arguments);
         this.options.items = [];
     }
 }

packages/fineui/src/base/combination/group.virtual.js

@@ -56,7 +56,7 @@ export class VirtualGroup extends Widget {
 
     _packageBtns(items) {
         const o = this.options;
-        const map = (this.buttonMap = {});
+        const btMap = (this.buttonMap = {});
         const layouts = isArray(o.layouts) ? o.layouts : [o.layouts];
         for (let i = layouts.length - 1; i > 0; i--) {
             items = map(items, (k, it) => {
@@ -68,8 +68,8 @@ export class VirtualGroup extends Widget {
                             el: extend(
                                 {
                                     ref: _ref => {
-                                        if (isKey(map[el.value])) {
-                                            map[el.value] = _ref;
+                                        if (isKey(el.value)) {
+                                            btMap[el.value] = _ref;
                                         }
                                     },
                                 },

packages/fineui/src/base/combination/loader.js

@@ -181,7 +181,7 @@ export class Loader extends Widget {
             isEmpty(optionsItems) &&
             nextTick(
                 bind(() => {
-                    isDefaultInit && isEmpty(optionsItems) && this._populate();
+                    isDefaultInit && isEmpty(this.options.items) && this._populate();
                 }, this)
             );
         const items = isFunction(optionsItems)
@@ -204,7 +204,7 @@ export class Loader extends Widget {
             {
                 times: this.times,
                 count: this.count,
-            }
+            }, this.options
         ]);
     }
 
@@ -218,7 +218,7 @@ export class Loader extends Widget {
             {
                 times: this.times,
                 count: this.count,
-            }
+            }, this.options
         ]);
     }
 
@@ -342,6 +342,6 @@ export class Loader extends Widget {
     }
 
     destroy() {
-        super.destroy(arguments);
+        super.destroy(...arguments);
     }
 }

packages/fineui/src/base/combination/navigation.js

@@ -191,6 +191,6 @@ export class Navigation extends Widget {
     }
 
     destroy() {
-        super.destroy(arguments);
+        super.destroy(...arguments);
     }
 }

packages/fineui/src/base/combination/searcher.js

@@ -134,7 +134,7 @@ export class Searcher extends Widget {
             this.popupView = createWidget(popup, {
                 type: SearcherView.xtype,
                 chooseType,
-            });
+            }, this);
             this.popupView.on(Controller.EVENT_CHANGE, (type, value, obj, ...args) => {
                 this.fireEvent(Controller.EVENT_CHANGE, type, value, obj, ...args);
                 if (type === Events.CLICK) {

packages/fineui/src/base/combination/switcher.js

@@ -263,7 +263,7 @@ export class Switcher extends Widget {
     }
 
     _setEnable(arg) {
-        super._setEnable(arguments);
+        super._setEnable(...arguments);
         !arg && this.isViewVisible() && this._hideView();
     }
 

packages/fineui/src/base/combination/tab.js

@@ -158,6 +158,10 @@ export class Tab extends Widget {
         return this.layout.isCardExisted(cardName);
     }
 
+    getAllCardIds() {
+        return Object.keys(this.cardMap);
+    }
+
     getSelect() {
         return this.curr;
     }
@@ -200,6 +204,6 @@ export class Tab extends Widget {
 
     destroy() {
         this.cardMap = {};
-        super.destroy(arguments);
+        super.destroy(...arguments);
     }
 }

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

@@ -3,248 +3,287 @@
  * 弹出提示消息框，用于模拟阻塞操作（通过回调函数实现）
  * @class Msg
  */
-import { Widget, isString, isNull, isFunction, createWidget, remove, each, emptyFn, delay, zIndex_tip, i18nText, KeyCode, isPlainObject, SIZE_CONSANTS } from "../../core";
-import { Toast } from "../single";
+import {
+    Widget,
+    isString,
+    isNull,
+    isFunction,
+    createWidget,
+    remove,
+    each,
+    emptyFn,
+    delay,
+    zIndex_tip,
+    i18nText,
+    KeyCode,
+    isPlainObject,
+    SIZE_CONSANTS,
+    CenterAdaptLayout,
+    VerticalLayout,
+    HTapeLayout,
+    RightVerticalAdaptLayout
+} from "../../core";
+import { Button, IconLabel, Label, Toast } from "../single";
 
-export const Msg = (() => {
-    let $mask, $pop;
+let $mask, $pop;
 
-    const messageShows = [];
+const messageShows = [];
 
-    const toastStack = [];
+const toastStack = [];
 
-    return {
-        alert (title, message, callback) {
-            this._show(false, title, message, callback);
-        },
-        confirm (title, message, callback) {
-            this._show(true, title, message, callback);
-        },
-        prompt (title, message, value, callback, min_width) {
-            // Msg.prompt(title, message, value, callback, min_width);
-        },
-        toast (message, options, context) {
-            isString(options) && (options = { level: options });
-            options = options || {};
-            context = context || Widget._renderEngine.createElement("body");
-            const level = options.level || "common";
-            const autoClose = isNull(options.autoClose) ? true : options.autoClose;
-            const callback = isFunction(options.callback) ? options.callback : emptyFn;
-            const toast = createWidget({
-                type: "bi.toast",
-                cls: "bi-message-animate bi-message-leave",
-                level,
-                autoClose,
-                closable: options.closable,
-                text: message,
-                listeners: [
-                    {
-                        eventName: Toast.EVENT_DESTORY,
-                        action () {
-                            remove(toastStack, toast.element);
-                            let _height = SIZE_CONSANTS.TOAST_TOP;
-                            each(toastStack, (i, element) => {
-                                element.css({ top: _height });
-                                _height += element.outerHeight() + 10;
-                            });
-                            callback();
-                        },
-                    }
-                ],
-            });
-            let height = SIZE_CONSANTS.TOAST_TOP;
-            each(toastStack, (i, element) => {
-                height += element.outerHeight() + 10;
-            });
-            createWidget({
-                type: "bi.absolute",
-                element: context,
-                items: [
-                    {
-                        el: toast,
-                        left: "50%",
-                        top: height,
-                    }
-                ],
-            });
-            toastStack.push(toast.element);
-            toast.element.css({ "margin-left": (-1 * toast.element.outerWidth()) / 2 });
-            toast.element.removeClass("bi-message-leave").addClass("bi-message-enter");
+const AlertLevel = {
+    WARNING: 'warning',
+    INFO: 'info',
+    ERROR: 'error',
+    SUCCESS: 'success',
+}
 
-            autoClose &&
-                delay(() => {
-                    toast.element.removeClass("bi-message-enter").addClass("bi-message-leave");
-                    toast.destroy?.();
-                }, 5000);
+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';
+    }
+}
 
-            return function () {
-                toast.element.removeClass("bi-message-enter").addClass("bi-message-leave");
-                toast.destroy?.();
-            };
-        },
-        _show (hasCancel, title, message, callback) {
-            isNull($mask) &&
-                ($mask = Widget._renderEngine
-                    .createElement("<div class=\"bi-z-index-mask\">")
-                    .css({
-                        position: "absolute",
-                        zIndex: zIndex_tip - 2,
-                        top: 0,
-                        left: 0,
-                        right: 0,
-                        bottom: 0,
-                        opacity: 0.5,
-                    })
-                    .appendTo("body"));
-            $pop = Widget._renderEngine
-                .createElement("<div class=\"bi-message-depend\">")
-                .css({
-                    position: "absolute",
-                    zIndex: zIndex_tip - 1,
-                    top: 0,
-                    left: 0,
-                    right: 0,
-                    bottom: 0,
-                })
-                .appendTo("body");
-            function close() {
-                messageShows[messageShows.length - 1].destroy();
-                messageShows.pop();
-                if (messageShows.length === 0) {
-                    $mask.remove();
-                    $mask = null;
+
+export const Msg = {
+    alert(title, message, callback, config) {
+        _show(false, title, message, callback, config);
+    },
+    confirm(title, message, callback, config) {
+        _show(true, title, message, callback, config);
+    },
+    toast(message, options, context) {
+        isString(options) && (options = { level: options });
+        options = options || {};
+        context = context || Widget._renderEngine.createElement("body");
+        const level = options.level || "common";
+        const autoClose = isNull(options.autoClose) ? true : options.autoClose;
+        const callback = isFunction(options.callback) ? options.callback : emptyFn;
+        const toast = createWidget({
+            type: "bi.toast",
+            cls: "bi-message-animate bi-message-leave",
+            level,
+            autoClose,
+            closable: options.closable,
+            text: message,
+            listeners: [
+                {
+                    eventName: Toast.EVENT_DESTORY,
+                    action() {
+                        remove(toastStack, toast.element);
+                        let _height = SIZE_CONSANTS.TOAST_TOP;
+                        each(toastStack, (i, element) => {
+                            element.css({ top: _height });
+                            _height += element.outerHeight() + 10;
+                        });
+                        callback();
+                    },
+                }
+            ],
+        });
+        let height = SIZE_CONSANTS.TOAST_TOP;
+        each(toastStack, (i, element) => {
+            height += element.outerHeight() + 10;
+        });
+        createWidget({
+            type: "bi.absolute",
+            element: context,
+            items: [
+                {
+                    el: toast,
+                    left: "50%",
+                    top: height,
+                }
+            ],
+        });
+        toastStack.push(toast.element);
+        toast.element.css({ "margin-left": (-1 * toast.element.outerWidth()) / 2 });
+        toast.element.removeClass("bi-message-leave").addClass("bi-message-enter");
+
+        autoClose &&
+        delay(() => {
+            toast.element.removeClass("bi-message-enter").addClass("bi-message-leave");
+            toast.destroy?.();
+        }, 5000);
+
+        return function() {
+            toast.element.removeClass("bi-message-enter").addClass("bi-message-leave");
+            toast.destroy?.();
+        };
+    },
+};
+
+function _show(hasCancel, title, message, callback, config = {}) {
+    config = {
+        buttonHeight: 28,
+        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\">")
+        .css({
+            position: "absolute",
+            zIndex: zIndex_tip - 2,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            opacity: 0.5,
+        })
+        .appendTo("body"));
+    $pop = Widget._renderEngine
+        .createElement("<div class=\"bi-message-depend\">")
+        .css({
+            position: "absolute",
+            zIndex: zIndex_tip - 1,
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+        })
+        .appendTo("body");
+
+    function close() {
+        messageShows[messageShows.length - 1].destroy();
+        messageShows.pop();
+        if (messageShows.length === 0) {
+            $mask.remove();
+            $mask = null;
+        }
+    }
+
+    const controlItems = [];
+    if (hasCancel === true) {
+        controlItems.push({
+            el: {
+                type: Button.xtype,
+                height: config.buttonHeight,
+                text: config.cancelText,
+                light: true,
+                handler() {
+                    close();
+                    if (isFunction(callback)) {
+                        callback.apply(null, [false]);
+                    }
+                },
+            },
+        });
+    }
+    controlItems.push({
+        el: {
+            type: Button.xtype,
+            height: config.buttonHeight,
+            text: config.sureText,
+            handler() {
+                close();
+                if (isFunction(callback)) {
+                    callback.apply(null, [true]);
                 }
-            }
-            const controlItems = [];
-            if (hasCancel === true) {
-                controlItems.push({
-                    el: {
-                        type: "bi.button",
-                        text: i18nText("BI-Basic_Cancel"),
-                        level: "ignore",
-                        handler () {
+            },
+        },
+    });
+    const conf = {
+        element: $pop,
+        type: CenterAdaptLayout.xtype,
+        items: [
+            {
+                type: VerticalLayout.xtype,
+                cls: "bi-card bi-border-radius",
+                width: 450,
+                css: {
+                    'max-height': '100%'
+                },
+                hgap: 32,
+                attributes: {
+                    tabIndex: 1,
+                },
+                mounted() {
+                    this.element.keyup(e => {
+                        if (e.keyCode === KeyCode.ENTER) {
                             close();
                             if (isFunction(callback)) {
-                                callback.apply(null, [false]);
+                                callback.apply(null, [true]);
+                            }
+                        } else if (e.keyCode === KeyCode.ESCAPE) {
+                            close();
+                            if (hasCancel === true) {
+                                if (isFunction(callback)) {
+                                    callback.apply(null, [false]);
+                                }
                             }
-                        },
-                    },
-                });
-            }
-            controlItems.push({
-                el: {
-                    type: "bi.button",
-                    text: i18nText("BI-Basic_OK"),
-                    handler () {
-                        close();
-                        if (isFunction(callback)) {
-                            callback.apply(null, [true]);
                         }
-                    },
+                    });
+                    try {
+                        this.element.focus();
+                    } catch (e) {
+                    }
                 },
-            });
-            const conf = {
-                element: $pop,
-                type: "bi.center_adapt",
                 items: [
                     {
-                        type: "bi.border",
-                        attributes: {
-                            tabIndex: 1,
-                        },
-                        mounted () {
-                            this.element.keyup(e => {
-                                if (e.keyCode === KeyCode.ENTER) {
-                                    close();
-                                    if (isFunction(callback)) {
-                                        callback.apply(null, [true]);
-                                    }
-                                } else if (e.keyCode === KeyCode.ESCAPE) {
-                                    close();
-                                    if (hasCancel === true) {
-                                        if (isFunction(callback)) {
-                                            callback.apply(null, [false]);
-                                        }
-                                    }
-                                }
-                            });
-                            try {
-                                this.element.focus();
-                            } catch (e) {}
-                        },
-                        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: {
-                                            el: {
-                                                type: "bi.icon_button",
-                                                cls: "bi-message-close close-font",
-                                                //                                                    height: 50,
-                                                handler () {
-                                                    close();
-                                                    if (isFunction(callback)) {
-                                                        callback.apply(null, [false]);
-                                                    }
-                                                },
-                                            },
-                                            width: 56,
-                                        },
-                                    },
+                        el: {
+                            type: HTapeLayout.xtype,
+                            height: 24,
+                            items: [
+                                {
+                                    type: IconLabel.xtype,
+                                    cls: `${getIconCls(config.level)} icon-size-20`,
+                                    width: 24,
+                                    height: 24,
                                 },
-                                height: 40,
-                            },
-                            center: {
-                                el: isPlainObject(message)
-                                    ? message
-                                    : {
-                                        type: "bi.label",
-                                        vgap: 10,
-                                        hgap: 20,
-                                        whiteSpace: "normal",
-                                        text: message,
+                                {
+                                    el: {
+                                        type: Label.xtype,
+                                        css: {"font-size": 16},
+                                        cls: 'bi-font-bold', // 16px
+                                        textAlign: 'left',
+                                        text: title || i18nText('BI-Basic_Prompt'),
+                                        lgap: 16,
                                     },
-                            },
-                            south: {
-                                el: {
-                                    type: "bi.absolute",
-                                    items: [
-                                        {
-                                            el: {
-                                                type: "bi.right_vertical_adapt",
-                                                lgap: 10,
-                                                items: controlItems,
-                                            },
-                                            top: 0,
-                                            left: 20,
-                                            right: 20,
-                                            bottom: 0,
-                                        }
-                                    ],
+                                    width: 'fill',
                                 },
-                                height: 44,
+                            ],
+                        },
+                        tgap: 32,
+                    },
+                    {
+                        el: isPlainObject(message)
+                            ? message
+                            : {
+                                type: Label.xtype,
+                                css: { "font-size": 14 },
+                                cls: 'alert-content',
+                                textAlign: 'left',
+                                text: message,
+                                whiteSpace: 'normal',
                             },
+                        height: 'fill',
+                        tgap: 12,
+                        lgap: 40,
+                    },
+                    {
+                        el: config.footer && isFunction(config.footer) ? config.footer(close) : {
+                            type: RightVerticalAdaptLayout.xtype,
+                            lgap: 12,
+                            items: controlItems,
                         },
-                        width: 450,
-                        height: 200,
-                    }
+                        tgap: 32,
+                        bgap: 24,
+                    },
                 ],
-            };
-
-            messageShows[messageShows.length] = createWidget(conf);
-        },
+            },
+        ],
     };
-})();
+
+    messageShows[messageShows.length] = createWidget(conf);
+}

packages/fineui/src/base/index.js

@@ -11,3 +11,4 @@ export * from "./layer";
 export * from "./list";
 export * from "./single";
 export * from "./el";
+export * from "./context";

packages/fineui/src/base/layer/layer.popover.js

@@ -16,6 +16,7 @@ import {
 } from "@/core";
 import { Label, IconButton, Button } from "../single";
 import { Resizers } from "../0.base";
+import { getOuterBody } from "@/core/utils/dom";
 
 /**
  * Popover弹出层，
@@ -46,6 +47,7 @@ export class Popover extends Widget {
             body: null,
             footer: null,
             footerHeight: 44,
+            footerButtonHeight: 28,
             closable: true, // BI-40839 是否显示右上角的关闭按钮
             bodyHgap: SIZE_CONSANTS.H_GAP_SIZE,
             bodyTgap: SIZE_CONSANTS.V_GAP_SIZE,
@@ -62,29 +64,7 @@ export class Popover extends Widget {
         // var self = this;
         const { header, headerHeight, closable, logic, footer, footerHeight, body, bodyTgap, bodyHgap } = this.options;
         const c = this._constant;
-        this.startX = 0;
-        this.startY = 0;
         const size = this._calculateSize();
-        this.tracker = new MouseMoveTracker(
-            (deltaX, deltaY) => {
-                const W = Widget._renderEngine.createElement("body").width();
-                const H = Widget._renderEngine.createElement("body").height();
-                this.startX += deltaX;
-                this.startY += deltaY;
-                this.element.css({
-                    left: `${clamp(this.startX, 0, W - this.element.width())}px`,
-                    top: `${clamp(this.startY, 0, H - this.element.height())}px`,
-                });
-                // BI-12134 没有什么特别好的方法
-                Resizers._resize({
-                    target: this.element[0],
-                });
-            },
-            () => {
-                this.tracker.releaseMouseMoves();
-            },
-            _global
-        );
         const items = [
             {
                 el: {
@@ -213,9 +193,33 @@ export class Popover extends Widget {
                 }
         );
     }
+
     // mounted之后绑定事件
     mounted() {
-        this.dragger.element.mousedown(e => {
+        this.startX = 0;
+        this.startY = 0;
+        this.tracker = new MouseMoveTracker(
+            (deltaX, deltaY) => {
+                const el = Widget._renderEngine.createElement(getOuterBody())[0];
+                const W = el.clientWidth;
+                const H = el.clientHeight;
+                this.startX += deltaX;
+                this.startY += deltaY;
+                this.element.css({
+                    left: `${clamp(this.startX, 0, W - this.element.width())}px`,
+                    top: `${clamp(this.startY, 0, H - this.element.height())}px`,
+                });
+                // BI-12134 没有什么特别好的方法
+                Resizers._resize({
+                    target: this.element[0],
+                });
+            },
+            () => {
+                this.tracker.releaseMouseMoves();
+            },
+            _global
+        );
+        this.dragger?.element.mousedown(e => {
             if (this.options.draggable !== false) {
                 this.startX = this.element[0].offsetLeft;
                 this.startY = this.element[0].offsetTop;
@@ -226,23 +230,23 @@ export class Popover extends Widget {
 
     _getSuitableBodyHeight(height) {
         const { headerHeight, footer, footerHeight, bodyTgap } = this.options;
-
+        const bodyDom = getOuterBody();
         return clamp(
             height,
             0,
-            Widget._renderEngine.createElement("body")[0].clientHeight -
-                headerHeight -
-                (footer ? footerHeight : 0) -
-                bodyTgap
+            Widget._renderEngine.createElement(bodyDom)[0].clientHeight -
+            headerHeight -
+            (footer ? footerHeight : 0) -
+            bodyTgap
         );
     }
 
     _getSuitableHeight(height) {
-        return clamp(height, 0, Widget._renderEngine.createElement("body")[0].clientHeight);
+        return clamp(height, 0, Widget._renderEngine.createElement(getOuterBody())[0].clientHeight);
     }
 
     _getSuitableWidth(width) {
-        return clamp(width, 0, Widget._renderEngine.createElement("body").width());
+        return clamp(width, 0, Widget._renderEngine.createElement(getOuterBody())[0].clientWidth);
     }
 
     _calculateSize() {
@@ -273,11 +277,13 @@ export class Popover extends Widget {
             type: sizeValue.type || "default",
         };
     }
+
     setDraggable(b) {
         this.options.draggable = b;
     }
 
-    hide() {}
+    hide() {
+    }
 
     open() {
         this.show();
@@ -305,33 +311,35 @@ export class BarPopover extends Popover {
     }
 
     beforeCreate() {
-        const { footer, warningTitle } = this.options;
+        const { footer, warningTitle, footerButtonHeight } = this.options;
         footer ||
-            (this.options.footer = {
-                type: RightVerticalAdaptLayout.xtype,
-                lgap: 10,
-                items: [
-                    {
-                        type: Button.xtype,
-                        text: this.options.btns[1],
-                        value: 1,
-                        level: "ignore",
-                        handler: v => {
-                            this.fireEvent(Popover.EVENT_CANCEL, v);
-                            this.close(v);
-                        },
+        (this.options.footer = {
+            type: RightVerticalAdaptLayout.xtype,
+            lgap: 10,
+            items: [
+                {
+                    type: Button.xtype,
+                    height: footerButtonHeight,
+                    text: this.options.btns[1],
+                    value: 1,
+                    light: true,
+                    handler: v => {
+                        this.fireEvent(Popover.EVENT_CANCEL, v);
+                        this.close(v);
                     },
-                    {
-                        type: Button.xtype,
-                        text: this.options.btns[0],
-                        warningTitle,
-                        value: 0,
-                        handler: v => {
-                            this.fireEvent(Popover.EVENT_CONFIRM, v);
-                            this.close(v);
-                        },
-                    }
-                ],
-            });
+                },
+                {
+                    type: Button.xtype,
+                    height: footerButtonHeight,
+                    text: this.options.btns[0],
+                    warningTitle,
+                    value: 0,
+                    handler: v => {
+                        this.fireEvent(Popover.EVENT_CONFIRM, v);
+                        this.close(v);
+                    },
+                }
+            ],
+        });
     }
 }

packages/fineui/src/base/list/listview.js

@@ -111,11 +111,6 @@ export class ListView extends Widget {
         }
     }
     _calculateBlocksToRender() {
-        // BI-115750 不可见状态下依赖元素实际尺寸构造的线段树会分段错误，所以不进行后续计算和线段树的初始化。
-        // 这样从不可见状态变为可见状态能够重新触发线段树初始化
-        if (!this.element.is(":visible")) {
-            return;
-        }
         this._renderMoreIf();
     }
 

packages/fineui/src/base/list/virtualgrouplist.js

@@ -1,4 +1,4 @@
-import { VerticalLayout, Layout, Widget, shortcut, extend, isFunction, isNumber, PrefixIntervalTree, ResizeDetector } from "@/core";
+import { VerticalLayout, Layout, Widget, shortcut, extend, isFunction, isNumber, sum, PrefixIntervalTree, ResizeDetector } from "@/core";
 import { VirtualGroup } from "../combination";
 
 /**
@@ -17,7 +17,7 @@ export class VirtualGroupList extends Widget {
             overscanHeight: 100,
             blockSize: 10,
             scrollTop: 0,
-            rowHeight: "auto",
+            rowHeight: "auto", // 'auto' 或 数值 或function
             items: [],
             el: {},
             itemFormatter: (item, index) => item,
@@ -25,6 +25,7 @@ export class VirtualGroupList extends Widget {
     }
 
     init() {
+        this._calculateSummaryHeight();
         this.renderedIndex = -1;
     }
 
@@ -44,7 +45,7 @@ export class VirtualGroupList extends Widget {
                 },
                 {
                     type: VirtualGroup.xtype,
-                    height: rowHeight * items.length,
+                    height: this.summaryHeight,
                     ref: (ref) => {
                         this.container = ref;
                     },
@@ -97,7 +98,7 @@ export class VirtualGroupList extends Widget {
     }
 
     _isAutoHeight() {
-        return !isNumber(this.options.rowHeight);
+        return this.options.rowHeight === 'auto';
     }
 
     _renderMoreIf() {
@@ -163,12 +164,22 @@ export class VirtualGroupList extends Widget {
                     itemsArr.push(items[j]);
                 }
             }
-            this.container.element.height(rowHeight * items.length - topHeight);
+            this.container.element.height(this.summaryHeight - topHeight);
             this.container.populate(
                 itemsArr.map((item, i) => itemFormatter(item, (start < 0 ? 0 : start) * blockSize + i))
             );
         }
     }
+
+    _calculateSummaryHeight() {
+        const o = this.options;
+        if (isFunction(o.rowHeight)) {
+            this.summaryHeight = sum(o.items, o.rowHeight);
+        } else {
+            this.summaryHeight = this._isAutoHeight() ? 0 : o.rowHeight * o.items.length;
+        }
+    }
+
     _populate(items) {
         const { blockSize, rowHeight, scrollTop } = this.options;
         if (items && this.options.items !== items) {
@@ -180,6 +191,16 @@ export class VirtualGroupList extends Widget {
             Math.ceil(this.options.items.length / blockSize),
             this._isAutoHeight() ? 0 : rowHeight * blockSize
         );
+        if (isFunction(rowHeight)) {
+            for (let i = 0; i < this.options.items.length / blockSize; i++) {
+                const index = i * blockSize;
+                let summaryHeight = 0;
+                for (let j = index; j < index + blockSize && j < this.options.items.length; j++) {
+                    summaryHeight += rowHeight(j, this.options.items[j]);
+                }
+                this.tree.set(i, summaryHeight);
+            }
+        }
 
         this._calculateBlocksToRender();
         try {
@@ -189,6 +210,7 @@ export class VirtualGroupList extends Widget {
 
     _restore() {
         this.renderedIndex = -1;
+        this._calculateSummaryHeight();
         // 依赖于cache的占位元素也要初始化
         this.topBlank.setHeight(0);
         this.bottomBlank.setHeight(0);
@@ -214,4 +236,8 @@ export class VirtualGroupList extends Widget {
         ResizeDetector.removeResizeListener(this);
         this.restore();
     }
+
+    getNodeByValue(value) {
+        return this.container.getNodeByValue(value);
+    }
 }

packages/fineui/src/base/single/0.single.js

@@ -72,7 +72,7 @@ export class Single extends Widget {
                 this.setValue(newValue);
             })
             : value;
-        super._init(arguments);
+        super._init(...arguments);
     }
 
     _mounted() {

packages/fineui/src/base/single/button/button.basic.js

@@ -69,7 +69,7 @@ export class BasicButton extends Single {
                 this.setSelected(newValue);
             })
             : opts.selected;
-        super._init(arguments);
+        super._init(...arguments);
 
         if (opts.shadow) {
             this._createShadow();
@@ -193,6 +193,7 @@ export class BasicButton extends Single {
                                     trigger: "",
                                     // bubble的提示不需要一直存在在界面上
                                     destroyWhenHide: true,
+                                    hideWhenAnotherComboOpen: true,
                                     ref: _ref => {
                                         this.combo = _ref;
                                     },

packages/fineui/src/base/single/button/listitem/icontextitem.js

@@ -59,6 +59,7 @@ export class IconTextItem extends BasicButton {
                         lgap: o.textLgap,
                         rgap: o.textRgap,
                         text: o.text,
+                        title: o.title,
                         value: o.value,
                         keyword: o.keyword,
                         height: o.height,

packages/fineui/src/base/single/editor/editor.textarea.js

@@ -279,7 +279,7 @@ export class TextAreaEditor extends Single {
     }
 
     _setValid(b) {
-        super._setValid(arguments);
+        super._setValid(...arguments);
         // this.content.setValid(b);
         // this.watermark && this.watermark.setValid(b);
     }

packages/fineui/src/base/single/input/checkbox/checkbox.js

@@ -52,7 +52,7 @@ export class Checkbox extends BasicButton {
     }
 
     doClick() {
-        super.doClick(arguments);
+        super.doClick(...arguments);
         if (this.isValid()) {
             this.fireEvent(Checkbox.EVENT_CHANGE);
         }

packages/fineui/src/base/single/input/file.js

@@ -242,14 +242,11 @@ const sendFile = (toString => {
                     upload.onloadstart();
                 }
             }
-            const boundary = `AjaxUploadBoundary${new Date().getTime()}`;
-            xhr.setRequestHeader("Content-Type", `multipart/form-data; boundary=${boundary}`);
             if (handler.file.getAsBinary) {
+                const boundary = `AjaxUploadBoundary${new Date().getTime()}`;
+                xhr.setRequestHeader("Content-Type", `multipart/form-data; boundary=${boundary}`);
                 xhr[xhr.sendAsBinary ? "sendAsBinary" : "send"](multipart(boundary, handler.name, handler.file));
             } else {
-                xhr.setRequestHeader("Content-Type", "multipart/form-data");
-                //                    xhr.setRequestHeader("X-Name", handler.name);
-                //                    xhr.setRequestHeader("X-File-Name", handler.file.fileName);
                 const form = new FormData();
                 form.append("FileData", handler.file);
                 xhr.send(form);
@@ -541,7 +538,7 @@ export class File extends Widget {
                 // We can still show some information
             }
             this.fireEvent(File.EVENT_PROGRESS, {
-                file: this.file,
+                file: _wrap.file,
                 total: rpe.total,
                 loaded: rpe.loaded,
                 simulation: rpe.simulation,
@@ -759,7 +756,7 @@ export class File extends Widget {
     }
 
     _setEnable(enable) {
-        super._setEnable(arguments);
+        super._setEnable(...arguments);
         if (enable === true) {
             this.element.removeAttr("disabled");
         } else {

packages/fineui/src/base/single/input/input.js

@@ -144,7 +144,7 @@ export class Input extends Single {
     _blur() {
         const blur = () => {
             if (!this.isValid() && this.options.quitChecker.apply(this, [trim(this.getValue())]) !== false) {
-                this.element.val(this._lastValidValue ? this._lastValidValue : "");
+                this.element.val(this._lastValidValue ?? this.options.value ?? "");
                 this._checkValidationOnValueChange();
                 this._defaultState();
             }
@@ -344,7 +344,7 @@ export class Input extends Single {
     }
 
     _setValid() {
-        super._setValid(arguments);
+        super._setValid(...arguments);
         if (this.isValid()) {
             this._lastChangedValue = this.getValue();
             this.element.removeClass("bi-input-error");

packages/fineui/src/base/single/input/radio/radio.image.js

@@ -28,7 +28,7 @@ export class ImageRadio extends IconButton {
     }
 
     doClick() {
-        super.doClick(arguments);
+        super.doClick(...arguments);
         if (this.isValid()) {
             this.fireEvent(ImageRadio.EVENT_CHANGE);
         }

packages/fineui/src/base/single/input/radio/radio.js

@@ -51,7 +51,7 @@ export class Radio extends BasicButton {
     }
 
     doClick() {
-        super.doClick(arguments);
+        super.doClick(...arguments);
         if (this.isValid()) {
             this.fireEvent(Radio.EVENT_CHANGE);
         }

packages/fineui/src/base/tree/customtree.js

@@ -105,6 +105,7 @@ export class CustomTree extends Widget {
                     return itemsCreator.apply(this, args);
                 };
                 isNull(item.popup.el) && (item.popup.el = deepClone(this.options.el));
+                item.popup.el.node = item.el;
                 items.push(item);
             } else {
                 items.push(node);
@@ -122,9 +123,8 @@ export class CustomTree extends Widget {
             itemsCreator: (op, callback) => {
                 itemsCreator.apply(this, [
                     op,
-                    items => {
-                        const args = Array.prototype.slice.call(arguments, 0);
-                        args[0] = this._formatItems(items);
+                    (...args) => {
+                        args[0] = this._formatItems(args[0]);
                         callback(...args);
                     }
                 ]);

packages/fineui/src/bundle.js

@@ -5,12 +5,15 @@ import {_defineVarProperties} from "@/core/constant/writable.var";
 
 _global.BI = _global.BI || {};
 
+// for fr, 已经有的就不对外暴露了.
+// 要知道BI只有`BI.$`, 挂在全局对象上的只是为了兼容而已
+if (!_global.$ && !_global.jQuery) {
+    _global.jQuery = _global.$ = fuiExport.$;
+}
 
 Object.assign(_global, {
     Fix: fuiExport.Fix,
     _: fuiExport._,
-    $: fuiExport.$,
-    jQuery: fuiExport.$,
 });
 
 Object.assign(_global.BI, fuiExport, injectFn);

packages/fineui/src/case/button/item.multiselect.js

@@ -19,6 +19,7 @@ export class MultiSelectItem extends BasicButton {
             },
             height: SIZE_CONSANTS.LIST_ITEM_HEIGHT,
             iconWrapperWidth: 26,
+            el: {},
         });
     }
 
@@ -55,6 +56,7 @@ export class MultiSelectItem extends BasicButton {
                         keyword: o.keyword,
                         value: o.value,
                         py: o.py,
+                        ...o.el
                     },
                 }
             ],

packages/fineui/src/case/button/switch.js

@@ -1,15 +1,13 @@
 import { AbsoluteLayout, shortcut, i18nText } from "@/core";
 import { TextButton, Label, BasicButton } from "@/base";
 
+const CIRCLE_SIZE = 12;
+
 @shortcut()
 export class Switch extends BasicButton {
     static xtype = "bi.switch";
     static EVENT_CHANGE = "EVENT_CHANGE";
 
-    constants = {
-        CIRCLE_SIZE: 12,
-    };
-
     props = {
         extraCls: "bi-switch",
         attributes: {
@@ -18,12 +16,12 @@ export class Switch extends BasicButton {
         height: 20,
         width: 44,
         showTip: false,
+        textGap: 8,
     };
 
     render() {
-        const o = this.options,
-            c = this.constants;
-        const tgap = (o.height - c.CIRCLE_SIZE) / 2;
+        const { selected, width, height, textGap, showTip } = this.options;
+        const tgap = (height - CIRCLE_SIZE) / 2;
 
         return {
             type: AbsoluteLayout.xtype,
@@ -39,15 +37,15 @@ export class Switch extends BasicButton {
                     width: 12,
                     height: 12,
                     top: tgap,
-                    left: o.selected ? 28 : 4,
+                    left: selected ? width - height + tgap : tgap,
                 },
                 {
                     type: Label.xtype,
                     text: i18nText("BI-Basic_Simple_Open"),
                     cls: "content-tip",
-                    left: 8,
+                    left: textGap,
                     top: tgap - 2,
-                    invisible: !(o.showTip && o.selected),
+                    invisible: !(showTip && selected),
                     ref: _ref => {
                         this.openTip = _ref;
                     },
@@ -56,9 +54,9 @@ export class Switch extends BasicButton {
                     type: Label.xtype,
                     text: i18nText("BI-Basic_Simple_Close"),
                     cls: "content-tip",
-                    right: 8,
+                    right: textGap,
                     top: tgap - 2,
-                    invisible: !(o.showTip && !o.selected),
+                    invisible: !(showTip && !selected),
                     ref: _ref => {
                         this.closeTip = _ref;
                     },
@@ -78,7 +76,9 @@ export class Switch extends BasicButton {
 
     setSelected(v) {
         super.setSelected(...arguments);
-        this.layout.attr("items")[0].left = v ? 28 : 4;
+        const { width, height } = this.options;
+        const tgap = (height - CIRCLE_SIZE) / 2;
+        this.layout.attr("items")[0].left = v ? width - height + tgap : tgap;
         this.layout.resize();
         this.options.showTip && this.openTip.setVisible(v);
         this.options.showTip && this.closeTip.setVisible(!v);

packages/fineui/src/case/button/treeitem/item.icon.treeleaf.js

@@ -1,6 +1,9 @@
 import { CenterAdaptLayout, shortcut, extend, createWidget, LogicFactory, Direction } from "@/core";
 import { Icon, Label, BasicButton } from "@/base";
 
+/**
+ * @deprecated
+ */
 @shortcut()
 export class IconTreeLeafItem extends BasicButton {
     static xtype = "bi.icon_tree_leaf_item";

packages/fineui/src/case/button/treeitem/item.multilayer.icon.treeleaf.js

@@ -1,9 +1,14 @@
-import { IconTreeLeafItem } from "./item.icon.treeleaf";
-import { Layout, HorizontalAdaptLayout, shortcut, extend, createWidget, Controller, makeArray, count, Events } from "@/core";
-import { BasicButton } from "@/base";
-
+import {
+    shortcut,
+    extend,
+} from "@/core";
+import { BasicTreeItem } from "./treeitem";
+
+/**
+ * @deprecated
+ */
 @shortcut()
-export class MultiLayerIconTreeLeafItem extends BasicButton {
+export class MultiLayerIconTreeLeafItem extends BasicTreeItem {
     static xtype = "bi.multilayer_icon_tree_leaf_item";
 
     _defaultConfig() {
@@ -14,89 +19,8 @@ export class MultiLayerIconTreeLeafItem extends BasicButton {
             iconCls: "",
             iconHeight: 16,
             iconWidth: 16,
+            showLine: false,
+            indentWidth: 0
         });
     }
-
-    _init() {
-        super._init(...arguments);
-        const o = this.options;
-        this.item = createWidget({
-            type: IconTreeLeafItem.xtype,
-            cls: "bi-list-item-none",
-            iconCls: o.iconCls,
-            id: o.id,
-            pId: o.pId,
-            isFront: true,
-            height: o.height,
-            hgap: o.hgap,
-            text: o.text,
-            value: o.value,
-            py: o.py,
-            keyword: o.keyword,
-            iconWidth: o.iconWidth,
-            iconHeight: o.iconHeight,
-        });
-        this.item.on(Controller.EVENT_CHANGE, (...args) => {
-            const [type] = args;
-            if (type === Events.CLICK) {
-                // 本身实现click功能
-                return;
-            }
-            this.fireEvent(Controller.EVENT_CHANGE, ...args);
-        });
-
-        const items = [];
-        count(0, o.layer, () => {
-            items.push({
-                type: Layout.xtype,
-                width: 15,
-                height: o.height,
-            });
-        });
-        items.push(this.item);
-        createWidget({
-            type: HorizontalAdaptLayout.xtype,
-            element: this,
-            columnSize: makeArray(o.layer, 15),
-            items,
-        });
-    }
-
-    doRedMark() {
-        this.item.doRedMark(...arguments);
-    }
-
-    unRedMark() {
-        this.item.unRedMark(...arguments);
-    }
-
-    doHighLight() {
-        this.item.doHighLight(...arguments);
-    }
-
-    unHighLight() {
-        this.item.unHighLight(...arguments);
-    }
-
-    getId() {
-        return this.options.id;
-    }
-
-    getPId() {
-        return this.options.pId;
-    }
-
-    doClick() {
-        super.doClick(...arguments);
-        this.item.setSelected(this.isSelected());
-    }
-
-    setSelected(v) {
-        super.setSelected(...arguments);
-        this.item.setSelected(v);
-    }
-
-    getValue() {
-        return this.options.value;
-    }
 }

packages/fineui/src/case/button/treeitem/treeitem.js

@@ -20,6 +20,8 @@ export class BasicTreeItem extends NodeButton {
             iconWidth: null,
             iconHeight: null,
             iconCls: "",
+            showLine: true,
+            indentWidth: null,
         });
     }
 
@@ -37,14 +39,16 @@ export class BasicTreeItem extends NodeButton {
             py,
             keyword,
             iconCls,
+            showLine,
+            indentWidth
         } = this.options;
 
         const indent = {
             el: {
                 type: Layout.xtype,
                 height,
-                width: height,
-                cls: this.getLineCls(),
+                width: indentWidth ?? height,
+                cls: showLine ? this.getLineCls() : "",
             },
             lgap: layer * SIZE_CONSANTS.LIST_ITEM_HEIGHT / 2, //  偏移公式为每一层的偏移量为节点高度的一半
             width: "",

packages/fineui/src/case/colorchooser/colorchooser.js

@@ -24,6 +24,7 @@ export class ColorChooser extends Widget {
             height: 24,
             el: {},
             simple: false,
+            colorBoardHeight: 80,
         });
     }
 
@@ -62,6 +63,8 @@ export class ColorChooser extends Widget {
                     el: extend(
                         {
                             type: HexColorChooserPopup.xtype,
+                            colorItems: o.colorItems,
+                            colorBoardHeight: o.colorBoardHeight,
                             recommendColorsGetter: o.recommendColorsGetter,
                             ref: _ref => {
                                 this.colorPicker = _ref;

packages/fineui/src/case/colorchooser/colorchooser.popup.hex.js

@@ -22,7 +22,13 @@ import { Label, Combo, TextItem } from "@/base";
 import { PopupPanel } from "../layer";
 import { CustomColorChooser } from "./colorchooser.custom";
 import { ColorChooserPopup } from "./colorchooser.popup";
-import { ColorPickerEditor, ColorPicker, HexColorPicker } from "./colorpicker";
+import {
+    ColorPickerEditor,
+    ColorPicker,
+    HexColorPicker,
+    SimpleHexColorPickerEditor,
+    HexColorPickerEditor
+} from "./colorpicker";
 
 /**
  * @author windy
@@ -41,6 +47,7 @@ export class HexColorChooserPopup extends Widget {
         width: 300,
         recommendColorsGetter: emptyFn, // 推荐色获取接口
         simple: false, // 简单模式, popup中没有自动和透明
+        colorBoardHeight: 80,
     };
 
     render() {
@@ -59,10 +66,12 @@ export class HexColorChooserPopup extends Widget {
                                 extend(
                                     {
                                         type: o.simple
-                                            ? "bi.simple_hex_color_picker_editor"
-                                            : "bi.hex_color_picker_editor",
+                                            ? SimpleHexColorPickerEditor.xtype
+                                            : HexColorPickerEditor.xtype,
                                         value: o.value,
                                         height: o.simple ? 36 : 70,
+                                        transparent: o.transparent,
+                                        auto: o.auto,
                                         listeners: [
                                             {
                                                 eventName: ColorPickerEditor.EVENT_CHANGE,
@@ -159,6 +168,7 @@ export class HexColorChooserPopup extends Widget {
                                                 type: HexColorPicker.xtype,
                                                 space: true,
                                                 value: o.value,
+                                                items: o.colorItems,
                                                 listeners: [
                                                     {
                                                         eventName: ColorPicker.EVENT_CHANGE,
@@ -179,7 +189,7 @@ export class HexColorChooserPopup extends Widget {
                                             bottom: 1,
                                         }
                                     ],
-                                    height: 80,
+                                    height: o.colorBoardHeight,
                                 }
                             ],
                         },

packages/fineui/src/case/colorchooser/colorchooser.trigger.long.js

@@ -27,6 +27,7 @@ export class LongColorChooserTrigger extends Trigger {
     }
 
     _init() {
+        const {height} = this.options;
         super._init(...arguments);
         this.colorContainer = createWidget({
             type: HTapeLayout.xtype,
@@ -51,7 +52,7 @@ export class LongColorChooserTrigger extends Trigger {
                         },
                         textAlign: "left",
                         hgap: 5,
-                        height: 18,
+                        height: height - 4,
                         text: i18nText("BI-Basic_Auto"),
                     },
                 }

packages/fineui/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js

@@ -39,8 +39,10 @@ export class HexColorPickerEditor extends Widget {
     static EVENT_CHANGE = "EVENT_CHANGE";
 
     props = {
-        baseCls: "bi-color-picker-editor",
+        baseCls: "bi-color-picker-editor bi-hex-color-picker-editor",
         height: 30,
+        transparent: true,
+        auto: true,
     };
 
     render() {
@@ -95,23 +97,27 @@ export class HexColorPickerEditor extends Widget {
                                 height: 24,
                                 items: [
                                     {
-                                        type: ColorChooserShowButton.xtype,
-                                        cls: "trans-color-icon",
-                                        height: 22,
-                                        title: i18nText("BI-Transparent_Color"),
-                                        text: i18nText("BI-Transparent_Color"),
-                                        listeners: [
-                                            {
-                                                eventName: ColorChooserShowButton.EVENT_CHANGE,
-                                                action: () => {
-                                                    this.setValue("transparent");
-                                                    this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
-                                                },
-                                            }
-                                        ],
-                                        ref: _ref => {
-                                            this.transparent = _ref;
+                                        el: {
+                                            type: ColorChooserShowButton.xtype,
+                                            cls: "trans-color-icon",
+                                            height: 22,
+                                            title: i18nText("BI-Transparent_Color"),
+                                            text: i18nText("BI-Transparent_Color"),
+                                            invisible: !this.options.transparent,
+                                            listeners: [
+                                                {
+                                                    eventName: ColorChooserShowButton.EVENT_CHANGE,
+                                                    action: () => {
+                                                        this.setValue("transparent");
+                                                        this.fireEvent(ColorPickerEditor.EVENT_CHANGE);
+                                                    },
+                                                }
+                                            ],
+                                            ref: _ref => {
+                                                this.transparent = _ref;
+                                            },
                                         },
+                                        rgap: this.options.auto ? 5 : 0,
                                     },
                                     {
                                         el: {
@@ -120,6 +126,7 @@ export class HexColorPickerEditor extends Widget {
                                             height: 22,
                                             title: i18nText("BI-Basic_Auto"),
                                             text: i18nText("BI-Basic_Auto"),
+                                            invisible: !this.options.auto,
                                             listeners: [
                                                 {
                                                     eventName: ColorChooserShowButton.EVENT_CHANGE,
@@ -133,7 +140,7 @@ export class HexColorPickerEditor extends Widget {
                                                 this.none = _ref;
                                             },
                                         },
-                                        lgap: 10,
+                                        lgap: this.options.transparent ? 5 : 0,
                                     }
                                 ],
                             },
@@ -176,6 +183,9 @@ export class HexColorPickerEditor extends Widget {
                                                 {
                                                     eventName: "EVENT_CHANGE",
                                                     action: () => {
+                                                        if (isEmptyString(this.hexEditor.getValue())) {
+                                                            return;
+                                                        }
                                                         this._checkHexEditor();
                                                         if (
                                                             checker(this.storeValue.r) &&
@@ -261,9 +271,6 @@ export class HexColorPickerEditor extends Widget {
     }
 
     _checkHexEditor() {
-        if (isEmptyString(this.hexEditor.getValue())) {
-            this.hexEditor.setValue("000000");
-        }
         const json = DOM.rgb2json(DOM.hex2rgb(`#${this.hexEditor.getValue()}`));
         this.storeValue = {
             r: json.r || 0,

packages/fineui/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js

@@ -23,7 +23,8 @@ import { TextEditor } from "@/widget/editor/editor.text";
 
 const RGB_WIDTH = 32,
     HEX_WIDTH = 70,
-    HEX_PREFIX_POSITION = 1;
+    HEX_PREFIX_POSITION = 1,
+    DEFAULT_HEX = "ffffff";
 
 /**
  * @author windy
@@ -37,7 +38,7 @@ export class SimpleHexColorPickerEditor extends Widget {
     static EVENT_CHANGE = "EVENT_CHANGE";
 
     props = {
-        baseCls: "bi-color-picker-editor",
+        baseCls: "bi-color-picker-editor bi-simple-hex-color-picker-editor",
         height: 36,
     };
 
@@ -112,6 +113,7 @@ export class SimpleHexColorPickerEditor extends Widget {
                                 errorText: i18nText("BI-Color_Picker_Error_Text_Hex"),
                                 width: HEX_WIDTH,
                                 height: 24,
+                                value: DEFAULT_HEX,
                                 listeners: [
                                     {
                                         eventName: "EVENT_CHANGE",

packages/fineui/src/case/combo/bubblecombo/combo.bubble.js

@@ -27,6 +27,7 @@ export class BubbleCombo extends Widget {
             destroyWhenHide: false,
             hideWhenClickOutside: true,
             hideWhenBlur: true,
+            hideWhenAnotherComboOpen: false,
             isNeedAdjustHeight: true, // 是否需要高度调整
             isNeedAdjustWidth: true,
             stopPropagation: false,

packages/fineui/src/case/combo/bubblecombo/popup.bubble.js

@@ -7,7 +7,7 @@ import { Label } from "@/base/single/label/label";
 @shortcut()
 export class BubblePopupView extends PopupView {
     static xtype = "bi.bubble_popup_view";
-    
+
     _defaultConfig() {
         const config = super._defaultConfig(...arguments);
 
@@ -24,16 +24,16 @@ export class BubblePopupView extends PopupView {
 @shortcut()
 export class BubblePopupBarView extends BubblePopupView {
     static xtype = "bi.bubble_bar_popup_view";
-    
+
     static EVENT_CLICK_TOOLBAR_BUTTON = "EVENT_CLICK_TOOLBAR_BUTTON";
 
-    _defaultConfig () {
+    _defaultConfig() {
         return extend(super._defaultConfig(...arguments), {
             extraCls: "bi-bubble-bar-popup-view",
             buttons: [{
                 value: false,
                 text: i18nText("BI-Basic_Cancel"),
-                level: "ignore",
+                light: true,
             }, {
                 text: i18nText(i18nText("BI-Basic_OK")),
                 value: true,
@@ -43,7 +43,7 @@ export class BubblePopupBarView extends BubblePopupView {
         });
     }
 
-    _createToolBar () {
+    _createToolBar() {
         const o = this.options;
 
         const items = [];
@@ -66,7 +66,7 @@ export class BubblePopupBarView extends BubblePopupView {
                 });
             }
         });
-        
+
         return createWidget({
             type: "bi.right_vertical_adapt",
             innerVgap: o.innerVgap,
@@ -75,11 +75,11 @@ export class BubblePopupBarView extends BubblePopupView {
         });
     }
 
-    _createContent () {
+    _createContent() {
         return this.options.el;
     }
 
-    _createView () {
+    _createView() {
         const o = this.options;
 
         const view = createWidget({
@@ -99,21 +99,21 @@ export class BubblePopupBarView extends BubblePopupView {
 @shortcut()
 export class TextBubblePopupBarView extends BubblePopupBarView {
     static xtype = "bi.text_bubble_bar_popup_view";
-    
+
     static EVENT_CHANGE = "EVENT_CLICK_TOOLBAR_BUTTON";
-    
-    _defaultConfig () {
+
+    _defaultConfig() {
         const config = super._defaultConfig(...arguments);
-        
+
         return extend(config, {
             baseCls: `${config.baseCls} bi-text-bubble-bar-popup-view`,
             text: "",
         });
     }
 
-    _createContent () {
+    _createContent() {
         const o = this.options;
-        
+
         return {
             type: Label.xtype,
             text: o.text,
@@ -125,7 +125,7 @@ export class TextBubblePopupBarView extends BubblePopupBarView {
         };
     }
 
-    populate (v) {
+    populate(v) {
         this.text.setText(v || this.options.text);
     }
 }

packages/fineui/src/case/combo/textvaluecombo/combo.textvalue.js

@@ -144,8 +144,8 @@ export class TextValueCombo extends Widget {
 
         return {
             type: Combo.xtype,
-            height: toPix(o.height, 2),
-            width: toPix(o.width, 2),
+            height: toPix(o.height, o.simple ? 1 : 2),
+            width: toPix(o.width, o.simple ? 0 : 2),
             ref: ref => (this.combo = ref),
             container: o.container,
             direction: o.direction,
@@ -216,6 +216,7 @@ export class TextValueCombo extends Widget {
     }
 
     setValue(v) {
+        this.options.value = v;
         this.combo.setValue(v);
         this._checkError(v);
     }

packages/fineui/src/case/list/list.select.js

@@ -71,10 +71,12 @@ export class SelectList extends Widget {
             itemsCreator: (op, callback) => {
                 op.times === 1 && this.toolbar.setVisible(false);
                 o.itemsCreator(op, (items, keywords, context, ...args) => {
-                    callback(items, keywords, context, ...args);
+                    const tipText = get(context, "tipText", "");
+                    const isEmptyTipText = isEmptyString(tipText);
+                    // tipText 和 items 本身就是互斥的
+                    callback(isEmptyTipText ? items : [], keywords, context, ...args);
                     if (op.times === 1) {
-                        const tipText = get(context, "tipText", "");
-                        const visible = isEmptyString(tipText) && items && items.length > 0;
+                        const visible = isEmptyTipText && items && items.length > 0;
                         this.toolbar.setVisible(visible);
                         this.toolbar.setEnable(this.isEnabled() && visible);
                     }

packages/fineui/src/case/pager/pager.direction.js

@@ -40,6 +40,11 @@ export class DirectionPager extends Widget {
     }
     _init() {
         super._init(...arguments);
+
+        this.ITEM_GAP = 0;
+        this.ITEM_WIDTH = this.options.height - 2 * this.ITEM_GAP;
+        this.MIDDLE_GAP = 16;
+
         this._createVPager();
         this._createHPager();
         this.layout = createWidget({
@@ -49,23 +54,23 @@ export class DirectionPager extends Widget {
             items: [
                 {
                     el: this.vpager,
-                    top: 0,
-                    right: 86,
+                    top: this.ITEM_GAP,
+                    right: this.ITEM_WIDTH * 3 + this.MIDDLE_GAP,
                 },
                 {
                     el: this.vlabel,
-                    top: 0,
-                    right: 110,
+                    top: this.ITEM_GAP,
+                    right: this.ITEM_WIDTH * 4 + this.MIDDLE_GAP,
                 },
                 {
                     el: this.hpager,
-                    top: 0,
+                    top: this.ITEM_GAP,
                     right: 0,
                 },
                 {
                     el: this.hlabel,
-                    top: 0,
-                    right: 24,
+                    top: this.ITEM_GAP,
+                    right: this.ITEM_WIDTH,
                 }
             ],
         });
@@ -75,20 +80,20 @@ export class DirectionPager extends Widget {
         const v = this.options.vertical;
         this.vlabel = createWidget({
             type: Label.xtype,
-            width: 24,
-            height: 24,
+            width: this.ITEM_WIDTH,
+            height: this.ITEM_WIDTH,
             value: v.curr,
             title: v.curr,
             invisible: true,
         });
         this.vpager = createWidget({
             type: Pager.xtype,
-            width: 72,
+            width: this.ITEM_WIDTH * 3,
             layouts: [
                 {
                     type: HorizontalLayout.xtype,
                     scrollx: false,
-                    rgap: 24,
+                    rgap: this.ITEM_WIDTH,
                 }
             ],
             invisible: true,
@@ -105,8 +110,8 @@ export class DirectionPager extends Widget {
                 value: "prev",
                 title: i18nText("BI-Up_Page"),
                 warningTitle: i18nText("BI-Current_Is_First_Page"),
-                height: 22,
-                width: 22,
+                height: this.ITEM_WIDTH - 2,
+                width: this.ITEM_WIDTH - 2,
                 cls: "bi-border bi-border-radius direction-pager-prev column-pre-page-h-font bi-list-item-select2",
             },
             next: {
@@ -114,8 +119,8 @@ export class DirectionPager extends Widget {
                 value: "next",
                 title: i18nText("BI-Down_Page"),
                 warningTitle: i18nText("BI-Current_Is_Last_Page"),
-                height: 22,
-                width: 22,
+                height: this.ITEM_WIDTH - 2,
+                width: this.ITEM_WIDTH - 2,
                 cls: "bi-border bi-border-radius direction-pager-next column-next-page-h-font bi-list-item-select2",
             },
 
@@ -137,20 +142,20 @@ export class DirectionPager extends Widget {
         const h = this.options.horizontal;
         this.hlabel = createWidget({
             type: Label.xtype,
-            width: 24,
-            height: 24,
+            width: this.ITEM_WIDTH,
+            height: this.ITEM_WIDTH,
             value: h.curr,
             title: h.curr,
             invisible: true,
         });
         this.hpager = createWidget({
             type: Pager.xtype,
-            width: 72,
+            width: this.ITEM_WIDTH * 3,
             layouts: [
                 {
                     type: HorizontalLayout.xtype,
                     scrollx: false,
-                    rgap: 24,
+                    rgap: this.ITEM_WIDTH,
                 }
             ],
             invisible: true,
@@ -167,8 +172,8 @@ export class DirectionPager extends Widget {
                 value: "prev",
                 title: i18nText("BI-Left_Page"),
                 warningTitle: i18nText("BI-Current_Is_First_Page"),
-                height: 22,
-                width: 22,
+                height: this.ITEM_WIDTH - 2,
+                width: this.ITEM_WIDTH - 2,
                 cls: "bi-border bi-border-radius direction-pager-prev row-pre-page-h-font bi-list-item-select2",
             },
             next: {
@@ -176,8 +181,8 @@ export class DirectionPager extends Widget {
                 value: "next",
                 title: i18nText("BI-Right_Page"),
                 warningTitle: i18nText("BI-Current_Is_Last_Page"),
-                height: 22,
-                width: 22,
+                height: this.ITEM_WIDTH - 2,
+                width: this.ITEM_WIDTH - 2,
                 cls: "bi-border bi-border-radius direction-pager-next row-next-page-h-font bi-list-item-select2",
             },
 
@@ -260,7 +265,7 @@ export class DirectionPager extends Widget {
             vShow = true;
         }
         this.setVisible(hShow || vShow);
-        const num = [86, 110, 0, 24];
+        const num = [this.ITEM_WIDTH * 3 + this.MIDDLE_GAP, this.ITEM_WIDTH * 4 + this.MIDDLE_GAP, 0, this.ITEM_WIDTH];
         const items = this.layout.attr("items");
 
         if (vShow === true && hShow === true) {

packages/fineui/src/case/ztree/asynctree.js

@@ -1,7 +1,19 @@
-import { cjkEncodeDO, deepClone, each, extend, isEmpty, isNotNull, isNull, shortcut } from "@/core";
+import {
+    cjkEncodeDO,
+    deepClone,
+    each,
+    extend,
+    isEmpty,
+    isNotNull,
+    isNull,
+    shortcut,
+    AbsoluteLayout,
+    createWidget,
+} from "@/core";
 import { TreeView } from "./treeview";
 import { TreeRenderPageService } from "./treerender.page.service";
 import $ from "jquery";
+import { IconLabel } from "@/base";
 
 @shortcut()
 export class AsyncTree extends TreeView {
@@ -197,7 +209,34 @@ export class AsyncTree extends TreeView {
                 },
                 options
             );
-            o.itemsCreator(op, complete);
+
+            let loadingIcon;
+            createWidget({
+                type: AbsoluteLayout.xtype,
+                element: self.element.find(`#${treeNode.tId}`),
+                css: {
+                    position: "relative",
+                },
+                items: [
+                    {
+                        el: {
+                            type: IconLabel.xtype,
+                            width: 20,
+                            height: 20,
+                            cls: "button-loading-font anim-rotate bi-card",
+                            ref: ref => {
+                                loadingIcon = ref;
+                            },
+                        },
+                        left: 5,
+                        top: 5,
+                    },
+                ],
+            });
+            o.itemsCreator(op, (...args) => {
+                complete.apply(this, args);
+                loadingIcon.destroy();
+            });
         }
 
         // 展开节点会将halfCheck置为false以开启自动计算半选, 所以第一次展开节点的时候需要在置为false之前获取配置

packages/fineui/src/case/ztree/list/listasynctree.js

@@ -1,4 +1,4 @@
-import { Listtreeview } from "./listtreeview";
+import { ListTreeView } from "./listtreeview";
 import { cjkEncodeDO, delay, isEmpty, shortcut, extend } from "@/core";
 import $ from "jquery";
 
@@ -11,7 +11,7 @@ import $ from "jquery";
  */
 
 @shortcut()
-export class Listasynctree extends Listtreeview {
+export class ListAsyncTree extends ListTreeView {
     static xtype = "bi.list_async_tree";
 
     // 配置属性

packages/fineui/src/case/ztree/list/listparttree.js

@@ -1,4 +1,4 @@
-import { Listasynctree } from "./listasynctree";
+import { ListAsyncTree } from "./listasynctree";
 import { shortcut, extend, Events, delay } from "@/core";
 import { TreeView } from "../treeview";
 import $ from "jquery";
@@ -11,7 +11,7 @@ import $ from "jquery";
  */
 
 @shortcut()
-export class ListPartTree extends Listasynctree {
+export class ListPartTree extends ListAsyncTree {
     static xtype = "bi.list_part_tree";
 
     _loadMore() {

packages/fineui/src/case/ztree/list/listtreeview.js

@@ -11,7 +11,7 @@ import $ from "jquery";
  */
 
 @shortcut()
-export class Listtreeview extends TreeView {
+export class ListTreeView extends TreeView {
     static xtype = "bi.list_tree_view";
 
     _constants = {

packages/fineui/src/case/ztree/parttree.js

@@ -16,9 +16,15 @@ export class PartTree extends AsyncTree {
 
     static EVENT_CLICK_TREE_NODE = "EVENT_CLICK_TREE_NODE";
 
+    _defaultConfig() {
+        return extend(super._defaultConfig(...arguments), {
+            isSelectedAny: true, //是否返回所有被checked的结点(包括被checked的结点的子结点)
+        });
+    }
+
     constructor(...args) {
         super(...args);
-        this.seMethos = super._selectTreeNode;
+        this.seMethos = AsyncTree.superclass._selectTreeNode;
     }
 
     _loadMore() {
@@ -55,8 +61,11 @@ export class PartTree extends AsyncTree {
         const name = this._getNodeValue(treeNode);
         this.fireEvent(PartTree.EVENT_CLICK_TREE_NODE);
         if (treeNode.checked === true) {
-            this.options.paras.selectedValues = this._getUnionValue();
-            // this._buildTree(self.options.paras.selectedValues, concat(parentValues, name));
+            if (this.options.isSelectedAny) {
+                this.options.paras.selectedValues = this._getUnionValue(); //获取所有被selected的结点
+            } else {
+                this._addTreeNode(this.options.paras.selectedValues, parentValues, name, {});//给selectedValues增加被click的结点（不包含该节点的子结点）
+            }
             o.itemsCreator(
                 extend({}, o.paras, {
                     type: TreeView.REQ_TYPE_ADJUST_DATA,

packages/fineui/src/case/ztree/tree.list.display.js

@@ -1,4 +1,4 @@
-import { Listtreeview } from "./list/listtreeview";
+import { ListTreeView } from "./list/listtreeview";
 import { each, shortcut, i18nText } from "@/core";
 import $ from "jquery";
 
@@ -10,7 +10,7 @@ import $ from "jquery";
  */
 
 @shortcut()
-export class ListDisplayTree extends Listtreeview {
+export class ListDisplayTree extends ListTreeView {
     static xtype = "bi.list_display_tree";
     static EVENT_CHANGE = "EVENT_CHANGE";
 

packages/fineui/src/component/form/form.field.js

@@ -69,7 +69,7 @@ export class FormField extends Widget {
 
         return {
             type: VerticalAdaptLayout.xtype,
-            columnSize: ["auto", "fill"],
+            columnSize: isKey(o.label) ? ["auto", "fill"] : ["fill"],
             verticalAlign: VerticalAlign.Stretch,
             items: isKey(o.label)
                 ? [

packages/fineui/src/component/treevaluechooser/abstract.treevaluechooser.js

@@ -169,11 +169,13 @@ export class AbstractTreeValueChooser extends Widget {
                 value: node.value,
                 open: true,
                 disabled: node.disabled,
+                iconCls: node.iconCls,
             });
         }
     }
 
     _reqSelectedTreeNode(op, callback) {
+        const self = this;
         const selectedValues = deepClone(op.selectedValues);
         const notSelectedValue = op.notSelectedValue || {};
         const keyword = op.keyword || "";
@@ -188,7 +190,7 @@ export class AbstractTreeValueChooser extends Widget {
         dealWithSelectedValues(selectedValues);
         callback(selectedValues);
 
-        const dealWithSelectedValues = selectedValues => {
+        function dealWithSelectedValues(selectedValues) {
             let p = parentValues.concat(notSelectedValue);
             // 存储的值中存在这个值就把它删掉
             // 例如选中了中国-江苏-南京， 取消中国或江苏或南京
@@ -197,18 +199,18 @@ export class AbstractTreeValueChooser extends Widget {
                 // 如果搜索的值在父亲链中
                 if (isSearchValueInParent(p)) {
                     // 例如选中了 中国-江苏， 搜索江苏， 取消江苏(干掉了江苏)
-                    this._deleteNode(selectedValues, p);
+                    self._deleteNode(selectedValues, p);
                 } else {
                     const searched = [];
                     // 要找到所有以notSelectedValue为叶子节点的链路
                     const find = search(parentValues, notSelectedValue, [], searched);
                     if (find && isNotEmptyArray(searched)) {
                         each(searched, (i, arr) => {
-                            const node = this._getNode(selectedValues, arr);
+                            const node = self._getNode(selectedValues, arr);
                             if (node) {
                                 // 例如选中了 中国-江苏， 搜索江苏， 取消中国（实际上只想删除中国-江苏，因为搜的是江苏）
                                 // 例如选中了 中国-江苏-南京，搜索南京，取消中国（实际上只想删除中国-江苏-南京，因为搜的是南京）
-                                this._deleteNode(selectedValues, arr);
+                                self._deleteNode(selectedValues, arr);
                             } else {
                                 // 例如选中了 中国-江苏，搜索南京，取消中国（实际上只想删除中国-江苏-南京，因为搜的是南京）
                                 expandSelectedValue(selectedValues, arr, last(arr));
@@ -239,14 +241,14 @@ export class AbstractTreeValueChooser extends Widget {
                     // 添加去掉搜索的结果集
                     if (result.length > 0) {
                         each(result, (i, strs) => {
-                            this._buildTree(selectedValues, strs);
+                            self._buildTree(selectedValues, strs);
                         });
                     }
                 }
             }
         };
 
-        const expandSelectedValue = (selectedValues, parents, notSelectedValue) => {
+        function expandSelectedValue(selectedValues, parents, notSelectedValue) {
             let next = selectedValues;
             const childrenCount = [];
             const path = [];
@@ -259,7 +261,7 @@ export class AbstractTreeValueChooser extends Widget {
                     }
                     if (isEmpty(next)) {
                         const split = parents.slice(0, i);
-                        const expanded = this._getChildren(split);
+                        const expanded = self._getChildren(split);
                         path.push(split);
                         childrenCount.push(expanded.length);
                         // 如果只有一个值且取消的就是这个值
@@ -270,7 +272,7 @@ export class AbstractTreeValueChooser extends Widget {
                         ) {
                             for (let j = childrenCount.length - 1; j >= 0; j--) {
                                 if (childrenCount[j] === 1) {
-                                    this._deleteNode(selectedValues, path[j]);
+                                    self._deleteNode(selectedValues, path[j]);
                                 } else {
                                     break;
                                 }
@@ -295,16 +297,16 @@ export class AbstractTreeValueChooser extends Widget {
             });
         };
 
-        const search = (parents, current, result, searched) => {
+        function search(parents, current, result, searched) {
             const newParents = clone(parents);
             newParents.push(current);
-            if (this._isMatch(parents, current, keyword)) {
+            if (self._isMatch(parents, current, keyword)) {
                 searched && searched.push(newParents);
 
                 return true;
             }
 
-            const children = this._getChildren(newParents);
+            const children = self._getChildren(newParents);
 
             const notSearch = [];
             let can = false;
@@ -327,9 +329,9 @@ export class AbstractTreeValueChooser extends Widget {
             return can;
         };
 
-        const isSearchValueInParent = parentValues => {
+        function isSearchValueInParent(parentValues) {
             for (let i = 0, len = parentValues.length; i < len; i++) {
-                if (this._isMatch(parentValues.slice(0, i), parentValues[i], keyword)) {
+                if (self._isMatch(parentValues.slice(0, i), parentValues[i], keyword)) {
                     return true;
                 }
             }
@@ -389,7 +391,7 @@ export class AbstractTreeValueChooser extends Widget {
             each(selected, (k, v) => {
                 const p = clone(parents);
                 p.push(k);
-                if (!dealWithSelectedValues(selected[k], p)) {
+                if (!dealWithSelectedValues(selected[k], p) || op.searcherPaneAutoShrink === false) {
                     each(selected[k], (nk, nv) => {
                         const t = clone(p);
                         t.push(nk);
@@ -428,7 +430,7 @@ export class AbstractTreeValueChooser extends Widget {
             });
         });
 
-        function search(){
+        function search() {
             const children = self._getChildren([]);
             let start = children.length;
             if (lastSearchValue !== "") {
@@ -530,6 +532,7 @@ export class AbstractTreeValueChooser extends Widget {
                 halfCheck: half,
                 flag,
                 disabled: node.disabled,
+                iconCls: node.iconCls,
             });
         }
 
@@ -701,6 +704,7 @@ export class AbstractTreeValueChooser extends Widget {
                     disabled: nodes[i].disabled,
                     title: nodes[i].title || nodes[i].text,
                     warningTitle: nodes[i].warningTitle,
+                    iconCls: nodes[i].iconCls,
                 });
                 if (openState) {
                     getResult(parentValues.concat([nodes[i].value]), { checked: state[0], half: state[1] });

packages/fineui/src/component/treevaluechooser/abstract.treevaluechooser.list.js

@@ -31,7 +31,7 @@ export class AbstractListTreeValueChooser extends AbstractTreeValueChooser {
             return;
         }
 
-        doCheck([], this.tree.getRoot(), selectedValues);
+        doCheck.call(this, [], this.tree.getRoot(), selectedValues);
 
         callback({
             items: values(result),
@@ -76,6 +76,7 @@ export class AbstractListTreeValueChooser extends AbstractTreeValueChooser {
     }
 
     _reqInitTreeNode(op, callback) {
+        const self = this;
         let result = [];
         const keyword = op.keyword || "";
         const selectedValues = op.selectedValues;
@@ -89,8 +90,8 @@ export class AbstractListTreeValueChooser extends AbstractTreeValueChooser {
             });
         });
 
-        const search = () => {
-            const children = this._getChildren([]);
+        function search() {
+            const children = self._getChildren([]);
             let start = children.length;
             if (lastSearchValue !== "") {
                 for (let j = 0, len = start; j < len; j++) {
@@ -105,22 +106,22 @@ export class AbstractListTreeValueChooser extends AbstractTreeValueChooser {
             const output = [];
             let find;
             for (let i = start, len = children.length; i < len; i++) {
-                if (output.length < this._const.perPage) {
+                if (output.length < self._const.perPage) {
                     find = nodeSearch(1, [], children[i].value, result);
-                } else if (output.length === this._const.perPage) {
+                } else if (output.length === self._const.perPage) {
                     find = nodeSearch(1, [], children[i].value, []);
                 }
                 if (find[0] === true) {
                     output.push(children[i].value);
                 }
-                if (output.length > this._const.perPage) {
+                if (output.length > self._const.perPage) {
                     break;
                 }
             }
 
             // 深层嵌套的比较麻烦，这边先实现的是在根节点添加
             if (op.times === 1) {
-                const nodes = this._getAddedValueNode([], selectedValues);
+                const nodes = self._getAddedValueNode([], selectedValues);
                 result = concat(
                     filter(nodes, (idx, node) => {
                         const find = Func.getSearchResult([node.text || node.value], keyword);
@@ -134,8 +135,8 @@ export class AbstractListTreeValueChooser extends AbstractTreeValueChooser {
             return output;
         };
 
-        const createOneJson = (parentValues, value, isOpen, checked, flag, result) => {
-            const node = this._getTreeNode(parentValues, value);
+        function createOneJson(parentValues, value, isOpen, checked, flag, result) {
+            const node = self._getTreeNode(parentValues, value);
             result.push({
                 id: node.id,
                 pId: node.pId,
@@ -151,9 +152,9 @@ export class AbstractListTreeValueChooser extends AbstractTreeValueChooser {
             });
         };
 
-        const nodeSearch = (deep, parentValues, current, result) => {
+        function nodeSearch(deep, parentValues, current, result) {
             let checked;
-            if (this._isMatch(parentValues, current, keyword)) {
+            if (self._isMatch(parentValues, current, keyword)) {
                 checked = isSelected(parentValues, current);
                 createOneJson(parentValues, current, false, checked, true, result);
                 
@@ -161,7 +162,7 @@ export class AbstractListTreeValueChooser extends AbstractTreeValueChooser {
             }
             const newParents = clone(parentValues);
             newParents.push(current);
-            const children = this._getChildren(newParents);
+            const children = self._getChildren(newParents);
 
             let can = false;
             checked = false;

packages/fineui/src/component/treevaluechooser/pane.treevaluechooser.js

@@ -15,6 +15,10 @@ export class TreeValueChooserPane extends AbstractTreeValueChooser {
             items: null,
             itemsCreator: emptyFn,
             showLine: true,
+            showIcon: false,
+            //searcherPaneAutoShrink和searcherPaneIsSelectedAny同时为false时，返回值和非搜索状态下的树逻辑一致
+            searcherPaneAutoShrink: true,//其搜索树是否会判别子结点全选则取父结点的值
+            searcherPaneIsSelectedAny: true, //其搜索树是否返回所有被checked的结点(包括被checked的结点的子结点)
         });
     }
 
@@ -25,7 +29,12 @@ export class TreeValueChooserPane extends AbstractTreeValueChooser {
             type: o.hideSearch ? MultiSelectTreePopup.xtype : MultiSelectTree.xtype,
             element: this,
             showLine: o.showLine,
-            itemsCreator: bind(this._itemsCreator, this),
+            showIcon: o.showIcon,
+            searcherPaneIsSelectedAny: o.hideSearch || o.searcherPaneIsSelectedAny,
+            itemsCreator: (options, callback) => {
+                options.searcherPaneAutoShrink = o.hideSearch || o.searcherPaneAutoShrink;
+                this._itemsCreator.call(this, options, callback);
+            },
         });
 
         this.pane.on(MultiSelectTree.EVENT_CHANGE, () => {

packages/fineui/src/core/1.lodash.js

@@ -6142,6 +6142,30 @@
         return (array && array.length) ? baseUniq(array, baseIteratee(iteratee, 2)) : [];
     }
 
+    /**
+     * This method is like `uniq` except that it accepts `comparator` which
+     * is invoked to compare elements of `array`. The order of result values is
+     * determined by the order they occur in the array. The comparator is invoked
+     * with two arguments: (arrVal, othVal).
+     *
+     * @since 4.0.0
+     * @category Array
+     * @param {Array} array The array to inspect.
+     * @param {Function} [comparator] The comparator invoked per element.
+     * @returns {Array} Returns the new duplicate free array.
+     * @see uniq, uniqBy
+     * @example
+     *
+     * const objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }]
+     *
+     * uniqWith(objects, isEqual)
+     * // => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]
+     */
+    function uniqWith(array, comparator) {
+        comparator = typeof comparator === 'function' ? comparator : undefined;
+        return (array && array.length) ? baseUniq(array, undefined, comparator) : [];
+    }
+
     /**
      * This method is like `_.zip` except that it accepts an array of grouped
      * elements and creates an array regrouping the elements to their pre-zip
@@ -10041,6 +10065,7 @@
     lodash.union = union;
     lodash.uniq = uniq;
     lodash.uniqBy = uniqBy;
+    lodash.uniqWith = uniqWith;
     lodash.unzip = unzip;
     lodash.values = values;
     lodash.without = without;

packages/fineui/src/core/2.base.js

@@ -482,6 +482,7 @@ _.each(
         "take",
         "takeRight",
         "uniqBy",
+        "uniqWith"
     ],
     name => {
         lodashFns[name] = _apply(name);
@@ -510,6 +511,7 @@ export const range = lodashFns.range;
 export const take = lodashFns.take;
 export const takeRight = lodashFns.takeRight;
 export const uniqBy = lodashFns.uniqBy;
+export const uniqWith = lodashFns.uniqWith;
 export const findIndex = lodashFns.findIndex;
 export const findLastIndex = lodashFns.findLastIndex;
 
@@ -912,7 +914,8 @@ export const delay = lodashFns.delay;
 export const defer = lodashFns.defer;
 export const wrap = lodashFns.wrap;
 
-export const nextTick = (function () {
+
+export let nextTick = /*!PURE*/(function () {
     const callbacks = [];
     let pending = false;
     let timerFunc = void 0;
@@ -971,7 +974,7 @@ export const nextTick = (function () {
             pending = true;
             timerFunc();
         }
-        // $flow-disable-line
+
         if (!cb && typeof Promise !== "undefined") {
             return new Promise((resolve, reject) => {
                 _resolve = resolve;
@@ -980,6 +983,10 @@ export const nextTick = (function () {
     };
 })();
 
+export const setNextTick = (fn) => {
+    nextTick = fn;
+}
+
 // 数字相关方法
 _.each(["random"], name => {
     lodashFns[name] = _apply(name);
@@ -1362,7 +1369,7 @@ export function parseDateTime(str, fmt) {
         m = today.getMonth();
     }
     if (_global.isNaN(d)) {
-        d = Math.min(getMonthDays(getDate(y, m)), today.getDate());
+        d = 1;
     }
     if (_global.isNaN(hr)) {
         hr = today.getHours();
@@ -1511,7 +1518,7 @@ export function getTime() {
     }
     if (isNotNull(BI.timeZone)) {
         // BI-33791 1901年以前的东8区标准是GMT+0805, 统一无论是什么时间，都以整的0800这样的为基准
-        return dt.getTime() - BI.timeZone - new Date().getTimezoneOffset() * 60000;
+        return dt.getTime() + BI.timeZone + new Date().getTimezoneOffset() * 60000;
     }
 
     return dt.getTime();

packages/fineui/src/core/3.ob.js

@@ -155,7 +155,7 @@ export class OB {
         eventName = eventName.toLowerCase();
 
         /* alex:如果fn是null,就是把eventName上面所有方法都un掉*/
-        if (fn === null) {
+        if (!fn) {
             delete this._getEvents()[eventName];
         } else {
             const fns = this._getEvents()[eventName];

packages/fineui/src/core/4.widget.js

@@ -25,7 +25,7 @@ import {
 import { OB } from "./3.ob";
 import { Providers, _lazyCreateWidget } from "./5.inject";
 import { DOM } from "./utils";
-import { Events, emptyFn, pixFormat } from "./constant";
+import { Events, pixFormat } from "./constant";
 import { Plugin } from "./6.plugin";
 import { _global } from "./0.foundation";
 import { SystemProvider } from "./system";
@@ -241,7 +241,8 @@ export class Widget extends OB {
                 if (beforeRenderResult instanceof Promise) {
                     beforeRenderResult.then(render).catch((e) => {
                         _global.console && console.error(e);
-                        render();
+                        // 异步render，组件此时可能已经被销毁
+                        !this.isDestroyed() ? render() : _global.console && console.error('Async render error! Widget has been destroyed!');
                     });
                 }
             } else {
@@ -258,7 +259,8 @@ export class Widget extends OB {
             if (beforeInitResult instanceof Promise) {
                 beforeInitResult.then(init).catch((e) => {
                     _global.console && console.error(e);
-                    init();
+                    // 异步init，组件此时可能已经被销毁
+                    !this.isDestroyed() ? init() : _global.console && console.error('Async init error! Widget has been destroyed!');
                 });
             }
         } else {
@@ -336,29 +338,6 @@ export class Widget extends OB {
         }
     }
 
-    __watch(getter, handler, options) {
-        if (_global.Fix) {
-            this._watchers = this._watchers || [];
-            const watcher = new Fix.Watcher(
-                null,
-                () => getter.call(this, this),
-                (handler &&
-                    ((v) => {
-                        handler.call(this, this, v);
-                    })) ||
-                emptyFn,
-                extend({ deep: true }, options)
-            );
-            this._watchers.push(() => {
-                watcher.teardown();
-            });
-
-            return watcher.value;
-        } else {
-            return getter();
-        }
-    }
-
     /**
      * 初始化根节点
      * @private
@@ -891,13 +870,13 @@ export class Widget extends OB {
         callLifeHook(this, "destroyed");
         this.destroyed = null;
         this._isDestroyed = true;
-        // this._purgeRef();  // 清除ref的时机还是要仔细考虑一下
     }
 
     _unMount() {
         this._assetMounted();
         this.__destroy();
         this.fireEvent(Events.UNMOUNT);
+        // this._purgeRef(); // 子组件unmount ref置为null了，父组件拿不到ref，导致报错
         this.purgeListeners();
     }
 

packages/fineui/src/core/5.inject.js

@@ -601,3 +601,12 @@ export function getResource(type, config) {
     }
     throw new Error("unknown type: [" + type + "] undefined");
 }
+
+/**
+ * 根据 xtype 获取已被注册的类
+ * @param {string} xtype 
+ * @returns 
+ */
+export function getClass(xtype) {
+    return kv[xtype] || serviceInjection[xtype];
+} 

packages/fineui/src/core/constant/writable.var.js

@@ -1,76 +1,72 @@
 /**
  * 可写的常量
  */
-import { isNumber } from "../2.base";
+import { isNumber, nextTick, setNextTick } from "../2.base";
 import { _global } from "../0.foundation";
 import { Cache } from "../structure";
+import { Element, setElement } from "../element/element";
+import { setDom, DOM } from "../utils";
 
 const PropertyDescriptors = {};
 
+export function _defineVarProperties(libName) {
+    Object.defineProperties(libName, PropertyDescriptors);
+}
+
+function addDescriptor(key, options) {
+    options.enumerable = options.enumerable === undefined ? true : options.enumerable;
+    options.configurable = options.configurable === undefined ? true : options.configurable;
+    PropertyDescriptors[key] = options;
+}
+
 export let EVENT_RESPONSE_TIME = 200;
 export const setEventResponseTime = v => {
     EVENT_RESPONSE_TIME = v;
 };
-PropertyDescriptors["EVENT_RESPONSE_TIME"] = {
-    enumerable: true,
-    configurable: true,
-    get: function () {
-        return EVENT_RESPONSE_TIME;
-    },
+addDescriptor("EVENT_RESPONSE_TIME", {
+    get: () => EVENT_RESPONSE_TIME,
     set: setEventResponseTime,
-};
+});
 
 export let pixUnit = "px";
 export const setPixUnit = v => {
     pixUnit = v;
 };
-PropertyDescriptors["pixUnit"] = {
-    enumerable: true,
-    configurable: true,
-    get: function () {
-        return pixUnit;
-    },
+addDescriptor("pixUnit", {
+    get: () => pixUnit,
     set: setPixUnit,
-};
+});
 
 export let pixRatio = 1;
 export const setPixRatio = v => {
     pixRatio = v;
 };
-PropertyDescriptors["pixRatio"] = {
-    enumerable: true,
-    configurable: true,
-    get: function () {
-        return pixRatio;
-    },
+addDescriptor("pixRatio", {
+    get: () => pixRatio,
     set: setPixRatio,
-};
+});
 
 export let StartOfWeek = 1;
 export const setStartOfWeek = v => {
+    if (![0, 1].includes(v)) {
+        console.error("setStartOfWeek must be 0 or 1");
+        return;
+    }
     StartOfWeek = v;
 };
-PropertyDescriptors["StartOfWeek"] = {
-    enumerable: true,
-    configurable: true,
-    get: function () {
-        return StartOfWeek;
-    },
+addDescriptor("StartOfWeek", {
+    get: () => StartOfWeek,
     set: setStartOfWeek,
-};
+});
 
 export let BlankSplitChar = "\u200b \u200b";
 export const setBlankSplitChar = v => {
     BlankSplitChar = v;
 };
-PropertyDescriptors["BlankSplitChar"] = {
-    enumerable: true,
-    configurable: true,
-    get: function () {
-        return BlankSplitChar;
-    },
+addDescriptor("BlankSplitChar", {
+    get: () => BlankSplitChar,
     set: setBlankSplitChar,
-};
+});
 
 // 一定返回最终的单位
 export let pixFormat = (pix, border) => {
@@ -90,14 +86,10 @@ export let pixFormat = (pix, border) => {
 export const setPixFormat = v => {
     pixFormat = v;
 };
-PropertyDescriptors["pixFormat"] = {
-    enumerable: true,
-    configurable: true,
-    get: function () {
-        return pixFormat;
-    },
+addDescriptor("pixFormat", {
+    get: () => pixFormat,
     set: setPixFormat,
-};
+});
 
 export let toPix = (pix, border) => {
     if (!isNumber(pix)) {
@@ -115,14 +107,10 @@ export let toPix = (pix, border) => {
 export let setToPix = v => {
     toPix = v;
 };
-PropertyDescriptors["toPix"] = {
-    enumerable: true,
-    configurable: true,
-    get: function () {
-        return toPix;
-    },
+addDescriptor("toPix", {
+    get: () => toPix,
     set: setToPix,
-};
+});
 
 const getCacheItem = key => {
     Cache.getItem(key, { typeConversion: true, defaultValue: true });
@@ -132,15 +120,22 @@ export const setEventBlur = v => {
     EVENT_BLUR = v;
     Cache.setItem("event.blur", v);
 };
-PropertyDescriptors["EVENT_BLUR"] = {
-    enumerable: true,
-    configurable: true,
-    get: function () {
-        return EVENT_BLUR;
-    },
+addDescriptor("EVENT_BLUR", {
+    get: () => EVENT_BLUR,
     set: setEventBlur,
-};
+});
 
-export function _defineVarProperties(libName) {
-    Object.defineProperties(libName, PropertyDescriptors);
-}
+addDescriptor("Element", {
+    get: () => Element,
+    set: setElement,
+});
+
+addDescriptor("DOM", {
+    get: () => DOM,
+    set: setDom,
+});
+
+addDescriptor("nextTick", {
+    get: () => nextTick,
+    set: setNextTick,
+});

packages/fineui/src/core/controller/controller.layer.js

@@ -8,7 +8,7 @@ import { isNull, isNotNull, each, keys, isWidget, isNotEmptyString, extend, bind
 import { Widget } from "../4.widget";
 import { createWidget } from "../5.inject";
 import { zIndex_layer } from "../constant";
-import { DOM } from "../utils";
+import { getPositionRelativeContainingBlockRect, getOuterBody } from "../utils/dom";
 
 export class LayerController extends Controller {
     constructor(Resizers) {
@@ -63,7 +63,7 @@ export class LayerController extends Controller {
             w = from.element;
         }
         if (isNotEmptyString(w)) {
-            w = Widget._renderEngine.createElement(w);
+            w = Widget._renderEngine.createElement(w === 'body' ? getOuterBody() : w);
         }
         if (this.has(name)) {
             return this.get(name);
@@ -86,7 +86,7 @@ export class LayerController extends Controller {
         }, context);
         createWidget({
             type: "bi.absolute",
-            element: op.container || this.options.render,
+            element: op.container || this.getRender(),
             items: [
                 {
                     el: layout,
@@ -108,7 +108,7 @@ export class LayerController extends Controller {
                     height: offset.height || (w.outerHeight() - (offset.top || 0) - (offset.bottom || 0)) || "",
                 };
 
-                const { top, left, scaleY, scaleX } = DOM.getPositionRelativeContainingBlockRect(layout.element[0]);
+                const { top, left, scaleY, scaleX } = getPositionRelativeContainingBlockRect(layout.element[0]);
 
                 css.top = (css.top - top) / scaleY;
                 css.left = (css.left - left) / scaleX;
@@ -164,6 +164,15 @@ export class LayerController extends Controller {
         return this;
     }
 
+    getRender() {
+        // 默认挂在body上的都找最外层的body
+        let render = this.options.render;
+        if (render === 'body') {
+            return getOuterBody();
+        }
+        return render;
+    }
+
     _getLayout(name) {
         return this.layouts[name];
     }

packages/fineui/src/core/controller/controller.masker.js

@@ -12,7 +12,7 @@ export class MaskersController extends LayerController {
     }
 
     init() {
-        super.init(arguments);
+        super.init(...arguments);
         this.zindex = zIndex_masker;
     }
 }

packages/fineui/src/core/controller/controller.popover.js

@@ -7,6 +7,7 @@ import { isNotNull, each } from "../2.base";
 import { Widget } from "../4.widget";
 import { createWidget } from "../5.inject";
 import { zIndex_popover } from "../constant";
+import { getOuterBody } from "../utils/dom";
 
 export class PopoverController extends Controller {
     constructor() {
@@ -37,7 +38,7 @@ export class PopoverController extends Controller {
             type: "bi.popover",
         }, context);
         this.add(name, popover, options, context);
-        
+
         return this;
     }
 
@@ -56,8 +57,9 @@ export class PopoverController extends Controller {
             this.floatContainer[name].visible();
             const popover = this.get(name);
             popover.show && popover.show();
-            const W = Widget._renderEngine.createElement(this.options.render).width(),
-                H = Widget._renderEngine.createElement(this.options.render).height();
+            const render = this.getRender();
+            const el = Widget._renderEngine.createElement(render)[0];
+            const W = el.clientWidth, H = el.clientHeight;
             const w = popover.element.width(), h = popover.element.height();
             let left = (W - w) / 2, top = (H - h) / 2;
             if (left < 0) {
@@ -72,7 +74,7 @@ export class PopoverController extends Controller {
                 top: `${top}px`,
             });
         }
-        
+
         return this;
     }
 
@@ -85,7 +87,7 @@ export class PopoverController extends Controller {
             this.floatContainer[name].invisible();
             this.modal && this.floatContainer[name].element.__releaseZIndexMask__(this.zindexMap[name]);
         }
-        
+
         return this;
     }
 
@@ -124,7 +126,7 @@ export class PopoverController extends Controller {
         popover.on(BI.Popover.EVENT_CLOSE, () => this.close(name));
         createWidget({
             type: "bi.absolute",
-            element: options.container || this.options.render,
+            element: options.container || this.getRender(),
             items: [{
                 el: this.floatContainer[name],
                 left: 0,
@@ -133,10 +135,19 @@ export class PopoverController extends Controller {
                 bottom: 0,
             }],
         });
-        
+
         return this;
     }
 
+    getRender() {
+        // 默认挂在body上的都找最外层的body
+        let render = this.options.render;
+        if (render === 'body') {
+            return getOuterBody();
+        }
+        return render;
+    }
+
     get(name) {
         return this.floatManager[name];
     }
@@ -156,7 +167,7 @@ export class PopoverController extends Controller {
         delete this.zindexMap[name];
         delete this.floatContainer[name];
         delete this.floatOpened[name];
-        
+
         return this;
     }
 
@@ -170,7 +181,7 @@ export class PopoverController extends Controller {
         this.floatContainer = {};
         this.floatOpened = {};
         this.zindexMap = {};
-        
+
         return this;
     }
 

packages/fineui/src/core/element/element.js

@@ -1,76 +1,78 @@
 import { registFunction } from "./plugins";
 import { isWidget, isString } from "../2.base";
 
-export function Element(widget, attribs) {
-    this.l = this.r = this.t = this.b = 0; // 边框
-    this.marginLeft = this.marginRight = this.marginTop = this.marginBottom = 0; // 间距
-    this.position = {};
-    this.classMap = {};
-    this.classList = [];
-    this.children = [];
-    this.attribs = attribs || {};
-    this.styles = {};
-    // 兼容处理
-    this["0"] = this;
-    this.style = {};
-    if (!widget) {
-        this.nodeName = "body";
-        this.position.x = 0;
-        this.position.y = 0;
-        this.attribs.id = "body";
-    } else if (isWidget(widget)) {
-        this.widget = widget;
-        this.nodeName = widget.options.tagName;
-        this.textBaseLine = widget.options.textBaseLine;
-    } else if (isString(widget)) {
-        this.nodeName = widget;
+export let Element = class {
+    constructor(widget, attribs) {
+        this.l = this.r = this.t = this.b = 0; // 边框
+        this.marginLeft = this.marginRight = this.marginTop = this.marginBottom = 0; // 间距
+        this.position = {};
+        this.classMap = {};
+        this.classList = [];
+        this.children = [];
+        this.attribs = attribs || {};
+        this.styles = {};
+        // 兼容处理
+        this["0"] = this;
+        this.style = {};
+        if (!widget) {
+            this.nodeName = "body";
+            this.position.x = 0;
+            this.position.y = 0;
+            this.attribs.id = "body";
+        } else if (isWidget(widget)) {
+            this.widget = widget;
+            this.nodeName = widget.options.tagName;
+            this.textBaseLine = widget.options.textBaseLine;
+        } else if (isString(widget)) {
+            this.nodeName = widget;
+        }
     }
-}
 
-initElement(Element);
-registFunction(Element);
+    appendChild(child) {
+        child.parent = this;
+        if (this.children.push(child) !== 1) {
+            const sibling = this.children[this.children.length - 2];
+            sibling.next = child;
+            child.prev = sibling;
+            child.next = null;
+        }
+    }
+
+    append(child) {
+        child.parent = this;
+        if (this.children.push(child) !== 1) {
+            const sibling = this.children[this.children.length - 2];
+            sibling.next = child;
+            child.prev = sibling;
+            child.next = null;
+        }
+    }
 
-function initElement(element) {
-    element.prototype = {
-        appendChild(child) {
-            child.parent = this;
-            if (this.children.push(child) !== 1) {
-                const sibling = this.children[this.children.length - 2];
-                sibling.next = child;
-                child.prev = sibling;
-                child.next = null;
-            }
-        },
-        append(child) {
-            child.parent = this;
-            if (this.children.push(child) !== 1) {
-                const sibling = this.children[this.children.length - 2];
-                sibling.next = child;
-                child.prev = sibling;
-                child.next = null;
-            }
-        },
-        getParent() {
-            return this.parent;
-        },
-        getSiblings() {
-            const parent = this.getParent();
-            
-            return parent ? parent.getChildren() : [this];
-        },
-        getChildren() {
-            return this.children;
-        },
+    getParent() {
+        return this.parent;
+    }
 
-        getBounds() {
-            return {};
-        },
+    getSiblings() {
+        const parent = this.getParent();
 
-        width() {
+        return parent ? parent.getChildren() : [this];
+    }
 
-        },
-        height() {
+    getChildren() {
+        return this.children;
+    }
+
+    getBounds() {
+        return {};
+    }
+
+    width() {}
+
+    height() {}
+}
+
+registFunction(Element);
 
-        },
-    };
+export function setElement(element) {
+    Element = element;
 }

packages/fineui/src/core/func/alias.js

@@ -637,7 +637,7 @@ export const getEncodeURL = function(urlTemplate, param) {
 
 export const encodeURIComponent = function(url) {
     const specialCharsMap = getSpecialCharsMap();
-    url = url || "";
+    url = url ?? "";
     url = replaceAll(`${url}`, keys(specialCharsMap || []).join("|"), str => {
         switch (str) {
             case "\\":

packages/fineui/src/core/func/date.js

@@ -56,7 +56,7 @@ export function getMonthDays(date, month = date.getMonth()) {
     if (((0 === (year % 4)) && ((0 !== (year % 100)) || (0 === (year % 400)))) && month === 1) {
         return 29;
     }
-    
+
     return _MD[month];
 }
 
@@ -85,7 +85,7 @@ export function getDayOfYear(date) {
     const now = getDate(date.getFullYear(), date.getMonth(), date.getDate(), 0, 0, 0);
     const then = getDate(date.getFullYear(), 0, 0, 0, 0, 0);
     const time = now - then;
-    
+
     return Math.floor(time / DAY);
 }
 
@@ -108,7 +108,7 @@ export function getWeekNumber(date) {
     const ms = d.valueOf();
     d.setMonth(0);
     d.setDate(1);
-    
+
     return Math.floor((ms - d.valueOf()) / (7 * 864e5)) + 1;
 }
 
@@ -135,7 +135,7 @@ export function getOffsetQuarter(date, n) {
     }
     dt.setDate(day);
     dt.setMonth(dt.getMonth() + parseInt(n, 10) * 3);
-    
+
     return dt;
 }
 
@@ -159,7 +159,7 @@ export function getQuarterStartMonth(date) {
     if (nowMonth > 8) {
         quarterStartMonth = 9;
     }
-    
+
     return quarterStartMonth;
 }
 
@@ -179,8 +179,8 @@ export function getQuarterStartDate(date) {
  */
 export function getQuarterEndDate(date) {
     const quarterEndMonth = getQuarterStartMonth(date) + 2;
-    
-    return getDate(date.getFullYear(), quarterEndMonth, getMonthDays(date));
+
+    return getDate(date.getFullYear(), quarterEndMonth, getMonthDays(date, quarterEndMonth));
 }
 
 /**
@@ -198,7 +198,7 @@ export function getOffsetMonth(date, n) {
     }
     dt.setDate(day);
     dt.setMonth(dt.getMonth() + parseInt(n, 10));
-    
+
     return dt;
 }
 
@@ -210,7 +210,7 @@ export function getOffsetMonth(date, n) {
 export function getWeekStartDate(date) {
     const w = date.getDay();
     const startOfWeek = StartOfWeek % 7;
-    
+
     return getOffsetDate(date, _OFFSET[w < startOfWeek ? (7 + w - startOfWeek) : (w - startOfWeek)]);
 }
 
@@ -222,7 +222,7 @@ export function getWeekStartDate(date) {
 export function getWeekEndDate(date) {
     const w = date.getDay();
     const startOfWeek = StartOfWeek % 7;
-    
+
     return getOffsetDate(date, _OFFSET[w < startOfWeek ? (7 + w - startOfWeek) : (w - startOfWeek)] + 6);
 }
 
@@ -349,7 +349,7 @@ export function print(date, str) {
         if (!_global.navigator) {
             return false;
         }
-        
+
         return /Konqueror|Safari|KHTML/i.test(navigator.userAgent);
     };
 

packages/fineui/src/core/loader/loader.style.js

@@ -13,7 +13,7 @@ export class StyleLoaderManager extends OB {
     }
 
     _init() {
-        super._init(arguments);
+        super._init(...arguments);
         this.stylesManager = {};
     }
 

packages/fineui/src/core/platform/web/config.js

@@ -3,7 +3,8 @@ import { Providers } from "../../5.inject";
 import { Plugin } from "../../6.plugin";
 import { isSupportCss3, isIE, getIEVersion } from "../../platform/web";
 import { HorizontalAlign, VerticalAlign } from "../../constant";
-import { FlexCenterLayout, FlexHorizontalLayout, VerticalLayout,
+import {
+    FlexCenterLayout, FlexHorizontalLayout, VerticalLayout,
     FlexVerticalLayout, TdLayout, InlineLayout,
     FloatHorizontalFillLayout, ResponsiveInlineLayout,
     InlineCenterAdaptLayout, FlexVerticalCenterAdapt,
@@ -26,7 +27,7 @@ import { HalfButton } from "@/case";
 // 1、支持flex的浏览器下使用flex布局
 // 2、不支持flex的浏览器下使用inline布局
 // 3、当列宽既需要自动列宽又需要自适应列宽时，inline布局也处理不了了。当横向出滚动条时使用table布局，不出滚动条时使用float布局
-let _isSupportFlex, _isSupportGrid;
+let _isSupportFlex, _isSupportGrid, _isSupportSticky;
 
 function isSupportFlex() {
     if (!_isSupportFlex) {
@@ -45,7 +46,7 @@ function isSupportGrid() {
 }
 
 // 判断浏览器是否支持sticky 属性
-const isSupportSticky = (function () {
+const innerSupportSticky = function() {
     const vendorList = ["", "-webkit-", "-ms-", "-moz-", "-o-"],
         vendorListLength = vendorList.length,
         stickyElement = document.createElement("div");
@@ -57,7 +58,15 @@ const isSupportSticky = (function () {
     }
 
     return false;
-}());
+};
+
+// 判断浏览器是否支持sticky 属性
+const isSupportSticky = function() {
+    if (_isSupportSticky == null) {
+        _isSupportSticky = innerSupportSticky();
+    }
+    return _isSupportSticky;
+};
 
 
 const configWidget = Plugin.configWidget;
@@ -74,7 +83,7 @@ configWidget("bi.horizontal", ob => {
     }
 
     return extend({
-        scrollx: true,
+        scrollx: true
     }, ob, { type: InlineLayout.xtype });
 });
 configWidget("bi.vertical", ob => {
@@ -90,15 +99,15 @@ configWidget("bi.vertical", ob => {
                 return {
                     type: InlineLayout.xtype,
                     horizontalAlign: ob.horizontalAlign,
-                    items: [item],
+                    items: [item]
                 };
-            }),
+            })
         });
     }
     if (ob.verticalAlign === VerticalAlign.Stretch) {
         if (isSupportFlex()) {
             return extend({
-                horizontalAlign: HorizontalAlign.Stretch,
+                horizontalAlign: HorizontalAlign.Stretch
             }, ob, { type: FlexVerticalLayout.xtype });
         }
     }
@@ -128,12 +137,12 @@ configWidget("bi.inline", ob => {
         // 宽度是不是受限
         if ((ob.scrollable !== true && ob.scrollx !== true) || ob.horizontalAlign === HorizontalAlign.Stretch) {
             return extend({
-                verticalAlign: VerticalAlign.Top,
+                verticalAlign: VerticalAlign.Top
             }, ob, { type: FloatHorizontalFillLayout.xtype });
         }
 
         return extend({
-            horizontalAlign: HorizontalAlign.Stretch,
+            horizontalAlign: HorizontalAlign.Stretch
         }, ob, { type: TableAdaptLayout.xtype });
     }
     if (Providers.getProvider(SystemProvider.xtype).getResponsiveMode()) {
@@ -179,18 +188,18 @@ configWidget("bi.horizontal_adapt", ob => {
     // 主要出现在center_adapt或者horizontal_adapt的场景，或者主动设置horizontalAlign的场景
     if (isAdapt) {
         return extend({
-            horizontalAlign: HorizontalAlign.Center,
+            horizontalAlign: HorizontalAlign.Center
         }, ob, { type: TableAdaptLayout.xtype });
     }
     if (supportFlex) {
         return extend({
             horizontalAlign: HorizontalAlign.Center,
-            scrollx: false,
+            scrollx: false
         }, ob, { type: FlexHorizontalLayout.xtype });
     }
 
     return extend({
-        horizontalAlign: HorizontalAlign.Center,
+        horizontalAlign: HorizontalAlign.Center
     }, ob, { type: TableAdaptLayout.xtype });
 });
 
@@ -210,14 +219,14 @@ configWidget("bi.horizontal_fill", ob => {
         return extend({
             horizontalAlign: HorizontalAlign.Stretch,
             verticalAlign: VerticalAlign.Stretch,
-            scrollx: false,
+            scrollx: false
         }, ob, { type: FlexHorizontalLayout.xtype });
     }
     if ((ob.horizontalAlign && ob.horizontalAlign !== HorizontalAlign.Stretch) || (ob.scrollable === true || ob.scrollx === true)) {
         // 宽度不受限，要用table布局
         return extend({
             horizontalAlign: HorizontalAlign.Stretch,
-            verticalAlign: VerticalAlign.Stretch,
+            verticalAlign: VerticalAlign.Stretch
         }, ob, { type: TableLayout.xtype });
     }
 
@@ -228,14 +237,14 @@ configWidget("bi.vertical_fill", ob => {
         return extend({
             horizontalAlign: HorizontalAlign.Stretch,
             verticalAlign: VerticalAlign.Stretch,
-            scrolly: false,
+            scrolly: false
         }, ob, { type: FlexVerticalLayout.xtype });
     }
     if (ob.scrollable === true || ob.scrollx === true || ob.scrolly === true) {
         // 有滚动条，降级到table布局处理
         return extend({}, ob, {
             type: TdLayout.xtype,
-            items: map(ob.items, (i, item) => [item]),
+            items: map(ob.items, (i, item) => [item])
         });
     }
     let hasAuto = false;
@@ -258,12 +267,12 @@ configWidget("bi.vertical_fill", ob => {
     return extend({}, ob, { type: VTapeLayout.xtype });
 });
 configWidget("bi.horizontal_sticky", ob => {
-    if (!isSupportSticky) {
+    if (!isSupportSticky()) {
         return extend({ scrollx: true }, ob, { type: HorizontalFillLayout.xtype });
     }
 });
 configWidget("bi.vertical_sticky", ob => {
-    if (!isSupportSticky) {
+    if (!isSupportSticky()) {
         return extend({ scrolly: true }, ob, { type: VerticalFillLayout.xtype });
     }
 });

packages/fineui/src/core/platform/web/detectElementResize.js

@@ -46,10 +46,14 @@ export const ResizeDetector = {
         addResizeListener(widget.element[0], fn);
 
         return function () {
+            // 如果fn是debounce需要cancel掉
+            fn?.cancel?.();
             removeResizeListener(widget.element[0], fn);
         };
     },
     removeResizeListener(widget, fn) {
+        // 如果fn是debounce需要cancel掉
+        fn?.cancel?.();
         removeResizeListener(widget.element[0], fn);
     },
 };

packages/fineui/src/core/platform/web/jquery/jquery.polyfill.js

@@ -1,96 +0,0 @@
-/**
- * 用于 jquery 在 worker 环境或者 V8 引擎的 polyfill
- */
-// import { _global } from "@/core/0.foundation";
-
-const _global = globalThis;
-
-const document = {};
-const fakeElement = Object.create(document);
-
-Object.assign(document, {
-    parentNode: null,
-    nodeType: 9,
-    head: fakeElement,
-    body: fakeElement,
-    ownerDocument: document,
-    documentElement: document,
-    toString() {
-        return "FakeDocument";
-    },
-    appendChild(child) {
-        return child;
-    },
-    implementation: {
-        createHTMLDocument() {
-            return {
-                body: {
-                    childNodes: [],
-                },
-            };
-        },
-        createDocumentFragment() {
-            return this;
-        },
-    },
-    getElementById() {
-        return fakeElement;
-    },
-    createElement() {
-        return fakeElement;
-    },
-    createDocumentFragment() {
-        return this;
-    },
-    cloneNode() {
-        return this;
-    },
-    getElementsByTagName() {
-        return [fakeElement];
-    },
-    getElementsByClassName() {
-        return [fakeElement];
-    },
-    setAttribute() {
-        return null;
-    },
-    getAttribute() {
-        return null;
-    },
-    removeChild() {
-        return null;
-    },
-    addEventListener() {
-        return null;
-    },
-    removeEventListener() {
-        return null;
-    },
-});
-
-Object.assign(fakeElement, {
-    nodeType: 1,
-    style: {},
-    ownerDocument: document,
-    parentNod: fakeElement,
-    firstChild: fakeElement,
-    lastChild: fakeElement,
-    toString() {
-        return "FakeElement";
-    },
-});
-
-function polyfillProps(key, obj) {
-    _global[key] = _global[key] || obj;
-    if (typeof obj === "object") {
-        try {
-            Object.assign(_global[key], obj);
-        } catch(err) {
-            // _global[key] 可能只有 get 方法
-        }
-    }
-}
-
-_global.window = _global;
-polyfillProps("XMLHttpRequest", function () {});
-polyfillProps("document", document);

packages/fineui/src/core/platform/web/load.js

@@ -81,25 +81,34 @@ export function syncLoadScript(uri) {
     return false;
 }
 
+
+const promises = {};
+
 /**
  * 默认的异步加载javascript方法
  * @param uri
  * @returns {Promise<boolean>|Promise<unknown>}
  */
 export function loadScript(uri) {
-    if (_LOADED[uri]) {
-        return Promise.resolve(true);
+    if (promises[uri]) {
+        return Promise.all(promises[uri]);
     }
-    return new Promise(resolve => {
+
+    const promise = new Promise(resolve => {
         const script = document.createElement("script");
         script.type = "application/javascript";
-        script.src = uri;
         script.onload = function() {
+            _LOADED[uri] = true;
             resolve(true);
         };
+        script.src = uri;
         document.head.appendChild(script);
-        _LOADED[uri] = true;
     });
+
+    promises[uri] = [];
+    promises[uri].push(promise);
+
+    return Promise.all(promises[uri]);
 }
 
 /**

packages/fineui/src/core/structure/cache.js

@@ -13,7 +13,7 @@ export const Cache = {
         return Cache._getKeyPrefix() + (key || "");
     },
     getItem: function (key, opt = {}) {
-        const { defaultValue, typeConversion } = opt;
+        const { defaultValue = null, typeConversion } = opt;
         const storageKey = Cache._generateKey(key);
         let value = localStorage.getItem(storageKey);
 

packages/fineui/src/core/utils/color.js

@@ -42,7 +42,7 @@ export function getContrastColor(color) {
         return "#FFFFFF";
     }
 
-    return "#3D4D66";
+    return "#091e40";
 }
 
 export function rgb2hex(rgbColour) {

packages/fineui/src/core/utils/dom.js

@@ -1,9 +1,9 @@
 /**
  * 对DOM操作的通用函数
  */
-import { Widget } from "../4.widget";
-import { each, isEmpty, isNull, isNotNull } from "../2.base";
 import $ from "jquery";
+import { each, isEmpty, isNotNull, isNull } from "../2.base";
+import { Widget } from "../4.widget";
 import { isIE } from "./../platform";
 
 export function ready(fn) {
@@ -66,10 +66,10 @@ export function preloadImages(srcArray, onload) {
     each(srcArray, (i, src) => {
         images[i] = new Image();
         images[i].src = src;
-        images[i].onload = function() {
+        images[i].onload = function () {
             complete();
         };
-        images[i].onerror = function() {
+        images[i].onerror = function () {
             complete();
         };
     });
@@ -741,8 +741,14 @@ export function getComboPosition(combo, popup, extraWidth, extraHeight, needAdap
         default:
             break;
     }
-    if (needAdaptHeight === true) {
-        popup.resetHeight && popup.resetHeight(Math.min(viewportBounds.height - position.top - (positionRelativeElement ? positionRelativeElement.getBoundingClientRect().top : 0), maxHeight));
+    if (needAdaptHeight === true && popup.resetHeight) {
+        const comboRect = combo.element[0].getBoundingClientRect();
+        const relativeOffset = positionRelativeElement ? positionRelativeElement.getBoundingClientRect().top : 0;
+        if (position.top < comboRect.top) {
+            popup.resetHeight(Math.min(viewportBounds.height - position.top - relativeOffset, comboRect.top, maxHeight));
+        } else if (position.top >= comboRect.bottom) {
+            popup.resetHeight(Math.min(viewportBounds.height - position.top - relativeOffset, viewportBounds.height - comboRect.bottom, maxHeight));
+        }
     }
 
     return position;
@@ -788,3 +794,21 @@ export function getPositionRelativeContainingBlockRect(element) {
         scaleY: rect.height / positionRelativeElement.offsetHeight,
     };
 }
+
+/**
+ * 获取最外层的body
+ */
+export function getOuterBody() {
+    // 默认挂在body上的都找最外层的body
+    // let parentWindow = window;
+    // let body = document.body;
+    // try {
+    //     while (parentWindow.parent !== parentWindow) {
+    //         parentWindow = parentWindow.parent;
+    //     }
+    //     body = parentWindow.document.body;
+    // } catch (e) {}
+    // return body;
+
+    return document.body;
+}

packages/fineui/src/core/utils/index.js

@@ -6,7 +6,11 @@ import * as platformDom from "./dom";
 import * as colorDom from "./color";
 
 
-export const DOM = {
+export let DOM = {
     ...platformDom,
     ...colorDom,
 };
+
+export function setDom(dom) {
+    DOM = dom;
+}

packages/fineui/src/core/wrapper/layout/flex/flex.horizontal.js

@@ -51,7 +51,7 @@ export class FlexHorizontalLayout extends Layout {
         if (o.columnSize.length > 0) {
             return o.columnSize.indexOf("fill") >= 0 || o.columnSize.indexOf("auto") >= 0;
         }
-        
+
         return some(o.items, (i, item) => {
             if (item.width === "fill" || item.width === "auto") {
                 return true;
@@ -87,7 +87,7 @@ export class FlexHorizontalLayout extends Layout {
             }
         }
         if (columnSize > 0) {
-            w.element.width(this._optimiseGap(columnSize));
+            w.element.css({ width: this._optimiseGap(columnSize) });
         }
         if (columnSize === "fill") {
             w.element.addClass("f-f");
@@ -103,7 +103,7 @@ export class FlexHorizontalLayout extends Layout {
             w.element.addClass("l-c");
         }
         this._handleGap(w, item, i);
-        
+
         return w;
     }
 

packages/fineui/src/core/wrapper/layout/layout.card.js

@@ -107,9 +107,12 @@ export class CardLayout extends Layout {
             throw new Error("cardName not exist", cardName);
         }
 
-        const child = this._children[this._getChildName(cardName)];
+        let child = this._children[this._getChildName(cardName)];
         this._deleteCardByName(cardName);
-        child && child._destroy();
+        if (child) {
+            child._destroy();
+            child = null;
+        }
     }
 
     addCardByName(cardName, cardItem) {

packages/fineui/src/core/wrapper/layout/layout.table.js

@@ -56,10 +56,10 @@ export class TableLayout extends Layout {
                 "grid-column-gap": this._optimiseGap(o.hgap),
             });
         }
-        
+
         return {
             type: "bi.default",
-            ref(_ref) {
+            ref: (_ref) => {
                 this.layout = _ref;
             },
             items: this._formatItems(items),
@@ -110,7 +110,7 @@ export class TableLayout extends Layout {
                     type: "bi.layout",
                 }), cls);
             }
-                
+
             return first(wrapLayout(item), cls);
         })), []);
     }

packages/fineui/src/fix/fix.compact.js

@@ -7,7 +7,7 @@ import {
     extend,
     isFunction,
     Widget,
-    Providers
+    Providers, emptyFn
 } from "@/core";
 import { Fix } from "./fix";
 
@@ -142,9 +142,9 @@ export function createStore() {
     if (this._store || this.options._store) {
         const store = Widget.findStore(
             this.options.context ||
-                this._parent ||
-                this.options.element ||
-                this._context
+            this._parent ||
+            this.options.element ||
+            this._context
         );
         if (store) {
             pushTarget(store);
@@ -204,6 +204,7 @@ Widget.prototype.__destroy = function () {
             unwatch();
         });
     });
+    Fix.cleanupDeps();
     this._watchers && (this._watchers = []);
     if (this.store) {
         this.store._parent && (this.store._parent = null);
@@ -213,19 +214,38 @@ Widget.prototype.__destroy = function () {
     delete this.__cacheStore;
 };
 
+Widget.prototype.__watch = function (getter, handler, options) {
+    this._watchers = this._watchers || [];
+    const watcher = new Fix.Watcher(
+        null,
+        () => getter.call(this, this),
+        (handler &&
+            ((v) => {
+                handler.call(this, this, v);
+            })) ||
+        emptyFn,
+        extend({ deep: true }, options)
+    );
+    this._watchers.push(() => {
+        watcher.teardown();
+    });
+
+    return watcher.value;
+};
+
 _.each(["_render", "__afterRender", "_mount", "__afterMount"], (name) => {
     const old = Widget.prototype[name];
     old &&
-        (Widget.prototype[name] = function () {
-            this.store && pushTarget(this.store);
-            let res;
-            try {
-                res = old.apply(this, arguments);
-            } catch (e) {
-                console.error(e);
-            }
-            this.store && popTarget();
+    (Widget.prototype[name] = function () {
+        this.store && pushTarget(this.store);
+        let res;
+        try {
+            res = old.apply(this, arguments);
+        } catch (e) {
+            console.error(e);
+        }
+        this.store && popTarget();
 
-            return res;
-        });
+        return res;
+    });
 });

packages/fineui/src/index.js

@@ -10,10 +10,12 @@ export * from "./widget";
 export * from "./component";
 export * from "./fix";
 export * from "./router";
+export * from "./third";
 export * as Popper from "@popperjs/core";
 export const jQuery = jquery;
 export const $ = jquery;
 
 import * as D from "@/core/decorator";
 import { Fix } from "./fix";
+
 export const Decorators = { ...D, Model: Fix.Model };

packages/fineui/src/less/base/single/button/button.less

@@ -1,4 +1,5 @@
 @import "../../../index.less";
+
 @hoverVal: opacity .3s ease;
 @activeVal: transform .5s ease, opacity 1s ease;
 @activeStopVal: transform 0s;
@@ -6,6 +7,7 @@ body .bi-button, #body .bi-button {
   &.hack {
     .border-radius(0px);
   }
+
   .border-radius(2px);
   outline: 0;
   border: 1px solid @color-bi-border-button;
@@ -14,41 +16,51 @@ body .bi-button, #body .bi-button {
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
+
   &.loading {
     cursor: not-allowed;
   }
+
   &.block {
     font-size: inherit;
     border-width: 0;
     .border-radius(0px);
   }
+
   &.clear {
     font-size: inherit;
     border-width: 0;
     background-color: transparent;
+
     &:hover, &:focus {
       .opacity(0.8);
     }
+
     &:active {
       .opacity(1);
     }
+
     &:after {
       display: none;
     }
   }
+
   &.plain {
     font-size: inherit;
     border-width: 0;
     background-color: transparent;
   }
+
   &.ghost {
     font-size: inherit;
     background-color: transparent;
   }
+
   &.button-common {
     &, & .b-font:before {
       color: @color-bi-text-common-button;
     }
+
     &.light {
       border-width: 0;
       background-color: @color-bi-background-common-light-button;
@@ -65,81 +77,101 @@ body .bi-button, #body .bi-button {
         background-color: @color-bi-background-active-common-light-button;
       }
     }
+
     &.clear, &.clear .b-font:before {
       color: @color-bi-text-common-clear-button;
     }
+
     &.plain, &.plain .b-font:before {
       background-color: transparent;
       color: @color-bi-text-common-plain-button;
     }
+
     &.plain {
       &:hover {
         background-color: @color-bi-background-hover-plain-button;
       }
+
       &:focus {
         background-color: @color-bi-background-active-plain-button;
       }
     }
+
     &.ghost {
       &, & .b-font:before {
         color: @color-bi-text-common-ghost-button;
       }
+
       &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before {
         color: @color-bi-text;
         background-color: @color-bi-background-hover-common-ghost-button;
       }
+
       &:active {
         background-color: @color-bi-background-active-common-ghost-button;
       }
     }
   }
+
   &.button-ignore {
     & {
       background-color: @color-bi-background-ignore-button;
+
       &:not(.clear, .ghost) {
         border-color: @color-bi-border-ignore-button;
       }
     }
+
     &:not(.clear, .ghost) {
       &, & .b-font:before {
         color: @color-bi-text-ignore-button;
       }
     }
+
     &.clear {
       background-color: transparent;
       border-width: 0;
     }
+
     &.ghost {
       &:hover, &:focus {
         border-color: @color-bi-border-ignore-button;
+
         &, & .b-font:before {
           color: @color-bi-text-ignore-button;
         }
       }
+
       background-color: transparent;
       border-color: @color-bi-border-dark-gray-line;
     }
+
     &.plain, &.plain .b-font:before {
       background-color: transparent;
       color: @color-bi-text-ignore-plain-button;
     }
+
     &.plain {
       &:hover {
         background-color: @color-bi-background-hover-plain-button;
       }
+
       &:focus {
         background-color: @color-bi-background-active-plain-button;
       }
     }
   }
+
   &.button-success {
     & {
       &, & .b-font:before {
         color: @color-bi-text-success-button;
       }
+
       background-color: @color-bi-background-success-button;
       border-color: @color-bi-border-success-button;
     }
+
     &.light {
       border-width: 0;
       background-color: @color-bi-background-success-light-button;
@@ -156,47 +188,59 @@ body .bi-button, #body .bi-button {
         background-color: @color-bi-background-active-success-light-button;
       }
     }
+
     &.clear {
       &, & .b-font:before {
         color: @color-bi-text-success-clear-button;
       }
+
       background-color: transparent;
       border-width: 0;
     }
+
     &.ghost {
       &, & .b-font:before {
         color: @color-bi-text-success-ghost-button;
       }
+
       background-color: transparent;
+
       &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before {
         color: @color-bi-text;
         background-color: @color-bi-background-success-button;
       }
+
       &:active {
         background-color: @color-bi-background-success-button;
       }
     }
+
     &.plain, &.plain .b-font:before {
       background-color: transparent;
       color: @color-bi-text-success-plain-button;
     }
+
     &.plain {
       &:hover {
         background-color: @color-bi-background-hover-plain-button;
       }
+
       &:focus {
         background-color: @color-bi-background-active-plain-button;
       }
     }
   }
+
   &.button-warning {
     & {
       &, & .b-font:before {
         color: @color-bi-text-warning-button;
       }
+
       background-color: @color-bi-background-warning-button;
       border-color: @color-bi-border-warning-button;
     }
+
     &.light {
       border-width: 0;
       background-color: @color-bi-background-warning-light-button;
@@ -213,47 +257,59 @@ body .bi-button, #body .bi-button {
         background-color: @color-bi-background-active-warning-light-button;
       }
     }
+
     &.clear {
       &, & .b-font:before {
         color: @color-bi-text-warning-clear-button;
       }
+
       background-color: transparent;
       border-width: 0;
     }
+
     &.ghost {
       &, & .b-font:before {
         color: @color-bi-text-warning-ghost-button;
       }
+
       background-color: transparent;
+
       &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before {
         color: @color-bi-text;
         background-color: @color-bi-background-warning-button;
       }
+
       &:active {
         background-color: @color-bi-background-warning-button;
       }
     }
+
     &.plain, &.plain .b-font:before {
       background-color: transparent;
       color: @color-bi-text-warning-plain-button;
     }
+
     &.plain {
       &:hover {
         background-color: @color-bi-background-hover-plain-button;
       }
+
       &:focus {
         background-color: @color-bi-background-active-plain-button;
       }
     }
   }
+
   &.button-error {
     & {
       &, & .b-font:before {
         color: @color-bi-text-error-button;
       }
+
       background-color: @color-bi-background-error-button;
       border-color: @color-bi-border-error-button;
     }
+
     &.light {
       border-width: 0;
       background-color: @color-bi-background-error-light-button;
@@ -270,39 +326,49 @@ body .bi-button, #body .bi-button {
         background-color: @color-bi-background-active-error-light-button;
       }
     }
+
     &.clear {
       &, & .b-font:before {
         color: @color-bi-text-error-clear-button;
       }
+
       background-color: transparent;
       border-width: 0;
     }
+
     &.ghost {
       &, & .b-font:before {
         color: @color-bi-text-error-ghost-button;
       }
+
       background-color: transparent;
+
       &:hover, &:focus, &:hover .b-font:before, &:focus .b-font:before {
         color: @color-bi-text;
         background-color: @color-bi-background-error-button;
       }
+
       &:active {
         background-color: @color-bi-background-error-button;
       }
     }
+
     &.plain, &.plain .b-font:before {
       background-color: transparent;
       color: @color-bi-text-error-plain-button;
     }
+
     &.plain {
       &:hover {
         background-color: @color-bi-background-hover-plain-button;
       }
+
       &:focus {
         background-color: @color-bi-background-active-plain-button;
       }
     }
   }
+
   &.button-common.disabled,
   &.button-success.disabled,
   &.button-error.disabled,
@@ -311,25 +377,30 @@ body .bi-button, #body .bi-button {
       &, & .b-font:before {
         color: @color-bi-text-disabled-button !important;
       }
+
       background-color: fade(@color-bi-background-disabled-button, 20%) !important;
       @ieColor: argb(fade(@color-bi-background-disabled-button, 20%));
-      filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})";
       border-color: @color-bi-border-disabled-button !important;
     }
+
     &:after {
       display: none;
     }
   }
+
   &.button-ignore.disabled {
     &, & .b-font:before {
       color: @color-bi-text-disabled-ignore-button !important;
     }
+
     background: @color-bi-background-disabled-ignore-button !important;
     border-color: @color-bi-border-disabled-ignore-button !important;
+
     &:after {
       display: none;
     }
   }
+
   &.button-common.disabled,
   &.button-success.disabled,
   &.button-warning.disabled,
@@ -339,65 +410,81 @@ body .bi-button, #body .bi-button {
       &, & .b-font:before {
         color: @color-bi-text-disabled-ignore-clear-button !important;
       }
+
       background: transparent !important;
       border-width: 0 !important;
+
       &:hover, &:focus, &:active {
         .opacity(1);
       }
     }
+
     &.plain {
       &, & .b-font:before {
         color: @color-bi-text-disabled-plain-clear-button !important;
       }
+
       background: transparent !important;
       border-width: 0 !important;
+
       &:hover, &:focus, &:active {
         .opacity(1);
       }
     }
+
     &.ghost {
       &, & .b-font:before {
         // color: @color-bi-text-disabled-ignore-ghost-button !important;
       }
+
       background: transparent !important;
       // border-color: @color-bi-border-disabled-ignore-ghost-button !important;
       .opacity(0.5);
     }
   }
+
   &.button-ignore.disabled {
     &.ghost {
       .opacity(1);
     }
   }
+
   &.button-common.disabled {
     &.ghost {
       &, & .b-font:before {
         color: @color-bi-text-disabled-common-ghost-button !important;
       }
+
       border-color: @color-bi-border-disabled-common-ghost-button !important;
     }
   }
+
   &.button-success.disabled {
     &.ghost {
       &, & .b-font:before {
         color: @color-bi-text-disabled-success-ghost-button !important;
       }
+
       border-color: @color-bi-border-disabled-success-ghost-button !important;
     }
   }
+
   &.button-warning.disabled {
     &.ghost {
       &, & .b-font:before {
         color: @color-bi-text-disabled-warning-ghost-button !important;
       }
+
       border-color: @color-bi-border-disabled-warning-ghost-button !important;
     }
   }
+
   &.button-error.disabled {
     &.ghost {
       &, & .b-font:before {
         color: @color-bi-text-disabled-error-ghost-button !important;
       }
+
       border-color: @color-bi-border-disabled-error-ghost-button !important;
     }
   }
@@ -424,14 +511,17 @@ body .bi-button, #body .bi-button {
       top: 0;
       pointer-events: none;
     }
+
     &.hack:after {
       content: none;
     }
+
     &:active:after {
       transform: scale(0, 1);
       .opacity(0.1);
       .transition(@activeStopVal)
     }
+
     &:hover, &:focus {
       & .bi-button-mask {
         .opacity(0.1);
@@ -440,6 +530,7 @@ body .bi-button, #body .bi-button {
       }
     }
   }
+
   &.button-ignore {
     &:after {
       content: "";
@@ -456,42 +547,52 @@ body .bi-button, #body .bi-button {
       top: 0;
       pointer-events: none;
     }
+
     &.hack:after {
       content: none;
     }
+
     &:active:after {
       transform: scale(0, 1);
       .opacity(0.1);
       .transition(@activeStopVal)
     }
+
     &:hover, &:focus {
       &:not(.clear, .ghost) {
         background-color: @color-bi-background-hover-ignore-button-mask;
       }
+
       .transition(@hoverVal);
     }
   }
-  & .popup-content{
+
+  & .popup-content {
     font-size: @font-size-14;
   }
+
   .bi-button-mask {
     pointer-events: none;
   }
 }
 
-.bi-theme-dark {
-  .bi-button, #body .bi-button {
+.bi-theme-dark, #body .bi-theme-dark {
+  .bi-button {
     &.button-ignore {
       background-color: @color-bi-background-ignore-button-theme-dark;
+
       &:hover, &:focus {
         background-color: @color-bi-background-hover-ignore-button-theme-dark;
       }
+
       &:active {
         background-color: @color-bi-background-active-ignore-button-theme-dark;
       }
+
       &.clear {
         background-color: transparent;
       }
+
       &.ghost {
         border-color: @color-bi-border-dark-gray-line-theme-dark;
       }
@@ -506,31 +607,36 @@ body .bi-button, #body .bi-button {
         border-color: @color-bi-border-dark-gray-line-theme-dark !important;
         background-color: fade(@color-bi-background-disabled-button-theme-dark, 20%) !important;
         @ieColor: argb(fade(@color-bi-background-disabled-button-theme-dark, 20%));
-        filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})";
 
         &.clear {
           background-color: transparent !important;
         }
+
         &.ghost {
           // 深色系下灰化就统一用灰化色
           &, & .b-font:before {
             color: @color-bi-text-disabled-theme-dark !important;
           }
+
           background: transparent !important;
           .opacity(1);
         }
       }
     }
+
     &.button-ignore.disabled {
       &, &.base-disabled {
         &, & .b-font:before {
           color: @color-bi-text-disabled-theme-dark !important;
         }
+
         border-color: @color-bi-border-dark-gray-line-theme-dark !important;
         background-color: @color-bi-background-ignore-button-theme-dark !important;
+
         &.clear {
           background-color: transparent !important;
         }
+
         &.ghost {
           background: transparent !important;
           .opacity(1);

packages/fineui/src/less/base/single/input/radio.less

@@ -15,6 +15,9 @@
       border-color: @color-bi-border-hover-active-radio;
     }
   }
+  .bi-radio-icon {
+    background-color: @color-bi-background-active-radio-content;
+  }
   &.active {
     & .radio-content, &.radio-content {
       border-color:  @color-bi-border-hover-active-radio;

packages/fineui/src/less/base/tree/ztree.less

@@ -272,7 +272,9 @@
 }
 
 .bi-theme-dark {
-  .ztree.solid li span.button.center_docu, .ztree.solid li span.button.bottom_docu {
+  .ztree.solid li span.button.center_docu, .ztree.solid li span.button.bottom_docu,.ztree.solid li span.button.roots_docu {
+    background: none;
+    
     &:before {
       border-right: 1px solid @border-color-dark-gray-line-theme-dark;
     }

packages/fineui/src/less/core/utils/common.less

@@ -2,16 +2,20 @@
 
 .base-disabled {
   cursor: not-allowed !important;
+
   .cursor-pointer {
     cursor: not-allowed !important;
   }
+
   .cursor-default {
     cursor: not-allowed !important;
   }
+
   .cursor-move {
     cursor: not-allowed !important;
   }
-  .cursor-text{
+
+  .cursor-text {
     cursor: not-allowed !important;
   }
 
@@ -54,16 +58,20 @@
 
 .base-invalid {
   cursor: default !important;
+
   .cursor-pointer {
     cursor: default !important;
   }
+
   .cursor-default {
     cursor: default !important;
   }
+
   .cursor-move {
     cursor: default !important;
   }
-  .cursor-text{
+
+  .cursor-text {
     cursor: default !important;
   }
 }
@@ -73,6 +81,7 @@
   &:focus, &:hover {
     border-color: @color-bi-border-highlight;
   }
+
   // ie下不支持focus-within， 和上面写在一起会导致ie下:hover不生效
   &:focus-within {
     border-color: @color-bi-border-highlight;
@@ -125,6 +134,7 @@
   & .bi-input {
     color: @color-bi-text-background;
   }
+
   & .bi-textarea {
     color: @color-bi-text-background;
   }
@@ -134,9 +144,11 @@
   .bi-background {
     background-color: @color-bi-background-normal-theme-dark;
     color: @color-bi-text-background-theme-dark;
+
     & .bi-input {
       color: @color-bi-text-background-theme-dark;
     }
+
     & .bi-textarea {
       color: @color-bi-text-background-theme-dark;
     }
@@ -146,9 +158,11 @@
 .bi-header-background {
   background-color: @color-bi-background-header-background;
   color: @color-bi-text-header-background;
+
   & .bi-input {
     color: @color-bi-text-header-background;
   }
+
   & .bi-textarea {
     color: @color-bi-text-header-background;
   }
@@ -158,9 +172,11 @@
   .bi-header-background {
     background-color: @color-bi-background-header-background-theme-dark;
     color: @color-bi-text-header-background-theme-dark;
+
     & .bi-input {
       color: @color-bi-text-header-background-theme-dark;
     }
+
     & .bi-textarea {
       color: @color-bi-text-header-background-theme-dark;
     }
@@ -171,12 +187,15 @@
 .bi-card {
   background-color: @color-bi-background-card;
   color: @color-bi-text-card;
+
   & .bi-input {
     color: @color-bi-text-card;
   }
+
   & .bi-textarea {
     color: @color-bi-text-card;
   }
+
   &.bi-primary {
     background-color: @background-color-card-primary;
     color: @color-card-primary;
@@ -184,12 +203,14 @@
 }
 
 .bi-theme-dark {
-  .bi-card {
+  .bi-card, &.bi-card {
     background-color: @color-bi-background-card-theme-dark;
     color: @color-bi-text-card-theme-dark;
+
     & .bi-input {
       color: @color-bi-text-card-theme-dark;
     }
+
     & .bi-textarea {
       color: @color-bi-text-card-theme-dark;
     }
@@ -199,20 +220,24 @@
 //灰化
 .bi-disabled {
   color: @color-bi-text-disabled;
+
   & .bi-input {
     color: @color-bi-text-disabled;
   }
+
   & .bi-textarea {
     color: @color-bi-text-disabled;
   }
 }
 
 .bi-theme-dark {
-  .bi-disabled {
+  .bi-disabled, &.bi-disabled {
     color: @color-bi-text-disabled-theme-dark;
+
     & .bi-input {
       color: @color-bi-text-disabled-theme-dark;
     }
+
     & .bi-textarea {
       color: @color-bi-text-disabled-theme-dark;
     }
@@ -222,20 +247,24 @@
 // 提示区域, 灰色字体
 .bi-tips {
   color: @color-bi-text-tips;
+
   & .bi-input {
     color: @color-bi-text-tips;
   }
+
   & .bi-textarea {
     color: @color-bi-text-tips;
   }
 }
 
 .bi-theme-dark {
-  .bi-tips {
+  .bi-tips, &.bi-tips {
     color: @color-bi-text-tips-theme-dark;
+
     & .bi-input {
       color: @color-bi-text-tips-theme-dark;;
     }
+
     & .bi-textarea {
       color: @color-bi-text-tips-theme-dark;
     }
@@ -245,9 +274,11 @@
 // 边框
 .bi-border {
   border: 1px solid @color-bi-border-line;
+
   &.disabled {
     border-color: @color-bi-border-disabled !important;
   }
+
   &.error {
     border-color: @border-color-negative;
   }
@@ -255,9 +286,11 @@
 
 .bi-border-top {
   border-top: 1px solid @color-bi-border-line;
+
   &.disabled {
     border-color: @color-bi-border-disabled !important;
   }
+
   &.error {
     border-color: @border-color-negative;
   }
@@ -265,9 +298,11 @@
 
 .bi-border-right {
   border-right: 1px solid @color-bi-border-line;
+
   &.disabled {
     border-color: @color-bi-border-disabled !important;
   }
+
   &.error {
     border-color: @border-color-negative;
   }
@@ -275,9 +310,11 @@
 
 .bi-border-bottom {
   border-bottom: 1px solid @color-bi-border-line;
+
   &.disabled {
     border-color: @color-bi-border-disabled !important;
   }
+
   &.error {
     border-color: @border-color-negative;
   }
@@ -285,9 +322,11 @@
 
 .bi-border-left {
   border-left: 1px solid @color-bi-border-line;
+
   &.disabled {
     border-color: @color-bi-border-disabled !important;
   }
+
   &.error {
     border-color: @border-color-negative;
   }
@@ -296,6 +335,7 @@
 .bi-theme-dark {
   .bi-border {
     border: 1px solid @color-bi-border-line-theme-dark;
+
     &.disabled {
       border-color: @color-bi-border-disabled-theme-dark !important;
     }
@@ -303,6 +343,7 @@
 
   .bi-border-top {
     border-top: 1px solid @color-bi-border-line-theme-dark;
+
     &.disabled {
       border-color: @color-bi-border-disabled-theme-dark !important;
     }
@@ -310,6 +351,7 @@
 
   .bi-border-right {
     border-right: 1px solid @color-bi-border-line-theme-dark;
+
     &.disabled {
       border-color: @color-bi-border-disabled-theme-dark !important;
     }
@@ -317,6 +359,7 @@
 
   .bi-border-bottom {
     border-bottom: 1px solid @color-bi-border-line-theme-dark;
+
     &.disabled {
       border-color: @color-bi-border-disabled-theme-dark !important;
     }
@@ -324,6 +367,7 @@
 
   .bi-border-left {
     border-left: 1px solid @color-bi-border-line-theme-dark;
+
     &.disabled {
       border-color: @color-bi-border-disabled-theme-dark !important;
     }
@@ -421,9 +465,11 @@
 // 标红
 .bi-keyword-red-mark {
   color: @color-bi-text-redmark;
+
   & .bi-input {
     color: @color-bi-text-redmark;
   }
+
   & .bi-textarea {
     color: @color-bi-text-redmark;
   }
@@ -432,9 +478,11 @@
 // 高亮
 .bi-high-light {
   color: @color-bi-text-highlight;
+
   & .bi-input {
     color: @color-bi-text-highlight;
   }
+
   & .bi-textarea {
     color: @color-bi-text-highlight;
   }
@@ -442,9 +490,11 @@
 
 .bi-error {
   color: @color-bi-text-failure;
+
   & .bi-input {
     color: @color-bi-text-failure;
   }
+
   & .bi-textarea {
     color: @color-bi-text-failure;
   }
@@ -453,9 +503,11 @@
 .bi-high-light-background {
   background-color: @color-bi-background-highlight;
   color: @color-bi-text;
+
   & .bi-input {
     color: @color-bi-text;
   }
+
   & .bi-textarea {
     color: @color-bi-text;
   }
@@ -464,9 +516,11 @@
 .bi-error-background {
   background-color: @color-bi-background-failure;
   color: @color-bi-text;
+
   & .bi-input {
     color: @color-bi-text;
   }
+
   & .bi-textarea {
     color: @color-bi-text;
   }
@@ -474,6 +528,7 @@
 
 .bi-high-light-border {
   border: 1px solid @color-bi-border-highlight;
+
   &.disabled {
     border-color: @color-bi-border-disabled !important;
   }
@@ -481,6 +536,7 @@
 
 .bi-high-light-border-top {
   border-top: 1px solid @color-bi-border-highlight;
+
   &.disabled {
     border-color: @color-bi-border-disabled !important;
   }
@@ -488,6 +544,7 @@
 
 .bi-high-light-border-right {
   border-right: 1px solid @color-bi-border-highlight;
+
   &.disabled {
     border-color: @color-bi-border-disabled !important;
   }
@@ -495,6 +552,7 @@
 
 .bi-high-light-border-bottom {
   border-bottom: 1px solid @color-bi-border-highlight;
+
   &.disabled {
     border-color: @color-bi-border-disabled !important;
   }
@@ -502,6 +560,7 @@
 
 .bi-high-light-border-left {
   border-left: 1px solid @color-bi-border-highlight;
+
   &.disabled {
     border-color: @color-bi-border-disabled !important;
   }
@@ -512,9 +571,11 @@
   color: @color-bi-text-water-mark;
   cursor: text;
   .user-select-disable();
+
   & .bi-input {
     color: @color-bi-text-water-mark;
   }
+
   & .bi-textarea {
     color: @color-bi-text-water-mark;
   }
@@ -523,9 +584,11 @@
 .bi-theme-dark {
   .bi-water-mark {
     color: @color-bi-text-water-mark-theme-dark;
+
     & .bi-input {
       color: @color-bi-text-water-mark-theme-dark;
     }
+
     & .bi-textarea {
       color: @color-bi-text-water-mark-theme-dark;
     }
@@ -548,24 +611,30 @@
 // 蒙板
 .bi-mask {
   color: @color-bi-text;
+
   & .bi-input {
     color: @color-bi-text;
   }
+
   & .bi-textarea {
     color: @color-bi-text;
   }
+
   .background-color(@color-bi-background-black, 20%);
 }
 
 .bi-theme-dark {
   .bi-mask {
     color: @color-bi-text-white-theme-dark;
+
     & .bi-input {
       color: @color-bi-text-white-theme-dark;
     }
+
     & .bi-textarea {
       color: @color-bi-text-white-theme-dark;
     }
+
     .background-color(@color-bi-background-default, 20%);
   }
 }
@@ -576,7 +645,7 @@
 }
 
 .bi-theme-dark {
-  .bi-z-index-mask {
+  .bi-z-index-mask, &.bi-z-index-mask {
     //color: @color-bi-background-default;
     //& .bi-input {
     //  color: @color-bi-background-default;

packages/fineui/src/less/core/utils/list-item.less

@@ -93,6 +93,25 @@
   }
 }
 
+.bi-theme-dark {
+  .bi-list-item-simple {
+    &.disabled {
+      &, &:hover, &:active {
+        color: @color-bi-text-disabled-theme-dark !important;
+        & .bi-input {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+        & .bi-textarea {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+        & .bi-high-light {
+          color: @color-bi-text-disabled-theme-dark !important;
+        }
+      }
+    }
+  }
+}
+
 // hover的时候文字变黑
 // active的时候文字高亮
 .bi-list-item-effect {

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/app.less

@@ -25,10 +25,20 @@ body {
   outline: 0 none;
 }
 
-div, textarea {
-  scrollbar-color: fade(@scroll-color, 10%) fade(@scroll-color, 5%);
-  scrollbar-width: thin;
+@-moz-document url-prefix() {
+  div, textarea {
+    scrollbar-color: fade(@scroll-color, 10%) fade(@scroll-color, 5%);
+    scrollbar-width: thin;
+  }
 
+  .bi-theme-dark {
+    div, textarea {
+      scrollbar-color: fade(@scroll-color-theme-dark, 10%) fade(@scroll-color-theme-dark, 5%);
+    }
+  }
+}
+
+div, textarea {
   &::-webkit-scrollbar {
     -webkit-appearance: none;
     width: 10px;
@@ -63,8 +73,6 @@ div, textarea {
 
 .bi-theme-dark {
   div, textarea {
-    scrollbar-color: fade(@scroll-color-theme-dark, 10%) fade(@scroll-color-theme-dark, 5%);
-
     &::-webkit-scrollbar {
       -webkit-appearance: none;
     }

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/src/less/visual.less

@@ -43,13 +43,11 @@
 .background-color(@color, @alpha) {
   background-color: fade(@color, @alpha);
   @ieColor: argb(fade(@color, @alpha));
-  filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{ieColor},endColorstr=@{ieColor})";
 }
 
 .opacity(@opa) {
   opacity: @opa;
   @opa-ie: @opa*100;
-  filter: ~'alpha(opacity=@{opa-ie})';
 }
 
 .transition(@transition) {