Match-id-a9c8af2dec397a83d20a0c78a9d464f4ea450dd6

libs/extension/src/components/VTree.less

@@ -1,19 +1,28 @@
 @import 'assets.less';
 
-.tree_container {
+.treeContainer {
   position: relative;
   width: 100%;
   height: 100%;
   overflow-y: auto;
 }
 
-.tree_item {
+.treeItem {
   width: 100%;
   position: absolute;
+  .componentName {
+    color: @component-name-color;
+  }
+  .componentKeyName {
+    color: @component-key-color;
+  }
+  .componentKeyValue {
+    color: @componentKeyValue-color;
+  }
 }
 
-.tree_icon {
+.treeIcon {
-  color: @gray;
+  color: @arrow-color;
   display: inline-block;
   width: 12px
 }

libs/extension/src/components/VTree.tsx

@@ -23,14 +23,31 @@ const indentationLength = 20;
 
 function Item({ name, style, userKey, hasChild, onCollapse, isCollapsed, id, indentation }: IItem) {
   const key = userKey === '' ? '' : ` key = '${userKey}'`;
+  const isShowKey = userKey !== '';
   const showIcon = hasChild ? <Arrow director={isCollapsed ? 'right' : 'down'} /> : '';
   const onClickCollapse = () => {
     onCollapse(id);
   }
   return (
-    <div style={style} className={styles.tree_item}>
+    <div style={style} className={styles.treeItem}>
-      <div style={{marginLeft: indentation* indentationLength}} className={styles.tree_icon} onClick={onClickCollapse} >{showIcon}</div>
+      <div style={{ marginLeft: indentation * indentationLength }} className={styles.treeIcon} onClick={onClickCollapse} >
-      {name + key}
+        {showIcon}
+      </div>
+      <span className={styles.componentName} >
+        {name}
+      </span>
+      {isShowKey && (
+        <>
+          <span className={styles.componentKeyName}>
+            {' '}key
+          </span>
+          {'="'}
+          <span className={styles.componentKeyValue}>
+            {userKey}
+          </span>
+          {'"'}
+        </>
+      )}
     </div>
   )
 }
@@ -97,7 +114,7 @@ function VTree({ data }: { data: IData[] }) {
   }
 
   return (
-    <div className={styles.tree_container} onScroll={scroll}>
+    <div className={styles.treeContainer} onScroll={scroll}>
       {showList}
       {/* 确保有足够的高度 */}
       <div style={{ marginTop: totalHeight }} />