介绍
MG Design 是一套基于 Element Plus 构建的 Vue 3 设计系统组件库，采用 pnpm monorepo 组织，服务于多个前端项目。
为什么需要它
在多个项目中重复使用 Element Plus 时，常常遇到：
- 各项目视觉风格不统一，难以维护
- 高频业务模式（搜索表格、表单弹窗）反复手写
- 主题切换缺乏统一变量入口
MG Design 通过三层架构解决这些问题：
| 层级 | 职责 | 示例 |
|---|---|---|
| 基础层 | 直接依赖 Element Plus 原生组件 | ElButton |
| 通用组件层 | 品牌化封装，API 兼容 | MgButton |
| 业务组件层 | 复合组件，含业务逻辑 | MgSearchTable |
包结构
| 包名 | 说明 |
|---|---|
@mg-design/theme | 主题与 Design Tokens |
@mg-design/icons | 图标集合 |
@mg-design/components | 通用组件层 |
@mg-design/business | 业务组件层 |
@mg-design/utils | 共享工具函数 |