fix: 打印时图片加载问题临时处理

src/App.vue

@@ -140,6 +140,17 @@ watch(
         <v-main class="bg-grey-darken-3">
             <Sketch ref="sketch">
                 <Paper />
+                <v-btn
+                    block
+                    size="x-large"
+                    class="mt-4 text-white print-none"
+                    variant="tonal"
+                    color="#4f545c"
+                    prepend-icon="mdi-plus"
+                    @click="paperInstance.pageCount++"
+                >
+                    新增页面
+                </v-btn>
             </Sketch>
             <WebsiteInfo />
             <v-defaults-provider

src/PrintPage.vue

@@ -3,16 +3,40 @@ import Paper from '@/components/core/Paper.vue';
 import { onMounted, provide, reactive } from 'vue';
 import { Paper as PaperClass, paperInjectionKey } from '@/classes/Paper';
 
+import { useWindowScroll, useWindowSize } from '@vueuse/core';
+import { linear } from '@/utils/timeFunction';
+
 // Paper实例
 const paperInstance = reactive(new PaperClass({}));
 provide(paperInjectionKey, paperInstance);
-onMounted(() => {
+
+const { y } = useWindowScroll({
+    behavior: 'instant',
+});
+const { height } = useWindowSize();
+
+onMounted(async () => {
     if (!paperInstance.loadFromStorage()) {
         window.alert('没有找到存储的数据');
     } else {
-        console.log(paperInstance);
-        // document.body.style.background = paperInstance.background;
-        window.print();
+        // 临时处理，滚动到底部再打印，后续考虑是否需要优化
+        const scrollHeight = paperInstance.h * paperInstance.pageCount - height.value;
+        if (scrollHeight < 0) {
+            window.print();
+            return;
+        }
+        const duration = (scrollHeight / 1000) * 1000;
+        linear({
+            start: 0,
+            end: scrollHeight,
+            duration,
+            callback: (value, finished) => {
+                y.value = value;
+                if (finished) {
+                    window.print();
+                }
+            },
+        });
     }
 });
 </script>

src/components/core/Paper.vue

@@ -273,17 +273,6 @@ const insertPage = (index: number) => {
             </div>
         </div>
     </template>
-    <v-btn
-        block
-        size="x-large"
-        class="mt-4 text-white print-none"
-        variant="tonal"
-        color="#4f545c"
-        prepend-icon="mdi-plus"
-        @click="paper.pageCount++"
-    >
-        新增页面
-    </v-btn>
 </template>
 
 <style lang="scss" scoped>
@@ -367,5 +356,9 @@ const insertPage = (index: number) => {
         opacity: 1;
         clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
     }
+
+    @media print {
+        display: none;
+    }
 }
 </style>

src/utils/timeFunction.ts

@@ -2,7 +2,7 @@ export const easeInOut = (option: {
     start: number;
     end: number;
     duration?: number;
-    callback?: (value: number) => void;
+    callback?: (value: number, finished?: boolean) => void;
 }) => {
     const { start, end, duration = 300, callback } = option;
     if (import.meta.env.MODE === 'test') {
@@ -23,7 +23,40 @@ export const easeInOut = (option: {
         }
         const progress = Math.min(1, (timestamp - startTime) / duration);
         const _value = start + (end - start) * _easeInOut(progress);
-        callback?.(_value);
+        callback?.(_value, progress === 1);
+        if (progress < 1) {
+            requestAnimationFrame(step);
+        }
+    };
+    requestAnimationFrame(step);
+};
+
+export const linear = (option: {
+    start: number;
+    end: number;
+    duration?: number;
+    callback?: (value: number, finished?: boolean) => void;
+}) => {
+    const { start, end, duration = 300, callback } = option;
+    if (import.meta.env.MODE === 'test') {
+        callback?.(end);
+        return;
+    }
+    let startTime = 0;
+    let endTime = 0;
+    const _linear = (t: number): number => {
+        return t;
+    };
+    const step = (timestamp: number): void => {
+        if (!startTime) {
+            startTime = timestamp;
+        }
+        if (!endTime) {
+            endTime = startTime + duration;
+        }
+        const progress = Math.min(1, (timestamp - startTime) / duration);
+        const _value = start + (end - start) * _linear(progress);
+        callback?.(_value, progress === 1);
         if (progress < 1) {
             requestAnimationFrame(step);
         }