!146 refactor: mp/wx-msg拆分Msg组件

Merge pull request !146 from dhb52/dev

src/views/mp/components/wx-msg/components/Msg.vue

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <MsgEvent v-if="item.type === MsgType.Event" :item="item" />
+
+    <div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
+
+    <div v-else-if="item.type === MsgType.Voice">
+      <WxVoicePlayer :url="item.mediaUrl" :content="item.recognition" />
+    </div>
+
+    <div v-else-if="item.type === MsgType.Image">
+      <a target="_blank" :href="item.mediaUrl">
+        <img :src="item.mediaUrl" style="width: 100px" />
+      </a>
+    </div>
+
+    <div
+      v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
+      style="text-align: center"
+    >
+      <WxVideoPlayer :url="item.mediaUrl" />
+    </div>
+
+    <div v-else-if="item.type === MsgType.Link" class="avue-card__detail">
+      <el-link type="success" :underline="false" target="_blank" :href="item.url">
+        <div class="avue-card__title"><i class="el-icon-link"></i>{{ item.title }}</div>
+      </el-link>
+      <div class="avue-card__info" style="height: unset">{{ item.description }}</div>
+    </div>
+
+    <div v-else-if="item.type === MsgType.Location">
+      <WxLocation :label="item.label" :location-y="item.locationY" :location-x="item.locationX" />
+    </div>
+
+    <div v-else-if="item.type === MsgType.News" style="width: 300px">
+      <WxNews :articles="item.articles" />
+    </div>
+
+    <div v-else-if="item.type === MsgType.Music">
+      <WxMusic
+        :title="item.title"
+        :description="item.description"
+        :thumb-media-url="item.thumbMediaUrl"
+        :music-url="item.musicUrl"
+        :hq-music-url="item.hqMusicUrl"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="Msg">
+import WxVideoPlayer from '@/views/mp/components/wx-video-play'
+import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
+import WxNews from '@/views/mp/components/wx-news'
+import WxLocation from '@/views/mp/components/wx-location'
+import WxMusic from '@/views/mp/components/wx-music'
+import MsgEvent from './MsgEvent.vue'
+import { MsgType } from '../types'
+
+const props = defineProps<{
+  item: any
+}>()
+
+const item = ref<any>(props.item)
+</script>
+
+<style scoped></style>

src/views/mp/components/wx-msg/components/MsgList.vue

@@ -18,65 +18,16 @@
           class="avue-comment__body"
           :style="item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''"
         >
-          <!-- 【事件】区域 TODO 芋艿：是不是把拆个 Message 出来，里面包括 MsgEvent + 各种其它消息，分开有点不够整体 -->
-          <MsgEvent v-if="item.type === MsgType.Event" :item="item" />
-          <!-- 【消息】区域 -->
-          <div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
-          <div v-else-if="item.type === MsgType.Voice">
-            <WxVoicePlayer :url="item.mediaUrl" :content="item.recognition" />
-          </div>
-          <div v-else-if="item.type === MsgType.Image">
-            <a target="_blank" :href="item.mediaUrl">
-              <img :src="item.mediaUrl" style="width: 100px" />
-            </a>
-          </div>
-          <div
-            v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
-            style="text-align: center"
-          >
-            <WxVideoPlayer :url="item.mediaUrl" />
-          </div>
-          <div v-else-if="item.type === MsgType.Link" class="avue-card__detail">
-            <el-link type="success" :underline="false" target="_blank" :href="item.url">
-              <div class="avue-card__title"><i class="el-icon-link"></i>{{ item.title }}</div>
-            </el-link>
-            <div class="avue-card__info" style="height: unset">{{ item.description }}</div>
-          </div>
-          <!-- TODO 芋艿：待完善 -->
-          <div v-else-if="item.type === MsgType.Location">
-            <WxLocation
-              :label="item.label"
-              :location-y="item.locationY"
-              :location-x="item.locationX"
-            />
-          </div>
-          <div v-else-if="item.type === MsgType.News" style="width: 300px">
-            <!-- TODO 芋艿：待测试；详情页也存在类似的情况 -->
-            <WxNews :articles="item.articles" />
-          </div>
-          <div v-else-if="item.type === MsgType.Music">
-            <WxMusic
-              :title="item.title"
-              :description="item.description"
-              :thumb-media-url="item.thumbMediaUrl"
-              :music-url="item.musicUrl"
-              :hq-music-url="item.hqMusicUrl"
-            />
-          </div>
+          <Msg :item="item" />
         </div>
       </div>
     </div>
   </div>
 </template>
 <script setup lang="ts" name="MsgList">
-import WxVideoPlayer from '@/views/mp/components/wx-video-play'
-import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
-import WxNews from '@/views/mp/components/wx-news'
-import WxLocation from '@/views/mp/components/wx-location'
-import WxMusic from '@/views/mp/components/wx-music'
-import MsgEvent from './MsgEvent.vue'
+import Msg from './Msg.vue'
 import { formatDate } from '@/utils/formatTime'
-import { MsgType, User } from '../types'
+import { User } from '../types'
 import avatarWechat from '@/assets/imgs/wechat.png'
 
 const props = defineProps<{

src/views/mp/components/wx-msg/main.vue

@@ -74,7 +74,7 @@ const reply = ref<Reply>({
 })
 
 const replySelectRef = ref<InstanceType<typeof WxReplySelect> | null>(null) // WxReplySelect组件ref，用于消息发送成功后清除内容
-const msgDivRef = ref() // 消息显示窗口ref，用于滚动到底部
+const msgDivRef = ref<HTMLDivElement | null>(null) // 消息显示窗口ref，用于滚动到底部
 
 /** 完成加载 */
 onMounted(async () => {