feat:盖章修改

src/views/tools/data/cache.vue

@@ -2,26 +2,14 @@
 	<div class="layout-padding">
 		<div class="layout-padding-auto layout-padding-view">
 			<div
-				class="p-4 min-w-[375px] md:min-w-[700px] xl:min-w-[800px] mt-3 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-3 3xl:grid-cols-6"
-			>
-				<div
-					v-for="(item, index) in 6"
-					:key="index"
-					class="relative flex flex-grow !flex-row flex-col items-center rounded-[10px] border-[1px] border-gray-200 bg-white hover:scale-105 hover:shadow-lg bg-clip-border shadow-md shadow-[#F3F3F3] dark:border-[#ffffff33] dark:!bg-[#1d1d1d] dark:text-white dark:shadow-none"
-				>
+				class="p-4 min-w-[375px] md:min-w-[700px] xl:min-w-[800px] mt-3 grid grid-cols-1 gap-5 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-3 3xl:grid-cols-6">
+				<div v-for="(item, index) in 6" :key="index"
+					class="relative flex flex-grow !flex-row flex-col items-center rounded-[10px] border-[1px] border-gray-200 bg-white hover:scale-105 hover:shadow-lg bg-clip-border shadow-md shadow-[#F3F3F3] dark:border-[#ffffff33] dark:!bg-[#1d1d1d] dark:text-white dark:shadow-none">
 					<div class="ml-[18px] flex h-[90px] w-auto flex-row items-center">
 						<div class="p-3 rounded-full bg-lightPrimary dark:bg-navy-700">
 							<span class="flex items-center text-brand-500 dark:text-white">
-								<svg
-									stroke="currentColor"
-									fill="currentColor"
-									stroke-width="0"
-									viewBox="0 0 24 24"
-									class="h-7 w-7"
-									height="1em"
-									width="1em"
-									xmlns="http://www.w3.org/2000/svg"
-								>
+								<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24"
+									class="h-7 w-7" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg">
 									<path fill="none" d="M0 0h24v24H0z"></path>
 									<path d="M4 9h4v11H4zM16 13h4v7h-4zM10 4h4v16h-4z"></path>
 								</svg>

src/views/wallet/wallet-recharge-invoice/print-dialog.vue

@@ -117,7 +117,6 @@ import { formatDate } from "/@/utils/formatTime"
 import { displayPrice } from "/@/utils/formatMoney"
 import printJS from "print-js"
 import * as WalletRechargeInvoiceApi from "/@/api/wallet/wallet-recharge-invoice"
-import { useDict } from "/@/hooks/dict"
 
 interface ReceiptData {
 	id: string
@@ -138,8 +137,7 @@ interface ReceiptData {
 
 const emit = defineEmits(["refresh"])
 
-const { check_status } = useDict("check_status")
-let timer
+let timer: ReturnType<typeof setTimeout> | null = null
 const visible = ref(false)
 const loading = ref(false)
 const refreshLoading = ref(false)
@@ -178,6 +176,7 @@ const openDialog = (data: ReceiptData, id: string) => {
 	visible.value = true
 	receiptData.value = data
 	receiptData.value.id = id
+	if (timer) clearTimeout(timer)
 	timer = setTimeout(() => {
 		deptOrUserInput.value?.focus()
 	}, 50)
@@ -185,6 +184,7 @@ const openDialog = (data: ReceiptData, id: string) => {
 
 const handleClose = () => {
 	visible.value = false
+	if (timer) clearTimeout(timer)
 	timer = null
 }
 
@@ -241,23 +241,54 @@ const backInvoice = async () => {
 }
 
 // 生成图片
-const genImage = async (): Promise<Blob | void | null> => {
-	if (receiptRef.value) {
-		const blob = await htmlToImage
-			.toBlob(receiptRef.value, {
-				canvasWidth: 661.5,
-				canvasHeight: 359.1,
-				backgroundColor: "#ffffff",
-				pixelRatio: 6,
-			})
-			.catch((error) => {
-				console.error(error)
-				return useMessage().error("图片生成错误")
-			})
-		return blob
+const waitForFrames = async (count: number) => {
+	for (let i = 0; i < count; i += 1) {
+		await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
 	}
 }
 
+const withReceiptCaptureStyle = async <T,>(fn: () => Promise<T>) => {
+	const el = receiptRef.value
+	if (!el) return fn()
+
+	const prevBackgroundColor = el.style.backgroundColor
+	const prevTransition = el.style.transition
+	const prevOpacity = el.style.opacity
+
+	el.style.backgroundColor = "#ffffff"
+	el.style.transition = "none"
+	el.style.opacity = "1"
+
+	await waitForFrames(2)
+
+	try {
+		return await fn()
+	} finally {
+		el.style.backgroundColor = prevBackgroundColor
+		el.style.transition = prevTransition
+		el.style.opacity = prevOpacity
+	}
+}
+
+const genImage = async (): Promise<Blob | void | null> => {
+	if (!receiptRef.value) return
+
+	const blob = await withReceiptCaptureStyle(async () => {
+		await new Promise((resolve) => setTimeout(resolve, 120))
+		return await htmlToImage.toBlob(receiptRef.value!, {
+			canvasWidth: 661.5,
+			canvasHeight: 359.1,
+			backgroundColor: "transparent",
+			pixelRatio: 3,
+		})
+	}).catch((error) => {
+		console.error(error)
+		return useMessage().error("图片生成错误")
+	})
+
+	return blob
+}
+
 // 图片上传
 const uploadImage = async (blob: Blob): Promise<string | void> => {
 	const formData = new FormData()
@@ -337,11 +368,14 @@ const applyStamp = async () => {
 // 打印
 const handlePrint = async () => {
 	if (receiptRef.value) {
-		const pngBase64 = await htmlToImage.toPng(receiptRef.value, {
-			canvasWidth: 661.5,
-			canvasHeight: 359.1,
-			pixelRatio: 10,
-			backgroundColor: "#ffffff",
+		const pngBase64 = await withReceiptCaptureStyle(async () => {
+			await new Promise((resolve) => setTimeout(resolve, 120))
+			return await htmlToImage.toPng(receiptRef.value!, {
+				canvasWidth: 661.5,
+				canvasHeight: 359.1,
+				pixelRatio: 4,
+				backgroundColor: "transparent",
+			})
 		})
 		printJS({ printable: pngBase64, type: "image", targetStyles: ["*"], maxWidth: 661.5 })
 	}