From 77596d716b3fb57f250989649d6b3636070767b6 Mon Sep 17 00:00:00 2001
From: jawe <532159638@qq.com>
Date: Mon, 24 Nov 2025 11:04:38 +0800
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20[mp]=20=E5=9B=BE=E6=96=87=E5=8F=91?=
 =?UTF-8?q?=E8=A1=A8=E8=AE=B0=E5=BD=95=E8=BF=81=E7=A7=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../web-antd/src/views/mp/freePublish/data.ts |  59 ++++++
 .../src/views/mp/freePublish/index.vue        | 183 +++++++++++++++---
 apps/web-ele/src/views/mp/freePublish/data.ts |  59 ++++++
 .../src/views/mp/freePublish/index.vue        | 170 ++++++++++++++++
 4 files changed, 449 insertions(+), 22 deletions(-)
 create mode 100644 apps/web-antd/src/views/mp/freePublish/data.ts
 create mode 100644 apps/web-ele/src/views/mp/freePublish/data.ts
 create mode 100644 apps/web-ele/src/views/mp/freePublish/index.vue

diff --git a/apps/web-antd/src/views/mp/freePublish/data.ts b/apps/web-antd/src/views/mp/freePublish/data.ts
new file mode 100644
index 000000000..cfcac30be
--- /dev/null
+++ b/apps/web-antd/src/views/mp/freePublish/data.ts
@@ -0,0 +1,59 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { MpAccountApi } from '#/api/mp/account';
+
+import { formatDateTime } from '@vben/utils';
+
+import { getSimpleAccountList } from '#/api/mp/account';
+
+let accountList: MpAccountApi.AccountSimple[] = [];
+getSimpleAccountList().then((data) => (accountList = data));
+
+/** 搜索表单配置 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'Select',
+      componentProps: {
+        options: accountList.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: '请选择公众号',
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeGridPropTypes.Columns {
+  return [
+    {
+      field: 'cover',
+      title: '图片',
+      width: 360,
+      slots: { default: 'cover' },
+    },
+    {
+      field: 'title',
+      title: '标题',
+      slots: { default: 'title' },
+    },
+    {
+      field: 'updateTime',
+      title: '修改时间',
+      formatter: ({ row }) => {
+        return formatDateTime(row.updateTime * 1000);
+      },
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mp/freePublish/index.vue b/apps/web-antd/src/views/mp/freePublish/index.vue
index 89f457302..d2d033d9b 100644
--- a/apps/web-antd/src/views/mp/freePublish/index.vue
+++ b/apps/web-antd/src/views/mp/freePublish/index.vue
@@ -1,29 +1,168 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { MpFreePublishApi } from '#/api/mp/freePublish';
 
-import { Button } from 'ant-design-vue';
+import { confirm, DocAlert, Page } from '@vben/common-ui';
+
+import { Image, message, Typography } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteFreePublish, getFreePublishPage } from '#/api/mp/freePublish';
+import { $t } from '#/locales';
+import { WxAccountSelect } from '#/views/mp/components';
+
+import { useGridColumns, useGridFormSchema } from './data';
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 公众号变化时查询数据 */
+function handleAccountChange(accountId: number) {
+  gridApi.formApi.setValues({ accountId });
+  gridApi.formApi.submitForm();
+}
+/** 删除文章 */
+async function handleDelete(row: MpFreePublishApi.FreePublish) {
+  // 二次确认提示
+  await confirm($t('ui.actionMessage.deleteConfirm', ['文章']));
+  const hideLoading = message.loading({
+    content: '删除中...',
+    duration: 0,
+  });
+  try {
+    const formValues = await gridApi.formApi.getValues();
+    const accountId = formValues.accountId;
+    await deleteFreePublish(accountId, row.articleId!);
+    message.success($t('ui.actionMessage.deleteSuccess', ['文章']));
+    // 刷新列表
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          if (!formValues.accountId) {
+            return {
+              list: [],
+              total: 0,
+            };
+          }
+          const res = await getFreePublishPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+          // 将 thumbUrl 转成 picUrl，保证 wx-news 组件可以预览封面
+          res.list.forEach((record: any) => {
+            const newsList = record.content?.newsItem;
+            if (newsList) {
+              newsList.forEach((item: any) => {
+                item.picUrl = item.thumbUrl || item.picUrl;
+              });
+            }
+          });
+          return {
+            list: res.list as unknown as Article[],
+            total: res.total,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'articleId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Article>,
+});
 </script>
 
 <template>
-  <Page>
-    <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/freePublish/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/freePublish/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
+    </template>
+    <Grid table-title="发表记录">
+      <template #form-accountId>
+        <WxAccountSelect @change="handleAccountChange" />
+      </template>
+      <template #cover="{ row }">
+        <div
+          v-if="row.content?.newsItem && row.content.newsItem.length > 0"
+          class="flex flex-col items-center justify-center gap-1"
+        >
+          <Image
+            v-for="(item, index) in row.content.newsItem"
+            :key="index"
+            :src="item.picUrl || item.thumbUrl"
+            class="h-36 !w-[300px] rounded object-cover"
+            :alt="`文章 ${index + 1} 封面图`"
+          />
+        </div>
+        <span v-else class="text-gray-400">-</span>
+      </template>
+      <template #title="{ row }">
+        <div
+          v-if="row.content?.newsItem && row.content.newsItem.length > 0"
+          class="space-y-1"
+        >
+          <div
+            v-for="(item, index) in row.content.newsItem"
+            :key="index"
+            class="flex h-36 items-center justify-center"
+          >
+            <Typography.Link :href="(item as any).url" target="_blank">
+              {{ item.title }}
+            </Typography.Link>
+          </div>
+        </div>
+        <span v-else class="text-gray-400">-</span>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:free-publish:delete'],
+              popConfirm: {
+                title: '是否确认删除此数据?',
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
+
+<style lang="scss" scoped>
+:deep(.vxe-table--body-wrapper) {
+  .vxe-table--body {
+    .vxe-body--column {
+      .vxe-cell {
+        height: auto !important;
+        padding: 0;
+      }
+    }
+  }
+}
+</style>
diff --git a/apps/web-ele/src/views/mp/freePublish/data.ts b/apps/web-ele/src/views/mp/freePublish/data.ts
new file mode 100644
index 000000000..cfcac30be
--- /dev/null
+++ b/apps/web-ele/src/views/mp/freePublish/data.ts
@@ -0,0 +1,59 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { MpAccountApi } from '#/api/mp/account';
+
+import { formatDateTime } from '@vben/utils';
+
+import { getSimpleAccountList } from '#/api/mp/account';
+
+let accountList: MpAccountApi.AccountSimple[] = [];
+getSimpleAccountList().then((data) => (accountList = data));
+
+/** 搜索表单配置 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'Select',
+      componentProps: {
+        options: accountList.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: '请选择公众号',
+        clearable: true,
+      },
+    },
+  ];
+}
+
+/** 表格列配置 */
+export function useGridColumns(): VxeGridPropTypes.Columns {
+  return [
+    {
+      field: 'cover',
+      title: '图片',
+      width: 360,
+      slots: { default: 'cover' },
+    },
+    {
+      field: 'title',
+      title: '标题',
+      slots: { default: 'title' },
+    },
+    {
+      field: 'updateTime',
+      title: '修改时间',
+      formatter: ({ row }) => {
+        return formatDateTime(row.updateTime * 1000);
+      },
+    },
+    {
+      title: '操作',
+      width: 120,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mp/freePublish/index.vue b/apps/web-ele/src/views/mp/freePublish/index.vue
new file mode 100644
index 000000000..7a8cdbfa1
--- /dev/null
+++ b/apps/web-ele/src/views/mp/freePublish/index.vue
@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+import type { MpFreePublishApi } from '#/api/mp/freePublish';
+
+import { confirm, DocAlert, Page } from '@vben/common-ui';
+
+import { ElImage, ElLink, ElLoading } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { deleteFreePublish, getFreePublishPage } from '#/api/mp/freePublish';
+import { $t } from '#/locales';
+import { WxAccountSelect } from '#/views/mp/components';
+
+import { useGridColumns, useGridFormSchema } from './data';
+
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 公众号变化时查询数据 */
+function handleAccountChange(accountId: number) {
+  gridApi.formApi.setValues({ accountId });
+  gridApi.formApi.submitForm();
+}
+
+/** 删除文章 */
+async function handleDelete(row: MpFreePublishApi.FreePublish) {
+  // 二次确认提示
+  await confirm($t('ui.actionMessage.deleteConfirm', ['文章']));
+  const hideLoading = ElLoading.service({
+    text: '删除中...',
+  });
+  try {
+    const formValues = await gridApi.formApi.getValues();
+    const accountId = formValues.accountId;
+    await deleteFreePublish(accountId, row.articleId!);
+    message.success($t('ui.actionMessage.deleteSuccess', ['文章']));
+    // 刷新列表
+    handleRefresh();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          if (!formValues.accountId) {
+            return {
+              list: [],
+              total: 0,
+            };
+          }
+          const res = await getFreePublishPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+          // 将 thumbUrl 转成 picUrl，保证 wx-news 组件可以预览封面
+          res.list.forEach((record: any) => {
+            const newsList = record.content?.newsItem;
+            if (newsList) {
+              newsList.forEach((item: any) => {
+                item.picUrl = item.thumbUrl || item.picUrl;
+              });
+            }
+          });
+          return {
+            list: res.list as unknown as Article[],
+            total: res.total,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'articleId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Article>,
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
+    </template>
+    <Grid table-title="发表记录">
+      <template #form-accountId>
+        <WxAccountSelect @change="handleAccountChange" />
+      </template>
+      <template #cover="{ row }">
+        <div
+          v-if="row.content?.newsItem && row.content.newsItem.length > 0"
+          class="flex flex-col items-center justify-center gap-1"
+        >
+          <ElImage
+            v-for="(item, index) in row.content.newsItem"
+            :key="index"
+            :src="item.picUrl || item.thumbUrl"
+            :preview-src-list="[item.picUrl || item.thumbUrl]"
+            class="h-36 !w-[300px] rounded object-cover"
+            :alt="`文章 ${index + 1} 封面图`"
+          />
+        </div>
+        <span v-else class="text-gray-400">-</span>
+      </template>
+      <template #title="{ row }">
+        <div
+          v-if="row.content?.newsItem && row.content.newsItem.length > 0"
+          class="space-y-1"
+        >
+          <div
+            v-for="(item, index) in row.content.newsItem"
+            :key="index"
+            class="flex h-36 items-center justify-center"
+          >
+            <ElLink :href="(item as any).url" target="_blank">
+              {{ item.title }}
+            </ElLink>
+          </div>
+        </div>
+        <span v-else class="text-gray-400">-</span>
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '删除',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:free-publish:delete'],
+              popConfirm: {
+                title: '是否确认删除此数据?',
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
+
+<style lang="scss" scoped>
+:deep(.vxe-table--body-wrapper) {
+  .vxe-table--body {
+    .vxe-body--column {
+      .vxe-cell {
+        height: auto !important;
+        padding: 0;
+      }
+    }
+  }
+}
+</style>

From 2926a8aa365b26097537465ce18f56867fd089fc Mon Sep 17 00:00:00 2001
From: YunaiV <zhijiantianya@gmail.com>
Date: Mon, 24 Nov 2025 11:47:47 +0800
Subject: [PATCH 2/2] =?UTF-8?q?feat=EF=BC=9A=E3=80=90antd/ele=E3=80=91?=
 =?UTF-8?q?=E3=80=90mp=E3=80=91freePublish=20review?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/mp/draft/index.vue    |  4 +--
 .../src/views/mp/freePublish/index.vue        | 21 ++++++++++------
 apps/web-ele/src/views/mp/draft/index.vue     |  4 +--
 .../src/views/mp/freePublish/index.vue        | 25 +++++++++++--------
 4 files changed, 31 insertions(+), 23 deletions(-)

diff --git a/apps/web-antd/src/views/mp/draft/index.vue b/apps/web-antd/src/views/mp/draft/index.vue
index cce7fdddc..ea3a87094 100644
--- a/apps/web-antd/src/views/mp/draft/index.vue
+++ b/apps/web-antd/src/views/mp/draft/index.vue
@@ -72,12 +72,12 @@ async function handleDelete(row: MpDraftApi.DraftArticle) {
     return;
   }
   const hideLoading = message.loading({
-    content: '删除中...',
+    content: $t('ui.actionMessage.deleting'),
     duration: 0,
   });
   try {
     await deleteDraft(accountId, row.mediaId);
-    message.success('删除成功');
+    message.success($t('ui.actionMessage.deleteSuccess'));
     handleRefresh();
   } finally {
     hideLoading();
diff --git a/apps/web-antd/src/views/mp/freePublish/index.vue b/apps/web-antd/src/views/mp/freePublish/index.vue
index d2d033d9b..77c46e070 100644
--- a/apps/web-antd/src/views/mp/freePublish/index.vue
+++ b/apps/web-antd/src/views/mp/freePublish/index.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MpFreePublishApi } from '#/api/mp/freePublish';
 
-import { confirm, DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, Page } from '@vben/common-ui';
 
 import { Image, message, Typography } from 'ant-design-vue';
 
@@ -11,6 +12,7 @@ import { $t } from '#/locales';
 import { WxAccountSelect } from '#/views/mp/components';
 
 import { useGridColumns, useGridFormSchema } from './data';
+
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
@@ -21,20 +23,22 @@ function handleAccountChange(accountId: number) {
   gridApi.formApi.setValues({ accountId });
   gridApi.formApi.submitForm();
 }
+
 /** 删除文章 */
 async function handleDelete(row: MpFreePublishApi.FreePublish) {
-  // 二次确认提示
-  await confirm($t('ui.actionMessage.deleteConfirm', ['文章']));
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId) {
+    message.warning('请先选择公众号');
+    return;
+  }
   const hideLoading = message.loading({
-    content: '删除中...',
+    content: $t('ui.actionMessage.deleting'),
     duration: 0,
   });
   try {
-    const formValues = await gridApi.formApi.getValues();
-    const accountId = formValues.accountId;
     await deleteFreePublish(accountId, row.articleId!);
-    message.success($t('ui.actionMessage.deleteSuccess', ['文章']));
-    // 刷新列表
+    message.success($t('ui.actionMessage.deleteSuccess'));
     handleRefresh();
   } finally {
     hideLoading();
@@ -73,6 +77,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               });
             }
           });
+          // TODO @jawe：Article 类型，报错；
           return {
             list: res.list as unknown as Article[],
             total: res.total,
diff --git a/apps/web-ele/src/views/mp/draft/index.vue b/apps/web-ele/src/views/mp/draft/index.vue
index 6449e7e05..e6bfa4fd8 100644
--- a/apps/web-ele/src/views/mp/draft/index.vue
+++ b/apps/web-ele/src/views/mp/draft/index.vue
@@ -72,11 +72,11 @@ async function handleDelete(row: MpDraftApi.DraftArticle) {
     return;
   }
   const hideLoading = ElLoading.service({
-    text: '删除中...',
+    text: $t('ui.actionMessage.deleting'),
   });
   try {
     await deleteDraft(accountId, row.mediaId);
-    ElMessage.success('删除成功');
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
     handleRefresh();
   } finally {
     hideLoading.close();
diff --git a/apps/web-ele/src/views/mp/freePublish/index.vue b/apps/web-ele/src/views/mp/freePublish/index.vue
index 7a8cdbfa1..c126c7f01 100644
--- a/apps/web-ele/src/views/mp/freePublish/index.vue
+++ b/apps/web-ele/src/views/mp/freePublish/index.vue
@@ -1,9 +1,10 @@
 <script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MpFreePublishApi } from '#/api/mp/freePublish';
 
-import { confirm, DocAlert, Page } from '@vben/common-ui';
+import { DocAlert, Page } from '@vben/common-ui';
 
-import { ElImage, ElLink, ElLoading } from 'element-plus';
+import { ElImage, ElLink, ElLoading, ElMessage } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteFreePublish, getFreePublishPage } from '#/api/mp/freePublish';
@@ -25,20 +26,21 @@ function handleAccountChange(accountId: number) {
 
 /** 删除文章 */
 async function handleDelete(row: MpFreePublishApi.FreePublish) {
-  // 二次确认提示
-  await confirm($t('ui.actionMessage.deleteConfirm', ['文章']));
-  const hideLoading = ElLoading.service({
-    text: '删除中...',
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting'),
   });
   try {
-    const formValues = await gridApi.formApi.getValues();
-    const accountId = formValues.accountId;
     await deleteFreePublish(accountId, row.articleId!);
-    message.success($t('ui.actionMessage.deleteSuccess', ['文章']));
-    // 刷新列表
+    ElMessage.success($t('ui.actionMessage.deleteSuccess'));
     handleRefresh();
   } finally {
-    hideLoading();
+    loadingInstance.close();
   }
 }
 
@@ -74,6 +76,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               });
             }
           });
+          // TODO @jawe：Article 类型，报错；
           return {
             list: res.list as unknown as Article[],
             total: res.total,