muzhiyu-ui 1.0.0 → 1.0.2

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-config/mu-config.vue

@@ -1,7 +1,7 @@
 <template>
 	<view
 		class="mu-config-provider"
-		:class="[computedTheme === 'dark' && 'mu-dark']"
+		:class="[computedTheme === 'dark' ? 'mu-dark' : 'mu-light']"
 		:style="providerStyle"
 	>
 		<slot></slot>
@@ -14,26 +14,53 @@ import { computed, provide } from 'vue'
 import MuToast from '../mu-toast/mu-toast.vue'
 
 const props = defineProps({
-	theme: { type: String, default: 'light' }, // light | dark
-	primaryColor: { type: String, default: '#171717' },
+	theme: { type: String, default: 'light' }, // light | dark | auto
+	primaryColor: { type: String, default: '' },
+	successColor: { type: String, default: '' },
+	warningColor: { type: String, default: '' },
+	errorColor: { type: String, default: '' },
+	borderRadius: { type: String, default: '' },
 	zIndex: { type: Number, default: 1000 },
 	unit: { type: String, default: 'rpx' }
 })
 
 const computedTheme = computed(() => props.theme)
 const computedPrimary = computed(() => props.primaryColor)
+const computedSuccess = computed(() => props.successColor)
+const computedWarning = computed(() => props.warningColor)
+const computedError = computed(() => props.errorColor)
+const computedRadius = computed(() => props.borderRadius)
+const computedZIndex = computed(() => props.zIndex)
+const computedUnit = computed(() => props.unit)
 
 provide('muConfig', {
 	theme: computedTheme,
 	primaryColor: computedPrimary,
-	zIndex: computed(() => props.zIndex),
-	unit: computed(() => props.unit)
+	successColor: computedSuccess,
+	warningColor: computedWarning,
+	errorColor: computedError,
+	borderRadius: computedRadius,
+	zIndex: computedZIndex,
+	unit: computedUnit
 })
 
 const providerStyle = computed(() => {
 	const style = {}
 	if (props.primaryColor) {
 		style['--mu-primary'] = props.primaryColor
+		style['--mu-primary-gradient'] = props.primaryColor
+	}
+	if (props.successColor) {
+		style['--mu-success'] = props.successColor
+	}
+	if (props.warningColor) {
+		style['--mu-warning'] = props.warningColor
+	}
+	if (props.errorColor) {
+		style['--mu-error'] = props.errorColor
+	}
+	if (props.borderRadius) {
+		style['--mu-radius-base'] = props.borderRadius
 	}
 	return style
 })
@@ -49,6 +76,14 @@ const providerStyle = computed(() => {
 	&.mu-dark {
 		background-color: #08080C;
 		color: #E2E8F0;
+		--mu-bg-page: #08080C;
+		--mu-text-primary: #FFFFFF;
+		--mu-text-secondary: #94A3B8;
+		--mu-border-color: rgba(255, 255, 255, 0.12);
+	}
+	&.mu-light {
+		background-color: #F8FAFC;
+		color: #0F172A;
 	}
 }
 </style>

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

@@ -0,0 +1,220 @@
+/**
+ * MuzhiyuUI 极奢全端组件库统一 TypeScript 类型定义
+ * @author muzhiyu
+ * @version 1.0.0
+ */
+
+import { App } from 'vue'
+
+export interface MuHttpConfig {
+	baseUrl?: string
+	header?: Record<string, string>
+	timeout?: number
+	dataType?: string
+	responseType?: string
+	sslVerify?: boolean
+	withCredentials?: boolean
+}
+
+export interface MuHttp {
+	get<T = any>(url: string, data?: object, config?: MuHttpConfig): Promise<T>
+	post<T = any>(url: string, data?: object, config?: MuHttpConfig): Promise<T>
+	put<T = any>(url: string, data?: object, config?: MuHttpConfig): Promise<T>
+	delete<T = any>(url: string, data?: object, config?: MuHttpConfig): Promise<T>
+	upload<T = any>(url: string, config?: MuHttpConfig): Promise<T>
+	download<T = any>(url: string, config?: MuHttpConfig): Promise<T>
+	request<T = any>(config: MuHttpConfig & { url: string; method?: string; data?: object }): Promise<T>
+	interceptor: {
+		request: (callback: (config: MuHttpConfig) => MuHttpConfig | Promise<MuHttpConfig>) => void
+		response: (callback: (response: any) => any | Promise<any>, errorCallback?: (error: any) => any) => void
+	}
+}
+
+export interface MuUtil {
+	trim(value?: string): string
+	replaceAll(text?: string, search?: string, replacement?: string): string
+	maskPhone(num?: string | number): string
+	formatMoney(money?: number | string): string
+	formatDate(format?: string, date?: Date | string | number): string
+	debounce<T extends (...args: any[]) => any>(fn: T, delay?: number): T
+	throttle<T extends (...args: any[]) => any>(fn: T, interval?: number): T
+	deepClone<T>(target: T): T
+	guid(length?: number, firstU?: boolean, radix?: number): string
+}
+
+export interface MuValidate {
+	isEmail(val: string): boolean
+	isMobile(val: string): boolean
+	isIdCard(val: string): boolean
+	isUrl(val: string): boolean
+	isCarNo(val: string): boolean
+	isChinese(val: string): boolean
+	isNumber(val: string): boolean
+	isEmpty(val: any): boolean
+}
+
+export interface MuFormat {
+	money(amount: number | string): string
+	date(format?: string, date?: Date | string | number): string
+	phone(num: string | number): string
+}
+
+export interface MuColor {
+	hexToRgb(hex: string): string
+	rgbToHex(r: number, g: number, b: number): string
+	lighten(color: string, amount: number): string
+	darken(color: string, amount: number): string
+}
+
+export interface MuToastOptions {
+	title?: string
+	type?: 'success' | 'error' | 'fail' | 'loading' | 'default'
+	duration?: number
+	icon?: string
+	position?: 'top' | 'center' | 'bottom'
+}
+
+export interface MuNotifyOptions {
+	message: string
+	type?: 'primary' | 'success' | 'warning' | 'error' | 'info'
+	duration?: number
+	safeAreaInsetTop?: boolean
+}
+
+export interface MuLoadingPageOptions {
+	text?: string
+	type?: 'logo' | 'spinner' | 'pulse'
+	bg?: string
+	color?: string
+}
+
+export interface MuInstance {
+	http: MuHttp
+	util: MuUtil
+	validate: MuValidate
+	format: MuFormat
+	color: MuColor
+	toast(title: string | MuToastOptions, type?: string, options?: object): void
+	notify(options: string | MuNotifyOptions): void
+	loadingPage(text?: string | MuLoadingPageOptions, type?: string, options?: object): void
+}
+
+declare const mu: MuInstance & {
+	install(app: App): void
+}
+
+export const http: MuHttp
+export const util: MuUtil
+export const validate: MuValidate
+export const format: MuFormat
+export const color: MuColor
+export const toast: (title: string | MuToastOptions, type?: string, options?: object) => void
+export const notify: (options: string | MuNotifyOptions) => void
+export const loadingPage: (text?: string | MuLoadingPageOptions, type?: string, options?: object) => void
+
+export default mu
+
+declare global {
+	interface Uni {
+		$mu: MuInstance
+		$toast: (title: string | MuToastOptions, type?: string, options?: object) => void
+	}
+}
+
+declare module '@vue/runtime-core' {
+	export interface ComponentCustomProperties {
+		$mu: MuInstance
+	}
+
+	export interface GlobalComponents {
+		MuActionSheet: typeof import('./components/muzhiyu/mu-action-sheet/mu-action-sheet.vue')['default']
+		MuAlert: typeof import('./components/muzhiyu/mu-alert/mu-alert.vue')['default']
+		MuBackTop: typeof import('./components/muzhiyu/mu-back-top/mu-back-top.vue')['default']
+		MuBadge: typeof import('./components/muzhiyu/mu-badge/mu-badge.vue')['default']
+		MuBarcode: typeof import('./components/muzhiyu/mu-barcode/mu-barcode.vue')['default']
+		MuBlank: typeof import('./components/muzhiyu/mu-blank/mu-blank.vue')['default']
+		MuBottomNav: typeof import('./components/muzhiyu/mu-bottom-nav/mu-bottom-nav.vue')['default']
+		MuBubble: typeof import('./components/muzhiyu/mu-bubble/mu-bubble.vue')['default']
+		MuButton: typeof import('./components/muzhiyu/mu-button/mu-button.vue')['default']
+		MuCalendar: typeof import('./components/muzhiyu/mu-calendar/mu-calendar.vue')['default']
+		MuCarInput: typeof import('./components/muzhiyu/mu-car-input/mu-car-input.vue')['default']
+		MuCard: typeof import('./components/muzhiyu/mu-card/mu-card.vue')['default']
+		MuCascader: typeof import('./components/muzhiyu/mu-cascader/mu-cascader.vue')['default']
+		MuCell: typeof import('./components/muzhiyu/mu-cell/mu-cell.vue')['default']
+		MuCheckbox: typeof import('./components/muzhiyu/mu-checkbox/mu-checkbox.vue')['default']
+		MuCheckboxGroup: typeof import('./components/muzhiyu/mu-checkbox-group/mu-checkbox-group.vue')['default']
+		MuCodeInput: typeof import('./components/muzhiyu/mu-code-input/mu-code-input.vue')['default']
+		MuCollapse: typeof import('./components/muzhiyu/mu-collapse/mu-collapse.vue')['default']
+		MuColorPicker: typeof import('./components/muzhiyu/mu-color-picker/mu-color-picker.vue')['default']
+		MuConfig: typeof import('./components/muzhiyu/mu-config/mu-config.vue')['default']
+		MuCountdown: typeof import('./components/muzhiyu/mu-countdown/mu-countdown.vue')['default']
+		MuCropper: typeof import('./components/muzhiyu/mu-cropper/mu-cropper.vue')['default']
+		MuDatePicker: typeof import('./components/muzhiyu/mu-date-picker/mu-date-picker.vue')['default']
+		MuDatetime: typeof import('./components/muzhiyu/mu-datetime/mu-datetime.vue')['default']
+		MuDivider: typeof import('./components/muzhiyu/mu-divider/mu-divider.vue')['default']
+		MuDrawer: typeof import('./components/muzhiyu/mu-drawer/mu-drawer.vue')['default']
+		MuDropdown: typeof import('./components/muzhiyu/mu-dropdown/mu-dropdown.vue')['default']
+		MuEmpty: typeof import('./components/muzhiyu/mu-empty/mu-empty.vue')['default']
+		MuFab: typeof import('./components/muzhiyu/mu-fab/mu-fab.vue')['default']
+		MuFooter: typeof import('./components/muzhiyu/mu-footer/mu-footer.vue')['default']
+		MuForm: typeof import('./components/muzhiyu/mu-form/mu-form.vue')['default']
+		MuGrid: typeof import('./components/muzhiyu/mu-grid/mu-grid.vue')['default']
+		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']
+		MuInput: typeof import('./components/muzhiyu/mu-input/mu-input.vue')['default']
+		MuInputNumber: typeof import('./components/muzhiyu/mu-input-number/mu-input-number.vue')['default']
+		MuKeyboard: typeof import('./components/muzhiyu/mu-keyboard/mu-keyboard.vue')['default']
+		MuList: typeof import('./components/muzhiyu/mu-list/mu-list.vue')['default']
+		MuLoading: typeof import('./components/muzhiyu/mu-loading/mu-loading.vue')['default']
+		MuLoadingPage: typeof import('./components/muzhiyu/mu-loading-page/mu-loading-page.vue')['default']
+		MuLoadmore: typeof import('./components/muzhiyu/mu-loadmore/mu-loadmore.vue')['default']
+		MuModal: typeof import('./components/muzhiyu/mu-modal/mu-modal.vue')['default']
+		MuNavbar: typeof import('./components/muzhiyu/mu-navbar/mu-navbar.vue')['default']
+		MuNomore: typeof import('./components/muzhiyu/mu-nomore/mu-nomore.vue')['default']
+		MuNoticeBar: typeof import('./components/muzhiyu/mu-notice-bar/mu-notice-bar.vue')['default']
+		MuNotify: typeof import('./components/muzhiyu/mu-notify/mu-notify.vue')['default']
+		MuOverlay: typeof import('./components/muzhiyu/mu-overlay/mu-overlay.vue')['default']
+		MuPagination: typeof import('./components/muzhiyu/mu-pagination/mu-pagination.vue')['default']
+		MuPasswordInput: typeof import('./components/muzhiyu/mu-password-input/mu-password-input.vue')['default']
+		MuPicker: typeof import('./components/muzhiyu/mu-picker/mu-picker.vue')['default']
+		MuPopup: typeof import('./components/muzhiyu/mu-popup/mu-popup.vue')['default']
+		MuProgress: typeof import('./components/muzhiyu/mu-progress/mu-progress.vue')['default']
+		MuPullRefresh: typeof import('./components/muzhiyu/mu-pull-refresh/mu-pull-refresh.vue')['default']
+		MuQrcode: typeof import('./components/muzhiyu/mu-qrcode/mu-qrcode.vue')['default']
+		MuRadio: typeof import('./components/muzhiyu/mu-radio/mu-radio.vue')['default']
+		MuRadioGroup: typeof import('./components/muzhiyu/mu-radio-group/mu-radio-group.vue')['default']
+		MuRate: typeof import('./components/muzhiyu/mu-rate/mu-rate.vue')['default']
+		MuSearch: typeof import('./components/muzhiyu/mu-search/mu-search.vue')['default']
+		MuSection: typeof import('./components/muzhiyu/mu-section/mu-section.vue')['default']
+		MuSelect: typeof import('./components/muzhiyu/mu-select/mu-select.vue')['default']
+		MuShareSheet: typeof import('./components/muzhiyu/mu-share-sheet/mu-share-sheet.vue')['default']
+		MuSidebar: typeof import('./components/muzhiyu/mu-sidebar/mu-sidebar.vue')['default']
+		MuSignature: typeof import('./components/muzhiyu/mu-signature/mu-signature.vue')['default']
+		MuSkeleton: typeof import('./components/muzhiyu/mu-skeleton/mu-skeleton.vue')['default']
+		MuSlider: typeof import('./components/muzhiyu/mu-slider/mu-slider.vue')['default']
+		MuSpace: typeof import('./components/muzhiyu/mu-space/mu-space.vue')['default']
+		MuSteps: typeof import('./components/muzhiyu/mu-steps/mu-steps.vue')['default']
+		MuSticky: typeof import('./components/muzhiyu/mu-sticky/mu-sticky.vue')['default']
+		MuSwipeCell: typeof import('./components/muzhiyu/mu-swipe-cell/mu-swipe-cell.vue')['default']
+		MuSwiper: typeof import('./components/muzhiyu/mu-swiper/mu-swiper.vue')['default']
+		MuSwitch: typeof import('./components/muzhiyu/mu-switch/mu-switch.vue')['default']
+		MuTabbar: typeof import('./components/muzhiyu/mu-tabbar/mu-tabbar.vue')['default']
+		MuTable: typeof import('./components/muzhiyu/mu-table/mu-table.vue')['default']
+		MuTabs: typeof import('./components/muzhiyu/mu-tabs/mu-tabs.vue')['default']
+		MuTag: typeof import('./components/muzhiyu/mu-tag/mu-tag.vue')['default']
+		MuTextEllipsis: typeof import('./components/muzhiyu/mu-text-ellipsis/mu-text-ellipsis.vue')['default']
+		MuTimeline: typeof import('./components/muzhiyu/mu-timeline/mu-timeline.vue')['default']
+		MuTips: typeof import('./components/muzhiyu/mu-tips/mu-tips.vue')['default']
+		MuToast: typeof import('./components/muzhiyu/mu-toast/mu-toast.vue')['default']
+		MuTransfer: typeof import('./components/muzhiyu/mu-transfer/mu-transfer.vue')['default']
+		MuTree: typeof import('./components/muzhiyu/mu-tree/mu-tree.vue')['default']
+		MuUpload: typeof import('./components/muzhiyu/mu-upload/mu-upload.vue')['default']
+		MuWaterfall: typeof import('./components/muzhiyu/mu-waterfall/mu-waterfall.vue')['default']
+		MuWatermark: typeof import('./components/muzhiyu/mu-watermark/mu-watermark.vue')['default']
+	}
+}

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "muzhiyu-ui",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "基于 UniApp Vue3 + SCSS 打造的全端极奢组件库",
   "main": "index.js",
+  "types": "index.d.ts",
   "scripts": {
     "docs:dev": "npx vitepress dev docs",
     "docs:build": "npx vitepress build docs",
@@ -12,7 +13,8 @@
     "components",
     "utils",
     "theme.scss",
-    "index.js"
+    "index.js",
+    "index.d.ts"
   ],
   "keywords": [
     "uniapp",
@@ -27,7 +29,7 @@
   "uni_modules": {
     "id": "muzhiyu-ui",
     "name": "muzhiyu-ui 极奢组件库",
-    "version": "1.0.0",
+    "version": "1.0.2",
     "description": "基于 UniApp Vue3 + SCSS 打造的全端极奢 UI 组件库",
     "site": "",
     "displayName": "MuzhiyuUI 极奢全端组件库"

package/theme.scss

@@ -0,0 +1,144 @@
+/**
+ * MuZhiYuUI Panda Monochrome Design Tokens & Dark Mode System
+ * 极奢黑白熊猫风 — 极简深邃黑白、纤细线条微边框、黑白双轨制高对比度
+ */
+
+/* ===== 亮色模式核心主题色 (Light Mode Panda Black Tokens) ===== */
+$mu-primary: #171717;                                          // 亮色熊猫主色 (深邃极致黑)
+$mu-primary-hover: #333333;
+$mu-primary-active: #000000;
+$mu-primary-bg: rgba(23, 23, 23, 0.08);
+$mu-primary-border: rgba(23, 23, 23, 0.25);
+$mu-primary-gradient: #171717;
+$mu-sky-gradient: #171717;
+
+/* ===== 暗黑模式自适应高亮主题色 (Dark Mode Panda White Tokens - 纯白高对比) ===== */
+$mu-dark-primary: #FFFFFF;                                     // 暗黑熊猫主色 (纯白反色，在纯黑背景上极致清晰)
+$mu-dark-primary-hover: #F1F5F9;
+$mu-dark-primary-bg: rgba(255, 255, 255, 0.15);
+$mu-dark-primary-border: rgba(255, 255, 255, 0.35);
+$mu-dark-primary-gradient: #FFFFFF;
+
+/* ===== 语义色 ===== */
+$mu-success: #10B981;
+$mu-success-bg: rgba(16, 185, 129, 0.08);
+$mu-success-border: rgba(16, 185, 129, 0.25);
+$mu-success-gradient: #10B981;
+
+$mu-warning: #F59E0B;
+$mu-warning-bg: rgba(245, 158, 11, 0.08);
+$mu-warning-border: rgba(245, 158, 11, 0.25);
+$mu-warning-gradient: #F59E0B;
+
+$mu-error: #F43F5E;
+$mu-error-bg: rgba(244, 63, 94, 0.08);
+$mu-error-border: rgba(244, 63, 94, 0.25);
+$mu-error-gradient: #F43F5E;
+
+$mu-info: #38BDF8;
+$mu-info-bg: rgba(56, 189, 248, 0.08);
+$mu-info-border: rgba(56, 189, 248, 0.25);
+
+/* 别名映射与向下兼容 */
+$mu-gradient-primary: $mu-primary-gradient;
+$mu-gradient-success: $mu-success-gradient;
+$mu-gradient-warning: $mu-warning-gradient;
+$mu-gradient-danger: $mu-error-gradient;
+$mu-gradient-error: $mu-error-gradient;
+$mu-danger: $mu-error;
+$mu-danger-bg: $mu-error-bg;
+$mu-danger-border: $mu-error-border;
+
+/* ===== Slate 中性色阶 ===== */
+$mu-text-primary: #0F172A;        // 主标题
+$mu-text-secondary: #475569;      // 次要文本
+$mu-text-tertiary: #94A3B8;       // 辅助说明
+$mu-text-disabled: #CBD5E1;       // 禁用文本
+$mu-text-placeholder: #94A3B8;    // 占位
+$mu-text-inverse: #FFFFFF;        // 反色文本
+
+/* ===== 扁平液态玻璃背景与发光外壳 ===== */
+$mu-bg-base: rgba(255, 255, 255, 0.85);
+$mu-bg-page: #F8FAFC;
+$mu-bg-gray: #F1F5F9;
+$mu-bg-hover: rgba(255, 255, 255, 0.95);
+$mu-bg-active: rgba(241, 245, 249, 0.9);
+$mu-bg-mask: rgba(15, 23, 42, 0.6);
+$mu-glass-bg: rgba(255, 255, 255, 0.72);
+$mu-glass-border: rgba(255, 255, 255, 0.9);
+
+/* ===== 纤细微边框与高光 ===== */
+$mu-border: rgba(226, 232, 240, 0.8);
+$mu-border-color: rgba(226, 232, 240, 0.8);
+$mu-border-light: rgba(241, 245, 249, 0.8);
+$mu-border-dark: #CBD5E1;
+$mu-border-highlight: rgba(255, 255, 255, 0.95);
+
+/* ===== 透明度 ===== */
+$mu-opacity-disabled: 0.45;
+
+/* ===== 字号 ===== */
+$mu-font-xs: 20rpx;
+$mu-font-sm: 24rpx;
+$mu-font-base: 28rpx;
+$mu-font-md: 30rpx;
+$mu-font-lg: 32rpx;
+$mu-font-xl: 36rpx;
+$mu-font-2xl: 44rpx;
+$mu-font-3xl: 56rpx;
+
+$mu-line-height: 1.5;
+
+/* ===== 空间网格 ===== */
+$mu-space-1: 8rpx;
+$mu-space-2: 16rpx;
+$mu-space-3: 24rpx;
+$mu-space-4: 32rpx;
+$mu-space-5: 40rpx;
+$mu-space-6: 48rpx;
+$mu-space-8: 64rpx;
+$mu-space-10: 80rpx;
+$mu-space-12: 96rpx;
+
+/* ===== 移动端精工 Squircle 微圆角矩阵 (Mobile Native Squircle Tokens) ===== */
+$mu-radius-xs: 6rpx;          // 3px  - 极小微角标/微标签
+$mu-radius-sm: 10rpx;         // 5px  - 小号按钮/微型输入框
+$mu-radius-md: 16rpx;         // 8px  - 移动端标准按钮/表单控件 (iOS/Android Native 触控标准)
+$mu-radius-lg: 20rpx;         // 10px - 大号按键/提示框
+$mu-radius-xl: 24rpx;         // 12px - 移动端卡片/面板容器 (紧凑利落)
+$mu-radius-2xl: 32rpx;        // 16px - 模态框/底部抽屉
+$mu-radius-full: 999rpx;      // 胶囊圆角 (当 round 属性启用时)
+
+/* ===== 扁平弥散阴影 ===== */
+$mu-shadow-sm: 0 4rpx 14rpx rgba(15, 23, 42, 0.03);
+$mu-shadow-md: 0 12rpx 32rpx -4rpx rgba(15, 23, 42, 0.06);
+$mu-shadow-lg: 0 20rpx 48rpx -6rpx rgba(15, 23, 42, 0.1);
+$mu-shadow-glow: 0 12rpx 32rpx -4rpx rgba(23, 23, 23, 0.25);
+$mu-shadow-button-primary: 0 10rpx 28rpx -4rpx rgba(23, 23, 23, 0.35);
+
+/* ===== 动效贝塞尔曲线 ===== */
+$mu-ease: cubic-bezier(0.32, 0.72, 0, 1);
+$mu-ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
+$mu-duration-fast: 0.15s;
+$mu-duration: 0.25s;
+$mu-duration-slow: 0.4s;
+
+/* ===== Z-Index ===== */
+$mu-z-sticky: 99;
+$mu-z-fixed: 100;
+$mu-z-popup: 999;
+$mu-z-modal: 1000;
+$mu-z-toast: 1001;
+
+/* ===== Dark Mode OLED 暗黑变量 ===== */
+$mu-dark-bg-page: #08080C;
+$mu-dark-bg-base: rgba(22, 22, 32, 0.94);
+$mu-dark-bg-panel: rgba(26, 26, 38, 0.96);
+$mu-dark-bg-hover: rgba(36, 36, 50, 0.95);
+$mu-dark-text-primary: #F8FAFC;
+$mu-dark-text-secondary: #94A3B8;
+$mu-dark-text-tertiary: #64748B;
+$mu-dark-border: rgba(255, 255, 255, 0.12);
+$mu-dark-border-light: rgba(255, 255, 255, 0.06);
+$mu-dark-glass-bg: rgba(22, 22, 32, 0.88);
+$mu-dark-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.65);