review：【antd】【mp】material、message 的迁移 v2

.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"],

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">

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"

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;

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>

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" />

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" />
         下载

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" />

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

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"