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

apps/web-ele/src/views/mp/autoReply/modules/types.ts

@@ -1,5 +1,6 @@
 // 消息类型（Follow: 关注时回复；Message: 消息回复；Keyword: 关键词回复）
 // 作为 tab.name，enum 的数字不能随意修改，与 api 参数相关
+// TODO @hw：ele 相比 antd 多了，看看要不要统一下；
 export enum MsgType {
   Follow = 1,
   Keyword = 3,

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

@@ -1,5 +1,3 @@
-// 统一导出所有模块组件
-
 export { default as WxAccountSelect } from './wx-account-select/wx-account-select.vue';
 
 export { default as WxLocation } from './wx-location/wx-location.vue';
@@ -20,3 +18,5 @@ export { default as WxReplySelect } from './wx-reply/wx-reply.vue';
 export { default as WxVideoPlayer } from './wx-video-play/wx-video-play.vue';
 
 export { default as WxVoicePlayer } from './wx-voice-play/wx-voice-play.vue';
+
+// TODO @hw：是不是要和 antd 保持一致哈？

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

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

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

@@ -10,6 +10,7 @@ import { ElMessage, ElOption, ElSelect } from 'element-plus';
 
 import { getSimpleAccountList } from '#/api/mp/account';
 
+// TODO @hw：调整下代码，和 antd 代码风格，尽量保持一致；
 defineOptions({ name: 'AccountSelect' });
 
 const props = defineProps<{

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

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

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

@@ -1,13 +1,15 @@
 <!--
-  【微信消息 - 定位】TODO @Dhb52 目前未启用
+  【微信消息 - 定位】TODO @Dhb52 目前未启用；；；；@hw：看看目前是不是没用起来哈？
 -->
 <script lang="ts" setup>
 import { IconifyIcon } from '@vben/icons';
 
+// TODO @dylan：@hw：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈
 import { ElCol, ElLink, ElRow } from 'element-plus';
 
 defineOptions({ name: 'Location' });
 
+// TODO @hw：antd 和 ele 这里的风格，看看怎么统一！
 const props = defineProps({
   locationX: {
     required: true,
@@ -39,6 +41,7 @@ defineExpose({
 </script>
 
 <template>
+  <!-- 微信消息 - 定位 -->
   <div>
     <ElLink
       type="primary"

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

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

apps/web-ele/src/views/mp/components/wx-material-select/types.ts

@@ -1,3 +1,4 @@
+// TODO @hw：这里的枚举，看看要不要统一
 export enum NewsType {
   Draft = '2',
   Published = '1',

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

@@ -1,8 +1,3 @@
-<!--
-  - Copyright (C) 2018-2019
-  - All rights reserved, Designed By www.joolun.com
-  芋道源码：
--->
 <script lang="ts" setup>
 import { onMounted, reactive, ref } from 'vue';
 
@@ -26,6 +21,9 @@ import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
 
 import { NewsType } from './types';
 
+// TODO @hw：代码风格，看看 antd 和 ele 是不是统一下；
+
+/** 微信素材选择 */
 defineOptions({ name: 'MaterialSelect' });
 
 const props = withDefaults(
@@ -41,18 +39,14 @@ const props = withDefaults(
 
 const emit = defineEmits(['selectMaterial']);
 
-// 遮罩层
-const loading = ref(false);
-// 总条数
-const total = ref(0);
-// 数据列表
-const list = ref<any[]>([]);
-// 查询参数
+const loading = ref(false); // 遮罩层
+const total = ref(0); // 总条数
+const list = ref<any[]>([]); // 数据列表
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   accountId: props.accountId,
-});
+}); // 查询参数
 
 /** 选择素材 */
 function selectMaterialFun(item: any) {
@@ -288,6 +282,8 @@ onMounted(async () => {
   }
 }
 
+/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
+
 .waterfall {
   column-gap: 10px;
   width: 100%;

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

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

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

@@ -7,6 +7,7 @@ const props = defineProps<{
   item: any;
 }>();
 
+// TODO @hw：看看用 antd 的风格，还是 ele 的风格，就是下面的 item。
 const item = ref(props.item);
 </script>
 

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

@@ -8,6 +8,7 @@ import avatarWechat from '#/assets/imgs/wechat.png';
 import Msg from './wx-msg.vue';
 
 // 确保 User 类型被识别为已使用
+// TODO @hw：是不是不用 PropsUser 哈？
 type PropsUser = User;
 
 defineOptions({ name: 'MsgList' });
@@ -18,15 +19,16 @@ const props = defineProps<{
   user: PropsUser;
 }>();
 
-// 使用常量对象替代枚举，避免 linter 误报
 const SendFrom = {
   MpBot: 2,
   User: 1,
-} as const;
+} as const; // 发送来源
 
+// TODO @hw：是不是用 SendFrom ，或者 number？
 type SendFromType = (typeof SendFrom)[keyof typeof SendFrom];
 
 // 显式引用枚举成员供模板使用
+// TODO @hw：是不是用 SendFrom 就好啦？
 const MpBotValue = SendFrom.MpBot;
 const UserValue = SendFrom.User;
 
@@ -72,6 +74,8 @@ const getNickname = (sendFrom: SendFromType) =>
 
 <style lang="scss" scoped>
 /* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
+/** TODO @dylan：@hw 看看有没适合 tindwind 的哈。 */
+
 @import url('../comment.scss');
 @import url('../card.scss');
 </style>

apps/web-ele/src/views/mp/components/wx-msg/types.ts

@@ -1,3 +1,4 @@
+// TODO @hw：是不是放枚举里？
 export enum MsgType {
   Event = 'event',
   Image = 'image',
@@ -10,6 +11,7 @@ export enum MsgType {
   Voice = 'voice',
 }
 
+// TODO @hw：用 MpUserApi 里的 user 可以么？
 export interface User {
   nickname: string;
   avatar: string;

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

@@ -12,6 +12,8 @@ import MsgEvent from './msg-event.vue';
 
 defineOptions({ name: 'Msg' });
 
+// TODO @hw：这个貌似和 antd 的差很多？
+
 const props = defineProps<{
   item: any;
 }>();
@@ -86,5 +88,3 @@ const item = ref<any>(props.item);
     </div>
   </div>
 </template>
-
-<style scoped></style>

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

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

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

@@ -1,7 +1,5 @@
-<!--
-  【微信消息 - 音乐】
--->
 <script lang="ts" setup>
+/** 微信消息 - 音乐 */
 defineOptions({ name: 'Music' });
 
 const props = defineProps({
@@ -38,6 +36,7 @@ defineExpose({
 
 <template>
   <div>
+    <!-- TODO @hw：ElLink -->
     <el-link
       type="success"
       :underline="false"
@@ -62,6 +61,8 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
+/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
+
 /* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss  */
 @import url('../wx-msg/card.scss');
 </style>

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

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

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

@@ -8,6 +8,7 @@
 <script lang="ts" setup>
 import { ElImage } from 'element-plus';
 
+/** 微信消息 - 图文 */
 defineOptions({ name: 'WxNews' });
 
 const props = withDefaults(
@@ -61,6 +62,8 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
+/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
+
 .news-home {
   width: 100%;
   margin: auto;

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

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

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

@@ -28,9 +28,11 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
+// TODO @hw：直接用 ElMessage
 const message = ElMessage;
 
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+// TODO @hw：看看要不要和 antd 保持一致的风格；
 const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
 const reply = computed<Reply>({
   get: () => props.modelValue,
@@ -41,9 +43,9 @@ const showDialog = ref(false);
 const fileList = ref([]);
 const uploadData = reactive({
   accountId: reply.value.accountId,
-  type: 'image',
-  title: '',
   introduction: '',
+  title: '',
+  type: 'image',
 });
 
 /** 图片上传前校验 */
@@ -156,6 +158,4 @@ function selectMaterial(item: any) {
       </ElCol>
     </ElRow>
   </div>
-</template>
-
-<style lang="scss" scoped></style>
+</template>

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

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { UploadRawFile } from 'element-plus';
 
+// TODO @hw：类似 tab-image.vue 的建议
 import type { Reply } from './types';
 
 import { computed, reactive, ref } from 'vue';
@@ -19,11 +20,8 @@ import {
 } from 'element-plus';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-// import { getAccessToken } from '@/utils/auth'
 import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
 
-// 设置上传的请求头部
-
 const props = defineProps<{
   modelValue: Reply;
 }>();
@@ -45,9 +43,9 @@ const showDialog = ref(false);
 const fileList = ref([]);
 const uploadData = reactive({
   accountId: reply.value.accountId,
-  type: 'thumb', // 音乐类型为thumb
-  title: '',
   introduction: '',
+  title: '',
+  type: 'thumb', // 音乐类型为 thumb
 });
 
 /** 图片上传前校验 */

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

@@ -12,13 +12,17 @@ import News from '#/views/mp/components/wx-news/wx-news.vue';
 
 import { NewsType } from '../wx-material-select/types';
 
+defineOptions({ name: 'TabNews' });
+
 const props = defineProps<{
   modelValue: Reply;
   newsType: NewsType;
 }>();
+
 const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
+
 const reply = computed<Reply>({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
@@ -84,5 +88,3 @@ function onDelete() {
     </ElRow>
   </div>
 </template>
-
-<style lang="scss" scoped></style>

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

@@ -22,6 +22,8 @@ import { UploadType, useBeforeUpload } from '#/utils/useUpload';
 import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
 import VideoPlayer from '#/views/mp/components/wx-video-play/wx-video-play.vue';
 
+defineOptions({ name: 'TabVideo' });
+
 const props = defineProps<{
   modelValue: Reply;
 }>();
@@ -30,13 +32,16 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
+// TODO @hw：还是用 ElMessage
 const message = ElMessage;
 
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+// TODO @hw：这里 antd 和 ele 有差异，要统一么？
 const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
 
 const reply = computed<Reply>({
   get: () => props.modelValue,
+  // TODO @hw：这里 antd 和 ele 有差异，要统一么？
   set: (val: Reply) => emit('update:modelValue', val),
 });
 
@@ -44,9 +49,9 @@ const showDialog = ref(false);
 const fileList = ref([]);
 const uploadData = reactive({
   accountId: reply.value.accountId,
-  type: 'video',
-  title: '',
   introduction: '',
+  title: '',
+  type: 'video',
 });
 
 /** 视频上传前校验 */
@@ -142,5 +147,3 @@ function selectMaterial(item: any) {
     </ElRow>
   </div>
 </template>
-
-<style lang="scss" scoped></style>

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

@@ -21,7 +21,7 @@ import { UploadType, useBeforeUpload } from '#/utils/useUpload';
 import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
 import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
 
-// 设置上传的请求头部
+defineOptions({ name: 'TabVoice' });
 
 const props = defineProps<{
   modelValue: Reply;
@@ -31,12 +31,15 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
+// TODO @hw：用 ElMessage
 const message = ElMessage;
 
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+// TODO @hw：antd 和 ele 写法的统一；
 const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
 const reply = computed<Reply>({
   get: () => props.modelValue,
+  // TODO @hw：这里要和 antd 统一么？还是 ele 和它统一
   set: (val: Reply) => emit('update:modelValue', val),
 });
 
@@ -44,9 +47,9 @@ const showDialog = ref(false);
 const fileList = ref([]);
 const uploadData = reactive({
   accountId: reply.value.accountId,
-  type: 'voice',
-  title: '',
   introduction: '',
+  title: '',
+  type: 'voice',
 });
 
 /** 语音上传前校验 */
@@ -155,6 +158,4 @@ function selectMaterial(item: Reply) {
       </ElCol>
     </ElRow>
   </div>
-</template>
-
-<style lang="scss" scoped></style>
+</template>

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

@@ -2,6 +2,7 @@ import type { Ref } from 'vue';
 
 import { unref } from 'vue';
 
+// TODO @hw：和 antd 风格，保持一致；
 enum ReplyType {
   Image = 'image',
   Music = 'music',
@@ -30,7 +31,7 @@ interface _Reply {
 
 type Reply = _Reply; // Partial<_Reply>
 
-/** 利用旧的reply[accountId, type]初始化新的Reply */
+/** 利用旧的 reply[accountId, type] 初始化新的 Reply */
 const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
   return {
     accountId: unref(old).accountId,

apps/web-ele/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,7 +16,8 @@ import TabVideo from './tab-video.vue';
 import TabVoice from './tab-voice.vue';
 import { createEmptyReply, ReplyType } from './types';
 
-defineOptions({ name: 'ReplySelect' });
+/** 消息回复选择 */
+defineOptions({ name: 'WxReplySelect' });
 
 const props = withDefaults(
   defineProps<{
@@ -36,14 +28,15 @@ const props = withDefaults(
     newsType: () => NewsType.Published,
   },
 );
+
 const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
-// 提供一个默认的 Reply 对象，避免 undefined 导致的错误
+
 const defaultReply: Reply = {
   accountId: -1,
   type: ReplyType.Text,
-};
+}; // 提供一个默认的 Reply 对象，避免 undefined 导致的错误
 
 const reply = computed<Reply>({
   get: () => props.modelValue || defaultReply,
@@ -112,6 +105,4 @@ defineExpose({
       <TabMusic v-model="reply" />
     </ElTabPane>
   </ElTabs>
-</template>
-
-<style lang="scss" scoped></style>
+</template>

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

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

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

@@ -1,15 +1,3 @@
-<!--
-  - Copyright (C) 2018-2019
-  - All rights reserved, Designed By www.joolun.com
-  【微信消息 - 视频】
-  芋道源码：
-  ① bug 修复：
-    1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容；
-      存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
-    2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
-  ② 体验优化：弹窗关闭后，自动暂停视频的播放
-
--->
 <script lang="ts" setup>
 import { ref } from 'vue';
 
@@ -20,8 +8,10 @@ import { ElDialog } from 'element-plus';
 
 import 'video.js/dist/video-js.css';
 
-defineOptions({ name: 'VideoPlayer' });
+/** 微信消息 - 视频 */
+defineOptions({ name: 'WxVideoPlayer' });
 
+// TODO @hw：antd 或者 ele，props 保持一致；
 const props = defineProps({
   url: {
     type: String,
@@ -31,10 +21,6 @@ const props = defineProps({
 
 const dialogVideo = ref(false);
 
-// const handleEvent = (log) => {
-//   console.log('Basic player event', log)
-// }
-
 const playVideo = () => {
   dialogVideo.value = true;
 };
@@ -61,6 +47,7 @@ const playVideo = () => {
         :width="800"
         :playback-rates="[0.7, 1.0, 1.5, 2.0]"
       />
+      <!-- TODO @hw：删除掉？ -->
       <!--     事件，暫時沒用
       @mounted="handleMounted"-->
       <!--        @ready="handleEvent($event)"-->

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

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

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

@@ -1,14 +1,3 @@
-<!--
-  - Copyright (C) 2018-2019
-  - All rights reserved, Designed By www.joolun.com
-  【微信消息 - 语音】
-   芋道源码：
-  ① bug 修复：
-    1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容；
-      存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
-    2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
-  ② 代码优化：将 props 中的 reply 调成为 data 中对应的属性，并补充相关注释
--->
 <script lang="ts" setup>
 import { ref } from 'vue';
 
@@ -17,8 +6,10 @@ import { IconifyIcon } from '@vben/icons';
 // 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
 import BenzAMRRecorder from 'benz-amr-recorder';
 
+/** 微信消息 - 语音 */
 defineOptions({ name: 'VoicePlayer' });
 
+// TODO @hw：antd 和 ele 代码风格一致；
 const props = defineProps({
   url: {
     type: String, // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
@@ -92,6 +83,7 @@ const amrStop = () => {
   </div>
 </template>
 <style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
 .wx-voice-div {
   display: flex;
   align-items: center;

apps/web-ele/src/views/mp/draft/modules/types.ts

@@ -1,3 +1,4 @@
+// TODO @hw：合并到 api 里，参考 antd 的做法；
 interface NewsItem {
   title: string;
   thumbMediaId: string;

apps/web-ele/src/views/mp/menu/index.vue

@@ -20,6 +20,7 @@ import MenuEditor from '#/views/mp/menu/modules/menu-editor.vue';
 import MenuPreviewer from '#/views/mp/menu/modules/menu-previewer.vue';
 
 // Assets for backgrounds
+// TODO @hw：是不是资源的地址，统一下；antd 和 ele，目录不同。建议按照 ele 的方法先；
 import iphoneBackImg from './assets/iphone_backImg.png';
 import menuFootImg from './assets/menu_foot.png';
 import menuHeadImg from './assets/menu_head.png';

apps/web-ele/src/views/mp/menu/modules/menuOptions.ts

@@ -1,3 +1,4 @@
+// TODO @hw：合并到 types；
 export default [
   {
     value: 'view',