feat：【antd】【mp】mp 的代码评审（draft）

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

@@ -187,8 +187,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
+      <!-- TODO @hw：按照微信群沟通的，换下卡片的样式。 -->
       <template #content="{ row }">
         <DraftTableCell :row="row" />
+        <!-- TODO @hw：增加一列，更新时间。 -->
       </template>
       <template #actions="{ row }">
         <TableAction

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

@@ -133,6 +133,7 @@ function onUploadError(err: Error) {
           支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
         </div>
       </div>
+      <!-- TODO @hw：这个貌似不行；ele 我试了下，可以的 -->
       <Modal
         v-model:open="dialogVisible"
         title="图片选择"

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

@@ -3,6 +3,7 @@ import type { MpDraftApi } from '#/api/mp/draft';
 
 import { WxNews } from '#/views/mp/components';
 
+// TODO @hw：按照微信里说的，感觉这个可以干掉。少点组件哈。= = mp 模块，小组件可太多了。。。
 defineOptions({ name: 'DraftTableCell' });
 
 const props = defineProps<{

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

@@ -127,6 +127,7 @@ function plusNews() {
               </Button>
             </div>
           </div>
+          <!-- TODO @hw：1）每个文章的选中框太粗了；2）没完全覆盖住文章；；；最好首个文章，和第个文章的情况，都看看 -->
           <div
             class="group relative mx-auto w-full cursor-pointer border-t border-[#eaeaea] bg-white py-[5px]"
             v-if="index > 0"
@@ -141,6 +142,8 @@ function plusNews() {
                 <img class="h-full w-full" :src="news.thumbUrl" />
               </div>
             </div>
+            <!-- TODO @hw：这里的按钮，交互不太对。应该在每个卡片的里面；或者类似公众号现在的交互，放到右侧；。。。复现本周：如果有 2 个文章的时候 -->
+            <!-- TODO @hw：当有 2 个文章的时候，挪到第二个文章的时候，卡片会变大。期望：不变大 -->
             <div
               class="relative -bottom-[25px] hidden text-center group-hover:block"
             >

apps/web-ele/src/api/mp/draft/index.ts

@@ -24,6 +24,49 @@ export namespace MpDraftApi {
     articles: Article[];
     createTime?: Date;
   }
+
+  /** 图文项（包含预览字段） */
+  export interface NewsItem {
+    title: string;
+    thumbMediaId: string;
+    author: string;
+    digest: string;
+    showCoverPic: number;
+    content: string;
+    contentSourceUrl: string;
+    needOpenComment: number;
+    onlyFansCanComment: number;
+    thumbUrl: string;
+    picUrl?: string; // 用于预览封面
+  }
+
+  /** 图文列表 */
+  export interface NewsItemList {
+    newsItem: NewsItem[];
+  }
+
+  /** 草稿文章（用于展示） */
+  export interface DraftArticle {
+    mediaId: string;
+    content: NewsItemList;
+    updateTime: number;
+  }
+}
+
+/** 创建空的图文项 */
+export function createEmptyNewsItem(): MpDraftApi.NewsItem {
+  return {
+    title: '',
+    thumbMediaId: '',
+    author: '',
+    digest: '',
+    showCoverPic: 0,
+    content: '',
+    contentSourceUrl: '',
+    needOpenComment: 0,
+    onlyFansCanComment: 0,
+    thumbUrl: '',
+  };
 }
 
 /** 查询草稿列表 */

apps/web-ele/src/api/mp/user/index.ts

@@ -21,13 +21,6 @@ export namespace MpUserApi {
     tagIds?: number[];
     createTime?: Date;
   }
-
-  /** 用户分页查询参数 */
-  export interface UserPageQuery extends PageParam {
-    accountId?: number;
-    nickname?: string;
-    tagId?: number;
-  }
 }
 
 /** 更新公众号粉丝 */
@@ -43,7 +36,7 @@ export function getUser(id: number) {
 }
 
 /** 获取公众号粉丝分页 */
-export function getUserPage(params: MpUserApi.UserPageQuery) {
+export function getUserPage(params: PageParam) {
   return requestClient.get<PageResult<MpUserApi.User>>('/mp/user/page', {
     params,
   });

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

@@ -1,5 +1,6 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
 /** 获取表格列配置 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [

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

@@ -35,6 +35,8 @@ function handleAccountChange(accountId: number) {
   gridApi.formApi.submitForm();
 }
 
+// TODO @hw：代码风格，要和对应的 antd index.vue 一致，类似方法的顺序，注释等。原因是，这样后续两端迭代，会方便很多。
+
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
     schema: useGridFormSchema(),
@@ -189,7 +191,7 @@ async function handleDelete(row: Article) {
         <TableAction
           :actions="[
             {
-              label: '新增',
+              label: $t('ui.actionTitle.create', ['图文草稿']),
               type: 'primary',
               icon: ACTION_ICON.ADD,
               auth: ['mp:draft:create'],

apps/web-ele/src/views/mp/draft/mock.js

@@ -1,3 +1,4 @@
+// TODO @hw：要不要删除
 export default {
   list: [
     {

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

@@ -13,7 +13,7 @@ import { ElButton, ElDialog, ElImage, ElMessage, ElUpload } from 'element-plus';
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
 import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
 
-// 设置上传的请求头部
+// TODO @hw：代码风格，要和对应的 antd index.vue 一致，类似方法的顺序，注释等。原因是，这样后续两端迭代，会方便很多。
 
 const props = defineProps<{
   isFirst: boolean;

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

@@ -3,6 +3,7 @@ import type { Article } from './types';
 
 import News from '#/views/mp/components/wx-news/wx-news.vue';
 
+// TODO @hw：按照微信里说的，感觉这个可以干掉。少点组件哈。= = mp 模块，小组件可太多了。。。
 defineOptions({ name: 'DraftTableCell' });
 
 const props = defineProps<{

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

@@ -13,6 +13,8 @@ import NewsForm from './news-form.vue';
 
 const emit = defineEmits(['success']);
 
+// TODO @hw：代码风格，要和对应的 antd index.vue 一致，类似方法的顺序，注释等。原因是，这样后续两端迭代，会方便很多。
+
 const formData = ref<{
   accountId: number;
   isCreating: boolean;

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

@@ -3,6 +3,7 @@ import type { NewsItem } from './types';
 
 import { computed, ref } from 'vue';
 
+import { confirm } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
 import {
@@ -12,7 +13,6 @@ import {
   ElContainer,
   ElInput,
   ElMain,
-  ElMessageBox,
   ElRow,
 } from 'element-plus';
 
@@ -28,7 +28,6 @@ const props = defineProps<{
   modelValue: NewsItem[] | null;
 }>();
 
-// v-model=newsList
 const emit = defineEmits<{
   (e: 'update:modelValue', v: NewsItem[]): void;
 }>();
@@ -53,7 +52,7 @@ const activeNewsItem = computed(() => {
   return item;
 });
 
-// 将图文向下移动
+/** 将图文向下移动 */
 function moveDownNews(index: number) {
   const current = newsList.value[index];
   const next = newsList.value[index + 1];
@@ -64,7 +63,7 @@ function moveDownNews(index: number) {
   }
 }
 
-// 将图文向上移动
+/** 将图文向上移动 */
 function moveUpNews(index: number) {
   const current = newsList.value[index];
   const prev = newsList.value[index - 1];
@@ -75,20 +74,16 @@ function moveUpNews(index: number) {
   }
 }
 
-// 删除指定 index 的图文
+/** 删除指定 index 的图文 */
 async function removeNews(index: number) {
-  try {
+  await confirm('确定删除该图文吗?');
-    await ElMessageBox.confirm('确定删除该图文吗?');
+  newsList.value.splice(index, 1);
-    newsList.value.splice(index, 1);
+  if (activeNewsIndex.value === index) {
-    if (activeNewsIndex.value === index) {
+    activeNewsIndex.value = 0;
-      activeNewsIndex.value = 0;
-    }
-  } catch {
-    // empty
   }
 }
 
-// 添加一个图文
+/** 添加一个图文 */
 function plusNews() {
   newsList.value.push(createEmptyNewsItem());
   activeNewsIndex.value = newsList.value.length - 1;
@@ -139,6 +134,7 @@ function plusNews() {
               </ElButton>
             </div>
           </div>
+          <!-- TODO @hw：1）每个文章的选中框太粗了；2）没完全覆盖住文章；；；最好首个文章，和第个文章的情况，都看看 -->
           <div
             class="group mx-auto w-full cursor-pointer border-t border-gray-200 bg-white py-1.5"
             v-if="index > 0"
@@ -153,6 +149,8 @@ function plusNews() {
                 <img class="h-full w-full" :src="news.thumbUrl" width="100%" />
               </div>
             </div>
+            <!-- TODO @hw：这里的按钮，交互不太对。应该在每个卡片的里面；或者类似公众号现在的交互，放到右侧；。。。复现本周：如果有 2 个文章的时候 -->
+            <!-- TODO @hw：当有 2 个文章的时候，挪到第二个文章的时候，卡片会变大。期望：不变大 -->
             <div
               class="relative -bottom-6 hidden text-center group-hover:block"
             >

apps/web-ele/src/views/mp/user/modules/form.vue

@@ -39,11 +39,11 @@ const [Modal, modalApi] = useVbenModal({
       return;
     }
     modalApi.lock();
-    /** 提交表单 */
+    // 提交表单
     const values = (await formApi.getValues()) as MpUserApi.User;
     try {
       await updateUser({ ...formData.value, ...values });
-      /** 关闭并提示 */
+      // 关闭并提示
       await modalApi.close();
       emit('success');
       ElMessage.success($t('ui.actionMessage.operationSuccess'));
@@ -56,7 +56,7 @@ const [Modal, modalApi] = useVbenModal({
       formData.value = undefined;
       return;
     }
-    /** 加载数据 */
+    // 加载数据
     const data = modalApi.getData<{ id: number }>();
     if (!data || !data.id) {
       return;
@@ -64,7 +64,7 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.lock();
     try {
       formData.value = await getUser(data.id);
-      /** 设置到 values */
+      // 设置到 values
       await formApi.setValues(formData.value);
     } finally {
       modalApi.unlock();