From 5374e64bcbc3250ee1401c9a5beee402dc03b1e0 Mon Sep 17 00:00:00 2001
From: dylanmay <670374839@qq.com>
Date: Thu, 27 Nov 2025 09:55:24 +0800
Subject: [PATCH] fix: resolve todo

---
 apps/web-antd/src/api/mp/account/index.ts     |   8 +-
 apps/web-antd/src/api/mp/message/index.ts     |  18 +-
 .../src/locales/langs/en-US/page.json         |   5 +-
 .../src/locales/langs/zh-CN/page.json         |   5 +-
 .../web-antd/src/views/mp/components/index.ts |   2 +-
 .../mp/components/wx-location/wx-location.vue |  36 +++-
 .../wx-material-select/wx-material-select.vue | 172 +++++++++---------
 .../views/mp/components/wx-msg/msg-list.vue   |   6 +-
 .../src/views/mp/components/wx-msg/wx-msg.vue |   2 +-
 .../views/mp/components/wx-news/wx-news.vue   |  85 ++-------
 .../mp/components/wx-reply/tab-image.vue      |  83 +++------
 .../mp/components/wx-reply/tab-music.vue      |  54 +-----
 .../views/mp/components/wx-reply/tab-news.vue |  19 +-
 .../mp/components/wx-reply/tab-video.vue      |  11 +-
 .../mp/components/wx-reply/tab-voice.vue      |  78 ++------
 .../views/mp/components/wx-reply/wx-reply.vue |  82 ---------
 .../wx-voice-play/wx-voice-play.vue           |  27 +--
 .../web-antd/src/views/mp/freePublish/data.ts |   2 +-
 apps/web-antd/src/views/mp/hooks/useUpload.ts |  15 +-
 .../mp/material/components/ImageTable.vue     |  90 ---------
 .../mp/material/components/VideoTable.vue     | 144 ---------------
 .../mp/material/components/VoiceTable.vue     | 133 --------------
 .../src/views/mp/material/components/data.ts  | 133 ++++++++++++++
 .../mp/material/components/image-table.vue    | 100 ++++++++++
 .../mp/material/components/video-table.vue    |  92 ++++++++++
 .../mp/material/components/voice-table.vue    |  93 ++++++++++
 apps/web-antd/src/views/mp/material/index.vue |  43 ++---
 apps/web-antd/src/views/mp/message/index.vue  |   4 +-
 .../{MessageTable.vue => message-table.vue}   |  54 ++++--
 apps/web-ele/src/api/mp/account/index.ts      |   8 +-
 .../views/mp/components/wx-news/wx-news.vue   |  85 ++-------
 .../wx-voice-play/wx-voice-play.vue           |  28 +--
 apps/web-ele/src/views/mp/freePublish/data.ts |   2 +-
 33 files changed, 718 insertions(+), 1001 deletions(-)
 delete mode 100644 apps/web-antd/src/views/mp/material/components/ImageTable.vue
 delete mode 100644 apps/web-antd/src/views/mp/material/components/VideoTable.vue
 delete mode 100644 apps/web-antd/src/views/mp/material/components/VoiceTable.vue
 create mode 100644 apps/web-antd/src/views/mp/material/components/data.ts
 create mode 100644 apps/web-antd/src/views/mp/material/components/image-table.vue
 create mode 100644 apps/web-antd/src/views/mp/material/components/video-table.vue
 create mode 100644 apps/web-antd/src/views/mp/material/components/voice-table.vue
 rename apps/web-antd/src/views/mp/message/{MessageTable.vue => message-table.vue} (79%)

diff --git a/apps/web-antd/src/api/mp/account/index.ts b/apps/web-antd/src/api/mp/account/index.ts
index 20c0ebad7..aa8557f15 100644
--- a/apps/web-antd/src/api/mp/account/index.ts
+++ b/apps/web-antd/src/api/mp/account/index.ts
@@ -16,12 +16,6 @@ export namespace MpAccountApi {
     remark?: string;
     createTime?: Date;
   }
-
-  // TODO @dylan：这个直接使用 Account，简化一点；
-  export interface AccountSimple {
-    id: number;
-    name: string;
-  }
 }
 
 /** 查询公众号账号列表 */
@@ -41,7 +35,7 @@ export function getAccount(id: number) {
 
 /** 查询公众号账号列表 */
 export function getSimpleAccountList() {
-  return requestClient.get<MpAccountApi.AccountSimple[]>(
+  return requestClient.get<MpAccountApi.Account[]>(
     '/mp/account/list-all-simple',
   );
 }
diff --git a/apps/web-antd/src/api/mp/message/index.ts b/apps/web-antd/src/api/mp/message/index.ts
index 5d0d17295..8395e2933 100644
--- a/apps/web-antd/src/api/mp/message/index.ts
+++ b/apps/web-antd/src/api/mp/message/index.ts
@@ -9,13 +9,29 @@ export namespace MpMessageApi {
   export interface Message {
     id?: number;
     accountId: number;
-    type: MessageType;
+    type: MessageType | string;
     openid: string;
     content: string;
     mediaId?: string;
     status: number;
     remark?: string;
     createTime?: Date;
+    sendFrom?: number;
+    userId?: number;
+    event?: string;
+    eventKey?: string;
+    mediaUrl?: string;
+    recognition?: string;
+    url?: string;
+    title?: string;
+    label?: string;
+    locationX?: number;
+    locationY?: number;
+    thumbMediaUrl?: string;
+    musicUrl?: string;
+    hqMusicUrl?: string;
+    description?: string;
+    articles?: any[];
   }
 
   /** 发送消息请求 */
diff --git a/apps/web-antd/src/locales/langs/en-US/page.json b/apps/web-antd/src/locales/langs/en-US/page.json
index 40a19ac6b..2d972fe0c 100644
--- a/apps/web-antd/src/locales/langs/en-US/page.json
+++ b/apps/web-antd/src/locales/langs/en-US/page.json
@@ -34,7 +34,10 @@
   "mp": {
     "upload": {
       "invalidFormat": "Invalid {0} format!",
-      "maxSize": "{0} size cannot exceed {1}M!"
+      "maxSize": "{0} size cannot exceed {1}M!",
+      "image": "Image",
+      "video": "Video",
+      "voice": "Voice"
     }
   }
 }
diff --git a/apps/web-antd/src/locales/langs/zh-CN/page.json b/apps/web-antd/src/locales/langs/zh-CN/page.json
index 5d1c246e1..d7ef79e6e 100644
--- a/apps/web-antd/src/locales/langs/zh-CN/page.json
+++ b/apps/web-antd/src/locales/langs/zh-CN/page.json
@@ -34,7 +34,10 @@
   "mp": {
     "upload": {
       "invalidFormat": "上传{0}格式不对!",
-      "maxSize": "上传{0}大小不能超过{1}M!"
+      "maxSize": "上传{0}大小不能超过{1}M!",
+      "image": "图片",
+      "video": "视频",
+      "voice": "语音"
     }
   }
 }
diff --git a/apps/web-antd/src/views/mp/components/index.ts b/apps/web-antd/src/views/mp/components/index.ts
index 6c4f246e9..abab7ffb5 100644
--- a/apps/web-antd/src/views/mp/components/index.ts
+++ b/apps/web-antd/src/views/mp/components/index.ts
@@ -1,7 +1,7 @@
 export { default as WxAccountSelect } from './wx-account-select/wx-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 WxMsg } from './wx-msg/wx-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';
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 cafda2e03..f675df680 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
@@ -1,33 +1,57 @@
 <script lang="ts" setup>
 import type { WxLocationProps } from './types';
 
-import { computed } from 'vue';
+import { computed, onMounted, ref } from 'vue';
 
 import { IconifyIcon } from '@vben/icons';
 
-import { Col, Row } from 'ant-design-vue';
+import { Col, message, Row } from 'ant-design-vue';
+
+import { getTradeConfig } from '#/api/mall/trade/config';
 
 /** 微信消息 - 定位 */
 defineOptions({ name: 'WxLocation' });
 
-// TODO @dylan：apps/web-antd/src/views/mall/trade/delivery/pickUpStore/modules/form.vue 参考这个，从后端拿 key 哈；参考 apps/web-ele/src/views/mp/components/wx-location/wx-location.vue
 const props = withDefaults(defineProps<WxLocationProps>(), {
-  qqMapKey: 'TVDBZ-TDILD-4ON4B-PFDZA-RNLKH-VVF6E', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
+  qqMapKey: '', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
 });
 
+const fetchedQqMapKey = ref('');
+const resolvedQqMapKey = computed(
+  () => props.qqMapKey || fetchedQqMapKey.value || '',
+);
+
 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`;
+  return `https://apis.map.qq.com/ws/staticmap/v2/?zoom=10&markers=color:blue|label:A|${props.locationX},${props.locationY}&key=${resolvedQqMapKey.value}&size=250*180`;
+});
+
+async function fetchQqMapKey() {
+  try {
+    const data = await getTradeConfig();
+    fetchedQqMapKey.value = data.tencentLbsKey ?? '';
+    if (!fetchedQqMapKey.value) {
+      message.warning('请先配置腾讯位置服务密钥');
+    }
+  } catch {
+    message.error('获取腾讯位置服务密钥失败');
+  }
+}
+
+onMounted(async () => {
+  if (!props.qqMapKey) {
+    await fetchQqMapKey();
+  }
 });
 
 defineExpose({
   locationX: props.locationX,
   locationY: props.locationY,
   label: props.label,
-  qqMapKey: props.qqMapKey,
+  qqMapKey: resolvedQqMapKey,
 });
 </script>
 
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 1026b7e78..ea767382b 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
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMaterialApi } from '#/api/mp/material';
 
 import { reactive, ref, watch } from 'vue';
 
@@ -42,84 +43,84 @@ const queryParams = reactive({
   pageSize: 10,
 }); // 查询参数
 
-const voiceGridColumns: VxeTableGridOptions<any>['columns'] = [
-  // TODO @dylan：any 有 linter 告警；看看别的模块哈
-  {
-    field: 'mediaId',
-    title: '编号',
-    align: 'center',
-    minWidth: 160,
-  },
-  {
-    field: 'name',
-    title: '文件名',
-    minWidth: 200,
-  },
-  {
-    field: 'voice',
-    title: '语音',
-    minWidth: 200,
-    align: 'center',
-    slots: { default: 'voice' },
-  },
-  {
-    field: 'createTime',
-    title: '上传时间',
-    width: 180,
-    formatter: 'formatDateTime',
-  },
-  {
-    title: '操作',
-    width: 140,
-    fixed: 'right',
-    align: 'center',
-    slots: { default: 'actions' },
-  },
-];
+const voiceGridColumns: VxeTableGridOptions<MpMaterialApi.Material>['columns'] =
+  [
+    {
+      field: 'mediaId',
+      title: '编号',
+      align: 'center',
+      minWidth: 160,
+    },
+    {
+      field: 'name',
+      title: '文件名',
+      minWidth: 200,
+    },
+    {
+      field: 'voice',
+      title: '语音',
+      minWidth: 200,
+      align: 'center',
+      slots: { default: 'voice' },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      align: 'center',
+      slots: { default: 'actions' },
+    },
+  ];
 
-const videoGridColumns: VxeTableGridOptions<any>['columns'] = [
-  // TODO @dylan：any 有 linter 告警；看看别的模块哈
-  {
-    field: 'mediaId',
-    title: '编号',
-    minWidth: 160,
-  },
-  {
-    field: 'name',
-    title: '文件名',
-    minWidth: 200,
-  },
-  {
-    field: 'title',
-    title: '标题',
-    minWidth: 200,
-  },
-  {
-    field: 'introduction',
-    title: '介绍',
-    minWidth: 220,
-  },
-  {
-    field: 'video',
-    title: '视频',
-    minWidth: 220,
-    align: 'center',
-    slots: { default: 'video' },
-  },
-  {
-    field: 'createTime',
-    title: '上传时间',
-    width: 180,
-    formatter: 'formatDateTime',
-  },
-  {
-    title: '操作',
-    width: 140,
-    fixed: 'right',
-    align: 'center',
-    slots: { default: 'actions' },
-  },
-];
+const videoGridColumns: VxeTableGridOptions<MpMaterialApi.Material>['columns'] =
+  [
+    {
+      field: 'mediaId',
+      title: '编号',
+      minWidth: 160,
+    },
+    {
+      field: 'name',
+      title: '文件名',
+      minWidth: 200,
+    },
+    {
+      field: 'title',
+      title: '标题',
+      minWidth: 200,
+    },
+    {
+      field: 'introduction',
+      title: '介绍',
+      minWidth: 220,
+    },
+    {
+      field: 'video',
+      title: '视频',
+      minWidth: 220,
+      align: 'center',
+      slots: { default: 'video' },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      title: '操作',
+      width: 140,
+      fixed: 'right',
+      align: 'center',
+      slots: { default: 'actions' },
+    },
+  ];
 
 const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
   gridOptions: {
@@ -135,11 +136,9 @@ const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
       ajax: {
         query: async ({ page }, { accountId }) => {
           const finalAccountId = accountId ?? queryParams.accountId;
-          // TODO @dylan 这里简化成 !finalAccountId 是不是可以哈。
-          if (finalAccountId === undefined || finalAccountId === null) {
+          if (!finalAccountId) {
             return { list: [], total: 0 };
           }
-          // TODO @dylan：不要带 MpMaterialApi；
           return await getMaterialPage({
             pageNo: page.currentPage,
             pageSize: page.pageSize,
@@ -156,7 +155,7 @@ const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
     toolbarConfig: {
       refresh: true,
     },
-  } as VxeTableGridOptions<any>, // TODO @dylan：这里有 linter 告警；看看别的模块哈
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
 });
 
 const [VideoGrid, videoGridApi] = useVbenVxeGrid({
@@ -192,7 +191,7 @@ const [VideoGrid, videoGridApi] = useVbenVxeGrid({
     toolbarConfig: {
       refresh: true,
     },
-  } as VxeTableGridOptions<any>,
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
 });
 
 function selectMaterialFun(item: any) {
@@ -288,7 +287,6 @@ watch(
 <template>
   <Page :bordered="false" class="pb-8">
     <!-- 类型：image -->
-    <!-- TODO @dylan：看看图片的小卡片，是不是可以整齐点，类似微信公众号，图片的高度是一致的哈；https://mp.weixin.qq.com/cgi-bin/filepage?type=2&begin=0&count=12&token=1646383362&lang=zh_CN -->
     <template v-if="props.type === 'image'">
       <Spin :spinning="loading">
         <div
@@ -297,9 +295,13 @@ watch(
           <div
             v-for="item in list"
             :key="item.mediaId"
-            class="mb-2.5 break-inside-avoid border border-[#eaeaea] p-2.5"
+            class="mb-2.5 h-72 break-inside-avoid border border-[#eaeaea] p-2.5"
           >
-            <img class="w-full" :src="item.url" alt="素材图片" />
+            <img
+              class="h-48 w-full object-contain"
+              :src="item.url"
+              alt="素材图片"
+            />
             <p class="truncate text-center text-xs leading-[30px]">
               {{ item.name }}
             </p>
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 00a9cd795..1b96d954a 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
@@ -46,13 +46,15 @@ function getNickname(sendFrom: number) {
       </div>
       <div class="relative mx-2 flex-1 rounded-[5px] border border-[#dedede]">
         <span
-          class="pointer-events-none absolute -left-2 top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#dedede]"
+          v-if="item.sendFrom === SendFrom.MpBot"
+          class="pointer-events-none absolute -left-2 top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[transparent]"
           :class="{
-            '-right-2 left-auto border-l-[8px] border-r-0 border-l-[#dedede]':
+            '-right-4 left-auto border-l-[8px] border-r-0 border-l-[#f8f8f8]':
               item.sendFrom === SendFrom.MpBot,
           }"
         ></span>
         <span
+          v-if="item.sendFrom === SendFrom.User"
           class="pointer-events-none absolute -left-[7px] top-[10px] h-0 w-0 border-y-[8px] border-r-[8px] border-y-transparent border-r-[#f8f8f8]"
           :class="{
             '-right-[7px] left-auto border-l-[8px] border-r-0 border-l-[#f8f8f8]':
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 981839e03..b87140582 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
@@ -168,7 +168,7 @@ async function scrollToBottom() {
 
     <div class="p-2.5">
       <Spin :spinning="sendLoading">
-        <WxReplySelect ref="replySelectRef" v-model="reply" />
+        <WxReply ref="replySelectRef" v-model="reply" />
         <Button type="primary" class="float-right mb-2 mt-2" @click="sendMsg">
           发送(S)
         </Button>
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 f03ee5d2f..6e52761c1 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
@@ -17,18 +17,20 @@ defineExpose({
 </script>
 
 <template>
-  <div class="news-home">
-    <div v-for="(article, index) in articles" :key="index" class="news-div">
+  <div class="mx-auto flex w-full flex-col gap-[10px] bg-white">
+    <div v-for="(article, index) in articles" :key="index">
       <!-- 头条 -->
       <a v-if="index === 0" :href="article.url" target="_blank">
-        <div class="news-main">
-          <div class="news-content">
+        <div class="mx-auto w-full">
+          <div class="relative w-full bg-[#acadae]">
             <img
               :src="article.picUrl"
               :preview="false"
-              class="material-img flex w-[100px] items-center justify-center"
+              class="w-[100px] object-cover"
             />
-            <div class="news-content-title">
+            <div
+              class="absolute bottom-0 left-0 ml-[10px] inline-block w-[98%] whitespace-normal p-[1%] text-base text-white"
+            >
               <span>{{ article.title }}</span>
             </div>
           </div>
@@ -36,10 +38,10 @@ defineExpose({
       </a>
       <!-- 二条/三条等等 -->
       <a v-else :href="article.url" target="_blank">
-        <div class="news-main-item">
-          <div class="news-content-item">
-            <div class="news-content-item-img">
-              <div class="news-content-item-title">{{ article.title }}</div>
+        <div class="bg-white">
+          <div class="relative box-border p-[10px]">
+            <div class="flex items-center">
+              <div class="flex-1 text-sm">{{ article.title }}</div>
 
               <img
                 :src="article.picUrl"
@@ -53,66 +55,3 @@ defineExpose({
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-
-.news-home {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  width: 100%;
-  margin: auto;
-  background-color: #fff;
-}
-
-.news-main {
-  width: 100%;
-  margin: auto;
-}
-
-.news-content {
-  position: relative;
-  width: 100%;
-  background-color: #acadae;
-}
-
-.news-content-title {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  box-sizing: unset !important;
-  display: inline-block;
-  width: 98%;
-  padding: 1%;
-  margin-left: 10px;
-  font-size: 16px;
-  color: #fff;
-  white-space: normal;
-}
-
-.news-main-item {
-  background-color: #fff;
-}
-
-.news-content-item {
-  position: relative;
-  box-sizing: border-box;
-  padding: 10px;
-}
-
-.news-content-item-title {
-  flex: 1;
-  font-size: 14px;
-}
-
-.news-content-item-img {
-  display: flex;
-  align-items: center;
-}
-
-.material-img {
-  width: auto;
-  object-fit: cover;
-}
-</style>
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 a7e26d069..9754b1fd3 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
@@ -104,10 +104,18 @@ function selectMaterial(item: any) {
 <template>
   <div>
     <!-- 情况一：已经选择好素材、或者上传好图片 -->
-    <div v-if="reply.url" class="select-item">
-      <img class="material-img" :src="reply.url" alt="图片素材" />
-      <p v-if="reply.name" class="item-name">{{ reply.name }}</p>
-      <Row class="ope-row" justify="center">
+    <div
+      v-if="reply.url"
+      class="mx-auto mb-[10px] border border-[#eaeaea] p-[10px]"
+    >
+      <img class="w-full" :src="reply.url" alt="图片素材" />
+      <p
+        v-if="reply.name"
+        class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs"
+      >
+        {{ reply.name }}
+      </p>
+      <Row class="pt-[10px] text-center" justify="center">
         <Button danger shape="circle" @click="onDelete">
           <template #icon>
             <IconifyIcon icon="lucide:trash-2" />
@@ -119,7 +127,10 @@ function selectMaterial(item: any) {
     <!-- 情况二：未做完上述操作 -->
     <Row v-else class="text-center" align="middle">
       <!-- 选择素材 -->
-      <Col :span="12" class="col-select">
+      <Col
+        :span="12"
+        class="flex h-[160px] w-[49.5%] flex-col items-center justify-center border border-[#eaeaea] py-[50px]"
+      >
         <Button type="primary" @click="showDialog = true">
           素材库选择
           <template #icon>
@@ -142,7 +153,10 @@ function selectMaterial(item: any) {
       </Col>
 
       <!-- 文件上传 -->
-      <Col :span="12" class="col-add">
+      <Col
+        :span="12"
+        class="float-right flex h-[160px] w-[49.5%] flex-col items-center justify-center border border-[#eaeaea] py-[50px]"
+      >
         <Upload
           :custom-request="customRequest"
           :multiple="true"
@@ -158,65 +172,10 @@ function selectMaterial(item: any) {
             </template>
           </Button>
         </Upload>
-        <div class="upload-tip">
+        <div class="mt-2 text-center text-xs leading-[18px] text-[#666]">
           支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
         </div>
       </Col>
     </Row>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.select-item {
-  // width: 280px;
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-}
-
-.material-img {
-  width: 100%;
-}
-
-.item-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  text-align: center;
-  white-space: nowrap;
-}
-
-.ope-row {
-  padding-top: 10px;
-  text-align: center;
-}
-
-.col-select,
-.col-add {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 160px;
-  padding: 50px 0;
-  border: 1px solid rgb(234 234 234);
-}
-
-.col-select {
-  width: 49.5%;
-}
-
-.col-add {
-  float: right;
-  width: 49.5%;
-}
-
-.upload-tip {
-  margin-top: 8px;
-  font-size: 12px;
-  line-height: 18px;
-  color: #666;
-  text-align: center;
-}
-</style>
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 9dfc0dbcc..1941478d5 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
@@ -105,13 +105,15 @@ function selectMaterial(item: any) {
   <div>
     <Row align="middle" justify="center">
       <Col :span="6">
-        <div class="thumb-container">
-          <div class="thumb-preview">
+        <div class="flex flex-col items-center gap-2">
+          <div
+            class="flex h-[100px] w-[100px] items-center justify-center rounded border border-[#d9d9d9]"
+          >
             <img
               v-if="reply.thumbMediaUrl"
               :src="reply.thumbMediaUrl"
               alt="音乐封面"
-              class="thumb-img"
+              class="h-full w-full object-cover"
             />
             <IconifyIcon
               v-else
@@ -120,7 +122,7 @@ function selectMaterial(item: any) {
               class="text-gray-400"
             />
           </div>
-          <div class="thumb-actions">
+          <div class="flex items-center justify-center">
             <Upload
               :custom-request="customRequest"
               :multiple="true"
@@ -136,10 +138,9 @@ function selectMaterial(item: any) {
             </Button>
           </div>
         </div>
-        <!-- TODO @dylan：这里应该不是图片哇？ -->
         <Modal
           v-model:open="showDialog"
-          title="选择图片"
+          title="选择封面图"
           :width="1200"
           :footer="null"
           destroy-on-close
@@ -152,8 +153,7 @@ function selectMaterial(item: any) {
         </Modal>
       </Col>
       <Col :span="18">
-        <!-- TODO @dylan：input 两个之间的间距可以调整下。现在和左侧的图片，距离有点远了。 -->
-        <div class="input-group">
+        <div class="flex flex-col gap-4">
           <Input
             :value="reply.title || undefined"
             placeholder="请输入标题"
@@ -183,41 +183,3 @@ function selectMaterial(item: any) {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.thumb-container {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  align-items: center;
-}
-
-.thumb-preview {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100px;
-  height: 100px;
-  border: 1px solid #d9d9d9;
-  border-radius: 4px;
-}
-
-.thumb-img {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.thumb-actions {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.input-group {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-</style>
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 ffe4a183f..6f3d91e64 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
@@ -45,10 +45,10 @@ function onDelete() {
     <Row>
       <div
         v-if="reply.articles && reply.articles.length > 0"
-        class="select-item"
+        class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
       >
         <WxNews :articles="reply.articles" />
-        <Col class="ope-row">
+        <Col class="pt-[10px] text-center">
           <Button danger shape="circle" @click="onDelete">
             <template #icon>
               <IconifyIcon icon="lucide:trash-2" />
@@ -91,18 +91,3 @@ function onDelete() {
     </Row>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.select-item {
-  width: 280px;
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-}
-
-.ope-row {
-  padding-top: 10px;
-  text-align: center;
-}
-</style>
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 4da95edad..0aef852c3 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
@@ -130,7 +130,7 @@ function selectMaterial(item: any) {
         />
       </Col>
       <Col :span="24">
-        <Row class="ope-row" justify="center">
+        <Row class="w-full pt-[10px] text-center" justify="center">
           <WxVideoPlayer v-if="reply.url" :url="reply.url" />
         </Row>
       </Col>
@@ -182,12 +182,3 @@ function selectMaterial(item: any) {
     </Row>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.ope-row {
-  width: 100%;
-  padding-top: 10px;
-  text-align: center;
-}
-</style>
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 a09fb9e62..94db76d3d 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
@@ -105,12 +105,19 @@ function selectMaterial(item: Reply) {
 
 <template>
   <div>
-    <div v-if="reply.url" class="select-item">
-      <p class="item-name">{{ reply.name }}</p>
-      <Row class="ope-row" justify="center">
+    <div
+      v-if="reply.url"
+      class="mx-auto mb-[10px] border border-[#eaeaea] p-[10px]"
+    >
+      <p
+        class="overflow-hidden text-ellipsis whitespace-nowrap text-center text-xs"
+      >
+        {{ reply.name }}
+      </p>
+      <Row class="w-full pt-[10px] text-center" justify="center">
         <WxVoicePlayer :url="reply.url" />
       </Row>
-      <Row class="ope-row" justify="center">
+      <Row class="w-full pt-[10px] text-center" justify="center">
         <Button danger shape="circle" @click="onDelete">
           <template #icon>
             <IconifyIcon icon="lucide:trash-2" />
@@ -121,7 +128,10 @@ function selectMaterial(item: Reply) {
 
     <Row v-else class="text-center">
       <!-- 选择素材 -->
-      <Col :span="12" class="col-select">
+      <Col
+        :span="12"
+        class="flex h-[160px] w-[49.5%] flex-col items-center justify-center border border-[#eaeaea] py-[50px]"
+      >
         <Button type="primary" @click="showDialog = true">
           素材库选择
           <template #icon>
@@ -144,7 +154,10 @@ function selectMaterial(item: Reply) {
       </Col>
 
       <!-- 文件上传 -->
-      <Col :span="12" class="col-add">
+      <Col
+        :span="12"
+        class="float-right flex h-[160px] w-[49.5%] flex-col items-center justify-center border border-[#eaeaea] py-[50px]"
+      >
         <Upload
           :custom-request="customRequest"
           :multiple="true"
@@ -160,61 +173,10 @@ function selectMaterial(item: Reply) {
             </template>
           </Button>
         </Upload>
-        <div class="upload-tip">
+        <div class="mt-2 text-center text-xs leading-[18px] text-[#666]">
           格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
         </div>
       </Col>
     </Row>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.select-item {
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-}
-
-.item-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  text-align: center;
-  white-space: nowrap;
-}
-
-.ope-row {
-  width: 100%;
-  padding-top: 10px;
-  text-align: center;
-}
-
-.col-select,
-.col-add {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 160px;
-  padding: 50px 0;
-  border: 1px solid rgb(234 234 234);
-}
-
-.col-select {
-  width: 49.5%;
-}
-
-.col-add {
-  float: right;
-  width: 49.5%;
-}
-
-.upload-tip {
-  margin-top: 8px;
-  font-size: 12px;
-  line-height: 18px;
-  color: #666;
-  text-align: center;
-}
-</style>
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 c9b5277f2..f801f7649 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
@@ -181,85 +181,3 @@ defineExpose({
     </Tabs.TabPane>
   </Tabs>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.select-item {
-  width: 280px;
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-}
-
-.select-item2 {
-  padding: 10px;
-  margin: 0 auto 10px;
-  border: 1px solid #eaeaea;
-}
-
-.ope-row {
-  padding-top: 10px;
-  text-align: center;
-}
-
-.input-margin-bottom {
-  margin-bottom: 2%;
-}
-
-.item-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 12px;
-  text-align: center;
-  white-space: nowrap;
-}
-
-.el-form-item__content {
-  line-height: unset !important;
-}
-
-.col-select {
-  width: 49.5%;
-  height: 160px;
-  padding: 50px 0;
-  border: 1px solid rgb(234 234 234);
-}
-
-.col-select2 {
-  height: 160px;
-  padding: 50px 0;
-  border: 1px solid rgb(234 234 234);
-}
-
-.col-add {
-  float: right;
-  width: 49.5%;
-  height: 160px;
-  padding: 50px 0;
-  border: 1px solid rgb(234 234 234);
-}
-
-.avatar-uploader-icon {
-  width: 100px !important;
-  height: 100px !important;
-  font-size: 28px;
-  line-height: 100px !important;
-  color: #8c939d;
-  text-align: center;
-  border: 1px solid #d9d9d9;
-}
-
-.material-img {
-  width: 100%;
-}
-
-.thumb-div {
-  display: inline-block;
-  text-align: center;
-}
-
-.item-infos {
-  width: 30%;
-  margin: auto;
-}
-</style>
diff --git a/apps/web-antd/src/views/mp/components/wx-voice-play/wx-voice-play.vue b/apps/web-antd/src/views/mp/components/wx-voice-play/wx-voice-play.vue
index 13c1fed98..5beb07ae9 100644
--- a/apps/web-antd/src/views/mp/components/wx-voice-play/wx-voice-play.vue
+++ b/apps/web-antd/src/views/mp/components/wx-voice-play/wx-voice-play.vue
@@ -67,7 +67,10 @@ function amrStop() {
 </script>
 
 <template>
-  <div class="wx-voice-div cursor-pointer" @click="playVoice">
+  <div
+    class="flex min-h-[50px] min-w-[120px] cursor-pointer flex-col items-center justify-center rounded-[10px] bg-[#eaeaea] p-[8px_12px]"
+    @click="playVoice"
+  >
     <div class="flex items-center">
       <IconifyIcon
         v-if="playing !== true"
@@ -75,7 +78,7 @@ function amrStop() {
         :size="32"
       />
       <IconifyIcon v-else icon="lucide:circle-pause" :size="32" />
-      <span v-if="duration" class="amr-duration">{{ duration }} 秒</span>
+      <span v-if="duration" class="ml-2 text-xs">{{ duration }} 秒</span>
     </div>
     <div v-if="content" class="mt-2">
       <Tag color="success">语音识别</Tag>
@@ -83,23 +86,3 @@ function amrStop() {
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.wx-voice-div {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  min-width: 120px;
-  min-height: 50px;
-  padding: 8px 12px;
-  background-color: #eaeaea;
-  border-radius: 10px;
-}
-
-.amr-duration {
-  margin-left: 8px;
-  font-size: 12px;
-}
-</style>
diff --git a/apps/web-antd/src/views/mp/freePublish/data.ts b/apps/web-antd/src/views/mp/freePublish/data.ts
index cfcac30be..82cfb5f16 100644
--- a/apps/web-antd/src/views/mp/freePublish/data.ts
+++ b/apps/web-antd/src/views/mp/freePublish/data.ts
@@ -6,7 +6,7 @@ import { formatDateTime } from '@vben/utils';
 
 import { getSimpleAccountList } from '#/api/mp/account';
 
-let accountList: MpAccountApi.AccountSimple[] = [];
+let accountList: MpAccountApi.Account[] = [];
 getSimpleAccountList().then((data) => (accountList = data));
 
 /** 搜索表单配置 */
diff --git a/apps/web-antd/src/views/mp/hooks/useUpload.ts b/apps/web-antd/src/views/mp/hooks/useUpload.ts
index 7eaf06e91..14e2a4fa5 100644
--- a/apps/web-antd/src/views/mp/hooks/useUpload.ts
+++ b/apps/web-antd/src/views/mp/hooks/useUpload.ts
@@ -12,7 +12,7 @@ export enum UploadType {
 interface UploadTypeConfig {
   allowTypes: string[];
   maxSizeMB: number;
-  name: string;
+  i18nKey: string;
 }
 
 export interface UploadRawFile {
@@ -31,12 +31,12 @@ const UPLOAD_CONFIGS: Record<UploadType, UploadTypeConfig> = {
       'image/jpg',
     ],
     maxSizeMB: 2,
-    name: '图片',
+    i18nKey: 'mp.upload.image',
   },
   [UploadType.Video]: {
     allowTypes: ['video/mp4'],
     maxSizeMB: 10,
-    name: '视频',
+    i18nKey: 'mp.upload.video',
   },
   [UploadType.Voice]: {
     allowTypes: [
@@ -47,7 +47,7 @@ const UPLOAD_CONFIGS: Record<UploadType, UploadTypeConfig> = {
       'audio/amr',
     ],
     maxSizeMB: 2,
-    name: '语音',
+    i18nKey: 'mp.upload.voice',
   },
 };
 
@@ -57,15 +57,16 @@ export const useBeforeUpload = (type: UploadType, maxSizeMB?: number) => {
     const finalMaxSize = maxSizeMB ?? config.maxSizeMB;
 
     // 格式不正确
-    // TODO @dylan：貌似没国际化；
     if (!config.allowTypes.includes(rawFile.type)) {
-      message.error($t('mp.upload.invalidFormat', [config.name]));
+      const typeName = $t(config.i18nKey);
+      message.error($t('mp.upload.invalidFormat', [typeName]));
       return false;
     }
 
     // 大小不正确
     if (rawFile.size / 1024 / 1024 > finalMaxSize) {
-      message.error($t('mp.upload.maxSize', [config.name, finalMaxSize]));
+      const typeName = $t(config.i18nKey);
+      message.error($t('mp.upload.maxSize', [typeName, finalMaxSize]));
       return false;
     }
 
diff --git a/apps/web-antd/src/views/mp/material/components/ImageTable.vue b/apps/web-antd/src/views/mp/material/components/ImageTable.vue
deleted file mode 100644
index 1e3a761f9..000000000
--- a/apps/web-antd/src/views/mp/material/components/ImageTable.vue
+++ /dev/null
@@ -1,90 +0,0 @@
-<script lang="ts" setup>
-import { useAccess } from '@vben/access';
-import { IconifyIcon } from '@vben/icons';
-
-import { Button, Spin } from 'ant-design-vue';
-
-// TODO @dylan：vue 组件名小写 + 中划线
-
-const props = defineProps<{
-  list: any[];
-  loading: boolean;
-}>();
-
-const emit = defineEmits<{
-  delete: [v: number];
-}>();
-
-const { hasAccessByCodes } = useAccess();
-</script>
-
-<template>
-  <Spin :spinning="props.loading">
-    <div class="waterfall">
-      <div v-for="item in props.list" :key="item.id" class="waterfall-item">
-        <a :href="item.url" target="_blank">
-          <!-- TODO @dylan：要不用 Image 组件？ -->
-          <img :src="item.url" class="material-img" />
-          <div class="item-name">{{ item.name }}</div>
-        </a>
-        <div class="flex justify-center">
-          <Button
-            v-if="hasAccessByCodes(['mp:material:delete'])"
-            danger
-            shape="circle"
-            type="primary"
-            @click="emit('delete', item.id)"
-          >
-            <template #icon>
-              <IconifyIcon icon="lucide:trash-2" />
-            </template>
-          </Button>
-        </div>
-      </div>
-    </div>
-  </Spin>
-</template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-
-@media (width >= 992px) and (width <= 1300px) {
-  .waterfall {
-    column-count: 3;
-  }
-}
-
-@media (width >= 768px) and (width <= 991px) {
-  .waterfall {
-    column-count: 2;
-  }
-}
-
-@media (width <= 767px) {
-  .waterfall {
-    column-count: 1;
-  }
-}
-
-.waterfall {
-  column-gap: 10px;
-  width: 100%;
-  margin-top: 10px;
-  column-count: 5;
-}
-
-.waterfall-item {
-  padding: 10px;
-  margin-bottom: 10px;
-  border: 1px solid #eaeaea;
-  break-inside: avoid;
-}
-
-.material-img {
-  width: 100%;
-}
-
-.item-name {
-  line-height: 30px;
-}
-</style>
diff --git a/apps/web-antd/src/views/mp/material/components/VideoTable.vue b/apps/web-antd/src/views/mp/material/components/VideoTable.vue
deleted file mode 100644
index a8b89c5a2..000000000
--- a/apps/web-antd/src/views/mp/material/components/VideoTable.vue
+++ /dev/null
@@ -1,144 +0,0 @@
-<script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-
-import { watch } from 'vue';
-
-import { useAccess } from '@vben/access';
-import { IconifyIcon } from '@vben/icons';
-import { formatDate2, openWindow } from '@vben/utils';
-
-import { Button } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { WxVideoPlayer } from '#/views/mp/components';
-
-// TODO @dylan：vue 组件名小写 + 中划线
-
-const props = defineProps<{
-  list: any[];
-  loading: boolean;
-}>();
-
-const emit = defineEmits<{
-  delete: [v: number];
-}>();
-
-const { hasAccessByCodes } = useAccess();
-
-// TODO @dylan：这里有个告警哈；
-// TODO @dylan：放到 data.ts 里；
-const columns: VxeTableGridOptions<any>['columns'] = [
-  {
-    field: 'mediaId',
-    title: '编号',
-    align: 'center',
-    width: 160,
-  },
-  {
-    field: 'name',
-    title: '文件名',
-    align: 'center',
-    minWidth: 200,
-  },
-  {
-    field: 'title',
-    title: '标题',
-    align: 'center',
-    minWidth: 200,
-  },
-  {
-    field: 'introduction',
-    title: '介绍',
-    align: 'center',
-    minWidth: 220,
-  },
-  // TODO @dylan：视频的样式，有点奇怪。
-  {
-    field: 'video',
-    title: '视频',
-    align: 'center',
-    width: 220,
-    slots: { default: 'video' },
-  },
-  {
-    field: 'createTime',
-    title: '上传时间',
-    align: 'center',
-    width: 180,
-    slots: { default: 'createTime' },
-  },
-  {
-    field: 'actions',
-    title: '操作',
-    align: 'center',
-    fixed: 'right',
-    width: 180,
-    slots: { default: 'actions' },
-  },
-];
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  gridOptions: {
-    border: true,
-    columns,
-    keepSource: true,
-    pagerConfig: {
-      enabled: false,
-    },
-    rowConfig: {
-      keyField: 'id',
-      isHover: true,
-    },
-    showOverflow: 'tooltip',
-  } as VxeTableGridOptions<any>, // TODO @dylan：这里有个告警哈；
-});
-
-watch(
-  () => props.list,
-  (list: any[]) => {
-    const data = Array.isArray(list) ? list : [];
-    if (gridApi.grid?.loadData) {
-      gridApi.grid.loadData(data);
-    } else {
-      gridApi.setGridOptions({ data });
-    }
-  },
-  { immediate: true },
-);
-
-watch(
-  () => props.loading,
-  (loading: boolean) => {
-    gridApi.setLoading(loading);
-  },
-  { immediate: true },
-);
-</script>
-
-<template>
-  <Grid class="mt-4">
-    <template #video="{ row }">
-      <WxVideoPlayer v-if="row.url" :url="row.url" />
-    </template>
-    <!-- TODO @dylan：应该 data.ts 里 formatDate 就好了。别的模块有的哈。 -->
-    <template #createTime="{ row }">
-      {{ formatDate2(row.createTime) }}
-    </template>
-    <!-- TODO @dylan：用 tableaction 哈：yudao-ui-admin-vben-v5/apps/web-antd/src/views/system/user/index.vue -->
-    <template #actions="{ row }">
-      <Button type="link" @click="openWindow(row.url)">
-        <IconifyIcon icon="lucide:download" />
-        下载
-      </Button>
-      <Button
-        v-if="hasAccessByCodes(['mp:material:delete'])"
-        danger
-        type="link"
-        @click="emit('delete', row.id)"
-      >
-        <IconifyIcon icon="lucide:trash-2" />
-        删除
-      </Button>
-    </template>
-  </Grid>
-</template>
diff --git a/apps/web-antd/src/views/mp/material/components/VoiceTable.vue b/apps/web-antd/src/views/mp/material/components/VoiceTable.vue
deleted file mode 100644
index 06a4798a5..000000000
--- a/apps/web-antd/src/views/mp/material/components/VoiceTable.vue
+++ /dev/null
@@ -1,133 +0,0 @@
-<script lang="ts" setup>
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
-
-import { watch } from 'vue';
-
-import { useAccess } from '@vben/access';
-import { IconifyIcon } from '@vben/icons';
-import { formatDate2, openWindow } from '@vben/utils';
-
-import { Button } from 'ant-design-vue';
-
-import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { WxVoicePlayer } from '#/views/mp/components';
-
-// TODO @dylan：vue 组件名小写 + 中划线
-
-// TODO @dylan：组件内，尽量用 modules 哈。只有对外共享，才用 components
-
-const props = defineProps<{
-  list: any[];
-  loading: boolean;
-}>();
-
-const emit = defineEmits<{
-  delete: [v: number];
-}>();
-
-const { hasAccessByCodes } = useAccess();
-
-// TODO @dylan：这里有个告警哈；
-// TODO @dylan：放到 data.ts 里；
-const columns: VxeTableGridOptions<any>['columns'] = [
-  {
-    field: 'mediaId',
-    title: '编号',
-    align: 'center',
-    width: 160,
-  },
-  {
-    field: 'name',
-    title: '文件名',
-    align: 'center',
-    minWidth: 200,
-  },
-  // TODO @dylan：语音的样式，有点奇怪。
-  {
-    field: 'voice',
-    title: '语音',
-    align: 'center',
-    width: 220,
-    slots: { default: 'voice' },
-  },
-  {
-    field: 'createTime',
-    title: '上传时间',
-    align: 'center',
-    width: 180,
-    slots: { default: 'createTime' },
-  },
-  {
-    field: 'actions',
-    title: '操作',
-    align: 'center',
-    fixed: 'right',
-    width: 160,
-    slots: { default: 'actions' },
-  },
-];
-
-const [Grid, gridApi] = useVbenVxeGrid({
-  gridOptions: {
-    border: true,
-    columns,
-    keepSource: true,
-    pagerConfig: {
-      enabled: false,
-    },
-    rowConfig: {
-      keyField: 'id',
-      isHover: true,
-    },
-    showOverflow: 'tooltip',
-  } as VxeTableGridOptions<any>, // TODO @dylan：这里有个告警哈；
-});
-
-watch(
-  () => props.list,
-  (list: any[]) => {
-    const data = Array.isArray(list) ? list : [];
-    if (gridApi.grid?.loadData) {
-      gridApi.grid.loadData(data);
-    } else {
-      gridApi.setGridOptions({ data });
-    }
-  },
-  { immediate: true },
-);
-
-watch(
-  () => props.loading,
-  (loading: boolean) => {
-    gridApi.setLoading(loading);
-  },
-  { immediate: true },
-);
-</script>
-
-<template>
-  <Grid class="mt-4">
-    <template #voice="{ row }">
-      <WxVoicePlayer v-if="row.url" :url="row.url" />
-    </template>
-    <!-- TODO @dylan：应该 data.ts 里 formatDate 就好了。别的模块有的哈。 -->
-    <template #createTime="{ row }">
-      {{ formatDate2(row.createTime) }}
-    </template>
-    <template #actions="{ row }">
-      <Button type="link" @click="openWindow(row.url)">
-        <IconifyIcon icon="lucide:download" />
-        下载
-      </Button>
-      <Button
-        v-if="hasAccessByCodes(['mp:material:delete'])"
-        danger
-        type="link"
-        @click="emit('delete', row.id)"
-      >
-        <IconifyIcon icon="lucide:trash-2" />
-        删除
-      </Button>
-    </template>
-  </Grid>
-</template>
diff --git a/apps/web-antd/src/views/mp/material/components/data.ts b/apps/web-antd/src/views/mp/material/components/data.ts
new file mode 100644
index 000000000..cab6f251e
--- /dev/null
+++ b/apps/web-antd/src/views/mp/material/components/data.ts
@@ -0,0 +1,133 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMaterialApi } from '#/api/mp/material';
+
+/** 视频表格列配置 */
+export function useVideoGridColumns(): VxeTableGridOptions<MpMaterialApi.Material>['columns'] {
+  return [
+    {
+      field: 'mediaId',
+      title: '编号',
+      align: 'center',
+      width: 160,
+    },
+    {
+      field: 'name',
+      title: '文件名',
+      align: 'center',
+      minWidth: 100,
+    },
+    {
+      field: 'title',
+      title: '标题',
+      align: 'center',
+      minWidth: 200,
+    },
+    {
+      field: 'introduction',
+      title: '介绍',
+      align: 'center',
+      minWidth: 220,
+    },
+    {
+      field: 'video',
+      title: '视频',
+      align: 'center',
+      width: 220,
+      slots: { default: 'video' },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      align: 'center',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      align: 'center',
+      fixed: 'right',
+      width: 180,
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 语音表格列配置 */
+export function useVoiceGridColumns(): VxeTableGridOptions<MpMaterialApi.Material>['columns'] {
+  return [
+    {
+      field: 'mediaId',
+      title: '编号',
+      align: 'center',
+      width: 160,
+    },
+    {
+      field: 'name',
+      title: '文件名',
+      align: 'center',
+      minWidth: 100,
+    },
+    {
+      field: 'voice',
+      title: '语音',
+      align: 'center',
+      width: 220,
+      slots: { default: 'voice' },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      align: 'center',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      align: 'center',
+      fixed: 'right',
+      width: 160,
+      slots: { default: 'actions' },
+    },
+  ];
+}
+
+/** 图片表格列配置 */
+export function useImageGridColumns(): VxeTableGridOptions<MpMaterialApi.Material>['columns'] {
+  return [
+    {
+      field: 'mediaId',
+      title: '编号',
+      align: 'center',
+      width: 400,
+    },
+    {
+      field: 'name',
+      title: '文件名',
+      align: 'center',
+      width: 200,
+    },
+    {
+      field: 'url',
+      title: '图片',
+      align: 'center',
+      width: 200,
+      slots: { default: 'image' },
+    },
+    {
+      field: 'createTime',
+      title: '上传时间',
+      align: 'center',
+      width: 180,
+      formatter: 'formatDateTime',
+    },
+    {
+      field: 'actions',
+      title: '操作',
+      align: 'center',
+      fixed: 'right',
+      slots: { default: 'actions' },
+    },
+  ];
+}
diff --git a/apps/web-antd/src/views/mp/material/components/image-table.vue b/apps/web-antd/src/views/mp/material/components/image-table.vue
new file mode 100644
index 000000000..d5e12cb96
--- /dev/null
+++ b/apps/web-antd/src/views/mp/material/components/image-table.vue
@@ -0,0 +1,100 @@
+<script lang="ts" setup>
+import type { MpMaterialApi } from '#/api/mp/material';
+
+import { nextTick, onMounted, watch } from 'vue';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+
+import { useImageGridColumns } from './data';
+
+const props = defineProps<{
+  list: MpMaterialApi.Material[];
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  delete: [v: number];
+}>();
+
+const columns = useImageGridColumns();
+
+const [Grid, gridApi] = useVbenVxeGrid<MpMaterialApi.Material>({
+  gridOptions: {
+    border: true,
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+      height: 220,
+    },
+    showOverflow: 'tooltip',
+  },
+});
+
+function updateGridData(data: MpMaterialApi.Material[]) {
+  if (gridApi.grid?.loadData) {
+    gridApi.grid.loadData(data);
+  } else {
+    gridApi.setGridOptions({ data });
+  }
+}
+
+watch(
+  () => props.list,
+  async (list: MpMaterialApi.Material[]) => {
+    const data = Array.isArray(list) ? list : [];
+    await nextTick();
+    updateGridData(data);
+  },
+  { flush: 'post' },
+);
+
+watch(
+  () => props.loading,
+  (loading: boolean) => {
+    gridApi.setLoading(loading);
+  },
+);
+
+/** 初始化 */
+onMounted(async () => {
+  await nextTick();
+  updateGridData(Array.isArray(props.list) ? props.list : []);
+  gridApi.setLoading(props.loading);
+});
+</script>
+
+<template>
+  <Grid class="image-table-grid mt-4 pb-0">
+    <template #image="{ row }">
+      <div class="flex items-center justify-center" style="height: 192px">
+        <img
+          :src="row.url"
+          class="object-contain"
+          style="display: block; max-width: 100%; max-height: 192px"
+        />
+      </div>
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '删除',
+            type: 'link',
+            danger: true,
+            icon: ACTION_ICON.DELETE,
+            auth: ['mp:material:delete'],
+            popConfirm: {
+              title: '确定要删除该图片吗？',
+              confirm: () => emit('delete', row.id!),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/mp/material/components/video-table.vue b/apps/web-antd/src/views/mp/material/components/video-table.vue
new file mode 100644
index 000000000..70070dff1
--- /dev/null
+++ b/apps/web-antd/src/views/mp/material/components/video-table.vue
@@ -0,0 +1,92 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMaterialApi } from '#/api/mp/material';
+
+import { watch } from 'vue';
+
+import { openWindow } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { WxVideoPlayer } from '#/views/mp/components';
+
+import { useVideoGridColumns } from './data';
+
+const props = defineProps<{
+  list: MpMaterialApi.Material[];
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  delete: [v: number];
+}>();
+
+const columns = useVideoGridColumns();
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    showOverflow: 'tooltip',
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
+});
+
+watch(
+  () => props.list,
+  (list: MpMaterialApi.Material[]) => {
+    const data = Array.isArray(list) ? list : [];
+    if (gridApi.grid?.loadData) {
+      gridApi.grid.loadData(data);
+    } else {
+      gridApi.setGridOptions({ data });
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.loading,
+  (loading: boolean) => {
+    gridApi.setLoading(loading);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Grid class="mt-4">
+    <template #video="{ row }">
+      <WxVideoPlayer v-if="row.url" :url="row.url" />
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '下载',
+            type: 'link',
+            icon: ACTION_ICON.DOWNLOAD,
+            onClick: () => openWindow(row.url),
+          },
+          {
+            label: '删除',
+            type: 'link',
+            danger: true,
+            icon: ACTION_ICON.DELETE,
+            auth: ['mp:material:delete'],
+            popConfirm: {
+              title: '确定要删除该视频吗？',
+              confirm: () => emit('delete', row.id!),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/mp/material/components/voice-table.vue b/apps/web-antd/src/views/mp/material/components/voice-table.vue
new file mode 100644
index 000000000..8ea6d0274
--- /dev/null
+++ b/apps/web-antd/src/views/mp/material/components/voice-table.vue
@@ -0,0 +1,93 @@
+<script lang="ts" setup>
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMaterialApi } from '#/api/mp/material';
+
+import { watch } from 'vue';
+
+import { openWindow } from '@vben/utils';
+
+import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
+import { WxVoicePlayer } from '#/views/mp/components';
+
+import { useVoiceGridColumns } from './data';
+// TODO @dylan：组件内，尽量用 modules 哈。只有对外共享，才用 components
+
+const props = defineProps<{
+  list: MpMaterialApi.Material[];
+  loading: boolean;
+}>();
+
+const emit = defineEmits<{
+  delete: [v: number];
+}>();
+
+const columns = useVoiceGridColumns();
+
+const [Grid, gridApi] = useVbenVxeGrid({
+  gridOptions: {
+    border: true,
+    columns,
+    keepSource: true,
+    pagerConfig: {
+      enabled: false,
+    },
+    rowConfig: {
+      keyField: 'id',
+      isHover: true,
+    },
+    showOverflow: 'tooltip',
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
+});
+
+watch(
+  () => props.list,
+  (list: MpMaterialApi.Material[]) => {
+    const data = Array.isArray(list) ? list : [];
+    if (gridApi.grid?.loadData) {
+      gridApi.grid.loadData(data);
+    } else {
+      gridApi.setGridOptions({ data });
+    }
+  },
+  { immediate: true },
+);
+
+watch(
+  () => props.loading,
+  (loading: boolean) => {
+    gridApi.setLoading(loading);
+  },
+  { immediate: true },
+);
+</script>
+
+<template>
+  <Grid class="mt-4">
+    <template #voice="{ row }">
+      <WxVoicePlayer v-if="row.url" :url="row.url" />
+    </template>
+    <template #actions="{ row }">
+      <TableAction
+        :actions="[
+          {
+            label: '下载',
+            type: 'link',
+            icon: ACTION_ICON.DOWNLOAD,
+            onClick: () => openWindow(row.url),
+          },
+          {
+            label: '删除',
+            type: 'link',
+            danger: true,
+            icon: ACTION_ICON.DELETE,
+            auth: ['mp:material:delete'],
+            popConfirm: {
+              title: '确定要删除该语音吗？',
+              confirm: () => emit('delete', row.id!),
+            },
+          },
+        ]"
+      />
+    </template>
+  </Grid>
+</template>
diff --git a/apps/web-antd/src/views/mp/material/index.vue b/apps/web-antd/src/views/mp/material/index.vue
index a31c788d0..e85fea246 100644
--- a/apps/web-antd/src/views/mp/material/index.vue
+++ b/apps/web-antd/src/views/mp/material/index.vue
@@ -2,29 +2,20 @@
 import { provide, reactive, ref } from 'vue';
 
 import { useAccess } from '@vben/access';
-import { DocAlert, Page } from '@vben/common-ui';
+import { confirm, DocAlert, Page } from '@vben/common-ui';
 import { IconifyIcon } from '@vben/icons';
 
-// TODO @dlyan、可以先 antd 迁移完，在搞 ele；避免搞两遍；
-import {
-  Button,
-  Card,
-  Form,
-  message,
-  Modal,
-  Pagination,
-  Tabs,
-} from 'ant-design-vue';
+import { Button, Card, Form, message, Pagination, Tabs } from 'ant-design-vue';
 
 import { deletePermanentMaterial, getMaterialPage } from '#/api/mp/material';
 import { WxAccountSelect } from '#/views/mp/components';
 
-import ImageTable from './components/ImageTable.vue';
+import ImageTable from './components/image-table.vue';
 import { UploadType } from './components/upload';
 import UploadFile from './components/UploadFile.vue';
 import UploadVideo from './components/UploadVideo.vue';
-import VideoTable from './components/VideoTable.vue';
-import VoiceTable from './components/VoiceTable.vue';
+import VideoTable from './components/video-table.vue';
+import VoiceTable from './components/voice-table.vue';
 
 defineOptions({ name: 'MpMaterial' });
 
@@ -86,16 +77,18 @@ function onTabChange() {
 
 /** 处理删除操作 */
 async function handleDelete(id: number) {
-  // TODO @dylan：参考别的模块的  dylan 哈；
-  Modal.confirm({
-    content: '此操作将永久删除该文件, 是否继续?',
-    title: '提示',
-    async onOk() {
-      await deletePermanentMaterial(id);
-      message.success('删除成功');
-      await getList();
-    },
+  await confirm('此操作将永久删除该文件, 是否继续?');
+  const hideLoading = message.loading({
+    content: '正在删除...',
+    duration: 0,
   });
+  try {
+    await deletePermanentMaterial(id);
+    message.success('删除成功');
+    await getList();
+  } finally {
+    hideLoading();
+  }
 }
 </script>
 
@@ -114,11 +107,9 @@ async function handleDelete(id: number) {
         </Form>
       </Card>
 
-      <Card :bordered="false" class="mt-4 h-[88%]">
+      <Card :bordered="false" class="mt-4 h-auto">
         <Tabs v-model:active-key="type" @change="onTabChange">
           <!-- tab 1：图片  -->
-          <!-- 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/message/index.vue b/apps/web-antd/src/views/mp/message/index.vue
index 832bafbb1..7c0a82ed8 100644
--- a/apps/web-antd/src/views/mp/message/index.vue
+++ b/apps/web-antd/src/views/mp/message/index.vue
@@ -22,7 +22,7 @@ import {
 import { getMessagePage } from '#/api/mp/message';
 import { WxAccountSelect, WxMsg } from '#/views/mp/components';
 
-import MessageTable from './MessageTable.vue';
+import MessageTable from './message-table.vue';
 
 defineOptions({ name: 'MpMessage' });
 
@@ -30,7 +30,6 @@ const loading = ref(false);
 const total = ref(0); // 数据的总页数
 const list = ref<any[]>([]); // 当前页的列表数据
 
-// TODO @dylan：是不是参考别的模块简化哈。尽量使用 Grid
 const queryParams = reactive<{
   accountId: number;
   createTime: [Dayjs, Dayjs] | undefined;
@@ -189,7 +188,6 @@ function showTotal(total: number) {
       :footer="null"
       destroy-on-close
     >
-      <!-- TODO @dlayn：这里有告警； -->
       <WxMsg :user-id="messageBoxUserId" />
     </Modal>
   </Page>
diff --git a/apps/web-antd/src/views/mp/message/MessageTable.vue b/apps/web-antd/src/views/mp/message/message-table.vue
similarity index 79%
rename from apps/web-antd/src/views/mp/message/MessageTable.vue
rename to apps/web-antd/src/views/mp/message/message-table.vue
index 37137abec..0e2e13874 100644
--- a/apps/web-antd/src/views/mp/message/MessageTable.vue
+++ b/apps/web-antd/src/views/mp/message/message-table.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMessageApi } from '#/api/mp/message';
 
 import { onMounted, watch } from 'vue';
 
@@ -17,11 +18,9 @@ import {
   WxVoicePlayer,
 } from '#/views/mp/components';
 
-// TODO @dylan：vue 组件名小写 + 中划线
-
 const props = withDefaults(
   defineProps<{
-    list?: any[];
+    list?: MpMessageApi.Message[];
     loading?: boolean;
   }>(),
   {
@@ -36,8 +35,7 @@ const emit = defineEmits<{
   (e: 'send', userId: number): void;
 }>();
 
-const columns: VxeTableGridOptions<any>['columns'] = [
-  // TODO @dylan：any 有 linter 告警；看看别的模块哈
+const columns: VxeTableGridOptions<MpMessageApi.Message>['columns'] = [
   {
     field: 'createTime',
     title: '发送时间',
@@ -81,7 +79,7 @@ const columns: VxeTableGridOptions<any>['columns'] = [
   },
 ];
 
-const [Grid, gridApi] = useVbenVxeGrid({
+const [Grid, gridApi] = useVbenVxeGrid<MpMessageApi.Message>({
   gridOptions: {
     border: true,
     columns,
@@ -94,14 +92,14 @@ const [Grid, gridApi] = useVbenVxeGrid({
       isHover: true,
     },
     showOverflow: 'tooltip',
-  } as VxeTableGridOptions<any>,
+  },
 });
 
-function normalizeList(list?: any[]) {
+function normalizeList(list?: MpMessageApi.Message[]) {
   return Array.isArray(list) ? list : [];
 }
 
-function updateGridData(data: any[]) {
+function updateGridData(data: MpMessageApi.Message[]) {
   if (gridApi.grid?.loadData) {
     gridApi.grid.loadData(data);
   } else {
@@ -134,7 +132,7 @@ onMounted(() => {
 <template>
   <Grid>
     <template #createTime="{ row }">
-      {{ formatDate2(row.createTime) }}
+      {{ row.createTime ? formatDate2(row.createTime) : '' }}
     </template>
 
     <template #sendFrom="{ row }">
@@ -143,15 +141,28 @@ onMounted(() => {
     </template>
 
     <template #content="{ row }">
-      <div v-if="row.type === MsgType.Event && row.event === 'subscribe'">
+      <div
+        v-if="
+          (row.type as string) === (MsgType.Event as string) &&
+          (row.event as string) === 'subscribe'
+        "
+      >
         <Tag color="success">关注</Tag>
       </div>
       <div
-        v-else-if="row.type === MsgType.Event && row.event === 'unsubscribe'"
+        v-else-if="
+          (row.type as string) === (MsgType.Event as string) &&
+          (row.event as string) === 'unsubscribe'
+        "
       >
         <Tag color="error">取消关注</Tag>
       </div>
-      <div v-else-if="row.type === MsgType.Event && row.event === 'CLICK'">
+      <div
+        v-else-if="
+          (row.type as string) === (MsgType.Event as string) &&
+          (row.event as string) === 'CLICK'
+        "
+      >
         <Tag>点击菜单</Tag>
         【{{ row.eventKey }}】
       </div>
@@ -201,7 +212,10 @@ onMounted(() => {
 
       <div v-else-if="row.type === MsgType.Text">{{ row.content }}</div>
       <div v-else-if="row.type === MsgType.Voice">
-        <WxVoicePlayer :url="row.mediaUrl" :content="row.recognition" />
+        <WxVoicePlayer
+          :url="row.mediaUrl || ''"
+          :content="row.recognition || ''"
+        />
       </div>
       <div v-else-if="row.type === MsgType.Image">
         <a :href="row.mediaUrl" target="_blank">
@@ -209,7 +223,7 @@ onMounted(() => {
         </a>
       </div>
       <div v-else-if="row.type === MsgType.Video || row.type === 'shortvideo'">
-        <WxVideoPlayer :url="row.mediaUrl" class="mt-2" />
+        <WxVideoPlayer :url="row.mediaUrl || ''" class="mt-2" />
       </div>
       <div v-else-if="row.type === MsgType.Link">
         <Tag>链接</Tag>
@@ -218,16 +232,16 @@ onMounted(() => {
       </div>
       <div v-else-if="row.type === MsgType.Location">
         <WxLocation
-          :label="row.label"
-          :location-y="row.locationY"
-          :location-x="row.locationX"
+          :label="row.label || ''"
+          :location-y="row.locationY || 0"
+          :location-x="row.locationX || 0"
         />
       </div>
       <div v-else-if="row.type === MsgType.Music">
         <WxMusic
           :title="row.title"
           :description="row.description"
-          :thumb-media-url="row.thumbMediaUrl"
+          :thumb-media-url="row.thumbMediaUrl || ''"
           :music-url="row.musicUrl"
           :hq-music-url="row.hqMusicUrl"
         />
@@ -241,7 +255,7 @@ onMounted(() => {
     </template>
 
     <template #actions="{ row }">
-      <Button type="link" @click="emit('send', row.userId)"> 消息 </Button>
+      <Button type="link" @click="emit('send', row.userId || 0)"> 消息 </Button>
     </template>
   </Grid>
 </template>
diff --git a/apps/web-ele/src/api/mp/account/index.ts b/apps/web-ele/src/api/mp/account/index.ts
index 20c0ebad7..aa8557f15 100644
--- a/apps/web-ele/src/api/mp/account/index.ts
+++ b/apps/web-ele/src/api/mp/account/index.ts
@@ -16,12 +16,6 @@ export namespace MpAccountApi {
     remark?: string;
     createTime?: Date;
   }
-
-  // TODO @dylan：这个直接使用 Account，简化一点；
-  export interface AccountSimple {
-    id: number;
-    name: string;
-  }
 }
 
 /** 查询公众号账号列表 */
@@ -41,7 +35,7 @@ export function getAccount(id: number) {
 
 /** 查询公众号账号列表 */
 export function getSimpleAccountList() {
-  return requestClient.get<MpAccountApi.AccountSimple[]>(
+  return requestClient.get<MpAccountApi.Account[]>(
     '/mp/account/list-all-simple',
   );
 }
diff --git 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
index f03ee5d2f..6e52761c1 100644
--- 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
@@ -17,18 +17,20 @@ defineExpose({
 </script>
 
 <template>
-  <div class="news-home">
-    <div v-for="(article, index) in articles" :key="index" class="news-div">
+  <div class="mx-auto flex w-full flex-col gap-[10px] bg-white">
+    <div v-for="(article, index) in articles" :key="index">
       <!-- 头条 -->
       <a v-if="index === 0" :href="article.url" target="_blank">
-        <div class="news-main">
-          <div class="news-content">
+        <div class="mx-auto w-full">
+          <div class="relative w-full bg-[#acadae]">
             <img
               :src="article.picUrl"
               :preview="false"
-              class="material-img flex w-[100px] items-center justify-center"
+              class="w-[100px] object-cover"
             />
-            <div class="news-content-title">
+            <div
+              class="absolute bottom-0 left-0 ml-[10px] inline-block w-[98%] whitespace-normal p-[1%] text-base text-white"
+            >
               <span>{{ article.title }}</span>
             </div>
           </div>
@@ -36,10 +38,10 @@ defineExpose({
       </a>
       <!-- 二条/三条等等 -->
       <a v-else :href="article.url" target="_blank">
-        <div class="news-main-item">
-          <div class="news-content-item">
-            <div class="news-content-item-img">
-              <div class="news-content-item-title">{{ article.title }}</div>
+        <div class="bg-white">
+          <div class="relative box-border p-[10px]">
+            <div class="flex items-center">
+              <div class="flex-1 text-sm">{{ article.title }}</div>
 
               <img
                 :src="article.picUrl"
@@ -53,66 +55,3 @@ defineExpose({
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-
-.news-home {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  width: 100%;
-  margin: auto;
-  background-color: #fff;
-}
-
-.news-main {
-  width: 100%;
-  margin: auto;
-}
-
-.news-content {
-  position: relative;
-  width: 100%;
-  background-color: #acadae;
-}
-
-.news-content-title {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  box-sizing: unset !important;
-  display: inline-block;
-  width: 98%;
-  padding: 1%;
-  margin-left: 10px;
-  font-size: 16px;
-  color: #fff;
-  white-space: normal;
-}
-
-.news-main-item {
-  background-color: #fff;
-}
-
-.news-content-item {
-  position: relative;
-  box-sizing: border-box;
-  padding: 10px;
-}
-
-.news-content-item-title {
-  flex: 1;
-  font-size: 14px;
-}
-
-.news-content-item-img {
-  display: flex;
-  align-items: center;
-}
-
-.material-img {
-  width: auto;
-  object-fit: cover;
-}
-</style>
diff --git 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
index 2b13e86ff..3931ad172 100644
--- 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
@@ -63,11 +63,13 @@ function amrStop() {
   playing.value = false;
   amr.value.stop();
 }
-// TODO dylan：下面样式有点问题
 </script>
 
 <template>
-  <div class="wx-voice-div" @click="playVoice">
+  <div
+    class="flex h-[50px] w-[120px] cursor-pointer items-center justify-center rounded-[10px] bg-[#eaeaea] p-[5px]"
+    @click="playVoice"
+  >
     <el-icon>
       <IconifyIcon
         v-if="playing !== true"
@@ -75,7 +77,9 @@ function amrStop() {
         :size="32"
       />
       <IconifyIcon v-else icon="lucide:circle-pause" :size="32" />
-      <span class="amr-duration" v-if="duration">{{ duration }} 秒</span>
+      <span v-if="duration" class="ml-[5px] text-[11px]">
+        {{ duration }} 秒
+      </span>
     </el-icon>
     <div v-if="content">
       <el-tag type="success" size="small">语音识别</el-tag>
@@ -83,21 +87,3 @@ function amrStop() {
     </div>
   </div>
 </template>
-<style lang="scss" scoped>
-/** TODO @dylan：看看有没适合 tindwind 的哈。 */
-.wx-voice-div {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 120px;
-  height: 50px;
-  padding: 5px;
-  background-color: #eaeaea;
-  border-radius: 10px;
-}
-
-.amr-duration {
-  margin-left: 5px;
-  font-size: 11px;
-}
-</style>
diff --git a/apps/web-ele/src/views/mp/freePublish/data.ts b/apps/web-ele/src/views/mp/freePublish/data.ts
index cfcac30be..82cfb5f16 100644
--- a/apps/web-ele/src/views/mp/freePublish/data.ts
+++ b/apps/web-ele/src/views/mp/freePublish/data.ts
@@ -6,7 +6,7 @@ import { formatDateTime } from '@vben/utils';
 
 import { getSimpleAccountList } from '#/api/mp/account';
 
-let accountList: MpAccountApi.AccountSimple[] = [];
+let accountList: MpAccountApi.Account[] = [];
 getSimpleAccountList().then((data) => (accountList = data));
 
 /** 搜索表单配置 */