review：【antd/ele】【mp】代码迁移的 review

apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue

@@ -43,6 +43,7 @@ const queryParams = reactive({
   pageSize: 10,
 }); // 查询参数
 
+// TODO @dylan：可以把【点击上传】3 个 tab 的按钮，放到右侧的 toolbar 一起，和刷新按钮放在一行；
 const voiceGridColumns: VxeTableGridOptions<MpMaterialApi.Material>['columns'] =
   [
     {

apps/web-antd/src/views/mp/components/wx-reply/tab-music.vue

@@ -31,10 +31,8 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
-const accessStore = useAccessStore();
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
-const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
-
+const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
 const reply = computed<Reply>({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
@@ -94,6 +92,7 @@ async function customRequest(options: any) {
   }
 }
 
+/** 选择素材 */
 function selectMaterial(item: any) {
   showDialog.value = false;
   reply.value.thumbMediaId = item.mediaId;

apps/web-antd/src/views/mp/components/wx-voice-play/wx-voice-play.vue

@@ -63,7 +63,6 @@ function amrStop() {
   playing.value = false;
   amr.value.stop();
 }
-// TODO 芋艿：下面样式有点问题
 </script>
 
 <template>

apps/web-antd/src/views/mp/material/components/data.ts

@@ -1,6 +1,7 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MpMaterialApi } from '#/api/mp/material';
 
+// TODO @dylan：看看 ele 要迁移一个么？
 /** 视频表格列配置 */
 export function useVideoGridColumns(): VxeTableGridOptions<MpMaterialApi.Material>['columns'] {
   return [

apps/web-antd/src/views/mp/message/message-table.vue

@@ -9,6 +9,7 @@ import { formatDate2 } from '@vben/utils';
 
 import { Button, Image, Tag } from 'ant-design-vue';
 
+// TODO @dylan：看看 ele 要迁移一个么？
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   WxLocation,

apps/web-ele/src/api/mp/message/index.ts

@@ -2,6 +2,7 @@ import type { PageParam, PageResult } from '@vben/request';
 
 import { requestClient } from '#/api/request';
 
+// TODO @dylan：这个类的代码，应该和对应的 antd 是一致的。调整下~看看相关的 vue 是不是也要调整掉。
 /** 消息类型枚举 */
 export enum MessageType {
   IMAGE = 'image', // 图片消息

apps/web-ele/src/views/mp/components/index.ts

@@ -1,7 +1,7 @@
 export { default as WxAccountSelect } from './wx-account-select/wx-account-select.vue';
 export { default as WxLocation } from './wx-location/wx-location.vue';
 export { default as WxMaterialSelect } from './wx-material-select/wx-material-select.vue';
-export { default as WxMsg } from './wx-msg/msg.vue';
+export { default as WxMsg } from './wx-msg/msg.vue'; // TODO @hw、@dylan：貌似和 antd 不同。antd 这里是 export { default as WxMsg } from './wx-msg/wx-msg.vue'; 看看哪个是对的
 export { default as WxMusic } from './wx-music/wx-music.vue';
 export { default as WxNews } from './wx-news/wx-news.vue';
 export { default as WxReply } from './wx-reply/wx-reply.vue';

apps/web-ele/src/views/mp/components/wx-location/wx-location.vue

@@ -10,9 +10,11 @@ import { ElCol, ElLink, ElMessage, ElRow } from 'element-plus';
 import { getTradeConfig } from '#/api/mall/trade/config';
 
 /** 微信消息 - 定位 */
-defineOptions({ name: 'Location' });
+defineOptions({ name: 'WxLocation' });
 
-const props = defineProps<WxLocationProps>();
+const props = withDefaults(defineProps<WxLocationProps>(), {
+  qqMapKey: '', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
+});
 
 const fetchedQqMapKey = ref('');
 const resolvedQqMapKey = computed(

apps/web-ele/src/views/mp/components/wx-msg/msg-list.vue

@@ -46,13 +46,15 @@ function getNickname(sendFrom: number) {
       </div>
       <div class="relative mx-2 flex-1 rounded-[5px] border border-[#dedede]">
         <span
-          class="pointer-events-none absolute -left-2 top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#dedede]"
+          v-if="item.sendFrom === SendFrom.MpBot"
+          class="pointer-events-none absolute -left-2 top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[transparent]"
           :class="{
             '-right-2 left-auto border-l-[8px] border-r-0 border-l-[#dedede]':
               item.sendFrom === SendFrom.MpBot,
           }"
         ></span>
         <span
+          v-if="item.sendFrom === SendFrom.User"
           class="pointer-events-none absolute -left-[7px] top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#f8f8f8]"
           :class="{
             '-right-[7px] left-auto border-l-[8px] border-r-0 border-l-[#f8f8f8]':

apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue

@@ -78,8 +78,6 @@ function onDelete() {
 /** 选择素材 */
 function selectMaterial(item: any) {
   showDialog.value = false;
-
-  // reply.value.type = 'image'
   reply.value.mediaId = item.mediaId;
   reply.value.url = item.url;
   reply.value.name = item.name;

apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue

@@ -8,8 +8,7 @@ import { IconifyIcon } from '@vben/icons';
 
 import { ElButton, ElCol, ElDialog, ElRow } from 'element-plus';
 
-import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
-import News from '#/views/mp/components/wx-news/wx-news.vue';
+import { WxMaterialSelect, WxNews } from '#/views/mp/components';
 
 defineOptions({ name: 'TabNews' });
 
@@ -48,7 +47,7 @@ function onDelete() {
         class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
         v-if="reply.articles && reply.articles.length > 0"
       >
-        <News :articles="reply.articles" />
+        <WxNews :articles="reply.articles" />
         <ElCol class="pt-[10px] text-center">
           <ElButton type="danger" circle @click="onDelete">
             <IconifyIcon icon="lucide:trash-2" />
@@ -78,7 +77,7 @@ function onDelete() {
         append-to-body
         destroy-on-close
       >
-        <MaterialSelect
+        <WxMaterialSelect
           type="news"
           :account-id="reply.accountId"
           :news-type="newsType"

apps/web-ele/src/views/mp/components/wx-voice-play/wx-voice-play.vue

@@ -3,8 +3,7 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-// 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
-import BenzAMRRecorder from 'benz-amr-recorder';
+import BenzAMRRecorder from 'benz-amr-recorder'; // 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
 import { ElTag } from 'element-plus';
 
 /** 微信消息 - 语音 */