muzhiyu-ui 1.0.0

package/components/muzhiyu/mu-signature/mu-signature.vue

@@ -0,0 +1,449 @@
+<template>
+	<view class="mu-signature">
+		<!-- 纯粹画板容器 Pure Canvas Area -->
+		<view class="mu-signature__board" :style="{ height: formattedHeight, background: bgColor }">
+			<!-- Canvas 节点：直接绑定所有触摸与鼠标事件 -->
+			<canvas
+				:canvas-id="canvasId"
+				:id="canvasId"
+				class="mu-signature__canvas"
+				:disable-scroll="true"
+				@touchstart.stop.prevent="handleTouchStart"
+				@touchmove.stop.prevent="handleTouchMove"
+				@touchend.stop.prevent="handleTouchEnd"
+				@mousedown.stop.prevent="handleMouseDown"
+				@mousemove.stop.prevent="handleMouseMove"
+				@mouseup.stop.prevent="handleMouseUp"
+				@mouseleave.stop.prevent="handleMouseUp"
+			/>
+			
+			<!-- 水印手写文字提示 -->
+			<view v-if="isEmpty" class="mu-signature__placeholder">
+				<text class="mu-signature__placeholder-text">请在此手写签名</text>
+			</view>
+
+			<!-- 浮动操作按钮 (阻止冒泡，禁止触发画板落笔) -->
+			<view
+				v-if="showActions"
+				class="mu-signature__floating-tools"
+				@touchstart.stop
+				@touchmove.stop
+				@touchend.stop
+				@mousedown.stop
+				@mousemove.stop
+				@mouseup.stop
+			>
+				<view class="mu-signature__btn mu-signature__btn--text" @tap.stop="handleUndo">撤销</view>
+				<view class="mu-signature__btn mu-signature__btn--text" @tap.stop="handleClear">清空</view>
+				<view class="mu-signature__btn mu-signature__btn--primary" @tap.stop="handleConfirm">完成签名</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, getCurrentInstance } from 'vue'
+
+const props = defineProps({
+	height: { type: [Number, String], default: 380 },
+	penColor: { type: String, default: '#0F172A' },
+	penWidth: { type: Number, default: 4 },
+	bgColor: { type: String, default: '#FFFFFF' },
+	showActions: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['confirm', 'clear', 'start', 'end', 'undo'])
+
+const instance = getCurrentInstance()
+const canvasId = ref('mu-sig-' + Math.random().toString(36).slice(2, 8))
+const ctx = ref(null)
+const isDrawing = ref(false)
+const isMouseDown = ref(false)
+const isEmpty = ref(true)
+
+const boardRect = ref({ left: 0, top: 0, width: 0, height: 0 })
+const historyLines = ref([])
+const currentStrokePoints = ref([])
+let lastPos = null
+
+const formattedHeight = computed(() => {
+	if (typeof props.height === 'number') return `${props.height}rpx`
+	return props.height.includes('rpx') || props.height.includes('px') ? props.height : `${props.height}rpx`
+})
+
+function getCanvasElement() {
+	// #ifdef H5
+	let el = document.getElementById(canvasId.value)
+	if (!el) return null
+	if (el.tagName === 'CANVAS') return el
+	return el.querySelector('canvas') || el
+	// #endif
+	return null
+}
+
+function measureCanvasRect(callback) {
+	// #ifndef APP-NVUE
+	const query = uni.createSelectorQuery().in(instance)
+	query.select(`#${canvasId.value}`).boundingClientRect((rect) => {
+		if (rect) {
+			boardRect.value = rect
+			if (callback) callback()
+		}
+	}).exec()
+	// #endif
+}
+
+function initCanvas() {
+	// #ifndef H5
+	ctx.value = uni.createCanvasContext(canvasId.value, (instance && instance.proxy))
+	// #endif
+
+	measureCanvasRect(() => {
+		// #ifdef H5
+		const canvas = getCanvasElement()
+		if (canvas) {
+			const rect = canvas.getBoundingClientRect()
+			const w = Math.round(rect.width || canvas.clientWidth || 300)
+			const h = Math.round(rect.height || canvas.clientHeight || 180)
+			if (w > 0 && h > 0) {
+				canvas.width = w
+				canvas.height = h
+			}
+		}
+		// #endif
+		clearCanvas()
+	})
+}
+
+function clearCanvas() {
+	// #ifdef H5
+	const canvas = getCanvasElement()
+	if (canvas && typeof canvas.getContext === 'function') {
+		const c2d = canvas.getContext('2d')
+		c2d.fillStyle = props.bgColor
+		c2d.fillRect(0, 0, canvas.width, canvas.height)
+		return
+	}
+	// #endif
+
+	if (ctx.value && boardRect.value.width) {
+		ctx.value.beginPath()
+		ctx.value.setFillStyle(props.bgColor)
+		ctx.value.fillRect(0, 0, boardRect.value.width, boardRect.value.height)
+		ctx.value.draw()
+	}
+}
+
+function getCanvasPos(e) {
+	// 1. H5 桌面端 / 模拟器 MouseEvent: 直接优先使用原生的 e.offsetX 和 e.offsetY 绝对像素坐标
+	if (e && e.offsetX !== undefined && e.offsetY !== undefined) {
+		return {
+			x: e.offsetX,
+			y: e.offsetY
+		}
+	}
+
+	// 2. 触摸屏 TouchEvent / UniApp 事件
+	const touch = (e.touches && e.touches[0]) || (e.changedTouches && e.changedTouches[0]) || e
+
+	// #ifdef H5
+	const target = e.currentTarget || e.target
+	if (target && typeof target.getBoundingClientRect === 'function') {
+		const rect = target.getBoundingClientRect()
+		const clientX = touch.clientX !== undefined ? touch.clientX : 0
+		const clientY = touch.clientY !== undefined ? touch.clientY : 0
+		return {
+			x: clientX - rect.left,
+			y: clientY - rect.top
+		}
+	}
+	// #endif
+
+	// #ifndef H5
+	if (touch.x !== undefined && touch.y !== undefined) {
+		return { x: touch.x, y: touch.y }
+	}
+	// #endif
+
+	if (boardRect.value && boardRect.value.left !== undefined) {
+		const clientX = touch.clientX !== undefined ? touch.clientX : (touch.x || 0)
+		const clientY = touch.clientY !== undefined ? touch.clientY : (touch.y || 0)
+		return {
+			x: clientX - boardRect.value.left,
+			y: clientY - boardRect.value.top
+		}
+	}
+
+	return { x: 0, y: 0 }
+}
+
+function startStroke(e) {
+	isDrawing.value = true
+	const pos = getCanvasPos(e)
+	lastPos = pos
+	currentStrokePoints.value = [pos]
+	emit('start')
+}
+
+function moveStroke(e) {
+	if (!isDrawing.value || !lastPos) return
+	const pos = getCanvasPos(e)
+
+	const dist = Math.hypot(pos.x - lastPos.x, pos.y - lastPos.y)
+	if (dist < 0.5) return
+
+	isEmpty.value = false
+	drawLineSegment(lastPos, pos)
+
+	lastPos = pos
+	currentStrokePoints.value.push(pos)
+}
+
+function endStroke() {
+	if (!isDrawing.value) return
+	isDrawing.value = false
+	lastPos = null
+
+	if (currentStrokePoints.value.length > 1) {
+		historyLines.value.push([...currentStrokePoints.value])
+	}
+	currentStrokePoints.value = []
+	emit('end')
+}
+
+function drawLineSegment(p1, p2) {
+	// #ifdef H5
+	const canvasEl = getCanvasElement()
+	if (canvasEl && typeof canvasEl.getContext === 'function') {
+		const c2d = canvasEl.getContext('2d')
+		c2d.beginPath()
+		c2d.strokeStyle = props.penColor
+		c2d.lineWidth = props.penWidth
+		c2d.lineCap = 'round'
+		c2d.lineJoin = 'round'
+		c2d.moveTo(p1.x, p1.y)
+		c2d.lineTo(p2.x, p2.y)
+		c2d.stroke()
+		return
+	}
+	// #endif
+
+	// #ifndef H5
+	if (!ctx.value) return
+	ctx.value.beginPath()
+	ctx.value.setStrokeStyle(props.penColor)
+	ctx.value.setLineWidth(props.penWidth)
+	ctx.value.setLineCap('round')
+	ctx.value.setLineJoin('round')
+	ctx.value.moveTo(p1.x, p1.y)
+	ctx.value.lineTo(p2.x, p2.y)
+	ctx.value.stroke()
+	ctx.value.draw(true)
+	// #endif
+}
+
+// 触摸事件 handler
+function handleTouchStart(e) {
+	startStroke(e)
+}
+
+function handleTouchMove(e) {
+	moveStroke(e)
+}
+
+function handleTouchEnd(e) {
+	endStroke()
+}
+
+// 鼠标事件 handler (PC / H5 模拟器支持)
+function handleMouseDown(e) {
+	isMouseDown.value = true
+	startStroke(e)
+}
+
+function handleMouseMove(e) {
+	if (!isMouseDown.value) return
+	moveStroke(e)
+}
+
+function handleMouseUp(e) {
+	if (!isMouseDown.value) return
+	isMouseDown.value = false
+	endStroke()
+}
+
+function handleUndo() {
+	if (historyLines.value.length === 0) return
+	historyLines.value.pop()
+	if (historyLines.value.length === 0) {
+		isEmpty.value = true
+	}
+	redrawAll()
+	emit('undo')
+}
+
+function handleClear() {
+	historyLines.value = []
+	currentStrokePoints.value = []
+	lastPos = null
+	isEmpty.value = true
+	clearCanvas()
+	emit('clear')
+}
+
+function redrawAll() {
+	clearCanvas()
+	if (historyLines.value.length === 0) return
+
+	for (const stroke of historyLines.value) {
+		if (stroke.length < 2) continue
+		for (let i = 0; i < stroke.length - 1; i++) {
+			drawLineSegment(stroke[i], stroke[i + 1])
+		}
+	}
+}
+
+function handleConfirm() {
+	if (isEmpty.value) {
+		if (typeof uni !== 'undefined' && uni.$toast) uni.$toast('请先书写签名')
+		return
+	}
+
+	// #ifdef H5
+	const canvas = getCanvasElement()
+	if (canvas && typeof canvas.toDataURL === 'function') {
+		try {
+			const dataUrl = canvas.toDataURL('image/png')
+			emit('confirm', { tempFilePath: dataUrl })
+			return
+		} catch (e) {}
+	}
+	// #endif
+
+	uni.canvasToTempFilePath({
+		canvasId: canvasId.value,
+		fileType: 'png',
+		quality: 1,
+		success: (res) => {
+			emit('confirm', { tempFilePath: res.tempFilePath })
+		},
+		fail: () => {
+			if (typeof uni !== 'undefined' && uni.$toast) uni.$toast({ title: '生成签名图片失败', type: 'error' })
+		}
+	}, (instance && instance.proxy))
+}
+
+onMounted(() => {
+	setTimeout(() => {
+		initCanvas()
+	}, 150)
+})
+
+defineExpose({ clear: handleClear, undo: handleUndo, confirm: handleConfirm, isEmpty })
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-signature {
+	width: 100%;
+	box-sizing: border-box;
+
+	&__board {
+		position: relative;
+		width: 100%;
+		border-radius: 20rpx;
+		border: 1rpx dashed rgba(148, 163, 184, 0.4);
+		overflow: hidden;
+		touch-action: none !important;
+		cursor: crosshair;
+		box-sizing: border-box;
+	}
+
+	&__canvas {
+		width: 100%;
+		height: 100%;
+		touch-action: none !important;
+	}
+
+	&__placeholder {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		pointer-events: none;
+		opacity: 0.35;
+
+		&-text {
+			font-size: 28rpx;
+			color: #94A3B8;
+			font-weight: 600;
+			letter-spacing: 2rpx;
+		}
+	}
+
+	&__floating-tools {
+		position: absolute;
+		bottom: 16rpx;
+		right: 16rpx;
+		display: flex;
+		align-items: center;
+		gap: 12rpx;
+		z-index: 10;
+	}
+
+	&__btn {
+		padding: 10rpx 24rpx;
+		border-radius: 999rpx;
+		font-size: 22rpx;
+		font-weight: 700;
+		cursor: pointer;
+		transition: all 0.2s ease;
+
+		&--text {
+			background: rgba(255, 255, 255, 0.9);
+			color: #475569;
+			border: 1rpx solid #E2E8F0;
+			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
+
+			&:active { background: #F1F5F9; }
+		}
+
+		&--primary {
+			background: #171717;
+			color: #ffffff;
+			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
+
+			&:active { opacity: 0.9; }
+		}
+	}
+}
+
+.mu-dark, page.mu-dark {
+	.mu-signature {
+		&__board {
+			border-color: rgba(255, 255, 255, 0.15);
+		}
+		&__placeholder-text { color: $mu-dark-text-secondary; }
+		&__btn--text {
+			background: rgba(30, 41, 59, 0.9);
+			color: $mu-dark-text-primary;
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.mu-signature {
+		&__board {
+			border-color: rgba(255, 255, 255, 0.15);
+		}
+		&__placeholder-text { color: $mu-dark-text-secondary; }
+		&__btn--text {
+			background: rgba(30, 41, 59, 0.9);
+			color: $mu-dark-text-primary;
+			border-color: rgba(255, 255, 255, 0.1);
+		}
+	}
+}
+</style>

package/components/muzhiyu/mu-skeleton/mu-skeleton.vue

@@ -0,0 +1,225 @@
+<template>
+	<view v-if="loading" class="mu-skeleton" :class="[
+		animate && 'mu-skeleton--animate',
+		`mu-skeleton--${type}`
+	]">
+		<!-- 1. 卡片/商品形态 (type="card") -->
+		<view v-if="type === 'card'" class="mu-skeleton__card-wrap">
+			<view class="mu-skeleton__cover"></view>
+			<view class="mu-skeleton__card-body">
+				<view class="mu-skeleton__line" style="width: 80%; height: 32rpx; margin-bottom: 16rpx;"></view>
+				<view class="mu-skeleton__line" style="width: 50%; height: 24rpx; margin-bottom: 24rpx;"></view>
+				<view class="mu-skeleton__card-foot">
+					<view class="mu-skeleton__line" style="width: 30%; height: 36rpx;"></view>
+					<view class="mu-skeleton__line" style="width: 24%; height: 48rpx; border-radius: 999rpx;"></view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 2. 标准文本/头像列表形态 (type="list" | "avatar" | "paragraph") -->
+		<template v-else>
+			<!-- 头像 -->
+			<view
+				v-if="avatar"
+				class="mu-skeleton__avatar"
+				:class="[
+					`mu-skeleton__avatar--${avatarSize}`,
+					avatarRound && 'mu-skeleton__avatar--round'
+				]"
+			></view>
+
+			<!-- 文本内容区块 -->
+			<view class="mu-skeleton__body">
+				<!-- 标题骨架 -->
+				<view v-if="title" class="mu-skeleton__title" :style="{ width: titleWidth }"></view>
+				
+				<!-- 行段落骨架 -->
+				<view
+					v-for="(rowW, i) in rowsList"
+					:key="i"
+					class="mu-skeleton__row"
+					:style="{ width: rowW }"
+				></view>
+			</view>
+		</template>
+	</view>
+
+	<!-- 加载完成后展示内容 -->
+	<slot v-else></slot>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+	loading: { type: Boolean, default: true },
+	animate: { type: Boolean, default: true },
+	// 形态预设: paragraph(段落) | card(卡片) | avatar(带头像)
+	type: { type: String, default: 'paragraph' },
+	avatar: { type: Boolean, default: false },
+	avatarSize: { type: String, default: 'md' },       // sm | md | lg
+	avatarRound: { type: Boolean, default: true },
+	title: { type: Boolean, default: true },
+	titleWidth: { type: String, default: '40%' },
+	rows: { type: [Number, Array], default: 3 },
+	rowsWidth: { type: Array, default: () => [] }
+})
+
+const rowsList = computed(() => {
+	const count = typeof props.rows === 'number' ? props.rows : props.rows.length
+	return Array.from({ length: count }, (_, i) => {
+		if (props.rowsWidth[i]) return props.rowsWidth[i]
+		if (i === count - 1) return '60%'
+		return '100%'
+	})
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-skeleton {
+	display: flex;
+	width: 100%;
+	box-sizing: border-box;
+
+	/* 骨架发光扫光动画 */
+	&--animate {
+		.mu-skeleton__avatar,
+		.mu-skeleton__title,
+		.mu-skeleton__row,
+		.mu-skeleton__cover,
+		.mu-skeleton__line {
+			background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
+			background-size: 400% 100%;
+			animation: mu-skeleton-sweep 1.6s ease-in-out infinite;
+		}
+	}
+
+	&__avatar {
+		flex-shrink: 0;
+		margin-right: 24rpx;
+		background: #F1F5F9;
+
+		&--sm { width: 64rpx; height: 64rpx; border-radius: 12rpx; }
+		&--md { width: 80rpx; height: 80rpx; border-radius: 16rpx; }
+		&--lg { width: 100rpx; height: 100rpx; border-radius: 20rpx; }
+		&--round { border-radius: 50% !important; }
+	}
+
+	&__body {
+		flex: 1;
+		min-width: 0;
+	}
+
+	&__title {
+		height: 32rpx;
+		background: #F1F5F9;
+		border-radius: 8rpx;
+		margin-bottom: 20rpx;
+	}
+
+	&__row {
+		height: 24rpx;
+		background: #F1F5F9;
+		border-radius: 6rpx;
+		margin-bottom: 16rpx;
+
+		&:last-child { margin-bottom: 0; }
+	}
+
+	/* ========== 卡片骨架形态 (card) ========== */
+	&__card-wrap {
+		width: 100%;
+		border-radius: 20rpx;
+		overflow: hidden;
+		background: #ffffff;
+		border: 1rpx solid rgba(226, 232, 240, 0.6);
+	}
+
+	&__cover {
+		width: 100%;
+		height: 240rpx;
+		background: #F1F5F9;
+	}
+
+	&__card-body {
+		padding: 24rpx;
+	}
+
+	&__line {
+		background: #F1F5F9;
+		border-radius: 8rpx;
+	}
+
+	&__card-foot {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-top: 16rpx;
+	}
+}
+
+@keyframes mu-skeleton-sweep {
+	0% { background-position: 100% 0; }
+	100% { background-position: 0 0; }
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-skeleton {
+		&--animate {
+			.mu-skeleton__avatar,
+			.mu-skeleton__title,
+			.mu-skeleton__row,
+			.mu-skeleton__cover,
+			.mu-skeleton__line {
+				background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.04) 75%);
+				background-size: 400% 100%;
+			}
+		}
+
+		&__avatar,
+		&__title,
+		&__row,
+		&__cover,
+		&__line {
+			background: rgba(255, 255, 255, 0.04);
+		}
+
+		&__card-wrap {
+			background: $mu-dark-bg-base;
+			border-color: rgba(255, 255, 255, 0.08);
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-skeleton {
+		&--animate {
+			.mu-skeleton__avatar,
+			.mu-skeleton__title,
+			.mu-skeleton__row,
+			.mu-skeleton__cover,
+			.mu-skeleton__line {
+				background: linear-gradient(90deg, rgba(255, 255, 255, 0.04) 25%, rgba(255, 255, 255, 0.09) 50%, rgba(255, 255, 255, 0.04) 75%);
+				background-size: 400% 100%;
+			}
+		}
+
+		&__avatar,
+		&__title,
+		&__row,
+		&__cover,
+		&__line {
+			background: rgba(255, 255, 255, 0.04);
+		}
+
+		&__card-wrap {
+			background: $mu-dark-bg-base;
+			border-color: rgba(255, 255, 255, 0.08);
+		}
+	}
+}
+</style>