muzhiyu-ui 1.0.0

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

@@ -0,0 +1,156 @@
+<template>
+	<!-- 线性进度条 -->
+	<view v-if="type === 'line'" class="mu-progress mu-progress--line">
+		<view v-if="showInfo" class="mu-progress__label">
+			<slot><text class="mu-progress__label-text">{{ percent }}%</text></slot>
+		</view>
+		<view class="mu-progress__track" :style="{ height: strokeWidth + 'rpx', background: bgColor }">
+			<view class="mu-progress__bar" :style="barStyle"></view>
+		</view>
+	</view>
+	<!-- 环形进度条 -->
+	<view v-else class="mu-progress mu-progress--circle" :style="circleWrapperStyle">
+		<view class="mu-progress__circle">
+			<!-- #ifdef H5 -->
+			<svg :width="circleSize" :height="circleSize" :viewBox="`0 0 ${circleSize} ${circleSize}`">
+				<circle :cx="half" :cy="half" :r="radius" fill="none" :stroke="bgColor" :stroke-width="strokeWidth" />
+				<circle :cx="half" :cy="half" :r="radius" fill="none" :stroke="activeColorComputed"
+					:stroke-width="strokeWidth" :stroke-linecap="'round'"
+					:stroke-dasharray="circumference" :stroke-dashoffset="dashOffset"
+					:style="{ transition: 'stroke-dashoffset 0.3s cubic-bezier(0.32, 0.72, 0, 1)' }"
+					transform="rotate(-90)" :transform-origin="`${half} ${half}`" />
+			</svg>
+			<!-- #endif -->
+			<!-- #ifndef H5 -->
+			<canvas :canvas-id="canvasId" :id="canvasId" :style="{ width: circleSize + 'px', height: circleSize + 'px' }" />
+			<!-- #endif -->
+		</view>
+		<view v-if="showInfo" class="mu-progress__circle-info">
+			<slot><text class="mu-progress__circle-text">{{ percent }}%</text></slot>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { computed, watch, onMounted, ref, getCurrentInstance } from 'vue'
+const props = defineProps({
+	percent: { type: Number, default: 0 },
+	type: { type: String, default: 'line' },
+	strokeWidth: { type: [Number, String], default: 12 },
+	activeColor: { type: String, default: '' },
+	bgColor: { type: String, default: '' },
+	showInfo: { type: Boolean, default: true },
+	size: { type: [Number, String], default: 120 },
+	status: { type: String, default: '' }
+})
+const colorMap = { success: '#00B42A', warning: '#FF7D00', error: '#F53F3F' }
+const activeColorComputed = computed(() => props.activeColor || colorMap[props.status] || '#165DFF')
+const barStyle = computed(() => ({
+	width: Math.min(Math.max(props.percent, 0), 100) + '%',
+	background: props.activeColor ? props.activeColor : '#171717',
+	height: '100%',
+	borderRadius: '999rpx',
+	boxShadow: '0 4rpx 14rpx rgba(22, 93, 255, 0.35)',
+	transition: 'width 0.35s cubic-bezier(0.32, 0.72, 0, 1)'
+}))
+const circleSize = computed(() => Number(props.size))
+const half = computed(() => circleSize.value / 2)
+const strokeW = computed(() => Number(props.strokeWidth))
+const radius = computed(() => (circleSize.value - strokeW.value) / 2)
+const circumference = computed(() => 2 * Math.PI * radius.value)
+const dashOffset = computed(() => circumference.value * (1 - Math.min(Math.max(props.percent, 0), 100) / 100))
+const circleWrapperStyle = computed(() => ({
+	width: circleSize.value + 'px', height: circleSize.value + 'px', position: 'relative', display: 'inline-flex',
+	alignItems: 'center', justifyContent: 'center'
+}))
+const canvasId = ref('mu-progress-' + Math.random().toString(36).slice(2, 8))
+const ctx = ref(null)
+function drawCircle() {
+	// #ifndef H5
+	const instance = getCurrentInstance()
+	if (!ctx.value) {
+		ctx.value = uni.createCanvasContext(canvasId.value, (instance && instance.proxy))
+	}
+	const c = ctx.value
+	const s = circleSize.value
+	const r = radius.value
+	const sw = strokeW.value
+	c.clearRect(0, 0, s, s)
+	c.beginPath()
+	c.arc(half.value, half.value, r, 0, 2 * Math.PI)
+	c.setStrokeStyle(props.bgColor || 'rgba(226, 232, 240, 0.6)')
+	c.setLineWidth(sw)
+	c.stroke()
+	const angle = (Math.min(Math.max(props.percent, 0), 100) / 100) * 2 * Math.PI - Math.PI / 2
+	if (props.percent > 0) {
+		c.beginPath()
+		c.arc(half.value, half.value, r, -Math.PI / 2, angle)
+		c.setStrokeStyle(activeColorComputed.value)
+		c.setLineWidth(sw)
+		c.setLineCap('round')
+		c.stroke()
+	}
+	c.draw()
+	// #endif
+}
+onMounted(() => { if (props.type === 'circle') drawCircle() })
+watch(() => props.percent, () => { if (props.type === 'circle') drawCircle() })
+</script>
+
+<style lang="scss" scoped>
+.mu-progress {
+	&--line {
+		display: flex;
+		flex-direction: column;
+		gap: $mu-space-2;
+		width: 100%;
+	}
+	&__label { &-text { font-size: $mu-font-xs; color: $mu-text-secondary; font-weight: 700; } }
+	&__track {
+		width: 100%;
+		border-radius: $mu-radius-full;
+		overflow: hidden;
+		background: $mu-border-light;
+	}
+	&__bar { min-width: 0; }
+	&--circle {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+	&__circle {
+		position: absolute;
+		inset: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	&__circle-info {
+		position: relative;
+		z-index: 1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+	&__circle-text { font-size: $mu-font-sm; color: $mu-text-primary; font-weight: 800; }
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-progress {
+		&__label-text { color: $mu-dark-text-secondary; }
+		&__track { background: rgba(255, 255, 255, 0.08); }
+		&__circle-text { color: $mu-dark-text-primary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-progress {
+		&__label-text { color: $mu-dark-text-secondary; }
+		&__track { background: rgba(255, 255, 255, 0.08); }
+		&__circle-text { color: $mu-dark-text-primary; }
+	}
+}
+</style>

package/components/muzhiyu/mu-pull-refresh/mu-pull-refresh.vue

@@ -0,0 +1,54 @@
+<template>
+	<view class="mu-pull-refresh">
+		<scroll-view scroll-y class="mu-pull-refresh__scroll"
+			:style="{ height: scrollHeight }"
+			@scrolltolower="onScrollBottom"
+			:scroll-top="scrollTop"
+			:refresher-enabled="true"
+			:refresher-triggered="refreshing"
+			@refresherrefresh="onRefresh">
+			<slot></slot>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+const props = defineProps({
+	loading: { type: Boolean, default: false },
+	height: { type: String, default: '100vh' },
+	disabled: { type: Boolean, default: false },
+	successText: { type: String, default: '刷新成功' },
+	successDuration: { type: Number, default: 1000 }
+})
+const emit = defineEmits(['refresh', 'loadmore'])
+const refreshing = ref(false)
+const scrollTop = ref(0)
+const scrollHeight = ref(props.height)
+async function onRefresh() {
+	if (props.disabled) return
+	refreshing.value = true
+	emit('refresh')
+}
+function finishRefresh() {
+	refreshing.value = false
+	if (props.successText) {
+		uni.showToast({ title: props.successText, icon: 'none', duration: props.successDuration })
+	}
+}
+function onScrollBottom() { emit('loadmore') }
+// 支持通过 loading prop 控制刷新状态
+watch(() => props.loading, (v) => {
+	if (v) refreshing.value = true
+	else if (refreshing.value) finishRefresh()
+})
+defineExpose({ finishRefresh, startRefresh: () => { refreshing.value = true; emit('refresh') } })
+</script>
+
+<style lang="scss" scoped>
+.mu-pull-refresh {
+	&__scroll {
+		width: 100%;
+	}
+}
+</style>

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

@@ -0,0 +1,340 @@
+<template>
+	<view class="mu-qrcode" :style="containerStyle" @tap="handleQrClick">
+		<!-- 二维码视口容器 (全端极速纯净 Image + 离屏 Canvas，100% 秒扫识别 + 0 缝隙) -->
+		<view class="mu-qrcode__canvas-box" :style="{ width: `${sizeNumber}px`, height: `${sizeNumber}px` }">
+			<!-- 最终生成的高清 Base64 / 临时图片 (支持全端长按识别与秒扫) -->
+			<image
+				v-if="imgUrl"
+				class="mu-qrcode__img"
+				:src="imgUrl"
+				mode="aspectFit"
+				:style="{ width: `${sizeNumber}px`, height: `${sizeNumber}px` }"
+				:show-menu-by-longpress="true"
+			/>
+
+			<!-- 离屏 Canvas (后台快速离屏绘制生成图片) -->
+			<canvas
+				:canvas-id="canvasId"
+				:id="canvasId"
+				class="mu-qrcode__offscreen-canvas"
+				:style="{ width: `${sizeNumber * 4}px`, height: `${sizeNumber * 4}px` }"
+			/>
+
+			<!-- 中间 Logo 头像 (带白底防覆盖) -->
+			<view
+				v-if="logo && imgUrl"
+				class="mu-qrcode__logo-box"
+				:style="logoBoxStyle"
+			>
+				<image class="mu-qrcode__logo-img" :src="logo" mode="aspectFit" />
+			</view>
+		</view>
+
+		<!-- 底部说明文案 -->
+		<text v-if="text" class="mu-qrcode__text">{{ text }}</text>
+
+		<!-- 快捷操作按钮组 (下载/保存) -->
+		<view v-if="showDownload" class="mu-qrcode__actions" @tap.stop>
+			<view class="mu-qrcode__btn mu-touchable-flat" @tap="handleDownload">
+				<mu-icon name="download" :size="14" color="#171717" />
+				<text class="mu-qrcode__btn-text">保存二维码</text>
+			</view>
+		</view>
+
+		<!-- 全屏大图放大查看弹窗 -->
+		<mu-image-preview
+			v-model:show="previewShow"
+			:images="previewImages"
+		/>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted, getCurrentInstance } from 'vue'
+import QRCode from './qrcode.js'
+
+const props = defineProps({
+	value: { type: String, default: '' },                 // 待生成的二维码内容
+	size: { type: [Number, String], default: 180 },       // 尺寸 (px)
+	foreground: { type: String, default: '#000000' },    // 前景色/二维码暗块色
+	background: { type: String, default: '#FFFFFF' },    // 背景色
+	padding: { type: Number, default: 12 },               // 内边距 (px)
+	logo: { type: String, default: '' },                  // 中间 Logo 图片 URL
+	logoSize: { type: Number, default: 40 },              // Logo 尺寸 (px)
+	text: { type: String, default: '' },                  // 底部说明文本
+	preview: { type: Boolean, default: true },            // 点击是否放大查看
+	showDownload: { type: Boolean, default: false }       // 是否显示下载按钮
+})
+
+const emit = defineEmits(['click', 'success', 'fail', 'download'])
+
+const instance = getCurrentInstance()
+const canvasId = ref('mu_qr_cv_' + Math.floor(Math.random() * 1000000))
+const imgUrl = ref('')
+const previewShow = ref(false)
+
+const sizeNumber = computed(() => {
+	const n = Number(props.size)
+	return isNaN(n) ? 180 : n
+})
+
+const containerStyle = computed(() => ({
+	padding: '24rpx',
+	background: props.background,
+	borderRadius: '24rpx',
+	boxShadow: '0 8rpx 32rpx rgba(15, 23, 42, 0.06)'
+}))
+
+const logoBoxStyle = computed(() => ({
+	width: `${props.logoSize}px`,
+	height: `${props.logoSize}px`,
+	borderRadius: '16rpx',
+	background: '#FFFFFF',
+	padding: '4px',
+	boxShadow: '0 4rpx 16rpx rgba(0, 0, 0, 0.15)'
+}))
+
+const previewImages = computed(() => {
+	if (imgUrl.value) {
+		return [{ url: imgUrl.value, desc: props.text || props.value }]
+	}
+	return []
+})
+
+function renderQRCode() {
+	if (!props.value) return
+	try {
+		// 使用官方标准 qrcode-generator 引擎 (0: 自动识别版本大小, 'M': 15% 纠错率)
+		const qrcode = QRCode(0, 'M')
+		qrcode.addData(props.value)
+		qrcode.make()
+		const count = qrcode.getModuleCount()
+
+		// 定义 4 倍超清渲染像素倍率 (HD DPR)
+		const dpr = 4
+
+		// H5 模式直接使用 0 延迟 Base64 Canvas 导出图片，全平台 100% 没有任何缝隙
+		// #ifdef H5
+		const canvas = document.createElement('canvas')
+		const sz = sizeNumber.value * dpr
+		canvas.width = sz
+		canvas.height = sz
+		const ctx = canvas.getContext('2d')
+
+		const pad = props.padding * dpr
+		const drawSize = sz - pad * 2
+		const tile = drawSize / count
+
+		ctx.fillStyle = props.background
+		ctx.fillRect(0, 0, sz, sz)
+
+		ctx.fillStyle = props.foreground
+		for (let row = 0; row < count; row++) {
+			for (let col = 0; col < count; col++) {
+				if (qrcode.isDark(row, col)) {
+					const x = pad + col * tile
+					const y = pad + row * tile
+					// 消除抗锯齿缝隙
+					ctx.fillRect(x, y, tile + 0.5, tile + 0.5)
+				}
+			}
+		}
+
+		imgUrl.value = canvas.toDataURL('image/png')
+		emit('success')
+		// #endif
+
+		// 非 H5 模式使用 uni.createCanvasContext 导出图片
+		// #ifndef H5
+		const szNonH5 = sizeNumber.value * dpr
+		const padNonH5 = props.padding * dpr
+		const drawSizeNonH5 = szNonH5 - padNonH5 * 2
+		const tileNonH5 = drawSizeNonH5 / count
+
+		const uctx = uni.createCanvasContext(canvasId.value, (instance && instance.proxy))
+		uctx.setFillStyle(props.background)
+		uctx.fillRect(0, 0, szNonH5, szNonH5)
+
+		uctx.setFillStyle(props.foreground)
+		for (let row = 0; row < count; row++) {
+			for (let col = 0; col < count; col++) {
+				if (qrcode.isDark(row, col)) {
+					const x = Math.round(padNonH5 + col * tileNonH5)
+					const y = Math.round(padNonH5 + row * tileNonH5)
+					const w = Math.ceil((col + 1) * tileNonH5) - Math.floor(col * tileNonH5)
+					const h = Math.ceil((row + 1) * tileNonH5) - Math.floor(row * tileNonH5)
+					uctx.fillRect(x, y, w, h)
+				}
+			}
+		}
+
+		uctx.draw(false, () => {
+			setTimeout(() => {
+				uni.canvasToTempFilePath({
+					canvasId: canvasId.value,
+					destWidth: szNonH5,
+					destHeight: szNonH5,
+					success: (res) => {
+						imgUrl.value = res.tempFilePath
+						emit('success')
+					}
+				}, (instance && instance.proxy))
+			}, 150)
+		})
+		// #endif
+
+	} catch (e) {
+		console.error('[mu-qrcode] 生成出错:', e)
+		emit('fail', e)
+	}
+}
+
+function handleQrClick(e) {
+	emit('click', e)
+	if (props.preview) {
+		previewShow.value = true
+	}
+}
+
+function handleDownload() {
+	saveImage()
+}
+
+function saveImage() {
+	if (imgUrl.value) {
+		saveToAlbum(imgUrl.value)
+		return
+	}
+
+	uni.canvasToTempFilePath({
+		canvasId: canvasId.value,
+		success: (res) => {
+			saveToAlbum(res.tempFilePath)
+		},
+		fail: () => {
+			uni.showToast({ title: '导出图片失败', icon: 'none' })
+		}
+	}, (instance && instance.proxy))
+}
+
+function saveToAlbum(filePath) {
+	// #ifdef H5
+	try {
+		const a = document.createElement('a')
+		a.href = filePath
+		a.download = `qrcode_${Date.now()}.png`
+		document.body.appendChild(a)
+		a.click()
+		document.body.removeChild(a)
+		uni.showToast({ title: '已下载二维码图片', icon: 'success' })
+	} catch (e) {
+		uni.showToast({ title: '长按二维码保存到相册', icon: 'none' })
+	}
+	// #endif
+
+	// #ifndef H5
+	uni.saveImageToPhotosAlbum({
+		filePath,
+		success: () => {
+			uni.showToast({ title: '已保存到相册', icon: 'success' })
+			emit('download', { filePath })
+		},
+		fail: () => {
+			uni.showToast({ title: '保存失败或拒绝授权', icon: 'none' })
+		}
+	})
+	// #endif
+}
+
+onMounted(() => {
+	renderQRCode()
+})
+
+watch(() => [props.value, props.size, props.foreground, props.background], () => {
+	renderQRCode()
+})
+
+defineExpose({ renderQRCode, saveImage, openPreview: () => { previewShow.value = true } })
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-qrcode {
+	display: inline-flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	cursor: pointer;
+
+	&__canvas-box {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__img {
+		display: block;
+		object-fit: contain;
+	}
+
+	&__offscreen-canvas {
+		position: absolute;
+		left: -9999px;
+		top: -9999px;
+		opacity: 0;
+		pointer-events: none;
+	}
+
+	&__logo-box {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 3;
+		box-sizing: border-box;
+	}
+
+	&__logo-img {
+		width: 100%;
+		height: 100%;
+		border-radius: 12rpx;
+	}
+
+	&__text {
+		font-size: 24rpx;
+		color: #64748B;
+		font-weight: 600;
+		margin-top: 16rpx;
+		letter-spacing: 1rpx;
+	}
+
+	&__actions {
+		margin-top: 16rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__btn {
+		display: flex;
+		align-items: center;
+		padding: 8rpx 20rpx;
+		background: #F1F5F9;
+		border-radius: 999rpx;
+		cursor: pointer;
+
+		&-text {
+			font-size: 22rpx;
+			font-weight: 700;
+			color: #171717;
+			margin-left: 6rpx;
+		}
+	}
+}
+</style>