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

2025-12-30 10:32:25 +00:00 · 2025-11-20 18:40:35 +08:00
parent 5b4d3c9820
commit c39a445d77
14 changed files with 76 additions and 28 deletions
--- a/apps/web-antd/src/views/mp/draft/index.vue
+++ b/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
--- a/apps/web-antd/src/views/mp/draft/modules/cover-select.vue
+++ b/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="图片选择"
--- a/apps/web-antd/src/views/mp/draft/modules/draft-table.vue
+++ b/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<{
--- a/apps/web-antd/src/views/mp/draft/modules/news-form.vue
+++ b/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"
            >
--- a/apps/web-ele/src/api/mp/draft/index.ts
+++ b/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: '',
+  };
 }

 /** 查询草稿列表 */
--- a/apps/web-ele/src/api/mp/user/index.ts
+++ b/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,
  });
--- a/apps/web-ele/src/views/mp/draft/data.ts
+++ b/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 [
--- a/apps/web-ele/src/views/mp/draft/index.vue
+++ b/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'],
--- a/apps/web-ele/src/views/mp/draft/mock.js
+++ b/apps/web-ele/src/views/mp/draft/mock.js
@@ -1,3 +1,4 @@
+// TODO @hw：要不要删除
 export default {
  list: [
    {
--- a/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
+++ b/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;
--- a/apps/web-ele/src/views/mp/draft/modules/draft-table.vue
+++ b/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<{
--- a/apps/web-ele/src/views/mp/draft/modules/form.vue
+++ b/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;
--- a/apps/web-ele/src/views/mp/draft/modules/news-form.vue
+++ b/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 ElMessageBox.confirm('确定删除该图文吗?');
-    newsList.value.splice(index, 1);
-    if (activeNewsIndex.value === index) {
-      activeNewsIndex.value = 0;
-    }
-  } catch {
-    // empty
+  await confirm('确定删除该图文吗?');
+  newsList.value.splice(index, 1);
+  if (activeNewsIndex.value === index) {
+    activeNewsIndex.value = 0;
  }
 }

-// 添加一个图文
+/** 添加一个图文 */
 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"
            >
--- a/apps/web-ele/src/views/mp/user/modules/form.vue
+++ b/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();