@zgfe/modules-page 1.0.1-alpha.3 → 1.0.1-alpha.30

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

@@ -1,4 +1,3 @@
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -6,12 +5,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, BizUserGroupHeader } 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 +32,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 +50,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() {
@@ -76,33 +72,14 @@ var SearchPanel = function SearchPanel(props) {
     initialValues: formData,
     onValuesChange: onChange
   }, /*#__PURE__*/React.createElement(Form.Item, {
-    className: "".concat(classPrefix, "-title")
-  }, " \u5206\u6790\u7528\u6237\u7FA4 "), /*#__PURE__*/React.createElement(Form.List, {
-    name: "userGroup"
-  }, function (fields, _ref) {
-    var add = _ref.add,
-      remove = _ref.remove;
-    return /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(classPrefix, "-item-horizontal")
-    }, fields.map(function (field, index) {
-      return /*#__PURE__*/React.createElement(Form.Item, _extends({}, field, {
-        className: "".concat(classPrefix, "-item"),
-        key: field.key
-      }), /*#__PURE__*/React.createElement(BizUserGroup, {
-        onDelete: function onDelete() {
-          return remove(index);
-        }
-      }));
-    })), fields.length < 2 && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(classPrefix, "-add"),
-      onClick: function onClick() {
-        return add();
-      }
-    }, /*#__PURE__*/React.createElement(IconFont, {
-      className: "biz-icon",
-      type: 'tianjia1'
-    }), "\u6DFB\u52A0\u7528\u6237\u7FA4"));
-  }), /*#__PURE__*/React.createElement(Form.Item, {
+    name: "userGroup",
+    className: "".concat(classPrefix, "-item1")
+  }, /*#__PURE__*/React.createElement(BizUserGroupHeader, {
+    max: 2,
+    enableTags: true
+  })), /*#__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 +95,6 @@ var SearchPanel = function SearchPanel(props) {
     onlyAnd: true,
     enableDelete: true,
     onConditionsCount: setCount
-  })))));
-};
+  }))))));
+});
 export default SearchPanel;

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

@@ -2,7 +2,7 @@
 
 .page-search-panel {
   &-title.ant-form-item {
-    margin-bottom: 12px;
+    margin-bottom: 8px;
     padding-left: 24px;
     color: @text-color-secondary;
     font-weight: 500;
@@ -13,42 +13,15 @@
       }
     }
   }
-  &-item-horizontal {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 16px;
-    padding: 0 24px;
-    &:hover {
-      background: #e8efff;
-    }
-    .page-search-panel-item.ant-form-item {
-      margin-bottom: 0;
-      padding: 4px 0;
-    }
-  }
-  &-add {
-    width: fit-content;
-    height: 20px;
-    margin-top: 8px;
-    margin-left: 24px;
-    color: @primary-color;
-    line-height: 20px;
-    cursor: pointer;
-    span {
-      margin-right: 4px;
-    }
-  }
 
-  &-item3:not(.page-search-panel-hidden) {
+  &-item3.ant-form-item:not(.page-search-panel-hidden) {
     margin-bottom: 20px;
-    padding: 4px 24px;
-    &:hover {
-      background: #e8efff;
-    }
   }
-
-  &-item2 {
-    margin-bottom: 4px;
+  &-item1.ant-form-item {
+    margin-bottom: 20px !important;
+  }
+  &-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,53 @@
 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$userGroup, _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 = data.userGroup) === null || _data$userGroup === void 0 ? void 0 : _data$userGroup.filter(function (item) {
+      return item || item === 0;
+    })) || [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,19 @@
   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;
+    p {
+      margin-bottom: 0;
+    }
+  }
   &-title {
     margin-bottom: 24px;
     font-weight: 500;
@@ -31,10 +37,10 @@
   &-code-container {
     position: relative;
     height: 200px;
+    margin: 8px 0;
     padding: 16px;
-    background: #fff;
+    background: #fafafb;
     border-radius: 8px;
-
     &:hover {
       .empty-panel-code-copy {
         display: flex;
@@ -57,12 +63,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;

package/dist/esm/modules/home/demo/index.js

@@ -1,14 +1,72 @@
 import React from 'react';
 import { ModulesPage } from '@zgfe/modules-page';
 import { DemoWrapper } from '@zgfe/business-lib';
+var defaultValue = {
+  pageTitle: '进入百度首页894854121612',
+  appId: 225,
+  module: 'page',
+  pageUrl: 'http://baidu.com/query/894854121612',
+  time: {
+    unit: 'day',
+    end: '2023-09-14',
+    begin: '2023-08-31',
+    relative: [14, 0]
+  },
+  filters: {
+    conditions: [{
+      attrId: 0,
+      propCategory: 'userProp',
+      values: ['实名'],
+      dimensionSub: 'is_anonymous',
+      label: '实名/匿名',
+      type: 1,
+      category: 'fixed',
+      operator: 'equal',
+      attrName: 'is_anonymous'
+    }, {
+      attrId: 0,
+      propCategory: 'userProp',
+      values: ['30', '1'],
+      dimensionSub: 'last_visit_time',
+      label: '最后一次访问时间',
+      type: 3,
+      category: 'fixed',
+      operator: 'relative',
+      attrName: 'last_visit_time'
+    }, {
+      attrId: 0,
+      propCategory: 'envProp',
+      type: 1,
+      operator: 'equal',
+      values: ['baidu'],
+      dimensionSub: 'website',
+      label: '来源域名',
+      attrName: 'website',
+      category: 'fixed'
+    }],
+    relation: 'and'
+  },
+  userGroup: [758, 757],
+  platform: 3
+};
 export default (function () {
+  var onClickWarn = function onClickWarn() {
+    console.log('onClickWarn');
+  };
+  var onChange = function onChange(data) {
+    console.log('onChange:', data);
+  };
   return /*#__PURE__*/React.createElement(DemoWrapper, {
     needMeta: true,
-    defaultApp: 266
+    defaultApp: 225
   }, /*#__PURE__*/React.createElement("div", {
     style: {
       height: 750,
       overflow: 'auto'
     }
-  }, /*#__PURE__*/React.createElement(ModulesPage, null)));
+  }, /*#__PURE__*/React.createElement(ModulesPage, {
+    value: defaultValue,
+    onClickWarn: onClickWarn,
+    onChange: onChange
+  })));
 });