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

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>