muzhiyu-ui 1.0.3 → 1.0.5

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

@@ -196,7 +196,14 @@ const buttonClass = computed(() => [
 
 const wrapStyle = computed(() => {
 	const style = {}
-	if (props.block) style.width = '100%'
+	if (props.block) {
+		style.width = '100%'
+		style.display = 'block'
+	} else if (props.width) {
+		style.width = '100%'
+		style.display = 'flex'
+		style.justifyContent = 'center'
+	}
 	if (props.margin) style.margin = props.margin
 	return style
 })
@@ -290,7 +297,8 @@ function onChooseAvatar(e) { emit('chooseavatar', e) }
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
-		line-height: 1.2;
+		line-height: 1;
+		vertical-align: middle;
 	}
 
 	&__icon {
@@ -299,6 +307,7 @@ function onChooseAvatar(e) { emit('chooseavatar', e) }
 		justify-content: center;
 		line-height: 1;
 		flex-shrink: 0;
+		vertical-align: middle;
 
 		&--left { margin-right: 8rpx; }
 		&--right { margin-left: 8rpx; }

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

@@ -28,7 +28,7 @@
 				</view>
 
 				<!-- 中间标题与副说明 -->
-				<view class="mu-cell__content">
+				<view class="mu-cell__content" :style="contentStyle">
 					<view class="mu-cell__title">
 						<slot><text class="mu-cell__title-text">{{ title }}</text></slot>
 					</view>
@@ -38,7 +38,7 @@
 				</view>
 
 				<!-- 右侧自定义插槽 (支持绑定/授权手机号按钮、开关、文案等) -->
-				<view class="mu-cell__right" @tap.stop>
+				<view class="mu-cell__right" @tap="handleClick">
 					<slot name="right">
 						<slot name="value">
 							<text v-if="value" class="mu-cell__value">{{ value }}</text>
@@ -75,7 +75,8 @@ import { ref, computed } from 'vue'
 const props = defineProps({
 	title: { type: String, default: '' },
 	label: { type: String, default: '' },
-	value: { type: String, default: '' },
+	value: { type: [String, Number], default: '' },
+	titleWidth: { type: [String, Number], default: '' }, // 支持自定义标题固定宽度，如 '180rpx'
 	icon: { type: String, default: '' },
 	iconSize: { type: [Number, String], default: 20 },
 	iconColor: { type: String, default: '' },
@@ -97,6 +98,18 @@ const props = defineProps({
 
 const emit = defineEmits(['click', 'click-swipe', 'delete'])
 
+const contentStyle = computed(() => {
+	if (props.titleWidth) {
+		const w = typeof props.titleWidth === 'number' ? `${props.titleWidth}rpx` : props.titleWidth
+		return {
+			width: w,
+			flexShrink: 0,
+			flexGrow: 0
+		}
+	}
+	return {}
+})
+
 const touchStartX = ref(0)
 const touchStartY = ref(0)
 const swipeOffset = ref(0)
@@ -231,10 +244,11 @@ function handleClick(e) {
 	&--disabled { opacity: 0.45; pointer-events: none; }
 	&--center .mu-cell__body { align-items: center; }
 
-	&--required .mu-cell__title-text::before {
+	/* 必填红星号后置 */
+	&--required .mu-cell__title-text::after {
 		content: '*';
-		color: $mu-danger;
-		margin-right: 6rpx;
+		color: #ef4444;
+		margin-left: 4rpx;
 		font-size: 26rpx;
 		font-weight: 700;
 	}
@@ -291,8 +305,10 @@ function handleClick(e) {
 	&__right {
 		display: flex;
 		align-items: center;
+		justify-content: flex-end;
 		margin-left: 20rpx;
-		flex-shrink: 0;
+		flex: 1; /* 自动填满右侧剩余宽度 */
+		min-width: 0;
 	}
 
 	&__value {

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

@@ -1,20 +1,13 @@
 <template>
 	<view class="mu-icon" :style="iconWrapStyle" @tap="handleClick">
-		<!-- 图片模式 (网络图片/本地图片/Base64) -->
+		<!-- 图片模式与 SVG DataURI 矢量模式（100% 兼容微信小程序） -->
 		<image
-			v-if="isImageUrl"
+			v-if="isImageUrl || svgDataUri"
 			class="mu-icon__image"
-			:src="imageUrl"
+			:src="isImageUrl ? imageUrl : svgDataUri"
 			:style="imageSizeStyle"
 			mode="aspectFit"
 		/>
-		<!-- 内联 SVG 矢量图标 - 100% 极速精准渲染 -->
-		<view
-			v-else-if="svgInnerHtml"
-			class="mu-icon__svg-wrap"
-			:style="imageSizeStyle"
-			v-html="svgInnerHtml"
-		></view>
 		<!-- 回退文本 -->
 		<text v-else class="mu-icon__fallback" :style="textStyle">{{ name }}</text>
 	</view>
@@ -723,19 +716,19 @@ const isImageUrl = computed(() => {
 	)
 })
 
-const svgInnerHtml = computed(() => {
+const svgDataUri = computed(() => {
 	if (isImageUrl.value) return ''
 	const key = props.name ? props.name.toLowerCase() : 'info'
 	const targetKey = aliasMap[key] || key
 	const path = rawSvgPaths[targetKey] || rawSvgPaths['info']
 	if (!path) return ''
-
-	const colorVal = (!props.color || props.color === 'currentColor') ? 'currentColor' : props.color
+	// 替换 # 为 %23 以兼容微信小程序 SVG DataURI 编码
+	let colorVal = (!props.color || props.color === 'currentColor') ? '%23ffffff' : props.color.replace(/#/g, '%23')
 	const isFill = ['star', 'heart'].includes(targetKey)
 	const fillAttr = isFill ? colorVal : 'none'
 	const strokeAttr = isFill ? 'none' : colorVal
-
-	return `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="${fillAttr}" stroke="${strokeAttr}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${path}</svg>`
+	const svgString = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="${fillAttr}" stroke="${strokeAttr}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${path}</svg>`
+	return `data:image/svg+xml;utf8,${svgString}`
 })
 
 const iconWrapStyle = computed(() => ({

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

@@ -7,12 +7,12 @@
 		error && 'mu-input--error',
 		filled && 'mu-input--filled'
 	]">
-		<!-- 标题 Label (包含必填红星与位置布局) -->
+		<!-- 标题 Label (必填红星号后置) -->
 		<view v-if="label || $slots.label" class="mu-input__label-box" :style="labelBoxStyle">
-			<text v-if="required" class="mu-input__required">*</text>
 			<slot name="label">
 				<text class="mu-input__label-text">{{ label }}</text>
 			</slot>
+			<text v-if="required" class="mu-input__required" style="color: #ef4444; margin-left: 4rpx;">*</text>
 		</view>
 
 		<!-- 输入框主容器 Main Box -->
@@ -116,7 +116,7 @@ const props = defineProps({
 	placeholder: { type: String, default: '请输入' },
 	disabled: { type: Boolean, default: false },
 	clearable: { type: Boolean, default: false },
-	maxlength: { type: Number, default: -1 },
+	maxlength: { type: [Number, String], default: -1 },
 	counter: { type: Boolean, default: false },
 	autoHeight: { type: Boolean, default: false },
 	error: { type: Boolean, default: false },

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

@@ -80,7 +80,7 @@ const props = defineProps({
 	title: { type: String, default: '' },
 	value: { type: String, default: '' },
 	mode: { type: String, default: 'number' },              // number | idcard | car
-	maxlength: { type: Number, default: 0 },
+	maxlength: { type: [Number, String], default: 0 },
 	decimal: { type: Boolean, default: false },
 	showToolbar: { type: Boolean, default: true },
 	extraKey: { type: String, default: '' }

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

@@ -42,6 +42,14 @@
 <script setup>
 import { computed } from 'vue'
 
+defineOptions({
+	name: 'mu-section',
+	options: {
+		virtualHost: true,
+		styleIsolation: 'shared'
+	}
+})
+
 const props = defineProps({
 	title: { type: String, default: '' },
 	desc: { type: String, default: '' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "muzhiyu-ui",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "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.3",
+    "version": "1.0.5",
     "description": "基于 UniApp Vue3 + SCSS 打造的全端极奢 UI 组件库",
     "site": "",
     "displayName": "MuzhiyuUI 极奢全端组件库"