From c39a445d771fe60964023ad65dc121f74e064816 Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Thu, 20 Nov 2025 18:40:35 +0800
Subject: [PATCH] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd=E3=80=91=E3=80=90mp?=
 =?UTF-8?q?=E3=80=91mp=20=E7=9A=84=E4=BB=A3=E7=A0=81=E8=AF=84=E5=AE=A1?=
 =?UTF-8?q?=EF=BC=88draft=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/mp/draft/index.vue    |  2 +
 .../views/mp/draft/modules/cover-select.vue   |  1 +
 .../views/mp/draft/modules/draft-table.vue    |  1 +
 .../src/views/mp/draft/modules/news-form.vue  |  3 ++
 apps/web-ele/src/api/mp/draft/index.ts        | 43 +++++++++++++++++++
 apps/web-ele/src/api/mp/user/index.ts         |  9 +---
 apps/web-ele/src/views/mp/draft/data.ts       |  1 +
 apps/web-ele/src/views/mp/draft/index.vue     |  4 +-
 apps/web-ele/src/views/mp/draft/mock.js       |  1 +
 .../views/mp/draft/modules/cover-select.vue   |  2 +-
 .../views/mp/draft/modules/draft-table.vue    |  1 +
 .../src/views/mp/draft/modules/form.vue       |  2 +
 .../src/views/mp/draft/modules/news-form.vue  | 26 ++++++-----
 .../src/views/mp/user/modules/form.vue        |  8 ++--
 14 files changed, 76 insertions(+), 28 deletions(-)

diff --git a/apps/web-antd/src/views/mp/draft/index.vue b/apps/web-antd/src/views/mp/draft/index.vue
index 8b0516235..d15ffc439 100644
--- 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
diff --git a/apps/web-antd/src/views/mp/draft/modules/cover-select.vue b/apps/web-antd/src/views/mp/draft/modules/cover-select.vue
index 1e05250d1..3a758e437 100644
--- 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="图片选择"
diff --git a/apps/web-antd/src/views/mp/draft/modules/draft-table.vue b/apps/web-antd/src/views/mp/draft/modules/draft-table.vue
index c0c8c5c41..ae9efcc7e 100644
--- 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<{
diff --git a/apps/web-antd/src/views/mp/draft/modules/news-form.vue b/apps/web-antd/src/views/mp/draft/modules/news-form.vue
index f399b383f..2a67c2305 100644
--- 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"
             >
diff --git a/apps/web-ele/src/api/mp/draft/index.ts b/apps/web-ele/src/api/mp/draft/index.ts
index 70b7c0e83..f05d0117a 100644
--- 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: '',
+  };
 }
 
 /** 查询草稿列表 */
diff --git a/apps/web-ele/src/api/mp/user/index.ts b/apps/web-ele/src/api/mp/user/index.ts
index e34573a1a..d79e6c6f4 100644
--- 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,
   });
diff --git a/apps/web-ele/src/views/mp/draft/data.ts b/apps/web-ele/src/views/mp/draft/data.ts
index f1f3bc451..7f9344275 100644
--- 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 [
diff --git a/apps/web-ele/src/views/mp/draft/index.vue b/apps/web-ele/src/views/mp/draft/index.vue
index 47eaea2a0..f27e2771f 100644
--- 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'],
diff --git a/apps/web-ele/src/views/mp/draft/mock.js b/apps/web-ele/src/views/mp/draft/mock.js
index 04b12c873..256c294d1 100644
--- 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: [
     {
diff --git a/apps/web-ele/src/views/mp/draft/modules/cover-select.vue b/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
index 0b34c66c8..227823126 100644
--- 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;
diff --git a/apps/web-ele/src/views/mp/draft/modules/draft-table.vue b/apps/web-ele/src/views/mp/draft/modules/draft-table.vue
index f3f185b95..872babedd 100644
--- 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<{
diff --git a/apps/web-ele/src/views/mp/draft/modules/form.vue b/apps/web-ele/src/views/mp/draft/modules/form.vue
index 2e79cf2d8..229698649 100644
--- 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;
diff --git a/apps/web-ele/src/views/mp/draft/modules/news-form.vue b/apps/web-ele/src/views/mp/draft/modules/news-form.vue
index 979a92204..ba5f8864d 100644
--- 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"
             >
diff --git a/apps/web-ele/src/views/mp/user/modules/form.vue b/apps/web-ele/src/views/mp/user/modules/form.vue
index da5a96de6..dc1c6874c 100644
--- 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();