From a09e9d43bbfa60aff4d9b7e5bc284acd4455d25a Mon Sep 17 00:00:00 2001
From: Xicheng Guo <xicheng_guo@wistron.com>
Date: Mon, 19 Aug 2024 10:56:22 +0800
Subject: [PATCH] add InspectContainer

---
 docs/.vitepress/config.mts        |  1 +
 docs/.vitepress/theme/custom.css  | 10 +++++--
 docs/components/Inspect.vue       | 50 -------------------------------
 docs/inspect/InspectContainer.vue | 46 ++++++++++++++++++++++++++++
 docs/inspect/NodeTable.vue        | 27 +++++++++++++++++
 docs/inspect/NodeTree.vue         | 18 +++++++++++
 docs/inspect/index.md             |  4 +--
 docs/inspect/types.ts             | 24 +++++++++++++++
 8 files changed, 126 insertions(+), 54 deletions(-)
 delete mode 100644 docs/components/Inspect.vue
 create mode 100644 docs/inspect/InspectContainer.vue
 create mode 100644 docs/inspect/NodeTable.vue
 create mode 100644 docs/inspect/NodeTree.vue
 create mode 100644 docs/inspect/types.ts

diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index 00b13f4e..2ae7aec3 100644
--- a/docs/.vitepress/config.mts
+++ b/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",
       },
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
index bd268bff..c10d9b39 100644
--- a/docs/.vitepress/theme/custom.css
+++ b/docs/.vitepress/theme/custom.css
@@ -1,3 +1,9 @@
 p img {
-    width: 300px;
-}
\ No newline at end of file
+  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%);
+}
diff --git a/docs/components/Inspect.vue b/docs/components/Inspect.vue
deleted file mode 100644
index fbb1d0ea..00000000
--- a/docs/components/Inspect.vue
+++ /dev/null
@@ -1,50 +0,0 @@
-<template>
-    <el-tree style="max-width: 600px" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" />
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue'
-
-interface Tree {
-    label: string
-    children?: Tree[]
-}
-
-interface AccessibilityNode {
-    childCount: number;
-    className: string;
-    depth: number;
-    nodeId: number;
-    parentId: number;
-    viewIdResourceName: string;
-    text: string;
-}
-
-const handleNodeClick = (data: Tree) => {
-    console.log(data)
-}
-
-const defaultProps = {
-    children: 'children',
-    label: 'label',
-}
-
-const treeData = ref<Tree[]>([])
-
-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): Tree[] {
-    const children = data.filter(node => node.parentId === parentId);
-    return children.map(node => {
-        return {
-            label: node.childCount === 0 ? node.className : `${node.className} [${node.childCount}]`,
-            children: buildTree(data, node.nodeId)
-        }
-    })
-}
-</script>
\ No newline at end of file
diff --git a/docs/inspect/InspectContainer.vue b/docs/inspect/InspectContainer.vue
new file mode 100644
index 00000000..fe3ea060
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/inspect/NodeTable.vue b/docs/inspect/NodeTable.vue
new file mode 100644
index 00000000..38f0a642
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/inspect/NodeTree.vue b/docs/inspect/NodeTree.vue
new file mode 100644
index 00000000..51c7a50b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/inspect/index.md b/docs/inspect/index.md
index c8f7b263..6c90e694 100644
--- a/docs/inspect/index.md
+++ b/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 />
diff --git a/docs/inspect/types.ts b/docs/inspect/types.ts
new file mode 100644
index 00000000..a9593b0a
--- /dev/null
+++ b/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;
+}