muzhiyu-ui 1.0.0

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

@@ -0,0 +1,321 @@
+<template>
+	<view class="mu-waterfall" :style="{ gap: formattedGap }">
+		<!-- 多列布局容器 -->
+		<view
+			v-for="(col, ci) in columnData"
+			:key="ci"
+			class="mu-waterfall__col"
+			:style="{ gap: formattedGap }"
+		>
+			<view
+				v-for="(item, ii) in col"
+				:key="item._key || ii"
+				class="mu-waterfall__item"
+				:style="itemStyle"
+				@tap="handleClick(item)"
+			>
+				<slot :item="item" :index="item._index" :column="ci">
+					<!-- 默认极奢卡片视图 -->
+					<view class="mu-waterfall__card">
+						<!-- 封面图片与角标 -->
+						<view class="mu-waterfall__img-box">
+							<image
+								v-if="item.image"
+								class="mu-waterfall__img"
+								:src="item.image"
+								mode="widthFix"
+							/>
+							<view v-if="item.badge" class="mu-waterfall__badge">
+								<mu-badge :count="item.badge" type="error" />
+							</view>
+						</view>
+
+						<!-- 卡片文案区域 -->
+						<view class="mu-waterfall__info">
+							<!-- 标题 (多行自动省略) -->
+							<text v-if="item.title" class="mu-waterfall__title">{{ item.title }}</text>
+
+							<!-- 标签 Tag 组 -->
+							<view v-if="item.tag || item.tags" class="mu-waterfall__tags">
+								<text v-if="item.tag" class="mu-waterfall__tag">{{ item.tag }}</text>
+								<template v-else-if="Array.isArray(item.tags)">
+									<text v-for="(t, ti) in item.tags" :key="ti" class="mu-waterfall__tag">{{ t }}</text>
+								</template>
+							</view>
+
+							<!-- 底部价格/赞与作者 -->
+							<view class="mu-waterfall__footer">
+								<view v-if="item.price !== undefined" class="mu-waterfall__price-box">
+									<text class="mu-waterfall__symbol">￥</text>
+									<text class="mu-waterfall__price">{{ item.price }}</text>
+									<text v-if="item.originalPrice" class="mu-waterfall__original-price">￥{{ item.originalPrice }}</text>
+								</view>
+								<view v-else-if="item.user" class="mu-waterfall__user">
+									<image v-if="item.userAvatar" class="mu-waterfall__avatar" :src="item.userAvatar" mode="aspectFill" />
+									<text class="mu-waterfall__username">{{ item.user }}</text>
+								</view>
+
+								<!-- 点赞数 -->
+								<view v-if="item.likes !== undefined" class="mu-waterfall__like">
+									<mu-icon name="heart" :size="12" color="#F43F5E" />
+									<text class="mu-waterfall__like-num">{{ item.likes }}</text>
+								</view>
+							</view>
+						</view>
+					</view>
+				</slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+/**
+ * mu-waterfall 瀑布流布局
+ * @description 双列/多列贪心动态高度分配瀑布流，带全防卫空数组与格式防护
+ */
+import { computed } from 'vue'
+
+const props = defineProps({
+	data: { type: Array, default: () => [] },
+	columns: { type: [Number, String], default: 2 },       // 默认 2 列
+	gap: { type: [Number, String], default: 16 },         // 间距 rpx
+	radius: { type: [Number, String], default: 20 }       // 圆角 rpx
+})
+
+const emit = defineEmits(['click'])
+
+const formattedGap = computed(() => {
+	if (typeof props.gap === 'number') return `${props.gap}rpx`
+	if (typeof props.gap === 'string') {
+		if (props.gap.endsWith('rpx') || props.gap.endsWith('px')) return props.gap
+		return `${props.gap}rpx`
+	}
+	return '16rpx'
+})
+
+const formattedRadius = computed(() => {
+	if (typeof props.radius === 'number') return `${props.radius}rpx`
+	if (typeof props.radius === 'string') {
+		if (props.radius.endsWith('rpx') || props.radius.endsWith('px')) return props.radius
+		return `${props.radius}rpx`
+	}
+	return '20rpx'
+})
+
+// 贪心算法分配到最短列
+const columnData = computed(() => {
+	const colsCount = Math.max(1, Number(props.columns) || 2)
+	const cols = Array.from({ length: colsCount }, () => [])
+	const heights = new Array(colsCount).fill(0)
+
+	if (!props.data || !Array.isArray(props.data)) return cols
+
+	props.data.forEach((item, index) => {
+		if (!item) return
+		const minIdx = heights.indexOf(Math.min(...heights))
+		const enriched = { ...item, _key: item.id || `wf_${index}`, _index: index }
+		cols[minIdx].push(enriched)
+		// 如果有自定义高度权重，则用 height，否则默认估算 220
+		heights[minIdx] += (Number(item.height) || 220)
+	})
+
+	return cols
+})
+
+const itemStyle = computed(() => ({
+	borderRadius: formattedRadius.value
+}))
+
+function handleClick(item) {
+	emit('click', { item, index: item._index })
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-waterfall {
+	display: flex;
+	width: 100%;
+	box-sizing: border-box;
+
+	&__col {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		min-width: 0;
+	}
+
+	&__item {
+		background: #ffffff;
+		border: 1rpx solid rgba(226, 232, 240, 0.8);
+		overflow: hidden;
+		cursor: pointer;
+		box-shadow: 0 4rpx 16rpx rgba(15, 23, 42, 0.03);
+		transition: transform 0.2s ease, box-shadow 0.2s ease;
+
+		&:active {
+			transform: scale(0.98);
+		}
+	}
+
+	&__card {
+		display: flex;
+		flex-direction: column;
+		width: 100%;
+	}
+
+	&__img-box {
+		position: relative;
+		width: 100%;
+		overflow: hidden;
+		background: #F8FAFC;
+	}
+
+	&__img {
+		width: 100%;
+		display: block;
+	}
+
+	&__badge {
+		position: absolute;
+		top: 12rpx;
+		left: 12rpx;
+		background: #F43F5E;
+		padding: 4rpx 12rpx;
+		border-radius: 8rpx;
+		box-shadow: 0 4rpx 10rpx rgba(244, 63, 94, 0.3);
+
+		&-text {
+			font-size: 20rpx;
+			font-weight: 800;
+			color: #ffffff;
+			line-height: 1;
+		}
+	}
+
+	&__info {
+		padding: 16rpx 20rpx;
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__title {
+		font-size: 26rpx;
+		font-weight: 700;
+		color: $mu-text-primary;
+		line-height: 1.4;
+		margin-bottom: 8rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+
+	&__tags {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8rpx;
+		margin-bottom: 12rpx;
+	}
+
+	&__tag {
+		font-size: 18rpx;
+		font-weight: 700;
+		color: #171717;
+		background: rgba(99, 102, 241, 0.08);
+		padding: 2rpx 10rpx;
+		border-radius: 6rpx;
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-top: 4rpx;
+	}
+
+	&__price-box {
+		display: flex;
+		align-items: baseline;
+	}
+
+	&__symbol {
+		font-size: 20rpx;
+		font-weight: 800;
+		color: #F43F5E;
+	}
+
+	&__price {
+		font-size: 32rpx;
+		font-weight: 900;
+		color: #F43F5E;
+		letter-spacing: -0.5rpx;
+	}
+
+	&__original-price {
+		font-size: 20rpx;
+		color: #94A3B8;
+		text-decoration: line-through;
+		margin-left: 8rpx;
+	}
+
+	&__user {
+		display: flex;
+		align-items: center;
+	}
+
+	&__avatar {
+		width: 32rpx;
+		height: 32rpx;
+		border-radius: 50%;
+		margin-right: 8rpx;
+	}
+
+	&__username {
+		font-size: 20rpx;
+		color: #64748B;
+		font-weight: 500;
+	}
+
+	&__like {
+		display: flex;
+		align-items: center;
+		gap: 4rpx;
+
+		&-num {
+			font-size: 20rpx;
+			color: #94A3B8;
+			font-weight: 600;
+		}
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-waterfall {
+		&__item {
+			background: $mu-dark-bg-base;
+			border-color: rgba(255, 255, 255, 0.08);
+		}
+		&__img-box { background: rgba(255, 255, 255, 0.04); }
+		&__title { color: $mu-dark-text-primary; }
+		&__username, &__like-num { color: $mu-dark-text-secondary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-waterfall {
+		&__item {
+			background: $mu-dark-bg-base;
+			border-color: rgba(255, 255, 255, 0.08);
+		}
+		&__img-box { background: rgba(255, 255, 255, 0.04); }
+		&__title { color: $mu-dark-text-primary; }
+		&__username, &__like-num { color: $mu-dark-text-secondary; }
+	}
+}
+</style>

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

@@ -0,0 +1,60 @@
+<template>
+	<view class="mu-watermark" :class="{ 'mu-watermark--full': fullPage }" :style="{ opacity: opacity }">
+		<view v-for="i in count" :key="i" class="mu-watermark__inner" :style="watermarkStyle">
+			<text class="mu-watermark__text">{{ text }}</text>
+		</view>
+	</view>
+</template>
+
+<script setup>
+/**
+ * mu-watermark 水印
+ * @description 全屏或局部水印，防截图盗用
+ * @property {string} text - 水印文字
+ * @property {number} rotate - 旋转角度
+ * @property {number} gapX - 水平间距
+ * @property {number} gapY - 垂直间距
+ * @property {number} fontSize - 字号rpx
+ * @property {number} opacity - 透明度
+ * @property {string} color - 文字颜色
+ * @property {boolean} fullPage - 是否全屏
+ */
+import { computed } from 'vue'
+
+const props = defineProps({
+	text: { type: String, default: 'MuZhiYuUI' },
+	rotate: { type: Number, default: -22 },
+	gapX: { type: Number, default: 48 },
+	gapY: { type: Number, default: 48 },
+	fontSize: { type: Number, default: 28 },
+	opacity: { type: Number, default: 0.1 },
+	color: { type: String, default: '#000' },
+	fullPage: { type: Boolean, default: true },
+	count: { type: Number, default: 30 }
+})
+
+const watermarkStyle = computed(() => ({
+	transform: `rotate(${props.rotate}deg)`,
+	color: props.color,
+	fontSize: `${props.fontSize}rpx`,
+	padding: `${props.gapY}rpx ${props.gapX}rpx`
+}))
+</script>
+
+<style lang="scss" scoped>
+.mu-watermark {
+	pointer-events: none;
+	overflow: hidden;
+	position: absolute; inset: 0; z-index: 0;
+	display: flex; flex-wrap: wrap; align-content: flex-start;
+	&--full { position: fixed; }
+	&__inner {
+		display: inline-block;
+		white-space: nowrap;
+	}
+	&__text {
+		font-weight: 400;
+		user-select: none;
+	}
+}
+</style>

package/index.js

@@ -0,0 +1,83 @@
+/**
+ * MuzhiyuUI 极奢全端组件库统一入口导出文件
+ * 支持 Vue3 插件注册 app.use() 与 UniApp 全局对象 uni.$mu 零 import 调用
+ * @author muzhiyu
+ * @version 1.0.0
+ */
+import http from './utils/request.js'
+import { util, validate, format, color } from './utils/index.js'
+
+// Toast 快捷 JS 弹窗函数
+const toast = (title, type, options = {}) => {
+	let opts = {}
+	if (typeof title === 'object' && title !== null) {
+		opts = { ...title }
+		if (title.icon) {
+			opts.type = (title.icon === 'success') ? 'success' : ((title.icon === 'error' || title.icon === 'fail') ? 'error' : ((title.icon === 'loading') ? 'loading' : 'default'))
+		}
+	} else {
+		opts = { title, type: type || 'default', ...options }
+	}
+	uni.$emit('mu-toast-show', opts)
+}
+toast.hide = () => uni.$emit('mu-toast-hide')
+
+// Notify 快捷 JS 顶部通知函数
+const notify = (options) => {
+	let opts = typeof options === 'string' ? { message: options } : (options || {})
+	uni.$emit('mu-notify-show', opts)
+}
+
+// LoadingPage 快捷 JS 全屏加载页函数
+const loadingPage = (text, type, options = {}) => {
+	let opts = {}
+	if (typeof text === 'object') {
+		opts = text
+	} else {
+		opts = { text: text || '页面加载中...', type: type || 'logo', ...options }
+	}
+	uni.$emit('mu-loading-page-show', opts)
+}
+loadingPage.hide = () => uni.$emit('mu-loading-page-hide')
+loadingPage.close = () => uni.$emit('mu-loading-page-close')
+
+const mu = {
+	http,
+	util,
+	validate,
+	format,
+	color,
+	toast,
+	notify,
+	loadingPage
+}
+
+// 自动挂载到 UniApp 原生全局命名空间 uni.$mu, uni.$toast 并拦截原生 uni.showToast
+if (typeof uni !== 'undefined') {
+	uni.$mu = mu
+	uni.$toast = toast
+	uni.showToast = function(opts) {
+		toast(opts)
+	}
+	uni.hideToast = function() {
+		uni.$emit('mu-toast-hide')
+	}
+}
+
+export { http, util, validate, format, color, toast, notify, loadingPage }
+
+export default {
+	install(app) {
+		app.config.globalProperties.$mu = mu
+		if (typeof uni !== 'undefined') {
+			uni.$mu = mu
+			uni.$toast = toast
+			uni.showToast = function(opts) {
+				toast(opts)
+			}
+			uni.hideToast = function() {
+				uni.$emit('mu-toast-hide')
+			}
+		}
+	}
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "muzhiyu-ui",
+  "version": "1.0.0",
+  "description": "基于 UniApp Vue3 + SCSS 打造的全端极奢组件库",
+  "main": "index.js",
+  "scripts": {
+    "docs:dev": "npx vitepress dev docs",
+    "docs:build": "npx vitepress build docs",
+    "docs:preview": "npx vitepress preview docs"
+  },
+  "files": [
+    "components",
+    "utils",
+    "theme.scss",
+    "index.js"
+  ],
+  "keywords": [
+    "uniapp",
+    "vue3",
+    "ui-library",
+    "wechat-miniprogram",
+    "components",
+    "muzhiyu-ui"
+  ],
+  "author": "muzhiyu",
+  "license": "MIT",
+  "uni_modules": {
+    "id": "muzhiyu-ui",
+    "name": "muzhiyu-ui 极奢组件库",
+    "version": "1.0.0",
+    "description": "基于 UniApp Vue3 + SCSS 打造的全端极奢 UI 组件库",
+    "site": "",
+    "displayName": "MuzhiyuUI 极奢全端组件库"
+  },
+  "devDependencies": {
+    "vitepress": "^1.6.4"
+  }
+}