升级Vue3，iView替换ElementPlus

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

im/src/components/editor/MeEditor.vue

@@ -3,10 +3,16 @@
     <el-container class="editor-container">
       <el-header class="no-padding toolbar" height="35px">
         <ul>
-          <li v-popover:popoverEmoticon>
-            <i class="iconfont icon-icon_im_face" style="font-size: 15px" />
-            <p class="tip-title">表情符号</p>
-          </li>
+          <el-popover ref="popoverEmoticon" placement="top-start" trigger="click" width="300"
+            popper-class="no-padding el-popover-em">
+            <template #reference>
+              <li>
+                <i class="iconfont icon-icon_im_face" style="font-size: 15px" />
+                <p class="tip-title">表情符号</p>
+              </li>
+            </template>
+            <MeEditorEmoticon ref="editorEmoticon" @selected="selecteEmoticon" />
+          </el-popover>
           <!-- <li @click="codeBlock.isShow = true">
             <i class="iconfont icon-daima" />
             <p class="tip-title">代码片段</p>
@@ -59,11 +65,6 @@
           <!--          </p>-->
         </ul>
 
-        <el-popover ref="popoverEmoticon" placement="top-start" trigger="click" width="300"
-          popper-class="no-padding el-popover-em">
-          <MeEditorEmoticon ref="editorEmoticon" @selected="selecteEmoticon" />
-        </el-popover>
-
         <form enctype="multipart/form-data" style="display: none" ref="fileFrom">
           <input type="file" ref="restFile" accept="image/*" @change="uploadImageChange" />
           <input type="file" ref="restFile2" @change="uploadFileChange" />
@@ -76,7 +77,7 @@
     </el-container>
 
     <!-- 图片查看器 -->
-    <MeEditorImageView ref="imageViewer" v-model="imageViewer.isShow" :file="imageViewer.file"
+    <MeEditorImageView ref="imageViewer" v-model:show="imageViewer.isShow" :file="imageViewer.file"
       @confirm="confirmUploadImage" />
 
     <MeEditorRecorder v-if="recorder" @close="recorder = false" />
@@ -86,7 +87,7 @@
       @confirm="confirmCodeBlock" />
 
     <!-- 文件上传管理器 -->
-    <MeEditorFileManage ref="filesManager" v-model="filesManager.isShow" />
+    <MeEditorFileManage ref="filesManager" v-model:show="filesManager.isShow" />
 
     <MeEditorVote v-if="vote.isShow" @close="
       () => {
@@ -335,7 +336,7 @@ export default {
         });
       }
 
-      this.$refs.popoverEmoticon.doClose();
+      this.$refs.popoverEmoticon.hide();
     },
   },
 };

im/src/components/editor/MeEditorEmoticon.vue

@@ -332,7 +332,7 @@ export default {
   }
 }
 
-/deep/ .el-image {
+:deep(.el-image ) {
   width: 100%;
   height: 100%;
   transition: ease-in 0.3s;

im/src/components/editor/MeEditorFileManage.vue

@@ -78,21 +78,14 @@
 </template>
 
 <script>
-import Vue from 'vue'
 import { SvgNotData } from '@/core/icons'
-import { Progress } from 'element-ui'
-Vue.use(Progress)
-
 import { ServeFindFileSplitInfo, ServeFileSubareaUpload } from '@/api/upload'
 import { formatSize, getFileExt, parseTime } from '@/utils/functions'
 import { ServeSendTalkFile } from '@/api/chat'
 
 export default {
   name: 'MeEditorFileManage',
-  model: {
-    prop: 'show',
-    event: 'close',
-  },
+  emits: ['close', 'update:show'],
   props: {
     show: Boolean,
   },
@@ -141,6 +134,7 @@ export default {
   },
   methods: {
     closeBox() {
+      this.$emit('update:show', false)
       this.$emit('close', false)
     },
 

im/src/components/editor/MeEditorImageView.vue

@@ -33,10 +33,7 @@
 <script>
 export default {
   name: 'MeEditorImageView',
-  model: {
-    prop: 'show',
-    event: 'close',
-  },
+  emits: ['close', 'update:show', 'confirm'],
   props: {
     show: Boolean,
     file: File,
@@ -60,6 +57,7 @@ export default {
         return false
       }
 
+      this.$emit('update:show', false)
       this.$emit('close', false)
     },
     loadFile(file) {

im/src/components/editor/MeEditorRecorder.vue

@@ -188,7 +188,7 @@ export default {
       return `${hour}:${minute}:${seconds}`
     },
   },
-  destroyed() {
+  beforeUnmount() {
     if (this.recorder) {
       this.destroyRecorder()
     }

im/src/components/editor/MeEditorVote.vue

@@ -37,11 +37,12 @@
                 placeholder="请输入选项内容"
                 :maxlength="120"
               >
-                <span
-                  slot="prefix"
-                  style="margin-left:7px;"
-                  v-text="String.fromCharCode(65 + index)"
-                />
+                <template #prefix>
+                  <span
+                    style="margin-left:7px;"
+                    v-text="String.fromCharCode(65 + index)"
+                  />
+                </template>
               </el-input>
             </div>
             <div class="rbox">
@@ -154,7 +155,7 @@ export default {
         return false
       }
 
-      this.$delete(this.options, index)
+      this.options.splice(index, 1)
     },
   },
 }
@@ -184,7 +185,7 @@ export default {
       .lbox {
         width: 100%;
 
-        /deep/.el-input__prefix {
+        :deep(.el-input__prefix ) {
           height: 36px;
           line-height: 36px;
         }
@@ -220,7 +221,7 @@ export default {
   }
 }
 
-/deep/.el-radio__input.is-checked + .el-radio__label {
+:deep(.el-radio__input.is-checked + .el-radio__label ) {
   color: #606266;
 }
 </style>