muzhiyu-ui 1.0.0

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

@@ -0,0 +1,420 @@
+<template>
+	<view class="mu-table" :class="{ 'mu-table--bordered': bordered, 'mu-table--striped': striped }">
+		<scroll-view scroll-x class="mu-table__scroll" :show-scrollbar="false">
+			<view class="mu-table__inner" :style="innerStyle">
+				<!-- Header -->
+				<view class="mu-table__header">
+					<view
+						v-for="(col, ci) in columns"
+						:key="ci"
+						class="mu-table__th"
+						:class="{
+							'mu-table__col--fixed-left': isFixedLeft(col),
+							'mu-table__col--fixed-right': isFixedRight(col)
+						}"
+						:style="getColStyle(col, ci, true)"
+						@tap="handleSort(col, ci)"
+					>
+						<text class="mu-table__th-text" :style="{ textAlign: getAlign(col, true) }">{{ col.title }}</text>
+						<view v-if="col.sortable" class="mu-table__sort">
+							<text class="mu-table__sort-up" :class="{ active: sortCol === ci && sortDir === 'asc' }">▲</text>
+							<text class="mu-table__sort-down" :class="{ active: sortCol === ci && sortDir === 'desc' }">▼</text>
+						</view>
+					</view>
+				</view>
+
+				<!-- Body -->
+				<view class="mu-table__body">
+					<view v-if="sortedData.length === 0" class="mu-table__empty">
+						<slot name="empty"><text class="mu-table__empty-text">暂无数据</text></slot>
+					</view>
+					<view
+						v-for="(row, ri) in sortedData"
+						:key="ri"
+						class="mu-table__row"
+						:class="{ 'mu-table__row--striped': striped && ri % 2 === 1 }"
+						@tap="handleRowClick(row, ri)"
+					>
+						<view
+							v-for="(col, ci) in columns"
+							:key="ci"
+							class="mu-table__td"
+							:class="{
+								'mu-table__col--fixed-left': isFixedLeft(col),
+								'mu-table__col--fixed-right': isFixedRight(col)
+							}"
+							:style="getColStyle(col, ci, false, ri)"
+						>
+							<slot :name="`cell-${col.prop || col.key}`" :row="row" :index="ri">
+								<text class="mu-table__td-text" :style="{ textAlign: getAlign(col) }">{{ getCellValue(row, col) }}</text>
+							</slot>
+						</view>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue'
+
+const props = defineProps({
+	columns: { type: Array, default: () => [] },
+	data: { type: Array, default: () => [] },
+	bordered: { type: Boolean, default: false },
+	striped: { type: Boolean, default: false },
+	minWidth: { type: [Number, String], default: '' },
+	defaultSort: { type: Object, default: () => ({ col: -1, dir: 'asc' }) }
+})
+
+const emit = defineEmits(['sort-change', 'row-click'])
+
+const sortCol = ref(props.defaultSort.col)
+const sortDir = ref(props.defaultSort.dir)
+
+// 格式化尺寸
+function formatSize(val) {
+	if (!val && val !== 0) return ''
+	if (typeof val === 'number' || /^\d+$/.test(String(val))) {
+		return val + 'rpx'
+	}
+	return String(val)
+}
+
+const innerStyle = computed(() => {
+	const s = {}
+	if (props.minWidth) {
+		s.minWidth = formatSize(props.minWidth)
+	}
+	return s
+})
+
+function isFixedLeft(col) {
+	return col.fixed === 'left' || col.fixed === true
+}
+
+function isFixedRight(col) {
+	return col.fixed === 'right'
+}
+
+function getAlign(col, isHeader = false) {
+	if (isHeader && col.headerAlign) return col.headerAlign
+	return col.align || 'left'
+}
+
+function getJustifyContent(align) {
+	if (align === 'center') return 'center'
+	if (align === 'right') return 'flex-end'
+	return 'flex-start'
+}
+
+// 计算各固定列的累计 left / right 偏移
+const leftOffsets = computed(() => {
+	const offsets = []
+	let currentOffset = 0
+	props.columns.forEach((col) => {
+		offsets.push(currentOffset + 'rpx')
+		if (isFixedLeft(col)) {
+			const w = col.width ? (typeof col.width === 'number' ? col.width : parseInt(col.width, 10) || 160) : 160
+			currentOffset += w
+		}
+	})
+	return offsets
+})
+
+const rightOffsets = computed(() => {
+	const offsets = new Array(props.columns.length).fill('0rpx')
+	let currentOffset = 0
+	for (let i = props.columns.length - 1; i >= 0; i--) {
+		const col = props.columns[i]
+		offsets[i] = currentOffset + 'rpx'
+		if (isFixedRight(col)) {
+			const w = col.width ? (typeof col.width === 'number' ? col.width : parseInt(col.width, 10) || 160) : 160
+			currentOffset += w
+		}
+	}
+	return offsets
+})
+
+function getColStyle(col, index, isHeader = false, rowIndex = 0) {
+	const align = getAlign(col, isHeader)
+	const s = {
+		justifyContent: getJustifyContent(align)
+	}
+
+	// 宽度与弹性拉伸设置
+	if (col.width) {
+		const w = formatSize(col.width)
+		s.minWidth = w
+		if (col.fixed) {
+			s.width = w
+			s.flexShrink = 0
+		} else {
+			s.flex = 1
+			s.flexShrink = 0
+		}
+	} else {
+		s.flex = 1
+		s.minWidth = '160rpx'
+		s.flexShrink = 0
+	}
+
+	// 固定列 sticky 布局
+	if (isFixedLeft(col)) {
+		s.position = 'sticky'
+		s.left = leftOffsets.value[index]
+		s.zIndex = isHeader ? 3 : 2
+	} else if (isFixedRight(col)) {
+		s.position = 'sticky'
+		s.right = rightOffsets.value[index]
+		s.zIndex = isHeader ? 3 : 2
+	}
+
+	return s
+}
+
+function getCellValue(row, col) {
+	if (col.formatter) return col.formatter(row)
+	const keys = String(col.prop || col.key || '').split('.')
+	let val = row
+	for (const k of keys) {
+		val = (val && val[k])
+	}
+	return (val !== undefined && val !== null ? val : '')
+}
+
+const sortedData = computed(() => {
+	if (!props.data || !Array.isArray(props.data)) return []
+	if (sortCol.value < 0) return props.data
+	const col = props.columns[sortCol.value]
+	if (!col || !col.sortable) return props.data
+	return [...props.data].sort((a, b) => {
+		const va = getCellValue(a, col)
+		const vb = getCellValue(b, col)
+		const cmp = typeof va === 'number' ? va - vb : String(va).localeCompare(String(vb))
+		return sortDir.value === 'asc' ? cmp : -cmp
+	})
+})
+
+function handleSort(col, ci) {
+	if (!col.sortable) return
+	if (sortCol.value === ci) {
+		sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc'
+	} else {
+		sortCol.value = ci
+		sortDir.value = 'asc'
+	}
+	emit('sort-change', { column: col, index: ci, direction: sortDir.value })
+}
+
+function handleRowClick(row, index) {
+	emit('row-click', { row, index })
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-table {
+	background: #ffffff;
+	border-radius: $mu-radius-xl;
+	overflow: hidden;
+	border: 1rpx solid $mu-border;
+	box-shadow: 0 2rpx 12rpx rgba(15, 23, 42, 0.04);
+	width: 100%;
+	box-sizing: border-box;
+
+	&--bordered {
+		.mu-table__th, .mu-table__td {
+			border-right: 1rpx solid rgba(226, 232, 240, 0.7);
+			&:last-child { border-right: none; }
+		}
+		.mu-table__row {
+			border-bottom: 1rpx solid rgba(226, 232, 240, 0.7);
+			&:last-child { border-bottom: none; }
+		}
+	}
+
+	&__scroll {
+		width: 100%;
+		white-space: nowrap;
+	}
+
+	&__inner {
+		display: inline-block;
+		min-width: 100%;
+		box-sizing: border-box;
+		vertical-align: top;
+	}
+
+	&__header {
+		display: flex;
+		background: #F8FAFC;
+		border-bottom: 1rpx solid $mu-border;
+		min-width: 100%;
+	}
+
+	&__th {
+		display: flex;
+		align-items: center;
+		padding: 20rpx 24rpx;
+		box-sizing: border-box;
+		background: #F8FAFC;
+
+		&-text {
+			font-size: 26rpx;
+			color: $mu-text-primary;
+			font-weight: 700;
+			letter-spacing: -0.5rpx;
+			flex: 1;
+		}
+	}
+
+	&__sort {
+		display: flex;
+		flex-direction: column;
+		margin-left: 8rpx;
+		line-height: 0.6;
+		flex-shrink: 0;
+
+		&-up, &-down {
+			font-size: 16rpx;
+			color: #94A3B8;
+			&.active {
+				color: #171717;
+				font-weight: 800;
+			}
+		}
+	}
+
+	&__body {
+		min-width: 100%;
+	}
+
+	&__row {
+		display: flex;
+		transition: background $mu-duration-fast $mu-ease;
+		border-bottom: 1rpx solid rgba(226, 232, 240, 0.6);
+		min-width: 100%;
+
+		&:last-child { border-bottom: none; }
+		&:active { background: rgba(0, 0, 0, 0.02); }
+		&--striped { background: #FAFAFA; }
+	}
+
+	&__td {
+		display: flex;
+		align-items: center;
+		padding: 22rpx 24rpx;
+		box-sizing: border-box;
+		background: #ffffff;
+
+		&-text {
+			font-size: 26rpx;
+			color: $mu-text-secondary;
+			font-weight: 400;
+			word-break: break-all;
+			flex: 1;
+		}
+	}
+
+	/* 斑马纹下的固定列背景 */
+	&__row--striped &__td {
+		background: #FAFAFA;
+	}
+
+	/* 粘性固定列投影增强 */
+	&__col--fixed-left {
+		box-shadow: 4rpx 0 12rpx -2rpx rgba(15, 23, 42, 0.06);
+	}
+
+	&__col--fixed-right {
+		box-shadow: -4rpx 0 12rpx -2rpx rgba(15, 23, 42, 0.06);
+	}
+
+	&__empty {
+		padding: 60rpx 24rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		&-text { font-size: 26rpx; color: #94A3B8; font-weight: 500; }
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-table {
+		background: $mu-dark-bg-base;
+		border-color: $mu-dark-border;
+
+		&__header {
+			background: rgba(255, 255, 255, 0.04);
+			border-color: $mu-dark-border;
+		}
+		&__th {
+			background: rgba(255, 255, 255, 0.04);
+		}
+		&__th-text { color: $mu-dark-text-primary; }
+
+		&__row {
+			border-color: rgba(255, 255, 255, 0.08);
+			&:active { background: rgba(255, 255, 255, 0.05); }
+			&--striped { background: rgba(255, 255, 255, 0.02); }
+		}
+
+		&__td {
+			background: $mu-dark-bg-base;
+		}
+		&__row--striped &__td {
+			background: rgba(255, 255, 255, 0.02);
+		}
+		&__td-text { color: $mu-dark-text-secondary; }
+
+		&__col--fixed-left {
+			box-shadow: 4rpx 0 12rpx -2rpx rgba(0, 0, 0, 0.4);
+		}
+		&__col--fixed-right {
+			box-shadow: -4rpx 0 12rpx -2rpx rgba(0, 0, 0, 0.4);
+		}
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-table {
+		background: $mu-dark-bg-base;
+		border-color: $mu-dark-border;
+
+		&__header {
+			background: rgba(255, 255, 255, 0.04);
+			border-color: $mu-dark-border;
+		}
+		&__th {
+			background: rgba(255, 255, 255, 0.04);
+		}
+		&__th-text { color: $mu-dark-text-primary; }
+
+		&__row {
+			border-color: rgba(255, 255, 255, 0.08);
+			&:active { background: rgba(255, 255, 255, 0.05); }
+			&--striped { background: rgba(255, 255, 255, 0.02); }
+		}
+
+		&__td {
+			background: $mu-dark-bg-base;
+		}
+		&__row--striped &__td {
+			background: rgba(255, 255, 255, 0.02);
+		}
+		&__td-text { color: $mu-dark-text-secondary; }
+
+		&__col--fixed-left {
+			box-shadow: 4rpx 0 12rpx -2rpx rgba(0, 0, 0, 0.4);
+		}
+		&__col--fixed-right {
+			box-shadow: -4rpx 0 12rpx -2rpx rgba(0, 0, 0, 0.4);
+		}
+	}
+}
+</style>