Merge pull request #200 from GuoXiCheng/dev-c

add InspectContainer

docs/.vitepress/config.mts

@@ -10,6 +10,7 @@ export default defineConfig(
     lastUpdated: true,
     head: [["link", { rel: "icon", type: "image/x-icon", href: "/images/favicon.ico" }]],
     themeConfig: {
+      logo: "/images/favicon.ico",
       outline: {
         level: "deep",
       },

docs/.vitepress/theme/custom.css

@@ -1,3 +1,9 @@
 p img {
-    width: 300px;
-}
+  width: 300px;
+}
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #bd34fe 30%, #41d1ff);
+  --vp-home-hero-image-filter: blur(56px);
+  --vp-home-hero-image-background-image: linear-gradient(-45deg, #bd34fe 50%, #47caff 50%);
+}

docs/inspect/InspectContainer.vue

@@ -0,0 +1,46 @@
+<template>
+    <el-row>
+        <el-col :span="12">
+            <NodeTree :tree-data="treeData" @handleNodeClick="handleNodeClick" />
+        </el-col>
+        <el-col :span="12">
+            <NodeTable :node-data="nodeData" />
+        </el-col>
+    </el-row>
+</template>
+
+<script lang="ts" setup>
+import NodeTree from './NodeTree.vue';
+import NodeTable from './NodeTable.vue';
+import { ref, onMounted } from 'vue';
+import { AccessibilityNode, AccessibilityNodeTree } from './types';
+
+const treeData = ref<AccessibilityNodeTree[]>([]);
+const nodeData = ref<AccessibilityNode | null>(null);
+
+onMounted(async () => {
+    const temp = await fetch('/temp.json');
+    const text = await temp.text();
+    const data = JSON.parse(text) as AccessibilityNode[];
+    treeData.value = buildTree(data, -1);
+});
+
+function buildTree(data: AccessibilityNode[], parentId: number): AccessibilityNodeTree[] {
+    const children = data.filter(node => node.parentId === parentId);
+    return children.map(node => {
+        const { childCount, className, nodeId, text, viewIdResourceName } = node;
+        return {
+            label: childCount === 0 ? className : `${className} [${childCount}]`,
+            children: buildTree(data, nodeId),
+            text,
+            className,
+            childCount,
+            viewIdResourceName,
+        }
+    })
+}
+
+const handleNodeClick = (data: AccessibilityNode) => {
+    nodeData.value = data;
+}
+</script>

docs/inspect/NodeTable.vue

@@ -0,0 +1,27 @@
+<template>
+    <el-table :data="tableData" style="width: 100%">
+        <el-table-column prop="key" label="属性" width="auto" />
+        <el-table-column prop="value" label="值" width="auto" />
+    </el-table>
+</template>
+
+<script lang="ts" setup>
+import { defineProps, computed } from 'vue'
+import { AccessibilityNode } from './types'
+
+const excludeKeys = ['label', 'children', 'childCount'];
+
+const props = defineProps<{
+    nodeData: AccessibilityNode | null
+}>();
+
+const tableData = computed(() => {
+    if (!props.nodeData) return [];
+    const temp: { key: string; value: string }[] = [];
+    for (const key in props.nodeData) {
+        if (excludeKeys.includes(key)) continue;
+        temp.push({ key, value: props.nodeData[key] });
+    }
+    return temp;
+})
+</script>

docs/inspect/NodeTree.vue

@@ -0,0 +1,18 @@
+<template>
+    <el-tree style="max-width: 600px" :data="treeData" :props="props.treeData" @node-click="handleNodeClick" />
+</template>
+
+<script lang="ts" setup>
+import { defineProps, defineEmits } from 'vue'
+import { Tree, AccessibilityNodeTree } from './types'
+
+const emit = defineEmits(['handleNodeClick']);
+
+const props = defineProps<{
+    treeData: AccessibilityNodeTree[]
+}>();
+
+const handleNodeClick = (data: Tree) => {
+    emit('handleNodeClick', data)
+}
+</script>

docs/inspect/index.md

@@ -3,7 +3,7 @@ layout: false
 ---
 
 <script setup>
-    import Inspect from '../components/Inspect.vue';
+    import InspectContainer from './InspectContainer.vue';
 </script>
 
-<Inspect />
+<InspectContainer />

docs/inspect/types.ts

@@ -0,0 +1,24 @@
+export interface Tree {
+  label: string;
+  children?: Tree[];
+}
+
+export interface AccessibilityNode {
+  childCount: number;
+  className: string;
+  depth: number;
+  nodeId: number;
+  parentId: number;
+  text?: string;
+  viewIdResourceName?: string;
+  [key: string]: any;
+}
+
+export interface AccessibilityNodeTree {
+  label: string;
+  children: AccessibilityNodeTree[];
+  text?: string;
+  className?: string;
+  viewIdResourceName?: string;
+  childCount: number;
+}