diff --git a/apps/web-antd/src/views/mp/autoReply/data.ts b/apps/web-antd/src/views/mp/autoReply/data.ts
index 4054ec64b3e230a691fb389eee8baf9752614595..3bd3ab03c4d29be301deb7cadbf775a9871816d9 100644
--- a/apps/web-antd/src/views/mp/autoReply/data.ts
+++ b/apps/web-antd/src/views/mp/autoReply/data.ts
@@ -3,27 +3,22 @@ import type { VxeGridPropTypes } from '#/adapter/vxe-table';
 
 import { markRaw } from 'vue';
 
-import { DICT_TYPE, AutoReplyMsgType as MsgType } from '@vben/constants';
+import {
+  AutoReplyMsgType,
+  DICT_TYPE,
+  RequestMessageTypes,
+} from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 
 import { WxReply } from '#/views/mp/components';
 
-// TODO @hw：要不要使用统一枚举？
-const RequestMessageTypes = new Set([
-  'image',
-  'link',
-  'location',
-  'shortvideo',
-  'text',
-  'video',
-  'voice',
-]); // 允许选择的请求消息类型
-
 /** 获取表格列配置 */
-export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
+export function useGridColumns(
+  msgType: AutoReplyMsgType,
+): VxeGridPropTypes.Columns {
   const columns: VxeGridPropTypes.Columns = [];
   // 请求消息类型列（仅消息回复显示）
-  if (msgType === MsgType.Message) {
+  if (msgType === AutoReplyMsgType.Message) {
     columns.push({
       field: 'requestMessageType',
       title: '请求消息类型',
@@ -32,7 +27,7 @@ export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
   }
 
   // 关键词列（仅关键词回复显示）
-  if (msgType === MsgType.Keyword) {
+  if (msgType === AutoReplyMsgType.Keyword) {
     columns.push({
       field: 'requestKeyword',
       title: '关键词',
@@ -41,7 +36,7 @@ export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
   }
 
   // 匹配类型列（仅关键词回复显示）
-  if (msgType === MsgType.Keyword) {
+  if (msgType === AutoReplyMsgType.Keyword) {
     columns.push({
       field: 'requestMatch',
       title: '匹配类型',
@@ -87,11 +82,11 @@ export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
 }
 
 /** 新增/修改的表单 */
-export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
+export function useFormSchema(msgType: AutoReplyMsgType): VbenFormSchema[] {
   const schema: VbenFormSchema[] = [];
 
   // 消息类型（仅消息回复显示）
-  if (msgType === MsgType.Message) {
+  if (msgType === AutoReplyMsgType.Message) {
     schema.push({
       fieldName: 'requestMessageType',
       label: '消息类型',
@@ -106,7 +101,7 @@ export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
   }
 
   // 匹配类型（仅关键词回复显示）
-  if (msgType === MsgType.Keyword) {
+  if (msgType === AutoReplyMsgType.Keyword) {
     schema.push({
       fieldName: 'requestMatch',
       label: '匹配类型',
@@ -124,7 +119,7 @@ export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
   }
 
   // 关键词（仅关键词回复显示）
-  if (msgType === MsgType.Keyword) {
+  if (msgType === AutoReplyMsgType.Keyword) {
     schema.push({
       fieldName: 'requestKeyword',
       label: '关键词',
diff --git a/apps/web-antd/src/views/mp/autoReply/index.vue b/apps/web-antd/src/views/mp/autoReply/index.vue
index c3c84a4424ac5f1f33349e0f027c6da6d1a8fd24..71191c59475fb92dc111388767f64eb503c56353 100644
--- a/apps/web-antd/src/views/mp/autoReply/index.vue
+++ b/apps/web-antd/src/views/mp/autoReply/index.vue
@@ -5,8 +5,7 @@ import type { MpAutoReplyApi } from '#/api/mp/autoReply';
 import { computed, nextTick, ref } from 'vue';
 
 import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
-// TODO @hw：直接使用 AutoReplyMsgType，不用 as
-import { AutoReplyMsgType as MsgType } from '@vben/constants';
+import { AutoReplyMsgType } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
 import { message, Row, Tabs } from 'ant-design-vue';
@@ -26,10 +25,10 @@ import Form from './modules/form.vue';
 
 defineOptions({ name: 'MpAutoReply' });
 
-const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
+const msgType = ref<string>(String(AutoReplyMsgType.Keyword)); // 消息类型
 
 const showCreateButton = computed(() => {
-  if (Number(msgType.value) !== MsgType.Follow) {
+  if (Number(msgType.value) !== AutoReplyMsgType.Follow) {
     return true;
   }
   try {
@@ -56,7 +55,7 @@ async function onTabChange(tabName: string) {
   msgType.value = tabName;
   await nextTick();
   // 更新 columns
-  const columns = useGridColumns(Number(msgType.value) as MsgType);
+  const columns = useGridColumns(Number(msgType.value) as AutoReplyMsgType);
   if (columns) {
     // 使用 setGridOptions 更新列配置
     gridApi.setGridOptions({ columns });
@@ -72,7 +71,7 @@ async function handleCreate() {
   const formValues = await gridApi.formApi.getValues();
   formModalApi
     .setData({
-      msgType: Number(msgType.value) as MsgType,
+      msgType: Number(msgType.value) as AutoReplyMsgType,
       accountId: formValues.accountId,
     })
     .open();
@@ -83,7 +82,7 @@ async function handleEdit(row: any) {
   const data = (await getAutoReply(row.id)) as any;
   formModalApi
     .setData({
-      msgType: Number(msgType.value) as MsgType,
+      msgType: Number(msgType.value) as AutoReplyMsgType,
       accountId: row.accountId,
       row: data,
     })
@@ -116,7 +115,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(Number(msgType.value) as MsgType),
+    columns: useGridColumns(Number(msgType.value) as AutoReplyMsgType),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -125,7 +124,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           return await getAutoReplyPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            type: Number(msgType.value) as MsgType,
+            type: Number(msgType.value) as AutoReplyMsgType,
             ...formValues,
           });
         },
@@ -161,14 +160,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
           class="w-full"
           @change="(activeKey) => onTabChange(activeKey as string)"
         >
-          <Tabs.TabPane :key="String(MsgType.Follow)">
+          <Tabs.TabPane :key="String(AutoReplyMsgType.Follow)">
             <template #tab>
               <Row align="middle">
                 <IconifyIcon icon="ep:star" class="mr-2px" /> 关注时回复
               </Row>
             </template>
           </Tabs.TabPane>
-          <Tabs.TabPane :key="String(MsgType.Message)">
+          <Tabs.TabPane :key="String(AutoReplyMsgType.Message)">
             <template #tab>
               <Row align="middle">
                 <IconifyIcon icon="ep:chat-line-round" class="mr-2px" />
@@ -176,7 +175,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               </Row>
             </template>
           </Tabs.TabPane>
-          <Tabs.TabPane :key="String(MsgType.Keyword)">
+          <Tabs.TabPane :key="String(AutoReplyMsgType.Keyword)">
             <template #tab>
               <Row align="middle">
                 <IconifyIcon icon="fa:newspaper-o" class="mr-2px" /> 关键词回复
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 16675401abb4dd5941b9618e6ecd245236ded4cc..18ab3e8a1dfebdd8c8abf1009ea01ddd9b35977a 100644
--- a/apps/web-antd/src/views/mp/autoReply/modules/form.vue
+++ b/apps/web-antd/src/views/mp/autoReply/modules/form.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
-// TODO @hw：这里 Reply 貌似不存在
-import type { Reply } from '#/views/mp/components';
+import type { Reply } from '#/views/mp/components/wx-reply/types';
 
 import { computed, nextTick, ref } from 'vue';
 
diff --git a/apps/web-antd/src/views/mp/components/wx-account-select/index.ts b/apps/web-antd/src/views/mp/components/wx-account-select/index.ts
deleted file mode 100644
index 82bc719660df7d230e048fd082f774b148c63a09..0000000000000000000000000000000000000000
--- a/apps/web-antd/src/views/mp/components/wx-account-select/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as WxAccountSelect } from './wx-account-select.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-antd/src/views/mp/components/wx-location/index.ts b/apps/web-antd/src/views/mp/components/wx-location/index.ts
deleted file mode 100644
index edd7994c920c0ebdcabd3fd7d9c4f4bad4b16058..0000000000000000000000000000000000000000
--- a/apps/web-antd/src/views/mp/components/wx-location/index.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export * from './types';
-export { default as WxLocation } from './wx-location.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-antd/src/views/mp/components/wx-location/types.ts b/apps/web-antd/src/views/mp/components/wx-location/types.ts
index 354876d5c34c91a3c3005143b090b0af7c9375c5..9566c2a6c1a6eaddecca9cf2f4fd9455b965220f 100644
--- a/apps/web-antd/src/views/mp/components/wx-location/types.ts
+++ b/apps/web-antd/src/views/mp/components/wx-location/types.ts
@@ -1,4 +1,3 @@
-// TODO @hw：ele 没这个文件，是不是也要搞个？
 export interface WxLocationProps {
   label: string;
   locationX: number;
diff --git a/apps/web-antd/src/views/mp/components/wx-location/wx-location.vue b/apps/web-antd/src/views/mp/components/wx-location/wx-location.vue
index ff2a9c1e0e61d6d4b597ba2c173abe5989f23f66..ac0c4affec35c3349e273407d6b90b422b4eef08 100644
--- a/apps/web-antd/src/views/mp/components/wx-location/wx-location.vue
+++ b/apps/web-antd/src/views/mp/components/wx-location/wx-location.vue
@@ -9,7 +9,7 @@ import { Col, Row } from 'ant-design-vue';
 
 defineOptions({ name: 'WxLocation' });
 
-// TODO @dylan：@hw：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈
+// TODO @dylan：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈
 const props = withDefaults(defineProps<WxLocationProps>(), {
   qqMapKey: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
 });
diff --git a/apps/web-antd/src/views/mp/components/wx-material-select/index.ts b/apps/web-antd/src/views/mp/components/wx-material-select/index.ts
deleted file mode 100644
index 82be61bdfc2a09e163779692a95ab9336bbee5fa..0000000000000000000000000000000000000000
--- a/apps/web-antd/src/views/mp/components/wx-material-select/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as WxMaterialSelect } from './wx-material-select.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue b/apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue
index c166d0a186c3066037f9919ec0500db7f390ce8c..3cde118fcc4cca5a0c4666abf9944ec2d78aca1d 100644
--- a/apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue
+++ b/apps/web-antd/src/views/mp/components/wx-material-select/wx-material-select.vue
@@ -43,7 +43,7 @@ const queryParams = reactive({
 }); // 查询参数
 
 const voiceGridColumns: VxeTableGridOptions<any>['columns'] = [
-  // TODO @hw：@dylan：any 有 linter 告警；看看别的模块哈
+  // TODO @dylan：any 有 linter 告警；看看别的模块哈
   {
     field: 'mediaId',
     title: '编号',
@@ -78,7 +78,7 @@ const voiceGridColumns: VxeTableGridOptions<any>['columns'] = [
 ];
 
 const videoGridColumns: VxeTableGridOptions<any>['columns'] = [
-  // TODO @hw：@dylan：any 有 linter 告警；看看别的模块哈
+  // TODO @dylan：any 有 linter 告警；看看别的模块哈
   {
     field: 'mediaId',
     title: '编号',
@@ -382,7 +382,7 @@ watch(
 </template>
 
 <style lang="scss" scoped>
-/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
 @media (width >= 992px) and (width <= 1300px) {
   .waterfall {
     column-count: 3;
diff --git a/apps/web-antd/src/views/mp/components/wx-msg/index.ts b/apps/web-antd/src/views/mp/components/wx-msg/index.ts
deleted file mode 100644
index ca147f3942d188e7eb92aa4dc3b74251dd0e5076..0000000000000000000000000000000000000000
--- a/apps/web-antd/src/views/mp/components/wx-msg/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './types';
-
-export { default as WxMsg } from './wx-msg.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue b/apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue
index debae40be674a2a6a329806899cb82c9f4899ae4..54ab655484352e707df4aea2ba99694c897c7533 100644
--- a/apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue
+++ b/apps/web-antd/src/views/mp/components/wx-msg/msg-list.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { User } from './types';
+import type { MpUserApi } from '#/api/mp/user/index';
 
 import { preferences } from '@vben/preferences';
 import { formatDateTime } from '@vben/utils';
@@ -11,7 +11,7 @@ defineOptions({ name: 'MsgList' });
 const props = defineProps<{
   accountId: number;
   list: any[];
-  user: User;
+  user: Partial<MpUserApi.User>;
 }>();
 
 const SendFrom = {
@@ -63,7 +63,7 @@ function getNickname(sendFrom: number) {
 <style lang="scss" scoped>
 /* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
 
-/** TODO @dylan：@hw 看看有没适合 tindwind 的哈。 */
+/** TODO @dylan： 看看有没适合 tindwind 的哈。 */
 
 @import url('./comment.scss');
 @import url('./card.scss');
diff --git a/apps/web-antd/src/views/mp/components/wx-msg/msg.vue b/apps/web-antd/src/views/mp/components/wx-msg/msg.vue
index 1db278c68aad653ef8115c284396b970607f10e4..199513c9b67db614884fb36a365413c448227379 100644
--- a/apps/web-antd/src/views/mp/components/wx-msg/msg.vue
+++ b/apps/web-antd/src/views/mp/components/wx-msg/msg.vue
@@ -2,7 +2,6 @@
 import { MpMsgType } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
-// TODO @hw：貌似这个 antd 才有？ele 需要有么？
 import {
   WxLocation,
   WxMusic,
diff --git a/apps/web-antd/src/views/mp/components/wx-msg/types.ts b/apps/web-antd/src/views/mp/components/wx-msg/types.ts
deleted file mode 100644
index 25c1c39d9885b049f588a967228b1467a1754309..0000000000000000000000000000000000000000
--- a/apps/web-antd/src/views/mp/components/wx-msg/types.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// TODO @hw：用 MpUserApi 里的 user 可以么？
-
-export interface User {
-  accountId: number;
-  avatar: string;
-  nickname: string;
-}
diff --git a/apps/web-antd/src/views/mp/components/wx-msg/wx-msg.vue b/apps/web-antd/src/views/mp/components/wx-msg/wx-msg.vue
index 874d372fc76aceaf64bbd47f19908f8713b5b3eb..494c41e1286041112eec98d2fc3a27a95b1e5bf7 100644
--- a/apps/web-antd/src/views/mp/components/wx-msg/wx-msg.vue
+++ b/apps/web-antd/src/views/mp/components/wx-msg/wx-msg.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { User } from './types';
+import type { MpUserApi } from '#/api/mp/user/index';
 
 import { nextTick, onMounted, reactive, ref, unref } from 'vue';
 
@@ -29,7 +29,7 @@ const queryParams = reactive({
   pageSize: 14, // 每页显示多少条
 });
 
-const user: User = reactive({
+const user: Partial<MpUserApi.User> = reactive({
   accountId, // 公众号账号编号
   avatar: preferences.app.defaultAvatar,
   nickname: '用户', // 由于微信不再提供昵称，直接使用"用户"展示
diff --git a/apps/web-antd/src/views/mp/components/wx-music/index.ts b/apps/web-antd/src/views/mp/components/wx-music/index.ts
deleted file mode 100644
index f2552af388b8ed7b312cceb0cf031175a69035b9..0000000000000000000000000000000000000000
--- a/apps/web-antd/src/views/mp/components/wx-music/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as WxMusic } from './wx-music.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-antd/src/views/mp/components/wx-music/wx-music.vue b/apps/web-antd/src/views/mp/components/wx-music/wx-music.vue
index 8a7253e47730c08253bc76b6bec7050499e62b1d..c081b69b8263a2dae9a9e477864a13824279ec97 100644
--- a/apps/web-antd/src/views/mp/components/wx-music/wx-music.vue
+++ b/apps/web-antd/src/views/mp/components/wx-music/wx-music.vue
@@ -3,6 +3,8 @@ import type { WxMusicProps } from './types';
 
 import { computed } from 'vue';
 
+import { Typography } from 'ant-design-vue';
+
 /** 微信消息 - 音乐 */
 defineOptions({ name: 'WxMusic' });
 
@@ -14,6 +16,8 @@ const props = withDefaults(defineProps<WxMusicProps>(), {
   thumbMediaUrl: '',
 });
 
+const { Link } = Typography;
+
 const href = computed(() => props.hqMusicUrl || props.musicUrl);
 
 defineExpose({
@@ -23,8 +27,7 @@ defineExpose({
 
 <template>
   <div>
-    <!-- TODO @hw：是不是用 antd link 更好？ -->
-    <a :href="href" target="_blank" class="text-success no-underline">
+    <Link :href="href" target="_blank" class="text-success no-underline">
       <div class="music-card">
         <div class="music-avatar">
           <img :src="thumbMediaUrl" alt="音乐封面" />
@@ -34,12 +37,12 @@ defineExpose({
           <div class="music-description">{{ description }}</div>
         </div>
       </div>
-    </a>
+    </Link>
   </div>
 </template>
 
 <style lang="scss" scoped>
-/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
 
 .music-card {
   display: flex;
diff --git a/apps/web-antd/src/views/mp/components/wx-news/index.ts b/apps/web-antd/src/views/mp/components/wx-news/index.ts
deleted file mode 100644
index 5bfa0c44de4dc2d740ad08a3dede7ceced7ed3f2..0000000000000000000000000000000000000000
--- a/apps/web-antd/src/views/mp/components/wx-news/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as WxNews } from './wx-news.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-antd/src/views/mp/components/wx-news/wx-news.vue b/apps/web-antd/src/views/mp/components/wx-news/wx-news.vue
index 0a846bb7785062f385f7c23d20f413001af97339..0078f505237fe94f6a8c074b7382552931c87366 100644
--- a/apps/web-antd/src/views/mp/components/wx-news/wx-news.vue
+++ b/apps/web-antd/src/views/mp/components/wx-news/wx-news.vue
@@ -52,7 +52,7 @@ defineExpose({
 </template>
 
 <style lang="scss" scoped>
-/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
 
 .news-home {
   width: 100%;
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/index.ts b/apps/web-antd/src/views/mp/components/wx-reply/index.ts
deleted file mode 100644
index feda15799ee010e4b038ba8bf1f89791df268aed..0000000000000000000000000000000000000000
--- a/apps/web-antd/src/views/mp/components/wx-reply/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export * from './types';
-
-export { default as WxReply } from './wx-reply.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue b/apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue
index db0d1e9dec53db377ae0a105ad5c3f72ba6d4b59..970b472de1371267dd30446e5ba36e3d965d4858 100644
--- a/apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/tab-image.vue
@@ -65,21 +65,20 @@ async function customRequest(options: any) {
 
     const result = await response.json();
 
-    // TODO @hw：if return 风格，简化掉。if (result.code !=== 0) { ... }
-    if (result.code === 0) {
-      // 清空上传时的各种数据
-      fileList.value = [];
-      uploadData.title = '';
-      uploadData.introduction = '';
-
-      // 上传好的文件，本质是个素材，所以可以进行选中
-      selectMaterial(result.data);
-      message.success('上传成功');
-      onSuccess(result, file);
-    } else {
+    if (result.code !== 0) {
       message.error(result.msg || '上传出错');
       onError(new Error(result.msg || '上传失败'));
+      return;
     }
+    // 清空上传时的各种数据
+    fileList.value = [];
+    uploadData.title = '';
+    uploadData.introduction = '';
+
+    // 上传好的文件，本质是个素材，所以可以进行选中
+    selectMaterial(result.data);
+    message.success('上传成功');
+    onSuccess(result, file);
   } catch (error) {
     message.error('上传失败，请重试');
     onError(error);
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/tab-music.vue b/apps/web-antd/src/views/mp/components/wx-reply/tab-music.vue
index 7bbb3fb5d03412dfd395a24da6a6142af4086dee..9dfc0dbccd74302596341ce39e80048a194cc1dd 100644
--- a/apps/web-antd/src/views/mp/components/wx-reply/tab-music.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/tab-music.vue
@@ -21,8 +21,6 @@ import {
 import { WxMaterialSelect } from '#/views/mp/components';
 import { UploadType, useBeforeUpload } from '#/views/mp/hooks/useUpload';
 
-// TODO @hw：类似 tab-image.vue 的建议
-
 defineOptions({ name: 'TabMusic' });
 
 const props = defineProps<{
@@ -76,20 +74,20 @@ async function customRequest(options: any) {
 
     const result = await response.json();
 
-    if (result.code === 0) {
-      // 清空上传时的各种数据
-      fileList.value = [];
-      uploadData.title = '';
-      uploadData.introduction = '';
-
-      // 上传好的文件，本质是个素材，所以可以进行选中
-      selectMaterial(result.data);
-      message.success('上传成功');
-      onSuccess(result, file);
-    } else {
+    if (result.code !== 0) {
       message.error(result.msg || '上传出错');
       onError(new Error(result.msg || '上传失败'));
+      return;
     }
+    // 清空上传时的各种数据
+    fileList.value = [];
+    uploadData.title = '';
+    uploadData.introduction = '';
+
+    // 上传好的文件，本质是个素材，所以可以进行选中
+    selectMaterial(result.data);
+    message.success('上传成功');
+    onSuccess(result, file);
   } catch (error) {
     message.error('上传失败，请重试');
     onError(error);
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/tab-news.vue b/apps/web-antd/src/views/mp/components/wx-reply/tab-news.vue
index ec8b7890b5763025337f766e03d001087db30ba8..ffe4a183f797c738662df095ccf436fb3cb51141 100644
--- a/apps/web-antd/src/views/mp/components/wx-reply/tab-news.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/tab-news.vue
@@ -93,7 +93,7 @@ function onDelete() {
 </template>
 
 <style lang="scss" scoped>
-/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
 .select-item {
   width: 280px;
   padding: 10px;
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/tab-video.vue b/apps/web-antd/src/views/mp/components/wx-reply/tab-video.vue
index a8365a8a1c9de7f4ea95beab408469fa189cfb87..4da95edad3d04ccfd82172d99f8120e129d36c30 100644
--- a/apps/web-antd/src/views/mp/components/wx-reply/tab-video.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/tab-video.vue
@@ -74,21 +74,20 @@ async function customRequest(options: any) {
 
     const result = await response.json();
 
-    // TODO @hw：也采用类似 ele 的 if return(res.code !== 0) return 写法；
-    if (result.code === 0) {
-      // 清空上传时的各种数据
-      fileList.value = [];
-      uploadData.title = '';
-      uploadData.introduction = '';
-
-      // 选择素材
-      selectMaterial(result.data);
-      message.success('上传成功');
-      onSuccess(result, file);
-    } else {
+    if (result.code !== 0) {
       message.error(result.msg || '上传出错');
       onError(new Error(result.msg || '上传失败'));
+      return;
     }
+    // 清空上传时的各种数据
+    fileList.value = [];
+    uploadData.title = '';
+    uploadData.introduction = '';
+
+    // 选择素材
+    selectMaterial(result.data);
+    message.success('上传成功');
+    onSuccess(result, file);
   } catch (error) {
     message.error('上传失败，请重试');
     onError(error);
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/tab-voice.vue b/apps/web-antd/src/views/mp/components/wx-reply/tab-voice.vue
index 0b81f4989caab4269bdba79988b65d2d91d4a34c..a09fb9e62cc27f36e9bae7b80b674ec8ec190400 100644
--- a/apps/web-antd/src/views/mp/components/wx-reply/tab-voice.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/tab-voice.vue
@@ -66,21 +66,21 @@ async function customRequest(options: any) {
 
     const result = await response.json();
 
-    // TODO @hw：if result.code !== 0 return，代码简洁一点。
-    if (result.code === 0) {
-      // 清空上传时的各种数据
-      fileList.value = [];
-      uploadData.title = '';
-      uploadData.introduction = '';
-
-      // 上传好的文件，本质是个素材，所以可以进行选中
-      selectMaterial(result.data);
-      message.success('上传成功');
-      onSuccess(result, file);
-    } else {
+    if (result.code !== 0) {
       message.error(result.msg || '上传出错');
       onError(new Error(result.msg || '上传失败'));
+      return;
     }
+
+    // 清空上传时的各种数据
+    fileList.value = [];
+    uploadData.title = '';
+    uploadData.introduction = '';
+
+    // 上传好的文件，本质是个素材，所以可以进行选中
+    selectMaterial(result.data);
+    message.success('上传成功');
+    onSuccess(result, file);
   } catch (error) {
     message.error('上传失败，请重试');
     onError(error);
@@ -169,7 +169,7 @@ function selectMaterial(item: Reply) {
 </template>
 
 <style lang="scss" scoped>
-/** TODO @dylan：@hw：看看有没适合 tindwind 的哈。 */
+/** TODO @dylan：看看有没适合 tindwind 的哈。 */
 .select-item {
   padding: 10px;
   margin: 0 auto 10px;
diff --git a/apps/web-antd/src/views/mp/components/wx-reply/wx-reply.vue b/apps/web-antd/src/views/mp/components/wx-reply/wx-reply.vue
index a90528a1cccc0662e5d4fd71b90e9a95f18d2e28..c9b5277f269e0cae47da35c88abc23dccf22c3bb 100644
--- a/apps/web-antd/src/views/mp/components/wx-reply/wx-reply.vue
+++ b/apps/web-antd/src/views/mp/components/wx-reply/wx-reply.vue
@@ -26,7 +26,6 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
-// TODO @hw：antd 和 ele 风格不同，需要统一；
 interface Props {
   modelValue: Reply | undefined;
   newsType?: NewsType;
@@ -45,7 +44,6 @@ const reply = computed<Reply>({
 const tabCache = new Map<ReplyType, Reply>(); // 作为多个标签保存各自 Reply 的缓存
 const currentTab = ref<ReplyType>(props.modelValue?.type || ReplyType.Text); // 采用独立的 ref 来保存当前 tab，避免在 watch 标签变化，对 reply 进行赋值会产生了循环调用
 
-// TODO @hw：antd 和 ele 风格不同，需要统一；
 // 监听 modelValue 变化，同步更新 currentTab 和缓存
 watch(
   () => props.modelValue,
@@ -64,7 +62,6 @@ watch(
   { immediate: true, deep: true },
 );
 
-// TODO @hw：antd 和 ele 风格不同，需要统一；
 watch(
   currentTab,
   (newTab, oldTab) => {
diff --git a/apps/web-antd/src/views/mp/components/wx-video-play/index.ts b/apps/web-antd/src/views/mp/components/wx-video-play/index.ts
deleted file mode 100644
index 465b0da9391241daa2321613a4dad7a2c71291ce..0000000000000000000000000000000000000000
--- a/apps/web-antd/src/views/mp/components/wx-video-play/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as WxVideoPlayer } from './wx-video-play.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-antd/src/views/mp/components/wx-voice-play/index.ts b/apps/web-antd/src/views/mp/components/wx-voice-play/index.ts
deleted file mode 100644
index ef69f0a3a9cdbe9601aa3808bce54598aeee7ab7..0000000000000000000000000000000000000000
--- a/apps/web-antd/src/views/mp/components/wx-voice-play/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as WxVoicePlayer } from './wx-voice-play.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-antd/src/views/mp/draft/data.ts b/apps/web-antd/src/views/mp/draft/data.ts
index 7f9344275f8c190e2e0580438b0de91943a2806c..1ee1e10c1bb5f79c78b40f6e9ca7ca5df396c4c0 100644
--- a/apps/web-antd/src/views/mp/draft/data.ts
+++ b/apps/web-antd/src/views/mp/draft/data.ts
@@ -1,14 +1,28 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 
+import { formatDateTime } from '@vben/utils';
+
 /** 获取表格列配置 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
   return [
     {
-      field: 'content',
-      title: '图文内容',
-      minWidth: 300,
-      slots: { default: 'content' },
+      field: 'cover',
+      title: '图片',
+      width: 360,
+      slots: { default: 'cover' },
+    },
+    {
+      field: 'title',
+      title: '标题',
+      slots: { default: 'title' },
+    },
+    {
+      field: 'updateTime',
+      title: '修改时间',
+      formatter: ({ row }) => {
+        return formatDateTime(row.updateTime * 1000);
+      },
     },
     {
       title: '操作',
diff --git a/apps/web-antd/src/views/mp/draft/index.vue b/apps/web-antd/src/views/mp/draft/index.vue
index d15ffc439a4c145237ba665871e93976b1f06a3c..cc06b6ec7bdaefa789bb3a9e1d27cc4f184ab365 100644
--- a/apps/web-antd/src/views/mp/draft/index.vue
+++ b/apps/web-antd/src/views/mp/draft/index.vue
@@ -9,11 +9,11 @@ import { message } from 'ant-design-vue';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { createEmptyNewsItem, deleteDraft, getDraftPage } from '#/api/mp/draft';
+// import { getDraftPage } from '#/api/mp/draft'; // 调试时注释掉
 import { submitFreePublish } from '#/api/mp/freePublish';
 import { WxAccountSelect } from '#/views/mp/components';
 
 import { useGridColumns, useGridFormSchema } from './data';
-import DraftTableCell from './modules/draft-table.vue';
 import Form from './modules/form.vue';
 
 defineOptions({ name: 'MpDraft' });
@@ -128,6 +128,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     proxyConfig: {
       ajax: {
         query: async ({ page }, formValues) => {
+          // 调试用：跳过请求，直接返回模拟数据
           const drafts = await getDraftPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
@@ -142,9 +143,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
               });
             }
           });
+
           return {
-            list: drafts.list as unknown as MpDraftApi.DraftArticle[],
-            total: drafts.total,
+            list: drafts.list,
+            total: drafts.total, // 模拟总数
           };
         },
       },
@@ -187,10 +189,40 @@ const [Grid, gridApi] = useVbenVxeGrid({
           ]"
         />
       </template>
-      <!-- TODO @hw：按照微信群沟通的，换下卡片的样式。 -->
-      <template #content="{ row }">
-        <DraftTableCell :row="row" />
-        <!-- TODO @hw：增加一列，更新时间。 -->
+      <template #cover="{ row }">
+        <div
+          v-if="row.content?.newsItem && row.content.newsItem.length > 0"
+          class="flex flex-col items-center justify-center gap-1"
+        >
+          <a
+            v-for="(item, index) in row.content.newsItem"
+            :key="index"
+            :href="(item as any).url"
+            target="_blank"
+          >
+            <img
+              :src="item.picUrl || item.thumbUrl"
+              class="h-36 w-[50px] rounded object-cover"
+              :alt="`文章${index + 1}封面图`"
+            />
+          </a>
+        </div>
+        <span v-else class="text-gray-400">-</span>
+      </template>
+      <template #title="{ row }">
+        <div
+          v-if="row.content?.newsItem && row.content.newsItem.length > 0"
+          class="space-y-1"
+        >
+          <div
+            v-for="(item, index) in row.content.newsItem"
+            :key="index"
+            class="flex h-36 items-center justify-center"
+          >
+            {{ item.title }}
+          </div>
+        </div>
+        <span v-else class="text-gray-400">-</span>
       </template>
       <template #actions="{ row }">
         <TableAction
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 3a758e4378b316431fe5abd578340b2c66e3e95f..42f41c6abe5bde57d97eb81b632e738617d1aadb 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,6 +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/components/wx-material-select/wx-material-select.vue';
 
 const props = defineProps<{
   isFirst: boolean;
@@ -133,14 +134,13 @@ function onUploadError(err: Error) {
           支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
         </div>
       </div>
-      <!-- TODO @hw：这个貌似不行；ele 我试了下，可以的 -->
       <Modal
         v-model:open="dialogVisible"
         title="图片选择"
         width="65%"
         :footer="null"
       >
-        <MaterialSelect
+        <WxMaterialSelect
           type="image"
           :account-id="accountId!"
           @select-material="onMaterialSelected"
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
deleted file mode 100644
index ae9efcc7eaf8efdbdefc99049503adda06b52a79..0000000000000000000000000000000000000000
--- a/apps/web-antd/src/views/mp/draft/modules/draft-table.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script lang="ts" setup>
-import type { MpDraftApi } from '#/api/mp/draft';
-
-import { WxNews } from '#/views/mp/components';
-
-// TODO @hw：按照微信里说的，感觉这个可以干掉。少点组件哈。= = mp 模块，小组件可太多了。。。
-defineOptions({ name: 'DraftTableCell' });
-
-const props = defineProps<{
-  row: MpDraftApi.DraftArticle;
-}>();
-</script>
-
-<template>
-  <div class="p-2.5">
-    <div v-if="props.row.content && props.row.content.newsItem">
-      <WxNews :articles="props.row.content.newsItem" />
-    </div>
-  </div>
-</template>
diff --git a/apps/web-antd/src/views/mp/draft/modules/news-form.vue b/apps/web-antd/src/views/mp/draft/modules/news-form.vue
index 2a67c2305be2660035e17ebf53890b2d743b6307..b11d614722b5267433fcdfccb7ba3c652e9fad6e 100644
--- a/apps/web-antd/src/views/mp/draft/modules/news-form.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/news-form.vue
@@ -88,23 +88,25 @@ function plusNews() {
       <div class="mx-auto mb-[10px] w-[60%] border border-[#eaeaea] p-[10px]">
         <div v-for="(news, index) in newsList" :key="index">
           <div
-            class="group relative mx-auto h-[120px] w-full cursor-pointer bg-white"
+            class="group relative mx-auto mb-[10px] w-full cursor-pointer border-[2px] bg-white"
             v-if="index === 0"
-            :class="{
-              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
-            }"
+            :class="
+              activeNewsIndex === index
+                ? 'border-green-500'
+                : 'border-transparent'
+            "
             @click="activeNewsIndex = index"
           >
-            <div class="relative h-[120px] w-full bg-[#acadae]">
+            <div class="relative 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"
+                class="absolute bottom-0 left-0 inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-center text-[15px] text-white opacity-65"
               >
                 {{ news.title }}
               </div>
             </div>
             <div
-              class="relative -bottom-[25px] hidden text-center group-hover:block"
+              class="relative flex justify-center gap-[10px] py-[5px] text-center"
               v-if="newsList.length > 1"
             >
               <Button
@@ -127,25 +129,28 @@ function plusNews() {
               </Button>
             </div>
           </div>
-          <!-- TODO @hw：1）每个文章的选中框太粗了；2）没完全覆盖住文章；；；最好首个文章，和第个文章的情况，都看看 -->
           <div
-            class="group relative mx-auto w-full cursor-pointer border-t border-[#eaeaea] bg-white py-[5px]"
+            class="group relative mx-auto mb-[10px] cursor-pointer border-[2px] bg-white"
             v-if="index > 0"
-            :class="{
-              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
-            }"
+            :class="
+              activeNewsIndex === index
+                ? 'border-green-500'
+                : 'border-transparent'
+            "
             @click="activeNewsIndex = index"
           >
-            <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 class="relative">
+              <div class="bg-[#acadae]">
+                <img class="block h-full w-full" :src="news.thumbUrl" />
+                <div
+                  class="absolute bottom-0 left-0 inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-center text-[15px] text-white opacity-65"
+                >
+                  {{ news.title }}
+                </div>
               </div>
             </div>
-            <!-- TODO @hw：这里的按钮，交互不太对。应该在每个卡片的里面；或者类似公众号现在的交互，放到右侧；。。。复现本周：如果有 2 个文章的时候 -->
-            <!-- TODO @hw：当有 2 个文章的时候，挪到第二个文章的时候，卡片会变大。期望：不变大 -->
             <div
-              class="relative -bottom-[25px] hidden text-center group-hover:block"
+              class="relative flex justify-center gap-[10px] py-[5px] text-center"
             >
               <Button
                 v-if="newsList.length > index + 1"
diff --git a/apps/web-antd/src/views/mp/material/components/VideoTable.vue b/apps/web-antd/src/views/mp/material/components/VideoTable.vue
index b61d4cb17a182d78643cf8ecfcdbd82a01676a94..a8b89c5a23b3eabca216f350ff8052d6c7a7c6dc 100644
--- a/apps/web-antd/src/views/mp/material/components/VideoTable.vue
+++ b/apps/web-antd/src/views/mp/material/components/VideoTable.vue
@@ -12,7 +12,7 @@ import { Button } from 'ant-design-vue';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { WxVideoPlayer } from '#/views/mp/components';
 
-// TODO @dylan：@hw：vue 组件名小写 + 中划线
+// TODO @dylan：vue 组件名小写 + 中划线
 
 const props = defineProps<{
   list: any[];
diff --git a/apps/web-antd/src/views/mp/material/index.vue b/apps/web-antd/src/views/mp/material/index.vue
index 91dbfd8c9a58915edc666523311b2e209d45ce43..a31c788d096038fa4285dc4e86d1776b2d206b77 100644
--- a/apps/web-antd/src/views/mp/material/index.vue
+++ b/apps/web-antd/src/views/mp/material/index.vue
@@ -5,7 +5,7 @@ import { useAccess } from '@vben/access';
 import { DocAlert, Page } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
-// TODO @dlyan、@hw：可以先 antd 迁移完，在搞 ele；避免搞两遍；
+// TODO @dlyan、可以先 antd 迁移完，在搞 ele；避免搞两遍；
 import {
   Button,
   Card,
@@ -117,8 +117,8 @@ async function handleDelete(id: number) {
       <Card :bordered="false" class="mt-4 h-[88%]">
         <Tabs v-model:active-key="type" @change="onTabChange">
           <!-- tab 1：图片  -->
-          <!-- TODO @hw：要不这里，也改成 grid 视图；然后操作按钮，都改成右上角； -->
-          <!-- TODO @hw：图片展示时，就编号、文件名、图片、上传时间、操作； -->
+          <!-- TODO @dylan：要不这里，也改成 grid 视图；然后操作按钮，都改成右上角； -->
+          <!-- TODO @dylan：图片展示时，就编号、文件名、图片、上传时间、操作； -->
           <Tabs.TabPane :key="UploadType.Image">
             <template #tab>
               <span class="flex items-center">
diff --git a/apps/web-antd/src/views/mp/menu/modules/assets/iphone_backImg.png b/apps/web-antd/src/views/mp/menu/assets/iphone_backImg.png
similarity index 100%
rename from apps/web-antd/src/views/mp/menu/modules/assets/iphone_backImg.png
rename to apps/web-antd/src/views/mp/menu/assets/iphone_backImg.png
diff --git a/apps/web-antd/src/views/mp/menu/modules/assets/menu_foot.png b/apps/web-antd/src/views/mp/menu/assets/menu_foot.png
similarity index 100%
rename from apps/web-antd/src/views/mp/menu/modules/assets/menu_foot.png
rename to apps/web-antd/src/views/mp/menu/assets/menu_foot.png
diff --git a/apps/web-antd/src/views/mp/menu/modules/assets/menu_head.png b/apps/web-antd/src/views/mp/menu/assets/menu_head.png
similarity index 100%
rename from apps/web-antd/src/views/mp/menu/modules/assets/menu_head.png
rename to apps/web-antd/src/views/mp/menu/assets/menu_head.png
diff --git a/apps/web-antd/src/views/mp/menu/index.vue b/apps/web-antd/src/views/mp/menu/index.vue
index abbb8290044b5a8d7f6e2fb859c5c904e28322e5..615c631a61cc8db57d905a33576202592987fc00 100644
--- a/apps/web-antd/src/views/mp/menu/index.vue
+++ b/apps/web-antd/src/views/mp/menu/index.vue
@@ -16,11 +16,12 @@ import {
   MENU_NOT_SELECTED,
   useGridFormSchema,
 } from '#/views/mp/menu/data';
-import { MenuEditor, MenuPreviewer } from '#/views/mp/menu/modules';
+import Editor from '#/views/mp/menu/modules/editor.vue';
+import Previewer from '#/views/mp/menu/modules/previewer.vue';
 
-import iphoneBackImg from './modules/assets/iphone_backImg.png';
-import menuFootImg from './modules/assets/menu_foot.png';
-import menuHeadImg from './modules/assets/menu_head.png';
+import iphoneBackImg from './assets/iphone_backImg.png';
+import menuFootImg from './assets/menu_foot.png';
+import menuHeadImg from './assets/menu_head.png';
 
 defineOptions({ name: 'MpMenu' });
 
@@ -64,8 +65,8 @@ const parentIndex = ref(-1);
 // ======================== 菜单编辑 ========================
 
 const showRightPanel = ref(false); // 右边配置显示默认详情还是配置详情
-const isParent = ref<boolean>(true); // 是否一级菜单，控制MenuEditor中name字段长度
-const activeMenu = ref<Menu>({}); // 选中菜单，MenuEditor的modelValue
+const isParent = ref<boolean>(true); // 是否一级菜单，控制Editor中name字段长度
+const activeMenu = ref<Menu>({}); // 选中菜单，Editor的modelValue
 
 // 一些临时值放在这里进行判断，如果放在 activeMenu，由于引用关系，menu 也会多了多余的参数
 const tempSelfObj = ref<{
@@ -327,7 +328,7 @@ function menuToBackend(menu: any) {
             class="bg-[position:0_0] bg-no-repeat pl-[43px] text-xs after:clear-both after:table after:content-['']"
             :style="{ backgroundImage: `url(${menuFootImg})` }"
           >
-            <MenuPreviewer
+            <Previewer
               v-model="menuList"
               :account-id="accountId"
               :active-index="activeIndex"
@@ -354,7 +355,7 @@ function menuToBackend(menu: any) {
           class="float-left ml-5 box-border w-[63%] bg-[#e8e7e7] p-5"
           v-if="showRightPanel"
         >
-          <MenuEditor
+          <Editor
             :account-id="accountId"
             :is-parent="isParent"
             v-model="activeMenu"
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 962d82f6a6f425c7b4d5566865358f6341900cff..634ddc6797a1c7da4b3770e1d2297483a85471a9 100644
--- a/apps/web-antd/src/views/mp/menu/modules/editor.vue
+++ b/apps/web-antd/src/views/mp/menu/modules/editor.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, nextTick, ref, watch } from 'vue';
+import { computed, ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
@@ -37,17 +37,8 @@ const menu = computed({
   },
 });
 const showNewsDialog = ref(false);
-// TODO @hw：这个 reset 还有用么？
-const hackResetReplySelect = ref(false);
 const isLeave = computed<boolean>(() => !(menu.value.children?.length > 0));
 
-watch(menu, () => {
-  hackResetReplySelect.value = false; // 销毁组件
-  nextTick(() => {
-    hackResetReplySelect.value = true; // 重建组件
-  });
-});
-
 // ======================== 菜单编辑（素材选择） ========================
 
 /** 选择素材 */
diff --git a/apps/web-antd/src/views/mp/menu/modules/index.ts b/apps/web-antd/src/views/mp/menu/modules/index.ts
deleted file mode 100644
index 8215fc86d3d78de435c3959ba83dbfa92cf0f1ad..0000000000000000000000000000000000000000
--- a/apps/web-antd/src/views/mp/menu/modules/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { default as MenuEditor } from './editor.vue';
-export { default as MenuPreviewer } from './previewer.vue';
-export type * from './types';
-export * from './types';
-// TODO @hw：这个貌似没用，可以考虑删除哈。modules 里，直接用就完事啦！
\ No newline at end of file
diff --git a/apps/web-antd/src/views/mp/menu/modules/previewer.vue b/apps/web-antd/src/views/mp/menu/modules/previewer.vue
index 8a2f05457ec8b236a4124e81eb672c57195b0c74..cd13dbabc96810a37ad2e1a4e40630d8615f9c31 100644
--- a/apps/web-antd/src/views/mp/menu/modules/previewer.vue
+++ b/apps/web-antd/src/views/mp/menu/modules/previewer.vue
@@ -193,8 +193,6 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
 </template>
 
 <style lang="scss" scoped>
-/** todo @hw：antd 和 ele 这里的写法，看看能不能统一； */
-
 .draggable-ghost {
   background: #f7fafc;
   border: 1px solid #4299e1;
diff --git a/apps/web-antd/src/views/mp/message/index.vue b/apps/web-antd/src/views/mp/message/index.vue
index 63e9a08602071ec65ecea05050d42e183ba15a30..1d6be08fd501b6718ea3d06846444748103dbc3e 100644
--- a/apps/web-antd/src/views/mp/message/index.vue
+++ b/apps/web-antd/src/views/mp/message/index.vue
@@ -189,7 +189,7 @@ function showTotal(total: number) {
       :footer="null"
       destroy-on-close
     >
-      <!-- TODO @hw，@dlayn：这里有告警； -->
+      <!-- TODO @dlayn：这里有告警； -->
       <WxMsg :user-id="messageBoxUserId" />
     </Modal>
   </Page>
diff --git a/apps/web-ele/src/api/mp/material/index.ts b/apps/web-ele/src/api/mp/material/index.ts
index 73ca899ee7c8133be0464e6417c772bce0610790..91ca6ddf04409b0249e3929292eacbef155489b4 100644
--- a/apps/web-ele/src/api/mp/material/index.ts
+++ b/apps/web-ele/src/api/mp/material/index.ts
@@ -1,14 +1,8 @@
 import type { PageParam, PageResult } from '@vben/request';
 
-import { requestClient } from '#/api/request';
+import { MaterialType } from '@vben/constants';
 
-/** 素材类型枚举 */
-export enum MaterialType {
-  IMAGE = 1, // 图片
-  THUMB = 4, // 缩略图
-  VIDEO = 3, // 视频
-  VOICE = 2, // 语音
-}
+import { requestClient } from '#/api/request';
 
 export namespace MpMaterialApi {
   /** 素材信息 */
diff --git a/apps/web-ele/src/views/mp/autoReply/data.ts b/apps/web-ele/src/views/mp/autoReply/data.ts
index dbac8b7f15cff1df669e36081622345c8ad92569..3bd3ab03c4d29be301deb7cadbf775a9871816d9 100644
--- a/apps/web-ele/src/views/mp/autoReply/data.ts
+++ b/apps/web-ele/src/views/mp/autoReply/data.ts
@@ -1,37 +1,24 @@
 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 { getDictObj, getDictOptions } from '@vben/hooks';
+import {
+  AutoReplyMsgType,
+  DICT_TYPE,
+  RequestMessageTypes,
+} from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';
 
-import { getSimpleAccountList } from '#/api/mp/account';
-import { WxReplySelect } from '#/views/mp/components';
-
-import { MsgType } from './modules/types';
-
-/** 关联数据 */
-let accountList: MpAccountApi.AccountSimple[] = [];
-getSimpleAccountList().then((data) => (accountList = data));
-
-// TODO @hw：要不要使用统一枚举？
-const RequestMessageTypes = new Set([
-  'image',
-  'link',
-  'location',
-  'shortvideo',
-  'text',
-  'video',
-  'voice',
-]); // 允许选择的请求消息类型
+import { WxReply } from '#/views/mp/components';
 
 /** 获取表格列配置 */
-export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
+export function useGridColumns(
+  msgType: AutoReplyMsgType,
+): VxeGridPropTypes.Columns {
   const columns: VxeGridPropTypes.Columns = [];
   // 请求消息类型列（仅消息回复显示）
-  if (msgType === MsgType.Message) {
+  if (msgType === AutoReplyMsgType.Message) {
     columns.push({
       field: 'requestMessageType',
       title: '请求消息类型',
@@ -40,7 +27,7 @@ export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
   }
 
   // 关键词列（仅关键词回复显示）
-  if (msgType === MsgType.Keyword) {
+  if (msgType === AutoReplyMsgType.Keyword) {
     columns.push({
       field: 'requestKeyword',
       title: '关键词',
@@ -49,7 +36,7 @@ export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
   }
 
   // 匹配类型列（仅关键词回复显示）
-  if (msgType === MsgType.Keyword) {
+  if (msgType === AutoReplyMsgType.Keyword) {
     columns.push({
       field: 'requestMatch',
       title: '匹配类型',
@@ -67,9 +54,10 @@ export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
       field: 'responseMessageType',
       title: '回复消息类型',
       minWidth: 120,
-      // TODO @hw：这里和 antd 有差别。两侧尽量统一；
-      formatter: ({ cellValue }) =>
-        getDictObj(DICT_TYPE.MP_MESSAGE_TYPE, String(cellValue))?.label ?? '',
+      cellRender: {
+        name: 'CellDict',
+        props: { type: DICT_TYPE.MP_MESSAGE_TYPE },
+      },
     },
     {
       field: 'responseContent',
@@ -94,12 +82,11 @@ export function useGridColumns(msgType: MsgType): VxeGridPropTypes.Columns {
 }
 
 /** 新增/修改的表单 */
-export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
+export function useFormSchema(msgType: AutoReplyMsgType): VbenFormSchema[] {
   const schema: VbenFormSchema[] = [];
 
   // 消息类型（仅消息回复显示）
-  // TODO @hw：这里和 antd 有差别。两侧尽量统一；
-  if (Number(msgType) === MsgType.Message) {
+  if (msgType === AutoReplyMsgType.Message) {
     schema.push({
       fieldName: 'requestMessageType',
       label: '消息类型',
@@ -114,8 +101,7 @@ export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
   }
 
   // 匹配类型（仅关键词回复显示）
-  // TODO @hw：这里和 antd 有差别。两侧尽量统一；
-  if (Number(msgType) === MsgType.Keyword) {
+  if (msgType === AutoReplyMsgType.Keyword) {
     schema.push({
       fieldName: 'requestMatch',
       label: '匹配类型',
@@ -133,8 +119,7 @@ export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
   }
 
   // 关键词（仅关键词回复显示）
-  // TODO @hw：这里和 antd 有差别。两侧尽量统一；
-  if (Number(msgType) === MsgType.Keyword) {
+  if (msgType === AutoReplyMsgType.Keyword) {
     schema.push({
       fieldName: 'requestKeyword',
       label: '关键词',
@@ -147,31 +132,22 @@ export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
     });
   }
   // 回复消息
-  // TODO @hw：这里和 antd 有差别。两侧尽量统一；
   schema.push({
     fieldName: 'reply',
     label: '回复消息',
-    component: markRaw(WxReplySelect),
+    component: markRaw(WxReply),
+    modelPropName: 'modelValue',
   });
   return schema;
 }
 
 /** 列表的搜索表单 */
-// TODO @hw：是不是用 wxselect 组件哈？
 export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'accountId',
       label: '公众号',
-      component: 'ApiSelect',
-      componentProps: {
-        options: accountList.map((item) => ({
-          label: item.name,
-          value: item.id,
-        })),
-        placeholder: '请选择公众号',
-      },
-      defaultValue: accountList[0]?.id,
+      component: 'Input',
     },
   ];
 }
diff --git a/apps/web-ele/src/views/mp/autoReply/index.vue b/apps/web-ele/src/views/mp/autoReply/index.vue
index 23680868b321d7773c10d250f4a765562172aaae..9477090eacad48c1b635f12e63d49e7feaa85f13 100644
--- a/apps/web-ele/src/views/mp/autoReply/index.vue
+++ b/apps/web-ele/src/views/mp/autoReply/index.vue
@@ -1,13 +1,14 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpAutoReplyApi } from '#/api/mp/autoReply';
 
 import { computed, nextTick, ref } from 'vue';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { AutoReplyMsgType } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
 import {
-  ElLoading,
   ElMessage,
   ElMessageBox,
   ElRow,
@@ -27,14 +28,13 @@ import { WxAccountSelect } from '#/views/mp/components';
 import { useGridColumns, useGridFormSchema } from './data';
 import Content from './modules/content.vue';
 import Form from './modules/form.vue';
-import { MsgType } from './modules/types';
 
 defineOptions({ name: 'MpAutoReply' });
 
-const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
+const msgType = ref<string>(String(AutoReplyMsgType.Keyword)); // 消息类型
 
 const showCreateButton = computed(() => {
-  if (Number(msgType.value) !== MsgType.Follow) {
+  if (Number(msgType.value) !== AutoReplyMsgType.Follow) {
     return true;
   }
   try {
@@ -61,7 +61,7 @@ async function onTabChange(tabName: string) {
   msgType.value = tabName;
   await nextTick();
   // 更新 columns
-  const columns = useGridColumns(Number(msgType.value) as MsgType);
+  const columns = useGridColumns(Number(msgType.value) as AutoReplyMsgType);
   if (columns) {
     // 使用 setGridOptions 更新列配置
     gridApi.setGridOptions({ columns });
@@ -77,8 +77,7 @@ async function handleCreate() {
   const formValues = await gridApi.formApi.getValues();
   formModalApi
     .setData({
-      // TODO @hw：这里和 antd 不同，需要 number 下么？
-      msgType: msgType.value,
+      msgType: Number(msgType.value) as AutoReplyMsgType,
       accountId: formValues.accountId,
     })
     .open();
@@ -87,14 +86,11 @@ async function handleCreate() {
 /** 修改自动回复 */
 async function handleEdit(row: any) {
   const data = (await getAutoReply(row.id)) as any;
-  // TODO @hw：这里使用 formValues，还是使用 row？
-  const formValues = await gridApi.formApi.getValues();
   formModalApi
     .setData({
-      // TODO @hw：这里和 antd 不同，需要 number 下么？
-      msgType: msgType.value,
+      msgType: Number(msgType.value) as AutoReplyMsgType,
+      accountId: row.accountId,
       row: data,
-      accountId: formValues.accountId,
     })
     .open();
 }
@@ -102,16 +98,10 @@ async function handleEdit(row: any) {
 /** 删除自动回复 */
 async function handleDelete(row: any) {
   await ElMessageBox.confirm('是否确认删除此数据?');
-  const loadingInstance = ElLoading.service({
-    text: $t('ui.actionMessage.deleting', ['自动回复']),
-  });
-  try {
-    await deleteAutoReply(row.id);
-    ElMessage.success('删除成功');
-    handleRefresh();
-  } finally {
-    loadingInstance.close();
-  }
+
+  await deleteAutoReply(row.id);
+  ElMessage.success('删除成功');
+  handleRefresh();
 }
 
 const [FormModal, formModalApi] = useVbenModal({
@@ -124,7 +114,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
     schema: useGridFormSchema(),
   },
   gridOptions: {
-    columns: useGridColumns(Number(msgType.value) as MsgType),
+    columns: useGridColumns(Number(msgType.value) as AutoReplyMsgType),
     height: 'auto',
     keepSource: true,
     proxyConfig: {
@@ -133,7 +123,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           return await getAutoReplyPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
-            type: Number(msgType.value) as MsgType,
+            type: Number(msgType.value) as AutoReplyMsgType,
             ...formValues,
           });
         },
@@ -148,8 +138,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
       refresh: true,
       search: true,
     },
-    // TODO @hw：这里要调整下，linter 报错；
-  } as VxeTableGridOptions<any>,
+  } as VxeTableGridOptions<MpAutoReplyApi.AutoReply>,
 });
 </script>
 
@@ -170,14 +159,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
           class="w-full"
           @tab-change="(activeName) => onTabChange(activeName as string)"
         >
-          <ElTabPane :name="String(MsgType.Follow)">
+          <ElTabPane :name="String(AutoReplyMsgType.Follow)">
             <template #label>
               <ElRow align="middle">
                 <IconifyIcon icon="ep:star" class="mr-[2px]" /> 关注时回复
               </ElRow>
             </template>
           </ElTabPane>
-          <ElTabPane :name="String(MsgType.Message)">
+          <ElTabPane :name="String(AutoReplyMsgType.Message)">
             <template #label>
               <ElRow align="middle">
                 <IconifyIcon icon="ep:chat-line-round" class="mr-[2px]" />
@@ -185,7 +174,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
               </ElRow>
             </template>
           </ElTabPane>
-          <ElTabPane :name="String(MsgType.Keyword)">
+          <ElTabPane :name="String(AutoReplyMsgType.Keyword)">
             <template #label>
               <ElRow align="middle">
                 <IconifyIcon icon="fa:newspaper-o" class="mr-[2px]" />
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 12230677170fa5ac4c10e8b2f2fae3cd9e9959eb..a7559bb37b84dcec1a6f9f6026ff3c58e1c3bc5b 100644
--- a/apps/web-ele/src/views/mp/autoReply/modules/form.vue
+++ b/apps/web-ele/src/views/mp/autoReply/modules/form.vue
@@ -4,22 +4,21 @@ import type { Reply } from '#/views/mp/components/wx-reply/types';
 import { computed, nextTick, ref } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
+import { AutoReplyMsgType, ReplyType } from '@vben/constants';
 
 import { ElMessage } from 'element-plus';
 
 import { useVbenForm } from '#/adapter/form';
 import { createAutoReply, updateAutoReply } from '#/api/mp/autoReply';
 import { $t } from '#/locales';
-import { ReplyType } from '#/views/mp/components/wx-reply/types';
 
 import { useFormSchema } from '../data';
-import { MsgType } from './types';
 
 const emit = defineEmits(['success']);
 
 const formData = ref<{
   accountId?: number;
-  msgType: MsgType;
+  msgType: AutoReplyMsgType;
   row?: any;
 }>();
 const getTitle = computed(() => {
@@ -37,8 +36,7 @@ const [Form, formApi] = useVbenForm({
     labelWidth: 100,
   },
   layout: 'horizontal',
-  // TODO @hw：antd 和 ele 存在差异
-  schema: useFormSchema(Number(formData.value?.msgType) as MsgType),
+  schema: useFormSchema(AutoReplyMsgType.Keyword),
   showDefaultActions: false,
 });
 
@@ -59,8 +57,7 @@ const [Modal, modalApi] = useVbenModal({
     if (formData.value?.row?.id && !submitForm.id) {
       submitForm.id = formData.value.row.id;
     }
-    // TODO @hw：antd 和 ele 存在差异
-    const reply = submitForm.reply as Reply | undefined;
+    const reply = submitForm.reply as Reply;
     if (reply) {
       submitForm.responseMessageType = reply.type;
       submitForm.responseContent = reply.content;
@@ -99,8 +96,7 @@ const [Modal, modalApi] = useVbenModal({
     // 加载数据
     const data = modalApi.getData<{
       accountId?: number;
-      // TODO @hw：antd 和 ele 存在差异
-      msgType: MsgType;
+      msgType: AutoReplyMsgType;
       row?: any;
     }>();
     if (!data) {
@@ -138,8 +134,7 @@ const [Modal, modalApi] = useVbenModal({
         accountId: data.accountId || -1,
         type: data.msgType,
         requestKeyword: undefined,
-        // TODO @hw：antd 和 ele 存在差异
-        requestMatch: data.msgType === MsgType.Keyword ? 1 : undefined,
+        requestMatch: data.msgType === AutoReplyMsgType.Keyword ? 1 : undefined,
         requestMessageType: undefined,
         reply: {
           type: ReplyType.Text,
diff --git a/apps/web-ele/src/views/mp/autoReply/modules/types.ts b/apps/web-ele/src/views/mp/autoReply/modules/types.ts
deleted file mode 100644
index f60dbcd572f11313c8c827ecc03def5c92e76861..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/views/mp/autoReply/modules/types.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// 消息类型（Follow: 关注时回复；Message: 消息回复；Keyword: 关键词回复）
-// 作为 tab.name，enum 的数字不能随意修改，与 api 参数相关
-// TODO @hw：ele 相比 antd 多了，看看要不要统一下；
-export enum MsgType {
-  Follow = 1,
-  Keyword = 3,
-  Message = 2,
-}
diff --git a/apps/web-ele/src/views/mp/components/index.ts b/apps/web-ele/src/views/mp/components/index.ts
index 7ae641bd21ea8705364bc64d192b88cbcd7bccdd..6c4f246e95ccadedba0fd1818ebcc8db1d3f6780 100644
--- a/apps/web-ele/src/views/mp/components/index.ts
+++ b/apps/web-ele/src/views/mp/components/index.ts
@@ -1,22 +1,9 @@
 export { default as WxAccountSelect } from './wx-account-select/wx-account-select.vue';
-
 export { default as WxLocation } from './wx-location/wx-location.vue';
-export * from './wx-material-select/types';
-
 export { default as WxMaterialSelect } from './wx-material-select/wx-material-select.vue';
-
-export * from './wx-msg/types';
-
+export { default as WxMsg } from './wx-msg/msg.vue';
 export { default as WxMusic } from './wx-music/wx-music.vue';
-
 export { default as WxNews } from './wx-news/wx-news.vue';
-
-export * from './wx-reply/types';
-
-export { default as WxReplySelect } from './wx-reply/wx-reply.vue';
-
+export { default as WxReply } from './wx-reply/wx-reply.vue';
 export { default as WxVideoPlayer } from './wx-video-play/wx-video-play.vue';
-
 export { default as WxVoicePlayer } from './wx-voice-play/wx-voice-play.vue';
-
-// TODO @hw：是不是要和 antd 保持一致哈？
\ No newline at end of file
diff --git a/apps/web-ele/src/views/mp/components/wx-account-select/index.ts b/apps/web-ele/src/views/mp/components/wx-account-select/index.ts
deleted file mode 100644
index 4b440bee4a6723c72a1cfa49c06a864f6484dfcf..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/views/mp/components/wx-account-select/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default } from './wx-account-select.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-ele/src/views/mp/components/wx-account-select/wx-account-select.vue b/apps/web-ele/src/views/mp/components/wx-account-select/wx-account-select.vue
index 7d161cb42e813834245a0b015afaf9971fc8718c..53598a304c8fc0ecee5d22a3cd8c5270200e249a 100644
--- a/apps/web-ele/src/views/mp/components/wx-account-select/wx-account-select.vue
+++ b/apps/web-ele/src/views/mp/components/wx-account-select/wx-account-select.vue
@@ -1,129 +1,63 @@
 <script lang="ts" setup>
 import type { MpAccountApi } from '#/api/mp/account';
 
-import { computed, onMounted, reactive, ref, watch } from 'vue';
+import { onMounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-import { useTabs } from '@vben/hooks';
-
 import { ElMessage, ElOption, ElSelect } from 'element-plus';
 
 import { getSimpleAccountList } from '#/api/mp/account';
 
-// TODO @hw：调整下代码，和 antd 代码风格，尽量保持一致；
-defineOptions({ name: 'AccountSelect' });
-
-const props = defineProps<{
-  modelValue?: number;
-}>();
+defineOptions({ name: 'WxAccountSelect' });
 
 const emit = defineEmits<{
   (e: 'change', id: number, name: string): void;
-  (e: 'update:modelValue', id: number): void;
 }>();
 
-const message = ElMessage; // 消息弹窗
-const { closeCurrentTab } = useTabs(); // 视图操作
 const { push } = useRouter();
 
-const account: MpAccountApi.AccountSimple = reactive({
+const account = ref<MpAccountApi.Account>({
   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;
-      }
-    }
-  },
-);
+}); // 当前选中的公众号
+const accountList = ref<MpAccountApi.Account[]>([]); // 公众号列表
 
 /** 查询公众号列表 */
 async function handleQuery() {
   accountList.value = await getSimpleAccountList();
   if (accountList.value.length === 0) {
-    message.error('未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置');
-    await closeCurrentTab();
+    ElMessage.error(
+      '未配置公众号，请在【公众号管理 -> 账号管理】菜单，进行配置',
+    );
     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;
-    }
+  // 默认选中第一个，如无数据则不执行
+  const first = accountList.value[0];
+  if (first) {
+    account.value.id = first.id;
+    account.value.name = first.name;
+    emit('change', account.value.id, account.value.name);
   }
 }
 
-/** 公众号变化 */
-function onChanged(id?: number) {
-  if (id) {
-    currentId.value = id;
+/** 切换选中公众号 */
+function onChanged(id: number) {
+  const found = accountList.value.find((v) => v.id === id);
+  if (found) {
+    account.value.name = found.name;
+    emit('change', account.value.id, account.value.name);
   }
 }
 
 /** 初始化 */
-onMounted(() => {
-  handleQuery();
-});
+onMounted(handleQuery);
 </script>
 
 <template>
   <ElSelect
-    v-model="currentId"
+    v-model="account.id"
     placeholder="请选择公众号"
     class="!w-full"
     @change="onChanged"
diff --git a/apps/web-ele/src/views/mp/components/wx-location/index.ts b/apps/web-ele/src/views/mp/components/wx-location/index.ts
deleted file mode 100644
index 42db90b128de4f3f6dd59e519ff3d05207fa8f79..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/views/mp/components/wx-location/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as WxLocation } from './wx-location.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-ele/src/views/mp/components/wx-location/types.ts b/apps/web-ele/src/views/mp/components/wx-location/types.ts
new file mode 100644
index 0000000000000000000000000000000000000000..9566c2a6c1a6eaddecca9cf2f4fd9455b965220f
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/wx-location/types.ts
@@ -0,0 +1,6 @@
+export interface WxLocationProps {
+  label: string;
+  locationX: number;
+  locationY: number;
+  qqMapKey?: string;
+}
diff --git a/apps/web-ele/src/views/mp/components/wx-location/wx-location.vue b/apps/web-ele/src/views/mp/components/wx-location/wx-location.vue
index 160a1f407f3546133785656383caff01ffc5bb9a..ce808aaf46a73a0a36131f9891c0e16f250883de 100644
--- a/apps/web-ele/src/views/mp/components/wx-location/wx-location.vue
+++ b/apps/web-ele/src/views/mp/components/wx-location/wx-location.vue
@@ -2,6 +2,10 @@
   【微信消息 - 定位】TODO @Dhb52 目前未启用；；；；@hw：看看目前是不是没用起来哈？
 -->
 <script lang="ts" setup>
+import type { WxLocationProps } from './types';
+
+import { computed } from 'vue';
+
 import { IconifyIcon } from '@vben/icons';
 
 // TODO @dylan：@hw：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈
@@ -9,27 +13,16 @@ import { ElCol, ElLink, ElRow } from 'element-plus';
 
 defineOptions({ name: 'Location' });
 
-// TODO @hw：antd 和 ele 这里的风格，看看怎么统一！
-const props = defineProps({
-  locationX: {
-    required: true,
-    type: Number,
-  },
-  locationY: {
-    required: true,
-    type: Number,
-  },
-  label: {
-    // 地名
-    required: true,
-    type: String,
-  },
-  qqMapKey: {
-    // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
-    required: false,
-    type: String,
-    default: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // 需要自定义
-  },
+const props = withDefaults(defineProps<WxLocationProps>(), {
+  qqMapKey: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
+});
+
+const mapUrl = computed(() => {
+  return `https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${props.locationY}&pointy=${props.locationX}&name=${props.label}&ref=yudao`;
+});
+
+const mapImageUrl = computed(() => {
+  return `https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${props.locationX},${props.locationY}&key=${props.qqMapKey}&size=250*180`;
 });
 
 defineExpose({
@@ -43,20 +36,10 @@ defineExpose({
 <template>
   <!-- 微信消息 - 定位 -->
   <div>
-    <ElLink
-      type="primary"
-      target="_blank"
-      :href="`https://map.qq.com/?type=marker&isopeninfowin=1&markertype=1&pointx=${
-        locationY
-      }&pointy=${locationX}&name=${label}&ref=yudao`"
-    >
+    <ElLink type="primary" target="_blank" :href="mapUrl">
       <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`"
-          />
+          <img :src="mapImageUrl" alt="地图位置" />
         </ElRow>
         <ElRow>
           <IconifyIcon icon="ep:location" />
diff --git a/apps/web-ele/src/views/mp/components/wx-material-select/index.ts b/apps/web-ele/src/views/mp/components/wx-material-select/index.ts
deleted file mode 100644
index a08656b6232afeb8bf8ce92435b3696bd8cb3212..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/views/mp/components/wx-material-select/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { MaterialType, NewsType } from './types';
-
-export { default } from './wx-material-select.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-ele/src/views/mp/components/wx-material-select/types.ts b/apps/web-ele/src/views/mp/components/wx-material-select/types.ts
deleted file mode 100644
index c1ae7a135e352232c549abe26defe48873982e6b..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/views/mp/components/wx-material-select/types.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// TODO @hw：这里的枚举，看看要不要统一
-export enum NewsType {
-  Draft = '2',
-  Published = '1',
-}
-
-export enum MaterialType {
-  Image = 'image',
-  News = 'news',
-  Video = 'video',
-  Voice = 'voice',
-}
diff --git a/apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue b/apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue
index c5ce4b09a4e0aa0304979758b4f89ad4d57b4807..624818971f479255192588b8b1a82296ebd05eb8 100644
--- a/apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue
+++ b/apps/web-ele/src/views/mp/components/wx-material-select/wx-material-select.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import { onMounted, reactive, ref } from 'vue';
 
+import { NewsType } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 import { formatTime } from '@vben/utils';
 
@@ -19,9 +20,7 @@ import News from '#/views/mp/components/wx-news/wx-news.vue';
 import VideoPlayer from '#/views/mp/components/wx-video-play/wx-video-play.vue';
 import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
 
-import { NewsType } from './types';
-
-// TODO @hw：代码风格，看看 antd 和 ele 是不是统一下；
+// TODO @hw：代码风格，看看 antd 和 ele 是不是统一下； 等antd此组件修改完再调整
 
 /** 微信素材选择 */
 defineOptions({ name: 'MaterialSelect' });
diff --git a/apps/web-ele/src/views/mp/components/wx-msg/index.ts b/apps/web-ele/src/views/mp/components/wx-msg/index.ts
deleted file mode 100644
index c6b5afcc9a862d7ed913901b31975b5b6f6ad5d9..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/views/mp/components/wx-msg/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { MsgType } from './types';
-
-export { default } from './wx-msg.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-ele/src/views/mp/components/wx-msg/msg-event.vue b/apps/web-ele/src/views/mp/components/wx-msg/msg-event.vue
index 8e135443ebebc8e5b6b776f60e7f96d17e78e2f9..2b89a23020d26b9fab30692b39fc2a89bfb11672 100644
--- a/apps/web-ele/src/views/mp/components/wx-msg/msg-event.vue
+++ b/apps/web-ele/src/views/mp/components/wx-msg/msg-event.vue
@@ -8,6 +8,7 @@ const props = defineProps<{
 }>();
 
 // TODO @hw：看看用 antd 的风格，还是 ele 的风格，就是下面的 item。
+// 等antd修改完再调整
 const item = ref(props.item);
 </script>
 
diff --git a/apps/web-ele/src/views/mp/components/wx-msg/msg-list.vue b/apps/web-ele/src/views/mp/components/wx-msg/msg-list.vue
index 3a9f3aaaee51f4df3133897200dd9deb7c47b3d3..49bfbb82102c6745a2c7989187f931cd319b542e 100644
--- a/apps/web-ele/src/views/mp/components/wx-msg/msg-list.vue
+++ b/apps/web-ele/src/views/mp/components/wx-msg/msg-list.vue
@@ -1,22 +1,17 @@
 <script lang="ts" setup>
-import type { User } from '../types';
+import type { MpUserApi } from '#/api/mp/user/index';
 
+import { preferences } from '@vben/preferences';
 import { formatDateTime } from '@vben/utils';
 
-import avatarWechat from '#/assets/imgs/wechat.png';
-
-import Msg from './wx-msg.vue';
-
-// 确保 User 类型被识别为已使用
-// TODO @hw：是不是不用 PropsUser 哈？
-type PropsUser = User;
+import Msg from './msg.vue';
 
 defineOptions({ name: 'MsgList' });
 
 const props = defineProps<{
   accountId: number;
   list: any[];
-  user: PropsUser;
+  user: Partial<MpUserApi.User>;
 }>();
 
 const SendFrom = {
@@ -24,46 +19,39 @@ const SendFrom = {
   User: 1,
 } as const; // 发送来源
 
-// TODO @hw：是不是用 SendFrom ，或者 number？
-type SendFromType = (typeof SendFrom)[keyof typeof SendFrom];
-
-// 显式引用枚举成员供模板使用
-// TODO @hw：是不是用 SendFrom 就好啦？
-const MpBotValue = SendFrom.MpBot;
-const UserValue = SendFrom.User;
-
-const getAvatar = (sendFrom: SendFromType) =>
-  sendFrom === UserValue ? props.user.avatar : avatarWechat;
+function getAvatar(sendFrom: number) {
+  return sendFrom === SendFrom.User
+    ? props.user.avatar
+    : preferences.app.defaultAvatar;
+}
 
-const getNickname = (sendFrom: SendFromType) =>
-  sendFrom === UserValue ? props.user.nickname : '公众号';
+function getNickname(sendFrom: number) {
+  return sendFrom === SendFrom.User ? props.user.nickname : '公众号';
+}
 </script>
 <template>
-  <div v-for="item in props.list" :key="item.id">
+  <div class="execution" v-for="item in props.list" :key="item.id">
     <div
-      class="mb-[30px] flex items-start"
-      :class="{ 'flex-row-reverse': item.sendFrom === MpBotValue }"
+      class="mp-comment"
+      :class="{ 'mp-comment--reverse': item.sendFrom === SendFrom.MpBot }"
     >
-      <div class="w-20 text-center">
-        <img
-          :src="getAvatar(item.sendFrom)"
-          class="box-border h-12 w-12 rounded-full border border-transparent align-middle"
-        />
-        <div class="text-sm font-bold text-[#999]">
+      <div class="avatar-div">
+        <img :src="getAvatar(item.sendFrom)" class="mp-comment__avatar" />
+        <div class="mp-comment__author">
           {{ getNickname(item.sendFrom) }}
         </div>
       </div>
-      <div class="relative mx-5 flex-1 rounded-[5px] border border-[#dedede]">
-        <div
-          class="flex items-center justify-between rounded-t-[5px] border-b border-[#eee] bg-[#f8f8f8] px-[15px] py-[5px]"
-        >
+      <div class="mp-comment__main">
+        <div class="mp-comment__header">
           <div class="mp-comment__create_time">
             {{ formatDateTime(item.createTime) }}
           </div>
         </div>
         <div
-          class="overflow-hidden rounded-b-[5px] bg-white px-[15px] py-[15px] text-sm text-[#333]"
-          :style="item.sendFrom === MpBotValue ? 'background: #6BED72;' : ''"
+          class="mp-comment__body"
+          :style="
+            item.sendFrom === SendFrom.MpBot ? 'background: #6BED72;' : ''
+          "
         >
           <Msg :item="item" />
         </div>
@@ -74,8 +62,14 @@ const getNickname = (sendFrom: SendFromType) =>
 
 <style lang="scss" scoped>
 /* 因为 joolun 实现依赖 avue 组件，该页面使用了 comment.scss、card.scc  */
-/** TODO @dylan：@hw 看看有没适合 tindwind 的哈。 */
 
-@import url('../comment.scss');
-@import url('../card.scss');
+/** TODO @hw： 看看有没适合 tindwind 的哈。 */
+
+@import url('./comment.scss');
+@import url('./card.scss');
+
+.avatar-div {
+  width: 80px;
+  text-align: center;
+}
 </style>
diff --git a/apps/web-ele/src/views/mp/components/wx-msg/msg.vue b/apps/web-ele/src/views/mp/components/wx-msg/msg.vue
new file mode 100644
index 0000000000000000000000000000000000000000..d4c1840e559aa6dfa8951df1b1e1ab146c53251a
--- /dev/null
+++ b/apps/web-ele/src/views/mp/components/wx-msg/msg.vue
@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { MpMsgType } from '@vben/constants';
+
+import Location from '#/views/mp/components/wx-location/wx-location.vue';
+import Music from '#/views/mp/components/wx-music/wx-music.vue';
+import News from '#/views/mp/components/wx-news/wx-news.vue';
+import VideoPlayer from '#/views/mp/components/wx-video-play/wx-video-play.vue';
+import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
+
+import MsgEvent from './msg-event.vue';
+
+defineOptions({ name: 'Msg' });
+
+const props = defineProps<{
+  item: any;
+}>();
+
+const item = ref<any>(props.item);
+</script>
+
+<template>
+  <div>
+    <MsgEvent v-if="item.type === MpMsgType.Event" :item="item" />
+
+    <div v-else-if="item.type === MpMsgType.Text">{{ item.content }}</div>
+
+    <div v-else-if="item.type === MpMsgType.Voice">
+      <VoicePlayer :url="item.mediaUrl" :content="item.recognition" />
+    </div>
+
+    <div v-else-if="item.type === MpMsgType.Image">
+      <a target="_blank" :href="item.mediaUrl">
+        <img :src="item.mediaUrl" class="w-[100px]" />
+      </a>
+    </div>
+
+    <div
+      v-else-if="item.type === MpMsgType.Video || item.type === 'shortvideo'"
+      class="text-center"
+    >
+      <VideoPlayer :url="item.mediaUrl" />
+    </div>
+
+    <div v-else-if="item.type === MpMsgType.Link" class="flex-1">
+      <el-link
+        type="success"
+        :underline="false"
+        target="_blank"
+        :href="item.url"
+      >
+        <div
+          class="mb-3 text-base text-[rgba(0,0,0,0.85)] hover:text-[#1890ff]"
+        >
+          <i class="el-icon-link"></i>{{ item.title }}
+        </div>
+      </el-link>
+      <div
+        class="h-auto overflow-hidden text-[rgba(0,0,0,0.45)]"
+        style="height: unset"
+      >
+        {{ item.description }}
+      </div>
+    </div>
+
+    <div v-else-if="item.type === MpMsgType.Location">
+      <Location
+        :label="item.label"
+        :location-y="item.locationY"
+        :location-x="item.locationX"
+      />
+    </div>
+
+    <div v-else-if="item.type === MpMsgType.News" class="w-[300px]">
+      <News :articles="item.articles" />
+    </div>
+
+    <div v-else-if="item.type === MpMsgType.Music">
+      <Music
+        :title="item.title"
+        :description="item.description"
+        :thumb-media-url="item.thumbMediaUrl"
+        :music-url="item.musicUrl"
+        :hq-music-url="item.hqMusicUrl"
+      />
+    </div>
+  </div>
+</template>
diff --git a/apps/web-ele/src/views/mp/components/wx-msg/types.ts b/apps/web-ele/src/views/mp/components/wx-msg/types.ts
deleted file mode 100644
index 79671713908a65e1e405f7db656a7435f2cd59c8..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/views/mp/components/wx-msg/types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-// TODO @hw：是不是放枚举里？
-export enum MsgType {
-  Event = 'event',
-  Image = 'image',
-  Link = 'link',
-  Location = 'location',
-  Music = 'music',
-  News = 'news',
-  Text = 'text',
-  Video = 'video',
-  Voice = 'voice',
-}
-
-// TODO @hw：用 MpUserApi 里的 user 可以么？
-export interface User {
-  nickname: string;
-  avatar: string;
-  accountId: number;
-}
diff --git a/apps/web-ele/src/views/mp/components/wx-msg/wx-msg.vue b/apps/web-ele/src/views/mp/components/wx-msg/wx-msg.vue
index 24939b2159f5869d705dd9688cf9b91b57b04d96..3fcd0420613c91353ba3f6230e63e1f8c0737542 100644
--- a/apps/web-ele/src/views/mp/components/wx-msg/wx-msg.vue
+++ b/apps/web-ele/src/views/mp/components/wx-msg/wx-msg.vue
@@ -1,90 +1,176 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import type { MpUserApi } from '#/api/mp/user/index';
 
-import Location from '#/views/mp/components/wx-location/wx-location.vue';
-import Music from '#/views/mp/components/wx-music/wx-music.vue';
-import News from '#/views/mp/components/wx-news/wx-news.vue';
-import VideoPlayer from '#/views/mp/components/wx-video-play/wx-video-play.vue';
-import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';
+import { nextTick, onMounted, reactive, ref, unref } from 'vue';
 
-import { MsgType } from '../types';
-import MsgEvent from './msg-event.vue';
+import { preferences } from '@vben/preferences';
 
-defineOptions({ name: 'Msg' });
+import { ElButton, ElMessage } from 'element-plus';
 
-// TODO @hw：这个貌似和 antd 的差很多？
+import { getMessagePage, sendMessage } from '#/api/mp/message';
+import { getUser } from '#/api/mp/user';
+import { WxReply } from '#/views/mp/components';
+
+import MsgList from './msg-list.vue';
+
+defineOptions({ name: 'WxMsg' });
 
 const props = defineProps<{
-  item: any;
+  userId: number;
 }>();
 
-const item = ref<any>(props.item);
-</script>
+const accountId = ref(-1); // 公众号ID，需要通过userId初始化
+const loading = ref(false); // 消息列表是否正在加载中
+const hasMore = ref(true); // 是否可以加载更多
+const list = ref<any[]>([]); // 消息列表
+const queryParams = reactive({
+  accountId,
+  pageNo: 1, // 当前页数
+  pageSize: 14, // 每页显示多少条
+});
 
-<template>
-  <div>
-    <MsgEvent v-if="item.type === MsgType.Event" :item="item" />
+const user: Partial<MpUserApi.User> = reactive({
+  accountId, // 公众号账号编号
+  avatar: preferences.app.defaultAvatar,
+  nickname: '用户', // 由于微信不再提供昵称，直接使用"用户"展示
+});
 
-    <div v-else-if="item.type === MsgType.Text">{{ item.content }}</div>
+// ========= 消息发送 =========
+const sendLoading = ref(false); // 发送消息是否加载中
+const reply = ref<any>({
+  accountId: -1,
+  articles: [],
+  type: 'text',
+}); // 微信发送消息
 
-    <div v-else-if="item.type === MsgType.Voice">
-      <VoicePlayer :url="item.mediaUrl" :content="item.recognition" />
-    </div>
+const replySelectRef = ref<InstanceType<typeof WxReply> | null>(null); // WxReplySelect组件ref，用于消息发送成功后清除内容
+const msgDivRef = ref<HTMLDivElement | null>(null); // 消息显示窗口ref，用于滚动到底部
 
-    <div v-else-if="item.type === MsgType.Image">
-      <a target="_blank" :href="item.mediaUrl">
-        <img :src="item.mediaUrl" class="w-[100px]" />
-      </a>
-    </div>
+/** 完成加载 */
+onMounted(async () => {
+  const data = await getUser(props.userId);
+  user.nickname = data.nickname?.length > 0 ? data.nickname : user.nickname;
+  user.avatar = data.avatar?.length > 0 ? data.avatar : user.avatar;
+  accountId.value = data.accountId;
+  reply.value.accountId = data.accountId;
 
-    <div
-      v-else-if="item.type === MsgType.Video || item.type === 'shortvideo'"
-      class="text-center"
-    >
-      <VideoPlayer :url="item.mediaUrl" />
-    </div>
+  refreshChange();
+});
+
+/** 执行发送 */
+async function sendMsg() {
+  if (!unref(reply)) {
+    return;
+  }
+  // 公众号限制：客服消息，公众号只允许发送一条
+  if (
+    reply.value.type === 'news' &&
+    reply.value.articles &&
+    reply.value.articles.length > 1
+  ) {
+    reply.value.articles = [reply.value.articles[0]];
+    ElMessage.success('图文消息条数限制在 1 条以内，已默认发送第一条');
+  }
+
+  const data = await sendMessage({
+    ...reply.value,
+    userId: props.userId,
+  } as any);
+  sendLoading.value = false;
+
+  list.value = [...list.value, data];
+  await scrollToBottom();
+
+  // 发送后清空数据
+  replySelectRef.value?.clear();
+}
+
+function loadMore() {
+  queryParams.pageNo++;
+  getPage(queryParams, null);
+}
 
-    <div v-else-if="item.type === MsgType.Link" class="flex-1">
-      <el-link
-        type="success"
-        :underline="false"
-        target="_blank"
-        :href="item.url"
-      >
+async function getPage(page: any, params: any = null) {
+  loading.value = true;
+  const dataTemp = await getMessagePage(
+    Object.assign(
+      {
+        accountId: page.accountId,
+        pageNo: page.pageNo,
+        pageSize: page.pageSize,
+        userId: props.userId,
+      },
+      params,
+    ),
+  );
+
+  const scrollHeight = msgDivRef.value?.scrollHeight ?? 0;
+  // 处理数据
+  const data = dataTemp.list.reverse();
+  list.value = [...data, ...list.value];
+  loading.value = false;
+  if (data.length < queryParams.pageSize || data.length === 0) {
+    hasMore.value = false;
+  }
+  queryParams.pageNo = page.pageNo;
+  queryParams.pageSize = page.pageSize;
+  // 滚动到原来的位置
+  if (queryParams.pageNo === 1) {
+    // 定位到消息底部
+    await scrollToBottom();
+  } else if (data.length > 0) {
+    // 定位滚动条
+    await nextTick();
+    if (scrollHeight !== 0 && msgDivRef.value) {
+      msgDivRef.value.scrollTop =
+        msgDivRef.value.scrollHeight - scrollHeight - 100;
+    }
+  }
+}
+
+function refreshChange() {
+  getPage(queryParams);
+}
+
+/** 定位到消息底部 */
+async function scrollToBottom() {
+  await nextTick();
+  if (msgDivRef.value) {
+    msgDivRef.value.scrollTop = msgDivRef.value.scrollHeight;
+  }
+}
+</script>
+
+<template>
+  <div class="flex h-full flex-col">
+    <div ref="msgDivRef" class="mx-2.5 flex-1 overflow-auto bg-[#eaeaea]">
+      <!-- 加载更多 -->
+      <div v-loading="loading"></div>
+      <div v-if="!loading">
         <div
-          class="mb-3 text-base text-[rgba(0,0,0,0.85)] hover:text-[#1890ff]"
+          v-if="hasMore"
+          class="cursor-pointer rounded p-3 text-center text-sm text-[#409eff] transition-colors duration-300 hover:bg-[#f5f7fa]"
+          @click="loadMore"
         >
-          <i class="el-icon-link"></i>{{ item.title }}
+          <span>点击加载更多</span>
+        </div>
+        <div
+          v-else
+          class="cursor-not-allowed rounded p-3 text-center text-sm text-[#909399] hover:bg-transparent"
+        >
+          <span>没有更多了</span>
         </div>
-      </el-link>
-      <div
-        class="h-auto overflow-hidden text-[rgba(0,0,0,0.45)]"
-        style="height: unset"
-      >
-        {{ item.description }}
       </div>
-    </div>
-
-    <div v-else-if="item.type === MsgType.Location">
-      <Location
-        :label="item.label"
-        :location-y="item.locationY"
-        :location-x="item.locationX"
-      />
-    </div>
 
-    <div v-else-if="item.type === MsgType.News" class="w-[300px]">
-      <News :articles="item.articles" />
+      <!-- 消息列表 -->
+      <MsgList :list="list" :account-id="accountId" :user="user" />
     </div>
 
-    <div v-else-if="item.type === MsgType.Music">
-      <Music
-        :title="item.title"
-        :description="item.description"
-        :thumb-media-url="item.thumbMediaUrl"
-        :music-url="item.musicUrl"
-        :hq-music-url="item.hqMusicUrl"
-      />
+    <div class="p-2.5" v-loading="sendLoading">
+      <WxReply ref="replySelectRef" v-model="reply" />
+      <ElButton type="primary" class="float-right mb-2 mt-2" @click="sendMsg">
+        发送(S)
+      </ElButton>
     </div>
   </div>
 </template>
diff --git a/apps/web-ele/src/views/mp/components/wx-music/index.ts b/apps/web-ele/src/views/mp/components/wx-music/index.ts
deleted file mode 100644
index 270f2642e23accc20d1b0c1c346ea646d125b1cc..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/views/mp/components/wx-music/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default } from './wx-music.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-ele/src/views/mp/components/wx-music/wx-music.vue b/apps/web-ele/src/views/mp/components/wx-music/wx-music.vue
index ebb4d4e49064f5602ca4733766859512888bdba8..b0edfbd2c9c56004833ce6c33fb7155ef4c1726c 100644
--- a/apps/web-ele/src/views/mp/components/wx-music/wx-music.vue
+++ b/apps/web-ele/src/views/mp/components/wx-music/wx-music.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { ElLink } from 'element-plus';
 /** 微信消息 - 音乐 */
 defineOptions({ name: 'Music' });
 
@@ -36,8 +37,7 @@ defineExpose({
 
 <template>
   <div>
-    <!-- TODO @hw：ElLink -->
-    <el-link
+    <ElLink
       type="success"
       :underline="false"
       target="_blank"
@@ -56,7 +56,7 @@ defineExpose({
           </div>
         </div>
       </div>
-    </el-link>
+    </ElLink>
   </div>
 </template>
 
diff --git a/apps/web-ele/src/views/mp/components/wx-news/index.ts b/apps/web-ele/src/views/mp/components/wx-news/index.ts
deleted file mode 100644
index 5bfa0c44de4dc2d740ad08a3dede7ceced7ed3f2..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/views/mp/components/wx-news/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as WxNews } from './wx-news.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/index.ts b/apps/web-ele/src/views/mp/components/wx-reply/index.ts
deleted file mode 100644
index 03b3dea9338eb81ad3b1d9f3d8b05eb9e834c8b3..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/views/mp/components/wx-reply/index.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export { createEmptyReply, type Reply, ReplyType } from './types';
-
-export { default } from './wx-reply.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue b/apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue
index 967d123742ef0a63d01120a857b3ad59461f0856..3b1bfd310caf4d4695ff79ef9b2574e36d08588a 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue
@@ -28,12 +28,9 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
-// TODO @hw：直接用 ElMessage
-const message = ElMessage;
-
+const accessStore = useAccessStore();
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
-// TODO @hw：看看要不要和 antd 保持一致的风格；
-const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
+const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
 const reply = computed<Reply>({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
@@ -56,7 +53,7 @@ function beforeImageUpload(rawFile: UploadRawFile) {
 /** 上传成功 */
 function onUploadSuccess(res: any) {
   if (res.code !== 0) {
-    message.error(`上传出错：${res.msg}`);
+    ElMessage.error(`上传出错：${res.msg}`);
     return false;
   }
 
@@ -136,6 +133,7 @@ function selectMaterial(item: any) {
         :span="12"
         class="float-right h-[160px] w-[49.5%] border border-[rgb(234,234,234)] py-[50px]"
       >
+        {{ uploadData }}
         <ElUpload
           :action="UPLOAD_URL"
           :headers="HEADERS"
@@ -158,4 +156,4 @@ function selectMaterial(item: any) {
       </ElCol>
     </ElRow>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/tab-music.vue b/apps/web-ele/src/views/mp/components/wx-reply/tab-music.vue
index 5a09c0691e8448415787966b98f94f62900a83bd..1635c7fc7830061bcc9452120acee097c9a0be57 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-music.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-music.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { UploadRawFile } from 'element-plus';
 
-// TODO @hw：类似 tab-image.vue 的建议
 import type { Reply } from './types';
 
 import { computed, reactive, ref } from 'vue';
@@ -30,8 +29,6 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
-const message = ElMessage;
-
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
 const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
 const reply = computed<Reply>({
@@ -56,7 +53,7 @@ function beforeImageUpload(rawFile: UploadRawFile) {
 /** 上传成功 */
 function onUploadSuccess(res: any) {
   if (res.code !== 0) {
-    message.error(`上传出错：${res.msg}`);
+    ElMessage.error(`上传出错：${res.msg}`);
     return false;
   }
 
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue b/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue
index 257acd0877f5b39383f579bb9ce134c89e014e63..acc730754bc1ce4add1e3bb8a33205a09e12f36f 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue
@@ -3,6 +3,7 @@ import type { Reply } from './types';
 
 import { computed, ref } from 'vue';
 
+import { NewsType } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
 import { ElButton, ElCol, ElDialog, ElRow } from 'element-plus';
@@ -10,8 +11,6 @@ import { ElButton, ElCol, ElDialog, ElRow } from 'element-plus';
 import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
 import News from '#/views/mp/components/wx-news/wx-news.vue';
 
-import { NewsType } from '../wx-material-select/types';
-
 defineOptions({ name: 'TabNews' });
 
 const props = defineProps<{
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/tab-video.vue b/apps/web-ele/src/views/mp/components/wx-reply/tab-video.vue
index 03e7f6b41f4ff64b8f0f117646272f1d22677da4..02d4c1670f560bb066b168ceb3913332c316ca85 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-video.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-video.vue
@@ -31,18 +31,13 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
-
-// TODO @hw：还是用 ElMessage
-const message = ElMessage;
-
+const accessStore = useAccessStore();
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
-// TODO @hw：这里 antd 和 ele 有差异，要统一么？
-const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
+const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
 
 const reply = computed<Reply>({
   get: () => props.modelValue,
-  // TODO @hw：这里 antd 和 ele 有差异，要统一么？
-  set: (val: Reply) => emit('update:modelValue', val),
+  set: (val) => emit('update:modelValue', val),
 });
 
 const showDialog = ref(false);
@@ -62,7 +57,7 @@ function beforeVideoUpload(rawFile: UploadRawFile) {
 /** 上传成功 */
 function onUploadSuccess(res: any) {
   if (res.code !== 0) {
-    message.error(`上传出错：${res.msg}`);
+    ElMessage.error(`上传出错：${res.msg}`);
     return false;
   }
 
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/tab-voice.vue b/apps/web-ele/src/views/mp/components/wx-reply/tab-voice.vue
index b2a526a9c35261b9e880cd65fb2933abc55c136f..f8524c31e68086f776927d7b7096c2e92125833d 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-voice.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-voice.vue
@@ -31,16 +31,13 @@ const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
-// TODO @hw：用 ElMessage
-const message = ElMessage;
-
+const accessStore = useAccessStore();
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
-// TODO @hw：antd 和 ele 写法的统一；
-const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
+const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
+
 const reply = computed<Reply>({
   get: () => props.modelValue,
-  // TODO @hw：这里要和 antd 统一么？还是 ele 和它统一
-  set: (val: Reply) => emit('update:modelValue', val),
+  set: (val) => emit('update:modelValue', val),
 });
 
 const showDialog = ref(false);
@@ -60,7 +57,7 @@ function beforeVoiceUpload(rawFile: UploadRawFile) {
 /** 上传成功 */
 function onUploadSuccess(res: any) {
   if (res.code !== 0) {
-    message.error(`上传出错：${res.msg}`);
+    ElMessage.error(`上传出错：${res.msg}`);
     return false;
   }
 
@@ -158,4 +155,4 @@ function selectMaterial(item: Reply) {
       </ElCol>
     </ElRow>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/types.ts b/apps/web-ele/src/views/mp/components/wx-reply/types.ts
index 487fde63e47f867dcc3dedcc9c2f551056b68bd1..6082a78ae0853fac0f4c46430027eb9b6c158db2 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/types.ts
+++ b/apps/web-ele/src/views/mp/components/wx-reply/types.ts
@@ -1,38 +1,28 @@
 import type { Ref } from 'vue';
 
-import { unref } from 'vue';
+import type { ReplyType } from '@vben/constants';
 
-// TODO @hw：和 antd 风格，保持一致；
-enum ReplyType {
-  Image = 'image',
-  Music = 'music',
-  News = 'news',
-  Text = 'text',
-  Video = 'video',
-  Voice = 'voice',
-}
+import { unref } from 'vue';
 
-interface _Reply {
+export interface Reply {
   accountId: number;
-  type: ReplyType;
-  name?: null | string;
+  articles?: any[];
   content?: null | string;
-  mediaId?: null | string;
-  url?: null | string;
-  title?: null | string;
   description?: null | string;
-  thumbMediaId?: null | string;
-  thumbMediaUrl?: null | string;
-  musicUrl?: null | string;
   hqMusicUrl?: null | string;
   introduction?: null | string;
-  articles?: any[];
+  mediaId?: null | string;
+  musicUrl?: null | string;
+  name?: null | string;
+  thumbMediaId?: null | string;
+  thumbMediaUrl?: null | string;
+  title?: null | string;
+  type: ReplyType;
+  url?: null | string;
 }
 
-type Reply = _Reply; // Partial<_Reply>
-
 /** 利用旧的 reply[accountId, type] 初始化新的 Reply */
-const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
+export const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
   return {
     accountId: unref(old).accountId,
     type: unref(old).type,
@@ -50,5 +40,3 @@ const createEmptyReply = (old: Ref<Reply> | Reply): Reply => {
     articles: [],
   };
 };
-
-export { createEmptyReply, type Reply, ReplyType };
diff --git a/apps/web-ele/src/views/mp/components/wx-reply/wx-reply.vue b/apps/web-ele/src/views/mp/components/wx-reply/wx-reply.vue
index 57ffee7eb7575397d07f3fa995a01a251570e066..fc00ac9a655104de836df79435dcc7b8b591f359 100644
--- a/apps/web-ele/src/views/mp/components/wx-reply/wx-reply.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/wx-reply.vue
@@ -1,38 +1,36 @@
 <script lang="ts" setup>
 import type { Reply } from './types';
 
-import { computed } from 'vue';
+import { computed, ref, unref, watch } from 'vue';
 
+import { NewsType, ReplyType } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';
 
 import { ElRow, ElTabPane, ElTabs } from 'element-plus';
 
-import { NewsType } from '../wx-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';
+import { createEmptyReply } from './types';
 
 /** 消息回复选择 */
 defineOptions({ name: 'WxReplySelect' });
 
-const props = withDefaults(
-  defineProps<{
-    modelValue: Reply | undefined;
-    newsType?: NewsType;
-  }>(),
-  {
-    newsType: () => NewsType.Published,
-  },
-);
-
+const props = withDefaults(defineProps<Props>(), {
+  newsType: undefined,
+});
 const emit = defineEmits<{
   (e: 'update:modelValue', v: Reply): void;
 }>();
 
+interface Props {
+  modelValue: Reply | undefined;
+  newsType?: NewsType;
+}
+
 const defaultReply: Reply = {
   accountId: -1,
   type: ReplyType.Text,
@@ -43,6 +41,67 @@ const reply = computed<Reply>({
   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 进行赋值会产生了循环调用
+
+// 监听 modelValue 变化，同步更新 currentTab 和缓存
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue?.type) {
+      // 如果类型变化，更新 currentTab
+      if (newValue.type !== currentTab.value) {
+        currentTab.value = newValue.type;
+      }
+      // 如果 modelValue 有数据，更新对应 tab 的缓存
+      if (newValue.type) {
+        tabCache.set(newValue.type, { ...newValue });
+      }
+    }
+  },
+  { immediate: true, deep: true },
+);
+
+watch(
+  currentTab,
+  (newTab, oldTab) => {
+    // 第一次进入：oldTab 为 undefined
+    // 判断 newTab 是因为 Reply 为 Partial
+    if (oldTab === undefined || newTab === undefined) {
+      return;
+    }
+
+    // 保存旧tab的数据到缓存
+    const oldReply = unref(reply);
+    // 只有当旧tab的reply有实际数据时才缓存（避免缓存空数据）
+    if (oldReply && oldTab === oldReply.type) {
+      tabCache.set(oldTab, oldReply);
+    }
+
+    // 从缓存里面取出新tab内容，有则覆盖Reply，没有则创建空Reply
+    const temp = tabCache.get(newTab);
+    if (temp) {
+      reply.value = temp;
+    } else {
+      // 如果当前reply的类型就是新tab的类型，说明这是从外部传入的数据，应该保留
+      const currentReply = unref(reply);
+      if (currentReply && currentReply.type === newTab) {
+        // 这是从外部传入的数据，直接缓存并使用
+        tabCache.set(newTab, currentReply);
+        // 不需要修改reply.value，因为它已经是正确的了
+      } else {
+        // 创建新的空reply
+        const newData = createEmptyReply(reply);
+        newData.type = newTab;
+        reply.value = newData;
+      }
+    }
+  },
+  {
+    immediate: true,
+  },
+);
+
 /** 清除除了`type`, `accountId`的字段 */
 function clear() {
   reply.value = createEmptyReply(reply);
@@ -105,4 +164,4 @@ defineExpose({
       <TabMusic v-model="reply" />
     </ElTabPane>
   </ElTabs>
-</template>
\ No newline at end of file
+</template>
diff --git a/apps/web-ele/src/views/mp/components/wx-video-play/index.ts b/apps/web-ele/src/views/mp/components/wx-video-play/index.ts
deleted file mode 100644
index 68a8155b4e20f4504d8802271c39be4caff5925a..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/views/mp/components/wx-video-play/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default } from './wx-video-play.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-ele/src/views/mp/components/wx-video-play/wx-video-play.vue b/apps/web-ele/src/views/mp/components/wx-video-play/wx-video-play.vue
index 0cebaf70f173dcad3e55f748dca68897f591ca4f..f6ff368d594d521d00b1a573aac1e3ae691fa4d5 100644
--- a/apps/web-ele/src/views/mp/components/wx-video-play/wx-video-play.vue
+++ b/apps/web-ele/src/views/mp/components/wx-video-play/wx-video-play.vue
@@ -11,13 +11,9 @@ import 'video.js/dist/video-js.css';
 /** 微信消息 - 视频 */
 defineOptions({ name: 'WxVideoPlayer' });
 
-// TODO @hw：antd 或者 ele，props 保持一致；
-const props = defineProps({
-  url: {
-    type: String,
-    required: true,
-  },
-});
+const props = defineProps<{
+  url: string;
+}>();
 
 const dialogVideo = ref(false);
 
@@ -47,19 +43,6 @@ const playVideo = () => {
         :width="800"
         :playback-rates="[0.7, 1.0, 1.5, 2.0]"
       />
-      <!-- TODO @hw：删除掉？ -->
-      <!--     事件，暫時沒用
-      @mounted="handleMounted"-->
-      <!--        @ready="handleEvent($event)"-->
-      <!--        @play="handleEvent($event)"-->
-      <!--        @pause="handleEvent($event)"-->
-      <!--        @ended="handleEvent($event)"-->
-      <!--        @loadeddata="handleEvent($event)"-->
-      <!--        @waiting="handleEvent($event)"-->
-      <!--        @playing="handleEvent($event)"-->
-      <!--        @canplay="handleEvent($event)"-->
-      <!--        @canplaythrough="handleEvent($event)"-->
-      <!--        @timeupdate="handleEvent(player?.currentTime())"-->
     </ElDialog>
   </div>
 </template>
diff --git a/apps/web-ele/src/views/mp/components/wx-voice-play/index.ts b/apps/web-ele/src/views/mp/components/wx-voice-play/index.ts
deleted file mode 100644
index a4d980bee77b84b6b1c0ecece31fa737ae1a0333..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/views/mp/components/wx-voice-play/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default } from './wx-voice-play.vue';
-
-// TODO @hw：每个组件下的 index.ts 要不都删除，统一在 mp/components/index.ts 暴露就好了？
diff --git a/apps/web-ele/src/views/mp/draft/index.vue b/apps/web-ele/src/views/mp/draft/index.vue
index f27e2771fdb6082a73a662944a8ab6c08b00c91f..c4ac2e5ffd3b3239351776eb7a1b4a318a907775 100644
--- a/apps/web-ele/src/views/mp/draft/index.vue
+++ b/apps/web-ele/src/views/mp/draft/index.vue
@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import type { Article } from './modules/types';
-
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpDraftApi } from '#/api/mp/draft';
 
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';
 
@@ -9,7 +8,7 @@ import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
 
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import { deleteDraft, getDraftPage } from '#/api/mp/draft';
-import * as MpFreePublishApi from '#/api/mp/freePublish';
+import { submitFreePublish } from '#/api/mp/freePublish';
 import { WxAccountSelect } from '#/views/mp/components';
 import { createEmptyNewsItem } from '#/views/mp/draft/modules/types';
 
@@ -19,11 +18,6 @@ import Form from './modules/form.vue';
 
 defineOptions({ name: 'MpDraft' });
 
-const [FormModal, formModalApi] = useVbenModal({
-  connectedComponent: Form,
-  destroyOnClose: true,
-});
-
 /** 刷新表格 */
 function handleRefresh() {
   gridApi.query();
@@ -35,61 +29,14 @@ function handleAccountChange(accountId: number) {
   gridApi.formApi.submitForm();
 }
 
-// TODO @hw：代码风格，要和对应的 antd index.vue 一致，类似方法的顺序，注释等。原因是，这样后续两端迭代，会方便很多。
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  formOptions: {
-    schema: useGridFormSchema(),
-  },
-  gridOptions: {
-    columns: useGridColumns(),
-    height: 'auto',
-    keepSource: true,
-    proxyConfig: {
-      ajax: {
-        query: async ({ page }, formValues) => {
-          const drafts = await 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,
-          };
-        },
-      },
-      autoLoad: false,
-    },
-    rowConfig: {
-      keyField: 'mediaId',
-      isHover: true,
-    },
-    toolbarConfig: {
-      refresh: true,
-      search: true,
-    },
-  } as VxeTableGridOptions<Article>,
-});
-
-/** 新增按钮操作 */
+/** 新增草稿 */
 async function handleCreate() {
   const formValues = await gridApi.formApi.getValues();
   const accountId = formValues.accountId;
-  if (!accountId || accountId === -1) {
+  if (!accountId) {
     ElMessage.warning('请先选择公众号');
     return;
   }
-
   formModalApi
     .setData({
       isCreating: true,
@@ -99,15 +46,14 @@ async function handleCreate() {
     .open();
 }
 
-/** 修改按钮操作 */
-async function handleEdit(row: Article) {
+/** 修改草稿 */
+async function handleEdit(row: MpDraftApi.DraftArticle) {
   const formValues = await gridApi.formApi.getValues();
   const accountId = formValues.accountId;
-  if (!accountId || accountId === -1) {
+  if (!accountId) {
     ElMessage.warning('请先选择公众号');
     return;
   }
-
   formModalApi
     .setData({
       isCreating: false,
@@ -118,61 +64,105 @@ async function handleEdit(row: Article) {
     .open();
 }
 
-/** 发布按钮操作 */
-async function handlePublish(row: Article) {
+/** 删除草稿 */
+async function handleDelete(row: MpDraftApi.DraftArticle) {
   const formValues = await gridApi.formApi.getValues();
   const accountId = formValues.accountId;
-  if (!accountId || accountId === -1) {
+  if (!accountId) {
     ElMessage.warning('请先选择公众号');
     return;
   }
-
-  const content =
-    '你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。' +
-    '已发布内容不会推送给用户，也不会展示在公众号主页中。 ' +
-    '发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。';
+  await ElMessageBox.confirm('此操作将永久删除该草稿, 是否继续?');
+  const hideLoading = ElLoading.service({
+    text: '删除中...',
+  });
   try {
-    await ElMessageBox.confirm(content);
-    const loadingInstance = ElLoading.service({
-      text: '发布中...',
-    });
-    try {
-      await MpFreePublishApi.submitFreePublish(accountId, row.mediaId);
-      ElMessage.success('发布成功');
-      await gridApi.query();
-    } finally {
-      loadingInstance.close();
-    }
-  } catch {
-    //
+    await deleteDraft(accountId, row.mediaId);
+    ElMessage.success('删除成功');
+    handleRefresh();
+  } finally {
+    hideLoading.close();
   }
 }
 
-/** 删除按钮操作 */
-async function handleDelete(row: Article) {
+/** 发布草稿 */
+async function handlePublish(row: MpDraftApi.DraftArticle) {
   const formValues = await gridApi.formApi.getValues();
   const accountId = formValues.accountId;
   if (!accountId) {
     ElMessage.warning('请先选择公众号');
     return;
   }
-
+  await ElMessageBox.confirm(
+    '你正在通过发布的方式发表内容。 发布不占用群发次数，一天可多次发布。' +
+      '已发布内容不会推送给用户，也不会展示在公众号主页中。 ' +
+      '发布后，你可以前往发表记录获取链接，也可以将发布内容添加到自定义菜单、自动回复、话题和页面模板中。',
+  );
+  const hideLoading = ElLoading.service({
+    text: '发布中...',
+  });
   try {
-    await ElMessageBox.confirm('此操作将永久删除该草稿, 是否继续?');
-    const loadingInstance = ElLoading.service({
-      text: '删除中...',
-    });
-    try {
-      await deleteDraft(accountId, row.mediaId);
-      ElMessage.success('删除成功');
-      handleRefresh();
-    } finally {
-      loadingInstance.close();
-    }
-  } catch {
-    //
+    await submitFreePublish(accountId, row.mediaId);
+    ElMessage.success('发布成功');
+    handleRefresh();
+  } finally {
+    hideLoading.close();
   }
 }
+
+const [FormModal, formModalApi] = useVbenModal({
+  connectedComponent: Form,
+  destroyOnClose: true,
+});
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  formOptions: {
+    schema: useGridFormSchema(),
+  },
+  gridOptions: {
+    columns: useGridColumns(),
+    height: 'auto',
+    keepSource: true,
+    proxyConfig: {
+      ajax: {
+        query: async ({ page }, formValues) => {
+          // 调试用：跳过请求，直接返回模拟数据
+          const drafts = await 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;
+              });
+            }
+          });
+
+          // 模拟数据
+          // const mockList = [
+
+          return {
+            list: drafts.list,
+            total: drafts.total, // 模拟总数
+          };
+        },
+      },
+      autoLoad: false,
+    },
+    rowConfig: {
+      keyField: 'mediaId',
+      isHover: true,
+    },
+    toolbarConfig: {
+      refresh: true,
+      search: true,
+    },
+  } as VxeTableGridOptions<MpDraftApi.DraftArticle>,
+});
 </script>
 
 <template>
diff --git a/apps/web-ele/src/views/mp/draft/mock.js b/apps/web-ele/src/views/mp/draft/mock.js
deleted file mode 100644
index 256c294d145c135809bd5be1d63ad7dfeb62dd33..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/views/mp/draft/mock.js
+++ /dev/null
@@ -1,165 +0,0 @@
-// TODO @hw：要不要删除
-export default {
-  list: [
-    {
-      mediaId:
-        'r6ryvl6LrxBU0miaST4Y-q-G9pdsmZw0OYG4FzHQkKfpLfEwIH51wy2bxisx8PvW',
-      content: {
-        newsItem: [
-          {
-            title: '我是标题（OOO）',
-            author: '我是作者',
-            digest: '我是摘要',
-            content: '我是内容',
-            contentSourceUrl: 'https://www.iocoder.cn',
-            thumbMediaId:
-              'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
-            showCoverPic: 0,
-            needOpenComment: 0,
-            onlyFansCanComment: 0,
-            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9XaFphcmtJVFh3VEc4Q1MxQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN2QxTE56SFBCYXc2RE9NcUxIeS1CQjJuUHhTWjBlN2VOeGRpRi1fZUhwN1FNQjdrQV9yRU9EU0hibHREZmZoVW5acnZrN3ZjaWsxejR3RGpKczBzTHFIM0dFNFZWVkpBc0dWWlAzUEhlVmpnfn4%3D&chksm=1f6354802814dd969ef83c0f3babe555c614270b30bc383beaf7ffd13b0257f0fe5ced9af694#rd',
-            thumbUrl:
-              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png',
-          },
-          {
-            title: '我是标题（XXX）',
-            author: '我是作者',
-            digest: '我是摘要',
-            content: '我是内容',
-            contentSourceUrl: 'https://www.iocoder.cn',
-            thumbMediaId:
-              'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
-            showCoverPic: 0,
-            needOpenComment: 0,
-            onlyFansCanComment: 0,
-            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9yTlYwOEs1clpwcE5OUEhCQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN0NSMjFqN3N1aUZMbFNVLTZHN2ZDME9qOGp2THk2RFNlSTlKZ3Y1czFVZDdQQm5IeUg3dEppSUtpQUh5SExOOTRkT3dHNUdBdHdWSWlOendlREV3dS1jUEVQbFpiVTZmVW5iRWhZcGdkNTFRfn4%3D&chksm=1f6354802814dd96a403151cd44c7da4eecf0e475d25423e46ecd795b513bafd829a75daef9b#rd',
-            thumbUrl:
-              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png',
-          },
-        ],
-      },
-      updateTime: 1_673_655_730,
-    },
-    {
-      mediaId:
-        'r6ryvl6LrxBU0miaST4Y-jGpXnO73ihN0lsNXknCRQHapp2xgHMRxHKG50LituFe',
-      content: {
-        newsItem: [
-          {
-            title: '我是标题（修改）',
-            author: '我是作者',
-            digest: '我是摘要',
-            content: '我是内容',
-            contentSourceUrl: 'https://www.iocoder.cn',
-            thumbMediaId:
-              'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
-            showCoverPic: 0,
-            needOpenComment: 0,
-            onlyFansCanComment: 0,
-            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl95WVFXYndIZnZJd0t5cjgvQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuN1dlNURPbWswbEF4RDd5dVJTdjQ4cm9Cc0Q1TWhpMUh6SE1hVEE3ZHljaHhlZjZYSGF5N2JNSHpDTlh6ajNZbkpGTGpTcUQ4M3NMdW41ZUpXNFZZQ1VKbVlaMVp5ekxEV1czREdsY1dOYTZnfn4%3D&chksm=1f6354be2814dda8e6238037c2ebd52b1c8e80e93249a861ad80e4d40e5ca7207233475ca689#rd',
-            thumbUrl:
-              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png',
-          },
-        ],
-      },
-      updateTime: 1_673_655_584,
-    },
-    {
-      mediaId:
-        'r6ryvl6LrxBU0miaST4Y-v5SrbNCPpD6M_p3TmSrYwTjKogs-0DMJgmjMyNZPeMO',
-      content: {
-        newsItem: [
-          {
-            title: '1321',
-            author: '3232',
-            digest: '1333',
-            content: '<p>444</p>',
-            contentSourceUrl: 'http://www.iocoder.cn',
-            thumbMediaId:
-              'r6ryvl6LrxBU0miaST4Y-tlQmcl3RdC-Jcgns6IQtf7zenGy3b86WLT7GzUcrb1T',
-            showCoverPic: 0,
-            needOpenComment: 0,
-            onlyFansCanComment: 0,
-            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9jelJiaDAzbmdpSkJOZ2M2QWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNDNXVVc2ZDRYeTY0Zm1weXR6dE9vQWh1TzEwbEpUVnRfVzJyaGFDNXBkZ0ZXM2JFOTNaRHNhOHRUeFdEanhMeS01X01kMUNWQ1BpRER3cjYwTl9pMnpFLUJhZXFucVVfM1pDUXlTUEl1S25nfn4%3D&chksm=1f6354bc2814ddaa56a90ad5bc3d078601c8d1589ba01827a8170587bc830ff9747b5f59c3a0#rd',
-            thumbUrl:
-              'http://mmbiz.qpic.cn/mmbiz_png/btUmCVHwbJUoicwBiacjVeQbu6QxgBVrukfSJXz509boa21SpH8OVHAqXCJiaiaAaHQJNxwwsa0gHRXVr0G5EZYamw/0?wx_fmt=png',
-          },
-        ],
-      },
-      updateTime: 1_673_628_969,
-    },
-    {
-      mediaId:
-        'r6ryvl6LrxBU0miaST4Y-vdWrisK5EZbk4Y3tzh8P0PG0eEUbnQrh0BcsEb3WNP0',
-      content: {
-        newsItem: [
-          {
-            title: 'tudou',
-            author: 'haha',
-            digest: '312',
-            content: '<p>132312</p>',
-            contentSourceUrl: 'http://www.iocoder.cn',
-            thumbMediaId:
-              'r6ryvl6LrxBU0miaST4Y-pgFtUNLu1foMSAMkoOsrQrTZ8EtTMssBLfTtzP0dfjG',
-            showCoverPic: 0,
-            needOpenComment: 0,
-            onlyFansCanComment: 0,
-            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9qdkJ1ZjBoUmg2Uk9TS3RlQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNVg2aTJsaC1fMkU2eXNacUplN3VDTTZFZkhtMjhuTUZvWkxsNDBRSXExY2tiVXRHb09TaHgtREhzY3doZ0JYeC1TSTZ5eWZldXJsOWtfbV8yMi1aYkcyZ2pOY0haM0Ntb3VSWEtxUGVFRlNBfn4%3D&chksm=1f6354ba2814ddacf0184b24d310483641ef190b1faac098c285eb416c70017e2f54decfa1af#rd',
-            thumbUrl:
-              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pgFtUNLu1foMSAMkoOsrQrTZ8EtTMssBLfTtzP0dfjG.png',
-          },
-        ],
-      },
-      updateTime: 1_673_628_760,
-    },
-    {
-      mediaId:
-        'r6ryvl6LrxBU0miaST4Y-u9kTIm1DhWZDdXyxsxUVv2Z5DAB99IPxkIRTUUD206k',
-      content: {
-        newsItem: [
-          {
-            title: '12',
-            author: '333',
-            digest: '123',
-            content: '123',
-            contentSourceUrl: 'https://www.iocoder.cn',
-            thumbMediaId:
-              'r6ryvl6LrxBU0miaST4Y-jVixJGgnBnkBPRbuVptOW0CHYuQFyiOVNtamctS8xU8',
-            showCoverPic: 0,
-            needOpenComment: 0,
-            onlyFansCanComment: 0,
-            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9qVVhpSDZUaFJWTzBBWWRVQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNWRnTDJWYmF2NER0clV1bThmQ0xUR3hqQnJkZ3BJSUNmNDJmc0lCZ1dadkVnZ3Z5bkN4YWtVUjhoaWZWYzZURUR4NnpMd0Y4Z3U5aUdib0lkMzI4Rjg3SG9JX2FycTMxbUctOHplaTlQVVhnfn4%3D&chksm=1f6354b62814dda076c778af33f06580165d8aa81f7798d55cfabb1886b5c74d9b2124a3535c#rd',
-            thumbUrl:
-              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-jVixJGgnBnkBPRbuVptOW0CHYuQFyiOVNtamctS8xU8.jpg',
-          },
-        ],
-      },
-      updateTime: 1_673_626_494,
-    },
-    {
-      mediaId:
-        'r6ryvl6LrxBU0miaST4Y-sO24upobaENDmeByfBTfaozB3aOqSMAV0lGy-UkHXE7',
-      content: {
-        newsItem: [
-          {
-            title: '我是标题',
-            author: '我是作者',
-            digest: '我是摘要',
-            content: '我是内容',
-            contentSourceUrl: 'https://www.iocoder.cn',
-            thumbMediaId:
-              'r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn',
-            showCoverPic: 0,
-            needOpenComment: 0,
-            onlyFansCanComment: 0,
-            url: 'http://mp.weixin.qq.com/s?__biz=MzA3NjM4MzQzOQ==&tempkey=MTIxMl9LT2dqRnpMNUpsR0hjYWtBQWwxQ3R5R0JGTXBDM1Q0N2ZFQm8zeUphOFlwNEpXSWxTYm9RQnJ6cHVuNGNmazZTdlE5WkxvU0tfX2V5cjV2WjJiR0xjQUhyREFSZWo2eWNrUW9EYVh6ZkpWRXBLR3FmTEV6YldBMno3Q2ZvVXBSdzlaVDc3aFhndEpQWUwzWmFMUWt0YVVURE1VZ1FsQTdPMlRtc3JBfn4%3D&chksm=1f6354aa2814ddbcc2637382f963a8742993ac38ebcebe6e3411df5ac82ac7bbdb391be6494a#rd',
-            thumbUrl:
-              'http://test.yudao.iocoder.cn/r6ryvl6LrxBU0miaST4Y-pIcmK-zAAId-9TGgy-DrSLhjVuWbuT3ZBjk9K1yQ0Dn.png',
-          },
-        ],
-      },
-      updateTime: 1_673_534_279,
-    },
-  ],
-  total: 6,
-};
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 227823126a9e4ad4ec15d2e56b13a610bd6cc898..96863615e8e2586158cc2a2200e2a6b913088a5f 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
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { UploadFiles, UploadProps, UploadRawFile } from 'element-plus';
 
-import type { NewsItem } from './types';
+import type { MpDraftApi } from '#/api/mp/draft';
 
 import { computed, inject, reactive, ref } from 'vue';
 
@@ -13,20 +13,18 @@ import { ElButton, ElDialog, ElImage, ElMessage, ElUpload } from 'element-plus';
 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
 import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
 
-// TODO @hw：代码风格，要和对应的 antd index.vue 一致，类似方法的顺序，注释等。原因是，这样后续两端迭代，会方便很多。
-
 const props = defineProps<{
   isFirst: boolean;
-  modelValue: NewsItem;
+  modelValue: MpDraftApi.NewsItem;
 }>();
 
 const emit = defineEmits<{
-  (e: 'update:modelValue', v: NewsItem): void;
+  (e: 'update:modelValue', v: MpDraftApi.NewsItem): void;
 }>();
 
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-permanent`; // 上传永久素材的地址
 const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
-const newsItem = computed<NewsItem>({
+const newsItem = computed<MpDraftApi.NewsItem>({
   get() {
     return props.modelValue;
   },
@@ -36,7 +34,7 @@ const newsItem = computed<NewsItem>({
 });
 
 const accountId = inject<number>('accountId');
-const showImageDialog = ref(false);
+const dialogVisible = ref(false);
 
 const fileList = ref<UploadFiles>([]);
 interface UploadData {
@@ -48,15 +46,19 @@ 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;
 }
 
-const onBeforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) =>
-  useBeforeUpload(UploadType.Image, 2)(rawFile);
+const onBeforeUpload: UploadProps['beforeUpload'] = (file: UploadRawFile) =>
+  useBeforeUpload(UploadType.Image, 2)(file as any);
 
 function onUploadSuccess(res: any) {
   if (res.code !== 0) {
@@ -113,7 +115,7 @@ function onUploadError(err: Error) {
           <ElButton
             size="small"
             type="primary"
-            @click="showImageDialog = true"
+            @click="handleOpenDialog"
             class="ml-1.5"
           >
             素材库选择
@@ -127,7 +129,7 @@ function onUploadError(err: Error) {
       </div>
       <ElDialog
         title="选择图片"
-        v-model="showImageDialog"
+        v-model="dialogVisible"
         width="80%"
         append-to-body
         destroy-on-close
diff --git a/apps/web-ele/src/views/mp/draft/modules/news-form.vue b/apps/web-ele/src/views/mp/draft/modules/news-form.vue
index ba5f8864df6696169888a6fb3d3cc2d7eb3d1f19..26a6152e640dd40316482fa5e13cd288e3496fa6 100644
--- a/apps/web-ele/src/views/mp/draft/modules/news-form.vue
+++ b/apps/web-ele/src/views/mp/draft/modules/news-form.vue
@@ -93,27 +93,29 @@ function plusNews() {
 <template>
   <ElContainer>
     <ElAside width="40%">
-      <div class="mx-auto mb-2.5 w-3/5 border border-gray-200 p-2.5">
+      <div class="mx-auto mb-[10px] w-[60%] border border-[#eaeaea] p-[10px]">
         <div v-for="(news, index) in newsList" :key="index">
           <div
-            class="group mx-auto h-[120px] w-full cursor-pointer bg-white"
+            class="group relative mx-auto mb-[10px] w-full cursor-pointer border-[2px] bg-white"
             v-if="index === 0"
-            :class="{
-              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
-            }"
+            :class="
+              activeNewsIndex === index
+                ? 'border-green-500'
+                : 'border-transparent'
+            "
             @click="activeNewsIndex = index"
           >
-            <div class="relative h-[120px] w-full bg-[#acadae]">
+            <div class="relative 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"
+                class="absolute bottom-0 left-0 inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-center text-[15px] text-white opacity-65"
               >
                 {{ news.title }}
               </div>
             </div>
             <div
+              class="relative flex justify-center gap-[10px] py-[5px] text-center"
               v-if="newsList.length > 1"
-              class="relative -bottom-6 hidden text-center group-hover:block"
             >
               <ElButton
                 type="info"
@@ -134,25 +136,29 @@ function plusNews() {
               </ElButton>
             </div>
           </div>
-          <!-- TODO @hw：1）每个文章的选中框太粗了；2）没完全覆盖住文章；；；最好首个文章，和第个文章的情况，都看看 -->
           <div
-            class="group mx-auto w-full cursor-pointer border-t border-gray-200 bg-white py-1.5"
+            class="group relative mx-auto mb-[10px] cursor-pointer border-[2px] bg-white"
             v-if="index > 0"
-            :class="{
-              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
-            }"
+            :class="
+              activeNewsIndex === index
+                ? 'border-green-500'
+                : 'border-transparent'
+            "
             @click="activeNewsIndex = index"
           >
-            <div class="relative -ml-0.5">
-              <div class="inline-block w-[70%] text-xs">{{ news.title }}</div>
-              <div class="inline-block w-1/4 bg-[#acadae]">
-                <img class="h-full w-full" :src="news.thumbUrl" width="100%" />
+            <div class="relative">
+              <div class="bg-[#acadae]">
+                <img class="block h-full w-full" :src="news.thumbUrl" />
+                <div
+                  class="absolute bottom-0 left-0 inline-block h-[25px] w-[100%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-center text-[15px] text-white opacity-65"
+                >
+                  {{ news.title }}
+                </div>
               </div>
             </div>
-            <!-- TODO @hw：这里的按钮，交互不太对。应该在每个卡片的里面；或者类似公众号现在的交互，放到右侧；。。。复现本周：如果有 2 个文章的时候 -->
-            <!-- TODO @hw：当有 2 个文章的时候，挪到第二个文章的时候，卡片会变大。期望：不变大 -->
+
             <div
-              class="relative -bottom-6 hidden text-center group-hover:block"
+              class="relative flex justify-center gap-[10px] py-[5px] text-center"
             >
               <ElButton
                 v-if="newsList.length > index + 1"
diff --git a/apps/web-ele/src/views/mp/menu/index.vue b/apps/web-ele/src/views/mp/menu/index.vue
index 2794667c642ea710846c5ea4b4484ffdb5fc6623..53c2bd87c020ba6f92ed456a16d76506dbeb5021 100644
--- a/apps/web-ele/src/views/mp/menu/index.vue
+++ b/apps/web-ele/src/views/mp/menu/index.vue
@@ -4,22 +4,21 @@ import type { Menu, RawMenu } from './modules/types';
 import { nextTick, onMounted, ref } from 'vue';
 
 import { confirm, ContentWrap, DocAlert, Page } from '@vben/common-ui';
+import { handleTree } from '@vben/utils';
 
 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 { deleteMenu, getMenuList, saveMenu } from '#/api/mp/menu';
 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 Editor from '#/views/mp/menu/modules/editor.vue';
+import Previewer from '#/views/mp/menu/modules/previewer.vue';
 
-// TODO @hw：是不是资源的地址，统一下；antd 和 ele，目录不同。建议按照 ele 的方法先；
 import iphoneBackImg from './assets/iphone_backImg.png';
 import menuFootImg from './assets/menu_foot.png';
 import menuHeadImg from './assets/menu_head.png';
@@ -33,6 +32,24 @@ 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);
+    }
+  },
+});
+
 // ======================== 菜单操作 ========================
 
 // 当前选中菜单编码：
@@ -48,8 +65,8 @@ const parentIndex = ref(-1);
 // ======================== 菜单编辑 ========================
 
 const showRightPanel = ref(false); // 右边配置显示默认详情还是配置详情
-const isParent = ref<boolean>(true); // 是否一级菜单，控制MenuEditor中name字段长度
-const activeMenu = ref<Menu>({}); // 选中菜单，MenuEditor的modelValue
+const isParent = ref<boolean>(true); // 是否一级菜单，控制Editor中name字段长度
+const activeMenu = ref<Menu>({}); // 选中菜单，Editor的modelValue
 
 // 一些临时值放在这里进行判断，如果放在 activeMenu，由于引用关系，menu 也会多了多余的参数
 const tempSelfObj = ref<{
@@ -63,24 +80,6 @@ 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);
-    }
-  },
-});
-
 /** 侦听公众号变化 */
 async function onAccountChanged(values: Record<string, any>) {
   accountId.value = values.accountId;
@@ -88,16 +87,32 @@ async function onAccountChanged(values: Record<string, any>) {
   const accountList = await getSimpleAccountList();
   const account = accountList.find((item) => item.id === values.accountId);
   accountName.value = account?.name || '';
-  getList();
+  await getList();
 }
 
+/** 初始化账号ID - 作为备用方案，防止 handleValuesChange 未触发 */
+async function initAccountId() {
+  await nextTick(); // 等待表单初始化完成
+  const values = await accountFormApi.getValues();
+  if (values?.accountId && accountId.value === -1) {
+    // 如果表单有值但 accountId 还是初始值，则手动触发一次
+    await onAccountChanged(values);
+  }
+}
+
+/** 组件挂载时初始化账号 ID */
+onMounted(async () => {
+  await nextTick();
+  await initAccountId();
+});
+
 /** 查询并转换菜单 */
 async function getList() {
   loading.value = true;
   try {
-    const data = await MpMenuApi.getMenuList(accountId.value);
+    const data = await getMenuList(accountId.value);
     const menuData = menuListToFrontend(data);
-    menuList.value = UtilsTree.handleTree(menuData, 'id');
+    menuList.value = handleTree(menuData, 'id') as Menu[];
   } finally {
     loading.value = false;
   }
@@ -111,7 +126,9 @@ function handleQuery() {
 
 /** 将后端返回的 menuList，转换成前端的 menuList */
 function menuListToFrontend(list: any[]) {
-  if (!list) return [];
+  if (!list) {
+    return [];
+  }
 
   const result: RawMenu[] = [];
   list.forEach((item: RawMenu) => {
@@ -151,6 +168,7 @@ function resetForm() {
 }
 
 // ======================== 菜单操作 ========================
+
 /** 一级菜单点击事件 */
 function menuClicked(parent: Menu, x: number) {
   // 右侧的表单相关
@@ -181,66 +199,55 @@ function subMenuClicked(child: Menu, x: number, y: number) {
 
 /** 删除当前菜单 */
 async function onDeleteMenu() {
-  try {
-    await confirm('确定要删除吗?');
-    if (tempSelfObj.value.grand === Level.Parent) {
-      // 一级菜单的删除方法
-      menuList.value.splice(tempSelfObj.value.x, 1);
-    } else if (tempSelfObj.value.grand === Level.Child) {
-      // 二级菜单的删除方法
-      menuList.value[tempSelfObj.value.x]?.children?.splice(
-        tempSelfObj.value.y,
-        1,
-      );
-    }
-    // 提示
-    ElMessage.success('删除成功');
-
-    // 处理菜单的选中
-    activeMenu.value = {};
-    showRightPanel.value = false;
-    activeIndex.value = MENU_NOT_SELECTED;
-  } catch {
-    //
+  await confirm('确定要删除吗?');
+  if (tempSelfObj.value.grand === Level.Parent) {
+    // 一级菜单的删除方法
+    menuList.value.splice(tempSelfObj.value.x, 1);
+  } else if (tempSelfObj.value.grand === Level.Child) {
+    // 二级菜单的删除方法
+    menuList.value[tempSelfObj.value.x]?.children?.splice(
+      tempSelfObj.value.y,
+      1,
+    );
   }
+  // 提示
+  ElMessage.success('删除成功');
+
+  // 处理菜单的选中
+  activeMenu.value = {};
+  showRightPanel.value = false;
+  activeIndex.value = MENU_NOT_SELECTED;
 }
 
 // ======================== 菜单编辑 ========================
+
 /** 保存菜单 */
 async function onSave() {
+  await confirm('确定要保存吗?');
+  const hideLoading = ElLoading.service({
+    text: '保存中...',
+  });
   try {
-    await confirm('确定要保存吗?');
-    const loadingInstance = ElLoading.service({
-      text: '保存中...',
-    });
-    try {
-      await MpMenuApi.saveMenu(accountId.value, menuListToBackend());
-      getList();
-      ElMessage.success('发布成功');
-    } finally {
-      loadingInstance.close();
-    }
-  } catch {
-    //
+    await saveMenu(accountId.value, menuListToBackend());
+    await getList();
+    ElMessage.success('发布成功');
+  } finally {
+    hideLoading.close();
   }
 }
 
 /** 清空菜单 */
 async function onClear() {
+  await confirm('确定要删除吗?');
+  const hideLoading = ElLoading.service({
+    text: '删除中...',
+  });
   try {
-    await confirm('确定要删除吗?');
-    const loadingInstance = ElLoading.service({
-      text: '删除中...',
-    });
-    try {
-      await MpMenuApi.deleteMenu(accountId.value);
-      handleQuery();
-      ElMessage.success('清空成功');
-    } finally {
-      loadingInstance.close();
-    }
-  } catch {
-    //
+    await deleteMenu(accountId.value);
+    handleQuery();
+    ElMessage.success('清空成功');
+  } finally {
+    hideLoading.close();
   }
 }
 
@@ -264,7 +271,7 @@ function menuListToBackend() {
 }
 
 /** 将前端的 menu，转换成后端接收的 menu */
-// TODO: @芋艿，需要根据后台API删除不需要的字段
+// TODO: @芋艿，需要根据后台 API 删除不需要的字段
 function menuToBackend(menu: any) {
   const result = {
     ...menu,
@@ -282,31 +289,8 @@ function menuToBackend(menu: any) {
   result.replyArticles = menu.reply.articles;
   result.replyMusicUrl = menu.reply.musicUrl;
   result.replyHqMusicUrl = menu.reply.hqMusicUrl;
-
   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();
-});
-// TODO @hw：这个界面：整理下代码，整体的风格、方法的顺序、注释，参考 antd 哈；
 </script>
 
 <template>
@@ -345,7 +329,7 @@ onMounted(async () => {
             class="weixin-menu h-[46px] bg-no-repeat pl-[43px] text-[12px]"
             :style="{ backgroundImage: `url(${menuFootImg})` }"
           >
-            <MenuPreviewer
+            <Previewer
               v-model="menuList"
               :account-id="accountId"
               :active-index="activeIndex"
@@ -378,7 +362,7 @@ onMounted(async () => {
           class="right box-border flex-1 basis-[63%] bg-[#e8e7e7] p-[20px]"
           v-if="showRightPanel"
         >
-          <MenuEditor
+          <Editor
             :account-id="accountId"
             :is-parent="isParent"
             v-model="activeMenu"
diff --git a/apps/web-ele/src/views/mp/menu/modules/menu-editor.vue b/apps/web-ele/src/views/mp/menu/modules/editor.vue
similarity index 98%
rename from apps/web-ele/src/views/mp/menu/modules/menu-editor.vue
rename to apps/web-ele/src/views/mp/menu/modules/editor.vue
index eb15909d20a764d19702cd66aede13fddd138f72..c3dee35a2142b7a3d0367d0670ed190ab946ced0 100644
--- a/apps/web-ele/src/views/mp/menu/modules/menu-editor.vue
+++ b/apps/web-ele/src/views/mp/menu/modules/editor.vue
@@ -18,9 +18,8 @@ import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material
 import News from '#/views/mp/components/wx-news/wx-news.vue';
 import ReplySelect from '#/views/mp/components/wx-reply/wx-reply.vue';
 
-import menuOptions from './menuOptions';
+import { menuOptions } from './types';
 
-// TODO @hw：去掉 menu- 前缀
 const props = defineProps<{
   accountId: number;
   isParent: boolean;
diff --git a/apps/web-ele/src/views/mp/menu/modules/menuOptions.ts b/apps/web-ele/src/views/mp/menu/modules/menuOptions.ts
deleted file mode 100644
index 0fd6feb28b705cc3c21e72c7faff55f62fc81aaa..0000000000000000000000000000000000000000
--- a/apps/web-ele/src/views/mp/menu/modules/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-ele/src/views/mp/menu/modules/menu-previewer.vue b/apps/web-ele/src/views/mp/menu/modules/previewer.vue
similarity index 98%
rename from apps/web-ele/src/views/mp/menu/modules/menu-previewer.vue
rename to apps/web-ele/src/views/mp/menu/modules/previewer.vue
index 2fa6f57add788fbd1521fddf9f1022c5f2818d1f..fc087d6497d9a7286f3f7f582e03001ca031633a 100644
--- a/apps/web-ele/src/views/mp/menu/modules/menu-previewer.vue
+++ b/apps/web-ele/src/views/mp/menu/modules/previewer.vue
@@ -7,8 +7,6 @@ import { IconifyIcon } from '@vben/icons';
 
 import draggable from 'vuedraggable';
 
-// TODO @hw：文件名，不用带 menu- 前缀；
-
 const props = defineProps<{
   accountId: number;
   activeIndex: string;
@@ -199,6 +197,8 @@ function onChildDragEnd({ newIndex }: { newIndex: number }) {
 </template>
 <style lang="scss" scoped>
 .draggable-ghost {
-  @apply border border-[#4299e1] bg-[#f7fafc] opacity-50;
+  background: #f7fafc;
+  border: 1px solid #4299e1;
+  opacity: 0.5;
 }
 </style>
diff --git a/apps/web-ele/src/views/mp/menu/modules/types.ts b/apps/web-ele/src/views/mp/menu/modules/types.ts
index 928534ea9ae8f6b56becf1b92aa85d93ce085504..ae0edbd21b9248b77d9fdecdf2835e60b2727c27 100644
--- a/apps/web-ele/src/views/mp/menu/modules/types.ts
+++ b/apps/web-ele/src/views/mp/menu/modules/types.ts
@@ -71,3 +71,46 @@ interface _Menu extends RawMenu {
 }
 
 export type Menu = Partial<_Menu>;
+
+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: '选择地理位置',
+  },
+];
diff --git a/packages/constants/src/biz-mp-enum.ts b/packages/constants/src/biz-mp-enum.ts
index 6cdfa9d2b3f6e9e5b1cea59b97c0effc2d45766b..8d2eee828e2ddb8ca70209227358556fd7098b0c 100644
--- a/packages/constants/src/biz-mp-enum.ts
+++ b/packages/constants/src/biz-mp-enum.ts
@@ -77,3 +77,14 @@ export enum MenuType {
   VIEW = 'view', // 跳转 URL
   VIEW_LIMITED = 'view_limited', // 跳转图文消息URL
 }
+
+/** 允许选择的请求消息类型 */
+export const RequestMessageTypes = new Set([
+  'image',
+  'link',
+  'location',
+  'shortvideo',
+  'text',
+  'video',
+  'voice',
+]);