UI组件动态加载

## 描述
平台在vue3版本支持 Ant Design Vue、Element Plus、Vant 三个主流 Vue 3 UI 框架的组件动态加载。
this.$uiManager用来加载不同框架的组件，有两种加载方式：加载单个 / 多个组件、加载完整框架。

### 1. 按需加载组件（推荐）

按项目需要，加载用到的组件，常用方法如下：

| 要加载的框架         | 方法名                      | 简单说明                  |
| -------------- | ------------------------ | --------------------- |
| Element Plus   | loadElementPlusComponent | 加载 Element Plus 的组件   |
| Ant Design Vue | loadAntDesignComponent   | 加载 Ant Design Vue 的组件 |
| Vant           | loadVantComponent        | 加载 Vant 的组件           |

#### 用法示例：

*   加载单个组件（以 Element Plus 的 Button 为例）：

```javascript
// 在Vue组件的方法里使用
await this.$uiManager.loadElementPlusComponent('Button')
```

*   加载多个组件（以 Vant 的 Button、Field 为例）：

```javascript
await this.$uiManager.loadVantComponent(['Button', 'Field'])
```

### 2. 加载完整框架（不推荐，除非需要所有组件）

如果项目要用到某个框架的所有组件，可以直接加载完整框架：

| 框架名称           | 方法名             | 用法示例                                     |
| -------------- | --------------- | ---------------------------------------- |
| Element Plus   | loadElementPlus | await this.$uiManager.loadElementPlus() |
| Ant Design Vue | loadAntDesign   | await this.$uiManager.loadAntDesign()   |
| Vant           | loadVant        | await this.$uiManager.loadVant()        |

## 实际场景示例

### 1. 在 Vue 组件里用

在 Vue 文件中，通过按钮点击加载组件，加载完成后显示组件：

```vue
<template>
  <div>
    <button @click="loadBtnComponents">加载按钮组件</button>
    
    <el-button v-if="showElBtn">Element Plus按钮</el-button>
    <van-button v-if="showVanBtn">Vant按钮</van-button>
  </div>
</template>

### 2. 路由跳转时加载组件

进入某个页面（如管理页）时，提前加载页面需要的组件，让页面显示更流畅：

```javascript
// 在router/index.js文件中
const routes = [
  {
    path: '/admin', // 管理页路由
    component: () => import('@/views/Admin.vue'),
    // 进入页面之前加载组件
    beforeEnter: async (to, from, next) => {
      try {
        // 加载管理页需要的Table、Form组件
        await window.$uiManager.loadElementPlusComponent(['Table', 'Form'])
        next() // 加载完成，进入页面
      } catch (error) {
        console.error('组件加载失败', error)
        next() // 即使失败，也进入页面
      }
    }
  }
]
```

## 如何查看已加载的组件

如果想知道哪些组件已经加载过，可以用以下方法：

1. 查看某个框架下已加载的所有组件：

```javascript
// 查看Element Plus已加载的组件
const loadedElComponents = this.$uiManager.getLoadedComponents('elementPlus')
console.log('已加载的Element组件：', loadedElComponents)
```

2. 检查某个组件是否已加载：

```javascript
// 检查Element Plus的Button是否已加载
const isBtnLoaded = this.$uiManager.isComponentLoaded('elementPlus', 'Button')
console.log('Button是否已加载：', isBtnLoaded) // 结果是true或false
```