@robot-admin/naive-ui-components 0.3.0

package/dist/C_Signature2.js

@@ -0,0 +1,618 @@
+import { t as C_Icon_default } from "./C_Icon2.js";
+import { t as export_helper_default } from "./export-helper.js";
+import { computed, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, reactive, readonly, ref, toRef, unref, withCtx } from "vue";
+import { NButton, NButtonGroup, NColorPicker, NInputNumber } from "naive-ui";
+
+//#region src/components/C_Signature/composables/useSignatureCanvas.ts
+function useSignatureCanvas(options) {
+	const { canvasRef, penConfig, mode, disabled, onStrokeComplete, onDrawStart, onDrawing } = options;
+	const isDrawing = ref(false);
+	const currentStroke = ref([]);
+	let ctx = null;
+	const initCanvas = () => {
+		const canvas = canvasRef.value;
+		if (!canvas) return;
+		ctx = canvas.getContext("2d", { willReadFrequently: true });
+		if (!ctx) return;
+		const dpr = window.devicePixelRatio || 1;
+		const rect = canvas.getBoundingClientRect();
+		canvas.width = rect.width * dpr;
+		canvas.height = rect.height * dpr;
+		canvas.style.width = `${rect.width}px`;
+		canvas.style.height = `${rect.height}px`;
+		ctx.scale(dpr, dpr);
+		ctx.lineCap = "round";
+		ctx.lineJoin = "round";
+	};
+	const getPointFromEvent = (e) => {
+		const canvas = canvasRef.value;
+		if (!canvas) return {
+			x: 0,
+			y: 0
+		};
+		const rect = canvas.getBoundingClientRect();
+		let clientX;
+		let clientY;
+		if ("touches" in e && e.touches.length > 0) ({clientX, clientY} = e.touches[0]);
+		else if ("clientX" in e) ({clientX, clientY} = e);
+		else return {
+			x: 0,
+			y: 0
+		};
+		return {
+			x: clientX - rect.left,
+			y: clientY - rect.top,
+			timestamp: Date.now()
+		};
+	};
+	const drawStroke = (from, to, config, eraserMode = false) => {
+		if (!ctx) return;
+		ctx.save();
+		if (eraserMode) {
+			ctx.globalCompositeOperation = "destination-out";
+			ctx.lineWidth = 20;
+		} else {
+			ctx.globalCompositeOperation = "source-over";
+			ctx.strokeStyle = config.color;
+			ctx.lineWidth = config.width;
+			ctx.globalAlpha = config.opacity;
+		}
+		ctx.beginPath();
+		ctx.moveTo(from.x, from.y);
+		ctx.lineTo(to.x, to.y);
+		ctx.stroke();
+		ctx.restore();
+	};
+	const startDrawing = (e) => {
+		if (disabled.value) return;
+		e.preventDefault();
+		isDrawing.value = true;
+		currentStroke.value = [];
+		const point = getPointFromEvent(e);
+		currentStroke.value.push(point);
+		onDrawStart();
+	};
+	const draw = (e) => {
+		if (!isDrawing.value || disabled.value) return;
+		e.preventDefault();
+		const point = getPointFromEvent(e);
+		const lastPoint = currentStroke.value[currentStroke.value.length - 1];
+		if (lastPoint) drawStroke(lastPoint, point, penConfig.value, mode.value === "eraser");
+		currentStroke.value.push(point);
+		onDrawing(point);
+	};
+	const endDrawing = (e) => {
+		if (!isDrawing.value || disabled.value) return;
+		e.preventDefault();
+		isDrawing.value = false;
+		if (currentStroke.value.length > 0) {
+			onStrokeComplete({
+				points: [...currentStroke.value],
+				color: penConfig.value.color,
+				width: penConfig.value.width,
+				opacity: penConfig.value.opacity,
+				mode: mode.value
+			});
+			currentStroke.value = [];
+		}
+	};
+	const redrawStrokes = (strokes) => {
+		if (!ctx || !canvasRef.value) return;
+		const canvas = canvasRef.value;
+		ctx.clearRect(0, 0, canvas.width, canvas.height);
+		strokes.forEach((stroke) => {
+			for (let i = 1; i < stroke.points.length; i++) drawStroke(stroke.points[i - 1], stroke.points[i], {
+				color: stroke.color,
+				width: stroke.width,
+				opacity: stroke.opacity
+			}, stroke.mode === "eraser");
+		});
+	};
+	const clearCanvas = () => {
+		if (!ctx || !canvasRef.value) return;
+		ctx.clearRect(0, 0, canvasRef.value.width, canvasRef.value.height);
+	};
+	const bindEvents = () => {
+		const canvas = canvasRef.value;
+		if (!canvas) return;
+		canvas.addEventListener("mousedown", startDrawing);
+		canvas.addEventListener("mousemove", draw);
+		canvas.addEventListener("mouseup", endDrawing);
+		canvas.addEventListener("mouseleave", endDrawing);
+		canvas.addEventListener("touchstart", startDrawing, { passive: false });
+		canvas.addEventListener("touchmove", draw, { passive: false });
+		canvas.addEventListener("touchend", endDrawing);
+		canvas.addEventListener("touchcancel", endDrawing);
+	};
+	const unbindEvents = () => {
+		const canvas = canvasRef.value;
+		if (!canvas) return;
+		canvas.removeEventListener("mousedown", startDrawing);
+		canvas.removeEventListener("mousemove", draw);
+		canvas.removeEventListener("mouseup", endDrawing);
+		canvas.removeEventListener("mouseleave", endDrawing);
+		canvas.removeEventListener("touchstart", startDrawing);
+		canvas.removeEventListener("touchmove", draw);
+		canvas.removeEventListener("touchend", endDrawing);
+		canvas.removeEventListener("touchcancel", endDrawing);
+	};
+	return {
+		isDrawing: readonly(isDrawing),
+		initCanvas,
+		bindEvents,
+		unbindEvents,
+		redrawStrokes,
+		clearCanvas
+	};
+}
+
+//#endregion
+//#region src/components/C_Signature/composables/useSignatureHistory.ts
+function useSignatureHistory(options = {}) {
+	const { maxHistory = 50, onChange } = options;
+	const strokes = ref([]);
+	const historyStack = ref([]);
+	const historyIndex = ref(-1);
+	const canUndo = computed(() => historyIndex.value > 0);
+	const canRedo = computed(() => historyIndex.value < historyStack.value.length - 1);
+	const addStroke = (stroke) => {
+		strokes.value.push(stroke);
+		saveToHistory();
+	};
+	const saveToHistory = () => {
+		historyStack.value = historyStack.value.slice(0, historyIndex.value + 1);
+		historyStack.value.push([...strokes.value]);
+		historyIndex.value++;
+		if (historyStack.value.length > maxHistory) {
+			historyStack.value.shift();
+			historyIndex.value--;
+		}
+		onChange?.(strokes.value);
+	};
+	const undo = () => {
+		if (!canUndo.value) return false;
+		historyIndex.value--;
+		strokes.value = [...historyStack.value[historyIndex.value]];
+		onChange?.(strokes.value);
+		return true;
+	};
+	const redo = () => {
+		if (!canRedo.value) return false;
+		historyIndex.value++;
+		strokes.value = [...historyStack.value[historyIndex.value]];
+		onChange?.(strokes.value);
+		return true;
+	};
+	const clear = () => {
+		strokes.value = [];
+		historyStack.value = [[]];
+		historyIndex.value = 0;
+		onChange?.(strokes.value);
+	};
+	const loadData = (data) => {
+		strokes.value = [...data];
+		historyStack.value = [[...data]];
+		historyIndex.value = 0;
+		onChange?.(strokes.value);
+	};
+	const isEmpty = computed(() => strokes.value.length === 0);
+	historyStack.value = [[]];
+	historyIndex.value = 0;
+	return {
+		strokes: readonly(strokes),
+		canUndo: readonly(canUndo),
+		canRedo: readonly(canRedo),
+		isEmpty: readonly(isEmpty),
+		addStroke,
+		undo,
+		redo,
+		clear,
+		loadData
+	};
+}
+
+//#endregion
+//#region src/components/C_Signature/composables/useSignatureExport.ts
+function useSignatureExport(options) {
+	const { canvasRef, watermark } = options;
+	const getWatermarkPosition = (canvas, textWidth, fontSize, position) => {
+		const padding = 10;
+		const positions = {
+			"top-left": {
+				x: padding,
+				y: fontSize + padding
+			},
+			"top-right": {
+				x: canvas.width - textWidth - padding,
+				y: fontSize + padding
+			},
+			"bottom-left": {
+				x: padding,
+				y: canvas.height - padding
+			},
+			"bottom-right": {
+				x: canvas.width - textWidth - padding,
+				y: canvas.height - padding
+			}
+		};
+		return positions[position] || positions["bottom-right"];
+	};
+	const drawWatermark = (canvas, text) => {
+		const ctx = canvas.getContext("2d");
+		if (!ctx || !watermark?.value?.show) return;
+		const config = {
+			fontSize: watermark.value.fontSize || 12,
+			color: watermark.value.color || "#999999",
+			position: watermark.value.position || "bottom-right"
+		};
+		ctx.save();
+		ctx.font = `${config.fontSize}px Arial`;
+		ctx.fillStyle = config.color;
+		ctx.textBaseline = "bottom";
+		const textWidth = ctx.measureText(text).width;
+		const { x, y } = getWatermarkPosition(canvas, textWidth, config.fontSize, config.position);
+		ctx.fillText(text, x, y);
+		ctx.restore();
+	};
+	const createTempCanvas = (sourceCanvas, includeBackground, backgroundColor) => {
+		const tempCanvas = document.createElement("canvas");
+		tempCanvas.width = sourceCanvas.width;
+		tempCanvas.height = sourceCanvas.height;
+		const tempCtx = tempCanvas.getContext("2d");
+		if (!tempCtx) throw new Error("无法创建临时 Canvas");
+		if (includeBackground) {
+			tempCtx.fillStyle = backgroundColor;
+			tempCtx.fillRect(0, 0, tempCanvas.width, tempCanvas.height);
+		}
+		tempCtx.drawImage(sourceCanvas, 0, 0);
+		return {
+			canvas: tempCanvas,
+			ctx: tempCtx
+		};
+	};
+	const prepareExportCanvas = (canvas, options) => {
+		const { includeBackground = false, backgroundColor = "#FFFFFF", includeWatermark = false } = options;
+		const { canvas: tempCanvas } = createTempCanvas(canvas, includeBackground, backgroundColor);
+		if (includeWatermark && watermark?.value?.show && watermark.value.text) drawWatermark(tempCanvas, watermark.value.text);
+		return tempCanvas;
+	};
+	const exportToBlob = (canvas, quality) => {
+		return new Promise((resolve, reject) => {
+			canvas.toBlob((blob) => blob ? resolve(blob) : reject(/* @__PURE__ */ new Error("导出失败")), "image/png", quality);
+		});
+	};
+	const exportSignature = async (options = {}) => {
+		const canvas = canvasRef.value;
+		if (!canvas) throw new Error("Canvas 未初始化");
+		const { format = "png", quality = .92 } = options;
+		if (format === "svg") return "data:image/svg+xml;charset=utf-8,<svg xmlns=\"http://www.w3.org/2000/svg\"><text>SVG export placeholder</text></svg>";
+		const tempCanvas = prepareExportCanvas(canvas, options);
+		if (format === "blob") return exportToBlob(tempCanvas, quality);
+		const mimeType = format === "jpeg" ? "image/jpeg" : "image/png";
+		return tempCanvas.toDataURL(mimeType, quality);
+	};
+	const download = async (filename = "signature", options = {}) => {
+		const format = options.format || "png";
+		const result = await exportSignature({
+			...options,
+			format
+		});
+		if (result instanceof Blob) {
+			const url = URL.createObjectURL(result);
+			const link = document.createElement("a");
+			link.href = url;
+			link.download = `${filename}.${format}`;
+			link.click();
+			URL.revokeObjectURL(url);
+		} else if (typeof result === "string") {
+			const link = document.createElement("a");
+			link.href = result;
+			link.download = `${filename}.${format}`;
+			link.click();
+		}
+	};
+	const loadImage = async (imageUrl) => {
+		const canvas = canvasRef.value;
+		if (!canvas) throw new Error("Canvas 未初始化");
+		const ctx = canvas.getContext("2d");
+		if (!ctx) throw new Error("无法获取 Canvas 上下文");
+		return new Promise((resolve, reject) => {
+			const img = new Image();
+			img.crossOrigin = "anonymous";
+			img.onload = () => {
+				ctx.clearRect(0, 0, canvas.width, canvas.height);
+				ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
+				resolve();
+			};
+			img.onerror = () => reject(/* @__PURE__ */ new Error(`图片加载失败: ${imageUrl}`));
+			img.src = imageUrl;
+		});
+	};
+	return {
+		exportSignature,
+		download,
+		loadImage
+	};
+}
+
+//#endregion
+//#region src/components/C_Signature/data.ts
+const DEFAULT_PEN_CONFIG = {
+	color: "#000000",
+	width: 2,
+	opacity: 1
+};
+const DEFAULT_WATERMARK_CONFIG = {
+	show: false,
+	text: "",
+	fontSize: 12,
+	color: "#999999",
+	position: "bottom-right"
+};
+const PRESET_COLORS = [
+	"#000000",
+	"#FF0000",
+	"#0000FF",
+	"#00AA00",
+	"#FF6600",
+	"#9900FF"
+];
+
+//#endregion
+//#region src/components/C_Signature/index.vue?vue&type=script&setup=true&lang.ts
+const _hoisted_1 = { class: "c-signature" };
+const _hoisted_2 = {
+	key: 0,
+	class: "signature-toolbar"
+};
+const _hoisted_3 = { class: "toolbar-section" };
+const _hoisted_4 = {
+	key: 0,
+	class: "toolbar-section"
+};
+const _hoisted_5 = {
+	key: 1,
+	class: "toolbar-section"
+};
+const _hoisted_6 = { class: "toolbar-section" };
+const _hoisted_7 = { class: "toolbar-section" };
+const _hoisted_8 = {
+	key: 0,
+	class: "canvas-placeholder"
+};
+var index_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
+	name: "C_Signature",
+	__name: "index",
+	props: {
+		width: { default: "100%" },
+		height: { default: 300 },
+		penConfig: {},
+		eraserConfig: {},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		readonly: {
+			type: Boolean,
+			default: false
+		},
+		backgroundImage: {},
+		backgroundColor: {},
+		watermark: {},
+		showToolbar: {
+			type: Boolean,
+			default: true
+		},
+		maxHistory: { default: 50 }
+	},
+	emits: [
+		"start-draw",
+		"drawing",
+		"end-draw",
+		"clear",
+		"undo",
+		"redo",
+		"change"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const canvasRef = ref(null);
+		const currentMode = ref("pen");
+		const currentPenConfig = reactive({
+			...DEFAULT_PEN_CONFIG,
+			...props.penConfig
+		});
+		const currentWatermark = reactive({
+			...DEFAULT_WATERMARK_CONFIG,
+			...props.watermark
+		});
+		const { strokes, canUndo, canRedo, isEmpty, addStroke, undo, redo, clear, loadData } = useSignatureHistory({
+			maxHistory: props.maxHistory,
+			onChange: (data) => {
+				canvasInstance.redrawStrokes(data);
+				emit("change", data);
+			}
+		});
+		const canvasInstance = useSignatureCanvas({
+			canvasRef,
+			penConfig: toRef(currentPenConfig),
+			mode: currentMode,
+			disabled: toRef(props, "disabled"),
+			onStrokeComplete: (stroke) => {
+				addStroke(stroke);
+				emit("end-draw", stroke);
+			},
+			onDrawStart: () => emit("start-draw"),
+			onDrawing: (point) => emit("drawing", point)
+		});
+		const exportInstance = useSignatureExport({
+			canvasRef,
+			watermark: toRef(currentWatermark)
+		});
+		const handleUndo = () => {
+			const result = undo();
+			if (result) emit("undo");
+			return result;
+		};
+		const handleRedo = () => {
+			const result = redo();
+			if (result) emit("redo");
+			return result;
+		};
+		const handleClear = () => {
+			clear();
+			canvasInstance.clearCanvas();
+			emit("clear");
+		};
+		const exportSignature = async (options) => {
+			return exportInstance.exportSignature(options);
+		};
+		const download = async (filename, options) => {
+			return exportInstance.download(filename, options);
+		};
+		const loadImage = async (imageUrl) => {
+			await exportInstance.loadImage(imageUrl);
+			clear();
+		};
+		const getSignatureData = () => strokes.value;
+		const loadSignatureData = (data) => loadData(data);
+		const isSignatureEmpty = () => isEmpty.value;
+		onMounted(() => {
+			canvasInstance.initCanvas();
+			canvasInstance.bindEvents();
+			if (props.backgroundImage) loadImage(props.backgroundImage);
+		});
+		onUnmounted(() => canvasInstance.unbindEvents());
+		__expose({
+			clear: handleClear,
+			undo: handleUndo,
+			redo: handleRedo,
+			export: exportSignature,
+			download,
+			loadImage,
+			getSignatureData,
+			loadSignatureData,
+			isEmpty: isSignatureEmpty
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [_ctx.showToolbar ? (openBlock(), createElementBlock("div", _hoisted_2, [
+				createElementVNode("div", _hoisted_3, [createVNode(unref(NButtonGroup), null, {
+					default: withCtx(() => [createVNode(unref(NButton), {
+						type: currentMode.value === "pen" ? "primary" : "default",
+						size: "small",
+						onClick: _cache[0] || (_cache[0] = ($event) => currentMode.value = "pen")
+					}, {
+						icon: withCtx(() => [createVNode(C_Icon_default, {
+							name: "mdi:draw",
+							size: 16,
+							color: "currentColor"
+						})]),
+						default: withCtx(() => [_cache[4] || (_cache[4] = createTextVNode(" 画笔 ", -1))]),
+						_: 1,
+						__: [4]
+					}, 8, ["type"]), createVNode(unref(NButton), {
+						type: currentMode.value === "eraser" ? "primary" : "default",
+						size: "small",
+						onClick: _cache[1] || (_cache[1] = ($event) => currentMode.value = "eraser")
+					}, {
+						icon: withCtx(() => [createVNode(C_Icon_default, {
+							name: "mdi:eraser",
+							size: 16,
+							color: "currentColor"
+						})]),
+						default: withCtx(() => [_cache[5] || (_cache[5] = createTextVNode(" 橡皮擦 ", -1))]),
+						_: 1,
+						__: [5]
+					}, 8, ["type"])]),
+					_: 1
+				})]),
+				_cache[11] || (_cache[11] = createElementVNode("div", { class: "toolbar-section divider" }, null, -1)),
+				currentMode.value === "pen" ? (openBlock(), createElementBlock("div", _hoisted_4, [_cache[6] || (_cache[6] = createElementVNode("span", { class: "section-label" }, "颜色", -1)), createVNode(unref(NColorPicker), {
+					value: currentPenConfig.color,
+					"onUpdate:value": _cache[2] || (_cache[2] = ($event) => currentPenConfig.color = $event),
+					"show-alpha": false,
+					size: "small",
+					swatches: unref(PRESET_COLORS)
+				}, null, 8, ["value", "swatches"])])) : createCommentVNode("v-if", true),
+				currentMode.value === "pen" ? (openBlock(), createElementBlock("div", _hoisted_5, [_cache[7] || (_cache[7] = createElementVNode("span", { class: "section-label" }, "粗细", -1)), createVNode(unref(NInputNumber), {
+					value: currentPenConfig.width,
+					"onUpdate:value": _cache[3] || (_cache[3] = ($event) => currentPenConfig.width = $event),
+					min: 1,
+					max: 20,
+					size: "small",
+					style: { "width": "80px" }
+				}, null, 8, ["value"])])) : createCommentVNode("v-if", true),
+				_cache[12] || (_cache[12] = createElementVNode("div", { class: "toolbar-section divider" }, null, -1)),
+				createElementVNode("div", _hoisted_6, [createVNode(unref(NButton), {
+					size: "small",
+					disabled: !unref(canUndo),
+					onClick: handleUndo
+				}, {
+					icon: withCtx(() => [createVNode(C_Icon_default, {
+						name: "mdi:undo",
+						size: 16,
+						color: "currentColor"
+					})]),
+					default: withCtx(() => [_cache[8] || (_cache[8] = createTextVNode(" 撤销 ", -1))]),
+					_: 1,
+					__: [8]
+				}, 8, ["disabled"]), createVNode(unref(NButton), {
+					size: "small",
+					disabled: !unref(canRedo),
+					onClick: handleRedo
+				}, {
+					icon: withCtx(() => [createVNode(C_Icon_default, {
+						name: "mdi:redo",
+						size: 16,
+						color: "currentColor"
+					})]),
+					default: withCtx(() => [_cache[9] || (_cache[9] = createTextVNode(" 重做 ", -1))]),
+					_: 1,
+					__: [9]
+				}, 8, ["disabled"])]),
+				_cache[13] || (_cache[13] = createElementVNode("div", { class: "toolbar-section divider" }, null, -1)),
+				createElementVNode("div", _hoisted_7, [createVNode(unref(NButton), {
+					size: "small",
+					type: "error",
+					disabled: unref(isEmpty),
+					onClick: handleClear
+				}, {
+					icon: withCtx(() => [createVNode(C_Icon_default, {
+						name: "mdi:delete-outline",
+						size: 16,
+						color: "currentColor"
+					})]),
+					default: withCtx(() => [_cache[10] || (_cache[10] = createTextVNode(" 清空 ", -1))]),
+					_: 1,
+					__: [10]
+				}, 8, ["disabled"])])
+			])) : createCommentVNode("v-if", true), createElementVNode("div", {
+				class: normalizeClass(["signature-canvas-wrapper", {
+					disabled: _ctx.disabled,
+					readonly: _ctx.readonly
+				}]),
+				style: normalizeStyle({
+					width: typeof _ctx.width === "number" ? `${_ctx.width}px` : _ctx.width,
+					height: typeof _ctx.height === "number" ? `${_ctx.height}px` : _ctx.height,
+					backgroundColor: _ctx.backgroundColor || "transparent"
+				})
+			}, [createElementVNode("canvas", {
+				ref_key: "canvasRef",
+				ref: canvasRef,
+				class: normalizeClass(["signature-canvas", {
+					disabled: _ctx.disabled,
+					readonly: _ctx.readonly
+				}])
+			}, null, 2), unref(isEmpty) && !_ctx.disabled && !_ctx.readonly ? (openBlock(), createElementBlock("div", _hoisted_8, " 请在此处签名 ")) : createCommentVNode("v-if", true)], 6)]);
+		};
+	}
+});
+
+//#endregion
+//#region src/components/C_Signature/index.vue
+var C_Signature_default = /* @__PURE__ */ export_helper_default(index_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-4f40e616"]]);
+
+//#endregion
+export { useSignatureCanvas as i, useSignatureExport as n, useSignatureHistory as r, C_Signature_default as t };
+//# sourceMappingURL=C_Signature2.js.map