fix(im): 迁移 Element UI 图标并修复 Vue 3 兼容问题

- 新增 migrate-legacy-icons 脚本，批量将旧图标替换为 legacy-el-icon 组件
- 多个组件中将 <i class="el-icon-*"> 统一改为 <legacy-el-icon name="el-icon-*">
- 将 size="mini"/"medium" 调整为 Element Plus 的 small/default
- 新增 legacy-el-icon 全局组件及图标映射逻辑

im/src/components/chat/TalkCodeBlock.vue

@@ -5,11 +5,11 @@
         <el-header class="header no-padding" height="50px">
           <div class="tools">
             <span>选择编程语言:&nbsp;&nbsp;</span>
-            <el-select v-model="language" size="mini" filterable placeholder="语言类型" :disabled="!editMode">
+            <el-select v-model="language" size="small" filterable placeholder="语言类型" :disabled="!editMode">
               <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
           </div>
-          <i class="el-icon-close close-btn" @click="close" />
+          <legacy-el-icon name="el-icon-close" class="close-btn" @click="close" />
           <i class="iconfont icon-full-screen" :class="{
               'icon-tuichuquanping': isFullScreen,
               'icon-quanping ': !isFullScreen,

im/src/components/chat/TalkForwardRecord.vue

@@ -4,7 +4,7 @@
       <el-header class="no-padding header" height="60px">
         <p>会话记录 ({{ records.length }})</p>
         <p class="tools">
-          <i class="el-icon-close" @click="close" />
+          <legacy-el-icon name="el-icon-close" @click="close" />
         </p>
       </el-header>
       <el-main class="no-padding main" v-loading="loading">

im/src/components/chat/TalkSearchRecord.vue

@@ -13,7 +13,7 @@
             :class="fullscreen ? 'icon-tuichuquanping' : 'icon-quanping'"
             @click="fullscreen = !fullscreen"
           />
-          <i class="el-icon-close" @click="$emit('close')" />
+          <legacy-el-icon name="el-icon-close" @click="$emit('close')" />
         </p>
       </el-header>
 
@@ -24,7 +24,7 @@
           @click="triggerBroadside"
         />
         <div class="search-box no-select">
-          <i class="el-icon-search" />
+          <legacy-el-icon name="el-icon-search" />
           <input
             v-model="search.keyword"
             type="text"
@@ -196,11 +196,11 @@
 
                 <!-- 数据加载栏 -->
                 <div v-show="records.loadStatus == 1" class="load-button blue">
-                  <i class="el-icon-loading" />
+                  <legacy-el-icon name="el-icon-loading" />
                   <span>加载数据中...</span>
                 </div>
                 <div v-show="records.loadStatus == 0" class="load-button">
-                  <i class="el-icon-arrow-down" />
+                  <legacy-el-icon name="el-icon-arrow-down" />
                   <span @click="loadChatRecord">加载更多...</span>
                 </div>
               </el-scrollbar>

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

@@ -2,9 +2,9 @@
   <div class="audio-message">
     <div class="videodisc">
       <div class="disc" :class="{ play: isPlay }" @click="toPlay">
-        <i v-if="loading" class="el-icon-loading" />
-        <i v-else-if="isPlay" class="el-icon-video-pause" />
-        <i v-else class="el-icon-video-play" />
+        <legacy-el-icon v-if="loading" name="el-icon-loading" />
+        <legacy-el-icon v-else-if="isPlay" name="el-icon-video-pause" />
+        <legacy-el-icon v-else name="el-icon-video-play" />
         <audio
           ref="audio"
           type="audio/mp3"
@@ -17,7 +17,7 @@
     </div>
     <div class="detail">
       <div class="text">
-        <i class="el-icon-service" />
+        <legacy-el-icon name="el-icon-service" />
         <span>{{ getCurrDuration }} / {{ getTotalDuration }}</span>
       </div>
       <div class="process">

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

@@ -7,10 +7,14 @@
       'full-screen': fullscreen,
     }"
   >
+    <legacy-el-icon
+      v-if="fullscreen"
+      name="el-icon-close"
+      @click="fullscreen = !fullscreen"
+    />
     <i
-      :class="
-        fullscreen ? 'el-icon-close' : 'iconfont icon-tubiao_chakangongyi'
-      "
+      v-else
+      class="iconfont icon-tubiao_chakangongyi"
       @click="fullscreen = !fullscreen"
     />
     <pre class="lum-scrollbar" v-html="formatCode(code, lang)" />

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

@@ -9,7 +9,7 @@
       </div>
       <div class="tools flex-center">
         <span class="flex-center pointer">
-          <i class="el-icon-plus" /> 加好友
+          <legacy-el-icon name="el-icon-plus" /> 加好友
         </span>
       </div>
     </div>

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

@@ -5,16 +5,13 @@
         <div class="vheader">
           <p>
             {{ answer_mode == 1 ? "[多选投票]" : "[单选投票]" }}
-            <i
+            <legacy-el-icon
               v-show="is_vote"
               class="pointer"
-              :class="{
-                'el-icon-loading': refresh,
-                'el-icon-refresh': !refresh,
-              }"
+              :name="refresh ? 'el-icon-loading' : 'el-icon-refresh'"
               title="刷新投票结果"
               @click="loadRefresh"
-            ></i>
+            />
           </p>
           <p>{{ title }}</p>
         </div>

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

@@ -23,7 +23,7 @@
     <div class="module right-module" >
       <el-tooltip content="历史消息" placement="top">
         <p v-show="params.is_robot == 0">
-          <i class="el-icon-time" @click="triggerEvent('history')" />
+          <legacy-el-icon name="el-icon-time" @click="triggerEvent('history')" />
         </p>
       </el-tooltip>
       <el-tooltip content="群公告" placement="top">
@@ -33,7 +33,7 @@
       </el-tooltip>
       <el-tooltip content="群设置" placement="top">
         <p v-show="params.talk_type == 2">
-          <i class="el-icon-setting" @click="triggerEvent('setting')" />
+          <legacy-el-icon name="el-icon-setting" @click="triggerEvent('setting')" />
         </p>
       </el-tooltip>
     </div>

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

@@ -9,25 +9,25 @@
           class="multi-icon pointer"
           @click="$emit('event', 'merge_forward')"
         >
-          <i class="el-icon-position" />
+          <legacy-el-icon name="el-icon-position" />
         </div>
         <p>合并转发</p>
       </div>
       <div class="btn-group">
         <div class="multi-icon pointer" @click="$emit('event', 'forward')">
-          <i class="el-icon-position" />
+          <legacy-el-icon name="el-icon-position" />
         </div>
         <p>逐条转发</p>
       </div>
       <div class="btn-group">
         <div class="multi-icon pointer" @click="$emit('event', 'delete')">
-          <i class="el-icon-delete" />
+          <legacy-el-icon name="el-icon-delete" />
         </div>
         <p>批量删除</p>
       </div>
       <div class="btn-group">
         <div class="multi-icon pointer" @click="$emit('event', 'close')">
-          <i class="el-icon-close" />
+          <legacy-el-icon name="el-icon-close" />
         </div>
         <p>关闭</p>
       </div>

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

@@ -9,10 +9,10 @@
           <!-- 数据加载状态栏 -->
           <div class="loading-toolbar">
             <span v-if="loadRecord.status == 0" class="color-blue">
-              <i class="el-icon-loading" /> 正在加载数据中...
+              <legacy-el-icon name="el-icon-loading" /> 正在加载数据中...
             </span>
             <span v-if="loadRecord.status == 1" class="pointer color-blue" @click="loadChatRecords">
-              <i class="el-icon-bottom" /> 查看更多消息...
+              <legacy-el-icon name="el-icon-bottom" /> 查看更多消息...
             </span>
             <span v-if="loadRecord.status == 2"> 没有更多消息了... </span>
           </div>
@@ -39,8 +39,7 @@
               'checkbox-border': multiSelect.isOpen === true,
             }">
               <aside v-show="multiSelect.isOpen" class="checkbox-column">
-                <i class="el-icon-success" :class="{ selected: verifyMultiSelect(item.id) }"
-                  @click="triggerMultiSelect(item.id)" />
+                <legacy-el-icon name="el-icon-success" :class="{ selected: verifyMultiSelect(item.id) }" @click="triggerMultiSelect(item.id)" />
               </aside>
               <aside class="avatar-column">
                 <div class="avatar-box" v-if="item.float == 'right'">
@@ -59,7 +58,7 @@
                     {{ unixToDate(item.createTime, "MM月dd日 hh:mm") }}
                   </span>
                   <div class="flex flex-a-c">
-                    <i @click="againSendMessage(item)" v-if="item.webSocketStatus" class="el-icon-refresh-left again main-color"></i>
+                    <legacy-el-icon name="el-icon-refresh-left" class="again main-color" @click="againSendMessage(item)" v-if="item.webSocketStatus" />
                     <!-- 文本消息 -->
                     <div v-if="item.messageType == 'MESSAGE'" style="background-color: #d0e9ff;color: black;"
                       class="text-message" :class="{
@@ -122,7 +121,7 @@
                       </span> 
                       <div class="order-status">
                         <el-tag 
-                          size="mini"
+                          size="small"
                           :type="item.text.orderStatus == 'CANCELLED' || item.text.orderStatus == 'UNPAID' || item.text.orderStatus == ' TAKE' ? 'info' : 'danger'">{{
                             item.text.orderStatus == 'CANCELLED' ? '已取消' : item.text.orderStatus == 'UNPAID' ? '未付款' :
                               item.text.orderStatus ==
@@ -156,7 +155,7 @@
         <!-- 新消息气泡 -->
         <div v-show="tipsBoard && unreadMessage.num" class="talk-bubble pointer no-select"
           @click="talkPanelScrollBottom">
-          <i class="el-icon-chat-dot-round" />
+          <legacy-el-icon name="el-icon-chat-dot-round" />
           <span>新消息({{ unreadMessage.num }}条)</span>
           <span>
             &nbsp;#{{ unreadMessage.nickname }}#

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

@@ -4,7 +4,7 @@
       <el-tabs v-model="activeName" @tab-click="handleClick" :stretch=true>
         <el-tab-pane label="最近浏览" name="goods">
           <dl v-if='list.length' class='base-list'>
-            <dd :key="index"  @click="linkToGoods(item.goodsId, item.id)" v-for="(item,index) in list" v-infinite-scroll="loadMore">
+            <dd :key="index"  @click="linkToGoods(item.goodsId, item.id)" v-for="(item,index) in list">
               <div class="base">
                 <div>
                   <img style="width: 60px; height: 60px;margin-left:20px;box-sizing: border-box;" :src="item.thumbnail"
@@ -21,7 +21,7 @@
                     </div>
                   </div>
                 </div>
-                <div class="review"> <el-button  v-if="item.btnHide == 1 && toUser.storeFlag" size="mini"
+                <div class="review"> <el-button  v-if="item.btnHide == 1 && toUser.storeFlag" size="small"
                           @click.stop="submitSendGoodsMessage(item)" plain>发送</el-button></div>
               </div>
             </dd>
@@ -33,7 +33,7 @@
         </el-tab-pane>
         <el-tab-pane label="订单列表" name="orders">
           <dl class='base-order-list' v-if='orderList.length'>
-            <dd  v-for="(item, index) in orderList" v-infinite-scroll="loadMore" :key="index">
+            <dd  v-for="(item, index) in orderList" :key="index">
               <div class="order-list">
                 <div class="order-top order-padding">
                   <span class="order-sn" @click="linkToOrders(item.sn)">订单号:{{ item.sn }}</span>
@@ -48,12 +48,12 @@
                  
                   <div class="order-btn ">
                     <el-button class="store-button" v-if="item.btnHide == 1 && toUser.storeFlag"
-                      size="mini" @click="submitSendOrderMessage(item, index)" plain>发送</el-button>
+                      size="small" @click="submitSendOrderMessage(item, index)" plain>发送</el-button>
                   </div>
                 </div>
                 <div class="order-footer order-padding">
                   <span></span>
-                  <el-tag  size='mini' :type="col[item.orderStatus]">{{
+                  <el-tag  size="small" :type="col[item.orderStatus]">{{
                     item.orderStatus == 'STAY_PICKED_UP' ? '待自提'
                       : item.orderStatus == 'CANCELLED' ? '已取消' : item.orderStatus == 'UNPAID' ? '未付款' : item.orderStatus
                         ==
@@ -108,12 +108,6 @@ export default {
       toUser: (state) => state.user.toUser,
     }),
   },
-  components: {
-    "el-tag": Tag,
-    "el-button": button,
-    "el-tabs": Tabs,
-    "el-tab-pane": TabPane,
-  },
   methods: {
     //跳转订单列表
 
@@ -179,11 +173,11 @@ export default {
   props: {
     list: {
       type: Array,
-      default: [],
+      default: () => [],
     },
     orderList: {
       type: Array,
-      default: []
+      default: () => [],
     },
   },
   mounted () {

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

@@ -11,7 +11,7 @@
           <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"
+          <el-button class="store-button" type="danger" v-if="btnHide == 1 && toUser.storeFlag" size="small"
             @click="submitSendMessage()" plain>发送</el-button>
         </div>
       </div>

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

@@ -8,14 +8,14 @@
         <div>
         <div class="div-zoom">
           <span class="title_left_name"> 店铺名称:</span> <span class="title_right_name">{{ storeInfo.storeName }}</span>
-          <el-tag style="margin-left: 10px;" type="danger" v-if="storeInfo.selfOperated" size="mini">自营</el-tag>
+          <el-tag style="margin-left: 10px;" type="danger" v-if="storeInfo.selfOperated" size="small">自营</el-tag>
         </div>
         <div>
           <span class="title_left_name"> 联系方式:</span> <span class="title_right_name">{{ storeInfo.memberName }}</span>
         </div>
         </div>
         <div>
-          <el-button class="store-button" @click="linkToStore(storeInfo.id)" size="mini"
+          <el-button class="store-button" @click="linkToStore(storeInfo.id)" size="small"
             plain>进入店铺</el-button>
         </div>
       </div>