升级Vue3，iView替换ElementPlus

- 删除babel配置、更新依赖与入口初始化
- 全量替换UI组件、样式适配，新增迁移文档与标签/过滤器自动化替换脚本

im/src/components/user/UserSearch.vue

@@ -16,7 +16,7 @@
             prefix-icon="el-icon-search"
             placeholder="请输入对方手机号(精确查找)"
             clearable
-            @keyup.enter.native="onSubmit"
+            @keyup.enter="onSubmit"
             @input="error = false"
           />
           <p v-show="error" class="error">

im/src/components/user/user-card/UserCardDetail.vue

@@ -31,7 +31,7 @@
         <div class="card-rows no-select">
           <div class="card-row">
             <label>手机</label>
-            <span>{{ detail.mobile | mobile }}</span>
+            <span>{{ formatMobile(detail.mobile) }}</span>
           </div>
           <div class="card-row">
             <label>昵称</label>
@@ -39,7 +39,7 @@
           </div>
           <div class="card-row">
             <label>性别</label>
-            <span>{{ detail.gender | gender }}</span>
+            <span>{{ formatGender(detail.gender) }}</span>
           </div>
           <div v-show="detail.friend_status == 2" class="card-row">
             <label>备注</label>
@@ -134,18 +134,6 @@ export default {
       default: 0,
     },
   },
-  filters: {
-    gender(value) {
-      let arr = ["未知", "男", "女"];
-      return arr[value] || "未知";
-    },
-    // 手机号格式化
-    mobile(value) {
-      return (
-        value.substr(0, 3) + " " + value.substr(3, 4) + " " + value.substr(7, 4)
-      );
-    },
-  },
   data() {
     return {
       detail: {
@@ -179,6 +167,16 @@ export default {
     // this.loadUserDetail();
   },
   methods: {
+    formatGender(value) {
+      const arr = ["未知", "男", "女"];
+      return arr[value] || "未知";
+    },
+    formatMobile(value) {
+      if (!value) return "";
+      return (
+        value.substr(0, 3) + " " + value.substr(3, 4) + " " + value.substr(7, 4)
+      );
+    },
     close() {
       if (this.contacts) return false;
 

im/src/components/user/user-card/index.js

@@ -1,33 +1,40 @@
-import UserCardDetail from './UserCardDetail'
+import { createApp, h } from "vue";
+import UserCardDetail from "./UserCardDetail";
+import router from "@/router";
+import store from "@/store";
+import { setupElementPlus } from "@/plugins/element";
+import { setupLegacyMessage } from "@/utils/message";
+import { registerDirectives } from "@/core/directives";
 
 export default {
-  install(Vue) {
+  install(app) {
     function user(user_id, options) {
-      let _vm = this
-      const el = new Vue({
-        router: _vm.$router,
-        store: _vm.$store,
-        render(h) {
-          return h(UserCardDetail, {
-            on: {
-              close: () => {
-                el.$destroy()
-                document.body.removeChild(el.$el)
-              },
-              changeRemark: data => {
-                options.editRemarkCallbak && options.editRemarkCallbak(data)
-              },
-            },
-            props: {
-              user_id,
-            },
-          })
-        },
-      }).$mount()
+      const container = document.createElement("div");
+      document.body.appendChild(container);
 
-      document.body.appendChild(el.$el)
+      const cardApp = createApp({
+        render() {
+          return h(UserCardDetail, {
+            user_id,
+            onClose: () => {
+              cardApp.unmount();
+              document.body.removeChild(container);
+            },
+            onChangeRemark: (data) => {
+              options.editRemarkCallbak && options.editRemarkCallbak(data);
+            },
+          });
+        },
+      });
+
+      setupElementPlus(cardApp);
+      setupLegacyMessage(cardApp);
+      registerDirectives(cardApp);
+      cardApp.use(router);
+      cardApp.use(store);
+      cardApp.mount(container);
     }
 
-    Vue.prototype.$user = user
+    app.config.globalProperties.$user = user;
   },
-}
+};