muzhiyu-ui 1.0.0

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

@@ -0,0 +1,431 @@
+<template>
+	<view class="mu-button" :class="buttonClass" :style="wrapStyle" @tap="handleClick" @click="handleClick">
+		<button
+			class="mu-button__inner"
+			hover-class="mu-button__inner--active"
+			:hover-stay-time="150"
+			:style="innerStyle"
+			:disabled="disabled"
+			:loading="loading"
+			:form-type="formType"
+			:open-type="openType"
+			:lang="lang"
+			:session-from="sessionFrom"
+			:send-message-title="sendMessageTitle"
+			:send-message-path="sendMessagePath"
+			:send-message-img="sendMessageImg"
+			:show-message-card="showMessageCard"
+			:app-parameter="appParameter"
+			@tap="handleClick"
+			@click="handleClick"
+			@getuserinfo="onGetUserInfo"
+			@getphonenumber="onGetPhoneNumber"
+			@getrealtimephonenumber="onGetRealtimePhoneNumber"
+			@agreeprivacyauthorization="onAgreePrivacyAuthorization"
+			@contact="onContact"
+			@error="onError"
+			@opensetting="onOpenSetting"
+			@launchapp="onLaunchApp"
+			@chooseavatar="onChooseAvatar"
+		>
+			<!-- Loading 加载图标 -->
+			<mu-loading v-if="loading" :size="computedIconSize" :color="defaultIconColor" :margin-right="hasLabel ? 10 : 0" />
+
+			<!-- 左侧矢量图标 -->
+			<view v-if="!loading && (icon || $slots.icon) && iconPosition === 'left'" class="mu-button__icon mu-button__icon--left">
+				<slot name="icon">
+					<mu-icon :name="icon" :size="computedIconSize" :color="defaultIconColor" />
+				</slot>
+			</view>
+
+			<!-- 按钮文本 -->
+			<span v-if="hasLabel" class="mu-button__label">
+				<slot></slot>
+			</span>
+
+			<!-- 右侧矢量图标 -->
+			<view v-if="!loading && (icon || $slots.icon) && iconPosition === 'right'" class="mu-button__icon mu-button__icon--right">
+				<slot name="icon">
+					<mu-icon :name="icon" :size="computedIconSize" :color="defaultIconColor" />
+				</slot>
+			</view>
+
+			<!-- 右侧内嵌纯矢量箭头 -->
+			<view v-if="showArrow && !loading" class="mu-button__arrow-icon">
+				<mu-icon name="arrow_right" :size="computedIconSize" :color="defaultIconColor" />
+			</view>
+		</button>
+	</view>
+</template>
+
+<script setup>
+import { computed, useSlots, inject } from 'vue'
+
+const config = inject('muConfig', null)
+
+const props = defineProps({
+	type: { type: String, default: 'primary' },  // primary | default | danger | warning | success | text | link
+	size: { type: String, default: 'medium' },   // large | medium | small | mini
+	icon: { type: String, default: '' },        // 矢量图标名称
+	iconColor: { type: String, default: '' },
+	iconSize: { type: [Number, String], default: 0 },
+	iconPosition: { type: String, default: 'left' },
+	width: { type: String, default: '' },
+	height: { type: String, default: '' },
+	plain: { type: Boolean, default: false },
+	round: { type: Boolean, default: false },
+	block: { type: Boolean, default: false },
+	ghost: { type: Boolean, default: false },
+	dashed: { type: Boolean, default: false },
+	loading: { type: Boolean, default: false },
+	disabled: { type: Boolean, default: false },
+	bold: { type: Boolean, default: true },
+	showArrow: { type: Boolean, default: false },
+	formType: { type: String, default: '' },
+	openType: { type: String, default: '' },
+
+	// 小程序开放能力扩展属性
+	lang: { type: String, default: 'zh_CN' },
+	sessionFrom: { type: String, default: '' },
+	sendMessageTitle: { type: String, default: '' },
+	sendMessagePath: { type: String, default: '' },
+	sendMessageImg: { type: String, default: '' },
+	showMessageCard: { type: Boolean, default: false },
+	appParameter: { type: String, default: '' },
+
+	margin: { type: String, default: '' },
+	padding: { type: String, default: '' },
+	background: { type: String, default: '' },
+	color: { type: String, default: '' },
+	gradient: { type: [String, Array], default: '' },  // 支持双色数组 ['#171717', '#4F46E5'] 或完整 css 渐变
+	glow: { type: Boolean, default: true }       // 是否开启弥散光晕发光效果
+})
+
+const emit = defineEmits([
+	'click',
+	'getuserinfo',
+	'getphonenumber',
+	'getrealtimephonenumber',
+	'agreeprivacyauthorization',
+	'contact',
+	'error',
+	'opensetting',
+	'launchapp',
+	'chooseavatar'
+])
+const slots = useSlots()
+
+const hasLabel = computed(() => {
+	if (!slots.default) return false
+	if (typeof slots.default === 'function') {
+		try {
+			const defaultNodes = slots.default()
+			if (!defaultNodes || !defaultNodes.length) return false
+			return defaultNodes.some(node => {
+				if (typeof node.children === 'string') {
+					return node.children.trim().length > 0
+				}
+				return !!node.type
+			})
+		} catch (e) {
+			return true
+		}
+	}
+	return true
+})
+
+const normalizedSize = computed(() => {
+	switch (props.size) {
+		case 'lg':
+		case 'large': return 'large'
+		case 'sm':
+		case 'small': return 'small'
+		case 'xs':
+		case 'mini': return 'mini'
+		case 'md':
+		case 'medium':
+		default: return 'medium'
+	}
+})
+
+const computedIconSize = computed(() => {
+	if (props.iconSize) return Number(props.iconSize)
+	switch (normalizedSize.value) {
+		case 'large': return 20
+		case 'small': return 14
+		case 'mini': return 12
+		case 'medium':
+		default: return 16
+	}
+})
+
+const defaultIconColor = computed(() => {
+	if (props.iconColor) return props.iconColor
+	if (props.color) return props.color
+	if (props.plain) {
+		switch (props.type) {
+			case 'primary': return config?.primaryColor?.value || '#171717'
+			case 'danger': return '#F43F5E'
+			case 'warning': return '#F59E0B'
+			case 'success': return '#10B981'
+			default: return '#64748B'
+		}
+	}
+	if (props.type === 'default' || props.type === 'text' || props.type === 'link') return '#475569'
+	return '#ffffff'
+})
+
+const buttonClass = computed(() => [
+	`mu-button--${props.type}`,
+	`mu-button--${normalizedSize.value}`,
+	props.plain && 'mu-button--plain',
+	props.round && 'mu-button--round',
+	props.block && 'mu-button--block',
+	props.ghost && 'mu-button--ghost',
+	props.dashed && 'mu-button--dashed',
+	props.loading && 'mu-button--loading',
+	props.disabled && 'mu-button--disabled',
+	props.bold && 'mu-button--bold',
+	!props.glow && 'mu-button--no-glow',
+	(!hasLabel.value && (props.icon || slots.icon)) && 'mu-button--icon-only'
+])
+
+const wrapStyle = computed(() => {
+	const style = {}
+	if (props.block) style.width = '100%'
+	if (props.margin) style.margin = props.margin
+	return style
+})
+
+const innerStyle = computed(() => {
+	const style = {}
+	if (props.width) style.width = props.width
+	if (props.height) style.height = props.height
+	if (props.padding) style.padding = props.padding
+
+	if (props.type === 'primary' && !props.background && !props.gradient && config?.primaryColor?.value) {
+		style.background = config.primaryColor.value
+	} else if (props.gradient) {
+		if (Array.isArray(props.gradient)) {
+			style.background = `linear-gradient(135deg, ${props.gradient[0]} 0%, ${props.gradient[1]} 100%)`
+		} else if (typeof props.gradient === 'string') {
+			style.background = props.gradient.includes('gradient')
+				? props.gradient
+				: `linear-gradient(135deg, ${props.gradient.split(',').join(', ')})`
+		}
+		if (props.glow && !props.plain) {
+			style.boxShadow = '0 8rpx 24rpx rgba(0, 0, 0, 0.2)'
+		}
+	} else if (props.background) {
+		style.background = props.background
+		if (props.glow && !props.plain) {
+			style.boxShadow = '0 8rpx 24rpx rgba(0, 0, 0, 0.18)'
+		}
+	}
+	if (props.color) {
+		style.color = props.color
+	}
+	return style
+})
+
+function handleClick(e) {
+	if (props.disabled || props.loading) return
+	emit('click', e)
+}
+
+function onGetUserInfo(e) { emit('getuserinfo', e) }
+function onGetPhoneNumber(e) { emit('getphonenumber', e) }
+function onGetRealtimePhoneNumber(e) { emit('getrealtimephonenumber', e) }
+function onAgreePrivacyAuthorization(e) { emit('agreeprivacyauthorization', e) }
+function onContact(e) { emit('contact', e) }
+function onError(e) { emit('error', e) }
+function onOpenSetting(e) { emit('opensetting', e) }
+function onLaunchApp(e) { emit('launchapp', e) }
+function onChooseAvatar(e) { emit('chooseavatar', e) }
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-button {
+	display: inline-block;
+	vertical-align: middle;
+	box-sizing: border-box;
+
+	&--block {
+		display: block;
+		width: 100%;
+	}
+
+	&__inner {
+		position: relative;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		box-sizing: border-box;
+		white-space: nowrap;
+		cursor: pointer;
+		user-select: none;
+		transition: all $mu-duration $mu-ease;
+		border: none;
+		outline: none;
+		line-height: 1;
+
+		/* 微信小程序原生按钮重置 */
+		&::after {
+			display: none;
+		}
+
+		&--active {
+			transform: scale(0.975);
+			opacity: 0.92;
+		}
+	}
+
+	&__label {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 1.2;
+	}
+
+	&__icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 1;
+		flex-shrink: 0;
+
+		&--left { margin-right: 8rpx; }
+		&--right { margin-left: 8rpx; }
+	}
+
+	&--icon-only &__icon {
+		margin-left: 0 !important;
+		margin-right: 0 !important;
+	}
+	&--icon-only &__inner {
+		padding-left: 0 !important;
+		padding-right: 0 !important;
+	}
+	&--icon-only#{&}--large &__inner { width: 96rpx; }
+	&--icon-only#{&}--medium &__inner { width: 80rpx; }
+	&--icon-only#{&}--small &__inner { width: 64rpx; }
+	&--icon-only#{&}--mini &__inner { width: 48rpx; }
+
+	&__arrow-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		margin-left: 8rpx;
+		transition: transform $mu-duration $mu-ease;
+		color: inherit;
+		line-height: 1;
+		flex-shrink: 0;
+	}
+
+	/* 标准尺寸规范 */
+	&--large &__inner {
+		height: 96rpx; padding: 0 36rpx; font-size: $mu-font-lg; border-radius: $mu-radius-lg;
+	}
+	&--medium &__inner {
+		height: 80rpx; padding: 0 24rpx; font-size: $mu-font-base; border-radius: $mu-radius-md;
+	}
+	&--small &__inner {
+		height: 64rpx; padding: 0 18rpx; font-size: $mu-font-sm; border-radius: $mu-radius-sm;
+	}
+	&--mini &__inner {
+		height: 48rpx; padding: 0 12rpx; font-size: $mu-font-xs; border-radius: $mu-radius-sm;
+	}
+
+	&--round &__inner { border-radius: 999rpx !important; }
+	&--bold &__inner { font-weight: 700; }
+
+	/* 主题发光弥散光晕 */
+	&--primary &__inner {
+		background: $mu-primary-gradient; color: #ffffff;
+		box-shadow: 0 8rpx 24rpx -4rpx rgba(23, 23, 23, 0.2);
+	}
+	&--gradient &__inner {
+		background: linear-gradient(135deg, #171717 0%, #4F46E5 100%);
+		color: #ffffff;
+		box-shadow: 0 8rpx 24rpx -4rpx rgba(79, 70, 229, 0.35);
+	}
+	&--danger &__inner,
+	&--error &__inner {
+		background: $mu-error-gradient; color: #ffffff;
+		box-shadow: 0 8rpx 24rpx -4rpx rgba(244, 63, 94, 0.35);
+	}
+	&--warning &__inner {
+		background: $mu-warning-gradient; color: #ffffff;
+		box-shadow: 0 8rpx 24rpx -4rpx rgba(245, 158, 11, 0.35);
+	}
+	&--success &__inner {
+		background: $mu-success-gradient; color: #ffffff;
+		box-shadow: 0 8rpx 24rpx -4rpx rgba(16, 185, 129, 0.35);
+	}
+	&--default &__inner {
+		background: #ffffff; color: $mu-text-primary;
+		border: 1rpx solid $mu-border;
+		box-shadow: 0 4rpx 14rpx rgba(15, 23, 42, 0.04);
+	}
+	&--text &__inner {
+		background: transparent; color: $mu-primary; padding: 0; height: auto; box-shadow: none !important;
+	}
+	&--text#{&}--danger &__inner,
+	&--text#{&}--error &__inner {
+		color: $mu-error !important;
+	}
+	&--text#{&}--success &__inner {
+		color: $mu-success !important;
+	}
+	&--text#{&}--warning &__inner {
+		color: $mu-warning !important;
+	}
+
+	&--plain#{&}--primary &__inner { background: rgba(23, 23, 23, 0.06); color: #171717; border: 1rpx solid rgba(23, 23, 23, 0.2); box-shadow: none; }
+	&--plain#{&}--danger &__inner,
+	&--plain#{&}--error &__inner { background: rgba(244, 63, 94, 0.08); color: $mu-error; border: 1rpx solid rgba(244, 63, 94, 0.3); box-shadow: none; }
+
+	/* 关闭发光光晕模式 */
+	&--no-glow &__inner {
+		box-shadow: none !important;
+	}
+
+	&--disabled {
+		opacity: $mu-opacity-disabled; pointer-events: none;
+	}
+}
+
+.mu-dark, page.mu-dark {
+	.mu-button {
+		&--default &__inner {
+			background: rgba(36, 36, 50, 0.9);
+			color: $mu-dark-text-primary;
+			border-color: rgba(255, 255, 255, 0.15);
+			box-shadow: none;
+		}
+		&--plain#{&}--primary &__inner {
+			background: rgba(255, 255, 255, 0.1);
+			color: #F8FAFC;
+			border-color: rgba(255, 255, 255, 0.25);
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.mu-button {
+		&--default &__inner {
+			background: rgba(36, 36, 50, 0.9);
+			color: $mu-dark-text-primary;
+			border-color: rgba(255, 255, 255, 0.15);
+			box-shadow: none;
+		}
+		&--plain#{&}--primary &__inner {
+			background: rgba(255, 255, 255, 0.1);
+			color: #F8FAFC;
+			border-color: rgba(255, 255, 255, 0.25);
+		}
+	}
+}
+</style>