From c9cf14023d793a47aaac9db59f03ffac673d0d49 Mon Sep 17 00:00:00 2001
From: cole <bernankeic@gmail.com>
Date: Wed, 21 Jun 2023 12:09:01 +0800
Subject: [PATCH] perf: compatibility on safari and firefox

---
 src/components/InfoDialog.vue            | 11 -----------
 src/composables/useHiddenElementStyle.ts | 17 ++++++++++++++---
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/components/InfoDialog.vue b/src/components/InfoDialog.vue
index ba2d3f8..d1f3e31 100644
--- a/src/components/InfoDialog.vue
+++ b/src/components/InfoDialog.vue
@@ -7,17 +7,6 @@
       <div class="text-4 text-default">
         上面是预览区，下面是操作区，要改哪里点哪里就行。
       </div>
-      <ClientOnly>
-        <NPopover placement="bottom" raw :show-arrow="false" :delay="500">
-          <template #trigger>
-            <div>目前还是只支持Edge或Chrome浏览器😩如果有大佬想要增加适配欢迎pr🥺</div>
-          </template>
-          <div class="flex flex-col rounded-2 p-y-1 p-x-2 box-border bg-#ffffff">
-            Safari和火狐目前的问题在于生成图片时，为了生成更清晰的图片，我搞了一个尺寸两倍的display: none的组件丢给dom-to-image，此时需要给dom-to-image传一个Element的宽高，但是在Safari和火狐上获取不到这个宽高。<br />
-            另外火狐默认不支持ClipboardItem，没办法复制。
-          </div>
-        </NPopover>
-      </ClientOnly>
     </div>
   </NModal>
 </template>
diff --git a/src/composables/useHiddenElementStyle.ts b/src/composables/useHiddenElementStyle.ts
index e266913..9dd1ee1 100644
--- a/src/composables/useHiddenElementStyle.ts
+++ b/src/composables/useHiddenElementStyle.ts
@@ -1,7 +1,7 @@
 import type { Fn, MaybeComputedElementRef, MaybeElement, UnRefElementReturn } from "@vueuse/core";
 
 export function useHiddenElementStyle(target: MaybeComputedElementRef) {
-  const style = ref({} as CSSStyleDeclaration);
+  const style = ref<Record<keyof CSSStyleDeclaration, string>>({} as any);
 
   function updateStyle<T extends MaybeElement>(el: UnRefElementReturn<T>) {
     if (!el) { return; }
@@ -15,12 +15,12 @@ export function useHiddenElementStyle(target: MaybeComputedElementRef) {
       el.style.display = "unset";
       el.style.visibility = "hidden";
       el.style.position = "absolute";
-      style.value = { ...window.getComputedStyle(el) };
+      style.value = transformCSSProperties(window.getComputedStyle(el));
       el.style.position = <string>position;
       el.style.visibility = <string>visibility;
       el.style.display = <string>display;
     } else {
-      style.value = { ...window.getComputedStyle(el) };
+      style.value = transformCSSProperties(window.getComputedStyle(el));
     }
   }
 
@@ -51,6 +51,17 @@ export function useHiddenElementStyle(target: MaybeComputedElementRef) {
   };
 }
 
+function transformCSSProperties(styles: CSSStyleDeclaration) {
+  const style: Record<string, string> = {};
+  const length = styles.length;
+  for (let i = 0; i < length; i++) {
+    const prop = styles[i];
+    const value = styles.getPropertyValue(prop);
+    style[prop] = value;
+  }
+  return style as Record<keyof CSSStyleDeclaration, string>;
+}
+
 function createStyleSelector(options?: { style?: CSSStyleDeclaration; computedStyle?: CSSStyleDeclaration }) {
   const { style = {}, computedStyle = {} } = options || {};
   return {