@chaoswise/business 0.0.9 → 0.0.11

package/lib/AggregateSearch/components/CloseAllIcon/assets/Close-Circle-Fill.svg

@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Icon/Fill/Close-Circle-Fill</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="聚合搜索框" transform="translate(-1278.000000, -2867.000000)">
+            <rect fill="#FFFFFF" x="0" y="0" width="1920" height="3346"></rect>
+            <g id="7" opacity="0.800000012" transform="translate(120.000000, 2665.000000)">
+                <g id="搜索框备份-2" transform="translate(0.000000, 194.000000)">
+                    <path d="M1214.00697,0.5 C1214.41913,0.5 1214.7922,0.667699564 1215.06223,0.938862019 C1215.33288,1.21063804 1215.5,1.58624721 1215.5,2.00138927 L1215.5,2.00138927 L1215.5,45.9986107 C1215.5,46.4131621 1215.33227,46.7885021 1215.0616,47.0603047 C1214.79133,47.3317133 1214.41826,47.5 1214.00697,47.5 L1214.00697,47.5 L1.99303181,47.5 C1.58086837,47.5 1.20779551,47.3323004 0.937765379,47.061138 C0.667124252,46.789362 0.5,46.4137528 0.5,45.9986107 L0.5,45.9986107 L0.5,2.00138927 C0.5,1.58683787 0.667729281,1.2114979 0.938396858,0.939695326 C1.20867209,0.668286734 1.58174111,0.5 1.99303181,0.5 L1.99303181,0.5 L1214.00697,0.5 Z" id="Rectangle-26-Copy-23备份" stroke="#FF4D4F" fill="#FFFFFF"></path>
+                    <g id="Icon/Fill/Close-Circle-Fill" transform="translate(1158.000000, 8.000000)" fill="#000000">
+                        <rect id="矩形" fill-rule="nonzero" opacity="0" x="0" y="0" width="12" height="12"></rect>
+                        <path d="M6,0.75 C3.10078125,0.75 0.75,3.10078125 0.75,6 C0.75,8.89921875 3.10078125,11.25 6,11.25 C8.89921875,11.25 11.25,8.89921875 11.25,6 C11.25,3.10078125 8.89921875,0.75 6,0.75 Z M7.93828125,7.99453125 L7.16484375,7.99101563 L6,6.60234375 L4.83632812,7.98984375 L4.06171875,7.99335937 C4.01015625,7.99335937 3.96796875,7.95234375 3.96796875,7.89960937 C3.96796875,7.87734375 3.97617188,7.85625 3.99023438,7.83867187 L5.51484375,6.02226562 L3.99023438,4.20703125 C3.97617188,4.18945312 3.96796875,4.16835937 3.96796875,4.14609375 C3.96796875,4.09453125 4.01015625,4.05234375 4.06171875,4.05234375 L4.83632813,4.05585938 L6,5.44453125 L7.16367187,4.05703125 L7.93710937,4.05351563 C7.98867187,4.05351563 8.03085937,4.09453125 8.03085937,4.14726563 C8.03085937,4.16953125 8.02265625,4.190625 8.00859375,4.20820313 L6.48632812,6.0234375 L8.00976562,7.83984375 C8.02382813,7.85742188 8.03203125,7.87851562 8.03203125,7.90078125 C8.03203125,7.95234375 7.98984375,7.99453125 7.93828125,7.99453125 Z" id="形状" fill-opacity="0.25"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

package/lib/AggregateSearch/components/CloseAllIcon/index.js

@@ -0,0 +1,13 @@
+import _Icon from "@chaoswise/ui/lib/Antd/Icon";
+import React from "react";
+import "./index.less";
+var CloseAllIcon = function CloseAllIcon(_ref) {
+  var onClickCloseAll = _ref.onClickCloseAll;
+  return /*#__PURE__*/React.createElement(_Icon, {
+    type: "close-circle",
+    theme: "filled",
+    onClick: onClickCloseAll,
+    className: "close-all-icon"
+  });
+};
+export default CloseAllIcon;

package/lib/AggregateSearch/components/CloseAllIcon/index.less

@@ -0,0 +1,11 @@
+.close-all-icon{
+    display: block;
+    position: absolute;
+    right: 45px;
+    top: 7px;
+    color: rgba(0,0,0,0.25);
+    cursor: pointer;
+    &:hover{
+        color: @text-color-secondary;
+    }
+}

package/lib/AggregateSearch/components/DropDown/index.js

@@ -411,14 +411,18 @@ var DropDown = function DropDown(props) {
     return _historyDelete.apply(this, arguments);
   }
   var menu = /*#__PURE__*/React.createElement("div", {
-    className: "aggregate-drop-down-wrap"
+    className: "aggregate-drop-down-wrap",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+    }
   }, /*#__PURE__*/React.createElement("div", {
     className: "aggregate-drop-down"
   }, keyOptionValueNotEmpty && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "list-title"
   }, "\u6807\u7B7E\u641C\u7D22"), /*#__PURE__*/React.createElement(_Spin, {
     spinning: keyLoading,
-    tip: "\u52A0\u8F7D\u4E2D..."
+    tip: "\u52A0\u8F7D\u4E2D...",
+    size: "small"
   }, !dropDownKeyListEmpty ? keyList.map(function (record, index) {
     var value = record.value,
       des = record.des;
@@ -428,18 +432,23 @@ var DropDown = function DropDown(props) {
       onClick: function onClick() {
         keyOption === null || keyOption === void 0 || keyOption.onSelect(value, record);
       }
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("img", {
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "list-title-target-wrapper"
+    }, /*#__PURE__*/React.createElement("img", {
       className: "pre-icon",
       src: keyIcon,
       alt: ""
-    }), highLight(value, keyOptionValue)), /*#__PURE__*/React.createElement("span", null, des));
+    }), highLight(value, keyOptionValue)), /*#__PURE__*/React.createElement("span", {
+      className: "list-title-des-wrapper"
+    }, des));
   }) : /*#__PURE__*/React.createElement("div", {
     className: "empty"
   }, "\u6682\u65E0\u6570\u636E\uFF0C\u63D0\u4EA4\u641C\u7D22\u540E\u641C\u7D22\u5173\u952E\u5B57"))), valueOptionValueNotEmpty && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "list-title"
   }, "Value"), /*#__PURE__*/React.createElement(_Spin, {
     spinning: valueLoading,
-    tip: "\u52A0\u8F7D\u4E2D..."
+    tip: "\u52A0\u8F7D\u4E2D...",
+    size: "small"
   }, !dropDownValueListEmpty ? valueList.map(function (record, index) {
     var value = record.value,
       des = record.des;
@@ -449,11 +458,15 @@ var DropDown = function DropDown(props) {
       onClick: function onClick() {
         valueOption === null || valueOption === void 0 || valueOption.onSelect(value, record);
       }
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("img", {
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "list-title-target-wrapper"
+    }, /*#__PURE__*/React.createElement("img", {
       className: "pre-icon",
       src: valueIcon,
       alt: ""
-    }), highLight(value, valueOptionValue === null || valueOptionValue === void 0 ? void 0 : valueOptionValue.value)), /*#__PURE__*/React.createElement("span", null, des));
+    }), highLight(value, valueOptionValue === null || valueOptionValue === void 0 ? void 0 : valueOptionValue.value)), /*#__PURE__*/React.createElement("span", {
+      className: "list-title-des-wrapper"
+    }, des));
   }) : /*#__PURE__*/React.createElement("div", {
     className: "empty"
   }, "\u6682\u65E0\u6570\u636E\uFF0C\u63D0\u4EA4\u641C\u7D22\u540E\u641C\u7D22\u5173\u952E\u5B57"))), matchOption.isShow && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -467,11 +480,15 @@ var DropDown = function DropDown(props) {
       onClick: function onClick() {
         matchOption === null || matchOption === void 0 || matchOption.onSelect(value, record);
       }
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("img", {
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "list-title-target-wrapper"
+    }, /*#__PURE__*/React.createElement("img", {
       className: "pre-icon",
       src: combinedIcon,
       alt: ""
-    }), value), /*#__PURE__*/React.createElement("span", null, des));
+    }), value), /*#__PURE__*/React.createElement("span", {
+      className: "list-title-des-wrapper"
+    }, des));
   })), combinedOption.isShow && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "list-title"
   }, "\u7EC4\u5408\u7B26\u53F7"), (combinedOption.list || DEFAULT_COMBINED_OPTION_LIST).map(function (record, index) {
@@ -483,16 +500,21 @@ var DropDown = function DropDown(props) {
       onClick: function onClick() {
         combinedOption === null || combinedOption === void 0 || combinedOption.onSelect(value, record);
       }
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("img", {
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "list-title-target-wrapper"
+    }, /*#__PURE__*/React.createElement("img", {
       className: "pre-icon",
       src: combinedIcon,
       alt: ""
-    }), value), /*#__PURE__*/React.createElement("span", null, des));
+    }), value), /*#__PURE__*/React.createElement("span", {
+      className: "list-title-des-wrapper"
+    }, des));
   })), historyOptionValueNotEmpty && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "list-title"
   }, "\u641C\u7D22\u5386\u53F2"), /*#__PURE__*/React.createElement(_Spin, {
     spinning: historyLoading,
-    tip: "\u52A0\u8F7D\u4E2D..."
+    tip: "\u52A0\u8F7D\u4E2D...",
+    size: "small"
   }, !dropDownListHistoryEmpty ? historyList.map(function (record, index) {
     var id = record.id,
       value = record.value,
@@ -503,12 +525,14 @@ var DropDown = function DropDown(props) {
       onClick: function onClick() {
         historyOption === null || historyOption === void 0 || historyOption.onSelect(value, record);
       }
-    }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("img", {
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "list-title-target-wrapper"
+    }, /*#__PURE__*/React.createElement("img", {
       className: "pre-icon",
       src: timeCircleIcon,
       alt: ""
     }), highLight(value, historyOptionValue)), /*#__PURE__*/React.createElement("span", {
-      className: "des"
+      className: "list-title-des-wrapper des"
     }, des), /*#__PURE__*/React.createElement("span", {
       className: "action"
     }, /*#__PURE__*/React.createElement(CopyToClipboard, {
@@ -537,7 +561,13 @@ var DropDown = function DropDown(props) {
     className: "empty"
   }, "\u6682\u65E0\u6570\u636E\uFF0C\u63D0\u4EA4\u641C\u7D22\u540E\u641C\u7D22\u5173\u952E\u5B57")))), /*#__PURE__*/React.createElement("div", {
     className: "desc"
-  }, /*#__PURE__*/React.createElement(_TooltipText, null, "\u5168\u6587\u68C0\u7D22\uFF1Ahello world \u5B8C\u5168\u5339\u914D\uFF1A\u201Chello world\u201D \u901A\u914D\u7B26\uFF1A* \uFF1F \u5173\u8054\u641C\u7D22\uFF1Astatus:(error OR warning) AND NOT service:\u201Cservice_a\u201D"), /*#__PURE__*/React.createElement(_Button, {
+  }, /*#__PURE__*/React.createElement(_TooltipText, null, /*#__PURE__*/React.createElement("span", null, "\u5168\u6587\u68C0\u7D22\uFF1Ahello world"), /*#__PURE__*/React.createElement("span", {
+    className: "desc-margin-32"
+  }, "\u5B8C\u5168\u5339\u914D\uFF1A\"hello world\""), /*#__PURE__*/React.createElement("span", {
+    className: "desc-margin-32"
+  }, "\u901A\u914D\u7B26\uFF1A*?"), /*#__PURE__*/React.createElement("span", {
+    className: "desc-margin-32"
+  }, "\u5173\u8054\u641C\u7D22\uFF1Astatus:(error OR warning) AND NOT service:\u201Cservice_a\u201D")), /*#__PURE__*/React.createElement(_Button, {
     type: "link",
     onClick: onHelpClick
   }, "\u5E2E\u52A9\u6587\u6863")));
@@ -548,9 +578,9 @@ var DropDown = function DropDown(props) {
       return node;
     },
     overlayStyle: {
-      top: height,
+      top: Number(height + 2),
       left: 0
-    }
+    } // 2是边框高度
   }, children);
 };
 export default DropDown;

package/lib/AggregateSearch/components/DropDown/index.less

@@ -6,20 +6,20 @@
   .aggregate-drop-down {
     width: 100%;
     max-height: 380px;
-    padding: 4px 0;
+    // padding: 4px 0;
     overflow: auto;
     justify-content: center;
     align-items: center;
 
-    .ant-spin-nested-loading {
+    .@{ant-prefix}-spin-nested-loading {
 
-      .ant-spin {
+      .@{ant-prefix}-spin {
         display: flex;
         align-items: center;
         justify-content: center;
 
-        .ant-spin-dot-spin,
-        .ant-spin-text {
+        .@{ant-prefix}-spin-dot-spin,
+        .@{ant-prefix}-spin-text {
           position: relative;
           margin: 0;
           padding: 0;
@@ -27,11 +27,11 @@
           left: 0;
         }
 
-        .ant-spin-dot-spin {
-          font-size: 18px;
-        }
+        // .ant-spin-dot-spin {
+        //   font-size: 18px;
+        // }
 
-        .ant-spin-text {
+        .@{ant-prefix}-spin-text {
           width: auto;
           margin-left: 4px;
         }
@@ -42,8 +42,19 @@
       line-height: 32px;
       background-color: rgba(0, 0, 0, 0.02);
       padding: 0 10px;
+      color: @text-color-show;
+    }
+    .list-title-target-wrapper{
+      display: flex;
+      align-items: center;
+    }
+    .list-title-des-wrapper{
+      color: @text-color-secondary;
     }
 
+    .list-title:not(:first-child){
+      margin-top: 8px;
+    }
     .list {
       &:hover {
         cursor: pointer;
@@ -54,7 +65,8 @@
         }
 
         .action {
-          display: block;
+          display: flex;
+          align-items: center;
         }
       }
 
@@ -62,10 +74,9 @@
       display: flex;
       justify-content: space-between;
       padding: 0 10px;
-
+      align-items: center;
       .action {
         display: none;
-
         .pre-icon {
           &:nth-child(2) {
             margin-right: 0;
@@ -75,8 +86,8 @@
 
       .pre-icon {
         margin-right: 8px;
-        height: 16px;
-        width: 16px;
+        // height: 16px;
+        // width: 16px;
       }
     }
 
@@ -94,7 +105,11 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-
+    margin-top: 8px;
+    color: @text-color-show;
+    .desc-margin-32{
+      margin-left: 32px;
+    }
     .ant-btn-link {
       margin-left: 10px;
     }

package/lib/AggregateSearch/components/SwitchBtn/index.less

@@ -1,15 +1,20 @@
 .aggregate-search-switch-btn {
-  border: @border-width-base @border-style-base @input-border-color;
-  border-left: none;
+  // border: @border-width-base @border-style-base @input-border-color;
+  // border-left: none;
+  border-left: @border-width-base @border-style-base @input-border-color;
   min-height: 26px;
   cursor: pointer;
   background: rgba(0, 0, 0, 0.02);
   border-radius: 0 2px 2px 0;
   display: flex;
-  padding: 0 10px;
+  padding: 0 9px;
   align-items: flex-start;
   align-self: stretch; // 使得高度和父元素一致
+  width: 35px;
+  &:hover{
+    border-left-color: @input-hover-border-color;
+  }
   img{
-    transform: translateY(7px);
+    transform: translateY(8px);
   }
 }

package/lib/AggregateSearch/index.js

@@ -15,6 +15,8 @@ import SwitchBtn from "./components/SwitchBtn";
 import DropDown from "./components/DropDown";
 import "./index.less";
 import useDropDown from "./hooks/useDropDown";
+import CloseAllIcon from "./components/CloseAllIcon";
+import classnames from "classnames";
 var AggregateSearch = function AggregateSearch(_ref) {
   var _ref$onChange = _ref.onChange,
     onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
@@ -71,7 +73,8 @@ var AggregateSearch = function AggregateSearch(_ref) {
     onHelpClick = _ref$onHelpClick === void 0 ? function () {} : _ref$onHelpClick,
     mode = _ref.mode,
     _ref$defaultMode = _ref.defaultMode,
-    defaultMode = _ref$defaultMode === void 0 ? "tag" : _ref$defaultMode;
+    defaultMode = _ref$defaultMode === void 0 ? "tag" : _ref$defaultMode,
+    placeholder = _ref.placeholder;
   // 输入模式
   var _useState = useState(defaultMode),
     _useState2 = _slicedToArray(_useState, 2),
@@ -87,6 +90,11 @@ var AggregateSearch = function AggregateSearch(_ref) {
     setSelValue = _useState4[1];
   var container = useRef(null);
   var containerWrapperRef = useRef(null);
+  // 是否可编辑，若点击编辑区域外内容则不可编辑 todo：用于修复聚焦bug
+  var _useState5 = useState(true),
+    _useState6 = _slicedToArray(_useState5, 2),
+    contentEditable = _useState6[0],
+    setContentEditable = _useState6[1];
   // 是否正在输入中文
   var isComposing = useRef(false);
   var handleSyntaxCheck = /*#__PURE__*/function () {
@@ -156,18 +164,23 @@ var AggregateSearch = function AggregateSearch(_ref) {
           case 3:
             checkRes = _context6.sent;
             if (checkRes) {
-              container.current.classList.add("syntax-error");
-              container.current.setAttribute("data-error", checkRes.msg);
+              containerWrapperRef.current.classList.add("syntax-error");
+              containerWrapperRef.current.setAttribute("data-error", checkRes.msg);
             } else {
-              container.current.classList.remove("syntax-error");
-              container.current.removeAttribute("data-error");
+              containerWrapperRef.current.classList.remove("syntax-error");
+              containerWrapperRef.current.removeAttribute("data-error");
             }
             return _context6.abrupt("return");
           case 6:
             // 计算当前光标位置(纯文本模式)
             planeTextPosition = getCursorPosition(container.current); // 将纯文本模式转为html模式（语法解析器）
             htmlString = genHtmlAndSyntaxCheckResByString(inputStr);
-            container.current.innerHTML = htmlString;
+            if (!htmlString.trim()) {
+              // 修复空状态placeholder
+              container.current.innerHTML = "";
+            } else {
+              container.current.innerHTML = htmlString;
+            }
             // 找到格式化后的光标位置
             if (planeTextPosition !== null) {
               _getCursorNodeAndInde3 = getCursorNodeAndIndex(container.current, planeTextPosition), targetNode = _getCursorNodeAndInde3.targetNode, targetIndex = _getCursorNodeAndInde3.targetIndex; // 设置光标位置
@@ -227,8 +240,14 @@ var AggregateSearch = function AggregateSearch(_ref) {
   // 监听点击事件(container以外的地方）
   useEffect(function () {
     var handleClick = function handleClick(e) {
-      if (container.current && !container.current.contains(e.target)) {
+      // 可编辑文本框边框线e.target !== containerWrapperRef.current
+      if (container.current && !container.current.contains(e.target) && e.target !== containerWrapperRef.current) {
         setVisible(false);
+        setContentEditable(false);
+      } else {
+        var _container$current;
+        setContentEditable(true);
+        (_container$current = container.current) === null || _container$current === void 0 || _container$current.focus();
       }
     };
     document.addEventListener("click", handleClick);
@@ -245,14 +264,23 @@ var AggregateSearch = function AggregateSearch(_ref) {
       container.current.innerText = container.current.innerText;
     } else {
       // 移除错误提示
-      container.current.classList.remove("syntax-error");
-      container.current.removeAttribute("data-error");
+      containerWrapperRef.current.classList.remove("syntax-error");
+      containerWrapperRef.current.removeAttribute("data-error");
     }
     handleValueChange(container.current.innerText, mode);
   };
+  var onKeyDown = function onKeyDown(e) {
+    var keyCode = e.keyCode;
+    if (keyCode === 13) {
+      // 回车阻止默认的换行行为
+      e.preventDefault();
+      onChange(e.target.innerText);
+      setVisible(false);
+    }
+  };
   return /*#__PURE__*/React.createElement(DropDown, {
     onHelpClick: onHelpClick,
-    visible: visible && curMode === "tag",
+    visible: contentEditable && visible && curMode === "tag",
     keyOption: {
       value: dropStatus.key.isShow ? dropStatus.key.value : null,
       fetchFuc: fetchKeyList,
@@ -293,12 +321,17 @@ var AggregateSearch = function AggregateSearch(_ref) {
     },
     containerWrapperRef: containerWrapperRef
   }, /*#__PURE__*/React.createElement("div", {
-    className: "aggregate-search-wrapper",
+    className: classnames("aggregate-search-wrapper", {
+      "aggregate-search-text-wrapper": curMode === "text"
+    }),
     ref: containerWrapperRef
   }, /*#__PURE__*/React.createElement("div", {
     spellCheck: false,
-    onCompositionEnd: function onCompositionEnd() {
-      return isComposing.current = false;
+    onCompositionEnd: function onCompositionEnd(e) {
+      isComposing.current = false;
+      // 输入中文结束再触发一次，保证文本框对应内容与当前返回值一致，选项效果不会丢失
+      handleValueChange(e.target.innerText);
+      onChange(e.target.innerText);
     },
     onCompositionStart: function onCompositionStart() {
       return isComposing.current = true;
@@ -306,12 +339,20 @@ var AggregateSearch = function AggregateSearch(_ref) {
     className: "aggregate-search-input",
     ref: container,
     "data-attr": "container",
-    contentEditable: true,
+    "data-placeholder": placeholder,
+    contentEditable: contentEditable,
     suppressContentEditableWarning: true,
     onPaste: textInit // 只粘贴纯文本 去除html标签
     ,
     onInput: onInput,
-    onFocus: onFocus
+    onFocus: onFocus,
+    onKeyDown: onKeyDown
+  }), /*#__PURE__*/React.createElement(CloseAllIcon, {
+    onClickCloseAll: function onClickCloseAll() {
+      container.current.innerText = "";
+      handleValueChange("");
+      onChange("");
+    }
   }), /*#__PURE__*/React.createElement(SwitchBtn, {
     onChange: onModeChange,
     mode: mode || selMode
@@ -345,6 +386,10 @@ AggregateSearch.propTypes = {
   /**
    * 删除历史记录回调，需要返回promise，async(id)=>Boolean
    */
-  onHistoryDelete: PropTypes.func
+  onHistoryDelete: PropTypes.func,
+  /**
+   * 内容为空提示
+   */
+  placeholder: PropTypes.string
 };
 export default AggregateSearch;

package/lib/AggregateSearch/index.less

@@ -21,55 +21,60 @@
   align-items: flex-start;
   white-space: pre-wrap;
   position: relative;
+  border: @border-width-base @border-style-base @input-border-color;
+  border-radius: @border-radius-base;
+  // 聚焦样式修改
+  &:focus-within {
+    .active();
+  }
+  &:hover {
+    .hover();
+  }
+
+  // 取消默认聚焦样式
+  &:focus-visible {
+    outline: none;
+  }
   .aggregate-search-input {
     position: relative;
     padding: 0 10px;
+    padding-right: 30px;
     flex: 1;
     min-height: 26px;
-    line-height: 24px;
-    border: @border-width-base @border-style-base @input-border-color;
-    border-radius: @border-radius-base 0 0 @border-radius-base;
-
-    // 聚焦样式修改
-    &:focus {
-      .active();
-    }
-
-    // 取消默认聚焦样式
-    &:focus-visible {
-      outline: none;
-    }
-
+    line-height: 26px;
+    // border-radius: @border-radius-base 0 0 @border-radius-base;
+    outline: none;
     &:empty:before {
-      content: '搜索指标标识、维度、或通过筛选区筛选指标';
+      content: attr(data-placeholder);
       font-size: 12px;
       color: rgba(0, 0, 0, 0.45);
       line-height: 20px;
     }
-
-    &:focus:before {
-      content: none;
+    &:empty + .close-all-icon{
+      display: none;
+    }
+    &:not(.syntax-error):focus:before { // 需要排除掉syntax-error的样式不然报错内容丢失
+      content: ""; // 不能为none，否则placeholder不显示
     }
 
     .tag-box {
       position: relative;
       background: #FFFFFF;
-      border: 1px solid #E3E3E3;
+      border: @border-width-base @border-style-base #E3E3E3;
       border-radius: 2px;
-      height: 18px;
-      line-height: 16px;
+      height: 20px;
+      line-height: 18px;
       display: inline-block;
       margin-right: 2px;
-      padding-right: 6px;
-      // margin-top: -1px;
+      padding-right: 5px;
 
       .tag-con {
         display: inline-block;
-        height: 16px;
-        line-height: 16px;
+        height: 18px;
+        line-height: 18px;
 
         &:first-child {
-          padding-left: 6px;
+          padding-left:5px;
         }
       }
 
@@ -78,7 +83,7 @@
       }
 
       .tag-con-key-last {
-        padding-right: 4px;
+        padding-right: 2px;
       }
 
       .tag-con-keyword {
@@ -91,16 +96,27 @@
 
       .tag-con-match {
         color: #FA8C16;
+        padding-left: 2px;
+      }
+      &:not(.syntax-error):has(.tag-con-keyword_AND_OR:only-child){
+        border-color: transparent;
       }
     }
   }
+  &.aggregate-search-text-wrapper{
+    .aggregate-search-input{
+      line-height: 20px;
+      padding-top: 3px;
+      padding-bottom: 3px;
+    }
+  }
 }
 
 
 .syntax-error {
   // 语法错误，高亮样式
-  border: 1px solid #FF4D4F !important;
-
+  border: @border-width-base @border-style-base @red-5 !important;
+  box-shadow: none !important;
   &:hover {
 
     // 伪类展示属性值
@@ -113,11 +129,12 @@
       height: 20px;
       line-height: 20px;
       background: #FFF1F0;
-      border: 1px solid #FF4D4F;
+      border: @border-width-base @border-style-base @red-5;
       border-radius: 0 0 2px 2px;
       font-size: 12px;
-      color: #FF4D4F;
+      color: @red-5;
       padding: 0 10px;
+      min-width: 100px;
     }
   }
 }

package/lib/AggregateSearch/utils/index.js

@@ -122,9 +122,13 @@ export var genHtmlAndSyntaxCheckResByString = function genHtmlAndSyntaxCheckResB
       var hasMatch = matchIndex !== -1;
       html = tokenList.map(function (token, index) {
         var genClassName = function genClassName(typeClass) {
-          return classNames(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-            "tag-con": true
-          }, typeClass, true), "tag-con-key", hasMatch ? index < matchIndex : false), "tag-con-key-last", matchIndex ? index === matchIndex - 1 : false), "tag-con-value", hasMatch ? index > matchIndex : false));
+          return classNames(typeClass, {
+            "tag-con": true,
+            // [typeClass]: true,
+            "tag-con-key": hasMatch ? index < matchIndex : false,
+            "tag-con-key-last": matchIndex ? index === matchIndex - 1 : false,
+            "tag-con-value": hasMatch ? index > matchIndex : false
+          });
         };
         var genDataType = function genDataType(index) {
           if (hasMatch) {
@@ -139,7 +143,7 @@ export var genHtmlAndSyntaxCheckResByString = function genHtmlAndSyntaxCheckResB
           return "key";
         };
         var dataType = genDataType(index);
-        var getEleProps = function getEleProps(type) {
+        var getEleProps = function getEleProps(type, text) {
           var typeMap = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, TOKEN_TYPES.MATCH, {
             tagName: "span",
             props: {
@@ -150,7 +154,7 @@ export var genHtmlAndSyntaxCheckResByString = function genHtmlAndSyntaxCheckResB
           }), TOKEN_TYPES.KEYWORD, {
             tagName: "span",
             props: {
-              "class": genClassName("tag-con-keyword"),
+              "class": genClassName(text === "AND" || text === "OR" ? "tag-con-keyword tag-con-keyword_AND_OR" : "tag-con-keyword"),
               "data-attr": "keyword",
               "data-type": dataType
             }
@@ -173,7 +177,7 @@ export var genHtmlAndSyntaxCheckResByString = function genHtmlAndSyntaxCheckResB
         };
         var type = token.type,
           text = token.text;
-        var curProps = getEleProps(type);
+        var curProps = getEleProps(type, text);
         var elePropsString = Object.entries(curProps.props).map(function (_ref) {
           var _ref2 = _slicedToArray(_ref, 2),
             key = _ref2[0],