muzhiyu-ui 1.0.0

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

@@ -0,0 +1,151 @@
+<template>
+	<view v-if="visible" class="mu-toast" :class="[`mu-toast--${currentPosition}`]">
+		<view class="mu-toast__inner mu-touchable-flat">
+			<view class="mu-toast__icon" v-if="currentType !== 'default'">
+				<mu-loading v-if="currentType === 'loading'" :size="18" color="#ffffff" />
+				<mu-icon v-else-if="currentType === 'success'" name="check" :size="18" color="#10B981" />
+				<mu-icon v-else-if="currentType === 'error'" name="close" :size="18" color="#F43F5E" />
+				<mu-icon v-else-if="currentType === 'warning'" name="warning" :size="18" color="#F59E0B" />
+				<mu-icon v-else :name="currentType" :size="18" color="#ffffff" />
+			</view>
+			<text class="mu-toast__text">{{ currentTitle }}</text>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps({
+	title: { type: String, default: '' },
+	type: { type: String, default: 'default' }, // default | success | error | warning | loading
+	duration: { type: Number, default: 2000 },
+	position: { type: String, default: 'center' } // top | center | bottom
+})
+
+const emit = defineEmits(['close'])
+
+const visible = ref(false)
+const currentTitle = ref('')
+const currentType = ref('default')
+const currentPosition = ref('center')
+const currentDuration = ref(2000)
+let timer = null
+
+function show(arg1, arg2) {
+	if (typeof arg1 === 'string') {
+		currentTitle.value = arg1
+		currentType.value = arg2 || props.type || 'default'
+		currentPosition.value = props.position || 'center'
+		currentDuration.value = props.duration || 2000
+	} else if (arg1 && typeof arg1 === 'object') {
+		currentTitle.value = arg1.title || props.title || ''
+		currentType.value = arg1.type || props.type || 'default'
+		currentPosition.value = arg1.position || props.position || 'center'
+		currentDuration.value = (arg1.duration !== undefined ? arg1.duration : (props.duration !== undefined ? props.duration : 2000))
+	} else {
+		currentTitle.value = props.title || ''
+		currentType.value = props.type || 'default'
+		currentPosition.value = props.position || 'center'
+		currentDuration.value = (props.duration !== undefined ? props.duration : 2000)
+	}
+
+	visible.value = true
+	if (timer) clearTimeout(timer)
+	if (currentType.value !== 'loading' && currentDuration.value > 0) {
+		timer = setTimeout(() => { close() }, currentDuration.value)
+	}
+}
+
+function close() {
+	visible.value = false
+	emit('close')
+}
+
+// 注册全局 JS 事件总线监听器
+onMounted(() => {
+	uni.$on('mu-toast-show', handleGlobalToastShow)
+	uni.$on('mu-toast-close', close)
+	uni.$on('mu-toast-hide', close)
+})
+
+onUnmounted(() => {
+	uni.$off('mu-toast-show', handleGlobalToastShow)
+	uni.$off('mu-toast-close', close)
+	uni.$off('mu-toast-hide', close)
+})
+
+function handleGlobalToastShow(options) {
+	show(options)
+}
+
+defineExpose({ show, open: show, close })
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-toast {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 100vw;
+	height: 100vh;
+	z-index: $mu-z-toast;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	pointer-events: none;
+	box-sizing: border-box;
+
+	&--top {
+		align-items: flex-start;
+		padding-top: calc(140rpx + env(safe-area-inset-top, 0px));
+	}
+	&--center {
+		align-items: center;
+	}
+	&--bottom {
+		align-items: flex-end;
+		padding-bottom: calc(160rpx + env(safe-area-inset-bottom, 0px));
+	}
+
+	&__inner {
+		display: inline-flex;
+		align-items: center;
+		padding: 24rpx 40rpx;
+		background: rgba(15, 23, 42, 0.92);
+		border-radius: $mu-radius-full;
+		max-width: 540rpx;
+		pointer-events: auto;
+		border: none !important;
+		box-shadow: none !important;
+		animation: mu-toast-in 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+	}
+
+	&__icon {
+		margin-right: 16rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		line-height: 1;
+		flex-shrink: 0;
+	}
+
+	&__text {
+		color: #ffffff;
+		font-size: 28rpx;
+		font-weight: 700;
+		line-height: 1.4;
+		letter-spacing: -0.3rpx;
+		word-break: break-all;
+	}
+}
+
+@keyframes mu-toast-in {
+	0% { opacity: 0; transform: scale(0.85) translateY(12rpx); }
+	100% { opacity: 1; transform: scale(1) translateY(0); }
+}
+</style>

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

@@ -0,0 +1,114 @@
+<template>
+	<view class="mu-transfer">
+		<view class="mu-transfer__panel">
+			<view class="mu-transfer__header">
+				<view v-if="checkable" class="mu-transfer__check" @tap="toggleAllLeft">
+					<view class="mu-transfer__checkbox" :class="{ 'mu-transfer__checkbox--checked': allLeftChecked }"></view>
+				</view>
+				<text class="mu-transfer__title">{{ titles[0] }}</text>
+			</view>
+			<scroll-view scroll-y class="mu-transfer__body">
+				<view v-for="item in leftList" :key="item[itemKey]" class="mu-transfer__item" @tap="toggleLeft(item)">
+					<view v-if="checkable" class="mu-transfer__checkbox" :class="{ 'mu-transfer__checkbox--checked': leftChecked.has(item[itemKey]) }"></view>
+					<text class="mu-transfer__item-text">{{ item[labelKey] }}</text>
+				</view>
+			</scroll-view>
+		</view>
+		<view class="mu-transfer__actions">
+			<view class="mu-transfer__action" :class="{ 'mu-transfer__action--disabled': leftChecked.size === 0 }" @tap="moveToRight">
+				<text class="mu-transfer__action-icon">›</text>
+			</view>
+			<view class="mu-transfer__action" :class="{ 'mu-transfer__action--disabled': rightChecked.size === 0 }" @tap="moveToLeft">
+				<text class="mu-transfer__action-icon">‹</text>
+			</view>
+		</view>
+		<view class="mu-transfer__panel">
+			<view class="mu-transfer__header">
+				<view v-if="checkable" class="mu-transfer__check" @tap="toggleAllRight">
+					<view class="mu-transfer__checkbox" :class="{ 'mu-transfer__checkbox--checked': allRightChecked }"></view>
+				</view>
+				<text class="mu-transfer__title">{{ titles[1] }}</text>
+			</view>
+			<scroll-view scroll-y class="mu-transfer__body">
+				<view v-for="item in rightList" :key="item[itemKey]" class="mu-transfer__item" @tap="toggleRight(item)">
+					<view v-if="checkable" class="mu-transfer__checkbox" :class="{ 'mu-transfer__checkbox--checked': rightChecked.has(item[itemKey]) }"></view>
+					<text class="mu-transfer__item-text">{{ item[labelKey] }}</text>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+const props = defineProps({
+	data: { type: Array, default: () => [] },
+	dataSource: { type: Array, default: () => [] },
+	value: { type: Array, default: () => [] },
+	labelKey: { type: String, default: 'label' },
+	valueKey: { type: String, default: 'value' },
+	titles: { type: Array, default: () => ['源列表', '目标列表'] },
+	checkable: { type: Boolean, default: true }
+})
+const emit = defineEmits(['change', 'update:value'])
+const rightValues = ref(new Set(props.value))
+const leftChecked = ref(new Set())
+const rightChecked = ref(new Set())
+// 兼容 data / data-source 两种传法，并自动识别 key 字段
+const sourceList = computed(() => props.data.length ? props.data : props.dataSource)
+const itemKey = computed(() => {
+	const first = sourceList.value[0]
+	if (first && !(props.valueKey in first) && 'key' in first) return 'key'
+	return props.valueKey
+})
+const leftList = computed(() => sourceList.value.filter(d => !rightValues.value.has(d[itemKey.value])))
+const rightList = computed(() => sourceList.value.filter(d => rightValues.value.has(d[itemKey.value])))
+const allLeftChecked = computed(() => leftList.value.length > 0 && leftList.value.every(d => leftChecked.value.has(d[itemKey.value])))
+const allRightChecked = computed(() => rightList.value.length > 0 && rightList.value.every(d => rightChecked.value.has(d[itemKey.value])))
+function toggleLeft(item) { const k = item[itemKey.value]; leftChecked.value.has(k) ? leftChecked.value.delete(k) : leftChecked.value.add(k) }
+function toggleRight(item) { const k = item[itemKey.value]; rightChecked.value.has(k) ? rightChecked.value.delete(k) : rightChecked.value.add(k) }
+function toggleAllLeft() { if (allLeftChecked.value) leftChecked.value.clear(); else leftList.value.forEach(d => leftChecked.value.add(d[itemKey.value])) }
+function toggleAllRight() { if (allRightChecked.value) rightChecked.value.clear(); else rightList.value.forEach(d => rightChecked.value.add(d[itemKey.value])) }
+function moveToRight() { leftChecked.value.forEach(k => rightValues.value.add(k)); leftChecked.value.clear(); emitChange() }
+function moveToLeft() { rightChecked.value.forEach(k => rightValues.value.delete(k)); rightChecked.value.clear(); emitChange() }
+function emitChange() { emit('change', [...rightValues.value]); emit('update:value', [...rightValues.value]) }
+watch(() => props.value, (v) => { rightValues.value = new Set(v) })
+</script>
+
+<style lang="scss" scoped>
+.mu-transfer {
+	display: flex; align-items: stretch; gap: $mu-space-3;
+	&__panel {
+		flex: 1; border: 1rpx solid $mu-border-color; border-radius: $mu-radius-md;
+		overflow: hidden; display: flex; flex-direction: column;
+	}
+	&__header {
+		display: flex; align-items: center; padding: $mu-space-3;
+		border-bottom: 1rpx solid $mu-border-light; background: #fafafa;
+	}
+	&__check { margin-right: $mu-space-2; }
+	&__checkbox {
+		width: 32rpx; height: 32rpx; border: 2rpx solid $mu-border-color; border-radius: $mu-radius-sm;
+		display: flex; align-items: center; justify-content: center;
+		&--checked { background: $mu-primary; border-color: $mu-primary; &::after { content: '✓'; color: #fff; font-size: 20rpx; } }
+	}
+	&__title { font-size: $mu-font-sm; color: $mu-text-primary; font-weight: 500; }
+	&__body { flex: 1; max-height: 400rpx; }
+	&__item {
+		display: flex; align-items: center; padding: $mu-space-3; cursor: pointer;
+		border-bottom: 1rpx solid $mu-border-light;
+		&:active { background: $mu-bg-hover; }
+		&-text { font-size: $mu-font-sm; color: $mu-text-primary; margin-left: $mu-space-2; }
+	}
+	&__actions {
+		display: flex; flex-direction: column; align-items: center; justify-content: center; gap: $mu-space-3;
+	}
+	&__action {
+		width: 64rpx; height: 64rpx; border-radius: $mu-radius-sm; background: $mu-primary;
+		display: flex; align-items: center; justify-content: center; cursor: pointer;
+		&:active { opacity: 0.85; }
+		&--disabled { opacity: 0.4; pointer-events: none; }
+		&-icon { color: #fff; font-size: $mu-font-lg; font-weight: 600; }
+	}
+}
+</style>

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

@@ -0,0 +1,263 @@
+<template>
+	<view class="mu-tree">
+		<view
+			v-for="(node, ni) in flatNodes"
+			:key="node.id"
+			class="mu-tree__node"
+			:style="{ paddingLeft: (node.level * indent) + 'rpx' }"
+		>
+			<view class="mu-tree__row" :class="{ 'mu-tree__row--selected': selectedId === node.id }" @tap="handleToggle(node)">
+				<!-- 展开/收起箭头 -->
+				<view class="mu-tree__arrow" :class="[node.expanded && 'mu-tree__arrow--expand', node.isLeaf && 'mu-tree__arrow--leaf']">
+					<mu-icon v-if="!node.isLeaf" name="chevron_right" :size="14" :color="node.expanded ? '#171717' : '#94A3B8'" />
+				</view>
+
+				<!-- 复选框 -->
+				<view v-if="checkable" class="mu-tree__check" @tap.stop="handleCheck(node)">
+					<view class="mu-tree__checkbox" :class="[node.checked && 'mu-tree__checkbox--checked', node.halfChecked && 'mu-tree__checkbox--half']">
+						<mu-icon v-if="node.checked" name="check" :size="12" color="#ffffff" />
+						<view v-else-if="node.halfChecked" class="mu-tree__checkbox-half-bar"></view>
+					</view>
+				</view>
+
+				<!-- 节点图标 -->
+				<view v-if="node.data.icon" class="mu-tree__icon">
+					<mu-icon :name="node.data.icon" :size="16" :color="selectedId === node.id ? '#171717' : (node.isLeaf ? '#94A3B8' : '#64748B')" />
+				</view>
+
+				<!-- 标签文字 -->
+				<view class="mu-tree__label">
+					<slot name="node" :node="node.data" :is-leaf="node.isLeaf" :expanded="node.expanded">
+						<text class="mu-tree__label-text" :class="{ 'mu-tree__label-text--selected': selectedId === node.id }">{{ node.label }}</text>
+					</slot>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+	data: { type: Array, default: () => [] },
+	defaultExpandAll: { type: Boolean, default: false },
+	expandedKeys: { type: Array, default: () => [] },
+	checkedKeys: { type: Array, default: () => [] },
+	selectedKey: { type: [String, Number], default: '' },
+	checkable: { type: Boolean, default: false },
+	indent: { type: Number, default: 40 },
+	fieldNames: { type: Object, default: () => ({ label: 'label', children: 'children', key: 'id' }) }
+})
+
+const emit = defineEmits(['expand', 'check', 'select', 'update:checkedKeys', 'update:expandedKeys', 'update:selectedKey'])
+
+const expandedSet = ref(new Set(props.expandedKeys))
+const collapsedSet = ref(new Set())
+const checkedSet = ref(new Set(props.checkedKeys))
+const selectedId = ref(props.selectedKey)
+
+function getKey(node) { return node[props.fieldNames.key] || node[props.fieldNames.label] }
+function getLabel(node) { return node[props.fieldNames.label] || '' }
+function getChildren(node) { return node[props.fieldNames.children] || [] }
+
+// 将树形数据扁平化为可渲染数组
+function buildFlat(data, level = 0, parent = null) {
+	if (!data || !Array.isArray(data)) return []
+	const result = []
+	for (const item of data) {
+		if (!item) continue
+		const id = getKey(item)
+		const children = getChildren(item)
+		const isLeaf = !children || children.length === 0
+		const expanded = collapsedSet.value.has(id) ? false : (props.defaultExpandAll || expandedSet.value.has(id))
+		const node = {
+			id, label: getLabel(item), level, isLeaf, expanded,
+			checked: checkedSet.value.has(id), halfChecked: false,
+			data: item, parent, _children: children
+		}
+		result.push(node)
+		if (expanded && !isLeaf) {
+			result.push(...buildFlat(children, level + 1, node))
+		}
+	}
+	return result
+}
+
+const flatNodes = computed(() => buildFlat(props.data))
+
+function handleToggle(node) {
+	if (node.isLeaf) {
+		selectedId.value = node.id
+		emit('select', { key: node.id, data: node.data })
+		emit('update:selectedKey', node.id)
+		return
+	}
+	if (node.expanded) {
+		expandedSet.value.delete(node.id)
+		collapsedSet.value.add(node.id)
+	} else {
+		expandedSet.value.add(node.id)
+		collapsedSet.value.delete(node.id)
+	}
+	emit('expand', { key: node.id, expanded: !node.expanded })
+	emit('update:expandedKeys', [...expandedSet.value])
+}
+
+function handleCheck(node) {
+	const checked = !node.checked
+	toggleCheck(node, checked)
+	emit('check', { key: node.id, checked, checkedKeys: [...checkedSet.value] })
+	emit('update:checkedKeys', [...checkedSet.value])
+}
+
+function toggleCheck(node, checked) {
+	if (checked) checkedSet.value.add(node.id)
+	else checkedSet.value.delete(node.id)
+	// 向下级子节点传播勾选状态
+	const children = getChildren(node.data)
+	for (const child of children) {
+		toggleCheck({ id: getKey(child), data: child, isLeaf: getChildren(child).length === 0 }, checked)
+	}
+}
+
+watch(() => props.expandedKeys, (v) => { expandedSet.value = new Set(v) })
+watch(() => props.checkedKeys, (v) => { checkedSet.value = new Set(v) })
+watch(() => props.selectedKey, (v) => { selectedId.value = v })
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-tree {
+	width: 100%;
+
+	&__node {
+		box-sizing: border-box;
+	}
+
+	&__row {
+		display: flex;
+		align-items: center;
+		padding: 14rpx 16rpx;
+		border-radius: 12rpx;
+		cursor: pointer;
+		transition: background 0.15s ease;
+
+		&:active {
+			background: rgba(99, 102, 241, 0.06);
+		}
+
+		&--selected {
+			background: rgba(99, 102, 241, 0.08);
+		}
+	}
+
+	&__arrow {
+		width: 36rpx;
+		height: 36rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+		transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
+		margin-right: 4rpx;
+
+		&--expand {
+			transform: rotate(90deg);
+		}
+
+		&--leaf {
+			visibility: hidden;
+		}
+	}
+
+	&__check {
+		margin-right: 12rpx;
+		flex-shrink: 0;
+	}
+
+	&__checkbox {
+		width: 32rpx;
+		height: 32rpx;
+		border: 2rpx solid #CBD5E1;
+		border-radius: 8rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.2s ease;
+
+		&--checked {
+			background: #171717;
+			border-color: #171717;
+		}
+
+		&--half {
+			background: #171717;
+			border-color: #171717;
+		}
+
+		&-half-bar {
+			width: 16rpx;
+			height: 4rpx;
+			background: #ffffff;
+			border-radius: 2rpx;
+		}
+	}
+
+	&__icon {
+		margin-right: 12rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
+	&__label {
+		flex: 1;
+		min-width: 0;
+
+		&-text {
+			font-size: 26rpx;
+			color: $mu-text-primary;
+			font-weight: 500;
+			line-height: 1.4;
+
+			&--selected {
+				color: #171717;
+				font-weight: 700;
+			}
+		}
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-tree {
+		&__row {
+			&:active { background: rgba(255, 255, 255, 0.05); }
+			&--selected { background: rgba(99, 102, 241, 0.15); }
+		}
+		&__checkbox { border-color: rgba(255, 255, 255, 0.2); }
+		&__label-text {
+			color: $mu-dark-text-primary;
+			&--selected { color: #FFFFFF; }
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-tree {
+		&__row {
+			&:active { background: rgba(255, 255, 255, 0.05); }
+			&--selected { background: rgba(99, 102, 241, 0.15); }
+		}
+		&__checkbox { border-color: rgba(255, 255, 255, 0.2); }
+		&__label-text {
+			color: $mu-dark-text-primary;
+			&--selected { color: #FFFFFF; }
+		}
+	}
+}
+</style>