review：【antd】【mp】代码评审

apps/web-antd/src/views/mp/draft/data.ts

@@ -27,7 +27,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
 }
 
 /** 列表的搜索表单 */
-//  DONE @hw：这里的公众号选择，要改参考 /apps/web-antd/src/views/mp/tag/data.ts；相关联的代码还简单点~
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {

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

@@ -10,7 +10,6 @@ import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteDraft, getDraftPage } from '#/api/mp/draft';
-// DONE @hw：MpFreePublishApi 去掉，直接 import；参考别的模块哈；
 import { submitFreePublish } from '#/api/mp/freePublish';
 import { createEmptyNewsItem } from '#/views/mp/draft/modules/types';
 
@@ -18,8 +17,6 @@ import { useGridColumns, useGridFormSchema } from './data';
 import DraftTableCell from './modules/draft-table.vue';
 import Form from './modules/form.vue';
 
-// DONE @hw：参考 tag/index.vue 放到 formValues.accountId;
-// DONE @hw：看看这个 watch、provide 能不能简化掉；
 defineOptions({ name: 'MpDraft' });
 
 /** 刷新表格 */
@@ -27,12 +24,7 @@ function handleRefresh() {
   gridApi.query();
 }
 
-const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: Form,
-  destroyOnClose: true,
-});
-
-/** 新增按钮操作 */
+/** 新增草稿 */
 async function handleCreate() {
   const formValues = await gridApi.formApi.getValues();
   const accountId = formValues.accountId;
@@ -49,7 +41,7 @@ async function handleCreate() {
     .open();
 }
 
-/** 修改按钮操作 */
+/** 修改草稿 */
 async function handleEdit(row: Article) {
   const formValues = await gridApi.formApi.getValues();
   const accountId = formValues.accountId;
@@ -67,11 +59,32 @@ async function handleEdit(row: Article) {
     .open();
 }
 
-/** 发布按钮操作 */
+/** 删除草稿 */
+async function handleDelete(row: Article) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId) {
+    message.warning('请先选择公众号');
+    return;
+  }
+  await confirm('此操作将永久删除该草稿, 是否继续?');
+  const hideLoading = message.loading({
+    content: '删除中...',
+    duration: 0,
+  });
+  try {
+    await deleteDraft(accountId, row.mediaId);
+    message.success('删除成功');
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+/** 发布草稿 */
 async function handlePublish(row: Article) {
   const formValues = await gridApi.formApi.getValues();
   const accountId = formValues.accountId;
-  // DONE @hw：看看能不能去掉 -1 的判断哈？
   if (!accountId) {
     message.warning('请先选择公众号');
     return;
@@ -94,27 +107,10 @@ async function handlePublish(row: Article) {
   }
 }
 
-/** 删除按钮操作 */
-async function handleDelete(row: Article) {
-  const formValues = await gridApi.formApi.getValues();
-  const accountId = formValues.accountId;
-  if (!accountId) {
-    message.warning('请先选择公众号');
-    return;
-  }
-  await confirm('此操作将永久删除该草稿, 是否继续?');
-  const hideLoading = message.loading({
-    content: '删除中...',
-    duration: 0,
-  });
-  try {
-    await deleteDraft(accountId, row.mediaId);
-    message.success('删除成功');
-    handleRefresh();
-  } finally {
-    hideLoading();
-  }
-}
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
 
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
@@ -157,10 +153,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
+    // TODO @hw：这里有点纠结，一般是 MpDraftApi.Article，但是一改貌似就 linter 告警了。
   } as VxeTableGridOptions<Article>,
 });
-
-// DONE @hw：看看能不能参考 tag/index.vue 简化下
 </script>
 
 <template>

apps/web-antd/src/views/mp/draft/modules/cover-select.vue

@@ -56,12 +56,11 @@ function onMaterialSelected(item: any) {
   newsItem.value.thumbMediaId = item.mediaId;
   newsItem.value.thumbUrl = item.url;
 }
-// DONE @hw：注释都补充下哈；
+
 /** 上传前校验 */
 const onBeforeUpload = (file: UploadFile) =>
   useBeforeUpload(UploadType.Image, 2)(file as any);
 
-// DONE @hw：注释都补充下哈；
 /** 上传错误处理 */
 function onUploadChange(info: any) {
   if (info.file.status === 'error') {
@@ -69,7 +68,6 @@ function onUploadChange(info: any) {
   }
 }
 
-// DONE @hw：注释都补充下哈；
 /** 上传成功处理 */
 function onUploadSuccess(res: any) {
   if (res.code !== 0) {
@@ -84,7 +82,6 @@ function onUploadSuccess(res: any) {
   newsItem.value.thumbUrl = res.data.url;
 }
 
-// DONE @hw：注释都补充下哈；
 /** 上传失败处理 */
 function onUploadError(err: Error) {
   message.error(`上传失败: ${err.message}`);
@@ -94,8 +91,6 @@ function onUploadError(err: Error) {
 <template>
   <div>
     <p>封面:</p>
-    <!-- DONE @hw：我貌似上传不成功。不确定是不是我这边的问题；；；可以微信沟通下哈。 -->
-    <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
     <div class="flex w-full flex-col items-center justify-center text-center">
       <Image
         v-if="newsItem.thumbUrl"
@@ -138,7 +133,6 @@ function onUploadError(err: Error) {
           支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
         </div>
       </div>
-      <!-- DONE @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢 -->
       <Modal
         v-model:open="dialogVisible"
         title="图片选择"

apps/web-antd/src/views/mp/draft/modules/form.vue

@@ -13,25 +13,22 @@ import NewsForm from './news-form.vue';
 
 const emit = defineEmits(['success']);
 
-// DONE @hw：是不是通过 id 字段判断是否为新增？类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/modules/form.vue
 const formData = ref<{
   accountId: number;
   mediaId?: string;
   newsList?: NewsItem[];
 }>();
 const newsList = ref<NewsItem[]>([]);
-// DONE @hw：不需要 isSave，通过 modal 去 lock 就好啦。
 const isSubmitting = ref(false);
 
 const getTitle = computed(() => {
   return formData.value?.mediaId ? '修改图文' : '新建图文';
 });
 
-// 提供 accountId 给子组件
 provide(
   'accountId',
   computed(() => formData.value?.accountId),
-);
+); // 提供 accountId 给子组件
 
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
@@ -39,6 +36,7 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
 
+    // TODO @hw：是不是 isSubmitting 非必须哈？因为 modal 已经去 lock 啦。
     isSubmitting.value = true;
     modalApi.lock();
     try {

apps/web-antd/src/views/mp/draft/modules/news-form.vue

@@ -44,7 +44,6 @@ const activeNewsItem = computed(() => {
   return item;
 });
 
-// DONE @hw：注释使用 /** */
 /** 将图文向下移动 */
 function moveDownNews(index: number) {
   const current = newsList.value[index];
@@ -86,7 +85,6 @@ function plusNews() {
 <template>
   <Layout>
     <Layout.Sider width="40%" theme="light">
-      <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
       <div class="mx-auto mb-[10px] w-[60%] border border-[#eaeaea] p-[10px]">
         <div v-for="(news, index) in newsList" :key="index">
           <div

apps/web-antd/src/views/mp/draft/modules/types.ts

@@ -1,4 +1,4 @@
-// DONE @hw：要不把 components 里的部分，拿到 modules 里。
+// TODO @hw：这个要融合到 draftApi 里么？类似其他模块的。
 interface NewsItem {
   title: string;
   thumbMediaId: string;