# mms-ui

**Repository Path**: MrShanDev/mms-ui

## Basic Information

- **Project Name**: mms-ui
- **Description**: 🍃 MMS（模块化管理系统）管理后台前端：Vue 3 + Vite + TypeScript + Element Plus + Pinia，内置 Module Federation 插件运行时，插件市场安装插件即自动扩展管理页面，开箱即用的企业级中后台模板。
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://mmsadmin.cn
- **GVP Project**: No

## Statistics

- **Stars**: 19
- **Forks**: 15
- **Created**: 2025-04-25
- **Last Updated**: 2026-10-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: MMS, mms-ui

## README

<div align="center">
   <br/>
   <a href="https://mmsadmin.cn">
     <img width="150" src="https://mmsadmin.cn/logo.png" alt="MMS logo">
   </a>
   <h1>模块化管理系统</h1>
   <p>MMS · Modular Management System</p>
   <p><strong>mms-ui · 管理端前端</strong></p>
   <p><a href="https://mmsadmin.cn/">📘 在线文档 · mmsadmin.cn</a> · <a href="https://gitee.com/MrShanDev/mms-ui">Gitee</a> · <a href="https://github.com/MrShanDev/mms-ui">GitHub</a></p>
   <br/>
</div>

[English](README.en.md) | 简体中文

`mms-ui` 是 **MMS 管理端前端**，用于对接 `mms/mms-admin` 后端能力，同时支持将部分“插件前端子包”通过 **Module Federation** 的方式打包并随插件 JAR 一起交付（插件联邦规范见在线文档 [mmsadmin.cn](https://mmsadmin.cn) 的 `/mms-plugins/` 分册）。

---

<p align="center">
  <a href="https://mmsadmin.cn/" target="_blank" rel="noopener noreferrer">
    <img src="https://gitee.com/LumeCode/mms/raw/master/script/img/mms-plugin-ecosystem-poster.webp" width="100%" alt="MMS 模块化管理系统：模块化组合、插件安装、丰富插件市场、自研插件，配套 mmsadmin.cn 技术文档站">
  </a>
</p>

## 页面展示

当前管理端实景截图，展示登录、系统工作台、账户表单、权限管理、配置、代码生成和插件市场。每行两张，点击图片查看原图；也可右键在新窗口打开。

<table>
  <tr>
    <td width="50%" align="center">
      <strong>登录页面</strong><br>
      <a href="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-login.jpg" target="_blank" rel="noopener noreferrer">
        <img src="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-login.jpg" width="100%" alt="登录页面">
      </a>
    </td>
    <td width="50%" align="center">
      <strong>系统管理工作台</strong><br>
      <a href="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-dashboard.jpg" target="_blank" rel="noopener noreferrer">
        <img src="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-dashboard.jpg" width="100%" alt="系统管理工作台">
      </a>
    </td>
  </tr>
  <tr>
    <td width="50%" align="center">
      <strong>新增用户表单</strong><br>
      <a href="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-user-form.jpg" target="_blank" rel="noopener noreferrer">
        <img src="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-user-form.jpg" width="100%" alt="新增用户表单">
      </a>
    </td>
    <td width="50%" align="center">
      <strong>新增角色与菜单权限</strong><br>
      <a href="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-role-form.jpg" target="_blank" rel="noopener noreferrer">
        <img src="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-role-form.jpg" width="100%" alt="新增角色与菜单权限">
      </a>
    </td>
  </tr>
  <tr>
    <td width="50%" align="center">
      <strong>角色管理</strong><br>
      <a href="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-roles.jpg" target="_blank" rel="noopener noreferrer">
        <img src="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-roles.jpg" width="100%" alt="角色管理">
      </a>
    </td>
    <td width="50%" align="center">
      <strong>菜单管理</strong><br>
      <a href="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-menus.jpg" target="_blank" rel="noopener noreferrer">
        <img src="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-menus.jpg" width="100%" alt="菜单管理">
      </a>
    </td>
  </tr>
  <tr>
    <td width="50%" align="center">
      <strong>字典管理</strong><br>
      <a href="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-dictionaries.jpg" target="_blank" rel="noopener noreferrer">
        <img src="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-dictionaries.jpg" width="100%" alt="字典管理">
      </a>
    </td>
    <td width="50%" align="center">
      <strong>系统基础设置</strong><br>
      <a href="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-settings.jpg" target="_blank" rel="noopener noreferrer">
        <img src="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-settings.jpg" width="100%" alt="系统基础设置">
      </a>
    </td>
  </tr>
  <tr>
    <td width="50%" align="center">
      <strong>代码生成</strong><br>
      <a href="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-generator.jpg" target="_blank" rel="noopener noreferrer">
        <img src="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-generator.jpg" width="100%" alt="代码生成">
      </a>
    </td>
    <td width="50%" align="center">
      <strong>插件市场</strong><br>
      <a href="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-plugins.jpg" target="_blank" rel="noopener noreferrer">
        <img src="https://gitee.com/LumeCode/mms/raw/master/script/img/preview-plugins.jpg" width="100%" alt="插件市场">
      </a>
    </td>
  </tr>
</table>

代码生成与插件市场截图为未导入表、未安装插件时的界面；用户与角色表单仅展示，未提交新增。

截图统一维护在母仓 `mms-plus/mms/script/img/`，本地路径为 `../mms/script/img/`。此处引用后端仓原始图片地址，便于单独浏览 `mms-ui` 仓库；更新截图后需同步发布后端仓图片。

## 技术栈

- Vue 3 + Vite + TypeScript
- Element Plus / Pinia / Vue Router
- 包管理器：pnpm（推荐团队统一）

---

## 环境要求

- Node.js：推荐 **22**（本教程使用的版本）
- pnpm：本教程使用 **10**（先执行 `npm install -g pnpm@10`）

---

安装 Node.js 通常会带上 npm，但不会自动安装 pnpm。nvm 用于安装和切换 Node.js 版本；Maven 是 Java 后端的构建工具，其命令为 `mvn`，需要单独安装。

**macOS / Linux / WSL：安装 nvm、Node.js 和 pnpm**

按照 [nvm 官方安装说明](https://github.com/nvm-sh/nvm#installing-and-updating)安装 nvm，然后重新打开终端。已有 Node.js 且无需切换版本时，可以跳过 nvm。

```bash
# 安装 nvm（官方安装脚本）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.8/install.sh | bash
```

重新打开终端后执行：

```bash
command -v nvm
nvm install 22
nvm use 22
nvm alias default 22
node -v
npm -v
npm install -g pnpm@10
pnpm -v
```

切换 nvm 管理的 Node.js 版本后，如果找不到 pnpm，需要在当前版本下重新安装。Node.js 25 起不再附带 Corepack，教程不依赖 Corepack 自动提供 pnpm。原生 Windows 使用 [nvm-windows](https://github.com/coreybutler/nvm-windows)或 Node.js 官方安装包，不运行上述 nvm Shell 安装脚本。

## 快速开始

### 安装依赖

```bash
cd mms-ui
pnpm install
```

### 本地开发

```bash
pnpm dev
```

### 构建与预览

```bash
pnpm build
pnpm preview
```

---

## 常用脚本（package.json）

| 命令 | 说明 |
|---|---|
| `pnpm dev` | 开发（`vite --mode development --open`） |
| `pnpm build` | 生产构建（`vite build --mode production`） |
| `pnpm preview` | 预览构建产物 |
| `pnpm lint` / `pnpm lint:fix` | ESLint 检查 / 自动修复 |
| `pnpm type-check` | `vue-tsc` 类型检查（不产物输出） |
| `pnpm format` / `pnpm format:check` | Prettier 格式化 / 校验 |
| `pnpm fed:plugin-ui:build` | 构建插件联邦子包（配合 `-- <packageName>`） |
| `pnpm fed:plugin-ui:dev` | 开发插件联邦子包（配合 `-- <packageName>`） |
| `pnpm mms` / `pnpm mms:win` | 交互式菜单脚本（镜像/依赖/构建等） |

---

## 插件联邦（Module Federation）

部分插件会把前端子包（通常在 `mms-ui/packages/plugin-*-ui`）构建产物打进插件 JAR 的 `META-INF/mms/web`，实现“插件安装即带 UI”。

示例（以 syslog 插件为例，**须在 `mms-ui` 仓库根**执行）：

```bash
cd mms-ui
pnpm install
pnpm run fed:plugin-ui:build -- @mms-ui/plugin-syslog-ui
```

与插件 Maven 构建联动（**`-Pfed-web` 会在 `prepare-package` 自动调用上述 pnpm 命令**；需已安装 Node/pnpm）：

```bash
# 在 mms-plugins 插件聚合目录：
mvn -pl mms-plugin-tool-syslog -am package -Pfed-web -DskipTests

# 或在单插件目录 mms-plugins/mms-plugin-tool-syslog：
mvn -pl . -am package -Pfed-web -DskipTests
```

已打好 `dist` 且仅需打 JAR 时：`-Dskip.fed.syslog.ui.build=true`。构建告警与体积说明见 **`packages/plugin-syslog-ui/README.md`**（CI 一节）。

详细规范与自检清单见在线文档 [mmsadmin.cn](https://mmsadmin.cn)（`/mms-plugins/` 分册与插件开发指南）。

---

## 国内镜像/依赖安装加速（可选）

项目内提供了镜像配置与验证脚本（在 `mms-ui/` 下）：

```bash
bash scripts/setup-npm-mirrors.sh
bash scripts/verify-mirrors.sh
```

---

## 常见问题（精选）

1. `vite build` 时出现一堆 TS 类型错误  
   - 这是 `vue-tsc --noEmit` 的类型检查结果；是否阻断构建以团队策略为准。
2. 安装依赖卡住/找不到某些平台包  
   - 建议先统一 Node/pnpm 版本，再清理 `node_modules` 与 lockfile 重新安装。

---

## 相关链接

- 后端（子模块）：`../mms/`
- 插件聚合：`../mms-plugins/`
- 文档站：`../mms-doc/`