From 7733d0a7f4d874c559e10387fab2ab8daab5fa09 Mon Sep 17 00:00:00 2001
From: hw <huangwen@yuanshengcloud.com>
Date: Wed, 12 Nov 2025 16:56:18 +0800
Subject: [PATCH 1/4] =?UTF-8?q?fix:=20todo=E4=BF=AE=E5=A4=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/.env.development                |   4 +-
 apps/web-antd/src/api/mp/draft/index.ts       |  10 +-
 .../mp/autoReply/components/ReplyForm.vue     | 138 -------
 apps/web-antd/src/views/mp/autoReply/data.ts  |  94 ++++-
 .../web-antd/src/views/mp/autoReply/index.vue | 234 +++++-------
 .../ReplyTable.vue => modules/content.vue}    |  15 +-
 .../src/views/mp/autoReply/modules/form.vue   | 158 ++++----
 .../mp/autoReply/{components => }/types.ts    |   0
 apps/web-antd/src/views/mp/draft/data.ts      |  21 +-
 apps/web-antd/src/views/mp/draft/index.vue    | 214 ++++-------
 .../{components => modules}/cover-select.vue  | 106 ++----
 .../{components => modules}/draft-table.vue   |   4 +-
 .../src/views/mp/draft/modules/form.vue       |  54 ++-
 .../{components => modules}/news-form.vue     | 163 +++------
 .../mp/draft/{components => modules}/types.ts |   2 +-
 .../views/mp/menu/components/menuOptions.ts   |  43 ---
 apps/web-antd/src/views/mp/menu/data.ts       |  22 ++
 apps/web-antd/src/views/mp/menu/index.vue     | 207 +++++------
 .../assets/iphone_backImg.png                 | Bin
 .../assets/menu_foot.png                      | Bin
 .../assets/menu_head.png                      | Bin
 .../menu-editor.vue => modules/editor.vue}    | 154 +++-----
 .../mp/menu/{components => modules}/index.ts  |   8 +-
 .../previewer.vue}                            | 111 ++----
 .../mp/menu/{components => modules}/types.ts  |  44 +++
 apps/web-antd/src/views/mp/modules/index.ts   |  20 ++
 .../wx-location.vue => location/location.vue} |   2 +-
 .../material-select.vue}                      | 340 ++++++++++--------
 .../views/mp/modules/material-select/types.ts |   4 +
 .../mp/modules/{wx-msg => msg}/msg-event.vue  |   0
 .../mp/modules/{wx-msg => msg}/msg-list.vue   |   9 +-
 .../views/mp/modules/{wx-msg => msg}/msg.vue  |  24 +-
 .../views/mp/modules/{wx-msg => msg}/types.ts |   0
 .../wx-music.vue => music/music.vue}          |  23 +-
 .../{wx-news/wx-news.vue => news/news.vue}    |  97 +----
 .../wx-reply.vue => reply/reply.vue}          |  48 +--
 .../modules/{wx-reply => reply}/tab-image.vue |  12 +-
 .../modules/{wx-reply => reply}/tab-music.vue |  12 +-
 .../modules/{wx-reply => reply}/tab-news.vue  |   9 +-
 .../modules/{wx-reply => reply}/tab-text.vue  |   0
 .../modules/{wx-reply => reply}/tab-video.vue |   7 +-
 .../modules/{wx-reply => reply}/tab-voice.vue |  15 +-
 .../mp/modules/{wx-reply => reply}/types.ts   |   7 +-
 .../video-play.vue}                           |  13 +-
 .../voice-play.vue}                           |  28 +-
 .../mp/modules/wx-account-select/index.ts     |   2 -
 .../wx-account-select/wx-account-select.vue   | 123 -------
 .../src/views/mp/modules/wx-location/index.ts |   1 -
 .../mp/modules/wx-material-select/index.ts    |   3 -
 .../mp/modules/wx-material-select/types.ts    |  12 -
 .../src/views/mp/modules/wx-msg/card.scss     | 116 ------
 .../src/views/mp/modules/wx-msg/comment.scss  | 109 ------
 .../src/views/mp/modules/wx-msg/index.ts      |   3 -
 .../src/views/mp/modules/wx-msg/wx-msg.vue    | 197 ----------
 .../src/views/mp/modules/wx-music/index.ts    |   1 -
 .../src/views/mp/modules/wx-news/index.ts     |   1 -
 .../src/views/mp/modules/wx-reply/index.ts    |   2 -
 .../views/mp/modules/wx-video-play/index.ts   |   1 -
 .../views/mp/modules/wx-voice-play/index.ts   |   1 -
 apps/web-antd/src/views/mp/tag/data.ts        |   1 +
 60 files changed, 1029 insertions(+), 2020 deletions(-)
 delete mode 100644 apps/web-antd/src/views/mp/autoReply/components/ReplyForm.vue
 rename apps/web-antd/src/views/mp/autoReply/{components/ReplyTable.vue => modules/content.vue} (70%)
 rename apps/web-antd/src/views/mp/autoReply/{components => }/types.ts (100%)
 rename apps/web-antd/src/views/mp/draft/{components => modules}/cover-select.vue (63%)
 rename apps/web-antd/src/views/mp/draft/{components => modules}/draft-table.vue (73%)
 rename apps/web-antd/src/views/mp/draft/{components => modules}/news-form.vue (68%)
 rename apps/web-antd/src/views/mp/draft/{components => modules}/types.ts (92%)
 delete mode 100644 apps/web-antd/src/views/mp/menu/components/menuOptions.ts
 rename apps/web-antd/src/views/mp/menu/{components => modules}/assets/iphone_backImg.png (100%)
 rename apps/web-antd/src/views/mp/menu/{components => modules}/assets/menu_foot.png (100%)
 rename apps/web-antd/src/views/mp/menu/{components => modules}/assets/menu_head.png (100%)
 rename apps/web-antd/src/views/mp/menu/{components/menu-editor.vue => modules/editor.vue} (64%)
 rename apps/web-antd/src/views/mp/menu/{components => modules}/index.ts (42%)
 rename apps/web-antd/src/views/mp/menu/{components/menu-previewer.vue => modules/previewer.vue} (68%)
 rename apps/web-antd/src/views/mp/menu/{components => modules}/types.ts (63%)
 create mode 100644 apps/web-antd/src/views/mp/modules/index.ts
 rename apps/web-antd/src/views/mp/modules/{wx-location/wx-location.vue => location/location.vue} (97%)
 rename apps/web-antd/src/views/mp/modules/{wx-material-select/wx-material-select.vue => material-select/material-select.vue} (39%)
 create mode 100644 apps/web-antd/src/views/mp/modules/material-select/types.ts
 rename apps/web-antd/src/views/mp/modules/{wx-msg => msg}/msg-event.vue (100%)
 rename apps/web-antd/src/views/mp/modules/{wx-msg => msg}/msg-list.vue (87%)
 rename apps/web-antd/src/views/mp/modules/{wx-msg => msg}/msg.vue (78%)
 rename apps/web-antd/src/views/mp/modules/{wx-msg => msg}/types.ts (100%)
 rename apps/web-antd/src/views/mp/modules/{wx-music/wx-music.vue => music/music.vue} (56%)
 rename apps/web-antd/src/views/mp/modules/{wx-news/wx-news.vue => news/news.vue} (39%)
 rename apps/web-antd/src/views/mp/modules/{wx-reply/wx-reply.vue => reply/reply.vue} (71%)
 rename apps/web-antd/src/views/mp/modules/{wx-reply => reply}/tab-image.vue (93%)
 rename apps/web-antd/src/views/mp/modules/{wx-reply => reply}/tab-music.vue (92%)
 rename apps/web-antd/src/views/mp/modules/{wx-reply => reply}/tab-news.vue (89%)
 rename apps/web-antd/src/views/mp/modules/{wx-reply => reply}/tab-text.vue (100%)
 rename apps/web-antd/src/views/mp/modules/{wx-reply => reply}/tab-video.vue (95%)
 rename apps/web-antd/src/views/mp/modules/{wx-reply => reply}/tab-voice.vue (90%)
 rename apps/web-antd/src/views/mp/modules/{wx-reply => reply}/types.ts (90%)
 rename apps/web-antd/src/views/mp/modules/{wx-video-play/wx-video-play.vue => video-play/video-play.vue} (90%)
 rename apps/web-antd/src/views/mp/modules/{wx-voice-play/wx-voice-play.vue => voice-play/voice-play.vue} (83%)
 delete mode 100644 apps/web-antd/src/views/mp/modules/wx-account-select/index.ts
 delete mode 100644 apps/web-antd/src/views/mp/modules/wx-account-select/wx-account-select.vue
 delete mode 100644 apps/web-antd/src/views/mp/modules/wx-location/index.ts
 delete mode 100644 apps/web-antd/src/views/mp/modules/wx-material-select/index.ts
 delete mode 100644 apps/web-antd/src/views/mp/modules/wx-material-select/types.ts
 delete mode 100644 apps/web-antd/src/views/mp/modules/wx-msg/card.scss
 delete mode 100644 apps/web-antd/src/views/mp/modules/wx-msg/comment.scss
 delete mode 100644 apps/web-antd/src/views/mp/modules/wx-msg/index.ts
 delete mode 100644 apps/web-antd/src/views/mp/modules/wx-msg/wx-msg.vue
 delete mode 100644 apps/web-antd/src/views/mp/modules/wx-music/index.ts
 delete mode 100644 apps/web-antd/src/views/mp/modules/wx-news/index.ts
 delete mode 100644 apps/web-antd/src/views/mp/modules/wx-reply/index.ts
 delete mode 100644 apps/web-antd/src/views/mp/modules/wx-video-play/index.ts
 delete mode 100644 apps/web-antd/src/views/mp/modules/wx-voice-play/index.ts

diff --git a/apps/web-antd/.env.development b/apps/web-antd/.env.development
index cff2557643..fe07e867cc 100644
--- a/apps/web-antd/.env.development
+++ b/apps/web-antd/.env.development
@@ -4,9 +4,9 @@ VITE_PORT=5666
 VITE_BASE=/
 
 # 请求路径
-VITE_BASE_URL=http://127.0.0.1:48080
+VITE_BASE_URL=http://47.103.66.220:48080
 # 接口地址
-VITE_GLOB_API_URL=/admin-api
+VITE_GLOB_API_URL=http://47.103.66.220:48080/admin-api
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
 VITE_UPLOAD_TYPE=server
 # 是否打开 devtools，true 为打开，false 为关闭
diff --git a/apps/web-antd/src/api/mp/draft/index.ts b/apps/web-antd/src/api/mp/draft/index.ts
index 9032ffd572..70b7c0e83d 100644
--- a/apps/web-antd/src/api/mp/draft/index.ts
+++ b/apps/web-antd/src/api/mp/draft/index.ts
@@ -50,13 +50,9 @@ 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 },
+  });
 }
 
 /** 删除草稿 */
diff --git a/apps/web-antd/src/views/mp/autoReply/components/ReplyForm.vue b/apps/web-antd/src/views/mp/autoReply/components/ReplyForm.vue
deleted file mode 100644
index d90e51a346..0000000000
--- a/apps/web-antd/src/views/mp/autoReply/components/ReplyForm.vue
+++ /dev/null
@@ -1,138 +0,0 @@
-<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>
-  <!-- TODO @hw：可以使用 <Form class="mx-4" /> 这种组件形式么？ 融合到 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/autoReply/modules/form.vue -->
-  <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>
diff --git a/apps/web-antd/src/views/mp/autoReply/data.ts b/apps/web-antd/src/views/mp/autoReply/data.ts
index e3cbef345e..8056cd2c4d 100644
--- a/apps/web-antd/src/views/mp/autoReply/data.ts
+++ b/apps/web-antd/src/views/mp/autoReply/data.ts
@@ -1,13 +1,30 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { MpAccountApi } from '#/api/mp/account';
 
 import { markRaw } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 
-import { WxAccountSelect } from '#/views/mp/modules/wx-account-select';
+import { getSimpleAccountList } from '#/api/mp/account';
+import { ReplySelect } from '#/views/mp/modules';
 
-import { MsgType } from './components/types';
+import { MsgType } from './types';
+
+/** 关联数据 */
+let accountList: MpAccountApi.AccountSimple[] = [];
+getSimpleAccountList().then((data) => (accountList = data));
+
+const RequestMessageTypes = new Set([
+  'image',
+  'link',
+  'location',
+  'shortvideo',
+  'text',
+  'video',
+  'voice',
+]); // 允许选择的请求消息类型
 
 /** 获取表格列配置 */
 export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
@@ -76,13 +93,84 @@ export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
   return columns;
 }
 
+/** 新增/修改的表单 */
+export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
+  const schema: VbenFormSchema[] = [];
+
+  // 消息类型（仅消息回复显示）
+  if (msgType === MsgType.Message) {
+    schema.push({
+      fieldName: 'requestMessageType',
+      label: '消息类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择',
+        options: getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE).filter((d) =>
+          RequestMessageTypes.has(d.value as string),
+        ),
+      },
+    });
+  }
+
+  // 匹配类型（仅关键词回复显示）
+  if (msgType === MsgType.Keyword) {
+    schema.push({
+      fieldName: 'requestMatch',
+      label: '匹配类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择匹配类型',
+        allowClear: true,
+        options: getDictOptions(
+          DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH,
+          'number',
+        ),
+      },
+      rules: 'required',
+    });
+  }
+
+  // 关键词（仅关键词回复显示）
+  if (msgType === MsgType.Keyword) {
+    schema.push({
+      fieldName: 'requestKeyword',
+      label: '关键词',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入内容',
+        allowClear: true,
+      },
+      rules: 'required',
+    });
+  }
+  // 回复消息
+  schema.push({
+    fieldName: 'reply',
+    label: '回复消息',
+    component: markRaw(ReplySelect),
+    // componentProps: {
+    //   modelValue: { type: 'video', content: '12456' },
+    // },
+    // modelPropName: 'modelValue',
+  });
+  return schema;
+}
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'accountId',
       label: '公众号',
-      component: markRaw(WxAccountSelect),
+      component: 'ApiSelect',
+      componentProps: {
+        options: accountList.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: '请选择公众号',
+      },
+      defaultValue: accountList[0]?.id,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/mp/autoReply/index.vue b/apps/web-antd/src/views/mp/autoReply/index.vue
index 504f79dd74..ae1043f2fb 100644
--- a/apps/web-antd/src/views/mp/autoReply/index.vue
+++ b/apps/web-antd/src/views/mp/autoReply/index.vue
@@ -1,15 +1,9 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
-import { computed, nextTick, onMounted, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 
-import {
-  confirm,
-  ContentWrap,
-  DocAlert,
-  Page,
-  useVbenModal,
-} from '@vben/common-ui';
+import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
 import { message, Row, Tabs } from 'ant-design-vue';
@@ -18,10 +12,10 @@ import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import * as MpAutoReplyApi from '#/api/mp/autoReply';
 import { $t } from '#/locales';
 
-import ReplyContentCell from './components/ReplyTable.vue';
-import { MsgType } from './components/types';
 import { useGridColumns, useGridFormSchema } from './data';
+import ReplyContentCell from './modules/content.vue';
 import Form from './modules/form.vue';
+import { MsgType } from './types';
 
 defineOptions({ name: 'MpAutoReply' });
 
@@ -41,7 +35,6 @@ async function onTabChange(tabName: string) {
   }
   // 查询数据
   await gridApi.query();
-  updateTableDataLength();
 }
 
 /** 新增按钮操作 */
@@ -49,7 +42,6 @@ async function handleCreate() {
   const formValues = await gridApi.formApi.getValues();
   formModalApi
     .setData({
-      isCreating: true,
       msgType: Number(msgType.value) as MsgType,
       accountId: formValues.accountId,
     })
@@ -61,8 +53,8 @@ async function handleEdit(row: any) {
   const data = (await MpAutoReplyApi.getAutoReply(row.id)) as any;
   formModalApi
     .setData({
-      isCreating: false,
       msgType: Number(msgType.value) as MsgType,
+      accountId: row.accountId,
       row: data,
     })
     .open();
@@ -78,9 +70,7 @@ async function handleDelete(row: any) {
   try {
     await MpAutoReplyApi.deleteAutoReply(row.id);
     message.success('删除成功');
-    await gridApi.query();
-    // 查询完成后更新数据长度
-    updateTableDataLength();
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -98,7 +88,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
   },
   gridOptions: {
     columns: useGridColumns(Number(msgType.value) as MsgType),
-    height: 'calc(100vh - 300px)',
+    height: 'auto',
     keepSource: true,
     proxyConfig: {
       ajax: {
@@ -111,7 +101,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
           });
         },
       },
-      autoLoad: false, // 禁用自动加载，等表单初始化完成后再加载
     },
     rowConfig: {
       keyField: 'id',
@@ -124,138 +113,109 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } as VxeTableGridOptions<any>,
 });
 
-// TODO @hw：按道理说，不太需呀哦这个？可以微信讨论下哈；
-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;
-  }
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
 }
 
-// TODO @hw：这个要不改成，直接 tableaction 那判断；
 // 计算是否显示新增按钮：关注时回复类型只有在没有数据时才显示
 const showCreateButton = computed(() => {
   if (Number(msgType.value) !== MsgType.Follow) {
     return true;
   }
-  return tableDataLength.value <= 0;
-});
-
-// TODO @hw：看看能不能参考 tag/index.vue 简化下
-/** 页面挂载后，等待表单初始化完成再加载数据 */
-onMounted(async () => {
-  // 等待 WxAccountSelect 组件加载并设置默认值
-  await nextTick();
-  if (!gridApi.formApi) {
-    return;
-  }
-  const formValues = await gridApi.formApi.getValues();
-  // 如果 accountId 有值，说明已经准备好了
-  if (formValues.accountId) {
-    // 设置为最新提交的值
-    gridApi.formApi.setLatestSubmissionValues(formValues);
-    // 触发首次查询
-    await gridApi.query();
-    updateTableDataLength();
+  try {
+    const tableData = gridApi.grid?.getTableData();
+    return (tableData?.tableData?.length || 0) <= 0;
+  } catch {
+    return true;
   }
 });
+
+// DONE @hw：看看能不能参考 tag/index.vue 简化下
 </script>
 
 <template>
   <Page auto-content-height>
-    <DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
-
-    <!-- tab 切换 -->
-    <!-- TODO @hw：貌似 tabs 里面套 table 的样式在 vben 里有点丑，要不我们按照 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/trade/afterSale/index.vue：1）第一层是公众号的选择；2）第二层是 tab；3）第三层是 table -->
-    <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 #doc>
+      <DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="自动回复列表">
+      <!-- 第一层：公众号选择（在表单中） -->
+      <!-- 第二层：tab 切换 -->
+      <template #toolbar-actions>
+        <Tabs
+          v-model:active-key="msgType"
+          class="w-full"
+          @change="(activeKey) => onTabChange(activeKey as string)"
+        >
+          <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>
+      </template>
+      <!-- 第三层：table -->
+      <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>
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-antd/src/views/mp/autoReply/components/ReplyTable.vue b/apps/web-antd/src/views/mp/autoReply/modules/content.vue
similarity index 70%
rename from apps/web-antd/src/views/mp/autoReply/components/ReplyTable.vue
rename to apps/web-antd/src/views/mp/autoReply/modules/content.vue
index 5948a91ccc..1d2a5187be 100644
--- a/apps/web-antd/src/views/mp/autoReply/components/ReplyTable.vue
+++ b/apps/web-antd/src/views/mp/autoReply/modules/content.vue
@@ -1,9 +1,6 @@
 <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';
-// TODO @hw：迁移到 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/autoReply/modules 里；组件名可能要换一个，= = 之前写的不太好；类似 content.vue ？本质是内容~
+import { Music, News, VideoPlayer, VoicePlayer } from '#/views/mp/modules';
+// DONE @hw：迁移到 /apps/web-antd/src/views/mp/autoReply/modules 里；组件名可能要换一个，= = 之前写的不太好；类似 content.vue ？本质是内容~
 defineOptions({ name: 'ReplyContentCell' });
 
 const props = defineProps<{
@@ -17,7 +14,7 @@ const props = defineProps<{
       {{ props.row.responseContent }}
     </div>
     <div v-else-if="props.row.responseMessageType === 'voice'">
-      <WxVoicePlayer
+      <VoicePlayer
         v-if="props.row.responseMediaUrl"
         :url="props.row.responseMediaUrl"
       />
@@ -33,17 +30,17 @@ const props = defineProps<{
         props.row.responseMessageType === 'shortvideo'
       "
     >
-      <WxVideoPlayer
+      <VideoPlayer
         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" />
+      <News :articles="props.row.responseArticles" />
     </div>
     <div v-else-if="props.row.responseMessageType === 'music'">
-      <WxMusic
+      <Music
         :title="props.row.responseTitle"
         :description="props.row.responseDescription"
         :thumb-media-url="props.row.responseThumbMediaUrl"
diff --git a/apps/web-antd/src/views/mp/autoReply/modules/form.vue b/apps/web-antd/src/views/mp/autoReply/modules/form.vue
index 2e2aee1924..2e8c23c8b0 100644
--- a/apps/web-antd/src/views/mp/autoReply/modules/form.vue
+++ b/apps/web-antd/src/views/mp/autoReply/modules/form.vue
@@ -1,57 +1,84 @@
 <script lang="ts" setup>
-import type { Reply } from '#/views/mp/modules/wx-reply';
+import type { Reply } from '#/views/mp/modules/reply/types';
 
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
 import { message } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
 import { createAutoReply, updateAutoReply } from '#/api/mp/autoReply';
 import { $t } from '#/locales';
-import { ReplyType } from '#/views/mp/modules/wx-reply/types';
+import { ReplyType } from '#/views/mp/modules/reply/types';
 
-import ReplyForm from '../components/ReplyForm.vue';
-import { MsgType } from '../components/types';
-import Form from '#/views/system/user/modules/form.vue';
+import { useFormSchema } from '../data';
+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 formData = ref<{
+  accountId?: number;
+  msgType: MsgType;
+  row?: any;
+}>();
 const getTitle = computed(() => {
-  return formData.value?.isCreating
-    ? $t('ui.actionTitle.create', ['自动回复'])
-    : $t('ui.actionTitle.edit', ['自动回复']);
+  return formData.value?.row?.id
+    ? $t('ui.actionTitle.edit', ['自动回复'])
+    : $t('ui.actionTitle.create', ['自动回复']);
+});
+
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(MsgType.Keyword),
+  showDefaultActions: false,
 });
 
+// 注意：schema 的更新现在在 onOpenChange 中手动处理，避免时序问题
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
-    await formRef.value?.validate();
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
 
     // 处理回复消息
-    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;
+    const submitForm: any = await formApi.getValues();
+    // 确保 type 字段使用当前选中的 tab 值
+    submitForm.type = formData.value?.msgType;
+    // 确保 accountId 字段存在
+    submitForm.accountId = formData.value?.accountId;
+    // 编辑模式下，确保 id 字段存在（从 row 中获取，因为表单 schema 中没有 id 字段）
+    if (formData.value?.row?.id && !submitForm.id) {
+      submitForm.id = formData.value.row.id;
+    }
+    const reply = submitForm.reply as Reply;
+    if (reply) {
+      submitForm.responseMessageType = reply.type;
+      submitForm.responseContent = reply.content;
+      submitForm.responseMediaId = reply.mediaId;
+      submitForm.responseMediaUrl = reply.url;
+      submitForm.responseTitle = reply.title;
+      submitForm.responseDescription = reply.description;
+      submitForm.responseThumbMediaId = reply.thumbMediaId;
+      submitForm.responseThumbMediaUrl = reply.thumbMediaUrl;
+      submitForm.responseArticles = reply.articles;
+      submitForm.responseMusicUrl = reply.musicUrl;
+      submitForm.responseHqMusicUrl = reply.hqMusicUrl;
+    }
+    delete submitForm.reply;
 
     modalApi.lock();
     try {
-      if (replyForm.value.id === undefined) {
+      if (submitForm.id === undefined) {
         await createAutoReply(submitForm);
         message.success('新增成功');
       } else {
@@ -67,50 +94,34 @@ const [Modal, modalApi] = useVbenModal({
   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;
+    // 先更新 schema，确保表单字段正确
+    formApi.setState({ schema: useFormSchema(data.msgType) });
+    // 等待 schema 更新完成
+    await nextTick();
 
-    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) {
+    formData.value = data;
+    if (data.row?.id) {
       // 编辑：加载数据
       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 = {
+      const formValues: any = { ...rowData };
+      // delete formValues.responseMessageType;
+      // delete formValues.responseContent;
+      // delete formValues.responseMediaId;
+      // delete formValues.responseMediaUrl;
+      // delete formValues.responseDescription;
+      // delete formValues.responseArticles;
+      formValues.reply = {
         type: rowData.responseMessageType,
         accountId: data.accountId || -1,
         content: rowData.responseContent,
@@ -124,20 +135,29 @@ const [Modal, modalApi] = useVbenModal({
         musicUrl: rowData.responseMusicUrl,
         hqMusicUrl: rowData.responseHqMusicUrl,
       };
+      await formApi.setValues(formValues);
+    } else {
+      // 新建：初始化表单
+      const initialValues: any = {
+        id: undefined,
+        accountId: data.accountId || -1,
+        type: data.msgType,
+        requestKeyword: undefined,
+        requestMatch: data.msgType === MsgType.Keyword ? 1 : undefined,
+        requestMessageType: undefined,
+        reply: {
+          type: ReplyType.Text,
+          accountId: data.accountId || -1,
+        },
+      };
+      await formApi.setValues(initialValues);
     }
   },
 });
 </script>
 
 <template>
-  <!-- TODO @hw：可以使用 <Form class="mx-4" /> 这种组件形式么？ -->
   <Modal :title="getTitle" class="w-4/5">
-    <ReplyForm
-      v-if="formData"
-      v-model="replyForm"
-      v-model:reply="reply"
-      :msg-type="formData.msgType"
-      ref="formRef"
-    />
+    <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-antd/src/views/mp/autoReply/components/types.ts b/apps/web-antd/src/views/mp/autoReply/types.ts
similarity index 100%
rename from apps/web-antd/src/views/mp/autoReply/components/types.ts
rename to apps/web-antd/src/views/mp/autoReply/types.ts
diff --git a/apps/web-antd/src/views/mp/draft/data.ts b/apps/web-antd/src/views/mp/draft/data.ts
index 2ee398fd11..cd8bf01c19 100644
--- a/apps/web-antd/src/views/mp/draft/data.ts
+++ b/apps/web-antd/src/views/mp/draft/data.ts
@@ -1,9 +1,12 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpAccountApi } from '#/api/mp/account';
 
-import { markRaw } from 'vue';
+import { getSimpleAccountList } from '#/api/mp/account';
 
-import { WxAccountSelect } from '#/views/mp/modules/wx-account-select';
+/** 关联数据 */
+let accountList: MpAccountApi.AccountSimple[] = [];
+getSimpleAccountList().then((data) => (accountList = data));
 
 /** 获取表格列配置 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
@@ -18,7 +21,7 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       field: 'updateTime',
       title: '更新时间',
       minWidth: 180,
-      formatter: 'formatDateTime',
+      formatter: 'formatDateTime', // TODO @YunaiV 接口返回数据不对，需要乘1000
     },
     {
       title: '操作',
@@ -30,13 +33,21 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
 }
 
 /** 列表的搜索表单 */
-// TODO @hw：这里的公众号选择，要改参考 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/tag/data.ts；相关联的代码还简单点~
+//  DONE @hw：这里的公众号选择，要改参考 /apps/web-antd/src/views/mp/tag/data.ts；相关联的代码还简单点~
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'accountId',
       label: '公众号',
-      component: markRaw(WxAccountSelect),
+      component: 'ApiSelect',
+      componentProps: {
+        options: accountList.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: '请选择公众号',
+      },
+      defaultValue: accountList[0]?.id,
     },
   ];
 }
diff --git a/apps/web-antd/src/views/mp/draft/index.vue b/apps/web-antd/src/views/mp/draft/index.vue
index e1185adcc9..bf28472d55 100644
--- a/apps/web-antd/src/views/mp/draft/index.vue
+++ b/apps/web-antd/src/views/mp/draft/index.vue
@@ -1,10 +1,8 @@
 <script lang="ts" setup>
-import type { Article } from './components/types';
+import type { Article } from './modules/types';
 
 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 { $t } from '@vben/locales';
 
@@ -12,13 +10,16 @@ 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/components/types';
+// DONE @hw：MpFreePublishApi 去掉，直接 import；参考别的模块哈；
+import { submitFreePublish } from '#/api/mp/freePublish';
+import { createEmptyNewsItem } from '#/views/mp/draft/modules/types';
 
-import DraftTableCell from './components/draft-table.vue';
 import { useGridColumns, useGridFormSchema } from './data';
+import DraftTableCell from './modules/draft-table.vue';
 import Form from './modules/form.vue';
 
+// DONE @hw：参考 tag/index.vue 放到 formValues.accountId;
+// DONE @hw：看看这个 watch、provide 能不能简化掉；
 defineOptions({ name: 'MpDraft' });
 
 const [FormModal, formModalApi] = useVbenModal({
@@ -26,120 +27,16 @@ const [FormModal, formModalApi] = useVbenModal({
   destroyOnClose: true,
 });
 
-// TODO @hw：下面的方法，放到这个前面，和别的保持一致；
-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 返回的数据，兼容不同的数据结构
-          // TODO @wx：看 yudao-ui-admin-vue3/src/views/mp/draft/index.vue 项目里，转换没这么复杂。。。是不是这里有办法简化下？
-          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 给子组件
-// TODO @hw：参考 tag/index.vue 放到 formValues.accountId;
-const accountId = ref<number>(-1);
-
-// 监听表单提交，更新 accountId
-// TODO @hw：看看这个 watch、provide 能不能简化掉；
-watch(
-  () => gridApi.formApi?.getLatestSubmissionValues?.()?.accountId,
-  (newAccountId) => {
-    if (newAccountId !== undefined) {
-      accountId.value = newAccountId;
-    }
-  },
-);
-
-provide('accountId', accountId);
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
 
 /** 新增按钮操作 */
 async function handleCreate() {
   const formValues = await gridApi.formApi.getValues();
   const accountId = formValues.accountId;
-  if (!accountId || accountId === -1) {
+  if (!accountId) {
     message.warning('请先选择公众号');
     return;
   }
@@ -156,7 +53,7 @@ async function handleCreate() {
 async function handleEdit(row: Article) {
   const formValues = await gridApi.formApi.getValues();
   const accountId = formValues.accountId;
-  if (!accountId || accountId === -1) {
+  if (!accountId) {
     message.warning('请先选择公众号');
     return;
   }
@@ -165,7 +62,7 @@ async function handleEdit(row: Article) {
       isCreating: false,
       accountId,
       mediaId: row.mediaId,
-      newsList: structuredClone(row.content.newsItem),
+      newsList: row.content.newsItem,
     })
     .open();
 }
@@ -174,8 +71,8 @@ async function handleEdit(row: Article) {
 async function handlePublish(row: Article) {
   const formValues = await gridApi.formApi.getValues();
   const accountId = formValues.accountId;
-  // TODO @hw：看看能不能去掉 -1 的判断哈？
-  if (!accountId || accountId === -1) {
+  // DONE @hw：看看能不能去掉 -1 的判断哈？
+  if (!accountId) {
     message.warning('请先选择公众号');
     return;
   }
@@ -188,11 +85,10 @@ async function handlePublish(row: Article) {
     content: '发布中...',
     duration: 0,
   });
-  // TODO @hw：MpFreePublishApi 去掉，直接 import；参考别的模块哈；
   try {
-    await MpFreePublishApi.submitFreePublish(accountId, row.mediaId);
+    await submitFreePublish(accountId, row.mediaId);
     message.success('发布成功');
-    await gridApi.query();
+    handleRefresh();
   } finally {
     hideLoading();
   }
@@ -202,7 +98,7 @@ async function handlePublish(row: Article) {
 async function handleDelete(row: Article) {
   const formValues = await gridApi.formApi.getValues();
   const accountId = formValues.accountId;
-  if (!accountId || accountId === -1) {
+  if (!accountId) {
     message.warning('请先选择公众号');
     return;
   }
@@ -214,39 +110,67 @@ async function handleDelete(row: Article) {
   try {
     await MpDraftApi.deleteDraft(accountId, row.mediaId);
     message.success('删除成功');
-    await gridApi.query();
+    handleRefresh();
   } finally {
     hideLoading();
   }
 }
 
-// TODO @hw：看看能不能参考 tag/index.vue 简化下
-// 页面挂载后，等待表单初始化完成再加载数据
-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();
-    }
-  }
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+    submitOnChange: true,
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          const drafts = await MpDraftApi.getDraftPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            ...formValues,
+          });
+          // 将 thumbUrl 转成 picUrl，保证 wx-news 组件可以预览封面
+          drafts.list.forEach((draft: any) => {
+            const newsList = draft.content?.newsItem;
+            if (newsList) {
+              newsList.forEach((item: any) => {
+                item.picUrl = item.thumbUrl || item.picUrl;
+              });
+            }
+          });
+          return {
+            list: drafts.list as unknown as Article[],
+            total: drafts.total,
+          };
+        },
+      },
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<Article>,
 });
+
+// DONE @hw：看看能不能参考 tag/index.vue 简化下
 </script>
 
 <template>
   <Page auto-content-height>
-    <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
+    <template #doc>
+      <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
+    </template>
 
-    <!-- TODO @hw：参考别的模块 @success 调用 refresh 方法； -->
-    <FormModal
-      @success="
-        () => {
-          gridApi.query();
-        }
-      "
-    />
+    <!-- DONE @hw：参考别的模块 @success 调用 refresh 方法； -->
+    <FormModal @success="handleRefresh" />
 
     <Grid table-title="草稿列表">
       <template #toolbar-tools>
diff --git a/apps/web-antd/src/views/mp/draft/components/cover-select.vue b/apps/web-antd/src/views/mp/draft/modules/cover-select.vue
similarity index 63%
rename from apps/web-antd/src/views/mp/draft/components/cover-select.vue
rename to apps/web-antd/src/views/mp/draft/modules/cover-select.vue
index 2958e18b93..e28296bbde 100644
--- a/apps/web-antd/src/views/mp/draft/components/cover-select.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/cover-select.vue
@@ -11,7 +11,7 @@ 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';
+import { MaterialSelect } from '#/views/mp/modules';
 
 const props = defineProps<{
   isFirst: boolean;
@@ -33,8 +33,9 @@ const newsItem = computed<NewsItem>({
   },
 });
 
+const dialogVisible = ref(false);
+
 const accountId = inject<number>('accountId');
-const showImageDialog = ref(false);
 
 const fileList = ref<UploadFile[]>([]);
 interface UploadData {
@@ -46,26 +47,31 @@ const uploadData: UploadData = reactive({
   accountId: accountId!,
 });
 
-/** 素材选择完成事件*/
+function handleOpenDialog() {
+  dialogVisible.value = true;
+}
+
+/** 素材选择完成事件 */
 function onMaterialSelected(item: any) {
-  showImageDialog.value = false;
+  dialogVisible.value = false;
   newsItem.value.thumbMediaId = item.mediaId;
   newsItem.value.thumbUrl = item.url;
 }
-// TODO @hw：注释都补充下哈；
+// DONE @hw：注释都补充下哈；
+/** 上传前校验 */
 const onBeforeUpload = (file: UploadFile) =>
   useBeforeUpload(UploadType.Image, 2)(file as any);
 
-// TODO @hw：注释都补充下哈；
+// DONE @hw：注释都补充下哈；
+/** 上传错误处理 */
 function onUploadChange(info: any) {
-  if (info.file.status === 'done') {
-    onUploadSuccess(info.file.response || info.file);
-  } else if (info.file.status === 'error') {
+  if (info.file.status === 'error') {
     onUploadError(info.file.error || new Error('上传失败'));
   }
 }
 
-// TODO @hw：注释都补充下哈；
+// DONE @hw：注释都补充下哈；
+/** 上传成功处理 */
 function onUploadSuccess(res: any) {
   if (res.code !== 0) {
     message.error(`上传出错：${res.msg}`);
@@ -79,7 +85,8 @@ function onUploadSuccess(res: any) {
   newsItem.value.thumbUrl = res.data.url;
 }
 
-// TODO @hw：注释都补充下哈；
+// DONE @hw：注释都补充下哈；
+/** 上传失败处理 */
 function onUploadError(err: Error) {
   message.error(`上传失败: ${err.message}`);
 }
@@ -88,21 +95,22 @@ function onUploadError(err: Error) {
 <template>
   <div>
     <p>封面:</p>
-    <!-- TODO @hw：我貌似上传不成功。不确定是不是我这边的问题；；；可以微信沟通下哈。 -->
-    <div class="thumb-div">
+    <!-- DONE @hw：我貌似上传不成功。不确定是不是我这边的问题；；；可以微信沟通下哈。 -->
+    <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
+    <div class="flex w-full flex-col items-center justify-center text-center">
       <Image
         v-if="newsItem.thumbUrl"
-        style="width: 300px; max-height: 300px"
+        class="max-h-[300px] w-[300px]"
         :src="newsItem.thumbUrl"
         :preview="false"
       />
       <IconifyIcon
         v-else
         icon="lucide:plus"
-        class="avatar-uploader-icon"
-        :class="isFirst ? 'avatar' : 'avatar1'"
+        class="border border-[#d9d9d9] text-center text-[28px] leading-[120px] text-[#8c939d]"
+        :class="isFirst ? 'h-[120px] w-[230px]' : 'h-[120px] w-[120px]'"
       />
-      <div class="thumb-but">
+      <div class="m-[5px]">
         <div class="flex items-center justify-center">
           <Upload
             :action="UPLOAD_URL"
@@ -110,35 +118,35 @@ function onUploadError(err: Error) {
             :file-list="fileList"
             :data="{ ...uploadData }"
             :before-upload="onBeforeUpload"
+            @success="onUploadSuccess"
             @change="onUploadChange"
           >
             <template #default>
               <Button size="small" type="primary">本地上传</Button>
             </template>
           </Upload>
-          <!-- TODO @hw：tindwind -->
           <Button
             size="small"
             type="primary"
-            @click="showImageDialog = true"
-            style="margin-left: 5px"
+            class="ml-[5px]"
+            @click="handleOpenDialog"
           >
             素材库选择
           </Button>
         </div>
 
-        <div class="upload-tip">
+        <div class="ml-[5px] mt-[5px] text-xs text-[#999]">
           支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
         </div>
       </div>
-      <!-- TODO @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢 -->
+      <!-- DONE @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢 -->
       <Modal
-        title="选择图片"
-        v-model:open="showImageDialog"
-        width="80%"
-        destroy-on-close
+        v-model:open="dialogVisible"
+        title="图片选择"
+        width="65%"
+        :footer="null"
       >
-        <WxMaterialSelect
+        <MaterialSelect
           type="image"
           :account-id="accountId!"
           @select-material="onMaterialSelected"
@@ -147,47 +155,3 @@ function onUploadError(err: Error) {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
-.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>
diff --git a/apps/web-antd/src/views/mp/draft/components/draft-table.vue b/apps/web-antd/src/views/mp/draft/modules/draft-table.vue
similarity index 73%
rename from apps/web-antd/src/views/mp/draft/components/draft-table.vue
rename to apps/web-antd/src/views/mp/draft/modules/draft-table.vue
index 6e4f12af4e..1e995d8684 100644
--- a/apps/web-antd/src/views/mp/draft/components/draft-table.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/draft-table.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Article } from './types';
 
-import { WxNews } from '#/views/mp/modules/wx-news';
+import { News } from '#/views/mp/modules';
 
 defineOptions({ name: 'DraftTableCell' });
 
@@ -13,7 +13,7 @@ const props = defineProps<{
 <template>
   <div class="p-2.5">
     <div v-if="props.row.content && props.row.content.newsItem">
-      <WxNews :articles="props.row.content.newsItem" />
+      <News :articles="props.row.content.newsItem" />
     </div>
   </div>
 </template>
diff --git a/apps/web-antd/src/views/mp/draft/modules/form.vue b/apps/web-antd/src/views/mp/draft/modules/form.vue
index 25ce21bc70..9320031bdd 100644
--- a/apps/web-antd/src/views/mp/draft/modules/form.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/form.vue
@@ -1,35 +1,38 @@
 <script lang="ts" setup>
-import type { NewsItem } from '../components/types';
+import type { NewsItem } from './types';
 
-import { computed, ref } from 'vue';
+import { computed, provide, ref } from 'vue';
 
-import { confirm, useVbenModal } from '@vben/common-ui';
+import { useVbenModal } from '@vben/common-ui';
 
 import { message, Spin } from 'ant-design-vue';
 
 import { createDraft, updateDraft } from '#/api/mp/draft';
 
-import NewsForm from '../components/news-form.vue';
+import NewsForm from './news-form.vue';
 
 const emit = defineEmits(['success']);
 
+// DONE @hw：是不是通过 id 字段判断是否为新增？类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/modules/form.vue
 const formData = ref<{
   accountId: number;
-  // TODO @hw：是不是通过 id 字段判断是否为新增？类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/modules/form.vue
-  isCreating: boolean;
   mediaId?: string;
   newsList?: NewsItem[];
 }>();
 const newsList = ref<NewsItem[]>([]);
-// TODO @hw：不需要 isSave，通过 modal 去 lock 就好啦。
+// DONE @hw：不需要 isSave，通过 modal 去 lock 就好啦。
 const isSubmitting = ref(false);
-// TODO @hw：不需要 isSave，通过 modal 去 lock 就好啦。
-const isSaved = ref(false);
 
 const getTitle = computed(() => {
-  return formData.value?.isCreating ? '新建图文' : '修改图文';
+  return formData.value?.mediaId ? '修改图文' : '新建图文';
 });
 
+// 提供 accountId 给子组件
+provide(
+  'accountId',
+  computed(() => formData.value?.accountId),
+);
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
     if (!formData.value) {
@@ -39,18 +42,17 @@ const [Modal, modalApi] = useVbenModal({
     isSubmitting.value = true;
     modalApi.lock();
     try {
-      if (formData.value.isCreating) {
-        await createDraft(formData.value.accountId, newsList.value);
-        message.success('新增成功');
-      } else if (formData.value.mediaId) {
+      if (formData.value.mediaId) {
         await updateDraft(
           formData.value.accountId,
           formData.value.mediaId,
           newsList.value,
         );
         message.success('更新成功');
+      } else {
+        await createDraft(formData.value.accountId, newsList.value);
+        message.success('新增成功');
       }
-      isSaved.value = true;
       await modalApi.close();
       emit('success');
     } finally {
@@ -58,26 +60,12 @@ const [Modal, modalApi] = useVbenModal({
       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;
@@ -87,7 +75,11 @@ const [Modal, modalApi] = useVbenModal({
     if (!data) {
       return;
     }
-    formData.value = data;
+    formData.value = {
+      accountId: data.accountId,
+      mediaId: data.mediaId,
+      newsList: data.newsList,
+    };
     newsList.value = data.newsList || [];
   },
 });
@@ -99,7 +91,7 @@ const [Modal, modalApi] = useVbenModal({
       <NewsForm
         v-if="formData"
         v-model="newsList"
-        :is-creating="formData.isCreating"
+        :is-creating="!formData.mediaId"
       />
     </Spin>
   </Modal>
diff --git a/apps/web-antd/src/views/mp/draft/components/news-form.vue b/apps/web-antd/src/views/mp/draft/modules/news-form.vue
similarity index 68%
rename from apps/web-antd/src/views/mp/draft/components/news-form.vue
rename to apps/web-antd/src/views/mp/draft/modules/news-form.vue
index 365137fd54..703974471a 100644
--- a/apps/web-antd/src/views/mp/draft/components/news-form.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/news-form.vue
@@ -44,8 +44,8 @@ const activeNewsItem = computed(() => {
   return item;
 });
 
-// TODO @hw：注释使用 /** */
-// 将图文向下移动
+// DONE @hw：注释使用 /** */
+/** 将图文向下移动 */
 function moveDownNews(index: number) {
   const current = newsList.value[index];
   const next = newsList.value[index + 1];
@@ -56,7 +56,7 @@ function moveDownNews(index: number) {
   }
 }
 
-// 将图文向上移动
+/** 将图文向上移动 */
 function moveUpNews(index: number) {
   const current = newsList.value[index];
   const prev = newsList.value[index - 1];
@@ -67,7 +67,7 @@ function moveUpNews(index: number) {
   }
 }
 
-// 删除指定 index 的图文
+/** 删除指定 index 的图文 */
 async function removeNews(index: number) {
   await confirm('确定删除该图文吗?');
   newsList.value.splice(index, 1);
@@ -76,7 +76,7 @@ async function removeNews(index: number) {
   }
 }
 
-// 添加一个图文
+/** 添加一个图文 */
 function plusNews() {
   newsList.value.push(createEmptyNewsItem());
   activeNewsIndex.value = newsList.value.length - 1;
@@ -86,19 +86,29 @@ function plusNews() {
 <template>
   <Layout>
     <Layout.Sider width="40%" theme="light">
-      <div class="select-item">
+      <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
+      <div class="mx-auto mb-[10px] w-[60%] border border-[#eaeaea] p-[10px]">
         <div v-for="(news, index) in newsList" :key="index">
           <div
-            class="news-main father"
+            class="group relative mx-auto h-[120px] w-full cursor-pointer bg-white"
             v-if="index === 0"
-            :class="{ activeAddNews: activeNewsIndex === index }"
+            :class="{
+              'border-[5px] border-[#2bb673]': 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 class="relative h-[120px] w-full bg-[#acadae]">
+              <img class="h-full w-full" :src="news.thumbUrl" />
+              <div
+                class="absolute bottom-0 left-0 inline-block h-[25px] w-[98%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-[15px] text-white opacity-65"
+              >
+                {{ news.title }}
+              </div>
             </div>
-            <div class="child" v-if="newsList.length > 1">
+            <div
+              class="relative -bottom-[25px] hidden text-center group-hover:block"
+              v-if="newsList.length > 1"
+            >
               <Button
                 type="default"
                 shape="circle"
@@ -120,18 +130,22 @@ function plusNews() {
             </div>
           </div>
           <div
-            class="news-main-item father"
+            class="group relative mx-auto w-full cursor-pointer border-t border-[#eaeaea] bg-white py-[5px]"
             v-if="index > 0"
-            :class="{ activeAddNews: activeNewsIndex === index }"
+            :class="{
+              'border-[5px] border-[#2bb673]': 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 class="relative -ml-[3px]">
+              <div class="inline-block w-[70%] text-xs">{{ news.title }}</div>
+              <div class="inline-block w-[25%] bg-[#acadae]">
+                <img class="h-full w-full" :src="news.thumbUrl" />
               </div>
             </div>
-            <div class="child">
+            <div
+              class="relative -bottom-[25px] hidden text-center group-hover:block"
+            >
               <Button
                 v-if="newsList.length > index + 1"
                 shape="circle"
@@ -163,7 +177,10 @@ function plusNews() {
             </div>
           </div>
         </div>
-        <Row justify="center" class="ope-row">
+        <Row
+          justify="center"
+          class="mt-[5px] border-t border-[#eaeaea] pt-[5px] text-center"
+        >
           <Button
             type="primary"
             shape="circle"
@@ -175,7 +192,7 @@ function plusNews() {
         </Row>
       </div>
     </Layout.Sider>
-    <Layout.Content :style="{ backgroundColor: '#fff' }">
+    <Layout.Content class="bg-white">
       <div v-if="newsList.length > 0 && activeNewsItem">
         <!-- 标题、作者、原文地址 -->
         <Row :gutter="20">
@@ -185,13 +202,13 @@ function plusNews() {
               placeholder="请输入标题（必填）"
             />
           </Col>
-          <Col :span="24" style="margin-top: 5px">
+          <Col :span="24" class="mt-[5px]">
             <Input
               v-model:value="activeNewsItem.author"
               placeholder="请输入作者"
             />
           </Col>
-          <Col :span="24" style="margin-top: 5px">
+          <Col :span="24" class="mt-[5px]">
             <Input
               v-model:value="activeNewsItem.contentSourceUrl"
               placeholder="请输入原文地址"
@@ -212,7 +229,7 @@ function plusNews() {
               :rows="8"
               v-model:value="activeNewsItem.digest"
               placeholder="请输入摘要"
-              class="digest"
+              class="inline-block w-full align-top"
               :maxlength="120"
               :show-count="true"
             />
@@ -230,14 +247,6 @@ function plusNews() {
 </template>
 
 <style lang="scss" scoped>
-/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
-.ope-row {
-  padding-top: 5px;
-  margin-top: 5px;
-  text-align: center;
-  border-top: 1px solid #eaeaea;
-}
-
 :deep(.ant-row) {
   margin-bottom: 20px;
 }
@@ -245,94 +254,4 @@ function plusNews() {
 :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>
diff --git a/apps/web-antd/src/views/mp/draft/components/types.ts b/apps/web-antd/src/views/mp/draft/modules/types.ts
similarity index 92%
rename from apps/web-antd/src/views/mp/draft/components/types.ts
rename to apps/web-antd/src/views/mp/draft/modules/types.ts
index 43c6f60af0..07209c92f2 100644
--- a/apps/web-antd/src/views/mp/draft/components/types.ts
+++ b/apps/web-antd/src/views/mp/draft/modules/types.ts
@@ -1,4 +1,4 @@
-// TODO @hw：要不把 components 里的部分，拿到 modules 里。
+// DONE @hw：要不把 components 里的部分，拿到 modules 里。
 interface NewsItem {
   title: string;
   thumbMediaId: string;
diff --git a/apps/web-antd/src/views/mp/menu/components/menuOptions.ts b/apps/web-antd/src/views/mp/menu/components/menuOptions.ts
deleted file mode 100644
index 565f0e221f..0000000000
--- a/apps/web-antd/src/views/mp/menu/components/menuOptions.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-// TODO @hw：这个要不合并到 types 里；
-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: '选择地理位置',
-  },
-];
diff --git a/apps/web-antd/src/views/mp/menu/data.ts b/apps/web-antd/src/views/mp/menu/data.ts
index 2a22837baf..ddb2bea42d 100644
--- a/apps/web-antd/src/views/mp/menu/data.ts
+++ b/apps/web-antd/src/views/mp/menu/data.ts
@@ -1,3 +1,7 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { getSimpleAccountList } from '#/api/mp/account';
+
 /** 菜单未选中标识 */
 export const MENU_NOT_SELECTED = '__MENU_NOT_SELECTED__';
 
@@ -7,3 +11,21 @@ export enum Level {
   Parent = '1',
   Undefined = '0',
 }
+
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleAccountList,
+        labelField: 'name',
+        valueField: 'id',
+        autoSelect: 'first',
+        placeholder: '请选择公众号',
+      },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mp/menu/index.vue b/apps/web-antd/src/views/mp/menu/index.vue
index 91b20b332c..3d3e45657d 100644
--- a/apps/web-antd/src/views/mp/menu/index.vue
+++ b/apps/web-antd/src/views/mp/menu/index.vue
@@ -1,17 +1,26 @@
 <script lang="ts" setup>
-import type { Menu, RawMenu } from './components/types';
+import type { Menu, RawMenu } from './modules/types';
 
-import { ref } from 'vue';
+import { nextTick, onMounted, 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 { Button, message } from 'ant-design-vue';
 
+import { useVbenForm } from '#/adapter/form';
+import { getSimpleAccountList } from '#/api/mp/account';
 import { deleteMenu, getMenuList, saveMenu } from '#/api/mp/menu';
-import { MenuEditor, MenuPreviewer } from '#/views/mp/menu/components';
-import { Level, MENU_NOT_SELECTED } from '#/views/mp/menu/data';
-import { WxAccountSelect } from '#/views/mp/modules/wx-account-select';
+import {
+  Level,
+  MENU_NOT_SELECTED,
+  useGridFormSchema,
+} from '#/views/mp/menu/data';
+import { MenuEditor, MenuPreviewer } from '#/views/mp/menu/modules';
+
+import iphoneBackImg from './modules/assets/iphone_backImg.png';
+import menuFootImg from './modules/assets/menu_foot.png';
+import menuHeadImg from './modules/assets/menu_head.png';
 
 defineOptions({ name: 'MpMenu' });
 
@@ -21,6 +30,25 @@ const accountId = ref(-1);
 const accountName = ref<string>('');
 const menuList = ref<Menu[]>([]);
 
+// 创建表单
+const [AccountForm, accountFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-[240px]',
+    },
+  },
+  layout: 'horizontal',
+  schema: useGridFormSchema(),
+  wrapperClass: 'grid-cols-1',
+  showDefaultActions: false,
+  handleValuesChange: async (values, changedFields) => {
+    // 当 accountId 字段变化时（包括 autoSelect 自动选择），同步更新 accountId
+    if (changedFields.includes('accountId') && values.accountId) {
+      await onAccountChanged(values);
+    }
+  },
+});
+
 // ======================== 菜单操作 ========================
 // 当前选中菜单编码：
 //  * 一级（'x'）
@@ -50,12 +78,36 @@ const tempSelfObj = ref<{
 const dialogNewsVisible = ref(false); // 跳转图文时的素材选择弹窗
 
 /** 侦听公众号变化 */
-function onAccountChanged(id: number, name: string) {
-  accountId.value = id;
-  accountName.value = name;
+async function onAccountChanged(values: Record<string, any>) {
+  accountId.value = values.accountId;
+  // 从 API 获取公众号列表并查找对应的公众号名称
+  const accountList = await getSimpleAccountList();
+  const account = accountList.find((item) => item.id === values.accountId);
+  accountName.value = account?.name || '';
   getList();
 }
 
+/** 初始化账号ID - 作为备用方案，防止 handleValuesChange 未触发 */
+async function initAccountId() {
+  // 等待表单初始化完成
+  await nextTick();
+  try {
+    const values = await accountFormApi.getValues();
+    if (values?.accountId && accountId.value === -1) {
+      // 如果表单有值但 accountId 还是初始值，则手动触发一次
+      await onAccountChanged(values);
+    }
+  } catch {
+    // 忽略错误
+  }
+}
+
+// 组件挂载时初始化账号ID
+onMounted(async () => {
+  await nextTick();
+  await initAccountId();
+});
+
 /** 查询并转换菜单 */
 async function getList() {
   loading.value = true;
@@ -250,24 +302,36 @@ function menuToBackend(menu: any) {
     </template>
 
     <!-- 搜索工作栏 -->
-    <!-- TODO @hw：是不是少了一个框子哈？ -->
     <!-- <ContentWrap> -->
-    <Form layout="inline" class="-mb-15px w-240px">
-      <Form.Item label="公众号" prop="accountId" class="w-240px">
-        <WxAccountSelect @change="onAccountChanged" />
-      </Form.Item>
-    </Form>
+    <AccountForm class="-mb-15px w-240px" @values-change="onAccountChanged" />
     <!-- </ContentWrap> -->
 
-    <!-- TODO @hw：貌似高度高了点。就是手机下面部分，空了一大块。 -->
+    <!-- DONE @hw：貌似高度高了点。就是手机下面部分，空了一大块。 -->
     <ContentWrap>
-      <div class="clearfix public-account-management" v-loading="loading">
+      <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
+      <div
+        class="mx-auto w-[1200px] after:clear-both after:table after:content-['']"
+        v-loading="loading"
+      >
         <!--左边配置菜单-->
-        <div class="left">
-          <div class="weixin-hd">
-            <div class="weixin-title">{{ accountName }}</div>
+        <div
+          class="relative float-left box-border block h-[715px] w-[350px] bg-[length:100%_auto] bg-no-repeat p-[518px_25px_88px]"
+          :style="{ backgroundImage: `url(${iphoneBackImg})` }"
+        >
+          <div
+            class="relative bottom-[426px] left-0 h-[64px] w-[300px] bg-[length:100%] bg-[position:0_0] bg-no-repeat text-center text-white"
+            :style="{ backgroundImage: `url(${menuHeadImg})` }"
+          >
+            <div
+              class="absolute left-0 top-[33px] w-full text-center text-sm text-white"
+            >
+              {{ accountName }}
+            </div>
           </div>
-          <div class="clearfix weixin-menu">
+          <div
+            class="bg-[position:0_0] bg-no-repeat pl-[43px] text-xs after:clear-both after:table after:content-['']"
+            :style="{ backgroundImage: `url(${menuFootImg})` }"
+          >
             <MenuPreviewer
               v-model="menuList"
               :account-id="accountId"
@@ -277,27 +341,25 @@ function menuToBackend(menu: any) {
               @submenu-clicked="(child, x, y) => subMenuClicked(child, x, y)"
             />
           </div>
-          <div class="save-div">
+          <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
+          <div class="mt-[15px] flex items-center justify-center gap-[10px]">
             <Button
-              class="save-btn"
               type="primary"
               @click="onSave"
               v-access:code="['mp:menu:save']"
             >
               保存并发布菜单
             </Button>
-            <Button
-              class="save-btn"
-              danger
-              @click="onClear"
-              v-access:code="['mp:menu:delete']"
-            >
+            <Button danger @click="onClear" v-access:code="['mp:menu:delete']">
               清空菜单
             </Button>
           </div>
         </div>
         <!--右边配置-->
-        <div class="right" v-if="showRightPanel">
+        <div
+          class="float-left ml-5 box-border w-[63%] bg-[#e8e7e7] p-5"
+          v-if="showRightPanel"
+        >
           <MenuEditor
             :account-id="accountId"
             :is-parent="isParent"
@@ -306,93 +368,10 @@ function menuToBackend(menu: any) {
           />
         </div>
         <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
-        <div v-else class="right">
+        <div v-else class="float-left ml-5 box-border w-[63%] bg-[#e8e7e7] p-5">
           <p>请选择菜单配置</p>
         </div>
       </div>
     </ContentWrap>
   </Page>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
-/* 公共颜色变量 */
-.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('./components/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('./components/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('./components/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>
diff --git a/apps/web-antd/src/views/mp/menu/components/assets/iphone_backImg.png b/apps/web-antd/src/views/mp/menu/modules/assets/iphone_backImg.png
similarity index 100%
rename from apps/web-antd/src/views/mp/menu/components/assets/iphone_backImg.png
rename to apps/web-antd/src/views/mp/menu/modules/assets/iphone_backImg.png
diff --git a/apps/web-antd/src/views/mp/menu/components/assets/menu_foot.png b/apps/web-antd/src/views/mp/menu/modules/assets/menu_foot.png
similarity index 100%
rename from apps/web-antd/src/views/mp/menu/components/assets/menu_foot.png
rename to apps/web-antd/src/views/mp/menu/modules/assets/menu_foot.png
diff --git a/apps/web-antd/src/views/mp/menu/components/assets/menu_head.png b/apps/web-antd/src/views/mp/menu/modules/assets/menu_head.png
similarity index 100%
rename from apps/web-antd/src/views/mp/menu/components/assets/menu_head.png
rename to apps/web-antd/src/views/mp/menu/modules/assets/menu_head.png
diff --git a/apps/web-antd/src/views/mp/menu/components/menu-editor.vue b/apps/web-antd/src/views/mp/menu/modules/editor.vue
similarity index 64%
rename from apps/web-antd/src/views/mp/menu/components/menu-editor.vue
rename to apps/web-antd/src/views/mp/menu/modules/editor.vue
index 6044b520d6..564bd4f0c1 100644
--- a/apps/web-antd/src/views/mp/menu/components/menu-editor.vue
+++ b/apps/web-antd/src/views/mp/menu/modules/editor.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-// TODO @hw：名字可以缩写成 editor.vue，文件名
+// DONE @hw：名字可以缩写成 editor.vue，文件名
 import { computed, nextTick, ref, watch } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
@@ -14,11 +14,9 @@ import {
   Select,
 } from 'ant-design-vue';
 
-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 { MaterialSelect, News, ReplySelect } from '#/views/mp/modules';
 
-import menuOptions from './menuOptions';
+import { menuOptions } from './types';
 
 const props = defineProps<{
   accountId: number;
@@ -40,13 +38,13 @@ const menu = computed({
   },
 });
 const showNewsDialog = ref(false);
-const hackResetWxReplySelect = ref(false);
+const hackResetReplySelect = ref(false);
 const isLeave = computed<boolean>(() => !(menu.value.children?.length > 0));
 
 watch(menu, () => {
-  hackResetWxReplySelect.value = false; // 销毁组件
+  hackResetReplySelect.value = false; // 销毁组件
   nextTick(() => {
-    hackResetWxReplySelect.value = true; // 重建组件
+    hackResetReplySelect.value = true; // 重建组件
   });
 });
 
@@ -83,8 +81,9 @@ function deleteMaterial() {
 
 <template>
   <div>
-    <div class="configure-page">
-      <div class="delete-btn">
+    <!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
+    <div>
+      <div class="mb-[15px] text-right">
         <Button type="primary" danger @click="emit('delete')">
           <IconifyIcon icon="lucide:trash-2" />
           删除当前菜单
@@ -93,7 +92,7 @@ function deleteMaterial() {
       <div>
         <span>菜单名称：</span>
         <Input
-          class="input-width"
+          class="mr-[2%] w-[240px]"
           v-model:value="menu.name"
           placeholder="请输入菜单名称"
           :maxlength="isParent ? 4 : 7"
@@ -101,21 +100,21 @@ function deleteMaterial() {
         />
       </div>
       <div v-if="isLeave">
-        <div class="menu-content">
+        <div class="mt-5">
           <span>菜单标识：</span>
           <Input
-            class="input-width"
+            class="mr-[2%] w-[240px]"
             v-model:value="menu.menuKey"
             placeholder="请输入菜单 KEY"
             allow-clear
           />
         </div>
-        <div class="menu-content">
+        <div class="mt-5">
           <span>菜单内容：</span>
           <Select
             v-model:value="menu.type"
             placeholder="请选择"
-            class="input-width"
+            class="mr-[2%] w-[240px]"
             allow-clear
           >
             <Select.Option
@@ -128,56 +127,69 @@ function deleteMaterial() {
             </Select.Option>
           </Select>
         </div>
-        <div class="configur-content" v-if="menu.type === 'view'">
+        <div
+          class="mt-5 rounded-[5px] bg-white p-[20px_10px]"
+          v-if="menu.type === 'view'"
+        >
           <span>跳转链接：</span>
           <Input
-            class="input-width"
+            class="mr-[2%] w-[240px]"
             v-model:value="menu.url"
             placeholder="请输入链接"
             allow-clear
           />
         </div>
-        <!-- TODO @hw：1）左侧 filed 宽度，看看要不要统一；2）右侧的 input 宽度也处理下； -->
-        <div class="configur-content" v-if="menu.type === 'miniprogram'">
-          <div class="applet">
-            <span>小程序的 appid ：</span>
+        <!-- DONE @hw：1）左侧 filed 宽度，看看要不要统一；2）右侧的 input 宽度也处理下； -->
+        <div
+          class="mt-5 rounded-[5px] bg-white p-[20px_10px]"
+          v-if="menu.type === 'miniprogram'"
+        >
+          <div class="mb-5 flex items-center">
+            <div class="w-[20%]">小程序的 appid ：</div>
             <Input
-              class="input-width"
+              class="mr-[2%] flex-1"
               v-model:value="menu.miniProgramAppId"
               placeholder="请输入小程序的appid"
               allow-clear
             />
           </div>
-          <div class="applet">
-            <span>小程序的页面路径：</span>
+          <div class="mb-5 flex items-center">
+            <div class="w-[20%]">小程序的页面路径：</div>
             <Input
-              class="input-width"
+              class="mr-[2%] flex-1"
               v-model:value="menu.miniProgramPagePath"
               placeholder="请输入小程序的页面路径，如：pages/index"
               allow-clear
             />
           </div>
-          <div class="applet">
-            <span>小程序的备用网页：</span>
+          <div class="mb-5 flex items-center">
+            <div class="w-[20%]">小程序的备用网页：</div>
             <Input
-              class="input-width"
+              class="mr-[2%] flex-1"
               v-model:value="menu.url"
               placeholder="不支持小程序的老版本客户端将打开本网页"
               allow-clear
             />
           </div>
-          <p class="blue">
+          <p class="mt-[10px] text-[#29b6f6]">
             tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
           </p>
         </div>
         <div
-          class="configur-content"
+          class="mt-5 rounded-[5px] bg-white p-[20px_10px]"
           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">
+            <div
+              class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
+              v-if="menu && menu.replyArticles"
+            >
+              <News :articles="menu.replyArticles" />
+              <Row
+                class="pt-[10px] text-center"
+                justify="center"
+                align="middle"
+              >
                 <Button
                   type="primary"
                   danger
@@ -190,8 +202,8 @@ function deleteMaterial() {
             </div>
             <div v-else>
               <Row justify="center">
-                <!-- TODO @hw：html 标签里的 style 要用 tindwind 替代下； -->
-                <Col :span="24" style="text-align: center">
+                <!-- DONE @hw：html 标签里的 style 要用 tindwind 替代下； -->
+                <Col :span="24" class="text-center">
                   <Button type="primary" @click="showNewsDialog = true">
                     素材库选择
                     <IconifyIcon icon="lucide:circle-check" />
@@ -205,7 +217,7 @@ function deleteMaterial() {
               width="80%"
               destroy-on-close
             >
-              <WxMaterialSelect
+              <MaterialSelect
                 type="news"
                 :account-id="props.accountId"
                 @select-material="selectMaterial"
@@ -214,79 +226,15 @@ function deleteMaterial() {
           </Row>
         </div>
         <!-- TODO @hw：貌似这个组件出不来 -->
+        <!--TODO @hw 这个组件显示逻辑是要有两个菜单才会显示，之前的代码逻辑我这边也不是很清楚，待沟通 -->
         <div
-          class="configur-content"
+          class="configur-content mt-5"
           v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
         >
-          <WxReplySelect v-if="hackResetWxReplySelect" v-model="menu.reply" />
+          <ReplySelect v-model="menu.reply" />
         </div>
         <!-- TODO @hw：扫码回复，这个帮忙看看，是不是有点问题。= = 好像 vue3 + element-plus 就有点问题； -->
       </div>
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
-: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>
diff --git a/apps/web-antd/src/views/mp/menu/components/index.ts b/apps/web-antd/src/views/mp/menu/modules/index.ts
similarity index 42%
rename from apps/web-antd/src/views/mp/menu/components/index.ts
rename to apps/web-antd/src/views/mp/menu/modules/index.ts
index 02a277aba6..335e9891ac 100644
--- a/apps/web-antd/src/views/mp/menu/components/index.ts
+++ b/apps/web-antd/src/views/mp/menu/modules/index.ts
@@ -1,5 +1,5 @@
-// TODO @hw：如果只有自己组件里用，一般是 modules，所以这个目录要改成 modules 哈（自己模块的一部分）；如果要给外部的组件用，可以叫 components；
-export { default as MenuEditor } from './menu-editor.vue';
-export { default as MenuPreviewer } from './menu-previewer.vue';
-export * from './menuOptions';
+// DONE @hw：如果只有自己组件里用，一般是 modules，所以这个目录要改成 modules 哈（自己模块的一部分）；如果要给外部的组件用，可以叫 components；
+export { default as MenuEditor } from './editor.vue';
+export { default as MenuPreviewer } from './previewer.vue';
 export type * from './types';
+export * from './types';
diff --git a/apps/web-antd/src/views/mp/menu/components/menu-previewer.vue b/apps/web-antd/src/views/mp/menu/modules/previewer.vue
similarity index 68%
rename from apps/web-antd/src/views/mp/menu/components/menu-previewer.vue
rename to apps/web-antd/src/views/mp/menu/modules/previewer.vue
index cbdc1bee53..acfed8ad94 100644
--- a/apps/web-antd/src/views/mp/menu/components/menu-previewer.vue
+++ b/apps/web-antd/src/views/mp/menu/modules/previewer.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-// TODO @hw：名字可以缩写成 previewer.vue，文件名
+// DONE @hw：名字可以缩写成 previewer.vue，文件名
 import type { Menu } from './types';
 
 import { computed } from 'vue';
@@ -44,9 +44,8 @@ function addMenu() {
 
 /** 添加横向二级菜单；parent 表示要操作的父菜单 */
 function addSubMenu(i: number, parent: any) {
-  const subMenuKeyLength = parent.children.length; // 获取二级菜单 key 长度
-  // TODO @hw：可以 inline 掉。idea 或者 vscode 的一些告警，处理掉会更干净一些。
-  const addButton = {
+  // DONE @hw：可以 inline 掉。idea 或者 vscode 的一些告警，处理掉会更干净一些。
+  parent.children[parent.children.length] = {
     name: '子菜单名称',
     reply: {
       // 用于存储回复内容
@@ -54,8 +53,11 @@ function addSubMenu(i: number, parent: any) {
       accountId: props.accountId, // 保证组件里，可以使用到对应的公众号
     },
   };
-  parent.children[subMenuKeyLength] = addButton;
-  subMenuClicked(parent.children[subMenuKeyLength], i, subMenuKeyLength);
+  subMenuClicked(
+    parent.children[parent.children.length - 1],
+    i,
+    parent.children.length - 1,
+  );
 }
 
 /** 一级菜单点击 */
@@ -129,18 +131,23 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
     @end="onParentDragEnd"
   >
     <template #item="{ element: parent, index: x }">
-      <div class="menu-bottom">
+      <div
+        class="relative float-left box-border block w-[85.5px] cursor-pointer border border-[#ebedee] bg-white text-center"
+      >
         <!-- 一级菜单 -->
         <div
           @click="menuClicked(parent, x)"
-          class="menu-item"
-          :class="{ active: props.activeIndex === `${x}` }"
+          class="box-border flex h-[44px] w-full items-center justify-center leading-[44px]"
+          :class="{ 'border border-[#2bb673]': props.activeIndex === `${x}` }"
         >
           <IconifyIcon icon="lucide:panel-right-open" color="black" />
           {{ parent.name }}
         </div>
         <!-- 以下为二级菜单-->
-        <div class="submenu" v-if="props.parentIndex === x && parent.children">
+        <div
+          class="absolute bottom-[45px] left-0 w-[85.5px]"
+          v-if="props.parentIndex === x && parent.children"
+        >
           <draggable
             v-model="parent.children"
             item-key="id"
@@ -149,11 +156,15 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
             @end="onChildDragEnd"
           >
             <template #item="{ element: child, index: y }">
-              <div class="menu-bottom subtitle">
+              <div
+                class="relative float-left box-border block w-[85.5px] cursor-pointer border border-[#ebedee] bg-white text-center"
+              >
                 <div
-                  class="menu-sub-item"
-                  v-if="parent.children"
-                  :class="{ active: props.activeIndex === `${x}-${y}` }"
+                  class="box-border h-[44px] text-center leading-[44px]"
+                  :class="{
+                    'border border-[#2bb673]':
+                      props.activeIndex === `${x}-${y}`,
+                  }"
                   @click="subMenuClicked(child, x, y)"
                 >
                   {{ child.name }}
@@ -161,13 +172,12 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
               </div>
             </template>
           </draggable>
-          <!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号  -->
           <div
-            class="menu-bottom menu-addicon"
+            class="relative float-left box-border block flex h-[46px] w-[85.5px] cursor-pointer items-center justify-center border border-[#ebedee] bg-white text-center leading-[46px]"
             v-if="!parent.children || parent.children.length < 5"
             @click="addSubMenu(x, parent)"
           >
-            <IconifyIcon icon="lucide:plus" class="plus" />
+            <IconifyIcon icon="lucide:plus" class="text-[#2bb673]" />
           </div>
         </div>
       </div>
@@ -176,78 +186,15 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
 
   <!-- 一级菜单加号 -->
   <div
-    class="menu-bottom menu-addicon"
+    class="relative float-left box-border block flex h-[46px] w-[85.5px] cursor-pointer items-center justify-center border border-[#ebedee] bg-white text-center leading-[46px]"
     v-if="menuList.length < 3"
     @click="addMenu"
   >
-    <IconifyIcon icon="lucide:plus" class="plus" />
+    <IconifyIcon icon="lucide:plus" class="text-[#2bb673]" />
   </div>
 </template>
 
 <style lang="scss" scoped>
-/** TODO @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 */
-.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;
diff --git a/apps/web-antd/src/views/mp/menu/components/types.ts b/apps/web-antd/src/views/mp/menu/modules/types.ts
similarity index 63%
rename from apps/web-antd/src/views/mp/menu/components/types.ts
rename to apps/web-antd/src/views/mp/menu/modules/types.ts
index 928534ea9a..9194af974f 100644
--- a/apps/web-antd/src/views/mp/menu/components/types.ts
+++ b/apps/web-antd/src/views/mp/menu/modules/types.ts
@@ -71,3 +71,47 @@ interface _Menu extends RawMenu {
 }
 
 export type Menu = Partial<_Menu>;
+
+// DONE @hw：这个要不合并到 types 里；
+export const menuOptions = [
+  {
+    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: '选择地理位置',
+  },
+] as const;
diff --git a/apps/web-antd/src/views/mp/modules/index.ts b/apps/web-antd/src/views/mp/modules/index.ts
new file mode 100644
index 0000000000..1cbe320d86
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/index.ts
@@ -0,0 +1,20 @@
+// 统一导出所有模块组件
+
+export { default as Location } from './location/location.vue';
+
+export { default as MaterialSelect } from './material-select/material-select.vue';
+export * from './material-select/types';
+
+export * from './msg/types';
+
+export { default as Music } from './music/music.vue';
+
+export { default as News } from './news/news.vue';
+
+export { default as ReplySelect } from './reply/reply.vue';
+
+export * from './reply/types';
+
+export { default as VideoPlayer } from './video-play/video-play.vue';
+
+export { default as VoicePlayer } from './voice-play/voice-play.vue';
diff --git a/apps/web-antd/src/views/mp/modules/wx-location/wx-location.vue b/apps/web-antd/src/views/mp/modules/location/location.vue
similarity index 97%
rename from apps/web-antd/src/views/mp/modules/wx-location/wx-location.vue
rename to apps/web-antd/src/views/mp/modules/location/location.vue
index fd1b60bc2e..bf35479227 100644
--- a/apps/web-antd/src/views/mp/modules/wx-location/wx-location.vue
+++ b/apps/web-antd/src/views/mp/modules/location/location.vue
@@ -6,7 +6,7 @@ import { IconifyIcon } from '@vben/icons';
 
 import { Col, Row } from 'ant-design-vue';
 
-defineOptions({ name: 'WxLocation' });
+defineOptions({ name: 'Location' });
 
 const props = defineProps({
   locationX: {
diff --git a/apps/web-antd/src/views/mp/modules/wx-material-select/wx-material-select.vue b/apps/web-antd/src/views/mp/modules/material-select/material-select.vue
similarity index 39%
rename from apps/web-antd/src/views/mp/modules/wx-material-select/wx-material-select.vue
rename to apps/web-antd/src/views/mp/modules/material-select/material-select.vue
index fcd0b3cfb1..bf1c2346d7 100644
--- a/apps/web-antd/src/views/mp/modules/wx-material-select/wx-material-select.vue
+++ b/apps/web-antd/src/views/mp/modules/material-select/material-select.vue
@@ -1,21 +1,22 @@
 <script lang="ts" setup>
-import { onMounted, reactive, ref } from 'vue';
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+
+import { computed, onMounted, reactive, ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 import { formatTime } from '@vben/utils';
 
-import { Button, Pagination, Row, Spin, Table } from 'ant-design-vue';
+import { Button, Pagination, Spin } from 'ant-design-vue';
 
+import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getDraftPage } from '#/api/mp/draft';
 import { getFreePublishPage } from '#/api/mp/freePublish';
 import { getMaterialPage } 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 { News, VideoPlayer, VoicePlayer } from '#/views/mp/modules/index';
 
 import { NewsType } from './types';
 
-defineOptions({ name: 'WxMaterialSelect' });
+defineOptions({ name: 'MaterialSelect' });
 
 const props = withDefaults(
   defineProps<{
@@ -99,184 +100,225 @@ async function getDraftPageFun() {
   total.value = data.total;
 }
 
-// TODO @hw：改成 grid 风格；
-onMounted(async () => {
-  getPage();
+// 音频素材表格列
+const voiceColumns = computed(() => [
+  { field: 'mediaId', title: '编号', align: 'center' },
+  { field: 'name', title: '文件名', align: 'center' },
+  {
+    field: 'url',
+    title: '语音',
+    align: 'center',
+    slots: { default: 'voice' },
+  },
+  {
+    field: 'createTime',
+    title: '上传时间',
+    align: 'center',
+    width: 180,
+    formatter: ({ cellValue }: any) =>
+      formatTime(cellValue, 'YYYY-MM-DD HH:mm:ss'),
+  },
+  {
+    field: 'actions',
+    title: '操作',
+    align: 'center',
+    fixed: 'right',
+    slots: { default: 'actions' },
+  },
+]);
+
+// 视频素材表格列
+const videoColumns = computed(() => [
+  { field: 'mediaId', title: '编号', align: 'center' },
+  { field: 'name', title: '文件名', align: 'center' },
+  { field: 'title', title: '标题', align: 'center' },
+  { field: 'introduction', title: '介绍', align: 'center' },
+  {
+    field: 'url',
+    title: '视频',
+    align: 'center',
+    slots: { default: 'video' },
+  },
+  {
+    field: 'createTime',
+    title: '上传时间',
+    align: 'center',
+    width: 180,
+    formatter: ({ cellValue }: any) =>
+      formatTime(cellValue, 'YYYY-MM-DD HH:mm:ss'),
+  },
+  {
+    field: 'actions',
+    title: '操作',
+    align: 'center',
+    fixed: 'right',
+    slots: { default: 'actions' },
+  },
+]);
+
+// 语音表格
+const [VoiceGrid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: voiceColumns.value,
+    border: true,
+    pagerConfig: {
+      enabled: true,
+      currentPage: 1,
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          const data = await getMaterialPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            accountId: props.accountId,
+            type: 'voice',
+          });
+          return data;
+        },
+      },
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+
+// 视频表格
+const [VideoGrid] = useVbenVxeGrid({
+  gridOptions: {
+    columns: videoColumns.value,
+    border: true,
+    pagerConfig: {
+      enabled: true,
+      currentPage: 1,
+      pageSize: 10,
+    },
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }) => {
+          const data = await getMaterialPage({
+            pageNo: page.currentPage,
+            pageSize: page.pageSize,
+            accountId: props.accountId,
+            type: 'video',
+          });
+          return data;
+        },
+      },
+    },
+    toolbarConfig: {
+      refresh: true,
+    },
+  } as VxeTableGridOptions<any>,
+});
+
+// 对于 image 和 news 类型，需要手动加载数据
+onMounted(() => {
+  if (props.type === 'image' || props.type === 'news') {
+    getPage();
+  }
 });
 </script>
 
 <template>
-  <div class="pb-30px">
+  <div class="pb-8">
     <!-- 类型：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">
+        <div
+          class="columns-1 gap-2.5 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
+        >
+          <div
+            v-for="item in list"
+            :key="item.mediaId"
+            class="mb-2.5 break-inside-avoid rounded border border-gray-200 p-2.5 transition-shadow hover:shadow-md"
+          >
+            <img :src="item.url" :alt="item.name" class="w-full rounded" />
+            <p class="my-2 truncate text-sm">{{ item.name }}</p>
+            <div class="flex justify-center">
               <Button type="primary" @click="selectMaterialFun(item)">
                 选择
                 <IconifyIcon icon="lucide: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 class="mt-4 flex justify-end">
+        <Pagination
+          :total="total"
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          @change="getMaterialPageFun"
+        />
+      </div>
     </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)">
-                选择
-                <IconifyIcon icon="lucide:plus" />
-              </Button>
-            </template>
-          </Table.Column>
-        </Table>
-      </Spin>
-      <!-- 分页组件 -->
-      <Pagination
-        :total="total"
-        v-model:current="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        @change="getPage"
-      />
+      <VoiceGrid>
+        <template #voice="{ row }">
+          <VoicePlayer :url="row.url" />
+        </template>
+        <template #actions="{ row }">
+          <Button type="link" @click="selectMaterialFun(row)">
+            选择
+            <IconifyIcon icon="lucide:circle-check" />
+          </Button>
+        </template>
+      </VoiceGrid>
     </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)">
-                选择
-                <IconifyIcon icon="lucide:circle-plus" />
-              </Button>
-            </template>
-          </Table.Column>
-        </Table>
-      </Spin>
-      <!-- 分页组件 -->
-      <Pagination
-        :total="total"
-        v-model:current="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        @change="getMaterialPageFun"
-      />
+      <VideoGrid>
+        <template #video="{ row }">
+          <VideoPlayer :url="row.url" />
+        </template>
+        <template #actions="{ row }">
+          <Button type="link" @click="selectMaterialFun(row)">
+            选择
+            <IconifyIcon icon="lucide:circle-check" />
+          </Button>
+        </template>
+      </VideoGrid>
     </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
+          class="columns-1 gap-2.5 md:columns-2 lg:columns-3 xl:columns-4 2xl:columns-5"
+        >
+          <div
+            v-for="item in list"
+            :key="item.mediaId"
+            class="mb-2.5 break-inside-avoid"
+          >
             <div v-if="item.content && item.content.newsItem">
-              <WxNews :articles="item.content.newsItem" />
-              <Row class="ope-row">
+              <News :articles="item.content.newsItem" />
+              <div class="mt-2 flex justify-center">
                 <Button type="primary" @click="selectMaterialFun(item)">
                   选择
                   <IconifyIcon icon="lucide:circle-check" />
                 </Button>
-              </Row>
+              </div>
             </div>
           </div>
         </div>
       </Spin>
       <!-- 分页组件 -->
-      <Pagination
-        :total="total"
-        v-model:current="queryParams.pageNo"
-        v-model:page-size="queryParams.pageSize"
-        @change="getMaterialPageFun"
-      />
+      <div class="mt-4 flex justify-end">
+        <Pagination
+          :total="total"
+          v-model:current="queryParams.pageNo"
+          v-model:page-size="queryParams.pageSize"
+          @change="getMaterialPageFun"
+        />
+      </div>
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-/** TODO @hw：tindwind 风格 */
-@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>
diff --git a/apps/web-antd/src/views/mp/modules/material-select/types.ts b/apps/web-antd/src/views/mp/modules/material-select/types.ts
new file mode 100644
index 0000000000..8fd2cc7cb6
--- /dev/null
+++ b/apps/web-antd/src/views/mp/modules/material-select/types.ts
@@ -0,0 +1,4 @@
+export enum NewsType {
+  Draft = '2',
+  Published = '1',
+}
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/msg-event.vue b/apps/web-antd/src/views/mp/modules/msg/msg-event.vue
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/wx-msg/msg-event.vue
rename to apps/web-antd/src/views/mp/modules/msg/msg-event.vue
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/msg-list.vue b/apps/web-antd/src/views/mp/modules/msg/msg-list.vue
similarity index 87%
rename from apps/web-antd/src/views/mp/modules/wx-msg/msg-list.vue
rename to apps/web-antd/src/views/mp/modules/msg/msg-list.vue
index 6373dbb931..2450f74fb0 100644
--- a/apps/web-antd/src/views/mp/modules/wx-msg/msg-list.vue
+++ b/apps/web-antd/src/views/mp/modules/msg/msg-list.vue
@@ -54,7 +54,7 @@ const getNickname = (sendFrom: SendFromType) =>
         <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">
+          <div class="text-sm text-[#999]">
             {{ formatDateTime(item.createTime) }}
           </div>
         </div>
@@ -69,9 +69,4 @@ const getNickname = (sendFrom: SendFromType) =>
   </div>
 </template>
 
-<style lang="scss" scoped>
-/* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
-/** TODO @hw：这里有没办法重构掉哈。辛苦~~~ */
-@import url('../comment.scss');
-@import url('../card.scss');
-</style>
+<style scoped></style>
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/msg.vue b/apps/web-antd/src/views/mp/modules/msg/msg.vue
similarity index 78%
rename from apps/web-antd/src/views/mp/modules/wx-msg/msg.vue
rename to apps/web-antd/src/views/mp/modules/msg/msg.vue
index a46f81dd5d..ccfeb4addc 100644
--- a/apps/web-antd/src/views/mp/modules/wx-msg/msg.vue
+++ b/apps/web-antd/src/views/mp/modules/msg/msg.vue
@@ -3,11 +3,13 @@ import { ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-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 {
+  Location,
+  Music,
+  News,
+  VideoPlayer,
+  VoicePlayer,
+} from '#/views/mp/modules';
 
 import MsgEvent from './msg-event.vue';
 import { MsgType } from './types';
@@ -28,7 +30,7 @@ const item = ref<any>(props.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" />
+      <VoicePlayer :url="item.mediaUrl" :content="item.recognition" />
     </div>
 
     <div v-else-if="item.type === MsgType.Image">
@@ -41,7 +43,7 @@ const item = ref<any>(props.item);
       v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
       class="text-center"
     >
-      <WxVideoPlayer :url="item.mediaUrl" />
+      <VideoPlayer :url="item.mediaUrl" />
     </div>
 
     <div v-else-if="item.type === MsgType.Link" class="flex-1">
@@ -61,7 +63,7 @@ const item = ref<any>(props.item);
     </div>
 
     <div v-else-if="item.type === MsgType.Location">
-      <WxLocation
+      <Location
         :label="item.label"
         :location-y="item.locationY"
         :location-x="item.locationX"
@@ -69,11 +71,11 @@ const item = ref<any>(props.item);
     </div>
 
     <div v-else-if="item.type === MsgType.News" class="w-[300px]">
-      <WxNews :articles="item.articles" />
+      <News :articles="item.articles" />
     </div>
 
     <div v-else-if="item.type === MsgType.Music">
-      <WxMusic
+      <Music
         :title="item.title"
         :description="item.description"
         :thumb-media-url="item.thumbMediaUrl"
@@ -83,3 +85,5 @@ const item = ref<any>(props.item);
     </div>
   </div>
 </template>
+
+<style scoped></style>
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/types.ts b/apps/web-antd/src/views/mp/modules/msg/types.ts
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/wx-msg/types.ts
rename to apps/web-antd/src/views/mp/modules/msg/types.ts
diff --git a/apps/web-antd/src/views/mp/modules/wx-music/wx-music.vue b/apps/web-antd/src/views/mp/modules/music/music.vue
similarity index 56%
rename from apps/web-antd/src/views/mp/modules/wx-music/wx-music.vue
rename to apps/web-antd/src/views/mp/modules/music/music.vue
index 381292e6fc..f0433d40f8 100644
--- a/apps/web-antd/src/views/mp/modules/wx-music/wx-music.vue
+++ b/apps/web-antd/src/views/mp/modules/music/music.vue
@@ -2,7 +2,7 @@
   【微信消息 - 音乐】
 -->
 <script lang="ts" setup>
-defineOptions({ name: 'WxMusic' });
+defineOptions({ name: 'Music' });
 
 const props = defineProps({
   title: {
@@ -43,18 +43,15 @@ defineExpose({
       :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 class="flex rounded-[5px] bg-white p-[10px]">
+        <div class="mr-3 h-12 w-12 overflow-hidden rounded-full">
+          <img :src="thumbMediaUrl" alt="" class="h-full w-full object-cover" />
         </div>
-        <div class="avue-card__detail">
-          <div class="avue-card__title" style="margin-bottom: unset">
+        <div class="flex-1">
+          <div class="text-base text-[rgba(0,0,0,0.85)] hover:text-[#1890ff]">
             {{ title }}
           </div>
-          <div class="avue-card__info" style="height: unset">
+          <div class="line-clamp-3 text-[rgba(0,0,0,0.45)]">
             {{ description }}
           </div>
         </div>
@@ -63,8 +60,4 @@ defineExpose({
   </div>
 </template>
 
-<style lang="scss" scoped>
-/** TODO @hw：这里有没办法重构掉哈。辛苦~~~ */
-/* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss  */
-@import url('../wx-msg/card.scss');
-</style>
+<style scoped></style>
diff --git a/apps/web-antd/src/views/mp/modules/wx-news/wx-news.vue b/apps/web-antd/src/views/mp/modules/news/news.vue
similarity index 39%
rename from apps/web-antd/src/views/mp/modules/wx-news/wx-news.vue
rename to apps/web-antd/src/views/mp/modules/news/news.vue
index 0c8daa6abb..3ca3c83246 100644
--- a/apps/web-antd/src/views/mp/modules/wx-news/wx-news.vue
+++ b/apps/web-antd/src/views/mp/modules/news/news.vue
@@ -8,7 +8,7 @@
 <script lang="ts" setup>
 import { Image } from 'ant-design-vue';
 
-defineOptions({ name: 'WxNews' });
+defineOptions({ name: 'News' });
 
 const props = withDefaults(
   defineProps<{
@@ -25,19 +25,21 @@ defineExpose({
 </script>
 
 <template>
-  <div class="news-home">
-    <div v-for="(article, index) in articles" :key="index" class="news-div">
+  <!-- DONE @hw：tindwind 替代 -->
+  <div class="mx-auto w-full bg-white">
+    <div v-for="(article, index) in articles" :key="index">
       <!-- 头条 -->
       <a v-if="index === 0" :href="article.url" target="_blank">
-        <div class="news-main">
-          <div class="news-content">
+        <div class="mx-auto w-full">
+          <div class="relative w-full bg-[#acadae]">
             <Image
               :src="article.picUrl || article.thumbUrl"
-              class="material-img"
+              class="h-[120px] w-full"
               :preview="false"
-              style="width: 100%; height: 120px"
             />
-            <div class="news-content-title">
+            <div
+              class="absolute bottom-0 left-0 inline-block w-[98%] whitespace-normal bg-black p-[1%] text-xs text-white opacity-65"
+            >
               <span>{{ article.title }}</span>
             </div>
           </div>
@@ -45,14 +47,17 @@ defineExpose({
       </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">
+        <div class="border-t border-[#eaeaea] bg-white py-[5px]">
+          <div class="relative">
+            <div
+              class="ml-[1%] inline-block w-[70%] whitespace-normal text-[10px]"
+            >
+              {{ article.title }}
+            </div>
+            <div class="mr-[1%] inline-block w-[25%] bg-[#acadae]">
               <img
                 :src="article.picUrl || article.thumbUrl"
-                class="material-img"
-                height="100%"
+                class="h-full w-full"
               />
             </div>
           </div>
@@ -61,67 +66,3 @@ defineExpose({
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @hw：tindwind 替代 */
-.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>
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/wx-reply.vue b/apps/web-antd/src/views/mp/modules/reply/reply.vue
similarity index 71%
rename from apps/web-antd/src/views/mp/modules/wx-reply/wx-reply.vue
rename to apps/web-antd/src/views/mp/modules/reply/reply.vue
index 225e8ab353..233487ffe2 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/wx-reply.vue
+++ b/apps/web-antd/src/views/mp/modules/reply/reply.vue
@@ -10,21 +10,22 @@
 <script lang="ts" setup>
 import type { Reply } from './types';
 
-import { computed, ref, unref, watch } from 'vue';
+import { computed } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
 import { Row, Tabs } from 'ant-design-vue';
 
+import { NewsType } from '../material-select/types';
 import TabImage from './tab-image.vue';
 import TabMusic from './tab-music.vue';
 import TabNews from './tab-news.vue';
 import TabText from './tab-text.vue';
 import TabVideo from './tab-video.vue';
 import TabVoice from './tab-voice.vue';
-import { createEmptyReply, NewsType, ReplyType } from './types';
+import { createEmptyReply, ReplyType } from './types';
 
-defineOptions({ name: 'WxReplySelect' });
+defineOptions({ name: 'ReplySelect' });
 
 const props = withDefaults(
   defineProps<{
@@ -38,40 +39,18 @@ const props = withDefaults(
 const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
+
+// 提供一个默认的 Reply 对象，避免 undefined 导致的错误
+const defaultReply: Reply = {
+  accountId: -1,
+  type: ReplyType.Text,
+};
+
 const reply = computed<Reply>({
-  get: () => props.modelValue,
+  get: () => props.modelValue || defaultReply,
   set: (val) => emit('update:modelValue', val),
 });
 
-const tabCache = new Map<ReplyType, Reply>(); // 作为多个标签保存各自 Reply 的缓存
-const currentTab = ref<ReplyType>(props.modelValue.type || ReplyType.Text); // 采用独立的 ref 来保存当前 tab，避免在 watch 标签变化，对 reply进行赋值会产生了循环调用
-
-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);
@@ -83,7 +62,8 @@ defineExpose({
 </script>
 
 <template>
-  <Tabs v-model:active-key="currentTab" type="card">
+  <!-- 之前使用的currentTab会导致组件tab不切换，直接改为使用reply.type,不做tab缓存，缓存会多很多垃圾字段 -->
+  <Tabs v-model:active-key="reply.type" type="card" @change="clear">
     <!-- 类型 1：文本 -->
     <Tabs.TabPane :key="ReplyType.Text">
       <template #tab>
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-image.vue b/apps/web-antd/src/views/mp/modules/reply/tab-image.vue
similarity index 93%
rename from apps/web-antd/src/views/mp/modules/wx-reply/tab-image.vue
rename to apps/web-antd/src/views/mp/modules/reply/tab-image.vue
index b629f0902c..37e31950f7 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/tab-image.vue
+++ b/apps/web-antd/src/views/mp/modules/reply/tab-image.vue
@@ -11,7 +11,7 @@ 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 { MaterialSelect } from '#/views/mp/modules';
 
 const props = defineProps<{
   modelValue: Reply;
@@ -113,7 +113,7 @@ function selectMaterial(item: any) {
           width="90%"
           destroy-on-close
         >
-          <WxMaterialSelect
+          <MaterialSelect
             type="image"
             :account-id="reply.accountId"
             @select-material="selectMaterial"
@@ -131,11 +131,9 @@ function selectMaterial(item: any) {
           :file-list="fileList"
           :data="uploadData"
           :before-upload="beforeImageUpload"
-          @change="
-            (info) => {
-              if (info.file.status === 'done') {
-                onUploadSuccess(info.file.response || info.file);
-              }
+          @success="
+            (response: any) => {
+              onUploadSuccess(response);
             }
           "
         >
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-music.vue b/apps/web-antd/src/views/mp/modules/reply/tab-music.vue
similarity index 92%
rename from apps/web-antd/src/views/mp/modules/wx-reply/tab-music.vue
rename to apps/web-antd/src/views/mp/modules/reply/tab-music.vue
index 5e9347b715..39ac16ef33 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/tab-music.vue
+++ b/apps/web-antd/src/views/mp/modules/reply/tab-music.vue
@@ -19,7 +19,7 @@ import {
 } from 'ant-design-vue';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select';
+import { MaterialSelect } from '#/views/mp/modules';
 
 const props = defineProps<{
   modelValue: Reply;
@@ -98,11 +98,9 @@ function selectMaterial(item: any) {
                   :file-list="fileList"
                   :data="uploadData"
                   :before-upload="beforeImageUpload"
-                  @change="
-                    (info) => {
-                      if (info.file.status === 'done') {
-                        onUploadSuccess(info.file.response || info.file);
-                      }
+                  @success="
+                    (response: any) => {
+                      onUploadSuccess(response);
                     }
                   "
                 >
@@ -123,7 +121,7 @@ function selectMaterial(item: any) {
           width="80%"
           destroy-on-close
         >
-          <WxMaterialSelect
+          <MaterialSelect
             type="image"
             :account-id="reply.accountId"
             @select-material="selectMaterial"
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-news.vue b/apps/web-antd/src/views/mp/modules/reply/tab-news.vue
similarity index 89%
rename from apps/web-antd/src/views/mp/modules/wx-reply/tab-news.vue
rename to apps/web-antd/src/views/mp/modules/reply/tab-news.vue
index fbc4eed644..0487b8b0d3 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/tab-news.vue
+++ b/apps/web-antd/src/views/mp/modules/reply/tab-news.vue
@@ -7,10 +7,9 @@ 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 { MaterialSelect, News } from '#/views/mp/modules';
 
-import { NewsType } from './types';
+import { NewsType } from '../material-select/types';
 
 const props = defineProps<{
   modelValue: Reply;
@@ -45,7 +44,7 @@ function onDelete() {
         class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
         v-if="reply.articles && reply.articles.length > 0"
       >
-        <WxNews :articles="reply.articles" />
+        <News :articles="reply.articles" />
         <Col class="pt-[10px] text-center">
           <Button type="primary" danger shape="circle" @click="onDelete">
             <IconifyIcon icon="ep:delete" />
@@ -73,7 +72,7 @@ function onDelete() {
         width="90%"
         destroy-on-close
       >
-        <WxMaterialSelect
+        <MaterialSelect
           type="news"
           :account-id="reply.accountId"
           :news-type="newsType"
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-text.vue b/apps/web-antd/src/views/mp/modules/reply/tab-text.vue
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/wx-reply/tab-text.vue
rename to apps/web-antd/src/views/mp/modules/reply/tab-text.vue
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-video.vue b/apps/web-antd/src/views/mp/modules/reply/tab-video.vue
similarity index 95%
rename from apps/web-antd/src/views/mp/modules/wx-reply/tab-video.vue
rename to apps/web-antd/src/views/mp/modules/reply/tab-video.vue
index 579a819c1c..ed2b0edf2f 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/tab-video.vue
+++ b/apps/web-antd/src/views/mp/modules/reply/tab-video.vue
@@ -20,8 +20,7 @@ import {
 } 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';
+import { MaterialSelect, VideoPlayer } from '#/views/mp/modules';
 
 const props = defineProps<{
   modelValue: Reply;
@@ -156,7 +155,7 @@ function selectMaterial(item: any) {
         placeholder="请输入描述"
       />
       <Row class="w-full pt-[10px] text-center" justify="center">
-        <WxVideoPlayer v-if="reply.url" :url="reply.url" />
+        <VideoPlayer v-if="reply.url" :url="reply.url" />
       </Row>
       <Col class="w-full">
         <Row class="text-center" align="middle">
@@ -171,7 +170,7 @@ function selectMaterial(item: any) {
               width="90%"
               destroy-on-close
             >
-              <WxMaterialSelect
+              <MaterialSelect
                 type="video"
                 :account-id="reply.accountId"
                 @select-material="selectMaterial"
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/tab-voice.vue b/apps/web-antd/src/views/mp/modules/reply/tab-voice.vue
similarity index 90%
rename from apps/web-antd/src/views/mp/modules/wx-reply/tab-voice.vue
rename to apps/web-antd/src/views/mp/modules/reply/tab-voice.vue
index 420b56b27c..b5e6bb9cb7 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/tab-voice.vue
+++ b/apps/web-antd/src/views/mp/modules/reply/tab-voice.vue
@@ -11,8 +11,7 @@ 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';
+import { MaterialSelect, VoicePlayer } from '#/views/mp/modules';
 
 const props = defineProps<{
   modelValue: Reply;
@@ -89,7 +88,7 @@ function selectMaterial(item: Reply) {
         {{ reply.name }}
       </p>
       <Row class="w-full pt-[10px] text-center" justify="center">
-        <WxVoicePlayer :url="reply.url" />
+        <VoicePlayer :url="reply.url" />
       </Row>
       <Row class="w-full pt-[10px] text-center" justify="center">
         <Button type="primary" danger shape="circle" @click="onDelete">
@@ -112,7 +111,7 @@ function selectMaterial(item: Reply) {
           width="90%"
           destroy-on-close
         >
-          <WxMaterialSelect
+          <MaterialSelect
             type="voice"
             :account-id="reply.accountId"
             @select-material="selectMaterial"
@@ -130,11 +129,9 @@ function selectMaterial(item: Reply) {
           :file-list="fileList"
           :data="uploadData"
           :before-upload="beforeVoiceUpload"
-          @change="
-            (info) => {
-              if (info.file.status === 'done') {
-                onUploadSuccess(info.file.response || info.file);
-              }
+          @success="
+            (response: any) => {
+              onUploadSuccess(response);
             }
           "
         >
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/types.ts b/apps/web-antd/src/views/mp/modules/reply/types.ts
similarity index 90%
rename from apps/web-antd/src/views/mp/modules/wx-reply/types.ts
rename to apps/web-antd/src/views/mp/modules/reply/types.ts
index 67571ef592..cecfba786f 100644
--- a/apps/web-antd/src/views/mp/modules/wx-reply/types.ts
+++ b/apps/web-antd/src/views/mp/modules/reply/types.ts
@@ -30,11 +30,6 @@ interface _Reply {
 
 type Reply = _Reply; // Partial<_Reply>
 
-enum NewsType {
-  Draft = '2',
-  Published = '1',
-}
-
 /** 利用旧的reply[accountId, type]初始化新的Reply */
 const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
   return {
@@ -55,4 +50,4 @@ const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
   };
 };
 
-export { createEmptyReply, NewsType, type Reply, ReplyType };
+export { createEmptyReply, type Reply, ReplyType };
diff --git a/apps/web-antd/src/views/mp/modules/wx-video-play/wx-video-play.vue b/apps/web-antd/src/views/mp/modules/video-play/video-play.vue
similarity index 90%
rename from apps/web-antd/src/views/mp/modules/wx-video-play/wx-video-play.vue
rename to apps/web-antd/src/views/mp/modules/video-play/video-play.vue
index dc1c1d6429..0174daec60 100644
--- a/apps/web-antd/src/views/mp/modules/wx-video-play/wx-video-play.vue
+++ b/apps/web-antd/src/views/mp/modules/video-play/video-play.vue
@@ -20,7 +20,7 @@ import { Modal } from 'ant-design-vue';
 
 import 'video.js/dist/video-js.css';
 
-defineOptions({ name: 'WxVideoPlayer' });
+defineOptions({ name: 'VideoPlayer' });
 
 const props = defineProps({
   url: {
@@ -29,11 +29,11 @@ const props = defineProps({
   },
 });
 
-// TODO @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢
-const dialogVideo = ref(false);
+const dialogVisible = ref(false);
 
+// DONE @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢
 const playVideo = () => {
-  dialogVideo.value = true;
+  dialogVisible.value = true;
 };
 </script>
 
@@ -47,13 +47,12 @@ const playVideo = () => {
 
     <!-- 弹窗播放 -->
     <Modal
-      v-model:open="dialogVideo"
+      v-model:open="dialogVisible"
       title="视频播放"
-      width="900px"
+      width="45%"
       :footer="null"
     >
       <VideoPlayer
-        v-if="dialogVideo"
         class="video-player vjs-big-play-centered"
         :src="props.url"
         poster=""
diff --git a/apps/web-antd/src/views/mp/modules/wx-voice-play/wx-voice-play.vue b/apps/web-antd/src/views/mp/modules/voice-play/voice-play.vue
similarity index 83%
rename from apps/web-antd/src/views/mp/modules/wx-voice-play/wx-voice-play.vue
rename to apps/web-antd/src/views/mp/modules/voice-play/voice-play.vue
index 14a582b7e0..43c4d95439 100644
--- a/apps/web-antd/src/views/mp/modules/wx-voice-play/wx-voice-play.vue
+++ b/apps/web-antd/src/views/mp/modules/voice-play/voice-play.vue
@@ -18,7 +18,7 @@ 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' });
+defineOptions({ name: 'VoicePlayer' });
 
 const props = defineProps({
   url: {
@@ -80,31 +80,17 @@ function amrStop() {
 </script>
 
 <template>
-  <div class="wx-voice-div" @click="playVoice">
+  <!-- DONE @hw：tindwind 替代 -->
+  <div
+    class="flex h-[50px] w-[120px] cursor-pointer items-center justify-center rounded-[10px] bg-[#eaeaea] p-[5px]"
+    @click="playVoice"
+  >
     <IconifyIcon v-if="playing !== true" icon="lucide:circle-play" :size="32" />
     <IconifyIcon v-else icon="lucide:circle-pause" :size="32" />
-    <span class="amr-duration" v-if="duration">{{ duration }} 秒</span>
+    <span v-if="duration" class="ml-[5px] text-[11px]">{{ duration }} 秒</span>
     <div v-if="content">
       <Tag color="success" size="small">语音识别</Tag>
       {{ content }}
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-/** TODO @hw：tindwind 替代 */
-.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>
diff --git a/apps/web-antd/src/views/mp/modules/wx-account-select/index.ts b/apps/web-antd/src/views/mp/modules/wx-account-select/index.ts
deleted file mode 100644
index 148f26872d..0000000000
--- a/apps/web-antd/src/views/mp/modules/wx-account-select/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// TODO @hw：1）要不统一在 web-antd/src/views/mp/modules 下，搞个 index.ts 去 import 所有；2）这个包名，需要改成 componentns，不是 modules 哈；3）wx 前缀都可以去掉；例如说 account-select.vue
-export { default as WxAccountSelect } from './wx-account-select.vue';
diff --git a/apps/web-antd/src/views/mp/modules/wx-account-select/wx-account-select.vue b/apps/web-antd/src/views/mp/modules/wx-account-select/wx-account-select.vue
deleted file mode 100644
index d4f66e74bf..0000000000
--- a/apps/web-antd/src/views/mp/modules/wx-account-select/wx-account-select.vue
+++ /dev/null
@@ -1,123 +0,0 @@
-<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';
-
-// TODO @hw：【可讨论】如果这个组件，有办法调整下，让接入的 yudao-ui-admin-vben-v5/apps/web-antd/src/views/mp/draft/index.vue 判断简单点，也可以。
-
-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="请选择公众号" class="w-full">
-    <SelectOption v-for="item in accountList" :key="item.id" :value="item.id">
-      {{ item.name }}
-    </SelectOption>
-  </Select>
-</template>
diff --git a/apps/web-antd/src/views/mp/modules/wx-location/index.ts b/apps/web-antd/src/views/mp/modules/wx-location/index.ts
deleted file mode 100644
index 029a666a9f..0000000000
--- a/apps/web-antd/src/views/mp/modules/wx-location/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as WxLocation } from './wx-location.vue';
diff --git a/apps/web-antd/src/views/mp/modules/wx-material-select/index.ts b/apps/web-antd/src/views/mp/modules/wx-material-select/index.ts
deleted file mode 100644
index 27cf66886c..0000000000
--- a/apps/web-antd/src/views/mp/modules/wx-material-select/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './types';
-
-export { default as WxMaterialSelect } from './wx-material-select.vue';
diff --git a/apps/web-antd/src/views/mp/modules/wx-material-select/types.ts b/apps/web-antd/src/views/mp/modules/wx-material-select/types.ts
deleted file mode 100644
index 2e4f8a8f59..0000000000
--- a/apps/web-antd/src/views/mp/modules/wx-material-select/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export enum NewsType {
-  Draft = '2',
-  Published = '1',
-}
-
-// TODO @hw：应该要用到？在 material-select.vue 里？
-export enum MaterialType {
-  Image = 'image',
-  News = 'news',
-  Video = 'video',
-  Voice = 'voice',
-}
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/card.scss b/apps/web-antd/src/views/mp/modules/wx-msg/card.scss
deleted file mode 100644
index 58fde79fd9..0000000000
--- a/apps/web-antd/src/views/mp/modules/wx-msg/card.scss
+++ /dev/null
@@ -1,116 +0,0 @@
-.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;
-}
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/comment.scss b/apps/web-antd/src/views/mp/modules/wx-msg/comment.scss
deleted file mode 100644
index 219e2e5d45..0000000000
--- a/apps/web-antd/src/views/mp/modules/wx-msg/comment.scss
+++ /dev/null
@@ -1,109 +0,0 @@
-/* 来自 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;
-  }
-}
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/index.ts b/apps/web-antd/src/views/mp/modules/wx-msg/index.ts
deleted file mode 100644
index 42150e8a06..0000000000
--- a/apps/web-antd/src/views/mp/modules/wx-msg/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export * from './types';
-
-export { default as WxMsg } from './wx-msg.vue';
diff --git a/apps/web-antd/src/views/mp/modules/wx-msg/wx-msg.vue b/apps/web-antd/src/views/mp/modules/wx-msg/wx-msg.vue
deleted file mode 100644
index a08347caf1..0000000000
--- a/apps/web-antd/src/views/mp/modules/wx-msg/wx-msg.vue
+++ /dev/null
@@ -1,197 +0,0 @@
-<!--
-  - 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 { ReplyType, WxReplySelect } from '#/views/mp/modules/wx-reply';
-
-import MsgList from './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="bg-background ml-2 mr-2 h-12 overflow-auto" ref="msgDivRef">
-        <!-- 加载更多 -->
-        <div v-if="!loading">
-          <div
-            class="cursor-pointer py-5 text-center"
-            v-if="hasMore"
-            @click="loadMore"
-          >
-            <span class="text-foreground">点击加载更多</span>
-          </div>
-          <div class="py-5 text-center" v-if="!hasMore">
-            <span class="text-foreground">没有更多了</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>
diff --git a/apps/web-antd/src/views/mp/modules/wx-music/index.ts b/apps/web-antd/src/views/mp/modules/wx-music/index.ts
deleted file mode 100644
index f0bdd7753b..0000000000
--- a/apps/web-antd/src/views/mp/modules/wx-music/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as WxMusic } from './wx-music.vue';
diff --git a/apps/web-antd/src/views/mp/modules/wx-news/index.ts b/apps/web-antd/src/views/mp/modules/wx-news/index.ts
deleted file mode 100644
index 13d17905d3..0000000000
--- a/apps/web-antd/src/views/mp/modules/wx-news/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as WxNews } from './wx-news.vue';
diff --git a/apps/web-antd/src/views/mp/modules/wx-reply/index.ts b/apps/web-antd/src/views/mp/modules/wx-reply/index.ts
deleted file mode 100644
index 9e0a3165f4..0000000000
--- a/apps/web-antd/src/views/mp/modules/wx-reply/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './types';
-export { default as WxReplySelect } from './wx-reply.vue';
diff --git a/apps/web-antd/src/views/mp/modules/wx-video-play/index.ts b/apps/web-antd/src/views/mp/modules/wx-video-play/index.ts
deleted file mode 100644
index 5cda5edeb9..0000000000
--- a/apps/web-antd/src/views/mp/modules/wx-video-play/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as WxVideoPlayer } from './wx-video-play.vue';
diff --git a/apps/web-antd/src/views/mp/modules/wx-voice-play/index.ts b/apps/web-antd/src/views/mp/modules/wx-voice-play/index.ts
deleted file mode 100644
index 0ecc27eadc..0000000000
--- a/apps/web-antd/src/views/mp/modules/wx-voice-play/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as WxVoicePlayer } from './wx-voice-play.vue';
diff --git a/apps/web-antd/src/views/mp/tag/data.ts b/apps/web-antd/src/views/mp/tag/data.ts
index e8efd6fba2..a49cbb330d 100644
--- a/apps/web-antd/src/views/mp/tag/data.ts
+++ b/apps/web-antd/src/views/mp/tag/data.ts
@@ -41,6 +41,7 @@ export function useFormSchema(): VbenFormSchema[] {
 }
 
 /** 列表的搜索表单 */
+// TODO @YunaiV 这种方式获取刷新浏览器会导致空白
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
-- 
Gitee


From cdae277868c654a1b1084b07a238cad36d40f20b Mon Sep 17 00:00:00 2001
From: hw <huangwen@yuanshengcloud.com>
Date: Thu, 13 Nov 2025 18:35:10 +0800
Subject: [PATCH 2/4] =?UTF-8?q?fix:=20ele=E7=BB=9F=E4=B8=80=E9=A3=8E?=
 =?UTF-8?q?=E6=A0=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/src/views/mp/autoReply/data.ts  |   2 +-
 .../views/mp/autoReply/modules/content.vue    |   2 +-
 .../src/views/mp/autoReply/modules/form.vue   |   4 +-
 .../views/mp/{modules => components}/index.ts |   0
 .../location/location.vue                     |   0
 .../material-select/material-select.vue       |   2 +-
 .../material-select/types.ts                  |   0
 .../{modules => components}/msg/msg-event.vue |   0
 .../{modules => components}/msg/msg-list.vue  |   0
 .../mp/{modules => components}/msg/msg.vue    |   2 +-
 .../mp/{modules => components}/msg/types.ts   |   0
 .../{modules => components}/music/music.vue   |   0
 .../mp/{modules => components}/news/news.vue  |   2 +-
 .../{modules => components}/reply/reply.vue   |   2 +-
 .../reply/tab-image.vue                       |   2 +-
 .../reply/tab-music.vue                       |   2 +-
 .../reply/tab-news.vue                        |   2 +-
 .../reply/tab-text.vue                        |   0
 .../reply/tab-video.vue                       |   2 +-
 .../reply/tab-voice.vue                       |   2 +-
 .../mp/{modules => components}/reply/types.ts |   0
 .../video-play/video-play.vue                 |   0
 .../voice-play/voice-play.vue                 |   0
 apps/web-antd/src/views/mp/draft/data.ts      |  12 +-
 apps/web-antd/src/views/mp/draft/index.vue    |   4 +
 .../views/mp/draft/modules/cover-select.vue   |   2 +-
 .../views/mp/draft/modules/draft-table.vue    |   2 +-
 .../src/views/mp/menu/modules/editor.vue      |   2 +-
 apps/web-ele/.env.development                 |   6 +-
 apps/web-ele/src/views/mp/autoReply/data.ts   | 100 +++++-
 apps/web-ele/src/views/mp/autoReply/index.vue | 247 +++++++-------
 .../views/mp/autoReply/modules/ReplyForm.vue  | 128 --------
 .../modules/{ReplyTable.vue => content.vue}   |  17 +-
 .../src/views/mp/autoReply/modules/form.vue   | 153 +++++----
 .../account-select/account-select.vue}        |  10 +-
 .../mp/components/account-select/index.ts     |   1 +
 apps/web-ele/src/views/mp/components/index.ts |  23 ++
 .../src/views/mp/components/location/index.ts |   1 +
 .../location/location.vue}                    |  24 +-
 .../material-select}/index.ts                 |   2 +-
 .../material-select/material-select.vue}      | 147 +++++----
 .../material-select}/types.ts                 |   0
 .../wx-msg => components/msg}/card.scss       |   0
 .../wx-msg => components/msg}/comment.scss    |   0
 .../wx-msg => components/msg}/index.ts        |   2 +-
 .../modules => components/msg}/msg-event.vue  |  26 +-
 .../modules => components/msg}/msg-list.vue   |   0
 .../wx-msg/modules => components/msg}/msg.vue |  20 +-
 .../wx-msg => components/msg}/types.ts        |   0
 .../src/views/mp/components/music/index.ts    |   1 +
 .../main.vue => components/music/music.vue}   |   4 +-
 .../src/views/mp/components/news/index.ts     |   1 +
 .../main.vue => components/news/news.vue}     |   8 +-
 .../wx-reply => components/reply}/index.ts    |   5 +-
 .../main.vue => components/reply/reply.vue}   |  63 ++--
 .../reply}/tab-image.vue                      |   4 +-
 .../reply}/tab-music.vue                      |   4 +-
 .../modules => components/reply}/tab-news.vue |  10 +-
 .../modules => components/reply}/tab-text.vue |   0
 .../reply}/tab-video.vue                      |   8 +-
 .../reply}/tab-voice.vue                      |   8 +-
 .../modules => components/reply}/types.ts     |   7 +-
 .../views/mp/components/video-play/index.ts   |   1 +
 .../video-play/video-play.vue}                |  13 +-
 .../views/mp/components/voice-play/index.ts   |   1 +
 .../voice-play/voice-play.vue}                |   8 +-
 apps/web-ele/src/views/mp/draft/data.ts       |   4 +-
 .../views/mp/draft/modules/cover-select.vue   |   4 +-
 .../views/mp/draft/modules/draft-table.vue    |   4 +-
 apps/web-ele/src/views/mp/menu/data.ts        |  20 ++
 apps/web-ele/src/views/mp/menu/index.vue      | 208 ++++++------
 .../src/views/mp/menu/modules/menu-editor.vue | 305 ++++++++----------
 .../views/mp/menu/modules/menu-previewer.vue  | 104 ++----
 .../mp/modules/wx-account-select/index.ts     |   1 -
 .../src/views/mp/modules/wx-location/index.ts |   1 -
 .../src/views/mp/modules/wx-msg/main.vue      | 202 ------------
 .../src/views/mp/modules/wx-music/index.ts    |   1 -
 .../src/views/mp/modules/wx-news/index.ts     |   1 -
 .../views/mp/modules/wx-video-play/index.ts   |   1 -
 .../views/mp/modules/wx-voice-play/index.ts   |   1 -
 80 files changed, 811 insertions(+), 1147 deletions(-)
 rename apps/web-antd/src/views/mp/{modules => components}/index.ts (100%)
 rename apps/web-antd/src/views/mp/{modules => components}/location/location.vue (100%)
 rename apps/web-antd/src/views/mp/{modules => components}/material-select/material-select.vue (99%)
 rename apps/web-antd/src/views/mp/{modules => components}/material-select/types.ts (100%)
 rename apps/web-antd/src/views/mp/{modules => components}/msg/msg-event.vue (100%)
 rename apps/web-antd/src/views/mp/{modules => components}/msg/msg-list.vue (100%)
 rename apps/web-antd/src/views/mp/{modules => components}/msg/msg.vue (98%)
 rename apps/web-antd/src/views/mp/{modules => components}/msg/types.ts (100%)
 rename apps/web-antd/src/views/mp/{modules => components}/music/music.vue (100%)
 rename apps/web-antd/src/views/mp/{modules => components}/news/news.vue (92%)
 rename apps/web-antd/src/views/mp/{modules => components}/reply/reply.vue (98%)
 rename apps/web-antd/src/views/mp/{modules => components}/reply/tab-image.vue (98%)
 rename apps/web-antd/src/views/mp/{modules => components}/reply/tab-music.vue (98%)
 rename apps/web-antd/src/views/mp/{modules => components}/reply/tab-news.vue (97%)
 rename apps/web-antd/src/views/mp/{modules => components}/reply/tab-text.vue (100%)
 rename apps/web-antd/src/views/mp/{modules => components}/reply/tab-video.vue (98%)
 rename apps/web-antd/src/views/mp/{modules => components}/reply/tab-voice.vue (98%)
 rename apps/web-antd/src/views/mp/{modules => components}/reply/types.ts (100%)
 rename apps/web-antd/src/views/mp/{modules => components}/video-play/video-play.vue (100%)
 rename apps/web-antd/src/views/mp/{modules => components}/voice-play/voice-play.vue (100%)
 delete mode 100644 apps/web-ele/src/views/mp/autoReply/modules/ReplyForm.vue
 rename apps/web-ele/src/views/mp/autoReply/modules/{ReplyTable.vue => content.vue} (74%)
 rename apps/web-ele/src/views/mp/{modules/wx-account-select/main.vue => components/account-select/account-select.vue} (95%)
 create mode 100644 apps/web-ele/src/views/mp/components/account-select/index.ts
 create mode 100644 apps/web-ele/src/views/mp/components/index.ts
 create mode 100644 apps/web-ele/src/views/mp/components/location/index.ts
 rename apps/web-ele/src/views/mp/{modules/wx-location/main.vue => components/location/location.vue} (79%)
 rename apps/web-ele/src/views/mp/{modules/wx-material-select => components/material-select}/index.ts (51%)
 rename apps/web-ele/src/views/mp/{modules/wx-material-select/main.vue => components/material-select/material-select.vue} (61%)
 rename apps/web-ele/src/views/mp/{modules/wx-material-select => components/material-select}/types.ts (100%)
 rename apps/web-ele/src/views/mp/{modules/wx-msg => components/msg}/card.scss (100%)
 rename apps/web-ele/src/views/mp/{modules/wx-msg => components/msg}/comment.scss (100%)
 rename apps/web-ele/src/views/mp/{modules/wx-msg => components/msg}/index.ts (48%)
 rename apps/web-ele/src/views/mp/{modules/wx-msg/modules => components/msg}/msg-event.vue (66%)
 rename apps/web-ele/src/views/mp/{modules/wx-msg/modules => components/msg}/msg-list.vue (100%)
 rename apps/web-ele/src/views/mp/{modules/wx-msg/modules => components/msg}/msg.vue (78%)
 rename apps/web-ele/src/views/mp/{modules/wx-msg => components/msg}/types.ts (100%)
 create mode 100644 apps/web-ele/src/views/mp/components/music/index.ts
 rename apps/web-ele/src/views/mp/{modules/wx-music/main.vue => components/music/music.vue} (94%)
 create mode 100644 apps/web-ele/src/views/mp/components/news/index.ts
 rename apps/web-ele/src/views/mp/{modules/wx-news/main.vue => components/news/news.vue} (95%)
 rename apps/web-ele/src/views/mp/{modules/wx-reply => components/reply}/index.ts (42%)
 rename apps/web-ele/src/views/mp/{modules/wx-reply/main.vue => components/reply/reply.vue} (63%)
 rename apps/web-ele/src/views/mp/{modules/wx-reply/modules => components/reply}/tab-image.vue (97%)
 rename apps/web-ele/src/views/mp/{modules/wx-reply/modules => components/reply}/tab-music.vue (97%)
 rename apps/web-ele/src/views/mp/{modules/wx-reply/modules => components/reply}/tab-news.vue (88%)
 rename apps/web-ele/src/views/mp/{modules/wx-reply/modules => components/reply}/tab-text.vue (100%)
 rename apps/web-ele/src/views/mp/{modules/wx-reply/modules => components/reply}/tab-video.vue (93%)
 rename apps/web-ele/src/views/mp/{modules/wx-reply/modules => components/reply}/tab-voice.vue (94%)
 rename apps/web-ele/src/views/mp/{modules/wx-reply/modules => components/reply}/types.ts (90%)
 create mode 100644 apps/web-ele/src/views/mp/components/video-play/index.ts
 rename apps/web-ele/src/views/mp/{modules/wx-video-play/main.vue => components/video-play/video-play.vue} (85%)
 create mode 100644 apps/web-ele/src/views/mp/components/voice-play/index.ts
 rename apps/web-ele/src/views/mp/{modules/wx-voice-play/main.vue => components/voice-play/voice-play.vue} (92%)
 delete mode 100644 apps/web-ele/src/views/mp/modules/wx-account-select/index.ts
 delete mode 100644 apps/web-ele/src/views/mp/modules/wx-location/index.ts
 delete mode 100644 apps/web-ele/src/views/mp/modules/wx-msg/main.vue
 delete mode 100644 apps/web-ele/src/views/mp/modules/wx-music/index.ts
 delete mode 100644 apps/web-ele/src/views/mp/modules/wx-news/index.ts
 delete mode 100644 apps/web-ele/src/views/mp/modules/wx-video-play/index.ts
 delete mode 100644 apps/web-ele/src/views/mp/modules/wx-voice-play/index.ts

diff --git a/apps/web-antd/src/views/mp/autoReply/data.ts b/apps/web-antd/src/views/mp/autoReply/data.ts
index 8056cd2c4d..ce9af6e713 100644
--- a/apps/web-antd/src/views/mp/autoReply/data.ts
+++ b/apps/web-antd/src/views/mp/autoReply/data.ts
@@ -8,7 +8,7 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { getSimpleAccountList } from '#/api/mp/account';
-import { ReplySelect } from '#/views/mp/modules';
+import { ReplySelect } from '#/views/mp/components';
 
 import { MsgType } from './types';
 
diff --git a/apps/web-antd/src/views/mp/autoReply/modules/content.vue b/apps/web-antd/src/views/mp/autoReply/modules/content.vue
index 1d2a5187be..41a997ceec 100644
--- a/apps/web-antd/src/views/mp/autoReply/modules/content.vue
+++ b/apps/web-antd/src/views/mp/autoReply/modules/content.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { Music, News, VideoPlayer, VoicePlayer } from '#/views/mp/modules';
+import { Music, News, VideoPlayer, VoicePlayer } from '#/views/mp/components';
 // DONE @hw：迁移到 /apps/web-antd/src/views/mp/autoReply/modules 里；组件名可能要换一个，= = 之前写的不太好；类似 content.vue ？本质是内容~
 defineOptions({ name: 'ReplyContentCell' });
 
diff --git a/apps/web-antd/src/views/mp/autoReply/modules/form.vue b/apps/web-antd/src/views/mp/autoReply/modules/form.vue
index 2e8c23c8b0..bc9fc9f659 100644
--- a/apps/web-antd/src/views/mp/autoReply/modules/form.vue
+++ b/apps/web-antd/src/views/mp/autoReply/modules/form.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Reply } from '#/views/mp/modules/reply/types';
+import type { Reply } from '#/views/mp/components/reply/types';
 
 import { computed, nextTick, ref } from 'vue';
 
@@ -10,7 +10,7 @@ import { message } from 'ant-design-vue';
 import { useVbenForm } from '#/adapter/form';
 import { createAutoReply, updateAutoReply } from '#/api/mp/autoReply';
 import { $t } from '#/locales';
-import { ReplyType } from '#/views/mp/modules/reply/types';
+import { ReplyType } from '#/views/mp/components/reply/types';
 
 import { useFormSchema } from '../data';
 import { MsgType } from '../types';
diff --git a/apps/web-antd/src/views/mp/modules/index.ts b/apps/web-antd/src/views/mp/components/index.ts
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/index.ts
rename to apps/web-antd/src/views/mp/components/index.ts
diff --git a/apps/web-antd/src/views/mp/modules/location/location.vue b/apps/web-antd/src/views/mp/components/location/location.vue
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/location/location.vue
rename to apps/web-antd/src/views/mp/components/location/location.vue
diff --git a/apps/web-antd/src/views/mp/modules/material-select/material-select.vue b/apps/web-antd/src/views/mp/components/material-select/material-select.vue
similarity index 99%
rename from apps/web-antd/src/views/mp/modules/material-select/material-select.vue
rename to apps/web-antd/src/views/mp/components/material-select/material-select.vue
index bf1c2346d7..ffe6cc0243 100644
--- a/apps/web-antd/src/views/mp/modules/material-select/material-select.vue
+++ b/apps/web-antd/src/views/mp/components/material-select/material-select.vue
@@ -12,7 +12,7 @@ import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getDraftPage } from '#/api/mp/draft';
 import { getFreePublishPage } from '#/api/mp/freePublish';
 import { getMaterialPage } from '#/api/mp/material';
-import { News, VideoPlayer, VoicePlayer } from '#/views/mp/modules/index';
+import { News, VideoPlayer, VoicePlayer } from '#/views/mp/components/index';
 
 import { NewsType } from './types';
 
diff --git a/apps/web-antd/src/views/mp/modules/material-select/types.ts b/apps/web-antd/src/views/mp/components/material-select/types.ts
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/material-select/types.ts
rename to apps/web-antd/src/views/mp/components/material-select/types.ts
diff --git a/apps/web-antd/src/views/mp/modules/msg/msg-event.vue b/apps/web-antd/src/views/mp/components/msg/msg-event.vue
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/msg/msg-event.vue
rename to apps/web-antd/src/views/mp/components/msg/msg-event.vue
diff --git a/apps/web-antd/src/views/mp/modules/msg/msg-list.vue b/apps/web-antd/src/views/mp/components/msg/msg-list.vue
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/msg/msg-list.vue
rename to apps/web-antd/src/views/mp/components/msg/msg-list.vue
diff --git a/apps/web-antd/src/views/mp/modules/msg/msg.vue b/apps/web-antd/src/views/mp/components/msg/msg.vue
similarity index 98%
rename from apps/web-antd/src/views/mp/modules/msg/msg.vue
rename to apps/web-antd/src/views/mp/components/msg/msg.vue
index ccfeb4addc..394e2560d5 100644
--- a/apps/web-antd/src/views/mp/modules/msg/msg.vue
+++ b/apps/web-antd/src/views/mp/components/msg/msg.vue
@@ -9,7 +9,7 @@ import {
   News,
   VideoPlayer,
   VoicePlayer,
-} from '#/views/mp/modules';
+} from '#/views/mp/components';
 
 import MsgEvent from './msg-event.vue';
 import { MsgType } from './types';
diff --git a/apps/web-antd/src/views/mp/modules/msg/types.ts b/apps/web-antd/src/views/mp/components/msg/types.ts
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/msg/types.ts
rename to apps/web-antd/src/views/mp/components/msg/types.ts
diff --git a/apps/web-antd/src/views/mp/modules/music/music.vue b/apps/web-antd/src/views/mp/components/music/music.vue
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/music/music.vue
rename to apps/web-antd/src/views/mp/components/music/music.vue
diff --git a/apps/web-antd/src/views/mp/modules/news/news.vue b/apps/web-antd/src/views/mp/components/news/news.vue
similarity index 92%
rename from apps/web-antd/src/views/mp/modules/news/news.vue
rename to apps/web-antd/src/views/mp/components/news/news.vue
index 3ca3c83246..66405126d8 100644
--- a/apps/web-antd/src/views/mp/modules/news/news.vue
+++ b/apps/web-antd/src/views/mp/components/news/news.vue
@@ -38,7 +38,7 @@ defineExpose({
               :preview="false"
             />
             <div
-              class="absolute bottom-0 left-0 inline-block w-[98%] whitespace-normal bg-black p-[1%] text-xs text-white opacity-65"
+              class="absolute bottom-0 left-0 inline-block w-[100%] whitespace-normal bg-black p-[1%] text-xs text-white opacity-65"
             >
               <span>{{ article.title }}</span>
             </div>
diff --git a/apps/web-antd/src/views/mp/modules/reply/reply.vue b/apps/web-antd/src/views/mp/components/reply/reply.vue
similarity index 98%
rename from apps/web-antd/src/views/mp/modules/reply/reply.vue
rename to apps/web-antd/src/views/mp/components/reply/reply.vue
index 233487ffe2..5b4cbe53d4 100644
--- a/apps/web-antd/src/views/mp/modules/reply/reply.vue
+++ b/apps/web-antd/src/views/mp/components/reply/reply.vue
@@ -29,7 +29,7 @@ defineOptions({ name: 'ReplySelect' });
 
 const props = withDefaults(
   defineProps<{
-    modelValue: Reply;
+    modelValue: Reply | undefined;
     newsType?: NewsType;
   }>(),
   {
diff --git a/apps/web-antd/src/views/mp/modules/reply/tab-image.vue b/apps/web-antd/src/views/mp/components/reply/tab-image.vue
similarity index 98%
rename from apps/web-antd/src/views/mp/modules/reply/tab-image.vue
rename to apps/web-antd/src/views/mp/components/reply/tab-image.vue
index 37e31950f7..fdfc63a8ac 100644
--- a/apps/web-antd/src/views/mp/modules/reply/tab-image.vue
+++ b/apps/web-antd/src/views/mp/components/reply/tab-image.vue
@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
 import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import { MaterialSelect } from '#/views/mp/modules';
+import { MaterialSelect } from '#/views/mp/components';
 
 const props = defineProps<{
   modelValue: Reply;
diff --git a/apps/web-antd/src/views/mp/modules/reply/tab-music.vue b/apps/web-antd/src/views/mp/components/reply/tab-music.vue
similarity index 98%
rename from apps/web-antd/src/views/mp/modules/reply/tab-music.vue
rename to apps/web-antd/src/views/mp/components/reply/tab-music.vue
index 39ac16ef33..3e6d33ff89 100644
--- a/apps/web-antd/src/views/mp/modules/reply/tab-music.vue
+++ b/apps/web-antd/src/views/mp/components/reply/tab-music.vue
@@ -19,7 +19,7 @@ import {
 } from 'ant-design-vue';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import { MaterialSelect } from '#/views/mp/modules';
+import { MaterialSelect } from '#/views/mp/components';
 
 const props = defineProps<{
   modelValue: Reply;
diff --git a/apps/web-antd/src/views/mp/modules/reply/tab-news.vue b/apps/web-antd/src/views/mp/components/reply/tab-news.vue
similarity index 97%
rename from apps/web-antd/src/views/mp/modules/reply/tab-news.vue
rename to apps/web-antd/src/views/mp/components/reply/tab-news.vue
index 0487b8b0d3..b7710a245d 100644
--- a/apps/web-antd/src/views/mp/modules/reply/tab-news.vue
+++ b/apps/web-antd/src/views/mp/components/reply/tab-news.vue
@@ -7,7 +7,7 @@ import { IconifyIcon } from '@vben/icons';
 
 import { Button, Col, Modal, Row } from 'ant-design-vue';
 
-import { MaterialSelect, News } from '#/views/mp/modules';
+import { MaterialSelect, News } from '#/views/mp/components';
 
 import { NewsType } from '../material-select/types';
 
diff --git a/apps/web-antd/src/views/mp/modules/reply/tab-text.vue b/apps/web-antd/src/views/mp/components/reply/tab-text.vue
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/reply/tab-text.vue
rename to apps/web-antd/src/views/mp/components/reply/tab-text.vue
diff --git a/apps/web-antd/src/views/mp/modules/reply/tab-video.vue b/apps/web-antd/src/views/mp/components/reply/tab-video.vue
similarity index 98%
rename from apps/web-antd/src/views/mp/modules/reply/tab-video.vue
rename to apps/web-antd/src/views/mp/components/reply/tab-video.vue
index ed2b0edf2f..e25deea181 100644
--- a/apps/web-antd/src/views/mp/modules/reply/tab-video.vue
+++ b/apps/web-antd/src/views/mp/components/reply/tab-video.vue
@@ -20,7 +20,7 @@ import {
 } from 'ant-design-vue';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import { MaterialSelect, VideoPlayer } from '#/views/mp/modules';
+import { MaterialSelect, VideoPlayer } from '#/views/mp/components';
 
 const props = defineProps<{
   modelValue: Reply;
diff --git a/apps/web-antd/src/views/mp/modules/reply/tab-voice.vue b/apps/web-antd/src/views/mp/components/reply/tab-voice.vue
similarity index 98%
rename from apps/web-antd/src/views/mp/modules/reply/tab-voice.vue
rename to apps/web-antd/src/views/mp/components/reply/tab-voice.vue
index b5e6bb9cb7..e04ddf704b 100644
--- a/apps/web-antd/src/views/mp/modules/reply/tab-voice.vue
+++ b/apps/web-antd/src/views/mp/components/reply/tab-voice.vue
@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
 import { Button, Col, message, Modal, Row, Upload } from 'ant-design-vue';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import { MaterialSelect, VoicePlayer } from '#/views/mp/modules';
+import { MaterialSelect, VoicePlayer } from '#/views/mp/components';
 
 const props = defineProps<{
   modelValue: Reply;
diff --git a/apps/web-antd/src/views/mp/modules/reply/types.ts b/apps/web-antd/src/views/mp/components/reply/types.ts
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/reply/types.ts
rename to apps/web-antd/src/views/mp/components/reply/types.ts
diff --git a/apps/web-antd/src/views/mp/modules/video-play/video-play.vue b/apps/web-antd/src/views/mp/components/video-play/video-play.vue
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/video-play/video-play.vue
rename to apps/web-antd/src/views/mp/components/video-play/video-play.vue
diff --git a/apps/web-antd/src/views/mp/modules/voice-play/voice-play.vue b/apps/web-antd/src/views/mp/components/voice-play/voice-play.vue
similarity index 100%
rename from apps/web-antd/src/views/mp/modules/voice-play/voice-play.vue
rename to apps/web-antd/src/views/mp/components/voice-play/voice-play.vue
diff --git a/apps/web-antd/src/views/mp/draft/data.ts b/apps/web-antd/src/views/mp/draft/data.ts
index cd8bf01c19..7f9ace9a16 100644
--- a/apps/web-antd/src/views/mp/draft/data.ts
+++ b/apps/web-antd/src/views/mp/draft/data.ts
@@ -17,12 +17,12 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
       minWidth: 300,
       slots: { default: 'content' },
     },
-    {
-      field: 'updateTime',
-      title: '更新时间',
-      minWidth: 180,
-      formatter: 'formatDateTime', // TODO @YunaiV 接口返回数据不对，需要乘1000
-    },
+    // {
+    //   field: 'updateTime',
+    //   title: '更新时间',
+    //   minWidth: 180,
+    //   formatter: 'formatDateTime', // TODO @YunaiV 接口返回数据不对，需要乘1000
+    // },
     {
       title: '操作',
       width: 200,
diff --git a/apps/web-antd/src/views/mp/draft/index.vue b/apps/web-antd/src/views/mp/draft/index.vue
index bf28472d55..3544d3219b 100644
--- a/apps/web-antd/src/views/mp/draft/index.vue
+++ b/apps/web-antd/src/views/mp/draft/index.vue
@@ -230,6 +230,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
     .vxe-body--column {
       .vxe-cell {
         padding: 0;
+        height: auto !important;
+        img {
+          width: 300px !important;
+        }
       }
     }
   }
diff --git a/apps/web-antd/src/views/mp/draft/modules/cover-select.vue b/apps/web-antd/src/views/mp/draft/modules/cover-select.vue
index e28296bbde..bc3c32555b 100644
--- a/apps/web-antd/src/views/mp/draft/modules/cover-select.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/cover-select.vue
@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
 import { Button, Image, message, Modal, Upload } from 'ant-design-vue';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import { MaterialSelect } from '#/views/mp/modules';
+import { MaterialSelect } from '#/views/mp/components';
 
 const props = defineProps<{
   isFirst: boolean;
diff --git a/apps/web-antd/src/views/mp/draft/modules/draft-table.vue b/apps/web-antd/src/views/mp/draft/modules/draft-table.vue
index 1e995d8684..b78123c1cc 100644
--- a/apps/web-antd/src/views/mp/draft/modules/draft-table.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/draft-table.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Article } from './types';
 
-import { News } from '#/views/mp/modules';
+import { News } from '#/views/mp/components';
 
 defineOptions({ name: 'DraftTableCell' });
 
diff --git a/apps/web-antd/src/views/mp/menu/modules/editor.vue b/apps/web-antd/src/views/mp/menu/modules/editor.vue
index 564bd4f0c1..e7c833546f 100644
--- a/apps/web-antd/src/views/mp/menu/modules/editor.vue
+++ b/apps/web-antd/src/views/mp/menu/modules/editor.vue
@@ -14,7 +14,7 @@ import {
   Select,
 } from 'ant-design-vue';
 
-import { MaterialSelect, News, ReplySelect } from '#/views/mp/modules';
+import { MaterialSelect, News, ReplySelect } from '#/views/mp/components';
 
 import { menuOptions } from './types';
 
diff --git a/apps/web-ele/.env.development b/apps/web-ele/.env.development
index 77c13d3984..274ab994d1 100644
--- a/apps/web-ele/.env.development
+++ b/apps/web-ele/.env.development
@@ -4,9 +4,11 @@ VITE_PORT=5777
 VITE_BASE=/
 
 # 请求路径
-VITE_BASE_URL=http://127.0.0.1:48080
+VITE_BASE_URL=http://47.103.66.220:48080
+# VITE_BASE_URL=http://192.168.1.49:48080
 # 接口地址
-VITE_GLOB_API_URL=/admin-api
+VITE_GLOB_API_URL=http://47.103.66.220:48080/admin-api
+# VITE_GLOB_API_URL=http://192.168.1.49:48080/admin-api
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
 VITE_UPLOAD_TYPE=server
 # 是否打开 devtools，true 为打开，false 为关闭
diff --git a/apps/web-ele/src/views/mp/autoReply/data.ts b/apps/web-ele/src/views/mp/autoReply/data.ts
index 541ad2cdc4..4a9bf03ee1 100644
--- a/apps/web-ele/src/views/mp/autoReply/data.ts
+++ b/apps/web-ele/src/views/mp/autoReply/data.ts
@@ -1,19 +1,33 @@
 import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeGridPropTypes } from '#/adapter/vxe-table';
+import type { MpAccountApi } from '#/api/mp/account';
 
 import { markRaw } from 'vue';
 
 import { DICT_TYPE } from '@vben/constants';
+import { getDictObj, getDictOptions } from '@vben/hooks';
 
-import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
+import { getSimpleAccountList } from '#/api/mp/account';
+import { ReplySelect } from '#/views/mp/components';
 
 import { MsgType } from './modules/types';
 
+/** 关联数据 */
+let accountList: MpAccountApi.AccountSimple[] = [];
+getSimpleAccountList().then((data) => (accountList = data));
+
+const RequestMessageTypes = new Set([
+  'image',
+  'link',
+  'location',
+  'shortvideo',
+  'text',
+  'video',
+  'voice',
+]); // 允许选择的请求消息类型
 /** 获取表格列配置 */
-export function useGridColumns(
-  msgType: MsgType,
-): VxeTableGridOptions['columns'] {
-  const columns: VxeTableGridOptions['columns'] = [];
+export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
+  const columns: VxeGridPropTypes.Columns = [];
   // 请求消息类型列（仅消息回复显示）
   if (msgType === MsgType.Message) {
     columns.push({
@@ -51,10 +65,8 @@ export function useGridColumns(
       field: 'responseMessageType',
       title: '回复消息类型',
       minWidth: 120,
-      cellRender: {
-        name: 'CellDict',
-        props: { type: DICT_TYPE.MP_MESSAGE_TYPE },
-      },
+      formatter: ({ cellValue }) =>
+        getDictObj(DICT_TYPE.MP_MESSAGE_TYPE, String(cellValue))?.label ?? '',
     },
     {
       field: 'responseContent',
@@ -78,13 +90,79 @@ export function useGridColumns(
   return columns;
 }
 
+/** 新增/修改的表单 */
+export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
+  const schema: VbenFormSchema[] = [];
+  // 消息类型（仅消息回复显示）
+  if (Number(msgType) === MsgType.Message) {
+    schema.push({
+      fieldName: 'requestMessageType',
+      label: '消息类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择',
+        options: getDictOptions(DICT_TYPE.MP_MESSAGE_TYPE).filter((d) =>
+          RequestMessageTypes.has(d.value as string),
+        ),
+      },
+    });
+  }
+
+  // 匹配类型（仅关键词回复显示）
+  if (Number(msgType) === MsgType.Keyword) {
+    schema.push({
+      fieldName: 'requestMatch',
+      label: '匹配类型',
+      component: 'Select',
+      componentProps: {
+        placeholder: '请选择匹配类型',
+        allowClear: true,
+        options: getDictOptions(
+          DICT_TYPE.MP_AUTO_REPLY_REQUEST_MATCH,
+          'number',
+        ),
+      },
+      rules: 'required',
+    });
+  }
+
+  // 关键词（仅关键词回复显示）
+  if (Number(msgType) === MsgType.Keyword) {
+    schema.push({
+      fieldName: 'requestKeyword',
+      label: '关键词',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入内容',
+        allowClear: true,
+      },
+      rules: 'required',
+    });
+  }
+  // 回复消息
+  schema.push({
+    fieldName: 'reply',
+    label: '回复消息',
+    component: markRaw(ReplySelect),
+  });
+  return schema;
+}
+
 /** 列表的搜索表单 */
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'accountId',
       label: '公众号',
-      component: markRaw(WxAccountSelect),
+      component: 'ApiSelect',
+      componentProps: {
+        options: accountList.map((item) => ({
+          label: item.name,
+          value: item.id,
+        })),
+        placeholder: '请选择公众号',
+      },
+      defaultValue: accountList[0]?.id,
     },
   ];
 }
diff --git a/apps/web-ele/src/views/mp/autoReply/index.vue b/apps/web-ele/src/views/mp/autoReply/index.vue
index fed1b9f6b1..e548829eff 100644
--- a/apps/web-ele/src/views/mp/autoReply/index.vue
+++ b/apps/web-ele/src/views/mp/autoReply/index.vue
@@ -1,11 +1,10 @@
 <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 { computed, nextTick, ref } from 'vue';
 
-import { ContentWrap, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { IconifyIcon } from '@vben/icons';
 
 import {
   ElLoading,
@@ -21,26 +20,27 @@ import * as MpAutoReplyApi from '#/api/mp/autoReply';
 import { $t } from '#/locales';
 
 import { useGridColumns, useGridFormSchema } from './data';
+import Content from './modules/content.vue';
 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 更新完成
+const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
+/** 切换回复类型 */
+async function onTabChange(tabName: string) {
+  msgType.value = tabName;
   await nextTick();
-  const columns = useGridColumns(msgType.value);
+  // 更新 columns
+  const columns = useGridColumns(Number(msgType.value) as MsgType);
   if (columns) {
     // 使用 setGridOptions 更新列配置
     gridApi.setGridOptions({ columns });
     // 等待列配置更新完成
     await nextTick();
   }
+  // 查询数据
   await gridApi.query();
-  // 查询完成后更新数据长度
-  updateTableDataLength();
 }
 
 /** 新增按钮操作 */
@@ -49,7 +49,6 @@ async function handleCreate() {
 
   formModalApi
     .setData({
-      isCreating: true,
       msgType: msgType.value,
       accountId: formValues.accountId,
     })
@@ -59,8 +58,13 @@ async function handleCreate() {
 /** 修改按钮操作 */
 async function handleEdit(row: any) {
   const data = (await MpAutoReplyApi.getAutoReply(row.id)) as any;
+  const formValues = await gridApi.formApi.getValues();
   formModalApi
-    .setData({ isCreating: false, msgType: msgType.value, row: data })
+    .setData({
+      msgType: msgType.value,
+      row: data,
+      accountId: formValues.accountId,
+    })
     .open();
 }
 
@@ -73,9 +77,7 @@ async function handleDelete(row: any) {
   try {
     await MpAutoReplyApi.deleteAutoReply(row.id);
     ElMessage.success('删除成功');
-    await gridApi.query();
-    // 查询完成后更新数据长度
-    updateTableDataLength();
+    handleRefresh();
   } finally {
     loadingInstance.close();
   }
@@ -93,9 +95,8 @@ const [Grid, gridApi] = useVbenVxeGrid({
     submitOnChange: true,
   },
   gridOptions: {
-    columns: useGridColumns(msgType.value),
-    height: 'calc(100vh - 300px)',
-    // height: '600px',
+    columns: useGridColumns(Number(msgType.value) as MsgType),
+    height: 'auto',
     keepSource: true,
     proxyConfig: {
       ajax: {
@@ -103,13 +104,11 @@ const [Grid, gridApi] = useVbenVxeGrid({
           return await MpAutoReplyApi.getAutoReplyPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            type: msgType.value,
+            type: Number(msgType.value) as MsgType,
             ...formValues,
           });
         },
       },
-      // 禁用自动加载，等表单初始化完成后再加载
-      autoLoad: false,
     },
     rowConfig: {
       keyField: 'id',
@@ -122,132 +121,108 @@ const [Grid, gridApi] = useVbenVxeGrid({
   } 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;
-  }
+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
 }
 
 // 计算是否显示新增按钮：关注时回复类型只有在没有数据时才显示
 const showCreateButton = computed(() => {
-  if (msgType.value !== MsgType.Follow) {
+  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();
-    }
+  try {
+    const tableData = gridApi.grid?.getTableData();
+    return (tableData?.tableData?.length || 0) <= 0;
+  } catch {
+    return true;
   }
 });
 </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 #doc>
+      <DocAlert title="自动回复" url="https://doc.iocoder.cn/mp/auto-reply/" />
+    </template>
+
+    <FormModal @success="handleRefresh" />
+    <Grid table-title="自动回复列表">
+      <!-- 在工具栏上方放置 Tab 切换 -->
+      <template #toolbar-actions>
+        <ElTabs
+          v-model="msgType"
+          class="w-full"
+          @tab-change="(activeName) => onTabChange(activeName as string)"
+        >
+          <ElTabPane :name="String(MsgType.Follow)">
+            <template #label>
+              <ElRow align="middle">
+                <IconifyIcon icon="ep:star" class="mr-[2px]" /> 关注时回复
+              </ElRow>
+            </template>
+          </ElTabPane>
+          <ElTabPane :name="String(MsgType.Message)">
+            <template #label>
+              <ElRow align="middle">
+                <IconifyIcon icon="ep:chat-line-round" class="mr-[2px]" />
+                消息回复
+              </ElRow>
+            </template>
+          </ElTabPane>
+          <ElTabPane :name="String(MsgType.Keyword)">
+            <template #label>
+              <ElRow align="middle">
+                <IconifyIcon icon="fa:newspaper-o" class="mr-[2px]" />
+                关键词回复
+              </ElRow>
+            </template>
+          </ElTabPane>
+        </ElTabs>
+      </template>
+      <!-- 工具栏按钮 -->
+      <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 }">
+        <Content :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>
+            },
+          ]"
+        />
+      </template>
+    </Grid>
   </Page>
 </template>
diff --git a/apps/web-ele/src/views/mp/autoReply/modules/ReplyForm.vue b/apps/web-ele/src/views/mp/autoReply/modules/ReplyForm.vue
deleted file mode 100644
index f55afc3656..0000000000
--- a/apps/web-ele/src/views/mp/autoReply/modules/ReplyForm.vue
+++ /dev/null
@@ -1,128 +0,0 @@
-<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>
diff --git a/apps/web-ele/src/views/mp/autoReply/modules/ReplyTable.vue b/apps/web-ele/src/views/mp/autoReply/modules/content.vue
similarity index 74%
rename from apps/web-ele/src/views/mp/autoReply/modules/ReplyTable.vue
rename to apps/web-ele/src/views/mp/autoReply/modules/content.vue
index bdfb41ade8..339be83ab0 100644
--- a/apps/web-ele/src/views/mp/autoReply/modules/ReplyTable.vue
+++ b/apps/web-ele/src/views/mp/autoReply/modules/content.vue
@@ -1,8 +1,5 @@
 <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';
+import { Music, News, VideoPlayer, VoicePlayer } from '#/views/mp/components';
 
 defineOptions({ name: 'ReplyContentCell' });
 
@@ -17,14 +14,14 @@ const props = defineProps<{
       {{ props.row.responseContent }}
     </div>
     <div v-else-if="props.row.responseMessageType === 'voice'">
-      <WxVoicePlayer
+      <VoicePlayer
         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" />
+        <img :src="props.row.responseMediaUrl" class="w-[100px]" />
       </a>
     </div>
     <div
@@ -33,17 +30,17 @@ const props = defineProps<{
         props.row.responseMessageType === 'shortvideo'
       "
     >
-      <WxVideoPlayer
+      <VideoPlayer
         v-if="props.row.responseMediaUrl"
         :url="props.row.responseMediaUrl"
-        style="margin-top: 10px"
+        class="mt-[10px]"
       />
     </div>
     <div v-else-if="props.row.responseMessageType === 'news'">
-      <WxNews :articles="props.row.responseArticles" />
+      <News :articles="props.row.responseArticles" />
     </div>
     <div v-else-if="props.row.responseMessageType === 'music'">
-      <WxMusic
+      <Music
         :title="props.row.responseTitle"
         :description="props.row.responseDescription"
         :thumb-media-url="props.row.responseThumbMediaUrl"
diff --git a/apps/web-ele/src/views/mp/autoReply/modules/form.vue b/apps/web-ele/src/views/mp/autoReply/modules/form.vue
index b2502c2b92..cd0af6e58c 100644
--- a/apps/web-ele/src/views/mp/autoReply/modules/form.vue
+++ b/apps/web-ele/src/views/mp/autoReply/modules/form.vue
@@ -1,61 +1,88 @@
 <script lang="ts" setup>
-import type { Reply } from '#/views/mp/modules/wx-reply';
+import type { Reply } from '#/views/mp/components/reply/types';
 
-import { computed, ref } from 'vue';
+import { computed, nextTick, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
 import { ElMessage } from 'element-plus';
 
-import * as MpAutoReplyApi from '#/api/mp/autoReply';
+import { useVbenForm } from '#/adapter/form';
+import { createAutoReply, updateAutoReply } from '#/api/mp/autoReply';
 import { $t } from '#/locales';
-import { ReplyType } from '#/views/mp/modules/wx-reply/modules/types';
+import { ReplyType } from '#/views/mp/components/reply/types';
 
-import ReplyForm from './ReplyForm.vue';
+import { useFormSchema } from '../data';
 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 formData = ref<{
+  accountId?: number;
+  msgType: MsgType;
+  row?: any;
+}>();
+const getTitle = computed(() => {
+  return formData.value?.row?.id
+    ? $t('ui.actionTitle.edit', ['自动回复'])
+    : $t('ui.actionTitle.create', ['自动回复']);
 });
 
-const getTitle = computed(() => {
-  return formData.value?.isCreating
-    ? $t('ui.actionTitle.create', ['自动回复'])
-    : $t('ui.actionTitle.edit', ['自动回复']);
+const [Form, formApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-full',
+    },
+    formItemClass: 'col-span-2',
+    labelWidth: 100,
+  },
+  layout: 'horizontal',
+  schema: useFormSchema(Number(formData.value?.msgType) as MsgType),
+  showDefaultActions: false,
 });
 
+// 注意：schema 的更新现在在 onOpenChange 中手动处理，避免时序问题
+
 const [Modal, modalApi] = useVbenModal({
   async onConfirm() {
-    await formRef.value?.validate();
+    const { valid } = await formApi.validate();
+    if (!valid) {
+      return;
+    }
 
     // 处理回复消息
-    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;
+    const submitForm: any = await formApi.getValues();
+    // 确保 type 字段使用当前选中的 tab 值
+    submitForm.type = formData.value?.msgType;
+    // 确保 accountId 字段存在
+    submitForm.accountId = formData.value?.accountId;
+    // 编辑模式下，确保 id 字段存在（从 row 中获取，因为表单 schema 中没有 id 字段）
+    if (formData.value?.row?.id && !submitForm.id) {
+      submitForm.id = formData.value.row.id;
+    }
+    const reply = submitForm.reply as Reply | undefined;
+    if (reply) {
+      submitForm.responseMessageType = reply.type;
+      submitForm.responseContent = reply.content;
+      submitForm.responseMediaId = reply.mediaId;
+      submitForm.responseMediaUrl = reply.url;
+      submitForm.responseTitle = reply.title;
+      submitForm.responseDescription = reply.description;
+      submitForm.responseThumbMediaId = reply.thumbMediaId;
+      submitForm.responseThumbMediaUrl = reply.thumbMediaUrl;
+      submitForm.responseArticles = reply.articles;
+      submitForm.responseMusicUrl = reply.musicUrl;
+      submitForm.responseHqMusicUrl = reply.hqMusicUrl;
+    }
+    delete submitForm.reply;
 
     modalApi.lock();
     try {
-      if (replyForm.value.id === undefined) {
-        await MpAutoReplyApi.createAutoReply(submitForm);
+      if (submitForm.id === undefined) {
+        await createAutoReply(submitForm);
         ElMessage.success('新增成功');
       } else {
-        await MpAutoReplyApi.updateAutoReply(submitForm);
+        await updateAutoReply(submitForm);
         ElMessage.success('修改成功');
       }
       await modalApi.close();
@@ -67,50 +94,28 @@ const [Modal, modalApi] = useVbenModal({
   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;
+    // 先更新 schema，确保表单字段正确
+    formApi.setState({ schema: useFormSchema(data.msgType) });
+    // 等待 schema 更新完成
+    await nextTick();
 
-    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) {
+    formData.value = data;
+    if (data.row?.id) {
       // 编辑：加载数据
       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 = {
+      const formValues: any = { ...rowData };
+      formValues.reply = {
         type: rowData.responseMessageType,
         accountId: data.accountId || -1,
         content: rowData.responseContent,
@@ -124,6 +129,22 @@ const [Modal, modalApi] = useVbenModal({
         musicUrl: rowData.responseMusicUrl,
         hqMusicUrl: rowData.responseHqMusicUrl,
       };
+      await formApi.setValues(formValues);
+    } else {
+      // 新建：初始化表单
+      const initialValues: any = {
+        id: undefined,
+        accountId: data.accountId || -1,
+        type: data.msgType,
+        requestKeyword: undefined,
+        requestMatch: data.msgType === MsgType.Keyword ? 1 : undefined,
+        requestMessageType: undefined,
+        reply: {
+          type: ReplyType.Text,
+          accountId: data.accountId || -1,
+        },
+      };
+      await formApi.setValues(initialValues);
     }
   },
 });
@@ -131,12 +152,6 @@ const [Modal, modalApi] = useVbenModal({
 
 <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"
-    />
+    <Form class="mx-4" />
   </Modal>
 </template>
diff --git a/apps/web-ele/src/views/mp/modules/wx-account-select/main.vue b/apps/web-ele/src/views/mp/components/account-select/account-select.vue
similarity index 95%
rename from apps/web-ele/src/views/mp/modules/wx-account-select/main.vue
rename to apps/web-ele/src/views/mp/components/account-select/account-select.vue
index c76b8c5d51..2dde13dae9 100644
--- a/apps/web-ele/src/views/mp/modules/wx-account-select/main.vue
+++ b/apps/web-ele/src/views/mp/components/account-select/account-select.vue
@@ -6,11 +6,11 @@ import { useRouter } from 'vue-router';
 
 import { useTabs } from '@vben/hooks';
 
-import { ElMessage } from 'element-plus';
+import { ElMessage, ElOption, ElSelect } from 'element-plus';
 
 import { getSimpleAccountList } from '#/api/mp/account';
 
-defineOptions({ name: 'WxAccountSelect' });
+defineOptions({ name: 'AccountSelect' });
 
 const props = defineProps<{
   modelValue?: number;
@@ -121,19 +121,19 @@ onMounted(() => {
 </script>
 
 <template>
-  <el-select
+  <ElSelect
     v-model="currentId"
     placeholder="请选择公众号"
     class="!w-240px"
     @change="onChanged"
   >
-    <el-option
+    <ElOption
       v-for="item in accountList"
       :key="item.id"
       :label="item.name"
       :value="item.id"
     />
-  </el-select>
+  </ElSelect>
 </template>
 <style lang="scss" scoped>
 :deep(.el-select__wrapper) {
diff --git a/apps/web-ele/src/views/mp/components/account-select/index.ts b/apps/web-ele/src/views/mp/components/account-select/index.ts
new file mode 100644
index 0000000000..be1b347277
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/account-select/index.ts
@@ -0,0 +1 @@
+export { default } from './account-select.vue';
diff --git a/apps/web-ele/src/views/mp/components/index.ts b/apps/web-ele/src/views/mp/components/index.ts
new file mode 100644
index 0000000000..8e437302ec
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/index.ts
@@ -0,0 +1,23 @@
+// 统一导出所有模块组件
+
+export { default as Location } from './location/location.vue';
+
+export { default as MaterialSelect } from './material-select/material-select.vue';
+export * from './material-select/types';
+
+export * from './msg/types';
+
+export { default as Music } from './music/music.vue';
+
+export { default as News } from './news/news.vue';
+
+export { default as ReplySelect } from './reply/reply.vue';
+
+export * from './reply/types';
+
+export { default as VideoPlayer } from './video-play/video-play.vue';
+
+export { default as VoicePlayer } from './voice-play/voice-play.vue';
+
+export { default as AccountSelect } from './account-select/account-select.vue';
+
diff --git a/apps/web-ele/src/views/mp/components/location/index.ts b/apps/web-ele/src/views/mp/components/location/index.ts
new file mode 100644
index 0000000000..6ebacefb06
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/location/index.ts
@@ -0,0 +1 @@
+export { default } from './location.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-location/main.vue b/apps/web-ele/src/views/mp/components/location/location.vue
similarity index 79%
rename from apps/web-ele/src/views/mp/modules/wx-location/main.vue
rename to apps/web-ele/src/views/mp/components/location/location.vue
index 784b455536..1840518e6c 100644
--- a/apps/web-ele/src/views/mp/modules/wx-location/main.vue
+++ b/apps/web-ele/src/views/mp/components/location/location.vue
@@ -2,7 +2,11 @@
   【微信消息 - 定位】TODO @Dhb52 目前未启用
 -->
 <script lang="ts" setup>
-defineOptions({ name: 'WxLocation' });
+import { IconifyIcon } from '@vben/icons';
+
+import { ElCol, ElLink, ElRow } from 'element-plus';
+
+defineOptions({ name: 'Location' });
 
 const props = defineProps({
   locationX: {
@@ -36,26 +40,26 @@ defineExpose({
 
 <template>
   <div>
-    <el-link
+    <ElLink
       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>
+      <ElCol>
+        <ElRow>
           <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" />
+        </ElRow>
+        <ElRow>
+          <IconifyIcon icon="ep:location" />
           {{ label }}
-        </el-row>
-      </el-col>
-    </el-link>
+        </ElRow>
+      </ElCol>
+    </ElLink>
   </div>
 </template>
diff --git a/apps/web-ele/src/views/mp/modules/wx-material-select/index.ts b/apps/web-ele/src/views/mp/components/material-select/index.ts
similarity index 51%
rename from apps/web-ele/src/views/mp/modules/wx-material-select/index.ts
rename to apps/web-ele/src/views/mp/components/material-select/index.ts
index f4fcea0bae..a3320e060c 100644
--- a/apps/web-ele/src/views/mp/modules/wx-material-select/index.ts
+++ b/apps/web-ele/src/views/mp/components/material-select/index.ts
@@ -1,3 +1,3 @@
-export { default } from './main.vue';
+export { default } from './material-select.vue';
 
 export { MaterialType, NewsType } from './types';
diff --git a/apps/web-ele/src/views/mp/modules/wx-material-select/main.vue b/apps/web-ele/src/views/mp/components/material-select/material-select.vue
similarity index 61%
rename from apps/web-ele/src/views/mp/modules/wx-material-select/main.vue
rename to apps/web-ele/src/views/mp/components/material-select/material-select.vue
index 7271321625..1c351fb68c 100644
--- a/apps/web-ele/src/views/mp/modules/wx-material-select/main.vue
+++ b/apps/web-ele/src/views/mp/components/material-select/material-select.vue
@@ -7,18 +7,27 @@
 <script lang="ts" setup>
 import { onMounted, reactive, ref } from 'vue';
 
+import { IconifyIcon } from '@vben/icons';
 import { formatTime } from '@vben/utils';
 
+import {
+  ElButton,
+  ElPagination,
+  ElRow,
+  ElTable,
+  ElTableColumn,
+} from 'element-plus';
+
 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 News from '#/views/mp/components/news/news.vue';
+import VideoPlayer from '#/views/mp/components/video-play/video-play.vue';
+import VoicePlayer from '#/views/mp/components/voice-play/voice-play.vue';
 
 import { NewsType } from './types';
 
-defineOptions({ name: 'WxMaterialSelect' });
+defineOptions({ name: 'MaterialSelect' });
 
 const props = withDefaults(
   defineProps<{
@@ -119,34 +128,37 @@ onMounted(async () => {
         <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)">
+          <ElRow class="ope-row">
+            <ElButton type="success" @click="selectMaterialFun(item)">
               选择
-              <Icon icon="ep:circle-check" />
-            </el-button>
-          </el-row>
+              <IconifyIcon icon="ep:circle-check" />
+            </ElButton>
+          </ElRow>
         </div>
       </div>
       <!-- 分页组件 -->
-      <Pagination
+      <ElPagination
+        background
+        layout="prev, pager, next, sizes, total"
         :total="total"
-        v-model:page="queryParams.pageNo"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getMaterialPageFun"
+        v-model:current-page="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        @current-change="getMaterialPageFun"
+        @size-change="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">
+      <ElTable v-loading="loading" :data="list">
+        <ElTableColumn label="编号" align="center" prop="mediaId" />
+        <ElTableColumn label="文件名" align="center" prop="name" />
+        <ElTableColumn label="语音" align="center">
           <template #default="scope">
-            <WxVoicePlayer :url="scope.row.url" />
+            <VoicePlayer :url="scope.row.url" />
           </template>
-        </el-table-column>
-        <el-table-column
+        </ElTableColumn>
+        <ElTableColumn
           label="上传时间"
           align="center"
           prop="createTime"
@@ -155,41 +167,40 @@ onMounted(async () => {
             (row: any) => formatTime(row.createTime, 'YYYY-MM-DD HH:mm:ss')
           "
         />
-        <el-table-column label="操作" align="center" fixed="right">
+        <ElTableColumn label="操作" align="center" fixed="right">
           <template #default="scope">
-            <el-button
-              type="primary"
-              link
-              @click="selectMaterialFun(scope.row)"
-            >
+            <ElButton type="primary" link @click="selectMaterialFun(scope.row)">
               选择
-              <Icon icon="ep:plus" />
-            </el-button>
+              <IconifyIcon icon="ep:plus" />
+            </ElButton>
           </template>
-        </el-table-column>
-      </el-table>
+        </ElTableColumn>
+      </ElTable>
       <!-- 分页组件 -->
-      <Pagination
+      <ElPagination
+        background
+        layout="prev, pager, next, sizes, total"
         :total="total"
-        v-model:page="queryParams.pageNo"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getPage"
+        v-model:current-page="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        @current-change="getPage"
+        @size-change="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">
+      <ElTable v-loading="loading" :data="list">
+        <ElTableColumn label="编号" align="center" prop="mediaId" />
+        <ElTableColumn label="文件名" align="center" prop="name" />
+        <ElTableColumn label="标题" align="center" prop="title" />
+        <ElTableColumn label="介绍" align="center" prop="introduction" />
+        <ElTableColumn label="视频" align="center">
           <template #default="scope">
-            <WxVideoPlayer :url="scope.row.url" />
+            <VideoPlayer :url="scope.row.url" />
           </template>
-        </el-table-column>
-        <el-table-column
+        </ElTableColumn>
+        <ElTableColumn
           label="上传时间"
           align="center"
           prop="createTime"
@@ -198,30 +209,29 @@ onMounted(async () => {
             (row: any) => formatTime(row.createTime, 'YYYY-MM-DD HH:mm:ss')
           "
         />
-        <el-table-column
+        <ElTableColumn
           label="操作"
           align="center"
           fixed="right"
           class-name="small-padding fixed-width"
         >
           <template #default="scope">
-            <el-button
-              type="primary"
-              link
-              @click="selectMaterialFun(scope.row)"
-            >
+            <ElButton type="primary" link @click="selectMaterialFun(scope.row)">
               选择
-              <Icon icon="akar-icons:circle-plus" />
-            </el-button>
+              <IconifyIcon icon="akar-icons:circle-plus" />
+            </ElButton>
           </template>
-        </el-table-column>
-      </el-table>
+        </ElTableColumn>
+      </ElTable>
       <!-- 分页组件 -->
-      <Pagination
+      <ElPagination
+        background
+        layout="prev, pager, next, sizes, total"
         :total="total"
-        v-model:page="queryParams.pageNo"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getMaterialPageFun"
+        v-model:current-page="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        @current-change="getMaterialPageFun"
+        @size-change="getMaterialPageFun"
       />
     </div>
     <!-- 类型：news -->
@@ -229,22 +239,25 @@ onMounted(async () => {
       <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)">
+            <News :articles="item.content.newsItem" />
+            <ElRow class="ope-row">
+              <ElButton type="success" @click="selectMaterialFun(item)">
                 选择
-                <Icon icon="ep:circle-check" />
-              </el-button>
-            </el-row>
+                <IconifyIcon icon="ep:circle-check" />
+              </ElButton>
+            </ElRow>
           </div>
         </div>
       </div>
       <!-- 分页组件 -->
-      <Pagination
+      <ElPagination
+        background
+        layout="prev, pager, next, sizes, total"
         :total="total"
-        v-model:page="queryParams.pageNo"
-        v-model:limit="queryParams.pageSize"
-        @pagination="getMaterialPageFun"
+        v-model:current-page="queryParams.pageNo"
+        v-model:page-size="queryParams.pageSize"
+        @current-change="getMaterialPageFun"
+        @size-change="getMaterialPageFun"
       />
     </div>
   </div>
diff --git a/apps/web-ele/src/views/mp/modules/wx-material-select/types.ts b/apps/web-ele/src/views/mp/components/material-select/types.ts
similarity index 100%
rename from apps/web-ele/src/views/mp/modules/wx-material-select/types.ts
rename to apps/web-ele/src/views/mp/components/material-select/types.ts
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/card.scss b/apps/web-ele/src/views/mp/components/msg/card.scss
similarity index 100%
rename from apps/web-ele/src/views/mp/modules/wx-msg/card.scss
rename to apps/web-ele/src/views/mp/components/msg/card.scss
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/comment.scss b/apps/web-ele/src/views/mp/components/msg/comment.scss
similarity index 100%
rename from apps/web-ele/src/views/mp/modules/wx-msg/comment.scss
rename to apps/web-ele/src/views/mp/components/msg/comment.scss
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/index.ts b/apps/web-ele/src/views/mp/components/msg/index.ts
similarity index 48%
rename from apps/web-ele/src/views/mp/modules/wx-msg/index.ts
rename to apps/web-ele/src/views/mp/components/msg/index.ts
index 048afc95f4..fd766220b8 100644
--- a/apps/web-ele/src/views/mp/modules/wx-msg/index.ts
+++ b/apps/web-ele/src/views/mp/components/msg/index.ts
@@ -1,3 +1,3 @@
-export { default } from './main.vue';
+export { default } from './msg.vue';
 
 export { MsgType } from './types';
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-event.vue b/apps/web-ele/src/views/mp/components/msg/msg-event.vue
similarity index 66%
rename from apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-event.vue
rename to apps/web-ele/src/views/mp/components/msg/msg-event.vue
index 70c1930828..2773c03899 100644
--- a/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-event.vue
+++ b/apps/web-ele/src/views/mp/components/msg/msg-event.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
+import { ElTag } from 'element-plus';
+
 const props = defineProps<{
   item: any;
 }>();
@@ -11,44 +13,44 @@ const item = ref(props.item);
 <template>
   <div>
     <div v-if="item.event === 'subscribe'">
-      <el-tag type="success">关注</el-tag>
+      <ElTag type="success">关注</ElTag>
     </div>
     <div v-else-if="item.event === 'unsubscribe'">
-      <el-tag type="danger">取消关注</el-tag>
+      <ElTag type="danger">取消关注</ElTag>
     </div>
     <div v-else-if="item.event === 'CLICK'">
-      <el-tag>点击菜单</el-tag>
+      <ElTag>点击菜单</ElTag>
       【{{ item.eventKey }}】
     </div>
     <div v-else-if="item.event === 'VIEW'">
-      <el-tag>点击菜单链接</el-tag>
+      <ElTag>点击菜单链接</ElTag>
       【{{ item.eventKey }}】
     </div>
     <div v-else-if="item.event === 'scancode_waitmsg'">
-      <el-tag>扫码结果</el-tag>
+      <ElTag>扫码结果</ElTag>
       【{{ item.eventKey }}】
     </div>
     <div v-else-if="item.event === 'scancode_push'">
-      <el-tag>扫码结果</el-tag>
+      <ElTag>扫码结果</ElTag>
       【{{ item.eventKey }}】
     </div>
     <div v-else-if="item.event === 'pic_sysphoto'">
-      <el-tag>系统拍照发图</el-tag>
+      <ElTag>系统拍照发图</ElTag>
     </div>
     <div v-else-if="item.event === 'pic_photo_or_album'">
-      <el-tag>拍照或者相册</el-tag>
+      <ElTag>拍照或者相册</ElTag>
     </div>
     <div v-else-if="item.event === 'pic_weixin'">
-      <el-tag>微信相册</el-tag>
+      <ElTag>微信相册</ElTag>
     </div>
     <div v-else-if="item.event === 'location_select'">
-      <el-tag>选择地理位置</el-tag>
+      <ElTag>选择地理位置</ElTag>
     </div>
     <div v-else-if="item.event === 'SCAN'">
-      <el-tag>扫码</el-tag>
+      <ElTag>扫码</ElTag>
     </div>
     <div v-else>
-      <el-tag type="danger">未知事件类型</el-tag>
+      <ElTag type="danger">未知事件类型</ElTag>
     </div>
   </div>
 </template>
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-list.vue b/apps/web-ele/src/views/mp/components/msg/msg-list.vue
similarity index 100%
rename from apps/web-ele/src/views/mp/modules/wx-msg/modules/msg-list.vue
rename to apps/web-ele/src/views/mp/components/msg/msg-list.vue
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg.vue b/apps/web-ele/src/views/mp/components/msg/msg.vue
similarity index 78%
rename from apps/web-ele/src/views/mp/modules/wx-msg/modules/msg.vue
rename to apps/web-ele/src/views/mp/components/msg/msg.vue
index 27c5318e85..454fba175a 100644
--- a/apps/web-ele/src/views/mp/modules/wx-msg/modules/msg.vue
+++ b/apps/web-ele/src/views/mp/components/msg/msg.vue
@@ -1,11 +1,11 @@
 <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 Location from '#/views/mp/components/location/location.vue';
+import Music from '#/views/mp/components/music/music.vue';
+import News from '#/views/mp/components/news/news.vue';
+import VideoPlayer from '#/views/mp/components/video-play/video-play.vue';
+import VoicePlayer from '#/views/mp/components/voice-play/voice-play.vue';
 
 import { MsgType } from '../types';
 import MsgEvent from './msg-event.vue';
@@ -26,7 +26,7 @@ const item = ref<any>(props.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" />
+      <VoicePlayer :url="item.mediaUrl" :content="item.recognition" />
     </div>
 
     <div v-else-if="item.type === MsgType.Image">
@@ -39,7 +39,7 @@ const item = ref<any>(props.item);
       v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
       class="text-center"
     >
-      <WxVideoPlayer :url="item.mediaUrl" />
+      <VideoPlayer :url="item.mediaUrl" />
     </div>
 
     <div v-else-if="item.type === MsgType.Link" class="flex-1">
@@ -64,7 +64,7 @@ const item = ref<any>(props.item);
     </div>
 
     <div v-else-if="item.type === MsgType.Location">
-      <WxLocation
+      <Location
         :label="item.label"
         :location-y="item.locationY"
         :location-x="item.locationX"
@@ -72,11 +72,11 @@ const item = ref<any>(props.item);
     </div>
 
     <div v-else-if="item.type === MsgType.News" class="w-[300px]">
-      <WxNews :articles="item.articles" />
+      <News :articles="item.articles" />
     </div>
 
     <div v-else-if="item.type === MsgType.Music">
-      <WxMusic
+      <Music
         :title="item.title"
         :description="item.description"
         :thumb-media-url="item.thumbMediaUrl"
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/types.ts b/apps/web-ele/src/views/mp/components/msg/types.ts
similarity index 100%
rename from apps/web-ele/src/views/mp/modules/wx-msg/types.ts
rename to apps/web-ele/src/views/mp/components/msg/types.ts
diff --git a/apps/web-ele/src/views/mp/components/music/index.ts b/apps/web-ele/src/views/mp/components/music/index.ts
new file mode 100644
index 0000000000..e866909f23
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/music/index.ts
@@ -0,0 +1 @@
+export { default } from './music.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-music/main.vue b/apps/web-ele/src/views/mp/components/music/music.vue
similarity index 94%
rename from apps/web-ele/src/views/mp/modules/wx-music/main.vue
rename to apps/web-ele/src/views/mp/components/music/music.vue
index e097e1dfce..74bffe27e0 100644
--- a/apps/web-ele/src/views/mp/modules/wx-music/main.vue
+++ b/apps/web-ele/src/views/mp/components/music/music.vue
@@ -2,7 +2,7 @@
   【微信消息 - 音乐】
 -->
 <script lang="ts" setup>
-defineOptions({ name: 'WxMusic' });
+defineOptions({ name: 'Music' });
 
 const props = defineProps({
   title: {
@@ -66,5 +66,5 @@ defineExpose({
 
 <style lang="scss" scoped>
 /* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss  */
-@import url('../wx-msg/card.scss');
+@import url('../msg/card.scss');
 </style>
diff --git a/apps/web-ele/src/views/mp/components/news/index.ts b/apps/web-ele/src/views/mp/components/news/index.ts
new file mode 100644
index 0000000000..9cc5d64a67
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/news/index.ts
@@ -0,0 +1 @@
+export { default } from './news.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-news/main.vue b/apps/web-ele/src/views/mp/components/news/news.vue
similarity index 95%
rename from apps/web-ele/src/views/mp/modules/wx-news/main.vue
rename to apps/web-ele/src/views/mp/components/news/news.vue
index f93893c924..18aee6bdb1 100644
--- a/apps/web-ele/src/views/mp/modules/wx-news/main.vue
+++ b/apps/web-ele/src/views/mp/components/news/news.vue
@@ -6,7 +6,9 @@
   ① 代码优化，补充注释，提升阅读性
 -->
 <script lang="ts" setup>
-defineOptions({ name: 'WxNews' });
+import { ElImage } from 'element-plus';
+
+defineOptions({ name: 'News' });
 
 const props = withDefaults(
   defineProps<{
@@ -29,7 +31,7 @@ defineExpose({
       <a v-if="index === 0" :href="article.url" target="_blank">
         <div class="news-main">
           <div class="news-content">
-            <el-image
+            <ElImage
               :src="article.picUrl || article.thumbUrl"
               class="material-img"
               style="width: 100%; height: 120px"
@@ -46,7 +48,7 @@ defineExpose({
           <div class="news-content-item">
             <div class="news-content-item-title">{{ article.title }}</div>
             <div class="news-content-item-img">
-              <img
+              <ElImage
                 :src="article.picUrl || article.thumbUrl"
                 class="material-img"
                 height="100%"
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/index.ts b/apps/web-ele/src/views/mp/components/reply/index.ts
similarity index 42%
rename from apps/web-ele/src/views/mp/modules/wx-reply/index.ts
rename to apps/web-ele/src/views/mp/components/reply/index.ts
index 8696f5c538..bc196d84f0 100644
--- a/apps/web-ele/src/views/mp/modules/wx-reply/index.ts
+++ b/apps/web-ele/src/views/mp/components/reply/index.ts
@@ -1,8 +1,7 @@
-export { default } from './main.vue';
+export { default } from './reply.vue';
 
 export {
   createEmptyReply,
-  NewsType,
   type Reply,
   ReplyType,
-} from './modules/types';
+} from './types';
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/main.vue b/apps/web-ele/src/views/mp/components/reply/reply.vue
similarity index 63%
rename from apps/web-ele/src/views/mp/modules/wx-reply/main.vue
rename to apps/web-ele/src/views/mp/components/reply/reply.vue
index 929176a6fc..85011049e7 100644
--- a/apps/web-ele/src/views/mp/modules/wx-reply/main.vue
+++ b/apps/web-ele/src/views/mp/components/reply/reply.vue
@@ -8,27 +8,28 @@
   ④ 支持发送【视频】消息时，支持新建视频
 -->
 <script lang="ts" setup>
-import type { Reply } from './modules/types';
+import type { Reply } from './types';
 
-import { computed, ref, unref, watch } from 'vue';
+import { computed } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
 import { ElRow, ElTabPane, ElTabs } from 'element-plus';
 
-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';
+import { NewsType } from '../material-select/types';
+import TabImage from './tab-image.vue';
+import TabMusic from './tab-music.vue';
+import TabNews from './tab-news.vue';
+import TabText from './tab-text.vue';
+import TabVideo from './tab-video.vue';
+import TabVoice from './tab-voice.vue';
+import { createEmptyReply, ReplyType } from './types';
 
-defineOptions({ name: 'WxReplySelect' });
+defineOptions({ name: 'ReplySelect' });
 
 const props = withDefaults(
   defineProps<{
-    modelValue: Reply;
+    modelValue: Reply | undefined;
     newsType?: NewsType;
   }>(),
   {
@@ -38,40 +39,16 @@ const props = withDefaults(
 const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
+// 提供一个默认的 Reply 对象，避免 undefined 导致的错误
+const defaultReply: Reply = {
+  accountId: -1,
+  type: ReplyType.Text,
+};
+
 const reply = computed<Reply>({
-  get: () => props.modelValue,
+  get: () => props.modelValue || defaultReply,
   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() {
@@ -84,7 +61,7 @@ defineExpose({
 </script>
 
 <template>
-  <ElTabs type="border-card" v-model="currentTab">
+  <ElTabs type="border-card" v-model="reply.type" @tab-change="clear">
     <!-- 类型 1：文本 -->
     <ElTabPane :name="ReplyType.Text">
       <template #label>
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-image.vue b/apps/web-ele/src/views/mp/components/reply/tab-image.vue
similarity index 97%
rename from apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-image.vue
rename to apps/web-ele/src/views/mp/components/reply/tab-image.vue
index 2cd0b7d963..3f57da17c1 100644
--- a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-image.vue
+++ b/apps/web-ele/src/views/mp/components/reply/tab-image.vue
@@ -18,7 +18,7 @@ import {
 } from 'element-plus';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
+import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
 
 const props = defineProps<{
   modelValue: Reply;
@@ -122,7 +122,7 @@ function selectMaterial(item: any) {
           append-to-body
           destroy-on-close
         >
-          <WxMaterialSelect
+          <MaterialSelect
             type="image"
             :account-id="reply.accountId"
             @select-material="selectMaterial"
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-music.vue b/apps/web-ele/src/views/mp/components/reply/tab-music.vue
similarity index 97%
rename from apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-music.vue
rename to apps/web-ele/src/views/mp/components/reply/tab-music.vue
index fa46da9fe7..8c50a01c13 100644
--- a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-music.vue
+++ b/apps/web-ele/src/views/mp/components/reply/tab-music.vue
@@ -20,7 +20,7 @@ import {
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
 // import { getAccessToken } from '@/utils/auth'
-import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
+import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
 
 // 设置上传的请求头部
 
@@ -129,7 +129,7 @@ function selectMaterial(item: any) {
           append-to-body
           destroy-on-close
         >
-          <WxMaterialSelect
+          <MaterialSelect
             type="image"
             :account-id="reply.accountId"
             @select-material="selectMaterial"
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-news.vue b/apps/web-ele/src/views/mp/components/reply/tab-news.vue
similarity index 88%
rename from apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-news.vue
rename to apps/web-ele/src/views/mp/components/reply/tab-news.vue
index bbc976307e..fd3bc11a9b 100644
--- a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-news.vue
+++ b/apps/web-ele/src/views/mp/components/reply/tab-news.vue
@@ -7,10 +7,10 @@ import { IconifyIcon } from '@vben/icons';
 
 import { ElButton, ElCol, ElDialog, ElRow } from 'element-plus';
 
-import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
-import WxNews from '#/views/mp/modules/wx-news';
+import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
+import News from '#/views/mp/components/news/news.vue';
 
-import { NewsType } from './types';
+import { NewsType } from '../material-select/types';
 
 const props = defineProps<{
   modelValue: Reply;
@@ -45,7 +45,7 @@ function onDelete() {
         class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
         v-if="reply.articles && reply.articles.length > 0"
       >
-        <WxNews :articles="reply.articles" />
+        <News :articles="reply.articles" />
         <ElCol class="pt-[10px] text-center">
           <ElButton type="danger" circle @click="onDelete">
             <IconifyIcon icon="ep:delete" />
@@ -74,7 +74,7 @@ function onDelete() {
         append-to-body
         destroy-on-close
       >
-        <WxMaterialSelect
+        <MaterialSelect
           type="news"
           :account-id="reply.accountId"
           :news-type="newsType"
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-text.vue b/apps/web-ele/src/views/mp/components/reply/tab-text.vue
similarity index 100%
rename from apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-text.vue
rename to apps/web-ele/src/views/mp/components/reply/tab-text.vue
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-video.vue b/apps/web-ele/src/views/mp/components/reply/tab-video.vue
similarity index 93%
rename from apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-video.vue
rename to apps/web-ele/src/views/mp/components/reply/tab-video.vue
index 65be7db2e1..eb94044b56 100644
--- a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-video.vue
+++ b/apps/web-ele/src/views/mp/components/reply/tab-video.vue
@@ -19,8 +19,8 @@ import {
 } from 'element-plus';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
-import WxVideoPlayer from '#/views/mp/modules/wx-video-play';
+import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
+import VideoPlayer from '#/views/mp/components/video-play/video-play.vue';
 
 const props = defineProps<{
   modelValue: Reply;
@@ -97,7 +97,7 @@ function selectMaterial(item: any) {
         placeholder="请输入描述"
       />
       <ElRow class="w-full pt-[10px] text-center" justify="center">
-        <WxVideoPlayer v-if="reply.url" :url="reply.url" />
+        <VideoPlayer v-if="reply.url" :url="reply.url" />
       </ElRow>
       <ElCol>
         <ElRow class="text-center" align="middle">
@@ -113,7 +113,7 @@ function selectMaterial(item: any) {
               append-to-body
               destroy-on-close
             >
-              <WxMaterialSelect
+              <MaterialSelect
                 type="video"
                 :account-id="reply.accountId"
                 @select-material="selectMaterial"
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-voice.vue b/apps/web-ele/src/views/mp/components/reply/tab-voice.vue
similarity index 94%
rename from apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-voice.vue
rename to apps/web-ele/src/views/mp/components/reply/tab-voice.vue
index 295828191b..eb891dafc8 100644
--- a/apps/web-ele/src/views/mp/modules/wx-reply/modules/tab-voice.vue
+++ b/apps/web-ele/src/views/mp/components/reply/tab-voice.vue
@@ -18,8 +18,8 @@ import {
 } from 'element-plus';
 
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import WxMaterialSelect from '#/views/mp/modules/wx-material-select';
-import WxVoicePlayer from '#/views/mp/modules/wx-voice-play';
+import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
+import VoicePlayer from '#/views/mp/components/voice-play/voice-play.vue';
 
 // 设置上传的请求头部
 
@@ -99,7 +99,7 @@ function selectMaterial(item: Reply) {
         {{ reply.name }}
       </p>
       <ElRow class="w-full pt-[10px] text-center" justify="center">
-        <WxVoicePlayer :url="reply.url" />
+        <VoicePlayer :url="reply.url" />
       </ElRow>
       <ElRow class="w-full pt-[10px] text-center" justify="center">
         <ElButton type="danger" circle @click="onDelete">
@@ -123,7 +123,7 @@ function selectMaterial(item: Reply) {
           append-to-body
           destroy-on-close
         >
-          <WxMaterialSelect
+          <MaterialSelect
             type="voice"
             :account-id="reply.accountId"
             @select-material="selectMaterial"
diff --git a/apps/web-ele/src/views/mp/modules/wx-reply/modules/types.ts b/apps/web-ele/src/views/mp/components/reply/types.ts
similarity index 90%
rename from apps/web-ele/src/views/mp/modules/wx-reply/modules/types.ts
rename to apps/web-ele/src/views/mp/components/reply/types.ts
index 67571ef592..cecfba786f 100644
--- a/apps/web-ele/src/views/mp/modules/wx-reply/modules/types.ts
+++ b/apps/web-ele/src/views/mp/components/reply/types.ts
@@ -30,11 +30,6 @@ interface _Reply {
 
 type Reply = _Reply; // Partial<_Reply>
 
-enum NewsType {
-  Draft = '2',
-  Published = '1',
-}
-
 /** 利用旧的reply[accountId, type]初始化新的Reply */
 const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
   return {
@@ -55,4 +50,4 @@ const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
   };
 };
 
-export { createEmptyReply, NewsType, type Reply, ReplyType };
+export { createEmptyReply, type Reply, ReplyType };
diff --git a/apps/web-ele/src/views/mp/components/video-play/index.ts b/apps/web-ele/src/views/mp/components/video-play/index.ts
new file mode 100644
index 0000000000..72f3c5b109
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/video-play/index.ts
@@ -0,0 +1 @@
+export { default } from './video-play.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-video-play/main.vue b/apps/web-ele/src/views/mp/components/video-play/video-play.vue
similarity index 85%
rename from apps/web-ele/src/views/mp/modules/wx-video-play/main.vue
rename to apps/web-ele/src/views/mp/components/video-play/video-play.vue
index 1b7260576b..8132b47e0f 100644
--- a/apps/web-ele/src/views/mp/modules/wx-video-play/main.vue
+++ b/apps/web-ele/src/views/mp/components/video-play/video-play.vue
@@ -13,11 +13,14 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
+import { IconifyIcon } from '@vben/icons';
+
 import { VideoPlayer } from '@videojs-player/vue';
+import { ElDialog } from 'element-plus';
 
 import 'video.js/dist/video-js.css';
 
-defineOptions({ name: 'WxVideoPlayer' });
+defineOptions({ name: 'VideoPlayer' });
 
 const props = defineProps({
   url: {
@@ -40,13 +43,13 @@ const playVideo = () => {
 <template>
   <div @click="playVideo()">
     <!-- 提示 -->
-    <div>
-      <Icon icon="ep:video-play" :size="32" class="mr-5px" />
+    <div class="flex cursor-pointer flex-col items-center">
+      <IconifyIcon icon="ep:video-play" :size="32" class="mr-5px" />
       <p class="text-sm">点击播放视频</p>
     </div>
 
     <!-- 弹窗播放 -->
-    <el-dialog v-model="dialogVideo" title="视频播放" append-to-body>
+    <ElDialog v-model="dialogVideo" title="视频播放" append-to-body>
       <VideoPlayer
         v-if="dialogVideo"
         class="video-player vjs-big-play-centered"
@@ -70,6 +73,6 @@ const playVideo = () => {
       <!--        @canplay="handleEvent($event)"-->
       <!--        @canplaythrough="handleEvent($event)"-->
       <!--        @timeupdate="handleEvent(player?.currentTime())"-->
-    </el-dialog>
+    </ElDialog>
   </div>
 </template>
diff --git a/apps/web-ele/src/views/mp/components/voice-play/index.ts b/apps/web-ele/src/views/mp/components/voice-play/index.ts
new file mode 100644
index 0000000000..6bd5e57128
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/voice-play/index.ts
@@ -0,0 +1 @@
+export { default } from './voice-play.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-voice-play/main.vue b/apps/web-ele/src/views/mp/components/voice-play/voice-play.vue
similarity index 92%
rename from apps/web-ele/src/views/mp/modules/wx-voice-play/main.vue
rename to apps/web-ele/src/views/mp/components/voice-play/voice-play.vue
index 23b721380d..d41a2f0b54 100644
--- a/apps/web-ele/src/views/mp/modules/wx-voice-play/main.vue
+++ b/apps/web-ele/src/views/mp/components/voice-play/voice-play.vue
@@ -12,10 +12,12 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 
+import { IconifyIcon } from '@vben/icons';
+
 // 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
 import BenzAMRRecorder from 'benz-amr-recorder';
 
-defineOptions({ name: 'WxVoicePlayer' });
+defineOptions({ name: 'VoicePlayer' });
 
 const props = defineProps({
   url: {
@@ -79,8 +81,8 @@ const amrStop = () => {
 <template>
   <div class="wx-voice-div" @click="playVoice">
     <el-icon>
-      <Icon v-if="playing !== true" icon="ep:video-play" :size="32" />
-      <Icon v-else icon="ep:video-pause" :size="32" />
+      <IconifyIcon v-if="playing !== true" icon="ep:video-play" :size="32" />
+      <IconifyIcon v-else icon="ep:video-pause" :size="32" />
       <span class="amr-duration" v-if="duration">{{ duration }} 秒</span>
     </el-icon>
     <div v-if="content">
diff --git a/apps/web-ele/src/views/mp/draft/data.ts b/apps/web-ele/src/views/mp/draft/data.ts
index 89492f63e0..de0f027307 100644
--- a/apps/web-ele/src/views/mp/draft/data.ts
+++ b/apps/web-ele/src/views/mp/draft/data.ts
@@ -3,7 +3,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
 import { markRaw } from 'vue';
 
-import WxAccountSelect from '#/views/mp/modules/wx-account-select/main.vue';
+import AccountSelect from '#/views/mp/components/account-select/account-select.vue';
 
 /** 获取表格列配置 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
@@ -35,7 +35,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
     {
       fieldName: 'accountId',
       label: '公众号',
-      component: markRaw(WxAccountSelect),
+      component: markRaw(AccountSelect),
     },
   ];
 }
diff --git a/apps/web-ele/src/views/mp/draft/modules/cover-select.vue b/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
index 29439f556e..17f61b184d 100644
--- a/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
+++ b/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
@@ -11,7 +11,7 @@ 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';
+import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
 
 // 设置上传的请求头部
 
@@ -130,7 +130,7 @@ function onUploadError(err: Error) {
         append-to-body
         destroy-on-close
       >
-        <WxMaterialSelect
+        <MaterialSelect
           type="image"
           :account-id="accountId!"
           @select-material="onMaterialSelected"
diff --git a/apps/web-ele/src/views/mp/draft/modules/draft-table.vue b/apps/web-ele/src/views/mp/draft/modules/draft-table.vue
index 46f6e74409..8f13fa71c6 100644
--- a/apps/web-ele/src/views/mp/draft/modules/draft-table.vue
+++ b/apps/web-ele/src/views/mp/draft/modules/draft-table.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Article } from './types';
 
-import WxNews from '#/views/mp/modules/wx-news';
+import News from '#/views/mp/components/news/news.vue';
 
 defineOptions({ name: 'DraftTableCell' });
 
@@ -13,7 +13,7 @@ const props = defineProps<{
 <template>
   <div class="draft-content">
     <div v-if="props.row.content && props.row.content.newsItem">
-      <WxNews :articles="props.row.content.newsItem" />
+      <News :articles="props.row.content.newsItem" />
     </div>
   </div>
 </template>
diff --git a/apps/web-ele/src/views/mp/menu/data.ts b/apps/web-ele/src/views/mp/menu/data.ts
index 2a22837baf..171d47b7ed 100644
--- a/apps/web-ele/src/views/mp/menu/data.ts
+++ b/apps/web-ele/src/views/mp/menu/data.ts
@@ -1,3 +1,6 @@
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { getSimpleAccountList } from '#/api/mp/account';
 /** 菜单未选中标识 */
 export const MENU_NOT_SELECTED = '__MENU_NOT_SELECTED__';
 
@@ -7,3 +10,20 @@ export enum Level {
   Parent = '1',
   Undefined = '0',
 }
+/** 列表的搜索表单 */
+export function useGridFormSchema(): VbenFormSchema[] {
+  return [
+    {
+      fieldName: 'accountId',
+      label: '公众号',
+      component: 'ApiSelect',
+      componentProps: {
+        api: getSimpleAccountList,
+        labelField: 'name',
+        valueField: 'id',
+        autoSelect: 'first',
+        placeholder: '请选择公众号',
+      },
+    },
+  ];
+}
diff --git a/apps/web-ele/src/views/mp/menu/index.vue b/apps/web-ele/src/views/mp/menu/index.vue
index bc725817d8..ff95116463 100644
--- a/apps/web-ele/src/views/mp/menu/index.vue
+++ b/apps/web-ele/src/views/mp/menu/index.vue
@@ -1,24 +1,28 @@
 <script lang="ts" setup>
 import type { Menu, RawMenu } from './modules/types';
 
-import { ref } from 'vue';
+import { nextTick, onMounted, ref } from 'vue';
 
 import { confirm, ContentWrap, DocAlert, Page } from '@vben/common-ui';
 
-import {
-  ElButton,
-  ElForm,
-  ElFormItem,
-  ElLoading,
-  ElMessage,
-} from 'element-plus';
+import { ElButton, ElLoading, ElMessage } from 'element-plus';
 
+import { useVbenForm } from '#/adapter/form';
+import { getSimpleAccountList } from '#/api/mp/account';
 import * as MpMenuApi from '#/api/mp/menu';
 import * as UtilsTree from '#/utils/tree';
-import { Level, MENU_NOT_SELECTED } from '#/views/mp/menu/data';
+import {
+  Level,
+  MENU_NOT_SELECTED,
+  useGridFormSchema,
+} 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';
+
+// Assets for backgrounds
+import iphoneBackImg from './assets/iphone_backImg.png';
+import menuFootImg from './assets/menu_foot.png';
+import menuHeadImg from './assets/menu_head.png';
 
 defineOptions({ name: 'MpMenu' });
 
@@ -56,10 +60,32 @@ const tempSelfObj = ref<{
 });
 const dialogNewsVisible = ref(false); // 跳转图文时的素材选择弹窗
 
+// 创建表单
+const [AccountForm, accountFormApi] = useVbenForm({
+  commonConfig: {
+    componentProps: {
+      class: 'w-[240px]',
+    },
+  },
+  layout: 'horizontal',
+  schema: useGridFormSchema(),
+  wrapperClass: 'grid-cols-1',
+  showDefaultActions: false,
+  handleValuesChange: async (values, changedFields) => {
+    // 当 accountId 字段变化时（包括 autoSelect 自动选择），同步更新 accountId
+    if (changedFields.includes('accountId') && values.accountId) {
+      await onAccountChanged(values);
+    }
+  },
+});
+
 /** 侦听公众号变化 */
-function onAccountChanged(id: number, name: string) {
-  accountId.value = id;
-  accountName.value = name;
+async function onAccountChanged(values: Record<string, any>) {
+  accountId.value = values.accountId;
+  // 从 API 获取公众号列表并查找对应的公众号名称
+  const accountList = await getSimpleAccountList();
+  const account = accountList.find((item) => item.id === values.accountId);
+  accountName.value = account?.name || '';
   getList();
 }
 
@@ -257,6 +283,27 @@ function menuToBackend(menu: any) {
 
   return result;
 }
+
+/** 初始化账号ID - 作为备用方案，防止 handleValuesChange 未触发 */
+async function initAccountId() {
+  // 等待表单初始化完成
+  await nextTick();
+  try {
+    const values = await accountFormApi.getValues();
+    if (values?.accountId && accountId.value === -1) {
+      // 如果表单有值但 accountId 还是初始值，则手动触发一次
+      await onAccountChanged(values);
+    }
+  } catch {
+    // 忽略错误
+  }
+}
+
+// 组件挂载时初始化账号ID
+onMounted(async () => {
+  await nextTick();
+  await initAccountId();
+});
 </script>
 
 <template>
@@ -267,21 +314,34 @@ function menuToBackend(menu: any) {
 
     <!-- 搜索工作栏 -->
     <!-- <ContentWrap> -->
-    <ElForm :inline="true" label-width="68px" class="-mb-15px w-240px">
-      <ElFormItem label="公众号" prop="accountId" class="w-240px">
-        <WxAccountSelect @change="onAccountChanged" />
-      </ElFormItem>
-    </ElForm>
+    <AccountForm class="-mb-15px w-240px" @values-change="onAccountChanged" />
+
     <!-- </ContentWrap> -->
 
     <ContentWrap>
-      <div class="clearfix public-account-management" v-loading="loading">
+      <div
+        class="public-account-management mx-auto flex w-full max-w-[1200px] flex-wrap items-start gap-[20px]"
+        v-loading="loading"
+      >
         <!--左边配置菜单-->
-        <div class="left">
-          <div class="weixin-hd">
-            <div class="weixin-title">{{ accountName }}</div>
+        <div
+          class="left relative box-border block h-[715px] w-[350px] flex-shrink-0 bg-[length:100%_auto] bg-no-repeat px-[25px] pb-[88px] pt-[518px]"
+          :style="{ backgroundImage: `url(${iphoneBackImg})` }"
+        >
+          <div
+            class="relative bottom-[426px] left-0 h-[64px] w-[300px] bg-[length:100%_auto] bg-no-repeat text-center text-white"
+            :style="{ backgroundImage: `url(${menuHeadImg})` }"
+          >
+            <div
+              class="absolute left-0 top-[33px] w-full text-center text-[14px] text-white"
+            >
+              {{ accountName }}
+            </div>
           </div>
-          <div class="clearfix weixin-menu">
+          <div
+            class="weixin-menu h-[46px] bg-no-repeat pl-[43px] text-[12px]"
+            :style="{ backgroundImage: `url(${menuFootImg})` }"
+          >
             <MenuPreviewer
               v-model="menuList"
               :account-id="accountId"
@@ -291,9 +351,9 @@ function menuToBackend(menu: any) {
               @submenu-clicked="(child, x, y) => subMenuClicked(child, x, y)"
             />
           </div>
-          <div class="save-div">
+          <div class="mt-[15px] text-center">
             <ElButton
-              class="save-btn"
+              class="mx-2"
               type="success"
               @click="onSave"
               v-access:code="['mp:menu:save']"
@@ -301,7 +361,7 @@ function menuToBackend(menu: any) {
               保存并发布菜单
             </ElButton>
             <ElButton
-              class="save-btn"
+              class="mx-2"
               type="danger"
               @click="onClear"
               v-access:code="['mp:menu:delete']"
@@ -311,7 +371,10 @@ function menuToBackend(menu: any) {
           </div>
         </div>
         <!--右边配置-->
-        <div class="right" v-if="showRightPanel">
+        <div
+          class="right box-border flex-1 basis-[63%] bg-[#e8e7e7] p-[20px]"
+          v-if="showRightPanel"
+        >
           <MenuEditor
             :account-id="accountId"
             :is-parent="isParent"
@@ -320,94 +383,13 @@ function menuToBackend(menu: any) {
           />
         </div>
         <!-- 一进页面就显示的默认页面，当点击左边按钮的时候，就不显示了-->
-        <div v-else class="right">
-          <p>请选择菜单配置</p>
+        <div
+          v-else
+          class="right box-border flex-1 basis-[63%] bg-[#e8e7e7] p-[20px]"
+        >
+          <p class="text-left">请选择菜单配置</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>
diff --git a/apps/web-ele/src/views/mp/menu/modules/menu-editor.vue b/apps/web-ele/src/views/mp/menu/modules/menu-editor.vue
index 00193bcf24..00352d968a 100644
--- a/apps/web-ele/src/views/mp/menu/modules/menu-editor.vue
+++ b/apps/web-ele/src/views/mp/menu/modules/menu-editor.vue
@@ -14,9 +14,9 @@ import {
   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 MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
+import News from '#/views/mp/components/news/news.vue';
+import ReplySelect from '#/views/mp/components/reply/reply.vue';
 
 import menuOptions from './menuOptions';
 
@@ -82,199 +82,150 @@ function deleteMaterial() {
 </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>
+  <div class="space-y-5">
+    <div class="flex justify-end">
+      <ElButton type="danger" @click="emit('delete')">
+        <IconifyIcon icon="ep:delete" />
+        删除当前菜单
+      </ElButton>
+    </div>
+    <div class="flex items-center gap-3">
+      <span class="w-[100px] text-base">菜单名称：</span>
+      <ElInput
+        class="w-[40%] min-w-[220px]"
+        v-model="menu.name"
+        placeholder="请输入菜单名称"
+        :maxlength="isParent ? 4 : 7"
+        clearable
+      />
+    </div>
+    <div v-if="isLeave" class="space-y-5">
+      <div class="flex items-center gap-3">
+        <span class="w-[100px] text-base">菜单标识：</span>
         <ElInput
-          class="input-width"
-          v-model="menu.name"
-          placeholder="请输入菜单名称"
-          :maxlength="isParent ? 4 : 7"
+          class="w-[40%] min-w-[220px]"
+          v-model="menu.menuKey"
+          placeholder="请输入菜单 KEY"
           clearable
         />
       </div>
-      <div v-if="isLeave">
-        <div class="menu-content">
-          <span>菜单标识：</span>
+      <div class="flex items-center gap-3">
+        <span class="w-[100px] text-base">菜单内容：</span>
+        <ElSelect
+          v-model="menu.type"
+          clearable
+          placeholder="请选择"
+          class="w-[40%] min-w-[220px]"
+        >
+          <ElOption
+            v-for="item in menuOptions"
+            :label="item.label"
+            :value="item.value"
+            :key="item.value"
+          />
+        </ElSelect>
+      </div>
+      <div
+        class="rounded bg-white px-3 py-5 shadow-sm"
+        v-if="menu.type === 'view'"
+      >
+        <div class="flex items-center gap-3">
+          <span class="text-base">跳转链接：</span>
           <ElInput
-            class="input-width"
-            v-model="menu.menuKey"
-            placeholder="请输入菜单 KEY"
+            class="w-[40%] min-w-[220px]"
+            v-model="menu.url"
+            placeholder="请输入链接"
             clearable
           />
         </div>
-        <div class="menu-content">
-          <span>菜单内容：</span>
-          <ElSelect
-            v-model="menu.type"
+      </div>
+      <div
+        class="space-y-5 rounded bg-white px-3 py-5 shadow-sm"
+        v-if="menu.type === 'miniprogram'"
+      >
+        <div class="flex items-center gap-3">
+          <span class="inline-block w-[25%] min-w-[120px] text-base">
+            小程序的 appid ：
+          </span>
+          <ElInput
+            class="w-[40%] min-w-[220px]"
+            v-model="menu.miniProgramAppId"
+            placeholder="请输入小程序的appid"
             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>
+        <div class="flex items-center gap-3">
+          <span class="inline-block w-[25%] min-w-[120px] text-base">
+            小程序的页面路径：
+          </span>
           <ElInput
-            class="input-width"
+            class="w-[40%] min-w-[220px]"
+            v-model="menu.miniProgramPagePath"
+            placeholder="请输入小程序的页面路径，如：pages/index"
+            clearable
+          />
+        </div>
+        <div class="flex items-center gap-3">
+          <span class="inline-block w-[25%] min-w-[120px] text-base">
+            小程序的备用网页：
+          </span>
+          <ElInput
+            class="w-[40%] min-w-[220px]"
             v-model="menu.url"
-            placeholder="请输入链接"
+            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
-            />
+        <p class="text-sm text-[#29b6f6]">
+          tips:需要和公众号进行关联才可以把小程序绑定带微信菜单上哟！
+        </p>
+      </div>
+      <div
+        class="rounded bg-white px-3 py-5 shadow-sm"
+        v-if="menu.type === 'article_view_limited'"
+      >
+        <ElRow>
+          <div
+            class="mx-auto mb-2.5 w-[280px] border border-[#eaeaea] p-2.5"
+            v-if="menu && menu.replyArticles"
+          >
+            <News :articles="menu.replyArticles" />
+            <ElRow class="pt-2.5 text-center" justify="center" align="middle">
+              <ElButton type="danger" circle @click="deleteMaterial">
+                <IconifyIcon icon="ep:delete" />
+              </ElButton>
+            </ElRow>
           </div>
-          <div class="applet">
-            <span>小程序的页面路径：</span>
-            <ElInput
-              class="input-width"
-              v-model="menu.miniProgramPagePath"
-              placeholder="请输入小程序的页面路径，如：pages/index"
-              clearable
-            />
+          <div v-else class="w-full">
+            <ElRow justify="center">
+              <ElCol :span="24" class="text-center">
+                <ElButton type="success" @click="showNewsDialog = true">
+                  素材库选择
+                  <IconifyIcon icon="ep:circle-check" />
+                </ElButton>
+              </ElCol>
+            </ElRow>
           </div>
-          <div class="applet">
-            <span>小程序的备用网页：</span>
-            <ElInput
-              class="input-width"
-              v-model="menu.url"
-              placeholder="不支持小程序的老版本客户端将打开本网页"
-              clearable
+          <ElDialog
+            title="选择图文"
+            v-model="showNewsDialog"
+            width="80%"
+            destroy-on-close
+          >
+            <MaterialSelect
+              type="news"
+              :account-id="props.accountId"
+              @select-material="selectMaterial"
             />
-          </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>
+          </ElDialog>
+        </ElRow>
+      </div>
+      <div
+        class="rounded bg-white px-3 py-5 shadow-sm"
+        v-if="menu.type === 'click' || menu.type === 'scancode_waitmsg'"
+      >
+        <ReplySelect v-model="menu.reply" />
       </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>
diff --git a/apps/web-ele/src/views/mp/menu/modules/menu-previewer.vue b/apps/web-ele/src/views/mp/menu/modules/menu-previewer.vue
index ab1a37978d..1b7c5a8101 100644
--- a/apps/web-ele/src/views/mp/menu/modules/menu-previewer.vue
+++ b/apps/web-ele/src/views/mp/menu/modules/menu-previewer.vue
@@ -127,17 +127,26 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
     @end="onParentDragEnd"
   >
     <template #item="{ element: parent, index: x }">
-      <div class="menu-bottom">
+      <div
+        class="relative float-left box-border block w-[85.5px] cursor-pointer border border-[#ebedee] bg-white text-center"
+      >
         <!-- 一级菜单 -->
         <div
+          class="flex h-11 w-full items-center justify-center border leading-[44px]"
+          :class="
+            props.activeIndex === `${x}`
+              ? 'border-[#2bb673]'
+              : 'border-transparent'
+          "
           @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">
+        <div
+          class="absolute bottom-[45px] w-[85.5px]"
+          v-if="props.parentIndex === x && parent.children"
+        >
           <draggable
             v-model="parent.children"
             item-key="id"
@@ -146,11 +155,17 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
             @end="onChildDragEnd"
           >
             <template #item="{ element: child, index: y }">
-              <div class="menu-bottom subtitle">
+              <div
+                class="relative float-left box-border block w-[85.5px] border border-[#ebedee] bg-white text-center"
+              >
                 <div
-                  class="menu-sub-item"
+                  class="box-border h-11 border leading-[44px]"
+                  :class="
+                    props.activeIndex === `${x}-${y}`
+                      ? 'border-[#2bb673]'
+                      : 'border-transparent'
+                  "
                   v-if="parent.children"
-                  :class="{ active: props.activeIndex === `${x}-${y}` }"
                   @click="subMenuClicked(child, x, y)"
                 >
                   {{ child.name }}
@@ -160,11 +175,11 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
           </draggable>
           <!-- 二级菜单加号， 当长度 小于 5 才显示二级菜单的加号  -->
           <div
-            class="menu-bottom menu-addicon"
+            class="relative float-left box-border flex h-[46px] w-[85.5px] cursor-pointer items-center justify-center border border-[#ebedee] bg-white text-center"
             v-if="!parent.children || parent.children.length < 5"
             @click="addSubMenu(x, parent)"
           >
-            <IconifyIcon icon="ep:plus" class="plus" />
+            <IconifyIcon icon="ep:plus" class="" />
           </div>
         </div>
       </div>
@@ -173,80 +188,15 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
 
   <!-- 一级菜单加号 -->
   <div
-    class="menu-bottom menu-addicon"
+    class="relative float-left box-border flex h-[46px] w-[85.5px] cursor-pointer items-center justify-center border border-[#ebedee] bg-white text-center"
     v-if="menuList.length < 3"
     @click="addMenu"
   >
-    <IconifyIcon icon="ep:plus" class="plus" />
+    <IconifyIcon icon="ep:plus" class="" />
   </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;
+  @apply border border-[#4299e1] bg-[#f7fafc] opacity-50;
 }
 </style>
diff --git a/apps/web-ele/src/views/mp/modules/wx-account-select/index.ts b/apps/web-ele/src/views/mp/modules/wx-account-select/index.ts
deleted file mode 100644
index 374d993fee..0000000000
--- a/apps/web-ele/src/views/mp/modules/wx-account-select/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './main.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-location/index.ts b/apps/web-ele/src/views/mp/modules/wx-location/index.ts
deleted file mode 100644
index 374d993fee..0000000000
--- a/apps/web-ele/src/views/mp/modules/wx-location/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './main.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-msg/main.vue b/apps/web-ele/src/views/mp/modules/wx-msg/main.vue
deleted file mode 100644
index 5d9ad4039f..0000000000
--- a/apps/web-ele/src/views/mp/modules/wx-msg/main.vue
+++ /dev/null
@@ -1,202 +0,0 @@
-<!--
-  - 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 { ElMessage } from 'element-plus';
-
-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 message = ElMessage; // 消息弹窗
-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>
-    <div
-      class="ml-[10px] mr-[10px] h-[50vh] overflow-auto bg-[#eaeaea]"
-      ref="msgDivRef"
-    >
-      <!-- 加载更多 -->
-      <div v-loading="loading"></div>
-      <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>
-
-    <div class="p-[10px]" v-loading="sendLoading">
-      <WxReplySelect ref="replySelectRef" v-model="reply" />
-      <el-button type="success" class="float-right mb-2 mt-2" @click="sendMsg">
-        发送(S)
-      </el-button>
-    </div>
-  </ContentWrap>
-</template>
-
-<style lang="scss" scoped></style>
diff --git a/apps/web-ele/src/views/mp/modules/wx-music/index.ts b/apps/web-ele/src/views/mp/modules/wx-music/index.ts
deleted file mode 100644
index 374d993fee..0000000000
--- a/apps/web-ele/src/views/mp/modules/wx-music/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './main.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-news/index.ts b/apps/web-ele/src/views/mp/modules/wx-news/index.ts
deleted file mode 100644
index 374d993fee..0000000000
--- a/apps/web-ele/src/views/mp/modules/wx-news/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './main.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-video-play/index.ts b/apps/web-ele/src/views/mp/modules/wx-video-play/index.ts
deleted file mode 100644
index 374d993fee..0000000000
--- a/apps/web-ele/src/views/mp/modules/wx-video-play/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './main.vue';
diff --git a/apps/web-ele/src/views/mp/modules/wx-voice-play/index.ts b/apps/web-ele/src/views/mp/modules/wx-voice-play/index.ts
deleted file mode 100644
index 374d993fee..0000000000
--- a/apps/web-ele/src/views/mp/modules/wx-voice-play/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './main.vue';
-- 
Gitee


From 6ae21c978be4af340e2a91dfcf8dba3bd606d4ee Mon Sep 17 00:00:00 2001
From: hw <huangwen@yuanshengcloud.com>
Date: Thu, 13 Nov 2025 18:35:44 +0800
Subject: [PATCH 3/4] fix: eslint

---
 apps/web-antd/src/views/mp/draft/index.vue          | 3 ++-
 apps/web-ele/src/views/mp/components/index.ts       | 7 +++----
 apps/web-ele/src/views/mp/components/reply/index.ts | 6 +-----
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/apps/web-antd/src/views/mp/draft/index.vue b/apps/web-antd/src/views/mp/draft/index.vue
index 3544d3219b..80cc07c8a5 100644
--- a/apps/web-antd/src/views/mp/draft/index.vue
+++ b/apps/web-antd/src/views/mp/draft/index.vue
@@ -229,8 +229,9 @@ const [Grid, gridApi] = useVbenVxeGrid({
   .vxe-table--body {
     .vxe-body--column {
       .vxe-cell {
-        padding: 0;
         height: auto !important;
+        padding: 0;
+
         img {
           width: 300px !important;
         }
diff --git a/apps/web-ele/src/views/mp/components/index.ts b/apps/web-ele/src/views/mp/components/index.ts
index 8e437302ec..5778810058 100644
--- a/apps/web-ele/src/views/mp/components/index.ts
+++ b/apps/web-ele/src/views/mp/components/index.ts
@@ -1,8 +1,10 @@
 // 统一导出所有模块组件
 
-export { default as Location } from './location/location.vue';
+export { default as AccountSelect } from './account-select/account-select.vue';
 
+export { default as Location } from './location/location.vue';
 export { default as MaterialSelect } from './material-select/material-select.vue';
+
 export * from './material-select/types';
 
 export * from './msg/types';
@@ -18,6 +20,3 @@ export * from './reply/types';
 export { default as VideoPlayer } from './video-play/video-play.vue';
 
 export { default as VoicePlayer } from './voice-play/voice-play.vue';
-
-export { default as AccountSelect } from './account-select/account-select.vue';
-
diff --git a/apps/web-ele/src/views/mp/components/reply/index.ts b/apps/web-ele/src/views/mp/components/reply/index.ts
index bc196d84f0..d2910f71d2 100644
--- a/apps/web-ele/src/views/mp/components/reply/index.ts
+++ b/apps/web-ele/src/views/mp/components/reply/index.ts
@@ -1,7 +1,3 @@
 export { default } from './reply.vue';
 
-export {
-  createEmptyReply,
-  type Reply,
-  ReplyType,
-} from './types';
+export { createEmptyReply, type Reply, ReplyType } from './types';
-- 
Gitee


From d3cc555030cda818e3fdb4e906298e8939c666dc Mon Sep 17 00:00:00 2001
From: hw <huangwen@yuanshengcloud.com>
Date: Fri, 14 Nov 2025 09:46:55 +0800
Subject: [PATCH 4/4] =?UTF-8?q?fix:=20=E7=8E=AF=E5=A2=83=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E5=A4=8D=E5=8E=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web-antd/.env.development | 4 ++--
 apps/web-ele/.env.development  | 6 ++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/apps/web-antd/.env.development b/apps/web-antd/.env.development
index fe07e867cc..cff2557643 100644
--- a/apps/web-antd/.env.development
+++ b/apps/web-antd/.env.development
@@ -4,9 +4,9 @@ VITE_PORT=5666
 VITE_BASE=/
 
 # 请求路径
-VITE_BASE_URL=http://47.103.66.220:48080
+VITE_BASE_URL=http://127.0.0.1:48080
 # 接口地址
-VITE_GLOB_API_URL=http://47.103.66.220:48080/admin-api
+VITE_GLOB_API_URL=/admin-api
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
 VITE_UPLOAD_TYPE=server
 # 是否打开 devtools，true 为打开，false 为关闭
diff --git a/apps/web-ele/.env.development b/apps/web-ele/.env.development
index 274ab994d1..77c13d3984 100644
--- a/apps/web-ele/.env.development
+++ b/apps/web-ele/.env.development
@@ -4,11 +4,9 @@ VITE_PORT=5777
 VITE_BASE=/
 
 # 请求路径
-VITE_BASE_URL=http://47.103.66.220:48080
-# VITE_BASE_URL=http://192.168.1.49:48080
+VITE_BASE_URL=http://127.0.0.1:48080
 # 接口地址
-VITE_GLOB_API_URL=http://47.103.66.220:48080/admin-api
-# VITE_GLOB_API_URL=http://192.168.1.49:48080/admin-api
+VITE_GLOB_API_URL=/admin-api
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
 VITE_UPLOAD_TYPE=server
 # 是否打开 devtools，true 为打开，false 为关闭
-- 
Gitee