Merge pull request #259112 in DEC/fineui from feature/x to bugfix/11.0

* commit '061dd8f4b1964591d05d9af1373a9c203b848860': (40 commits)
  无JIRA .bi-theme-dark 同级类名控制
  无JIRA 删掉
  BI-139672 fix: 修改高度后文本未上下居中
  KERNEL-16950 fix: 当listview在父组件tab里，且隐藏的状态，父组件watch刷新listview是否执行？如果应该要执行，这里得去掉，如果不要执行，父组件中写法就得手动setselect listview的tab后主动再刷新下；这里listview隐藏状态下选择执行
  无jia任务 多提交
  无jia任务 回退，暂时去不掉
  无jia任务 这么改看下问题
  KERNEL-16950 fix: options中对象不会被释放
  无jia任务 ref销毁
  无jia任务 先回退
  BI-133648 feat：日期过滤控件加预览模式
  无JIRA 组件销毁的时候ref处理
  KERNEL-16950 fix: 内存泄露问题
  BI-133648 feat：日期过滤控件加预览模式
  BI-133648 fix：日期过滤控件加预览模式
  BI-139985 fix: bi.down_list_popup的bi.down_list_group里只有一个元素的时候没有选中效果
  BI-139874 fix: 【6016】数据集编辑过滤下拉框，搜索内容带了个回车，前端会一直显示加载中
  无JIRA任务 更新图标
  BI-138908 fix:nextTick
  无jira chore: console.log
  ...

packages/fineui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fui/core",
-  "version": "3.0.20230727164622",
+  "version": "3.0.20231204103846",
   "description": "fineui",
   "main": "dist/fineui.min.js",
   "module": "dist/lib/index.js",

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

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

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

@@ -520,6 +520,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/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/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/core/2.base.js

@@ -912,7 +912,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 +972,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 +981,10 @@ export const nextTick = (function () {
     };
 })();
 
+export const setNextTick = (fn) => {
+    nextTick = fn;
+} 
+
 // 数字相关方法
 _.each(["random"], name => {
     lodashFns[name] = _apply(name);

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

@@ -868,13 +868,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/constant/writable.var.js

@@ -1,51 +1,50 @@
 /**
  * 可写的常量
  */
-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"] = {
+addDescriptor("EVENT_RESPONSE_TIME", {
-    enumerable: true,
+    get: () => EVENT_RESPONSE_TIME,
-    configurable: true,
-    get: function() {
-        return EVENT_RESPONSE_TIME;
-    },
     set: setEventResponseTime,
-};
+});
 
 export let pixUnit = "px";
 export const setPixUnit = v => {
     pixUnit = v;
 };
-PropertyDescriptors["pixUnit"] = {
+addDescriptor("pixUnit", {
-    enumerable: true,
+    get: () => pixUnit,
-    configurable: true,
-    get: function() {
-        return pixUnit;
-    },
     set: setPixUnit,
-};
+});
 
 export let pixRatio = 1;
 export const setPixRatio = v => {
     pixRatio = v;
 };
-PropertyDescriptors["pixRatio"] = {
+addDescriptor("pixRatio", {
-    enumerable: true,
+    get: () => pixRatio,
-    configurable: true,
-    get: function() {
-        return pixRatio;
-    },
     set: setPixRatio,
-};
+});
 
 export let StartOfWeek = 1;
 export const setStartOfWeek = v => {
@@ -55,27 +54,19 @@ export const setStartOfWeek = v => {
     }
     StartOfWeek = v;
 };
-PropertyDescriptors["StartOfWeek"] = {
+addDescriptor("StartOfWeek", {
-    enumerable: true,
+    get: () => StartOfWeek,
-    configurable: true,
-    get: function() {
-        return StartOfWeek;
-    },
     set: setStartOfWeek,
-};
+});
 
 export let BlankSplitChar = "\u200b \u200b";
 export const setBlankSplitChar = v => {
     BlankSplitChar = v;
 };
-PropertyDescriptors["BlankSplitChar"] = {
+addDescriptor("BlankSplitChar", {
-    enumerable: true,
+    get: () => BlankSplitChar,
-    configurable: true,
-    get: function() {
-        return BlankSplitChar;
-    },
     set: setBlankSplitChar,
-};
+});
 
 // 一定返回最终的单位
 export let pixFormat = (pix, border) => {
@@ -95,14 +86,10 @@ export let pixFormat = (pix, border) => {
 export const setPixFormat = v => {
     pixFormat = v;
 };
-PropertyDescriptors["pixFormat"] = {
+addDescriptor("pixFormat", {
-    enumerable: true,
+    get: () => pixFormat,
-    configurable: true,
-    get: function() {
-        return pixFormat;
-    },
     set: setPixFormat,
-};
+});
 
 export let toPix = (pix, border) => {
     if (!isNumber(pix)) {
@@ -120,14 +107,10 @@ export let toPix = (pix, border) => {
 export let setToPix = v => {
     toPix = v;
 };
-PropertyDescriptors["toPix"] = {
+addDescriptor("toPix", {
-    enumerable: true,
+    get: () => toPix,
-    configurable: true,
-    get: function() {
-        return toPix;
-    },
     set: setToPix,
-};
+});
 
 const getCacheItem = key => {
     Cache.getItem(key, { typeConversion: true, defaultValue: true });
@@ -137,24 +120,22 @@ export const setEventBlur = v => {
     EVENT_BLUR = v;
     Cache.setItem("event.blur", v);
 };
-PropertyDescriptors["EVENT_BLUR"] = {
+addDescriptor("EVENT_BLUR", {
-    enumerable: true,
+    get: () => EVENT_BLUR,
-    configurable: true,
-    get: function() {
-        return EVENT_BLUR;
-    },
     set: setEventBlur,
-};
+});
+
+addDescriptor("Element", {
+    get: () => Element,
+    set: setElement,
+});
 
-PropertyDescriptors["DOM"] = {
+addDescriptor("DOM", {
-    enumerable: true,
+    get: () => DOM,
-    configurable: true,
-    get: function() {
-        return DOM;
-    },
     set: setDom,
-};
+});
 
-export function _defineVarProperties(libName) {
+addDescriptor("nextTick", {
-    Object.defineProperties(libName, PropertyDescriptors);
+    get: () => nextTick,
-}
+    set: setNextTick,
+});

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) {
+export let Element = class {
-    this.l = this.r = this.t = this.b = 0; // 边框
+    constructor(widget, attribs) {
-    this.marginLeft = this.marginRight = this.marginTop = this.marginBottom = 0; // 间距
+        this.l = this.r = this.t = this.b = 0; // 边框
-    this.position = {};
+        this.marginLeft = this.marginRight = this.marginTop = this.marginBottom = 0; // 间距
-    this.classMap = {};
+        this.position = {};
-    this.classList = [];
+        this.classMap = {};
-    this.children = [];
+        this.classList = [];
-    this.attribs = attribs || {};
+        this.children = [];
-    this.styles = {};
+        this.attribs = attribs || {};
-    // 兼容处理
+        this.styles = {};
-    this["0"] = this;
+        // 兼容处理
-    this.style = {};
+        this["0"] = this;
-    if (!widget) {
+        this.style = {};
-        this.nodeName = "body";
+        if (!widget) {
-        this.position.x = 0;
+            this.nodeName = "body";
-        this.position.y = 0;
+            this.position.x = 0;
-        this.attribs.id = "body";
+            this.position.y = 0;
-    } else if (isWidget(widget)) {
+            this.attribs.id = "body";
-        this.widget = widget;
+        } else if (isWidget(widget)) {
-        this.nodeName = widget.options.tagName;
+            this.widget = widget;
-        this.textBaseLine = widget.options.textBaseLine;
+            this.nodeName = widget.options.tagName;
-    } else if (isString(widget)) {
+            this.textBaseLine = widget.options.textBaseLine;
-        this.nodeName = widget;
+        } else if (isString(widget)) {
+            this.nodeName = widget;
+        }
     }
-}
 
-initElement(Element);
+    appendChild(child) {
-registFunction(Element);
+        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;
+    }
 
-function initElement(element) {
+    getSiblings() {
-    element.prototype = {
+        const parent = this.getParent();
-        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];
+        return parent ? parent.getChildren() : [this];
-        },
+    }
-        getChildren() {
+
-            return this.children;
+    getChildren() {
-        },
+        return this.children;
+    }
 
-        getBounds() {
+    getBounds() {
-            return {};
+        return {};
-        },
+    }
 
-        width() {
+    width() {}
 
-        },
+    height() {}
-        height() {
+}
+
+registFunction(Element);
 
-        },
+export function setElement(element) {
-    };
+    Element = element;
 }

packages/fineui/src/fix/fix.js

@@ -205,7 +205,7 @@ const nextTick = (function () {
             pending = true;
             timerFunc();
         }
-        // $flow-disable-line
+
         if (!cb && typeof Promise !== "undefined") {
             return new Promise((resolve, reject) => {
                 _resolve = resolve;
@@ -1380,10 +1380,13 @@ class Model {
             });
         });
         this._watchers && (this._watchers = []);
+        this._computedWatchers && (this._computedWatchers = []);
         this.destroyed && this.destroyed();
         this.$$model = null;
         this.$$computed = null;
         this.$$state = null;
+        this.$$context = null;
+        this.model = null;
         this._destroyHandler && this._destroyHandler();
     }
 }

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,24 +547,30 @@ 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;
   }
@@ -483,15 +580,19 @@ body .bi-button, #body .bi-button {
   .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/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/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) {

packages/fineui/src/less/widget/intervalslider/intervalslider.label.less

@@ -1,3 +0,0 @@
-.bi-interval-slider-label {
-  min-height: 50px;
-}

packages/fineui/src/less/widget/intervalslider/intervalslider.less

@@ -1,3 +0,0 @@
-.bi-interval-slider {
-  min-height: 50px;
-}

packages/fineui/src/widget/datepane/datepane.js

@@ -30,6 +30,7 @@ export class DynamicDatePane extends Widget {
         minDate: "1900-01-01",
         maxDate: "2099-12-31",
         supportDynamic: true,
+        isPreview: false, // 是否是预览状态
     };
 
     render() {
@@ -63,17 +64,11 @@ export class DynamicDatePane extends Widget {
                             {
                                 eventName: ButtonGroup.EVENT_CHANGE,
                                 action: () => {
-                                    let date;
                                     const value = this.switcher.getValue()[0];
                                     this.dateTab.setSelect(value);
                                     switch (value) {
                                         case DynamicDatePane.Static:
-                                            date = DynamicDateHelper.getCalculation(this.dynamicPane.getValue());
+                                            this._setStaticValueByDynamicValue(this.dynamicPane.getValue());
-                                            this.ymd.setValue({
-                                                year: date.getFullYear(),
-                                                month: date.getMonth() + 1,
-                                                day: date.getDate(),
-                                            });
                                             break;
                                         case DynamicDatePane.Dynamic:
                                             this.dynamicPane.setValue({
@@ -195,7 +190,7 @@ export class DynamicDatePane extends Widget {
     }
 
     created() {
-        this.setValue(this.options.value);
+        this._initValue(this.options.value);
     }
 
     _checkValueValid(value) {
@@ -212,6 +207,31 @@ export class DynamicDatePane extends Widget {
         }
     }
 
+    _initValue(v) {
+        v = v || {};
+        const type = v.type || DynamicDateCombo.Static;
+        const value = v.value || v;
+
+        const { isPreview } = this.options;
+
+        // 如果是初始化且是预览状态 直接打开静态页面
+        this.switcher.setValue(isPreview ? DynamicDateCombo.Static : type);
+        this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type);
+        switch (type) {
+            case DynamicDateCombo.Dynamic:
+                if (isPreview) {
+                    this._setStaticValueByDynamicValue(value);
+                } else {
+                    this.dynamicPane.setValue(value);
+                }
+                break;
+            case DynamicDateCombo.Static:
+            default:
+                this._setStaticValue(value);
+                break;
+        }
+    }
+
     setMinDate(minDate) {
         if (this.options.minDate !== minDate) {
             this.options.minDate = minDate;
@@ -238,19 +258,32 @@ export class DynamicDatePane extends Widget {
                 break;
             case DynamicDateCombo.Static:
             default:
-                if (this._checkValueValid(value)) {
+                this._setStaticValue(value);
-                    const date = getDate();
-                    this.ymd.setValue({
-                        year: date.getFullYear(),
-                        month: date.getMonth() + 1,
-                    });
-                } else {
-                    this.ymd.setValue(value);
-                }
                 break;
         }
     }
 
+    _setStaticValue(value) {
+        if (this._checkValueValid(value)) {
+            const date = getDate();
+            this.ymd.setValue({
+                year: date.getFullYear(),
+                month: date.getMonth() + 1,
+            });
+        } else {
+            this.ymd.setValue(value);
+        }
+    }
+
+    _setStaticValueByDynamicValue(value) {
+        const date = DynamicDateHelper.getCalculation(value);
+        this.ymd.setValue({
+            year: date.getFullYear(),
+            month: date.getMonth() + 1,
+            day: date.getDate(),
+        });
+    }
+
     getValue() {
         const type = this.dateTab.getSelect();
 

packages/fineui/src/widget/downlist/popup.downlist.js

@@ -1,23 +1,23 @@
 import { ButtonTree, Pane } from "@/base";
 import {
-    Selection,
+    BlankSplitChar,
-    VerticalLayout,
-    Layout,
-    shortcut,
-    extend,
-    createWidget,
-    createItems,
-    isNotNull,
     contains,
+    createItems,
+    createWidget,
+    deepClone,
     each,
+    extend,
     isEmpty,
-    map,
-    isNotEmptyString,
     isNotEmptyArray,
-    some,
+    isNotEmptyString,
-    deepClone,
+    isNotNull,
+    Layout,
+    map,
+    Selection,
+    shortcut,
     SIZE_CONSANTS,
-    BlankSplitChar
+    some,
+    VerticalLayout,
 } from "@/core";
 import { DownListGroup } from "./group.downlist";
 
@@ -63,14 +63,14 @@ export class DownListPopup extends Pane {
                 {},
                 {
                     adjustLength: -2,
-                }
+                },
             ),
             layouts: [
                 {
                     type: VerticalLayout.xtype,
                     hgap: this.constants.hgap,
                     vgap: this.constants.vgap,
-                }
+                },
             ],
             value: this._digest(o.value),
             chooseType: o.chooseType,
@@ -142,7 +142,7 @@ export class DownListPopup extends Pane {
                             layouts: [
                                 {
                                     type: VerticalLayout.xtype,
-                                }
+                                },
                             ],
                         },
                         innerVgap: 5,
@@ -163,11 +163,9 @@ export class DownListPopup extends Pane {
                 item_done.items.push(el_done);
                 storeItem.push(item);
             });
-            if (this._isGroup(item_done.items)) {
+            each(item_done.items, (i, item) => {
-                each(item_done.items, (i, item) => {
+                this.singleValues.push(item.el.value);
-                    this.singleValues.push(item.el.value);
+            });
-                });
-            }
 
             result.push(item_done);
             this.items.push(storeItem);
@@ -181,7 +179,7 @@ export class DownListPopup extends Pane {
                                 cls: "bi-down-list-spliter bi-split-top cursor-pointer",
                                 height: 0,
                             },
-                        }
+                        },
                     ],
                     cls: "bi-down-list-spliter-container cursor-pointer",
                     vgap: 5,
@@ -220,10 +218,6 @@ export class DownListPopup extends Pane {
         });
     }
 
-    _isGroup(i) {
-        return i.length > 1;
-    }
-
     _needSpliter(i, itemLength) {
         return i < itemLength - 1;
     }
@@ -276,7 +270,7 @@ export class DownListPopup extends Pane {
 
                         return true;
                     }
-                })
+                }),
             );
 
             return value;
@@ -295,7 +289,7 @@ export class DownListPopup extends Pane {
             {},
             {
                 adjustLength: -2,
-            }
+            },
         );
         this.popup.populate(popupItem);
     }

packages/fineui/src/widget/dynamicdate/dynamicdate.combo.js

@@ -53,6 +53,7 @@ export class DynamicDateCombo extends Single {
         },
         isNeedAdjustHeight: false,
         isNeedAdjustWidth: false,
+        isPreview: false, // 是否是预览状态
     };
 
     _init() {
@@ -200,6 +201,7 @@ export class DynamicDateCombo extends Single {
                         popup: {
                             el: {
                                 type: DynamicDatePopup.xtype,
+                                isPreview: opts.isPreview,
                                 width: opts.isNeedAdjustWidth ? opts.width : undefined,
                                 supportDynamic: opts.supportDynamic,
                                 behaviors: opts.behaviors,

packages/fineui/src/widget/dynamicdate/dynamicdate.popup.js

@@ -34,6 +34,7 @@ export class DynamicDatePopup extends Widget {
         baseCls: "bi-dynamic-date-popup",
         width: 272,
         supportDynamic: true,
+        isPreview: false, // 是否是预览状态
     };
 
     static EVENT_CHANGE = "EVENT_CHANGE";
@@ -282,10 +283,23 @@ export class DynamicDatePopup extends Widget {
         v = v || {};
         const type = v.type || DynamicDateCombo.Static;
         const value = v.value || v;
-        this.dateTab.setSelect(type);
+        const { isPreview } = this.options;
+        let date;
+
+        // 如果是预览状态 直接打开静态页面
+        this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type);
         switch (type) {
         case DynamicDateCombo.Dynamic:
-            this.dynamicPane.setValue(value);
+            if (isPreview) {
+                date = DynamicDateHelper.getCalculation(value);
+                this.ymd.setValue({
+                    year: date.getFullYear(),
+                    month: date.getMonth() + 1,
+                    day: date.getDate(),
+                });
+            } else {
+                this.dynamicPane.setValue(value);
+            }
             this._setInnerValue();
             break;
         case DynamicDateCombo.Static:

packages/fineui/src/widget/dynamicdatetime/dynamicdatetime.combo.js

@@ -44,6 +44,7 @@ export class DynamicDateTimeCombo extends Single {
         },
         isNeedAdjustHeight: false,
         isNeedAdjustWidth: false,
+        isPreview: false, // 是否是预览状态
     };
 
     static EVENT_KEY_DOWN = "EVENT_KEY_DOWN";
@@ -207,6 +208,7 @@ export class DynamicDateTimeCombo extends Single {
                         popup: {
                             el: {
                                 type: DynamicDateTimePopup.xtype,
+                                isPreview: opts.isPreview,
                                 timeSelectTypes: opts.timeSelectTypes,
                                 width: opts.isNeedAdjustWidth ? opts.width : undefined,
                                 supportDynamic: opts.supportDynamic,

packages/fineui/src/widget/dynamicdatetime/dynamicdatetime.popup.js

@@ -36,6 +36,7 @@ export class DynamicDateTimePopup extends Widget {
         baseCls: "bi-dynamic-date-time-popup",
         width: 272,
         supportDynamic: true,
+        isPreview: false, // 是否是预览状态
     };
 
     static EVENT_CHANGE = "EVENT_CHANGE";
@@ -292,10 +293,24 @@ export class DynamicDateTimePopup extends Widget {
         v = v || {};
         const type = v.type || DynamicDateCombo.Static;
         const value = v.value || v;
-        this.dateTab.setSelect(type);
+        const { isPreview } = this.options;
+        let date;
+
+        // 如果是预览状态 直接打开静态页面
+        this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type);
         switch (type) {
             case DynamicDateCombo.Dynamic:
-                this.dynamicPane.setValue(value);
+                if (isPreview) {
+                    date = DynamicDateHelper.getCalculation(value);
+                    this.ymd.setValue({
+                        year: date.getFullYear(),
+                        month: date.getMonth() + 1,
+                        day: date.getDate(),
+                    });
+                    this.timeSelect.setValue();
+                } else {
+                    this.dynamicPane.setValue(value);
+                }
                 this._setInnerValue();
                 break;
             case DynamicDateCombo.Static:

packages/fineui/src/widget/intervalslider/intervalslider.js

@@ -23,19 +23,17 @@ import { Single, Editor } from "@/base";
 import { AccurateCalculationModel } from "./model.accuratecalculation";
 import { SignTextEditor, SliderIconButton } from "../singleslider";
 
+const CONSTANTS = {
+    EDITOR_WIDTH: 58,
+    EDITOR_HEIGHT: 20,
+    LABEL_HEIGHT: 30,
+    SLIDER_HEIGHT: 30,
+};
+
 @shortcut()
 export class IntervalSlider extends Single {
     static xtype = "bi.interval_slider";
-    _constant = {
+
-        EDITOR_WIDTH: 58,
-        EDITOR_R_GAP: 60,
-        EDITOR_HEIGHT: 20,
-        SLIDER_WIDTH_HALF: 15,
-        LABEL_HEIGHT: 30,
-        SLIDER_WIDTH: 30,
-        SLIDER_HEIGHT: 30,
-        TRACK_HEIGHT: 24,
-    };
     props = {
         baseCls: "bi-interval-slider bi-slider-track",
         digit: false,
@@ -45,6 +43,8 @@ export class IntervalSlider extends Single {
         value: { min: "", max: "" },
         lAlign: "center",
         rAlign: "center",
+        labelHeight: CONSTANTS.LABEL_HEIGHT,
+        sliderHeight: CONSTANTS.SLIDER_HEIGHT,
     };
 
     static EVENT_CHANGE = "EVENT_CHANGE";
@@ -59,8 +59,11 @@ export class IntervalSlider extends Single {
         this.populate();
     }
 
+    getConstant() {
+        return CONSTANTS;
+    }
+
     render() {
-        const c = this._constant;
         const o = this.options;
         this.enable = false;
         this.valueOne = "";
@@ -86,8 +89,8 @@ export class IntervalSlider extends Single {
             text: unit,
             allowBlank: false,
             textAlign: lAlign,
-            width: BI.isNull(editorWidth) ? BI.toPix(c.EDITOR_WIDTH, 2) : BI.toPix(editorWidth, 2),
+            width: isNull(editorWidth) ? toPix(CONSTANTS.EDITOR_WIDTH, 2) : toPix(editorWidth, 2),
-            height: toPix(c.EDITOR_HEIGHT, 2),
+            height: toPix(CONSTANTS.EDITOR_HEIGHT, 2),
             validationChecker: v => this._checkValidation(v),
         });
         this.labelOne.element.hover(
@@ -116,8 +119,8 @@ export class IntervalSlider extends Single {
             text: unit,
             allowBlank: false,
             textAlign: rAlign,
-            width: BI.isNull(editorWidth) ? BI.toPix(c.EDITOR_WIDTH, 2) : BI.toPix(editorWidth, 2),
+            width: isNull(editorWidth) ? toPix(CONSTANTS.EDITOR_WIDTH, 2) : toPix(editorWidth, 2),
-            height: toPix(c.EDITOR_HEIGHT, 2),
+            height: toPix(CONSTANTS.EDITOR_HEIGHT, 2),
             validationChecker: v => this._checkValidation(v),
         });
         this.labelTwo.element.hover(
@@ -152,7 +155,7 @@ export class IntervalSlider extends Single {
 
         return {
             type: VerticalFillLayout.xtype,
-            rowSize: [o.labelHeight || c.LABEL_HEIGHT, o.sliderHeight || c.SLIDER_HEIGHT],
+            rowSize: [o.labelHeight, o.sliderHeight],
             items: [
                 this._createLabelWrapper(),
                 {
@@ -253,7 +256,6 @@ export class IntervalSlider extends Single {
 
     _createLabelWrapper() {
         const o = this.options;
-        const c = this._constant;
 
         return {
             el: {
@@ -275,7 +277,7 @@ export class IntervalSlider extends Single {
                         ],
                     },
                 ],
-                height: o.labelHeight || c.LABEL_HEIGHT,
+                height: o.labelHeight,
             },
             top: 0,
             left: 0,
@@ -372,24 +374,6 @@ export class IntervalSlider extends Single {
         return valid;
     }
 
-    _checkOverlap() {
-        const labelOneLeft = this.labelOne.element[0].offsetLeft;
-        const labelTwoLeft = this.labelTwo.element[0].offsetLeft;
-        if (labelOneLeft <= labelTwoLeft) {
-            if (labelTwoLeft - labelOneLeft < 90) {
-                this.labelTwo.element.css({ top: 40 });
-            } else {
-                this.labelTwo.element.css({ top: 0 });
-            }
-        } else {
-            if (labelOneLeft - labelTwoLeft < 90) {
-                this.labelTwo.element.css({ top: 40 });
-            } else {
-                this.labelTwo.element.css({ top: 0 });
-            }
-        }
-    }
-
     _checkLabelPosition(oldValueOne, oldValueTwo, valueOne, valueTwo, isLeft) {
         oldValueOne = parseFloat(oldValueOne);
         oldValueTwo = parseFloat(oldValueTwo);

packages/fineui/src/widget/multiselect/search/multiselect.search.loader.js

@@ -191,6 +191,7 @@ export class MultiSelectSearchLoader extends Widget {
             return {
                 text: o.valueFormatter(v) || v,
                 value: v,
+                keyword: keyword,
             };
         });
         if (isKey(keyword)) {

packages/fineui/src/widget/multiselect/trigger/searcher.multiselect.insert.js

@@ -1,4 +1,17 @@
-import { shortcut, Widget, extend, emptyFn, i18nText, createWidget, isNotNull, isEmptyArray, size, each, BlankSplitChar, Selection } from "@/core";
+import {
+    shortcut,
+    Widget,
+    extend,
+    emptyFn,
+    i18nText,
+    createWidget,
+    isNotNull,
+    isEmptyArray,
+    size,
+    each,
+    BlankSplitChar,
+    Selection
+} from "@/core";
 import { MultiSelectEditor } from "./editor.multiselect";
 import { Searcher } from "@/base";
 import { MultiSelectSearchInsertPane } from "../search/multiselect.search.insert.pane";
@@ -80,7 +93,7 @@ export class MultiSelectInsertSearcher extends Widget {
                         op.keywords = [keyword];
                         this.setKeyword(keyword);
                         o.itemsCreator(op, function () {
-                            if (keyword === self.editor.getValue()) {
+                            if (keyword === self.editor.getKeyword()) {
                                 callback(...arguments);
                             }
                         });

packages/fineui/src/widget/singleslider/button/editor.sign.text.js

@@ -106,7 +106,7 @@ export class SignTextEditor extends Widget {
     _checkText() {
         const o = this.options;
         nextTick(
-            bind(() => {
+            () => {
                 if (this.editor.getValue() === "") {
                     this.text.setValue(o.watermark || "");
                     this.text.element.addClass("bi-water-mark");
@@ -116,7 +116,7 @@ export class SignTextEditor extends Widget {
                     this.text.setValue(v);
                     this.text.element.removeClass("bi-water-mark");
                 }
-            }, this)
+            }
         );
     }
 

packages/fineui/src/widget/timeinterval/dateinterval.js

@@ -23,6 +23,7 @@ export class DateInterval extends Single {
         lgap: 15,
         offset: 0,
         timeErrorCls: "time-error",
+        isPreview: false, // 是否是预览状态
     };
 
     static EVENT_VALID = "EVENT_VALID";
@@ -78,6 +79,7 @@ export class DateInterval extends Single {
         const o = this.options;
         const combo = createWidget({
             type: DynamicDateCombo.xtype,
+            isPreview: o.isPreview,
             supportDynamic: o.supportDynamic,
             minDate: o.minDate,
             maxDate: o.maxDate,

packages/fineui/src/widget/timeinterval/timeinterval.js

@@ -23,6 +23,7 @@ export class TimeInterval extends Single {
         lgap: 15,
         offset: 0,
         timeErrorCls: "time-error",
+        isPreview: false, // 是否是预览状态
     };
 
     static EVENT_VALID = "EVENT_VALID";
@@ -76,6 +77,7 @@ export class TimeInterval extends Single {
         const o = this.options;
         const combo = createWidget({
             type: DynamicDateTimeCombo.xtype,
+            isPreview: o.isPreview,
             timeSelectTypes: o.timeSelectTypes,
             simple: o.simple,
             supportDynamic: o.supportDynamic,

packages/fineui/src/widget/year/combo.year.js

@@ -27,6 +27,7 @@ export class DynamicYearCombo extends Widget {
         maxDate: "2099-12-31", // 最大日期
         height: 24,
         supportDynamic: true,
+        isPreview: false, // 是否是预览状态
     };
 
     _init() {
@@ -95,6 +96,7 @@ export class DynamicYearCombo extends Widget {
                 el: {
                     type: DynamicYearPopup.xtype,
                     supportDynamic: o.supportDynamic,
+                    isPreview: o.isPreview,
                     ref: _ref => {
                         this.popup = _ref;
                     },

packages/fineui/src/widget/year/popup.year.js

@@ -30,6 +30,7 @@ export class DynamicYearPopup extends Widget {
         max: "2099-12-31",
         width: 180,
         supportDynamic: true,
+        isPreview: false, // 是否是预览状态
     };
     constants = {
         tabHeight: 40,
@@ -266,10 +267,15 @@ export class DynamicYearPopup extends Widget {
         v = v || {};
         const type = v.type || DynamicDateCombo.Static;
         const value = v.value || v;
-        this.dateTab.setSelect(type);
+        const { isPreview } = this.options;
+
+        // 如果是预览状态 直接打开静态页面
+        this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type);
         switch (type) {
             case DynamicDateCombo.Dynamic:
-                this.dynamicPane.setValue(value);
+                isPreview
+                    ? this.year.setValue({ year: DynamicDateHelper.getCalculation(value).getFullYear() })
+                    : this.dynamicPane.setValue(value);
                 this._setInnerValue();
                 break;
             case DynamicDateCombo.Static:

packages/fineui/src/widget/yearmonth/combo.yearmonth.js

@@ -38,6 +38,7 @@ export class DynamicYearMonthCombo extends Single {
         supportDynamic: true,
         isNeedAdjustHeight: false,
         isNeedAdjustWidth: false,
+        isPreview: false, // 是否是预览状态
     };
 
     _init() {
@@ -106,6 +107,7 @@ export class DynamicYearMonthCombo extends Single {
                     type: DynamicYearMonthPopup.xtype,
                     width: o.isNeedAdjustWidth ? o.width : undefined,
                     supportDynamic: o.supportDynamic,
+                    isPreview: o.isPreview,
                     ref: _ref => {
                         this.popup = _ref;
                     },

packages/fineui/src/widget/yearmonth/popup.yearmonth.js

@@ -31,6 +31,7 @@ export class DynamicYearMonthPopup extends Widget {
         max: "2099-12-31",
         width: 180,
         supportDynamic: true,
+        isPreview: false, // 是否是预览状态
     };
 
     static BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE";
@@ -262,11 +263,22 @@ export class DynamicYearMonthPopup extends Widget {
         v = v || {};
         const type = v.type || DynamicDateCombo.Static;
         const value = v.value || v;
+        const { isPreview } = this.options;
+        let date;
 
-        this.dateTab.setSelect(type);
+        // 如果是预览状态 直接打开静态页面
+        this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type);
         switch (type) {
             case DynamicDateCombo.Dynamic:
-                this.dynamicPane.setValue(value);
+                if (isPreview) {
+                    date = DynamicDateHelper.getCalculation(value);
+                    this.year.setValue({
+                        year: date.getFullYear(),
+                        month: date.getMonth() + 1,
+                    });
+                } else {
+                    this.dynamicPane.setValue(value);
+                }
                 this._setInnerValue();
                 break;
             case DynamicDateCombo.Static:

packages/fineui/src/widget/yearmonthinterval/yearmonthinterval.js

@@ -34,6 +34,7 @@ export class YearMonthInterval extends Single {
         supportDynamic: true,
         height: 24,
         simple: false,
+        isPreview: false, // 是否是预览状态
     };
 
     render() {
@@ -71,6 +72,7 @@ export class YearMonthInterval extends Single {
         const o = this.options;
         const combo = createWidget({
             type: DynamicYearMonthCombo.xtype,
+            isPreview: o.isPreview,
             simple: o.simple,
             supportDynamic: o.supportDynamic,
             height: o.height,

packages/fineui/src/widget/yearquarter/combo.yearquarter.js

@@ -33,6 +33,7 @@ export class DynamicYearQuarterCombo extends Widget {
         supportDynamic: true,
         isNeedAdjustHeight: false,
         isNeedAdjustWidth: false,
+        isPreview: false, // 是否是预览状态
     };
 
     static EVENT_CONFIRM = "EVENT_CONFIRM";
@@ -109,6 +110,7 @@ export class DynamicYearQuarterCombo extends Widget {
                     type: DynamicYearQuarterPopup.xtype,
                     width: o.isNeedAdjustWidth ? o.width : undefined,
                     supportDynamic: o.supportDynamic,
+                    isPreview: o.isPreview,
                     ref: _ref => {
                         this.popup = _ref;
                     },

packages/fineui/src/widget/yearquarter/popup.yearquarter.js

@@ -32,6 +32,7 @@ export class DynamicYearQuarterPopup extends Widget {
         max: "2099-12-31",
         width: 180,
         supportDynamic: true,
+        isPreview: false, // 是否是预览状态
     };
 
     static BUTTON_CLEAR_EVENT_CHANGE = "BUTTON_CLEAR_EVENT_CHANGE";
@@ -263,8 +264,8 @@ export class DynamicYearQuarterPopup extends Widget {
                             default:
                                 if (
                                     this.storeValue &&
-                                this.storeValue.type ===
+                                    this.storeValue.type ===
-                                        DynamicYearQuarterCombo.Dynamic
+                                    DynamicYearQuarterCombo.Dynamic
                                 ) {
                                     this.dynamicPane.setValue(
                                         this.storeValue.value
@@ -304,10 +305,22 @@ export class DynamicYearQuarterPopup extends Widget {
         v = v || {};
         const type = v.type || DynamicDateCombo.Static;
         const value = v.value || v;
-        this.dateTab.setSelect(type);
+        const { isPreview } = this.options;
+        let date;
+
+        // 如果是预览状态 直接打开静态页面
+        this.dateTab.setSelect(isPreview ? DynamicDateCombo.Static : type);
         switch (type) {
             case DynamicDateCombo.Dynamic:
-                this.dynamicPane.setValue(value);
+                if (isPreview) {
+                    date = DynamicDateHelper.getCalculation(value);
+                    this.year.setValue({
+                        year: date.getFullYear(),
+                        quarter: getQuarter(date),
+                    });
+                } else {
+                    this.dynamicPane.setValue(value);
+                }
                 this._setInnerValue();
                 break;
             case DynamicDateCombo.Static: