feat: 大纲树选择节点的时候，支持默认展示其他属性tab

packages/designer/src/designer/designer.ts

@@ -285,8 +285,8 @@ export class Designer implements IDesigner {
     }
     this.postEvent('selection.change', currentSelection);
     if (currentSelection) {
-      this.selectionDispose = currentSelection.onSelectionChange(() => {
-        this.postEvent('selection.change', currentSelection);
+      this.selectionDispose = currentSelection.onSelectionChange((ids, tab) => {
+        this.postEvent('selection.change', currentSelection, tab);
       });
     }
   };

packages/designer/src/document/selection.ts

@@ -26,7 +26,7 @@ export class Selection implements ISelection {
   /**
    * 选中
    */
-  select(id: string) {
+  select(id: string, tab?: string) {
     if (this._selected.length === 1 && this._selected.indexOf(id) > -1) {
       // avoid cause reaction
       return;
@@ -39,7 +39,7 @@ export class Selection implements ISelection {
     }
 
     this._selected = [id];
-    this.emitter.emit('selectionchange', this._selected);
+    this.emitter.emit('selectionchange', this._selected, tab);
   }
 
   /**

packages/editor-skeleton/src/components/settings/settings-primary-pane.tsx

@@ -34,10 +34,14 @@ export class SettingsPrimaryPane extends Component<ISettingsPrimaryPaneProps, {
 
     const editor = this.props.engineEditor;
 
-    editor.eventBus.on('designer.selection.change', () => {
+    editor.eventBus.on('designer.selection.change', (selection, tab) => {
       if (!engineConfig.get('stayOnTheSameSettingTab', false)) {
         this._activeKey = null;
       }
+      // 选中指定tab
+      if (tab) {
+        this._activeKey = tab;
+      }
     });
   }
 

packages/plugin-outline-pane/src/views/tree-branches.tsx

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { MouseEvent as ReactMouseEvent, PureComponent } from 'react';
 import classNames from 'classnames';
 import TreeNode from '../controllers/tree-node';
 import TreeNodeView from './tree-node';
@@ -9,6 +9,7 @@ export default class TreeBranches extends PureComponent<{
   isModal?: boolean;
   expanded: boolean;
   treeChildren: TreeNode[] | null;
+  treeNodeClick?: (e: ReactMouseEvent, type?: string) => void;
 }> {
   state = {
     filterWorking: false,
@@ -38,15 +39,14 @@ export default class TreeBranches extends PureComponent<{
   }
 
   render() {
-    const { treeNode, isModal, expanded } = this.props;
+    const { treeNode, isModal, expanded, treeNodeClick } = this.props;
     const { filterWorking, matchChild } = this.state;
     // 条件过滤生效时，如果命中了子节点，需要将该节点展开
     const expandInFilterResult = filterWorking && matchChild;
 
     if (!expandInFilterResult && !expanded) {
       return null;
     }
-
     return (
       <div className="tree-node-branches">
         {
@@ -56,6 +56,7 @@ export default class TreeBranches extends PureComponent<{
           treeNode={treeNode}
           isModal={isModal || false}
           treeChildren={this.props.treeChildren}
+          treeNodeClick={treeNodeClick}
         />
       </div>
     );
@@ -72,6 +73,7 @@ class TreeNodeChildren extends PureComponent<{
     treeNode: TreeNode;
     isModal?: boolean;
     treeChildren: TreeNode[] | null;
+    treeNodeClick?: (e: ReactMouseEvent, type?: string) => void;
   }, ITreeNodeChildrenState> {
   state: ITreeNodeChildrenState = {
     filterWorking: false,
@@ -114,7 +116,7 @@ class TreeNodeChildren extends PureComponent<{
   }
 
   render() {
-    const { isModal } = this.props;
+    const { isModal, treeNodeClick } = this.props;
     const children: any = [];
     let groupContents: any[] = [];
     let currentGrp: IPublicModelExclusiveGroup;
@@ -169,12 +171,12 @@ class TreeNodeChildren extends PureComponent<{
             children.push(insertion);
           }
         }
-        groupContents.push(<TreeNodeView key={child.nodeId} treeNode={child} isModal={isModal} />);
+        groupContents.push(<TreeNodeView key={child.nodeId} treeNode={child} isModal={isModal} treeNodeClick={treeNodeClick} />);
       } else {
         if (index === dropIndex) {
           children.push(insertion);
         }
-        children.push(<TreeNodeView key={child.nodeId} treeNode={child} isModal={isModal} />);
+        children.push(<TreeNodeView key={child.nodeId} treeNode={child} isModal={isModal} treeNodeClick={treeNodeClick} />);
       }
     });
     endGroup();
@@ -189,9 +191,10 @@ class TreeNodeChildren extends PureComponent<{
 
 class TreeNodeSlots extends PureComponent<{
     treeNode: TreeNode;
+    treeNodeClick?: (e: ReactMouseEvent, type?: string) => void;
   }> {
   render() {
-    const { treeNode } = this.props;
+    const { treeNode, treeNodeClick } = this.props;
     if (!treeNode.hasSlots()) {
       return null;
     }
@@ -208,7 +211,7 @@ class TreeNodeSlots extends PureComponent<{
           <Title title={{ type: 'i18n', intl: this.props.treeNode.pluginContext.intlNode('Slots') }} />
         </div>
         {treeNode.slots.map(tnode => (
-          <TreeNodeView key={tnode.nodeId} treeNode={tnode} />
+          <TreeNodeView key={tnode.nodeId} treeNode={tnode} treeNodeClick={treeNodeClick} />
         ))}
       </div>
     );

packages/plugin-outline-pane/src/views/tree-node.tsx

@@ -1,4 +1,4 @@
-import { PureComponent } from 'react';
+import { MouseEvent as ReactMouseEvent, PureComponent } from 'react';
 import classNames from 'classnames';
 import TreeNode from '../controllers/tree-node';
 import TreeTitle from './tree-title';
@@ -11,6 +11,7 @@ class ModalTreeNodeView extends PureComponent<{
   treeNode: TreeNode;
 }, {
   treeChildren: TreeNode[] | null;
+  treeNodeClick: () => void;
 }> {
   private modalNodesManager: IPublicModelModalNodesManager | undefined | null;
   readonly pluginContext: IOutlinePanelPluginContext;
@@ -85,6 +86,7 @@ export default class TreeNodeView extends PureComponent<{
   treeNode: TreeNode;
   isModal?: boolean;
   isRootNode?: boolean;
+  treeNodeClick?: (e: ReactMouseEvent, type?: string) => void;
 }> {
   state: {
     expanded: boolean;
@@ -195,7 +197,7 @@ export default class TreeNodeView extends PureComponent<{
   }
 
   render() {
-    const { treeNode, isModal, isRootNode } = this.props;
+    const { treeNode, isModal, isRootNode, treeNodeClick } = this.props;
     const className = classNames('tree-node', {
       // 是否展开
       expanded: this.state.expanded,
@@ -234,6 +236,7 @@ export default class TreeNodeView extends PureComponent<{
           hidden={this.state.hidden}
           locked={this.state.locked}
           expandable={this.state.expandable}
+          treeNodeClick={treeNodeClick}
         />
         {shouldShowModalTreeNode &&
           <ModalTreeNodeView
@@ -245,6 +248,7 @@ export default class TreeNodeView extends PureComponent<{
           isModal={false}
           expanded={this.state.expanded}
           treeChildren={this.state.treeChildren}
+          treeNodeClick={treeNodeClick}
         />
       </div>
     );

packages/plugin-outline-pane/src/views/tree-title.tsx

@@ -1,4 +1,4 @@
-import { KeyboardEvent, FocusEvent, Fragment, PureComponent } from 'react';
+import { MouseEvent as ReactMouseEvent, KeyboardEvent, FocusEvent, Fragment, PureComponent } from 'react';
 import classNames from 'classnames';
 import { createIcon } from '@alilc/lowcode-utils';
 import { IPublicApiEvent } from '@alilc/lowcode-types';
@@ -23,6 +23,7 @@ export default class TreeTitle extends PureComponent<{
   hidden: boolean;
   locked: boolean;
   expandable: boolean;
+  treeNodeClick?: (e: ReactMouseEvent, type?: string) => void;
 }> {
   state: {
     editing: boolean;
@@ -105,6 +106,13 @@ export default class TreeTitle extends PureComponent<{
     const { node } = treeNode;
     treeNode.deleteNode(node);
   };
+
+  treeTitleClick = (e: any, type: string) => {
+     const { treeNodeClick } = this.props;
+     treeNodeClick(e, type);
+     e.stopPropagation();
+  };
+
   render() {
     const { treeNode, isModal } = this.props;
     const { pluginContext } = treeNode;
@@ -199,15 +207,15 @@ export default class TreeTitle extends PureComponent<{
                 </a>
               )}
               {node.hasLoop() && (
-                <a className="tree-node-tag loop">
+                <a className="tree-node-tag loop" onClick={(e) => { this.treeTitleClick(e, 'loop'); }}>
                   {/* todo: click todo something */}
                   <IconLoop />
                   {/* @ts-ignore */}
                   <Tip>{intlNode('Loop')}</Tip>
                 </a>
               )}
               {this.state.condition && (
-                <a className="tree-node-tag cond">
+                <a className="tree-node-tag cond" onClick={(e) => { this.treeTitleClick(e, 'condition'); }}>
                   {/* todo: click todo something */}
                   <IconCond />
                   {/* @ts-ignore */}

packages/plugin-outline-pane/src/views/tree.tsx

@@ -43,7 +43,8 @@ export default class TreeView extends PureComponent<{
     detecting?.capture(node as any);
   }
 
-  private onClick = (e: ReactMouseEvent) => {
+  private onClick = (e: ReactMouseEvent, type?: string) => {
+
     if (this.ignoreUpSelected) {
       this.boostEvent = undefined;
       return;
@@ -75,7 +76,14 @@ export default class TreeView extends PureComponent<{
         selection.remove(id);
       }
     } else {
-      selection?.select(id);
+
+      let tab;
+      // 点击条件渲染和循环图标，默认选中属性的高级面板
+      if (type === 'condition' || type === 'loop') {
+        tab = '#advanced';
+      }
+
+      selection?.select(id, tab);
       const selectedNode = selection?.getNodes()?.[0];
       const npm = selectedNode?.componentMeta?.npm;
       const selected =
@@ -212,6 +220,7 @@ export default class TreeView extends PureComponent<{
         <TreeNodeView
           key={this.state.root?.id}
           treeNode={this.state.root}
+          treeNodeClick={this.onClick}
           isRootNode
         />
       </div>

packages/shell/src/model/selection.ts

@@ -32,9 +32,10 @@ export class Selection implements IPublicModelSelection {
   /**
    * 选中指定节点（覆盖方式）
    * @param id
+   * @param tab
    */
-  select(id: string): void {
-    this[selectionSymbol].select(id);
+  select(id: string, tab?: string): void {
+    this[selectionSymbol].select(id, tab);
   }
 
   /**

packages/types/src/shell/model/selection.ts

@@ -22,8 +22,9 @@ export interface IPublicModelSelection<
    * 选中指定节点（覆盖方式）
    * select node with id, this will override current selection
    * @param id
+   * @param tab
    */
-  select(id: string): void;
+  select(id: string, tab?: string): void;
 
   /**
    * 批量选中指定节点们
@@ -81,5 +82,5 @@ export interface IPublicModelSelection<
    * set callback which will be called when selection is changed
    * @since v1.1.0
    */
-  onSelectionChange(fn: (ids: string[]) => void): IPublicTypeDisposable;
+  onSelectionChange(fn: (ids: string[], tab?: string) => void): IPublicTypeDisposable;
 }