AutoMes UI

基于 PrimeVue 的 MES 系统 UI 组件库。

📦 简介

automes-ui 是一个为 AutoComm MES 系统定制的 Vue 3 组件库，基于 PrimeVue 构建，提供了一套统一的 UI 组件和主题配置。

✨ 特性

• 🎨 基于 PrimeVue 4.x 的自定义主题
• 🔧 开箱即用的业务组件
• 📱 响应式设计
• 💪 完整的 TypeScript 类型支持
• 🎯 全局组件类型声明
• ⚡ Vite 7 构建
• 📦 支持 ES Module 和 CommonJS

📚 组件列表

基础组件

• Button - 按钮组件
• Switch - 开关组件
• Tooltip - 提示框组件

数据展示

• DataTable - 数据表格
• Empty - 空状态组件

表单组件

• MsForm - 表单组件
• MsSelect - 选择器组件
• MsPickList - 穿梭框组件

反馈组件

• Dialog - 对话框
• Confirm - 确认框
• Message - 消息提示

导航组件

• Menu - 菜单组件
• RouteSearch - 路由搜索
• SearchBar - 搜索栏

🚀 安装

npm

npm install automes-ui

pnpm

pnpm add automes-ui

yarn

yarn add automes-ui

注意: primevue 和 primeicons 会作为依赖自动安装

Monorepo 中使用

{
  "dependencies": {
    "automes-ui": "workspace:^"
  }
}

📖 使用

方式 1: 完整引入（推荐）

完整引入会自动配置 PrimeVue 和注册所有组件：

import { createApp } from 'vue'
import AutomesUI from 'automes-ui'
// 导入样式
import 'automes-ui/styles'
import App from './App.vue'

const app = createApp(App)

// 自动完成：
// 1. 配置 PrimeVue + 自定义主题
// 2. 注册所有组件
app.use(AutomesUI)

app.mount('#app')

方式 2: 只注册组件

如果你已经配置了 PrimeVue，只想注册组件：

import { createApp } from 'vue'
import PrimeVue from 'primevue/config'
import { install } from 'automes-ui'
// 导入样式（二选一）
import 'automes-ui/styles'  // 使用组件库提供的样式导入
// 或者手动导入
// import 'primevue/resources/primevue.min.css'
// import 'primeicons/primeicons.css'
import App from './App.vue'

const app = createApp(App)

// 先配置 PrimeVue
app.use(PrimeVue, {
  // 你的配置
})

// 再注册组件
app.use({ install })

app.mount('#app')

方式 3: 按需引入

import { MsButton, MsDialog, MsMessage } from 'automes-ui'
// 导入样式
import 'automes-ui/styles'

// 在组件中使用
export default {
  components: {
    MsButton,
    MsDialog
  }
}

提示: 所有使用方式都需要导入 automes-ui/styles 来加载必需的样式文件

TypeScript 支持

组件库提供完整的类型定义，安装后即可获得：

• ✅ 组件 Props 的智能提示
• ✅ 事件类型检查
• ✅ 全局组件类型声明（无需手动导入）

// 自动获得类型提示
import type { MsFormProps, MsSelectProps, ColumnType } from 'automes-ui'

// 在模板中使用组件也有完整的类型提示
<template>
  <MsButton label="点击" @click="handleClick" />
  <MsDialog v-model:visible="visible" title="标题" />
</template>

使用自定义主题

组件库内置了自定义的 PrimeVue Aura 主题预设，使用完整引入时会自动应用：

// 主题配置已内置，包含：
// - 自定义颜色方案
// - Ripple 波纹效果
// - Outlined 输入框样式

如果需要自定义主题，可以单独导入：

import { createCustomPreset } from 'automes-ui/themes'
import PrimeVue from 'primevue/config'

app.use(PrimeVue, {
  theme: {
    preset: createCustomPreset()
  }
})

📚 API 文档

导出的类型

// 组件 Props 类型
import type {
  SwitchProps,
  MsFormProps,
  MsFormItemType,
  MsSelectProps,
  MsPickListProps,
  ConfirmProps,
  SearchInfoType,
  ColumnType
} from 'automes-ui'

// 工具类型
import type {
  ConfirmInstance,
  ConfirmOptions,
  ConfirmHandler,
  Message
} from 'automes-ui'

全局方法

// Message 消息提示
import { MsMessage } from 'automes-ui'

MsMessage.success('操作成功')
MsMessage.error('操作失败')
MsMessage.warning('警告信息')
MsMessage.info('提示信息')

// Confirm 确认框
const result = await MsMessage.confirm({
  title: '确认删除',
  message: '确定要删除这条记录吗？',
  type: 'danger'
})

🛠️ 开发

本地开发

# 安装依赖
pnpm install

# 构建
pnpm build

# 发布（需要配置 NPM_TOKEN）
git tag ui-v1.0.x
git push origin ui-v1.0.x

目录结构

automes-ui/
├── src/
│   ├── components/     # 组件源码
│   ├── hooks/          # 自定义 Hooks
│   ├── themes/         # 主题配置
│   ├── assets/         # 静态资源
│   ├── global.d.ts     # 全局类型声明
│   └── index.ts        # 组件入口
├── es/                 # ES 模块构建输出
├── lib/                # CommonJS 构建输出
├── global.d.ts         # 全局类型声明（发布）
└── index.ts            # 包入口文件

📝 依赖

Peer Dependencies

• Vue ^3.5.0

Dependencies

• PrimeVue ^4.4.0
• PrimeIcons ^7.0.0
• @primeuix/themes ^1.2.5

Dev Dependencies

• TypeScript ^5.8.2
• Vite ^7.2.4
• @vitejs/plugin-vue ^5.2.1

🔗 相关链接

• PrimeVue 官方文档
• GitHub 仓库
• NPM 包

📋 更新日志

v1.0.4

• ✨ 提供 automes-ui/styles 样式入口
• 📝 更新文档，添加样式导入说明
• 🐛 修复引入后没有样式的问题
• 💡 支持通过 import 'automes-ui/styles' 导入所有必需样式

v1.0.3

• 📝 更新 README 文档

v1.0.2

• ✨ 添加完整的 TypeScript 类型支持
• ✨ 添加全局组件类型声明
• 🐛 修复 install 函数导出问题

v1.0.1

• 🎉 首次发布
• ✨ 基础组件库
• ✨ 自定义主题配置

🤝 贡献

欢迎提交 Issue 和 Pull Request！

👨‍💻 作者

hero

📄 许可证

ISC