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

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

@@ -7,7 +7,7 @@ declare const PageContent: React.FC<{
     value?: PageColumnType[];
     groupId?: number;
     hasUserGroup?: boolean;
-    onClick?: (data: any) => void;
+    onClick?: (data: ModulesPageTypes.PageGroup | ModulesPageTypes.Page) => void;
     onEdit?: (data: ModulesPageTypes.PageGroup) => void;
     onCreate?: () => void;
 }>;

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,8 +46,9 @@ var PageContent = function PageContent(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: classPrefix
   }, /*#__PURE__*/React.createElement(BizTable, {
+    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.d.ts

@@ -1,17 +1,6 @@
-import { ColumnGroupType, ColumnType, ColumnsType } from 'antd/lib/table';
-import React from 'react';
-export declare const getColumns: (type: string, hasUserGroup?: boolean, onClickCallback?: Function, onEditCallback?: Function) => ((ColumnGroupType<object> | ColumnType<object>)[] & ColumnsType<any>) | ({
-    title: string;
-    dataIndex: string;
-    key: string;
-    render: (txt: string, record: any) => React.JSX.Element;
-    width?: undefined;
-} | {
-    title: string;
-    dataIndex: string;
-    key: string;
-    width: number;
-    render?: undefined;
-})[];
+import { ColumnsType } from 'antd/lib/table';
+import { PageColumnType } from './types';
+import { ModulesPageTypes } from '../../modules/home/types';
+export declare const getColumns: (type: string, hasUserGroup?: boolean, onClickCallback?: Function, onEditCallback?: Function) => ColumnsType<PageColumnType> | ColumnsType<ModulesPageTypes.PageGroup>;
 export declare const getNumPer: (viewUser: number, clickUser: number) => string;
 export declare const toThousands: (num?: number) => string | number | undefined;

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

@@ -19,7 +19,10 @@ export var getColumns = function getColumns(type, hasUserGroup, onClickCallback,
       return /*#__PURE__*/React.createElement("div", {
         className: "table-td-page",
         onClick: function onClick() {
-          return onClickCallback && onClickCallback(record);
+          return onClickCallback && onClickCallback({
+            pageTitle: record.pageTitle,
+            pageUrl: record.pageUrl
+          });
         }
       }, /*#__PURE__*/React.createElement(Tooltip, {
         title: record.pageTitle
@@ -37,9 +40,10 @@ export var getColumns = function getColumns(type, hasUserGroup, onClickCallback,
         onClick: function onClick(e) {
           var _navigator, _navigator$clipboard;
           e.stopPropagation();
-          (_navigator = navigator) === null || _navigator === void 0 ? void 0 : (_navigator$clipboard = _navigator.clipboard) === null || _navigator$clipboard === void 0 ? void 0 : _navigator$clipboard.writeText(record.pageUrl).catch(function () {
+          if (!(record !== null && record !== void 0 && record.pageUrl)) return;
+          (_navigator = navigator) === null || _navigator === void 0 ? void 0 : (_navigator$clipboard = _navigator.clipboard) === null || _navigator$clipboard === void 0 ? void 0 : _navigator$clipboard.writeText(record === null || record === void 0 ? void 0 : record.pageUrl).catch(function () {
             var el = document.createElement('textarea');
-            el.value = record.pageUrl;
+            el.value = record.pageUrl || '';
             document.body.appendChild(el);
             el.select();
             document.execCommand('copy');
@@ -117,7 +121,7 @@ export var getColumns = function getColumns(type, hasUserGroup, onClickCallback,
     },
     showSorterTooltip: false,
     render: function render(_txt, record) {
-      return getNumPer(record.viewUser, record.clickUser);
+      return getNumPer(record.viewUser || 0, record.clickUser || 0);
     }
   }];
   if (hasUserGroup) {
@@ -140,7 +144,7 @@ export var getColumns = function getColumns(type, hasUserGroup, onClickCallback,
         onClick: function onClick() {
           return onClickCallback && onClickCallback(record);
         }
-      }, ' ', txt), /*#__PURE__*/React.createElement(IconFont, {
+      }, txt), /*#__PURE__*/React.createElement(IconFont, {
         type: "bianji1",
         onClick: function onClick() {
           return onEditCallback && onEditCallback(record);
@@ -156,7 +160,7 @@ export var getColumns = function getColumns(type, hasUserGroup, onClickCallback,
   return type === 'page' ? pageColumns : groupColumns;
 };
 export var getNumPer = function getNumPer(viewUser, clickUser) {
-  if (viewUser === -1) {
+  if (!viewUser || viewUser === -1) {
     return '-';
   }
   return viewUser ? (clickUser / viewUser * 100).toFixed(1) + '%' : 0 + '%';
@@ -166,9 +170,4 @@ export var toThousands = function toThousands(num) {
     return num === -1 ? '-' : util.toThousands(num);
   }
   return num;
-};
-var sorter = function sorter(a, b) {
-  if (a.viewUser === -1 || !a.viewUser) return 0;
-  if (b.viewUser === -1 || !b.viewUser) return 1;
-  return a.clickUser / a.viewUser - b.clickUser / b.viewUser;
 };

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

@@ -10,48 +10,37 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 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 React, { useContext, useEffect, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 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 socket = new SocketClient(api.socket, currentApp === null || currentApp === void 0 ? void 0 : currentApp.appKey, {
+    var url = "wss://".concat(location.host).concat(api.socket);
+    var socket = new SocketClient(url, currentApp === null || currentApp === void 0 ? void 0 : currentApp.appKey, {
       appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
       origin: 4,
       role: 'server',
@@ -88,8 +77,8 @@ var DetailContent = function DetailContent(props) {
     });
     client.onConnected(function () {
       client.emit('openAutoTrack', _objectSpread({
-        app_id: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
-        platform: (currentApp === null || currentApp === void 0 ? void 0 : currentApp.platform) || 0
+        appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+        platform: 3
       }, props.params));
     });
     client.onError(function (err) {
@@ -99,8 +88,7 @@ var DetailContent = function DetailContent(props) {
       console.log('连接已存在');
     });
     client.on('pageInfo', function (message) {
-      console.log('接收消息', message);
-      if (message.href !== pageUrl) {
+      if (message.href !== openUrl) {
         setPageUrl(message.href);
         // 如果当前类型是单页面，则更新页面选择
         if (props.type === 'page') {
@@ -131,33 +119,24 @@ var DetailContent = function DetailContent(props) {
       href: pageUrl
     });
     client.emit('updateAutoTrackParam', _objectSpread({
-      app_id: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
-      platform: (currentApp === null || currentApp === void 0 ? void 0 : currentApp.platform) || 0
+      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 '';
+    var pUrl = pageUrl,
+      url = '';
+    var hash = pUrl.match(/#\S*$/) || [''];
+    if (hash) pUrl = pUrl.replace(hash[0], '');
+    var secret = 'autoTrack-' + getSocketSecret();
+    if (/\?/.test(pageUrl)) {
+      url = "".concat(pUrl.replace(/\/$/, ''), "&zgSecret=").concat(secret).concat(hash);
+    } else {
+      url = "".concat(pUrl.replace(/\/$/, ''), "?zgSecret=").concat(secret).concat(hash);
+    }
+    return url;
+  }, [pageUrl]);
   return /*#__PURE__*/React.createElement("div", {
     className: classPrefix
   }, /*#__PURE__*/React.createElement("div", {
@@ -170,17 +149,18 @@ var DetailContent = function DetailContent(props) {
     title: pageUrl
   }, /*#__PURE__*/React.createElement("span", {
     className: "".concat(classPrefix, "-top-value")
-  }, pageUrl))), /*#__PURE__*/React.createElement("div", {
+  }, decodeURI(pageUrl || '')))), /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-top-content")
   }, props.result.map(function (item, index) {
     var _props$params2, _props$params$userGro;
     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"
+      type: "tishi",
+      className: "".concat(classPrefix, "-tip")
     }))));
   }))), /*#__PURE__*/React.createElement("div", {
     className: "".concat(classPrefix, "-content")
@@ -193,7 +173,7 @@ var DetailContent = function DetailContent(props) {
   }, /*#__PURE__*/React.createElement("img", {
     src: renderImg
   }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("a", {
-    href: pageUrl === null || pageUrl === void 0 ? void 0 : pageUrl.trim(),
+    href: openUrl,
     target: "_blank"
   }, "\u6253\u5F00\u65B0\u6807\u7B7E\u9875", /*#__PURE__*/React.createElement(IconFont, {
     type: "zhuanfa"

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

@@ -5,12 +5,16 @@
   border: 1px solid #ecedf0;
   border-radius: 8px;
 
+  &-tip:hover {
+    color: @primary-color;
+  }
   &-top {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     padding: 16px;
     background: #fafafb;
+    border-radius: 8px 8px 0 0;
     &-title {
       display: flex;
       flex: 1;
@@ -18,7 +22,7 @@
     }
     &-value {
       display: inline-block;
-      width: calc(100% - 100px);
+      max-width: calc(100% - 100px);
       .__default-overflow();
     }
     &-label {
@@ -36,6 +40,7 @@
     &-item {
       display: flex;
       gap: 40px;
+      align-items: center;
       color: #67727f;
       .bsicon {
         margin-left: 8px;
@@ -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.d.ts

@@ -1,10 +1,6 @@
 import React from 'react';
 import './index.less';
+import { GroupModalType } from './types';
 export declare const classPrefix = "group-modal";
-declare const GroupModal: React.FC<{
-    value?: any;
-    type?: string;
-    onOk?: () => void;
-    onCancel?: () => void;
-}>;
+declare const GroupModal: React.FC<GroupModalType.Props>;
 export default GroupModal;

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

@@ -11,12 +11,10 @@ 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 { BizDialog, BizGlobalDataContext, IconFont, ajax } from '@zgfe/business-lib';
-import { Button, Form, Input, Spin } from 'antd';
+import { Button, Form, Input, Spin, message } from 'antd';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import "./index.less";
 import PageItem from "./pageItem";
-import { getPageEsData } from "./utils";
-import mockData from "./mock";
 import api from "../../constants/api";
 export var classPrefix = 'group-modal';
 var GroupModal = function GroupModal(props) {
@@ -28,23 +26,17 @@ var GroupModal = function GroupModal(props) {
     currentApp = _useContext.currentApp,
     isDemo = _useContext.isDemo;
   var refForm = useRef();
-  // 默认的url数组
-  var _useState3 = useState(mockData),
-    _useState4 = _slicedToArray(_useState3, 2),
-    defaultOption = _useState4[0],
-    setDefaultOption = _useState4[1];
   // 是否校验
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    validate = _useState6[0],
-    setValidate = _useState6[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    validate = _useState4[0],
+    setValidate = _useState4[1];
   // 按钮组
-  var _useState7 = useState([]),
-    _useState8 = _slicedToArray(_useState7, 2),
-    btnList = _useState8[0],
-    setBtnList = _useState8[1];
+  var _useState5 = useState([]),
+    _useState6 = _slicedToArray(_useState5, 2),
+    btnList = _useState6[0],
+    setBtnList = _useState6[1];
   useEffect(function () {
-    getPageEsData('', setDefaultOption, currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId, currentApp === null || currentApp === void 0 ? void 0 : currentApp.platform);
     setBtnList(function () {
       var btnGroup = [/*#__PURE__*/React.createElement(Button, {
         key: "cancel",
@@ -70,16 +62,21 @@ var GroupModal = function GroupModal(props) {
     });
   }, []);
   var onDelete = function onDelete() {
+    var _props$value;
     setLoading(true);
     ajax(api.deletePageGroup, {
       method: 'post',
       data: {
         appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
-        platform: (currentApp === null || currentApp === void 0 ? void 0 : currentApp.platform) || 0,
-        id: props.value.id
+        platform: 3,
+        id: (_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.id
       }
     }).then(function (res) {
-      if (!res) return;
+      if (!res) {
+        message.error("\u5220\u9664\u5931\u8D25");
+        return;
+      }
+      message.success("\u5220\u9664\u6210\u529F");
       props.onOk && props.onOk();
     }).finally(function () {
       setLoading(false);
@@ -90,7 +87,7 @@ var GroupModal = function GroupModal(props) {
     (_refForm$current = refForm.current) === null || _refForm$current === void 0 ? void 0 : _refForm$current.submit();
   };
   var onSubmit = function onSubmit(data) {
-    var _props$value;
+    var _props$value2;
     setValidate(true);
     var flag = true;
     data.filters.forEach(function (item) {
@@ -104,10 +101,18 @@ var GroupModal = function GroupModal(props) {
     ajax(url, {
       method: 'post',
       data: _objectSpread({
-        id: (_props$value = props.value) === null || _props$value === void 0 ? void 0 : _props$value.id
+        appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+        platform: 3,
+        id: (_props$value2 = props.value) === null || _props$value2 === void 0 ? void 0 : _props$value2.id
       }, data)
     }).then(function (res) {
-      if (!res) return;
+      var _props$value4;
+      if (!res) {
+        var _props$value3;
+        message.error("".concat((_props$value3 = props.value) !== null && _props$value3 !== void 0 && _props$value3.id ? '修改' : '创建', "\u5931\u8D25"));
+        return;
+      }
+      message.success("".concat((_props$value4 = props.value) !== null && _props$value4 !== void 0 && _props$value4.id ? '修改' : '创建', "\u6210\u529F"));
       props.onOk && props.onOk();
     }).finally(function () {
       setLoading(false);
@@ -115,6 +120,7 @@ var GroupModal = function GroupModal(props) {
   };
   return /*#__PURE__*/React.createElement(BizDialog, {
     open: true,
+    closable: true,
     className: classPrefix,
     width: 720,
     title: props.value ? '修改分组' : '创建分组',
@@ -122,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, {
@@ -146,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();
@@ -155,13 +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, {
-    defaultOption: defaultOption,
     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,8 +138,33 @@
     }
   }
 
+  &-form-item-filter.ant-form-item {
+    margin-bottom: 12px;
+  }
+  &-dropdown {
+    width: 300px;
+    &-handle {
+      width: 300px;
+    }
+  }
+  &-dropdown-panel {
+    .__select-panel();
+  }
+
+  .ant-input {
+    border-color: #fafafb;
+    &:not([disabled]):hover,
+    &: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 {
@@ -147,9 +173,18 @@
 
       .group-modal-footer-del {
         float: left;
+        background: #f2f3f4 !important;
         .bsicon {
           margin-right: 8px;
         }
+        &.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.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+declare const InputSelect: React.FC<{
+    value?: string;
+    options?: string[];
+    status?: '' | 'warning' | 'error';
+    onChange?: (data: string) => void;
+    onSearch?: (data: string) => void;
+}>;
+export default InputSelect;

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

@@ -0,0 +1,68 @@
+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); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+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 { Dropdown, Input } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import { classPrefix } from '.';
+import { IconFont } from '@zgfe/business-lib';
+var InputSelect = function InputSelect(props) {
+  var _useState = useState(props.value),
+    _useState2 = _slicedToArray(_useState, 2),
+    searchValue = _useState2[0],
+    setSearchValue = _useState2[1];
+  useEffect(function () {}, []);
+  var options = useMemo(function () {
+    if (!props.options) return [];
+    return props.options.map(function (item) {
+      return {
+        key: item,
+        label: item,
+        title: item
+      };
+    });
+  }, [props.options]);
+  var onChange = function onChange(e) {
+    var val = e.target.value;
+    if (searchValue === val) return;
+    setSearchValue(val);
+    props.onSearch && props.onSearch(val);
+  };
+  var onClick = function onClick(data) {
+    setSearchValue(data.key);
+    props.onChange && props.onChange(data.key);
+  };
+  return /*#__PURE__*/React.createElement(Dropdown, {
+    overlayClassName: "".concat(classPrefix, "-dropdown"),
+    trigger: ['click'],
+    menu: {
+      items: options,
+      selectedKeys: props.value ? [props.value] : undefined,
+      onClick: onClick
+    },
+    dropdownRender: function dropdownRender(menus) {
+      var _props$options;
+      if ((_props$options = props.options) !== null && _props$options !== void 0 && _props$options.length) {
+        return menus;
+      }
+      return /*#__PURE__*/React.createElement("div", {
+        className: "".concat(classPrefix, "-dropdown-panel")
+      }, "\u6682\u65E0\u6570\u636E");
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    placeholder: "\u8BF7\u9009\u62E9",
+    className: "".concat(classPrefix, "-dropdown-handle"),
+    value: searchValue,
+    allowClear: true,
+    title: searchValue,
+    status: props.status,
+    onChange: onChange,
+    suffix: /*#__PURE__*/React.createElement(IconFont, {
+      className: "".concat(classPrefix, "-item-down-icon"),
+      type: "xiangxia"
+    })
+  }));
+};
+export default InputSelect;