feat: ui tree display more field

codematrixer · codematrixer · commit 12ed2419620d · 2024-10-12T17:55:11.000+08:00
diff --git a/uiviewer/static/css/style.css b/uiviewer/static/css/style.css
@@ -43,6 +43,7 @@ body, html {
     display: flex;
     flex-direction: column;
     height: 100%;
+    width: 100%;
 }
 .header {
     height: 65px;
@@ -55,6 +56,7 @@ body, html {
 }
 .main {
     display: flex;
+    width: 100%;
     height: calc(100% - 65px);
 }
 
@@ -66,10 +68,9 @@ body, html {
     width: 25%;
     background-color: #212933;
     border-right: #333844 1px solid;
-    overflow: auto;
     justify-content: center;
     align-items: center;
-    position: relative; /* 确保子元素的绝对定位基于 .left */
+    position: relative;
 }
 #screenshotCanvas, #hierarchyCanvas {
     position: absolute;
@@ -84,7 +85,9 @@ body, html {
 }
 
 .right {
-    flex: 1;
+    /* flex: 1; */
+    width: 45%;
+    padding-right: 12px;
     background-color: #212933;
 }
 
@@ -114,6 +117,7 @@ body, html {
 
 .custom-tree {
     overflow: auto;
+    white-space: nowrap;
 }
 
 .custom-table .el-table__row {
diff --git a/uiviewer/static/favicon.ico b/uiviewer/static/favicon.ico
diff --git a/uiviewer/static/index.html b/uiviewer/static/index.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>FastAPI + Vue</title>
+    <title>UI Viewer</title>
     <link rel="icon" href="/static/favicon.ico" type="image/x-icon">
     <link rel="stylesheet" type="text/css" href="/static/cdn/unpkg.com/element-theme-dark@1.0.2/lib/index.css">
     <link rel="stylesheet" type="text/css" href="/static/css/style.css?v=1.0">
@@ -146,7 +146,7 @@
                     class="custom-tree"
                     ref="treeRef"
                     :data="treeData"
-                    :props="defaultProps"
+                    :props="defaultTreeProps"
                     @node-click="handleTreeNodeClick"
                     node-key="_id"
                     default-expand-all
diff --git a/uiviewer/static/js/index.js b/uiviewer/static/js/index.js
@@ -28,9 +28,9 @@ new Vue({
       selectedNode: null,
 
       treeData: [],
-      defaultProps: {
+      defaultTreeProps: {
         children: 'children',
-        label: '_type'
+        label: this.getTreeLabel
       },
       nodeFilterText: '',
       centerWidth: 500,
@@ -87,7 +87,9 @@ new Vue({
   methods: {
     initPlatform() {
         this.serial = ''
-        this.isConnected = false;
+        this.isConnected = false
+        this.selectedNode = null
+        this.treeData = []
     },
     async fetchVersion() {
       try {
@@ -375,8 +377,27 @@ new Vue({
     },
     filterNode(value, data) {
       if (!value) return true;
-      if (!data || !data._type) return false;
-      return data._type.indexOf(value) !== -1;
+      if (!data) return false;
+      const { _type, resourceId, lable, text, id } = data;
+      const filterMap = {
+        android: [_type, resourceId, text],
+        ios: [_type, lable],
+        harmony: [_type, text, id]
+      };
+      const fieldsToFilter = filterMap[this.platform];
+      const isFieldMatch = fieldsToFilter.some(field => field && field.indexOf(value) !== -1);
+      const label = this.getTreeLabel(data);
+      const isLabelMatch = label && label.indexOf(value) !== -1;
+      return isFieldMatch || isLabelMatch;
+    },
+    getTreeLabel(node) {
+      const { _type="", resourceId, lable, text, id } = node;
+      const labelMap = {
+        android: resourceId || text,
+        ios: lable,
+        harmony: text || id
+      };
+      return `${_type} - ${labelMap[this.platform] || ''}`;
     },
     copyToClipboard(value) {
       const success = copyToClipboard(value);

Original file line number	Diff line number	Diff line change
`@@ -43,6 +43,7 @@ body, html {`
`43`	`43`	`display: flex;`
`44`	`44`	`flex-direction: column;`
`45`	`45`	`height: 100%;`
	`46`	`+ width: 100%;`
`46`	`47`	`}`
`47`	`48`	`.header {`
`48`	`49`	`height: 65px;`
`@@ -55,6 +56,7 @@ body, html {`
`55`	`56`	`}`
`56`	`57`	`.main {`
`57`	`58`	`display: flex;`
	`59`	`+ width: 100%;`
`58`	`60`	`height: calc(100% - 65px);`
`59`	`61`	`}`
`60`	`62`
`@@ -66,10 +68,9 @@ body, html {`
`66`	`68`	`width: 25%;`
`67`	`69`	`background-color: #212933;`
`68`	`70`	`border-right: #333844 1px solid;`
`69`		`- overflow: auto;`
`70`	`71`	`justify-content: center;`
`71`	`72`	`align-items: center;`
`72`		`- position: relative; /* 确保子元素的绝对定位基于 .left */`
	`73`	`+ position: relative;`
`73`	`74`	`}`
`74`	`75`	`#screenshotCanvas, #hierarchyCanvas {`
`75`	`76`	`position: absolute;`
`@@ -84,7 +85,9 @@ body, html {`
`84`	`85`	`}`
`85`	`86`
`86`	`87`	`.right {`
`87`		`- flex: 1;`
	`88`	`+ /* flex: 1; */`
	`89`	`+ width: 45%;`
	`90`	`+ padding-right: 12px;`
`88`	`91`	`background-color: #212933;`
`89`	`92`	`}`
`90`	`93`
`@@ -114,6 +117,7 @@ body, html {`
`114`	`117`
`115`	`118`	`.custom-tree {`
`116`	`119`	`overflow: auto;`
	`120`	`+ white-space: nowrap;`
`117`	`121`	`}`
`118`	`122`
`119`	`123`	`.custom-table .el-table__row {`