muzhiyu-ui 1.0.0

package/components/muzhiyu/mu-share-sheet/mu-share-sheet.vue

@@ -0,0 +1,269 @@
+<template>
+	<view v-if="visible" class="mu-share-sheet" @tap.stop>
+		<view class="mu-share-sheet__mask" :class="{ 'mu-share-sheet__mask--show': showAnim }" @tap="close"></view>
+		<view class="mu-share-sheet__panel" :class="{ 'mu-share-sheet__panel--show': showAnim }">
+			<view v-if="title" class="mu-share-sheet__header">
+				<text class="mu-share-sheet__title">{{ title }}</text>
+			</view>
+
+			<view class="mu-share-sheet__body">
+				<view v-for="(row, ri) in shareRows" :key="ri" class="mu-share-sheet__row">
+					<view
+						v-for="(item, idx) in row"
+						:key="idx"
+						class="mu-share-sheet__item mu-touchable-flat"
+						@tap="onSelect(item)"
+					>
+						<view class="mu-share-sheet__icon" :style="{ background: item.color || '#171717' }">
+							<!-- 图片图标 -->
+							<image v-if="item.img || item.image" class="mu-share-sheet__img" :src="item.img || item.image" mode="aspectFit" />
+							<!-- 矢量图标 -->
+							<mu-icon v-else-if="item.icon" :name="item.icon" :size="24" color="#ffffff" />
+							<!-- 单字备份图标 -->
+							<text v-else class="mu-share-sheet__icon-text">{{ getItemShortText(item) }}</text>
+						</view>
+						<text class="mu-share-sheet__name">{{ item.name || item.text }}</text>
+					</view>
+				</view>
+			</view>
+
+			<view v-if="showCancel" class="mu-share-sheet__footer mu-touchable-flat" @tap="close">
+				<text class="mu-share-sheet__cancel">{{ cancelText }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+/**
+ * mu-share-sheet 分享面板
+ * @description 底部弹出式多渠道分享面板，支持矢量图标、图片图标、单字微缩图标与多行排版
+ * @property {boolean} show - 是否显示面板
+ * @property {string} title - 标题
+ * @property {Array} options - 分享选项集合 [{name, icon, img, color}]
+ * @property {boolean} showCancel - 是否显示取消按键
+ * @property {string} cancelText - 取消按键文本
+ * @property {number} colCount - 每行显示的渠道列数 (默认 4)
+ * @event {Function} select - 选中某个分享渠道时触发
+ * @event {Function} close - 面板关闭时触发
+ */
+import { ref, computed, watch, nextTick } from 'vue'
+
+const props = defineProps({
+	show: { type: Boolean, default: false },
+	title: { type: String, default: '分享至' },
+	options: {
+		type: Array,
+		default: () => [
+			{ name: '微信好友', icon: 'message-circle', color: '#07C160' },
+			{ name: '朋友圈', icon: 'aperture', color: '#07C160' },
+			{ name: 'QQ 好友', icon: 'send', color: '#12B7F5' },
+			{ name: '新浪微博', icon: 'share-2', color: '#E6162D' },
+			{ name: '复制链接', icon: 'copy', color: '#171717' },
+			{ name: '生成海报', icon: 'image', color: '#6366F1' }
+		]
+	},
+	showCancel: { type: Boolean, default: true },
+	cancelText: { type: String, default: '取消' },
+	colCount: { type: Number, default: 4 }
+})
+
+const emit = defineEmits(['update:show', 'select', 'close'])
+const visible = ref(false)
+const showAnim = ref(false)
+
+watch(() => props.show, (v) => {
+	if (v) {
+		visible.value = true
+		nextTick(() => { setTimeout(() => { showAnim.value = true }, 20) })
+	} else {
+		showAnim.value = false
+		setTimeout(() => { visible.value = false }, 300)
+	}
+})
+
+const shareRows = computed(() => {
+	const rows = []
+	const opts = props.options || []
+	for (let i = 0; i < opts.length; i += props.colCount) {
+		rows.push(opts.slice(i, i + props.colCount))
+	}
+	return rows
+})
+
+function getItemShortText(item) {
+	const str = item.name || item.text || ''
+	return str.charAt(0)
+}
+
+function onSelect(item) {
+	emit('select', item)
+	close()
+}
+
+function close() {
+	emit('update:show', false)
+	showAnim.value = false
+	setTimeout(() => {
+		visible.value = false
+		emit('close')
+	}, 300)
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-share-sheet {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: $mu-z-popup;
+
+	&__mask {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: rgba(15, 23, 42, 0.45);
+		backdrop-filter: blur(8px);
+		opacity: 0;
+		transition: opacity 0.3s ease;
+
+		&--show {
+			opacity: 1;
+		}
+	}
+
+	&__panel {
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: #FFFFFF;
+		border-radius: 36rpx 36rpx 0 0;
+		transform: translateY(100%);
+		transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+		padding-bottom: env(safe-area-inset-bottom, 0);
+		box-shadow: 0 -12rpx 40rpx rgba(15, 23, 42, 0.12);
+		overflow: hidden;
+
+		&--show {
+			transform: translateY(0);
+		}
+	}
+
+	&__header {
+		padding: 32rpx 36rpx 20rpx;
+		text-align: center;
+		border-bottom: 1rpx solid rgba(226, 232, 240, 0.7);
+	}
+
+	&__title {
+		font-size: 26rpx;
+		color: #64748B;
+		font-weight: 700;
+		letter-spacing: -0.3rpx;
+	}
+
+	&__body {
+		padding: 36rpx 24rpx 12rpx;
+	}
+
+	&__row {
+		display: flex;
+		justify-content: flex-start;
+		margin-bottom: 24rpx;
+	}
+
+	&__item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 25%;
+		padding: 8rpx 0;
+		cursor: pointer;
+	}
+
+	&__icon {
+		width: 104rpx;
+		height: 104rpx;
+		border-radius: 28rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin-bottom: 14rpx;
+		box-shadow: 0 8rpx 20rpx rgba(15, 23, 42, 0.1);
+		transition: transform 0.15s ease;
+
+		&:active {
+			transform: scale(0.92);
+		}
+	}
+
+	&__img {
+		width: 52rpx;
+		height: 52rpx;
+	}
+
+	&__icon-text {
+		font-size: 32rpx;
+		color: #ffffff;
+		font-weight: 800;
+	}
+
+	&__name {
+		font-size: 24rpx;
+		color: $mu-text-primary;
+		font-weight: 600;
+		text-align: center;
+	}
+
+	&__footer {
+		padding: 28rpx 0;
+		border-top: 14rpx solid #F1F5F9;
+		text-align: center;
+		cursor: pointer;
+		background: #ffffff;
+
+		&:active {
+			background: rgba(99, 102, 241, 0.04);
+		}
+	}
+
+	&__cancel {
+		font-size: 28rpx;
+		color: #64748B;
+		font-weight: 800;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-share-sheet {
+		&__mask { background: rgba(0, 0, 0, 0.65); }
+		&__panel { background: #12121A !important; }
+		&__header { border-color: rgba(255, 255, 255, 0.08); }
+		&__title { color: #94A3B8; }
+		&__name { color: #FFFFFF !important; }
+		&__footer { background: #12121A !important; border-top-color: #08080C; }
+		&__cancel { color: #94A3B8; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-share-sheet {
+		&__mask { background: rgba(0, 0, 0, 0.65); }
+		&__panel { background: #12121A !important; }
+		&__header { border-color: rgba(255, 255, 255, 0.08); }
+		&__title { color: #94A3B8; }
+		&__name { color: #FFFFFF !important; }
+		&__footer { background: #12121A !important; border-top-color: #08080C; }
+		&__cancel { color: #94A3B8; }
+	}
+}
+</style>

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

@@ -0,0 +1,304 @@
+<template>
+	<view class="mu-sidebar" :style="{ width: formattedWidth }">
+		<scroll-view scroll-y class="mu-sidebar__scroll">
+			<view
+				v-for="(item, index) in options"
+				:key="index"
+				class="mu-sidebar__item"
+				:class="[
+					activeIndex === index && 'mu-sidebar__item--active',
+					`mu-sidebar__item--icon-${iconPosition}`
+				]"
+				@tap="onSelect(item, index)"
+			>
+				<view
+					v-if="activeIndex === index"
+					class="mu-sidebar__indicator"
+					:style="{ background: indicatorColor || '#171717' }"
+				></view>
+
+				<mu-badge :count="getItemBadge(item)" :dot="getItemDot(item)">
+					<view class="mu-sidebar__content" :class="[`mu-sidebar__content--${iconPosition}`]">
+						<!-- 矢量图标 -->
+						<mu-icon
+							v-if="isVectorIcon(item)"
+							:name="getItemIcon(item)"
+							:size="iconSize"
+							:color="index === activeIndex ? (activeColor || '#171717') : '#64748B'"
+							class="mu-sidebar__icon"
+						/>
+						<!-- 图片图标 (如阿水/奈雪/瑞幸餐饮点餐菜单分类图标) -->
+						<image
+							v-else-if="getItemImage(item)"
+							class="mu-sidebar__img"
+							:style="{ width: `${iconSize}rpx`, height: `${iconSize}rpx` }"
+							:src="getItemImage(item)"
+							mode="aspectFit"
+						/>
+
+						<text class="mu-sidebar__text" :style="getTextStyle(index)">
+							{{ getItemText(item) }}
+						</text>
+					</view>
+				</mu-badge>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+/**
+ * mu-sidebar 侧边导航
+ * @description 垂直导航栏，支持矢量图标/PNG图片(上下结构/平滑凹弧线过渡)、数字徽章与双向联动
+ * @property {Array} options - 导航项 [{name, icon, image, badge, dot}] 或 string[]
+ * @property {number} active - 当前激活索引
+ * @property {number|string} width - 宽度 rpx
+ * @property {number|string} iconSize - 图标尺寸 rpx
+ * @property {string} iconPosition - 图标与文字相对位置 ('top' 上下结构 | 'left' 左右结构)
+ * @property {string} activeColor - 激活颜色
+ * @property {string} indicatorColor - 指示条颜色
+ * @event {Function} change - 切换事件 (item, index)
+ */
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+	options: { type: Array, default: () => [] },
+	active: { type: Number, default: 0 },
+	width: { type: [Number, String], default: 180 },
+	iconSize: { type: [Number, String], default: 36 },
+	iconPosition: { type: String, default: 'top' },     // top (默认上下展示) | left (左右展示)
+	activeColor: { type: String, default: '' },
+	indicatorColor: { type: String, default: '#171717' }
+})
+
+const emit = defineEmits(['update:active', 'change'])
+const activeIndex = ref(props.active)
+
+const formattedWidth = computed(() => {
+	if (typeof props.width === 'number') return `${props.width}rpx`
+	if (typeof props.width === 'string') {
+		if (props.width.endsWith('rpx') || props.width.endsWith('px')) return props.width
+		return `${props.width}rpx`
+	}
+	return '180rpx'
+})
+
+watch(() => props.active, (v) => { activeIndex.value = v })
+
+function getItemText(item) {
+	if (typeof item === 'object' && item !== null) {
+		return item.name || item.title || item.label || String(item)
+	}
+	return String(item)
+}
+
+function getItemBadge(item) {
+	if (typeof item === 'object' && item !== null) return item.badge
+	return 0
+}
+
+function getItemDot(item) {
+	if (typeof item === 'object' && item !== null) return item.dot || false
+	return false
+}
+
+function getItemIcon(item) {
+	if (typeof item === 'object' && item !== null) return item.icon || ''
+	return ''
+}
+
+function getItemImage(item) {
+	if (typeof item === 'object' && item !== null) return item.image || item.img || ''
+	return ''
+}
+
+function isVectorIcon(item) {
+	const iconStr = getItemIcon(item)
+	if (!iconStr) return false
+	return !iconStr.includes('/') && !/\.(png|jpg|jpeg|gif|svg|webp)$/i.test(iconStr)
+}
+
+function getTextStyle(index) {
+	if (index === activeIndex.value && props.activeColor) {
+		return { color: props.activeColor }
+	}
+	return {}
+}
+
+function onSelect(item, index) {
+	activeIndex.value = index
+	emit('update:active', index)
+	emit('change', item, index)
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-sidebar {
+	height: 100%;
+	background: #F1F5F9;
+
+	&__scroll {
+		height: 100%;
+	}
+
+	&__item {
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 24rpx 12rpx;
+		background: #F1F5F9;
+		transition: all 0.2s ease;
+		cursor: pointer;
+
+		&--active {
+			background: #FFFFFF !important;
+			font-weight: 700;
+			z-index: 2;
+
+			.mu-sidebar__text {
+				color: #171717;
+				font-weight: 700;
+			}
+
+			/* 右侧右上角与右下角倒角弧度 (与右侧白色内容区极奢凹弧度过渡) */
+			&::before {
+				content: '';
+				position: absolute;
+				top: -24rpx;
+				right: 0;
+				width: 24rpx;
+				height: 24rpx;
+				background: transparent;
+				border-bottom-right-radius: 24rpx;
+				box-shadow: 8rpx 8rpx 0 8rpx #FFFFFF;
+				pointer-events: none;
+				z-index: 2;
+			}
+
+			&::after {
+				content: '';
+				position: absolute;
+				bottom: -24rpx;
+				right: 0;
+				width: 24rpx;
+				height: 24rpx;
+				background: transparent;
+				border-top-right-radius: 24rpx;
+				box-shadow: 8rpx -8rpx 0 8rpx #FFFFFF;
+				pointer-events: none;
+				z-index: 2;
+			}
+		}
+	}
+
+	&__indicator {
+		position: absolute;
+		left: 0;
+		top: 50%;
+		transform: translateY(-50%);
+		width: 6rpx;
+		height: 36rpx;
+		border-radius: 0 6rpx 6rpx 0;
+		z-index: 3;
+	}
+
+	&__content {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		&--top {
+			flex-direction: column;
+			gap: 8rpx;
+		}
+
+		&--left {
+			flex-direction: row;
+			gap: 10rpx;
+		}
+	}
+
+	&__icon {
+		flex-shrink: 0;
+	}
+
+	&__img {
+		flex-shrink: 0;
+		display: block;
+	}
+
+	&__text {
+		font-size: 24rpx;
+		color: #64748B;
+		text-align: center;
+		line-height: 1.3;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-sidebar {
+		background: #0D0D14 !important;
+
+		&__item {
+			background: #0D0D14 !important;
+
+			&--active {
+				background: #181824 !important;
+
+				&::before {
+					box-shadow: 8rpx 8rpx 0 8rpx #181824 !important;
+				}
+
+				&::after {
+					box-shadow: 8rpx -8rpx 0 8rpx #181824 !important;
+				}
+
+				.mu-sidebar__text {
+					color: #FFFFFF !important;
+					font-weight: 700;
+				}
+			}
+		}
+
+		&__text {
+			color: #94A3B8;
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-sidebar {
+		background: #0D0D14 !important;
+
+		&__item {
+			background: #0D0D14 !important;
+
+			&--active {
+				background: #181824 !important;
+
+				&::before {
+					box-shadow: 8rpx 8rpx 0 8rpx #181824 !important;
+				}
+
+				&::after {
+					box-shadow: 8rpx -8rpx 0 8rpx #181824 !important;
+				}
+
+				.mu-sidebar__text {
+					color: #FFFFFF !important;
+					font-weight: 700;
+				}
+			}
+		}
+
+		&__text {
+			color: #94A3B8;
+		}
+	}
+}
+</style>