muzhiyu-ui 1.0.1 → 1.0.3

package/README.md

@@ -1,17 +1,18 @@
 # MuzhiyuUI 极奢全端组件库
 
-> **MuzhiyuUI** 是一套专为 **UniApp + Vue 3** 打造的全端极奢 UI 组件库。包含 **89+ 生产级高频组件**、**Axios 级拦截器 HTTP 客户端**、**格式化与正则校验工具箱** 以及 **全平台暗黑模式原生适配**。
+> **MuzhiyuUI** 是一套专为 **UniApp + Vue 3** 打造的全端极奢 UI 组件库。包含 **90+ 生产级高频组件**、**Axios 级拦截器 HTTP 客户端**、**格式化与正则校验工具箱**、**TypeScript 全量智能提示** 以及 **全平台暗黑模式原生适配**。
 
 ---
 
 ## 🌟 核心特性 (Key Features)
 
 - ⚡ **Vue 3 + `<script setup>` 驱动**：全量采用 Vue 3 Composition API 重构，逻辑清晰，性能卓越；
+- 📘 **TypeScript 原生类型支持**：内置 `index.d.ts` 声明文件与 `@vue/runtime-core` 全局组件模板智能补全，提供极其流畅的 IDE 编码体验；
 - 🎨 **极奢流光美学设计**：拒绝大众平庸调色，采用现代微渐变、毛玻璃浮岛、Bento 悬浮卡片与动效细节；
 - 📱 **100% 微信小程序 + H5 + App 全端兼容**：重构虚拟节点 `virtualHost: true`，彻底消除小程序自定义组件壳导致的 Flex 错位与样式压缩问题；
 - 🌙 **原生暗黑模式 (Dark Mode)**：全量组件支持 `prefers-color-scheme: dark` 自动跟从系统深色切换；
 - 📦 **支持 `easycom` 按需加载**：无需手动 `import` 组件，随用随写，打包体积小巧；
-- 🛠️ **完整工具链集结**：自带网络请求拦截器 (`http`)、表单正则校验 (`validate`)、脱敏/格式化 (`format`) 与颜色计算器 (`color`)。
+- 🛠️ **完整工具链集结 (`$mu`)**：自带网络请求拦截器 (`http`)、表单正则校验 (`validate`)、脱敏/格式化 (`format`) 与颜色计算器 (`color`)。
 
 ---
 
@@ -19,12 +20,13 @@
 
 ```text
 uni_modules/muzhiyu-ui/
-├── components/            <-- 89+ 核心 UI 组件
+├── components/            <-- 90+ 核心 UI 组件
 ├── utils/                 <-- 统一网络请求与工具函数
 │   ├── request.js         <-- HTTP 客户端拦截器
 │   └── index.js           <-- 正则/格式化/脱敏工具箱
-├── index.js               <-- Vue3 插件注册入口
-├── uni.scss               <-- 全局 SCSS 主题变量
+├── index.js               <-- Vue 3 插件注册入口
+├── index.d.ts             <-- TypeScript 全量类型声明文件
+├── theme.scss             <-- 全局 SCSS 主题变量
 └── package.json           <-- 插件市场配置文件
 ```
 
@@ -110,12 +112,13 @@ console.log(uni.$mu.validate.isEmail('test@example.com')) // true
 
 ---
 
-## 📚 89+ 核心组件全景清单
+## 📚 90+ 核心组件全景清单
 
 ### 1. 基础组件 (Basic)
 | 组件名 | 说明 | 示例标签 |
 | :--- | :--- | :--- |
 | **mu-button** | 极奢按钮（支持流光、圆角、加载、禁用与各种尺寸） | `<mu-button type="primary">确认提交</mu-button>` |
+| **mu-image** | 极奢图片（支持骨架屏占位、失败降级、圆角/头像、全屏预览、淡入） | `<mu-image src="..." width="200" height="200" preview />` |
 | **mu-icon** | 矢量图标（内置 100+ 高频极简图标库） | `<mu-icon name="heart" size="24" color="#F43F5E" />` |
 | **mu-cell** | 单元格组（支持图标、箭头、副标题与右侧插槽） | `<mu-cell title="个人资料" is-link />` |
 | **mu-tag** | 标签（支持渐变、镂空、胶囊与点状） | `<mu-tag type="success">已完成</mu-tag>` |
@@ -199,4 +202,4 @@ const gridList = [
 
 ## 📄 开源协议 (License)
 
-[MIT License](LICENSE) - 欢迎自由使用于商业与开源项目！
+[MIT License](https://opensource.org/licenses/MIT)

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

@@ -161,7 +161,6 @@ const computedIconSize = computed(() => {
 
 const defaultIconColor = computed(() => {
 	if (props.iconColor) return props.iconColor
-	if (props.color) return props.color
 	if (props.plain) {
 		switch (props.type) {
 			case 'primary': return config?.primaryColor?.value || '#171717'
@@ -171,6 +170,11 @@ const defaultIconColor = computed(() => {
 			default: return '#64748B'
 		}
 	}
+	// 实色按钮 (primary, danger, success, warning) 图标默认必须为纯白
+	if (props.type === 'primary' || props.type === 'danger' || props.type === 'success' || props.type === 'warning') {
+		return '#ffffff'
+	}
+	if (props.color) return props.color
 	if (props.type === 'default' || props.type === 'text' || props.type === 'link') return '#475569'
 	return '#ffffff'
 })

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

@@ -0,0 +1,265 @@
+<template>
+	<view
+		class="mu-image"
+		:class="[
+			round && 'mu-image--round',
+			loading && 'mu-image--loading',
+			isError && 'mu-image--error'
+		]"
+		:style="wrapStyle"
+		@tap="handleClick"
+		@click="handleClick"
+	>
+		<!-- 主图片内容 -->
+		<image
+			v-if="!isError"
+			class="mu-image__inner"
+			:class="[fade && loaded && 'mu-image__inner--fade']"
+			:src="src"
+			:mode="mode"
+			:lazy-load="lazyLoad"
+			:show-menu-by-longpress="showMenuByLongpress"
+			:style="imageStyle"
+			@load="handleLoad"
+			@error="handleError"
+		/>
+
+		<!-- 加载状态/骨架屏占位 -->
+		<view
+			v-if="loading && showLoading"
+			class="mu-image__placeholder mu-image__placeholder--loading"
+			:style="placeholderStyle"
+		>
+			<slot name="loading">
+				<view v-if="loadingIcon === 'loading'" class="mu-image__spinner"></view>
+				<mu-icon v-else :name="loadingIcon" size="36" color="#94A3B8" />
+			</slot>
+		</view>
+
+		<!-- 加载失败占位 -->
+		<view
+			v-if="isError && showError"
+			class="mu-image__placeholder mu-image__placeholder--error"
+			:style="placeholderStyle"
+		>
+			<slot name="error">
+				<view class="mu-image__error-box">
+					<mu-icon :name="errorIcon" size="44" color="#CBD5E1" />
+					<text v-if="errorText" class="mu-image__error-text">{{ errorText }}</text>
+				</view>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+
+defineOptions({
+	name: 'MuImage',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared'
+	}
+})
+
+const props = defineProps({
+	src: { type: String, default: '' },
+	mode: { type: String, default: 'aspectFill' },
+	width: { type: [Number, String], default: '100%' },
+	height: { type: [Number, String], default: '100%' },
+	radius: { type: [Number, String], default: 0 },
+	round: { type: Boolean, default: false },
+	lazyLoad: { type: Boolean, default: true },
+	showLoading: { type: Boolean, default: true },
+	showError: { type: Boolean, default: true },
+	loadingIcon: { type: String, default: 'loading' },
+	errorIcon: { type: String, default: 'image' },
+	errorText: { type: String, default: '' },
+	preview: { type: Boolean, default: false },
+	fade: { type: Boolean, default: true },
+	duration: { type: [Number, String], default: 300 },
+	bgColor: { type: String, default: '' },
+	showMenuByLongpress: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['click', 'load', 'error'])
+
+const loading = ref(true)
+const isError = ref(false)
+const loaded = ref(false)
+
+watch(
+	() => props.src,
+	(val) => {
+		if (val) {
+			loading.value = true
+			isError.value = false
+			loaded.value = false
+		} else {
+			loading.value = false
+			isError.value = true
+		}
+	},
+	{ immediate: true }
+)
+
+const formatUnit = (val) => {
+	if (typeof val === 'number') return `${val}rpx`
+	if (!val) return 'auto'
+	return /^\d+$/.test(val) ? `${val}rpx` : val
+}
+
+const wrapStyle = computed(() => {
+	const style = {
+		width: formatUnit(props.width)
+	}
+
+	// 宽度适应模式下，高度自动按比例自适应
+	if (props.mode === 'widthFix') {
+		style.height = 'auto'
+	} else if (props.mode === 'heightFix') {
+		style.width = 'auto'
+		style.height = formatUnit(props.height)
+	} else {
+		style.height = formatUnit(props.height)
+	}
+
+	if (props.round) {
+		style.borderRadius = '50%'
+	} else if (props.radius) {
+		style.borderRadius = formatUnit(props.radius)
+	}
+	return style
+})
+
+const placeholderStyle = computed(() => {
+	const style = {}
+	if (props.bgColor) {
+		style.backgroundColor = props.bgColor
+	}
+	return style
+})
+
+const imageStyle = computed(() => {
+	const style = {}
+	if (props.fade && !loaded.value) {
+		style.opacity = 0
+	} else {
+		style.opacity = 1
+	}
+	style.transition = `opacity ${props.duration}ms ease`
+	return style
+})
+
+function handleLoad(e) {
+	loading.value = false
+	isError.value = false
+	loaded.value = true
+	emit('load', e)
+}
+
+function handleError(e) {
+	loading.value = false
+	isError.value = true
+	loaded.value = false
+	emit('error', e)
+}
+
+function handleClick(e) {
+	emit('click', e)
+	if (props.preview && props.src && !isError.value) {
+		uni.previewImage({
+			urls: [props.src],
+			current: props.src
+		})
+	}
+}
+</script>
+
+<style lang="scss">
+.mu-image {
+	position: relative;
+	display: inline-block;
+	overflow: hidden;
+	box-sizing: border-box;
+	vertical-align: middle;
+
+	&--round {
+		border-radius: 50% !important;
+	}
+
+	&__inner {
+		width: 100%;
+		height: 100%;
+		display: block;
+		will-change: opacity;
+	}
+
+	&__placeholder {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 1;
+		background-color: var(--mu-bg-gray, rgba(241, 245, 249, 0.7));
+		transition: background-color 0.3s ease;
+	}
+
+	&__spinner {
+		width: 36rpx;
+		height: 36rpx;
+		border: 4rpx solid rgba(148, 163, 184, 0.2);
+		border-top-color: #94A3B8;
+		border-radius: 50%;
+		animation: mu-image-spin 0.8s linear infinite;
+	}
+
+	&__error-box {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__error-text {
+		font-size: 22rpx;
+		color: #94A3B8;
+		margin-top: 8rpx;
+	}
+}
+
+@keyframes mu-image-spin {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+/* 暗黑模式自适应跟从 */
+.mu-dark {
+	.mu-image__placeholder {
+		background-color: rgba(30, 30, 44, 0.8) !important;
+	}
+	.mu-image__spinner {
+		border-color: rgba(255, 255, 255, 0.15);
+		border-top-color: #FFFFFF;
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+	.mu-image__placeholder {
+		background-color: rgba(30, 30, 44, 0.8);
+	}
+	.mu-image__spinner {
+		border-color: rgba(255, 255, 255, 0.15);
+		border-top-color: #FFFFFF;
+	}
+}
+</style>

package/index.d.ts

@@ -162,6 +162,7 @@ declare module '@vue/runtime-core' {
 		MuGridItem: typeof import('./components/muzhiyu/mu-grid-item/mu-grid-item.vue')['default']
 		MuHtml: typeof import('./components/muzhiyu/mu-html/mu-html.vue')['default']
 		MuIcon: typeof import('./components/muzhiyu/mu-icon/mu-icon.vue')['default']
+		MuImage: typeof import('./components/muzhiyu/mu-image/mu-image.vue')['default']
 		MuImageGrid: typeof import('./components/muzhiyu/mu-image-grid/mu-image-grid.vue')['default']
 		MuImagePreview: typeof import('./components/muzhiyu/mu-image-preview/mu-image-preview.vue')['default']
 		MuIndexList: typeof import('./components/muzhiyu/mu-index-list/mu-index-list.vue')['default']

package/index.js

@@ -5,7 +5,8 @@
  * @version 1.0.0
  */
 import http from './utils/request.js'
-import { util, validate, format, color } from './utils/index.js'
+import { util, validate, validator, color } from './utils/index.js'
+const format = util // 别名挂载
 
 // Toast 快捷 JS 弹窗函数
 const toast = (title, type, options = {}) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muzhiyu-ui",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "基于 UniApp Vue3 + SCSS 打造的全端极奢组件库",
   "main": "index.js",
   "types": "index.d.ts",
@@ -29,7 +29,7 @@
   "uni_modules": {
     "id": "muzhiyu-ui",
     "name": "muzhiyu-ui 极奢组件库",
-    "version": "1.0.1",
+    "version": "1.0.3",
     "description": "基于 UniApp Vue3 + SCSS 打造的全端极奢 UI 组件库",
     "site": "",
     "displayName": "MuzhiyuUI 极奢全端组件库"

package/utils/index.js

@@ -529,6 +529,8 @@ util.notify.close = () => uni.$emit('mu-notify-close')
 util.loadingPage.hide = () => uni.$emit('mu-loading-page-hide')
 util.loadingPage.close = () => uni.$emit('mu-loading-page-hide')
 
+export const format = util
+
 /**
  * 全局统一导出核心入口对象 (mu)
  */