muzhiyu-ui 1.0.0

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

@@ -0,0 +1,262 @@
+<template>
+	<view v-if="visible" class="mu-datetime" @tap="handleClose">
+		<view class="mu-datetime__mask"></view>
+		<view class="mu-datetime__panel" :class="{ 'mu-datetime__panel--show': panelShow }" @tap.stop>
+			<view class="mu-datetime__toolbar">
+				<text class="mu-datetime__cancel mu-touchable-flat" @tap="handleClose">取消</text>
+				<text class="mu-datetime__title">{{ title }}</text>
+				<text class="mu-datetime__confirm mu-touchable-flat" @tap="handleConfirm">确定</text>
+			</view>
+			<view class="mu-datetime__body">
+				<picker-view :value="pickerValue" class="mu-datetime__picker" @change="onPickerChange">
+					<picker-view-column v-if="showYear">
+						<view v-for="y in years" :key="y" class="mu-datetime__col">
+							<text class="mu-datetime__col-text">{{ y }}年</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="showMonth">
+						<view v-for="m in months" :key="m" class="mu-datetime__col">
+							<text class="mu-datetime__col-text">{{ padZero(m) }}月</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="showDay">
+						<view v-for="d in days" :key="d" class="mu-datetime__col">
+							<text class="mu-datetime__col-text">{{ padZero(d) }}日</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="showHour">
+						<view v-for="h in 24" :key="h-1" class="mu-datetime__col">
+							<text class="mu-datetime__col-text">{{ padZero(h-1) }}时</text>
+						</view>
+					</picker-view-column>
+					<picker-view-column v-if="showMinute">
+						<view v-for="m in 60" :key="m-1" class="mu-datetime__col">
+							<text class="mu-datetime__col-text">{{ padZero(m-1) }}分</text>
+						</view>
+					</picker-view-column>
+				</picker-view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+	show: { type: Boolean, default: false },
+	value: { type: String, default: '' },
+	title: { type: String, default: '选择日期' },
+	mode: { type: String, default: 'date' },
+	startYear: { type: Number, default: 1970 },
+	endYear: { type: Number, default: 2050 }
+})
+
+const emit = defineEmits(['confirm', 'cancel', 'close', 'update:show'])
+
+const visible = ref(false)
+const panelShow = ref(false)
+const pickerValue = ref([])
+
+const showYear = computed(() => ['date', 'year-month', 'year'].includes(props.mode))
+const showMonth = computed(() => ['date', 'year-month'].includes(props.mode))
+const showDay = computed(() => props.mode === 'date')
+const showHour = computed(() => ['datetime', 'time'].includes(props.mode))
+const showMinute = computed(() => ['datetime', 'time'].includes(props.mode))
+
+const years = computed(() => {
+	const arr = []
+	for (let i = props.startYear; i <= props.endYear; i++) arr.push(i)
+	return arr
+})
+
+const months = computed(() => Array.from({ length: 12 }, (_, i) => i + 1))
+
+const days = computed(() => {
+	const month = getMonth()
+	const year = getYear()
+	const d = new Date(year, month, 0).getDate()
+	return Array.from({ length: d }, (_, i) => i + 1)
+})
+
+function getYear() {
+	if (!showYear.value) return new Date().getFullYear()
+	return years.value[pickerValue.value[getColumnIndex('year')]] || new Date().getFullYear()
+}
+
+function getMonth() {
+	if (!showMonth.value) return new Date().getMonth() + 1
+	const idx = getColumnIndex('month')
+	return (pickerValue.value[idx] || 0) + 1
+}
+
+function getColumnIndex(col) {
+	let i = 0
+	if (col === 'year') return 0
+	if (showYear.value) i++
+	if (col === 'month') return i
+	if (showMonth.value) i++
+	if (col === 'day') return i
+	if (showDay.value) i++
+	return i
+}
+
+function padZero(n) {
+	return n < 10 ? '0' + n : String(n)
+}
+
+function initPickerValue() {
+	const val = props.value ? new Date(props.value.replace(/-/g, '/')) : new Date()
+	const curYear = isNaN(val.getFullYear()) ? new Date().getFullYear() : val.getFullYear()
+	const curMonth = isNaN(val.getMonth()) ? new Date().getMonth() + 1 : val.getMonth() + 1
+	const curDay = isNaN(val.getDate()) ? new Date().getDate() : val.getDate()
+	const curHour = isNaN(val.getHours()) ? 0 : val.getHours()
+	const curMinute = isNaN(val.getMinutes()) ? 0 : val.getMinutes()
+
+	const res = []
+	if (showYear.value) res.push(Math.max(0, years.value.indexOf(curYear)))
+	if (showMonth.value) res.push(curMonth - 1)
+	if (showDay.value) res.push(curDay - 1)
+	if (showHour.value) res.push(curHour)
+	if (showMinute.value) res.push(curMinute)
+	pickerValue.value = res
+}
+
+function onPickerChange(e) {
+	pickerValue.value = e.detail.value
+}
+
+function handleConfirm() {
+	let result = ''
+	const year = getYear()
+	const month = padZero(getMonth())
+	const day = padZero(days.value[pickerValue.value[getColumnIndex('day')]] || 1)
+	const hour = padZero((pickerValue.value[getColumnIndex('hour')] || 0))
+	const minute = padZero((pickerValue.value[getColumnIndex('minute')] || 0))
+
+	if (props.mode === 'date') result = `${year}-${month}-${day}`
+	else if (props.mode === 'year-month') result = `${year}-${month}`
+	else if (props.mode === 'year') result = `${year}`
+	else if (props.mode === 'time') result = `${hour}:${minute}`
+	else if (props.mode === 'datetime') result = `${year}-${month}-${day} ${hour}:${minute}`
+
+	emit('confirm', result)
+	handleClose()
+}
+
+function handleClose() {
+	panelShow.value = false
+	setTimeout(() => {
+		visible.value = false
+		emit('update:show', false)
+		emit('close')
+		emit('cancel')
+	}, 250)
+}
+
+function open() {
+	initPickerValue()
+	visible.value = true
+	setTimeout(() => { panelShow.value = true }, 20)
+}
+
+watch(() => props.show, (v) => {
+	if (v) open()
+	else handleClose()
+}, { immediate: true })
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-datetime {
+	position: fixed;
+	inset: 0;
+	z-index: $mu-z-modal;
+	display: flex;
+	flex-direction: column;
+	justify-content: flex-end;
+
+	&__mask {
+		position: absolute;
+		inset: 0;
+		background: rgba(15, 23, 42, 0.6);
+		backdrop-filter: blur(12px);
+	}
+
+	&__panel {
+		position: relative;
+		z-index: 10;
+		background: #FFFFFF !important;
+		border-radius: 32rpx 32rpx 0 0;
+		transform: translateY(100%);
+		transition: transform 0.28s cubic-bezier(0.25, 1, 0.5, 1);
+
+		&--show { transform: translateY(0); }
+	}
+
+	&__toolbar {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 28rpx 36rpx;
+		border-bottom: 1rpx solid rgba(241, 245, 249, 0.9);
+	}
+
+	&__cancel {
+		font-size: 28rpx;
+		color: #64748B;
+		font-weight: 500;
+		padding: 8rpx 16rpx;
+	}
+
+	&__title {
+		font-size: 30rpx;
+		color: $mu-text-primary;
+		font-weight: 800;
+	}
+
+	&__confirm {
+		font-size: 28rpx;
+		color: #171717;
+		font-weight: 800;
+		padding: 8rpx 16rpx;
+	}
+
+	&__body { height: 480rpx; background: #FFFFFF; }
+	&__picker { height: 100%; background: #FFFFFF; }
+
+	&__col {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		&-text { font-size: 30rpx; color: $mu-text-primary; font-weight: 600; }
+	}
+}
+
+.mu-dark, page.mu-dark {
+	.mu-datetime {
+		&__panel, &__body, &__picker, picker-view, picker-view-column {
+			background: #14141E !important;
+			background-color: #14141E !important;
+			border-top: 1rpx solid rgba(255, 255, 255, 0.1);
+		}
+		&__toolbar { border-bottom-color: rgba(255, 255, 255, 0.06); }
+		&__title, &__col-text { color: #F8FAFC !important; }
+		&__cancel { color: #94A3B8 !important; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.mu-datetime {
+		&__panel, &__body, &__picker, picker-view, picker-view-column {
+			background: #14141E !important;
+			background-color: #14141E !important;
+			border-top: 1rpx solid rgba(255, 255, 255, 0.1);
+		}
+		&__toolbar { border-bottom-color: rgba(255, 255, 255, 0.06); }
+		&__title, &__col-text { color: #F8FAFC !important; }
+		&__cancel { color: #94A3B8 !important; }
+	}
+}
+</style>

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

@@ -0,0 +1,229 @@
+<template>
+	<view
+		class="mu-divider"
+		:class="[
+			vertical ? 'mu-divider--vertical' : 'mu-divider--horizontal',
+			dashed && 'mu-divider--dashed',
+			variant === 'gradient' && 'mu-divider--gradient',
+			`mu-divider--${computedPosition}`
+		]"
+		:style="customStyle"
+	>
+		<!-- 垂直模式 -->
+		<view v-if="vertical" class="mu-divider__vertical-line" :style="verticalStyle"></view>
+
+		<!-- 水平模式 -->
+		<template v-else>
+			<view class="mu-divider__line mu-divider__line--left"></view>
+
+			<!-- 中间文字 / 图标内容区 -->
+			<view v-if="hasText" class="mu-divider__content">
+				<slot>
+					<view class="mu-divider__inner-wrap">
+						<view v-if="icon" class="mu-divider__icon-box">
+							<mu-icon :name="icon" :size="14" color="#94A3B8" />
+						</view>
+						<text class="mu-divider__text" :style="textCustomStyle">{{ displayText }}</text>
+					</view>
+				</slot>
+			</view>
+
+			<view class="mu-divider__line mu-divider__line--right"></view>
+		</template>
+	</view>
+</template>
+
+<script setup>
+import { computed, useSlots } from 'vue'
+
+const slots = useSlots()
+
+const props = defineProps({
+	content: { type: String, default: '' },
+	contentPosition: { type: String, default: '' },      // left | center | right
+	orientation: { type: String, default: 'center' },   // left | center | right
+	dashed: { type: Boolean, default: false },
+	variant: { type: String, default: 'solid' },         // solid | dashed | gradient
+	color: { type: String, default: '' },
+	textColor: { type: String, default: '' },
+	icon: { type: String, default: '' },
+	vertical: { type: Boolean, default: false },
+	margin: { type: String, default: '' }
+})
+
+const computedPosition = computed(() => {
+	if (props.contentPosition) return props.contentPosition
+	return props.orientation || 'center'
+})
+
+const hasText = computed(() => !!slots.default || !!props.content || !!props.icon)
+
+const displayText = computed(() => props.content || '')
+
+const customStyle = computed(() => {
+	const s = {}
+	if (props.margin) s.margin = props.margin
+	return s
+})
+
+const textCustomStyle = computed(() => {
+	const s = {}
+	if (props.textColor) s.color = props.textColor
+	return s
+})
+
+const verticalStyle = computed(() => {
+	const s = {}
+	if (props.color) s.background = props.color
+	return s
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-divider {
+	/* 1. 水平分割线 */
+	&--horizontal {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		margin: 24rpx 0;
+		box-sizing: border-box;
+
+		.mu-divider__line {
+			flex: 1;
+			height: 0;
+			border-top: 1rpx solid rgba(226, 232, 240, 0.8);
+		}
+
+		&.mu-divider--dashed .mu-divider__line {
+			border-top-style: dashed;
+		}
+
+		&.mu-divider--gradient .mu-divider__line--left {
+			border-top: none;
+			height: 1rpx;
+			background: linear-gradient(to right, transparent, rgba(226, 232, 240, 0.9));
+		}
+		&.mu-divider--gradient .mu-divider__line--right {
+			border-top: none;
+			height: 1rpx;
+			background: linear-gradient(to left, transparent, rgba(226, 232, 240, 0.9));
+		}
+
+		/* 位置控制 */
+		&.mu-divider--left {
+			.mu-divider__line--left {
+				flex: 0 0 8%;
+			}
+		}
+
+		&.mu-divider--right {
+			.mu-divider__line--right {
+				flex: 0 0 8%;
+			}
+		}
+	}
+
+	/* 2. 垂直分割线 */
+	&--vertical {
+		display: inline-flex;
+		align-items: center;
+		vertical-align: middle;
+		margin: 0 16rpx;
+
+		.mu-divider__vertical-line {
+			width: 1rpx;
+			height: 24rpx;
+			background: rgba(226, 232, 240, 0.9);
+		}
+
+		&.mu-divider--dashed .mu-divider__vertical-line {
+			border-left: 1rpx dashed rgba(226, 232, 240, 0.9);
+			background: transparent;
+			width: 0;
+		}
+	}
+
+	&__content {
+		padding: 0 20rpx;
+		flex-shrink: 0;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__inner-wrap {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		vertical-align: middle;
+		line-height: 1;
+	}
+
+	&__icon-box {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		margin-right: 8rpx;
+		line-height: 1;
+	}
+
+	&__text {
+		font-size: 22rpx;
+		color: #94A3B8;
+		font-weight: 500;
+		letter-spacing: 0.5rpx;
+		line-height: 1;
+		display: inline-block;
+		vertical-align: middle;
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-divider {
+		&--horizontal {
+			.mu-divider__line {
+				border-color: rgba(255, 255, 255, 0.08);
+			}
+			&.mu-divider--gradient .mu-divider__line--left {
+				background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.12));
+			}
+			&.mu-divider--gradient .mu-divider__line--right {
+				background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.12));
+			}
+		}
+		&--vertical .mu-divider__vertical-line {
+			background: rgba(255, 255, 255, 0.12);
+		}
+		&__text {
+			color: $mu-dark-text-secondary;
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-divider {
+		&--horizontal {
+			.mu-divider__line {
+				border-color: rgba(255, 255, 255, 0.08);
+			}
+			&.mu-divider--gradient .mu-divider__line--left {
+				background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.12));
+			}
+			&.mu-divider--gradient .mu-divider__line--right {
+				background: linear-gradient(to left, transparent, rgba(255, 255, 255, 0.12));
+			}
+		}
+		&--vertical .mu-divider__vertical-line {
+			background: rgba(255, 255, 255, 0.12);
+		}
+		&__text {
+			color: $mu-dark-text-secondary;
+		}
+	}
+}
+</style>

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

@@ -0,0 +1,172 @@
+<template>
+	<view v-if="visible" class="mu-drawer" @tap="onMaskTap">
+		<view class="mu-drawer__mask" :class="{ 'mu-drawer__mask--show': panelShow }"></view>
+		<view
+			class="mu-drawer__panel"
+			:class="[`mu-drawer__panel--${realMode}`, panelShow && 'mu-drawer__panel--show']"
+			:style="panelStyle"
+			@tap.stop
+		>
+			<!-- 顶部标题栏 -->
+			<view v-if="title" class="mu-drawer__header">
+				<text class="mu-drawer__title">{{ title }}</text>
+				<view class="mu-drawer__close mu-touchable-flat" @tap="onMaskTap">
+					<mu-icon name="close" :size="18" color="#94A3B8" />
+				</view>
+			</view>
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+	show: { type: Boolean, default: false },
+	// 兼容 mode 与 placement 两种写法
+	mode: { type: String, default: '' },
+	placement: { type: String, default: 'left' },     // left | right | bottom
+	title: { type: String, default: '' },
+	width: { type: String, default: '560rpx' },
+	height: { type: String, default: '60vh' },         // bottom 模式高度
+	maskClosable: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['close', 'update:show'])
+
+const visible = ref(false)
+const panelShow = ref(false)
+
+// 兼容 mode 与 placement
+const realMode = computed(() => props.mode || props.placement || 'left')
+
+const panelStyle = computed(() => {
+	if (realMode.value === 'bottom') {
+		return { height: props.height }
+	}
+	return { width: props.width }
+})
+
+watch(() => props.show, (val) => {
+	if (val) {
+		visible.value = true
+		setTimeout(() => { panelShow.value = true }, 20)
+	} else {
+		panelShow.value = false
+		setTimeout(() => { visible.value = false }, 300)
+	}
+})
+
+function onMaskTap() {
+	if (!props.maskClosable) return
+	panelShow.value = false
+	emit('update:show', false)
+	setTimeout(() => { visible.value = false; emit('close') }, 300)
+}
+
+defineExpose({
+	open: () => { visible.value = true; emit('update:show', true); setTimeout(() => panelShow.value = true, 20) },
+	close: onMaskTap
+})
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-drawer {
+	position: fixed;
+	inset: 0;
+	z-index: $mu-z-popup;
+
+	&__mask {
+		position: absolute;
+		inset: 0;
+		background: rgba(15, 23, 42, 0.45);
+		opacity: 0;
+		transition: opacity $mu-duration-slow;
+
+		&--show { opacity: 1; }
+	}
+
+	&__panel {
+		position: absolute;
+		background: #ffffff;
+		transition: transform $mu-duration-slow $mu-ease;
+		overflow-y: auto;
+		box-shadow: 0 0 40rpx rgba(15, 23, 42, 0.12);
+
+		/* 左侧抽屉 */
+		&--left {
+			top: 0; bottom: 0; left: 0;
+			transform: translateX(-100%);
+			border-radius: 0 $mu-radius-xl $mu-radius-xl 0;
+
+			&.mu-drawer__panel--show { transform: translateX(0); }
+		}
+
+		/* 右侧抽屉 */
+		&--right {
+			top: 0; bottom: 0; right: 0;
+			transform: translateX(100%);
+			border-radius: $mu-radius-xl 0 0 $mu-radius-xl;
+
+			&.mu-drawer__panel--show { transform: translateX(0); }
+		}
+
+		/* 底部抽屉 */
+		&--bottom {
+			left: 0; right: 0; bottom: 0;
+			transform: translateY(100%);
+			border-radius: $mu-radius-xl $mu-radius-xl 0 0;
+			width: 100% !important;
+
+			&.mu-drawer__panel--show { transform: translateY(0); }
+		}
+	}
+
+	&__header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 28rpx 24rpx 16rpx;
+		border-bottom: 1rpx solid rgba(226, 232, 240, 0.6);
+	}
+
+	&__title {
+		font-size: 30rpx;
+		font-weight: 800;
+		color: $mu-text-primary;
+	}
+
+	&__close {
+		width: 56rpx;
+		height: 56rpx;
+		border-radius: 50%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgba(148, 163, 184, 0.1);
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-drawer {
+		&__mask { background: rgba(0, 0, 0, 0.6); }
+		&__panel { background: #1E1E2E; }
+		&__header { border-bottom-color: rgba(255, 255, 255, 0.08); }
+		&__title { color: $mu-dark-text-primary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-drawer {
+		&__mask { background: rgba(0, 0, 0, 0.6); }
+		&__panel { background: #1E1E2E; }
+		&__header { border-bottom-color: rgba(255, 255, 255, 0.08); }
+		&__title { color: $mu-dark-text-primary; }
+	}
+}
+</style>