!281 Merge branch 'dev' of <a href="https://gitee.com/yudaocode/yudao-ui-admin-vben">https://gitee.com/yudaocode/yudao-ui-admin-vben</a> into dev

Merge pull request !281 from dylanmay/dev
2025-11-27 05:33:41 +00:00
parent 8d9d60b960 6c5a65a6bd
commit a976ca88f6
35 changed files with 714 additions and 925 deletions
--- 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',
  );
 }
--- 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[];
  }

  /** 发送消息请求 */
--- 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"
    }
  }
 }
--- 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": "语音"
    }
  }
 }
--- a/apps/web-antd/src/views/mall/product/spu/components/spu-and-sku-list.vue
+++ b/apps/web-antd/src/views/mall/product/spu/components/spu-and-sku-list.vue
@@ -1,7 +1,5 @@
 <script generic="T extends MallSpuApi.Spu" lang="ts" setup>
-import type { RuleConfig, SpuProperty } from './type';
-
-import type { MallSpuApi } from '#/api/mall/product/spu';
+import type { MallSpuApi, RuleConfig, SpuProperty } from './type';

 import { ref, watch } from 'vue';

@@ -45,13 +43,7 @@ const expandRowKeys = ref<string[]>([]); // 控制展开行需要设置 row-key
 function getSkuConfigs(extendedAttribute: string) {
  // 验证 SKU 数据（如果有 ref 的话）
  if (skuListRef.value) {
-    // TODO @puhui999：这里有个 linter 错误；
-    try {
-      skuListRef.value.validateSku();
-    } catch (error) {
-      // 验证失败时抛出错误
-      throw error;
-    }
+    skuListRef.value.validateSku();
  }
  const seckillProducts: unknown[] = [];
  spuPropertyList.value.forEach((item) => {
--- a/apps/web-antd/src/views/mall/product/spu/components/type.ts
+++ b/apps/web-antd/src/views/mall/product/spu/components/type.ts
@@ -1,3 +1,5 @@
+import type { MallSpuApi } from '#/api/mall/product/spu';
+
 /** 商品属性及其值的树形结构（用于前端展示和操作） */
 export interface PropertyAndValues {
  id: number;
@@ -26,3 +28,6 @@ export interface SpuProperty<T> {
  spuDetail: T;
  spuId: number;
 }
+
+// Re-export for use in generic constraint
+export type { MallSpuApi };
--- 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';
--- 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>

--- 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>
--- 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]':
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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>
--- 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));

 /** 搜索表单配置 */
--- 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;
    }

--- a/apps/web-antd/src/views/mp/material/components/ImageTable.vue
+++ b/apps/web-antd/src/views/mp/material/components/ImageTable.vue
@@ -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>
--- a/apps/web-antd/src/views/mp/material/components/VideoTable.vue
+++ b/apps/web-antd/src/views/mp/material/components/VideoTable.vue
@@ -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>
--- a/apps/web-antd/src/views/mp/material/components/VoiceTable.vue
+++ b/apps/web-antd/src/views/mp/material/components/VoiceTable.vue
@@ -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>
--- a/apps/web-antd/src/views/mp/material/components/data.ts
+++ 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' },
+    },
+  ];
+}
--- a/apps/web-antd/src/views/mp/material/components/image-table.vue
+++ 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>
--- a/apps/web-antd/src/views/mp/material/components/video-table.vue
+++ 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>
--- a/apps/web-antd/src/views/mp/material/components/voice-table.vue
+++ 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>
--- 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">
--- 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>
--- a/apps/web-antd/src/views/mp/message/message-table.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>
--- 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',
  );
 }
--- 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
@@ -18,7 +18,7 @@ defineExpose({

 <template>
  <div class="mx-auto flex w-full flex-col gap-[10px] bg-white">
-    <div v-for="(article, index) in articles" :key="index" class="news-div">
+    <div v-for="(article, index) in articles" :key="index">
      <!-- 头条 -->
      <a v-if="index === 0" :href="article.url" target="_blank">
        <div class="mx-auto w-full">
@@ -26,11 +26,10 @@ defineExpose({
            <img
              :src="article.picUrl"
              :preview="false"
-              class="flex w-[100%] items-center justify-center object-cover"
+              class="w-[100px] object-cover"
            />
            <div
              class="absolute bottom-0 left-0 ml-[10px] inline-block w-[98%] whitespace-normal p-[1%] text-base text-white"
-              style="box-sizing: unset !important"
            >
              <span>{{ article.title }}</span>
            </div>
--- 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
@@ -64,23 +64,24 @@ function amrStop() {
  playing.value = false;
  amr.value.stop();
 }
-// TODO dylan：下面样式有点问题
 </script>

 <template>
  <div
-    class="flex min-h-[50px] min-w-[120px] flex-col items-center justify-center rounded-[10px] bg-[#eaeaea] px-3 py-2"
+    class="flex h-[50px] w-[120px] cursor-pointer items-center justify-center rounded-[10px] bg-[#eaeaea] p-[5px]"
    @click="playVoice"
  >
-    <div class="flex items-center">
+    <el-icon>
      <IconifyIcon
        v-if="playing !== true"
        icon="lucide:circle-play"
        :size="32"
      />
      <IconifyIcon v-else icon="lucide:circle-pause" :size="32" />
-      <span class="ml-2 text-xs" v-if="duration">{{ duration }} 秒</span>
-    </div>
+      <span v-if="duration" class="ml-[5px] text-[11px]">
+        {{ duration }} 秒
+      </span>
+    </el-icon>
    <div v-if="content">
      <ElTag type="success" size="small">语音识别</ElTag>
      {{ content }}
--- 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));

 /** 搜索表单配置 */