fix: todo修复

2025-11-20 10:34:21 +08:00
parent c65fcfa2f3 712fdb6382
commit cf14806b6f
237 changed files with 2791 additions and 3444 deletions
--- a/apps/web-ele/src/views/mp/components/wx-msg/card.scss
+++ b/apps/web-ele/src/views/mp/components/wx-msg/card.scss
@@ -0,0 +1,116 @@
+.mp-card {
+  &__item {
+    box-sizing: border-box;
+    height: 200px;
+    margin-bottom: 16px;
+    font-size: 14px;
+    font-feature-settings: 'tnum';
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    color: rgb(0 0 0 / 65%);
+    cursor: pointer;
+    list-style: none;
+    background-color: #fff;
+    border: 1px solid #e8e8e8;
+
+    &:hover {
+      border-color: rgb(0 0 0 / 9%);
+      box-shadow: 0 2px 8px rgb(0 0 0 / 9%);
+    }
+
+    &--add {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      font-size: 16px;
+      color: rgb(0 0 0 / 45%);
+      background-color: #fff;
+      border: 1px dashed #000;
+      border-color: #d9d9d9;
+      border-radius: 2px;
+
+      i {
+        margin-right: 10px;
+      }
+
+      &:hover {
+        color: #40a9ff;
+        background-color: #fff;
+        border-color: #40a9ff;
+      }
+    }
+  }
+
+  &__body {
+    display: flex;
+    padding: 24px;
+  }
+
+  &__detail {
+    flex: 1;
+  }
+
+  &__avatar {
+    width: 48px;
+    height: 48px;
+    margin-right: 12px;
+    overflow: hidden;
+    border-radius: 48px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__title {
+    margin-bottom: 12px;
+    font-size: 16px;
+    color: rgb(0 0 0 / 85%);
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+
+  &__info {
+    display: -webkit-box;
+    height: 64px;
+    overflow: hidden;
+    -webkit-line-clamp: 3;
+    color: rgb(0 0 0 / 45%);
+    -webkit-box-orient: vertical;
+  }
+
+  &__menu {
+    display: flex;
+    justify-content: space-around;
+    height: 50px;
+    line-height: 50px;
+    color: rgb(0 0 0 / 45%);
+    text-align: center;
+    background: #f7f9fa;
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+}
+
+/** joolun 额外加的 */
+.mp-comment__main {
+  flex: unset !important;
+  margin: 0 8px !important;
+  border-radius: 5px !important;
+}
+
+.mp-comment__header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.mp-comment__body {
+  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
--- a/apps/web-ele/src/views/mp/components/wx-msg/comment.scss
+++ b/apps/web-ele/src/views/mp/components/wx-msg/comment.scss
@@ -0,0 +1,109 @@
+/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss  */
+.mp-comment {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 30px;
+
+  &--reverse {
+    flex-direction: row-reverse;
+
+    .mp-comment__main {
+      &::before,
+      &::after {
+        right: -8px;
+        left: auto;
+        border-width: 8px 0 8px 8px;
+      }
+
+      &::before {
+        border-left-color: #dedede;
+      }
+
+      &::after {
+        margin-right: 1px;
+        margin-left: auto;
+        border-left-color: #f8f8f8;
+      }
+    }
+  }
+
+  &__avatar {
+    box-sizing: border-box;
+    width: 48px;
+    height: 48px;
+    vertical-align: middle;
+    border: 1px solid transparent;
+    border-radius: 50%;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 15px;
+    background: #f8f8f8;
+    border-bottom: 1px solid #eee;
+  }
+
+  &__author {
+    font-size: 14px;
+    font-weight: 700;
+    color: #999;
+  }
+
+  &__main {
+    position: relative;
+    flex: 1;
+    margin: 0 20px;
+    border: 1px solid #dedede;
+    border-radius: 2px;
+
+    &::before,
+    &::after {
+      position: absolute;
+      top: 10px;
+      right: 100%;
+      left: -8px;
+      display: block;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+      content: ' ';
+      border-color: transparent;
+      border-style: solid solid outset;
+      border-width: 8px 8px 8px 0;
+    }
+
+    &::before {
+      z-index: 1;
+      border-right-color: #dedede;
+    }
+
+    &::after {
+      z-index: 2;
+      margin-left: 1px;
+      border-right-color: #f8f8f8;
+    }
+  }
+
+  &__body {
+    padding: 15px;
+    overflow: hidden;
+    font-family:
+      'Segoe UI', 'Lucida Grande', Helvetica, Arial, 'Microsoft YaHei',
+      FreeSans, Arimo, 'Droid Sans', 'wenquanyi micro hei', 'Hiragino Sans GB',
+      'Hiragino Sans GB W3', FontAwesome, sans-serif;
+    font-size: 14px;
+    color: #333;
+    background: #fff;
+  }
+
+  blockquote {
+    padding: 1px 0 1px 15px;
+    margin: 0;
+    font-family:
+      Georgia, 'Times New Roman', Times, Kai, 'Kaiti SC', KaiTi, BiauKai,
+      FontAwesome, serif;
+    border-left: 4px solid #ddd;
+  }
+}
--- a/apps/web-ele/src/views/mp/components/wx-msg/index.ts
+++ b/apps/web-ele/src/views/mp/components/wx-msg/index.ts
@@ -0,0 +1,3 @@
+export { default } from './wx-msg.vue';
+
+export { MsgType } from './types';
--- a/apps/web-ele/src/views/mp/components/wx-msg/msg-event.vue
+++ b/apps/web-ele/src/views/mp/components/wx-msg/msg-event.vue
@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { ElTag } from 'element-plus';
+
+const props = defineProps<{
+  item: any;
+}>();
+
+const item = ref(props.item);
+</script>
+
+<template>
+  <div>
+    <div v-if="item.event === 'subscribe'">
+      <ElTag type="success">关注</ElTag>
+    </div>
+    <div v-else-if="item.event === 'unsubscribe'">
+      <ElTag type="danger">取消关注</ElTag>
+    </div>
+    <div v-else-if="item.event === 'CLICK'">
+      <ElTag>点击菜单</ElTag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'VIEW'">
+      <ElTag>点击菜单链接</ElTag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'scancode_waitmsg'">
+      <ElTag>扫码结果</ElTag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'scancode_push'">
+      <ElTag>扫码结果</ElTag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'pic_sysphoto'">
+      <ElTag>系统拍照发图</ElTag>
+    </div>
+    <div v-else-if="item.event === 'pic_photo_or_album'">
+      <ElTag>拍照或者相册</ElTag>
+    </div>
+    <div v-else-if="item.event === 'pic_weixin'">
+      <ElTag>微信相册</ElTag>
+    </div>
+    <div v-else-if="item.event === 'location_select'">
+      <ElTag>选择地理位置</ElTag>
+    </div>
+    <div v-else-if="item.event === 'SCAN'">
+      <ElTag>扫码</ElTag>
+    </div>
+    <div v-else>
+      <ElTag type="danger">未知事件类型</ElTag>
+    </div>
+  </div>
+</template>
--- a/apps/web-ele/src/views/mp/components/wx-msg/msg-list.vue
+++ b/apps/web-ele/src/views/mp/components/wx-msg/msg-list.vue
@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { User } from '../types';
+
+import { formatDateTime } from '@vben/utils';
+
+import avatarWechat from '#/assets/imgs/wechat.png';
+
+import Msg from './wx-msg.vue';
+
+// 确保 User 类型被识别为已使用
+type PropsUser = User;
+
+defineOptions({ name: 'MsgList' });
+
+const props = defineProps<{
+  accountId: number;
+  list: any[];
+  user: PropsUser;
+}>();
+
+// 使用常量对象替代枚举，避免 linter 误报
+const SendFrom = {
+  MpBot: 2,
+  User: 1,
+} as const;
+
+type SendFromType = (typeof SendFrom)[keyof typeof SendFrom];
+
+// 显式引用枚举成员供模板使用
+const MpBotValue = SendFrom.MpBot;
+const UserValue = SendFrom.User;
+
+const getAvatar = (sendFrom: SendFromType) =>
+  sendFrom === UserValue ? props.user.avatar : avatarWechat;
+
+const getNickname = (sendFrom: SendFromType) =>
+  sendFrom === UserValue ? props.user.nickname : '公众号';
+</script>
+<template>
+  <div v-for="item in props.list" :key="item.id">
+    <div
+      class="mb-[30px] flex items-start"
+      :class="{ 'flex-row-reverse': item.sendFrom === MpBotValue }"
+    >
+      <div class="w-20 text-center">
+        <img
+          :src="getAvatar(item.sendFrom)"
+          class="box-border h-12 w-12 rounded-full border border-transparent align-middle"
+        />
+        <div class="text-sm font-bold text-[#999]">
+          {{ getNickname(item.sendFrom) }}
+        </div>
+      </div>
+      <div class="relative mx-5 flex-1 rounded-[5px] border border-[#dedede]">
+        <div
+          class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
+        >
+          <div class="mp-comment__create_time">
+            {{ formatDateTime(item.createTime) }}
+          </div>
+        </div>
+        <div
+          class="overflow-hidden rounded-b-[5px] bg-white px-[15px] py-[15px] text-sm text-[#333]"
+          :style="item.sendFrom === MpBotValue ? 'background: #6BED72;' : ''"
+        >
+          <Msg :item="item" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
+@import url('../comment.scss');
+@import url('../card.scss');
+</style>
--- a/apps/web-ele/src/views/mp/components/wx-msg/types.ts
+++ b/apps/web-ele/src/views/mp/components/wx-msg/types.ts
@@ -0,0 +1,17 @@
+export enum MsgType {
+  Event = 'event',
+  Image = 'image',
+  Link = 'link',
+  Location = 'location',
+  Music = 'music',
+  News = 'news',
+  Text = 'text',
+  Video = 'video',
+  Voice = 'voice',
+}
+
+export interface User {
+  nickname: string;
+  avatar: string;
+  accountId: number;
+}
--- a/apps/web-ele/src/views/mp/components/wx-msg/wx-msg.vue
+++ b/apps/web-ele/src/views/mp/components/wx-msg/wx-msg.vue
@@ -0,0 +1,90 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import Location from '#/views/mp/components/wx-location/wx-location.vue';
+import Music from '#/views/mp/components/wx-music/wx-music.vue';
+import News from '#/views/mp/components/wx-news/wx-news.vue';
+import VideoPlayer from '#/views/mp/components/wx-video-play/wx-video-play.vue';
+import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
+
+import { MsgType } from '../types';
+import MsgEvent from './msg-event.vue';
+
+defineOptions({ name: 'Msg' });
+
+const props = defineProps<{
+  item: any;
+}>();
+
+const item = ref<any>(props.item);
+</script>
+
+<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">
+      <VoicePlayer :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" class="w-[100px]" />
+      </a>
+    </div>
+
+    <div
+      v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
+      class="text-center"
+    >
+      <VideoPlayer :url="item.mediaUrl" />
+    </div>
+
+    <div v-else-if="item.type === MsgType.Link" class="flex-1">
+      <el-link
+        type="success"
+        :underline="false"
+        target="_blank"
+        :href="item.url"
+      >
+        <div
+          class="mb-3 text-base text-[rgba(0,0,0,0.85)] hover:text-[#1890ff]"
+        >
+          <i class="el-icon-link"></i>{{ item.title }}
+        </div>
+      </el-link>
+      <div
+        class="h-auto overflow-hidden text-[rgba(0,0,0,0.45)]"
+        style="height: unset"
+      >
+        {{ item.description }}
+      </div>
+    </div>
+
+    <div v-else-if="item.type === MsgType.Location">
+      <Location
+        :label="item.label"
+        :location-y="item.locationY"
+        :location-x="item.locationX"
+      />
+    </div>
+
+    <div v-else-if="item.type === MsgType.News" class="w-[300px]">
+      <News :articles="item.articles" />
+    </div>
+
+    <div v-else-if="item.type === MsgType.Music">
+      <Music
+        :title="item.title"
+        :description="item.description"
+        :thumb-media-url="item.thumbMediaUrl"
+        :music-url="item.musicUrl"
+        :hq-music-url="item.hqMusicUrl"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>