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>