!252 【antd】【mp】消息管理迁移

Merge pull request !252 from dylanmay/dev
2025-11-13 01:27:31 +00:00
parent a0b235134c 971b7e28f6
commit b3c1dff37d
48 changed files with 6948 additions and 1163 deletions
--- a/apps/web-antd/package.json
+++ b/apps/web-antd/package.json
@@ -44,6 +44,7 @@
    "@vben/types": "workspace:*",
    "@vben/utils": "workspace:*",
    "@videojs-player/vue": "catalog:",
+    "@vueuse/components": "catalog:",
    "@vueuse/core": "catalog:",
    "@vueuse/integrations": "catalog:",
    "ant-design-vue": "catalog:",
--- a/apps/web-antd/src/api/mp/account/index.ts
+++ b/apps/web-antd/src/api/mp/account/index.ts
@@ -5,12 +5,12 @@ import { requestClient } from '#/api/request';
 export namespace MpAccountApi {
  /** 公众号账号信息 */
  export interface Account {
-    id?: number;
+    id: number;
    name: string;
-    account: string;
-    appId: string;
-    appSecret: string;
-    token: string;
+    account?: string;
+    appId?: string;
+    appSecret?: string;
+    token?: string;
    aesKey?: string;
    qrCodeUrl?: string;
    remark?: string;
--- a/apps/web-antd/src/locales/langs/en-US/page.json
+++ b/apps/web-antd/src/locales/langs/en-US/page.json
@@ -29,5 +29,11 @@
  "tenant": {
    "placeholder": "Please select tenant",
    "success": "Switch tenant success"
+  },
+  "mp": {
+    "upload": {
+      "invalidFormat": "Invalid {0} format!",
+      "maxSize": "{0} size cannot exceed {1}M!"
+    }
  }
 }
--- a/apps/web-antd/src/locales/langs/zh-CN/page.json
+++ b/apps/web-antd/src/locales/langs/zh-CN/page.json
@@ -29,5 +29,11 @@
  "tenant": {
    "placeholder": "请选择租户",
    "success": "切换租户成功"
+  },
+  "mp": {
+    "upload": {
+      "invalidFormat": "上传{0}格式不对!",
+      "maxSize": "上传{0}大小不能超过{1}M!"
+    }
  }
 }
--- a/apps/web-antd/src/views/mp/components/wx-account-select/index.ts
+++ b/apps/web-antd/src/views/mp/components/wx-account-select/index.ts
@@ -0,0 +1 @@
+export { default as WxAccountSelect } from './main.vue';
--- a/apps/web-antd/src/views/mp/components/wx-account-select/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-account-select/main.vue
@@ -0,0 +1,73 @@
+<script lang="ts" setup>
+import type { SelectValue } from 'ant-design-vue/es/select';
+
+import type { MpAccountApi } from '#/api/mp/account';
+
+import { onMounted, reactive, ref } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { message, Select } from 'ant-design-vue';
+
+import { getSimpleAccountList } from '#/api/mp/account';
+
+defineOptions({ name: 'WxAccountSelect' });
+
+// 定义事件
+const emit = defineEmits<{
+  (e: 'change', id: number, name: string): void;
+}>();
+// 消息弹窗
+const { push } = useRouter();
+
+// 当前选中的公众号
+const account: MpAccountApi.Account = reactive({
+  id: -1,
+  name: '',
+});
+
+// 公众号列表
+const accountList = ref<MpAccountApi.Account[]>([]);
+
+// 查询公众号列表
+async function handleQuery() {
+  accountList.value = await getSimpleAccountList();
+  if (accountList.value.length === 0) {
+    message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置');
+    await push({ name: 'MpAccount' });
+    return;
+  }
+
+  // 默认选中第一个，如无数据则不执行
+  const first = accountList.value[0];
+  if (first) {
+    account.id = first.id;
+    account.name = first.name;
+    emit('change', account.id, account.name);
+  }
+}
+
+// 切换选中公众号
+function onChanged(id: SelectValue) {
+  const found = accountList.value.find((v) => v.id === id);
+  if (found) {
+    account.name = found.name;
+    emit('change', account.id, account.name);
+  }
+}
+
+// 初始化
+onMounted(handleQuery);
+</script>
+
+<template>
+  <Select
+    v-model:value="account.id"
+    placeholder="请选择公众号"
+    class="!w-[240px]"
+    @change="onChanged"
+  >
+    <Select.Option v-for="item in accountList" :key="item.id" :value="item.id">
+      {{ item.name }}
+    </Select.Option>
+  </Select>
+</template>
--- a/apps/web-antd/src/views/mp/components/wx-location/index.ts
+++ b/apps/web-antd/src/views/mp/components/wx-location/index.ts
@@ -0,0 +1 @@
+export { default as WxLocation } from './main.vue';
--- a/apps/web-antd/src/views/mp/components/wx-location/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-location/main.vue
@@ -0,0 +1,53 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Col, Row } from 'ant-design-vue';
+
+defineOptions({ name: 'WxLocation' });
+
+const props = withDefaults(
+  defineProps<{
+    label: string;
+    locationX: number;
+    locationY: number;
+    qqMapKey?: string;
+  }>(),
+  {
+    qqMapKey: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
+  },
+);
+
+const mapUrl = computed(() => {
+  return `https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${props.locationY}&pointy=${props.locationX}&name=${props.label}&ref=yudao`;
+});
+
+const mapImageUrl = computed(() => {
+  return `https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${props.locationX},${props.locationY}&key=${props.qqMapKey}&size=250*180`;
+});
+
+defineExpose({
+  locationX: props.locationX,
+  locationY: props.locationY,
+  label: props.label,
+  qqMapKey: props.qqMapKey,
+});
+</script>
+
+<template>
+  <!-- 微信消息 - 定位 -->
+  <div>
+    <a :href="mapUrl" target="_blank" class="text-primary">
+      <Col>
+        <Row>
+          <img :src="mapImageUrl" alt="地图位置" />
+        </Row>
+        <Row class="mt-2">
+          <IconifyIcon icon="mdi:map-marker" class="mr-1" />
+          {{ label }}
+        </Row>
+      </Col>
+    </a>
+  </div>
+</template>
--- a/apps/web-antd/src/views/mp/components/wx-material-select/index.ts
+++ b/apps/web-antd/src/views/mp/components/wx-material-select/index.ts
@@ -0,0 +1,3 @@
+export { default as WxMaterialSelect } from './main.vue';
+
+export { MaterialType, NewsType } from './types';
--- a/apps/web-antd/src/views/mp/components/wx-material-select/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-material-select/main.vue
@@ -0,0 +1,446 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { reactive, ref, watch } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Pagination, Row, Spin } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as MpDraftApi from '#/api/mp/draft';
+import * as MpFreePublishApi from '#/api/mp/freePublish';
+import * as MpMaterialApi from '#/api/mp/material';
+import { WxNews } from '#/views/mp/components/wx-news';
+import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
+import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
+
+import { NewsType } from './types';
+
+defineOptions({ name: 'WxMaterialSelect' });
+
+const props = withDefaults(
+  defineProps<{
+    accountId: number;
+    newsType?: NewsType;
+    type: string;
+  }>(),
+  {
+    newsType: NewsType.Published,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'selectMaterial', item: any): void;
+}>();
+
+// 遮罩层
+const loading = ref(false);
+// 总条数
+const total = ref(0);
+// 数据列表
+const list = ref<any[]>([]);
+// 查询参数
+const queryParams = reactive({
+  accountId: props.accountId,
+  pageNo: 1,
+  pageSize: 10,
+});
+
+const voiceGridColumns: VxeTableGridOptions<any>['columns'] = [
+  {
+    field: 'mediaId',
+    title: '编号',
+    align: 'center',
+    minWidth: 160,
+  },
+  {
+    field: 'name',
+    title: '文件名',
+    minWidth: 200,
+  },
+  {
+    field: 'voice',
+    title: '语音',
+    minWidth: 200,
+    align: 'center',
+    slots: { default: 'voice' },
+  },
+  {
+    field: 'createTime',
+    title: '上传时间',
+    width: 180,
+    formatter: 'formatDateTime',
+  },
+  {
+    title: '操作',
+    width: 140,
+    fixed: 'right',
+    align: 'center',
+    slots: { default: 'actions' },
+  },
+];
+
+const videoGridColumns: VxeTableGridOptions<any>['columns'] = [
+  {
+    field: 'mediaId',
+    title: '编号',
+    minWidth: 160,
+  },
+  {
+    field: 'name',
+    title: '文件名',
+    minWidth: 200,
+  },
+  {
+    field: 'title',
+    title: '标题',
+    minWidth: 200,
+  },
+  {
+    field: 'introduction',
+    title: '介绍',
+    minWidth: 220,
+  },
+  {
+    field: 'video',
+    title: '视频',
+    minWidth: 220,
+    align: 'center',
+    slots: { default: 'video' },
+  },
+  {
+    field: 'createTime',
+    title: '上传时间',
+    width: 180,
+    formatter: 'formatDateTime',
+  },
+  {
+    title: '操作',
+    width: 140,
+    fixed: 'right',
+    align: 'center',
+    slots: { default: 'actions' },
+  },
+];
+
+const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns: voiceGridColumns,
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: true,
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, { accountId }) => {
+          const finalAccountId = accountId ?? queryParams.accountId;
+          if (finalAccountId === undefined || finalAccountId === null) {
+            return { list: [], total: 0 };
+          }
+          return await MpMaterialApi.getMaterialPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            accountId: finalAccountId,
+            type: 'voice',
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+
+const [VideoGrid, videoGridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns: videoGridColumns,
+    height: 'auto',
+    keepSource: true,
+    pagerConfig: {
+      enabled: true,
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, { accountId }) => {
+          const finalAccountId = accountId ?? queryParams.accountId;
+          if (finalAccountId === undefined || finalAccountId === null) {
+            return { list: [], total: 0 };
+          }
+          return await MpMaterialApi.getMaterialPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            accountId: finalAccountId,
+            type: 'video',
+          });
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+
+function selectMaterialFun(item: any) {
+  emit('selectMaterial', item);
+}
+
+async function getMaterialPageFun() {
+  const data = await MpMaterialApi.getMaterialPage({
+    ...queryParams,
+    type: props.type,
+  });
+  list.value = data.list;
+  total.value = data.total;
+}
+
+async function getFreePublishPageFun() {
+  const data = await MpFreePublishApi.getFreePublishPage(queryParams);
+  data.list.forEach((item: any) => {
+    const articles = item.content.newsItem;
+    articles.forEach((article: any) => {
+      article.picUrl = article.thumbUrl;
+    });
+  });
+  list.value = data.list;
+  total.value = data.total;
+}
+
+async function getDraftPageFun() {
+  const data = await MpDraftApi.getDraftPage(queryParams);
+  data.list.forEach((draft: any) => {
+    const articles = draft.content.newsItem;
+    articles.forEach((article: any) => {
+      article.picUrl = article.thumbUrl;
+    });
+  });
+  list.value = data.list;
+  total.value = data.total;
+}
+
+async function getPage() {
+  if (props.type === 'voice') {
+    await voiceGridApi.reload({ accountId: queryParams.accountId });
+    return;
+  }
+  if (props.type === 'video') {
+    await videoGridApi.reload({ accountId: queryParams.accountId });
+    return;
+  }
+
+  loading.value = true;
+  try {
+    if (props.type === 'news' && props.newsType === NewsType.Published) {
+      await getFreePublishPageFun();
+    } else if (props.type === 'news' && props.newsType === NewsType.Draft) {
+      await getDraftPageFun();
+    } else {
+      await getMaterialPageFun();
+    }
+  } finally {
+    loading.value = false;
+  }
+}
+
+watch(
+  () => props.accountId,
+  (accountId) => {
+    queryParams.accountId = accountId;
+    queryParams.pageNo = 1;
+    getPage();
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.type,
+  () => {
+    queryParams.pageNo = 1;
+    getPage();
+  },
+);
+
+watch(
+  () => props.newsType,
+  () => {
+    if (props.type === 'news') {
+      queryParams.pageNo = 1;
+      getPage();
+    }
+  },
+);
+</script>
+
+<template>
+  <Page :bordered="false" class="pb-8">
+    <!-- 类型：image -->
+    <template v-if="props.type === 'image'">
+      <Spin :spinning="loading">
+        <div class="waterfall">
+          <div v-for="item in list" :key="item.mediaId" class="waterfall-item">
+            <img class="material-img" :src="item.url" alt="素材图片" />
+            <p class="item-name">{{ item.name }}</p>
+            <Row class="ope-row">
+              <Button type="primary" @click="selectMaterialFun(item)">
+                选择
+                <template #icon>
+                  <IconifyIcon icon="mdi:check-circle" />
+                </template>
+              </Button>
+            </Row>
+          </div>
+        </div>
+      </Spin>
+      <Pagination
+        v-model:current="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        :total="total"
+        class="mt-4"
+        @change="getPage"
+        @show-size-change="getPage"
+      />
+    </template>
+
+    <!-- 类型：voice -->
+    <template v-else-if="props.type === 'voice'">
+      <VoiceGrid>
+        <template #voice="{ row }">
+          <WxVoicePlayer :url="row.url" />
+        </template>
+        <template #actions="{ row }">
+          <Button type="link" @click="selectMaterialFun(row)">
+            选择
+            <template #icon>
+              <IconifyIcon icon="mdi:plus" />
+            </template>
+          </Button>
+        </template>
+      </VoiceGrid>
+    </template>
+
+    <!-- 类型：video -->
+    <template v-else-if="props.type === 'video'">
+      <VideoGrid>
+        <template #video="{ row }">
+          <WxVideoPlayer :url="row.url" />
+        </template>
+        <template #actions="{ row }">
+          <Button type="link" @click="selectMaterialFun(row)">
+            选择
+            <template #icon>
+              <IconifyIcon icon="mdi:plus-circle" />
+            </template>
+          </Button>
+        </template>
+      </VideoGrid>
+    </template>
+
+    <!-- 类型：news -->
+    <template v-else-if="props.type === 'news'">
+      <Spin :spinning="loading">
+        <div class="waterfall">
+          <div v-for="item in list" :key="item.mediaId" class="waterfall-item">
+            <div v-if="item.content && item.content.newsItem">
+              <WxNews :articles="item.content.newsItem" />
+              <Row class="ope-row">
+                <Button type="primary" @click="selectMaterialFun(item)">
+                  选择
+                  <template #icon>
+                    <IconifyIcon icon="mdi:check-circle" />
+                  </template>
+                </Button>
+              </Row>
+            </div>
+          </div>
+        </div>
+      </Spin>
+      <Pagination
+        v-model:current="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        :total="total"
+        class="mt-4"
+        @change="getPage"
+        @show-size-change="getPage"
+      />
+    </template>
+  </Page>
+</template>
+
+<style lang="scss" scoped>
+@media (width >= 992px) and (width <= 1300px) {
+  .waterfall {
+    column-count: 3;
+  }
+
+  p {
+    color: red;
+  }
+}
+
+@media (width >= 768px) and (width <= 991px) {
+  .waterfall {
+    column-count: 2;
+  }
+
+  p {
+    color: orange;
+  }
+}
+
+@media (width <= 767px) {
+  .waterfall {
+    column-count: 1;
+  }
+}
+
+.waterfall {
+  column-count: 5;
+  column-gap: 10px;
+  width: 100%;
+  margin: 0 auto;
+}
+
+.waterfall-item {
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #eaeaea;
+  break-inside: avoid;
+}
+
+.material-img {
+  width: 100%;
+}
+
+p {
+  line-height: 30px;
+}
+
+.ope-row {
+  padding-top: 10px;
+  text-align: center;
+}
+
+.item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  text-align: center;
+  white-space: nowrap;
+}
+</style>
--- a/apps/web-antd/src/views/mp/components/wx-material-select/types.ts
+++ b/apps/web-antd/src/views/mp/components/wx-material-select/types.ts
@@ -0,0 +1,11 @@
+export enum NewsType {
+  Draft = '2',
+  Published = '1',
+}
+
+export enum MaterialType {
+  Image = 'image',
+  News = 'news',
+  Video = 'video',
+  Voice = 'voice',
+}
--- a/apps/web-antd/src/views/mp/components/wx-msg/card.scss
+++ b/apps/web-antd/src/views/mp/components/wx-msg/card.scss
@@ -0,0 +1,116 @@
+.avue-card {
+  &__item {
+    box-sizing: border-box;
+    height: 200px;
+    margin-bottom: 16px;
+    font-size: 14px;
+    font-feature-settings: 'tnum';
+    font-variant: tabular-nums;
+    line-height: 1.5;
+    color: rgb(0 0 0 / 65%);
+    cursor: pointer;
+    list-style: none;
+    background-color: #fff;
+    border: 1px solid #e8e8e8;
+
+    &:hover {
+      border-color: rgb(0 0 0 / 9%);
+      box-shadow: 0 2px 8px rgb(0 0 0 / 9%);
+    }
+
+    &--add {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      font-size: 16px;
+      color: rgb(0 0 0 / 45%);
+      background-color: #fff;
+      border: 1px dashed #000;
+      border-color: #d9d9d9;
+      border-radius: 2px;
+
+      i {
+        margin-right: 10px;
+      }
+
+      &:hover {
+        color: #40a9ff;
+        background-color: #fff;
+        border-color: #40a9ff;
+      }
+    }
+  }
+
+  &__body {
+    display: flex;
+    padding: 24px;
+  }
+
+  &__detail {
+    flex: 1;
+  }
+
+  &__avatar {
+    width: 48px;
+    height: 48px;
+    margin-right: 12px;
+    overflow: hidden;
+    border-radius: 48px;
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__title {
+    margin-bottom: 12px;
+    font-size: 16px;
+    color: rgb(0 0 0 / 85%);
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+
+  &__info {
+    display: -webkit-box;
+    height: 64px;
+    overflow: hidden;
+    -webkit-line-clamp: 3;
+    color: rgb(0 0 0 / 45%);
+    -webkit-box-orient: vertical;
+  }
+
+  &__menu {
+    display: flex;
+    justify-content: space-around;
+    height: 50px;
+    line-height: 50px;
+    color: rgb(0 0 0 / 45%);
+    text-align: center;
+    background: #f7f9fa;
+
+    &:hover {
+      color: #1890ff;
+    }
+  }
+}
+
+/** joolun 额外加的 */
+.avue-comment__main {
+  flex: unset !important;
+  margin: 0 8px !important;
+  border-radius: 5px !important;
+}
+
+.avue-comment__header {
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+.avue-comment__body {
+  border-bottom-right-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
--- a/apps/web-antd/src/views/mp/components/wx-msg/comment.scss
+++ b/apps/web-antd/src/views/mp/components/wx-msg/comment.scss
@@ -0,0 +1,109 @@
+/* 来自 https://github.com/nmxiaowei/avue/blob/master/styles/src/element-ui/comment.scss  */
+.avue-comment {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 30px;
+
+  &--reverse {
+    flex-direction: row-reverse;
+
+    .avue-comment__main {
+      &::before,
+      &::after {
+        right: -8px;
+        left: auto;
+        border-width: 8px 0 8px 8px;
+      }
+
+      &::before {
+        border-left-color: #dedede;
+      }
+
+      &::after {
+        margin-right: 1px;
+        margin-left: auto;
+        border-left-color: #f8f8f8;
+      }
+    }
+  }
+
+  &__avatar {
+    box-sizing: border-box;
+    width: 48px;
+    height: 48px;
+    vertical-align: middle;
+    border: 1px solid transparent;
+    border-radius: 50%;
+  }
+
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 5px 15px;
+    background: #f8f8f8;
+    border-bottom: 1px solid #eee;
+  }
+
+  &__author {
+    font-size: 14px;
+    font-weight: 700;
+    color: #999;
+  }
+
+  &__main {
+    position: relative;
+    flex: 1;
+    margin: 0 20px;
+    border: 1px solid #dedede;
+    border-radius: 2px;
+
+    &::before,
+    &::after {
+      position: absolute;
+      top: 10px;
+      right: 100%;
+      left: -8px;
+      display: block;
+      width: 0;
+      height: 0;
+      pointer-events: none;
+      content: ' ';
+      border-color: transparent;
+      border-style: solid solid outset;
+      border-width: 8px 8px 8px 0;
+    }
+
+    &::before {
+      z-index: 1;
+      border-right-color: #dedede;
+    }
+
+    &::after {
+      z-index: 2;
+      margin-left: 1px;
+      border-right-color: #f8f8f8;
+    }
+  }
+
+  &__body {
+    padding: 15px;
+    overflow: hidden;
+    font-family:
+      'Segoe UI', 'Lucida Grande', Helvetica, Arial, 'Microsoft YaHei',
+      FreeSans, Arimo, 'Droid Sans', 'wenquanyi micro hei', 'Hiragino Sans GB',
+      'Hiragino Sans GB W3', FontAwesome, sans-serif;
+    font-size: 14px;
+    color: #333;
+    background: #fff;
+  }
+
+  blockquote {
+    padding: 1px 0 1px 15px;
+    margin: 0;
+    font-family:
+      Georgia, 'Times New Roman', Times, Kai, 'Kaiti SC', KaiTi, BiauKai,
+      FontAwesome, serif;
+    border-left: 4px solid #ddd;
+  }
+}
--- a/apps/web-antd/src/views/mp/components/wx-msg/components/Msg.vue
+++ b/apps/web-antd/src/views/mp/components/wx-msg/components/Msg.vue
@@ -0,0 +1,75 @@
+<script lang="ts" setup>
+import { IconifyIcon } from '@vben/icons';
+
+import { WxLocation } from '#/views/mp/components/wx-location';
+import { WxMusic } from '#/views/mp/components/wx-music';
+import { WxNews } from '#/views/mp/components/wx-news';
+import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
+import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
+
+import { MsgType } from '../types';
+import MsgEvent from './MsgEvent.vue';
+
+defineOptions({ name: 'Msg' });
+
+defineProps<{
+  item: any;
+}>();
+</script>
+
+<template>
+  <div>
+    <MsgEvent v-if="item.type === MsgType.Event" :item="item" />
+
+    <div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
+
+    <div v-else-if="item.type === MsgType.Voice">
+      <WxVoicePlayer :url="item.mediaUrl" :content="item.recognition" />
+    </div>
+
+    <div v-else-if="item.type === MsgType.Image">
+      <a :href="item.mediaUrl" target="_blank">
+        <img :src="item.mediaUrl" class="w-[100px]" alt="图片消息" />
+      </a>
+    </div>
+
+    <div
+      v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
+      class="text-center"
+    >
+      <WxVideoPlayer :url="item.mediaUrl" />
+    </div>
+
+    <div v-else-if="item.type === MsgType.Link" class="flex flex-col gap-2">
+      <a :href="item.url" target="_blank" class="text-success no-underline">
+        <div class="flex items-center text-sm font-medium text-[#52c41a]">
+          <IconifyIcon icon="mdi:link" class="mr-1" />
+          {{ item.title }}
+        </div>
+      </a>
+      <div class="text-xs text-[#666]">{{ item.description }}</div>
+    </div>
+
+    <div v-else-if="item.type === MsgType.Location">
+      <WxLocation
+        :label="item.label"
+        :location-y="item.locationY"
+        :location-x="item.locationX"
+      />
+    </div>
+
+    <div v-else-if="item.type === MsgType.News" class="w-[300px]">
+      <WxNews :articles="item.articles" />
+    </div>
+
+    <div v-else-if="item.type === MsgType.Music">
+      <WxMusic
+        :title="item.title"
+        :description="item.description"
+        :thumb-media-url="item.thumbMediaUrl"
+        :music-url="item.musicUrl"
+        :hq-music-url="item.hqMusicUrl"
+      />
+    </div>
+  </div>
+</template>
--- a/apps/web-antd/src/views/mp/components/wx-msg/components/MsgEvent.vue
+++ b/apps/web-antd/src/views/mp/components/wx-msg/components/MsgEvent.vue
@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { Tag } from 'ant-design-vue';
+
+defineOptions({ name: 'MsgEvent' });
+
+defineProps<{
+  item: any;
+}>();
+</script>
+
+<template>
+  <div>
+    <div v-if="item.event === 'subscribe'">
+      <Tag color="success">关注</Tag>
+    </div>
+    <div v-else-if="item.event === 'unsubscribe'">
+      <Tag color="error">取消关注</Tag>
+    </div>
+    <div v-else-if="item.event === 'CLICK'">
+      <Tag>点击菜单</Tag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'VIEW'">
+      <Tag>点击菜单链接</Tag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'scancode_waitmsg'">
+      <Tag>扫码结果</Tag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'scancode_push'">
+      <Tag>扫码结果</Tag>
+      【{{ item.eventKey }}】
+    </div>
+    <div v-else-if="item.event === 'pic_sysphoto'">
+      <Tag>系统拍照发图</Tag>
+    </div>
+    <div v-else-if="item.event === 'pic_photo_or_album'">
+      <Tag>拍照或者相册</Tag>
+    </div>
+    <div v-else-if="item.event === 'pic_weixin'">
+      <Tag>微信相册</Tag>
+    </div>
+    <div v-else-if="item.event === 'location_select'">
+      <Tag>选择地理位置</Tag>
+    </div>
+    <div v-else>
+      <Tag color="error">未知事件类型</Tag>
+    </div>
+  </div>
+</template>
--- a/apps/web-antd/src/views/mp/components/wx-msg/components/MsgList.vue
+++ b/apps/web-antd/src/views/mp/components/wx-msg/components/MsgList.vue
@@ -0,0 +1,71 @@
+<script lang="ts" setup>
+import type { User } from '../types';
+
+import { preferences } from '@vben/preferences';
+import { formatDateTime } from '@vben/utils';
+
+import Msg from './Msg.vue';
+
+defineOptions({ name: 'MsgList' });
+
+const props = defineProps<{
+  accountId: number;
+  list: any[];
+  user: User;
+}>();
+const SendFrom = {
+  MpBot: 2,
+  User: 1,
+} as const;
+
+function getAvatar(sendFrom: number) {
+  return sendFrom === SendFrom.User
+    ? props.user.avatar
+    : preferences.app.defaultAvatar;
+}
+
+function getNickname(sendFrom: SendFrom) {
+  return sendFrom === SendFrom.User ? props.user.nickname : '公众号';
+}
+</script>
+<template>
+  <div class="execution" v-for="item in props.list" :key="item.id">
+    <div
+      class="avue-comment"
+      :class="{ 'avue-comment--reverse': item.sendFrom === SendFrom.MpBot }"
+    >
+      <div class="avatar-div">
+        <img :src="getAvatar(item.sendFrom)" class="avue-comment__avatar" />
+        <div class="avue-comment__author">
+          {{ getNickname(item.sendFrom) }}
+        </div>
+      </div>
+      <div class="avue-comment__main">
+        <div class="avue-comment__header">
+          <div class="avue-comment__create_time">
+            {{ formatDateTime(item.createTime) }}
+          </div>
+        </div>
+        <div
+          class="avue-comment__body"
+          :style="
+            item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''
+          "
+        >
+          <Msg :item="item" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
+@import url('../comment.scss');
+@import url('../card.scss');
+
+.avatar-div {
+  width: 80px;
+  text-align: center;
+}
+</style>
--- a/apps/web-antd/src/views/mp/components/wx-msg/index.ts
+++ b/apps/web-antd/src/views/mp/components/wx-msg/index.ts
@@ -0,0 +1,3 @@
+export { default as WxMsg } from './main.vue';
+
+export { MsgType } from './types';
--- a/apps/web-antd/src/views/mp/components/wx-msg/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-msg/main.vue
@@ -0,0 +1,180 @@
+<script lang="ts" setup>
+import type { User } from './types';
+
+import { nextTick, onMounted, reactive, ref, unref } from 'vue';
+
+import { preferences } from '@vben/preferences';
+
+import { Button, message, Spin } from 'ant-design-vue';
+
+import { getMessagePage, sendMessage } from '#/api/mp/message';
+import { getUser } from '#/api/mp/user';
+import { WxReplySelect } from '#/views/mp/components/wx-reply';
+
+import MsgList from './components/MsgList.vue';
+
+defineOptions({ name: 'WxMsg' });
+
+const props = defineProps<{
+  userId: number;
+}>();
+
+const accountId = ref(-1); // 公众号ID，需要通过userId初始化
+const loading = ref(false); // 消息列表是否正在加载中
+const hasMore = ref(true); // 是否可以加载更多
+const list = ref<any[]>([]); // 消息列表
+const queryParams = reactive({
+  accountId,
+  pageNo: 1, // 当前页数
+  pageSize: 14, // 每页显示多少条
+});
+
+// 由于微信不再提供昵称，直接使用"用户"展示
+const user: User = reactive({
+  accountId, // 公众号账号编号
+  avatar: preferences.app.defaultAvatar,
+  nickname: '用户',
+});
+
+// ========= 消息发送 =========
+const sendLoading = ref(false); // 发送消息是否加载中
+// 微信发送消息
+const reply = ref<any>({
+  accountId: -1,
+  articles: [],
+  type: 'text',
+});
+
+const replySelectRef = ref<InstanceType<typeof WxReplySelect> | null>(null); // WxReplySelect组件ref，用于消息发送成功后清除内容
+const msgDivRef = ref<HTMLDivElement | null>(null); // 消息显示窗口ref，用于滚动到底部
+
+/** 完成加载 */
+onMounted(async () => {
+  const data = await getUser(props.userId);
+  user.nickname = data.nickname?.length > 0 ? data.nickname : user.nickname;
+  user.avatar = data.avatar?.length > 0 ? data.avatar : user.avatar;
+  accountId.value = data.accountId;
+  reply.value.accountId = data.accountId;
+
+  refreshChange();
+});
+
+// 执行发送
+async function sendMsg() {
+  if (!unref(reply)) {
+    return;
+  }
+  // 公众号限制：客服消息，公众号只允许发送一条
+  if (
+    reply.value.type === 'news' &&
+    reply.value.articles &&
+    reply.value.articles.length > 1
+  ) {
+    reply.value.articles = [reply.value.articles[0]];
+    message.success('图文消息条数限制在 1 条以内，已默认发送第一条');
+  }
+
+  const data = await sendMessage({
+    ...reply.value,
+    userId: props.userId,
+  } as any);
+  sendLoading.value = false;
+
+  list.value = [...list.value, data];
+  await scrollToBottom();
+
+  // 发送后清空数据
+  replySelectRef.value?.clear();
+}
+
+function loadMore() {
+  queryParams.pageNo++;
+  getPage(queryParams, null);
+}
+
+async function getPage(page: any, params: any = null) {
+  loading.value = true;
+  const dataTemp = await getMessagePage(
+    Object.assign(
+      {
+        accountId: page.accountId,
+        pageNo: page.pageNo,
+        pageSize: page.pageSize,
+        userId: props.userId,
+      },
+      params,
+    ),
+  );
+
+  const scrollHeight = msgDivRef.value?.scrollHeight ?? 0;
+  // 处理数据
+  const data = dataTemp.list.reverse();
+  list.value = [...data, ...list.value];
+  loading.value = false;
+  if (data.length < queryParams.pageSize || data.length === 0) {
+    hasMore.value = false;
+  }
+  queryParams.pageNo = page.pageNo;
+  queryParams.pageSize = page.pageSize;
+  // 滚动到原来的位置
+  if (queryParams.pageNo === 1) {
+    // 定位到消息底部
+    await scrollToBottom();
+  } else if (data.length > 0) {
+    // 定位滚动条
+    await nextTick();
+    if (scrollHeight !== 0 && msgDivRef.value) {
+      msgDivRef.value.scrollTop =
+        msgDivRef.value.scrollHeight - scrollHeight - 100;
+    }
+  }
+}
+
+function refreshChange() {
+  getPage(queryParams);
+}
+
+/** 定位到消息底部 */
+async function scrollToBottom() {
+  await nextTick();
+  if (msgDivRef.value) {
+    msgDivRef.value.scrollTop = msgDivRef.value.scrollHeight;
+  }
+}
+</script>
+
+<template>
+  <div class="flex h-full flex-col">
+    <div ref="msgDivRef" class="mx-2.5 flex-1 overflow-auto bg-[#eaeaea]">
+      <!-- 加载更多 -->
+      <Spin :spinning="loading" />
+      <div v-if="!loading">
+        <div
+          v-if="hasMore"
+          class="cursor-pointer rounded p-3 text-center text-sm text-[#409eff] transition-colors duration-300 hover:bg-[#f5f7fa]"
+          @click="loadMore"
+        >
+          <span>点击加载更多</span>
+        </div>
+        <div
+          v-else
+          class="cursor-not-allowed rounded p-3 text-center text-sm text-[#909399] hover:bg-transparent"
+        >
+          <span>没有更多了</span>
+        </div>
+      </div>
+
+      <!-- 消息列表 -->
+      <MsgList :list="list" :account-id="accountId" :user="user" />
+    </div>
+
+    <div class="p-2.5">
+      <Spin :spinning="sendLoading">
+        <WxReplySelect ref="replySelectRef" v-model="reply" />
+        <Button type="primary" class="float-right mb-2 mt-2" @click="sendMsg">
+          发送(S)
+        </Button>
+      </Spin>
+    </div>
+  </div>
+</template>
--- a/apps/web-antd/src/views/mp/components/wx-msg/types.ts
+++ b/apps/web-antd/src/views/mp/components/wx-msg/types.ts
@@ -0,0 +1,17 @@
+export enum MsgType {
+  Event = 'event',
+  Image = 'image',
+  Link = 'link',
+  Location = 'location',
+  Music = 'music',
+  News = 'news',
+  Text = 'text',
+  Video = 'video',
+  Voice = 'voice',
+}
+
+export interface User {
+  accountId: number;
+  avatar: string;
+  nickname: string;
+}
--- a/apps/web-antd/src/views/mp/components/wx-music/index.ts
+++ b/apps/web-antd/src/views/mp/components/wx-music/index.ts
@@ -0,0 +1 @@
+export { default as WxMusic } from './main.vue';
--- a/apps/web-antd/src/views/mp/components/wx-music/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-music/main.vue
@@ -0,0 +1,91 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+defineOptions({ name: 'WxMusic' });
+
+const props = withDefaults(
+  defineProps<{
+    description?: string;
+    hqMusicUrl?: string;
+    musicUrl?: string;
+    thumbMediaUrl: string;
+    title?: string;
+  }>(),
+  {
+    title: '',
+    description: '',
+    musicUrl: '',
+    hqMusicUrl: '',
+  },
+);
+
+const href = computed(() => props.hqMusicUrl || props.musicUrl);
+
+defineExpose({
+  musicUrl: props.musicUrl,
+});
+</script>
+
+<template>
+  <!-- 微信消息 - 音乐 -->
+  <div>
+    <a :href="href" target="_blank" class="text-success no-underline">
+      <div class="music-card">
+        <div class="music-avatar">
+          <img :src="thumbMediaUrl" alt="音乐封面" />
+        </div>
+        <div class="music-detail">
+          <div class="music-title">{{ title }}</div>
+          <div class="music-description">{{ description }}</div>
+        </div>
+      </div>
+    </a>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.music-card {
+  display: flex;
+  padding: 10px;
+  background-color: #fff;
+  border-radius: 5px;
+}
+
+.music-avatar {
+  flex-shrink: 0;
+  width: 60px;
+  height: 60px;
+  margin-right: 12px;
+  overflow: hidden;
+  border-radius: 4px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.music-detail {
+  flex: 1;
+  overflow: hidden;
+}
+
+.music-title {
+  margin-bottom: 8px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 14px;
+  font-weight: 500;
+  color: #333;
+  white-space: nowrap;
+}
+
+.music-description {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  color: #666;
+  white-space: nowrap;
+}
+</style>
--- a/apps/web-antd/src/views/mp/components/wx-news/index.ts
+++ b/apps/web-antd/src/views/mp/components/wx-news/index.ts
@@ -0,0 +1 @@
+export { default as WxNews } from './main.vue';
--- a/apps/web-antd/src/views/mp/components/wx-news/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-news/main.vue
@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import { Image } from 'ant-design-vue';
+
+defineOptions({ name: 'WxNews' });
+
+const props = withDefaults(
+  defineProps<{
+    articles?: any[] | null;
+  }>(),
+  {
+    articles: null,
+  },
+);
+
+defineExpose({
+  articles: props.articles,
+});
+</script>
+
+<template>
+  <!-- 微信消息 - 图文 -->
+  <div class="news-home">
+    <div v-for="(article, index) in articles" :key="index" class="news-div">
+      <!-- 头条 -->
+      <a v-if="index === 0" :href="article.url" target="_blank">
+        <div class="news-main">
+          <div class="news-content">
+            <Image
+              :src="article.picUrl"
+              :preview="false"
+              class="material-img"
+            />
+            <div class="news-content-title">
+              <span>{{ article.title }}</span>
+            </div>
+          </div>
+        </div>
+      </a>
+      <!-- 二条/三条等等 -->
+      <a v-else :href="article.url" target="_blank">
+        <div class="news-main-item">
+          <div class="news-content-item">
+            <div class="news-content-item-title">{{ article.title }}</div>
+            <div class="news-content-item-img">
+              <img :src="article.picUrl" class="material-img" alt="文章图片" />
+            </div>
+          </div>
+        </div>
+      </a>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.news-home {
+  width: 100%;
+  margin: auto;
+  background-color: #fff;
+}
+
+.news-main {
+  width: 100%;
+  margin: auto;
+}
+
+.news-content {
+  position: relative;
+  width: 100%;
+  background-color: #acadae;
+}
+
+.news-content-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  box-sizing: unset !important;
+  display: inline-block;
+  width: 98%;
+  padding: 1%;
+  font-size: 12px;
+  color: #fff;
+  white-space: normal;
+  background-color: black;
+  opacity: 0.65;
+}
+
+.news-main-item {
+  padding: 5px 0;
+  background-color: #fff;
+  border-top: 1px solid #eaeaea;
+}
+
+.news-content-item {
+  position: relative;
+}
+
+.news-content-item-title {
+  display: inline-block;
+  width: 70%;
+  margin-left: 1%;
+  font-size: 10px;
+  white-space: normal;
+}
+
+.news-content-item-img {
+  display: inline-block;
+  width: 25%;
+  margin-right: 1%;
+  background-color: #acadae;
+}
+
+.material-img {
+  width: 100%;
+}
+</style>
--- a/apps/web-antd/src/views/mp/components/wx-reply/components/TabImage.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/components/TabImage.vue
@@ -0,0 +1,219 @@
+<script lang="ts" setup>
+import type { Reply } from './types';
+
+import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
+
+import { computed, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
+
+import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
+import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
+
+defineOptions({ name: 'TabImage' });
+
+const props = defineProps<{
+  modelValue: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+
+const accessStore = useAccessStore();
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
+
+const reply = computed<Reply>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const showDialog = ref(false);
+const fileList = ref([]);
+const uploadData = reactive({
+  accountId: reply.value.accountId,
+  introduction: '',
+  title: '',
+  type: 'image',
+});
+
+function beforeImageUpload(rawFile: UploadRawFile) {
+  return useBeforeUpload(UploadType.Image, 2)(rawFile);
+}
+
+// 自定义上传请求
+async function customRequest(options: any) {
+  const { file, onSuccess, onError } = options;
+
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('accountId', String(uploadData.accountId));
+  formData.append('type', uploadData.type);
+  formData.append('title', uploadData.title);
+  formData.append('introduction', uploadData.introduction);
+
+  try {
+    const response = await fetch(UPLOAD_URL, {
+      method: 'POST',
+      headers: HEADERS,
+      body: formData,
+    });
+
+    const result = await response.json();
+
+    if (result.code === 0) {
+      // 清空上传时的各种数据
+      fileList.value = [];
+      uploadData.title = '';
+      uploadData.introduction = '';
+
+      // 上传好的文件，本质是个素材，所以可以进行选中
+      selectMaterial(result.data);
+      message.success('上传成功');
+      onSuccess(result, file);
+    } else {
+      message.error(result.msg || '上传出错');
+      onError(new Error(result.msg || '上传失败'));
+    }
+  } catch (error) {
+    message.error('上传失败，请重试');
+    onError(error);
+  }
+}
+
+function onDelete() {
+  reply.value.mediaId = null;
+  reply.value.url = null;
+  reply.value.name = null;
+}
+
+function selectMaterial(item: any) {
+  showDialog.value = false;
+  reply.value.mediaId = item.mediaId;
+  reply.value.url = item.url;
+  reply.value.name = item.name;
+}
+</script>
+
+<template>
+  <div>
+    <!-- 情况一：已经选择好素材、或者上传好图片 -->
+    <div v-if="reply.url" class="select-item">
+      <img class="material-img" :src="reply.url" alt="图片素材" />
+      <p v-if="reply.name" class="item-name">{{ reply.name }}</p>
+      <Row class="ope-row" justify="center">
+        <Button danger shape="circle" @click="onDelete">
+          <template #icon>
+            <IconifyIcon icon="mdi:delete" />
+          </template>
+        </Button>
+      </Row>
+    </div>
+
+    <!-- 情况二：未做完上述操作 -->
+    <Row v-else class="text-center" align="middle">
+      <!-- 选择素材 -->
+      <Col :span="12" class="col-select">
+        <Button type="primary" @click="showDialog = true">
+          素材库选择
+          <template #icon>
+            <IconifyIcon icon="mdi:check-circle" />
+          </template>
+        </Button>
+        <Modal
+          v-model:open="showDialog"
+          title="选择图片"
+          :width="1200"
+          :footer="null"
+          destroy-on-close
+        >
+          <WxMaterialSelect
+            type="image"
+            :account-id="reply.accountId"
+            @select-material="selectMaterial"
+          />
+        </Modal>
+      </Col>
+
+      <!-- 文件上传 -->
+      <Col :span="12" class="col-add">
+        <Upload
+          :custom-request="customRequest"
+          :multiple="true"
+          :max-count="1"
+          :file-list="fileList"
+          :before-upload="beforeImageUpload"
+          :show-upload-list="false"
+        >
+          <Button type="primary">
+            上传图片
+            <template #icon>
+              <IconifyIcon icon="mdi:upload" />
+            </template>
+          </Button>
+        </Upload>
+        <div class="upload-tip">
+          支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
+        </div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.select-item {
+  width: 280px;
+  padding: 10px;
+  margin: 0 auto 10px;
+  border: 1px solid #eaeaea;
+}
+
+.material-img {
+  width: 100%;
+}
+
+.item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.ope-row {
+  padding-top: 10px;
+  text-align: center;
+}
+
+.col-select,
+.col-add {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 160px;
+  padding: 50px 0;
+  border: 1px solid rgb(234 234 234);
+}
+
+.col-select {
+  width: 49.5%;
+}
+
+.col-add {
+  float: right;
+  width: 49.5%;
+}
+
+.upload-tip {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 18px;
+  color: #666;
+  text-align: center;
+}
+</style>
--- a/apps/web-antd/src/views/mp/components/wx-reply/components/TabMusic.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/components/TabMusic.vue
@@ -0,0 +1,219 @@
+<script lang="ts" setup>
+import type { Reply } from './types';
+
+import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
+
+import { computed, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import {
+  Button,
+  Col,
+  Input,
+  message,
+  Modal,
+  Row,
+  Upload,
+} from 'ant-design-vue';
+
+import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
+import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
+
+defineOptions({ name: 'TabMusic' });
+
+const props = defineProps<{
+  modelValue: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+
+const accessStore = useAccessStore();
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
+
+const reply = computed<Reply>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const showDialog = ref(false);
+const fileList = ref([]);
+const uploadData = reactive({
+  accountId: reply.value.accountId,
+  introduction: '',
+  title: '',
+  type: 'thumb', // 音乐类型为thumb
+});
+
+function beforeImageUpload(rawFile: UploadRawFile) {
+  return useBeforeUpload(UploadType.Image, 2)(rawFile);
+}
+
+// 自定义上传请求
+async function customRequest(options: any) {
+  const { file, onSuccess, onError } = options;
+
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('accountId', String(uploadData.accountId));
+  formData.append('type', uploadData.type);
+  formData.append('title', uploadData.title);
+  formData.append('introduction', uploadData.introduction);
+
+  try {
+    const response = await fetch(UPLOAD_URL, {
+      method: 'POST',
+      headers: HEADERS,
+      body: formData,
+    });
+
+    const result = await response.json();
+
+    if (result.code === 0) {
+      // 清空上传时的各种数据
+      fileList.value = [];
+      uploadData.title = '';
+      uploadData.introduction = '';
+
+      // 上传好的文件，本质是个素材，所以可以进行选中
+      selectMaterial(result.data);
+      message.success('上传成功');
+      onSuccess(result, file);
+    } else {
+      message.error(result.msg || '上传出错');
+      onError(new Error(result.msg || '上传失败'));
+    }
+  } catch (error) {
+    message.error('上传失败，请重试');
+    onError(error);
+  }
+}
+
+function selectMaterial(item: any) {
+  showDialog.value = false;
+  reply.value.thumbMediaId = item.mediaId;
+  reply.value.thumbMediaUrl = item.url;
+}
+</script>
+
+<template>
+  <div>
+    <Row align="middle" justify="center">
+      <Col :span="6">
+        <div class="thumb-container">
+          <div class="thumb-preview">
+            <img
+              v-if="reply.thumbMediaUrl"
+              :src="reply.thumbMediaUrl"
+              alt="音乐封面"
+              class="thumb-img"
+            />
+            <IconifyIcon
+              v-else
+              icon="mdi:plus"
+              :size="40"
+              class="text-gray-400"
+            />
+          </div>
+          <div class="thumb-actions">
+            <Upload
+              :custom-request="customRequest"
+              :multiple="true"
+              :max-count="1"
+              :file-list="fileList"
+              :before-upload="beforeImageUpload"
+              :show-upload-list="false"
+            >
+              <Button type="link">本地上传</Button>
+            </Upload>
+            <Button type="link" class="ml-2" @click="showDialog = true">
+              素材库选择
+            </Button>
+          </div>
+        </div>
+        <Modal
+          v-model:open="showDialog"
+          title="选择图片"
+          :width="1200"
+          :footer="null"
+          destroy-on-close
+        >
+          <WxMaterialSelect
+            type="image"
+            :account-id="reply.accountId"
+            @select-material="selectMaterial"
+          />
+        </Modal>
+      </Col>
+      <Col :span="18">
+        <div class="input-group">
+          <Input
+            :value="reply.title || undefined"
+            placeholder="请输入标题"
+            class="mb-5"
+            @update:value="(val) => (reply.title = val || null)"
+          />
+          <Input
+            :value="reply.description || undefined"
+            placeholder="请输入描述"
+            @update:value="(val) => (reply.description = val || null)"
+          />
+        </div>
+      </Col>
+    </Row>
+    <div class="mt-5">
+      <Input
+        :value="reply.musicUrl || undefined"
+        placeholder="请输入音乐链接"
+        class="mb-5"
+        @update:value="(val) => (reply.musicUrl = val || null)"
+      />
+      <Input
+        :value="reply.hqMusicUrl || undefined"
+        placeholder="请输入高质量音乐链接"
+        @update:value="(val) => (reply.hqMusicUrl = val || null)"
+      />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.thumb-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+}
+
+.thumb-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 100px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+}
+
+.thumb-img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.thumb-actions {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.input-group {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+</style>
--- a/apps/web-antd/src/views/mp/components/wx-reply/components/TabNews.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/components/TabNews.vue
@@ -0,0 +1,108 @@
+<script lang="ts" setup>
+import type { Reply } from './types';
+
+import { computed, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Col, Modal, Row } from 'ant-design-vue';
+
+import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
+import { WxNews } from '#/views/mp/components/wx-news';
+
+import { NewsType } from './types';
+
+defineOptions({ name: 'TabNews' });
+
+const props = defineProps<{
+  modelValue: Reply;
+  newsType: NewsType;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+
+const reply = computed<Reply>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const showDialog = ref(false);
+
+function selectMaterial(item: any) {
+  showDialog.value = false;
+  reply.value.articles = item.content.newsItem;
+}
+
+function onDelete() {
+  reply.value.articles = [];
+}
+</script>
+
+<template>
+  <div>
+    <Row>
+      <div
+        v-if="reply.articles && reply.articles.length > 0"
+        class="select-item"
+      >
+        <WxNews :articles="reply.articles" />
+        <Col class="ope-row">
+          <Button danger shape="circle" @click="onDelete">
+            <template #icon>
+              <IconifyIcon icon="mdi:delete" />
+            </template>
+          </Button>
+        </Col>
+      </div>
+
+      <!-- 选择素材 -->
+      <Col v-if="!reply.content" :span="24">
+        <Row class="text-center" align="middle">
+          <Col :span="24">
+            <Button type="primary" @click="showDialog = true">
+              {{
+                newsType === NewsType.Published
+                  ? '选择已发布图文'
+                  : '选择草稿箱图文'
+              }}
+              <template #icon>
+                <IconifyIcon icon="mdi:check-circle" />
+              </template>
+            </Button>
+          </Col>
+        </Row>
+      </Col>
+
+      <Modal
+        v-model:open="showDialog"
+        title="选择图文"
+        :width="1200"
+        :footer="null"
+        destroy-on-close
+      >
+        <WxMaterialSelect
+          type="news"
+          :account-id="reply.accountId"
+          :news-type="newsType"
+          @select-material="selectMaterial"
+        />
+      </Modal>
+    </Row>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.select-item {
+  width: 280px;
+  padding: 10px;
+  margin: 0 auto 10px;
+  border: 1px solid #eaeaea;
+}
+
+.ope-row {
+  padding-top: 10px;
+  text-align: center;
+}
+</style>
--- a/apps/web-antd/src/views/mp/components/wx-reply/components/TabText.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/components/TabText.vue
@@ -0,0 +1,26 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { Textarea } from 'ant-design-vue';
+
+const props = defineProps<{
+  modelValue?: null | string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'input', v: null | string): void;
+  (e: 'update:modelValue', v: null | string): void;
+}>();
+
+const content = computed({
+  get: () => props.modelValue ?? '',
+  set: (val: string) => {
+    emit('update:modelValue', val || null);
+    emit('input', val || null);
+  },
+});
+</script>
+
+<template>
+  <Textarea v-model:value="content" :rows="5" placeholder="请输入内容" />
+</template>
--- a/apps/web-antd/src/views/mp/components/wx-reply/components/TabVideo.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/components/TabVideo.vue
@@ -0,0 +1,192 @@
+<script lang="ts" setup>
+import type { Reply } from './types';
+
+import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
+
+import { computed, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import {
+  Button,
+  Col,
+  Input,
+  message,
+  Modal,
+  Row,
+  Upload,
+} from 'ant-design-vue';
+
+import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
+import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
+import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
+
+defineOptions({ name: 'TabVideo' });
+
+const props = defineProps<{
+  modelValue: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+
+const accessStore = useAccessStore();
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
+
+const reply = computed<Reply>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const showDialog = ref(false);
+const fileList = ref([]);
+const uploadData = reactive({
+  accountId: reply.value.accountId,
+  introduction: '',
+  title: '',
+  type: 'video',
+});
+
+function beforeVideoUpload(rawFile: UploadRawFile) {
+  return useBeforeUpload(UploadType.Video, 10)(rawFile);
+}
+
+// 自定义上传请求
+async function customRequest(options: any) {
+  const { file, onSuccess, onError } = options;
+
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('accountId', String(uploadData.accountId));
+  formData.append('type', uploadData.type);
+  formData.append('title', uploadData.title);
+  formData.append('introduction', uploadData.introduction);
+
+  try {
+    const response = await fetch(UPLOAD_URL, {
+      method: 'POST',
+      headers: HEADERS,
+      body: formData,
+    });
+
+    const result = await response.json();
+
+    if (result.code === 0) {
+      // 清空上传时的各种数据
+      fileList.value = [];
+      uploadData.title = '';
+      uploadData.introduction = '';
+
+      // 选择素材
+      selectMaterial(result.data);
+      message.success('上传成功');
+      onSuccess(result, file);
+    } else {
+      message.error(result.msg || '上传出错');
+      onError(new Error(result.msg || '上传失败'));
+    }
+  } catch (error) {
+    message.error('上传失败，请重试');
+    onError(error);
+  }
+}
+
+/** 选择素材后设置 */
+function selectMaterial(item: any) {
+  showDialog.value = false;
+
+  reply.value.mediaId = item.mediaId;
+  reply.value.url = item.url;
+  reply.value.name = item.name;
+
+  // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
+  if (item.title) {
+    reply.value.title = item.title || '';
+  }
+  if (item.introduction) {
+    reply.value.description = item.introduction || '';
+  }
+}
+</script>
+
+<template>
+  <div>
+    <Row :gutter="[0, 16]">
+      <Col :span="24">
+        <Input
+          :value="reply.title || undefined"
+          placeholder="请输入标题"
+          @update:value="(val) => (reply.title = val || null)"
+        />
+      </Col>
+      <Col :span="24">
+        <Input
+          :value="reply.description || undefined"
+          placeholder="请输入描述"
+          @update:value="(val) => (reply.description = val || null)"
+        />
+      </Col>
+      <Col :span="24">
+        <Row class="ope-row" justify="center">
+          <WxVideoPlayer v-if="reply.url" :url="reply.url" />
+        </Row>
+      </Col>
+      <Col :span="24">
+        <Row class="text-center" align="middle">
+          <!-- 选择素材 -->
+          <Col :span="12">
+            <Button type="primary" @click="showDialog = true">
+              素材库选择
+              <template #icon>
+                <IconifyIcon icon="mdi:check-circle" />
+              </template>
+            </Button>
+            <Modal
+              v-model:open="showDialog"
+              title="选择视频"
+              :width="1200"
+              :footer="null"
+              destroy-on-close
+            >
+              <WxMaterialSelect
+                type="video"
+                :account-id="reply.accountId"
+                @select-material="selectMaterial"
+              />
+            </Modal>
+          </Col>
+
+          <!-- 文件上传 -->
+          <Col :span="12">
+            <Upload
+              :custom-request="customRequest"
+              :multiple="true"
+              :max-count="1"
+              :file-list="fileList"
+              :before-upload="beforeVideoUpload"
+              :show-upload-list="false"
+            >
+              <Button type="primary">
+                新建视频
+                <template #icon>
+                  <IconifyIcon icon="mdi:upload" />
+                </template>
+              </Button>
+            </Upload>
+          </Col>
+        </Row>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.ope-row {
+  width: 100%;
+  padding-top: 10px;
+  text-align: center;
+}
+</style>
--- a/apps/web-antd/src/views/mp/components/wx-reply/components/TabVoice.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/components/TabVoice.vue
@@ -0,0 +1,216 @@
+<script lang="ts" setup>
+import type { Reply } from './types';
+
+import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
+
+import { computed, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
+
+import { WxMaterialSelect } from '#/views/mp/components/wx-material-select';
+import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
+import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
+
+defineOptions({ name: 'TabVoice' });
+
+const props = defineProps<{
+  modelValue: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+
+const accessStore = useAccessStore();
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
+
+const reply = computed<Reply>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const showDialog = ref(false);
+const fileList = ref([]);
+const uploadData = reactive({
+  accountId: reply.value.accountId,
+  introduction: '',
+  title: '',
+  type: 'voice',
+});
+
+function beforeVoiceUpload(rawFile: UploadRawFile) {
+  return useBeforeUpload(UploadType.Voice, 10)(rawFile);
+}
+
+// 自定义上传请求
+async function customRequest(options: any) {
+  const { file, onSuccess, onError } = options;
+
+  const formData = new FormData();
+  formData.append('file', file);
+  formData.append('accountId', String(uploadData.accountId));
+  formData.append('type', uploadData.type);
+  formData.append('title', uploadData.title);
+  formData.append('introduction', uploadData.introduction);
+
+  try {
+    const response = await fetch(UPLOAD_URL, {
+      method: 'POST',
+      headers: HEADERS,
+      body: formData,
+    });
+
+    const result = await response.json();
+
+    if (result.code === 0) {
+      // 清空上传时的各种数据
+      fileList.value = [];
+      uploadData.title = '';
+      uploadData.introduction = '';
+
+      // 上传好的文件，本质是个素材，所以可以进行选中
+      selectMaterial(result.data);
+      message.success('上传成功');
+      onSuccess(result, file);
+    } else {
+      message.error(result.msg || '上传出错');
+      onError(new Error(result.msg || '上传失败'));
+    }
+  } catch (error) {
+    message.error('上传失败，请重试');
+    onError(error);
+  }
+}
+
+function onDelete() {
+  reply.value.mediaId = null;
+  reply.value.url = null;
+  reply.value.name = null;
+}
+
+function selectMaterial(item: Reply) {
+  showDialog.value = false;
+  reply.value.mediaId = item.mediaId;
+  reply.value.url = item.url;
+  reply.value.name = item.name;
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="reply.url" class="select-item">
+      <p class="item-name">{{ reply.name }}</p>
+      <Row class="ope-row" justify="center">
+        <WxVoicePlayer :url="reply.url" />
+      </Row>
+      <Row class="ope-row" justify="center">
+        <Button danger shape="circle" @click="onDelete">
+          <template #icon>
+            <IconifyIcon icon="mdi:delete" />
+          </template>
+        </Button>
+      </Row>
+    </div>
+
+    <Row v-else class="text-center">
+      <!-- 选择素材 -->
+      <Col :span="12" class="col-select">
+        <Button type="primary" @click="showDialog = true">
+          素材库选择
+          <template #icon>
+            <IconifyIcon icon="mdi:check-circle" />
+          </template>
+        </Button>
+        <Modal
+          v-model:open="showDialog"
+          title="选择语音"
+          :width="1200"
+          :footer="null"
+          destroy-on-close
+        >
+          <WxMaterialSelect
+            type="voice"
+            :account-id="reply.accountId"
+            @select-material="selectMaterial"
+          />
+        </Modal>
+      </Col>
+
+      <!-- 文件上传 -->
+      <Col :span="12" class="col-add">
+        <Upload
+          :custom-request="customRequest"
+          :multiple="true"
+          :max-count="1"
+          :file-list="fileList"
+          :before-upload="beforeVoiceUpload"
+          :show-upload-list="false"
+        >
+          <Button type="primary">
+            点击上传
+            <template #icon>
+              <IconifyIcon icon="mdi:upload" />
+            </template>
+          </Button>
+        </Upload>
+        <div class="upload-tip">
+          格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
+        </div>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.select-item {
+  padding: 10px;
+  margin: 0 auto 10px;
+  border: 1px solid #eaeaea;
+}
+
+.item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.ope-row {
+  width: 100%;
+  padding-top: 10px;
+  text-align: center;
+}
+
+.col-select,
+.col-add {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 160px;
+  padding: 50px 0;
+  border: 1px solid rgb(234 234 234);
+}
+
+.col-select {
+  width: 49.5%;
+}
+
+.col-add {
+  float: right;
+  width: 49.5%;
+}
+
+.upload-tip {
+  margin-top: 8px;
+  font-size: 12px;
+  line-height: 18px;
+  color: #666;
+  text-align: center;
+}
+</style>
--- a/apps/web-antd/src/views/mp/components/wx-reply/components/types.ts
+++ b/apps/web-antd/src/views/mp/components/wx-reply/components/types.ts
@@ -0,0 +1,54 @@
+import type { Ref } from 'vue';
+
+import { unref } from 'vue';
+
+export enum ReplyType {
+  Image = 'image',
+  Music = 'music',
+  News = 'news',
+  Text = 'text',
+  Video = 'video',
+  Voice = 'voice',
+}
+
+export interface Reply {
+  accountId: number;
+  articles?: any[];
+  content?: null | string;
+  description?: null | string;
+  hqMusicUrl?: null | string;
+  introduction?: null | string;
+  mediaId?: null | string;
+  musicUrl?: null | string;
+  name?: null | string;
+  thumbMediaId?: null | string;
+  thumbMediaUrl?: null | string;
+  title?: null | string;
+  type: ReplyType;
+  url?: null | string;
+}
+
+export enum NewsType {
+  Draft = '2',
+  Published = '1',
+}
+
+/** 利用旧的reply[accountId, type]初始化新的Reply */
+export const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
+  return {
+    accountId: unref(old).accountId,
+    articles: [],
+    content: null,
+    description: null,
+    hqMusicUrl: null,
+    introduction: null,
+    mediaId: null,
+    musicUrl: null,
+    name: null,
+    thumbMediaId: null,
+    thumbMediaUrl: null,
+    title: null,
+    type: unref(old).type,
+    url: null,
+  };
+};
--- a/apps/web-antd/src/views/mp/components/wx-reply/index.ts
+++ b/apps/web-antd/src/views/mp/components/wx-reply/index.ts
@@ -0,0 +1,4 @@
+export type { NewsType, Reply, ReplyType } from './components/types';
+export { createEmptyReply } from './components/types';
+
+export { default as WxReplySelect } from './main.vue';
--- a/apps/web-antd/src/views/mp/components/wx-reply/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/main.vue
@@ -0,0 +1,234 @@
+<!--
+  - Copyright (C) 2018-2019
+  - All rights reserved, Designed By www.joolun.com
+  芋道源码：
+  ① 移除多余的 rep 为前缀的变量，让 message 消息更简单
+  ② 代码优化，补充注释，提升阅读性
+  ③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入
+  ④ 支持发送【视频】消息时，支持新建视频
+-->
+<script lang="ts" setup>
+import type { Reply } from './components/types';
+
+import { computed, ref, unref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Row, Tabs } from 'ant-design-vue';
+
+import TabImage from './components/TabImage.vue';
+import TabMusic from './components/TabMusic.vue';
+import TabNews from './components/TabNews.vue';
+import TabText from './components/TabText.vue';
+import TabVideo from './components/TabVideo.vue';
+import TabVoice from './components/TabVoice.vue';
+import { createEmptyReply, NewsType, ReplyType } from './components/types';
+
+defineOptions({ name: 'WxReplySelect' });
+
+const props = withDefaults(defineProps<Props>(), {
+  newsType: undefined,
+});
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+
+interface Props {
+  modelValue: Reply;
+  newsType?: NewsType;
+}
+const reply = computed<Reply>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+// 作为多个标签保存各自Reply的缓存
+const tabCache = new Map<ReplyType, Reply>();
+// 采用独立的ref来保存当前tab，避免在watch标签变化，对reply进行赋值会产生了循环调用
+const currentTab = ref<ReplyType>(props.modelValue.type || ReplyType.Text);
+
+watch(
+  currentTab,
+  (newTab, oldTab) => {
+    // 第一次进入：oldTab 为 undefined
+    // 判断 newTab 是因为 Reply 为 Partial
+    if (oldTab === undefined || newTab === undefined) {
+      return;
+    }
+
+    tabCache.set(oldTab, unref(reply));
+
+    // 从缓存里面取出新tab内容，有则覆盖Reply，没有则创建空Reply
+    const temp = tabCache.get(newTab);
+    if (temp) {
+      reply.value = temp;
+    } else {
+      const newData = createEmptyReply(reply);
+      newData.type = newTab;
+      reply.value = newData;
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
+/** 清除除了`type`, `accountId`的字段 */
+function clear() {
+  reply.value = createEmptyReply(reply);
+}
+
+defineExpose({
+  clear,
+});
+</script>
+
+<template>
+  <Tabs v-model:active-key="currentTab" type="card">
+    <!-- 类型 1：文本 -->
+    <Tabs.TabPane :key="ReplyType.Text">
+      <template #tab>
+        <Row align="middle">
+          <IconifyIcon icon="mdi:text" class="mr-1" />
+          文本
+        </Row>
+      </template>
+      <TabText v-model="reply.content" />
+    </Tabs.TabPane>
+
+    <!-- 类型 2：图片 -->
+    <Tabs.TabPane :key="ReplyType.Image">
+      <template #tab>
+        <Row align="middle">
+          <IconifyIcon icon="mdi:image" class="mr-1" />
+          图片
+        </Row>
+      </template>
+      <TabImage v-model="reply" />
+    </Tabs.TabPane>
+
+    <!-- 类型 3：语音 -->
+    <Tabs.TabPane :key="ReplyType.Voice">
+      <template #tab>
+        <Row align="middle">
+          <IconifyIcon icon="mdi:microphone" class="mr-1" />
+          语音
+        </Row>
+      </template>
+      <TabVoice v-model="reply" />
+    </Tabs.TabPane>
+
+    <!-- 类型 4：视频 -->
+    <Tabs.TabPane :key="ReplyType.Video">
+      <template #tab>
+        <Row align="middle">
+          <IconifyIcon icon="mdi:video" class="mr-1" />
+          视频
+        </Row>
+      </template>
+      <TabVideo v-model="reply" />
+    </Tabs.TabPane>
+
+    <!-- 类型 5：图文 -->
+    <Tabs.TabPane :key="ReplyType.News">
+      <template #tab>
+        <Row align="middle">
+          <IconifyIcon icon="mdi:newspaper" class="mr-1" />
+          图文
+        </Row>
+      </template>
+      <TabNews v-model="reply" :news-type="newsType" />
+    </Tabs.TabPane>
+
+    <!-- 类型 6：音乐 -->
+    <Tabs.TabPane :key="ReplyType.Music">
+      <template #tab>
+        <Row align="middle">
+          <IconifyIcon icon="mdi:music" class="mr-1" />
+          音乐
+        </Row>
+      </template>
+      <TabMusic v-model="reply" />
+    </Tabs.TabPane>
+  </Tabs>
+</template>
+
+<style lang="scss" scoped>
+.select-item {
+  width: 280px;
+  padding: 10px;
+  margin: 0 auto 10px;
+  border: 1px solid #eaeaea;
+}
+
+.select-item2 {
+  padding: 10px;
+  margin: 0 auto 10px;
+  border: 1px solid #eaeaea;
+}
+
+.ope-row {
+  padding-top: 10px;
+  text-align: center;
+}
+
+.input-margin-bottom {
+  margin-bottom: 2%;
+}
+
+.item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 12px;
+  text-align: center;
+  white-space: nowrap;
+}
+
+.el-form-item__content {
+  line-height: unset !important;
+}
+
+.col-select {
+  width: 49.5%;
+  height: 160px;
+  padding: 50px 0;
+  border: 1px solid rgb(234 234 234);
+}
+
+.col-select2 {
+  height: 160px;
+  padding: 50px 0;
+  border: 1px solid rgb(234 234 234);
+}
+
+.col-add {
+  float: right;
+  width: 49.5%;
+  height: 160px;
+  padding: 50px 0;
+  border: 1px solid rgb(234 234 234);
+}
+
+.avatar-uploader-icon {
+  width: 100px !important;
+  height: 100px !important;
+  font-size: 28px;
+  line-height: 100px !important;
+  color: #8c939d;
+  text-align: center;
+  border: 1px solid #d9d9d9;
+}
+
+.material-img {
+  width: 100%;
+}
+
+.thumb-div {
+  display: inline-block;
+  text-align: center;
+}
+
+.item-infos {
+  width: 30%;
+  margin: auto;
+}
+</style>
--- a/apps/web-antd/src/views/mp/components/wx-video-play/index.ts
+++ b/apps/web-antd/src/views/mp/components/wx-video-play/index.ts
@@ -0,0 +1 @@
+export { default as WxVideoPlayer } from './main.vue';
--- a/apps/web-antd/src/views/mp/components/wx-video-play/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-video-play/main.vue
@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { VideoPlayer } from '@videojs-player/vue';
+import { Modal } from 'ant-design-vue';
+
+import 'video.js/dist/video-js.css';
+
+defineOptions({ name: 'WxVideoPlayer' });
+
+const props = defineProps<{
+  url: string;
+}>();
+
+const dialogVideo = ref(false);
+
+function playVideo() {
+  dialogVideo.value = true;
+}
+</script>
+
+<template>
+  <!-- 微信消息 - 视频播放 -->
+  <div class="cursor-pointer" @click="playVideo()">
+    <!-- 提示 -->
+    <div class="flex items-center">
+      <IconifyIcon icon="mdi:play-circle" :size="32" class="mr-2" />
+      <p class="text-sm">点击播放视频</p>
+    </div>
+
+    <!-- 弹窗播放 -->
+    <Modal
+      v-model:open="dialogVideo"
+      title="视频播放"
+      :footer="null"
+      :width="850"
+      destroy-on-close
+    >
+      <VideoPlayer
+        v-if="dialogVideo"
+        class="video-player vjs-big-play-centered"
+        :src="props.url"
+        poster=""
+        crossorigin="anonymous"
+        controls
+        playsinline
+        :volume="0.6"
+        :width="800"
+        :playback-rates="[0.7, 1.0, 1.5, 2.0]"
+      />
+    </Modal>
+  </div>
+</template>
--- a/apps/web-antd/src/views/mp/components/wx-voice-play/index.ts
+++ b/apps/web-antd/src/views/mp/components/wx-voice-play/index.ts
@@ -0,0 +1 @@
+export { default as WxVoicePlayer } from './main.vue';
--- a/apps/web-antd/src/views/mp/components/wx-voice-play/main.vue
+++ b/apps/web-antd/src/views/mp/components/wx-voice-play/main.vue
@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Tag } from 'ant-design-vue';
+// 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
+import BenzAMRRecorder from 'benz-amr-recorder';
+
+defineOptions({ name: 'WxVoicePlayer' });
+
+const props = withDefaults(
+  defineProps<{
+    content?: string; // 语音文本
+    url: string; // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
+  }>(),
+  {
+    content: '',
+  },
+);
+
+const amr = ref<any>();
+const playing = ref(false);
+const duration = ref<number>();
+
+/** 处理点击，播放或暂停 */
+function playVoice() {
+  // 情况一：未初始化，则创建 BenzAMRRecorder
+  if (amr.value === undefined) {
+    amrInit();
+    return;
+  }
+  // 情况二：已经初始化，则根据情况播放或暂时
+  if (amr.value.isPlaying()) {
+    amrStop();
+  } else {
+    amrPlay();
+  }
+}
+
+/** 音频初始化 */
+function amrInit() {
+  amr.value = new BenzAMRRecorder();
+  // 设置播放
+  amr.value.initWithUrl(props.url).then(() => {
+    amrPlay();
+    duration.value = amr.value.getDuration();
+  });
+  // 监听暂停
+  amr.value.onEnded(() => {
+    playing.value = false;
+  });
+}
+
+/** 音频播放 */
+function amrPlay() {
+  playing.value = true;
+  amr.value.play();
+}
+
+/** 音频暂停 */
+function amrStop() {
+  playing.value = false;
+  amr.value.stop();
+}
+</script>
+
+<template>
+  <!-- 微信消息 - 语音播放 -->
+  <div class="wx-voice-div cursor-pointer" @click="playVoice">
+    <div class="flex items-center">
+      <IconifyIcon v-if="playing !== true" icon="mdi:play-circle" :size="32" />
+      <IconifyIcon v-else icon="mdi:pause-circle" :size="32" />
+      <span v-if="duration" class="amr-duration">{{ duration }} 秒</span>
+    </div>
+    <div v-if="content" class="mt-2">
+      <Tag color="success">语音识别</Tag>
+      {{ content }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.wx-voice-div {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-width: 120px;
+  min-height: 50px;
+  padding: 8px 12px;
+  background-color: #eaeaea;
+  border-radius: 10px;
+}
+
+.amr-duration {
+  margin-left: 8px;
+  font-size: 12px;
+}
+</style>
--- a/apps/web-antd/src/views/mp/hooks/useUpload.ts
+++ b/apps/web-antd/src/views/mp/hooks/useUpload.ts
@@ -0,0 +1,74 @@
+import { message } from 'ant-design-vue';
+
+import { $t } from '#/locales';
+
+export enum UploadType {
+  Image = 'image',
+  Video = 'video',
+  Voice = 'voice',
+}
+
+interface UploadTypeConfig {
+  allowTypes: string[];
+  maxSizeMB: number;
+  name: string;
+}
+
+export interface UploadRawFile {
+  name: string;
+  size: number;
+  type: string;
+}
+
+const UPLOAD_CONFIGS: Record<UploadType, UploadTypeConfig> = {
+  [UploadType.Image]: {
+    allowTypes: [
+      'image/jpeg',
+      'image/png',
+      'image/gif',
+      'image/bmp',
+      'image/jpg',
+    ],
+    maxSizeMB: 2,
+    name: '图片',
+  },
+  [UploadType.Video]: {
+    allowTypes: ['video/mp4'],
+    maxSizeMB: 10,
+    name: '视频',
+  },
+  [UploadType.Voice]: {
+    allowTypes: [
+      'audio/mp3',
+      'audio/mpeg',
+      'audio/wma',
+      'audio/wav',
+      'audio/amr',
+    ],
+    maxSizeMB: 2,
+    name: '语音',
+  },
+};
+
+export const useBeforeUpload = (type: UploadType, maxSizeMB?: number) => {
+  const fn = (rawFile: UploadRawFile): boolean => {
+    const config = UPLOAD_CONFIGS[type];
+    const finalMaxSize = maxSizeMB ?? config.maxSizeMB;
+
+    // 格式不正确
+    if (!config.allowTypes.includes(rawFile.type)) {
+      message.error($t('mp.upload.invalidFormat', [config.name]));
+      return false;
+    }
+
+    // 大小不正确
+    if (rawFile.size / 1024 / 1024 > finalMaxSize) {
+      message.error($t('mp.upload.maxSize', [config.name, finalMaxSize]));
+      return false;
+    }
+
+    return true;
+  };
+
+  return fn;
+};
--- a/apps/web-antd/src/views/mp/material/components/ImageTable.vue
+++ b/apps/web-antd/src/views/mp/material/components/ImageTable.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { useAccess } from '@vben/access';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Spin } from 'ant-design-vue';
+
+const props = defineProps<{
+  list: any[];
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  delete: [v: number];
+}>();
+
+const { hasAccessByCodes } = useAccess();
+</script>
+
+<template>
+  <Spin :spinning="props.loading">
+    <div class="waterfall">
+      <div v-for="item in props.list" :key="item.id" class="waterfall-item">
+        <a :href="item.url" target="_blank">
+          <img :src="item.url" class="material-img" />
+          <div class="item-name">{{ item.name }}</div>
+        </a>
+        <div class="flex justify-center">
+          <Button
+            v-if="hasAccessByCodes(['mp:material:delete'])"
+            danger
+            shape="circle"
+            type="primary"
+            @click="emit('delete', item.id)"
+          >
+            <template #icon>
+              <IconifyIcon icon="mdi:delete" />
+            </template>
+          </Button>
+        </div>
+      </div>
+    </div>
+  </Spin>
+</template>
+
+<style lang="scss" scoped>
+@media (width >= 992px) and (width <= 1300px) {
+  .waterfall {
+    column-count: 3;
+  }
+}
+
+@media (width >= 768px) and (width <= 991px) {
+  .waterfall {
+    column-count: 2;
+  }
+}
+
+@media (width <= 767px) {
+  .waterfall {
+    column-count: 1;
+  }
+}
+
+.waterfall {
+  column-gap: 10px;
+  width: 100%;
+  margin-top: 10px;
+  column-count: 5;
+}
+
+.waterfall-item {
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #eaeaea;
+  break-inside: avoid;
+}
+
+.material-img {
+  width: 100%;
+}
+
+.item-name {
+  line-height: 30px;
+}
+</style>
--- a/apps/web-antd/src/views/mp/material/components/UploadFile.vue
+++ b/apps/web-antd/src/views/mp/material/components/UploadFile.vue
@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import type { UploadProps } from 'ant-design-vue';
+
+import type { UploadData } from './upload';
+
+import { inject, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, message, Upload } from 'ant-design-vue';
+
+import {
+  beforeImageUpload,
+  beforeVoiceUpload,
+  HEADERS,
+  UPLOAD_URL,
+  UploadType,
+} from './upload';
+
+const props = defineProps<{ type: UploadType }>();
+
+const emit = defineEmits<{
+  uploaded: [v: void];
+}>();
+
+const accountId = inject<number>('accountId');
+
+const fileList = ref<any[]>([]);
+const uploadData: UploadData = reactive({
+  accountId: accountId!,
+  introduction: '',
+  title: '',
+  type: props.type,
+});
+
+/** 上传前检查 */
+const onBeforeUpload =
+  props.type === UploadType.Image ? beforeImageUpload : beforeVoiceUpload;
+
+/** 自定义上传 */
+const customRequest: UploadProps['customRequest'] = async function (options) {
+  const { file, onError, onSuccess } = options;
+
+  const formData = new FormData();
+  formData.append('file', file as File);
+  formData.append('type', uploadData.type);
+  formData.append('title', uploadData.title);
+  formData.append('introduction', uploadData.introduction);
+  formData.append('accountId', String(uploadData.accountId));
+
+  try {
+    const response = await fetch(UPLOAD_URL, {
+      body: formData,
+      headers: HEADERS,
+      method: 'POST',
+    });
+
+    const res = await response.json();
+
+    if (res.code !== 0) {
+      message.error(`上传出错：${res.msg}`);
+      onError?.(new Error(res.msg));
+      return;
+    }
+
+    // 清空上传时的各种数据
+    fileList.value = [];
+    uploadData.title = '';
+    uploadData.introduction = '';
+
+    message.success('上传成功');
+    onSuccess?.(res);
+    emit('uploaded');
+  } catch (error: any) {
+    message.error(`上传失败: ${error.message}`);
+    onError?.(error);
+  }
+};
+</script>
+
+<template>
+  <Upload
+    :action="UPLOAD_URL"
+    :before-upload="onBeforeUpload"
+    :custom-request="customRequest"
+    :file-list="fileList"
+    :headers="HEADERS"
+    :multiple="true"
+    class="mb-4"
+  >
+    <Button type="primary">
+      <IconifyIcon icon="mdi:upload" class="mr-1" />
+      点击上传
+    </Button>
+    <template #itemRender="{ file, actions }">
+      <div class="flex items-center">
+        <span>{{ file.name }}</span>
+        <Button type="link" size="small" @click="actions.remove"> 删除 </Button>
+      </div>
+    </template>
+  </Upload>
+  <div v-if="$slots.default" class="ml-1 text-sm text-gray-500">
+    <slot></slot>
+  </div>
+</template>
--- a/apps/web-antd/src/views/mp/material/components/UploadVideo.vue
+++ b/apps/web-antd/src/views/mp/material/components/UploadVideo.vue
@@ -0,0 +1,164 @@
+<script lang="ts" setup>
+import type { FormInstance, UploadProps } from 'ant-design-vue';
+
+import type { UploadData } from './upload';
+
+import { inject, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Divider,
+  Form,
+  Input,
+  message,
+  Modal,
+  Upload,
+} from 'ant-design-vue';
+
+import { beforeVideoUpload, HEADERS, UPLOAD_URL, UploadType } from './upload';
+
+withDefaults(
+  defineProps<{
+    open?: boolean;
+  }>(),
+  {
+    open: false,
+  },
+);
+
+const emit = defineEmits<{
+  'update:open': [v: boolean];
+  uploaded: [v: void];
+}>();
+
+const accountId = inject<number>('accountId');
+
+const uploadRules = {
+  introduction: [
+    { message: '请输入描述', required: true, trigger: 'blur' } as const,
+  ],
+  title: [{ message: '请输入标题', required: true, trigger: 'blur' } as const],
+};
+
+function handleCancel() {
+  emit('update:open', false);
+}
+
+const fileList = ref<any[]>([]);
+
+const uploadData: UploadData = reactive({
+  accountId: accountId!,
+  introduction: '',
+  title: '',
+  type: UploadType.Video,
+});
+
+const uploadFormRef = ref<FormInstance | null>(null);
+const uploadVideoRef = ref<any>(null);
+
+async function submitVideo() {
+  try {
+    await uploadFormRef.value?.validate();
+    uploadVideoRef.value?.submit();
+  } catch {
+    // Validation failed
+  }
+}
+
+/** 自定义上传 */
+const customRequest: UploadProps['customRequest'] = async function (options) {
+  const { file, onError, onSuccess } = options;
+
+  const formData = new FormData();
+  formData.append('file', file as File);
+  formData.append('type', uploadData.type);
+  formData.append('title', uploadData.title);
+  formData.append('introduction', uploadData.introduction);
+  formData.append('accountId', String(uploadData.accountId));
+
+  try {
+    const response = await fetch(UPLOAD_URL, {
+      body: formData,
+      headers: HEADERS,
+      method: 'POST',
+    });
+
+    const res = await response.json();
+
+    if (res.code !== 0) {
+      message.error(`上传出错：${res.msg}`);
+      onError?.(new Error(res.msg));
+      return;
+    }
+
+    // 清空上传时的各种数据
+    fileList.value = [];
+    uploadData.title = '';
+    uploadData.introduction = '';
+
+    emit('update:open', false);
+    message.success('上传成功');
+    onSuccess?.(res);
+    emit('uploaded');
+  } catch (error: any) {
+    message.error(`上传失败: ${error.message}`);
+    onError?.(error);
+  }
+};
+</script>
+
+<template>
+  <Modal
+    :open="open"
+    title="新建视频"
+    width="600px"
+    @cancel="handleCancel"
+    @ok="submitVideo"
+  >
+    <Upload
+      ref="uploadVideoRef"
+      :action="UPLOAD_URL"
+      :auto-upload="false"
+      :before-upload="beforeVideoUpload"
+      :custom-request="customRequest"
+      :file-list="fileList"
+      :headers="HEADERS"
+      :limit="1"
+      :multiple="true"
+      class="mb-4"
+    >
+      <Button type="primary">
+        <IconifyIcon icon="mdi:video-plus" class="mr-1" />
+        选择视频
+      </Button>
+    </Upload>
+    <div class="mb-4 ml-1 text-sm text-gray-500">
+      格式支持 MP4，文件大小不超过 10MB
+    </div>
+
+    <Divider />
+
+    <Form
+      ref="uploadFormRef"
+      :model="uploadData"
+      :rules="uploadRules"
+      layout="vertical"
+    >
+      <Form.Item label="标题" name="title">
+        <Input
+          v-model:value="uploadData.title"
+          placeholder="标题将展示在相关播放页面，建议填写清晰、准确、生动的标题"
+        />
+      </Form.Item>
+      <Form.Item label="描述" name="introduction">
+        <Input.TextArea
+          v-model:value="uploadData.introduction"
+          :rows="3"
+          placeholder="介绍语将展示在相关播放页面，建议填写简洁明确、有信息量的内容"
+        />
+      </Form.Item>
+    </Form>
+  </Modal>
+</template>
--- a/apps/web-antd/src/views/mp/material/components/VideoTable.vue
+++ b/apps/web-antd/src/views/mp/material/components/VideoTable.vue
@@ -0,0 +1,141 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { watch } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { IconifyIcon } from '@vben/icons';
+import { formatDate2 } from '@vben/utils';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
+
+const props = defineProps<{
+  list: any[];
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  delete: [v: number];
+}>();
+
+const { hasAccessByCodes } = useAccess();
+
+const columns: VxeTableGridOptions<any>['columns'] = [
+  {
+    field: 'mediaId',
+    title: '编号',
+    align: 'center',
+    width: 160,
+  },
+  {
+    field: 'name',
+    title: '文件名',
+    align: 'center',
+    minWidth: 200,
+  },
+  {
+    field: 'title',
+    title: '标题',
+    align: 'center',
+    minWidth: 200,
+  },
+  {
+    field: 'introduction',
+    title: '介绍',
+    align: 'center',
+    minWidth: 220,
+  },
+  {
+    field: 'video',
+    title: '视频',
+    align: 'center',
+    width: 220,
+    slots: { default: 'video' },
+  },
+  {
+    field: 'createTime',
+    title: '上传时间',
+    align: 'center',
+    width: 180,
+    slots: { default: 'createTime' },
+  },
+  {
+    field: 'actions',
+    title: '操作',
+    align: 'center',
+    fixed: 'right',
+    width: 180,
+    slots: { default: 'actions' },
+  },
+];
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    showOverflow: 'tooltip',
+  } as VxeTableGridOptions<any>,
+});
+
+function handleDownload(url: string) {
+  window.open(url, '_blank');
+}
+
+watch(
+  () => props.list,
+  (list: any[]) => {
+    const data = Array.isArray(list) ? list : [];
+    if (gridApi.grid?.loadData) {
+      gridApi.grid.loadData(data);
+    } else {
+      gridApi.setGridOptions({ data });
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.loading,
+  (loading: boolean) => {
+    gridApi.setLoading(!!loading);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Grid class="mt-4">
+    <template #video="{ row }">
+      <WxVideoPlayer v-if="row.url" :url="row.url" />
+    </template>
+    <template #createTime="{ row }">
+      {{ formatDate2(row.createTime) }}
+    </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleDownload(row.url)">
+        <IconifyIcon icon="mdi:download" />
+        下载
+      </Button>
+      <Button
+        v-if="hasAccessByCodes(['mp:material:delete'])"
+        danger
+        type="link"
+        @click="emit('delete', row.id)"
+      >
+        <IconifyIcon icon="mdi:delete" />
+        删除
+      </Button>
+    </template>
+  </Grid>
+</template>
--- a/apps/web-antd/src/views/mp/material/components/VoiceTable.vue
+++ b/apps/web-antd/src/views/mp/material/components/VoiceTable.vue
@@ -0,0 +1,129 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { watch } from 'vue';
+
+import { useAccess } from '@vben/access';
+import { IconifyIcon } from '@vben/icons';
+import { formatDate2 } from '@vben/utils';
+
+import { Button } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
+
+const props = defineProps<{
+  list: any[];
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  delete: [v: number];
+}>();
+
+const { hasAccessByCodes } = useAccess();
+
+const columns: VxeTableGridOptions<any>['columns'] = [
+  {
+    field: 'mediaId',
+    title: '编号',
+    align: 'center',
+    width: 160,
+  },
+  {
+    field: 'name',
+    title: '文件名',
+    align: 'center',
+    minWidth: 200,
+  },
+  {
+    field: 'voice',
+    title: '语音',
+    align: 'center',
+    width: 220,
+    slots: { default: 'voice' },
+  },
+  {
+    field: 'createTime',
+    title: '上传时间',
+    align: 'center',
+    width: 180,
+    slots: { default: 'createTime' },
+  },
+  {
+    field: 'actions',
+    title: '操作',
+    align: 'center',
+    fixed: 'right',
+    width: 160,
+    slots: { default: 'actions' },
+  },
+];
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    showOverflow: 'tooltip',
+  } as VxeTableGridOptions<any>,
+});
+
+function handleDownload(url: string) {
+  window.open(url, '_blank');
+}
+
+watch(
+  () => props.list,
+  (list: any[]) => {
+    const data = Array.isArray(list) ? list : [];
+    if (gridApi.grid?.loadData) {
+      gridApi.grid.loadData(data);
+    } else {
+      gridApi.setGridOptions({ data });
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.loading,
+  (loading: boolean) => {
+    gridApi.setLoading(!!loading);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Grid class="mt-4">
+    <template #voice="{ row }">
+      <WxVoicePlayer v-if="row.url" :url="row.url" />
+    </template>
+    <template #createTime="{ row }">
+      {{ formatDate2(row.createTime) }}
+    </template>
+    <template #actions="{ row }">
+      <Button type="link" @click="handleDownload(row.url)">
+        <IconifyIcon icon="mdi:download" />
+        下载
+      </Button>
+      <Button
+        v-if="hasAccessByCodes(['mp:material:delete'])"
+        danger
+        type="link"
+        @click="emit('delete', row.id)"
+      >
+        <IconifyIcon icon="mdi:delete" />
+        删除
+      </Button>
+    </template>
+  </Grid>
+</template>
--- a/apps/web-antd/src/views/mp/material/components/upload.ts
+++ b/apps/web-antd/src/views/mp/material/components/upload.ts
@@ -0,0 +1,46 @@
+import type { UploadProps } from 'ant-design-vue';
+
+import type { UploadRawFile } from '#/views/mp/hooks/useUpload';
+
+import { useAccessStore } from '@vben/stores';
+
+import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
+
+const accessStore = useAccessStore();
+const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` }; // 请求头
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-permanent`; // 上传地址
+
+interface UploadData {
+  accountId: number;
+  introduction: string;
+  title: string;
+  type: UploadType;
+}
+
+const beforeImageUpload: UploadProps['beforeUpload'] = function (
+  rawFile: UploadRawFile,
+) {
+  return useBeforeUpload(UploadType.Image, 2)(rawFile);
+};
+
+const beforeVoiceUpload: UploadProps['beforeUpload'] = function (
+  rawFile: UploadRawFile,
+) {
+  return useBeforeUpload(UploadType.Voice, 2)(rawFile);
+};
+
+const beforeVideoUpload: UploadProps['beforeUpload'] = function (
+  rawFile: UploadRawFile,
+) {
+  return useBeforeUpload(UploadType.Video, 10)(rawFile);
+};
+
+export {
+  beforeImageUpload,
+  beforeVideoUpload,
+  beforeVoiceUpload,
+  HEADERS,
+  UPLOAD_URL,
+  type UploadData,
+  UploadType,
+};
--- a/apps/web-antd/src/views/mp/material/index.vue
+++ b/apps/web-antd/src/views/mp/material/index.vue
@@ -1,29 +1,212 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import { provide, reactive, ref } from 'vue';

-import { Button } from 'ant-design-vue';
+import { useAccess } from '@vben/access';
+import { Page } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Card,
+  Form,
+  message,
+  Modal,
+  Pagination,
+  Tabs,
+} from 'ant-design-vue';
+
+import * as MpMaterialApi from '#/api/mp/material';
+import { WxAccountSelect } from '#/views/mp/components/wx-account-select';
+
+import ImageTable from './components/ImageTable.vue';
+import { UploadType } from './components/upload';
+import UploadFile from './components/UploadFile.vue';
+import UploadVideo from './components/UploadVideo.vue';
+import VideoTable from './components/VideoTable.vue';
+import VoiceTable from './components/VoiceTable.vue';
+
+defineOptions({ name: 'MpMaterial' });
+
+const { hasAccessByCodes } = useAccess();
+
+const type = ref<UploadType>(UploadType.Image); // 素材类型
+const loading = ref(false); // 遮罩层
+const list = ref<any[]>([]); // 数据列表
+const total = ref(0); // 总条数
+
+const accountId = ref(-1);
+provide('accountId', accountId);
+
+// 查询参数
+const queryParams = reactive({
+  accountId,
+  pageNo: 1,
+  pageSize: 10,
+  permanent: true,
+});
+const showCreateVideo = ref(false); // 是否新建视频的弹窗
+
+/** 侦听公众号变化 */
+function onAccountChanged(id: number) {
+  accountId.value = id;
+  queryParams.accountId = id;
+  queryParams.pageNo = 1;
+  getList();
+}
+
+/** 查询列表 */
+async function getList() {
+  loading.value = true;
+  try {
+    const data = await MpMaterialApi.getMaterialPage({
+      ...queryParams,
+      type: type.value,
+    });
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.pageNo = 1;
+  getList();
+}
+
+/** 处理 tab 切换 */
+function onTabChange() {
+  // 提前清空数据，避免 tab 切换后显示垃圾数据
+  list.value = [];
+  total.value = 0;
+  // 从第一页开始查询
+  handleQuery();
+}
+
+/** 处理删除操作 */
+async function handleDelete(id: number) {
+  Modal.confirm({
+    content: '此操作将永久删除该文件, 是否继续?',
+    title: '提示',
+    async onOk() {
+      await MpMaterialApi.deletePermanentMaterial(id);
+      message.success('删除成功');
+      await getList();
+    },
+  });
+}
 </script>

 <template>
-  <Page>
-    <DocAlert title="公众号素材" url="https://doc.iocoder.cn/mp/material/" />
-    <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/material/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/material/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page
+    description="公众号素材"
+    doc-link="https://doc.iocoder.cn/mp/material/"
+    title="公众号素材"
+  >
+    <!-- 搜索工作栏 -->
+    <Card class="mb-4" :bordered="false">
+      <Form :model="queryParams" layout="inline">
+        <Form.Item label="公众号">
+          <WxAccountSelect @change="onAccountChanged" />
+        </Form.Item>
+      </Form>
+    </Card>
+
+    <Card :bordered="false">
+      <Tabs v-model:active-key="type" @change="onTabChange">
+        <!-- tab 1：图片  -->
+        <Tabs.TabPane :key="UploadType.Image">
+          <template #tab>
+            <span class="flex items-center">
+              <IconifyIcon icon="mdi:image" class="mr-1" />
+              图片
+            </span>
+          </template>
+          <UploadFile
+            v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
+            :type="UploadType.Image"
+            @uploaded="getList"
+          >
+            支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
+          </UploadFile>
+          <!-- 列表 -->
+          <ImageTable :list="list" :loading="loading" @delete="handleDelete" />
+          <!-- 分页组件 -->
+          <div class="mt-4 flex justify-end">
+            <Pagination
+              v-model:current="queryParams.pageNo"
+              v-model:page-size="queryParams.pageSize"
+              :total="total"
+              show-size-changer
+              @change="getList"
+              @show-size-change="getList"
+            />
+          </div>
+        </Tabs.TabPane>
+
+        <!-- tab 2：语音  -->
+        <Tabs.TabPane :key="UploadType.Voice">
+          <template #tab>
+            <span class="flex items-center">
+              <IconifyIcon icon="mdi:microphone" class="mr-1" />
+              语音
+            </span>
+          </template>
+          <UploadFile
+            v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
+            :type="UploadType.Voice"
+            @uploaded="getList"
+          >
+            格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
+          </UploadFile>
+          <!-- 列表 -->
+          <VoiceTable :list="list" :loading="loading" @delete="handleDelete" />
+          <!-- 分页组件 -->
+          <div class="mt-4 flex justify-end">
+            <Pagination
+              v-model:current="queryParams.pageNo"
+              v-model:page-size="queryParams.pageSize"
+              :total="total"
+              show-size-changer
+              @change="getList"
+              @show-size-change="getList"
+            />
+          </div>
+        </Tabs.TabPane>
+
+        <!-- tab 3：视频 -->
+        <Tabs.TabPane :key="UploadType.Video">
+          <template #tab>
+            <span class="flex items-center">
+              <IconifyIcon icon="mdi:video" class="mr-1" />
+              视频
+            </span>
+          </template>
+          <Button
+            v-if="hasAccessByCodes(['mp:material:upload-permanent'])"
+            type="primary"
+            @click="showCreateVideo = true"
+          >
+            新建视频
+          </Button>
+          <!-- 新建视频的弹窗 -->
+          <UploadVideo v-model:open="showCreateVideo" @uploaded="getList" />
+          <!-- 列表 -->
+          <VideoTable :list="list" :loading="loading" @delete="handleDelete" />
+          <!-- 分页组件 -->
+          <div class="mt-4 flex justify-end">
+            <Pagination
+              v-model:current="queryParams.pageNo"
+              v-model:page-size="queryParams.pageSize"
+              :total="total"
+              show-size-changer
+              @change="getList"
+              @show-size-change="getList"
+            />
+          </div>
+        </Tabs.TabPane>
+      </Tabs>
+    </Card>
  </Page>
 </template>
--- a/apps/web-antd/src/views/mp/message/MessageTable.vue
+++ b/apps/web-antd/src/views/mp/message/MessageTable.vue
@@ -0,0 +1,241 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { onMounted, watch } from 'vue';
+
+import { formatDate2 } from '@vben/utils';
+
+import { Button, Image, Tag } from 'ant-design-vue';
+
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
+import { WxLocation } from '#/views/mp/components/wx-location';
+import { MsgType } from '#/views/mp/components/wx-msg/types';
+import { WxMusic } from '#/views/mp/components/wx-music';
+import { WxNews } from '#/views/mp/components/wx-news';
+import { WxVideoPlayer } from '#/views/mp/components/wx-video-play';
+import { WxVoicePlayer } from '#/views/mp/components/wx-voice-play';
+
+const props = withDefaults(
+  defineProps<{
+    list?: any[];
+    loading?: boolean;
+  }>(),
+  {
+    list() {
+      return [];
+    },
+    loading: false,
+  },
+);
+
+const emit = defineEmits<{
+  (e: 'send', userId: number): void;
+}>();
+
+const columns: VxeTableGridOptions<any>['columns'] = [
+  {
+    field: 'createTime',
+    title: '发送时间',
+    width: 180,
+    align: 'center',
+    slots: { default: 'createTime' },
+  },
+  {
+    field: 'type',
+    title: '消息类型',
+    width: 80,
+    align: 'center',
+  },
+  {
+    field: 'sendFrom',
+    title: '发送方',
+    width: 80,
+    align: 'center',
+    slots: { default: 'sendFrom' },
+  },
+  {
+    field: 'openid',
+    title: '用户标识',
+    width: 300,
+    align: 'center',
+  },
+  {
+    field: 'content',
+    title: '内容',
+    align: 'left',
+    minWidth: 320,
+    slots: { default: 'content' },
+  },
+  {
+    field: 'actions',
+    title: '操作',
+    width: 120,
+    align: 'center',
+    fixed: 'right',
+    slots: { default: 'actions' },
+  },
+];
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    showOverflow: 'tooltip',
+  } as VxeTableGridOptions<any>,
+});
+
+function normalizeList(list?: any[]) {
+  return Array.isArray(list) ? list : [];
+}
+
+function updateGridData(data: any[]) {
+  if (gridApi.grid?.loadData) {
+    gridApi.grid.loadData(data);
+  } else {
+    gridApi.setGridOptions({ data });
+  }
+}
+
+onMounted(() => {
+  updateGridData(normalizeList(props.list));
+  gridApi.setLoading(!!props.loading);
+});
+
+watch(
+  () => props.list,
+  (list) => {
+    updateGridData(normalizeList(list));
+  },
+  { flush: 'post' },
+);
+
+watch(
+  () => props.loading,
+  (loading) => {
+    gridApi.setLoading(!!loading);
+  },
+);
+</script>
+
+<template>
+  <Grid>
+    <template #createTime="{ row }">
+      {{ formatDate2(row.createTime) }}
+    </template>
+
+    <template #sendFrom="{ row }">
+      <Tag v-if="row.sendFrom === 1" color="success">粉丝</Tag>
+      <Tag v-else color="default">公众号</Tag>
+    </template>
+
+    <template #content="{ row }">
+      <div v-if="row.type === MsgType.Event && row.event === 'subscribe'">
+        <Tag color="success">关注</Tag>
+      </div>
+      <div
+        v-else-if="row.type === MsgType.Event && row.event === 'unsubscribe'"
+      >
+        <Tag color="error">取消关注</Tag>
+      </div>
+      <div v-else-if="row.type === MsgType.Event && row.event === 'CLICK'">
+        <Tag>点击菜单</Tag>
+        【{{ row.eventKey }}】
+      </div>
+      <div v-else-if="row.type === MsgType.Event && row.event === 'VIEW'">
+        <Tag>点击菜单链接</Tag>
+        【{{ row.eventKey }}】
+      </div>
+      <div
+        v-else-if="
+          row.type === MsgType.Event && row.event === 'scancode_waitmsg'
+        "
+      >
+        <Tag>扫码结果</Tag>
+        【{{ row.eventKey }}】
+      </div>
+      <div
+        v-else-if="row.type === MsgType.Event && row.event === 'scancode_push'"
+      >
+        <Tag>扫码结果</Tag>
+        【{{ row.eventKey }}】
+      </div>
+      <div
+        v-else-if="row.type === MsgType.Event && row.event === 'pic_sysphoto'"
+      >
+        <Tag>系统拍照发图</Tag>
+      </div>
+      <div
+        v-else-if="
+          row.type === MsgType.Event && row.event === 'pic_photo_or_album'
+        "
+      >
+        <Tag>拍照或者相册</Tag>
+      </div>
+      <div v-else-if="row.type === MsgType.Event && row.event === 'pic_weixin'">
+        <Tag>微信相册</Tag>
+      </div>
+      <div
+        v-else-if="
+          row.type === MsgType.Event && row.event === 'location_select'
+        "
+      >
+        <Tag>选择地理位置</Tag>
+      </div>
+      <div v-else-if="row.type === MsgType.Event">
+        <Tag color="error">未知事件类型</Tag>
+      </div>
+
+      <div v-else-if="row.type === MsgType.Text">{{ row.content }}</div>
+      <div v-else-if="row.type === MsgType.Voice">
+        <WxVoicePlayer :url="row.mediaUrl" :content="row.recognition" />
+      </div>
+      <div v-else-if="row.type === MsgType.Image">
+        <a :href="row.mediaUrl" target="_blank">
+          <Image :src="row.mediaUrl" :width="100" :preview="false" />
+        </a>
+      </div>
+      <div v-else-if="row.type === MsgType.Video || row.type === 'shortvideo'">
+        <WxVideoPlayer :url="row.mediaUrl" class="mt-2" />
+      </div>
+      <div v-else-if="row.type === MsgType.Link">
+        <Tag>链接</Tag>
+        ：
+        <a :href="row.url" target="_blank">{{ row.title }}</a>
+      </div>
+      <div v-else-if="row.type === MsgType.Location">
+        <WxLocation
+          :label="row.label"
+          :location-y="row.locationY"
+          :location-x="row.locationX"
+        />
+      </div>
+      <div v-else-if="row.type === MsgType.Music">
+        <WxMusic
+          :title="row.title"
+          :description="row.description"
+          :thumb-media-url="row.thumbMediaUrl"
+          :music-url="row.musicUrl"
+          :hq-music-url="row.hqMusicUrl"
+        />
+      </div>
+      <div v-else-if="row.type === MsgType.News">
+        <WxNews :articles="row.articles" />
+      </div>
+      <div v-else>
+        <Tag color="error">未知消息类型</Tag>
+      </div>
+    </template>
+
+    <template #actions="{ row }">
+      <Button type="link" @click="emit('send', row.userId)"> 消息 </Button>
+    </template>
+  </Grid>
+</template>
--- a/apps/web-antd/src/views/mp/message/index.vue
+++ b/apps/web-antd/src/views/mp/message/index.vue
@@ -1,28 +1,201 @@
 <script lang="ts" setup>
-import { Page } from '@vben/common-ui';
+import type { Dayjs } from 'dayjs';

-import { Button } from 'ant-design-vue';
+import { reactive, ref } from 'vue';
+
+import { Page } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  DatePicker,
+  Form,
+  FormItem,
+  Input,
+  Modal,
+  Select,
+} from 'ant-design-vue';
+
+import { getMessagePage } from '#/api/mp/message';
+import { WxAccountSelect } from '#/views/mp/components/wx-account-select';
+import { WxMsg } from '#/views/mp/components/wx-msg';
+import { MsgType } from '#/views/mp/components/wx-msg/types';
+
+import MessageTable from './MessageTable.vue';
+
+defineOptions({ name: 'MpMessage' });
+
+const loading = ref(false);
+const total = ref(0); // 数据的总页数
+const list = ref<any[]>([]); // 当前页的列表数据
+
+// 搜索参数
+const queryParams = reactive<{
+  accountId: number;
+  createTime: [Dayjs, Dayjs] | undefined;
+  openid: string;
+  pageNo: number;
+  pageSize: number;
+  type: string;
+}>({
+  accountId: -1,
+  createTime: undefined,
+  openid: '',
+  pageNo: 1,
+  pageSize: 10,
+  type: MsgType.Text,
+});
+
+const queryFormRef = ref(); // 搜索的表单
+
+// 消息对话框
+const messageBoxVisible = ref(false);
+const messageBoxUserId = ref(0);
+
+/** 侦听accountId */
+function onAccountChanged(id: number) {
+  queryParams.accountId = id;
+  queryParams.pageNo = 1;
+  handleQuery();
+}
+
+/** 查询列表 */
+function handleQuery() {
+  queryParams.pageNo = 1;
+  getList();
+}
+
+async function getList() {
+  try {
+    loading.value = true;
+    const data = await getMessagePage(queryParams);
+    list.value = data.list;
+    total.value = data.total;
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 重置按钮操作 */
+async function resetQuery() {
+  // 暂存 accountId，并在 reset 后恢复
+  const accountId = queryParams.accountId;
+  queryFormRef.value?.resetFields();
+  queryParams.accountId = accountId;
+  handleQuery();
+}
+
+/** 打开消息发送窗口 */
+async function handleSend(userId: number) {
+  messageBoxUserId.value = userId;
+  messageBoxVisible.value = true;
+}
+
+/** 分页改变事件 */
+function handlePageChange(page: number, pageSize: number) {
+  queryParams.pageNo = page;
+  queryParams.pageSize = pageSize;
+  getList();
+}
+
+/** 显示总条数 */
+function showTotal(total: number) {
+  return `共 ${total} 条`;
+}
 </script>

 <template>
-  <Page>
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
+  <Page auto-content-height class="flex flex-col">
+    <!-- 搜索工作栏 -->
+    <div class="mb-4 rounded-lg bg-white p-4">
+      <Form
+        ref="queryFormRef"
+        :model="queryParams"
+        layout="inline"
+        class="search-form"
+      >
+        <FormItem label="公众号" name="accountId">
+          <WxAccountSelect @change="onAccountChanged" />
+        </FormItem>
+        <FormItem label="消息类型" name="type">
+          <Select
+            v-model:value="queryParams.type"
+            placeholder="请选择消息类型"
+            class="!w-[240px]"
+          >
+            <Select.Option
+              v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE)"
+              :key="dict.value"
+              :value="dict.value"
+            >
+              {{ dict.label }}
+            </Select.Option>
+          </Select>
+        </FormItem>
+        <FormItem label="用户标识" name="openid">
+          <Input
+            v-model:value="queryParams.openid"
+            placeholder="请输入用户标识"
+            allow-clear
+            class="!w-[240px]"
+          />
+        </FormItem>
+        <FormItem label="创建时间" name="createTime">
+          <DatePicker.RangePicker
+            v-model:value="queryParams.createTime"
+            :show-time="true"
+            class="!w-[240px]"
+          />
+        </FormItem>
+        <FormItem>
+          <a-button type="primary" @click="handleQuery">
+            <template #icon>
+              <IconifyIcon icon="mdi:magnify" />
+            </template>
+            搜索
+          </a-button>
+          <a-button class="ml-2" @click="resetQuery">
+            <template #icon>
+              <IconifyIcon icon="mdi:refresh" />
+            </template>
+            重置
+          </a-button>
+        </FormItem>
+      </Form>
+    </div>
+
+    <!-- 列表 -->
+    <div class="flex-1 rounded-lg bg-white p-4">
+      <MessageTable :list="list" :loading="loading" @send="handleSend" />
+      <div v-show="total > 0" class="mt-4 flex justify-end">
+        <a-pagination
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          :total="total"
+          show-size-changer
+          show-quick-jumper
+          :show-total="showTotal"
+          @change="handlePageChange"
+        />
+      </div>
+    </div>
+
+    <!-- 发送消息的弹窗 -->
+    <Modal
+      v-model:open="messageBoxVisible"
+      title="粉丝消息列表"
+      :width="800"
+      :footer="null"
+      destroy-on-close
    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/message/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/message/index
-      代码，pull request 贡献给我们！
-    </Button>
+      <WxMsg :user-id="messageBoxUserId" />
+    </Modal>
  </Page>
 </template>
+
+<style scoped>
+.search-form :deep(.ant-form-item) {
+  margin-bottom: 16px;
+}
+</style>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -74,6 +74,7 @@ catalog:
  '@vue/reactivity': ^3.5.17
  '@vue/shared': ^3.5.17
  '@vue/test-utils': ^2.4.6
+  '@vueuse/components': ^13.4.0
  '@vueuse/core': ^13.4.0
  '@vueuse/integrations': ^14.0.0
  '@vueuse/motion': ^3.0.3
				`@@ -0,0 +1 @@`
				`export { default as WxAccountSelect } from './main.vue';`
				`@@ -0,0 +1 @@`
				`export { default as WxLocation } from './main.vue';`
				`@@ -0,0 +1 @@`
				`export { default as WxMusic } from './main.vue';`
				`@@ -0,0 +1 @@`
				`export { default as WxNews } from './main.vue';`
				`@@ -0,0 +1 @@`
				`export { default as WxVideoPlayer } from './main.vue';`
				`@@ -0,0 +1 @@`
				`export { default as WxVoicePlayer } from './main.vue';`