From a5f78bf5fb4b64b1cac368825c0f2fd8046a7712 Mon Sep 17 00:00:00 2001
From: * <8>
Date: Tue, 29 Mar 2022 10:53:51 +0800
Subject: [PATCH] Match-id-a9c8af2dec397a83d20a0c78a9d464f4ea450dd6

---
 libs/extension/src/components/VTree.less | 17 ++++++++++++----
 libs/extension/src/components/VTree.tsx  | 25 ++++++++++++++++++++----
 2 files changed, 34 insertions(+), 8 deletions(-)

diff --git a/libs/extension/src/components/VTree.less b/libs/extension/src/components/VTree.less
index fe24a888..1890647d 100644
--- a/libs/extension/src/components/VTree.less
+++ b/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 {
-  color: @gray;
+.treeIcon {
+  color: @arrow-color;
   display: inline-block;
   width: 12px
 }
diff --git a/libs/extension/src/components/VTree.tsx b/libs/extension/src/components/VTree.tsx
index 51e8b828..246a1e08 100644
--- a/libs/extension/src/components/VTree.tsx
+++ b/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={{marginLeft: indentation* indentationLength}} className={styles.tree_icon} onClick={onClickCollapse} >{showIcon}</div>
-      {name + key}
+    <div style={style} className={styles.treeItem}>
+      <div style={{ marginLeft: indentation * indentationLength }} className={styles.treeIcon} onClick={onClickCollapse} >
+        {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 }} />