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

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>

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: '',

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 {

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;

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"

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"

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>

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,
 }); // 查询参数
 
 /** 选择素材 */

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<{

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，用于滚动到底部
 
 /** 完成加载 */

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: {

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;
 }>();

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;
 }

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">

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}` };

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,
   };
-};
+}

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>

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>

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);
 

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) {

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>
 

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