!266 【antd/ele】【mp】迁移

Merge pull request !266 from hw/reform-mp
2025-11-20 09:57:17 +00:00
parent ee7b0de534 c815e07321
commit 7f9041da18
78 changed files with 353 additions and 569 deletions
--- a/apps/web-antd/src/api/mp/draft/index.ts
+++ b/apps/web-antd/src/api/mp/draft/index.ts
@@ -24,6 +24,49 @@ export namespace MpDraftApi {
    articles: Article[];
    createTime?: Date;
  }
+
+  /** 图文项（包含预览字段） */
+  export interface NewsItem {
+    title: string;
+    thumbMediaId: string;
+    author: string;
+    digest: string;
+    showCoverPic: number;
+    content: string;
+    contentSourceUrl: string;
+    needOpenComment: number;
+    onlyFansCanComment: number;
+    thumbUrl: string;
+    picUrl?: string; // 用于预览封面
+  }
+
+  /** 图文列表 */
+  export interface NewsItemList {
+    newsItem: NewsItem[];
+  }
+
+  /** 草稿文章（用于展示） */
+  export interface DraftArticle {
+    mediaId: string;
+    content: NewsItemList;
+    updateTime: number;
+  }
+}
+
+/** 创建空的图文项 */
+export function createEmptyNewsItem(): MpDraftApi.NewsItem {
+  return {
+    title: '',
+    thumbMediaId: '',
+    author: '',
+    digest: '',
+    showCoverPic: 0,
+    content: '',
+    contentSourceUrl: '',
+    needOpenComment: 0,
+    onlyFansCanComment: 0,
+    thumbUrl: '',
+  };
 }

 /** 查询草稿列表 */
--- a/apps/web-antd/src/api/mp/material/index.ts
+++ b/apps/web-antd/src/api/mp/material/index.ts
@@ -1,15 +1,8 @@
 import type { PageParam, PageResult } from '@vben/request';

-import { requestClient } from '#/api/request';
+import { MaterialType } from '@vben/constants';

-/** 素材类型枚举 */
-// TODO @hw：mp 相关的枚举，可以考虑放这里来。
-export enum MaterialType {
-  IMAGE = 1, // 图片
-  THUMB = 4, // 缩略图
-  VIDEO = 3, // 视频
-  VOICE = 2, // 语音
-}
+import { requestClient } from '#/api/request';

 export namespace MpMaterialApi {
  /** 素材信息 */
--- a/apps/web-antd/src/api/mp/menu/index.ts
+++ b/apps/web-antd/src/api/mp/menu/index.ts
@@ -1,20 +1,6 @@
-import { requestClient } from '#/api/request';
+import { MenuType } from '@vben/constants';

-/** 菜单类型枚举 */
-// TODO @hw：mp 相关的枚举，可以考虑放这里来。
-export enum MenuType {
-  CLICK = 'click', // 点击推事件
-  LOCATION_SELECT = 'location_select', // 发送位置
-  MEDIA_ID = 'media_id', // 下发消息
-  MINIPROGRAM = 'miniprogram', // 小程序
-  PIC_PHOTO_OR_ALBUM = 'pic_photo_or_album', // 拍照或者相册发图
-  PIC_SYSPHOTO = 'pic_sysphoto', // 系统拍照发图
-  PIC_WEIXIN = 'pic_weixin', // 微信相册发图
-  SCANCODE_PUSH = 'scancode_push', // 扫码推事件
-  SCANCODE_WAITMSG = 'scancode_waitmsg', // 扫码带提示
-  VIEW = 'view', // 跳转 URL
-  VIEW_LIMITED = 'view_limited', // 跳转图文消息URL
-}
+import { requestClient } from '#/api/request';

 export namespace MpMenuApi {
  /** 菜单按钮信息 */
--- a/apps/web-antd/src/api/mp/message/index.ts
+++ b/apps/web-antd/src/api/mp/message/index.ts
@@ -1,19 +1,8 @@
 import type { PageParam, PageResult } from '@vben/request';

-import { requestClient } from '#/api/request';
+import { MessageType } from '@vben/constants';

-/** 消息类型枚举 */
-// TODO @hw：mp 相关的枚举，可以考虑放这里来。
-export enum MessageType {
-  IMAGE = 'image', // 图片消息
-  MPNEWS = 'mpnews', // 公众号图文消息
-  MUSIC = 'music', // 音乐消息
-  NEWS = 'news', // 图文消息
-  TEXT = 'text', // 文本消息
-  VIDEO = 'video', // 视频消息
-  VOICE = 'voice', // 语音消息
-  WXCARD = 'wxcard', // 卡券消息
-}
+import { requestClient } from '#/api/request';

 export namespace MpMessageApi {
  /** 消息信息 */
--- a/apps/web-antd/src/views/mp/autoReply/data.ts
+++ b/apps/web-antd/src/views/mp/autoReply/data.ts
@@ -3,13 +3,11 @@ import type { VxeGridPropTypes } from '#/adapter/vxe-table';

 import { markRaw } from 'vue';

-import { DICT_TYPE } from '@vben/constants';
+import { DICT_TYPE, AutoReplyMsgType as MsgType } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';

 import { WxReply } from '#/views/mp/components';

-import { MsgType } from './types';
-
 // TODO @芋艿：要不要使用统一枚举？
 const RequestMessageTypes = new Set([
  'image',
@@ -143,10 +141,6 @@ export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
    fieldName: 'reply',
    label: '回复消息',
    component: markRaw(WxReply),
-    // TODO @hw：这里注释，要不要删除掉？
-    // componentProps: {
-    //   modelValue: { type: 'video', content: '12456' },
-    // },
    modelPropName: 'modelValue',
  });
  return schema;
--- a/apps/web-antd/src/views/mp/autoReply/index.vue
+++ b/apps/web-antd/src/views/mp/autoReply/index.vue
@@ -5,6 +5,7 @@ import type { MpAutoReplyApi } from '#/api/mp/autoReply';
 import { computed, nextTick, ref } from 'vue';

 import { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
+import { AutoReplyMsgType as MsgType } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';

 import { message, Row, Tabs } from 'ant-design-vue';
@@ -21,7 +22,6 @@ import { WxAccountSelect } from '#/views/mp/components';
 import { useGridColumns, useGridFormSchema } from './data';
 import ReplyContentCell from './modules/content.vue';
 import Form from './modules/form.vue';
-import { MsgType } from './types';

 defineOptions({ name: 'MpAutoReply' });

--- a/apps/web-antd/src/views/mp/autoReply/modules/form.vue
+++ b/apps/web-antd/src/views/mp/autoReply/modules/form.vue
@@ -4,16 +4,15 @@ import type { Reply } from '#/views/mp/components';
 import { computed, nextTick, ref } from 'vue';

 import { useVbenModal } from '@vben/common-ui';
+import { AutoReplyMsgType as MsgType, ReplyType } from '@vben/constants';

 import { message } from 'ant-design-vue';

 import { useVbenForm } from '#/adapter/form';
 import { createAutoReply, updateAutoReply } from '#/api/mp/autoReply';
 import { $t } from '#/locales';
-import { ReplyType } from '#/views/mp/components/constants';

 import { useFormSchema } from '../data';
-import { MsgType } from '../types';

 const emit = defineEmits(['success']);

@@ -113,13 +112,6 @@ const [Modal, modalApi] = useVbenModal({
      // 编辑：加载数据
      const rowData = data.row;
      const formValues: any = { ...rowData };
-      // TODO @hw：下面要删除掉么，注释。
-      // delete formValues.responseMessageType;
-      // delete formValues.responseContent;
-      // delete formValues.responseMediaId;
-      // delete formValues.responseMediaUrl;
-      // delete formValues.responseDescription;
-      // delete formValues.responseArticles;
      formValues.reply = {
        type: rowData.responseMessageType,
        accountId: data.accountId || -1,
--- a/apps/web-antd/src/views/mp/autoReply/types.ts
+++ b/apps/web-antd/src/views/mp/autoReply/types.ts
@@ -1,8 +0,0 @@
-// 消息类型（Follow: 关注时回复；Message: 消息回复；Keyword: 关键词回复）
-// 作为 tab.name，enum 的数字不能随意修改，与 api 参数相关
-// TODO @hw：可以搞到 biz-mp-enum.ts 里。
-export enum MsgType {
-  Follow = 1,
-  Keyword = 3,
-  Message = 2,
-}
--- a/apps/web-antd/src/views/mp/components/constants.ts
+++ b/apps/web-antd/src/views/mp/components/constants.ts
@@ -1,33 +0,0 @@
-// TODO @hw：看看要不要迁移到 packages/constants/src/biz-mp-enum.ts
-export enum ReplyType {
-  Image = 'image',
-  Music = 'music',
-  News = 'news',
-  Text = 'text',
-  Video = 'video',
-  Voice = 'voice',
-}
-
-export enum NewsType {
-  Draft = '2',
-  Published = '1',
-}
-
-export enum MaterialType {
-  Image = 'image',
-  News = 'news',
-  Video = 'video',
-  Voice = 'voice',
-}
-
-export enum MsgType {
-  Event = 'event',
-  Image = 'image',
-  Link = 'link',
-  Location = 'location',
-  Music = 'music',
-  News = 'news',
-  Text = 'text',
-  Video = 'video',
-  Voice = 'voice',
-}
--- a/apps/web-antd/src/views/mp/components/index.ts
+++ b/apps/web-antd/src/views/mp/components/index.ts
@@ -1,13 +1,9 @@
-export * from './constants';
-
-export * from './wx-account-select';
-export * from './wx-location';
-export * from './wx-material-select';
-export * from './wx-msg';
-export * from './wx-music';
-export * from './wx-news';
-export * from './wx-reply';
-export * from './wx-video-play';
-export * from './wx-voice-play';
-
-// TODO @hw：要不使用 export { default as WxAccountSelect } from './account-select.vue'; 形式；
+export { default as WxAccountSelect } from './wx-account-select/account-select.vue';
+export { default as WxLocation } from './wx-location/wx-location.vue';
+export { default as WxMaterialSelect } from './wx-material-select/wx-material-select.vue';
+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 { 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';
--- 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
@@ -4,6 +4,7 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import { reactive, ref, watch } from 'vue';

 import { Page } from '@vben/common-ui';
+import { NewsType } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';

 import { Button, Pagination, Row, Spin } from 'ant-design-vue';
@@ -14,8 +15,6 @@ import { getFreePublishPage } from '#/api/mp/freePublish';
 import { getMaterialPage } from '#/api/mp/material';
 import { WxNews, WxVideoPlayer, WxVoicePlayer } from '#/views/mp/components';

-import { NewsType } from '../constants';
-
 defineOptions({ name: 'WxMaterialSelect' });

 const props = withDefaults(
--- a/apps/web-antd/src/views/mp/components/wx-msg/msg.vue
+++ b/apps/web-antd/src/views/mp/components/wx-msg/msg.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { MpMsgType as MsgType } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';

 import {
@@ -9,7 +10,6 @@ import {
  WxVoicePlayer,
 } from '#/views/mp/components';

-import { MsgType } from '../constants';
 import MsgEvent from './msg-event.vue';

 defineOptions({ name: 'Msg' });
--- 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
@@ -28,7 +28,7 @@ defineExpose({
            <Image
              :src="article.picUrl"
              :preview="false"
-              class="material-img"
+              class="material-img flex items-center justify-center"
            />
            <div class="news-content-title">
              <span>{{ article.title }}</span>
--- 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
@@ -3,14 +3,13 @@ import type { Reply } from './types';

 import { computed, ref } from 'vue';

+import { NewsType } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';

 import { Button, Col, Modal, Row } from 'ant-design-vue';

 import { WxMaterialSelect, WxNews } from '#/views/mp/components';

-import { NewsType } from '../constants';
-
 defineOptions({ name: 'TabNews' });

 const props = defineProps<{
--- a/apps/web-antd/src/views/mp/components/wx-reply/types.ts
+++ b/apps/web-antd/src/views/mp/components/wx-reply/types.ts
@@ -1,6 +1,6 @@
 import type { Ref } from 'vue';

-import type { ReplyType } from '../constants';
+import type { ReplyType } from '@vben/constants';

 import { unref } from 'vue';

--- 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
@@ -12,11 +12,11 @@ import type { Reply } from './types';

 import { computed, ref, unref, watch } from 'vue';

+import { NewsType, ReplyType } from '@vben/constants';
 import { IconifyIcon } from '@vben/icons';

 import { Row, Tabs } from 'ant-design-vue';

-import { NewsType, ReplyType } from '../constants';
 import TabImage from './tab-image.vue';
 import TabMusic from './tab-music.vue';
 import TabNews from './tab-news.vue';
--- a/apps/web-antd/src/views/mp/draft/index.vue
+++ b/apps/web-antd/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 { confirm, DocAlert, Page, useVbenModal } from '@vben/common-ui';
 import { $t } from '@vben/locales';
@@ -9,10 +8,9 @@ import { $t } from '@vben/locales';
 import { message } from 'ant-design-vue';

 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import { deleteDraft, getDraftPage } from '#/api/mp/draft';
+import { createEmptyNewsItem, deleteDraft, getDraftPage } from '#/api/mp/draft';
 import { submitFreePublish } from '#/api/mp/freePublish';
 import { WxAccountSelect } from '#/views/mp/components';
-import { createEmptyNewsItem } from '#/views/mp/draft/modules/types';

 import { useGridColumns, useGridFormSchema } from './data';
 import DraftTableCell from './modules/draft-table.vue';
@@ -49,7 +47,7 @@ async function handleCreate() {
 }

 /** 修改草稿 */
-async function handleEdit(row: Article) {
+async function handleEdit(row: MpDraftApi.DraftArticle) {
  const formValues = await gridApi.formApi.getValues();
  const accountId = formValues.accountId;
  if (!accountId) {
@@ -67,7 +65,7 @@ async function handleEdit(row: Article) {
 }

 /** 删除草稿 */
-async function handleDelete(row: Article) {
+async function handleDelete(row: MpDraftApi.DraftArticle) {
  const formValues = await gridApi.formApi.getValues();
  const accountId = formValues.accountId;
  if (!accountId) {
@@ -89,7 +87,7 @@ async function handleDelete(row: Article) {
 }

 /** 发布草稿 */
-async function handlePublish(row: Article) {
+async function handlePublish(row: MpDraftApi.DraftArticle) {
  const formValues = await gridApi.formApi.getValues();
  const accountId = formValues.accountId;
  if (!accountId) {
@@ -145,7 +143,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
            }
          });
          return {
-            list: drafts.list as unknown as Article[],
+            list: drafts.list as unknown as MpDraftApi.DraftArticle[],
            total: drafts.total,
          };
        },
@@ -160,8 +158,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
      refresh: true,
      search: true,
    },
-    // TODO @hw：这里有点纠结，一般是 MpDraftApi.Article，但是一改貌似就 linter 告警了。
-  } as VxeTableGridOptions<Article>,
+  } as VxeTableGridOptions<MpDraftApi.DraftArticle>,
 });
 </script>

--- a/apps/web-antd/src/views/mp/draft/modules/cover-select.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/cover-select.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { UploadFile } from 'ant-design-vue';

-import type { NewsItem } from './types';
+import type { MpDraftApi } from '#/api/mp/draft';

 import { computed, inject, reactive, ref } from 'vue';

@@ -14,16 +14,16 @@ import { UploadType, useBeforeUpload } from '#/utils/useUpload';

 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;
  },
--- a/apps/web-antd/src/views/mp/draft/modules/draft-table.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/draft-table.vue
@@ -1,12 +1,12 @@
 <script lang="ts" setup>
-import type { Article } from './types';
+import type { MpDraftApi } from '#/api/mp/draft';

 import { WxNews } from '#/views/mp/components';

 defineOptions({ name: 'DraftTableCell' });

 const props = defineProps<{
-  row: Article;
+  row: MpDraftApi.DraftArticle;
 }>();
 </script>

--- a/apps/web-antd/src/views/mp/draft/modules/form.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/form.vue
@@ -1,11 +1,11 @@
 <script lang="ts" setup>
-import type { NewsItem } from './types';
+import type { MpDraftApi } from '#/api/mp/draft';

 import { computed, provide, ref } from 'vue';

 import { useVbenModal } from '@vben/common-ui';

-import { message, Spin } from 'ant-design-vue';
+import { message } from 'ant-design-vue';

 import { createDraft, updateDraft } from '#/api/mp/draft';

@@ -16,10 +16,9 @@ const emit = defineEmits(['success']);
 const formData = ref<{
  accountId: number;
  mediaId?: string;
-  newsList?: NewsItem[];
+  newsList?: MpDraftApi.NewsItem[];
 }>();
-const newsList = ref<NewsItem[]>([]);
-const isSubmitting = ref(false);
+const newsList = ref<MpDraftApi.NewsItem[]>([]);

 const getTitle = computed(() => {
  return formData.value?.mediaId ? '修改图文' : '新建图文';
@@ -35,9 +34,6 @@ const [Modal, modalApi] = useVbenModal({
    if (!formData.value) {
      return;
    }
-
-    // TODO @hw：是不是 isSubmitting 非必须哈？因为 modal 已经去 lock 啦。
-    isSubmitting.value = true;
    modalApi.lock();
    try {
      if (formData.value.mediaId) {
@@ -54,7 +50,6 @@ const [Modal, modalApi] = useVbenModal({
      await modalApi.close();
      emit('success');
    } finally {
-      isSubmitting.value = false;
      modalApi.unlock();
    }
  },
@@ -68,7 +63,7 @@ const [Modal, modalApi] = useVbenModal({
      accountId: number;
      isCreating: boolean;
      mediaId?: string;
-      newsList?: NewsItem[];
+      newsList?: MpDraftApi.NewsItem[];
    }>();
    if (!data) {
      return;
@@ -85,12 +80,10 @@ const [Modal, modalApi] = useVbenModal({

 <template>
  <Modal :title="getTitle" class="w-4/5" destroy-on-close>
-    <Spin :spinning="isSubmitting">
-      <NewsForm
-        v-if="formData"
-        v-model="newsList"
-        :is-creating="!formData.mediaId"
-      />
-    </Spin>
+    <NewsForm
+      v-if="formData"
+      v-model="newsList"
+      :is-creating="!formData.mediaId"
+    />
  </Modal>
 </template>
--- a/apps/web-antd/src/views/mp/draft/modules/news-form.vue
+++ b/apps/web-antd/src/views/mp/draft/modules/news-form.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { NewsItem } from './types';
+import type { MpDraftApi } from '#/api/mp/draft';

 import { computed, ref } from 'vue';

@@ -8,23 +8,23 @@ import { IconifyIcon } from '@vben/icons';

 import { Button, Col, Input, Layout, Row, Textarea } from 'ant-design-vue';

+import { createEmptyNewsItem } from '#/api/mp/draft';
 import { Tinymce as RichTextarea } from '#/components/tinymce';

 import CoverSelect from './cover-select.vue';
-import { createEmptyNewsItem } from './types';

 defineOptions({ name: 'NewsForm' });

 const props = defineProps<{
  isCreating: boolean;
-  modelValue: NewsItem[] | null;
+  modelValue: MpDraftApi.NewsItem[] | null;
 }>();

 const emit = defineEmits<{
-  (e: 'update:modelValue', v: NewsItem[]): void;
+  (e: 'update:modelValue', v: MpDraftApi.NewsItem[]): void;
 }>();

-const newsList = computed<NewsItem[]>({
+const newsList = computed<MpDraftApi.NewsItem[]>({
  get() {
    return props.modelValue === null
      ? [createEmptyNewsItem()]
--- a/apps/web-antd/src/views/mp/draft/modules/types.ts
+++ b/apps/web-antd/src/views/mp/draft/modules/types.ts
@@ -1,42 +0,0 @@
-// TODO @hw：这个要融合到 draftApi 里么？类似其他模块的。
-interface NewsItem {
-  title: string;
-  thumbMediaId: string;
-  author: string;
-  digest: string;
-  showCoverPic: number;
-  content: string;
-  contentSourceUrl: string;
-  needOpenComment: number;
-  onlyFansCanComment: number;
-  thumbUrl: string;
-  picUrl?: string; // 用于预览封面
-}
-
-interface NewsItemList {
-  newsItem: NewsItem[];
-}
-
-interface Article {
-  mediaId: string;
-  content: NewsItemList;
-  updateTime: number;
-}
-
-function createEmptyNewsItem(): NewsItem {
-  return {
-    title: '',
-    thumbMediaId: '',
-    author: '',
-    digest: '',
-    showCoverPic: 0,
-    content: '',
-    contentSourceUrl: '',
-    needOpenComment: 0,
-    onlyFansCanComment: 0,
-    thumbUrl: '',
-  };
-}
-
-export type { Article, NewsItem, NewsItemList };
-export { createEmptyNewsItem };
--- a/apps/web-antd/src/views/mp/message/MessageTable.vue
+++ b/apps/web-antd/src/views/mp/message/MessageTable.vue
@@ -3,13 +3,13 @@ import type { VxeTableGridOptions } from '#/adapter/vxe-table';

 import { onMounted, watch } from 'vue';

+import { MpMsgType as MsgType } from '@vben/constants';
 import { formatDate2 } from '@vben/utils';

 import { Button, Image, Tag } from 'ant-design-vue';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
-  MsgType,
  WxLocation,
  WxMusic,
  WxNews,
--- a/apps/web-antd/src/views/mp/message/index.vue
+++ b/apps/web-antd/src/views/mp/message/index.vue
@@ -4,7 +4,7 @@ import type { Dayjs } from 'dayjs';
 import { reactive, ref } from 'vue';

 import { Page } from '@vben/common-ui';
-import { DICT_TYPE } from '@vben/constants';
+import { DICT_TYPE, MpMsgType as MsgType } from '@vben/constants';
 import { getDictOptions } from '@vben/hooks';
 import { IconifyIcon } from '@vben/icons';

@@ -20,7 +20,7 @@ import {
 } from 'ant-design-vue';

 import { getMessagePage } from '#/api/mp/message';
-import { MsgType, WxAccountSelect, WxMsg } from '#/views/mp/components';
+import { WxAccountSelect, WxMsg } from '#/views/mp/components';

 import MessageTable from './MessageTable.vue';

--- a/apps/web-ele/src/api/mp/draft/index.ts
+++ b/apps/web-ele/src/api/mp/draft/index.ts
@@ -50,13 +50,9 @@ export function updateDraft(
  mediaId: string,
  articles: MpDraftApi.Article[],
 ) {
-  return requestClient.put(
-    '/mp/draft/update',
-    { articles },
-    {
-      params: { accountId, mediaId },
-    },
-  );
+  return requestClient.put('/mp/draft/update', articles, {
+    params: { accountId, mediaId },
+  });
 }

 /** 删除草稿 */
--- a/apps/web-ele/src/views/mp/autoReply/data.ts
+++ b/apps/web-ele/src/views/mp/autoReply/data.ts
@@ -8,7 +8,7 @@ import { DICT_TYPE } from '@vben/constants';
 import { getDictObj, getDictOptions } from '@vben/hooks';

 import { getSimpleAccountList } from '#/api/mp/account';
-import { ReplySelect } from '#/views/mp/components';
+import { WxReplySelect } from '#/views/mp/components';

 import { MsgType } from './modules/types';

@@ -143,7 +143,7 @@ export function useFormSchema(msgType: MsgType): VbenFormSchema[] {
  schema.push({
    fieldName: 'reply',
    label: '回复消息',
-    component: markRaw(ReplySelect),
+    component: markRaw(WxReplySelect),
  });
  return schema;
 }
--- a/apps/web-ele/src/views/mp/autoReply/index.vue
+++ b/apps/web-ele/src/views/mp/autoReply/index.vue
@@ -18,6 +18,7 @@ import {
 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
 import * as MpAutoReplyApi from '#/api/mp/autoReply';
 import { $t } from '#/locales';
+import { WxAccountSelect } from '#/views/mp/components';

 import { useGridColumns, useGridFormSchema } from './data';
 import Content from './modules/content.vue';
@@ -27,6 +28,12 @@ import { MsgType } from './modules/types';
 defineOptions({ name: 'MpAutoReply' });

 const msgType = ref<string>(String(MsgType.Keyword)); // 消息类型
+
+/** 公众号变化时查询数据 */
+function handleAccountChange(accountId: number) {
+  gridApi.formApi.setValues({ accountId });
+  gridApi.formApi.submitForm();
+}
 /** 切换回复类型 */
 async function onTabChange(tabName: string) {
  msgType.value = tabName;
@@ -91,8 +98,6 @@ const [FormModal, formModalApi] = useVbenModal({
 const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useGridFormSchema(),
-    // 表单值变化时自动提交，这样 accountId 会被正确传递到查询函数
-    submitOnChange: true,
  },
  gridOptions: {
    columns: useGridColumns(Number(msgType.value) as MsgType),
@@ -109,6 +114,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
          });
        },
      },
+      autoLoad: false,
    },
    rowConfig: {
      keyField: 'id',
@@ -148,6 +154,9 @@ const showCreateButton = computed(() => {

    <FormModal @success="handleRefresh" />
    <Grid table-title="自动回复列表">
+      <template #form-accountId>
+        <WxAccountSelect @change="handleAccountChange" />
+      </template>
      <!-- 在工具栏上方放置 Tab 切换 -->
      <template #toolbar-actions>
        <ElTabs
--- a/apps/web-ele/src/views/mp/autoReply/modules/content.vue
+++ b/apps/web-ele/src/views/mp/autoReply/modules/content.vue
@@ -1,5 +1,10 @@
 <script lang="ts" setup>
-import { Music, News, VideoPlayer, VoicePlayer } from '#/views/mp/components';
+import {
+  WxMusic,
+  WxNews,
+  WxVideoPlayer,
+  WxVoicePlayer,
+} from '#/views/mp/components';

 defineOptions({ name: 'ReplyContentCell' });

@@ -14,7 +19,7 @@ const props = defineProps<{
      {{ props.row.responseContent }}
    </div>
    <div v-else-if="props.row.responseMessageType === 'voice'">
-      <VoicePlayer
+      <WxVoicePlayer
        v-if="props.row.responseMediaUrl"
        :url="props.row.responseMediaUrl"
      />
@@ -30,17 +35,17 @@ const props = defineProps<{
        props.row.responseMessageType === 'shortvideo'
      "
    >
-      <VideoPlayer
+      <WxVideoPlayer
        v-if="props.row.responseMediaUrl"
        :url="props.row.responseMediaUrl"
        class="mt-[10px]"
      />
    </div>
    <div v-else-if="props.row.responseMessageType === 'news'">
-      <News :articles="props.row.responseArticles" />
+      <WxNews :articles="props.row.responseArticles" />
    </div>
    <div v-else-if="props.row.responseMessageType === 'music'">
-      <Music
+      <WxMusic
        :title="props.row.responseTitle"
        :description="props.row.responseDescription"
        :thumb-media-url="props.row.responseThumbMediaUrl"
--- a/apps/web-ele/src/views/mp/autoReply/modules/form.vue
+++ b/apps/web-ele/src/views/mp/autoReply/modules/form.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { Reply } from '#/views/mp/components/reply/types';
+import type { Reply } from '#/views/mp/components/wx-reply/types';

 import { computed, nextTick, ref } from 'vue';

@@ -10,7 +10,7 @@ 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/reply/types';
+import { ReplyType } from '#/views/mp/components/wx-reply/types';

 import { useFormSchema } from '../data';
 import { MsgType } from './types';
--- a/apps/web-ele/src/views/mp/components/account-select/index.ts
+++ b/apps/web-ele/src/views/mp/components/account-select/index.ts
@@ -1 +0,0 @@
-export { default } from './account-select.vue';
--- a/apps/web-ele/src/views/mp/components/index.ts
+++ b/apps/web-ele/src/views/mp/components/index.ts
@@ -1,24 +1,22 @@
 // 统一导出所有模块组件

-export { default as AccountSelect } from './account-select/account-select.vue';
-export { default as WxAccountSelect } from './account-select/account-select.vue';
+export { default as WxAccountSelect } from './wx-account-select/wx-account-select.vue';

-// TODO @hw：还是带着 wx 前缀。。。貌似好点，我的锅！！！
-export { default as Location } from './location/location.vue';
-export { default as MaterialSelect } from './material-select/material-select.vue';
+export { default as WxLocation } from './wx-location/wx-location.vue';
+export * from './wx-material-select/types';

-export * from './material-select/types';
+export { default as WxMaterialSelect } from './wx-material-select/wx-material-select.vue';

-export * from './msg/types';
+export * from './wx-msg/types';

-export { default as Music } from './music/music.vue';
+export { default as WxMusic } from './wx-music/wx-music.vue';

-export { default as News } from './news/news.vue';
+export { default as WxNews } from './wx-news/wx-news.vue';

-export { default as ReplySelect } from './reply/reply.vue';
+export * from './wx-reply/types';

-export * from './reply/types';
+export { default as WxReplySelect } from './wx-reply/wx-reply.vue';

-export { default as VideoPlayer } from './video-play/video-play.vue';
+export { default as WxVideoPlayer } from './wx-video-play/wx-video-play.vue';

-export { default as VoicePlayer } from './voice-play/voice-play.vue';
+export { default as WxVoicePlayer } from './wx-voice-play/wx-voice-play.vue';
--- a/apps/web-ele/src/views/mp/components/location/index.ts
+++ b/apps/web-ele/src/views/mp/components/location/index.ts
@@ -1 +0,0 @@
-export { default } from './location.vue';
--- a/apps/web-ele/src/views/mp/components/material-select/index.ts
+++ b/apps/web-ele/src/views/mp/components/material-select/index.ts
@@ -1,3 +0,0 @@
-export { default } from './material-select.vue';
-
-export { MaterialType, NewsType } from './types';
--- a/apps/web-ele/src/views/mp/components/msg/index.ts
+++ b/apps/web-ele/src/views/mp/components/msg/index.ts
@@ -1,3 +0,0 @@
-export { default } from './msg.vue';
-
-export { MsgType } from './types';
--- a/apps/web-ele/src/views/mp/components/music/index.ts
+++ b/apps/web-ele/src/views/mp/components/music/index.ts
@@ -1 +0,0 @@
-export { default } from './music.vue';
--- a/apps/web-ele/src/views/mp/components/news/index.ts
+++ b/apps/web-ele/src/views/mp/components/news/index.ts
@@ -1 +0,0 @@
-export { default } from './news.vue';
--- a/apps/web-ele/src/views/mp/components/video-play/index.ts
+++ b/apps/web-ele/src/views/mp/components/video-play/index.ts
@@ -1 +0,0 @@
-export { default } from './video-play.vue';
--- a/apps/web-ele/src/views/mp/components/voice-play/index.ts
+++ b/apps/web-ele/src/views/mp/components/voice-play/index.ts
@@ -1 +0,0 @@
-export { default } from './voice-play.vue';
--- 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
@@ -0,0 +1 @@
+export { default } from './wx-account-select.vue';
--- 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
--- a/apps/web-ele/src/views/mp/components/wx-location/index.ts
+++ b/apps/web-ele/src/views/mp/components/wx-location/index.ts
@@ -0,0 +1 @@
+export { default } from './wx-location.vue';
--- 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
--- 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
@@ -0,0 +1,3 @@
+export { MaterialType, NewsType } from './types';
+
+export { default } from './wx-material-select.vue';
--- 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
--- 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
@@ -20,9 +20,9 @@ import {
 import * as MpDraftApi from '#/api/mp/draft';
 import * as MpFreePublishApi from '#/api/mp/freePublish';
 import * as MpMaterialApi from '#/api/mp/material';
-import News from '#/views/mp/components/news/news.vue';
-import VideoPlayer from '#/views/mp/components/video-play/video-play.vue';
-import VoicePlayer from '#/views/mp/components/voice-play/voice-play.vue';
+import 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';

--- a/apps/web-ele/src/views/mp/components/wx-msg/card.scss
+++ b/apps/web-ele/src/views/mp/components/wx-msg/card.scss
--- a/apps/web-ele/src/views/mp/components/wx-msg/comment.scss
+++ b/apps/web-ele/src/views/mp/components/wx-msg/comment.scss
--- a/apps/web-ele/src/views/mp/components/wx-msg/index.ts
+++ b/apps/web-ele/src/views/mp/components/wx-msg/index.ts
@@ -0,0 +1,3 @@
+export { MsgType } from './types';
+
+export { default } from './wx-msg.vue';
--- 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
--- 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
@@ -5,7 +5,7 @@ import { formatDateTime } from '@vben/utils';

 import avatarWechat from '#/assets/imgs/wechat.png';

-import Msg from './msg.vue';
+import Msg from './wx-msg.vue';

 // 确保 User 类型被识别为已使用
 type PropsUser = User;
--- a/apps/web-ele/src/views/mp/components/wx-msg/types.ts
+++ b/apps/web-ele/src/views/mp/components/wx-msg/types.ts
--- 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,11 +1,11 @@
 <script lang="ts" setup>
 import { ref } from 'vue';

-import Location from '#/views/mp/components/location/location.vue';
-import Music from '#/views/mp/components/music/music.vue';
-import News from '#/views/mp/components/news/news.vue';
-import VideoPlayer from '#/views/mp/components/video-play/video-play.vue';
-import VoicePlayer from '#/views/mp/components/voice-play/voice-play.vue';
+import 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 { MsgType } from '../types';
 import MsgEvent from './msg-event.vue';
--- a/apps/web-ele/src/views/mp/components/wx-music/index.ts
+++ b/apps/web-ele/src/views/mp/components/wx-music/index.ts
@@ -0,0 +1 @@
+export { default } from './wx-music.vue';
--- 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
@@ -63,5 +63,5 @@ defineExpose({

 <style lang="scss" scoped>
 /* 因为 joolun 实现依赖 avue 组件，该页面使用了 card.scss  */
-@import url('../msg/card.scss');
+@import url('../wx-msg/card.scss');
 </style>
--- a/apps/web-ele/src/views/mp/components/wx-news/index.ts
+++ b/apps/web-ele/src/views/mp/components/wx-news/index.ts
@@ -0,0 +1 @@
+export { default } from './wx-news.vue';
--- a/apps/web-ele/src/views/mp/components/wx-news/wx-news.vue
+++ b/apps/web-ele/src/views/mp/components/wx-news/wx-news.vue
@@ -6,6 +6,8 @@
  ① 代码优化，补充注释，提升阅读性
 -->
 <script lang="ts" setup>
+import { ElImage } from 'element-plus';
+
 defineOptions({ name: 'WxNews' });

 const props = withDefaults(
@@ -28,11 +30,10 @@ defineExpose({
      <!-- 头条 -->
      <a v-if="index === 0" :href="article.url" target="_blank">
        <div class="news-main">
-          <div class="news-content">
-            <el-image
+          <div class="news-content flex items-center justify-center">
+            <ElImage
              :src="article.picUrl || article.thumbUrl"
              class="material-img"
-              style="width: 100%; height: 120px"
            />
            <div class="news-content-title">
              <span>{{ article.title }}</span>
@@ -45,7 +46,7 @@ defineExpose({
        <div class="news-main-item">
          <div class="news-content-item">
            <div class="news-content-item-title">{{ article.title }}</div>
-            <div class="news-content-item-img">
+            <div class="news-content-item-img flex items-center justify-center">
              <img
                :src="article.picUrl || article.thumbUrl"
                class="material-img"
@@ -118,6 +119,9 @@ defineExpose({
 }

 .material-img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
  width: 100%;
 }
 </style>
--- a/apps/web-ele/src/views/mp/components/wx-reply/index.ts
+++ b/apps/web-ele/src/views/mp/components/wx-reply/index.ts
@@ -1,3 +1,3 @@
-export { default } from './reply.vue';
-
 export { createEmptyReply, type Reply, ReplyType } from './types';
+
+export { default } from './wx-reply.vue';
--- 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
@@ -18,7 +18,7 @@ import {
 } from 'element-plus';

 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
+import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';

 const props = defineProps<{
  modelValue: Reply;
--- 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
@@ -20,7 +20,7 @@ import {

 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
 // import { getAccessToken } from '@/utils/auth'
-import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
+import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';

 // 设置上传的请求头部

--- 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
@@ -7,10 +7,10 @@ import { IconifyIcon } from '@vben/icons';

 import { ElButton, ElCol, ElDialog, ElRow } from 'element-plus';

-import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
-import News from '#/views/mp/components/news/news.vue';
+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 '../material-select/types';
+import { NewsType } from '../wx-material-select/types';

 const props = defineProps<{
  modelValue: Reply;
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-text.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-text.vue
--- 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
@@ -19,8 +19,8 @@ import {
 } from 'element-plus';

 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
-import VideoPlayer from '#/views/mp/components/video-play/video-play.vue';
+import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
+import VideoPlayer from '#/views/mp/components/wx-video-play/wx-video-play.vue';

 const props = defineProps<{
  modelValue: Reply;
--- 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
@@ -18,8 +18,8 @@ import {
 } from 'element-plus';

 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
-import VoicePlayer from '#/views/mp/components/voice-play/voice-play.vue';
+import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
+import VoicePlayer from '#/views/mp/components/wx-voice-play/wx-voice-play.vue';

 // 设置上传的请求头部

--- a/apps/web-ele/src/views/mp/components/wx-reply/types.ts
+++ b/apps/web-ele/src/views/mp/components/wx-reply/types.ts
--- 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
@@ -16,7 +16,7 @@ import { IconifyIcon } from '@vben/icons';

 import { ElRow, ElTabPane, ElTabs } from 'element-plus';

-import { NewsType } from '../material-select/types';
+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';
--- 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
@@ -0,0 +1 @@
+export { default } from './wx-video-play.vue';
--- 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
--- 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
@@ -0,0 +1 @@
+export { default } from './wx-voice-play.vue';
--- a/apps/web-ele/src/views/mp/components/wx-voice-play/wx-voice-play.vue
+++ b/apps/web-ele/src/views/mp/components/wx-voice-play/wx-voice-play.vue
--- a/apps/web-ele/src/views/mp/draft/data.ts
+++ b/apps/web-ele/src/views/mp/draft/data.ts
@@ -1,10 +1,5 @@
 import type { VbenFormSchema } from '#/adapter/form';
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-
-import { markRaw } from 'vue';
-
-import AccountSelect from '#/views/mp/components/account-select/account-select.vue';
-
 /** 获取表格列配置 */
 export function useGridColumns(): VxeTableGridOptions['columns'] {
  return [
@@ -14,12 +9,6 @@ export function useGridColumns(): VxeTableGridOptions['columns'] {
      minWidth: 300,
      slots: { default: 'content' },
    },
-    {
-      field: 'updateTime',
-      title: '更新时间',
-      minWidth: 180,
-      formatter: 'formatDateTime',
-    },
    {
      title: '操作',
      width: 200,
@@ -35,7 +24,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
    {
      fieldName: 'accountId',
      label: '公众号',
-      component: markRaw(AccountSelect),
+      component: 'Input',
    },
  ];
 }
--- a/apps/web-ele/src/views/mp/draft/index.vue
+++ b/apps/web-ele/src/views/mp/draft/index.vue
@@ -3,15 +3,14 @@ import type { Article } from './modules/types';

 import type { VxeTableGridOptions } from '#/adapter/vxe-table';

-import { nextTick, onMounted, provide, ref, watch } from 'vue';
-
 import { DocAlert, Page, useVbenModal } from '@vben/common-ui';

 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';

 import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
-import * as MpDraftApi from '#/api/mp/draft';
+import { deleteDraft, getDraftPage } from '#/api/mp/draft';
 import * as MpFreePublishApi from '#/api/mp/freePublish';
+import { WxAccountSelect } from '#/views/mp/components';
 import { createEmptyNewsItem } from '#/views/mp/draft/modules/types';

 import { useGridColumns, useGridFormSchema } from './data';
@@ -25,10 +24,20 @@ const [FormModal, formModalApi] = useVbenModal({
  destroyOnClose: true,
 });

+/** 刷新表格 */
+function handleRefresh() {
+  gridApi.query();
+}
+
+/** 公众号变化时查询数据 */
+function handleAccountChange(accountId: number) {
+  gridApi.formApi.setValues({ accountId });
+  gridApi.formApi.submitForm();
+}
+
 const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
    schema: useGridFormSchema(),
-    submitOnChange: true,
  },
  gridOptions: {
    columns: useGridColumns(),
@@ -37,68 +46,23 @@ const [Grid, gridApi] = useVbenVxeGrid({
    proxyConfig: {
      ajax: {
        query: async ({ page }, formValues) => {
-          // 更新 accountId
-          if (formValues?.accountId) {
-            accountId.value = formValues.accountId;
-          }
-          const drafts = await MpDraftApi.getDraftPage({
+          const drafts = await getDraftPage({
            pageNo: page.currentPage,
            pageSize: page.pageSize,
            ...formValues,
          });
-          // 处理 API 返回的数据，兼容不同的数据结构
-          const formattedList: Article[] = drafts.list.map((draft: any) => {
-            // 如果已经是 content.newsItem 格式，直接使用
-            if (draft.content?.newsItem) {
-              const newsItem = draft.content.newsItem.map((item: any) => ({
-                ...item,
-                picUrl: item.thumbUrl || item.picUrl,
-              }));
-              return {
-                mediaId: draft.mediaId,
-                content: {
-                  newsItem,
-                },
-                updateTime:
-                  draft.updateTime ||
-                  (draft.createTime
-                    ? new Date(draft.createTime).getTime()
-                    : Date.now()),
-              };
+          // 将 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;
+              });
            }
-            // 如果是 articles 格式，转换为 content.newsItem 格式
-            if (draft.articles) {
-              const newsItem = draft.articles.map((article: any) => ({
-                ...article,
-                thumbUrl: article.thumbUrl || article.thumbMediaId,
-                picUrl: article.thumbUrl || article.thumbMediaId,
-              }));
-              return {
-                mediaId: draft.mediaId,
-                content: {
-                  newsItem,
-                },
-                updateTime:
-                  draft.updateTime ||
-                  (draft.createTime
-                    ? new Date(draft.createTime).getTime()
-                    : Date.now()),
-              };
-            }
-            // 默认返回空结构
-            return {
-              mediaId: draft.mediaId || '',
-              content: {
-                newsItem: [],
-              },
-              updateTime: draft.updateTime || Date.now(),
-            };
          });
          return {
-            page: {
-              total: drafts.total,
-            },
-            result: formattedList,
+            list: drafts.list as unknown as Article[],
+            total: drafts.total,
          };
        },
      },
@@ -115,21 +79,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
  } as VxeTableGridOptions<Article>,
 });

-// 提供 accountId 给子组件
-const accountId = ref<number>(-1);
-
-// 监听表单提交，更新 accountId
-watch(
-  () => gridApi.formApi?.getLatestSubmissionValues?.()?.accountId,
-  (newAccountId) => {
-    if (newAccountId !== undefined) {
-      accountId.value = newAccountId;
-    }
-  },
-);
-
-provide('accountId', accountId);
-
 /** 新增按钮操作 */
 async function handleCreate() {
  const formValues = await gridApi.formApi.getValues();
@@ -162,7 +111,7 @@ async function handleEdit(row: Article) {
      isCreating: false,
      accountId,
      mediaId: row.mediaId,
-      newsList: structuredClone(row.content.newsItem),
+      newsList: row.content.newsItem,
    })
    .open();
 }
@@ -201,7 +150,7 @@ async function handlePublish(row: Article) {
 async function handleDelete(row: Article) {
  const formValues = await gridApi.formApi.getValues();
  const accountId = formValues.accountId;
-  if (!accountId || accountId === -1) {
+  if (!accountId) {
    ElMessage.warning('请先选择公众号');
    return;
  }
@@ -212,9 +161,9 @@ async function handleDelete(row: Article) {
      text: '删除中...',
    });
    try {
-      await MpDraftApi.deleteDraft(accountId, row.mediaId);
+      await deleteDraft(accountId, row.mediaId);
      ElMessage.success('删除成功');
-      await gridApi.query();
+      handleRefresh();
    } finally {
      loadingInstance.close();
    }
@@ -222,19 +171,6 @@ async function handleDelete(row: Article) {
    //
  }
 }
-
-// 页面挂载后，等待表单初始化完成再加载数据
-onMounted(async () => {
-  await nextTick();
-  if (gridApi.formApi) {
-    const formValues = await gridApi.formApi.getValues();
-    if (formValues.accountId) {
-      accountId.value = formValues.accountId;
-      gridApi.formApi.setLatestSubmissionValues(formValues);
-      await gridApi.query();
-    }
-  }
-});
 </script>

 <template>
@@ -243,15 +179,12 @@ onMounted(async () => {
      <DocAlert title="公众号图文" url="https://doc.iocoder.cn/mp/article/" />
    </template>

-    <FormModal
-      @success="
-        () => {
-          gridApi.query();
-        }
-      "
-    />
+    <FormModal @success="handleRefresh" />

    <Grid table-title="草稿列表">
+      <template #form-accountId>
+        <WxAccountSelect @change="handleAccountChange" />
+      </template>
      <template #toolbar-tools>
        <TableAction
          :actions="[
@@ -310,7 +243,12 @@ onMounted(async () => {
  .vxe-table--body {
    .vxe-body--column {
      .vxe-cell {
+        height: auto !important;
        padding: 0;
+
+        img {
+          width: 300px !important;
+        }
      }
    }
  }
--- a/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
+++ b/apps/web-ele/src/views/mp/draft/modules/cover-select.vue
@@ -11,7 +11,7 @@ import { useAccessStore } from '@vben/stores';
 import { ElButton, ElDialog, ElImage, ElMessage, ElUpload } from 'element-plus';

 import { UploadType, useBeforeUpload } from '#/utils/useUpload';
-import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
+import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';

 // 设置上传的请求头部

@@ -80,20 +80,22 @@ function onUploadError(err: Error) {
 <template>
  <div>
    <p>封面:</p>
-    <div class="thumb-div">
+    <div
+      class="inline-flex w-full flex-col items-center justify-center text-center"
+    >
      <ElImage
        v-if="newsItem.thumbUrl"
-        style="width: 300px; max-height: 300px"
+        class="max-h-[300px] w-[300px]"
        :src="newsItem.thumbUrl"
        fit="contain"
      />
      <IconifyIcon
        v-else
        icon="ep:plus"
-        class="avatar-uploader-icon"
-        :class="isFirst ? 'avatar' : 'avatar1'"
+        class="border border-[#d9d9d9] text-center text-[28px] leading-[120px] text-[#8c939d]"
+        :class="isFirst ? 'h-[120px] w-[230px]' : 'h-[120px] w-[120px]'"
      />
-      <div class="thumb-but">
+      <div class="m-1.5">
        <ElUpload
          :action="UPLOAD_URL"
          :headers="HEADERS"
@@ -112,12 +114,12 @@ function onUploadError(err: Error) {
            size="small"
            type="primary"
            @click="showImageDialog = true"
-            style="margin-left: 5px"
+            class="ml-1.5"
          >
            素材库选择
          </ElButton>
          <template #tip>
-            <div class="el-upload__tip">
+            <div class="ml-1.5">
              支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
            </div>
          </template>
@@ -139,43 +141,3 @@ function onUploadError(err: Error) {
    </div>
  </div>
 </template>
-
-<style lang="scss" scoped>
-.el-upload__tip {
-  margin-left: 5px;
-}
-
-.thumb-div {
-  display: inline-block;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  text-align: center;
-
-  .avatar-uploader-icon {
-    width: 120px;
-    height: 120px;
-    font-size: 28px;
-    line-height: 120px;
-    color: #8c939d;
-    text-align: center;
-    border: 1px solid #d9d9d9;
-  }
-
-  .avatar {
-    width: 230px;
-    height: 120px;
-  }
-
-  .avatar1 {
-    width: 120px;
-    height: 120px;
-  }
-
-  .thumb-but {
-    margin: 5px;
-  }
-}
-</style>
--- a/apps/web-ele/src/views/mp/draft/modules/draft-table.vue
+++ b/apps/web-ele/src/views/mp/draft/modules/draft-table.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { Article } from './types';

-import News from '#/views/mp/components/news/news.vue';
+import News from '#/views/mp/components/wx-news/wx-news.vue';

 defineOptions({ name: 'DraftTableCell' });

@@ -11,15 +11,9 @@ const props = defineProps<{
 </script>

 <template>
-  <div class="draft-content">
+  <div class="p-2.5">
    <div v-if="props.row.content && props.row.content.newsItem">
      <News :articles="props.row.content.newsItem" />
    </div>
  </div>
 </template>
-
-<style lang="scss" scoped>
-.draft-content {
-  padding: 10px;
-}
-</style>
--- a/apps/web-ele/src/views/mp/draft/modules/form.vue
+++ b/apps/web-ele/src/views/mp/draft/modules/form.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { NewsItem } from './types';

-import { computed, ref } from 'vue';
+import { computed, provide, ref } from 'vue';

 import { useVbenModal } from '@vben/common-ui';

@@ -27,6 +27,11 @@ const getTitle = computed(() => {
  return formData.value?.isCreating ? '新建图文' : '修改图文';
 });

+// 提供 accountId 给子组件
+provide(
+  'accountId',
+  computed(() => formData.value?.accountId),
+);
 const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    if (!formData.value) {
--- a/apps/web-ele/src/views/mp/draft/modules/news-form.vue
+++ b/apps/web-ele/src/views/mp/draft/modules/news-form.vue
@@ -98,19 +98,28 @@ function plusNews() {
 <template>
  <ElContainer>
    <ElAside width="40%">
-      <div class="select-item">
+      <div class="mx-auto mb-2.5 w-3/5 border border-gray-200 p-2.5">
        <div v-for="(news, index) in newsList" :key="index">
          <div
-            class="news-main father"
+            class="group mx-auto h-[120px] w-full cursor-pointer bg-white"
            v-if="index === 0"
-            :class="{ activeAddNews: activeNewsIndex === index }"
+            :class="{
+              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
+            }"
            @click="activeNewsIndex = index"
          >
-            <div class="news-content">
-              <img class="material-img" :src="news.thumbUrl" />
-              <div class="news-content-title">{{ news.title }}</div>
+            <div class="relative h-[120px] w-full bg-[#acadae]">
+              <img class="h-full w-full" :src="news.thumbUrl" />
+              <div
+                class="absolute bottom-0 left-0 inline-block h-[25px] w-[98%] overflow-hidden text-ellipsis whitespace-nowrap bg-black p-[1%] text-[15px] text-white opacity-65"
+              >
+                {{ news.title }}
+              </div>
            </div>
-            <div class="child" v-if="newsList.length > 1">
+            <div
+              v-if="newsList.length > 1"
+              class="relative -bottom-6 hidden text-center group-hover:block"
+            >
              <ElButton
                type="info"
                circle
@@ -131,18 +140,22 @@ function plusNews() {
            </div>
          </div>
          <div
-            class="news-main-item father"
+            class="group mx-auto w-full cursor-pointer border-t border-gray-200 bg-white py-1.5"
            v-if="index > 0"
-            :class="{ activeAddNews: activeNewsIndex === index }"
+            :class="{
+              'border-[5px] border-[#2bb673]': activeNewsIndex === index,
+            }"
            @click="activeNewsIndex = index"
          >
-            <div class="news-content-item">
-              <div class="news-content-item-title">{{ news.title }}</div>
-              <div class="news-content-item-img">
-                <img class="material-img" :src="news.thumbUrl" width="100%" />
+            <div class="relative -ml-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>
            </div>
-            <div class="child">
+            <div
+              class="relative -bottom-6 hidden text-center group-hover:block"
+            >
              <ElButton
                v-if="newsList.length > index + 1"
                circle
@@ -173,7 +186,10 @@ function plusNews() {
            </div>
          </div>
        </div>
-        <ElRow justify="center" class="ope-row">
+        <ElRow
+          justify="center"
+          class="mt-1.5 border-t border-gray-200 pt-1.5 text-center"
+        >
          <ElButton
            type="primary"
            circle
@@ -188,7 +204,7 @@ function plusNews() {
    <ElMain>
      <div v-if="newsList.length > 0 && activeNewsItem">
        <!-- 标题、作者、原文地址 -->
-        <ElRow :gutter="20">
+        <ElRow :gutter="20" class="mb-5 last:mb-0">
          <ElInput
            v-model="activeNewsItem.title"
            placeholder="请输入标题（必填）"
@@ -196,16 +212,16 @@ function plusNews() {
          <ElInput
            v-model="activeNewsItem.author"
            placeholder="请输入作者"
-            style="margin-top: 5px"
+            class="mt-1.5"
          />
          <ElInput
            v-model="activeNewsItem.contentSourceUrl"
            placeholder="请输入原文地址"
-            style="margin-top: 5px"
+            class="mt-1.5"
          />
        </ElRow>
        <!-- 封面和摘要 -->
-        <ElRow :gutter="20">
+        <ElRow :gutter="20" class="mb-5 last:mb-0">
          <ElCol :span="12">
            <CoverSelect
              v-model="activeNewsItem"
@@ -219,123 +235,16 @@ function plusNews() {
              type="textarea"
              v-model="activeNewsItem.digest"
              placeholder="请输入摘要"
-              class="digest"
+              class="inline-block w-full align-top"
              maxlength="120"
            />
          </ElCol>
        </ElRow>
        <!--富文本编辑器组件-->
-        <ElRow>
+        <ElRow class="mb-5 last:mb-0">
          <RichTextarea v-model="activeNewsItem.content" />
        </ElRow>
      </div>
    </ElMain>
  </ElContainer>
 </template>
-
-<style lang="scss" scoped>
-.ope-row {
-  padding-top: 5px;
-  margin-top: 5px;
-  text-align: center;
-  border-top: 1px solid #eaeaea;
-}
-
-.el-row {
-  margin-bottom: 20px;
-}
-
-.el-row:last-child {
-  margin-bottom: 0;
-}
-
-.digest {
-  display: inline-block;
-  width: 100%;
-  vertical-align: top;
-}
-
-/* 新增图文 */
-.news-main {
-  width: 100%;
-  height: 120px;
-  margin: auto;
-  background-color: #fff;
-}
-
-.news-content {
-  position: relative;
-  width: 100%;
-  height: 120px;
-  background-color: #acadae;
-}
-
-.news-content-title {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  display: inline-block;
-  width: 98%;
-  height: 25px;
-  padding: 1%;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 15px;
-  color: #fff;
-  white-space: nowrap;
-  background-color: black;
-  opacity: 0.65;
-}
-
-.news-main-item {
-  width: 100%;
-  padding: 5px 0;
-  margin: auto;
-  background-color: #fff;
-  border-top: 1px solid #eaeaea;
-}
-
-.news-content-item {
-  position: relative;
-  margin-left: -3px;
-}
-
-.news-content-item-title {
-  display: inline-block;
-  width: 70%;
-  font-size: 12px;
-}
-
-.news-content-item-img {
-  display: inline-block;
-  width: 25%;
-  background-color: #acadae;
-}
-
-.select-item {
-  width: 60%;
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-
-  .activeAddNews {
-    border: 5px solid #2bb673;
-  }
-}
-
-.father .child {
-  position: relative;
-  bottom: 25px;
-  display: none;
-  text-align: center;
-}
-
-.father:hover .child {
-  display: block;
-}
-
-.material-img {
-  width: 100%;
-  height: 100%;
-}
-</style>
--- a/apps/web-ele/src/views/mp/menu/modules/menu-editor.vue
+++ b/apps/web-ele/src/views/mp/menu/modules/menu-editor.vue
@@ -14,9 +14,9 @@ import {
  ElSelect,
 } from 'element-plus';

-import MaterialSelect from '#/views/mp/components/material-select/material-select.vue';
-import News from '#/views/mp/components/news/news.vue';
-import ReplySelect from '#/views/mp/components/reply/reply.vue';
+import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
+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';
				`@@ -1 +0,0 @@`
				`export { default } from './account-select.vue';`
				`@@ -1 +0,0 @@`
				`export { default } from './video-play.vue';`
				`@@ -1 +0,0 @@`
				`export { default } from './voice-play.vue';`
				`@@ -0,0 +1 @@`
				`export { default } from './wx-account-select.vue';`
				`@@ -0,0 +1 @@`
				`export { default } from './wx-location.vue';`
				`@@ -0,0 +1 @@`
				`export { default } from './wx-video-play.vue';`
				`@@ -0,0 +1 @@`
				`export { default } from './wx-voice-play.vue';`