@atooyu/uxto-ui

@atooyu/uxto-ui

跨平台 UI 组件库，支持 Android、iOS、鸿蒙 三端打包。

文档网站 | 快速开始 | 组件列表

安装

npm install @atooyu/uxto-ui
# 或
pnpm add @atooyu/uxto-ui

技术栈

• 框架: uni-app + Vue 3 + TypeScript
• 构建: Vite
• 样式: SCSS

快速开始

安装依赖

npm install

开发模式

# H5
npm run dev:h5

# App (Android/iOS)
npm run dev

# 微信小程序
npm run dev:mp-weixin

构建打包

# App
npm run build:app

# 鸿蒙
npm run build:harmony

# H5
npm run build:h5

# 微信小程序
npm run build:mp-weixin

组件列表

基础组件

表单组件

反馈组件

导航组件

展示组件

其他组件

使用方式

组件支持 easycom 自动导入，无需手动引入：

<template>
  <u-button type="primary">按钮</u-button>
  <u-input v-model="value" placeholder="请输入" />
  <u-tabbar v-model="active" />
</template>

目录结构

uxto-ui/
├── src/
│   ├── components/       # 组件目录
│   │   ├── u-button/
│   │   ├── u-input/
│   │   └── ...
│   ├── pages/            # 页面目录
│   ├── styles/           # 样式文件
│   ├── App.vue
│   ├── main.ts
│   ├── manifest.json     # 应用配置
│   └── pages.json        # 页面配置
├── docs/                 # 文档目录
├── ecosystem/            # 生态工具
│   ├── cli/             # 命令行工具
│   ├── build/           # 构建配置
│   └── style/           # 样式系统
├── package.json
├── vite.config.ts
└── tsconfig.json

Ecosystem 生态

@uxto-ui/cli

命令行脚手架工具

# 安装
npm install -g @uxto-ui/cli

# 创建项目
uxto create my-app

# 添加组件
uxto add button

@uxto-ui/style

样式系统和设计令牌

@use '@uxto-ui/style' as *;

.container {
  color: $uxto-primary;
  padding: $uxto-spacing-4;
}

@uxto-ui/build

构建配置工具

import { createUniBuildConfig } from '@uxto-ui/build'

发布到 NPM

构建组件库

npm run build:lib

发布

# 登录 npm
npm login

# 发布
npm publish

发布作用域包

npm publish --access public

打包说明

Android 打包

1. 运行 npm run build:app
2. 使用 HBuilderX 云打包或离线打包

iOS 打包

1. 运行 npm run build:app
2. 使用 HBuilderX 云打包或离线打包

鸿蒙打包

1. 运行 npm run build:harmony
2. 使用 DevEco Studio 打开项目打包

跨平台兼容性

所有组件都已适配以下平台：

• ✅ Android
• ✅ iOS
• ✅ 鸿蒙 (HarmonyOS)
• ✅ H5
• ✅ 微信小程序

兼容性处理

1. 安全区域: 使用 env(safe-area-inset-*) 并添加鸿蒙兼容变量
2. 触摸事件: 统一使用 @click 和 @touchstart 等事件
3. API调用: 使用 uni.* API 而非平台特定 API
4. CSS属性: 移除 cursor 等 Web-only 属性

License

MIT