muzhiyu-ui 1.0.0

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

@@ -0,0 +1,339 @@
+<template>
+	<view
+		class="mu-tabs"
+		:class="[
+			scrollable && 'mu-tabs--scroll',
+			variant && `mu-tabs--${variant}`,
+			`mu-tabs--align-${computedAlign}`,
+			jelly && 'mu-tabs--jelly'
+		]"
+		:style="tabsStyle"
+	>
+		<scroll-view scroll-x class="mu-tabs__scroll" :scroll-left="scrollLeft" scroll-with-animation :show-scrollbar="false">
+			<view
+				class="mu-tabs__wrap"
+				:class="[
+					scrollable && 'mu-tabs__wrap--scrollable',
+					`mu-tabs__wrap--align-${computedAlign}`
+				]"
+			>
+				<view
+					v-for="(item, index) in computedTabs"
+					:key="index"
+					class="mu-tabs__item mu-touchable-flat"
+					:class="[
+						index === currentIndex && 'mu-tabs__item--active',
+						variant === 'pill' && index === currentIndex && 'mu-tabs__item--pill-active'
+					]"
+					:style="getItemStyle(index)"
+					:id="'mu-tab-' + index"
+					@tap="handleClick(index, item)"
+				>
+					<text class="mu-tabs__text" :style="getTextStyle(index)">
+						{{ getItemText(item) }}
+					</text>
+					<!-- 底部移动滑块指示线条 (仅在 line 变体且显示指示线时) -->
+					<view
+						v-if="variant !== 'pill' && showLine && index === currentIndex"
+						class="mu-tabs__line"
+						:class="[jelly && 'mu-tabs__line--jelly']"
+						:style="lineStyle"
+					></view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+export default {
+	options: {
+		virtualHost: true
+	}
+}
+</script>
+
+<script setup>
+import { ref, computed, watch, nextTick } from 'vue'
+
+const props = defineProps({
+	tabs: { type: Array, default: () => [] },
+	items: { type: Array, default: () => [] },            // 兼容 items 与 tabs
+	current: { type: Number, default: 0 },
+	value: { type: [Number, String], default: null },       // 兼容 v-model
+	modelValue: { type: [Number, String], default: null },  // Vue3 v-model 语法糖
+	showLine: { type: Boolean, default: true },
+	lineColor: { type: String, default: '' },
+	lineWidth: { type: String, default: '36rpx' },
+	lineHeight: { type: String, default: '6rpx' },
+	scrollable: { type: Boolean, default: false },
+	center: { type: Boolean, default: false },
+	align: { type: String, default: 'center' },          // left | center | right | space-around
+	gutter: { type: [Number, String], default: 24 },
+	activeColor: { type: String, default: '' },
+	color: { type: String, default: '' },
+	bold: { type: Boolean, default: true },
+	variant: { type: String, default: 'line' },          // line (下划线) | pill (胶囊)
+	jelly: { type: Boolean, default: true },             // 是否开启“吸吸冻”Q弹果冻拉伸切换动效
+	sticky: { type: Boolean, default: false },
+	offsetTop: { type: [Number, String], default: 0 },
+	zIndex: { type: [Number, String], default: 99 }
+})
+
+const emit = defineEmits(['change', 'update:current', 'update:modelValue', 'update:value'])
+
+const scrollLeft = ref(0)
+
+const computedTabs = computed(() => {
+	if (props.items && props.items.length > 0) return props.items
+	if (props.tabs && props.tabs.length > 0) return props.tabs
+	return []
+})
+
+const currentIndex = computed(() => {
+	if (props.modelValue !== null && props.modelValue !== undefined) return Number(props.modelValue)
+	if (props.value !== null && props.value !== undefined) return Number(props.value)
+	return Number(props.current) || 0
+})
+
+function getItemText(item) {
+	if (typeof item === 'object' && item !== null) {
+		return item.name || item.title || item.label || String(item)
+	}
+	return String(item)
+}
+
+const tabsStyle = computed(() => {
+	if (!props.sticky) return {}
+	let topVal = '0px'
+	if (typeof props.offsetTop === 'number') {
+		topVal = props.offsetTop === 0 ? '0px' : `${props.offsetTop}rpx`
+	} else if (props.offsetTop) {
+		topVal = String(props.offsetTop)
+	}
+
+	const style = {
+		position: 'sticky',
+		zIndex: props.zIndex
+	}
+	// #ifndef H5
+	style.top = topVal
+	// #endif
+
+	// #ifdef H5
+	style.top = `calc(var(--window-top, 0px) + ${topVal})`
+	// #endif
+	return style
+})
+
+const computedAlign = computed(() => {
+	if (props.center) return 'center'
+	return props.align || 'center'
+})
+
+function getItemStyle(index) {
+	const g = Number(props.gutter)
+	const style = {
+		paddingLeft: `${g}rpx`,
+		paddingRight: `${g}rpx`
+	}
+	if (props.variant === 'pill' && index === currentIndex.value) {
+		style.background = props.activeColor || '#171717'
+		style.borderRadius = '999rpx'
+	}
+	return style
+}
+
+function getTextStyle(index) {
+	if (index === currentIndex.value) {
+		if (props.variant === 'pill') {
+			return {
+				color: '#ffffff',
+				fontWeight: props.bold ? '800' : '600'
+			}
+		}
+		return {
+			color: props.activeColor || '#171717',
+			fontWeight: props.bold ? '800' : '600'
+		}
+	}
+	return {
+		color: props.color || '#64748B',
+		fontWeight: '400'
+	}
+}
+
+const lineStyle = computed(() => {
+	const activeColor = props.lineColor || props.activeColor || '#171717'
+	return {
+		width: props.lineWidth,
+		height: props.lineHeight,
+		backgroundColor: activeColor
+	}
+})
+
+function handleClick(index, item) {
+	emit('change', { index, item })
+	emit('update:current', index)
+	emit('update:modelValue', index)
+	emit('update:value', index)
+}
+
+watch(currentIndex, (val) => {
+	nextTick(() => {
+		scrollLeft.value = val * 45
+	})
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-tabs {
+	background: #FFFFFF;
+	position: relative;
+	border-bottom: 1rpx solid rgba(241, 245, 249, 0.9);
+	width: 100%;
+	box-sizing: border-box;
+
+	&--pill {
+		border-bottom: none;
+		background: transparent;
+	}
+
+	&__scroll {
+		white-space: nowrap;
+		width: 100%;
+	}
+
+	&__wrap {
+		display: flex;
+		align-items: center;
+		position: relative;
+		width: 100%;
+		box-sizing: border-box;
+
+		/* 对齐方式定义 */
+		&--align-left {
+			justify-content: flex-start;
+		}
+
+		&--align-center {
+			justify-content: center;
+		}
+
+		&--align-right {
+			justify-content: flex-end;
+		}
+
+		&--align-space-around {
+			justify-content: space-around;
+		}
+
+		&--scrollable {
+			display: inline-flex;
+			min-width: 100%;
+		}
+	}
+
+	&__item {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		height: 76rpx;
+		cursor: pointer;
+		transition: all $mu-duration $mu-ease;
+		position: relative;
+		flex-shrink: 0;
+
+		&--pill-active {
+			height: 64rpx;
+			margin: 6rpx 0;
+			box-shadow: 0 4rpx 14rpx rgba(15, 23, 42, 0.12);
+			animation: mu-pill-jelly 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
+		}
+	}
+
+	&__text {
+		font-size: 26rpx;
+		color: #64748B;
+		font-weight: 500;
+		transition: all $mu-duration $mu-ease;
+	}
+
+	&__line {
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		transform: translateX(-50%);
+		border-radius: 999rpx;
+		background: #171717;
+		box-shadow: none;
+		animation: mu-tabs-line-in 0.25s $mu-ease;
+
+		&--jelly {
+			animation: mu-tabs-jelly 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
+		}
+	}
+}
+
+/* “吸吸冻”Q弹果冻拉伸动画帧 */
+@keyframes mu-tabs-jelly {
+	0% {
+		opacity: 0.4;
+		transform: translateX(-50%) scale(0.3, 1.4);
+	}
+	40% {
+		opacity: 1;
+		transform: translateX(-50%) scale(1.45, 0.6);
+	}
+	70% {
+		transform: translateX(-50%) scale(0.88, 1.12);
+	}
+	85% {
+		transform: translateX(-50%) scale(1.06, 0.96);
+	}
+	100% {
+		opacity: 1;
+		transform: translateX(-50%) scale(1, 1);
+	}
+}
+
+@keyframes mu-pill-jelly {
+	0% {
+		transform: scale(0.8, 1.2);
+	}
+	45% {
+		transform: scale(1.15, 0.85);
+	}
+	75% {
+		transform: scale(0.95, 1.05);
+	}
+	100% {
+		transform: scale(1, 1);
+	}
+}
+
+@keyframes mu-tabs-line-in {
+	from { opacity: 0; transform: translateX(-50%) scaleX(0.3); }
+	to { opacity: 1; transform: translateX(-50%) scaleX(1); }
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-tabs {
+		background: #14141E !important;
+		border-color: rgba(255, 255, 255, 0.08);
+		&__text { color: #94A3B8; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-tabs {
+		background: #14141E !important;
+		border-color: rgba(255, 255, 255, 0.08);
+		&__text { color: #94A3B8; }
+	}
+}
+</style>

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

@@ -0,0 +1,65 @@
+<template>
+	<view class="mu-tag" :class="tagClass" :style="tagStyle" @tap="handleClick">
+		<text class="mu-tag__text"><slot></slot></text>
+		<text v-if="closable" class="mu-tag__close" @tap.stop="handleClose">✕</text>
+	</view>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+const props = defineProps({
+	type: { type: String, default: 'default' },
+	size: { type: String, default: 'medium' },
+	plain: { type: Boolean, default: false },
+	round: { type: Boolean, default: false },
+	closable: { type: Boolean, default: false },
+	background: { type: String, default: '' },
+	color: { type: String, default: '' }
+})
+const emit = defineEmits(['click', 'close'])
+const tagClass = computed(() => [
+	`mu-tag--${props.type}`, `mu-tag--${props.size}`,
+	props.plain && 'mu-tag--plain', props.round && 'mu-tag--round'
+])
+const tagStyle = computed(() => ({
+	...(props.background ? { background: props.background, borderColor: props.background } : {}),
+	...(props.color ? { color: props.color } : {})
+}))
+function handleClick(e) { emit('click', e) }
+function handleClose(e) { emit('close', e) }
+</script>
+
+<style lang="scss" scoped>
+.mu-tag {
+	display: inline-flex;
+	align-items: center;
+	border: 1rpx solid transparent;
+	transition: all $mu-duration $mu-ease;
+	white-space: nowrap;
+	font-weight: 600;
+
+	&--medium { padding: 6rpx 20rpx; font-size: $mu-font-sm; border-radius: $mu-radius-md; }
+	&--small { padding: 4rpx 14rpx; font-size: $mu-font-xs; border-radius: $mu-radius-sm; }
+	&--round { border-radius: $mu-radius-full; }
+
+	&--default { background: $mu-bg-gray; color: $mu-text-primary; border-color: $mu-border; }
+	&--primary { background: rgba(22, 93, 255, 0.08); color: $mu-primary; border-color: rgba(22, 93, 255, 0.18); }
+	&--success { background: rgba(0, 180, 42, 0.08); color: $mu-success; border-color: rgba(0, 180, 42, 0.18); }
+	&--warning { background: rgba(255, 125, 0, 0.08); color: $mu-warning; border-color: rgba(255, 125, 0, 0.18); }
+	&--error { background: rgba(245, 63, 63, 0.08); color: $mu-error; border-color: rgba(245, 63, 63, 0.18); }
+
+	&--plain.mu-tag--primary { background: transparent; }
+	&--plain.mu-tag--success { background: transparent; }
+	&--plain.mu-tag--warning { background: transparent; }
+	&--plain.mu-tag--error { background: transparent; }
+	&--plain.mu-tag--default { background: transparent; }
+
+	&__close {
+		margin-left: 10rpx;
+		font-size: 20rpx;
+		cursor: pointer;
+		opacity: 0.6;
+		&:active { opacity: 1; }
+	}
+}
+</style>

package/components/muzhiyu/mu-text-ellipsis/mu-text-ellipsis.vue

@@ -0,0 +1,54 @@
+<template>
+	<view class="mu-text-ellipsis">
+		<text class="mu-text-ellipsis__text" :class="{ 'mu-text-ellipsis__text--expanded': expanded }"
+			:style="{ '-webkit-line-clamp': expanded ? 'none' : rows }">
+			<slot>{{ text }}</slot>
+		</text>
+		<text v-if="expandable" class="mu-text-ellipsis__action" @tap="toggle">
+			{{ expanded ? collapseText : expandText }}
+		</text>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+	text: { type: String, default: '' },
+	rows: { type: [Number, String], default: 3 },
+	expandable: { type: Boolean, default: true },
+	expandText: { type: String, default: '展开' },
+	collapseText: { type: String, default: '收起' }
+})
+
+const emit = defineEmits(['change', 'click-action'])
+
+const expanded = ref(false)
+
+function toggle() {
+	expanded.value = !expanded.value
+	emit('change', expanded.value)
+	emit('click-action', expanded.value)
+}
+</script>
+
+<style lang="scss" scoped>
+.mu-text-ellipsis {
+	&__text {
+		font-size: $mu-font-base; color: $mu-text-primary;
+		line-height: $mu-line-height;
+		display: -webkit-box;
+		-webkit-box-orient: vertical;
+		overflow: hidden;
+		word-break: break-all;
+		&--expanded {
+			display: block;
+			-webkit-line-clamp: none !important;
+		}
+	}
+	&__action {
+		font-size: $mu-font-sm; color: $mu-primary;
+		cursor: pointer; margin-top: 8rpx; display: inline-block;
+	}
+}
+</style>

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

@@ -0,0 +1,166 @@
+<template>
+	<view class="mu-timeline">
+		<view
+			v-for="(item, index) in items"
+			:key="index"
+			class="mu-timeline__item"
+			:class="[
+				index === items.length - 1 && 'mu-timeline__item--last',
+				index === 0 && 'mu-timeline__item--first'
+			]"
+		>
+			<!-- 左侧轴线区域 -->
+			<view class="mu-timeline__rail">
+				<view class="mu-timeline__dot" :style="getDotStyle(item, index)">
+					<slot :name="`dot-${index}`">
+						<mu-icon v-if="item.icon" :name="item.icon" :size="12" color="#ffffff" />
+					</slot>
+				</view>
+				<view v-if="index < items.length - 1" class="mu-timeline__line"></view>
+			</view>
+
+			<!-- 右侧内容区域 -->
+			<view class="mu-timeline__body">
+				<!-- 标题行 -->
+				<view v-if="item.title" class="mu-timeline__title-row">
+					<text class="mu-timeline__title" :class="{ 'mu-timeline__title--active': index === 0 }">{{ item.title }}</text>
+				</view>
+
+				<!-- 描述内容 -->
+				<view v-if="item.content || $slots[`content-${index}`]" class="mu-timeline__content">
+					<slot :name="`content-${index}`" :item="item">
+						<text class="mu-timeline__desc">{{ item.content }}</text>
+					</slot>
+				</view>
+
+				<!-- 时间戳 -->
+				<view v-if="item.time" class="mu-timeline__time">
+					<text class="mu-timeline__time-text">{{ item.time }}</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+const props = defineProps({
+	items: { type: Array, default: () => [] },
+	dotColor: { type: String, default: '' },
+	lineColor: { type: String, default: '' }
+})
+
+function getDotStyle(item, index) {
+	const color = item.dotColor || props.dotColor || (index === 0 ? '#171717' : '#CBD5E1')
+	return {
+		background: color,
+		boxShadow: index === 0 ? `0 0 0 6rpx rgba(99, 102, 241, 0.15)` : 'none'
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-timeline {
+	padding: 8rpx 0;
+
+	&__item {
+		display: flex;
+		position: relative;
+
+		&--last .mu-timeline__line {
+			display: none;
+		}
+	}
+
+	&__rail {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 40rpx;
+		flex-shrink: 0;
+		margin-right: 20rpx;
+	}
+
+	&__dot {
+		width: 20rpx;
+		height: 20rpx;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		margin-top: 6rpx;
+		z-index: 2;
+		transition: all 0.2s ease;
+	}
+
+	&__line {
+		width: 2rpx;
+		flex: 1;
+		background: rgba(226, 232, 240, 0.8);
+		margin: 8rpx 0;
+		min-height: 32rpx;
+	}
+
+	&__body {
+		flex: 1;
+		min-width: 0;
+		padding-bottom: 32rpx;
+	}
+
+	&__title-row {
+		margin-bottom: 6rpx;
+	}
+
+	&__title {
+		font-size: 26rpx;
+		font-weight: 700;
+		color: $mu-text-primary;
+		line-height: 1.4;
+
+		&--active {
+			color: #171717;
+		}
+	}
+
+	&__content {
+		margin-bottom: 6rpx;
+	}
+
+	&__desc {
+		font-size: 24rpx;
+		color: #64748B;
+		line-height: 1.6;
+		word-break: break-all;
+	}
+
+	&__time {
+		&-text {
+			font-size: 22rpx;
+			color: #94A3B8;
+			font-variant-numeric: tabular-nums;
+		}
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-timeline {
+		&__title { color: $mu-dark-text-primary; &--active { color: #FFFFFF; } }
+		&__desc { color: $mu-dark-text-secondary; }
+		&__line { background: rgba(255, 255, 255, 0.08); }
+		&__dot { box-shadow: none !important; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-timeline {
+		&__title { color: $mu-dark-text-primary; &--active { color: #FFFFFF; } }
+		&__desc { color: $mu-dark-text-secondary; }
+		&__line { background: rgba(255, 255, 255, 0.08); }
+		&__dot { box-shadow: none !important; }
+	}
+}
+</style>

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

@@ -0,0 +1,36 @@
+<template>
+	<view v-if="visible" class="mu-tips" :class="[`mu-tips--${type}`]">
+		<text class="mu-tips__text"><slot>{{ text }}</slot></text>
+		<view v-if="closable" class="mu-tips__close" @tap="handleClose">
+			<text class="mu-tips__close-icon">✕</text>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue'
+const props = defineProps({
+	show: { type: Boolean, default: true },
+	text: { type: String, default: '' },
+	type: { type: String, default: 'info' },
+	closable: { type: Boolean, default: false }
+})
+const emit = defineEmits(['close', 'update:show'])
+const visible = ref(props.show)
+watch(() => props.show, (val) => { visible.value = val })
+function handleClose() { visible.value = false; emit('close'); emit('update:show', false) }
+</script>
+
+<style lang="scss" scoped>
+.mu-tips {
+	display: flex; align-items: center; padding: $mu-space-3 $mu-space-6;
+	font-size: $mu-font-sm; line-height: 1.5;
+	&--info { background: $mu-info-bg; color: $mu-primary; }
+	&--success { background: $mu-success-bg; color: $mu-success; }
+	&--warning { background: $mu-warning-bg; color: $mu-warning; }
+	&--error { background: $mu-error-bg; color: $mu-error; }
+	&__text { flex: 1; }
+	&__close { margin-left: $mu-space-3; cursor: pointer; opacity: 0.6; }
+	&__close-icon { font-size: $mu-font-xs; }
+}
+</style>