Merge pull request #204 from GuoXiCheng/dev-c

update inspect

.gitignore

@@ -94,4 +94,5 @@ docs/.vitepress/dist
 !tsconfig.json
 coverage
 scripts/__tests__/examples/dist
-!scripts/__tests__/examples/dist/.gitkeep
+!scripts/__tests__/examples/dist/.gitkeep
+*.zip

docs/.vitepress/theme/index.js

@@ -2,6 +2,7 @@ import DefaultTheme from 'vitepress/theme'
 import './custom.css'
 import 'element-plus/dist/index.css'
 import ElementPlus from "element-plus";
+import 'element-plus/theme-chalk/dark/css-vars.css'
 import '../index.css'
 
 export default {

docs/index.md

@@ -3,7 +3,7 @@ layout: home
 
 hero:
   name: SKIP
-  text: 基于 Android 无障碍服务的自动跳过开屏广告 App
+  text: 基于安卓无障碍服务的自动跳过开屏广告 App
   image:
     src: /images/logo.png
   actions:

docs/inspect/InspectContainer.vue

@@ -1,7 +1,7 @@
 <template>
     <el-row class="h-screen">
         <el-col :span="6">
-            <NodePic v-if="rawData" :raw-data="rawData" :img-src="'/temp.png'" :current-node-key="currentNodeKey"
+            <NodePic v-if="rawData" :raw-data="rawData" :img-src="imgSrc" :current-node-key="currentNodeKey"
                 @handle-img-node-click="handleImgNodeClick" />
         </el-col>
         <el-col :span="9" class="h-full overflow-y-auto">
@@ -20,16 +20,27 @@ import NodeTable from './NodeTable.vue';
 import NodePic from './NodePic.vue';
 import { ref, onMounted } from 'vue';
 import { AccessibilityNode, AccessibilityNodeTree, AccessibilityWindow } from './types';
+import JSZip from 'jszip';
 
 const treeData = ref<AccessibilityNodeTree[]>([]);
 const nodeData = ref<AccessibilityNode | null>(null);
 const rawData = ref<AccessibilityWindow | null>(null);
 const currentNodeKey = ref<number>(-1);
+const imgSrc = ref<string>('');
 
 onMounted(async () => {
-    const temp = await fetch('/temp.json');
-    const text = await temp.text();
-    const data = JSON.parse(text) as AccessibilityWindow;
+    const response = await fetch('/1724288358662.zip');
+    const arrayBuffer = await response.arrayBuffer();
+    const zip = await JSZip.loadAsync(arrayBuffer);
+
+    const pngFile = zip.filter((relativePath, file) => relativePath.endsWith('.png'));
+    const blob = await pngFile[0].async('blob');
+    const imgUrl = URL.createObjectURL(blob);
+    imgSrc.value = imgUrl;
+
+    const jsonFile = zip.filter((relativePath, file) => relativePath.endsWith('.json'));
+    const jsonText = await jsonFile[0].async('text');
+    const data = JSON.parse(jsonText) as AccessibilityWindow;
     rawData.value = data;
     treeData.value = buildTree(data.nodes, -1);
 });

docs/inspect/NodePic.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="h-full border border-black border-solid relative flex justify-center">
+    <div class="h-full relative flex justify-center">
         <canvas id="topCanvas" class="cursor-crosshair absolute z-20"></canvas>"
         <canvas id="bottomCanvas" class="cursor-crosshair absolute z-10"></canvas>
     </div>

package.json

@@ -20,6 +20,7 @@
     "element-plus": "^2.8.0",
     "jest": "^29.7.0",
     "js-yaml": "^4.1.0",
+    "jszip": "^3.10.1",
     "postcss": "^8.4.41",
     "tailwindcss": "^3.4.10",
     "ts-jest": "^29.2.3",