refactor: mp/wx-msg 拆分组件

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

+<template>
+  <div>
+    <div v-if="item.event === 'subscribe'">
+      <el-tag type="success">关注</el-tag>
+    </div>
+    <div v-else-if="item.event === 'unsubscribe'">
+      <el-tag type="danger">取消关注</el-tag>
+    </div>
+    <div v-else-if="item.event === 'CLICK'">
+      <el-tag>点击菜单</el-tag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'VIEW'">
+      <el-tag>点击菜单链接</el-tag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'scancode_waitmsg'">
+      <el-tag>扫码结果</el-tag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'scancode_push'">
+      <el-tag>扫码结果</el-tag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'pic_sysphoto'">
+      <el-tag>系统拍照发图</el-tag>
+    </div>
+    <div v-else-if="item.event === 'pic_photo_or_album'">
+      <el-tag>拍照或者相册</el-tag>
+    </div>
+    <div v-else-if="item.event === 'pic_weixin'">
+      <el-tag>微信相册</el-tag>
+    </div>
+    <div v-else-if="item.event === 'location_select'">
+      <el-tag>选择地理位置</el-tag>
+    </div>
+    <div v-else>
+      <el-tag type="danger">未知事件类型</el-tag>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  item: any
+}>()
+
+const item = ref(props.item)
+</script>
+
+<style scoped></style>

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

+<template>
+  <div class="execution" v-for="item in props.list" :key="item.id">
+    <div
+      class="avue-comment"
+      :class="{ 'avue-comment--reverse': item.sendFrom === SendFrom.MpBot }"
+    >
+      <div class="avatar-div">
+        <img :src="getAvatar(item.sendFrom)" class="avue-comment__avatar" />
+        <div class="avue-comment__author">
+          {{ getNickname(item.sendFrom) }}
+        </div>
+      </div>
+      <div class="avue-comment__main">
+        <div class="avue-comment__header">
+          <div class="avue-comment__create_time">{{ formatDate(item.createTime) }}</div>
+        </div>
+        <div
+          class="avue-comment__body"
+          :style="item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''"
+        >
+          <!-- 【事件】区域 -->
+          <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>
+        </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 { formatDate } from '@/utils/formatTime'
+import { MsgType, User } from '../types'
+import avatarWechat from '@/assets/imgs/wechat.png'
+
+const props = defineProps<{
+  list: any[]
+  accountId: number
+  user: User
+}>()
+
+enum SendFrom {
+  User = 1,
+  MpBot = 2
+}
+
+const getAvatar = (sendFrom: SendFrom) =>
+  sendFrom === SendFrom.User ? props.user.avatar : avatarWechat
+
+const getNickname = (sendFrom: SendFrom) =>
+  sendFrom === SendFrom.User ? props.user.nickname : '公众号'
+</script>
+
+<style lang="scss" scoped>
+/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
+@import '../comment.scss';
+@import '../card.scss';
+
+.avatar-div {
+  text-align: center;
+  width: 80px;
+}
+</style>

src/views/mp/components/wx-msg/types.ts

@@ -9,3 +9,9 @@ export enum MsgType {
   Music = 'music',
   Music = 'music',
   News = 'news'
   News = 'news'
 }
 }
+
+export interface User {
+  nickname: string
+  avatar: string
+  accountId: number
+}