feat: ui tree display more field

codematrixer · Oct 12, 2024 · 12ed241 · 12ed241
1 parent a05137e
commit 12ed241
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 10 deletions.
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/[email protected]/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);