refactor: snapshot xScrollable

gkd-kit · Nov 8, 2024 · 894051d · 894051d
1 parent 1d568d8
commit 894051d
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 18 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>