feat：【antd】【mp】mp 的代码评审（components）

apps/web-antd/src/views/mp/components/wx-reply/index.ts

@@ -1,3 +1,5 @@
 export * from './types';
 
 export { default as WxReply } from './wx-reply.vue';
+
+// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？

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

@@ -26,7 +26,6 @@ const emit = defineEmits<{
 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 reply = computed<Reply>({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
@@ -41,6 +40,7 @@ const uploadData = reactive({
   type: 'image',
 });
 
+/** 图片上传前校验 */
 function beforeImageUpload(rawFile: UploadRawFile) {
   return useBeforeUpload(UploadType.Image, 2)(rawFile);
 }
@@ -65,6 +65,7 @@ async function customRequest(options: any) {
 
     const result = await response.json();
 
+    // TODO @hw：if return 风格，简化掉。if (result.code !=== 0) { ... }
     if (result.code === 0) {
       // 清空上传时的各种数据
       fileList.value = [];

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

@@ -21,6 +21,8 @@ import {
 import { WxMaterialSelect } from '#/views/mp/components';
 import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
 
+// TODO @hw：类似 tab-image.vue 的建议
+
 defineOptions({ name: 'TabMusic' });
 
 const props = defineProps<{
@@ -46,9 +48,10 @@ const uploadData = reactive({
   accountId: reply.value.accountId,
   introduction: '',
   title: '',
-  type: 'thumb', // 音乐类型为thumb
+  type: 'thumb', // 音乐类型为 thumb
 });
 
+/** 图片上传前校验 */
 function beforeImageUpload(rawFile: UploadRawFile) {
   return useBeforeUpload(UploadType.Image, 2)(rawFile);
 }

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

@@ -28,11 +28,13 @@ const reply = computed<Reply>({
 
 const showDialog = ref(false);
 
+/** 选择素材 */
 function selectMaterial(item: any) {
   showDialog.value = false;
   reply.value.articles = item.content.newsItem;
 }
 
+/** 删除图文 */
 function onDelete() {
   reply.value.articles = [];
 }
@@ -72,7 +74,6 @@ function onDelete() {
           </Col>
         </Row>
       </Col>
-
       <Modal
         v-model:open="showDialog"
         title="选择图文"
@@ -92,7 +93,7 @@ function onDelete() {
 </template>
 
 <style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
 .select-item {
   width: 280px;
   padding: 10px;

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

@@ -49,6 +49,7 @@ const uploadData = reactive({
   type: 'video',
 });
 
+/** 视频上传前校验 */
 function beforeVideoUpload(rawFile: UploadRawFile) {
   return useBeforeUpload(UploadType.Video, 10)(rawFile);
 }
@@ -73,6 +74,7 @@ async function customRequest(options: any) {
 
     const result = await response.json();
 
+    // TODO @hw：也采用类似 ele 的 if return(res.code !== 0) return 写法；
     if (result.code === 0) {
       // 清空上传时的各种数据
       fileList.value = [];

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

@@ -41,6 +41,7 @@ const uploadData = reactive({
   type: 'voice',
 });
 
+/** 语音上传前校验 */
 function beforeVoiceUpload(rawFile: UploadRawFile) {
   return useBeforeUpload(UploadType.Voice, 10)(rawFile);
 }
@@ -65,6 +66,7 @@ async function customRequest(options: any) {
 
     const result = await response.json();
 
+    // TODO @hw：if result.code !== 0 return，代码简洁一点。
     if (result.code === 0) {
       // 清空上传时的各种数据
       fileList.value = [];
@@ -85,12 +87,14 @@ async function customRequest(options: any) {
   }
 }
 
+/** 删除语音 */
 function onDelete() {
   reply.value.mediaId = null;
   reply.value.url = null;
   reply.value.name = null;
 }
 
+/** 选择素材 */
 function selectMaterial(item: Reply) {
   showDialog.value = false;
   reply.value.mediaId = item.mediaId;
@@ -165,7 +169,7 @@ function selectMaterial(item: Reply) {
 </template>
 
 <style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
 .select-item {
   padding: 10px;
   margin: 0 auto 10px;

apps/web-antd/src/views/mp/components/wx-reply/types.ts

@@ -21,7 +21,7 @@ export interface Reply {
   url?: null | string;
 }
 
-/** 利用旧的reply[accountId, type]初始化新的Reply */
+/** 利用旧的 reply[accountId, type] 初始化新的 Reply */
 export function createEmptyReply(old: Ref<Reply> | Reply): Reply {
   return {
     accountId: unref(old).accountId,

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

@@ -1,12 +1,3 @@
-<!--
-  - Copyright (C) 2018-2019
-  - All rights reserved, Designed By www.joolun.com
-  芋道源码：
-  ① 移除多余的 rep 为前缀的变量，让 message 消息更简单
-  ② 代码优化，补充注释，提升阅读性
-  ③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入
-  ④ 支持发送【视频】消息时，支持新建视频
--->
 <script lang="ts" setup>
 import type { Reply } from './types';
 
@@ -25,6 +16,7 @@ import TabVideo from './tab-video.vue';
 import TabVoice from './tab-voice.vue';
 import { createEmptyReply } from './types';
 
+/** 消息回复选择 */
 defineOptions({ name: 'WxReplySelect' });
 
 const props = withDefaults(defineProps<Props>(), {
@@ -34,16 +26,16 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
+// TODO @hw：antd 和 ele 风格不同，需要统一；
 interface Props {
   modelValue: Reply | undefined;
   newsType?: NewsType;
 }
 
-// 提供一个默认的 Reply 对象，避免 undefined 导致的错误
 const defaultReply: Reply = {
   accountId: -1,
   type: ReplyType.Text,
-};
+}; // 提供一个默认的 Reply 对象，避免 undefined 导致的错误
 
 const reply = computed<Reply>({
   get: () => props.modelValue || defaultReply,
@@ -53,6 +45,7 @@ const reply = computed<Reply>({
 const tabCache = new Map<ReplyType, Reply>(); // 作为多个标签保存各自 Reply 的缓存
 const currentTab = ref<ReplyType>(props.modelValue?.type || ReplyType.Text); // 采用独立的 ref 来保存当前 tab，避免在 watch 标签变化，对 reply 进行赋值会产生了循环调用
 
+// TODO @hw：antd 和 ele 风格不同，需要统一；
 // 监听 modelValue 变化，同步更新 currentTab 和缓存
 watch(
   () => props.modelValue,
@@ -71,6 +64,7 @@ watch(
   { immediate: true, deep: true },
 );
 
+// TODO @hw：antd 和 ele 风格不同，需要统一；
 watch(
   currentTab,
   (newTab, oldTab) => {