@zgfe/modules-event 1.0.7 → 1.0.29-zhongyuan.2

package/README.md

@@ -1,35 +1,35 @@
-# modules-event
-
-事件分析
-
-## Getting Started
-
-Install dependencies,
-
-```bash
-$ npm i
-```
-
-Start the dev server,
-
-```bash
-$ npm start
-```
-
-Build documentation,
-
-```bash
-$ npm run docs:build
-```
-
-Run test,
-
-```bash
-$ npm test
-```
-
-Build library via `father-build`,
-
-```bash
-$ npm run build
-```
+# modules-event
+
+事件分析
+
+## Getting Started
+
+Install dependencies,
+
+```bash
+$ npm i
+```
+
+Start the dev server,
+
+```bash
+$ npm start
+```
+
+Build documentation,
+
+```bash
+$ npm run docs:build
+```
+
+Run test,
+
+```bash
+$ npm test
+```
+
+Build library via `father-build`,
+
+```bash
+$ npm run build
+```

package/es/components/eventFilter/index.js

@@ -12,11 +12,13 @@ function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefine
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 import { Tooltip } from 'antd';
 import React, { useEffect, useRef, useState, useContext } from 'react';
-import { BizEventSelector, BizAttributeSelector, IconFont, BizAttrConditionGroup, BizGlobalDataContext } from '@zgfe/business-lib';
+import { BizEventSelector, BizAttributeSelector, IconFont, BizAttrConditionGroup, BizGlobalDataContext, ajax } from '@zgfe/business-lib';
 import { EventContext } from '../../types';
 import './styles/index.less';
 import { judgeIsCity, judgeIsArea } from '../../modules/content/utils';
 import _ from 'lodash';
+import SetCascade from './setCascade';
+import { Apis } from '../../constants';
 var classPrefix = 'eventfilter-box';
 var EventFilter = function EventFilter(props) {
   var _props$value, _props$value2;
@@ -25,9 +27,9 @@ var EventFilter = function EventFilter(props) {
     setEnableSelectChart = props.setEnableSelectChart,
     analysisType = props.analysisType;
   var _useContext = useContext(EventContext),
-    selectEventData = _useContext.selectEventData,
     searchData = _useContext.searchData,
-    setSearchData = _useContext.setSearchData;
+    setSearchData = _useContext.setSearchData,
+    currentApp = _useContext.currentApp;
   var _useContext2 = useContext(BizGlobalDataContext),
     _useContext2$eventIdM = _useContext2.eventIdMap,
     eventIdMap = _useContext2$eventIdM === void 0 ? {} : _useContext2$eventIdM;
@@ -76,15 +78,20 @@ var EventFilter = function EventFilter(props) {
     _useState16 = _slicedToArray(_useState15, 2),
     eventList = _useState16[0],
     setEventList = _useState16[1];
+  var _useState17 = useState(true),
+    _useState18 = _slicedToArray(_useState17, 2),
+    isCascadeOpen = _useState18[0],
+    setIsCascadeOpen = _useState18[1];
+  var _useState19 = useState(false),
+    _useState20 = _slicedToArray(_useState19, 2),
+    isCascadeShow = _useState20[0],
+    setIsCascadeShow = _useState20[1];
+  var _useState21 = useState(),
+    _useState22 = _slicedToArray(_useState21, 2),
+    relationConfig = _useState22[0],
+    setRelationConfig = _useState22[1];
   useEffect(function () {
     var _data = props.value;
-    if (selectEventData) {
-      _data = selectEventData;
-      setEvent({
-        id: selectEventData.id,
-        name: selectEventData.name
-      });
-    }
     if (_data) {
       if (_data && _data.id) {
         setShowDimension(true);
@@ -94,13 +101,33 @@ var EventFilter = function EventFilter(props) {
         setCount(_data.filters.conditions.length);
       }
       if (_data.dimension) {
-        var _attr = _data.dimension;
-        setBizAttributeSelectorValue(_objectSpread(_objectSpread({}, _data.dimension), {}, {
-          key: "".concat(_attr.propCategory, "-").concat(_attr.value)
-        }));
+        setBizAttributeSelectorValue(_data.dimension);
       }
     }
-  }, [selectEventData]);
+    ajax(Apis.getEventSwitch, {
+      method: 'post',
+      data: {
+        appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId
+      }
+    }).then(function (res) {
+      if (res === null || res === void 0 ? void 0 : res.data) {
+        setIsCascadeOpen(res === null || res === void 0 ? void 0 : res.data);
+        queryRelationConfig();
+      }
+    });
+  }, []);
+  var queryRelationConfig = function queryRelationConfig() {
+    ajax(Apis.queryRelationConfig, {
+      method: 'post',
+      data: {
+        appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId
+      }
+    }).then(function (res) {
+      if (res === null || res === void 0 ? void 0 : res.data) {
+        setRelationConfig(res === null || res === void 0 ? void 0 : res.data);
+      }
+    });
+  };
   var onAdd = function onAdd() {
     if ((event === null || event === void 0 ? void 0 : event.id) === -1) {
       return;
@@ -174,8 +201,7 @@ var EventFilter = function EventFilter(props) {
         propCategory: attr.propCategory,
         category: attr.category,
         value: _value,
-        id: attr.id,
-        key: "".concat(attr.propCategory, "-").concat(_value)
+        id: attr.id
       });
     }
   };
@@ -244,7 +270,19 @@ var EventFilter = function EventFilter(props) {
     onClick: function onClick() {
       return onAdd();
     }
-  })))), (filter || isAdd) && /*#__PURE__*/React.createElement("div", {
+  })), isCascadeOpen ? /*#__PURE__*/React.createElement(Tooltip, {
+    placement: "top",
+    title: '事件属性级联设置'
+  }, /*#__PURE__*/React.createElement(IconFont, {
+    style: {
+      marginLeft: 16
+    },
+    className: "".concat((event === null || event === void 0 ? void 0 : event.id) === -1 ? 'disable' : ''),
+    type: "guanli",
+    onClick: function onClick() {
+      setIsCascadeShow(true);
+    }
+  })) : null)), event && eventIdMap && eventIdMap[event.id] && (filter || isAdd) && /*#__PURE__*/React.createElement("div", {
     className: "".concat(count > 0 ? 'attr-box-show' : '', " top")
   }, /*#__PURE__*/React.createElement(BizAttrConditionGroup, {
     ref: conditionRef,
@@ -255,7 +293,17 @@ var EventFilter = function EventFilter(props) {
     enableUserProp: analysisType === 'eventProp' ? false : true,
     eventIdList: event ? [event.id] : [],
     onChange: onChangeFilters,
-    onConditionsCount: setCount
-  })));
+    onConditionsCount: setCount,
+    relationConfig: relationConfig
+  })), isCascadeOpen && isCascadeShow && /*#__PURE__*/React.createElement(SetCascade, {
+    relationConfig: relationConfig,
+    onCancel: function onCancel() {
+      setIsCascadeShow(false);
+    },
+    submit: function submit() {
+      queryRelationConfig();
+      setIsCascadeShow(false);
+    }
+  }));
 };
 export default EventFilter;

package/es/components/eventFilter/setCascade.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const SelectAttributes: React.FC<any>;
+export default SelectAttributes;

package/es/components/eventFilter/setCascade.js

@@ -0,0 +1,286 @@
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+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 { IconFont, ajax, BizDialog, BizEventSelector, BizAttributeSelector, BizGlobalDataContext } from '@zgfe/business-lib';
+import { message, Button, Empty } from 'antd';
+import { useContext, useEffect, useRef } from 'react';
+import React, { useState } from 'react';
+import _ from 'lodash';
+import { Apis } from '../../constants';
+var SelectAttributes = function SelectAttributes(props) {
+  var classPrefix = 'set-cascade';
+  var _useState = useState([{}]),
+    _useState2 = _slicedToArray(_useState, 2),
+    eventAttrList = _useState2[0],
+    setEventAttrList = _useState2[1];
+  var _useContext = useContext(BizGlobalDataContext),
+    currentApp = _useContext.currentApp;
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    deleteIds = _useState4[0],
+    setDeleteIds = _useState4[1];
+  var scrollContainerRef = useRef();
+  var scrollToBottom = function scrollToBottom() {
+    var _scrollContainerRef$c = scrollContainerRef.current,
+      scrollHeight = _scrollContainerRef$c.scrollHeight,
+      clientHeight = _scrollContainerRef$c.clientHeight;
+    scrollContainerRef.current.scrollTo({
+      top: scrollHeight - clientHeight,
+      behavior: 'smooth'
+    });
+  };
+  useEffect(function () {
+    if (props.relationConfig && props.relationConfig.length) {
+      setEventAttrList(props.relationConfig.map(function (item) {
+        return {
+          id: item.id,
+          event: {
+            id: item.eventId,
+            name: item.eventName
+          },
+          attrSup: {
+            id: item.eventAttrIdSup,
+            label: item.eventAttrNameSup,
+            propCategory: 'eventProp'
+          },
+          attrSub: {
+            id: item.eventAttrIdSub,
+            label: item.eventAttrNameSub,
+            propCategory: 'eventProp'
+          }
+        };
+      }));
+    }
+  }, []);
+  var changeItemInfo = function changeItemInfo(i, key, v) {
+    var dealData = _.clone(eventAttrList);
+    dealData[i]['isEdit'] = true;
+    dealData[i][key] = v;
+    if (key == 'event') {
+      dealData[i]['attrSup'] = void 0;
+      dealData[i]['attrSub'] = void 0;
+    }
+    setEventAttrList(dealData);
+    if (key === 'attrSup' && dealData[i]['attrSub'] && v && v.id === dealData[i]['attrSub'].id || key === 'attrSub' && dealData[i]['attrSup'] && v && v.id === dealData[i]['attrSup'].id) {
+      message.warn('事件属性不可相同');
+      setTimeout(function () {
+        return changeItemInfo(i, key, undefined);
+      }, 200);
+      return;
+    }
+  };
+  var dealEventAttr = function dealEventAttr(index) {
+    var dealData = _.clone(eventAttrList);
+    if (dealData[index].id) {
+      setDeleteIds([].concat(_toConsumableArray(deleteIds), [dealData[index].id]));
+    }
+    dealData.splice(index, 1);
+    setEventAttrList(dealData);
+  };
+  var submit = function submit() {
+    if (eventAttrList.filter(function (item) {
+      return !item.event || !item.event.id;
+    }).length) {
+      message.warn('设置事件不可为空');
+      return;
+    }
+    if (eventAttrList.filter(function (item) {
+      return !item.attrSup || !item.attrSup.id || !item.attrSub || !item.attrSub.id;
+    }).length) {
+      message.warn('事件属性不可为空');
+      return;
+    }
+    var addEventRelation = eventAttrList.filter(function (item) {
+      return !item.id;
+    }).map(function (item) {
+      return {
+        eventId: item.event.id,
+        eventName: item.event.name,
+        eventAttrIdSup: item.attrSup.id,
+        eventAttrNameSup: item.attrSup.label,
+        eventAttrIdSub: item.attrSub.id,
+        eventAttrNameSub: item.attrSub.label
+      };
+    });
+    var updateEventRelation = eventAttrList.filter(function (item) {
+      return item.id && item.isEdit;
+    }).map(function (item) {
+      return {
+        id: item.id,
+        eventId: item.event.id,
+        eventName: item.event.name,
+        eventAttrIdSup: item.attrSup.id,
+        eventAttrNameSup: item.attrSup.label,
+        eventAttrIdSub: item.attrSub.id,
+        eventAttrNameSub: item.attrSub.label
+      };
+    });
+    if ([].concat(_toConsumableArray(addEventRelation), _toConsumableArray(updateEventRelation), _toConsumableArray(deleteIds)).length) {
+      ajax(Apis.relationSaveConfig, {
+        method: 'post',
+        data: {
+          appId: currentApp === null || currentApp === void 0 ? void 0 : currentApp.appId,
+          addEventRelation: addEventRelation,
+          updateEventRelation: updateEventRelation,
+          deleteIds: deleteIds
+        }
+      }).then(function (res) {
+        if ((res === null || res === void 0 ? void 0 : res.code) == '100000') {
+          props.submit && props.submit();
+          message.success('保存成功');
+        }
+      });
+    } else {
+      props.onCancel && props.onCancel();
+      message.success('保存成功');
+    }
+  };
+  return /*#__PURE__*/React.createElement(BizDialog, {
+    wrapClassName: "".concat(classPrefix, "-modal-box"),
+    width: 520,
+    open: true,
+    title: "\u4E8B\u4EF6\u5C5E\u6027\u7EA7\u8054\u8BBE\u7F6E",
+    closable: true,
+    onCancel: props.onCancel,
+    footer: null
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-modal-box-tips")
+  }, "\u7EA7\u8054\u5173\u7CFB\u8BBE\u7F6E\u540E\uFF0CT+1\u65E5\u5B8C\u6210\u66F4\u65B0\uFF0C\u8BF7\u4E8E\u6B21\u65E5\u524D\u6765\u67E5\u8BE2"), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-modal-box-set"),
+    ref: scrollContainerRef
+  }, !eventAttrList.length && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-modal-box-set-empty")
+  }, /*#__PURE__*/React.createElement(Empty, {
+    image: Empty.PRESENTED_IMAGE_SIMPLE,
+    description: "\u6682\u65E0\u6570\u636E"
+  })), eventAttrList.map(function (item, index) {
+    var _item$event, _item$event2;
+    return /*#__PURE__*/React.createElement("div", {
+      key: index,
+      className: "".concat(classPrefix, "-modal-box-set-item")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-modal-box-set-item-info")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-modal-box-set-item-info-item")
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: 12
+      }
+    }, "\u8BBE\u7F6E\u4E8B\u4EF6"), /*#__PURE__*/React.createElement(BizEventSelector, {
+      showAllEvent: false,
+      showBuiltInTarget: false,
+      popupContainer: false,
+      defaultSelectAble: false,
+      value: {
+        event: item.event
+      },
+      onChange: function onChange(e) {
+        changeItemInfo(index, 'event', e.event);
+      },
+      placeholder: "\u8BF7\u9009\u62E9\u4E8B\u4EF6"
+    })), /*#__PURE__*/React.createElement("div", {
+      style: {
+        paddingLeft: 8
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-modal-box-set-item-info-item"),
+      style: {
+        marginBottom: 16
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-modal-box-set-item-info-item-shu")
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-modal-box-set-item-info-item-heng")
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: 12
+      }
+    }, "\u4E0A\u7EA7\u4E8B\u4EF6\u5C5E\u6027"), /*#__PURE__*/React.createElement(BizAttributeSelector, {
+      isString: true,
+      isHideYeWu: true,
+      enableEventProp: true,
+      enableUserProp: false,
+      enableEnvProp: false,
+      eventIdList: [item === null || item === void 0 ? void 0 : (_item$event = item.event) === null || _item$event === void 0 ? void 0 : _item$event.id],
+      value: item.attrSup,
+      enableDelete: true,
+      onChange: function onChange(e) {
+        changeItemInfo(index, 'attrSup', e);
+      },
+      onDelete: function onDelete() {
+        changeItemInfo(index, 'attrSup', undefined);
+      },
+      placeholder: "\u8BF7\u9009\u62E9\u7EC6\u5206\u5C5E\u6027"
+    })), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-modal-box-set-item-info-item")
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-modal-box-set-item-info-item-shu"),
+      style: {
+        marginTop: -32
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-modal-box-set-item-info-item-heng")
+    }), /*#__PURE__*/React.createElement("div", {
+      style: {
+        marginRight: 12
+      }
+    }, "\u4E0B\u7EA7\u4E8B\u4EF6\u5C5E\u6027"), /*#__PURE__*/React.createElement(BizAttributeSelector, {
+      isString: true,
+      isHideYeWu: true,
+      enableEventProp: true,
+      enableUserProp: false,
+      enableEnvProp: false,
+      eventIdList: [item === null || item === void 0 ? void 0 : (_item$event2 = item.event) === null || _item$event2 === void 0 ? void 0 : _item$event2.id],
+      value: item.attrSub,
+      enableDelete: true,
+      onChange: function onChange(e) {
+        changeItemInfo(index, 'attrSub', e);
+      },
+      onDelete: function onDelete() {
+        changeItemInfo(index, 'attrSub', undefined);
+      },
+      placeholder: "\u8BF7\u9009\u62E9\u7EC6\u5206\u5C5E\u6027"
+    })))), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(classPrefix, "-modal-box-set-item-info-item")
+    }, /*#__PURE__*/React.createElement(IconFont, {
+      size: 16,
+      type: "qingchu",
+      onClick: function onClick() {
+        dealEventAttr(index);
+      }
+    })));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classPrefix, "-modal-box-footer")
+  }, /*#__PURE__*/React.createElement(Button, {
+    disabled: eventAttrList.length > 4,
+    shape: "round",
+    className: "button addEvent ".concat(eventAttrList.length > 4 ? 'disabled' : ''),
+    onClick: function onClick() {
+      setEventAttrList([].concat(_toConsumableArray(eventAttrList), [{}]));
+      setTimeout(function () {
+        return scrollToBottom();
+      });
+    }
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(IconFont, {
+    type: "tianjia3",
+    style: {
+      marginRight: 8
+    }
+  }), "\u6DFB\u52A0\u7EA7\u8054\u5173\u7CFB")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    onClick: props.onCancel,
+    style: {
+      marginRight: 16
+    }
+  }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(Button, {
+    type: 'primary',
+    onClick: submit
+  }, "\u4FDD\u5B58"))));
+};
+export default SelectAttributes;

package/es/components/eventFilter/styles/index.less

@@ -1,36 +1,148 @@
-.eventfilter-box {
-  .attr-box-show {
-    margin-top: 4px;
-  }
-  > div:nth-child(1) {
-    display: flex;
-    padding: 4px 0 4px 24px;
-    &:hover {
-      background: #e8efff;
-    }
-    .biz-event-select,
-    .biz-attr-select {
-      min-width: 208px;
-      margin-right: 16px;
-    }
-    .shaixuan {
-      margin-top: 2px;
-      color: #9aa1a9;
-      font-size: 20px !important;
-      cursor: pointer;
-    }
-    .shaixuan:hover {
-      color: #165dff;
-    }
-    .disable {
-      color: #ccd0d4 !important;
-      cursor: not-allowed !important;
-    }
-  }
-  &-multiple {
-    .biz-event-select {
-      width: auto !important;
-      min-width: 208px;
-    }
-  }
-}
+.eventfilter-box {
+  .attr-box-show {
+    margin-top: 4px;
+  }
+  > div:nth-child(1) {
+    display: flex;
+    padding: 4px 0 4px 24px;
+    &:hover {
+      background: #e8efff;
+    }
+    .biz-event-select,
+    .biz-attr-select {
+      min-width: 208px;
+      margin-right: 16px;
+    }
+    .shaixuan,
+    .guanli {
+      margin-top: 2px;
+      color: #9aa1a9;
+      font-size: 20px !important;
+      cursor: pointer;
+    }
+    .shaixuan:hover,
+    .guanli:hover {
+      color: #165dff;
+    }
+    .disable {
+      color: #ccd0d4 !important;
+      cursor: not-allowed !important;
+    }
+  }
+  &-multiple {
+    .biz-event-select {
+      width: auto !important;
+      min-width: 208px;
+    }
+  }
+}
+
+.set-cascade-modal-box {
+  .ant-modal-header {
+    padding-bottom: 0;
+  }
+  .ant-modal-body {
+    padding: 0;
+  }
+  &-tips {
+    padding: 16px 24px;
+    color: #67727f;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 22px;
+  }
+  &-set::-webkit-scrollbar {
+    display: none;
+  }
+  &-set {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    height: 328px;
+    padding-right: 24px;
+    padding-bottom: 16px;
+    padding-left: 24px;
+    overflow-y: auto;
+    &-empty {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 328px;
+    }
+    &-item {
+      display: flex;
+      flex-direction: row;
+      gap: 16px;
+      align-self: stretch;
+      justify-content: space-between;
+      padding: 16px 16px 16px 24px;
+      color: var(--io-N8-, #354354);
+      font-weight: 400;
+      font-size: 14px;
+      font-family: 'PingFang SC';
+      font-style: normal;
+      line-height: 22px;
+      border: 1px solid var(--io-i1-, #e8efff);
+      border-radius: 4px;
+      &-info {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: 16px;
+        &-item {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          height: 32px;
+          .biz-event-select,
+          .biz-attr-select {
+            flex: 1;
+          }
+          .biz-attr-select-handle {
+            width: inherit;
+          }
+          &-shu {
+            width: 1px;
+            height: 32px;
+            background: #e8efff;
+          }
+          &-heng {
+            width: 12px;
+            height: 1px;
+            margin-right: 8px;
+            background: #e8efff;
+          }
+        }
+      }
+      .qingchu {
+        color: #9aa1a9;
+        cursor: pointer;
+      }
+      .qingchu:hover {
+        color: #fb5547;
+      }
+    }
+  }
+  &-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    height: 80px;
+    padding: 24px;
+    background: #fff;
+    border-top: 1px solid var(--io-n-05, #f2f3f4);
+    border-bottom-right-radius: 8px;
+    border-bottom-left-radius: 8px;
+    .addEvent {
+      padding: 0 16px;
+      div {
+        display: flex;
+        align-items: center;
+      }
+    }
+    .button:not(.disabled):not(.ant-btn-primary) {
+      color: #1454e5;
+      border: 1px solid #1454e5;
+    }
+  }
+}