uni-app x 新组件库v0.1.0发布，多端统一开发

v0.1.0 为首个公开版本 ：UTS + uvue 编写、一套组件源码覆盖 App（Android / iOS / HarmonyOS）、Web、小程序，easycom 免 import 免注册，全部视觉参数收敛为 $m-* SCSS 变量编译期注入，内置 11 个基础组件。Web 端编译与运行全量验证（渲染、事件、主题覆盖矩阵实测），蒸汽模式（vapor）编译验证通过。

一、为什么做这个库

直接用 uni-app x 的原生 view / text 搭界面，按钮的按压反馈与加载态、0.5px 细边框、文本单行 / 多行省略、徽标截断与偏移......每一处交互细节都要手写，App / Web / 小程序还要逐端调样式。unix-ui 把这些重复劳动收敛成一套开箱即用的组件库：

用过主流 uni-app 组件库？ 组件划分、props 命名、视觉规格全面对齐，心智零迁移，看一眼 API 就能上手
多端发布？ UTS + uvue 一套源码编译到多端，hairline 细边框、滚动容器等平台差异由库内确定性实现，不用逐端排查
在意主题？ 全部视觉参数收敛为 $m-* SCSS 变量（全 !default），编译期注入，根 uni.scss 改一行全组件生效，零运行时开销

底层只依赖 uni-app x 内置组件与 UniElement.animate，不重造渲染栈；UTS 源码分发（Web / 小程序 → JS，Android → Kotlin，iOS → Swift），由 uni-app x 编译链现场编译。

二、核心能力

easycom 零注册

遵循 uni_modules 组件插件规范（插件 id：m-ui-x），模板里直接写标签，无需 import 与手动注册：

html 复制代码

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

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

编译期主题定制

默认主题零配置内置（组件内顶层引入 theme/vars.scss，全 !default）；在工程根 uni.scss 直接定义同名变量即全局覆盖，编译期叠加生效：

scss 复制代码

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

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

跨端一致的小屏细节

0.5px hairline 细边框 ：ucss 无伪元素，采用绝对定位 view + scale(0.5) 方案，Web 与原生端表现一致
按压反馈 ：基于 hover-class 实现按压态（透明度可主题覆盖），禁用 / 加载状态不出现按压反馈
加载动画 ：UniElement.animate 实现（ucss 禁用 @keyframes 的约束下），组件样式自包含，无全局样式注入

内置 11 个基础组件

组件	说明
m-button	按钮：语义色 type、plain / disabled / loading、四档尺寸、block、hairline 细边框、按压反馈
m-cell / m-cell-group	单元格与分组：title / value / label、图标、四向箭头、inset 圆角卡片分组
m-row / m-col	栅格布局：gutter 间距、对齐、换行
m-icon	图标：257 个内置字体图标（ttf 随包分发）、颜色尺寸、自定义图标插槽
m-image	图片：mode 直通、加载 / 失败占位、淡入过渡、圆形、懒加载
m-text	文本：语义色 / 色值双模式、三档字号、单行省略、多行截断、可选中
m-space	间距：方向 / 换行 / 对齐，size 单值或双值（行 / 列）分写
m-loading	加载：circular / spinner 双形态、自定义色与尺寸、带文案
m-badge	徽标：数字 / 点、max 截断、语义色与色值、位置偏移、独立形态

三、平台支持现状

平台	状态
Web	✅ 编译与运行验证通过（渲染、事件、主题覆盖矩阵实测；示例工程部署于文档站在线演示，浏览器直接体验）
Android / iOS / HarmonyOS / 小程序	⏳ 代码已按条件编译适配（UTS 源码分发，编译链现场编译），待真机与开发者工具实测

示例工程已启用蒸汽模式（vapor: true + vapor-render-target: bytecode），全部组件在蒸汽模式编译验证通过。

四、快速上手

bash 复制代码

pnpm add @meng-xi/unix-ui
mkdir -p uni_modules && cp -R node_modules/@meng-xi/unix-ui uni_modules/m-ui-x

packages/core 为标准 uni_modules 组件插件 （插件 id：m-ui-x，目录名须与之一致），业务侧零配置 easycom 导入；若采用其他目录名或直接引用 node_modules，需在 pages.json 中自行配置 easycom 规则。

组件使用与主题定制示例见「二、核心能力」，全部可用变量见 theme/vars.scss，按 $m-<组件>-<属性> 命名。

五、文档与资源

📖 完整文档（指南 + 组件参考 + 更新日志，中英双语，从入门到精通）
📝 更新日志
🖥️ 在线演示