@zgfe/modules-page 1.0.1-alpha.9 → 1.0.1

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

@@ -21,6 +21,9 @@ var PageContent = function PageContent(props) {
     }
     return data;
   }, [pageGroupList, props.groupId]);
+  var columns = useMemo(function () {
+    return getColumns(props.type, props.hasUserGroup, props.onClick, props.onEdit);
+  }, [props.type, props.hasUserGroup]);
   if (props.type === 'pageGroup' && !groupList.length) {
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(classPrefix, "-empty")
@@ -43,9 +46,9 @@ var PageContent = function PageContent(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: classPrefix
   }, /*#__PURE__*/React.createElement(BizTable, {
-    rowKey: props.type === 'pageGroup' ? 'id' : 'pageUrl',
+    rowKey: "id",
     dataSource: props.type === 'pageGroup' ? groupList : props.value,
-    columns: getColumns(props.type, props.hasUserGroup, props.onClick, props.onEdit)
+    columns: columns
   }));
 };
 export default PageContent;

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

@@ -1,4 +1,5 @@
 export interface PageColumnType {
+    id?: string;
     userGroup?: string;
     pageTitle?: string;
     pageUrl?: string;

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

@@ -129,7 +129,8 @@ export var getColumns = function getColumns(type, hasUserGroup, onClickCallback,
       title: '用户群',
       dataIndex: 'userGroup',
       key: 'userGroup',
-      align: 'left'
+      align: 'left',
+      ellipsis: true
     });
   }
   var groupColumns = [{

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

@@ -15,40 +15,28 @@ import "./index.less";
 import { BizGlobalDataContext, IconFont, SocketClient, ajax } from '@zgfe/business-lib';
 import { Tooltip } from 'antd';
 import { getNumPer, toThousands } from "../content/utils";
-import percentImg from "./images/color_pallete_percent.png";
+import percentImg from "./images/percent.png";
 import renderImg from "./images/empty.png";
 import { ModulesPageContext } from "../../modules/home/types";
-import api from "../../constants/api";
 import { getSocketSecret } from "../../modules/home/utils";
+import api from "../../constants/api";
 var DetailContent = function DetailContent(props) {
   var classPrefix = 'detail-content';
-  var _useState = useState([]),
-    _useState2 = _slicedToArray(_useState, 2),
-    detailList = _useState2[0],
-    setDetailList = _useState2[1];
-  var _useState3 = useState(true),
-    _useState4 = _slicedToArray(_useState3, 2),
-    loading = _useState4[0],
-    setLoading = _useState4[1];
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_useState5, 2),
-    timer = _useState6[0],
-    setTimer = _useState6[1];
   var _useContext = useContext(BizGlobalDataContext),
     currentApp = _useContext.currentApp;
   var _useContext2 = useContext(ModulesPageContext),
     pageGroupList = _useContext2.pageGroupList,
     pageList = _useContext2.pageList,
     setCurrentClickPage = _useContext2.setCurrentClickPage;
-  var _useState7 = useState(),
-    _useState8 = _slicedToArray(_useState7, 2),
-    client = _useState8[0],
-    setClient = _useState8[1];
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    client = _useState2[0],
+    setClient = _useState2[1];
   // 当前url
-  var _useState9 = useState(),
-    _useState10 = _slicedToArray(_useState9, 2),
-    pageUrl = _useState10[0],
-    setPageUrl = _useState10[1];
+  var _useState3 = useState(),
+    _useState4 = _slicedToArray(_useState3, 2),
+    pageUrl = _useState4[0],
+    setPageUrl = _useState4[1];
   useEffect(function () {
     var secret = getSocketSecret();
     var url = "wss://".concat(location.host).concat(api.socket);
@@ -100,7 +88,6 @@ var DetailContent = function DetailContent(props) {
       console.log('连接已存在');
     });
     client.on('pageInfo', function (message) {
-      console.log('接收消息', message);
       if (message.href !== openUrl) {
         setPageUrl(message.href);
         // 如果当前类型是单页面，则更新页面选择
@@ -135,29 +122,6 @@ var DetailContent = function DetailContent(props) {
       appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
       platform: 3
     }, props.params));
-    //   if (timer) {
-    //     clearTimeout(timer);
-    //   }
-    //   setTimer(
-    //     setTimeout(() => {
-    //       setLoading(true);
-    //       ajax(api.getDetailResult, {
-    //         method:'post',
-    //         data: {
-    //           appId: currentApp?.appId,
-    //           platform: currentApp?.platform || 0,
-    //           // ...props.params,
-    //         },
-    //       })
-    //         .then((res) => {
-    //           if (!res) return;
-    //           setDetailList(res.data as PageColumnType[]);
-    //         })
-    //         .finally(() => {
-    //           setLoading(false);
-    //         });
-    //     }, 500),
-    //   );
   }, [props.params]);
   var openUrl = useMemo(function () {
     if (!pageUrl) return '';
@@ -192,7 +156,7 @@ var DetailContent = function DetailContent(props) {
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(classPrefix, "-top-item"),
       key: index
-    }, (_props$params2 = props.params) !== null && _props$params2 !== void 0 && _props$params2.userGroup && ((_props$params$userGro = props.params.userGroup) === null || _props$params$userGro === void 0 ? void 0 : _props$params$userGro.length) > 1 ? /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("span", null, "\u7528\u6237\u7FA4\uFF1A"), /*#__PURE__*/React.createElement("span", null, item.userGroup)) : null, /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("span", null, "\u6D4F\u89C8\uFF1A"), /*#__PURE__*/React.createElement("span", null, toThousands(item.viewTimes), "\u6B21"), /*#__PURE__*/React.createElement("span", null, toThousands(item.viewUser), "\u4EBA")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("span", null, "\u9875\u9762\u5185\u70B9\u51FB\uFF1A"), /*#__PURE__*/React.createElement("span", null, toThousands(item.clickTimes), "\u6B21"), /*#__PURE__*/React.createElement("span", null, toThousands(item.clickUser), "\u4EBA")), /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement("span", null, "\u70B9\u51FB\u4EBA\u6570\u5360\u6BD4\uFF1A"), /*#__PURE__*/React.createElement("span", null, getNumPer(item.viewUser, item.clickUser)), /*#__PURE__*/React.createElement(Tooltip, {
+    }, (_props$params2 = props.params) !== null && _props$params2 !== void 0 && _props$params2.userGroup && ((_props$params$userGro = props.params.userGroup) === null || _props$params$userGro === void 0 ? void 0 : _props$params$userGro.length) > 1 ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u7528\u6237\u7FA4\uFF1A"), /*#__PURE__*/React.createElement("span", null, item.userGroup)) : null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u6D4F\u89C8\uFF1A"), /*#__PURE__*/React.createElement("span", null, toThousands(item.viewTimes), "\u6B21"), /*#__PURE__*/React.createElement("span", null, toThousands(item.viewUser), "\u4EBA")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u9875\u9762\u5185\u70B9\u51FB\uFF1A"), /*#__PURE__*/React.createElement("span", null, toThousands(item.clickTimes), "\u6B21"), /*#__PURE__*/React.createElement("span", null, toThousands(item.clickUser), "\u4EBA")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u70B9\u51FB\u4EBA\u6570\u5360\u6BD4\uFF1A"), /*#__PURE__*/React.createElement("span", null, getNumPer(item.viewUser, item.clickUser)), /*#__PURE__*/React.createElement(Tooltip, {
       title: "\u70B9\u51FB\u4EBA\u6570\u5360\u6BD4\uFF1D\u9875\u9762\u5185\u70B9\u51FB\u4EBA\u6570\uFF0F\u9875\u9762\u6D4F\u89C8\u4EBA\u6570"
     }, /*#__PURE__*/React.createElement(IconFont, {
       type: "tishi"

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

@@ -11,6 +11,7 @@
     justify-content: space-between;
     padding: 16px;
     background: #fafafb;
+    border-radius: 8px 8px 0 0;
     &-title {
       display: flex;
       flex: 1;
@@ -18,7 +19,7 @@
     }
     &-value {
       display: inline-block;
-      width: calc(100% - 100px);
+      max-width: calc(100% - 100px);
       .__default-overflow();
     }
     &-label {
@@ -36,12 +37,16 @@
     &-item {
       display: flex;
       gap: 40px;
+      align-items: center;
       color: #67727f;
       .bsicon {
         margin-left: 8px;
         color: #9aa1a9;
         font-size: 16px !important;
         cursor: pointer;
+        &:hover {
+          color: @primary-color;
+        }
       }
     }
   }
@@ -52,8 +57,10 @@
     min-height: 422px;
     padding: 16px;
     &-img {
-      height: 22px;
       text-align: right;
+      img {
+        height: 22px;
+      }
     }
     &-panel {
       display: flex;

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

@@ -120,6 +120,7 @@ var GroupModal = function GroupModal(props) {
   };
   return /*#__PURE__*/React.createElement(BizDialog, {
     open: true,
+    closable: true,
     className: classPrefix,
     width: 720,
     title: props.value ? '修改分组' : '创建分组',
@@ -127,7 +128,8 @@ var GroupModal = function GroupModal(props) {
     okButtonProps: {
       disabled: isDemo
     },
-    footer: btnList
+    footer: btnList,
+    onCancel: props.onCancel
   }, /*#__PURE__*/React.createElement(Spin, {
     spinning: loading
   }, /*#__PURE__*/React.createElement(Form, {
@@ -151,7 +153,7 @@ var GroupModal = function GroupModal(props) {
     name: "initPage",
     rules: [{
       validator: function validator(_, value) {
-        var reg = /^(?:(http|https|ftp):\/\/)?((?:[\w-]+\.)+[a-z0-9]+)((?:\/[^/?#]*)+)?(\?[^#]+)?(#.+)?$/i;
+        var reg = /^((http:\/\/)|(https:\/\/)|(\/\/))[A-Za-z0-9]/;
         if (!value || !/\S+/.test(value)) return Promise.reject("\u8BF7\u8F93\u5165\u80CC\u666F\u9875\u5730\u5740");
         if (!reg.test(value)) return Promise.reject('必须是合法的网页链接');
         return Promise.resolve();
@@ -160,12 +162,13 @@ var GroupModal = function GroupModal(props) {
   }, /*#__PURE__*/React.createElement(Input, {
     className: "".concat(classPrefix, "-form-input"),
     placeholder: "\u8BF7\u8F93\u5165\u5728\u67E5\u770B\u70B9\u51FB\u56FE\u65F6\u7684\u80CC\u666F\u9875\u9762"
-  })), /*#__PURE__*/React.createElement(Form.Item, {
+  })), /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-form-title")
   }, " \u6DFB\u52A0\u9875\u9762"), /*#__PURE__*/React.createElement(Form.Item, {
-    name: "filters"
+    name: "filters",
+    className: "".concat(classPrefix, "-form-item-filter")
   }, /*#__PURE__*/React.createElement(PageItem, {
     validate: validate
-  }))), /*#__PURE__*/React.createElement(Button, null)));
+  })))));
 };
 export default GroupModal;

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

@@ -5,8 +5,8 @@
     border-color: #fafafb;
   }
   &-form-title {
-    margin-bottom: 12px;
     color: @text-color-secondary;
+    line-height: 1;
   }
 
   &-item {
@@ -109,6 +109,7 @@
       align-items: center;
       width: fit-content;
       height: 32px;
+      margin-bottom: 12px;
       color: @primary-color;
       cursor: pointer;
 
@@ -137,6 +138,9 @@
     }
   }
 
+  &-form-item-filter.ant-form-item {
+    margin-bottom: 12px;
+  }
   &-dropdown {
     width: 300px;
     &-handle {
@@ -153,9 +157,14 @@
     &:not([disabled]):focus {
       border-color: @primary-color;
     }
+    &[disabled] {
+      color: #ccd0d4;
+      background: @background-color-gray;
+    }
   }
   .ant-modal-content {
     .ant-modal-body {
+      padding-top: 8px;
       padding-bottom: 0;
     }
     .ant-modal-footer {
@@ -163,9 +172,22 @@
       border-top: 1px solid #f2f3f4 !important;
 
       .group-modal-footer-del {
+        display: flex;
+        align-items: center;
         float: left;
+        background: #f2f3f4 !important;
         .bsicon {
           margin-right: 8px;
+          font-size: 16px !important;
+          line-height: 1;
+        }
+        &.ant-btn-text:hover {
+          color: #fb5547 !important;
+          background: #f2f3f4 !important;
+        }
+        &.ant-btn-text:focus {
+          color: #e24c40 !important;
+          background: #f2f3f4 !important;
         }
       }
     }

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

@@ -52,6 +52,7 @@ var InputSelect = function InputSelect(props) {
       }, "\u6682\u65E0\u6570\u636E");
     }
   }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "\u8BF7\u9009\u62E9",
     className: "".concat(classPrefix, "-dropdown-handle"),
     value: searchValue,
     allowClear: true,

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/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,34 +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, {
-        enableDelete: fields.length > 1,
-        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"),
@@ -119,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;
 };