!258 fix: 环境变量复原

Merge pull request !258 from hw/reform-mp

apps/web-antd/package.json

@@ -43,9 +43,11 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
+    "@videojs-player/vue": "catalog:",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
     "ant-design-vue": "catalog:",
+    "benz-amr-recorder": "catalog:",
     "bpmn-js": "catalog:",
     "bpmn-js-properties-panel": "catalog:",
     "bpmn-js-token-simulation": "catalog:",
@@ -58,6 +60,7 @@
     "pinia": "catalog:",
     "steady-xml": "catalog:",
     "tinymce": "catalog:",
+    "video.js": "catalog:",
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
     "vue-router": "catalog:",

apps/web-antd/src/api/mp/draft/index.ts

@@ -35,9 +35,13 @@ export function getDraftPage(params: PageParam) {
 
 /** 创建草稿 */
 export function createDraft(accountId: number, articles: MpDraftApi.Article[]) {
-  return requestClient.post('/mp/draft/create', articles, {
-    params: { accountId },
-  });
+  return requestClient.post(
+    '/mp/draft/create',
+    { articles },
+    {
+      params: { accountId },
+    },
+  );
 }
 
 /** 更新草稿 */
@@ -46,9 +50,13 @@ export function updateDraft(
   mediaId: string,
   articles: MpDraftApi.Article[],
 ) {
-  return requestClient.put('/mp/draft/update', articles, {
-    params: { accountId, mediaId },
-  });
+  return requestClient.put(
+    '/mp/draft/update',
+    { articles },
+    {
+      params: { accountId, mediaId },
+    },
+  );
 }
 
 /** 删除草稿 */

apps/web-antd/src/utils/index.ts

@@ -1,2 +1,29 @@
+import type { Recordable } from '@vben/types';
+
 export * from './rangePickerProps';
 export * from './routerHelper';
+
+/**
+ * 查找数组对象的某个下标
+ * @param {Array} ary 查找的数组
+ * @param {Function} fn 判断的方法
+ */
+type Fn<T = any> = (item: T, index: number, array: Array<T>) => boolean;
+export const findIndex = <T = Recordable<any>>(
+  ary: Array<T>,
+  fn: Fn<T>,
+): number => {
+  if (ary.findIndex) {
+    return ary.findIndex((item, index, array) => fn(item, index, array));
+  }
+  let index = -1;
+  ary.some((item: T, i: number, ary: Array<T>) => {
+    const ret: boolean = fn(item, i, ary);
+    if (ret) {
+      index = i;
+      return true;
+    }
+    return false;
+  });
+  return index;
+};

apps/web-antd/src/utils/routerHelper.ts

@@ -1,3 +1,8 @@
+import type {
+  RouteLocationNormalized,
+  RouteRecordNormalized,
+} from 'vue-router';
+
 import { defineAsyncComponent } from 'vue';
 
 const modules = import.meta.glob('../views/**/*.{vue,tsx}');
@@ -14,3 +19,20 @@ export function registerComponent(componentPath: string) {
     }
   }
 }
+
+export const getRawRoute = (
+  route: RouteLocationNormalized,
+): RouteLocationNormalized => {
+  if (!route) return route;
+  const { matched, ...opt } = route;
+  return {
+    ...opt,
+    matched: (matched
+      ? matched.map((item) => ({
+          meta: item.meta,
+          name: item.name,
+          path: item.path,
+        }))
+      : undefined) as RouteRecordNormalized[],
+  };
+};

apps/web-antd/src/utils/useUpload.ts

@@ -0,0 +1,63 @@
+import { message } from 'ant-design-vue';
+
+enum UploadType {
+  Image = 'image',
+  Video = 'video',
+  Voice = 'voice',
+}
+
+const useBeforeUpload = (type: UploadType, maxSizeMB: number) => {
+  const fn = (file: File): boolean => {
+    let allowTypes: string[] = [];
+    let name = '';
+
+    switch (type) {
+      case UploadType.Image: {
+        allowTypes = [
+          'image/jpeg',
+          'image/png',
+          'image/gif',
+          'image/bmp',
+          'image/jpg',
+        ];
+        maxSizeMB = 2;
+        name = '图片';
+        break;
+      }
+      case UploadType.Video: {
+        allowTypes = ['video/mp4'];
+        maxSizeMB = 10;
+        name = '视频';
+        break;
+      }
+      case UploadType.Voice: {
+        allowTypes = [
+          'audio/mp3',
+          'audio/mpeg',
+          'audio/wma',
+          'audio/wav',
+          'audio/amr',
+        ];
+        maxSizeMB = 2;
+        name = '语音';
+        break;
+      }
+    }
+    // 格式不正确
+    if (!allowTypes.includes(file.type)) {
+      message.error(`上传${name}格式不对!`);
+      return false;
+    }
+    // 大小不正确
+    if (file.size / 1024 / 1024 > maxSizeMB) {
+      message.error(`上传${name}大小不能超过${maxSizeMB}M!`);
+      return false;
+    }
+
+    return true;
+  };
+
+  return fn;
+};
+
+export { UploadType, useBeforeUpload };

apps/web-antd/src/views/iot/rule/scene/form/inputs/JsonParamsInput.vue

@@ -198,25 +198,25 @@ const emptyMessage = computed(() => {
 });
 
 // 计算属性：无配置消息
-const noConfigMessage = computed(() => {
-  switch (props.type) {
-    case JsonParamsInputTypeEnum.CUSTOM: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.CUSTOM;
-    }
-    case JsonParamsInputTypeEnum.EVENT: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.EVENT;
-    }
-    case JsonParamsInputTypeEnum.PROPERTY: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.PROPERTY;
-    }
-    case JsonParamsInputTypeEnum.SERVICE: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.SERVICE;
-    }
-    default: {
-      return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.DEFAULT;
-    }
-  }
-});
+// const noConfigMessage = computed(() => {
+//   switch (props.type) {
+//     case JsonParamsInputTypeEnum.CUSTOM: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.CUSTOM;
+//     }
+//     case JsonParamsInputTypeEnum.EVENT: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.EVENT;
+//     }
+//     case JsonParamsInputTypeEnum.PROPERTY: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.PROPERTY;
+//     }
+//     case JsonParamsInputTypeEnum.SERVICE: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.SERVICE;
+//     }
+//     default: {
+//       return JSON_PARAMS_INPUT_CONSTANTS.NO_CONFIG_MESSAGES.DEFAULT;
+//     }
+//   }
+// });
 
 /**
  * 处理参数变化事件

apps/web-antd/src/views/mp/autoReply/data.ts

@@ -0,0 +1,88 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+
+import { markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
+
+import { MsgType } from './modules/types';
+
+/** 获取表格列配置 */
+export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
+  const columns: VxeGridPropTypes.Columns = [];
+  // 请求消息类型列（仅消息回复显示）
+  if (msgType === MsgType.Message) {
+    columns.push({
+      field: 'requestMessageType',
+      title: '请求消息类型',
+      minWidth: 120,
+    });
+  }
+
+  // 关键词列（仅关键词回复显示）
+  if (msgType === MsgType.Keyword) {
+    columns.push({
+      field: 'requestKeyword',
+      title: '关键词',
+      minWidth: 150,
+    });
+  }
+
+  // 匹配类型列（仅关键词回复显示）
+  if (msgType === MsgType.Keyword) {
+    columns.push({
+      field: 'requestMatch',
+      title: '匹配类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH },
+      },
+    });
+  }
+
+  // 回复消息类型列
+  columns.push(
+    {
+      field: 'responseMessageType',
+      title: '回复消息类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MP_MESSAGE_TYPE },
+      },
+    },
+    {
+      field: 'responseContent',
+      title: '回复内容',
+      minWidth: 200,
+      slots: { default: 'replyContent' },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  );
+  return columns;
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: markRaw(WxAccountSelect),
+    },
+  ];
+}

apps/web-antd/src/views/mp/autoReply/index.vue

@@ -1,29 +1,259 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { Button } from 'ant-design-vue';
+import { computed, nextTick, onMounted, ref } from 'vue';
+
+import {
+  confirm,
+  ContentWrap,
+  DocAlert,
+  Page,
+  useVbenModal,
+} from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { message, Row, Tabs } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as MpAutoReplyApi from '#/api/mp/autoReply';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import ReplyContentCell from './modules/ReplyTable.vue';
+import { MsgType } from './modules/types';
+
+defineOptions({ name: 'MpAutoReply' });
+
+const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
+async function onTabChange(_tabName: string) {
+  msgType.value = _tabName;
+  // 等待 msgType 更新完成
+  await nextTick();
+  const columns = useGridColumns(Number(msgType.value) as MsgType);
+  if (columns) {
+    // 使用 setGridOptions 更新列配置
+    gridApi.setGridOptions({ columns });
+    // 等待列配置更新完成
+    await nextTick();
+  }
+  await gridApi.query();
+  // 查询完成后更新数据长度
+  updateTableDataLength();
+}
+
+/** 新增按钮操作 */
+async function handleCreate() {
+  const formValues = await gridApi.formApi.getValues();
+
+  formModalApi
+    .setData({
+      isCreating: true,
+      msgType: Number(msgType.value) as MsgType,
+      accountId: formValues.accountId,
+    })
+    .open();
+}
+
+/** 修改按钮操作 */
+async function handleEdit(row: any) {
+  const data = (await MpAutoReplyApi.getAutoReply(row.id)) as any;
+  formModalApi
+    .setData({
+      isCreating: false,
+      msgType: Number(msgType.value) as MsgType,
+      row: data,
+    })
+    .open();
+}
+
+/** 删除按钮操作 */
+async function handleDelete(row: any) {
+  await confirm('是否确认删除此数据?');
+  const hideLoading = message.loading({
+    content: $t('ui.actionMessage.deleting', ['自动回复']),
+    duration: 0,
+  });
+  try {
+    await MpAutoReplyApi.deleteAutoReply(row.id);
+    message.success('删除成功');
+    await gridApi.query();
+    // 查询完成后更新数据长度
+    updateTableDataLength();
+  } finally {
+    hideLoading();
+  }
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+    // 表单值变化时自动提交，这样 accountId 会被正确传递到查询函数
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useGridColumns(Number(msgType.value) as MsgType),
+    height: 'calc(100vh - 300px)',
+    // height: '600px',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await MpAutoReplyApi.getAutoReplyPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            type: Number(msgType.value) as MsgType,
+            ...formValues,
+          });
+        },
+      },
+      // 禁用自动加载，等表单初始化完成后再加载
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+
+// 表格数据长度，用于判断是否显示新增按钮
+const tableDataLength = ref(0);
+
+// 更新表格数据长度（避免在模板中直接调用 getTableData 导致响应式循环）
+function updateTableDataLength() {
+  try {
+    if (!gridApi.grid) {
+      return;
+    }
+    const tableData = gridApi.grid.getTableData();
+    tableDataLength.value = tableData?.tableData?.length || 0;
+  } catch {
+    tableDataLength.value = 0;
+  }
+}
+
+// 计算是否显示新增按钮：关注时回复类型只有在没有数据时才显示
+const showCreateButton = computed(() => {
+  if (Number(msgType.value) !== MsgType.Follow) {
+    return true;
+  }
+  return tableDataLength.value <= 0;
+});
+
+// 页面挂载后，等待表单初始化完成再加载数据
+onMounted(async () => {
+  // 等待 WxAccountSelect 组件加载并设置默认值
+  await nextTick();
+  if (gridApi.formApi) {
+    const formValues = await gridApi.formApi.getValues();
+    // 如果 accountId 有值，说明已经准备好了
+    if (formValues.accountId) {
+      // 设置为最新提交的值
+      gridApi.formApi.setLatestSubmissionValues(formValues);
+      // 触发首次查询
+      await gridApi.query();
+      updateTableDataLength();
+    }
+  }
+});
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
-    <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/autoReply/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/autoReply/index
-      代码，pull request 贡献给我们！
-    </Button>
+
+    <!-- tab 切换 -->
+    <ContentWrap>
+      <Tabs
+        v-model:active-key="msgType"
+        @change="(activeKey) => onTabChange(activeKey as string)"
+      >
+        <!-- tab 项 -->
+        <Tabs.TabPane :key="String(MsgType.Follow)">
+          <template #tab>
+            <Row align="middle">
+              <IconifyIcon icon="ep:star" class="mr-2px" /> 关注时回复
+            </Row>
+          </template>
+        </Tabs.TabPane>
+        <Tabs.TabPane :key="String(MsgType.Message)">
+          <template #tab>
+            <Row align="middle">
+              <IconifyIcon icon="ep:chat-line-round" class="mr-2px" /> 消息回复
+            </Row>
+          </template>
+        </Tabs.TabPane>
+        <Tabs.TabPane :key="String(MsgType.Keyword)">
+          <template #tab>
+            <Row align="middle">
+              <IconifyIcon icon="fa:newspaper-o" class="mr-2px" /> 关键词回复
+            </Row>
+          </template>
+        </Tabs.TabPane>
+      </Tabs>
+      <!-- 列表 -->
+      <FormModal
+        @success="
+          () => {
+            gridApi.query().then(() => {
+              updateTableDataLength();
+            });
+          }
+        "
+      />
+      <Grid table-title="自动回复列表">
+        <template #toolbar-tools>
+          <TableAction
+            v-if="showCreateButton"
+            :actions="[
+              {
+                label: $t('ui.actionTitle.create', ['自动回复']),
+                type: 'primary',
+                icon: ACTION_ICON.ADD,
+                auth: ['mp:auto-reply:create'],
+                onClick: handleCreate,
+              },
+            ]"
+          />
+        </template>
+        <template #replyContent="{ row }">
+          <ReplyContentCell :row="row" />
+        </template>
+        <template #actions="{ row }">
+          <TableAction
+            :actions="[
+              {
+                label: $t('common.edit'),
+                type: 'link',
+                icon: ACTION_ICON.EDIT,
+                auth: ['mp:auto-reply:update'],
+                onClick: handleEdit.bind(null, row),
+              },
+              {
+                label: $t('common.delete'),
+                type: 'link',
+                danger: true,
+                icon: ACTION_ICON.DELETE,
+                auth: ['mp:auto-reply:delete'],
+                popConfirm: {
+                  title: '是否确认删除此数据?',
+                  confirm: handleDelete.bind(null, row),
+                },
+              },
+            ]"
+          />
+        </template>
+      </Grid>
+    </ContentWrap>
   </Page>
 </template>

apps/web-antd/src/views/mp/autoReply/modules/ReplyForm.vue

@@ -0,0 +1,139 @@
+<script lang="ts" setup>
+import type { Rule } from 'ant-design-vue/es/form';
+
+import type { Reply } from '#/views/mp/modules/wx-reply';
+
+import { computed, ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { Form, FormItem, Input, Select, SelectOption } from 'ant-design-vue';
+
+import WxReplySelect from '#/views/mp/modules/wx-reply';
+
+import { MsgType } from './types';
+
+defineOptions({ name: 'ReplyForm' });
+
+const props = defineProps<{
+  modelValue: any;
+  msgType: MsgType;
+  reply: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:reply', v: Reply): void;
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+const reply = computed<Reply>({
+  get: () => props.reply,
+  set: (val) => emit('update:reply', val),
+});
+
+const replyForm = computed<any>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const formRef = ref(); // 表单 ref
+
+const RequestMessageTypes = [
+  'text',
+  'image',
+  'voice',
+  'video',
+  'shortvideo',
+  'location',
+  'link',
+]; // 允许选择的请求消息类型
+
+// 表单校验规则
+const rules = {
+  requestKeyword: [
+    { required: true, message: '请求的关键字不能为空', trigger: 'blur' },
+  ] as Rule[],
+  requestMatch: [
+    { required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' },
+  ] as Rule[],
+} as Record<string, Rule[]>;
+
+defineExpose({
+  resetFields: () => formRef.value?.resetFields(),
+  validate: async () => {
+    await formRef.value?.validate();
+  },
+});
+</script>
+
+<template>
+  <div>
+    <Form
+      ref="formRef"
+      :model="replyForm"
+      :rules="rules"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <FormItem
+        label="消息类型"
+        name="requestMessageType"
+        v-if="msgType === MsgType.Message"
+      >
+        <Select
+          v-model:value="replyForm.requestMessageType"
+          placeholder="请选择"
+        >
+          <SelectOption
+            v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE).filter(
+              (d) => RequestMessageTypes.includes(d.value as string),
+            )"
+            :key="dict.value"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </SelectOption>
+        </Select>
+      </FormItem>
+      <FormItem
+        label="匹配类型"
+        name="requestMatch"
+        v-if="msgType === MsgType.Keyword"
+      >
+        <Select
+          v-model:value="replyForm.requestMatch"
+          placeholder="请选择匹配类型"
+          allow-clear
+        >
+          <SelectOption
+            v-for="dict in getDictOptions(
+              DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH,
+              'number',
+            )"
+            :key="String(dict.value)"
+            :value="dict.value"
+          >
+            {{ dict.label }}
+          </SelectOption>
+        </Select>
+      </FormItem>
+      <FormItem
+        label="关键词"
+        name="requestKeyword"
+        v-if="msgType === MsgType.Keyword"
+      >
+        <Input
+          v-model:value="replyForm.requestKeyword"
+          placeholder="请输入内容"
+          allow-clear
+        />
+      </FormItem>
+      <FormItem label="回复消息">
+        <WxReplySelect v-model="reply" />
+      </FormItem>
+    </Form>
+  </div>
+</template>
+
+<style scoped></style>

apps/web-antd/src/views/mp/autoReply/modules/ReplyTable.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import WxMusic from '#/views/mp/modules/wx-music';
+import WxNews from '#/views/mp/modules/wx-news';
+import WxVideoPlayer from '#/views/mp/modules/wx-video-play';
+import WxVoicePlayer from '#/views/mp/modules/wx-voice-play';
+
+defineOptions({ name: 'ReplyContentCell' });
+
+const props = defineProps<{
+  row: any;
+}>();
+</script>
+
+<template>
+  <div>
+    <div v-if="props.row.responseMessageType === 'text'">
+      {{ props.row.responseContent }}
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'voice'">
+      <WxVoicePlayer
+        v-if="props.row.responseMediaUrl"
+        :url="props.row.responseMediaUrl"
+      />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'image'">
+      <a target="_blank" :href="props.row.responseMediaUrl">
+        <img :src="props.row.responseMediaUrl" style="width: 100px" />
+      </a>
+    </div>
+    <div
+      v-else-if="
+        props.row.responseMessageType === 'video' ||
+        props.row.responseMessageType === 'shortvideo'
+      "
+    >
+      <WxVideoPlayer
+        v-if="props.row.responseMediaUrl"
+        :url="props.row.responseMediaUrl"
+        style="margin-top: 10px"
+      />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'news'">
+      <WxNews :articles="props.row.responseArticles" />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'music'">
+      <WxMusic
+        :title="props.row.responseTitle"
+        :description="props.row.responseDescription"
+        :thumb-media-url="props.row.responseThumbMediaUrl"
+        :music-url="props.row.responseMusicUrl"
+        :hq-music-url="props.row.responseHqMusicUrl"
+      />
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/mp/autoReply/modules/form.vue

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import type { Reply } from '#/views/mp/modules/wx-reply';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import * as MpAutoReplyApi from '#/api/mp/autoReply';
+import { $t } from '#/locales';
+import { ReplyType } from '#/views/mp/modules/wx-reply/modules/types';
+
+import ReplyForm from './ReplyForm.vue';
+import { MsgType } from './types';
+
+const emit = defineEmits(['success']);
+
+const formRef = ref<InstanceType<typeof ReplyForm> | null>(null);
+
+const formData = ref<{ isCreating: boolean; msgType: MsgType; row?: any }>();
+const replyForm = ref<any>({});
+const reply = ref<Reply>({
+  type: ReplyType.Text,
+  accountId: -1,
+});
+
+const getTitle = computed(() => {
+  return formData.value?.isCreating
+    ? $t('ui.actionTitle.create', ['自动回复'])
+    : $t('ui.actionTitle.edit', ['自动回复']);
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+
+    // 处理回复消息
+    const submitForm: any = { ...replyForm.value };
+    submitForm.responseMessageType = reply.value.type;
+    submitForm.responseContent = reply.value.content;
+    submitForm.responseMediaId = reply.value.mediaId;
+    submitForm.responseMediaUrl = reply.value.url;
+    submitForm.responseTitle = reply.value.title;
+    submitForm.responseDescription = reply.value.description;
+    submitForm.responseThumbMediaId = reply.value.thumbMediaId;
+    submitForm.responseThumbMediaUrl = reply.value.thumbMediaUrl;
+    submitForm.responseArticles = reply.value.articles;
+    submitForm.responseMusicUrl = reply.value.musicUrl;
+    submitForm.responseHqMusicUrl = reply.value.hqMusicUrl;
+
+    modalApi.lock();
+    try {
+      if (replyForm.value.id === undefined) {
+        await MpAutoReplyApi.createAutoReply(submitForm);
+        message.success('新增成功');
+      } else {
+        await MpAutoReplyApi.updateAutoReply(submitForm);
+        message.success('修改成功');
+      }
+      await modalApi.close();
+      emit('success');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      replyForm.value = {};
+      reply.value = {
+        type: ReplyType.Text,
+        accountId: -1,
+      };
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{
+      accountId?: number;
+      isCreating: boolean;
+      msgType: MsgType;
+      row?: any;
+    }>();
+    if (!data) {
+      return;
+    }
+    formData.value = data;
+
+    if (data.isCreating) {
+      // 新建：初始化表单
+      replyForm.value = {
+        id: undefined,
+        accountId: data.accountId || -1,
+        type: data.msgType,
+        requestKeyword: undefined,
+        requestMatch: data.msgType === MsgType.Keyword ? 1 : undefined,
+        requestMessageType: undefined,
+      };
+      reply.value = {
+        type: ReplyType.Text,
+        accountId: data.accountId || -1,
+      };
+    } else if (data.row) {
+      // 编辑：加载数据
+      const rowData = data.row;
+      replyForm.value = { ...rowData };
+      delete replyForm.value.responseMessageType;
+      delete replyForm.value.responseContent;
+      delete replyForm.value.responseMediaId;
+      delete replyForm.value.responseMediaUrl;
+      delete replyForm.value.responseDescription;
+      delete replyForm.value.responseArticles;
+      reply.value = {
+        type: rowData.responseMessageType,
+        accountId: data.accountId || -1,
+        content: rowData.responseContent,
+        mediaId: rowData.responseMediaId,
+        url: rowData.responseMediaUrl,
+        title: rowData.responseTitle,
+        description: rowData.responseDescription,
+        thumbMediaId: rowData.responseThumbMediaId,
+        thumbMediaUrl: rowData.responseThumbMediaUrl,
+        articles: rowData.responseArticles,
+        musicUrl: rowData.responseMusicUrl,
+        hqMusicUrl: rowData.responseHqMusicUrl,
+      };
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <ReplyForm
+      v-if="formData"
+      v-model="replyForm"
+      v-model:reply="reply"
+      :msg-type="formData.msgType"
+      ref="formRef"
+    />
+  </Modal>
+</template>

apps/web-antd/src/views/mp/autoReply/modules/types.ts

@@ -0,0 +1,7 @@
+// 消息类型（Follow: 关注时回复；Message: 消息回复；Keyword: 关键词回复）
+// 作为 tab.name，enum 的数字不能随意修改，与 api 参数相关
+export enum MsgType {
+  Follow = 1,
+  Keyword = 3,
+  Message = 2,
+}

apps/web-antd/src/views/mp/draft/data.ts

@@ -0,0 +1,41 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { markRaw } from 'vue';
+
+import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
+
+/** 获取表格列配置 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'content',
+      title: '图文内容',
+      minWidth: 300,
+      slots: { default: 'content' },
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: markRaw(WxAccountSelect),
+    },
+  ];
+}

apps/web-antd/src/views/mp/draft/index.vue

@@ -1,29 +1,316 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { Article } from './modules/types';
 
-import { Button } from 'ant-design-vue';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { nextTick, onMounted, provide, ref, watch } from 'vue';
+
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { message } from 'ant-design-vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as MpDraftApi from '#/api/mp/draft';
+import * as MpFreePublishApi from '#/api/mp/freePublish';
+import { createEmptyNewsItem } from '#/views/mp/draft/modules/types';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import DraftTableCell from './modules/draft-table.vue';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'MpDraft' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          // 更新 accountId
+          if (formValues?.accountId) {
+            accountId.value = formValues.accountId;
+          }
+          const drafts = await MpDraftApi.getDraftPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+          // 处理 API 返回的数据，兼容不同的数据结构
+          const formattedList: Article[] = drafts.list.map((draft: any) => {
+            // 如果已经是 content.newsItem 格式，直接使用
+            if (draft.content?.newsItem) {
+              const newsItem = draft.content.newsItem.map((item: any) => ({
+                ...item,
+                picUrl: item.thumbUrl || item.picUrl,
+              }));
+              return {
+                mediaId: draft.mediaId,
+                content: {
+                  newsItem,
+                },
+                updateTime:
+                  draft.updateTime ||
+                  (draft.createTime
+                    ? new Date(draft.createTime).getTime()
+                    : Date.now()),
+              };
+            }
+            // 如果是 articles 格式，转换为 content.newsItem 格式
+            if (draft.articles) {
+              const newsItem = draft.articles.map((article: any) => ({
+                ...article,
+                thumbUrl: article.thumbUrl || article.thumbMediaId,
+                picUrl: article.thumbUrl || article.thumbMediaId,
+              }));
+              return {
+                mediaId: draft.mediaId,
+                content: {
+                  newsItem,
+                },
+                updateTime:
+                  draft.updateTime ||
+                  (draft.createTime
+                    ? new Date(draft.createTime).getTime()
+                    : Date.now()),
+              };
+            }
+            // 默认返回空结构
+            return {
+              mediaId: draft.mediaId || '',
+              content: {
+                newsItem: [],
+              },
+              updateTime: draft.updateTime || Date.now(),
+            };
+          });
+          return {
+            page: {
+              total: drafts.total,
+            },
+            result: formattedList,
+          };
+        },
+      },
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Article>,
+});
+
+// 提供 accountId 给子组件
+const accountId = ref<number>(-1);
+
+// 监听表单提交，更新 accountId
+watch(
+  () => gridApi.formApi?.getLatestSubmissionValues?.()?.accountId,
+  (newAccountId) => {
+    if (newAccountId !== undefined) {
+      accountId.value = newAccountId;
+    }
+  },
+);
+
+provide('accountId', accountId);
+
+/** 新增按钮操作 */
+async function handleCreate() {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId || accountId === -1) {
+    message.warning('请先选择公众号');
+    return;
+  }
+
+  formModalApi
+    .setData({
+      isCreating: true,
+      accountId,
+      newsList: [createEmptyNewsItem()],
+    })
+    .open();
+}
+
+/** 修改按钮操作 */
+async function handleEdit(row: Article) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId || accountId === -1) {
+    message.warning('请先选择公众号');
+    return;
+  }
+
+  formModalApi
+    .setData({
+      isCreating: false,
+      accountId,
+      mediaId: row.mediaId,
+      newsList: structuredClone(row.content.newsItem),
+    })
+    .open();
+}
+
+/** 发布按钮操作 */
+async function handlePublish(row: Article) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId || accountId === -1) {
+    message.warning('请先选择公众号');
+    return;
+  }
+
+  const content =
+    '你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。' +
+    '已发布内容不会推送给用户，也不会展示在公众号主页中。 ' +
+    '发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。';
+  try {
+    await confirm(content);
+    const hideLoading = message.loading({
+      content: '发布中...',
+      duration: 0,
+    });
+    try {
+      await MpFreePublishApi.submitFreePublish(accountId, row.mediaId);
+      message.success('发布成功');
+      await gridApi.query();
+    } finally {
+      hideLoading();
+    }
+  } catch {
+    //
+  }
+}
+
+/** 删除按钮操作 */
+async function handleDelete(row: Article) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId || accountId === -1) {
+    message.warning('请先选择公众号');
+    return;
+  }
+
+  try {
+    await confirm('此操作将永久删除该草稿, 是否继续?');
+    const hideLoading = message.loading({
+      content: '删除中...',
+      duration: 0,
+    });
+    try {
+      await MpDraftApi.deleteDraft(accountId, row.mediaId);
+      message.success('删除成功');
+      await gridApi.query();
+    } finally {
+      hideLoading();
+    }
+  } catch {
+    //
+  }
+}
+
+// 页面挂载后，等待表单初始化完成再加载数据
+onMounted(async () => {
+  await nextTick();
+  if (gridApi.formApi) {
+    const formValues = await gridApi.formApi.getValues();
+    if (formValues.accountId) {
+      accountId.value = formValues.accountId;
+      gridApi.formApi.setLatestSubmissionValues(formValues);
+      await gridApi.query();
+    }
+  }
+});
 </script>
 
 <template>
-  <Page>
+  <Page auto-content-height>
     <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
-    <Button
-      danger
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3"
-    >
-      该功能支持 Vue3 + element-plus 版本！
-    </Button>
-    <br />
-    <Button
-      type="link"
-      target="_blank"
-      href="https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/draft/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/draft/index
-      代码，pull request 贡献给我们！
-    </Button>
+
+    <FormModal
+      @success="
+        () => {
+          gridApi.query();
+        }
+      "
+    />
+
+    <Grid table-title="草稿列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mp:draft:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #content="{ row }">
+        <DraftTableCell :row="row" />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '发布',
+              type: 'link',
+              icon: ACTION_ICON.UPLOAD,
+              auth: ['mp:free-publish:submit'],
+              onClick: handlePublish.bind(null, row),
+            },
+            {
+              label: '编辑',
+              type: 'link',
+              icon: ACTION_ICON.EDIT,
+              auth: ['mp:draft:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '删除',
+              type: 'link',
+              danger: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:draft:delete'],
+              popConfirm: {
+                title: '是否确认删除此数据?',
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
+
+<style lang="scss" scoped>
+:deep(.vxe-table--body-wrapper) {
+  .vxe-table--body {
+    .vxe-body--column {
+      .vxe-cell {
+        padding: 0;
+      }
+    }
+  }
+}
+</style>

apps/web-antd/src/views/mp/draft/modules/cover-select.vue

@@ -0,0 +1,189 @@
+<script lang="ts" setup>
+import type { UploadFile } from 'ant-design-vue';
+
+import type { NewsItem } from './types';
+
+import { computed, inject, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import { Button, Image, message, Modal, Upload } from 'ant-design-vue';
+
+import { UploadType, useBeforeUpload } from '#/utils/useUpload';
+import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
+
+// 设置上传的请求头部
+
+const props = defineProps<{
+  isFirst: boolean;
+  modelValue: NewsItem;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: NewsItem): void;
+}>();
+
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-permanent`; // 上传永久素材的地址
+const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
+const newsItem = computed<NewsItem>({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit('update:modelValue', val);
+  },
+});
+
+const accountId = inject<number>('accountId');
+const showImageDialog = ref(false);
+
+const fileList = ref<UploadFile[]>([]);
+interface UploadData {
+  type: UploadType;
+  accountId: number;
+}
+const uploadData: UploadData = reactive({
+  type: UploadType.Image,
+  accountId: accountId!,
+});
+
+/** 素材选择完成事件*/
+function onMaterialSelected(item: any) {
+  showImageDialog.value = false;
+  newsItem.value.thumbMediaId = item.mediaId;
+  newsItem.value.thumbUrl = item.url;
+}
+
+const onBeforeUpload = (file: UploadFile) =>
+  useBeforeUpload(UploadType.Image, 2)(file as any);
+
+function onUploadChange(info: any) {
+  if (info.file.status === 'done') {
+    onUploadSuccess(info.file.response || info.file);
+  } else if (info.file.status === 'error') {
+    onUploadError(info.file.error || new Error('上传失败'));
+  }
+}
+
+function onUploadSuccess(res: any) {
+  if (res.code !== 0) {
+    message.error(`上传出错：${res.msg}`);
+    return false;
+  }
+
+  // 重置上传文件的表单
+  fileList.value = [];
+
+  // 设置草稿的封面字段
+  newsItem.value.thumbMediaId = res.data.mediaId;
+  newsItem.value.thumbUrl = res.data.url;
+}
+
+function onUploadError(err: Error) {
+  message.error(`上传失败: ${err.message}`);
+}
+</script>
+
+<template>
+  <div>
+    <p>封面:</p>
+    <div class="thumb-div">
+      <Image
+        v-if="newsItem.thumbUrl"
+        style="width: 300px; max-height: 300px"
+        :src="newsItem.thumbUrl"
+        :preview="false"
+      />
+      <IconifyIcon
+        v-else
+        icon="ep:plus"
+        class="avatar-uploader-icon"
+        :class="isFirst ? 'avatar' : 'avatar1'"
+      />
+      <div class="thumb-but">
+        <div class="flex items-center justify-center">
+          <Upload
+            :action="UPLOAD_URL"
+            :headers="HEADERS"
+            :file-list="fileList"
+            :data="{ ...uploadData }"
+            :before-upload="onBeforeUpload"
+            @change="onUploadChange"
+          >
+            <template #default>
+              <Button size="small" type="primary">本地上传</Button>
+            </template>
+          </Upload>
+          <Button
+            size="small"
+            type="primary"
+            @click="showImageDialog = true"
+            style="margin-left: 5px"
+          >
+            素材库选择
+          </Button>
+        </div>
+
+        <div class="upload-tip">
+          支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
+        </div>
+      </div>
+      <Modal
+        title="选择图片"
+        v-model:open="showImageDialog"
+        width="80%"
+        destroy-on-close
+      >
+        <WxMaterialSelect
+          type="image"
+          :account-id="accountId!"
+          @select-material="onMaterialSelected"
+        />
+      </Modal>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.upload-tip {
+  margin-top: 5px;
+  margin-left: 5px;
+  font-size: 12px;
+  color: #999;
+}
+
+.thumb-div {
+  display: inline-block;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  text-align: center;
+
+  .avatar-uploader-icon {
+    width: 120px;
+    height: 120px;
+    font-size: 28px;
+    line-height: 120px;
+    color: #8c939d;
+    text-align: center;
+    border: 1px solid #d9d9d9;
+  }
+
+  .avatar {
+    width: 230px;
+    height: 120px;
+  }
+
+  .avatar1 {
+    width: 120px;
+    height: 120px;
+  }
+
+  .thumb-but {
+    margin: 5px;
+  }
+}
+</style>

apps/web-antd/src/views/mp/draft/modules/draft-table.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { Article } from './types';
+
+import WxNews from '#/views/mp/modules/wx-news/main.vue';
+
+defineOptions({ name: 'DraftTableCell' });
+
+const props = defineProps<{
+  row: Article;
+}>();
+</script>
+
+<template>
+  <div class="draft-content">
+    <div v-if="props.row.content && props.row.content.newsItem">
+      <WxNews :articles="props.row.content.newsItem" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.draft-content {
+  padding: 10px;
+}
+</style>

apps/web-antd/src/views/mp/draft/modules/form.vue

@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import type { NewsItem } from './types';
+
+import { computed, ref } from 'vue';
+
+import { confirm, useVbenModal } from '@vben/common-ui';
+
+import { message, Spin } from 'ant-design-vue';
+
+import * as MpDraftApi from '#/api/mp/draft';
+
+import NewsForm from './news-form.vue';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<{
+  accountId: number;
+  isCreating: boolean;
+  mediaId?: string;
+  newsList?: NewsItem[];
+}>();
+const newsList = ref<NewsItem[]>([]);
+const isSubmitting = ref(false);
+const isSaved = ref(false);
+
+const getTitle = computed(() => {
+  return formData.value?.isCreating ? '新建图文' : '修改图文';
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (!formData.value) {
+      return;
+    }
+
+    isSubmitting.value = true;
+    modalApi.lock();
+    try {
+      if (formData.value.isCreating) {
+        await MpDraftApi.createDraft(formData.value.accountId, newsList.value);
+        message.success('新增成功');
+      } else if (formData.value.mediaId) {
+        await MpDraftApi.updateDraft(
+          formData.value.accountId,
+          formData.value.mediaId,
+          newsList.value,
+        );
+        message.success('更新成功');
+      }
+      isSaved.value = true;
+      await modalApi.close();
+      emit('success');
+    } finally {
+      isSubmitting.value = false;
+      modalApi.unlock();
+    }
+  },
+  async onBeforeClose() {
+    // 如果已经成功保存，直接关闭，不显示提示
+    if (isSaved.value) {
+      return true;
+    }
+    try {
+      await confirm('修改内容可能还未保存，确定关闭吗?');
+      return true;
+    } catch {
+      return false;
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      newsList.value = [];
+      isSaved.value = false;
+      return;
+    }
+    isSaved.value = false;
+    const data = modalApi.getData<{
+      accountId: number;
+      isCreating: boolean;
+      mediaId?: string;
+      newsList?: NewsItem[];
+    }>();
+    if (!data) {
+      return;
+    }
+    formData.value = data;
+    newsList.value = data.newsList || [];
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5" destroy-on-close>
+    <Spin :spinning="isSubmitting">
+      <NewsForm
+        v-if="formData"
+        v-model="newsList"
+        :is-creating="formData.isCreating"
+      />
+    </Spin>
+  </Modal>
+</template>

apps/web-antd/src/views/mp/draft/modules/news-form.vue

@@ -0,0 +1,341 @@
+<script lang="ts" setup>
+import type { NewsItem } from './types';
+
+import { computed, ref } from 'vue';
+
+import { confirm } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
+
+import { Button, Col, Input, Layout, Row, Textarea } from 'ant-design-vue';
+
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+
+import CoverSelect from './cover-select.vue';
+import { createEmptyNewsItem } from './types';
+
+defineOptions({ name: 'NewsForm' });
+
+const props = defineProps<{
+  isCreating: boolean;
+  modelValue: NewsItem[] | null;
+}>();
+
+// v-model=newsList
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: NewsItem[]): void;
+}>();
+
+const newsList = computed<NewsItem[]>({
+  get() {
+    return props.modelValue === null
+      ? [createEmptyNewsItem()]
+      : props.modelValue;
+  },
+  set(val) {
+    emit('update:modelValue', val);
+  },
+});
+
+const activeNewsIndex = ref(0);
+const activeNewsItem = computed(() => {
+  const item = newsList.value[activeNewsIndex.value];
+  if (!item) {
+    return createEmptyNewsItem();
+  }
+  return item;
+});
+
+// 将图文向下移动
+function moveDownNews(index: number) {
+  const current = newsList.value[index];
+  const next = newsList.value[index + 1];
+  if (current && next) {
+    newsList.value[index] = next;
+    newsList.value[index + 1] = current;
+    activeNewsIndex.value = index + 1;
+  }
+}
+
+// 将图文向上移动
+function moveUpNews(index: number) {
+  const current = newsList.value[index];
+  const prev = newsList.value[index - 1];
+  if (current && prev) {
+    newsList.value[index] = prev;
+    newsList.value[index - 1] = current;
+    activeNewsIndex.value = index - 1;
+  }
+}
+
+// 删除指定 index 的图文
+async function removeNews(index: number) {
+  try {
+    await confirm('确定删除该图文吗?');
+    newsList.value.splice(index, 1);
+    if (activeNewsIndex.value === index) {
+      activeNewsIndex.value = 0;
+    }
+  } catch {
+    // empty
+  }
+}
+
+// 添加一个图文
+function plusNews() {
+  newsList.value.push(createEmptyNewsItem());
+  activeNewsIndex.value = newsList.value.length - 1;
+}
+</script>
+
+<template>
+  <Layout>
+    <Layout.Sider width="40%" theme="light">
+      <div class="select-item">
+        <div v-for="(news, index) in newsList" :key="index">
+          <div
+            class="news-main father"
+            v-if="index === 0"
+            :class="{ activeAddNews: activeNewsIndex === index }"
+            @click="activeNewsIndex = index"
+          >
+            <div class="news-content">
+              <img class="material-img" :src="news.thumbUrl" />
+              <div class="news-content-title">{{ news.title }}</div>
+            </div>
+            <div class="child" v-if="newsList.length > 1">
+              <Button
+                type="default"
+                shape="circle"
+                size="small"
+                @click="() => moveDownNews(index)"
+              >
+                <IconifyIcon icon="ep:arrow-down-bold" />
+              </Button>
+              <Button
+                v-if="isCreating"
+                type="primary"
+                danger
+                shape="circle"
+                size="small"
+                @click="() => removeNews(index)"
+              >
+                <IconifyIcon icon="ep:delete" />
+              </Button>
+            </div>
+          </div>
+          <div
+            class="news-main-item father"
+            v-if="index > 0"
+            :class="{ activeAddNews: activeNewsIndex === index }"
+            @click="activeNewsIndex = index"
+          >
+            <div class="news-content-item">
+              <div class="news-content-item-title">{{ news.title }}</div>
+              <div class="news-content-item-img">
+                <img class="material-img" :src="news.thumbUrl" width="100%" />
+              </div>
+            </div>
+            <div class="child">
+              <Button
+                v-if="newsList.length > index + 1"
+                shape="circle"
+                type="default"
+                size="small"
+                @click="() => moveDownNews(index)"
+              >
+                <IconifyIcon icon="ep:arrow-down-bold" />
+              </Button>
+              <Button
+                v-if="index > 0"
+                type="default"
+                shape="circle"
+                size="small"
+                @click="() => moveUpNews(index)"
+              >
+                <IconifyIcon icon="ep:arrow-up-bold" />
+              </Button>
+              <Button
+                v-if="isCreating"
+                type="primary"
+                danger
+                size="small"
+                shape="circle"
+                @click="() => removeNews(index)"
+              >
+                <IconifyIcon icon="ep:delete" />
+              </Button>
+            </div>
+          </div>
+        </div>
+        <Row justify="center" class="ope-row">
+          <Button
+            type="primary"
+            shape="circle"
+            @click="plusNews"
+            v-if="newsList.length < 8 && isCreating"
+          >
+            <IconifyIcon icon="ep:plus" />
+          </Button>
+        </Row>
+      </div>
+    </Layout.Sider>
+    <Layout.Content :style="{ backgroundColor: '#fff' }">
+      <div v-if="newsList.length > 0 && activeNewsItem">
+        <!-- 标题、作者、原文地址 -->
+        <Row :gutter="20">
+          <Col :span="24">
+            <Input
+              v-model:value="activeNewsItem.title"
+              placeholder="请输入标题（必填）"
+            />
+          </Col>
+          <Col :span="24" style="margin-top: 5px">
+            <Input
+              v-model:value="activeNewsItem.author"
+              placeholder="请输入作者"
+            />
+          </Col>
+          <Col :span="24" style="margin-top: 5px">
+            <Input
+              v-model:value="activeNewsItem.contentSourceUrl"
+              placeholder="请输入原文地址"
+            />
+          </Col>
+        </Row>
+        <!-- 封面和摘要 -->
+        <Row :gutter="20">
+          <Col :span="12">
+            <CoverSelect
+              v-model="activeNewsItem"
+              :is-first="activeNewsIndex === 0"
+            />
+          </Col>
+          <Col :span="12">
+            <p>摘要:</p>
+            <Textarea
+              :rows="8"
+              v-model:value="activeNewsItem.digest"
+              placeholder="请输入摘要"
+              class="digest"
+              :maxlength="120"
+              :show-count="true"
+            />
+          </Col>
+        </Row>
+        <!--富文本编辑器组件-->
+        <Row>
+          <Col :span="24">
+            <RichTextarea v-model="activeNewsItem.content" />
+          </Col>
+        </Row>
+      </div>
+    </Layout.Content>
+  </Layout>
+</template>
+
+<style lang="scss" scoped>
+.ope-row {
+  padding-top: 5px;
+  margin-top: 5px;
+  text-align: center;
+  border-top: 1px solid #eaeaea;
+}
+
+:deep(.ant-row) {
+  margin-bottom: 20px;
+}
+
+:deep(.ant-row:last-child) {
+  margin-bottom: 0;
+}
+
+.digest {
+  display: inline-block;
+  width: 100%;
+  vertical-align: top;
+}
+
+/* 新增图文 */
+.news-main {
+  width: 100%;
+  height: 120px;
+  margin: auto;
+  background-color: #fff;
+}
+
+.news-content {
+  position: relative;
+  width: 100%;
+  height: 120px;
+  background-color: #acadae;
+}
+
+.news-content-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: inline-block;
+  width: 98%;
+  height: 25px;
+  padding: 1%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 15px;
+  color: #fff;
+  white-space: nowrap;
+  background-color: black;
+  opacity: 0.65;
+}
+
+.news-main-item {
+  width: 100%;
+  padding: 5px 0;
+  margin: auto;
+  background-color: #fff;
+  border-top: 1px solid #eaeaea;
+}
+
+.news-content-item {
+  position: relative;
+  margin-left: -3px;
+}
+
+.news-content-item-title {
+  display: inline-block;
+  width: 70%;
+  font-size: 12px;
+}
+
+.news-content-item-img {
+  display: inline-block;
+  width: 25%;
+  background-color: #acadae;
+}
+
+.select-item {
+  width: 60%;
+  padding: 10px;
+  margin: 0 auto 10px;
+  border: 1px solid #eaeaea;
+
+  .activeAddNews {
+    border: 5px solid #2bb673;
+  }
+}
+
+.father .child {
+  position: relative;
+  bottom: 25px;
+  display: none;
+  text-align: center;
+}
+
+.father:hover .child {
+  display: block;
+}
+
+.material-img {
+  width: 100%;
+  height: 100%;
+}
+</style>

apps/web-antd/src/views/mp/draft/modules/types.ts

@@ -0,0 +1,41 @@
+interface NewsItem {
+  title: string;
+  thumbMediaId: string;
+  author: string;
+  digest: string;
+  showCoverPic: number;
+  content: string;
+  contentSourceUrl: string;
+  needOpenComment: number;
+  onlyFansCanComment: number;
+  thumbUrl: string;
+  picUrl?: string; // 用于预览封面
+}
+
+interface NewsItemList {
+  newsItem: NewsItem[];
+}
+
+interface Article {
+  mediaId: string;
+  content: NewsItemList;
+  updateTime: number;
+}
+
+const createEmptyNewsItem = (): NewsItem => {
+  return {
+    title: '',
+    thumbMediaId: '',
+    author: '',
+    digest: '',
+    showCoverPic: 0,
+    content: '',
+    contentSourceUrl: '',
+    needOpenComment: 0,
+    onlyFansCanComment: 0,
+    thumbUrl: '',
+  };
+};
+
+export type { Article, NewsItem, NewsItemList };
+export { createEmptyNewsItem };

apps/web-antd/src/views/mp/menu/data.ts

@@ -0,0 +1,9 @@
+/** 菜单未选中标识 */
+export const MENU_NOT_SELECTED = '__MENU_NOT_SELECTED__';
+
+/** 菜单级别枚举 */
+export enum Level {
+  Child = '2',
+  Parent = '1',
+  Undefined = '0',
+}

apps/web-antd/src/views/mp/menu/index.vue

@@ -1,29 +1,405 @@
 <script lang="ts" setup>
-import { DocAlert, Page } from '@vben/common-ui';
+import type { Menu, RawMenu } from './modules/types';
 
-import { Button } from 'ant-design-vue';
+import { ref } from 'vue';
+
+import { confirm, ContentWrap, DocAlert, Page } from '@vben/common-ui';
+import { handleTree } from '@vben/utils';
+
+import { Button, Form, message } from 'ant-design-vue';
+
+import * as MpMenuApi from '#/api/mp/menu';
+import { Level, MENU_NOT_SELECTED } from '#/views/mp/menu/data';
+import MenuEditor from '#/views/mp/menu/modules/menu-editor.vue';
+import MenuPreviewer from '#/views/mp/menu/modules/menu-previewer.vue';
+import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
+
+defineOptions({ name: 'MpMenu' });
+
+// ======================== 列表查询 ========================
+const loading = ref(false); // 遮罩层
+const accountId = ref(-1);
+const accountName = ref<string>('');
+const menuList = ref<Menu[]>([]);
+
+// ======================== 菜单操作 ========================
+// 当前选中菜单编码：
+//  * 一级（'x'）
+//  * 二级（'x-y'）
+//  * 未选中（MENU_NOT_SELECTED）
+const activeIndex = ref<string>(MENU_NOT_SELECTED);
+// 二级菜单显示标志: 归属的一级菜单index
+// * 未初始化：-1
+// * 初始化：x
+const parentIndex = ref(-1);
+
+// ======================== 菜单编辑 ========================
+const showRightPanel = ref(false); // 右边配置显示默认详情还是配置详情
+const isParent = ref<boolean>(true); // 是否一级菜单，控制MenuEditor中name字段长度
+const activeMenu = ref<Menu>({}); // 选中菜单，MenuEditor的modelValue
+
+// 一些临时值放在这里进行判断，如果放在 activeMenu，由于引用关系，menu 也会多了多余的参数
+const tempSelfObj = ref<{
+  grand: Level;
+  x: number;
+  y: number;
+}>({
+  grand: Level.Undefined,
+  x: 0,
+  y: 0,
+});
+const dialogNewsVisible = ref(false); // 跳转图文时的素材选择弹窗
+
+/** 侦听公众号变化 */
+function onAccountChanged(id: number, name: string) {
+  accountId.value = id;
+  accountName.value = name;
+  getList();
+}
+
+/** 查询并转换菜单 */
+async function getList() {
+  loading.value = true;
+  try {
+    const data = await MpMenuApi.getMenuList(accountId.value);
+    const menuData = menuListToFrontend(data);
+    menuList.value = handleTree(menuData, 'id') as Menu[];
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  resetForm();
+  getList();
+}
+
+/** 将后端返回的 menuList，转换成前端的 menuList */
+function menuListToFrontend(list: any[]) {
+  if (!list) return [];
+
+  const result: RawMenu[] = [];
+  list.forEach((item: RawMenu) => {
+    const menu: any = {
+      ...item,
+    };
+    menu.reply = {
+      type: item.replyMessageType,
+      accountId: item.accountId,
+      content: item.replyContent,
+      mediaId: item.replyMediaId,
+      url: item.replyMediaUrl,
+      title: item.replyTitle,
+      description: item.replyDescription,
+      thumbMediaId: item.replyThumbMediaId,
+      thumbMediaUrl: item.replyThumbMediaUrl,
+      articles: item.replyArticles,
+      musicUrl: item.replyMusicUrl,
+      hqMusicUrl: item.replyHqMusicUrl,
+    };
+    result.push(menu as RawMenu);
+  });
+  return result;
+}
+
+/** 重置表单，清空表单数据 */
+function resetForm() {
+  // 菜单操作
+  activeIndex.value = MENU_NOT_SELECTED;
+  parentIndex.value = -1;
+
+  // 菜单编辑
+  showRightPanel.value = false;
+  activeMenu.value = {};
+  tempSelfObj.value = { grand: Level.Undefined, x: 0, y: 0 };
+  dialogNewsVisible.value = false;
+}
+
+// ======================== 菜单操作 ========================
+/** 一级菜单点击事件 */
+function menuClicked(parent: Menu, x: number) {
+  // 右侧的表单相关
+  showRightPanel.value = true; // 右边菜单
+  activeMenu.value = parent; // 这个如果放在顶部，flag 会没有。因为重新赋值了。
+  tempSelfObj.value.grand = Level.Parent; // 表示一级菜单
+  tempSelfObj.value.x = x; // 表示一级菜单索引
+  isParent.value = true;
+
+  // 左侧的选中
+  activeIndex.value = `${x}`; // 菜单选中样式
+  parentIndex.value = x; // 二级菜单显示标志
+}
+
+/** 二级菜单点击事件 */
+function subMenuClicked(child: Menu, x: number, y: number) {
+  // 右侧的表单相关
+  showRightPanel.value = true; // 右边菜单
+  activeMenu.value = child; // 将点击的数据放到临时变量，对象有引用作用
+  tempSelfObj.value.grand = Level.Child; // 表示二级菜单
+  tempSelfObj.value.x = x; // 表示一级菜单索引
+  tempSelfObj.value.y = y; // 表示二级菜单索引
+  isParent.value = false;
+
+  // 左侧的选中
+  activeIndex.value = `${x}-${y}`;
+}
+
+/** 删除当前菜单 */
+async function onDeleteMenu() {
+  try {
+    await confirm('确定要删除吗?');
+    if (tempSelfObj.value.grand === Level.Parent) {
+      // 一级菜单的删除方法
+      menuList.value.splice(tempSelfObj.value.x, 1);
+    } else if (tempSelfObj.value.grand === Level.Child) {
+      // 二级菜单的删除方法
+      menuList.value[tempSelfObj.value.x]?.children?.splice(
+        tempSelfObj.value.y,
+        1,
+      );
+    }
+    // 提示
+    message.success('删除成功');
+
+    // 处理菜单的选中
+    activeMenu.value = {};
+    showRightPanel.value = false;
+    activeIndex.value = MENU_NOT_SELECTED;
+  } catch {}
+}
+
+// ======================== 菜单编辑 ========================
+/** 保存菜单 */
+async function onSave() {
+  try {
+    await confirm('确定要保存吗?');
+    const hideLoading = message.loading({
+      content: '保存中...',
+      duration: 0,
+    });
+    try {
+      await MpMenuApi.saveMenu(accountId.value, menuListToBackend());
+      getList();
+      message.success('发布成功');
+    } finally {
+      hideLoading();
+    }
+  } catch {
+    //
+  }
+}
+
+/** 清空菜单 */
+async function onClear() {
+  try {
+    await confirm('确定要删除吗?');
+    const hideLoading = message.loading({
+      content: '删除中...',
+      duration: 0,
+    });
+    try {
+      await MpMenuApi.deleteMenu(accountId.value);
+      handleQuery();
+      message.success('清空成功');
+    } finally {
+      hideLoading();
+    }
+  } catch {
+    //
+  }
+}
+
+/** 将前端的 menuList，转换成后端接收的 menuList */
+function menuListToBackend() {
+  const result: any[] = [];
+  menuList.value.forEach((item) => {
+    const menu = menuToBackend(item);
+    result.push(menu);
+
+    // 处理子菜单
+    if (!item.children || item.children.length <= 0) {
+      return;
+    }
+    menu.children = [];
+    item.children.forEach((subItem) => {
+      menu.children.push(menuToBackend(subItem));
+    });
+  });
+  return result;
+}
+
+/** 将前端的 menu，转换成后端接收的 menu */
+// TODO: @芋艿，需要根据后台API删除不需要的字段
+function menuToBackend(menu: any) {
+  const result = {
+    ...menu,
+    children: undefined, // 不处理子节点
+    reply: undefined, // 稍后复制
+  };
+  result.replyMessageType = menu.reply.type;
+  result.replyContent = menu.reply.content;
+  result.replyMediaId = menu.reply.mediaId;
+  result.replyMediaUrl = menu.reply.url;
+  result.replyTitle = menu.reply.title;
+  result.replyDescription = menu.reply.description;
+  result.replyThumbMediaId = menu.reply.thumbMediaId;
+  result.replyThumbMediaUrl = menu.reply.thumbMediaUrl;
+  result.replyArticles = menu.reply.articles;
+  result.replyMusicUrl = menu.reply.musicUrl;
+  result.replyHqMusicUrl = menu.reply.hqMusicUrl;
+
+  return result;
+}
 </script>
 
 <template>
-  <Page>
-    <DocAlert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
-    <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/menu/index"
-    >
-      可参考
-      https://github.com/yudaocode/yudao-ui-admin-vue3/blob/master/src/views/mp/menu/index
-      代码，pull request 贡献给我们！
-    </Button>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
+    </template>
+
+    <!-- 搜索工作栏 -->
+    <!-- <ContentWrap> -->
+    <Form layout="inline" class="-mb-15px w-240px">
+      <Form.Item label="公众号" prop="accountId" class="w-240px">
+        <WxAccountSelect @change="onAccountChanged" />
+      </Form.Item>
+    </Form>
+    <!-- </ContentWrap> -->
+
+    <ContentWrap>
+      <div class="clearfix public-account-management" v-loading="loading">
+        <!--左边配置菜单-->
+        <div class="left">
+          <div class="weixin-hd">
+            <div class="weixin-title">{{ accountName }}</div>
+          </div>
+          <div class="clearfix weixin-menu">
+            <MenuPreviewer
+              v-model="menuList"
+              :account-id="accountId"
+              :active-index="activeIndex"
+              :parent-index="parentIndex"
+              @menu-clicked="(parent, x) => menuClicked(parent, x)"
+              @submenu-clicked="(child, x, y) => subMenuClicked(child, x, y)"
+            />
+          </div>
+          <div class="save-div">
+            <Button
+              class="save-btn"
+              type="primary"
+              @click="onSave"
+              v-hasPermi="['mp:menu:save']"
+            >
+              保存并发布菜单
+            </Button>
+            <Button
+              class="save-btn"
+              danger
+              @click="onClear"
+              v-hasPermi="['mp:menu:delete']"
+            >
+              清空菜单
+            </Button>
+          </div>
+        </div>
+        <!--右边配置-->
+        <div class="right" v-if="showRightPanel">
+          <MenuEditor
+            :account-id="accountId"
+            :is-parent="isParent"
+            v-model="activeMenu"
+            @delete="onDeleteMenu"
+          />
+        </div>
+        <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
+        <div v-else class="right">
+          <p>请选择菜单配置</p>
+        </div>
+      </div>
+    </ContentWrap>
   </Page>
 </template>
+
+<style lang="scss" scoped>
+/* 公共颜色变量 */
+.clearfix {
+  *zoom: 1;
+}
+
+.clearfix::after {
+  clear: both;
+  display: table;
+  content: '';
+}
+
+div {
+  text-align: left;
+}
+
+.weixin-hd {
+  position: relative;
+  bottom: 426px;
+  left: 0;
+  width: 300px;
+  height: 64px;
+  color: #fff;
+  text-align: center;
+  background: transparent url('./assets/menu_head.png') no-repeat 0 0;
+  background-position: 0 0;
+  background-size: 100%;
+}
+
+.weixin-title {
+  position: absolute;
+  top: 33px;
+  left: 0;
+  width: 100%;
+  font-size: 14px;
+  color: #fff;
+  text-align: center;
+}
+
+.weixin-menu {
+  padding-left: 43px;
+  font-size: 12px;
+  background: transparent url('./assets/menu_foot.png') no-repeat 0 0;
+}
+
+.public-account-management {
+  width: 1200px;
+  // min-width: 1200px;
+  margin: 0 auto;
+
+  .left {
+    position: relative;
+    float: left;
+    box-sizing: border-box;
+    display: block;
+    width: 350px;
+    height: 715px;
+    padding: 518px 25px 88px;
+    background: url('./assets/iphone_backImg.png') no-repeat;
+    background-size: 100% auto;
+
+    .save-div {
+      display: flex;
+      gap: 10px;
+      align-items: center;
+      justify-content: center;
+      margin-top: 15px;
+    }
+  }
+
+  /* 右边菜单内容 */
+  .right {
+    float: left;
+    box-sizing: border-box;
+    width: 63%;
+    padding: 20px;
+    margin-left: 20px;
+    background-color: #e8e7e7;
+  }
+}
+</style>

apps/web-antd/src/views/mp/menu/modules/menu-editor.vue

@@ -0,0 +1,286 @@
+<script lang="ts" setup>
+import { computed, nextTick, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  Button,
+  Col,
+  Input,
+  message,
+  Modal,
+  Row,
+  Select,
+} from 'ant-design-vue';
+
+import WxMaterialSelect from '#/views/mp/modules/wx-material-select/main.vue';
+import WxNews from '#/views/mp/modules/wx-news/main.vue';
+import WxReplySelect from '#/views/mp/modules/wx-reply/main.vue';
+
+import menuOptions from './menuOptions';
+
+const props = defineProps<{
+  accountId: number;
+  isParent: boolean;
+  modelValue: any;
+}>();
+
+const emit = defineEmits<{
+  (e: 'delete', v: void): void;
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+const menu = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit('update:modelValue', val);
+  },
+});
+const showNewsDialog = ref(false);
+const hackResetWxReplySelect = ref(false);
+const isLeave = computed<boolean>(() => !(menu.value.children?.length > 0));
+
+watch(menu, () => {
+  hackResetWxReplySelect.value = false; // 销毁组件
+  nextTick(() => {
+    hackResetWxReplySelect.value = true; // 重建组件
+  });
+});
+
+// ======================== 菜单编辑（素材选择） ========================
+/** 选择素材 */
+function selectMaterial(item: any) {
+  const articleId = item.articleId;
+  const articles = item.content.newsItem;
+  // 提示，针对多图文
+  if (articles.length > 1) {
+    message.warning('您选择的是多图文，将默认跳转第一篇');
+  }
+  showNewsDialog.value = false;
+
+  // 设置菜单的回复
+  menu.value.articleId = articleId;
+  menu.value.replyArticles = [];
+  articles.forEach((article: any) => {
+    menu.value.replyArticles.push({
+      title: article.title,
+      description: article.digest,
+      picUrl: article.picUrl,
+      url: article.url,
+    });
+  });
+}
+
+/** 删除素材 */
+function deleteMaterial() {
+  delete menu.value.articleId;
+  delete menu.value.replyArticles;
+}
+</script>
+
+<template>
+  <div>
+    <div class="configure-page">
+      <div class="delete-btn">
+        <Button type="primary" danger @click="emit('delete')">
+          <IconifyIcon icon="ep:delete" />
+          删除当前菜单
+        </Button>
+      </div>
+      <div>
+        <span>菜单名称：</span>
+        <Input
+          class="input-width"
+          v-model:value="menu.name"
+          placeholder="请输入菜单名称"
+          :maxlength="isParent ? 4 : 7"
+          allow-clear
+        />
+      </div>
+      <div v-if="isLeave">
+        <div class="menu-content">
+          <span>菜单标识：</span>
+          <Input
+            class="input-width"
+            v-model:value="menu.menuKey"
+            placeholder="请输入菜单 KEY"
+            allow-clear
+          />
+        </div>
+        <div class="menu-content">
+          <span>菜单内容：</span>
+          <Select
+            v-model:value="menu.type"
+            placeholder="请选择"
+            class="input-width"
+            allow-clear
+          >
+            <Select.Option
+              v-for="item in menuOptions"
+              :label="item.label"
+              :value="item.value"
+              :key="item.value"
+            >
+              {{ item.label }}
+            </Select.Option>
+          </Select>
+        </div>
+        <div class="configur-content" v-if="menu.type === 'view'">
+          <span>跳转链接：</span>
+          <Input
+            class="input-width"
+            v-model:value="menu.url"
+            placeholder="请输入链接"
+            allow-clear
+          />
+        </div>
+        <div class="configur-content" v-if="menu.type === 'miniprogram'">
+          <div class="applet">
+            <span>小程序的 appid ：</span>
+            <Input
+              class="input-width"
+              v-model:value="menu.miniProgramAppId"
+              placeholder="请输入小程序的appid"
+              allow-clear
+            />
+          </div>
+          <div class="applet">
+            <span>小程序的页面路径：</span>
+            <Input
+              class="input-width"
+              v-model:value="menu.miniProgramPagePath"
+              placeholder="请输入小程序的页面路径，如：pages/index"
+              allow-clear
+            />
+          </div>
+          <div class="applet">
+            <span>小程序的备用网页：</span>
+            <Input
+              class="input-width"
+              v-model:value="menu.url"
+              placeholder="不支持小程序的老版本客户端将打开本网页"
+              allow-clear
+            />
+          </div>
+          <p class="blue">
+            tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
+          </p>
+        </div>
+        <div
+          class="configur-content"
+          v-if="menu.type === 'article_view_limited'"
+        >
+          <Row>
+            <div class="select-item" v-if="menu && menu.replyArticles">
+              <WxNews :articles="menu.replyArticles" />
+              <Row class="ope-row" justify="center" align="middle">
+                <Button
+                  type="primary"
+                  danger
+                  shape="circle"
+                  @click="deleteMaterial"
+                >
+                  <IconifyIcon icon="ep:delete" />
+                </Button>
+              </Row>
+            </div>
+            <div v-else>
+              <Row justify="center">
+                <Col :span="24" style="text-align: center">
+                  <Button type="primary" @click="showNewsDialog = true">
+                    素材库选择
+                    <IconifyIcon icon="ep:circle-check" />
+                  </Button>
+                </Col>
+              </Row>
+            </div>
+            <Modal
+              title="选择图文"
+              v-model:open="showNewsDialog"
+              width="80%"
+              destroy-on-close
+            >
+              <WxMaterialSelect
+                type="news"
+                :account-id="props.accountId"
+                @select-material="selectMaterial"
+              />
+            </Modal>
+          </Row>
+        </div>
+        <div
+          class="configur-content"
+          v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
+        >
+          <WxReplySelect v-if="hackResetWxReplySelect" v-model="menu.reply" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+:deep(.ant-input) {
+  // width: 70%;
+  margin-right: 2%;
+}
+
+.configure-page {
+  .delete-btn {
+    margin-bottom: 15px;
+    text-align: right;
+  }
+
+  .menu-content {
+    margin-top: 20px;
+  }
+
+  .configur-content {
+    padding: 20px 10px;
+    margin-top: 20px;
+    background-color: #fff;
+    border-radius: 5px;
+
+    .select-item {
+      width: 280px;
+      padding: 10px;
+      margin: 0 auto 10px;
+      border: 1px solid #eaeaea;
+
+      .ope-row {
+        padding-top: 10px;
+        text-align: center;
+      }
+    }
+  }
+
+  .blue {
+    margin-top: 10px;
+    color: #29b6f6;
+  }
+
+  .applet {
+    margin-bottom: 20px;
+
+    span {
+      width: 20%;
+    }
+  }
+
+  .input-width {
+    width: 240px;
+  }
+
+  .material {
+    .input-width {
+      width: 30%;
+    }
+
+    :deep(.ant-input) {
+      width: 80%;
+    }
+  }
+}
+</style>

apps/web-antd/src/views/mp/menu/modules/menu-previewer.vue

@@ -0,0 +1,252 @@
+<script lang="ts" setup>
+import type { Menu } from './types';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import draggable from 'vuedraggable';
+
+const props = defineProps<{
+  accountId: number;
+  activeIndex: string;
+  modelValue: Menu[];
+  parentIndex: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Menu[]): void;
+  (e: 'menuClicked', parent: Menu, x: number): void;
+  (e: 'submenuClicked', child: Menu, x: number, y: number): void;
+}>();
+
+const menuList = computed<Menu[]>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+/** 添加横向一级菜单 */
+function addMenu() {
+  const index = menuList.value.length;
+  const menu = {
+    name: '菜单名称',
+    children: [],
+    reply: {
+      // 用于存储回复内容
+      type: 'text',
+      accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
+    },
+  };
+  menuList.value[index] = menu;
+  menuClicked(menu, index - 1);
+}
+
+/** 添加横向二级菜单；parent 表示要操作的父菜单 */
+function addSubMenu(i: number, parent: any) {
+  const subMenuKeyLength = parent.children.length; // 获取二级菜单key长度
+  const addButton = {
+    name: '子菜单名称',
+    reply: {
+      // 用于存储回复内容
+      type: 'text',
+      accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
+    },
+  };
+  parent.children[subMenuKeyLength] = addButton;
+  subMenuClicked(parent.children[subMenuKeyLength], i, subMenuKeyLength);
+}
+
+/** 一级菜单点击 */
+function menuClicked(parent: Menu, x: number) {
+  emit('menuClicked', parent, x);
+}
+
+/** 二级菜单点击 */
+function subMenuClicked(child: Menu, x: number, y: number) {
+  emit('submenuClicked', child, x, y);
+}
+
+/**
+ * 处理一级菜单展开后被拖动，激活(展开)原来活动的一级菜单
+ *
+ * @param options - 拖动参数对象
+ * @param options.oldIndex - 一级菜单拖动前的位置
+ * @param options.newIndex - 一级菜单拖动后的位置
+ */
+function onParentDragEnd({
+  oldIndex,
+  newIndex,
+}: {
+  newIndex: number;
+  oldIndex: number;
+}) {
+  // 二级菜单没有展开，直接返回
+  if (props.activeIndex === '__MENU_NOT_SELECTED__') {
+    return;
+  }
+
+  // 使用一个辅助数组来模拟菜单移动，然后找到展开的二级菜单的新下标`newParent`
+  const positions = Array.from({ length: menuList.value.length }).fill(false);
+  positions[props.parentIndex] = true;
+  const [out] = positions.splice(oldIndex, 1); // 移出菜单，保存到变量out
+  positions.splice(newIndex, 0, out ?? false); // 把out变量插入被移出的菜单
+  const newParentIndex = positions.indexOf(true);
+
+  // 找到菜单元素，触发一级菜单点击
+  const parent = menuList.value[newParentIndex];
+  if (parent && newParentIndex !== -1) {
+    emit('menuClicked', parent, newParentIndex);
+  }
+}
+
+/**
+ * 处理二级菜单展开后被拖动，激活被拖动的菜单
+ *
+ * @param options - 拖动参数对象
+ * @param options.newIndex - 二级菜单拖动后的位置
+ */
+function onChildDragEnd({ newIndex }: { newIndex: number }) {
+  const x = props.parentIndex;
+  const y = newIndex;
+  const children = menuList.value[x]?.children;
+  if (children && children?.length > 0) {
+    const child = children[y];
+    if (child) {
+      emit('submenuClicked', child, x, y);
+    }
+  }
+}
+</script>
+
+<template>
+  <draggable
+    v-model="menuList"
+    item-key="id"
+    ghost-class="draggable-ghost"
+    :animation="400"
+    @end="onParentDragEnd"
+  >
+    <template #item="{ element: parent, index: x }">
+      <div class="menu-bottom">
+        <!-- 一级菜单 -->
+        <div
+          @click="menuClicked(parent, x)"
+          class="menu-item"
+          :class="{ active: props.activeIndex === `${x}` }"
+        >
+          <IconifyIcon icon="ep:fold" color="black" />{{ parent.name }}
+        </div>
+        <!-- 以下为二级菜单-->
+        <div class="submenu" v-if="props.parentIndex === x && parent.children">
+          <draggable
+            v-model="parent.children"
+            item-key="id"
+            ghost-class="draggable-ghost"
+            :animation="400"
+            @end="onChildDragEnd"
+          >
+            <template #item="{ element: child, index: y }">
+              <div class="menu-bottom subtitle">
+                <div
+                  class="menu-sub-item"
+                  v-if="parent.children"
+                  :class="{ active: props.activeIndex === `${x}-${y}` }"
+                  @click="subMenuClicked(child, x, y)"
+                >
+                  {{ child.name }}
+                </div>
+              </div>
+            </template>
+          </draggable>
+          <!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号  -->
+          <div
+            class="menu-bottom menu-addicon"
+            v-if="!parent.children || parent.children.length < 5"
+            @click="addSubMenu(x, parent)"
+          >
+            <IconifyIcon icon="ep:plus" class="plus" />
+          </div>
+        </div>
+      </div>
+    </template>
+  </draggable>
+
+  <!-- 一级菜单加号 -->
+  <div
+    class="menu-bottom menu-addicon"
+    v-if="menuList.length < 3"
+    @click="addMenu"
+  >
+    <IconifyIcon icon="ep:plus" class="plus" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.menu-bottom {
+  position: relative;
+  float: left;
+  box-sizing: border-box;
+  display: block;
+  width: 85.5px;
+  text-align: center;
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid #ebedee;
+
+  &.menu-addicon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 46px;
+    line-height: 46px;
+
+    .plus {
+      color: #2bb673;
+    }
+  }
+
+  .menu-item {
+    // text-align: center;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 44px;
+    line-height: 44px;
+
+    &.active {
+      border: 1px solid #2bb673;
+    }
+  }
+
+  .menu-sub-item {
+    box-sizing: border-box;
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+
+    &.active {
+      border: 1px solid #2bb673;
+    }
+  }
+}
+
+/* 第二级菜单 */
+.submenu {
+  position: absolute;
+  bottom: 45px;
+  width: 85.5px;
+
+  .subtitle {
+    box-sizing: border-box;
+    background-color: #fff;
+  }
+}
+
+.draggable-ghost {
+  background: #f7fafc;
+  border: 1px solid #4299e1;
+  opacity: 0.5;
+}
+</style>

apps/web-antd/src/views/mp/menu/modules/menuOptions.ts

@@ -0,0 +1,42 @@
+export default [
+  {
+    value: 'view',
+    label: '跳转网页',
+  },
+  {
+    value: 'miniprogram',
+    label: '跳转小程序',
+  },
+  {
+    value: 'click',
+    label: '点击回复',
+  },
+  {
+    value: 'article_view_limited',
+    label: '跳转图文消息',
+  },
+  {
+    value: 'scancode_push',
+    label: '扫码直接返回结果',
+  },
+  {
+    value: 'scancode_waitmsg',
+    label: '扫码回复',
+  },
+  {
+    value: 'pic_sysphoto',
+    label: '系统拍照发图',
+  },
+  {
+    value: 'pic_photo_or_album',
+    label: '拍照或者相册',
+  },
+  {
+    value: 'pic_weixin',
+    label: '微信相册',
+  },
+  {
+    value: 'location_select',
+    label: '选择地理位置',
+  },
+];

apps/web-antd/src/views/mp/menu/modules/types.ts

@@ -0,0 +1,73 @@
+export interface Replay {
+  title: string;
+  description: string;
+  picUrl: string;
+  url: string;
+}
+
+export type MenuType =
+  | ''
+  | 'article_view_limited'
+  | 'click'
+  | 'location_select'
+  | 'pic_photo_or_album'
+  | 'pic_sysphoto'
+  | 'pic_weixin'
+  | 'scancode_push'
+  | 'scancode_waitmsg'
+  | 'view';
+
+interface _RawMenu {
+  // db
+  id: number;
+  parentId: number;
+  accountId: number;
+  appId: string;
+  createTime: number;
+
+  // mp-native
+  name: string;
+  menuKey: string;
+  type: MenuType;
+  url: string;
+  miniProgramAppId: string;
+  miniProgramPagePath: string;
+  articleId: string;
+  replyMessageType: string;
+  replyContent: string;
+  replyMediaId: string;
+  replyMediaUrl: string;
+  replyThumbMediaId: string;
+  replyThumbMediaUrl: string;
+  replyTitle: string;
+  replyDescription: string;
+  replyArticles: Replay;
+  replyMusicUrl: string;
+  replyHqMusicUrl: string;
+}
+
+export type RawMenu = Partial<_RawMenu>;
+
+interface _Reply {
+  type: string;
+  accountId: number;
+  content: string;
+  mediaId: string;
+  url: string;
+  thumbMediaId: string;
+  thumbMediaUrl: string;
+  title: string;
+  description: string;
+  articles: null | Replay[];
+  musicUrl: string;
+  hqMusicUrl: string;
+}
+
+export type Reply = Partial<_Reply>;
+
+interface _Menu extends RawMenu {
+  children: _Menu[];
+  reply: Reply;
+}
+
+export type Menu = Partial<_Menu>;

apps/web-antd/src/views/mp/modules/wx-account-select/index.ts

@@ -0,0 +1 @@
+export { default } from './main.vue';

apps/web-antd/src/views/mp/modules/wx-account-select/main.vue

@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+import type { MpAccountApi } from '#/api/mp/account';
+
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useTabs } from '@vben/hooks';
+
+import { message, Select, SelectOption } from 'ant-design-vue';
+
+import { getSimpleAccountList } from '#/api/mp/account';
+
+defineOptions({ name: 'WxAccountSelect' });
+
+const props = defineProps<{
+  modelValue?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'change', id: number, name: string): void;
+  (e: 'update:modelValue', id: number): void;
+}>();
+
+const { closeCurrentTab } = useTabs(); // 视图操作
+const { push } = useRouter();
+
+const account: MpAccountApi.AccountSimple = reactive({
+  id: -1,
+  name: '',
+});
+
+const accountList = ref<MpAccountApi.AccountSimple[]>([]);
+
+// 计算当前选中的 ID，优先使用 modelValue（表单绑定），否则使用内部 account.id
+const currentId = computed({
+  get: () => {
+    // 如果外部传入了 modelValue，优先使用外部的值
+    if (props.modelValue !== undefined && props.modelValue !== null) {
+      return props.modelValue;
+    }
+    return account.id;
+  },
+  set: (value: number) => {
+    // 更新内部状态
+    account.id = value;
+    // 同步到外部（表单系统）
+    emit('update:modelValue', value);
+    // 触发 change 事件（保持向后兼容）
+    const found = accountList.value.find(
+      (v: MpAccountApi.AccountSimple) => v.id === value,
+    );
+    if (found) {
+      account.name = found.name;
+      emit('change', value, found.name);
+    }
+  },
+});
+
+// 监听外部 modelValue 变化，同步到内部状态
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (
+      newValue !== undefined &&
+      newValue !== null &&
+      newValue !== account.id
+    ) {
+      account.id = newValue;
+      const found = accountList.value.find(
+        (v: MpAccountApi.AccountSimple) => v.id === newValue,
+      );
+      if (found) {
+        account.name = found.name;
+      }
+    }
+  },
+);
+
+/** 查询公众号列表 */
+async function handleQuery() {
+  accountList.value = await getSimpleAccountList();
+  if (accountList.value.length === 0) {
+    message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置');
+    await closeCurrentTab();
+    await push({ name: 'MpAccount' });
+    return;
+  }
+
+  // 如果外部没有传入值（modelValue 为空），默认选中第一个
+  if (props.modelValue === undefined || props.modelValue === null) {
+    const firstAccount = accountList.value[0];
+    if (firstAccount) {
+      currentId.value = firstAccount.id;
+      account.name = firstAccount.name;
+      emit('change', firstAccount.id, firstAccount.name);
+    }
+  } else {
+    // 如果外部有值，同步到内部状态
+    const found = accountList.value.find(
+      (v: MpAccountApi.AccountSimple) => v.id === props.modelValue,
+    );
+    if (found) {
+      account.id = props.modelValue;
+      account.name = found.name;
+    }
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  handleQuery();
+});
+</script>
+
+<template>
+  <Select
+    v-model:value="currentId"
+    placeholder="请选择公众号"
+    style="width: 240px"
+  >
+    <SelectOption v-for="item in accountList" :key="item.id" :value="item.id">
+      {{ item.name }}
+    </SelectOption>
+  </Select>
+</template>

apps/web-antd/src/views/mp/modules/wx-location/index.ts

@@ -0,0 +1 @@
+export { default } from './main.vue';

apps/web-antd/src/views/mp/modules/wx-location/main.vue

@@ -0,0 +1,62 @@
+<!--
+  【微信消息 - 定位】TODO @Dhb52 目前未启用
+-->
+<script lang="ts" setup>
+import { Col, Row } from 'ant-design-vue';
+
+defineOptions({ name: 'WxLocation' });
+
+const props = defineProps({
+  locationX: {
+    required: true,
+    type: Number,
+  },
+  locationY: {
+    required: true,
+    type: Number,
+  },
+  label: {
+    // 地名
+    required: true,
+    type: String,
+  },
+  qqMapKey: {
+    // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
+    required: false,
+    type: String,
+    default: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // 需要自定义
+  },
+});
+
+defineExpose({
+  locationX: props.locationX,
+  locationY: props.locationY,
+  label: props.label,
+  qqMapKey: props.qqMapKey,
+});
+</script>
+
+<template>
+  <div>
+    <a
+      target="_blank"
+      :href="`https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${
+        locationY
+      }&pointy=${locationX}&name=${label}&ref=yudao`"
+    >
+      <Col>
+        <Row>
+          <img
+            :src="`https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${
+              locationX
+            },${locationY}&key=${qqMapKey}&size=250*180`"
+          />
+        </Row>
+        <Row>
+          <Icon icon="ep:location" />
+          {{ label }}
+        </Row>
+      </Col>
+    </a>
+  </div>
+</template>

apps/web-antd/src/views/mp/modules/wx-material-select/index.ts

@@ -0,0 +1,3 @@
+export { default } from './main.vue';
+
+export { MaterialType, NewsType } from './types';

apps/web-antd/src/views/mp/modules/wx-material-select/main.vue

@@ -0,0 +1,283 @@
+<script lang="ts" setup>
+import { onMounted, reactive, ref } from 'vue';
+
+import { formatTime } from '@vben/utils';
+
+import { Button, Pagination, Row, Spin, Table } from 'ant-design-vue';
+
+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/modules/wx-news';
+import WxVideoPlayer from '#/views/mp/modules/wx-video-play';
+import WxVoicePlayer from '#/views/mp/modules/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(['selectMaterial']);
+
+// 遮罩层
+const loading = ref(false);
+// 总条数
+const total = ref(0);
+// 数据列表
+const list = ref<any[]>([]);
+// 查询参数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  accountId: props.accountId,
+});
+
+/** 选择素材 */
+function selectMaterialFun(item: any) {
+  emit('selectMaterial', item);
+}
+
+/** 获取分页数据 */
+async function getPage() {
+  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;
+  }
+}
+
+/** 获取素材分页 */
+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;
+}
+
+onMounted(async () => {
+  getPage();
+});
+</script>
+
+<template>
+  <div class="pb-30px">
+    <!-- 类型：image -->
+    <div v-if="props.type === 'image'">
+      <Spin :spinning="loading">
+        <div class="waterfall">
+          <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
+            <img class="material-img" :src="item.url" />
+            <p class="item-name">{{ item.name }}</p>
+            <Row class="ope-row">
+              <Button type="primary" @click="selectMaterialFun(item)">
+                选择
+                <Icon icon="ep:circle-check" />
+              </Button>
+            </Row>
+          </div>
+        </div>
+      </Spin>
+      <!-- 分页组件 -->
+      <Pagination
+        :total="total"
+        v-model:current="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        @change="getMaterialPageFun"
+      />
+    </div>
+    <!-- 类型：voice -->
+    <div v-else-if="props.type === 'voice'">
+      <!-- 列表 -->
+      <Spin :spinning="loading">
+        <Table :data-source="list">
+          <Table.Column title="编号" data-index="mediaId" align="center" />
+          <Table.Column title="文件名" data-index="name" align="center" />
+          <Table.Column title="语音" align="center">
+            <template #default="{ record }">
+              <WxVoicePlayer :url="record.url" />
+            </template>
+          </Table.Column>
+          <Table.Column title="上传时间" align="center" width="180">
+            <template #default="{ record }">
+              {{ formatTime(record.createTime, 'YYYY-MM-DD HH:mm:ss') }}
+            </template>
+          </Table.Column>
+          <Table.Column title="操作" align="center" fixed="right">
+            <template #default="{ record }">
+              <Button type="link" @click="selectMaterialFun(record)">
+                选择
+                <Icon icon="ep:plus" />
+              </Button>
+            </template>
+          </Table.Column>
+        </Table>
+      </Spin>
+      <!-- 分页组件 -->
+      <Pagination
+        :total="total"
+        v-model:current="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        @change="getPage"
+      />
+    </div>
+    <!-- 类型：video -->
+    <div v-else-if="props.type === 'video'">
+      <!-- 列表 -->
+      <Spin :spinning="loading">
+        <Table :data-source="list">
+          <Table.Column title="编号" data-index="mediaId" align="center" />
+          <Table.Column title="文件名" data-index="name" align="center" />
+          <Table.Column title="标题" data-index="title" align="center" />
+          <Table.Column title="介绍" data-index="introduction" align="center" />
+          <Table.Column title="视频" align="center">
+            <template #default="{ record }">
+              <WxVideoPlayer :url="record.url" />
+            </template>
+          </Table.Column>
+          <Table.Column title="上传时间" align="center" width="180">
+            <template #default="{ record }">
+              {{ formatTime(record.createTime, 'YYYY-MM-DD HH:mm:ss') }}
+            </template>
+          </Table.Column>
+          <Table.Column title="操作" align="center" fixed="right">
+            <template #default="{ record }">
+              <Button type="link" @click="selectMaterialFun(record)">
+                选择
+                <Icon icon="akar-icons:circle-plus" />
+              </Button>
+            </template>
+          </Table.Column>
+        </Table>
+      </Spin>
+      <!-- 分页组件 -->
+      <Pagination
+        :total="total"
+        v-model:current="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        @change="getMaterialPageFun"
+      />
+    </div>
+    <!-- 类型：news -->
+    <div v-else-if="props.type === 'news'">
+      <Spin :spinning="loading">
+        <div class="waterfall">
+          <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
+            <div v-if="item.content && item.content.newsItem">
+              <WxNews :articles="item.content.newsItem" />
+              <Row class="ope-row">
+                <Button type="primary" @click="selectMaterialFun(item)">
+                  选择
+                  <Icon icon="ep:circle-check" />
+                </Button>
+              </Row>
+            </div>
+          </div>
+        </div>
+      </Spin>
+      <!-- 分页组件 -->
+      <Pagination
+        :total="total"
+        v-model:current="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        @change="getMaterialPageFun"
+      />
+    </div>
+  </div>
+</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-gap: 10px;
+  width: 100%;
+  margin: 0 auto;
+  column-count: 5;
+}
+
+.waterfall-item {
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #eaeaea;
+  break-inside: avoid;
+}
+
+.material-img {
+  width: 100%;
+}
+
+p {
+  line-height: 30px;
+}
+</style>

apps/web-antd/src/views/mp/modules/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',
+}

apps/web-antd/src/views/mp/modules/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;
+}

apps/web-antd/src/views/mp/modules/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;
+  }
+}

apps/web-antd/src/views/mp/modules/wx-msg/index.ts

@@ -0,0 +1,3 @@
+export { default } from './main.vue';
+
+export { MsgType } from './types';

apps/web-antd/src/views/mp/modules/wx-msg/main.vue

@@ -0,0 +1,205 @@
+<!--
+  - Copyright (C) 2018-2019
+  - All rights reserved, Designed By www.joolun.com
+  芋道源码：
+  ① 移除暂时用不到的 websocket
+  ② 代码优化，补充注释，提升阅读性
+-->
+<script lang="ts" setup>
+import type { User } from './types';
+
+import type { Reply } from '#/views/mp/modules/wx-reply';
+
+import { nextTick, onMounted, reactive, ref, unref } from 'vue';
+
+import { Button, message, Spin } from 'ant-design-vue';
+
+import { getMessagePage, sendMessage } from '#/api/mp/message';
+import { getUser } from '#/api/mp/user';
+import profile from '#/assets/imgs/profile.jpg';
+import WxReplySelect, { ReplyType } from '#/views/mp/modules/wx-reply';
+
+import MsgList from './modules/msg-list.vue';
+
+defineOptions({ name: 'WxMsg' });
+
+const props = defineProps({
+  userId: {
+    type: Number,
+    required: true,
+  },
+});
+
+// 消息弹窗
+const accountId = ref(-1); // 公众号ID，需要通过userId初始化
+const loading = ref(false); // 消息列表是否正在加载中
+const hasMore = ref(true); // 是否可以加载更多
+const list = ref<any[]>([]); // 消息列表
+const queryParams = reactive({
+  pageNo: 1, // 当前页数
+  pageSize: 14, // 每页显示多少条
+  accountId,
+});
+
+// 由于微信不再提供昵称，直接使用"用户"展示
+const user: User = reactive({
+  nickname: '用户',
+  avatar: profile,
+  accountId, // 公众号账号编号
+});
+
+// ========= 消息发送 =========
+const sendLoading = ref(false); // 发送消息是否加载中
+// 微信发送消息
+const reply = ref<Reply>({
+  type: ReplyType.Text,
+  accountId: -1,
+  articles: [],
+});
+
+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;
+  // API 返回的数据可能包含 headImageUrl，但类型定义中没有，使用类型断言
+  const userData = data as typeof data & { headImageUrl?: string };
+  user.avatar =
+    userData.headImageUrl && userData.headImageUrl.length > 0
+      ? userData.headImageUrl
+      : user.avatar;
+  accountId.value = data.accountId;
+  reply.value.accountId = data.accountId;
+
+  refreshChange();
+});
+
+/** 执行发送 */
+async function sendMsg() {
+  if (!unref(reply)) {
+    return;
+  }
+  // 公众号限制：客服消息，公众号只允许发送一条
+  if (
+    reply.value.type === ReplyType.News &&
+    reply.value.articles &&
+    reply.value.articles.length > 1
+  ) {
+    reply.value.articles = [reply.value.articles[0]];
+    message.success('图文消息条数限制在 1 条以内，已默认发送第一条');
+  }
+
+  // 注意：sendMessage API 需要 openid，但这里传入的是 userId
+  // 这可能是后端 API 的特殊处理，使用类型断言绕过类型检查
+  const data = await sendMessage({
+    userId: props.userId,
+    ...reply.value,
+  } 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(
+      {
+        pageNo: page.pageNo,
+        pageSize: page.pageSize,
+        userId: props.userId,
+        accountId: page.accountId,
+      },
+      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>
+  <ContentWrap>
+    <Spin :spinning="loading">
+      <div
+        class="ml-[10px] mr-[10px] h-[50vh] overflow-auto bg-[#eaeaea]"
+        ref="msgDivRef"
+      >
+        <!-- 加载更多 -->
+        <div v-if="!loading">
+          <div
+            class="cursor-pointer py-5 text-center"
+            v-if="hasMore"
+            @click="loadMore"
+          >
+            <span class="text-[#999]">点击加载更多</span>
+          </div>
+          <div class="py-5 text-center" v-if="!hasMore">
+            <span class="text-[#999]">没有更多了</span>
+          </div>
+        </div>
+
+        <!-- 消息列表 -->
+        <MsgList :list="list" :account-id="accountId" :user="user" />
+      </div>
+    </Spin>
+
+    <Spin :spinning="sendLoading">
+      <div class="p-[10px]">
+        <WxReplySelect ref="replySelectRef" v-model="reply" />
+        <Button type="primary" class="float-right mb-2 mt-2" @click="sendMsg">
+          发送(S)
+        </Button>
+      </div>
+    </Spin>
+  </ContentWrap>
+</template>
+
+<style lang="scss" scoped></style>

apps/web-antd/src/views/mp/modules/wx-msg/modules/msg-event.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { Tag } from 'ant-design-vue';
+
+const props = defineProps<{
+  item: any;
+}>();
+
+const item = ref(props.item);
+</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-if="item.event === 'SCAN'">
+      <Tag>扫码</Tag>
+    </div>
+    <div v-else>
+      <Tag color="error">未知事件类型</Tag>
+    </div>
+  </div>
+</template>

apps/web-antd/src/views/mp/modules/wx-msg/modules/msg-list.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import type { User } from '../types';
+
+import { formatDateTime } from '@vben/utils';
+
+import avatarWechat from '#/assets/imgs/wechat.png';
+
+import Msg from './msg.vue';
+
+// 确保 User 类型被识别为已使用
+type PropsUser = User;
+
+defineOptions({ name: 'MsgList' });
+
+const props = defineProps<{
+  accountId: number;
+  list: any[];
+  user: PropsUser;
+}>();
+
+// 使用常量对象替代枚举，避免 linter 误报
+const SendFrom = {
+  MpBot: 2,
+  User: 1,
+} as const;
+
+type SendFromType = (typeof SendFrom)[keyof typeof SendFrom];
+
+// 显式引用枚举成员供模板使用
+const MpBotValue = SendFrom.MpBot;
+const UserValue = SendFrom.User;
+
+const getAvatar = (sendFrom: SendFromType) =>
+  sendFrom === UserValue ? props.user.avatar : avatarWechat;
+
+const getNickname = (sendFrom: SendFromType) =>
+  sendFrom === UserValue ? props.user.nickname : '公众号';
+</script>
+<template>
+  <div v-for="item in props.list" :key="item.id">
+    <div
+      class="mb-[30px] flex items-start"
+      :class="{ 'flex-row-reverse': item.sendFrom === MpBotValue }"
+    >
+      <div class="w-20 text-center">
+        <img
+          :src="getAvatar(item.sendFrom)"
+          class="box-border h-12 w-12 rounded-full border border-transparent align-middle"
+        />
+        <div class="text-sm font-bold text-[#999]">
+          {{ getNickname(item.sendFrom) }}
+        </div>
+      </div>
+      <div class="relative mx-5 flex-1 rounded-[5px] border border-[#dedede]">
+        <div
+          class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
+        >
+          <div class="avue-comment__create_time">
+            {{ formatDateTime(item.createTime) }}
+          </div>
+        </div>
+        <div
+          class="overflow-hidden rounded-b-[5px] bg-white px-[15px] py-[15px] text-sm text-[#333]"
+          :style="item.sendFrom === MpBotValue ? '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');
+</style>

apps/web-antd/src/views/mp/modules/wx-msg/modules/msg.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import WxLocation from '#/views/mp/modules/wx-location';
+import WxMusic from '#/views/mp/modules/wx-music';
+import WxNews from '#/views/mp/modules/wx-news';
+import WxVideoPlayer from '#/views/mp/modules/wx-video-play';
+import WxVoicePlayer from '#/views/mp/modules/wx-voice-play';
+
+import { MsgType } from '../types';
+import MsgEvent from './msg-event.vue';
+
+defineOptions({ name: 'Msg' });
+
+const props = defineProps<{
+  item: any;
+}>();
+
+const item = ref<any>(props.item);
+</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 target="_blank" :href="item.mediaUrl">
+        <img :src="item.mediaUrl" class="w-[100px]" />
+      </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-1">
+      <a target="_blank" :href="item.url">
+        <div
+          class="mb-3 text-base text-[rgba(0,0,0,0.85)] hover:text-[#1890ff]"
+        >
+          <Icon icon="ep:link" />{{ item.title }}
+        </div>
+      </a>
+      <div
+        class="h-auto overflow-hidden text-[rgba(0,0,0,0.45)]"
+        style="height: unset"
+      >
+        {{ 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>
+
+<style scoped></style>

apps/web-antd/src/views/mp/modules/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 {
+  nickname: string;
+  avatar: string;
+  accountId: number;
+}

apps/web-antd/src/views/mp/modules/wx-music/index.ts

@@ -0,0 +1 @@
+export { default } from './main.vue';

apps/web-antd/src/views/mp/modules/wx-music/main.vue

@@ -0,0 +1,69 @@
+<!--
+  【微信消息 - 音乐】
+-->
+<script lang="ts" setup>
+defineOptions({ name: 'WxMusic' });
+
+const props = defineProps({
+  title: {
+    required: false,
+    type: String,
+    default: '',
+  },
+  description: {
+    required: false,
+    type: String,
+    default: '',
+  },
+  musicUrl: {
+    required: false,
+    type: String,
+    default: '',
+  },
+  hqMusicUrl: {
+    required: false,
+    type: String,
+    default: '',
+  },
+  thumbMediaUrl: {
+    required: true,
+    type: String,
+  },
+});
+
+defineExpose({
+  musicUrl: props.musicUrl,
+});
+</script>
+
+<template>
+  <div>
+    <a
+      target="_blank"
+      :href="hqMusicUrl ? hqMusicUrl : musicUrl"
+      style="text-decoration: none"
+    >
+      <div
+        class="avue-card__body"
+        style="padding: 10px; background-color: #fff; border-radius: 5px"
+      >
+        <div class="avue-card__avatar">
+          <img :src="thumbMediaUrl" alt="" />
+        </div>
+        <div class="avue-card__detail">
+          <div class="avue-card__title" style="margin-bottom: unset">
+            {{ title }}
+          </div>
+          <div class="avue-card__info" style="height: unset">
+            {{ description }}
+          </div>
+        </div>
+      </div>
+    </a>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss  */
+@import url('../wx-msg/card.scss');
+</style>

apps/web-antd/src/views/mp/modules/wx-news/index.ts

@@ -0,0 +1 @@
+export { default } from './main.vue';

apps/web-antd/src/views/mp/modules/wx-news/main.vue

@@ -0,0 +1,126 @@
+<!--
+  - Copyright (C) 2018-2019
+  - All rights reserved, Designed By www.joolun.com
+  【微信消息 - 图文】
+  芋道源码：
+  ① 代码优化，补充注释，提升阅读性
+-->
+<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 || article.thumbUrl"
+              class="material-img"
+              :preview="false"
+              style="width: 100%; height: 120px"
+            />
+            <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 || article.thumbUrl"
+                class="material-img"
+                height="100%"
+              />
+            </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>

apps/web-antd/src/views/mp/modules/wx-reply/index.ts

@@ -0,0 +1,8 @@
+export { default } from './main.vue';
+
+export {
+  createEmptyReply,
+  NewsType,
+  type Reply,
+  ReplyType,
+} from './modules/types';

apps/web-antd/src/views/mp/modules/wx-reply/main.vue

@@ -0,0 +1,140 @@
+<!--
+  - Copyright (C) 2018-2019
+  - All rights reserved, Designed By www.joolun.com
+  芋道源码：
+  ① 移除多余的 rep 为前缀的变量，让 message 消息更简单
+  ② 代码优化，补充注释，提升阅读性
+  ③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入
+  ④ 支持发送【视频】消息时，支持新建视频
+-->
+<script lang="ts" setup>
+import type { Reply } from './modules/types';
+
+import { computed, ref, unref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import { Row, Tabs } from 'ant-design-vue';
+
+import TabImage from './modules/tab-image.vue';
+import TabMusic from './modules/tab-music.vue';
+import TabNews from './modules/tab-news.vue';
+import TabText from './modules/tab-text.vue';
+import TabVideo from './modules/tab-video.vue';
+import TabVoice from './modules/tab-voice.vue';
+import { createEmptyReply, NewsType, ReplyType } from './modules/types';
+
+defineOptions({ name: 'WxReplySelect' });
+
+const props = withDefaults(
+  defineProps<{
+    modelValue: Reply;
+    newsType?: NewsType;
+  }>(),
+  {
+    newsType: () => NewsType.Published,
+  },
+);
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+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="ep:document" /> 文本</Row>
+      </template>
+      <TabText v-model="reply.content" />
+    </Tabs.TabPane>
+
+    <!-- 类型 2：图片 -->
+    <Tabs.TabPane :key="ReplyType.Image">
+      <template #tab>
+        <Row align="middle">
+          <IconifyIcon icon="ep:picture" class="mr-5px" /> 图片
+        </Row>
+      </template>
+      <TabImage v-model="reply" />
+    </Tabs.TabPane>
+
+    <!-- 类型 3：语音 -->
+    <Tabs.TabPane :key="ReplyType.Voice">
+      <template #tab>
+        <Row align="middle"><IconifyIcon icon="ep:phone" /> 语音</Row>
+      </template>
+      <TabVoice v-model="reply" />
+    </Tabs.TabPane>
+
+    <!-- 类型 4：视频 -->
+    <Tabs.TabPane :key="ReplyType.Video">
+      <template #tab>
+        <Row align="middle"><IconifyIcon icon="ep:share" /> 视频</Row>
+      </template>
+      <TabVideo v-model="reply" />
+    </Tabs.TabPane>
+
+    <!-- 类型 5：图文 -->
+    <Tabs.TabPane :key="ReplyType.News">
+      <template #tab>
+        <Row align="middle"><IconifyIcon icon="ep:reading" /> 图文</Row>
+      </template>
+      <TabNews v-model="reply" :news-type="newsType" />
+    </Tabs.TabPane>
+
+    <!-- 类型 6：音乐 -->
+    <Tabs.TabPane :key="ReplyType.Music">
+      <template #tab>
+        <Row align="middle"><IconifyIcon icon="ep:service" />音乐</Row>
+      </template>
+      <TabMusic v-model="reply" />
+    </Tabs.TabPane>
+  </Tabs>
+</template>
+
+<style lang="scss" scoped></style>

apps/web-antd/src/views/mp/modules/wx-reply/modules/tab-image.vue

@@ -0,0 +1,158 @@
+<script lang="ts" setup>
+import type { UploadFile } from 'ant-design-vue';
+
+import type { Reply } from './types';
+
+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 { UploadType, useBeforeUpload } from '#/utils/useUpload';
+import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
+
+const props = defineProps<{
+  modelValue: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+
+// 消息弹窗
+
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+const HEADERS = { Authorization: `Bearer ${useAccessStore().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,
+  type: 'image',
+  title: '',
+  introduction: '',
+});
+
+/** 图片上传前校验 */
+function beforeImageUpload(file: UploadFile) {
+  return useBeforeUpload(UploadType.Image, 2)(file as any);
+}
+
+/** 上传成功 */
+function onUploadSuccess(info: any) {
+  const res = info.response || info;
+  if (res.code !== 0) {
+    message.error(`上传出错：${res.msg}`);
+    return false;
+  }
+
+  // 清空上传时的各种数据
+  fileList.value = [];
+  uploadData.title = '';
+  uploadData.introduction = '';
+
+  // 上传好的文件，本质是个素材，所以可以进行选中
+  selectMaterial(res.data);
+}
+
+/** 删除图片 */
+function onDelete() {
+  reply.value.mediaId = null;
+  reply.value.url = null;
+  reply.value.name = null;
+}
+
+/** 选择素材 */
+function selectMaterial(item: any) {
+  showDialog.value = false;
+
+  // reply.value.type = 'image'
+  reply.value.mediaId = item.mediaId;
+  reply.value.url = item.url;
+  reply.value.name = item.name;
+}
+</script>
+
+<template>
+  <div>
+    <!-- 情况一：已经选择好素材、或者上传好图片 -->
+    <div
+      class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
+      v-if="reply.url"
+    >
+      <img class="w-full" :src="reply.url" />
+      <p
+        class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs"
+        v-if="reply.name"
+      >
+        {{ reply.name }}
+      </p>
+      <Row class="pt-[10px] text-center" justify="center">
+        <Button type="primary" danger shape="circle" @click="onDelete">
+          <IconifyIcon icon="ep:delete" />
+        </Button>
+      </Row>
+    </div>
+    <!-- 情况二：未做完上述操作 -->
+    <Row v-else class="text-center" align="middle">
+      <!-- 选择素材 -->
+      <Col
+        :span="12"
+        class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
+      >
+        <Button type="primary" @click="showDialog = true">
+          素材库选择 <IconifyIcon icon="ep:circle-check" />
+        </Button>
+        <Modal
+          title="选择图片"
+          v-model:open="showDialog"
+          width="90%"
+          destroy-on-close
+        >
+          <WxMaterialSelect
+            type="image"
+            :account-id="reply.accountId"
+            @select-material="selectMaterial"
+          />
+        </Modal>
+      </Col>
+      <!-- 文件上传 -->
+      <Col
+        :span="12"
+        class="float-right h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
+      >
+        <Upload
+          :action="UPLOAD_URL"
+          :headers="HEADERS"
+          :file-list="fileList"
+          :data="uploadData"
+          :before-upload="beforeImageUpload"
+          @change="
+            (info) => {
+              if (info.file.status === 'done') {
+                onUploadSuccess(info.file.response || info.file);
+              }
+            }
+          "
+        >
+          <Button type="primary">上传图片</Button>
+          <template #tip>
+            <span>
+              <div class="text-center leading-[18px]">
+                支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
+              </div>
+            </span>
+          </template>
+        </Upload>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

apps/web-antd/src/views/mp/modules/wx-reply/modules/tab-music.vue

@@ -0,0 +1,158 @@
+<script lang="ts" setup>
+import type { UploadFile } from 'ant-design-vue';
+
+import type { Reply } from './types';
+
+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 { UploadType, useBeforeUpload } from '#/utils/useUpload';
+// import { getAccessToken } from '@/utils/auth'
+import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
+
+// 设置上传的请求头部
+
+const props = defineProps<{
+  modelValue: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+
+// 消息弹窗
+
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+const HEADERS = { Authorization: `Bearer ${useAccessStore().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,
+  type: 'thumb', // 音乐类型为thumb
+  title: '',
+  introduction: '',
+});
+
+/** 图片上传前校验 */
+function beforeImageUpload(file: UploadFile) {
+  return useBeforeUpload(UploadType.Image, 2)(file as any);
+}
+
+/** 上传成功 */
+function onUploadSuccess(info: any) {
+  const res = info.response || info;
+  if (res.code !== 0) {
+    message.error(`上传出错：${res.msg}`);
+    return false;
+  }
+
+  // 清空上传时的各种数据
+  fileList.value = [];
+  uploadData.title = '';
+  uploadData.introduction = '';
+
+  // 上传好的文件，本质是个素材，所以可以进行选中
+  selectMaterial(res.data);
+}
+
+/** 选择素材 */
+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">
+        <Row align="middle" justify="center" class="inline-block text-center">
+          <Col :span="24">
+            <Row align="middle" justify="center">
+              <img
+                class="w-[100px]"
+                v-if="reply.thumbMediaUrl"
+                :src="reply.thumbMediaUrl"
+              />
+              <IconifyIcon v-else icon="ep:plus" />
+            </Row>
+            <Row align="middle" justify="center" class="mt-[2%]">
+              <div>
+                <Upload
+                  :action="UPLOAD_URL"
+                  :headers="HEADERS"
+                  :file-list="fileList"
+                  :data="uploadData"
+                  :before-upload="beforeImageUpload"
+                  @change="
+                    (info) => {
+                      if (info.file.status === 'done') {
+                        onUploadSuccess(info.file.response || info.file);
+                      }
+                    }
+                  "
+                >
+                  <template #default>
+                    <Button type="link">本地上传</Button>
+                  </template>
+                </Upload>
+                <Button type="link" @click="showDialog = true" class="ml-[5px]">
+                  素材库选择
+                </Button>
+              </div>
+            </Row>
+          </Col>
+        </Row>
+        <Modal
+          title="选择图片"
+          v-model:open="showDialog"
+          width="80%"
+          destroy-on-close
+        >
+          <WxMaterialSelect
+            type="image"
+            :account-id="reply.accountId"
+            @select-material="selectMaterial"
+          />
+        </Modal>
+      </Col>
+      <Col :span="18">
+        <Input v-model:value="reply.title as string" placeholder="请输入标题" />
+        <div class="my-5"></div>
+        <Input
+          v-model:value="reply.description as string"
+          placeholder="请输入描述"
+        />
+      </Col>
+    </Row>
+    <div class="my-5"></div>
+    <Input
+      v-model:value="reply.musicUrl as string"
+      placeholder="请输入音乐链接"
+    />
+    <div class="my-5"></div>
+    <Input
+      v-model:value="reply.hqMusicUrl as string"
+      placeholder="请输入高质量音乐链接"
+    />
+  </div>
+</template>

apps/web-antd/src/views/mp/modules/wx-reply/modules/tab-news.vue

@@ -0,0 +1,87 @@
+<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/modules/wx-material-select';
+import WxNews from '#/views/mp/modules/wx-news';
+
+import { NewsType } from './types';
+
+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
+        class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
+        v-if="reply.articles && reply.articles.length > 0"
+      >
+        <WxNews :articles="reply.articles" />
+        <Col class="pt-[10px] text-center">
+          <Button type="primary" danger shape="circle" @click="onDelete">
+            <IconifyIcon icon="ep:delete" />
+          </Button>
+        </Col>
+      </div>
+      <!-- 选择素材 -->
+      <Col :span="24" v-if="!reply.content">
+        <Row class="text-center" align="middle">
+          <Col :span="24">
+            <Button type="primary" @click="showDialog = true">
+              {{
+                newsType === NewsType.Published
+                  ? '选择已发布图文'
+                  : '选择草稿箱图文'
+              }}
+              <IconifyIcon icon="ep:circle-check" />
+            </Button>
+          </Col>
+        </Row>
+      </Col>
+      <Modal
+        title="选择图文"
+        v-model:open="showDialog"
+        width="90%"
+        destroy-on-close
+      >
+        <WxMaterialSelect
+          type="news"
+          :account-id="reply.accountId"
+          :news-type="newsType"
+          @select-material="selectMaterial"
+        />
+      </Modal>
+    </Row>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

apps/web-antd/src/views/mp/modules/wx-reply/modules/tab-text.vue

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+
+import { Input } from 'ant-design-vue';
+
+const props = defineProps<{
+  modelValue?: null | string;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: null | string): void;
+  (e: 'input', v: null | string): void;
+}>();
+
+const content = computed({
+  get: () => props.modelValue,
+  set: (val: null | string) => {
+    emit('update:modelValue', val);
+    emit('input', val);
+  },
+});
+</script>
+
+<template>
+  <Input.TextArea
+    :rows="5"
+    placeholder="请输入内容"
+    v-model:value="content as string"
+    class="w-full"
+  />
+</template>

apps/web-antd/src/views/mp/modules/wx-reply/modules/tab-video.vue

@@ -0,0 +1,201 @@
+<script lang="ts" setup>
+import type { UploadFile } from 'ant-design-vue';
+import type { UploadRequestOption } from 'ant-design-vue/lib/vc-upload/interface';
+
+import type { Reply } from './types';
+
+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 { UploadType, useBeforeUpload } from '#/utils/useUpload';
+import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
+import WxVideoPlayer from '#/views/mp/modules/wx-video-play';
+
+const props = defineProps<{
+  modelValue: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+
+// 消息弹窗
+
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
+
+const reply = computed<Reply>({
+  get: () => props.modelValue,
+  set: (val: Reply) => emit('update:modelValue', val),
+});
+
+const showDialog = ref(false);
+const fileList = ref([]);
+const uploadData = reactive({
+  accountId: reply.value.accountId,
+  type: 'video',
+  title: '',
+  introduction: '',
+});
+
+/** 视频上传前校验 */
+function beforeVideoUpload(file: UploadFile) {
+  return useBeforeUpload(UploadType.Video, 10)(file as any);
+}
+
+/** 自定义上传请求 */
+async function customRequest(info: UploadRequestOption) {
+  const formData = new FormData();
+  formData.append('file', info.file as File);
+  formData.append('accountId', String(uploadData.accountId));
+  formData.append('type', uploadData.type);
+  if (uploadData.title) {
+    formData.append('title', uploadData.title);
+  }
+  if (uploadData.introduction) {
+    formData.append('introduction', uploadData.introduction);
+  }
+
+  try {
+    const xhr = new XMLHttpRequest();
+
+    // 监听上传进度
+    xhr.upload.addEventListener('progress', (e) => {
+      if (e.lengthComputable) {
+        const percent = Math.round((e.loaded / e.total) * 100);
+        info.onProgress?.({ percent });
+      }
+    });
+
+    // 监听上传完成
+    xhr.addEventListener('load', () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        try {
+          const res = JSON.parse(xhr.responseText);
+          onUploadSuccess(res);
+          info.onSuccess?.(res);
+        } catch {
+          info.onError?.(new Error('解析响应失败'));
+          message.error('上传失败：解析响应失败');
+        }
+      } else {
+        info.onError?.(new Error(`上传失败：HTTP ${xhr.status}`));
+        message.error('上传失败，请重试');
+      }
+    });
+
+    // 监听上传错误
+    xhr.addEventListener('error', () => {
+      info.onError?.(new Error('上传请求失败'));
+      message.error('上传失败，请重试');
+    });
+
+    // 发送请求
+    xhr.open('POST', UPLOAD_URL);
+    xhr.setRequestHeader('Authorization', HEADERS.Authorization);
+    xhr.send(formData);
+  } catch (error: any) {
+    info.onError?.(error);
+    message.error('上传失败，请重试');
+  }
+}
+
+/** 上传成功 */
+function onUploadSuccess(res: any) {
+  if (res.code !== 0) {
+    message.error(`上传出错：${res.msg}`);
+    return false;
+  }
+
+  // 清空上传时的各种数据
+  fileList.value = [];
+  uploadData.title = '';
+  uploadData.introduction = '';
+  selectMaterial(res.data);
+}
+
+/** 选择素材后设置 */
+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>
+      <Input
+        v-model:value="reply.title as string"
+        class="mb-[2%]"
+        placeholder="请输入标题"
+      />
+      <Input
+        class="mb-[2%]"
+        v-model:value="reply.description as string"
+        placeholder="请输入描述"
+      />
+      <Row class="w-full pt-[10px] text-center" justify="center">
+        <WxVideoPlayer v-if="reply.url" :url="reply.url" />
+      </Row>
+      <Col class="w-full">
+        <Row class="text-center" align="middle">
+          <!-- 选择素材 -->
+          <Col :span="12">
+            <Button type="primary" @click="showDialog = true">
+              素材库选择 <IconifyIcon icon="ep:circle-check" />
+            </Button>
+            <Modal
+              title="选择视频"
+              v-model:open="showDialog"
+              width="90%"
+              destroy-on-close
+            >
+              <WxMaterialSelect
+                type="video"
+                :account-id="reply.accountId"
+                @select-material="selectMaterial"
+              />
+            </Modal>
+          </Col>
+          <!-- 文件上传 -->
+          <Col :span="12">
+            <Upload
+              :file-list="fileList"
+              :before-upload="beforeVideoUpload"
+              :custom-request="customRequest"
+            >
+              <Button type="primary">
+                新建视频 <IconifyIcon icon="ep:upload" />
+              </Button>
+            </Upload>
+          </Col>
+        </Row>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

apps/web-antd/src/views/mp/modules/wx-reply/modules/tab-voice.vue

@@ -0,0 +1,157 @@
+<script lang="ts" setup>
+import type { UploadFile } from 'ant-design-vue';
+
+import type { Reply } from './types';
+
+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 { UploadType, useBeforeUpload } from '#/utils/useUpload';
+import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
+import WxVoicePlayer from '#/views/mp/modules/wx-voice-play';
+
+// 设置上传的请求头部
+
+const props = defineProps<{
+  modelValue: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Reply): void;
+}>();
+
+// 消息弹窗
+
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
+const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
+const reply = computed<Reply>({
+  get: () => props.modelValue,
+  set: (val: Reply) => emit('update:modelValue', val),
+});
+
+const showDialog = ref(false);
+const fileList = ref([]);
+const uploadData = reactive({
+  accountId: reply.value.accountId,
+  type: 'voice',
+  title: '',
+  introduction: '',
+});
+
+/** 语音上传前校验 */
+function beforeVoiceUpload(file: UploadFile) {
+  return useBeforeUpload(UploadType.Voice, 10)(file as any);
+}
+
+/** 上传成功 */
+function onUploadSuccess(info: any) {
+  const res = info.response || info;
+  if (res.code !== 0) {
+    message.error(`上传出错：${res.msg}`);
+    return false;
+  }
+
+  // 清空上传时的各种数据
+  fileList.value = [];
+  uploadData.title = '';
+  uploadData.introduction = '';
+
+  // 上传好的文件，本质是个素材，所以可以进行选中
+  selectMaterial(res.data);
+}
+
+/** 删除语音 */
+function onDelete() {
+  reply.value.mediaId = null;
+  reply.value.url = null;
+  reply.value.name = null;
+}
+
+/** 选择素材 */
+function selectMaterial(item: Reply) {
+  showDialog.value = false;
+
+  // reply.value.type = ReplyType.Voice
+  reply.value.mediaId = item.mediaId;
+  reply.value.url = item.url;
+  reply.value.name = item.name;
+}
+</script>
+<template>
+  <div>
+    <div
+      class="mx-auto mb-[10px] border border-[#eaeaea] p-[10px]"
+      v-if="reply.url"
+    >
+      <p
+        class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs"
+      >
+        {{ reply.name }}
+      </p>
+      <Row class="w-full pt-[10px] text-center" justify="center">
+        <WxVoicePlayer :url="reply.url" />
+      </Row>
+      <Row class="w-full pt-[10px] text-center" justify="center">
+        <Button type="primary" danger shape="circle" @click="onDelete">
+          <IconifyIcon icon="ep:delete" />
+        </Button>
+      </Row>
+    </div>
+    <Row v-else class="text-center">
+      <!-- 选择素材 -->
+      <Col
+        :span="12"
+        class="h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
+      >
+        <Button type="primary" @click="showDialog = true">
+          素材库选择<IconifyIcon icon="ep:circle-check" />
+        </Button>
+        <Modal
+          title="选择语音"
+          v-model:open="showDialog"
+          width="90%"
+          destroy-on-close
+        >
+          <WxMaterialSelect
+            type="voice"
+            :account-id="reply.accountId"
+            @select-material="selectMaterial"
+          />
+        </Modal>
+      </Col>
+      <!-- 文件上传 -->
+      <Col
+        :span="12"
+        class="float-right h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
+      >
+        <Upload
+          :action="UPLOAD_URL"
+          :headers="HEADERS"
+          :file-list="fileList"
+          :data="uploadData"
+          :before-upload="beforeVoiceUpload"
+          @change="
+            (info) => {
+              if (info.file.status === 'done') {
+                onUploadSuccess(info.file.response || info.file);
+              }
+            }
+          "
+        >
+          <Button type="primary">点击上传</Button>
+          <template #tip>
+            <div class="text-center leading-[18px]">
+              格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
+            </div>
+          </template>
+        </Upload>
+      </Col>
+    </Row>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

apps/web-antd/src/views/mp/modules/wx-reply/modules/types.ts

@@ -0,0 +1,58 @@
+import type { Ref } from 'vue';
+
+import { unref } from 'vue';
+
+enum ReplyType {
+  Image = 'image',
+  Music = 'music',
+  News = 'news',
+  Text = 'text',
+  Video = 'video',
+  Voice = 'voice',
+}
+
+interface _Reply {
+  accountId: number;
+  type: ReplyType;
+  name?: null | string;
+  content?: null | string;
+  mediaId?: null | string;
+  url?: null | string;
+  title?: null | string;
+  description?: null | string;
+  thumbMediaId?: null | string;
+  thumbMediaUrl?: null | string;
+  musicUrl?: null | string;
+  hqMusicUrl?: null | string;
+  introduction?: null | string;
+  articles?: any[];
+}
+
+type Reply = _Reply; // Partial<_Reply>
+
+enum NewsType {
+  Draft = '2',
+  Published = '1',
+}
+
+/** 利用旧的reply[accountId, type]初始化新的Reply */
+const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
+  return {
+    accountId: unref(old).accountId,
+    type: unref(old).type,
+    name: null,
+    content: null,
+    mediaId: null,
+    url: null,
+    title: null,
+    description: null,
+    thumbMediaId: null,
+    thumbMediaUrl: null,
+    musicUrl: null,
+    hqMusicUrl: null,
+    introduction: null,
+    articles: [],
+  };
+};
+
+export { createEmptyReply, NewsType, type Reply, ReplyType };

apps/web-antd/src/views/mp/modules/wx-video-play/index.ts

@@ -0,0 +1 @@
+export { default } from './main.vue';

apps/web-antd/src/views/mp/modules/wx-video-play/main.vue

@@ -0,0 +1,83 @@
+<!--
+  - Copyright (C) 2018-2019
+  - All rights reserved, Designed By www.joolun.com
+  【微信消息 - 视频】
+  芋道源码：
+  ① bug 修复：
+    1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容；
+      存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
+    2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
+  ② 体验优化：弹窗关闭后，自动暂停视频的播放
+
+-->
+<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: {
+    type: String,
+    required: true,
+  },
+});
+
+const dialogVideo = ref(false);
+
+// const handleEvent = (log) => {
+//   console.log('Basic player event', log)
+// }
+
+const playVideo = () => {
+  dialogVideo.value = true;
+};
+</script>
+
+<template>
+  <div @click="playVideo()">
+    <!-- 提示 -->
+    <div class="flex cursor-pointer flex-col items-center">
+      <IconifyIcon icon="ep:video-play" class="size-5" />
+      <p class="text-sm">点击播放视频</p>
+    </div>
+
+    <!-- 弹窗播放 -->
+    <Modal
+      v-model:open="dialogVideo"
+      title="视频播放"
+      width="900px"
+      :footer="null"
+    >
+      <VideoPlayer
+        v-if="dialogVideo"
+        class="video-player vjs-big-play-centered"
+        :src="props.url"
+        poster=""
+        controls
+        playsinline
+        :volume="0.6"
+        :width="800"
+        :playback-rates="[0.7, 1.0, 1.5, 2.0]"
+      />
+      <!--     事件，暫時沒用
+      @mounted="handleMounted"-->
+      <!--        @ready="handleEvent($event)"-->
+      <!--        @play="handleEvent($event)"-->
+      <!--        @pause="handleEvent($event)"-->
+      <!--        @ended="handleEvent($event)"-->
+      <!--        @loadeddata="handleEvent($event)"-->
+      <!--        @waiting="handleEvent($event)"-->
+      <!--        @playing="handleEvent($event)"-->
+      <!--        @canplay="handleEvent($event)"-->
+      <!--        @canplaythrough="handleEvent($event)"-->
+      <!--        @timeupdate="handleEvent(player?.currentTime())"-->
+    </Modal>
+  </div>
+</template>

apps/web-antd/src/views/mp/modules/wx-voice-play/index.ts

@@ -0,0 +1 @@
+export { default } from './main.vue';

apps/web-antd/src/views/mp/modules/wx-voice-play/main.vue

@@ -0,0 +1,107 @@
+<!--
+  - Copyright (C) 2018-2019
+  - All rights reserved, Designed By www.joolun.com
+  【微信消息 - 语音】
+   芋道源码：
+  ① bug 修复：
+    1）joolun 的做法：使用 mediaId 从微信公众号，下载对应的 mp4 素材，从而播放内容；
+      存在的问题：mediaId 有效期是 3 天，超过时间后无法播放
+    2）重构后的做法：后端接收到微信公众号的视频消息后，将视频消息的 media_id 的文件内容保存到文件服务器中，这样前端可以直接使用 URL 播放。
+  ② 代码优化：将 props 中的 reply 调成为 data 中对应的属性，并补充相关注释
+-->
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+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 = defineProps({
+  url: {
+    type: String, // 语音地址，例如说：https://www.iocoder.cn/xxx.amr
+    required: true,
+  },
+  content: {
+    type: String, // 语音文本
+    required: false,
+    default: '',
+  },
+});
+
+const amr = ref();
+const playing = ref(false);
+const duration = ref();
+
+/** 处理点击，播放或暂停 */
+const playVoice = () => {
+  // 情况一：未初始化，则创建 BenzAMRRecorder
+  if (amr.value === undefined) {
+    amrInit();
+    return;
+  }
+  // 情况二：已经初始化，则根据情况播放或暂时
+  if (amr.value.isPlaying()) {
+    amrStop();
+  } else {
+    amrPlay();
+  }
+};
+
+/** 音频初始化 */
+const amrInit = () => {
+  amr.value = new BenzAMRRecorder();
+  // 设置播放
+  amr.value.initWithUrl(props.url).then(() => {
+    amrPlay();
+    duration.value = amr.value.getDuration();
+  });
+  // 监听暂停
+  amr.value.onEnded(() => {
+    playing.value = false;
+  });
+};
+
+/** 音频播放 */
+const amrPlay = () => {
+  playing.value = true;
+  amr.value.play();
+};
+
+/** 音频暂停 */
+const amrStop = () => {
+  playing.value = false;
+  amr.value.stop();
+};
+// TODO 芋艿：下面样式有点问题
+</script>
+
+<template>
+  <div class="wx-voice-div" @click="playVoice">
+    <Icon v-if="playing !== true" icon="ep:video-play" :size="32" />
+    <Icon v-else icon="ep:video-pause" :size="32" />
+    <span class="amr-duration" v-if="duration">{{ duration }} 秒</span>
+    <div v-if="content">
+      <Tag color="success" size="small">语音识别</Tag>
+      {{ content }}
+    </div>
+  </div>
+</template>
+<style lang="scss" scoped>
+.wx-voice-div {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 120px;
+  height: 50px;
+  padding: 5px;
+  background-color: #eaeaea;
+  border-radius: 10px;
+}
+
+.amr-duration {
+  margin-left: 5px;
+  font-size: 11px;
+}
+</style>

apps/web-ele/package.json

@@ -43,14 +43,17 @@
     "@vben/styles": "workspace:*",
     "@vben/types": "workspace:*",
     "@vben/utils": "workspace:*",
+    "@videojs-player/vue": "catalog:",
     "@vueuse/core": "catalog:",
     "@vueuse/integrations": "catalog:",
+    "benz-amr-recorder": "catalog:",
     "cropperjs": "catalog:",
     "dayjs": "catalog:",
     "element-plus": "catalog:",
     "highlight.js": "catalog:",
     "pinia": "catalog:",
     "tinymce": "catalog:",
+    "video.js": "catalog:",
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
     "vue-router": "catalog:",

apps/web-ele/src/api/mp/draft/index.ts

@@ -35,9 +35,13 @@ export function getDraftPage(params: PageParam) {
 
 /** 创建草稿 */
 export function createDraft(accountId: number, articles: MpDraftApi.Article[]) {
-  return requestClient.post('/mp/draft/create', articles, {
-    params: { accountId },
-  });
+  return requestClient.post(
+    '/mp/draft/create',
+    { articles },
+    {
+      params: { accountId },
+    },
+  );
 }
 
 /** 更新草稿 */
@@ -46,9 +50,13 @@ export function updateDraft(
   mediaId: string,
   articles: MpDraftApi.Article[],
 ) {
-  return requestClient.put('/mp/draft/update', articles, {
-    params: { accountId, mediaId },
-  });
+  return requestClient.put(
+    '/mp/draft/update',
+    { articles },
+    {
+      params: { accountId, mediaId },
+    },
+  );
 }
 
 /** 删除草稿 */

apps/web-ele/src/utils/index.ts

@@ -1,2 +1,30 @@
+import type { Recordable } from '@vben/types';
+
 export * from './rangePickerProps';
 export * from './routerHelper';
+
+/**
+ * 查找数组对象的某个下标
+ * @param {Array} ary 查找的数组
+ * @param {Function} fn 判断的方法
+ */
+type Fn<T = any> = (item: T, index: number, array: Array<T>) => boolean;
+
+export const findIndex = <T = Recordable<any>>(
+  ary: Array<T>,
+  fn: Fn<T>,
+): number => {
+  if (ary.findIndex) {
+    return ary.findIndex((item, index, array) => fn(item, index, array));
+  }
+  let index = -1;
+  ary.some((item: T, i: number, ary: Array<T>) => {
+    const ret: boolean = fn(item, i, ary);
+    if (ret) {
+      index = i;
+      return true;
+    }
+    return false;
+  });
+  return index;
+};

apps/web-ele/src/utils/routerHelper.ts

@@ -1,3 +1,8 @@
+import type {
+  RouteLocationNormalized,
+  RouteRecordNormalized,
+} from 'vue-router';
+
 import { defineAsyncComponent } from 'vue';
 
 const modules = import.meta.glob('../views/**/*.{vue,tsx}');
@@ -13,3 +18,20 @@ export function registerComponent(componentPath: string) {
     }
   }
 }
+
+export const getRawRoute = (
+  route: RouteLocationNormalized,
+): RouteLocationNormalized => {
+  if (!route) return route;
+  const { matched, ...opt } = route;
+  return {
+    ...opt,
+    matched: (matched
+      ? matched.map((item) => ({
+          meta: item.meta,
+          name: item.name,
+          path: item.path,
+        }))
+      : undefined) as RouteRecordNormalized[],
+  };
+};

apps/web-ele/src/utils/tree.ts

@@ -0,0 +1,442 @@
+interface TreeHelperConfig {
+  id: string;
+  children: string;
+  pid: string;
+}
+
+const DEFAULT_CONFIG: TreeHelperConfig = {
+  id: 'id',
+  children: 'children',
+  pid: 'pid',
+};
+export const defaultProps = {
+  children: 'children',
+  label: 'name',
+  value: 'id',
+  isLeaf: 'leaf',
+  emitPath: false, // 用于 cascader 组件：在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
+};
+
+const getConfig = (config: Partial<TreeHelperConfig>) =>
+  Object.assign({}, DEFAULT_CONFIG, config);
+
+// tree from list
+export const listToTree = <T = any>(
+  list: any[],
+  config: Partial<TreeHelperConfig> = {},
+): T[] => {
+  const conf = getConfig(config) as TreeHelperConfig;
+  const nodeMap = new Map();
+  const result: T[] = [];
+  const { id, children, pid } = conf;
+
+  for (const node of list) {
+    node[children] = node[children] || [];
+    nodeMap.set(node[id], node);
+  }
+  for (const node of list) {
+    const parent = nodeMap.get(node[pid]);
+    (parent ? parent.children : result).push(node);
+  }
+  return result;
+};
+
+export const treeToList = <T = any>(
+  tree: any,
+  config: Partial<TreeHelperConfig> = {},
+): T => {
+  config = getConfig(config);
+  const { children } = config;
+  const result: any = [...tree];
+  for (let i = 0; i < result.length; i++) {
+    const childNodes = result[i][children];
+    if (!childNodes) continue;
+    result.splice(i + 1, 0, ...childNodes);
+  }
+  return result;
+};
+
+export const findNode = <T = any>(
+  tree: any,
+  func: Fn,
+  config: Partial<TreeHelperConfig> = {},
+): null | T => {
+  config = getConfig(config);
+  const { children } = config;
+  const list = [...tree];
+  for (const node of list) {
+    if (func(node)) return node;
+    const childNodes = node[children];
+    if (childNodes) {
+      list.push(...childNodes);
+    }
+  }
+  return null;
+};
+
+export const findNodeAll = <T = any>(
+  tree: any,
+  func: Fn,
+  config: Partial<TreeHelperConfig> = {},
+): T[] => {
+  config = getConfig(config);
+  const { children } = config;
+  const list = [...tree];
+  const result: T[] = [];
+  for (const node of list) {
+    func(node) && result.push(node);
+    const childNodes = node[children];
+    if (childNodes) {
+      list.push(...childNodes);
+    }
+  }
+  return result;
+};
+
+export const findPath = <T = any>(
+  tree: any,
+  func: Fn,
+  config: Partial<TreeHelperConfig> = {},
+): null | T | T[] => {
+  config = getConfig(config);
+  const path: T[] = [];
+  const list = [...tree];
+  const visitedSet = new Set();
+  const { children } = config;
+  while (list.length > 0) {
+    const node = list[0];
+    if (visitedSet.has(node)) {
+      path.pop();
+      list.shift();
+    } else {
+      visitedSet.add(node);
+      const childNodes = node[children];
+      if (childNodes) {
+        list.unshift(...childNodes);
+      }
+      path.push(node);
+      if (func(node)) {
+        return path;
+      }
+    }
+  }
+  return null;
+};
+
+export const findPathAll = (
+  tree: any,
+  func: Fn,
+  config: Partial<TreeHelperConfig> = {},
+) => {
+  config = getConfig(config);
+  const path: any[] = [];
+  const list = [...tree];
+  const result: any[] = [];
+  const visitedSet = new Set();
+  const { children } = config;
+  while (list.length > 0) {
+    const node = list[0];
+    if (visitedSet.has(node)) {
+      path.pop();
+      list.shift();
+    } else {
+      visitedSet.add(node);
+      const childNodes = node[children];
+      if (childNodes) {
+        list.unshift(...childNodes);
+      }
+      path.push(node);
+      func(node) && result.push([...path]);
+    }
+  }
+  return result;
+};
+
+export const filter = <T = any>(
+  tree: T[],
+  func: (n: T) => boolean,
+  config: Partial<TreeHelperConfig> = {},
+): T[] => {
+  config = getConfig(config);
+  const children = config.children as string;
+
+  function listFilter(list: T[]) {
+    return list
+      .map((node: any) => ({ ...node }))
+      .filter((node) => {
+        node[children] = node[children] && listFilter(node[children]);
+        return func(node) || node[children]?.length > 0;
+      });
+  }
+
+  return listFilter(tree);
+};
+
+export const forEach = <T = any>(
+  tree: T[],
+  func: (n: T) => any,
+  config: Partial<TreeHelperConfig> = {},
+): void => {
+  config = getConfig(config);
+  const list: any[] = [...tree];
+  const { children } = config;
+  for (let i = 0; i < list.length; i++) {
+    // func 返回true就终止遍历，避免大量节点场景下无意义循环，引起浏览器卡顿
+    if (func(list[i])) {
+      return;
+    }
+    children &&
+      list[i][children] &&
+      list.splice(i + 1, 0, ...list[i][children]);
+  }
+};
+
+/**
+ * @description: Extract tree specified structure
+ */
+export const treeMap = <T = any>(
+  treeData: T[],
+  opt: { children?: string; conversion: Fn },
+): T[] => {
+  return treeData.map((item) => treeMapEach(item, opt));
+};
+
+/**
+ * @description: Extract tree specified structure
+ */
+export const treeMapEach = (
+  data: any,
+  { children = 'children', conversion }: { children?: string; conversion: Fn },
+) => {
+  const haveChildren =
+    Array.isArray(data[children]) && data[children].length > 0;
+  const conversionData = conversion(data) || {};
+  return haveChildren
+    ? {
+        ...conversionData,
+        [children]: data[children].map((i: number) =>
+          treeMapEach(i, {
+            children,
+            conversion,
+          }),
+        ),
+      }
+    : {
+        ...conversionData,
+      };
+};
+
+/**
+ * 递归遍历树结构
+ * @param treeDatas 树
+ * @param callBack 回调
+ * @param parentNode 父节点
+ */
+export const eachTree = (treeDatas: any[], callBack: Fn, parentNode = {}) => {
+  treeDatas.forEach((element) => {
+    const newNode = callBack(element, parentNode) || element;
+    if (element.children) {
+      eachTree(element.children, callBack, newNode);
+    }
+  });
+};
+
+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ */
+export const handleTree = (
+  data: any[],
+  id?: string,
+  parentId?: string,
+  children?: string,
+) => {
+  if (!Array.isArray(data)) {
+    console.warn('data must be an array');
+    return [];
+  }
+  const config = {
+    id: id || 'id',
+    parentId: parentId || 'parentId',
+    childrenList: children || 'children',
+  };
+
+  const childrenListMap = {};
+  const nodeIds = {};
+  const tree: any[] = [];
+
+  for (const d of data) {
+    const parentId = d[config.parentId];
+    if (
+      childrenListMap[parentId] === null ||
+      childrenListMap[parentId] === undefined
+    ) {
+      childrenListMap[parentId] = [];
+    }
+    nodeIds[d[config.id]] = d;
+    childrenListMap[parentId].push(d);
+  }
+
+  for (const d of data) {
+    const parentId = d[config.parentId];
+    if (nodeIds[parentId] === null || nodeIds[parentId] === undefined) {
+      tree.push(d);
+    }
+  }
+
+  for (const t of tree) {
+    adaptToChildrenList(t);
+  }
+
+  function adaptToChildrenList(o) {
+    if (childrenListMap[o[config.id]] !== null) {
+      o[config.childrenList] = childrenListMap[o[config.id]];
+    }
+    if (o[config.childrenList]) {
+      for (const c of o[config.childrenList]) {
+        adaptToChildrenList(c);
+      }
+    }
+  }
+
+  return tree;
+};
+
+/**
+ * 构造树型结构数据
+ * @param {*} data 数据源
+ * @param {*} id id字段 默认 'id'
+ * @param {*} parentId 父节点字段 默认 'parentId'
+ * @param {*} children 孩子节点字段 默认 'children'
+ * @param {*} rootId 根Id 默认 0
+ */
+// @ts-ignore: 遗留函数，保持原有逻辑不变
+export const handleTree2 = (data, id, parentId, children, rootId) => {
+  id = id || 'id';
+  parentId = parentId || 'parentId';
+  // children = children || 'children'
+  rootId =
+    rootId ||
+    Math.min(
+      ...data.map((item) => {
+        return item[parentId];
+      }),
+    ) ||
+    0;
+  // 对源数据深度克隆
+  const cloneData = structuredClone(data);
+  // 循环所有项
+  const treeData = cloneData.filter((father) => {
+    const branchArr = cloneData.filter((child) => {
+      // 返回每一项的子级数组
+      return father[id] === child[parentId];
+    });
+    branchArr.length > 0 ? (father.children = branchArr) : '';
+    // 返回第一层
+    return father[parentId] === rootId;
+  });
+  return treeData === '' ? data : treeData;
+};
+
+/**
+ * 校验选中的节点，是否为指定 level
+ *
+ * @param tree 要操作的树结构数据
+ * @param nodeId 需要判断在什么层级的数据
+ * @param level 检查的级别, 默认检查到二级
+ * @return true 是；false 否
+ */
+export const checkSelectedNode = (
+  tree: any[],
+  nodeId: any,
+  level = 2,
+): boolean => {
+  if (tree === undefined || !Array.isArray(tree) || tree.length === 0) {
+    console.warn('tree must be an array');
+    return false;
+  }
+
+  // 校验是否是一级节点
+  if (tree.some((item) => item.id === nodeId)) {
+    return false;
+  }
+
+  // 递归计数
+  let count = 1;
+
+  // 深层次校验
+  function performAThoroughValidation(arr: any[]): boolean {
+    count += 1;
+    for (const item of arr) {
+      if (item.id === nodeId) {
+        return true;
+      } else if (
+        item.children !== undefined &&
+        item.children.length > 0 &&
+        performAThoroughValidation(item.children)
+      ) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  for (const item of tree) {
+    count = 1;
+    if (
+      performAThoroughValidation(item.children) && // 找到后对比是否是期望的层级
+      count >= level
+    ) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+/**
+ * 获取节点的完整结构
+ * @param tree 树数据
+ * @param nodeId 节点 id
+ */
+export const treeToString = (tree: any[], nodeId) => {
+  if (tree === undefined || !Array.isArray(tree) || tree.length === 0) {
+    console.warn('tree must be an array');
+    return '';
+  }
+  // 校验是否是一级节点
+  const node = tree.find((item) => item.id === nodeId);
+  if (node !== undefined) {
+    return node.name;
+  }
+  let str = '';
+
+  function performAThoroughValidation(arr) {
+    if (arr === undefined || !Array.isArray(arr) || arr.length === 0) {
+      return false;
+    }
+    for (const item of arr) {
+      if (item.id === nodeId) {
+        str += ` / ${item.name}`;
+        return true;
+      } else if (item.children !== undefined && item.children.length > 0) {
+        str += ` / ${item.name}`;
+        if (performAThoroughValidation(item.children)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  for (const item of tree) {
+    str = `${item.name}`;
+    if (performAThoroughValidation(item.children)) {
+      break;
+    }
+  }
+  return str;
+};

apps/web-ele/src/utils/useUpload.ts

@@ -0,0 +1,67 @@
+import type { UploadRawFile } from 'element-plus';
+
+import { ElMessage } from 'element-plus';
+
+const message = ElMessage; // 消息
+
+enum UploadType {
+  Image = 'image',
+  Video = 'video',
+  Voice = 'voice',
+}
+
+const useBeforeUpload = (type: UploadType, maxSizeMB: number) => {
+  const fn = (rawFile: UploadRawFile): boolean => {
+    let allowTypes: string[] = [];
+    let name = '';
+
+    switch (type) {
+      case UploadType.Image: {
+        allowTypes = [
+          'image/jpeg',
+          'image/png',
+          'image/gif',
+          'image/bmp',
+          'image/jpg',
+        ];
+        maxSizeMB = 2;
+        name = '图片';
+        break;
+      }
+      case UploadType.Video: {
+        allowTypes = ['video/mp4'];
+        maxSizeMB = 10;
+        name = '视频';
+        break;
+      }
+      case UploadType.Voice: {
+        allowTypes = [
+          'audio/mp3',
+          'audio/mpeg',
+          'audio/wma',
+          'audio/wav',
+          'audio/amr',
+        ];
+        maxSizeMB = 2;
+        name = '语音';
+        break;
+      }
+    }
+    // 格式不正确
+    if (!allowTypes.includes(rawFile.type)) {
+      message.error(`上传${name}格式不对!`);
+      return false;
+    }
+    // 大小不正确
+    if (rawFile.size / 1024 / 1024 > maxSizeMB) {
+      message.error(`上传${name}大小不能超过${maxSizeMB}M!`);
+      return false;
+    }
+
+    return true;
+  };
+
+  return fn;
+};
+
+export { UploadType, useBeforeUpload };

apps/web-ele/src/views/mp/autoReply/data.ts

@@ -0,0 +1,90 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { markRaw } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+
+import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
+
+import { MsgType } from './modules/types';
+
+/** 获取表格列配置 */
+export function useGridColumns(
+  msgType: MsgType,
+): VxeTableGridOptions['columns'] {
+  const columns: VxeTableGridOptions['columns'] = [];
+  // 请求消息类型列（仅消息回复显示）
+  if (msgType === MsgType.Message) {
+    columns.push({
+      field: 'requestMessageType',
+      title: '请求消息类型',
+      minWidth: 120,
+    });
+  }
+
+  // 关键词列（仅关键词回复显示）
+  if (msgType === MsgType.Keyword) {
+    columns.push({
+      field: 'requestKeyword',
+      title: '关键词',
+      minWidth: 150,
+    });
+  }
+
+  // 匹配类型列（仅关键词回复显示）
+  if (msgType === MsgType.Keyword) {
+    columns.push({
+      field: 'requestMatch',
+      title: '匹配类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH },
+      },
+    });
+  }
+
+  // 回复消息类型列
+  columns.push(
+    {
+      field: 'responseMessageType',
+      title: '回复消息类型',
+      minWidth: 120,
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MP_MESSAGE_TYPE },
+      },
+    },
+    {
+      field: 'responseContent',
+      title: '回复内容',
+      minWidth: 200,
+      slots: { default: 'replyContent' },
+    },
+    {
+      field: 'createTime',
+      title: '创建时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  );
+  return columns;
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: markRaw(WxAccountSelect),
+    },
+  ];
+}

apps/web-ele/src/views/mp/autoReply/index.vue

@@ -0,0 +1,253 @@
+<script lang="ts" setup>
+import type { TabPaneName } from 'element-plus';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { computed, nextTick, onMounted, ref } from 'vue';
+
+import { ContentWrap, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import {
+  ElLoading,
+  ElMessage,
+  ElMessageBox,
+  ElRow,
+  ElTabPane,
+  ElTabs,
+} from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as MpAutoReplyApi from '#/api/mp/autoReply';
+import { $t } from '#/locales';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import Form from './modules/form.vue';
+import ReplyContentCell from './modules/ReplyTable.vue';
+import { MsgType } from './modules/types';
+
+defineOptions({ name: 'MpAutoReply' });
+
+const msgType = ref<MsgType>(MsgType.Keyword); // 消息类型
+async function onTabChange(_tabName: TabPaneName) {
+  // 等待 msgType 更新完成
+  await nextTick();
+  const columns = useGridColumns(msgType.value);
+  if (columns) {
+    // 使用 setGridOptions 更新列配置
+    gridApi.setGridOptions({ columns });
+    // 等待列配置更新完成
+    await nextTick();
+  }
+  await gridApi.query();
+  // 查询完成后更新数据长度
+  updateTableDataLength();
+}
+
+/** 新增按钮操作 */
+async function handleCreate() {
+  const formValues = await gridApi.formApi.getValues();
+
+  formModalApi
+    .setData({
+      isCreating: true,
+      msgType: msgType.value,
+      accountId: formValues.accountId,
+    })
+    .open();
+}
+
+/** 修改按钮操作 */
+async function handleEdit(row: any) {
+  const data = (await MpAutoReplyApi.getAutoReply(row.id)) as any;
+  formModalApi
+    .setData({ isCreating: false, msgType: msgType.value, row: data })
+    .open();
+}
+
+/** 删除按钮操作 */
+async function handleDelete(row: any) {
+  await ElMessageBox.confirm('是否确认删除此数据?');
+  const loadingInstance = ElLoading.service({
+    text: $t('ui.actionMessage.deleting', ['自动回复']),
+  });
+  try {
+    await MpAutoReplyApi.deleteAutoReply(row.id);
+    ElMessage.success('删除成功');
+    await gridApi.query();
+    // 查询完成后更新数据长度
+    updateTableDataLength();
+  } finally {
+    loadingInstance.close();
+  }
+}
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+    // 表单值变化时自动提交，这样 accountId 会被正确传递到查询函数
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useGridColumns(msgType.value),
+    height: 'calc(100vh - 300px)',
+    // height: '600px',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          return await MpAutoReplyApi.getAutoReplyPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            type: msgType.value,
+            ...formValues,
+          });
+        },
+      },
+      // 禁用自动加载，等表单初始化完成后再加载
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+
+// 表格数据长度，用于判断是否显示新增按钮
+const tableDataLength = ref(0);
+
+// 更新表格数据长度（避免在模板中直接调用 getTableData 导致响应式循环）
+function updateTableDataLength() {
+  try {
+    if (!gridApi.grid) {
+      return;
+    }
+    const tableData = gridApi.grid.getTableData();
+    tableDataLength.value = tableData?.tableData?.length || 0;
+  } catch {
+    tableDataLength.value = 0;
+  }
+}
+
+// 计算是否显示新增按钮：关注时回复类型只有在没有数据时才显示
+const showCreateButton = computed(() => {
+  if (msgType.value !== MsgType.Follow) {
+    return true;
+  }
+  return tableDataLength.value <= 0;
+});
+
+// 页面挂载后，等待表单初始化完成再加载数据
+onMounted(async () => {
+  // 等待 WxAccountSelect 组件加载并设置默认值
+  await nextTick();
+  if (gridApi.formApi) {
+    const formValues = await gridApi.formApi.getValues();
+    // 如果 accountId 有值，说明已经准备好了
+    if (formValues.accountId) {
+      // 设置为最新提交的值
+      gridApi.formApi.setLatestSubmissionValues(formValues);
+      // 触发首次查询
+      await gridApi.query();
+      updateTableDataLength();
+    }
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
+
+    <!-- tab 切换 -->
+    <ContentWrap>
+      <ElTabs v-model="msgType" @tab-change="onTabChange">
+        <!-- tab 项 -->
+        <ElTabPane :name="MsgType.Follow">
+          <template #label>
+            <ElRow align="middle">
+              <Icon icon="ep:star" class="mr-2px" /> 关注时回复
+            </ElRow>
+          </template>
+        </ElTabPane>
+        <ElTabPane :name="MsgType.Message">
+          <template #label>
+            <ElRow align="middle">
+              <Icon icon="ep:chat-line-round" class="mr-2px" /> 消息回复
+            </ElRow>
+          </template>
+        </ElTabPane>
+        <ElTabPane :name="MsgType.Keyword">
+          <template #label>
+            <ElRow align="middle">
+              <Icon icon="fa:newspaper-o" class="mr-2px" /> 关键词回复
+            </ElRow>
+          </template>
+        </ElTabPane>
+      </ElTabs>
+      <!-- 列表 -->
+      <FormModal
+        @success="
+          () => {
+            gridApi.query().then(() => {
+              updateTableDataLength();
+            });
+          }
+        "
+      />
+      <Grid table-title="自动回复列表">
+        <template #toolbar-tools>
+          <TableAction
+            v-if="showCreateButton"
+            :actions="[
+              {
+                label: $t('ui.actionTitle.create', ['自动回复']),
+                type: 'primary',
+                icon: ACTION_ICON.ADD,
+                auth: ['mp:auto-reply:create'],
+                onClick: handleCreate,
+              },
+            ]"
+          />
+        </template>
+        <template #replyContent="{ row }">
+          <ReplyContentCell :row="row" />
+        </template>
+        <template #actions="{ row }">
+          <TableAction
+            :actions="[
+              {
+                label: $t('common.edit'),
+                type: 'primary',
+                link: true,
+                icon: ACTION_ICON.EDIT,
+                auth: ['mp:auto-reply:update'],
+                onClick: handleEdit.bind(null, row),
+              },
+              {
+                label: $t('common.delete'),
+                type: 'danger',
+                link: true,
+                icon: ACTION_ICON.DELETE,
+                auth: ['mp:auto-reply:delete'],
+                popConfirm: {
+                  title: '是否确认删除此数据?',
+                  confirm: handleDelete.bind(null, row),
+                },
+              },
+            ]"
+          />
+        </template>
+      </Grid>
+    </ContentWrap>
+  </Page>
+</template>

apps/web-ele/src/views/mp/autoReply/modules/ReplyForm.vue

@@ -0,0 +1,128 @@
+<script lang="ts" setup>
+import type { FormInstance } from 'element-plus';
+
+import type { Reply } from '#/views/mp/modules/wx-reply';
+
+import { computed, ref } from 'vue';
+
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
+
+import { ElForm, ElFormItem, ElInput, ElOption, ElSelect } from 'element-plus';
+
+import WxReplySelect from '#/views/mp/modules/wx-reply';
+
+import { MsgType } from './types';
+
+defineOptions({ name: 'ReplyForm' });
+
+const props = defineProps<{
+  modelValue: any;
+  msgType: MsgType;
+  reply: Reply;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:reply', v: Reply): void;
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+const reply = computed<Reply>({
+  get: () => props.reply,
+  set: (val) => emit('update:reply', val),
+});
+
+const replyForm = computed<any>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+const formRef = ref<FormInstance | null>(null); // 表单 ref
+
+const RequestMessageTypes = [
+  'text',
+  'image',
+  'voice',
+  'video',
+  'shortvideo',
+  'location',
+  'link',
+]; // 允许选择的请求消息类型
+
+// 表单校验
+const rules = {
+  requestKeyword: [
+    { required: true, message: '请求的关键字不能为空', trigger: 'blur' },
+  ],
+  requestMatch: [
+    { required: true, message: '请求的关键字的匹配不能为空', trigger: 'blur' },
+  ],
+};
+
+defineExpose({
+  resetFields: () => formRef.value?.resetFields(),
+  validate: async () => formRef.value?.validate(),
+});
+</script>
+
+<template>
+  <div>
+    <ElForm ref="formRef" :model="replyForm" :rules="rules" label-width="80px">
+      <ElFormItem
+        label="消息类型"
+        prop="requestMessageType"
+        v-if="msgType === MsgType.Message"
+      >
+        <ElSelect v-model="replyForm.requestMessageType" placeholder="请选择">
+          <template
+            v-for="dict in getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE)"
+            :key="dict.value"
+          >
+            <ElOption
+              v-if="RequestMessageTypes.includes(dict.value as string)"
+              :label="dict.label"
+              :value="dict.value"
+            />
+          </template>
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem
+        label="匹配类型"
+        prop="requestMatch"
+        v-if="msgType === MsgType.Keyword"
+      >
+        <ElSelect
+          v-model="replyForm.requestMatch"
+          placeholder="请选择匹配类型"
+          clearable
+        >
+          <ElOption
+            v-for="dict in getDictOptions(
+              DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH,
+              'number',
+            )"
+            :key="String(dict.value)"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </ElSelect>
+      </ElFormItem>
+      <ElFormItem
+        label="关键词"
+        prop="requestKeyword"
+        v-if="msgType === MsgType.Keyword"
+      >
+        <ElInput
+          v-model="replyForm.requestKeyword"
+          placeholder="请输入内容"
+          clearable
+        />
+      </ElFormItem>
+      <ElFormItem label="回复消息">
+        <WxReplySelect v-model="reply" />
+      </ElFormItem>
+    </ElForm>
+  </div>
+</template>
+
+<style scoped></style>

apps/web-ele/src/views/mp/autoReply/modules/ReplyTable.vue

@@ -0,0 +1,55 @@
+<script lang="ts" setup>
+import WxMusic from '#/views/mp/modules/wx-music';
+import WxNews from '#/views/mp/modules/wx-news';
+import WxVideoPlayer from '#/views/mp/modules/wx-video-play';
+import WxVoicePlayer from '#/views/mp/modules/wx-voice-play';
+
+defineOptions({ name: 'ReplyContentCell' });
+
+const props = defineProps<{
+  row: any;
+}>();
+</script>
+
+<template>
+  <div>
+    <div v-if="props.row.responseMessageType === 'text'">
+      {{ props.row.responseContent }}
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'voice'">
+      <WxVoicePlayer
+        v-if="props.row.responseMediaUrl"
+        :url="props.row.responseMediaUrl"
+      />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'image'">
+      <a target="_blank" :href="props.row.responseMediaUrl">
+        <img :src="props.row.responseMediaUrl" style="width: 100px" />
+      </a>
+    </div>
+    <div
+      v-else-if="
+        props.row.responseMessageType === 'video' ||
+        props.row.responseMessageType === 'shortvideo'
+      "
+    >
+      <WxVideoPlayer
+        v-if="props.row.responseMediaUrl"
+        :url="props.row.responseMediaUrl"
+        style="margin-top: 10px"
+      />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'news'">
+      <WxNews :articles="props.row.responseArticles" />
+    </div>
+    <div v-else-if="props.row.responseMessageType === 'music'">
+      <WxMusic
+        :title="props.row.responseTitle"
+        :description="props.row.responseDescription"
+        :thumb-media-url="props.row.responseThumbMediaUrl"
+        :music-url="props.row.responseMusicUrl"
+        :hq-music-url="props.row.responseHqMusicUrl"
+      />
+    </div>
+  </div>
+</template>

apps/web-ele/src/views/mp/autoReply/modules/form.vue

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import type { Reply } from '#/views/mp/modules/wx-reply';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage } from 'element-plus';
+
+import * as MpAutoReplyApi from '#/api/mp/autoReply';
+import { $t } from '#/locales';
+import { ReplyType } from '#/views/mp/modules/wx-reply/modules/types';
+
+import ReplyForm from './ReplyForm.vue';
+import { MsgType } from './types';
+
+const emit = defineEmits(['success']);
+
+const formRef = ref<InstanceType<typeof ReplyForm> | null>(null);
+
+const formData = ref<{ isCreating: boolean; msgType: MsgType; row?: any }>();
+const replyForm = ref<any>({});
+const reply = ref<Reply>({
+  type: ReplyType.Text,
+  accountId: -1,
+});
+
+const getTitle = computed(() => {
+  return formData.value?.isCreating
+    ? $t('ui.actionTitle.create', ['自动回复'])
+    : $t('ui.actionTitle.edit', ['自动回复']);
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    await formRef.value?.validate();
+
+    // 处理回复消息
+    const submitForm: any = { ...replyForm.value };
+    submitForm.responseMessageType = reply.value.type;
+    submitForm.responseContent = reply.value.content;
+    submitForm.responseMediaId = reply.value.mediaId;
+    submitForm.responseMediaUrl = reply.value.url;
+    submitForm.responseTitle = reply.value.title;
+    submitForm.responseDescription = reply.value.description;
+    submitForm.responseThumbMediaId = reply.value.thumbMediaId;
+    submitForm.responseThumbMediaUrl = reply.value.thumbMediaUrl;
+    submitForm.responseArticles = reply.value.articles;
+    submitForm.responseMusicUrl = reply.value.musicUrl;
+    submitForm.responseHqMusicUrl = reply.value.hqMusicUrl;
+
+    modalApi.lock();
+    try {
+      if (replyForm.value.id === undefined) {
+        await MpAutoReplyApi.createAutoReply(submitForm);
+        ElMessage.success('新增成功');
+      } else {
+        await MpAutoReplyApi.updateAutoReply(submitForm);
+        ElMessage.success('修改成功');
+      }
+      await modalApi.close();
+      emit('success');
+    } finally {
+      modalApi.unlock();
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      replyForm.value = {};
+      reply.value = {
+        type: ReplyType.Text,
+        accountId: -1,
+      };
+      return;
+    }
+    // 加载数据
+    const data = modalApi.getData<{
+      accountId?: number;
+      isCreating: boolean;
+      msgType: MsgType;
+      row?: any;
+    }>();
+    if (!data) {
+      return;
+    }
+    formData.value = data;
+
+    if (data.isCreating) {
+      // 新建：初始化表单
+      replyForm.value = {
+        id: undefined,
+        accountId: data.accountId || -1,
+        type: data.msgType,
+        requestKeyword: undefined,
+        requestMatch: data.msgType === MsgType.Keyword ? 1 : undefined,
+        requestMessageType: undefined,
+      };
+      reply.value = {
+        type: ReplyType.Text,
+        accountId: data.accountId || -1,
+      };
+    } else if (data.row) {
+      // 编辑：加载数据
+      const rowData = data.row;
+      replyForm.value = { ...rowData };
+      delete replyForm.value.responseMessageType;
+      delete replyForm.value.responseContent;
+      delete replyForm.value.responseMediaId;
+      delete replyForm.value.responseMediaUrl;
+      delete replyForm.value.responseDescription;
+      delete replyForm.value.responseArticles;
+      reply.value = {
+        type: rowData.responseMessageType,
+        accountId: data.accountId || -1,
+        content: rowData.responseContent,
+        mediaId: rowData.responseMediaId,
+        url: rowData.responseMediaUrl,
+        title: rowData.responseTitle,
+        description: rowData.responseDescription,
+        thumbMediaId: rowData.responseThumbMediaId,
+        thumbMediaUrl: rowData.responseThumbMediaUrl,
+        articles: rowData.responseArticles,
+        musicUrl: rowData.responseMusicUrl,
+        hqMusicUrl: rowData.responseHqMusicUrl,
+      };
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5">
+    <ReplyForm
+      v-if="formData"
+      v-model="replyForm"
+      v-model:reply="reply"
+      :msg-type="formData.msgType"
+      ref="formRef"
+    />
+  </Modal>
+</template>

apps/web-ele/src/views/mp/autoReply/modules/types.ts

@@ -0,0 +1,7 @@
+// 消息类型（Follow: 关注时回复；Message: 消息回复；Keyword: 关键词回复）
+// 作为 tab.name，enum 的数字不能随意修改，与 api 参数相关
+export enum MsgType {
+  Follow = 1,
+  Keyword = 3,
+  Message = 2,
+}

apps/web-ele/src/views/mp/draft/data.ts

@@ -0,0 +1,41 @@
+import type { VbenFormSchema } from '#/adapter/form';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { markRaw } from 'vue';
+
+import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
+
+/** 获取表格列配置 */
+export function useGridColumns(): VxeTableGridOptions['columns'] {
+  return [
+    {
+      field: 'content',
+      title: '图文内容',
+      minWidth: 300,
+      slots: { default: 'content' },
+    },
+    {
+      field: 'updateTime',
+      title: '更新时间',
+      minWidth: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 200,
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: markRaw(WxAccountSelect),
+    },
+  ];
+}

apps/web-ele/src/views/mp/draft/index.vue

@@ -0,0 +1,316 @@
+<script lang="ts" setup>
+import type { Article } from './modules/types';
+
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { nextTick, onMounted, provide, ref, watch } from 'vue';
+
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+
+import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import * as MpDraftApi from '#/api/mp/draft';
+import * as MpFreePublishApi from '#/api/mp/freePublish';
+import { createEmptyNewsItem } from '#/views/mp/draft/modules/types';
+
+import { useGridColumns, useGridFormSchema } from './data';
+import DraftTableCell from './modules/draft-table.vue';
+import Form from './modules/form.vue';
+
+defineOptions({ name: 'MpDraft' });
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          // 更新 accountId
+          if (formValues?.accountId) {
+            accountId.value = formValues.accountId;
+          }
+          const drafts = await MpDraftApi.getDraftPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+          // 处理 API 返回的数据，兼容不同的数据结构
+          const formattedList: Article[] = drafts.list.map((draft: any) => {
+            // 如果已经是 content.newsItem 格式，直接使用
+            if (draft.content?.newsItem) {
+              const newsItem = draft.content.newsItem.map((item: any) => ({
+                ...item,
+                picUrl: item.thumbUrl || item.picUrl,
+              }));
+              return {
+                mediaId: draft.mediaId,
+                content: {
+                  newsItem,
+                },
+                updateTime:
+                  draft.updateTime ||
+                  (draft.createTime
+                    ? new Date(draft.createTime).getTime()
+                    : Date.now()),
+              };
+            }
+            // 如果是 articles 格式，转换为 content.newsItem 格式
+            if (draft.articles) {
+              const newsItem = draft.articles.map((article: any) => ({
+                ...article,
+                thumbUrl: article.thumbUrl || article.thumbMediaId,
+                picUrl: article.thumbUrl || article.thumbMediaId,
+              }));
+              return {
+                mediaId: draft.mediaId,
+                content: {
+                  newsItem,
+                },
+                updateTime:
+                  draft.updateTime ||
+                  (draft.createTime
+                    ? new Date(draft.createTime).getTime()
+                    : Date.now()),
+              };
+            }
+            // 默认返回空结构
+            return {
+              mediaId: draft.mediaId || '',
+              content: {
+                newsItem: [],
+              },
+              updateTime: draft.updateTime || Date.now(),
+            };
+          });
+          return {
+            page: {
+              total: drafts.total,
+            },
+            result: formattedList,
+          };
+        },
+      },
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Article>,
+});
+
+// 提供 accountId 给子组件
+const accountId = ref<number>(-1);
+
+// 监听表单提交，更新 accountId
+watch(
+  () => gridApi.formApi?.getLatestSubmissionValues?.()?.accountId,
+  (newAccountId) => {
+    if (newAccountId !== undefined) {
+      accountId.value = newAccountId;
+    }
+  },
+);
+
+provide('accountId', accountId);
+
+/** 新增按钮操作 */
+async function handleCreate() {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId || accountId === -1) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+
+  formModalApi
+    .setData({
+      isCreating: true,
+      accountId,
+      newsList: [createEmptyNewsItem()],
+    })
+    .open();
+}
+
+/** 修改按钮操作 */
+async function handleEdit(row: Article) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId || accountId === -1) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+
+  formModalApi
+    .setData({
+      isCreating: false,
+      accountId,
+      mediaId: row.mediaId,
+      newsList: structuredClone(row.content.newsItem),
+    })
+    .open();
+}
+
+/** 发布按钮操作 */
+async function handlePublish(row: Article) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId || accountId === -1) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+
+  const content =
+    '你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。' +
+    '已发布内容不会推送给用户，也不会展示在公众号主页中。 ' +
+    '发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。';
+  try {
+    await ElMessageBox.confirm(content);
+    const loadingInstance = ElLoading.service({
+      text: '发布中...',
+    });
+    try {
+      await MpFreePublishApi.submitFreePublish(accountId, row.mediaId);
+      ElMessage.success('发布成功');
+      await gridApi.query();
+    } finally {
+      loadingInstance.close();
+    }
+  } catch {
+    //
+  }
+}
+
+/** 删除按钮操作 */
+async function handleDelete(row: Article) {
+  const formValues = await gridApi.formApi.getValues();
+  const accountId = formValues.accountId;
+  if (!accountId || accountId === -1) {
+    ElMessage.warning('请先选择公众号');
+    return;
+  }
+
+  try {
+    await ElMessageBox.confirm('此操作将永久删除该草稿, 是否继续?');
+    const loadingInstance = ElLoading.service({
+      text: '删除中...',
+    });
+    try {
+      await MpDraftApi.deleteDraft(accountId, row.mediaId);
+      ElMessage.success('删除成功');
+      await gridApi.query();
+    } finally {
+      loadingInstance.close();
+    }
+  } catch {
+    //
+  }
+}
+
+// 页面挂载后，等待表单初始化完成再加载数据
+onMounted(async () => {
+  await nextTick();
+  if (gridApi.formApi) {
+    const formValues = await gridApi.formApi.getValues();
+    if (formValues.accountId) {
+      accountId.value = formValues.accountId;
+      gridApi.formApi.setLatestSubmissionValues(formValues);
+      await gridApi.query();
+    }
+  }
+});
+</script>
+
+<template>
+  <Page auto-content-height>
+    <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
+
+    <FormModal
+      @success="
+        () => {
+          gridApi.query();
+        }
+      "
+    />
+
+    <Grid table-title="草稿列表">
+      <template #toolbar-tools>
+        <TableAction
+          :actions="[
+            {
+              label: '新增',
+              type: 'primary',
+              icon: ACTION_ICON.ADD,
+              auth: ['mp:draft:create'],
+              onClick: handleCreate,
+            },
+          ]"
+        />
+      </template>
+      <template #content="{ row }">
+        <DraftTableCell :row="row" />
+      </template>
+      <template #actions="{ row }">
+        <TableAction
+          :actions="[
+            {
+              label: '发布',
+              type: 'success',
+              link: true,
+              icon: ACTION_ICON.UPLOAD,
+              auth: ['mp:free-publish:submit'],
+              onClick: handlePublish.bind(null, row),
+            },
+            {
+              label: '编辑',
+              type: 'primary',
+              link: true,
+              icon: ACTION_ICON.EDIT,
+              auth: ['mp:draft:update'],
+              onClick: handleEdit.bind(null, row),
+            },
+            {
+              label: '删除',
+              type: 'danger',
+              link: true,
+              icon: ACTION_ICON.DELETE,
+              auth: ['mp:draft:delete'],
+              popConfirm: {
+                title: '是否确认删除此数据?',
+                confirm: handleDelete.bind(null, row),
+              },
+            },
+          ]"
+        />
+      </template>
+    </Grid>
+  </Page>
+</template>
+
+<style lang="scss" scoped>
+:deep(.vxe-table--body-wrapper) {
+  .vxe-table--body {
+    .vxe-body--column {
+      .vxe-cell {
+        padding: 0;
+      }
+    }
+  }
+}
+</style>

apps/web-ele/src/views/mp/draft/mock.js

@@ -0,0 +1,164 @@
+export default {
+  list: [
+    {
+      mediaId:
+        'r6ryvl6LrxBU0miaST4Y-q-G9pdsmZw0OYG4FzHQkKfpLfEwIH51wy2bxisx8PvW',
+      content: {
+        newsItem: [
+          {
+            title: '我是标题（OOO）',
+            author: '我是作者',
+            digest: '我是摘要',
+            content: '我是内容',
+            contentSourceUrl: 'https://www.iocoder.cn',
+            thumbMediaId:
+              'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9XaFphcmtJVFh3VEc4Q1MxQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN2QxTE56SFBCYXc2RE9NcUxIeS1CQjJuUHhTWjBlN2VOeGRpRi1fZUhwN1FNQjdrQV9yRU9EU0hibHREZmZoVW5acnZrN3ZjaWsxejR3RGpKczBzTHFIM0dFNFZWVkpBc0dWWlAzUEhlVmpnfn4%3D&chksm=1f6354802814dd969ef83c0f3babe555c614270b30bc383beaf7ffd13b0257f0fe5ced9af694#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png',
+          },
+          {
+            title: '我是标题（XXX）',
+            author: '我是作者',
+            digest: '我是摘要',
+            content: '我是内容',
+            contentSourceUrl: 'https://www.iocoder.cn',
+            thumbMediaId:
+              'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9yTlYwOEs1clpwcE5OUEhCQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN0NSMjFqN3N1aUZMbFNVLTZHN2ZDME9qOGp2THk2RFNlSTlKZ3Y1czFVZDdQQm5IeUg3dEppSUtpQUh5SExOOTRkT3dHNUdBdHdWSWlOendlREV3dS1jUEVQbFpiVTZmVW5iRWhZcGdkNTFRfn4%3D&chksm=1f6354802814dd96a403151cd44c7da4eecf0e475d25423e46ecd795b513bafd829a75daef9b#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png',
+          },
+        ],
+      },
+      updateTime: 1_673_655_730,
+    },
+    {
+      mediaId:
+        'r6ryvl6LrxBU0miaST4Y-jGpXnO73ihN0lsNXknCRQHapp2xgHMRxHKG50LituFe',
+      content: {
+        newsItem: [
+          {
+            title: '我是标题（修改）',
+            author: '我是作者',
+            digest: '我是摘要',
+            content: '我是内容',
+            contentSourceUrl: 'https://www.iocoder.cn',
+            thumbMediaId:
+              'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl95WVFXYndIZnZJd0t5cjgvQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN1dlNURPbWswbEF4RDd5dVJTdjQ4cm9Cc0Q1TWhpMUh6SE1hVEE3ZHljaHhlZjZYSGF5N2JNSHpDTlh6ajNZbkpGTGpTcUQ4M3NMdW41ZUpXNFZZQ1VKbVlaMVp5ekxEV1czREdsY1dOYTZnfn4%3D&chksm=1f6354be2814dda8e6238037c2ebd52b1c8e80e93249a861ad80e4d40e5ca7207233475ca689#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png',
+          },
+        ],
+      },
+      updateTime: 1_673_655_584,
+    },
+    {
+      mediaId:
+        'r6ryvl6LrxBU0miaST4Y-v5SrbNCPpD6M_p3TmSrYwTjKogs-0DMJgmjMyNZPeMO',
+      content: {
+        newsItem: [
+          {
+            title: '1321',
+            author: '3232',
+            digest: '1333',
+            content: '<p>444</p>',
+            contentSourceUrl: 'http://www.iocoder.cn',
+            thumbMediaId:
+              'r6ryvl6LrxBU0miaST4Y-tlQmcl3RdC-Jcgns6IQtf7zenGy3b86WLT7GzUcrb1T',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9jelJiaDAzbmdpSkJOZ2M2QWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNDNXVVc2ZDRYeTY0Zm1weXR6dE9vQWh1TzEwbEpUVnRfVzJyaGFDNXBkZ0ZXM2JFOTNaRHNhOHRUeFdEanhMeS01X01kMUNWQ1BpRER3cjYwTl9pMnpFLUJhZXFucVVfM1pDUXlTUEl1S25nfn4%3D&chksm=1f6354bc2814ddaa56a90ad5bc3d078601c8d1589ba01827a8170587bc830ff9747b5f59c3a0#rd',
+            thumbUrl:
+              'http://mmbiz.qpic.cn/mmbiz_png/btUmCVHwbJUoicwBiacjVeQbu6QxgBVrukfSJXz509boa21SpH8OVHAqXCJiaiaAaHQJNxwwsa0gHRXVr0G5EZYamw/0?wx_fmt=png',
+          },
+        ],
+      },
+      updateTime: 1_673_628_969,
+    },
+    {
+      mediaId:
+        'r6ryvl6LrxBU0miaST4Y-vdWrisK5EZbk4Y3tzh8P0PG0eEUbnQrh0BcsEb3WNP0',
+      content: {
+        newsItem: [
+          {
+            title: 'tudou',
+            author: 'haha',
+            digest: '312',
+            content: '<p>132312</p>',
+            contentSourceUrl: 'http://www.iocoder.cn',
+            thumbMediaId:
+              'r6ryvl6LrxBU0miaST4Y-pgFtUNLu1foMSAMkoOsrQrTZ8EtTMssBLfTtzP0dfjG',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9qdkJ1ZjBoUmg2Uk9TS3RlQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNVg2aTJsaC1fMkU2eXNacUplN3VDTTZFZkhtMjhuTUZvWkxsNDBRSXExY2tiVXRHb09TaHgtREhzY3doZ0JYeC1TSTZ5eWZldXJsOWtfbV8yMi1aYkcyZ2pOY0haM0Ntb3VSWEtxUGVFRlNBfn4%3D&chksm=1f6354ba2814ddacf0184b24d310483641ef190b1faac098c285eb416c70017e2f54decfa1af#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pgFtUNLu1foMSAMkoOsrQrTZ8EtTMssBLfTtzP0dfjG.png',
+          },
+        ],
+      },
+      updateTime: 1_673_628_760,
+    },
+    {
+      mediaId:
+        'r6ryvl6LrxBU0miaST4Y-u9kTIm1DhWZDdXyxsxUVv2Z5DAB99IPxkIRTUUD206k',
+      content: {
+        newsItem: [
+          {
+            title: '12',
+            author: '333',
+            digest: '123',
+            content: '123',
+            contentSourceUrl: 'https://www.iocoder.cn',
+            thumbMediaId:
+              'r6ryvl6LrxBU0miaST4Y-jVixJGgnBnkBPRbuVptOW0CHYuQFyiOVNtamctS8xU8',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9qVVhpSDZUaFJWTzBBWWRVQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNWRnTDJWYmF2NER0clV1bThmQ0xUR3hqQnJkZ3BJSUNmNDJmc0lCZ1dadkVnZ3Z5bkN4YWtVUjhoaWZWYzZURUR4NnpMd0Y4Z3U5aUdib0lkMzI4Rjg3SG9JX2FycTMxbUctOHplaTlQVVhnfn4%3D&chksm=1f6354b62814dda076c778af33f06580165d8aa81f7798d55cfabb1886b5c74d9b2124a3535c#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-jVixJGgnBnkBPRbuVptOW0CHYuQFyiOVNtamctS8xU8.jpg',
+          },
+        ],
+      },
+      updateTime: 1_673_626_494,
+    },
+    {
+      mediaId:
+        'r6ryvl6LrxBU0miaST4Y-sO24upobaENDmeByfBTfaozB3aOqSMAV0lGy-UkHXE7',
+      content: {
+        newsItem: [
+          {
+            title: '我是标题',
+            author: '我是作者',
+            digest: '我是摘要',
+            content: '我是内容',
+            contentSourceUrl: 'https://www.iocoder.cn',
+            thumbMediaId:
+              'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
+            showCoverPic: 0,
+            needOpenComment: 0,
+            onlyFansCanComment: 0,
+            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9LT2dqRnpMNUpsR0hjYWtBQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNGNmazZTdlE5WkxvU0tfX2V5cjV2WjJiR0xjQUhyREFSZWo2eWNrUW9EYVh6ZkpWRXBLR3FmTEV6YldBMno3Q2ZvVXBSdzlaVDc3aFhndEpQWUwzWmFMUWt0YVVURE1VZ1FsQTdPMlRtc3JBfn4%3D&chksm=1f6354aa2814ddbcc2637382f963a8742993ac38ebcebe6e3411df5ac82ac7bbdb391be6494a#rd',
+            thumbUrl:
+              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png',
+          },
+        ],
+      },
+      updateTime: 1_673_534_279,
+    },
+  ],
+  total: 6,
+};

apps/web-ele/src/views/mp/draft/modules/cover-select.vue

@@ -0,0 +1,181 @@
+<script lang="ts" setup>
+import type { UploadFiles, UploadProps, UploadRawFile } from 'element-plus';
+
+import type { NewsItem } from './types';
+
+import { computed, inject, reactive, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+import { useAccessStore } from '@vben/stores';
+
+import { ElButton, ElDialog, ElImage, ElMessage, ElUpload } from 'element-plus';
+
+import { UploadType, useBeforeUpload } from '#/utils/useUpload';
+import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
+
+// 设置上传的请求头部
+
+const props = defineProps<{
+  isFirst: boolean;
+  modelValue: NewsItem;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: NewsItem): void;
+}>();
+
+const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-permanent`; // 上传永久素材的地址
+const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
+const newsItem = computed<NewsItem>({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit('update:modelValue', val);
+  },
+});
+
+const accountId = inject<number>('accountId');
+const showImageDialog = ref(false);
+
+const fileList = ref<UploadFiles>([]);
+interface UploadData {
+  type: UploadType;
+  accountId: number;
+}
+const uploadData: UploadData = reactive({
+  type: UploadType.Image,
+  accountId: accountId!,
+});
+
+/** 素材选择完成事件*/
+function onMaterialSelected(item: any) {
+  showImageDialog.value = false;
+  newsItem.value.thumbMediaId = item.mediaId;
+  newsItem.value.thumbUrl = item.url;
+}
+
+const onBeforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) =>
+  useBeforeUpload(UploadType.Image, 2)(rawFile);
+
+function onUploadSuccess(res: any) {
+  if (res.code !== 0) {
+    ElMessage.error(`上传出错：${res.msg}`);
+    return false;
+  }
+
+  // 重置上传文件的表单
+  fileList.value = [];
+
+  // 设置草稿的封面字段
+  newsItem.value.thumbMediaId = res.data.mediaId;
+  newsItem.value.thumbUrl = res.data.url;
+}
+
+function onUploadError(err: Error) {
+  ElMessage.error(`上传失败: ${err.message}`);
+}
+</script>
+
+<template>
+  <div>
+    <p>封面:</p>
+    <div class="thumb-div">
+      <ElImage
+        v-if="newsItem.thumbUrl"
+        style="width: 300px; max-height: 300px"
+        :src="newsItem.thumbUrl"
+        fit="contain"
+      />
+      <IconifyIcon
+        v-else
+        icon="ep:plus"
+        class="avatar-uploader-icon"
+        :class="isFirst ? 'avatar' : 'avatar1'"
+      />
+      <div class="thumb-but">
+        <ElUpload
+          :action="UPLOAD_URL"
+          :headers="HEADERS"
+          multiple
+          :limit="1"
+          :file-list="fileList"
+          :data="uploadData"
+          :before-upload="onBeforeUpload"
+          :on-error="onUploadError"
+          :on-success="onUploadSuccess"
+        >
+          <template #trigger>
+            <ElButton size="small" type="primary">本地上传</ElButton>
+          </template>
+          <ElButton
+            size="small"
+            type="primary"
+            @click="showImageDialog = true"
+            style="margin-left: 5px"
+          >
+            素材库选择
+          </ElButton>
+          <template #tip>
+            <div class="el-upload__tip">
+              支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
+            </div>
+          </template>
+        </ElUpload>
+      </div>
+      <ElDialog
+        title="选择图片"
+        v-model="showImageDialog"
+        width="80%"
+        append-to-body
+        destroy-on-close
+      >
+        <WxMaterialSelect
+          type="image"
+          :account-id="accountId!"
+          @select-material="onMaterialSelected"
+        />
+      </ElDialog>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-upload__tip {
+  margin-left: 5px;
+}
+
+.thumb-div {
+  display: inline-block;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  text-align: center;
+
+  .avatar-uploader-icon {
+    width: 120px;
+    height: 120px;
+    font-size: 28px;
+    line-height: 120px;
+    color: #8c939d;
+    text-align: center;
+    border: 1px solid #d9d9d9;
+  }
+
+  .avatar {
+    width: 230px;
+    height: 120px;
+  }
+
+  .avatar1 {
+    width: 120px;
+    height: 120px;
+  }
+
+  .thumb-but {
+    margin: 5px;
+  }
+}
+</style>

apps/web-ele/src/views/mp/draft/modules/draft-table.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { Article } from './types';
+
+import WxNews from '#/views/mp/modules/wx-news';
+
+defineOptions({ name: 'DraftTableCell' });
+
+const props = defineProps<{
+  row: Article;
+}>();
+</script>
+
+<template>
+  <div class="draft-content">
+    <div v-if="props.row.content && props.row.content.newsItem">
+      <WxNews :articles="props.row.content.newsItem" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.draft-content {
+  padding: 10px;
+}
+</style>

apps/web-ele/src/views/mp/draft/modules/form.vue

@@ -0,0 +1,102 @@
+<script lang="ts" setup>
+import type { NewsItem } from './types';
+
+import { computed, ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { ElMessage, ElMessageBox } from 'element-plus';
+
+import * as MpDraftApi from '#/api/mp/draft';
+
+import NewsForm from './news-form.vue';
+
+const emit = defineEmits(['success']);
+
+const formData = ref<{
+  accountId: number;
+  isCreating: boolean;
+  mediaId?: string;
+  newsList?: NewsItem[];
+}>();
+const newsList = ref<NewsItem[]>([]);
+const isSubmitting = ref(false);
+const isSaved = ref(false);
+
+const getTitle = computed(() => {
+  return formData.value?.isCreating ? '新建图文' : '修改图文';
+});
+
+const [Modal, modalApi] = useVbenModal({
+  async onConfirm() {
+    if (!formData.value) {
+      return;
+    }
+
+    isSubmitting.value = true;
+    modalApi.lock();
+    try {
+      if (formData.value.isCreating) {
+        await MpDraftApi.createDraft(formData.value.accountId, newsList.value);
+        ElMessage.success('新增成功');
+      } else if (formData.value.mediaId) {
+        await MpDraftApi.updateDraft(
+          formData.value.accountId,
+          formData.value.mediaId,
+          newsList.value,
+        );
+        ElMessage.success('更新成功');
+      }
+      isSaved.value = true;
+      await modalApi.close();
+      emit('success');
+    } finally {
+      isSubmitting.value = false;
+      modalApi.unlock();
+    }
+  },
+  async onBeforeClose() {
+    // 如果已经成功保存，直接关闭，不显示提示
+    if (isSaved.value) {
+      return true;
+    }
+    try {
+      await ElMessageBox.confirm('修改内容可能还未保存，确定关闭吗?');
+      return true;
+    } catch {
+      return false;
+    }
+  },
+  async onOpenChange(isOpen: boolean) {
+    if (!isOpen) {
+      formData.value = undefined;
+      newsList.value = [];
+      isSaved.value = false;
+      return;
+    }
+    isSaved.value = false;
+    const data = modalApi.getData<{
+      accountId: number;
+      isCreating: boolean;
+      mediaId?: string;
+      newsList?: NewsItem[];
+    }>();
+    if (!data) {
+      return;
+    }
+    formData.value = data;
+    newsList.value = data.newsList || [];
+  },
+});
+</script>
+
+<template>
+  <Modal :title="getTitle" class="w-4/5" destroy-on-close>
+    <NewsForm
+      v-if="formData"
+      v-model="newsList"
+      v-loading="isSubmitting"
+      :is-creating="formData.isCreating"
+    />
+  </Modal>
+</template>

apps/web-ele/src/views/mp/draft/modules/news-form.vue

@@ -0,0 +1,341 @@
+<script lang="ts" setup>
+import type { NewsItem } from './types';
+
+import { computed, ref } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElAside,
+  ElButton,
+  ElCol,
+  ElContainer,
+  ElInput,
+  ElMain,
+  ElMessageBox,
+  ElRow,
+} from 'element-plus';
+
+import { Tinymce as RichTextarea } from '#/components/tinymce';
+
+import CoverSelect from './cover-select.vue';
+import { createEmptyNewsItem } from './types';
+
+defineOptions({ name: 'NewsForm' });
+
+const props = defineProps<{
+  isCreating: boolean;
+  modelValue: NewsItem[] | null;
+}>();
+
+// v-model=newsList
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: NewsItem[]): void;
+}>();
+
+const newsList = computed<NewsItem[]>({
+  get() {
+    return props.modelValue === null
+      ? [createEmptyNewsItem()]
+      : props.modelValue;
+  },
+  set(val) {
+    emit('update:modelValue', val);
+  },
+});
+
+const activeNewsIndex = ref(0);
+const activeNewsItem = computed(() => {
+  const item = newsList.value[activeNewsIndex.value];
+  if (!item) {
+    return createEmptyNewsItem();
+  }
+  return item;
+});
+
+// 将图文向下移动
+function moveDownNews(index: number) {
+  const current = newsList.value[index];
+  const next = newsList.value[index + 1];
+  if (current && next) {
+    newsList.value[index] = next;
+    newsList.value[index + 1] = current;
+    activeNewsIndex.value = index + 1;
+  }
+}
+
+// 将图文向上移动
+function moveUpNews(index: number) {
+  const current = newsList.value[index];
+  const prev = newsList.value[index - 1];
+  if (current && prev) {
+    newsList.value[index] = prev;
+    newsList.value[index - 1] = current;
+    activeNewsIndex.value = index - 1;
+  }
+}
+
+// 删除指定 index 的图文
+async function removeNews(index: number) {
+  try {
+    await ElMessageBox.confirm('确定删除该图文吗?');
+    newsList.value.splice(index, 1);
+    if (activeNewsIndex.value === index) {
+      activeNewsIndex.value = 0;
+    }
+  } catch {
+    // empty
+  }
+}
+
+// 添加一个图文
+function plusNews() {
+  newsList.value.push(createEmptyNewsItem());
+  activeNewsIndex.value = newsList.value.length - 1;
+}
+</script>
+
+<template>
+  <ElContainer>
+    <ElAside width="40%">
+      <div class="select-item">
+        <div v-for="(news, index) in newsList" :key="index">
+          <div
+            class="news-main father"
+            v-if="index === 0"
+            :class="{ activeAddNews: activeNewsIndex === index }"
+            @click="activeNewsIndex = index"
+          >
+            <div class="news-content">
+              <img class="material-img" :src="news.thumbUrl" />
+              <div class="news-content-title">{{ news.title }}</div>
+            </div>
+            <div class="child" v-if="newsList.length > 1">
+              <ElButton
+                type="info"
+                circle
+                size="small"
+                @click="() => moveDownNews(index)"
+              >
+                <IconifyIcon icon="ep:arrow-down-bold" />
+              </ElButton>
+              <ElButton
+                v-if="isCreating"
+                type="danger"
+                circle
+                size="small"
+                @click="() => removeNews(index)"
+              >
+                <IconifyIcon icon="ep:delete" />
+              </ElButton>
+            </div>
+          </div>
+          <div
+            class="news-main-item father"
+            v-if="index > 0"
+            :class="{ activeAddNews: activeNewsIndex === index }"
+            @click="activeNewsIndex = index"
+          >
+            <div class="news-content-item">
+              <div class="news-content-item-title">{{ news.title }}</div>
+              <div class="news-content-item-img">
+                <img class="material-img" :src="news.thumbUrl" width="100%" />
+              </div>
+            </div>
+            <div class="child">
+              <ElButton
+                v-if="newsList.length > index + 1"
+                circle
+                type="info"
+                size="small"
+                @click="() => moveDownNews(index)"
+              >
+                <IconifyIcon icon="ep:arrow-down-bold" />
+              </ElButton>
+              <ElButton
+                v-if="index > 0"
+                type="info"
+                circle
+                size="small"
+                @click="() => moveUpNews(index)"
+              >
+                <IconifyIcon icon="ep:arrow-up-bold" />
+              </ElButton>
+              <ElButton
+                v-if="isCreating"
+                type="danger"
+                size="small"
+                circle
+                @click="() => removeNews(index)"
+              >
+                <IconifyIcon icon="ep:delete" />
+              </ElButton>
+            </div>
+          </div>
+        </div>
+        <ElRow justify="center" class="ope-row">
+          <ElButton
+            type="primary"
+            circle
+            @click="plusNews"
+            v-if="newsList.length < 8 && isCreating"
+          >
+            <IconifyIcon icon="ep:plus" />
+          </ElButton>
+        </ElRow>
+      </div>
+    </ElAside>
+    <ElMain>
+      <div v-if="newsList.length > 0 && activeNewsItem">
+        <!-- 标题、作者、原文地址 -->
+        <ElRow :gutter="20">
+          <ElInput
+            v-model="activeNewsItem.title"
+            placeholder="请输入标题（必填）"
+          />
+          <ElInput
+            v-model="activeNewsItem.author"
+            placeholder="请输入作者"
+            style="margin-top: 5px"
+          />
+          <ElInput
+            v-model="activeNewsItem.contentSourceUrl"
+            placeholder="请输入原文地址"
+            style="margin-top: 5px"
+          />
+        </ElRow>
+        <!-- 封面和摘要 -->
+        <ElRow :gutter="20">
+          <ElCol :span="12">
+            <CoverSelect
+              v-model="activeNewsItem"
+              :is-first="activeNewsIndex === 0"
+            />
+          </ElCol>
+          <ElCol :span="12">
+            <p>摘要:</p>
+            <ElInput
+              :rows="8"
+              type="textarea"
+              v-model="activeNewsItem.digest"
+              placeholder="请输入摘要"
+              class="digest"
+              maxlength="120"
+            />
+          </ElCol>
+        </ElRow>
+        <!--富文本编辑器组件-->
+        <ElRow>
+          <RichTextarea v-model="activeNewsItem.content" />
+        </ElRow>
+      </div>
+    </ElMain>
+  </ElContainer>
+</template>
+
+<style lang="scss" scoped>
+.ope-row {
+  padding-top: 5px;
+  margin-top: 5px;
+  text-align: center;
+  border-top: 1px solid #eaeaea;
+}
+
+.el-row {
+  margin-bottom: 20px;
+}
+
+.el-row:last-child {
+  margin-bottom: 0;
+}
+
+.digest {
+  display: inline-block;
+  width: 100%;
+  vertical-align: top;
+}
+
+/* 新增图文 */
+.news-main {
+  width: 100%;
+  height: 120px;
+  margin: auto;
+  background-color: #fff;
+}
+
+.news-content {
+  position: relative;
+  width: 100%;
+  height: 120px;
+  background-color: #acadae;
+}
+
+.news-content-title {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  display: inline-block;
+  width: 98%;
+  height: 25px;
+  padding: 1%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 15px;
+  color: #fff;
+  white-space: nowrap;
+  background-color: black;
+  opacity: 0.65;
+}
+
+.news-main-item {
+  width: 100%;
+  padding: 5px 0;
+  margin: auto;
+  background-color: #fff;
+  border-top: 1px solid #eaeaea;
+}
+
+.news-content-item {
+  position: relative;
+  margin-left: -3px;
+}
+
+.news-content-item-title {
+  display: inline-block;
+  width: 70%;
+  font-size: 12px;
+}
+
+.news-content-item-img {
+  display: inline-block;
+  width: 25%;
+  background-color: #acadae;
+}
+
+.select-item {
+  width: 60%;
+  padding: 10px;
+  margin: 0 auto 10px;
+  border: 1px solid #eaeaea;
+
+  .activeAddNews {
+    border: 5px solid #2bb673;
+  }
+}
+
+.father .child {
+  position: relative;
+  bottom: 25px;
+  display: none;
+  text-align: center;
+}
+
+.father:hover .child {
+  display: block;
+}
+
+.material-img {
+  width: 100%;
+  height: 100%;
+}
+</style>

apps/web-ele/src/views/mp/draft/modules/types.ts

@@ -0,0 +1,41 @@
+interface NewsItem {
+  title: string;
+  thumbMediaId: string;
+  author: string;
+  digest: string;
+  showCoverPic: number;
+  content: string;
+  contentSourceUrl: string;
+  needOpenComment: number;
+  onlyFansCanComment: number;
+  thumbUrl: string;
+  picUrl?: string; // 用于预览封面
+}
+
+interface NewsItemList {
+  newsItem: NewsItem[];
+}
+
+interface Article {
+  mediaId: string;
+  content: NewsItemList;
+  updateTime: number;
+}
+
+const createEmptyNewsItem = (): NewsItem => {
+  return {
+    title: '',
+    thumbMediaId: '',
+    author: '',
+    digest: '',
+    showCoverPic: 0,
+    content: '',
+    contentSourceUrl: '',
+    needOpenComment: 0,
+    onlyFansCanComment: 0,
+    thumbUrl: '',
+  };
+};
+
+export type { Article, NewsItem, NewsItemList };
+export { createEmptyNewsItem };

apps/web-ele/src/views/mp/menu/data.ts

@@ -0,0 +1,9 @@
+/** 菜单未选中标识 */
+export const MENU_NOT_SELECTED = '__MENU_NOT_SELECTED__';
+
+/** 菜单级别枚举 */
+export enum Level {
+  Child = '2',
+  Parent = '1',
+  Undefined = '0',
+}

apps/web-ele/src/views/mp/menu/index.vue

@@ -0,0 +1,413 @@
+<script lang="ts" setup>
+import type { Menu, RawMenu } from './modules/types';
+
+import { ref } from 'vue';
+
+import { confirm, ContentWrap, DocAlert, Page } from '@vben/common-ui';
+
+import {
+  ElButton,
+  ElForm,
+  ElFormItem,
+  ElLoading,
+  ElMessage,
+} from 'element-plus';
+
+import * as MpMenuApi from '#/api/mp/menu';
+import * as UtilsTree from '#/utils/tree';
+import { Level, MENU_NOT_SELECTED } from '#/views/mp/menu/data';
+import MenuEditor from '#/views/mp/menu/modules/menu-editor.vue';
+import MenuPreviewer from '#/views/mp/menu/modules/menu-previewer.vue';
+import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
+
+defineOptions({ name: 'MpMenu' });
+
+// ======================== 列表查询 ========================
+const loading = ref(false); // 遮罩层
+const accountId = ref(-1);
+const accountName = ref<string>('');
+const menuList = ref<Menu[]>([]);
+
+// ======================== 菜单操作 ========================
+// 当前选中菜单编码：
+//  * 一级（'x'）
+//  * 二级（'x-y'）
+//  * 未选中（MENU_NOT_SELECTED）
+const activeIndex = ref<string>(MENU_NOT_SELECTED);
+// 二级菜单显示标志: 归属的一级菜单index
+// * 未初始化：-1
+// * 初始化：x
+const parentIndex = ref(-1);
+
+// ======================== 菜单编辑 ========================
+const showRightPanel = ref(false); // 右边配置显示默认详情还是配置详情
+const isParent = ref<boolean>(true); // 是否一级菜单，控制MenuEditor中name字段长度
+const activeMenu = ref<Menu>({}); // 选中菜单，MenuEditor的modelValue
+
+// 一些临时值放在这里进行判断，如果放在 activeMenu，由于引用关系，menu 也会多了多余的参数
+const tempSelfObj = ref<{
+  grand: Level;
+  x: number;
+  y: number;
+}>({
+  grand: Level.Undefined,
+  x: 0,
+  y: 0,
+});
+const dialogNewsVisible = ref(false); // 跳转图文时的素材选择弹窗
+
+/** 侦听公众号变化 */
+function onAccountChanged(id: number, name: string) {
+  accountId.value = id;
+  accountName.value = name;
+  getList();
+}
+
+/** 查询并转换菜单 */
+async function getList() {
+  loading.value = true;
+  try {
+    const data = await MpMenuApi.getMenuList(accountId.value);
+    const menuData = menuListToFrontend(data);
+    menuList.value = UtilsTree.handleTree(menuData, 'id');
+  } finally {
+    loading.value = false;
+  }
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  resetForm();
+  getList();
+}
+
+/** 将后端返回的 menuList，转换成前端的 menuList */
+function menuListToFrontend(list: any[]) {
+  if (!list) return [];
+
+  const result: RawMenu[] = [];
+  list.forEach((item: RawMenu) => {
+    const menu: any = {
+      ...item,
+    };
+    menu.reply = {
+      type: item.replyMessageType,
+      accountId: item.accountId,
+      content: item.replyContent,
+      mediaId: item.replyMediaId,
+      url: item.replyMediaUrl,
+      title: item.replyTitle,
+      description: item.replyDescription,
+      thumbMediaId: item.replyThumbMediaId,
+      thumbMediaUrl: item.replyThumbMediaUrl,
+      articles: item.replyArticles,
+      musicUrl: item.replyMusicUrl,
+      hqMusicUrl: item.replyHqMusicUrl,
+    };
+    result.push(menu as RawMenu);
+  });
+  return result;
+}
+
+/** 重置表单，清空表单数据 */
+function resetForm() {
+  // 菜单操作
+  activeIndex.value = MENU_NOT_SELECTED;
+  parentIndex.value = -1;
+
+  // 菜单编辑
+  showRightPanel.value = false;
+  activeMenu.value = {};
+  tempSelfObj.value = { grand: Level.Undefined, x: 0, y: 0 };
+  dialogNewsVisible.value = false;
+}
+
+// ======================== 菜单操作 ========================
+/** 一级菜单点击事件 */
+function menuClicked(parent: Menu, x: number) {
+  // 右侧的表单相关
+  showRightPanel.value = true; // 右边菜单
+  activeMenu.value = parent; // 这个如果放在顶部，flag 会没有。因为重新赋值了。
+  tempSelfObj.value.grand = Level.Parent; // 表示一级菜单
+  tempSelfObj.value.x = x; // 表示一级菜单索引
+  isParent.value = true;
+
+  // 左侧的选中
+  activeIndex.value = `${x}`; // 菜单选中样式
+  parentIndex.value = x; // 二级菜单显示标志
+}
+
+/** 二级菜单点击事件 */
+function subMenuClicked(child: Menu, x: number, y: number) {
+  // 右侧的表单相关
+  showRightPanel.value = true; // 右边菜单
+  activeMenu.value = child; // 将点击的数据放到临时变量，对象有引用作用
+  tempSelfObj.value.grand = Level.Child; // 表示二级菜单
+  tempSelfObj.value.x = x; // 表示一级菜单索引
+  tempSelfObj.value.y = y; // 表示二级菜单索引
+  isParent.value = false;
+
+  // 左侧的选中
+  activeIndex.value = `${x}-${y}`;
+}
+
+/** 删除当前菜单 */
+async function onDeleteMenu() {
+  try {
+    await confirm('确定要删除吗?');
+    if (tempSelfObj.value.grand === Level.Parent) {
+      // 一级菜单的删除方法
+      menuList.value.splice(tempSelfObj.value.x, 1);
+    } else if (tempSelfObj.value.grand === Level.Child) {
+      // 二级菜单的删除方法
+      menuList.value[tempSelfObj.value.x]?.children?.splice(
+        tempSelfObj.value.y,
+        1,
+      );
+    }
+    // 提示
+    ElMessage.success('删除成功');
+
+    // 处理菜单的选中
+    activeMenu.value = {};
+    showRightPanel.value = false;
+    activeIndex.value = MENU_NOT_SELECTED;
+  } catch {
+    //
+  }
+}
+
+// ======================== 菜单编辑 ========================
+/** 保存菜单 */
+async function onSave() {
+  try {
+    await confirm('确定要保存吗?');
+    const loadingInstance = ElLoading.service({
+      text: '保存中...',
+    });
+    try {
+      await MpMenuApi.saveMenu(accountId.value, menuListToBackend());
+      getList();
+      ElMessage.success('发布成功');
+    } finally {
+      loadingInstance.close();
+    }
+  } catch {
+    //
+  }
+}
+
+/** 清空菜单 */
+async function onClear() {
+  try {
+    await confirm('确定要删除吗?');
+    const loadingInstance = ElLoading.service({
+      text: '删除中...',
+    });
+    try {
+      await MpMenuApi.deleteMenu(accountId.value);
+      handleQuery();
+      ElMessage.success('清空成功');
+    } finally {
+      loadingInstance.close();
+    }
+  } catch {
+    //
+  }
+}
+
+/** 将前端的 menuList，转换成后端接收的 menuList */
+function menuListToBackend() {
+  const result: any[] = [];
+  menuList.value.forEach((item) => {
+    const menu = menuToBackend(item);
+    result.push(menu);
+
+    // 处理子菜单
+    if (!item.children || item.children.length <= 0) {
+      return;
+    }
+    menu.children = [];
+    item.children.forEach((subItem) => {
+      menu.children.push(menuToBackend(subItem));
+    });
+  });
+  return result;
+}
+
+/** 将前端的 menu，转换成后端接收的 menu */
+// TODO: @芋艿，需要根据后台API删除不需要的字段
+function menuToBackend(menu: any) {
+  const result = {
+    ...menu,
+    children: undefined, // 不处理子节点
+    reply: undefined, // 稍后复制
+  };
+  result.replyMessageType = menu.reply.type;
+  result.replyContent = menu.reply.content;
+  result.replyMediaId = menu.reply.mediaId;
+  result.replyMediaUrl = menu.reply.url;
+  result.replyTitle = menu.reply.title;
+  result.replyDescription = menu.reply.description;
+  result.replyThumbMediaId = menu.reply.thumbMediaId;
+  result.replyThumbMediaUrl = menu.reply.thumbMediaUrl;
+  result.replyArticles = menu.reply.articles;
+  result.replyMusicUrl = menu.reply.musicUrl;
+  result.replyHqMusicUrl = menu.reply.hqMusicUrl;
+
+  return result;
+}
+</script>
+
+<template>
+  <Page auto-content-height>
+    <template #doc>
+      <DocAlert title="公众号菜单" url="https://doc.iocoder.cn/mp/menu/" />
+    </template>
+
+    <!-- 搜索工作栏 -->
+    <!-- <ContentWrap> -->
+    <ElForm :inline="true" label-width="68px" class="-mb-15px w-240px">
+      <ElFormItem label="公众号" prop="accountId" class="w-240px">
+        <WxAccountSelect @change="onAccountChanged" />
+      </ElFormItem>
+    </ElForm>
+    <!-- </ContentWrap> -->
+
+    <ContentWrap>
+      <div class="clearfix public-account-management" v-loading="loading">
+        <!--左边配置菜单-->
+        <div class="left">
+          <div class="weixin-hd">
+            <div class="weixin-title">{{ accountName }}</div>
+          </div>
+          <div class="clearfix weixin-menu">
+            <MenuPreviewer
+              v-model="menuList"
+              :account-id="accountId"
+              :active-index="activeIndex"
+              :parent-index="parentIndex"
+              @menu-clicked="(parent, x) => menuClicked(parent, x)"
+              @submenu-clicked="(child, x, y) => subMenuClicked(child, x, y)"
+            />
+          </div>
+          <div class="save-div">
+            <ElButton
+              class="save-btn"
+              type="success"
+              @click="onSave"
+              v-hasPermi="['mp:menu:save']"
+            >
+              保存并发布菜单
+            </ElButton>
+            <ElButton
+              class="save-btn"
+              type="danger"
+              @click="onClear"
+              v-hasPermi="['mp:menu:delete']"
+            >
+              清空菜单
+            </ElButton>
+          </div>
+        </div>
+        <!--右边配置-->
+        <div class="right" v-if="showRightPanel">
+          <MenuEditor
+            :account-id="accountId"
+            :is-parent="isParent"
+            v-model="activeMenu"
+            @delete="onDeleteMenu"
+          />
+        </div>
+        <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
+        <div v-else class="right">
+          <p>请选择菜单配置</p>
+        </div>
+      </div>
+    </ContentWrap>
+  </Page>
+</template>
+
+<style lang="scss" scoped>
+/* 公共颜色变量 */
+.clearfix {
+  *zoom: 1;
+}
+
+.clearfix::after {
+  clear: both;
+  display: table;
+  content: '';
+}
+
+div {
+  text-align: left;
+}
+
+.weixin-hd {
+  position: relative;
+  bottom: 426px;
+  left: 0;
+  width: 300px;
+  height: 64px;
+  color: #fff;
+  text-align: center;
+  background: transparent url('./assets/menu_head.png') no-repeat 0 0;
+  background-position: 0 0;
+  background-size: 100%;
+}
+
+.weixin-title {
+  position: absolute;
+  top: 33px;
+  left: 0;
+  width: 100%;
+  font-size: 14px;
+  color: #fff;
+  text-align: center;
+}
+
+.weixin-menu {
+  padding-left: 43px;
+  font-size: 12px;
+  background: transparent url('./assets/menu_foot.png') no-repeat 0 0;
+}
+
+.public-account-management {
+  width: 1200px;
+  // min-width: 1200px;
+  margin: 0 auto;
+
+  .left {
+    position: relative;
+    float: left;
+    box-sizing: border-box;
+    display: block;
+    width: 350px;
+    height: 715px;
+    padding: 518px 25px 88px;
+    background: url('./assets/iphone_backImg.png') no-repeat;
+    background-size: 100% auto;
+
+    .save-div {
+      margin-top: 15px;
+      text-align: center;
+
+      .save-btn {
+        bottom: 20px;
+        left: 100px;
+      }
+    }
+  }
+
+  /* 右边菜单内容 */
+  .right {
+    float: left;
+    box-sizing: border-box;
+    width: 63%;
+    padding: 20px;
+    margin-left: 20px;
+    background-color: #e8e7e7;
+  }
+}
+</style>

apps/web-ele/src/views/mp/menu/modules/menu-editor.vue

@@ -0,0 +1,280 @@
+<script lang="ts" setup>
+import { computed, nextTick, ref, watch } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import {
+  ElButton,
+  ElCol,
+  ElDialog,
+  ElInput,
+  ElMessage,
+  ElOption,
+  ElRow,
+  ElSelect,
+} from 'element-plus';
+
+import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
+import WxNews from '#/views/mp/modules/wx-news';
+import WxReplySelect from '#/views/mp/modules/wx-reply';
+
+import menuOptions from './menuOptions';
+
+const props = defineProps<{
+  accountId: number;
+  isParent: boolean;
+  modelValue: any;
+}>();
+
+const emit = defineEmits<{
+  (e: 'delete', v: void): void;
+  (e: 'update:modelValue', v: any): void;
+}>();
+
+const menu = computed({
+  get() {
+    return props.modelValue;
+  },
+  set(val) {
+    emit('update:modelValue', val);
+  },
+});
+const showNewsDialog = ref(false);
+const hackResetWxReplySelect = ref(false);
+const isLeave = computed<boolean>(() => !(menu.value.children?.length > 0));
+
+watch(menu, () => {
+  hackResetWxReplySelect.value = false; // 销毁组件
+  nextTick(() => {
+    hackResetWxReplySelect.value = true; // 重建组件
+  });
+});
+
+// ======================== 菜单编辑（素材选择） ========================
+/** 选择素材 */
+function selectMaterial(item: any) {
+  const articleId = item.articleId;
+  const articles = item.content.newsItem;
+  // 提示，针对多图文
+  if (articles.length > 1) {
+    ElMessage.warning('您选择的是多图文，将默认跳转第一篇');
+  }
+  showNewsDialog.value = false;
+
+  // 设置菜单的回复
+  menu.value.articleId = articleId;
+  menu.value.replyArticles = [];
+  articles.forEach((article: any) => {
+    menu.value.replyArticles.push({
+      title: article.title,
+      description: article.digest,
+      picUrl: article.picUrl,
+      url: article.url,
+    });
+  });
+}
+
+/** 删除素材 */
+function deleteMaterial() {
+  delete menu.value.articleId;
+  delete menu.value.replyArticles;
+}
+</script>
+
+<template>
+  <div>
+    <div class="configure-page">
+      <div class="delete-btn">
+        <ElButton type="danger" @click="emit('delete')">
+          <IconifyIcon icon="ep:delete" />
+          删除当前菜单
+        </ElButton>
+      </div>
+      <div>
+        <span>菜单名称：</span>
+        <ElInput
+          class="input-width"
+          v-model="menu.name"
+          placeholder="请输入菜单名称"
+          :maxlength="isParent ? 4 : 7"
+          clearable
+        />
+      </div>
+      <div v-if="isLeave">
+        <div class="menu-content">
+          <span>菜单标识：</span>
+          <ElInput
+            class="input-width"
+            v-model="menu.menuKey"
+            placeholder="请输入菜单 KEY"
+            clearable
+          />
+        </div>
+        <div class="menu-content">
+          <span>菜单内容：</span>
+          <ElSelect
+            v-model="menu.type"
+            clearable
+            placeholder="请选择"
+            class="menu_option"
+          >
+            <ElOption
+              v-for="item in menuOptions"
+              :label="item.label"
+              :value="item.value"
+              :key="item.value"
+            />
+          </ElSelect>
+        </div>
+        <div class="configur-content" v-if="menu.type === 'view'">
+          <span>跳转链接：</span>
+          <ElInput
+            class="input-width"
+            v-model="menu.url"
+            placeholder="请输入链接"
+            clearable
+          />
+        </div>
+        <div class="configur-content" v-if="menu.type === 'miniprogram'">
+          <div class="applet">
+            <span>小程序的 appid ：</span>
+            <ElInput
+              class="input-width"
+              v-model="menu.miniProgramAppId"
+              placeholder="请输入小程序的appid"
+              clearable
+            />
+          </div>
+          <div class="applet">
+            <span>小程序的页面路径：</span>
+            <ElInput
+              class="input-width"
+              v-model="menu.miniProgramPagePath"
+              placeholder="请输入小程序的页面路径，如：pages/index"
+              clearable
+            />
+          </div>
+          <div class="applet">
+            <span>小程序的备用网页：</span>
+            <ElInput
+              class="input-width"
+              v-model="menu.url"
+              placeholder="不支持小程序的老版本客户端将打开本网页"
+              clearable
+            />
+          </div>
+          <p class="blue">
+            tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
+          </p>
+        </div>
+        <div
+          class="configur-content"
+          v-if="menu.type === 'article_view_limited'"
+        >
+          <ElRow>
+            <div class="select-item" v-if="menu && menu.replyArticles">
+              <WxNews :articles="menu.replyArticles" />
+              <ElRow class="ope-row" justify="center" align="middle">
+                <ElButton type="danger" circle @click="deleteMaterial">
+                  <IconifyIcon icon="ep:delete" />
+                </ElButton>
+              </ElRow>
+            </div>
+            <div v-else>
+              <ElRow justify="center">
+                <ElCol :span="24" style="text-align: center">
+                  <ElButton type="success" @click="showNewsDialog = true">
+                    素材库选择
+                    <IconifyIcon icon="ep:circle-check" />
+                  </ElButton>
+                </ElCol>
+              </ElRow>
+            </div>
+            <ElDialog
+              title="选择图文"
+              v-model="showNewsDialog"
+              width="80%"
+              destroy-on-close
+            >
+              <WxMaterialSelect
+                type="news"
+                :account-id="props.accountId"
+                @select-material="selectMaterial"
+              />
+            </ElDialog>
+          </ElRow>
+        </div>
+        <div
+          class="configur-content"
+          v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
+        >
+          <WxReplySelect v-if="hackResetWxReplySelect" v-model="menu.reply" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-input {
+  width: 70%;
+  margin-right: 2%;
+}
+
+.configure-page {
+  .delete-btn {
+    margin-bottom: 15px;
+    text-align: right;
+  }
+
+  .menu-content {
+    margin-top: 20px;
+  }
+
+  .configur-content {
+    padding: 20px 10px;
+    margin-top: 20px;
+    background-color: #fff;
+    border-radius: 5px;
+
+    .select-item {
+      width: 280px;
+      padding: 10px;
+      margin: 0 auto 10px;
+      border: 1px solid #eaeaea;
+
+      .ope-row {
+        padding-top: 10px;
+        text-align: center;
+      }
+    }
+  }
+
+  .blue {
+    margin-top: 10px;
+    color: #29b6f6;
+  }
+
+  .applet {
+    margin-bottom: 20px;
+
+    span {
+      width: 20%;
+    }
+  }
+
+  .input-width {
+    width: 40%;
+  }
+
+  .material {
+    .input-width {
+      width: 30%;
+    }
+
+    .el-textarea {
+      width: 80%;
+    }
+  }
+}
+</style>

apps/web-ele/src/views/mp/menu/modules/menu-previewer.vue

@@ -0,0 +1,252 @@
+<script lang="ts" setup>
+import type { Menu } from './types';
+
+import { computed } from 'vue';
+
+import { IconifyIcon } from '@vben/icons';
+
+import draggable from 'vuedraggable';
+
+const props = defineProps<{
+  accountId: number;
+  activeIndex: string;
+  modelValue: Menu[];
+  parentIndex: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', v: Menu[]): void;
+  (e: 'menuClicked', parent: Menu, x: number): void;
+  (e: 'submenuClicked', child: Menu, x: number, y: number): void;
+}>();
+
+const menuList = computed<Menu[]>({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+});
+
+/** 添加横向一级菜单 */
+function addMenu() {
+  const index = menuList.value.length;
+  const menu = {
+    name: '菜单名称',
+    children: [],
+    reply: {
+      // 用于存储回复内容
+      type: 'text',
+      accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
+    },
+  };
+  menuList.value[index] = menu;
+  menuClicked(menu, index - 1);
+}
+
+/** 添加横向二级菜单；parent 表示要操作的父菜单 */
+function addSubMenu(i: number, parent: any) {
+  const subMenuKeyLength = parent.children.length; // 获取二级菜单key长度
+  const addButton = {
+    name: '子菜单名称',
+    reply: {
+      // 用于存储回复内容
+      type: 'text',
+      accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
+    },
+  };
+  parent.children[subMenuKeyLength] = addButton;
+  subMenuClicked(parent.children[subMenuKeyLength], i, subMenuKeyLength);
+}
+
+/** 一级菜单点击 */
+function menuClicked(parent: Menu, x: number) {
+  emit('menuClicked', parent, x);
+}
+
+/** 二级菜单点击 */
+function subMenuClicked(child: Menu, x: number, y: number) {
+  emit('submenuClicked', child, x, y);
+}
+
+/**
+ * 处理一级菜单展开后被拖动，激活(展开)原来活动的一级菜单
+ *
+ * @param options - 拖动参数对象
+ * @param options.oldIndex - 一级菜单拖动前的位置
+ * @param options.newIndex - 一级菜单拖动后的位置
+ */
+function onParentDragEnd({
+  oldIndex,
+  newIndex,
+}: {
+  newIndex: number;
+  oldIndex: number;
+}) {
+  // 二级菜单没有展开，直接返回
+  if (props.activeIndex === '__MENU_NOT_SELECTED__') {
+    return;
+  }
+
+  // 使用一个辅助数组来模拟菜单移动，然后找到展开的二级菜单的新下标`newParent`
+  const positions = Array.from({ length: menuList.value.length }).fill(false);
+  positions[props.parentIndex] = true;
+  const [out] = positions.splice(oldIndex, 1); // 移出菜单，保存到变量out
+  positions.splice(newIndex, 0, out ?? false); // 把out变量插入被移出的菜单
+  const newParentIndex = positions.indexOf(true);
+
+  // 找到菜单元素，触发一级菜单点击
+  const parent = menuList.value[newParentIndex];
+  if (parent && newParentIndex !== -1) {
+    emit('menuClicked', parent, newParentIndex);
+  }
+}
+
+/**
+ * 处理二级菜单展开后被拖动，激活被拖动的菜单
+ *
+ * @param options - 拖动参数对象
+ * @param options.newIndex - 二级菜单拖动后的位置
+ */
+function onChildDragEnd({ newIndex }: { newIndex: number }) {
+  const x = props.parentIndex;
+  const y = newIndex;
+  const children = menuList.value[x]?.children;
+  if (children && children?.length > 0) {
+    const child = children[y];
+    if (child) {
+      emit('submenuClicked', child, x, y);
+    }
+  }
+}
+</script>
+
+<template>
+  <draggable
+    v-model="menuList"
+    item-key="id"
+    ghost-class="draggable-ghost"
+    :animation="400"
+    @end="onParentDragEnd"
+  >
+    <template #item="{ element: parent, index: x }">
+      <div class="menu-bottom">
+        <!-- 一级菜单 -->
+        <div
+          @click="menuClicked(parent, x)"
+          class="menu-item"
+          :class="{ active: props.activeIndex === `${x}` }"
+        >
+          <IconifyIcon icon="ep:fold" color="black" />{{ parent.name }}
+        </div>
+        <!-- 以下为二级菜单-->
+        <div class="submenu" v-if="props.parentIndex === x && parent.children">
+          <draggable
+            v-model="parent.children"
+            item-key="id"
+            ghost-class="draggable-ghost"
+            :animation="400"
+            @end="onChildDragEnd"
+          >
+            <template #item="{ element: child, index: y }">
+              <div class="menu-bottom subtitle">
+                <div
+                  class="menu-sub-item"
+                  v-if="parent.children"
+                  :class="{ active: props.activeIndex === `${x}-${y}` }"
+                  @click="subMenuClicked(child, x, y)"
+                >
+                  {{ child.name }}
+                </div>
+              </div>
+            </template>
+          </draggable>
+          <!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号  -->
+          <div
+            class="menu-bottom menu-addicon"
+            v-if="!parent.children || parent.children.length < 5"
+            @click="addSubMenu(x, parent)"
+          >
+            <IconifyIcon icon="ep:plus" class="plus" />
+          </div>
+        </div>
+      </div>
+    </template>
+  </draggable>
+
+  <!-- 一级菜单加号 -->
+  <div
+    class="menu-bottom menu-addicon"
+    v-if="menuList.length < 3"
+    @click="addMenu"
+  >
+    <IconifyIcon icon="ep:plus" class="plus" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.menu-bottom {
+  position: relative;
+  float: left;
+  box-sizing: border-box;
+  display: block;
+  width: 85.5px;
+  text-align: center;
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid #ebedee;
+
+  &.menu-addicon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 46px;
+    line-height: 46px;
+
+    .plus {
+      color: #2bb673;
+    }
+  }
+
+  .menu-item {
+    // text-align: center;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 44px;
+    line-height: 44px;
+
+    &.active {
+      border: 1px solid #2bb673;
+    }
+  }
+
+  .menu-sub-item {
+    box-sizing: border-box;
+    height: 44px;
+    line-height: 44px;
+    text-align: center;
+
+    &.active {
+      border: 1px solid #2bb673;
+    }
+  }
+}
+
+/* 第二级菜单 */
+.submenu {
+  position: absolute;
+  bottom: 45px;
+  width: 85.5px;
+
+  .subtitle {
+    box-sizing: border-box;
+    background-color: #fff;
+  }
+}
+
+.draggable-ghost {
+  background: #f7fafc;
+  border: 1px solid #4299e1;
+  opacity: 0.5;
+}
+</style>

apps/web-ele/src/views/mp/menu/modules/menuOptions.ts

@@ -0,0 +1,42 @@
+export default [
+  {
+    value: 'view',
+    label: '跳转网页',
+  },
+  {
+    value: 'miniprogram',
+    label: '跳转小程序',
+  },
+  {
+    value: 'click',
+    label: '点击回复',
+  },
+  {
+    value: 'article_view_limited',
+    label: '跳转图文消息',
+  },
+  {
+    value: 'scancode_push',
+    label: '扫码直接返回结果',
+  },
+  {
+    value: 'scancode_waitmsg',
+    label: '扫码回复',
+  },
+  {
+    value: 'pic_sysphoto',
+    label: '系统拍照发图',
+  },
+  {
+    value: 'pic_photo_or_album',
+    label: '拍照或者相册',
+  },
+  {
+    value: 'pic_weixin',
+    label: '微信相册',
+  },
+  {
+    value: 'location_select',
+    label: '选择地理位置',
+  },
+];

apps/web-ele/src/views/mp/menu/modules/types.ts

@@ -0,0 +1,73 @@
+export interface Replay {
+  title: string;
+  description: string;
+  picUrl: string;
+  url: string;
+}
+
+export type MenuType =
+  | ''
+  | 'article_view_limited'
+  | 'click'
+  | 'location_select'
+  | 'pic_photo_or_album'
+  | 'pic_sysphoto'
+  | 'pic_weixin'
+  | 'scancode_push'
+  | 'scancode_waitmsg'
+  | 'view';
+
+interface _RawMenu {
+  // db
+  id: number;
+  parentId: number;
+  accountId: number;
+  appId: string;
+  createTime: number;
+
+  // mp-native
+  name: string;
+  menuKey: string;
+  type: MenuType;
+  url: string;
+  miniProgramAppId: string;
+  miniProgramPagePath: string;
+  articleId: string;
+  replyMessageType: string;
+  replyContent: string;
+  replyMediaId: string;
+  replyMediaUrl: string;
+  replyThumbMediaId: string;
+  replyThumbMediaUrl: string;
+  replyTitle: string;
+  replyDescription: string;
+  replyArticles: Replay;
+  replyMusicUrl: string;
+  replyHqMusicUrl: string;
+}
+
+export type RawMenu = Partial<_RawMenu>;
+
+interface _Reply {
+  type: string;
+  accountId: number;
+  content: string;
+  mediaId: string;
+  url: string;
+  thumbMediaId: string;
+  thumbMediaUrl: string;
+  title: string;
+  description: string;
+  articles: null | Replay[];
+  musicUrl: string;
+  hqMusicUrl: string;
+}
+
+export type Reply = Partial<_Reply>;
+
+interface _Menu extends RawMenu {
+  children: _Menu[];
+  reply: Reply;
+}
+
+export type Menu = Partial<_Menu>;

apps/web-ele/src/views/mp/modules/wx-account-select/index.ts

@@ -0,0 +1 @@
+export { default } from './main.vue';

apps/web-ele/src/views/mp/modules/wx-account-select/main.vue

@@ -0,0 +1,142 @@
+<script lang="ts" setup>
+import type { MpAccountApi } from '#/api/mp/account';
+
+import { computed, onMounted, reactive, ref, watch } from 'vue';
+import { useRouter } from 'vue-router';
+
+import { useTabs } from '@vben/hooks';
+
+import { ElMessage } from 'element-plus';
+
+import { getSimpleAccountList } from '#/api/mp/account';
+
+defineOptions({ name: 'WxAccountSelect' });
+
+const props = defineProps<{
+  modelValue?: number;
+}>();
+
+const emit = defineEmits<{
+  (e: 'change', id: number, name: string): void;
+  (e: 'update:modelValue', id: number): void;
+}>();
+
+const message = ElMessage; // 消息弹窗
+const { closeCurrentTab } = useTabs(); // 视图操作
+const { push } = useRouter();
+
+const account: MpAccountApi.AccountSimple = reactive({
+  id: -1,
+  name: '',
+});
+
+const accountList = ref<MpAccountApi.AccountSimple[]>([]);
+
+// 计算当前选中的 ID，优先使用 modelValue（表单绑定），否则使用内部 account.id
+const currentId = computed({
+  get: () => {
+    // 如果外部传入了 modelValue，优先使用外部的值
+    if (props.modelValue !== undefined && props.modelValue !== null) {
+      return props.modelValue;
+    }
+    return account.id;
+  },
+  set: (value: number) => {
+    // 更新内部状态
+    account.id = value;
+    // 同步到外部（表单系统）
+    emit('update:modelValue', value);
+    // 触发 change 事件（保持向后兼容）
+    const found = accountList.value.find(
+      (v: MpAccountApi.AccountSimple) => v.id === value,
+    );
+    if (found) {
+      account.name = found.name;
+      emit('change', value, found.name);
+    }
+  },
+});
+
+// 监听外部 modelValue 变化，同步到内部状态
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (
+      newValue !== undefined &&
+      newValue !== null &&
+      newValue !== account.id
+    ) {
+      account.id = newValue;
+      const found = accountList.value.find(
+        (v: MpAccountApi.AccountSimple) => v.id === newValue,
+      );
+      if (found) {
+        account.name = found.name;
+      }
+    }
+  },
+);
+
+/** 查询公众号列表 */
+async function handleQuery() {
+  accountList.value = await getSimpleAccountList();
+  if (accountList.value.length === 0) {
+    message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置');
+    await closeCurrentTab();
+    await push({ name: 'MpAccount' });
+    return;
+  }
+
+  // 如果外部没有传入值（modelValue 为空），默认选中第一个
+  if (props.modelValue === undefined || props.modelValue === null) {
+    const firstAccount = accountList.value[0];
+    if (firstAccount) {
+      currentId.value = firstAccount.id;
+      account.name = firstAccount.name;
+      emit('change', firstAccount.id, firstAccount.name);
+    }
+  } else {
+    // 如果外部有值，同步到内部状态
+    const found = accountList.value.find(
+      (v: MpAccountApi.AccountSimple) => v.id === props.modelValue,
+    );
+    if (found) {
+      account.id = props.modelValue;
+      account.name = found.name;
+    }
+  }
+}
+
+/** 公众号变化 */
+function onChanged(id?: number) {
+  if (id) {
+    currentId.value = id;
+  }
+}
+
+/** 初始化 */
+onMounted(() => {
+  handleQuery();
+});
+</script>
+
+<template>
+  <el-select
+    v-model="currentId"
+    placeholder="请选择公众号"
+    class="!w-240px"
+    @change="onChanged"
+  >
+    <el-option
+      v-for="item in accountList"
+      :key="item.id"
+      :label="item.name"
+      :value="item.id"
+    />
+  </el-select>
+</template>
+<style lang="scss" scoped>
+:deep(.el-select__wrapper) {
+  width: 240px !important;
+}
+</style>

apps/web-ele/src/views/mp/modules/wx-location/index.ts

@@ -0,0 +1 @@
+export { default } from './main.vue';

apps/web-ele/src/views/mp/modules/wx-location/main.vue

@@ -0,0 +1,61 @@
+<!--
+  【微信消息 - 定位】TODO @Dhb52 目前未启用
+-->
+<script lang="ts" setup>
+defineOptions({ name: 'WxLocation' });
+
+const props = defineProps({
+  locationX: {
+    required: true,
+    type: Number,
+  },
+  locationY: {
+    required: true,
+    type: Number,
+  },
+  label: {
+    // 地名
+    required: true,
+    type: String,
+  },
+  qqMapKey: {
+    // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
+    required: false,
+    type: String,
+    default: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // 需要自定义
+  },
+});
+
+defineExpose({
+  locationX: props.locationX,
+  locationY: props.locationY,
+  label: props.label,
+  qqMapKey: props.qqMapKey,
+});
+</script>
+
+<template>
+  <div>
+    <el-link
+      type="primary"
+      target="_blank"
+      :href="`https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${
+        locationY
+      }&pointy=${locationX}&name=${label}&ref=yudao`"
+    >
+      <el-col>
+        <el-row>
+          <img
+            :src="`https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${
+              locationX
+            },${locationY}&key=${qqMapKey}&size=250*180`"
+          />
+        </el-row>
+        <el-row>
+          <Icon icon="ep:location" />
+          {{ label }}
+        </el-row>
+      </el-col>
+    </el-link>
+  </div>
+</template>

apps/web-ele/src/views/mp/modules/wx-material-select/index.ts

@@ -0,0 +1,3 @@
+export { default } from './main.vue';
+
+export { MaterialType, NewsType } from './types';

apps/web-ele/src/views/mp/modules/wx-material-select/main.vue

@@ -0,0 +1,300 @@
+<!--
+  - Copyright (C) 2018-2019
+  - All rights reserved, Designed By www.joolun.com
+  芋道源码：
+  ① 移除 avue 组件，使用 ElementUI 原生组件
+-->
+<script lang="ts" setup>
+import { onMounted, reactive, ref } from 'vue';
+
+import { formatTime } from '@vben/utils';
+
+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/modules/wx-news';
+import WxVideoPlayer from '#/views/mp/modules/wx-video-play';
+import WxVoicePlayer from '#/views/mp/modules/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(['selectMaterial']);
+
+// 遮罩层
+const loading = ref(false);
+// 总条数
+const total = ref(0);
+// 数据列表
+const list = ref<any[]>([]);
+// 查询参数
+const queryParams = reactive({
+  pageNo: 1,
+  pageSize: 10,
+  accountId: props.accountId,
+});
+
+/** 选择素材 */
+function selectMaterialFun(item: any) {
+  emit('selectMaterial', item);
+}
+
+/** 获取分页数据 */
+async function getPage() {
+  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;
+  }
+}
+
+/** 获取素材分页 */
+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;
+}
+
+onMounted(async () => {
+  getPage();
+});
+</script>
+
+<template>
+  <div class="pb-30px">
+    <!-- 类型：image -->
+    <div v-if="props.type === 'image'">
+      <div class="waterfall" v-loading="loading">
+        <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
+          <img class="material-img" :src="item.url" />
+          <p class="item-name">{{ item.name }}</p>
+          <el-row class="ope-row">
+            <el-button type="success" @click="selectMaterialFun(item)">
+              选择
+              <Icon icon="ep:circle-check" />
+            </el-button>
+          </el-row>
+        </div>
+      </div>
+      <!-- 分页组件 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getMaterialPageFun"
+      />
+    </div>
+    <!-- 类型：voice -->
+    <div v-else-if="props.type === 'voice'">
+      <!-- 列表 -->
+      <el-table v-loading="loading" :data="list">
+        <el-table-column label="编号" align="center" prop="mediaId" />
+        <el-table-column label="文件名" align="center" prop="name" />
+        <el-table-column label="语音" align="center">
+          <template #default="scope">
+            <WxVoicePlayer :url="scope.row.url" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="上传时间"
+          align="center"
+          prop="createTime"
+          width="180"
+          :formatter="
+            (row: any) => formatTime(row.createTime, 'YYYY-MM-DD HH:mm:ss')
+          "
+        />
+        <el-table-column label="操作" align="center" fixed="right">
+          <template #default="scope">
+            <el-button
+              type="primary"
+              link
+              @click="selectMaterialFun(scope.row)"
+            >
+              选择
+              <Icon icon="ep:plus" />
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页组件 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getPage"
+      />
+    </div>
+    <!-- 类型：video -->
+    <div v-else-if="props.type === 'video'">
+      <!-- 列表 -->
+      <el-table v-loading="loading" :data="list">
+        <el-table-column label="编号" align="center" prop="mediaId" />
+        <el-table-column label="文件名" align="center" prop="name" />
+        <el-table-column label="标题" align="center" prop="title" />
+        <el-table-column label="介绍" align="center" prop="introduction" />
+        <el-table-column label="视频" align="center">
+          <template #default="scope">
+            <WxVideoPlayer :url="scope.row.url" />
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="上传时间"
+          align="center"
+          prop="createTime"
+          width="180"
+          :formatter="
+            (row: any) => formatTime(row.createTime, 'YYYY-MM-DD HH:mm:ss')
+          "
+        />
+        <el-table-column
+          label="操作"
+          align="center"
+          fixed="right"
+          class-name="small-padding fixed-width"
+        >
+          <template #default="scope">
+            <el-button
+              type="primary"
+              link
+              @click="selectMaterialFun(scope.row)"
+            >
+              选择
+              <Icon icon="akar-icons:circle-plus" />
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <!-- 分页组件 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getMaterialPageFun"
+      />
+    </div>
+    <!-- 类型：news -->
+    <div v-else-if="props.type === 'news'">
+      <div class="waterfall" v-loading="loading">
+        <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
+          <div v-if="item.content && item.content.newsItem">
+            <WxNews :articles="item.content.newsItem" />
+            <el-row class="ope-row">
+              <el-button type="success" @click="selectMaterialFun(item)">
+                选择
+                <Icon icon="ep:circle-check" />
+              </el-button>
+            </el-row>
+          </div>
+        </div>
+      </div>
+      <!-- 分页组件 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getMaterialPageFun"
+      />
+    </div>
+  </div>
+</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-gap: 10px;
+  width: 100%;
+  margin: 0 auto;
+  column-count: 5;
+}
+
+.waterfall-item {
+  padding: 10px;
+  margin-bottom: 10px;
+  border: 1px solid #eaeaea;
+  break-inside: avoid;
+}
+
+.material-img {
+  width: 100%;
+}
+
+p {
+  line-height: 30px;
+}
+</style>

apps/web-ele/src/views/mp/modules/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',
+}

apps/web-ele/src/views/mp/modules/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;
+}

apps/web-ele/src/views/mp/modules/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;
+  }
+}