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>