@zgfe/modules-page 1.0.1-alpha.2 → 1.0.1-alpha.21

package/dist/esm/components/groupModal/pageItem.js

@@ -21,6 +21,7 @@ import "./index.less";
 import { Input, Select } from 'antd';
 import _ from 'lodash';
 import { getPageEsData } from "./utils";
+import InputSelect from "./inputSelect";
 var PageItem = function PageItem(props) {
   var prefix = "".concat(classPrefix, "-item");
   var operatorStore = [{
@@ -42,20 +43,19 @@ var PageItem = function PageItem(props) {
     _useState2 = _slicedToArray(_useState, 2),
     pageList = _useState2[0],
     setPageList = _useState2[1];
-  // 文本框中输入关键词搜索
-  var _useState3 = useState(''),
+  var _useState3 = useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
-    searchValue = _useState4[0],
-    setSearchValue = _useState4[1];
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    timer = _useState6[0],
-    setTimer = _useState6[1];
+    timer = _useState4[0],
+    setTimer = _useState4[1];
   // param options
-  var _useState7 = useState(props.defaultOption || []),
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    paramOption = _useState6[0],
+    setParamOption = _useState6[1];
+  var _useState7 = useState([]),
     _useState8 = _slicedToArray(_useState7, 2),
-    paramOption = _useState8[0],
-    setParamOption = _useState8[1];
+    defaultOption = _useState8[0],
+    setDefaultOption = _useState8[1];
   var _useContext = useContext(BizGlobalDataContext),
     currentApp = _useContext.currentApp;
   useEffect(function () {
@@ -66,7 +66,11 @@ var PageItem = function PageItem(props) {
         }, item);
       });
     });
+    getPageEsData('', setDefaultOption, currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId, currentApp === null || currentApp === void 0 ? void 0 : currentApp.platform);
   }, []);
+  useEffect(function () {
+    setParamOption(new Array((props.value || [newItem]).length).fill(defaultOption));
+  }, [defaultOption]);
   useEffect(function () {
     props.onChange && props.onChange(pageList.map(function (item) {
       var data = _.cloneDeep(item);
@@ -80,6 +84,9 @@ var PageItem = function PageItem(props) {
         id: util.guid()
       }, newItem)]);
     });
+    setParamOption(function (options) {
+      return [].concat(_toConsumableArray(options), [defaultOption]);
+    });
   };
   var onDelete = function onDelete(index) {
     if (pageList.length <= 1) return;
@@ -88,6 +95,11 @@ var PageItem = function PageItem(props) {
       data.splice(index, 1);
       return data;
     });
+    setParamOption(function (options) {
+      var data = _.cloneDeep(options);
+      data.splice(index, 1);
+      return data;
+    });
   };
   // 改变关系
   var onChangeOperator = function onChangeOperator(operator, index) {
@@ -97,44 +109,34 @@ var PageItem = function PageItem(props) {
       return data;
     });
   };
-  // 键盘enter确定时的方法
-  var handleValue = function handleValue(e, index) {
-    //当点击回车键或失去焦点后执行，并且verify为true，保证只有页面和埋点这里需要使用此处逻辑
-    if (e.key === 'Enter') {
-      e.stopPropagation();
-      setPageList(function (list) {
-        var data = _.cloneDeep(list);
-        data[index].param = searchValue;
-        return data;
-      });
-    }
-  };
-  // 失焦
-  var _onBlur = function onBlur(e, index) {
-    e.stopPropagation();
-    setPageList(function (list) {
-      var data = _.cloneDeep(list);
-      data[index].param = searchValue;
-      return data;
-    });
-  };
+
   // 搜索
-  var onSearch = function onSearch(newValue) {
-    newValue && setSearchValue(newValue);
+  var _onSearch = function onSearch(newValue, index) {
     if (timer) {
       clearTimeout(timer);
     }
-    if (!newValue) {
-      setParamOption(_toConsumableArray(props.defaultOption));
-      return;
-    }
+    var handle = function handle(optionData) {
+      setParamOption(function (options) {
+        var data = _.cloneDeep(options);
+        data[index] = optionData;
+        return data;
+      });
+    };
     setTimer(setTimeout(function () {
-      getPageEsData(newValue, setParamOption, currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId, currentApp === null || currentApp === void 0 ? void 0 : currentApp.platform);
+      if (!newValue) {
+        handle(defaultOption);
+      } else {
+        getPageEsData(newValue, handle, currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId, currentApp === null || currentApp === void 0 ? void 0 : currentApp.platform);
+      }
+      setPageList(function (list) {
+        var data = _.cloneDeep(list);
+        data[index].param = newValue;
+        return data;
+      });
     }, 300));
   };
   // 改变值
   var onChangeParam = function onChangeParam(param, index) {
-    setSearchValue(param);
     setPageList(function (list) {
       var data = _.cloneDeep(list);
       data[index].param = param;
@@ -175,26 +177,16 @@ var PageItem = function PageItem(props) {
       onChange: function onChange(e) {
         return onChangeParam(e.target.value, index);
       }
-    }) : /*#__PURE__*/React.createElement(Select, {
-      className: "".concat(prefix, "-content-item-param"),
-      options: paramOption,
+    }) : /*#__PURE__*/React.createElement(InputSelect, {
       value: item.param,
-      suffixIcon: /*#__PURE__*/React.createElement(IconFont, {
-        className: "".concat(prefix, "-down-icon"),
-        type: "xiangxia"
-      }),
+      options: paramOption ? paramOption[index] : [],
       status: !item.param && props.validate ? 'error' : '',
-      showSearch: true,
-      onBlur: function onBlur(e) {
-        return _onBlur(e, index);
-      },
-      onInputKeyDown: function onInputKeyDown(e) {
-        return handleValue(e, index);
+      onSearch: function onSearch(val) {
+        return _onSearch(val, index);
       },
       onChange: function onChange(data) {
         return onChangeParam(data, index);
-      },
-      onSearch: onSearch
+      }
     }), !item.param && props.validate ? /*#__PURE__*/React.createElement("div", {
       className: "".concat(prefix, "-tip")
     }, "\u6761\u4EF6\u4E0D\u80FD\u4E3A\u7A7A") : null), /*#__PURE__*/React.createElement(IconFont, {
@@ -211,7 +203,4 @@ var PageItem = function PageItem(props) {
     type: "tianjia1"
   }), /*#__PURE__*/React.createElement("span", null, "\u6DFB\u52A0\u9875\u9762")) : null);
 };
-PageItem.defaultProps = {
-  defaultOption: []
-};
 export default PageItem;

package/dist/esm/components/groupModal/types.d.ts

@@ -1,12 +1,12 @@
-import { SelectProps } from 'antd';
 import { ModulesPageTypes } from '../../modules/home/types';
 export declare namespace GroupModalType {
     interface Props {
         value?: ModulesPageTypes.PageGroup;
+        onOk?: () => void;
+        onCancel?: () => void;
     }
     interface ItemProps {
         value?: ModulesPageTypes.ItemValue[];
-        defaultOption?: SelectProps['options'];
         validate?: boolean;
         onChange?: (data: ModulesPageTypes.ItemValue[]) => void;
     }

package/dist/esm/components/groupModal/utils.js

@@ -6,18 +6,12 @@ export var getPageEsData = function getPageEsData(searchValue, callback, appId,
     data: {
       appId: appId,
       platform: platform || 0,
-      limit: 10000,
+      dimensionSub: 'current_url',
       attr: 0,
       v: searchValue
     }
   }).then(function (res) {
     if (!res || !res.data) return;
-    var list = res.data.sources;
-    callback(list.map(function (item) {
-      return {
-        name: item,
-        value: item
-      };
-    }));
+    callback(res.data.sources);
   });
 };

package/dist/esm/components/pageSelect/index.js

@@ -17,21 +17,21 @@ import "./index.less";
 import { ModulesPageContext } from "../../modules/home/types";
 import { Tooltip } from 'antd';
 var PageSelect = function PageSelect(props) {
-  // 根据类型展示的列表
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    options = _useState2[0],
-    setOptions = _useState2[1];
   // 当前类型
-  var _useState3 = useState(pageTypes[0]),
-    _useState4 = _slicedToArray(_useState3, 2),
-    currentType = _useState4[0],
-    setCurrentType = _useState4[1];
+  var _useState = useState(pageTypes[0]),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentType = _useState2[0],
+    setCurrentType = _useState2[1];
   // 当前页面/分组
-  var _useState5 = useState(),
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    currentValue = _useState4[0],
+    setCurrentValue = _useState4[1];
+  // 是否第一次
+  var _useState5 = useState(true),
     _useState6 = _slicedToArray(_useState5, 2),
-    currentValue = _useState6[0],
-    setCurrentValue = _useState6[1];
+    isFirst = _useState6[0],
+    setIsFirst = _useState6[1];
   var classPrefix = 'page-select';
   var _useContext = useContext(ModulesPageContext),
     pageList = _useContext.pageList,
@@ -39,26 +39,30 @@ var PageSelect = function PageSelect(props) {
     currentClickPage = _useContext.currentClickPage;
   useEffect(function () {
     var _props$value, _props$value2;
-    if (!props.value) return;
     var type = (_props$value = props.value) !== null && _props$value !== void 0 && _props$value.pageGroup || ((_props$value2 = props.value) === null || _props$value2 === void 0 ? void 0 : _props$value2.pageGroup) === 0 ? 1 : 0;
     setCurrentType(pageTypes[type]);
-    setCurrentValue(function () {
-      if (type === 1) {
-        var data = props.value;
-        return {
-          id: "".concat(data.pageTitle ? data.pageTitle + '-' : '').concat(data.pageUrl),
-          pageTitle: data.pageTitle,
-          pageUrl: data.pageUrl
-        };
-      }
-      return pageGroupList.filter(function (item) {
-        var _props$value3;
-        return item.id === ((_props$value3 = props.value) === null || _props$value3 === void 0 ? void 0 : _props$value3.pageGroup);
-      })[0];
-    });
+    if (props.value) {
+      setCurrentValue(function () {
+        if (type === 0) {
+          var data = props.value;
+          return {
+            id: "".concat(data.pageTitle ? data.pageTitle + '-' : '').concat(data.pageUrl),
+            pageTitle: data.pageTitle,
+            pageUrl: data.pageUrl
+          };
+        }
+        return pageGroupList.filter(function (item) {
+          var _props$value3;
+          return item.id == ((_props$value3 = props.value) === null || _props$value3 === void 0 ? void 0 : _props$value3.pageGroup);
+        })[0];
+      });
+    }
+    setTimeout(function () {
+      setIsFirst(false);
+    }, 0);
   }, []);
   useEffect(function () {
-    if (!currentClickPage) return;
+    if (!currentClickPage || isFirst) return;
     setCurrentValue(function () {
       if (currentClickPage && currentClickPage.pageUrl) {
         var _ref = currentClickPage,
@@ -72,14 +76,18 @@ var PageSelect = function PageSelect(props) {
     });
   }, [currentClickPage]);
   useEffect(function () {
+    if (isFirst) return;
     var list = currentType.value === 'page' ? pageList : pageGroupList;
-    setOptions(list);
     setCurrentValue(list[0]);
-  }, [currentType, pageList, pageGroupList]);
+  }, [currentType]);
   useEffect(function () {
-    props.onChange && props.onChange(_objectSpread(_objectSpread({}, currentValue || {}), {}, {
-      pageGroup: currentType.value === 'pageGroup' ? currentValue === null || currentValue === void 0 ? void 0 : currentValue.id : undefined,
-      type: currentType.value
+    if (props.value) return;
+    setCurrentValue(pageList[0]);
+  }, [pageList.length]);
+  useEffect(function () {
+    if (!currentValue) return;
+    props.onChange && props.onChange(_objectSpread(_objectSpread({}, currentValue), {}, {
+      pageGroup: currentType.value === 'pageGroup' ? currentValue === null || currentValue === void 0 ? void 0 : currentValue.id : undefined
     }));
   }, [currentType, currentValue]);
   var getCustomLabel = function getCustomLabel(node, option) {
@@ -101,7 +109,7 @@ var PageSelect = function PageSelect(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-panel")
   }, /*#__PURE__*/React.createElement(BizSelect, {
-    defaultValue: currentType,
+    value: currentType,
     className: "".concat(classPrefix, "-panel-type"),
     options: pageTypes,
     popupContainer: true,
@@ -112,10 +120,10 @@ var PageSelect = function PageSelect(props) {
   }), /*#__PURE__*/React.createElement(BizSelect, {
     value: currentValue,
     className: "".concat(classPrefix, "-panel-page"),
-    options: options,
+    options: currentType.value === 'page' ? pageList : pageGroupList,
     labelField: currentType.value === 'page' ? 'pageTitle' : 'name',
     popupContainer: true,
-    enableSearch: options.length > 5,
+    enableSearch: true,
     onChange: setCurrentValue,
     customLabel: getCustomLabel
   }), /*#__PURE__*/React.createElement(Tooltip, {
@@ -123,7 +131,10 @@ var PageSelect = function PageSelect(props) {
   }, /*#__PURE__*/React.createElement(IconFont, {
     className: "".concat(classPrefix, "-panel-icon").concat(!props.enableAdd ? ' disabled' : ''),
     type: "shaixuan",
-    onClick: props.onAdd
+    onClick: function onClick() {
+      if (!props.enableAdd) return;
+      props.onAdd && props.onAdd();
+    }
   }))));
 };
 export default PageSelect;

package/dist/esm/components/pageSelect/types.d.ts

@@ -1,8 +1,6 @@
 export declare namespace PageSelectTypes {
     interface Props {
         value?: Value;
-        pageList?: any[];
-        pageGroupList?: any[];
         enableAdd?: boolean;
         onAdd?: () => void;
         onChange?: (data: Value) => void;

package/dist/esm/components/searchPanel/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 import { SearchPanelProps } from './types';
 import './index.less';
-declare const SearchPanel: React.FC<SearchPanelProps>;
+declare const SearchPanel: React.ForwardRefExoticComponent<SearchPanelProps & React.RefAttributes<any>>;
 export default SearchPanel;

package/dist/esm/components/searchPanel/index.js

@@ -6,12 +6,12 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Form, Skeleton } from 'antd';
-import React, { useContext, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import "./index.less";
-import { BizAttrConditionGroup, BizGlobalDataContext, BizUserGroup, IconFont } from '@zgfe/business-lib';
+import { BizAttrConditionGroup, BizUserGroup, IconFont } from '@zgfe/business-lib';
 import PageSelect from "../pageSelect";
 import { formValue, formatValue } from "./util";
-var SearchPanel = function SearchPanel(props) {
+var SearchPanel = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var classPrefix = 'page-search-panel';
   // form 值
   var _Form$useForm = Form.useForm(),
@@ -33,11 +33,9 @@ var SearchPanel = function SearchPanel(props) {
     count = _useState6[0],
     setCount = _useState6[1];
   var groupRef = useRef(null);
-  var _useContext = useContext(BizGlobalDataContext),
-    userGroupList = _useContext.userGroupList;
   useEffect(function () {
     var _data$filters;
-    var data = formValue(props.value, userGroupList);
+    var data = formValue(props.value);
     setCount(((_data$filters = data.filters) === null || _data$filters === void 0 ? void 0 : _data$filters.conditions.length) || 0);
     setFormData(data);
     setTimeout(function () {
@@ -53,7 +51,6 @@ var SearchPanel = function SearchPanel(props) {
    */
   var onChange = function onChange(_changedValues, allValues) {
     setFormData(allValues);
-    console.log(formatValue(allValues), 'onChange allValues');
     props.onChange && props.onChange(formatValue(allValues));
   };
   var onAdd = function onAdd() {
@@ -89,6 +86,8 @@ var SearchPanel = function SearchPanel(props) {
         className: "".concat(classPrefix, "-item"),
         key: field.key
       }), /*#__PURE__*/React.createElement(BizUserGroup, {
+        enableTags: true,
+        enableDelete: fields.length > 1,
         onDelete: function onDelete() {
           return remove(index);
         }
@@ -102,7 +101,9 @@ var SearchPanel = function SearchPanel(props) {
       className: "biz-icon",
       type: 'tianjia1'
     }), "\u6DFB\u52A0\u7528\u6237\u7FA4"));
-  }), /*#__PURE__*/React.createElement(Form.Item, {
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/React.createElement(Form.Item, {
     className: "".concat(classPrefix, "-title")
   }, " \u9875\u9762 "), /*#__PURE__*/React.createElement(Form.Item, {
     className: "".concat(classPrefix, "-item2"),
@@ -118,6 +119,6 @@ var SearchPanel = function SearchPanel(props) {
     onlyAnd: true,
     enableDelete: true,
     onConditionsCount: setCount
-  })))));
-};
+  }))))));
+});
 export default SearchPanel;

package/dist/esm/components/searchPanel/index.less

@@ -39,7 +39,7 @@
     }
   }
 
-  &-item3:not(.page-search-panel-hidden) {
+  &-item3.ant-form-item:not(.page-search-panel-hidden) {
     margin-bottom: 20px;
     padding: 4px 24px;
     &:hover {
@@ -47,8 +47,8 @@
     }
   }
 
-  &-item2 {
-    margin-bottom: 4px;
+  &-item2.ant-form-item {
+    margin-bottom: 4px !important;
   }
 
   &-hidden.ant-form-item {

package/dist/esm/components/searchPanel/types.d.ts

@@ -1,10 +1,10 @@
-import { AttrConditionTypes, BizSelectTypes } from '@zgfe/business-lib';
+import { AttrConditionTypes } from '@zgfe/business-lib';
 export interface SearchPanelProps {
     value?: SearchValue;
     onChange?: (data: SearchValue) => void;
 }
 export interface SearchValue {
-    userGroup?: number[];
+    userGroup?: (number | string[])[];
     pageUrl?: string;
     pageTitle?: string;
     pageGroup?: number;
@@ -12,7 +12,7 @@ export interface SearchValue {
     type?: string;
 }
 export interface FormValue {
-    userGroup?: BizSelectTypes.Option;
+    userGroup?: (number | string[])[];
     page?: PageTypes;
     filters?: AttrConditionTypes.GroupValue;
 }

package/dist/esm/components/searchPanel/util.d.ts

@@ -1,10 +1,10 @@
-import { BizSelectTypes } from '@zgfe/business-lib';
+import { AttrConditionTypes } from '@zgfe/business-lib';
 import { FormValue, SearchValue } from './types';
-export declare const formValue: (source?: SearchValue, userGroupList?: BizSelectTypes.Option[]) => FormValue;
+export declare const formValue: (source?: SearchValue) => FormValue;
 export declare const formatValue: (source: FormValue) => {
-    userGroup: number[];
+    userGroup: (number | string[])[];
     pageTitle: string | undefined;
     pageUrl: string | undefined;
     pageGroup: number | undefined;
-    filters: import("@zgfe/business-lib").AttrConditionTypes.GroupValue | undefined;
+    filters: AttrConditionTypes.GroupValue | undefined;
 };

package/dist/esm/components/searchPanel/util.js

@@ -1,47 +1,51 @@
 import _ from 'lodash';
-export var formValue = function formValue(source, userGroupList) {
+import { OperateTypes } from '@zgfe/business-lib/es/attrConditions/types';
+export var formValue = function formValue(source) {
   var data = _.cloneDeep(source) || {};
-  // 用户群变形
-  var result = [];
-  if (data.userGroup && data.userGroup.length) {
-    userGroupList === null || userGroupList === void 0 ? void 0 : userGroupList.forEach(function (user) {
-      var _data$userGroup;
-      if ((_data$userGroup = data.userGroup) !== null && _data$userGroup !== void 0 && _data$userGroup.includes(user.id)) {
-        result.push(user);
-      }
-    });
-  } else {
-    result = userGroupList ? [userGroupList[0]] : [{
-      id: 0,
-      name: '所有用户'
-    }];
-  }
-  var page = {
-    type: 'page',
+  var page = !data.pageUrl && !data.pageTitle && !data.pageGroup && data.pageGroup != 0 ? undefined : {
     pageGroup: data === null || data === void 0 ? void 0 : data.pageGroup,
     pageUrl: data === null || data === void 0 ? void 0 : data.pageUrl,
     pageTitle: data === null || data === void 0 ? void 0 : data.pageTitle
   };
   return {
-    userGroup: result,
+    userGroup: data.userGroup || [0],
     page: page,
     filters: data.filters
   };
 };
 export var formatValue = function formatValue(source) {
-  var _data$userGroup2, _data$page, _data$page2, _data$page3;
+  var _data$page, _data$page2, _data$page3;
   var data = _.cloneDeep(source) || {};
-  var group = [];
-  (_data$userGroup2 = data.userGroup) === null || _data$userGroup2 === void 0 ? void 0 : _data$userGroup2.forEach(function (item) {
-    if (item) {
-      group.push(item.id);
-    }
-  });
+  var filters = getConditionList(data.filters);
   return {
-    userGroup: group,
+    userGroup: data.userGroup || [0],
     pageTitle: (_data$page = data.page) === null || _data$page === void 0 ? void 0 : _data$page.pageTitle,
     pageUrl: (_data$page2 = data.page) === null || _data$page2 === void 0 ? void 0 : _data$page2.pageUrl,
     pageGroup: (_data$page3 = data.page) === null || _data$page3 === void 0 ? void 0 : _data$page3.pageGroup,
-    filters: data.filters
+    filters: filters
   };
-};
+};
+
+/**
+ * 筛选条件当未选择值时，不查询
+ * @param filters 筛选条件数组
+ * @returns
+ */
+function getConditionList(filters) {
+  if (!filters || !filters.conditions) return;
+  var conditionList = [];
+  filters.conditions.forEach(function (item) {
+    if (!item.attrId && !item.attrName) return;
+    if (!item.values || !item.values.length) {
+      if (item.operator === OperateTypes.IsNotNull || item.operator === OperateTypes.IsNull) {
+        conditionList.push(item);
+      }
+    } else {
+      conditionList.push(item);
+    }
+  });
+  return conditionList.length ? {
+    conditions: conditionList,
+    relation: 'and'
+  } : undefined;
+}

package/dist/esm/components/topContent/index.less

@@ -1,6 +1,7 @@
 .top-content {
   display: flex;
   justify-content: space-between;
+  font-size: 14px;
   .ant-btn {
     .bsicon {
       margin-right: 8px;

package/dist/esm/constants/api.js

@@ -7,5 +7,5 @@ export default {
   getPageResult: '/zg/web/v2/data/pageDataList',
   getPageEsData: '/zg/web/v2/data/queryEsData',
   download: '/zg/web/v2/data/pagedownloadReport',
-  socket: 'wss://rt2.zhugeio.com/eventtracking/ws'
+  socket: '/eventtracking/ws'
 };

package/dist/esm/modules/empty/index.js

@@ -28,6 +28,8 @@ var EmptyPanel = function EmptyPanel() {
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-title")
   }, "\u9875\u9762\u70B9\u51FB\u5206\u6790"), /*#__PURE__*/React.createElement("p", null, "\u9875\u9762\u7684\u70B9\u51FB\u6548\u679C\u5C55\u793A\uFF0C\u53EF\u4EE5\u66F4\u52A0\u76F4\u89C2\u7684\u770B\u51FA\u9875\u9762\u4E2D\u70B9\u51FB\u7684\u5206\u5E03\u60C5\u51B5"), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-content2")
+  }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-title-secondary")
   }, "\u8BBE\u7F6E\u65B9\u6CD5"), /*#__PURE__*/React.createElement("p", null, "\u70B9\u51FB\u5206\u6790\u6570\u636E\u9ED8\u8BA4\u4E3A\u4E0D\u91C7\u96C6\uFF0C\u5982\u9700\u91C7\u96C6\uFF0C\u53EF\u5728\u76F8\u5E94\u9875\u9762\u7684SDK\u4EE3\u7801\u4E2D\u52A0\u5165\u4EE5\u4E0B\u53C2\u6570\u914D\u7F6E"), /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-code-container")
@@ -40,7 +42,7 @@ var EmptyPanel = function EmptyPanel() {
     className: "".concat(classPrefix, "-code")
   }, "autoTrack: true,", /*#__PURE__*/React.createElement("span", null, "//\u5168\u57CB\u70B9\u5F00\u5173")), /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-code")
-  }, "singlePage: false", /*#__PURE__*/React.createElement("span", null, "//\u662F\u5426\u4E3A\u5355\u9875\u9762\u5E94\u7528 \u9ED8\u8BA4\u4E3Afalse")), /*#__PURE__*/React.createElement("div", null, '}', ");")), /*#__PURE__*/React.createElement("p", null, "\u9002\u7528\u4E8ELanding Page\u3001\u6D3B\u52A8\u9875\u3001\u5B98\u7F51\uFF0C\u9875\u9762\u7B80\u5355\u53EF\u4F7F\u7528\u9875\u9762\u70B9\u51FB\u5206\u6790\u63D0\u5347\u6548\u7387\uFF0C\u5EFA\u8BAE\u4E0D\u8981\u5728\u590D\u6742\u9875\u9762\u4F7F\u7528\u3002")), /*#__PURE__*/React.createElement("img", {
+  }, "singlePage: false", /*#__PURE__*/React.createElement("span", null, "//\u662F\u5426\u4E3A\u5355\u9875\u9762\u5E94\u7528 \u9ED8\u8BA4\u4E3Afalse")), /*#__PURE__*/React.createElement("div", null, '}', ");")), /*#__PURE__*/React.createElement("p", null, "\u9002\u7528\u4E8ELanding Page\u3001\u6D3B\u52A8\u9875\u3001\u5B98\u7F51\uFF0C\u9875\u9762\u7B80\u5355\u53EF\u4F7F\u7528\u9875\u9762\u70B9\u51FB\u5206\u6790\u63D0\u5347\u6548\u7387\uFF0C\u5EFA\u8BAE\u4E0D\u8981\u5728\u590D\u6742\u9875\u9762\u4F7F\u7528\u3002"))), /*#__PURE__*/React.createElement("img", {
     className: "".concat(classPrefix, "-img"),
     src: chartImg
   }));

package/dist/esm/modules/empty/index.less

@@ -9,13 +9,16 @@
   background: url(./img/bg.png);
   background-size: cover;
   &-content {
-    width: 400px;
+    width: 406px;
     margin-left: 136px;
     p {
       color: #9aa1a9;
       font-size: 14px;
     }
   }
+  &-content2 {
+    width: 400px;
+  }
   &-title {
     margin-bottom: 24px;
     font-weight: 500;
@@ -32,7 +35,7 @@
     position: relative;
     height: 200px;
     padding: 16px;
-    background: #fff;
+    background: #fafafb;
     border-radius: 8px;
 
     &:hover {
@@ -57,12 +60,11 @@
   }
   &-code-copy {
     position: absolute;
-    top: 8px;
-    right: 0;
+    top: 16px;
+    right: 16px;
     display: flex;
     display: none;
     align-items: center;
-    align-items: center;
     height: 24px;
     padding: 0 8px;
     background: #f2f3f4;