bkui-vue 2.0.1-beta.10 → 2.0.1-beta.100

package/lib/date-picker/index.js

@@ -2039,10 +2039,6 @@ var datePickerProps = {
       return true;
     }
   },
-  transfer: {
-    type: Boolean,
-    "default": false
-  },
   appendToBody: {
     type: Boolean,
     "default": false
@@ -2690,12 +2686,10 @@ var timeProps = {
     // const parentProvide = injectStrict(timePickerKey);
     var parentProvide = (0,external_vue_namespaceObject.inject)(timePickerKey);
     var timeSpinnerRef = (0,external_vue_namespaceObject.ref)(null);
+    var visibleDate = (0,external_vue_namespaceObject.ref)(src_fecha.format(parentProvide.panelDate, props.format));
     var showSeconds = (0,external_vue_namespaceObject.computed)(function () {
       return !(props.format || '').match(/mm$/);
     });
-    var visibleDate = (0,external_vue_namespaceObject.computed)(function () {
-      return src_fecha.format(parentProvide.panelDate, props.format);
-    });
     var timeSlots = (0,external_vue_namespaceObject.computed)(function () {
       if (!props.value[0]) {
         return [];
@@ -2749,6 +2743,10 @@ var timeProps = {
       var newVal = dates[0] || initTime();
       newVal = new Date(newVal);
       state.date = newVal;
+      parentProvide.panelDate = newVal;
+      visibleDate.value = src_fecha.format(parentProvide.panelDate, props.format);
+    }, {
+      immediate: true
     });
     (0,external_vue_namespaceObject.onMounted)(function () {
       if (parentProvide && parentProvide.parentName === 'DatePanel') {
@@ -3515,6 +3513,7 @@ var timeRangeProps = {
 
 function date_range_ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function date_range_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? date_range_ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : date_range_ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /*
  * Tencent is pleased to support the open source community by making
  * 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
@@ -3712,13 +3711,23 @@ var dateRangePanelProps = {
       }
       if (props.splitPanels) {
         var otherPanel = panel === 'left' ? 'right' : 'left';
-        if (panel === 'left' && (state.leftPanelDate >= state.rightPanelDate || Math.floor(state.leftPanelDate.getFullYear() / 10) * 10 === Math.floor(state.rightPanelDate.getFullYear() / 10) * 10)) {
-          // changePanelDate(otherPanel, type, 1);
-          changePanelDate(otherPanel, type, state.currentView === 'year' ? 10 : 1);
+        if (panel === 'left' && state.leftPanelDate >= state.rightPanelDate) {
+          if (state.currentView === 'year') {
+            if (Math.floor(state.leftPanelDate.getFullYear() / 10) * 10 === Math.floor(state.rightPanelDate.getFullYear() / 10) * 10) {
+              changePanelDate(otherPanel, type, 10);
+            }
+          } else {
+            changePanelDate(otherPanel, type, 1);
+          }
         }
-        if (panel === 'right' && (state.rightPanelDate <= state.leftPanelDate || Math.floor(state.leftPanelDate.getFullYear() / 10) * 10 === Math.floor(state.rightPanelDate.getFullYear() / 10) * 10)) {
-          // changePanelDate(otherPanel, type, -1);
-          changePanelDate(otherPanel, type, state.currentView === 'year' ? -10 : -1);
+        if (panel === 'right' && state.rightPanelDate <= state.leftPanelDate) {
+          if (state.currentView === 'year') {
+            if (Math.floor(state.leftPanelDate.getFullYear() / 10) * 10 === Math.floor(state.rightPanelDate.getFullYear() / 10) * 10) {
+              changePanelDate(otherPanel, type, -10);
+            }
+          } else {
+            changePanelDate(otherPanel, type, -1);
+          }
         }
       } else {
         var _otherPanel = panel === 'left' ? 'right' : 'left';
@@ -4281,6 +4290,7 @@ var dateRangePanelProps = {
       }
     }() : '']), [[external_vue_namespaceObject.vShow, !this.isTime]]), this.isTime ? (0,external_vue_namespaceObject.createVNode)(time_range, {
       "ref": "timePickerRef",
+      "allowCrossDay": !!this.timePickerOptions.allowCrossDay,
       "disabledDate": this.disabledDate,
       "format": this.format,
       "selectionMode": this.selectionMode,
@@ -4352,7 +4362,7 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
     clickoutside: directives_namespaceObject.clickoutside
   },
   props: datePickerProps,
-  emits: ['open-change', 'input', 'change', 'update:modelValue', 'clear', 'shortcut-change', 'pick-success', 'pick-first'],
+  emits: ['open-change', 'input', 'change', 'update:modelValue', 'clear', 'shortcut-change', 'pick-success', 'pick-first', 'blur', 'focus'],
   // slots: ['header'],
   slots: Object,
   setup: function setup(props, _ref) {
@@ -4505,9 +4515,16 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       return props.options;
     });
     // 限制 allow-cross-day 属性只在 time-picker 组件 type 为 timerange 时生效
-    var allowCrossDayProp = (0,external_vue_namespaceObject.computed)(function () {
-      return panel.value === 'RangeTimePickerPanel' ? props.allowCrossDay : false;
-    });
+    // const allowCrossDayProp = computed(() => (panel.value === 'RangeTimePickerPanel' ? props.allowCrossDay : false));
+    // const allowCrossDayProp = computed(() => {
+    //   if (panel.value === 'RangeTimePickerPanel') {
+    //     return props.allowCrossDay;
+    //   }
+    //   if (panel.value === 'DateRangePanel') {
+    //     return (props?.timePickerOptions as any)?.allowCrossDay;
+    //   }
+    //   return false;
+    // });
     var inputRef = (0,external_vue_namespaceObject.ref)(null);
     var inputFocus = function inputFocus() {
       var _inputRef$value;
@@ -4625,14 +4642,18 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       if (visualValue !== null && visualValue !== void 0 && visualValue.value) {
         state.showClose = true;
       }
-      state.internalValue = state.tmpValue;
+      // state.internalValue = state.tmpValue;
+      // console.error('enterenterenterenterenterenterenterenter', e, state.internalValue);
     };
     var handleInputMouseleave = function handleInputMouseleave(_e) {
       // if (e.toElement?.classList.contains('clear-action')) {
       //   return;
       // }
       state.showClose = false;
-      state.internalValue = state.tmpValue;
+      // state.internalValue = state.tmpValue;
+      if (state.internalValue !== state.tmpValue) {
+        handleInputChange(_e);
+      }
     };
     var emitChange = function emitChange(type) {
       (0,external_vue_namespaceObject.nextTick)(function () {
@@ -4654,7 +4675,7 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       var newValue = e.target.value;
       var newDate = parseDate(newValue, props.type, props.multiple, props.format);
       var valueToTest = isArrayValue ? newDate : newDate[0];
-      var isDisabled = (_props$disabledDate = props.disabledDate) === null || _props$disabledDate === void 0 ? void 0 : _props$disabledDate.call(props, valueToTest);
+      var isDisabled = !valueToTest ? false : (_props$disabledDate = props.disabledDate) === null || _props$disabledDate === void 0 ? void 0 : _props$disabledDate.call(props, valueToTest);
       var isValidDate = newDate.reduce(function (valid, date) {
         return valid && date instanceof Date;
       }, true);
@@ -4672,7 +4693,7 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       var newValue = e.target.value;
       var newDate = parseDate(newValue, props.type, props.multiple, props.format);
       var valueToTest = isArrayValue ? newDate : newDate[0];
-      var isDisabled = (_props$disabledDate2 = props.disabledDate) === null || _props$disabledDate2 === void 0 ? void 0 : _props$disabledDate2.call(props, valueToTest);
+      var isDisabled = !valueToTest ? false : (_props$disabledDate2 = props.disabledDate) === null || _props$disabledDate2 === void 0 ? void 0 : _props$disabledDate2.call(props, valueToTest);
       var isValidDate = newDate.reduce(function (valid, date) {
         return valid && date instanceof Date;
       }, true);
@@ -4686,6 +4707,7 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       }
       teleportTo.value = (0,shared_namespaceObject.getFullscreenRoot)();
       state.isFocused = true;
+      emit('focus');
       if (e && e.type === 'focus') {
         return;
       }
@@ -4700,6 +4722,7 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
     };
     var handleBlur = function handleBlur(e) {
       var _pickerPanelRef$value3, _formItem$validate2;
+      emit('blur');
       if (state.internalFocus) {
         state.internalFocus = false;
         return;
@@ -4868,7 +4891,7 @@ function date_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       fontSizeCls: fontSizeCls,
       longWidthCls: longWidthCls,
       localReadonly: localReadonly,
-      allowCrossDayProp: allowCrossDayProp,
+      // allowCrossDayProp,
       ownPickerProps: ownPickerProps,
       teleportTo: teleportTo,
       pickerDropdownRef: pickerDropdownRef,
@@ -5064,7 +5087,7 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
     clickoutside: directives_namespaceObject.clickoutside
   },
   props: time_picker_objectSpread(time_picker_objectSpread(time_picker_objectSpread({}, datePickerProps), timePickerProps), timePanelProps),
-  emits: ['open-change', 'input', 'change', 'update:modelValue', 'clear', 'shortcut-change', 'pick-success'],
+  emits: ['open-change', 'input', 'change', 'update:modelValue', 'clear', 'shortcut-change', 'pick-success', 'blur', 'focus'],
   // slots: ['header'],
   slots: Object,
   setup: function setup(props, _ref) {
@@ -5292,6 +5315,17 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
     });
     var pickerPanelRef = (0,external_vue_namespaceObject.ref)(null);
     var handleClose = function handleClose(e) {
+      if (props.appendToBody) {
+        var _pickerPanelRef$value;
+        state.disableCloseUnderTransfer = true;
+        var pickerPanel = pickerPanelRef === null || pickerPanelRef === void 0 || (_pickerPanelRef$value = pickerPanelRef.value) === null || _pickerPanelRef$value === void 0 ? void 0 : _pickerPanelRef$value.$el;
+        if (e && pickerPanel !== null && pickerPanel !== void 0 && pickerPanel.contains(e.target)) {
+          return;
+        }
+        state.visible = false;
+        e === null || e === void 0 || e.preventDefault();
+        e === null || e === void 0 || e.stopPropagation();
+      }
       if (state.disableCloseUnderTransfer) {
         state.disableCloseUnderTransfer = false;
         return false;
@@ -5302,9 +5336,9 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
         return;
       }
       if (state.visible) {
-        var _pickerPanelRef$value;
-        var pickerPanel = pickerPanelRef === null || pickerPanelRef === void 0 || (_pickerPanelRef$value = pickerPanelRef.value) === null || _pickerPanelRef$value === void 0 ? void 0 : _pickerPanelRef$value.$el;
-        if (e && pickerPanel !== null && pickerPanel !== void 0 && pickerPanel.contains(e.target)) {
+        var _pickerPanelRef$value2;
+        var _pickerPanel = pickerPanelRef === null || pickerPanelRef === void 0 || (_pickerPanelRef$value2 = pickerPanelRef.value) === null || _pickerPanelRef$value2 === void 0 ? void 0 : _pickerPanelRef$value2.$el;
+        if (e && _pickerPanel !== null && _pickerPanel !== void 0 && _pickerPanel.contains(e.target)) {
           return;
         }
         state.visible = false;
@@ -5352,7 +5386,7 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
     var handleInputChange = function handleInputChange(e) {
       var _props$disabledDate;
       var isArrayValue = props.type.includes('range') || props.multiple;
-      var oldValue = visualValue.value;
+      // const oldValue = visualValue.value;
       var newValue = e.target.value;
       var newDate = parseDate(newValue, props.type, props.multiple, props.format);
       var valueToTest = isArrayValue ? newDate : newDate[0];
@@ -5360,7 +5394,9 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       var isValidDate = newDate.reduce(function (valid, date) {
         return valid && date instanceof Date;
       }, true);
-      if (newValue !== oldValue && !isDisabled && isValidDate) {
+      // 这里不需要进行新旧数据对比是因为input输入的时候visualValue的computed依赖始终是最新的
+      // if (newValue !== oldValue && !isDisabled && isValidDate) {
+      if (!isDisabled && isValidDate) {
         emitChange(props.type);
         state.internalValue = newDate;
       } else {
@@ -5388,6 +5424,7 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       }
       teleportTo.value = (0,shared_namespaceObject.getFullscreenRoot)();
       state.isFocused = true;
+      emit('focus');
       if (e && e.type === 'focus') {
         return;
       }
@@ -5397,11 +5434,12 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       }
     };
     var reset = function reset() {
-      var _pickerPanelRef$value2, _pickerPanelRef$value3;
-      pickerPanelRef === null || pickerPanelRef === void 0 || (_pickerPanelRef$value2 = pickerPanelRef.value) === null || _pickerPanelRef$value2 === void 0 || (_pickerPanelRef$value3 = _pickerPanelRef$value2.reset) === null || _pickerPanelRef$value3 === void 0 || _pickerPanelRef$value3.call(_pickerPanelRef$value2);
+      var _pickerPanelRef$value3, _pickerPanelRef$value4;
+      pickerPanelRef === null || pickerPanelRef === void 0 || (_pickerPanelRef$value3 = pickerPanelRef.value) === null || _pickerPanelRef$value3 === void 0 || (_pickerPanelRef$value4 = _pickerPanelRef$value3.reset) === null || _pickerPanelRef$value4 === void 0 || _pickerPanelRef$value4.call(_pickerPanelRef$value3);
     };
     var handleBlur = function handleBlur(e) {
-      var _pickerPanelRef$value4, _formItem$validate2;
+      var _pickerPanelRef$value5, _formItem$validate2;
+      emit('blur');
       if (state.internalFocus) {
         state.internalFocus = false;
         return;
@@ -5414,7 +5452,7 @@ function time_picker_objectSpread(e) { for (var r = 1; r < arguments.length; r++
       onSelectionModeChange(props.type);
       state.internalValue = state.internalValue.slice();
       reset();
-      pickerPanelRef === null || pickerPanelRef === void 0 || (_pickerPanelRef$value4 = pickerPanelRef.value) === null || _pickerPanelRef$value4 === void 0 || _pickerPanelRef$value4.onToggleVisibility(false);
+      pickerPanelRef === null || pickerPanelRef === void 0 || (_pickerPanelRef$value5 = pickerPanelRef.value) === null || _pickerPanelRef$value5 === void 0 || _pickerPanelRef$value5.onToggleVisibility(false);
       formItem === null || formItem === void 0 || (_formItem$validate2 = formItem.validate) === null || _formItem$validate2 === void 0 || _formItem$validate2.call(formItem, 'blur');
     };
     var handleKeydown = function handleKeydown(e) {

package/lib/date-picker/panel/date-range.d.ts

@@ -56,7 +56,7 @@ declare const dateRangePanelProps: {
         readonly default: "yyyy-MM-dd";
     };
     readonly timePickerOptions: {
-        readonly type: PropType<Record<string, any>>;
+        readonly type: PropType<Record<string, unknown>>;
         readonly default: () => {};
     };
     readonly shortcutSelectedIndex: {
@@ -120,7 +120,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "yyyy-MM-dd";
     };
     readonly timePickerOptions: {
-        readonly type: PropType<Record<string, any>>;
+        readonly type: PropType<Record<string, unknown>>;
         readonly default: () => {};
     };
     readonly shortcutSelectedIndex: {
@@ -255,7 +255,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "yyyy-MM-dd";
     };
     readonly timePickerOptions: {
-        readonly type: PropType<Record<string, any>>;
+        readonly type: PropType<Record<string, unknown>>;
         readonly default: () => {};
     };
     readonly shortcutSelectedIndex: {
@@ -273,7 +273,7 @@ declare const _default: import("vue").DefineComponent<{
     readonly confirm: boolean;
     readonly clearable: boolean;
     readonly format: string;
-    readonly timePickerOptions: {};
+    readonly timePickerOptions: Record<string, unknown>;
     readonly splitPanels: boolean;
     readonly shortcuts: DatePickerShortcutsType;
     readonly shortcutClose: boolean;

package/lib/date-picker/panel/time-range.d.ts

@@ -121,10 +121,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "bottom-start";
         readonly validator: (value: any) => boolean;
     };
-    transfer: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
     appendToBody: {
         readonly type: BooleanConstructor;
         readonly default: false;
@@ -413,10 +409,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "bottom-start";
         readonly validator: (value: any) => boolean;
     };
-    transfer: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
     appendToBody: {
         readonly type: BooleanConstructor;
         readonly default: false;
@@ -483,7 +475,6 @@ declare const _default: import("vue").DefineComponent<{
     open: boolean;
     multiple: boolean;
     placeholder: string;
-    transfer: boolean;
     steps: number[];
     behavior: "normal" | "simplicity";
     clearable: boolean;

package/lib/date-picker/panel/time.d.ts

@@ -129,10 +129,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "bottom-start";
         readonly validator: (value: any) => boolean;
     };
-    transfer: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
     appendToBody: {
         readonly type: BooleanConstructor;
         readonly default: false;
@@ -190,7 +186,7 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
 }, {
-    visibleDate: import("vue").ComputedRef<any>;
+    visibleDate: import("vue").Ref<any>;
     showSeconds: import("vue").ComputedRef<boolean>;
     timeSlots: import("vue").ComputedRef<any[]>;
     disabledHMS: import("vue").ComputedRef<IDisabledHMS>;
@@ -363,10 +359,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "bottom-start";
         readonly validator: (value: any) => boolean;
     };
-    transfer: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
     appendToBody: {
         readonly type: BooleanConstructor;
         readonly default: false;
@@ -436,7 +428,6 @@ declare const _default: import("vue").DefineComponent<{
     open: boolean;
     multiple: boolean;
     placeholder: string;
-    transfer: boolean;
     steps: number[];
     confirm: boolean;
     behavior: "normal" | "simplicity";

package/lib/date-picker/props.d.ts

@@ -54,10 +54,6 @@ export declare const datePickerProps: {
         readonly default: "bottom-start";
         readonly validator: (value: any) => boolean;
     };
-    readonly transfer: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
     readonly appendToBody: {
         readonly type: BooleanConstructor;
         readonly default: false;

package/lib/date-picker/time-picker.d.ts

@@ -81,10 +81,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "bottom-start";
         readonly validator: (value: any) => boolean;
     };
-    transfer: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
     appendToBody: {
         readonly type: BooleanConstructor;
         readonly default: false;
@@ -200,7 +196,7 @@ declare const _default: import("vue").DefineComponent<{
     shortcut: import("vue").Ref<any>;
     onSelectionModeChange: import("vue").Ref<(_type: any) => SelectionModeType>;
     tmpValue: import("vue").Ref<any>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("change" | "input" | "clear" | "update:modelValue" | "pick-success" | "open-change" | "shortcut-change")[], "change" | "input" | "clear" | "update:modelValue" | "pick-success" | "open-change" | "shortcut-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "change" | "focus" | "input" | "clear" | "update:modelValue" | "pick-success" | "open-change" | "shortcut-change")[], "blur" | "change" | "focus" | "input" | "clear" | "update:modelValue" | "pick-success" | "open-change" | "shortcut-change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     disabledHours: {
         readonly type: ArrayConstructor;
         readonly default: () => any[];
@@ -281,10 +277,6 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: "bottom-start";
         readonly validator: (value: any) => boolean;
     };
-    transfer: {
-        readonly type: BooleanConstructor;
-        readonly default: false;
-    };
     appendToBody: {
         readonly type: BooleanConstructor;
         readonly default: false;
@@ -342,6 +334,8 @@ declare const _default: import("vue").DefineComponent<{
         readonly default: true;
     };
 }>> & {
+    onFocus?: (...args: any[]) => any;
+    onBlur?: (...args: any[]) => any;
     onChange?: (...args: any[]) => any;
     onInput?: (...args: any[]) => any;
     onClear?: (...args: any[]) => any;
@@ -359,7 +353,6 @@ declare const _default: import("vue").DefineComponent<{
     open: boolean;
     multiple: boolean;
     placeholder: string;
-    transfer: boolean;
     behavior: "normal" | "simplicity";
     clearable: boolean;
     readonly: boolean;

package/lib/dialog/dialog.css

@@ -1,3 +1,133 @@
+:root {
+  --bk-prefix: bk;
+  --popover-max-height: 216px;
+  --primary-color: #3a84ff;
+  --success-color: #2dcb56;
+  --warning-color: #ff9c01;
+  --danger-color: #ea3636;
+  --default-color: #63656e;
+  --gray-color: #979ba5;
+  --light-gray: #c4c6cc;
+  --white-color: white;
+  --whitesmoke-color: #fafbfd;
+  --disable-color: #dcdee5;
+  --disable-bg-color: #f9fafd;
+  --border-color: #dcdee5;
+  --font-size-base: 12px;
+  --font-size-medium: 14px;
+  --font-size-large: 16px;
+  --line-height-base: 16px;
+  --line-height-medium: 16px;
+  --line-height-large: 18px;
+  --component-size-small: 26px;
+  --component-size-base: 32px;
+  --component-size-large: 40px;
+  --component-size-small-padding: 0 12px;
+  --component-size-base-padding: 0 14px;
+  --component-size-large-padding: 0 16px;
+  --border-width-base: 1px;
+  --border-style-base: solid;
+  --border-radius-base: 2px;
+  --border-style-color: var(--light-gray);
+  --input-disabled-bg: #fafbfd;
+  --input-disabled-border: var(--disable-color);
+  --input-height-base: var(--component-size-base);
+  --input-color: var(--default-color);
+  --input-bg: white;
+  --input-border-color: var(--light-gray);
+  --input-broder-radius: 3px;
+  --input-shadow-color: #a3c5fd;
+  --input-horizontal-padding: 8px;
+  --input-block-color: #f5f7fa;
+  --input-block-hover-color: #eaebf0;
+  --input-icon-size: var(--font-size-medium);
+  --input-maxlength-color: #979ba5;
+  --button-primary-hover-color: #5594fa;
+  --button-danger-hover-color: #ff5656;
+  --button-success-hover-color: #45e35f;
+  --button-warning-hover-color: #ffb848;
+  --button-default-hover-border-color: #979ba5;
+  --button-primary-active-color: #2c77f4;
+  --button-danger-active-color: #db2626;
+  --button-success-active-color: #1ab943;
+  --button-warning-active-color: #eb9000;
+  --button-selected-bg-color: #e1ecff;
+  --button-disabled-selected-bg-color: #f0f1f5;
+  --radio-font-color: #63656e;
+  --radio-active-color: #3a84ff;
+  --radio-hover-border-color: #979ba5;
+  --radio-disabled-border: #dcdee5;
+  --radio-disabled-font-color: #c4c6cc;
+  --radio-disabled-checked-bg: #a3c5fd;
+  --radio-button-checked-bg: #e1ecff;
+  --radio-button-disabled-checked-bg: #fafbfd;
+  --checkbox-disabled-checked-bg: #a3c5fd;
+  --fixed-navbar-background: #fff;
+  --fixed-navbar-boxshadow-color: rgba(0, 0, 0, 0.1);
+  --switch-default-color: #fff;
+  --switch-grey-color: #c4c6cc;
+  --breadcrumb-black-color: #979ba5;
+  --breadcrumb-primary-hover-color: #0082ff;
+  --breadcrumb-fn-main-color: #63656e;
+  --link-default-hover-color: #979ba5;
+  --link-primary-hover-color: #699df4;
+  --link-success-hover-color: #45e35f;
+  --link-warning-hover-color: #ffb848;
+  --link-danger-hover-color: #ff5656;
+  --link-default-disabled-color: #dcdee5;
+  --link-primary-disabled-color: #a3c5fd;
+  --link-success-disabled-color: #94f5a4;
+  --link-warning-disabled-color: #ffd695;
+  --link-danger-disabled-color: #fd9c9c;
+  --message-color: var(--default-color);
+  --message-primary-bg-color: #f0f8ff;
+  --message-primary-border-color: #e1ecff;
+  --message-primary-shadow-color: #e1e8f4;
+  --message-warning-bg-color: #fff4e2;
+  --message-warning-border-color: #ffe8c3;
+  --message-warning-shadow-color: #ede6db;
+  --message-success-bg-color: #f2fff4;
+  --message-success-border-color: #dcffe2;
+  --message-success-shadow-color: #cef0d7;
+  --message-danger-bg-color: #ffeded;
+  --message-danger-border-color: #ffdddd;
+  --message-danger-shadow-color: #f6dada;
+  --slider-default-bg: #dcdee5;
+  --slider-disable-bar-bg: #979ba5;
+  --menu-bg-color: #182132;
+  --submenu-bg-color: #151d2c;
+  --menu-active-bg-color: linear-gradient(90deg, #3f87ff 0%, #3a84ff 100%);
+  --menu-color: #96a2b9;
+  --menu-group-color: var(--default-color);
+  --menu-width: 260px;
+  --menu-collapse-width: 60px;
+  --menu-active-color: white;
+  --nav-header-bg-color: #182132;
+  --nav-bg-color: #182132;
+  --date-picker-disabled-bg: #fafbfd;
+  --date-picker-dropdown-mb: 4px;
+  --date-picker-dropdown-bg: #fff;
+  --table-bg-color: var(--white-color);
+  --table-border-color: #dcdee5;
+  --table-strip-color: #fafbfd;
+  --table-head-bg-color: #fafbfd;
+  --table-head-font-color: #313238;
+  --table-body-font-color: #63656e;
+  --table-row-hover-bg-color: #f5f7fa;
+  --table-row-active-bg-color: #f0f1f5;
+  --cascader-panel-border-color: #dcdee5;
+  --cascader-panel-hover: #f5f7fa;
+  --cascader-panel-active: #e1ecff;
+  --cascader-panel-disabled-bg: #fff;
+  --search-select-focus-border-color: var(--primary-color);
+  --search-select-focus-color: #3c96ff;
+  --search-select-font-color: var(--default-color);
+  --search-select-placeholder-color: var(--light-gray);
+  --search-select-message-color: var(--danger-color);
+  --search-select-menu-border-color: var(--disable-color);
+  --select-active-color: #e1ecff;
+  --select-hover-color: #f5f7fa;
+}
 .bk-infobox {
   font-size: 12px;
 }
@@ -20,16 +150,16 @@
   font-size: 42px;
 }
 .bk-infobox-icon.success {
-  color: #2dcb56;
+  color: var(--success-color);
 }
 .bk-infobox-icon.warning {
-  color: #ff9c01;
+  color: var(--warning-color);
 }
 .bk-infobox-icon.danger {
-  color: #ea3636;
+  color: var(--danger-color);
 }
 .bk-infobox-icon.loading {
-  color: #3a84ff;
+  color: var(--primary-color);
 }
 .bk-infobox-title {
   padding-right: 24px;
@@ -197,7 +327,7 @@
 .bk-dialog-title {
   display: inline-block;
   width: 100%;
-  color: #313238;
+  color: var(--table-head-font-color);
 }
 .bk-dialog-tool {
   position: absolute;
@@ -212,12 +342,12 @@
   padding: 0 24px;
   margin-top: 16px;
   margin-bottom: 24px;
-  color: #63656e;
+  color: var(--default-color);
 }
 .bk-dialog-footer {
   padding: 8px 24px;
-  background-color: #fafbfd;
-  border-top: 1px solid #dcdee5;
+  background-color: var(--whitesmoke-color);
+  border-top: 1px solid var(--table-border-color);
 }
 .bk-dialog-footer .bk-dialog-perv {
   float: left;