diff --git a/README.md b/README.md
index c6e276e..02327b0 100644
--- a/README.md
+++ b/README.md
@@ -3,9 +3,18 @@
[](https://pypi.python.org/pypi/uiviewer)
-UI hierarchy inspector, supporting Android, iOS, HarmonyOS NEXT.
+UI hierarchy inspector, supporting `Android`, `iOS`, and `HarmonyOS NEXT`.
-This project is developed using FastAPI and Vue. It starts the service locally and displays UI hierarchy tree through web browser.
+Its features include:
+
+- visualize the UI hierarchy via screenshot and tree structure.
+- view element properties
+- auto generate XPath or XPathLite
+- auto generate coordinate percentages.
+- and more…
+
+
+This project is developed using FastAPI and Vue. It starts locally and displays UI hierarchy through web browser.
diff --git a/uiviewer/static/css/style.css b/uiviewer/static/css/style.css
index 3049004..8f400e6 100644
--- 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
index cc7498b..007031b 100644
Binary files a/uiviewer/static/favicon.ico and b/uiviewer/static/favicon.ico differ
diff --git a/uiviewer/static/index.html b/uiviewer/static/index.html
index 75c8636..d250d86 100644
--- a/uiviewer/static/index.html
+++ b/uiviewer/static/index.html
@@ -3,7 +3,7 @@
- Codestin Search App
+ Codestin Search App
@@ -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
index 4db071c..e281550 100644
--- 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);