更新记录

0.1.0（2026-10-27） 下载此版本

• 首个版本发布：面向 uni-app x 的 UI 组件库（UTS + uvue 一套源码多端覆盖），内置 11 个基础组件
• 新增 m-button 按钮组件：支持类型（default / primary / success / warning / danger）、尺寸（large / normal / small / mini）、朴素、圆角、方形、细边框（0.5px）、块级、禁用、加载状态（加载图标由 m-loading 驱动，loading-type 支持 circular / spinner）、按压反馈（hover-class 实现）与自定义颜色（含渐变）
• 新增 m-badge 徽标组件：右上角徽标数字 / 文案 / 红点，支持 max 截断（{max}+）、语义色名与 CSS 色值、四角 position、offset-x/offset-y 偏移、show-zero 与 content 自定义内容插槽；无子元素时独立展示，可与 m-icon 组合使用
• 新增 m-icon 图标组件：内置 257 个字体图标（name 为 IconName 联合类型），支持 color / size 自定义、custom-class / custom-style 标签样式直达、icon 插槽与 click 事件；字体文件随包内置（@font-face 声明式加载），零配置、离线可用
• 新增 m-loading 加载组件：circular（弧段圆环）/ spinner（花瓣）双形态，支持 color / size 自定义（size 支持 100% 撑满外部定尺寸容器）、vertical 垂直排列、text-size / text-color 文案样式、默认文案插槽与 icon 自定义图标插槽；动画基于 UniElement.animate（ucss 无 @keyframes）
• 新增 m-cell / m-cell-group 单元格组件：title / value / label、图标、四向箭头、inset 圆角卡片分组
• 新增 m-row / m-col 栅格布局组件：gutter 间距、对齐、换行
• 新增 m-image 图片组件：mode 直通、加载 / 失败占位、淡入过渡、圆形、懒加载
• 新增 m-text 文本组件：语义色 / 色值双模式、三档字号、单行省略、多行截断、可选中
• 新增 m-space 间距组件：方向 / 换行 / 对齐，size 单值或双值（行 / 列）分写
• 主题机制：默认主题零配置内置（组件内顶层引入 theme/vars.scss，全 !default），在工程根 uni.scss 直接定义 $m-* 变量即可编译期全局覆盖
• easycom 自动导入：遵循 uni_modules 组件插件规范（插件 id：m-ui-x），免 import 免注册

平台兼容性

uni-app x(3.8.7)

其他

m-ui-x

为 uni-app x 提供功能完善的 UI 组件库（UTS + uvue 编写，一套组件多端覆盖）。

m-ui-x 是开源项目 unix-ui 的 uni_modules 插件发行版（npm 包名 @meng-xi/unix-ui），内置按钮、徽标、图标、加载、单元格、栅格、图片、文本、间距等 11 个基础组件，把原生开发的交互细节（按压反馈、0.5px 细边框、文本省略、徽标截断……）与多端差异一次收敛。

特性

• easycom 零注册：<m-button> 标签直接使用，无需 import 与手动注册
• 多端覆盖，vapor 兼容：一套组件源码覆盖 App（Android / iOS / HarmonyOS）、Web、微信小程序，支持蒸汽模式
• 编译期主题定制：全部视觉参数以 $m-* SCSS 变量（全 !default）收敛，在根 uni.scss 定义同名变量即覆盖，零运行时开销
• 跨端一致的小屏细节：0.5px hairline 细边框（transform 缩放方案）、按压反馈等平台差异由库内统一处理
• 组合式 API + 强类型 UTS：props / events 全量类型标注，UTS / TS 提示到位；动画走 UniElement.animate，无 @keyframes 依赖
• 无全局副作用：组件样式自包含，无全局样式注入，随用随取

平台兼容性

环境要求：HBuilderX 5.08+，uni-app x 项目。

使用说明

1. 导入插件

在 HBuilderX 中通过插件市场「导入插件」安装，插件位于工程 uni_modules/m-ui-x/；也可从 npm 安装 @meng-xi/unix-ui 后将包内容复制到 uni_modules/m-ui-x/。

2. 使用组件

easycom 自动导入，模板中直接书写标签：

<template>
    <m-button type="primary" @click="onClick">主要按钮</m-button>
</template>

<script setup lang="uts">
    const onClick = () => {
        uni.showToast({ title: '点击了按钮' })
    }
</script>

3. 主题定制（可选）

在工程根 uni.scss 中直接定义同名变量即可覆盖默认值（编译期 !default 叠加，无需引入任何文件）：

/* 常规按钮高度 44px → 48px */
$m-button-normal-height: 48px;

请勿在 uni.scss 中 @import 插件内 vars.scss——uni.scss 会注入每个组件样式，与组件内引用同一文件会触发 sass 循环导入。

组件清单

文档与演示

• 📖 完整文档（指南 + 组件参考 + 更新日志，中英双语）：https://mengxi-studio.github.io/unix-ui/
• 💻 在线演示（浏览器直接体验）：Playground
• 📱 Android 真机体验：下载演示 App（APK）

更新记录

0.1.0（2026-10-27）

• 首个版本发布：面向 uni-app x 的 UI 组件库，内置 11 个基础组件
• 主题机制：默认主题零配置内置，根 uni.scss 直接定义 $m-* 变量即可编译期全局覆盖
• easycom 自动导入：遵循 uni_modules 组件插件规范，免 import 免注册

完整更新记录见 changelog.md。

交流与支持

想了解设计思路与实现原理（编译期主题变量注入、hairline 跨端方案、UTS 组件开发等）？公众号「梦曦工作室」有系列解析，扫码获取更多信息：

• 🐛 Issues / 💬 Discussions
• 🌐 官网：mengxi-studio.github.io

开源协议

MIT © MengXi-Studio