muzhiyu-ui

MuzhiyuUI 极奢全端组件库

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 组件，随用随写，打包体积小巧；
• 🛠️ 完整工具链集结 ($mu)：自带网络请求拦截器 (http)、表单正则校验 (validate)、脱敏/格式化 (format) 与颜色计算器 (color)。

📦 目录结构 (Directory Structure)

uni_modules/muzhiyu-ui/
├── components/            <-- 90+ 核心 UI 组件
├── utils/                 <-- 统一网络请求与工具函数
│   ├── request.js         <-- HTTP 客户端拦截器
│   └── index.js           <-- 正则/格式化/脱敏工具箱
├── index.js               <-- Vue 3 插件注册入口
├── index.d.ts             <-- TypeScript 全量类型声明文件
├── 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 '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('13812345678')) // "138****5678"

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

📚 90+ 核心组件全景清单

1. 基础组件 (Basic)

2. 表单与输入组件 (Form & Inputs)

3. 布局与容器组件 (Layout)

4. 导航与选项卡 (Navigation)

5. 反馈与弹层组件 (Feedback & Modals)

💻 典型代码使用范例

1. 吸顶 Tabs 与 4 列金刚区 Demo

<template>
  <view class="container">
    <!-- 1. 吸顶选项卡 -->
    <mu-tabs :tabs="categoryTabs" :current="activeTab" sticky :offset-top="0" @change="activeTab = $event" />

    <!-- 2. 经典 4 列金刚区 -->
    <mu-grid :columns="4" border>
      <mu-grid-item v-for="(item, i) in gridList" :key="i" :text="item.name" :icon="item.icon" :badge="item.badge" />
    </mu-grid>
  </view>
</template>

<script setup>
import { ref } from 'vue'
const activeTab = ref(0)
const categoryTabs = ['精选推荐', '热门排行', '最新上架', '手机数码']
const gridList = [
  { name: '扫一扫', icon: 'scan', badge: 0 },
  { name: '付款码', icon: 'qr_code', badge: 0 },
  { name: '卡券包', icon: 'credit_card', badge: 'HOT' },
  { name: '消息', icon: 'message', badge: 5 }
]
</script>

📄 开源协议 (License)

MIT License