review：【antd】【mp】components 组件

apps/web-antd/src/views/mp/draft/components/cover-select.vue

@@ -131,6 +131,7 @@ function onUploadError(err: Error) {
           支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
         </div>
       </div>
+      <!-- TODO @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢 -->
       <Modal
         title="选择图片"
         v-model:open="showImageDialog"

apps/web-antd/src/views/mp/modules/wx-account-select/index.ts

@@ -1 +1,2 @@
+// TODO @hw：1）要不统一在 web-antd/src/views/mp/modules 下，搞个 index.ts 去 import 所有；2）这个包名，需要改成 componentns，不是 modules 哈；3）wx 前缀都可以去掉；例如说 account-select.vue
 export { default as WxAccountSelect } from './wx-account-select.vue';

apps/web-antd/src/views/mp/modules/wx-account-select/wx-account-select.vue

@@ -10,6 +10,8 @@ import { message, Select, SelectOption } from 'ant-design-vue';
 
 import { getSimpleAccountList } from '#/api/mp/account';
 
+// TODO @hw：【可讨论】如果这个组件，有办法调整下，让接入的 yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/draft/index.vue 判断简单点，也可以。
+
 defineOptions({ name: 'WxAccountSelect' });
 
 const props = defineProps<{

apps/web-antd/src/views/mp/modules/wx-location/wx-location.vue

@@ -1,5 +1,5 @@
 <!--
-  【微信消息 - 定位】TODO @Dhb52 目前未启用
+  【微信消息 - 定位】TODO @Dhb52 目前未启用；TODO @芋艿：需要测试下；
 -->
 <script lang="ts" setup>
 import { IconifyIcon } from '@vben/icons';
@@ -23,6 +23,7 @@ const props = defineProps({
     type: String,
   },
   qqMapKey: {
+    // TODO @芋艿：是不是要换成全局的读取？
     // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
     required: false,
     type: String,

apps/web-antd/src/views/mp/modules/wx-material-select/types.ts

@@ -3,6 +3,7 @@ export enum NewsType {
   Published = '1',
 }
 
+// TODO @hw：应该要用到？在 material-select.vue 里？
 export enum MaterialType {
   Image = 'image',
   News = 'news',

apps/web-antd/src/views/mp/modules/wx-material-select/wx-material-select.vue

@@ -30,18 +30,14 @@ const props = withDefaults(
 
 const emit = defineEmits(['selectMaterial']);
 
-// 遮罩层
+const loading = ref(false); // 遮罩层
-const loading = ref(false);
+const total = ref(0); // 总条数
-// 总条数
+const list = ref<any[]>([]); // 数据列表
-const total = ref(0);
-// 数据列表
-const list = ref<any[]>([]);
-// 查询参数
 const queryParams = reactive({
   pageNo: 1,
   pageSize: 10,
   accountId: props.accountId,
-});
+}); // 查询参数
 
 /** 选择素材 */
 function selectMaterialFun(item: any) {
@@ -103,6 +99,7 @@ async function getDraftPageFun() {
   total.value = data.total;
 }
 
+// TODO @hw：改成 grid 风格；
 onMounted(async () => {
   getPage();
 });
@@ -234,6 +231,7 @@ onMounted(async () => {
   </div>
 </template>
 <style lang="scss" scoped>
+/** TODO @hw：tindwind 风格 */
 @media (width >= 992px) and (width <= 1300px) {
   .waterfall {
     column-count: 3;

apps/web-antd/src/views/mp/modules/wx-msg/msg-event.vue

@@ -18,6 +18,7 @@ const item = ref(props.item);
     <div v-else-if="item.event === 'unsubscribe'">
       <Tag color="error">取消关注</Tag>
     </div>
+    <!-- @hw：看看能不能处理下 linter 报错哈； -->
     <div v-else-if="item.event === 'CLICK'">
       <Tag>点击菜单</Tag>
       【{{ item.eventKey }}】

apps/web-antd/src/views/mp/modules/wx-msg/msg-list.vue

@@ -18,11 +18,10 @@ const props = defineProps<{
   user: PropsUser;
 }>();
 
-// 使用常量对象替代枚举，避免 linter 误报
 const SendFrom = {
   MpBot: 2,
   User: 1,
-} as const;
+} as const; // 使用常量对象替代枚举，避免 linter 误报
 
 type SendFromType = (typeof SendFrom)[keyof typeof SendFrom];
 
@@ -72,6 +71,7 @@ const getNickname = (sendFrom: SendFromType) =>
 
 <style lang="scss" scoped>
 /* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
+/** TODO @hw：这里有没办法重构掉哈。辛苦~~~ */
 @import url('../comment.scss');
 @import url('../card.scss');
 </style>

apps/web-antd/src/views/mp/modules/wx-msg/msg.vue

@@ -83,5 +83,3 @@ const item = ref<any>(props.item);
     </div>
   </div>
 </template>
-
-<style scoped></style>

apps/web-antd/src/views/mp/modules/wx-msg/wx-msg.vue

@@ -30,7 +30,6 @@ const props = defineProps({
   },
 });
 
-// 消息弹窗
 const accountId = ref(-1); // 公众号ID，需要通过userId初始化
 const loading = ref(false); // 消息列表是否正在加载中
 const hasMore = ref(true); // 是否可以加载更多
@@ -41,21 +40,19 @@ const queryParams = reactive({
   accountId,
 });
 
-// 由于微信不再提供昵称，直接使用"用户"展示
 const user: User = reactive({
-  nickname: '用户',
+  nickname: '用户', // 由于微信不再提供昵称，直接使用"用户"展示
   avatar: profile,
   accountId, // 公众号账号编号
 });
 
 // ========= 消息发送 =========
 const sendLoading = ref(false); // 发送消息是否加载中
-// 微信发送消息
 const reply = ref<Reply>({
   type: ReplyType.Text,
   accountId: -1,
   articles: [],
-});
+}); // 微信发送消息
 
 const replySelectRef = ref<InstanceType<typeof WxReplySelect> | null>(null); // WxReplySelect组件ref，用于消息发送成功后清除内容
 const msgDivRef = ref<HTMLDivElement | null>(null); // 消息显示窗口ref，用于滚动到底部

apps/web-antd/src/views/mp/modules/wx-music/wx-music.vue

@@ -64,6 +64,7 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
+/** TODO @hw：这里有没办法重构掉哈。辛苦~~~ */
 /* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss  */
 @import url('../wx-msg/card.scss');
 </style>

apps/web-antd/src/views/mp/modules/wx-news/wx-news.vue

@@ -63,6 +63,7 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
+/** TODO @hw：tindwind 替代 */
 .news-home {
   width: 100%;
   margin: auto;

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

@@ -21,8 +21,6 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
-// 消息弹窗
-
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
 const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
 const reply = computed<Reply>({
@@ -154,5 +152,3 @@ function selectMaterial(item: any) {
     </Row>
   </div>
 </template>
-
-<style lang="scss" scoped></style>

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

@@ -19,11 +19,8 @@ import {
 } from 'ant-design-vue';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-// import { getAccessToken } from '@/utils/auth'
 import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select';
 
-// 设置上传的请求头部
-
 const props = defineProps<{
   modelValue: Reply;
 }>();
@@ -32,8 +29,6 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
-// 消息弹窗
-
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
 const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
 const reply = computed<Reply>({

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

@@ -83,5 +83,3 @@ function onDelete() {
     </Row>
   </div>
 </template>
-
-<style lang="scss" scoped></style>

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

@@ -31,8 +31,6 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
-// 消息弹窗
-
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
 const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
 
@@ -197,5 +195,3 @@ function selectMaterial(item: any) {
     </Row>
   </div>
 </template>
-
-<style lang="scss" scoped></style>

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

@@ -14,8 +14,6 @@ import { UploadType, useBeforeUpload } from '#/utils/useUpload';
 import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select';
 import { WxVoicePlayer } from '#/views/mp/modules/wx-voice-play';
 
-// 设置上传的请求头部
-
 const props = defineProps<{
   modelValue: Reply;
 }>();
@@ -24,8 +22,6 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
-// 消息弹窗
-
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
 const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
 const reply = computed<Reply>({
@@ -153,5 +149,3 @@ function selectMaterial(item: Reply) {
     </Row>
   </div>
 </template>
-
-<style lang="scss" scoped></style>

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

@@ -42,10 +42,9 @@ const reply = computed<Reply>({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
 });
-// 作为多个标签保存各自Reply的缓存
+
-const tabCache = new Map<ReplyType, Reply>();
+const tabCache = new Map<ReplyType, Reply>(); // 作为多个标签保存各自 Reply 的缓存
-// 采用独立的ref来保存当前tab，避免在watch标签变化，对reply进行赋值会产生了循环调用
+const currentTab = ref<ReplyType>(props.modelValue.type || ReplyType.Text); // 采用独立的 ref 来保存当前 tab，避免在 watch 标签变化，对 reply进行赋值会产生了循环调用
-const currentTab = ref<ReplyType>(props.modelValue.type || ReplyType.Text);
 
 watch(
   currentTab,
@@ -136,5 +135,3 @@ defineExpose({
     </Tabs.TabPane>
   </Tabs>
 </template>
-
-<style lang="scss" scoped></style>

apps/web-antd/src/views/mp/modules/wx-video-play/wx-video-play.vue

@@ -29,12 +29,9 @@ const props = defineProps({
   },
 });
 
+// TODO @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢
 const dialogVideo = ref(false);
 
-// const handleEvent = (log) => {
-//   console.log('Basic player event', log)
-// }
-
 const playVideo = () => {
   dialogVideo.value = true;
 };

apps/web-antd/src/views/mp/modules/wx-voice-play/wx-voice-play.vue

@@ -91,6 +91,7 @@ function amrStop() {
   </div>
 </template>
 <style lang="scss" scoped>
+/** TODO @hw：tindwind 替代 */
 .wx-voice-div {
   display: flex;
   align-items: center;