Merge pull request #255 from GuoXiCheng/dev-c

Dev

.gitignore

@@ -96,4 +96,5 @@ coverage
 scripts/__tests__/examples/dist
 !scripts/__tests__/examples/dist/.gitkeep
 *.zip
-!capture/*.zip
+!capture/*.zip
+!5f686585-c5d0-4057-93b2-c54832ffb393.zip

docs/.vitepress/config.mts

@@ -18,7 +18,7 @@ export default defineConfig(
         { text: "首页", link: "/" },
         { text: "指南", link: "/guide/intro/what-is-skip" },
         { text: "进阶", link: "/advance/layout-inspect/intro" },
-        // { text: "布局检查", link: "/inspect/index", target: "_blank" },
+        { text: "布局检查", link: "/inspect/index", target: "_blank" },
       ],
       sidebar: {
         "/guide/": [

docs/inspect/InspectContainer.vue

@@ -19,7 +19,10 @@
         :style="{ width: `${nodeTreeWidth}px` }"
       />
       <div class="bg-gray-400 w-2 cursor-col-resize hover:bg-blue-700 transition duration-300" ref="colResize"></div>
-      <NodeTable :node-data="nodeData" :raw-data="rawData" v-if="rawData" :style="{ width: `${nodeTableWidth}px` }" />
+      <div class="flex flex-col">
+        <NodeTable :node-data="nodeData" :raw-data="rawData" v-if="rawData" :style="{ width: `${nodeTableWidth}px` }" />
+        <NodeCode :node-data="nodeData" :raw-data="rawData" :current-node-key="currentNodeKey" />
+      </div>
     </el-col>
   </el-row>
 </template>
@@ -28,6 +31,7 @@
 import NodeTree from "./NodeTree.vue";
 import NodeTable from "./NodeTable.vue";
 import NodePic from "./NodePic.vue";
+import NodeCode from "./inspect-node-container/NodeCode.vue";
 import { ref, onMounted, onBeforeUnmount } from "vue";
 import { AccessibilityNode, AccessibilityNodeTree, AccessibilityWindow } from "./types";
 

docs/inspect/InspectHeader.vue

@@ -4,6 +4,7 @@
       <el-button v-loading.fullscreen.lock="fullscreenLoading">批量上传</el-button>
     </el-upload>
     <el-button @click="emits('onDelete')">批量删除</el-button>
+    <el-button @click="handleGetExample">获取示例</el-button>
   </div>
 </template>
 
@@ -50,6 +51,26 @@ const handleOnChange = async () => {
   });
 };
 
+const handleGetExample = async () => {
+  const response = await fetch("/5f686585-c5d0-4057-93b2-c54832ffb393.zip");
+  const arrayBuffer = await response.arrayBuffer();
+  const { added, extractZip } = useZip(arrayBuffer);
+  await extractZip();
+  if (added.value === true) {
+    emits("uploadSuccess");
+    ElNotification({
+      title: "示例文件添加成功",
+      message: "示例文件添加成功",
+      type: "success",
+    });
+  } else
+    ElNotification({
+      title: "示例文件已存在",
+      message: "示例文件已存在，无需重复添加",
+      type: "warning",
+    });
+};
+
 onMounted(() => {
   const el = document.querySelector<HTMLInputElement>(".el-upload__input")!;
   el.oncancel = () => {

docs/inspect/NodeTable.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="p-2">
     <el-segmented v-model="segmentedValue" :options="options" block />
     <el-table :data="tableData" style="width: 100%">
       <el-table-column prop="key" label="属性" width="auto" />

docs/inspect/inspect-node-container/NodeCode.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="p-2" v-if="code">
+    <div class="relative">
+      <el-button size="small" @click="handleClickCopy" class="absolute top-2 right-2 z-50">{{
+        copyButtonText
+      }}</el-button>
+      <codemirror v-model="code" :extensions="extensions" class="z-0" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { oneDark } from "@codemirror/theme-one-dark";
+import { yaml } from "@codemirror/lang-yaml";
+import { Codemirror } from "vue-codemirror";
+import { watch, ref } from "vue";
+import { AccessibilityNode, AccessibilityWindow } from "../types";
+import jsyaml from "js-yaml";
+
+const copyButtonText = ref("复制");
+const code = ref<string | null>(null);
+
+const extensions = [yaml(), oneDark];
+const props = defineProps<{
+  nodeData: AccessibilityNode | null;
+  rawData: AccessibilityWindow | null;
+  currentNodeKey: number;
+}>();
+
+watch(
+  () => props.currentNodeKey,
+  () => {
+    if (!props.nodeData || !props.rawData) return;
+    const { packageName, activityName, appName, fileId } = props.rawData;
+    const { viewIdResourceName, text, left, bottom, right, top } = props.nodeData;
+    const obj = {
+      appName,
+      packageName,
+    };
+    const file = `fileId=${fileId}&nodeId=${props.currentNodeKey}`;
+    const desc = "请填写描述";
+    if (viewIdResourceName) {
+      Object.assign(obj, {
+        skipIds: [
+          {
+            id: viewIdResourceName,
+            activityName,
+            file,
+            desc,
+          },
+        ],
+      });
+      code.value = jsyaml.dump([obj]);
+      return;
+    } else if (text) {
+      Object.assign(obj, {
+        skipTexts: [
+          {
+            text,
+            length: text.length,
+            activityName,
+            file,
+            desc,
+          },
+        ],
+      });
+      code.value = jsyaml.dump([obj]);
+      return;
+    } else {
+      Object.assign(obj, {
+        skipBounds: [
+          {
+            bound: [left, top, right, bottom].join(","),
+            activityName,
+            file,
+            desc,
+          },
+        ],
+      });
+      code.value = jsyaml.dump([obj]);
+      return;
+    }
+  }
+);
+
+function handleClickCopy() {
+  if (!code.value) return;
+  copyButtonText.value = "已复制✔";
+  navigator.clipboard.writeText(code.value);
+  setTimeout(() => {
+    copyButtonText.value = "复制";
+  }, 1000);
+}
+</script>