From e092ec737e23be4c4e646994d6c3a7d0c081b411 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 13 Nov 2025 20:31:46 +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=20v2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                                      | 5 +----
 .../src/views/mp/components/wx-material-select/main.vue    | 1 +
 .../views/mp/components/wx-reply/components/TabMusic.vue   | 2 ++
 apps/web-antd/src/views/mp/hooks/useUpload.ts              | 1 +
 .../src/views/mp/material/components/ImageTable.vue        | 1 +
 .../src/views/mp/material/components/VideoTable.vue        | 7 ++++++-
 .../src/views/mp/material/components/VoiceTable.vue        | 7 +++++++
 apps/web-antd/src/views/mp/material/index.vue              | 4 ++++
 apps/web-antd/src/views/mp/message/index.vue               | 2 ++
 apps/web-antd/src/views/mp/modules/wx-reply/tab-video.vue  | 2 ++
 10 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index dc371b9b0..a45451b07 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -189,10 +189,7 @@
   ],
 
   "github.copilot.enable": {
-    "*": true,
-    "markdown": true,
-    "plaintext": false,
-    "yaml": false
+    "*": false
   },
 
   "cssVariables.lookupFiles": ["packages/core/base/design/src/**/*.css"],
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 5c1e2fa17..09dfad48a 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
@@ -290,6 +290,7 @@ watch(
 <template>
   <Page :bordered="false" class="pb-8">
     <!-- 类型：image -->
+    <!-- TODO @dylan：看看图片的小卡片，是不是可以整齐点，类似微信公众号，图片的高度是一致的哈；https://mp.weixin.qq.com/cgi-bin/filepage?type=2&begin=0&count=12&token=1646383362&lang=zh_CN -->
     <template v-if="props.type === 'image'">
       <Spin :spinning="loading">
         <div class="waterfall">
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 e203ad234..2eeae3fee 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
@@ -137,6 +137,7 @@ function selectMaterial(item: any) {
             </Button>
           </div>
         </div>
+        <!-- TODO @dylan：这里应该不是图片哇？ -->
         <Modal
           v-model:open="showDialog"
           title="选择图片"
@@ -152,6 +153,7 @@ function selectMaterial(item: any) {
         </Modal>
       </Col>
       <Col :span="18">
+        <!-- TODO @dylan：input 两个之间的间距可以调整下。现在和左侧的图片，距离有点远了。 -->
         <div class="input-group">
           <Input
             :value="reply.title || undefined"
diff --git a/apps/web-antd/src/views/mp/hooks/useUpload.ts b/apps/web-antd/src/views/mp/hooks/useUpload.ts
index 1d7236d0b..ed6385a4b 100644
--- a/apps/web-antd/src/views/mp/hooks/useUpload.ts
+++ b/apps/web-antd/src/views/mp/hooks/useUpload.ts
@@ -56,6 +56,7 @@ export const useBeforeUpload = (type: UploadType, maxSizeMB?: number) => {
     const finalMaxSize = maxSizeMB ?? config.maxSizeMB;
 
     // 格式不正确
+    // TODO @dylan：貌似没国际化；
     if (!config.allowTypes.includes(rawFile.type)) {
       message.error($t('mp.upload.invalidFormat', [config.name]));
       return false;
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 947b696a8..eedf200e3 100644
--- a/apps/web-antd/src/views/mp/material/components/ImageTable.vue
+++ b/apps/web-antd/src/views/mp/material/components/ImageTable.vue
@@ -23,6 +23,7 @@ const { hasAccessByCodes } = useAccess();
     <div class="waterfall">
       <div v-for="item in props.list" :key="item.id" class="waterfall-item">
         <a :href="item.url" target="_blank">
+          <!-- TODO @dylan：要不用 Image 组件？ -->
           <img :src="item.url" class="material-img" />
           <div class="item-name">{{ item.name }}</div>
         </a>
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 825701ad3..fd46fe639 100644
--- a/apps/web-antd/src/views/mp/material/components/VideoTable.vue
+++ b/apps/web-antd/src/views/mp/material/components/VideoTable.vue
@@ -25,6 +25,8 @@ const emit = defineEmits<{
 
 const { hasAccessByCodes } = useAccess();
 
+// TODO @dylan：这里有个告警哈；
+// TODO @dylan：放到 data.ts 里；
 const columns: VxeTableGridOptions<any>['columns'] = [
   {
     field: 'mediaId',
@@ -50,6 +52,7 @@ const columns: VxeTableGridOptions<any>['columns'] = [
     align: 'center',
     minWidth: 220,
   },
+  // TODO @dylan：视频的样式，有点奇怪。
   {
     field: 'video',
     title: '视频',
@@ -87,7 +90,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     showOverflow: 'tooltip',
-  } as VxeTableGridOptions<any>,  // TODO @dylan：这里有个告警哈；
+  } as VxeTableGridOptions<any>, // TODO @dylan：这里有个告警哈；
 });
 
 function handleDownload(url: string) {
@@ -121,9 +124,11 @@ watch(
     <template #video="{ row }">
       <WxVideoPlayer v-if="row.url" :url="row.url" />
     </template>
+    <!-- TODO @dylan：应该 data.ts 里 formatDate 就好了。别的模块有的哈。 -->
     <template #createTime="{ row }">
       {{ formatDate2(row.createTime) }}
     </template>
+    <!-- TODO @dylan：用 tableaction 哈：yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/index.vue -->
     <template #actions="{ row }">
       <Button type="link" @click="handleDownload(row.url)">
         <IconifyIcon icon="mdi:download" />
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 feadb9628..056d49def 100644
--- a/apps/web-antd/src/views/mp/material/components/VoiceTable.vue
+++ b/apps/web-antd/src/views/mp/material/components/VoiceTable.vue
@@ -14,6 +14,8 @@ import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
 
 // TODO @dylan：vue 组件名小写 + 中划线
 
+// TODO @dylan：组件内，尽量用 modules 哈。只有对外共享，才用 components
+
 const props = defineProps<{
   list: any[];
   loading: boolean;
@@ -25,6 +27,8 @@ const emit = defineEmits<{
 
 const { hasAccessByCodes } = useAccess();
 
+// TODO @dylan：这里有个告警哈；
+// TODO @dylan：放到 data.ts 里；
 const columns: VxeTableGridOptions<any>['columns'] = [
   {
     field: 'mediaId',
@@ -38,6 +42,7 @@ const columns: VxeTableGridOptions<any>['columns'] = [
     align: 'center',
     minWidth: 200,
   },
+  // TODO @dylan：语音的样式，有点奇怪。
   {
     field: 'voice',
     title: '语音',
@@ -109,10 +114,12 @@ watch(
     <template #voice="{ row }">
       <WxVoicePlayer v-if="row.url" :url="row.url" />
     </template>
+    <!-- TODO @dylan：应该 data.ts 里 formatDate 就好了。别的模块有的哈。 -->
     <template #createTime="{ row }">
       {{ formatDate2(row.createTime) }}
     </template>
     <template #actions="{ row }">
+      <!-- TODO @dylan：用 tableaction 哈：yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/index.vue -->
       <Button type="link" @click="handleDownload(row.url)">
         <IconifyIcon icon="mdi:download" />
         下载
diff --git a/apps/web-antd/src/views/mp/material/index.vue b/apps/web-antd/src/views/mp/material/index.vue
index d6113caf6..26004d5cb 100644
--- a/apps/web-antd/src/views/mp/material/index.vue
+++ b/apps/web-antd/src/views/mp/material/index.vue
@@ -85,6 +85,7 @@ function onTabChange() {
 
 /** 处理删除操作 */
 async function handleDelete(id: number) {
+  // TODO @dylan：参考别的模块的  dylan 哈；
   Modal.confirm({
     content: '此操作将永久删除该文件, 是否继续?',
     title: '提示',
@@ -98,6 +99,7 @@ async function handleDelete(id: number) {
 </script>
 
 <template>
+  <!-- TODO @dylan：这里不太对哈，应该是 doc-alert 展示文档 -->
   <Page
     description="公众号素材"
     doc-link="https://doc.iocoder.cn/mp/material/"
@@ -144,6 +146,7 @@ async function handleDelete(id: number) {
           </div>
         </Tabs.TabPane>
 
+        <!-- TODO @dylan：语音和视频的 tab 下，有了两个外框，需要优化下； -->
         <!-- tab 2：语音  -->
         <Tabs.TabPane :key="UploadType.Voice">
           <template #tab>
@@ -190,6 +193,7 @@ async function handleDelete(id: number) {
             新建视频
           </Button>
           <!-- 新建视频的弹窗 -->
+          <!-- TODO @dlyan：是不是用 Modal 自带的 api 就好啦？modal.open 哪个 -->
           <UploadVideo v-model:open="showCreateVideo" @uploaded="getList" />
           <!-- 列表 -->
           <VideoTable :list="list" :loading="loading" @delete="handleDelete" />
diff --git a/apps/web-antd/src/views/mp/message/index.vue b/apps/web-antd/src/views/mp/message/index.vue
index e094b3771..bf84f14f2 100644
--- a/apps/web-antd/src/views/mp/message/index.vue
+++ b/apps/web-antd/src/views/mp/message/index.vue
@@ -30,6 +30,7 @@ const loading = ref(false);
 const total = ref(0); // 数据的总页数
 const list = ref<any[]>([]); // 当前页的列表数据
 
+// TODO @dylan：是不是参考别的模块简化哈。尽量使用 Grid
 const queryParams = reactive<{
   accountId: number;
   createTime: [Dayjs, Dayjs] | undefined;
@@ -166,6 +167,7 @@ function showTotal(total: number) {
 
     <!-- 列表 -->
     <div class="flex-1 rounded-lg bg-white p-4">
+      <!-- TODO @dylan：走 Grid -->
       <MessageTable :list="list" :loading="loading" @send="handleSend" />
       <div v-show="total > 0" class="mt-4 flex justify-end">
         <a-pagination
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 579a819c1..92b0c4bc0 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
@@ -163,8 +163,10 @@ function selectMaterial(item: any) {
           <!-- 选择素材 -->
           <Col :span="12">
             <Button type="primary" @click="showDialog = true">
+              <!-- TODO @dylan：IconifyIcon 里的 icon 尽量用中立的，例如说，lucide 开头的，这样 el 项目继续复用； -->
               素材库选择 <IconifyIcon icon="ep:circle-check" />
             </Button>
+            <!-- TODO @dylan：貌似 modal 打开后，列表长度无限延伸； -->
             <Modal
               title="选择视频"
               v-model:open="showDialog"