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/scripts/migrate-legacy-icons.js

@@ -0,0 +1,81 @@
+const fs = require("fs");
+const path = require("path");
+
+const root = path.join(__dirname, "../src");
+
+const pairs = [
+  [/<i class="el-icon-close"/g, '<legacy-el-icon name="el-icon-close"'],
+  [/<i class="close-btn el-icon-close"/g, '<legacy-el-icon name="el-icon-close" class="close-btn"'],
+  [/<i class="el-icon-loading"/g, '<legacy-el-icon name="el-icon-loading"'],
+  [/<i class="el-icon-bottom"/g, '<legacy-el-icon name="el-icon-bottom"'],
+  [/<i class="el-icon-chat-dot-round"/g, '<legacy-el-icon name="el-icon-chat-dot-round"'],
+  [/<i class="el-icon-search"/g, '<legacy-el-icon name="el-icon-search"'],
+  [/<i class="el-icon-top"/g, '<legacy-el-icon name="el-icon-top"'],
+  [/<i class="el-icon-arrow-down"/g, '<legacy-el-icon name="el-icon-arrow-down"'],
+  [/<i class="el-icon-time"/g, '<legacy-el-icon name="el-icon-time"'],
+  [/<i class="el-icon-setting"/g, '<legacy-el-icon name="el-icon-setting"'],
+  [/<i class="el-icon-circle-close"/g, '<legacy-el-icon name="el-icon-circle-close"'],
+  [/<i class="el-icon-position"/g, '<legacy-el-icon name="el-icon-position"'],
+  [/<i class="el-icon-delete"/g, '<legacy-el-icon name="el-icon-delete"'],
+  [/<i class="el-icon-picture"/g, '<legacy-el-icon name="el-icon-picture"'],
+  [/<i class="el-icon-caret-left"/g, '<legacy-el-icon name="el-icon-caret-left"'],
+  [/<i class="el-icon-caret-right"/g, '<legacy-el-icon name="el-icon-caret-right"'],
+  [/<i class="el-icon-plus"><\/i>/g, '<legacy-el-icon name="el-icon-plus" />'],
+  [/<i class="el-icon-headset"/g, '<legacy-el-icon name="el-icon-headset"'],
+  [/<i class="el-icon-picture-outline-round"/g, '<legacy-el-icon name="el-icon-picture-outline-round"'],
+  [/<i class="el-icon-folder"/g, '<legacy-el-icon name="el-icon-folder"'],
+  [/<i class="el-icon-folder-opened"/g, '<legacy-el-icon name="el-icon-folder-opened"'],
+  [/<i class="el-icon-s-data"/g, '<legacy-el-icon name="el-icon-s-data"'],
+  [/<i class="el-icon-chat-line-round"/g, '<legacy-el-icon name="el-icon-chat-line-round"'],
+  [/<i class="el-icon-video-pause"/g, '<legacy-el-icon name="el-icon-video-pause"'],
+  [/<i class="el-icon-video-play"/g, '<legacy-el-icon name="el-icon-video-play"'],
+  [/<i class="el-icon-service"/g, '<legacy-el-icon name="el-icon-service"'],
+  [/<p class="tools"><i class="el-icon-close"/g, '<p class="tools"><legacy-el-icon name="el-icon-close"'],
+  [/<i class="el-icon-close close-btn"/g, '<legacy-el-icon name="el-icon-close" class="close-btn"'],
+  [/<i class="el-icon-plus" \/> 加好友/g, '<legacy-el-icon name="el-icon-plus" /> 加好友'],
+  [/<i class="el-icon-plus"><\/i> 添加选项/g, '<legacy-el-icon name="el-icon-plus" /> 添加选项'],
+  [
+    /<i @click="againSendMessage\(item\)" v-if="item.webSocketStatus" class="el-icon-refresh-left again main-color"><\/i>/g,
+    '<legacy-el-icon name="el-icon-refresh-left" class="again main-color" @click="againSendMessage(item)" v-if="item.webSocketStatus" />',
+  ],
+  [
+    /<i class="el-icon-success" :class="\{ selected: verifyMultiSelect\(item.id\) \}"\s*@click="triggerMultiSelect\(item.id\)" \/>/g,
+    '<legacy-el-icon name="el-icon-success" :class="{ selected: verifyMultiSelect(item.id) }" @click="triggerMultiSelect(item.id)" />',
+  ],
+  [/icon="el-icon-microphone"/g, ":icon=\"$legacyIcon('el-icon-microphone')\""],
+  [/icon="el-icon-video-pause"/g, ":icon=\"$legacyIcon('el-icon-video-pause')\""],
+  [/icon="el-icon-video-play"/g, ":icon=\"$legacyIcon('el-icon-video-play')\""],
+  [/icon="el-icon-upload"/g, ":icon=\"$legacyIcon('el-icon-upload')\""],
+  [/icon="el-icon-refresh"/g, ":icon=\"$legacyIcon('el-icon-refresh')\""],
+  [/icon="el-icon-refresh-left"/g, ":icon=\"$legacyIcon('el-icon-refresh-left')\""],
+  [/icon="el-icon-refresh-right"/g, ":icon=\"$legacyIcon('el-icon-refresh-right')\""],
+  [/prefix-icon="el-icon-search"/g, ":prefix-icon=\"$legacyIcon('el-icon-search')\""],
+  [/size="mini"/g, 'size="small"'],
+  [/size='mini'/g, "size='small'"],
+  [/size="medium"/g, 'size="default"'],
+];
+
+function walk(dir, files = []) {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name);
+    if (entry.isDirectory()) walk(full, files);
+    else if (full.endsWith(".vue")) files.push(full);
+  }
+  return files;
+}
+
+let changed = 0;
+for (const file of walk(root)) {
+  let content = fs.readFileSync(file, "utf8");
+  let next = content;
+  for (const [pattern, replacement] of pairs) {
+    next = next.replace(pattern, replacement);
+  }
+  if (next !== content) {
+    fs.writeFileSync(file, next);
+    console.log("updated:", path.relative(root, file));
+    changed++;
+  }
+}
+
+console.log("files changed:", changed);

im/src/assets/images.js

@@ -0,0 +1,5 @@
+import defaultAvatar from "@/assets/image/detault-avatar.jpg";
+import defaultUserBanner from "@/assets/image/default-user-banner.png";
+import noOncallImage from "@/assets/image/no-oncall.6b776fcf.png";
+
+export { defaultAvatar, defaultUserBanner, noOncallImage };

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" />
+        <legacy-el-icon v-if="loading" name="el-icon-loading" />
-        <i v-else-if="isPlay" class="el-icon-video-pause" />
+        <legacy-el-icon v-else-if="isPlay" name="el-icon-video-pause" />
-        <i v-else class="el-icon-video-play" />
+        <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="
+      v-else
-        fullscreen ? 'el-icon-close' : 'iconfont icon-tubiao_chakangongyi'
+      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="{
+              :name="refresh ? 'el-icon-loading' : 'el-icon-refresh'"
-                'el-icon-loading': refresh,
-                'el-icon-refresh': !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) }"
+                <legacy-el-icon name="el-icon-success" :class="{ selected: verifyMultiSelect(item.id) }" @click="triggerMultiSelect(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>

im/src/components/editor/MeEditor.vue

@@ -18,24 +18,24 @@
             <p class="tip-title">代码片段</p>
           </li>
           <li @click="recorder = true">
-            <i class="el-icon-headset" />
+            <legacy-el-icon name="el-icon-headset" />
             <p class="tip-title">语音消息</p>
           </li> -->
           <!-- #TODO 发图片功能暂时隐藏 此处会涉及到token过期 -->
           <!-- <li @click="$refs.restFile.click()">
-            <i class="el-icon-picture-outline-round" />
+            <legacy-el-icon name="el-icon-picture-outline-round" />
             <p class="tip-title">图片</p>
           </li> -->
           <!-- <li @click="$refs.restFile2.click()">
-            <i class="el-icon-folder" />
+            <legacy-el-icon name="el-icon-folder" />
             <p class="tip-title">附件</p>
           </li>
           <li @click="filesManager.isShow = true">
-            <i class="el-icon-folder-opened" />
+            <legacy-el-icon name="el-icon-folder-opened" />
             <p class="tip-title">上传管理</p>
           </li>
           <li v-show="isGroupTalk" @click="vote.isShow = true">
-            <i class="el-icon-s-data" />
+            <legacy-el-icon name="el-icon-s-data" />
             <p class="tip-title">发起投票</p>
           </li> -->
 

im/src/components/editor/MeEditorEmoticon.vue

@@ -43,7 +43,7 @@
             class="emoji-item custom-emoji"
             @click="$refs.fileCustomEmoji.click()"
           >
-            <i class="el-icon-picture" />
+            <legacy-el-icon name="el-icon-picture" />
             <span>自定义</span>
           </div>
           <div
@@ -64,7 +64,7 @@
             class="toolbar-item prev-page"
             @click="turnPage(1)"
           >
-            <i class="el-icon-caret-left" />
+            <legacy-el-icon name="el-icon-caret-left" />
           </div>
           <div
             v-for="(item, index) in showItems"
@@ -80,7 +80,7 @@
             class="toolbar-item next-page"
             @click="turnPage(2)"
           >
-            <i class="el-icon-caret-right" />
+            <legacy-el-icon name="el-icon-caret-right" />
           </div>
         </div>
       </el-footer> -->

im/src/components/editor/MeEditorFileManage.vue

@@ -8,7 +8,7 @@
       <p>
         上传管理 <span v-show="total">({{ successNum }}/{{ total }})</span>
       </p>
-      <i class="close-btn el-icon-close" @click="closeBox" />
+      <legacy-el-icon name="el-icon-close" class="close-btn" @click="closeBox" />
     </el-header>
 
     <el-main class="no-padding mian lum-scrollbar">

im/src/components/editor/MeEditorImageView.vue

@@ -4,7 +4,7 @@
       <el-header class="no-padding header" height="50px">
         <p>发送图片</p>
         <p class="tools">
-          <i class="el-icon-close" @click="closeBox" />
+          <legacy-el-icon name="el-icon-close" @click="closeBox" />
         </p>
       </el-header>
 
@@ -21,7 +21,7 @@
         <el-button
           class="btn"
           type="primary"
-          size="medium"
+          size="default"
           :loading="loading"
           @click="uploadImage"
           >立即发送

im/src/components/editor/MeEditorRecorder.vue

@@ -3,7 +3,7 @@
     <el-container class="lum-dialog-box">
       <el-header class="no-padding header no-select" height="50px">
         <p>语音消息</p>
-        <p class="tools"><i class="el-icon-close" @click="closeBox" /></p>
+        <p class="tools"><legacy-el-icon name="el-icon-close" @click="closeBox" /></p>
       </el-header>
 
       <el-main class="no-padding mian">
@@ -52,45 +52,45 @@
         <el-button
           v-show="recorderStatus == 0"
           type="primary"
-          size="mini"
+          size="small"
           round
-          icon="el-icon-microphone"
+          :icon="$legacyIcon('el-icon-microphone')"
           @click="startRecorder"
           >开始录音
         </el-button>
         <el-button
           v-show="recorderStatus == 1"
           type="primary"
-          size="mini"
+          size="small"
           round
-          icon="el-icon-video-pause"
+          :icon="$legacyIcon('el-icon-video-pause')"
           @click="pauseRecorder"
           >暂停录音
         </el-button>
         <el-button
           v-show="recorderStatus == 2"
           type="primary"
-          size="mini"
+          size="small"
           round
-          icon="el-icon-microphone"
+          :icon="$legacyIcon('el-icon-microphone')"
           @click="resumeRecorder"
           >继续录音
         </el-button>
         <el-button
           v-show="recorderStatus == 2"
           type="primary"
-          size="mini"
+          size="small"
           round
-          icon="el-icon-microphone"
+          :icon="$legacyIcon('el-icon-microphone')"
           @click="stopRecorder"
           >结束录音
         </el-button>
         <el-button
           v-show="recorderStatus == 3 || recorderStatus == 6"
           type="primary"
-          size="mini"
+          size="small"
           round
-          icon="el-icon-video-play"
+          :icon="$legacyIcon('el-icon-video-play')"
           @click="playRecorder"
           >播放录音
         </el-button>
@@ -100,9 +100,9 @@
             recorderStatus == 3 || recorderStatus == 5 || recorderStatus == 6
           "
           type="primary"
-          size="mini"
+          size="small"
           round
-          icon="el-icon-video-play"
+          :icon="$legacyIcon('el-icon-video-play')"
           @click="startRecorder"
           >重新录音
         </el-button>
@@ -110,18 +110,18 @@
         <el-button
           v-show="recorderStatus == 4"
           type="primary"
-          size="mini"
+          size="small"
           round
-          icon="el-icon-video-pause"
+          :icon="$legacyIcon('el-icon-video-pause')"
           @click="pausePlayRecorder"
           >暂停播放
         </el-button>
         <el-button
           v-show="recorderStatus == 5"
           type="primary"
-          size="mini"
+          size="small"
           round
-          icon="el-icon-video-play"
+          :icon="$legacyIcon('el-icon-video-play')"
           @click="resumePlayRecorder"
           >继续播放
         </el-button>
@@ -131,7 +131,7 @@
             recorderStatus == 3 || recorderStatus == 5 || recorderStatus == 6
           "
           type="primary"
-          size="mini"
+          size="small"
           round
           @click="submit"
           >立即发送

im/src/components/editor/MeEditorSystemEmoticon.vue

@@ -4,7 +4,7 @@
       <el-header class="no-padding header" height="50px">
         <p>系统表情</p>
         <p class="tools">
-          <i class="el-icon-close" @click="closeBox" />
+          <legacy-el-icon name="el-icon-close" @click="closeBox" />
         </p>
       </el-header>
 
@@ -31,7 +31,7 @@
       </el-main>
 
       <el-footer class="footer" height="50px">
-        <el-button type="primary" size="medium" class="btn" @click="closeBox">
+        <el-button type="primary" size="default" class="btn" @click="closeBox">
           关闭窗口
         </el-button>
       </el-footer>

im/src/components/editor/MeEditorVote.vue

@@ -4,7 +4,7 @@
       <el-header class="header no-select" height="60px">
         <p>发起投票</p>
         <p class="tools">
-          <i class="el-icon-close" @click="$emit('close')" />
+          <legacy-el-icon name="el-icon-close" @click="$emit('close')" />
         </p>
       </el-header>
       <el-main class="main no-padding vote-from">
@@ -18,7 +18,7 @@
         <div class="vote-title">投票主题</div>
         <div>
           <el-input
-            size="medium"
+            size="default"
             clear="vote-input"
             v-model.trim="title"
             placeholder="请输入投票主题，最多50字"
@@ -31,7 +31,7 @@
           <div class="vote-options" v-for="(option, index) in options">
             <div class="lbox">
               <el-input
-                size="medium"
+                size="default"
                 clear="vote-input"
                 v-model.trim="option.value"
                 placeholder="请输入选项内容"
@@ -46,12 +46,12 @@
               </el-input>
             </div>
             <div class="rbox">
-              <i class="el-icon-close" @click="removeOption(index)"></i>
+              <legacy-el-icon name="el-icon-close" @click="removeOption(index)" />
             </div>
           </div>
 
           <h6 class="pointer add-option" @click="addOption">
-            <i class="el-icon-plus"></i> 添加选项
+            <legacy-el-icon name="el-icon-plus" /> 添加选项
           </h6>
         </div>
       </el-main>

im/src/components/global/Empty.vue

@@ -8,6 +8,8 @@
 </template>
 
 <script>
+import { noOncallImage } from "@/assets/images";
+
 export default {
   name: 'Empty',
   props: {
@@ -17,7 +19,7 @@ export default {
     },
     src: {
       type: String,
-      default: require('@/assets/image/no-oncall.6b776fcf.png'),
+      default: noOncallImage,
     },
   },
   data() {

im/src/components/global/LegacyElIcon.vue

@@ -0,0 +1,25 @@
+<template>
+  <el-icon v-bind="$attrs">
+    <component :is="iconComponent" v-if="iconComponent" />
+  </el-icon>
+</template>
+
+<script>
+import { resolveLegacyIcon } from "@/core/legacy-icon-map";
+
+export default {
+  name: "LegacyElIcon",
+  inheritAttrs: false,
+  props: {
+    name: {
+      type: String,
+      default: "",
+    },
+  },
+  computed: {
+    iconComponent() {
+      return resolveLegacyIcon(this.name);
+    },
+  },
+};
+</script>

im/src/components/layout/AbsModule.vue

@@ -2,7 +2,7 @@
   <div>
     <div class="abs-module" v-show="isShow">
       <div class="abs-box">
-        <i class="el-icon-circle-close" @click="close" />
+        <legacy-el-icon name="el-icon-circle-close" @click="close" />
         <a href="https://www.aliyun.com/minisite/goods?userCode=kqyyppx2">
           <img src="~@/assets/image/aliyun-abs.jpg" width="300" />
         </a>

im/src/components/layout/AvatarCropper.vue

@@ -4,7 +4,7 @@
       <el-header class="header" height="50px">
         <p>选择头像</p>
         <p class="tools">
-          <i class="el-icon-close" @click="$emit('close', 0)" />
+          <legacy-el-icon name="el-icon-close" @click="$emit('close', 0)" />
         </p>
       </el-header>
       <el-main class="main">
@@ -45,28 +45,28 @@
               <el-button
                 size="small"
                 plain
-                icon="el-icon-upload"
+                :icon="$legacyIcon('el-icon-upload')"
                 @click="clickUpload"
                 >上传图片
               </el-button>
               <el-button
                 size="small"
                 plain
-                icon="el-icon-refresh"
+                :icon="$legacyIcon('el-icon-refresh')"
                 @click="refreshCrop"
                 >刷新
               </el-button>
               <el-button
                 size="small"
                 plain
-                icon="el-icon-refresh-left"
+                :icon="$legacyIcon('el-icon-refresh-left')"
                 @click="rotateLeft"
                 >左转
               </el-button>
               <el-button
                 size="small"
                 plain
-                icon="el-icon-refresh-right"
+                :icon="$legacyIcon('el-icon-refresh-right')"
                 @click="rotateRight"
                 >右转
               </el-button>

im/src/components/layout/RewardModule.vue

@@ -3,7 +3,7 @@
     <div class="reward" v-show="isShow">
       <div class="title">
         <span>Donate</span>
-        <i class="el-icon-circle-close" @click="close" />
+        <legacy-el-icon name="el-icon-circle-close" @click="close" />
       </div>
       <div class="main">
         <div class="pay-box">

im/src/components/notify/FriendApplyNotify.vue

@@ -2,7 +2,7 @@
   <!-- 新消息提示组件 -->
   <div class="notify-box">
     <div class="lbox">
-      <el-avatar size="medium" :src="avatar" />
+      <el-avatar size="default" :src="avatar" />
     </div>
     <div class="rbox">
       <div class="xheader">

im/src/components/notify/NewMessageNotify.vue

@@ -2,14 +2,14 @@
   <!-- 新消息提示组件 -->
   <div class="notify-box pointer">
     <div class="lbox">
-      <el-avatar size="medium" shape="square" :src="avatar" />
+      <el-avatar size="default" shape="square" :src="avatar" />
     </div>
     <div class="rbox">
       <div class="xheader">
         <p class="title">
           {{ talk_type == 1 ? '私信消息通知' : '群聊消息通知' }}
         </p>
-        <p class="time"><i class="el-icon-time" /> {{ formatTime(datetime) }}</p>
+        <p class="time"><legacy-el-icon name="el-icon-time" /> {{ formatTime(datetime) }}</p>
       </div>
       <div class="xbody">
         <p>@{{ nickname }}</p>

im/src/components/user/UserSearch.vue

@@ -5,7 +5,7 @@
         <el-header class="header" height="50px">
           <p>添加好友</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="main">
@@ -13,7 +13,7 @@
             v-model="mobile"
             id="serach-mobile"
             class="input"
-            prefix-icon="el-icon-search"
+            :prefix-icon="$legacyIcon('el-icon-search')"
             placeholder="请输入对方手机号(精确查找)"
             clearable
             @keyup.enter="onSubmit"

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

@@ -2,7 +2,7 @@
   <div class="lum-dialog-mask animated fadeIn">
     <el-container class="container" v-outside="close">
       <el-header class="no-padding header" height="180px">
-        <i class="close el-icon-error pointer" @click="close" />
+        <legacy-el-icon name="el-icon-error" class="close pointer" @click="close" />
         <div class="img-banner">
           <img :src="detail.bag" class="img-banner" />
         </div>
@@ -55,9 +55,9 @@
                 @keyup.enter="editRemarkSubmit"
               />
             </span>
-            <i
+            <legacy-el-icon
               v-show="!editRemark.isShow"
-              class="el-icon-edit-outline"
+              name="el-icon-edit-outline"
               @click="clickEditRemark"
             />
           </div>
@@ -76,7 +76,7 @@
           v-if="detail.friend_status == 1 && detail.friend_apply == 0"
           type="primary"
           size="small"
-          icon="el-icon-circle-plus-outline"
+          :icon="$legacyIcon('el-icon-circle-plus-outline')"
           @click="apply.isShow = true"
           >添加好友
         </el-button>
@@ -90,7 +90,7 @@
           v-else-if="detail.friend_status == 2"
           type="primary"
           size="small"
-          icon="el-icon-s-promotion"
+          :icon="$legacyIcon('el-icon-s-promotion')"
           @click="sendMessage(detail)"
           >发消息
         </el-button>
@@ -125,6 +125,7 @@
 // import { ServeSearchUser } from "@/api/user";
 import { ServeCreateContact, ServeEditContactRemark } from "@/api/contacts";
 import { toTalk } from "@/utils/talk";
+import { defaultUserBanner } from "@/assets/images";
 
 export default {
   name: "UserCardDetail",
@@ -144,7 +145,7 @@ export default {
         friend_status: 0,
         friend_apply: 0,
         nickname_remark: "",
-        bag: require("@/assets/image/default-user-banner.png"),
+        bag: defaultUserBanner,
         gender: 0,
       },
 
@@ -425,7 +426,7 @@ export default {
       padding-right: 5px;
     }
 
-    .el-icon-edit-outline {
+    .legacy-el-icon {
       margin-left: 3px !important;
     }
   }

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

@@ -5,6 +5,8 @@ import store from "@/store";
 import { setupElementPlus } from "@/plugins/element";
 import { setupLegacyMessage } from "@/utils/message";
 import { registerDirectives } from "@/core/directives";
+import LegacyElIcon from "@/components/global/LegacyElIcon.vue";
+import { resolveLegacyIcon } from "@/core/legacy-icon-map";
 
 export default {
   install(app) {
@@ -30,6 +32,8 @@ export default {
       setupElementPlus(cardApp);
       setupLegacyMessage(cardApp);
       registerDirectives(cardApp);
+      cardApp.component("legacy-el-icon", LegacyElIcon);
+      cardApp.config.globalProperties.$legacyIcon = resolveLegacyIcon;
       cardApp.use(router);
       cardApp.use(store);
       cardApp.mount(container);

im/src/core/global-component.js

@@ -16,6 +16,8 @@ import {
   LoginMessage,
 } from "@/components/chat/messaege";
 import UserCard from "@/components/user/user-card/index";
+import LegacyElIcon from "@/components/global/LegacyElIcon.vue";
+import { resolveLegacyIcon } from "@/core/legacy-icon-map";
 
 const messageComponents = [
   AudioMessage,
@@ -39,5 +41,7 @@ export function registerGlobalComponents(app) {
   messageComponents.forEach((component) => {
     app.component(component.name, component);
   });
+  app.component("legacy-el-icon", LegacyElIcon);
+  app.config.globalProperties.$legacyIcon = resolveLegacyIcon;
   app.use(UserCard);
 }

im/src/core/legacy-icon-map.js

@@ -0,0 +1,96 @@
+import {
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  Bell,
+  Bottom,
+  ChatDotRound,
+  ChatLineRound,
+  CircleCheck,
+  CircleClose,
+  CircleCloseFilled,
+  CirclePlus,
+  Clock,
+  Close,
+  Connection,
+  DataLine,
+  Delete,
+  DocumentCopy,
+  Edit,
+  Flag,
+  Folder,
+  FolderOpened,
+  Headset,
+  Loading,
+  Microphone,
+  MuteNotification,
+  Picture,
+  PictureRounded,
+  Plus,
+  Promotion,
+  Refresh,
+  RefreshLeft,
+  RefreshRight,
+  Remove,
+  Search,
+  Select,
+  Service,
+  Setting,
+  Top,
+  Upload,
+  User,
+  VideoPause,
+  VideoPlay,
+} from "@element-plus/icons-vue";
+
+/** Element UI `el-icon-*` class names → Element Plus icon components */
+export const LEGACY_ICON_MAP = {
+  "el-icon-arrow-down": ArrowDown,
+  "el-icon-bell": Bell,
+  "el-icon-bottom": Bottom,
+  "el-icon-caret-left": ArrowLeft,
+  "el-icon-caret-right": ArrowRight,
+  "el-icon-chat-dot-round": ChatDotRound,
+  "el-icon-chat-line-round": ChatLineRound,
+  "el-icon-circle-close": CircleClose,
+  "el-icon-circle-plus-outline": CirclePlus,
+  "el-icon-close": Close,
+  "el-icon-close-notification": MuteNotification,
+  "el-icon-connection": Connection,
+  "el-icon-delete": Delete,
+  "el-icon-document-copy": DocumentCopy,
+  "el-icon-edit-outline": Edit,
+  "el-icon-error": CircleCloseFilled,
+  "el-icon-finished": Select,
+  "el-icon-folder": Folder,
+  "el-icon-folder-opened": FolderOpened,
+  "el-icon-headset": Headset,
+  "el-icon-loading": Loading,
+  "el-icon-microphone": Microphone,
+  "el-icon-picture": Picture,
+  "el-icon-picture-outline-round": PictureRounded,
+  "el-icon-plus": Plus,
+  "el-icon-position": Promotion,
+  "el-icon-refresh": Refresh,
+  "el-icon-refresh-left": RefreshLeft,
+  "el-icon-refresh-right": RefreshRight,
+  "el-icon-remove-outline": Remove,
+  "el-icon-s-data": DataLine,
+  "el-icon-s-flag": Flag,
+  "el-icon-s-promotion": Promotion,
+  "el-icon-search": Search,
+  "el-icon-service": Service,
+  "el-icon-setting": Setting,
+  "el-icon-success": CircleCheck,
+  "el-icon-time": Clock,
+  "el-icon-top": Top,
+  "el-icon-upload": Upload,
+  "el-icon-user": User,
+  "el-icon-video-pause": VideoPause,
+  "el-icon-video-play": VideoPlay,
+};
+
+export function resolveLegacyIcon(name) {
+  if (!name) return null;
+  return LEGACY_ICON_MAP[name] || null;
+}

im/src/plugins/contextmenu.js

@@ -1,4 +1,5 @@
 import { createApp, h, onMounted, onUnmounted } from "vue";
+import LegacyElIcon from "@/components/global/LegacyElIcon.vue";
 
 let activeMenu = null;
 
@@ -99,7 +100,7 @@ function renderMenuItem(item, close) {
       },
     },
     [
-      item.icon ? h("i", { class: item.icon }) : null,
+      item.icon ? h(LegacyElIcon, { name: item.icon }) : null,
       h("span", item.label),
     ]
   );

im/src/store/modules/user.js

@@ -1,4 +1,5 @@
 import { setUserInfo, getUserInfo, getToken } from "@/utils/auth";
+import { defaultAvatar, defaultUserBanner } from "@/assets/images";
 
 // import { ServeLogout } from "@/api/user";
 
@@ -8,9 +9,9 @@ let state = {
   // 用户昵称
   name: "",
   // 个性头像
-  face: require("@/assets/image/detault-avatar.jpg"),
+  face: defaultAvatar,
   // 名片背景
-  visitCardBag: require("@/assets/image/default-user-banner.png"),
+  visitCardBag: defaultUserBanner,
   // 当前登录状态
   loginStatus: false,
   toUser:""

im/src/store/state.js

@@ -1,4 +1,4 @@
-const defaultAvatar = require('@/assets/image/detault-avatar.jpg')
+import { defaultAvatar } from "@/assets/images";
 
 // 根级别的 state
 const state = {

im/src/views/layout/MainLayout.vue

@@ -18,7 +18,7 @@
             <el-tooltip content="我的消息" placement="right" :visible-arrow="false">
               <router-link to="/message">
                 <div class="menu-items" :class="{ active: idx == 0 }">
-                  <i class="el-icon-chat-line-round" />
+                  <legacy-el-icon name="el-icon-chat-line-round" />
                   <span v-show="unreadNum" class="notify"></span>
                 </div>
               </router-link>

im/src/views/message/index.vue

@@ -20,7 +20,7 @@
             </el-header>
             <el-header height="60px" class="header">
               <div class="from-search">
-                <el-input v-model="input" prefix-icon="el-icon-search" placeholder="搜索好友" size="small" />
+                <el-input v-model="input" :prefix-icon="$legacyIcon('el-icon-search')" placeholder="搜索好友" size="small" />
               </div>
             </el-header>
             <!-- <el-header height="118px" class="logo-header">
@@ -51,7 +51,7 @@
             <el-scrollbar tag="section" ref="menusScrollbar" class="full-height" :native="false">
               <el-main class="main">
                 <p v-show="loadStatus === 0" class="empty-data">
-                  <i class="el-icon-loading" /> 数据加载中...
+                  <legacy-el-icon name="el-icon-loading" /> 数据加载中...
                 </p>
 
                 <p v-show="loadStatus === 1 && talkNum === 0" class="empty-data">
@@ -61,7 +61,7 @@
                 <p v-show="loadStatus === 1 && talkNum > 0" class="main-menu">
                   <span class="title">对话记录({{ talkNum }})</span>
 
-                  <!-- <el-tag size="mini" type="danger" v-if="myUnreadNum"
+                  <!-- <el-tag size="small" type="danger" v-if="myUnreadNum"
                     >未读：{{ myUnreadNum }}</el-tag
                   > -->
                 </p>
@@ -78,7 +78,7 @@
                       <face :text="item.face" v-if="item.face"></face>
                       <face-null :text="item.name" v-else></face-null>
                       <div v-show="item.is_top == 0" class="top-mask" @click.stop="topChatItem(item)">
-                        <i class="el-icon-top" />
+                        <legacy-el-icon name="el-icon-top" />
                       </div>
                     </div>
                     <div class="card-box">