升级Vue3，iView替换ElementPlus

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

im/src/components/chat/TalkCodeBlock.vue

@@ -43,14 +43,9 @@
   </div>
 </template>
 <script>
-import PrismEditor from "vue-prism-editor";
-import "vue-prism-editor/dist/VuePrismEditor.css";
+import { PrismEditor } from "vue-prism-editor";
+import "vue-prism-editor/dist/prismeditor.min.css";
 import "prismjs/themes/prism-okaidia.css";
-import Vue from "vue";
-import { Select, Option } from "element-ui";
-Vue.use(Select);
-Vue.use(Option);
-
 export default {
   name: "TalkCodeBlock",
   components: {
@@ -284,29 +279,29 @@ export default {
   max-width: 100%;
 }
 
-/deep/ .el-input__inner {
+:deep(.el-input__inner ) {
   border-radius: 0;
   width: 130px;
 }
 
-/deep/ pre {
+:deep(pre ) {
   border-radius: 0;
 }
 
-/deep/ .prism-editor-wrapper pre::-webkit-scrollbar {
+:deep(.prism-editor-wrapper pre::-webkit-scrollbar ) {
   background-color: #272822;
 }
 
-/deep/ .prism-editor-wrapper pre::-webkit-scrollbar-thumb {
+:deep(.prism-editor-wrapper pre::-webkit-scrollbar-thumb ) {
   background-color: #41413f;
   cursor: pointer;
 }
 
-/deep/ .prism-editor-wrapper::-webkit-scrollbar {
+:deep(.prism-editor-wrapper::-webkit-scrollbar ) {
   background-color: #272822;
 }
 
-/deep/ .prism-editor-wrapper::-webkit-scrollbar-thumb {
+:deep(.prism-editor-wrapper::-webkit-scrollbar-thumb ) {
   background-color: rgb(114, 112, 112);
   cursor: pointer;
 }

im/src/components/chat/TalkForwardRecord.vue

@@ -131,7 +131,7 @@ export default {
   height: 600px;
 }
 
-/deep/.el-scrollbar__wrap {
+:deep(.el-scrollbar__wrap ) {
   overflow-x: hidden;
 }
 

im/src/components/chat/TalkSearchRecord.vue

@@ -397,7 +397,7 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-/deep/.el-scrollbar__wrap {
+:deep(.el-scrollbar__wrap ) {
   overflow-x: hidden;
 }
 

im/src/components/chat/messaege/FriendApplyMessage.vue

@@ -125,7 +125,7 @@ export default {
     justify-content: center;
     box-sizing: border-box;
 
-    /deep/.el-divider {
+    :deep(.el-divider ) {
       background: white;
     }
 

im/src/components/chat/messaege/ImageMessage.vue

@@ -7,8 +7,12 @@
       :style="getImgStyle(src)"
       :preview-src-list="[src]"
     >
-      <div slot="error" class="image-slot">图片加载失败...</div>
-      <div slot="placeholder" class="image-slot">图片加载中...</div>
+      <template #error>
+        <div class="image-slot">图片加载失败...</div>
+      </template>
+      <template #placeholder>
+        <div class="image-slot">图片加载中...</div>
+      </template>
     </el-image>
   </div>
 </template>
@@ -31,7 +35,7 @@ export default {
 </script>
 <style lang="less" scoped>
 .image-message {
-  /deep/.el-image {
+  :deep(.el-image) {
     border-radius: 5px;
     cursor: pointer;
     background: #f1efef;

im/src/components/chat/panel/OtherLink.vue

@@ -17,7 +17,6 @@
 </template>
 
 <script>
-import { Tabs, TabPane } from 'element-ui'
 import { ServeGetStoreDetail, ServeGetUserDetail, ServeGetFootPrint, ServeGetOrderPrint, ServeGetGoodsDetail, ServeStoreGetFootPrint,ServeStoreGetOrderPrint } from '@/api/user'
 import StoreDetail from "@/components/chat/panel/template/storeDetail.vue";
 import FootPrint from "@/components/chat/panel/template/footPrint.vue";
@@ -26,8 +25,6 @@ import SocketInstance from "@/im-server/socket-instance";
 import { mapState, mapGetters } from "vuex";
 export default {
   components: {
-    "el-tabs": Tabs,
-    "el-tab-pane": TabPane,
     StoreDetail,
     FootPrint,
     GoodsLink
@@ -271,27 +268,27 @@ export default {
 </script>
 
 <style scoped lang="less">
-// /deep/ .el-tabs__nav.is-top {
+// :deep(.el-tabs__nav.is-top ) {
 // }
 
-/deep/ .el-tabs__nav {
+:deep(.el-tabs__nav ) {
   height: 60px;
   line-height: 60px;
 }
 
-/deep/ .el-tab-pane {
+:deep(.el-tab-pane ) {
   // margin-left: 12px;
 }
-/deep/.el-tabs__nav-scroll{
+:deep(.el-tabs__nav-scroll) {
   min-width: 362px;
 }
-/deep/ .el-tabs__item{
+:deep(.el-tabs__item) {
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
 }
-/deep/ .el-tabs__header{
+:deep(.el-tabs__header) {
   margin-bottom: 0;
 }
 </style>

im/src/components/chat/panel/TalkPanel.vue

@@ -89,7 +89,7 @@
                           </el-tooltip>
                         </div>
                         <div class="price">
-                          <span>{{ item.text.price | unitPrice('￥') }}</span>
+                          <span>{{ $filters.unitPrice(item.text.price, '￥') }}</span>
                         </div>
                       </div>
                     </div>
@@ -111,14 +111,14 @@
                         <div>
                           <span class="orderGoodsName">{{ order.name }}</span>
                           <div class="goods-item-price">
-                           <span>{{ order.goodsPrice | unitPrice('￥') }}</span>
+                           <span>{{ $filters.unitPrice(order.goodsPrice, '￥') }}</span>
                           </div> 
                         </div>
                       </div>
                       <div class="shared-goods">
                       <div class="orderGoodsTime">{{ item.text.paymentTime }}</div>
                       <span class="orderFlowPrice">
-                        订单金额：<span>{{ item.text.flowPrice | unitPrice('￥') }}</span>
+                        订单金额：<span>{{ $filters.unitPrice(item.text.flowPrice, '￥') }}</span>
                       </span> 
                       <div class="order-status">
                         <el-tag 
@@ -205,7 +205,6 @@ import PanelToolbar from "./PanelToolbar";
 import SocketInstance from "@/im-server/socket-instance";
 import { SvgMentionDown } from "@/core/icons";
 import { formatTime, parseTime, copyTextToClipboard } from "@/utils/functions";
-import { unitPrice } from '@/plugins/filters';
 
 import {
   ServeTalkRecords,

im/src/components/chat/panel/template/footPrint.vue

@@ -14,7 +14,7 @@
                   <a class="goods_name">{{ item.goodsName }}</a>
                   <div style="display: flex;">
                     <div style="margin-top: 20px;">
-                      <span class='goods-price'>{{ item.price | unitPrice("￥") }}</span>
+                      <span class='goods-price'>{{ $filters.unitPrice(item.price, "￥") }}</span>
                       <div class="goods_store_button">
                        
                       </div>
@@ -42,7 +42,7 @@
                   <div class="order-items" v-for="(order,orderIndex) in item.orderItems" :key="orderIndex">
                       <img :src="order.image" alt="">
                       <span class="order-goods-name" @click="linkToOrders(item.sn)"> {{ order.name }}</span>
-                      <span class="price">{{order.goodsPrice | unitPrice("￥")}}</span>
+                      <span class="price">{{ $filters.unitPrice(order.goodsPrice, "￥") }}</span>
                   </div>
                   <!-- <img  :src="item.groupImages" alt=""> -->
                  
@@ -77,14 +77,9 @@
 </template>
 
 <script>
-import { Tag, button, Tabs, TabPane, InfiniteScroll } from 'element-ui'
 import { mapState, mapGetters } from "vuex";
-import { unitPrice } from '@/plugins/filters';
 
 export default {
-  directives: {
-    "infinite-scroll": InfiniteScroll,
-  },
   data () {
     return {
       noMoreList:{
@@ -310,7 +305,7 @@ export default {
   font-size:12px;
 }
 
-/deep/ .el-tabs__header {
+:deep(.el-tabs__header ) {
   position: absolute;
   width: 362px;
   height: 50px;
@@ -318,7 +313,7 @@ export default {
   z-index: 2;
   background: #ffffff;
 }
-/deep/ .el-tabs__nav.is-top {
+:deep(.el-tabs__nav.is-top ) {
   height: 50px;
 }
 
@@ -328,10 +323,10 @@ export default {
   align-items: center;
 }
 
-/deep/.el-tabs__content {
+:deep(.el-tabs__content ) {
   margin-top: 50px;
 }
-/deep/ .el-tabs{
+:deep(.el-tabs) {
   width: 100%;
 }
 
@@ -390,7 +385,7 @@ export default {
 //   height: calc(100vh - 110px);
 //   overflow-y: auto; 
 // }
-// /deep/.el-tab-pane {
+// :deep(.el-tab-pane ) {
 //   height: calc(100vh - 110px);
 //   overflow-y: auto;
 // }

im/src/components/chat/panel/template/goodsLink.vue

@@ -8,7 +8,7 @@
       <div style="margin-left: 13px">
         <a @click="linkToGoods(goodsDetail.goodsId, goodsDetail.id)"> {{ goodsDetail.goodsName }} </a>
         <div>
-          <span style="color: red;">{{ goodsDetail.price | unitPrice('￥') }}</span>
+          <span style="color: red;">{{ $filters.unitPrice(goodsDetail.price, '￥') }}</span>
         </div>
         <div v-if="hide">
           <el-button class="store-button" type="danger" v-if="btnHide == 1 && toUser.storeFlag" size="mini"
@@ -20,7 +20,6 @@
 </template>
 
 <script>
-import { Tag, button } from 'element-ui'
 import { mapState, mapGetters } from "vuex";
 import SocketInstance from "@/im-server/socket-instance";
 export default {
@@ -42,11 +41,6 @@ export default {
     console.log(this.goodsDetail)
     this.btnHide = localStorage.getItem('btnHide')
   },
-  components: {
-    "el-tag": Tag,
-    "el-button": button,
-    Storage
-  },
   methods: {
     toGoods () {
       alert("toGoods")

im/src/components/chat/panel/template/storeDetail.vue

@@ -35,7 +35,6 @@
 </template>
 
 <script>
-import { Tag, button, rate } from 'element-ui'
 export default {
   data () {
     return {
@@ -43,11 +42,6 @@ export default {
       colors: ['#99A9BF', '#F7BA2A', '#FF9900']
     }
   },
-  components: {
-    "el-tag": Tag,
-    "el-button": button,
-    "el-rate": rate
-  },
   methods: {
   },
   props: {