fix: override unocss default style max-h-full (#58)

lisonge · lisonge · commit 7a81c32b4aff · 2026-01-20T18:13:15.000+08:00
close #58
diff --git a/src/views/snapshot/MiniHoverImg.vue b/src/views/snapshot/MiniHoverImg.vue
@@ -1,39 +1,24 @@
 <script lang="ts" setup>
-const props = defineProps<{
-  imgRef: HTMLElement;
-  imgHover: boolean;
-  screenshotUrl: string;
-  hoverPosition: {
-    ox: number;
-    oy: number;
-  };
-  hoverPositionStyle?: {
-    left: string;
-    top: string;
-  };
-  boxHoverPosition?: {
-    left: number;
-    right: number;
-    top: number;
-    bottom: number;
-  };
-  boxHoverPerPosition?: {
-    left: string;
-    right: string;
-    top: string;
-    bottom: string;
-  };
-}>();
+import { useSharedSnapshotHoverImg, useSnapshotStore } from './snapshot';
 
-const imgBounding = useElementBounding(computed(() => props.imgRef));
+const { screenshotUrl } = useSnapshotStore();
+const {
+  imgHover,
+  imgBounding,
+  hoverPositionStyle,
+  boxHoverPosition,
+  hoverPosition,
+  boxHoverPerPosition,
+} = useSharedSnapshotHoverImg();
 </script>
 
 <template>
   <!-- Teleport 需要单独一个组件否则 hmr 错误 -->
-  <Teleport to="body">
+  <Teleport v-if="screenshotUrl" to="body">
     <!-- 渲染在外部防止被遮挡 -->
     <div
       v-show="imgHover"
+      class="MiniHoverImg"
       :style="{
         left: imgBounding.right.value + 4 + 'px',
         top: imgBounding.top.value + 'px',
@@ -51,12 +36,12 @@ const imgBounding = useElementBounding(computed(() => props.imgRef));
     >
       <img
         :src="screenshotUrl"
+        :style="hoverPositionStyle"
         object-contain
         absolute
         left-0
         top-0
-        :style="hoverPositionStyle"
-        w-1000px
+        class="max-w-none!"
       />
       <div
         absolute
diff --git a/src/views/snapshot/ScreenshotCard.vue b/src/views/snapshot/ScreenshotCard.vue
@@ -1,129 +1,21 @@
 <script setup lang="ts">
 import dayjs from 'dayjs';
 import MiniHoverImg from './MiniHoverImg.vue';
-import { toFixedNumber } from '@/utils/others';
-import type { ShallowRef } from 'vue';
-import { useSnapshotStore } from './snapshot';
+import { useSharedSnapshotHoverImg, useSnapshotStore } from './snapshot';
 
-const { updatePosition, focusNode, screenshotUrl } = useSnapshotStore();
-
-const snapshot = useSnapshotStore().snapshot as ShallowRef<Snapshot>;
-
-const imgRef = shallowRef<HTMLImageElement>();
-const imgLoadTime = shallowRef(false);
-
-const clickImg = (ev: MouseEvent) => {
-  const img = imgRef.value;
-  if (!img) {
-    return;
-  }
-
-  const imgRect = img.getBoundingClientRect();
-
-  const innerHeight = (imgRect.width / img.naturalWidth) * img.naturalHeight;
-  const offsetTop = (imgRect.height - innerHeight) / 2;
-
-  const x = ((ev.clientX - imgRect.left) / imgRect.width) * img.naturalWidth;
-  const y =
-    ((ev.clientY - imgRect.top - offsetTop) / innerHeight) * img.naturalHeight;
-
-  updatePosition({ x, y });
-};
-
-const percent = (n: number) => {
-  return `${n * 100}%`;
-};
-
-const imgSize = useElementSize(imgRef);
-
-const positionStyle = computed(() => {
-  const img = imgRef.value;
-
-  const attr = focusNode.value?.attr;
-  if (!focusNode.value || !img || !attr || !imgLoadTime.value) {
-    return ``;
-  }
-  const imgWidth = imgSize.width.value;
-  const imgHeight = imgSize.height.value;
-  const innerHeight = (imgWidth / img.naturalWidth) * img.naturalHeight;
-  return {
-    left: `calc(${percent(attr.left / img.naturalWidth)} - 2px)`,
-    width: `calc(${percent(
-      (attr.right - attr.left) / img.naturalWidth,
-    )} + 2px)`,
-
-    top: `calc(${percent(
-      ((attr.top / img.naturalHeight) * innerHeight +
-        (imgHeight - innerHeight) / 2) /
-        imgHeight,
-    )} - 2px)`,
-    height: `calc(${percent(
-      (((attr.bottom - attr.top) / img.naturalHeight) * innerHeight) /
-        imgHeight,
-    )} + 2px)`,
-  };
-});
-const imgHover = shallowRef(false);
-const hoverPosition = shallowRef({ ox: 0, oy: 0 });
-const boxHoverPosition = computed(() => {
-  const attr = focusNode.value?.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 boxHoverPerPosition = computed(() => {
-  const attr = focusNode.value?.attr;
-  if (!attr || !boxHoverPosition.value) {
-    return;
-  }
-  if (attr.width <= 0 || attr.height <= 0) {
-    return;
-  }
-  const { bottom, left, right, top } = boxHoverPosition.value;
-  return {
-    left: toFixedNumber(left / (right + left), 3),
-    right: toFixedNumber(right / (right + left), 3),
-    top: toFixedNumber(top / (top + bottom), 3),
-    bottom: toFixedNumber(bottom / (top + bottom), 3),
-  };
-});
-const hoverPositionStyle = shallowRef({ left: '0', top: '0' });
-
-const imgMove = (ev: MouseEvent) => {
-  const img = imgRef.value;
-  if (!img) return;
-  const imgRect = img.getBoundingClientRect();
-
-  const innerHeight = (imgRect.width / img.naturalWidth) * img.naturalHeight;
-  const offsetTop = (imgRect.height - innerHeight) / 2;
-
-  const ox = ((ev.clientX - imgRect.left) / imgRect.width) * img.naturalWidth;
-  const oy =
-    ((ev.clientY - imgRect.top - offsetTop) / innerHeight) * img.naturalHeight;
-  hoverPosition.value = { ox, oy };
-  hoverPositionStyle.value = {
-    left: (-(ox - 0.1 * img.naturalWidth) / img.naturalWidth) * 1000 + 'px',
-    top: (-(oy - 0.1 * img.naturalWidth) / img.naturalWidth) * 1000 + 'px',
-  };
-};
+const { screenshotUrl, snapshot } = useSnapshotStore();
+const { clickImg, imgHover, imgMove, imgLoadTime, positionStyle, imgRef } =
+  useSharedSnapshotHoverImg();
 </script>
 
 <template>
   <div
-    v-if="screenshotUrl"
+    v-if="snapshot && screenshotUrl"
     flex
     flex-col
     relative
     h-full
     p-2px
-    box-border
     overflow-hidden
   >
     <img
@@ -169,15 +61,6 @@ const imgMove = (ev: MouseEvent) => {
         {{ dayjs(snapshot.id).format('YYYY-MM-DD HH:mm:ss') }}
       </div>
     </div>
-    <MiniHoverImg
-      v-if="imgRef"
-      :imgHover="imgHover"
-      :imgRef="imgRef"
-      :boxHoverPerPosition="boxHoverPerPosition"
-      :boxHoverPosition="boxHoverPosition"
-      :hoverPositionStyle="hoverPositionStyle"
-      :hoverPosition="hoverPosition"
-      :screenshotUrl="screenshotUrl"
-    />
+    <MiniHoverImg v-if="imgRef" />
   </div>
 </template>
diff --git a/src/views/snapshot/snapshot.ts b/src/views/snapshot/snapshot.ts
@@ -5,7 +5,7 @@ import {
 } from '@/utils/export';
 import { gmOk } from '@/utils/gm';
 import { findNodesByXy, getAppInfo, listToTree } from '@/utils/node';
-import { toInteger } from '@/utils/others';
+import { toFixedNumber, toInteger } from '@/utils/others';
 import type { ResolvedSelector } from '@/utils/selector';
 import { screenshotStorage, snapshotStorage } from '@/utils/snapshot';
 import { useTask } from '@/utils/task';
@@ -206,3 +206,138 @@ export const useSnapshotStore = createSharedComposable(() => {
     showTrack,
   };
 });
+
+export const useSharedSnapshotHoverImg = createSharedComposable(() => {
+  const { updatePosition, focusNode } = useSnapshotStore();
+
+  const imgRef = shallowRef<HTMLImageElement>();
+  const imgBounding = useElementBounding(imgRef);
+  const imgLoadTime = shallowRef(false);
+
+  const clickImg = (ev: MouseEvent) => {
+    const img = imgRef.value;
+    if (!img) {
+      return;
+    }
+
+    const imgRect = img.getBoundingClientRect();
+
+    const innerHeight = (imgRect.width / img.naturalWidth) * img.naturalHeight;
+    const offsetTop = (imgRect.height - innerHeight) / 2;
+
+    const x = ((ev.clientX - imgRect.left) / imgRect.width) * img.naturalWidth;
+    const y =
+      ((ev.clientY - imgRect.top - offsetTop) / innerHeight) *
+      img.naturalHeight;
+
+    updatePosition({ x, y });
+  };
+
+  const percent = (n: number) => {
+    return `${n * 100}%`;
+  };
+
+  const imgSize = useElementSize(imgRef);
+
+  const positionStyle = computed(() => {
+    const img = imgRef.value;
+
+    const attr = focusNode.value?.attr;
+    if (!focusNode.value || !img || !attr || !imgLoadTime.value) {
+      return ``;
+    }
+    const imgWidth = imgSize.width.value;
+    const imgHeight = imgSize.height.value;
+    const innerHeight = (imgWidth / img.naturalWidth) * img.naturalHeight;
+    return {
+      left: `calc(${percent(attr.left / img.naturalWidth)} - 2px)`,
+      width: `calc(${percent(
+        (attr.right - attr.left) / img.naturalWidth,
+      )} + 2px)`,
+
+      top: `calc(${percent(
+        ((attr.top / img.naturalHeight) * innerHeight +
+          (imgHeight - innerHeight) / 2) /
+          imgHeight,
+      )} - 2px)`,
+      height: `calc(${percent(
+        (((attr.bottom - attr.top) / img.naturalHeight) * innerHeight) /
+          imgHeight,
+      )} + 2px)`,
+    };
+  });
+  const imgHover = shallowRef(false);
+  const hoverPosition = shallowRef({ ox: 0, oy: 0 });
+  const boxHoverPosition = computed(() => {
+    const attr = focusNode.value?.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 boxHoverPerPosition = computed(() => {
+    const attr = focusNode.value?.attr;
+    if (!attr || !boxHoverPosition.value) {
+      return;
+    }
+    if (attr.width <= 0 || attr.height <= 0) {
+      return;
+    }
+    const { bottom, left, right, top } = boxHoverPosition.value;
+    return {
+      left: toFixedNumber(left / (right + left), 3),
+      right: toFixedNumber(right / (right + left), 3),
+      top: toFixedNumber(top / (top + bottom), 3),
+      bottom: toFixedNumber(bottom / (top + bottom), 3),
+    };
+  });
+  const hoverBgImgWidth = 1000;
+  const hoverPositionStyle = shallowRef({
+    left: '0',
+    top: '0',
+    width: hoverBgImgWidth + 'px',
+  });
+
+  const imgMove = (ev: MouseEvent) => {
+    const img = imgRef.value;
+    if (!img) return;
+    const imgRect = img.getBoundingClientRect();
+
+    const innerHeight = (imgRect.width / img.naturalWidth) * img.naturalHeight;
+    const offsetTop = (imgRect.height - innerHeight) / 2;
+
+    const ox = ((ev.clientX - imgRect.left) / imgRect.width) * img.naturalWidth;
+    const oy =
+      ((ev.clientY - imgRect.top - offsetTop) / innerHeight) *
+      img.naturalHeight;
+    hoverPosition.value = { ox, oy };
+    hoverPositionStyle.value = {
+      left:
+        (-(ox - 0.1 * img.naturalWidth) / img.naturalWidth) * hoverBgImgWidth +
+        'px',
+      top:
+        (-(oy - 0.1 * img.naturalWidth) / img.naturalWidth) * hoverBgImgWidth +
+        'px',
+      width: hoverBgImgWidth + 'px',
+    };
+  };
+  return {
+    imgRef,
+    imgBounding,
+    clickImg,
+    positionStyle,
+    imgHover,
+    imgMove,
+    hoverPositionStyle,
+    boxHoverPerPosition,
+    imgLoadTime,
+    hoverPosition,
+    boxHoverPosition,
+  };
+});
diff --git a/uno.config.ts b/uno.config.ts
@@ -6,6 +6,6 @@ import {
 } from 'unocss';
 
 export default defineConfig({
-  presets: [presetWind4({ preflight: 'on-demand' }), presetAttributify()],
+  presets: [presetWind4(), presetAttributify()],
   transformers: [transformerAttributifyJsx()],
 });
