From 80bb508e78ba47405ca0f84fa29d35a8db8e21d7 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 13 Nov 2025 13:57:17 +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=91material=E3=80=81message=20=E7=9A=84=E8=BF=81?=
 =?UTF-8?q?=E7=A7=BB=20v1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/api/mp/account/index.ts     |  1 +
 .../mp/components/wx-account-select/index.ts  |  1 +
 .../mp/components/wx-account-select/main.vue  | 16 ++++++----------
 .../views/mp/components/wx-location/main.vue  |  1 +
 .../mp/components/wx-material-select/main.vue | 19 ++++++++++---------
 .../mp/components/wx-msg/components/Msg.vue   |  2 ++
 .../components/wx-msg/components/MsgEvent.vue |  2 ++
 .../components/wx-msg/components/MsgList.vue  |  5 +++++
 .../src/views/mp/components/wx-msg/main.vue   |  8 +++-----
 .../src/views/mp/components/wx-music/main.vue |  2 ++
 .../src/views/mp/components/wx-news/main.vue  |  2 ++
 .../wx-reply/components/TabImage.vue          |  5 ++++-
 .../wx-reply/components/TabMusic.vue          |  5 ++++-
 .../wx-reply/components/TabNews.vue           |  3 +++
 .../wx-reply/components/TabText.vue           |  2 ++
 .../wx-reply/components/TabVideo.vue          |  5 ++++-
 .../wx-reply/components/TabVoice.vue          |  5 ++++-
 .../src/views/mp/components/wx-reply/main.vue |  9 +++++----
 .../mp/components/wx-voice-play/main.vue      |  4 ++--
 .../mp/material/components/ImageTable.vue     |  4 ++++
 .../mp/material/components/UploadVideo.vue    |  8 ++------
 .../mp/material/components/VideoTable.vue     |  6 ++++--
 .../mp/material/components/VoiceTable.vue     |  6 ++++--
 apps/web-antd/src/views/mp/material/index.vue |  3 +--
 .../src/views/mp/message/MessageTable.vue     | 16 ++++++++++------
 apps/web-antd/src/views/mp/message/index.vue  |  5 ++---
 26 files changed, 90 insertions(+), 55 deletions(-)

diff --git a/apps/web-antd/src/api/mp/account/index.ts b/apps/web-antd/src/api/mp/account/index.ts
index ec156eca2..5bd402230 100644
--- a/apps/web-antd/src/api/mp/account/index.ts
+++ b/apps/web-antd/src/api/mp/account/index.ts
@@ -17,6 +17,7 @@ export namespace MpAccountApi {
     createTime?: Date;
   }
 
+  // TODO @dylan：这个直接使用 Account，简化一点；
   export interface AccountSimple {
     id: number;
     name: string;
diff --git a/apps/web-antd/src/views/mp/components/wx-account-select/index.ts b/apps/web-antd/src/views/mp/components/wx-account-select/index.ts
index 038205bef..0272e5beb 100644
--- a/apps/web-antd/src/views/mp/components/wx-account-select/index.ts
+++ b/apps/web-antd/src/views/mp/components/wx-account-select/index.ts
@@ -1 +1,2 @@
+// TODO @dylan：yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/components 要不加个 index.ts，统一 export 所有的组件
 export { default as WxAccountSelect } from './main.vue';
diff --git a/apps/web-antd/src/views/mp/components/wx-account-select/main.vue b/apps/web-antd/src/views/mp/components/wx-account-select/main.vue
index 3ee327338..96514a1db 100644
--- a/apps/web-antd/src/views/mp/components/wx-account-select/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-account-select/main.vue
@@ -12,23 +12,19 @@ import { getSimpleAccountList } from '#/api/mp/account';
 
 defineOptions({ name: 'WxAccountSelect' });
 
-// 定义事件
 const emit = defineEmits<{
   (e: 'change', id: number, name: string): void;
 }>();
-// 消息弹窗
+
 const { push } = useRouter();
 
-// 当前选中的公众号
 const account: MpAccountApi.Account = reactive({
   id: -1,
   name: '',
-});
+}); // 当前选中的公众号
+const accountList = ref<MpAccountApi.Account[]>([]); // 公众号列表
 
-// 公众号列表
-const accountList = ref<MpAccountApi.Account[]>([]);
-
-// 查询公众号列表
+/** 查询公众号列表 */
 async function handleQuery() {
   accountList.value = await getSimpleAccountList();
   if (accountList.value.length === 0) {
@@ -46,7 +42,7 @@ async function handleQuery() {
   }
 }
 
-// 切换选中公众号
+/** 切换选中公众号 */
 function onChanged(id: SelectValue) {
   const found = accountList.value.find((v) => v.id === id);
   if (found) {
@@ -55,7 +51,7 @@ function onChanged(id: SelectValue) {
   }
 }
 
-// 初始化
+/** 初始化 */
 onMounted(handleQuery);
 </script>
 
diff --git a/apps/web-antd/src/views/mp/components/wx-location/main.vue b/apps/web-antd/src/views/mp/components/wx-location/main.vue
index eac33c164..89fc1e605 100644
--- a/apps/web-antd/src/views/mp/components/wx-location/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-location/main.vue
@@ -7,6 +7,7 @@ import { Col, Row } from 'ant-design-vue';
 
 defineOptions({ name: 'WxLocation' });
 
+// TODO @dylan：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈
 const props = withDefaults(
   defineProps<{
     label: string;
diff --git a/apps/web-antd/src/views/mp/components/wx-material-select/main.vue b/apps/web-antd/src/views/mp/components/wx-material-select/main.vue
index 0f81fd24b..5c1e2fa17 100644
--- a/apps/web-antd/src/views/mp/components/wx-material-select/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-material-select/main.vue
@@ -35,20 +35,17 @@ const emit = defineEmits<{
   (e: 'selectMaterial', item: any): void;
 }>();
 
-// 遮罩层
-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({
   accountId: props.accountId,
   pageNo: 1,
   pageSize: 10,
-});
+}); // 查询参数
 
 const voiceGridColumns: VxeTableGridOptions<any>['columns'] = [
+  // TODO @dylan：any 有 linter 告警；看看别的模块哈
   {
     field: 'mediaId',
     title: '编号',
@@ -83,6 +80,7 @@ const voiceGridColumns: VxeTableGridOptions<any>['columns'] = [
 ];
 
 const videoGridColumns: VxeTableGridOptions<any>['columns'] = [
+  // TODO @dylan：any 有 linter 告警；看看别的模块哈
   {
     field: 'mediaId',
     title: '编号',
@@ -139,9 +137,11 @@ const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
       ajax: {
         query: async ({ page }, { accountId }) => {
           const finalAccountId = accountId ?? queryParams.accountId;
+          // TODO @dylan 这里简化成 !finalAccountId 是不是可以哈。
           if (finalAccountId === undefined || finalAccountId === null) {
             return { list: [], total: 0 };
           }
+          // TODO @dylan：不要带 MpMaterialApi；
           return await MpMaterialApi.getMaterialPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
@@ -158,7 +158,7 @@ const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
     toolbarConfig: {
       refresh: true,
     },
-  } as VxeTableGridOptions<any>,
+  } as VxeTableGridOptions<any>, // TODO @dylan：这里有 linter 告警；看看别的模块哈
 });
 
 const [VideoGrid, videoGridApi] = useVbenVxeGrid({
@@ -383,6 +383,7 @@ watch(
 </template>
 
 <style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
 @media (width >= 992px) and (width <= 1300px) {
   .waterfall {
     column-count: 3;
diff --git a/apps/web-antd/src/views/mp/components/wx-msg/components/Msg.vue b/apps/web-antd/src/views/mp/components/wx-msg/components/Msg.vue
index bcb1805b2..e00744313 100644
--- a/apps/web-antd/src/views/mp/components/wx-msg/components/Msg.vue
+++ b/apps/web-antd/src/views/mp/components/wx-msg/components/Msg.vue
@@ -10,6 +10,8 @@ import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
 import { MsgType } from '../types';
 import MsgEvent from './MsgEvent.vue';
 
+// TODO @dylan：vue 组件名小写 + 中划线
+
 defineOptions({ name: 'Msg' });
 
 defineProps<{
diff --git a/apps/web-antd/src/views/mp/components/wx-msg/components/MsgEvent.vue b/apps/web-antd/src/views/mp/components/wx-msg/components/MsgEvent.vue
index 24b039ebf..a66ad46c4 100644
--- a/apps/web-antd/src/views/mp/components/wx-msg/components/MsgEvent.vue
+++ b/apps/web-antd/src/views/mp/components/wx-msg/components/MsgEvent.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { Tag } from 'ant-design-vue';
 
+// TODO @dylan：vue 组件名小写 + 中划线
+
 defineOptions({ name: 'MsgEvent' });
 
 defineProps<{
diff --git a/apps/web-antd/src/views/mp/components/wx-msg/components/MsgList.vue b/apps/web-antd/src/views/mp/components/wx-msg/components/MsgList.vue
index 0595a67d5..97fc32ab4 100644
--- a/apps/web-antd/src/views/mp/components/wx-msg/components/MsgList.vue
+++ b/apps/web-antd/src/views/mp/components/wx-msg/components/MsgList.vue
@@ -6,6 +6,8 @@ import { formatDateTime } from '@vben/utils';
 
 import Msg from './Msg.vue';
 
+// TODO @dylan：vue 组件名小写 + 中划线
+
 defineOptions({ name: 'MsgList' });
 
 const props = defineProps<{
@@ -24,6 +26,7 @@ function getAvatar(sendFrom: number) {
     : preferences.app.defaultAvatar;
 }
 
+// TODO @dylan：SendFrom 告警；
 function getNickname(sendFrom: SendFrom) {
   return sendFrom === SendFrom.User ? props.user.nickname : '公众号';
 }
@@ -61,6 +64,8 @@ function getNickname(sendFrom: SendFrom) {
 
 <style lang="scss" scoped>
 /* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+
 @import url('../comment.scss');
 @import url('../card.scss');
 
diff --git a/apps/web-antd/src/views/mp/components/wx-msg/main.vue b/apps/web-antd/src/views/mp/components/wx-msg/main.vue
index 277f85e36..81cf19379 100644
--- a/apps/web-antd/src/views/mp/components/wx-msg/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-msg/main.vue
@@ -29,21 +29,19 @@ const queryParams = reactive({
   pageSize: 14, // 每页显示多少条
 });
 
-// 由于微信不再提供昵称，直接使用"用户"展示
 const user: User = reactive({
   accountId, // 公众号账号编号
   avatar: preferences.app.defaultAvatar,
-  nickname: '用户',
+  nickname: '用户', // 由于微信不再提供昵称，直接使用"用户"展示
 });
 
 // ========= 消息发送 =========
 const sendLoading = ref(false); // 发送消息是否加载中
-// 微信发送消息
 const reply = ref<any>({
   accountId: -1,
   articles: [],
   type: 'text',
-});
+}); // 微信发送消息
 
 const replySelectRef = ref<InstanceType<typeof WxReplySelect> | null>(null); // WxReplySelect组件ref，用于消息发送成功后清除内容
 const msgDivRef = ref<HTMLDivElement | null>(null); // 消息显示窗口ref，用于滚动到底部
@@ -59,7 +57,7 @@ onMounted(async () => {
   refreshChange();
 });
 
-// 执行发送
+/** 执行发送 */
 async function sendMsg() {
   if (!unref(reply)) {
     return;
diff --git a/apps/web-antd/src/views/mp/components/wx-music/main.vue b/apps/web-antd/src/views/mp/components/wx-music/main.vue
index 3f3919d9f..a3ff58407 100644
--- a/apps/web-antd/src/views/mp/components/wx-music/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-music/main.vue
@@ -44,6 +44,8 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+
 .music-card {
   display: flex;
   padding: 10px;
diff --git a/apps/web-antd/src/views/mp/components/wx-news/main.vue b/apps/web-antd/src/views/mp/components/wx-news/main.vue
index 04688a1e8..092425965 100644
--- a/apps/web-antd/src/views/mp/components/wx-news/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-news/main.vue
@@ -52,6 +52,8 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+
 .news-home {
   width: 100%;
   margin: auto;
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/components/TabImage.vue b/apps/web-antd/src/views/mp/components/wx-reply/components/TabImage.vue
index ccd9e9b27..76637c173 100644
--- a/apps/web-antd/src/views/mp/components/wx-reply/components/TabImage.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/components/TabImage.vue
@@ -13,6 +13,8 @@ import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
 import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
 import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
 
+// TODO @dylan：文件名的大小写
+
 defineOptions({ name: 'TabImage' });
 
 const props = defineProps<{
@@ -45,7 +47,7 @@ function beforeImageUpload(rawFile: UploadRawFile) {
   return useBeforeUpload(UploadType.Image, 2)(rawFile);
 }
 
-// 自定义上传请求
+/** 自定义上传请求 */
 async function customRequest(options: any) {
   const { file, onSuccess, onError } = options;
 
@@ -165,6 +167,7 @@ function selectMaterial(item: any) {
 </template>
 
 <style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
 .select-item {
   width: 280px;
   padding: 10px;
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/components/TabMusic.vue b/apps/web-antd/src/views/mp/components/wx-reply/components/TabMusic.vue
index ba296df42..e203ad234 100644
--- a/apps/web-antd/src/views/mp/components/wx-reply/components/TabMusic.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/components/TabMusic.vue
@@ -21,6 +21,8 @@ import {
 import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
 import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
 
+// TODO @dylan：文件名的大小写
+
 defineOptions({ name: 'TabMusic' });
 
 const props = defineProps<{
@@ -53,7 +55,7 @@ function beforeImageUpload(rawFile: UploadRawFile) {
   return useBeforeUpload(UploadType.Image, 2)(rawFile);
 }
 
-// 自定义上传请求
+/** 自定义上传请求 */
 async function customRequest(options: any) {
   const { file, onSuccess, onError } = options;
 
@@ -182,6 +184,7 @@ function selectMaterial(item: any) {
 </template>
 
 <style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
 .thumb-container {
   display: flex;
   flex-direction: column;
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/components/TabNews.vue b/apps/web-antd/src/views/mp/components/wx-reply/components/TabNews.vue
index fda0087ef..056b4ce82 100644
--- a/apps/web-antd/src/views/mp/components/wx-reply/components/TabNews.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/components/TabNews.vue
@@ -12,6 +12,8 @@ import { WxNews } from '#/views/mp/components/wx-news';
 
 import { NewsType } from './types';
 
+// TODO @dylan：文件名的大小写
+
 defineOptions({ name: 'TabNews' });
 
 const props = defineProps<{
@@ -94,6 +96,7 @@ function onDelete() {
 </template>
 
 <style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
 .select-item {
   width: 280px;
   padding: 10px;
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/components/TabText.vue b/apps/web-antd/src/views/mp/components/wx-reply/components/TabText.vue
index 914d943a6..3f766f56d 100644
--- a/apps/web-antd/src/views/mp/components/wx-reply/components/TabText.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/components/TabText.vue
@@ -3,6 +3,8 @@ import { computed } from 'vue';
 
 import { Textarea } from 'ant-design-vue';
 
+// TODO @dylan：文件名的大小写
+
 const props = defineProps<{
   modelValue?: null | string;
 }>();
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/components/TabVideo.vue b/apps/web-antd/src/views/mp/components/wx-reply/components/TabVideo.vue
index e44bc414f..23348d1de 100644
--- a/apps/web-antd/src/views/mp/components/wx-reply/components/TabVideo.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/components/TabVideo.vue
@@ -22,6 +22,8 @@ import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
 import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
 import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
 
+// TODO @dylan：文件名的大小写
+
 defineOptions({ name: 'TabVideo' });
 
 const props = defineProps<{
@@ -54,7 +56,7 @@ function beforeVideoUpload(rawFile: UploadRawFile) {
   return useBeforeUpload(UploadType.Video, 10)(rawFile);
 }
 
-// 自定义上传请求
+/** 自定义上传请求 */
 async function customRequest(options: any) {
   const { file, onSuccess, onError } = options;
 
@@ -184,6 +186,7 @@ function selectMaterial(item: any) {
 </template>
 
 <style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
 .ope-row {
   width: 100%;
   padding-top: 10px;
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/components/TabVoice.vue b/apps/web-antd/src/views/mp/components/wx-reply/components/TabVoice.vue
index b83cc7cdb..38273b7d6 100644
--- a/apps/web-antd/src/views/mp/components/wx-reply/components/TabVoice.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/components/TabVoice.vue
@@ -14,6 +14,8 @@ import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
 import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
 import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
 
+// TODO @dylan：文件名的大小写
+
 defineOptions({ name: 'TabVoice' });
 
 const props = defineProps<{
@@ -46,7 +48,7 @@ function beforeVoiceUpload(rawFile: UploadRawFile) {
   return useBeforeUpload(UploadType.Voice, 10)(rawFile);
 }
 
-// 自定义上传请求
+/** 自定义上传请求 */
 async function customRequest(options: any) {
   const { file, onSuccess, onError } = options;
 
@@ -166,6 +168,7 @@ function selectMaterial(item: Reply) {
 </template>
 
 <style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
 .select-item {
   padding: 10px;
   margin: 0 auto 10px;
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/main.vue b/apps/web-antd/src/views/mp/components/wx-reply/main.vue
index 218047742..accb8f54c 100644
--- a/apps/web-antd/src/views/mp/components/wx-reply/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/main.vue
@@ -37,14 +37,14 @@ interface Props {
   modelValue: Reply;
   newsType?: NewsType;
 }
+
 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,
@@ -153,6 +153,7 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
 .select-item {
   width: 280px;
   padding: 10px;
diff --git a/apps/web-antd/src/views/mp/components/wx-voice-play/main.vue b/apps/web-antd/src/views/mp/components/wx-voice-play/main.vue
index 98bf2486e..9a64cdbdb 100644
--- a/apps/web-antd/src/views/mp/components/wx-voice-play/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-voice-play/main.vue
@@ -4,8 +4,7 @@ import { ref } from 'vue';
 import { IconifyIcon } from '@vben/icons';
 
 import { Tag } from 'ant-design-vue';
-// 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
-import BenzAMRRecorder from 'benz-amr-recorder';
+import BenzAMRRecorder from 'benz-amr-recorder'; // 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
 
 defineOptions({ name: 'WxVoicePlayer' });
 
@@ -81,6 +80,7 @@ function amrStop() {
 </template>
 
 <style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
 .wx-voice-div {
   display: flex;
   flex-direction: column;
diff --git a/apps/web-antd/src/views/mp/material/components/ImageTable.vue b/apps/web-antd/src/views/mp/material/components/ImageTable.vue
index 90d44f9aa..947b696a8 100644
--- a/apps/web-antd/src/views/mp/material/components/ImageTable.vue
+++ b/apps/web-antd/src/views/mp/material/components/ImageTable.vue
@@ -4,6 +4,8 @@ import { IconifyIcon } from '@vben/icons';
 
 import { Button, Spin } from 'ant-design-vue';
 
+// TODO @dylan：vue 组件名小写 + 中划线
+
 const props = defineProps<{
   list: any[];
   loading: boolean;
@@ -43,6 +45,8 @@ const { hasAccessByCodes } = useAccess();
 </template>
 
 <style lang="scss" scoped>
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
+
 @media (width >= 992px) and (width <= 1300px) {
   .waterfall {
     column-count: 3;
diff --git a/apps/web-antd/src/views/mp/material/components/UploadVideo.vue b/apps/web-antd/src/views/mp/material/components/UploadVideo.vue
index b192b13e6..325488720 100644
--- a/apps/web-antd/src/views/mp/material/components/UploadVideo.vue
+++ b/apps/web-antd/src/views/mp/material/components/UploadVideo.vue
@@ -59,12 +59,8 @@ const uploadFormRef = ref<FormInstance | null>(null);
 const uploadVideoRef = ref<any>(null);
 
 async function submitVideo() {
-  try {
-    await uploadFormRef.value?.validate();
-    uploadVideoRef.value?.submit();
-  } catch {
-    // Validation failed
-  }
+  await uploadFormRef.value?.validate();
+  uploadVideoRef.value?.submit();
 }
 
 /** 自定义上传 */
diff --git a/apps/web-antd/src/views/mp/material/components/VideoTable.vue b/apps/web-antd/src/views/mp/material/components/VideoTable.vue
index 8dce040c5..825701ad3 100644
--- a/apps/web-antd/src/views/mp/material/components/VideoTable.vue
+++ b/apps/web-antd/src/views/mp/material/components/VideoTable.vue
@@ -12,6 +12,8 @@ import { Button } from 'ant-design-vue';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
 
+// TODO @dylan：vue 组件名小写 + 中划线
+
 const props = defineProps<{
   list: any[];
   loading: boolean;
@@ -85,7 +87,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     showOverflow: 'tooltip',
-  } as VxeTableGridOptions<any>,
+  } as VxeTableGridOptions<any>,  // TODO @dylan：这里有个告警哈；
 });
 
 function handleDownload(url: string) {
@@ -108,7 +110,7 @@ watch(
 watch(
   () => props.loading,
   (loading: boolean) => {
-    gridApi.setLoading(!!loading);
+    gridApi.setLoading(loading);
   },
   { immediate: true },
 );
diff --git a/apps/web-antd/src/views/mp/material/components/VoiceTable.vue b/apps/web-antd/src/views/mp/material/components/VoiceTable.vue
index 4e889fb7c..feadb9628 100644
--- a/apps/web-antd/src/views/mp/material/components/VoiceTable.vue
+++ b/apps/web-antd/src/views/mp/material/components/VoiceTable.vue
@@ -12,6 +12,8 @@ import { Button } from 'ant-design-vue';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
 
+// TODO @dylan：vue 组件名小写 + 中划线
+
 const props = defineProps<{
   list: any[];
   loading: boolean;
@@ -73,7 +75,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     showOverflow: 'tooltip',
-  } as VxeTableGridOptions<any>,
+  } as VxeTableGridOptions<any>, // TODO @dylan：这里有个告警哈；
 });
 
 function handleDownload(url: string) {
@@ -96,7 +98,7 @@ watch(
 watch(
   () => props.loading,
   (loading: boolean) => {
-    gridApi.setLoading(!!loading);
+    gridApi.setLoading(loading);
   },
   { immediate: true },
 );
diff --git a/apps/web-antd/src/views/mp/material/index.vue b/apps/web-antd/src/views/mp/material/index.vue
index 32a5c34a1..d6113caf6 100644
--- a/apps/web-antd/src/views/mp/material/index.vue
+++ b/apps/web-antd/src/views/mp/material/index.vue
@@ -37,13 +37,12 @@ const total = ref(0); // 总条数
 const accountId = ref(-1);
 provide('accountId', accountId);
 
-// 查询参数
 const queryParams = reactive({
   accountId,
   pageNo: 1,
   pageSize: 10,
   permanent: true,
-});
+}); // 查询参数
 const showCreateVideo = ref(false); // 是否新建视频的弹窗
 
 /** 侦听公众号变化 */
diff --git a/apps/web-antd/src/views/mp/message/MessageTable.vue b/apps/web-antd/src/views/mp/message/MessageTable.vue
index d7bcbbe41..29390ada8 100644
--- a/apps/web-antd/src/views/mp/message/MessageTable.vue
+++ b/apps/web-antd/src/views/mp/message/MessageTable.vue
@@ -15,6 +15,8 @@ import { WxNews } from '#/views/mp/components/wx-news';
 import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
 import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
 
+// TODO @dylan：vue 组件名小写 + 中划线
+
 const props = withDefaults(
   defineProps<{
     list?: any[];
@@ -33,6 +35,7 @@ const emit = defineEmits<{
 }>();
 
 const columns: VxeTableGridOptions<any>['columns'] = [
+  // TODO @dylan：any 有 linter 告警；看看别的模块哈
   {
     field: 'createTime',
     title: '发送时间',
@@ -104,11 +107,6 @@ function updateGridData(data: any[]) {
   }
 }
 
-onMounted(() => {
-  updateGridData(normalizeList(props.list));
-  gridApi.setLoading(!!props.loading);
-});
-
 watch(
   () => props.list,
   (list) => {
@@ -120,9 +118,15 @@ watch(
 watch(
   () => props.loading,
   (loading) => {
-    gridApi.setLoading(!!loading);
+    gridApi.setLoading(loading);
   },
 );
+
+/** 初始化 */
+onMounted(() => {
+  updateGridData(normalizeList(props.list));
+  gridApi.setLoading(props.loading);
+});
 </script>
 
 <template>
diff --git a/apps/web-antd/src/views/mp/message/index.vue b/apps/web-antd/src/views/mp/message/index.vue
index b1194b0fd..e094b3771 100644
--- a/apps/web-antd/src/views/mp/message/index.vue
+++ b/apps/web-antd/src/views/mp/message/index.vue
@@ -30,7 +30,6 @@ const loading = ref(false);
 const total = ref(0); // 数据的总页数
 const list = ref<any[]>([]); // 当前页的列表数据
 
-// 搜索参数
 const queryParams = reactive<{
   accountId: number;
   createTime: [Dayjs, Dayjs] | undefined;
@@ -45,7 +44,7 @@ const queryParams = reactive<{
   pageNo: 1,
   pageSize: 10,
   type: MsgType.Text,
-});
+}); // 搜索参数
 
 const queryFormRef = ref(); // 搜索的表单
 
@@ -53,7 +52,7 @@ const queryFormRef = ref(); // 搜索的表单
 const messageBoxVisible = ref(false);
 const messageBoxUserId = ref(0);
 
-/** 侦听accountId */
+/** 侦听 accountId */
 function onAccountChanged(id: number) {
   queryParams.accountId = id;
   queryParams.pageNo = 1;