fix(amis): NestedSelect 级联选择器搜索高亮逻辑重构

packages/amis-core/src/utils/dom.tsx

@@ -1,4 +1,5 @@
 import ReactDOM from 'react-dom';
+import React from 'react';
 import getOffset from './offset';
 import getPosition from './position';
 
@@ -104,10 +105,9 @@ export function calculatePosition(
   const isAuto = placement === 'auto';
   // 兜底方向
   const autoDefaultPlacement = 'left-bottom-left-top';
-  placement =
-    isAuto
-      ? `left-bottom-left-top right-bottom-right-top left-top-left-bottom right-top-right-bottom ${autoDefaultPlacement}`
-      : placement;
+  placement = isAuto
+    ? `left-bottom-left-top right-bottom-right-top left-top-left-bottom right-top-right-bottom ${autoDefaultPlacement}`
+    : placement;
 
   let positionLeft = 0,
     positionTop = 0,
@@ -133,8 +133,13 @@ export function calculatePosition(
       // 根据之前的计算结果，使用收集的可见方向作为兜底，避免完全不可见
       if (isAuto && tests.length === 0) {
         const [_atX, _atY, _myX, _myY] = autoDefaultPlacement.split('-');
-        const {atX = _atX, atY = _atY, myX = _myX, myY = _myY} = visiblePlacement;
-        current = (activePlacement = [atX, atY, myX, myY].join('-'));
+        const {
+          atX = _atX,
+          atY = _atY,
+          myX = _myX,
+          myY = _myY
+        } = visiblePlacement;
+        current = activePlacement = [atX, atY, myX, myY].join('-');
       }
 
       let [atX, atY, myX, myY] = current.split('-');
@@ -271,3 +276,20 @@ export function getStyleNumber(element: HTMLElement, styleName: string) {
     parseInt(getComputedStyle(element).getPropertyValue(styleName), 10) || 0
   );
 }
+
+/** 根据关键字高亮显示文本内容 */
+export function renderTextByKeyword(rendererText: string, curKeyword: string) {
+  if (curKeyword && ~rendererText.indexOf(curKeyword)) {
+    const keywordStartIndex = rendererText.indexOf(curKeyword);
+    const keywordEndIndex = keywordStartIndex + curKeyword.length;
+    return (
+      <span>
+        {rendererText.substring(0, keywordStartIndex)}
+        <span className="is-keyword">{curKeyword}</span>
+        {rendererText.substring(keywordEndIndex)}
+      </span>
+    );
+  } else {
+    return rendererText;
+  }
+}

packages/amis-editor-core/scss/_rightPanel.scss

@@ -457,4 +457,43 @@ $tooltip-bottom: '[data-tooltip][data-position=' bottom ']:hover:after';
     transform: rotate(45deg);
     background-color: #f7f7f9;
   }
+
+  &.hidden-tip {
+    &::after {
+      display: none;
+    }
+  }
+
+  &.tip-position-20p {
+    &::after {
+      left: 20%;
+    }
+  }
+
+  &.tip-position-30p {
+    &::after {
+      left: 30%;
+    }
+  }
+
+  &.tip-position-right-12 {
+    &::after {
+      left: auto;
+      right: 12px;
+    }
+  }
+
+  &.tip-position-right-55 {
+    &::after {
+      left: auto;
+      right: 55px;
+    }
+  }
+
+  &.tip-position-right-90 {
+    &::after {
+      left: auto;
+      right: 90px;
+    }
+  }
 }

packages/amis-editor/src/renderer/ButtonGroupControl.tsx

@@ -50,6 +50,6 @@ export default class ButtonGroupControl extends React.Component<ButtonGroupContr
   }
 }
 @FormItem({
-  type: 'button-icon-group'
+  type: 'icon-button-group'
 })
 export class ButtonGroupControlRenderer extends ButtonGroupControl {}

packages/amis-editor/src/tpl/layout.tsx

@@ -256,7 +256,7 @@ setSchemaTpl(
       }
     ];
     const configSchema = {
-      type: 'button-icon-group',
+      type: 'icon-button-group',
       label:
         config?.label ||
         tipedLabel(
@@ -1498,15 +1498,12 @@ setSchemaTpl(
 // 子配置项包裹容器
 setSchemaTpl(
   'layout:wrapper-contanier',
-  (config: {
-    visibleOn?: string;
-    body: Array<any>
-  }) => {
+  (config: {visibleOn?: string; body: Array<any>}) => {
     return {
       type: 'container',
       className: 'config-wrapper-contanier',
       body: config.body,
-      visibleOn: config?.visibleOn,
+      visibleOn: config?.visibleOn
     };
   }
-);
+);

packages/amis-ui/scss/base/_common.scss

@@ -1,3 +1,7 @@
 .has-popover {
   position: relative;
 }
+
+.is-keyword {
+  color: var(--primary-onActive);
+}

packages/amis-ui/scss/components/_result-box.scss

@@ -145,6 +145,7 @@
     max-width: 100%;
     overflow: hidden;
     text-overflow: ellipsis;
+    word-break: break-all; // 避免超长单词撑开
   }
 
   &-pc-arrow {

packages/amis/src/renderers/Form/NestedSelect.tsx

@@ -25,7 +25,8 @@ import {
   OptionsControl,
   OptionsControlProps,
   RootClose,
-  ActionObject
+  ActionObject,
+  renderTextByKeyword
 } from 'amis-core';
 import {findDOMNode} from 'react-dom';
 import xor from 'lodash/xor';
@@ -216,8 +217,8 @@ export default class NestedSelectControl extends React.Component<
       options,
       hideNodePathLabel
     } = this.props;
-    const inputValue = this.state.inputValue;
-    const regexp = string2regExp(inputValue || '');
+    const inputValue = this.state.inputValue || '';
+    const regexp = string2regExp(inputValue);
 
     if (hideNodePathLabel) {
       return option[labelField || 'label'];
@@ -234,25 +235,10 @@ export default class NestedSelectControl extends React.Component<
               const label = item[labelField || 'label'];
               const value = item[valueField || 'value'];
               const isEnd = index === ancestors.length - 1;
-              const unmatchText = label.split(regexp || '');
-              let pointer = 0;
               return (
                 <span key={index}>
                   {regexp.test(value) || regexp.test(label)
-                    ? unmatchText.map((text: string, textIndex: number) => {
-                        const current = pointer;
-                        pointer += text.length || inputValue?.length || 0;
-                        return (
-                          <span
-                            key={textIndex}
-                            className={cx({
-                              'NestedSelect-optionLabel-highlight': !text
-                            })}
-                          >
-                            {text || label.slice(current, pointer)}
-                          </span>
-                        );
-                      })
+                    ? renderTextByKeyword(label, inputValue)
                     : label}
                   {!isEnd && ' / '}
                 </span>