优化

cool/hooks/page.ts

@@ -93,37 +93,6 @@ class Page {
 
 		return h;
 	}
-
-	/**
-	 * 获取视图高度
-	 * @returns 视图高度
-	 */
-	getViewHeight() {
-		// #ifndef APP
-		return uni.getWindowInfo().windowHeight;
-		// #endif
-
-		// #ifdef APP
-		const { screenHeight } = uni.getWindowInfo();
-
-		let h = screenHeight;
-
-		if (!this.hasCustomTopbar()) {
-			h -= 44 + this.getSafeAreaHeight("top");
-		}
-
-		return h;
-		// #endif
-	}
-
-	/**
-	 * 获取视图宽度
-	 * @returns 视图宽度
-	 */
-	getViewWidth() {
-		const { screenWidth } = uni.getWindowInfo();
-		return screenWidth;
-	}
 }
 
 export const page = new Page();

cool/utils/file.ts

@@ -1,20 +1,14 @@
 import { base64ToBlob, uuid } from "./comm";
 
-export type CanvasToPngOptions = {
-	canvasId: string;
-	proxy?: ComponentPublicInstance;
-	canvasRef: UniElement;
-};
-
 /**
  * 将canvas转换为png图片
  * @param options 转换参数
  * @returns 图片路径
  */
-export function canvasToPng(options: CanvasToPngOptions): Promise<string> {
+export function canvasToPng(canvasRef: UniElement): Promise<string> {
 	return new Promise((resolve) => {
 		// #ifdef APP
-		options.canvasRef.parentElement!.takeSnapshot({
+		canvasRef.parentElement!.takeSnapshot({
 			success(res) {
 				resolve(res.tempFilePath);
 			},
@@ -28,9 +22,7 @@ export function canvasToPng(options: CanvasToPngOptions): Promise<string> {
 		// #ifdef H5
 		const url = URL.createObjectURL(
 			base64ToBlob(
-				(options.canvasRef as unknown as HTMLCanvasElement)
-					.querySelector("canvas")
-					?.toDataURL("image/png", 1) ?? ""
+				(canvasRef as unknown as HTMLCanvasElement)?.toDataURL("image/png", 1) ?? ""
 			)
 		);
 
@@ -39,34 +31,35 @@ export function canvasToPng(options: CanvasToPngOptions): Promise<string> {
 
 		// #ifdef MP
 		uni.createCanvasContextAsync({
-			id: options.canvasId,
-			component: options.proxy,
+			id: canvasRef.id,
+			component: canvasRef.$vm,
 			success(context) {
 				// 获取2D绘图上下文
 				const ctx = context.getContext("2d")!;
+
+				// 获取canvas对象
 				const canvas = ctx.canvas;
 
 				// 将canvas转换为base64格式的PNG图片数据
 				const data = canvas.toDataURL("image/png", 1);
-				// 获取base64数据部分(去掉data:image/png;base64,前缀)
-				const bdataBase64 = data.split(",")[1];
 
 				// 获取文件系统管理器
 				const fileMg = uni.getFileSystemManager();
+
 				// 生成临时文件路径
 				// @ts-ignore
 				const filepath = `${wx.env.USER_DATA_PATH}/${uuid()}.png`;
+
 				// 将base64数据写入文件
 				fileMg.writeFile({
 					filePath: filepath,
-					data: bdataBase64,
+					data: data.split(",")[1],
 					encoding: "base64",
 					success() {
-						// 写入成功返回文件路径
 						resolve(filepath);
 					},
-					fail() {
-						// 写入失败返回空字符串
+					fail(err) {
+						console.error(err);
 						resolve("");
 					}
 				});

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "cool-unix",
-	"version": "8.0.4",
+	"version": "8.0.5",
 	"license": "MIT",
 	"scripts": {
 		"build-ui": "node ./uni_modules/cool-ui/scripts/generate-types.js",

pages/demo/other/sign.uvue

@@ -3,7 +3,6 @@
 		<cl-sign
 			ref="signRef"
 			:height="isFullscreen ? windowHeight - 200 : 200"
-			:width="windowWidth"
 			:enable-brush="isBrush"
 		></cl-sign>
 
@@ -29,7 +28,7 @@
 <script setup lang="ts">
 import { ref } from "vue";
 
-const { windowWidth, windowHeight } = uni.getWindowInfo();
+const { windowHeight } = uni.getWindowInfo();
 
 const isFullscreen = ref(false);
 const isBrush = ref(true);

types/uni-app.d.ts

@@ -384,6 +384,8 @@ declare const onUnhandledRejection: (
 declare const onUnload: (hook: () => any, target?: ComponentInternalInstance | null) => void;
 
 declare interface UniElement {
+	$vm: ComponentPublicInstance;
+	id: string;
 	firstChild: UniElement;
 	lastChild: UniElement;
 	previousSibling: UniElement;

uni_modules/cool-ui/components/cl-page/theme.uvue

@@ -27,10 +27,9 @@ const list = ["moon-fill", "sun-fill"];
 	@apply bg-primary-500;
 
 	&__inner {
-		@apply flex flex-col;
+		@apply flex flex-col duration-300;
 		transform: translateY(20px);
 		transition-property: transform;
-		transition-duration: 300ms;
 
 		&.is-dark {
 			transform: translateY(-20px);

uni_modules/cool-ui/components/cl-qrcode/cl-qrcode.uvue

@@ -142,11 +142,7 @@ function drawer() {
  * @param call 回调函数，返回图片路径，失败返回空字符串
  */
 function toPng(): Promise<string> {
-	return canvasToPng({
-		canvasId: qrcodeId.value,
-		proxy,
-		canvasRef: canvasRef.value!
-	});
+	return canvasToPng(canvasRef.value!);
 }
 
 // 自动重绘

uni_modules/cool-ui/components/cl-sign/cl-sign.uvue

@@ -17,7 +17,7 @@
 
 <script lang="ts" setup>
 import { canvasToPng, parsePt, uuid } from "@/cool";
-import { computed, getCurrentInstance, onMounted, ref, shallowRef, watch } from "vue";
+import { computed, getCurrentInstance, nextTick, onMounted, ref, shallowRef, watch } from "vue";
 
 defineOptions({
 	name: "cl-sign"
@@ -32,7 +32,7 @@ const props = defineProps({
 	// 画布宽度
 	width: {
 		type: Number,
-		default: 300
+		default: () => uni.getWindowInfo().windowWidth
 	},
 	// 画布高度
 	height: {
@@ -289,11 +289,7 @@ function clear() {
 
 // 获取签名图片
 function toPng(): Promise<string> {
-	return canvasToPng({
-		proxy,
-		canvasId,
-		canvasRef: canvasRef.value!
-	});
+	return canvasToPng(canvasRef.value!);
 }
 
 // 初始化画布
@@ -331,7 +327,9 @@ onMounted(() => {
 	watch(
 		computed(() => [props.width, props.height]),
 		() => {
+			nextTick(() => {
 				initCanvas();
+			});
 		}
 	);
 });