Moye UI

特性

• 🚀 Vue 3 + TypeScript - 使用最新的 Vue 3 Composition API，完整的 TypeScript 类型支持
• 🎨 Element Plus - 基于 Element Plus 二次封装，风格统一
• 📦 开箱即用 - 高度封装的后台管理常用组件，减少重复代码
• 🔐 权限管理 - 内置完整的权限管理系统，支持路由、菜单、按钮级权限控制
• 🎯 配置驱动 - Schema 配置驱动，快速构建表单和表格页面
• 🌙 主题定制 - 支持亮色/暗色主题，易于扩展

安装

# npm
npm install moye-ui element-plus @element-plus/icons-vue

# yarn
yarn add moye-ui element-plus @element-plus/icons-vue

# pnpm
pnpm add moye-ui element-plus @element-plus/icons-vue

快速开始

全量引入

// main.ts
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import MoyeUI from 'moye-ui'
import 'moye-ui/dist/style.css'

const app = createApp(App)
app.use(ElementPlus)
app.use(MoyeUI)
app.mount('#app')

按需引入

// main.ts
import { MoyeForm, MoyeTablePage, MoyeLayout, MoyeAuthAssign } from 'moye-ui'

app.use(MoyeForm)
app.use(MoyeTablePage)
app.use(MoyeLayout)
app.use(MoyeAuthAssign)

配合 unplugin-vue-components 自动导入

// vite.config.ts
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import { MoyeUIResolver } from 'moye-ui/resolver'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [MoyeUIResolver()],
    }),
  ],
})

组件列表

基础组件

| 组件 | 说明 | |------|------| | MoyeForm | 配置驱动的动态表单组件，支持 18 种字段类型 | | MoyeTablePage | 集成搜索、表格、分页的完整页面组件 | | MoyeTreePage | 树形结构页面组件，支持搜索、操作菜单 | | MoyeLayout | 后台管理系统布局组件 | | MoyeLogin | 登录页面组件 | | MoyeAuthAssign | 角色权限分配组件 |

权限组件

| 组件 | 说明 | |------|------| | Permission | 权限容器组件，无权限时隐藏内容 | | v-permission | 权限指令 | | v-role | 角色指令 |

使用示例

表单组件

<template>
  <MoyeForm
    :schema="schema"
    @submit="handleSubmit"
  />
</template>

<script setup lang="ts">
import { MoyeForm } from 'moye-ui'
import type { FieldSchema } from 'moye-ui'

const schema: FieldSchema[] = [
  { field: 'name', label: '姓名', type: 'input', required: true },
  { field: 'email', label: '邮箱', type: 'input', rules: [{ type: 'email' }] },
  { field: 'department', label: '部门', type: 'select', options: [
    { label: '技术部', value: 'tech' },
    { label: '产品部', value: 'product' }
  ]},
  { field: 'status', label: '状态', type: 'switch', defaultValue: true }
]

function handleSubmit(data) {
  console.log('表单数据:', data)
}
</script>

表格页面组件

<template>
  <MoyeTablePage
    :columns="columns"
    :search-fields="searchFields"
    :request="fetchData"
    :toolbar-actions="toolbarActions"
    :row-actions="rowActions"
  />
</template>

<script setup lang="ts">
import { MoyeTablePage } from 'moye-ui'
import type { TableColumn, SearchField, ActionConfig } from 'moye-ui'

const columns: TableColumn[] = [
  { prop: 'name', label: '姓名' },
  { prop: 'email', label: '邮箱' },
  { prop: 'status', label: '状态' }
]

const searchFields: SearchField[] = [
  { field: 'keyword', label: '关键词', type: 'input' },
  { field: 'status', label: '状态', type: 'select', options: [...] }
]

const toolbarActions: ActionConfig[] = [
  { key: 'add', label: '新增', type: 'primary', handler: () => {} }
]

async function fetchData(params) {
  const res = await api.getList(params)
  return { list: res.data, total: res.total }
}
</script>

表格列类型配置

TablePage 支持通过 columnType 和 typeConfig 快速渲染常见类型的列：

<script setup lang="ts">
import type { TableColumn } from 'moye-ui'

const columns: TableColumn[] = [
  // 状态标签
  {
    prop: 'status',
    label: '状态',
    columnType: 'tag',
    typeConfig: {
      tag: {
        options: [
          { value: 'pending', label: '待付款', type: 'warning' },
          { value: 'completed', label: '已完成', type: 'success' },
          { value: 'cancelled', label: '已取消', type: 'info' }
        ]
      }
    }
  },
  // 金额
  {
    prop: 'amount',
    label: '金额',
    columnType: 'money',
    typeConfig: {
      money: { prefix: '¥', precision: 2 }
    }
  },
  // 日期时间
  {
    prop: 'createTime',
    label: '创建时间',
    columnType: 'datetime',
    typeConfig: {
      datetime: { format: 'YYYY-MM-DD HH:mm' }
    }
  },
  // 头像
  {
    prop: 'avatar',
    label: '头像',
    columnType: 'avatar',
    typeConfig: {
      avatar: { size: 40, shape: 'circle' }
    }
  },
  // 图片
  {
    prop: 'image',
    label: '图片',
    columnType: 'image',
    typeConfig: {
      image: { width: 80, height: 80, preview: true }
    }
  },
  // 开关
  {
    prop: 'enabled',
    label: '启用',
    columnType: 'switch',
    typeConfig: {
      switch: { onChange: (val, row) => { /* 处理变化 */ } }
    }
  }
]
</script>

支持的列类型：tag | date | datetime | money | avatar | switch | image | buttons | html

树形页面组件

<template>
  <MoyeTreePage
    :data="treeData"
    :fields="fields"
    :actions="actions"
    @node-click="handleNodeClick"
  />
</template>

<script setup lang="ts">
import { MoyeTreePage } from 'moye-ui'
import type { TreeNode, TreeField, TreeAction } from 'moye-ui'

const treeData: TreeNode[] = [
  { id: '1', name: '部门A', children: [
    { id: '1-1', name: '子部门1' },
    { id: '1-2', name: '子部门2' }
  ]}
]

const fields: TreeField[] = [
  { key: 'name', label: '名称' },
  { key: 'code', label: '编码' }
]

const actions: TreeAction[] = [
  { key: 'edit', label: '编辑', handler: (node) => {} },
  { key: 'delete', label: '删除', handler: (node) => {} }
]
</script>

角色权限分配组件

<template>
  <MoyeAuthAssign
    :roles="roles"
    :permissions="permissions"
    :role-permissions="rolePermissions"
    :role-form-config="roleFormConfig"
    :permission-form-config="permissionFormConfig"
    show-role-action
    show-permission-action
    @submit="handleSubmit"
  />
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { MoyeAuthAssign } from 'moye-ui'
import type { Role, Permission, RoleFormConfig, PermissionFormConfig } from 'moye-ui'
import type { FieldSchema } from 'moye-ui'

const roles = ref<Role[]>([
  { key: 'admin', name: '超级管理员', description: '拥有所有权限' },
  { key: 'user', name: '普通用户', description: '基本查看权限' }
])

const permissions = ref<Permission[]>([
  { key: 'system', label: '系统管理', children: [
    { key: 'system:user', label: '用户管理' },
    { key: 'system:role', label: '角色管理' }
  ]}
])

const rolePermissions = reactive<Record<string, string[]>>({
  admin: ['system:user', 'system:role'],
  user: ['system:user']
})

const roleFormSchema: FieldSchema[] = [
  { field: 'name', label: '角色名称', type: 'input', required: true },
  { field: 'description', label: '角色描述', type: 'textarea' }
]

const roleFormConfig: RoleFormConfig = {
  schema: roleFormSchema,
  title: (mode) => mode === 'add' ? '新增角色' : '编辑角色',
  onSubmit: (data, mode) => {
    // 处理提交逻辑
    return true
  }
}

function handleSubmit(data: { role: Role; permissions: string[] }) {
  console.log('保存权限:', data)
}
</script>

权限控制

<template>
  <!-- 组件方式 -->
  <Permission code="user:create">
    <el-button type="primary">新增用户</el-button>
  </Permission>

  <!-- 指令方式 -->
  <el-button v-permission="'user:delete'" type="danger">删除</el-button>

  <!-- 组合式函数 -->
  <el-button v-if="canEdit" type="warning">编辑</el-button>
</template>

<script setup lang="ts">
import { Permission, vPermission, usePermission } from 'moye-ui'

const { hasPermission } = usePermission()
const canEdit = hasPermission('user:edit')
</script>

API 文档

MoyeForm Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | schema | SchemaItem[] | - | 表单配置 | | layout | LayoutConfig | - | 布局配置 | | labelPosition | 'left' \| 'right' \| 'top' | 'right' | 标签位置 | | labelWidth | string \| number | 100 | 标签宽度 | | disabled | boolean | false | 禁用状态 | | loading | boolean | false | 加载状态 | | showAction | boolean | true | 显示操作按钮 |

支持的字段类型

input | textarea | number | password | select | multiSelect | date | datetime | daterange | datetimerange | time | switch | radio | checkbox | cascader | treeSelect | upload | custom

内置验证器

phone | email | idCard | url | number | integer | positive | password

MoyeTablePage 表格列类型

| 类型 | 说明 | 配置项 | |------|------|--------| | tag | 状态标签 | options, mapping, size, effect | | date | 日期 | format | | datetime | 日期时间 | format | | money | 金额 | prefix, precision, thousandsSeparator | | avatar | 头像 | size, shape | | switch | 开关 | disabled, onChange | | image | 图片 | width, height, preview, fit | | buttons | 按钮组 | buttons | | html | HTML | - |

MoyeAuthAssign Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | roles | Role[] | [] | 角色列表 | | permissions | Permission[] | [] | 权限树数据 | | rolePermissions | Record<string, string[]> | {} | 角色权限映射 | | showRoleAction | boolean | false | 显示角色操作按钮 | | showPermissionAction | boolean | false | 显示权限操作按钮 | | roleFormConfig | RoleFormConfig | - | 角色表单配置（配置模式） | | permissionFormConfig | PermissionFormConfig | - | 权限表单配置（配置模式） |

MoyeAuthAssign Events

| 事件名 | 参数 | 说明 | |--------|------|------| | select | (role: Role) | 选择角色时触发 | | submit | ({ role, permissions }) | 保存提交时触发 | | role-add | (role: Role) | 新增角色时触发（事件模式） | | role-edit | (role: Role) | 编辑角色时触发（事件模式） | | role-delete | (role: Role) | 删除角色时触发 | | permission-add | ({ parent, permission }) | 新增权限时触发（事件模式） | | permission-edit | (permission: Permission) | 编辑权限时触发（事件模式） | | permission-delete | (permission: Permission) | 删除权限时触发 |

浏览器支持

| Chrome | Firefox | Safari | Edge | |--------|---------|--------|------| | >= 87 | >= 78 | >= 14 | >= 88 |

开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 启动示例
pnpm dev:example

# 构建
pnpm build

# 类型检查
pnpm typecheck

License

MIT License © 2024-present MoyeUI