muzhiyu-ui 1.0.0

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

@@ -0,0 +1,415 @@
+<template>
+	<view v-if="visible" class="mu-cropper">
+		<!-- 核心画布与操作视口 -->
+		<view
+			class="mu-cropper__canvas-area"
+			@touchstart="onTouchStart"
+			@touchmove="onTouchMove"
+			@touchend="onTouchEnd"
+		>
+			<!-- GPU 硬件加速变换中的图片 -->
+			<image
+				class="mu-cropper__img"
+				:src="src"
+				mode="aspectFit"
+				:style="imgTransformStyle"
+			/>
+
+			<!-- 遮罩全屏（挖空裁剪框） -->
+			<view class="mu-cropper__mask"></view>
+
+			<!-- 裁剪框与 L 型高亮四角手柄 -->
+			<view
+				class="mu-cropper__frame"
+				:class="[shape === 'circle' && 'mu-cropper__frame--circle']"
+				:style="frameStyle"
+			>
+				<!-- 九宫格网格线 -->
+				<view class="mu-cropper__grid-h1"></view>
+				<view class="mu-cropper__grid-h2"></view>
+				<view class="mu-cropper__grid-v1"></view>
+				<view class="mu-cropper__grid-v2"></view>
+
+				<!-- 4 个 L 型四角装饰 -->
+				<view class="mu-cropper__corner mu-cropper__corner--tl"></view>
+				<view class="mu-cropper__corner mu-cropper__corner--tr"></view>
+				<view class="mu-cropper__corner mu-cropper__corner--bl"></view>
+				<view class="mu-cropper__corner mu-cropper__corner--br"></view>
+			</view>
+		</view>
+
+		<!-- 底部极奢工具栏 -->
+		<view class="mu-cropper__toolbar">
+			<view class="mu-cropper__tool-btn" @tap="handleCancel">
+				<text class="mu-cropper__tool-text">取消</text>
+			</view>
+
+			<view class="mu-cropper__tool-btn" @tap="handleRotate">
+				<mu-icon name="redo" :size="20" color="#FFFFFF" />
+				<text class="mu-cropper__tool-text" style="margin-left: 8rpx;">旋转</text>
+			</view>
+
+			<view class="mu-cropper__tool-btn" @tap="handleReset">
+				<mu-icon name="undo" :size="20" color="#FFFFFF" />
+				<text class="mu-cropper__tool-text" style="margin-left: 8rpx;">还原</text>
+			</view>
+
+			<view class="mu-cropper__confirm-btn mu-touchable-flat" @tap="handleConfirm">
+				<text class="mu-cropper__confirm-text">完成</text>
+			</view>
+		</view>
+
+		<!-- 离屏 Canvas (非 H5 端生成临时图片) -->
+		<!-- #ifndef H5 -->
+		<canvas
+			canvas-id="mu-cropper-export-canvas"
+			id="mu-cropper-export-canvas"
+			:style="{ position: 'fixed', left: '-9999px', top: '-9999px', width: props.width + 'px', height: props.height + 'px' }"
+		/>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch, getCurrentInstance } from 'vue'
+
+const props = defineProps({
+	src: { type: String, default: '' },
+	show: { type: Boolean, default: false },
+	width: { type: Number, default: 300 },
+	height: { type: Number, default: 300 },
+	shape: { type: String, default: 'square' },
+	quality: { type: Number, default: 0.9 }
+})
+
+const emit = defineEmits(['confirm', 'cancel', 'update:show'])
+
+const visible = ref(false)
+
+// 图片变换数据
+const imgX = ref(0)
+const imgY = ref(0)
+const imgScale = ref(1)
+const rotateAngle = ref(0)
+
+// 触控流控锁
+const startTouchX = ref(0)
+const startTouchY = ref(0)
+const startImgX = ref(0)
+const startImgY = ref(0)
+const startDist = ref(0)
+const startScale = ref(1)
+let ticking = false
+
+const frameStyle = computed(() => ({
+	width: `${props.width}px`,
+	height: `${props.height}px`
+}))
+
+const imgTransformStyle = computed(() => ({
+	transform: `translate3d(${imgX.value}px, ${imgY.value}px, 0) scale(${imgScale.value}) rotate(${rotateAngle.value}deg)`,
+	transition: 'none'
+}))
+
+function onTouchStart(e) {
+	if (!e || !e.touches || !e.touches.length) return
+	if (e.touches.length === 1 && e.touches[0]) {
+		const touch = e.touches[0]
+		startTouchX.value = touch.clientX
+		startTouchY.value = touch.clientY
+		startImgX.value = imgX.value
+		startImgY.value = imgY.value
+	} else if (e.touches.length === 2 && e.touches[0] && e.touches[1]) {
+		const t1 = e.touches[0]
+		const t2 = e.touches[1]
+		startDist.value = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY)
+		startScale.value = imgScale.value
+	}
+}
+
+function onTouchMove(e) {
+	if (e && e.preventDefault) e.preventDefault()
+	if (ticking || !e || !e.touches || !e.touches.length) return
+	ticking = true
+
+	// rAF 满帧调优，避免打爆主线程响应式计算
+	const update = () => {
+		if (e.touches.length === 1 && e.touches[0]) {
+			const touch = e.touches[0]
+			const deltaX = touch.clientX - startTouchX.value
+			const deltaY = touch.clientY - startTouchY.value
+			imgX.value = startImgX.value + deltaX
+			imgY.value = startImgY.value + deltaY
+		} else if (e.touches.length === 2 && e.touches[0] && e.touches[1]) {
+			const t1 = e.touches[0]
+			const t2 = e.touches[1]
+			const currentDist = Math.hypot(t2.clientX - t1.clientX, t2.clientY - t1.clientY)
+			if (startDist.value > 0) {
+				const scale = startScale.value * (currentDist / startDist.value)
+				imgScale.value = Math.max(0.3, Math.min(4, scale))
+			}
+		}
+		ticking = false
+	}
+
+	// #ifdef H5
+	if (window.requestAnimationFrame) {
+		window.requestAnimationFrame(update)
+	} else {
+		update()
+	}
+	// #endif
+
+	// #ifndef H5
+	update()
+	// #endif
+}
+
+function onTouchEnd() {
+	ticking = false
+}
+
+function handleRotate() {
+	rotateAngle.value = (rotateAngle.value + 90) % 360
+}
+
+function handleReset() {
+	imgX.value = 0
+	imgY.value = 0
+	imgScale.value = 1
+	rotateAngle.value = 0
+}
+
+function handleCancel() {
+	visible.value = false
+	emit('cancel')
+	emit('update:show', false)
+}
+
+function handleConfirm() {
+	// #ifdef H5
+	const canvas = document.createElement('canvas')
+	canvas.width = props.width
+	canvas.height = props.height
+	const ctx = canvas.getContext('2d')
+	const img = new Image()
+	img.crossOrigin = 'anonymous'
+
+	img.onload = () => {
+		ctx.clearRect(0, 0, props.width, props.height)
+		ctx.save()
+		ctx.translate(props.width / 2, props.height / 2)
+		ctx.rotate((rotateAngle.value * Math.PI) / 180)
+		ctx.scale(imgScale.value, imgScale.value)
+		ctx.drawImage(img, -props.width / 2 + imgX.value, -props.height / 2 + imgY.value, props.width, props.height)
+		ctx.restore()
+
+		canvas.toBlob((blob) => {
+			const url = URL.createObjectURL(blob)
+			emit('confirm', { url, blob })
+			handleCancel()
+		}, 'image/png', props.quality)
+	}
+	img.src = props.src
+	// #endif
+
+	// #ifndef H5
+	const instance = getCurrentInstance()
+	
+	const doDraw = (localSrc) => {
+		const ctx = uni.createCanvasContext('mu-cropper-export-canvas', (instance && instance.proxy))
+		ctx.save()
+		ctx.translate(props.width / 2, props.height / 2)
+		ctx.rotate((rotateAngle.value * Math.PI) / 180)
+		ctx.scale(imgScale.value, imgScale.value)
+		ctx.drawImage(localSrc, -props.width / 2 + imgX.value, -props.height / 2 + imgY.value, props.width, props.height)
+		ctx.restore()
+
+		ctx.draw(false, () => {
+			setTimeout(() => {
+				uni.canvasToTempFilePath({
+					canvasId: 'mu-cropper-export-canvas',
+					quality: props.quality,
+					success: (res) => {
+						let tempFilePath = res.tempFilePath
+						if (typeof tempFilePath === 'string' && tempFilePath.startsWith('http://tmp/')) {
+							tempFilePath = tempFilePath.replace('http://tmp/', 'wxfile://tmp/')
+						}
+						emit('confirm', { url: tempFilePath })
+						handleCancel()
+					},
+					fail: () => {
+						uni.showToast({ title: '图片裁剪失败', icon: 'none' })
+					}
+				}, (instance && instance.proxy))
+			}, 100)
+		})
+	}
+
+	if (props.src.startsWith('http')) {
+		uni.showLoading({ title: '正在处理图片...' })
+		uni.downloadFile({
+			url: props.src,
+			success: (res) => {
+				uni.hideLoading()
+				if (res.statusCode === 200 && res.tempFilePath) {
+					doDraw(res.tempFilePath)
+				} else {
+					doDraw(props.src)
+				}
+			},
+			fail: () => {
+				uni.hideLoading()
+				doDraw(props.src)
+			}
+		})
+	} else {
+		doDraw(props.src)
+	}
+	// #endif
+}
+
+watch(() => props.show, (val) => {
+	if (val) {
+		visible.value = true
+		handleReset()
+	} else {
+		visible.value = false
+	}
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-cropper {
+	position: fixed;
+	inset: 0;
+	z-index: $mu-z-popup;
+	background: #000000;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+
+	&__canvas-area {
+		flex: 1;
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		touch-action: none;
+	}
+
+	&__img {
+		position: absolute;
+		max-width: none;
+		max-height: none;
+		will-change: transform;
+		transform-style: preserve-3d;
+		backface-visibility: hidden;
+	}
+
+	&__mask {
+		position: absolute;
+		inset: 0;
+		background: rgba(0, 0, 0, 0.65);
+		pointer-events: none;
+		z-index: 2;
+	}
+
+	&__frame {
+		position: relative;
+		z-index: 3;
+		border: 1rpx solid rgba(255, 255, 255, 0.8);
+		box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
+		pointer-events: none;
+		box-sizing: border-box;
+
+		&--circle {
+			border-radius: 50%;
+			box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.7);
+			overflow: hidden;
+		}
+	}
+
+	/* 网格线 */
+	&__grid-h1, &__grid-h2 {
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 1rpx;
+		background: rgba(255, 255, 255, 0.25);
+	}
+	&__grid-h1 { top: 33.33%; }
+	&__grid-h2 { top: 66.66%; }
+
+	&__grid-v1, &__grid-v2 {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		width: 1rpx;
+		background: rgba(255, 255, 255, 0.25);
+	}
+	&__grid-v1 { left: 33.33%; }
+	&__grid-v2 { left: 66.66%; }
+
+	/* 4 角 L 型角标 */
+	&__corner {
+		position: absolute;
+		width: 28rpx;
+		height: 28rpx;
+		border-color: #ffffff;
+		border-style: solid;
+		border-width: 0;
+		z-index: 4;
+
+		&--tl { top: -2rpx; left: -2rpx; border-top-width: 6rpx; border-left-width: 6rpx; }
+		&--tr { top: -2rpx; right: -2rpx; border-top-width: 6rpx; border-right-width: 6rpx; }
+		&--bl { bottom: -2rpx; left: -2rpx; border-bottom-width: 6rpx; border-left-width: 6rpx; }
+		&--br { bottom: -2rpx; right: -2rpx; border-bottom-width: 6rpx; border-right-width: 6rpx; }
+	}
+
+	&__toolbar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 28rpx 36rpx;
+		padding-bottom: calc(28rpx + env(safe-area-inset-bottom));
+		background: #0F172A;
+		z-index: 10;
+	}
+
+	&__tool-btn {
+		display: flex;
+		align-items: center;
+		cursor: pointer;
+		padding: 12rpx 20rpx;
+		border-radius: 12rpx;
+
+		&:active {
+			background: rgba(255, 255, 255, 0.1);
+		}
+	}
+
+	&__tool-text {
+		font-size: 26rpx;
+		color: #ffffff;
+		font-weight: 600;
+	}
+
+	&__confirm-btn {
+		padding: 14rpx 36rpx;
+		background: #171717;
+		border-radius: 999rpx;
+		box-shadow: 0 4rpx 16rpx rgba(99, 102, 241, 0.4);
+		cursor: pointer;
+	}
+
+	&__confirm-text {
+		font-size: 26rpx;
+		font-weight: 800;
+		color: #ffffff;
+	}
+}
+</style>

package/components/muzhiyu/mu-date-picker/mu-date-picker.vue

@@ -0,0 +1,290 @@
+<template>
+	<view class="mu-date-picker" :class="[
+		`mu-date-picker--${shape}`,
+		`mu-date-picker--label-${labelPosition}`,
+		disabled && 'mu-date-picker--disabled',
+		error && 'mu-date-picker--error',
+		filled && 'mu-date-picker--filled'
+	]">
+		<!-- 标题 Label (包含必填红星与位置布局) -->
+		<view v-if="label || $slots.label" class="mu-date-picker__label-box" :style="labelBoxStyle">
+			<text v-if="required" class="mu-date-picker__required">*</text>
+			<slot name="label">
+				<text class="mu-date-picker__label-text">{{ label }}</text>
+			</slot>
+		</view>
+
+		<!-- 日期/时间框主容器 Main Box -->
+		<view class="mu-date-picker__main">
+			<view class="mu-date-picker__wrap" @tap="togglePicker">
+				<!-- 前缀图标与前缀插槽 -->
+				<view v-if="computedPrefixIcon || $slots.prefix" class="mu-date-picker__prefix">
+					<slot name="prefix">
+						<mu-icon :name="computedPrefixIcon" :size="16" color="#94A3B8" />
+					</slot>
+				</view>
+
+				<!-- 选中文本或 Placeholder -->
+				<text class="mu-date-picker__text" :class="{ 'mu-date-picker__text--placeholder': !modelValue }">
+					{{ modelValue || computedPlaceholder }}
+				</text>
+
+				<!-- 清除按钮 -->
+				<view v-if="clearable && modelValue" class="mu-date-picker__clear" @tap.stop="onClear">
+					<mu-icon name="close" :size="12" color="#94A3B8" />
+				</view>
+
+				<!-- 后缀图标与后缀插槽 -->
+				<view v-if="suffixIcon || $slots.suffix" class="mu-date-picker__suffix">
+					<slot name="suffix">
+						<mu-icon :name="suffixIcon" :size="16" color="#94A3B8" />
+					</slot>
+				</view>
+			</view>
+
+			<!-- 错误提示文本 -->
+			<text v-if="error" class="mu-date-picker__error">{{ errorMessage }}</text>
+		</view>
+
+		<!-- 高颜值主题色日期/时间选择弹窗 mu-datetime -->
+		<mu-datetime
+			v-model:show="showPicker"
+			:value="modelValue"
+			:title="computedTitle"
+			:mode="mode"
+			@confirm="onConfirmDate"
+		/>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+	modelValue: { type: String, default: '' },
+	shape: { type: String, default: 'radius' },          // square | radius | round
+	filled: { type: Boolean, default: false },            // 背景填充模式
+	label: { type: String, default: '' },
+	title: { type: String, default: '' },
+	labelPosition: { type: String, default: 'top' },     // top | left
+	labelWidth: { type: String, default: '' },
+	required: { type: Boolean, default: false },
+	placeholder: { type: String, default: '' },
+	disabled: { type: Boolean, default: false },
+	clearable: { type: Boolean, default: false },
+	mode: { type: String, default: 'date' },              // date | time | datetime | year-month
+	error: { type: Boolean, default: false },
+	errorMessage: { type: String, default: '' },
+	prefixIcon: { type: String, default: null },         // 若为 null，则根据 mode 智能匹配 (date -> calendar, time -> time)
+	suffixIcon: { type: String, default: 'chevron_down' } // 右侧默认微型下拉箭头
+})
+
+const emit = defineEmits(['update:modelValue', 'change', 'clear'])
+
+const showPicker = ref(false)
+
+const computedPrefixIcon = computed(() => {
+	if (props.prefixIcon !== null) return props.prefixIcon
+	return props.mode === 'time' ? 'time' : 'calendar'
+})
+
+const computedPlaceholder = computed(() => {
+	if (props.placeholder) return props.placeholder
+	if (props.mode === 'time') return '请选择时间'
+	if (props.mode === 'datetime') return '请选择日期时间'
+	return '请选择日期'
+})
+
+const computedTitle = computed(() => {
+	if (props.title) return props.title
+	if (props.label) return props.label
+	if (props.mode === 'time') return '选择时间'
+	if (props.mode === 'datetime') return '选择日期时间'
+	return '选择日期'
+})
+
+const labelBoxStyle = computed(() => {
+	if (props.labelPosition === 'left' && props.labelWidth) {
+		return { width: props.labelWidth }
+	}
+	return {}
+})
+
+function togglePicker() {
+	if (props.disabled) return
+	showPicker.value = true
+}
+
+function onConfirmDate(val) {
+	emit('update:modelValue', val)
+	emit('change', val)
+}
+
+function onClear() {
+	emit('update:modelValue', '')
+	emit('clear')
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-date-picker {
+	margin-bottom: 24rpx;
+
+	&--disabled { opacity: $mu-opacity-disabled; pointer-events: none; }
+	&--error {
+		.mu-date-picker__wrap {
+			border-color: $mu-error;
+			box-shadow: 0 0 14rpx rgba(244, 63, 94, 0.2);
+		}
+	}
+
+	/* Label 布局配置 */
+	&--label-top {
+		display: flex;
+		flex-direction: column;
+	}
+
+	&--label-left {
+		display: flex;
+		align-items: center;
+		.mu-date-picker__label-box {
+			margin-bottom: 0;
+			margin-right: 20rpx;
+			flex-shrink: 0;
+			width: 140rpx;
+		}
+		.mu-date-picker__main {
+			flex: 1;
+			min-width: 0;
+		}
+	}
+
+	&__label-box {
+		display: flex;
+		align-items: center;
+		margin-bottom: 12rpx;
+	}
+
+	&__required {
+		color: #F43F5E;
+		font-size: 26rpx;
+		font-weight: 800;
+		margin-right: 6rpx;
+		line-height: 1;
+	}
+
+	&__label-text {
+		font-size: 26rpx;
+		color: $mu-text-primary;
+		font-weight: 700;
+		line-height: 1.4;
+	}
+
+	&__main {
+		width: 100%;
+	}
+
+	&__wrap {
+		display: flex;
+		align-items: center;
+		border: 1rpx solid $mu-border;
+		padding: 0 20rpx;
+		height: 68rpx;
+		background: #ffffff;
+		transition: all $mu-duration $mu-ease;
+		cursor: pointer;
+		box-sizing: border-box;
+	}
+
+	/* 填充背景模式 */
+	&--filled &__wrap {
+		background: rgba(241, 245, 249, 0.6);
+		border-color: transparent;
+	}
+
+	/* 形态定义 (方形 / 柔和圆角 / 全圆胶囊) */
+	&--square &__wrap {
+		border-radius: 6rpx;
+	}
+	&--radius &__wrap {
+		border-radius: 12rpx;
+	}
+	&--round &__wrap {
+		border-radius: 999rpx;
+		padding: 0 28rpx;
+	}
+
+	&__prefix {
+		margin-right: 16rpx;
+		display: flex;
+		align-items: center;
+		flex-shrink: 0;
+	}
+
+	&__text {
+		flex: 1;
+		font-size: 26rpx;
+		color: $mu-text-primary;
+		font-weight: 500;
+
+		&--placeholder {
+			color: #94A3B8;
+			font-weight: 400;
+		}
+	}
+
+	&__clear {
+		width: 32rpx;
+		height: 32rpx;
+		border-radius: 50%;
+		background: rgba(148, 163, 184, 0.15);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		margin-left: 12rpx;
+		flex-shrink: 0;
+	}
+
+	&__suffix {
+		margin-left: 12rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	&__error {
+		font-size: 22rpx;
+		color: $mu-error;
+		margin-top: 8rpx;
+		display: block;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-date-picker {
+		&__label-text { color: $mu-dark-text-primary; }
+		&__wrap {
+			background: rgba(255, 255, 255, 0.04);
+			border-color: $mu-dark-border;
+		}
+		&__text { color: $mu-dark-text-primary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-date-picker {
+		&__label-text { color: $mu-dark-text-primary; }
+		&__wrap {
+			background: rgba(255, 255, 255, 0.04);
+			border-color: $mu-dark-border;
+		}
+		&__text { color: $mu-dark-text-primary; }
+	}
+}
+</style>