@qn-pandora/pandora-component 4.1.6 → 4.2.0

package/es/components/Table/index.js

@@ -66,15 +66,17 @@ import * as React from 'react';
 import classnames from 'classnames';
 import { observer } from 'mobx-react';
 import { observable, action, computed } from 'mobx';
-import { size, xor, union, unionBy, differenceBy, get, isEqual } from 'lodash';
+import { size, xor, union, unionBy, differenceBy, get, isEqual, includes } from 'lodash';
 import { Table as AntTable, Checkbox } from 'antd';
 import { ConfigContext } from 'antd/es/config-provider';
+import { toaster as toasterStore } from '@qn-pandora/app-sdk';
 import { EmptyIcon } from '@qn-pandora/pandora-component-icons';
 import bind from '../../utils/bind';
 import { formatString } from '../../utils/language';
 import { SDK_PREFIX } from '../../constants/style';
 import { TableLocale } from '../../constants/language/table/type';
 import { ColumnTag } from './ColumnTag/ColumnTag';
+import ColumnSetting from './ColumnSetting';
 /**
  * pandora2.0风格的表格
  */
@@ -84,6 +86,7 @@ var Table = /** @class */ (function (_super) {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.indeterminate = false;
         _this.checkAll = false;
+        _this.hiddenColumn = _this.props.hiddenColumns;
         return _this;
     }
     Table.prototype.UNSAFE_componentWillReceiveProps = function (nextProps) {
@@ -114,6 +117,9 @@ var Table = /** @class */ (function (_super) {
                     : selectedRowsOfCurrentPage);
             }
         }
+        if (isEqual(nextProps.hiddenColumns, this.props.hiddenColumns)) {
+            this.setHiddenColumn(nextProps.hiddenColumns);
+        }
     };
     Object.defineProperty(Table.prototype, "selectedRowKeys", {
         get: function () {
@@ -174,6 +180,88 @@ var Table = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(Table.prototype, "columnsSettingOptions", {
+        // 列设置 options
+        get: function () {
+            var options = [];
+            var _a = this.props.columns, columns = _a === void 0 ? [] : _a;
+            columns.forEach(function (col) {
+                if (col.key &&
+                    col.key.toString().length > 0 &&
+                    col.configurable !== false) {
+                    options.push({
+                        label: col.colTitle || col.title,
+                        value: col.key.toString()
+                    });
+                }
+            });
+            return options;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Table.prototype, "columnKeys", {
+        get: function () {
+            var _a = this.props.columns, columns = _a === void 0 ? [] : _a;
+            var allKeys = [];
+            var unconfigableKeys = [];
+            var resetKeys = [];
+            columns.forEach(function (col) {
+                if (col.key) {
+                    if (col.configurable === false) {
+                        unconfigableKeys.push(col.key.toString());
+                    }
+                    else {
+                        resetKeys.push(col.key.toString());
+                    }
+                    allKeys.push(col.key.toString());
+                }
+            });
+            return {
+                allKeys: allKeys,
+                unconfigableKeys: unconfigableKeys,
+                resetKeys: resetKeys
+            };
+        },
+        enumerable: true,
+        configurable: true
+    });
+    // 隐藏key
+    Table.prototype.handleHideColumnsChange = function (keys) {
+        var _a, _b;
+        var _c = this.columnKeys, resetKeys = _c.resetKeys, unconfigableKeys = _c.unconfigableKeys;
+        if (unconfigableKeys.length === 0 && isEqual(keys, resetKeys)) {
+            // 提示。至少需要勾选一列
+            return toasterStore.warning(formatString(TableLocale.hide_column_tooltip, this.context.locale));
+        }
+        this.setHiddenColumn(keys);
+        (_b = (_a = this.props).onHiddenColumnsChange) === null || _b === void 0 ? void 0 : _b.call(_a, keys);
+    };
+    Table.prototype.getColumns = function () {
+        var _a = this.props, showColumnSetting = _a.showColumnSetting, columns = _a.columns, columnSettingOverlayClass = _a.columnSettingOverlayClass;
+        var hiddenColumn = this.hiddenColumn || [];
+        if (!showColumnSetting) {
+            return columns;
+        }
+        // 获取到列设置的options
+        var columnsSettingOptions = this.columnsSettingOptions;
+        var selectedCols = __spread((columns || []).filter(function (item) {
+            if (item.configurable === false || !includes(hiddenColumn, item.key)) {
+                return true;
+            }
+            return false;
+        }));
+        var length = selectedCols.length;
+        if (length > 0) {
+            var lastCol = selectedCols.pop();
+            var title = (React.createElement("span", { className: SDK_PREFIX + "-last-column-title" },
+                lastCol.title,
+                React.createElement("span", { className: SDK_PREFIX + "-last-column-setting" },
+                    React.createElement(ColumnSetting, { options: columnsSettingOptions, hiddenKeys: this.hiddenColumn, onHiddenKeysChange: this.handleHideColumnsChange, overlayClass: columnSettingOverlayClass }))));
+            selectedCols.push(__assign(__assign({}, lastCol), { title: title }));
+        }
+        return selectedCols;
+    };
     Table.prototype.getRowKey = function (row, index) {
         var rowKey = this.props.rowKey;
         if (typeof rowKey === 'function') {
@@ -187,6 +275,9 @@ var Table = /** @class */ (function (_super) {
     Table.prototype.setCheckAll = function (checkAll) {
         this.checkAll = checkAll;
     };
+    Table.prototype.setHiddenColumn = function (hiddenColumn) {
+        this.hiddenColumn = hiddenColumn;
+    };
     // 设置全选checkout的状态
     Table.prototype.setCheckboxStatus = function (selectedRowsOfCurrentPage, dataSource) {
         if (selectedRowsOfCurrentPage === void 0) { selectedRowsOfCurrentPage = []; }
@@ -258,9 +349,9 @@ var Table = /** @class */ (function (_super) {
     Table.prototype.render = function () {
         var _a, _b;
         var _this = this;
-        var _c = this.props, className = _c.className, batchOptions = _c.batchOptions, scroll = _c.scroll, locale = _c.locale, emptyText = _c.emptyText, restProps = __rest(_c, ["className", "batchOptions", "scroll", "locale", "emptyText"]);
+        var _c = this.props, className = _c.className, batchOptions = _c.batchOptions, scroll = _c.scroll, locale = _c.locale, emptyText = _c.emptyText, columns = _c.columns, restProps = __rest(_c, ["className", "batchOptions", "scroll", "locale", "emptyText", "columns"]);
         return (React.createElement("div", null,
-            React.createElement(AntTable, __assign({ scroll: scroll, locale: __assign({ emptyText: this.emptyTextComp }, locale) }, restProps, { className: classnames(SDK_PREFIX + "-table-wrapper", (_a = {}, _a[SDK_PREFIX + "-table-scrollX"] = get(scroll, 'x'), _a), (_b = {}, _b[SDK_PREFIX + "-table-scrollY"] = get(scroll, 'y'), _b), className), 
+            React.createElement(AntTable, __assign({ scroll: scroll, locale: __assign({ emptyText: this.emptyTextComp }, locale), columns: this.getColumns() }, restProps, { className: classnames(SDK_PREFIX + "-table-wrapper", (_a = {}, _a[SDK_PREFIX + "-table-scrollX"] = get(scroll, 'x'), _a), (_b = {}, _b[SDK_PREFIX + "-table-scrollY"] = get(scroll, 'y'), _b), className), 
                 // 涉及到权限
                 // getCheckboxProps只能放到tableBatchWrapper里，因为selectedRowKeys在那个组件计算
                 rowSelection: batchOptions && this.props.rowSelection
@@ -294,6 +385,10 @@ var Table = /** @class */ (function (_super) {
         observable,
         __metadata("design:type", Object)
     ], Table.prototype, "checkAll", void 0);
+    __decorate([
+        observable.ref,
+        __metadata("design:type", Object)
+    ], Table.prototype, "hiddenColumn", void 0);
     __decorate([
         computed,
         __metadata("design:type", Object),
@@ -319,6 +414,28 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:type", Object),
         __metadata("design:paramtypes", [])
     ], Table.prototype, "emptyTextComp", null);
+    __decorate([
+        computed,
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Table.prototype, "columnsSettingOptions", null);
+    __decorate([
+        computed,
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Table.prototype, "columnKeys", null);
+    __decorate([
+        bind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "handleHideColumnsChange", null);
+    __decorate([
+        bind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "getColumns", null);
     __decorate([
         bind,
         __metadata("design:type", Function),
@@ -339,6 +456,13 @@ var Table = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [Boolean]),
         __metadata("design:returntype", void 0)
     ], Table.prototype, "setCheckAll", null);
+    __decorate([
+        bind,
+        action,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Array]),
+        __metadata("design:returntype", void 0)
+    ], Table.prototype, "setHiddenColumn", null);
     __decorate([
         bind,
         __metadata("design:type", Function),

package/es/components/Table/style.css

@@ -1722,3 +1722,7 @@ textarea.ant-pagination-options-quick-jumper input {
 .ant-empty .ant-empty-description {
   color: #bfbfbf;
 }
+.pandora-sdk-last-column-title .pandora-sdk-last-column-setting {
+  position: absolute;
+  right: 12px;
+}

package/es/components/Table/style.less

@@ -312,3 +312,10 @@
     color: @input-placeholder-color;
   }
 }
+
+.@{sdk-prefix}-last-column-title {
+  .@{sdk-prefix}-last-column-setting {
+    position: absolute;
+    right: 12px;
+  }
+}

package/es/constants/language/datetime/en.js

@@ -1,10 +1,10 @@
 export var datetime_en = {
-    title: 'Time range',
-    clear: 'Clear custom',
+    title: 'Time Range',
+    clear: 'Clear Custom',
     clart_text: 'Click to apply the global time range',
     confirm: 'Confirm',
     range: {
-        title: 'Date & Time Range',
+        title: 'Absolute Time',
         beforeTime: 'Before',
         afterTime: 'Since',
         betweenTime: 'Between',
@@ -13,45 +13,45 @@ export var datetime_en = {
     },
     preset: {
         title: 'Presets',
-        m5: 'Last 5 minutes',
-        m15: 'Last 15 minutes',
-        m30: 'Last 30 minutes',
-        m60: 'Last 60 minutes',
-        h3: 'Last 3 hours',
-        h4: 'Last 4 hours',
-        h6: 'Last 6 hours',
-        h12: 'Last 12 hours',
-        h24: 'Last 24 hours',
-        d3: 'Last 3 days',
-        d7: 'Last 7 days',
-        d30: 'Last 30 days',
+        m5: 'Last 5 Minutes',
+        m15: 'Last 15 Minutes',
+        m30: 'Last 30 Minutes',
+        m60: 'Last 60 Minutes',
+        h3: 'Last 3 Hours',
+        h4: 'Last 4 Hours',
+        h6: 'Last 6 Hours',
+        h12: 'Last 12 Hours',
+        h24: 'Last 24 Hours',
+        d3: 'Last 3 Days',
+        d7: 'Last 7 Days',
+        d30: 'Last 30 Days',
         today: 'Today',
-        week: 'Week to date',
-        month: 'Month to date',
-        quarter: 'Quarter to date',
-        year: 'Year to date',
+        week: 'This Week',
+        month: 'This Month',
+        quarter: 'This Quarter',
+        year: 'This Year',
         yesterDay: 'Yesterday',
-        theDayBeforYesterDay: 'Day before Yesterday',
-        previousWeek: 'Previous week',
-        previousMonth: 'Previous month',
-        previousQuarter: 'Previous quarter',
-        previousYear: 'Previous year',
-        AllTime: 'All time'
+        theDayBeforYesterDay: 'Day Before Yesterday',
+        previousWeek: 'Previous Week',
+        previousMonth: 'Previous Month',
+        previousQuarter: 'Previous Quarter',
+        previousYear: 'Previous Year',
+        AllTime: 'All Time'
     },
     relative: {
-        title: 'Relative',
-        change_time: 'Change time',
+        title: 'Relative Time',
+        change_time: 'Change Time',
         now_text: 'Now',
-        now: 'Now (realtime)',
-        'now-static': 'Now (fixed)',
-        s: ' seconds ago',
-        m: ' minutes ago',
-        h: ' hours ago',
-        d: ' days ago',
-        w: ' weeks ago',
-        M: ' months ago',
-        Q: ' quarters ago',
-        y: ' years ago'
+        now: 'Now (Realtime)',
+        'now-static': 'Now (Fixed)',
+        s: ' seconds Ago',
+        m: ' Minutes Ago',
+        h: ' Hours Ago',
+        d: ' Days Ago',
+        w: ' weeks Ago',
+        M: ' months Ago',
+        Q: ' quarters Ago',
+        y: ' years Ago'
     },
     quarter: {
         title: 'Quarter'

package/es/constants/language/table/en.js

@@ -1,4 +1,7 @@
 export var table_en = {
     empty: 'No Data',
-    selected: 'Selected'
+    selected: 'Selected',
+    check_all: 'Check All',
+    search: 'Search',
+    hide_column_tooltip: 'At least one column needs to be checked!'
 };

package/es/constants/language/table/type.d.ts

@@ -1,5 +1,8 @@
 export interface ITableLocale {
     empty: string;
     selected: string;
+    check_all: string;
+    search: string;
+    hide_column_tooltip: string;
 }
 export declare const TableLocale: ITableLocale;

package/es/constants/language/table/zh.js

@@ -1,4 +1,7 @@
 export var table_zh = {
     empty: '暂无数据',
-    selected: '已选'
+    selected: '已选',
+    check_all: '全选',
+    search: '搜索',
+    hide_column_tooltip: '至少需要勾选一列！'
 };

package/es/index.css

@@ -4460,6 +4460,7 @@ textarea.ant-input {
   border-bottom-width: 0px;
   background-color: #fafafa;
   font-weight: 500;
+  position: relative;
 }
 .pandora-sdk-collapse-primary > .ant-collapse-item > .ant-collapse-header .pandora-sdk-header-line {
   width: 2px;
@@ -4876,6 +4877,7 @@ textarea.ant-input {
 }
 .pandora-sdk-descriptions .ant-descriptions-item-content {
   color: #333;
+  overflow: hidden;
 }
 .ant-drawer {
   position: fixed;
@@ -5138,6 +5140,9 @@ textarea.ant-input {
   height: 60px;
   line-height: 60px;
 }
+.pandora-sdk-drawer .ant-drawer-header-title {
+  overflow: hidden;
+}
 .pandora-sdk-drawer-size-small {
   max-width: 38%;
 }
@@ -5163,6 +5168,11 @@ textarea.ant-input {
 .pandora-sdk-drawer-close-icon {
   margin-left: 24px;
 }
+.pandora-sdk-drawer-header-full-icon {
+  margin-left: 24px;
+  color: #333;
+  font-size: 14px;
+}
 .ant-upload {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
@@ -7880,12 +7890,19 @@ span.ant-radio + * {
 .ant-radio-button-wrapper.ant-radio-button-wrapper-rtl.ant-radio-button-wrapper-disabled:first-child {
   border-right-color: #d9d9d9;
 }
+.pandora-sdk-solid-radio-group .ant-radio-button-wrapper:not(.pandora-sdk-solid-radio-group .ant-radio-button-wrapper-checked)::before {
+  background-color: #bfbfbf;
+}
 .pandora-sdk-solid-radio-group .ant-radio-button-wrapper {
   padding: 0 12px;
 }
 .pandora-sdk-solid-radio-group .ant-radio-button-wrapper:not(.pandora-sdk-solid-radio-group .ant-radio-button-wrapper-checked) {
   border-color: #d9d9d9;
 }
+.pandora-sdk-solid-radio-group .ant-radio-button-wrapper:focus-within {
+  -webkit-box-shadow: unset;
+          box-shadow: unset;
+}
 .pandora-sdk-solid-radio-group .ant-radio:not(.pandora-sdk-solid-radio-group .ant-radio-checked) .ant-radio-inner {
   border-color: #d9d9d9;
 }
@@ -12245,6 +12262,10 @@ textarea.ant-pagination-options-quick-jumper input {
 .ant-empty .ant-empty-description {
   color: #bfbfbf;
 }
+.pandora-sdk-last-column-title .pandora-sdk-last-column-setting {
+  position: absolute;
+  right: 12px;
+}
 .pandora-sdk-tabs .pandora-sdk-tabs-tab {
   position: relative;
 }
@@ -20389,18 +20410,6 @@ _:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-year-panel .ant-picker-ce
 .pandora-sdk-modal-close-icon:hover {
   background: #f4f5f6;
 }
-.pandora-sdk-popover-inline-list {
-  display: inline-block;
-  vertical-align: middle;
-}
-.pandora-sdk-popover-inline-list .pandora-sdk-popover-inline-item {
-  display: inline-block;
-  height: 100%;
-  margin-right: 12px;
-}
-.pandora-sdk-popover-inline-list .pandora-sdk-popover-inline-item i {
-  color: #2c6dd2;
-}
 .pandora-sdk-item {
   color: #2c6dd2;
   cursor: pointer;
@@ -20423,6 +20432,18 @@ _:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-year-panel .ant-picker-ce
   color: inherit;
   cursor: inherit;
 }
+.pandora-sdk-popover-inline-list {
+  display: inline-block;
+  vertical-align: middle;
+}
+.pandora-sdk-popover-inline-list .pandora-sdk-popover-inline-item {
+  display: inline-block;
+  height: 100%;
+  margin-right: 12px;
+}
+.pandora-sdk-popover-inline-list .pandora-sdk-popover-inline-item i {
+  color: #2c6dd2;
+}
 .pandora-sdk-popover-item {
   display: inline-block;
   line-height: 18px;
@@ -20452,6 +20473,53 @@ _:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-year-panel .ant-picker-ce
 .pandora-sdk-prev-button {
   margin-right: 10px;
 }
+.pandora-sdk-table-column-setting-popover {
+  padding: 10px;
+  width: 100%;
+  width: 600px;
+  max-height: 300px;
+  overflow-y: auto;
+}
+.pandora-sdk-table-column-setting-popover .pandora-sdk-table-column-setting-header {
+  border-bottom: 1px solid #d9d9d9;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  padding-bottom: 10px;
+}
+.pandora-sdk-table-column-setting-popover .pandora-sdk-table-column-setting-header .pandora-sdk-table-column-setting-all-check {
+  line-height: 32px;
+}
+.pandora-sdk-table-column-setting-popover .pandora-sdk-table-column-setting-header .pandora-sdk-table-column-setting-search-input {
+  width: 200px;
+}
+.pandora-sdk-table-column-setting-icon {
+  color: #333;
+}
+.pandora-sdk-table-column-setting-content {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -ms-flex-wrap: wrap;
+      flex-wrap: wrap;
+}
+.pandora-sdk-table-column-setting-content > div {
+  -webkit-box-flex: 0;
+      -ms-flex: 0 0 33.33%;
+          flex: 0 0 33.33%;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.pandora-sdk-table-column-setting-content > div .pandora-sdk-table-column-setting-checkbox-container .pandora-sdk-table-column-setting-checkbox {
+  width: 100%;
+  overflow: hidden;
+}
+.pandora-sdk-table-column-setting-content > div .pandora-sdk-table-column-setting-checkbox-container .pandora-sdk-table-column-setting-checkbox > span:nth-child(2) {
+  overflow: hidden;
+}
 .pandora-sdk-table-columnTag-groupTag {
   padding: 4px;
   height: 24px;
@@ -20658,6 +20726,34 @@ _:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-year-panel .ant-picker-ce
 .pandora-sdk-transfer-list-body .pandora-sdk-transfer-mb10 {
   margin-bottom: 10px;
 }
+.pandora-sdk-panel-title {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
+  font-size: 12px;
+  color: #42526e;
+  cursor: pointer;
+  padding-bottom: 16px;
+  border-bottom: 1px solid #d9d9d9;
+}
+.pandora-sdk-panel-title .icon {
+  font-size: 14px;
+}
+.pandora-sdk-panel-content {
+  padding: 20px 0 0 0;
+}
+.pandora-sdk-panel-hidden {
+  display: none;
+}
+.pandora-sdk-panel {
+  margin-bottom: 20px;
+}
+.pandora-sdk-panel-disable {
+  cursor: default;
+}
 .pandora-sdk-datetime-mobile-pick-range-preset-head {
   display: -webkit-box;
   display: -ms-flexbox;
@@ -20694,31 +20790,3 @@ _:-ms-fullscreen .ant-picker-range-wrapper .ant-picker-year-panel .ant-picker-ce
   border-radius: 2px;
   border: 2px solid #939393;
 }
-.pandora-sdk-panel-title {
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  font-size: 12px;
-  color: #42526e;
-  cursor: pointer;
-  padding-bottom: 16px;
-  border-bottom: 1px solid #d9d9d9;
-}
-.pandora-sdk-panel-title .icon {
-  font-size: 14px;
-}
-.pandora-sdk-panel-content {
-  padding: 20px 0 0 0;
-}
-.pandora-sdk-panel-hidden {
-  display: none;
-}
-.pandora-sdk-panel {
-  margin-bottom: 20px;
-}
-.pandora-sdk-panel-disable {
-  cursor: default;
-}

package/es/index.less

@@ -38,15 +38,16 @@
 @import './components/DateTimePicker/BaseMobile/style.less';
 @import './components/DateTimePicker/DisplayInput/style.less';
 @import './components/Drawer/CloseIcon/style.less';
-@import './components/OptionList/InlineOptionList/style.less';
 @import './components/OptionList/OptionItem/style.less';
+@import './components/OptionList/InlineOptionList/style.less';
 @import './components/OptionList/PopoverOptionList/style.less';
 @import './components/Steps/ControlButton/style.less';
+@import './components/Table/ColumnSetting/style.less';
 @import './components/Table/ColumnTag/style.less';
 @import './components/TagList/Tag/style.less';
 @import './components/TagList/TagSwitch/style.less';
 @import './components/Timeline/TimelineItem/style.less';
 @import './components/Transfer/List/style.less';
 @import './components/Transfer/ListBody/style.less';
-@import './components/DateTimePicker/BaseMobile/Absolute/style.less';
-@import './components/DateTimePicker/Collapse/Panel/style.less';
+@import './components/DateTimePicker/Collapse/Panel/style.less';
+@import './components/DateTimePicker/BaseMobile/Absolute/style.less';

package/es/style/theme.less

@@ -72,6 +72,7 @@
 @font-color-6: #666;
 @font-color-9: #999;
 @font-color-7: #333;
+@font-color-8: #8c8c8c;
 @secondary-font-color: #c1c7d0; // phoenix
 @disabled-text-color: #9eaec5; // pandora-visualization pheonix
 @log-font-family: 'Droid Sans Mono', 'Consolas', 'Monaco', 'Courier New',
@@ -110,6 +111,7 @@
 @border-color-normal: #e5e5e5;
 @border-color-1: #d9d9d9;
 @border-color-2: #bfbfbf;
+@border-color-3: #e9e9e9;
 @modal-header-border-color: rgba(0, 0, 0, 0.09);
 
 // icon------------------------
@@ -384,11 +386,20 @@
 @image-operator-hover-bg: rgba(51, 51, 51, 0.7);
 @agent-agent-message-background-color: #f7f7f8; // 用户框背景色
 @agent-user-avatar-color: #e6902d; // 机器人用户头像颜色;
-
-// close icon hover 颜色
+@agent-no-data-background-color: #e0edf8; // close icon hover 颜色
+@agent-session-title-color: #595959;
 @close-icon-hover-color: #f4f5f6;
 
 @agent-markdown-scorll-bar-color: #c9cdd4;
 @agent-markdown-header-background-color: rgb(52, 53, 65);
+@agent-box-shadow-color: rgba(53, 53, 53, 0.07);
 @agent-cursor-color: #282828;
+@agent-spl-background-color: #edeff2;
+@agent-example-desc-color: #595959;
 @agent-input-border-color: #e9e9e9;
+@agent-border-color: #e8e8e8;
+@background-color-fa: #fafafa;
+@background-color-f5: #f5f5f5;
+@background-color-f4: #f4f5f6;
+@background-linear-color: rgba(244, 245, 246, 0);
+@background-color-e2: #e2e4e6;

package/lib/components/Collapse/index.js

@@ -48,15 +48,16 @@ var ECollapseType;
 function Collapse(props) {
     var children = props.children, className = props.className, _a = props.type, type = _a === void 0 ? ECollapseType.Simple : _a, expandIconPosition = props.expandIconPosition, onDelete = props.onDelete, others = __rest(props, ["children", "className", "type", "expandIconPosition", "onDelete"]);
     var position = react_1.useMemo(function () {
-        return type === ECollapseType.Primary && !expandIconPosition
+        return type === ECollapseType.Primary && !expandIconPosition && !onDelete
             ? 'right'
             : expandIconPosition || 'left';
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [expandIconPosition, type]);
     var showArrow = react_1.useMemo(function () {
         return type !== ECollapseType.Dashed;
     }, [type]);
     var getExtra = react_1.useCallback(function (index) {
-        if (type === ECollapseType.Dashed) {
+        if (type === ECollapseType.Dashed || onDelete) {
             return (react_1.default.createElement(icons_1.DeleteOutlined, { onClick: function () {
                     if (onDelete) {
                         onDelete(index);

package/lib/components/Collapse/style.css

@@ -184,6 +184,7 @@
   border-bottom-width: 0px;
   background-color: #fafafa;
   font-weight: 500;
+  position: relative;
 }
 .pandora-sdk-collapse-primary > .ant-collapse-item > .ant-collapse-header .pandora-sdk-header-line {
   width: 2px;

package/lib/components/Collapse/style.less

@@ -31,6 +31,7 @@
     border-bottom-width: 0px;
     background-color: @table-thead-bg;
     font-weight: 500;
+    position: relative;
     .@{sdk-prefix}-header-line {
       width: 2px;
       height: 16px;

package/lib/components/Descriptions/style.css

@@ -328,4 +328,5 @@
 }
 .pandora-sdk-descriptions .ant-descriptions-item-content {
   color: #333;
+  overflow: hidden;
 }