fix:表达式编辑器升级增加变量normalize

packages/amis-ui/src/components/formula/Editor.tsx

@@ -2,7 +2,7 @@
  * @file 公式编辑器
  */
 import React from 'react';
-import {uncontrollable} from 'amis-core';
+import {mapTree, uncontrollable} from 'amis-core';
 import {
   parse,
   autobind,
@@ -110,6 +110,7 @@ export interface FormulaState {
   focused: boolean;
   isCodeMode: boolean;
   expandTree: boolean;
+  normalizeVariables?: Array<VariableItem>;
 }
 
 export class FormulaEditor extends React.Component<
@@ -119,7 +120,8 @@ export class FormulaEditor extends React.Component<
   state: FormulaState = {
     focused: false,
     isCodeMode: false,
-    expandTree: false
+    expandTree: false,
+    normalizeVariables: []
   };
   editorPlugin?: FormulaPlugin;
 
@@ -239,10 +241,55 @@ export class FormulaEditor extends React.Component<
     return {html};
   }
 
+  componentDidMount(): void {
+    const {variables} = this.props;
+    this.normalizeVariables(variables);
+  }
+
+  componentDidUpdate(
+    prevProps: Readonly<FormulaEditorProps>,
+    prevState: Readonly<FormulaState>,
+    snapshot?: any
+  ): void {
+    if (prevProps.variables !== this.props.variables) {
+      this.normalizeVariables(this.props.variables);
+    }
+  }
+
   componentWillUnmount() {
     this.editorPlugin?.dispose();
   }
 
+  normalizeVariables(variables?: Array<VariableItem>) {
+    if (!variables) {
+      return;
+    }
+    // 追加path，用于分级高亮
+    const list = mapTree(
+      variables,
+      (item: any, key: number, level: number, paths: any[]) => {
+        const path = paths?.reduce((prev, next) => {
+          return !next.value
+            ? prev
+            : `${prev}${prev ? '.' : ''}${next.label ?? next.value}`;
+        }, '');
+
+        return {
+          ...item,
+          path: `${path}${path ? '.' : ''}${item.label}`,
+          ...(item.isMember
+            ? {
+                memberDepth: paths?.filter((item: any) => item.type === 'array')
+                  ?.length
+              }
+            : {})
+        };
+      }
+    );
+
+    this.setState({normalizeVariables: list});
+  }
+
   @autobind
   handleFocus() {
     this.setState({
@@ -264,7 +311,10 @@ export class FormulaEditor extends React.Component<
 
   @autobind
   handleEditorMounted(cm: any, editor: any) {
-    this.editorPlugin = new FormulaPlugin(editor, cm, () => this.props);
+    this.editorPlugin = new FormulaPlugin(editor, cm, () => ({
+      ...this.props,
+      variables: this.state.normalizeVariables
+    }));
   }
 
   @autobind
@@ -352,7 +402,6 @@ export class FormulaEditor extends React.Component<
 
   render() {
     const {
-      variables,
       header,
       value,
       functions,
@@ -364,7 +413,7 @@ export class FormulaEditor extends React.Component<
       classPrefix,
       selfVariableName
     } = this.props;
-    const {focused, isCodeMode, expandTree} = this.state;
+    const {focused, isCodeMode, expandTree, normalizeVariables} = this.state;
     const customFunctions = Array.isArray(functions) ? functions : [];
     const functionList = [
       ...FormulaEditor.buildDefaultFunctions(doc),
@@ -438,7 +487,7 @@ export class FormulaEditor extends React.Component<
                 )}
                 expandTree={expandTree}
                 selectMode={variableMode}
-                data={variables!}
+                data={normalizeVariables!}
                 onSelect={this.handleVariableSelect}
                 selfVariableName={selfVariableName}
               />

packages/amis-ui/src/components/formula/VariableList.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect} from 'react';
 
 import {themeable, ThemeProps, filterTree, getTreeAncestors} from 'amis-core';
 import GroupedSelection from '../GroupedSelection';
@@ -83,17 +83,18 @@ function VariableList(props: VariableListProps) {
   } = props;
   const [filterVars, setFilterVars] = React.useState(list);
   const classPrefix = `${themePrefix}FormulaEditor-VariableList`;
+
+  useEffect(() => {
+    const {data} = props;
+    if (data) {
+      setFilterVars(data);
+    }
+  }, [props.data]);
+
   const itemRender =
     props.itemRender && typeof props.itemRender === 'function'
       ? props.itemRender
       : (option: Option, states: ItemRenderStates): JSX.Element => {
-          // 控制只对第一层数组成员展示快捷操作入口
-          if (option.isMember) {
-            const arrs: any = getTreeAncestors(list, option as any);
-            option.memberDepth = arrs?.filter(
-              (item: Option) => item.type === 'array'
-            )?.length;
-          }
           return (
             <div>
               <div className={cx(`${classPrefix}-item`, itemClassName)}>
@@ -120,9 +121,12 @@ function VariableList(props: VariableListProps) {
                       <label>{option.label}</label>
                     </TooltipWrapper>
                   )}
+                {/* 控制只对第一层数组成员展示快捷操作入口 */}
                 {option.memberDepth < 2 ? (
                   <PopOverContainer
-                    popOverContainer={() => document.querySelector('body')}
+                    popOverContainer={() =>
+                      document.querySelector(`.${cx('FormulaPicker-Modal')}`)
+                    }
                     popOverRender={({onClose}) => (
                       <ul className={cx(`${classPrefix}-item-oper`)}>
                         {memberOpers.map((item, i) => {