AutoMes UI

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

📦 简介

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

✨ 特性

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

📚 组件列表

基础组件

• MsButton - 按钮组件
• MsSwitch - 开关组件
• MsTooltip - 提示框组件
• MsEmpty - 空状态组件
• MsCopy - 复制组件
• MsProgressBar - 进度条组件

数据展示

• MsTable - 数据表格
• MsTreeTable - 树形表格
• MsTree - 树形组件

表单组件

• MsForm - 表单组件
• MsTabForm - 标签页表单
• MsSelect - 选择器组件
• MsTreeSelect - 树形选择器
• MsDataSelect - 数据选择器
• MsIconSelect - 图标选择器
• MsPickList - 穿梭框组件
• MsInputNumber - 数字输入框
• MsSearch - 搜索组件

反馈组件

• MsDialog - 对话框
• MsConfirm - 确认框
• MsMessage - 消息提示

导航组件

• MsMenu - 菜单组件
• MsRouteSearch - 路由搜索

高级组件

• MsWorkFlow - 工作流设计器
• MsBpmn - BPMN 流程图
• MsSqlEditor - SQL 编辑器

🚀 安装

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,
  MsTable,
  MsForm,
  MsSelect,
  MsWorkFlow,
  MsBpmn
} from 'automes-ui'
// 导入样式
import 'automes-ui/styles'

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

提示: 所有使用方式都需要导入 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 文档

导出的类型

// 基础组件类型
import type {
  ButtonProps,
  ButtonType,
  TooltipProps,
  SwitchProps,
  EmptyProps,
  MsCopyProps,
  MsCopyEmits,
  MsProgressBarProps,
  MsProgressBarEmits,
  UploadFileInfo,
  UploadProgress
} from 'automes-ui'

// 表单组件类型
import type {
  MsFormProps,
  MsFormItemType,
  MsFormItemProps,
  MsFormInstance,
  MsTabFormProps,
  MsTabFormEmits,
  MsTabFormInstance,
  MsTabItem,
  MsSelectProps,
  MsSelectInstance,
  MsTreeSelectProps,
  MsTreeSelectEmits,
  MsTreeSelectItem,
  MsDataSelectProps,
  MsDataSelectOption,
  MsDataSelectEmits,
  MsDataSelectMode,
  MsDataSelectComponentType,
  MsIconSelectProps,
  MsPickListProps,
  MsPickListLoadDataResponse,
  MsInputNumberProps,
  MsInputNumberEmits,
  MsSearchFormItem,
  MsSearchParams,
  MsSearchProps,
  MsSearchEmits,
  BaseItemProps,
  SelectItemProps
} from 'automes-ui'

// 数据展示组件类型
import type {
  MsColumnType,
  MsTableProps,
  MsTableInstance,
  MsTreeTableProps,
  MsTreeTableColumnType,
  MsTreeProps
} from 'automes-ui'

// 反馈组件类型
import type {
  MsDialogProps,
  MsDialogInstance,
  MsDialogEmits,
  ConfirmProps,
  ConfirmInstance,
  ConfirmOptions,
  ConfirmHandler,
  ConfirmFn,
  Confirm,
  Message,
  MessageProps,
  MessageOptions
} from 'automes-ui'

// 导航组件类型
import type {
  MenuProps,
  RouterSearchProps
} from 'automes-ui'

// 高级组件类型
import type {
  MsWorkFlowProps,
  PaletteItem,
  CustomIconConfig,
  ElementChangeEvent,
  SelectionChangeEvent,
  ElementProperties,
  PaletteConfig,
  NodeConfig,
  NodeCategory,
  ToolbarButton,
  MsNodeItem,
  MsSqlEditorProps
} 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.3.0
• PrimeVue ^4.4.0
• @primevue/core ^4.5.3
• @primeuix/themes ^1.2.5

Dependencies

• PrimeVue ^4.4.0
• PrimeIcons ^7.0.0
• @primeuix/themes ^1.2.5
• bpmn-js ^18.9.1 (BPMN 流程图支持)
• codemirror ^5.65.20 (代码编辑器支持)
• codemirror-editor-vue3 ^2.8.0

Dev Dependencies

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

🔗 相关链接

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

📋 更新日志

v1.1.5 (当前版本)

• ✨ 新增 MsWorkFlow 工作流设计器组件
• ✨ 新增 MsBpmn BPMN 流程图组件
• ✨ 新增 MsSqlEditor SQL 编辑器组件
• ✨ 新增 MsTreeTable 树形表格组件
• ✨ 新增 MsTreeSelect 树形选择器组件
• ✨ 新增 MsTree 树形组件
• ✨ 新增 MsDataSelect 数据选择器组件
• ✨ 新增 MsIconSelect 图标选择器组件
• ✨ 新增 MsInputNumber 数字输入框组件
• ✨ 新增 MsCopy 复制组件
• ✨ 新增 MsTabForm 标签页表单组件
• ✨ 新增 MsProgressBar 进度条组件
• ✨ 新增 MsSearch 搜索组件
• � 修集成 BPMN.js 和 CodeMirror 编辑器
• 💪 完善 TypeScript 类型定义

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