From 894051da3e7c4e0d6ada9d6092071d69529acf44 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E5=88=BA=E8=9E=88?= <i@songe.li>
Date: Fri, 8 Nov 2024 21:21:03 +0800
Subject: [PATCH] refactor: snapshot xScrollable

---
 src/App.vue                           |  8 +++-----
 src/utils/node.ts                     |  6 ++++++
 src/views/snapshot/ScreenshotCard.vue |  2 +-
 src/views/snapshot/WindowCard.vue     | 29 ++++++++++++++++-----------
 4 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index d7dfc0f..71d1d6b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,16 +14,14 @@ import ErrorDlg from './components/ErrorDlg.vue';
   --gkd-width: max(1200px, 100vw);
   --gkd-height: max(700px, 100vh);
 }
+
 #app {
-  min-width: 1200px;
-  min-height: 700px;
   display: flex;
   flex-direction: column;
-  width: 100vw;
-  height: 100vh;
+  width: var(--gkd-width);
+  height: var(--gkd-height);
   &.mobile {
     --gkd-width: 100vw;
-    min-width: auto;
   }
 }
 .gkd_code,
diff --git a/src/utils/node.ts b/src/utils/node.ts
index edf2ad8..9e6a4de 100644
--- a/src/utils/node.ts
+++ b/src/utils/node.ts
@@ -146,6 +146,7 @@ const getLabelSuffix = (node: RawNode) => {
   return node.attr.text || node.attr.desc || node.attr.vid || node.attr.id;
 };
 const labelKey = Symbol(`labelKey`);
+const labelLimit = 20;
 export const getNodeLabel = (node: RawNode): string => {
   if (Reflect.has(node, labelKey)) {
     return Reflect.get(node, labelKey);
@@ -157,6 +158,11 @@ export const getNodeLabel = (node: RawNode): string => {
   }
   const text = getLabelSuffix(node);
   if (text) {
+    // if (text.length > labelLimit) {
+    //   label = `${label} : ${text.slice(0, labelLimit)}...`;
+    // } else {
+    //   label = `${label} : ${text}`;
+    // }
     label = `${label} : ${text}`;
   }
   Reflect.set(node, labelKey, label);
diff --git a/src/views/snapshot/ScreenshotCard.vue b/src/views/snapshot/ScreenshotCard.vue
index 34a4f0f..fffb9a5 100644
--- a/src/views/snapshot/ScreenshotCard.vue
+++ b/src/views/snapshot/ScreenshotCard.vue
@@ -131,7 +131,7 @@ const imgBounding = useElementBounding(imgRef);
           top: imgBounding.top.value + 'px',
         }"
         pointer-events-none
-        absolute
+        fixed
         overflow-hidden
         z-2
         bg-white
diff --git a/src/views/snapshot/WindowCard.vue b/src/views/snapshot/WindowCard.vue
index 86343ef..47dbde6 100644
--- a/src/views/snapshot/WindowCard.vue
+++ b/src/views/snapshot/WindowCard.vue
@@ -67,6 +67,7 @@ const treeNodeProps = (info: {
       color: info.option.id == focusNode.value?.id ? `#00F` : undefined,
       fontWeight: qf ? `bold` : undefined,
     },
+    class: 'whitespace-nowrap overflow-hidden text-ellipsis',
   };
 };
 
@@ -106,7 +107,7 @@ const onDelete = async () => {
 </script>
 
 <template>
-  <div flex flex-col>
+  <div flex flex-col overflow-hidden>
     <div flex items-center px-8px>
       <GapList flex flex-wrap items-center gap-8px gkd_code>
         <template #gap>
@@ -212,16 +213,20 @@ const onDelete = async () => {
       />
     </div>
     <div h-1px mt-4px bg="#efeff5"></div>
-    <NTree
-      ref="treeRef"
-      virtualScroll
-      showLine
-      keyField="id"
-      v-model:expandedKeys="expandedKeys"
-      :data="[rootNode as any]"
-      :filter="(treeFilter as any)"
-      :nodeProps="(treeNodeProps as any)"
-      :renderLabel="(renderLabel as any)"
-    />
+
+    <NScrollbar xScrollable>
+      <NTree
+        class="mb-24px mr-24px"
+        ref="treeRef"
+        virtualScroll
+        showLine
+        keyField="id"
+        v-model:expandedKeys="expandedKeys"
+        :data="[rootNode as any]"
+        :filter="(treeFilter as any)"
+        :nodeProps="(treeNodeProps as any)"
+        :renderLabel="(renderLabel as any)"
+      />
+    </NScrollbar>
   </div>
 </template>