From c49b845d057873ed7943bf7a1513d8797b85e655 Mon Sep 17 00:00:00 2001
From: lisonge <i@songe.li>
Date: Sat, 24 Feb 2024 18:13:51 +0800
Subject: [PATCH] perf: size

---
 src/App.vue                       |  2 +
 src/components/AttrCard.vue       |  5 ++-
 src/components/DraggableCard.vue  |  2 +-
 src/components/ScreenshotCard.vue | 68 ++++++++++++++++++++++++++-----
 src/components/SearchCard.vue     |  2 +-
 src/views/SnapshotPage.vue        |  2 +-
 6 files changed, 66 insertions(+), 15 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 0fff163..2c6b374 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -11,6 +11,7 @@ import ErrorDlg from './components/ErrorDlg.vue';
 </template>
 <style lang="scss">
 :root {
+  --gkd-width: max(1200px, 100vw);
   --gkd-height: max(700px, 100vh);
 }
 #app {
@@ -21,6 +22,7 @@ import ErrorDlg from './components/ErrorDlg.vue';
   width: 100vw;
   height: 100vh;
   &.mobile {
+    --gkd-width: 100vw;
     min-width: auto;
   }
 }
diff --git a/src/components/AttrCard.vue b/src/components/AttrCard.vue
index 4ab59d1..1db8454 100644
--- a/src/components/AttrCard.vue
+++ b/src/components/AttrCard.vue
@@ -129,9 +129,10 @@ const attrs = computed(() => {
           </NTd>
           <NTd>
             <NEllipsis
-              class="w-180px min-w-[max(12vw,180px)]"
+              class="w-[calc(var(--gkd-width)*0.12)]"
               :class="{
-                'text-left direction-rtl': attrx.name == 'id',
+                'text-left direction-rtl':
+                  attrx.name == 'id' || attrx.name == 'name',
               }"
             >
               {{ attrx.desc }}
diff --git a/src/components/DraggableCard.vue b/src/components/DraggableCard.vue
index 8e5a6ea..50c14e2 100644
--- a/src/components/DraggableCard.vue
+++ b/src/components/DraggableCard.vue
@@ -114,7 +114,7 @@ const updateTarget = (arg: unknown) => {
 };
 </script>
 <template>
-  <Teleport to="body">
+  <Teleport to="#app">
     <div
       fixed
       ref="box"
diff --git a/src/components/ScreenshotCard.vue b/src/components/ScreenshotCard.vue
index 432ee4b..788bc3e 100644
--- a/src/components/ScreenshotCard.vue
+++ b/src/components/ScreenshotCard.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { findNodeByXy } from '@/utils/node';
 import type { RawNode, Snapshot } from '@/utils/types';
+import { useWindowSize, refDebounced } from '@vueuse/core';
 import { computed, shallowRef } from 'vue';
 
 const props = withDefaults(
@@ -15,6 +16,15 @@ const props = withDefaults(
     onUpdateFocusNode: () => () => {},
   },
 );
+const windowSize = useWindowSize();
+const debouncedSize = refDebounced(
+  computed(() => {
+    windowSize.width.value;
+    windowSize.height.value;
+    return Math.random();
+  }),
+  300,
+);
 
 const imgRef = shallowRef<HTMLImageElement>();
 
@@ -44,6 +54,7 @@ const percent = (n: number) => {
   return `${n * 100}%`;
 };
 const positionStyle = computed(() => {
+  debouncedSize.value;
   const img = imgRef.value;
   const attr = props.focusNode?.attr;
   if (!props.focusNode || !img || !attr) {
@@ -70,6 +81,19 @@ const positionStyle = computed(() => {
 });
 const imgHover = shallowRef(false);
 const hoverPosition = shallowRef({ ox: 0, oy: 0 });
+const boxHoverPosition = computed(() => {
+  const attr = props.focusNode?.attr;
+  if (!attr) {
+    return;
+  }
+  const { ox, oy } = hoverPosition.value;
+  return {
+    left: ox - attr.left,
+    right: attr.right - ox,
+    top: oy - attr.top,
+    bottom: attr.bottom - oy,
+  };
+});
 const imgMove = (ev: MouseEvent) => {
   const img = imgRef.value;
   if (!img) return;
@@ -99,7 +123,7 @@ const hoverPositionStyle = shallowRef({ left: '0', top: '0' });
       cursor-crosshair
       h-full
       object-contain
-      style="max-width: max(35vw, 400px)"
+      class="max-w-[calc(var(--gkd-width)*0.35)]"
       @mouseover="imgHover = true"
       @mouseleave="imgHover = false"
       @mousemove="imgMove"
@@ -143,13 +167,38 @@ const hoverPositionStyle = shallowRef({ left: '0', top: '0' });
         absolute
         left-2px
         top-2px
-        class="leading-[1]"
-        style="background-color: rgba(256, 256, 256, 0.7)"
+        p-1px
+        z-1
+        text-13px
+        class="leading-[1] bg-[rgba(256,256,256,0.7)]"
       >
         {{ `${hoverPosition.ox.toFixed(0)},${hoverPosition.oy.toFixed(0)}` }}
       </div>
       <div
-        class="top-[calc(50%-1px)]"
+        v-if="boxHoverPosition"
+        absolute
+        left-2px
+        bottom-2px
+        p-1px
+        z-1
+        text-12px
+        class="leading-[1] bg-[rgba(256,256,256,0.7)]"
+        flex
+        flex-col
+        flex-items-center
+      >
+        <div>{{ boxHoverPosition.top.toFixed(0) }}</div>
+        <div>
+          {{
+            boxHoverPosition.left.toFixed(0) +
+            ',' +
+            boxHoverPosition.right.toFixed(0)
+          }}
+        </div>
+        <div>{{ boxHoverPosition.bottom.toFixed(0) }}</div>
+      </div>
+      <div
+        class="top-[calc(50%-1px)] bg-[length:10px_1px]"
         absolute
         left-0
         right-0
@@ -157,19 +206,18 @@ const hoverPositionStyle = shallowRef({ left: '0', top: '0' });
         bg-repeat-x
         mix-blend-difference
         style="
-          background: linear-gradient(
+          background-image: linear-gradient(
             to left,
             transparent 0%,
             transparent 50%,
             #fff 50%,
             #fff 100%
           );
-
-          background-size: 10px 1px;
+          background-position-x: 1.5px;
         "
       ></div>
       <div
-        class="left-[calc(50%-1px)]"
+        class="left-[calc(50%-1px)] bg-[length:1px_10px]"
         absolute
         top-0
         bottom-0
@@ -177,14 +225,14 @@ const hoverPositionStyle = shallowRef({ left: '0', top: '0' });
         bg-repeat-y
         mix-blend-difference
         style="
-          background: linear-gradient(
+          background-image: linear-gradient(
             to top,
             transparent 0%,
             transparent 50%,
             #fff 50%,
             #fff 100%
           );
-          background-size: 1px 10px;
+          background-position-y: 1.5px;
         "
       ></div>
     </div>
diff --git a/src/components/SearchCard.vue b/src/components/SearchCard.vue
index 2e97549..dd19248 100644
--- a/src/components/SearchCard.vue
+++ b/src/components/SearchCard.vue
@@ -179,7 +179,7 @@ const _1vw = window.innerWidth / 100;
       b-gray-200
       rounded-4px
       p-8px
-      style="min-width: max(25vw, 480px)"
+      class="min-w-[calc(var(--gkd-width)*0.3)]"
     >
       <div flex m-b-4px>
         <NRadioGroup v-model:value="enableSearchBySelector">
diff --git a/src/views/SnapshotPage.vue b/src/views/SnapshotPage.vue
index 3a2dbb7..93b515d 100644
--- a/src/views/SnapshotPage.vue
+++ b/src/views/SnapshotPage.vue
@@ -149,7 +149,7 @@ watchEffect(() => {
       v-model:show="trackVisible"
       preset="dialog"
       title="选择器路径视图"
-      style="width: max(600px, 80vh)"
+      class="w-[max(600px,80vh)]"
       @afterLeave="track = undefined"
     >
       <template #icon>