From eb27bd5c6debb7a4e1a88d4661ef7c21ea58ba14 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Tue, 25 Nov 2025 21:13:46 +0800
Subject: [PATCH] =?UTF-8?q?review=EF=BC=9A=E3=80=90antd/ele=E3=80=91?=
 =?UTF-8?q?=E4=BB=A3=E7=A0=81=E8=BF=81=E7=A7=BB=E7=9A=84=20review?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../mp/components/wx-location/wx-location.vue |  4 ++--
 .../views/mp/components/wx-music/wx-music.vue |  1 +
 .../views/mp/components/wx-news/wx-news.vue   |  1 -
 .../mp/components/wx-reply/tab-image.vue      |  2 ++
 .../src/views/mp/draft/modules/news-form.vue  |  1 +
 .../src/views/mp/menu/modules/previewer.vue   |  1 +
 .../mp/components/wx-location/wx-location.vue |  5 +---
 .../wx-material-select/wx-material-select.vue |  5 ++--
 .../src/views/mp/components/wx-msg/msg.vue    |  1 +
 .../src/views/mp/components/wx-msg/wx-msg.vue |  2 +-
 .../views/mp/components/wx-music/wx-music.vue |  2 ++
 .../mp/components/wx-reply/tab-image.vue      |  2 ++
 .../mp/components/wx-reply/tab-music.vue      |  3 ++-
 .../views/mp/components/wx-reply/tab-news.vue |  1 +
 .../mp/components/wx-reply/tab-video.vue      |  1 +
 .../src/views/mp/components/wx-reply/types.ts | 22 ++++++++---------
 .../wx-video-play/wx-video-play.vue           |  4 ++--
 .../wx-voice-play/wx-voice-play.vue           | 24 +++++++++----------
 .../views/mp/draft/modules/cover-select.vue   |  1 +
 .../src/views/mp/draft/modules/form.vue       |  4 ++--
 apps/web-ele/src/views/mp/menu/index.vue      |  4 +---
 .../src/views/mp/menu/modules/previewer.vue   |  5 ++--
 22 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/apps/web-antd/src/views/mp/components/wx-location/wx-location.vue b/apps/web-antd/src/views/mp/components/wx-location/wx-location.vue
index ac0c4affe..cafda2e03 100644
--- a/apps/web-antd/src/views/mp/components/wx-location/wx-location.vue
+++ b/apps/web-antd/src/views/mp/components/wx-location/wx-location.vue
@@ -7,9 +7,10 @@ import { IconifyIcon } from '@vben/icons';
 
 import { Col, Row } from 'ant-design-vue';
 
+/** 微信消息 - 定位 */
 defineOptions({ name: 'WxLocation' });
 
-// TODO @dylan：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈
+// TODO @dylan：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈；参考 apps/web-ele/src/views/mp/components/wx-location/wx-location.vue
 const props = withDefaults(defineProps<WxLocationProps>(), {
   qqMapKey: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
 });
@@ -31,7 +32,6 @@ defineExpose({
 </script>
 
 <template>
-  <!-- 微信消息 - 定位 -->
   <div>
     <a :href="mapUrl" target="_blank" class="text-primary">
       <Col>
diff --git a/apps/web-antd/src/views/mp/components/wx-music/wx-music.vue b/apps/web-antd/src/views/mp/components/wx-music/wx-music.vue
index 3a6d1a33e..39c10bd0d 100644
--- a/apps/web-antd/src/views/mp/components/wx-music/wx-music.vue
+++ b/apps/web-antd/src/views/mp/components/wx-music/wx-music.vue
@@ -7,6 +7,7 @@ import { Typography } from 'ant-design-vue';
 
 /** 微信消息 - 音乐 */
 defineOptions({ name: 'WxMusic' });
+// TODO @hw：antd 和 ele 的代码风格不一致，例如说：props；
 
 const props = withDefaults(defineProps<WxMusicProps>(), {
   title: '',
diff --git a/apps/web-antd/src/views/mp/components/wx-news/wx-news.vue b/apps/web-antd/src/views/mp/components/wx-news/wx-news.vue
index 94ccf98d4..f03ee5d2f 100644
--- a/apps/web-antd/src/views/mp/components/wx-news/wx-news.vue
+++ b/apps/web-antd/src/views/mp/components/wx-news/wx-news.vue
@@ -104,7 +104,6 @@ defineExpose({
 .news-content-item-title {
   flex: 1;
   font-size: 14px;
-  // padding-left: 10px;
 }
 
 .news-content-item-img {
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue b/apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue
index 0a68f04eb..a7e26d069 100644
--- a/apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue
@@ -85,12 +85,14 @@ async function customRequest(options: any) {
   }
 }
 
+/** 删除图片 */
 function onDelete() {
   reply.value.mediaId = null;
   reply.value.url = null;
   reply.value.name = null;
 }
 
+/** 选择素材 */
 function selectMaterial(item: any) {
   showDialog.value = false;
   reply.value.mediaId = item.mediaId;
diff --git a/apps/web-antd/src/views/mp/draft/modules/news-form.vue b/apps/web-antd/src/views/mp/draft/modules/news-form.vue
index b11d61472..72922dc3e 100644
--- a/apps/web-antd/src/views/mp/draft/modules/news-form.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/news-form.vue
@@ -86,6 +86,7 @@ function plusNews() {
   <Layout>
     <Layout.Sider width="40%" theme="light">
       <div class="mx-auto mb-[10px] w-[60%] border border-[#eaeaea] p-[10px]">
+        <!-- TODO @hw：头条、次条的展示不对。微信聊过的呀~ -->
         <div v-for="(news, index) in newsList" :key="index">
           <div
             class="group relative mx-auto mb-[10px] w-full cursor-pointer border-[2px] bg-white"
diff --git a/apps/web-antd/src/views/mp/menu/modules/previewer.vue b/apps/web-antd/src/views/mp/menu/modules/previewer.vue
index cd13dbabc..311e8a3b8 100644
--- a/apps/web-antd/src/views/mp/menu/modules/previewer.vue
+++ b/apps/web-antd/src/views/mp/menu/modules/previewer.vue
@@ -170,6 +170,7 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
               </div>
             </template>
           </draggable>
+          <!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号  -->
           <div
             class="relative float-left box-border block flex h-[46px] w-[85.5px] cursor-pointer items-center justify-center border border-[#ebedee] bg-white text-center leading-[46px]"
             v-if="!parent.children || parent.children.length < 5"
diff --git a/apps/web-ele/src/views/mp/components/wx-location/wx-location.vue b/apps/web-ele/src/views/mp/components/wx-location/wx-location.vue
index adbdd72e4..311d97bd7 100644
--- a/apps/web-ele/src/views/mp/components/wx-location/wx-location.vue
+++ b/apps/web-ele/src/views/mp/components/wx-location/wx-location.vue
@@ -1,6 +1,3 @@
-<!--
-  【微信消息 - 定位】TODO @Dhb52 目前未启用；；；；@dylan：看看目前是不是没用起来哈？
--->
 <script lang="ts" setup>
 import type { WxLocationProps } from './types';
 
@@ -12,6 +9,7 @@ import { ElCol, ElLink, ElMessage, ElRow } from 'element-plus';
 
 import { getTradeConfig } from '#/api/mall/trade/config';
 
+/** 微信消息 - 定位 */
 defineOptions({ name: 'Location' });
 
 const props = defineProps<WxLocationProps>();
@@ -56,7 +54,6 @@ defineExpose({
 </script>
 
 <template>
-  <!-- 微信消息 - 定位 -->
   <div>
     <ElLink type="primary" target="_blank" :href="mapUrl">
       <ElCol>
diff --git a/apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue b/apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue
index 96298d093..f7e3c38e7 100644
--- a/apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue
+++ b/apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue
@@ -23,7 +23,7 @@ import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
 // TODO @hw：代码风格，看看 antd 和 ele 是不是统一下； 等antd此组件修改完再调整
 
 /** 微信素材选择 */
-defineOptions({ name: 'MaterialSelect' });
+defineOptions({ name: 'WxMaterialSelect' });
 
 const props = withDefaults(
   defineProps<{
@@ -39,13 +39,14 @@ const props = withDefaults(
 const emit = defineEmits<{
   (e: 'selectMaterial', item: any): void;
 }>();
+
 const loading = ref(false); // 遮罩层
 const total = ref(0); // 总条数
 const list = ref<any[]>([]); // 数据列表
 const queryParams = reactive({
+  accountId: props.accountId,
   pageNo: 1,
   pageSize: 10,
-  accountId: props.accountId,
 }); // 查询参数
 
 /** 选择素材 */
diff --git a/apps/web-ele/src/views/mp/components/wx-msg/msg.vue b/apps/web-ele/src/views/mp/components/wx-msg/msg.vue
index d4c1840e5..09ec15e51 100644
--- a/apps/web-ele/src/views/mp/components/wx-msg/msg.vue
+++ b/apps/web-ele/src/views/mp/components/wx-msg/msg.vue
@@ -11,6 +11,7 @@ import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
 
 import MsgEvent from './msg-event.vue';
 
+// TODO @hw：antd 和 ele 保持一致；例如说：1）props；2）WxVoicePlayer 这种；
 defineOptions({ name: 'Msg' });
 
 const props = defineProps<{
diff --git 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
index 7929454cd..f6ca8c531 100644
--- 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
@@ -43,7 +43,7 @@ const reply = ref<any>({
   type: 'text',
 }); // 微信发送消息
 
-const replySelectRef = ref<InstanceType<typeof WxReply> | null>(null); // WxReplySelect组件ref，用于消息发送成功后清除内容
+const replySelectRef = ref<InstanceType<typeof WxReply> | null>(null); // WxReply组件ref，用于消息发送成功后清除内容
 const msgDivRef = ref<HTMLDivElement | null>(null); // 消息显示窗口ref，用于滚动到底部
 
 /** 完成加载 */
diff --git a/apps/web-ele/src/views/mp/components/wx-music/wx-music.vue b/apps/web-ele/src/views/mp/components/wx-music/wx-music.vue
index 00f3288b8..f7c58243d 100644
--- a/apps/web-ele/src/views/mp/components/wx-music/wx-music.vue
+++ b/apps/web-ele/src/views/mp/components/wx-music/wx-music.vue
@@ -1,7 +1,9 @@
 <script lang="ts" setup>
 import { ElLink } from 'element-plus';
+
 /** 微信消息 - 音乐 */
 defineOptions({ name: 'Music' });
+// TODO @hw：antd 和 ele 的代码风格不一致，例如说：props；
 
 const props = defineProps({
   title: {
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue b/apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue
index d179062fb..26c50740c 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue
@@ -20,6 +20,8 @@ import {
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
 import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
 
+defineOptions({ name: 'TabImage' });
+
 const props = defineProps<{
   modelValue: Reply;
 }>();
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/tab-music.vue b/apps/web-ele/src/views/mp/components/wx-reply/tab-music.vue
index f36da6059..728609d60 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-music.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-music.vue
@@ -21,6 +21,8 @@ import {
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
 import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
 
+defineOptions({ name: 'TabMusic' });
+
 const props = defineProps<{
   modelValue: Reply;
 }>();
@@ -69,7 +71,6 @@ function onUploadSuccess(res: any) {
 /** 选择素材 */
 function selectMaterial(item: any) {
   showDialog.value = false;
-
   reply.value.thumbMediaId = item.mediaId;
   reply.value.thumbMediaUrl = item.url;
 }
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue b/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue
index bec81d2fa..b3f00884a 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue
@@ -55,6 +55,7 @@ function onDelete() {
           </ElButton>
         </ElCol>
       </div>
+
       <!-- 选择素材 -->
       <ElCol :span="24" v-if="!reply.content">
         <ElRow class="text-center" align="middle">
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/tab-video.vue b/apps/web-ele/src/views/mp/components/wx-reply/tab-video.vue
index b9df5060f..13be72953 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-video.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-video.vue
@@ -31,6 +31,7 @@ const props = defineProps<{
 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}` };
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/types.ts b/apps/web-ele/src/views/mp/components/wx-reply/types.ts
index 6082a78ae..502b4c574 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/types.ts
+++ b/apps/web-ele/src/views/mp/components/wx-reply/types.ts
@@ -22,21 +22,21 @@ export interface Reply {
 }
 
 /** 利用旧的 reply[accountId, type] 初始化新的 Reply */
-export const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
+export function createEmptyReply(old: Ref<Reply> | Reply): Reply {
   return {
     accountId: unref(old).accountId,
-    type: unref(old).type,
-    name: null,
+    articles: [],
     content: null,
-    mediaId: null,
-    url: null,
-    title: null,
     description: null,
-    thumbMediaId: null,
-    thumbMediaUrl: null,
-    musicUrl: null,
     hqMusicUrl: null,
     introduction: null,
-    articles: [],
+    mediaId: null,
+    musicUrl: null,
+    name: null,
+    thumbMediaId: null,
+    thumbMediaUrl: null,
+    title: null,
+    type: unref(old).type,
+    url: null,
   };
-};
+}
diff --git a/apps/web-ele/src/views/mp/components/wx-video-play/wx-video-play.vue b/apps/web-ele/src/views/mp/components/wx-video-play/wx-video-play.vue
index a92777d86..520d2e5a7 100644
--- a/apps/web-ele/src/views/mp/components/wx-video-play/wx-video-play.vue
+++ b/apps/web-ele/src/views/mp/components/wx-video-play/wx-video-play.vue
@@ -17,9 +17,9 @@ const props = defineProps<{
 
 const dialogVideo = ref(false);
 
-const playVideo = () => {
+function playVideo() {
   dialogVideo.value = true;
-};
+}
 </script>
 
 <template>
diff --git a/apps/web-ele/src/views/mp/components/wx-voice-play/wx-voice-play.vue b/apps/web-ele/src/views/mp/components/wx-voice-play/wx-voice-play.vue
index 67f0db4c5..2b13e86ff 100644
--- a/apps/web-ele/src/views/mp/components/wx-voice-play/wx-voice-play.vue
+++ b/apps/web-ele/src/views/mp/components/wx-voice-play/wx-voice-play.vue
@@ -7,7 +7,7 @@ import { IconifyIcon } from '@vben/icons';
 import BenzAMRRecorder from 'benz-amr-recorder';
 
 /** 微信消息 - 语音 */
-defineOptions({ name: 'VoicePlayer' });
+defineOptions({ name: 'WxVoicePlayer' });
 
 const props = withDefaults(
   defineProps<{
@@ -19,12 +19,12 @@ const props = withDefaults(
   },
 );
 
-const amr = ref();
+const amr = ref<any>();
 const playing = ref(false);
-const duration = ref();
+const duration = ref<number>();
 
 /** 处理点击，播放或暂停 */
-const playVoice = () => {
+function playVoice() {
   // 情况一：未初始化，则创建 BenzAMRRecorder
   if (amr.value === undefined) {
     amrInit();
@@ -36,10 +36,10 @@ const playVoice = () => {
   } else {
     amrPlay();
   }
-};
+}
 
 /** 音频初始化 */
-const amrInit = () => {
+function amrInit() {
   amr.value = new BenzAMRRecorder();
   // 设置播放
   amr.value.initWithUrl(props.url).then(() => {
@@ -50,20 +50,20 @@ const amrInit = () => {
   amr.value.onEnded(() => {
     playing.value = false;
   });
-};
+}
 
 /** 音频播放 */
-const amrPlay = () => {
+function amrPlay() {
   playing.value = true;
   amr.value.play();
-};
+}
 
 /** 音频暂停 */
-const amrStop = () => {
+function amrStop() {
   playing.value = false;
   amr.value.stop();
-};
-// TODO 芋艿：下面样式有点问题
+}
+// TODO dylan：下面样式有点问题
 </script>
 
 <template>
diff --git a/apps/web-ele/src/views/mp/draft/modules/cover-select.vue b/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
index 4f9feec26..0a4a302d3 100644
--- a/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
+++ b/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
@@ -57,6 +57,7 @@ function onMaterialSelected(item: any) {
   newsItem.value.thumbUrl = item.url;
 }
 
+/** 上传前校验 */
 const onBeforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) =>
   useBeforeUpload(UploadType.Image, 2)(file as any);
 
diff --git a/apps/web-ele/src/views/mp/draft/modules/form.vue b/apps/web-ele/src/views/mp/draft/modules/form.vue
index 1563f1a2c..e77e8f6d7 100644
--- a/apps/web-ele/src/views/mp/draft/modules/form.vue
+++ b/apps/web-ele/src/views/mp/draft/modules/form.vue
@@ -24,11 +24,11 @@ const getTitle = computed(() => {
   return formData.value?.mediaId ? '修改图文' : '新建图文';
 });
 
-// 提供 accountId 给子组件
 provide(
   'accountId',
   computed(() => formData.value?.accountId),
-);
+); // 提供 accountId 给子组件
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     if (!formData.value) {
diff --git a/apps/web-ele/src/views/mp/menu/index.vue b/apps/web-ele/src/views/mp/menu/index.vue
index 688b1f268..b4a0ec558 100644
--- a/apps/web-ele/src/views/mp/menu/index.vue
+++ b/apps/web-ele/src/views/mp/menu/index.vue
@@ -271,9 +271,8 @@ function menuListToBackend() {
 }
 
 /** 将前端的 menu，转换成后端接收的 menu */
-// TODO: @芋艿，需要根据后台 API 删除不需要的字段
 function menuToBackend(menu: any) {
-  const result = {
+  return {
     ...menu,
     children: undefined, // 不处理子节点
     reply: undefined, // 稍后复制
@@ -289,7 +288,6 @@ function menuToBackend(menu: any) {
     replyMusicUrl: menu.reply.musicUrl,
     replyHqMusicUrl: menu.reply.hqMusicUrl,
   };
-  return result;
 }
 </script>
 
diff --git a/apps/web-ele/src/views/mp/menu/modules/previewer.vue b/apps/web-ele/src/views/mp/menu/modules/previewer.vue
index 6316f683f..ba7c24c95 100644
--- a/apps/web-ele/src/views/mp/menu/modules/previewer.vue
+++ b/apps/web-ele/src/views/mp/menu/modules/previewer.vue
@@ -140,9 +140,8 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
           "
           @click="menuClicked(parent, x)"
         >
-          <IconifyIcon icon="lucide:list-collapse" color="black" />{{
-            parent.name
-          }}
+          <IconifyIcon icon="lucide:list-collapse" color="black" />
+          {{ parent.name }}
         </div>
         <!-- 以下为二级菜单-->
         <div