Merge remote-tracking branch 'yudao/dev' into dev

2025-11-28 09:13:09 +08:00
parent c9d917b649 6a8f60957d
commit 86efe618de
79 changed files with 2000 additions and 2056 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/components/form-create/components/use-api-select.tsx
+++ b/apps/web-antd/src/components/form-create/components/use-api-select.tsx
@@ -145,8 +145,8 @@ export function useApiSelect(option: ApiSelectProps) {
            }

            return {
-              label: label,
-              value: value,
+              label,
+              value,
            };
          });
          return;
--- a/apps/web-antd/src/components/form-create/helpers.ts
+++ b/apps/web-antd/src/components/form-create/helpers.ts
@@ -202,10 +202,10 @@ export async function useFormCreateDesigner(designer: Ref) {
        value: 'id',
        options: [
          { label: '部门编号', value: 'id' },
-          { label: '部门名称', value: 'name' }
-        ]
-      }
-    ]
+          { label: '部门名称', value: 'name' },
+        ],
+      },
+    ],
  });
  const dictSelectRule = useDictSelectRule();
  const apiSelectRule0 = useSelectRule({
--- a/apps/web-antd/src/components/select-modal/index.ts
+++ b/apps/web-antd/src/components/select-modal/index.ts
@@ -1,3 +1,2 @@
-// TODO @xingyu：【待讨论】是不是把 user select 放到 user 目录的 components 下，dept select 放到 dept 目录的 components 下
 export { default as DeptSelectModal } from './dept-select-modal.vue';
 export { default as UserSelectModal } from './user-select-modal.vue';
--- a/apps/web-antd/src/components/select-modal/user-select-modal.vue
+++ b/apps/web-antd/src/components/select-modal/user-select-modal.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 // TODO @芋艿：是否有更好的组织形式？！
-// TODO @xingyu：你感觉，这个放到每个 system、infra 模块下，然后新建一个 components，表示每个模块，有一些共享的组件？然后，全局只放通用的（无业务含义的），可以哇？
 import type { Key } from 'ant-design-vue/es/table/interface';

 import type { SystemDeptApi } from '#/api/system/dept';
@@ -33,24 +32,23 @@ interface DeptTreeNode {
  name: string;
 }

+interface Props {
+  cancelText?: string;
+  confirmText?: string;
+  multiple?: boolean;
+  title?: string;
+  value?: number[];
+}
+
 defineOptions({ name: 'UserSelectModal' });

-withDefaults(
-  defineProps<{
-    cancelText?: string;
-    confirmText?: string;
-    multiple?: boolean;
-    title?: string;
-    value?: number[];
-  }>(),
-  {
-    title: '选择用户',
-    multiple: true,
-    value: () => [],
-    confirmText: '确定',
-    cancelText: '取消',
-  },
-);
+withDefaults(defineProps<Props>(), {
+  title: '选择用户',
+  multiple: true,
+  value: () => [],
+  confirmText: '确定',
+  cancelText: '取消',
+});

 const emit = defineEmits<{
  cancel: [];
--- 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/bpm/components/bpmn-process-designer/package/designer/plugins/defaultEmpty.js
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/defaultEmpty.js
@@ -1,4 +1,4 @@
-export default (key, name, type) => {
+function defaultEmpty(key, name, type) {
  if (!type) type = 'camunda';
  const TYPE_TARGET = {
    activiti: 'http://activiti.org/bpmn',
@@ -21,4 +21,6 @@ export default (key, name, type) => {
    </bpmndi:BPMNPlane>
  </bpmndi:BPMNDiagram>
 </bpmn2:definitions>`;
-};
+}
+
+export default defaultEmpty;
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/index.js
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/extension-moddle/camunda/index.js
@@ -1,5 +1,3 @@
-'use strict';
-
 import extension from './extension';

 export default {
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/designer/plugins/translate/zh.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-template-curly-in-string */
 /**
 * This is a sample file that should be replaced with the actual translation.
 *
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/form/ElementForm.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable no-unused-vars -->
 <script lang="ts" setup>
 import { computed, inject, nextTick, onMounted, ref, toRaw, watch } from 'vue';

--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/package/penal/multi-instance/ElementMultiInstance.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable unused-imports/no-unused-vars -->
 <script lang="ts" setup>
 import { inject, nextTick, onBeforeUnmount, ref, toRaw, watch } from 'vue';

@@ -65,6 +66,7 @@ const bpmnElement = ref<any>(null);
 const multiLoopInstance = ref<any>(null);
 declare global {
  interface Window {
+    // @ts-ignore
    bpmnInstances?: () => any;
  }
 }
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/highlight/index.js
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/highlight/index.js
@@ -1,5 +1,8 @@
-const hljs = require('highlight.js/lib/core');
-hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'));
-hljs.registerLanguage('json', require('highlight.js/lib/languages/json'));
+import hljs from 'highlight.js/lib/core';
+import jsonLanguage from 'highlight.js/lib/languages/json';
+import xmlLanguage from 'highlight.js/lib/languages/xml';

-module.exports = hljs;
+hljs.registerLanguage('xml', xmlLanguage);
+hljs.registerLanguage('json', jsonLanguage);
+
+export default hljs;
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/utils/directive/clickOutSide.js
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/utils/directive/clickOutSide.js
@@ -34,6 +34,7 @@ export default {
  },
  unbind(el) {
    document.removeEventListener('touchstart', el[ctx].documentHandler); // 解绑
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
    delete el[ctx];
  },
 };
--- a/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/utils/xml2json.js
+++ b/apps/web-antd/src/views/bpm/components/bpmn-process-designer/src/utils/xml2json.js
@@ -33,13 +33,13 @@ function xml2json(xml) {
    }
    return obj;
  } catch (error) {
-    console.log(error.message);
+    console.warn(error.message);
  }
 }

 function xmlObj2json(xml) {
  const xmlObj = xmlStr2XmlObj(xml);
-  console.log(xmlObj);
+  console.warn(xmlObj);
  let jsonObj = {};
  if (xmlObj.childNodes.length > 0) {
    jsonObj = xml2json(xmlObj);
--- a/apps/web-antd/src/views/iot/rule/scene/form/configs/condition-config.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/configs/condition-config.vue
@@ -135,8 +135,8 @@ function handleDeviceChange(_: any) {

 /**
 * 处理属性变化事件
- * @param propertyInfo.config 属性配置
- * @param propertyInfo.type 属性类型
+ * @param propertyInfo.config - 属性配置
+ * @param propertyInfo.type - 属性类型
 */
 function handlePropertyChange(propertyInfo: { config: any; type: string }) {
  propertyType.value = propertyInfo.type;
--- a/apps/web-antd/src/views/iot/rule/scene/form/inputs/json-params-input.vue
+++ b/apps/web-antd/src/views/iot/rule/scene/form/inputs/json-params-input.vue
@@ -50,8 +50,8 @@ interface JsonParamsConfig {
 interface Props {
  modelValue: string;
  config: JsonParamsConfig;
-  type: JsonParamsInputType;
-  placeholder: string;
+  type?: JsonParamsInputType;
+  placeholder?: string;
 }

 interface Emits {
--- a/apps/web-antd/src/views/mall/product/comment/data.ts
+++ b/apps/web-antd/src/views/mall/product/comment/data.ts
@@ -25,7 +25,6 @@ export function useFormSchema(): VbenFormSchema[] {
      },
      rules: 'required',
    },
-    // TODO @puhui999：商品的选择：上面 spuId 可以选择了，下面的 skuId 打开后，没商品。
    {
      fieldName: 'skuId',
      label: '商品规格',
--- a/apps/web-antd/src/views/mall/product/comment/modules/form.vue
+++ b/apps/web-antd/src/views/mall/product/comment/modules/form.vue
@@ -101,23 +101,13 @@ const [Modal, modalApi] = useVbenModal({
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      // 重置表单数据
-      // TODO @puhui999：105 到 108 的代码，不需要的呀？（可以测试下）
-      formData.value = {
-        descriptionScores: 5,
-        benefitScores: 5,
-      } as Partial<MallCommentApi.Comment>;
      selectedSku.value = undefined;
      return;
    }
    // 加载数据
    const data = modalApi.getData<MallCommentApi.Comment>();
    if (!data || !data.id) {
-      // TODO @puhui999：115 到 121 的代码，不需要的呀？（可以测试下）
      // 新建模式：重置表单
-      formData.value = {
-        descriptionScores: 5,
-        benefitScores: 5,
-      } as Partial<MallCommentApi.Comment>;
      selectedSku.value = undefined;
      await formApi.setValues({ spuId: undefined, skuId: undefined });
      return;
--- a/apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue
+++ b/apps/web-antd/src/views/mall/product/spu/components/sku-table-select.vue
@@ -1,17 +1,16 @@
 <!-- SKU 选择弹窗组件 -->
 <script lang="ts" setup>
-import type { VxeGridProps } from '#/adapter/vxe-table';
 import type { MallSpuApi } from '#/api/mall/product/spu';

 import { ref } from 'vue';

-import { fenToYuan } from '@vben/utils';
-
 import { Modal } from 'ant-design-vue';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getSpu } from '#/api/mall/product/spu';

+import { useSkuGridColumns } from './spu-select-data';
+
 interface SpuData {
  spuId: number;
 }
@@ -23,52 +22,14 @@ const emit = defineEmits<{
 const visible = ref(false);
 const spuId = ref<number>();

-/** 表格列配置 */
-const gridColumns: VxeGridProps['columns'] = [
-  {
-    type: 'radio',
-    width: 55,
-  },
-  {
-    field: 'picUrl',
-    title: '图片',
-    width: 100,
-    align: 'center',
-    cellRender: {
-      name: 'CellImage',
-    },
-  },
-  {
-    field: 'properties',
-    title: '规格',
-    minWidth: 120,
-    align: 'center',
-    formatter: ({ cellValue }) => {
-      return (
-        cellValue?.map((p: MallSpuApi.Property) => p.valueName)?.join(' ') ||
-        '-'
-      );
-    },
-  },
-  {
-    field: 'price',
-    title: '销售价(元)',
-    width: 120,
-    align: 'center',
-    formatter: ({ cellValue }) => {
-      return fenToYuan(cellValue);
-    },
-  },
-];
-
 const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions: {
-    columns: gridColumns,
+    columns: useSkuGridColumns(),
    height: 400,
    border: true,
-    showOverflow: true,
    radioConfig: {
      reserve: true,
+      highlight: true,
    },
    rowConfig: {
      keyField: 'id',
@@ -77,22 +38,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
    pagerConfig: {
      enabled: false,
    },
-    proxyConfig: {
-      // TODO @puhui999：看看注释的部分，后续要不要删除
-      // autoLoad: false, // 禁用自动加载，手动触发查询
-      ajax: {
-        query: async () => {
-          if (!spuId.value) {
-            return { list: [], total: 0 };
-          }
-          const spu = await getSpu(spuId.value);
-          return {
-            list: spu.skus || [],
-            total: spu.skus?.length || 0,
-          };
-        },
-      },
-    },
  },
  gridEvents: {
    radioChange: () => {
@@ -111,7 +56,6 @@ const [Grid, gridApi] = useVbenVxeGrid({
 /** 关闭弹窗 */
 function closeModal() {
  visible.value = false;
-  gridApi.grid.clearRadioRow();
  spuId.value = undefined;
 }

@@ -122,12 +66,14 @@ async function openModal(data?: SpuData) {
  }
  spuId.value = data.spuId;
  visible.value = true;
-  // TODO @puhui999：看看注释的部分，后续要不要删除
-  // // 等待弹窗和 Grid 组件完全渲染后再查询数据
-  // await nextTick();
-  // if (gridApi.grid) {
-  //   await gridApi.query();
-  // }
+  // 注意：useVbenVxeGrid 关闭分页(pagerConfig.enabled=false)后，proxyConfig.ajax.query 的结果不会传递到 vxe-table
+  // 需要手动调用 reloadData 设置表格数据
+  if (!spuId.value) {
+    gridApi.grid?.reloadData([]);
+    return;
+  }
+  const spu = await getSpu(spuId.value);
+  gridApi.grid?.reloadData(spu.skus || []);
 }

 /** 对外暴露的方法 */
--- 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/spu-select-data.ts
+++ b/apps/web-antd/src/views/mall/product/spu/components/spu-select-data.ts
@@ -1,11 +1,14 @@
 import type { Ref } from 'vue';

 import type { VbenFormSchema } from '#/adapter/form';
-import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { VxeGridProps, VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MallSpuApi } from '#/api/mall/product/spu';
 import type { MallCategoryApi } from '#/api/mall/product/category';

 import { computed } from 'vue';

+import { fenToYuan } from '@vben/utils';
+
 import { getRangePickerDefaultProps } from '#/utils';

 /** 列表的搜索表单 */
@@ -118,3 +121,49 @@ export function useGridColumns(
    },
  ] as VxeTableGridOptions['columns'];
 }
+
+/** SKU 列表的字段 */
+export function useSkuGridColumns(): VxeGridProps['columns'] {
+  return [
+    {
+      type: 'radio',
+      width: 55,
+    },
+    {
+      field: 'id',
+      title: '商品编号',
+      minWidth: 100,
+      align: 'center',
+    },
+    {
+      field: 'picUrl',
+      title: '图片',
+      width: 100,
+      align: 'center',
+      cellRender: {
+        name: 'CellImage',
+      },
+    },
+    {
+      field: 'properties',
+      title: '规格',
+      minWidth: 120,
+      align: 'center',
+      formatter: ({ cellValue }) => {
+        return (
+          cellValue?.map((p: MallSpuApi.Property) => p.valueName)?.join(' ') ||
+          '-'
+        );
+      },
+    },
+    {
+      field: 'price',
+      title: '销售价(元)',
+      width: 120,
+      align: 'center',
+      formatter: ({ cellValue }) => {
+        return fenToYuan(cellValue);
+      },
+    },
+  ];
+}
--- a/apps/web-antd/src/views/mall/product/spu/components/spu-select.vue
+++ b/apps/web-antd/src/views/mall/product/spu/components/spu-select.vue
@@ -190,13 +190,10 @@ const [Grid, gridApi] = useVbenVxeGrid({
      keyField: 'id',
      isHover: true,
    },
-    // TODO @puhui999：貌似直接 { trigger: 'row', reserve: true } 就可以了？不会影响 radio 的哈。（可以测试下。）
-    expandConfig: props.isSelectSku
-      ? {
-          trigger: 'row',
-          reserve: true,
-        }
-      : undefined,
+    expandConfig: {
+      trigger: 'row',
+      reserve: true,
+    },
    proxyConfig: {
      ajax: {
        async query({ page }: any, formValues: any) {
--- a/apps/web-antd/src/views/mall/product/spu/components/type.ts
+++ b/apps/web-antd/src/views/mall/product/spu/components/type.ts
@@ -26,3 +26,7 @@ export interface SpuProperty<T> {
  spuDetail: T;
  spuId: number;
 }
+
+// Re-export for use in generic constraint
+
+export { type MallSpuApi } from '#/api/mall/product/spu';
--- a/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
+++ b/apps/web-antd/src/views/mall/promotion/coupon/components/select.vue
@@ -2,7 +2,9 @@
 import type { VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';

-import { useVbenModal } from '@vben/common-ui';
+import { ref } from 'vue';
+
+import { Modal } from 'ant-design-vue';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { getCouponTemplatePage } from '#/api/mall/promotion/coupon/couponTemplate';
@@ -15,7 +17,11 @@ const props = defineProps<{
  takeType?: number; // 领取方式
 }>();

-const emit = defineEmits(['success']);
+const emit = defineEmits<{
+  (e: 'change', v: MallCouponTemplateApi.CouponTemplate[]): void;
+}>();
+
+const visible = ref(false); // 弹窗显示状态

 const [Grid, gridApi] = useVbenVxeGrid({
  formOptions: {
@@ -48,19 +54,42 @@ const [Grid, gridApi] = useVbenVxeGrid({
  } as VxeTableGridOptions<MallCouponTemplateApi.CouponTemplate>,
 });

-const [Modal, modalApi] = useVbenModal({
-  async onConfirm() {
-    // 从 gridApi 获取选中的记录
-    const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
-      []) as MallCouponTemplateApi.CouponTemplate[];
-    await modalApi.close();
-    emit('success', selectedRecords);
-  },
+/** 打开弹窗 */
+async function open() {
+  visible.value = true;
+  // 重置查询条件并重新加载数据，与老组件行为一致
+  await gridApi.query();
+}
+
+/** 关闭弹窗 */
+function closeModal() {
+  visible.value = false;
+}
+
+/** 确认选择 */
+function handleConfirm() {
+  // 从 gridApi 获取选中的记录
+  const selectedRecords = (gridApi.grid?.getCheckboxRecords() ||
+    []) as MallCouponTemplateApi.CouponTemplate[];
+  emit('change', selectedRecords);
+  closeModal();
+}
+
+/** 对外暴露的方法 */
+defineExpose({
+  open,
 });
 </script>

 <template>
-  <Modal title="选择优惠券" class="w-2/3">
+  <Modal
+    v-model:open="visible"
+    title="选择优惠券"
+    width="65%"
+    :destroy-on-close="true"
+    @ok="handleConfirm"
+    @cancel="closeModal"
+  >
    <Grid />
  </Modal>
 </template>
--- a/apps/web-antd/src/views/mall/promotion/kefu/modules/member/member-info.vue
+++ b/apps/web-antd/src/views/mall/promotion/kefu/modules/member/member-info.vue
@@ -139,13 +139,13 @@ async function getUserData() {
 </script>

 <template>
-  <div class="bg-background flex h-full flex-auto flex-col">
+  <div class="flex h-full flex-auto flex-col bg-background">
    <div
      class="mt-4 flex h-12 items-center justify-around before:absolute before:bottom-0 before:left-0 before:h-1 before:w-full before:scale-y-[0.3] before:bg-gray-200 before:content-['']"
    >
      <div
        :class="{
-          'before:border-primary before:border-b-2': tabActivation('会员信息'),
+          'before:border-b-2 before:border-primary': tabActivation('会员信息'),
        }"
        class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
        @click="handleClick('会员信息')"
@@ -154,7 +154,7 @@ async function getUserData() {
      </div>
      <div
        :class="{
-          'before:border-primary before:border-b-2': tabActivation('最近浏览'),
+          'before:border-b-2 before:border-primary': tabActivation('最近浏览'),
        }"
        class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
        @click="handleClick('最近浏览')"
@@ -163,7 +163,7 @@ async function getUserData() {
      </div>
      <div
        :class="{
-          'before:border-primary before:border-b-2': tabActivation('交易订单'),
+          'before:border-b-2 before:border-primary': tabActivation('交易订单'),
        }"
        class="relative flex w-full cursor-pointer items-center justify-center before:pointer-events-none before:absolute before:inset-0 before:content-[''] hover:before:border-b-2 hover:before:border-gray-500/50"
        @click="handleClick('交易订单')"
--- a/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/point/activity/modules/form.vue
@@ -180,26 +180,16 @@ const [Modal, modalApi] = useVbenModal({
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
+      // 重置表单数据（新增和编辑模式都需要）
      formData.value = undefined;
      spuList.value = [];
      spuPropertyList.value = [];
      return;
    }
-    // 重置表单数据（新增和编辑模式都需要）
-    // TODO @puhui999：这里的重置，是不是在 183 到 185 已经处理了呀。
-    formData.value = undefined;
-    spuList.value = [];
-    spuPropertyList.value = [];
+
    // 加载数据
    const data = modalApi.getData<MallPointActivityApi.PointActivity>();
    if (!data || !data.id) {
-      // 新增模式：重置表单字段
-      // TODO @puhui999：197 到 201 这块的 setValues 的设置，是不是必要哈。可以看看。
-      await formApi.setValues({
-        sort: 0,
-        remark: '',
-        spuId: undefined,
-      });
      return;
    }
    // 加载数据
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/data.ts
@@ -166,26 +166,86 @@ export function useFormSchema(): VbenFormSchema[] {
      },
      rules: z.number().default(PromotionProductScopeEnum.ALL.scope),
    },
-    // TODO @puhui999：选择完删除后，自动就退出了 modal；
    {
      fieldName: 'productSpuIds',
      label: '选择商品',
      component: 'Input',
      dependencies: {
-        triggerFields: ['productScope'],
+        triggerFields: ['productScope', 'productScopeValues'],
        show: (values) => {
          return values.productScope === PromotionProductScopeEnum.SPU.scope;
        },
+        trigger(values, form) {
+          // 当加载已有数据时，根据 productScopeValues 设置 productSpuIds
+          if (
+            values.productScope === PromotionProductScopeEnum.SPU.scope &&
+            values.productScopeValues
+          ) {
+            form.setFieldValue('productSpuIds', values.productScopeValues);
+          }
+        },
+      },
+      rules: 'required',
+    },
+    {
+      fieldName: 'productCategoryIds',
+      label: '选择分类',
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope', 'productScopeValues'],
+        show: (values) => {
+          return (
+            values.productScope === PromotionProductScopeEnum.CATEGORY.scope
+          );
+        },
+        trigger(values, form) {
+          // 当加载已有数据时，根据 productScopeValues 设置 productCategoryIds
+          if (
+            values.productScope === PromotionProductScopeEnum.CATEGORY.scope &&
+            values.productScopeValues
+          ) {
+            const categoryIds = values.productScopeValues;
+            // 单选时使用数组不能反显，取第一个元素
+            form.setFieldValue(
+              'productCategoryIds',
+              Array.isArray(categoryIds) && categoryIds.length > 0
+                ? categoryIds[0]
+                : categoryIds,
+            );
+          }
+        },
      },
      rules: 'required',
    },
-    // TODO @puhui999：这里还有个分类；
    {
      fieldName: 'rules',
      label: '优惠设置',
      component: 'Input',
      formItemClass: 'items-start',
-      // TODO @puhui999：这里可能要加个 rules: 'required',
+      rules: 'required',
+    },
+    {
+      fieldName: 'productScopeValues', // 隐藏字段：用于自动同步 productScopeValues
+      component: 'Input',
+      dependencies: {
+        triggerFields: ['productScope', 'productSpuIds', 'productCategoryIds'],
+        show: () => false,
+        trigger(values, form) {
+          switch (values.productScope) {
+            case PromotionProductScopeEnum.CATEGORY.scope: {
+              const categoryIds = Array.isArray(values.productCategoryIds)
+                ? values.productCategoryIds
+                : [values.productCategoryIds];
+              form.setFieldValue('productScopeValues', categoryIds);
+              break;
+            }
+            case PromotionProductScopeEnum.SPU.scope: {
+              form.setFieldValue('productScopeValues', values.productSpuIds);
+              break;
+            }
+          }
+        },
+      },
    },
  ];
 }
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/form.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';

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

 import { useVbenModal } from '@vben/common-ui';
 import {
@@ -19,6 +19,7 @@ import {
  updateRewardActivity,
 } from '#/api/mall/promotion/reward/rewardActivity';
 import { $t } from '#/locales';
+import { ProductCategorySelect } from '#/views/mall/product/category/components';
 import { SpuShowcase } from '#/views/mall/product/spu/components';

 import { useFormSchema } from '../data';
@@ -26,10 +27,8 @@ import RewardRule from './reward-rule.vue';

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

-const formData = ref<MallRewardActivityApi.RewardActivity>({
-  // TODO @puhui999：这里的 conditionType、productScope 是不是可以删除呀。因为 data.ts 已经搞了 defaultValue；
+const formData = ref<Partial<MallRewardActivityApi.RewardActivity>>({
  conditionType: PromotionConditionTypeEnum.PRICE.type,
-  productScope: PromotionProductScopeEnum.ALL.scope,
  rules: [],
 });

@@ -39,8 +38,6 @@ const getTitle = computed(() => {
    : $t('ui.actionTitle.create', ['满减送']);
 });

-const rewardRuleRef = ref<InstanceType<typeof RewardRule>>();
-
 const [Form, formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
@@ -53,7 +50,6 @@ const [Form, formApi] = useVbenForm({
  showDefaultActions: false,
 });

-// TODO @芋艿：这里需要在简化下；
 const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    const { valid } = await formApi.validate();
@@ -63,8 +59,9 @@ const [Modal, modalApi] = useVbenModal({
    modalApi.lock();
    // 提交表单
    try {
-      const data = await formApi.getValues();
-      rewardRuleRef.value?.setRuleCoupon();
+      const values = await formApi.getValues();
+      // 合并表单值和 formData（含 id、productSpuIds、productCategoryIds 等）
+      const data = { ...formData.value, ...values };
      if (data.startAndEndTime && Array.isArray(data.startAndEndTime)) {
        data.startTime = data.startAndEndTime[0];
        data.endTime = data.startAndEndTime[1];
@@ -76,9 +73,24 @@ const [Modal, modalApi] = useVbenModal({
          item.limit = convertToInteger(item.limit || 0);
        }
      });
-      setProductScopeValues(data);
+      // 设置 productScopeValues
+      switch (data.productScope) {
+        case PromotionProductScopeEnum.CATEGORY.scope: {
+          const categoryIds = data.productCategoryIds;
+          data.productScopeValues = Array.isArray(categoryIds)
+            ? categoryIds
+            : categoryIds
+              ? [categoryIds]
+              : [];
+          break;
+        }
+        case PromotionProductScopeEnum.SPU.scope: {
+          data.productScopeValues = data.productSpuIds;
+          break;
+        }
+      }

-      await (formData.value?.id
+      await (data.id
        ? updateRewardActivity(data as MallRewardActivityApi.RewardActivity)
        : createRewardActivity(data as MallRewardActivityApi.RewardActivity));
      // 关闭并提示
@@ -91,11 +103,7 @@ const [Modal, modalApi] = useVbenModal({
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
-      formData.value = {
-        conditionType: PromotionConditionTypeEnum.PRICE.type,
-        productScope: PromotionProductScopeEnum.ALL.scope,
-        rules: [],
-      };
+      formData.value = {};
      return;
    }
    // 加载数据
@@ -116,56 +124,11 @@ const [Modal, modalApi] = useVbenModal({
      formData.value = result;
      // 设置到 values
      await formApi.setValues(result);
-
-      await getProductScope();
    } finally {
      modalApi.unlock();
    }
  },
 });
-
-async function getProductScope() {
-  switch (formData.value.productScope) {
-    case PromotionProductScopeEnum.CATEGORY.scope: {
-      await nextTick();
-      let productCategoryIds = formData.value.productScopeValues as any;
-      if (
-        Array.isArray(productCategoryIds) &&
-        productCategoryIds.length === 1
-      ) {
-        productCategoryIds = productCategoryIds[0];
-      }
-      formData.value.productCategoryIds = productCategoryIds;
-      break;
-    }
-    case PromotionProductScopeEnum.SPU.scope: {
-      formData.value.productSpuIds = formData.value.productScopeValues;
-      break;
-    }
-    default: {
-      break;
-    }
-  }
-}
-
-// TODO @puhui999：/Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts 可以类似 /Users/yunai/Java/yudao-ui-admin-vben-v5/apps/web-antd/src/views/mall/promotion/coupon/template/data.ts 的 productScopeValues（微信交流）
-function setProductScopeValues(data: any) {
-  switch (formData.value.productScope) {
-    case PromotionProductScopeEnum.CATEGORY.scope: {
-      data.productScopeValues = Array.isArray(formData.value.productCategoryIds)
-        ? formData.value.productCategoryIds
-        : [formData.value.productCategoryIds];
-      break;
-    }
-    case PromotionProductScopeEnum.SPU.scope: {
-      data.productScopeValues = formData.value.productSpuIds;
-      break;
-    }
-    default: {
-      break;
-    }
-  }
-}
 </script>

 <template>
@@ -173,13 +136,16 @@ function setProductScopeValues(data: any) {
    <Form class="mx-6">
      <!-- 自定义插槽：优惠规则 -->
      <template #rules>
-        <RewardRule ref="rewardRuleRef" v-model="formData" />
+        <RewardRule v-model="formData" />
      </template>
-
      <!-- 自定义插槽：商品选择 -->
      <template #productSpuIds>
        <SpuShowcase v-model="formData.productSpuIds" />
      </template>
+      <!-- 自定义插槽：分类选择 -->
+      <template #productCategoryIds>
+        <ProductCategorySelect v-model="formData.productCategoryIds" multiple />
+      </template>
    </Form>
  </Modal>
 </template>
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule-coupon-select.vue
@@ -2,7 +2,7 @@
 import type { MallCouponTemplateApi } from '#/api/mall/promotion/coupon/couponTemplate';
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';

-import { nextTick, onMounted, ref } from 'vue';
+import { nextTick, onMounted, ref, watch } from 'vue';

 import { CouponTemplateTakeTypeEnum, DICT_TYPE } from '@vben/constants';

@@ -32,15 +32,14 @@ interface GiveCoupon extends MallCouponTemplateApi.CouponTemplate {
 const rewardRule = useVModel(props, 'modelValue', emits);
 const list = ref<GiveCoupon[]>([]); // 选择的优惠劵列表

-// TODO @puhui999：1）命名上，可以弱化 coupon；例如说 selectRef；原因是，本身就是 coupon-select.vue；2）相关的处理的方法，最好都带 handle，如果是处理事件；例如说 deleteCoupon 改成 handleDelete；
 /** 选择优惠券 */
-const couponSelectRef = ref<InstanceType<typeof CouponSelect>>();
-function selectCoupon() {
-  couponSelectRef.value?.open();
+const selectRef = ref<InstanceType<typeof CouponSelect>>();
+function handleSelect() {
+  selectRef.value?.open();
 }

 /** 选择优惠券后的回调 */
-function handleCouponChange(val: any[]) {
+function handleChange(val: any[]) {
  for (const item of val) {
    if (list.value.some((v) => v.id === item.id)) {
      continue;
@@ -50,13 +49,18 @@ function handleCouponChange(val: any[]) {
 }

 /** 删除优惠券 */
-function deleteCoupon(index: number) {
+function handleDelete(index: number) {
  list.value.splice(index, 1);
 }

 /** 初始化赠送的优惠券列表 */
 async function initGiveCouponList() {
-  if (!rewardRule.value || !rewardRule.value.giveCouponTemplateCounts) {
+  // 校验优惠券存在
+  if (
+    !rewardRule.value ||
+    !rewardRule.value.giveCouponTemplateCounts ||
+    Object.keys(rewardRule.value.giveCouponTemplateCounts).length === 0
+  ) {
    return;
  }
  const tempLateIds = Object.keys(
@@ -74,19 +78,22 @@ async function initGiveCouponList() {
  });
 }

-/** 设置赠送的优惠券 */
-// TODO @puhui999：这个有办法不提供，就是不用 form.vue 去调用，更加透明~
-function setGiveCouponList() {
-  if (!rewardRule.value) {
-    return;
-  }
-  rewardRule.value.giveCouponTemplateCounts = {};
-  list.value.forEach((rule) => {
-    rewardRule.value.giveCouponTemplateCounts![rule.id] = rule.giveCount!;
-  });
-}
-
-defineExpose({ setGiveCouponList });
+/** 监听 list 变化，自动同步到 rewardRule */
+watch(
+  list,
+  (val) => {
+    if (!rewardRule.value) {
+      return;
+    }
+    // 核心：清空 giveCouponTemplateCounts，解决删除不生效的问题
+    rewardRule.value.giveCouponTemplateCounts = {};
+    // 设置优惠券和其数量的对应
+    val.forEach((item) => {
+      rewardRule.value.giveCouponTemplateCounts![item.id] = item.giveCount!;
+    });
+  },
+  { deep: true },
+);

 onMounted(async () => {
  await nextTick();
@@ -96,7 +103,7 @@ onMounted(async () => {

 <template>
  <div class="w-full">
-    <Button type="link" class="ml-2" @click="selectCoupon">添加优惠劵</Button>
+    <Button type="link" class="pl-0" @click="handleSelect">添加优惠券</Button>

    <div
      v-for="(item, index) in list"
@@ -130,15 +137,15 @@ onMounted(async () => {
          type="number"
        />
        <span>张</span>
-        <Button type="link" danger @click="deleteCoupon(index)">删除</Button>
+        <Button type="link" danger @click="handleDelete(index)">删除</Button>
      </div>
    </div>

    <!-- 优惠券选择 -->
    <CouponSelect
-      ref="couponSelectRef"
+      ref="selectRef"
      :take-type="CouponTemplateTakeTypeEnum.ADMIN.type"
-      @change="handleCouponChange"
+      @change="handleChange"
    />
  </div>
 </template>
--- a/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
+++ b/apps/web-antd/src/views/mall/promotion/rewardActivity/modules/reward-rule.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { MallRewardActivityApi } from '#/api/mall/promotion/reward/rewardActivity';

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

 import { PromotionConditionTypeEnum } from '@vben/constants';

@@ -23,7 +23,7 @@ import RewardRuleCouponSelect from './reward-rule-coupon-select.vue';
 defineOptions({ name: 'RewardRule' });

 const props = defineProps<{
-  modelValue: MallRewardActivityApi.RewardActivity;
+  modelValue: Partial<MallRewardActivityApi.RewardActivity>;
 }>();

 const emits = defineEmits<{
@@ -31,8 +31,6 @@ const emits = defineEmits<{
 }>();

 const formData = useVModel(props, 'modelValue', emits);
-const rewardRuleCouponSelectRef =
-  ref<InstanceType<typeof RewardRuleCouponSelect>[]>();

 const isPriceCondition = computed(() => {
  return (
@@ -55,19 +53,8 @@ function handleAdd() {

 /** 处理删除 */
 function handleDelete(ruleIndex: number) {
-  formData.value.rules.splice(ruleIndex, 1);
+  formData.value.rules?.splice(ruleIndex, 1);
 }
-
-function setRuleCoupon() {
-  if (!rewardRuleCouponSelectRef.value) {
-    return;
-  }
-  rewardRuleCouponSelectRef.value.forEach((item: any) =>
-    item.setGiveCouponList(),
-  );
-}
-
-defineExpose({ setRuleCoupon });
 </script>

 <template>
@@ -99,7 +86,6 @@ defineExpose({ setRuleCoupon });
                :min="0"
                :precision="2"
                :step="0.1"
-                :controls="false"
                class="!w-40"
                placeholder="请输入金额"
              />
@@ -114,59 +100,52 @@ defineExpose({ setRuleCoupon });
              <span>{{ isPriceCondition ? '元' : '件' }}</span>
            </div>
          </FormItem>
-
          <!-- 优惠内容 -->
-          <!-- TODO @puhui999：这里样式，让 AI 调整下；1）类似优惠劵折行啦；2）整体要左移点； -->
-          <FormItem label="优惠内容" :label-col="{ span: 4 }">
-            <div class="flex flex-col gap-4">
-              <!-- 订单金额优惠 -->
-              <div class="flex flex-col gap-2">
-                <div class="font-medium">订单金额优惠</div>
-                <div class="ml-4 flex items-center gap-2">
-                  <span>减</span>
-                  <InputNumber
-                    v-model:value="rule.discountPrice"
-                    :min="0"
-                    :precision="2"
-                    :step="0.1"
-                    :controls="false"
-                    class="!w-40"
-                    placeholder="请输入金额"
-                  />
-                  <span>元</span>
-                </div>
-              </div>
-
-              <!-- 包邮 -->
+          <FormItem
+            label="优惠内容"
+            :label-col="{ span: 4 }"
+            :wrapper-col="{ span: 20 }"
+          >
+            <div class="flex flex-col gap-2">
+              <span>订单金额优惠</span>
              <div class="flex items-center gap-2">
-                <span class="font-medium">包邮：</span>
+                <span>减</span>
+                <InputNumber
+                  v-model:value="rule.discountPrice"
+                  :min="0"
+                  :precision="2"
+                  :step="0.1"
+                  class="!w-32"
+                  placeholder="请输入金额"
+                />
+                <span>元</span>
+              </div>
+              <div class="flex items-center gap-2">
+                <span>包邮:</span>
                <Switch
                  v-model:checked="rule.freeDelivery"
                  checked-children="是"
                  un-checked-children="否"
                />
              </div>
-
-              <!-- 送积分 -->
-              <div class="flex items-center gap-2">
-                <span class="font-medium">送积分：</span>
-                <span>送</span>
-                <InputNumber
-                  v-model:value="rule.point"
-                  :min="0"
-                  :controls="false"
-                  class="!w-40"
-                  placeholder="请输入积分"
-                />
-                <span>积分</span>
+              <div>
+                <div>送积分:</div>
+                <div class="mt-2 flex items-center gap-2">
+                  <span>送</span>
+                  <InputNumber
+                    v-model:value="rule.point"
+                    :min="0"
+                    class="!w-32"
+                    placeholder="请输入积分"
+                  />
+                  <span>积分</span>
+                </div>
              </div>
-
-              <!-- 送优惠券 -->
-              <div class="flex items-start gap-2">
-                <span class="font-medium">送优惠券：</span>
+              <div class="flex items-center gap-2">
+                <span class="w-20">送优惠券:</span>
                <RewardRuleCouponSelect
-                  ref="rewardRuleCouponSelectRef"
                  :model-value="rule"
+                  @update:model-value="(val) => (formData.rules![index] = val)"
                />
              </div>
            </div>
--- 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,85 @@ 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' },
-  },
-];
+// TODO @dylan：可以把【点击上传】3 个 tab 的按钮，放到右侧的 toolbar 一起，和刷新按钮放在一行；
+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 +137,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 +156,7 @@ const [VoiceGrid, voiceGridApi] = useVbenVxeGrid({
    toolbarConfig: {
      refresh: true,
    },
-  } as VxeTableGridOptions<any>, // TODO @dylan：这里有 linter 告警；看看别的模块哈
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
 });

 const [VideoGrid, videoGridApi] = useVbenVxeGrid({
@@ -192,7 +192,7 @@ const [VideoGrid, videoGridApi] = useVbenVxeGrid({
    toolbarConfig: {
      refresh: true,
    },
-  } as VxeTableGridOptions<any>,
+  } as VxeTableGridOptions<MpMaterialApi.Material>,
 });

 function selectMaterialFun(item: any) {
@@ -288,7 +288,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 +296,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
@@ -31,10 +31,8 @@ const emit = defineEmits<{
  (e: 'update:modelValue', v: Reply): void;
 }>();

-const accessStore = useAccessStore();
 const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-temporary`;
-const HEADERS = { Authorization: `Bearer ${accessStore.accessToken}` };
-
+const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
 const reply = computed<Reply>({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val),
@@ -94,6 +92,7 @@ async function customRequest(options: any) {
  }
 }

+/** 选择素材 */
 function selectMaterial(item: any) {
  showDialog.value = false;
  reply.value.thumbMediaId = item.mediaId;
@@ -105,13 +104,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 +121,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 +137,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 +152,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 +182,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
@@ -63,11 +63,13 @@ function amrStop() {
  playing.value = false;
  amr.value.stop();
 }
-// TODO 芋艿：下面样式有点问题
 </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 +77,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 +85,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,134 @@
+import type { VxeTableGridOptions } from '#/adapter/vxe-table';
+import type { MpMaterialApi } from '#/api/mp/material';
+
+// TODO @dylan：看看 ele 要迁移一个么？
+/** 视频表格列配置 */
+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';

@@ -8,6 +9,7 @@ import { formatDate2 } from '@vben/utils';

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

+// TODO @dylan：看看 ele 要迁移一个么？
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import {
  WxLocation,
@@ -17,11 +19,9 @@ import {
  WxVoicePlayer,
 } from '#/views/mp/components';

-// TODO @dylan：vue 组件名小写 + 中划线
-
 const props = withDefaults(
  defineProps<{
-    list?: any[];
+    list?: MpMessageApi.Message[];
    loading?: boolean;
  }>(),
  {
@@ -36,8 +36,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 +80,7 @@ const columns: VxeTableGridOptions<any>['columns'] = [
  },
 ];

-const [Grid, gridApi] = useVbenVxeGrid({
+const [Grid, gridApi] = useVbenVxeGrid<MpMessageApi.Message>({
  gridOptions: {
    border: true,
    columns,
@@ -94,14 +93,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 +133,7 @@ onMounted(() => {
 <template>
  <Grid>
    <template #createTime="{ row }">
-      {{ formatDate2(row.createTime) }}
+      {{ row.createTime ? formatDate2(row.createTime) : '' }}
    </template>

    <template #sendFrom="{ row }">
@@ -143,15 +142,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 +213,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 +224,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 +233,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 +256,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/api/mp/message/index.ts
+++ b/apps/web-ele/src/api/mp/message/index.ts
@@ -2,6 +2,7 @@ import type { PageParam, PageResult } from '@vben/request';

 import { requestClient } from '#/api/request';

+// TODO @dylan：这个类的代码，应该和对应的 antd 是一致的。调整下~看看相关的 vue 是不是也要调整掉。
 /** 消息类型枚举 */
 export enum MessageType {
  IMAGE = 'image', // 图片消息
--- a/apps/web-ele/src/components/form-create/components/use-api-select.tsx
+++ b/apps/web-ele/src/components/form-create/components/use-api-select.tsx
@@ -145,8 +145,8 @@ export function useApiSelect(option: ApiSelectProps) {
            }

            return {
-              label: label,
-              value: value,
+              label,
+              value,
            };
          });
          return;
--- a/apps/web-ele/src/components/form-create/helpers.ts
+++ b/apps/web-ele/src/components/form-create/helpers.ts
@@ -202,10 +202,10 @@ export async function useFormCreateDesigner(designer: Ref) {
        value: 'id',
        options: [
          { label: '部门编号', value: 'id' },
-          { label: '部门名称', value: 'name' }
-        ]
-      }
-    ]
+          { label: '部门名称', value: 'name' },
+        ],
+      },
+    ],
  });
  const dictSelectRule = useDictSelectRule();
  const apiSelectRule0 = useSelectRule({
--- a/apps/web-ele/src/views/_core/profile/base-setting.vue
+++ b/apps/web-ele/src/views/_core/profile/base-setting.vue
@@ -1,65 +1,102 @@
 <script setup lang="ts">
-import type { BasicOption } from '@vben/types';
+import type { Recordable } from '@vben/types';

 import type { VbenFormSchema } from '#/adapter/form';
+import type { SystemUserProfileApi } from '#/api/system/user/profile';

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

-import { ProfileBaseSetting } from '@vben/common-ui';
+import { ProfileBaseSetting, z } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';

-import { getUserInfoApi } from '#/api';
+import { ElMessage } from 'element-plus';
+
+import { updateUserProfile } from '#/api/system/user/profile';
+import { $t } from '#/locales';
+
+const props = defineProps<{
+  profile?: SystemUserProfileApi.UserProfileRespVO;
+}>();
+const emit = defineEmits<{
+  (e: 'success'): void;
+}>();

 const profileBaseSettingRef = ref();

-const MOCK_ROLES_OPTIONS: BasicOption[] = [
-  {
-    label: '管理员',
-    value: 'super',
-  },
-  {
-    label: '用户',
-    value: 'user',
-  },
-  {
-    label: '测试',
-    value: 'test',
-  },
-];
-
 const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
-      fieldName: 'realName',
+      label: '用户昵称',
+      fieldName: 'nickname',
      component: 'Input',
-      label: '姓名',
-    },
-    {
-      fieldName: 'username',
-      component: 'Input',
-      label: '用户名',
-    },
-    {
-      fieldName: 'roles',
-      component: 'Select',
      componentProps: {
-        mode: 'tags',
-        options: MOCK_ROLES_OPTIONS,
+        placeholder: '请输入用户昵称',
      },
-      label: '角色',
+      rules: 'required',
    },
    {
-      fieldName: 'introduction',
-      component: 'Textarea',
-      label: '个人简介',
+      label: '用户手机',
+      fieldName: 'mobile',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户手机',
+      },
+      rules: z.string(),
+    },
+    {
+      label: '用户邮箱',
+      fieldName: 'email',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户邮箱',
+      },
+      rules: z.string().email('请输入正确的邮箱'),
+    },
+    {
+      label: '用户性别',
+      fieldName: 'sex',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number(),
    },
  ];
 });

-onMounted(async () => {
-  const data = await getUserInfoApi();
-  profileBaseSettingRef.value.getFormApi().setValues(data);
-});
+async function handleSubmit(values: Recordable<any>) {
+  try {
+    profileBaseSettingRef.value.getFormApi().setLoading(true);
+    // 提交表单
+    await updateUserProfile(values as SystemUserProfileApi.UpdateProfileReqVO);
+    // 关闭并提示
+    emit('success');
+    ElMessage.success($t('ui.actionMessage.operationSuccess'));
+  } catch (error) {
+    console.error(error);
+  } finally {
+    profileBaseSettingRef.value.getFormApi().setLoading(false);
+  }
+}
+
+/** 监听 profile 变化 */
+watch(
+  () => props.profile,
+  (newProfile) => {
+    if (newProfile) {
+      profileBaseSettingRef.value.getFormApi().setValues(newProfile);
+    }
+  },
+  { immediate: true },
+);
 </script>
 <template>
-  <ProfileBaseSetting ref="profileBaseSettingRef" :form-schema="formSchema" />
+  <ProfileBaseSetting
+    ref="profileBaseSettingRef"
+    :form-schema="formSchema"
+    @submit="handleSubmit"
+  />
 </template>
--- a/apps/web-ele/src/views/erp/stock/in/modules/item-form.vue
+++ b/apps/web-ele/src/views/erp/stock/in/modules/item-form.vue
@@ -274,9 +274,9 @@ onMounted(async () => {
    </template>

    <template #bottom>
-      <div class="border-border bg-muted mt-2 rounded border p-2">
-        <div class="text-muted-foreground flex justify-between text-sm">
-          <span class="text-foreground font-medium">合计：</span>
+      <div class="mt-2 rounded border border-border bg-muted p-2">
+        <div class="flex justify-between text-sm text-muted-foreground">
+          <span class="font-medium text-foreground">合计：</span>
          <div class="flex space-x-4">
            <span>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
            <span>
--- a/apps/web-ele/src/views/erp/stock/move/modules/item-form.vue
+++ b/apps/web-ele/src/views/erp/stock/move/modules/item-form.vue
@@ -294,9 +294,9 @@ onMounted(async () => {
    </template>

    <template #bottom>
-      <div class="border-border bg-muted mt-2 rounded border p-2">
-        <div class="text-muted-foreground flex justify-between text-sm">
-          <span class="text-foreground font-medium">合计：</span>
+      <div class="mt-2 rounded border border-border bg-muted p-2">
+        <div class="flex justify-between text-sm text-muted-foreground">
+          <span class="font-medium text-foreground">合计：</span>
          <div class="flex space-x-4">
            <span>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
            <span>
--- a/apps/web-ele/src/views/erp/stock/out/modules/item-form.vue
+++ b/apps/web-ele/src/views/erp/stock/out/modules/item-form.vue
@@ -273,8 +273,8 @@ onMounted(async () => {

    <template #bottom>
      <div class="mt-2 rounded border border-border bg-muted p-2">
-        <div class="text-muted-foreground flex justify-between text-sm">
-          <span class="text-foreground font-medium">合计：</span>
+        <div class="flex justify-between text-sm text-muted-foreground">
+          <span class="font-medium text-foreground">合计：</span>
          <div class="flex space-x-4">
            <span>数量：{{ erpCountInputFormatter(summaries.count) }}</span>
            <span>
--- a/apps/web-ele/src/views/mp/components/index.ts
+++ b/apps/web-ele/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/msg.vue'; // TODO @hw、@dylan：貌似和 antd 不同。antd 这里是 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-ele/src/views/mp/components/wx-location/wx-location.vue
+++ b/apps/web-ele/src/views/mp/components/wx-location/wx-location.vue
@@ -10,9 +10,11 @@ import { ElCol, ElLink, ElMessage, ElRow } from 'element-plus';
 import { getTradeConfig } from '#/api/mall/trade/config';

 /** 微信消息 - 定位 */
-defineOptions({ name: 'Location' });
+defineOptions({ name: 'WxLocation' });

-const props = defineProps<WxLocationProps>();
+const props = withDefaults(defineProps<WxLocationProps>(), {
+  qqMapKey: '', // QQ 地图的密钥 https://lbs.qq.com/service/staticV2/staticGuide/staticDoc
+});

 const fetchedQqMapKey = ref('');
 const resolvedQqMapKey = computed(
--- a/apps/web-ele/src/views/mp/components/wx-msg/msg-list.vue
+++ b/apps/web-ele/src/views/mp/components/wx-msg/msg-list.vue
@@ -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]':
              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-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-reply/tab-image.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-image.vue
@@ -78,8 +78,6 @@ function onDelete() {
 /** 选择素材 */
 function selectMaterial(item: any) {
  showDialog.value = false;
-
-  // reply.value.type = 'image'
  reply.value.mediaId = item.mediaId;
  reply.value.url = item.url;
  reply.value.name = item.name;
--- a/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue
+++ b/apps/web-ele/src/views/mp/components/wx-reply/tab-news.vue
@@ -8,8 +8,7 @@ import { IconifyIcon } from '@vben/icons';

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

-import MaterialSelect from '#/views/mp/components/wx-material-select/wx-material-select.vue';
-import News from '#/views/mp/components/wx-news/wx-news.vue';
+import { WxMaterialSelect, WxNews } from '#/views/mp/components';

 defineOptions({ name: 'TabNews' });

@@ -48,7 +47,7 @@ function onDelete() {
        class="mx-auto mb-[10px] w-[280px] border border-[#eaeaea] p-[10px]"
        v-if="reply.articles && reply.articles.length > 0"
      >
-        <News :articles="reply.articles" />
+        <WxNews :articles="reply.articles" />
        <ElCol class="pt-[10px] text-center">
          <ElButton type="danger" circle @click="onDelete">
            <IconifyIcon icon="lucide:trash-2" />
@@ -78,7 +77,7 @@ function onDelete() {
        append-to-body
        destroy-on-close
      >
-        <MaterialSelect
+        <WxMaterialSelect
          type="news"
          :account-id="reply.accountId"
          :news-type="newsType"
--- 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
@@ -3,8 +3,7 @@ import { ref } from 'vue';

 import { IconifyIcon } from '@vben/icons';

-// 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
-import BenzAMRRecorder from 'benz-amr-recorder';
+import BenzAMRRecorder from 'benz-amr-recorder'; // 因为微信语音是 amr 格式，所以需要用到 amr 解码器：https://www.npmjs.com/package/benz-amr-recorder
 import { ElTag } from 'element-plus';

 /** 微信消息 - 语音 */
@@ -64,23 +63,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));

 /** 搜索表单配置 */
--- a/apps/web-naive/src/views/_core/profile/base-setting.vue
+++ b/apps/web-naive/src/views/_core/profile/base-setting.vue
@@ -1,65 +1,101 @@
 <script setup lang="ts">
-import type { BasicOption } from '@vben/types';
+import type { Recordable } from '@vben/types';

 import type { VbenFormSchema } from '#/adapter/form';
+import type { SystemUserProfileApi } from '#/api/system/user/profile';

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

-import { ProfileBaseSetting } from '@vben/common-ui';
+import { ProfileBaseSetting, z } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';

-import { getUserInfoApi } from '#/api';
+import { message } from '#/adapter/naive';
+import { updateUserProfile } from '#/api/system/user/profile';
+import { $t } from '#/locales';
+
+const props = defineProps<{
+  profile?: SystemUserProfileApi.UserProfileRespVO;
+}>();
+const emit = defineEmits<{
+  (e: 'success'): void;
+}>();

 const profileBaseSettingRef = ref();

-const MOCK_ROLES_OPTIONS: BasicOption[] = [
-  {
-    label: '管理员',
-    value: 'super',
-  },
-  {
-    label: '用户',
-    value: 'user',
-  },
-  {
-    label: '测试',
-    value: 'test',
-  },
-];
-
 const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
-      fieldName: 'realName',
+      label: '用户昵称',
+      fieldName: 'nickname',
      component: 'Input',
-      label: '姓名',
-    },
-    {
-      fieldName: 'username',
-      component: 'Input',
-      label: '用户名',
-    },
-    {
-      fieldName: 'roles',
-      component: 'Select',
      componentProps: {
-        mode: 'tags',
-        options: MOCK_ROLES_OPTIONS,
+        placeholder: '请输入用户昵称',
      },
-      label: '角色',
+      rules: 'required',
    },
    {
-      fieldName: 'introduction',
-      component: 'Textarea',
-      label: '个人简介',
+      label: '用户手机',
+      fieldName: 'mobile',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户手机',
+      },
+      rules: z.string(),
+    },
+    {
+      label: '用户邮箱',
+      fieldName: 'email',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户邮箱',
+      },
+      rules: z.string().email('请输入正确的邮箱'),
+    },
+    {
+      label: '用户性别',
+      fieldName: 'sex',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number(),
    },
  ];
 });

-onMounted(async () => {
-  const data = await getUserInfoApi();
-  profileBaseSettingRef.value.getFormApi().setValues(data);
-});
+async function handleSubmit(values: Recordable<any>) {
+  try {
+    profileBaseSettingRef.value.getFormApi().setLoading(true);
+    // 提交表单
+    await updateUserProfile(values as SystemUserProfileApi.UpdateProfileReqVO);
+    // 关闭并提示
+    emit('success');
+    message.success($t('ui.actionMessage.operationSuccess'));
+  } catch (error) {
+    console.error(error);
+  } finally {
+    profileBaseSettingRef.value.getFormApi().setLoading(false);
+  }
+}
+
+/** 监听 profile 变化 */
+watch(
+  () => props.profile,
+  (newProfile) => {
+    if (newProfile) {
+      profileBaseSettingRef.value.getFormApi().setValues(newProfile);
+    }
+  },
+  { immediate: true },
+);
 </script>
 <template>
-  <ProfileBaseSetting ref="profileBaseSettingRef" :form-schema="formSchema" />
+  <ProfileBaseSetting
+    ref="profileBaseSettingRef"
+    :form-schema="formSchema"
+    @submit="handleSubmit"
+  />
 </template>
--- a/apps/web-tdesign/public/wx-xingyu.png
+++ b/apps/web-tdesign/public/wx-xingyu.png
--- a/apps/web-tdesign/src/views/_core/profile/base-setting.vue
+++ b/apps/web-tdesign/src/views/_core/profile/base-setting.vue
@@ -1,65 +1,101 @@
 <script setup lang="ts">
-import type { BasicOption } from '@vben/types';
+import type { Recordable } from '@vben/types';

 import type { VbenFormSchema } from '#/adapter/form';
+import type { SystemUserProfileApi } from '#/api/system/user/profile';

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

-import { ProfileBaseSetting } from '@vben/common-ui';
+import { ProfileBaseSetting, z } from '@vben/common-ui';
+import { DICT_TYPE } from '@vben/constants';
+import { getDictOptions } from '@vben/hooks';

-import { getUserInfoApi } from '#/api';
+import { message } from '#/adapter/tdesign';
+import { updateUserProfile } from '#/api/system/user/profile';
+import { $t } from '#/locales';
+
+const props = defineProps<{
+  profile?: SystemUserProfileApi.UserProfileRespVO;
+}>();
+const emit = defineEmits<{
+  (e: 'success'): void;
+}>();

 const profileBaseSettingRef = ref();

-const MOCK_ROLES_OPTIONS: BasicOption[] = [
-  {
-    label: '管理员',
-    value: 'super',
-  },
-  {
-    label: '用户',
-    value: 'user',
-  },
-  {
-    label: '测试',
-    value: 'test',
-  },
-];
-
 const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
-      fieldName: 'realName',
+      label: '用户昵称',
+      fieldName: 'nickname',
      component: 'Input',
-      label: '姓名',
-    },
-    {
-      fieldName: 'username',
-      component: 'Input',
-      label: '用户名',
-    },
-    {
-      fieldName: 'roles',
-      component: 'Select',
      componentProps: {
-        mode: 'tags',
-        options: MOCK_ROLES_OPTIONS,
+        placeholder: '请输入用户昵称',
      },
-      label: '角色',
+      rules: 'required',
    },
    {
-      fieldName: 'introduction',
-      component: 'Textarea',
-      label: '个人简介',
+      label: '用户手机',
+      fieldName: 'mobile',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户手机',
+      },
+      rules: z.string(),
+    },
+    {
+      label: '用户邮箱',
+      fieldName: 'email',
+      component: 'Input',
+      componentProps: {
+        placeholder: '请输入用户邮箱',
+      },
+      rules: z.string().email('请输入正确的邮箱'),
+    },
+    {
+      label: '用户性别',
+      fieldName: 'sex',
+      component: 'RadioGroup',
+      componentProps: {
+        options: getDictOptions(DICT_TYPE.SYSTEM_USER_SEX, 'number'),
+        buttonStyle: 'solid',
+        optionType: 'button',
+      },
+      rules: z.number(),
    },
  ];
 });

-onMounted(async () => {
-  const data = await getUserInfoApi();
-  profileBaseSettingRef.value.getFormApi().setValues(data);
-});
+async function handleSubmit(values: Recordable<any>) {
+  try {
+    profileBaseSettingRef.value.getFormApi().setLoading(true);
+    // 提交表单
+    await updateUserProfile(values as SystemUserProfileApi.UpdateProfileReqVO);
+    // 关闭并提示
+    emit('success');
+    message.success($t('ui.actionMessage.operationSuccess'));
+  } catch (error) {
+    console.error(error);
+  } finally {
+    profileBaseSettingRef.value.getFormApi().setLoading(false);
+  }
+}
+
+/** 监听 profile 变化 */
+watch(
+  () => props.profile,
+  (newProfile) => {
+    if (newProfile) {
+      profileBaseSettingRef.value.getFormApi().setValues(newProfile);
+    }
+  },
+  { immediate: true },
+);
 </script>
 <template>
-  <ProfileBaseSetting ref="profileBaseSettingRef" :form-schema="formSchema" />
+  <ProfileBaseSetting
+    ref="profileBaseSettingRef"
+    :form-schema="formSchema"
+    @submit="handleSubmit"
+  />
 </template>
--- a/internal/lint-configs/eslint-config/src/configs/ignores.ts
+++ b/internal/lint-configs/eslint-config/src/configs/ignores.ts
@@ -46,6 +46,8 @@ export async function ignores(): Promise<Linter.Config[]> {
        '**/*.sh',
        '**/*.ttf',
        '**/*.woff',
+        '**/public/**',
+        '**/china.json',
      ],
    },
  ];
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -136,8 +136,8 @@ catalog:
  highlight.js: ^11.11.1
  html-minifier-terser: ^7.2.0
  is-ci: ^4.1.0
-  jsencrypt: ^3.3.2
  jiti: ^2.6.1
+  jsencrypt: ^3.3.2
  json-bigint: ^1.0.0
  jsonc-eslint-parser: ^2.4.1
  jsonwebtoken: ^9.0.2
@@ -220,9 +220,9 @@ catalog:
  vue-router: ^4.5.1
  vue-tippy: ^6.7.1
  vue-tsc: ^3.1.4
+  vuedraggable: ^4.1.0
  vue3-print-nb: "^0.1.4"
  vue3-signature: ^0.2.4
-  vuedraggable: ^4.1.0
  video.js: ^7.21.6
  vxe-pc-ui: ^4.10.22
  vxe-table: ^4.17.14