muzhiyu-ui 1.0.0

package/README.md

@@ -0,0 +1,202 @@
+# MuzhiyuUI 极奢全端组件库
+
+> **MuzhiyuUI** 是一套专为 **UniApp + Vue 3** 打造的全端极奢 UI 组件库。包含 **89+ 生产级高频组件**、**Axios 级拦截器 HTTP 客户端**、**格式化与正则校验工具箱** 以及 **全平台暗黑模式原生适配**。
+
+---
+
+## 🌟 核心特性 (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` 组件，随用随写，打包体积小巧；
+- 🛠️ **完整工具链集结**：自带网络请求拦截器 (`http`)、表单正则校验 (`validate`)、脱敏/格式化 (`format`) 与颜色计算器 (`color`)。
+
+---
+
+## 📦 目录结构 (Directory Structure)
+
+```text
+uni_modules/muzhiyu-ui/
+├── components/            <-- 89+ 核心 UI 组件
+├── utils/                 <-- 统一网络请求与工具函数
+│   ├── request.js         <-- HTTP 客户端拦截器
+│   └── index.js           <-- 正则/格式化/脱敏工具箱
+├── index.js               <-- Vue3 插件注册入口
+├── uni.scss               <-- 全局 SCSS 主题变量
+└── package.json           <-- 插件市场配置文件
+```
+
+---
+
+## 🚀 快速上手 (Quick Start)
+
+### 方式一：作为 `uni_modules` 使用（推荐）
+
+1. 在 DCloud 插件市场点击 **“导入到 HBuilderX”** 或下载解压至项目的 `uni_modules/muzhiyu-ui` 目录下；
+2. 打开项目的 `pages.json`，配置 `easycom` 按需自动解析规则：
+
+```json
+{
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^mu-(.*)": "@/uni_modules/muzhiyu-ui/components/mu-$1/mu-$1.vue"
+    }
+  }
+}
+```
+
+配置完成后，无需在任何页面引入，直接在 `.vue` 模板中使用组件即可！
+
+---
+
+### 方式二：作为 `npm` 包使用
+
+1. 在项目根目录终端运行安装命令：
+   ```bash
+   npm install muzhiyu-ui
+   ```
+
+2. 在 `pages.json` 中配置 `easycom`：
+   ```json
+   {
+     "easycom": {
+       "autoscan": true,
+       "custom": {
+         "^mu-(.*)": "muzhiyu-ui/components/muzhiyu/mu-$1/mu-$1.vue"
+       }
+     }
+   }
+   ```
+
+---
+
+## 🛠️ 全局挂载与工具函数 ($mu)
+
+在 `main.js` 中挂载全局插件：
+
+```javascript
+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`：
+
+```javascript
+// 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
+```
+
+---
+
+## 📚 89+ 核心组件全景清单
+
+### 1. 基础组件 (Basic)
+| 组件名 | 说明 | 示例标签 |
+| :--- | :--- | :--- |
+| **mu-button** | 极奢按钮（支持流光、圆角、加载、禁用与各种尺寸） | `<mu-button type="primary">确认提交</mu-button>` |
+| **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>` |
+| **mu-badge** | 徽标角标（数字角标与小红点） | `<mu-badge :count="99"><view>消息</view></mu-badge>` |
+| **mu-divider** | 分割线（支持带有文案或纯线） | `<mu-divider text="我是有底线的" />` |
+| **mu-space** | 垂直/水平弹性留白距 | `<mu-space height="30" />` |
+| **mu-blank** | 两侧固定留白容器 | `<mu-blank width="32">内容...</mu-blank>` |
+
+### 2. 表单与输入组件 (Form & Inputs)
+| 组件名 | 说明 | 示例标签 |
+| :--- | :--- | :--- |
+| **mu-input** | 文本输入框（带清除、前后缀、密码切换） | `<mu-input v-model="form.name" placeholder="请输入姓名" />` |
+| **mu-checkbox** | 复选框与复选框组 | `<mu-checkbox-group v-model="checkedList">...</mu-checkbox-group>` |
+| **mu-radio** | 单选框与单选框组 | `<mu-radio-group v-model="radioVal">...</mu-radio-group>` |
+| **mu-switch** | 异步开关 | `<mu-switch v-model="enabled" />` |
+| **mu-rate** | 评分组件（支持半星与自定义图标） | `<mu-rate v-model="score" allow-half />` |
+| **mu-slider** | 滑块选择器 | `<mu-slider v-model="volume" />` |
+| **mu-upload** | 多图/视频上传（支持进度条、预览与删除） | `<mu-upload v-model:file-list="fileList" />` |
+| **mu-code-input** | 验证码/密码分割输入框 | `<mu-code-input :length="6" v-model="code" />` |
+| **mu-signature** | 手写电子签名板（输出 Canvas 图像） | `<mu-signature @confirm="onSignDone" />` |
+
+### 3. 布局与容器组件 (Layout)
+| 组件名 | 说明 | 示例标签 |
+| :--- | :--- | :--- |
+| **mu-grid** | 宫格布局（金刚区、Bento 悬浮卡片、支持 `border` 与 `square`） | `<mu-grid :columns="4" border><mu-grid-item text="首页" /></mu-grid>` |
+| **mu-card** | 奢华卡片容器（支持封面、标题与底部操作栏） | `<mu-card title="VisionOS 规范" cover="..." />` |
+| **mu-waterfall** | 动态瀑布流布局（双列贪心算法自动分配高度） | `<mu-waterfall :data="goodsList" />` |
+| **mu-table** | 高级表格（支持表头固定、左右固定列与斑马纹） | `<mu-table :columns="cols" :data="tableData" />` |
+
+### 4. 导航与选项卡 (Navigation)
+| 组件名 | 说明 | 示例标签 |
+| :--- | :--- | :--- |
+| **mu-navbar** | 顶部导航栏（支持沉浸式、返回按键与自定义插槽） | `<mu-navbar title="订单详情" :is-back="true" />` |
+| **mu-tabs** | 选项卡（支持滚动、居中、居左与 `sticky` 原生粘性吸顶） | `<mu-tabs :tabs="tabList" sticky :offset-top="0" />` |
+| **mu-tabbar** | 底部导航栏（普通模式、悬浮毛玻璃浮岛模式、异形凸起模式） | `<mu-tabbar :items="tabbarItems" mode="island" />` |
+| **mu-sidebar** | 联动侧边导航栏 | `<mu-sidebar :options="categories" v-model:active="activeIdx" />` |
+| **mu-steps** | 步骤条 | `<mu-steps :options="stepList" :current="1" />` |
+| **mu-index-list** | 拼音首字母索引列表（通讯录风格） | `<mu-index-list :data="cityData" />` |
+
+### 5. 反馈与弹层组件 (Feedback & Modals)
+| 组件名 | 说明 | 示例标签 |
+| :--- | :--- | :--- |
+| **mu-modal** | 极奢对话框（支持异步按钮与插槽自定义） | `<mu-modal v-model:show="showModal" title="确认提示" />` |
+| **mu-toast** | 快捷消息轻提示 | `this.$refs.toast.show({ title: '保存成功' })` |
+| **mu-notify** | 顶部通知提醒栏 | `this.$refs.notify.show({ type: 'warning', message: '网络异常' })` |
+| **mu-popup** | 多方向弹出层（顶部/底部/左侧/右侧） | `<mu-popup v-model:show="showPopup" position="bottom">...</mu-popup>` |
+| **mu-cropper** | 高性能图片裁剪器（支持旋转、缩放与正方形/圆形导出） | `<mu-cropper :src="tempImg" @confirm="onCropped" />` |
+
+---
+
+## 💻 典型代码使用范例
+
+### 1. 吸顶 Tabs 与 4 列金刚区 Demo
+```html
+<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](LICENSE) - 欢迎自由使用于商业与开源项目！

package/components/muzhiyu/mu-action-sheet/mu-action-sheet.vue

@@ -0,0 +1,335 @@
+<template>
+	<view v-if="visible" class="mu-action-sheet" :class="[panelShow && 'mu-action-sheet--open']">
+		<!-- 遮罩层 -->
+		<view class="mu-action-sheet__mask" @tap="onMaskTap"></view>
+
+		<!-- 底部面板 -->
+		<view class="mu-action-sheet__body" :class="[panelShow && 'mu-action-sheet__body--show']" @tap.stop>
+			<!-- 标题与副标题 -->
+			<view v-if="title || description" class="mu-action-sheet__header">
+				<text v-if="title" class="mu-action-sheet__title">{{ title }}</text>
+				<text v-if="description" class="mu-action-sheet__desc">{{ description }}</text>
+			</view>
+
+			<!-- 操作选项列表 -->
+			<view class="mu-action-sheet__list">
+				<view
+					v-for="(item, index) in formattedItems"
+					:key="index"
+					class="mu-action-sheet__item mu-touchable-flat"
+					:class="[
+						item.disabled && 'mu-action-sheet__item--disabled',
+						item.danger && 'mu-action-sheet__item--danger'
+					]"
+					@tap="handleClick(index, item)"
+				>
+					<!-- 选项图标 -->
+					<view v-if="item.icon || item.img" class="mu-action-sheet__icon-wrap">
+						<mu-icon v-if="item.icon" :name="item.icon" :size="20" :color="getItemColor(item)" />
+						<image v-else-if="item.img" class="mu-action-sheet__img" :src="item.img" mode="aspectFit" />
+					</view>
+
+					<!-- 文本与描述 -->
+					<view class="mu-action-sheet__info">
+						<text class="mu-action-sheet__text" :style="{ color: getItemColor(item) }">{{ item.text }}</text>
+						<text v-if="item.description" class="mu-action-sheet__subtext">{{ item.description }}</text>
+					</view>
+
+					<!-- 尾部标签 Tag / Badge -->
+					<view v-if="item.badge" class="mu-action-sheet__badge-box">
+						<mu-tag type="danger" size="small" shape="capsule">{{ item.badge }}</mu-tag>
+					</view>
+				</view>
+			</view>
+
+			<!-- 隔离底栏与取消按钮 -->
+			<view v-if="showCancel" class="mu-action-sheet__cancel-gap"></view>
+			<view v-if="showCancel" class="mu-action-sheet__cancel mu-touchable-flat" @tap="handleCancel">
+				<text class="mu-action-sheet__cancel-text">{{ cancelText }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+/**
+ * mu-action-sheet 动作面板
+ * @description 底部弹出式操作面板，常用于微信分享、照片选择、危险操作确认
+ * @property {boolean} show - 是否显示面板
+ * @property {Array} items / actions - 操作列表 [{text, description, icon, color, danger, disabled, badge}]
+ * @property {string} title - 标题
+ * @property {string} description - 副标题说明
+ * @property {string} cancelText - 取消按钮文本
+ * @property {boolean} showCancel - 是否显示取消按钮
+ * @property {boolean} maskClosable - 点击遮罩层是否关闭
+ * @event {Function} select - 选中菜单项时触发
+ * @event {Function} cancel - 点击取消时触发
+ */
+import { ref, computed, watch } from 'vue'
+
+const props = defineProps({
+	show: { type: Boolean, default: false },
+	items: { type: Array, default: () => [] },
+	actions: { type: Array, default: () => [] },
+	title: { type: String, default: '' },
+	description: { type: String, default: '' },
+	cancelText: { type: String, default: '取消' },
+	showCancel: { type: Boolean, default: true },
+	maskClosable: { type: Boolean, default: true }
+})
+
+const emit = defineEmits(['click', 'cancel', 'select', 'update:show', 'close'])
+
+const visible = ref(false)
+const panelShow = ref(false)
+
+const rawItems = computed(() => {
+	if (props.items && props.items.length) return props.items
+	return props.actions || []
+})
+
+const formattedItems = computed(() => {
+	return rawItems.value.map(item => {
+		if (typeof item === 'object' && item !== null) {
+			return {
+				text: item.text || item.label || item.name || '',
+				description: item.description || item.subText || item.desc || '',
+				icon: item.icon || '',
+				img: item.img || item.image || '',
+				color: item.color || '',
+				danger: !!item.danger,
+				disabled: !!item.disabled,
+				badge: item.badge || 0,
+				dot: !!item.dot
+			}
+		}
+		return { text: String(item), danger: false, disabled: false }
+	})
+})
+
+function getItemColor(item) {
+	if (item.disabled) return '#CBD5E1'
+	if (item.danger) return '#F43F5E'
+	if (item.color) return item.color
+	return '#0F172A'
+}
+
+function handleClick(index, item) {
+	if (item.disabled) return
+	emit('click', { index, item })
+	emit('select', { index, item })
+	close()
+}
+
+function handleCancel() {
+	emit('cancel')
+	close()
+}
+
+function onMaskTap() {
+	if (props.maskClosable) {
+		handleCancel()
+	}
+}
+
+function close() {
+	panelShow.value = false
+	emit('update:show', false)
+	setTimeout(() => {
+		visible.value = false
+		emit('close')
+	}, 250)
+}
+
+watch(() => props.show, (val) => {
+	if (val) {
+		visible.value = true
+		setTimeout(() => {
+			panelShow.value = true
+		}, 30)
+	} else {
+		panelShow.value = false
+		setTimeout(() => {
+			visible.value = false
+		}, 250)
+	}
+}, { immediate: true })
+</script>
+
+<style lang="scss" scoped>
+@import "@/uni.scss";
+
+.mu-action-sheet {
+	position: fixed;
+	left: 0;
+	right: 0;
+	top: 0;
+	bottom: 0;
+	z-index: $mu-z-popup;
+
+	&__mask {
+		position: absolute;
+		inset: 0;
+		background: rgba(15, 23, 42, 0.45);
+		backdrop-filter: blur(8px);
+		opacity: 0;
+		transition: opacity 0.25s ease;
+	}
+
+	&--open &__mask {
+		opacity: 1;
+	}
+
+	&__body {
+		position: absolute;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: #F8FAFC;
+		border-radius: 36rpx 36rpx 0 0;
+		overflow: hidden;
+		transform: translateY(100%);
+		transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
+		padding-bottom: env(safe-area-inset-bottom, 0);
+		box-shadow: 0 -12rpx 40rpx rgba(15, 23, 42, 0.12);
+
+		&--show {
+			transform: translateY(0);
+		}
+	}
+
+	&__header {
+		padding: 32rpx 36rpx 24rpx;
+		text-align: center;
+		background: #ffffff;
+		border-bottom: 1rpx solid rgba(226, 232, 240, 0.8);
+	}
+
+	&__title {
+		font-size: 28rpx;
+		font-weight: 800;
+		color: $mu-text-primary;
+		display: block;
+		letter-spacing: -0.5rpx;
+	}
+
+	&__desc {
+		font-size: 22rpx;
+		color: #94A3B8;
+		display: block;
+		margin-top: 8rpx;
+	}
+
+	&__list {
+		background: #ffffff;
+	}
+
+	&__item {
+		display: flex;
+		align-items: center;
+		padding: 32rpx 36rpx;
+		border-bottom: 1rpx solid rgba(226, 232, 240, 0.7);
+		cursor: pointer;
+		transition: background 0.15s ease;
+
+		&:last-child {
+			border-bottom: none;
+		}
+
+		&:active {
+			background: rgba(99, 102, 241, 0.04);
+		}
+
+		&--disabled {
+			opacity: 0.45;
+			cursor: not-allowed;
+		}
+	}
+
+	&__icon-wrap {
+		margin-right: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__img {
+		width: 40rpx;
+		height: 40rpx;
+	}
+
+	&__info {
+		flex: 1;
+		min-width: 0;
+		display: flex;
+		flex-direction: column;
+	}
+
+	&__text {
+		font-size: 28rpx;
+		font-weight: 700;
+		line-height: 1.3;
+	}
+
+	&__subtext {
+		font-size: 22rpx;
+		color: #94A3B8;
+		margin-top: 4rpx;
+	}
+
+	&__cancel-gap {
+		height: 14rpx;
+		background: #F1F5F9;
+	}
+
+	&__cancel {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 108rpx;
+		background: #ffffff;
+		cursor: pointer;
+		transition: background 0.15s ease;
+
+		&:active {
+			background: rgba(99, 102, 241, 0.04);
+		}
+
+		&-text {
+			font-size: 28rpx;
+			font-weight: 800;
+			color: #64748B;
+		}
+	}
+}
+
+.mu-dark, page.mu-dark {
+
+	.mu-action-sheet {
+		&__mask { background: rgba(0, 0, 0, 0.65); }
+		&__body { background: #0F172A; }
+		&__header, &__list, &__cancel { background: $mu-dark-bg-base; }
+		&__header { border-color: rgba(255, 255, 255, 0.08); }
+		&__title { color: $mu-dark-text-primary; }
+		&__desc, &__subtext { color: $mu-dark-text-secondary; }
+		&__item { border-color: rgba(255, 255, 255, 0.06); }
+		&__cancel-gap { background: #0F172A; }
+		&__cancel-text { color: $mu-dark-text-secondary; }
+	}
+}
+
+@media (prefers-color-scheme: dark) {
+
+	.mu-action-sheet {
+		&__mask { background: rgba(0, 0, 0, 0.65); }
+		&__body { background: #0F172A; }
+		&__header, &__list, &__cancel { background: $mu-dark-bg-base; }
+		&__header { border-color: rgba(255, 255, 255, 0.08); }
+		&__title { color: $mu-dark-text-primary; }
+		&__desc, &__subtext { color: $mu-dark-text-secondary; }
+		&__item { border-color: rgba(255, 255, 255, 0.06); }
+		&__cancel-gap { background: #0F172A; }
+		&__cancel-text { color: $mu-dark-text-secondary; }
+	}
+}
+</style>