更新记录

1.0.0（2026-07-24）

1.0.0 (2026-07-24)

平台兼容性

uni-app(3.8.0)

MuzhiyuUI 极奢全端组件库

MuzhiyuUI 是一套专为 UniApp + Vue 3 打造的全端极奢 UI 组件库。内置 89 个生产级高频组件、Axios 级拦截器 HTTP 客户端、格式化与正则校验工具箱 以及 全平台暗黑模式原生适配。

🌐 官方在线文档：https://muzhiyu-ui.muyulingxi.com
📱 H5 在线体验：https://muzhiyu-ui.muyulingxi.com/h5

🌟 核心特性 (Key Features)

• ⚡ Vue 3 + <script setup> 原生驱动：全量采用 Vue 3 Composition API 重构，逻辑清晰，性能卓越；
• 🎨 黑白熊猫极奢美学设计：采用现代微渐变、毛玻璃浮岛、Bento 悬浮卡片与高帧率阻尼动效；
• 📱 100% 微信小程序 + H5 + App 全端兼容：重构虚拟节点 virtualHost: true，彻底消除小程序自定义组件壳导致的 Flex 错位与样式压缩问题；
• 🌙 原生暗黑模式 (Dark Mode)：全量组件支持 prefers-color-scheme: dark 自动跟从系统深色切换；
• 📦 支持 easycom 按需加载：无需手动 import 组件，随用随写，打包体积小巧；
• 🛠️ 完整工具链集结 ($mu)：自带网络请求拦截器 (http)、表单正则校验 (validate)、脱敏/格式化 (format) 与颜色计算器 (color)。

📦 目录结构 (Directory Structure)

uni_modules/muzhiyu-ui/
├── components/            <-- 89 款核心 UI 组件
├── utils/                 <-- 统一网络请求与工具函数
│   ├── request.js         <-- HTTP 客户端拦截器
│   └── index.js           <-- 正则/格式化/脱敏工具箱
├── index.js               <-- Vue 3 插件注册入口
├── theme.scss             <-- 全局 SCSS 主题变量
└── package.json           <-- 插件市场配置文件

🚀 快速上手 (Quick Start)

方式一：作为 uni_modules 使用（推荐）

1. 在 DCloud 插件市场点击 “导入到 HBuilderX” 或解压放入项目的 uni_modules/muzhiyu-ui 目录下；
2. 打开项目的 pages.json，配置 easycom 按需自动解析规则：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^mu-(.*)": "@/uni_modules/muzhiyu-ui/components/mu-$1/mu-$1.vue"
    }
  }
}

配置完成后，无需在任何页面引入，直接在 Vue 模板中使用组件即可！

方式二：作为 npm 包使用

1. 在项目根目录终端运行安装命令：

   npm install muzhiyu-ui

2. 在 pages.json 中配置 easycom：

   {
    "easycom": {
      "autoscan": true,
      "custom": {
        "^mu-(.*)": "muzhiyu-ui/components/muzhiyu/mu-$1/mu-$1.vue"
      }
    }
   }

🛠️ 全局挂载与工具函数 ($mu)

在 main.js 中挂载全局插件：

import { createApp } from 'vue'
import App from './App.vue'
import muzhiyuUI from '@/uni_modules/muzhiyu-ui'

const app = createApp(App)
app.use(muzhiyuUI)
app.mount('#app')

在页面中零 import 全局调用 (uni.$mu)：

挂载后，可以在任何页面、<script setup>、工具 JS 或 Pinia/Vuex 中零 import 直接调用原生 uni.$mu：

// 1. 发起网络请求 (支持全局拦截器)
uni.$mu.http.get('/api/user/info', { id: 1001 }).then(res => {
  console.log('用户信息:', res)
})

// 2. 快捷 JS Toast 弹窗 / Notify 通知
uni.$mu.toast('保存成功', 'success')
uni.$mu.notify({ message: '预约确认成功', type: 'success' })

// 3. 手机号脱敏
console.log(uni.$mu.util.maskPhone('***')) // "138****5678"

// 4. 正则校验
console.log(uni.$mu.validate.isEmail('test@example.com')) // true

📚 89 款核心组件全景清单

1. 基础组件 (Base)

2. 表单组件 (Form)

3. 布局组件 (Layout)

4. 导航组件 (Navigation)

5. 反馈与弹层 (Feedback)

6. 高级与工具类 (Advanced)

📄 开源协议 (License)

MIT License - 欢迎自由应用于商业与开源项目！