Merge pull request #211 from GuoXiCheng/dev-c

update inspect

docs/.vitepress/index.css

@@ -1,3 +1,16 @@
 @import "tailwindcss/base";
 @import "tailwindcss/components";
 @import "tailwindcss/utilities";
+
+@layer utilities {
+  .hide-scrollbar {
+    /* 对于大多数现代浏览器 */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE 10+ */
+
+    /* 对于 Webkit 浏览器 */
+    &::-webkit-scrollbar {
+      display: none; /* Chrome, Safari, Opera */
+    }
+  }
+}

docs/inspect/InspectContainer.vue

@@ -9,16 +9,17 @@
         v-if="rawData"
       />
     </el-col>
-    <el-col :span="9" class="h-full overflow-y-auto">
+    <el-col :span="18" class="h-full flex">
       <NodeTree
         :tree-data="treeData"
         :current-node-key="currentNodeKey"
         @handle-tree-node-click="handleTreeNodeClick"
         v-if="treeData"
+        class="overflow-y-auto hide-scrollbar"
+        :style="{ width: `${nodeTreeWidth}px` }"
       />
-    </el-col>
-    <el-col :span="9">
-      <NodeTable :node-data="nodeData" :raw-data="rawData" v-if="rawData" />
+      <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` }" />
     </el-col>
   </el-row>
 </template>
@@ -27,7 +28,7 @@
 import NodeTree from "./NodeTree.vue";
 import NodeTable from "./NodeTable.vue";
 import NodePic from "./NodePic.vue";
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onBeforeUnmount } from "vue";
 import { AccessibilityNode, AccessibilityNodeTree, AccessibilityWindow } from "./types";
 import JSZip from "jszip";
 
@@ -36,8 +37,15 @@ const nodeData = ref<AccessibilityNode | null>(null);
 const rawData = ref<AccessibilityWindow | null>(null);
 const currentNodeKey = ref<number>(-1);
 const imgSrc = ref<string>("");
+const colResize = ref<HTMLDivElement>();
+const nodeTreeWidth = ref<number>(0);
+const nodeTableWidth = ref<number>(0);
 
 onMounted(async () => {
+  const initColWidth = (window.innerWidth / 24) * 9;
+  nodeTreeWidth.value = initColWidth;
+  nodeTableWidth.value = initColWidth;
+
   const params = new URLSearchParams(window.location.href.split("?")[1]);
   const response = await fetch(`/${params.get("fileId")}.zip`);
   const arrayBuffer = await response.arrayBuffer();
@@ -53,6 +61,35 @@ onMounted(async () => {
   const data = JSON.parse(jsonText) as AccessibilityWindow;
   rawData.value = data;
   treeData.value = buildTree(data.nodes, -1);
+
+  colResize.value?.addEventListener("mousedown", handleMouseDown);
+});
+
+const handleColMove = (e: MouseEvent) => {
+  const value = Math.abs(e.movementX);
+  if (e.movementX < 0) {
+    nodeTreeWidth.value -= value;
+    nodeTableWidth.value += value;
+  } else {
+    nodeTreeWidth.value += value;
+    nodeTableWidth.value -= value;
+  }
+};
+
+const handleMouseUp = () => {
+  document.removeEventListener("mousemove", handleColMove);
+  document.removeEventListener("mouseup", handleMouseUp);
+};
+
+const handleMouseDown = () => {
+  document.addEventListener("mousemove", handleColMove);
+  document.addEventListener("mouseup", handleMouseUp);
+};
+
+onBeforeUnmount(() => {
+  colResize.value?.removeEventListener("mousedown", handleMouseDown);
+  document.removeEventListener("mousemove", handleColMove);
+  document.removeEventListener("mouseup", handleMouseUp);
 });
 
 function buildTree(data: AccessibilityNode[], parentId: number): AccessibilityNodeTree[] {

docs/inspect/NodeTable.vue

@@ -1,9 +1,11 @@
 <template>
-  <el-segmented v-model="segmentedValue" :options="options" block />
-  <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>
+  <div>
+    <el-segmented v-model="segmentedValue" :options="options" block />
+    <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>
+  </div>
 </template>
 
 <script lang="ts" setup>