MG Design

Appearance

架构设计 ​

三层架构 ​

┌─────────────────────────────────────────┐
│  业务组件层 (Business)  @mg-design/business │  ← 含领域逻辑的复合组件
├─────────────────────────────────────────┤
│  通用组件层 (Components) @mg-design/components │  ← 品牌化封装，API 兼容
├─────────────────────────────────────────┤
│  基础层 (Foundation)  Element Plus          │  ← 原生组件能力
└─────────────────────────────────────────┘

Monorepo 包结构 ​

mg-design/
├── packages/
│   ├── theme/        # Design Tokens（颜色/字体/间距/圆角）
│   ├── icons/        # 图标导出与扩展
│   ├── components/   # 通用组件层（MgButton, MgInput ...）
│   ├── business/     # 业务组件层（MgSearchTable ...）
│   └── utils/        # 共享工具函数
├── docs/             # VitePress 文档站
├── playground/       # 组件实时预览环境
└── pnpm-workspace.yaml

依赖关系 ​

theme ──────┐
            │
icons ──────┼──► components ──► business ──► consumer
            │
utils ──────┘
  • 通用组件层依赖 theme（样式）、icons（图标）、utils（工具）
  • 业务组件层依赖通用组件层，禁止反向依赖
  • 消费方（consumer）按需引入通用层或业务层

API 继承策略 ​

通用组件通过 v-bind="$attrs" 透传原生 Element Plus 组件的全部属性、事件和插槽，确保：

  • 迁移成本趋近于零
  • 可渐进式增强（叠加品牌样式与默认行为）
  • 不阻塞 Element Plus 上游更新