fix: resolve antd to do

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

@@ -43,7 +43,6 @@ const queryParams = reactive({
   pageSize: 10,
 }); // 查询参数
 
-// TODO @dylan：可以把【点击上传】3 个 tab 的按钮，放到右侧的 toolbar 一起，和刷新按钮放在一行；
 const voiceGridColumns: VxeTableGridOptions<MpMaterialApi.Material>['columns'] =
   [
     {

apps/web-antd/src/views/mp/material/index.vue

@@ -10,12 +10,12 @@ import { Button, Card, Form, message, Pagination, Tabs } from 'ant-design-vue';
 import { deletePermanentMaterial, getMaterialPage } from '#/api/mp/material';
 import { WxAccountSelect } from '#/views/mp/components';
 
-import ImageTable from './components/image-table.vue';
+import ImageTable from './modules/image-table.vue';
-import { UploadType } from './components/upload';
+import { UploadType } from './modules/upload';
-import UploadFile from './components/UploadFile.vue';
+import UploadFile from './modules/UploadFile.vue';
-import UploadVideo from './components/UploadVideo.vue';
+import UploadVideo from './modules/UploadVideo.vue';
-import VideoTable from './components/video-table.vue';
+import VideoTable from './modules/video-table.vue';
-import VoiceTable from './components/voice-table.vue';
+import VoiceTable from './modules/voice-table.vue';
 
 defineOptions({ name: 'MpMaterial' });
 
@@ -117,19 +117,16 @@ async function handleDelete(id: number) {
                 图片
               </span>
             </template>
-            <UploadFile
-              v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
-              :type="UploadType.Image"
-              @uploaded="getList"
-            >
-              支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
-            </UploadFile>
             <!-- 列表 -->
-            <ImageTable
+            <ImageTable :list="list" :loading="loading" @delete="handleDelete">
-              :list="list"
+              <template #toolbar-tools>
-              :loading="loading"
+                <UploadFile
-              @delete="handleDelete"
+                  v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
-            />
+                  :type="UploadType.Image"
+                  @uploaded="getList"
+                />
+              </template>
+            </ImageTable>
             <!-- 分页组件 -->
             <div class="mt-4 flex justify-end">
               <Pagination
@@ -151,19 +148,16 @@ async function handleDelete(id: number) {
                 语音
               </span>
             </template>
-            <UploadFile
-              v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
-              :type="UploadType.Voice"
-              @uploaded="getList"
-            >
-              格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
-            </UploadFile>
             <!-- 列表 -->
-            <VoiceTable
+            <VoiceTable :list="list" :loading="loading" @delete="handleDelete">
-              :list="list"
+              <template #toolbar-tools>
-              :loading="loading"
+                <UploadFile
-              @delete="handleDelete"
+                  v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
-            />
+                  :type="UploadType.Voice"
+                  @uploaded="getList"
+                />
+              </template>
+            </VoiceTable>
             <!-- 分页组件 -->
             <div class="mt-4 flex justify-end">
               <Pagination
@@ -185,21 +179,20 @@ async function handleDelete(id: number) {
                 视频
               </span>
             </template>
-            <Button
+            <!-- 列表 -->
-              v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
+            <VideoTable :list="list" :loading="loading" @delete="handleDelete">
-              type="primary"
+              <template #toolbar-tools>
-              @click="showCreateVideo = true"
+                <Button
-            >
+                  v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
-              新建视频
+                  type="primary"
-            </Button>
+                  @click="showCreateVideo = true"
+                >
+                  新建视频
+                </Button>
+              </template>
+            </VideoTable>
             <!-- 新建视频的弹窗 -->
             <UploadVideo v-model:open="showCreateVideo" @uploaded="getList" />
-            <!-- 列表 -->
-            <VideoTable
-              :list="list"
-              :loading="loading"
-              @delete="handleDelete"
-            />
             <!-- 分页组件 -->
             <div class="mt-4 flex justify-end">
               <Pagination

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

@@ -86,7 +86,6 @@ const customRequest: UploadProps['customRequest'] = async function (options) {
     :file-list="fileList"
     :headers="HEADERS"
     :multiple="true"
-    class="mb-4"
   >
     <Button type="primary">
       <IconifyIcon icon="lucide:upload" class="mr-1" />

apps/web-antd/src/views/mp/material/modules/data.ts

@@ -1,7 +1,6 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MpMaterialApi } from '#/api/mp/material';
 
-// TODO @dylan：看看 ele 要迁移一个么？
 /** 视频表格列配置 */
 export function useVideoGridColumns(): VxeTableGridOptions<MpMaterialApi.Material>['columns'] {
   return [

apps/web-antd/src/views/mp/material/modules/image-table.vue

@@ -31,6 +31,9 @@ const [Grid, gridApi] = useVbenVxeGrid<MpMaterialApi.Material>({
       isHover: true,
       height: 220,
     },
+    toolbarConfig: {
+      refresh: true,
+    },
     showOverflow: 'tooltip',
   },
 });
@@ -70,6 +73,9 @@ onMounted(async () => {
 
 <template>
   <Grid class="image-table-grid mt-4 pb-0">
+    <template #toolbar-tools>
+      <slot name="toolbar-tools" />
+    </template>
     <template #image="{ row }">
       <div class="flex items-center justify-center" style="height: 192px">
         <img

apps/web-antd/src/views/mp/material/modules/video-table.vue

@@ -34,6 +34,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
       isHover: true,
     },
+    toolbarConfig: {
+      refresh: true,
+    },
     showOverflow: 'tooltip',
   } as VxeTableGridOptions<MpMaterialApi.Material>,
 });
@@ -62,6 +65,9 @@ watch(
 
 <template>
   <Grid class="mt-4">
+    <template #toolbar-tools>
+      <slot name="toolbar-tools" />
+    </template>
     <template #video="{ row }">
       <WxVideoPlayer v-if="row.url" :url="row.url" />
     </template>

apps/web-antd/src/views/mp/material/modules/voice-table.vue

@@ -10,7 +10,6 @@ import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { WxVoicePlayer } from '#/views/mp/components';
 
 import { useVoiceGridColumns } from './data';
-// TODO @dylan：组件内，尽量用 modules 哈。只有对外共享，才用 components
 
 const props = defineProps<{
   list: MpMaterialApi.Material[];
@@ -35,6 +34,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
       keyField: 'id',
       isHover: true,
     },
+    toolbarConfig: {
+      refresh: true,
+    },
     showOverflow: 'tooltip',
   } as VxeTableGridOptions<MpMaterialApi.Material>,
 });
@@ -63,6 +65,9 @@ watch(
 
 <template>
   <Grid class="mt-4">
+    <template #toolbar-tools>
+      <slot name="toolbar-tools"></slot>
+    </template>
     <template #voice="{ row }">
       <WxVoicePlayer v-if="row.url" :url="row.url" />
     </template>

apps/web-antd/src/views/mp/message/index.vue

@@ -107,7 +107,7 @@ function showTotal(total: number) {
 <template>
   <Page auto-content-height class="flex flex-col">
     <!-- 搜索工作栏 -->
-    <div class="mb-4 rounded-lg bg-background p-4">
+    <div class="bg-background mb-4 rounded-lg p-4">
       <Form
         ref="queryFormRef"
         :model="queryParams"
@@ -165,7 +165,7 @@ function showTotal(total: number) {
     </div>
 
     <!-- 列表 -->
-    <div class="flex-1 rounded-lg bg-background p-4">
+    <div class="bg-background flex-1 rounded-lg p-4">
       <MessageTable :list="list" :loading="loading" @send="handleSend" />
       <div v-show="total > 0" class="mt-4 flex justify-end">
         <Pagination

apps/web-antd/src/views/mp/message/message-table.vue

@@ -9,7 +9,6 @@ import { formatDate2 } from '@vben/utils';
 
 import { Button, Image, Tag } from 'ant-design-vue';
 
-// TODO @dylan：看看 ele 要迁移一个么？
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
   WxLocation,