review：【antd/ele】【mp】代码迁移的 review

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

@@ -10,6 +10,7 @@ import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { WxVideoPlayer } from '#/views/mp/components';
 
 import { useVideoGridColumns } from './data';
+import {$t} from '@vben/locales';
 
 const props = defineProps<{
   list: MpMaterialApi.Material[];
@@ -81,7 +82,7 @@ watch(
             onClick: () => openWindow(row.url),
           },
           {
-            label: '删除',
+            label: $t('common.delete'),
             type: 'link',
             danger: true,
             icon: ACTION_ICON.DELETE,

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

@@ -4,6 +4,7 @@ import type { MpMaterialApi } from '#/api/mp/material';
 
 import { watch } from 'vue';
 
+import { $t } from '@vben/locales';
 import { openWindow } from '@vben/utils';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
@@ -81,7 +82,7 @@ watch(
             onClick: () => openWindow(row.url),
           },
           {
-            label: '删除',
+            label: $t('common.delete'),
             type: 'link',
             danger: true,
             icon: ACTION_ICON.DELETE,

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

@@ -102,6 +102,7 @@ function handlePageChange(page: number, pageSize: number) {
 function showTotal(total: number) {
   return `共 ${total} 条`;
 }
+// TODO @dylan：是不是应该都用 Grid 哈：1）message-table 大部分合并到 index.vue；2）message-table 的 schema 放到 data.ts 里；
 </script>
 
 <template>

apps/web-ele/src/views/mp/hooks/useUpload.ts

@@ -74,4 +74,3 @@ export const useBeforeUpload = (type: UploadType, maxSizeMB?: number) => {
 
   return fn;
 };
-

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

@@ -39,6 +39,7 @@ const total = ref(0); // 总条数
 const accountId = ref(-1);
 provide('accountId', accountId);
 
+// TODO @AI：这里是不是应该都用 grid；类似 yudao-ui-admin-vben-v5/apps/web-ele/src/views/mp/autoReply/index.vue
 const queryParams = reactive({
   accountId,
   pageNo: 1,

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { UploadProps, UploadRawFile } from 'element-plus';
+import type { UploadProps } from 'element-plus';
 
 import type { UploadData } from './upload';
 
@@ -19,6 +19,7 @@ import {
 
 const props = defineProps<{ type: UploadType }>();
 
+// TODO @dylan：是不是要和 antd 的 props 定义相同哈？这样后续两侧维护方便点
 const emit = defineEmits<{
   uploaded: [v: void];
 }>();
@@ -59,6 +60,7 @@ const customRequest: UploadProps['httpRequest'] = async function (options) {
 
     if (res.code !== 0) {
       ElMessage.error(`上传出错：${res.msg}`);
+      // TODO @dylan：这里有个 linter 错误。
       onError?.(new Error(res.msg));
       return;
     }
@@ -104,4 +106,3 @@ const customRequest: UploadProps['httpRequest'] = async function (options) {
     <slot></slot>
   </div>
 </template>
-

apps/web-ele/src/views/mp/material/modules/UploadVideo.vue

@@ -20,6 +20,7 @@ import {
 
 import { beforeVideoUpload, HEADERS, UPLOAD_URL, UploadType } from './upload';
 
+// TODO @dylan：是不是要和 antd 的 props 定义相同哈？这样后续两侧维护方便点
 withDefaults(
   defineProps<{
     modelValue?: boolean;
@@ -163,4 +164,3 @@ const customRequest: UploadProps['httpRequest'] = async function (options) {
     </ElForm>
   </ElDialog>
 </template>
-

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

@@ -3,6 +3,8 @@ import type { MpMaterialApi } from '#/api/mp/material';
 
 import { nextTick, onMounted, watch } from 'vue';
 
+import { $t } from '@vben/locales';
+
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 
 import { useImageGridColumns } from './data';
@@ -74,7 +76,7 @@ onMounted(async () => {
 <template>
   <Grid class="image-table-grid mt-4 pb-0">
     <template #toolbar-tools>
-      <slot name="toolbar-tools" />
+      <slot name="toolbar-tools"></slot>
     </template>
     <template #image="{ row }">
       <div class="flex items-center justify-center" style="height: 192px">
@@ -89,9 +91,9 @@ onMounted(async () => {
       <TableAction
         :actions="[
           {
-            label: '删除',
+            label: $t('common.delete'),
-            type: 'link',
+            type: 'primary',
-            danger: true,
+            link: true,
             icon: ACTION_ICON.DELETE,
             auth: ['mp:material:delete'],
             popConfirm: {
@@ -104,4 +106,3 @@ onMounted(async () => {
     </template>
   </Grid>
 </template>
-

apps/web-ele/src/views/mp/material/modules/upload.ts

@@ -44,4 +44,3 @@ export {
   type UploadData,
   UploadType,
 };
-

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

@@ -66,7 +66,7 @@ watch(
 <template>
   <Grid class="mt-4">
     <template #toolbar-tools>
-      <slot name="toolbar-tools" />
+      <slot name="toolbar-tools"></slot>
     </template>
     <template #video="{ row }">
       <WxVideoPlayer v-if="row.url" :url="row.url" />
@@ -76,14 +76,15 @@ watch(
         :actions="[
           {
             label: '下载',
-            type: 'link',
+            type: 'primary',
+            link: true,
             icon: ACTION_ICON.DOWNLOAD,
             onClick: () => openWindow(row.url),
           },
           {
-            label: '删除',
+            label: $t('common.delete'),
-            type: 'link',
+            type: 'danger',
-            danger: true,
+            link: true,
             icon: ACTION_ICON.DELETE,
             auth: ['mp:material:delete'],
             popConfirm: {
@@ -96,4 +97,3 @@ watch(
     </template>
   </Grid>
 </template>
-

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

@@ -4,6 +4,7 @@ import type { MpMaterialApi } from '#/api/mp/material';
 
 import { watch } from 'vue';
 
+import { $t } from '@vben/locales';
 import { openWindow } from '@vben/utils';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
@@ -76,14 +77,15 @@ watch(
         :actions="[
           {
             label: '下载',
-            type: 'link',
+            type: 'primary',
+            link: true,
             icon: ACTION_ICON.DOWNLOAD,
             onClick: () => openWindow(row.url),
           },
           {
-            label: '删除',
+            label: $t('common.delete'),
-            type: 'link',
+            type: 'danger',
-            danger: true,
+            link: true,
             icon: ACTION_ICON.DELETE,
             auth: ['mp:material:delete'],
             popConfirm: {
@@ -96,4 +98,3 @@ watch(
     </template>
   </Grid>
 </template>
-

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

@@ -109,12 +109,13 @@ function handleSizeChange(pageSize: number) {
 function showTotal(total: number) {
   return `共 ${total} 条`;
 }
+// TODO @dylan：是不是应该都用 Grid 哈？
 </script>
 
 <template>
   <Page auto-content-height class="flex flex-col">
     <!-- 搜索工作栏 -->
-    <div class="bg-background mb-4 rounded-lg p-4">
+    <div class="mb-4 rounded-lg bg-background p-4">
       <ElForm
         ref="queryFormRef"
         :model="queryParams"
@@ -174,7 +175,7 @@ function showTotal(total: number) {
     </div>
 
     <!-- 列表 -->
-    <div class="bg-background flex-1 rounded-lg p-4">
+    <div class="flex-1 rounded-lg bg-background p-4">
       <MessageTable :list="list" :loading="loading" @send="handleSend" />
       <div v-show="total > 0" class="mt-4 flex justify-end">
         <ElPagination
@@ -208,4 +209,3 @@ function showTotal(total: number) {
   margin-bottom: 16px;
 }
 </style>
-