From 9fc5c7561eac7fb797c881ab70fba90f936cee74 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Sun, 9 Nov 2025 17:30:37 +0800
Subject: [PATCH] =?UTF-8?q?review=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90m?=
 =?UTF-8?q?p=E3=80=91components=20=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/views/mp/draft/components/cover-select.vue |  1 +
 .../views/mp/modules/wx-account-select/index.ts    |  1 +
 .../wx-account-select/wx-account-select.vue        |  2 ++
 .../views/mp/modules/wx-location/wx-location.vue   |  3 ++-
 .../views/mp/modules/wx-material-select/types.ts   |  1 +
 .../wx-material-select/wx-material-select.vue      | 14 ++++++--------
 .../src/views/mp/modules/wx-msg/msg-event.vue      |  1 +
 .../src/views/mp/modules/wx-msg/msg-list.vue       |  4 ++--
 apps/web-antd/src/views/mp/modules/wx-msg/msg.vue  |  2 --
 .../src/views/mp/modules/wx-msg/wx-msg.vue         |  7 ++-----
 .../src/views/mp/modules/wx-music/wx-music.vue     |  1 +
 .../src/views/mp/modules/wx-news/wx-news.vue       |  1 +
 .../src/views/mp/modules/wx-reply/tab-image.vue    |  4 ----
 .../src/views/mp/modules/wx-reply/tab-music.vue    |  5 -----
 .../src/views/mp/modules/wx-reply/tab-news.vue     |  2 --
 .../src/views/mp/modules/wx-reply/tab-video.vue    |  4 ----
 .../src/views/mp/modules/wx-reply/tab-voice.vue    |  6 ------
 .../src/views/mp/modules/wx-reply/wx-reply.vue     |  9 +++------
 .../mp/modules/wx-video-play/wx-video-play.vue     |  5 +----
 .../mp/modules/wx-voice-play/wx-voice-play.vue     |  1 +
 20 files changed, 25 insertions(+), 49 deletions(-)

diff --git a/apps/web-antd/src/views/mp/draft/components/cover-select.vue b/apps/web-antd/src/views/mp/draft/components/cover-select.vue
index 0d6520a2a..2958e18b9 100644
--- a/apps/web-antd/src/views/mp/draft/components/cover-select.vue
+++ b/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"
diff --git a/apps/web-antd/src/views/mp/modules/wx-account-select/index.ts b/apps/web-antd/src/views/mp/modules/wx-account-select/index.ts
index 9ceb20fa5..148f26872 100644
--- a/apps/web-antd/src/views/mp/modules/wx-account-select/index.ts
+++ b/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';
diff --git a/apps/web-antd/src/views/mp/modules/wx-account-select/wx-account-select.vue b/apps/web-antd/src/views/mp/modules/wx-account-select/wx-account-select.vue
index 8e46a490c..d4f66e74b 100644
--- a/apps/web-antd/src/views/mp/modules/wx-account-select/wx-account-select.vue
+++ b/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<{
diff --git a/apps/web-antd/src/views/mp/modules/wx-location/wx-location.vue b/apps/web-antd/src/views/mp/modules/wx-location/wx-location.vue
index 898740109..fd1b60bc2 100644
--- a/apps/web-antd/src/views/mp/modules/wx-location/wx-location.vue
+++ b/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,
diff --git a/apps/web-antd/src/views/mp/modules/wx-material-select/types.ts b/apps/web-antd/src/views/mp/modules/wx-material-select/types.ts
index 3d44c5db7..2e4f8a8f5 100644
--- a/apps/web-antd/src/views/mp/modules/wx-material-select/types.ts
+++ b/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',
diff --git a/apps/web-antd/src/views/mp/modules/wx-material-select/wx-material-select.vue b/apps/web-antd/src/views/mp/modules/wx-material-select/wx-material-select.vue
index 46abfbde9..fcd0b3cfb 100644
--- a/apps/web-antd/src/views/mp/modules/wx-material-select/wx-material-select.vue
+++ b/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 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) {
@@ -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;
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/msg-event.vue b/apps/web-antd/src/views/mp/modules/wx-msg/msg-event.vue
index 2b329eb7a..780e97d5c 100644
--- a/apps/web-antd/src/views/mp/modules/wx-msg/msg-event.vue
+++ b/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 }}】
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/msg-list.vue b/apps/web-antd/src/views/mp/modules/wx-msg/msg-list.vue
index 8614490a3..6373dbb93 100644
--- a/apps/web-antd/src/views/mp/modules/wx-msg/msg-list.vue
+++ b/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>
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/msg.vue b/apps/web-antd/src/views/mp/modules/wx-msg/msg.vue
index 68438237c..a46f81dd5 100644
--- a/apps/web-antd/src/views/mp/modules/wx-msg/msg.vue
+++ b/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>
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/wx-msg.vue b/apps/web-antd/src/views/mp/modules/wx-msg/wx-msg.vue
index 10a349978..a08347caf 100644
--- a/apps/web-antd/src/views/mp/modules/wx-msg/wx-msg.vue
+++ b/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，用于滚动到底部
diff --git a/apps/web-antd/src/views/mp/modules/wx-music/wx-music.vue b/apps/web-antd/src/views/mp/modules/wx-music/wx-music.vue
index 0f3b1c7c3..381292e6f 100644
--- a/apps/web-antd/src/views/mp/modules/wx-music/wx-music.vue
+++ b/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>
diff --git a/apps/web-antd/src/views/mp/modules/wx-news/wx-news.vue b/apps/web-antd/src/views/mp/modules/wx-news/wx-news.vue
index f8afc52d6..0c8daa6ab 100644
--- a/apps/web-antd/src/views/mp/modules/wx-news/wx-news.vue
+++ b/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;
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-image.vue b/apps/web-antd/src/views/mp/modules/wx-reply/tab-image.vue
index 1e0f46223..b629f0902 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/tab-image.vue
+++ b/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>
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-music.vue b/apps/web-antd/src/views/mp/modules/wx-reply/tab-music.vue
index 969f17235..5e9347b71 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/tab-music.vue
+++ b/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>({
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-news.vue b/apps/web-antd/src/views/mp/modules/wx-reply/tab-news.vue
index 53c1bebc0..fbc4eed64 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/tab-news.vue
+++ b/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>
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-video.vue b/apps/web-antd/src/views/mp/modules/wx-reply/tab-video.vue
index c5ad445b0..579a819c1 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/tab-video.vue
+++ b/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>
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-voice.vue b/apps/web-antd/src/views/mp/modules/wx-reply/tab-voice.vue
index df6deab41..420b56b27 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/tab-voice.vue
+++ b/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>
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/wx-reply.vue b/apps/web-antd/src/views/mp/modules/wx-reply/wx-reply.vue
index ef901b533..225e8ab35 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/wx-reply.vue
+++ b/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>();
-// 采用独立的ref来保存当前tab，避免在watch标签变化，对reply进行赋值会产生了循环调用
-const currentTab = ref<ReplyType>(props.modelValue.type || ReplyType.Text);
+
+const tabCache = new Map<ReplyType, Reply>(); // 作为多个标签保存各自 Reply 的缓存
+const currentTab = ref<ReplyType>(props.modelValue.type || ReplyType.Text); // 采用独立的 ref 来保存当前 tab，避免在 watch 标签变化，对 reply进行赋值会产生了循环调用
 
 watch(
   currentTab,
@@ -136,5 +135,3 @@ defineExpose({
     </Tabs.TabPane>
   </Tabs>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/apps/web-antd/src/views/mp/modules/wx-video-play/wx-video-play.vue b/apps/web-antd/src/views/mp/modules/wx-video-play/wx-video-play.vue
index 7a2b4a12c..dc1c1d642 100644
--- a/apps/web-antd/src/views/mp/modules/wx-video-play/wx-video-play.vue
+++ b/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;
 };
diff --git a/apps/web-antd/src/views/mp/modules/wx-voice-play/wx-voice-play.vue b/apps/web-antd/src/views/mp/modules/wx-voice-play/wx-voice-play.vue
index d7c6e7321..14a582b7e 100644
--- a/apps/web-antd/src/views/mp/modules/wx-voice-play/wx-voice-play.vue
+++ b/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;