Match-id-73ae28dbb8f2748c5398680c325a7ec24cee005a

libs/extension/src/components/VTree.less

@@ -5,26 +5,36 @@
   width: 100%;
   height: 100%;
   overflow-y: auto;
-}
-
-.treeItem {
+  .treeItem {
     width: 100%;
     position: absolute;
+    line-height: 18px;
+    &:hover {
+      background-color: @select-color;
+    }
 
-.treeIcon {
+    .treeIcon {
       color: @arrow-color;
       display: inline-block;
       width: 12px;
       padding-left: 0.5rem;
-}
+    }
+  
     .componentName {
       color: @component-name-color;
     }
+  
     .componentKeyName {
       color: @component-key-color;
     }
+  
     .componentKeyValue {
       color: @componentKeyValue-color;
     }
+  }
+
+  .select {
+    background-color: rgb(141 199 248 / 60%);
+  }
 }
 

libs/extension/src/components/VTree.tsx

@@ -13,23 +13,45 @@ type IItem = {
   style: any,
   hasChild: boolean,
   onCollapse: (id: string) => void,
+  onClick: (id: string) => void,
   isCollapsed: boolean,
+  isSelect: boolean,
 } & IData
 
 // TODO: 计算可以展示的最多数量，并且监听显示器高度变化修改数值
-const showNum = 50;
-const divHeight = 21;
+const showNum = 70;
+const lineHeight = 18;
 const indentationLength = 20;
 
-function Item({ name, style, userKey, hasChild, onCollapse, isCollapsed, id, indentation }: IItem) {
+function Item(props: IItem) {
+  const { 
+    name, 
+    style, 
+    userKey,
+    hasChild, 
+    onCollapse, 
+    isCollapsed, 
+    id, 
+    indentation,
+    onClick,
+    isSelect,
+  } = props;
   const isShowKey = userKey !== '';
   const showIcon = hasChild ? <Arrow director={isCollapsed ? 'right' : 'down'} /> : '';
-  const onClickCollapse = () => {
+  const handleClickCollapse = () => {
     onCollapse(id);
   }
+  const handleClick = () => {
+    onClick(id);
+  }
+  const itemAttr: any = {style, className: styles.treeItem, onClick: handleClick};
+  if (isSelect) {
+    itemAttr.tabIndex = 0;
+    itemAttr.className = styles.treeItem + ' ' + styles.select
+  }
   return (
-    <div style={style} className={styles.treeItem}>
-      <div style={{ marginLeft: indentation * indentationLength }} className={styles.treeIcon} onClick={onClickCollapse} >
+    <div {...itemAttr}>
+      <div style={{ marginLeft: indentation * indentationLength }} className={styles.treeIcon} onClick={handleClickCollapse} >
         {showIcon}
       </div>
       <span className={styles.componentName} >
@@ -54,6 +76,7 @@ function Item({ name, style, userKey, hasChild, onCollapse, isCollapsed, id, ind
 function VTree({ data }: { data: IData[] }) {
   const [scrollTop, setScrollTop] = useState(0);
   const [collapseNode, setCollapseNode] = useState(new Set<string>());
+  const [selectItem, setSelectItem] = useState();
   const changeCollapseNode = (id: string) => {
     const nodes = new Set<string>();
     collapseNode.forEach(value => {
@@ -66,6 +89,9 @@ function VTree({ data }: { data: IData[] }) {
     }
     setCollapseNode(nodes);
   };
+  const handleClickItem = (id: string) => {
+    setSelectItem(id);
+  };
   const showList: any[] = [];
 
   let totalHeight = 0;
@@ -89,17 +115,19 @@ function VTree({ data }: { data: IData[] }) {
       const hasChild = nextItem ? nextItem.indentation > item.indentation : false;
       showList.push(
         <Item
-          key={item.id}
+          key={id}
           hasChild={hasChild}
           style={{
             transform: `translateY(${totalHeight}px)`,
           }}
           onCollapse={changeCollapseNode}
+          onClick={handleClickItem}
           isCollapsed={isCollapsed}
+          isSelect={id === selectItem}
           {...item} />
       )
     }
-    totalHeight = totalHeight + divHeight;
+    totalHeight = totalHeight + lineHeight;
     if (isCollapsed) {
       // 该节点需要收起子节点
       currentCollapseIndentation = item.indentation;

libs/extension/src/components/assets.less

@@ -5,6 +5,7 @@
 @component-key-color: rgb(153, 69, 0);
 @componentKeyValue-color: rgb(26, 26, 166);
 @component-attr-color: rgb(200, 0, 0);
+@select-color: rgb(141 199 248 / 60%);
 
 @top-height: 2.625rem;
 @divider-width: 0.2px;